@wordpress/components 28.6.0 → 28.8.1-next.5368f64a9.0

package/build/utils/element-rect.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.NULL_ELEMENT_OFFSET_RECT = void 0;
 exports.getElementOffsetRect = getElementOffsetRect;
 exports.useTrackElementOffsetRect = useTrackElementOffsetRect;
-exports.useTrackElementRectUpdates = useTrackElementRectUpdates;
 var _element = require("@wordpress/element");
+var _compose = require("@wordpress/compose");
 var _useEvent = require("./hooks/use-event");
 /* eslint-disable jsdoc/require-param */
 /**
@@ -18,92 +18,6 @@ var _useEvent = require("./hooks/use-event");
  * Internal dependencies
  */
 
-/**
- * `useTrackElementRectUpdates` options.
- */
-
-/**
- * Tracks an element's "rect" (size and position) and fires `onRect` for all
- * of its discrete values. The element can be changed dynamically and **it
- * must not be stored in a ref**. Instead, it should be stored in a React
- * state or equivalent.
- *
- * By default, `onRect` is called initially for the target element (including
- * when the target element changes), not only on size or position updates.
- * This allows consumers of the hook to always be in sync with all rect values
- * of the target element throughout its lifetime. This behavior can be
- * disabled by setting the `fireOnElementInit` option to `false`.
- *
- * Under the hood, it sets up a `ResizeObserver` that tracks the element. The
- * target element can be changed dynamically, and the observer will be
- * updated accordingly.
- *
- * @example
- *
- * ```tsx
- * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();
- *
- * useTrackElementRectUpdates( targetElement, ( element ) => {
- *   console.log( 'Element resized:', element );
- * } );
- *
- * <div ref={ setTargetElement } />;
- * ```
- */
-function useTrackElementRectUpdates(
-/**
- * The target element to observe. It can be changed dynamically.
- */
-targetElement,
-/**
- * Callback to fire when the element is resized. It will also be
- * called when the observer is set up, unless `fireOnElementInit` is
- * set to `false`.
- */
-onRect, {
-  fireOnElementInit = true
-} = {}) {
-  const onRectEvent = (0, _useEvent.useEvent)(onRect);
-  const observedElementRef = (0, _element.useRef)();
-  const resizeObserverRef = (0, _element.useRef)();
-
-  // TODO: could this be a layout effect?
-  (0, _element.useEffect)(() => {
-    if (targetElement === observedElementRef.current) {
-      return;
-    }
-    observedElementRef.current = targetElement;
-
-    // Set up a ResizeObserver.
-    if (!resizeObserverRef.current) {
-      resizeObserverRef.current = new ResizeObserver(entries => {
-        if (observedElementRef.current) {
-          onRectEvent(observedElementRef.current, entries);
-        }
-      });
-    }
-    const {
-      current: resizeObserver
-    } = resizeObserverRef;
-
-    // Observe new element.
-    if (targetElement) {
-      if (fireOnElementInit) {
-        // TODO: investigate if this can be removed,
-        // see: https://stackoverflow.com/a/60026394
-        onRectEvent(targetElement);
-      }
-      resizeObserver.observe(targetElement);
-    }
-    return () => {
-      // Unobserve previous element.
-      if (observedElementRef.current) {
-        resizeObserver.unobserve(observedElementRef.current);
-      }
-    };
-  }, [fireOnElementInit, onRectEvent, targetElement]);
-}
-
 /**
  * The position and dimensions of an element, relative to its offset parent.
  */
