@wordpress/components 23.7.0 → 23.9.0

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

@@ -78,22 +78,15 @@ const PaletteScreen = () => {
 		setCurrentValue( color );
 		if ( isSolidSegment && onColorChange && onGradientChange ) {
 			onColorChange( color );
-			onGradientChange( '' );
 		} else if ( isSolidSegment && onColorChange ) {
 			onColorChange( color );
 		} else if ( ! isSolidSegment && onGradientChange ) {
 			onGradientChange( color );
-			onColorChange( '' );
 		}
 	};
 
 	function onClear() {
 		setCurrentValue( undefined );
-		if ( isSolidSegment ) {
-			onColorChange( '' );
-		} else {
-			onGradientChange( '' );
-		}
 
 		if ( onColorCleared ) {
 			onColorCleared();

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

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { camelCase } from 'change-case';
-import { get } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -191,6 +190,22 @@ export function getBlockTypography(
 	return typographyStyles;
 }
 
+/**
+ * Return a value from a certain path of the object.
+ * Path is specified as an array of properties, like: [ 'parent', 'child' ].
+ *
+ * @param {Object} object Input object.
+ * @param {Array}  path   Path to the object property.
+ * @return {*} Value of the object property at the specified path.
+ */
+const getValueFromObjectPath = ( object, path ) => {
+	let value = object;
+	path.forEach( ( fieldName ) => {
+		value = value?.[ fieldName ];
+	} );
+	return value;
+};
+
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
 	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
@@ -231,11 +246,11 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 						customValuesData
 					)
 				) {
-					return get( customValuesData, path );
+					return getValueFromObjectPath( customValuesData, path );
 				}
 
 				// Check for camelcase properties.
