@elementor/editor-ui 3.35.0-486 → 3.35.0-488

package/dist/index.d.mts

@@ -159,10 +159,11 @@ type PopoverMenuListProps<T, V extends string> = {
     onChange?: (visibleItems: VirtualizedItem<T, V>[]) => void;
     menuListTemplate?: React$1.ComponentType<React$1.ComponentProps<typeof MenuList>>;
     menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
+    categoryItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     noResultsComponent?: React$1.ReactNode;
 };
 declare const ITEM_HEIGHT = 32;
-declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, 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, }: 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

@@ -159,10 +159,11 @@ type PopoverMenuListProps<T, V extends string> = {
     onChange?: (visibleItems: VirtualizedItem<T, V>[]) => void;
     menuListTemplate?: React$1.ComponentType<React$1.ComponentProps<typeof MenuList>>;
     menuItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
+    categoryItemContentTemplate?: (item: VirtualizedItem<T, V>) => React$1.ReactNode;
     noResultsComponent?: React$1.ReactNode;
 };
 declare const ITEM_HEIGHT = 32;
-declare const PopoverMenuList: <T, V extends string>({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, 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, }: PopoverMenuListProps<T, V>) => React$1.JSX.Element;
 declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;

package/dist/index.js

@@ -679,6 +679,7 @@ var PopoverMenuList = ({
   onChange,
   "data-testid": dataTestId,
   menuItemContentTemplate,
+  categoryItemContentTemplate,
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
@@ -750,7 +751,7 @@ var PopoverMenuList = ({
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
             sx: { fontWeight: "400", color: "text.tertiary" }
           },
-          item.label || item.value
+          categoryItemContentTemplate ? categoryItemContentTemplate(item) : item.label || item.value
         );
       }
       const isDisabled = item.disabled;

package/dist/index.mjs

@@ -652,6 +652,7 @@ var PopoverMenuList = ({
   onChange,
   "data-testid": dataTestId,
   menuItemContentTemplate,
+  categoryItemContentTemplate,
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
@@ -723,7 +724,7 @@ var PopoverMenuList = ({
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
             sx: { fontWeight: "400", color: "text.tertiary" }
           },
-          item.label || item.value
+          categoryItemContentTemplate ? categoryItemContentTemplate(item) : item.label || item.value
         );
       }
       const isDisabled = item.disabled;

package/package.json

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

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { PopoverMenuList, type VirtualizedItem } from '../menu-list';
+
+const mockItems: VirtualizedItem< 'category' | 'item', string >[] = [
+	{ type: 'category', value: 'Category 1', label: 'Category 1' },
+	{ type: 'item', value: 'item-1', label: 'Item 1' },
+	{ type: 'category', value: 'Category 2', label: 'Category 2' },
+	{ type: 'item', value: 'item-2', label: 'Item 2' },
+];
+
+jest.mock( '@tanstack/react-virtual', () => ( {
+	useVirtualizer: jest.fn().mockImplementation( () => ( {
+		getVirtualItems: jest
+			.fn()
+			.mockReturnValue( mockItems.map( ( item, index ) => ( { key: item.value, index, start: index * 32 } ) ) ),
+		getTotalSize: jest.fn().mockReturnValue( mockItems.length ),
+		scrollToIndex: jest.fn(),
+		getVirtualIndexes: jest.fn().mockReturnValue( mockItems.map( ( _, index ) => index ) ),
+	} ) ),
+} ) );
+
+describe( 'PopoverMenuList - menuCategoryContentTemplate', () => {
+	const onSelect = jest.fn();
+	const onClose = jest.fn();
+
+	it.each( [
+		{
+			scenario: 'default rendering',
+			categoryTemplate: undefined,
+			itemTemplate: undefined,
+			expectCategories: [ 'Category 1', 'Category 2' ],
+			expectItems: [ 'Item 1', 'Item 2' ],
+		},
+		{
+			scenario: 'custom category template',
+			categoryTemplate: ( item: VirtualizedItem< 'category' | 'item', string > ) => (
+				<div data-testid={ `custom-${ item.value }` }>Custom: { item.label }</div>
+			),
+			itemTemplate: undefined,
+			expectCategories: [ 'Custom: Category 1', 'Custom: Category 2' ],
+			expectItems: [ 'Item 1', 'Item 2' ],
+		},
+		{
+			scenario: 'both templates',
+			categoryTemplate: ( item: VirtualizedItem< 'category' | 'item', string > ) => (
+				<div>Category: { item.label }</div>
+			),
+			itemTemplate: ( item: VirtualizedItem< 'category' | 'item', string > ) => <div>Item: { item.label }</div>,
+			expectCategories: [ 'Category: Category 1', 'Category: Category 2' ],
+			expectItems: [ 'Item: Item 1', 'Item: Item 2' ],
+		},
+	] )(
+		'should render correctly with $scenario',
+		( { categoryTemplate, itemTemplate, expectCategories, expectItems } ) => {
+			render(
+				<PopoverMenuList
+					items={ mockItems }
+					onSelect={ onSelect }
+					onClose={ onClose }
+					categoryItemContentTemplate={ categoryTemplate }
+					menuItemContentTemplate={ itemTemplate }
+				/>
+			);
+
+			expectCategories.forEach( ( text ) => {
+				expect( screen.getByText( text ) ).toBeInTheDocument();
+			} );
+
+			expectItems.forEach( ( text ) => {
+				expect( screen.getByText( text ) ).toBeInTheDocument();
+			} );
+		}
+	);
+} );

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

@@ -25,6 +25,7 @@ export type PopoverMenuListProps< T, V extends string > = {
 	onChange?: ( visibleItems: VirtualizedItem< T, V >[] ) => void;
 	menuListTemplate?: React.ComponentType< React.ComponentProps< typeof MenuList > >;
 	menuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;
+	categoryItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;
 	noResultsComponent?: React.ReactNode;
 };
 
@@ -59,6 +60,7 @@ export const PopoverMenuList = < T, V extends string >( {
 	onChange,
 	'data-testid': dataTestId,
 	menuItemContentTemplate,
+	categoryItemContentTemplate,
 	noResultsComponent,
 	menuListTemplate: CustomMenuList,
 }: PopoverMenuListProps< T, V > ) => {
@@ -150,7 +152,9 @@ export const PopoverMenuList = < T, V extends string >( {
 									style={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }
 									sx={ { fontWeight: '400', color: 'text.tertiary' } }
 								>
-									{ item.label || item.value }
+									{ categoryItemContentTemplate
+										? categoryItemContentTemplate( item )
+										: item.label || item.value }
 								</MenuSubheader>
 							);
 						}