@wordpress/components 28.6.0 → 28.8.0

package/CHANGELOG.md

@@ -2,6 +2,128 @@
 
 ## Unreleased
 
+## 28.8.0 (2024-09-19)
+
+### Bug Fixes
+
+-   `Tabs`: restore vertical indicator ([#65385](https://github.com/WordPress/gutenberg/pull/65385)).
+-   `Tabs`: indicator positioning under RTL direction ([#64926](https://github.com/WordPress/gutenberg/pull/64926)).
+-   `Popover`: Update `toolbar` variant radius to match block toolbar ([#65263](https://github.com/WordPress/gutenberg/pull/65263)).
+-   `BoxControl`: Unify input filed width whether linked or not ([#65348](https://github.com/WordPress/gutenberg/pull/65348)).
+
+### Deprecations
+
+-   Deprecate `__unstableComposite`, `__unstableCompositeGroup`, `__unstableCompositeItem` and `__unstableUseCompositeState`. Consumers of the package should use the stable `Composite` component instead ([#63572](https://github.com/WordPress/gutenberg/pull/63572)).
+
+### New Features
+
+-   `Composite`: add stable version of the component ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).
+-   `ComboboxControl`: add support for `placeholder` attribute ([#65254](https://github.com/WordPress/gutenberg/pull/65254)).
+
+### Enhancements
+
+-   `Navigator`: warn if a screen's `path` doesn't follow a URL-like scheme ([#65231](https://github.com/WordPress/gutenberg/pull/65231)).
+-   `Modal`: Decrease close button size and remove horizontal offset ([#65131](https://github.com/WordPress/gutenberg/pull/65131)).
+-   `CustomSelectControl V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `DropdownMenu V2`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `FormToggle`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Popover`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `RangeControl`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `ResizeableBox`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Snackbar`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Tooltip`: Adopt elevation scale ([#65159](https://github.com/WordPress/gutenberg/pull/65159)).
+-   `Modal`: add exit animation for internally triggered events ([#65203](https://github.com/WordPress/gutenberg/pull/65203)).
+-   `Card`: Adopt radius scale ([#65053](https://github.com/WordPress/gutenberg/pull/65053)).
+
+### Bug Fixes
+
+-   `DatePicker`: better hover/focus styles ([#65117](https://github.com/WordPress/gutenberg/pull/65117)).
+
+### Internal
+
+-   `Tabs`: improved performance of the indicator animation ([#64926](https://github.com/WordPress/gutenberg/pull/64926)).
+-   `Composite`: Remove from private APIs ([#63569](https://github.com/WordPress/gutenberg/pull/63569)).
+-   use local copy of `use-lilius` instead of `npm` dependency ([#65097](https://github.com/WordPress/gutenberg/pull/65097)).
+-   `BoxControl`: Fix critical error when null value is passed ([#65287](https://github.com/WordPress/gutenberg/pull/65287)).
+
+## 28.7.0 (2024-09-05)
+
+### Deprecations
+
+-   Deprecate `replace` from the options accepted by `useNavigator().goTo()` ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
+-   Soft deprecate `size` prop on `AlignmentMatrixControl.Icon` ([#64827](https://github.com/WordPress/gutenberg/pull/64827)).
+-   `__experimentalAlignmentMatrixControl` can now be imported as a stable `AlignmentMatrixControl` ([#60913](https://github.com/WordPress/gutenberg/pull/60913)).
+-   Deprecate `DimensionControl`, scheduled to be removed in WordPress 7.0 ([#64951](https://github.com/WordPress/gutenberg/pull/64951)).
+
+### Enhancements
+
+-   `ColorPicker`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `CustomSelectControl V2`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `AlignmentMatrixControl.Icon`: rewrite entirely using SVG markup ([#64827](https://github.com/WordPress/gutenberg/pull/64827)).
+-   `DateTime`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `FormToggle`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `FormTokenField`: Remove unused border-radius ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `InputControl`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `Navigation`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `RangeControl`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `ResizeableBox`: Adopt radius scale ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `TabPanel`: Remove radius applied to panel focus style ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `Tabs`: Remove radius applied to panel focus style ([#64693](https://github.com/WordPress/gutenberg/pull/64693)).
+-   `UnitControl`: Update unit select styles ([#64712](https://github.com/WordPress/gutenberg/pull/64712)).
+-   `InputControl`: Add variants to prefix/suffix wrappers ([#64824](https://github.com/WordPress/gutenberg/pull/64824)).
+-   `Navigator`: remove location history, simplify internal logic ([#64675](https://github.com/WordPress/gutenberg/pull/64675)).
+-   `AlignmentMatrixControl`: Promote to stable ([#60913](https://github.com/WordPress/gutenberg/pull/60913)).
+-   Tighten gap between the main control and the prefix/suffix slot for the following components ([#64908](https://github.com/WordPress/gutenberg/pull/64908)).
+    -   `InputControl`
+    -   `NumberControl`
+    -   `SelectControl`
+    -   `TreeSelect`
+    -   `UnitControl`
+    -   Contains internal visual changes from this PR:
+        -   `AnglePickerControl`
+        -   `ColorPicker`
+-   Decrease horizontal padding from 16px to 12px on the following components, when in the 40px default size ([#64708](https://github.com/WordPress/gutenberg/pull/64708)).
+    -   `AnglePickerControl`
+    -   `ColorPicker` (on the inputs)
+    -   `CustomSelectControl`
+    -   `CustomSelectControlV2`
+    -   `DateTimePicker` (on the selects and inputs)
+    -   `DimensionControl`
+    -   `FocalPointPicker` (on the inputs)
+    -   `FontSizePicker` (on the custom inputs)
+    -   `GradientPicker` (on the selects and inputs)
+    -   `InputControl`
+    -   `NumberControl`
+    -   `QueryControls` (on the selects and inputs)
+    -   `RangeControl` (on the inputs)
+    -   `SearchControl`
+    -   `SelectControl`
+    -   `TextControl`
+    -   `TimePicker` (on the inputs)
+    -   `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)).
+-   `CircularOptionPicker`: do not use composite store directly ([#64833](https://github.com/WordPress/gutenberg/pull/64833)).
+
+### Bug Fixes
+
+-   `TimePicker`: use ToggleGroupControl for AM/PM toggle ([#64800](https://github.com/WordPress/gutenberg/pull/64800)).
+-   `ColorPalette` utils: do not normalize undefined color values ([#64969](https://github.com/WordPress/gutenberg/pull/64969)).
+-   `DatePicker` restore round radius for event dot ([#65031](https://github.com/WordPress/gutenberg/pull/65031)).
+
+### Internal
+
+-   `DropdownMenu` v2: expose CompositeTypeaheadV2 and CompositeHoverV2 via private APIs ([#64985](https://github.com/WordPress/gutenberg/pull/64985)).
+-   `DropdownMenu` v2: fix flashing menu item styles when using keyboard ([#64873](https://github.com/WordPress/gutenberg/pull/64873), [#64942](https://github.com/WordPress/gutenberg/pull/64942)).
+-   `DropdownMenu` v2: refactor to overloaded naming convention ([#64654](https://github.com/WordPress/gutenberg/pull/64654)).
+-   `DropdownMenu` v2: add `GroupLabel` subcomponent ([#64854](https://github.com/WordPress/gutenberg/pull/64854)).
+-   `DropdownMenuV2`: update animation ([#64868](https://github.com/WordPress/gutenberg/pull/64868)).
+-   `Composite` V2: fix Storybook docgen ([#64682](https://github.com/WordPress/gutenberg/pull/64682)).
+-   `Composite` V2: add "With Slot Fill" example ([#65051](https://github.com/WordPress/gutenberg/pull/65051)).
+-   `Composite` V2: accept store props on top-level component ([#64832](https://github.com/WordPress/gutenberg/pull/64832)).
+-   `Composite` V2: remove `store` prop and `useCompositeStore` hook ([#64723](https://github.com/WordPress/gutenberg/pull/64723)).
+
 ## 28.6.0 (2024-08-21)
 
 ### Deprecations

package/CONTRIBUTING.md

@@ -248,6 +248,7 @@ To meet the above requirements, we recommend:
 
 -   using `Object.assign()` to add subcomponents as properties of the top-level component;
 -   using named functions for all components;
+-   using a separate file for each component, context and hook;
 -   setting explicitly the `displayName` on all subcomponents;
 -   adding the top-level JSDoc to the result of the `Object.assign` call;
 -   adding inline subcomponent JSDocs inside the `Object.assign` call.
@@ -256,36 +257,58 @@ The following example implements all of the above recommendations.
 
 ```tsx
 //=======================
-// Component.tsx
+// subcomponent.tsx
 //=======================
-import { forwardRef, createContext } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
-function UnforwardedTopLevelComponent( props, ref ) {
-	/* ... */
-}
-const TopLevelComponent = forwardRef( UnforwardedTopLevelComponent );
+export const ComponentSubcomponent = forwardRef(
+	function UnforwardedComponentSubcomponent( props, ref ) {
+		/* ... */
+	}
+);
 
-function UnforwardedSubComponent( props, ref ) {
-	/* ... */
-}
-const SubComponent = forwardRef( UnforwardedSubComponent );
-SubComponent.displayName = 'Component.SubComponent';
+//=======================
+// context.ts
+//=======================
+import { createContext } from '@wordpress/element';
 
-const Context = createContext();
+export const ComponentContext = createContext();
 
-/** The top-level component's JSDoc. */
-export const Component = Object.assign( TopLevelComponent, {
-	/** The subcomponent's JSDoc. */
-	SubComponent,
-	/** The context's JSDoc. */
-	Context,
-} );
+//=======================
+// hook.ts
+//=======================
 
 /** The hook's JSDoc. */
 export function useComponent() {
 	/* ... */
 }
 
+//=======================
+// component.tsx
+//=======================
+import { forwardRef } from '@wordpress/element';
+import { ComponentSubcomponent } from './subcomponent';
+import { ComponentContext } from './context';
+
+/** The top-level component's JSDoc. */
+export const Component = Object.assign(
+	forwardRef( function UnforwardedTopLevelComponent( props, ref ) {
+		/* ... */
+	} ),
+	{
+		/** The subcomponent's JSDoc. */
+		Subcomponent: Object.assign(ComponentSubcomponent, {
+			displayName: 'Component.SubComponent';,
+		}),
+		/** The context's JSDoc. */
+		Context: Object.assign(ComponentContext, {
+			displayName: 'Component.Context'
+		}),
+	}
+);
+
+export default Component;
+
 //=======================
 // App.tsx
 //=======================

package/build/alignment-matrix-control/cell.js

@@ -9,7 +9,7 @@ var _composite = require("../composite");
 var _tooltip = _interopRequireDefault(require("../tooltip"));
 var _visuallyHidden = require("../visually-hidden");
 var _utils = require("./utils");
-var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-styles");
+var _styles = require("./styles");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
@@ -21,23 +21,20 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function Cell({
   id,
-  isActive = false,
   value,
   ...props
 }) {
-  const tooltipText = _utils.ALIGNMENT_LABEL[value];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.default, {
-    text: tooltipText,
+    text: _utils.ALIGNMENT_LABEL[value],
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_composite.Composite.Item, {
       id: id,
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Cell, {
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Cell, {
         ...props,
         role: "gridcell"
       }),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_visuallyHidden.VisuallyHidden, {
         children: value
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Point, {
-        isActive: isActive,
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Point, {
         role: "presentation"
       })]
     })

package/build/alignment-matrix-control/cell.js.map

@@ -1 +1 @@
-{"version":3,"names":["_composite","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_alignmentMatrixControlStyles","_jsxRuntime","Cell","id","isActive","value","props","tooltipText","ALIGNMENT_LABEL","jsx","default","text","children","jsxs","Composite","Item","render","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport {\n\tCell as CellView,\n\tPoint,\n} from './styles/alignment-matrix-control-styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tisActive = false,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\tconst tooltipText = ALIGNMENT_LABEL[ value ];\n\n\treturn (\n\t\t<Tooltip text={ tooltipText }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point isActive={ isActive } role=\"presentation\" />\n\t\t\t</Composite.Item>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,6BAAA,GAAAL,OAAA;AAGkD,IAAAM,WAAA,GAAAN,OAAA;AAdlD;AACA;AACA;;AAKA;AACA;AACA;;AASe,SAASO,IAAIA,CAAE;EAC7BC,EAAE;EACFC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGC,sBAAe,CAAEH,KAAK,CAAE;EAE5C,oBACC,IAAAJ,WAAA,CAAAQ,GAAA,EAACb,QAAA,CAAAc,OAAO;IAACC,IAAI,EAAGJ,WAAa;IAAAK,QAAA,eAC5B,IAAAX,WAAA,CAAAY,IAAA,EAACnB,UAAA,CAAAoB,SAAS,CAACC,IAAI;MACdZ,EAAE,EAAGA,EAAI;MACTa,MAAM,eAAG,IAAAf,WAAA,CAAAQ,GAAA,EAACT,6BAAA,CAAAE,IAAQ;QAAA,GAAMI,KAAK;QAAGW,IAAI,EAAC;MAAU,CAAE,CAAG;MAAAL,QAAA,gBAKpD,IAAAX,WAAA,CAAAQ,GAAA,EAACX,eAAA,CAAAoB,cAAc;QAAAN,QAAA,EAAGP;MAAK,CAAkB,CAAC,eAC1C,IAAAJ,WAAA,CAAAQ,GAAA,EAACT,6BAAA,CAAAmB,KAAK;QAACf,QAAQ,EAAGA,QAAU;QAACa,IAAI,EAAC;MAAc,CAAE,CAAC;IAAA,CACpC;EAAC,CACT,CAAC;AAEZ","ignoreList":[]}
+{"version":3,"names":["_composite","require","_tooltip","_interopRequireDefault","_visuallyHidden","_utils","_styles","_jsxRuntime","Cell","id","value","props","jsx","default","text","ALIGNMENT_LABEL","children","jsxs","Composite","Item","render","role","VisuallyHidden","Point"],"sources":["@wordpress/components/src/alignment-matrix-control/cell.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { Composite } from '../composite';\nimport Tooltip from '../tooltip';\nimport { VisuallyHidden } from '../visually-hidden';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENT_LABEL } from './utils';\nimport { Cell as CellView, Point } from './styles';\nimport type { AlignmentMatrixControlCellProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nexport default function Cell( {\n\tid,\n\tvalue,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlCellProps, 'span', false > ) {\n\treturn (\n\t\t<Tooltip text={ ALIGNMENT_LABEL[ value ] }>\n\t\t\t<Composite.Item\n\t\t\t\tid={ id }\n\t\t\t\trender={ <CellView { ...props } role=\"gridcell\" /> }\n\t\t\t>\n\t\t\t\t{ /* VoiceOver needs a text content to be rendered within grid cell,\n\t\t\totherwise it'll announce the content as \"blank\". So we use a visually\n\t\t\thidden element instead of aria-label. */ }\n\t\t\t\t<VisuallyHidden>{ value }</VisuallyHidden>\n\t\t\t\t<Point role=\"presentation\" />\n\t\t\t</Composite.Item>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,QAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AAKA,IAAAI,MAAA,GAAAJ,OAAA;AACA,IAAAK,OAAA,GAAAL,OAAA;AAAmD,IAAAM,WAAA,GAAAN,OAAA;AAXnD;AACA;AACA;;AAKA;AACA;AACA;;AAMe,SAASO,IAAIA,CAAE;EAC7BC,EAAE;EACFC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,oBACC,IAAAJ,WAAA,CAAAK,GAAA,EAACV,QAAA,CAAAW,OAAO;IAACC,IAAI,EAAGC,sBAAe,CAAEL,KAAK,CAAI;IAAAM,QAAA,eACzC,IAAAT,WAAA,CAAAU,IAAA,EAACjB,UAAA,CAAAkB,SAAS,CAACC,IAAI;MACdV,EAAE,EAAGA,EAAI;MACTW,MAAM,eAAG,IAAAb,WAAA,CAAAK,GAAA,EAACN,OAAA,CAAAE,IAAQ;QAAA,GAAMG,KAAK;QAAGU,IAAI,EAAC;MAAU,CAAE,CAAG;MAAAL,QAAA,gBAKpD,IAAAT,WAAA,CAAAK,GAAA,EAACR,eAAA,CAAAkB,cAAc;QAAAN,QAAA,EAAGN;MAAK,CAAkB,CAAC,eAC1C,IAAAH,WAAA,CAAAK,GAAA,EAACN,OAAA,CAAAiB,KAAK;QAACF,IAAI,EAAC;MAAc,CAAE,CAAC;IAAA,CACd;EAAC,CACT,CAAC;AAEZ","ignoreList":[]}

package/build/alignment-matrix-control/icon.js

@@ -6,45 +6,57 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
+var _primitives = require("@wordpress/primitives");
 var _utils = require("./utils");
-var _alignmentMatrixControlIconStyles = require("./styles/alignment-matrix-control-icon-styles");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
 
+/**
+ * WordPress dependencies
+ */
+
 /**
  * Internal dependencies
  */
 
 const BASE_SIZE = 24;
+const GRID_CELL_SIZE = 7;
+const GRID_PADDING = (BASE_SIZE - 3 * GRID_CELL_SIZE) / 2;
+const DOT_SIZE = 2;
+const DOT_SIZE_SELECTED = 4;
 function AlignmentMatrixControlIcon({
   className,
   disablePointerEvents = true,
-  size = BASE_SIZE,
+  size,
+  width,
+  height,
   style = {},
   value = 'center',
   ...props
 }) {
-  const alignIndex = (0, _utils.getAlignmentIndex)(value);
-  const scale = (size / BASE_SIZE).toFixed(2);
-  const classes = (0, _clsx.default)('component-alignment-matrix-control-icon', className);
-  const styles = {
-    ...style,
-    transform: `scale(${scale})`
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Root, {
-    ...props,
-    className: classes,
-    disablePointerEvents: disablePointerEvents,
+  var _ref, _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.SVG, {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: `0 0 ${BASE_SIZE} ${BASE_SIZE}`,
+    width: (_ref = size !== null && size !== void 0 ? size : width) !== null && _ref !== void 0 ? _ref : BASE_SIZE,
+    height: (_ref2 = size !== null && size !== void 0 ? size : height) !== null && _ref2 !== void 0 ? _ref2 : BASE_SIZE,
     role: "presentation",
-    style: styles,
+    className: (0, _clsx.default)('component-alignment-matrix-control-icon', className),
+    style: {
+      pointerEvents: disablePointerEvents ? 'none' : undefined,
+      ...style
+    },
+    ...props,
     children: _utils.ALIGNMENTS.map((align, index) => {
-      const isActive = alignIndex === index;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Cell, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlIconStyles.Point, {
-          isActive: isActive
-        })
+      const dotSize = (0, _utils.getAlignmentIndex)(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_primitives.Rect, {
+        x: GRID_PADDING + index % 3 * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
+        y: GRID_PADDING + Math.floor(index / 3) * GRID_CELL_SIZE + (GRID_CELL_SIZE - dotSize) / 2,
+        width: dotSize,
+        height: dotSize,
+        fill: "currentColor"
       }, align);
     })
   });

package/build/alignment-matrix-control/icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_utils","_alignmentMatrixControlIconStyles","_jsxRuntime","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","getAlignmentIndex","scale","toFixed","classes","clsx","styles","transform","jsx","Root","role","children","ALIGNMENTS","map","align","index","isActive","Cell","Point","_default","exports","default"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport {\n\tRoot,\n\tCell,\n\tPoint,\n} from './styles/alignment-matrix-control-icon-styles';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst BASE_SIZE = 24;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize = BASE_SIZE,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'div', false > ) {\n\tconst alignIndex = getAlignmentIndex( value );\n\tconst scale = ( size / BASE_SIZE ).toFixed( 2 );\n\n\tconst classes = clsx(\n\t\t'component-alignment-matrix-control-icon',\n\t\tclassName\n\t);\n\n\tconst styles = {\n\t\t...style,\n\t\ttransform: `scale(${ scale })`,\n\t};\n\n\treturn (\n\t\t<Root\n\t\t\t{ ...props }\n\t\t\tclassName={ classes }\n\t\t\tdisablePointerEvents={ disablePointerEvents }\n\t\t\trole=\"presentation\"\n\t\t\tstyle={ styles }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst isActive = alignIndex === index;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Cell key={ align }>\n\t\t\t\t\t\t<Point isActive={ isActive } />\n\t\t\t\t\t</Cell>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Root>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,iCAAA,GAAAF,OAAA;AAIuD,IAAAG,WAAA,GAAAH,OAAA;AAbvD;AACA;AACA;;AAGA;AACA;AACA;;AAUA,MAAMI,SAAS,GAAG,EAAE;AAEpB,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI,GAAGJ,SAAS;EAChBK,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAC7E,MAAMC,UAAU,GAAG,IAAAC,wBAAiB,EAAEH,KAAM,CAAC;EAC7C,MAAMI,KAAK,GAAG,CAAEN,IAAI,GAAGJ,SAAS,EAAGW,OAAO,CAAE,CAAE,CAAC;EAE/C,MAAMC,OAAO,GAAG,IAAAC,aAAI,EACnB,yCAAyC,EACzCX,SACD,CAAC;EAED,MAAMY,MAAM,GAAG;IACd,GAAGT,KAAK;IACRU,SAAS,EAAG,SAASL,KAAO;EAC7B,CAAC;EAED,oBACC,IAAAX,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAAmB,IAAI;IAAA,GACCV,KAAK;IACVL,SAAS,EAAGU,OAAS;IACrBT,oBAAoB,EAAGA,oBAAsB;IAC7Ce,IAAI,EAAC,cAAc;IACnBb,KAAK,EAAGS,MAAQ;IAAAK,QAAA,EAEdC,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,QAAQ,GAAGhB,UAAU,KAAKe,KAAK;MAErC,oBACC,IAAAxB,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAA2B,IAAI;QAAAN,QAAA,eACJ,IAAApB,WAAA,CAAAiB,GAAA,EAAClB,iCAAA,CAAA4B,KAAK;UAACF,QAAQ,EAAGA;QAAU,CAAE;MAAC,GADpBF,KAEN,CAAC;IAET,CAAE;EAAC,CACE,CAAC;AAET;AAAC,IAAAK,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc5B,0BAA0B","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_primitives","_utils","_jsxRuntime","BASE_SIZE","GRID_CELL_SIZE","GRID_PADDING","DOT_SIZE","DOT_SIZE_SELECTED","AlignmentMatrixControlIcon","className","disablePointerEvents","size","width","height","style","value","props","_ref","_ref2","jsx","SVG","xmlns","viewBox","role","clsx","pointerEvents","undefined","children","ALIGNMENTS","map","align","index","dotSize","getAlignmentIndex","Rect","x","y","Math","floor","fill","_default","exports","default"],"sources":["@wordpress/components/src/alignment-matrix-control/icon.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Rect, SVG } from '@wordpress/primitives';\n\n/**\n * Internal dependencies\n */\nimport { ALIGNMENTS, getAlignmentIndex } from './utils';\nimport type { AlignmentMatrixControlIconProps } from './types';\nimport type { WordPressComponentProps } from '../context';\n\nconst BASE_SIZE = 24;\nconst GRID_CELL_SIZE = 7;\nconst GRID_PADDING = ( BASE_SIZE - 3 * GRID_CELL_SIZE ) / 2;\nconst DOT_SIZE = 2;\nconst DOT_SIZE_SELECTED = 4;\n\nfunction AlignmentMatrixControlIcon( {\n\tclassName,\n\tdisablePointerEvents = true,\n\tsize,\n\twidth,\n\theight,\n\tstyle = {},\n\tvalue = 'center',\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlIconProps, 'svg', false > ) {\n\treturn (\n\t\t<SVG\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\tviewBox={ `0 0 ${ BASE_SIZE } ${ BASE_SIZE }` }\n\t\t\twidth={ size ?? width ?? BASE_SIZE }\n\t\t\theight={ size ?? height ?? BASE_SIZE }\n\t\t\trole=\"presentation\"\n\t\t\tclassName={ clsx(\n\t\t\t\t'component-alignment-matrix-control-icon',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\tstyle={ {\n\t\t\t\tpointerEvents: disablePointerEvents ? 'none' : undefined,\n\t\t\t\t...style,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ ALIGNMENTS.map( ( align, index ) => {\n\t\t\t\tconst dotSize =\n\t\t\t\t\tgetAlignmentIndex( value ) === index\n\t\t\t\t\t\t? DOT_SIZE_SELECTED\n\t\t\t\t\t\t: DOT_SIZE;\n\n\t\t\t\treturn (\n\t\t\t\t\t<Rect\n\t\t\t\t\t\tkey={ align }\n\t\t\t\t\t\tx={\n\t\t\t\t\t\t\tGRID_PADDING +\n\t\t\t\t\t\t\t( index % 3 ) * GRID_CELL_SIZE +\n\t\t\t\t\t\t\t( GRID_CELL_SIZE - dotSize ) / 2\n\t\t\t\t\t\t}\n\t\t\t\t\t\ty={\n\t\t\t\t\t\t\tGRID_PADDING +\n\t\t\t\t\t\t\tMath.floor( index / 3 ) * GRID_CELL_SIZE +\n\t\t\t\t\t\t\t( GRID_CELL_SIZE - dotSize ) / 2\n\t\t\t\t\t\t}\n\t\t\t\t\t\twidth={ dotSize }\n\t\t\t\t\t\theight={ dotSize }\n\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</SVG>\n\t);\n}\n\nexport default AlignmentMatrixControlIcon;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AAKA,IAAAE,MAAA,GAAAF,OAAA;AAAwD,IAAAG,WAAA,GAAAH,OAAA;AAbxD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAKA,MAAMI,SAAS,GAAG,EAAE;AACpB,MAAMC,cAAc,GAAG,CAAC;AACxB,MAAMC,YAAY,GAAG,CAAEF,SAAS,GAAG,CAAC,GAAGC,cAAc,IAAK,CAAC;AAC3D,MAAME,QAAQ,GAAG,CAAC;AAClB,MAAMC,iBAAiB,GAAG,CAAC;AAE3B,SAASC,0BAA0BA,CAAE;EACpCC,SAAS;EACTC,oBAAoB,GAAG,IAAI;EAC3BC,IAAI;EACJC,KAAK;EACLC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,KAAK,GAAG,QAAQ;EAChB,GAAGC;AACsE,CAAC,EAAG;EAAA,IAAAC,IAAA,EAAAC,KAAA;EAC7E,oBACC,IAAAhB,WAAA,CAAAiB,GAAA,EAACnB,WAAA,CAAAoB,GAAG;IACHC,KAAK,EAAC,4BAA4B;IAClCC,OAAO,EAAI,OAAOnB,SAAW,IAAIA,SAAW,EAAG;IAC/CS,KAAK,GAAAK,IAAA,GAAGN,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIC,KAAK,cAAAK,IAAA,cAAAA,IAAA,GAAId,SAAW;IACpCU,MAAM,GAAAK,KAAA,GAAGP,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAIE,MAAM,cAAAK,KAAA,cAAAA,KAAA,GAAIf,SAAW;IACtCoB,IAAI,EAAC,cAAc;IACnBd,SAAS,EAAG,IAAAe,aAAI,EACf,yCAAyC,EACzCf,SACD,CAAG;IACHK,KAAK,EAAG;MACPW,aAAa,EAAEf,oBAAoB,GAAG,MAAM,GAAGgB,SAAS;MACxD,GAAGZ;IACJ,CAAG;IAAA,GACEE,KAAK;IAAAW,QAAA,EAERC,iBAAU,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,OAAO,GACZ,IAAAC,wBAAiB,EAAElB,KAAM,CAAC,KAAKgB,KAAK,GACjCxB,iBAAiB,GACjBD,QAAQ;MAEZ,oBACC,IAAAJ,WAAA,CAAAiB,GAAA,EAACnB,WAAA,CAAAkC,IAAI;QAEJC,CAAC,EACA9B,YAAY,GACV0B,KAAK,GAAG,CAAC,GAAK3B,cAAc,GAC9B,CAAEA,cAAc,GAAG4B,OAAO,IAAK,CAC/B;QACDI,CAAC,EACA/B,YAAY,GACZgC,IAAI,CAACC,KAAK,CAAEP,KAAK,GAAG,CAAE,CAAC,GAAG3B,cAAc,GACxC,CAAEA,cAAc,GAAG4B,OAAO,IAAK,CAC/B;QACDpB,KAAK,EAAGoB,OAAS;QACjBnB,MAAM,EAAGmB,OAAS;QAClBO,IAAI,EAAC;MAAc,GAbbT,KAcN,CAAC;IAEJ,CAAE;EAAC,CACC,CAAC;AAER;AAAC,IAAAU,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEclC,0BAA0B","ignoreList":[]}

package/build/alignment-matrix-control/index.js

@@ -4,15 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.AlignmentMatrixControl = AlignmentMatrixControl;
-exports.default = void 0;
+exports.default = exports.AlignmentMatrixControl = void 0;
 var _clsx = _interopRequireDefault(require("clsx"));
-var _react = require("@ariakit/react");
 var _i18n = require("@wordpress/i18n");
 var _compose = require("@wordpress/compose");
+var _element = require("@wordpress/element");
 var _cell = _interopRequireDefault(require("./cell"));
 var _composite = require("../composite");
-var _alignmentMatrixControlStyles = require("./styles/alignment-matrix-control-styles");
+var _styles = require("./styles");
 var _icon = _interopRequireDefault(require("./icon"));
 var _utils = require("./utils");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,27 +27,7 @@ var _jsxRuntime = require("react/jsx-runtime");
  * Internal dependencies
  */
 
-/**
- *
- * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
- *
- * ```jsx
- * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';
- * import { useState } from '@wordpress/element';
- *
- * const Example = () => {
- * 	const [ alignment, setAlignment ] = useState( 'center center' );
- *
- * 	return (
- * 		<AlignmentMatrixControl
- * 			value={ alignment }
- * 			onChange={ setAlignment }
- * 		/>
- * 	);
- * };
- * ```
- */
-function AlignmentMatrixControl({
+function UnforwardedAlignmentMatrixControl({
   className,
   id,
   label = (0, _i18n.__)('Alignment Matrix Control'),
@@ -58,23 +37,20 @@ function AlignmentMatrixControl({
   width = 92,
   ...props
 }) {
-  const baseId = (0, _compose.useInstanceId)(AlignmentMatrixControl, 'alignment-matrix-control', id);
-  const compositeStore = (0, _composite.useCompositeStore)({
-    defaultActiveId: (0, _utils.getItemId)(baseId, defaultValue),
-    activeId: (0, _utils.getItemId)(baseId, value),
-    setActiveId: nextActiveId => {
-      const nextValue = (0, _utils.getItemValue)(baseId, nextActiveId);
-      if (nextValue) {
-        onChange?.(nextValue);
-      }
-    },
-    rtl: (0, _i18n.isRTL)()
-  });
-  const activeId = (0, _react.useStoreState)(compositeStore, 'activeId');
+  const baseId = (0, _compose.useInstanceId)(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);
+  const setActiveId = (0, _element.useCallback)(nextActiveId => {
+    const nextValue = (0, _utils.getItemValue)(baseId, nextActiveId);
+    if (nextValue) {
+      onChange?.(nextValue);
+    }
+  }, [baseId, onChange]);
   const classes = (0, _clsx.default)('component-alignment-matrix-control', className);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite, {
-    store: compositeStore,
-    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Root, {
+    defaultActiveId: (0, _utils.getItemId)(baseId, defaultValue),
+    activeId: (0, _utils.getItemId)(baseId, value),
+    setActiveId: setActiveId,
+    rtl: (0, _i18n.isRTL)(),
+    render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridContainer, {
       ...props,
       "aria-label": label,
       className: classes,
@@ -83,21 +59,49 @@ function AlignmentMatrixControl({
       size: width
     }),
     children: _utils.GRID.map((cells, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_composite.Composite.Row, {
-      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_alignmentMatrixControlStyles.Row, {
+      render: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.GridRow, {
         role: "row"
       }),
-      children: cells.map(cell => {
-        const cellId = (0, _utils.getItemId)(baseId, cell);
-        const isActive = cellId === activeId;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
-          id: cellId,
-          isActive: isActive,
-          value: cell
-        }, cell);
-      })
+      children: cells.map(cell => /*#__PURE__*/(0, _jsxRuntime.jsx)(_cell.default, {
+        id: (0, _utils.getItemId)(baseId, cell),
+        value: cell
+      }, cell))
     }, index))
   });
 }
-AlignmentMatrixControl.Icon = _icon.default;
+
+/**
+ * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.
+ *
+ * ```jsx
+ * import { AlignmentMatrixControl } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const Example = () => {
+ * 	const [ alignment, setAlignment ] = useState( 'center center' );
+ *
+ * 	return (
+ * 		<AlignmentMatrixControl
+ * 			value={ alignment }
+ * 			onChange={ setAlignment }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+const AlignmentMatrixControl = exports.AlignmentMatrixControl = Object.assign(UnforwardedAlignmentMatrixControl, {
+  /**
+   * Render an alignment matrix as an icon.
+   *
+   * ```jsx
+   * import { AlignmentMatrixControl } from '@wordpress/components';
+   *
+   * <Icon icon={<AlignmentMatrixControl.Icon value="top left" />} />
+   * ```
+   */
+  Icon: Object.assign(_icon.default, {
+    displayName: 'AlignmentMatrixControl.Icon'
+  })
+});
 var _default = exports.default = AlignmentMatrixControl;
 //# sourceMappingURL=index.js.map

package/build/alignment-matrix-control/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_react","_i18n","_compose","_cell","_composite","_alignmentMatrixControlStyles","_icon","_utils","_jsxRuntime","AlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","compositeStore","useCompositeStore","defaultActiveId","getItemId","activeId","setActiveId","nextActiveId","nextValue","getItemValue","rtl","isRTL","useStoreState","classes","clsx","jsx","Composite","store","render","Root","role","size","children","GRID","map","cells","index","Row","cell","cellId","isActive","default","Icon","AlignmentMatrixControlIcon","_default","exports"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport { useStoreState } from '@ariakit/react';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite, useCompositeStore } from '../composite';\nimport { Root, Row } from './styles/alignment-matrix-control-styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\n/**\n *\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { __experimentalAlignmentMatrixControl as AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport function AlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst compositeStore = useCompositeStore( {\n\t\tdefaultActiveId: getItemId( baseId, defaultValue ),\n\t\tactiveId: getItemId( baseId, value ),\n\t\tsetActiveId: ( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\trtl: isRTL(),\n\t} );\n\n\tconst activeId = useStoreState( compositeStore, 'activeId' );\n\n\tconst classes = clsx( 'component-alignment-matrix-control', className );\n\n\treturn (\n\t\t<Composite\n\t\t\tstore={ compositeStore }\n\t\t\trender={\n\t\t\t\t<Root\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<Composite.Row render={ <Row role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => {\n\t\t\t\t\t\tconst cellId = getItemId( baseId, cell );\n\t\t\t\t\t\tconst isActive = cellId === activeId;\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\t\tid={ cellId }\n\t\t\t\t\t\t\t\tisActive={ isActive }\n\t\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</Composite.Row>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\nAlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;\n\nexport default AlignmentMatrixControl;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,6BAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AAAwD,IAAAS,WAAA,GAAAT,OAAA;AAnBxD;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,SAASU,sBAAsBA,CAAE;EACvCC,SAAS;EACTC,EAAE;EACFC,KAAK,GAAG,IAAAC,QAAE,EAAE,0BAA2B,CAAC;EACxCC,YAAY,GAAG,eAAe;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,EAAE;EACV,GAAGC;AACkE,CAAC,EAAG;EACzE,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAC3BX,sBAAsB,EACtB,0BAA0B,EAC1BE,EACD,CAAC;EAED,MAAMU,cAAc,GAAG,IAAAC,4BAAiB,EAAE;IACzCC,eAAe,EAAE,IAAAC,gBAAS,EAAEL,MAAM,EAAEL,YAAa,CAAC;IAClDW,QAAQ,EAAE,IAAAD,gBAAS,EAAEL,MAAM,EAAEJ,KAAM,CAAC;IACpCW,WAAW,EAAIC,YAAY,IAAM;MAChC,MAAMC,SAAS,GAAG,IAAAC,mBAAY,EAAEV,MAAM,EAAEQ,YAAa,CAAC;MACtD,IAAKC,SAAS,EAAG;QAChBZ,QAAQ,GAAIY,SAAU,CAAC;MACxB;IACD,CAAC;IACDE,GAAG,EAAE,IAAAC,WAAK,EAAC;EACZ,CAAE,CAAC;EAEH,MAAMN,QAAQ,GAAG,IAAAO,oBAAa,EAAEX,cAAc,EAAE,UAAW,CAAC;EAE5D,MAAMY,OAAO,GAAG,IAAAC,aAAI,EAAE,oCAAoC,EAAExB,SAAU,CAAC;EAEvE,oBACC,IAAAF,WAAA,CAAA2B,GAAA,EAAC/B,UAAA,CAAAgC,SAAS;IACTC,KAAK,EAAGhB,cAAgB;IACxBiB,MAAM,eACL,IAAA9B,WAAA,CAAA2B,GAAA,EAAC9B,6BAAA,CAAAkC,IAAI;MAAA,GACCrB,KAAK;MACV,cAAaN,KAAO;MACpBF,SAAS,EAAGuB,OAAS;MACrBtB,EAAE,EAAGQ,MAAQ;MACbqB,IAAI,EAAC,MAAM;MACXC,IAAI,EAAGxB;IAAO,CACd,CACD;IAAAyB,QAAA,EAECC,WAAI,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,kBACzB,IAAAtC,WAAA,CAAA2B,GAAA,EAAC/B,UAAA,CAAAgC,SAAS,CAACW,GAAG;MAACT,MAAM,eAAG,IAAA9B,WAAA,CAAA2B,GAAA,EAAC9B,6BAAA,CAAA0C,GAAG;QAACP,IAAI,EAAC;MAAK,CAAE,CAAG;MAAAE,QAAA,EACzCG,KAAK,CAACD,GAAG,CAAII,IAAI,IAAM;QACxB,MAAMC,MAAM,GAAG,IAAAzB,gBAAS,EAAEL,MAAM,EAAE6B,IAAK,CAAC;QACxC,MAAME,QAAQ,GAAGD,MAAM,KAAKxB,QAAQ;QAEpC,oBACC,IAAAjB,WAAA,CAAA2B,GAAA,EAAChC,KAAA,CAAAgD,OAAI;UACJxC,EAAE,EAAGsC,MAAQ;UACbC,QAAQ,EAAGA,QAAU;UAErBnC,KAAK,EAAGiC;QAAM,GADRA,IAEN,CAAC;MAEJ,CAAE;IAAC,GAb+CF,KAcpC,CACd;EAAC,CACO,CAAC;AAEd;AAEArC,sBAAsB,CAAC2C,IAAI,GAAGC,aAA0B;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAJ,OAAA,GAE1C1C,sBAAsB","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_i18n","_compose","_element","_cell","_composite","_styles","_icon","_utils","_jsxRuntime","UnforwardedAlignmentMatrixControl","className","id","label","__","defaultValue","value","onChange","width","props","baseId","useInstanceId","setActiveId","useCallback","nextActiveId","nextValue","getItemValue","classes","clsx","jsx","Composite","defaultActiveId","getItemId","activeId","rtl","isRTL","render","GridContainer","role","size","children","GRID","map","cells","index","Row","GridRow","cell","default","AlignmentMatrixControl","exports","Object","assign","Icon","AlignmentMatrixControlIcon","displayName","_default"],"sources":["@wordpress/components/src/alignment-matrix-control/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { __, isRTL } from '@wordpress/i18n';\nimport { useInstanceId } from '@wordpress/compose';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport Cell from './cell';\nimport { Composite } from '../composite';\nimport { GridContainer, GridRow } from './styles';\nimport AlignmentMatrixControlIcon from './icon';\nimport { GRID, getItemId, getItemValue } from './utils';\nimport type { WordPressComponentProps } from '../context';\nimport type { AlignmentMatrixControlProps } from './types';\n\nfunction UnforwardedAlignmentMatrixControl( {\n\tclassName,\n\tid,\n\tlabel = __( 'Alignment Matrix Control' ),\n\tdefaultValue = 'center center',\n\tvalue,\n\tonChange,\n\twidth = 92,\n\t...props\n}: WordPressComponentProps< AlignmentMatrixControlProps, 'div', false > ) {\n\tconst baseId = useInstanceId(\n\t\tUnforwardedAlignmentMatrixControl,\n\t\t'alignment-matrix-control',\n\t\tid\n\t);\n\n\tconst setActiveId = useCallback<\n\t\tNonNullable< React.ComponentProps< typeof Composite >[ 'setActiveId' ] >\n\t>(\n\t\t( nextActiveId ) => {\n\t\t\tconst nextValue = getItemValue( baseId, nextActiveId );\n\t\t\tif ( nextValue ) {\n\t\t\t\tonChange?.( nextValue );\n\t\t\t}\n\t\t},\n\t\t[ baseId, onChange ]\n\t);\n\n\tconst classes = clsx( 'component-alignment-matrix-control', className );\n\n\treturn (\n\t\t<Composite\n\t\t\tdefaultActiveId={ getItemId( baseId, defaultValue ) }\n\t\t\tactiveId={ getItemId( baseId, value ) }\n\t\t\tsetActiveId={ setActiveId }\n\t\t\trtl={ isRTL() }\n\t\t\trender={\n\t\t\t\t<GridContainer\n\t\t\t\t\t{ ...props }\n\t\t\t\t\taria-label={ label }\n\t\t\t\t\tclassName={ classes }\n\t\t\t\t\tid={ baseId }\n\t\t\t\t\trole=\"grid\"\n\t\t\t\t\tsize={ width }\n\t\t\t\t/>\n\t\t\t}\n\t\t>\n\t\t\t{ GRID.map( ( cells, index ) => (\n\t\t\t\t<Composite.Row render={ <GridRow role=\"row\" /> } key={ index }>\n\t\t\t\t\t{ cells.map( ( cell ) => (\n\t\t\t\t\t\t<Cell\n\t\t\t\t\t\t\tid={ getItemId( baseId, cell ) }\n\t\t\t\t\t\t\tkey={ cell }\n\t\t\t\t\t\t\tvalue={ cell }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) ) }\n\t\t\t\t</Composite.Row>\n\t\t\t) ) }\n\t\t</Composite>\n\t);\n}\n\n/**\n * AlignmentMatrixControl components enable adjustments to horizontal and vertical alignments for UI.\n *\n * ```jsx\n * import { AlignmentMatrixControl } from '@wordpress/components';\n * import { useState } from '@wordpress/element';\n *\n * const Example = () => {\n * \tconst [ alignment, setAlignment ] = useState( 'center center' );\n *\n * \treturn (\n * \t\t<AlignmentMatrixControl\n * \t\t\tvalue={ alignment }\n * \t\t\tonChange={ setAlignment }\n * \t\t/>\n * \t);\n * };\n * ```\n */\nexport const AlignmentMatrixControl = Object.assign(\n\tUnforwardedAlignmentMatrixControl,\n\t{\n\t\t/**\n\t\t * Render an alignment matrix as an icon.\n\t\t *\n\t\t * ```jsx\n\t\t * import { AlignmentMatrixControl } from '@wordpress/components';\n\t\t *\n\t\t * <Icon icon={<AlignmentMatrixControl.Icon value=\"top left\" />} />\n\t\t * ```\n\t\t */\n\t\tIcon: Object.assign( AlignmentMatrixControlIcon, {\n\t\t\tdisplayName: 'AlignmentMatrixControl.Icon',\n\t\t} ),\n\t}\n);\n\nexport default AlignmentMatrixControl;\n"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,QAAA,GAAAH,OAAA;AAKA,IAAAI,KAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,UAAA,GAAAL,OAAA;AACA,IAAAM,OAAA,GAAAN,OAAA;AACA,IAAAO,KAAA,GAAAR,sBAAA,CAAAC,OAAA;AACA,IAAAQ,MAAA,GAAAR,OAAA;AAAwD,IAAAS,WAAA,GAAAT,OAAA;AAnBxD;AACA;AACA;;AAGA;AACA;AACA;;AAKA;AACA;AACA;;AASA,SAASU,iCAAiCA,CAAE;EAC3CC,SAAS;EACTC,EAAE;EACFC,KAAK,GAAG,IAAAC,QAAE,EAAE,0BAA2B,CAAC;EACxCC,YAAY,GAAG,eAAe;EAC9BC,KAAK;EACLC,QAAQ;EACRC,KAAK,GAAG,EAAE;EACV,GAAGC;AACkE,CAAC,EAAG;EACzE,MAAMC,MAAM,GAAG,IAAAC,sBAAa,EAC3BX,iCAAiC,EACjC,0BAA0B,EAC1BE,EACD,CAAC;EAED,MAAMU,WAAW,GAAG,IAAAC,oBAAW,EAG5BC,YAAY,IAAM;IACnB,MAAMC,SAAS,GAAG,IAAAC,mBAAY,EAAEN,MAAM,EAAEI,YAAa,CAAC;IACtD,IAAKC,SAAS,EAAG;MAChBR,QAAQ,GAAIQ,SAAU,CAAC;IACxB;EACD,CAAC,EACD,CAAEL,MAAM,EAAEH,QAAQ,CACnB,CAAC;EAED,MAAMU,OAAO,GAAG,IAAAC,aAAI,EAAE,oCAAoC,EAAEjB,SAAU,CAAC;EAEvE,oBACC,IAAAF,WAAA,CAAAoB,GAAA,EAACxB,UAAA,CAAAyB,SAAS;IACTC,eAAe,EAAG,IAAAC,gBAAS,EAAEZ,MAAM,EAAEL,YAAa,CAAG;IACrDkB,QAAQ,EAAG,IAAAD,gBAAS,EAAEZ,MAAM,EAAEJ,KAAM,CAAG;IACvCM,WAAW,EAAGA,WAAa;IAC3BY,GAAG,EAAG,IAAAC,WAAK,EAAC,CAAG;IACfC,MAAM,eACL,IAAA3B,WAAA,CAAAoB,GAAA,EAACvB,OAAA,CAAA+B,aAAa;MAAA,GACRlB,KAAK;MACV,cAAaN,KAAO;MACpBF,SAAS,EAAGgB,OAAS;MACrBf,EAAE,EAAGQ,MAAQ;MACbkB,IAAI,EAAC,MAAM;MACXC,IAAI,EAAGrB;IAAO,CACd,CACD;IAAAsB,QAAA,EAECC,WAAI,CAACC,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,kBACzB,IAAAnC,WAAA,CAAAoB,GAAA,EAACxB,UAAA,CAAAyB,SAAS,CAACe,GAAG;MAACT,MAAM,eAAG,IAAA3B,WAAA,CAAAoB,GAAA,EAACvB,OAAA,CAAAwC,OAAO;QAACR,IAAI,EAAC;MAAK,CAAE,CAAG;MAAAE,QAAA,EAC7CG,KAAK,CAACD,GAAG,CAAIK,IAAI,iBAClB,IAAAtC,WAAA,CAAAoB,GAAA,EAACzB,KAAA,CAAA4C,OAAI;QACJpC,EAAE,EAAG,IAAAoB,gBAAS,EAAEZ,MAAM,EAAE2B,IAAK,CAAG;QAEhC/B,KAAK,EAAG+B;MAAM,GADRA,IAEN,CACA;IAAC,GAPmDH,KAQxC,CACd;EAAC,CACO,CAAC;AAEd;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMK,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,MAAM,CAACC,MAAM,CAClD1C,iCAAiC,EACjC;EACC;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACE2C,IAAI,EAAEF,MAAM,CAACC,MAAM,CAAEE,aAA0B,EAAE;IAChDC,WAAW,EAAE;EACd,CAAE;AACH,CACD,CAAC;AAAC,IAAAC,QAAA,GAAAN,OAAA,CAAAF,OAAA,GAEaC,sBAAsB","ignoreList":[]}