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

package/CHANGELOG.md

@@ -2,7 +2,11 @@
 
 ## Unreleased
 
-## 8.7.1-next.0 (2026-08-28)
+## 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/higher-order/pipe.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/higher-order/pipe.ts"],
-  "sourcesContent": ["/**\n * Parts of this source were derived and modified from lodash,\n * released under the MIT license.\n *\n * https://github.com/lodash/lodash\n *\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n *\n * Based on Underscore.js, copyright Jeremy Ashkenas,\n * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n *\n * This software consists of voluntary contributions made by many\n * individuals. For exact contribution history, see the revision history\n * available at https://github.com/lodash/lodash\n *\n * The following license applies to all parts of this software except as\n * documented below:\n *\n * ====\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the\n * \"Software\"), to deal in the Software without restriction, including\n * without limitation the rights to use, copy, modify, merge, publish,\n * distribute, sublicense, and/or sell copies of the Software, and to\n * permit persons to whom the Software is furnished to do so, subject to\n * the following conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Creates a pipe function.\n *\n * Allows to choose whether to perform left-to-right or right-to-left composition.\n *\n * @see https://lodash.com/docs/4#flow\n *\n * @param {boolean} reverse True if right-to-left, false for left-to-right composition.\n */\nconst basePipe =\n\t( reverse: boolean = false ) =>\n\t( ...funcs: Function[] ) =>\n\t( ...args: unknown[] ) => {\n\t\tconst functions = funcs.flat();\n\t\tif ( reverse ) {\n\t\t\tfunctions.reverse();\n\t\t}\n\t\treturn functions.reduce(\n\t\t\t( prev, func ) => [ func( ...prev ) ],\n\t\t\targs\n\t\t)[ 0 ];\n\t};\n\n/**\n * Composes multiple higher-order components into a single higher-order component. Performs left-to-right function\n * composition, where each successive invocation is supplied the return value of the previous.\n *\n * This is inspired by `lodash`'s `flow` function.\n *\n * @see https://lodash.com/docs/4#flow\n */\nconst pipe = basePipe();\n\nexport { basePipe };\n\nexport default pipe;\n"],
+  "sourcesContent": ["/**\n * Parts of this source were derived and modified from lodash,\n * released under the MIT license.\n *\n * https://github.com/lodash/lodash\n *\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n *\n * Based on Underscore.js, copyright Jeremy Ashkenas,\n * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n *\n * This software consists of voluntary contributions made by many\n * individuals. For exact contribution history, see the revision history\n * available at https://github.com/lodash/lodash\n *\n * The following license applies to all parts of this software except as\n * documented below:\n *\n * ====\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the\n * \"Software\"), to deal in the Software without restriction, including\n * without limitation the rights to use, copy, modify, merge, publish,\n * distribute, sublicense, and/or sell copies of the Software, and to\n * permit persons to whom the Software is furnished to do so, subject to\n * the following conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Creates a pipe function.\n *\n * Allows to choose whether to perform left-to-right or right-to-left composition.\n *\n * @see https://lodash.com/docs/4#flow\n *\n * @param {boolean} reverse True if right-to-left, false for left-to-right composition.\n */\nconst basePipe =\n\t( reverse: boolean = false ) =>\n\t( ...funcs: ( Function | Function[] )[] ) =>\n\t( ...args: unknown[] ) => {\n\t\tconst functions = funcs.flat();\n\t\tif ( reverse ) {\n\t\t\tfunctions.reverse();\n\t\t}\n\t\treturn functions.reduce(\n\t\t\t( prev, func ) => [ func( ...prev ) ],\n\t\t\targs\n\t\t)[ 0 ];\n\t};\n\n/**\n * Composes multiple higher-order components into a single higher-order component. Performs left-to-right function\n * composition, where each successive invocation is supplied the return value of the previous.\n *\n * This is inspired by `lodash`'s `flow` function.\n *\n * @see https://lodash.com/docs/4#flow\n */\nconst pipe = basePipe();\n\nexport { basePipe };\n\nexport default pipe;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiDA,IAAM,WACL,CAAE,UAAmB,UACrB,IAAK,UACL,IAAK,SAAqB;AACzB,QAAM,YAAY,MAAM,KAAK;AAC7B,MAAK,SAAU;AACd,cAAU,QAAQ;AAAA,EACnB;AACA,SAAO,UAAU;AAAA,IAChB,CAAE,MAAM,SAAU,CAAE,KAAM,GAAG,IAAK,CAAE;AAAA,IACpC;AAAA,EACD,EAAG,CAAE;AACN;AAUD,IAAM,OAAO,SAAS;AAItB,IAAO,eAAQ;",
   "names": []
 }

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/higher-order/pipe.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/higher-order/pipe.ts"],
-  "sourcesContent": ["/**\n * Parts of this source were derived and modified from lodash,\n * released under the MIT license.\n *\n * https://github.com/lodash/lodash\n *\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n *\n * Based on Underscore.js, copyright Jeremy Ashkenas,\n * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n *\n * This software consists of voluntary contributions made by many\n * individuals. For exact contribution history, see the revision history\n * available at https://github.com/lodash/lodash\n *\n * The following license applies to all parts of this software except as\n * documented below:\n *\n * ====\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the\n * \"Software\"), to deal in the Software without restriction, including\n * without limitation the rights to use, copy, modify, merge, publish,\n * distribute, sublicense, and/or sell copies of the Software, and to\n * permit persons to whom the Software is furnished to do so, subject to\n * the following conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Creates a pipe function.\n *\n * Allows to choose whether to perform left-to-right or right-to-left composition.\n *\n * @see https://lodash.com/docs/4#flow\n *\n * @param {boolean} reverse True if right-to-left, false for left-to-right composition.\n */\nconst basePipe =\n\t( reverse: boolean = false ) =>\n\t( ...funcs: Function[] ) =>\n\t( ...args: unknown[] ) => {\n\t\tconst functions = funcs.flat();\n\t\tif ( reverse ) {\n\t\t\tfunctions.reverse();\n\t\t}\n\t\treturn functions.reduce(\n\t\t\t( prev, func ) => [ func( ...prev ) ],\n\t\t\targs\n\t\t)[ 0 ];\n\t};\n\n/**\n * Composes multiple higher-order components into a single higher-order component. Performs left-to-right function\n * composition, where each successive invocation is supplied the return value of the previous.\n *\n * This is inspired by `lodash`'s `flow` function.\n *\n * @see https://lodash.com/docs/4#flow\n */\nconst pipe = basePipe();\n\nexport { basePipe };\n\nexport default pipe;\n"],
+  "sourcesContent": ["/**\n * Parts of this source were derived and modified from lodash,\n * released under the MIT license.\n *\n * https://github.com/lodash/lodash\n *\n * Copyright JS Foundation and other contributors <https://js.foundation/>\n *\n * Based on Underscore.js, copyright Jeremy Ashkenas,\n * DocumentCloud and Investigative Reporters & Editors <http://underscorejs.org/>\n *\n * This software consists of voluntary contributions made by many\n * individuals. For exact contribution history, see the revision history\n * available at https://github.com/lodash/lodash\n *\n * The following license applies to all parts of this software except as\n * documented below:\n *\n * ====\n *\n * Permission is hereby granted, free of charge, to any person obtaining\n * a copy of this software and associated documentation files (the\n * \"Software\"), to deal in the Software without restriction, including\n * without limitation the rights to use, copy, modify, merge, publish,\n * distribute, sublicense, and/or sell copies of the Software, and to\n * permit persons to whom the Software is furnished to do so, subject to\n * the following conditions:\n *\n * The above copyright notice and this permission notice shall be\n * included in all copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\n * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\n * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\n * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\n * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\n * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\n * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n */\n\n/**\n * Creates a pipe function.\n *\n * Allows to choose whether to perform left-to-right or right-to-left composition.\n *\n * @see https://lodash.com/docs/4#flow\n *\n * @param {boolean} reverse True if right-to-left, false for left-to-right composition.\n */\nconst basePipe =\n\t( reverse: boolean = false ) =>\n\t( ...funcs: ( Function | Function[] )[] ) =>\n\t( ...args: unknown[] ) => {\n\t\tconst functions = funcs.flat();\n\t\tif ( reverse ) {\n\t\t\tfunctions.reverse();\n\t\t}\n\t\treturn functions.reduce(\n\t\t\t( prev, func ) => [ func( ...prev ) ],\n\t\t\targs\n\t\t)[ 0 ];\n\t};\n\n/**\n * Composes multiple higher-order components into a single higher-order component. Performs left-to-right function\n * composition, where each successive invocation is supplied the return value of the previous.\n *\n * This is inspired by `lodash`'s `flow` function.\n *\n * @see https://lodash.com/docs/4#flow\n */\nconst pipe = basePipe();\n\nexport { basePipe };\n\nexport default pipe;\n"],
   "mappings": ";AAiDA,IAAM,WACL,CAAE,UAAmB,UACrB,IAAK,UACL,IAAK,SAAqB;AACzB,QAAM,YAAY,MAAM,KAAK;AAC7B,MAAK,SAAU;AACd,cAAU,QAAQ;AAAA,EACnB;AACA,SAAO,UAAU;AAAA,IAChB,CAAE,MAAM,SAAU,CAAE,KAAM,GAAG,IAAK,CAAE;AAAA,IACpC;AAAA,EACD,EAAG,CAAE;AACN;AAUD,IAAM,OAAO,SAAS;AAItB,IAAO,eAAQ;",
   "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/higher-order/compose.d.ts

