@elementor/editor-ui 3.33.0-99 → 3.34.2

package/src/components/global-dialog/__tests__/global-dialog.test.tsx

@@ -0,0 +1,272 @@
+import * as React from 'react';
+import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import { GlobalDialog } from '../components/global-dialog';
+import { closeDialog, type DialogStateCallback, openDialog } from '../subscribers';
+
+// Get mock functions for cleanup
+const mockEventBus = jest.requireMock( '../subscribers' );
+
+jest.mock( '../subscribers', () => {
+	let currentState: { component: React.ReactElement } | null = null;
+	const subscribers = new Set< DialogStateCallback >();
+
+	const notifySubscribers = () => {
+		subscribers.forEach( ( callback ) => callback( currentState ) );
+	};
+
+	return {
+		subscribeToDialogState: jest.fn( ( callback: DialogStateCallback ) => {
+			subscribers.add( callback );
+			// Call callback immediately with current state (matches real implementation)
+			callback( currentState );
+			return () => subscribers.delete( callback );
+		} ),
+		openDialog: jest.fn( ( { component }: { component: React.ReactElement } ) => {
+			currentState = { component };
+			// Notify synchronously (matches real implementation)
+			notifySubscribers();
+		} ),
+		closeDialog: jest.fn( () => {
+			currentState = null;
+			// Notify synchronously (matches real implementation)
+			notifySubscribers();
+		} ),
+		// For manual control in tests
+		__notifySubscribers: notifySubscribers,
+		__getCurrentState: () => currentState,
+		__getSubscribers: () => subscribers,
+		__reset: () => {
+			currentState = null;
+			subscribers.clear();
+		},
+	};
+} );
+
+// Helper function to render GlobalDialog
+const renderGlobalDialog = () => {
+	return render( <GlobalDialog /> );
+};
+
+describe( 'GlobalDialog', () => {
+	// Reset dialog state before each test to avoid test interference
+	beforeEach( () => {
+		mockEventBus.__reset();
+	} );
+
+	afterEach( () => {
+		// Clean up any open dialogs after each test
+		mockEventBus.__reset();
+	} );
+
+	it( 'should not render anything when no dialog is open', () => {
+		// Act
+		renderGlobalDialog();
+
+		// Assert
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should render dialog when openDialog is called', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Dialog Content</div>;
+
+		renderGlobalDialog();
+
+		// Act
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		// Assert - Wait for the dialog to appear
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 ); // MUI creates 2 dialog elements
+		} );
+		expect( screen.getByText( 'Test Dialog Content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should close dialog when closeDialog is called', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Dialog Content</div>;
+
+		renderGlobalDialog();
+
+		// Open dialog first
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+
+		// Act
+		act( () => {
+			closeDialog();
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.queryAllByRole( 'dialog' ) ).toHaveLength( 0 );
+		} );
+		expect( screen.queryByText( 'Test Dialog Content' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should close dialog when Dialog onClose is triggered', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Dialog Content</div>;
+
+		renderGlobalDialog();
+
+		// Open dialog first
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+		expect( screen.getByText( 'Test Dialog Content' ) ).toBeInTheDocument();
+
+		// Act - Simulate Dialog's onClose being called (like when user clicks close button)
+		act( () => {
+			closeDialog();
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.queryAllByRole( 'dialog' ) ).toHaveLength( 0 );
+		} );
+		expect( screen.queryByText( 'Test Dialog Content' ) ).not.toBeInTheDocument();
+	} );
+
+	it( 'should handle null/undefined dialog content gracefully', () => {
+		// This test ensures the component doesn't crash with invalid content
+		renderGlobalDialog();
+
+		// No dialog should be rendered when content is null
+		expect( screen.queryByRole( 'dialog' ) ).not.toBeInTheDocument();
+	} );
+	it( 'should replace dialog content when a new dialog is opened', async () => {
+		// Arrange
+		const FirstDialogContent = () => <div>First Dialog</div>;
+		const SecondDialogContent = () => <div>Second Dialog</div>;
+
+		renderGlobalDialog();
+
+		// Open first dialog
+		act( () => {
+			openDialog( { component: <FirstDialogContent /> } );
+		} );
+
+		await waitFor( () => {
+			expect( screen.getByText( 'First Dialog' ) ).toBeInTheDocument();
+		} );
+
+		// Act - Open second dialog
+		act( () => {
+			openDialog( { component: <SecondDialogContent /> } );
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.queryByText( 'First Dialog' ) ).not.toBeInTheDocument();
+		} );
+		expect( screen.getByText( 'Second Dialog' ) ).toBeInTheDocument();
+	} );
+
+	it( 'should subscribe to dialog state on mount', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Content</div>;
+
+		// Act
+		renderGlobalDialog();
+
+		// The component should be subscribed, so opening a dialog should work
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+	} );
+
+	it( 'should clean up subscription when component unmounts', async () => {
+		// Arrange
+		const TestDialogContent = () => <div>Test Dialog</div>;
+
+		const view = render( <GlobalDialog /> );
+		const unmount = view.unmount;
+
+		// Open dialog to verify subscription is working
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+
+		// Act - Unmount component
+		unmount();
+
+		// Try to open dialog again - should not affect the unmounted component
+		act( () => {
+			openDialog( { component: <TestDialogContent /> } );
+		} );
+
+		// Assert - No dialog should be rendered since component is unmounted
+		expect( screen.queryAllByRole( 'dialog' ) ).toHaveLength( 0 );
+	} );
+	it( 'should work with store dispatch patterns like error dialogs', async () => {
+		// Arrange - Simulate error dialog pattern from editor-global-classes
+		const ErrorDialogContent = ( {
+			modifiedLabels,
+		}: {
+			modifiedLabels: Array< { original: string; modified: string; id: string } >;
+		} ) => (
+			<div>
+				<h3>Duplicate Labels Found</h3>
+				<ul>
+					{ modifiedLabels.map( ( label ) => (
+						<li key={ label.id }>
+							{ label.original } → { label.modified }
+						</li>
+					) ) }
+				</ul>
+				<button onClick={ () => closeDialog() }>Close</button>
+			</div>
+		);
+
+		const mockModifiedLabels = [
+			{ original: 'MyClass', modified: 'DUP_MyClass', id: 'class-1' },
+			{ original: 'Button', modified: 'DUP_Button', id: 'class-2' },
+		];
+
+		renderGlobalDialog();
+
+		// Act - Simulate error dialog opening (like in show-error-dialog.tsx)
+		act( () => {
+			openDialog( {
+				component: <ErrorDialogContent modifiedLabels={ mockModifiedLabels } />,
+			} );
+		} );
+
+		// Assert
+		await waitFor( () => {
+			expect( screen.getAllByRole( 'dialog' ) ).toHaveLength( 2 );
+		} );
+		expect( screen.getByText( 'Duplicate Labels Found' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'MyClass → DUP_MyClass' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Button → DUP_Button' ) ).toBeInTheDocument();
+
+		// Test closing
+		fireEvent.click( screen.getByRole( 'button', { name: 'Close' } ) );
+
+		await waitFor( () => {
+			expect( screen.queryAllByRole( 'dialog' ) ).toHaveLength( 0 );
+		} );
+	} );
+} );

