@elementor/editor-ui 4.0.0-551 → 4.0.0-564

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, ComponentProps, ElementType, ComponentType, RefObject } from 'react';
+import { ReactNode, PropsWithChildren, ReactElement, MouseEvent as MouseEvent$1, ComponentProps, ElementType, ComponentType, RefObject } from 'react';
 import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
@@ -88,8 +88,9 @@ declare const SearchField: ({ value, onSearch, placeholder, id, sx }: Props$1) =
 
 type Props = PropsWithChildren<{
     onSubmit?: () => void;
+    'data-testid'?: string;
 }>;
-declare const Form: ({ children, onSubmit }: Props) => React$1.JSX.Element;
+declare const Form: ({ children, onSubmit, "data-testid": dataTestId }: Props) => React$1.JSX.Element;
 
 type CtaButtonProps = {
     href: string;
@@ -114,7 +115,7 @@ type PromotionPopoverCardProps = {
     content: string;
     ctaUrl: string;
     ctaText?: string;
-    onClose: () => void;
+    onClose: (e: MouseEvent$1) => void;
 };
 type PromotionPopoverProps = React$1.PropsWithChildren<PromotionPopoverCardProps & {
     open: boolean;
@@ -266,4 +267,6 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
 
 declare const useTextFieldAutoSelect: () => React$1.RefObject<HTMLInputElement>;
 
-export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useFloatingActionsBar, useSectionWidth, useTextFieldAutoSelect };
+declare const useCanvasClickHandler: (isActive: boolean, onClickAway: (e: MouseEvent) => void) => void;
+
+export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useCanvasClickHandler, useDialog, useEditable, useFloatingActionsBar, useSectionWidth, useTextFieldAutoSelect };

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, ComponentProps, ElementType, ComponentType, RefObject } from 'react';
+import { ReactNode, PropsWithChildren, ReactElement, MouseEvent as MouseEvent$1, ComponentProps, ElementType, ComponentType, RefObject } from 'react';
 import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
@@ -88,8 +88,9 @@ declare const SearchField: ({ value, onSearch, placeholder, id, sx }: Props$1) =
 
 type Props = PropsWithChildren<{
     onSubmit?: () => void;
+    'data-testid'?: string;
 }>;
-declare const Form: ({ children, onSubmit }: Props) => React$1.JSX.Element;
+declare const Form: ({ children, onSubmit, "data-testid": dataTestId }: Props) => React$1.JSX.Element;
 
 type CtaButtonProps = {
     href: string;
@@ -114,7 +115,7 @@ type PromotionPopoverCardProps = {
     content: string;
     ctaUrl: string;
     ctaText?: string;
-    onClose: () => void;
+    onClose: (e: MouseEvent$1) => void;
 };
 type PromotionPopoverProps = React$1.PropsWithChildren<PromotionPopoverCardProps & {
     open: boolean;
@@ -266,4 +267,6 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
 
 declare const useTextFieldAutoSelect: () => React$1.RefObject<HTMLInputElement>;
 
-export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useFloatingActionsBar, useSectionWidth, useTextFieldAutoSelect };
+declare const useCanvasClickHandler: (isActive: boolean, onClickAway: (e: MouseEvent) => void) => void;
+
+export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionAlert, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useCanvasClickHandler, useDialog, useEditable, useFloatingActionsBar, useSectionWidth, useTextFieldAutoSelect };

package/dist/index.js

@@ -61,6 +61,7 @@ __export(index_exports, {
   WarningInfotip: () => WarningInfotip,
   closeDialog: () => closeDialog,
   openDialog: () => openDialog,
+  useCanvasClickHandler: () => useCanvasClickHandler,
   useDialog: () => useDialog,
   useEditable: () => useEditable,
   useFloatingActionsBar: () => useFloatingActionsBar,
@@ -417,7 +418,7 @@ var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
 // src/components/form.tsx
 var React11 = __toESM(require("react"));
 var import_react9 = require("react");
-var Form = ({ children, onSubmit }) => {
+var Form = ({ children, onSubmit, "data-testid": dataTestId }) => {
   const formRef = (0, import_react9.useRef)(null);
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -432,7 +433,16 @@ var Form = ({ children, onSubmit }) => {
   };
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    /* @__PURE__ */ React11.createElement("form", { onSubmit: handleSubmit, ref: formRef, onKeyDown: handleKeyDown }, children)
+    /* @__PURE__ */ React11.createElement(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        ref: formRef,
+        onKeyDown: handleKeyDown,
+        ...dataTestId ? { "data-testid": dataTestId } : {}
+      },
+      children
+    )
   );
 };
 
@@ -454,20 +464,76 @@ 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-text-field-auto-select.ts
+var import_react12 = require("react");
+var useTextFieldAutoSelect = () => {
+  const inputRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, []);
+  return inputRef;
+};
+
+// src/hooks/use-canvas-click-handler.tsx
+var import_react13 = require("react");
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+var useCanvasClickHandler = (isActive, onClickAway) => {
+  (0, import_react13.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 }) {
@@ -489,7 +555,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");
@@ -560,7 +626,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");
@@ -586,7 +652,7 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
   );
 });
 
