WordPress · diegohaz · Nov 4, 2021 · Dec 9, 2021 · Dec 9, 2021 · Dec 13, 2021
diff --git a/package-lock.json b/package-lock.json
@@ -49,6 +49,7 @@
 		"@wordpress/primitives": "file:../primitives",
 		"@wordpress/rich-text": "file:../rich-text",
 		"@wordpress/warning": "file:../warning",
+		"ariakit": "2.0.0-alpha.12",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
 		"dom-scroll-into-view": "^1.2.1",

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { CompositeItem } from '../composite';
+import { CompositeItem } from '../composite2';
 import Tooltip from '../tooltip';
 import { VisuallyHidden } from '../visually-hidden';
 

@@ -9,13 +9,13 @@ import classnames from 'classnames';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Cell from './cell';
-import { Composite, CompositeGroup, useCompositeState } from '../composite';
+import { Composite, CompositeRow, useCompositeState } from '../composite2';
 import { Root, Row } from './styles/alignment-matrix-control-styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId } from './utils';
@@ -41,24 +41,16 @@ export default function AlignmentMatrixControl( {
 } ) {
 	const [ immutableDefaultValue ] = useState( value ?? defaultValue );
 	const baseId = useBaseId( id );
-	const initialCurrentId = getItemId( baseId, immutableDefaultValue );
+	const defaultActiveId = getItemId( baseId, immutableDefaultValue );
+	const activeId =
+		value !== undefined ? getItemId( baseId, value ) : undefined;
 
 	const composite = useCompositeState( {
-		baseId,
-		currentId: initialCurrentId,
+		defaultActiveId,
+		activeId,
 		rtl: isRTL(),
 	} );
 
-	const handleOnChange = ( nextValue ) => {
-		onChange( nextValue );
-	};
-
-	useEffect( () => {
-		if ( typeof value !== 'undefined' ) {
-			composite.setCurrentId( getItemId( baseId, value ) );
-		}
-	}, [ value, composite.setCurrentId ] );
-
 	const classes = classnames(
 		'component-alignment-matrix-control',
 		className
@@ -67,37 +59,30 @@ export default function AlignmentMatrixControl( {
 	return (
 		<Composite
 			{ ...props }
-			{ ...composite }
+			state={ composite }
 			aria-label={ label }
 			as={ Root }
 			className={ classes }
 			role="grid"
 			width={ width }
 		>
 			{ GRID.map( ( cells, index ) => (
-				<CompositeGroup
-					{ ...composite }
-					as={ Row }
-					role="row"
-					key={ index }
-				>
+				<CompositeRow as={ Row } role="row" key={ index }>
 					{ cells.map( ( cell ) => {
 						const cellId = getItemId( baseId, cell );
-						const isActive = composite.currentId === cellId;
-
+						const isActive = composite.activeId === cellId;
 						return (
 							<Cell
-								{ ...composite }
 								id={ cellId }
 								isActive={ isActive }
 								key={ cell }
 								value={ cell }
-								onFocus={ () => handleOnChange( cell ) }
+								onFocus={ () => onChange( cell ) }
 								tabIndex={ isActive ? 0 : -1 }
 							/>
 						);
 					} ) }
-				</CompositeGroup>
+				</CompositeRow>
 			) ) }
 		</Composite>
 	);

@@ -26,7 +26,11 @@ export default {
 
 export const _default = () => {
 	const props = {
-		value: select( 'value', alignmentOptions, 'center center' ),
+		defaultValue: select(
+			'defaultValue',
+			alignmentOptions,
+			'center center'
+		),
 	};
 
 	return <AlignmentMatrixControl { ...props } />;

@@ -0,0 +1,7 @@
+/* eslint-disable-next-line no-restricted-imports */
+export {
+	Composite,
+	CompositeRow,
+	CompositeItem,
+	useCompositeState,
+} from 'ariakit/composite';
@@ -2,7 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import { Separator } from 'reakit';
+import { Separator } from 'ariakit/separator';
 // eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 

@@ -2,7 +2,7 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { SeparatorProps } from 'reakit';
+import type { SeparatorProps } from 'ariakit/separator';
 
 /**
  * Internal dependencies

@@ -47,6 +47,12 @@ export {
 	CompositeItem as __unstableCompositeItem,
 	useCompositeState as __unstableUseCompositeState,
 } from './composite';
+export {
+	Composite as __unstableComposite2,
+	CompositeRow as __unstableCompositeRow2,
+	CompositeItem as __unstableCompositeItem2,
+	useCompositeState as __unstableUseCompositeState2,
+} from './composite2';
 export { ConfirmDialog as __experimentalConfirmDialog } from './confirm-dialog';
 export { default as CustomSelectControl } from './custom-select-control';
 export { default as Dashicon } from './dashicon';

@@ -4,8 +4,8 @@
 import { createContext } from '@wordpress/element';
 
 const RadioContext = createContext( {
-	state: null,
-	setState: () => {},
+	value: null,
+	setValue: () => {},
 } );
 
 export default RadioContext;
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { useRadioState, RadioGroup as ReakitRadioGroup } from 'reakit/Radio';
+import { useRadioState, RadioGroup as AriakitRadioGroup } from 'ariakit/radio';
 
 /**
  * WordPress dependencies
@@ -19,24 +19,19 @@ function RadioGroup(
 	ref
 ) {
 	const radioState = useRadioState( {
-		state: defaultChecked,
-		baseId: props.id,
+		defaultValue: defaultChecked,
+		value: checked,
+		setValue: onChange,
 	} );
-	const radioContext = {
-		...radioState,
-		disabled,
-		// controlled or uncontrolled
-		state: checked ?? radioState.state,
-		setState: onChange ?? radioState.setState,
-	};
+	const radioContext = { ...radioState, disabled };
 
 	return (
 		<RadioContext.Provider value={ radioContext }>
-			<ReakitRadioGroup
+			<AriakitRadioGroup
 				ref={ ref }
 				as={ ButtonGroup }
 				aria-label={ label }
-				{ ...radioState }
+				state={ radioState }
 				{ ...props }
 			/>
 		</RadioContext.Provider>

@@ -14,12 +14,7 @@ export default { title: 'Components/RadioGroup', component: RadioGroup };
 export const _default = () => {
 	/* eslint-disable no-restricted-syntax */
 	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="default-radiogroup"
-			label="options"
-			defaultChecked="option2"
-		>
+		<RadioGroup label="options" defaultChecked="option2">
 			<Radio value="option1">Option 1</Radio>
 			<Radio value="option2">Option 2</Radio>
 			<Radio value="option3">Option 3</Radio>
@@ -31,13 +26,7 @@ export const _default = () => {
 export const disabled = () => {
 	/* eslint-disable no-restricted-syntax */
 	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="disabled-radiogroup"
-			disabled
-			label="options"
-			defaultChecked="option2"
-		>
+		<RadioGroup disabled label="options" defaultChecked="option2">
 			<Radio value="option1">Option 1</Radio>
 			<Radio value="option2">Option 2</Radio>
 			<Radio value="option3">Option 3</Radio>
@@ -51,13 +40,7 @@ const ControlledRadioGroupWithState = () => {
 
 	/* eslint-disable no-restricted-syntax */
 	return (
-		<RadioGroup
-			// id is required for server side rendering
-			id="controlled-radiogroup"
-			label="options"
-			checked={ checked }
-			onChange={ setChecked }
-		>
+		<RadioGroup label="options" checked={ checked } onChange={ setChecked }>
 			<Radio value={ 0 }>Option 1</Radio>
 			<Radio value={ 1 }>Option 2</Radio>
 			<Radio value={ 2 }>Option 3</Radio>

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Radio as ReakitRadio } from 'reakit/Radio';
+import { Radio as AriakitRadio } from 'ariakit/radio';
 
 /**
  * WordPress dependencies
@@ -16,19 +16,19 @@ import RadioContext from '../radio-context';
 
 function Radio( { children, value, ...props }, ref ) {
 	const radioContext = useContext( RadioContext );
-	const checked = radioContext.state === value;
+	const checked = radioContext.value === value;
 
 	return (
-		<ReakitRadio
+		<AriakitRadio
 			ref={ ref }
 			as={ Button }
 			variant={ checked ? 'primary' : 'secondary' }
 			value={ value }
-			{ ...radioContext }
+			disabled={ radioContext.disabled }
 			{ ...props }
 		>
 			{ children || value }
-		</ReakitRadio>
+		</AriakitRadio>
 	);
 }
 

@@ -10,8 +10,7 @@ export const _default = () => {
 	// Radio components must be a descendent of a RadioGroup component.
 	/* eslint-disable no-restricted-syntax */
 	return (
-		// id is required for server side rendering
-		<RadioGroup id="default-radiogroup" label="options">
+		<RadioGroup label="options">
 			<Radio value="option1">Option 1</Radio>
 			<Radio value="option2">Option 2</Radio>
 		</RadioGroup>