@wordpress/compose 7.32.0 → 7.32.1-next.47f435fc9.0

package/build-module/hooks/use-previous/index.js

@@ -1,25 +1,12 @@
-/**
- * WordPress dependencies
- */
-import { useEffect, useRef } from '@wordpress/element';
-
-/**
- * Use something's value from the previous render.
- * Based on https://usehooks.com/usePrevious/.
- *
- * @param value The value to track.
- *
- * @return The value from the previous render.
- */
-export default function usePrevious(value) {
+import { useEffect, useRef } from "@wordpress/element";
+function usePrevious(value) {
   const ref = useRef();
-
-  // Store current value in ref.
   useEffect(() => {
     ref.current = value;
-  }, [value]); // Re-run when value changes.
-
-  // Return previous value (happens before update in useEffect above).
+  }, [value]);
   return ref.current;
 }
-//# sourceMappingURL=index.js.map
+export {
+  usePrevious as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/hooks/use-previous/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useEffect","useRef","usePrevious","value","ref","current"],"sources":["@wordpress/compose/src/hooks/use-previous/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Use something's value from the previous render.\n * Based on https://usehooks.com/usePrevious/.\n *\n * @param value The value to track.\n *\n * @return The value from the previous render.\n */\nexport default function usePrevious< T >( value: T ): T | undefined {\n\tconst ref = useRef< T >();\n\n\t// Store current value in ref.\n\tuseEffect( () => {\n\t\tref.current = value;\n\t}, [ value ] ); // Re-run when value changes.\n\n\t// Return previous value (happens before update in useEffect above).\n\treturn ref.current;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;;AAEtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,WAAWA,CAAOC,KAAQ,EAAkB;EACnE,MAAMC,GAAG,GAAGH,MAAM,CAAM,CAAC;;EAEzB;EACAD,SAAS,CAAE,MAAM;IAChBI,GAAG,CAACC,OAAO,GAAGF,KAAK;EACpB,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC,CAAC,CAAC;;EAEhB;EACA,OAAOC,GAAG,CAACC,OAAO;AACnB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-previous/index.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Use something's value from the previous render.\n * Based on https://usehooks.com/usePrevious/.\n *\n * @param value The value to track.\n *\n * @return The value from the previous render.\n */\nexport default function usePrevious< T >( value: T ): T | undefined {\n\tconst ref = useRef< T >();\n\n\t// Store current value in ref.\n\tuseEffect( () => {\n\t\tref.current = value;\n\t}, [ value ] ); // Re-run when value changes.\n\n\t// Return previous value (happens before update in useEffect above).\n\treturn ref.current;\n}\n"],
+  "mappings": "AAGA,SAAS,WAAW,cAAc;AAUnB,SAAR,YAAmC,OAA0B;AACnE,QAAM,MAAM,OAAY;AAGxB,YAAW,MAAM;AAChB,QAAI,UAAU;AAAA,EACf,GAAG,CAAE,KAAM,CAAE;AAGb,SAAO,IAAI;AACZ;",
+  "names": []
+}

package/build-module/hooks/use-reduced-motion/index.js

@@ -1,13 +1,7 @@
-/**
- * Internal dependencies
- */
-import useMediaQuery from '../use-media-query';
-
-/**
- * Hook returning whether the user has a preference for reduced motion.
- *
- * @return {boolean} Reduced motion preference value.
- */
-const useReducedMotion = () => useMediaQuery('(prefers-reduced-motion: reduce)');
-export default useReducedMotion;
-//# sourceMappingURL=index.js.map
+import useMediaQuery from "../use-media-query";
+const useReducedMotion = () => useMediaQuery("(prefers-reduced-motion: reduce)");
+var use_reduced_motion_default = useReducedMotion;
+export {
+  use_reduced_motion_default as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/hooks/use-reduced-motion/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useMediaQuery","useReducedMotion"],"sources":["@wordpress/compose/src/hooks/use-reduced-motion/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * Hook returning whether the user has a preference for reduced motion.\n *\n * @return {boolean} Reduced motion preference value.\n */\nconst useReducedMotion = () =>\n\tuseMediaQuery( '(prefers-reduced-motion: reduce)' );\n\nexport default useReducedMotion;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,aAAa,MAAM,oBAAoB;;AAE9C;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAA,KACxBD,aAAa,CAAE,kCAAmC,CAAC;AAEpD,eAAeC,gBAAgB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-reduced-motion/index.js"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * Hook returning whether the user has a preference for reduced motion.\n *\n * @return {boolean} Reduced motion preference value.\n */\nconst useReducedMotion = () =>\n\tuseMediaQuery( '(prefers-reduced-motion: reduce)' );\n\nexport default useReducedMotion;\n"],
+  "mappings": "AAGA,OAAO,mBAAmB;AAO1B,MAAM,mBAAmB,MACxB,cAAe,kCAAmC;AAEnD,IAAO,6BAAQ;",
+  "names": []
+}

