@wordpress/components 26.0.1-next.5a1d1283.0 → 26.0.1

package/src/composite/legacy/test/index.tsx

@@ -0,0 +1,579 @@
+/**
+ * External dependencies
+ */
+import { queryByAttribute, render, screen } from '@testing-library/react';
+import { press, waitFor } from '@ariakit/test';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Composite,
+	CompositeGroup,
+	CompositeItem,
+	useCompositeState,
+} from '..';
+
+// This is necessary because of how Ariakit calculates page up and
+// page down. Without this, nothing has a height, and so paging up
+// and down doesn't behave as expected in tests.
+
+let clientHeightSpy: jest.SpiedGetter<
+	typeof HTMLElement.prototype.clientHeight
+>;
+
+beforeAll( () => {
+	clientHeightSpy = jest
+		.spyOn( HTMLElement.prototype, 'clientHeight', 'get' )
+		.mockImplementation( function getClientHeight( this: HTMLElement ) {
+			if ( this.tagName === 'BODY' ) {
+				return window.outerHeight;
+			}
+			return 50;
+		} );
+} );
+
+afterAll( () => {
+	clientHeightSpy?.mockRestore();
+} );
+
+type InitialState = Parameters< typeof useCompositeState >[ 0 ];
+type CompositeState = ReturnType< typeof useCompositeState >;
+type CompositeStateProps = CompositeState | { state: CompositeState };
+
+async function renderAndValidate( ...args: Parameters< typeof render > ) {
+	const view = render( ...args );
+	await waitFor( () => {
+		const activeButton = queryByAttribute(
+			'data-active-item',
+			view.baseElement,
+			''
+		);
+		expect( activeButton ).not.toBeNull();
+	} );
+	return view;
+}
+
+function getKeys( rtl: boolean ) {
+	return {
+		previous: rtl ? 'ArrowRight' : 'ArrowLeft',
+		next: rtl ? 'ArrowLeft' : 'ArrowRight',
+		first: rtl ? 'End' : 'Home',
+		last: rtl ? 'Home' : 'End',
+	};
+}
+
+function OneDimensionalTest( props: CompositeStateProps ) {
+	return (
+		<Composite
+			{ ...props }
+			aria-label={ expect.getState().currentTestName }
+		>
+			<CompositeItem { ...props }>Item 1</CompositeItem>
+			<CompositeItem { ...props }>Item 2</CompositeItem>
+			<CompositeItem { ...props }>Item 3</CompositeItem>
+		</Composite>
+	);
+}
+
+function getOneDimensionalItems() {
+	return {
+		item1: screen.getByText( 'Item 1' ),
+		item2: screen.getByText( 'Item 2' ),
+		item3: screen.getByText( 'Item 3' ),
+	};
+}
+
+function TwoDimensionalTest( props: CompositeStateProps ) {
+	return (
+		<Composite
+			{ ...props }
+			aria-label={ expect.getState().currentTestName }
+		>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item A1</CompositeItem>
+				<CompositeItem { ...props }>Item A2</CompositeItem>
+				<CompositeItem { ...props }>Item A3</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item B1</CompositeItem>
+				<CompositeItem { ...props }>Item B2</CompositeItem>
+				<CompositeItem { ...props }>Item B3</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item C1</CompositeItem>
+				<CompositeItem { ...props }>Item C2</CompositeItem>
+				<CompositeItem { ...props }>Item C3</CompositeItem>
+			</CompositeGroup>
+		</Composite>
+	);
+}
+
+function getTwoDimensionalItems() {
+	return {
+		itemA1: screen.getByText( 'Item A1' ),
+		itemA2: screen.getByText( 'Item A2' ),
+		itemA3: screen.getByText( 'Item A3' ),
+		itemB1: screen.getByText( 'Item B1' ),
+		itemB2: screen.getByText( 'Item B2' ),
+		itemB3: screen.getByText( 'Item B3' ),
+		itemC1: screen.getByText( 'Item C1' ),
+		itemC2: screen.getByText( 'Item C2' ),
+		itemC3: screen.getByText( 'Item C3' ),
+	};
+}
+
+function ShiftTest( props: CompositeStateProps ) {
+	return (
+		<Composite
+			{ ...props }
+			aria-label={ expect.getState().currentTestName }
+		>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item A1</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item B1</CompositeItem>
+				<CompositeItem { ...props }>Item B2</CompositeItem>
+			</CompositeGroup>
+			<CompositeGroup role="row" { ...props }>
+				<CompositeItem { ...props }>Item C1</CompositeItem>
+				<CompositeItem { ...props } disabled>
+					Item C2
+				</CompositeItem>
+			</CompositeGroup>
+		</Composite>
+	);
+}
+
+function getShiftTestItems() {
+	return {
+		itemA1: screen.getByText( 'Item A1' ),
+		itemB1: screen.getByText( 'Item B1' ),
+		itemB2: screen.getByText( 'Item B2' ),
+		itemC1: screen.getByText( 'Item C1' ),
+		itemC2: screen.getByText( 'Item C2' ),
+	};
+}
+
+describe.each( [
+	[
+		'With "spread" state',
+		( initialState?: InitialState ) => useCompositeState( initialState ),
+	],
+	[
+		'With `state` prop',
+		( initialState?: InitialState ) => ( {
+			state: useCompositeState( initialState ),
+		} ),
+	],
+] )( '%s', ( __, useProps ) => {
+	test( 'Renders as a single tab stop', async () => {
+		const Test = () => (
+			<>
+				<button>Before</button>
+				<OneDimensionalTest { ...useProps() } />
+				<button>After</button>
+			</>
+		);
+		renderAndValidate( <Test /> );
+
+		await press.Tab();
+		expect( screen.getByText( 'Before' ) ).toHaveFocus();
+		await press.Tab();
+		expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
+		await press.Tab();
+		expect( screen.getByText( 'After' ) ).toHaveFocus();
+		await press.ShiftTab();
+		expect( screen.getByText( 'Item 1' ) ).toHaveFocus();
+	} );
+
+	test( 'Excludes disabled items', async () => {
+		const Test = () => {
+			const props = useProps();
+			return (
+				<Composite
+					{ ...props }
+					aria-label={ expect.getState().currentTestName }
+				>
+					<CompositeItem { ...props }>Item 1</CompositeItem>
+					<CompositeItem { ...props } disabled>
+						Item 2
+					</CompositeItem>
+					<CompositeItem { ...props }>Item 3</CompositeItem>
+				</Composite>
+			);
+		};
+		renderAndValidate( <Test /> );
+
+		const { item1, item2, item3 } = getOneDimensionalItems();
+
+		expect( item2 ).toBeDisabled();
+
+		await press.Tab();
+		expect( item1 ).toHaveFocus();
+		await press.ArrowDown();
+		expect( item2 ).not.toHaveFocus();
+		expect( item3 ).toHaveFocus();
+	} );
+
+	test( 'Includes focusable disabled items', async () => {
+		const Test = () => {
+			const props = useProps();
+			return (
+				<Composite
+					{ ...props }
+					aria-label={ expect.getState().currentTestName }
+				>
+					<CompositeItem { ...props }>Item 1</CompositeItem>
+					<CompositeItem { ...props } disabled focusable>
+						Item 2
+					</CompositeItem>
+					<CompositeItem { ...props }>Item 3</CompositeItem>
+				</Composite>
+			);
+		};
+		renderAndValidate( <Test /> );
+		const { item1, item2, item3 } = getOneDimensionalItems();
+
+		expect( item2 ).toBeEnabled();
+		expect( item2 ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		await press.Tab();
+		expect( item1 ).toHaveFocus();
+		await press.ArrowDown();
+		expect( item2 ).toHaveFocus();
+		expect( item3 ).not.toHaveFocus();
+	} );
+
+	test( 'Supports `baseId`', async () => {
+		const Test = () => (
+			<OneDimensionalTest
+				{ ...useProps( {
+					baseId: 'test-id',
+				} ) }
+			/>
+		);
+		renderAndValidate( <Test /> );
+		const { item1, item2, item3 } = getOneDimensionalItems();
+
+		expect( item1.id ).toMatch( 'test-id-1' );
+		expect( item2.id ).toMatch( 'test-id-2' );
+		expect( item3.id ).toMatch( 'test-id-3' );
+	} );
+
+	test( 'Supports `currentId`', async () => {
+		const Test = () => (
+			<OneDimensionalTest
+				{ ...useProps( {
+					baseId: 'test-id',
+					currentId: 'test-id-2',
+				} ) }
+			/>
+		);
+		renderAndValidate( <Test /> );
+		const { item2 } = getOneDimensionalItems();
+
+		await press.Tab();
+		expect( item2 ).toHaveFocus();
+	} );
+} );
+
+describe.each( [
+	[ 'When LTR', false ],
+	[ 'When RTL', true ],
+] )( '%s', ( _when, rtl ) => {
+	const { previous, next, first, last } = getKeys( rtl );
+
+	function useOneDimensionalTest( initialState?: InitialState ) {
+		const Test = () => (
+			<OneDimensionalTest
+				state={ useCompositeState( { rtl, ...initialState } ) }
+			/>
+		);
+		renderAndValidate( <Test /> );
+		return getOneDimensionalItems();
+	}
+
+	function useTwoDimensionalTest( initialState?: InitialState ) {
+		const Test = () => (
+			<TwoDimensionalTest
+				state={ useCompositeState( { rtl, ...initialState } ) }
+			/>
+		);
+		renderAndValidate( <Test /> );
+		return getTwoDimensionalItems();
+	}
+
+	function useShiftTest( shift: boolean ) {
+		const Test = () => (
+			<ShiftTest state={ useCompositeState( { rtl, shift } ) } />
+		);
+		renderAndValidate( <Test /> );
+		return getShiftTestItems();
+	}
+
+	describe( 'In one dimension', () => {
+		test( 'All directions work with no orientation', async () => {
+			const { item1, item2, item3 } = useOneDimensionalTest();
+
+			await press.Tab();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item3 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item1 ).toHaveFocus();
+			await press( next );
+			expect( item2 ).toHaveFocus();
+			await press( next );
+			expect( item3 ).toHaveFocus();
+			await press( previous );
+			expect( item2 ).toHaveFocus();
+			await press( previous );
+			expect( item1 ).toHaveFocus();
+			await press.End();
+			expect( item3 ).toHaveFocus();
+			await press.Home();
+			expect( item1 ).toHaveFocus();
+			await press.PageDown();
+			expect( item3 ).toHaveFocus();
+			await press.PageUp();
+			expect( item1 ).toHaveFocus();
+		} );
+
+		test( 'Only left/right work with horizontal orientation', async () => {
+			const { item1, item2, item3 } = useOneDimensionalTest( {
+				orientation: 'horizontal',
+			} );
+
+			await press.Tab();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item1 ).toHaveFocus();
+			await press( next );
+			expect( item2 ).toHaveFocus();
+			await press( next );
+			expect( item3 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item3 ).toHaveFocus();
+			await press( previous );
+			expect( item2 ).toHaveFocus();
+			await press( previous );
+			expect( item1 ).toHaveFocus();
+			await press.End();
+			expect( item3 ).toHaveFocus();
+			await press.Home();
+			expect( item1 ).toHaveFocus();
+			await press.PageDown();
+			expect( item3 ).toHaveFocus();
+			await press.PageUp();
+			expect( item1 ).toHaveFocus();
+		} );
+
+		test( 'Only up/down work with vertical orientation', async () => {
+			const { item1, item2, item3 } = useOneDimensionalTest( {
+				orientation: 'vertical',
+			} );
+
+			await press.Tab();
+			expect( item1 ).toHaveFocus();
+			await press( next );
+			expect( item1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item3 ).toHaveFocus();
+			await press( previous );
+			expect( item3 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item1 ).toHaveFocus();
+			await press.End();
+			expect( item3 ).toHaveFocus();
+			await press.Home();
+			expect( item1 ).toHaveFocus();
+			await press.PageDown();
+			expect( item3 ).toHaveFocus();
+			await press.PageUp();
+			expect( item1 ).toHaveFocus();
+		} );
+
+		test( 'Focus wraps with loop enabled', async () => {
+			const { item1, item2, item3 } = useOneDimensionalTest( {
+				loop: true,
+			} );
+
+			await press.Tab();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item2 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( item1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( item3 ).toHaveFocus();
+			await press( next );
+			expect( item1 ).toHaveFocus();
+			await press( previous );
+			expect( item3 ).toHaveFocus();
+		} );
+	} );
+
+	describe( 'In two dimensions', () => {
+		test( 'All directions work as standard', async () => {
+			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
+				useTwoDimensionalTest();
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemA1 ).toHaveFocus();
+			await press( previous );
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press( next );
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemA2 ).toHaveFocus();
+			await press( previous );
+			expect( itemA1 ).toHaveFocus();
+			await press( last );
+			expect( itemA3 ).toHaveFocus();
+			await press.PageDown();
+			expect( itemC3 ).toHaveFocus();
+			await press( next );
+			expect( itemC3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemC3 ).toHaveFocus();
+			await press( first );
+			expect( itemC1 ).toHaveFocus();
+			await press.PageUp();
+			expect( itemA1 ).toHaveFocus();
+			await press.End( null, { ctrlKey: true } );
+			expect( itemC3 ).toHaveFocus();
+			await press.Home( null, { ctrlKey: true } );
+			expect( itemA1 ).toHaveFocus();
+		} );
+
+		test( 'Focus wraps around rows/columns with loop enabled', async () => {
+			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
+				useTwoDimensionalTest( { loop: true } );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press( next );
+			expect( itemA2 ).toHaveFocus();
+			await press( next );
+			expect( itemA3 ).toHaveFocus();
+			await press( next );
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemC1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemA1 ).toHaveFocus();
+			await press( previous );
+			expect( itemA3 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemC3 ).toHaveFocus();
+		} );
+
+		test( 'Focus moves between rows/columns with wrap enabled', async () => {
+			const { itemA1, itemA2, itemA3, itemB1, itemC1, itemC3 } =
+				useTwoDimensionalTest( { wrap: true } );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press( next );
+			expect( itemA2 ).toHaveFocus();
+			await press( next );
+			expect( itemA3 ).toHaveFocus();
+			await press( next );
+			expect( itemB1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemC1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemA2 ).toHaveFocus();
+			await press( previous );
+			expect( itemA1 ).toHaveFocus();
+			await press( previous );
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemA1 ).toHaveFocus();
+			await press.End( itemA1, { ctrlKey: true } );
+			expect( itemC3 ).toHaveFocus();
+			await press( next );
+			expect( itemC3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemC3 ).toHaveFocus();
+		} );
+
+		test( 'Focus wraps around start/end with loop and wrap enabled', async () => {
+			const { itemA1, itemC3 } = useTwoDimensionalTest( {
+				loop: true,
+				wrap: true,
+			} );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press( previous );
+			expect( itemC3 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowUp();
+			expect( itemC3 ).toHaveFocus();
+			await press( next );
+			expect( itemA1 ).toHaveFocus();
+		} );
+
+		test( 'Focus shifts if vertical neighbour unavailable when shift enabled', async () => {
+			const { itemA1, itemB1, itemB2, itemC1 } = useShiftTest( true );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press( next );
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowUp();
+			// A2 doesn't exist
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press( next );
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowDown();
+			// C2 is disabled
+			expect( itemC1 ).toHaveFocus();
+		} );
+
+		test( 'Focus does not shift if vertical neighbour unavailable when shift not enabled', async () => {
+			const { itemA1, itemB1, itemB2 } = useShiftTest( false );
+
+			await press.Tab();
+			expect( itemA1 ).toHaveFocus();
+			await press.ArrowDown();
+			expect( itemB1 ).toHaveFocus();
+			await press( next );
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowUp();
+			// A2 doesn't exist
+			expect( itemB2 ).toHaveFocus();
+			await press.ArrowDown();
+			// C2 is disabled
+			expect( itemB2 ).toHaveFocus();
+		} );
+	} );
+} );

package/src/composite/v2.ts

@@ -0,0 +1,4 @@
+// Although we have migrated away from Reakit, the 'current'
+// Ariakit implementation is still considered a v2.
+
+export * from './current';

package/src/confirm-dialog/README.md

@@ -43,8 +43,8 @@ Let the parent component control when the dialog is open/closed. It's activated
 -   You'll want to update the state that controls `isOpen` by updating it from the `onCancel` and `onConfirm` callbacks.
 
 ```jsx
+import { useState } from 'react';
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-import { useState } from '@wordpress/element';
 
 function Example() {
 	const [ isOpen, setIsOpen ] = useState( true );
@@ -137,4 +137,4 @@ The optional custom text to display as the confirmation button's label
 -   Required: No
 -   Default: "Cancel"
 
-The optional custom text to display as the cancelation button's label
+The optional custom text to display as the cancellation button's label