@elementor/editor-variables 3.35.0-393 → 3.35.0-395

package/dist/index.mjs

@@ -1038,10 +1038,32 @@ var useVariablesManagerState = () => {
 
 // src/components/variables-manager/variables-manager-create-menu.tsx
 import * as React6 from "react";
-import { createElement as createElement7, useRef as useRef2 } from "react";
+import { createElement as createElement7, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { PromotionChip } from "@elementor/editor-ui";
 import { PlusIcon } from "@elementor/icons";
-import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography as Typography5 } from "@elementor/ui";
+import { bindMenu, bindTrigger, Box, IconButton, Menu, MenuItem, Typography as Typography5 } from "@elementor/ui";
 import { __ as __7 } from "@wordpress/i18n";
+
+// src/sync/license-info.ts
+function getLicenseInfo() {
+  const extendedWindow = window;
+  return {
+    hasPro: !!extendedWindow.elementorPro
+  };
+}
+
+// src/hooks/use-quota-permissions.ts
+var useQuotaPermissions = (variableType) => {
+  const quotaConfig = window.ElementorVariablesQuotaConfig || {};
+  const limit = quotaConfig[variableType] || 0;
+  const hasQuota = limit > 0;
+  return {
+    canAdd: () => hasQuota || getLicenseInfo().hasPro,
+    canEdit: () => hasQuota || getLicenseInfo().hasPro
+  };
+};
+
+// src/components/variables-manager/variables-manager-create-menu.tsx
 var SIZE = "tiny";
 var VariableManagerCreateMenu = ({
   variables,
@@ -1051,19 +1073,16 @@ var VariableManagerCreateMenu = ({
 }) => {
   const buttonRef = useRef2(null);
   const variableTypes = getVariableTypes();
-  const menuOptions = Object.entries(variableTypes).filter(([, variable]) => !!variable.defaultValue).map(([key, variable]) => {
-    const displayName = variable.variableType.charAt(0).toUpperCase() + variable.variableType.slice(1);
-    return {
+  const menuOptionConfigs = useMemo2(
+    () => Object.entries(variableTypes).filter(([, variable]) => !!variable.defaultValue).map(([key, variable]) => ({
       key,
-      name: displayName,
-      icon: variable.icon,
-      onClick: () => {
-        const defaultName = getDefaultName(variables, key, variable.variableType);
-        onCreate(key, defaultName, variable.defaultValue || "");
-        trackVariablesManagerEvent({ action: "add", varType: variable.variableType });
-      }
-    };
-  });
+      propTypeKey: variable.propTypeUtil.key,
+      variableType: variable.variableType,
+      defaultValue: variable.defaultValue || "",
+      icon: variable.icon
+    })),
+    [variableTypes]
+  );
   return /* @__PURE__ */ React6.createElement(React6.Fragment, null, /* @__PURE__ */ React6.createElement(
     IconButton,
     {
@@ -1096,26 +1115,47 @@ var VariableManagerCreateMenu = ({
       },
       "data-testid": "variable-manager-create-menu"
     },
-    menuOptions.map((option) => /* @__PURE__ */ React6.createElement(
-      MenuItem,
+    menuOptionConfigs.map((config) => /* @__PURE__ */ React6.createElement(
+      MenuOption,
       {
-        key: option.key,
-        onClick: () => {
-          option.onClick?.();
-          menuState.close();
-        },
-        sx: {
-          gap: 1.5
-        }
-      },
-      createElement7(option.icon, {
-        fontSize: SIZE,
-        color: "action"
-      }),
-      /* @__PURE__ */ React6.createElement(Typography5, { variant: "caption", color: "text.primary" }, option.name)
+        key: config.key,
+        config,
+        variables,
+        onCreate,
+        onClose: menuState.close
+      }
     ))
   ));
 };
+var MenuOption = ({
+  config,
+  variables,
+  onCreate,
+  onClose
+}) => {
+  const displayName = config.variableType.charAt(0).toUpperCase() + config.variableType.slice(1);
+  const userQuotaPermissions = useQuotaPermissions(config.propTypeKey);
+  const isDisabled = !userQuotaPermissions.canAdd();
+  const handleClick = () => {
+    if (isDisabled) {
+      return;
+    }
+    const defaultName = getDefaultName(variables, config.key, config.variableType);
+    onCreate(config.key, defaultName, config.defaultValue);
+    trackVariablesManagerEvent({ action: "add", varType: config.variableType });
+    onClose();
+  };
+  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,
+    {
+      onClick: () => {
+        event?.stopPropagation();
+      }
+    },
+    /* @__PURE__ */ React6.createElement(PromotionChip, { onClick: () => {
+    } })
+  ));
+};
 var getDefaultName = (variables, type, baseName) => {
   const existingNames = Object.values(variables).filter((variable) => variable.type === type).map((variable) => variable.label);
   let counter = 1;
@@ -1342,14 +1382,14 @@ var VariableEditableCell = React10.memo(
     const handleDoubleClick = () => {
       setIsEditing(true);
     };
-    const handleKeyDown = (event) => {
-      if (event.key === "Enter") {
+    const handleKeyDown = (event2) => {
+      if (event2.key === "Enter") {
         handleSave();
-      } else if (event.key === "Escape") {
+      } else if (event2.key === "Escape") {
         setIsEditing(false);
       }
-      if (event.key === " " && !isEditing) {
-        event.preventDefault();
+      if (event2.key === " " && !isEditing) {
+        event2.preventDefault();
         setIsEditing(true);
       }
     };
@@ -1944,9 +1984,9 @@ function VariablesManagerPanel() {
 }
 var usePreventUnload = (isDirty) => {
   useEffect3(() => {
-    const handleBeforeUnload = (event) => {
+    const handleBeforeUnload = (event2) => {
       if (isDirty) {
-        event.preventDefault();
+        event2.preventDefault();
       }
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
@@ -1965,7 +2005,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 Box4, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
+import { bindPopover, bindTrigger as bindTrigger3, Box as Box5, Popover, usePopupState as usePopupState3 } from "@elementor/ui";
 
 // src/utils/unlink-variable.ts
 function transformValueBeforeUnlink(variable, propTypeKey) {
@@ -1991,35 +2031,16 @@ 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 useState6 } from "react";
-import { Box } from "@elementor/ui";
+import { Box as Box2 } from "@elementor/ui";
 var PopoverContentRefContext = createContext2(null);
 var PopoverContentRefContextProvider = ({ children }) => {
   const [anchorRef, setAnchorRef] = useState6(null);
-  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(Box, { ref: setAnchorRef }, children));
+  return /* @__PURE__ */ React13.createElement(PopoverContentRefContext.Provider, { value: anchorRef }, /* @__PURE__ */ React13.createElement(Box2, { ref: setAnchorRef }, children));
 };
 var usePopoverContentRef = () => {
   return useContext2(PopoverContentRefContext);
 };
 
-// src/sync/license-info.ts
-function getLicenseInfo() {
-  const extendedWindow = window;
-  return {
-    hasPro: !!extendedWindow.elementorPro
-  };
-}
-
-// src/hooks/use-quota-permissions.ts
-var useQuotaPermissions = (variableType) => {
-  const quotaConfig = window.ElementorVariablesQuotaConfig || {};
-  const limit = quotaConfig[variableType] || 0;
-  const hasQuota = limit > 0;
-  return {
-    canAdd: () => hasQuota || getLicenseInfo().hasPro,
-    canEdit: () => hasQuota || getLicenseInfo().hasPro
-  };
-};
-
 // src/components/variable-creation.tsx
 import * as React15 from "react";
 import { useState as useState7 } from "react";
@@ -2248,7 +2269,7 @@ var EditConfirmationDialog = ({
         Checkbox,
         {
           checked: dontShowAgain,
-          onChange: (event) => setDontShowAgain(event.target.checked),
+          onChange: (event2) => setDontShowAgain(event2.target.checked),
           size: "small"
         }
       ),
@@ -2446,14 +2467,14 @@ import { __ as __14, sprintf as sprintf2 } from "@wordpress/i18n";
 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, Tooltip as Tooltip2, Typography as Typography9 } from "@elementor/ui";
+import { Box as Box3, 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(
-    Box2,
+    Box3,
     {
       sx: {
         flex: 1,
@@ -2783,7 +2804,7 @@ 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 as Tooltip4, Typography as Typography10, UnstableTag as Tag } from "@elementor/ui";
+import { Box as Box4, 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");
@@ -2800,7 +2821,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(Box3, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React21.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
+      label: /* @__PURE__ */ React21.createElement(Box4, { sx: { display: "inline-grid", minWidth: 0 } }, /* @__PURE__ */ React21.createElement(Typography10, { sx: { lineHeight: 1.34 }, variant: "caption", noWrap: true }, label)),
       actions,
       ...props
     }
@@ -2819,7 +2840,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
   });
   const unlinkVariable = createUnlinkHandler(variable, propTypeKey, setValue);
   const StartIcon = startIcon || (() => null);
-  return /* @__PURE__ */ React22.createElement(Box4, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React22.createElement(Box5, { ref: anchorRef }, /* @__PURE__ */ React22.createElement(
     AssignedTag,
     {
       label: variable.label,
@@ -2854,7 +2875,7 @@ var AssignedVariable = ({ variable, propTypeKey }) => {
 import * as React26 from "react";
 import { useId as useId2, useRef as useRef7, useState as useState13 } from "react";
 import { useBoundProp as useBoundProp8 } from "@elementor/editor-controls";
-import { Backdrop, bindPopover as bindPopover2, Box as Box6, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
+import { Backdrop, bindPopover as bindPopover2, Box as Box7, Infotip as Infotip2, Popover as Popover2, usePopupState as usePopupState4 } from "@elementor/ui";
 import { __ as __18 } from "@wordpress/i18n";
 
 // src/components/variable-restore.tsx
@@ -2993,7 +3014,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 Box5, Chip, Tooltip as Tooltip5, Typography as Typography13 } from "@elementor/ui";
+import { Box as Box6, 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;
@@ -3007,7 +3028,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(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(Box6, { 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),
@@ -3057,7 +3078,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
   const handleRestoreWithOverrides = () => {
     popupState.close();
   };
-  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(
+  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(
     Infotip2,
     {
       color: "warning",
@@ -3119,7 +3140,7 @@ var DeletedVariable = ({ variable, propTypeKey }) => {
 import * as React28 from "react";
 import { useId as useId3, useRef as useRef8, useState as useState14 } from "react";
 import { useBoundProp as useBoundProp9 } from "@elementor/editor-controls";
-import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box7, Infotip as Infotip3, Popover as Popover3, usePopupState as usePopupState5 } from "@elementor/ui";
+import { Backdrop as Backdrop2, bindPopover as bindPopover3, Box as Box8, 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
@@ -3174,7 +3195,7 @@ var MismatchVariable = ({ variable }) => {
     setValue(null);
   };
   const showClearButton = !!value;
-  return /* @__PURE__ */ React28.createElement(Box7, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
+  return /* @__PURE__ */ React28.createElement(Box8, { ref: anchorRef }, infotipVisible && /* @__PURE__ */ React28.createElement(Backdrop2, { open: true, onClick: closeInfotip, invisible: true }), /* @__PURE__ */ React28.createElement(
     Infotip3,
     {
       color: "warning",
@@ -3752,7 +3773,8 @@ function registerVariableTypes() {
   };
   registerVariableType({
     ...sizePromotions,
-    key: sizeVariablePropTypeUtil.key
+    key: sizeVariablePropTypeUtil.key,
+    defaultValue: "0px"
   });
   registerVariableType({
     ...sizePromotions,