@wordpress/compose 7.5.0 → 7.7.0

package/build-module/hooks/use-keyboard-shortcut/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Mousetrap","useEffect","useRef","isAppleOS","useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallback","current","mousetrap","document","shortcutsArray","Array","isArray","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","size","Error","bindFn","args","reset"],"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * A block selection object.\n *\n * @typedef {Object} WPKeyboardShortcutConfig\n *\n * @property {boolean}                                [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.\n * @property {string}                                 [eventName]  Event name used to trigger the handler, defaults to keydown.\n * @property {boolean}                                [isDisabled] Disables the keyboard handler if the value is true.\n * @property {import('react').RefObject<HTMLElement>} [target]     React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param {string[]|string}                                                       shortcuts Keyboard Shortcuts.\n * @param {(e: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback  Shortcut callback.\n * @param {WPKeyboardShortcutConfig}                                              options   Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\n\tshortcuts,\n\tcallback,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false, // This is important for performance considerations.\n\t\ttarget,\n\t} = {}\n) {\n\tconst currentCallback = useRef( callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t  // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t  // necessary to maintain the existing behavior.\n\t\t\t\t  /** @type {Element} */ ( /** @type {unknown} */ ( document ) )\n\t\t);\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\t\tshortcutsArray.forEach( ( shortcut ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\t// Determines whether a key is a modifier by the length of the string.\n\t\t\t// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that\n\t\t\t// the modifiers are Shift and Cmd because they're not a single character.\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\t// This should be better moved to the shortcut registration instead.\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// @ts-ignore `bindGlobal` is an undocumented property\n\t\t\tmousetrap[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t(\n\t\t\t\t\t/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\n\t\t\t\t\tcurrentCallback.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,WAAW;AACjC,OAAO,qDAAqD;;AAE5D;AACA;AACA;AACA,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,SAAS,QAAQ,qBAAqB;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,mBAAmBA,CAAA,CAC3B;AACAC,SAAS,EACTC,QAAQ,EACR;EACCC,UAAU,GAAG,KAAK;EAClBC,SAAS,GAAG,SAAS;EACrBC,UAAU,GAAG,KAAK;EAAE;EACpBC;AACD,CAAC,GAAG,CAAC,CAAC,EACL;EACD,MAAMC,eAAe,GAAGT,MAAM,CAAEI,QAAS,CAAC;EAC1CL,SAAS,CAAE,MAAM;IAChBU,eAAe,CAACC,OAAO,GAAGN,QAAQ;EACnC,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjBL,SAAS,CAAE,MAAM;IAChB,IAAKQ,UAAU,EAAG;MACjB;IACD;IACA,MAAMI,SAAS,GAAG,IAAIb,SAAS,CAC9BU,MAAM,IAAIA,MAAM,CAACE,OAAO,GACrBF,MAAM,CAACE,OAAO;IACd;IACA;IACA;IACA,uBAAyB;IAAyBE,QACtD,CAAC;IACD,MAAMC,cAAc,GAAGC,KAAK,CAACC,OAAO,CAAEZ,SAAU,CAAC,GAC9CA,SAAS,GACT,CAAEA,SAAS,CAAE;IAChBU,cAAc,CAACG,OAAO,CAAIC,QAAQ,IAAM;MACvC,MAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAK,CAAE,GAAI,CAAC;MAClC;MACA;MACA;MACA,MAAMC,SAAS,GAAG,IAAIC,GAAG,CACxBH,IAAI,CAACI,MAAM,CAAIC,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,CAAE,CAC5C,CAAC;MACD,MAAMC,MAAM,GAAGL,SAAS,CAACM,GAAG,CAAE,KAAM,CAAC;MACrC,MAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAG,CAAE,OAAQ,CAAC;;MAEzC;MACA,IACCzB,SAAS,CAAC,CAAC,KACPmB,SAAS,CAACQ,IAAI,KAAK,CAAC,IAAIH,MAAM,IAC/BL,SAAS,CAACQ,IAAI,KAAK,CAAC,IAAIH,MAAM,IAAIE,QAAU,CAAE,EAChD;QACD,MAAM,IAAIE,KAAK,CACb,eAAeZ,QAAU,iEAC3B,CAAC;MACF;MAEA,MAAMa,MAAM,GAAGzB,UAAU,GAAG,YAAY,GAAG,MAAM;MACjD;MACAM,SAAS,CAAEmB,MAAM,CAAE,CAClBb,QAAQ,EACR,EACC;MACA,4EAA6E,GAAGc,IAAI,KAEpF;MACAtB,eAAe,CAACC,OAAO,CAAE,GAAGqB,IAAK,CAAC,EACnCzB,SACD,CAAC;IACF,CAAE,CAAC;IAEH,OAAO,MAAM;MACZK,SAAS,CAACqB,KAAK,CAAC,CAAC;IAClB,CAAC;EACF,CAAC,EAAE,CAAE7B,SAAS,EAAEE,UAAU,EAAEC,SAAS,EAAEE,MAAM,EAAED,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAeL,mBAAmB","ignoreList":[]}
+{"version":3,"names":["Mousetrap","useEffect","useRef","isAppleOS","useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallbackRef","current","mousetrap","document","shortcutsArray","Array","isArray","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","size","Error","bindFn","args","reset"],"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * A block selection object.\n *\n * @typedef {Object} WPKeyboardShortcutConfig\n *\n * @property {boolean}                                [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.\n * @property {string}                                 [eventName]  Event name used to trigger the handler, defaults to keydown.\n * @property {boolean}                                [isDisabled] Disables the keyboard handler if the value is true.\n * @property {import('react').RefObject<HTMLElement>} [target]     React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param {string[]|string}                                                       shortcuts Keyboard Shortcuts.\n * @param {(e: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback  Shortcut callback.\n * @param {WPKeyboardShortcutConfig}                                              options   Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\n\tshortcuts,\n\tcallback,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false, // This is important for performance considerations.\n\t\ttarget,\n\t} = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t  // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t  // necessary to maintain the existing behavior.\n\t\t\t\t  /** @type {Element} */ ( /** @type {unknown} */ ( document ) )\n\t\t);\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\t\tshortcutsArray.forEach( ( shortcut ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\t// Determines whether a key is a modifier by the length of the string.\n\t\t\t// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that\n\t\t\t// the modifiers are Shift and Cmd because they're not a single character.\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\t// This should be better moved to the shortcut registration instead.\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// @ts-ignore `bindGlobal` is an undocumented property\n\t\t\tmousetrap[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t(\n\t\t\t\t\t/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\n\t\t\t\t\tcurrentCallbackRef.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,SAAS,MAAM,WAAW;AACjC,OAAO,qDAAqD;;AAE5D;AACA;AACA;AACA,SAASC,SAAS,EAAEC,MAAM,QAAQ,oBAAoB;AACtD,SAASC,SAAS,QAAQ,qBAAqB;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,mBAAmBA,CAAA,CAC3B;AACAC,SAAS,EACTC,QAAQ,EACR;EACCC,UAAU,GAAG,KAAK;EAClBC,SAAS,GAAG,SAAS;EACrBC,UAAU,GAAG,KAAK;EAAE;EACpBC;AACD,CAAC,GAAG,CAAC,CAAC,EACL;EACD,MAAMC,kBAAkB,GAAGT,MAAM,CAAEI,QAAS,CAAC;EAC7CL,SAAS,CAAE,MAAM;IAChBU,kBAAkB,CAACC,OAAO,GAAGN,QAAQ;EACtC,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjBL,SAAS,CAAE,MAAM;IAChB,IAAKQ,UAAU,EAAG;MACjB;IACD;IACA,MAAMI,SAAS,GAAG,IAAIb,SAAS,CAC9BU,MAAM,IAAIA,MAAM,CAACE,OAAO,GACrBF,MAAM,CAACE,OAAO;IACd;IACA;IACA;IACA,uBAAyB;IAAyBE,QACtD,CAAC;IACD,MAAMC,cAAc,GAAGC,KAAK,CAACC,OAAO,CAAEZ,SAAU,CAAC,GAC9CA,SAAS,GACT,CAAEA,SAAS,CAAE;IAChBU,cAAc,CAACG,OAAO,CAAIC,QAAQ,IAAM;MACvC,MAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAK,CAAE,GAAI,CAAC;MAClC;MACA;MACA;MACA,MAAMC,SAAS,GAAG,IAAIC,GAAG,CACxBH,IAAI,CAACI,MAAM,CAAIC,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,CAAE,CAC5C,CAAC;MACD,MAAMC,MAAM,GAAGL,SAAS,CAACM,GAAG,CAAE,KAAM,CAAC;MACrC,MAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAG,CAAE,OAAQ,CAAC;;MAEzC;MACA,IACCzB,SAAS,CAAC,CAAC,KACPmB,SAAS,CAACQ,IAAI,KAAK,CAAC,IAAIH,MAAM,IAC/BL,SAAS,CAACQ,IAAI,KAAK,CAAC,IAAIH,MAAM,IAAIE,QAAU,CAAE,EAChD;QACD,MAAM,IAAIE,KAAK,CACb,eAAeZ,QAAU,iEAC3B,CAAC;MACF;MAEA,MAAMa,MAAM,GAAGzB,UAAU,GAAG,YAAY,GAAG,MAAM;MACjD;MACAM,SAAS,CAAEmB,MAAM,CAAE,CAClBb,QAAQ,EACR,EACC;MACA,4EAA6E,GAAGc,IAAI,KAEpF;MACAtB,kBAAkB,CAACC,OAAO,CAAE,GAAGqB,IAAK,CAAC,EACtCzB,SACD,CAAC;IACF,CAAE,CAAC;IAEH,OAAO,MAAM;MACZK,SAAS,CAACqB,KAAK,CAAC,CAAC;IAClB,CAAC;EACF,CAAC,EAAE,CAAE7B,SAAS,EAAEE,UAAU,EAAEC,SAAS,EAAEE,MAAM,EAAED,UAAU,CAAG,CAAC;AAC9D;AAEA,eAAeL,mBAAmB","ignoreList":[]}

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

@@ -70,38 +70,38 @@ function assignRef(ref, value) {
  */
 export default function useMergeRefs(refs) {
   const element = useRef();
-  const isAttached = useRef(false);
-  const didElementChange = useRef(false);
+  const isAttachedRef = useRef(false);
+  const didElementChangeRef = useRef(false);
   /* eslint-disable jsdoc/no-undefined-types */
   /** @type {import('react').MutableRefObject<TRef[]>} */
   /* eslint-enable jsdoc/no-undefined-types */
-  const previousRefs = useRef([]);
-  const currentRefs = useRef(refs);
+  const previousRefsRef = useRef([]);
+  const currentRefsRef = useRef(refs);
 
   // Update on render before the ref callback is called, so the ref callback
   // always has access to the current refs.
-  currentRefs.current = refs;
+  currentRefsRef.current = refs;
 
   // If any of the refs change, call the previous ref with `null` and the new
   // ref with the node, except when the element changes in the same cycle, in
   // which case the ref callbacks will already have been called.
   useLayoutEffect(() => {
-    if (didElementChange.current === false && isAttached.current === true) {
+    if (didElementChangeRef.current === false && isAttachedRef.current === true) {
       refs.forEach((ref, index) => {
-        const previousRef = previousRefs.current[index];
+        const previousRef = previousRefsRef.current[index];
         if (ref !== previousRef) {
           assignRef(previousRef, null);
           assignRef(ref, element.current);
         }
       });
     }
-    previousRefs.current = refs;
+    previousRefsRef.current = refs;
   }, refs);
 
   // No dependencies, must be reset after every render so ref callbacks are
   // correctly called after a ref change.
   useLayoutEffect(() => {
-    didElementChange.current = false;
+    didElementChangeRef.current = false;
   });
 
   // There should be no dependencies so that `callback` is only called when
@@ -110,12 +110,12 @@ export default function useMergeRefs(refs) {
     // Update the element so it can be used when calling ref callbacks on a
     // dependency change.
     assignRef(element, value);
-    didElementChange.current = true;
-    isAttached.current = value !== null;
+    didElementChangeRef.current = true;
+    isAttachedRef.current = value !== null;
 
     // When an element changes, the current ref callback should be called
     // with the new element and the previous one with `null`.
-    const refsToAssign = value ? currentRefs.current : previousRefs.current;
+    const refsToAssign = value ? currentRefsRef.current : previousRefsRef.current;
 
     // Update the latest refs.
     for (const ref of refsToAssign) {

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

@@ -1 +1 @@
-{"version":3,"names":["useRef","useCallback","useLayoutEffect","assignRef","ref","value","hasOwnProperty","current","useMergeRefs","refs","element","isAttached","didElementChange","previousRefs","currentRefs","forEach","index","previousRef","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":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,WAAW,EAAEC,eAAe,QAAQ,oBAAoB;;AAEzE;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;AACA,eAAe,SAASG,YAAYA,CAAEC,IAAI,EAAG;EAC5C,MAAMC,OAAO,GAAGV,MAAM,CAAC,CAAC;EACxB,MAAMW,UAAU,GAAGX,MAAM,CAAE,KAAM,CAAC;EAClC,MAAMY,gBAAgB,GAAGZ,MAAM,CAAE,KAAM,CAAC;EACxC;EACA;EACA;EACA,MAAMa,YAAY,GAAGb,MAAM,CAAE,EAAG,CAAC;EACjC,MAAMc,WAAW,GAAGd,MAAM,CAAES,IAAK,CAAC;;EAElC;EACA;EACAK,WAAW,CAACP,OAAO,GAAGE,IAAI;;EAE1B;EACA;EACA;EACAP,eAAe,CAAE,MAAM;IACtB,IACCU,gBAAgB,CAACL,OAAO,KAAK,KAAK,IAClCI,UAAU,CAACJ,OAAO,KAAK,IAAI,EAC1B;MACDE,IAAI,CAACM,OAAO,CAAE,CAAEX,GAAG,EAAEY,KAAK,KAAM;QAC/B,MAAMC,WAAW,GAAGJ,YAAY,CAACN,OAAO,CAAES,KAAK,CAAE;QACjD,IAAKZ,GAAG,KAAKa,WAAW,EAAG;UAC1Bd,SAAS,CAAEc,WAAW,EAAE,IAAK,CAAC;UAC9Bd,SAAS,CAAEC,GAAG,EAAEM,OAAO,CAACH,OAAQ,CAAC;QAClC;MACD,CAAE,CAAC;IACJ;IAEAM,YAAY,CAACN,OAAO,GAAGE,IAAI;EAC5B,CAAC,EAAEA,IAAK,CAAC;;EAET;EACA;EACAP,eAAe,CAAE,MAAM;IACtBU,gBAAgB,CAACL,OAAO,GAAG,KAAK;EACjC,CAAE,CAAC;;EAEH;EACA;EACA,OAAON,WAAW,CAAII,KAAK,IAAM;IAChC;IACA;IACAF,SAAS,CAAEO,OAAO,EAAEL,KAAM,CAAC;IAE3BO,gBAAgB,CAACL,OAAO,GAAG,IAAI;IAC/BI,UAAU,CAACJ,OAAO,GAAGF,KAAK,KAAK,IAAI;;IAEnC;IACA;IACA,MAAMa,YAAY,GAAGb,KAAK,GAAGS,WAAW,CAACP,OAAO,GAAGM,YAAY,CAACN,OAAO;;IAEvE;IACA,KAAM,MAAMH,GAAG,IAAIc,YAAY,EAAG;MACjCf,SAAS,CAAEC,GAAG,EAAEC,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
+{"version":3,"names":["useRef","useCallback","useLayoutEffect","assignRef","ref","value","hasOwnProperty","current","useMergeRefs","refs","element","isAttachedRef","didElementChangeRef","previousRefsRef","currentRefsRef","forEach","index","previousRef","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":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,WAAW,EAAEC,eAAe,QAAQ,oBAAoB;;AAEzE;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;AACA,eAAe,SAASG,YAAYA,CAAEC,IAAI,EAAG;EAC5C,MAAMC,OAAO,GAAGV,MAAM,CAAC,CAAC;EACxB,MAAMW,aAAa,GAAGX,MAAM,CAAE,KAAM,CAAC;EACrC,MAAMY,mBAAmB,GAAGZ,MAAM,CAAE,KAAM,CAAC;EAC3C;EACA;EACA;EACA,MAAMa,eAAe,GAAGb,MAAM,CAAE,EAAG,CAAC;EACpC,MAAMc,cAAc,GAAGd,MAAM,CAAES,IAAK,CAAC;;EAErC;EACA;EACAK,cAAc,CAACP,OAAO,GAAGE,IAAI;;EAE7B;EACA;EACA;EACAP,eAAe,CAAE,MAAM;IACtB,IACCU,mBAAmB,CAACL,OAAO,KAAK,KAAK,IACrCI,aAAa,CAACJ,OAAO,KAAK,IAAI,EAC7B;MACDE,IAAI,CAACM,OAAO,CAAE,CAAEX,GAAG,EAAEY,KAAK,KAAM;QAC/B,MAAMC,WAAW,GAAGJ,eAAe,CAACN,OAAO,CAAES,KAAK,CAAE;QACpD,IAAKZ,GAAG,KAAKa,WAAW,EAAG;UAC1Bd,SAAS,CAAEc,WAAW,EAAE,IAAK,CAAC;UAC9Bd,SAAS,CAAEC,GAAG,EAAEM,OAAO,CAACH,OAAQ,CAAC;QAClC;MACD,CAAE,CAAC;IACJ;IAEAM,eAAe,CAACN,OAAO,GAAGE,IAAI;EAC/B,CAAC,EAAEA,IAAK,CAAC;;EAET;EACA;EACAP,eAAe,CAAE,MAAM;IACtBU,mBAAmB,CAACL,OAAO,GAAG,KAAK;EACpC,CAAE,CAAC;;EAEH;EACA;EACA,OAAON,WAAW,CAAII,KAAK,IAAM;IAChC;IACA;IACAF,SAAS,CAAEO,OAAO,EAAEL,KAAM,CAAC;IAE3BO,mBAAmB,CAACL,OAAO,GAAG,IAAI;IAClCI,aAAa,CAACJ,OAAO,GAAGF,KAAK,KAAK,IAAI;;IAEtC;IACA;IACA,MAAMa,YAAY,GAAGb,KAAK,GACvBS,cAAc,CAACP,OAAO,GACtBM,eAAe,CAACN,OAAO;;IAE1B;IACA,KAAM,MAAMH,GAAG,IAAIc,YAAY,EAAG;MACjCf,SAAS,CAAEC,GAAG,EAAEC,KAAM,CAAC;IACxB;EACD,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}

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

@@ -27,12 +27,12 @@ import { useCallback, useRef } from '@wordpress/element';
  * @return Ref callback.
  */
 export default function useRefEffect(callback, dependencies) {
-  const cleanup = useRef();
+  const cleanupRef = useRef();
   return 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-module/hooks/use-ref-effect/index.js.map

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

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

@@ -5,64 +5,8 @@
 /**
  * WordPress dependencies
  */
-import { useMemo, useRef, useCallback, useEffect, useState } from '@wordpress/element';
+import { useCallback, useLayoutEffect, useRef, useState } from '@wordpress/element';
 import { jsx as _jsx } from "react/jsx-runtime";
-// 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 = useRef(null);
-  const lastReportRef = useRef(null);
-  const cleanupRef = useRef();
-  const callSubscriber = 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.
-  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 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.
-
 // 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:
@@ -88,115 +32,79 @@ function useResolvedElement(subscriber, refOrElement) {
 // 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;
+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];
   }
-
-  // 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];
+  const [width, height] = entrySize.map(d => Math.round(d));
+  return {
+    width,
+    height
+  };
 };
-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 = useRef(undefined);
-  onResizeRef.current = onResize;
-  const round = opts.round || Math.round;
-
-  // Using a single instance throughout the hook's lifetime
-  const resizeObserverRef = useRef();
-  const [size, setSize] = useState({
-    width: undefined,
-    height: undefined
-  });
-
-  // In certain edge cases the RO might want to report a size change just after
-  // the component unmounted.
-  const didUnmount = useRef(false);
-  useEffect(() => {
-    didUnmount.current = false;
+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 = useRef(null);
+  const resizeCallbackRef = useRef(onResize);
+  useLayoutEffect(() => {
+    resizeCallbackRef.current = onResize;
+  }, [onResize]);
+  useLayoutEffect(() => {
+    const resizeElement = resizeElementRef.current;
+    const resizeObserver = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        const newSize = extractSize(entry);
+        resizeCallbackRef.current(newSize);
+      }
+    });
+    resizeObserver.observe(resizeElement);
     return () => {
-      didUnmount.current = true;
+      resizeObserver.unobserve(resizeElement);
     };
   }, []);
-
-  // Using a ref to track the previous width / height to avoid unnecessary renders.
-  const previous = useRef({
-    width: undefined,
-    height: undefined
+  return /*#__PURE__*/_jsx("div", {
+    ref: resizeElementRef,
+    style: RESIZE_ELEMENT_STYLES,
+    "aria-hidden": "true"
   });
-
-  // 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(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);
-            }
-          }
-        })
-      };
-    }
-    resizeObserverRef.current.instance.observe(element, {
-      box: opts.box
-    });
-    return () => {
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.instance.unobserve(element);
-      }
-    };
-  }, [opts.box, round]), opts.ref);
-  return useMemo(() => ({
-    ref: refCallback,
-    width: size.width,
-    height: size.height
-  }), [refCallback, size ? size.width : null, size ? size.height : null]);
 }