package/src/components/global-dialog/__tests__/subscribers.test.ts

@@ -0,0 +1,90 @@
+import * as React from 'react';
+import { waitFor } from '@testing-library/react';
+
+import { closeDialog, type DialogContent, openDialog, subscribeToDialogState } from '../subscribers';
+
+describe( 'subscribers', () => {
+	// Clean up state after each test
+	afterEach( () => {
+		closeDialog();
+	} );
+
+	it( 'should update state when openDialog is called', async () => {
+		// Arrange
+		const callback = jest.fn();
+		const testComponent = React.createElement( 'div', { children: 'Test' } );
+		const dialogContent: DialogContent = { component: testComponent };
+
+		subscribeToDialogState( callback );
+		callback.mockClear(); // Clear the initial call
+
+		// Act
+		openDialog( dialogContent );
+
+		// Assert
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledWith( { component: testComponent } );
+		} );
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	it( 'should reset state to null when closeDialog is called', async () => {
+		// Arrange
+		const callback = jest.fn();
+		const testComponent = React.createElement( 'div', { children: 'Test' } );
+
+		subscribeToDialogState( callback );
+		openDialog( { component: testComponent } );
+
+		// Wait for the openDialog to complete
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledWith( { component: testComponent } );
+		} );
+
+		callback.mockClear(); // Clear previous calls
+
+		// Act
+		closeDialog();
+
+		// Assert
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledWith( null );
+		} );
+		await waitFor( () => {
+			expect( callback ).toHaveBeenCalledTimes( 1 );
+		} );
+	} );
+
+	it( 'should call callback immediately with current state on subscription', () => {
+		// Arrange
+		const testComponent = React.createElement( 'div', { children: 'Test' } );
+		openDialog( { component: testComponent } );
+
+		const callback = jest.fn();
+
+		// Act
+		subscribeToDialogState( callback );
+
+		// Assert
+		expect( callback ).toHaveBeenCalledWith( { component: testComponent } );
+		expect( callback ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should unsubscribe callback when unsubscribe function is called', () => {
+		// Arrange
+		const callback = jest.fn();
+		const testComponent = React.createElement( 'div', { children: 'Test' } );
+
+		const unsubscribe = subscribeToDialogState( callback );
+		callback.mockClear(); // Clear initial call
+
+		// Act
+		unsubscribe();
+		openDialog( { component: testComponent } );
+
+		// Assert
+		expect( callback ).not.toHaveBeenCalled();
+	} );
+} );

