@elementor/editor-variables 3.33.0-120 → 3.33.0-122

package/dist/index.js

@@ -40,6 +40,7 @@ module.exports = __toCommonJS(index_exports);
 var import_editor = require("@elementor/editor");
 var import_editor_editing_panel8 = require("@elementor/editor-editing-panel");
 var import_editor_panels2 = require("@elementor/editor-panels");
+var import_editor_props6 = require("@elementor/editor-props");
 
 // src/components/variables-manager/variables-manager-panel.tsx
 var React9 = __toESM(require("react"));
@@ -1301,7 +1302,7 @@ var usePermissions = () => {
 // src/components/variable-creation.tsx
 var React12 = __toESM(require("react"));
 var import_react9 = require("react");
-var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
 var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons5 = require("@elementor/icons");
@@ -1312,14 +1313,42 @@ var import_i18n7 = require("@wordpress/i18n");
 var import_editor_controls2 = require("@elementor/editor-controls");
 var useInitialValue = () => {
   const { value: initial } = (0, import_editor_controls2.useBoundProp)();
-  const hasAssignedVariable2 = hasVariableType(initial?.$$type) && Boolean(initial?.value);
-  const variable = useVariable(hasAssignedVariable2 ? initial.value : "");
-  if (hasAssignedVariable2) {
+  const hasAssignedVariable = hasVariableType(initial?.$$type) && Boolean(initial?.value);
+  const variable = useVariable(hasAssignedVariable ? initial.value : "");
+  if (hasAssignedVariable) {
     return variable ? variable.value : "";
   }
   return initial?.value ?? "";
 };
 
+// src/hooks/use-variable-bound-prop.ts
+var import_editor_controls3 = require("@elementor/editor-controls");
+var import_editor_props3 = require("@elementor/editor-props");
+var useVariableBoundProp = () => {
+  const { propTypeUtil } = useVariableType();
+  const boundProp = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
+  return {
+    ...boundProp,
+    setVariableValue: (value) => resolveBoundPropAndSetValue(value, boundProp),
+    variableId: boundProp.value ?? boundProp.placeholder
+  };
+};
+var resolveBoundPropAndSetValue = (value, boundProp) => {
+  const propValue = unwrapValue(boundProp.value);
+  const placeholder = unwrapValue(boundProp.placeholder);
+  const newValue = unwrapValue(value);
+  if (!propValue && placeholder === newValue) {
+    return boundProp.setValue(null);
+  }
+  return boundProp.setValue(value);
+};
+var unwrapValue = (input) => {
+  if ((0, import_editor_props3.isTransformable)(input)) {
+    return input.value;
+  }
+  return input;
+};
+
 // src/utils/tracking.ts
 var trackVariableEvent = ({ varType, controlPath, action }) => {
   const extendedWindow = window;
@@ -1349,8 +1378,8 @@ var FormField = ({ id: id2, label, errorMsg, noticeMsg, children }) => {
 var SIZE = "tiny";
 var VariableCreation = ({ onGoBack, onClose }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType, propTypeUtil } = useVariableType();
-  const { setValue: setVariable, path } = (0, import_editor_controls3.useBoundProp)(propTypeUtil);
-  const { propType } = (0, import_editor_controls3.useBoundProp)();
+  const { setVariableValue: setVariable, path } = useVariableBoundProp();
+  const { propType } = (0, import_editor_controls4.useBoundProp)();
   const initialValue = useInitialValue();
   const [value, setValue] = (0, import_react9.useState)(initialValue);
   const [label, setLabel] = (0, import_react9.useState)("");
@@ -1413,7 +1442,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       title: (0, import_i18n7.__)("Create variable", "elementor"),
       onClose: closePopover
     }
-  ), /* @__PURE__ */ React12.createElement(import_ui12.Divider, null), /* @__PURE__ */ React12.createElement(import_editor_controls3.PopoverContent, { p: 2 }, /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React12.createElement(import_ui12.Divider, null), /* @__PURE__ */ React12.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React12.createElement(
     FormField,
     {
       id: "variable-label",
@@ -1439,7 +1468,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React12.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n7.__)("Value", "elementor") }, /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "h5" }, /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React12.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n7.__)("Value", "elementor") }, /* @__PURE__ */ React12.createElement(import_ui12.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React12.createElement(
     ValueField,
     {
       value,
@@ -1451,13 +1480,23 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React12.createElement(import_ui12.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React12.createElement(import_ui12.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(import_ui12.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, (0, import_i18n7.__)("Create", "elementor"))));
+  ))), errorMessage && /* @__PURE__ */ React12.createElement(import_ui12.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React12.createElement(import_ui12.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(
+    import_ui12.Button,
+    {
+      id: "create-variable-button",
+      size: "small",
+      variant: "contained",
+      disabled: isSubmitDisabled,
+      onClick: handleCreateAndTrack
+    },
+    (0, import_i18n7.__)("Create", "elementor")
+  )));
 };
 
 // src/components/variable-edit.tsx
 var React14 = __toESM(require("react"));
 var import_react11 = require("react");
