@wordpress/components 39.0.0 → 40.1.0

package/src/item-group/test/{index.js → index.jsdom.test.tsx}

@@ -1,9 +1,70 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { createPortal } from '@wordpress/element';
 import { Item, ItemGroup } from '..';
 
 describe( 'ItemGroup', () => {
 	describe( 'ItemGroup component', () => {
+		it( 'accepts an Item nested within a semantic list', () => {
+			render(
+				<ItemGroup>
+					<div>
+						<Item>Nested item</Item>
+					</div>
+				</ItemGroup>
+			);
+
+			expect( screen.getByRole( 'listitem' ) ).toHaveTextContent(
+				'Nested item'
+			);
+		} );
+
+		it( 'throws when an Item with list semantics is outside a semantic list', () => {
+			const portalContainer = document.createElement( 'div' );
+			document.body.append( portalContainer );
+
+			try {
+				expect( () =>
+					render(
+						<ItemGroup>
+							{ createPortal(
+								<Item>Portaled item</Item>,
+								portalContainer
+							) }
+						</ItemGroup>
+					)
+				).toThrow(
+					'Item with list semantics must be rendered inside an element with role="list".'
+				);
+				expect( console ).toHaveErrored();
+			} finally {
+				portalContainer.remove();
+			}
+		} );
+
+		it( 'accepts custom children', () => {
+			render(
+				<ItemGroup>
+					<div>Custom item</div>
+				</ItemGroup>
+			);
+
+			expect( screen.getByText( 'Custom item' ) ).toBeVisible();
+		} );
+
+		it( 'preserves custom roles', () => {
+			render(
+				<ItemGroup role="group">
+					<div>
+						<Item role="presentation">Custom item</Item>
+					</div>
+				</ItemGroup>
+			);
+
+			expect( screen.getByRole( 'group' ) ).toBeVisible();
+		} );
+
 		it( 'should render correctly', () => {
 			const { container } = render(
 				<ItemGroup>
@@ -66,9 +127,45 @@ describe( 'ItemGroup', () => {
 	} );
 
 	describe( 'Item', () => {
+		it( 'uses list semantics only within a list-semantic ItemGroup', () => {
+			const { rerender } = render( <Item>Standalone item</Item> );
+
+			expect( screen.queryByRole( 'listitem' ) ).not.toBeInTheDocument();
+
+			rerender(
+				<ItemGroup role="group">
+					<Item>Non-list item</Item>
+				</ItemGroup>
+			);
+
+			expect( screen.queryByRole( 'listitem' ) ).not.toBeInTheDocument();
+
+			rerender(
+				<ItemGroup>
+					<Item>Grouped item</Item>
+				</ItemGroup>
+			);
+
+			expect( screen.getByRole( 'listitem' ) ).toHaveTextContent(
+				'Grouped item'
+			);
+		} );
+
+		it( 'uses list semantics within an ItemGroup with the directory role', () => {
+			render(
+				<ItemGroup role="directory">
+					<Item>Directory item</Item>
+				</ItemGroup>
+			);
+
+			expect( screen.getByRole( 'listitem' ) ).toHaveTextContent(
+				'Directory item'
+			);
+		} );
+
 		it( 'should render as a `button` if the `onClick` handler is specified', async () => {
 			const user = userEvent.setup();
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render( <Item onClick={ spy }>Code is poetry</Item> );
 
 			const button = screen.getByRole( 'button' );
@@ -81,7 +178,7 @@ describe( 'ItemGroup', () => {
 		} );
 
 		it( 'should give priority to the `as` prop even if the `onClick` handler is specified', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			const { rerender } = render(
 				<Item onClick={ spy }>Code is poetry</Item>
 			);

package/src/item-group/types.ts

@@ -45,6 +45,10 @@ export interface ItemProps {
 }
 
 export type ItemGroupContext = {
+	/**
+	 * Whether items should use list semantics.
+	 */
+	isList: boolean;
 	/**
 	 * When true, each `Item` will be styled as an individual item (e.g. with rounded
 	 * borders), instead of being part of the same UI block with the rest of the items.

package/src/keyboard-shortcuts/stories/index.story.tsx

@@ -34,7 +34,7 @@ Default.args = {
 			{ /* eslint-disable react/no-unescaped-entities */ }
 			<p>Hit the "a" or "b" key in this textarea:</p>
 			{ /* eslint-enable react/no-unescaped-entities */ }
-			<textarea />
+			<textarea aria-label="Keyboard shortcuts demo" />
 		</div>
 	),
 };
@@ -52,7 +52,7 @@ Default.parameters = {
     <p>
       Hit the "a" or "b" key in this textarea:
     </p>
-    <textarea />
+    <textarea aria-label="Keyboard shortcuts demo" />
   </div>
 </KeyboardShortcuts>
 			`,

package/src/keyboard-shortcuts/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { createEvent, fireEvent, render, screen } from '@testing-library/react';
 import KeyboardShortcuts from '..';
 
@@ -22,7 +23,7 @@ describe( 'KeyboardShortcuts', () => {
 	}
 
 	it( 'should capture key events', async () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		render(
 			<KeyboardShortcuts
@@ -38,7 +39,7 @@ describe( 'KeyboardShortcuts', () => {
 	} );
 
 	it( 'should capture key events globally', () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		render(
 			<div>
@@ -58,7 +59,7 @@ describe( 'KeyboardShortcuts', () => {
 	} );
 
 	it( 'should capture key events on specific event', () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		render(
 			<div>
@@ -78,7 +79,7 @@ describe( 'KeyboardShortcuts', () => {
 	} );
 
 	it( 'should capture key events on children', () => {
-		const spy = jest.fn();
+		const spy = vi.fn();
 
 		render(
 			<div>

package/src/menu/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,8 +1,18 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import { Menu } from '..';
 import Modal from '../../modal';
+globalThis.wpVitest.mockCSSSupports();
+globalThis.wpVitest.mockScrollIntoView();
+globalThis.wpVitest.mockVisibleElements();
 
 const waitForFocusedMenu = () =>
 	waitFor( () => expect( screen.getByRole( 'menu' ) ).toHaveFocus() );
@@ -30,7 +40,7 @@ const isBodyScrollLocked = () =>
 	document.body.classList.contains( 'modal-open' );
 
 const resetTypeahead = () => {
-	act( () => jest.advanceTimersByTime( 500 ) );
+	act( () => vi.advanceTimersByTime( 500 ) );
 };
 
 const MenuWithModal = ( { nested = false }: { nested?: boolean } ) => {
@@ -443,7 +453,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should use a `hideOnClick` callback to decide whether to close', async () => {
-			const hideOnClick = jest.fn( () => false );
+			const hideOnClick = vi.fn( () => false );
 			render(
 				<Menu defaultOpen>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
@@ -462,7 +472,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should close when a `hideOnClick` callback returns `true`', async () => {
-			const hideOnClick = jest.fn( () => true );
+			const hideOnClick = vi.fn( () => true );
 			render(
 				<Menu defaultOpen>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
@@ -755,7 +765,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should check radio items and keep the menu open when clicking (controlled)', async () => {
-			const onRadioValueChangeSpy = jest.fn();
+			const onRadioValueChangeSpy = vi.fn();
 
 			const ControlledRadioGroup = () => {
 				const [ radioValue, setRadioValue ] = useState( 'two' );
@@ -843,7 +853,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should check radio items and keep the menu open when clicking (uncontrolled)', async () => {
-			const onRadioValueChangeSpy = jest.fn();
+			const onRadioValueChangeSpy = vi.fn();
 			render(
 				<Menu>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
@@ -923,7 +933,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should check checkbox items and keep the menu open when clicking (controlled)', async () => {
-			const onCheckboxValueChangeSpy = jest.fn();
+			const onCheckboxValueChangeSpy = vi.fn();
 
 			const ControlledRadioGroup = () => {
 				const [ itemOneChecked, setItemOneChecked ] =
@@ -1055,7 +1065,7 @@ describe( 'Menu', () => {
 		} );
 
 		it( 'should check checkbox items and keep the menu open when clicking (uncontrolled)', async () => {
-			const onCheckboxValueChangeSpy = jest.fn();
+			const onCheckboxValueChangeSpy = vi.fn();
 
 			render(
 				<Menu>
@@ -1239,7 +1249,7 @@ describe( 'Menu', () => {
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the Menu to close.
 			await user.tab();
-			expect( outerButton ).toHaveFocus();
+			await waitFor( () => expect( outerButton ).toHaveFocus() );
 			await waitFor( () =>
 				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
 			);
@@ -1365,15 +1375,8 @@ describe( 'Menu', () => {
 	} );
 
 	describe( 'typeahead', () => {
-		beforeEach( () => {
-			jest.useFakeTimers();
-			user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
-		} );
-
 		afterEach( () => {
-			jest.useRealTimers();
+			vi.useRealTimers();
 		} );
 
 		it( 'should highlight matching item', async () => {
@@ -1394,9 +1397,17 @@ describe( 'Menu', () => {
 				} )
 			);
 			await waitForFocusedMenu();
+			vi.useFakeTimers();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await user.keyboard( 'tw' );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), {
+				code: 'KeyT',
+				key: 't',
+			} );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), {
+				code: 'KeyW',
+				key: 'w',
+			} );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();
@@ -1405,7 +1416,18 @@ describe( 'Menu', () => {
 			resetTypeahead();
 
 			// Type "on", it should match and focus the item with content "One"
-			await user.keyboard( 'on' );
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'Two' } ),
+				{
+					key: 'o',
+				}
+			);
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'Two' } ),
+				{
+					key: 'n',
+				}
+			);
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
@@ -1429,16 +1451,20 @@ describe( 'Menu', () => {
 				} )
 			);
 			await waitForFocusedMenu();
+			vi.useFakeTimers();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
-			await user.keyboard( 'abc' );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'a' } );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'b' } );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'c' } );
 			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 
 			// Reset the typeahead search so the next keystrokes start a new query.
 			resetTypeahead();
 
 			// Type "on", it should match and focus the item with content "One"
-			await user.keyboard( 'on' );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'o' } );
+			fireEvent.keyDown( screen.getByRole( 'menu' ), { key: 'n' } );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
@@ -1447,7 +1473,18 @@ describe( 'Menu', () => {
 			resetTypeahead();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
-			await user.keyboard( 'abc' );
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 'a' }
+			);
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 'b' }
+			);
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 'c' }
+			);
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
@@ -1456,7 +1493,14 @@ describe( 'Menu', () => {
 			resetTypeahead();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await user.keyboard( 'tw' );
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 't' }
+			);
+			fireEvent.keyDown(
+				screen.getByRole( 'menuitem', { name: 'One' } ),
+				{ key: 'w' }
+			);
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();

package/src/menu-group/stories/index.story.tsx

@@ -3,6 +3,7 @@ import { useState } from '@wordpress/element';
 import MenuGroup from '..';
 import MenuItem from '../../menu-item';
 import MenuItemsChoice from '../../menu-items-choice';
+import { NavigableMenu } from '../../navigable-container';
 
 const meta: Meta< typeof MenuGroup > = {
 	tags: [ 'manifest' ],
@@ -26,10 +27,12 @@ export default meta;
 
 const Template: StoryFn< typeof MenuGroup > = ( args ) => {
 	return (
-		<MenuGroup { ...args }>
-			<MenuItem>Menu Item 1</MenuItem>
-			<MenuItem>Menu Item 2</MenuItem>
-		</MenuGroup>
+		<NavigableMenu>
+			<MenuGroup { ...args }>
+				<MenuItem>Menu Item 1</MenuItem>
+				<MenuItem>Menu Item 2</MenuItem>
+			</MenuGroup>
+		</NavigableMenu>
 	);
 };
 
@@ -49,7 +52,7 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 	];
 
 	return (
-		<>
+		<NavigableMenu>
 			<MenuGroup label="View">
 				<MenuItem>Top Toolbar</MenuItem>
 				<MenuItem>Spotlight Mode</MenuItem>
@@ -63,7 +66,7 @@ const MultiGroupsTemplate: StoryFn< typeof MenuGroup > = ( args ) => {
 					onHover={ () => {} }
 				/>
 			</MenuGroup>
-		</>
+		</NavigableMenu>
 	);
 };
 

package/src/menu-group/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { MenuGroup } from '../';
 

package/src/menu-item/stories/index.story.tsx

@@ -3,6 +3,7 @@ import { link, more, check } from '@wordpress/icons';
 import MenuGroup from '../../menu-group';
 import MenuItem from '..';
 import Shortcut from '../../shortcut';
+import { NavigableMenu } from '../../navigable-container';
 
 const meta: Meta< typeof MenuItem > = {
 	tags: [ 'manifest' ],
@@ -37,9 +38,11 @@ export default meta;
 
 const Template: StoryFn< typeof MenuItem > = ( props ) => {
 	return (
-		<MenuGroup>
-			<MenuItem { ...props }>Menu Item 1</MenuItem>
-		</MenuGroup>
+		<NavigableMenu>
+			<MenuGroup>
+				<MenuItem { ...props }>Menu Item 1</MenuItem>
+			</MenuGroup>
+		</NavigableMenu>
 	);
 };
 

package/src/menu-item/test/__snapshots__/{index.js.snap → index.jsdom.test.tsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`MenuItem should match snapshot when all props provided 1`] = `
+exports[`MenuItem > should match snapshot when all props provided 1`] = `
 <button
   aria-checked="true"
   class="components-button components-menu-item__button my-class is-compact"
@@ -34,7 +34,7 @@ exports[`MenuItem should match snapshot when all props provided 1`] = `
 </button>
 `;
 
-exports[`MenuItem should match snapshot when info is provided 1`] = `
+exports[`MenuItem > should match snapshot when info is provided 1`] = `
 <button
   class="components-button components-menu-item__button is-compact"
   role="menuitem"
@@ -61,7 +61,7 @@ exports[`MenuItem should match snapshot when info is provided 1`] = `
 </button>
 `;
 
-exports[`MenuItem should match snapshot when isSelected and role are optionally provided 1`] = `
+exports[`MenuItem > should match snapshot when isSelected and role are optionally provided 1`] = `
 <button
   class="components-button components-menu-item__button my-class is-compact"
   role="menuitem"
@@ -94,7 +94,7 @@ exports[`MenuItem should match snapshot when isSelected and role are optionally
 </button>
 `;
 
-exports[`MenuItem should match snapshot when only label provided 1`] = `
+exports[`MenuItem > should match snapshot when only label provided 1`] = `
 <button
   class="components-button components-menu-item__button is-compact"
   role="menuitem"

package/src/menu-item/test/{index.js → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { more } from '@wordpress/icons';
 import MenuItem from '../';

package/src/menu-items-choice/stories/index.story.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryFn } from '@storybook/react-vite';
 import { useState } from '@wordpress/element';
 import MenuItemsChoice from '..';
 import MenuGroup from '../../menu-group';
+import { NavigableMenu } from '../../navigable-container';
 
 const meta: Meta< typeof MenuItemsChoice > = {
 	tags: [ 'manifest' ],
@@ -35,17 +36,19 @@ const Template: StoryFn< typeof MenuItemsChoice > = ( {
 	const [ choice, setChoice ] = useState( choices[ 0 ]?.value ?? '' );
 
 	return (
-		<MenuGroup label="Editor">
-			<MenuItemsChoice
-				choices={ choices }
-				value={ choice }
-				onSelect={ ( ...selectArgs ) => {
-					onSelect( ...selectArgs );
-					setChoice( ...selectArgs );
-				} }
-				onHover={ onHover }
-			/>
-		</MenuGroup>
+		<NavigableMenu>
+			<MenuGroup label="Editor">
+				<MenuItemsChoice
+					choices={ choices }
+					value={ choice }
+					onSelect={ ( ...selectArgs ) => {
+						onSelect( ...selectArgs );
+						setChoice( ...selectArgs );
+					} }
+					onHover={ onHover }
+				/>
+			</MenuGroup>
+		</NavigableMenu>
 	);
 };
 

package/src/modal/index.tsx

@@ -195,6 +195,7 @@ function UnforwardedModal(
 			! event.defaultPrevented
 		) {
 			event.preventDefault();
+			event.stopPropagation();
 			closeModal().then( () => onRequestClose( event ) );
 		}
 	}

package/src/modal/test/{aria-helper.ts → aria-helper.jsdom.test.ts}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { elementShouldBeHidden } from '../aria-helper';
 
 describe( 'aria-helper', () => {

package/src/modal/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useEffect, useState } from '@wordpress/element';
@@ -7,6 +8,9 @@ import {
 } from '@wordpress/ui';
 import Modal from '../';
 import type { ModalProps } from '../types';
+globalThis.wpVitest.mockCSSSupports();
+globalThis.wpVitest.mockMatchMedia();
+globalThis.wpVitest.mockVisibleElements();
 
 const noop = () => {};
 
@@ -72,7 +76,7 @@ describe( 'Modal', () => {
 
 	it( 'should call onRequestClose when the escape key is pressed', async () => {
 		const user = userEvent.setup();
-		const onRequestClose = jest.fn();
+		const onRequestClose = vi.fn();
 		render(
 			<Modal onRequestClose={ onRequestClose }>
 				<p>Modal content</p>
@@ -82,6 +86,25 @@ describe( 'Modal', () => {
 		expect( onRequestClose ).toHaveBeenCalled();
 	} );
 
+	it( 'should stop an Escape key press from propagating when it dismisses the modal', async () => {
+		const user = userEvent.setup();
+		const documentKeyDownHandler = vi.fn();
+		document.addEventListener( 'keydown', documentKeyDownHandler );
+
+		try {
+			render(
+				<Modal onRequestClose={ noop }>
+					<p>Modal content</p>
+				</Modal>
+			);
+
+			await user.keyboard( '[Escape]' );
+			expect( documentKeyDownHandler ).not.toHaveBeenCalled();
+		} finally {
+			document.removeEventListener( 'keydown', documentKeyDownHandler );
+		}
+	} );
+
 	it( 'should return focus when dismissed by clicking outside', async () => {
 		const user = userEvent.setup();
 		const ReturnDemo = () => {
@@ -112,7 +135,7 @@ describe( 'Modal', () => {
 
 	it( 'should request closing of any non nested modal when opened', async () => {
 		const user = userEvent.setup();
-		const onRequestClose = jest.fn();
+		const onRequestClose = vi.fn();
 
 		const DismissAdjacent = () => {
 			const [ isShown, setIsShown ] = useState( false );
@@ -137,7 +160,7 @@ describe( 'Modal', () => {
 
 	it( 'should support nested modals', async () => {
 		const user = userEvent.setup();
-		const onRequestClose = jest.fn();
+		const onRequestClose = vi.fn();
 
 		const NestSupport = () => {
 			const [ isShown, setIsShown ] = useState( false );
@@ -162,7 +185,7 @@ describe( 'Modal', () => {
 
 	it( 'should request closing of nested modal when outer modal unmounts', async () => {
 		const user = userEvent.setup();
-		const onRequestClose = jest.fn();
+		const onRequestClose = vi.fn();
 
 		const RequestCloseOfNested = () => {
 			const [ isShown, setIsShown ] = useState( true );