@elementor/editor-variables 3.35.0-443 → 3.35.0-444

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.35.0-443",
+  "version": "3.35.0-444",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-443",
-    "@elementor/editor-canvas": "3.35.0-443",
-    "@elementor/editor-controls": "3.35.0-443",
-    "@elementor/editor-current-user": "3.35.0-443",
-    "@elementor/editor-editing-panel": "3.35.0-443",
-    "@elementor/editor-mcp": "3.35.0-443",
-    "@elementor/editor-panels": "3.35.0-443",
-    "@elementor/editor-props": "3.35.0-443",
-    "@elementor/editor-ui": "3.35.0-443",
-    "@elementor/editor-v1-adapters": "3.35.0-443",
-    "@elementor/http-client": "3.35.0-443",
+    "@elementor/editor": "3.35.0-444",
+    "@elementor/editor-canvas": "3.35.0-444",
+    "@elementor/editor-controls": "3.35.0-444",
+    "@elementor/editor-current-user": "3.35.0-444",
+    "@elementor/editor-editing-panel": "3.35.0-444",
+    "@elementor/editor-mcp": "3.35.0-444",
+    "@elementor/editor-panels": "3.35.0-444",
+    "@elementor/editor-props": "3.35.0-444",
+    "@elementor/editor-ui": "3.35.0-444",
+    "@elementor/editor-v1-adapters": "3.35.0-444",
+    "@elementor/http-client": "3.35.0-444",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-443",
-    "@elementor/schema": "3.35.0-443",
+    "@elementor/mixpanel": "3.35.0-444",
+    "@elementor/schema": "3.35.0-444",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-443",
+    "@elementor/utils": "3.35.0-444",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -5,6 +5,8 @@ import { getVariables } from '../../../hooks/use-prop-variables';
 import { service } from '../../../service';
 import { type TVariablesList } from '../../../storage';
 import { filterBySearch } from '../../../utils/filter-by-search';
+import { applySelectionFilters, variablesToList } from '../../../utils/variables-to-list';
+import { getVariableTypes } from '../../../variables-registry/variable-type-registry';
 
 export const useVariablesManagerState = () => {
 	const [ variables, setVariables ] = useState( () => getVariables( false ) );
@@ -64,12 +66,13 @@ export const useVariablesManagerState = () => {
 		return { success: result.success };
 	}, [ variables ] );
 
-	const filteredVariables = () => {
-		const list = Object.entries( variables ).map( ( [ id, value ] ) => ( { ...value, id } ) );
-		const filtered = filterBySearch( list, searchValue );
+	const filteredVariables = useCallback( () => {
+		const list = variablesToList( variables ).filter( ( v ) => ! v.deleted );
+		const typeFiltered = applySelectionFilters( list, getVariableTypes() );
+		const searchFiltered = filterBySearch( typeFiltered, searchValue );
 
-		return Object.fromEntries( filtered.map( ( { id, ...rest } ) => [ id, rest ] ) );
-	};
+		return Object.fromEntries( searchFiltered.map( ( { key, ...rest } ) => [ key, rest ] ) );
+	}, [ variables, searchValue ] );
 
 	return {
 		variables: filteredVariables(),

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

@@ -156,7 +156,7 @@ export function VariablesManagerPanel() {
 		},
 	];
 
-	const hasVariables = Object.values( variables ).some( ( variable ) => ! variable.deleted );
+	const hasVariables = Object.keys( variables ).length > 0;
 
 	return (
 		<ThemeProvider>

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

@@ -76,7 +76,6 @@ export const VariablesManagerTable = ( {
 
 	const ids = Object.keys( variables ).sort( sortVariablesOrder( variables ) );
 	const rows = ids
-		.filter( ( id ) => ! variables[ id ].deleted )
 		.map( ( id ) => {
 			const variable = variables[ id ];
 			const variableType = getVariableType( variable.type );

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

@@ -6,6 +6,7 @@ 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';
+import { toNormalizedVariable, variablesToList } from '../utils/variables-to-list';
 import { getVariableType, getVariableTypes } from '../variables-registry/variable-type-registry';
 
 export const getVariables = ( includeDeleted = true ) => {
@@ -75,18 +76,13 @@ const getMatchingTypes = ( propKey: string ): string[] => {
 	return matchingTypes;
 };
 
-const normalizeVariables = ( propKey: string ) => {
+const normalizeVariables = ( propKey: string ): NormalizedVariable[] => {
 	const variables = getVariables( false );
 	const matchingTypes = getMatchingTypes( propKey );
 
-	return Object.entries( variables )
-		.filter( ( [ , variable ] ) => matchingTypes.includes( variable.type ) )
-		.map( ( [ key, { label, value, order } ] ) => ( {
-			key,
-			label,
-			value,
-			order,
-		} ) );
+	return variablesToList( variables )
+		.filter( ( variable ) => matchingTypes.includes( variable.type ) )
+		.map( toNormalizedVariable );
 };
 
 const extractId = ( { id }: { id: string } ): string => id;

package/src/utils/variables-to-list.ts

@@ -0,0 +1,33 @@
+import { type TVariable, type TVariablesList } from '../storage';
+import { type NormalizedVariable } from '../types';
+import { type VariableTypesMap } from '../variables-registry/create-variable-type-registry';
+
+export type VariableWithKey = TVariable & { key: string };
+
+export const variablesToList = ( variables: TVariablesList ): VariableWithKey[] => {
+	return Object.entries( variables ).map( ( [ key, variable ] ) => ( { key, ...variable } ) );
+};
+
+export const toNormalizedVariable = ( { key, label, value, order }: VariableWithKey ): NormalizedVariable => ( {
+	key,
+	label,
+	value,
+	order,
+} );
+
+type VariableWithType = NormalizedVariable & { type: string };
+
+export const applySelectionFilters = (
+	variables: VariableWithKey[],
+	variableTypes: VariableTypesMap
+): VariableWithType[] => {
+	const grouped: Record< string, VariableWithKey[] > = {};
+	variables.forEach( ( item ) => ( grouped[ item.type ] ??= [] ).push( item ) );
+
+	return Object.entries( grouped ).flatMap( ( [ type, vars ] ) => {
+		const filter = variableTypes[ type ]?.selectionFilter;
+		const normalized = vars.map( toNormalizedVariable );
+
+		return ( filter?.( normalized ) ?? normalized ).map( ( v ) => ( { ...v, type } ) );
+	} );
+};

package/src/variables-registry/create-variable-type-registry.ts

@@ -44,7 +44,7 @@ type VariableTypeOptions = {
 	styleTransformer?: AnyTransformer;
 	fallbackPropTypeUtil: FallbackPropTypeUtil;
 	propTypeUtil: PropTypeUtil< string, string >;
-	selectionFilter?: ( variables: NormalizedVariable[], propType: PropType ) => NormalizedVariable[];
+	selectionFilter?: ( variables: NormalizedVariable[], propType?: PropType ) => NormalizedVariable[];
 	valueTransformer?: ( value: string, type?: string ) => PropValue;
 	isCompatible?: ( propType: PropType, variable: Variable ) => boolean;
 	emptyState?: JSX.Element;