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

package/dist/index.js

@@ -667,7 +667,7 @@ var React4 = __toESM(require("react"));
 var import_react4 = require("react");
 var import_icons = require("@elementor/icons");
 var import_ui4 = require("@elementor/ui");
-var VariableEditMenu = ({ menuActions, disabled }) => {
+var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   const menuState = (0, import_ui4.usePopupState)({
     variant: "popover"
   });
@@ -699,7 +699,7 @@ var VariableEditMenu = ({ menuActions, disabled }) => {
       {
         key: action.name,
         onClick: () => {
-          action.onClick?.();
+          action.onClick?.(itemId);
           menuState.close();
         },
         sx: {
@@ -724,7 +724,7 @@ var VariableEditableCell = ({
   initialValue,
   children,
   editableElement,
-  onSave,
+  onChange,
   prefixElement
 }) => {
   const [value, setValue] = (0, import_react5.useState)(initialValue);
@@ -733,7 +733,7 @@ var VariableEditableCell = ({
     setIsEditing(true);
   };
   const handleSave = () => {
-    onSave(value);
+    onChange(value);
     setIsEditing(false);
   };
   const handleKeyDown = (event) => {
@@ -751,7 +751,24 @@ var VariableEditableCell = ({
     setValue(newValue);
   };
   const editableContent = editableElement({ value, onChange: handleChange });
-  return /* @__PURE__ */ React5.createElement(import_ui5.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
+  if (isEditing) {
+    return /* @__PURE__ */ React5.createElement(import_ui5.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React5.createElement(
+      import_ui5.Stack,
+      {
+        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(
     import_ui5.Stack,
     {
       direction: "row",
@@ -764,8 +781,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
@@ -793,9 +810,9 @@ var VariableTableCell = ({
 };
 
 // src/components/variables-manager/variables-manager-table.tsx
-var VariablesManagerTable = ({ menuActions, variables }) => {
+var VariablesManagerTable = ({ menuActions, variables, onChange: handleOnChange }) => {
   const [ids, setIds] = (0, import_react6.useState)(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 {
@@ -885,7 +902,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: (0, import_react6.createElement)(row.icon, { fontSize: "inherit" }),
                 editableElement: ({ value, onChange }) => /* @__PURE__ */ React7.createElement(
@@ -912,7 +935,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
               },
@@ -939,7 +968,8 @@ var VariablesManagerTable = ({ menuActions, variables }) => {
                 VariableEditMenu,
                 {
                   menuActions,
-                  disabled: isSorting
+                  disabled: isSorting,
+                  itemId: row.id
                 }
               ))
             )
@@ -965,18 +995,26 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
 });
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
-  const isDirty = false;
-  const variables = getVariables(false);
+  const [isDirty, setIsDirty] = (0, import_react7.useState)(false);
+  const [variables, setVariables] = (0, import_react7.useState)(getVariables(false));
+  const [deletedVariables, setDeletedVariables] = (0, import_react7.useState)([]);
   usePreventUnload(isDirty);
   const menuActions = [
     {
       name: (0, import_i18n5.__)("Delete", "elementor"),
       icon: import_icons3.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(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React8.createElement(import_ui8.ErrorBoundary, { fallback: /* @__PURE__ */ React8.createElement(ErrorBoundaryFallback, null) }, /* @__PURE__ */ React8.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React8.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { width: "100%", direction: "column", alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { p: 1, pl: 2, width: "100%", direction: "row", alignItems: "center" }, /* @__PURE__ */ React8.createElement(import_ui8.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React8.createElement(import_editor_panels.PanelHeaderTitle, { sx: { display: "flex", alignItems: "center", gap: 0.5 } }, /* @__PURE__ */ React8.createElement(import_icons3.ColorFilterIcon, { fontSize: "inherit" }), (0, import_i18n5.__)("Variable Manager", "elementor"))), /* @__PURE__ */ React8.createElement(
     CloseButton,
     {
@@ -994,7 +1032,14 @@ function VariablesManagerPanel() {
         height: "100%"
       }
     },
-    /* @__PURE__ */ React8.createElement(VariablesManagerTable, { menuActions, variables })
+    /* @__PURE__ */ React8.createElement(
+      VariablesManagerTable,
+      {
+        menuActions,
+        variables,
+        onChange: handleOnChange
+      }
+    )
   ), /* @__PURE__ */ React8.createElement(import_editor_panels.PanelFooter, null, /* @__PURE__ */ React8.createElement(import_ui8.Button, { fullWidth: true, size: "small", color: "global", variant: "contained", disabled: !isDirty }, (0, import_i18n5.__)("Save changes", "elementor"))))));
 }
 var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React8.createElement(import_ui8.IconButton, { size: "small", color: "secondary", onClick: onClose, "aria-label": "Close", ...props }, /* @__PURE__ */ React8.createElement(import_icons3.XIcon, { fontSize: "small" }));