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

package/dist/index.d.mts

@@ -4,7 +4,13 @@ import * as _mui_material from '@mui/material';
 
 declare function init(): void;
 
-declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, fallbackPropTypeUtil, }: {
+type NormalizedVariable = {
+    key: string;
+    label: string;
+    value: string;
+};
+
+declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, fallbackPropTypeUtil, }: {
     icon: react.ForwardRefExoticComponent<Omit<_mui_material.SvgIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
     startIcon?: ({ value }: {
         value: string;
@@ -16,6 +22,7 @@ declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil
     variableType: string;
     fallbackPropTypeUtil: any;
     propTypeUtil: _elementor_editor_props.PropTypeUtil<string, string>;
+    selectionFilter?: (variables: NormalizedVariable[], propType: _elementor_editor_props.PropType) => NormalizedVariable[];
 }) => void;
 
 export { init, registerVariableType };

package/dist/index.d.ts

@@ -4,7 +4,13 @@ import * as _mui_material from '@mui/material';
 
 declare function init(): void;
 
-declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, fallbackPropTypeUtil, }: {
+type NormalizedVariable = {
+    key: string;
+    label: string;
+    value: string;
+};
+
+declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, fallbackPropTypeUtil, }: {
     icon: react.ForwardRefExoticComponent<Omit<_mui_material.SvgIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
     startIcon?: ({ value }: {
         value: string;
@@ -16,6 +22,7 @@ declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil
     variableType: string;
     fallbackPropTypeUtil: any;
     propTypeUtil: _elementor_editor_props.PropTypeUtil<string, string>;
+    selectionFilter?: (variables: NormalizedVariable[], propType: _elementor_editor_props.PropType) => NormalizedVariable[];
 }) => void;
 
 export { init, registerVariableType };

package/dist/index.js

@@ -114,12 +114,12 @@ var usePreventUnload = (isDirty) => {
 
 // src/controls/variable-control.tsx
 var React24 = __toESM(require("react"));
-var import_editor_controls9 = require("@elementor/editor-controls");
+var import_editor_controls10 = require("@elementor/editor-controls");
 
 // src/components/ui/variable/assigned-variable.tsx
 var import_react11 = require("react");
 var React16 = __toESM(require("react"));
-var import_editor_controls5 = require("@elementor/editor-controls");
+var import_editor_controls6 = require("@elementor/editor-controls");
 var import_icons9 = require("@elementor/icons");
 var import_ui16 = require("@elementor/ui");
 
@@ -485,6 +485,7 @@ function createVariableTypeRegistry() {
     valueField,
     propTypeUtil,
     variableType,
+    selectionFilter,
     fallbackPropTypeUtil
   }) => {
     if (variableTypes[propTypeUtil.key]) {
@@ -496,6 +497,7 @@ function createVariableTypeRegistry() {
       valueField,
       propTypeUtil,
       variableType,
+      selectionFilter,
       fallbackPropTypeUtil
     };
     registerTransformer(propTypeUtil.key);
@@ -574,7 +576,7 @@ var usePermissions = () => {
 // src/components/variable-creation.tsx
 var React6 = __toESM(require("react"));
 var import_react6 = require("react");
-var import_editor_controls2 = require("@elementor/editor-controls");
+var import_editor_controls3 = require("@elementor/editor-controls");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_icons2 = require("@elementor/icons");
@@ -582,10 +584,11 @@ var import_ui6 = require("@elementor/ui");
 var import_i18n6 = require("@wordpress/i18n");
 
 // src/hooks/use-initial-value.ts
-var import_editor_controls = require("@elementor/editor-controls");
+var import_editor_controls2 = require("@elementor/editor-controls");
 
 // src/hooks/use-prop-variables.ts
 var import_react4 = require("react");
+var import_editor_controls = require("@elementor/editor-controls");
 var useVariable = (key) => {
   const variables = service.variables();
   if (!variables?.[key]) {
@@ -597,16 +600,24 @@ var useVariable = (key) => {
   };
 };
 var useFilteredVariables = (searchValue, propTypeKey) => {
-  const variables = usePropVariables(propTypeKey);
-  const filteredVariables = variables.filter(({ label }) => {
-    return label.toLowerCase().includes(searchValue.toLowerCase());
-  });
+  const baseVariables = usePropVariables(propTypeKey);
+  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
   };
 };
+var useVariableSelectionFilter = (variables) => {
+  const { selectionFilter } = useVariableType();
+  const { propType } = (0, import_editor_controls.useBoundProp)();
+  return selectionFilter ? selectionFilter(variables, propType) : variables;
+};
+var filterVariablesBySearchValue = (variables, searchValue) => {
+  const lowerSearchValue = searchValue.toLowerCase();
+  return variables.filter(({ label }) => label.toLowerCase().includes(lowerSearchValue));
+};
 var usePropVariables = (propKey) => {
   return (0, import_react4.useMemo)(() => normalizeVariables(propKey), [propKey]);
 };
@@ -619,30 +630,23 @@ var normalizeVariables = (propKey) => {
     value
   }));
 };
+var extractId = ({ id: id2 }) => id2;
 var createVariable = (newVariable) => {
-  return service.create(newVariable).then(({ id: id2 }) => {
-    return id2;
-  });
+  return service.create(newVariable).then(extractId);
 };
 var updateVariable = (updateId, { value, label }) => {
-  return service.update(updateId, { value, label }).then(({ id: id2 }) => {
-    return id2;
-  });
+  return service.update(updateId, { value, label }).then(extractId);
 };
 var deleteVariable = (deleteId) => {
-  return service.delete(deleteId).then(({ id: id2 }) => {
-    return id2;
-  });
+  return service.delete(deleteId).then(extractId);
 };
 var restoreVariable = (restoreId, label, value) => {
-  return service.restore(restoreId, label, value).then(({ id: id2 }) => {
-    return id2;
-  });
+  return service.restore(restoreId, label, value).then(extractId);
 };
 
 // src/hooks/use-initial-value.ts
 var useInitialValue = () => {
-  const { value: initial } = (0, import_editor_controls.useBoundProp)();
+  const { value: initial } = (0, import_editor_controls2.useBoundProp)();
   const hasAssignedVariable2 = hasVariableType(initial?.$$type) && Boolean(initial?.value);
   const variable = useVariable(hasAssignedVariable2 ? initial.value : "");
   if (hasAssignedVariable2) {
@@ -772,7 +776,7 @@ var LabelField = ({ value, error, onChange }) => {
 var SIZE = "tiny";
 var VariableCreation = ({ onGoBack, onClose }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: setVariable, path } = (0, import_editor_controls2.useBoundProp)(propTypeUtil);
+  const { setValue: setVariable, path } = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
   const initialValue = useInitialValue();
   const [value, setValue] = (0, import_react6.useState)(initialValue);
   const [label, setLabel] = (0, import_react6.useState)("");
@@ -827,7 +831,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       title: (0, import_i18n6.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_editor_controls2.PopoverContent, { p: 2 }, /* @__PURE__ */ React6.createElement(
+  ), /* @__PURE__ */ React6.createElement(import_ui6.Divider, null), /* @__PURE__ */ React6.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React6.createElement(
     LabelField,
     {
       value: label,
@@ -852,7 +856,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 // src/components/variable-edit.tsx
 var React9 = __toESM(require("react"));
 var import_react8 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
 var import_editor_ui3 = require("@elementor/editor-ui");
@@ -917,7 +921,7 @@ var EditConfirmationDialog = ({
 var SIZE2 = "tiny";
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
+  const { setValue: notifyBoundPropChange, value: assignedValue } = (0, import_editor_controls4.useBoundProp)(propTypeUtil);
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
   const [deleteConfirmation, setDeleteConfirmation] = (0, import_react8.useState)(false);
   const [editConfirmation, setEditConfirmation] = (0, import_react8.useState)(false);
@@ -1031,7 +1035,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       ), /* @__PURE__ */ React9.createElement(VariableIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React9.createElement(import_ui9.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React9.createElement(
+  ), /* @__PURE__ */ React9.createElement(import_ui9.Divider, null), /* @__PURE__ */ React9.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React9.createElement(
     LabelField,
     {
       value: label,
@@ -1071,7 +1075,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 // src/components/variables-selection.tsx
 var React13 = __toESM(require("react"));
 var import_react9 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
@@ -1231,7 +1235,7 @@ var VariablesStyledMenuList = (0, import_ui13.styled)(import_ui13.MenuList)(({ t
 var SIZE4 = "tiny";
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
-  const { value: variable, setValue: setVariable, path } = (0, import_editor_controls4.useBoundProp)(propTypeUtil);
+  const { value: variable, setValue: setVariable, path } = (0, import_editor_controls5.useBoundProp)(propTypeUtil);
   const [searchValue, setSearchValue] = (0, import_react9.useState)("");
   const {
     list: variables,
@@ -1436,7 +1440,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
 // src/components/ui/variable/assigned-variable.tsx
 var AssignedVariable = ({ variable, propTypeKey }) => {
   const { fallbackPropTypeUtil, startIcon, propTypeUtil } = getVariableType(propTypeKey);
-  const { setValue } = (0, import_editor_controls5.useBoundProp)();
+  const { setValue } = (0, import_editor_controls6.useBoundProp)();
   const anchorRef = (0, import_react11.useRef)(null);
   const popupId = (0, import_react11.useId)();
   const popupState = (0, import_ui16.usePopupState)({
@@ -1482,13 +1486,13 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 // src/components/ui/variable/deleted-variable.tsx
 var React20 = __toESM(require("react"));
 var import_react13 = require("react");
-var import_editor_controls7 = require("@elementor/editor-controls");
+var import_editor_controls8 = require("@elementor/editor-controls");
 var import_ui20 = require("@elementor/ui");
 
 // src/components/variable-restore.tsx
 var React17 = __toESM(require("react"));
 var import_react12 = require("react");
-var import_editor_controls6 = require("@elementor/editor-controls");
+var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_ui17 = require("@elementor/ui");
@@ -1496,7 +1500,7 @@ var import_i18n15 = require("@wordpress/i18n");
 var SIZE6 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: notifyBoundPropChange } = (0, import_editor_controls6.useBoundProp)(propTypeUtil);
+  const { setValue: notifyBoundPropChange } = (0, import_editor_controls7.useBoundProp)(propTypeUtil);
   const variable = useVariable(variableId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
@@ -1542,7 +1546,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
       title: (0, import_i18n15.__)("Restore variable", "elementor"),
       onClose
     }
-  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls6.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
+  ), /* @__PURE__ */ React17.createElement(import_ui17.Divider, null), /* @__PURE__ */ React17.createElement(import_editor_controls7.PopoverContent, { p: 2 }, /* @__PURE__ */ React17.createElement(
     LabelField,
     {
       value: label,
@@ -1624,7 +1628,7 @@ var DeletedTag = React19.forwardRef(({ label, onClick, ...props }, ref) => {
 // src/components/ui/variable/deleted-variable.tsx
 var DeletedVariable = ({ variable, propTypeKey }) => {
   const { fallbackPropTypeUtil, propTypeUtil } = getVariableType(propTypeKey);
-  const { setValue } = (0, import_editor_controls7.useBoundProp)();
+  const { setValue } = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
   const [showInfotip, setShowInfotip] = (0, import_react13.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
@@ -1713,7 +1717,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 // src/components/ui/variable/missing-variable.tsx
 var React23 = __toESM(require("react"));
 var import_react14 = require("react");
-var import_editor_controls8 = require("@elementor/editor-controls");
+var import_editor_controls9 = require("@elementor/editor-controls");
 var import_ui23 = require("@elementor/ui");
 var import_i18n19 = require("@wordpress/i18n");
 
@@ -1770,7 +1774,7 @@ var MissingTag = React22.forwardRef(({ label, onClick, ...props }, ref) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
-  const { setValue } = (0, import_editor_controls8.useBoundProp)();
+  const { setValue } = (0, import_editor_controls9.useBoundProp)();
   const [infotipVisible, setInfotipVisible] = (0, import_react14.useState)(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
@@ -1801,7 +1805,7 @@ var MissingVariable = () => {
 
 // src/controls/variable-control.tsx
 var VariableControl = () => {
-  const boundProp = (0, import_editor_controls9.useBoundProp)().value;
+  const boundProp = (0, import_editor_controls10.useBoundProp)().value;
   const assignedVariable = useVariable(boundProp?.value);
   if (!assignedVariable) {
     return /* @__PURE__ */ React24.createElement(MissingVariable, null);
@@ -1897,7 +1901,7 @@ var ColorField = ({ value, onChange }) => {
 // src/components/fields/font-field.tsx
 var React27 = __toESM(require("react"));
 var import_react16 = require("react");
-var import_editor_controls10 = require("@elementor/editor-controls");
+var import_editor_controls11 = require("@elementor/editor-controls");
 var import_editor_editing_panel9 = require("@elementor/editor-editing-panel");
 var import_icons13 = require("@elementor/icons");
 var import_ui25 = require("@elementor/ui");
@@ -1946,7 +1950,7 @@ var FontField = ({ value, onChange }) => {
       ...(0, import_ui25.bindPopover)(fontPopoverState)
     },
     /* @__PURE__ */ React27.createElement(
-      import_editor_controls10.ItemSelector,
+      import_editor_controls11.ItemSelector,
       {
         itemsList: mapFontSubs,
         selectedItem: fontFamily,
@@ -1955,7 +1959,7 @@ var FontField = ({ value, onChange }) => {
         sectionWidth,
         title: (0, import_i18n22.__)("Font Family", "elementor"),
         itemStyle: (item) => ({ fontFamily: item.value }),
-        onDebounce: import_editor_controls10.enqueueFont,
+        onDebounce: import_editor_controls11.enqueueFont,
         icon: import_icons13.TextIcon
       }
     )
@@ -2030,7 +2034,7 @@ function convertToCssVariables(variables) {
 }
 
 // src/repeater-injections.ts
-var import_editor_controls11 = require("@elementor/editor-controls");
+var import_editor_controls12 = require("@elementor/editor-controls");
 var import_editor_props4 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
@@ -2054,21 +2058,21 @@ var BoxShadowRepeaterColorIndicator = ({ value }) => {
 
 // src/repeater-injections.ts
 function registerRepeaterInjections() {
-  (0, import_editor_controls11.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls12.injectIntoRepeaterItemIcon)({
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value: prop }) => {
       return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
     }
   });
-  (0, import_editor_controls11.injectIntoRepeaterItemIcon)({
+  (0, import_editor_controls12.injectIntoRepeaterItemIcon)({
     id: "color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value: prop }) => {
       return hasAssignedColorVariable(import_editor_props4.shadowPropTypeUtil.extract(prop)?.color);
     }
   });
-  (0, import_editor_controls11.injectIntoRepeaterItemLabel)({
+  (0, import_editor_controls12.injectIntoRepeaterItemLabel)({
     id: "color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value: prop }) => {