diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 0021df7a361106..1c8f0d82a15d0d 100644 --- 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 index fcf8c2fd470156..0e3c23623883fc 100644 --- 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 (