@elementor/editor-variables 3.33.0-156 → 3.33.0-158

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-156",
+  "version": "3.33.0-158",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-156",
-    "@elementor/editor-canvas": "3.33.0-156",
-    "@elementor/editor-controls": "3.33.0-156",
-    "@elementor/editor-current-user": "3.33.0-156",
-    "@elementor/editor-editing-panel": "3.33.0-156",
-    "@elementor/editor-panels": "3.33.0-156",
-    "@elementor/editor-props": "3.33.0-156",
-    "@elementor/editor-ui": "3.33.0-156",
-    "@elementor/editor-v1-adapters": "3.33.0-156",
-    "@elementor/http-client": "3.33.0-156",
+    "@elementor/editor": "3.33.0-158",
+    "@elementor/editor-canvas": "3.33.0-158",
+    "@elementor/editor-controls": "3.33.0-158",
+    "@elementor/editor-current-user": "3.33.0-158",
+    "@elementor/editor-editing-panel": "3.33.0-158",
+    "@elementor/editor-panels": "3.33.0-158",
+    "@elementor/editor-props": "3.33.0-158",
+    "@elementor/editor-ui": "3.33.0-158",
+    "@elementor/editor-v1-adapters": "3.33.0-158",
+    "@elementor/http-client": "3.33.0-158",
     "@elementor/icons": "1.46.0",
-    "@elementor/mixpanel": "3.33.0-156",
-    "@elementor/schema": "3.33.0-156",
+    "@elementor/mixpanel": "3.33.0-158",
+    "@elementor/schema": "3.33.0-158",
     "@elementor/ui": "1.36.12",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/ui/no-search-results.tsx

