@wordpress/components 25.16.0 → 26.0.0

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

@@ -1,22 +1,4 @@
-/**
- * Composite is a component that may contain navigable items represented by
- * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
- * all the keyboard navigation mechanisms to ensure that there's only one
- * tab stop for the whole Composite element. This means that it can behave as
- * a roving tabindex or aria-activedescendant container.
- *
- * @see https://ariakit.org/components/composite
- */
+// Although we have migrated away from Reakit, the 'current'
+// Ariakit implementation is still considered a v2.
 
-/* eslint-disable-next-line no-restricted-imports */
-export {
-	Composite,
-	CompositeGroup,
-	CompositeGroupLabel,
-	CompositeItem,
-	CompositeRow,
-	useCompositeStore,
-} from '@ariakit/react';
-
-/* eslint-disable-next-line no-restricted-imports */
-export type { CompositeStore } from '@ariakit/react';
+export * from './current';

package/src/confirm-dialog/component.tsx

@@ -96,6 +96,7 @@ const UnconnectedConfirmDialog = (
 						<Text>{ children }</Text>
 						<Flex direction="row" justify="flex-end">
 							<Button
+								__next40pxDefaultSize
 								ref={ cancelButtonRef }
 								variant="tertiary"
 								onClick={ handleEvent( onCancel ) }
@@ -103,6 +104,7 @@ const UnconnectedConfirmDialog = (
 								{ cancelLabel }
 							</Button>
 							<Button
+								__next40pxDefaultSize
 								ref={ confirmButtonRef }
 								variant="primary"
 								onClick={ handleEvent( onConfirm ) }

package/src/context/wordpress-component.ts

@@ -3,7 +3,7 @@
  */
 import type * as React from 'react';
 
-// Based on https://github.com/reakit/reakit/blob/master/packages/reakit-utils/src/types.ts
+// Based on https://github.com/ariakit/ariakit/blob/reakit/packages/reakit-utils/src/types.ts
 export type WordPressComponentProps<
 	/** Prop types. */
 	P,

package/src/custom-gradient-picker/index.tsx

@@ -1,13 +1,11 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
 import type gradientParser from 'gradient-parser';
 
 /**
  * WordPress dependencies
  */
-import deprecated from '@wordpress/deprecated';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -60,7 +58,6 @@ const GradientAnglePicker = ( {
 	};
 	return (
 		<AnglePickerControl
-			__nextHasNoMarginBottom
 			onChange={ onAngleChange }
 			value={ hasGradient ? angle : '' }
 		/>
@@ -141,8 +138,6 @@ const GradientTypePicker = ( {
  * ```
  */
 export function CustomGradientPicker( {
-	/** Start opting into the new margin-free styles that will become the default in a future version. */
-	__nextHasNoMargin = false,
 	value,
 	onChange,
 	__experimentalIsRenderedInSidebar = false,
@@ -166,24 +161,8 @@ export function CustomGradientPicker( {
 		};
 	} );
 
-	if ( ! __nextHasNoMargin ) {
-		deprecated(
-			'Outer margin styles for wp.components.CustomGradientPicker',
-			{
-				since: '6.1',
-				version: '6.4',
-				hint: 'Set the `__nextHasNoMargin` prop to true to start opting into the new styles, which will become the default in a future version',
-			}
-		);
-	}
-
 	return (
-		<VStack
-			spacing={ 4 }
-			className={ classnames( 'components-custom-gradient-picker', {
-				'is-next-has-no-margin': __nextHasNoMargin,
-			} ) }
-		>
+		<VStack spacing={ 4 } className="components-custom-gradient-picker">
 			<CustomGradientBar
 				__experimentalIsRenderedInSidebar={
 					__experimentalIsRenderedInSidebar

package/src/custom-gradient-picker/stories/index.story.tsx

@@ -40,6 +40,3 @@ const CustomGradientPickerWithState: StoryFn<
 };
 
 export const Default = CustomGradientPickerWithState.bind( {} );
-Default.args = {
-	__nextHasNoMargin: true,
-};

package/src/custom-gradient-picker/style.scss

@@ -1,12 +1,5 @@
 $components-custom-gradient-picker__padding: $grid-unit-20; // 48px container, 16px handles inside, that leaves 32px padding, half of which is 1å6.
 
-.components-custom-gradient-picker {
-	&:not(.is-next-has-no-margin) {
-		margin-top: $grid-unit-15;
-		margin-bottom: $grid-unit-30;
-	}
-}
-
 .components-custom-gradient-picker__gradient-bar {
 	border-radius: $radius-block-ui;
 	width: 100%;