@wordpress/compose 6.18.0 → 6.19.0

package/build-module/hooks/use-media-query/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["useMemo","useSyncExternalStore","getMediaQueryList","query","window","matchMedia","useMediaQuery","source","mediaQueryList","subscribe","onStoreChange","addEventListener","removeEventListener","getValue","_mediaQueryList$match","matches"],"sources":["@wordpress/compose/src/hooks/use-media-query/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useSyncExternalStore } from '@wordpress/element';\n\n/**\n * A new MediaQueryList object for the media query\n *\n * @param {string} [query] Media Query.\n * @return {MediaQueryList|null} A new object for the media query\n */\nfunction getMediaQueryList( query ) {\n\tif (\n\t\tquery &&\n\t\ttypeof window !== 'undefined' &&\n\t\ttypeof window.matchMedia === 'function'\n\t) {\n\t\treturn window.matchMedia( query );\n\t}\n\n\treturn null;\n}\n\n/**\n * Runs a media query and returns its value when it changes.\n *\n * @param {string} [query] Media Query.\n * @return {boolean} return value of the media query.\n */\nexport default function useMediaQuery( query ) {\n\tconst source = useMemo( () => {\n\t\tconst mediaQueryList = getMediaQueryList( query );\n\n\t\treturn {\n\t\t\t/** @type {(onStoreChange: () => void) => () => void} */\n\t\t\tsubscribe( onStoreChange ) {\n\t\t\t\tif ( ! mediaQueryList ) {\n\t\t\t\t\treturn () => {};\n\t\t\t\t}\n\n\t\t\t\tmediaQueryList.addEventListener( 'change', onStoreChange );\n\t\t\t\treturn () => {\n\t\t\t\t\tmediaQueryList.removeEventListener(\n\t\t\t\t\t\t'change',\n\t\t\t\t\t\tonStoreChange\n\t\t\t\t\t);\n\t\t\t\t};\n\t\t\t},\n\t\t\tgetValue() {\n\t\t\t\treturn mediaQueryList?.matches ?? false;\n\t\t\t},\n\t\t};\n\t}, [ query ] );\n\n\treturn useSyncExternalStore(\n\t\tsource.subscribe,\n\t\tsource.getValue,\n\t\t() => false\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,EAAEC,oBAAoB,QAAQ,oBAAoB;;AAElE;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAiBA,CAAEC,KAAK,EAAG;EACnC,IACCA,KAAK,IACL,OAAOC,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,EACtC;IACD,OAAOD,MAAM,CAACC,UAAU,CAAEF,KAAM,CAAC;EAClC;EAEA,OAAO,IAAI;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASG,aAAaA,CAAEH,KAAK,EAAG;EAC9C,MAAMI,MAAM,GAAGP,OAAO,CAAE,MAAM;IAC7B,MAAMQ,cAAc,GAAGN,iBAAiB,CAAEC,KAAM,CAAC;IAEjD,OAAO;MACN;MACAM,SAASA,CAAEC,aAAa,EAAG;QAC1B,IAAK,CAAEF,cAAc,EAAG;UACvB,OAAO,MAAM,CAAC,CAAC;QAChB;QAEAA,cAAc,CAACG,gBAAgB,CAAE,QAAQ,EAAED,aAAc,CAAC;QAC1D,OAAO,MAAM;UACZF,cAAc,CAACI,mBAAmB,CACjC,QAAQ,EACRF,aACD,CAAC;QACF,CAAC;MACF,CAAC;MACDG,QAAQA,CAAA,EAAG;QAAA,IAAAC,qBAAA;QACV,QAAAA,qBAAA,GAAON,cAAc,EAAEO,OAAO,cAAAD,qBAAA,cAAAA,qBAAA,GAAI,KAAK;MACxC;IACD,CAAC;EACF,CAAC,EAAE,CAAEX,KAAK,CAAG,CAAC;EAEd,OAAOF,oBAAoB,CAC1BM,MAAM,CAACE,SAAS,EAChBF,MAAM,CAACM,QAAQ,EACf,MAAM,KACP,CAAC;AACF"}
+{"version":3,"names":["useMemo","useSyncExternalStore","getMediaQueryList","query","window","matchMedia","useMediaQuery","source","mediaQueryList","subscribe","onStoreChange","addEventListener","removeEventListener","getValue","_mediaQueryList$match","matches"],"sources":["@wordpress/compose/src/hooks/use-media-query/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useMemo, useSyncExternalStore } from '@wordpress/element';\n\n/**\n * A new MediaQueryList object for the media query\n *\n * @param {string} [query] Media Query.\n * @return {MediaQueryList|null} A new object for the media query\n */\nfunction getMediaQueryList( query ) {\n\tif (\n\t\tquery &&\n\t\ttypeof window !== 'undefined' &&\n\t\ttypeof window.matchMedia === 'function'\n\t) {\n\t\treturn window.matchMedia( query );\n\t}\n\n\treturn null;\n}\n\n/**\n * Runs a media query and returns its value when it changes.\n *\n * @param {string} [query] Media Query.\n * @return {boolean} return value of the media query.\n */\nexport default function useMediaQuery( query ) {\n\tconst source = useMemo( () => {\n\t\tconst mediaQueryList = getMediaQueryList( query );\n\n\t\treturn {\n\t\t\t/** @type {(onStoreChange: () => void) => () => void} */\n\t\t\tsubscribe( onStoreChange ) {\n\t\t\t\tif ( ! mediaQueryList ) {\n\t\t\t\t\treturn () => {};\n\t\t\t\t}\n\n\t\t\t\t// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.\n\t\t\t\tmediaQueryList.addEventListener?.( 'change', onStoreChange );\n\t\t\t\treturn () => {\n\t\t\t\t\tmediaQueryList.removeEventListener?.(\n\t\t\t\t\t\t'change',\n\t\t\t\t\t\tonStoreChange\n\t\t\t\t\t);\n\t\t\t\t};\n\t\t\t},\n\t\t\tgetValue() {\n\t\t\t\treturn mediaQueryList?.matches ?? false;\n\t\t\t},\n\t\t};\n\t}, [ query ] );\n\n\treturn useSyncExternalStore(\n\t\tsource.subscribe,\n\t\tsource.getValue,\n\t\t() => false\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,OAAO,EAAEC,oBAAoB,QAAQ,oBAAoB;;AAElE;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAiBA,CAAEC,KAAK,EAAG;EACnC,IACCA,KAAK,IACL,OAAOC,MAAM,KAAK,WAAW,IAC7B,OAAOA,MAAM,CAACC,UAAU,KAAK,UAAU,EACtC;IACD,OAAOD,MAAM,CAACC,UAAU,CAAEF,KAAM,CAAC;EAClC;EAEA,OAAO,IAAI;AACZ;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASG,aAAaA,CAAEH,KAAK,EAAG;EAC9C,MAAMI,MAAM,GAAGP,OAAO,CAAE,MAAM;IAC7B,MAAMQ,cAAc,GAAGN,iBAAiB,CAAEC,KAAM,CAAC;IAEjD,OAAO;MACN;MACAM,SAASA,CAAEC,aAAa,EAAG;QAC1B,IAAK,CAAEF,cAAc,EAAG;UACvB,OAAO,MAAM,CAAC,CAAC;QAChB;;QAEA;QACAA,cAAc,CAACG,gBAAgB,GAAI,QAAQ,EAAED,aAAc,CAAC;QAC5D,OAAO,MAAM;UACZF,cAAc,CAACI,mBAAmB,GACjC,QAAQ,EACRF,aACD,CAAC;QACF,CAAC;MACF,CAAC;MACDG,QAAQA,CAAA,EAAG;QAAA,IAAAC,qBAAA;QACV,QAAAA,qBAAA,GAAON,cAAc,EAAEO,OAAO,cAAAD,qBAAA,cAAAA,qBAAA,GAAI,KAAK;MACxC;IACD,CAAC;EACF,CAAC,EAAE,CAAEX,KAAK,CAAG,CAAC;EAEd,OAAOF,oBAAoB,CAC1BM,MAAM,CAACE,SAAS,EAChBF,MAAM,CAACM,QAAQ,EACf,MAAM,KACP,CAAC;AACF"}

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

package/build-module/hooks/use-state-with-history/index.js

@@ -0,0 +1,87 @@
+/**
+ * WordPress dependencies
+ */
+import { createUndoManager } from '@wordpress/undo-manager';
+import { useCallback, useReducer } from '@wordpress/element';
+function undoRedoReducer(state, action) {
+  switch (action.type) {
+    case 'UNDO':
+      {
+        const undoRecord = state.manager.undo();
+        if (undoRecord) {
+          return {
+            ...state,
+            value: undoRecord[0].changes.prop.from
+          };
+        }
+        return state;
+      }
+    case 'REDO':
+      {
+        const redoRecord = state.manager.redo();
+        if (redoRecord) {
+          return {
+            ...state,
+            value: redoRecord[0].changes.prop.to
+          };
+        }
+        return state;
+      }
+    case 'RECORD':
+      {
+        state.manager.addRecord([{
+          id: 'object',
+          changes: {
+            prop: {
+              from: state.value,
+              to: action.value
+            }
+          }
+        }], action.isStaged);
+        return {
+          ...state,
+          value: action.value
+        };
+      }
+  }
+  return state;
+}
+function initReducer(value) {
+  return {
+    manager: createUndoManager(),
+    value
+  };
+}
+
+/**
+ * useState with undo/redo history.
+ *
+ * @param initialValue Initial value.
+ * @return Value, setValue, hasUndo, hasRedo, undo, redo.
+ */
+export default function useStateWithHistory(initialValue) {
+  const [state, dispatch] = useReducer(undoRedoReducer, initialValue, initReducer);
+  return {
+    value: state.value,
+    setValue: useCallback((newValue, isStaged) => {
+      dispatch({
+        type: 'RECORD',
+        value: newValue,
+        isStaged
+      });
+    }, []),
+    hasUndo: state.manager.hasUndo(),
+    hasRedo: state.manager.hasRedo(),
+    undo: useCallback(() => {
+      dispatch({
+        type: 'UNDO'
+      });
+    }, []),
+    redo: useCallback(() => {
+      dispatch({
+        type: 'REDO'
+      });
+    }, [])
+  };
+}
+//# sourceMappingURL=index.js.map

package/build-module/hooks/use-state-with-history/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createUndoManager","useCallback","useReducer","undoRedoReducer","state","action","type","undoRecord","manager","undo","value","changes","prop","from","redoRecord","redo","to","addRecord","id","isStaged","initReducer","useStateWithHistory","initialValue","dispatch","setValue","newValue","hasUndo","hasRedo"],"sources":["@wordpress/compose/src/hooks/use-state-with-history/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createUndoManager } from '@wordpress/undo-manager';\nimport { useCallback, useReducer } from '@wordpress/element';\nimport type { UndoManager } from '@wordpress/undo-manager';\n\ntype UndoRedoState< T > = {\n\tmanager: UndoManager;\n\tvalue: T;\n};\n\nfunction undoRedoReducer< T >(\n\tstate: UndoRedoState< T >,\n\taction:\n\t\t| { type: 'UNDO' }\n\t\t| { type: 'REDO' }\n\t\t| { type: 'RECORD'; value: T; isStaged: boolean }\n): UndoRedoState< T > {\n\tswitch ( action.type ) {\n\t\tcase 'UNDO': {\n\t\t\tconst undoRecord = state.manager.undo();\n\t\t\tif ( undoRecord ) {\n\t\t\t\treturn {\n\t\t\t\t\t...state,\n\t\t\t\t\tvalue: undoRecord[ 0 ].changes.prop.from,\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn state;\n\t\t}\n\t\tcase 'REDO': {\n\t\t\tconst redoRecord = state.manager.redo();\n\t\t\tif ( redoRecord ) {\n\t\t\t\treturn {\n\t\t\t\t\t...state,\n\t\t\t\t\tvalue: redoRecord[ 0 ].changes.prop.to,\n\t\t\t\t};\n\t\t\t}\n\t\t\treturn state;\n\t\t}\n\t\tcase 'RECORD': {\n\t\t\tstate.manager.addRecord(\n\t\t\t\t[\n\t\t\t\t\t{\n\t\t\t\t\t\tid: 'object',\n\t\t\t\t\t\tchanges: {\n\t\t\t\t\t\t\tprop: { from: state.value, to: action.value },\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t],\n\t\t\t\taction.isStaged\n\t\t\t);\n\t\t\treturn {\n\t\t\t\t...state,\n\t\t\t\tvalue: action.value,\n\t\t\t};\n\t\t}\n\t}\n\n\treturn state;\n}\n\nfunction initReducer< T >( value: T ) {\n\treturn {\n\t\tmanager: createUndoManager(),\n\t\tvalue,\n\t};\n}\n\n/**\n * useState with undo/redo history.\n *\n * @param initialValue Initial value.\n * @return Value, setValue, hasUndo, hasRedo, undo, redo.\n */\nexport default function useStateWithHistory< T >( initialValue: T ) {\n\tconst [ state, dispatch ] = useReducer(\n\t\tundoRedoReducer,\n\t\tinitialValue,\n\t\tinitReducer\n\t);\n\n\treturn {\n\t\tvalue: state.value,\n\t\tsetValue: useCallback( ( newValue: T, isStaged: boolean ) => {\n\t\t\tdispatch( {\n\t\t\t\ttype: 'RECORD',\n\t\t\t\tvalue: newValue,\n\t\t\t\tisStaged,\n\t\t\t} );\n\t\t}, [] ),\n\t\thasUndo: state.manager.hasUndo(),\n\t\thasRedo: state.manager.hasRedo(),\n\t\tundo: useCallback( () => {\n\t\t\tdispatch( { type: 'UNDO' } );\n\t\t}, [] ),\n\t\tredo: useCallback( () => {\n\t\t\tdispatch( { type: 'REDO' } );\n\t\t}, [] ),\n\t};\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,WAAW,EAAEC,UAAU,QAAQ,oBAAoB;AAQ5D,SAASC,eAAeA,CACvBC,KAAyB,EACzBC,MAGkD,EAC7B;EACrB,QAASA,MAAM,CAACC,IAAI;IACnB,KAAK,MAAM;MAAE;QACZ,MAAMC,UAAU,GAAGH,KAAK,CAACI,OAAO,CAACC,IAAI,CAAC,CAAC;QACvC,IAAKF,UAAU,EAAG;UACjB,OAAO;YACN,GAAGH,KAAK;YACRM,KAAK,EAAEH,UAAU,CAAE,CAAC,CAAE,CAACI,OAAO,CAACC,IAAI,CAACC;UACrC,CAAC;QACF;QACA,OAAOT,KAAK;MACb;IACA,KAAK,MAAM;MAAE;QACZ,MAAMU,UAAU,GAAGV,KAAK,CAACI,OAAO,CAACO,IAAI,CAAC,CAAC;QACvC,IAAKD,UAAU,EAAG;UACjB,OAAO;YACN,GAAGV,KAAK;YACRM,KAAK,EAAEI,UAAU,CAAE,CAAC,CAAE,CAACH,OAAO,CAACC,IAAI,CAACI;UACrC,CAAC;QACF;QACA,OAAOZ,KAAK;MACb;IACA,KAAK,QAAQ;MAAE;QACdA,KAAK,CAACI,OAAO,CAACS,SAAS,CACtB,CACC;UACCC,EAAE,EAAE,QAAQ;UACZP,OAAO,EAAE;YACRC,IAAI,EAAE;cAAEC,IAAI,EAAET,KAAK,CAACM,KAAK;cAAEM,EAAE,EAAEX,MAAM,CAACK;YAAM;UAC7C;QACD,CAAC,CACD,EACDL,MAAM,CAACc,QACR,CAAC;QACD,OAAO;UACN,GAAGf,KAAK;UACRM,KAAK,EAAEL,MAAM,CAACK;QACf,CAAC;MACF;EACD;EAEA,OAAON,KAAK;AACb;AAEA,SAASgB,WAAWA,CAAOV,KAAQ,EAAG;EACrC,OAAO;IACNF,OAAO,EAAER,iBAAiB,CAAC,CAAC;IAC5BU;EACD,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASW,mBAAmBA,CAAOC,YAAe,EAAG;EACnE,MAAM,CAAElB,KAAK,EAAEmB,QAAQ,CAAE,GAAGrB,UAAU,CACrCC,eAAe,EACfmB,YAAY,EACZF,WACD,CAAC;EAED,OAAO;IACNV,KAAK,EAAEN,KAAK,CAACM,KAAK;IAClBc,QAAQ,EAAEvB,WAAW,CAAE,CAAEwB,QAAW,EAAEN,QAAiB,KAAM;MAC5DI,QAAQ,CAAE;QACTjB,IAAI,EAAE,QAAQ;QACdI,KAAK,EAAEe,QAAQ;QACfN;MACD,CAAE,CAAC;IACJ,CAAC,EAAE,EAAG,CAAC;IACPO,OAAO,EAAEtB,KAAK,CAACI,OAAO,CAACkB,OAAO,CAAC,CAAC;IAChCC,OAAO,EAAEvB,KAAK,CAACI,OAAO,CAACmB,OAAO,CAAC,CAAC;IAChClB,IAAI,EAAER,WAAW,CAAE,MAAM;MACxBsB,QAAQ,CAAE;QAAEjB,IAAI,EAAE;MAAO,CAAE,CAAC;IAC7B,CAAC,EAAE,EAAG,CAAC;IACPS,IAAI,EAAEd,WAAW,CAAE,MAAM;MACxBsB,QAAQ,CAAE;QAAEjB,IAAI,EAAE;MAAO,CAAE,CAAC;IAC7B,CAAC,EAAE,EAAG;EACP,CAAC;AACF"}

package/build-module/index.js

@@ -33,6 +33,7 @@ export { default as useKeyboardShortcut } from './hooks/use-keyboard-shortcut';
 export { default as useMediaQuery } from './hooks/use-media-query';
 export { default as usePrevious } from './hooks/use-previous';
 export { default as useReducedMotion } from './hooks/use-reduced-motion';
+export { default as useStateWithHistory } from './hooks/use-state-with-history';
 export { default as useViewportMatch } from './hooks/use-viewport-match';
 export { default as useResizeObserver } from './hooks/use-resize-observer';
 export { default as useAsyncList } from './hooks/use-async-list';

package/build-module/index.js.map

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

package/build-module/utils/create-higher-order-component/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["pascalCase","createHigherOrderComponent","mapComponent","modifierName","Inner","Outer","displayName","hocName","name","inner","outer"],"sources":["@wordpress/compose/src/utils/create-higher-order-component/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { pascalCase } from 'change-case';\nimport type { ComponentType } from 'react';\n\ntype GetProps< C > = C extends ComponentType< infer P > ? P : never;\n\nexport type WithoutInjectedProps< C, I > = Omit< GetProps< C >, keyof I >;\n\nexport type WithInjectedProps< C, I > = ComponentType<\n\tWithoutInjectedProps< C, I > & I\n>;\n\n/**\n * Given a function mapping a component to an enhanced component and modifier\n * name, returns the enhanced component augmented with a generated displayName.\n *\n * @param mapComponent Function mapping component to enhanced component.\n * @param modifierName Seed name from which to generated display name.\n *\n * @return Component class with generated display name assigned.\n */\nexport function createHigherOrderComponent<\n\tTInner extends ComponentType< any >,\n\tTOuter extends ComponentType< any >\n>( mapComponent: ( Inner: TInner ) => TOuter, modifierName: string ) {\n\treturn ( Inner: TInner ) => {\n\t\tconst Outer = mapComponent( Inner );\n\t\tOuter.displayName = hocName( modifierName, Inner );\n\t\treturn Outer;\n\t};\n}\n\n/**\n * Returns a displayName for a higher-order component, given a wrapper name.\n *\n * @example\n *     hocName( 'MyMemo', Widget ) === 'MyMemo(Widget)';\n *     hocName( 'MyMemo', <div /> ) === 'MyMemo(Component)';\n *\n * @param name  Name assigned to higher-order component's wrapper component.\n * @param Inner Wrapped component inside higher-order component.\n * @return       Wrapped name of higher-order component.\n */\nconst hocName = ( name: string, Inner: ComponentType< any > ) => {\n\tconst inner = Inner.displayName || Inner.name || 'Component';\n\tconst outer = pascalCase( name ?? '' );\n\n\treturn `${ outer }(${ inner })`;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,aAAa;AAWxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,0BAA0BA,CAGvCC,YAAyC,EAAEC,YAAoB,EAAG;EACpE,OAASC,KAAa,IAAM;IAC3B,MAAMC,KAAK,GAAGH,YAAY,CAAEE,KAAM,CAAC;IACnCC,KAAK,CAACC,WAAW,GAAGC,OAAO,CAAEJ,YAAY,EAAEC,KAAM,CAAC;IAClD,OAAOC,KAAK;EACb,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,OAAO,GAAGA,CAAEC,IAAY,EAAEJ,KAA2B,KAAM;EAChE,MAAMK,KAAK,GAAGL,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACI,IAAI,IAAI,WAAW;EAC5D,MAAME,KAAK,GAAGV,UAAU,CAAEQ,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,EAAG,CAAC;EAEtC,OAAQ,GAAGE,KAAO,IAAID,KAAO,GAAE;AAChC,CAAC"}
+{"version":3,"names":["pascalCase","createHigherOrderComponent","mapComponent","modifierName","Inner","Outer","displayName","hocName","name","inner","outer"],"sources":["@wordpress/compose/src/utils/create-higher-order-component/index.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { pascalCase } from 'change-case';\nimport type { ComponentType } from 'react';\n\ntype GetProps< C > = C extends ComponentType< infer P > ? P : never;\n\nexport type WithoutInjectedProps< C, I > = Omit< GetProps< C >, keyof I >;\n\nexport type WithInjectedProps< C, I > = ComponentType<\n\tWithoutInjectedProps< C, I > & I\n>;\n\n/**\n * Given a function mapping a component to an enhanced component and modifier\n * name, returns the enhanced component augmented with a generated displayName.\n *\n * @param mapComponent Function mapping component to enhanced component.\n * @param modifierName Seed name from which to generated display name.\n *\n * @return Component class with generated display name assigned.\n */\nexport function createHigherOrderComponent<\n\tTInner extends ComponentType< any >,\n\tTOuter extends ComponentType< any >,\n>( mapComponent: ( Inner: TInner ) => TOuter, modifierName: string ) {\n\treturn ( Inner: TInner ) => {\n\t\tconst Outer = mapComponent( Inner );\n\t\tOuter.displayName = hocName( modifierName, Inner );\n\t\treturn Outer;\n\t};\n}\n\n/**\n * Returns a displayName for a higher-order component, given a wrapper name.\n *\n * @example\n *     hocName( 'MyMemo', Widget ) === 'MyMemo(Widget)';\n *     hocName( 'MyMemo', <div /> ) === 'MyMemo(Component)';\n *\n * @param name  Name assigned to higher-order component's wrapper component.\n * @param Inner Wrapped component inside higher-order component.\n * @return       Wrapped name of higher-order component.\n */\nconst hocName = ( name: string, Inner: ComponentType< any > ) => {\n\tconst inner = Inner.displayName || Inner.name || 'Component';\n\tconst outer = pascalCase( name ?? '' );\n\n\treturn `${ outer }(${ inner })`;\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,UAAU,QAAQ,aAAa;AAWxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,0BAA0BA,CAGvCC,YAAyC,EAAEC,YAAoB,EAAG;EACpE,OAASC,KAAa,IAAM;IAC3B,MAAMC,KAAK,GAAGH,YAAY,CAAEE,KAAM,CAAC;IACnCC,KAAK,CAACC,WAAW,GAAGC,OAAO,CAAEJ,YAAY,EAAEC,KAAM,CAAC;IAClD,OAAOC,KAAK;EACb,CAAC;AACF;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAME,OAAO,GAAGA,CAAEC,IAAY,EAAEJ,KAA2B,KAAM;EAChE,MAAMK,KAAK,GAAGL,KAAK,CAACE,WAAW,IAAIF,KAAK,CAACI,IAAI,IAAI,WAAW;EAC5D,MAAME,KAAK,GAAGV,UAAU,CAAEQ,IAAI,aAAJA,IAAI,cAAJA,IAAI,GAAI,EAAG,CAAC;EAEtC,OAAQ,GAAGE,KAAO,IAAID,KAAO,GAAE;AAChC,CAAC"}

package/build-types/higher-order/pure/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/pure/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAa3D;;;GAGG;AACH,QAAA,MAAM,IAAI,yEAwBF,CAAC;AAET,eAAe,IAAI,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/pure/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAa3D;;;GAGG;AACH,QAAA,MAAM,IAAI,yEAuBC,CAAC;AAEZ,eAAe,IAAI,CAAC"}

package/build-types/hooks/use-focus-outside/index.d.ts

@@ -1,14 +1,10 @@
-/**
- * External dependencies
- */
-import type { FocusEventHandler, MouseEventHandler, TouchEventHandler, FocusEvent } from 'react';
 type UseFocusOutsideReturn = {
-    onFocus: FocusEventHandler;
-    onMouseDown: MouseEventHandler;
-    onMouseUp: MouseEventHandler;
-    onTouchStart: TouchEventHandler;
-    onTouchEnd: TouchEventHandler;
-    onBlur: FocusEventHandler;
+    onFocus: React.FocusEventHandler;
+    onMouseDown: React.MouseEventHandler;
+    onMouseUp: React.MouseEventHandler;
+    onTouchStart: React.TouchEventHandler;
+    onTouchEnd: React.TouchEventHandler;
+    onBlur: React.FocusEventHandler;
 };
 /**
  * A react hook that can be used to check whether focus has moved outside the
@@ -20,6 +16,6 @@ type UseFocusOutsideReturn = {
  * @return An object containing event handlers. Bind the event handlers to a
  * wrapping element element to capture when focus moves outside that element.
  */
-export default function useFocusOutside(onFocusOutside: (event: FocusEvent) => void): UseFocusOutsideReturn;
+export default function useFocusOutside(onFocusOutside: ((event: React.FocusEvent) => void) | undefined): UseFocusOutsideReturn;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EACX,iBAAiB,EAEjB,iBAAiB,EACjB,iBAAiB,EACjB,UAAU,EAGV,MAAM,OAAO,CAAC;AAqDf,KAAK,qBAAqB,GAAG;IAC5B,OAAO,EAAE,iBAAiB,CAAC;IAC3B,WAAW,EAAE,iBAAiB,CAAC;IAC/B,SAAS,EAAE,iBAAiB,CAAC;IAC7B,YAAY,EAAE,iBAAiB,CAAC;IAChC,UAAU,EAAE,iBAAiB,CAAC;IAC9B,MAAM,EAAE,iBAAiB,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACtC,cAAc,EAAE,CAAE,KAAK,EAAE,UAAU,KAAM,IAAI,GAC3C,qBAAqB,CA6GvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.ts"],"names":[],"mappings":"AAmDA,KAAK,qBAAqB,GAAG;IAC5B,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,WAAW,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACrC,SAAS,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACnC,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACtC,UAAU,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACpC,MAAM,EAAE,KAAK,CAAC,iBAAiB,CAAC;CAChC,CAAC;AAEF;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CACtC,cAAc,EAAE,CAAE,CAAE,KAAK,EAAE,KAAK,CAAC,UAAU,KAAM,IAAI,CAAE,GAAG,SAAS,GACjE,qBAAqB,CA8GvB"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-media-query/index.js"],"names":[],"mappings":"AAuBA;;;;;GAKG;AACH,mEAFY,OAAO,CAgClB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-media-query/index.js"],"names":[],"mappings":"AAuBA;;;;;GAKG;AACH,mEAFY,OAAO,CAiClB"}

package/build-types/hooks/use-state-with-history/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * useState with undo/redo history.
+ *
+ * @param initialValue Initial value.
+ * @return Value, setValue, hasUndo, hasRedo, undo, redo.
+ */
+export default function useStateWithHistory<T>(initialValue: T): {
+    value: unknown;
+    setValue: (newValue: T, isStaged: boolean) => void;
+    hasUndo: boolean;
+    hasRedo: boolean;
+    undo: () => void;
+    redo: () => void;
+};
+//# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-state-with-history/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-state-with-history/index.ts"],"names":[],"mappings":"AAqEA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAE,CAAC,EAAI,YAAY,EAAE,CAAC;;yBAS5B,CAAC,YAAY,OAAO;;;;;EAgBxD"}

package/build-types/index.d.ts

@@ -24,6 +24,7 @@ export { default as useKeyboardShortcut } from "./hooks/use-keyboard-shortcut";
 export { default as useMediaQuery } from "./hooks/use-media-query";
 export { default as usePrevious } from "./hooks/use-previous";
 export { default as useReducedMotion } from "./hooks/use-reduced-motion";
+export { default as useStateWithHistory } from "./hooks/use-state-with-history";
 export { default as useViewportMatch } from "./hooks/use-viewport-match";
 export { default as useResizeObserver } from "./hooks/use-resize-observer";
 export { default as useAsyncList } from "./hooks/use-async-list";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "6.18.0",
+	"version": "6.19.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -31,12 +31,13 @@
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.41.0",
-		"@wordpress/dom": "^3.41.0",
-		"@wordpress/element": "^5.18.0",
-		"@wordpress/is-shallow-equal": "^4.41.0",
-		"@wordpress/keycodes": "^3.41.0",
-		"@wordpress/priority-queue": "^2.41.0",
+		"@wordpress/deprecated": "^3.42.0",
+		"@wordpress/dom": "^3.42.0",
+		"@wordpress/element": "^5.19.0",
+		"@wordpress/is-shallow-equal": "^4.42.0",
+		"@wordpress/keycodes": "^3.42.0",
+		"@wordpress/priority-queue": "^2.42.0",
+		"@wordpress/undo-manager": "^0.2.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
 		"mousetrap": "^1.6.5",
@@ -48,5 +49,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "5eac1734bcdca2301fdd37ec8cfe2a45e722a2c4"
+	"gitHead": "cc35f517ed017ab7131319af3e87c359e8de175d"
 }

package/src/higher-order/pure/index.tsx

@@ -41,7 +41,6 @@ const pure = createHigherOrderComponent( function < Props extends {} >(
 			return <WrappedComponent { ...this.props } />;
 		}
 	};
-},
-'pure' );
+}, 'pure' );
 
 export default pure;

