@elementor/editor-ui 4.3.0-beta1 → 4.3.0-beta3

package/dist/index.d.mts

@@ -3,7 +3,7 @@ import * as _mui_system from '@mui/system';
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren, ReactElement, MouseEvent as MouseEvent$1, RefObject, ComponentProps, ElementType, ComponentType } from 'react';
 import * as _mui_material from '@mui/material';
-import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
+import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, StackProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
 declare const CollapseIcon: _emotion_styled.StyledComponent<Omit<_mui_material.SvgIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     open: boolean;
@@ -176,8 +176,9 @@ type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
     id?: string;
+    fillWidth?: boolean;
 }>;
-declare const PopoverBody: ({ children, height, width, id }: PopoverBodyProps) => React$1.JSX.Element;
+declare const PopoverBody: ({ children, height, width, id, fillWidth, }: PopoverBodyProps) => React$1.JSX.Element;
 
 declare const SectionPopoverBody: (props: ComponentProps<typeof PopoverBody>) => React$1.JSX.Element;
 
@@ -186,8 +187,9 @@ type PopoverHeaderProps = {
     onClose: () => void;
     icon?: React$1.ReactNode;
     actions?: React$1.ReactNode[];
+    sx?: StackProps['sx'];
 };
-declare const PopoverHeader: ({ title, onClose, icon, actions }: PopoverHeaderProps) => React$1.JSX.Element;
+declare const PopoverHeader: ({ title, onClose, icon, actions, sx }: PopoverHeaderProps) => React$1.JSX.Element;
 
 type VirtualizedItem<T, V extends string> = {
     type: T;
@@ -210,9 +212,10 @@ type PopoverMenuListProps<T, V extends string> = {
     menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     categoryItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     noResultsComponent?: React$1.ReactNode;
+    itemHeight?: number;
 };
 declare const ITEM_HEIGHT = 32;
-declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, categoryItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
+declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, categoryItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList, itemHeight, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
 declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;

package/dist/index.d.ts

@@ -3,7 +3,7 @@ import * as _mui_system from '@mui/system';
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren, ReactElement, MouseEvent as MouseEvent$1, RefObject, ComponentProps, ElementType, ComponentType } from 'react';
 import * as _mui_material from '@mui/material';
-import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
+import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, StackProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
 declare const CollapseIcon: _emotion_styled.StyledComponent<Omit<_mui_material.SvgIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     open: boolean;
@@ -176,8 +176,9 @@ type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
     id?: string;
+    fillWidth?: boolean;
 }>;
-declare const PopoverBody: ({ children, height, width, id }: PopoverBodyProps) => React$1.JSX.Element;
+declare const PopoverBody: ({ children, height, width, id, fillWidth, }: PopoverBodyProps) => React$1.JSX.Element;
 
 declare const SectionPopoverBody: (props: ComponentProps<typeof PopoverBody>) => React$1.JSX.Element;
 
@@ -186,8 +187,9 @@ type PopoverHeaderProps = {
     onClose: () => void;
     icon?: React$1.ReactNode;
     actions?: React$1.ReactNode[];
+    sx?: StackProps['sx'];
 };
