@elementor/editor-variables 3.32.0-81 → 3.32.0-82

package/dist/index.mjs

@@ -5,7 +5,7 @@ import { __registerPanel as registerPanel } from "@elementor/editor-panels";
 
 // src/components/variables-manager/variables-manager-panel.tsx
 import * as React8 from "react";
-import { useEffect } from "react";
+import { useEffect, useState as useState4 } from "react";
 import {
   __createPanel as createPanel,
   Panel,
@@ -647,7 +647,7 @@ import * as React4 from "react";
 import { createElement as createElement5 } from "react";
 import { DotsVerticalIcon } from "@elementor/icons";
 import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, usePopupState } from "@elementor/ui";
-var VariableEditMenu = ({ menuActions, disabled }) => {
+var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   const menuState = usePopupState({
     variant: "popover"
   });
@@ -679,7 +679,7 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
       {
         key: action.name,
         onClick: () => {
-          action.onClick?.();
+          action.onClick?.(itemId);
           menuState.close();
         },
         sx: {
@@ -704,7 +704,7 @@ var VariableEditableCell = ({
   initialValue,
   children,
   editableElement,
-  onSave,
+  onChange,
   prefixElement
 }) => {
   const [value, setValue] = useState2(initialValue);
@@ -713,7 +713,7 @@ var VariableEditableCell = ({
     setIsEditing(true);
   };
   const handleSave = () => {
-    onSave(value);
+    onChange(value);
     setIsEditing(false);
   };
   const handleKeyDown = (event) => {
@@ -731,7 +731,24 @@ var VariableEditableCell = ({
     setValue(newValue);
   };
   const editableContent = editableElement({ value, onChange: handleChange });
-  return /* @__PURE__ */ React5.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
+  if (isEditing) {
+    return /* @__PURE__ */ React5.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
+      Stack2,
+      {
+        direction: "row",
+        alignItems: "center",
+        gap: 1,
+        onDoubleClick: handleDoubleClick,
+        onKeyDown: handleKeyDown,
+        tabIndex: 0,
+        role: "button",
+        "aria-label": "Double click or press Space to edit"
+      },
+      prefixElement,
+      editableContent
+    ));
+  }
+  return /* @__PURE__ */ React5.createElement(
     Stack2,
     {
       direction: "row",
@@ -744,8 +761,8 @@ var VariableEditableCell = ({
       "aria-label": "Double click or press Space to edit"
     },
     prefixElement,
-    isEditing ? editableContent : children
-  ));
+    children
+  );
 };
 
 // src/components/variables-manager/variable-table-cell.tsx
@@ -773,9 +790,9 @@ var VariableTableCell = ({
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-var VariablesManagerTable = ({ menuActions, variables }) => {
+var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange }) => {
   const [ids, setIds] = useState3(Object.keys(variables));
-  const rows = ids.map((id2) => {
+  const rows = ids.filter((id2) => !variables[id2].deleted).map((id2) => {
     const variable = variables[id2];
     const variableType = getVariableType(variable.type);
     return {
@@ -865,7 +882,13 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
               VariableEditableCell,
               {
                 initialValue: row.name,
-                onSave: () => {
+                onChange: (value) => {
+                  if (value !== row.name) {
+                    handleOnChange({
+                      ...variables,
+                      [row.id]: { ...variables[row.id], label: value }
+                    });
+                  }
                 },
                 prefixElement: createElement9(row.icon, { fontSize: "inherit" }),
                 editableElement: ({ value, onChange }) => /* @__PURE__ */ React7.createElement(
@@ -892,7 +915,13 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
               VariableEditableCell,
               {
                 initialValue: row.value,
-                onSave: () => {
+                onChange: (value) => {
+                  if (value !== row.value) {
+                    handleOnChange({
+                      ...variables,
+                      [row.id]: { ...variables[row.id], value }
+                    });
+                  }
                 },
                 editableElement: row.valueField
               },
@@ -919,7 +948,8 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
                 VariableEditMenu,
                 {
                   menuActions,
-                  disabled: isSorting
+                  disabled: isSorting,
+                  itemId: row.id
                 }
               ))
             )
@@ -945,18 +975,26 @@ var { panel, usePanelActions } = createPanel({
 });
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
-  const isDirty = false;
-  const variables = getVariables(false);
+  const [isDirty, setIsDirty] = useState4(false);
+  const [variables, setVariables] = useState4(getVariables(false));
+  const [deletedVariables, setDeletedVariables] = useState4([]);
   usePreventUnload(isDirty);
   const menuActions = [
     {
       name: __5("Delete", "elementor"),
       icon: TrashIcon,
       color: "error.main",
-      onClick: () => {
+      onClick: (itemId) => {
+        setDeletedVariables([...deletedVariables, itemId]);
+        setVariables({ ...variables, [itemId]: { ...variables[itemId], deleted: true } });
+        setIsDirty(true);
       }
     }
   ];
+  const handleOnChange = (newVariables) => {
+    setVariables(newVariables);
+    setIsDirty(true);
+  };
   return /* @__PURE__ */ React8.createElement(ThemeProvider, null, /* @__PURE__ */ React8.createElement(ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(Panel, null, /* @__PURE__ */ React8.createElement(PanelHeader, null, /* @__PURE__ */ React8.createElement(Stack4, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React8.createElement(Stack4, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React8.createElement(Stack4, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(ColorFilterIcon, { fontSize: "inherit" }), __5("Variable Manager", "elementor"))), /* @__PURE__ */ React8.createElement(
     CloseButton,
     {
@@ -974,7 +1012,14 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React8.createElement(VariablesManagerTable, { menuActions, variables })
+    /* @__PURE__ */ React8.createElement(
+      VariablesManagerTable,
+      {
+        menuActions,
+        variables,
+        onChange: handleOnChange
+      }
+    )
   ), /* @__PURE__ */ React8.createElement(PanelFooter, null, /* @__PURE__ */ React8.createElement(Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, __5("Save changes", "elementor"))))));
 }
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(IconButton3, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(XIcon, { fontSize: "small" }));
@@ -1022,16 +1067,16 @@ function createUnlinkHandler(variable, propTypeKey, setValue) {
 
 // src/components/variable-selection-popover.tsx
 import * as React19 from "react";
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 
 // src/context/variable-selection-popover.context.tsx
 import * as React9 from "react";
-import { createContext as createContext2, useContext as useContext2, useState as useState4 } from "react";
+import { createContext as createContext2, useContext as useContext2, useState as useState5 } from "react";
 import { Box as Box2 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
-  const [anchorRef, setAnchorRef] = useState4(null);
+  const [anchorRef, setAnchorRef] = useState5(null);
   return /* @__PURE__ */ React9.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React9.createElement(Box2, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
@@ -1055,7 +1100,7 @@ var usePermissions = () => {
 
 // src/components/variable-creation.tsx
 import * as React11 from "react";
-import { useState as useState5 } from "react";
+import { useState as useState6 } from "react";
 import { PopoverContent, useBoundProp as useBoundProp3 } from "@elementor/editor-controls";
 import { PopoverBody } from "@elementor/editor-editing-panel";
 import { PopoverHeader } from "@elementor/editor-ui";
@@ -1107,10 +1152,10 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   const { setValue: setVariable, path } = useBoundProp3(propTypeUtil);
   const { propType } = useBoundProp3();
   const initialValue = useInitialValue();
-  const [value, setValue] = useState5(initialValue);
-  const [label, setLabel] = useState5("");
-  const [errorMessage, setErrorMessage] = useState5("");
-  const [valueFieldError, setValueFieldError] = useState5("");
+  const [value, setValue] = useState6(initialValue);
+  const [label, setLabel] = useState6("");
+  const [errorMessage, setErrorMessage] = useState6("");
+  const [valueFieldError, setValueFieldError] = useState6("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const resetFields = () => {
     setValue("");
@@ -1211,7 +1256,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
 
 // src/components/variable-edit.tsx
 import * as React14 from "react";
-import { useEffect as useEffect2, useState as useState7 } from "react";
+import { useEffect as useEffect2, useState as useState8 } from "react";
 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";
@@ -1245,7 +1290,7 @@ var DeleteConfirmationDialog = ({
 
 // src/components/ui/edit-confirmation-dialog.tsx
 import * as React13 from "react";
-import { useState as useState6 } from "react";
+import { useState as useState7 } from "react";
 import { AlertTriangleFilledIcon } from "@elementor/icons";
 import {
   Button as Button4,
@@ -1265,7 +1310,7 @@ var EditConfirmationDialog = ({
   onConfirm,
   onSuppressMessage
 }) => {
-  const [dontShowAgain, setDontShowAgain] = useState6(false);
+  const [dontShowAgain, setDontShowAgain] = useState7(false);
   const handleSave = () => {
     if (dontShowAgain) {
       onSuppressMessage?.();
@@ -1298,18 +1343,18 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { setValue: notifyBoundPropChange, value: assignedValue } = useBoundProp4(propTypeUtil);
   const { propType } = useBoundProp4();
   const [isMessageSuppressed, suppressMessage] = useSuppressedMessage(EDIT_CONFIRMATION_DIALOG_ID);
-  const [deleteConfirmation, setDeleteConfirmation] = useState7(false);
-  const [editConfirmation, setEditConfirmation] = useState7(false);
-  const [errorMessage, setErrorMessage] = useState7("");
-  const [valueFieldError, setValueFieldError] = useState7("");
+  const [deleteConfirmation, setDeleteConfirmation] = useState8(false);
+  const [editConfirmation, setEditConfirmation] = useState8(false);
+  const [errorMessage, setErrorMessage] = useState8("");
+  const [valueFieldError, setValueFieldError] = useState8("");
   const { labelFieldError, setLabelFieldError } = useLabelError();
   const variable = useVariable(editId);
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
   const userPermissions = usePermissions();
-  const [value, setValue] = useState7(() => variable.value);
-  const [label, setLabel] = useState7(() => variable.label);
+  const [value, setValue] = useState8(() => variable.value);
+  const [label, setLabel] = useState8(() => variable.label);
   useEffect2(() => {
     styleVariablesRepository.update({
       [editId]: {
@@ -1475,7 +1520,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 
 // src/components/variables-selection.tsx
 import * as React18 from "react";
-import { useState as useState8 } 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";
@@ -1637,7 +1682,7 @@ 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 [searchValue, setSearchValue] = useState8("");
+  const [searchValue, setSearchValue] = useState9("");
   const {
     list: variables,
     hasMatches: hasSearchResults,
@@ -1733,8 +1778,8 @@ var VIEW_LIST = "list";
 var VIEW_ADD = "add";
 var VIEW_EDIT = "edit";
 var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable }) => {
-  const [currentView, setCurrentView] = useState9(VIEW_LIST);
-  const [editId, setEditId] = useState9("");
+  const [currentView, setCurrentView] = useState10(VIEW_LIST);
+  const [editId, setEditId] = useState10("");
   const { open } = usePanelActions();
   const onSettingsAvailable = isExperimentActive("e_variables_manager") ? () => {
     open();
@@ -1883,13 +1928,13 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/deleted-variable.tsx
 import * as React25 from "react";
-import { useId as useId2, useRef as useRef2, useState as useState11 } from "react";
+import { useId as useId2, useRef as useRef2, useState as useState12 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
 import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip, Popover as Popover2, usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/components/variable-restore.tsx
 import * as React22 from "react";
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 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";
@@ -1904,10 +1949,10 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   if (!variable) {
     throw new Error(`Global ${variableType} variable not found`);
   }
-  const [errorMessage, setErrorMessage] = useState10("");
-  const [valueFieldError, setValueFieldError] = useState10("");
-  const [label, setLabel] = useState10(variable.label);
-  const [value, setValue] = useState10(variable.value);
+  const [errorMessage, setErrorMessage] = useState11("");
+  const [valueFieldError, setValueFieldError] = useState11("");
+  const [label, setLabel] = useState11(variable.label);
+  const [value, setValue] = useState11(variable.value);
   const { labelFieldError, setLabelFieldError } = useLabelError({
     value: variable.label,
     message: ERROR_MESSAGES.DUPLICATED_LABEL
@@ -2055,7 +2100,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const { propTypeUtil } = getVariableType(propTypeKey);
   const { setValue } = useBoundProp8();
   const userPermissions = usePermissions();
-  const [showInfotip, setShowInfotip] = useState11(false);
+  const [showInfotip, setShowInfotip] = useState12(false);
   const toggleInfotip = () => setShowInfotip((prev) => !prev);
   const closeInfotip = () => setShowInfotip(false);
   const deletedChipAnchorRef = useRef2(null);
@@ -2139,7 +2184,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 
 // src/components/ui/variable/mismatch-variable.tsx
 import * as React28 from "react";
-import { useId as useId3, useRef as useRef3, useState as useState12 } from "react";
+import { useId as useId3, useRef as useRef3, useState as useState13 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box9, Infotip as Infotip2, Popover as Popover3, usePopupState as usePopupState4 } from "@elementor/ui";
 
@@ -2215,7 +2260,7 @@ var MismatchVariable = ({ variable }) => {
     variant: "popover",
     popupId: `elementor-variables-list-${popupId}`
   });
-  const [infotipVisible, setInfotipVisible] = useState12(false);
+  const [infotipVisible, setInfotipVisible] = useState13(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const triggerSelect = () => {
@@ -2280,7 +2325,7 @@ var MismatchVariable = ({ variable }) => {
 
 // src/components/ui/variable/missing-variable.tsx
 import * as React31 from "react";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 import { useBoundProp as useBoundProp10 } from "@elementor/editor-controls";
 import { Backdrop as Backdrop3, Infotip as Infotip3 } from "@elementor/ui";
 import { __ as __21 } from "@wordpress/i18n";
@@ -2339,7 +2384,7 @@ var MissingTag = React30.forwardRef(({ label, onClick, ...props }, ref) => {
 // src/components/ui/variable/missing-variable.tsx
 var MissingVariable = () => {
   const { setValue } = useBoundProp10();
-  const [infotipVisible, setInfotipVisible] = useState13(false);
+  const [infotipVisible, setInfotipVisible] = useState14(false);
   const toggleInfotip = () => setInfotipVisible((prev) => !prev);
   const closeInfotip = () => setInfotipVisible(false);
   const clearValue = () => setValue(null);
@@ -2434,11 +2479,11 @@ import { BrushIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 
 // src/components/fields/color-field.tsx
 import * as React34 from "react";
-import { useRef as useRef4, useState as useState14 } from "react";
+import { useRef as useRef4, useState as useState15 } from "react";
 import { UnstableColorField } from "@elementor/ui";
 var ColorField = ({ value, onChange, onValidationChange }) => {
-  const [color, setColor] = useState14(value);
-  const [errorMessage, setErrorMessage] = useState14("");
+  const [color, setColor] = useState15(value);
+  const [errorMessage, setErrorMessage] = useState15("");
   const defaultRef = useRef4(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const handleChange = (newValue) => {
@@ -2477,14 +2522,14 @@ var ColorField = ({ value, onChange, onValidationChange }) => {
 
 // src/components/fields/font-field.tsx
 import * as React35 from "react";
-import { useId as useId4, useRef as useRef5, useState as useState15 } from "react";
+import { useId as useId4, useRef as useRef5, useState as useState16 } from "react";
 import { enqueueFont as enqueueFont2, ItemSelector } from "@elementor/editor-controls";
 import { useFontFamilies, useSectionWidth as useSectionWidth4 } from "@elementor/editor-editing-panel";
 import { ChevronDownIcon, TextIcon } from "@elementor/icons";
 import { bindPopover as bindPopover4, bindTrigger as bindTrigger3, Popover as Popover4, UnstableTag, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __23 } from "@wordpress/i18n";
 var FontField = ({ value, onChange, onValidationChange }) => {
-  const [fontFamily, setFontFamily] = useState15(value);
+  const [fontFamily, setFontFamily] = useState16(value);
   const defaultRef = useRef5(null);
   const anchorRef = usePopoverContentRef() ?? defaultRef.current;
   const fontPopoverState = usePopupState5({ variant: "popover" });
@@ -2565,7 +2610,7 @@ function registerVariableTypes() {
 
 // src/renderers/style-variables-renderer.tsx
 import * as React37 from "react";
-import { useEffect as useEffect3, useState as useState16 } from "react";
+import { useEffect as useEffect3, useState as useState17 } from "react";
 import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
 
@@ -2592,7 +2637,7 @@ function usePortalContainer() {
   return useListenTo(commandEndEvent("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
 }
 function useStyleVariables() {
-  const [variables, setVariables] = useState16({});
+  const [variables, setVariables] = useState17({});
   useEffect3(() => {
     const unsubscribe = styleVariablesRepository.subscribe(setVariables);
     return () => {