@wordpress/compose 6.15.0 → 6.17.0

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

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
@@ -8,7 +7,6 @@ import { createElement } from "@wordpress/element";
  * WordPress dependencies
  */
 import { useMemo, useRef, useCallback, useEffect, useState } from '@wordpress/element';
-
 // 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
@@ -19,7 +17,6 @@ function useResolvedElement(subscriber, refOrElement) {
   const cleanupRef = useRef();
   const callSubscriber = useCallback(() => {
     let element = null;
-
     if (callbackRefElement.current) {
       element = callbackRefElement.current;
     } else if (refOrElement) {
@@ -29,28 +26,27 @@ function useResolvedElement(subscriber, refOrElement) {
         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();
+      // 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.
+    };
 
+    // 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.
+  }, [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.
@@ -63,7 +59,6 @@ function useResolvedElement(subscriber, refOrElement) {
     callSubscriber();
   }, [callSubscriber]);
 }
-
 // 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:
@@ -99,17 +94,16 @@ const extractSize = (entry, boxProp, sizeType) => {
       // 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
+  // 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
@@ -117,30 +111,34 @@ function useResizeObserver(opts = {}) {
   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 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.
+  });
 
+  // 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;
     return () => {
       didUnmount.current = true;
     };
-  }, []); // Using a ref to track the previous width / height to avoid unnecessary renders.
+  }, []);
 
+  // Using a ref to track the previous width / height to avoid unnecessary renders.
   const previous = useRef({
     width: undefined,
     height: undefined
-  }); // This block is kinda like a useEffect, only it's called whenever a new
+  });
+
+  // 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.
@@ -151,18 +149,15 @@ function useResizeObserver(opts = {}) {
         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,
@@ -170,7 +165,6 @@ function useResizeObserver(opts = {}) {
             };
             previous.current.width = newWidth;
             previous.current.height = newHeight;
-
             if (onResizeRef.current) {
               onResizeRef.current(newSize);
             } else if (!didUnmount.current) {
@@ -180,7 +174,6 @@ function useResizeObserver(opts = {}) {
         })
       };
     }
-
     resizeObserverRef.current.instance.observe(element, {
       box: opts.box
     });
@@ -196,6 +189,7 @@ function useResizeObserver(opts = {}) {
     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.
@@ -215,8 +209,6 @@ function useResizeObserver(opts = {}) {
  * };
  * ```
  */
-
-
 export default function useResizeAware() {
   const {
     ref,

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"names":["useMemo","useRef","useCallback","useEffect","useState","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","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport type { 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';\nimport type { WPElement } 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\tWPElement,\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"]}
+{"version":3,"names":["useMemo","useRef","useCallback","useEffect","useState","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","createElement","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 { 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';\nimport type { WPElement } 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\tWPElement,\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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"}

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

@@ -1,5 +1,4 @@
 import { createElement } from "@wordpress/element";
-
 /**
  * External dependencies
  */
@@ -7,8 +6,8 @@ import { View, StyleSheet } from 'react-native';
 /**
  * WordPress dependencies
  */
-
 import { useState, useCallback } from '@wordpress/element';
+
 /**
  * Hook which allows to listen the resize event of any target element when it changes sizes.
  *
@@ -26,9 +25,7 @@ import { useState, useCallback } from '@wordpress/element';
  * 	);
  * };
  * ```
- *
  */
-
 const useResizeObserver = () => {
   const [measurements, setMeasurements] = useState(null);
   const onLayout = useCallback(({
@@ -45,7 +42,6 @@ const useResizeObserver = () => {
           height: Math.floor(height)
         };
       }
-
       return prevState;
     });
   }, []);
@@ -56,6 +52,5 @@ const useResizeObserver = () => {
   });
   return [observer, measurements];
 };
-
 export default useResizeObserver;
 //# sourceMappingURL=index.native.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","absoluteFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,oBAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,iBAAiB,GAAG,MAAM;AAC/B,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCJ,QAAQ,CAAE,IAAF,CAAlD;AAEA,QAAMK,QAAQ,GAAGJ,WAAW,CAAE,CAAE;AAAEK,IAAAA;AAAF,GAAF,KAAuB;AACpD,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoBF,WAAW,CAACG,MAAtC;AACAL,IAAAA,eAAe,CAAIM,SAAF,IAAiB;AACjC,UACC,CAAEA,SAAF,IACAA,SAAS,CAACH,KAAV,KAAoBA,KADpB,IAEAG,SAAS,CAACF,MAAV,KAAqBA,MAHtB,EAIE;AACD,eAAO;AACND,UAAAA,KAAK,EAAEI,IAAI,CAACC,KAAL,CAAYL,KAAZ,CADD;AAENC,UAAAA,MAAM,EAAEG,IAAI,CAACC,KAAL,CAAYJ,MAAZ;AAFF,SAAP;AAIA;;AACD,aAAOE,SAAP;AACA,KAZc,CAAf;AAaA,GAf2B,EAezB,EAfyB,CAA5B;AAiBA,QAAMG,QAAQ,GACb,cAAC,IAAD;AACC,IAAA,MAAM,EAAC,iBADR;AAEC,IAAA,KAAK,EAAGd,UAAU,CAACe,YAFpB;AAGC,IAAA,QAAQ,EAAGT;AAHZ,IADD;AAQA,SAAO,CAAEQ,QAAF,EAAYV,YAAZ,CAAP;AACA,CA7BD;;AA+BA,eAAeD,iBAAf","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 *\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"]}