-				return get( customValuesData, [
+				return getValueFromObjectPath( customValuesData, [
 					...path.slice( 0, path.length - 1 ),
 					camelCase( path[ path.length - 1 ] ),
 				] );

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

@@ -24,8 +24,4 @@ export const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {
 	);
 };
 
-KeyboardAwareFlatList.handleCaretVerticalPositionChange = () => {
-	// no need to handle on Android, it is system managed
-};
-
 export default KeyboardAwareFlatList;

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

@@ -1,9 +1,8 @@
 /**
  * External dependencies
  */
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import { FlatList } from 'react-native';
-import fastDeepEqual from 'fast-deep-equal/es6';
+
+import { ScrollView, FlatList, useWindowDimensions } from 'react-native';
 import Animated, {
 	useAnimatedScrollHandler,
 	useSharedValue,
@@ -12,36 +11,123 @@ import Animated, {
 /**
  * WordPress dependencies
  */
-import { memo, useCallback, useRef } from '@wordpress/element';
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+import { useThrottle } from '@wordpress/compose';
 
-const List = memo( FlatList, fastDeepEqual );
-const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
-	KeyboardAwareScrollView
-);
+/**
+ * Internal dependencies
+ */
+import useTextInputOffset from './use-text-input-offset';
+import useKeyboardOffset from './use-keyboard-offset';
+import useScrollToTextInput from './use-scroll-to-text-input';
+import useTextInputCaretPosition from './use-text-input-caret-position';
 
+const AnimatedScrollView = Animated.createAnimatedComponent( ScrollView );
+
+/**
+ * React component that provides a FlatList that is aware of the keyboard state and can scroll
+ * to the currently focused TextInput.
+ *
+ * @param {Object}   props                              Component props.
+ * @param {number}   props.extraScrollHeight            Extra scroll height for the content.
+ * @param {Function} props.innerRef                     Function to pass the ScrollView ref to the parent component.
+ * @param {Function} props.onScroll                     Function to be called when the list is scrolled.
+ * @param {boolean}  props.scrollEnabled                Whether the list can be scrolled.
+ * @param {Object}   props.scrollViewStyle              Additional style for the ScrollView component.
+ * @param {boolean}  props.shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
+ * @param {Object}   props...                           Other props to pass to the FlatList component.
+ * @return {WPComponent} KeyboardAwareFlatList component.
+ */
 export const KeyboardAwareFlatList = ( {
 	extraScrollHeight,
-	shouldPreventAutomaticScroll,
 	innerRef,
-	autoScroll,
-	scrollViewStyle,
-	inputAccessoryViewHeight,
 	onScroll,
-	...listProps
+	scrollEnabled,
+	scrollViewStyle,
+	shouldPreventAutomaticScroll,
+	...props
 } ) => {
 	const scrollViewRef = useRef();
-	const keyboardWillShowIndicator = useRef();
+	const scrollViewMeasurements = useRef();
+	const scrollViewYOffset = useSharedValue( -1 );
+
+	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+	const isLandscape = windowWidth >= windowHeight;
+
+	const [ keyboardOffset ] = useKeyboardOffset(
+		scrollEnabled,
+		shouldPreventAutomaticScroll
+	);
+
+	const [ currentCaretData ] = useTextInputCaretPosition( scrollEnabled );
+
+	const [ getTextInputOffset ] = useTextInputOffset(
+		scrollEnabled,
+		scrollViewRef
+	);
+
+	const [ scrollToTextInputOffset ] = useScrollToTextInput(
+		extraScrollHeight,
+		keyboardOffset,
+		scrollEnabled,
+		scrollViewMeasurements,
+		scrollViewRef,
+		scrollViewYOffset
+	);
 
-	const latestContentOffsetY = useSharedValue( -1 );
+	const onScrollToTextInput = useThrottle(
+		useCallback(
+			async ( caret ) => {
+				const textInputOffset = await getTextInputOffset( caret );
+				const hasTextInputOffset = textInputOffset !== null;
+
+				if ( hasTextInputOffset ) {
+					scrollToTextInputOffset( caret, textInputOffset );
+				}
+			},
+			[ getTextInputOffset, scrollToTextInputOffset ]
+		),
+		200,
+		{ leading: false }
+	);
+
+	useEffect( () => {
+		onScrollToTextInput( currentCaretData );
+	}, [ currentCaretData, onScrollToTextInput ] );
+
+	// When the orientation changes, the ScrollView measurements
+	// need to be re-calculated.
+	useEffect( () => {
+		scrollViewMeasurements.current = null;
+	}, [ isLandscape ] );
 
 	const scrollHandler = useAnimatedScrollHandler( {
 		onScroll: ( event ) => {
 			const { contentOffset } = event;
-			latestContentOffsetY.value = contentOffset.y;
+			scrollViewYOffset.value = contentOffset.y;
 			onScroll( event );
 		},
 	} );
 
+	const measureScrollView = useCallback( () => {
+		if ( scrollViewRef.current ) {
+			const scrollRef = scrollViewRef.current.getNativeScrollRef();
+
+			scrollRef.measureInWindow( ( _x, y, width, height ) => {
+				scrollViewMeasurements.current = { y, width, height };
+			} );
+		}
+	}, [] );
+
+	const onContentSizeChange = useCallback( () => {
+		onScrollToTextInput( currentCaretData );
+
+		// Sets the first values when the content size changes.
+		if ( ! scrollViewMeasurements.current ) {
+			measureScrollView();
+		}
+	}, [ measureScrollView, onScrollToTextInput, currentCaretData ] );
+
 	const getRef = useCallback(
 		( ref ) => {
 			scrollViewRef.current = ref;
@@ -49,63 +135,28 @@ export const KeyboardAwareFlatList = ( {
 		},
 		[ innerRef ]
 	);
-	const onKeyboardWillHide = useCallback( () => {
-		keyboardWillShowIndicator.current = false;
-	}, [] );
-	const onKeyboardDidHide = useCallback( () => {
-		setTimeout( () => {
-			if (
-				! keyboardWillShowIndicator.current &&
-				latestContentOffsetY.value !== -1 &&
-				! shouldPreventAutomaticScroll()
-			) {
-				// Reset the content position if keyboard is still closed.
-				scrollViewRef.current?.scrollToPosition(
-					0,
-					latestContentOffsetY.value,
-					true
-				);
-			}
-		}, 50 );
-	}, [ latestContentOffsetY, shouldPreventAutomaticScroll ] );
-	const onKeyboardWillShow = useCallback( () => {
-		keyboardWillShowIndicator.current = true;
-	}, [] );
+
+	// Adds content insets when the keyboard is opened to have
+	// extra padding at the bottom.
+	const contentInset = { bottom: keyboardOffset };
+
+	const style = [ { flex: 1 }, scrollViewStyle ];
 
 	return (
-		<AnimatedKeyboardAwareScrollView
-			style={ [ { flex: 1 }, scrollViewStyle ] }
-			keyboardDismissMode="none"
-			enableResetScrollToCoords={ false }
+		<AnimatedScrollView
+			automaticallyAdjustContentInsets={ false }
+			contentInset={ contentInset }
 			keyboardShouldPersistTaps="handled"
-			extraScrollHeight={ extraScrollHeight }
-			extraHeight={ 0 }
-			inputAccessoryViewHeight={ inputAccessoryViewHeight }
-			enableAutomaticScroll={
-				autoScroll === undefined ? false : autoScroll
-			}
-			ref={ getRef }
-			onKeyboardWillHide={ onKeyboardWillHide }
-			onKeyboardDidHide={ onKeyboardDidHide }
-			onKeyboardWillShow={ onKeyboardWillShow }
-			scrollEnabled={ listProps.scrollEnabled }
+			onContentSizeChange={ onContentSizeChange }
 			onScroll={ scrollHandler }
+			ref={ getRef }
+			scrollEnabled={ scrollEnabled }
+			scrollEventThrottle={ 16 }
+			style={ style }
 		>
-			<List { ...listProps } />
-		</AnimatedKeyboardAwareScrollView>
+			<FlatList { ...props } />
+		</AnimatedScrollView>
 	);
 };
 
-KeyboardAwareFlatList.handleCaretVerticalPositionChange = (
-	scrollView,
-	targetId,
-	caretY,
-	previousCaretY
-) => {
-	if ( previousCaretY ) {
-		// If this is not the first tap.
-		scrollView.refreshScrollForField( targetId );
-	}
-};
-
 export default KeyboardAwareFlatList;

package/src/mobile/keyboard-aware-flat-list/test/use-keyboard-offset.native.js

@@ -0,0 +1,203 @@
+/**
+ * External dependencies
+ */
+import { act, renderHook } from '@testing-library/react-native';
+import { Keyboard } from 'react-native';
+import RCTDeviceEventEmitter from 'react-native/Libraries/EventEmitter/RCTDeviceEventEmitter';
+
+/**
+ * Internal dependencies
+ */
+import useKeyboardOffset from '../use-keyboard-offset';
+
+jest.useFakeTimers();
+
+describe( 'useKeyboardOffset', () => {
+	beforeEach( () => {
+		Keyboard.removeAllListeners( 'keyboardDidShow' );
+		Keyboard.removeAllListeners( 'keyboardDidHide' );
+		Keyboard.removeAllListeners( 'keyboardWillShow' );
+	} );
+
+	it( 'returns the initial state', () => {
+		// Arrange
+		const { result } = renderHook( () => useKeyboardOffset( true ) );
+		const [ keyboardOffset ] = result.current;
+
+		// Assert
+		expect( keyboardOffset ).toBe( 0 );
+	} );
+
+	it( 'updates keyboard visibility and offset when the keyboard is shown', () => {
+		// Arrange
+		const { result } = renderHook( () => useKeyboardOffset( true ) );
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		// Assert
+		const [ keyboardOffset ] = result.current;
+		expect( keyboardOffset ).toBe( 250 );
+	} );
+
+	it( 'updates keyboard visibility and offset when the keyboard is hidden', () => {
+		// Arrange
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( false );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		const [ keyboardOffset ] = result.current;
+		expect( keyboardOffset ).toBe( 0 );
+	} );
+
+	it( 'removes all keyboard listeners when scrollEnabled changes to false', () => {
+		// Arrange
+		const { result, rerender } = renderHook(
+			( { scrollEnabled } ) => useKeyboardOffset( scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: true },
+			}
+		);
+		const [ keyboardOffset ] = result.current;
+
+		// Act
+		rerender( { scrollEnabled: false } );
+
+		// Assert
+		expect( keyboardOffset ).toBe( 0 );
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidHide' ) ).toBe(
+			0
+		);
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidShow' ) ).toBe(
+			0
+		);
+	} );
+
+	it( 'adds all keyboard listeners when scrollEnabled changes to true', () => {
+		// Arrange
+		const { result, rerender } = renderHook(
+			( { scrollEnabled } ) => useKeyboardOffset( scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: false },
+			}
+		);
+		// Act
+		act( () => {
+			rerender( { scrollEnabled: true } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		const [ keyboardOffset ] = result.current;
+
+		// Assert
+		expect( keyboardOffset ).toBe( 250 );
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidShow' ) ).toBe(
+			1
+		);
+		expect( RCTDeviceEventEmitter.listenerCount( 'keyboardDidHide' ) ).toBe(
+			1
+		);
+	} );
+
+	it( 'does not set keyboard offset to 0 when keyboard is hidden and shouldPreventAutomaticScroll is true', () => {
+		// Arrange
+		const shouldPreventAutomaticScroll = jest.fn().mockReturnValue( true );
+		const { result } = renderHook( () =>
+			useKeyboardOffset( true, shouldPreventAutomaticScroll )
+		);
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+	} );
+
+	it( 'handles updates to shouldPreventAutomaticScroll', () => {
+		// Arrange
+		const preventScrollTrue = jest.fn( () => true );
+		const preventScrollFalse = jest.fn( () => false );
+
+		// Act
+		const { result, rerender } = renderHook(
+			( { shouldPreventAutomaticScroll } ) =>
+				useKeyboardOffset( true, shouldPreventAutomaticScroll ),
+			{
+				initialProps: {
+					shouldPreventAutomaticScroll: preventScrollFalse,
+				},
+			}
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 0 );
+
+		// Act
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 150 },
+			} );
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 150 );
+
+		// Act
+		act( () => {
+			rerender( { shouldPreventAutomaticScroll: preventScrollTrue } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidHide' );
+			jest.runAllTimers();
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 150 );
+
+		// Act
+		act( () => {
+			rerender( { shouldPreventAutomaticScroll: preventScrollFalse } );
+		} );
+
+		act( () => {
+			RCTDeviceEventEmitter.emit( 'keyboardDidShow', {
+				endCoordinates: { height: 250 },
+			} );
+		} );
+
+		// Assert
+		expect( result.current[ 0 ] ).toBe( 250 );
+	} );
+} );