@@ -14,10 +14,9 @@ export const NoSearchResults = ( { searchValue, onClear, icon }: Props ) => {
 			gap={ 1 }
 			alignItems="center"
 			justifyContent="center"
-			height="100%"
 			p={ 2.5 }
 			color="text.secondary"
-			sx={ { pb: 3.5 } }
+			sx={ { pb: 3.5, pt: 5 } }
 		>
 			{ icon }
 			<Typography align="center" variant="subtitle2">

package/src/components/variables-manager/hooks/use-variables-manager-state.ts

@@ -5,20 +5,24 @@ import { generateTempId } from '../../../batch-operations';
 import { getVariables } from '../../../hooks/use-prop-variables';
 import { service } from '../../../service';
 import { type TVariablesList } from '../../../storage';
+import { filterBySearch } from '../../../utils/filter-by-search';
 import { ERROR_MESSAGES } from '../../../utils/validations';
 
 export const useVariablesManagerState = () => {
 	const [ variables, setVariables ] = useState( () => getVariables( false ) );
 	const [ deletedVariables, setDeletedVariables ] = useState< string[] >( [] );
-	const [ ids, setIds ] = useState< string[] >( () => Object.keys( getVariables( false ) ) );
 	const [ isDirty, setIsDirty ] = useState( false );
 	const [ hasValidationErrors, setHasValidationErrors ] = useState( false );
 	const [ isSaving, setIsSaving ] = useState( false );
+	const [ searchValue, setSearchValue ] = useState( '' );
 
-	const handleOnChange = useCallback( ( newVariables: TVariablesList ) => {
-		setVariables( newVariables );
-		setIsDirty( true );
-	}, [] );
+	const handleOnChange = useCallback(
+		( newVariables: TVariablesList ) => {
+			setVariables( { ...variables, ...newVariables } );
+			setIsDirty( true );
+		},
+		[ variables ]
+	);
 
 	const createVariable = useCallback( ( type: string, defaultName: string, defaultValue: string ) => {
 		const newId = generateTempId();
@@ -30,7 +34,6 @@ export const useVariablesManagerState = () => {
 		};
 
 		setVariables( ( prev ) => ( { ...prev, [ newId ]: newVariable } ) );
-		setIds( ( prev ) => [ ...prev, newId ] );
 		setIsDirty( true );
 
 		return newId;
@@ -42,6 +45,10 @@ export const useVariablesManagerState = () => {
 		setIsDirty( true );
 	}, [] );
 
+	const handleSearch = ( searchTerm: string ) => {
+		setSearchValue( searchTerm );
+	};
+
 	const handleSave = useCallback( async (): Promise< { success: boolean; error?: string } > => {
 		try {
 			const originalVariables = getVariables( false );
@@ -53,7 +60,6 @@ export const useVariablesManagerState = () => {
 				const updatedVariables = service.variables();
 
 				setVariables( updatedVariables );
-				setIds( Object.keys( updatedVariables ) );
 				setDeletedVariables( [] );
 				setIsDirty( false );
 				setIsSaving( false );
@@ -67,18 +73,25 @@ export const useVariablesManagerState = () => {
 		}
 	}, [ variables ] );
 
+	const filteredVariables = () => {
+		const list = Object.entries( variables ).map( ( [ id, value ] ) => ( { ...value, id } ) );
+		const filtered = filterBySearch( list, searchValue );
+
+		return Object.fromEntries( filtered.map( ( { id, ...rest } ) => [ id, rest ] ) );
+	};
+
 	return {
-		variables,
+		variables: filteredVariables(),
 		deletedVariables,
-		ids,
 		isDirty,
 		hasValidationErrors,
-		setIds,
 		handleOnChange,
 		createVariable,
 		handleDeleteVariable,
 		handleSave,
 		isSaving,
+		handleSearch,
+		searchValue,
 		setHasValidationErrors,
 	};
 };

package/src/components/variables-manager/variables-manager-panel.tsx

@@ -8,13 +8,14 @@ import {
 	PanelHeader,
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
-import { SaveChangesDialog, ThemeProvider, useDialog } from '@elementor/editor-ui';
+import { SaveChangesDialog, SearchField, ThemeProvider, useDialog } from '@elementor/editor-ui';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
 import { ColorFilterIcon, TrashIcon } from '@elementor/icons';
 import { Alert, Box, Button, CloseButton, Divider, ErrorBoundary, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
+import { NoSearchResults } from '../ui/no-search-results';
 import { useAutoEdit } from './hooks/use-auto-edit';
 import { useVariablesManagerState } from './hooks/use-variables-manager-state';
 import { SIZE, VariableManagerCreateMenu } from './variables-manager-create-menu';
@@ -40,15 +41,15 @@ export function VariablesManagerPanel() {
 
 	const {
 		variables,
-		ids,
 		isDirty,
 		hasValidationErrors,
-		setIds,
+		searchValue,
 		handleOnChange,
 		createVariable,
 		handleDeleteVariable,
 		handleSave,
 		isSaving,
+		handleSearch,
 		setHasValidationErrors,
 	} = useVariablesManagerState();
 
@@ -98,6 +99,8 @@ export function VariablesManagerPanel() {
 		},
 	];
 
+	const hasVariables = Object.keys( variables ).length !== 0;
+
 	return (
 		<ThemeProvider>
 			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
@@ -125,7 +128,6 @@ export function VariablesManagerPanel() {
 									/>
 								</Stack>
 							</Stack>
-							<Divider sx={ { width: '100%' } } />
 						</Stack>
 					</PanelHeader>
 					<PanelBody
@@ -135,16 +137,30 @@ export function VariablesManagerPanel() {
 							height: '100%',
 						} }
 					>
-						<VariablesManagerTable
-							menuActions={ menuActions }
-							variables={ variables }
-							onChange={ handleOnChange }
-							ids={ ids }
-							onIdsChange={ setIds }
-							autoEditVariableId={ autoEditVariableId }
-							onAutoEditComplete={ handleAutoEditComplete }
-							onFieldError={ setHasValidationErrors }
+						<SearchField
+							placeholder={ __( 'Search', 'elementor' ) }
+							value={ searchValue }
+							onSearch={ handleSearch }
 						/>
+						<Divider sx={ { width: '100%' } } />
+						{ hasVariables && (
+							<VariablesManagerTable
+								menuActions={ menuActions }
+								variables={ variables }
+								onChange={ handleOnChange }
+								autoEditVariableId={ autoEditVariableId }
+								onAutoEditComplete={ handleAutoEditComplete }
+								onFieldError={ setHasValidationErrors }
+							/>
+						) }
+
+						{ ! hasVariables && (
+							<NoSearchResults
+								searchValue={ searchValue }
+								onClear={ () => handleSearch( '' ) }
+								icon={ <ColorFilterIcon fontSize="large" /> }
+							/>
+						) }
 					</PanelBody>
 
 					<PanelFooter>

package/src/components/variables-manager/variables-manager-table.tsx

@@ -28,8 +28,6 @@ type Props = {
 	menuActions: VariableManagerMenuAction[];
 	variables: TVariablesList;
 	onChange: ( variables: TVariablesList ) => void;
-	ids: string[];
-	onIdsChange: ( ids: string[] ) => void;
 	autoEditVariableId?: string;
 	onAutoEditComplete?: () => void;
 	onFieldError?: ( hasError: boolean ) => void;
@@ -39,8 +37,6 @@ export const VariablesManagerTable = ( {
 	menuActions,
 	variables,
 	onChange: handleOnChange,
-	ids,
-	onIdsChange: setIds,
 	autoEditVariableId,
 	onAutoEditComplete,
 	onFieldError,
@@ -71,17 +67,9 @@ export const VariablesManagerTable = ( {
 		}
 	};
 
-	useEffect( () => {
-		const sortedIds = [ ...ids ].sort( sortVariablesOrder( variables ) );
-
-		if ( JSON.stringify( sortedIds ) !== JSON.stringify( ids ) ) {
-			setIds( sortedIds );
-		}
-	}, [ ids, variables, setIds ] );
-
+	const ids = Object.keys( variables ).sort( sortVariablesOrder( variables ) );
 	const rows = ids
 		.filter( ( id ) => ! variables[ id ].deleted )
-		.sort( sortVariablesOrder( variables ) )
 		.map( ( id ) => {
 			const variable = variables[ id ];
 			const variableType = getVariableType( variable.type );
@@ -100,6 +88,22 @@ export const VariablesManagerTable = ( {
 		tableLayout: 'fixed',
 	};
 
+	const handleReorder = ( newIds: string[] ) => {
+		const updatedVariables = { ...variables };
+
+		newIds.forEach( ( id, index ) => {
+			const current = updatedVariables[ id ];
+
+			if ( ! current ) {
+				return;
+			}
+
+			updatedVariables[ id ] = Object.assign( {}, current, { order: index + 1 } );
+		} );
+
+		handleOnChange( updatedVariables );
+	};
+
 	return (
 		<TableContainer ref={ tableContainerRef } sx={ { overflow: 'initial' } }>
 			<Table sx={ tableSX } aria-label="Variables manager list with drag and drop reordering" stickyHeader>
@@ -114,19 +118,7 @@ export const VariablesManagerTable = ( {
 				<TableBody>
 					<UnstableSortableProvider
 						value={ ids }
-						onChange={ ( newIds ) => {
-							const updatedVariables = { ...variables };
-							newIds.forEach( ( id, index ) => {
-								if ( updatedVariables[ id ] ) {
-									updatedVariables[ id ] = {
-										...updatedVariables[ id ],
-										order: index + 1,
-									};
-								}
-							} );
-							handleOnChange( updatedVariables );
-							setIds( newIds );
-						} }
+						onChange={ handleReorder }
 						variant="static"
 						restrictAxis
 						dragOverlay={ ( { children: dragOverlayChildren, ...dragOverlayProps } ) => (

package/src/components/variables-selection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 import { PopoverBody } from '@elementor/editor-editing-panel';
-import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
+import { PopoverHeader, PopoverMenuList, SearchField, type VirtualizedItem } from '@elementor/editor-ui';
 import { ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
 import { Divider, IconButton } from '@elementor/ui';
 import { __, sprintf } from '@wordpress/i18n';
@@ -110,7 +110,7 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 			/>
 
 			{ hasVariables && (
-				<PopoverSearch
+				<SearchField
 					value={ searchValue }
 					onSearch={ handleSearch }
 					placeholder={ __( 'Search', 'elementor' ) }

package/src/hooks/use-prop-variables.ts

@@ -5,6 +5,7 @@ import { type PropKey } from '@elementor/editor-props';
 import { useVariableType } from '../context/variable-type-context';
 import { service } from '../service';
 import { type NormalizedVariable, type Variable } from '../types';
+import { filterBySearch } from '../utils/filter-by-search';
 
 export const getVariables = ( includeDeleted = true ) => {
 	const variables = service.variables();
@@ -33,7 +34,7 @@ export const useFilteredVariables = ( searchValue: string, propTypeKey: string )
 	const baseVariables = usePropVariables( propTypeKey );
 
 	const typeFilteredVariables = useVariableSelectionFilter( baseVariables );
-	const searchFilteredVariables = filterVariablesBySearchValue( typeFilteredVariables, searchValue );
+	const searchFilteredVariables = filterBySearch( typeFilteredVariables, searchValue );
 	const sortedVariables = searchFilteredVariables.sort( ( a, b ) => {
 		const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
 		const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
@@ -55,11 +56,6 @@ const useVariableSelectionFilter = ( variables: NormalizedVariable[] ): Normaliz
 	return selectionFilter ? selectionFilter( variables, propType ) : variables;
 };
 
-const filterVariablesBySearchValue = ( variables: NormalizedVariable[], searchValue: string ): NormalizedVariable[] => {
-	const lowerSearchValue = searchValue.toLowerCase();
-	return variables.filter( ( { label } ) => label.toLowerCase().includes( lowerSearchValue ) );
-};
-
 const usePropVariables = ( propKey: PropKey ): NormalizedVariable[] => {
 	return useMemo( () => normalizeVariables( propKey ), [ propKey ] );
 };

package/src/utils/filter-by-search.ts

@@ -0,0 +1,5 @@
+export function filterBySearch< T extends { label: string } >( variables: T[], searchValue: string ): T[] {
+	const lowerSearchValue = searchValue.toLowerCase();
+
+	return variables.filter( ( variable ) => variable.label.toLowerCase().includes( lowerSearchValue ) );
+}