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

package/dist/index.js

@@ -1147,21 +1147,18 @@ var import_ui7 = require("@elementor/ui");
 var import_utils = require("@elementor/utils");
 var import_i18n8 = require("@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
   };
 };
 
@@ -2626,8 +2623,8 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
 };
 
 // src/components/variables-selection.tsx
-var React20 = __toESM(require("react"));
 var import_react18 = require("react");
+var React20 = __toESM(require("react"));
 var import_editor_ui9 = require("@elementor/editor-ui");
 var import_editor_ui10 = require("@elementor/editor-ui");
 var import_icons11 = require("@elementor/icons");
@@ -2642,9 +2639,9 @@ var import_ui19 = require("@elementor/ui");
 var import_i18n14 = require("@wordpress/i18n");
 var SIZE4 = "tiny";
 var EDIT_LABEL = (0, import_i18n14.__)("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(import_ui19.ListItemIcon, null, item.icon), /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(import_ui19.ListItemIcon, { sx: { color: disabled ? "text.disabled" : "inherit" } }, item.icon), /* @__PURE__ */ React19.createElement(
     import_ui19.Box,
     {
       sx: {
@@ -2661,7 +2658,7 @@ var MenuItemContent = ({ item }) => {
         title: item.label || item.value,
         as: import_ui19.Typography,
         variant: "caption",
-        color: "text.primary",
+        color: disabled ? "text.disabled" : "text.primary",
         sx: { marginTop: "1px", lineHeight: "2" },
         maxWidth: "50%"
       }
@@ -2672,12 +2669,12 @@ var MenuItemContent = ({ item }) => {
         title: item.secondaryText,
         as: import_ui19.Typography,
         variant: "caption",
-        color: "text.tertiary",
+        color: disabled ? "text.disabled" : "text.tertiary",
         sx: { marginTop: "1px", lineHeight: "1" },
         maxWidth: "50%"
       }
     )
-  ), !!onEdit && /* @__PURE__ */ React19.createElement(import_ui19.Tooltip, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React19.createElement(
+  ), !!onEdit && !disabled && /* @__PURE__ */ React19.createElement(import_ui19.Tooltip, { placement: "top", title: EDIT_LABEL }, /* @__PURE__ */ React19.createElement(
     import_ui19.IconButton,
     {
       sx: { mx: 1, opacity: "0" },
@@ -2693,7 +2690,7 @@ var MenuItemContent = ({ item }) => {
 
 // src/components/ui/styled-menu-list.tsx
 var import_ui20 = require("@elementor/ui");
-var VariablesStyledMenuList = (0, import_ui20.styled)(import_ui20.MenuList)(({ theme }) => ({
+var VariablesStyledMenuList = (0, import_ui20.styled)(import_ui20.MenuList)(({ theme, disabled }) => ({
   "& > li": {
     height: 32,
     width: "100%",
@@ -2704,13 +2701,15 @@ var VariablesStyledMenuList = (0, import_ui20.styled)(import_ui20.MenuList)(({ t
     ...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,
@@ -2727,6 +2726,7 @@ var VariablesStyledMenuList = (0, import_ui20.styled)(import_ui20.MenuList)(({ t
 var SIZE5 = "tiny";
 var CREATE_LABEL = (0, import_i18n15.__)("Create variable", "elementor");
 var MANAGER_LABEL = (0, import_i18n15.__)("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();
@@ -2808,7 +2808,7 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
     setSearchValue("");
   };
   return /* @__PURE__ */ React20.createElement(import_editor_ui9.SectionPopoverBody, null, /* @__PURE__ */ React20.createElement(
-    import_editor_ui10.PopoverHeader,
+    import_editor_ui9.PopoverHeader,
     {
       title: (0, import_i18n15.__)("Variables", "elementor"),
       icon: /* @__PURE__ */ React20.createElement(import_icons11.ColorFilterIcon, { fontSize: SIZE5 }),
@@ -2816,32 +2816,43 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled =
       actions
     }
   ), hasVariables && /* @__PURE__ */ React20.createElement(
-    import_editor_ui10.SearchField,
+    import_editor_ui9.SearchField,
     {
       value: searchValue,
       onSearch: handleSearch,
       placeholder: (0, import_i18n15.__)("Search", "elementor")
     }
-  ), /* @__PURE__ */ React20.createElement(import_ui21.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React20.createElement(
-    import_editor_ui10.PopoverMenuList,
+  ), /* @__PURE__ */ React20.createElement(import_ui21.Divider, null), hasVariables && hasSearchResults && /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
+    import_editor_ui9.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(
+    import_editor_ui10.PromotionAlert,
+    {
+      message: (0, import_i18n15.sprintf)(
+        /* translators: %s: Variable Type. */
+        (0, import_i18n15.__)("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: (0, import_i18n15.sprintf)(