@wordpress/components 19.2.1-next.33ec3857e2.0 → 19.4.0

package/src/mobile/bottom-sheet/bottom-sheet-navigation/navigation-screen.native.js

@@ -27,6 +27,7 @@ const BottomSheetNavigationScreen = ( {
 	fullScreen,
 	isScrollable,
 	isNested,
+	name,
 } ) => {
 	const navigation = useNavigation();
 	const heightRef = useRef( { maxHeight: 0 } );
@@ -56,6 +57,25 @@ const BottomSheetNavigationScreen = ( {
 				onHandleHardwareButtonPress( null );
 				return false;
 			} );
+			/**
+			 * TODO: onHandleHardwareButtonPress stores a single value, which means
+			 * future invocations from sibling screens can replace the callback for
+			 * the currently active screen. Currently, the empty dependency array
+			 * passed to useCallback here is what prevents erroneous callback
+			 * replacements, but leveraging memoization to achieve this is brittle and
+			 * explicitly discouraged in the React documentation.
+			 * https://reactjs.org/docs/hooks-reference.html#usememo
+			 *
+			 * Ideally, we refactor onHandleHardwareButtonPress to manage multiple
+			 * callbacks triggered based upon which screen is currently active.
+			 *
+			 * Related: https://git.io/JD2no
+			 */
+		}, [] )
+	);
+
+	useFocusEffect(
+		useCallback( () => {
 			if ( fullScreen ) {
 				setHeight( '100%' );
 				setIsFullScreen( true );
@@ -64,8 +84,9 @@ const BottomSheetNavigationScreen = ( {
 				setHeight( heightRef.current.maxHeight );
 			}
 			return () => {};
-		}, [] )
+		}, [ setHeight ] )
 	);
+
 	const onLayout = ( { nativeEvent } ) => {
 		if ( fullScreen ) {
 			return;
@@ -77,13 +98,22 @@ const BottomSheetNavigationScreen = ( {
 			setHeightDebounce( height );
 		}
 	};
+
 	return useMemo( () => {
 		return isScrollable || isNested ? (
-			<View onLayout={ onLayout }>{ children }</View>
+			<View
+				onLayout={ onLayout }
+				testID={ `navigation-screen-${ name }` }
+			>
+				{ children }
+			</View>
 		) : (
 			<ScrollView { ...listProps }>
 				<TouchableHighlight accessible={ false }>
-					<View onLayout={ onLayout }>
+					<View
+						onLayout={ onLayout }
+						testID={ `navigation-screen-${ name }` }
+					>
 						{ children }
 						{ ! isNested && (
 							<View

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

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { Text } from 'react-native';
+import { render, fireEvent, waitFor, act } from 'test/helpers';
+import { useNavigation } from '@react-navigation/native';
+
+/**
+ * Internal dependencies
+ */
+import NavigationContainer from '../navigation-container';
+import NavigationScreen from '../navigation-screen';
+import { performLayoutAnimation } from '../../../layout-animation';
+
+jest.mock( '../../../layout-animation', () => ( {
+	performLayoutAnimation: jest.fn(),
+} ) );
+
+const TestScreen = ( { fullScreen, name, navigateTo } ) => {
+	const navigation = useNavigation();
+	return (
+		<NavigationScreen fullScreen={ fullScreen } name={ name }>
+			<Text onPress={ () => navigation.navigate( navigateTo ) }>
+				{ name }
+			</Text>
+		</NavigationScreen>
+	);
+};
+
+jest.useFakeTimers( 'legacy' );
+
+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>
+	);
+
+	// Await navigation screen to allow async state updates to complete
+	const navigationScreen = await waitFor( () =>
+		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	);
+	// Trigger non-full-screen layout event
+	act( () => {
+		fireEvent( navigationScreen, 'layout', {
+			nativeEvent: {
+				layout: {
+					height: 123,
+				},
+			},
+		} );
+		// Trigger debounced setting of height after layout event
+		jest.advanceTimersByTime( 10 );
+	} );
+	// Navigate to screen 2
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-1/ ) )
+	);
+	// Await navigation screen to allow async state updates to complete
+	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+
+	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
+} );
+
+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>
+	);
+
+	// Await navigation screen to allow async state updates to complete
+	const navigationScreen = await waitFor( () =>
+		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	);
+	// Trigger non-full-screen layout event
+	act( () => {
+		fireEvent( navigationScreen, 'layout', {
+			nativeEvent: {
+				layout: {
+					height: 123,
+				},
+			},
+		} );
+		// Trigger debounced setting of height after layout event
+		jest.advanceTimersByTime( 10 );
+	} );
+	// Navigate to screen 2
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-1/ ) )
+	);
+	// Navigate to screen 1
+	fireEvent.press(
+		// Use custom waitFor due to https://git.io/JYYGE
+		await waitFor( () => screen.getByText( /test-screen-2/ ) )
+	);
+	// Await navigation screen to allow async state updates to complete
+	await waitFor( () => screen.getByText( /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>
+	);
+
+	// Await navigation screen to allow async state updates to complete
+	const navigationScreen = await waitFor( () =>
+		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	);
+	// Trigger non-full-screen layout event
+	act( () => {
+		fireEvent( navigationScreen, 'layout', {
+			nativeEvent: {
+				layout: {
+					height: 123,
+				},
+			},
+		} );
+		// Trigger debounced setting of height after layout event
+		jest.advanceTimersByTime( 10 );
+	} );
+	// Navigate to screen 2
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-1/ ) )
+	);
+	// Navigate to screen 3
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-2/ ) )
+	);
+	// Navigate to screen 2
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-3/ ) )
+	);
+	// Await navigation screen to allow async state updates to complete
+	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+
+	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
+} );

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

