@elementor/editor-ui 4.0.0-499 → 4.0.0-501

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, ComponentProps, RefObject } from 'react';
 import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
@@ -132,6 +132,8 @@ type PopoverBodyProps = PropsWithChildren<{
 }>;
 declare const PopoverBody: ({ children, height, width, id }: PopoverBodyProps) => React$1.JSX.Element;
 
+declare const SectionPopoverBody: (props: ComponentProps<typeof PopoverBody>) => React$1.JSX.Element;
+
 type PopoverHeaderProps = {
     title: React$1.ReactNode;
     onClose: () => void;
@@ -209,6 +211,9 @@ type ConfirmationDialogActionsProps = {
     confirmLabel?: string;
 };
 
+declare const SectionRefContext: React$1.Context<RefObject<HTMLElement> | null>;
+declare const useSectionWidth: () => number;
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -235,4 +240,4 @@ 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 };
+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, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useSectionWidth };

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, ComponentProps, RefObject } from 'react';
 import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
@@ -132,6 +132,8 @@ type PopoverBodyProps = PropsWithChildren<{
 }>;
 declare const PopoverBody: ({ children, height, width, id }: PopoverBodyProps) => React$1.JSX.Element;
 
+declare const SectionPopoverBody: (props: ComponentProps<typeof PopoverBody>) => React$1.JSX.Element;
+
 type PopoverHeaderProps = {
     title: React$1.ReactNode;
     onClose: () => void;
@@ -209,6 +211,9 @@ type ConfirmationDialogActionsProps = {
     confirmLabel?: string;
 };
 
+declare const SectionRefContext: React$1.Context<RefObject<HTMLElement> | null>;
+declare const useSectionWidth: () => number;
+
 type UseEditableParams = {
     value: string;
     onSubmit: (value: string) => unknown;
@@ -235,4 +240,4 @@ 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 };
+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, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useSectionWidth };

package/dist/index.js

@@ -51,13 +51,16 @@ __export(index_exports, {
   PromotionPopover: () => PromotionPopover,
   SaveChangesDialog: () => SaveChangesDialog,
   SearchField: () => SearchField,
+  SectionPopoverBody: () => SectionPopoverBody,
+  SectionRefContext: () => SectionRefContext,
   StyledMenuList: () => StyledMenuList,
   ThemeProvider: () => ThemeProvider,
   WarningInfotip: () => WarningInfotip,
   closeDialog: () => closeDialog,
   openDialog: () => openDialog,
   useDialog: () => useDialog,
-  useEditable: () => useEditable
+  useEditable: () => useEditable,
+  useSectionWidth: () => useSectionWidth
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -601,8 +604,27 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
   );
 };
 
-// src/components/popover/header.tsx
+// src/components/popover/section-popover-body.tsx
 var React17 = __toESM(require("react"));
