@wordpress/components 25.9.1 → 25.11.1-next.f8d8eceb.0

package/build-types/toolbar/stories/index.story.d.ts

@@ -11,4 +11,9 @@ declare const meta: Meta<typeof Toolbar>;
 export default meta;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../toolbar/types").ToolbarProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
 export declare const WithoutGroup: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../toolbar/types").ToolbarProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
+/**
+ * Set the variant to `unstyled` to remove default border styles.
+ * Otherwise, leave it as `undefined` for default styles.
+ */
+export declare const Unstyled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, import("../toolbar/types").ToolbarProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>>, "as" | keyof import("../toolbar/types").ToolbarProps> & import("react").RefAttributes<any>>;
 //# sourceMappingURL=index.story.d.ts.map

package/build-types/toolbar/stories/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toolbar/stories/index.story.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAwBtD;;GAEG;AACH,OAAO,EACN,OAAO,EAKP,MAAM,IAAI,CAAC;AAGZ,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAoB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,iZAAsB,CAAC;AA8F3C,eAAO,MAAM,YAAY,iZAAsB,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/toolbar/stories/index.story.tsx"],"names":[],"mappings":";AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAW,MAAM,kBAAkB,CAAC;AAwBtD;;GAEG;AACH,OAAO,EACN,OAAO,EAKP,MAAM,IAAI,CAAC;AAGZ,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,OAAO,CAwB/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAgBpB,eAAO,MAAM,OAAO,iZAAsB,CAAC;AA8F3C,eAAO,MAAM,YAAY,iZAAsB,CAAC;AAahD;;;GAGG;AAEH,eAAO,MAAM,QAAQ,iZAAsB,CAAC"}

package/build-types/toolbar/toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAsD5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,uSAAmC,CAAC;AACxD,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar/index.tsx"],"names":[],"mappings":";AAiBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AA+D5C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,OAAO,uSAAmC,CAAC;AACxD,eAAe,OAAO,CAAC"}

package/build-types/toolbar/toolbar/types.d.ts

@@ -11,5 +11,15 @@ export type ToolbarProps = {
      * An accessible label for the toolbar.
      */
     label: string;
+    /**
+     * Specifies the toolbar's style.
+     *
+     * Leave undefined for the default style. Or `'unstyled'` which
+     * removes the border from the toolbar, but keeps the default
+     * popover style.
+     *
+     * @default undefined
+     */
+    variant?: 'unstyled' | undefined;
 };
 //# sourceMappingURL=types.d.ts.map

package/build-types/toolbar/toolbar/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/toolbar/toolbar/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,YAAY,GAAG;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,SAAS,CAAC;CACjC,CAAC"}

package/build-types/tools-panel/tools-panel-item/hook.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgM5D"}
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../src/tools-panel/tools-panel-item/hook.ts"],"names":[],"mappings":";AAWA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;AAG7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAIpD,wBAAgB,iBAAiB,CAChC,KAAK,EAAE,uBAAuB,CAAE,mBAAmB,EAAE,KAAK,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8L5D"}

package/build-types/tools-panel/types.d.ts

@@ -47,6 +47,8 @@ export type ToolsPanelProps = {
     /**
      * Advises the `ToolsPanel` that its child `ToolsPanelItem`s should render
      * placeholder content instead of null when they are toggled off and hidden.
+     * Note that placeholder items won't apply the `className` that would be
+     * normally applied to a visible `ToolsPanelItem` via the `className` prop.
      *
      * @default false
      */

package/build-types/tools-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}

package/build-types/tooltip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":";AAaA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,iBAAS,OAAO,CAAE,KAAK,EAAE,YAAY,eA8EpC;AAED,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tooltip/index.tsx"],"names":[],"mappings":";AAaA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C;;GAEG;AACH,eAAO,MAAM,aAAa,MAAM,CAAC;AAEjC,iBAAS,OAAO,CAAE,KAAK,EAAE,YAAY,eA6EpC;AAED,eAAe,OAAO,CAAC"}

