Removing Reakit Composite implementation

packages/components/CHANGELOG.md

@@ -28,6 +28,10 @@
 
 -   `CheckboxControl`: Remove ability for label prop to be false ([#58339](https://github.com/WordPress/gutenberg/pull/58339)).
 
+### Code Quality
+
+-   `Composite`: Removing Reakit `Composite` implementation ([#58620](https://github.com/WordPress/gutenberg/pull/58620)).
+
 ## 25.16.0 (2024-01-24)
 
 ### Enhancements

packages/components/src/composite/index.ts

@@ -1,4 +1,7 @@
-// Until we migrate away from Reakit, the 'unstable'
-// implementation remains the default.
+// Originally this pointed at a Reakit implementation of
+// `Composite`, but we are removing Reakit entirely from the
+// codebase. We will continue to support the Reakit API
+// through the 'legacy' version, which uses Ariakit under
+// the hood.
 
-export * from './unstable';
+export * from './legacy';

packages/components/src/composite/legacy/index.tsx

@@ -12,7 +12,6 @@
  * WordPress dependencies
  */
 import { forwardRef } from '@wordpress/element';
-import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -99,14 +98,6 @@ type CompositeComponentProps = CompositeState &
 		| ComponentProps< typeof Current.CompositeRow >
 	);
 
-function showDeprecationMessage( previous?: string, next?: string ) {
-	if ( previous ) {
-		deprecated( `wp.components.__unstable${ previous }`, {
-			alternative: `wp.components.${ next || previous }`,
-		} );
-	}
-}
-
 function mapLegacyStatePropsToComponentProps(
 	legacyProps: CompositeStateProps
 ): CompositeComponentProps {
@@ -128,8 +119,6 @@ function proxyComposite< C extends Component >(
 ): CompositeComponent< C > {
 	const displayName = ProxiedComponent.displayName;
 	const Component = ( legacyProps: CompositeStateProps ) => {
-		showDeprecationMessage( displayName );
-
 		const { store, ...rest } =
 			mapLegacyStatePropsToComponentProps( legacyProps );
 		const props = rest as ComponentProps< C >;
@@ -175,8 +164,6 @@ export const CompositeItem = proxyComposite( Current.CompositeItem, {
 export function useCompositeState(
 	legacyStateOptions: LegacyStateOptions = {}
 ): CompositeState {
-	showDeprecationMessage( 'UseCompositeState', 'useCompositeStore' );
-
 	const {
 		baseId,
 		currentId: defaultActiveId,

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

@@ -15,7 +15,7 @@ import {
 import { UseCompositeStatePlaceholder, transform } from './utils';
 
 const meta: Meta< typeof UseCompositeStatePlaceholder > = {
-	title: 'Components/Composite (Legacy)',
+	title: 'Components/Composite',
 	component: UseCompositeStatePlaceholder,
 	subcomponents: {
 		Composite,

packages/components/src/composite/legacy/test/index.tsx

@@ -41,8 +41,6 @@ type InitialState = Parameters< typeof useCompositeState >[ 0 ];
 type CompositeState = ReturnType< typeof useCompositeState >;
 type CompositeStateProps = CompositeState | { state: CompositeState };
 
-const warningsIssued = new Map();
-
 async function renderAndValidate( ...args: Parameters< typeof render > ) {
 	const view = render( ...args );
 	await waitFor( () => {
@@ -180,20 +178,6 @@ describe.each( [
 		);
 		renderAndValidate( <Test /> );
 
-		// Using the legacy composite components issues a deprecation
-		// warning, but only on the first usage. As such, we only
-		// expect `console` to warn once; any further rendering
-		// should not warn.
-		const warningKey = 'single tab stop';
-		if ( warningsIssued.get( warningKey ) ) {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( console ).not.toHaveWarned();
-		} else {
-			// eslint-disable-next-line jest/no-conditional-expect
-			expect( console ).toHaveWarned();
-			warningsIssued.set( warningKey, true );
-		}
-
 		await press.Tab();
 		expect( screen.getByText( 'Before' ) ).toHaveFocus();
 		await press.Tab();
@@ -450,20 +434,6 @@ describe.each( [
 			const { itemA1, itemA2, itemA3, itemB1, itemB2, itemC1, itemC3 } =
 				useTwoDimensionalTest();
 
-			// Using the legacy composite components issues a deprecation
-			// warning, but only on the first usage. As such, we only
-			// expect `console` to warn once; any further rendering
-			// should not warn.
-			const warningKey = 'directions';
-			if ( warningsIssued.get( warningKey ) ) {
-				// eslint-disable-next-line jest/no-conditional-expect
-				expect( console ).not.toHaveWarned();
-			} else {
-				// eslint-disable-next-line jest/no-conditional-expect
-				expect( console ).toHaveWarned();
-				warningsIssued.set( warningKey, true );
-			}
-
 			await press.Tab();
 			expect( itemA1 ).toHaveFocus();
 			await press.ArrowUp();