@elementor/editor-variables 3.32.0-25 → 3.32.0-26

package/package.json

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

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

@@ -1,8 +1,10 @@
 import { useMemo } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
 import { type PropKey } from '@elementor/editor-props';
 
+import { useVariableType } from '../context/variable-type-context';
 import { service } from '../service';
-import { type Variable } from '../types';
+import { type NormalizedVariable, type Variable } from '../types';
 
 export const useVariable = ( key: string ) => {
 	const variables = service.variables();
@@ -18,26 +20,37 @@ export const useVariable = ( key: string ) => {
 };
 
 export const useFilteredVariables = ( searchValue: string, propTypeKey: string ) => {
-	const variables = usePropVariables( propTypeKey );
+	const baseVariables = usePropVariables( propTypeKey );
 
-	const filteredVariables = variables.filter( ( { label } ) => {
-		return label.toLowerCase().includes( searchValue.toLowerCase() );
-	} );
+	const typeFilteredVariables = useVariableSelectionFilter( baseVariables );
+	const searchFilteredVariables = filterVariablesBySearchValue( typeFilteredVariables, searchValue );
 
 	return {
-		list: filteredVariables,
-		hasMatches: filteredVariables.length > 0,
-		isSourceNotEmpty: variables.length > 0,
+		list: searchFilteredVariables,
+		hasMatches: searchFilteredVariables.length > 0,
+		isSourceNotEmpty: typeFilteredVariables.length > 0,
 	};
 };
 
-const usePropVariables = ( propKey: PropKey ) => {
+const useVariableSelectionFilter = ( variables: NormalizedVariable[] ): NormalizedVariable[] => {
+	const { selectionFilter } = useVariableType();
+	const { propType } = useBoundProp();
+
+	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 ] );
 };
 
 const isNotDeleted = ( { deleted }: { deleted?: boolean } ) => ! deleted;
 
-const normalizeVariables = ( propKey: string ) => {
+const normalizeVariables = ( propKey: string ): NormalizedVariable[] => {
 	const variables = service.variables();
 
 	return Object.entries( variables )
@@ -49,26 +62,23 @@ const normalizeVariables = ( propKey: string ) => {
 		} ) );
 };
 
+const extractId = ( { id }: { id: string } ): string => id;
+
 export const createVariable = ( newVariable: Variable ): Promise< string > => {
-	return service.create( newVariable ).then( ( { id }: { id: string } ) => {
-		return id;
-	} );
+	return service.create( newVariable ).then( extractId );
 };
 
-export const updateVariable = ( updateId: string, { value, label }: { value: string; label: string } ) => {
-	return service.update( updateId, { value, label } ).then( ( { id }: { id: string } ) => {
-		return id;
-	} );
+export const updateVariable = (
+	updateId: string,
+	{ value, label }: { value: string; label: string }
+): Promise< string > => {
+	return service.update( updateId, { value, label } ).then( extractId );
 };
 
-export const deleteVariable = ( deleteId: string ) => {
-	return service.delete( deleteId ).then( ( { id }: { id: string } ) => {
-		return id;
-	} );
+export const deleteVariable = ( deleteId: string ): Promise< string > => {
+	return service.delete( deleteId ).then( extractId );
 };
 
-export const restoreVariable = ( restoreId: string, label?: string, value?: string ) => {
-	return service.restore( restoreId, label, value ).then( ( { id }: { id: string } ) => {
-		return id;
-	} );
+export const restoreVariable = ( restoreId: string, label?: string, value?: string ): Promise< string > => {
+	return service.restore( restoreId, label, value ).then( extractId );
 };

package/src/types.ts

@@ -17,3 +17,9 @@ export type ExtendedVirtualizedItem = VirtualizedItem< 'item', string > & {
 	secondaryText: string;
 	onEdit?: () => void;
 };
+
+export type NormalizedVariable = {
+	key: string;
+	label: string;
+	value: string;
+};

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

@@ -1,11 +1,12 @@
 import { type ForwardRefExoticComponent, type JSX, type RefAttributes } from 'react';
 import { styleTransformersRegistry } from '@elementor/editor-canvas';
 import { stylesInheritanceTransformersRegistry } from '@elementor/editor-editing-panel';
-import { type createPropUtils, type PropTypeKey, type PropTypeUtil } from '@elementor/editor-props';
+import { type createPropUtils, type PropType, type PropTypeKey, type PropTypeUtil } from '@elementor/editor-props';
 import { type SvgIconProps } from '@elementor/ui';
 
 import { inheritanceTransformer } from '../transformers/inheritance-transformer';
 import { variableTransformer } from '../transformers/variable-transformer';
+import { type NormalizedVariable } from '../types';
 
 type ValueFieldProps = {
 	value: string;
@@ -21,6 +22,7 @@ type VariableTypeOptions = {
 	variableType: string;
 	fallbackPropTypeUtil: FallbackPropTypeUtil;
 	propTypeUtil: PropTypeUtil< string, string >;
+	selectionFilter?: ( variables: NormalizedVariable[], propType: PropType ) => NormalizedVariable[];
 };
 
 export type VariableTypesMap = Record< string, VariableTypeOptions >;
@@ -34,6 +36,7 @@ export function createVariableTypeRegistry() {
 		valueField,
 		propTypeUtil,
 		variableType,
+		selectionFilter,
 		fallbackPropTypeUtil,
 	}: VariableTypeOptions ) => {
 		if ( variableTypes[ propTypeUtil.key ] ) {
@@ -46,6 +49,7 @@ export function createVariableTypeRegistry() {
 			valueField,
 			propTypeUtil,
 			variableType,
+			selectionFilter,
 			fallbackPropTypeUtil,
 		};