Merge branch 'development' into feat/issue-3063

Author: HardeepAsrani

assets/apps/customizer-controls/src/builder/components/Builder.tsx

@@ -138,7 +138,7 @@ const Builder: React.FC<Props> = ({ value, hidden, portalMount }) => {
 								setMobileOverlayDismissed(true);
 							}}
 						>
-							{__('Enable', 'neve-pro-addon')}
+							{__('Enable', 'neve')}
 						</Button>
 					</div>
 				)}

assets/apps/customizer-controls/src/builder/components/ComponentsPopover.tsx

@@ -80,6 +80,16 @@ const ComponentsPopover: React.FC<Props> = ({
 		});
 	};
 
+	const getFilteredUpsells = () => {
+		if (!searchQuery) {
+			return upsells;
+		}
+
+		return upsells.filter(({ name }) => {
+			return name.toLowerCase().includes(searchQuery);
+		});
+	};
+
 	const renderItem = (item: ItemInterface, idx: number) => {
 		if (!item.id) {
 			return null;
@@ -113,10 +123,15 @@ const ComponentsPopover: React.FC<Props> = ({
 	const renderItems = () => {
 		const themeItems = getSidebarItems();
 		const boosterItems = getSidebarItems(true);
+		const filteredUpsells = getFilteredUpsells();
 
 		let noComponents = null;
 
-		if (themeItems.length === 0 && boosterItems.length === 0) {
+		if (
+			themeItems.length === 0 &&
+			boosterItems.length === 0 &&
+			filteredUpsells.length === 0
+		) {
 			noComponents = (
 				<div className="no-components">
 					<span>
@@ -156,13 +171,13 @@ const ComponentsPopover: React.FC<Props> = ({
 						)}
 					</>
 				)}
-				{boosterItems.length < 1 && upsells.length > 0 && (
+				{boosterItems.length < 1 && filteredUpsells.length > 0 && (
 					<>
 						<h4>
 							{__('PRO', 'neve')} {__('Components', 'neve')}
 						</h4>
 						<div className="items-popover-list upsell-list">
-							{upsells.map(({ name, icon }, idx) => {
+							{filteredUpsells.map(({ name, icon }, idx) => {
 								return renderUpsell(idx, icon, name);
 							})}
 						</div>

assets/apps/customizer-controls/src/common/useKeyboardSorting.js

@@ -0,0 +1,84 @@
+import { useCallback, useRef, useEffect } from '@wordpress/element';
+
+/**
+ * Custom hook for keyboard-based sorting of list items.
+ *
+ * @param {number} index - Current item index in the list
+ * @param {number} totalItems - Total number of items in the list
+ * @param {Function} onMove - Callback function to move item (receives fromIndex, toIndex)
+ * @param {boolean} isActive - External state for whether keyboard mode is active
+ * @param {Function} setIsActive - Function to set the active state
+ * @return {Object} Hook state and handlers
+ */
+const useKeyboardSorting = (
+	index,
+	totalItems,
+	onMove,
+	isActive,
+	setIsActive
+) => {
+	const handleRef = useRef(null);
+	const previousIndexRef = useRef(index);
+
+	// Handle keyboard events
+	const handleKeyDown = useCallback(
+		(e) => {
+			if (e.key === ' ' || e.key === 'Spacebar') {
+				e.preventDefault();
+				setIsActive(!isActive);
+				return;
+			}
+
+			if (!isActive) {
+				return;
+			}
+
+			if (e.key === 'ArrowUp' && index > 0) {
+				e.preventDefault();
+				const newIndex = index - 1;
+				previousIndexRef.current = index;
+				onMove(index, newIndex);
+			}
+
+			if (e.key === 'ArrowDown' && index < totalItems - 1) {
+				e.preventDefault();
+				const newIndex = index + 1;
+				previousIndexRef.current = index;
+				onMove(index, newIndex);
+			}
+			if (e.key === 'Escape') {
+				e.preventDefault();
+				setIsActive(false);
+			}
+		},
+		[isActive, index, totalItems, onMove, setIsActive]
+	);
+
+	const handleBlur = useCallback(() => {
+		setIsActive(false);
+	}, [setIsActive]);
+
+	useEffect(() => {
+		if (
+			isActive &&
+			handleRef.current &&
+			previousIndexRef.current !== index
+		) {
+			// Small delay to ensure DOM has updated
+			window.requestAnimationFrame(() => {
+				if (handleRef.current) {
+					handleRef.current.focus();
+				}
+			});
+		}
+		previousIndexRef.current = index;
+	}, [index, isActive]);
+
+	return {
+		handleRef,
+		handleKeyDown,
+		handleBlur,
+	};
+};
+
+export default useKeyboardSorting;

assets/apps/customizer-controls/src/controls.js

@@ -350,6 +350,50 @@ const checkHasElementorTemplates = () => {
 	}
 };
 
+/**
+ * Find the Scroll to top button within the customizer preview.
+ */
+function findScrollToTopBtn() {
+	const iframeElement = document.querySelector('#customize-preview iframe');
+
+	if (!iframeElement) {
+		return;
+	}
+
+	const scrollToTopBtn =
+		iframeElement.contentWindow.document.querySelector('#scroll-to-top');
+
+	return scrollToTopBtn;
+}
+
+/**
+ * Show the Scroll to Top button as soon as the user enters the section in Customizer.
+ */
+function previewScrollToTopChanges() {
+	wp.customize.section('neve_scroll_to_top', (section) => {
+		section.expanded.bind((isExpanded) => {
+			const scrollToTopBtn = findScrollToTopBtn();
+
+			if (!scrollToTopBtn) {
+				return;
+			}
+
+			// If Scroll to top customizer section is expanded
+			if (isExpanded) {
+				wp.customize.previewer.bind('ready', () => {
+					wp.customize.previewer.send('nv-opened-stt', true);
+				});
+				scrollToTopBtn.style.visibility = 'visible';
+				scrollToTopBtn.style.opacity = '1';
+			} else {
+				// Hide the button when we leave the section
+				scrollToTopBtn.style.visibility = 'hidden';
+				scrollToTopBtn.style.opacity = '0';
+			}
+		});
+	});
+}
+
 window.wp.customize.bind('ready', () => {
 	initStarterContentNotice();
 	initDocSection();
@@ -365,6 +409,7 @@ window.wp.customize.bind('ready', () => {
 	initSearchCustomizer();
 	initLocalGoogleFonts();
 	initStyleBookButton();
+	previewScrollToTopChanges();
 });
 
 window.HFG = {

assets/apps/customizer-controls/src/customizer-search/MainSearch.tsx

@@ -1,6 +1,5 @@
 import { createPortal } from '@wordpress/element';
 import React, { useState } from 'react';
-import SearchToggle from './SearchToggle';
 import SearchComponent, { Control } from './SearchComponent';
 import SearchResults from './SearchResults';
 
@@ -20,23 +19,13 @@ type MainSearchProps = {
  * @class
  */
 const MainSearch: React.FC<MainSearchProps> = ({ search, button, results }) => {
-	const [isOpened, setIsOpened] = useState(false);
 	const [query, setQuery] = useState('');
 	const [matchResults, setMatchResults] = useState([] as Control[]);
 
 	return (
 		<>
-			{createPortal(
-				<SearchToggle
-					onToggle={() => {
-						setIsOpened(!isOpened);
-					}}
-				/>,
-				button
-			)}
 			{createPortal(
 				<SearchComponent
-					isOpened={isOpened}
 					search={query}
 					setSearch={setQuery}
 					matchResults={matchResults}

assets/apps/customizer-controls/src/customizer-search/SearchComponent.tsx

@@ -60,7 +60,6 @@ declare global {
  * Type SearchComponentProps
  */
 type SearchComponentProps = {
-	isOpened: boolean;
 	search: string;
 	setSearch: (value: string) => void;
 	matchResults: Control[];
@@ -75,7 +74,6 @@ type SearchComponentProps = {
  * @class
  */
 const SearchComponent: React.FC<SearchComponentProps> = ({
-	isOpened,
 	search,
 	setSearch,
 	matchResults,
@@ -128,24 +126,6 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
 		});
 	}, []);
 
-	/**
-	 * This `useEffect()` is being used to listen for the toggleEvent
-	 * from `SearchToggle` component.
-	 */
-	useEffect(() => {
-		if (isOpened) {
-			document
-				.getElementById('neve-customize-search-field')
-				?.classList.add('visible');
-			document.getElementById('nv-customizer-search-input')?.focus();
-		} else {
-			document
-				.getElementById('neve-customize-search-field')
-				?.classList.remove('visible');
-			clearField();
-		}
-	}, [isOpened]);
-
 	useEffect(() => {
 		if (search === '') {
 			if (customizerPanels?.classList.contains('search-not-found')) {
@@ -217,15 +197,12 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
 	return (
 		<>
 			<span className="accordion-section">
-				<span className="search-input">
-					{__('Search', 'neve') +
-						' ' +
-						__('Settings', 'neve').toLowerCase()}
-				</span>
 				<span className="nv-search-wrap">
 					<input
 						type="text"
-						placeholder={__('Search', 'neve')}
+						placeholder={
+							__('Search', 'neve') + ' ' + __('Settings', 'neve')
+						}
 						id="nv-customizer-search-input"
 						className="nv-customizer-search-input"
 						value={search}