@wordpress/components 23.6.0 → 23.8.0

package/src/gradient-picker/types.ts

@@ -0,0 +1,89 @@
+/**
+ * Internal dependencies
+ */
+import type { HeadingSize } from '../heading/types';
+
+export type GradientObject = {
+	gradient: string;
+	name: string;
+	slug: string;
+};
+export type OriginObject = { name: string; gradients: GradientObject[] };
+export type GradientsProp = GradientObject[] | OriginObject[];
+
+type GradientPickerBaseProps = {
+	/**
+	 * The class name added to the wrapper.
+	 */
+	className?: string;
+	/**
+	 * The function called when a new gradient has been defined. It is passed to
+	 * the `currentGradient` as an argument.
+	 */
+	onChange: ( currentGradient: string | undefined ) => void;
+	/**
+	 * The current value of the gradient. Pass a css gradient string (See default value for example).
+	 * Optionally pass in a `null` value to specify no gradient is currently selected.
+	 *
+	 * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
+	 */
+	value?: GradientObject[ 'gradient' ] | null;
+	/**
+	 * Whether the palette should have a clearing button or not.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * The heading level. Only applies in cases where gradients are provided
+	 * from multiple origins (ie. when the array passed as the `gradients` prop
+	 * contains two or more items).
+	 *
+	 * @default 2
+	 */
+	headingLevel?: HeadingSize;
+};
+
+export type GradientPickerComponentProps = GradientPickerBaseProps & {
+	/**
+	 * An array of objects as predefined gradients displayed above the gradient
+	 * selector. Alternatively, if there are multiple sets (or 'origins') of
+	 * gradients, you can pass an array of objects each with a `name` and a
+	 * `gradients` array which will in turn contain the predefined gradient objects.
+	 *
+	 * @default []
+	 */
+	gradients?: GradientsProp;
+	/**
+	 * Start opting in to the new margin-free styles that will become the default
+	 * in a future version, currently scheduled to be WordPress 6.4. (The prop
+	 * can be safely removed once this happens.)
+	 *
+	 * @default false
+	 */
+	__nextHasNoMargin?: boolean;
+	/**
+	 * If true, the gradient picker will not be displayed and only defined
+	 * gradients from `gradients` will be shown.
+	 *
+	 * @default false
+	 */
+	disableCustomGradients?: boolean;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type PickerProps< TOriginType extends GradientObject | OriginObject > =
+	GradientPickerBaseProps & {
+		clearGradient: () => void;
+		onChange: (
+			currentGradient: string | undefined,
+			index: number
+		) => void;
+		actions?: React.ReactNode;
+		gradients: TOriginType[];
+	};

package/src/item-group/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -72,7 +73,8 @@ describe( 'ItemGroup', () => {
 	} );
 
 	describe( 'Item', () => {
-		it( 'should render as a `button` if the `onClick` handler is specified', () => {
+		it( 'should render as a `button` if the `onClick` handler is specified', async () => {
+			const user = userEvent.setup();
 			const spy = jest.fn();
 			render( <Item onClick={ spy }>Code is poetry</Item> );
 
@@ -80,7 +82,7 @@ describe( 'ItemGroup', () => {
 
 			expect( button ).toBeInTheDocument();
 
-			fireEvent.click( button );
+			await user.click( button );
 
 			expect( spy ).toHaveBeenCalled();
 		} );

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();
+	} );
+} );