@elementor/editor-variables 3.33.0-151 → 3.33.0-153

package/dist/index.js

@@ -972,7 +972,8 @@ var LabelField = ({
       onChange: (e) => handleChange(e.target.value),
       inputProps: {
         maxLength: VARIABLE_LABEL_MAX_LENGTH,
-        ...selectOnShow && { onFocus: (e) => e.target.select() }
+        ...selectOnShow && { onFocus: (e) => e.target.select() },
+        "aria-label": "Name"
       },
       autoFocus: focusOnShow
     }
@@ -995,7 +996,7 @@ var LabelField = ({
   return textField;
 };
 
-// src/components/variables-manager/variable-edit-menu.tsx
+// src/components/variables-manager/utils/variable-edit-menu.tsx
 var React6 = __toESM(require("react"));
 var import_react7 = require("react");
 var import_icons3 = require("@elementor/icons");
@@ -1049,11 +1050,35 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   ));
 };
 
-// src/components/variables-manager/variable-editable-cell.tsx
+// src/components/variables-manager/utils/variable-table-cell.tsx
 var React7 = __toESM(require("react"));
-var import_react8 = require("react");
 var import_ui7 = require("@elementor/ui");
-var VariableEditableCell = React7.memo(
+var VariableTableCell = ({
+  children,
+  isHeader,
+  width,
+  maxWidth,
+  align,
+  noPadding,
+  sx
+}) => {
+  const baseSx = {
+    maxWidth: maxWidth ?? 150,
+    cursor: "initial",
+    typography: "caption",
+    ...isHeader && { color: "text.primary", fontWeight: "bold" },
+    ...isHeader && !noPadding && { padding: "10px 16px" },
+    ...width && { width },
+    ...sx
+  };
+  return /* @__PURE__ */ React7.createElement(import_ui7.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+};
+
+// src/components/variables-manager/variable-editable-cell.tsx
+var React8 = __toESM(require("react"));
+var import_react8 = require("react");
+var import_ui8 = require("@elementor/ui");
+var VariableEditableCell = React8.memo(
   ({
     initialValue,
     children,
@@ -1063,6 +1088,7 @@ var VariableEditableCell = React7.memo(
     autoEdit = false,
     onRowRef,
     onAutoEditComplete,
+    gap = 1,
     fieldType
   }) => {
     const [value, setValue] = (0, import_react8.useState)(initialValue);
@@ -1118,13 +1144,13 @@ var VariableEditableCell = React7.memo(
       error: currentError
     });
     if (isEditing) {
-      return /* @__PURE__ */ React7.createElement(import_ui7.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React7.createElement(
-        import_ui7.Stack,
+      return /* @__PURE__ */ React8.createElement(import_ui8.ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React8.createElement(
+        import_ui8.Stack,
         {
           ref: rowRef,
           direction: "row",
           alignItems: "center",
-          gap: 1,
+          gap,
           onDoubleClick: handleDoubleClick,
           onKeyDown: handleKeyDown,
           tabIndex: 0,
@@ -1135,13 +1161,13 @@ var VariableEditableCell = React7.memo(
         editableContent
       ));
     }
-    return /* @__PURE__ */ React7.createElement(
-      import_ui7.Stack,
+    return /* @__PURE__ */ React8.createElement(
+      import_ui8.Stack,
       {
         ref: rowRef,
         direction: "row",
         alignItems: "center",
-        gap: 1,
+        gap,
         onDoubleClick: handleDoubleClick,
         onKeyDown: handleKeyDown,
         tabIndex: 0,
@@ -1154,30 +1180,6 @@ var VariableEditableCell = React7.memo(
   }
 );
 
-// src/components/variables-manager/variable-table-cell.tsx
-var React8 = __toESM(require("react"));
-var import_ui8 = require("@elementor/ui");
-var VariableTableCell = ({
-  children,
-  isHeader,
-  width,
-  maxWidth,
-  align,
-  noPadding,
-  sx
-}) => {
-  const baseSx = {
-    maxWidth: maxWidth ?? 150,
-    cursor: "initial",
-    typography: "caption",
-    ...isHeader && { color: "text.primary", fontWeight: "bold" },
-    ...isHeader && !noPadding && { padding: "10px 16px" },
-    ...width && { width },
-    ...sx
-  };
-  return /* @__PURE__ */ React8.createElement(import_ui8.TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
-};
-
 // src/components/variables-manager/variables-manager-table.tsx
 var VariablesManagerTable = ({
   menuActions,
@@ -1375,14 +1377,19 @@ var VariablesManagerTable = ({
                   }
                 },
                 editableElement: row.valueField,
-                onRowRef: handleRowRef(row.id)
+                onRowRef: handleRowRef(row.id),
+                gap: 0.25
               },
               row.startIcon && row.startIcon({ value: row.value }),
               /* @__PURE__ */ React9.createElement(
                 import_editor_ui2.EllipsisWithTooltip,
                 {
                   title: row.value,
-                  sx: { border: "4px solid transparent" }
+                  sx: {
+                    border: "4px solid transparent",
+                    lineHeight: "1",
+                    pt: 0.25
+                  }
                 },
                 row.value
               )