package/build-types/unit-control/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/unit-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAiGjD;;GAEG;AACH,eAAO,MAAM,aAAa,qBAA4B,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS,qBAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAAc,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,CAAC,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE,iBAAiB,EAAE,GAChC,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAM5C;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACvB,KAAK,CAAC,EAAE,iBAAiB,EAAE,GACzB,KAAK,IAAI,iBAAiB,EAAE,CAK9B;AAED;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,GAAE,iBAAiB,EAAkB,GAC/C,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAyB5C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,6BAA6B,CAC5C,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,YAAY,CAAC,EAAE,iBAAiB,EAAE,EAClC,gBAAgB,CAAC,EAAE,MAAM,EACzB,YAAY,CAAC,EAAE,MAAM,GACnB,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAmB5C;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAG5E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACtC,iBAAiB,sBAAe,EAChC,cAAc,EAAE,iBAAiB,EAAE,GACjC,iBAAiB,EAAE,CASrB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc;;;;MAQtB,iBAAiB,EAmBrB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,MAAM,EACnB,KAAK,GAAE,iBAAiB,EAAkB,GACxC,iBAAiB,EAAE,CAkBrB"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/unit-control/utils.ts"],"names":[],"mappings":"AAMA;;GAEG;AACH,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AA6NjD;;GAEG;AACH,eAAO,MAAM,aAAa,qBAA4B,CAAC;AAEvD;;GAEG;AACH,eAAO,MAAM,SAAS,qBAOrB,CAAC;AAEF,eAAO,MAAM,YAAY,mBAAc,CAAC;AAExC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,wBAAwB,CACvC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,CAAC,EAAE,MAAM,EACrB,YAAY,CAAC,EAAE,iBAAiB,EAAE,GAChC,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAM5C;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CACvB,KAAK,CAAC,EAAE,iBAAiB,EAAE,GACzB,KAAK,IAAI,iBAAiB,EAAE,CAK9B;AAED;;;;;;;;;GASG;AACH,wBAAgB,gCAAgC,CAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,YAAY,GAAE,iBAAiB,EAAkB,GAC/C,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAyB5C;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,6BAA6B,CAC5C,QAAQ,EAAE,MAAM,GAAG,MAAM,EACzB,YAAY,CAAC,EAAE,iBAAiB,EAAE,EAClC,gBAAgB,CAAC,EAAE,MAAM,EACzB,YAAY,CAAC,EAAE,MAAM,GACnB,CAAE,MAAM,GAAG,SAAS,EAAE,MAAM,GAAG,SAAS,CAAE,CAmB5C;AAED;;;;;;GAMG;AACH,wBAAgB,yBAAyB,CAAE,IAAI,EAAE,MAAM,GAAI,MAAM,GAAG,SAAS,CAG5E;AAED;;;;;;GAMG;AACH,wBAAgB,uBAAuB,CACtC,iBAAiB,sBAAe,EAChC,cAAc,EAAE,iBAAiB,EAAE,GACjC,iBAAiB,EAAE,CASrB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,cAAc;;;;MAQtB,iBAAiB,EAmBrB,CAAC;AAEF;;;;;;;;;;;;;GAaG;AACH,wBAAgB,uBAAuB,CACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,EAC1B,UAAU,CAAC,EAAE,MAAM,EACnB,KAAK,GAAE,iBAAiB,EAAkB,GACxC,iBAAiB,EAAE,CAkBrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "25.9.1",
+	"version": "25.11.1-next.f8d8eceb.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,7 +30,8 @@
 	],
 	"types": "build-types",
 	"dependencies": {
-		"@ariakit/react": "^0.3.3",
+		"@ariakit/react": "^0.3.5",
+		"@ariakit/test": "^0.3.0",
 		"@babel/runtime": "^7.16.0",
 		"@emotion/cache": "^11.7.1",
 		"@emotion/css": "^11.7.1",
@@ -43,23 +44,23 @@
 		"@types/gradient-parser": "0.1.3",
 		"@types/highlight-words-core": "1.2.1",
 		"@use-gesture/react": "^10.2.24",
-		"@wordpress/a11y": "^3.43.0",
-		"@wordpress/compose": "^6.20.0",
-		"@wordpress/date": "^4.43.0",
-		"@wordpress/deprecated": "^3.43.0",
-		"@wordpress/dom": "^3.43.0",
-		"@wordpress/element": "^5.20.0",
-		"@wordpress/escape-html": "^2.43.0",
-		"@wordpress/hooks": "^3.43.0",
-		"@wordpress/html-entities": "^3.43.0",
-		"@wordpress/i18n": "^4.43.0",
-		"@wordpress/icons": "^9.34.0",
-		"@wordpress/is-shallow-equal": "^4.43.0",
-		"@wordpress/keycodes": "^3.43.0",
-		"@wordpress/primitives": "^3.41.0",
-		"@wordpress/private-apis": "^0.25.0",
-		"@wordpress/rich-text": "^6.20.1",
-		"@wordpress/warning": "^2.43.0",
+		"@wordpress/a11y": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/compose": "^6.21.1-next.f8d8eceb.0",
+		"@wordpress/date": "^4.44.1-next.f8d8eceb.0",
+		"@wordpress/deprecated": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/dom": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/element": "^5.21.1-next.f8d8eceb.0",
+		"@wordpress/escape-html": "^2.44.1-next.f8d8eceb.0",
+		"@wordpress/hooks": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/html-entities": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/i18n": "^4.44.1-next.f8d8eceb.0",
+		"@wordpress/icons": "^9.35.1-next.f8d8eceb.0",
+		"@wordpress/is-shallow-equal": "^4.44.1-next.f8d8eceb.0",
+		"@wordpress/keycodes": "^3.44.1-next.f8d8eceb.0",
+		"@wordpress/primitives": "^3.42.1-next.f8d8eceb.0",
+		"@wordpress/private-apis": "^0.26.1-next.f8d8eceb.0",
+		"@wordpress/rich-text": "^6.21.1-next.f8d8eceb.0",
+		"@wordpress/warning": "^2.44.1-next.f8d8eceb.0",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.7.0",
@@ -89,5 +90,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e17f760ed0dc11cce78157d7c2f2086b1b3c09d8"
+	"gitHead": "8d8fd197e202b8104ffb1cb83048efd0a6c3faf4"
 }