-// src/components/promotion-alert.tsx
+// src/components/promotions/promotion-alert.tsx
 var React16 = __toESM(require("react"));
 var import_icons7 = require("@elementor/icons");
 var import_ui16 = require("@elementor/ui");
@@ -620,7 +686,7 @@ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.create
 
 // src/components/floating-bar.tsx
 var React17 = __toESM(require("react"));
-var import_react11 = require("react");
+var import_react14 = require("react");
 var import_ui17 = require("@elementor/ui");
 var FloatingBarContainer = (0, import_ui17.styled)("span")`
 	display: contents;
@@ -633,13 +699,13 @@ var FloatingBarContainer = (0, import_ui17.styled)("span")`
 		z-index: 1000;
 	}
 `;
-var FloatingActionsContext = (0, import_react11.createContext)(null);
+var FloatingActionsContext = (0, import_react14.createContext)(null);
 function FloatingActionsBar({ actions, children }) {
-  const [open, setOpen] = (0, import_react11.useState)(false);
+  const [open, setOpen] = (0, import_react14.useState)(false);
   return /* @__PURE__ */ React17.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React17.createElement(FloatingBarContainer, null, /* @__PURE__ */ React17.createElement(import_ui17.UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
 }
 function useFloatingActionsBar() {
-  const context = (0, import_react11.useContext)(FloatingActionsContext);
+  const context = (0, import_react14.useContext)(FloatingActionsContext);
   if (!context) {
     throw new Error("useFloatingActions must be used within a FloatingActionsBar");
   }
@@ -674,10 +740,10 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 var React19 = __toESM(require("react"));
 
 // src/contexts/section-context.tsx
-var import_react12 = require("react");
+var import_react15 = require("react");
 var FALLBACK_SECTION_WIDTH = 320;
-var SectionRefContext = (0, import_react12.createContext)(null);
-var useSectionRef = () => (0, import_react12.useContext)(SectionRefContext);
+var SectionRefContext = (0, import_react15.createContext)(null);
+var useSectionRef = () => (0, import_react15.useContext)(SectionRefContext);
 var useSectionWidth = () => {
   const sectionRef = useSectionRef();
   return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
@@ -708,57 +774,6 @@ var React21 = __toESM(require("react"));
 var import_react16 = require("react");
 var import_ui20 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
-
-// src/hooks/use-scroll-to-selected.ts
-var import_react13 = require("react");
-var useScrollToSelected = ({
-  selectedValue,
-  items,
-  virtualizer
-}) => {
-  (0, import_react13.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_react14 = require("react");
-var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = (0, import_react14.useState)(0);
-  (0, import_react14.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-text-field-auto-select.ts
-var import_react15 = require("react");
-var useTextFieldAutoSelect = () => {
-  const inputRef = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, []);
-  return inputRef;
-};
-
-// src/components/popover/menu-list.tsx
 var ITEM_HEIGHT = 32;
 var LIST_ITEMS_BUFFER = 6;
 var MENU_LIST_PADDING_TOP = 8;
@@ -1178,6 +1193,7 @@ var selectAll = (el) => {
   WarningInfotip,
   closeDialog,
   openDialog,
+  useCanvasClickHandler,
   useDialog,
   useEditable,
   useFloatingActionsBar,

package/dist/index.mjs

@@ -364,7 +364,7 @@ var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
 // src/components/form.tsx
 import * as React11 from "react";
 import { useRef as useRef2 } from "react";
-var Form = ({ children, onSubmit }) => {
+var Form = ({ children, onSubmit, "data-testid": dataTestId }) => {
   const formRef = useRef2(null);
   const handleSubmit = (e) => {
     e.preventDefault();
@@ -379,7 +379,16 @@ var Form = ({ children, onSubmit }) => {
   };
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    /* @__PURE__ */ React11.createElement("form", { onSubmit: handleSubmit, ref: formRef, onKeyDown: handleKeyDown }, children)
+    /* @__PURE__ */ React11.createElement(
+      "form",
+      {
+        onSubmit: handleSubmit,
+        ref: formRef,
+        onKeyDown: handleKeyDown,
+        ...dataTestId ? { "data-testid": dataTestId } : {}
+      },
+      children
+    )
   );
 };
 
@@ -401,10 +410,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 +423,73 @@ 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-text-field-auto-select.ts
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
+var useTextFieldAutoSelect = () => {
+  const inputRef = useRef3(null);
+  useEffect6(() => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      inputRef.current.select();
+    }
+  }, []);
+  return inputRef;
+};
+
+// src/hooks/use-canvas-click-handler.tsx
+import { useEffect as useEffect7 } from "react";
+import { getCanvasIframeDocument } from "@elementor/editor-v1-adapters";
+var useCanvasClickHandler = (isActive, onClickAway) => {
+  useEffect7(() => {
+    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 +511,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 +590,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,7 +616,7 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
   );
 });
 
-// src/components/promotion-alert.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";
@@ -585,7 +650,7 @@ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.create
 
 // src/components/floating-bar.tsx
 import * as React17 from "react";
-import { createContext, useContext, useState as useState5 } from "react";
+import { createContext, useContext, useState as useState6 } from "react";
 import { styled as styled3, UnstableFloatingActionBar } from "@elementor/ui";
 var FloatingBarContainer = styled3("span")`
 	display: contents;
