@wordpress/components 22.1.0 → 23.1.0

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import { find, get } from 'lodash';
+import { get } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -113,9 +113,9 @@ export function getBlockColors(
 		}
 
 		if ( ! isCustomColor ) {
-			const mappedColor = find( defaultColors, {
-				slug: value,
-			} );
+			const mappedColor = Object.values( defaultColors ?? {} ).find(
+				( { slug } ) => slug === value
+			);
 
 			if ( mappedColor ) {
 				blockStyles[ styleKey ] = mappedColor.color;
@@ -143,6 +143,7 @@ export function getBlockTypography(
 	const typographyStyles = {};
 	const customBlockStyles = blockStyleAttributes?.style?.typography || {};
 	const blockGlobalStyles = baseGlobalStyles?.blocks?.[ blockName ];
+	const parsedFontSizes = Object.values( fontSizes ?? {} );
 
 	// Global styles.
 	if ( blockGlobalStyles?.typography ) {
@@ -153,9 +154,9 @@ export function getBlockTypography(
 			if ( parseInt( fontSize, 10 ) ) {
 				typographyStyles.fontSize = fontSize;
 			} else {
-				const mappedFontSize = find( fontSizes, {
-					slug: fontSize,
-				} );
+				const mappedFontSize = parsedFontSizes.find(
+					( { slug } ) => slug === fontSize
+				);
 
 				if ( mappedFontSize ) {
 					typographyStyles.fontSize = mappedFontSize?.size;
@@ -169,9 +170,9 @@ export function getBlockTypography(
 	}
 
 	if ( blockStyleAttributes?.fontSize && baseGlobalStyles ) {
-		const mappedFontSize = find( fontSizes, {
-			slug: blockStyleAttributes?.fontSize,
-		} );
+		const mappedFontSize = parsedFontSizes.find(
+			( { slug } ) => slug === blockStyleAttributes?.fontSize
+		);
 
 		if ( mappedFontSize ) {
 			typographyStyles.fontSize = mappedFontSize?.size;
@@ -212,9 +213,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				const path = $2.split( '--' );
 				const mappedPresetValue = mappedValues[ path[ 0 ] ];
 				if ( mappedPresetValue && mappedPresetValue.slug ) {
-					const matchedValue = find( mappedPresetValue.values, {
-						slug: path[ 1 ],
-					} );
+					const matchedValue = Object.values(
+						mappedPresetValue.values ?? {}
+					).find( ( { slug } ) => slug === path[ 1 ] );
 					return matchedValue?.[ mappedPresetValue.slug ];
 				}
 				return UNKNOWN_VALUE;
@@ -244,9 +245,9 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		if ( variable === 'var' ) {
 			stylesBase = stylesBase.replace( varRegex, ( _$1, $2 ) => {
 				if ( mappedValues?.color ) {
-					const matchedValue = find( mappedValues.color?.values, {
-						slug: $2,
-					} );
+					const matchedValue = mappedValues.color?.values?.find(
+						( { slug } ) => slug === $2
+					);
 					return `"${ matchedValue?.color }"`;
 				}
 				return UNKNOWN_VALUE;

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,16 @@ 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();
+		const onRequestClose = jest.fn();
+		render(
+			<Modal onRequestClose={ onRequestClose }>
+				<p>Modal content</p>
+			</Modal>
+		);
+		await user.keyboard( '[Escape]' );
+		expect( onRequestClose ).toHaveBeenCalled();
+	} );
 } );

package/src/navigable-container/test/navigable-menu.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { NavigableMenu } from '../menu';
 
+jest.useFakeTimers();
+
 const NavigableMenuTestCase = ( props ) => (
 	<NavigableMenu { ...props }>
 		<button>Item 1</button>

package/src/navigable-container/test/tababble-container.js

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { TabbableContainer } from '../tabbable';
 
+jest.useFakeTimers();
+
 const TabbableContainerTestCase = ( props ) => (
 	<TabbableContainer { ...props }>
 		<button>Item 1</button>

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/navigation/test/index.js

@@ -16,6 +16,8 @@ import Navigation from '..';
 import NavigationItem from '../item';
 import NavigationMenu from '../menu';
 
+jest.useFakeTimers();
+
 const TestNavigation = ( { activeItem, rootTitle, showBadge } = {} ) => (
 	<Navigation activeItem={ activeItem }>
 		<NavigationMenu title={ rootTitle }>

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

package/src/navigator/test/index.tsx

@@ -20,6 +20,8 @@ import {
 	NavigatorBackButton,
 } from '..';
 
+jest.useFakeTimers();
+
 jest.mock( 'framer-motion', () => {
 	const actual = jest.requireActual( 'framer-motion' );
 	return {