+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 the resize event of any target element when it changes sizes.
- * _Note: `useResizeObserver` will report `null` until after first render.
+ * 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
  *
@@ -213,33 +121,20 @@ function useResizeObserver(opts = {}) {
  * };
  * ```
  */
-export default function useResizeAware() {
-  const {
-    ref,
-    width,
-    height
-  } = useResizeObserver();
-  const sizes = useMemo(() => {
-    return {
-      width: width !== null && width !== void 0 ? width : null,
-      height: height !== null && height !== void 0 ? height : null
-    };
-  }, [width, height]);
-  const resizeListener = /*#__PURE__*/_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
+export default function useResizeObserver() {
+  const [size, setSize] = useState(NULL_SIZE);
+
+  // Using a ref to track the previous width / height to avoid unnecessary renders.
+  const previousSizeRef = useRef(NULL_SIZE);
+  const handleResize = useCallback(newSize => {
+    if (!sizeEquals(previousSizeRef.current, newSize)) {
+      previousSizeRef.current = newSize;
+      setSize(newSize);
+    }
+  }, []);
+  const resizeElement = /*#__PURE__*/_jsx(ResizeElement, {
+    onResize: handleResize
   });
-  return [resizeListener, sizes];
+  return [resizeElement, size];
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useRef","useCallback","useEffect","useState","jsx","_jsx","useResolvedElement","subscriber","refOrElement","callbackRefElement","lastReportRef","cleanupRef","callSubscriber","element","current","HTMLElement","reporter","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useResizeAware","sizes","resizeListener","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":["useCallback","useLayoutEffect","useRef","useState","jsx","_jsx","extractSize","entry","entrySize","contentBoxSize","contentRect","width","height","inlineSize","blockSize","map","d","Math","round","RESIZE_ELEMENT_STYLES","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex","ResizeElement","onResize","resizeElementRef","resizeCallbackRef","current","resizeElement","resizeObserver","ResizeObserver","entries","newSize","observe","unobserve","ref","style","sizeEquals","a","b","NULL_SIZE","useResizeObserver","size","setSize","previousSizeRef","handleResize"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseCallback,\n\tuseLayoutEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\n\ntype 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 = useRef< HTMLDivElement >( null );\n\tconst resizeCallbackRef = useRef( onResize );\n\n\tuseLayoutEffect( () => {\n\t\tresizeCallbackRef.current = onResize;\n\t}, [ onResize ] );\n\n\tuseLayoutEffect( () => {\n\t\tconst resizeElement = resizeElementRef.current as HTMLDivElement;\n\t\tconst resizeObserver = new ResizeObserver( ( entries ) => {\n\t\t\tfor ( const entry of entries ) {\n\t\t\t\tconst newSize = extractSize( entry );\n\t\t\t\tresizeCallbackRef.current( newSize );\n\t\t\t}\n\t\t} );\n\n\t\tresizeObserver.observe( resizeElement );\n\n\t\treturn () => {\n\t\t\tresizeObserver.unobserve( resizeElement );\n\t\t};\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 useResizeObserver(): [ ReactElement, ObservedSize ] {\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":[]}

package/build-types/hooks/use-merge-refs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qCALwC,IAAI,SAA/B,OAAQ,OAAO,EAAE,GAAG,CAAC,GAAG,CAAE,QAC5B,KAAK,CAAC,IAAI,CAAC,GAEV,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CA6DzD;wBA3HY,CAAC,IACD,CAAC,SAAS,OAAO,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,qCALwC,IAAI,SAA/B,OAAQ,OAAO,EAAE,GAAG,CAAC,GAAG,CAAE,QAC5B,KAAK,CAAC,IAAI,CAAC,GAEV,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CA+DzD;wBA7HY,CAAC,IACD,CAAC,SAAS,OAAO,OAAO,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK"}

package/build-types/hooks/use-resize-observer/index.d.ts

@@ -2,14 +2,13 @@
  * External dependencies
  */
 import type { ReactElement } from 'react';
-declare global {
-    interface ResizeObserverEntry {
-        readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>;
-    }
-}
+type ObservedSize = {
+    width: number | null;
+    height: number | 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.
+ * 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
  *
@@ -26,11 +25,6 @@ declare global {
  * };
  * ```
  */
