@elementor/editor-variables 3.33.0-175 → 3.33.0-176

package/dist/index.mjs

@@ -2098,7 +2098,7 @@ import { useSuppressedMessage } from "@elementor/editor-current-user";
 import { PopoverBody as PopoverBody2 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader2 } from "@elementor/editor-ui";
 import { ArrowLeftIcon as ArrowLeftIcon2, TrashIcon as TrashIcon2 } from "@elementor/icons";
-import { Button as Button6, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Typography as Typography8 } from "@elementor/ui";
+import { Button as Button6, CardActions as CardActions2, Divider as Divider3, FormHelperText as FormHelperText3, IconButton as IconButton5, Tooltip, Typography as Typography8 } from "@elementor/ui";
 import { __ as __12 } from "@wordpress/i18n";
 
 // src/components/ui/edit-confirmation-dialog.tsx
@@ -2151,6 +2151,7 @@ var EditConfirmationDialog = ({
 
 // src/components/variable-edit.tsx
 var SIZE3 = "tiny";
+var DELETE_LABEL = __12("Delete variable", "elementor");
 var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const { icon: VariableIcon, valueField: ValueField, variableType } = useVariableType();
   const { setVariableValue: notifyBoundPropChange, variableId } = useVariableBoundProp();
@@ -2231,16 +2232,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   const actions = [];
   if (userPermissions.canDelete()) {
     actions.push(
-      /* @__PURE__ */ React17.createElement(
-        IconButton5,
-        {
-          key: "delete",
-          size: SIZE3,
-          "aria-label": __12("Delete", "elementor"),
-          onClick: handleDeleteConfirmation
-        },
-        /* @__PURE__ */ React17.createElement(TrashIcon2, { fontSize: SIZE3 })
-      )
+      /* @__PURE__ */ React17.createElement(Tooltip, { key: "delete", placement: "top", title: DELETE_LABEL }, /* @__PURE__ */ React17.createElement(IconButton5, { size: SIZE3, onClick: handleDeleteConfirmation, "aria-label": DELETE_LABEL }, /* @__PURE__ */ React17.createElement(TrashIcon2, { fontSize: SIZE3 })))
     );
   }
   const hasEmptyFields = () => {
@@ -2337,16 +2329,17 @@ import { useState as useState10 } from "react";
 import { PopoverBody as PopoverBody3 } from "@elementor/editor-editing-panel";
 import { PopoverHeader as PopoverHeader3, PopoverMenuList, SearchField as SearchField2 } from "@elementor/editor-ui";
 import { ColorFilterIcon as ColorFilterIcon2, PlusIcon as PlusIcon2, SettingsIcon } from "@elementor/icons";
-import { Divider as Divider4, IconButton as IconButton7 } from "@elementor/ui";
+import { Divider as Divider4, IconButton as IconButton7, Tooltip as Tooltip3 } from "@elementor/ui";
 import { __ as __14, sprintf as sprintf2 } from "@wordpress/i18n";
 
 // src/components/ui/menu-item-content.tsx
 import * as React18 from "react";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box2, IconButton as IconButton6, ListItemIcon, Typography as Typography9 } from "@elementor/ui";
+import { Box as Box2, IconButton as IconButton6, ListItemIcon, Tooltip as Tooltip2, Typography as Typography9 } from "@elementor/ui";
 import { __ as __13 } from "@wordpress/i18n";
 var SIZE4 = "tiny";
+var EDIT_LABEL = __13("Edit variable", "elementor");
 var MenuItemContent = ({ item }) => {
   const onEdit = item.onEdit;
   return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React18.createElement(
@@ -2382,7 +2375,7 @@ var MenuItemContent = ({ item }) => {
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React18.createElement(
+  ), !!onEdit && /* @__PURE__ */ React18.createElement(Tooltip2, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React18.createElement(
     IconButton6,
     {
       sx: { mx: 1, opacity: "0" },
@@ -2390,10 +2383,10 @@ var MenuItemContent = ({ item }) => {
         e.stopPropagation();
         onEdit(item.value);
       },
-      "aria-label": __13("Edit", "elementor")
+      "aria-label": EDIT_LABEL
     },
     /* @__PURE__ */ React18.createElement(EditIcon, { color: "action", fontSize: SIZE4 })
-  ));
+  )));
 };
 
 // src/components/ui/styled-menu-list.tsx
@@ -2430,6 +2423,8 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
 
 // src/components/variables-selection.tsx
 var SIZE5 = "tiny";
+var CREATE_LABEL = __14("Create variable", "elementor");
+var MANAGER_LABEL = __14("Variable Manager", "elementor");
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
@@ -2460,12 +2455,30 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React19.createElement(IconButton7, { id: "add-variable-button", key: "add", size: SIZE5, onClick: onAddAndTrack }, /* @__PURE__ */ React19.createElement(PlusIcon2, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React19.createElement(Tooltip3, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React19.createElement(
+        IconButton7,
+        {
+          id: "add-variable-button",
+          size: SIZE5,
+          onClick: onAddAndTrack,
+          "aria-label": CREATE_LABEL
+        },
+        /* @__PURE__ */ React19.createElement(PlusIcon2, { fontSize: SIZE5 })
+      ))
     );
   }
   if (onSettings) {
     actions.push(
-      /* @__PURE__ */ React19.createElement(IconButton7, { id: "variables-manager-button", key: "settings", size: SIZE5, onClick: onSettings }, /* @__PURE__ */ React19.createElement(SettingsIcon, { fontSize: SIZE5 }))
+      /* @__PURE__ */ React19.createElement(Tooltip3, { key: "settings", placement: "top", title: MANAGER_LABEL }, /* @__PURE__ */ React19.createElement(
+        IconButton7,
+        {
+          id: "variables-manager-button",
+          size: SIZE5,
+          onClick: onSettings,
+          "aria-label": MANAGER_LABEL
+        },
+        /* @__PURE__ */ React19.createElement(SettingsIcon, { fontSize: SIZE5 })
+      ))
     );
   }
   const StartIcon = startIcon || (() => /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: SIZE5 }));
