@wordpress/components 23.7.0 → 23.9.0

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

@@ -0,0 +1,82 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+
+/**
+ * Internal dependencies
+ */
+import useTextInputCaretPosition from '../use-text-input-caret-position';
+
+describe( 'useTextInputCaretPosition', () => {
+	let addCaretChangeListenerSpy;
+	let removeCaretChangeListenerSpy;
+
+	beforeAll( () => {
+		addCaretChangeListenerSpy = jest.spyOn(
+			RCTAztecView.InputState,
+			'addCaretChangeListener'
+		);
+		removeCaretChangeListenerSpy = jest.spyOn(
+			RCTAztecView.InputState,
+			'removeCaretChangeListener'
+		);
+	} );
+
+	beforeEach( () => {
+		addCaretChangeListenerSpy.mockClear();
+		removeCaretChangeListenerSpy.mockClear();
+	} );
+
+	it( 'should add and remove caret change listener correctly', () => {
+		// Arrange
+		const scrollEnabled = true;
+
+		// Act
+		const { unmount } = renderHook( () =>
+			useTextInputCaretPosition( scrollEnabled )
+		);
+		unmount();
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+		expect( removeCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+
+	it( 'should add caret change listener when scroll is enabled', () => {
+		// Arrange
+		const scrollEnabled = true;
+
+		// Act
+		renderHook( () => useTextInputCaretPosition( scrollEnabled ) );
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+		expect( removeCaretChangeListenerSpy ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should remove caret change listener when scroll is enabled and then changed to disabled', () => {
+		// Arrange
+		const { rerender } = renderHook(
+			( props ) => useTextInputCaretPosition( props.scrollEnabled ),
+			{
+				initialProps: { scrollEnabled: true },
+			}
+		);
+
+		// Assert
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalled();
+
+		// Act
+		rerender( { scrollEnabled: false } );
+
+		// Assert
+		expect( removeCaretChangeListenerSpy ).toHaveBeenCalled();
+		expect( addCaretChangeListenerSpy ).toHaveBeenCalledTimes( 1 );
+	} );
+} );

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

@@ -0,0 +1,147 @@
+/**
+ * External dependencies
+ */
+import { renderHook } from '@testing-library/react-native';
+
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+
+/**
+ * Internal dependencies
+ */
+import useTextInputOffset from '../use-text-input-offset';
+
+jest.mock( '@wordpress/react-native-aztec', () => ( {
+	InputState: {
+		getCurrentFocusedElement: jest.fn(),
+	},
+} ) );
+
+describe( 'useTextInputOffset', () => {
+	afterEach( () => {
+		jest.clearAllMocks();
+	} );
+
+	it( 'should return a function', () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = true;
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+
+		// Assert
+		expect( result.current[ 0 ] ).toBeInstanceOf( Function );
+	} );
+
+	it( 'should return null when scrollViewRef.current is null', async () => {
+		// Arrange
+		const scrollViewRef = { current: null };
+		const scrollEnabled = true;
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset();
+		expect( offset ).toBeNull();
+	} );
+
+	it( 'should return null when textInput is null', async () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = true;
+		RCTAztecView.InputState.getCurrentFocusedElement.mockReturnValue(
+			null
+		);
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset();
+		expect( offset ).toBeNull();
+	} );
+
+	it( 'should return null when scroll is not enabled', async () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = false;
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset();
+		expect( offset ).toBeNull();
+	} );
+
+	it( 'should return correct offset value when caretY is not null', async () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = true;
+		const x = 0;
+		const y = 10;
+		const width = 0;
+		const height = 100;
+		const textInput = {
+			measureLayout: jest.fn( ( _, callback ) => {
+				callback( x, y, width, height );
+			} ),
+		};
+		RCTAztecView.InputState.getCurrentFocusedElement.mockReturnValue(
+			textInput
+		);
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset( { caretY: 10 } );
+		expect( offset ).toBe( 20 );
+	} );
+
+	it( 'should return correct offset value when caretY is -1', async () => {
+		// Arrange
+		const scrollViewRef = { current: {} };
+		const scrollEnabled = true;
+		const x = 0;
+		const y = 10;
+		const width = 0;
+		const height = 100;
+		const textInput = {
+			measureLayout: jest.fn( ( _, callback ) => {
+				callback( x, y, width, height );
+			} ),
+		};
+		RCTAztecView.InputState.getCurrentFocusedElement.mockReturnValue(
+			textInput
+		);
+
+		// Act
+		const { result } = renderHook( () =>
+			useTextInputOffset( scrollEnabled, scrollViewRef )
+		);
+		const getTextInputOffset = result.current[ 0 ];
+
+		// Assert
+		const offset = await getTextInputOffset( { caretY: -1 } );
+		expect( offset ).toBe( 110 );
+	} );
+} );

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