-export default function useResizeAware(): [
-    ReactElement,
-    {
-        width: number | null;
-        height: number | null;
-    }
-];
+export default function useResizeObserver(): [ReactElement, ObservedSize];
+export {};
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-resize-observer/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAA0B,MAAM,OAAO,CAAC;AAwGlE,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,mBAAmB;QAC5B,QAAQ,CAAC,yBAAyB,EAAE,aAAa,CAAE,kBAAkB,CAAE,CAAC;KACxE;CACD;AA6MD;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,IAAI;IACzC,YAAY;IACZ;QAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;QAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAA;KAAE;CAC/C,CAuBA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAY1C,KAAK,YAAY,GAAG;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AA0GF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,CAAE,YAAY,EAAE,YAAY,CAAE,CAe1E"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "7.5.0",
+	"version": "7.7.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,13 +32,13 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.5.0",
-		"@wordpress/dom": "^4.5.0",
-		"@wordpress/element": "^6.5.0",
-		"@wordpress/is-shallow-equal": "^5.5.0",
-		"@wordpress/keycodes": "^4.5.0",
-		"@wordpress/priority-queue": "^3.5.0",
-		"@wordpress/undo-manager": "^1.5.0",
+		"@wordpress/deprecated": "^4.7.0",
+		"@wordpress/dom": "^4.7.0",
+		"@wordpress/element": "^6.7.0",
+		"@wordpress/is-shallow-equal": "^5.7.0",
+		"@wordpress/keycodes": "^4.7.0",
+		"@wordpress/priority-queue": "^3.7.0",
+		"@wordpress/undo-manager": "^1.7.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.11",
 		"mousetrap": "^1.6.5",
@@ -50,5 +50,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c3101ab024e2bfc85d525c6d247e0d57cafc9fd9"
+	"gitHead": "c90d920de07c53dff82c5914635b56fafa503b7f"
 }