@elementor/editor-variables 3.35.0-440 → 3.35.0-441

package/dist/index.mjs

@@ -1027,7 +1027,7 @@ import * as React6 from "react";
 import { createElement as createElement7, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import { PromotionChip, PromotionPopover } from "@elementor/editor-ui";
 import { PlusIcon } from "@elementor/icons";
-import { bindMenu, bindTrigger, Box, IconButton, Menu, MenuItem, Typography as Typography5 } from "@elementor/ui";
+import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography as Typography5 } from "@elementor/ui";
 import { capitalize } from "@elementor/utils";
 import { __ as __7, sprintf as sprintf2 } from "@wordpress/i18n";
 
@@ -1126,6 +1126,9 @@ var MenuOption = ({
   const isDisabled = !userQuotaPermissions.canAdd();
   const handleClick = () => {
     if (isDisabled) {
+      if (!isPopoverOpen) {
+        setIsPopoverOpen(true);
+      }
       return;
     }
     const defaultName = getDefaultName(variables, config.key, config.variableType);
@@ -1143,34 +1146,19 @@ var MenuOption = ({
     __7("Upgrade to continue creating and editing %s variables.", "elementor"),
     config.variableType
   );
-  return /* @__PURE__ */ React6.createElement(MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: isDisabled ? "default" : "pointer" } }, createElement7(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React6.createElement(
-    Box,
+  return /* @__PURE__ */ React6.createElement(MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "pointer" } }, createElement7(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React6.createElement(
+    PromotionPopover,
     {
-      onClick: (event) => {
-        event.stopPropagation();
+      open: isPopoverOpen,
+      title,
+      content,
+      ctaText: __7("Upgrade now", "elementor"),
+      ctaUrl: `https://go.elementor.com/go-pro-manager-${config.variableType}-variable/`,
+      onClose: () => {
+        setIsPopoverOpen(false);
       }
     },
-    /* @__PURE__ */ React6.createElement(
-      PromotionPopover,
-      {
-        open: isPopoverOpen,
-        title,
-        content,
-        ctaText: __7("Upgrade now", "elementor"),
-        ctaUrl: `https://go.elementor.com/go-pro-manager-${config.variableType}-variable/`,
-        onClose: () => {
-          setIsPopoverOpen(false);
-        }
-      },
-      /* @__PURE__ */ React6.createElement(
-        PromotionChip,
-        {
-          onClick: () => {
-            setIsPopoverOpen(true);
-          }
-        }
-      )
-    )
+    /* @__PURE__ */ React6.createElement(PromotionChip, null)
   ));
 };
 var getDefaultName = (variables, type, baseName) => {
@@ -2022,7 +2010,7 @@ import { useId, useRef as useRef6 } from "react";
 import * as React22 from "react";
 import { useBoundProp as useBoundProp6 } from "@elementor/editor-controls";
 import { ColorFilterIcon as ColorFilterIcon3 } from "@elementor/icons";
-import { bindPopover, bindTrigger as bindTrigger3, Box as Box5, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
+import { bindPopover, bindTrigger as bindTrigger3, Box as Box4, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/utils/unlink-variable.ts
 function transformValueBeforeUnlink(variable, propTypeKey) {
@@ -2048,11 +2036,11 @@ import { isExperimentActive } from "@elementor/editor-v1-adapters";
 // src/context/variable-selection-popover.context.tsx
 import * as React13 from "react";
 import { createContext as createContext2, useContext as useContext2, useState as useState7 } from "react";
-import { Box as Box2 } from "@elementor/ui";
+import { Box } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
   const [anchorRef, setAnchorRef] = useState7(null);
-  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(Box2, { ref: setAnchorRef }, children));
+  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(Box, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return useContext2(PopoverContentRefContext);
@@ -2484,14 +2472,14 @@ import { __ as __14, sprintf as sprintf3 } from "@wordpress/i18n";
 import * as React18 from "react";
 import { EllipsisWithTooltip as EllipsisWithTooltip2 } from "@elementor/editor-ui";
 import { EditIcon } from "@elementor/icons";
-import { Box as Box3, IconButton as IconButton6, ListItemIcon, Tooltip as Tooltip2, 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(
-    Box3,
+    Box2,
     {
       sx: {
         flex: 1,
@@ -2821,7 +2809,7 @@ function RenderView(props) {
 // src/components/ui/tags/assigned-tag.tsx
 import * as React21 from "react";
 import { DetachIcon } from "@elementor/icons";
-import { Box as Box4, IconButton as IconButton8, Stack as Stack7, Tooltip as Tooltip4, 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");
@@ -2838,7 +2826,7 @@ var AssignedTag = ({ startIcon, label, onUnlink, ...props }) => {
       fullWidth: true,
       showActionsOnHover: true,
       startIcon: /* @__PURE__ */ React21.createElement(Stack7, { gap: 0.5, direction: "row", alignItems: "center" }, startIcon),
-      label: /* @__PURE__ */ React21.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React21.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      label: /* @__PURE__ */ React21.createElement(Box3, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React21.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -2857,7 +2845,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React22.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React22.createElement(Box4, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
     AssignedTag,
     {
       label: variable.label,
@@ -2892,7 +2880,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 import * as React26 from "react";
 import { useId as useId2, useRef as useRef7, useState as useState14 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
-import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
+import { Backdrop, bindPopover as bindPopover2, Box as Box6, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 
 // src/components/variable-restore.tsx
@@ -3031,7 +3019,7 @@ var DeletedVariableAlert = ({ onClose, onUnlink, onRestore, label }) => {
 // src/components/ui/tags/warning-variable-tag.tsx
 import * as React25 from "react";
 import { AlertTriangleFilledIcon as AlertTriangleFilledIcon4 } from "@elementor/icons";
-import { Box as Box6, Chip, Tooltip as Tooltip5, 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;
@@ -3045,7 +3033,7 @@ var WarningVariableTag = React25.forwardRef(
         variant: "standard",
         onClick,
         icon: /* @__PURE__ */ React25.createElement(AlertTriangleFilledIcon4, null),
-        label: /* @__PURE__ */ React25.createElement(Tooltip5, { title: displayText, placement: "top" }, /* @__PURE__ */ React25.createElement(Box6, { 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),
@@ -3095,7 +3083,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Box7, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React26.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React26.createElement(
+  return /* @__PURE__ */ React26.createElement(React26.Fragment, null, /* @__PURE__ */ React26.createElement(Box6, { ref: deletedChipAnchorRef }, showInfotip && /* @__PURE__ */ React26.createElement(Backdrop, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React26.createElement(
     Infotip2,
     {
       color: "warning",
@@ -3157,7 +3145,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 import * as React28 from "react";
 import { useId as useId3, useRef as useRef8, useState as useState15 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
-import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box8, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
+import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box7, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
 import { __ as __20 } from "@wordpress/i18n";
 
 // src/components/ui/mismatch-variable-alert.tsx
@@ -3212,7 +3200,7 @@ var MismatchVariable = ({ variable }) => {
     setValue(null);
   };
   const showClearButton = !!value;
-  return /* @__PURE__ */ React28.createElement(Box8, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React28.createElement(Box7, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
     Infotip3,
     {
       color: "warning",
@@ -3802,16 +3790,12 @@ function registerVariableTypes() {
 // src/renderers/style-variables-renderer.tsx
 import * as React36 from "react";
 import { useEffect as useEffect5, useState as useState19 } from "react";
-import { __privateUseListenTo as useListenTo, commandEndEvent } from "@elementor/editor-v1-adapters";
+import {
+  __privateUseListenTo as useListenTo,
+  commandEndEvent,
+  getCanvasIframeDocument
+} from "@elementor/editor-v1-adapters";
 import { Portal } from "@elementor/ui";
-
-// src/sync/get-canvas-iframe-document.ts
-function getCanvasIframeDocument() {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.$preview?.[0]?.contentDocument;
-}
-
-// src/renderers/style-variables-renderer.tsx
 var VARIABLES_WRAPPER = "body";
 function StyleVariablesRenderer() {
   const container = usePortalContainer();