@@ -112,44 +26,98 @@ onRect, {
  * An `ElementOffsetRect` object with all values set to zero.
  */
 const NULL_ELEMENT_OFFSET_RECT = exports.NULL_ELEMENT_OFFSET_RECT = {
-  left: 0,
   top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
   width: 0,
   height: 0
 };
 
 /**
  * Returns the position and dimensions of an element, relative to its offset
- * parent. This is useful in contexts where `getBoundingClientRect` is not
- * suitable, such as when the element is transformed.
+ * parent, with subpixel precision. Values reflect the real measures before any
+ * potential scaling distortions along the X and Y axes.
  *
- * **Note:** the `left` and `right` values are adjusted due to a limitation
- * in the way the browser calculates the offset position of the element,
- * which can cause unwanted scrollbars to appear. This adjustment makes the
- * values potentially inaccurate within a range of 1 pixel.
+ * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`
+ * entries are not suitable, such as when the element is transformed, and when
+ * `element.offset<Top|Left|Width|Height>` methods are not precise enough.
+ *
+ * **Note:** in some contexts, like when the scale is 0, this method will fail
+ * because it's impossible to calculate a scaling ratio. When that happens, it
+ * will return `undefined`.
  */
 function getElementOffsetRect(element) {
+  var _element$offsetParent;
+  // Position and dimension values computed with `getBoundingClientRect` have
+  // subpixel precision, but are affected by distortions since they represent
+  // the "real" measures, or in other words, the actual final values as rendered
+  // by the browser.
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return;
+  }
+  const offsetParentRect = (_element$offsetParent = element.offsetParent?.getBoundingClientRect()) !== null && _element$offsetParent !== void 0 ? _element$offsetParent : NULL_ELEMENT_OFFSET_RECT;
+
+  // Computed widths and heights have subpixel precision, and are not affected
+  // by distortions.
+  const computedWidth = parseFloat(getComputedStyle(element).width);
+  const computedHeight = parseFloat(getComputedStyle(element).height);
+
+  // We can obtain the current scale factor for the element by comparing "computed"
+  // dimensions with the "real" ones.
+  const scaleX = computedWidth / rect.width;
+  const scaleY = computedHeight / rect.height;
   return {
-    // The adjustments mentioned in the documentation above are necessary
-    // because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,
-    // which can result in a position mismatch that causes unwanted overflow.
-    // For context, see: https://github.com/WordPress/gutenberg/pull/61979
-    left: Math.max(element.offsetLeft - 1, 0),
-    top: Math.max(element.offsetTop - 1, 0),
-    // This is a workaround to obtain these values with a sub-pixel precision,
-    // since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.
-    width: parseFloat(getComputedStyle(element).width),
-    height: parseFloat(getComputedStyle(element).height)
+    // To obtain the adjusted values for the position:
+    // 1. Compute the element's position relative to the offset parent.
+    // 2. Correct for the scale factor.
+    top: (rect.top - offsetParentRect?.top) * scaleY,
+    right: (offsetParentRect?.right - rect.right) * scaleX,
+    bottom: (offsetParentRect?.bottom - rect.bottom) * scaleY,
+    left: (rect.left - offsetParentRect?.left) * scaleX,
+    // Computed dimensions don't need any adjustments.
+    width: computedWidth,
+    height: computedHeight
   };
 }
+const POLL_RATE = 100;
 
 /**
  * Tracks the position and dimensions of an element, relative to its offset
  * parent. The element can be changed dynamically.
+ *
+ * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s
+ * documentation for more details). When that happens, this hook will attempt
+ * to measure again after a frame, and if that fails, it will poll every 100
+ * milliseconds until it succeeds.
  */
 function useTrackElementOffsetRect(targetElement) {
   const [indicatorPosition, setIndicatorPosition] = (0, _element.useState)(NULL_ELEMENT_OFFSET_RECT);
-  useTrackElementRectUpdates(targetElement, element => setIndicatorPosition(getElementOffsetRect(element)));
+  const intervalRef = (0, _element.useRef)();
+  const measure = (0, _useEvent.useEvent)(() => {
+    if (targetElement) {
+      const elementOffsetRect = getElementOffsetRect(targetElement);
+      if (elementOffsetRect) {
+        setIndicatorPosition(elementOffsetRect);
+        clearInterval(intervalRef.current);
+        return true;
+      }
+    } else {
+      clearInterval(intervalRef.current);
+    }
+    return false;
+  });
+  const setElement = (0, _compose.useResizeObserver)(() => {
+    if (!measure()) {
+      requestAnimationFrame(() => {
+        if (!measure()) {
+          intervalRef.current = setInterval(measure, POLL_RATE);
+        }
+      });
+    }
+  });
+  (0, _element.useLayoutEffect)(() => setElement(targetElement), [setElement, targetElement]);
   return indicatorPosition;
 }
 