@@ -52,7 +52,7 @@ class BottomSheetCell extends Component {
 
 	componentDidMount() {
 		this.isCurrent = true;
-		AccessibilityInfo.addEventListener(
+		this.a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
 			'screenReaderChanged',
 			this.handleScreenReaderToggled
 		);
@@ -68,10 +68,7 @@ class BottomSheetCell extends Component {
 
 	componentWillUnmount() {
 		this.isCurrent = false;
-		AccessibilityInfo.removeEventListener(
-			'screenReaderChanged',
-			this.handleScreenReaderToggled
-		);
+		this.a11yInfoChangeSubscription.remove();
 	}
 
 	handleScreenReaderToggled( isScreenReaderEnabled ) {
@@ -359,7 +356,12 @@ class BottomSheetCell extends Component {
 					<View style={ rowContainerStyles }>
 						<View style={ styles.cellRowContainer }>
 							{ icon && (
-								<View style={ styles.cellRowContainer }>
+								<View
+									style={ [
+										styles.cellRowContainer,
+										styles.cellRowIcon,
+									] }
+								>
 									<Icon
 										icon={ icon }
 										size={ 24 }

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

@@ -145,9 +145,13 @@ class BottomSheet extends Component {
 			} );
 			this.lastLayoutAnimation = layoutAnimation;
 		} else {
-			this.performRegularLayoutAnimation( {
-				useLastLayoutAnimation: false,
-			} );
+			// TODO: Reinstate animations, possibly replacing `LayoutAnimation` with
+			// more nuanced `Animated` usage or replacing our custom `BottomSheet`
+			// with `@gorhom/bottom-sheet`. This animation was disabled to avoid a
+			// preexisting bug: https://git.io/JMPCV
+			// this.performRegularLayoutAnimation( {
+			// 	useLastLayoutAnimation: false,
+			// } );
 		}
 	}
 
@@ -185,7 +189,10 @@ class BottomSheet extends Component {
 			);
 		}
 
-		Dimensions.addEventListener( 'change', this.onDimensionsChange );
+		this.dimensionsChangeSubscription = Dimensions.addEventListener(
+			'change',
+			this.onDimensionsChange
+		);
 
 		// 'Will' keyboard events are not available on Android.
 		// Reference: https://reactnative.dev/docs/0.61/keyboard#addlistener
@@ -206,7 +213,7 @@ class BottomSheet extends Component {
 	}
 
 	componentWillUnmount() {
-		Dimensions.removeEventListener( 'change', this.onDimensionsChange );
+		this.dimensionsChangeSubscription.remove();
 		this.keyboardShowListener.remove();
 		this.keyboardHideListener.remove();
 		if ( this.androidModalClosedSubscription ) {
@@ -217,10 +224,6 @@ class BottomSheet extends Component {
 		}
 		this.safeAreaEventSubscription.remove();
 		this.safeAreaEventSubscription = null;
-		SafeArea.removeEventListener(
-			'safeAreaInsetsForRootViewDidChange',
-			this.onSafeAreaInsetsUpdate
-		);
 	}
 
 	onSafeAreaInsetsUpdate( result ) {
@@ -254,16 +257,19 @@ class BottomSheet extends Component {
 				statusBarHeight -
 				this.headerHeight );
 
-		// On horizontal mode `maxHeight` has to be set on 90% of width
+		// In landscape orientation, set `maxHeight` to ~96% of the height
 		if ( width > height ) {
 			this.setState( {
-				maxHeight: Math.min( 0.9 * height, maxHeightWithOpenKeyboard ),
+				maxHeight: Math.min(
+					0.96 * height - this.headerHeight,
+					maxHeightWithOpenKeyboard
+				),
 			} );
-			//	On vertical mode `maxHeight` has to be set on 50% of width
+			// In portrait orientation, set `maxHeight` to ~59% of the height
 		} else {
 			this.setState( {
 				maxHeight: Math.min(
-					height / 2 - safeAreaBottomInset,
+					height * 0.59 - safeAreaBottomInset - this.headerHeight,
 					maxHeightWithOpenKeyboard
 				),
 			} );
@@ -279,7 +285,10 @@ class BottomSheet extends Component {
 		const { height } = nativeEvent.layout;
 		// The layout animation should only be triggered if the header
 		// height has changed after being mounted.
-		if ( this.headerHeight !== 0 && height !== this.headerHeight ) {
+		if (
+			this.headerHeight !== 0 &&
+			Math.round( height ) !== Math.round( this.headerHeight )
+		) {
 			this.performRegularLayoutAnimation( {
 				useLastLayoutAnimation: true,
 			} );
@@ -545,6 +554,7 @@ class BottomSheet extends Component {
 					<View
 						style={ styles.header }
 						onLayout={ this.onHeaderLayout }
+						testID={ `${ rest.testID || 'bottom-sheet' }-header` }
 					>
 						{ showDragIndicator() && (
 							<View style={ styles.dragIndicator } />

package/src/mobile/bottom-sheet/link-suggestion-styles.native.scss

@@ -1,6 +1,7 @@
 .titleStyle {
 	text-align: left;
 	font-weight: bold;
+	width: 100%;
 }
 
 .summaryStyle {
@@ -16,6 +17,8 @@
 }
 
 .containerStyle {
+	flex-grow: 1;
+	flex-basis: 0;
 	align-items: flex-start;
 }
 

package/src/mobile/bottom-sheet/range-text-input.native.js

@@ -56,11 +56,14 @@ class RangeTextInput extends Component {
 	}
 
 	componentDidMount() {
-		AppState.addEventListener( 'change', this.handleChangePixelRatio );
+		this.appStateChangeSubscription = AppState.addEventListener(
+			'change',
+			this.handleChangePixelRatio
+		);
 	}
 
 	componentWillUnmount() {
-		AppState.removeEventListener( 'change', this.handleChangePixelRatio );
+		this.appStateChangeSubscription.remove();
 		clearTimeout( this.timeoutAnnounceValue );
 	}
 

package/src/mobile/bottom-sheet/styles.native.scss

@@ -103,6 +103,10 @@
 .cellRowContainer {
 	flex-direction: row;
 	align-items: center;
+	flex-shrink: 1;
+}
+
+.cellRowIcon {
 	flex-shrink: 0;
 }
 

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

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { fireEvent, render } from 'test/helpers';
+import { LayoutAnimation } from 'react-native';
+
+/**
+ * Internal dependencies
+ */
+import BottomSheet from '../';
+
+it( 'does not animate transitions between header heights differing less than 1 pixel', () => {
+	const screen = render( <BottomSheet isVisible /> );
+
+	const bottomSheetHeader = screen.getByTestId( 'bottom-sheet-header' );
+	fireEvent( bottomSheetHeader, 'layout', {
+		nativeEvent: { layout: { height: 123 } },
+	} );
+	fireEvent( bottomSheetHeader, 'layout', {
+		nativeEvent: { layout: { height: 123.001 } },
+	} );
+
+	expect( LayoutAnimation.configureNext ).not.toHaveBeenCalled();
+} );

package/src/mobile/color-settings/index.native.js

@@ -27,6 +27,7 @@ const ColorSettingsMemo = memo(
 		colorValue,
 		gradientValue,
 		onGradientChange,
+		onColorCleared,
 		label,
 		hideNavigation,
 	} ) => {
@@ -44,6 +45,7 @@ const ColorSettingsMemo = memo(
 						colorValue,
 						gradientValue,
 						onGradientChange,
+						onColorCleared,
 						label,
 						hideNavigation,
 					} }

package/src/mobile/color-settings/palette.screen.native.js

@@ -36,6 +36,7 @@ const PaletteScreen = () => {
 		label,
 		onColorChange,
 		onGradientChange,
+		onColorCleared,
 		colorValue,
 		defaultSettings,
 		hideNavigation = false,
@@ -85,6 +86,10 @@ const PaletteScreen = () => {
 		} else {
 			onGradientChange( '' );
 		}
+
+		if ( onColorCleared ) {
+			onColorCleared();
+		}
 	}
 
 	function onCustomPress() {

package/src/mobile/color-settings/utils.native.js

@@ -1,11 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
 const gradients = {
 	linear: 'linear-gradient',
 	radial: 'radial-gradient',
 };
 
 const gradientOptions = [
-	{ label: 'Linear', value: gradients.linear },
-	{ label: 'Radial', value: gradients.radial },
+	{ label: __( 'Linear' ), value: gradients.linear },
+	{ label: __( 'Radial' ), value: gradients.radial },
 ];
 
 const getGradientType = ( color ) => {
@@ -23,7 +28,7 @@ export const colorsUtils = {
 		picker: 'Picker',
 		palette: 'Palette',
 	},
-	segments: [ 'Solid', 'Gradient' ],
+	segments: [ __( 'Solid' ), __( 'Gradient' ) ],
 	gradients,
 	gradientOptions,
 	getGradientType,

package/src/mobile/html-text-input/test/index.native.js

@@ -1,31 +1,21 @@
 /**
  * External dependencies
  */
-import { shallow } from 'enzyme';
+import { render, fireEvent } from 'test/helpers';
 
 /**
  * Internal dependencies
  */
 import { HTMLTextInput } from '..';
 
-// Utility to find a TextInput in a ShallowWrapper
-const findTextInputInWrapper = ( wrapper, accessibilityLabel ) => {
-	return wrapper
-		.dive()
-		.findWhere( ( node ) => {
-			return node.prop( 'accessibilityLabel' ) === accessibilityLabel;
-		} )
-		.first();
-};
-
 // Finds the Content TextInput in our HTMLInputView
-const findContentTextInput = ( wrapper ) => {
-	return findTextInputInWrapper( wrapper, 'html-view-content' );
+const findContentTextInput = ( screen ) => {
+	return screen.getByA11yLabel( 'html-view-content' );
 };
 
 // Finds the Title TextInput in our HTMLInputView
-const findTitleTextInput = ( wrapper ) => {
-	return findTextInputInWrapper( wrapper, 'html-view-title' );
+const findTitleTextInput = ( screen ) => {
+	return screen.getByA11yLabel( 'html-view-title' );
 };
 
 const getStylesFromColorScheme = () => {
@@ -34,42 +24,40 @@ const getStylesFromColorScheme = () => {
 
 describe( 'HTMLTextInput', () => {
 	it( 'HTMLTextInput renders', () => {
-		const wrapper = shallow(
+		const screen = render(
 			<HTMLTextInput
 				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
-		expect( wrapper ).toBeTruthy();
+		expect( screen.container ).toBeTruthy();
 	} );
 
-	it( 'HTMLTextInput updates store and state on HTML text change', () => {
+	it( 'HTMLTextInput updates state on HTML text change', () => {
 		const onChange = jest.fn();
 
-		const wrapper = shallow(
+		const screen = render(
 			<HTMLTextInput
 				onChange={ onChange }
+				onPersist={ jest.fn() }
 				getStylesFromColorScheme={ getStylesFromColorScheme }
 			/>
 		);
 
-		expect( wrapper.instance().state.isDirty ).toBeFalsy();
-
 		// Simulate user typing text
-		const htmlTextInput = findContentTextInput( wrapper );
-		htmlTextInput.simulate( 'changeText', 'text' );
+		const htmlTextInput = findContentTextInput( screen );
+		fireEvent( htmlTextInput, 'changeText', 'text' );
 
 		//Check if the onChange is called and the state is updated
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
 		expect( onChange ).toHaveBeenCalledWith( 'text' );
 
-		expect( wrapper.instance().state.isDirty ).toBeTruthy();
-		expect( wrapper.instance().state.value ).toEqual( 'text' );
+		expect( screen.getByDisplayValue( 'text' ) ).toBeDefined();
 	} );
 
 	it( 'HTMLTextInput persists changes in HTML text input on blur', () => {
 		const onPersist = jest.fn();
 
-		const wrapper = shallow(
+		const screen = render(
 			<HTMLTextInput
 				onPersist={ onPersist }
 				onChange={ jest.fn() }
@@ -78,30 +66,41 @@ describe( 'HTMLTextInput', () => {
 		);
 
 		// Simulate user typing text
-		const htmlTextInput = findContentTextInput( wrapper );
-		htmlTextInput.simulate( 'changeText', 'text' );
+		const htmlTextInput = findContentTextInput( screen );
+		fireEvent( htmlTextInput, 'changeText', 'text' );
 
 		//Simulate blur event
-		htmlTextInput.simulate( 'blur' );
+		fireEvent( htmlTextInput, 'blur' );
 
 		//Normally prop.value is updated with the help of withSelect
 		//But we don't have it in tests so we just simulate it
-		wrapper.setProps( { value: 'text' } );
+		screen.update(
+			<HTMLTextInput
+				onPersist={ onPersist }
+				onChange={ jest.fn() }
+				getStylesFromColorScheme={ getStylesFromColorScheme }
+				value="text"
+			/>
+		);
 
 		//Check if the onPersist is called and the state is updated
 		expect( onPersist ).toHaveBeenCalledTimes( 1 );
 		expect( onPersist ).toHaveBeenCalledWith( 'text' );
 
-		expect( wrapper.instance().state.isDirty ).toBeFalsy();
+		//Simulate blur event
+		fireEvent( htmlTextInput, 'blur' );
+
+		// Check that onPersist is not called for non-dirty state
+		expect( onPersist ).toHaveBeenCalledTimes( 1 );
 
 		//We expect state.value is getting propagated from prop.value
-		expect( wrapper.instance().state.value ).toEqual( 'text' );
+		expect( screen.getByDisplayValue( 'text' ) ).toBeDefined();
 	} );
 
 	it( 'HTMLTextInput propagates title changes to store', () => {
 		const editTitle = jest.fn();
 
-		const wrapper = shallow(
+		const screen = render(
 			<HTMLTextInput
 				editTitle={ editTitle }
 				getStylesFromColorScheme={ getStylesFromColorScheme }
@@ -109,8 +108,8 @@ describe( 'HTMLTextInput', () => {
 		);
 
 		// Simulate user typing text
-		const textInput = findTitleTextInput( wrapper );
-		textInput.simulate( 'changeText', 'text' );
+		const textInput = findTitleTextInput( screen );
+		fireEvent( textInput, 'changeText', 'text' );
 
 		//Check if the setTitleAction is called
 		expect( editTitle ).toHaveBeenCalledTimes( 1 );

package/src/mobile/keyboard-avoiding-view/index.ios.js

@@ -51,20 +51,23 @@ export const KeyboardAvoidingView = ( {
 				setSafeAreaBottomInset( safeAreaInsets.bottom );
 			}
 		);
-		SafeArea.addEventListener(
+		const safeAreaSubscription = SafeArea.addEventListener(
 			'safeAreaInsetsForRootViewDidChange',
 			onSafeAreaInsetsUpdate
 		);
-		Keyboard.addListener( 'keyboardWillShow', onKeyboardWillShow );
-		Keyboard.addListener( 'keyboardWillHide', onKeyboardWillHide );
+		const keyboardShowSubscription = Keyboard.addListener(
+			'keyboardWillShow',
+			onKeyboardWillShow
+		);
+		const keyboardHideSubscription = Keyboard.addListener(
+			'keyboardWillHide',
+			onKeyboardWillHide
+		);
 
 		return () => {
-			SafeArea.removeEventListener(
-				'safeAreaInsetsForRootViewDidChange',
-				onSafeAreaInsetsUpdate
-			);
-			Keyboard.removeListener( 'keyboardWillShow', onKeyboardWillShow );
-			Keyboard.removeListener( 'keyboardWillHide', onKeyboardWillHide );
+			safeAreaSubscription.remove();
+			keyboardShowSubscription.remove();
+			keyboardHideSubscription.remove();
 		};
 	}, [] );
 

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

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { Clipboard, SafeAreaView, TouchableOpacity, View } from 'react-native';
+import { SafeAreaView, TouchableOpacity, View } from 'react-native';
+import Clipboard from '@react-native-clipboard/clipboard';
 import { lowerCase, startsWith } from 'lodash';
 
 /**