-declare const PopoverHeader: ({ title, onClose, icon, actions }: PopoverHeaderProps) => React$1.JSX.Element;
+declare const PopoverHeader: ({ title, onClose, icon, actions, sx }: PopoverHeaderProps) => React$1.JSX.Element;
 
 type VirtualizedItem<T, V extends string> = {
     type: T;
@@ -210,9 +212,10 @@ type PopoverMenuListProps<T, V extends string> = {
     menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     categoryItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     noResultsComponent?: React$1.ReactNode;
+    itemHeight?: number;
 };
 declare const ITEM_HEIGHT = 32;
-declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, categoryItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
+declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, categoryItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList, itemHeight, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
 declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;

package/dist/index.js

@@ -866,7 +866,14 @@ var import_ui21 = 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 }) => {
+var PopoverBody = ({
+  children,
+  height = DEFAULT_POPOVER_HEIGHT,
+  width,
+  id,
+  fillWidth = false
+}) => {
+  const resolvedWidth = resolvePopoverWidth(width, fillWidth);
   return /* @__PURE__ */ React21.createElement(
     import_ui21.Box,
     {
@@ -875,14 +882,23 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
       sx: {
         height,
         overflow: "hidden",
-        width: `${width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH}px`,
-        maxWidth: 496
+        width: `${resolvedWidth}px`,
+        maxWidth: fillWidth ? resolvedWidth : 496
       },
       id
     },
     children
   );
 };
+function resolvePopoverWidth(width, fillWidth) {
+  if (!width) {
+    return FALLBACK_POPOVER_WIDTH;
+  }
+  if (fillWidth) {
+    return width;
+  }
+  return width - SECTION_PADDING_INLINE;
+}
 
 // src/components/popover/section-popover-body.tsx
 var React22 = __toESM(require("react"));
@@ -907,14 +923,25 @@ var SectionPopoverBody = (props) => {
 var React23 = __toESM(require("react"));
 var import_ui22 = require("@elementor/ui");
 var SIZE2 = "tiny";
-var PopoverHeader = ({ title, onClose, icon, actions }) => {
-  const paddingAndSizing = {
-    pl: 2,
-    pr: 1,
-    py: 1.5,
-    maxHeight: 36
-  };
-  return /* @__PURE__ */ React23.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React23.createElement(import_ui22.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React23.createElement(import_ui22.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React23.createElement(import_ui22.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+var PopoverHeader = ({ title, onClose, icon, actions, sx }) => {
+  return /* @__PURE__ */ React23.createElement(
+    import_ui22.Stack,
+    {
+      direction: "row",
+      alignItems: "center",
+      sx: {
+        pl: 2,
+        pr: 1,
+        py: 1.5,
+        maxHeight: 36,
+        columnGap: 0.5,
+        ...sx
+      }
+    },
+    icon,
+    /* @__PURE__ */ React23.createElement(import_ui22.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title),
+    /* @__PURE__ */ React23.createElement(import_ui22.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React23.createElement(import_ui22.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose }))
+  );
 };
 
 // src/components/popover/menu-list.tsx
@@ -945,7 +972,8 @@ var PopoverMenuList = ({
   menuItemContentTemplate,
   categoryItemContentTemplate,
   noResultsComponent,
-  menuListTemplate: CustomMenuList
+  menuListTemplate: CustomMenuList,
+  itemHeight = ITEM_HEIGHT
 }) => {
   const containerRef = (0, import_react18.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
@@ -980,7 +1008,7 @@ var PopoverMenuList = ({
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: items.length,
     getScrollElement: () => containerRef.current,
-    estimateSize: () => ITEM_HEIGHT,
+    estimateSize: () => itemHeight,
     overscan: LIST_ITEMS_BUFFER,
     rangeExtractor: getActiveItemIndices,
     onChange: onChangeCallback
@@ -995,7 +1023,8 @@ var PopoverMenuList = ({
     {
       role: "listbox",
       style: { height: `${virtualizer.getTotalSize()}px` },
-      "data-testid": dataTestId
+      "data-testid": dataTestId,
+      sx: itemHeight === ITEM_HEIGHT ? void 0 : { "& > li": { height: itemHeight } }
     },
     virtualItems.map((virtualRow) => {
       const item = items[virtualRow.index];

package/dist/index.mjs

@@ -826,7 +826,14 @@ 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 }) => {
+var PopoverBody = ({
+  children,
+  height = DEFAULT_POPOVER_HEIGHT,
+  width,
+  id,
+  fillWidth = false
+}) => {
+  const resolvedWidth = resolvePopoverWidth(width, fillWidth);
   return /* @__PURE__ */ React21.createElement(
     Box6,
     {
@@ -835,14 +842,23 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
       sx: {
         height,
         overflow: "hidden",
-        width: `${width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH}px`,
-        maxWidth: 496
+        width: `${resolvedWidth}px`,
+        maxWidth: fillWidth ? resolvedWidth : 496
       },
       id
     },
     children
   );
 };
+function resolvePopoverWidth(width, fillWidth) {
+  if (!width) {
+    return FALLBACK_POPOVER_WIDTH;
+  }
+  if (fillWidth) {
+    return width;
+  }
+  return width - SECTION_PADDING_INLINE;
+}
 
 // src/components/popover/section-popover-body.tsx
 import * as React22 from "react";
@@ -867,14 +883,25 @@ var SectionPopoverBody = (props) => {
 import * as React23 from "react";
 import { CloseButton as CloseButton2, Stack as Stack4, Typography as Typography7 } from "@elementor/ui";
 var SIZE2 = "tiny";
-var PopoverHeader = ({ title, onClose, icon, actions }) => {
-  const paddingAndSizing = {
-    pl: 2,
-    pr: 1,
-    py: 1.5,
-    maxHeight: 36
-  };
-  return /* @__PURE__ */ React23.createElement(Stack4, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React23.createElement(Typography7, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React23.createElement(Stack4, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React23.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+var PopoverHeader = ({ title, onClose, icon, actions, sx }) => {
+  return /* @__PURE__ */ React23.createElement(
+    Stack4,
+    {
+      direction: "row",
+      alignItems: "center",
+      sx: {
+        pl: 2,
+        pr: 1,
+        py: 1.5,
+        maxHeight: 36,
+        columnGap: 0.5,
+        ...sx
+      }
+    },
+    icon,
+    /* @__PURE__ */ React23.createElement(Typography7, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title),
+    /* @__PURE__ */ React23.createElement(Stack4, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React23.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose }))
+  );
 };
 
 // src/components/popover/menu-list.tsx
@@ -905,7 +932,8 @@ var PopoverMenuList = ({
   menuItemContentTemplate,
   categoryItemContentTemplate,
   noResultsComponent,
-  menuListTemplate: CustomMenuList
+  menuListTemplate: CustomMenuList,
+  itemHeight = ITEM_HEIGHT
 }) => {
   const containerRef = useRef5(null);
   const scrollTop = useScrollTop({ containerRef });
@@ -940,7 +968,7 @@ var PopoverMenuList = ({
   const virtualizer = useVirtualizer({
     count: items.length,
     getScrollElement: () => containerRef.current,
-    estimateSize: () => ITEM_HEIGHT,
+    estimateSize: () => itemHeight,
     overscan: LIST_ITEMS_BUFFER,
     rangeExtractor: getActiveItemIndices,
     onChange: onChangeCallback
@@ -955,7 +983,8 @@ var PopoverMenuList = ({
     {
       role: "listbox",
       style: { height: `${virtualizer.getTotalSize()}px` },
-      "data-testid": dataTestId
+      "data-testid": dataTestId,
+      sx: itemHeight === ITEM_HEIGHT ? void 0 : { "& > li": { height: itemHeight } }
     },
     virtualItems.map((virtualRow) => {
       const item = items[virtualRow.index];

package/package.json

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

package/src/components/popover/body.tsx

@@ -10,9 +10,18 @@ type PopoverBodyProps = PropsWithChildren< {
 	height?: number | 'auto';
 	width?: number;
 	id?: string;
+	fillWidth?: boolean;
 } >;
 
-export const PopoverBody = ( { children, height = DEFAULT_POPOVER_HEIGHT, width, id }: PopoverBodyProps ) => {
+export const PopoverBody = ( {
+	children,
+	height = DEFAULT_POPOVER_HEIGHT,
+	width,
+	id,
+	fillWidth = false,
+}: PopoverBodyProps ) => {
+	const resolvedWidth = resolvePopoverWidth( width, fillWidth );
+
 	return (
 		<Box
 			display="flex"
@@ -20,8 +29,8 @@ export const PopoverBody = ( { children, height = DEFAULT_POPOVER_HEIGHT, width,
 			sx={ {
 				height,
 				overflow: 'hidden',
-				width: `${ width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH }px`,
-				maxWidth: 496,
+				width: `${ resolvedWidth }px`,
+				maxWidth: fillWidth ? resolvedWidth : 496,
 			} }
 			id={ id }
 		>
@@ -29,3 +38,15 @@ export const PopoverBody = ( { children, height = DEFAULT_POPOVER_HEIGHT, width,
 		</Box>
 	);
 };
+
+function resolvePopoverWidth( width: number | undefined, fillWidth: boolean ): number {
+	if ( ! width ) {
+		return FALLBACK_POPOVER_WIDTH;
+	}
+
+	if ( fillWidth ) {
+		return width;
+	}
+
+	return width - SECTION_PADDING_INLINE;
+}

package/src/components/popover/header.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CloseButton, Stack, Typography } from '@elementor/ui';
+import { CloseButton, Stack, type StackProps, Typography } from '@elementor/ui';
 
 const SIZE = 'tiny';
 
@@ -8,18 +8,23 @@ type PopoverHeaderProps = {
 	onClose: () => void;
 	icon?: React.ReactNode;
 	actions?: React.ReactNode[];
+	sx?: StackProps[ 'sx' ];
 };
 
-export const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => {
-	const paddingAndSizing = {
-		pl: 2,
-		pr: 1,
-		py: 1.5,
-		maxHeight: 36,
-	};
-
+export const PopoverHeader = ( { title, onClose, icon, actions, sx }: PopoverHeaderProps ) => {
 	return (
-		<Stack direction="row" alignItems="center" { ...paddingAndSizing } sx={ { columnGap: 0.5 } }>
+		<Stack
+			direction="row"
+			alignItems="center"
+			sx={ {
+				pl: 2,
+				pr: 1,
+				py: 1.5,
+				maxHeight: 36,
+				columnGap: 0.5,
+				...sx,
+			} }
+		>
 			{ icon }
 			<Typography variant="subtitle2" sx={ { fontSize: '12px', mt: 0.25 } }>
 				{ title }

package/src/components/popover/menu-list.tsx

@@ -27,6 +27,7 @@ export type PopoverMenuListProps< T, V extends string > = {
 	menuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;
 	categoryItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;
 	noResultsComponent?: React.ReactNode;
+	itemHeight?: number;
 };
 
 export const ITEM_HEIGHT = 32;
@@ -63,6 +64,7 @@ export const PopoverMenuList = < T, V extends string >( {
 	categoryItemContentTemplate,
 	noResultsComponent,
 	menuListTemplate: CustomMenuList,
+	itemHeight = ITEM_HEIGHT,
 }: PopoverMenuListProps< T, V > ) => {
 	const containerRef = useRef< HTMLDivElement >( null );
 	const scrollTop = useScrollTop( { containerRef } );
@@ -107,7 +109,7 @@ export const PopoverMenuList = < T, V extends string >( {
 	const virtualizer = useVirtualizer( {
 		count: items.length,
 		getScrollElement: () => containerRef.current,
-		estimateSize: () => ITEM_HEIGHT,
+		estimateSize: () => itemHeight,
 		overscan: LIST_ITEMS_BUFFER,
 		rangeExtractor: getActiveItemIndices,
 		onChange: onChangeCallback,
@@ -130,6 +132,7 @@ export const PopoverMenuList = < T, V extends string >( {
 					role="listbox"
 					style={ { height: `${ virtualizer.getTotalSize() }px` } }
 					data-testid={ dataTestId }
+					sx={ itemHeight === ITEM_HEIGHT ? undefined : { '& > li': { height: itemHeight } } }
 				>
 					{ virtualItems.map( ( virtualRow ) => {
 						const item = items[ virtualRow.index ];