package/src/hooks/use-dialog/index.ts

@@ -34,7 +34,7 @@ type DialogOptions = {
 
 type useDialogReturn = [
 	RefCallback< HTMLElement >,
-	ReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >
+	ReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,
 ];
 
 /**

package/src/hooks/use-focus-outside/index.ts

@@ -1,16 +1,3 @@
-/**
- * External dependencies
- */
-import type {
-	FocusEventHandler,
-	EventHandler,
-	MouseEventHandler,
-	TouchEventHandler,
-	FocusEvent,
-	MouseEvent,
-	TouchEvent,
-} from 'react';
-
 /**
  * WordPress dependencies
  */
@@ -63,12 +50,12 @@ function isFocusNormalizedButton(
 }
 
 type UseFocusOutsideReturn = {
-	onFocus: FocusEventHandler;
-	onMouseDown: MouseEventHandler;
-	onMouseUp: MouseEventHandler;
-	onTouchStart: TouchEventHandler;
-	onTouchEnd: TouchEventHandler;
-	onBlur: FocusEventHandler;
+	onFocus: React.FocusEventHandler;
+	onMouseDown: React.MouseEventHandler;
+	onMouseUp: React.MouseEventHandler;
+	onTouchStart: React.TouchEventHandler;
+	onTouchEnd: React.TouchEventHandler;
+	onBlur: React.FocusEventHandler;
 };
 
 /**
@@ -82,7 +69,7 @@ type UseFocusOutsideReturn = {
  * wrapping element element to capture when focus moves outside that element.
  */
 export default function useFocusOutside(
-	onFocusOutside: ( event: FocusEvent ) => void
+	onFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined
 ): UseFocusOutsideReturn {
 	const currentOnFocusOutside = useRef( onFocusOutside );
 	useEffect( () => {
@@ -122,17 +109,18 @@ export default function useFocusOutside(
 	 * @param event
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
 	 */
-	const normalizeButtonFocus: EventHandler< MouseEvent | TouchEvent > =
-		useCallback( ( event ) => {
-			const { type, target } = event;
-			const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
-
-			if ( isInteractionEnd ) {
-				preventBlurCheck.current = false;
-			} else if ( isFocusNormalizedButton( target ) ) {
-				preventBlurCheck.current = true;
-			}
-		}, [] );
+	const normalizeButtonFocus: React.EventHandler<
+		React.MouseEvent | React.TouchEvent
+	> = useCallback( ( event ) => {
+		const { type, target } = event;
+		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
+
+		if ( isInteractionEnd ) {
+			preventBlurCheck.current = false;
+		} else if ( isFocusNormalizedButton( target ) ) {
+			preventBlurCheck.current = true;
+		}
+	}, [] );
 
 	/**
 	 * A callback triggered when a blur event occurs on the element the handler
@@ -141,7 +129,7 @@ export default function useFocusOutside(
 	 * Calls the `onFocusOutside` callback in an immediate timeout if focus has
 	 * move outside the bound element and is still within the document.
 	 */
-	const queueBlurCheck: FocusEventHandler = useCallback( ( event ) => {
+	const queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {
 		// React does not allow using an event reference asynchronously
 		// due to recycling behavior, except when explicitly persisted.
 		event.persist();

package/src/hooks/use-media-query/index.js

@@ -38,9 +38,10 @@ export default function useMediaQuery( query ) {
 					return () => {};
 				}
 
-				mediaQueryList.addEventListener( 'change', onStoreChange );
+				// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.
+				mediaQueryList.addEventListener?.( 'change', onStoreChange );
 				return () => {
-					mediaQueryList.removeEventListener(
+					mediaQueryList.removeEventListener?.(
 						'change',
 						onStoreChange
 					);

package/src/hooks/use-resize-observer/index.tsx

@@ -336,7 +336,7 @@ function useResizeObserver< T extends HTMLElement >(
  */
 export default function useResizeAware(): [
 	WPElement,
-	{ width: number | null; height: number | null }
+	{ width: number | null; height: number | null },
 ] {
 	const { ref, width, height } = useResizeObserver();
 	const sizes = useMemo( () => {

package/src/hooks/use-state-with-history/index.ts

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import { createUndoManager } from '@wordpress/undo-manager';
+import { useCallback, useReducer } from '@wordpress/element';
+import type { UndoManager } from '@wordpress/undo-manager';
+
+type UndoRedoState< T > = {
+	manager: UndoManager;
+	value: T;
+};
+
+function undoRedoReducer< T >(
+	state: UndoRedoState< T >,
+	action:
+		| { type: 'UNDO' }
+		| { type: 'REDO' }
+		| { type: 'RECORD'; value: T; isStaged: boolean }
+): UndoRedoState< T > {
+	switch ( action.type ) {
+		case 'UNDO': {
+			const undoRecord = state.manager.undo();
+			if ( undoRecord ) {
+				return {
+					...state,
+					value: undoRecord[ 0 ].changes.prop.from,
+				};
+			}
+			return state;
+		}
+		case 'REDO': {
+			const redoRecord = state.manager.redo();
+			if ( redoRecord ) {
+				return {
+					...state,
+					value: redoRecord[ 0 ].changes.prop.to,
+				};
+			}
+			return state;
+		}
+		case 'RECORD': {
+			state.manager.addRecord(
+				[
+					{
+						id: 'object',
+						changes: {
+							prop: { from: state.value, to: action.value },
+						},
+					},
+				],
+				action.isStaged
+			);
+			return {
+				...state,
+				value: action.value,
+			};
+		}
+	}
+
+	return state;
+}
+
+function initReducer< T >( value: T ) {
+	return {
+		manager: createUndoManager(),
+		value,
+	};
+}
+
+/**
+ * useState with undo/redo history.
+ *
+ * @param initialValue Initial value.
+ * @return Value, setValue, hasUndo, hasRedo, undo, redo.
+ */
+export default function useStateWithHistory< T >( initialValue: T ) {
+	const [ state, dispatch ] = useReducer(
+		undoRedoReducer,
+		initialValue,
+		initReducer
+	);
+
+	return {
+		value: state.value,
+		setValue: useCallback( ( newValue: T, isStaged: boolean ) => {
+			dispatch( {
+				type: 'RECORD',
+				value: newValue,
+				isStaged,
+			} );
+		}, [] ),
+		hasUndo: state.manager.hasUndo(),
+		hasRedo: state.manager.hasRedo(),
+		undo: useCallback( () => {
+			dispatch( { type: 'UNDO' } );
+		}, [] ),
+		redo: useCallback( () => {
+			dispatch( { type: 'REDO' } );
+		}, [] ),
+	};
+}