@@ -600,7 +665,7 @@ var FloatingBarContainer = styled3("span")`
 `;
 var FloatingActionsContext = createContext(null);
 function FloatingActionsBar({ actions, children }) {
-  const [open, setOpen] = useState5(false);
+  const [open, setOpen] = useState6(false);
   return /* @__PURE__ */ React17.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React17.createElement(FloatingBarContainer, null, /* @__PURE__ */ React17.createElement(UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
 }
 function useFloatingActionsBar() {
@@ -673,57 +738,6 @@ import * as React21 from "react";
 import { useEffect as useEffect8, useMemo, useRef as useRef4 } from "react";
 import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled4, 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 useState6 } from "react";
-var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = useState6(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/hooks/use-text-field-auto-select.ts
-import { useEffect as useEffect7, useRef as useRef3 } from "react";
-var useTextFieldAutoSelect = () => {
-  const inputRef = useRef3(null);
-  useEffect7(() => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, []);
-  return inputRef;
-};
-
-// src/components/popover/menu-list.tsx
 var ITEM_HEIGHT = 32;
 var LIST_ITEMS_BUFFER = 6;
 var MENU_LIST_PADDING_TOP = 8;
@@ -1158,6 +1172,7 @@ export {
   WarningInfotip,
   closeDialog,
   openDialog,
+  useCanvasClickHandler,
   useDialog,
   useEditable,
   useFloatingActionsBar,

package/package.json

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

package/src/components/form.tsx

@@ -3,8 +3,9 @@ import { type FormEvent as FormEvent, type KeyboardEvent, type PropsWithChildren
 
 type Props = PropsWithChildren< {
 	onSubmit?: () => void;
+	'data-testid'?: string;
 } >;
-export const Form = ( { children, onSubmit }: Props ) => {
+export const Form = ( { children, onSubmit, 'data-testid': dataTestId }: Props ) => {
 	const formRef = useRef< HTMLFormElement >( null );
 
 	const handleSubmit = ( e: FormEvent< HTMLFormElement > | SubmitEvent ) => {
@@ -23,7 +24,12 @@ export const Form = ( { children, onSubmit }: Props ) => {
 
 	return (
 		// eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-		<form onSubmit={ handleSubmit } ref={ formRef } onKeyDown={ handleKeyDown }>
+		<form
+			onSubmit={ handleSubmit }
+			ref={ formRef }
+			onKeyDown={ handleKeyDown }
+			{ ...( dataTestId ? { 'data-testid': dataTestId } : {} ) }
+		>
 			{ children }
 		</form>
 	);

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,3 +1,4 @@
 export { useScrollToSelected } from './use-scroll-to-selected';
 export { useScrollTop } from './use-scroll-top';
 export { useTextFieldAutoSelect } from './use-text-field-auto-select';
+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,10 +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 { PromotionAlert } from './components/promotion-alert';
+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 { FloatingActionsBar, useFloatingActionsBar } from './components/floating-bar';
 
 export * from './components/popover';
@@ -28,3 +28,4 @@ export { SectionRefContext, useSectionWidth } from './contexts/section-context';
 // hooks
 export { useEditable } from './hooks/use-editable';
 export { useTextFieldAutoSelect } from './hooks/use-text-field-auto-select';
+export { useCanvasClickHandler } from './hooks/use-canvas-click-handler';