@wordpress/components 22.0.0 → 23.0.0

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/html-text-input/test/index.native.js

@@ -10,12 +10,12 @@ import { HTMLTextInput } from '..';
 
 // Finds the Content TextInput in our HTMLInputView.
 const findContentTextInput = ( screen ) => {
-	return screen.getByA11yLabel( 'html-view-content' );
+	return screen.getByLabelText( 'html-view-content' );
 };
 
 // Finds the Title TextInput in our HTMLInputView.
 const findTitleTextInput = ( screen ) => {
-	return screen.getByA11yLabel( 'html-view-title' );
+	return screen.getByLabelText( 'html-view-title' );
 };
 
 const getStylesFromColorScheme = () => {

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.getByA11yLabel(
-				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.getByA11yLabel( 'Open Settings' ) )
-		);
+		fireEvent.press( await subject.findByLabelText( 'Open Settings' ) );
 
 		// Assert.
-		const linkToField = await waitFor( () =>
-			subject.getByA11yLabel(
-				`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,41 +107,33 @@ describe.each( [
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act.
-				const block = await waitFor( () =>
-					subject.getByA11yLabel(
-						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.getByA11yLabel( 'Open Settings' )
-					)
+					await subject.findByLabelText( 'Open Settings' )
 				);
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByA11yLabel(
-							`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.getByA11yLabel( /Custom URL/ )
-						)
+						await subject.findByLabelText( /Custom URL/ )
 					);
 				}
-				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
+				await subject.findByLabelText( 'Apply' );
 
 				// Assert.
 				expect(
-					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+					subject.queryByLabelText( /Copy URL from the clipboard[,]/ )
 				).toBeNull();
 			} );
 		} );
@@ -166,64 +152,50 @@ describe.each( [
 				Clipboard.getString.mockReturnValue( url );
 
 				// Act.
-				const block = await waitFor( () =>
-					subject.getByA11yLabel(
-						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.getByA11yLabel( 'Open Settings' )
-					)
+					await subject.findByLabelText( 'Open Settings' )
 				);
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByA11yLabel(
-							`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.getByA11yLabel( 'Custom URL. Empty' )
-						)
+						await subject.findByLabelText( 'Custom URL. Empty' )
 					);
 				}
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByA11yLabel(
-							`Copy URL from the clipboard, ${ url }`
-						)
+					await subject.findByLabelText(
+						`Copy URL from the clipboard, ${ url }`
 					)
 				);
 				fireEvent.press(
-					await waitFor( () =>
-						subject.getByA11yLabel(
-							`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.getByA11yLabel( `Custom URL, ${ url }` )
-						)
+						await subject.findByLabelText( `Custom URL, ${ url }` )
 					);
 				}
-				await waitFor( () => subject.getByA11yLabel( 'Apply' ) );
+				await subject.findByLabelText( 'Apply' );
 
 				// Assert.
 				expect(
-					subject.queryByA11yLabel( /Copy URL from the clipboard[,]/ )
+					subject.queryByLabelText( /Copy URL from the clipboard[,]/ )
 				).toBeNull();
 			} );
 		} );
@@ -245,51 +217,37 @@ describe.each( [
 					Clipboard.getString.mockReturnValue( url );
 
 					// Act.
-					const block = await waitFor( () =>
-						subject.getByA11yLabel(
-							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.getByA11yLabel( 'Open Settings' )
-						)
+						await subject.findByLabelText( 'Open Settings' )
 					);
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByA11yLabel(
-								`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.getByA11yLabel( /Custom URL/ )
-							)
+							await subject.findByLabelText( /Custom URL/ )
 						);
 					}
-					await waitFor( () =>
-						subject.getByA11yLabel(
-							`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.getByA11yLabel(
-							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.getByA11yLabel( 'Open Settings' )
-						)
+						await subject.findByLabelText( 'Open Settings' )
 					);
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByA11yLabel(
-								`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.getByA11yLabel( /Custom URL/ )
-							)
+							await subject.findByLabelText( /Custom URL/ )
 						);
 					}
 					fireEvent.press(
-						await waitFor( () =>
-							subject.getByA11yLabel(
-								`Copy URL from the clipboard, ${ url }`
-							)
+						await subject.findByLabelText(
+							`Copy URL from the clipboard, ${ url }`
 						)
 					);
 
 					// Assert.
-					const linkToField = await waitFor( () =>
-						subject.getByA11yLabel(
-							`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/mobile/link-settings/test/link-settings-navigation.native.js

@@ -41,11 +41,11 @@ describe( 'Android', () => {
 		const screen = render( subject );
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		fireEvent.press(
-			screen.getByA11yLabel( 'Link to, Search or type URL' )
+			screen.getByLabelText( 'Link to, Search or type URL' )
 		);
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Go back' )
+			screen.getByLabelText( 'Go back' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -58,7 +58,7 @@ describe( 'Android', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Apply' )
+			screen.getByLabelText( 'Apply' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -82,7 +82,7 @@ describe( 'iOS', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Go back' )
+			screen.getByLabelText( 'Go back' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );
@@ -95,7 +95,7 @@ describe( 'iOS', () => {
 		fireEvent.press( screen.getByText( 'Link to' ) );
 		// Await back button to allow async state updates to complete
 		const backButton = await waitFor( () =>
-			screen.getByA11yLabel( 'Apply' )
+			screen.getByLabelText( 'Apply' )
 		);
 		Keyboard.dismiss.mockClear();
 		fireEvent.press( backButton );

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(
 		() => ( {