@wordpress/components 21.2.0 → 21.3.0

package/src/higher-order/with-fallback-styles/index.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { every, isEqual } from 'lodash';
+import { isEqual } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -45,10 +45,14 @@ export default ( mapNodeToProps ) =>
 						this.nodeRef,
 						this.props
 					);
+
 					if ( ! isEqual( newFallbackStyles, fallbackStyles ) ) {
 						this.setState( {
 							fallbackStyles: newFallbackStyles,
-							grabStylesCompleted: !! every( newFallbackStyles ),
+							grabStylesCompleted:
+								Object.values( newFallbackStyles ).every(
+									Boolean
+								),
 						} );
 					}
 				}

package/src/higher-order/with-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,9 +13,8 @@ import { Component } from '@wordpress/element';
  * Internal dependencies
  */
 import withFocusOutside from '../';
-import ReactDOM from 'react-dom';
 
-let wrapper, onFocusOutside;
+let onFocusOutside;
 
 describe( 'withFocusOutside', () => {
 	let origHasFocus;
@@ -28,7 +28,7 @@ describe( 'withFocusOutside', () => {
 			render() {
 				return (
 					<div>
-						<input />
+						<input type="text" />
 						<input type="button" />
 					</div>
 				);
@@ -36,24 +36,11 @@ describe( 'withFocusOutside', () => {
 		}
 	);
 
-	// 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 <EnhancedComponent { ...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
@@ -62,9 +49,6 @@ describe( 'withFocusOutside', () => {
 		document.hasFocus = () => true;
 
 		onFocusOutside = jest.fn();
-		wrapper = TestUtils.renderIntoDocument(
-			getTestComponent( EnhancedComponent, { onFocusOutside } )
-		);
 	} );
 
 	afterEach( () => {
@@ -72,24 +56,31 @@ describe( 'withFocusOutside', () => {
 	} );
 
 	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 } /> );
 
-		// 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 );
+		const input = screen.getByRole( 'textbox' );
+		const button = screen.getByRole( 'button' );
+
+		input.focus();
+		await user.click( button );
 
 		jest.runAllTimers();
 
@@ -97,8 +88,11 @@ describe( 'withFocusOutside', () => {
 	} );
 
 	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();
 
@@ -106,12 +100,15 @@ describe( 'withFocusOutside', () => {
 	} );
 
 	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();
 
@@ -119,14 +116,16 @@ describe( 'withFocusOutside', () => {
 	} );
 
 	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();

package/src/higher-order/with-focus-return/test/index.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import renderer from 'react-test-renderer';
-import { render, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
@@ -16,9 +16,14 @@ import withFocusReturn from '../';
 
 class Test extends Component {
 	render() {
+		const { className, focusHistory } = this.props;
 		return (
-			<div className="test">
-				<textarea />
+			<div
+				className={ className }
+				data-testid="test-element"
+				data-focus-history={ focusHistory }
+			>
+				<textarea aria-label="Textarea" />
 			</div>
 		);
 	}
@@ -41,32 +46,25 @@ describe( 'withFocusReturn()', () => {
 		} );
 
 		it( 'should render a basic Test component inside the HOC', () => {
-			const renderedComposite = renderer.create( <Composite /> );
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			const wrappedElementShallow = wrappedElement.children[ 0 ];
-			expect( wrappedElementShallow.props.className ).toBe( 'test' );
-			expect( wrappedElementShallow.type ).toBe( 'div' );
-			expect( wrappedElementShallow.children[ 0 ].type ).toBe(
-				'textarea'
-			);
+			render( <Composite /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toBeVisible();
 		} );
 
 		it( 'should pass own props through to the wrapped element', () => {
-			const renderedComposite = renderer.create(
-				<Composite test="test" />
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).toHaveClass(
+				'test'
 			);
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props.test ).toBe( 'test' );
 		} );
 
 		it( 'should not pass any withFocusReturn context props through to the wrapped element', () => {
-			const renderedComposite = renderer.create(
-				<Composite test="test" />
+			render( <Composite className="test" /> );
+
+			expect( screen.getByTestId( 'test-element' ) ).not.toHaveAttribute(
+				'data-focus-history'
 			);
-			const wrappedElement = renderedComposite.root.findByType( Test );
-			// Ensure that the wrapped Test element has the appropriate props.
-			expect( wrappedElement.props.focusHistory ).toBeUndefined();
 		} );
 
 		it( 'should not switch focus back to the bound focus element', () => {
@@ -78,31 +76,37 @@ describe( 'withFocusReturn()', () => {
 
 			// Change activeElement.
 			switchFocusTo.focus();
-			expect( document.activeElement ).toBe( switchFocusTo );
+			expect( switchFocusTo ).toHaveFocus();
 
 			// Should keep focus on switchFocusTo, because it is not within HOC.
 			unmount();
-			expect( document.activeElement ).toBe( switchFocusTo );
+			expect( switchFocusTo ).toHaveFocus();
 		} );
 
-		it( 'should switch focus back when unmounted while having focus', () => {
+		it( 'should switch focus back when unmounted while having focus', async () => {
+			const user = userEvent.setup( {
+				advanceTimers: jest.advanceTimersByTime,
+			} );
+
 			const { container, unmount } = render( <Composite />, {
 				container: document.body.appendChild(
 					document.createElement( 'div' )
 				),
 			} );
 
-			const textarea = container.querySelector( 'textarea' );
-			fireEvent.focusIn( textarea, { target: textarea } );
-			textarea.focus();
-			expect( document.activeElement ).toBe( textarea );
+			// Click inside the textarea to focus it.
+			await user.click(
+				screen.getByRole( 'textbox', {
+					name: 'Textarea',
+				} )
+			);
 
 			// Should return to the activeElement saved with this component.
 			unmount();
 			render( <div></div>, {
 				container,
 			} );
-			expect( document.activeElement ).toBe( activeElement );
+			expect( activeElement ).toHaveFocus();
 		} );
 	} );
 } );

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

@@ -91,7 +91,7 @@ describe( 'withNotices operations', () => {
 		act( () => {
 			handle.current.createNotice( { content: message } );
 		} );
-		expect( getByText( message ) ).not.toBeNull();
+		expect( getByText( message ) ).toBeInTheDocument();
 	} );
 
 	it( 'should create notices of error status with createErrorNotice', () => {

package/src/index.js

@@ -16,7 +16,7 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion, __unstableAnimatePresence } from './animation';
+export { __unstableMotion } from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,
@@ -146,6 +146,7 @@ export { Text as __experimentalText } from './text';
 export { default as TextControl } from './text-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as TextHighlight } from './text-highlight';
+export { default as __experimentalTheme } from './theme';
 export { default as Tip } from './tip';
 export { default as ToggleControl } from './toggle-control';
 export {

package/src/input-control/test/index.js

@@ -40,7 +40,7 @@ describe( 'InputControl', () => {
 
 			const input = getInput();
 
-			expect( input.getAttribute( 'type' ) ).toBe( 'number' );
+			expect( input ).toHaveAttribute( 'type', 'number' );
 		} );
 
 		it( 'should render label', () => {
@@ -48,7 +48,7 @@ describe( 'InputControl', () => {
 
 			const input = screen.getByText( 'Hello' );
 
-			expect( input ).toBeTruthy();
+			expect( input ).toBeInTheDocument();
 		} );
 	} );
 

package/src/item-group/test/index.js

@@ -11,12 +11,12 @@ import { Item, ItemGroup } from '..';
 describe( 'ItemGroup', () => {
 	describe( 'ItemGroup component', () => {
 		it( 'should render correctly', () => {
-			const wrapper = render(
+			const { container } = render(
 				<ItemGroup>
 					<Item>Code is poetry</Item>
 				</ItemGroup>
 			);
-			expect( wrapper.container.firstChild ).toMatchSnapshot();
+			expect( container.firstChild ).toMatchSnapshot();
 		} );
 
 		it( 'should show borders when the isBordered prop is true', () => {

package/src/menu-item/test/index.js

@@ -83,7 +83,6 @@ describe( 'MenuItem', () => {
 
 		const menuItem = screen.getByRole( 'menuitem' );
 		expect( menuItem ).not.toBeChecked();
-		expect( menuItem ).not.toHaveAttribute( 'aria-checked' );
 	} );
 
 	it( 'should use aria-checked if menuitemradio or menuitemcheckbox is set as aria-role', () => {
@@ -95,7 +94,6 @@ describe( 'MenuItem', () => {
 
 		const radioMenuItem = screen.getByRole( 'menuitemradio' );
 		expect( radioMenuItem ).toBeChecked();
-		expect( radioMenuItem ).toHaveAttribute( 'aria-checked', 'true' );
 
 		rerender(
 			<MenuItem role="menuitemcheckbox" isSelected>
@@ -105,7 +103,6 @@ describe( 'MenuItem', () => {
 
 		const checkboxMenuItem = screen.getByRole( 'menuitemcheckbox' );
 		expect( checkboxMenuItem ).toBeChecked();
-		expect( checkboxMenuItem ).toHaveAttribute( 'aria-checked', 'true' );
 	} );
 
 	it( 'should not render shortcut or right icon if suffix provided', () => {

package/src/mobile/bottom-sheet/test/range-cell.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { AccessibilityInfo } from 'react-native';
-import { create, act } from 'react-test-renderer';
+import { render, fireEvent } from 'test/helpers';
 
 /**
  * Internal dependencies
@@ -21,17 +21,19 @@ jest.mock( '@wordpress/compose', () => ( {
 	) ),
 } ) );
 
-const isScreenReaderEnabled = Promise.resolve( true );
 beforeAll( () => {
-	// Mock async native module to avoid act warning
-	AccessibilityInfo.isScreenReaderEnabled = jest.fn(
-		() => isScreenReaderEnabled
+	AccessibilityInfo.isScreenReaderEnabled.mockResolvedValue(
+		Promise.resolve( true )
 	);
 } );
 
+afterAll( () => {
+	AccessibilityInfo.isScreenReaderEnabled.mockReset();
+} );
+
 it( 'allows modifying units via a11y actions', async () => {
 	const mockOpenUnitPicker = jest.fn();
-	const renderer = create(
+	const { getByA11yLabel } = render(
 		<RangeCell
 			label="Opacity"
 			minimumValue={ 0 }
@@ -41,17 +43,18 @@ it( 'allows modifying units via a11y actions', async () => {
 			openUnitPicker={ mockOpenUnitPicker }
 		/>
 	);
-	// Await async update to component state to avoid act warning
-	await act( () => isScreenReaderEnabled );
-	const { onAccessibilityAction } = renderer.toJSON().props;
 
-	onAccessibilityAction( { nativeEvent: { actionName: 'activate' } } );
+	const opacityControl = getByA11yLabel( /Opacity/ );
+	fireEvent( opacityControl, 'accessibilityAction', {
+		nativeEvent: { actionName: 'activate' },
+	} );
+
 	expect( mockOpenUnitPicker ).toHaveBeenCalled();
 } );
 
 describe( 'when range lacks an adjustable unit', () => {
 	it( 'disallows modifying units via a11y actions', async () => {
-		const renderer = create(
+		const { getByA11yLabel } = render(
 			<RangeCell
 				label="Opacity"
 				minimumValue={ 0 }
@@ -60,10 +63,9 @@ describe( 'when range lacks an adjustable unit', () => {
 				onChange={ jest.fn() }
 			/>
 		);
-		// Await async update to component state to avoid act warning
-		await act( () => isScreenReaderEnabled );
-		const { onAccessibilityAction } = renderer.toJSON().props;
 
+		const opacityControl = getByA11yLabel( /Opacity/ );
+		const { onAccessibilityAction } = opacityControl.props;
 		expect( () =>
 			onAccessibilityAction( { nativeEvent: { actionName: 'activate' } } )
 		).not.toThrow();

package/src/modal/README.md

@@ -150,118 +150,117 @@ const MyModal = () => {
 The set of props accepted by the component will be specified below.
 Props not included in this set will be applied to the input elements.
 
-#### title
+#### `aria.describedby`: `string`
 
-This property is used as the modal header's title.
-
-Titles are required for accessibility reasons, see `aria.labelledby` and `contentLabel` for other ways to provide a title.
+If this property is added, it will be added to the modal content `div` as `aria-describedby`.
 
--   Type: `String`
 -   Required: No
 
-#### onRequestClose
+#### `aria.labelledby`: `string`
 
-This function is called to indicate that the modal should be closed.
+If this property is added, it will be added to the modal content `div` as `aria-labelledby`.
+Use this when you are rendering the title yourself within the modal's content area instead of using the `title` prop. This ensures the title is usable by assistive technology.
 
--   Type: `function`
--   Required: Yes
+Titles are required for accessibility reasons, see `contentLabel` and `title` for other ways to provide a title.
 
-#### contentLabel
+-   Required: No
+-   Default: if the `title` prop is provided, this will default to the id of the element that renders `title`
 
-If this property is added, it will be added to the modal content `div` as `aria-label`.
+#### `bodyOpenClassName`: `string`
 
-Titles are required for accessibility reasons, see `aria.labelledby` and `title` for other ways to provide a title.
+Class name added to the body element when the modal is open.
 
--   Type: `String`
 -   Required: No
+-   Default: `modal-open`
 
-#### aria.labelledby
+#### `className`: `string`
 
-If this property is added, it will be added to the modal content `div` as `aria-labelledby`.
-Use this when you are rendering the title yourself within the modal's content area instead of using the `title` prop. This ensures the title is usable by assistive technology.
-
-Titles are required for accessibility reasons, see `contentLabel` and `title` for other ways to provide a title.
+If this property is added, it will an additional class name to the modal content `div`.
 
--   Type: `String`
 -   Required: No
--   Default: if the `title` prop is provided, this will default to the id of the element that renders `title`
 
-#### aria.describedby
+#### `contentLabel`: `string`
 
-If this property is added, it will be added to the modal content `div` as `aria-describedby`.
+If this property is added, it will be added to the modal content `div` as `aria-label`.
+
+Titles are required for accessibility reasons, see `aria.labelledby` and `title` for other ways to provide a title.
 
--   Type: `String`
 -   Required: No
 
-#### focusOnMount
+#### `focusOnMount`: `boolean | 'firstElement'`
 
 If this property is true, it will focus the first tabbable element rendered in the modal.
 
--   Type: `boolean`
 -   Required: No
--   Default: true
+-   Default: `true`
 
-#### shouldCloseOnEsc
+#### `isDismissible`: `boolean`
 
-If this property is added, it will determine whether the modal requests to close when the escape key is pressed.
+If this property is set to false, the modal will not display a close icon and cannot be dismissed.
 
--   Type: `boolean`
 -   Required: No
--   Default: true
+-   Default: `true`
 
-#### shouldCloseOnClickOutside
+#### `isFullScreen`: `boolean`
 
-If this property is added, it will determine whether the modal requests to close when a mouse click occurs outside of the modal content.
+This property when set to `true` will render a full screen modal.
 
--   Type: `boolean`
 -   Required: No
--   Default: true
+-   Default: `false`
 
-#### isDismissible
+#### `onRequestClose`: ``
 
-If this property is set to false, the modal will not display a close icon and cannot be dismissed.
+This function is called to indicate that the modal should be closed.
 
--   Type: `boolean`
--   Required: No
--   Default: true
+-   Required: Yes
 
-#### className
+#### `overlayClassName`: `string`
 
-If this property is added, it will an additional class name to the modal content `div`.
+If this property is added, it will an additional class name to the modal overlay `div`.
 
--   Type: `String`
 -   Required: No
 
-#### role
+#### `role`: `AriaRole`
 
 If this property is added, it will override the default role of the modal.
 
--   Type: `String`
 -   Required: No
 -   Default: `dialog`
 
-#### overlayClassName
+#### `shouldCloseOnClickOutside`: `boolean`
 
-If this property is added, it will an additional class name to the modal overlay `div`.
+If this property is added, it will determine whether the modal requests to close when a mouse click occurs outside of the modal content.
 
--   Type: `String`
 -   Required: No
+-   Default: `true`
 
-#### isFullScreen
+#### `shouldCloseOnEsc`: `boolean`
 
-This property when set to `true` will render a full screen modal.
+If this property is added, it will determine whether the modal requests to close when the escape key is pressed.
+
+-   Required: No
+-   Default: `true`
+
+#### `style`: `CSSProperties`
+
+If this property is added, it will be added to the modal frame `div`.
+
+-   Required: No
+
+#### `title`: `string`
+
+This property is used as the modal header's title.
+
+Titles are required for accessibility reasons, see `aria.labelledby` and `contentLabel` for other ways to provide a title.
 
--   Type: `boolean`
 -   Required: No
--   Default: `false`
 
-#### __experimentalHideHeader
+#### `__experimentalHideHeader`: `boolean`
 
 When set to `true`, the Modal's header (including the icon, title and close button) will not be rendered.
 
-*Warning*: This property is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
+_Warning_: This property is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.
 
--   Type: `boolean`
 -   Required: No
 -   Default: `false`