@@ -0,0 +1,87 @@
+/**
+ * External dependencies
+ */
+
+import { Keyboard } from 'react-native';
+
+/**
+ * WordPress dependencies
+ */
+import { useEffect, useCallback, useState, useRef } from '@wordpress/element';
+
+/**
+ * Hook that adds Keyboard listeners to get the offset space
+ * when the keyboard is opened, taking into account focused AztecViews.
+ *
+ * @param {boolean}  scrollEnabled                Whether the scroll is enabled or not.
+ * @param {Function} shouldPreventAutomaticScroll Whether to prevent scrolling when there's a Keyboard offset set.
+ * @return {[number]} Keyboard offset.
+ */
+export default function useKeyboardOffset(
+	scrollEnabled,
+	shouldPreventAutomaticScroll
+) {
+	const [ keyboardOffset, setKeyboardOffset ] = useState( 0 );
+	const timeoutRef = useRef();
+
+	const onKeyboardDidHide = useCallback( () => {
+		if ( shouldPreventAutomaticScroll() ) {
+			clearTimeout( timeoutRef.current );
+			return;
+		}
+
+		// A timeout is being used to delay resetting the offset in cases
+		// where the focus is changed to a different TextInput.
+		clearTimeout( timeoutRef.current );
+		timeoutRef.current = setTimeout( () => {
+			setKeyboardOffset( 0 );
+		}, 200 );
+	}, [ shouldPreventAutomaticScroll ] );
+
+	const onKeyboardDidShow = useCallback( ( { endCoordinates } ) => {
+		clearTimeout( timeoutRef.current );
+		setKeyboardOffset( endCoordinates.height );
+	}, [] );
+
+	const onKeyboardWillShow = useCallback( () => {
+		clearTimeout( timeoutRef.current );
+	}, [] );
+
+	useEffect( () => {
+		let willShowSubscription;
+		let showSubscription;
+		let hideSubscription;
+
+		if ( scrollEnabled ) {
+			willShowSubscription = Keyboard.addListener(
+				'keyboardWillShow',
+				onKeyboardWillShow
+			);
+			showSubscription = Keyboard.addListener(
+				'keyboardDidShow',
+				onKeyboardDidShow
+			);
+			hideSubscription = Keyboard.addListener(
+				'keyboardDidHide',
+				onKeyboardDidHide
+			);
+		} else {
+			willShowSubscription?.remove();
+			showSubscription?.remove();
+			hideSubscription?.remove();
+		}
+
+		return () => {
+			clearTimeout( timeoutRef.current );
+			willShowSubscription?.remove();
+			showSubscription?.remove();
+			hideSubscription?.remove();
+		};
+	}, [
+		onKeyboardDidHide,
+		onKeyboardDidShow,
+		onKeyboardWillShow,
+		scrollEnabled,
+	] );
+	return [ keyboardOffset ];
+}

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

@@ -0,0 +1,105 @@
+/**
+ * External dependencies
+ */
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback } from '@wordpress/element';
+
+const DEFAULT_FONT_SIZE = 16;
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/** @typedef {import('react-native-reanimated').SharedValue} SharedValue */
+/**
+ * Hook to scroll to the currently focused TextInput
+ * depending on where the caret is placed taking into
+ * account the Keyboard and the Header.
+ *
+ * @param {number}      extraScrollHeight      Extra space to not overlap the content.
+ * @param {number}      keyboardOffset         Keyboard space offset.
+ * @param {boolean}     scrollEnabled          Whether the scroll is enabled or not.
+ * @param {RefObject}   scrollViewMeasurements ScrollView Layout measurements.
+ * @param {RefObject}   scrollViewRef          ScrollView reference.
+ * @param {SharedValue} scrollViewYOffset      Current offset position of the ScrollView.
+ * @return {Function[]} Function to scroll to the current TextInput's offset.
+ */
+export default function useScrollToTextInput(
+	extraScrollHeight,
+	keyboardOffset,
+	scrollEnabled,
+	scrollViewMeasurements,
+	scrollViewRef,
+	scrollViewYOffset
+) {
+	const { top, bottom } = useSafeAreaInsets();
+	const insets = top + bottom;
+
+	/**
+	 * Function to scroll to the current TextInput's offset.
+	 *
+	 * @param {Object} caret             The caret position data of the currently focused TextInput.
+	 * @param {number} caret.caretHeight The height of the caret.
+	 * @param {number} textInputOffset   The offset calculated with the caret's Y coordinate + the
+	 *                                   TextInput's Y coord or height value.
+	 */
+	const scrollToTextInputOffset = useCallback(
+		( caret, textInputOffset ) => {
+			const { caretHeight = DEFAULT_FONT_SIZE } = caret ?? {};
+
+			if (
+				! scrollViewRef.current ||
+				! scrollEnabled ||
+				! scrollViewMeasurements.current
+			) {
+				return;
+			}
+			const currentScrollViewYOffset = Math.max(
+				0,
+				scrollViewYOffset.value
+			);
+
+			// Scroll up.
+			if ( textInputOffset < currentScrollViewYOffset ) {
+				scrollViewRef.current.scrollTo( {
+					y: textInputOffset,
+					animated: true,
+				} );
+				return;
+			}
+
+			const availableScreenSpace = Math.abs(
+				Math.floor(
+					scrollViewMeasurements.current.height -
+						( keyboardOffset + extraScrollHeight + caretHeight )
+				)
+			);
+			const maxOffset = Math.floor(
+				currentScrollViewYOffset + availableScreenSpace
+			);
+
+			const isAtTheTop =
+				textInputOffset < scrollViewMeasurements.current.y + insets;
+
+			// Scroll down.
+			if ( textInputOffset > maxOffset && ! isAtTheTop ) {
+				scrollViewRef.current.scrollTo( {
+					y: textInputOffset - availableScreenSpace,
+					animated: true,
+				} );
+			}
+		},
+		[
+			extraScrollHeight,
+			insets,
+			keyboardOffset,
+			scrollEnabled,
+			scrollViewMeasurements,
+			scrollViewRef,
+			scrollViewYOffset,
+		]
+	);
+
+	return [ scrollToTextInputOffset ];
+}