-var import_editor_controls4 = require("@elementor/editor-controls");
+var import_editor_controls5 = 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_ui4 = require("@elementor/editor-ui");
@@ -1506,9 +1545,9 @@ var EditConfirmationDialog = ({
 // src/components/variable-edit.tsx
 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_controls4.useBoundProp)(propTypeUtil);
-  const { propType } = (0, import_editor_controls4.useBoundProp)();
+  const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
+  const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
+  const { propType } = (0, import_editor_controls5.useBoundProp)();
   const [isMessageSuppressed, suppressMessage] = (0, import_editor_current_user2.useSuppressedMessage)(EDIT_CONFIRMATION_DIALOG_ID);
   const [deleteConfirmation, setDeleteConfirmation] = (0, import_react11.useState)(false);
   const [editConfirmation, setEditConfirmation] = (0, import_react11.useState)(false);
@@ -1569,7 +1608,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     });
   };
   const maybeTriggerBoundPropChange = () => {
-    if (editId === assignedValue) {
+    if (editId === variableId) {
       notifyBoundPropChange(editId);
     }
   };
@@ -1629,7 +1668,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
       ), /* @__PURE__ */ React14.createElement(VariableIcon, { fontSize: SIZE2 })),
       actions
     }
-  ), /* @__PURE__ */ React14.createElement(import_ui14.Divider, null), /* @__PURE__ */ React14.createElement(import_editor_controls4.PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
+  ), /* @__PURE__ */ React14.createElement(import_ui14.Divider, null), /* @__PURE__ */ React14.createElement(import_editor_controls5.PopoverContent, { p: 2 }, /* @__PURE__ */ React14.createElement(
     FormField,
     {
       id: "variable-label",
@@ -1688,7 +1727,6 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 // src/components/variables-selection.tsx
 var React18 = __toESM(require("react"));
 var import_react12 = require("react");
-var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
 var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
@@ -1839,7 +1877,7 @@ var VariablesStyledMenuList = (0, import_ui18.styled)(import_ui18.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_controls5.useBoundProp)(propTypeUtil);
+  const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
   const [searchValue, setSearchValue] = (0, import_react12.useState)("");
   const {
     list: variables,
@@ -1867,12 +1905,12 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React18.createElement(import_ui19.IconButton, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React18.createElement(import_icons9.PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React18.createElement(import_ui19.IconButton, { id: "add-variable-button", key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React18.createElement(import_icons9.PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React18.createElement(import_ui19.IconButton, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React18.createElement(import_icons9.SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React18.createElement(import_ui19.IconButton, { id: "variables-manager-button", key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React18.createElement(import_icons9.SettingsIcon, { fontSize: SIZE4 }))
     );
   }
   const StartIcon = startIcon || (() => /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE4 }));
@@ -2124,8 +2162,8 @@ var import_ui22 = require("@elementor/ui");
 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_controls7.useBoundProp)(propTypeUtil);
+  const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
+  const { setVariableValue: notifyBoundPropChange } = useVariableBoundProp();
   const { propType } = (0, import_editor_controls7.useBoundProp)();
   const variable = useVariable(variableId);
   if (!variable) {
@@ -2276,7 +2314,7 @@ WarningVariableTag.displayName = "WarningVariableTag";
 // src/components/ui/variable/deleted-variable.tsx
 var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
-  const { setValue } = (0, import_editor_controls8.useBoundProp)();
+  const boundProp = (0, import_editor_controls8.useBoundProp)();
   const userPermissions = usePermissions();
   const [showInfotip, setShowInfotip] = (0, import_react16.useState)(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
@@ -2289,15 +2327,15 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   });
   const handlers = {};
   if (userPermissions.canUnlink()) {
-    handlers.onUnlink = createUnlinkHandler(variable, propTypeKey, setValue);
+    handlers.onUnlink = createUnlinkHandler(variable, propTypeKey, boundProp.setValue);
   }
   if (userPermissions.canRestore()) {
     handlers.onRestore = () => {
       if (!variable.key) {
         return;
       }
-      restoreVariable(variable.key).then((key) => {
-        setValue(propTypeUtil.create(key));
+      restoreVariable(variable.key).then((id2) => {
+        resolveBoundPropAndSetValue(propTypeUtil.create(id2), boundProp);
         closeInfotip();
       }).catch(() => {
         closeInfotip();
@@ -2406,7 +2444,7 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
-  const { setValue } = (0, import_editor_controls9.useBoundProp)();
+  const { setValue, value } = (0, import_editor_controls9.useBoundProp)();
   const anchorRef = (0, import_react17.useRef)(null);
   const popupId = (0, import_react17.useId)();
   const popupState = (0, import_ui27.usePopupState)({
@@ -2425,6 +2463,7 @@ var MismatchVariable = ({ variable }) => {
     closeInfotip();
     setValue(null);
   };
+  const showClearButton = !!value;
   return /* @__PURE__ */ React27.createElement(import_ui27.Box, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React27.createElement(import_ui27.Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React27.createElement(
     import_ui27.Infotip,
     {
@@ -2437,7 +2476,7 @@ var MismatchVariable = ({ variable }) => {
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
-          onClear: clearValue,
+          onClear: showClearButton ? clearValue : void 0,
           triggerSelect
         }
       ),
@@ -2546,7 +2585,7 @@ var MissingVariable = () => {
 // src/controls/variable-control.tsx
 var VariableControl = () => {
   const boundProp = (0, import_editor_controls11.useBoundProp)();
-  const boundPropValue = boundProp.value;
+  const boundPropValue = boundProp.value ?? boundProp.placeholder;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
     return /* @__PURE__ */ React30.createElement(MissingVariable, null);
@@ -2605,7 +2644,7 @@ var trackOpenVariablePopover = (path, variableType) => {
 
 // src/register-variable-types.tsx
 var React34 = __toESM(require("react"));
-var import_editor_props3 = require("@elementor/editor-props");
+var import_editor_props4 = require("@elementor/editor-props");
 var import_icons15 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
@@ -2627,6 +2666,7 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
   return /* @__PURE__ */ React32.createElement(
     import_ui30.UnstableColorField,
     {
+      id: "color-variable-field",
       size: "tiny",
       fullWidth: true,
       value: color,
@@ -2706,6 +2746,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     /* @__PURE__ */ React33.createElement(
       import_editor_controls12.ItemSelector,
       {
+        id: "font-family-variables-selector",
         itemsList: mapFontSubs,
         selectedItem: fontFamily,
         onItemChange: handleFontFamilyChange,
@@ -2726,7 +2767,7 @@ function registerVariableTypes() {
     valueField: ColorField,
     icon: import_icons15.BrushIcon,
     propTypeUtil: colorVariablePropTypeUtil,
-    fallbackPropTypeUtil: import_editor_props3.colorPropTypeUtil,
+    fallbackPropTypeUtil: import_editor_props4.colorPropTypeUtil,
     variableType: "color",
     startIcon: ({ value }) => /* @__PURE__ */ React34.createElement(ColorIndicator, { size: "inherit", component: "span", value })
   });
@@ -2734,7 +2775,7 @@ function registerVariableTypes() {
     valueField: FontField,
     icon: import_icons15.TextIcon,
     propTypeUtil: fontVariablePropTypeUtil,
-    fallbackPropTypeUtil: import_editor_props3.stringPropTypeUtil,
+    fallbackPropTypeUtil: import_editor_props4.stringPropTypeUtil,
     variableType: "font"
   });
 }
@@ -2789,7 +2830,7 @@ function convertToCssVariables(variables) {
 
 // src/repeater-injections.ts
 var import_editor_controls13 = require("@elementor/editor-controls");
-var import_editor_props4 = require("@elementor/editor-props");
+var import_editor_props5 = require("@elementor/editor-props");
 
 // src/components/variables-repeater-item-slot.tsx
 var React36 = __toESM(require("react"));
@@ -2816,21 +2857,21 @@ function registerRepeaterInjections() {
     id: "color-variables-background-icon",
     component: BackgroundRepeaterColorIndicator,
     condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+      return hasAssignedColorVariable(import_editor_props5.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
     }
   });
   (0, import_editor_controls13.injectIntoRepeaterItemIcon)({
     id: "color-variables-icon",
     component: BoxShadowRepeaterColorIndicator,
     condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.shadowPropTypeUtil.extract(prop)?.color);
+      return hasAssignedColorVariable(import_editor_props5.shadowPropTypeUtil.extract(prop)?.color);
     }
   });
   (0, import_editor_controls13.injectIntoRepeaterItemLabel)({
     id: "color-variables-label",
     component: BackgroundRepeaterLabel,
     condition: ({ value: prop }) => {
-      return hasAssignedColorVariable(import_editor_props4.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
+      return hasAssignedColorVariable(import_editor_props5.backgroundColorOverlayPropTypeUtil.extract(prop)?.color);
     }
   });
 }
@@ -2845,7 +2886,7 @@ function init() {
   registerRepeaterInjections();
   (0, import_editor_editing_panel8.registerControlReplacement)({
     component: VariableControl,
-    condition: ({ value }) => hasAssignedVariable(value)
+    condition: ({ value, placeholder }) => hasVariable(value) || hasVariable(placeholder)
   });
   registerPopoverAction({
     id: "variables",
@@ -2858,9 +2899,9 @@ function init() {
   });
   (0, import_editor_panels2.__registerPanel)(panel);
 }
-function hasAssignedVariable(propValue) {
-  if (propValue && typeof propValue === "object" && "$$type" in propValue) {
-    return hasVariableType(propValue.$$type);
+function hasVariable(value) {
+  if ((0, import_editor_props6.isTransformable)(value)) {
+    return hasVariableType(value.$$type);
   }
   return false;
 }