@wordpress/compose 8.7.2-next.v.202609031004.0 → 8.8.0

package/CHANGELOG.md

@@ -2,7 +2,11 @@
 
 ## Unreleased
 
-## 8.7.1-next.0 (2026-09-03)
+## 8.8.0 (2026-09-10)
+
+### Bug Fixes
+
+-   `useResizeObserver`: Disconnect the observer when the hook unmounts so queued callbacks cannot run after teardown ([#82687](https://github.com/WordPress/gutenberg/pull/82687)).
 
 ### Internal
 

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

@@ -39,6 +39,15 @@ function useResizeObserver(callback, resizeObserverOptions = {}) {
   const callbackEvent = (0, import_use_event.default)(callback);
   const observedElementRef = (0, import_element.useRef)(null);
   const resizeObserverRef = (0, import_element.useRef)(void 0);
+  (0, import_element.useEffect)(() => {
+    if (observedElementRef.current) {
+      resizeObserverRef.current?.observe(
+        observedElementRef.current,
+        resizeObserverOptions
+      );
+    }
+    return () => resizeObserverRef.current?.disconnect();
+  }, []);
   return (0, import_use_event.default)((element) => {
     if (element === observedElementRef.current) {
       return;

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-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-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.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.0",
+		"@wordpress/dom": "^4.55.0",
+		"@wordpress/element": "^8.7.0",
+		"@wordpress/is-shallow-equal": "^5.55.0",
+		"@wordpress/keycodes": "^4.55.0",
+		"@wordpress/priority-queue": "^3.55.0",
+		"@wordpress/private-apis": "^1.55.0",
+		"@wordpress/undo-manager": "^1.55.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"
 	},
 	"peerDependencies": {
 		"@types/react": "^18 || ^19",
@@ -79,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "7275d6c6d93b542fca3cd98cdb9c7344ddd11e19"
+	"gitHead": "485f42ae8a1c58ceea18371a507fd4acfa86fbd8"
 }

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 );
 

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-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-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.jsdom.test.ts

@@ -0,0 +1,37 @@
+import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest';
+import { act, renderHook } from '@testing-library/react';
+import useResizeObserver from '..';
+
+const disconnect = vi.fn();
+
+class MockResizeObserver {
+	observe() {}
+	unobserve() {}
+	disconnect = disconnect;
+}
+
+const originalResizeObserver = globalThis.ResizeObserver;
+
+beforeAll( () => {
+	globalThis.ResizeObserver =
+		MockResizeObserver as unknown as typeof ResizeObserver;
+} );
+
+afterAll( () => {
+	globalThis.ResizeObserver = originalResizeObserver;
+} );
+
+describe( 'useResizeObserver', () => {
+	it( 'disconnects the observer on unmount', () => {
+		const { result, unmount } = renderHook( () =>
+			useResizeObserver( vi.fn() )
+		);
+
+		act( () => result.current( document.createElement( 'div' ) ) );
+		expect( disconnect ).not.toHaveBeenCalled();
+
+		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();