@elementor/editor-ui 3.33.0-100 → 3.33.0-101

package/dist/index.d.mts

@@ -75,6 +75,7 @@ declare const PopoverHeader: ({ title, onClose, icon, actions }: PopoverHeaderPr
 type VirtualizedItem<T, V extends string> = {
     type: T;
     value: V;
+    disabled?: boolean;
     label?: string;
     icon?: React$1.ReactNode;
     secondaryText?: string;

package/dist/index.d.ts

@@ -75,6 +75,7 @@ declare const PopoverHeader: ({ title, onClose, icon, actions }: PopoverHeaderPr
 type VirtualizedItem<T, V extends string> = {
     type: T;
     value: V;
+    disabled?: boolean;
     label?: string;
     icon?: React$1.ReactNode;
     secondaryText?: string;

package/dist/index.js

@@ -429,6 +429,7 @@ var PopoverMenuList = ({
     onChange
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
+  const virtualItems = virtualizer.getVirtualItems();
   return /* @__PURE__ */ React11.createElement(import_ui11.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
     MenuListComponent,
     {
@@ -436,7 +437,7 @@ var PopoverMenuList = ({
       style: { height: `${virtualizer.getTotalSize()}px` },
       "data-testid": dataTestId
     },
-    virtualizer.getVirtualItems().map((virtualRow) => {
+    virtualItems.map((virtualRow) => {
       const item = items[virtualRow.index];
       const isLast = virtualRow.index === items.length - 1;
       const isFirst = items[0]?.type === "category" ? virtualRow.index === 1 : virtualRow.index === 0;
@@ -457,13 +458,15 @@ var PopoverMenuList = ({
           item.label || item.value
         );
       }
+      const isDisabled = item.disabled;
       return /* @__PURE__ */ React11.createElement(
-        "li",
+        import_ui11.ListItem,
         {
           key: virtualRow.key,
           role: "option",
           "aria-selected": isSelected,
-          onClick: (e) => {
+          "aria-disabled": isDisabled,
+          onClick: isDisabled ? void 0 : (e) => {
             if (e.target.closest("button")) {
               return;
             }
@@ -471,7 +474,7 @@ var PopoverMenuList = ({
             onClose();
           },
           onKeyDown: (event) => {
-            if (event.key === "Enter") {
+            if (event.key === "Enter" && !isDisabled) {
               onSelect(item.value);
               onClose();
             }
@@ -485,7 +488,7 @@ var PopoverMenuList = ({
             }
           },
           tabIndex: isSelected ? 0 : tabIndexFallback,
-          style: {
+          sx: {
             transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
             ...itemStyle ? itemStyle(item) : {}
           }
@@ -512,6 +515,9 @@ var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) =
     '&[aria-selected="true"]': {
       backgroundColor: theme.palette.action.selected
     },
+    '&[aria-disabled="true"]': {
+      color: theme.palette.text.disabled
+    },
     cursor: "pointer",
     textOverflow: "ellipsis",
     position: "absolute",

package/dist/index.mjs

@@ -294,7 +294,7 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
 // src/components/popover/menu-list.tsx
 import * as React11 from "react";
 import { useMemo, useRef } from "react";
-import { Box as Box5, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
+import { Box as Box5, ListItem, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/hooks/use-scroll-to-selected.ts
@@ -392,6 +392,7 @@ var PopoverMenuList = ({
     onChange
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
+  const virtualItems = virtualizer.getVirtualItems();
   return /* @__PURE__ */ React11.createElement(Box5, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
     MenuListComponent,
     {
@@ -399,7 +400,7 @@ var PopoverMenuList = ({
       style: { height: `${virtualizer.getTotalSize()}px` },
       "data-testid": dataTestId
     },
-    virtualizer.getVirtualItems().map((virtualRow) => {
+    virtualItems.map((virtualRow) => {
       const item = items[virtualRow.index];
       const isLast = virtualRow.index === items.length - 1;
       const isFirst = items[0]?.type === "category" ? virtualRow.index === 1 : virtualRow.index === 0;
@@ -420,13 +421,15 @@ var PopoverMenuList = ({
           item.label || item.value
         );
       }
+      const isDisabled = item.disabled;
       return /* @__PURE__ */ React11.createElement(
-        "li",
+        ListItem,
         {
           key: virtualRow.key,
           role: "option",
           "aria-selected": isSelected,
-          onClick: (e) => {
+          "aria-disabled": isDisabled,
+          onClick: isDisabled ? void 0 : (e) => {
             if (e.target.closest("button")) {
               return;
             }
@@ -434,7 +437,7 @@ var PopoverMenuList = ({
             onClose();
           },
           onKeyDown: (event) => {
-            if (event.key === "Enter") {
+            if (event.key === "Enter" && !isDisabled) {
               onSelect(item.value);
               onClose();
             }
@@ -448,7 +451,7 @@ var PopoverMenuList = ({
             }
           },
           tabIndex: isSelected ? 0 : tabIndexFallback,
-          style: {
+          sx: {
             transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
             ...itemStyle ? itemStyle(item) : {}
           }
@@ -475,6 +478,9 @@ var StyledMenuList = styled2(MenuList)(({ theme }) => ({
     '&[aria-selected="true"]': {
       backgroundColor: theme.palette.action.selected
     },
+    '&[aria-disabled="true"]': {
+      color: theme.palette.text.disabled
+    },
     cursor: "pointer",
     textOverflow: "ellipsis",
     position: "absolute",

package/package.json

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

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

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { PopoverMenuList } from '../menu-list';
+
+const mockItems = [
+	{ value: 'Item 1', type: 'item', disabled: false },
+	{ value: 'Item 2', type: 'item', disabled: true },
+	{ value: 'Item 3', type: 'item', disabled: false },
+	{ value: 'Item 4', type: 'item', disabled: false },
+	{ value: 'Item 5', type: 'item', disabled: true },
+	{ value: 'Item 6', type: 'item', disabled: false },
+	{ value: 'Item 7', type: 'item', disabled: false },
+	{ value: 'Item 8', type: 'item', disabled: false },
+];
+
+jest.mock( '@tanstack/react-virtual', () => ( {
+	useVirtualizer: jest.fn().mockImplementation( () => ( {
+		getVirtualItems: jest
+			.fn()
+			.mockReturnValue( mockItems.map( ( item, index ) => ( { key: item.value, index, start: index * 10 } ) ) ),
+		getTotalSize: jest.fn().mockReturnValue( mockItems.length ),
+		scrollToIndex: jest.fn(),
+	} ) ),
+} ) );
+
+describe( 'PopoverMenuList', () => {
+	it( 'should render an empty list', async () => {
+		// Arrange.
+		render(
+			<PopoverMenuList
+				items={ [] }
+				onSelect={ jest.fn() }
+				onClose={ jest.fn() }
+				noResultsComponent={ <div>No results</div> }
+			/>
+		);
+
+		// Assert.
+		expect( screen.getByText( 'No results' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should render a list with items', async () => {
+		const onSelect = jest.fn();
+		// Arrange.
+		const enabledMockItems = mockItems.filter( ( item ) => ! item.disabled );
+		render( <PopoverMenuList items={ mockItems } onSelect={ onSelect } onClose={ jest.fn() } /> );
+
+		// Assert.
+		enabledMockItems.forEach( ( item ) => {
+			const itemElement = screen.getByText( item.value );
+			expect( itemElement ).toBeInTheDocument();
+			fireEvent.click( itemElement );
+			expect( onSelect ).toHaveBeenCalledWith( item.value );
+		} );
+
+		expect( onSelect ).toHaveBeenCalledTimes( enabledMockItems.length );
+	} );
+
+	it( 'should render a list with items and a selected item', async () => {
+		// Arrange.
+		const selectedValue = 'Item 5';
+		render(
+			<PopoverMenuList
+				items={ mockItems }
+				onSelect={ jest.fn() }
+				onClose={ jest.fn() }
+				selectedValue={ selectedValue }
+			/>
+		);
+
+		// Assert.
+		mockItems.forEach( ( item ) => {
+			const itemElement = screen.getByText( item.value );
+			expect( itemElement ).toBeInTheDocument();
+		} );
+
+		const item5 = screen.getByText( selectedValue );
+		expect( item5 ).toHaveAttribute( 'aria-selected', 'true' );
+	} );
+
+	it( 'should render a list with items and disabled items', async () => {
+		// Arrange.
+		const onSelect = jest.fn();
+		render( <PopoverMenuList items={ mockItems } onSelect={ onSelect } onClose={ jest.fn() } /> );
+
+		// Assert.
+		mockItems.forEach( ( item ) => {
+			const itemElement = screen.getByText( item.value );
+			expect( itemElement ).toBeInTheDocument();
+		} );
+
+		let disabledItem = screen.getByText( mockItems[ 1 ].value );
+		expect( disabledItem ).toHaveAttribute( 'aria-disabled', 'true' );
+		fireEvent.click( disabledItem );
+		expect( onSelect ).not.toHaveBeenCalled();
+		disabledItem = screen.getByText( mockItems[ 4 ].value );
+		expect( disabledItem ).toHaveAttribute( 'aria-disabled', 'true' );
+		fireEvent.click( disabledItem );
+		expect( onSelect ).not.toHaveBeenCalled();
+		const item1 = screen.getByText( mockItems[ 0 ].value );
+		expect( item1 ).toHaveAttribute( 'aria-disabled', 'false' );
+		fireEvent.click( item1 );
+		expect( onSelect ).toHaveBeenCalledWith( mockItems[ 0 ].value );
+	} );
+} );

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useMemo, useRef } from 'react';
-import { Box, MenuList, MenuSubheader, styled } from '@elementor/ui';
+import { Box, ListItem, MenuList, MenuSubheader, styled } from '@elementor/ui';
 import { useVirtualizer } from '@tanstack/react-virtual';
 
 import { useScrollTop, useScrollToSelected } from '../../hooks';
@@ -8,6 +8,7 @@ import { useScrollTop, useScrollToSelected } from '../../hooks';
 export type VirtualizedItem< T, V extends string > = {
 	type: T;
 	value: V;
+	disabled?: boolean;
 	label?: string;
 	icon?: React.ReactNode;
 	secondaryText?: string;
@@ -105,6 +106,7 @@ export const PopoverMenuList = < T, V extends string >( {
 	} );
 
 	useScrollToSelected( { selectedValue, items, virtualizer } );
+	const virtualItems = virtualizer.getVirtualItems();
 
 	return (
 		<Box ref={ containerRef } sx={ { height: '100%', overflowY: 'auto' } }>
@@ -116,7 +118,7 @@ export const PopoverMenuList = < T, V extends string >( {
 					style={ { height: `${ virtualizer.getTotalSize() }px` } }
 					data-testid={ dataTestId }
 				>
-					{ virtualizer.getVirtualItems().map( ( virtualRow ) => {
+					{ virtualItems.map( ( virtualRow ) => {
 						const item = items[ virtualRow.index ];
 						const isLast = virtualRow.index === items.length - 1;
 						const isFirst =
@@ -141,21 +143,26 @@ export const PopoverMenuList = < T, V extends string >( {
 								</MenuSubheader>
 							);
 						}
-
+						const isDisabled = item.disabled;
 						return (
-							<li
+							<ListItem
 								key={ virtualRow.key }
 								role="option"
 								aria-selected={ isSelected }
-								onClick={ ( e ) => {
-									if ( ( e.target as HTMLElement ).closest( 'button' ) ) {
-										return;
-									}
-									onSelect( item.value );
-									onClose();
-								} }
-								onKeyDown={ ( event ) => {
-									if ( event.key === 'Enter' ) {
+								aria-disabled={ isDisabled }
+								onClick={
+									isDisabled
+										? undefined
+										: ( e: React.MouseEvent< HTMLLIElement > ) => {
+												if ( ( e.target as HTMLElement ).closest( 'button' ) ) {
+													return;
+												}
+												onSelect( item.value );
+												onClose();
+										  }
+								}
+								onKeyDown={ ( event: React.KeyboardEvent< HTMLLIElement > ) => {
+									if ( event.key === 'Enter' && ! isDisabled ) {
 										onSelect( item.value );
 										onClose();
 									}
@@ -171,13 +178,13 @@ export const PopoverMenuList = < T, V extends string >( {
 									}
 								} }
 								tabIndex={ isSelected ? 0 : tabIndexFallback }
-								style={ {
+								sx={ {
 									transform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,
 									...( itemStyle ? itemStyle( item ) : {} ),
 								} }
 							>
 								{ menuItemContentTemplate ? menuItemContentTemplate( item ) : item.label || item.value }
-							</li>
+							</ListItem>
 						);
 					} ) }
 				</MenuListComponent>
@@ -203,6 +210,9 @@ export const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {
 		'&[aria-selected="true"]': {
 			backgroundColor: theme.palette.action.selected,
 		},
+		'&[aria-disabled="true"]': {
+			color: theme.palette.text.disabled,
+		},
 		cursor: 'pointer',
 		textOverflow: 'ellipsis',
 		position: 'absolute',