@elementor/editor-variables 3.35.0-343 → 3.35.0-344

package/dist/index.mjs

@@ -657,7 +657,8 @@ function createVariableTypeRegistry() {
     selectionFilter,
     valueTransformer,
     fallbackPropTypeUtil,
-    isCompatible
+    isCompatible,
+    emptyState
   }) => {
     const variableTypeKey = key ?? propTypeUtil.key;
     if (!isCompatible) {
@@ -680,7 +681,8 @@ function createVariableTypeRegistry() {
       selectionFilter,
       valueTransformer,
       fallbackPropTypeUtil,
-      isCompatible
+      isCompatible,
+      emptyState
     };
     registerTransformer(propTypeUtil.key);
     registerInheritanceTransformer(propTypeUtil.key);
@@ -755,8 +757,13 @@ var usePermissions = () => {
 };
 
 // src/components/ui/empty-state.tsx
-var EmptyState = ({ icon, title, message, onAdd }) => {
+var EmptyState = ({ icon, title, message, onAdd, children }) => {
   const canAdd = usePermissions().canAdd();
+  const displayTitle = canAdd ? title : __5("There are no variables", "elementor");
+  const displayMessage = canAdd ? message : __5("With your current role, you can only connect and detach variables.", "elementor");
+  return /* @__PURE__ */ React3.createElement(Content, { title: displayTitle, message: displayMessage, icon }, children || onAdd && /* @__PURE__ */ React3.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __5("Create a variable", "elementor")));
+};
+function Content({ title, message, icon, children }) {
   return /* @__PURE__ */ React3.createElement(
     Stack2,
     {
@@ -768,17 +775,10 @@ var EmptyState = ({ icon, title, message, onAdd }) => {
       sx: { p: 2.5, pt: 8, pb: 5.5 }
     },
     icon,
-    canAdd ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Content, { title, message }), onAdd && /* @__PURE__ */ React3.createElement(Button2, { variant: "outlined", color: "secondary", size: "small", onClick: onAdd }, __5("Create a variable", "elementor"))) : /* @__PURE__ */ React3.createElement(
-      Content,
-      {
-        title: __5("There are no variables", "elementor"),
-        message: __5("With your current role, you can only connect and detach variables.", "elementor")
-      }
-    )
+    /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "subtitle2" }, title),
+    /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "caption", maxWidth: "180px" }, message),
+    children
   );
-};
-function Content({ title, message }) {
-  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "subtitle2" }, title), /* @__PURE__ */ React3.createElement(Typography3, { align: "center", variant: "caption", maxWidth: "180px" }, message));
 }
 
 // src/components/ui/no-search-results.tsx