+
+// src/contexts/section-context.tsx
+var import_react11 = require("react");
+var FALLBACK_SECTION_WIDTH = 320;
+var SectionRefContext = (0, import_react11.createContext)(null);
+var useSectionRef = () => (0, import_react11.useContext)(SectionRefContext);
+var useSectionWidth = () => {
+  const sectionRef = useSectionRef();
+  return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
+};
+
+// src/components/popover/section-popover-body.tsx
+var SectionPopoverBody = (props) => {
+  const sectionWidth = useSectionWidth();
+  return /* @__PURE__ */ React17.createElement(PopoverBody, { ...props, width: sectionWidth });
+};
+
+// src/components/popover/header.tsx
+var React18 = __toESM(require("react"));
 var import_ui17 = require("@elementor/ui");
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
@@ -612,23 +634,23 @@ 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_ui17.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React18.createElement(import_ui17.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React18.createElement(import_ui17.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React18.createElement(import_ui17.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React18 = __toESM(require("react"));
-var import_react13 = require("react");
+var React19 = __toESM(require("react"));
+var import_react14 = require("react");
 var import_ui18 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/hooks/use-scroll-to-selected.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -640,10 +662,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = (0, import_react12.useState)(0);
-  (0, import_react12.useEffect)(() => {
+  const [scrollTop, setScrollTop] = (0, import_react13.useState)(0);
+  (0, import_react13.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -683,11 +705,11 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = (0, import_react13.useRef)(null);
+  const containerRef = (0, import_react14.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
   const theme = (0, import_ui18.useTheme)();
   const MenuListComponent = CustomMenuList || StyledMenuList;
-  const stickyIndices = (0, import_react13.useMemo)(
+  const stickyIndices = (0, import_react14.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
       if (item.type === "category") {
         categoryIndices.push(index);
@@ -721,12 +743,12 @@ var PopoverMenuList = ({
     rangeExtractor: getActiveItemIndices,
     onChange: onChangeCallback
   });
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     onChangeCallback(virtualizer);
   }, [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_ui18.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React19.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -744,7 +766,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React18.createElement(
+        return /* @__PURE__ */ React19.createElement(
           import_ui18.MenuSubheader,
           {
             key: virtualRow.key,
@@ -755,7 +777,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(
         import_ui18.ListItem,
         {
           key: virtualRow.key,
@@ -825,13 +847,13 @@ var StyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) =
 }));
 
 // src/components/save-changes-dialog.tsx
-var React19 = __toESM(require("react"));
-var import_react14 = require("react");
+var React20 = __toESM(require("react"));
+var import_react15 = require("react");
 var import_icons7 = require("@elementor/icons");
 var import_ui19 = 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(
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(import_ui19.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(
   import_ui19.DialogTitle,
   {
     id: TITLE_ID,
@@ -840,58 +862,58 @@ 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_ui19.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React20.createElement(import_ui19.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React20.createElement(import_icons7.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_ui19.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React20.createElement(import_ui19.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
-  const [isConfirming, setIsConfirming] = (0, import_react14.useState)(false);
+  const [isConfirming, setIsConfirming] = (0, import_react15.useState)(false);
   const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
     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_ui19.DialogActions, null, cancel && /* @__PURE__ */ React20.createElement(import_ui19.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React20.createElement(import_ui19.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React20.createElement(import_ui19.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
 SaveChangesDialog.ContentText = SaveChangesDialogContentText;
 SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
   return { isOpen, open, close };
 };
 
 // src/components/confirmation-dialog.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
 var import_ui20 = require("@elementor/ui");
 var import_i18n4 = 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_ui20.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React21.createElement(import_ui20.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React21.createElement(import_icons8.AlertOctagonFilledIcon, { color: "error" }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React21.createElement(import_ui20.DialogContent, null, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React21.createElement(import_ui20.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_ui20.DialogActions, null, /* @__PURE__ */ React21.createElement(import_ui20.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React21.createElement(import_ui20.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n4.__)("Delete", "elementor")));
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
 ConfirmationDialog.ContentText = ConfirmationDialogContentText;
 ConfirmationDialog.Actions = ConfirmationDialogActions;
 
 // src/hooks/use-editable.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = (0, import_react15.useState)(false);
-  const [error, setError] = (0, import_react15.useState)(null);
+  const [isEditing, setIsEditing] = (0, import_react16.useState)(false);
+  const [error, setError] = (0, import_react16.useState)(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -973,8 +995,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react15.useRef)(null);
-  (0, import_react15.useEffect)(() => {
+  const ref = (0, import_react16.useRef)(null);
+  (0, import_react16.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -1014,12 +1036,15 @@ var selectAll = (el) => {
   PromotionPopover,
   SaveChangesDialog,
   SearchField,
+  SectionPopoverBody,
+  SectionRefContext,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,
   closeDialog,
   openDialog,
   useDialog,
-  useEditable
+  useEditable,
+  useSectionWidth
 });
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -574,8 +574,27 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
   );
 };
 
-// src/components/popover/header.tsx
+// src/components/popover/section-popover-body.tsx
 import * as React17 from "react";
+
+// src/contexts/section-context.tsx
+import { createContext, useContext } from "react";
+var FALLBACK_SECTION_WIDTH = 320;
+var SectionRefContext = createContext(null);
+var useSectionRef = () => useContext(SectionRefContext);
+var useSectionWidth = () => {
+  const sectionRef = useSectionRef();
+  return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
+};
+
+// src/components/popover/section-popover-body.tsx
+var SectionPopoverBody = (props) => {
+  const sectionWidth = useSectionWidth();
+  return /* @__PURE__ */ React17.createElement(PopoverBody, { ...props, width: sectionWidth });
+};
+
+// src/components/popover/header.tsx
+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 }) => {
@@ -585,11 +604,11 @@ 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";
@@ -699,7 +718,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",
@@ -717,7 +736,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,
@@ -728,7 +747,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React18.createElement(
+      return /* @__PURE__ */ React19.createElement(
         ListItem,
         {
           key: virtualRow.key,
@@ -798,7 +817,7 @@ 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 {
@@ -812,8 +831,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,
@@ -822,11 +841,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;
@@ -835,7 +854,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(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React20.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React20.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -849,7 +868,7 @@ 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,
@@ -861,16 +880,16 @@ import {
 } from "@elementor/ui";
 import { __ as __4 } 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(Button5, { color: "secondary", onClick: onClose }, cancelLabel ?? __4("Not now", "elementor")), /* @__PURE__ */ React21.createElement(Button5, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __4("Delete", "elementor")));
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
 ConfirmationDialog.ContentText = ConfirmationDialogContentText;
@@ -1002,12 +1021,15 @@ export {
   PromotionPopover,
   SaveChangesDialog,
   SearchField,
+  SectionPopoverBody,
+  SectionRefContext,
   StyledMenuList,
   ThemeProvider,
   WarningInfotip,
   closeDialog,
   openDialog,
   useDialog,
-  useEditable
+  useEditable,
+  useSectionWidth
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "4.0.0-499",
+  "version": "4.0.0-501",
   "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-499",
+    "@elementor/editor-v1-adapters": "4.0.0-501",
     "@elementor/icons": "^1.63.0",
     "@elementor/ui": "1.36.17",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/popover/index.ts

@@ -1,4 +1,5 @@
 export { PopoverBody } from './body';
+export { SectionPopoverBody } from './section-popover-body';
 export { PopoverHeader } from './header';
 export { ITEM_HEIGHT, PopoverMenuList, StyledMenuList } from './menu-list';
 export type { PopoverMenuListProps, VirtualizedItem } from './menu-list';

package/src/components/popover/section-popover-body.tsx

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { type ComponentProps } from 'react';
+
+import { useSectionWidth } from '../../contexts/section-context';
+import { PopoverBody as BasePopoverBody } from './body';
+
+export const SectionPopoverBody = ( props: ComponentProps< typeof BasePopoverBody > ) => {
+	const sectionWidth = useSectionWidth();
+
+	return <BasePopoverBody { ...props } width={ sectionWidth } />;
+};

package/src/contexts/section-context.tsx

@@ -0,0 +1,14 @@
+import { createContext, useContext } from 'react';
+import type { RefObject } from 'react';
+
+const FALLBACK_SECTION_WIDTH = 320;
+
+export const SectionRefContext = createContext< RefObject< HTMLElement > | null >( null );
+
+const useSectionRef = () => useContext( SectionRefContext );
+
+export const useSectionWidth = (): number => {
+	const sectionRef = useSectionRef();
+
+	return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
+};

package/src/index.ts

@@ -20,5 +20,8 @@ export * from './components/popover';
 export * from './components/save-changes-dialog';
 export { ConfirmationDialog } from './components/confirmation-dialog';
 
+// contexts
+export { SectionRefContext, useSectionWidth } from './contexts/section-context';
+
 // hooks
 export { useEditable } from './hooks/use-editable';