@@ -6,6 +6,6 @@
  *
  * @see https://lodash.com/docs/4#flow-right
  */
-declare const compose: (...funcs: Function[]) => (...args: unknown[]) => unknown;
+declare const compose: (...funcs: (Function | Function[])[]) => (...args: unknown[]) => unknown;
 export default compose;
 //# sourceMappingURL=compose.d.ts.map

package/build-types/higher-order/compose.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../../src/higher-order/compose.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,QAAA,MAAM,OAAO,2DAAmB,CAAC;eAElB,OAAO"}
+{"version":3,"file":"compose.d.ts","sourceRoot":"","sources":["../../src/higher-order/compose.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AACH,QAAA,MAAM,OAAO,0EAAmB,CAAC;eAElB,OAAO"}

package/build-types/higher-order/pipe.d.ts

@@ -46,7 +46,7 @@
  *
  * @param {boolean} reverse True if right-to-left, false for left-to-right composition.
  */
-declare const basePipe: (reverse?: boolean) => (...funcs: Function[]) => (...args: unknown[]) => unknown;
+declare const basePipe: (reverse?: boolean) => (...funcs: (Function | Function[])[]) => (...args: unknown[]) => unknown;
 /**
  * Composes multiple higher-order components into a single higher-order component. Performs left-to-right function
  * composition, where each successive invocation is supplied the return value of the previous.
@@ -55,7 +55,7 @@ declare const basePipe: (reverse?: boolean) => (...funcs: Function[]) => (...arg
  *
  * @see https://lodash.com/docs/4#flow
  */
-declare const pipe: (...funcs: Function[]) => (...args: unknown[]) => unknown;
+declare const pipe: (...funcs: (Function | Function[])[]) => (...args: unknown[]) => unknown;
 export { basePipe };
 export default pipe;
 //# sourceMappingURL=pipe.d.ts.map

package/build-types/higher-order/pipe.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pipe.d.ts","sourceRoot":"","sources":["../../src/higher-order/pipe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,QAAQ,aACF,OAAO,gBACN,QAAQ,EAAE,eACX,OAAO,EAAE,YASnB,CAAC;AAEH;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,aApBG,QAAQ,EAAE,eACX,OAAO,EAAE,YAmBE,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,CAAC;eAEL,IAAI"}
+{"version":3,"file":"pipe.d.ts","sourceRoot":"","sources":["../../src/higher-order/pipe.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAEH;;;;;;;;GAQG;AACH,QAAA,MAAM,QAAQ,aACF,OAAO,gBACN,CAAE,QAAQ,GAAG,QAAQ,EAAE,CAAE,EAAE,eAC5B,OAAO,EAAE,YASnB,CAAC;AAEH;;;;;;;GAOG;AACH,QAAA,MAAM,IAAI,aApBG,CAAE,QAAQ,GAAG,QAAQ,EAAE,CAAE,EAAE,eAC5B,OAAO,EAAE,YAmBE,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,CAAC;eAEL,IAAI"}

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.202608281122.0",
+	"version": "8.8.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -46,25 +46,26 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^4.54.1-next.v.202608281122.0",
-		"@wordpress/dom": "^4.54.1-next.v.202608281122.0",
-		"@wordpress/element": "^8.6.2-next.v.202608281122.0",
-		"@wordpress/is-shallow-equal": "^5.54.1-next.v.202608281122.0",
-		"@wordpress/keycodes": "^4.54.1-next.v.202608281122.0",
-		"@wordpress/priority-queue": "^3.54.1-next.v.202608281122.0",
-		"@wordpress/private-apis": "^1.54.1-next.v.202608281122.0",
-		"@wordpress/undo-manager": "^1.54.1-next.v.202608281122.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"
+		"react-dom": "^18.3.1",
+		"vitest": "^5.0.0"
 	},
 	"peerDependencies": {
 		"@types/react": "^18 || ^19",
@@ -78,5 +79,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "de479d415171765f7b573c81aeec5334ff506a12"
+	"gitHead": "485f42ae8a1c58ceea18371a507fd4acfa86fbd8"
 }

package/src/higher-order/pipe.ts

@@ -49,7 +49,7 @@
  */
 const basePipe =
 	( reverse: boolean = false ) =>
-	( ...funcs: Function[] ) =>
+	( ...funcs: ( Function | Function[] )[] ) =>
 	( ...args: unknown[] ) => {
 		const functions = funcs.flat();
 		if ( reverse ) {

package/src/higher-order/pure/test/{index.jsx → 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/test/compose.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import compose from '../compose';
 
 describe( 'compose', () => {
@@ -6,27 +7,27 @@ describe( 'compose', () => {
 	} );
 
 	it( 'executes functions right-to-left when passed as separate arguments', () => {
-		const a = ( value ) => ( value += 'a' );
-		const b = ( value ) => ( value += 'b' );
-		const c = ( value ) => ( value += 'c' );
+		const a = ( value: string ) => ( value += 'a' );
+		const b = ( value: string ) => ( value += 'b' );
+		const c = ( value: string ) => ( value += 'c' );
 
 		expect( compose( a, b, c )( 'test' ) ).toBe( 'testcba' );
 	} );
 
 	it( 'executes functions right-to-left when passed as a single array', () => {
-		const a = ( value ) => ( value += 'a' );
-		const b = ( value ) => ( value += 'b' );
-		const c = ( value ) => ( value += 'c' );
+		const a = ( value: string ) => ( value += 'a' );
+		const b = ( value: string ) => ( value += 'b' );
+		const c = ( value: string ) => ( value += 'c' );
 
 		expect( compose( [ a, b, c ] )( 'test' ) ).toBe( 'testcba' );
 	} );
 
 	it( 'executes functions right-to-left when passed as a mix of separate arguments and arrays', () => {
-		const a = ( value ) => ( value += 'a' );
-		const b = ( value ) => ( value += 'b' );
-		const c = ( value ) => ( value += 'c' );
-		const d = ( value ) => ( value += 'd' );
-		const e = ( value ) => ( value += 'e' );
+		const a = ( value: string ) => ( value += 'a' );
+		const b = ( value: string ) => ( value += 'b' );
+		const c = ( value: string ) => ( value += 'c' );
+		const d = ( value: string ) => ( value += 'd' );
+		const e = ( value: string ) => ( value += 'e' );
 
 		expect( compose( [ a, b ], c, [ d ], e )( 'test' ) ).toBe(
 			'testedcba'

package/src/higher-order/test/pipe.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import pipe from '../pipe';
 
 describe( 'pipe', () => {
@@ -6,27 +7,27 @@ describe( 'pipe', () => {
 	} );
 
 	it( 'executes functions left-to-right when passed as separate arguments', () => {
-		const a = ( value ) => ( value += 'a' );
-		const b = ( value ) => ( value += 'b' );
-		const c = ( value ) => ( value += 'c' );
+		const a = ( value: string ) => ( value += 'a' );
+		const b = ( value: string ) => ( value += 'b' );
+		const c = ( value: string ) => ( value += 'c' );
 
 		expect( pipe( a, b, c )( 'test' ) ).toBe( 'testabc' );
 	} );
 
 	it( 'executes functions left-to-right when passed as a single array', () => {
-		const a = ( value ) => ( value += 'a' );
-		const b = ( value ) => ( value += 'b' );
-		const c = ( value ) => ( value += 'c' );
+		const a = ( value: string ) => ( value += 'a' );
+		const b = ( value: string ) => ( value += 'b' );
+		const c = ( value: string ) => ( value += 'c' );
 
 		expect( pipe( [ a, b, c ] )( 'test' ) ).toBe( 'testabc' );
 	} );
 
 	it( 'executes functions left-to-right when passed as a mix of separate arguments and arrays', () => {
-		const a = ( value ) => ( value += 'a' );
-		const b = ( value ) => ( value += 'b' );
-		const c = ( value ) => ( value += 'c' );
-		const d = ( value ) => ( value += 'd' );
-		const e = ( value ) => ( value += 'e' );
+		const a = ( value: string ) => ( value += 'a' );
+		const b = ( value: string ) => ( value += 'b' );
+		const c = ( value: string ) => ( value += 'c' );
+		const d = ( value: string ) => ( value += 'd' );
+		const e = ( value: string ) => ( value += 'e' );
 
 		expect( pipe( [ a, b ], c, [ d ], e )( 'test' ) ).toBe( 'testabcde' );
 	} );

package/src/higher-order/with-global-events/test/{index.jsx → 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.js → 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.jsx → 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.jsx → 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.tsx → 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.tsx → 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.tsx → 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.jsx → 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.jsx → 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.jsx → 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.jsx → 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-media-query/test/ssr.jsx

@@ -1,6 +1,4 @@
-/**
- * @jest-environment node
- */
+import { describe, expect, it } from 'vitest';
 import { renderToString } from 'react-dom/server';
 import useMediaQuery from '../';
 import useViewportMatch from '../../use-viewport-match';

package/src/hooks/use-merge-refs/test/{index.jsx → 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.jsx → 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.jsx → 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.jsx → 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/create-higher-order-component/test/index.jsx

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { Component } from '@wordpress/element';
 import { createHigherOrderComponent } from '../';
 

package/src/utils/debounce/test/index.ts

@@ -1,6 +1,7 @@
+import { describe, expect, it } from 'vitest';
 import { debounce } from '../index';
 
-const identity = ( value ) => value;
+const identity = < T >( value: T ) => value;
 
 describe( 'debounce', () => {
 	it( 'should debounce a function', () => {
@@ -326,12 +327,12 @@ describe( 'debounce', () => {
 
 	it( 'should invoke the trailing call with the correct arguments and `this` binding', () => {
 		return new Promise( ( done ) => {
-			let actual;
+			let actual: unknown[] | undefined;
 			let callCount = 0;
 			const object = {};
 
 			const debounced = debounce(
-				function ( ...args ) {
+				function ( this: object, ...args: unknown[] ) {
 					actual = [ this ];
 					Array.prototype.push.apply( actual, args );
 					return ++callCount !== 2;

package/src/utils/observable-map/test/index.js

@@ -1,11 +1,12 @@
+import { describe, expect, test, vi } from 'vitest';
 import { observableMap } from '..';
 
 describe( 'ObservableMap', () => {
 	test( 'should observe individual values', () => {
 		const map = observableMap();
 
-		const listenerA = jest.fn();
-		const listenerB = jest.fn();
+		const listenerA = vi.fn();
+		const listenerB = vi.fn();
 
 		const unsubA = map.subscribe( 'a', listenerA );
 		const unsubB = map.subscribe( 'b', listenerB );

package/src/utils/subscribe-delegated-listener/test/{index.js → 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();

package/src/utils/throttle/test/index.ts

@@ -1,14 +1,15 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { throttle } from '../index';
 
-const identity = ( value ) => value;
+const identity = < T >( value: T ) => value;
 
 describe( 'throttle', () => {
 	beforeEach( () => {
-		jest.useFakeTimers();
+		vi.useFakeTimers();
 	} );
 
 	afterEach( () => {
-		jest.useRealTimers();
+		vi.useRealTimers();
 	} );
 
 	it( 'should throttle a function', () => {
@@ -24,7 +25,7 @@ describe( 'throttle', () => {
 		const lastCount = callCount;
 		expect( callCount ).toBeGreaterThan( 0 );
 
-		jest.advanceTimersByTime( 64 );
+		vi.advanceTimersByTime( 64 );
 
 		expect( callCount ).toBeGreaterThan( lastCount );
 	} );
@@ -35,7 +36,7 @@ describe( 'throttle', () => {
 
 		expect( results ).toStrictEqual( [ 'a', 'a' ] );
 
-		jest.advanceTimersByTime( 64 );
+		vi.advanceTimersByTime( 64 );
 
 		results = [ throttled( 'c' ), throttled( 'd' ) ];
 		expect( results[ 0 ] ).not.toBe( 'a' );
@@ -61,7 +62,7 @@ describe( 'throttle', () => {
 		throttled();
 		throttled();
 
-		jest.advanceTimersByTime( 64 );
+		vi.advanceTimersByTime( 64 );
 
 		expect( callCount ).toBe( 2 );
 		global.Date.now = globalDateNow;
@@ -76,7 +77,7 @@ describe( 'throttle', () => {
 		throttled();
 		expect( callCount ).toBe( 1 );
 
-		jest.advanceTimersByTime( 64 );
+		vi.advanceTimersByTime( 64 );
 
 		expect( callCount ).toBe( 1 );
 	} );
@@ -100,11 +101,11 @@ describe( 'throttle', () => {
 				const start = Date.now();
 				while ( Date.now() - start < limit ) {
 					throttled();
-					jest.advanceTimersByTime( 1 );
+					vi.advanceTimersByTime( 1 );
 				}
 				const actual = callCount;
 
-				jest.advanceTimersByTime( 1 );
+				vi.advanceTimersByTime( 1 );
 
 				expect( actual ).toBeGreaterThan( 1 );
 			}
@@ -124,16 +125,16 @@ describe( 'throttle', () => {
 
 		throttled();
 
-		jest.advanceTimersByTime( 192 );
+		vi.advanceTimersByTime( 192 );
 
 		expect( callCount ).toBe( 1 );
 		throttled();
 
-		jest.advanceTimersByTime( 64 );
+		vi.advanceTimersByTime( 64 );
 
 		expect( callCount ).toBe( 1 );
 
-		jest.advanceTimersByTime( 130 );
+		vi.advanceTimersByTime( 130 );
 
 		expect( callCount ).toBe( 2 );
 	} );
@@ -152,7 +153,7 @@ describe( 'throttle', () => {
 		throttled();
 		expect( callCount ).toBe( 1 );
 
-		jest.advanceTimersByTime( 128 );
+		vi.advanceTimersByTime( 128 );
 
 		expect( callCount ).toBe( 2 );
 	} );
@@ -193,7 +194,7 @@ describe( 'throttle', () => {
 		expect( withoutTrailing( 'a' ) ).toBe( 'a' );
 		expect( withoutTrailing( 'b' ) ).toBe( 'a' );
 
-		jest.advanceTimersByTime( 256 );
+		vi.advanceTimersByTime( 256 );
 
 		expect( withCount ).toBe( 2 );
 		expect( withoutCount ).toBe( 1 );
@@ -213,12 +214,12 @@ describe( 'throttle', () => {
 		throttled();
 		throttled();
 
-		jest.advanceTimersByTime( 96 );
+		vi.advanceTimersByTime( 96 );
 
 		throttled();
 		throttled();
 
-		jest.advanceTimersByTime( 96 );
+		vi.advanceTimersByTime( 96 );
 
 		expect( callCount ).toBeGreaterThan( 1 );
 	} );
@@ -245,7 +246,7 @@ describe( 'throttle', () => {
 		expect( results ).toStrictEqual( [ 'a', 'a', 'a' ] );
 		expect( callCount ).toBe( 1 );
 
-		jest.advanceTimersByTime( 64 );
+		vi.advanceTimersByTime( 64 );
 
 		expect( callCount ).toBe( 2 );
 		global.Date.now = globalDateNow;