@wordpress/compose 7.7.0 → 7.8.1-next.1f6eadc42.0

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"names":["View","StyleSheet","useState","useCallback","jsx","_jsx","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","testID","style","absoluteFill"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/_legacy/index.native.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { View, StyleSheet } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<View>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</View>\n * \t);\n * };\n * ```\n */\nconst useResizeObserver = () => {\n\tconst [ measurements, setMeasurements ] = useState( null );\n\n\tconst onLayout = useCallback( ( { nativeEvent } ) => {\n\t\tconst { width, height } = nativeEvent.layout;\n\t\tsetMeasurements( ( prevState ) => {\n\t\t\tif (\n\t\t\t\t! prevState ||\n\t\t\t\tprevState.width !== width ||\n\t\t\t\tprevState.height !== height\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\twidth: Math.floor( width ),\n\t\t\t\t\theight: Math.floor( height ),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevState;\n\t\t} );\n\t}, [] );\n\n\tconst observer = (\n\t\t<View\n\t\t\ttestID=\"resize-observer\"\n\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\tonLayout={ onLayout }\n\t\t/>\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"],"mappings":"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;AAjBA,SAAAC,GAAA,IAAAC,IAAA;AAkBA,MAAMC,iBAAiB,GAAGA,CAAA,KAAM;EAC/B,MAAM,CAAEC,YAAY,EAAEC,eAAe,CAAE,GAAGN,QAAQ,CAAE,IAAK,CAAC;EAE1D,MAAMO,QAAQ,GAAGN,WAAW,CAAE,CAAE;IAAEO;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,gBACbZ,IAAA,CAACL,IAAI;IACJkB,MAAM,EAAC,iBAAiB;IACxBC,KAAK,EAAGlB,UAAU,CAACmB,YAAc;IACjCX,QAAQ,EAAGA;EAAU,CACrB,CACD;EAED,OAAO,CAAEQ,QAAQ,EAAEV,YAAY,CAAE;AAClC,CAAC;AAED,eAAeD,iBAAiB","ignoreList":[]}

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

@@ -1,108 +1,81 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-
+import { useRef } from '@wordpress/element';
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { useCallback, useLayoutEffect, useRef, useState } from '@wordpress/element';
-import { jsx as _jsx } from "react/jsx-runtime";
-// We're only using the first element of the size sequences, until future versions of the spec solidify on how
-// exactly it'll be used for fragments in multi-column scenarios:
-// From the spec:
-// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,
-// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not
-// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single
-// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.
-// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)
+import useEvent from '../use-event';
+import _useLegacyResizeObserver from './_legacy';
+/**
+ * External dependencies
+ */
+
+// This is the current implementation of `useResizeObserver`.
 //
-// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,
-// regardless of the "box" option.
-// The spec states the following on this:
-// > This does not have any impact on which box dimensions are returned to the defined callback when the event
-// > is fired, it solely defines which box the author wishes to observe layout changes on.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
-// I'm not exactly clear on what this means, especially when you consider a later section stating the following:
-// > This section is non-normative. An author may desire to observe more than one CSS box.
-// > In this case, author will need to use multiple ResizeObservers.
-// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)
-// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.
-// For this reason I decided to only return the requested size,
-// even though it seems we have access to results for all box types.
-// This also means that we get to keep the current api, being able to return a simple { width, height } pair,
-// regardless of box option.
-const extractSize = entry => {
-  let entrySize;
-  if (!entry.contentBoxSize) {
-    // The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.
-    // See the 6th step in the description for the RO algorithm:
-    // https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h
-    // > Set this.contentRect to logical this.contentBoxSize given target and observedBox of "content-box".
-    // In real browser implementations of course these objects differ, but the width/height values should be equivalent.
-    entrySize = [entry.contentRect.width, entry.contentRect.height];
-  } else if (entry.contentBoxSize[0]) {
-    const contentBoxSize = entry.contentBoxSize[0];
-    entrySize = [contentBoxSize.inlineSize, contentBoxSize.blockSize];
-  } else {
-    // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's buggy
-    // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
-    const contentBoxSize = entry.contentBoxSize;
-    entrySize = [contentBoxSize.inlineSize, contentBoxSize.blockSize];
-  }
-  const [width, height] = entrySize.map(d => Math.round(d));
-  return {
-    width,
-    height
-  };
-};
-const RESIZE_ELEMENT_STYLES = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  pointerEvents: 'none',
-  opacity: 0,
-  overflow: 'hidden',
-  zIndex: -1
-};
-function ResizeElement({
-  onResize
-}) {
-  const resizeElementRef = 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 () => {
-      resizeObserver.unobserve(resizeElement);
-    };
-  }, []);
-  return /*#__PURE__*/_jsx("div", {
-    ref: resizeElementRef,
-    style: RESIZE_ELEMENT_STYLES,
-    "aria-hidden": "true"
+// The legacy implementation is still supported for backwards compatibility.
+// This is achieved by overloading the exported function with both signatures,
+// and detecting which API is being used at runtime.
+function _useResizeObserver(callback, resizeObserverOptions = {}) {
+  const callbackEvent = useEvent(callback);
+  const observedElementRef = useRef();
+  const resizeObserverRef = useRef();
+  return useEvent(element => {
+    var _resizeObserverRef$cu;
+    if (element === observedElementRef.current) {
+      return;
+    }
+    observedElementRef.current = element;
+
+    // Set up `ResizeObserver`.
+    (_resizeObserverRef$cu = resizeObserverRef.current) !== null && _resizeObserverRef$cu !== void 0 ? _resizeObserverRef$cu : resizeObserverRef.current = new ResizeObserver(callbackEvent);
+    const {
+      current: resizeObserver
+    } = resizeObserverRef;
+
+    // Unobserve previous element.
+    if (observedElementRef.current) {
+      resizeObserver.unobserve(observedElementRef.current);
+    }
+
+    // Observe new element.
+    if (element) {
+      resizeObserver.observe(element, resizeObserverOptions);
+    }
   });
 }
-function sizeEquals(a, b) {
-  return a.width === b.width && a.height === b.height;
-}
-const NULL_SIZE = {
-  width: null,
-  height: null
-};
 
 /**
+ * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
+ * for an HTML or SVG element.
+ *
+ * Pass the returned setter as a callback ref to the React element you want
+ * to observe, or use it in layout effects for advanced use cases.
+ *
+ * @example
+ *
+ * ```tsx
+ * const setElement = useResizeObserver(
+ * 	( resizeObserverEntries ) => console.log( resizeObserverEntries ),
+ * 	{ box: 'border-box' }
+ * );
+ * <div ref={ setElement } />;
+ *
+ * // The setter can be used in other ways, for example:
+ * useLayoutEffect( () => {
+ * 	setElement( document.querySelector( `data-element-id="${ elementId }"` ) );
+ * }, [ elementId ] );
+ * ```
+ *
+ * @param callback The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+ * @param options  Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+ */
+
+/**
+ * **This is a legacy API and should not be used.**
+ *
+ * @deprecated Use the other `useResizeObserver` API instead: `const ref = useResizeObserver( ( entries ) => { ... } )`.
+ *
  * Hook which allows to listen to the resize event of any target element when it changes size.
  * _Note: `useResizeObserver` will report `null` sizes until after first render.
  *
@@ -121,20 +94,8 @@ const NULL_SIZE = {
  * };
  * ```
  */
