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

package/src/hooks/use-dialog/test/index.jsdom.test.tsx

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createPortal } from 'react-dom';
@@ -20,7 +21,7 @@ function Dialog( { onClose }: { onClose?: () => void } ) {
 describe( 'useDialog', () => {
 	it( 'should call onClose when Escape is pressed', async () => {
 		const user = userEvent.setup();
-		const onClose = jest.fn();
+		const onClose = vi.fn();
 
 		render( <Dialog onClose={ onClose } /> );
 
@@ -32,7 +33,7 @@ describe( 'useDialog', () => {
 
 	it( 'should not call onClose when Escape is pressed if defaultPrevented', async () => {
 		const user = userEvent.setup();
-		const onClose = jest.fn();
+		const onClose = vi.fn();
 
 		function DialogWithChild() {
 			const [ ref, props ] = useDialog( {
@@ -69,8 +70,8 @@ describe( 'useDialog', () => {
 
 	it( 'should stop Escape event from propagating to parent elements', async () => {
 		const user = userEvent.setup();
-		const onClose = jest.fn();
-		const parentKeyDownHandler = jest.fn();
+		const onClose = vi.fn();
+		const parentKeyDownHandler = vi.fn();
 
 		render(
 			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -88,7 +89,7 @@ describe( 'useDialog', () => {
 
 	it( 'should let Escape propagate when there is no onClose handler', async () => {
 		const user = userEvent.setup();
-		const parentKeyDownHandler = jest.fn();
+		const parentKeyDownHandler = vi.fn();
 
 		render(
 			// eslint-disable-next-line jsx-a11y/no-static-element-interactions
@@ -105,8 +106,8 @@ describe( 'useDialog', () => {
 
 	it( 'should not close when a portaled descendant handles Escape and stops propagation', async () => {
 		const user = userEvent.setup();
-		const onClose = jest.fn();
-		const descendantHandled = jest.fn();
+		const onClose = vi.fn();
+		const descendantHandled = vi.fn();
 
 		const portalTarget = document.createElement( 'div' );
 		document.body.appendChild( portalTarget );
@@ -153,8 +154,8 @@ describe( 'useDialog', () => {
 
 	it( 'should close only the innermost dialog when nested', async () => {
 		const user = userEvent.setup();
-		const outerOnClose = jest.fn();
-		const innerOnClose = jest.fn();
+		const outerOnClose = vi.fn();
+		const innerOnClose = vi.fn();
 
 		function NestedDialogs() {
 			const [ outerRef, outerProps ] = useDialog( {
@@ -196,8 +197,8 @@ describe( 'useDialog', () => {
 
 	it( 'should call the consumer-provided onKeyDown alongside close-on-Escape', async () => {
 		const user = userEvent.setup();
-		const onClose = jest.fn();
-		const consumerOnKeyDown = jest.fn();
+		const onClose = vi.fn();
+		const consumerOnKeyDown = vi.fn();
 
 		function DialogWithConsumerOnKeyDown() {
 			const [ ref, props ] = useDialog( {
@@ -227,7 +228,7 @@ describe( 'useDialog', () => {
 
 	it( 'should let the consumer-provided onKeyDown opt out of close-on-Escape via preventDefault', async () => {
 		const user = userEvent.setup();
-		const onClose = jest.fn();
+		const onClose = vi.fn();
 
 		function DialogOptingOut() {
 			const [ ref, props ] = useDialog( {
@@ -255,7 +256,7 @@ describe( 'useDialog', () => {
 
 	it( 'should not call onClose for non-Escape keys', async () => {
 		const user = userEvent.setup();
-		const onClose = jest.fn();
+		const onClose = vi.fn();
 
 		render( <Dialog onClose={ onClose } /> );
 

package/src/hooks/use-disabled/test/index.jsdom.test.jsx

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

package/src/hooks/use-drop-zone/test/index.jsdom.test.jsx

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

package/src/hooks/use-fixed-window-list/index.ts

@@ -86,7 +86,7 @@ export default function useFixedWindowList(
 		// Aim to keep opening list view fast, afterward we can optimize for scrolling.
 		const overscan = initRender
 			? visibleItems
-			: windowOverscan ?? visibleItems;
+			: ( windowOverscan ?? visibleItems );
 		const firstViewableIndex = Math.floor(
 			scrollContainer.scrollTop / itemHeight
 		);

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

@@ -12,9 +12,7 @@ const INPUT_BUTTON_TYPES = [ 'button', 'submit' ];
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  */
 type FocusNormalizedButton =
-	| HTMLButtonElement
-	| HTMLLinkElement
-	| HTMLInputElement;
+	HTMLButtonElement | HTMLLinkElement | HTMLInputElement;
 
 /**
  * Returns true if the given element is a button element subject to focus
@@ -148,6 +146,8 @@ export default function useFocusOutside(
 			return;
 		}
 
+		// Keep only the latest blur check so a subsequent focus event can cancel it.
+		clearTimeout( blurCheckTimeoutIdRef.current );
 		blurCheckTimeoutIdRef.current = setTimeout( () => {
 			// If document is not focused then focus should remain
 			// inside the wrapped component and therefore we cancel

package/src/hooks/use-focus-outside/test/index.jsdom.test.jsx

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import useFocusOutside from '../';
@@ -19,7 +20,7 @@ const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
 
 describe( 'useFocusOutside', () => {
 	it( 'should not call handler if focus shifts to element within component', async () => {
-		const mockOnFocusOutside = jest.fn();
+		const mockOnFocusOutside = vi.fn();
 		const user = userEvent.setup();
 
 		render(
@@ -40,7 +41,7 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should not call handler if focus transitions via click to button', async () => {
-		const mockOnFocusOutside = jest.fn();
+		const mockOnFocusOutside = vi.fn();
 		const user = userEvent.setup();
 
 		render(
@@ -57,7 +58,7 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should call handler if focus shifts to element outside component', async () => {
-		const mockOnFocusOutside = jest.fn();
+		const mockOnFocusOutside = vi.fn();
 		const user = userEvent.setup();
 
 		render(
@@ -82,10 +83,10 @@ describe( 'useFocusOutside', () => {
 	it( 'should not call handler if focus shifts outside the component when the document does not have focus', async () => {
 		// Force document.hasFocus() to return false to simulate the window/document losing focus
 		// See https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.
-		const mockedDocumentHasFocus = jest
+		const mockedDocumentHasFocus = vi
 			.spyOn( document, 'hasFocus' )
 			.mockImplementation( () => false );
-		const mockOnFocusOutside = jest.fn();
+		const mockOnFocusOutside = vi.fn();
 		const user = userEvent.setup();
 
 		render(
@@ -114,9 +115,7 @@ describe( 'useFocusOutside', () => {
 		const promise = new Promise( ( resolve ) => {
 			resolvePromise = resolve;
 		} );
-		const mockOnFocusOutside = jest
-			.fn()
-			.mockImplementation( resolvePromise );
+		const mockOnFocusOutside = vi.fn().mockImplementation( resolvePromise );
 		const user = userEvent.setup();
 
 		const { unmount } = render(

package/src/hooks/use-instance-id/test/index.jsdom.test.jsx

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

package/src/hooks/use-keyboard-shortcut/index.ts

@@ -62,9 +62,9 @@ function useKeyboardShortcut(
 			target && target.current
 				? target.current
 				: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.
-				  // 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
-				  // necessary to maintain the existing behavior.
-				  ( document as unknown as Element )
+					// 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
+					// necessary to maintain the existing behavior.
+					( document as unknown as Element )
 		);
 
 		const shortcutsArray = Array.isArray( shortcuts )

package/src/hooks/use-media-query/test/{index.jsdom.test.jsx → index.browser.test.jsx}

@@ -1,5 +1,7 @@
-import { act, render } from '@testing-library/react';
-import { matchMedia, setMedia } from 'mock-match-media';
+import { afterAll, beforeAll, beforeEach, describe, expect, it } from 'vitest';
+import { page } from 'vitest/browser';
+import { waitFor } from '@testing-library/react';
+import { render } from 'vitest-browser-react';
 import useMediaQuery from '../';
 
 const TestComponent = ( { query } ) => {
@@ -8,23 +10,25 @@ const TestComponent = ( { query } ) => {
 };
 
 describe( 'useMediaQuery', () => {
+	let initialViewport;
+
 	beforeAll( () => {
-		window.matchMedia = matchMedia;
+		initialViewport = {
+			width: window.innerWidth,
+			height: window.innerHeight,
+		};
 	} );
 
-	beforeEach( () => {
-		setMedia( {
-			width: '960px',
-		} );
+	beforeEach( async () => {
+		await page.viewport( 960, 768 );
 	} );
 
-	afterEach( () => {
-		// Do not clean up, this will break our cache. Browsers also do not
-		// reset media queries.
+	afterAll( async () => {
+		await page.viewport( initialViewport.width, initialViewport.height );
 	} );
 
 	it( 'should return true when the query matches', async () => {
-		const { container } = render(
+		const { container } = await render(
 			<TestComponent query="(min-width: 782px)" />
 		);
 
@@ -32,23 +36,21 @@ describe( 'useMediaQuery', () => {
 	} );
 
 	it( 'should correctly update the value when the query evaluation matches', async () => {
-		const { container } = render(
+		const { container } = await render(
 			<TestComponent query="(min-width: 782px)" />
 		);
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: true' );
 
-		act( () => {
-			setMedia( {
-				width: '600px',
-			} );
-		} );
+		await page.viewport( 600, 768 );
 
-		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
+		await waitFor( () => {
+			expect( container ).toHaveTextContent( 'useMediaQuery: false' );
+		} );
 	} );
 
 	it( 'should return false when the query does not match', async () => {
-		const { container } = render(
+		const { container } = await render(
 			<TestComponent query="(max-width: 782px)" />
 		);
 
@@ -56,12 +58,12 @@ describe( 'useMediaQuery', () => {
 	} );
 
 	it( 'should return false when a query is not passed', async () => {
-		const { container, rerender } = render( <TestComponent /> );
+		const { container, rerender } = await render( <TestComponent /> );
 
 		// Query will be case to a boolean to simplify the return type.
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
 
-		rerender( <TestComponent query={ false } /> );
+		await rerender( <TestComponent query={ false } /> );
 
 		expect( container ).toHaveTextContent( 'useMediaQuery: false' );
 	} );

package/src/hooks/use-merge-refs/test/index.jsdom.test.jsx

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import { useCallback, useState } from '@wordpress/element';
 import useMergeRefs from '../';

package/src/hooks/use-observable-value/test/index.jsdom.test.jsx

@@ -1,3 +1,4 @@
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen, act } from '@testing-library/react';
 import { observableMap } from '../../../utils/observable-map';
 import useObservableValue from '..';
@@ -7,7 +8,7 @@ describe( 'useObservableValue', () => {
 		const map = observableMap();
 		map.set( 'a', 1 );
 
-		const MapUI = jest.fn( () => {
+		const MapUI = vi.fn( () => {
 			const value = useObservableValue( map, 'a' );
 			return <div>value is { value }</div>;
 		} );

package/src/hooks/use-resize-observer/test/index.browser.test.ts

@@ -0,0 +1,24 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act } from '@testing-library/react';
+import { renderHook } from 'vitest-browser-react';
+import useResizeObserver from '..';
+
+afterEach( () => {
+	vi.restoreAllMocks();
+} );
+
+describe( 'useResizeObserver', () => {
+	it( 'disconnects the observer on unmount', async () => {
+		const disconnect = vi.spyOn( ResizeObserver.prototype, 'disconnect' );
+		const { result, unmount } = await renderHook( () =>
+			useResizeObserver( vi.fn() )
+		);
+
+		act( () => result.current( document.createElement( 'div' ) ) );
+		expect( disconnect ).not.toHaveBeenCalled();
+
+		await unmount();
+
+		expect( disconnect ).toHaveBeenCalledOnce();
+	} );
+} );

package/src/hooks/use-resize-observer/use-resize-observer.ts

@@ -1,4 +1,4 @@
-import { useRef } from '@wordpress/element';
+import { useEffect, useRef } from '@wordpress/element';
 import useEvent from '../use-event';
 
 // This is the current implementation of `useResizeObserver`.
@@ -14,6 +14,18 @@ export function useResizeObserver< T extends HTMLElement >(
 
 	const observedElementRef = useRef< T | null >( null );
 	const resizeObserverRef = useRef< ResizeObserver >( undefined );
+	useEffect( () => {
+		if ( observedElementRef.current ) {
+			resizeObserverRef.current?.observe(
+				observedElementRef.current,
+				resizeObserverOptions
+			);
+		}
+		return () => resizeObserverRef.current?.disconnect();
+		// This effect owns the observer lifecycle. The returned ref handles
+		// element and option changes without recreating the observer.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [] );
 	return useEvent( ( element?: T | null ) => {
 		if ( element === observedElementRef.current ) {
 			return;

package/src/hooks/use-state-with-history/test/index.jsdom.test.jsx

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

package/src/hooks/use-viewport-match/test/index.jsdom.test.jsx

@@ -1,9 +1,8 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import useViewportMatch from '../';
-jest.mock( '../../use-media-query', () => {
-	return jest.fn();
-} );
 import useMediaQueryMock from '../../use-media-query';
+vi.mock( import( '../../use-media-query' ), () => ( { default: vi.fn() } ) );
 
 describe( 'useViewportMatch', () => {
 	afterEach( () => {

package/src/utils/subscribe-delegated-listener/test/index.jsdom.test.js

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
 import subscribeDelegatedListener from '..';
 
 describe( 'subscribeDelegatedListener', () => {
@@ -27,14 +28,14 @@ describe( 'subscribeDelegatedListener', () => {
 	}
 
 	test( 'invokes element subscriber when event fires on that element', () => {
-		const cb = jest.fn();
+		const cb = vi.fn();
 		subscribeDelegatedListener( target, 'click', cb );
 		fire( target );
 		expect( cb ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	test( 'invokes element subscriber when event fires on a descendant', () => {
-		const cb = jest.fn();
+		const cb = vi.fn();
 		const child = document.createElement( 'b' );
 		target.appendChild( child );
 		subscribeDelegatedListener( target, 'click', cb );
@@ -43,7 +44,7 @@ describe( 'subscribeDelegatedListener', () => {
 	} );
 
 	test( 'does not invoke element subscriber when event fires outside its subtree', () => {
-		const cb = jest.fn();
+		const cb = vi.fn();
 		const sibling = document.createElement( 'div' );
 		document.body.appendChild( sibling );
 		subscribeDelegatedListener( target, 'click', cb );
@@ -83,8 +84,8 @@ describe( 'subscribeDelegatedListener', () => {
 	} );
 
 	test( 'capture and bubble registries are independent', () => {
-		const captureCb = jest.fn();
-		const bubbleCb = jest.fn();
+		const captureCb = vi.fn();
+		const bubbleCb = vi.fn();
 		subscribeDelegatedListener( target, 'click', captureCb, true );
 		subscribeDelegatedListener( target, 'click', bubbleCb, false );
 		fire( target );
@@ -93,15 +94,15 @@ describe( 'subscribeDelegatedListener', () => {
 	} );
 
 	test( 'document subscriber always fires for events in the document', () => {
-		const cb = jest.fn();
+		const cb = vi.fn();
 		subscribeDelegatedListener( document, 'click', cb );
 		fire( target );
 		expect( cb ).toHaveBeenCalledTimes( 1 );
 	} );
 
 	test( 'window subscriber fans out independently of element subscribers', () => {
-		const winCb = jest.fn();
-		const elCb = jest.fn();
+		const winCb = vi.fn();
+		const elCb = vi.fn();
 		subscribeDelegatedListener( window, 'resize', winCb );
 		subscribeDelegatedListener( target, 'resize', elCb );
 		window.dispatchEvent( new Event( 'resize' ) );
@@ -111,8 +112,8 @@ describe( 'subscribeDelegatedListener', () => {
 	} );
 
 	test( 'multiple callbacks for the same element all fire', () => {
-		const a = jest.fn();
-		const b = jest.fn();
+		const a = vi.fn();
+		const b = vi.fn();
 		subscribeDelegatedListener( target, 'click', a );
 		subscribeDelegatedListener( target, 'click', b );
 		fire( target );
@@ -121,7 +122,7 @@ describe( 'subscribeDelegatedListener', () => {
 	} );
 
 	test( 'unsubscribe stops further dispatch', () => {
-		const cb = jest.fn();
+		const cb = vi.fn();
 		const unsub = subscribeDelegatedListener( target, 'click', cb );
 		fire( target );
 		expect( cb ).toHaveBeenCalledTimes( 1 );
@@ -131,12 +132,12 @@ describe( 'subscribeDelegatedListener', () => {
 	} );
 
 	test( 'attaches one native listener per (root, eventType, phase) regardless of subscriber count', () => {
-		const spy = jest.spyOn( document, 'addEventListener' );
+		const spy = vi.spyOn( document, 'addEventListener' );
 		// First subscribe attaches the native listener; subsequent ones
 		// for the same key share it.
-		subscribeDelegatedListener( target, 'mousemove', jest.fn() );
-		subscribeDelegatedListener( root, 'mousemove', jest.fn() );
-		subscribeDelegatedListener( document, 'mousemove', jest.fn() );
+		subscribeDelegatedListener( target, 'mousemove', vi.fn() );
+		subscribeDelegatedListener( root, 'mousemove', vi.fn() );
+		subscribeDelegatedListener( document, 'mousemove', vi.fn() );
 		const nativeMousemoves = spy.mock.calls.filter(
 			( [ type, , opts ] ) => type === 'mousemove' && ! opts // bubble-phase only
 		).length;
@@ -154,7 +155,7 @@ describe( 'subscribeDelegatedListener', () => {
 		const iframeTarget = iframeDoc.createElement( 'span' );
 		iframeDoc.body.appendChild( iframeTarget );
 
-		const cb = jest.fn();
+		const cb = vi.fn();
 		expect( () =>
 			subscribeDelegatedListener( iframeTarget, 'click', cb )
 		).not.toThrow();