@wordpress/components 25.3.0 → 25.5.0

package/src/mobile/bottom-sheet/bottom-sheet-navigation/test/navigation-container.native.js

@@ -2,7 +2,12 @@
  * External dependencies
  */
 import { Text } from 'react-native';
-import { render, fireEvent, act } from 'test/helpers';
+import {
+	render,
+	fireEvent,
+	withReanimatedTimer,
+	advanceAnimationByTime,
+} from 'test/helpers';
 import { useNavigation } from '@react-navigation/native';
 
 /**
@@ -10,11 +15,8 @@ import { useNavigation } from '@react-navigation/native';
  */
 import NavigationContainer from '../navigation-container';
 import NavigationScreen from '../navigation-screen';
-import { performLayoutAnimation } from '../../../layout-animation';
 
-jest.mock( '../../../layout-animation', () => ( {
-	performLayoutAnimation: jest.fn(),
-} ) );
+const WINDOW_HEIGHT = 1000;
 
 const TestScreen = ( { fullScreen, name, navigateTo } ) => {
 	const navigation = useNavigation();
@@ -27,130 +29,174 @@ const TestScreen = ( { fullScreen, name, navigateTo } ) => {
 	);
 };
 
+const fireLayoutEvent = ( element, layout ) =>
+	fireEvent( element, 'layout', {
+		nativeEvent: { layout },
+	} );
+
 beforeAll( () => {
-	jest.useFakeTimers( { legacyFakeTimers: true } );
+	jest.spyOn(
+		require( 'react-native' ),
+		'useWindowDimensions'
+	).mockReturnValue( { width: 900, height: WINDOW_HEIGHT } );
 } );
 