+{"version":3,"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","createElement","testID","style","absoluteFill"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/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":";AAAA;AACA;AACA;AACA,SAASA,IAAI,EAAEC,UAAU,QAAQ,cAAc;AAC/C;AACA;AACA;AACA,SAASC,QAAQ,EAAEC,WAAW,QAAQ,oBAAoB;;AAE1D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EAC/B,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGJ,QAAQ,CAAE,IAAK,CAAC;EAE1D,MAAMK,QAAQ,GAAGJ,WAAW,CAAE,CAAE;IAAEK;EAAY,CAAC,KAAM;IACpD,MAAM;MAAEC,KAAK;MAAEC;IAAO,CAAC,GAAGF,WAAW,CAACG,MAAM;IAC5CL,eAAe,CAAIM,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,GACbC,aAAA,CAAChB,IAAI;IACJiB,MAAM,EAAC,iBAAiB;IACxBC,KAAK,EAAGjB,UAAU,CAACkB,YAAc;IACjCZ,QAAQ,EAAGA;EAAU,CACrB,CACD;EAED,OAAO,CAAEQ,QAAQ,EAAEV,YAAY,CAAE;AAClC,CAAC;AAED,eAAeD,iBAAiB"}

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

@@ -2,16 +2,17 @@
  * External dependencies
  */
 import { useMemoOne } from 'use-memo-one';
+
 /**
  * WordPress dependencies
  */
-
 import { useEffect } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import { throttle } from '../../utils/throttle';
+
 /**
  * Throttles a function similar to Lodash's `throttle`. A new throttled function will
  * be returned and any scheduled calls cancelled if any of the arguments change,
@@ -27,7 +28,6 @@ import { throttle } from '../../utils/throttle';
  * @param {import('../../utils/throttle').ThrottleOptions} [options] The options object. See linked documentation for details.
  * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Throttled function.
  */
-
 export default function useThrottle(fn, wait, options) {
   const throttled = useMemoOne(() => throttle(fn, wait !== null && wait !== void 0 ? wait : 0, options), [fn, wait, options]);
   useEffect(() => () => throttled.cancel(), [throttled]);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-throttle/index.js"],"names":["useMemoOne","useEffect","throttle","useThrottle","fn","wait","options","throttled","cancel"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAT,QAA2B,cAA3B;AAEA;AACA;AACA;;AACA,SAASC,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,sBAAzB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,eAAe,SAASC,WAAT,CAAsBC,EAAtB,EAA0BC,IAA1B,EAAgCC,OAAhC,EAA0C;AACxD,QAAMC,SAAS,GAAGP,UAAU,CAC3B,MAAME,QAAQ,CAAEE,EAAF,EAAMC,IAAN,aAAMA,IAAN,cAAMA,IAAN,GAAc,CAAd,EAAiBC,OAAjB,CADa,EAE3B,CAAEF,EAAF,EAAMC,IAAN,EAAYC,OAAZ,CAF2B,CAA5B;AAIAL,EAAAA,SAAS,CAAE,MAAM,MAAMM,SAAS,CAACC,MAAV,EAAd,EAAkC,CAAED,SAAF,CAAlC,CAAT;AACA,SAAOA,SAAP;AACA","sourcesContent":["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { throttle } from '../../utils/throttle';\n\n/**\n * Throttles a function similar to Lodash's `throttle`. A new throttled function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to throttle, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://docs-lodash.com/v4/throttle/\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc}                                          fn        The function to throttle.\n * @param {number}                                         [wait]    The number of milliseconds to throttle invocations to.\n * @param {import('../../utils/throttle').ThrottleOptions} [options] The options object. See linked documentation for details.\n * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Throttled function.\n */\nexport default function useThrottle( fn, wait, options ) {\n\tconst throttled = useMemoOne(\n\t\t() => throttle( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => throttled.cancel(), [ throttled ] );\n\treturn throttled;\n}\n"]}
+{"version":3,"names":["useMemoOne","useEffect","throttle","useThrottle","fn","wait","options","throttled","cancel"],"sources":["@wordpress/compose/src/hooks/use-throttle/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { throttle } from '../../utils/throttle';\n\n/**\n * Throttles a function similar to Lodash's `throttle`. A new throttled function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to throttle, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://docs-lodash.com/v4/throttle/\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc}                                          fn        The function to throttle.\n * @param {number}                                         [wait]    The number of milliseconds to throttle invocations to.\n * @param {import('../../utils/throttle').ThrottleOptions} [options] The options object. See linked documentation for details.\n * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Throttled function.\n */\nexport default function useThrottle( fn, wait, options ) {\n\tconst throttled = useMemoOne(\n\t\t() => throttle( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => throttled.cancel(), [ throttled ] );\n\treturn throttled;\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,cAAc;;AAEzC;AACA;AACA;AACA,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C;AACA;AACA;AACA,SAASC,QAAQ,QAAQ,sBAAsB;;AAE/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,WAAWA,CAAEC,EAAE,EAAEC,IAAI,EAAEC,OAAO,EAAG;EACxD,MAAMC,SAAS,GAAGP,UAAU,CAC3B,MAAME,QAAQ,CAAEE,EAAE,EAAEC,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,CAAC,EAAEC,OAAQ,CAAC,EACxC,CAAEF,EAAE,EAAEC,IAAI,EAAEC,OAAO,CACpB,CAAC;EACDL,SAAS,CAAE,MAAM,MAAMM,SAAS,CAACC,MAAM,CAAC,CAAC,EAAE,CAAED,SAAS,CAAG,CAAC;EAC1D,OAAOA,SAAS;AACjB"}

package/build-module/hooks/use-viewport-match/index.js

@@ -2,11 +2,12 @@
  * WordPress dependencies
  */
 import { createContext, useContext } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
-
 import useMediaQuery from '../use-media-query';
+
 /**
  * @typedef {"huge" | "wide" | "large" | "medium" | "small" | "mobile"} WPBreakpoint
  */
@@ -18,7 +19,6 @@ import useMediaQuery from '../use-media-query';
  *
  * @type {Record<WPBreakpoint, number>}
  */
-
 const BREAKPOINTS = {
   huge: 1440,
   wide: 1280,
@@ -27,6 +27,7 @@ const BREAKPOINTS = {
   small: 600,
   mobile: 480
 };
+
 /**
  * @typedef {">=" | "<"} WPViewportOperator
  */
@@ -36,24 +37,22 @@ const BREAKPOINTS = {
  *
  * @type {Record<WPViewportOperator, string>}
  */
-
 const CONDITIONS = {
   '>=': 'min-width',
   '<': 'max-width'
 };
+
 /**
  * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.
  *
  * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}
  */
-
 const OPERATOR_EVALUATORS = {
   '>=': (breakpointValue, width) => width >= breakpointValue,
   '<': (breakpointValue, width) => width < breakpointValue
 };
-const ViewportMatchWidthContext = createContext(
-/** @type {null | number} */
-null);
+const ViewportMatchWidthContext = createContext( /** @type {null | number} */null);
+
 /**
  * Returns true if the viewport matches the given query, or false otherwise.
  *
@@ -69,19 +68,15 @@ null);
  *
  * @return {boolean} Whether viewport matches query.
  */
-
 const useViewportMatch = (breakpoint, operator = '>=') => {
   const simulatedWidth = useContext(ViewportMatchWidthContext);
   const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
   const mediaQueryResult = useMediaQuery(mediaQuery || undefined);
-
   if (simulatedWidth) {
     return OPERATOR_EVALUATORS[operator](BREAKPOINTS[breakpoint], simulatedWidth);
   }
-
   return mediaQueryResult;
 };
-
 useViewportMatch.__experimentalWidthProvider = ViewportMatchWidthContext.Provider;
 export default useViewportMatch;
 //# sourceMappingURL=index.js.map

package/build-module/hooks/use-viewport-match/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-viewport-match/index.js"],"names":["createContext","useContext","useMediaQuery","BREAKPOINTS","huge","wide","large","medium","small","mobile","CONDITIONS","OPERATOR_EVALUATORS","breakpointValue","width","ViewportMatchWidthContext","useViewportMatch","breakpoint","operator","simulatedWidth","mediaQuery","mediaQueryResult","undefined","__experimentalWidthProvider","Provider"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,oBAA1C;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,oBAA1B;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,WAAW,GAAG;AACnBC,EAAAA,IAAI,EAAE,IADa;AAEnBC,EAAAA,IAAI,EAAE,IAFa;AAGnBC,EAAAA,KAAK,EAAE,GAHY;AAInBC,EAAAA,MAAM,EAAE,GAJW;AAKnBC,EAAAA,KAAK,EAAE,GALY;AAMnBC,EAAAA,MAAM,EAAE;AANW,CAApB;AASA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,UAAU,GAAG;AAClB,QAAM,WADY;AAElB,OAAK;AAFa,CAAnB;AAKA;AACA;AACA;AACA;AACA;;AACA,MAAMC,mBAAmB,GAAG;AAC3B,QAAM,CAAEC,eAAF,EAAmBC,KAAnB,KAA8BA,KAAK,IAAID,eADlB;AAE3B,OAAK,CAAEA,eAAF,EAAmBC,KAAnB,KAA8BA,KAAK,GAAGD;AAFhB,CAA5B;AAKA,MAAME,yBAAyB,GAAGd,aAAa;AAC9C;AAA+B,IADe,CAA/C;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMe,gBAAgB,GAAG,CAAEC,UAAF,EAAcC,QAAQ,GAAG,IAAzB,KAAmC;AAC3D,QAAMC,cAAc,GAAGjB,UAAU,CAAEa,yBAAF,CAAjC;AACA,QAAMK,UAAU,GACf,CAAED,cAAF,IACC,IAAIR,UAAU,CAAEO,QAAF,CAAc,KAAKd,WAAW,CAAEa,UAAF,CAAgB,KAF9D;AAGA,QAAMI,gBAAgB,GAAGlB,aAAa,CAAEiB,UAAU,IAAIE,SAAhB,CAAtC;;AACA,MAAKH,cAAL,EAAsB;AACrB,WAAOP,mBAAmB,CAAEM,QAAF,CAAnB,CACNd,WAAW,CAAEa,UAAF,CADL,EAENE,cAFM,CAAP;AAIA;;AACD,SAAOE,gBAAP;AACA,CAbD;;AAeAL,gBAAgB,CAACO,2BAAjB,GACCR,yBAAyB,CAACS,QAD3B;AAGA,eAAeR,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"huge\" | \"wide\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\thuge: 1440,\n\twide: 1280,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint}       breakpoint      Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = ( breakpoint, operator = '>=' ) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"]}
+{"version":3,"names":["createContext","useContext","useMediaQuery","BREAKPOINTS","huge","wide","large","medium","small","mobile","CONDITIONS","OPERATOR_EVALUATORS",">=","breakpointValue","width","<","ViewportMatchWidthContext","useViewportMatch","breakpoint","operator","simulatedWidth","mediaQuery","mediaQueryResult","undefined","__experimentalWidthProvider","Provider"],"sources":["@wordpress/compose/src/hooks/use-viewport-match/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"huge\" | \"wide\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\thuge: 1440,\n\twide: 1280,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint}       breakpoint      Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = ( breakpoint, operator = '>=' ) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAa,EAAEC,UAAU,QAAQ,oBAAoB;;AAE9D;AACA;AACA;AACA,OAAOC,aAAa,MAAM,oBAAoB;;AAE9C;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAG;EACnBC,IAAI,EAAE,IAAI;EACVC,IAAI,EAAE,IAAI;EACVC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE,GAAG;EACXC,KAAK,EAAE,GAAG;EACVC,MAAM,EAAE;AACT,CAAC;;AAED;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAAU,GAAG;EAClB,IAAI,EAAE,WAAW;EACjB,GAAG,EAAE;AACN,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAG;EAC3B,IAAI,EAAEC,CAAEC,eAAe,EAAEC,KAAK,KAAMA,KAAK,IAAID,eAAe;EAC5D,GAAG,EAAEE,CAAEF,eAAe,EAAEC,KAAK,KAAMA,KAAK,GAAGD;AAC5C,CAAC;AAED,MAAMG,yBAAyB,GAAGhB,aAAa,EAC9C,4BAA+B,IAChC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMiB,gBAAgB,GAAGA,CAAEC,UAAU,EAAEC,QAAQ,GAAG,IAAI,KAAM;EAC3D,MAAMC,cAAc,GAAGnB,UAAU,CAAEe,yBAA0B,CAAC;EAC9D,MAAMK,UAAU,GACf,CAAED,cAAc,IACf,IAAIV,UAAU,CAAES,QAAQ,CAAI,KAAKhB,WAAW,CAAEe,UAAU,CAAI,KAAI;EAClE,MAAMI,gBAAgB,GAAGpB,aAAa,CAAEmB,UAAU,IAAIE,SAAU,CAAC;EACjE,IAAKH,cAAc,EAAG;IACrB,OAAOT,mBAAmB,CAAEQ,QAAQ,CAAE,CACrChB,WAAW,CAAEe,UAAU,CAAE,EACzBE,cACD,CAAC;EACF;EACA,OAAOE,gBAAgB;AACxB,CAAC;AAEDL,gBAAgB,CAACO,2BAA2B,GAC3CR,yBAAyB,CAACS,QAAQ;AAEnC,eAAeR,gBAAgB"}

package/build-module/hooks/use-warn-on-change/index.js

@@ -1,11 +1,11 @@
 /**
  * Internal dependencies
  */
-import usePrevious from '../use-previous'; // Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case
-// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
+import usePrevious from '../use-previous';
 
+// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case
+// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript
 /* eslint-disable jsdoc/check-types */
-
 /**
  * Hook that performs a shallow comparison between the preview value of an object
  * and the new one, if there's a difference, it prints it to the console.
@@ -24,19 +24,13 @@ import usePrevious from '../use-previous'; // Disable reason: Object and object
  * @param {object} object Object which changes to compare.
  * @param {string} prefix Just a prefix to show when console logging.
  */
-
 function useWarnOnChange(object, prefix = 'Change detection') {
   const previousValues = usePrevious(object);
   Object.entries(previousValues !== null && previousValues !== void 0 ? previousValues : []).forEach(([key, value]) => {
-    if (value !== object[
-    /** @type {keyof typeof object} */
-    key]) {
+    if (value !== object[/** @type {keyof typeof object} */key]) {
       // eslint-disable-next-line no-console
-      console.warn(`${prefix}: ${key} key changed:`, value, object[
-      /** @type {keyof typeof object} */
-      key]
-      /* eslint-enable jsdoc/check-types */
-      );
+      console.warn(`${prefix}: ${key} key changed:`, value, object[/** @type {keyof typeof object} */key]
+      /* eslint-enable jsdoc/check-types */);
     }
   });
 }

package/build-module/hooks/use-warn-on-change/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-warn-on-change/index.js"],"names":["usePrevious","useWarnOnChange","object","prefix","previousValues","Object","entries","forEach","key","value","console","warn"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,WAAP,MAAwB,iBAAxB,C,CAEA;AACA;;AACA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,eAAT,CAA0BC,MAA1B,EAAkCC,MAAM,GAAG,kBAA3C,EAAgE;AAC/D,QAAMC,cAAc,GAAGJ,WAAW,CAAEE,MAAF,CAAlC;AAEAG,EAAAA,MAAM,CAACC,OAAP,CAAgBF,cAAhB,aAAgBA,cAAhB,cAAgBA,cAAhB,GAAkC,EAAlC,EAAuCG,OAAvC,CAAgD,CAAE,CAAEC,GAAF,EAAOC,KAAP,CAAF,KAAsB;AACrE,QAAKA,KAAK,KAAKP,MAAM;AAAE;AAAqCM,IAAAA,GAAvC,CAArB,EAAsE;AACrE;AACAE,MAAAA,OAAO,CAACC,IAAR,CACE,GAAGR,MAAQ,KAAKK,GAAK,eADvB,EAECC,KAFD,EAGCP,MAAM;AAAE;AAAqCM,MAAAA,GAAvC;AACN;AAJD;AAMA;AACD,GAVD;AAWA;;AAED,eAAeP,eAAf","sourcesContent":["/**\n * Internal dependencies\n */\nimport usePrevious from '../use-previous';\n\n// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case\n// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript\n/* eslint-disable jsdoc/check-types */\n/**\n * Hook that performs a shallow comparison between the preview value of an object\n * and the new one, if there's a difference, it prints it to the console.\n * this is useful in performance related work, to check why a component re-renders.\n *\n *  @example\n *\n * ```jsx\n * function MyComponent(props) {\n *    useWarnOnChange(props);\n *\n *    return \"Something\";\n * }\n * ```\n *\n * @param {object} object Object which changes to compare.\n * @param {string} prefix Just a prefix to show when console logging.\n */\nfunction useWarnOnChange( object, prefix = 'Change detection' ) {\n\tconst previousValues = usePrevious( object );\n\n\tObject.entries( previousValues ?? [] ).forEach( ( [ key, value ] ) => {\n\t\tif ( value !== object[ /** @type {keyof typeof object} */ ( key ) ] ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`${ prefix }: ${ key } key changed:`,\n\t\t\t\tvalue,\n\t\t\t\tobject[ /** @type {keyof typeof object} */ ( key ) ]\n\t\t\t\t/* eslint-enable jsdoc/check-types */\n\t\t\t);\n\t\t}\n\t} );\n}\n\nexport default useWarnOnChange;\n"]}
+{"version":3,"names":["usePrevious","useWarnOnChange","object","prefix","previousValues","Object","entries","forEach","key","value","console","warn"],"sources":["@wordpress/compose/src/hooks/use-warn-on-change/index.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport usePrevious from '../use-previous';\n\n// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in thise case\n// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript\n/* eslint-disable jsdoc/check-types */\n/**\n * Hook that performs a shallow comparison between the preview value of an object\n * and the new one, if there's a difference, it prints it to the console.\n * this is useful in performance related work, to check why a component re-renders.\n *\n *  @example\n *\n * ```jsx\n * function MyComponent(props) {\n *    useWarnOnChange(props);\n *\n *    return \"Something\";\n * }\n * ```\n *\n * @param {object} object Object which changes to compare.\n * @param {string} prefix Just a prefix to show when console logging.\n */\nfunction useWarnOnChange( object, prefix = 'Change detection' ) {\n\tconst previousValues = usePrevious( object );\n\n\tObject.entries( previousValues ?? [] ).forEach( ( [ key, value ] ) => {\n\t\tif ( value !== object[ /** @type {keyof typeof object} */ ( key ) ] ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`${ prefix }: ${ key } key changed:`,\n\t\t\t\tvalue,\n\t\t\t\tobject[ /** @type {keyof typeof object} */ ( key ) ]\n\t\t\t\t/* eslint-enable jsdoc/check-types */\n\t\t\t);\n\t\t}\n\t} );\n}\n\nexport default useWarnOnChange;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,WAAW,MAAM,iBAAiB;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,eAAeA,CAAEC,MAAM,EAAEC,MAAM,GAAG,kBAAkB,EAAG;EAC/D,MAAMC,cAAc,GAAGJ,WAAW,CAAEE,MAAO,CAAC;EAE5CG,MAAM,CAACC,OAAO,CAAEF,cAAc,aAAdA,cAAc,cAAdA,cAAc,GAAI,EAAG,CAAC,CAACG,OAAO,CAAE,CAAE,CAAEC,GAAG,EAAEC,KAAK,CAAE,KAAM;IACrE,IAAKA,KAAK,KAAKP,MAAM,CAAE,kCAAqCM,GAAG,CAAI,EAAG;MACrE;MACAE,OAAO,CAACC,IAAI,CACV,GAAGR,MAAQ,KAAKK,GAAK,eAAc,EACpCC,KAAK,EACLP,MAAM,CAAE,kCAAqCM,GAAG;MAChD,qCACD,CAAC;IACF;EACD,CAAE,CAAC;AACJ;;AAEA,eAAeP,eAAe"}

package/build-module/index.js

@@ -1,20 +1,23 @@
 // The `createHigherOrderComponent` helper and helper types.
-export * from './utils/create-higher-order-component'; // The `debounce` helper and its types.
-
-export * from './utils/debounce'; // The `throttle` helper and its types.
-
-export * from './utils/throttle'; // The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
+export * from './utils/create-higher-order-component';
+// The `debounce` helper and its types.
+export * from './utils/debounce';
+// The `throttle` helper and its types.
+export * from './utils/throttle';
 
+// The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
 export { default as compose } from './higher-order/compose';
-export { default as pipe } from './higher-order/pipe'; // Higher-order components.
+export { default as pipe } from './higher-order/pipe';
 
+// Higher-order components.
 export { default as ifCondition } from './higher-order/if-condition';
 export { default as pure } from './higher-order/pure';
 export { default as withGlobalEvents } from './higher-order/with-global-events';
 export { default as withInstanceId } from './higher-order/with-instance-id';
 export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
-export { default as withState } from './higher-order/with-state'; // Hooks.
+export { default as withState } from './higher-order/with-state';
 
+// Hooks.
 export { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';
 export { default as useCopyOnClick } from './hooks/use-copy-on-click';
 export { default as useCopyToClipboard } from './hooks/use-copy-to-clipboard';

package/build-module/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/index.js"],"names":["default","compose","pipe","ifCondition","pure","withGlobalEvents","withInstanceId","withSafeTimeout","withState","useConstrainedTabbing","useCopyOnClick","useCopyToClipboard","__experimentalUseDialog","useDisabled","__experimentalUseDragging","useFocusOnMount","__experimentalUseFocusOutside","useFocusReturn","useInstanceId","useIsomorphicLayoutEffect","useKeyboardShortcut","useMediaQuery","usePrevious","useReducedMotion","useViewportMatch","useResizeObserver","useAsyncList","useWarnOnChange","useDebounce","useThrottle","useMergeRefs","useRefEffect","__experimentalUseDropZone","useFocusableIframe","__experimentalUseFixedWindowList"],"mappings":"AAAA;AACA,cAAc,uCAAd,C,CACA;;AACA,cAAc,kBAAd,C,CACA;;AACA,cAAc,kBAAd,C,CAEA;;AACA,SAASA,OAAO,IAAIC,OAApB,QAAmC,wBAAnC;AACA,SAASD,OAAO,IAAIE,IAApB,QAAgC,qBAAhC,C,CAEA;;AACA,SAASF,OAAO,IAAIG,WAApB,QAAuC,6BAAvC;AACA,SAASH,OAAO,IAAII,IAApB,QAAgC,qBAAhC;AACA,SAASJ,OAAO,IAAIK,gBAApB,QAA4C,mCAA5C;AACA,SAASL,OAAO,IAAIM,cAApB,QAA0C,iCAA1C;AACA,SAASN,OAAO,IAAIO,eAApB,QAA2C,kCAA3C;AACA,SAASP,OAAO,IAAIQ,SAApB,QAAqC,2BAArC,C,CAEA;;AACA,SAASR,OAAO,IAAIS,qBAApB,QAAiD,iCAAjD;AACA,SAAST,OAAO,IAAIU,cAApB,QAA0C,2BAA1C;AACA,SAASV,OAAO,IAAIW,kBAApB,QAA8C,+BAA9C;AACA,SAASX,OAAO,IAAIY,uBAApB,QAAmD,oBAAnD;AACA,SAASZ,OAAO,IAAIa,WAApB,QAAuC,sBAAvC;AACA,SAASb,OAAO,IAAIc,yBAApB,QAAqD,sBAArD;AACA,SAASd,OAAO,IAAIe,eAApB,QAA2C,4BAA3C;AACA,SAASf,OAAO,IAAIgB,6BAApB,QAAyD,2BAAzD;AACA,SAAShB,OAAO,IAAIiB,cAApB,QAA0C,0BAA1C;AACA,SAASjB,OAAO,IAAIkB,aAApB,QAAyC,yBAAzC;AACA,SAASlB,OAAO,IAAImB,yBAApB,QAAqD,sCAArD;AACA,SAASnB,OAAO,IAAIoB,mBAApB,QAA+C,+BAA/C;AACA,SAASpB,OAAO,IAAIqB,aAApB,QAAyC,yBAAzC;AACA,SAASrB,OAAO,IAAIsB,WAApB,QAAuC,sBAAvC;AACA,SAAStB,OAAO,IAAIuB,gBAApB,QAA4C,4BAA5C;AACA,SAASvB,OAAO,IAAIwB,gBAApB,QAA4C,4BAA5C;AACA,SAASxB,OAAO,IAAIyB,iBAApB,QAA6C,6BAA7C;AACA,SAASzB,OAAO,IAAI0B,YAApB,QAAwC,wBAAxC;AACA,SAAS1B,OAAO,IAAI2B,eAApB,QAA2C,4BAA3C;AACA,SAAS3B,OAAO,IAAI4B,WAApB,QAAuC,sBAAvC;AACA,SAAS5B,OAAO,IAAI6B,WAApB,QAAuC,sBAAvC;AACA,SAAS7B,OAAO,IAAI8B,YAApB,QAAwC,wBAAxC;AACA,SAAS9B,OAAO,IAAI+B,YAApB,QAAwC,wBAAxC;AACA,SAAS/B,OAAO,IAAIgC,yBAApB,QAAqD,uBAArD;AACA,SAAShC,OAAO,IAAIiC,kBAApB,QAA8C,8BAA9C;AACA,SAASjC,OAAO,IAAIkC,gCAApB,QAA4D,+BAA5D","sourcesContent":["// The `createHigherOrderComponent` helper and helper types.\nexport * from './utils/create-higher-order-component';\n// The `debounce` helper and its types.\nexport * from './utils/debounce';\n// The `throttle` helper and its types.\nexport * from './utils/throttle';\n\n// The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).\nexport { default as compose } from './higher-order/compose';\nexport { default as pipe } from './higher-order/pipe';\n\n// Higher-order components.\nexport { default as ifCondition } from './higher-order/if-condition';\nexport { default as pure } from './higher-order/pure';\nexport { default as withGlobalEvents } from './higher-order/with-global-events';\nexport { default as withInstanceId } from './higher-order/with-instance-id';\nexport { default as withSafeTimeout } from './higher-order/with-safe-timeout';\nexport { default as withState } from './higher-order/with-state';\n\n// Hooks.\nexport { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';\nexport { default as useCopyOnClick } from './hooks/use-copy-on-click';\nexport { default as useCopyToClipboard } from './hooks/use-copy-to-clipboard';\nexport { default as __experimentalUseDialog } from './hooks/use-dialog';\nexport { default as useDisabled } from './hooks/use-disabled';\nexport { default as __experimentalUseDragging } from './hooks/use-dragging';\nexport { default as useFocusOnMount } from './hooks/use-focus-on-mount';\nexport { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';\nexport { default as useFocusReturn } from './hooks/use-focus-return';\nexport { default as useInstanceId } from './hooks/use-instance-id';\nexport { default as useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';\nexport { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';\nexport { default as useMediaQuery } from './hooks/use-media-query';\nexport { default as usePrevious } from './hooks/use-previous';\nexport { default as useReducedMotion } from './hooks/use-reduced-motion';\nexport { default as useViewportMatch } from './hooks/use-viewport-match';\nexport { default as useResizeObserver } from './hooks/use-resize-observer';\nexport { default as useAsyncList } from './hooks/use-async-list';\nexport { default as useWarnOnChange } from './hooks/use-warn-on-change';\nexport { default as useDebounce } from './hooks/use-debounce';\nexport { default as useThrottle } from './hooks/use-throttle';\nexport { default as useMergeRefs } from './hooks/use-merge-refs';\nexport { default as useRefEffect } from './hooks/use-ref-effect';\nexport { default as __experimentalUseDropZone } from './hooks/use-drop-zone';\nexport { default as useFocusableIframe } from './hooks/use-focusable-iframe';\nexport { default as __experimentalUseFixedWindowList } from './hooks/use-fixed-window-list';\n"]}
+{"version":3,"names":["default","compose","pipe","ifCondition","pure","withGlobalEvents","withInstanceId","withSafeTimeout","withState","useConstrainedTabbing","useCopyOnClick","useCopyToClipboard","__experimentalUseDialog","useDisabled","__experimentalUseDragging","useFocusOnMount","__experimentalUseFocusOutside","useFocusReturn","useInstanceId","useIsomorphicLayoutEffect","useKeyboardShortcut","useMediaQuery","usePrevious","useReducedMotion","useViewportMatch","useResizeObserver","useAsyncList","useWarnOnChange","useDebounce","useThrottle","useMergeRefs","useRefEffect","__experimentalUseDropZone","useFocusableIframe","__experimentalUseFixedWindowList"],"sources":["@wordpress/compose/src/index.js"],"sourcesContent":["// The `createHigherOrderComponent` helper and helper types.\nexport * from './utils/create-higher-order-component';\n// The `debounce` helper and its types.\nexport * from './utils/debounce';\n// The `throttle` helper and its types.\nexport * from './utils/throttle';\n\n// The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).\nexport { default as compose } from './higher-order/compose';\nexport { default as pipe } from './higher-order/pipe';\n\n// Higher-order components.\nexport { default as ifCondition } from './higher-order/if-condition';\nexport { default as pure } from './higher-order/pure';\nexport { default as withGlobalEvents } from './higher-order/with-global-events';\nexport { default as withInstanceId } from './higher-order/with-instance-id';\nexport { default as withSafeTimeout } from './higher-order/with-safe-timeout';\nexport { default as withState } from './higher-order/with-state';\n\n// Hooks.\nexport { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';\nexport { default as useCopyOnClick } from './hooks/use-copy-on-click';\nexport { default as useCopyToClipboard } from './hooks/use-copy-to-clipboard';\nexport { default as __experimentalUseDialog } from './hooks/use-dialog';\nexport { default as useDisabled } from './hooks/use-disabled';\nexport { default as __experimentalUseDragging } from './hooks/use-dragging';\nexport { default as useFocusOnMount } from './hooks/use-focus-on-mount';\nexport { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';\nexport { default as useFocusReturn } from './hooks/use-focus-return';\nexport { default as useInstanceId } from './hooks/use-instance-id';\nexport { default as useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';\nexport { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';\nexport { default as useMediaQuery } from './hooks/use-media-query';\nexport { default as usePrevious } from './hooks/use-previous';\nexport { default as useReducedMotion } from './hooks/use-reduced-motion';\nexport { default as useViewportMatch } from './hooks/use-viewport-match';\nexport { default as useResizeObserver } from './hooks/use-resize-observer';\nexport { default as useAsyncList } from './hooks/use-async-list';\nexport { default as useWarnOnChange } from './hooks/use-warn-on-change';\nexport { default as useDebounce } from './hooks/use-debounce';\nexport { default as useThrottle } from './hooks/use-throttle';\nexport { default as useMergeRefs } from './hooks/use-merge-refs';\nexport { default as useRefEffect } from './hooks/use-ref-effect';\nexport { default as __experimentalUseDropZone } from './hooks/use-drop-zone';\nexport { default as useFocusableIframe } from './hooks/use-focusable-iframe';\nexport { default as __experimentalUseFixedWindowList } from './hooks/use-fixed-window-list';\n"],"mappings":"AAAA;AACA,cAAc,uCAAuC;AACrD;AACA,cAAc,kBAAkB;AAChC;AACA,cAAc,kBAAkB;;AAEhC;AACA,SAASA,OAAO,IAAIC,OAAO,QAAQ,wBAAwB;AAC3D,SAASD,OAAO,IAAIE,IAAI,QAAQ,qBAAqB;;AAErD;AACA,SAASF,OAAO,IAAIG,WAAW,QAAQ,6BAA6B;AACpE,SAASH,OAAO,IAAII,IAAI,QAAQ,qBAAqB;AACrD,SAASJ,OAAO,IAAIK,gBAAgB,QAAQ,mCAAmC;AAC/E,SAASL,OAAO,IAAIM,cAAc,QAAQ,iCAAiC;AAC3E,SAASN,OAAO,IAAIO,eAAe,QAAQ,kCAAkC;AAC7E,SAASP,OAAO,IAAIQ,SAAS,QAAQ,2BAA2B;;AAEhE;AACA,SAASR,OAAO,IAAIS,qBAAqB,QAAQ,iCAAiC;AAClF,SAAST,OAAO,IAAIU,cAAc,QAAQ,2BAA2B;AACrE,SAASV,OAAO,IAAIW,kBAAkB,QAAQ,+BAA+B;AAC7E,SAASX,OAAO,IAAIY,uBAAuB,QAAQ,oBAAoB;AACvE,SAASZ,OAAO,IAAIa,WAAW,QAAQ,sBAAsB;AAC7D,SAASb,OAAO,IAAIc,yBAAyB,QAAQ,sBAAsB;AAC3E,SAASd,OAAO,IAAIe,eAAe,QAAQ,4BAA4B;AACvE,SAASf,OAAO,IAAIgB,6BAA6B,QAAQ,2BAA2B;AACpF,SAAShB,OAAO,IAAIiB,cAAc,QAAQ,0BAA0B;AACpE,SAASjB,OAAO,IAAIkB,aAAa,QAAQ,yBAAyB;AAClE,SAASlB,OAAO,IAAImB,yBAAyB,QAAQ,sCAAsC;AAC3F,SAASnB,OAAO,IAAIoB,mBAAmB,QAAQ,+BAA+B;AAC9E,SAASpB,OAAO,IAAIqB,aAAa,QAAQ,yBAAyB;AAClE,SAASrB,OAAO,IAAIsB,WAAW,QAAQ,sBAAsB;AAC7D,SAAStB,OAAO,IAAIuB,gBAAgB,QAAQ,4BAA4B;AACxE,SAASvB,OAAO,IAAIwB,gBAAgB,QAAQ,4BAA4B;AACxE,SAASxB,OAAO,IAAIyB,iBAAiB,QAAQ,6BAA6B;AAC1E,SAASzB,OAAO,IAAI0B,YAAY,QAAQ,wBAAwB;AAChE,SAAS1B,OAAO,IAAI2B,eAAe,QAAQ,4BAA4B;AACvE,SAAS3B,OAAO,IAAI4B,WAAW,QAAQ,sBAAsB;AAC7D,SAAS5B,OAAO,IAAI6B,WAAW,QAAQ,sBAAsB;AAC7D,SAAS7B,OAAO,IAAI8B,YAAY,QAAQ,wBAAwB;AAChE,SAAS9B,OAAO,IAAI+B,YAAY,QAAQ,wBAAwB;AAChE,SAAS/B,OAAO,IAAIgC,yBAAyB,QAAQ,uBAAuB;AAC5E,SAAShC,OAAO,IAAIiC,kBAAkB,QAAQ,8BAA8B;AAC5E,SAASjC,OAAO,IAAIkC,gCAAgC,QAAQ,+BAA+B"}

package/build-module/index.native.js

@@ -1,21 +1,24 @@
 // The `createHigherOrderComponent` helper and helper types.
-export * from './utils/create-higher-order-component'; // The `debounce` helper and its types.
-
-export * from './utils/debounce'; // The `throttle` helper and its types.
-
-export * from './utils/throttle'; // The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
+export * from './utils/create-higher-order-component';
+// The `debounce` helper and its types.
+export * from './utils/debounce';
+// The `throttle` helper and its types.
+export * from './utils/throttle';
 
+// The `compose` and `pipe` helpers (inspired by `flowRight` and `flow` from Lodash).
 export { default as compose } from './higher-order/compose';
-export { default as pipe } from './higher-order/pipe'; // Higher-order components.
+export { default as pipe } from './higher-order/pipe';
 
+// Higher-order components.
 export { default as ifCondition } from './higher-order/if-condition';
 export { default as pure } from './higher-order/pure';
 export { default as withGlobalEvents } from './higher-order/with-global-events';
 export { default as withInstanceId } from './higher-order/with-instance-id';
 export { default as withSafeTimeout } from './higher-order/with-safe-timeout';
 export { default as withState } from './higher-order/with-state';
-export { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme'; // Hooks.
+export { default as withPreferredColorScheme } from './higher-order/with-preferred-color-scheme';
 
+// Hooks.
 export { default as useConstrainedTabbing } from './hooks/use-constrained-tabbing';
 export { default as __experimentalUseDragging } from './hooks/use-dragging';
 export { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';