@wordpress/compose 8.7.2-next.v.202609031004.0 → 8.8.2-next.v.202609171837.0

package/build/hooks/use-resize-observer/use-resize-observer.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-resize-observer/use-resize-observer.ts"],
-  "sourcesContent": ["import { useRef } from '@wordpress/element';\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAuB;AACvB,uBAAqB;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,oBAAgB,iBAAAA,SAAU,QAAS;AAEzC,QAAM,yBAAqB,uBAAoB,IAAK;AACpD,QAAM,wBAAoB,uBAA0B,MAAU;AAC9D,aAAO,iBAAAA,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
+  "sourcesContent": ["import { useEffect, useRef } from '@wordpress/element';\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\tuseEffect( () => {\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserverRef.current?.observe(\n\t\t\t\tobservedElementRef.current,\n\t\t\t\tresizeObserverOptions\n\t\t\t);\n\t\t}\n\t\treturn () => resizeObserverRef.current?.disconnect();\n\t\t// This effect owns the observer lifecycle. The returned ref handles\n\t\t// element and option changes without recreating the observer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAkC;AAClC,uBAAqB;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,oBAAgB,iBAAAA,SAAU,QAAS;AAEzC,QAAM,yBAAqB,uBAAoB,IAAK;AACpD,QAAM,wBAAoB,uBAA0B,MAAU;AAC9D,gCAAW,MAAM;AAChB,QAAK,mBAAmB,SAAU;AACjC,wBAAkB,SAAS;AAAA,QAC1B,mBAAmB;AAAA,QACnB;AAAA,MACD;AAAA,IACD;AACA,WAAO,MAAM,kBAAkB,SAAS,WAAW;AAAA,EAIpD,GAAG,CAAC,CAAE;AACN,aAAO,iBAAAA,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
   "names": ["useEvent"]
 }

package/build-module/hooks/use-fixed-window-list/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-fixed-window-list/index.ts"],
-  "sourcesContent": ["import { useState, useLayoutEffect, useRef } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\nimport useEvent from '../use-event';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\ninterface FixedWindowList {\n\t/** Items visible in the viewport, as of the last rendered window */\n\tvisibleItems: number;\n\t/** Start index of the window */\n\tstart: number;\n\t/** End index of the window */\n\tend: number;\n\t/** Returns true if item is in the window */\n\titemInView: ( index: number ) => boolean;\n}\n\ninterface FixedWindowListOptions {\n\t/** Renders windowOverscan number of items before and after the calculated visible window. */\n\twindowOverscan?: number;\n\t/** When false avoids calculating the window size */\n\tuseWindowing?: boolean;\n\t/** Initial window size to use on first render before we can calculate the window size. */\n\tinitWindowSize?: number;\n\t/** Used to recalculate the window size when the expanded state of a list changes. */\n\texpandedState?: any;\n}\n\n/**\n *\n * @param elementRef Used to find the closest scroll container that contains element.\n * @param itemHeight Fixed item height in pixels\n * @param totalItems Total items in list\n * @param [options]  Options object\n * @return Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef: React.RefObject< HTMLElement >,\n\titemHeight: number,\n\ttotalItems: number,\n\toptions?: FixedWindowListOptions\n): [\n\tFixedWindowList,\n\tReact.Dispatch< React.SetStateAction< FixedWindowList > >,\n] {\n\tconst {\n\t\twindowOverscan,\n\t\tuseWindowing = true,\n\t\tinitWindowSize = DEFAULT_INIT_WINDOW_SIZE,\n\t\texpandedState,\n\t} = options ?? {};\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState< FixedWindowList >(\n\t\t{\n\t\t\tvisibleItems: initWindowSize,\n\t\t\tstart: 0,\n\t\t\tend: initWindowSize,\n\t\t\titemInView: ( index: number ) => {\n\t\t\t\treturn index >= 0 && index <= initWindowSize;\n\t\t\t},\n\t\t}\n\t);\n\n\t// Kept out of state so that measuring the list does not, on its own, force a\n\t// re-render. Only the rendered window does that.\n\tconst visibleItemsRef = useRef( initWindowSize );\n\n\t// The measuring effect re-runs whenever the list changes, so the effect\n\t// running can't on its own tell the very first measurement from later ones.\n\tconst isFirstMeasurementRef = useRef( true );\n\n\t// Stable identity, so the listeners below never have to be re-attached, and\n\t// reads the latest props on every call.\n\tconst measureWindow = useEvent( ( initRender?: boolean ) => {\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tif ( ! scrollContainer ) {\n\t\t\treturn;\n\t\t}\n\t\tconst visibleItems = Math.ceil(\n\t\t\tscrollContainer.clientHeight / itemHeight\n\t\t);\n\t\tvisibleItemsRef.current = visibleItems;\n\t\tconst isFirstMeasurement = isFirstMeasurementRef.current;\n\t\tisFirstMeasurementRef.current = false;\n\t\t// Aim to keep opening list view fast, afterward we can optimize for scrolling.\n\t\tconst overscan = initRender\n\t\t\t? visibleItems\n\t\t\t: windowOverscan ?? visibleItems;\n\t\tconst firstViewableIndex = Math.floor(\n\t\t\tscrollContainer.scrollTop / itemHeight\n\t\t);\n\t\tconst start = Math.max( 0, firstViewableIndex - overscan );\n\t\tconst end = Math.min(\n\t\t\ttotalItems - 1,\n\t\t\tfirstViewableIndex + visibleItems + overscan\n\t\t);\n\t\tsetFixedListWindow( ( lastWindow ) => {\n\t\t\t// Rendering the window is the expensive part, and for the items in\n\t\t\t// `lastWindow` it is already paid for. When the next window has\n\t\t\t// nothing to add, keep the current one: a window that only shrinks\n\t\t\t// drops nodes that are known to be needed again and forces another\n\t\t\t// style recalculation, with nothing new to show for it.\n\t\t\tif ( lastWindow.start <= start && lastWindow.end >= end ) {\n\t\t\t\treturn lastWindow;\n\t\t\t}\n\t\t\t// The first window is rendered before the list can be measured, so\n\t\t\t// it is sized by `initWindowSize` rather than by the viewport, and\n\t\t\t// the measured window is normally wider than it by the overscan.\n\t\t\t// Nothing has painted yet though, so there is no scrolling for the\n\t\t\t// overscan to absorb: covering the visible items is enough, and\n\t\t\t// keeping that window saves a render pass while the list opens.\n\t\t\tif (\n\t\t\t\tisFirstMeasurement &&\n\t\t\t\tlastWindow.start <= firstViewableIndex &&\n\t\t\t\tlastWindow.end >= firstViewableIndex + visibleItems\n\t\t\t) {\n\t\t\t\treturn lastWindow;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tvisibleItems,\n\t\t\t\tstart,\n\t\t\t\tend,\n\t\t\t\titemInView: ( index: number ) => {\n\t\t\t\t\treturn start <= index && index <= end;\n\t\t\t\t},\n\t\t\t};\n\t\t} );\n\t} );\n\n\tconst handleKeyDown = useEvent(\n\t\t( event: KeyboardEvent, scrollContainer: Element ) => {\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\tcase HOME: {\n\t\t\t\t\treturn scrollContainer.scrollTo( { top: 0 } );\n\t\t\t\t}\n\t\t\t\tcase END: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop: totalItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEUP: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop -\n\t\t\t\t\t\t\tvisibleItemsRef.current * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEDOWN: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop +\n\t\t\t\t\t\t\tvisibleItemsRef.current * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t);\n\n\t// Measure whenever something that the window is derived from changes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tmeasureWindow( true );\n\t}, [\n\t\tuseWindowing,\n\t\tmeasureWindow,\n\t\titemHeight,\n\t\ttotalItems,\n\t\twindowOverscan,\n\t\texpandedState,\n\t] );\n\n\t// Only ever attaches and detaches listeners. The deps are the things that\n\t// can change which element the scroll container is, or whether there is one\n\t// at all: a list that is too short to overflow has no scroll container to\n\t// attach to, and it grows into one by gaining items or by being expanded.\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tif ( ! scrollContainer ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { defaultView } = scrollContainer.ownerDocument;\n\t\t// `scroll` and `resize` already fire at about the rendering rate, so\n\t\t// there is nothing to gain from debouncing them.\n\t\tconst onMeasure = () => measureWindow();\n\t\tconst onKeyDown = ( event: KeyboardEvent ) =>\n\t\t\thandleKeyDown( event, scrollContainer );\n\n\t\tscrollContainer.addEventListener( 'scroll', onMeasure );\n\t\tdefaultView?.addEventListener( 'resize', onMeasure );\n\t\tdefaultView?.addEventListener( 'keydown', onKeyDown );\n\n\t\treturn () => {\n\t\t\tscrollContainer.removeEventListener( 'scroll', onMeasure );\n\t\t\tdefaultView?.removeEventListener( 'resize', onMeasure );\n\t\t\tdefaultView?.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [\n\t\tuseWindowing,\n\t\telementRef,\n\t\titemHeight,\n\t\ttotalItems,\n\t\texpandedState,\n\t\tmeasureWindow,\n\t\thandleKeyDown,\n\t] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useState, useLayoutEffect, useRef } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\nimport useEvent from '../use-event';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\ninterface FixedWindowList {\n\t/** Items visible in the viewport, as of the last rendered window */\n\tvisibleItems: number;\n\t/** Start index of the window */\n\tstart: number;\n\t/** End index of the window */\n\tend: number;\n\t/** Returns true if item is in the window */\n\titemInView: ( index: number ) => boolean;\n}\n\ninterface FixedWindowListOptions {\n\t/** Renders windowOverscan number of items before and after the calculated visible window. */\n\twindowOverscan?: number;\n\t/** When false avoids calculating the window size */\n\tuseWindowing?: boolean;\n\t/** Initial window size to use on first render before we can calculate the window size. */\n\tinitWindowSize?: number;\n\t/** Used to recalculate the window size when the expanded state of a list changes. */\n\texpandedState?: any;\n}\n\n/**\n *\n * @param elementRef Used to find the closest scroll container that contains element.\n * @param itemHeight Fixed item height in pixels\n * @param totalItems Total items in list\n * @param [options]  Options object\n * @return Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef: React.RefObject< HTMLElement >,\n\titemHeight: number,\n\ttotalItems: number,\n\toptions?: FixedWindowListOptions\n): [\n\tFixedWindowList,\n\tReact.Dispatch< React.SetStateAction< FixedWindowList > >,\n] {\n\tconst {\n\t\twindowOverscan,\n\t\tuseWindowing = true,\n\t\tinitWindowSize = DEFAULT_INIT_WINDOW_SIZE,\n\t\texpandedState,\n\t} = options ?? {};\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState< FixedWindowList >(\n\t\t{\n\t\t\tvisibleItems: initWindowSize,\n\t\t\tstart: 0,\n\t\t\tend: initWindowSize,\n\t\t\titemInView: ( index: number ) => {\n\t\t\t\treturn index >= 0 && index <= initWindowSize;\n\t\t\t},\n\t\t}\n\t);\n\n\t// Kept out of state so that measuring the list does not, on its own, force a\n\t// re-render. Only the rendered window does that.\n\tconst visibleItemsRef = useRef( initWindowSize );\n\n\t// The measuring effect re-runs whenever the list changes, so the effect\n\t// running can't on its own tell the very first measurement from later ones.\n\tconst isFirstMeasurementRef = useRef( true );\n\n\t// Stable identity, so the listeners below never have to be re-attached, and\n\t// reads the latest props on every call.\n\tconst measureWindow = useEvent( ( initRender?: boolean ) => {\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tif ( ! scrollContainer ) {\n\t\t\treturn;\n\t\t}\n\t\tconst visibleItems = Math.ceil(\n\t\t\tscrollContainer.clientHeight / itemHeight\n\t\t);\n\t\tvisibleItemsRef.current = visibleItems;\n\t\tconst isFirstMeasurement = isFirstMeasurementRef.current;\n\t\tisFirstMeasurementRef.current = false;\n\t\t// Aim to keep opening list view fast, afterward we can optimize for scrolling.\n\t\tconst overscan = initRender\n\t\t\t? visibleItems\n\t\t\t: ( windowOverscan ?? visibleItems );\n\t\tconst firstViewableIndex = Math.floor(\n\t\t\tscrollContainer.scrollTop / itemHeight\n\t\t);\n\t\tconst start = Math.max( 0, firstViewableIndex - overscan );\n\t\tconst end = Math.min(\n\t\t\ttotalItems - 1,\n\t\t\tfirstViewableIndex + visibleItems + overscan\n\t\t);\n\t\tsetFixedListWindow( ( lastWindow ) => {\n\t\t\t// Rendering the window is the expensive part, and for the items in\n\t\t\t// `lastWindow` it is already paid for. When the next window has\n\t\t\t// nothing to add, keep the current one: a window that only shrinks\n\t\t\t// drops nodes that are known to be needed again and forces another\n\t\t\t// style recalculation, with nothing new to show for it.\n\t\t\tif ( lastWindow.start <= start && lastWindow.end >= end ) {\n\t\t\t\treturn lastWindow;\n\t\t\t}\n\t\t\t// The first window is rendered before the list can be measured, so\n\t\t\t// it is sized by `initWindowSize` rather than by the viewport, and\n\t\t\t// the measured window is normally wider than it by the overscan.\n\t\t\t// Nothing has painted yet though, so there is no scrolling for the\n\t\t\t// overscan to absorb: covering the visible items is enough, and\n\t\t\t// keeping that window saves a render pass while the list opens.\n\t\t\tif (\n\t\t\t\tisFirstMeasurement &&\n\t\t\t\tlastWindow.start <= firstViewableIndex &&\n\t\t\t\tlastWindow.end >= firstViewableIndex + visibleItems\n\t\t\t) {\n\t\t\t\treturn lastWindow;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tvisibleItems,\n\t\t\t\tstart,\n\t\t\t\tend,\n\t\t\t\titemInView: ( index: number ) => {\n\t\t\t\t\treturn start <= index && index <= end;\n\t\t\t\t},\n\t\t\t};\n\t\t} );\n\t} );\n\n\tconst handleKeyDown = useEvent(\n\t\t( event: KeyboardEvent, scrollContainer: Element ) => {\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\tcase HOME: {\n\t\t\t\t\treturn scrollContainer.scrollTo( { top: 0 } );\n\t\t\t\t}\n\t\t\t\tcase END: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop: totalItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEUP: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop -\n\t\t\t\t\t\t\tvisibleItemsRef.current * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEDOWN: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop +\n\t\t\t\t\t\t\tvisibleItemsRef.current * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t);\n\n\t// Measure whenever something that the window is derived from changes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tmeasureWindow( true );\n\t}, [\n\t\tuseWindowing,\n\t\tmeasureWindow,\n\t\titemHeight,\n\t\ttotalItems,\n\t\twindowOverscan,\n\t\texpandedState,\n\t] );\n\n\t// Only ever attaches and detaches listeners. The deps are the things that\n\t// can change which element the scroll container is, or whether there is one\n\t// at all: a list that is too short to overflow has no scroll container to\n\t// attach to, and it grows into one by gaining items or by being expanded.\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tif ( ! scrollContainer ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { defaultView } = scrollContainer.ownerDocument;\n\t\t// `scroll` and `resize` already fire at about the rendering rate, so\n\t\t// there is nothing to gain from debouncing them.\n\t\tconst onMeasure = () => measureWindow();\n\t\tconst onKeyDown = ( event: KeyboardEvent ) =>\n\t\t\thandleKeyDown( event, scrollContainer );\n\n\t\tscrollContainer.addEventListener( 'scroll', onMeasure );\n\t\tdefaultView?.addEventListener( 'resize', onMeasure );\n\t\tdefaultView?.addEventListener( 'keydown', onKeyDown );\n\n\t\treturn () => {\n\t\t\tscrollContainer.removeEventListener( 'scroll', onMeasure );\n\t\t\tdefaultView?.removeEventListener( 'resize', onMeasure );\n\t\t\tdefaultView?.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [\n\t\tuseWindowing,\n\t\telementRef,\n\t\titemHeight,\n\t\ttotalItems,\n\t\texpandedState,\n\t\tmeasureWindow,\n\t\thandleKeyDown,\n\t] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/build-module/hooks/use-focus-outside/index.mjs

@@ -51,6 +51,7 @@ function useFocusOutside(onFocusOutside) {
     if (ignoreForRelatedTarget && event.relatedTarget?.closest(ignoreForRelatedTarget)) {
       return;
     }
+    clearTimeout(blurCheckTimeoutIdRef.current);
     blurCheckTimeoutIdRef.current = setTimeout(() => {
       if (!document.hasFocus()) {
         event.preventDefault();

package/build-module/hooks/use-focus-outside/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-focus-outside/index.ts"],
-  "sourcesContent": ["import { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\t| HTMLButtonElement\n\t| HTMLLinkElement\n\t| HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: React.FocusEventHandler;\n\tonMouseDown: React.MouseEventHandler;\n\tonMouseUp: React.MouseEventHandler;\n\tonTouchStart: React.TouchEventHandler;\n\tonTouchEnd: React.TouchEventHandler;\n\tonBlur: React.FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n *                       the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutsideRef = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutsideRef.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheckRef = useRef( false );\n\n\tconst blurCheckTimeoutIdRef = useRef< number >( undefined );\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutIdRef.current );\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: React.EventHandler<\n\t\tReact.MouseEvent | React.TouchEvent\n\t> = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheckRef.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheckRef.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheckRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The usage of this attribute should be avoided. The only use case\n\t\t// would be when we load modals that are not React components and\n\t\t// therefore don't exist in the React tree. An example is opening\n\t\t// the Media Library modal from another dialog.\n\t\t// This attribute should contain a selector of the related target\n\t\t// we want to ignore, because we still need to trigger the blur event\n\t\t// on all other cases.\n\t\tconst ignoreForRelatedTarget = event.target.getAttribute(\n\t\t\t'data-unstable-ignore-focus-outside-for-relatedtarget'\n\t\t);\n\t\tif (\n\t\t\tignoreForRelatedTarget &&\n\t\t\tevent.relatedTarget?.closest( ignoreForRelatedTarget )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutIdRef.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutsideRef.current ) {\n\t\t\t\tcurrentOnFocusOutsideRef.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],
-  "mappings": ";AAAA,SAAS,aAAa,WAAW,cAAc;AAM/C,IAAM,qBAAqB,CAAE,UAAU,QAAS;AAsBhD,SAAS,wBACR,aACuC;AACvC,MAAK,EAAI,uBAAuB,OAAO,cAAgB;AACtD,WAAO;AAAA,EACR;AACA,UAAS,YAAY,UAAW;AAAA,IAC/B,KAAK;AAAA,IACL,KAAK;AACJ,aAAO;AAAA,IAER,KAAK;AACJ,aAAO,mBAAmB;AAAA,QACvB,YAAkC;AAAA,MACrC;AAAA,EACF;AAEA,SAAO;AACR;AAqBe,SAAR,gBACN,gBACwB;AACxB,QAAM,2BAA2B,OAAQ,cAAe;AACxD,YAAW,MAAM;AAChB,6BAAyB,UAAU;AAAA,EACpC,GAAG,CAAE,cAAe,CAAE;AAEtB,QAAM,sBAAsB,OAAQ,KAAM;AAE1C,QAAM,wBAAwB,OAAkB,MAAU;AAK1D,QAAM,kBAAkB,YAAa,MAAM;AAC1C,iBAAc,sBAAsB,OAAQ;AAAA,EAC7C,GAAG,CAAC,CAAE;AAGN,YAAW,MAAM;AAChB,QAAK,CAAE,gBAAiB;AACvB,sBAAgB;AAAA,IACjB;AAAA,EACD,GAAG,CAAE,gBAAgB,eAAgB,CAAE;AAYvC,QAAM,uBAEF,YAAa,CAAE,UAAW;AAC7B,UAAM,EAAE,MAAM,OAAO,IAAI;AACzB,UAAM,mBAAmB,CAAE,WAAW,UAAW,EAAE,SAAU,IAAK;AAElE,QAAK,kBAAmB;AACvB,0BAAoB,UAAU;AAAA,IAC/B,WAAY,wBAAyB,MAAO,GAAI;AAC/C,0BAAoB,UAAU;AAAA,IAC/B;AAAA,EACD,GAAG,CAAC,CAAE;AASN,QAAM,iBAA0C,YAAa,CAAE,UAAW;AAGzE,UAAM,QAAQ;AAGd,QAAK,oBAAoB,SAAU;AAClC;AAAA,IACD;AASA,UAAM,yBAAyB,MAAM,OAAO;AAAA,MAC3C;AAAA,IACD;AACA,QACC,0BACA,MAAM,eAAe,QAAS,sBAAuB,GACpD;AACD;AAAA,IACD;AAEA,0BAAsB,UAAU,WAAY,MAAM;AAKjD,UAAK,CAAE,SAAS,SAAS,GAAI;AAC5B,cAAM,eAAe;AACrB;AAAA,MACD;AAEA,UAAK,eAAe,OAAO,yBAAyB,SAAU;AAC7D,iCAAyB,QAAS,KAAM;AAAA,MACzC;AAAA,IACD,GAAG,CAAE;AAAA,EACN,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,EACT;AACD;",
+  "sourcesContent": ["import { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\tHTMLButtonElement | HTMLLinkElement | HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: React.FocusEventHandler;\n\tonMouseDown: React.MouseEventHandler;\n\tonMouseUp: React.MouseEventHandler;\n\tonTouchStart: React.TouchEventHandler;\n\tonTouchEnd: React.TouchEventHandler;\n\tonBlur: React.FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n *                       the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutsideRef = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutsideRef.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheckRef = useRef( false );\n\n\tconst blurCheckTimeoutIdRef = useRef< number >( undefined );\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutIdRef.current );\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: React.EventHandler<\n\t\tReact.MouseEvent | React.TouchEvent\n\t> = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheckRef.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheckRef.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheckRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The usage of this attribute should be avoided. The only use case\n\t\t// would be when we load modals that are not React components and\n\t\t// therefore don't exist in the React tree. An example is opening\n\t\t// the Media Library modal from another dialog.\n\t\t// This attribute should contain a selector of the related target\n\t\t// we want to ignore, because we still need to trigger the blur event\n\t\t// on all other cases.\n\t\tconst ignoreForRelatedTarget = event.target.getAttribute(\n\t\t\t'data-unstable-ignore-focus-outside-for-relatedtarget'\n\t\t);\n\t\tif (\n\t\t\tignoreForRelatedTarget &&\n\t\t\tevent.relatedTarget?.closest( ignoreForRelatedTarget )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Keep only the latest blur check so a subsequent focus event can cancel it.\n\t\tclearTimeout( blurCheckTimeoutIdRef.current );\n\t\tblurCheckTimeoutIdRef.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutsideRef.current ) {\n\t\t\t\tcurrentOnFocusOutsideRef.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],
+  "mappings": ";AAAA,SAAS,aAAa,WAAW,cAAc;AAM/C,IAAM,qBAAqB,CAAE,UAAU,QAAS;AAoBhD,SAAS,wBACR,aACuC;AACvC,MAAK,EAAI,uBAAuB,OAAO,cAAgB;AACtD,WAAO;AAAA,EACR;AACA,UAAS,YAAY,UAAW;AAAA,IAC/B,KAAK;AAAA,IACL,KAAK;AACJ,aAAO;AAAA,IAER,KAAK;AACJ,aAAO,mBAAmB;AAAA,QACvB,YAAkC;AAAA,MACrC;AAAA,EACF;AAEA,SAAO;AACR;AAqBe,SAAR,gBACN,gBACwB;AACxB,QAAM,2BAA2B,OAAQ,cAAe;AACxD,YAAW,MAAM;AAChB,6BAAyB,UAAU;AAAA,EACpC,GAAG,CAAE,cAAe,CAAE;AAEtB,QAAM,sBAAsB,OAAQ,KAAM;AAE1C,QAAM,wBAAwB,OAAkB,MAAU;AAK1D,QAAM,kBAAkB,YAAa,MAAM;AAC1C,iBAAc,sBAAsB,OAAQ;AAAA,EAC7C,GAAG,CAAC,CAAE;AAGN,YAAW,MAAM;AAChB,QAAK,CAAE,gBAAiB;AACvB,sBAAgB;AAAA,IACjB;AAAA,EACD,GAAG,CAAE,gBAAgB,eAAgB,CAAE;AAYvC,QAAM,uBAEF,YAAa,CAAE,UAAW;AAC7B,UAAM,EAAE,MAAM,OAAO,IAAI;AACzB,UAAM,mBAAmB,CAAE,WAAW,UAAW,EAAE,SAAU,IAAK;AAElE,QAAK,kBAAmB;AACvB,0BAAoB,UAAU;AAAA,IAC/B,WAAY,wBAAyB,MAAO,GAAI;AAC/C,0BAAoB,UAAU;AAAA,IAC/B;AAAA,EACD,GAAG,CAAC,CAAE;AASN,QAAM,iBAA0C,YAAa,CAAE,UAAW;AAGzE,UAAM,QAAQ;AAGd,QAAK,oBAAoB,SAAU;AAClC;AAAA,IACD;AASA,UAAM,yBAAyB,MAAM,OAAO;AAAA,MAC3C;AAAA,IACD;AACA,QACC,0BACA,MAAM,eAAe,QAAS,sBAAuB,GACpD;AACD;AAAA,IACD;AAGA,iBAAc,sBAAsB,OAAQ;AAC5C,0BAAsB,UAAU,WAAY,MAAM;AAKjD,UAAK,CAAE,SAAS,SAAS,GAAI;AAC5B,cAAM,eAAe;AACrB;AAAA,MACD;AAEA,UAAK,eAAe,OAAO,yBAAyB,SAAU;AAC7D,iCAAyB,QAAS,KAAM;AAAA,MACzC;AAAA,IACD,GAAG,CAAE;AAAA,EACN,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,EACT;AACD;",
   "names": []
 }

package/build-module/hooks/use-keyboard-shortcut/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-keyboard-shortcut/index.ts"],
-  "sourcesContent": ["import Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\nimport type { ExtendedKeyboardEvent } from 'mousetrap';\nimport type { RefObject } from '@wordpress/element';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\ntype KeyboardShortcutConfig = {\n\t/**\n\t * Handle keyboard events anywhere including inside textarea/input fields.\n\t */\n\tbindGlobal: boolean;\n\t/**\n\t * Event name used to trigger the handler, defaults to keydown.\n\t */\n\teventName: string;\n\t/**\n\t * Disables the keyboard handler if the value is true.\n\t */\n\tisDisabled: boolean;\n\t/**\n\t * React reference to the DOM element used to catch the keyboard event.\n\t */\n\ttarget: RefObject< HTMLElement >;\n};\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param shortcuts          Keyboard Shortcuts.\n * @param callback           Shortcut callback.\n * @param options            Shortcut options.\n * @param options.bindGlobal\n * @param options.eventName\n * @param options.isDisabled\n * @param options.target\n */\nfunction useKeyboardShortcut(\n\tshortcuts: string[] | string,\n\tcallback: ( e: ExtendedKeyboardEvent, combo: string ) => void,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false,\n\t\ttarget,\n\t}: Partial< KeyboardShortcutConfig > = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\n\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t  // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t  // necessary to maintain the existing behavior.\n\t\t\t\t  ( document as unknown as Element )\n\t\t);\n\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\n\t\tshortcutsArray.forEach( ( shortcut: string ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// `@ts-expect-error` Mousetrap typings don’t include `bindGlobal`\n\t\t\t// It exists at runtime via the plugin\n\t\t\t// `any` is used here to allow dynamic access via `bindFn`\n\t\t\t( mousetrap as any )[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t( ...args: [ Mousetrap.ExtendedKeyboardEvent, string ] ) =>\n\t\t\t\t\tcurrentCallbackRef.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],
-  "mappings": ";AAAA,OAAO,eAAe;AACtB,OAAO;AAGP,SAAS,WAAW,cAAc;AAClC,SAAS,iBAAiB;AAkC1B,SAAS,oBACR,WACA,UACA;AAAA,EACC,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AACD,IAAuC,CAAC,GACvC;AACD,QAAM,qBAAqB,OAAQ,QAAS;AAE5C,YAAW,MAAM;AAChB,uBAAmB,UAAU;AAAA,EAC9B,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAChB,QAAK,YAAa;AACjB;AAAA,IACD;AAEA,UAAM,YAAY,IAAI;AAAA,MACrB,UAAU,OAAO,UACd,OAAO;AAAA;AAAA;AAAA;AAAA,QAIL;AAAA;AAAA,IACN;AAEA,UAAM,iBAAiB,MAAM,QAAS,SAAU,IAC7C,YACA,CAAE,SAAU;AAEf,mBAAe,QAAS,CAAE,aAAsB;AAC/C,YAAM,OAAO,SAAS,MAAO,GAAI;AACjC,YAAM,YAAY,IAAI;AAAA,QACrB,KAAK,OAAQ,CAAE,UAAW,MAAM,SAAS,CAAE;AAAA,MAC5C;AACA,YAAM,SAAS,UAAU,IAAK,KAAM;AACpC,YAAM,WAAW,UAAU,IAAK,OAAQ;AAExC,UACC,UAAU,MACN,UAAU,SAAS,KAAK,UACzB,UAAU,SAAS,KAAK,UAAU,WACpC;AACD,cAAM,IAAI;AAAA,UACT,eAAgB,QAAS;AAAA,QAC1B;AAAA,MACD;AAEA,YAAM,SAAS,aAAa,eAAe;AAI3C,MAAE,UAAoB,MAAO;AAAA,QAC5B;AAAA,QACA,IAAK,SACJ,mBAAmB,QAAS,GAAG,IAAK;AAAA,QACrC;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,gBAAU,MAAM;AAAA,IACjB;AAAA,EACD,GAAG,CAAE,WAAW,YAAY,WAAW,QAAQ,UAAW,CAAE;AAC7D;AAEA,IAAO,gCAAQ;",
+  "sourcesContent": ["import Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\nimport type { ExtendedKeyboardEvent } from 'mousetrap';\nimport type { RefObject } from '@wordpress/element';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\ntype KeyboardShortcutConfig = {\n\t/**\n\t * Handle keyboard events anywhere including inside textarea/input fields.\n\t */\n\tbindGlobal: boolean;\n\t/**\n\t * Event name used to trigger the handler, defaults to keydown.\n\t */\n\teventName: string;\n\t/**\n\t * Disables the keyboard handler if the value is true.\n\t */\n\tisDisabled: boolean;\n\t/**\n\t * React reference to the DOM element used to catch the keyboard event.\n\t */\n\ttarget: RefObject< HTMLElement >;\n};\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param shortcuts          Keyboard Shortcuts.\n * @param callback           Shortcut callback.\n * @param options            Shortcut options.\n * @param options.bindGlobal\n * @param options.eventName\n * @param options.isDisabled\n * @param options.target\n */\nfunction useKeyboardShortcut(\n\tshortcuts: string[] | string,\n\tcallback: ( e: ExtendedKeyboardEvent, combo: string ) => void,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false,\n\t\ttarget,\n\t}: Partial< KeyboardShortcutConfig > = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\n\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t\t// Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t\t// necessary to maintain the existing behavior.\n\t\t\t\t\t( document as unknown as Element )\n\t\t);\n\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\n\t\tshortcutsArray.forEach( ( shortcut: string ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// `@ts-expect-error` Mousetrap typings don’t include `bindGlobal`\n\t\t\t// It exists at runtime via the plugin\n\t\t\t// `any` is used here to allow dynamic access via `bindFn`\n\t\t\t( mousetrap as any )[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t( ...args: [ Mousetrap.ExtendedKeyboardEvent, string ] ) =>\n\t\t\t\t\tcurrentCallbackRef.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],
+  "mappings": ";AAAA,OAAO,eAAe;AACtB,OAAO;AAGP,SAAS,WAAW,cAAc;AAClC,SAAS,iBAAiB;AAkC1B,SAAS,oBACR,WACA,UACA;AAAA,EACC,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AACD,IAAuC,CAAC,GACvC;AACD,QAAM,qBAAqB,OAAQ,QAAS;AAE5C,YAAW,MAAM;AAChB,uBAAmB,UAAU;AAAA,EAC9B,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAChB,QAAK,YAAa;AACjB;AAAA,IACD;AAEA,UAAM,YAAY,IAAI;AAAA,MACrB,UAAU,OAAO,UACd,OAAO;AAAA;AAAA;AAAA;AAAA,QAIN;AAAA;AAAA,IACL;AAEA,UAAM,iBAAiB,MAAM,QAAS,SAAU,IAC7C,YACA,CAAE,SAAU;AAEf,mBAAe,QAAS,CAAE,aAAsB;AAC/C,YAAM,OAAO,SAAS,MAAO,GAAI;AACjC,YAAM,YAAY,IAAI;AAAA,QACrB,KAAK,OAAQ,CAAE,UAAW,MAAM,SAAS,CAAE;AAAA,MAC5C;AACA,YAAM,SAAS,UAAU,IAAK,KAAM;AACpC,YAAM,WAAW,UAAU,IAAK,OAAQ;AAExC,UACC,UAAU,MACN,UAAU,SAAS,KAAK,UACzB,UAAU,SAAS,KAAK,UAAU,WACpC;AACD,cAAM,IAAI;AAAA,UACT,eAAgB,QAAS;AAAA,QAC1B;AAAA,MACD;AAEA,YAAM,SAAS,aAAa,eAAe;AAI3C,MAAE,UAAoB,MAAO;AAAA,QAC5B;AAAA,QACA,IAAK,SACJ,mBAAmB,QAAS,GAAG,IAAK;AAAA,QACrC;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,gBAAU,MAAM;AAAA,IACjB;AAAA,EACD,GAAG,CAAE,WAAW,YAAY,WAAW,QAAQ,UAAW,CAAE;AAC7D;AAEA,IAAO,gCAAQ;",
   "names": []
 }

package/build-module/hooks/use-resize-observer/use-resize-observer.mjs

@@ -1,10 +1,19 @@
 // packages/compose/src/hooks/use-resize-observer/use-resize-observer.ts
-import { useRef } from "@wordpress/element";
+import { useEffect, useRef } from "@wordpress/element";
 import useEvent from "../use-event/index.mjs";
 function useResizeObserver(callback, resizeObserverOptions = {}) {
   const callbackEvent = useEvent(callback);
   const observedElementRef = useRef(null);
   const resizeObserverRef = useRef(void 0);
+  useEffect(() => {
+    if (observedElementRef.current) {
+      resizeObserverRef.current?.observe(
+        observedElementRef.current,
+        resizeObserverOptions
+      );
+    }
+    return () => resizeObserverRef.current?.disconnect();
+  }, []);
   return useEvent((element) => {
     if (element === observedElementRef.current) {
       return;

package/build-module/hooks/use-resize-observer/use-resize-observer.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-resize-observer/use-resize-observer.ts"],
-  "sourcesContent": ["import { useRef } from '@wordpress/element';\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
-  "mappings": ";AAAA,SAAS,cAAc;AACvB,OAAO,cAAc;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,gBAAgB,SAAU,QAAS;AAEzC,QAAM,qBAAqB,OAAoB,IAAK;AACpD,QAAM,oBAAoB,OAA0B,MAAU;AAC9D,SAAO,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
+  "sourcesContent": ["import { useEffect, useRef } from '@wordpress/element';\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\tuseEffect( () => {\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserverRef.current?.observe(\n\t\t\t\tobservedElementRef.current,\n\t\t\t\tresizeObserverOptions\n\t\t\t);\n\t\t}\n\t\treturn () => resizeObserverRef.current?.disconnect();\n\t\t// This effect owns the observer lifecycle. The returned ref handles\n\t\t// element and option changes without recreating the observer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
+  "mappings": ";AAAA,SAAS,WAAW,cAAc;AAClC,OAAO,cAAc;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,gBAAgB,SAAU,QAAS;AAEzC,QAAM,qBAAqB,OAAoB,IAAK;AACpD,QAAM,oBAAoB,OAA0B,MAAU;AAC9D,YAAW,MAAM;AAChB,QAAK,mBAAmB,SAAU;AACjC,wBAAkB,SAAS;AAAA,QAC1B,mBAAmB;AAAA,QACnB;AAAA,MACD;AAAA,IACD;AACA,WAAO,MAAM,kBAAkB,SAAS,WAAW;AAAA,EAIpD,GAAG,CAAC,CAAE;AACN,SAAO,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
   "names": []
 }

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":"AAgDA,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,CAyGvB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.ts"],"names":[],"mappings":"AA8CA,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,CA2GvB"}

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

@@ -1 +1 @@
-{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/use-resize-observer.ts"],"names":[],"mappings":"AAQA,wBAAgB,iBAAiB,CAAE,CAAC,SAAS,WAAW,EACvD,QAAQ,EAAE,sBAAsB,EAChC,qBAAqB,GAAE,qBAA0B,GAC/C,CAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,KAAM,IAAI,CAyBhC"}
+{"version":3,"file":"use-resize-observer.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-resize-observer/use-resize-observer.ts"],"names":[],"mappings":"AAQA,wBAAgB,iBAAiB,CAAE,CAAC,SAAS,WAAW,EACvD,QAAQ,EAAE,sBAAsB,EAChC,qBAAqB,GAAE,qBAA0B,GAC/C,CAAE,OAAO,CAAC,EAAE,CAAC,GAAG,IAAI,KAAM,IAAI,CAqChC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "8.7.2-next.v.202609031004.0",
+	"version": "8.8.2-next.v.202609171837.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -46,26 +46,26 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.54.1-next.v.202609031004.0",
-		"@wordpress/dom": "^4.54.1-next.v.202609031004.0",
-		"@wordpress/element": "^8.6.2-next.v.202609031004.0",
-		"@wordpress/is-shallow-equal": "^5.54.1-next.v.202609031004.0",
-		"@wordpress/keycodes": "^4.54.1-next.v.202609031004.0",
-		"@wordpress/priority-queue": "^3.54.1-next.v.202609031004.0",
-		"@wordpress/private-apis": "^1.54.2-next.v.202609031004.0",
-		"@wordpress/undo-manager": "^1.54.1-next.v.202609031004.0",
+		"@wordpress/deprecated": "^4.55.1-next.v.202609171837.0",
+		"@wordpress/dom": "^4.55.2-next.v.202609171837.0",
+		"@wordpress/element": "^8.7.1-next.v.202609171837.0",
+		"@wordpress/is-shallow-equal": "^5.55.1-next.v.202609171837.0",
+		"@wordpress/keycodes": "^4.56.1-next.v.202609171837.0",
+		"@wordpress/priority-queue": "^3.55.1-next.v.202609171837.0",
+		"@wordpress/private-apis": "^1.55.1-next.v.202609171837.0",
+		"@wordpress/undo-manager": "^1.55.1-next.v.202609171837.0",
 		"change-case": "^4.1.2",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
 	},
 	"devDependencies": {
 		"@testing-library/dom": "^10.4.1",
-		"@testing-library/react": "^16.3.2",
+		"@testing-library/react": "^16.3.3",
 		"@testing-library/user-event": "^14.6.1",
-		"@types/jest": "^30.0.0",
 		"mock-match-media": "^0.4.2",
 		"react-dom": "^18.3.1",
-		"vitest": "^4.1.10"
+		"vitest": "^5.0.0",
+		"vitest-browser-react": "^2.3.0"
 	},
 	"peerDependencies": {
 		"@types/react": "^18 || ^19",
@@ -79,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7275d6c6d93b542fca3cd98cdb9c7344ddd11e19"
+	"gitHead": "7fc9f6676debc888d2f071d17cb71837040d4b48"
 }

package/src/higher-order/pure/test/index.jsdom.test.jsx

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { logged } from '@wordpress/deprecated';
 import pure from '../';

package/src/higher-order/with-global-events/test/index.jsdom.test.jsx

@@ -1,20 +1,23 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import { Component } from '@wordpress/element';
 import withGlobalEvents from '../';
 import Listener from '../listener';
 
-jest.mock( '../listener', () => {
-	const ActualListener = jest.requireActual( '../listener' ).default;
+vi.mock( import( '../listener' ), async ( importOriginal ) => {
+	const { default: ActualListener } = await importOriginal();
 
-	return class extends ActualListener {
-		constructor() {
-			super( ...arguments );
+	return {
+		default: class extends ActualListener {
+			constructor() {
+				super( ...arguments );
 
-			this.constructor._instance = this;
+				this.constructor._instance = this;
 
-			jest.spyOn( this, 'add' );
-			jest.spyOn( this, 'remove' );
-		}
+				vi.spyOn( this, 'add' );
+				vi.spyOn( this, 'remove' );
+			}
+		},
 	};
 } );
 
@@ -30,12 +33,12 @@ describe( 'withGlobalEvents', () => {
 		}
 	}
 
-	beforeAll( () => {
-		jest.spyOn( OriginalComponent.prototype, 'handleResize' );
-	} );
-
 	beforeEach( () => {
-		jest.clearAllMocks();
+		vi.spyOn( OriginalComponent.prototype, 'handleResize' );
+		if ( Listener._instance ) {
+			vi.spyOn( Listener._instance, 'add' );
+			vi.spyOn( Listener._instance, 'remove' );
+		}
 	} );
 
 	it( 'renders with original component', () => {
@@ -67,7 +70,7 @@ describe( 'withGlobalEvents', () => {
 		const EnhancedComponent = withGlobalEvents( {
 			resize: 'handleResize',
 		} )( OriginalComponent );
-		const onResize = jest.fn();
+		const onResize = vi.fn();
 
 		render(
 			<EnhancedComponent ref={ () => {} } onResize={ onResize }>

package/src/higher-order/with-global-events/test/listener.jsdom.test.js

@@ -1,19 +1,28 @@
+import {
+	afterAll,
+	beforeAll,
+	beforeEach,
+	describe,
+	expect,
+	it,
+	vi,
+} from 'vitest';
 import Listener from '../listener';
 
 describe( 'Listener', () => {
-	const createHandler = () => ( { handleEvent: jest.fn() } );
+	const createHandler = () => ( { handleEvent: vi.fn() } );
 
 	let listener, _addEventListener, _removeEventListener;
 	beforeAll( () => {
 		_addEventListener = global.window.addEventListener;
 		_removeEventListener = global.window.removeEventListener;
-		global.window.addEventListener = jest.fn();
-		global.window.removeEventListener = jest.fn();
+		global.window.addEventListener = vi.fn();
+		global.window.removeEventListener = vi.fn();
 	} );
 
 	beforeEach( () => {
 		listener = new Listener();
-		jest.clearAllMocks();
+		vi.clearAllMocks();
 	} );
 
 	afterAll( () => {

package/src/higher-order/with-instance-id/test/index.jsdom.test.jsx

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import withInstanceId from '../';
 

package/src/higher-order/with-state/test/index.jsdom.test.jsx

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import withState from '../';

package/src/hooks/use-copy-on-click/test/index.jsdom.test.tsx

@@ -1,10 +1,11 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import deprecated from '@wordpress/deprecated';
 import { useRef } from '@wordpress/element';
 import useCopyOnClick from '../';
 
-jest.mock( '@wordpress/deprecated' );
+vi.mock( import( '@wordpress/deprecated' ) );
 
 interface TestComponentProps {
 	text: string | ( () => string );
@@ -12,6 +13,10 @@ interface TestComponentProps {
 }
 
 describe( 'useCopyOnClick', () => {
+	afterEach( () => {
+		vi.useRealTimers();
+	} );
+
 	const TestComponent = ( { text, timeout = 4000 }: TestComponentProps ) => {
 		const ref = useRef< HTMLButtonElement >( null );
 		const hasCopied = useCopyOnClick( ref, text, timeout );
@@ -23,7 +28,7 @@ describe( 'useCopyOnClick', () => {
 	};
 
 	it( 'should call deprecated when the hook is used', () => {
-		jest.mocked( deprecated ).mockClear();
+		vi.mocked( deprecated ).mockClear();
 		render( <TestComponent text="test text" /> );
 
 		expect( deprecated ).toHaveBeenCalledWith(
@@ -39,7 +44,7 @@ describe( 'useCopyOnClick', () => {
 		const user = userEvent.setup();
 		render( <TestComponent text="test text" /> );
 
-		const writeTextMock = jest
+		const writeTextMock = vi
 			.spyOn( navigator.clipboard, 'writeText' )
 			.mockResolvedValue();
 
@@ -53,7 +58,7 @@ describe( 'useCopyOnClick', () => {
 		const user = userEvent.setup();
 		render( <TestComponent text="test text" /> );
 
-		jest.spyOn( navigator.clipboard, 'writeText' ).mockResolvedValue();
+		vi.spyOn( navigator.clipboard, 'writeText' ).mockResolvedValue();
 
 		expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Copy' );
 
@@ -67,36 +72,32 @@ describe( 'useCopyOnClick', () => {
 	} );
 
 	it( 'should reset hasCopied after timeout', async () => {
-		jest.useFakeTimers();
+		vi.useFakeTimers( { shouldAdvanceTime: true } );
 		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
+			advanceTimers: ( delay ) => vi.advanceTimersByTime( delay ),
 		} );
 		render( <TestComponent text="test text" timeout={ 1000 } /> );
 
-		jest.spyOn( navigator.clipboard, 'writeText' ).mockResolvedValue();
+		vi.spyOn( navigator.clipboard, 'writeText' ).mockResolvedValue();
 
 		await user.click( screen.getByRole( 'button' ) );
 
 		await act( async () => {
-			const p = new Promise( ( resolve ) => setTimeout( resolve, 0 ) );
-			jest.advanceTimersByTime( 0 );
-			await p;
+			await vi.advanceTimersByTimeAsync( 0 );
 		} );
 		expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Copied!' );
 
-		act( () => {
-			jest.advanceTimersByTime( 1000 );
+		await act( async () => {
+			await vi.advanceTimersByTimeAsync( 1000 );
 		} );
 		expect( screen.getByRole( 'button' ) ).toHaveTextContent( 'Copy' );
-
-		jest.useRealTimers();
 	} );
 
 	it( 'should not set hasCopied when copy fails', async () => {
 		const user = userEvent.setup();
 		render( <TestComponent text="test text" /> );
 
-		jest.spyOn( navigator.clipboard, 'writeText' ).mockRejectedValue(
+		vi.spyOn( navigator.clipboard, 'writeText' ).mockRejectedValue(
 			new Error()
 		);
 
@@ -110,7 +111,7 @@ describe( 'useCopyOnClick', () => {
 	} );
 
 	it( 'should not update hasCopied after unmount', async () => {
-		const renderSpy = jest.fn();
+		const renderSpy = vi.fn();
 
 		const SpyComponent = ( { text }: { text: string } ) => {
 			const ref = useRef< HTMLButtonElement >( null );
@@ -127,7 +128,7 @@ describe( 'useCopyOnClick', () => {
 		const delayedPromise = new Promise< void >( ( resolve ) => {
 			resolvePromise = resolve;
 		} );
-		jest.spyOn( navigator.clipboard, 'writeText' ).mockReturnValue(
+		vi.spyOn( navigator.clipboard, 'writeText' ).mockReturnValue(
 			delayedPromise as Promise< void >
 		);
 

package/src/hooks/use-copy-to-clipboard/test/index.jsdom.test.tsx

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import useCopyToClipboard, { copyToClipboard, restoreFocus } from '../';
@@ -17,7 +18,7 @@ describe( 'useCopyToClipboard', () => {
 		const user = userEvent.setup();
 		render( <TestComponent text="test text" /> );
 
-		const writeTextMock = jest
+		const writeTextMock = vi
 			.spyOn( navigator.clipboard, 'writeText' )
 			.mockResolvedValue();
 
@@ -29,7 +30,7 @@ describe( 'useCopyToClipboard', () => {
 
 	it( 'should call onSuccess when copy succeeds', async () => {
 		const user = userEvent.setup();
-		const onSuccess = jest.fn();
+		const onSuccess = vi.fn();
 		render( <TestComponent text="test text" onSuccess={ onSuccess } /> );
 
 		await user.click( screen.getByRole( 'button' ) );
@@ -39,7 +40,7 @@ describe( 'useCopyToClipboard', () => {
 
 	it( 'should call onSuccess when copy empty text', async () => {
 		const user = userEvent.setup();
-		const onSuccess = jest.fn();
+		const onSuccess = vi.fn();
 		render( <TestComponent text="" onSuccess={ onSuccess } /> );
 
 		await user.click( screen.getByRole( 'button' ) );
@@ -49,10 +50,10 @@ describe( 'useCopyToClipboard', () => {
 
 	it( 'should not call onSuccess when copy fails', async () => {
 		const user = userEvent.setup();
-		const onSuccess = jest.fn();
+		const onSuccess = vi.fn();
 		render( <TestComponent text="test text" onSuccess={ onSuccess } /> );
 
-		jest.spyOn( navigator.clipboard, 'writeText' ).mockRejectedValue(
+		vi.spyOn( navigator.clipboard, 'writeText' ).mockRejectedValue(
 			new Error()
 		);
 
@@ -66,12 +67,12 @@ describe( 'useCopyToClipboard', () => {
 		const delayedPromise = new Promise< void >( ( resolve ) => {
 			resolvePromise = resolve;
 		} );
-		jest.spyOn( navigator.clipboard, 'writeText' ).mockReturnValue(
+		vi.spyOn( navigator.clipboard, 'writeText' ).mockReturnValue(
 			delayedPromise
 		);
 
 		const user = userEvent.setup();
-		const onSuccess = jest.fn();
+		const onSuccess = vi.fn();
 		const { unmount } = render(
 			<TestComponent text="test" onSuccess={ onSuccess } />
 		);
@@ -92,7 +93,7 @@ describe( 'useCopyToClipboard', () => {
 		const delayedPromise = new Promise< void >( ( resolve ) => {
 			resolvePromise = resolve;
 		} );
-		jest.spyOn( navigator.clipboard, 'writeText' ).mockReturnValue(
+		vi.spyOn( navigator.clipboard, 'writeText' ).mockReturnValue(
 			delayedPromise
 		);
 
@@ -100,7 +101,7 @@ describe( 'useCopyToClipboard', () => {
 		const { unmount } = render( <TestComponent text="test" /> );
 
 		const button = screen.getByRole( 'button' );
-		const focusSpy = jest.spyOn( button, 'focus' );
+		const focusSpy = vi.spyOn( button, 'focus' );
 
 		await user.click( button );
 		unmount();
@@ -129,7 +130,7 @@ describe( 'copyToClipboard', () => {
 
 		// JSDOM does not implement execCommand; add a mock for the fallback path.
 		// See: https://github.com/jsdom/jsdom/issues/1742
-		const execCommandMock = jest.fn().mockReturnValue( true );
+		const execCommandMock = vi.fn().mockReturnValue( true );
 		Object.defineProperty( document, 'execCommand', {
 			value: execCommandMock,
 			configurable: true,
@@ -154,7 +155,7 @@ describe( 'restoreFocus', () => {
 	it( 'should focus the trigger element', () => {
 		const trigger = document.createElement( 'button' );
 		document.body.appendChild( trigger );
-		const focusMock = jest.spyOn( trigger, 'focus' );
+		const focusMock = vi.spyOn( trigger, 'focus' );
 
 		restoreFocus( trigger );