package/src/mobile/keyboard-aware-flat-list/test/use-scroll-to-text-input.native.js

@@ -0,0 +1,140 @@
+/**
+ * External dependencies
+ */
+
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * Internal dependencies
+ */
+import useScrollToTextInput from '../use-scroll-to-text-input';
+
+describe( 'useScrollToTextInput', () => {
+	it( 'scrolls up to the current TextInput offset', () => {
+		// Arrange
+		const currentCaretData = { caretHeight: 10 };
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 150 };
+		const textInputOffset = 50;
+
+		const { result } = renderHook( () =>
+			useScrollToTextInput(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( currentCaretData, textInputOffset );
+
+		// Assert
+		expect( scrollViewRef.current.scrollTo ).toHaveBeenCalledWith( {
+			y: textInputOffset,
+			animated: true,
+		} );
+	} );
+
+	it( 'scrolls down to the current TextInput offset', () => {
+		// Arrange
+		const currentCaretData = { caretHeight: 10 };
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 250 };
+		const textInputOffset = 750;
+
+		const { result } = renderHook( () =>
+			useScrollToTextInput(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( currentCaretData, textInputOffset );
+
+		// Assert
+		const expectedYOffset =
+			textInputOffset -
+			( scrollViewMeasurements.current.height -
+				( keyboardOffset +
+					extraScrollHeight +
+					currentCaretData.caretHeight ) );
+		expect( scrollViewRef.current.scrollTo ).toHaveBeenCalledWith( {
+			y: expectedYOffset,
+			animated: true,
+		} );
+	} );
+
+	it( 'does not scroll when the ScrollView ref is not available', () => {
+		// Arrange
+		const currentCaretData = { caretHeight: 10 };
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = true;
+		const scrollViewRef = { current: null };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 0 };
+		const textInputOffset = 50;
+
+		const { result } = renderHook( () =>
+			useScrollToTextInput(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( currentCaretData, textInputOffset );
+
+		// Assert
+		expect( scrollViewRef.current ).toBeNull();
+	} );
+
+	it( 'does not scroll when the scroll is not enabled', () => {
+		// Arrange
+		const currentCaretData = { caretHeight: 10 };
+		const extraScrollHeight = 50;
+		const keyboardOffset = 100;
+		const scrollEnabled = false;
+		const scrollViewRef = { current: { scrollTo: jest.fn() } };
+		const scrollViewMeasurements = { current: { height: 600 } };
+		const scrollViewYOffset = { value: 0 };
+		const textInputOffset = 50;
+
+		const { result } = renderHook( () =>
+			useScrollToTextInput(
+				extraScrollHeight,
+				keyboardOffset,
+				scrollEnabled,
+				scrollViewMeasurements,
+				scrollViewRef,
+				scrollViewYOffset
+			)
+		);
+
+		// Act
+		result.current[ 0 ]( currentCaretData, textInputOffset );
+
+		// Assert
+		expect( scrollViewRef.current.scrollTo ).not.toHaveBeenCalled();
+	} );
+} );