@wordpress/compose 5.16.1-next.4d3b314fd5.0 → 5.18.0

package/build-types/higher-order/with-safe-timeout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-safe-timeout/index.tsx"],"names":[],"mappings":"AAUA;;GAEG;AACH,OAAO,EAEN,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,2CAA2C,CAAC;AAEnD;;;;;;;GAOG;AACH,UAAU,YAAY;IACrB,UAAU,EAAE,CAAE,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,KAAM,MAAM,CAAC;IACxD,YAAY,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,QAAA,MAAM,eAAe;;kBAMR,MAAM,EAAE;;uBAaF,MAAM,IAAI,SAAS,MAAM;yBASvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-safe-timeout/index.tsx"],"names":[],"mappings":"AAKA;;GAEG;AACH,OAAO,EAEN,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,2CAA2C,CAAC;AAEnD;;;;;;;GAOG;AACH,UAAU,YAAY;IACrB,UAAU,EAAE,CAAE,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,KAAM,MAAM,CAAC;IACxD,YAAY,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,QAAA,MAAM,eAAe;;kBAMR,MAAM,EAAE;;uBAaF,MAAM,IAAI,SAAS,MAAM;yBASvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAkB1B,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/build-types/hooks/use-disabled/index.d.ts

@@ -3,6 +3,8 @@
  * (input fields, links, buttons, etc.) need to be disabled. This hook adds the
  * behavior to disable nested DOM elements to the returned ref.
  *
+ * If you can, prefer the use of the inert HTML attribute.
+ *
  * @param {Object}   config            Configuration object.
  * @param {boolean=} config.isDisabled Whether the element should be disabled.
  * @return {import('react').RefCallback<HTMLElement>} Element Ref.
