@elementor/editor-variables 3.33.0-121 → 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("");
@@ -1454,7 +1483,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 // 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";
@@ -1513,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);
@@ -1576,7 +1605,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     });
   };
   const maybeTriggerBoundPropChange = () => {
-    if (editId === assignedValue) {
+    if (editId === variableId) {
       notifyBoundPropChange(editId);
     }
   };
@@ -1695,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";
@@ -1846,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,
@@ -2131,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) {
@@ -2283,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);
@@ -2296,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();
@@ -2413,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({
@@ -2432,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,
     {
@@ -2444,7 +2473,7 @@ var MismatchVariable = ({ variable }) => {
         MismatchVariableAlert,
         {
           onClose: closeInfotip,
-          onClear: clearValue,
+          onClear: showClearButton ? clearValue : void 0,
           triggerSelect
         }
       ),
@@ -2553,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);
@@ -2854,7 +2883,7 @@ function init() {
   registerRepeaterInjections();
   registerControlReplacement({
     component: VariableControl,
-    condition: ({ value }) => hasAssignedVariable(value)
+    condition: ({ value, placeholder }) => hasVariable(value) || hasVariable(placeholder)
   });
   registerPopoverAction({
     id: "variables",
@@ -2867,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;
 }