@wordpress/components 35.0.0 → 35.1.1-next.v.202606191442.0

package/src/menu/test/index.tsx

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { render, screen, waitFor } from '@testing-library/react';
-import { press, click, hover, type } from '@ariakit/test';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -14,10 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import { Menu } from '..';
 
-const delay = ( delayInMs: number ) => {
-	return new Promise( ( resolve ) => setTimeout( resolve, delayInMs ) );
-};
-
 const waitForFocusedMenu = () =>
 	waitFor( () => expect( screen.getByRole( 'menu' ) ).toHaveFocus() );
 
@@ -26,10 +22,36 @@ const waitForFocusedMenuItem = ( name: string ) =>
 		expect( screen.getByRole( 'menuitem', { name } ) ).toHaveFocus()
 	);
 
+const resetTypeahead = () => {
+	act( () => jest.advanceTimersByTime( 500 ) );
+};
+
 // Open dropdown => open menu
 // Submenu trigger item => open submenu
 
 describe( 'Menu', () => {
+	let user: ReturnType< typeof userEvent.setup >;
+	let originalGetClientRects: () => DOMRectList;
+
+	beforeAll( () => {
+		// Code that considers focusability considers rects in whether the
+		// element is visible, but since jsdom does not simulate layout, we
+		// need to fake it. This should ideally be a global test mock to
+		// faithfully emulate a true browser environment.
+		originalGetClientRects = window.Element.prototype.getClientRects;
+		window.Element.prototype.getClientRects = jest.fn(
+			() => [ { width: 1, height: 1 } ] as unknown as DOMRectList
+		);
+	} );
+
+	afterAll( () => {
+		window.Element.prototype.getClientRects = originalGetClientRects;
+	} );
+
+	beforeEach( () => {
+		user = userEvent.setup();
+	} );
+
 	// See https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 	it( 'should follow the WAI-ARIA spec', async () => {
 		render(
@@ -58,7 +80,7 @@ describe( 'Menu', () => {
 		expect( toggleButton ).toHaveAttribute( 'aria-haspopup', 'menu' );
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'false' );
 
-		await click( toggleButton );
+		await user.click( toggleButton );
 
 		expect( toggleButton ).toHaveAttribute( 'aria-expanded', 'true' );
 
@@ -82,7 +104,7 @@ describe( 'Menu', () => {
 		expect( submenuTrigger ).toHaveAttribute( 'aria-haspopup', 'menu' );
 		expect( submenuTrigger ).toHaveAttribute( 'aria-expanded', 'false' );
 
-		await hover( submenuTrigger );
+		await user.hover( submenuTrigger );
 
 		// Wait for the open animation after hovering
 		await waitFor( () =>
@@ -119,7 +141,7 @@ describe( 'Menu', () => {
 			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
 
 			// Click to open the menu
-			await click( toggleButton );
+			await user.click( toggleButton );
 
 			// Menu open, focus is on the menu wrapper
 			await waitForFocusedMenu();
@@ -142,14 +164,14 @@ describe( 'Menu', () => {
 			} );
 
 			// Move focus on the toggle
-			await press.Tab();
+			await user.tab();
 
 			expect( toggleButton ).toHaveFocus();
 
 			// Menu closed
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 
 			// Menu open, focus is on the first focusable item
 			// (disabled items are still focusable and accessible)
@@ -173,16 +195,16 @@ describe( 'Menu', () => {
 			} );
 
 			// Move focus on the toggle
-			await press.Tab();
+			await user.tab();
 
 			expect( toggleButton ).toHaveFocus();
 
 			// Menu closed
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
-			// Keyboard-triggered clicks have `detail: 0`, which Ariakit uses to
-			// distinguish keyboard activation from pointer activation.
-			await press.Space( toggleButton, { detail: 0 } );
+			// Use keyboard activation so the synthetic click has `detail: 0`,
+			// which Ariakit uses to distinguish it from pointer activation.
+			await user.keyboard( ' ' );
 
 			await waitFor( () =>
 				expect( toggleButton ).toHaveAttribute(
@@ -207,16 +229,18 @@ describe( 'Menu', () => {
 				name: 'Open dropdown',
 			} );
 
-			await click( trigger );
+			await user.click( trigger );
 
 			// Focuses menu on mouse click, focuses first item on keyboard press
 			// Can be changed with a custom useEffect
 			await waitForFocusedMenu();
 
 			// Pressing esc will close the menu and move focus to the toggle
-			await press.Escape();
+			await user.keyboard( '{Escape}' );
 
-			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
+			);
 
 			await waitFor( () =>
 				expect(
@@ -238,9 +262,11 @@ describe( 'Menu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Click on the body (ie. outside of the dropdown menu)
-			await click( document.body );
+			await user.click( document.body );
 
-			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
+			);
 		} );
 
 		it( 'should close when clicking on a menu item', async () => {
@@ -256,9 +282,11 @@ describe( 'Menu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Clicking a menu item will close the menu
-			await click( screen.getByRole( 'menuitem' ) );
+			await user.click( screen.getByRole( 'menuitem' ) );
 
-			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
+			);
 		} );
 
 		it( 'should not close when clicking on a menu item when the `hideOnClick` prop is set to `false`', async () => {
@@ -274,7 +302,7 @@ describe( 'Menu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeVisible();
 
 			// Clicking a menu item will close the menu
-			await click( screen.getByRole( 'menuitem' ) );
+			await user.click( screen.getByRole( 'menuitem' ) );
 
 			expect( screen.getByRole( 'menu' ) ).toBeVisible();
 		} );
@@ -292,7 +320,7 @@ describe( 'Menu', () => {
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 
 			// Clicking a disabled menu item won't close the menu
-			await click( screen.getByRole( 'menuitem' ) );
+			await user.click( screen.getByRole( 'menuitem' ) );
 
 			expect( screen.getByRole( 'menu' ) ).toBeInTheDocument();
 		} );
@@ -325,7 +353,7 @@ describe( 'Menu', () => {
 				} )
 			).not.toBeInTheDocument();
 
-			await hover(
+			await user.hover(
 				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
 			);
 
@@ -358,57 +386,53 @@ describe( 'Menu', () => {
 				</Menu>
 			);
 
-			// The menu is focused automatically when `defaultOpen` is set.
-			await waitForFocusedMenu();
+			// The first menu item is focused automatically when `defaultOpen` is
+			// set and jsdom reports visible elements as focusable.
+			await waitForFocusedMenuItem( 'Menu item 1' );
 
 			// Arrow up/down selects menu items
 			// The selection wraps around from last to first and viceversa
-			await press.ArrowDown();
-			expect(
-				screen.getByRole( 'menuitem', { name: 'Menu item 1' } )
-			).toHaveFocus();
-
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Menu item 2' } )
 			).toHaveFocus();
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
 			).toHaveFocus();
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Menu item 3' } )
 			).toHaveFocus();
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Menu item 1' } )
 			).toHaveFocus();
 
-			await press.ArrowUp();
+			await user.keyboard( '{ArrowUp}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Menu item 3' } )
 			).toHaveFocus();
 
-			await press.ArrowUp();
+			await user.keyboard( '{ArrowUp}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Submenu trigger item' } )
 			).toHaveFocus();
 
 			// Arrow right/left can be used to enter/leave submenus
 			// (focus crosses menu contexts, so wait for it to settle)
-			await press.ArrowRight();
+			await user.keyboard( '{ArrowRight}' );
 			await waitForFocusedMenuItem( 'Submenu item 1' );
 
-			await press.ArrowDown();
+			await user.keyboard( '{ArrowDown}' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Submenu item 2' } )
 			).toHaveFocus();
 
-			await press.ArrowLeft();
+			await user.keyboard( '{ArrowLeft}' );
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Submenu trigger item',
@@ -416,20 +440,20 @@ describe( 'Menu', () => {
 			).toHaveFocus();
 
 			// Spacebar or enter key can also be used to enter a submenu
-			await press.Enter();
+			await user.keyboard( '{Enter}' );
 			await waitForFocusedMenuItem( 'Submenu item 1' );
 
-			await press.ArrowLeft();
+			await user.keyboard( '{ArrowLeft}' );
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Submenu trigger item',
 				} )
 			).toHaveFocus();
 
-			await press.Space();
+			await user.keyboard( ' ' );
 			await waitForFocusedMenuItem( 'Submenu item 1' );
 
-			await press.ArrowLeft();
+			await user.keyboard( '{ArrowLeft}' );
 			expect(
 				screen.getByRole( 'menuitem', {
 					name: 'Submenu trigger item',
@@ -478,7 +502,7 @@ describe( 'Menu', () => {
 			render( <ControlledRadioGroup /> );
 
 			// Open dropdown
-			await click(
+			await user.click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -492,7 +516,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click first radio item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
@@ -509,7 +533,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click second radio item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
@@ -558,7 +582,7 @@ describe( 'Menu', () => {
 			);
 
 			// Open dropdown
-			await click(
+			await user.click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -572,7 +596,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click first radio item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item one' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 1 );
@@ -589,7 +613,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click second radio item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemradio', { name: 'Radio item two' } )
 			);
 			expect( onRadioValueChangeSpy ).toHaveBeenCalledTimes( 2 );
@@ -658,7 +682,7 @@ describe( 'Menu', () => {
 			render( <ControlledRadioGroup /> );
 
 			// Open dropdown
-			await click(
+			await user.click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -678,7 +702,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click first checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item one',
 				} )
@@ -698,7 +722,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -718,7 +742,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -778,7 +802,7 @@ describe( 'Menu', () => {
 			);
 
 			// Open dropdown
-			await click(
+			await user.click(
 				screen.getByRole( 'button', { name: 'Open dropdown' } )
 			);
 
@@ -798,7 +822,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click first checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item one',
 				} )
@@ -818,7 +842,7 @@ describe( 'Menu', () => {
 			).toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -838,7 +862,7 @@ describe( 'Menu', () => {
 			).not.toBeChecked();
 
 			// Click second checkbox item, make sure that the callback fires
-			await click(
+			await user.click(
 				screen.getByRole( 'menuitemcheckbox', {
 					name: 'Checkbox item two',
 				} )
@@ -874,7 +898,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -904,7 +928,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -922,9 +946,11 @@ describe( 'Menu', () => {
 
 			// The outer button can be focused by pressing tab. Doing so will cause
 			// the Menu to close.
-			await press.Tab();
+			await user.tab();
 			expect( outerButton ).toBeVisible();
-			expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument();
+			await waitFor( () =>
+				expect( screen.queryByRole( 'menu' ) ).not.toBeInTheDocument()
+			);
 		} );
 	} );
 
@@ -942,7 +968,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -969,7 +995,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1000,7 +1026,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1031,7 +1057,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1047,6 +1073,17 @@ describe( 'Menu', () => {
 	} );
 
 	describe( 'typeahead', () => {
+		beforeEach( () => {
+			jest.useFakeTimers();
+			user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+		} );
+
+		afterEach( () => {
+			jest.useRealTimers();
+		} );
+
 		it( 'should highlight matching item', async () => {
 			render(
 				<Menu>
@@ -1059,7 +1096,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1067,17 +1104,16 @@ describe( 'Menu', () => {
 			await waitForFocusedMenu();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await type( 'tw' );
+			await user.keyboard( 'tw' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();
 
-			// Wait for the typeahead timer to reset and interpret
-			// the next keystrokes as a new search
-			await delay( 500 );
+			// 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 type( 'on' );
+			await user.keyboard( 'on' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
@@ -1095,7 +1131,7 @@ describe( 'Menu', () => {
 			);
 
 			// Click to open the menu
-			await click(
+			await user.click(
 				screen.getByRole( 'button', {
 					name: 'Open dropdown',
 				} )
@@ -1103,35 +1139,32 @@ describe( 'Menu', () => {
 			await waitForFocusedMenu();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
-			await type( 'abc' );
+			await user.keyboard( 'abc' );
 			expect( screen.getByRole( 'menu' ) ).toHaveFocus();
 
-			// Wait for the typeahead timer to reset and interpret
-			// the next keystrokes as a new search
-			await delay( 500 );
+			// 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 type( 'on' );
+			await user.keyboard( 'on' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
 
-			// Wait for the typeahead timer to reset and interpret
-			// the next keystrokes as a new search
-			await delay( 500 );
+			// Reset the typeahead search so the next keystrokes start a new query.
+			resetTypeahead();
 
 			// Type a string that doesn't match any items. Focus shouldn't move.
-			await type( 'abc' );
+			await user.keyboard( 'abc' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'One' } )
 			).toHaveFocus();
 
-			// Wait for the typeahead timer to reset and interpret
-			// the next keystrokes as a new search
-			await delay( 500 );
+			// Reset the typeahead search so the next keystrokes start a new query.
+			resetTypeahead();
 
 			// Type "tw", it should match and focus the item with content "Two"
-			await type( 'tw' );
+			await user.keyboard( 'tw' );
 			expect(
 				screen.getByRole( 'menuitem', { name: 'Two' } )
 			).toHaveFocus();

package/src/menu/types.ts

@@ -258,7 +258,7 @@ export interface CheckboxItemProps {
 	 * The checked state of the checkbox menu item when it is initially rendered.
 	 * Use when not wanting to control its checked state.
 	 *
-	 * Note: this prop will be overriden by the `checked` prop, if it is defined.
+	 * Note: this prop will be overridden by the `checked` prop, if it is defined.
 	 */
 	defaultChecked?: Ariakit.MenuItemCheckboxProps[ 'defaultChecked' ];
 	/**
@@ -321,7 +321,7 @@ export interface RadioItemProps {
 	 * The checked state of the radio menu item when it is initially rendered.
 	 * Use when not wanting to control its checked state.
 	 *
-	 * Note: this prop will be overriden by the `checked` prop, if it is defined.
+	 * Note: this prop will be overridden by the `checked` prop, if it is defined.
 	 */
 	defaultChecked?: Ariakit.MenuItemRadioProps[ 'defaultChecked' ];
 	/**

package/src/modal/style.scss

@@ -217,7 +217,7 @@
 	}
 
 	.components-modal__content.has-scrolled-content:not(.hide-header) & {
-		border-bottom-color: $gray-300;
+		border-bottom-color: var(--wpds-color-stroke-surface-neutral);
 	}
 
 	& + p {

package/src/modal/use-modal-exit-animation.ts

@@ -14,8 +14,8 @@ import { CONFIG } from '../utils';
  * Milliseconds used as a fallback when racing `animationend` against a timeout.
  *
  * Sourced from `CONFIG.transitionDuration`. This value is implicitly coupled to
- * the modal frame’s CSS `animation-duration` in `style.scss`, which uses
- * `var(--wpds-motion-duration-md)`. If either the token, the SCSS, or
+ * the modal frame’s CSS `animation-duration` in `style.scss`, which uses the
+ * WPDS `motion-duration-md` token. If either the token, the SCSS, or
  * `CONFIG.transitionDuration` changes, keep them aligned so exit timing stays correct.
  */
 const FRAME_ANIMATION_DURATION_MS = Number.parseInt(