package/build/utils/element-rect.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_useEvent","useTrackElementRectUpdates","targetElement","onRect","fireOnElementInit","onRectEvent","useEvent","observedElementRef","useRef","resizeObserverRef","useEffect","current","ResizeObserver","entries","resizeObserver","observe","unobserve","NULL_ELEMENT_OFFSET_RECT","exports","left","top","width","height","getElementOffsetRect","element","Math","max","offsetLeft","offsetTop","parseFloat","getComputedStyle","useTrackElementOffsetRect","indicatorPosition","setIndicatorPosition","useState"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * `useTrackElementRectUpdates` options.\n */\nexport type UseTrackElementRectUpdatesOptions = {\n\t/**\n\t * Whether to trigger the callback when an element's ResizeObserver is\n\t * first set up, including when the target element changes.\n\t *\n\t * @default true\n\t */\n\tfireOnElementInit?: boolean;\n};\n\n/**\n * Tracks an element's \"rect\" (size and position) and fires `onRect` for all\n * of its discrete values. The element can be changed dynamically and **it\n * must not be stored in a ref**. Instead, it should be stored in a React\n * state or equivalent.\n *\n * By default, `onRect` is called initially for the target element (including\n * when the target element changes), not only on size or position updates.\n * This allows consumers of the hook to always be in sync with all rect values\n * of the target element throughout its lifetime. This behavior can be\n * disabled by setting the `fireOnElementInit` option to `false`.\n *\n * Under the hood, it sets up a `ResizeObserver` that tracks the element. The\n * target element can be changed dynamically, and the observer will be\n * updated accordingly.\n *\n * @example\n *\n * ```tsx\n * const [ targetElement, setTargetElement ] = useState< HTMLElement | null >();\n *\n * useTrackElementRectUpdates( targetElement, ( element ) => {\n *   console.log( 'Element resized:', element );\n * } );\n *\n * <div ref={ setTargetElement } />;\n * ```\n */\nexport function useTrackElementRectUpdates(\n\t/**\n\t * The target element to observe. It can be changed dynamically.\n\t */\n\ttargetElement: HTMLElement | undefined | null,\n\t/**\n\t * Callback to fire when the element is resized. It will also be\n\t * called when the observer is set up, unless `fireOnElementInit` is\n\t * set to `false`.\n\t */\n\tonRect: (\n\t\t/**\n\t\t * The element being tracked at the time of this update.\n\t\t */\n\t\telement: HTMLElement,\n\t\t/**\n\t\t * The list of\n\t\t * [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry)\n\t\t * objects passed to the `ResizeObserver.observe` callback. This list\n\t\t * won't be available when the observer is set up, and only on updates.\n\t\t */\n\t\tresizeObserverEntries?: ResizeObserverEntry[]\n\t) => void,\n\t{ fireOnElementInit = true }: UseTrackElementRectUpdatesOptions = {}\n) {\n\tconst onRectEvent = useEvent( onRect );\n\n\tconst observedElementRef = useRef< HTMLElement | null >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\n\t// TODO: could this be a layout effect?\n\tuseEffect( () => {\n\t\tif ( targetElement === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tobservedElementRef.current = targetElement;\n\n\t\t// Set up a ResizeObserver.\n\t\tif ( ! resizeObserverRef.current ) {\n\t\t\tresizeObserverRef.current = new ResizeObserver( ( entries ) => {\n\t\t\t\tif ( observedElementRef.current ) {\n\t\t\t\t\tonRectEvent( observedElementRef.current, entries );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Observe new element.\n\t\tif ( targetElement ) {\n\t\t\tif ( fireOnElementInit ) {\n\t\t\t\t// TODO: investigate if this can be removed,\n\t\t\t\t// see: https://stackoverflow.com/a/60026394\n\t\t\t\tonRectEvent( targetElement );\n\t\t\t}\n\t\t\tresizeObserver.observe( targetElement );\n\t\t}\n\n\t\treturn () => {\n\t\t\t// Unobserve previous element.\n\t\t\tif ( observedElementRef.current ) {\n\t\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t\t}\n\t\t};\n\t}, [ fireOnElementInit, onRectEvent, targetElement ] );\n}\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\tleft: 0,\n\ttop: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent. This is useful in contexts where `getBoundingClientRect` is not\n * suitable, such as when the element is transformed.\n *\n * **Note:** the `left` and `right` values are adjusted due to a limitation\n * in the way the browser calculates the offset position of the element,\n * which can cause unwanted scrollbars to appear. This adjustment makes the\n * values potentially inaccurate within a range of 1 pixel.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect {\n\treturn {\n\t\t// The adjustments mentioned in the documentation above are necessary\n\t\t// because `offsetLeft` and `offsetTop` are rounded to the nearest pixel,\n\t\t// which can result in a position mismatch that causes unwanted overflow.\n\t\t// For context, see: https://github.com/WordPress/gutenberg/pull/61979\n\t\tleft: Math.max( element.offsetLeft - 1, 0 ),\n\t\ttop: Math.max( element.offsetTop - 1, 0 ),\n\t\t// This is a workaround to obtain these values with a sub-pixel precision,\n\t\t// since `offsetWidth` and `offsetHeight` are rounded to the nearest pixel.\n\t\twidth: parseFloat( getComputedStyle( element ).width ),\n\t\theight: parseFloat( getComputedStyle( element ).height ),\n\t};\n}\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\n\tuseTrackElementRectUpdates( targetElement, ( element ) =>\n\t\tsetIndicatorPosition( getElementOffsetRect( element ) )\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_compose","_useEvent","NULL_ELEMENT_OFFSET_RECT","exports","top","right","bottom","left","width","height","getElementOffsetRect","element","_element$offsetParent","rect","getBoundingClientRect","offsetParentRect","offsetParent","computedWidth","parseFloat","getComputedStyle","computedHeight","scaleX","scaleY","POLL_RATE","useTrackElementOffsetRect","targetElement","indicatorPosition","setIndicatorPosition","useState","intervalRef","useRef","measure","useEvent","elementOffsetRect","clearInterval","current","setElement","useResizeObserver","requestAnimationFrame","setInterval","useLayoutEffect"],"sources":["@wordpress/components/src/utils/element-rect.ts"],"sourcesContent":["/* eslint-disable jsdoc/require-param */\n/**\n * WordPress dependencies\n */\nimport { useLayoutEffect, useRef, useState } from '@wordpress/element';\nimport { useResizeObserver } from '@wordpress/compose';\n/**\n * Internal dependencies\n */\nimport { useEvent } from './hooks/use-event';\n\n/**\n * The position and dimensions of an element, relative to its offset parent.\n */\nexport type ElementOffsetRect = {\n\t/**\n\t * The distance from the top edge of the offset parent to the top edge of\n\t * the element.\n\t */\n\ttop: number;\n\t/**\n\t * The distance from the right edge of the offset parent to the right edge\n\t * of the element.\n\t */\n\tright: number;\n\t/**\n\t * The distance from the bottom edge of the offset parent to the bottom edge\n\t * of the element.\n\t */\n\tbottom: number;\n\t/**\n\t * The distance from the left edge of the offset parent to the left edge of\n\t * the element.\n\t */\n\tleft: number;\n\t/**\n\t * The width of the element.\n\t */\n\twidth: number;\n\t/**\n\t * The height of the element.\n\t */\n\theight: number;\n};\n\n/**\n * An `ElementOffsetRect` object with all values set to zero.\n */\nexport const NULL_ELEMENT_OFFSET_RECT = {\n\ttop: 0,\n\tright: 0,\n\tbottom: 0,\n\tleft: 0,\n\twidth: 0,\n\theight: 0,\n} satisfies ElementOffsetRect;\n\n/**\n * Returns the position and dimensions of an element, relative to its offset\n * parent, with subpixel precision. Values reflect the real measures before any\n * potential scaling distortions along the X and Y axes.\n *\n * Useful in contexts where plain `getBoundingClientRect` calls or `ResizeObserver`\n * entries are not suitable, such as when the element is transformed, and when\n * `element.offset<Top|Left|Width|Height>` methods are not precise enough.\n *\n * **Note:** in some contexts, like when the scale is 0, this method will fail\n * because it's impossible to calculate a scaling ratio. When that happens, it\n * will return `undefined`.\n */\nexport function getElementOffsetRect(\n\telement: HTMLElement\n): ElementOffsetRect | undefined {\n\t// Position and dimension values computed with `getBoundingClientRect` have\n\t// subpixel precision, but are affected by distortions since they represent\n\t// the \"real\" measures, or in other words, the actual final values as rendered\n\t// by the browser.\n\tconst rect = element.getBoundingClientRect();\n\tif ( rect.width === 0 || rect.height === 0 ) {\n\t\treturn;\n\t}\n\tconst offsetParentRect =\n\t\telement.offsetParent?.getBoundingClientRect() ??\n\t\tNULL_ELEMENT_OFFSET_RECT;\n\n\t// Computed widths and heights have subpixel precision, and are not affected\n\t// by distortions.\n\tconst computedWidth = parseFloat( getComputedStyle( element ).width );\n\tconst computedHeight = parseFloat( getComputedStyle( element ).height );\n\n\t// We can obtain the current scale factor for the element by comparing \"computed\"\n\t// dimensions with the \"real\" ones.\n\tconst scaleX = computedWidth / rect.width;\n\tconst scaleY = computedHeight / rect.height;\n\n\treturn {\n\t\t// To obtain the adjusted values for the position:\n\t\t// 1. Compute the element's position relative to the offset parent.\n\t\t// 2. Correct for the scale factor.\n\t\ttop: ( rect.top - offsetParentRect?.top ) * scaleY,\n\t\tright: ( offsetParentRect?.right - rect.right ) * scaleX,\n\t\tbottom: ( offsetParentRect?.bottom - rect.bottom ) * scaleY,\n\t\tleft: ( rect.left - offsetParentRect?.left ) * scaleX,\n\t\t// Computed dimensions don't need any adjustments.\n\t\twidth: computedWidth,\n\t\theight: computedHeight,\n\t};\n}\n\nconst POLL_RATE = 100;\n\n/**\n * Tracks the position and dimensions of an element, relative to its offset\n * parent. The element can be changed dynamically.\n *\n * **Note:** sometimes, the measurement will fail (see `getElementOffsetRect`'s\n * documentation for more details). When that happens, this hook will attempt\n * to measure again after a frame, and if that fails, it will poll every 100\n * milliseconds until it succeeds.\n */\nexport function useTrackElementOffsetRect(\n\ttargetElement: HTMLElement | undefined | null\n) {\n\tconst [ indicatorPosition, setIndicatorPosition ] =\n\t\tuseState< ElementOffsetRect >( NULL_ELEMENT_OFFSET_RECT );\n\tconst intervalRef = useRef< ReturnType< typeof setInterval > >();\n\n\tconst measure = useEvent( () => {\n\t\tif ( targetElement ) {\n\t\t\tconst elementOffsetRect = getElementOffsetRect( targetElement );\n\t\t\tif ( elementOffsetRect ) {\n\t\t\t\tsetIndicatorPosition( elementOffsetRect );\n\t\t\t\tclearInterval( intervalRef.current );\n\t\t\t\treturn true;\n\t\t\t}\n\t\t} else {\n\t\t\tclearInterval( intervalRef.current );\n\t\t}\n\t\treturn false;\n\t} );\n\n\tconst setElement = useResizeObserver( () => {\n\t\tif ( ! measure() ) {\n\t\t\trequestAnimationFrame( () => {\n\t\t\t\tif ( ! measure() ) {\n\t\t\t\t\tintervalRef.current = setInterval( measure, POLL_RATE );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\t} );\n\n\tuseLayoutEffect(\n\t\t() => setElement( targetElement ),\n\t\t[ setElement, targetElement ]\n\t);\n\n\treturn indicatorPosition;\n}\n\n/* eslint-enable jsdoc/require-param */\n"],"mappings":"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","ignoreList":[]}

