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

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

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","usePrevious","value","ref","useRef","useEffect","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":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,WAAWA,CAAOC,KAAQ,EAAkB;EACnE,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAAM,CAAC;;EAEzB;EACA,IAAAC,kBAAS,EAAE,MAAM;IAChBF,GAAG,CAACG,OAAO,GAAGJ,KAAK;EACpB,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC,CAAC,CAAC;;EAEhB;EACA,OAAOC,GAAG,CAACG,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkC;AAUnB,SAAR,YAAmC,OAA0B;AACnE,QAAM,UAAM,uBAAY;AAGxB,gCAAW,MAAM;AAChB,QAAI,UAAU;AAAA,EACf,GAAG,CAAE,KAAM,CAAE;AAGb,SAAO,IAAI;AACZ;",
+  "names": []
+}

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

@@ -1,20 +1,37 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_reduced_motion_exports = {};
+__export(use_reduced_motion_exports, {
+  default: () => use_reduced_motion_default
 });
-exports.default = void 0;
-var _useMediaQuery = _interopRequireDefault(require("../use-media-query"));
-/**
- * Internal dependencies
- */
-
-/**
- * Hook returning whether the user has a preference for reduced motion.
- *
- * @return {boolean} Reduced motion preference value.
- */
-const useReducedMotion = () => (0, _useMediaQuery.default)('(prefers-reduced-motion: reduce)');
-var _default = exports.default = useReducedMotion;
-//# sourceMappingURL=index.js.map
+module.exports = __toCommonJS(use_reduced_motion_exports);
+var import_use_media_query = __toESM(require("../use-media-query"));
+const useReducedMotion = () => (0, import_use_media_query.default)("(prefers-reduced-motion: reduce)");
+var use_reduced_motion_default = useReducedMotion;
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_useMediaQuery","_interopRequireDefault","require","useReducedMotion","useMediaQuery","_default","exports","default"],"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":";;;;;;;AAGA,IAAAA,cAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGA,CAAA,KACxB,IAAAC,sBAAa,EAAE,kCAAmC,CAAC;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEtCJ,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,6BAA0B;AAO1B,MAAM,mBAAmB,UACxB,uBAAAA,SAAe,kCAAmC;AAEnD,IAAO,6BAAQ;",
+  "names": ["useMediaQuery"]
+}

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

@@ -1,40 +1,30 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_ref_effect_exports = {};
+__export(use_ref_effect_exports, {
+  default: () => useRefEffect
 });