package/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';
 
@@ -17,6 +17,7 @@ import type { AlignmentMatrixControlCellProps } from './types';
 import type { WordPressComponentProps } from '../context';
 
 export default function Cell( {
+	id,
 	isActive = false,
 	value,
 	...props
@@ -25,7 +26,10 @@ export default function Cell( {
 
 	return (
 		<Tooltip text={ tooltipText }>
-			<CompositeItem as={ CellView } role="gridcell" { ...props }>
+			<CompositeItem
+				id={ id }
+				render={ <CellView { ...props } role="gridcell" /> }
+			>
 				{ /* VoiceOver needs a text content to be rendered within grid cell,
 			otherwise it'll announce the content as "blank". So we use a visually
 			hidden element instead of aria-label. */ }

package/src/alignment-matrix-control/index.tsx

@@ -8,32 +8,17 @@ import classnames from 'classnames';
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
-import { useState, useEffect } 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 } from './utils';
 import type { WordPressComponentProps } from '../context';
-import type {
-	AlignmentMatrixControlProps,
-	AlignmentMatrixControlValue,
-} from './types';
-
-const noop = () => {};
-
-function useBaseId( id?: string ) {
-	const instanceId = useInstanceId(
-		AlignmentMatrixControl,
-		'alignment-matrix-control'
-	);
-
-	return id || instanceId;
-}
+import type { AlignmentMatrixControlProps } from './types';
 
 /**
  *
@@ -61,31 +46,27 @@ export function AlignmentMatrixControl( {
 	label = __( 'Alignment Matrix Control' ),
 	defaultValue = 'center center',
 	value,
-	onChange = noop,
+	onChange,
 	width = 92,
 	...props
 }: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {
-	const [ immutableDefaultValue ] = useState( value ?? defaultValue );
-	const baseId = useBaseId( id );
-	const initialCurrentId = getItemId( baseId, immutableDefaultValue );
+	const baseId = useInstanceId(
+		AlignmentMatrixControl,
+		'alignment-matrix-control',
+		id
+	);
 
-	const composite = useCompositeState( {
-		baseId,
-		currentId: initialCurrentId,
+	const compositeStore = useCompositeStore( {
+		defaultActiveId: getItemId( baseId, defaultValue ),
+		activeId: getItemId( baseId, value ),
+		setActiveId: ( nextActiveId ) => {
+			const nextValue = getItemValue( baseId, nextActiveId );
+			if ( nextValue ) onChange?.( nextValue );
+		},
 		rtl: isRTL(),
 	} );
 
-	const handleOnChange = ( nextValue: AlignmentMatrixControlValue ) => {
-		onChange( nextValue );
-	};
-
-	const { setCurrentId } = composite;
-
-	useEffect( () => {
-		if ( typeof value !== 'undefined' ) {
-			setCurrentId( getItemId( baseId, value ) );
-		}
-	}, [ value, setCurrentId, baseId ] );
+	const activeId = compositeStore.useState( 'activeId' );
 
 	const classes = classnames(
 		'component-alignment-matrix-control',
@@ -94,38 +75,34 @@ export function AlignmentMatrixControl( {
 
 	return (
 		<Composite
-			{ ...props }
-			{ ...composite }
-			aria-label={ label }
-			as={ Root }
-			className={ classes }
-			role="grid"
-			size={ width }
+			store={ compositeStore }
+			render={
+				<Root
+					{ ...props }
+					aria-label={ label }
+					className={ classes }
+					id={ baseId }
+					role="grid"
+					size={ width }
+				/>
+			}
 		>
 			{ GRID.map( ( cells, index ) => (
-				<CompositeGroup
-					{ ...composite }
-					as={ Row }
-					role="row"
-					key={ index }
-				>
+				<CompositeRow render={ <Row role="row" /> } key={ index }>
 					{ cells.map( ( cell ) => {
 						const cellId = getItemId( baseId, cell );
-						const isActive = composite.currentId === cellId;
+						const isActive = cellId === activeId;
 
 						return (
 							<Cell
-								{ ...composite }
 								id={ cellId }
 								isActive={ isActive }
 								key={ cell }
 								value={ cell }
-								onFocus={ () => handleOnChange( cell ) }
-								tabIndex={ isActive ? 0 : -1 }
 							/>
 						);
 					} ) }
-				</CompositeGroup>
+				</CompositeRow>
 			) ) }
 		</Composite>
 	);

package/src/alignment-matrix-control/stories/index.story.tsx

@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from '@storybook/react';
 /**
  * WordPress dependencies
  */
-import { useEffect, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import { Icon } from '@wordpress/icons';
 
 /**
@@ -24,10 +24,11 @@ const meta: Meta< typeof AlignmentMatrixControl > = {
 		'AlignmentMatrixControl.Icon': AlignmentMatrixControl.Icon,
 	},
 	argTypes: {
-		onChange: { action: 'onChange', control: { type: null } },
+		onChange: { control: { type: null } },
 		value: { control: { type: null } },
 	},
 	parameters: {
+		actions: { argTypesRegex: '^on.*' },
 		controls: { expanded: true },
 		docs: { canvas: { sourceState: 'shown' } },
 	},
@@ -42,11 +43,6 @@ const Template: StoryFn< typeof AlignmentMatrixControl > = ( {
 	const [ value, setValue ] =
 		useState< AlignmentMatrixControlProps[ 'value' ] >();
 
-	// Convenience handler for Canvas view so changes are reflected
-	useEffect( () => {
-		setValue( defaultValue );
-	}, [ defaultValue ] );
-
 	return (
 		<AlignmentMatrixControl
 			{ ...props }

package/src/alignment-matrix-control/test/index.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -17,34 +17,133 @@ const getCell = ( name: string ) => {
 	return within( getControl() ).getByRole( 'gridcell', { name } );
 };
 
+const renderAndInitCompositeStore = async (
+	jsx: JSX.Element,
+	focusedCell = 'center center'
+) => {
+	const view = render( jsx );
+	await waitFor( () => {
+		expect( getCell( focusedCell ) ).toHaveAttribute( 'tabindex', '0' );
+	} );
+	return view;
+};
+
 describe( 'AlignmentMatrixControl', () => {
 	describe( 'Basic rendering', () => {
-		it( 'should render', () => {
-			render( <AlignmentMatrixControl /> );
+		it( 'should render', async () => {
+			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
 
 			expect( getControl() ).toBeInTheDocument();
 		} );
+
+		it( 'should be centered by default', async () => {
+			const user = userEvent.setup();
+
+			await renderAndInitCompositeStore( <AlignmentMatrixControl /> );
+
+			await user.tab();
+
+			expect( getCell( 'center center' ) ).toHaveFocus();
+		} );
 	} );
 
-	describe( 'Change value', () => {
-		const alignments = [ 'center left', 'center center', 'bottom center' ];
-		const user = userEvent.setup();
+	describe( 'Should change value', () => {
+		describe( 'with Mouse', () => {
+			describe( 'on cell click', () => {
+				it.each( [
+					'top left',
+					'top center',
+					'top right',
+					'center left',
+					'center right',
+					'bottom left',
+					'bottom center',
+					'bottom right',
+				] )( '%s', async ( alignment ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl
+							value="center"
+							onChange={ spy }
+						/>
+					);
+
+					const cell = getCell( alignment );
+
+					await user.click( cell );
 
-		it.each( alignments )(
-			'should change value on %s cell click',
-			async ( alignment ) => {
-				const spy = jest.fn();
+					expect( cell ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( alignment );
+				} );
 
-				render(
-					<AlignmentMatrixControl value="center" onChange={ spy } />
-				);
+				it( 'unless already focused', async () => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
 
-				await user.click( getCell( alignment ) );
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl
+							value="center"
+							onChange={ spy }
+						/>
+					);
 
-				expect( getCell( alignment ) ).toHaveFocus();
+					const cell = getCell( 'center center' );
 
-				expect( spy ).toHaveBeenCalledWith( alignment );
-			}
-		);
+					await user.click( cell );
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).not.toHaveBeenCalled();
+				} );
+			} );
+		} );
+
+		describe( 'with Keyboard', () => {
+			describe( 'on arrow press', () => {
+				it.each( [
+					[ 'ArrowUp', 'top center' ],
+					[ 'ArrowLeft', 'center left' ],
+					[ 'ArrowDown', 'bottom center' ],
+					[ 'ArrowRight', 'center right' ],
+				] )( '%s', async ( keyRef, cellRef ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl onChange={ spy } />
+					);
+
+					await user.tab();
+					await user.keyboard( `[${ keyRef }]` );
+
+					expect( getCell( cellRef ) ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( cellRef );
+				} );
+			} );
+
+			describe( 'but not at at edge', () => {
+				it.each( [
+					[ 'ArrowUp', 'top left' ],
+					[ 'ArrowLeft', 'top left' ],
+					[ 'ArrowDown', 'bottom right' ],
+					[ 'ArrowRight', 'bottom right' ],
+				] )( '%s', async ( keyRef, cellRef ) => {
+					const user = userEvent.setup();
+					const spy = jest.fn();
+
+					await renderAndInitCompositeStore(
+						<AlignmentMatrixControl onChange={ spy } />
+					);
+
+					const cell = getCell( cellRef );
+					await user.click( cell );
+					await user.keyboard( `[${ keyRef }]` );
+
+					expect( cell ).toHaveFocus();
+					expect( spy ).toHaveBeenCalledWith( cellRef );
+				} );
+			} );
+		} );
 	} );
 } );

package/src/alignment-matrix-control/utils.tsx

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+
 /**
  * Internal dependencies
  */
@@ -31,16 +32,24 @@ 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 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;
+function normalize( value?: string | null ) {
+	const normalized = value === 'center' ? 'center center' : value;
+
+	// Strictly speaking, this could be `string | null | undefined`,
+	// but will be validated shortly, so we're typecasting to an
+	// `AlignmentMatrixControlValue` to keep TypeScript happy.
+	const transformed = normalized?.replace(
+		'-',
+		' '
+	) as AlignmentMatrixControlValue;
 
-	return nextValue.replace( '-', ' ' ) as AlignmentMatrixControlValue;
+	return ALIGNMENTS.includes( transformed ) ? transformed : undefined;
 }
 
 /**
@@ -53,11 +62,25 @@ export function transformValue( value: AlignmentMatrixControlValue ) {
  */
 export function getItemId(
 	prefixId: string,
-	value: AlignmentMatrixControlValue
+	value?: AlignmentMatrixControlValue
 ) {
-	const valueId = transformValue( value ).replace( ' ', '-' );
+	const normalized = normalize( value );
+	if ( ! normalized ) return;
+
+	const id = normalized.replace( ' ', '-' );
+	return `${ prefixId }-${ id }`;
+}
 
-	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 | null ) {
+	const value = id?.replace( prefixId + '-', '' );
+	return normalize( value );
 }
 
 /**
@@ -70,8 +93,9 @@ export function getItemId(
 export function getAlignmentIndex(
 	alignment: AlignmentMatrixControlValue = 'center'
 ) {
-	const item = transformValue( alignment );
-	const index = ALIGNMENTS.indexOf( item );
+	const normalized = normalize( alignment );
+	if ( ! normalized ) return undefined;
 
+	const index = ALIGNMENTS.indexOf( normalized );
 	return index > -1 ? index : undefined;
 }