@elementor/editor-ui 3.35.3 → 3.35.5

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import * as React$1 from 'react';
-import { ReactNode, PropsWithChildren, ReactElement } from 'react';
+import { ReactNode, PropsWithChildren, ReactElement, MouseEvent as MouseEvent$1 } from 'react';
 import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
@@ -114,7 +114,7 @@ type PromotionPopoverCardProps = {
     content: string;
     ctaUrl: string;
     ctaText?: string;
-    onClose: () => void;
+    onClose: (e: MouseEvent$1) => void;
 };
 type PromotionPopoverProps = React$1.PropsWithChildren<PromotionPopoverCardProps & {
     open: boolean;
@@ -125,6 +125,12 @@ declare const PromotionPopover: ({ children, open, placement, slotProps, ...card
 
 declare const PromotionChip: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
 
+type PromotionAlertProps = {
+    message: string;
+    upgradeUrl: string;
+};
+declare const PromotionAlert: ({ message, upgradeUrl }: PromotionAlertProps) => React$1.JSX.Element;
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -235,4 +241,6 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+declare const useCanvasClickHandler: (isActive: boolean, onClickAway: (e: MouseEvent) => void) => void;
+
+export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useCanvasClickHandler, useDialog, useEditable };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import * as React$1 from 'react';
-import { ReactNode, PropsWithChildren, ReactElement } from 'react';
+import { ReactNode, PropsWithChildren, ReactElement, MouseEvent as MouseEvent$1 } from 'react';
 import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
@@ -114,7 +114,7 @@ type PromotionPopoverCardProps = {
     content: string;
     ctaUrl: string;
     ctaText?: string;
-    onClose: () => void;
+    onClose: (e: MouseEvent$1) => void;
 };
 type PromotionPopoverProps = React$1.PropsWithChildren<PromotionPopoverCardProps & {
     open: boolean;
@@ -125,6 +125,12 @@ declare const PromotionPopover: ({ children, open, placement, slotProps, ...card
 
 declare const PromotionChip: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
 
+type PromotionAlertProps = {
+    message: string;
+    upgradeUrl: string;
+};
+declare const PromotionAlert: ({ message, upgradeUrl }: PromotionAlertProps) => React$1.JSX.Element;
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -235,4 +241,6 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+declare const useCanvasClickHandler: (isActive: boolean, onClickAway: (e: MouseEvent) => void) => void;
+
+export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useCanvasClickHandler, useDialog, useEditable };

package/dist/index.js

@@ -46,6 +46,7 @@ __export(index_exports, {
   PopoverBody: () => PopoverBody,
   PopoverHeader: () => PopoverHeader,
   PopoverMenuList: () => PopoverMenuList,
+  PromotionAlert: () => PromotionAlert,
   PromotionChip: () => PromotionChip,
   PromotionInfotip: () => PromotionInfotip,
   PromotionPopover: () => PromotionPopover,
@@ -56,6 +57,7 @@ __export(index_exports, {
   WarningInfotip: () => WarningInfotip,
   closeDialog: () => closeDialog,
   openDialog: () => openDialog,
+  useCanvasClickHandler: () => useCanvasClickHandler,
   useDialog: () => useDialog,
   useEditable: () => useEditable
 });
@@ -446,20 +448,63 @@ var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__
   children ?? (0, import_i18n3.__)("Upgrade Now", "elementor")
 );
 
-// src/components/promotion-infotip.tsx
+// src/components/promotions/promotion-infotip.tsx
 var React13 = __toESM(require("react"));
-var import_react10 = require("react");
-var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_ui13 = require("@elementor/ui");
-var PromotionInfotip = ({ children, open, onClose, ...cardProps }) => {
+
+// src/hooks/use-scroll-to-selected.ts
+var import_react10 = require("react");
+var useScrollToSelected = ({
+  selectedValue,
+  items,
+  virtualizer
+}) => {
   (0, import_react10.useEffect)(() => {
-    const canvasDocument = open ? (0, import_editor_v1_adapters2.getCanvasIframeDocument)() : null;
+    if (!selectedValue || items.length === 0) {
+      return;
+    }
+    const selectedIndex = items.findIndex((item) => item.value === selectedValue);
+    if (selectedIndex !== -1) {
+      virtualizer.scrollToIndex(selectedIndex, { align: "center" });
+    }
+  }, [selectedValue, items, virtualizer]);
+};
+
+// src/hooks/use-scroll-top.ts
+var import_react11 = require("react");
+var useScrollTop = ({ containerRef }) => {
+  const [scrollTop, setScrollTop] = (0, import_react11.useState)(0);
+  (0, import_react11.useEffect)(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const handleScroll = () => {
+      setScrollTop(container.scrollTop);
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [containerRef]);
+  return scrollTop;
+};
+
+// src/hooks/use-canvas-click-handler.tsx
+var import_react12 = require("react");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var useCanvasClickHandler = (isActive, onClickAway) => {
+  (0, import_react12.useEffect)(() => {
+    const canvasDocument = isActive ? (0, import_editor_v1_adapters2.getCanvasIframeDocument)() : null;
     if (!canvasDocument) {
       return;
     }
-    canvasDocument.addEventListener("mousedown", onClose);
-    return () => canvasDocument.removeEventListener("mousedown", onClose);
-  }, [open, onClose]);
+    canvasDocument.addEventListener("mousedown", onClickAway);
+    return () => canvasDocument.removeEventListener("mousedown", onClickAway);
+  }, [isActive, onClickAway]);
+};
+
+// src/components/promotions/promotion-infotip.tsx
+var PromotionInfotip = ({ children, open, onClose, ...cardProps }) => {
+  useCanvasClickHandler(!!open, onClose);
   return /* @__PURE__ */ React13.createElement(import_ui13.Infotip, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { onClose, ...cardProps }), open }, children);
 };
 function InfotipCard({ title, content, assetUrl, ctaUrl, onClose }) {
@@ -481,7 +526,7 @@ function InfotipCard({ title, content, assetUrl, ctaUrl, onClose }) {
   );
 }
 
-// src/components/promotion-popover.tsx
+// src/components/promotions/promotion-popover.tsx
 var React14 = __toESM(require("react"));
 var import_icons5 = require("@elementor/icons");
 var import_ui14 = require("@elementor/ui");
@@ -552,7 +597,7 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
   );
 }
 
-// src/components/promotion-chip.tsx
+// src/components/promotions/promotion-chip.tsx
 var React15 = __toESM(require("react"));
 var import_icons6 = require("@elementor/icons");
 var import_ui15 = require("@elementor/ui");
@@ -578,15 +623,47 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
   );
 });
 