package/src/components/global-dialog/components/global-dialog.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import * as React from 'react';
+import { Dialog } from '@elementor/ui';
+
+import ThemeProvider from '../../theme-provider';
+import { closeDialog, subscribeToDialogState } from '../subscribers';
+import { type DialogContent } from '../subscribers';
+
+export const GlobalDialog = () => {
+	const [ content, setContent ] = useState< DialogContent | null >( null );
+
+	useEffect( () => {
+		const unsubscribe = subscribeToDialogState( setContent );
+		return () => {
+			unsubscribe();
+		};
+	}, [] );
+
+	if ( ! content ) {
+		return null;
+	}
+
+	return (
+		<ThemeProvider>
+			<Dialog role="dialog" open onClose={ closeDialog } maxWidth="sm" fullWidth>
+				{ content.component }
+			</Dialog>
+		</ThemeProvider>
+	);
+};

package/src/components/global-dialog/index.ts

@@ -0,0 +1,2 @@
+export { GlobalDialog } from './components/global-dialog';
+export { openDialog, closeDialog } from './subscribers';

package/src/components/global-dialog/subscribers.ts

@@ -0,0 +1,36 @@
+import { type ReactElement } from 'react';
+
+type DialogState = {
+	component: ReactElement;
+} | null;
+
+export type DialogStateCallback = ( state: DialogState ) => void;
+
+let currentDialogState: DialogState = null;
+
+const stateSubscribers = new Set< DialogStateCallback >();
+
+export const subscribeToDialogState = ( callback: DialogStateCallback ) => {
+	stateSubscribers.add( callback );
+
+	callback( currentDialogState );
+	return () => stateSubscribers.delete( callback );
+};
+
+const notifySubscribers = () => {
+	stateSubscribers.forEach( ( callback ) => callback( currentDialogState ) );
+};
+
+export type DialogContent = {
+	component: ReactElement;
+};
+
+export const openDialog = ( { component }: DialogContent ) => {
+	currentDialogState = { component };
+	notifySubscribers();
+};
+
+export const closeDialog = () => {
+	currentDialogState = null;
+	notifySubscribers();
+};

package/src/components/menu-item.tsx

@@ -1,10 +1,25 @@
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { Infotip, MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';
+import {
+	Infotip,
+	MenuItem,
+	type MenuItemProps,
+	MenuItemText,
+	type MenuItemTextProps,
+	type TypographyProps,
+} from '@elementor/ui';
 
 import { InfoAlert } from './info-alert';
-
-export const MenuListItem = ( { children, ...props }: MenuItemProps ) => {
+type MenuListItemProps = MenuItemProps & {
+	menuItemTextProps?: MenuItemTextProps;
+	primaryTypographyProps?: TypographyProps;
+};
+export const MenuListItem = ( {
+	children,
+	menuItemTextProps,
+	primaryTypographyProps = { variant: 'caption' },
+	...props
+}: MenuListItemProps ) => {
 	return (
 		<MenuItem
 			dense
@@ -15,9 +30,8 @@ export const MenuListItem = ( { children, ...props }: MenuItemProps ) => {
 		>
 			<MenuItemText
 				primary={ children }
-				primaryTypographyProps={ {
-					variant: 'caption',
-				} }
+				primaryTypographyProps={ primaryTypographyProps }
+				{ ...menuItemTextProps }
 			/>
 		</MenuItem>
 	);

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/body.tsx

@@ -9,9 +9,10 @@ const FALLBACK_POPOVER_WIDTH = 220;
 type PopoverBodyProps = PropsWithChildren< {
 	height?: number | 'auto';
 	width?: number;
+	id?: string;
 } >;
 
-export const PopoverBody = ( { children, height = DEFAULT_POPOVER_HEIGHT, width }: PopoverBodyProps ) => {
+export const PopoverBody = ( { children, height = DEFAULT_POPOVER_HEIGHT, width, id }: PopoverBodyProps ) => {
 	return (
 		<Box
 			display="flex"
@@ -22,6 +23,7 @@ export const PopoverBody = ( { children, height = DEFAULT_POPOVER_HEIGHT, width
 				width: `${ width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH }px`,
 				maxWidth: 496,
 			} }
+			id={ id }
 		>
 			{ children }
 		</Box>

package/src/components/popover/index.ts

@@ -2,4 +2,3 @@ export { PopoverBody } from './body';
 export { PopoverHeader } from './header';
 export { ITEM_HEIGHT, PopoverMenuList, StyledMenuList } from './menu-list';
 export type { PopoverMenuListProps, VirtualizedItem } from './menu-list';
-export { PopoverSearch } from './search';