@elementor/editor-ui 3.35.0-417 → 3.35.0-418

package/dist/index.d.mts

@@ -158,9 +158,7 @@ type PopoverMenuListProps<T, V extends string> = {
     selectedValue?: V;
     itemStyle?: (item: VirtualizedItem<T, V>) => React$1.CSSProperties;
     'data-testid'?: string;
-    onChange?: (params: {
-        getVirtualIndexes: () => number[];
-    }) => void;
+    onChange?: (visibleItems: VirtualizedItem<T, V>[]) => void;
     menuListTemplate?: React$1.ComponentType<React$1.ComponentProps<typeof MenuList>>;
     menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     noResultsComponent?: React$1.ReactNode;

package/dist/index.d.ts

@@ -158,9 +158,7 @@ type PopoverMenuListProps<T, V extends string> = {
     selectedValue?: V;
     itemStyle?: (item: VirtualizedItem<T, V>) => React$1.CSSProperties;
     'data-testid'?: string;
-    onChange?: (params: {
-        getVirtualIndexes: () => number[];
-    }) => void;
+    onChange?: (visibleItems: VirtualizedItem<T, V>[]) => void;
     menuListTemplate?: React$1.ComponentType<React$1.ComponentProps<typeof MenuList>>;
     menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     noResultsComponent?: React$1.ReactNode;

package/dist/index.js

@@ -676,6 +676,7 @@ var PopoverMenuList = ({
 }) => {
   const containerRef = (0, import_react12.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
+  const theme = (0, import_ui18.useTheme)();
   const MenuListComponent = CustomMenuList || StyledMenuList;
   const stickyIndices = (0, import_react12.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
@@ -699,14 +700,21 @@ var PopoverMenuList = ({
     });
     return visibleAndStickyIndexes.sort((a, b) => a - b);
   };
+  const onChangeCallback = ({ getVirtualIndexes }) => {
+    const visibleItems = getVirtualIndexes().map((index) => items[index]);
+    onChange?.(visibleItems);
+  };
   const virtualizer = (0, import_react_virtual.useVirtualizer)({
     count: items.length,
     getScrollElement: () => containerRef.current,
     estimateSize: () => ITEM_HEIGHT,
     overscan: LIST_ITEMS_BUFFER,
     rangeExtractor: getActiveItemIndices,
-    onChange
+    onChange: onChangeCallback
   });
+  (0, import_react12.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(
@@ -769,6 +777,7 @@ var PopoverMenuList = ({
           tabIndex: isSelected ? 0 : tabIndexFallback,
           sx: {
             transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
+            ...theme.typography.caption,
             ...itemStyle ? itemStyle(item) : {}
           }
         },
@@ -785,7 +794,6 @@ var StyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) =
     alignItems: "center"
   },
   '& > [role="option"]': {
-    ...theme.typography.caption,
     lineHeight: "inherit",
     padding: theme.spacing(0.75, 2, 0.75, 4),
     "&:hover, &:focus": {

package/dist/index.mjs

@@ -583,8 +583,8 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
 
 // src/components/popover/menu-list.tsx
 import * as React18 from "react";
-import { useMemo, useRef as useRef3 } from "react";
-import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled3 } from "@elementor/ui";
+import { useEffect as useEffect6, 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
@@ -650,6 +650,7 @@ var PopoverMenuList = ({
 }) => {
   const containerRef = useRef3(null);
   const scrollTop = useScrollTop({ containerRef });
+  const theme = useTheme();
   const MenuListComponent = CustomMenuList || StyledMenuList;
   const stickyIndices = useMemo(
     () => items.reduce((categoryIndices, item, index) => {
@@ -673,14 +674,21 @@ var PopoverMenuList = ({
     });
     return visibleAndStickyIndexes.sort((a, b) => a - b);
   };
+  const onChangeCallback = ({ getVirtualIndexes }) => {
+    const visibleItems = getVirtualIndexes().map((index) => items[index]);
+    onChange?.(visibleItems);
+  };
   const virtualizer = useVirtualizer({
     count: items.length,
     getScrollElement: () => containerRef.current,
     estimateSize: () => ITEM_HEIGHT,
     overscan: LIST_ITEMS_BUFFER,
     rangeExtractor: getActiveItemIndices,
-    onChange
+    onChange: onChangeCallback
   });
+  useEffect6(() => {
+    onChangeCallback(virtualizer);
+  }, [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(
@@ -743,6 +751,7 @@ var PopoverMenuList = ({
           tabIndex: isSelected ? 0 : tabIndexFallback,
           sx: {
             transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
+            ...theme.typography.caption,
             ...itemStyle ? itemStyle(item) : {}
           }
         },
@@ -759,7 +768,6 @@ var StyledMenuList = styled3(MenuList)(({ theme }) => ({
     alignItems: "center"
   },
   '& > [role="option"]': {
-    ...theme.typography.caption,
     lineHeight: "inherit",
     padding: theme.spacing(0.75, 2, 0.75, 4),
     "&:hover, &:focus": {
@@ -833,7 +841,7 @@ var useDialog = () => {
 };
 
 // src/hooks/use-editable.ts
-import { useEffect as useEffect6, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef4, useState as useState7 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   const [isEditing, setIsEditing] = useState7(false);
   const [error, setError] = useState7(null);
@@ -919,7 +927,7 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
 };
 var useSelection = (isEditing) => {
   const ref = useRef4(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (isEditing) {
       selectAll(ref.current);
     }

package/package.json

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

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

@@ -21,6 +21,7 @@ jest.mock( '@tanstack/react-virtual', () => ( {
 			.mockReturnValue( mockItems.map( ( item, index ) => ( { key: item.value, index, start: index * 10 } ) ) ),
 		getTotalSize: jest.fn().mockReturnValue( mockItems.length ),
 		scrollToIndex: jest.fn(),
+		getVirtualIndexes: jest.fn().mockReturnValue( mockItems.map( ( _, index ) => index ) ),
 	} ) ),
 } ) );
 

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useMemo, useRef } from 'react';
-import { Box, ListItem, MenuList, MenuSubheader, styled } from '@elementor/ui';
-import { useVirtualizer } from '@tanstack/react-virtual';
+import { useEffect, useMemo, useRef } from 'react';
+import { Box, ListItem, MenuList, MenuSubheader, styled, useTheme } from '@elementor/ui';
+import { useVirtualizer, type Virtualizer } from '@tanstack/react-virtual';
 
 import { useScrollTop, useScrollToSelected } from '../../hooks';
 
@@ -22,7 +22,7 @@ export type PopoverMenuListProps< T, V extends string > = {
 	selectedValue?: V;
 	itemStyle?: ( item: VirtualizedItem< T, V > ) => React.CSSProperties;
 	'data-testid'?: string;
-	onChange?: ( params: { getVirtualIndexes: () => number[] } ) => void;
+	onChange?: ( visibleItems: VirtualizedItem< T, V >[] ) => void;
 	menuListTemplate?: React.ComponentType< React.ComponentProps< typeof MenuList > >;
 	menuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;
 	noResultsComponent?: React.ReactNode;
@@ -64,6 +64,7 @@ export const PopoverMenuList = < T, V extends string >( {
 }: PopoverMenuListProps< T, V > ) => {
 	const containerRef = useRef< HTMLDivElement >( null );
 	const scrollTop = useScrollTop( { containerRef } );
+	const theme = useTheme();
 
 	const MenuListComponent = CustomMenuList || StyledMenuList;
 
@@ -96,15 +97,25 @@ export const PopoverMenuList = < T, V extends string >( {
 		return visibleAndStickyIndexes.sort( ( a, b ) => a - b );
 	};
 
+	const onChangeCallback = ( { getVirtualIndexes }: Virtualizer< HTMLDivElement, Element > ) => {
+		const visibleItems = getVirtualIndexes().map( ( index ) => items[ index ] );
+		onChange?.( visibleItems );
+	};
+
 	const virtualizer = useVirtualizer( {
 		count: items.length,
 		getScrollElement: () => containerRef.current,
 		estimateSize: () => ITEM_HEIGHT,
 		overscan: LIST_ITEMS_BUFFER,
 		rangeExtractor: getActiveItemIndices,
-		onChange,
+		onChange: onChangeCallback,
 	} );
 
+	useEffect( () => {
+		onChangeCallback( virtualizer );
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ items ] );
+
 	useScrollToSelected( { selectedValue, items, virtualizer } );
 	const virtualItems = virtualizer.getVirtualItems();
 
@@ -180,6 +191,7 @@ export const PopoverMenuList = < T, V extends string >( {
 								tabIndex={ isSelected ? 0 : tabIndexFallback }
 								sx={ {
 									transform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,
+									...theme.typography.caption,
 									...( itemStyle ? itemStyle( item ) : {} ),
 								} }
 							>
@@ -201,7 +213,6 @@ export const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
 		alignItems: 'center',
 	},
 	'& > [role="option"]': {
-		...theme.typography.caption,
 		lineHeight: 'inherit',
 		padding: theme.spacing( 0.75, 2, 0.75, 4 ),
 		'&:hover, &:focus': {