@wordpress/compose 7.6.0 → 7.8.0

package/build/hooks/use-merge-refs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","assignRef","ref","value","hasOwnProperty","current","useMergeRefs","refs","element","useRef","isAttached","didElementChange","previousRefs","currentRefs","useLayoutEffect","forEach","index","previousRef","useCallback","refsToAssign"],"sources":["@wordpress/compose/src/hooks/use-merge-refs/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @template T\n * @param {import('react').Ref<T>} ref\n * @param {T}                      value\n */\nfunction assignRef( ref, value ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t/* eslint-disable jsdoc/no-undefined-types */\n\t\t/** @type {import('react').MutableRefObject<T>} */ ( ref ).current =\n\t\t\tvalue;\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useRefEffect( ( node ) => {\n *   node.addEventListener( ... );\n *   return () => {\n *     node.removeEventListener( ... );\n *   };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs useMergeRefs( [\n *   enabled && ref,\n *   otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @template {import('react').Ref<any>} TRef\n * @param {Array<TRef>} refs The refs to be merged.\n *\n * @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.\n */\nexport default function useMergeRefs( refs ) {\n\tconst element = useRef();\n\tconst isAttached = useRef( false );\n\tconst didElementChange = useRef( false );\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<TRef[]>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tconst previousRefs = useRef( [] );\n\tconst currentRefs = useRef( refs );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefs.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChange.current === false &&\n\t\t\tisAttached.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefs.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefs.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChange.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\tassignRef( element, value );\n\n\t\tdidElementChange.current = true;\n\t\tisAttached.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tconst refsToAssign = value ? currentRefs.current : previousRefs.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASC,SAASA,CAAEC,GAAG,EAAEC,KAAK,EAAG;EAChC,IAAK,OAAOD,GAAG,KAAK,UAAU,EAAG;IAChCA,GAAG,CAAEC,KAAM,CAAC;EACb,CAAC,MAAM,IAAKD,GAAG,IAAIA,GAAG,CAACE,cAAc,CAAE,SAAU,CAAC,EAAG;IACpD;IACA,kDAAqDF,GAAG,CAAGG,OAAO,GACjEF,KAAK;IACN;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASG,YAAYA,CAAEC,IAAI,EAAG;EAC5C,MAAMC,OAAO,GAAG,IAAAC,eAAM,EAAC,CAAC;EACxB,MAAMC,UAAU,GAAG,IAAAD,eAAM,EAAE,KAAM,CAAC;EAClC,MAAME,gBAAgB,GAAG,IAAAF,eAAM,EAAE,KAAM,CAAC;EACxC;EACA;EACA;EACA,MAAMG,YAAY,GAAG,IAAAH,eAAM,EAAE,EAAG,CAAC;EACjC,MAAMI,WAAW,GAAG,IAAAJ,eAAM,EAAEF,IAAK,CAAC;;EAElC;EACA;EACAM,WAAW,CAACR,OAAO,GAAGE,IAAI;;EAE1B;EACA;EACA;EACA,IAAAO,wBAAe,EAAE,MAAM;IACtB,IACCH,gBAAgB,CAACN,OAAO,KAAK,KAAK,IAClCK,UAAU,CAACL,OAAO,KAAK,IAAI,EAC1B;MACDE,IAAI,CAACQ,OAAO,CAAE,CAAEb,GAAG,EAAEc,KAAK,KAAM;QAC/B,MAAMC,WAAW,GAAGL,YAAY,CAACP,OAAO,CAAEW,KAAK,CAAE;QACjD,IAAKd,GAAG,KAAKe,WAAW,EAAG;UAC1BhB,SAAS,CAAEgB,WAAW,EAAE,IAAK,CAAC;UAC9BhB,SAAS,CAAEC,GAAG,EAAEM,OAAO,CAACH,OAAQ,CAAC;QAClC;MACD,CAAE,CAAC;IACJ;IAEAO,YAAY,CAACP,OAAO,GAAGE,IAAI;EAC5B,CAAC,EAAEA,IAAK,CAAC;;EAET;EACA;EACA,IAAAO,wBAAe,EAAE,MAAM;IACtBH,gBAAgB,CAACN,OAAO,GAAG,KAAK;EACjC,CAAE,CAAC;;EAEH;EACA;EACA,OAAO,IAAAa,oBAAW,EAAIf,KAAK,IAAM;IAChC;IACA;IACAF,SAAS,CAAEO,OAAO,EAAEL,KAAM,CAAC;IAE3BQ,gBAAgB,CAACN,OAAO,GAAG,IAAI;IAC/BK,UAAU,CAACL,OAAO,GAAGF,KAAK,KAAK,IAAI;;IAEnC;IACA;IACA,MAAMgB,YAAY,GAAGhB,KAAK,GAAGU,WAAW,CAACR,OAAO,GAAGO,YAAY,CAACP,OAAO;;IAEvE;IACA,KAAM,MAAMH,GAAG,IAAIiB,YAAY,EAAG;MACjClB,SAAS,CAAEC,GAAG,EAAEC,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
+{"version":3,"names":["_element","require","assignRef","ref","value","hasOwnProperty","current","useMergeRefs","refs","element","useRef","isAttachedRef","didElementChangeRef","previousRefsRef","currentRefsRef","useLayoutEffect","forEach","index","previousRef","useCallback","refsToAssign"],"sources":["@wordpress/compose/src/hooks/use-merge-refs/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @typedef {T extends import('react').Ref<infer R> ? R : never} TypeFromRef\n */\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @template T\n * @param {import('react').Ref<T>} ref\n * @param {T}                      value\n */\nfunction assignRef( ref, value ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t/* eslint-disable jsdoc/no-undefined-types */\n\t\t/** @type {import('react').MutableRefObject<T>} */ ( ref ).current =\n\t\t\tvalue;\n\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useRefEffect( ( node ) => {\n *   node.addEventListener( ... );\n *   return () => {\n *     node.removeEventListener( ... );\n *   };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs useMergeRefs( [\n *   enabled && ref,\n *   otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @template {import('react').Ref<any>} TRef\n * @param {Array<TRef>} refs The refs to be merged.\n *\n * @return {import('react').RefCallback<TypeFromRef<TRef>>} The merged ref callback.\n */\nexport default function useMergeRefs( refs ) {\n\tconst element = useRef();\n\tconst isAttachedRef = useRef( false );\n\tconst didElementChangeRef = useRef( false );\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<TRef[]>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tconst previousRefsRef = useRef( [] );\n\tconst currentRefsRef = useRef( refs );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChangeRef.current === false &&\n\t\t\tisAttachedRef.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefsRef.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefsRef.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChangeRef.current = false;\n\t} );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\tassignRef( element, value );\n\n\t\tdidElementChangeRef.current = true;\n\t\tisAttachedRef.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tconst refsToAssign = value\n\t\t\t? currentRefsRef.current\n\t\t\t: previousRefsRef.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,SAASC,SAASA,CAAEC,GAAG,EAAEC,KAAK,EAAG;EAChC,IAAK,OAAOD,GAAG,KAAK,UAAU,EAAG;IAChCA,GAAG,CAAEC,KAAM,CAAC;EACb,CAAC,MAAM,IAAKD,GAAG,IAAIA,GAAG,CAACE,cAAc,CAAE,SAAU,CAAC,EAAG;IACpD;IACA,kDAAqDF,GAAG,CAAGG,OAAO,GACjEF,KAAK;IACN;EACD;AACD;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASG,YAAYA,CAAEC,IAAI,EAAG;EAC5C,MAAMC,OAAO,GAAG,IAAAC,eAAM,EAAC,CAAC;EACxB,MAAMC,aAAa,GAAG,IAAAD,eAAM,EAAE,KAAM,CAAC;EACrC,MAAME,mBAAmB,GAAG,IAAAF,eAAM,EAAE,KAAM,CAAC;EAC3C;EACA;EACA;EACA,MAAMG,eAAe,GAAG,IAAAH,eAAM,EAAE,EAAG,CAAC;EACpC,MAAMI,cAAc,GAAG,IAAAJ,eAAM,EAAEF,IAAK,CAAC;;EAErC;EACA;EACAM,cAAc,CAACR,OAAO,GAAGE,IAAI;;EAE7B;EACA;EACA;EACA,IAAAO,wBAAe,EAAE,MAAM;IACtB,IACCH,mBAAmB,CAACN,OAAO,KAAK,KAAK,IACrCK,aAAa,CAACL,OAAO,KAAK,IAAI,EAC7B;MACDE,IAAI,CAACQ,OAAO,CAAE,CAAEb,GAAG,EAAEc,KAAK,KAAM;QAC/B,MAAMC,WAAW,GAAGL,eAAe,CAACP,OAAO,CAAEW,KAAK,CAAE;QACpD,IAAKd,GAAG,KAAKe,WAAW,EAAG;UAC1BhB,SAAS,CAAEgB,WAAW,EAAE,IAAK,CAAC;UAC9BhB,SAAS,CAAEC,GAAG,EAAEM,OAAO,CAACH,OAAQ,CAAC;QAClC;MACD,CAAE,CAAC;IACJ;IAEAO,eAAe,CAACP,OAAO,GAAGE,IAAI;EAC/B,CAAC,EAAEA,IAAK,CAAC;;EAET;EACA;EACA,IAAAO,wBAAe,EAAE,MAAM;IACtBH,mBAAmB,CAACN,OAAO,GAAG,KAAK;EACpC,CAAE,CAAC;;EAEH;EACA;EACA,OAAO,IAAAa,oBAAW,EAAIf,KAAK,IAAM;IAChC;IACA;IACAF,SAAS,CAAEO,OAAO,EAAEL,KAAM,CAAC;IAE3BQ,mBAAmB,CAACN,OAAO,GAAG,IAAI;IAClCK,aAAa,CAACL,OAAO,GAAGF,KAAK,KAAK,IAAI;;IAEtC;IACA;IACA,MAAMgB,YAAY,GAAGhB,KAAK,GACvBU,cAAc,CAACR,OAAO,GACtBO,eAAe,CAACP,OAAO;;IAE1B;IACA,KAAM,MAAMH,GAAG,IAAIiB,YAAY,EAAG;MACjClB,SAAS,CAAEC,GAAG,EAAEC,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}

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

@@ -33,12 +33,12 @@ var _element = require("@wordpress/element");
  * @return Ref callback.
  */
 function useRefEffect(callback, dependencies) {
-  const cleanup = (0, _element.useRef)();
+  const cleanupRef = (0, _element.useRef)();
   return (0, _element.useCallback)(node => {
     if (node) {
-      cleanup.current = callback(node);
-    } else if (cleanup.current) {
-      cleanup.current();
+      cleanupRef.current = callback(node);
+    } else if (cleanupRef.current) {
+      cleanupRef.current();
     }
   }, dependencies);
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","useRefEffect","callback","dependencies","cleanup","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 cleanup = useRef< ( () => void ) | void >();\n\treturn useCallback( ( node: TElement | null ) => {\n\t\tif ( node ) {\n\t\t\tcleanup.current = callback( node );\n\t\t} else if ( cleanup.current ) {\n\t\t\tcleanup.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,OAAO,GAAG,IAAAC,eAAM,EAA0B,CAAC;EACjD,OAAO,IAAAC,oBAAW,EAAIC,IAAqB,IAAM;IAChD,IAAKA,IAAI,EAAG;MACXH,OAAO,CAACI,OAAO,GAAGN,QAAQ,CAAEK,IAAK,CAAC;IACnC,CAAC,MAAM,IAAKH,OAAO,CAACI,OAAO,EAAG;MAC7BJ,OAAO,CAACI,OAAO,CAAC,CAAC;IAClB;EACD,CAAC,EAAEL,YAAa,CAAC;AAClB","ignoreList":[]}
+{"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":[]}

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

@@ -0,0 +1,139 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useLegacyResizeObserver;
+var _element = require("@wordpress/element");
+var _index = _interopRequireDefault(require("../index"));
+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 => {
+  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 RESIZE_ELEMENT_STYLES = {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  pointerEvents: 'none',
+  opacity: 0,
+  overflow: 'hidden',
+  zIndex: -1
+};
+function ResizeElement({
+  onResize
+}) {
+  const resizeElementRef = (0, _index.default)(entries => {
+    const newSize = extractSize(entries.at(-1)); // Entries are never empty.
+    onResize(newSize);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.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>
+ * 	);
+ * };
+ * ```
+ */
+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 => {
+    if (!sizeEquals(previousSizeRef.current, newSize)) {
+      previousSizeRef.current = newSize;
+      setSize(newSize);
+    }
+  }, []);
+  const resizeElement = /*#__PURE__*/(0, _jsxRuntime.jsx)(ResizeElement, {
+    onResize: handleResize
+  });
+  return [resizeElement, size];
+}
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","_index","_interopRequireDefault","_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 '../index';\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":";;;;;;;AAQA,IAAAA,QAAA,GAAAC,OAAA;AAIA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAyC,IAAAG,WAAA,GAAAH,OAAA;AAZzC;AACA;AACA;;AAGA;AACA;AACA;;AAEA;AACA;AACA;;AAQA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMI,WAAW,GAAKC,KAA0B,IAAoB;EACnE,IAAIC,SAAS;EACb,IAAK,CAAED,KAAK,CAACE,cAAc,EAAG;IAC7B;IACA;IACA;IACA;IACA;IACAD,SAAS,GAAG,CAAED,KAAK,CAACG,WAAW,CAACC,KAAK,EAAEJ,KAAK,CAACG,WAAW,CAACE,MAAM,CAAE;EAClE,CAAC,MAAM,IAAKL,KAAK,CAACE,cAAc,CAAE,CAAC,CAAE,EAAG;IACvC,MAAMA,cAAc,GAAGF,KAAK,CAACE,cAAc,CAAE,CAAC,CAAE;IAChDD,SAAS,GAAG,CAAEC,cAAc,CAACI,UAAU,EAAEJ,cAAc,CAACK,SAAS,CAAE;EACpE,CAAC,MAAM;IACN;IACA;IACA,MAAML,cAAc,GACnBF,KAAK,CAACE,cAA+C;IACtDD,SAAS,GAAG,CAAEC,cAAc,CAACI,UAAU,EAAEJ,cAAc,CAACK,SAAS,CAAE;EACpE;EAEA,MAAM,CAAEH,KAAK,EAAEC,MAAM,CAAE,GAAGJ,SAAS,CAACO,GAAG,CAAIC,CAAC,IAAMC,IAAI,CAACC,KAAK,CAAEF,CAAE,CAAE,CAAC;EACnE,OAAO;IAAEL,KAAK;IAAEC;EAAO,CAAC;AACzB,CAAC;AAED,MAAMO,qBAAqB,GAAG;EAC7BC,QAAQ,EAAE,UAAU;EACpBC,GAAG,EAAE,CAAC;EACNC,IAAI,EAAE,CAAC;EACPC,KAAK,EAAE,CAAC;EACRC,MAAM,EAAE,CAAC;EACTC,aAAa,EAAE,MAAM;EACrBC,OAAO,EAAE,CAAC;EACVC,QAAQ,EAAE,QAAQ;EAClBC,MAAM,EAAE,CAAC;AACV,CAAU;AAMV,SAASC,aAAaA,CAAE;EAAEC;AAA6B,CAAC,EAAG;EAC1D,MAAMC,gBAAgB,GAAG,IAAAC,cAAiB,EAAIC,OAAO,IAAM;IAC1D,MAAMC,OAAO,GAAG5B,WAAW,CAAE2B,OAAO,CAACE,EAAE,CAAE,CAAC,CAAE,CAAG,CAAC,CAAC,CAAC;IAClDL,QAAQ,CAAEI,OAAQ,CAAC;EACpB,CAAE,CAAC;EAEH,oBACC,IAAA7B,WAAA,CAAA+B,GAAA;IACCC,GAAG,EAAGN,gBAAkB;IACxBO,KAAK,EAAGnB,qBAAuB;IAC/B,eAAY;EAAM,CAClB,CAAC;AAEJ;AAEA,SAASoB,UAAUA,CAAEC,CAAe,EAAEC,CAAe,EAAG;EACvD,OAAOD,CAAC,CAAC7B,KAAK,KAAK8B,CAAC,CAAC9B,KAAK,IAAI6B,CAAC,CAAC5B,MAAM,KAAK6B,CAAC,CAAC7B,MAAM;AACpD;AAEA,MAAM8B,SAAuB,GAAG;EAAE/B,KAAK,EAAE,IAAI;EAAEC,MAAM,EAAE;AAAK,CAAC;;AAE7D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAAS+B,uBAAuBA,CAAA,EAG7C;EACD,MAAM,CAAEC,IAAI,EAAEC,OAAO,CAAE,GAAG,IAAAC,iBAAQ,EAAEJ,SAAU,CAAC;;EAE/C;EACA,MAAMK,eAAe,GAAG,IAAAC,eAAM,EAAEN,SAAU,CAAC;EAE3C,MAAMO,YAAY,GAAG,IAAAC,oBAAW,EAAIhB,OAAqB,IAAM;IAC9D,IAAK,CAAEK,UAAU,CAAEQ,eAAe,CAACI,OAAO,EAAEjB,OAAQ,CAAC,EAAG;MACvDa,eAAe,CAACI,OAAO,GAAGjB,OAAO;MACjCW,OAAO,CAAEX,OAAQ,CAAC;IACnB;EACD,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMkB,aAAa,gBAAG,IAAA/C,WAAA,CAAA+B,GAAA,EAACP,aAAa;IAACC,QAAQ,EAAGmB;EAAc,CAAE,CAAC;EACjE,OAAO,CAAEG,aAAa,EAAER,IAAI,CAAE;AAC/B","ignoreList":[]}

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

@@ -0,0 +1 @@
+{"version":3,"names":["_reactNative","require","_element","_jsxRuntime","useResizeObserver","measurements","setMeasurements","useState","onLayout","useCallback","nativeEvent","width","height","layout","prevState","Math","floor","observer","jsx","View","testID","style","StyleSheet","absoluteFill","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/_legacy/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, StyleSheet } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<View>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</View>\n * \t);\n * };\n * ```\n */\nconst useResizeObserver = () => {\n\tconst [ measurements, setMeasurements ] = useState( null );\n\n\tconst onLayout = useCallback( ( { nativeEvent } ) => {\n\t\tconst { width, height } = nativeEvent.layout;\n\t\tsetMeasurements( ( prevState ) => {\n\t\t\tif (\n\t\t\t\t! prevState ||\n\t\t\t\tprevState.width !== width ||\n\t\t\t\tprevState.height !== height\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\twidth: Math.floor( width ),\n\t\t\t\t\theight: Math.floor( height ),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevState;\n\t\t} );\n\t}, [] );\n\n\tconst observer = (\n\t\t<View\n\t\t\ttestID=\"resize-observer\"\n\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\tonLayout={ onLayout }\n\t\t/>\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"],"mappings":";;;;;;AAGA,IAAAA,YAAA,GAAAC,OAAA;AAIA,IAAAC,QAAA,GAAAD,OAAA;AAA2D,IAAAE,WAAA,GAAAF,OAAA;AAP3D;AACA;AACA;;AAEA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,GACA,MAAMG,iBAAiB,GAAGA,CAAA,KAAM;EAC/B,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAG,IAAAC,iBAAQ,EAAE,IAAK,CAAC;EAE1D,MAAMC,QAAQ,GAAG,IAAAC,oBAAW,EAAE,CAAE;IAAEC;EAAY,CAAC,KAAM;IACpD,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,WAAW,CAACG,MAAM;IAC5CP,eAAe,CAAIQ,SAAS,IAAM;MACjC,IACC,CAAEA,SAAS,IACXA,SAAS,CAACH,KAAK,KAAKA,KAAK,IACzBG,SAAS,CAACF,MAAM,KAAKA,MAAM,EAC1B;QACD,OAAO;UACND,KAAK,EAAEI,IAAI,CAACC,KAAK,CAAEL,KAAM,CAAC;UAC1BC,MAAM,EAAEG,IAAI,CAACC,KAAK,CAAEJ,MAAO;QAC5B,CAAC;MACF;MACA,OAAOE,SAAS;IACjB,CAAE,CAAC;EACJ,CAAC,EAAE,EAAG,CAAC;EAEP,MAAMG,QAAQ,gBACb,IAAAd,WAAA,CAAAe,GAAA,EAAClB,YAAA,CAAAmB,IAAI;IACJC,MAAM,EAAC,iBAAiB;IACxBC,KAAK,EAAGC,uBAAU,CAACC,YAAc;IACjCf,QAAQ,EAAGA;EAAU,CACrB,CACD;EAED,OAAO,CAAES,QAAQ,EAAEZ,YAAY,CAAE;AAClC,CAAC;AAAC,IAAAmB,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEatB,iBAAiB","ignoreList":[]}

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

@@ -1,209 +1,92 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useResizeAware;
+exports.default = useResizeObserver;
 var _element = require("@wordpress/element");
-var _jsxRuntime = require("react/jsx-runtime");
+var _useEvent = _interopRequireDefault(require("../use-event"));
+var _legacy = _interopRequireDefault(require("./_legacy"));
 /**
- * External dependencies
+ * WordPress dependencies
  */
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
 
-// This of course could've been more streamlined with internal state instead of
-// refs, but then host hooks / components could not opt out of renders.
-// This could've been exported to its own module, but the current build doesn't
-// seem to work with module imports and I had no more time to spend on this...
-function useResolvedElement(subscriber, refOrElement) {
-  const callbackRefElement = (0, _element.useRef)(null);
-  const lastReportRef = (0, _element.useRef)(null);
-  const cleanupRef = (0, _element.useRef)();
-  const callSubscriber = (0, _element.useCallback)(() => {
-    let element = null;
-    if (callbackRefElement.current) {
-      element = callbackRefElement.current;
-    } else if (refOrElement) {
-      if (refOrElement instanceof HTMLElement) {
-        element = refOrElement;
-      } else {
-        element = refOrElement.current;
-      }
-    }
-    if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.reporter === callSubscriber) {
-      return;
-    }
-    if (cleanupRef.current) {
-      cleanupRef.current();
-      // Making sure the cleanup is not called accidentally multiple times.
-      cleanupRef.current = null;
-    }
-    lastReportRef.current = {
-      reporter: callSubscriber,
-      element
-    };
-
-    // Only calling the subscriber, if there's an actual element to report.
-    if (element) {
-      cleanupRef.current = subscriber(element);
-    }
-  }, [refOrElement, subscriber]);
-
-  // On each render, we check whether a ref changed, or if we got a new raw
-  // element.
-  (0, _element.useEffect)(() => {
-    // With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a
-    // render accompanying that change as well.
-    // To guarantee we always have the right element, one must use the ref callback provided instead, but we support
-    // RefObjects to make the hook API more convenient in certain cases.
-    callSubscriber();
-  }, [callSubscriber]);
-  return (0, _element.useCallback)(element => {
-    callbackRefElement.current = element;
-    callSubscriber();
-  }, [callSubscriber]);
-}
-
-// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not
-// forcing consumers to use a specific TS version.
+/**
+ * External 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)
+// This is the current implementation of `useResizeObserver`.
 //
-// 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, boxProp, sizeType) => {
-  if (!entry[boxProp]) {
-    if (boxProp === '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.
-      return entry.contentRect[sizeType === 'inlineSize' ? 'width' : 'height'];
-    }
-    return undefined;
-  }
-
-  // A couple bytes smaller than calling Array.isArray() and just as effective here.
-  return entry[boxProp][0] ? entry[boxProp][0][sizeType] :
-  // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
-  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
-  // @ts-ignore
-  entry[boxProp][sizeType];
-};
-function useResizeObserver(opts = {}) {
-  // Saving the callback as a ref. With this, I don't need to put onResize in the
-  // effect dep array, and just passing in an anonymous function without memoising
-  // will not reinstantiate the hook's ResizeObserver.
-  const onResize = opts.onResize;
-  const onResizeRef = (0, _element.useRef)(undefined);
-  onResizeRef.current = onResize;
-  const round = opts.round || Math.round;
-
-  // Using a single instance throughout the hook's lifetime
+// 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.
+function _useResizeObserver(callback, resizeObserverOptions = {}) {
+  const callbackEvent = (0, _useEvent.default)(callback);
+  const observedElementRef = (0, _element.useRef)();
   const resizeObserverRef = (0, _element.useRef)();
-  const [size, setSize] = (0, _element.useState)({
-    width: undefined,
-    height: undefined
-  });
+  return (0, _useEvent.default)(element => {
+    var _resizeObserverRef$cu;
+    if (element === observedElementRef.current) {
+      return;
+    }
+    observedElementRef.current = element;
 
-  // In certain edge cases the RO might want to report a size change just after
-  // the component unmounted.
-  const didUnmount = (0, _element.useRef)(false);
-  (0, _element.useEffect)(() => {
-    didUnmount.current = false;
-    return () => {
-      didUnmount.current = true;
-    };
-  }, []);
+    // Set up `ResizeObserver`.
+    (_resizeObserverRef$cu = resizeObserverRef.current) !== null && _resizeObserverRef$cu !== void 0 ? _resizeObserverRef$cu : resizeObserverRef.current = new ResizeObserver(callbackEvent);
+    const {
+      current: resizeObserver
+    } = resizeObserverRef;
 
-  // Using a ref to track the previous width / height to avoid unnecessary renders.
-  const previous = (0, _element.useRef)({
-    width: undefined,
-    height: undefined
-  });
+    // Unobserve previous element.
+    if (observedElementRef.current) {
+      resizeObserver.unobserve(observedElementRef.current);
+    }
 
-  // This block is kinda like a useEffect, only it's called whenever a new
-  // element could be resolved based on the ref option. It also has a cleanup
-  // function.
-  const refCallback = useResolvedElement((0, _element.useCallback)(element => {
-    // We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.
-    // This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.
-    if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
-      resizeObserverRef.current = {
-        box: opts.box,
-        round,
-        instance: new ResizeObserver(entries => {
-          const entry = entries[0];
-          let boxProp = 'borderBoxSize';
-          if (opts.box === 'border-box') {
-            boxProp = 'borderBoxSize';
-          } else {
-            boxProp = opts.box === 'device-pixel-content-box' ? 'devicePixelContentBoxSize' : 'contentBoxSize';
-          }
-          const reportedWidth = extractSize(entry, boxProp, 'inlineSize');
-          const reportedHeight = extractSize(entry, boxProp, 'blockSize');
-          const newWidth = reportedWidth ? round(reportedWidth) : undefined;
-          const newHeight = reportedHeight ? round(reportedHeight) : undefined;
-          if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
-            const newSize = {
-              width: newWidth,
-              height: newHeight
-            };
-            previous.current.width = newWidth;
-            previous.current.height = newHeight;
-            if (onResizeRef.current) {
-              onResizeRef.current(newSize);
-            } else if (!didUnmount.current) {
-              setSize(newSize);
-            }
-          }
-        })
-      };
+    // Observe new element.
+    if (element) {
+      resizeObserver.observe(element, resizeObserverOptions);
     }
-    resizeObserverRef.current.instance.observe(element, {
-      box: opts.box
-    });
-    return () => {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.instance.unobserve(element);
-      }
-    };
-  }, [opts.box, round]), opts.ref);
-  return (0, _element.useMemo)(() => ({
-    ref: refCallback,
-    width: size.width,
-    height: size.height
-  }), [refCallback, size ? size.width : null, size ? size.height : null]);
+  });
 }
 
 /**
- * Hook which allows to listen the resize event of any target element when it changes sizes.
- * _Note: `useResizeObserver` will report `null` until after first render.
+ * 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
  *
@@ -220,33 +103,8 @@ function useResizeObserver(opts = {}) {
  * };
  * ```
  */
-function useResizeAware() {
-  const {
-    ref,
-    width,
-    height
-  } = useResizeObserver();
-  const sizes = (0, _element.useMemo)(() => {
-    return {
-      width: width !== null && width !== void 0 ? width : null,
-      height: height !== null && height !== void 0 ? height : null
-    };
-  }, [width, height]);
-  const resizeListener = /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-    style: {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      pointerEvents: 'none',
-      opacity: 0,
-      overflow: 'hidden',
-      zIndex: -1
-    },
-    "aria-hidden": "true",
-    ref: ref
-  });
-  return [resizeListener, sizes];
+
+function useResizeObserver(callback, options = {}) {
+  return callback ? _useResizeObserver(callback, options) : (0, _legacy.default)();
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_jsxRuntime","useResolvedElement","subscriber","refOrElement","callbackRefElement","useRef","lastReportRef","cleanupRef","callSubscriber","useCallback","element","current","HTMLElement","reporter","useEffect","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","useState","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useMemo","useResizeAware","sizes","resizeListener","jsx","style","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\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 = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t  // @ts-ignore\n\t\t  entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\tdidUnmount.current = false;\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` 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 useResizeAware(): [\n\tReactElement,\n\t{ width: number | null; height: number | null },\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_useEvent","_interopRequireDefault","_legacy","_useResizeObserver","callback","resizeObserverOptions","callbackEvent","useEvent","observedElementRef","useRef","resizeObserverRef","element","_resizeObserverRef$cu","current","ResizeObserver","resizeObserver","unobserve","observe","useResizeObserver","options","_useLegacyResizeObserver"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport useEvent from '../use-event';\nimport type { ObservedSize } from './_legacy';\nimport _useLegacyResizeObserver from './_legacy';\n/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\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.\nfunction _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\t\tobservedElementRef.current = element;\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\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\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,QAAA,GAAAC,OAAA;AAIA,IAAAC,SAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,OAAA,GAAAD,sBAAA,CAAAF,OAAA;AATA;AACA;AACA;;AAEA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASI,kBAAkBA,CAC1BC,QAAgC,EAChCC,qBAA4C,GAAG,CAAC,CAAC,EAChB;EACjC,MAAMC,aAAa,GAAG,IAAAC,iBAAQ,EAAEH,QAAS,CAAC;EAE1C,MAAMI,kBAAkB,GAAG,IAAAC,eAAM,EAAa,CAAC;EAC/C,MAAMC,iBAAiB,GAAG,IAAAD,eAAM,EAAmB,CAAC;EACpD,OAAO,IAAAF,iBAAQ,EAAII,OAAkB,IAAM;IAAA,IAAAC,qBAAA;IAC1C,IAAKD,OAAO,KAAKH,kBAAkB,CAACK,OAAO,EAAG;MAC7C;IACD;IACAL,kBAAkB,CAACK,OAAO,GAAGF,OAAO;;IAEpC;IACA,CAAAC,qBAAA,GAAAF,iBAAiB,CAACG,OAAO,cAAAD,qBAAA,cAAAA,qBAAA,GAAzBF,iBAAiB,CAACG,OAAO,GAAK,IAAIC,cAAc,CAAER,aAAc,CAAC;IACjE,MAAM;MAAEO,OAAO,EAAEE;IAAe,CAAC,GAAGL,iBAAiB;;IAErD;IACA,IAAKF,kBAAkB,CAACK,OAAO,EAAG;MACjCE,cAAc,CAACC,SAAS,CAAER,kBAAkB,CAACK,OAAQ,CAAC;IACvD;;IAEA;IACA,IAAKF,OAAO,EAAG;MACdI,cAAc,CAACE,OAAO,CAAEN,OAAO,EAAEN,qBAAsB,CAAC;IACzD;EACD,CAAE,CAAC;AACJ;;AAEA;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,SAASa,iBAAiBA,CACxCd,QAAiC,EACjCe,OAA8B,GAAG,CAAC,CAAC,EACmC;EACtE,OAAOf,QAAQ,GACZD,kBAAkB,CAAEC,QAAQ,EAAEe,OAAQ,CAAC,GACvC,IAAAC,eAAwB,EAAC,CAAC;AAC9B","ignoreList":[]}