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

package/dist/index.mjs

@@ -2,6 +2,7 @@
 import { injectIntoTop } from "@elementor/editor";
 import { controlActionsMenu, registerControlReplacement } from "@elementor/editor-editing-panel";
 import { __registerPanel as registerPanel } from "@elementor/editor-panels";
+import { isTransformable as isTransformable2 } from "@elementor/editor-props";
 
 // src/components/variables-manager/variables-manager-panel.tsx
 import * as React9 from "react";
@@ -1288,7 +1289,7 @@ var usePermissions = () => {
 // src/components/variable-creation.tsx
 import * as React12 from "react";
 import { useState as useState6 } from "react";
-import { PopoverContent, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { PopoverContent, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
 import { PopoverBody } from "@elementor/editor-editing-panel";
 import { PopoverHeader } from "@elementor/editor-ui";
 import { ArrowLeftIcon } from "@elementor/icons";
@@ -1299,14 +1300,42 @@ import { __ as __7 } from "@wordpress/i18n";
 import { useBoundProp as useBoundProp2 } from "@elementor/editor-controls";
 var useInitialValue = () => {
   const { value: initial } = useBoundProp2();
-  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
+import { useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
+import { isTransformable } from "@elementor/editor-props";
+var useVariableBoundProp = () => {
+  const { propTypeUtil } = useVariableType();
+  const boundProp = useBoundProp3(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 (isTransformable(input)) {
+    return input.value;
+  }
+  return input;
+};
+
 // src/utils/tracking.ts
 var trackVariableEvent = ({ varType, controlPath, action }) => {
   const extendedWindow = window;
@@ -1336,8 +1365,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 } = useBoundProp3(propTypeUtil);
-  const { propType } = useBoundProp3();
+  const { setVariableValue: setVariable, path } = useVariableBoundProp();
+  const { propType } = useBoundProp4();
   const initialValue = useInitialValue();
   const [value, setValue] = useState6(initialValue);
   const [label, setLabel] = useState6("");
@@ -1426,7 +1455,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React12.createElement(FormField, { errorMsg: valueFieldError, label: __7("Value", "elementor") }, /* @__PURE__ */ React12.createElement(Typography3, { variant: "h5" }, /* @__PURE__ */ React12.createElement(
+  ), /* @__PURE__ */ React12.createElement(FormField, { errorMsg: valueFieldError, label: __7("Value", "elementor") }, /* @__PURE__ */ React12.createElement(Typography3, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React12.createElement(
     ValueField,
     {
       value,
@@ -1438,13 +1467,23 @@ var VariableCreation = ({ onGoBack, onClose }) => {
       onValidationChange: setValueFieldError,
       propType
     }
-  ))), errorMessage && /* @__PURE__ */ React12.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React12.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(Button3, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleCreateAndTrack }, __7("Create", "elementor"))));
+  ))), errorMessage && /* @__PURE__ */ React12.createElement(FormHelperText2, { error: true }, errorMessage)), /* @__PURE__ */ React12.createElement(CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React12.createElement(
+    Button3,
+    {
+      id: "create-variable-button",
+      size: "small",
+      variant: "contained",
+      disabled: isSubmitDisabled,
+      onClick: handleCreateAndTrack
+    },
+    __7("Create", "elementor")
+  )));
 };
 
 // src/components/variable-edit.tsx
 import * as React14 from "react";
 import { useEffect as useEffect2, useState as useState8 } from "react";
-import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp4 } from "@elementor/editor-controls";
+import { PopoverContent as PopoverContent2, useBoundProp as useBoundProp5 } 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";
@@ -1503,9 +1542,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 } = useBoundProp4(propTypeUtil);
-  const { propType } = useBoundProp4();
+  const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
+  const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
+  const { propType } = useBoundProp5();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(EDIT_CONFIRMATION_DIALOG_ID);
   const [deleteConfirmation, setDeleteConfirmation] = useState8(false);
   const [editConfirmation, setEditConfirmation] = useState8(false);