@@ -10,6 +12,7 @@
  * @example
  * ```js
  * import { useDisabled } from '@wordpress/compose';
+ *
  * const DisabledExample = () => {
  * 	const disabledRef = useDisabled();
  *	return (
@@ -23,5 +26,5 @@
  */
 export default function useDisabled({ isDisabled: isDisabledProp, }?: {
     isDisabled?: boolean | undefined;
-}): import('react').RefCallback<HTMLElement>;
+}): (instance: Node | null) => void;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.js"],"names":[],"mappings":"AAmCA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH;IAjB4B,UAAU,GAA3B,OAAO;IACN,OAAO,OAAO,EAAE,WAAW,CAAC,WAAW,CAAC,CAgKnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,UAAU,EAAE,cAAsB,GAClC;;CAAK,mCA8CL"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.js"],"names":[],"mappings":"AAsDA;;GAEG;AAEH;;;GAGG;AAEH;;;GAGG;AAEH;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;GAUG;AACH,wDAPW,aAAa,GAGZ,uBAAuB,CAqGlC;oCA3KY,iBAAiB,GAAG,eAAe,GAAG,gBAAgB;6BAoCtD,OAAO,OAAO,EAAE,cAAc;oCAKhC,cAAc;;;;;wBAKX,aAAa;;8BAId,OAAO,OAAO,EAAE,gBAAgB,CAAC,wBAAwB,GAAG,SAAS,CAAC;;;;;aAKrE,aAAa;;;;YACb,aAAa;;;;iBACb,aAAa;;;;eACb,aAAa;;;;kBACb,aAAa;;;;gBACb,aAAa"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-focus-outside/index.js"],"names":[],"mappings":"AAgDA;;GAEG;AAEH;;;GAGG;AAEH;;;GAGG;AAEH;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;GAUG;AACH,wDAPW,aAAa,GAGZ,uBAAuB,CAqGlC;oCA1KY,iBAAiB,GAAG,eAAe,GAAG,gBAAgB;6BAmCtD,OAAO,OAAO,EAAE,cAAc;oCAKhC,cAAc;;;;;wBAKX,aAAa;;8BAId,OAAO,OAAO,EAAE,gBAAgB,CAAC,wBAAwB,GAAG,SAAS,CAAC;;;;;aAKrE,aAAa;;;;YACb,aAAa;;;;iBACb,aAAa;;;;eACb,aAAa;;;;kBACb,aAAa;;;;gBACb,aAAa"}

package/build-types/hooks/use-keyboard-shortcut/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAaA;;;;;;;;;GASG;AAGH;;;;;;;;GAQG;AACH,gDAJW,MAAM,EAAE,GAAC,MAAM,gBACX,OAAO,WAAW,EAAE,qBAAqB,SAAS,MAAM,KAAK,IAAI,mDACrE,wBAAwB,QAsElC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAYA;;;;;;;;;GASG;AAGH;;;;;;;;GAQG;AACH,gDAJW,MAAM,EAAE,GAAC,MAAM,gBACX,OAAO,WAAW,EAAE,qBAAqB,SAAS,MAAM,KAAK,IAAI,mDACrE,wBAAwB,QAyElC"}

package/build-types/hooks/use-merge-refs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wIAsDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,wIA2DC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/compose",
-	"version": "5.16.1-next.4d3b314fd5.0",
+	"version": "5.18.0",
 	"description": "WordPress higher-order components (HOCs).",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -30,17 +30,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@types/lodash": "^4.14.172",
 		"@types/mousetrap": "^1.6.8",
-		"@wordpress/deprecated": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/dom": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/element": "^4.16.1-next.4d3b314fd5.0",
-		"@wordpress/is-shallow-equal": "^4.18.1-next.4d3b314fd5.0",
-		"@wordpress/keycodes": "^3.18.1-next.4d3b314fd5.0",
-		"@wordpress/priority-queue": "^2.18.1-next.4d3b314fd5.0",
+		"@wordpress/deprecated": "^3.20.0",
+		"@wordpress/dom": "^3.20.0",
+		"@wordpress/element": "^4.18.0",
+		"@wordpress/is-shallow-equal": "^4.20.0",
+		"@wordpress/keycodes": "^3.20.0",
+		"@wordpress/priority-queue": "^2.20.0",
 		"change-case": "^4.1.2",
 		"clipboard": "^2.0.8",
-		"lodash": "^4.17.21",
 		"mousetrap": "^1.6.5",
 		"use-memo-one": "^1.1.1"
 	},
@@ -50,5 +48,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "25054766423cb49d959eb656c2533530073ff5c2"
+	"gitHead": "a2ff0e6471c88436dad0287beb88d1729aa6f5dd"
 }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * Class responsible for orchestrating event handling on the global window,
  * binding a single event to be shared across all handling instances, and
@@ -27,9 +22,12 @@ class Listener {
 	}
 
 	remove( /** @type {any} */ eventType, /** @type {any} */ instance ) {
-		this.listeners[ eventType ] = without(
-			this.listeners[ eventType ],
-			instance
+		if ( ! this.listeners[ eventType ] ) {
+			return;
+		}
+
+		this.listeners[ eventType ] = this.listeners[ eventType ].filter(
+			( /** @type {any} */ listener ) => listener !== instance
 		);
 
 		if ( ! this.listeners[ eventType ].length ) {

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import TestRenderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -30,8 +30,6 @@ jest.mock( '../listener', () => {
 } );
 
 describe( 'withGlobalEvents', () => {
-	let wrapper;
-
 	class OriginalComponent extends Component {
 		handleResize( event ) {
 			this.props.onResize( event );
@@ -50,51 +48,42 @@ describe( 'withGlobalEvents', () => {
 		jest.clearAllMocks();
 	} );
 
-	afterEach( () => {
-		if ( wrapper ) {
-			wrapper.unmount();
-			wrapper = null;
-		}
-	} );
-
-	function mountEnhancedComponent( props = {} ) {
+	it( 'renders with original component', () => {
 		const EnhancedComponent = withGlobalEvents( {
 			resize: 'handleResize',
 		} )( OriginalComponent );
 
-		props.ref = () => {};
-
-		wrapper = TestRenderer.create(
-			<EnhancedComponent { ...props }>Hello</EnhancedComponent>
-		);
-	}
-
-	it( 'renders with original component', () => {
-		mountEnhancedComponent();
+		render( <EnhancedComponent ref={ () => {} }>Hello</EnhancedComponent> );
 
 		expect( console ).toHaveWarned();
-		expect( wrapper.root.findByType( 'div' ).children[ 0 ] ).toBe(
-			'Hello'
-		);
+		expect( screen.getByText( 'Hello' ) ).toBeVisible();
 	} );
 
 	it( 'binds events from passed object', () => {
-		mountEnhancedComponent();
+		const EnhancedComponent = withGlobalEvents( {
+			resize: 'handleResize',
+		} )( OriginalComponent );
 
-		// Get the HOC wrapper instance.
-		const hocInstance =
-			wrapper.root.findByType( OriginalComponent ).parent.instance;
+		render( <EnhancedComponent ref={ () => {} }>Hello</EnhancedComponent> );
 
 		expect( Listener._instance.add ).toHaveBeenCalledWith(
 			'resize',
-			hocInstance
+			// If not `undefined`, then we consider handlers were properly bound to the wrapper component.
+			expect.any( Object )
 		);
 	} );
 
 	it( 'handles events', () => {
+		const EnhancedComponent = withGlobalEvents( {
+			resize: 'handleResize',
+		} )( OriginalComponent );
 		const onResize = jest.fn();
 
-		mountEnhancedComponent( { onResize } );
+		render(
+			<EnhancedComponent ref={ () => {} } onResize={ onResize }>
+				Hello
+			</EnhancedComponent>
+		);
 
 		const event = { type: 'resize' };
 

package/src/higher-order/with-safe-timeout/index.tsx

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { without } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -64,7 +59,7 @@ const withSafeTimeout = createHigherOrderComponent(
 
 			clearTimeout( id: number ) {
 				clearTimeout( id );
-				this.timeouts = without( this.timeouts, id );
+				this.timeouts.filter( ( timeoutId ) => timeoutId !== id );
 			}
 
 			render() {

package/src/higher-order/with-state/test/index.js

@@ -1,31 +1,19 @@
 /**
  * External dependencies
  */
-import TestUtils from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
  */
 import withState from '../';
 
-/**
- * WordPress dependencies
- */
-import { Component } from '@wordpress/element';
-
-// This is needed because TestUtils does not accept a stateless component.
-// anything run through a HOC ends up as a stateless component.
-const getTestComponent = ( WrappedComponent ) => {
-	class TestComponent extends Component {
-		render() {
-			return <WrappedComponent { ...this.props } />;
-		}
-	}
-	return <TestComponent />;
-};
-
 describe( 'withState', () => {
-	it( 'should pass initial state and allow updates', () => {
+	it( 'should pass initial state and allow updates', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
 		const EnhancedComponent = withState( {
 			count: 0,
 		} )( ( { count, setState } ) => (
@@ -38,16 +26,15 @@ describe( 'withState', () => {
 			</button>
 		) );
 
-		const wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( EnhancedComponent )
-		);
+		render( <EnhancedComponent /> );
 
-		const buttonElement = () =>
-			TestUtils.findRenderedDOMComponentWithTag( wrapper, 'button' );
+		const button = screen.getByRole( 'button' );
 
 		expect( console ).toHaveWarned();
-		expect( buttonElement().outerHTML ).toBe( '<button>0</button>' );
-		TestUtils.Simulate.click( buttonElement() );
-		expect( buttonElement().outerHTML ).toBe( '<button>1</button>' );
+		expect( button ).toHaveTextContent( '0' );
+
+		await user.click( button );
+
+		expect( button ).toHaveTextContent( '1' );
 	} );
 } );

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

@@ -0,0 +1,81 @@
+/**
+ * Internal dependencies
+ */
+import { debounce } from '../../utils/debounce';
+import useRefEffect from '../use-ref-effect';
+
+/**
+ * In some circumstances, such as block previews, all focusable DOM elements
+ * (input fields, links, buttons, etc.) need to be disabled. This hook adds the
+ * behavior to disable nested DOM elements to the returned ref.
+ *
+ * If you can, prefer the use of the inert HTML attribute.
+ *
+ * @param {Object}   config            Configuration object.
+ * @param {boolean=} config.isDisabled Whether the element should be disabled.
+ * @return {import('react').RefCallback<HTMLElement>} Element Ref.
+ *
+ * @example
+ * ```js
+ * import { useDisabled } from '@wordpress/compose';
+ *
+ * const DisabledExample = () => {
+ * 	const disabledRef = useDisabled();
+ *	return (
+ *		<div ref={ disabledRef }>
+ *			<a href="#">This link will have tabindex set to -1</a>
+ *			<input placeholder="This input will have the disabled attribute added to it." type="text" />
+ *		</div>
+ *	);
+ * };
+ * ```
+ */
+export default function useDisabled( {
+	isDisabled: isDisabledProp = false,
+} = {} ) {
+	return useRefEffect(
+		( node ) => {
+			if ( isDisabledProp ) {
+				return;
+			}
+
+			/** A variable keeping track of the previous updates in order to restore them. */
+			const updates: Function[] = [];
+			const disable = () => {
+				node.childNodes.forEach( ( child ) => {
+					if ( ! ( child instanceof HTMLElement ) ) {
+						return;
+					}
+					if ( ! child.getAttribute( 'inert' ) ) {
+						child.setAttribute( 'inert', 'true' );
+						updates.push( () => {
+							child.removeAttribute( 'inert' );
+						} );
+					}
+				} );
+			};
+
+			// Debounce re-disable since disabling process itself will incur
+			// additional mutations which should be ignored.
+			const debouncedDisable = debounce( disable, 0, {
+				leading: true,
+			} );
+			disable();
+
+			/** @type {MutationObserver | undefined} */
+			const observer = new window.MutationObserver( debouncedDisable );
+			observer.observe( node, {
+				childList: true,
+			} );
+
+			return () => {
+				if ( observer ) {
+					observer.disconnect();
+				}
+				debouncedDisable.cancel();
+				updates.forEach( ( update ) => update() );
+			};
+		},
+		[ isDisabledProp ]
+	);
+}

package/src/hooks/use-disabled/test/index.js

@@ -13,36 +13,6 @@ import { forwardRef } from '@wordpress/element';
  */
 import useDisabled from '../';
 
-jest.mock( '@wordpress/dom', () => {
-	const focus = jest.requireActual( '../../../../../dom/src' ).focus;
-
-	return {
-		focus: {
-			...focus,
-			focusable: {
-				...focus.focusable,
-				find( context ) {
-					// In JSDOM, all elements have zero'd widths and height.
-					// This is a metric for focusable's `isVisible`, so find
-					// and apply an arbitrary non-zero width.
-					Array.from( context.querySelectorAll( '*' ) ).forEach(
-						( element ) => {
-							Object.defineProperties( element, {
-								offsetWidth: {
-									get: () => 1,
-									configurable: true,
-								},
-							} );
-						}
-					);
-
-					return focus.focusable.find( ...arguments );
-				},
-			},
-		},
-	};
-} );
-
 jest.useRealTimers();
 
 describe( 'useDisabled', () => {
@@ -69,11 +39,9 @@ describe( 'useDisabled', () => {
 		const link = screen.getByRole( 'link' );
 		const p = container.querySelector( 'p' );
 
-		expect( input.hasAttribute( 'disabled' ) ).toBe( true );
-		expect( link.getAttribute( 'tabindex' ) ).toBe( '-1' );
-		expect( p.getAttribute( 'contenteditable' ) ).toBe( 'false' );
-		expect( p.hasAttribute( 'tabindex' ) ).toBe( false );
-		expect( p.hasAttribute( 'disabled' ) ).toBe( false );
+		expect( input ).toHaveAttribute( 'inert', 'true' );
+		expect( link ).toHaveAttribute( 'inert', 'true' );
+		expect( p ).toHaveAttribute( 'inert', 'true' );
 	} );
 
 	it( 'will disable an element rendered in an update to the component', async () => {
@@ -86,7 +54,7 @@ describe( 'useDisabled', () => {
 
 		const button = screen.getByText( 'Button' );
 		await waitFor( () => {
-			expect( button.hasAttribute( 'disabled' ) ).toBe( true );
+			expect( button ).toHaveAttribute( 'inert', 'true' );
 		} );
 	} );
 } );

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -42,8 +37,7 @@ function isFocusNormalizedButton( eventTarget ) {
 			return true;
 
 		case 'INPUT':
-			return includes(
-				INPUT_BUTTON_TYPES,
+			return INPUT_BUTTON_TYPES.includes(
 				/** @type {HTMLInputElement} */ ( eventTarget ).type
 			);
 	}
@@ -136,7 +130,7 @@ export default function useFocusOutside( onFocusOutside ) {
 	 */
 	const normalizeButtonFocus = useCallback( ( event ) => {
 		const { type, target } = event;
-		const isInteractionEnd = includes( [ 'mouseup', 'touchend' ], type );
+		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
 
 		if ( isInteractionEnd ) {
 			preventBlurCheck.current = false;

package/src/hooks/use-focus-outside/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { includes } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -39,8 +34,7 @@ function isFocusNormalizedButton( eventTarget ) {
 			return true;
 
 		case 'INPUT':
-			return includes(
-				INPUT_BUTTON_TYPES,
+			return INPUT_BUTTON_TYPES.includes(
 				/** @type {HTMLInputElement} */ ( eventTarget ).type
 			);
 	}
@@ -133,7 +127,7 @@ export default function useFocusOutside( onFocusOutside ) {
 	 */
 	const normalizeButtonFocus = useCallback( ( event ) => {
 		const { type, target } = event;
-		const isInteractionEnd = includes( [ 'mouseup', 'touchend' ], type );
+		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
 
 		if ( isInteractionEnd ) {
 			preventBlurCheck.current = false;

package/src/hooks/use-focus-outside/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import TestUtils from 'react-dom/test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -12,38 +13,24 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import useFocusOutside from '../';
-import ReactDOM from 'react-dom';
 
-let wrapper, onFocusOutside;
+let onFocusOutside;
 
 describe( 'useFocusOutside', () => {
 	let origHasFocus;
 
 	const FocusOutsideComponent = ( { onFocusOutside: callback } ) => (
 		<div { ...useFocusOutside( callback ) }>
-			<input />
+			<input type="text" />
 			<input type="button" />
 		</div>
 	);
 
-	// This is needed because TestUtils does not accept a stateless component.
-	// anything run through a HOC ends up as a stateless component.
-	const getTestComponent = ( WrappedComponent, props ) => {
-		class TestComponent extends Component {
-			render() {
-				return <WrappedComponent { ...props } />;
-			}
+	class TestComponent extends Component {
+		render() {
+			return <FocusOutsideComponent { ...this.props } />;
 		}
-		return <TestComponent />;
-	};
-
-	const simulateEvent = ( event, index = 0 ) => {
-		const element = TestUtils.scryRenderedDOMComponentsWithTag(
-			wrapper,
-			'input'
-		);
-		TestUtils.Simulate[ event ]( element[ index ] );
-	};
+	}
 
 	beforeEach( () => {
 		// Mock document.hasFocus() to always be true for testing
@@ -52,9 +39,6 @@ describe( 'useFocusOutside', () => {
 		document.hasFocus = () => true;
 
 		onFocusOutside = jest.fn();
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( FocusOutsideComponent, { onFocusOutside } )
-		);
 	} );
 
 	afterEach( () => {
@@ -62,24 +46,31 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should not call handler if focus shifts to element within component', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
-		simulateEvent( 'focus', 1 );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
+
+		input.focus();
+		input.blur();
+		button.focus();
 
 		jest.runAllTimers();
 
 		expect( onFocusOutside ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should not call handler if focus transitions via click to button', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'mouseDown', 1 );
-		simulateEvent( 'blur' );
+	it( 'should not call handler if focus transitions via click to button', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
 
-		// In most browsers, the input at index 1 would receive a focus event
-		// at this point, but this is not guaranteed, which is the intention of
-		// the normalization behavior tested here.
-		simulateEvent( 'mouseUp', 1 );
+		input.focus();
+		await user.click( button );
 
 		jest.runAllTimers();
 
@@ -87,8 +78,11 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should call handler if focus doesn’t shift to element within component', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
 
 		jest.runAllTimers();
 
@@ -96,12 +90,15 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should not call handler if focus shifts outside the component when the document does not have focus', () => {
+		render( <TestComponent onFocusOutside={ onFocusOutside } /> );
+
 		// 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.
 		document.hasFocus = () => false;
 
-		simulateEvent( 'focus' );
-		simulateEvent( 'blur' );
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
 
 		jest.runAllTimers();
 
@@ -109,14 +106,16 @@ describe( 'useFocusOutside', () => {
 	} );
 
 	it( 'should cancel check when unmounting while queued', () => {
-		simulateEvent( 'focus' );
-		simulateEvent( 'input' );
-
-		ReactDOM.unmountComponentAtNode(
-			// eslint-disable-next-line react/no-find-dom-node
-			ReactDOM.findDOMNode( wrapper ).parentNode
+		const { rerender } = render(
+			<TestComponent onFocusOutside={ onFocusOutside } />
 		);
 
+		const input = screen.getByRole( 'textbox' );
+		input.focus();
+		input.blur();
+
+		rerender( <div /> );
+
 		jest.runAllTimers();
 
 		expect( onFocusOutside ).not.toHaveBeenCalled();