package/src/mobile/keyboard-aware-flat-list/use-text-input-caret-position.native.js

@@ -0,0 +1,36 @@
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+import { useCallback, useEffect, useState } from '@wordpress/element';
+
+/**
+ * Hook that listens to caret changes from AztecView TextInputs.
+ *
+ * @param {boolean} scrollEnabled Whether the scroll is enabled or not.
+ * @return {[number]} Current caret's data.
+ */
+export default function useTextInputCaretPosition( scrollEnabled ) {
+	const [ currentCaretData, setCurrentCaretData ] = useState();
+
+	const onCaretChange = useCallback( ( caret ) => {
+		setCurrentCaretData( caret );
+	}, [] );
+
+	useEffect( () => {
+		if ( scrollEnabled ) {
+			RCTAztecView.InputState.addCaretChangeListener( onCaretChange );
+		} else {
+			RCTAztecView.InputState.removeCaretChangeListener( onCaretChange );
+		}
+
+		return () => {
+			if ( scrollEnabled ) {
+				RCTAztecView.InputState.removeCaretChangeListener(
+					onCaretChange
+				);
+			}
+		};
+	}, [ scrollEnabled, onCaretChange ] );
+	return [ currentCaretData ];
+}

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

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import RCTAztecView from '@wordpress/react-native-aztec';
+import { useCallback } from '@wordpress/element';
+
+/** @typedef {import('@wordpress/element').RefObject} RefObject */
+/**
+ * Hook that calculates the currently focused TextInput's current
+ * caret Y coordinate position.
+ *
+ * @param {boolean}   scrollEnabled Whether the scroll is enabled or not.
+ * @param {RefObject} scrollViewRef ScrollView reference.
+ * @return {[Function]} Function to get the current TextInput's offset.
+ */
+export default function useTextInputOffset( scrollEnabled, scrollViewRef ) {
+	const getTextInputOffset = useCallback(
+		async ( caret ) => {
+			const { caretY = null } = caret ?? {};
+			const textInput =
+				RCTAztecView.InputState.getCurrentFocusedElement();
+
+			return new Promise( ( resolve ) => {
+				if (
+					scrollViewRef.current &&
+					textInput &&
+					scrollEnabled &&
+					caretY !== null
+				) {
+					textInput.measureLayout(
+						scrollViewRef.current,
+						( _x, y, _width, height ) => {
+							const caretYOffset =
+								// For cases where the caretY value is -1
+								// we use the y + height value, e.g the current
+								// character index is not valid or out of bounds
+								// see https://github.com/wordpress-mobile/AztecEditor-iOS/blob/4d0522d67b0056ac211466caaa76936cc5b4f947/Aztec/Classes/TextKit/TextView.swift#L762
+								caretY >= 0 && caretY < height
+									? y + caretY
+									: y + height;
+							resolve( Math.round( Math.abs( caretYOffset ) ) );
+						},
+						() => resolve( null )
+					);
+				} else {
+					resolve( null );
+				}
+			} );
+		},
+		[ scrollEnabled, scrollViewRef ]
+	);
+
+	return [ getTextInputOffset ];
+}

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

