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

package/dist/index.mjs

@@ -84,12 +84,12 @@ var usePreventUnload = (isDirty) => {
 
 // src/controls/variable-control.tsx
 import * as React24 from "react";
-import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 
 // src/components/ui/variable/assigned-variable.tsx
 import { useId as useId2, useRef } from "react";
 import * as React16 from "react";
-import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon2 } from "@elementor/icons";
 import { bindPopover, bindTrigger, Box as Box5, Popover, usePopupState } from "@elementor/ui";
 
@@ -455,6 +455,7 @@ function createVariableTypeRegistry() {
     valueField,
     propTypeUtil,
     variableType,
+    selectionFilter,
     fallbackPropTypeUtil
   }) => {
     if (variableTypes[propTypeUtil.key]) {
@@ -466,6 +467,7 @@ function createVariableTypeRegistry() {
       valueField,
       propTypeUtil,
       variableType,
+      selectionFilter,
       fallbackPropTypeUtil
     };
     registerTransformer(propTypeUtil.key);
@@ -544,7 +546,7 @@ var usePermissions = () => {
 // src/components/variable-creation.tsx
 import * as React6 from "react";
 import { useState as useState3 } from "react";
-import { PopoverContent, useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
+import { PopoverContent, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { PopoverBody } from "@elementor/editor-editing-panel";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
@@ -552,10 +554,11 @@ import { Button as Button2, CardActions, Divider as Divider2, FormHelperText as
 import { __ as __6 } from "@wordpress/i18n";
 
 // src/hooks/use-initial-value.ts
-import { useBoundProp } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 
 // src/hooks/use-prop-variables.ts
 import { useMemo } from "react";
+import { useBoundProp } from "@elementor/editor-controls";
 var useVariable = (key) => {
   const variables = service.variables();
   if (!variables?.[key]) {
@@ -567,16 +570,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 } = 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 useMemo(() => normalizeVariables(propKey), [propKey]);
 };
@@ -589,30 +600,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 } = useBoundProp();
+  const { value: initial } = useBoundProp2();
   const hasAssignedVariable2 = hasVariableType(initial?.$$type) && Boolean(initial?.value);
   const variable = useVariable(hasAssignedVariable2 ? initial.value : "");
   if (hasAssignedVariable2) {
@@ -742,7 +746,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 } = useBoundProp2(propTypeUtil);
+  const { setValue: setVariable, path } = useBoundProp3(propTypeUtil);
   const initialValue = useInitialValue();
   const [value, setValue] = useState3(initialValue);
   const [label, setLabel] = useState3("");
@@ -822,7 +826,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 // src/components/variable-edit.tsx
 import * as React9 from "react";
 import { useEffect as useEffect2, useState as useState5 } from "react";
-import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { PopoverBody as PopoverBody2 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
@@ -905,7 +909,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 } = useBoundProp3(propTypeUtil);
+  const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp4(propTypeUtil);
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(EDIT_CONFIRMATION_DIALOG_ID);
   const [deleteConfirmation, setDeleteConfirmation] = useState5(false);
   const [editConfirmation, setEditConfirmation] = useState5(false);
@@ -1059,7 +1063,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 // src/components/variables-selection.tsx
 import * as React13 from "react";
 import { useState as useState6 } from "react";
-import { useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp5 } from "@elementor/editor-controls";
 import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader3, PopoverMenuList, PopoverSearch } from "@elementor/editor-ui";
 import { ColorFilterIcon, PlusIcon, SettingsIcon } from "@elementor/icons";
@@ -1219,7 +1223,7 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
 var SIZE4 = "tiny";
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
-  const { value: variable, setValue: setVariable, path } = useBoundProp4(propTypeUtil);
+  const { value: variable, setValue: setVariable, path } = useBoundProp5(propTypeUtil);
   const [searchValue, setSearchValue] = useState6("");
   const {
     list: variables,
@@ -1424,7 +1428,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 } = useBoundProp5();
+  const { setValue } = useBoundProp6();
   const anchorRef = useRef(null);
   const popupId = useId2();
   const popupState = usePopupState({
@@ -1470,13 +1474,13 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 // src/components/ui/variable/deleted-variable.tsx
 import * as React20 from "react";
 import { useId as useId3, useRef as useRef2, useState as useState9 } from "react";
-import { useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip, Popover as Popover2, usePopupState as usePopupState2 } from "@elementor/ui";
 
 // src/components/variable-restore.tsx
 import * as React17 from "react";
 import { useState as useState8 } from "react";
-import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
+import { PopoverContent as PopoverContent3, useBoundProp as useBoundProp7 } from "@elementor/editor-controls";
 import { PopoverBody as PopoverBody4 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader4 } from "@elementor/editor-ui";
 import { Button as Button7, CardActions as CardActions3, Divider as Divider5, FormHelperText as FormHelperText4 } from "@elementor/ui";
@@ -1484,7 +1488,7 @@ import { __ as __15 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
 var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: notifyBoundPropChange } = useBoundProp6(propTypeUtil);
+  const { setValue: notifyBoundPropChange } = useBoundProp7(propTypeUtil);
   const variable = useVariable(variableId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
@@ -1612,7 +1616,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 } = useBoundProp7();
+  const { setValue } = useBoundProp8();
   const userPermissions = usePermissions();
   const [showInfotip, setShowInfotip] = useState9(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
@@ -1701,7 +1705,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 // src/components/ui/variable/missing-variable.tsx
 import * as React23 from "react";
 import { useState as useState10 } from "react";
-import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
+import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, Infotip as Infotip2 } from "@elementor/ui";
 import { __ as __19 } from "@wordpress/i18n";
 
@@ -1758,7 +1762,7 @@ var MissingTag = React22.forwardRef(({ label, onClick, ...props }, ref) => {
 
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
-  const { setValue } = useBoundProp8();
+  const { setValue } = useBoundProp9();
   const [infotipVisible, setInfotipVisible] = useState10(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
@@ -1789,7 +1793,7 @@ var MissingVariable = () => {
 
 // src/controls/variable-control.tsx
 var VariableControl = () => {
-  const boundProp = useBoundProp9().value;
+  const boundProp = useBoundProp10().value;
   const assignedVariable = useVariable(boundProp?.value);
   if (!assignedVariable) {
     return /* @__PURE__ */ React24.createElement(MissingVariable, null);
@@ -1803,11 +1807,11 @@ var VariableControl = () => {
 
 // src/hooks/use-prop-variable-action.tsx
 import * as React25 from "react";
-import { useBoundProp as useBoundProp10 } from "@elementor/editor-editing-panel";
+import { useBoundProp as useBoundProp11 } from "@elementor/editor-editing-panel";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
 import { __ as __20 } from "@wordpress/i18n";
 var usePropVariableAction = () => {
-  const { propType, path } = useBoundProp10();
+  const { propType, path } = useBoundProp11();
   const variable = resolveVariableFromPropType(propType);
   return {
     visible: Boolean(variable),