-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 [resizeElement, size];
+export default function useResizeObserver(callback, options = {}) {
+  return callback ? _useResizeObserver(callback, options) : _useLegacyResizeObserver();
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"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":[]}
+{"version":3,"names":["useRef","useEvent","_useLegacyResizeObserver","_useResizeObserver","callback","resizeObserverOptions","callbackEvent","observedElementRef","resizeObserverRef","element","_resizeObserverRef$cu","current","ResizeObserver","resizeObserver","unobserve","observe","useResizeObserver","options"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n/**\n * Internal dependencies\n */\nimport useEvent from '../use-event';\nimport type { ObservedSize } from './_legacy';\nimport _useLegacyResizeObserver from './_legacy';\n/**\n * External dependencies\n */\nimport type { ReactElement } from 'react';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nfunction _useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >();\n\tconst resizeObserverRef = useRef< ResizeObserver >();\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\t\tobservedElementRef.current = element;\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n\n/**\n * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)\n * for an HTML or SVG element.\n *\n * Pass the returned setter as a callback ref to the React element you want\n * to observe, or use it in layout effects for advanced use cases.\n *\n * @example\n *\n * ```tsx\n * const setElement = useResizeObserver(\n * \t( resizeObserverEntries ) => console.log( resizeObserverEntries ),\n * \t{ box: 'border-box' }\n * );\n * <div ref={ setElement } />;\n *\n * // The setter can be used in other ways, for example:\n * useLayoutEffect( () => {\n * \tsetElement( document.querySelector( `data-element-id=\"${ elementId }\"` ) );\n * }, [ elementId ] );\n * ```\n *\n * @param callback The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).\n * @param options  Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.\n */\nexport default function useResizeObserver< T extends Element >(\n\t/**\n\t * The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).\n\t */\n\tcallback: ResizeObserverCallback,\n\t/**\n\t * Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.\n\t */\n\toptions?: ResizeObserverOptions\n): ( element?: T | null ) => void;\n\n/**\n * **This is a legacy API and should not be used.**\n *\n * @deprecated Use the other `useResizeObserver` API instead: `const ref = useResizeObserver( ( entries ) => { ... } )`.\n *\n * Hook which allows to listen to the resize event of any target element when it changes size.\n * _Note: `useResizeObserver` will report `null` sizes until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeObserver(): [ ReactElement, ObservedSize ];\n\nexport default function useResizeObserver< T extends HTMLElement >(\n\tcallback?: ResizeObserverCallback,\n\toptions: ResizeObserverOptions = {}\n): ( ( element?: T | null ) => void ) | [ ReactElement, ObservedSize ] {\n\treturn callback\n\t\t? _useResizeObserver( callback, options )\n\t\t: _useLegacyResizeObserver();\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,oBAAoB;AAC3C;AACA;AACA;AACA,OAAOC,QAAQ,MAAM,cAAc;AAEnC,OAAOC,wBAAwB,MAAM,WAAW;AAChD;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASC,kBAAkBA,CAC1BC,QAAgC,EAChCC,qBAA4C,GAAG,CAAC,CAAC,EAChB;EACjC,MAAMC,aAAa,GAAGL,QAAQ,CAAEG,QAAS,CAAC;EAE1C,MAAMG,kBAAkB,GAAGP,MAAM,CAAa,CAAC;EAC/C,MAAMQ,iBAAiB,GAAGR,MAAM,CAAmB,CAAC;EACpD,OAAOC,QAAQ,CAAIQ,OAAkB,IAAM;IAAA,IAAAC,qBAAA;IAC1C,IAAKD,OAAO,KAAKF,kBAAkB,CAACI,OAAO,EAAG;MAC7C;IACD;IACAJ,kBAAkB,CAACI,OAAO,GAAGF,OAAO;;IAEpC;IACA,CAAAC,qBAAA,GAAAF,iBAAiB,CAACG,OAAO,cAAAD,qBAAA,cAAAA,qBAAA,GAAzBF,iBAAiB,CAACG,OAAO,GAAK,IAAIC,cAAc,CAAEN,aAAc,CAAC;IACjE,MAAM;MAAEK,OAAO,EAAEE;IAAe,CAAC,GAAGL,iBAAiB;;IAErD;IACA,IAAKD,kBAAkB,CAACI,OAAO,EAAG;MACjCE,cAAc,CAACC,SAAS,CAAEP,kBAAkB,CAACI,OAAQ,CAAC;IACvD;;IAEA;IACA,IAAKF,OAAO,EAAG;MACdI,cAAc,CAACE,OAAO,CAAEN,OAAO,EAAEJ,qBAAsB,CAAC;IACzD;EACD,CAAE,CAAC;AACJ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,eAAe,SAASW,iBAAiBA,CACxCZ,QAAiC,EACjCa,OAA8B,GAAG,CAAC,CAAC,EACmC;EACtE,OAAOb,QAAQ,GACZD,kBAAkB,CAAEC,QAAQ,EAAEa,OAAQ,CAAC,GACvCf,wBAAwB,CAAC,CAAC;AAC9B","ignoreList":[]}

package/build-module/index.js

@@ -25,6 +25,7 @@ export { default as useCopyOnClick } from './hooks/use-copy-on-click';
 export { default as useCopyToClipboard } from './hooks/use-copy-to-clipboard';
 export { default as __experimentalUseDialog } from './hooks/use-dialog';
 export { default as useDisabled } from './hooks/use-disabled';
+export { default as useEvent } from './hooks/use-event';
 export { default as __experimentalUseDragging } from './hooks/use-dragging';
 export { default as useFocusOnMount } from './hooks/use-focus-on-mount';
 export { default as __experimentalUseFocusOutside } from './hooks/use-focus-outside';

package/build-module/index.js.map

@@ -1 +1 @@
-{"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","useStateWithHistory","useViewportMatch","useResizeObserver","useAsyncList","useWarnOnChange","useDebounce","useDebouncedInput","useThrottle","useMergeRefs","useRefEffect","__experimentalUseDropZone","useFocusableIframe","__experimentalUseFixedWindowList","useObservableValue"],"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// The `ObservableMap` data structure\nexport * from './utils/observable-map';\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 useStateWithHistory } from './hooks/use-state-with-history';\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 useDebouncedInput } from './hooks/use-debounced-input';\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';\nexport { default as useObservableValue } from './hooks/use-observable-value';\n"],"mappings":"AAAA;AACA,cAAc,uCAAuC;AACrD;AACA,cAAc,kBAAkB;AAChC;AACA,cAAc,kBAAkB;AAChC;AACA,cAAc,wBAAwB;;AAEtC;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,mBAAmB,QAAQ,gCAAgC;AAC/E,SAASxB,OAAO,IAAIyB,gBAAgB,QAAQ,4BAA4B;AACxE,SAASzB,OAAO,IAAI0B,iBAAiB,QAAQ,6BAA6B;AAC1E,SAAS1B,OAAO,IAAI2B,YAAY,QAAQ,wBAAwB;AAChE,SAAS3B,OAAO,IAAI4B,eAAe,QAAQ,4BAA4B;AACvE,SAAS5B,OAAO,IAAI6B,WAAW,QAAQ,sBAAsB;AAC7D,SAAS7B,OAAO,IAAI8B,iBAAiB,QAAQ,6BAA6B;AAC1E,SAAS9B,OAAO,IAAI+B,WAAW,QAAQ,sBAAsB;AAC7D,SAAS/B,OAAO,IAAIgC,YAAY,QAAQ,wBAAwB;AAChE,SAAShC,OAAO,IAAIiC,YAAY,QAAQ,wBAAwB;AAChE,SAASjC,OAAO,IAAIkC,yBAAyB,QAAQ,uBAAuB;AAC5E,SAASlC,OAAO,IAAImC,kBAAkB,QAAQ,8BAA8B;AAC5E,SAASnC,OAAO,IAAIoC,gCAAgC,QAAQ,+BAA+B;AAC3F,SAASpC,OAAO,IAAIqC,kBAAkB,QAAQ,8BAA8B","ignoreList":[]}
+{"version":3,"names":["default","compose","pipe","ifCondition","pure","withGlobalEvents","withInstanceId","withSafeTimeout","withState","useConstrainedTabbing","useCopyOnClick","useCopyToClipboard","__experimentalUseDialog","useDisabled","useEvent","__experimentalUseDragging","useFocusOnMount","__experimentalUseFocusOutside","useFocusReturn","useInstanceId","useIsomorphicLayoutEffect","useKeyboardShortcut","useMediaQuery","usePrevious","useReducedMotion","useStateWithHistory","useViewportMatch","useResizeObserver","useAsyncList","useWarnOnChange","useDebounce","useDebouncedInput","useThrottle","useMergeRefs","useRefEffect","__experimentalUseDropZone","useFocusableIframe","__experimentalUseFixedWindowList","useObservableValue"],"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// The `ObservableMap` data structure\nexport * from './utils/observable-map';\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 useEvent } from './hooks/use-event';\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 useStateWithHistory } from './hooks/use-state-with-history';\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 useDebouncedInput } from './hooks/use-debounced-input';\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';\nexport { default as useObservableValue } from './hooks/use-observable-value';\n"],"mappings":"AAAA;AACA,cAAc,uCAAuC;AACrD;AACA,cAAc,kBAAkB;AAChC;AACA,cAAc,kBAAkB;AAChC;AACA,cAAc,wBAAwB;;AAEtC;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,QAAQ,QAAQ,mBAAmB;AACvD,SAASd,OAAO,IAAIe,yBAAyB,QAAQ,sBAAsB;AAC3E,SAASf,OAAO,IAAIgB,eAAe,QAAQ,4BAA4B;AACvE,SAAShB,OAAO,IAAIiB,6BAA6B,QAAQ,2BAA2B;AACpF,SAASjB,OAAO,IAAIkB,cAAc,QAAQ,0BAA0B;AACpE,SAASlB,OAAO,IAAImB,aAAa,QAAQ,yBAAyB;AAClE,SAASnB,OAAO,IAAIoB,yBAAyB,QAAQ,sCAAsC;AAC3F,SAASpB,OAAO,IAAIqB,mBAAmB,QAAQ,+BAA+B;AAC9E,SAASrB,OAAO,IAAIsB,aAAa,QAAQ,yBAAyB;AAClE,SAAStB,OAAO,IAAIuB,WAAW,QAAQ,sBAAsB;AAC7D,SAASvB,OAAO,IAAIwB,gBAAgB,QAAQ,4BAA4B;AACxE,SAASxB,OAAO,IAAIyB,mBAAmB,QAAQ,gCAAgC;AAC/E,SAASzB,OAAO,IAAI0B,gBAAgB,QAAQ,4BAA4B;AACxE,SAAS1B,OAAO,IAAI2B,iBAAiB,QAAQ,6BAA6B;AAC1E,SAAS3B,OAAO,IAAI4B,YAAY,QAAQ,wBAAwB;AAChE,SAAS5B,OAAO,IAAI6B,eAAe,QAAQ,4BAA4B;AACvE,SAAS7B,OAAO,IAAI8B,WAAW,QAAQ,sBAAsB;AAC7D,SAAS9B,OAAO,IAAI+B,iBAAiB,QAAQ,6BAA6B;AAC1E,SAAS/B,OAAO,IAAIgC,WAAW,QAAQ,sBAAsB;AAC7D,SAAShC,OAAO,IAAIiC,YAAY,QAAQ,wBAAwB;AAChE,SAASjC,OAAO,IAAIkC,YAAY,QAAQ,wBAAwB;AAChE,SAASlC,OAAO,IAAImC,yBAAyB,QAAQ,uBAAuB;AAC5E,SAASnC,OAAO,IAAIoC,kBAAkB,QAAQ,8BAA8B;AAC5E,SAASpC,OAAO,IAAIqC,gCAAgC,QAAQ,+BAA+B;AAC3F,SAASrC,OAAO,IAAIsC,kBAAkB,QAAQ,8BAA8B","ignoreList":[]}

package/build-types/hooks/use-drop-zone/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-drop-zone/index.js"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;GAcG;AACH,wNAXG;IAAwC,eAAe;IACf,UAAU;IACV,WAAW,QAAvC,SAAS,KAAK,IAAI;IACU,WAAW,QAAvC,SAAS,KAAK,IAAI;IACU,UAAU,QAAtC,SAAS,KAAK,IAAI;IACU,WAAW,QAAvC,SAAS,KAAK,IAAI;IACU,SAAS,QAArC,UAAU,KAAK,IAAI;IACS,MAAM,QAAlC,SAAS,KAAK,IAAI;CAE9B,GAAS,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAkMnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-drop-zone/index.js"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;GAcG;AACH,wNAXG;IAAwC,eAAe;IACf,UAAU;IACV,WAAW,QAAvC,SAAS,KAAK,IAAI;IACU,WAAW,QAAvC,SAAS,KAAK,IAAI;IACU,UAAU,QAAtC,SAAS,KAAK,IAAI;IACU,WAAW,QAAvC,SAAS,KAAK,IAAI;IACU,SAAS,QAArC,UAAU,KAAK,IAAI;IACS,MAAM,QAAlC,SAAS,KAAK,IAAI;CAE9B,GAAS,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAoMnD"}

package/build-types/hooks/use-event/index.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Any function.
+ */
+export type AnyFunction = (...args: any) => any;
+/**
+ * Creates a stable callback function that has access to the latest state and
+ * can be used within event handlers and effect callbacks. Throws when used in
+ * the render phase.
+ *
+ * @param callback The callback function to wrap.
+ *
+ * @example
+ *
+ * ```tsx
+ * function Component( props ) {
+ *   const onClick = useEvent( props.onClick );
+ *   useEffect( () => {
+ *     onClick();
+ *     // Won't trigger the effect again when props.onClick is updated.
+ *   }, [ onClick ] );
+ *   // Won't re-render Button when props.onClick is updated (if `Button` is
+ *   // wrapped in `React.memo`).
+ *   return <Button onClick={ onClick } />;
+ * }
+ * ```
+ */
+export default function useEvent<T extends AnyFunction>(
+/**
+ * The callback function to wrap.
+ */
+callback?: T): T;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-event/index.ts"],"names":[],"mappings":"AAKA;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,CAAE,GAAG,IAAI,EAAE,GAAG,KAAM,GAAG,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAE,CAAC,SAAS,WAAW;AACtD;;GAEG;AACH,QAAQ,CAAC,EAAE,CAAC,GAaP,CAAC,CACN"}

package/build-types/hooks/use-focus-on-mount/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAuEnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-on-mount/index.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAqEnD"}

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

@@ -0,0 +1,32 @@
+/**
+ * External dependencies
+ */
+import type { ReactElement } from 'react';
+export type ObservedSize = {
+    width: number | null;
+    height: number | null;
+};
+/**
+ * Hook which allows to listen to the resize event of any target element when it changes size.
+ * _Note: `useResizeObserver` will report `null` sizes until after first render.
+ *
+ * @example
+ *
+ * ```js
+ * const App = () => {
+ * 	const [ resizeListener, sizes ] = useResizeObserver();
+ *
+ * 	return (
+ * 		<div>
+ * 			{ resizeListener }
+ * 			Your content here
+ * 		</div>
+ * 	);
+ * };
+ * ```
+ */
+export default function useLegacyResizeObserver(): [
+    ReactElement,
+    ObservedSize
+];
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/use-resize-observer/_legacy/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAW1C,MAAM,MAAM,YAAY,GAAG;IAC1B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB,CAAC;AAwFF;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,OAAO,UAAU,uBAAuB,IAAI;IAClD,YAAY;IACZ,YAAY;CACZ,CAeA"}

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

@@ -1,12 +1,47 @@
+import type { ObservedSize } from './_legacy';
 /**
  * External dependencies
  */
 import type { ReactElement } from 'react';
-type ObservedSize = {
-    width: number | null;
-    height: number | null;
-};
 /**
+ * Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API)
+ * for an HTML or SVG element.
+ *
+ * Pass the returned setter as a callback ref to the React element you want
+ * to observe, or use it in layout effects for advanced use cases.
+ *
+ * @example
+ *
+ * ```tsx
+ * const setElement = useResizeObserver(
+ * 	( resizeObserverEntries ) => console.log( resizeObserverEntries ),
+ * 	{ box: 'border-box' }
+ * );
+ * <div ref={ setElement } />;
+ *
+ * // The setter can be used in other ways, for example:
+ * useLayoutEffect( () => {
+ * 	setElement( document.querySelector( `data-element-id="${ elementId }"` ) );
+ * }, [ elementId ] );
+ * ```
+ *
+ * @param callback The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+ * @param options  Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+ */
+export default function useResizeObserver<T extends Element>(
+/**
+ * The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+ */
+callback: ResizeObserverCallback, 
+/**
+ * Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+ */
+options?: ResizeObserverOptions): (element?: T | null) => void;
+/**
+ * **This is a legacy API and should not be used.**
+ *
+ * @deprecated Use the other `useResizeObserver` API instead: `const ref = useResizeObserver( ( entries ) => { ... } )`.
+ *
  * Hook which allows to listen to the resize event of any target element when it changes size.
  * _Note: `useResizeObserver` will report `null` sizes until after first render.
  *
@@ -26,5 +61,4 @@ type ObservedSize = {
  * ```
  */
 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,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/index.ts"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAE9C;;GAEG;AACH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAqC1C;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAE,CAAC,SAAS,OAAO;AAC3D;;GAEG;AACH,QAAQ,EAAE,sBAAsB;AAChC;;GAEG;AACH,OAAO,CAAC,EAAE,qBAAqB,GAC7B,CAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,KAAM,IAAI,CAAC;AAElC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,IAAI,CAAE,YAAY,EAAE,YAAY,CAAE,CAAC"}