@@ -140,8 +140,8 @@ const SegmentedControls = ( {
 		styles.selectedDark
 	);
 
-	const width = segmentsDimensions[ activeSegmentIndex ].width;
-	const height = segmentsDimensions[ activeSegmentIndex ].height;
+	const width = segmentsDimensions[ activeSegmentIndex ]?.width;
+	const height = segmentsDimensions[ activeSegmentIndex ]?.height;
 
 	const outlineStyle = [ styles.outline, isIOS && styles.outlineIOS ];
 

package/src/modal/style.scss

@@ -16,31 +16,39 @@
 // The modal window element.
 .components-modal__frame {
 	// Use the entire viewport on smaller screens.
-	margin: 0;
+	margin: $grid-unit-50 0 0 0;
 	width: 100%;
 	background: $white;
 	box-shadow: $shadow-modal;
-	border-radius: $radius-block-ui;
+	border-radius: $grid-unit-10 $grid-unit-10 0 0;
 	overflow: hidden;
 	// Have the content element fill the vertical space yet not overflow.
 	display: flex;
+	// Animate the modal frame/contents appearing on the page.
+	animation: components-modal__appear-animation 0.1s ease-out;
+	animation-fill-mode: forwards;
+	@include reduce-motion("animation");
 
 	// Show a centered modal on bigger screens.
 	@include break-small() {
+		border-radius: $grid-unit-10;
 		margin: auto;
 		width: auto;
 		min-width: $modal-min-width;
 		max-width: calc(100% - #{$grid-unit-20 * 2});
 		max-height: calc(100% - #{$header-height * 2});
 
-		// Animate the modal frame/contents appearing on the page.
-		animation: components-modal__appear-animation 0.1s ease-out;
-		animation-fill-mode: forwards;
-		@include reduce-motion("animation");
-
 		&.is-full-screen {
-			width: 90vw;
-			min-height: 90vh;
+			@include break-small() {
+				width: calc(100% - #{ $grid-unit-20 * 2 });
+				height: calc(100% - #{ $grid-unit-20 * 2 });
+				max-height: none;
+			}
+			@include break-medium() {
+				width: calc(100% - #{ $grid-unit-50 * 2 });
+				height: calc(100% - #{ $grid-unit-50 * 2 });
+				max-width: none;
+			}
 		}
 	}
 
@@ -64,12 +72,12 @@
 .components-modal__header {
 	box-sizing: border-box;
 	border-bottom: $border-width solid transparent;
-	padding: 0 $grid-unit-40;
+	padding: $grid-unit-30 $grid-unit-40 $grid-unit-15;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	align-items: center;
-	height: $header-height + $grid-unit-20;
+	height: $header-height + $grid-unit-15;
 	width: 100%;
 	z-index: z-index(".components-modal__header");
 	position: absolute;
@@ -121,7 +129,7 @@
 // Modal contents.
 .components-modal__content {
 	flex: 1;
-	margin-top: $header-height + $grid-unit-20;
+	margin-top: $header-height + $grid-unit-15;
 	padding: 0 $grid-unit-40 $grid-unit-40;
 	overflow: auto;
 

package/src/navigator/navigator-provider/component.tsx

@@ -147,6 +147,7 @@ function UnconnectedNavigatorProvider(
 			const {
 				focusTargetSelector,
 				isBack = false,
+				skipFocus = false,
 				...restOptions
 			} = options;
 
@@ -168,6 +169,7 @@ function UnconnectedNavigatorProvider(
 					path,
 					isBack,
 					hasRestoredFocus: false,
+					skipFocus,
 				};
 
 				if ( prevLocationHistory.length < 1 ) {

package/src/navigator/navigator-screen/component.tsx

@@ -43,7 +43,7 @@ const animationExitDelay = 0;
 // as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
 type Props = Omit<
 	WordPressComponentProps< NavigatorScreenProps, 'div', false >,
-	keyof MotionProps
+	Exclude< keyof MotionProps, 'style' | 'children' >
 >;
 
 function UnconnectedNavigatorScreen(
@@ -100,11 +100,13 @@ function UnconnectedNavigatorScreen(
 		// - when the screen becomes visible
 		// - if the wrapper ref has been assigned
 		// - if focus hasn't already been restored for the current location
+		// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
 		if (
 			isInitialLocation ||
 			! isMatch ||
 			! wrapperRef.current ||
-			locationRef.current.hasRestoredFocus
+			locationRef.current.hasRestoredFocus ||
+			location.skipFocus
 		) {
 			return;
 		}
@@ -143,6 +145,7 @@ function UnconnectedNavigatorScreen(
 		isMatch,
 		location.isBack,
 		location.focusTargetSelector,
+		location.skipFocus,
 	] );
 
 	const mergedWrapperRef = useMergeRefs( [ forwardedRef, wrapperRef ] );