@wordpress/compose 6.35.0 → 7.0.0

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

@@ -19,7 +19,7 @@ import { debounce } from '../../utils/debounce';
  * including the function to debounce, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/debounce/
+ * @see https://lodash.com/docs/4#debounce
  *
  * @template {(...args: any[]) => void} TFunc
  *

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

@@ -1 +1 @@
-{"version":3,"names":["useMemoOne","useEffect","debounce","useDebounce","fn","wait","options","debounced","cancel"],"sources":["@wordpress/compose/src/hooks/use-debounce/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 { debounce } from '../../utils/debounce';\n\n/**\n * Debounces a function similar to Lodash's `debounce`. A new debounced function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to debounce, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://docs-lodash.com/v4/debounce/\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc}                                          fn        The function to debounce.\n * @param {number}                                         [wait]    The number of milliseconds to delay.\n * @param {import('../../utils/debounce').DebounceOptions} [options] The options object.\n * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Debounced function.\n */\nexport default function useDebounce( fn, wait, options ) {\n\tconst debounced = useMemoOne(\n\t\t() => debounce( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => debounced.cancel(), [ debounced ] );\n\treturn debounced;\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","ignoreList":[]}
+{"version":3,"names":["useMemoOne","useEffect","debounce","useDebounce","fn","wait","options","debounced","cancel"],"sources":["@wordpress/compose/src/hooks/use-debounce/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 { debounce } from '../../utils/debounce';\n\n/**\n * Debounces a function similar to Lodash's `debounce`. A new debounced function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to debounce, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#debounce\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc}                                          fn        The function to debounce.\n * @param {number}                                         [wait]    The number of milliseconds to delay.\n * @param {import('../../utils/debounce').DebounceOptions} [options] The options object.\n * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Debounced function.\n */\nexport default function useDebounce( fn, wait, options ) {\n\tconst debounced = useMemoOne(\n\t\t() => debounce( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => debounced.cancel(), [ debounced ] );\n\treturn debounced;\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","ignoreList":[]}

package/build-module/hooks/use-debounced-input/index.js

@@ -11,8 +11,8 @@ import useDebounce from '../use-debounce';
 /**
  * Helper hook for input fields that need to debounce the value before using it.
  *
- * @param {any} defaultValue The default value to use.
- * @return {[string, Function, string]} The input value, the setter and the debounced input value.
+ * @param defaultValue The default value to use.
+ * @return The input value, the setter and the debounced input value.
  */
 export default function useDebouncedInput(defaultValue = '') {
   const [input, setInput] = useState(defaultValue);
@@ -20,7 +20,7 @@ export default function useDebouncedInput(defaultValue = '') {
   const setDebouncedInput = useDebounce(setDebouncedState, 250);
   useEffect(() => {
     setDebouncedInput(input);
-  }, [input]);
+  }, [input, setDebouncedInput]);
   return [input, setInput, debouncedInput];
 }
 //# sourceMappingURL=index.js.map

package/build-module/hooks/use-debounced-input/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useState","useDebounce","useDebouncedInput","defaultValue","input","setInput","debouncedInput","setDebouncedState","setDebouncedInput"],"sources":["@wordpress/compose/src/hooks/use-debounced-input/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useDebounce from '../use-debounce';\n\n/**\n * Helper hook for input fields that need to debounce the value before using it.\n *\n * @param {any} defaultValue The default value to use.\n * @return {[string, Function, string]} The input value, the setter and the debounced input value.\n */\nexport default function useDebouncedInput( defaultValue = '' ) {\n\tconst [ input, setInput ] = useState( defaultValue );\n\tconst [ debouncedInput, setDebouncedState ] = useState( defaultValue );\n\n\tconst setDebouncedInput = useDebounce( setDebouncedState, 250 );\n\n\tuseEffect( () => {\n\t\tsetDebouncedInput( input );\n\t}, [ input ] );\n\n\treturn [ input, setInput, debouncedInput ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,iBAAiBA,CAAEC,YAAY,GAAG,EAAE,EAAG;EAC9D,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAGL,QAAQ,CAAEG,YAAa,CAAC;EACpD,MAAM,CAAEG,cAAc,EAAEC,iBAAiB,CAAE,GAAGP,QAAQ,CAAEG,YAAa,CAAC;EAEtE,MAAMK,iBAAiB,GAAGP,WAAW,CAAEM,iBAAiB,EAAE,GAAI,CAAC;EAE/DR,SAAS,CAAE,MAAM;IAChBS,iBAAiB,CAAEJ,KAAM,CAAC;EAC3B,CAAC,EAAE,CAAEA,KAAK,CAAG,CAAC;EAEd,OAAO,CAAEA,KAAK,EAAEC,QAAQ,EAAEC,cAAc,CAAE;AAC3C","ignoreList":[]}
+{"version":3,"names":["useEffect","useState","useDebounce","useDebouncedInput","defaultValue","input","setInput","debouncedInput","setDebouncedState","setDebouncedInput"],"sources":["@wordpress/compose/src/hooks/use-debounced-input/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useDebounce from '../use-debounce';\n\n/**\n * Helper hook for input fields that need to debounce the value before using it.\n *\n * @param defaultValue The default value to use.\n * @return The input value, the setter and the debounced input value.\n */\nexport default function useDebouncedInput(\n\tdefaultValue = ''\n): [ string, ( value: string ) => void, string ] {\n\tconst [ input, setInput ] = useState< string >( defaultValue );\n\tconst [ debouncedInput, setDebouncedState ] = useState( defaultValue );\n\n\tconst setDebouncedInput = useDebounce( setDebouncedState, 250 );\n\n\tuseEffect( () => {\n\t\tsetDebouncedInput( input );\n\t}, [ input, setDebouncedInput ] );\n\n\treturn [ input, setInput, debouncedInput ];\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;;AAExD;AACA;AACA;AACA,OAAOC,WAAW,MAAM,iBAAiB;;AAEzC;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,iBAAiBA,CACxCC,YAAY,GAAG,EAAE,EAC+B;EAChD,MAAM,CAAEC,KAAK,EAAEC,QAAQ,CAAE,GAAGL,QAAQ,CAAYG,YAAa,CAAC;EAC9D,MAAM,CAAEG,cAAc,EAAEC,iBAAiB,CAAE,GAAGP,QAAQ,CAAEG,YAAa,CAAC;EAEtE,MAAMK,iBAAiB,GAAGP,WAAW,CAAEM,iBAAiB,EAAE,GAAI,CAAC;EAE/DR,SAAS,CAAE,MAAM;IAChBS,iBAAiB,CAAEJ,KAAM,CAAC;EAC3B,CAAC,EAAE,CAAEA,KAAK,EAAEI,iBAAiB,CAAG,CAAC;EAEjC,OAAO,CAAEJ,KAAK,EAAEC,QAAQ,EAAEC,cAAc,CAAE;AAC3C","ignoreList":[]}

package/build-module/hooks/use-focus-on-mount/index.js

@@ -1,9 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useCallback } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
+
 /**
  * Hook used to focus the first tabbable element on mount.
  *
@@ -48,14 +53,7 @@ export default function useFocusOnMount(focusOnMount = 'firstElement') {
   useEffect(() => {
     focusOnMountRef.current = focusOnMount;
   }, [focusOnMount]);
-  useEffect(() => {
-    return () => {
-      if (timerId.current) {
-        clearTimeout(timerId.current);
-      }
-    };
-  }, []);
-  return useCallback(node => {
+  return useRefEffect(node => {
     var _node$ownerDocument$a;
     if (!node || focusOnMountRef.current === false) {
       return;
@@ -73,6 +71,11 @@ export default function useFocusOnMount(focusOnMount = 'firstElement') {
       return;
     }
     setFocus(node);
+    return () => {
+      if (timerId.current) {
+        clearTimeout(timerId.current);
+      }
+    };
   }, []);
 }
 //# sourceMappingURL=index.js.map

package/build-module/hooks/use-focus-on-mount/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useRef","useEffect","useCallback","focus","useFocusOnMount","focusOnMount","focusOnMountRef","setFocus","target","preventScroll","timerId","current","clearTimeout","node","_node$ownerDocument$a","contains","ownerDocument","activeElement","setTimeout","firstTabbable","tabbable","find"],"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n *     const ref = useFocusOnMount()\n *     return (\n *         <div ref={ ref }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param {HTMLElement} target The DOM element to set focus to.\n\t * @return {void}\n\t */\n\tconst setFocus = ( target ) => {\n\t\ttarget.focus( {\n\t\t\t// When focusing newly mounted dialogs,\n\t\t\t// the position of the popover is often not right on the first render\n\t\t\t// This prevents the layout shifts when focusing the dialogs.\n\t\t\tpreventScroll: true,\n\t\t} );\n\t};\n\n\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerId = useRef();\n\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( timerId.current ) {\n\t\t\t\tclearTimeout( timerId.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\treturn useCallback( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( focusOnMountRef.current === 'firstElement' ) {\n\t\t\ttimerId.current = setTimeout( () => {\n\t\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\n\t\t\t\tif ( firstTabbable ) {\n\t\t\t\t\tsetFocus( firstTabbable );\n\t\t\t\t}\n\t\t\t}, 0 );\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocus( node );\n\t}, [] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,EAAEC,WAAW,QAAQ,oBAAoB;AACnE,SAASC,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,eAAeA,CAAEC,YAAY,GAAG,cAAc,EAAG;EACxE,MAAMC,eAAe,GAAGN,MAAM,CAAEK,YAAa,CAAC;;EAE9C;AACD;AACA;AACA;AACA;AACA;EACC,MAAME,QAAQ,GAAKC,MAAM,IAAM;IAC9BA,MAAM,CAACL,KAAK,CAAE;MACb;MACA;MACA;MACAM,aAAa,EAAE;IAChB,CAAE,CAAC;EACJ,CAAC;;EAED;EACA,MAAMC,OAAO,GAAGV,MAAM,CAAC,CAAC;EAExBC,SAAS,CAAE,MAAM;IAChBK,eAAe,CAACK,OAAO,GAAGN,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErBJ,SAAS,CAAE,MAAM;IAChB,OAAO,MAAM;MACZ,IAAKS,OAAO,CAACC,OAAO,EAAG;QACtBC,YAAY,CAAEF,OAAO,CAACC,OAAQ,CAAC;MAChC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;EAEP,OAAOT,WAAW,CAAIW,IAAI,IAAM;IAAA,IAAAC,qBAAA;IAC/B,IAAK,CAAED,IAAI,IAAIP,eAAe,CAACK,OAAO,KAAK,KAAK,EAAG;MAClD;IACD;IAEA,IAAKE,IAAI,CAACE,QAAQ,EAAAD,qBAAA,GAAED,IAAI,CAACG,aAAa,EAAEC,aAAa,cAAAH,qBAAA,cAAAA,qBAAA,GAAI,IAAK,CAAC,EAAG;MACjE;IACD;IAEA,IAAKR,eAAe,CAACK,OAAO,KAAK,cAAc,EAAG;MACjDD,OAAO,CAACC,OAAO,GAAGO,UAAU,CAAE,MAAM;QACnC,MAAMC,aAAa,GAAGhB,KAAK,CAACiB,QAAQ,CAACC,IAAI,CAAER,IAAK,CAAC,CAAE,CAAC,CAAE;QAEtD,IAAKM,aAAa,EAAG;UACpBZ,QAAQ,CAAEY,aAAc,CAAC;QAC1B;MACD,CAAC,EAAE,CAAE,CAAC;MAEN;IACD;IAEAZ,QAAQ,CAAEM,IAAK,CAAC;EACjB,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
+{"version":3,"names":["useRef","useEffect","focus","useRefEffect","useFocusOnMount","focusOnMount","focusOnMountRef","setFocus","target","preventScroll","timerId","current","node","_node$ownerDocument$a","contains","ownerDocument","activeElement","setTimeout","firstTabbable","tabbable","find","clearTimeout"],"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n *     const ref = useFocusOnMount()\n *     return (\n *         <div ref={ ref }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param {HTMLElement} target The DOM element to set focus to.\n\t * @return {void}\n\t */\n\tconst setFocus = ( target ) => {\n\t\ttarget.focus( {\n\t\t\t// When focusing newly mounted dialogs,\n\t\t\t// the position of the popover is often not right on the first render\n\t\t\t// This prevents the layout shifts when focusing the dialogs.\n\t\t\tpreventScroll: true,\n\t\t} );\n\t};\n\n\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerId = useRef();\n\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useRefEffect( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( focusOnMountRef.current === 'firstElement' ) {\n\t\t\ttimerId.current = setTimeout( () => {\n\t\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\n\t\t\t\tif ( firstTabbable ) {\n\t\t\t\t\tsetFocus( firstTabbable );\n\t\t\t\t}\n\t\t\t}, 0 );\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocus( node );\n\n\t\treturn () => {\n\t\t\tif ( timerId.current ) {\n\t\t\t\tclearTimeout( timerId.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,EAAEC,SAAS,QAAQ,oBAAoB;AACtD,SAASC,KAAK,QAAQ,gBAAgB;;AAEtC;AACA;AACA;AACA,OAAOC,YAAY,MAAM,mBAAmB;;AAE5C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,eAAeA,CAAEC,YAAY,GAAG,cAAc,EAAG;EACxE,MAAMC,eAAe,GAAGN,MAAM,CAAEK,YAAa,CAAC;;EAE9C;AACD;AACA;AACA;AACA;AACA;EACC,MAAME,QAAQ,GAAKC,MAAM,IAAM;IAC9BA,MAAM,CAACN,KAAK,CAAE;MACb;MACA;MACA;MACAO,aAAa,EAAE;IAChB,CAAE,CAAC;EACJ,CAAC;;EAED;EACA,MAAMC,OAAO,GAAGV,MAAM,CAAC,CAAC;EAExBC,SAAS,CAAE,MAAM;IAChBK,eAAe,CAACK,OAAO,GAAGN,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,OAAOF,YAAY,CAAIS,IAAI,IAAM;IAAA,IAAAC,qBAAA;IAChC,IAAK,CAAED,IAAI,IAAIN,eAAe,CAACK,OAAO,KAAK,KAAK,EAAG;MAClD;IACD;IAEA,IAAKC,IAAI,CAACE,QAAQ,EAAAD,qBAAA,GAAED,IAAI,CAACG,aAAa,EAAEC,aAAa,cAAAH,qBAAA,cAAAA,qBAAA,GAAI,IAAK,CAAC,EAAG;MACjE;IACD;IAEA,IAAKP,eAAe,CAACK,OAAO,KAAK,cAAc,EAAG;MACjDD,OAAO,CAACC,OAAO,GAAGM,UAAU,CAAE,MAAM;QACnC,MAAMC,aAAa,GAAGhB,KAAK,CAACiB,QAAQ,CAACC,IAAI,CAAER,IAAK,CAAC,CAAE,CAAC,CAAE;QAEtD,IAAKM,aAAa,EAAG;UACpBX,QAAQ,CAAEW,aAAc,CAAC;QAC1B;MACD,CAAC,EAAE,CAAE,CAAC;MAEN;IACD;IAEAX,QAAQ,CAAEK,IAAK,CAAC;IAEhB,OAAO,MAAM;MACZ,IAAKF,OAAO,CAACC,OAAO,EAAG;QACtBU,YAAY,CAAEX,OAAO,CAACC,OAAQ,CAAC;MAChC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -7,6 +6,7 @@ import { createElement } from "react";
  * WordPress dependencies
  */
 import { useMemo, useRef, useCallback, useEffect, useState } from '@wordpress/element';
+import { jsx as _jsx } from "react/jsx-runtime";
 // This of course could've been more streamlined with internal state instead of
 // refs, but then host hooks / components could not opt out of renders.
 // This could've been exported to its own module, but the current build doesn't
@@ -225,7 +225,7 @@ export default function useResizeAware() {
       height: height !== null && height !== void 0 ? height : null
     };
   }, [width, height]);
-  const resizeListener = createElement("div", {
+  const resizeListener = /*#__PURE__*/_jsx("div", {
     style: {
       position: 'absolute',
       top: 0,

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

@@ -1 +1 @@
-{"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 { ReactElement, RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t  // @ts-ignore\n\t\t  entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\tdidUnmount.current = false;\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeAware(): [\n\tReactElement,\n\t{ width: number | null; height: number | null },\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useMemo","useRef","useCallback","useEffect","useState","jsx","_jsx","useResolvedElement","subscriber","refOrElement","callbackRefElement","lastReportRef","cleanupRef","callSubscriber","element","current","HTMLElement","reporter","extractSize","entry","boxProp","sizeType","contentRect","undefined","useResizeObserver","opts","onResize","onResizeRef","round","Math","resizeObserverRef","size","setSize","width","height","didUnmount","previous","refCallback","box","instance","ResizeObserver","entries","reportedWidth","reportedHeight","newWidth","newHeight","newSize","observe","unobserve","ref","useResizeAware","sizes","resizeListener","style","position","top","left","right","bottom","pointerEvents","opacity","overflow","zIndex"],"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactElement, RefCallback, RefObject } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tuseMemo,\n\tuseRef,\n\tuseCallback,\n\tuseEffect,\n\tuseState,\n} from '@wordpress/element';\n\ntype SubscriberCleanup = () => void;\ntype SubscriberResponse = SubscriberCleanup | void;\n\n// This of course could've been more streamlined with internal state instead of\n// refs, but then host hooks / components could not opt out of renders.\n// This could've been exported to its own module, but the current build doesn't\n// seem to work with module imports and I had no more time to spend on this...\nfunction useResolvedElement< T extends HTMLElement >(\n\tsubscriber: ( element: T ) => SubscriberResponse,\n\trefOrElement?: T | RefObject< T > | null\n): RefCallback< T > {\n\tconst callbackRefElement = useRef< T | null >( null );\n\tconst lastReportRef = useRef< {\n\t\treporter: () => void;\n\t\telement: T | null;\n\t} | null >( null );\n\tconst cleanupRef = useRef< SubscriberResponse | null >();\n\n\tconst callSubscriber = useCallback( () => {\n\t\tlet element = null;\n\t\tif ( callbackRefElement.current ) {\n\t\t\telement = callbackRefElement.current;\n\t\t} else if ( refOrElement ) {\n\t\t\tif ( refOrElement instanceof HTMLElement ) {\n\t\t\t\telement = refOrElement;\n\t\t\t} else {\n\t\t\t\telement = refOrElement.current;\n\t\t\t}\n\t\t}\n\n\t\tif (\n\t\t\tlastReportRef.current &&\n\t\t\tlastReportRef.current.element === element &&\n\t\t\tlastReportRef.current.reporter === callSubscriber\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t\t// Making sure the cleanup is not called accidentally multiple times.\n\t\t\tcleanupRef.current = null;\n\t\t}\n\t\tlastReportRef.current = {\n\t\t\treporter: callSubscriber,\n\t\t\telement,\n\t\t};\n\n\t\t// Only calling the subscriber, if there's an actual element to report.\n\t\tif ( element ) {\n\t\t\tcleanupRef.current = subscriber( element );\n\t\t}\n\t}, [ refOrElement, subscriber ] );\n\n\t// On each render, we check whether a ref changed, or if we got a new raw\n\t// element.\n\tuseEffect( () => {\n\t\t// With this we're *technically* supporting cases where ref objects' current value changes, but only if there's a\n\t\t// render accompanying that change as well.\n\t\t// To guarantee we always have the right element, one must use the ref callback provided instead, but we support\n\t\t// RefObjects to make the hook API more convenient in certain cases.\n\t\tcallSubscriber();\n\t}, [ callSubscriber ] );\n\n\treturn useCallback< RefCallback< T > >(\n\t\t( element ) => {\n\t\t\tcallbackRefElement.current = element;\n\t\t\tcallSubscriber();\n\t\t},\n\t\t[ callSubscriber ]\n\t);\n}\n\ntype ObservedSize = {\n\twidth: number | undefined;\n\theight: number | undefined;\n};\n\ntype ResizeHandler = ( size: ObservedSize ) => void;\n\ntype HookResponse< T extends HTMLElement > = {\n\tref: RefCallback< T >;\n} & ObservedSize;\n\n// Declaring my own type here instead of using the one provided by TS (available since 4.2.2), because this way I'm not\n// forcing consumers to use a specific TS version.\ntype ResizeObserverBoxOptions =\n\t| 'border-box'\n\t| 'content-box'\n\t| 'device-pixel-content-box';\n\ndeclare global {\n\tinterface ResizeObserverEntry {\n\t\treadonly devicePixelContentBoxSize: ReadonlyArray< ResizeObserverSize >;\n\t}\n}\n\n// We're only using the first element of the size sequences, until future versions of the spec solidify on how\n// exactly it'll be used for fragments in multi-column scenarios:\n// From the spec:\n// > The box size properties are exposed as FrozenArray in order to support elements that have multiple fragments,\n// > which occur in multi-column scenarios. However the current definitions of content rect and border box do not\n// > mention how those boxes are affected by multi-column layout. In this spec, there will only be a single\n// > ResizeObserverSize returned in the FrozenArray, which will correspond to the dimensions of the first column.\n// > A future version of this spec will extend the returned FrozenArray to contain the per-fragment size information.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-entry-interface)\n//\n// Also, testing these new box options revealed that in both Chrome and FF everything is returned in the callback,\n// regardless of the \"box\" option.\n// The spec states the following on this:\n// > This does not have any impact on which box dimensions are returned to the defined callback when the event\n// > is fired, it solely defines which box the author wishes to observe layout changes on.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// I'm not exactly clear on what this means, especially when you consider a later section stating the following:\n// > This section is non-normative. An author may desire to observe more than one CSS box.\n// > In this case, author will need to use multiple ResizeObservers.\n// (https://drafts.csswg.org/resize-observer/#resize-observer-interface)\n// Which is clearly not how current browser implementations behave, and seems to contradict the previous quote.\n// For this reason I decided to only return the requested size,\n// even though it seems we have access to results for all box types.\n// This also means that we get to keep the current api, being able to return a simple { width, height } pair,\n// regardless of box option.\nconst extractSize = (\n\tentry: ResizeObserverEntry,\n\tboxProp: 'borderBoxSize' | 'contentBoxSize' | 'devicePixelContentBoxSize',\n\tsizeType: keyof ResizeObserverSize\n): number | undefined => {\n\tif ( ! entry[ boxProp ] ) {\n\t\tif ( boxProp === 'contentBoxSize' ) {\n\t\t\t// The dimensions in `contentBoxSize` and `contentRect` are equivalent according to the spec.\n\t\t\t// See the 6th step in the description for the RO algorithm:\n\t\t\t// https://drafts.csswg.org/resize-observer/#create-and-populate-resizeobserverentry-h\n\t\t\t// > Set this.contentRect to logical this.contentBoxSize given target and observedBox of \"content-box\".\n\t\t\t// In real browser implementations of course these objects differ, but the width/height values should be equivalent.\n\t\t\treturn entry.contentRect[\n\t\t\t\tsizeType === 'inlineSize' ? 'width' : 'height'\n\t\t\t];\n\t\t}\n\n\t\treturn undefined;\n\t}\n\n\t// A couple bytes smaller than calling Array.isArray() and just as effective here.\n\treturn entry[ boxProp ][ 0 ]\n\t\t? entry[ boxProp ][ 0 ][ sizeType ]\n\t\t: // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current\n\t\t  // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.\n\t\t  // @ts-ignore\n\t\t  entry[ boxProp ][ sizeType ];\n};\n\ntype RoundingFunction = ( n: number ) => number;\n\nfunction useResizeObserver< T extends HTMLElement >(\n\topts: {\n\t\tref?: RefObject< T > | T | null | undefined;\n\t\tonResize?: ResizeHandler;\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t} = {}\n): HookResponse< T > {\n\t// Saving the callback as a ref. With this, I don't need to put onResize in the\n\t// effect dep array, and just passing in an anonymous function without memoising\n\t// will not reinstantiate the hook's ResizeObserver.\n\tconst onResize = opts.onResize;\n\tconst onResizeRef = useRef< ResizeHandler | undefined >( undefined );\n\tonResizeRef.current = onResize;\n\tconst round = opts.round || Math.round;\n\n\t// Using a single instance throughout the hook's lifetime\n\tconst resizeObserverRef = useRef< {\n\t\tbox?: ResizeObserverBoxOptions;\n\t\tround?: RoundingFunction;\n\t\tinstance: ResizeObserver;\n\t} >();\n\n\tconst [ size, setSize ] = useState< {\n\t\twidth?: number;\n\t\theight?: number;\n\t} >( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// In certain edge cases the RO might want to report a size change just after\n\t// the component unmounted.\n\tconst didUnmount = useRef( false );\n\tuseEffect( () => {\n\t\tdidUnmount.current = false;\n\t\treturn () => {\n\t\t\tdidUnmount.current = true;\n\t\t};\n\t}, [] );\n\n\t// Using a ref to track the previous width / height to avoid unnecessary renders.\n\tconst previous: {\n\t\tcurrent: {\n\t\t\twidth?: number;\n\t\t\theight?: number;\n\t\t};\n\t} = useRef( {\n\t\twidth: undefined,\n\t\theight: undefined,\n\t} );\n\n\t// This block is kinda like a useEffect, only it's called whenever a new\n\t// element could be resolved based on the ref option. It also has a cleanup\n\t// function.\n\tconst refCallback = useResolvedElement< T >(\n\t\tuseCallback(\n\t\t\t( element ) => {\n\t\t\t\t// We only use a single Resize Observer instance, and we're instantiating it on demand, only once there's something to observe.\n\t\t\t\t// This instance is also recreated when the `box` option changes, so that a new observation is fired if there was a previously observed element with a different box option.\n\t\t\t\tif (\n\t\t\t\t\t! resizeObserverRef.current ||\n\t\t\t\t\tresizeObserverRef.current.box !== opts.box ||\n\t\t\t\t\tresizeObserverRef.current.round !== round\n\t\t\t\t) {\n\t\t\t\t\tresizeObserverRef.current = {\n\t\t\t\t\t\tbox: opts.box,\n\t\t\t\t\t\tround,\n\t\t\t\t\t\tinstance: new ResizeObserver( ( entries ) => {\n\t\t\t\t\t\t\tconst entry = entries[ 0 ];\n\n\t\t\t\t\t\t\tlet boxProp:\n\t\t\t\t\t\t\t\t| 'borderBoxSize'\n\t\t\t\t\t\t\t\t| 'contentBoxSize'\n\t\t\t\t\t\t\t\t| 'devicePixelContentBoxSize' = 'borderBoxSize';\n\t\t\t\t\t\t\tif ( opts.box === 'border-box' ) {\n\t\t\t\t\t\t\t\tboxProp = 'borderBoxSize';\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tboxProp =\n\t\t\t\t\t\t\t\t\topts.box === 'device-pixel-content-box'\n\t\t\t\t\t\t\t\t\t\t? 'devicePixelContentBoxSize'\n\t\t\t\t\t\t\t\t\t\t: 'contentBoxSize';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\tconst reportedWidth = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'inlineSize'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\tconst reportedHeight = extractSize(\n\t\t\t\t\t\t\t\tentry,\n\t\t\t\t\t\t\t\tboxProp,\n\t\t\t\t\t\t\t\t'blockSize'\n\t\t\t\t\t\t\t);\n\n\t\t\t\t\t\t\tconst newWidth = reportedWidth\n\t\t\t\t\t\t\t\t? round( reportedWidth )\n\t\t\t\t\t\t\t\t: undefined;\n\t\t\t\t\t\t\tconst newHeight = reportedHeight\n\t\t\t\t\t\t\t\t? round( reportedHeight )\n\t\t\t\t\t\t\t\t: undefined;\n\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\tprevious.current.width !== newWidth ||\n\t\t\t\t\t\t\t\tprevious.current.height !== newHeight\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tconst newSize = {\n\t\t\t\t\t\t\t\t\twidth: newWidth,\n\t\t\t\t\t\t\t\t\theight: newHeight,\n\t\t\t\t\t\t\t\t};\n\t\t\t\t\t\t\t\tprevious.current.width = newWidth;\n\t\t\t\t\t\t\t\tprevious.current.height = newHeight;\n\t\t\t\t\t\t\t\tif ( onResizeRef.current ) {\n\t\t\t\t\t\t\t\t\tonResizeRef.current( newSize );\n\t\t\t\t\t\t\t\t} else if ( ! didUnmount.current ) {\n\t\t\t\t\t\t\t\t\tsetSize( newSize );\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} ),\n\t\t\t\t\t};\n\t\t\t\t}\n\n\t\t\t\tresizeObserverRef.current.instance.observe( element, {\n\t\t\t\t\tbox: opts.box,\n\t\t\t\t} );\n\n\t\t\t\treturn () => {\n\t\t\t\t\tif ( resizeObserverRef.current ) {\n\t\t\t\t\t\tresizeObserverRef.current.instance.unobserve( element );\n\t\t\t\t\t}\n\t\t\t\t};\n\t\t\t},\n\t\t\t[ opts.box, round ]\n\t\t),\n\t\topts.ref\n\t);\n\n\treturn useMemo(\n\t\t() => ( {\n\t\t\tref: refCallback,\n\t\t\twidth: size.width,\n\t\t\theight: size.height,\n\t\t} ),\n\t\t[ refCallback, size ? size.width : null, size ? size.height : null ]\n\t);\n}\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n * _Note: `useResizeObserver` will report `null` until after first render.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<div>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</div>\n * \t);\n * };\n * ```\n */\nexport default function useResizeAware(): [\n\tReactElement,\n\t{ width: number | null; height: number | null },\n] {\n\tconst { ref, width, height } = useResizeObserver();\n\tconst sizes = useMemo( () => {\n\t\treturn { width: width ?? null, height: height ?? null };\n\t}, [ width, height ] );\n\tconst resizeListener = (\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\tposition: 'absolute',\n\t\t\t\ttop: 0,\n\t\t\t\tleft: 0,\n\t\t\t\tright: 0,\n\t\t\t\tbottom: 0,\n\t\t\t\tpointerEvents: 'none',\n\t\t\t\topacity: 0,\n\t\t\t\toverflow: 'hidden',\n\t\t\t\tzIndex: -1,\n\t\t\t} }\n\t\t\taria-hidden=\"true\"\n\t\t\tref={ ref }\n\t\t/>\n\t);\n\treturn [ resizeListener, sizes ];\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,4 +1,3 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
@@ -26,6 +25,7 @@ import { useState, useCallback } from '@wordpress/element';
  * };
  * ```
  */
+import { jsx as _jsx } from "react/jsx-runtime";
 const useResizeObserver = () => {
   const [measurements, setMeasurements] = useState(null);
   const onLayout = useCallback(({
@@ -45,7 +45,7 @@ const useResizeObserver = () => {
       return prevState;
     });
   }, []);
-  const observer = createElement(View, {
+  const observer = /*#__PURE__*/_jsx(View, {
     testID: "resize-observer",
     style: StyleSheet.absoluteFill,
     onLayout: onLayout

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

@@ -1 +1 @@
-{"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","ignoreList":[]}
+{"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/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-throttle/index.js

@@ -19,7 +19,7 @@ import { throttle } from '../../utils/throttle';
  * including the function to throttle, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/throttle/
+ * @see https://lodash.com/docs/4#throttle
  *
  * @template {(...args: any[]) => void} TFunc
  *

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

@@ -1 +1 @@
-{"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","ignoreList":[]}
+{"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://lodash.com/docs/4#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","ignoreList":[]}

package/build-types/higher-order/compose.d.ts

@@ -4,7 +4,7 @@
  *
  * This is inspired by `lodash`'s `flowRight` function.
  *
- * @see https://docs-lodash.com/v4/flow-right/
+ * @see https://lodash.com/docs/4#flow-right
  */
 declare const compose: (...funcs: Function[]) => (...args: unknown[]) => unknown;
 export default compose;

package/build-types/higher-order/pipe.d.ts

@@ -42,7 +42,7 @@
  *
  * Allows to choose whether to perform left-to-right or right-to-left composition.
  *
- * @see https://docs-lodash.com/v4/flow/
+ * @see https://lodash.com/docs/4#flow
  *
  * @param {boolean} reverse True if right-to-left, false for left-to-right composition.
  */
@@ -53,7 +53,7 @@ declare const basePipe: (reverse?: boolean) => (...funcs: Function[]) => (...arg
  *
  * This is inspired by `lodash`'s `flow` function.
  *
- * @see https://docs-lodash.com/v4/flow/
+ * @see https://lodash.com/docs/4#flow
  */
 declare const pipe: (...funcs: Function[]) => (...args: unknown[]) => unknown;
 export { basePipe };

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

@@ -4,7 +4,7 @@
  * including the function to debounce, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/debounce/
+ * @see https://lodash.com/docs/4#debounce
  *
  * @template {(...args: any[]) => void} TFunc
  *

package/build-types/hooks/use-debounced-input/index.d.ts

@@ -1,8 +1,8 @@
 /**
  * Helper hook for input fields that need to debounce the value before using it.
  *
- * @param {any} defaultValue The default value to use.
- * @return {[string, Function, string]} The input value, the setter and the debounced input value.
+ * @param defaultValue The default value to use.
+ * @return The input value, the setter and the debounced input value.
  */
-export default function useDebouncedInput(defaultValue?: any): [string, Function, string];
+export default function useDebouncedInput(defaultValue?: string): [string, (value: string) => void, string];
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-debounced-input/index.js"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,yDAHW,GAAG,GACF,CAAC,MAAM,YAAY,MAAM,CAAC,CAarC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-debounced-input/index.ts"],"names":[],"mappings":"AAUA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CACxC,YAAY,SAAK,GACf,CAAE,MAAM,EAAE,CAAE,KAAK,EAAE,MAAM,KAAM,IAAI,EAAE,MAAM,CAAE,CAW/C"}

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":"AAMA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,uDAlBW,OAAO,GAAG,cAAc,GACvB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAyEnD"}
+{"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"}

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

@@ -4,7 +4,7 @@
  * including the function to throttle, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/throttle/
+ * @see https://lodash.com/docs/4#throttle
  *
  * @template {(...args: any[]) => void} TFunc
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "6.35.0",
+	"version": "7.0.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -21,7 +21,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -31,13 +32,13 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.58.0",
-		"@wordpress/dom": "^3.58.0",
-		"@wordpress/element": "^5.35.0",
-		"@wordpress/is-shallow-equal": "^4.58.0",
-		"@wordpress/keycodes": "^3.58.0",
-		"@wordpress/priority-queue": "^2.58.0",
-		"@wordpress/undo-manager": "^0.18.0",
+		"@wordpress/deprecated": "^4.0.0",
+		"@wordpress/dom": "^4.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/is-shallow-equal": "^5.0.0",
+		"@wordpress/keycodes": "^4.0.0",
+		"@wordpress/priority-queue": "^3.0.0",
+		"@wordpress/undo-manager": "^1.0.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.11",
 		"mousetrap": "^1.6.5",
@@ -49,5 +50,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

package/src/higher-order/compose.ts

@@ -9,7 +9,7 @@ import { basePipe } from './pipe';
  *
  * This is inspired by `lodash`'s `flowRight` function.
  *
- * @see https://docs-lodash.com/v4/flow-right/
+ * @see https://lodash.com/docs/4#flow-right
  */
 const compose = basePipe( true );
 

package/src/higher-order/pipe.ts

@@ -43,7 +43,7 @@
  *
  * Allows to choose whether to perform left-to-right or right-to-left composition.
  *
- * @see https://docs-lodash.com/v4/flow/
+ * @see https://lodash.com/docs/4#flow
  *
  * @param {boolean} reverse True if right-to-left, false for left-to-right composition.
  */
@@ -67,7 +67,7 @@ const basePipe =
  *
  * This is inspired by `lodash`'s `flow` function.
  *
- * @see https://docs-lodash.com/v4/flow/
+ * @see https://lodash.com/docs/4#flow
  */
 const pipe = basePipe();
 

package/src/hooks/use-debounce/index.js

@@ -19,7 +19,7 @@ import { debounce } from '../../utils/debounce';
  * including the function to debounce, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/debounce/
+ * @see https://lodash.com/docs/4#debounce
  *
  * @template {(...args: any[]) => void} TFunc
  *

package/src/hooks/use-debounced-input/{index.js → index.ts}

@@ -11,18 +11,20 @@ import useDebounce from '../use-debounce';
 /**
  * Helper hook for input fields that need to debounce the value before using it.
  *
- * @param {any} defaultValue The default value to use.
- * @return {[string, Function, string]} The input value, the setter and the debounced input value.
+ * @param defaultValue The default value to use.
+ * @return The input value, the setter and the debounced input value.
  */
-export default function useDebouncedInput( defaultValue = '' ) {
-	const [ input, setInput ] = useState( defaultValue );
+export default function useDebouncedInput(
+	defaultValue = ''
+): [ string, ( value: string ) => void, string ] {
+	const [ input, setInput ] = useState< string >( defaultValue );
 	const [ debouncedInput, setDebouncedState ] = useState( defaultValue );
 
 	const setDebouncedInput = useDebounce( setDebouncedState, 250 );
 
 	useEffect( () => {
 		setDebouncedInput( input );
-	}, [ input ] );
+	}, [ input, setDebouncedInput ] );
 
 	return [ input, setInput, debouncedInput ];
 }

package/src/hooks/use-focus-on-mount/index.js

@@ -1,9 +1,14 @@
 /**
  * WordPress dependencies
  */
-import { useRef, useEffect, useCallback } from '@wordpress/element';
+import { useRef, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
+/**
+ * Internal dependencies
+ */
+import useRefEffect from '../use-ref-effect';
+
 /**
  * Hook used to focus the first tabbable element on mount.
  *
@@ -50,15 +55,7 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 		focusOnMountRef.current = focusOnMount;
 	}, [ focusOnMount ] );
 
-	useEffect( () => {
-		return () => {
-			if ( timerId.current ) {
-				clearTimeout( timerId.current );
-			}
-		};
-	}, [] );
-
-	return useCallback( ( node ) => {
+	return useRefEffect( ( node ) => {
 		if ( ! node || focusOnMountRef.current === false ) {
 			return;
 		}
@@ -80,5 +77,11 @@ export default function useFocusOnMount( focusOnMount = 'firstElement' ) {
 		}
 
 		setFocus( node );
+
+		return () => {
+			if ( timerId.current ) {
+				clearTimeout( timerId.current );
+			}
+		};
 	}, [] );
 }

package/src/hooks/use-throttle/index.js

@@ -19,7 +19,7 @@ import { throttle } from '../../utils/throttle';
  * including the function to throttle, so please wrap functions created on
  * render in components in `useCallback`.
  *
- * @see https://docs-lodash.com/v4/throttle/
+ * @see https://lodash.com/docs/4#throttle
  *
  * @template {(...args: any[]) => void} TFunc
  *