@@ -1566,7 +1605,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     });
   };
   const maybeTriggerBoundPropChange = () => {
-    if (editId === assignedValue) {
+    if (editId === variableId) {
       notifyBoundPropChange(editId);
     }
   };
@@ -1685,7 +1724,6 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 // src/components/variables-selection.tsx
 import * as React18 from "react";
 import { useState as useState9 } from "react";
-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 as ColorFilterIcon2, PlusIcon, SettingsIcon } from "@elementor/icons";
@@ -1836,7 +1874,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 } = useBoundProp5(propTypeUtil);
+  const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
   const [searchValue, setSearchValue] = useState9("");
   const {
     list: variables,
@@ -1864,12 +1902,12 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React18.createElement(IconButton7, { key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React18.createElement(PlusIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React18.createElement(IconButton7, { id: "add-variable-button", key: "add", size: SIZE4, onClick: onAddAndTrack }, /* @__PURE__ */ React18.createElement(PlusIcon, { fontSize: SIZE4 }))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React18.createElement(IconButton7, { key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React18.createElement(SettingsIcon, { fontSize: SIZE4 }))
+      /* @__PURE__ */ React18.createElement(IconButton7, { id: "variables-manager-button", key: "settings", size: SIZE4, onClick: onSettings }, /* @__PURE__ */ React18.createElement(SettingsIcon, { fontSize: SIZE4 }))
     );
   }
   const StartIcon = startIcon || (() => /* @__PURE__ */ React18.createElement(VariableIcon, { fontSize: SIZE4 }));
@@ -2121,8 +2159,8 @@ import { Button as Button7, CardActions as CardActions3, Divider as Divider5, Fo
 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 } = useBoundProp7(propTypeUtil);
+  const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
+  const { setVariableValue: notifyBoundPropChange } = useVariableBoundProp();
   const { propType } = useBoundProp7();
   const variable = useVariable(variableId);
   if (!variable) {
@@ -2273,7 +2311,7 @@ WarningVariableTag.displayName = "WarningVariableTag";
 // src/components/ui/variable/deleted-variable.tsx
 var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
-  const { setValue } = useBoundProp8();
+  const boundProp = useBoundProp8();
   const userPermissions = usePermissions();
   const [showInfotip, setShowInfotip] = useState12(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
@@ -2286,15 +2324,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();
@@ -2403,7 +2441,7 @@ var MismatchVariableAlert = ({ onClose, onClear, triggerSelect }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 var MismatchVariable = ({ variable }) => {
-  const { setValue } = useBoundProp9();
+  const { setValue, value } = useBoundProp9();
   const anchorRef = useRef3(null);
   const popupId = useId3();
   const popupState = usePopupState4({
@@ -2422,6 +2460,7 @@ var MismatchVariable = ({ variable }) => {
     closeInfotip();
     setValue(null);
   };
+  const showClearButton = !!value;
   return /* @__PURE__ */ React27.createElement(Box8, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React27.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React27.createElement(
     Infotip2,
     {
@@ -2434,7 +2473,7 @@ var MismatchVariable = ({ variable }) => {
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
-          onClear: clearValue,
+          onClear: showClearButton ? clearValue : void 0,
           triggerSelect
         }
       ),
@@ -2543,7 +2582,7 @@ var MissingVariable = () => {
 // src/controls/variable-control.tsx
 var VariableControl = () => {
   const boundProp = useBoundProp11();
-  const boundPropValue = boundProp.value;
+  const boundPropValue = boundProp.value ?? boundProp.placeholder;
   const assignedVariable = useVariable(boundPropValue?.value);
   if (!assignedVariable) {
     return /* @__PURE__ */ React30.createElement(MissingVariable, null);
@@ -2624,6 +2663,7 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
   return /* @__PURE__ */ React32.createElement(
     UnstableColorField,
     {
+      id: "color-variable-field",
       size: "tiny",
       fullWidth: true,
       value: color,
@@ -2703,6 +2743,7 @@ var FontField = ({ value, onChange, onValidationChange }) => {
     /* @__PURE__ */ React33.createElement(
       ItemSelector,
       {
+        id: "font-family-variables-selector",
         itemsList: mapFontSubs,
         selectedItem: fontFamily,
         onItemChange: handleFontFamilyChange,
@@ -2842,7 +2883,7 @@ function init() {
   registerRepeaterInjections();
   registerControlReplacement({
     component: VariableControl,
-    condition: ({ value }) => hasAssignedVariable(value)
+    condition: ({ value, placeholder }) => hasVariable(value) || hasVariable(placeholder)
   });
   registerPopoverAction({
     id: "variables",
@@ -2855,9 +2896,9 @@ function init() {
   });
   registerPanel(panel);
 }
-function hasAssignedVariable(propValue) {
-  if (propValue && typeof propValue === "object" && "$$type" in propValue) {
-    return hasVariableType(propValue.$$type);
+function hasVariable(value) {
+  if (isTransformable2(value)) {
+    return hasVariableType(value.$$type);
   }
   return false;
 }