@wordpress/components 19.10.0 → 19.13.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { TextInput } from 'react-native';
+import { ScrollView, TextInput } from 'react-native';
 
 /**
  * WordPress dependencies
@@ -20,7 +20,7 @@ import {
 /**
  * Internal dependencies
  */
-import HTMLInputContainer from './container';
+import KeyboardAvoidingView from '../keyboard-avoiding-view';
 import styles from './style.scss';
 
 export class HTMLTextInput extends Component {
@@ -73,7 +73,13 @@ export class HTMLTextInput extends Component {
 	}
 
 	render() {
-		const { getStylesFromColorScheme, style } = this.props;
+		const {
+			editTitle,
+			getStylesFromColorScheme,
+			parentHeight,
+			style,
+			title,
+		} = this.props;
 		const titleStyle = [
 			styles.htmlViewTitle,
 			style?.text && { color: style.text },
@@ -90,41 +96,50 @@ export class HTMLTextInput extends Component {
 			...( style?.text && { color: style.text } ),
 		};
 		return (
-			<HTMLInputContainer parentHeight={ this.props.parentHeight }>
-				<TextInput
-					autoCorrect={ false }
-					accessibilityLabel="html-view-title"
-					textAlignVertical="center"
-					numberOfLines={ 1 }
-					style={ titleStyle }
-					value={ this.props.title }
-					placeholder={ __( 'Add title' ) }
-					placeholderTextColor={ placeholderStyle.color }
-					onChangeText={ this.props.editTitle }
-				/>
-				<TextInput
-					autoCorrect={ false }
-					accessibilityLabel="html-view-content"
-					textAlignVertical="top"
-					multiline
-					style={ htmlStyle }
-					value={ this.state.value }
-					onChangeText={ this.edit }
-					onBlur={ this.stopEditing }
-					placeholder={ __( 'Start writing…' ) }
-					placeholderTextColor={ placeholderStyle.color }
-					scrollEnabled={ HTMLInputContainer.scrollEnabled }
-				/>
-			</HTMLInputContainer>
+			<KeyboardAvoidingView
+				style={ styles.keyboardAvoidingView }
+				parentHeight={ parentHeight }
+			>
+				<ScrollView style={ styles.scrollView }>
+					<TextInput
+						autoCorrect={ false }
+						accessibilityLabel="html-view-title"
+						textAlignVertical="center"
+						numberOfLines={ 1 }
+						style={ titleStyle }
+						value={ title }
+						placeholder={ __( 'Add title' ) }
+						placeholderTextColor={ placeholderStyle.color }
+						onChangeText={ editTitle }
+					/>
+					<TextInput
+						ref={ this.contentTextInputRef }
+						autoCorrect={ false }
+						accessibilityLabel="html-view-content"
+						textAlignVertical="top"
+						multiline
+						style={ htmlStyle }
+						value={ this.state.value }
+						onChangeText={ this.edit }
+						onBlur={ this.stopEditing }
+						placeholder={ __( 'Start writing…' ) }
+						placeholderTextColor={ placeholderStyle.color }
+						scrollEnabled={ false }
+						// [Only iOS] This prop prevents the text input from
+						// automatically getting focused after scrolling
+						// content.
+						rejectResponderTermination={ false }
+					/>
+				</ScrollView>
+			</KeyboardAvoidingView>
 		);
 	}
 }
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getEditedPostAttribute, getEditedPostContent } = select(
-			'core/editor'
-		);
+		const { getEditedPostAttribute, getEditedPostContent } =
+			select( 'core/editor' );
 
 		return {
 			title: getEditedPostAttribute( 'title' ),

package/src/mobile/html-text-input/style.android.scss

@@ -1,22 +1,8 @@
-@import "./style-common.scss";
-
-.htmlView {
-	font-family: $htmlFont;
-	padding-left: $padding;
-	padding-right: $padding;
-	padding-top: $padding;
-	padding-bottom: $padding + 16;
-}
+@import "./style.scss";
 
 .htmlViewTitle {
 	font-family: $htmlFont;
 	padding-left: $padding;
 	padding-right: $padding;
-	padding-top: $padding;
-	padding-bottom: $padding;
 	margin-top: $padding * 2;
 }
-
-.scrollView {
-	flex: 1;
-}

package/src/mobile/html-text-input/style.ios.scss

@@ -1,17 +1,4 @@
-@import "./style-common.scss";
-
-$title-height: 32;
-
-.htmlView {
-	font-family: $htmlFont;
-	padding-left: $padding;
-	padding-right: $padding;
-	padding-bottom: $title-height + $padding;
-}
-
-.htmlViewDark {
-	color: $textColorDark;
-}
+@import "./style.scss";
 
 .htmlViewTitle {
 	font-family: $htmlFont;
@@ -19,6 +6,5 @@ $title-height: 32;
 	padding-right: $padding;
 	padding-top: $padding;
 	padding-bottom: $padding;
-	height: $title-height;
 	margin-top: $padding * 2;
 }

package/src/mobile/html-text-input/{style-common.native.scss → style.scss}

@@ -21,3 +21,19 @@ $textColorDark: $white;
 .placeholderDark {
 	color: $gray-50;
 }
+
+.htmlView {
+	font-family: $htmlFont;
+	padding-left: $padding;
+	padding-right: $padding;
+	padding-top: $padding;
+	padding-bottom: $padding + 16;
+}
+
+.htmlViewDark {
+	color: $textColorDark;
+}
+
+.scrollView {
+	flex: 1;
+}

package/src/mobile/inserter-button/index.native.js

@@ -30,12 +30,8 @@ class MenuItem extends Component {
 	}
 
 	render() {
-		const {
-			getStylesFromColorScheme,
-			item,
-			itemWidth,
-			maxWidth,
-		} = this.props;
+		const { getStylesFromColorScheme, item, itemWidth, maxWidth } =
+			this.props;
 
 		const modalIconWrapperStyle = getStylesFromColorScheme(
 			styles.modalIconWrapper,

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

@@ -2,17 +2,27 @@
  * External dependencies
  */
 import { FlatList } from 'react-native';
+import Animated, { useAnimatedScrollHandler } from 'react-native-reanimated';
 
 /**
  * Internal dependencies
  */
 import KeyboardAvoidingView from '../keyboard-avoiding-view';
 
-export const KeyboardAwareFlatList = ( props ) => (
-	<KeyboardAvoidingView style={ { flex: 1 } }>
-		<FlatList { ...props } />
-	</KeyboardAvoidingView>
-);
+const AnimatedFlatList = Animated.createAnimatedComponent( FlatList );
+
+export const KeyboardAwareFlatList = ( { innerRef, onScroll, ...props } ) => {
+	const scrollHandler = useAnimatedScrollHandler( { onScroll } );
+	return (
+		<KeyboardAvoidingView style={ { flex: 1 } }>
+			<AnimatedFlatList
+				ref={ innerRef }
+				onScroll={ scrollHandler }
+				{ ...props }
+			/>
+		</KeyboardAvoidingView>
+	);
+};
 
 KeyboardAwareFlatList.handleCaretVerticalPositionChange = () => {
 	// no need to handle on Android, it is system managed

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

@@ -4,13 +4,20 @@
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { FlatList } from 'react-native';
 import { isEqual } from 'lodash';
+import Animated, {
+	useAnimatedScrollHandler,
+	useSharedValue,
+} from 'react-native-reanimated';
 
 /**
  * WordPress dependencies
  */
-import { memo } from '@wordpress/element';
+import { memo, useCallback, useRef } from '@wordpress/element';
 
 const List = memo( FlatList, isEqual );
+const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(
+	KeyboardAwareScrollView
+);
 
 export const KeyboardAwareFlatList = ( {
 	extraScrollHeight,
@@ -19,53 +26,75 @@ export const KeyboardAwareFlatList = ( {
 	autoScroll,
 	scrollViewStyle,
 	inputAccessoryViewHeight,
+	onScroll,
 	...listProps
-} ) => (
-	<KeyboardAwareScrollView
-		style={ [ { flex: 1 }, scrollViewStyle ] }
-		keyboardDismissMode="none"
-		enableResetScrollToCoords={ false }
-		keyboardShouldPersistTaps="handled"
-		extraScrollHeight={ extraScrollHeight }
-		extraHeight={ 0 }
-		inputAccessoryViewHeight={ inputAccessoryViewHeight }
-		enableAutomaticScroll={ autoScroll === undefined ? false : autoScroll }
-		ref={ ( ref ) => {
-			this.scrollViewRef = ref;
+} ) => {
+	const scrollViewRef = useRef();
+	const keyboardWillShowIndicator = useRef();
+
+	const latestContentOffsetY = useSharedValue( -1 );
+
+	const scrollHandler = useAnimatedScrollHandler( {
+		onScroll: ( event ) => {
+			const { contentOffset } = event;
+			latestContentOffsetY.value = contentOffset.y;
+			onScroll( event );
+		},
+	} );
+
+	const getRef = useCallback(
+		( ref ) => {
+			scrollViewRef.current = ref;
 			innerRef( ref );
-		} }
-		onKeyboardWillHide={ () => {
-			this.keyboardWillShowIndicator = false;
-		} }
-		onKeyboardDidHide={ () => {
-			setTimeout( () => {
-				if (
-					! this.keyboardWillShowIndicator &&
-					this.latestContentOffsetY !== undefined &&
-					! shouldPreventAutomaticScroll()
-				) {
-					// Reset the content position if keyboard is still closed.
-					if ( this.scrollViewRef ) {
-						this.scrollViewRef.scrollToPosition(
-							0,
-							this.latestContentOffsetY,
-							true
-						);
-					}
-				}
-			}, 50 );
-		} }
-		onKeyboardWillShow={ () => {
-			this.keyboardWillShowIndicator = true;
-		} }
-		scrollEnabled={ listProps.scrollEnabled }
-		onScroll={ ( event ) => {
-			this.latestContentOffsetY = event.nativeEvent.contentOffset.y;
-		} }
-	>
-		<List { ...listProps } />
-	</KeyboardAwareScrollView>
-);
+		},
+		[ 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;
+	}, [] );
+
+	return (
+		<AnimatedKeyboardAwareScrollView
+			style={ [ { flex: 1 }, scrollViewStyle ] }
+			keyboardDismissMode="none"
+			enableResetScrollToCoords={ false }
+			keyboardShouldPersistTaps="handled"
+			extraScrollHeight={ extraScrollHeight }
+			extraHeight={ 0 }
+			inputAccessoryViewHeight={ inputAccessoryViewHeight }
+			enableAutomaticScroll={
+				autoScroll === undefined ? false : autoScroll
+			}
+			ref={ getRef }
+			onKeyboardWillHide={ onKeyboardWillHide }
+			onKeyboardDidHide={ onKeyboardDidHide }
+			onKeyboardWillShow={ onKeyboardWillShow }
+			scrollEnabled={ listProps.scrollEnabled }
+			onScroll={ scrollHandler }
+		>
+			<List { ...listProps } />
+		</AnimatedKeyboardAwareScrollView>
+	);
+};
 
 KeyboardAwareFlatList.handleCaretVerticalPositionChange = (
 	scrollView,

package/src/mobile/link-settings/image-link-destinations-screen.native.js

@@ -59,8 +59,12 @@ function ImageLinkDestinationsScreen( props ) {
 	const navigation = useNavigation();
 	const route = useRoute();
 	const { url = '' } = props;
-	const { inputValue = url, imageUrl, attachmentPageUrl, linkDestination } =
-		route.params || {};
+	const {
+		inputValue = url,
+		imageUrl,
+		attachmentPageUrl,
+		linkDestination,
+	} = route.params || {};
 
 	function goToLinkPicker() {
 		navigation.navigate( blockSettingsScreens.linkPicker, {

package/src/mobile/media-edit/index.native.js

@@ -39,9 +39,8 @@ export class MediaEdit extends Component {
 		this.onPickerPresent = this.onPickerPresent.bind( this );
 		this.onPickerSelect = this.onPickerSelect.bind( this );
 		this.getMediaOptionsItems = this.getMediaOptionsItems.bind( this );
-		this.getDestructiveButtonIndex = this.getDestructiveButtonIndex.bind(
-			this
-		);
+		this.getDestructiveButtonIndex =
+			this.getDestructiveButtonIndex.bind( this );
 	}
 
 	getMediaOptionsItems() {

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

@@ -9,7 +9,7 @@ import {
 	Animated,
 	Easing,
 } from 'react-native';
-import { take, values, map, reduce } from 'lodash';
+import { values, map, reduce } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -65,9 +65,8 @@ const SegmentedControls = ( {
 	addonRight,
 } ) => {
 	const selectedSegmentIndex = selectedIndex || 0;
-	const [ activeSegmentIndex, setActiveSegmentIndex ] = useState(
-		selectedSegmentIndex
-	);
+	const [ activeSegmentIndex, setActiveSegmentIndex ] =
+		useState( selectedSegmentIndex );
 	const [ segmentsDimensions, setSegmentsDimensions ] = useState( {
 		[ activeSegmentIndex ]: { width: 0, height: 0 },
 	} );
@@ -103,7 +102,7 @@ const SegmentedControls = ( {
 			? styles.containerIOS
 			: styles.container;
 		const widths = map( values( segmentsDimensions ), 'width' );
-		const widthsDistance = take( widths, index );
+		const widthsDistance = widths.slice( 0, index );
 		const widthsDistanceSum = reduce(
 			widthsDistance,
 			( sum, n ) => sum + n

package/src/mobile/utils/test/index.native.js

@@ -55,16 +55,7 @@ describe( 'toFixed', () => {
 
 	it( 'function returns the number applying `decimalNum` all point numbers', () => {
 		const toCheck = [
-			1.01,
-			1.02,
-			1.03,
-			1.04,
-			1.05,
-			1.06,
-			1.07,
-			1.08,
-			1.09,
-			1.1,
+			1.01, 1.02, 1.03, 1.04, 1.05, 1.06, 1.07, 1.08, 1.09, 1.1,
 		];
 		toCheck.forEach( ( num ) => {
 			const result = toFixed( num, 2 );
@@ -88,8 +79,8 @@ describe( 'isContainerRelated', () => {
 	];
 
 	beforeAll( () => {
-		const registerCoreBlocks = require( '@wordpress/block-library' )
-			.registerCoreBlocks;
+		const registerCoreBlocks =
+			require( '@wordpress/block-library' ).registerCoreBlocks;
 		registerCoreBlocks();
 	} );
 

package/src/modal/index.js

@@ -89,7 +89,7 @@ function Modal( props, forwardedRef ) {
 				ariaHelper.showApp();
 			}
 		};
-	}, [] );
+	}, [ bodyOpenClassName ] );
 
 	function handleEscapeKeyDown( event ) {
 		if (

package/src/navigable-container/container.js

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { omit, noop, isFunction } from 'lodash';
+import { omit } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -10,6 +10,7 @@ import { omit, noop, isFunction } from 'lodash';
 import { Component, forwardRef } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 
+const noop = () => {};
 const MENU_ITEM_ROLES = [ 'menuitem', 'menuitemradio', 'menuitemcheckbox' ];
 
 function cycleValue( value, total, offset ) {
@@ -52,7 +53,7 @@ class NavigableContainer extends Component {
 		const { forwardedRef } = this.props;
 		this.container = ref;
 
-		if ( isFunction( forwardedRef ) ) {
+		if ( typeof forwardedRef === 'function' ) {
 			forwardedRef( ref );
 		} else if ( forwardedRef && 'current' in forwardedRef ) {
 			forwardedRef.current = ref;

package/src/navigable-container/test/menu.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { fireEvent, render } from '@testing-library/react';
-import { each } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,7 @@ import { NavigableMenu } from '../menu';
 
 function simulateVisible( container, selector ) {
 	const elements = container.querySelectorAll( selector );
-	each( elements, ( elem ) => {
+	elements.forEach( ( elem ) => {
 		elem.getClientRects = () => [
 			'trick-jsdom-into-having-size-for-element-rect',
 		];

package/src/navigable-container/test/tabbable.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { fireEvent, render } from '@testing-library/react';
-import { each } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,7 @@ import { TabbableContainer } from '../tabbable';
 
 function simulateVisible( container, selector ) {
 	const elements = container.querySelectorAll( selector );
-	each( elements, ( elem ) => {
+	elements.forEach( ( elem ) => {
 		elem.getClientRects = () => [
 			'trick-jsdom-into-having-size-for-element-rect',
 		];

package/src/navigation/context.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,8 @@ import { createContext, useContext } from '@wordpress/element';
  */
 import { ROOT_MENU } from './constants';
 
+const noop = () => {};
+
 export const NavigationContext = createContext( {
 	activeItem: undefined,
 	activeMenu: ROOT_MENU,

package/src/navigation/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,8 @@ import { NavigationContext } from './context';
 import { NavigationUI } from './styles/navigation-styles';
 import { useCreateNavigationTree } from './use-create-navigation-tree';
 
+const noop = () => {};
+
 export default function Navigation( {
 	activeItem,
 	activeMenu = ROOT_MENU,

package/src/navigation/item/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -19,6 +18,8 @@ import { ItemUI, ItemIconUI } from '../styles/navigation-styles';
 import NavigationItemBaseContent from './base-content';
 import NavigationItemBase from './base';
 
+const noop = () => {};
+
 export default function NavigationItem( props ) {
 	const {
 		badge,

package/src/navigation/stories/controlled-state.js

@@ -19,7 +19,7 @@ export function ControlledStateStory() {
 	const MockLink = ( { href, children } ) => (
 		<Button
 			href={ href }
-			// Since we're not actually navigating pages, simulate it with on onClick.
+			// Since we're not actually navigating pages, simulate it with onClick.
 			onClick={ ( event ) => {
 				event.preventDefault();
 				const item = href.replace( 'https://example.com/', '' );

package/src/navigation/stories/more-examples.js

@@ -20,9 +20,8 @@ export function MoreExamplesStory() {
 		return () => clearTimeout( timeout );
 	} );
 	const [ backButtonBadge, setBackButtonBadge ] = useState( 1 );
-	const [ backButtonPreventedBadge, setBackButtonPreventedBadge ] = useState(
-		1
-	);
+	const [ backButtonPreventedBadge, setBackButtonPreventedBadge ] =
+		useState( 1 );
 
 	return (
 		<Navigation activeItem={ activeItem } className="navigation-story">