@elementor/editor-variables 3.35.0-404 → 3.35.0-405

package/dist/index.js

@@ -1058,6 +1058,7 @@ 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_menus = require("@elementor/menus");
 var import_ui6 = require("@elementor/ui");
 var import_i18n7 = require("@wordpress/i18n");
 
@@ -1150,8 +1151,9 @@ var MenuOption = ({
   onCreate,
   onClose
 }) => {
-  const displayName = config.variableType.charAt(0).toUpperCase() + config.variableType.slice(1);
+  const [isPopoverOpen, setIsPopoverOpen] = (0, import_react6.useState)(false);
   const userQuotaPermissions = useQuotaPermissions(config.propTypeKey);
+  const displayName = (0, import_menus.capitalize)(config.variableType);
   const isDisabled = !userQuotaPermissions.canAdd();
   const handleClick = () => {
     if (isDisabled) {
@@ -1162,15 +1164,44 @@ var MenuOption = ({
     trackVariablesManagerEvent({ action: "add", varType: config.variableType });
     onClose();
   };
+  const title = (0, import_i18n7.sprintf)(
+    /* translators: %s: Variable Type. */
+    (0, import_i18n7.__)("%s variables", "elementor"),
+    (0, import_menus.capitalize)(config.variableType)
+  );
+  const content = (0, import_i18n7.sprintf)(
+    /* translators: %s: Variable Type. */
+    (0, import_i18n7.__)("Upgrade to continue creating and editing %s variables.", "elementor"),
+    config.variableType
+  );
   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();
+      onClick: (event) => {
+        event.stopPropagation();
       }
     },
-    /* @__PURE__ */ React6.createElement(import_editor_ui.PromotionChip, { onClick: () => {
-    } })
+    /* @__PURE__ */ React6.createElement(
+      import_editor_ui.PromotionPopover,
+      {
+        open: isPopoverOpen,
+        title,
+        content,
+        ctaText: (0, import_i18n7.__)("Upgrade now", "elementor"),
+        ctaUrl: `https://go.elementor.com/go-pro-manager-${config.variableType}-variable/`,
+        onClose: () => {
+          setIsPopoverOpen(false);
+        }
+      },
+      /* @__PURE__ */ React6.createElement(
+        import_editor_ui.PromotionChip,
+        {
+          onClick: () => {
+            setIsPopoverOpen(true);
+          }
+        }
+      )
+    )
   ));
 };
 var getDefaultName = (variables, type, baseName) => {
@@ -1389,14 +1420,14 @@ var VariableEditableCell = React10.memo(
     const handleDoubleClick = () => {
       setIsEditing(true);
     };
-    const handleKeyDown = (event2) => {
-      if (event2.key === "Enter") {
+    const handleKeyDown = (event) => {
+      if (event.key === "Enter") {
         handleSave();
-      } else if (event2.key === "Escape") {
+      } else if (event.key === "Escape") {
         setIsEditing(false);
       }
-      if (event2.key === " " && !isEditing) {
-        event2.preventDefault();
+      if (event.key === " " && !isEditing) {
+        event.preventDefault();
         setIsEditing(true);
       }
     };
@@ -1991,9 +2022,9 @@ function VariablesManagerPanel() {
 }
 var usePreventUnload = (isDirty) => {
   (0, import_react11.useEffect)(() => {
-    const handleBeforeUnload = (event2) => {
+    const handleBeforeUnload = (event) => {
       if (isDirty) {
-        event2.preventDefault();
+        event.preventDefault();
       }
     };
     window.addEventListener("beforeunload", handleBeforeUnload);
@@ -2266,7 +2297,7 @@ var EditConfirmationDialog = ({
         import_ui16.Checkbox,
         {
           checked: dontShowAgain,
-          onChange: (event2) => setDontShowAgain(event2.target.checked),
+          onChange: (event) => setDontShowAgain(event.target.checked),
           size: "small"
         }
       ),