-afterAll( () => {
-	jest.runOnlyPendingTimers();
-	jest.useRealTimers();
-} );
+it( 'animates height transitioning from non-full-screen to non-full-screen', async () =>
+	withReanimatedTimer( async () => {
+		const screen = render(
+			<NavigationContainer testID="navigation-container" main animate>
+				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+				<TestScreen name="test-screen-2" navigateTo="test-screen-1" />
+			</NavigationContainer>
+		);
 
-it( 'animates height transitioning from non-full-screen to full-screen', async () => {
-	const screen = render(
-		<NavigationContainer main animate>
-			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-			<TestScreen
-				name="test-screen-2"
-				navigateTo="test-screen-1"
-				fullScreen
-			/>
-		</NavigationContainer>
-	);
+		const navigationContainer = await screen.findByTestId(
+			'navigation-container'
+		);
 
-	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await screen.findByTestId(
-		'navigation-screen-test-screen-1'
-	);
-	// Trigger non-full-screen layout event
-	act( () => {
-		fireEvent( navigationScreen, 'layout', {
-			nativeEvent: {
-				layout: {
-					height: 123,
-				},
-			},
+		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
+
+		// First height value should be set without animation, but we need
+		// to wait for a frame to let animated styles be updated.
+		const screen1Layout = { height: 100 };
+		fireLayoutEvent(
+			screen.getByTestId( 'navigation-screen-test-screen-1' ),
+			screen1Layout
+		);
+		advanceAnimationByTime( 1 );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
+
+		// Navigate to screen 2
+		fireEvent.press( screen.getByText( /test-screen-1/ ) );
+		const screen2Layout = { height: 200 };
+		fireLayoutEvent(
+			screen.getByTestId( 'navigation-screen-test-screen-2' ),
+			screen2Layout
+		);
+		// The animation takes 300 ms, so we wait that time plus 1 ms
+		// to the completion.
+		advanceAnimationByTime( 301 );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen2Layout );
+	} ) );
+
+it( 'animates height transitioning from non-full-screen to full-screen', async () =>
+	withReanimatedTimer( async () => {
+		const screen = render(
+			<NavigationContainer testID="navigation-container" main animate>
+				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+				<TestScreen
+					name="test-screen-2"
+					navigateTo="test-screen-1"
+					fullScreen
+				/>
+			</NavigationContainer>
+		);
+
+		const navigationContainer = await screen.findByTestId(
+			'navigation-container'
+		);
+
+		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
+
+		// First height value should be set without animation, but we need
+		// to wait for a frame to let animated styles be updated.
+		const screen1Layout = { height: 100 };
+		fireLayoutEvent(
+			screen.getByTestId( 'navigation-screen-test-screen-1' ),
+			screen1Layout
+		);
+		advanceAnimationByTime( 1 );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
+
+		// Navigate to screen 2
+		fireEvent.press( screen.getByText( /test-screen-1/ ) );
+		// The animation takes 300 ms, so we wait that time plus 1 ms
+		// to the completion.
+		advanceAnimationByTime( 301 );
+		expect( navigationContainer ).toHaveAnimatedStyle( {
+			height: WINDOW_HEIGHT,
 		} );
-		// Trigger debounced setting of height after layout event
-		jest.advanceTimersByTime( 10 );
-	} );
-	// Navigate to screen 2
-	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
-	// Await navigation screen to allow async state updates to complete
-	await screen.findByText( /test-screen-2/ );
+	} ) );
 
-	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
-} );
+it( 'animates height transitioning from full-screen to non-full-screen', async () =>
+	withReanimatedTimer( async () => {
+		const screen = render(
+			<NavigationContainer testID="navigation-container" main animate>
+				<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+				<TestScreen
+					name="test-screen-2"
+					navigateTo="test-screen-1"
+					fullScreen
+				/>
+			</NavigationContainer>
+		);
 
-it( 'animates height transitioning from full-screen to non-full-screen', async () => {
-	const screen = render(
-		<NavigationContainer main animate>
-			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-			<TestScreen
-				name="test-screen-2"
-				navigateTo="test-screen-1"
-				fullScreen
-			/>
-		</NavigationContainer>
-	);
+		const navigationContainer = await screen.findByTestId(
+			'navigation-container'
+		);
 
-	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await screen.findByTestId(
-		'navigation-screen-test-screen-1'
-	);
-	// Trigger non-full-screen layout event
-	act( () => {
-		fireEvent( navigationScreen, 'layout', {
-			nativeEvent: {
-				layout: {
-					height: 123,
-				},
-			},
+		expect( navigationContainer ).toHaveAnimatedStyle( { height: 1 } );
+
+		// First height value should be set without animation, but we need
+		// to wait for a frame to let animated styles be updated.
+		const screen1Layout = { height: 100 };
+		fireLayoutEvent(
+			screen.getByTestId( 'navigation-screen-test-screen-1' ),
+			screen1Layout
+		);
+		advanceAnimationByTime( 1 );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
+
+		// Navigate to screen 2
+		fireEvent.press( screen.getByText( /test-screen-1/ ) );
+		// The animation takes 300 ms, so we wait that time plus 1 ms
+		// to the completion.
+		advanceAnimationByTime( 301 );
+		expect( navigationContainer ).toHaveAnimatedStyle( {
+			height: WINDOW_HEIGHT,
 		} );
-		// Trigger debounced setting of height after layout event
-		jest.advanceTimersByTime( 10 );
-	} );
-	// Navigate to screen 2
-	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
-	// Navigate to screen 1
-	fireEvent.press( await screen.findByText( /test-screen-2/ ) );
-	// Await navigation screen to allow async state updates to complete
-	await screen.findByText( /test-screen-1/ );
-
-	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 2 );
-} );
 
-it( 'does not animate height transitioning from full-screen to full-screen', async () => {
-	const screen = render(
-		<NavigationContainer main animate>
-			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
-			<TestScreen
-				name="test-screen-2"
-				navigateTo="test-screen-3"
-				fullScreen
-			/>
-			<TestScreen
-				name="test-screen-3"
-				navigateTo="test-screen-2"
-				fullScreen
-			/>
-		</NavigationContainer>
-	);
+		// Navigate to screen 1
+		fireEvent.press( await screen.findByText( /test-screen-2/ ) );
+		// The animation takes 300 ms, so we wait that time plus 1 ms
+		// to the completion.
+		advanceAnimationByTime( 301 );
+		expect( navigationContainer ).toHaveAnimatedStyle( screen1Layout );
+	} ) );
 
-	// Await navigation screen to allow async state updates to complete
-	const navigationScreen = await screen.findByTestId(
-		'navigation-screen-test-screen-1'
-	);
-	// Trigger non-full-screen layout event
-	act( () => {
-		fireEvent( navigationScreen, 'layout', {
-			nativeEvent: {
-				layout: {
-					height: 123,
-				},
-			},
+it( 'does not animate height transitioning from full-screen to full-screen', async () =>
+	withReanimatedTimer( async () => {
+		const screen = render(
+			<NavigationContainer testID="navigation-container" main animate>
+				<TestScreen
+					name="test-screen-1"
+					navigateTo="test-screen-2"
+					fullScreen
+				/>
+				<TestScreen
+					name="test-screen-2"
+					navigateTo="test-screen-1"
+					fullScreen
+				/>
+			</NavigationContainer>
+		);
+
+		const navigationContainer = await screen.findByTestId(
+			'navigation-container'
+		);
+
+		// First height value should be set without animation, but we need
+		// to wait for a frame to let animated styles be updated.
+		advanceAnimationByTime( 1 );
+		expect( navigationContainer ).toHaveAnimatedStyle( {
+			height: WINDOW_HEIGHT,
 		} );
-		// Trigger debounced setting of height after layout event
-		jest.advanceTimersByTime( 10 );
-	} );
-	// Navigate to screen 2
-	fireEvent.press( await screen.findByText( /test-screen-1/ ) );
-	// Navigate to screen 3
-	fireEvent.press( await screen.findByText( /test-screen-2/ ) );
-	// Navigate to screen 2
-	fireEvent.press( await screen.findByText( /test-screen-3/ ) );
-	// Await navigation screen to allow async state updates to complete
-	await screen.findByText( /test-screen-2/ );
-
-	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
-} );
+
+		// Navigate to screen 2
+		fireEvent.press( screen.getByText( /test-screen-1/ ) );
+		// We wait some milliseconds to check if height has changed.
+		advanceAnimationByTime( 10 );
+		expect( navigationContainer ).toHaveAnimatedStyle( {
+			height: WINDOW_HEIGHT,
+		} );
+	} ) );

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

@@ -575,6 +575,8 @@ class BottomSheet extends Component {
 								listProps,
 								setIsFullScreen: this.setIsFullScreen,
 								safeAreaBottomInset,
+								maxHeight,
+								isMaxHeightSet,
 							} }
 						>
 							{ hasNavigation ? (

package/src/mobile/image/index.native.js

@@ -185,6 +185,13 @@ const ImageComponent = ( {
 		imageHeight && { height: imageHeight },
 		shapeStyle,
 	];
+	const imageSelectedStyles = [
+		usePreferredColorSchemeStyle(
+			styles.imageBorder,
+			styles.imageBorderDark
+		),
+		{ height: containerSize?.height },
+	];
 
 	return (
 		<View
@@ -210,12 +217,7 @@ const ImageComponent = ( {
 				{ isSelected &&
 					highlightSelected &&
 					! ( isUploadInProgress || isUploadFailed ) && (
-						<View
-							style={ [
-								styles.imageBorder,
-								{ height: containerSize?.height },
-							] }
-						/>
+						<View style={ imageSelectedStyles } />
 					) }
 
 				{ ! imageData ? (

package/src/mobile/image/style.native.scss

@@ -7,7 +7,7 @@
 }
 
 .imageBorder {
-	border-color: $blue-medium;
+	border-color: $blue-40;
 	border-width: 2px;
 	border-style: solid;
 	position: absolute;
@@ -16,6 +16,10 @@
 	height: 100%;
 }
 
+.imageBorderDark {
+	border-color: $blue-50;
+}
+
 .retryIcon {
 	width: 80px;
 	height: 80px;

package/src/mobile/link-picker/link-picker-results.native.js

@@ -97,7 +97,7 @@ export default function LinkPickerResults( {
 	const onEndReached = () => fetchMoreSuggestions( { query, links } );
 
 	const spinner = ! hasAllSuggestions && meetsThreshold( query ) && (
-		<View style={ styles.spinner }>
+		<View style={ styles.spinner } testID="link-picker-loading">
 			<ActivityIndicator animating />
 		</View>
 	);

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

@@ -4,7 +4,11 @@
  * External dependencies
  */
 import Clipboard from '@react-native-clipboard/clipboard';
-import { fireEvent, initializeEditor } from 'test/helpers';
+import {
+	fireEvent,
+	initializeEditor,
+	waitForElementToBeRemoved,
+} from 'test/helpers';
 /**
  * WordPress dependencies
  */
@@ -12,6 +16,19 @@ import { registerCoreBlocks } from '@wordpress/block-library';
 import { getBlockTypes, unregisterBlockType } from '@wordpress/blocks';
 import { __ } from '@wordpress/i18n';
 
+// Mock debounce to prevent potentially belated state updates.
+jest.mock( '@wordpress/compose/src/utils/debounce', () => ( {
+	debounce: ( fn ) => {
+		fn.cancel = jest.fn();
+		return fn;
+	},
+} ) );
+// Mock link suggestions that are fetched by the link picker
+// when typing a search query.
+jest.mock( '@wordpress/core-data/src/fetch', () => ( {
+	__experimentalFetchLinkSuggestions: jest.fn().mockResolvedValue( [ {} ] ),
+} ) );
+
 /**
  * Utility function to unregister all core block types previously registered
  * when staging the Redux Store `beforeAll` integration tests start running.
@@ -34,9 +51,7 @@ describe.each( [
 			type: 'core/button',
 			initialHtml: `
 				<!-- wp:button {"style":{"border":{"radius":"5px"}}} -->
-				<div class="wp-block-button">
-					<a class="wp-block-button__link" style="border-radius:5px">Link</a>
-				</div>
+				<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="border-radius:5px">Link</a></div>
 				<!-- /wp:button -->
 			`,
 			toJSON: () => 'core/button',
@@ -112,11 +127,9 @@ describe.each( [
 				);
 				fireEvent.press( block );
 				fireEvent.press( block );
+				fireEvent.press( subject.getByLabelText( 'Open Settings' ) );
 				fireEvent.press(
-					await subject.findByLabelText( 'Open Settings' )
-				);
-				fireEvent.press(
-					await subject.findByLabelText(
+					subject.getByLabelText(
 						`Link to, ${
 							type === 'core/image'
 								? 'None'
@@ -125,9 +138,8 @@ describe.each( [
 					)
 				);
 				if ( type === 'core/image' ) {
-					fireEvent.press(
-						await subject.findByLabelText( /Custom URL/ )
-					);
+					// Wait for side effects produced by Clipboard and link suggestions
+					fireEvent.press( subject.getByLabelText( /Custom URL/ ) );
 				}
 				await subject.findByLabelText( 'Apply' );
 
@@ -157,11 +169,9 @@ describe.each( [
 				);
 				fireEvent.press( block );
 				fireEvent.press( block );
+				fireEvent.press( subject.getByLabelText( 'Open Settings' ) );
 				fireEvent.press(
-					await subject.findByLabelText( 'Open Settings' )
-				);
-				fireEvent.press(
-					await subject.findByLabelText(
+					subject.getByLabelText(
 						`Link to, ${
 							type === 'core/image'
 								? 'None'
@@ -171,7 +181,7 @@ describe.each( [
 				);
 				if ( type === 'core/image' ) {
 					fireEvent.press(
-						await subject.findByLabelText( 'Custom URL. Empty' )
+						subject.getByLabelText( 'Custom URL. Empty' )
 					);
 				}
 				fireEvent.press(
@@ -186,11 +196,15 @@ describe.each( [
 						}`
 					)
 				);
+
 				if ( type === 'core/image' ) {
 					fireEvent.press(
-						await subject.findByLabelText( `Custom URL, ${ url }` )
+						subject.getByLabelText( `Custom URL, ${ url }` )
 					);
 				}
+				await waitForElementToBeRemoved( () =>
+					subject.getByTestId( 'link-picker-loading' )
+				);
 				await subject.findByLabelText( 'Apply' );
 
 				// Assert.
@@ -223,10 +237,10 @@ describe.each( [
 					fireEvent.press( block );
 					fireEvent.press( block );
 					fireEvent.press(
-						await subject.findByLabelText( 'Open Settings' )
+						subject.getByLabelText( 'Open Settings' )
 					);
 					fireEvent.press(
-						await subject.findByLabelText(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image'
 									? 'None'
@@ -236,7 +250,7 @@ describe.each( [
 					);
 					if ( type === 'core/image' ) {
 						fireEvent.press(
-							await subject.findByLabelText( /Custom URL/ )
+							subject.getByLabelText( /Custom URL/ )
 						);
 					}
 					await subject.findByLabelText(
@@ -276,10 +290,10 @@ describe.each( [
 					fireEvent.press( block );
 					fireEvent.press( block );
 					fireEvent.press(
-						await subject.findByLabelText( 'Open Settings' )
+						subject.getByLabelText( 'Open Settings' )
 					);
 					fireEvent.press(
-						await subject.findByLabelText(
+						subject.getByLabelText(
 							`Link to, ${
 								type === 'core/image'
 									? 'None'
@@ -289,7 +303,7 @@ describe.each( [
 					);
 					if ( type === 'core/image' ) {
 						fireEvent.press(
-							await subject.findByLabelText( /Custom URL/ )
+							subject.getByLabelText( /Custom URL/ )
 						);
 					}
 					fireEvent.press(

package/src/mobile/segmented-control/index.native.js

@@ -149,6 +149,17 @@ const SegmentedControls = ( {
 		<View style={ styles.row }>
 			<View style={ styles.flex }>{ addonLeft }</View>
 			<View style={ [ containerStyle, isIOS && styles.containerIOS ] }>
+				<Animated.View
+					style={ [
+						{
+							width,
+							left: positionAnimationValue,
+							height,
+						},
+						selectedStyle,
+						outlineStyle,
+					] }
+				/>
 				{ segments.map( ( segment, index ) => {
 					return (
 						<Segment
@@ -170,17 +181,6 @@ const SegmentedControls = ( {
 						/>
 					);
 				} ) }
-				<Animated.View
-					style={ [
-						{
-							width,
-							left: positionAnimationValue,
-							height,
-						},
-						selectedStyle,
-						outlineStyle,
-					] }
-				/>
 			</View>
 			<View style={ styles.flex }>{ addonRight }</View>
 		</View>

package/src/modal/index.tsx

@@ -170,6 +170,15 @@ function UnforwardedModal(
 		[ hasScrolledContent ]
 	);
 
+	const onOverlayPress: React.PointerEventHandler< HTMLDivElement > = (
+		event
+	) => {
+		if ( event.target === event.currentTarget ) {
+			event.preventDefault();
+			onRequestClose( event );
+		}
+	};
+
 	return createPortal(
 		// eslint-disable-next-line jsx-a11y/no-static-element-interactions
 		<div
@@ -179,6 +188,13 @@ function UnforwardedModal(
 				overlayClassName
 			) }
 			onKeyDown={ handleEscapeKeyDown }
+			// Avoids loss of focus from clicking the overlay and also obviates
+			// `useFocusOutside` aside from cases of focus programmatically
+			// moving outside. TODO ideally both the hook and this handler
+			// won't be needed and one can be removed.
+			onPointerDown={
+				shouldCloseOnClickOutside ? onOverlayPress : undefined
+			}
 		>
 			<StyleProvider document={ document }>
 				<div

package/src/modal/test/index.tsx

@@ -4,6 +4,11 @@
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
 /**
  * Internal dependencies
  */
@@ -82,4 +87,32 @@ describe( 'Modal', () => {
 		await user.keyboard( '[Escape]' );
 		expect( onRequestClose ).toHaveBeenCalled();
 	} );
+
+	it( 'should return focus when dismissed by clicking outside', async () => {
+		const user = userEvent.setup();
+		const ReturnDemo = () => {
+			const [ isShown, setIsShown ] = useState( false );
+			return (
+				<div>
+					<button onClick={ () => setIsShown( true ) }>📣</button>
+					{ isShown && (
+						<Modal onRequestClose={ () => setIsShown( false ) }>
+							<p>Modal content</p>
+						</Modal>
+					) }
+				</div>
+			);
+		};
+		render( <ReturnDemo /> );
+
+		const opener = screen.getByRole( 'button' );
+		await user.click( opener );
+		const modalFrame = screen.getByRole( 'dialog' );
+		expect( modalFrame ).toHaveFocus();
+
+		// Disable reason: No semantic query can reach the overlay.
+		// eslint-disable-next-line testing-library/no-node-access
+		await user.click( modalFrame.parentElement! );
+		expect( opener ).toHaveFocus();
+	} );
 } );