Migrate Composite component from reakit to ariakit

packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap

@@ -219,10 +219,11 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
                           aria-label="Color: red"
                           aria-selected="true"
                           class="components-button components-circular-option-picker__option"
+                          data-active-item=""
+                          data-command=""
                           id="components-circular-option-picker-0-0"
                           role="option"
                           style="background-color: rgb(255, 0, 0); color: rgb(255, 0, 0);"
-                          tabindex="0"
                           type="button"
                         />
                         <svg

packages/components/CHANGELOG.md

@@ -11,6 +11,7 @@
 -   `InputControl`, `NumberControl`, `UnitControl`, `SelectControl`, `CustomSelectControl`, `TreeSelect`: Add opt-in prop for next 40px default size, superseding the `__next36pxDefaultSize` prop ([#53819](https://github.com/WordPress/gutenberg/pull/53819)).
 -   `Modal`: add a new `size` prop to support preset widths, including a `fill` option to eventually replace the `isFullScreen` prop ([#54471](https://github.com/WordPress/gutenberg/pull/54471)).
 -   Wrapped `TextareaControl` in a `forwardRef` call ([#54975](https://github.com/WordPress/gutenberg/pull/54975)).
+-   `Composite`/`AlignmentMatrixControl`/`CircularOptionPicker`: Starts the `Composite` migration from `reakit` to `ariakit` ([#54225](https://github.com/WordPress/gutenberg/pull/54225)).
 
 ### Bug Fix
 

packages/components/src/alignment-matrix-control/cell.tsx

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CompositeItem } from '../composite';
+import { CompositeItem } from '../composite/v2';
 import Tooltip from '../tooltip';
 import { VisuallyHidden } from '../visually-hidden';
 
@@ -17,6 +17,7 @@ import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
 export default function Cell( {
+	id,
 	isActive = false,
 	value,
 	...props
@@ -25,7 +26,10 @@ export default function Cell( {
 
 	return (
 		<Tooltip text={ tooltipText }>
-			<CompositeItem as={ CellView } role="gridcell" { ...props }>
+			<CompositeItem
+				id={ id }
+				render={ <CellView { ...props } role="gridcell" /> }
+			>
 				{ /* VoiceOver needs a text content to be rendered within grid cell,
 			otherwise it'll announce the content as "blank". So we use a visually
 			hidden element instead of aria-label. */ }

packages/components/src/alignment-matrix-control/index.tsx

@@ -8,32 +8,17 @@ import classnames from 'classnames';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
-import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Cell from './cell';
-import { Composite, CompositeGroup, useCompositeState } from '../composite';
+import { Composite, CompositeRow, useCompositeStore } from '../composite/v2';
 import { Root, Row } from './styles/alignment-matrix-control-styles';
 import AlignmentMatrixControlIcon from './icon';
-import { GRID, getItemId } from './utils';
+import { GRID, getItemId, getItemValue } from './utils';
 import type { WordPressComponentProps } from '../context';
-import type {
-	AlignmentMatrixControlProps,
-	AlignmentMatrixControlValue,
-} from './types';
-
-const noop = () => {};
-
-function useBaseId( id?: string ) {
-	const instanceId = useInstanceId(
-		AlignmentMatrixControl,
-		'alignment-matrix-control'
-	);
-
-	return id || instanceId;
-}
+import type { AlignmentMatrixControlProps } from './types';
 
 /**
  *
@@ -61,31 +46,27 @@ export function AlignmentMatrixControl( {
 	label = __( 'Alignment Matrix Control' ),
 	defaultValue = 'center center',
 	value,
-	onChange = noop,
+	onChange,
 	width = 92,
 	...props
 }: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
-	const [ immutableDefaultValue ] = useState( value ?? defaultValue );
-	const baseId = useBaseId( id );
-	const initialCurrentId = getItemId( baseId, immutableDefaultValue );
+	const baseId = useInstanceId(
+		AlignmentMatrixControl,
+		'alignment-matrix-control',
+		id
+	);
 
-	const composite = useCompositeState( {
-		baseId,
-		currentId: initialCurrentId,
+	const compositeStore = useCompositeStore( {
+		defaultActiveId: getItemId( baseId, defaultValue ),
+		activeId: getItemId( baseId, value ),
+		setActiveId: ( nextActiveId ) => {
+			const nextValue = getItemValue( baseId, nextActiveId );
+			if ( nextValue ) onChange?.( nextValue );
+		},
 		rtl: isRTL(),
 	} );
 
-	const handleOnChange = ( nextValue: AlignmentMatrixControlValue ) => {
-		onChange( nextValue );
-	};
-
-	const { setCurrentId } = composite;
-
-	useEffect( () => {
-		if ( typeof value !== 'undefined' ) {
-			setCurrentId( getItemId( baseId, value ) );
-		}
-	}, [ value, setCurrentId, baseId ] );
+	const activeId = compositeStore.useState( 'activeId' );
 
 	const classes = classnames(
 		'component-alignment-matrix-control',
@@ -94,38 +75,34 @@ export function AlignmentMatrixControl( {
 
 	return (
 		<Composite
-			{ ...props }
-			{ ...composite }
-			aria-label={ label }
-			as={ Root }
-			className={ classes }
-			role="grid"
-			size={ width }
+			store={ compositeStore }
+			render={
+				<Root
+					{ ...props }
+					aria-label={ label }
+					className={ classes }
+					id={ baseId }
+					role="grid"
+					size={ width }
+				/>
+			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<CompositeGroup
-					{ ...composite }
-					as={ Row }
-					role="row"
-					key={ index }
-				>
+				<CompositeRow render={ <Row role="row" /> } key={ index }>
 					{ cells.map( ( cell ) => {
 						const cellId = getItemId( baseId, cell );
-						const isActive = composite.currentId === cellId;
+						const isActive = cellId === activeId;
 
 						return (
 							<Cell
-								{ ...composite }
 								id={ cellId }
 								isActive={ isActive }
 								key={ cell }
 								value={ cell }
-								onFocus={ () => handleOnChange( cell ) }
-								tabIndex={ isActive ? 0 : -1 }
 							/>
 						);
 					} ) }
-				</CompositeGroup>
+				</CompositeRow>
 			) ) }
 		</Composite>
 	);

packages/components/src/alignment-matrix-control/stories/index.story.tsx

@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { Icon } from '@wordpress/icons';
 
 /**
@@ -24,10 +24,11 @@ const meta: Meta< typeof AlignmentMatrixControl > = {
 		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
 	},
 	argTypes: {
-		onChange: { action: 'onChange', control: { type: null } },
+		onChange: { control: { type: null } },
 		value: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
@@ -42,11 +43,6 @@ const Template: StoryFn< typeof AlignmentMatrixControl > = ( {
 	const [ value, setValue ] =
 		useState< AlignmentMatrixControlProps[ 'value' ] >();
 
-	// Convenience handler for Canvas view so changes are reflected
-	useEffect( () => {
-		setValue( defaultValue );
-	}, [ defaultValue ] );
-
 	return (
 		<AlignmentMatrixControl
 			{ ...props }

packages/components/src/alignment-matrix-control/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -17,34 +17,130 @@ const getCell = ( name: string ) => {
 	return within( getControl() ).getByRole( 'gridcell', { name } );
 };
 
+const asyncRender = async ( jsx: any, focusedCell = 'center center' ) => {
+	const view = render( jsx );
+	await waitFor( () => {
+		expect( getCell( focusedCell ) ).toHaveAttribute( 'tabindex', '0' );
+	} );
+	return view;
+};
+
 describe( 'AlignmentMatrixControl', () => {
 	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			render( <AlignmentMatrixControl /> );
+		it( 'should render', async () => {
+			await asyncRender( <AlignmentMatrixControl /> );
 
 			expect( getControl() ).toBeInTheDocument();
 		} );
+
+		it( 'should be centered by default', async () => {
+			const user = userEvent.setup();
+
+			await asyncRender( <AlignmentMatrixControl /> );
+
+			await user.tab();
+
+			expect( getCell( 'center center' ) ).toHaveFocus();
+		} );
 	} );
 
-	describe( 'Change value', () => {
-		const alignments = [ 'center left', 'center center', 'bottom center' ];
-		const user = userEvent.setup();
+	describe( 'Should change value', () => {
+		describe( 'with Mouse', () => {
+			describe( 'on cell click', () => {
+				it.each( [
+					'top left',
+					'top center',
+					'top right',
+					'center left',
+					'center right',
+					'bottom left',
+					'bottom center',
+					'bottom right',
+				] )( '%s', async ( alignment ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await asyncRender(
+						<AlignmentMatrixControl
+							value="center"
+							onChange={ spy }
+						/>
+					);
+
+					const cell = getCell( alignment );
+
+					await user.click( cell );
 
-		it.each( alignments )(
-			'should change value on %s cell click',
-			async ( alignment ) => {
-				const spy = jest.fn();
+					expect( cell ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( alignment );
+				} );
 
-				render(
-					<AlignmentMatrixControl value="center" onChange={ spy } />
-				);
+				it( 'unless already focused', async () => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
 
-				await user.click( getCell( alignment ) );
+					await asyncRender(
+						<AlignmentMatrixControl
+							value="center"
+							onChange={ spy }
+						/>
+					);
 
-				expect( getCell( alignment ) ).toHaveFocus();
+					const cell = getCell( 'center center' );
 
-				expect( spy ).toHaveBeenCalledWith( alignment );
-			}
-		);
+					await user.click( cell );
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).not.toHaveBeenCalled();
+				} );
+			} );
+		} );
+
+		describe( 'with Keyboard', () => {
+			describe( 'on arrow press', () => {
+				it.each( [
+					[ 'ArrowUp', 'top center' ],
+					[ 'ArrowLeft', 'center left' ],
+					[ 'ArrowDown', 'bottom center' ],
+					[ 'ArrowRight', 'center right' ],
+				] )( '%s', async ( keyRef, cellRef ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await asyncRender(
+						<AlignmentMatrixControl onChange={ spy } />
+					);
+
+					await user.tab();
+					await user.keyboard( `[${ keyRef }]` );
+
+					expect( getCell( cellRef ) ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( cellRef );
+				} );
+			} );
+
+			describe( 'but not at at edge', () => {
+				it.each( [
+					[ 'ArrowUp', 'top left' ],
+					[ 'ArrowLeft', 'top left' ],
+					[ 'ArrowDown', 'bottom right' ],
+					[ 'ArrowRight', 'bottom right' ],
+				] )( '%s', async ( keyRef, cellRef ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await asyncRender(
+						<AlignmentMatrixControl onChange={ spy } />
+					);
+
+					const cell = getCell( cellRef );
+					await user.click( cell );
+					await user.keyboard( `[${ keyRef }]` );
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( cellRef );
+				} );
+			} );
+		} );
 	} );
 } );