package/build-module/hooks/use-ref-effect/index.js

@@ -1,34 +1,7 @@
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useRef } from '@wordpress/element';
-
-/**
- * Effect-like ref callback. Just like with `useEffect`, this allows you to
- * return a cleanup function to be run if the ref changes or one of the
- * dependencies changes. The ref is provided as an argument to the callback
- * functions. The main difference between this and `useEffect` is that
- * the `useEffect` callback is not called when the ref changes, but this is.
- * Pass the returned ref callback as the component's ref and merge multiple refs
- * with `useMergeRefs`.
- *
- * It's worth noting that if the dependencies array is empty, there's not
- * strictly a need to clean up event handlers for example, because the node is
- * to be removed. It *is* necessary if you add dependencies because the ref
- * callback will be called multiple times for the same node.
- *
- * @param callback     Callback with ref as argument.
- * @param dependencies Dependencies of the callback.
- *
- * @return Ref callback.
- */
-export default function useRefEffect(callback, dependencies) {
+import { useCallback, useRef } from "@wordpress/element";
+function useRefEffect(callback, dependencies) {
   const cleanupRef = useRef();
-  return useCallback(node => {
+  return useCallback((node) => {
     if (node) {
       cleanupRef.current = callback(node);
     } else if (cleanupRef.current) {
@@ -36,4 +9,7 @@ export default function useRefEffect(callback, dependencies) {
     }
   }, dependencies);
 }
-//# sourceMappingURL=index.js.map
+export {
+  useRefEffect as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/hooks/use-ref-effect/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useCallback","useRef","useRefEffect","callback","dependencies","cleanupRef","node","current"],"sources":["@wordpress/compose/src/hooks/use-ref-effect/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { DependencyList, RefCallback } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\n\n/**\n * Effect-like ref callback. Just like with `useEffect`, this allows you to\n * return a cleanup function to be run if the ref changes or one of the\n * dependencies changes. The ref is provided as an argument to the callback\n * functions. The main difference between this and `useEffect` is that\n * the `useEffect` callback is not called when the ref changes, but this is.\n * Pass the returned ref callback as the component's ref and merge multiple refs\n * with `useMergeRefs`.\n *\n * It's worth noting that if the dependencies array is empty, there's not\n * strictly a need to clean up event handlers for example, because the node is\n * to be removed. It *is* necessary if you add dependencies because the ref\n * callback will be called multiple times for the same node.\n *\n * @param callback     Callback with ref as argument.\n * @param dependencies Dependencies of the callback.\n *\n * @return Ref callback.\n */\nexport default function useRefEffect< TElement = Node >(\n\tcallback: ( node: TElement ) => ( () => void ) | void,\n\tdependencies: DependencyList\n): RefCallback< TElement | null > {\n\tconst cleanupRef = useRef< ( () => void ) | void >();\n\treturn useCallback( ( node: TElement | null ) => {\n\t\tif ( node ) {\n\t\t\tcleanupRef.current = callback( node );\n\t\t} else if ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t}\n\t}, dependencies );\n}\n"],"mappings":"AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,WAAW,EAAEC,MAAM,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,YAAYA,CACnCC,QAAqD,EACrDC,YAA4B,EACK;EACjC,MAAMC,UAAU,GAAGJ,MAAM,CAA0B,CAAC;EACpD,OAAOD,WAAW,CAAIM,IAAqB,IAAM;IAChD,IAAKA,IAAI,EAAG;MACXD,UAAU,CAACE,OAAO,GAAGJ,QAAQ,CAAEG,IAAK,CAAC;IACtC,CAAC,MAAM,IAAKD,UAAU,CAACE,OAAO,EAAG;MAChCF,UAAU,CAACE,OAAO,CAAC,CAAC;IACrB;EACD,CAAC,EAAEH,YAAa,CAAC;AAClB","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-ref-effect/index.ts"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { DependencyList, RefCallback } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef } from '@wordpress/element';\n\n/**\n * Effect-like ref callback. Just like with `useEffect`, this allows you to\n * return a cleanup function to be run if the ref changes or one of the\n * dependencies changes. The ref is provided as an argument to the callback\n * functions. The main difference between this and `useEffect` is that\n * the `useEffect` callback is not called when the ref changes, but this is.\n * Pass the returned ref callback as the component's ref and merge multiple refs\n * with `useMergeRefs`.\n *\n * It's worth noting that if the dependencies array is empty, there's not\n * strictly a need to clean up event handlers for example, because the node is\n * to be removed. It *is* necessary if you add dependencies because the ref\n * callback will be called multiple times for the same node.\n *\n * @param callback     Callback with ref as argument.\n * @param dependencies Dependencies of the callback.\n *\n * @return Ref callback.\n */\nexport default function useRefEffect< TElement = Node >(\n\tcallback: ( node: TElement ) => ( () => void ) | void,\n\tdependencies: DependencyList\n): RefCallback< TElement | null > {\n\tconst cleanupRef = useRef< ( () => void ) | void >();\n\treturn useCallback( ( node: TElement | null ) => {\n\t\tif ( node ) {\n\t\t\tcleanupRef.current = callback( node );\n\t\t} else if ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t}\n\t}, dependencies );\n}\n"],
+  "mappings": "AAQA,SAAS,aAAa,cAAc;AAqBrB,SAAR,aACN,UACA,cACiC;AACjC,QAAM,aAAa,OAAgC;AACnD,SAAO,YAAa,CAAE,SAA2B;AAChD,QAAK,MAAO;AACX,iBAAW,UAAU,SAAU,IAAK;AAAA,IACrC,WAAY,WAAW,SAAU;AAChC,iBAAW,QAAQ;AAAA,IACpB;AAAA,EACD,GAAG,YAAa;AACjB;",
+  "names": []
+}

package/build-module/hooks/use-resize-observer/index.js

@@ -1,63 +1,9 @@
-/**
- * Internal dependencies
- */
-import { useResizeObserver as _useResizeObserver } from './use-resize-observer';
-import _useLegacyResizeObserver from './legacy';
-/**
- * External dependencies
- */
-
-/**
- * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
- * for an HTML or SVG element.
- *
- * Pass the returned setter as a callback ref to the React element you want
- * to observe, or use it in layout effects for advanced use cases.
- *
- * @example
- *
- * ```tsx
- * const setElement = useResizeObserver(
- * 	( resizeObserverEntries ) => console.log( resizeObserverEntries ),
- * 	{ box: 'border-box' }
- * );
- * <div ref={ setElement } />;
- *
- * // The setter can be used in other ways, for example:
- * useLayoutEffect( () => {
- * 	setElement( document.querySelector( `data-element-id="${ elementId }"` ) );
- * }, [ elementId ] );
- * ```
- *
- * @param callback The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
- * @param options  Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
- */
-
-/**
- * **This is a legacy API and should not be used.**
- *
- * @deprecated Use the other `useResizeObserver` API instead: `const ref = useResizeObserver( ( entries ) => { ... } )`.
- *
- * Hook which allows to listen to the resize event of any target element when it changes size.
- * _Note: `useResizeObserver` will report `null` sizes until after first render.
- *
- * @example
- *
- * ```js
- * const App = () => {
- * 	const [ resizeListener, sizes ] = useResizeObserver();
- *
- * 	return (
- * 		<div>
- * 			{ resizeListener }
- * 			Your content here
- * 		</div>
- * 	);
- * };
- * ```
- */
-
-export default function useResizeObserver(callback, options = {}) {
+import { useResizeObserver as _useResizeObserver } from "./use-resize-observer";
+import _useLegacyResizeObserver from "./legacy";
+function useResizeObserver(callback, options = {}) {
   return callback ? _useResizeObserver(callback, options) : _useLegacyResizeObserver();
 }
-//# sourceMappingURL=index.js.map
+export {
+  useResizeObserver as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/hooks/use-resize-observer/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useResizeObserver","_useResizeObserver","_useLegacyResizeObserver","callback","options"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.ts"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { useResizeObserver as _useResizeObserver } from './use-resize-observer';\nimport type { ObservedSize } from './legacy';\nimport _useLegacyResizeObserver from './legacy';\n/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)\n * for an HTML or SVG element.\n *\n * Pass the returned setter as a callback ref to the React element you want\n * to observe, or use it in layout effects for advanced use cases.\n *\n * @example\n *\n * ```tsx\n * const setElement = useResizeObserver(\n * \t( resizeObserverEntries ) => console.log( resizeObserverEntries ),\n * \t{ box: 'border-box' }\n * );\n * <div ref={ setElement } />;\n *\n * // The setter can be used in other ways, for example:\n * useLayoutEffect( () => {\n * \tsetElement( document.querySelector( `data-element-id=\"${ elementId }\"` ) );\n * }, [ elementId ] );\n * ```\n *\n * @param callback The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).\n * @param options  Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.\n */\nexport default function useResizeObserver< T extends Element >(\n\t/**\n\t * The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).\n\t */\n\tcallback: ResizeObserverCallback,\n\t/**\n\t * Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.\n\t */\n\toptions?: ResizeObserverOptions\n): ( element?: T | null ) => void;\n\n/**\n * **This is a legacy API and should not be used.**\n *\n * @deprecated Use the other `useResizeObserver` API instead: `const ref = useResizeObserver( ( entries ) => { ... } )`.\n *\n * Hook which allows to listen to the resize event of any target element when it changes size.\n * _Note: `useResizeObserver` will report `null` sizes until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeObserver(): [ ReactElement, ObservedSize ];\n\nexport default function useResizeObserver< T extends HTMLElement >(\n\tcallback?: ResizeObserverCallback,\n\toptions: ResizeObserverOptions = {}\n): ( ( element?: T | null ) => void ) | [ ReactElement, ObservedSize ] {\n\treturn callback\n\t\t? _useResizeObserver( callback, options )\n\t\t: _useLegacyResizeObserver();\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,iBAAiB,IAAIC,kBAAkB,QAAQ,uBAAuB;AAE/E,OAAOC,wBAAwB,MAAM,UAAU;AAC/C;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,eAAe,SAASF,iBAAiBA,CACxCG,QAAiC,EACjCC,OAA8B,GAAG,CAAC,CAAC,EACmC;EACtE,OAAOD,QAAQ,GACZF,kBAAkB,CAAEE,QAAQ,EAAEC,OAAQ,CAAC,GACvCF,wBAAwB,CAAC,CAAC;AAC9B","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-resize-observer/index.ts"],
+  "sourcesContent": ["/**\n * Internal dependencies\n */\nimport { useResizeObserver as _useResizeObserver } from './use-resize-observer';\nimport type { ObservedSize } from './legacy';\nimport _useLegacyResizeObserver from './legacy';\n/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)\n * for an HTML or SVG element.\n *\n * Pass the returned setter as a callback ref to the React element you want\n * to observe, or use it in layout effects for advanced use cases.\n *\n * @example\n *\n * ```tsx\n * const setElement = useResizeObserver(\n * \t( resizeObserverEntries ) => console.log( resizeObserverEntries ),\n * \t{ box: 'border-box' }\n * );\n * <div ref={ setElement } />;\n *\n * // The setter can be used in other ways, for example:\n * useLayoutEffect( () => {\n * \tsetElement( document.querySelector( `data-element-id=\"${ elementId }\"` ) );\n * }, [ elementId ] );\n * ```\n *\n * @param callback The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).\n * @param options  Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.\n */\nexport default function useResizeObserver< T extends Element >(\n\t/**\n\t * The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).\n\t */\n\tcallback: ResizeObserverCallback,\n\t/**\n\t * Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.\n\t */\n\toptions?: ResizeObserverOptions\n): ( element?: T | null ) => void;\n\n/**\n * **This is a legacy API and should not be used.**\n *\n * @deprecated Use the other `useResizeObserver` API instead: `const ref = useResizeObserver( ( entries ) => { ... } )`.\n *\n * Hook which allows to listen to the resize event of any target element when it changes size.\n * _Note: `useResizeObserver` will report `null` sizes until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeObserver(): [ ReactElement, ObservedSize ];\n\nexport default function useResizeObserver< T extends HTMLElement >(\n\tcallback?: ResizeObserverCallback,\n\toptions: ResizeObserverOptions = {}\n): ( ( element?: T | null ) => void ) | [ ReactElement, ObservedSize ] {\n\treturn callback\n\t\t? _useResizeObserver( callback, options )\n\t\t: _useLegacyResizeObserver();\n}\n"],
+  "mappings": "AAGA,SAAS,qBAAqB,0BAA0B;AAExD,OAAO,8BAA8B;AAmEtB,SAAR,kBACN,UACA,UAAiC,CAAC,GACoC;AACtE,SAAO,WACJ,mBAAoB,UAAU,OAAQ,IACtC,yBAAyB;AAC7B;",
+  "names": []
+}

package/build-module/hooks/use-resize-observer/legacy/index.js

@@ -1,130 +1,62 @@
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-import { useCallback, useRef, useState } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import { useResizeObserver } from '../use-resize-observer';
-import { jsx as _jsx } from "react/jsx-runtime";
-// We're only using the first element of the size sequences, until future versions of the spec solidify on how
-// exactly it'll be used for fragments in multi-column scenarios:
-// From the spec:
-// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
-// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
-// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
-// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
-// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
-//
-// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
-// regardless of the "box" option.
-// The spec states the following on this:
-// > This does not have any impact on which box dimensions are returned to the defined callback when the event
-// > is fired, it solely defines which box the author wishes to observe layout changes on.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
-// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
-// > This section is non-normative. An author may desire to observe more than one CSS box.
-// > In this case, author will need to use multiple ResizeObservers.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
-// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
-// For this reason I decided to only return the requested size,
-// even though it seems we have access to results for all box types.
-// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
-// regardless of box option.
-const extractSize = entry => {
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "@wordpress/element";
+import { useResizeObserver } from "../use-resize-observer";
+const extractSize = (entry) => {
   let entrySize;
   if (!entry.contentBoxSize) {
-    // The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
-    // See the 6th step in the description for the RO algorithm:
-    // https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
-    // > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
-    // In real browser implementations of course these objects differ, but the width/height values should be equivalent.
     entrySize = [entry.contentRect.width, entry.contentRect.height];
   } else if (entry.contentBoxSize[0]) {
     const contentBoxSize = entry.contentBoxSize[0];
     entrySize = [contentBoxSize.inlineSize, contentBoxSize.blockSize];
   } else {
-    // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's buggy
-    // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
     const contentBoxSize = entry.contentBoxSize;
     entrySize = [contentBoxSize.inlineSize, contentBoxSize.blockSize];
   }
-  const [width, height] = entrySize.map(d => Math.round(d));
-  return {
-    width,
-    height
-  };
+  const [width, height] = entrySize.map((d) => Math.round(d));
+  return { width, height };
 };
 const RESIZE_ELEMENT_STYLES = {
-  position: 'absolute',
+  position: "absolute",
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  pointerEvents: 'none',
+  pointerEvents: "none",
   opacity: 0,
-  overflow: 'hidden',
+  overflow: "hidden",
   zIndex: -1
 };
-function ResizeElement({
-  onResize
-}) {
-  const resizeElementRef = useResizeObserver(entries => {
-    const newSize = extractSize(entries.at(-1)); // Entries are never empty.
+function ResizeElement({ onResize }) {
+  const resizeElementRef = useResizeObserver((entries) => {
+    const newSize = extractSize(entries.at(-1));
     onResize(newSize);
   });
-  return /*#__PURE__*/_jsx("div", {
-    ref: resizeElementRef,
-    style: RESIZE_ELEMENT_STYLES,
-    "aria-hidden": "true"
-  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: resizeElementRef,
+      style: RESIZE_ELEMENT_STYLES,
+      "aria-hidden": "true"
+    }
+  );
 }
 function sizeEquals(a, b) {
   return a.width === b.width && a.height === b.height;
 }
-const NULL_SIZE = {
-  width: null,
-  height: null
-};
-
-/**
- * Hook which allows to listen to the resize event of any target element when it changes size.
- * _Note: `useResizeObserver` will report `null` sizes until after first render.
- *
- * @example
- *
- * ```js
- * const App = () => {
- * 	const [ resizeListener, sizes ] = useResizeObserver();
- *
- * 	return (
- * 		<div>
- * 			{ resizeListener }
- * 			Your content here
- * 		</div>
- * 	);
- * };
- * ```
- */
-export default function useLegacyResizeObserver() {
+const NULL_SIZE = { width: null, height: null };
+function useLegacyResizeObserver() {
   const [size, setSize] = useState(NULL_SIZE);
-
-  // Using a ref to track the previous width / height to avoid unnecessary renders.
   const previousSizeRef = useRef(NULL_SIZE);
-  const handleResize = useCallback(newSize => {
+  const handleResize = useCallback((newSize) => {
     if (!sizeEquals(previousSizeRef.current, newSize)) {
       previousSizeRef.current = newSize;
       setSize(newSize);
     }
   }, []);
-  const resizeElement = /*#__PURE__*/_jsx(ResizeElement, {
-    onResize: handleResize
-  });
+  const resizeElement = /* @__PURE__ */ jsx(ResizeElement, { onResize: handleResize });
   return [resizeElement, size];
 }
-//# sourceMappingURL=index.js.map
+export {
+  useLegacyResizeObserver as default
+};
+//# sourceMappingURL=index.js.map

package/build-module/hooks/use-resize-observer/legacy/index.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useCallback","useRef","useState","useResizeObserver","jsx","_jsx","extractSize","entry","entrySize","contentBoxSize","contentRect","width","height","inlineSize","blockSize","map","d","Math","round","RESIZE_ELEMENT_STYLES","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex","ResizeElement","onResize","resizeElementRef","entries","newSize","at","ref","style","sizeEquals","a","b","NULL_SIZE","useLegacyResizeObserver","size","setSize","previousSizeRef","handleResize","current","resizeElement"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/legacy/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef, useState } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { useResizeObserver } from '../use-resize-observer';\n\nexport type ObservedSize = {\n\twidth: number | null;\n\theight: number | null;\n};\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = ( entry: ResizeObserverEntry ): ObservedSize => {\n\tlet entrySize;\n\tif ( ! entry.contentBoxSize ) {\n\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t// See the 6th step in the description for the RO algorithm:\n\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\tentrySize = [ entry.contentRect.width, entry.contentRect.height ];\n\t} else if ( entry.contentBoxSize[ 0 ] ) {\n\t\tconst contentBoxSize = entry.contentBoxSize[ 0 ];\n\t\tentrySize = [ contentBoxSize.inlineSize, contentBoxSize.blockSize ];\n\t} else {\n\t\t// TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's buggy\n\t\t// behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\tconst contentBoxSize =\n\t\t\tentry.contentBoxSize as unknown as ResizeObserverSize;\n\t\tentrySize = [ contentBoxSize.inlineSize, contentBoxSize.blockSize ];\n\t}\n\n\tconst [ width, height ] = entrySize.map( ( d ) => Math.round( d ) );\n\treturn { width, height };\n};\n\nconst RESIZE_ELEMENT_STYLES = {\n\tposition: 'absolute',\n\ttop: 0,\n\tleft: 0,\n\tright: 0,\n\tbottom: 0,\n\tpointerEvents: 'none',\n\topacity: 0,\n\toverflow: 'hidden',\n\tzIndex: -1,\n} as const;\n\ntype ResizeElementProps = {\n\tonResize: ( s: ObservedSize ) => void;\n};\n\nfunction ResizeElement( { onResize }: ResizeElementProps ) {\n\tconst resizeElementRef = useResizeObserver( ( entries ) => {\n\t\tconst newSize = extractSize( entries.at( -1 )! ); // Entries are never empty.\n\t\tonResize( newSize );\n\t} );\n\n\treturn (\n\t\t<div\n\t\t\tref={ resizeElementRef }\n\t\t\tstyle={ RESIZE_ELEMENT_STYLES }\n\t\t\taria-hidden=\"true\"\n\t\t/>\n\t);\n}\n\nfunction sizeEquals( a: ObservedSize, b: ObservedSize ) {\n\treturn a.width === b.width && a.height === b.height;\n}\n\nconst NULL_SIZE: ObservedSize = { width: null, height: null };\n\n/**\n * Hook which allows to listen to the resize event of any target element when it changes size.\n * _Note: `useResizeObserver` will report `null` sizes until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useLegacyResizeObserver(): [\n\tReactElement,\n\tObservedSize,\n] {\n\tconst [ size, setSize ] = useState( NULL_SIZE );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previousSizeRef = useRef( NULL_SIZE );\n\n\tconst handleResize = useCallback( ( newSize: ObservedSize ) => {\n\t\tif ( ! sizeEquals( previousSizeRef.current, newSize ) ) {\n\t\t\tpreviousSizeRef.current = newSize;\n\t\t\tsetSize( newSize );\n\t\t}\n\t}, [] );\n\n\tconst resizeElement = <ResizeElement onResize={ handleResize } />;\n\treturn [ resizeElement, size ];\n}\n"],"mappings":"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","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../../src/hooks/use-resize-observer/legacy/index.tsx"],
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback, useRef, useState } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport { useResizeObserver } from '../use-resize-observer';\n\nexport type ObservedSize = {\n\twidth: number | null;\n\theight: number | null;\n};\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = ( entry: ResizeObserverEntry ): ObservedSize => {\n\tlet entrySize;\n\tif ( ! entry.contentBoxSize ) {\n\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t// See the 6th step in the description for the RO algorithm:\n\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\tentrySize = [ entry.contentRect.width, entry.contentRect.height ];\n\t} else if ( entry.contentBoxSize[ 0 ] ) {\n\t\tconst contentBoxSize = entry.contentBoxSize[ 0 ];\n\t\tentrySize = [ contentBoxSize.inlineSize, contentBoxSize.blockSize ];\n\t} else {\n\t\t// TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's buggy\n\t\t// behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\tconst contentBoxSize =\n\t\t\tentry.contentBoxSize as unknown as ResizeObserverSize;\n\t\tentrySize = [ contentBoxSize.inlineSize, contentBoxSize.blockSize ];\n\t}\n\n\tconst [ width, height ] = entrySize.map( ( d ) => Math.round( d ) );\n\treturn { width, height };\n};\n\nconst RESIZE_ELEMENT_STYLES = {\n\tposition: 'absolute',\n\ttop: 0,\n\tleft: 0,\n\tright: 0,\n\tbottom: 0,\n\tpointerEvents: 'none',\n\topacity: 0,\n\toverflow: 'hidden',\n\tzIndex: -1,\n} as const;\n\ntype ResizeElementProps = {\n\tonResize: ( s: ObservedSize ) => void;\n};\n\nfunction ResizeElement( { onResize }: ResizeElementProps ) {\n\tconst resizeElementRef = useResizeObserver( ( entries ) => {\n\t\tconst newSize = extractSize( entries.at( -1 )! ); // Entries are never empty.\n\t\tonResize( newSize );\n\t} );\n\n\treturn (\n\t\t<div\n\t\t\tref={ resizeElementRef }\n\t\t\tstyle={ RESIZE_ELEMENT_STYLES }\n\t\t\taria-hidden=\"true\"\n\t\t/>\n\t);\n}\n\nfunction sizeEquals( a: ObservedSize, b: ObservedSize ) {\n\treturn a.width === b.width && a.height === b.height;\n}\n\nconst NULL_SIZE: ObservedSize = { width: null, height: null };\n\n/**\n * Hook which allows to listen to the resize event of any target element when it changes size.\n * _Note: `useResizeObserver` will report `null` sizes until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useLegacyResizeObserver(): [\n\tReactElement,\n\tObservedSize,\n] {\n\tconst [ size, setSize ] = useState( NULL_SIZE );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previousSizeRef = useRef( NULL_SIZE );\n\n\tconst handleResize = useCallback( ( newSize: ObservedSize ) => {\n\t\tif ( ! sizeEquals( previousSizeRef.current, newSize ) ) {\n\t\t\tpreviousSizeRef.current = newSize;\n\t\t\tsetSize( newSize );\n\t\t}\n\t}, [] );\n\n\tconst resizeElement = <ResizeElement onResize={ handleResize } />;\n\treturn [ resizeElement, size ];\n}\n"],
+  "mappings": "AA2FE;AAnFF,SAAS,aAAa,QAAQ,gBAAgB;AAI9C,SAAS,yBAAyB;AAgClC,MAAM,cAAc,CAAE,UAA8C;AACnE,MAAI;AACJ,MAAK,CAAE,MAAM,gBAAiB;AAM7B,gBAAY,CAAE,MAAM,YAAY,OAAO,MAAM,YAAY,MAAO;AAAA,EACjE,WAAY,MAAM,eAAgB,CAAE,GAAI;AACvC,UAAM,iBAAiB,MAAM,eAAgB,CAAE;AAC/C,gBAAY,CAAE,eAAe,YAAY,eAAe,SAAU;AAAA,EACnE,OAAO;AAGN,UAAM,iBACL,MAAM;AACP,gBAAY,CAAE,eAAe,YAAY,eAAe,SAAU;AAAA,EACnE;AAEA,QAAM,CAAE,OAAO,MAAO,IAAI,UAAU,IAAK,CAAE,MAAO,KAAK,MAAO,CAAE,CAAE;AAClE,SAAO,EAAE,OAAO,OAAO;AACxB;AAEA,MAAM,wBAAwB;AAAA,EAC7B,UAAU;AAAA,EACV,KAAK;AAAA,EACL,MAAM;AAAA,EACN,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,eAAe;AAAA,EACf,SAAS;AAAA,EACT,UAAU;AAAA,EACV,QAAQ;AACT;AAMA,SAAS,cAAe,EAAE,SAAS,GAAwB;AAC1D,QAAM,mBAAmB,kBAAmB,CAAE,YAAa;AAC1D,UAAM,UAAU,YAAa,QAAQ,GAAI,EAAG,CAAG;AAC/C,aAAU,OAAQ;AAAA,EACnB,CAAE;AAEF,SACC;AAAA,IAAC;AAAA;AAAA,MACA,KAAM;AAAA,MACN,OAAQ;AAAA,MACR,eAAY;AAAA;AAAA,EACb;AAEF;AAEA,SAAS,WAAY,GAAiB,GAAkB;AACvD,SAAO,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE;AAC9C;AAEA,MAAM,YAA0B,EAAE,OAAO,MAAM,QAAQ,KAAK;AAqB7C,SAAR,0BAGL;AACD,QAAM,CAAE,MAAM,OAAQ,IAAI,SAAU,SAAU;AAG9C,QAAM,kBAAkB,OAAQ,SAAU;AAE1C,QAAM,eAAe,YAAa,CAAE,YAA2B;AAC9D,QAAK,CAAE,WAAY,gBAAgB,SAAS,OAAQ,GAAI;AACvD,sBAAgB,UAAU;AAC1B,cAAS,OAAQ;AAAA,IAClB;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,QAAM,gBAAgB,oBAAC,iBAAc,UAAW,cAAe;AAC/D,SAAO,CAAE,eAAe,IAAK;AAC9B;",
+  "names": []
+}

package/build-module/hooks/use-resize-observer/use-resize-observer.js

@@ -1,43 +1,25 @@
-/**
- * WordPress dependencies
- */
-import { useRef } from '@wordpress/element';
-/**
- * Internal dependencies
- */
-import useEvent from '../use-event';
-
-// This is the current implementation of `useResizeObserver`.
-//
-// The legacy implementation is still supported for backwards compatibility.
-// This is achieved by overloading the exported function with both signatures,
-// and detecting which API is being used at runtime.
-export function useResizeObserver(callback, resizeObserverOptions = {}) {
+import { useRef } from "@wordpress/element";
+import useEvent from "../use-event";
+function useResizeObserver(callback, resizeObserverOptions = {}) {
   const callbackEvent = useEvent(callback);
   const observedElementRef = useRef();
   const resizeObserverRef = useRef();
-  return useEvent(element => {
-    var _resizeObserverRef$cu;
+  return useEvent((element) => {
     if (element === observedElementRef.current) {
       return;
     }
-
-    // Set up `ResizeObserver`.
-    (_resizeObserverRef$cu = resizeObserverRef.current) !== null && _resizeObserverRef$cu !== void 0 ? _resizeObserverRef$cu : resizeObserverRef.current = new ResizeObserver(callbackEvent);
-    const {
-      current: resizeObserver
-    } = resizeObserverRef;
-
-    // Unobserve previous element.
+    resizeObserverRef.current ??= new ResizeObserver(callbackEvent);
+    const { current: resizeObserver } = resizeObserverRef;
     if (observedElementRef.current) {
       resizeObserver.unobserve(observedElementRef.current);
     }
-
-    // Observe new element.
     observedElementRef.current = element;
     if (element) {
       resizeObserver.observe(element, resizeObserverOptions);
     }
   });
 }
-//# sourceMappingURL=use-resize-observer.js.map
+export {
+  useResizeObserver
+};
+//# sourceMappingURL=use-resize-observer.js.map

package/build-module/hooks/use-resize-observer/use-resize-observer.js.map

@@ -1 +1,7 @@
-{"version":3,"names":["useRef","useEvent","useResizeObserver","callback","resizeObserverOptions","callbackEvent","observedElementRef","resizeObserverRef","element","_resizeObserverRef$cu","current","ResizeObserver","resizeObserver","unobserve","observe"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/use-resize-observer.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;AAC3C;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,cAAc;;AAEnC;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,iBAAiBA,CAChCC,QAAgC,EAChCC,qBAA4C,GAAG,CAAC,CAAC,EAChB;EACjC,MAAMC,aAAa,GAAGJ,QAAQ,CAAEE,QAAS,CAAC;EAE1C,MAAMG,kBAAkB,GAAGN,MAAM,CAAa,CAAC;EAC/C,MAAMO,iBAAiB,GAAGP,MAAM,CAAmB,CAAC;EACpD,OAAOC,QAAQ,CAAIO,OAAkB,IAAM;IAAA,IAAAC,qBAAA;IAC1C,IAAKD,OAAO,KAAKF,kBAAkB,CAACI,OAAO,EAAG;MAC7C;IACD;;IAEA;IACA,CAAAD,qBAAA,GAAAF,iBAAiB,CAACG,OAAO,cAAAD,qBAAA,cAAAA,qBAAA,GAAzBF,iBAAiB,CAACG,OAAO,GAAK,IAAIC,cAAc,CAAEN,aAAc,CAAC;IACjE,MAAM;MAAEK,OAAO,EAAEE;IAAe,CAAC,GAAGL,iBAAiB;;IAErD;IACA,IAAKD,kBAAkB,CAACI,OAAO,EAAG;MACjCE,cAAc,CAACC,SAAS,CAAEP,kBAAkB,CAACI,OAAQ,CAAC;IACvD;;IAEA;IACAJ,kBAAkB,CAACI,OAAO,GAAGF,OAAO;IACpC,IAAKA,OAAO,EAAG;MACdI,cAAc,CAACE,OAAO,CAAEN,OAAO,EAAEJ,qBAAsB,CAAC;IACzD;EACD,CAAE,CAAC;AACJ","ignoreList":[]}
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-resize-observer/use-resize-observer.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
+  "mappings": "AAGA,SAAS,cAAc;AAIvB,OAAO,cAAc;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,gBAAgB,SAAU,QAAS;AAEzC,QAAM,qBAAqB,OAAmB;AAC9C,QAAM,oBAAoB,OAAyB;AACnD,SAAO,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU;AAC7B,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
+  "names": []
+}