@@ -1611,7 +1611,7 @@ var VariablesManagerTable = ({
                   onChange,
                   onValidationChange,
                   error
-                }) => row.valueField({
+                }) => row.valueField?.({
                   ref: {
                     current: variableRowRefs.current.get(
                       "table-ref-" + row.id
@@ -1631,7 +1631,7 @@ var VariablesManagerTable = ({
                     onFieldError?.(!!errorMsg);
                   },
                   error
-                }),
+                }) ?? /* @__PURE__ */ React11.createElement(React11.Fragment, null),
                 onRowRef: handleRowRef(row.id),
                 gap: 0.25,
                 fieldType: "value"
@@ -1996,6 +1996,25 @@ 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";
@@ -2148,7 +2167,7 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: __10("Value", "elementor") }, /* @__PURE__ */ React15.createElement(Typography6, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React15.createElement(
+  ), ValueField && /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: __10("Value", "elementor") }, /* @__PURE__ */ React15.createElement(Typography6, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React15.createElement(
     ValueField,
     {
       value,
@@ -2377,7 +2396,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: __12("Value", "elementor") }, /* @__PURE__ */ React17.createElement(Typography8, { variant: "h5" }, /* @__PURE__ */ React17.createElement(
+  ), ValueField && /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: __12("Value", "elementor") }, /* @__PURE__ */ React17.createElement(Typography8, { variant: "h5" }, /* @__PURE__ */ React17.createElement(
     ValueField,
     {
       propTypeKey: variable.type,
@@ -2510,8 +2529,8 @@ var VariablesStyledMenuList = styled2(MenuList)(({ theme }) => ({
 var SIZE5 = "tiny";
 var CREATE_LABEL = __14("Create variable", "elementor");
 var MANAGER_LABEL = __14("Variables Manager", "elementor");
-var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
-  const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
+var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings, disabled = false }) => {
+  const { icon: VariableIcon, startIcon, variableType, propTypeUtil, emptyState } = useVariableType();
   const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
   const [searchValue, setSearchValue] = useState10("");
   const {
@@ -2540,16 +2559,17 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const actions = [];
   if (onAdd) {
     actions.push(
-      /* @__PURE__ */ React19.createElement(Tooltip3, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React19.createElement(
+      /* @__PURE__ */ React19.createElement(Tooltip3, { key: "add", placement: "top", title: CREATE_LABEL }, /* @__PURE__ */ React19.createElement("span", null, /* @__PURE__ */ React19.createElement(
         IconButton7,
         {
           id: "add-variable-button",
           size: SIZE5,
           onClick: onAddAndTrack,
-          "aria-label": CREATE_LABEL
+          "aria-label": CREATE_LABEL,
+          disabled
         },
         /* @__PURE__ */ React19.createElement(PlusIcon2, { fontSize: SIZE5 })
-      ))
+      )))
     );
   }
   if (onSettings) {
@@ -2589,11 +2609,23 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
   const handleClearSearch = () => {
     setSearchValue("");
   };
-  const noVariableTitle = sprintf2(
+  const noVariableTitle = disabled ? sprintf2(
+    /* translators: %s: Variable Type. */
+    __14("No %s variables yet", "elementor"),
+    variableType
+  ) : sprintf2(
     /* translators: %s: Variable Type. */
     __14("Create your first %s variable", "elementor"),
     variableType
   );
+  const noVariableMessage = disabled ? sprintf2(
+    /* translators: %s: Variable Type. */
+    __14(
+      "Start by creating your first %s variable to apply consistent sizing across elements.",
+      "elementor"
+    ),
+    variableType
+  ) : __14("Variables are saved attributes that you can apply anywhere on your site.", "elementor");
   return /* @__PURE__ */ React19.createElement(PopoverBody3, null, /* @__PURE__ */ React19.createElement(
     PopoverHeader3,
     {
@@ -2632,13 +2664,11 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
     EmptyState,
     {
       title: noVariableTitle,
-      message: __14(
-        "Variables are saved attributes that you can apply anywhere on your site.",
-        "elementor"
-      ),
+      message: noVariableMessage,
       icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
-      onAdd
-    }
+      onAdd: disabled ? void 0 : onAdd
+    },
+    emptyState
   ), hasNoCompatibleVariables && /* @__PURE__ */ React19.createElement(
     EmptyState,
     {
@@ -2648,8 +2678,9 @@ var VariablesSelection = ({ closePopover, onAdd, onEdit, onSettings }) => {
         "elementor"
       ),
       icon: /* @__PURE__ */ React19.createElement(VariableIcon, { fontSize: "large" }),
-      onAdd
-    }
+      onAdd: disabled ? void 0 : onAdd
+    },
+    emptyState
   ));
 };
 
@@ -2677,6 +2708,7 @@ var VariableSelectionPopover = ({ closePopover, propTypeKey, selectedVariable })
 };
 function RenderView(props) {
   const userPermissions = usePermissions();
+  const userQuotaPremissions = useQuotaPermissions(props.propTypeKey);
   const handlers = {
     onClose: () => {
       props.closePopover();
@@ -2716,7 +2748,8 @@ function RenderView(props) {
         closePopover: handlers.onClose,
         onAdd: handlers.onAdd,
         onEdit: handlers.onEdit,
-        onSettings: handlers.onSettings
+        onSettings: handlers.onSettings,
+        disabled: !userQuotaPremissions.canAdd()
       }
     );
   }
@@ -2905,7 +2938,7 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         }
       }
     )
-  ), /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: __16("Value", "elementor") }, /* @__PURE__ */ React23.createElement(Typography11, { variant: "h5" }, /* @__PURE__ */ React23.createElement(
+  ), ValueField && /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: __16("Value", "elementor") }, /* @__PURE__ */ React23.createElement(Typography11, { variant: "h5" }, /* @__PURE__ */ React23.createElement(
     ValueField,
     {
       value,
@@ -3531,8 +3564,9 @@ function initMcp() {
 
 // src/register-variable-types.tsx
 import * as React35 from "react";
-import { colorPropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
-import { BrushIcon, TextIcon as TextIcon2 } from "@elementor/icons";
+import { colorPropTypeUtil, sizePropTypeUtil, stringPropTypeUtil } from "@elementor/editor-props";
+import { UpgradeButton } from "@elementor/editor-ui";
+import { BrushIcon, ExpandDiagonalIcon, TextIcon as TextIcon2 } from "@elementor/icons";
 
 // src/components/fields/color-field.tsx
 import * as React33 from "react";
@@ -3648,6 +3682,11 @@ var FontField = ({ value, onChange, onValidationChange }) => {
   ));
 };
 
+// src/prop-types/size-variable-prop-type.ts
+import { createPropUtils as createPropUtils3 } from "@elementor/editor-props";
+import { z as z6 } from "@elementor/schema";
+var sizeVariablePropTypeUtil = createPropUtils3("global-size-variable", z6.string());
+
 // src/register-variable-types.tsx
 function registerVariableTypes() {
   registerVariableType({
@@ -3669,6 +3708,15 @@ function registerVariableTypes() {
     variableType: "font",
     defaultValue: "Roboto"
   });
+  registerVariableType({
+    key: sizeVariablePropTypeUtil.key,
+    icon: ExpandDiagonalIcon,
+    propTypeUtil: sizeVariablePropTypeUtil,
+    fallbackPropTypeUtil: sizePropTypeUtil,
+    variableType: "size",
+    selectionFilter: () => [],
+    emptyState: /* @__PURE__ */ React35.createElement(UpgradeButton, { size: "small", href: "https://go.elementor.com/go-pro-panel-size-variable/" })
+  });
 }
 
 // src/renderers/style-variables-renderer.tsx
@@ -3834,6 +3882,7 @@ export {
   init,
   registerVariableType,
   registerVariableTypes,
-  service
+  service,
+  sizeVariablePropTypeUtil
 };
 //# sourceMappingURL=index.mjs.map