@elementor/editor-variables 4.0.0-539 → 4.0.0-541

package/dist/index.mjs

@@ -1133,21 +1133,18 @@ import { bindMenu, bindTrigger, IconButton, Menu, MenuItem, Typography as Typogr
 import { capitalize } from "@elementor/utils";
 import { __ as __8, sprintf as sprintf2 } from "@wordpress/i18n";
 
-// src/sync/license-info.ts
-function getLicenseInfo() {
-  return {
-    hasPro: !!window.elementorPro
-  };
-}
-
 // src/hooks/use-quota-permissions.ts
 var useQuotaPermissions = (variableType) => {
-  const quotaConfig = window.ElementorVariablesQuotaConfig || {};
+  const quotaConfig = {
+    ...window.ElementorVariablesQuotaConfig || {},
+    ...window.ElementorVariablesQuotaConfigExtended || {}
+  };
+  const hasLegacySupport = quotaConfig[variableType] === void 0 && window.elementorPro;
   const limit = quotaConfig[variableType] || 0;
-  const hasQuota = limit > 0;
+  const hasPermission = hasLegacySupport || limit > 0;
   return {
-    canAdd: () => hasQuota || getLicenseInfo().hasPro,
-    canEdit: () => hasQuota || getLicenseInfo().hasPro
+    canAdd: () => hasPermission,
+    canEdit: () => hasPermission
   };
 };
 
@@ -2632,10 +2629,15 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-import * as React20 from "react";
 import { useState as useState12 } from "react";
-import { SectionPopoverBody as SectionPopoverBody3 } from "@elementor/editor-ui";
-import { PopoverHeader as PopoverHeader3, PopoverMenuList, SearchField as SearchField2 } from "@elementor/editor-ui";
+import * as React20 from "react";
+import {
+  PopoverHeader as PopoverHeader3,
+  PopoverMenuList,
+  SearchField as SearchField2,
+  SectionPopoverBody as SectionPopoverBody3
+} from "@elementor/editor-ui";
+import { PromotionAlert } from "@elementor/editor-ui";
 import { ColorFilterIcon as ColorFilterIcon2, PlusIcon as PlusIcon2, SettingsIcon } from "@elementor/icons";
 import { Divider as Divider4, IconButton as IconButton7, Tooltip as Tooltip3 } from "@elementor/ui";
 import { __ as __15, sprintf as sprintf3 } from "@wordpress/i18n";
@@ -2648,9 +2650,9 @@ import { Box as Box2, IconButton as IconButton6, ListItemIcon, Tooltip as Toolti
 import { __ as __14 } from "@wordpress/i18n";
 var SIZE4 = "tiny";
 var EDIT_LABEL = __14("Edit variable", "elementor");
-var MenuItemContent = ({ item }) => {
+var MenuItemContent = ({ item, disabled = false }) => {
   const onEdit = item.onEdit;
-  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(ListItemIcon, null, item.icon), /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(ListItemIcon, { sx: { color: disabled ? "text.disabled" : "inherit" } }, item.icon), /* @__PURE__ */ React19.createElement(
     Box2,
     {
       sx: {
@@ -2667,7 +2669,7 @@ var MenuItemContent = ({ item }) => {
         title: item.label || item.value,
         as: Typography10,
         variant: "caption",
-        color: "text.primary",
+        color: disabled ? "text.disabled" : "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
@@ -2678,12 +2680,12 @@ var MenuItemContent = ({ item }) => {
         title: item.secondaryText,
         as: Typography10,
         variant: "caption",
-        color: "text.tertiary",
+        color: disabled ? "text.disabled" : "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React19.createElement(Tooltip2, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React19.createElement(
+  ), !!onEdit && !disabled && /* @__PURE__ */ React19.createElement(Tooltip2, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React19.createElement(
     IconButton6,
     {
       sx: { mx: 1, opacity: "0" },
@@ -2699,7 +2701,7 @@ var MenuItemContent = ({ item }) => {
 
 // src/components/ui/styled-menu-list.tsx
 import { MenuList, styled as styled2 } from "@elementor/ui";
-var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
+var VariablesStyledMenuList = styled2(MenuList)(({ theme, disabled }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -2710,13 +2712,15 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
     ...theme.typography.caption,
     lineHeight: "inherit",
     padding: theme.spacing(0.5, 1, 0.5, 2),
-    "&:hover, &:focus": {
-      backgroundColor: theme.palette.action.hover
+    ...!disabled && {
+      "&:hover, &:focus": {
+        backgroundColor: theme.palette.action.hover
+      },
+      cursor: "pointer"
     },
     '&[aria-selected="true"]': {
       backgroundColor: theme.palette.action.selected
     },
-    cursor: "pointer",
     textOverflow: "ellipsis",
     position: "absolute",
     top: 0,
@@ -2733,6 +2737,7 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
 var SIZE5 = "tiny";
 var CREATE_LABEL = __15("Create variable", "elementor");
 var MANAGER_LABEL = __15("Variables Manager", "elementor");
+var getProUpgradeUrl = (variableType) => `https://go.elementor.com/go-pro-panel-${variableType}-variable/`;
 var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled = false }) => {
   const { icon: VariableIcon, startIcon, variableType, propTypeUtil, emptyState } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
@@ -2828,26 +2833,37 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
       onSearch: handleSearch,
       placeholder: __15("Search", "elementor")
     }
-  ), /* @__PURE__ */ React20.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React20.createElement(
+  ), /* @__PURE__ */ React20.createElement(Divider4, null), hasVariables && hasSearchResults && /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     PopoverMenuList,
     {
       items,
-      onSelect: handleSetVariable,
+      onSelect: disabled ? () => {
+      } : handleSetVariable,
       onClose: () => {
       },
       selectedValue: variable,
       "data-testid": `${variableType}-variables-list`,
-      menuListTemplate: VariablesStyledMenuList,
-      menuItemContentTemplate: (item) => /* @__PURE__ */ React20.createElement(MenuItemContent, { item })
+      menuListTemplate: (props) => /* @__PURE__ */ React20.createElement(VariablesStyledMenuList, { ...props, disabled }),
+      menuItemContentTemplate: (item) => /* @__PURE__ */ React20.createElement(MenuItemContent, { item, disabled })
     }
-  ), !hasSearchResults && hasVariables && /* @__PURE__ */ React20.createElement(
+  ), disabled && /* @__PURE__ */ React20.createElement(
+    PromotionAlert,
+    {
+      message: sprintf3(
+        /* translators: %s: Variable Type. */
+        __15("Upgrade to continue creating and editing %s variables.", "elementor"),
+        variableType
+      ),
+      upgradeUrl: getProUpgradeUrl(variableType)
+    }
+  )), !hasSearchResults && hasVariables && /* @__PURE__ */ React20.createElement(
     NoSearchResults,
     {
       searchValue,
       onClear: handleClearSearch,
       icon: /* @__PURE__ */ React20.createElement(VariableIcon, { fontSize: "large" })
     }
-  ), disabled && /* @__PURE__ */ React20.createElement(
+  ), disabled && !hasVariables && /* @__PURE__ */ React20.createElement(
     EmptyState,
     {
       title: sprintf3(