AlignmentMatrixControl: do not use Composite store (#64850)

* AlignmentMatrixControl: do not use composite store * CHANGELOG
WordPress · Sep 2, 2024 · ade6863 · ade6863
1 parent c0c870c
commit ade6863
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -56,6 +56,7 @@
     -   `TreeSelect`
     -   `UnitControl`
 -   `Modal`: Update animation effect ([#64580](https://github.com/WordPress/gutenberg/pull/64580)).
+-   `AlignmentMatrixControl`: do not use composite store directly ([#64850](https://github.com/WordPress/gutenberg/pull/64850)).
 
 ### Bug Fixes
 

diff --git a/packages/components/src/alignment-matrix-control/index.tsx b/packages/components/src/alignment-matrix-control/index.tsx
@@ -8,13 +8,13 @@ import clsx from 'clsx';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Cell from './cell';
 import { Composite } from '../composite';
-import { useCompositeStore } from '../composite/store';
 import { GridContainer, GridRow } from './styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
@@ -37,23 +37,26 @@ function UnforwardedAlignmentMatrixControl( {
 		id
 	);
 
-	const compositeStore = useCompositeStore( {
-		defaultActiveId: getItemId( baseId, defaultValue ),
-		activeId: getItemId( baseId, value ),
-		setActiveId: ( nextActiveId ) => {
+	const setActiveId = useCallback<
+		NonNullable< React.ComponentProps< typeof Composite >[ 'setActiveId' ] >
+	>(
+		( nextActiveId ) => {
 			const nextValue = getItemValue( baseId, nextActiveId );
 			if ( nextValue ) {
 				onChange?.( nextValue );
 			}
 		},
-		rtl: isRTL(),
-	} );
+		[ baseId, onChange ]
+	);
 
 	const classes = clsx( 'component-alignment-matrix-control', className );
 
 	return (
 		<Composite
-			store={ compositeStore }
+			defaultActiveId={ getItemId( baseId, defaultValue ) }
+			activeId={ getItemId( baseId, value ) }
+			setActiveId={ setActiveId }
+			rtl={ isRTL() }
 			render={
 				<GridContainer
 					{ ...props }