First pass at ariakit implementation

WordPress · Sep 6, 2023 · 9b5e714 · 9b5e714
1 parent c1cf571
commit 9b5e714
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 44 deletions.
diff --git a/packages/components/src/alignment-matrix-control/cell.tsx b/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';
 

diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
@@ -8,16 +8,16 @@ 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, 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, normalizeValue } from './utils';
 import type { WordPressComponentProps } from '../ui/context';
 import type {
 	AlignmentMatrixControlProps,
@@ -26,15 +26,6 @@ import type {
 
 const noop = () => {};
 
-function useBaseId( id?: string ) {
-	const instanceId = useInstanceId(
-		AlignmentMatrixControl,
-		'alignment-matrix-control'
-	);
-
-	return id || instanceId;
-}
-
 /**
  *
  * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
@@ -65,27 +56,31 @@ export function AlignmentMatrixControl( {
 	width = 92,
 	...props
 }: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
-	const [ immutableDefaultValue ] = useState( value ?? defaultValue );
-	const baseId = useBaseId( id );
-	const initialCurrentId = getItemId( baseId, immutableDefaultValue );
+	const [ immutableDefaultValue ] = useState(
+		normalizeValue( value ?? defaultValue )
+	);
+	const currentCell = normalizeValue( value ?? immutableDefaultValue );
 
-	const composite = useCompositeState( {
-		baseId,
-		currentId: initialCurrentId,
-		rtl: isRTL(),
-	} );
+	const baseId = useInstanceId(
+		AlignmentMatrixControl,
+		'alignment-matrix-control',
+		id
+	);
+	const defaultActiveId = getItemId( baseId, immutableDefaultValue );
 
 	const handleOnChange = ( nextValue: AlignmentMatrixControlValue ) => {
 		onChange( nextValue );
 	};
 
-	const { setCurrentId } = composite;
-
-	useEffect( () => {
-		if ( typeof value !== 'undefined' ) {
-			setCurrentId( getItemId( baseId, value ) );
-		}
-	}, [ value, setCurrentId, baseId ] );
+	const compositeStore = useCompositeStore( {
+		defaultActiveId,
+		setActiveId: ( activeId ) => {
+			if ( activeId ) {
+				handleOnChange( getItemValue( baseId, activeId ) );
+			}
+		},
+		rtl: isRTL(),
+	} );
 
 	const classes = classnames(
 		'component-alignment-matrix-control',
@@ -95,37 +90,30 @@ export function AlignmentMatrixControl( {
 	return (
 		<Composite
 			{ ...props }
-			{ ...composite }
+			store={ compositeStore }
 			aria-label={ label }
 			as={ Root }
+			id={ baseId }
 			className={ classes }
 			role="grid"
 			size={ 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 = cell === currentCell;
 
 						return (
 							<Cell
-								{ ...composite }
 								id={ cellId }
 								isActive={ isActive }
 								key={ cell }
 								value={ cell }
-								onFocus={ () => handleOnChange( cell ) }
-								tabIndex={ isActive ? 0 : -1 }
 							/>
 						);
 					} ) }
-				</CompositeGroup>
+				</CompositeRow>
 			) ) }
 		</Composite>
 	);

diff --git a/packages/components/src/alignment-matrix-control/utils.tsx b/packages/components/src/alignment-matrix-control/utils.tsx
@@ -31,16 +31,28 @@ export const ALIGNMENT_LABEL: Record< AlignmentMatrixControlValue, string > = {
 export const ALIGNMENTS = GRID.flat();
 
 /**
- * Parses and transforms an incoming value to better match the alignment values
+ * Normalizes an incoming value to better match the alignment values
+ *
+ * @param value an alignment value to normalize
+ *
+ * @return The normalized value
+ */
+export function normalizeValue( value: AlignmentMatrixControlValue ) {
+	return value === 'center' ? 'center center' : value;
+}
+
+/**
+ * Normalizes and transforms an incoming value to better match the alignment values
  *
  * @param value An alignment value to parse.
  *
  * @return The parsed value.
  */
 export function transformValue( value: AlignmentMatrixControlValue ) {
-	const nextValue = value === 'center' ? 'center center' : value;
-
-	return nextValue.replace( '-', ' ' ) as AlignmentMatrixControlValue;
+	return normalizeValue( value ).replace(
+		'-',
+		' '
+	) as AlignmentMatrixControlValue;
 }
 
 /**
@@ -60,6 +72,19 @@ export function getItemId(
 	return `${ prefixId }-${ valueId }`;
 }
 
+/**
+ * Extracts an item value from its ID
+ *
+ * @param prefixId An ID prefix to remove
+ * @param id       An item ID
+ * @return         The item value
+ */
+export function getItemValue( prefixId: string, id: string ) {
+	return transformValue(
+		id.replace( prefixId + '-', '' ) as AlignmentMatrixControlValue
+	);
+}
+
 /**
  * Retrieves the alignment index from a value.
  *