@@ -2634,17 +2647,18 @@ function RenderView(props) {
 // src/components/ui/tags/assigned-tag.tsx
 import * as React21 from "react";
 import { DetachIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton8, Stack as Stack7, Tooltip, Typography as Typography10, UnstableTag as Tag } from "@elementor/ui";
+import { Box as Box3, IconButton as IconButton8, Stack as Stack7, Tooltip as Tooltip4, Typography as Typography10, UnstableTag as Tag } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
 var SIZE6 = "tiny";
+var UNLINK_LABEL = __15("Unlink variable", "elementor");
 var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
   const actions = [];
   if (onUnlink) {
     actions.push(
-      /* @__PURE__ */ React21.createElement(IconButton8, { key: "unlink", size: SIZE6, onClick: onUnlink, "aria-label": __15("Unlink", "elementor") }, /* @__PURE__ */ React21.createElement(DetachIcon, { fontSize: SIZE6 }))
+      /* @__PURE__ */ React21.createElement(Tooltip4, { key: "unlink", title: UNLINK_LABEL, placement: "bottom" }, /* @__PURE__ */ React21.createElement(IconButton8, { size: SIZE6, onClick: onUnlink, "aria-label": UNLINK_LABEL }, /* @__PURE__ */ React21.createElement(DetachIcon, { fontSize: SIZE6 })))
     );
   }
-  return /* @__PURE__ */ React21.createElement(Tooltip, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
+  return /* @__PURE__ */ React21.createElement(Tooltip4, { title: label, placement: "top" }, /* @__PURE__ */ React21.createElement(
     Tag,
     {
       fullWidth: true,
@@ -2838,7 +2852,7 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 // src/components/ui/tags/warning-variable-tag.tsx
 import * as React25 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon3 } from "@elementor/icons";
-import { Box as Box5, Chip, Tooltip as Tooltip2, Typography as Typography13 } from "@elementor/ui";
+import { Box as Box5, Chip, Tooltip as Tooltip5, Typography as Typography13 } from "@elementor/ui";
 var WarningVariableTag = React25.forwardRef(
   ({ label, suffix, onClick, icon, ...props }, ref) => {
     const displayText = suffix ? `${label} (${suffix})` : label;
@@ -2852,7 +2866,7 @@ var WarningVariableTag = React25.forwardRef(
         variant: "standard",
         onClick,
         icon: /* @__PURE__ */ React25.createElement(AlertTriangleFilledIcon3, null),
-        label: /* @__PURE__ */ React25.createElement(Tooltip2, { title: displayText, placement: "top" }, /* @__PURE__ */ React25.createElement(Box5, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React25.createElement(Typography13, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
+        label: /* @__PURE__ */ React25.createElement(Tooltip5, { title: displayText, placement: "top" }, /* @__PURE__ */ React25.createElement(Box5, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React25.createElement(Typography13, { variant: "caption", noWrap: true, sx: { lineHeight: 1.34 } }, displayText))),
         sx: {
           height: (theme) => theme.spacing(3.5),
           borderRadius: (theme) => theme.spacing(1),