@elementor/editor-variables 3.35.0-440 → 3.35.0-442

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import { PropType } from '@elementor/editor-props';
 import { z } from '@elementor/schema';
 import * as _elementor_editor_canvas from '@elementor/editor-canvas';
 import * as react from 'react';
-import { RefObject } from 'react';
+import { RefObject, KeyboardEvent } from 'react';
 import * as _mui_material from '@mui/material';
 
 declare function init(): void;
@@ -105,6 +105,7 @@ type ValueFieldProps = {
         message: string;
     };
     ref?: RefObject<HTMLElement | null>;
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
 };
 
 declare const registerVariableType: ({ key, icon, startIcon, valueField, propTypeUtil, variableType, defaultValue, selectionFilter, valueTransformer, styleTransformer, fallbackPropTypeUtil, isCompatible, emptyState, }: {

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import { PropType } from '@elementor/editor-props';
 import { z } from '@elementor/schema';
 import * as _elementor_editor_canvas from '@elementor/editor-canvas';
 import * as react from 'react';
-import { RefObject } from 'react';
+import { RefObject, KeyboardEvent } from 'react';
 import * as _mui_material from '@mui/material';
 
 declare function init(): void;
@@ -105,6 +105,7 @@ type ValueFieldProps = {
         message: string;
     };
     ref?: RefObject<HTMLElement | null>;
+    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
 };
 
 declare const registerVariableType: ({ key, icon, startIcon, valueField, propTypeUtil, variableType, defaultValue, selectionFilter, valueTransformer, styleTransformer, fallbackPropTypeUtil, isCompatible, emptyState, }: {

package/dist/index.js

@@ -1151,6 +1151,9 @@ var MenuOption = ({
   const isDisabled = !userQuotaPermissions.canAdd();
   const handleClick = () => {
     if (isDisabled) {
+      if (!isPopoverOpen) {
+        setIsPopoverOpen(true);
+      }
       return;
     }
     const defaultName = getDefaultName(variables, config.key, config.variableType);
@@ -1168,34 +1171,19 @@ var MenuOption = ({
     (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,
+  return /* @__PURE__ */ React6.createElement(import_ui6.MenuItem, { onClick: handleClick, sx: { gap: 1.5, cursor: "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_editor_ui2.PromotionPopover,
     {
-      onClick: (event) => {
-        event.stopPropagation();
+      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_ui2.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_ui2.PromotionChip,
-        {
-          onClick: () => {
-            setIsPopoverOpen(true);
-          }
-        }
-      )
-    )
+    /* @__PURE__ */ React6.createElement(import_editor_ui2.PromotionChip, null)
   ));
 };
 var getDefaultName = (variables, type, baseName) => {
@@ -1242,7 +1230,8 @@ var LabelField = ({
   focusOnShow = false,
   selectOnShow = false,
   showWarningInfotip = false,
-  variables
+  variables,
+  onKeyDown
 }) => {
   const [label, setLabel] = (0, import_react7.useState)(value);
   const [errorMessage, setErrorMessage] = (0, import_react7.useState)("");
@@ -1272,7 +1261,8 @@ var LabelField = ({
       inputProps: {
         maxLength: VARIABLE_LABEL_MAX_LENGTH,
         ...selectOnShow && { onFocus: (e) => e.target.select() },
-        "aria-label": "Name"
+        "aria-label": "Name",
+        onKeyDown
       },
       autoFocus: focusOnShow
     }
@@ -2192,6 +2182,12 @@ var VariableCreation = ({ onGoBack, onClose }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = hasEmptyFields() || hasErrors();
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !isSubmitDisabled) {
+      event.preventDefault();
+      handleCreateAndTrack();
+    }
+  };
   return /* @__PURE__ */ React15.createElement(import_editor_editing_panel2.PopoverBody, { height: "auto" }, /* @__PURE__ */ React15.createElement(
     import_editor_ui6.PopoverHeader,
     {
@@ -2222,7 +2218,8 @@ var VariableCreation = ({ onGoBack, onClose }) => {
             value: label,
             message: errorMsg
           });
-        }
+        },
+        onKeyDown: handleKeyDown
       }
     )
   ), ValueField && /* @__PURE__ */ React15.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n10.__)("Value", "elementor") }, /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "h5", id: "variable-value-wrapper" }, /* @__PURE__ */ React15.createElement(
@@ -2236,7 +2233,8 @@ var VariableCreation = ({ onGoBack, onClose }) => {
         setValueFieldError("");
       },
       onValidationChange: setValueFieldError,
-      propType
+      propType,
+      onKeyDown: handleKeyDown
     }
   ))), errorMessage && /* @__PURE__ */ React15.createElement(import_ui15.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React15.createElement(import_ui15.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React15.createElement(
     import_ui15.Button,
@@ -2402,6 +2400,12 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !isSubmitDisabled) {
+      event.preventDefault();
+      handleUpdate();
+    }
+  };
   return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(import_editor_editing_panel3.PopoverBody, { height: "auto" }, /* @__PURE__ */ React17.createElement(
     import_editor_ui7.PopoverHeader,
     {
@@ -2441,7 +2445,8 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
             value: label,
             message: errorMsg
           });
-        }
+        },
+        onKeyDown: handleKeyDown
       }
     )
   ), ValueField && /* @__PURE__ */ React17.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n12.__)("Value", "elementor") }, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { variant: "h5" }, /* @__PURE__ */ React17.createElement(
@@ -2455,6 +2460,7 @@ var VariableEdit = ({ onClose, onGoBack, onSubmit, editId }) => {
         setErrorMessage("");
         setValueFieldError("");
       },
+      onKeyDown: handleKeyDown,
       onValidationChange: setValueFieldError,
       propType
     }
