@wordpress/components 22.1.0 → 23.0.0

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

@@ -50,6 +50,24 @@ describe( 'InputControl', () => {
 
 			expect( input ).toBeInTheDocument();
 		} );
+
+		it( 'should render help text as description', () => {
+			render( <InputControl help="My help text" /> );
+			expect(
+				screen.getByRole( 'textbox', { description: 'My help text' } )
+			).toBeInTheDocument();
+		} );
+
+		it( 'should render help as aria-details when not plain text', () => {
+			render( <InputControl help={ <a href="/foo">My help text</a> } /> );
+
+			const input = screen.getByRole( 'textbox' );
+			const help = screen.getByRole( 'link', { name: 'My help text' } );
+
+			expect(
+				help.closest( `#${ input.getAttribute( 'aria-details' ) }` )
+			).toBeVisible();
+		} );
 	} );
 
 	describe( 'Ensurance of focus for number inputs', () => {

package/src/input-control/types.ts

@@ -15,6 +15,7 @@ import type { useDrag } from '@use-gesture/react';
 import type { StateReducer } from './reducer/state';
 import type { WordPressComponentProps } from '../ui/context';
 import type { FlexProps } from '../flex/types';
+import type { BaseControlProps } from '../base-control/types';
 
 export type LabelPosition = 'top' | 'bottom' | 'side' | 'edge';
 
@@ -171,6 +172,7 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 
 export interface InputControlProps
 	extends Omit< InputBaseProps, 'children' | 'isFocused' | keyof FlexProps >,
+		Pick< BaseControlProps, 'help' >,
 		/**
 		 * The `prefix` prop in `WordPressComponentProps< InputFieldProps, 'input', false >` comes from the
 		 * `HTMLInputAttributes` and clashes with the one from `InputBaseProps`. So we have to omit it from

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

@@ -58,7 +58,7 @@ class BottomSheetCell extends Component {
 
 		AccessibilityInfo.isScreenReaderEnabled().then(
 			( isScreenReaderEnabled ) => {
-				if ( this.isCurrent ) {
+				if ( this.isCurrent && isScreenReaderEnabled ) {
 					this.setState( { isScreenReaderEnabled } );
 				}
 			}

package/src/mobile/bottom-sheet/switch-cell.native.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { Switch } from 'react-native';
-import { isEmpty } from 'lodash';
+
 /**
  * WordPress dependencies
  */
@@ -20,7 +20,7 @@ export default function BottomSheetSwitchCell( props ) {
 	};
 
 	const getAccessibilityLabel = () => {
-		if ( isEmpty( cellProps.help ) ) {
+		if ( ! cellProps.help ) {
 			return value
 				? sprintf(
 						/* translators: accessibility text. Switch setting ON state. %s: Switch title. */

package/src/mobile/global-styles-context/index.native.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { pick } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -34,15 +29,18 @@ export const getMergedGlobalStyles = (
 	const baseGlobalColors = {
 		baseColors: baseGlobalStyles || {},
 	};
-	const blockStyleAttributes = pick(
-		blockAttributes,
-		BLOCK_STYLE_ATTRIBUTES
+	const blockStyleAttributes = Object.fromEntries(
+		Object.entries( blockAttributes ?? {} ).filter( ( [ key ] ) =>
+			BLOCK_STYLE_ATTRIBUTES.includes( key )
+		)
 	);
+
 	// This prevents certain wrapper styles from being applied to blocks that
 	// don't support them yet.
-	const wrapperPropsStyleFiltered = pick(
-		wrapperPropsStyle,
-		BLOCK_STYLE_ATTRIBUTES
+	const wrapperPropsStyleFiltered = Object.fromEntries(
+		Object.entries( wrapperPropsStyle ?? {} ).filter( ( [ key ] ) =>
+			BLOCK_STYLE_ATTRIBUTES.includes( key )
+		)
 	);
 
 	const mergedStyle = {

package/src/mobile/keyboard-aware-flat-list/index.ios.js

@@ -3,7 +3,7 @@
  */
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { FlatList } from 'react-native';
-import { isEqual } from 'lodash';
+import fastDeepEqual from 'fast-deep-equal/es6';
 import Animated, {
 	useAnimatedScrollHandler,
 	useSharedValue,
@@ -14,7 +14,7 @@ import Animated, {
  */
 import { memo, useCallback, useRef } from '@wordpress/element';
 
-const List = memo( FlatList, isEqual );
+const List = memo( FlatList, fastDeepEqual );
 const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
 	KeyboardAwareScrollView
 );

package/src/mobile/link-settings/test/edit.native.js

@@ -4,7 +4,7 @@
  * External dependencies
  */
 import Clipboard from '@react-native-clipboard/clipboard';
-import { fireEvent, initializeEditor, waitFor } from 'test/helpers';
+import { fireEvent, initializeEditor } from 'test/helpers';
 /**
  * WordPress dependencies
  */
@@ -76,24 +76,18 @@ describe.each( [
 		Clipboard.getString.mockReturnValue( url );
 
 		// Act.
-		const block = await waitFor( () =>
-			subject.getByLabelText(
-				type === 'core/image' ? /Image Block/ : /Button Block/
-			)
+		const [ block ] = await subject.findAllByLabelText(
+			type === 'core/image' ? /Image Block/ : /Button Block/
 		);
 		fireEvent.press( block );
 		fireEvent.press( block );
-		fireEvent.press(
-			await waitFor( () => subject.getByLabelText( 'Open Settings' ) )
-		);
+		fireEvent.press( await subject.findByLabelText( 'Open Settings' ) );
 
 		// Assert.
-		const linkToField = await waitFor( () =>
-			subject.getByLabelText(
-				`Link to, ${
-					type === 'core/image' ? 'None' : 'Search or type URL'
-				}`
-			)
+		const linkToField = await subject.findByLabelText(
+			`Link to, ${
+				type === 'core/image' ? 'None' : 'Search or type URL'
+			}`
 		);
 		expect( linkToField ).toBeTruthy();
 	} );
@@ -113,37 +107,29 @@ describe.each( [
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act.
-				const block = await waitFor( () =>
-					subject.getByLabelText(
-						type === 'core/image' ? /Image Block/ : /Button Block/
-					)
+				const [ block ] = await subject.findAllByLabelText(
+					type === 'core/image' ? /Image Block/ : /Button Block/
 				);
 				fireEvent.press( block );
 				fireEvent.press( block );
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText( 'Open Settings' )
-					)
+					await subject.findByLabelText( 'Open Settings' )
 				);
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image'
-									? 'None'
-									: 'Search or type URL'
-							}`
-						)
+					await subject.findByLabelText(
+						`Link to, ${
+							type === 'core/image'
+								? 'None'
+								: 'Search or type URL'
+						}`
 					)
 				);
 				if ( type === 'core/image' ) {
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( /Custom URL/ )
-						)
+						await subject.findByLabelText( /Custom URL/ )
 					);
 				}
-				await waitFor( () => subject.getByLabelText( 'Apply' ) );
+				await subject.findByLabelText( 'Apply' );
 
 				// Assert.
 				expect(
@@ -166,60 +152,46 @@ describe.each( [
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act.
-				const block = await waitFor( () =>
-					subject.getByLabelText(
-						type === 'core/image' ? /Image Block/ : /Button Block/
-					)
+				const [ block ] = await subject.findAllByLabelText(
+					type === 'core/image' ? /Image Block/ : /Button Block/
 				);
 				fireEvent.press( block );
 				fireEvent.press( block );
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText( 'Open Settings' )
-					)
+					await subject.findByLabelText( 'Open Settings' )
 				);
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image'
-									? 'None'
-									: 'Search or type URL'
-							}`
-						)
+					await subject.findByLabelText(
+						`Link to, ${
+							type === 'core/image'
+								? 'None'
+								: 'Search or type URL'
+						}`
 					)
 				);
 				if ( type === 'core/image' ) {
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( 'Custom URL. Empty' )
-						)
+						await subject.findByLabelText( 'Custom URL. Empty' )
 					);
 				}
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Copy URL from the clipboard, ${ url }`
-						)
+					await subject.findByLabelText(
+						`Copy URL from the clipboard, ${ url }`
 					)
 				);
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image' ? 'Custom URL' : url
-							}`
-						)
+					await subject.findByLabelText(
+						`Link to, ${
+							type === 'core/image' ? 'Custom URL' : url
+						}`
 					)
 				);
 				if ( type === 'core/image' ) {
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( `Custom URL, ${ url }` )
-						)
+						await subject.findByLabelText( `Custom URL, ${ url }` )
 					);
 				}
-				await waitFor( () => subject.getByLabelText( 'Apply' ) );
+				await subject.findByLabelText( 'Apply' );
 
 				// Assert.
 				expect(
@@ -245,51 +217,37 @@ describe.each( [
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act.
-					const block = await waitFor( () =>
-						subject.getByLabelText(
-							type === 'core/image'
-								? /Image Block/
-								: /Button Block/
-						)
+					const [ block ] = await subject.findAllByLabelText(
+						type === 'core/image' ? /Image Block/ : /Button Block/
 					);
 					fireEvent.press( block );
 					fireEvent.press( block );
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( 'Open Settings' )
-						)
+						await subject.findByLabelText( 'Open Settings' )
 					);
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText(
-								`Link to, ${
-									type === 'core/image'
-										? 'None'
-										: 'Search or type URL'
-								}`
-							)
+						await subject.findByLabelText(
+							`Link to, ${
+								type === 'core/image'
+									? 'None'
+									: 'Search or type URL'
+							}`
 						)
 					);
 					if ( type === 'core/image' ) {
 						fireEvent.press(
-							await waitFor( () =>
-								subject.getByLabelText( /Custom URL/ )
-							)
+							await subject.findByLabelText( /Custom URL/ )
 						);
 					}
-					await waitFor( () =>
-						subject.getByLabelText(
-							`Copy URL from the clipboard, ${ url }`
-						)
+					await subject.findByLabelText(
+						`Copy URL from the clipboard, ${ url }`
 					);
 
 					// Assert.
-					const clipboardUrl = await waitFor( () =>
-						subject.getByText( url )
-					);
+					const clipboardUrl = await subject.findByText( url );
 					expect( clipboardUrl ).toBeTruthy();
-					const clipboardNote = await waitFor( () =>
-						subject.getByText( __( 'From clipboard' ) )
+					const clipboardNote = await subject.findByText(
+						__( 'From clipboard' )
 					);
 					expect( clipboardNote ).toBeTruthy();
 				}
@@ -312,53 +270,39 @@ describe.each( [
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act.
-					const block = await waitFor( () =>
-						subject.getByLabelText(
-							type === 'core/image'
-								? /Image Block/
-								: /Button Block/
-						)
+					const [ block ] = await subject.findAllByLabelText(
+						type === 'core/image' ? /Image Block/ : /Button Block/
 					);
 					fireEvent.press( block );
 					fireEvent.press( block );
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText( 'Open Settings' )
-						)
+						await subject.findByLabelText( 'Open Settings' )
 					);
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText(
-								`Link to, ${
-									type === 'core/image'
-										? 'None'
-										: 'Search or type URL'
-								}`
-							)
+						await subject.findByLabelText(
+							`Link to, ${
+								type === 'core/image'
+									? 'None'
+									: 'Search or type URL'
+							}`
 						)
 					);
 					if ( type === 'core/image' ) {
 						fireEvent.press(
-							await waitFor( () =>
-								subject.getByLabelText( /Custom URL/ )
-							)
+							await subject.findByLabelText( /Custom URL/ )
 						);
 					}
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByLabelText(
-								`Copy URL from the clipboard, ${ url }`
-							)
+						await subject.findByLabelText(
+							`Copy URL from the clipboard, ${ url }`
 						)
 					);
 
 					// Assert.
-					const linkToField = await waitFor( () =>
-						subject.getByLabelText(
-							`Link to, ${
-								type === 'core/image' ? 'Custom URL' : url
-							}`
-						)
+					const linkToField = await subject.findByLabelText(
+						`Link to, ${
+							type === 'core/image' ? 'Custom URL' : url
+						}`
 					);
 					expect( linkToField ).toBeTruthy();
 				}

package/src/modal/index.tsx

@@ -98,6 +98,17 @@ function UnforwardedModal(
 	}, [ bodyOpenClassName ] );
 
 	function handleEscapeKeyDown( event: KeyboardEvent< HTMLDivElement > ) {
+		if (
+			// Ignore keydowns from IMEs
+			event.nativeEvent.isComposing ||
+			// Workaround for Mac Safari where the final Enter/Backspace of an IME composition
+			// is `isComposing=false`, even though it's technically still part of the composition.
+			// These can only be detected by keyCode.
+			event.keyCode === 229
+		) {
+			return;
+		}
+
 		if (
 			shouldCloseOnEsc &&
 			event.code === 'Escape' &&

package/src/modal/stories/index.tsx

@@ -12,6 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import Button from '../../button';
+import InputControl from '../../input-control';
 import Modal from '../';
 import type { ModalProps } from '../types';
 
@@ -75,6 +76,8 @@ const Template: ComponentStory< typeof Modal > = ( {
 						anim id est laborum.
 					</p>
 
+					<InputControl style={ { marginBottom: '20px' } } />
+
 					<Button variant="secondary" onClick={ closeModal }>
 						Close Modal
 					</Button>

package/src/modal/test/index.tsx

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -69,4 +70,18 @@ describe( 'Modal', () => {
 		const title = within( dialog ).queryByText( 'Test Title' );
 		expect( title ).not.toBeInTheDocument();
 	} );
+
+	it( 'should call onRequestClose when the escape key is pressed', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+		const onRequestClose = jest.fn();
+		render(
+			<Modal onRequestClose={ onRequestClose }>
+				<p>Modal content</p>
+			</Modal>
+		);
+		await user.keyboard( '[Escape]' );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
 } );

package/src/navigation/stories/index.js

@@ -6,12 +6,12 @@ import NavigationBackButton from '../back-button';
 import NavigationGroup from '../group';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
-import { DefaultStory } from './default';
-import { GroupStory } from './group';
-import { ControlledStateStory } from './controlled-state';
-import { SearchStory } from './search';
-import { MoreExamplesStory } from './more-examples';
-import { HideIfEmptyStory } from './hide-if-empty';
+import { DefaultStory } from './utils/default';
+import { GroupStory } from './utils/group';
+import { ControlledStateStory } from './utils/controlled-state';
+import { SearchStory } from './utils/search';
+import { MoreExamplesStory } from './utils/more-examples';
+import { HideIfEmptyStory } from './utils/hide-if-empty';
 import './style.css';
 
 export default {

package/src/navigation/stories/{controlled-state.js → utils/controlled-state.js}

@@ -7,9 +7,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
+import Navigation from '../..';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
 
 export function ControlledStateStory() {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );

package/src/navigation/stories/{default.js → utils/default.js}

@@ -6,9 +6,9 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
+import Navigation from '../..';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
 
 export function DefaultStory() {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );

package/src/navigation/stories/{group.js → utils/group.js}

@@ -6,10 +6,10 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
-import NavigationGroup from '../group';
+import Navigation from '../..';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
+import NavigationGroup from '../../group';
 
 export function GroupStory() {
 	const [ activeItem, setActiveItem ] = useState( 'item-1' );

package/src/navigation/stories/{hide-if-empty.js → utils/hide-if-empty.js}

@@ -1,9 +1,9 @@
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
+import Navigation from '../..';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
 
 export function HideIfEmptyStory() {
 	return (

package/src/navigation/stories/{more-examples.js → utils/more-examples.js}

@@ -7,10 +7,10 @@ import { Icon, wordpress, home } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationGroup from '../group';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
+import Navigation from '../..';
+import NavigationGroup from '../../group';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
 
 export function MoreExamplesStory() {
 	const [ activeItem, setActiveItem ] = useState( 'child-1' );

package/src/navigation/stories/{search.js → utils/search.js}

@@ -6,11 +6,11 @@ import { useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import Navigation from '..';
-import NavigationGroup from '../group';
-import NavigationItem from '../item';
-import NavigationMenu from '../menu';
-import { normalizedSearch } from '../utils';
+import Navigation from '../..';
+import NavigationGroup from '../../group';
+import NavigationItem from '../../item';
+import NavigationMenu from '../../menu';
+import { normalizedSearch } from '../../utils';
 
 const searchItems = [
 	{ item: 'foo', title: 'Foo' },

package/src/navigator/navigator-provider/component.tsx

@@ -43,8 +43,8 @@ function UnconnectedNavigatorProvider(
 
 	const goTo: NavigatorContextType[ 'goTo' ] = useCallback(
 		( path, options = {} ) => {
-			setLocationHistory( [
-				...locationHistory,
+			setLocationHistory( ( prevLocationHistory ) => [
+				...prevLocationHistory,
 				{
 					...options,
 					path,
@@ -53,21 +53,24 @@ function UnconnectedNavigatorProvider(
 				},
 			] );
 		},
-		[ locationHistory ]
+		[]
 	);
 
 	const goBack: NavigatorContextType[ 'goBack' ] = useCallback( () => {
-		if ( locationHistory.length > 1 ) {
-			setLocationHistory( [
-				...locationHistory.slice( 0, -2 ),
+		setLocationHistory( ( prevLocationHistory ) => {
+			if ( prevLocationHistory.length <= 1 ) {
+				return prevLocationHistory;
+			}
+			return [
+				...prevLocationHistory.slice( 0, -2 ),
 				{
-					...locationHistory[ locationHistory.length - 2 ],
+					...prevLocationHistory[ prevLocationHistory.length - 2 ],
 					isBack: true,
 					hasRestoredFocus: false,
 				},
-			] );
-		}
-	}, [ locationHistory ] );
+			];
+		} );
+	}, [] );
 
 	const navigatorContextValue: NavigatorContextType = useMemo(
 		() => ( {