-// src/components/popover/body.tsx
+// src/components/promotions/promotion-alert.tsx
 var React16 = __toESM(require("react"));
+var import_icons7 = require("@elementor/icons");
 var import_ui16 = require("@elementor/ui");
+var import_i18n4 = require("@wordpress/i18n");
+var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.createElement(
+  import_ui16.Alert,
+  {
+    variant: "standard",
+    color: "promotion",
+    icon: false,
+    role: "dialog",
+    "aria-label": "promotion-alert",
+    size: "small",
+    sx: { m: 2, mt: 1, pt: 0.5, pb: 0.5 }
+  },
+  message,
+  /* @__PURE__ */ React16.createElement(
+    import_ui16.Button,
+    {
+      size: "tiny",
+      variant: "text",
+      color: "promotion",
+      target: "_blank",
+      href: upgradeUrl,
+      rel: "noopener noreferrer",
+      startIcon: /* @__PURE__ */ React16.createElement(import_icons7.CrownFilledIcon, { fontSize: "tiny" })
+    },
+    (0, import_i18n4.__)("Upgrade now", "elementor")
+  )
+);
+
+// src/components/popover/body.tsx
+var React17 = __toESM(require("react"));
+var import_ui17 = require("@elementor/ui");
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
-  return /* @__PURE__ */ React16.createElement(
-    import_ui16.Box,
+  return /* @__PURE__ */ React17.createElement(
+    import_ui17.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -603,8 +680,8 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/header.tsx
-var React17 = __toESM(require("react"));
-var import_ui17 = require("@elementor/ui");
+var React18 = __toESM(require("react"));
+var import_ui18 = require("@elementor/ui");
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -613,52 +690,14 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React17.createElement(import_ui17.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React17.createElement(import_ui17.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React17.createElement(import_ui17.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React17.createElement(import_ui17.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React18.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React18.createElement(import_ui18.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React18.createElement(import_ui18.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React18.createElement(import_ui18.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_react13 = require("react");
-var import_ui18 = require("@elementor/ui");
+var import_ui19 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
-
-// src/hooks/use-scroll-to-selected.ts
-var import_react11 = require("react");
-var useScrollToSelected = ({
-  selectedValue,
-  items,
-  virtualizer
-}) => {
-  (0, import_react11.useEffect)(() => {
-    if (!selectedValue || items.length === 0) {
-      return;
-    }
-    const selectedIndex = items.findIndex((item) => item.value === selectedValue);
-    if (selectedIndex !== -1) {
-      virtualizer.scrollToIndex(selectedIndex, { align: "center" });
-    }
-  }, [selectedValue, items, virtualizer]);
-};
-
-// src/hooks/use-scroll-top.ts
-var import_react12 = require("react");
-var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = (0, import_react12.useState)(0);
-  (0, import_react12.useEffect)(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-    const handleScroll = () => {
-      setScrollTop(container.scrollTop);
-    };
-    container.addEventListener("scroll", handleScroll);
-    return () => container.removeEventListener("scroll", handleScroll);
-  }, [containerRef]);
-  return scrollTop;
-};
-
-// src/components/popover/menu-list.tsx
 var ITEM_HEIGHT = 32;
 var LIST_ITEMS_BUFFER = 6;
 var MENU_LIST_PADDING_TOP = 8;
@@ -686,7 +725,7 @@ var PopoverMenuList = ({
 }) => {
   const containerRef = (0, import_react13.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
-  const theme = (0, import_ui18.useTheme)();
+  const theme = (0, import_ui19.useTheme)();
   const MenuListComponent = CustomMenuList || StyledMenuList;
   const stickyIndices = (0, import_react13.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
@@ -727,7 +766,7 @@ var PopoverMenuList = ({
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React18.createElement(import_ui18.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(import_ui19.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React19.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -745,8 +784,8 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React18.createElement(
-          import_ui18.MenuSubheader,
+        return /* @__PURE__ */ React19.createElement(
+          import_ui19.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -756,8 +795,8 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React18.createElement(
-        import_ui18.ListItem,
+      return /* @__PURE__ */ React19.createElement(
+        import_ui19.ListItem,
         {
           key: virtualRow.key,
           role: "option",
@@ -796,7 +835,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui19.styled)(import_ui19.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -826,14 +865,14 @@ var StyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) =
 }));
 
 // src/components/save-changes-dialog.tsx
-var React19 = __toESM(require("react"));
+var React20 = __toESM(require("react"));
 var import_react14 = require("react");
-var import_icons7 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
+var import_icons8 = require("@elementor/icons");
+var import_ui20 = require("@elementor/ui");
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React19.createElement(import_ui19.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React19.createElement(
-  import_ui19.DialogTitle,
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(import_ui20.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(
+  import_ui20.DialogTitle,
   {
     id: TITLE_ID,
     display: "flex",
@@ -841,11 +880,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React19.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React19.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React19.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React19.createElement(import_ui19.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React19.createElement(import_icons7.XIcon, null))
+  /* @__PURE__ */ React20.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(import_icons8.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React20.createElement(import_ui20.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React20.createElement(import_icons8.XIcon, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React19.createElement(import_ui19.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React19.createElement(import_ui19.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React20.createElement(import_ui20.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React20.createElement(import_ui20.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = (0, import_react14.useState)(false);
   const { cancel, confirm, discard } = actions;
@@ -854,7 +893,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React19.createElement(import_ui19.DialogActions, null, cancel && /* @__PURE__ */ React19.createElement(import_ui19.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React19.createElement(import_ui19.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React19.createElement(import_ui19.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React20.createElement(import_ui20.DialogActions, null, cancel && /* @__PURE__ */ React20.createElement(import_ui20.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React20.createElement(import_ui20.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React20.createElement(import_ui20.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -868,21 +907,21 @@ var useDialog = () => {
 };
 
 // src/components/confirmation-dialog.tsx
-var React20 = __toESM(require("react"));
-var import_icons8 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
-var import_i18n4 = require("@wordpress/i18n");
+var React21 = __toESM(require("react"));
+var import_icons9 = require("@elementor/icons");
+var import_ui21 = require("@elementor/ui");
+var import_i18n5 = require("@wordpress/i18n");
 var TITLE_ID2 = "confirmation-dialog";
-var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React20.createElement(import_ui20.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React20.createElement(import_ui20.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React20.createElement(import_icons8.AlertOctagonFilledIcon, { color: "error" }), children);
-var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React20.createElement(import_ui20.DialogContent, null, children);
-var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React20.createElement(import_ui20.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React21.createElement(import_ui21.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React21.createElement(import_ui21.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React21.createElement(import_icons9.AlertOctagonFilledIcon, { color: "error" }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React21.createElement(import_ui21.DialogContent, null, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React21.createElement(import_ui21.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
 var ConfirmationDialogActions = ({
   onClose,
   onConfirm,
   cancelLabel,
   confirmLabel
-}) => /* @__PURE__ */ React20.createElement(import_ui20.DialogActions, null, /* @__PURE__ */ React20.createElement(import_ui20.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React20.createElement(import_ui20.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n4.__)("Delete", "elementor")));
+}) => /* @__PURE__ */ React21.createElement(import_ui21.DialogActions, null, /* @__PURE__ */ React21.createElement(import_ui21.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n5.__)("Not now", "elementor")), /* @__PURE__ */ React21.createElement(import_ui21.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n5.__)("Delete", "elementor")));
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
 ConfirmationDialog.ContentText = ConfirmationDialogContentText;
@@ -1010,6 +1049,7 @@ var selectAll = (el) => {
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
+  PromotionAlert,
   PromotionChip,
   PromotionInfotip,
   PromotionPopover,
@@ -1020,6 +1060,7 @@ var selectAll = (el) => {
   WarningInfotip,
   closeDialog,
   openDialog,
+  useCanvasClickHandler,
   useDialog,
   useEditable
 });

package/dist/index.mjs

@@ -401,10 +401,8 @@ var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__
   children ?? __3("Upgrade Now", "elementor")
 );
 
-// src/components/promotion-infotip.tsx
+// src/components/promotions/promotion-infotip.tsx
 import * as React13 from "react";
-import { useEffect as useEffect4 } from "react";
-import { getCanvasIframeDocument } from "@elementor/editor-v1-adapters";
 import {
   Card as Card2,
   CardActions as CardActions2,
@@ -416,15 +414,60 @@ import {
   Infotip as Infotip3,
   Typography as Typography3
 } from "@elementor/ui";
-var PromotionInfotip = ({ children, open, onClose, ...cardProps }) => {
+
+// src/hooks/use-scroll-to-selected.ts
+import { useEffect as useEffect4 } from "react";
+var useScrollToSelected = ({
+  selectedValue,
+  items,
+  virtualizer
+}) => {
   useEffect4(() => {
-    const canvasDocument = open ? getCanvasIframeDocument() : null;
+    if (!selectedValue || items.length === 0) {
+      return;
+    }
+    const selectedIndex = items.findIndex((item) => item.value === selectedValue);
+    if (selectedIndex !== -1) {
+      virtualizer.scrollToIndex(selectedIndex, { align: "center" });
+    }
+  }, [selectedValue, items, virtualizer]);
+};
+
+// src/hooks/use-scroll-top.ts
+import { useEffect as useEffect5, useState as useState5 } from "react";
+var useScrollTop = ({ containerRef }) => {
+  const [scrollTop, setScrollTop] = useState5(0);
+  useEffect5(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const handleScroll = () => {
+      setScrollTop(container.scrollTop);
+    };
+    container.addEventListener("scroll", handleScroll);
+    return () => container.removeEventListener("scroll", handleScroll);
+  }, [containerRef]);
+  return scrollTop;
+};
+
+// src/hooks/use-canvas-click-handler.tsx
+import { useEffect as useEffect6 } from "react";
+import { getCanvasIframeDocument } from "@elementor/editor-v1-adapters";
+var useCanvasClickHandler = (isActive, onClickAway) => {
+  useEffect6(() => {
+    const canvasDocument = isActive ? getCanvasIframeDocument() : null;
     if (!canvasDocument) {
       return;
     }
-    canvasDocument.addEventListener("mousedown", onClose);
-    return () => canvasDocument.removeEventListener("mousedown", onClose);
-  }, [open, onClose]);
+    canvasDocument.addEventListener("mousedown", onClickAway);
+    return () => canvasDocument.removeEventListener("mousedown", onClickAway);
+  }, [isActive, onClickAway]);
+};
+
+// src/components/promotions/promotion-infotip.tsx
+var PromotionInfotip = ({ children, open, onClose, ...cardProps }) => {
+  useCanvasClickHandler(!!open, onClose);
   return /* @__PURE__ */ React13.createElement(Infotip3, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { onClose, ...cardProps }), open }, children);
 };
 function InfotipCard({ title, content, assetUrl, ctaUrl, onClose }) {
@@ -446,7 +489,7 @@ function InfotipCard({ title, content, assetUrl, ctaUrl, onClose }) {
   );
 }
 
-// src/components/promotion-popover.tsx
+// src/components/promotions/promotion-popover.tsx
 import * as React14 from "react";
 import { CrownFilledIcon as CrownFilledIcon2 } from "@elementor/icons";
 import {
@@ -525,7 +568,7 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
   );
 }
 
-// src/components/promotion-chip.tsx
+// src/components/promotions/promotion-chip.tsx
 import * as React15 from "react";
 import { CrownFilledIcon as CrownFilledIcon3 } from "@elementor/icons";
 import { Chip } from "@elementor/ui";
@@ -551,14 +594,46 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
   );
 });
 
-// src/components/popover/body.tsx
+// src/components/promotions/promotion-alert.tsx
 import * as React16 from "react";
+import { CrownFilledIcon as CrownFilledIcon4 } from "@elementor/icons";
+import { Alert as Alert4, Button as Button4 } from "@elementor/ui";
+import { __ as __4 } from "@wordpress/i18n";
+var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.createElement(
+  Alert4,
+  {
+    variant: "standard",
+    color: "promotion",
+    icon: false,
+    role: "dialog",
+    "aria-label": "promotion-alert",
+    size: "small",
+    sx: { m: 2, mt: 1, pt: 0.5, pb: 0.5 }
+  },
+  message,
+  /* @__PURE__ */ React16.createElement(
+    Button4,
+    {
+      size: "tiny",
+      variant: "text",
+      color: "promotion",
+      target: "_blank",
+      href: upgradeUrl,
+      rel: "noopener noreferrer",
+      startIcon: /* @__PURE__ */ React16.createElement(CrownFilledIcon4, { fontSize: "tiny" })
+    },
+    __4("Upgrade now", "elementor")
+  )
+);
+
+// src/components/popover/body.tsx
+import * as React17 from "react";
 import { Box as Box6 } from "@elementor/ui";
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
-  return /* @__PURE__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     Box6,
     {
       display: "flex",
@@ -576,7 +651,7 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/header.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { CloseButton as CloseButton2, Stack, Typography as Typography5 } from "@elementor/ui";
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
@@ -586,52 +661,14 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React17.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React17.createElement(Typography5, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React17.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React17.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React18.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React18.createElement(Typography5, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React18.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React18.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { useEffect as useEffect7, useMemo, useRef as useRef3 } from "react";
 import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled3, useTheme } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
-
-// src/hooks/use-scroll-to-selected.ts
-import { useEffect as useEffect5 } from "react";
-var useScrollToSelected = ({
-  selectedValue,
-  items,
-  virtualizer
-}) => {
-  useEffect5(() => {
-    if (!selectedValue || items.length === 0) {
-      return;
-    }
-    const selectedIndex = items.findIndex((item) => item.value === selectedValue);
-    if (selectedIndex !== -1) {
-      virtualizer.scrollToIndex(selectedIndex, { align: "center" });
-    }
-  }, [selectedValue, items, virtualizer]);
-};
-
-// src/hooks/use-scroll-top.ts
-import { useEffect as useEffect6, useState as useState5 } from "react";
-var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = useState5(0);
-  useEffect6(() => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-    const handleScroll = () => {
-      setScrollTop(container.scrollTop);
-    };
-    container.addEventListener("scroll", handleScroll);
-    return () => container.removeEventListener("scroll", handleScroll);
-  }, [containerRef]);
-  return scrollTop;
-};
-
-// src/components/popover/menu-list.tsx
 var ITEM_HEIGHT = 32;
 var LIST_ITEMS_BUFFER = 6;
 var MENU_LIST_PADDING_TOP = 8;
@@ -700,7 +737,7 @@ var PopoverMenuList = ({
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React18.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React19.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -718,7 +755,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React18.createElement(
+        return /* @__PURE__ */ React19.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
@@ -729,7 +766,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(
         ListItem,
         {
           key: virtualRow.key,
@@ -799,11 +836,11 @@ var StyledMenuList = styled3(MenuList)(({ theme }) => ({
 }));
 
 // src/components/save-changes-dialog.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { useState as useState6 } from "react";
 import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
-  Button as Button4,
+  Button as Button5,
   Dialog as Dialog3,
   DialogActions as DialogActions2,
   DialogContent,
@@ -813,8 +850,8 @@ import {
   Stack as Stack2
 } from "@elementor/ui";
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React19.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React19.createElement(
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(
   DialogTitle2,
   {
     id: TITLE_ID,
@@ -823,11 +860,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React19.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React19.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React19.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React19.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React19.createElement(XIcon2, null))
+  /* @__PURE__ */ React20.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React20.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React20.createElement(XIcon2, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React19.createElement(DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React19.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React20.createElement(DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React20.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = useState6(false);
   const { cancel, confirm, discard } = actions;
@@ -836,7 +873,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React19.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React19.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React19.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React19.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React20.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React20.createElement(Button5, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React20.createElement(Button5, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React20.createElement(Button5, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -850,28 +887,28 @@ var useDialog = () => {
 };
 
 // src/components/confirmation-dialog.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
-  Button as Button5,
+  Button as Button6,
   Dialog as Dialog4,
   DialogActions as DialogActions3,
   DialogContent as DialogContent2,
   DialogContentText as DialogContentText2,
   DialogTitle as DialogTitle3
 } from "@elementor/ui";
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 var TITLE_ID2 = "confirmation-dialog";
-var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React20.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React20.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React20.createElement(AlertOctagonFilledIcon, { color: "error" }), children);
-var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React20.createElement(DialogContent2, null, children);
-var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React20.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", ...props });
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React21.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React21.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React21.createElement(AlertOctagonFilledIcon, { color: "error" }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React21.createElement(DialogContent2, null, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React21.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", ...props });
 var ConfirmationDialogActions = ({
   onClose,
   onConfirm,
   cancelLabel,
   confirmLabel
-}) => /* @__PURE__ */ React20.createElement(DialogActions3, null, /* @__PURE__ */ React20.createElement(Button5, { color: "secondary", onClick: onClose }, cancelLabel ?? __4("Not now", "elementor")), /* @__PURE__ */ React20.createElement(Button5, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __4("Delete", "elementor")));
+}) => /* @__PURE__ */ React21.createElement(DialogActions3, null, /* @__PURE__ */ React21.createElement(Button6, { color: "secondary", onClick: onClose }, cancelLabel ?? __5("Not now", "elementor")), /* @__PURE__ */ React21.createElement(Button6, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __5("Delete", "elementor")));
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
 ConfirmationDialog.ContentText = ConfirmationDialogContentText;
@@ -998,6 +1035,7 @@ export {
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
+  PromotionAlert,
   PromotionChip,
   PromotionInfotip,
   PromotionPopover,
@@ -1008,6 +1046,7 @@ export {
   WarningInfotip,
   closeDialog,
   openDialog,
+  useCanvasClickHandler,
   useDialog,
   useEditable
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "3.35.3",
+  "version": "3.35.5",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "3.35.3",
+    "@elementor/editor-v1-adapters": "3.35.5",
     "@elementor/icons": "^1.63.0",
     "@elementor/ui": "1.36.17",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/promotions/promotion-alert.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { CrownFilledIcon } from '@elementor/icons';
+import { Alert, Button } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+type PromotionAlertProps = {
+	message: string;
+	upgradeUrl: string;
+};
+
+export const PromotionAlert = ( { message, upgradeUrl }: PromotionAlertProps ) => (
+	<Alert
+		variant="standard"
+		color="promotion"
+		icon={ false }
+		role="dialog"
+		aria-label="promotion-alert"
+		size="small"
+		sx={ { m: 2, mt: 1, pt: 0.5, pb: 0.5 } }
+	>
+		{ message }
+		<Button
+			size={ 'tiny' }
+			variant={ 'text' }
+			color={ 'promotion' }
+			target="_blank"
+			href={ upgradeUrl }
+			rel="noopener noreferrer"
+			startIcon={ <CrownFilledIcon fontSize="tiny" /> }
+		>
+			{ __( 'Upgrade now', 'elementor' ) }
+		</Button>
+	</Alert>
+);

package/src/components/{promotion-infotip.tsx → promotions/promotion-infotip.tsx}

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { useEffect } from 'react';
-import { getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
 import {
 	Card,
 	CardActions,
@@ -13,7 +11,8 @@ import {
 	Typography,
 } from '@elementor/ui';
 
-import { CtaButton } from './cta-button';
+import { useCanvasClickHandler } from '../../hooks';
+import { CtaButton } from '../cta-button';
 
 type InfotipCardProps = {
 	title: string;
@@ -30,17 +29,7 @@ type PromotionInfotipProps = React.PropsWithChildren<
 >;
 
 export const PromotionInfotip = ( { children, open, onClose, ...cardProps }: PromotionInfotipProps ) => {
-	useEffect( () => {
-		const canvasDocument = open ? getCanvasIframeDocument() : null;
-
-		if ( ! canvasDocument ) {
-			return;
-		}
-
-		canvasDocument.addEventListener( 'mousedown', onClose );
-
-		return () => canvasDocument.removeEventListener( 'mousedown', onClose );
-	}, [ open, onClose ] );
+	useCanvasClickHandler( !! open, onClose );
 
 	return (
 		<Infotip placement="right" content={ <InfotipCard onClose={ onClose } { ...cardProps } /> } open={ open }>

package/src/components/{promotion-popover.tsx → promotions/promotion-popover.tsx}

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MouseEvent } from 'react';
 import { CrownFilledIcon } from '@elementor/icons';
 import {
 	Alert,
@@ -16,7 +17,7 @@ type PromotionPopoverCardProps = {
 	content: string;
 	ctaUrl: string;
 	ctaText?: string;
-	onClose: () => void;
+	onClose: ( e: MouseEvent ) => void;
 };
 
 type PromotionPopoverProps = React.PropsWithChildren<

package/src/hooks/index.ts

@@ -1,2 +1,3 @@
 export { useScrollToSelected } from './use-scroll-to-selected';
 export { useScrollTop } from './use-scroll-top';
+export { useCanvasClickHandler } from './use-canvas-click-handler';

package/src/hooks/use-canvas-click-handler.tsx

@@ -0,0 +1,16 @@
+import { useEffect } from 'react';
+import { getCanvasIframeDocument } from '@elementor/editor-v1-adapters';
+
+export const useCanvasClickHandler = ( isActive: boolean, onClickAway: ( e: MouseEvent ) => void ) => {
+	useEffect( () => {
+		const canvasDocument = isActive ? getCanvasIframeDocument() : null;
+
+		if ( ! canvasDocument ) {
+			return;
+		}
+
+		canvasDocument.addEventListener( 'mousedown', onClickAway );
+
+		return () => canvasDocument.removeEventListener( 'mousedown', onClickAway );
+	}, [ isActive, onClickAway ] );
+};

package/src/index.ts

@@ -12,9 +12,10 @@ export { GlobalDialog, openDialog, closeDialog } from './components/global-dialo
 export { SearchField } from './components/search-field';
 export { Form } from './components/form';
 export { CtaButton } from './components/cta-button';
-export { PromotionInfotip } from './components/promotion-infotip';
-export { PromotionPopover } from './components/promotion-popover';
-export { PromotionChip } from './components/promotion-chip';
+export { PromotionInfotip } from './components/promotions/promotion-infotip';
+export { PromotionPopover } from './components/promotions/promotion-popover';
+export { PromotionChip } from './components/promotions/promotion-chip';
+export { PromotionAlert } from './components/promotions/promotion-alert';
 
 export * from './components/popover';
 export * from './components/save-changes-dialog';
@@ -22,3 +23,4 @@ export { ConfirmationDialog } from './components/confirmation-dialog';
 
 // hooks
 export { useEditable } from './hooks/use-editable';
+export { useCanvasClickHandler } from './hooks/use-canvas-click-handler';