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

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

@@ -2,98 +2,13 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useLayoutEffect, useRef, useState } from '@wordpress/element';
+import { useResizeObserver } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
 import { useEvent } from './hooks/use-event';
 
-/**
- * `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 } />;
- * ```
- */
-export 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 = useEvent(onRect);
-  const observedElementRef = useRef();
-  const resizeObserverRef = useRef();
-
-  // TODO: could this be a layout effect?
-  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.
  */
@@ -102,44 +17,98 @@ onRect, {
  * An `ElementOffsetRect` object with all values set to zero.
  */
 export const 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`.
  */
 export 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.
  */
 export function useTrackElementOffsetRect(targetElement) {
   const [indicatorPosition, setIndicatorPosition] = useState(NULL_ELEMENT_OFFSET_RECT);
-  useTrackElementRectUpdates(targetElement, element => setIndicatorPosition(getElementOffsetRect(element)));
+  const intervalRef = useRef();
+  const measure = useEvent(() => {
+    if (targetElement) {
+      const elementOffsetRect = getElementOffsetRect(targetElement);
+      if (elementOffsetRect) {
+        setIndicatorPosition(elementOffsetRect);
+        clearInterval(intervalRef.current);
+        return true;
+      }
+    } else {
+      clearInterval(intervalRef.current);
+    }
+    return false;
+  });
+  const setElement = useResizeObserver(() => {
+    if (!measure()) {
+      requestAnimationFrame(() => {
+        if (!measure()) {
+          intervalRef.current = setInterval(measure, POLL_RATE);
+        }
+      });
+    }
+  });
+  useLayoutEffect(() => setElement(targetElement), [setElement, targetElement]);
   return indicatorPosition;
 }
 

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

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","useState","useEvent","useTrackElementRectUpdates","targetElement","onRect","fireOnElementInit","onRectEvent","observedElementRef","resizeObserverRef","current","ResizeObserver","entries","resizeObserver","observe","unobserve","NULL_ELEMENT_OFFSET_RECT","left","top","width","height","getElementOffsetRect","element","Math","max","offsetLeft","offsetTop","parseFloat","getComputedStyle","useTrackElementOffsetRect","indicatorPosition","setIndicatorPosition"],"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":"AAAA;AACA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AAChE;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,mBAAmB;;AAE5C;AACA;AACA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,0BAA0BA;AACzC;AACD;AACA;AACCC,aAA6C;AAC7C;AACD;AACA;AACA;AACA;AACCC,MAYS,EACT;EAAEC,iBAAiB,GAAG;AAAwC,CAAC,GAAG,CAAC,CAAC,EACnE;EACD,MAAMC,WAAW,GAAGL,QAAQ,CAAEG,MAAO,CAAC;EAEtC,MAAMG,kBAAkB,GAAGT,MAAM,CAAuB,CAAC;EACzD,MAAMU,iBAAiB,GAAGV,MAAM,CAAmB,CAAC;;EAEpD;EACAC,SAAS,CAAE,MAAM;IAChB,IAAKI,aAAa,KAAKI,kBAAkB,CAACE,OAAO,EAAG;MACnD;IACD;IAEAF,kBAAkB,CAACE,OAAO,GAAGN,aAAa;;IAE1C;IACA,IAAK,CAAEK,iBAAiB,CAACC,OAAO,EAAG;MAClCD,iBAAiB,CAACC,OAAO,GAAG,IAAIC,cAAc,CAAIC,OAAO,IAAM;QAC9D,IAAKJ,kBAAkB,CAACE,OAAO,EAAG;UACjCH,WAAW,CAAEC,kBAAkB,CAACE,OAAO,EAAEE,OAAQ,CAAC;QACnD;MACD,CAAE,CAAC;IACJ;IACA,MAAM;MAAEF,OAAO,EAAEG;IAAe,CAAC,GAAGJ,iBAAiB;;IAErD;IACA,IAAKL,aAAa,EAAG;MACpB,IAAKE,iBAAiB,EAAG;QACxB;QACA;QACAC,WAAW,CAAEH,aAAc,CAAC;MAC7B;MACAS,cAAc,CAACC,OAAO,CAAEV,aAAc,CAAC;IACxC;IAEA,OAAO,MAAM;MACZ;MACA,IAAKI,kBAAkB,CAACE,OAAO,EAAG;QACjCG,cAAc,CAACE,SAAS,CAAEP,kBAAkB,CAACE,OAAQ,CAAC;MACvD;IACD,CAAC;EACF,CAAC,EAAE,CAAEJ,iBAAiB,EAAEC,WAAW,EAAEH,aAAa,CAAG,CAAC;AACvD;;AAEA;AACA;AACA;;AAsBA;AACA;AACA;AACA,OAAO,MAAMY,wBAAwB,GAAG;EACvCC,IAAI,EAAE,CAAC;EACPC,GAAG,EAAE,CAAC;EACNC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE;AACT,CAA6B;;AAE7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CACnCC,OAAoB,EACA;EACpB,OAAO;IACN;IACA;IACA;IACA;IACAL,IAAI,EAAEM,IAAI,CAACC,GAAG,CAAEF,OAAO,CAACG,UAAU,GAAG,CAAC,EAAE,CAAE,CAAC;IAC3CP,GAAG,EAAEK,IAAI,CAACC,GAAG,CAAEF,OAAO,CAACI,SAAS,GAAG,CAAC,EAAE,CAAE,CAAC;IACzC;IACA;IACAP,KAAK,EAAEQ,UAAU,CAAEC,gBAAgB,CAAEN,OAAQ,CAAC,CAACH,KAAM,CAAC;IACtDC,MAAM,EAAEO,UAAU,CAAEC,gBAAgB,CAAEN,OAAQ,CAAC,CAACF,MAAO;EACxD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASS,yBAAyBA,CACxCzB,aAA6C,EAC5C;EACD,MAAM,CAAE0B,iBAAiB,EAAEC,oBAAoB,CAAE,GAChD9B,QAAQ,CAAuBe,wBAAyB,CAAC;EAE1Db,0BAA0B,CAAEC,aAAa,EAAIkB,OAAO,IACnDS,oBAAoB,CAAEV,oBAAoB,CAAEC,OAAQ,CAAE,CACvD,CAAC;EAED,OAAOQ,iBAAiB;AACzB;;AAEA","ignoreList":[]}
+{"version":3,"names":["useLayoutEffect","useRef","useState","useResizeObserver","useEvent","NULL_ELEMENT_OFFSET_RECT","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","intervalRef","measure","elementOffsetRect","clearInterval","current","setElement","requestAnimationFrame","setInterval"],"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-style/style-rtl.css

@@ -1988,10 +1988,6 @@ body.is-dragging-components-draggable {
   line-height: 1;
   margin: 0;
 }
-.components-modal__header .components-button {
-  position: relative;
-  right: 8px;
-}
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
   border-bottom-color: #ddd;
 }

package/build-style/style.css

@@ -1993,10 +1993,6 @@ body.is-dragging-components-draggable {
   line-height: 1;
   margin: 0;
 }
-.components-modal__header .components-button {
-  position: relative;
-  left: 8px;
-}
 .components-modal__content.has-scrolled-content:not(.hide-header) .components-modal__header {
   border-bottom-color: #ddd;
 }

package/build-types/composite/context.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/composite/context.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,gBAAgB,gDACuB,CAAC;AAErD,eAAO,MAAM,mBAAmB,6BAAuC,CAAC"}
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/composite/context.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD,eAAO,MAAM,gBAAgB,gDAA+C,CAAC;AAE7E,eAAO,MAAM,mBAAmB,6BAAuC,CAAC"}

package/build-types/composite/index.d.ts

@@ -18,33 +18,50 @@ import * as Ariakit from '@ariakit/react';
  *
  * @example
  * ```jsx
- * import { Composite, useCompositeStore } from '@wordpress/components';
+ * import { Composite } from '@wordpress/components';
  *
- * const store = useCompositeStore();
- * <Composite store={store}>
+ * <Composite>
  *   <Composite.Item>Item 1</Composite.Item>
  *   <Composite.Item>Item 2</Composite.Item>
  * </Composite>
  * ```
  */
-export declare const Composite: import("react").ForwardRefExoticComponent<import("./types").CompositeStoreProps & {
-    store?: Ariakit.CompositeStore;
+export declare const Composite: import("react").ForwardRefExoticComponent<{
+    activeId?: Ariakit.CompositeStoreProps["activeId"];
+    defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
+    setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
+    focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
+    focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
+    focusShift?: Ariakit.CompositeStoreProps["focusShift"];
+    virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
+    orientation?: Ariakit.CompositeStoreProps["orientation"];
+    rtl?: Ariakit.CompositeStoreProps["rtl"];
+} & {
     render?: Ariakit.CompositeProps["render"];
     focusable?: Ariakit.CompositeProps["focusable"];
     disabled?: Ariakit.CompositeProps["disabled"];
     accessibleWhenDisabled?: Ariakit.CompositeProps["accessibleWhenDisabled"];
     onFocusVisible?: Ariakit.CompositeProps["onFocusVisible"];
     children?: Ariakit.CompositeProps["children"];
-} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "focusable" | "children" | "as" | "render" | "accessibleWhenDisabled" | "onFocusVisible" | "store" | keyof import("./types").CompositeStoreProps> & import("react").RefAttributes<HTMLDivElement>> & {
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "focusable" | "children" | "as" | "render" | "accessibleWhenDisabled" | "onFocusVisible" | keyof {
+    activeId?: Ariakit.CompositeStoreProps["activeId"];
+    defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
+    setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
+    focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
+    focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
+    focusShift?: Ariakit.CompositeStoreProps["focusShift"];
+    virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
+    orientation?: Ariakit.CompositeStoreProps["orientation"];
+    rtl?: Ariakit.CompositeStoreProps["rtl"];
+}> & import("react").RefAttributes<HTMLDivElement>> & {
     /**
      * Renders a group element for composite items.
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Group>
      *     <Composite.GroupLabel>Label</Composite.GroupLabel>
      *     <Composite.Item>Item 1</Composite.Item>
@@ -63,10 +80,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Group>
      *     <Composite.GroupLabel>Label</Composite.GroupLabel>
      *     <Composite.Item>Item 1</Composite.Item>
@@ -83,10 +99,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Item>Item 1</Composite.Item>
      *   <Composite.Item>Item 2</Composite.Item>
      *   <Composite.Item>Item 3</Composite.Item>
@@ -103,10 +118,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Row>
      *     <Composite.Item>Item 1.1</Composite.Item>
      *     <Composite.Item>Item 1.2</Composite.Item>
@@ -130,10 +144,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store}>
+     * <Composite>
      *   <Composite.Hover render={ <Composite.Item /> }>
      *     Item 1
      *   </Composite.Hover>
@@ -153,10 +166,9 @@ export declare const Composite: import("react").ForwardRefExoticComponent<import
      *
      * @example
      * ```jsx
-     * import { Composite, useCompositeStore } from '@wordpress/components';
+     * import { Composite } from '@wordpress/components';
      *
-     * const store = useCompositeStore();
-     * <Composite store={store} render={ <CompositeTypeahead /> }>
+     * <Composite render={ <CompositeTypeahead /> }>
      *   <Composite.Item>Item 1</Composite.Item>
      *   <Composite.Item>Item 2</Composite.Item>
      * </Composite>

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composite/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAoB1C;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,SAAS;;;;;;;;;IAgEpB;;;;;;;;;;;;;;;;OAgBG;;;;IAIH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;;OAuBG;;;;IAEH;;;;;;;;;;;;;;;;;;;OAmBG;;;;IAIH;;;;;;;;;;;;;;;OAeG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;CAKJ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/composite/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAqB1C;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA2DpB;;;;;;;;;;;;;;;OAeG;;;;IAIH;;;;;;;;;;;;;;;;;OAiBG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;IAEH;;;;;;;;;;;;;;;;;;;;;;OAsBG;;;;IAEH;;;;;;;;;;;;;;;;;;OAkBG;;;;IAIH;;;;;;;;;;;;;;OAcG;;;;IAIH;;;;;;;;;;;;;OAaG;;;;CAKJ,CAAC"}

package/build-types/composite/legacy/index.d.ts

@@ -12,7 +12,10 @@
  *
  * @see https://ariakit.org/components/composite
  */
-import { useCompositeStore } from '../store';
+/**
+ * External dependencies
+ */
+import * as Ariakit from '@ariakit/react';
 type Orientation = 'horizontal' | 'vertical';
 export interface LegacyStateOptions {
     /**
@@ -64,7 +67,7 @@ export interface LegacyStateOptions {
     unstable_virtual?: boolean;
 }
 type Component = React.FunctionComponent<any>;
-type CompositeStore = ReturnType<typeof useCompositeStore>;
+type CompositeStore = ReturnType<typeof Ariakit.useCompositeStore>;
 type CompositeStoreState = {
     store: CompositeStore;
 };
@@ -77,9 +80,29 @@ export type CompositeStateProps = {
 type ComponentProps<C extends Component> = React.ComponentPropsWithRef<C>;
 export type CompositeProps<C extends Component> = ComponentProps<C> & CompositeStateProps;
 type CompositeComponent<C extends Component> = (props: CompositeProps<C>) => React.ReactElement;
+/**
+ * _Note: please use the `Composite` component instead._
+ *
+ * @deprecated
+ */
 export declare const Composite: CompositeComponent<Component>;
+/**
+ * _Note: please use the `Composite.Row` or `Composite.Group` components instead._
+ *
+ * @deprecated
+ */
 export declare const CompositeGroup: CompositeComponent<Component>;
+/**
+ * _Note: please use the `Composite.Item` component instead._
+ *
+ * @deprecated
+ */
 export declare const CompositeItem: CompositeComponent<Component>;
+/**
+ * _Note: please use the `Composite` component instead._
+ *
+ * @deprecated
+ */
 export declare function useCompositeState(legacyStateOptions?: LegacyStateOptions): CompositeState;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/build-types/composite/legacy/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composite/legacy/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAWH,OAAO,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAG7C,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7C,MAAM,WAAW,kBAAkB;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,KAAK,SAAS,GAAG,KAAK,CAAC,iBAAiB,CAAE,GAAG,CAAE,CAAC;AAEhD,KAAK,cAAc,GAAG,UAAU,CAAE,OAAO,iBAAiB,CAAE,CAAC;AAC7D,KAAK,mBAAmB,GAAG;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAC/C,QAAQ,CAAE,IAAI,CAAE,kBAAkB,EAAE,QAAQ,CAAE,CAAE,CAAC;AAMlD,MAAM,MAAM,mBAAmB,GAC5B;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,GACzB,CAAE,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAE,CAAC;AAC1C,KAAK,cAAc,CAAE,CAAC,SAAS,SAAS,IAAK,KAAK,CAAC,qBAAqB,CAAE,CAAC,CAAE,CAAC;AAC9E,MAAM,MAAM,cAAc,CAAE,CAAC,SAAS,SAAS,IAAK,cAAc,CAAE,CAAC,CAAE,GACtE,mBAAmB,CAAC;AACrB,KAAK,kBAAkB,CAAE,CAAC,SAAS,SAAS,IAAK,CAChD,KAAK,EAAE,cAAc,CAAE,CAAC,CAAE,KACtB,KAAK,CAAC,YAAY,CAAC;AA6DxB,eAAO,MAAM,SAAS,+BAA8C,CAAC;AACrE,eAAO,MAAM,cAAc,+BAA4C,CAAC;AACxE,eAAO,MAAM,aAAa,+BAEvB,CAAC;AAEJ,wBAAgB,iBAAiB,CAChC,kBAAkB,GAAE,kBAAuB,GACzC,cAAc,CAyBhB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/composite/legacy/index.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH;;GAEG;AACH,OAAO,KAAK,OAAO,MAAM,gBAAgB,CAAC;AAc1C,KAAK,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAE7C,MAAM,WAAW,kBAAkB;IAClC;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;;OAIG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC;IAC7B;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,KAAK,SAAS,GAAG,KAAK,CAAC,iBAAiB,CAAE,GAAG,CAAE,CAAC;AAEhD,KAAK,cAAc,GAAG,UAAU,CAAE,OAAO,OAAO,CAAC,iBAAiB,CAAE,CAAC;AACrE,KAAK,mBAAmB,GAAG;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,CAAC;AACrD,MAAM,MAAM,cAAc,GAAG,mBAAmB,GAC/C,QAAQ,CAAE,IAAI,CAAE,kBAAkB,EAAE,QAAQ,CAAE,CAAE,CAAC;AAMlD,MAAM,MAAM,mBAAmB,GAC5B;IAAE,KAAK,EAAE,cAAc,CAAA;CAAE,GACzB,CAAE,cAAc,GAAG;IAAE,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAE,CAAC;AAC1C,KAAK,cAAc,CAAE,CAAC,SAAS,SAAS,IAAK,KAAK,CAAC,qBAAqB,CAAE,CAAC,CAAE,CAAC;AAC9E,MAAM,MAAM,cAAc,CAAE,CAAC,SAAS,SAAS,IAAK,cAAc,CAAE,CAAC,CAAE,GACtE,mBAAmB,CAAC;AACrB,KAAK,kBAAkB,CAAE,CAAC,SAAS,SAAS,IAAK,CAChD,KAAK,EAAE,cAAc,CAAE,CAAC,CAAE,KACtB,KAAK,CAAC,YAAY,CAAC;AAgFxB;;;;GAIG;AACH,eAAO,MAAM,SAAS,+BAGrB,CAAC;AACF;;;;GAIG;AACH,eAAO,MAAM,cAAc,+BAI1B,CAAC;AACF;;;;GAIG;AACH,eAAO,MAAM,aAAa,+BAOzB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,iBAAiB,CAChC,kBAAkB,GAAE,kBAAuB,GACzC,cAAc,CA8BhB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../src/composite/legacy/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,EAAE,4BAA4B,EAAa,MAAM,SAAS,CAAC;AAElE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,4BAA4B,CA2BpD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,0BAA0B,EAAE,OAAO,CAC/C,OAAO,4BAA4B,CA6CnC,CAAC;AAGF,eAAO,MAAM,4BAA4B,EAAE,OAAO,CACjD,OAAO,4BAA4B,CA6CnC,CAAC;AAGF,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAC9C,OAAO,4BAA4B,CA2BnC,CAAC;AAGF,eAAO,MAAM,2BAA2B,EAAE,OAAO,CAChD,OAAO,4BAA4B,CA2BnC,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../../src/composite/legacy/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAC;AAWtD,OAAO,EAAE,4BAA4B,EAAa,MAAM,SAAS,CAAC;AAElE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,4BAA4B,CA4BpD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,0BAA0B,EAAE,OAAO,CAC/C,OAAO,4BAA4B,CA6CnC,CAAC;AAGF,eAAO,MAAM,4BAA4B,EAAE,OAAO,CACjD,OAAO,4BAA4B,CA6CnC,CAAC;AAGF,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAC9C,OAAO,4BAA4B,CA2BnC,CAAC;AAGF,eAAO,MAAM,2BAA2B,EAAE,OAAO,CAChD,OAAO,4BAA4B,CA2BnC,CAAC"}

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

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import type { Meta, StoryFn } from '@storybook/react';
-import { UseCompositeStorePlaceholder } from './utils';
-declare const meta: Meta<typeof UseCompositeStorePlaceholder>;
+import type { Meta, StoryObj } from '@storybook/react';
+import { Composite } from '..';
+declare const meta: Meta<typeof Composite>;
 export default meta;
-export declare const Default: StoryFn<typeof UseCompositeStorePlaceholder>;
-export declare const Groups: StoryFn<typeof UseCompositeStorePlaceholder>;
-export declare const Grid: StoryFn<typeof UseCompositeStorePlaceholder>;
-export declare const Hover: StoryFn<typeof UseCompositeStorePlaceholder>;
-export declare const Typeahead: StoryFn<typeof UseCompositeStorePlaceholder>;
-export declare const WithSlotFill: StoryFn<typeof UseCompositeStorePlaceholder>;
+export declare const Default: StoryObj<typeof Composite>;
+export declare const Groups: StoryObj<typeof Composite>;
+export declare const Grid: StoryObj<typeof Composite>;
+export declare const Hover: StoryObj<typeof Composite>;
+export declare const Typeahead: StoryObj<typeof Composite>;
+export declare const WithSlotFill: StoryObj<typeof Composite>;
 //# sourceMappingURL=index.story.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/composite/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAgB,MAAM,kBAAkB,CAAC;AAcpE,OAAO,EAAE,4BAA4B,EAAa,MAAM,SAAS,CAAC;AAElE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,4BAA4B,CAyEpD,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,OAAO,CAAE,OAAO,4BAA4B,CAajE,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,OAAO,CAAE,OAAO,4BAA4B,CAoBhE,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,OAAO,CAAE,OAAO,4BAA4B,CAyB9D,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,OAAO,CAAE,OAAO,4BAA4B,CAmB/D,CAAC;AASF,eAAO,MAAM,SAAS,EAAE,OAAO,CAAE,OAAO,4BAA4B,CAanE,CAAC;AA2DF,eAAO,MAAM,YAAY,EAAE,OAAO,CAAE,OAAO,4BAA4B,CAiBtE,CAAC"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/composite/stories/index.story.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAWvD,OAAO,EAAE,SAAS,EAAE,MAAM,IAAI,CAAC;AAE/B,QAAA,MAAM,IAAI,EAAE,IAAI,CAAE,OAAO,SAAS,CAyEjC,CAAC;AACF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAE,OAAO,SAAS,CAU/C,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,QAAQ,CAAE,OAAO,SAAS,CAmB9C,CAAC;AAEF,eAAO,MAAM,IAAI,EAAE,QAAQ,CAAE,OAAO,SAAS,CA0B5C,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAE,OAAO,SAAS,CAyB7C,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,QAAQ,CAAE,OAAO,SAAS,CAmBjD,CAAC;AAoDF,eAAO,MAAM,YAAY,EAAE,QAAQ,CAAE,OAAO,SAAS,CAuGpD,CAAC"}

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

@@ -4,11 +4,15 @@
 import type * as Ariakit from '@ariakit/react';
 export type CompositeContextProps = {
     /**
-     * Object returned by the `useCompositeStore` hook.
+     * The component store, used for advanced usage of the component.
+     *
+     * _Note: Using the store directly is not recommended. Instead, use the props
+     * exposed by the `Composite` component._
+     *
      */
-    store: Ariakit.CompositeStore;
-} | undefined;
-export type CompositeStoreProps = {
+    store?: unknown;
+};
+type CompositeStoreProps = {
     /**
      * The current active item `id`. The active item is the element within the
      * composite widget that has either DOM or virtual focus (in case
@@ -113,21 +117,17 @@ export type CompositeStoreProps = {
      */
     orientation?: Ariakit.CompositeStoreProps['orientation'];
     /**
-     * Determines how the `store`'s `next` and `previous` functions will behave.
+     * Controls how the previous and next items are determined.
      * If `rtl` is set to `true`, they will be inverted.
      *
      * This only affects the composite widget behavior. You still need to set
      * `dir="rtl"` on HTML/CSS.
      *
-     * @default false
+     * @default `isRtl()`
      */
     rtl?: Ariakit.CompositeStoreProps['rtl'];
 };
 export type CompositeProps = CompositeStoreProps & {
-    /**
-     * Object returned by the `useCompositeStore` hook.
-     */
-    store?: Ariakit.CompositeStore;
     /**
      * Allows the component to be rendered as a different HTML element or React
      * component. The value can be a React element or a function that takes in the
@@ -285,4 +285,5 @@ export type CompositeTypeaheadProps = {
      */
     children?: Ariakit.CompositeTypeaheadProps['children'];
 };
+export {};
 //# sourceMappingURL=types.d.ts.map

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

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

package/build-types/date-time/date/index.d.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import type { DatePickerProps } from '../types';
 /**
  * DatePicker is a React component that renders a calendar for date selection.