@wordpress/compose 5.17.0 → 5.19.0

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-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-dialog/index.ts

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { KeyboardEvent, RefCallback, SyntheticEvent } from 'react';
+import type { RefCallback, SyntheticEvent } from 'react';
 
 /**
  * WordPress dependencies
@@ -17,7 +17,6 @@ import useFocusOnMount from '../use-focus-on-mount';
 import useFocusReturn from '../use-focus-return';
 import useFocusOutside from '../use-focus-outside';
 import useMergeRefs from '../use-merge-refs';
-import type { FocusOutsideReturnValue } from '../use-focus-outside';
 
 type DialogOptions = {
 	focusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];
@@ -35,7 +34,7 @@ type DialogOptions = {
 
 type useDialogReturn = [
 	RefCallback< HTMLElement >,
-	FocusOutsideReturnValue & Pick< HTMLElement, 'tabIndex' >
+	ReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >
 ];
 
 /**
@@ -64,7 +63,7 @@ function useDialog( options: DialogOptions ): useDialogReturn {
 			currentOptions.current.onClose();
 		}
 	} );
-	const closeOnEscapeRef = useCallback( ( node ) => {
+	const closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {
 		if ( ! node ) {
 			return;
 		}

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 → index.ts}

@@ -1,3 +1,16 @@
+/**
+ * External dependencies
+ */
+import type {
+	FocusEventHandler,
+	EventHandler,
+	MouseEventHandler,
+	TouchEventHandler,
+	FocusEvent,
+	MouseEvent,
+	TouchEvent,
+} from 'react';
+
 /**
  * WordPress dependencies
  */
@@ -6,28 +19,32 @@ import { useCallback, useEffect, useRef } from '@wordpress/element';
 /**
  * Input types which are classified as button types, for use in considering
  * whether element is a (focus-normalized) button.
- *
- * @type {string[]}
  */
 const INPUT_BUTTON_TYPES = [ 'button', 'submit' ];
 
 /**
- * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton
+ * List of HTML button elements subject to focus normalization
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  */
+type FocusNormalizedButton =
+	| HTMLButtonElement
+	| HTMLLinkElement
+	| HTMLInputElement;
 
-// Disable reason: Rule doesn't support predicate return types.
-/* eslint-disable jsdoc/valid-types */
 /**
  * Returns true if the given element is a button element subject to focus
  * normalization, or false otherwise.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
  *
- * @param {EventTarget} eventTarget The target from a mouse or touch event.
+ * @param  eventTarget The target from a mouse or touch event.
  *
- * @return {eventTarget is FocusNormalizedButton} Whether element is a button.
+ * @return Whether the element is a button element subject to focus normalization.
  */
-function isFocusNormalizedButton( eventTarget ) {
+function isFocusNormalizedButton(
+	eventTarget: EventTarget
+): eventTarget is FocusNormalizedButton {
 	if ( ! ( eventTarget instanceof window.HTMLElement ) ) {
 		return false;
 	}
@@ -38,54 +55,35 @@ function isFocusNormalizedButton( eventTarget ) {
 
 		case 'INPUT':
 			return INPUT_BUTTON_TYPES.includes(
-				/** @type {HTMLInputElement} */ ( eventTarget ).type
+				( eventTarget as HTMLInputElement ).type
 			);
 	}
 
 	return false;
 }
-/* eslint-enable jsdoc/valid-types */
-
-/**
- * @typedef {import('react').SyntheticEvent} SyntheticEvent
- */
 
-/**
- * @callback EventCallback
- * @param {SyntheticEvent} event input related event.
- */
-
-/**
- * @typedef FocusOutsideReactElement
- * @property {EventCallback} handleFocusOutside callback for a focus outside event.
- */
-
-/**
- * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef
- */
-
-/**
- * @typedef {Object} FocusOutsideReturnValue
- * @property {EventCallback} onFocus      An event handler for focus events.
- * @property {EventCallback} onBlur       An event handler for blur events.
- * @property {EventCallback} onMouseDown  An event handler for mouse down events.
- * @property {EventCallback} onMouseUp    An event handler for mouse up events.
- * @property {EventCallback} onTouchStart An event handler for touch start events.
- * @property {EventCallback} onTouchEnd   An event handler for touch end events.
- */
+type UseFocusOutsideReturn = {
+	onFocus: FocusEventHandler;
+	onMouseDown: MouseEventHandler;
+	onMouseUp: MouseEventHandler;
+	onTouchStart: TouchEventHandler;
+	onTouchEnd: TouchEventHandler;
+	onBlur: FocusEventHandler;
+};
 
 /**
  * A react hook that can be used to check whether focus has moved outside the
  * element the event handlers are bound to.
  *
- * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside
- *                                       the element the event handlers are bound to.
+ * @param  onFocusOutside A callback triggered when focus moves outside
+ *                        the element the event handlers are bound to.
  *
- * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers
- *                                   to a wrapping element element to capture when focus moves
- *                                   outside that element.
+ * @return An object containing event handlers. Bind the event handlers to a
+ * wrapping element element to capture when focus moves outside that element.
  */
-export default function useFocusOutside( onFocusOutside ) {
+export default function useFocusOutside(
+	onFocusOutside: ( event: FocusEvent ) => void
+): UseFocusOutsideReturn {
 	const currentOnFocusOutside = useRef( onFocusOutside );
 	useEffect( () => {
 		currentOnFocusOutside.current = onFocusOutside;
@@ -93,10 +91,7 @@ export default function useFocusOutside( onFocusOutside ) {
 
 	const preventBlurCheck = useRef( false );
 
-	/**
-	 * @type {import('react').MutableRefObject<number | undefined>}
-	 */
-	const blurCheckTimeoutId = useRef();
+	const blurCheckTimeoutId = useRef< number | undefined >();
 
 	/**
 	 * Cancel a blur check timeout.
@@ -124,20 +119,20 @@ export default function useFocusOutside( onFocusOutside ) {
 	 * button elements when clicked, while others do. The logic here
 	 * intends to normalize this as treating click on buttons as focus.
 	 *
+	 * @param  event
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-	 *
-	 * @param {SyntheticEvent} event Event for mousedown or mouseup.
 	 */
-	const normalizeButtonFocus = useCallback( ( event ) => {
-		const { type, target } = event;
-		const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
-
-		if ( isInteractionEnd ) {
-			preventBlurCheck.current = false;
-		} else if ( isFocusNormalizedButton( target ) ) {
-			preventBlurCheck.current = true;
-		}
-	}, [] );
+	const normalizeButtonFocus: EventHandler< MouseEvent | TouchEvent > =
+		useCallback( ( event ) => {
+			const { type, target } = event;
+			const isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );
+
+			if ( isInteractionEnd ) {
+				preventBlurCheck.current = false;
+			} else if ( isFocusNormalizedButton( target ) ) {
+				preventBlurCheck.current = true;
+			}
+		}, [] );
 
 	/**
 	 * A callback triggered when a blur event occurs on the element the handler
@@ -145,10 +140,8 @@ export default function useFocusOutside( onFocusOutside ) {
 	 *
 	 * Calls the `onFocusOutside` callback in an immediate timeout if focus has
 	 * move outside the bound element and is still within the document.
-	 *
-	 * @param {SyntheticEvent} event Blur event.
 	 */
-	const queueBlurCheck = useCallback( ( event ) => {
+	const queueBlurCheck: FocusEventHandler = useCallback( ( event ) => {
 		// React does not allow using an event reference asynchronously
 		// due to recycling behavior, except when explicitly persisted.
 		event.persist();