@wordpress/compose 6.10.0 → 6.12.0

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

@@ -110,8 +110,7 @@ const extractSize = (entry, boxProp, sizeType) => {
   entry[boxProp][sizeType];
 };
 
-function useResizeObserver() {
-  let opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+function useResizeObserver(opts = {}) {
   // Saving the callback as a ref. With this, I don't need to put onResize in the
   // effect dep array, and just passing in an anonymous function without memoising
   // will not reinstantiate the hook's ResizeObserver.

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

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

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

@@ -31,10 +31,9 @@ import { useState, useCallback } from '@wordpress/element';
 
 const useResizeObserver = () => {
   const [measurements, setMeasurements] = useState(null);
-  const onLayout = useCallback(_ref => {
-    let {
-      nativeEvent
-    } = _ref;
+  const onLayout = useCallback(({
+    nativeEvent
+  }) => {
     const {
       width,
       height

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","absoluteFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,oBAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,iBAAiB,GAAG,MAAM;AAC/B,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCJ,QAAQ,CAAE,IAAF,CAAlD;AAEA,QAAMK,QAAQ,GAAGJ,WAAW,CAAE,QAAuB;AAAA,QAArB;AAAEK,MAAAA;AAAF,KAAqB;AACpD,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoBF,WAAW,CAACG,MAAtC;AACAL,IAAAA,eAAe,CAAIM,SAAF,IAAiB;AACjC,UACC,CAAEA,SAAF,IACAA,SAAS,CAACH,KAAV,KAAoBA,KADpB,IAEAG,SAAS,CAACF,MAAV,KAAqBA,MAHtB,EAIE;AACD,eAAO;AACND,UAAAA,KAAK,EAAEI,IAAI,CAACC,KAAL,CAAYL,KAAZ,CADD;AAENC,UAAAA,MAAM,EAAEG,IAAI,CAACC,KAAL,CAAYJ,MAAZ;AAFF,SAAP;AAIA;;AACD,aAAOE,SAAP;AACA,KAZc,CAAf;AAaA,GAf2B,EAezB,EAfyB,CAA5B;AAiBA,QAAMG,QAAQ,GACb,cAAC,IAAD;AACC,IAAA,MAAM,EAAC,iBADR;AAEC,IAAA,KAAK,EAAGd,UAAU,CAACe,YAFpB;AAGC,IAAA,QAAQ,EAAGT;AAHZ,IADD;AAQA,SAAO,CAAEQ,QAAF,EAAYV,YAAZ,CAAP;AACA,CA7BD;;AA+BA,eAAeD,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, StyleSheet } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<View>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</View>\n * \t);\n * };\n * ```\n *\n */\nconst useResizeObserver = () => {\n\tconst [ measurements, setMeasurements ] = useState( null );\n\n\tconst onLayout = useCallback( ( { nativeEvent } ) => {\n\t\tconst { width, height } = nativeEvent.layout;\n\t\tsetMeasurements( ( prevState ) => {\n\t\t\tif (\n\t\t\t\t! prevState ||\n\t\t\t\tprevState.width !== width ||\n\t\t\t\tprevState.height !== height\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\twidth: Math.floor( width ),\n\t\t\t\t\theight: Math.floor( height ),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevState;\n\t\t} );\n\t}, [] );\n\n\tconst observer = (\n\t\t<View\n\t\t\ttestID=\"resize-observer\"\n\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\tonLayout={ onLayout }\n\t\t/>\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-resize-observer/index.native.js"],"names":["View","StyleSheet","useState","useCallback","useResizeObserver","measurements","setMeasurements","onLayout","nativeEvent","width","height","layout","prevState","Math","floor","observer","absoluteFill"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,IAAT,EAAeC,UAAf,QAAiC,cAAjC;AACA;AACA;AACA;;AACA,SAASC,QAAT,EAAmBC,WAAnB,QAAsC,oBAAtC;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,iBAAiB,GAAG,MAAM;AAC/B,QAAM,CAAEC,YAAF,EAAgBC,eAAhB,IAAoCJ,QAAQ,CAAE,IAAF,CAAlD;AAEA,QAAMK,QAAQ,GAAGJ,WAAW,CAAE,CAAE;AAAEK,IAAAA;AAAF,GAAF,KAAuB;AACpD,UAAM;AAAEC,MAAAA,KAAF;AAASC,MAAAA;AAAT,QAAoBF,WAAW,CAACG,MAAtC;AACAL,IAAAA,eAAe,CAAIM,SAAF,IAAiB;AACjC,UACC,CAAEA,SAAF,IACAA,SAAS,CAACH,KAAV,KAAoBA,KADpB,IAEAG,SAAS,CAACF,MAAV,KAAqBA,MAHtB,EAIE;AACD,eAAO;AACND,UAAAA,KAAK,EAAEI,IAAI,CAACC,KAAL,CAAYL,KAAZ,CADD;AAENC,UAAAA,MAAM,EAAEG,IAAI,CAACC,KAAL,CAAYJ,MAAZ;AAFF,SAAP;AAIA;;AACD,aAAOE,SAAP;AACA,KAZc,CAAf;AAaA,GAf2B,EAezB,EAfyB,CAA5B;AAiBA,QAAMG,QAAQ,GACb,cAAC,IAAD;AACC,IAAA,MAAM,EAAC,iBADR;AAEC,IAAA,KAAK,EAAGd,UAAU,CAACe,YAFpB;AAGC,IAAA,QAAQ,EAAGT;AAHZ,IADD;AAQA,SAAO,CAAEQ,QAAF,EAAYV,YAAZ,CAAP;AACA,CA7BD;;AA+BA,eAAeD,iBAAf","sourcesContent":["/**\n * External dependencies\n */\nimport { View, StyleSheet } from 'react-native';\n/**\n * WordPress dependencies\n */\nimport { useState, useCallback } from '@wordpress/element';\n\n/**\n * Hook which allows to listen the resize event of any target element when it changes sizes.\n *\n * @example\n *\n * ```js\n * const App = () => {\n * \tconst [ resizeListener, sizes ] = useResizeObserver();\n *\n * \treturn (\n * \t\t<View>\n * \t\t\t{ resizeListener }\n * \t\t\tYour content here\n * \t\t</View>\n * \t);\n * };\n * ```\n *\n */\nconst useResizeObserver = () => {\n\tconst [ measurements, setMeasurements ] = useState( null );\n\n\tconst onLayout = useCallback( ( { nativeEvent } ) => {\n\t\tconst { width, height } = nativeEvent.layout;\n\t\tsetMeasurements( ( prevState ) => {\n\t\t\tif (\n\t\t\t\t! prevState ||\n\t\t\t\tprevState.width !== width ||\n\t\t\t\tprevState.height !== height\n\t\t\t) {\n\t\t\t\treturn {\n\t\t\t\t\twidth: Math.floor( width ),\n\t\t\t\t\theight: Math.floor( height ),\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn prevState;\n\t\t} );\n\t}, [] );\n\n\tconst observer = (\n\t\t<View\n\t\t\ttestID=\"resize-observer\"\n\t\t\tstyle={ StyleSheet.absoluteFill }\n\t\t\tonLayout={ onLayout }\n\t\t/>\n\t);\n\n\treturn [ observer, measurements ];\n};\n\nexport default useResizeObserver;\n"]}

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

@@ -70,8 +70,7 @@ null);
  * @return {boolean} Whether viewport matches query.
  */
 
-const useViewportMatch = function (breakpoint) {
-  let operator = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '>=';
+const useViewportMatch = (breakpoint, operator = '>=') => {
   const simulatedWidth = useContext(ViewportMatchWidthContext);
   const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
   const mediaQueryResult = useMediaQuery(mediaQuery || undefined);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/hooks/use-viewport-match/index.js"],"names":["createContext","useContext","useMediaQuery","BREAKPOINTS","huge","wide","large","medium","small","mobile","CONDITIONS","OPERATOR_EVALUATORS","breakpointValue","width","ViewportMatchWidthContext","useViewportMatch","breakpoint","operator","simulatedWidth","mediaQuery","mediaQueryResult","undefined","__experimentalWidthProvider","Provider"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,oBAA1C;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,oBAA1B;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,WAAW,GAAG;AACnBC,EAAAA,IAAI,EAAE,IADa;AAEnBC,EAAAA,IAAI,EAAE,IAFa;AAGnBC,EAAAA,KAAK,EAAE,GAHY;AAInBC,EAAAA,MAAM,EAAE,GAJW;AAKnBC,EAAAA,KAAK,EAAE,GALY;AAMnBC,EAAAA,MAAM,EAAE;AANW,CAApB;AASA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,UAAU,GAAG;AAClB,QAAM,WADY;AAElB,OAAK;AAFa,CAAnB;AAKA;AACA;AACA;AACA;AACA;;AACA,MAAMC,mBAAmB,GAAG;AAC3B,QAAM,CAAEC,eAAF,EAAmBC,KAAnB,KAA8BA,KAAK,IAAID,eADlB;AAE3B,OAAK,CAAEA,eAAF,EAAmBC,KAAnB,KAA8BA,KAAK,GAAGD;AAFhB,CAA5B;AAKA,MAAME,yBAAyB,GAAGd,aAAa;AAC9C;AAA+B,IADe,CAA/C;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMe,gBAAgB,GAAG,UAAEC,UAAF,EAAmC;AAAA,MAArBC,QAAqB,uEAAV,IAAU;AAC3D,QAAMC,cAAc,GAAGjB,UAAU,CAAEa,yBAAF,CAAjC;AACA,QAAMK,UAAU,GACf,CAAED,cAAF,IACC,IAAIR,UAAU,CAAEO,QAAF,CAAc,KAAKd,WAAW,CAAEa,UAAF,CAAgB,KAF9D;AAGA,QAAMI,gBAAgB,GAAGlB,aAAa,CAAEiB,UAAU,IAAIE,SAAhB,CAAtC;;AACA,MAAKH,cAAL,EAAsB;AACrB,WAAOP,mBAAmB,CAAEM,QAAF,CAAnB,CACNd,WAAW,CAAEa,UAAF,CADL,EAENE,cAFM,CAAP;AAIA;;AACD,SAAOE,gBAAP;AACA,CAbD;;AAeAL,gBAAgB,CAACO,2BAAjB,GACCR,yBAAyB,CAACS,QAD3B;AAGA,eAAeR,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"huge\" | \"wide\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\thuge: 1440,\n\twide: 1280,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint}       breakpoint      Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = ( breakpoint, operator = '>=' ) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"]}
+{"version":3,"sources":["@wordpress/compose/src/hooks/use-viewport-match/index.js"],"names":["createContext","useContext","useMediaQuery","BREAKPOINTS","huge","wide","large","medium","small","mobile","CONDITIONS","OPERATOR_EVALUATORS","breakpointValue","width","ViewportMatchWidthContext","useViewportMatch","breakpoint","operator","simulatedWidth","mediaQuery","mediaQueryResult","undefined","__experimentalWidthProvider","Provider"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,oBAA1C;AAEA;AACA;AACA;;AACA,OAAOC,aAAP,MAA0B,oBAA1B;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMC,WAAW,GAAG;AACnBC,EAAAA,IAAI,EAAE,IADa;AAEnBC,EAAAA,IAAI,EAAE,IAFa;AAGnBC,EAAAA,KAAK,EAAE,GAHY;AAInBC,EAAAA,MAAM,EAAE,GAJW;AAKnBC,EAAAA,KAAK,EAAE,GALY;AAMnBC,EAAAA,MAAM,EAAE;AANW,CAApB;AASA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AACA,MAAMC,UAAU,GAAG;AAClB,QAAM,WADY;AAElB,OAAK;AAFa,CAAnB;AAKA;AACA;AACA;AACA;AACA;;AACA,MAAMC,mBAAmB,GAAG;AAC3B,QAAM,CAAEC,eAAF,EAAmBC,KAAnB,KAA8BA,KAAK,IAAID,eADlB;AAE3B,OAAK,CAAEA,eAAF,EAAmBC,KAAnB,KAA8BA,KAAK,GAAGD;AAFhB,CAA5B;AAKA,MAAME,yBAAyB,GAAGd,aAAa;AAC9C;AAA+B,IADe,CAA/C;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMe,gBAAgB,GAAG,CAAEC,UAAF,EAAcC,QAAQ,GAAG,IAAzB,KAAmC;AAC3D,QAAMC,cAAc,GAAGjB,UAAU,CAAEa,yBAAF,CAAjC;AACA,QAAMK,UAAU,GACf,CAAED,cAAF,IACC,IAAIR,UAAU,CAAEO,QAAF,CAAc,KAAKd,WAAW,CAAEa,UAAF,CAAgB,KAF9D;AAGA,QAAMI,gBAAgB,GAAGlB,aAAa,CAAEiB,UAAU,IAAIE,SAAhB,CAAtC;;AACA,MAAKH,cAAL,EAAsB;AACrB,WAAOP,mBAAmB,CAAEM,QAAF,CAAnB,CACNd,WAAW,CAAEa,UAAF,CADL,EAENE,cAFM,CAAP;AAIA;;AACD,SAAOE,gBAAP;AACA,CAbD;;AAeAL,gBAAgB,CAACO,2BAAjB,GACCR,yBAAyB,CAACS,QAD3B;AAGA,eAAeR,gBAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"huge\" | \"wide\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\thuge: 1440,\n\twide: 1280,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint}       breakpoint      Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = ( breakpoint, operator = '>=' ) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"]}

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

@@ -25,12 +25,9 @@ import usePrevious from '../use-previous'; // Disable reason: Object and object
  * @param {string} prefix Just a prefix to show when console logging.
  */
 
-function useWarnOnChange(object) {
-  let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'Change detection';
+function useWarnOnChange(object, prefix = 'Change detection') {
   const previousValues = usePrevious(object);
-  Object.entries(previousValues !== null && previousValues !== void 0 ? previousValues : []).forEach(_ref => {
-    let [key, value] = _ref;
-
+  Object.entries(previousValues !== null && previousValues !== void 0 ? previousValues : []).forEach(([key, value]) => {
     if (value !== object[
     /** @type {keyof typeof object} */
     key]) {

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

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

package/build-module/utils/debounce/index.js

@@ -182,14 +182,9 @@ export const debounce = (func, wait, options) => {
     return timerId !== undefined;
   }
 
-  function debounced() {
+  function debounced(...args) {
     const time = Date.now();
     const isInvoking = shouldInvoke(time);
-
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
     lastArgs = args;
     lastThis = this;
     lastCallTime = time;

package/build-module/utils/debounce/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/compose/src/utils/debounce/index.ts"],"names":["debounce","func","wait","options","lastArgs","lastThis","maxWait","result","timerId","lastCallTime","lastInvokeTime","leading","maxing","trailing","undefined","Math","max","invokeFunc","time","args","thisArg","apply","startTimer","pendingFunc","waitTime","setTimeout","cancelTimer","clearTimeout","leadingEdge","timerExpired","getTimeSinceLastCall","remainingWait","timeSinceLastCall","timeSinceLastInvoke","timeWaiting","min","shouldInvoke","Date","now","trailingEdge","clearTimer","cancel","flush","pending","debounced","isInvoking"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAmCA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,QAAQ,GAAG,CACvBC,IADuB,EAEvBC,IAFuB,EAGvBC,OAHuB,KAInB;AACJ,MAAIC,QAAJ;AACA,MAAIC,QAAJ;AACA,MAAIC,OAAO,GAAG,CAAd;AACA,MAAIC,MAAJ;AACA,MAAIC,OAAJ;AACA,MAAIC,YAAJ;AAEA,MAAIC,cAAc,GAAG,CAArB;AACA,MAAIC,OAAO,GAAG,KAAd;AACA,MAAIC,MAAM,GAAG,KAAb;AACA,MAAIC,QAAQ,GAAG,IAAf;;AAEA,MAAKV,OAAL,EAAe;AACdQ,IAAAA,OAAO,GAAG,CAAC,CAAER,OAAO,CAACQ,OAArB;AACAC,IAAAA,MAAM,GAAG,aAAaT,OAAtB;;AACA,QAAKA,OAAO,CAACG,OAAR,KAAoBQ,SAAzB,EAAqC;AACpCR,MAAAA,OAAO,GAAGS,IAAI,CAACC,GAAL,CAAUb,OAAO,CAACG,OAAlB,EAA2BJ,IAA3B,CAAV;AACA;;AACDW,IAAAA,QAAQ,GAAG,cAAcV,OAAd,GAAwB,CAAC,CAAEA,OAAO,CAACU,QAAnC,GAA8CA,QAAzD;AACA;;AAED,WAASI,UAAT,CAAqBC,IAArB,EAAoC;AACnC,UAAMC,IAAI,GAAGf,QAAb;AACA,UAAMgB,OAAO,GAAGf,QAAhB;AAEAD,IAAAA,QAAQ,GAAGU,SAAX;AACAT,IAAAA,QAAQ,GAAGS,SAAX;AACAJ,IAAAA,cAAc,GAAGQ,IAAjB;AAEAX,IAAAA,MAAM,GAAGN,IAAI,CAACoB,KAAL,CAAYD,OAAZ,EAAqBD,IAArB,CAAT;AACA,WAAOZ,MAAP;AACA;;AAED,WAASe,UAAT,CACCC,WADD,EAECC,QAFD,EAGE;AACDhB,IAAAA,OAAO,GAAGiB,UAAU,CAAEF,WAAF,EAAeC,QAAf,CAApB;AACA;;AAED,WAASE,WAAT,GAAuB;AACtB,QAAKlB,OAAO,KAAKM,SAAjB,EAA6B;AAC5Ba,MAAAA,YAAY,CAAEnB,OAAF,CAAZ;AACA;AACD;;AAED,WAASoB,WAAT,CAAsBV,IAAtB,EAAqC;AACpC;AACAR,IAAAA,cAAc,GAAGQ,IAAjB,CAFoC,CAGpC;;AACAI,IAAAA,UAAU,CAAEO,YAAF,EAAgB3B,IAAhB,CAAV,CAJoC,CAKpC;;AACA,WAAOS,OAAO,GAAGM,UAAU,CAAEC,IAAF,CAAb,GAAwBX,MAAtC;AACA;;AAED,WAASuB,oBAAT,CAA+BZ,IAA/B,EAA8C;AAC7C,WAAOA,IAAI,IAAKT,YAAY,IAAI,CAArB,CAAX;AACA;;AAED,WAASsB,aAAT,CAAwBb,IAAxB,EAAuC;AACtC,UAAMc,iBAAiB,GAAGF,oBAAoB,CAAEZ,IAAF,CAA9C;AACA,UAAMe,mBAAmB,GAAGf,IAAI,GAAGR,cAAnC;AACA,UAAMwB,WAAW,GAAGhC,IAAI,GAAG8B,iBAA3B;AAEA,WAAOpB,MAAM,GACVG,IAAI,CAACoB,GAAL,CAAUD,WAAV,EAAuB5B,OAAO,GAAG2B,mBAAjC,CADU,GAEVC,WAFH;AAGA;;AAED,WAASE,YAAT,CAAuBlB,IAAvB,EAAsC;AACrC,UAAMc,iBAAiB,GAAGF,oBAAoB,CAAEZ,IAAF,CAA9C;AACA,UAAMe,mBAAmB,GAAGf,IAAI,GAAGR,cAAnC,CAFqC,CAIrC;AACA;AACA;;AACA,WACCD,YAAY,KAAKK,SAAjB,IACAkB,iBAAiB,IAAI9B,IADrB,IAEA8B,iBAAiB,GAAG,CAFpB,IAGEpB,MAAM,IAAIqB,mBAAmB,IAAI3B,OAJpC;AAMA;;AAED,WAASuB,YAAT,GAAwB;AACvB,UAAMX,IAAI,GAAGmB,IAAI,CAACC,GAAL,EAAb;;AACA,QAAKF,YAAY,CAAElB,IAAF,CAAjB,EAA4B;AAC3B,aAAOqB,YAAY,CAAErB,IAAF,CAAnB;AACA,KAJsB,CAKvB;;;AACAI,IAAAA,UAAU,CAAEO,YAAF,EAAgBE,aAAa,CAAEb,IAAF,CAA7B,CAAV;AACA,WAAOJ,SAAP;AACA;;AAED,WAAS0B,UAAT,GAAsB;AACrBhC,IAAAA,OAAO,GAAGM,SAAV;AACA;;AAED,WAASyB,YAAT,CAAuBrB,IAAvB,EAAsC;AACrCsB,IAAAA,UAAU,GAD2B,CAGrC;AACA;;AACA,QAAK3B,QAAQ,IAAIT,QAAjB,EAA4B;AAC3B,aAAOa,UAAU,CAAEC,IAAF,CAAjB;AACA;;AACDd,IAAAA,QAAQ,GAAGC,QAAQ,GAAGS,SAAtB;AACA,WAAOP,MAAP;AACA;;AAED,WAASkC,MAAT,GAAkB;AACjBf,IAAAA,WAAW;AACXhB,IAAAA,cAAc,GAAG,CAAjB;AACA8B,IAAAA,UAAU;AACVpC,IAAAA,QAAQ,GAAGK,YAAY,GAAGJ,QAAQ,GAAGS,SAArC;AACA;;AAED,WAAS4B,KAAT,GAAiB;AAChB,WAAOC,OAAO,KAAKJ,YAAY,CAAEF,IAAI,CAACC,GAAL,EAAF,CAAjB,GAAkC/B,MAAhD;AACA;;AAED,WAASoC,OAAT,GAAmB;AAClB,WAAOnC,OAAO,KAAKM,SAAnB;AACA;;AAED,WAAS8B,SAAT,GAAsE;AACrE,UAAM1B,IAAI,GAAGmB,IAAI,CAACC,GAAL,EAAb;AACA,UAAMO,UAAU,GAAGT,YAAY,CAAElB,IAAF,CAA/B;;AAFqE,sCAAhCC,IAAgC;AAAhCA,MAAAA,IAAgC;AAAA;;AAIrEf,IAAAA,QAAQ,GAAGe,IAAX;AACAd,IAAAA,QAAQ,GAAG,IAAX;AACAI,IAAAA,YAAY,GAAGS,IAAf;;AAEA,QAAK2B,UAAL,EAAkB;AACjB,UAAK,CAAEF,OAAO,EAAd,EAAmB;AAClB,eAAOf,WAAW,CAAEnB,YAAF,CAAlB;AACA;;AACD,UAAKG,MAAL,EAAc;AACb;AACAU,QAAAA,UAAU,CAAEO,YAAF,EAAgB3B,IAAhB,CAAV;AACA,eAAOe,UAAU,CAAER,YAAF,CAAjB;AACA;AACD;;AACD,QAAK,CAAEkC,OAAO,EAAd,EAAmB;AAClBrB,MAAAA,UAAU,CAAEO,YAAF,EAAgB3B,IAAhB,CAAV;AACA;;AACD,WAAOK,MAAP;AACA;;AACDqC,EAAAA,SAAS,CAACH,MAAV,GAAmBA,MAAnB;AACAG,EAAAA,SAAS,CAACF,KAAV,GAAkBA,KAAlB;AACAE,EAAAA,SAAS,CAACD,OAAV,GAAoBA,OAApB;AACA,SAAOC,SAAP;AACA,CA7JM","sourcesContent":["/**\n * Parts of this source were derived and modified from lodash,\n * released under the MIT license.\n *\n * https://github.com/lodash/lodash\n *\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n *\n * Based on Underscore.js, copyright Jeremy Ashkenas,\n * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n *\n * This software consists of voluntary contributions made by many\n * individuals. For exact contribution history, see the revision history\n * available at https://github.com/lodash/lodash\n *\n * The following license applies to all parts of this software except as\n * documented below:\n *\n * ====\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the\n * \"Software\"), to deal in the Software without restriction, including\n * without limitation the rights to use, copy, modify, merge, publish,\n * distribute, sublicense, and/or sell copies of the Software, and to\n * permit persons to whom the Software is furnished to do so, subject to\n * the following conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\nexport interface DebounceOptions {\n\tleading: boolean;\n\tmaxWait: number;\n\ttrailing: boolean;\n}\n\nexport interface DebouncedFunc< T extends ( ...args: any[] ) => any > {\n\t/**\n\t * Call the original function, but applying the debounce rules.\n\t *\n\t * If the debounced function can be run immediately, this calls it and returns its return\n\t * value.\n\t *\n\t * Otherwise, it returns the return value of the last invocation, or undefined if the debounced\n\t * function was not invoked yet.\n\t */\n\t( ...args: Parameters< T > ): ReturnType< T > | undefined;\n\n\t/**\n\t * Throw away any pending invocation of the debounced function.\n\t */\n\tcancel(): void;\n\n\t/**\n\t * If there is a pending invocation of the debounced function, invoke it immediately and return\n\t * its return value.\n\t *\n\t * Otherwise, return the value from the last invocation, or undefined if the debounced function\n\t * was never invoked.\n\t */\n\tflush(): ReturnType< T > | undefined;\n}\n\n/**\n * A simplified and properly typed version of lodash's `debounce`, that\n * always uses timers instead of sometimes using rAF.\n *\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel delayed\n * `func` invocations and a `flush` method to immediately invoke them. Provide\n * `options` to indicate whether `func` should be invoked on the leading and/or\n * trailing edge of the `wait` timeout. The `func` is invoked with the last\n * arguments provided to the debounced function. Subsequent calls to the debounced\n * function return the result of the last `func` invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * @param {Function}                   func             The function to debounce.\n * @param {number}                     wait             The number of milliseconds to delay.\n * @param {Partial< DebounceOptions >} options          The options object.\n * @param {boolean}                    options.leading  Specify invoking on the leading edge of the timeout.\n * @param {number}                     options.maxWait  The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean}                    options.trailing Specify invoking on the trailing edge of the timeout.\n *\n * @return Returns the new debounced function.\n */\nexport const debounce = < FunctionT extends ( ...args: unknown[] ) => unknown >(\n\tfunc: FunctionT,\n\twait: number,\n\toptions?: Partial< DebounceOptions >\n) => {\n\tlet lastArgs: Parameters< FunctionT > | undefined;\n\tlet lastThis: unknown | undefined;\n\tlet maxWait = 0;\n\tlet result: ReturnType< FunctionT >;\n\tlet timerId: ReturnType< typeof setTimeout > | undefined;\n\tlet lastCallTime: number | undefined;\n\n\tlet lastInvokeTime = 0;\n\tlet leading = false;\n\tlet maxing = false;\n\tlet trailing = true;\n\n\tif ( options ) {\n\t\tleading = !! options.leading;\n\t\tmaxing = 'maxWait' in options;\n\t\tif ( options.maxWait !== undefined ) {\n\t\t\tmaxWait = Math.max( options.maxWait, wait );\n\t\t}\n\t\ttrailing = 'trailing' in options ? !! options.trailing : trailing;\n\t}\n\n\tfunction invokeFunc( time: number ) {\n\t\tconst args = lastArgs;\n\t\tconst thisArg = lastThis;\n\n\t\tlastArgs = undefined;\n\t\tlastThis = undefined;\n\t\tlastInvokeTime = time;\n\n\t\tresult = func.apply( thisArg, args! ) as ReturnType< FunctionT >;\n\t\treturn result;\n\t}\n\n\tfunction startTimer(\n\t\tpendingFunc: () => void,\n\t\twaitTime: number | undefined\n\t) {\n\t\ttimerId = setTimeout( pendingFunc, waitTime );\n\t}\n\n\tfunction cancelTimer() {\n\t\tif ( timerId !== undefined ) {\n\t\t\tclearTimeout( timerId );\n\t\t}\n\t}\n\n\tfunction leadingEdge( time: number ) {\n\t\t// Reset any `maxWait` timer.\n\t\tlastInvokeTime = time;\n\t\t// Start the timer for the trailing edge.\n\t\tstartTimer( timerExpired, wait );\n\t\t// Invoke the leading edge.\n\t\treturn leading ? invokeFunc( time ) : result;\n\t}\n\n\tfunction getTimeSinceLastCall( time: number ) {\n\t\treturn time - ( lastCallTime || 0 );\n\t}\n\n\tfunction remainingWait( time: number ) {\n\t\tconst timeSinceLastCall = getTimeSinceLastCall( time );\n\t\tconst timeSinceLastInvoke = time - lastInvokeTime;\n\t\tconst timeWaiting = wait - timeSinceLastCall;\n\n\t\treturn maxing\n\t\t\t? Math.min( timeWaiting, maxWait - timeSinceLastInvoke )\n\t\t\t: timeWaiting;\n\t}\n\n\tfunction shouldInvoke( time: number ) {\n\t\tconst timeSinceLastCall = getTimeSinceLastCall( time );\n\t\tconst timeSinceLastInvoke = time - lastInvokeTime;\n\n\t\t// Either this is the first call, activity has stopped and we're at the\n\t\t// trailing edge, the system time has gone backwards and we're treating\n\t\t// it as the trailing edge, or we've hit the `maxWait` limit.\n\t\treturn (\n\t\t\tlastCallTime === undefined ||\n\t\t\ttimeSinceLastCall >= wait ||\n\t\t\ttimeSinceLastCall < 0 ||\n\t\t\t( maxing && timeSinceLastInvoke >= maxWait )\n\t\t);\n\t}\n\n\tfunction timerExpired() {\n\t\tconst time = Date.now();\n\t\tif ( shouldInvoke( time ) ) {\n\t\t\treturn trailingEdge( time );\n\t\t}\n\t\t// Restart the timer.\n\t\tstartTimer( timerExpired, remainingWait( time ) );\n\t\treturn undefined;\n\t}\n\n\tfunction clearTimer() {\n\t\ttimerId = undefined;\n\t}\n\n\tfunction trailingEdge( time: number ) {\n\t\tclearTimer();\n\n\t\t// Only invoke if we have `lastArgs` which means `func` has been\n\t\t// debounced at least once.\n\t\tif ( trailing && lastArgs ) {\n\t\t\treturn invokeFunc( time );\n\t\t}\n\t\tlastArgs = lastThis = undefined;\n\t\treturn result;\n\t}\n\n\tfunction cancel() {\n\t\tcancelTimer();\n\t\tlastInvokeTime = 0;\n\t\tclearTimer();\n\t\tlastArgs = lastCallTime = lastThis = undefined;\n\t}\n\n\tfunction flush() {\n\t\treturn pending() ? trailingEdge( Date.now() ) : result;\n\t}\n\n\tfunction pending() {\n\t\treturn timerId !== undefined;\n\t}\n\n\tfunction debounced( this: unknown, ...args: Parameters< FunctionT > ) {\n\t\tconst time = Date.now();\n\t\tconst isInvoking = shouldInvoke( time );\n\n\t\tlastArgs = args;\n\t\tlastThis = this;\n\t\tlastCallTime = time;\n\n\t\tif ( isInvoking ) {\n\t\t\tif ( ! pending() ) {\n\t\t\t\treturn leadingEdge( lastCallTime );\n\t\t\t}\n\t\t\tif ( maxing ) {\n\t\t\t\t// Handle invocations in a tight loop.\n\t\t\t\tstartTimer( timerExpired, wait );\n\t\t\t\treturn invokeFunc( lastCallTime );\n\t\t\t}\n\t\t}\n\t\tif ( ! pending() ) {\n\t\t\tstartTimer( timerExpired, wait );\n\t\t}\n\t\treturn result;\n\t}\n\tdebounced.cancel = cancel;\n\tdebounced.flush = flush;\n\tdebounced.pending = pending;\n\treturn debounced;\n};\n"]}
+{"version":3,"sources":["@wordpress/compose/src/utils/debounce/index.ts"],"names":["debounce","func","wait","options","lastArgs","lastThis","maxWait","result","timerId","lastCallTime","lastInvokeTime","leading","maxing","trailing","undefined","Math","max","invokeFunc","time","args","thisArg","apply","startTimer","pendingFunc","waitTime","setTimeout","cancelTimer","clearTimeout","leadingEdge","timerExpired","getTimeSinceLastCall","remainingWait","timeSinceLastCall","timeSinceLastInvoke","timeWaiting","min","shouldInvoke","Date","now","trailingEdge","clearTimer","cancel","flush","pending","debounced","isInvoking"],"mappings":"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","sourcesContent":["/**\n * Parts of this source were derived and modified from lodash,\n * released under the MIT license.\n *\n * https://github.com/lodash/lodash\n *\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n *\n * Based on Underscore.js, copyright Jeremy Ashkenas,\n * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n *\n * This software consists of voluntary contributions made by many\n * individuals. For exact contribution history, see the revision history\n * available at https://github.com/lodash/lodash\n *\n * The following license applies to all parts of this software except as\n * documented below:\n *\n * ====\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the\n * \"Software\"), to deal in the Software without restriction, including\n * without limitation the rights to use, copy, modify, merge, publish,\n * distribute, sublicense, and/or sell copies of the Software, and to\n * permit persons to whom the Software is furnished to do so, subject to\n * the following conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\nexport interface DebounceOptions {\n\tleading: boolean;\n\tmaxWait: number;\n\ttrailing: boolean;\n}\n\nexport interface DebouncedFunc< T extends ( ...args: any[] ) => any > {\n\t/**\n\t * Call the original function, but applying the debounce rules.\n\t *\n\t * If the debounced function can be run immediately, this calls it and returns its return\n\t * value.\n\t *\n\t * Otherwise, it returns the return value of the last invocation, or undefined if the debounced\n\t * function was not invoked yet.\n\t */\n\t( ...args: Parameters< T > ): ReturnType< T > | undefined;\n\n\t/**\n\t * Throw away any pending invocation of the debounced function.\n\t */\n\tcancel(): void;\n\n\t/**\n\t * If there is a pending invocation of the debounced function, invoke it immediately and return\n\t * its return value.\n\t *\n\t * Otherwise, return the value from the last invocation, or undefined if the debounced function\n\t * was never invoked.\n\t */\n\tflush(): ReturnType< T > | undefined;\n}\n\n/**\n * A simplified and properly typed version of lodash's `debounce`, that\n * always uses timers instead of sometimes using rAF.\n *\n * Creates a debounced function that delays invoking `func` until after `wait`\n * milliseconds have elapsed since the last time the debounced function was\n * invoked. The debounced function comes with a `cancel` method to cancel delayed\n * `func` invocations and a `flush` method to immediately invoke them. Provide\n * `options` to indicate whether `func` should be invoked on the leading and/or\n * trailing edge of the `wait` timeout. The `func` is invoked with the last\n * arguments provided to the debounced function. Subsequent calls to the debounced\n * function return the result of the last `func` invocation.\n *\n * **Note:** If `leading` and `trailing` options are `true`, `func` is\n * invoked on the trailing edge of the timeout only if the debounced function\n * is invoked more than once during the `wait` timeout.\n *\n * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred\n * until the next tick, similar to `setTimeout` with a timeout of `0`.\n *\n * @param {Function}                   func             The function to debounce.\n * @param {number}                     wait             The number of milliseconds to delay.\n * @param {Partial< DebounceOptions >} options          The options object.\n * @param {boolean}                    options.leading  Specify invoking on the leading edge of the timeout.\n * @param {number}                     options.maxWait  The maximum time `func` is allowed to be delayed before it's invoked.\n * @param {boolean}                    options.trailing Specify invoking on the trailing edge of the timeout.\n *\n * @return Returns the new debounced function.\n */\nexport const debounce = < FunctionT extends ( ...args: unknown[] ) => unknown >(\n\tfunc: FunctionT,\n\twait: number,\n\toptions?: Partial< DebounceOptions >\n) => {\n\tlet lastArgs: Parameters< FunctionT > | undefined;\n\tlet lastThis: unknown | undefined;\n\tlet maxWait = 0;\n\tlet result: ReturnType< FunctionT >;\n\tlet timerId: ReturnType< typeof setTimeout > | undefined;\n\tlet lastCallTime: number | undefined;\n\n\tlet lastInvokeTime = 0;\n\tlet leading = false;\n\tlet maxing = false;\n\tlet trailing = true;\n\n\tif ( options ) {\n\t\tleading = !! options.leading;\n\t\tmaxing = 'maxWait' in options;\n\t\tif ( options.maxWait !== undefined ) {\n\t\t\tmaxWait = Math.max( options.maxWait, wait );\n\t\t}\n\t\ttrailing = 'trailing' in options ? !! options.trailing : trailing;\n\t}\n\n\tfunction invokeFunc( time: number ) {\n\t\tconst args = lastArgs;\n\t\tconst thisArg = lastThis;\n\n\t\tlastArgs = undefined;\n\t\tlastThis = undefined;\n\t\tlastInvokeTime = time;\n\n\t\tresult = func.apply( thisArg, args! ) as ReturnType< FunctionT >;\n\t\treturn result;\n\t}\n\n\tfunction startTimer(\n\t\tpendingFunc: () => void,\n\t\twaitTime: number | undefined\n\t) {\n\t\ttimerId = setTimeout( pendingFunc, waitTime );\n\t}\n\n\tfunction cancelTimer() {\n\t\tif ( timerId !== undefined ) {\n\t\t\tclearTimeout( timerId );\n\t\t}\n\t}\n\n\tfunction leadingEdge( time: number ) {\n\t\t// Reset any `maxWait` timer.\n\t\tlastInvokeTime = time;\n\t\t// Start the timer for the trailing edge.\n\t\tstartTimer( timerExpired, wait );\n\t\t// Invoke the leading edge.\n\t\treturn leading ? invokeFunc( time ) : result;\n\t}\n\n\tfunction getTimeSinceLastCall( time: number ) {\n\t\treturn time - ( lastCallTime || 0 );\n\t}\n\n\tfunction remainingWait( time: number ) {\n\t\tconst timeSinceLastCall = getTimeSinceLastCall( time );\n\t\tconst timeSinceLastInvoke = time - lastInvokeTime;\n\t\tconst timeWaiting = wait - timeSinceLastCall;\n\n\t\treturn maxing\n\t\t\t? Math.min( timeWaiting, maxWait - timeSinceLastInvoke )\n\t\t\t: timeWaiting;\n\t}\n\n\tfunction shouldInvoke( time: number ) {\n\t\tconst timeSinceLastCall = getTimeSinceLastCall( time );\n\t\tconst timeSinceLastInvoke = time - lastInvokeTime;\n\n\t\t// Either this is the first call, activity has stopped and we're at the\n\t\t// trailing edge, the system time has gone backwards and we're treating\n\t\t// it as the trailing edge, or we've hit the `maxWait` limit.\n\t\treturn (\n\t\t\tlastCallTime === undefined ||\n\t\t\ttimeSinceLastCall >= wait ||\n\t\t\ttimeSinceLastCall < 0 ||\n\t\t\t( maxing && timeSinceLastInvoke >= maxWait )\n\t\t);\n\t}\n\n\tfunction timerExpired() {\n\t\tconst time = Date.now();\n\t\tif ( shouldInvoke( time ) ) {\n\t\t\treturn trailingEdge( time );\n\t\t}\n\t\t// Restart the timer.\n\t\tstartTimer( timerExpired, remainingWait( time ) );\n\t\treturn undefined;\n\t}\n\n\tfunction clearTimer() {\n\t\ttimerId = undefined;\n\t}\n\n\tfunction trailingEdge( time: number ) {\n\t\tclearTimer();\n\n\t\t// Only invoke if we have `lastArgs` which means `func` has been\n\t\t// debounced at least once.\n\t\tif ( trailing && lastArgs ) {\n\t\t\treturn invokeFunc( time );\n\t\t}\n\t\tlastArgs = lastThis = undefined;\n\t\treturn result;\n\t}\n\n\tfunction cancel() {\n\t\tcancelTimer();\n\t\tlastInvokeTime = 0;\n\t\tclearTimer();\n\t\tlastArgs = lastCallTime = lastThis = undefined;\n\t}\n\n\tfunction flush() {\n\t\treturn pending() ? trailingEdge( Date.now() ) : result;\n\t}\n\n\tfunction pending() {\n\t\treturn timerId !== undefined;\n\t}\n\n\tfunction debounced( this: unknown, ...args: Parameters< FunctionT > ) {\n\t\tconst time = Date.now();\n\t\tconst isInvoking = shouldInvoke( time );\n\n\t\tlastArgs = args;\n\t\tlastThis = this;\n\t\tlastCallTime = time;\n\n\t\tif ( isInvoking ) {\n\t\t\tif ( ! pending() ) {\n\t\t\t\treturn leadingEdge( lastCallTime );\n\t\t\t}\n\t\t\tif ( maxing ) {\n\t\t\t\t// Handle invocations in a tight loop.\n\t\t\t\tstartTimer( timerExpired, wait );\n\t\t\t\treturn invokeFunc( lastCallTime );\n\t\t\t}\n\t\t}\n\t\tif ( ! pending() ) {\n\t\t\tstartTimer( timerExpired, wait );\n\t\t}\n\t\treturn result;\n\t}\n\tdebounced.cancel = cancel;\n\tdebounced.flush = flush;\n\tdebounced.pending = pending;\n\treturn debounced;\n};\n"]}

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

@@ -1,18 +1,20 @@
 /**
  * A hook to facilitate drag and drop handling.
  *
- * @param {Object}                  props               Named parameters.
- * @param {boolean}                 [props.isDisabled]  Whether or not to disable the drop zone.
- * @param {(e: DragEvent) => void}  [props.onDragStart] Called when dragging has started.
- * @param {(e: DragEvent) => void}  [props.onDragEnter] Called when the zone is entered.
- * @param {(e: DragEvent) => void}  [props.onDragOver]  Called when the zone is moved within.
- * @param {(e: DragEvent) => void}  [props.onDragLeave] Called when the zone is left.
- * @param {(e: MouseEvent) => void} [props.onDragEnd]   Called when dragging has ended.
- * @param {(e: DragEvent) => void}  [props.onDrop]      Called when dropping in the zone.
+ * @param {Object}                  props                   Named parameters.
+ * @param {?HTMLElement}            [props.dropZoneElement] Optional element to be used as the drop zone.
+ * @param {boolean}                 [props.isDisabled]      Whether or not to disable the drop zone.
+ * @param {(e: DragEvent) => void}  [props.onDragStart]     Called when dragging has started.
+ * @param {(e: DragEvent) => void}  [props.onDragEnter]     Called when the zone is entered.
+ * @param {(e: DragEvent) => void}  [props.onDragOver]      Called when the zone is moved within.
+ * @param {(e: DragEvent) => void}  [props.onDragLeave]     Called when the zone is left.
+ * @param {(e: MouseEvent) => void} [props.onDragEnd]       Called when dragging has ended.
+ * @param {(e: DragEvent) => void}  [props.onDrop]          Called when dropping in the zone.
  *
  * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.
  */
-export default function useDropZone({ isDisabled, onDrop: _onDrop, onDragStart: _onDragStart, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragEnd: _onDragEnd, onDragOver: _onDragOver, }: {
+export default function useDropZone({ dropZoneElement, isDisabled, onDrop: _onDrop, onDragStart: _onDragStart, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragEnd: _onDragEnd, onDragOver: _onDragOver, }: {
+    dropZoneElement?: HTMLElement | null | undefined;
     isDisabled?: boolean | undefined;
     onDragStart?: ((e: DragEvent) => void) | undefined;
     onDragEnter?: ((e: DragEvent) => void) | undefined;

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;;;;;;;;;;;;;GAaG;AACH;IAV2C,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;IAErB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CA4LnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-drop-zone/index.js"],"names":[],"mappings":"AAgCA;;;;;;;;;;;;;;GAcG;AACH;IAX2C,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;IAErB,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAkMnD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "6.10.0",
+	"version": "6.12.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,12 +31,12 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.33.0",
-		"@wordpress/dom": "^3.33.0",
-		"@wordpress/element": "^5.10.0",
-		"@wordpress/is-shallow-equal": "^4.33.0",
-		"@wordpress/keycodes": "^3.33.0",
-		"@wordpress/priority-queue": "^2.33.0",
+		"@wordpress/deprecated": "^3.35.0",
+		"@wordpress/dom": "^3.35.0",
+		"@wordpress/element": "^5.12.0",
+		"@wordpress/is-shallow-equal": "^4.35.0",
+		"@wordpress/keycodes": "^3.35.0",
+		"@wordpress/priority-queue": "^2.35.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
 		"mousetrap": "^1.6.5",
@@ -48,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "e936127e1e13881f1a940b7bd1593a9e500147f3"
+	"gitHead": "a92f606309b1541b834ff9b0a76ed2a466fc45ed"
 }

package/src/hooks/use-drop-zone/README.md

@@ -0,0 +1,71 @@
+# useDropZone (experimental)
+
+A hook to facilitate drag and drop handling within a designated drop zone area. An optional `dropZoneElement` can be provided, however by default the drop zone is bound by the area where the returned `ref` is assigned.
+
+When using a `dropZoneElement`, it is expected that the `ref` will be attached to a node that is a descendent of the `dropZoneElement`. Additionally, the element passed to `dropZoneElement` should be stored in state rather than a plain ref to ensure reactive updating when it changes.
+
+## Usage
+
+```js
+import { useDropZone } from '@wordpress/compose';
+import { useState } from '@wordpress/element';
+
+const WithWrapperDropZoneElement = () => {
+	const [ dropZoneElement, setDropZoneElement ] = useState( null );
+
+	const dropZoneRef = useDropZone(
+		{
+			dropZoneElement,
+			onDrop() => {
+				console.log( 'Dropped within the drop zone.' );
+			},
+			onDragEnter() => {
+				console.log( 'Dragging within the drop zone' );
+			}
+		}
+	)
+
+	return (
+		<div className="outer-wrapper" ref={ setDropZoneElement }>
+			<div ref={ dropZoneRef }>
+				<p>Drop Zone</p>
+			</div>
+		</div>
+	);
+};
+
+const WithoutWrapperDropZoneElement = () => {
+	const dropZoneRef = useDropZone(
+		{
+			onDrop() => {
+				console.log( 'Dropped within the drop zone.' );
+			},
+			onDragEnter() => {
+				console.log( 'Dragging within the drop zone' );
+			}
+		}
+	)
+
+	return (
+		<div ref={ dropZoneRef }>
+			<p>Drop Zone</p>
+		</div>
+	);
+};
+```
+
+## Parameters
+
+-   _props_ `Object`: Named parameters.
+-   _props.dropZoneElement_ `HTMLElement`: Optional element to be used as the drop zone.
+-   _props.isDisabled_ `boolean`: Whether or not to disable the drop zone.
+-   _props.onDragStart_ `( e: DragEvent ) => void`: Called when dragging has started.
+-   _props.onDragEnter_ `( e: DragEvent ) => void`: Called when the zone is entered.
+-   _props.onDragOver_ `( e: DragEvent ) => void`: Called when the zone is moved within.
+-   _props.onDragLeave_ `( e: DragEvent ) => void`: Called when the zone is left.
+-   _props.onDragEnd_ `( e: MouseEvent ) => void`: Called when dragging has ended.
+-   _props.onDrop_ `( e: DragEvent ) => void`: Called when dropping in the zone.
+
+_Returns_
+
+-   `RefCallback< HTMLElement >`: Ref callback to be passed to the drop zone element.

package/src/hooks/use-drop-zone/index.js

@@ -33,18 +33,20 @@ function useFreshRef( value ) {
 /**
  * A hook to facilitate drag and drop handling.
  *
- * @param {Object}                  props               Named parameters.
- * @param {boolean}                 [props.isDisabled]  Whether or not to disable the drop zone.
- * @param {(e: DragEvent) => void}  [props.onDragStart] Called when dragging has started.
- * @param {(e: DragEvent) => void}  [props.onDragEnter] Called when the zone is entered.
- * @param {(e: DragEvent) => void}  [props.onDragOver]  Called when the zone is moved within.
- * @param {(e: DragEvent) => void}  [props.onDragLeave] Called when the zone is left.
- * @param {(e: MouseEvent) => void} [props.onDragEnd]   Called when dragging has ended.
- * @param {(e: DragEvent) => void}  [props.onDrop]      Called when dropping in the zone.
+ * @param {Object}                  props                   Named parameters.
+ * @param {?HTMLElement}            [props.dropZoneElement] Optional element to be used as the drop zone.
+ * @param {boolean}                 [props.isDisabled]      Whether or not to disable the drop zone.
+ * @param {(e: DragEvent) => void}  [props.onDragStart]     Called when dragging has started.
+ * @param {(e: DragEvent) => void}  [props.onDragEnter]     Called when the zone is entered.
+ * @param {(e: DragEvent) => void}  [props.onDragOver]      Called when the zone is moved within.
+ * @param {(e: DragEvent) => void}  [props.onDragLeave]     Called when the zone is left.
+ * @param {(e: MouseEvent) => void} [props.onDragEnd]       Called when dragging has ended.
+ * @param {(e: DragEvent) => void}  [props.onDrop]          Called when dropping in the zone.
  *
  * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.
  */
 export default function useDropZone( {
+	dropZoneElement,
 	isDisabled,
 	onDrop: _onDrop,
 	onDragStart: _onDragStart,
@@ -61,11 +63,16 @@ export default function useDropZone( {
 	const onDragOverRef = useFreshRef( _onDragOver );
 
 	return useRefEffect(
-		( element ) => {
+		( elem ) => {
 			if ( isDisabled ) {
 				return;
 			}
 
+			// If a custom dropZoneRef is passed, use that instead of the element.
+			// This allows the dropzone to cover an expanded area, rather than
+			// be restricted to the area of the ref returned by this hook.
+			const element = dropZoneElement ?? elem;
+
 			let isDragging = false;
 
 			const { ownerDocument } = element;
@@ -228,6 +235,6 @@ export default function useDropZone( {
 				);
 			};
 		},
-		[ isDisabled ]
+		[ isDisabled, dropZoneElement ] // Refresh when the passed in dropZoneElement changes.
 	);
 }

package/src/hooks/use-drop-zone/test/index.js

@@ -0,0 +1,63 @@
+/**
+ * External dependencies
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import useDropZone from '../';
+
+describe( 'useDropZone', () => {
+	const ComponentWithWrapperDropZone = () => {
+		const [ dropZoneElement, setDropZoneElement ] = useState( null );
+		const dropZoneRef = useDropZone( {
+			dropZoneElement,
+		} );
+
+		return (
+			<div role="main" ref={ setDropZoneElement }>
+				<div role="region" ref={ dropZoneRef }>
+					<div>Drop Zone</div>
+				</div>
+			</div>
+		);
+	};
+
+	const ComponentWithoutWrapperDropZone = () => {
+		const dropZoneRef = useDropZone( {} );
+
+		return (
+			<div role="main">
+				<div role="region" ref={ dropZoneRef }>
+					<div>Drop Zone</div>
+				</div>
+			</div>
+		);
+	};
+
+	it( 'will attach dropzone to outer wrapper', () => {
+		const { rerender } = render( <ComponentWithWrapperDropZone /> );
+		// Ensure `useEffect` has run.
+		rerender( <ComponentWithWrapperDropZone /> );
+
+		expect( screen.getByRole( 'main' ) ).toHaveAttribute(
+			'data-is-drop-zone'
+		);
+	} );
+
+	it( 'will attach dropzone to element with dropZoneRef attached', () => {
+		const { rerender } = render( <ComponentWithoutWrapperDropZone /> );
+		// Ensure `useEffect` has run.
+		rerender( <ComponentWithoutWrapperDropZone /> );
+
+		expect( screen.getByRole( 'region' ) ).toHaveAttribute(
+			'data-is-drop-zone'
+		);
+	} );
+} );