package/build/utils/hooks/use-update-effect.js

@@ -18,12 +18,12 @@ var _element = require("@wordpress/element");
  * @param {import('react').DependencyList} deps
  */
 function useUpdateEffect(effect, deps) {
-  const mounted = (0, _element.useRef)(false);
+  const mountedRef = (0, _element.useRef)(false);
   (0, _element.useEffect)(() => {
-    if (mounted.current) {
+    if (mountedRef.current) {
       return effect();
     }
-    mounted.current = true;
+    mountedRef.current = true;
     return undefined;
     // Disable reasons:
     // 1. This hook needs to pass a dep list that isn't an array literal
@@ -32,7 +32,7 @@ function useUpdateEffect(effect, deps) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps);
   (0, _element.useEffect)(() => () => {
-    mounted.current = false;
+    mountedRef.current = false;
   }, []);
 }
 var _default = exports.default = useUpdateEffect;

package/build/utils/hooks/use-update-effect.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","useUpdateEffect","effect","deps","mounted","useRef","useEffect","current","undefined","_default","exports","default"],"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mounted.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmounted.current = true;\n\t\treturn undefined;\n\t\t// Disable reasons:\n\t\t// 1. This hook needs to pass a dep list that isn't an array literal\n\t\t// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tmounted.current = false;\n\t\t},\n\t\t[]\n\t);\n}\n\nexport default useUpdateEffect;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,IAAI,EAAG;EACxC,MAAMC,OAAO,GAAG,IAAAC,eAAM,EAAE,KAAM,CAAC;EAC/B,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKF,OAAO,CAACG,OAAO,EAAG;MACtB,OAAOL,MAAM,CAAC,CAAC;IAChB;IACAE,OAAO,CAACG,OAAO,GAAG,IAAI;IACtB,OAAOC,SAAS;IAChB;IACA;IACA;IACA;IACA;EACD,CAAC,EAAEL,IAAK,CAAC;EAET,IAAAG,kBAAS,EACR,MAAM,MAAM;IACXF,OAAO,CAACG,OAAO,GAAG,KAAK;EACxB,CAAC,EACD,EACD,CAAC;AACF;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcV,eAAe","ignoreList":[]}
+{"version":3,"names":["_element","require","useUpdateEffect","effect","deps","mountedRef","useRef","useEffect","current","undefined","_default","exports","default"],"sources":["@wordpress/components/src/utils/hooks/use-update-effect.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\n\n/**\n * A `React.useEffect` that will not run on the first render.\n * Source:\n * https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/utils/hooks.ts\n *\n * @param {import('react').EffectCallback} effect\n * @param {import('react').DependencyList} deps\n */\nfunction useUpdateEffect( effect, deps ) {\n\tconst mountedRef = useRef( false );\n\tuseEffect( () => {\n\t\tif ( mountedRef.current ) {\n\t\t\treturn effect();\n\t\t}\n\t\tmountedRef.current = true;\n\t\treturn undefined;\n\t\t// Disable reasons:\n\t\t// 1. This hook needs to pass a dep list that isn't an array literal\n\t\t// 2. `effect` is missing from the array, and will need to be added carefully to avoid additional warnings\n\t\t// see https://github.com/WordPress/gutenberg/pull/41166\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, deps );\n\n\tuseEffect(\n\t\t() => () => {\n\t\t\tmountedRef.current = false;\n\t\t},\n\t\t[]\n\t);\n}\n\nexport default useUpdateEffect;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,IAAI,EAAG;EACxC,MAAMC,UAAU,GAAG,IAAAC,eAAM,EAAE,KAAM,CAAC;EAClC,IAAAC,kBAAS,EAAE,MAAM;IAChB,IAAKF,UAAU,CAACG,OAAO,EAAG;MACzB,OAAOL,MAAM,CAAC,CAAC;IAChB;IACAE,UAAU,CAACG,OAAO,GAAG,IAAI;IACzB,OAAOC,SAAS;IAChB;IACA;IACA;IACA;IACA;EACD,CAAC,EAAEL,IAAK,CAAC;EAET,IAAAG,kBAAS,EACR,MAAM,MAAM;IACXF,UAAU,CAACG,OAAO,GAAG,KAAK;EAC3B,CAAC,EACD,EACD,CAAC;AACF;AAAC,IAAAE,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcV,eAAe","ignoreList":[]}

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

@@ -9,18 +9,16 @@ import { VisuallyHidden } from '../visually-hidden';
  * Internal dependencies
  */
 import { ALIGNMENT_LABEL } from './utils';
-import { Cell as CellView, Point } from './styles/alignment-matrix-control-styles';
+import { Cell as CellView, Point } from './styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export default function Cell({
   id,
-  isActive = false,
   value,
   ...props
 }) {
-  const tooltipText = ALIGNMENT_LABEL[value];
   return /*#__PURE__*/_jsx(Tooltip, {
-    text: tooltipText,
+    text: ALIGNMENT_LABEL[value],
     children: /*#__PURE__*/_jsxs(Composite.Item, {
       id: id,
       render: /*#__PURE__*/_jsx(CellView, {
@@ -30,7 +28,6 @@ export default function Cell({
       children: [/*#__PURE__*/_jsx(VisuallyHidden, {
         children: value
       }), /*#__PURE__*/_jsx(Point, {
-        isActive: isActive,
         role: "presentation"
       })]
     })

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

@@ -1 +1 @@
-{"version":3,"names":["Composite","Tooltip","VisuallyHidden","ALIGNMENT_LABEL","Cell","CellView","Point","jsx","_jsx","jsxs","_jsxs","id","isActive","value","props","tooltipText","text","children","Item","render","role"],"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":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,cAAc;AACxC,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,eAAe,QAAQ,SAAS;AACzC,SACCC,IAAI,IAAIC,QAAQ,EAChBC,KAAK,QACC,0CAA0C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAIlD,eAAe,SAASN,IAAIA,CAAE;EAC7BO,EAAE;EACFC,QAAQ,GAAG,KAAK;EAChBC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,MAAMC,WAAW,GAAGZ,eAAe,CAAEU,KAAK,CAAE;EAE5C,oBACCL,IAAA,CAACP,OAAO;IAACe,IAAI,EAAGD,WAAa;IAAAE,QAAA,eAC5BP,KAAA,CAACV,SAAS,CAACkB,IAAI;MACdP,EAAE,EAAGA,EAAI;MACTQ,MAAM,eAAGX,IAAA,CAACH,QAAQ;QAAA,GAAMS,KAAK;QAAGM,IAAI,EAAC;MAAU,CAAE,CAAG;MAAAH,QAAA,gBAKpDT,IAAA,CAACN,cAAc;QAAAe,QAAA,EAAGJ;MAAK,CAAkB,CAAC,eAC1CL,IAAA,CAACF,KAAK;QAACM,QAAQ,EAAGA,QAAU;QAACQ,IAAI,EAAC;MAAc,CAAE,CAAC;IAAA,CACpC;EAAC,CACT,CAAC;AAEZ","ignoreList":[]}
+{"version":3,"names":["Composite","Tooltip","VisuallyHidden","ALIGNMENT_LABEL","Cell","CellView","Point","jsx","_jsx","jsxs","_jsxs","id","value","props","text","children","Item","render","role"],"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":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,cAAc;AACxC,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,cAAc,QAAQ,oBAAoB;;AAEnD;AACA;AACA;AACA,SAASC,eAAe,QAAQ,SAAS;AACzC,SAASC,IAAI,IAAIC,QAAQ,EAAEC,KAAK,QAAQ,UAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAAA,SAAAC,IAAA,IAAAC,KAAA;AAInD,eAAe,SAASN,IAAIA,CAAE;EAC7BO,EAAE;EACFC,KAAK;EACL,GAAGC;AACuE,CAAC,EAAG;EAC9E,oBACCL,IAAA,CAACP,OAAO;IAACa,IAAI,EAAGX,eAAe,CAAES,KAAK,CAAI;IAAAG,QAAA,eACzCL,KAAA,CAACV,SAAS,CAACgB,IAAI;MACdL,EAAE,EAAGA,EAAI;MACTM,MAAM,eAAGT,IAAA,CAACH,QAAQ;QAAA,GAAMQ,KAAK;QAAGK,IAAI,EAAC;MAAU,CAAE,CAAG;MAAAH,QAAA,gBAKpDP,IAAA,CAACN,cAAc;QAAAa,QAAA,EAAGH;MAAK,CAAkB,CAAC,eAC1CJ,IAAA,CAACF,KAAK;QAACY,IAAI,EAAC;MAAc,CAAE,CAAC;IAAA,CACd;EAAC,CACT,CAAC;AAEZ","ignoreList":[]}

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

@@ -3,40 +3,52 @@
  */
 import clsx from 'clsx';
 
+/**
+ * WordPress dependencies
+ */
+import { Rect, SVG } from '@wordpress/primitives';
+
 /**
  * Internal dependencies
  */
 import { ALIGNMENTS, getAlignmentIndex } from './utils';
-import { Root, Cell, Point } from './styles/alignment-matrix-control-icon-styles';
 import { jsx as _jsx } from "react/jsx-runtime";
 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 = getAlignmentIndex(value);
-  const scale = (size / BASE_SIZE).toFixed(2);
-  const classes = clsx('component-alignment-matrix-control-icon', className);
-  const styles = {
-    ...style,
-    transform: `scale(${scale})`
-  };
-  return /*#__PURE__*/_jsx(Root, {
-    ...props,
-    className: classes,
-    disablePointerEvents: disablePointerEvents,
+  var _ref, _ref2;
+  return /*#__PURE__*/_jsx(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: clsx('component-alignment-matrix-control-icon', className),
+    style: {
+      pointerEvents: disablePointerEvents ? 'none' : undefined,
+      ...style
+    },
+    ...props,
     children: ALIGNMENTS.map((align, index) => {
-      const isActive = alignIndex === index;
-      return /*#__PURE__*/_jsx(Cell, {
-        children: /*#__PURE__*/_jsx(Point, {
-          isActive: isActive
-        })
+      const dotSize = getAlignmentIndex(value) === index ? DOT_SIZE_SELECTED : DOT_SIZE;
+      return /*#__PURE__*/_jsx(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-module/alignment-matrix-control/icon.js.map

@@ -1 +1 @@
-{"version":3,"names":["clsx","ALIGNMENTS","getAlignmentIndex","Root","Cell","Point","jsx","_jsx","BASE_SIZE","AlignmentMatrixControlIcon","className","disablePointerEvents","size","style","value","props","alignIndex","scale","toFixed","classes","styles","transform","role","children","map","align","index","isActive"],"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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,SAAS;AACvD,SACCC,IAAI,EACJC,IAAI,EACJC,KAAK,QACC,+CAA+C;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIvD,MAAMC,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,GAAGd,iBAAiB,CAAEY,KAAM,CAAC;EAC7C,MAAMG,KAAK,GAAG,CAAEL,IAAI,GAAGJ,SAAS,EAAGU,OAAO,CAAE,CAAE,CAAC;EAE/C,MAAMC,OAAO,GAAGnB,IAAI,CACnB,yCAAyC,EACzCU,SACD,CAAC;EAED,MAAMU,MAAM,GAAG;IACd,GAAGP,KAAK;IACRQ,SAAS,EAAG,SAASJ,KAAO;EAC7B,CAAC;EAED,oBACCV,IAAA,CAACJ,IAAI;IAAA,GACCY,KAAK;IACVL,SAAS,EAAGS,OAAS;IACrBR,oBAAoB,EAAGA,oBAAsB;IAC7CW,IAAI,EAAC,cAAc;IACnBT,KAAK,EAAGO,MAAQ;IAAAG,QAAA,EAEdtB,UAAU,CAACuB,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,QAAQ,GAAGX,UAAU,KAAKU,KAAK;MAErC,oBACCnB,IAAA,CAACH,IAAI;QAAAmB,QAAA,eACJhB,IAAA,CAACF,KAAK;UAACsB,QAAQ,EAAGA;QAAU,CAAE;MAAC,GADpBF,KAEN,CAAC;IAET,CAAE;EAAC,CACE,CAAC;AAET;AAEA,eAAehB,0BAA0B","ignoreList":[]}
+{"version":3,"names":["clsx","Rect","SVG","ALIGNMENTS","getAlignmentIndex","jsx","_jsx","BASE_SIZE","GRID_CELL_SIZE","GRID_PADDING","DOT_SIZE","DOT_SIZE_SELECTED","AlignmentMatrixControlIcon","className","disablePointerEvents","size","width","height","style","value","props","_ref","_ref2","xmlns","viewBox","role","pointerEvents","undefined","children","map","align","index","dotSize","x","y","Math","floor","fill"],"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":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,IAAI,EAAEC,GAAG,QAAQ,uBAAuB;;AAEjD;AACA;AACA;AACA,SAASC,UAAU,EAAEC,iBAAiB,QAAQ,SAAS;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIxD,MAAMC,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,oBACChB,IAAA,CAACJ,GAAG;IACHqB,KAAK,EAAC,4BAA4B;IAClCC,OAAO,EAAI,OAAOjB,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;IACtCkB,IAAI,EAAC,cAAc;IACnBZ,SAAS,EAAGb,IAAI,CACf,yCAAyC,EACzCa,SACD,CAAG;IACHK,KAAK,EAAG;MACPQ,aAAa,EAAEZ,oBAAoB,GAAG,MAAM,GAAGa,SAAS;MACxD,GAAGT;IACJ,CAAG;IAAA,GACEE,KAAK;IAAAQ,QAAA,EAERzB,UAAU,CAAC0B,GAAG,CAAE,CAAEC,KAAK,EAAEC,KAAK,KAAM;MACrC,MAAMC,OAAO,GACZ5B,iBAAiB,CAAEe,KAAM,CAAC,KAAKY,KAAK,GACjCpB,iBAAiB,GACjBD,QAAQ;MAEZ,oBACCJ,IAAA,CAACL,IAAI;QAEJgC,CAAC,EACAxB,YAAY,GACVsB,KAAK,GAAG,CAAC,GAAKvB,cAAc,GAC9B,CAAEA,cAAc,GAAGwB,OAAO,IAAK,CAC/B;QACDE,CAAC,EACAzB,YAAY,GACZ0B,IAAI,CAACC,KAAK,CAAEL,KAAK,GAAG,CAAE,CAAC,GAAGvB,cAAc,GACxC,CAAEA,cAAc,GAAGwB,OAAO,IAAK,CAC/B;QACDhB,KAAK,EAAGgB,OAAS;QACjBf,MAAM,EAAGe,OAAS;QAClBK,IAAI,EAAC;MAAc,GAbbP,KAcN,CAAC;IAEJ,CAAE;EAAC,CACC,CAAC;AAER;AAEA,eAAelB,0BAA0B","ignoreList":[]}

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

@@ -2,44 +2,24 @@
  * External dependencies
  */
 import clsx from 'clsx';
-import { useStoreState } from '@ariakit/react';
 
 /**
  * WordPress dependencies
  */
 import { __, isRTL } from '@wordpress/i18n';
 import { useInstanceId } from '@wordpress/compose';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import Cell from './cell';
-import { Composite, useCompositeStore } from '../composite';
-import { Root, Row } from './styles/alignment-matrix-control-styles';
+import { Composite } from '../composite';
+import { GridContainer, GridRow } from './styles';
 import AlignmentMatrixControlIcon from './icon';
 import { GRID, getItemId, getItemValue } from './utils';
 import { jsx as _jsx } from "react/jsx-runtime";
-/**
- *
- * 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 }
- * 		/>
- * 	);
- * };
- * ```
- */
-export function AlignmentMatrixControl({
+function UnforwardedAlignmentMatrixControl({
   className,
   id,
   label = __('Alignment Matrix Control'),
@@ -49,23 +29,20 @@ export function AlignmentMatrixControl({
   width = 92,
   ...props
 }) {
-  const baseId = useInstanceId(AlignmentMatrixControl, 'alignment-matrix-control', id);
-  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 activeId = useStoreState(compositeStore, 'activeId');
+  const baseId = useInstanceId(UnforwardedAlignmentMatrixControl, 'alignment-matrix-control', id);
+  const setActiveId = useCallback(nextActiveId => {
+    const nextValue = getItemValue(baseId, nextActiveId);
+    if (nextValue) {
+      onChange?.(nextValue);
+    }
+  }, [baseId, onChange]);
   const classes = clsx('component-alignment-matrix-control', className);
   return /*#__PURE__*/_jsx(Composite, {
-    store: compositeStore,
-    render: /*#__PURE__*/_jsx(Root, {
+    defaultActiveId: getItemId(baseId, defaultValue),
+    activeId: getItemId(baseId, value),
+    setActiveId: setActiveId,
+    rtl: isRTL(),
+    render: /*#__PURE__*/_jsx(GridContainer, {
       ...props,
       "aria-label": label,
       className: classes,
@@ -74,21 +51,49 @@ export function AlignmentMatrixControl({
       size: width
     }),
     children: GRID.map((cells, index) => /*#__PURE__*/_jsx(Composite.Row, {
-      render: /*#__PURE__*/_jsx(Row, {
+      render: /*#__PURE__*/_jsx(GridRow, {
         role: "row"
       }),
-      children: cells.map(cell => {
-        const cellId = getItemId(baseId, cell);
-        const isActive = cellId === activeId;
-        return /*#__PURE__*/_jsx(Cell, {
-          id: cellId,
-          isActive: isActive,
-          value: cell
-        }, cell);
-      })
+      children: cells.map(cell => /*#__PURE__*/_jsx(Cell, {
+        id: getItemId(baseId, cell),
+        value: cell
+      }, cell))
     }, index))
   });
 }
-AlignmentMatrixControl.Icon = AlignmentMatrixControlIcon;
+
+/**
+ * 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 }
+ * 		/>
+ * 	);
+ * };
+ * ```
+ */
+export const 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(AlignmentMatrixControlIcon, {
+    displayName: 'AlignmentMatrixControl.Icon'
+  })
+});
 export default AlignmentMatrixControl;
 //# sourceMappingURL=index.js.map