Implementing useCompositeState with Ariakit

packages/components/CHANGELOG.md

@@ -7,6 +7,7 @@
 -   `ConfirmDialog`: Add `__next40pxDefaultSize` to buttons ([#58421](https://github.com/WordPress/gutenberg/pull/58421)).
 -   `SnackbarList`: Allow limiting the number of maximum visible Snackbars ([#58559](https://github.com/WordPress/gutenberg/pull/58559)).
 -   `Snackbar`: Update the warning message ([#58591](https://github.com/WordPress/gutenberg/pull/58591)).
+-   `Composite`: Implementing `useCompositeState` with Ariakit ([#57304](https://github.com/WordPress/gutenberg/pull/57304))
 
 ### Bug Fix
 

packages/components/src/composite/current/index.ts

@@ -0,0 +1,22 @@
+/**
+ * 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
+ */
+
+/* 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, CompositeStoreProps } from '@ariakit/react';

packages/components/src/composite/current/stories/index.story.tsx

@@ -0,0 +1,86 @@
+/**
+ * External dependencies
+ */
+import type { Meta, StoryFn } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { isRTL } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	Composite,
+	CompositeGroup,
+	CompositeRow,
+	CompositeItem,
+	useCompositeStore,
+} from '..';
+import { UseCompositeStorePlaceholder, transform } from './utils';
+
+const meta: Meta< typeof UseCompositeStorePlaceholder > = {
+	title: 'Components/Composite (V2)',
+	component: UseCompositeStorePlaceholder,
+	subcomponents: {
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		Composite,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CompositeGroup,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CompositeRow,
+		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
+		CompositeItem,
+	},
+	parameters: {
+		badges: [ 'private' ],
+		docs: {
+			canvas: { sourceState: 'shown' },
+			source: { transform },
+			extractArgTypes: ( component: React.FunctionComponent ) => {
+				const name = component.displayName;
+				const path = name
+					?.replace(
+						/([a-z])([A-Z])/g,
+						( _, a, b ) => `${ a }-${ b.toLowerCase() }`
+					)
+					.toLowerCase();
+				const url = `https://ariakit.org/reference/${ path }`;
+				return {
+					props: {
+						name: 'Props',
+						description: `See <a href="${ url }">Ariakit docs</a> for <code>${ name }</code>`,
+						table: { type: { summary: undefined } },
+					},
+				};
+			},
+		},
+	},
+};
+export default meta;
+
+export const Default: StoryFn< typeof Composite > = ( { ...initialState } ) => {
+	const rtl = isRTL();
+	const store = useCompositeStore( { rtl, ...initialState } );
+
+	return (
+		<Composite role="grid" store={ store } aria-label="Ariakit Composite">
+			<CompositeRow role="row">
+				<CompositeItem role="gridcell">Item A1</CompositeItem>
+				<CompositeItem role="gridcell">Item A2</CompositeItem>
+				<CompositeItem role="gridcell">Item A3</CompositeItem>
+			</CompositeRow>
+			<CompositeRow role="row">
+				<CompositeItem role="gridcell">Item B1</CompositeItem>
+				<CompositeItem role="gridcell">Item B2</CompositeItem>
+				<CompositeItem role="gridcell">Item B3</CompositeItem>
+			</CompositeRow>
+			<CompositeRow role="row">
+				<CompositeItem role="gridcell">Item C1</CompositeItem>
+				<CompositeItem role="gridcell">Item C2</CompositeItem>
+				<CompositeItem role="gridcell">Item C3</CompositeItem>
+			</CompositeRow>
+		</Composite>
+	);
+};

packages/components/src/composite/current/stories/utils.tsx

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import type { StoryContext } from '@storybook/react';
+
+/**
+ * Internal dependencies
+ */
+import type { CompositeStoreProps } from '..';
+
+export function UseCompositeStorePlaceholder( props: CompositeStoreProps ) {
+	return (
+		<dl>
+			{ Object.entries( props ).map( ( [ name, value ] ) => (
+				<>
+					<dt>{ name }</dt>
+					<dd>{ JSON.stringify( value ) }</dd>
+				</>
+			) ) }
+		</dl>
+	);
+}
+UseCompositeStorePlaceholder.displayName = 'useCompositeStore';
+
+export function transform( code: string, context: StoryContext ) {
+	// The output generated by Storybook for these components is
+	// messy, so we apply this transform to make it more useful
+	// for anyone reading the docs.
+	const config = ` ${ JSON.stringify( context.args, null, 2 ) } `;
+	const state = config.replace( ' {} ', '' );
+	return [
+		// Include a setup line, showing how to make use of
+		// `useCompositeStore` to convert store options into
+		// a composite store prop.
+		`const store = useCompositeStore(${ state });`,
+		'',
+		'return (',
+		'  ' +
+			code
+				// The generated output includes a full dump of everything
+				// in the store; the reader probably isn't interested in
+				// what that looks like, so instead we drop all of that
+				// in favor of the store generated above.
+				.replaceAll( /store=\{\{[\s\S]*?\}\}/g, 'store={ store }' )
+				// Now we tidy the output by removing any unnecessary
+				// whitespace...
+				.replaceAll( /<Composite\w+[\s\S]*?>/g, ( match ) =>
+					match.replaceAll( /\s+\s/g, ' ' )
+				)
+				// ...including around <Composite*> children...
+				.replaceAll(
+					/>\s*(\w[\w ]*?)\s*<\//g,
+					( _, value ) => `>${ value }</`
+				)
+				// ...and inside JSX definitions.
+				.replaceAll( '} >', '}>' )
+				// Finally we indent everything to make it more readable.
+				.replaceAll( /\n/g, '\n  ' ),
+		');',
+	].join( '\n' );
+}

packages/components/src/composite/index.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://reakit.io/docs/composite/
- *
- * The plan is to build own API that accounts for future breaking changes
- * in Reakit (https://github.com/WordPress/gutenberg/pull/28085).
- */
-/* eslint-disable-next-line no-restricted-imports */
-export {
-	Composite,
-	CompositeGroup,
-	CompositeItem,
-	useCompositeState,
-} from 'reakit';
+// Until we migrate away from Reakit, the 'unstable'
+// implementation remains the default.
 
-/* eslint-disable-next-line no-restricted-imports */
-export type { CompositeStateReturn as CompositeState } from 'reakit';
+export * from './unstable';