@elementor/editor-variables 3.32.0-30 → 3.32.0-31

package/dist/index.d.mts

@@ -10,7 +10,7 @@ type NormalizedVariable = {
     value: string;
 };
 
-declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, fallbackPropTypeUtil, }: {
+declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, valueTransformer, fallbackPropTypeUtil, }: {
     icon: react.ForwardRefExoticComponent<Omit<_mui_material.SvgIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
     startIcon?: ({ value }: {
         value: string;
@@ -24,6 +24,7 @@ declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil
     fallbackPropTypeUtil: any;
     propTypeUtil: _elementor_editor_props.PropTypeUtil<string, string>;
     selectionFilter?: (variables: NormalizedVariable[], propType: _elementor_editor_props.PropType) => NormalizedVariable[];
+    valueTransformer?: (value: string) => _elementor_editor_props.PropValue;
 }) => void;
 
 export { init, registerVariableType };

package/dist/index.d.ts

@@ -10,7 +10,7 @@ type NormalizedVariable = {
     value: string;
 };
 
-declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, fallbackPropTypeUtil, }: {
+declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil, variableType, selectionFilter, valueTransformer, fallbackPropTypeUtil, }: {
     icon: react.ForwardRefExoticComponent<Omit<_mui_material.SvgIconProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
     startIcon?: ({ value }: {
         value: string;
@@ -24,6 +24,7 @@ declare const registerVariableType: ({ icon, startIcon, valueField, propTypeUtil
     fallbackPropTypeUtil: any;
     propTypeUtil: _elementor_editor_props.PropTypeUtil<string, string>;
     selectionFilter?: (variables: NormalizedVariable[], propType: _elementor_editor_props.PropType) => NormalizedVariable[];
+    valueTransformer?: (value: string) => _elementor_editor_props.PropValue;
 }) => void;
 
 export { init, registerVariableType };

package/dist/index.js

@@ -486,6 +486,7 @@ function createVariableTypeRegistry() {
     propTypeUtil,
     variableType,
     selectionFilter,
+    valueTransformer,
     fallbackPropTypeUtil
   }) => {
     if (variableTypes[propTypeUtil.key]) {
@@ -498,6 +499,7 @@ function createVariableTypeRegistry() {
       propTypeUtil,
       variableType,
       selectionFilter,
+      valueTransformer,
       fallbackPropTypeUtil
     };
     registerTransformer(propTypeUtil.key);
@@ -525,6 +527,22 @@ function createVariableTypeRegistry() {
 // src/variables-registry/variable-type-registry.ts
 var { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();
 
+// src/utils/unlink-variable.ts
+function transformValueBeforeUnlink(variable, propTypeKey) {
+  const { valueTransformer } = getVariableType(propTypeKey);
+  if (valueTransformer) {
+    return valueTransformer(variable.value);
+  }
+  return variable.value;
+}
+function createUnlinkHandler(variable, propTypeKey, setValue) {
+  return () => {
+    const { fallbackPropTypeUtil } = getVariableType(propTypeKey);
+    const transformedValue = transformValueBeforeUnlink(variable, propTypeKey);
+    setValue(fallbackPropTypeUtil.create(transformedValue));
+  };
+}
+
 // src/components/variable-selection-popover.tsx
 var React15 = __toESM(require("react"));
 var import_react10 = require("react");
@@ -1455,7 +1473,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 { startIcon, propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls6.useBoundProp)();
   const anchorRef = (0, import_react11.useRef)(null);
   const popupId = (0, import_react11.useId)();
@@ -1463,10 +1481,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const unlinkVariable = () => {
-    const fallbackValue = fallbackPropTypeUtil.create(variable.value);
-    setValue(fallbackValue);
-  };
+  const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
   return /* @__PURE__ */ React17.createElement(import_ui17.Box, { ref: anchorRef }, /* @__PURE__ */ React17.createElement(
     AssignedTag,
@@ -1646,7 +1661,7 @@ var DeletedTag = React20.forwardRef(({ label, onClick, ...props }, ref) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 var DeletedVariable = ({ variable, propTypeKey }) => {
-  const { fallbackPropTypeUtil, propTypeUtil } = getVariableType(propTypeKey);
+  const { propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
   const [showInfotip, setShowInfotip] = (0, import_react13.useState)(false);
@@ -1660,9 +1675,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   });
   const handlers = {};
   if (userPermissions.canUnlink()) {
-    handlers.onUnlink = () => {
-      setValue(fallbackPropTypeUtil.create(variable.value));
-    };
+    handlers.onUnlink = createUnlinkHandler(variable, propTypeKey, setValue);
   }
   if (userPermissions.canRestore()) {
     handlers.onRestore = () => {