@elementor/editor-variables 3.35.0-394 → 3.35.0-396

package/dist/index.js

@@ -50,7 +50,7 @@ var import_editor_props7 = require("@elementor/editor-props");
 var React12 = __toESM(require("react"));
 var import_react11 = require("react");
 var import_editor_panels = require("@elementor/editor-panels");
-var import_editor_ui3 = require("@elementor/editor-ui");
+var import_editor_ui4 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_icons6 = require("@elementor/icons");
 var import_ui12 = require("@elementor/ui");
@@ -1056,9 +1056,31 @@ var useVariablesManagerState = () => {
 // src/components/variables-manager/variables-manager-create-menu.tsx
 var React6 = __toESM(require("react"));
 var import_react6 = require("react");
+var import_editor_ui = require("@elementor/editor-ui");
 var import_icons3 = require("@elementor/icons");
 var import_ui6 = require("@elementor/ui");
 var import_i18n7 = require("@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,
@@ -1068,19 +1090,16 @@ var VariableManagerCreateMenu = ({
 }) => {
   const buttonRef = (0, import_react6.useRef)(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 = (0, import_react6.useMemo)(
+    () => 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(
     import_ui6.IconButton,
     {
@@ -1113,26 +1132,47 @@ var VariableManagerCreateMenu = ({
       },
       "data-testid": "variable-manager-create-menu"
     },
-    menuOptions.map((option) => /* @__PURE__ */ React6.createElement(
-      import_ui6.MenuItem,
+    menuOptionConfigs.map((config) => /* @__PURE__ */ React6.createElement(
+      MenuOption,
       {
-        key: option.key,
-        onClick: () => {
-          option.onClick?.();
-          menuState.close();
-        },
-        sx: {
-          gap: 1.5
-        }
-      },
-      (0, import_react6.createElement)(option.icon, {
-        fontSize: SIZE,
-        color: "action"
-      }),
-      /* @__PURE__ */ React6.createElement(import_ui6.Typography, { 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(import_ui6.MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: isDisabled ? "default" : "pointer" } }, (0, import_react6.createElement)(config.icon, { fontSize: SIZE, color: isDisabled ? "disabled" : "action" }), /* @__PURE__ */ React6.createElement(import_ui6.Typography, { variant: "caption", color: isDisabled ? "text.disabled" : "text.primary" }, displayName), isDisabled && /* @__PURE__ */ React6.createElement(
+    import_ui6.Box,
+    {
+      onClick: () => {
+        event?.stopPropagation();
+      }
+    },
+    /* @__PURE__ */ React6.createElement(import_editor_ui.PromotionChip, { onClick: () => {
+    } })
+  ));
+};
 var getDefaultName = (variables, type, baseName) => {
   const existingNames = Object.values(variables).filter((variable) => variable.type === type).map((variable) => variable.label);
   let counter = 1;
@@ -1147,7 +1187,7 @@ var getDefaultName = (variables, type, baseName) => {
 // src/components/variables-manager/variables-manager-table.tsx
 var React11 = __toESM(require("react"));
 var import_react10 = require("react");
-var import_editor_ui2 = require("@elementor/editor-ui");
+var import_editor_ui3 = require("@elementor/editor-ui");
 var import_icons5 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
@@ -1155,7 +1195,7 @@ var import_i18n8 = require("@wordpress/i18n");
 // src/components/fields/label-field.tsx
 var React7 = __toESM(require("react"));
 var import_react7 = require("react");
-var import_editor_ui = require("@elementor/editor-ui");
+var import_editor_ui2 = require("@elementor/editor-ui");
 var import_ui7 = require("@elementor/ui");
 function isLabelEqual(a, b) {
   return a.trim().toLowerCase() === b.trim().toLowerCase();
@@ -1215,7 +1255,7 @@ var LabelField = ({
   if (showWarningInfotip) {
     const tooltipWidth = Math.max(240, fieldRef.current?.getBoundingClientRect().width ?? 240);
     return /* @__PURE__ */ React7.createElement(
-      import_editor_ui.WarningInfotip,
+      import_editor_ui2.WarningInfotip,
       {
         open: Boolean(errorMsg || hintMsg),
         text: errorMsg || hintMsg,
@@ -1349,14 +1389,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);
       }
     };
@@ -1598,7 +1638,7 @@ var VariablesManagerTable = ({
                 fieldType: "label"
               },
               /* @__PURE__ */ React11.createElement(
-                import_editor_ui2.EllipsisWithTooltip,
+                import_editor_ui3.EllipsisWithTooltip,
                 {
                   title: row.name,
                   sx: { border: "4px solid transparent" }
@@ -1650,7 +1690,7 @@ var VariablesManagerTable = ({
               },
               row.startIcon && row.startIcon({ value: row.value }),
               /* @__PURE__ */ React11.createElement(
-                import_editor_ui2.EllipsisWithTooltip,
+                import_editor_ui3.EllipsisWithTooltip,
                 {
                   title: row.value,
                   sx: {
@@ -1710,7 +1750,7 @@ var { panel, usePanelActions } = (0, import_editor_panels.__createPanel)({
 });
 function VariablesManagerPanel() {
   const { close: closePanel } = usePanelActions();
-  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui3.useDialog)();
+  const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = (0, import_editor_ui4.useDialog)();
   const createMenuState = (0, import_ui12.usePopupState)({
     variant: "popover"
   });
@@ -1797,7 +1837,7 @@ function VariablesManagerPanel() {
     }
   ];
   const hasVariables = Object.values(variables).some((variable) => !variable.deleted);
-  return /* @__PURE__ */ React12.createElement(import_editor_ui3.ThemeProvider, null, /* @__PURE__ */ React12.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React12.createElement(import_editor_ui4.ThemeProvider, null, /* @__PURE__ */ React12.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React12.createElement(
     import_editor_panels.PanelHeader,
     {
       sx: {
@@ -1821,7 +1861,7 @@ function VariablesManagerPanel() {
         }
       }
     ))), /* @__PURE__ */ React12.createElement(import_ui12.Stack, { width: "100%", direction: "row", gap: 1 }, /* @__PURE__ */ React12.createElement(
-      import_editor_ui3.SearchField,
+      import_editor_ui4.SearchField,
       {
         sx: {
           display: "flex",
@@ -1924,8 +1964,8 @@ function VariablesManagerPanel() {
       onConfirm: () => handleDeleteVariableWithConfirmation(deleteConfirmation.id),
       closeDialog: () => setDeleteConfirmation(null)
     }
-  ), isSaveChangesDialogOpen && /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog, null, /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n9.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.Content, null, /* @__PURE__ */ React12.createElement(import_editor_ui3.SaveChangesDialog.ContentText, null, (0, import_i18n9.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React12.createElement(
-    import_editor_ui3.SaveChangesDialog.Actions,
+  ), isSaveChangesDialogOpen && /* @__PURE__ */ React12.createElement(import_editor_ui4.SaveChangesDialog, null, /* @__PURE__ */ React12.createElement(import_editor_ui4.SaveChangesDialog.Title, { onClose: closeSaveChangesDialog }, (0, import_i18n9.__)("You have unsaved changes", "elementor")), /* @__PURE__ */ React12.createElement(import_editor_ui4.SaveChangesDialog.Content, null, /* @__PURE__ */ React12.createElement(import_editor_ui4.SaveChangesDialog.ContentText, null, (0, import_i18n9.__)("To avoid losing your updates, save your changes before leaving.", "elementor"))), /* @__PURE__ */ React12.createElement(
+    import_editor_ui4.SaveChangesDialog.Actions,
     {
       actions: {
         discard: {
@@ -1951,9 +1991,9 @@ function VariablesManagerPanel() {
 }
 var usePreventUnload = (isDirty) => {
   (0, import_react11.useEffect)(() => {
-    const handleBeforeUnload = (event) => {
+    const handleBeforeUnload = (event2) => {
       if (isDirty) {
-        event.preventDefault();
+        event2.preventDefault();
       }
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
@@ -2008,31 +2048,12 @@ var usePopoverContentRef = () => {
   return (0, import_react12.useContext)(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
 var React15 = __toESM(require("react"));
 var import_react13 = require("react");
 var import_editor_controls4 = require("@elementor/editor-controls");
 var import_editor_editing_panel2 = require("@elementor/editor-editing-panel");
-var import_editor_ui4 = require("@elementor/editor-ui");
+var import_editor_ui5 = require("@elementor/editor-ui");
 var import_icons7 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
@@ -2147,7 +2168,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
   return /* @__PURE__ */ React15.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
-    import_editor_ui4.PopoverHeader,
+    import_editor_ui5.PopoverHeader,
     {
       icon: /* @__PURE__ */ React15.createElement(React15.Fragment, null, onGoBack && /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { size: SIZE2, "aria-label": (0, import_i18n10.__)("Go Back", "elementor"), onClick: onGoBack }, /* @__PURE__ */ React15.createElement(import_icons7.ArrowLeftIcon, { fontSize: SIZE2 })), /* @__PURE__ */ React15.createElement(VariableIcon, { fontSize: SIZE2 })),
       title: (0, import_i18n10.__)("Create variable", "elementor"),
@@ -2211,7 +2232,7 @@ var import_react15 = require("react");
 var import_editor_controls5 = require("@elementor/editor-controls");
 var import_editor_current_user2 = require("@elementor/editor-current-user");
 var import_editor_editing_panel3 = require("@elementor/editor-editing-panel");
-var import_editor_ui5 = require("@elementor/editor-ui");
+var import_editor_ui6 = require("@elementor/editor-ui");
 var import_icons9 = require("@elementor/icons");
 var import_ui17 = require("@elementor/ui");
 var import_i18n12 = require("@wordpress/i18n");
@@ -2245,7 +2266,7 @@ var EditConfirmationDialog = ({
         import_ui16.Checkbox,
         {
           checked: dontShowAgain,
-          onChange: (event) => setDontShowAgain(event.target.checked),
+          onChange: (event2) => setDontShowAgain(event2.target.checked),
           size: "small"
         }
       ),
@@ -2357,7 +2378,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
   return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React17.createElement(
-    import_editor_ui5.PopoverHeader,
+    import_editor_ui6.PopoverHeader,
     {
       title: (0, import_i18n12.__)("Edit variable", "elementor"),
       onClose,
@@ -2434,14 +2455,14 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 var React19 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_editor_editing_panel4 = require("@elementor/editor-editing-panel");
-var import_editor_ui7 = require("@elementor/editor-ui");
+var import_editor_ui8 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
 
 // src/components/ui/menu-item-content.tsx
 var React18 = __toESM(require("react"));
-var import_editor_ui6 = require("@elementor/editor-ui");
+var import_editor_ui7 = require("@elementor/editor-ui");
 var import_icons10 = require("@elementor/icons");
 var import_ui18 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
@@ -2461,7 +2482,7 @@ var MenuItemContent = ({ item }) => {
       }
     },
     /* @__PURE__ */ React18.createElement(
-      import_editor_ui6.EllipsisWithTooltip,
+      import_editor_ui7.EllipsisWithTooltip,
       {
         title: item.label || item.value,
         as: import_ui18.Typography,
@@ -2472,7 +2493,7 @@ var MenuItemContent = ({ item }) => {
       }
     ),
     item.secondaryText && /* @__PURE__ */ React18.createElement(
-      import_editor_ui6.EllipsisWithTooltip,
+      import_editor_ui7.EllipsisWithTooltip,
       {
         title: item.secondaryText,
         as: import_ui18.Typography,
@@ -2613,7 +2634,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
     setSearchValue("");
   };
   return /* @__PURE__ */ React19.createElement(import_editor_editing_panel4.PopoverBody, null, /* @__PURE__ */ React19.createElement(
-    import_editor_ui7.PopoverHeader,
+    import_editor_ui8.PopoverHeader,
     {
       title: (0, import_i18n14.__)("Variables", "elementor"),
       icon: /* @__PURE__ */ React19.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }),
@@ -2621,14 +2642,14 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
       actions
     }
   ), hasVariables && /* @__PURE__ */ React19.createElement(
-    import_editor_ui7.SearchField,
+    import_editor_ui8.SearchField,
     {
       value: searchValue,
       onSearch: handleSearch,
       placeholder: (0, import_i18n14.__)("Search", "elementor")
     }
   ), /* @__PURE__ */ React19.createElement(import_ui20.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React19.createElement(
-    import_editor_ui7.PopoverMenuList,
+    import_editor_ui8.PopoverMenuList,
     {
       items,
       onSelect: handleSetVariable,
@@ -2859,7 +2880,7 @@ var React23 = __toESM(require("react"));
 var import_react19 = require("react");
 var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_editing_panel5 = require("@elementor/editor-editing-panel");
-var import_editor_ui8 = require("@elementor/editor-ui");
+var import_editor_ui9 = require("@elementor/editor-ui");
 var import_ui23 = require("@elementor/ui");
 var import_i18n16 = require("@wordpress/i18n");
 var SIZE7 = "tiny";
@@ -2916,7 +2937,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
   return /* @__PURE__ */ React23.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React23.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React23.createElement(
-    import_editor_ui8.PopoverHeader,
+    import_editor_ui9.PopoverHeader,
     {
       icon: /* @__PURE__ */ React23.createElement(VariableIcon, { fontSize: SIZE7 }),
       title: (0, import_i18n16.__)("Restore variable", "elementor"),
@@ -3589,7 +3610,7 @@ function initMcp() {
 // src/register-variable-types.tsx
 var React35 = __toESM(require("react"));
 var import_editor_props5 = require("@elementor/editor-props");
-var import_editor_ui9 = require("@elementor/editor-ui");
+var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons17 = require("@elementor/icons");
 
 // src/components/fields/color-field.tsx
@@ -3745,11 +3766,12 @@ function registerVariableTypes() {
     styleTransformer: EmptyTransformer,
     variableType: "size",
     selectionFilter: () => [],
-    emptyState: /* @__PURE__ */ React35.createElement(import_editor_ui9.CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
+    emptyState: /* @__PURE__ */ React35.createElement(import_editor_ui10.CtaButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
   };
   registerVariableType({
     ...sizePromotions,
-    key: sizeVariablePropTypeUtil.key
+    key: sizeVariablePropTypeUtil.key,
+    defaultValue: "0px"
   });
   registerVariableType({
     ...sizePromotions,