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

package/dist/index.mjs

@@ -959,7 +959,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
     }
@@ -982,7 +983,7 @@ var LabelField = ({
   return textField;
 };
 
-// src/components/variables-manager/variable-edit-menu.tsx
+// src/components/variables-manager/utils/variable-edit-menu.tsx
 import * as React6 from "react";
 import { createElement as createElement8 } from "react";
 import { DotsVerticalIcon } from "@elementor/icons";
@@ -1036,11 +1037,35 @@ var VariableEditMenu = ({ menuActions, disabled, itemId }) => {
   ));
 };
 
-// src/components/variables-manager/variable-editable-cell.tsx
+// src/components/variables-manager/utils/variable-table-cell.tsx
 import * as React7 from "react";
+import { TableCell } from "@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__ */ React7.createElement(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
+};
+
+// src/components/variables-manager/variable-editable-cell.tsx
+import * as React8 from "react";
 import { useCallback as useCallback3, useEffect, useRef as useRef2, useState as useState4 } from "react";
 import { ClickAwayListener, Stack as Stack2 } from "@elementor/ui";
-var VariableEditableCell = React7.memo(
+var VariableEditableCell = React8.memo(
   ({
     initialValue,
     children,
@@ -1050,6 +1075,7 @@ var VariableEditableCell = React7.memo(
     autoEdit = false,
     onRowRef,
     onAutoEditComplete,
+    gap = 1,
     fieldType
   }) => {
     const [value, setValue] = useState4(initialValue);
@@ -1105,13 +1131,13 @@ var VariableEditableCell = React7.memo(
       error: currentError
     });
     if (isEditing) {
-      return /* @__PURE__ */ React7.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React7.createElement(
+      return /* @__PURE__ */ React8.createElement(ClickAwayListener, { onClickAway: handleSave }, /* @__PURE__ */ React8.createElement(
         Stack2,
         {
           ref: rowRef,
           direction: "row",
           alignItems: "center",
-          gap: 1,
+          gap,
           onDoubleClick: handleDoubleClick,
           onKeyDown: handleKeyDown,
           tabIndex: 0,
@@ -1122,13 +1148,13 @@ var VariableEditableCell = React7.memo(
         editableContent
       ));
     }
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       Stack2,
       {
         ref: rowRef,
         direction: "row",
         alignItems: "center",
-        gap: 1,
+        gap,
         onDoubleClick: handleDoubleClick,
         onKeyDown: handleKeyDown,
         tabIndex: 0,
@@ -1141,30 +1167,6 @@ var VariableEditableCell = React7.memo(
   }
 );
 
-// src/components/variables-manager/variable-table-cell.tsx
-import * as React8 from "react";
-import { TableCell } from "@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(TableCell, { size: "small", padding: noPadding ? "none" : void 0, align, sx: baseSx }, children);
-};
-
 // src/components/variables-manager/variables-manager-table.tsx
 var VariablesManagerTable = ({
   menuActions,
@@ -1362,14 +1364,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(
                 EllipsisWithTooltip,
                 {
                   title: row.value,
-                  sx: { border: "4px solid transparent" }
+                  sx: {
+                    border: "4px solid transparent",
+                    lineHeight: "1",
+                    pt: 0.25
+                  }
                 },
                 row.value
               )