@@ -2961,6 +2967,12 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
     return !!errorMessage;
   };
   const isSubmitDisabled = noValueChanged() || hasEmptyFields() || hasErrors();
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter" && !isSubmitDisabled) {
+      event.preventDefault();
+      handleRestore();
+    }
+  };
   return /* @__PURE__ */ React23.createElement(PopoverContentRefContextProvider, null, /* @__PURE__ */ React23.createElement(import_editor_editing_panel5.PopoverBody, { height: "auto" }, /* @__PURE__ */ React23.createElement(
     import_editor_ui10.PopoverHeader,
     {
@@ -2991,7 +3003,8 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
             value: label,
             message: errorMsg
           });
-        }
+        },
+        onKeyDown: handleKeyDown
       }
     )
   ), ValueField && /* @__PURE__ */ React23.createElement(FormField, { errorMsg: valueFieldError, label: (0, import_i18n16.__)("Value", "elementor") }, /* @__PURE__ */ React23.createElement(import_ui23.Typography, { variant: "h5" }, /* @__PURE__ */ React23.createElement(
@@ -3006,7 +3019,8 @@ var VariableRestore = ({ variableId, onClose, onSubmit }) => {
         setValueFieldError("");
       },
       onValidationChange: setValueFieldError,
-      propType
+      propType,
+      onKeyDown: handleKeyDown
     }
   ))), errorMessage && /* @__PURE__ */ React23.createElement(import_ui23.FormHelperText, { error: true }, errorMessage)), /* @__PURE__ */ React23.createElement(import_ui23.CardActions, { sx: { pt: 0.5, pb: 1 } }, /* @__PURE__ */ React23.createElement(import_ui23.Button, { size: "small", variant: "contained", disabled: isSubmitDisabled, onClick: handleRestore }, (0, import_i18n16.__)("Restore", "elementor")))));
 };
@@ -3809,14 +3823,6 @@ var React36 = __toESM(require("react"));
 var import_react25 = require("react");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_ui33 = require("@elementor/ui");
-
-// src/sync/get-canvas-iframe-document.ts
-function getCanvasIframeDocument() {
-  const extendedWindow = window;
-  return extendedWindow.elementor?.$preview?.[0]?.contentDocument;
-}
-
-// src/renderers/style-variables-renderer.tsx
 var VARIABLES_WRAPPER = "body";
 function StyleVariablesRenderer() {
   const container = usePortalContainer();
@@ -3830,7 +3836,7 @@ function StyleVariablesRenderer() {
   return /* @__PURE__ */ React36.createElement(import_ui33.Portal, { container }, /* @__PURE__ */ React36.createElement("style", { "data-e-style-id": "e-variables", key: wrappedCss }, wrappedCss));
 }
 function usePortalContainer() {
-  return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => getCanvasIframeDocument()?.head);
+  return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.commandEndEvent)("editor/documents/attach-preview"), () => (0, import_editor_v1_adapters3.getCanvasIframeDocument)()?.head);
 }
 function useStyleVariables() {
   const [variables, setVariables] = (0, import_react25.useState)({});