-exports.default = useRefEffect;
-var _element = require("@wordpress/element");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * 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.
- */
+module.exports = __toCommonJS(use_ref_effect_exports);
+var import_element = require("@wordpress/element");
 function useRefEffect(callback, dependencies) {
-  const cleanupRef = (0, _element.useRef)();
-  return (0, _element.useCallback)(node => {
+  const cleanupRef = (0, import_element.useRef)();
+  return (0, import_element.useCallback)((node) => {
     if (node) {
       cleanupRef.current = callback(node);
     } else if (cleanupRef.current) {
@@ -42,4 +32,4 @@ function useRefEffect(callback, dependencies) {
     }
   }, dependencies);
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","useRefEffect","callback","dependencies","cleanupRef","useRef","useCallback","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":";;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,YAAYA,CACnCC,QAAqD,EACrDC,YAA4B,EACK;EACjC,MAAMC,UAAU,GAAG,IAAAC,eAAM,EAA0B,CAAC;EACpD,OAAO,IAAAC,oBAAW,EAAIC,IAAqB,IAAM;IAChD,IAAKA,IAAI,EAAG;MACXH,UAAU,CAACI,OAAO,GAAGN,QAAQ,CAAEK,IAAK,CAAC;IACtC,CAAC,MAAM,IAAKH,UAAU,CAACI,OAAO,EAAG;MAChCJ,UAAU,CAACI,OAAO,CAAC,CAAC;IACrB;EACD,CAAC,EAAEL,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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAAoC;AAqBrB,SAAR,aACN,UACA,cACiC;AACjC,QAAM,iBAAa,uBAAgC;AACnD,aAAO,4BAAa,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/hooks/use-resize-observer/index.js

@@ -1,71 +1,39 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_resize_observer_exports = {};
+__export(use_resize_observer_exports, {
+  default: () => useResizeObserver
 });
-exports.default = useResizeObserver;
-var _useResizeObserver2 = require("./use-resize-observer");
-var _legacy = _interopRequireDefault(require("./legacy"));
-/**
- * Internal dependencies
- */
-
-/**
- * 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>
- * 	);
- * };
- * ```
- */
-
+module.exports = __toCommonJS(use_resize_observer_exports);
+var import_use_resize_observer = require("./use-resize-observer");
+var import_legacy = __toESM(require("./legacy"));
 function useResizeObserver(callback, options = {}) {
-  return callback ? (0, _useResizeObserver2.useResizeObserver)(callback, options) : (0, _legacy.default)();
+  return callback ? (0, import_use_resize_observer.useResizeObserver)(callback, options) : (0, import_legacy.default)();
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_useResizeObserver2","require","_legacy","_interopRequireDefault","useResizeObserver","callback","options","_useResizeObserver","_useLegacyResizeObserver"],"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":";;;;;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAEA,IAAAC,OAAA,GAAAC,sBAAA,CAAAF,OAAA;AALA;AACA;AACA;;AAIA;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;;AAGe,SAASG,iBAAiBA,CACxCC,QAAiC,EACjCC,OAA8B,GAAG,CAAC,CAAC,EACmC;EACtE,OAAOD,QAAQ,GACZ,IAAAE,qCAAkB,EAAEF,QAAQ,EAAEC,OAAQ,CAAC,GACvC,IAAAE,eAAwB,EAAC,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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iCAAwD;AAExD,oBAAqC;AAmEtB,SAAR,kBACN,UACA,UAAiC,CAAC,GACoC;AACtE,SAAO,eACJ,2BAAAA,mBAAoB,UAAU,OAAQ,QACtC,cAAAC,SAAyB;AAC7B;",
+  "names": ["_useResizeObserver", "_useLegacyResizeObserver"]
+}

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

@@ -1,138 +1,82 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var legacy_exports = {};
+__export(legacy_exports, {
+  default: () => useLegacyResizeObserver
 });
-exports.default = useLegacyResizeObserver;
-var _element = require("@wordpress/element");
-var _useResizeObserver = require("../use-resize-observer");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * External dependencies
- */
-
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-// 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 => {
+module.exports = __toCommonJS(legacy_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_element = require("@wordpress/element");
+var import_use_resize_observer = require("../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 = (0, _useResizeObserver.useResizeObserver)(entries => {
-    const newSize = extractSize(entries.at(-1)); // Entries are never empty.
+function ResizeElement({ onResize }) {
+  const resizeElementRef = (0, import_use_resize_observer.useResizeObserver)((entries) => {
+    const newSize = extractSize(entries.at(-1));
     onResize(newSize);
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    ref: resizeElementRef,
-    style: RESIZE_ELEMENT_STYLES,
-    "aria-hidden": "true"
-  });
+  return /* @__PURE__ */ (0, import_jsx_runtime.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>
- * 	);
- * };
- * ```
- */
+const NULL_SIZE = { width: null, height: null };
 function useLegacyResizeObserver() {
-  const [size, setSize] = (0, _element.useState)(NULL_SIZE);
-
-  // Using a ref to track the previous width / height to avoid unnecessary renders.
-  const previousSizeRef = (0, _element.useRef)(NULL_SIZE);
-  const handleResize = (0, _element.useCallback)(newSize => {
+  const [size, setSize] = (0, import_element.useState)(NULL_SIZE);
+  const previousSizeRef = (0, import_element.useRef)(NULL_SIZE);
+  const handleResize = (0, import_element.useCallback)((newSize) => {
     if (!sizeEquals(previousSizeRef.current, newSize)) {
       previousSizeRef.current = newSize;
       setSize(newSize);
     }
   }, []);
-  const resizeElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizeElement, {
-    onResize: handleResize
-  });
+  const resizeElement = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResizeElement, { onResize: handleResize });
   return [resizeElement, size];
 }
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -1 +1,7 @@
-{"version":3,"names":["_element","require","_useResizeObserver","_jsxRuntime","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","useResizeObserver","entries","newSize","at","jsx","ref","style","sizeEquals","a","b","NULL_SIZE","useLegacyResizeObserver","size","setSize","useState","previousSizeRef","useRef","handleResize","useCallback","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": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA2FE;AAnFF,qBAA8C;AAI9C,iCAAkC;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,uBAAmB,8CAAmB,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,QAAI,yBAAU,SAAU;AAG9C,QAAM,sBAAkB,uBAAQ,SAAU;AAE1C,QAAM,mBAAe,4BAAa,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,4CAAC,iBAAc,UAAW,cAAe;AAC/D,SAAO,CAAE,eAAe,IAAK;AAC9B;",
+  "names": []
+}

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

@@ -1,51 +1,59 @@
 "use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_resize_observer_exports = {};
+__export(use_resize_observer_exports, {
+  useResizeObserver: () => useResizeObserver
 });
-exports.useResizeObserver = useResizeObserver;
-var _element = require("@wordpress/element");
-var _useEvent = _interopRequireDefault(require("../use-event"));
-/**
- * WordPress dependencies
- */
-
-/**
- * Internal dependencies
- */
-
-// 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.
+module.exports = __toCommonJS(use_resize_observer_exports);
+var import_element = require("@wordpress/element");
+var import_use_event = __toESM(require("../use-event"));
 function useResizeObserver(callback, resizeObserverOptions = {}) {
-  const callbackEvent = (0, _useEvent.default)(callback);
-  const observedElementRef = (0, _element.useRef)();
-  const resizeObserverRef = (0, _element.useRef)();
-  return (0, _useEvent.default)(element => {
-    var _resizeObserverRef$cu;
+  const callbackEvent = (0, import_use_event.default)(callback);
+  const observedElementRef = (0, import_element.useRef)();
+  const resizeObserverRef = (0, import_element.useRef)();
+  return (0, import_use_event.default)((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
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useResizeObserver
+});
+//# sourceMappingURL=use-resize-observer.js.map