@wordpress/components 19.10.0 → 19.11.0

package/src/index.js

@@ -71,7 +71,6 @@ export { DuotoneSwatch, DuotonePicker } from './duotone-picker';
 export { Elevation as __experimentalElevation } from './elevation';
 export { default as ExternalLink } from './external-link';
 export { Flex, FlexBlock, FlexItem } from './flex';
-export { Flyout as __experimentalFlyout } from './flyout';
 export { default as FocalPointPicker } from './focal-point-picker';
 export { default as FocusableIframe } from './focusable-iframe';
 export { default as FontSizePicker } from './font-size-picker';

package/src/index.native.js

@@ -61,6 +61,7 @@ export {
 	filterUnitsWithSettings as filterUnitsWithSettings,
 } from './unit-control/utils';
 export { default as Disabled } from './disabled';
+export { default as Draggable, DraggableTrigger } from './draggable';
 
 // Higher-Order Components.
 export { default as withConstrainedTabbing } from './higher-order/with-constrained-tabbing';

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

@@ -21,7 +21,7 @@ import { useCx } from '../../utils';
 import { ItemGroup, Item } from '..';
 import Button from '../../button';
 import { FlexItem, FlexBlock } from '../../flex';
-import { Flyout } from '../../flyout';
+import Dropdown from '../../dropdown';
 import { HStack } from '../../h-stack';
 import Icon from '../../icon';
 import { Text } from '../../text';
@@ -90,23 +90,27 @@ export const _default = () => {
 };
 
 export const dropdown = () => (
-	<Flyout
-		style={ { width: '350px' } }
-		trigger={ <Button>Open Popover</Button> }
-	>
-		<ItemGroup style={ { padding: 4 } }>
-			<Item>Code is Poetry (no click handlers)</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-			<Item onClick={ () => alert( 'WordPress.org' ) }>
-				Code is Poetry — Click me!
-			</Item>
-		</ItemGroup>
-	</Flyout>
+	<Dropdown
+		renderToggle={ ( { isOpen, onToggle } ) => (
+			<Button onClick={ onToggle } aria-expanded={ isOpen }>
+				Open Popover
+			</Button>
+		) }
+		renderContent={ () => (
+			<ItemGroup style={ { minWidth: 350, padding: 4 } }>
+				<Item>Code is Poetry (no click handlers)</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+				<Item onClick={ () => alert( 'WordPress.org' ) }>
+					Code is Poetry — Click me!
+				</Item>
+			</ItemGroup>
+		) }
+	/>
 );
 
 const SimpleColorSwatch = ( { color, style } ) => (

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

@@ -69,7 +69,7 @@ const BottomSheetNavigationScreen = ( {
 			 * Ideally, we refactor onHandleHardwareButtonPress to manage multiple
 			 * callbacks triggered based upon which screen is currently active.
 			 *
-			 * Related: https://git.io/JD2no
+			 * Related: https://github.com/WordPress/gutenberg/pull/36328#discussion_r768897546
 			 */
 		}, [] )
 	);

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

@@ -108,7 +108,7 @@ it( 'animates height transitioning from full-screen to non-full-screen', async (
 	);
 	// Navigate to screen 1
 	fireEvent.press(
-		// Use custom waitFor due to https://git.io/JYYGE
+		// Use custom waitFor due to https://github.com/callstack/react-native-testing-library/issues/379
 		await waitFor( () => screen.getByText( /test-screen-2/ ) )
 	);
 	// Await navigation screen to allow async state updates to complete

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

@@ -148,7 +148,7 @@ class BottomSheet extends Component {
 			// 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
+			// preexisting bug: https://github.com/WordPress/gutenberg/issues/30562
 			// this.performRegularLayoutAnimation( {
 			// 	useLastLayoutAnimation: false,
 			// } );.

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

@@ -57,11 +57,16 @@ const BottomSheetSelectControl = ( {
 					value={ selectedOption.label }
 					onPress={ openSubSheet }
 					accessibilityRole={ 'button' }
-					accessibilityLabel={ selectedOption.label }
+					accessibilityLabel={ sprintf(
+						// translators:  %1$s: Select control button label e.g. "Button width". %2$s: Select control option value e.g: "Auto, 25%".
+						__( '%1$s. Currently selected: %2$s' ),
+						label,
+						selectedOption.label
+					) }
 					accessibilityHint={ sprintf(
 						// translators: %s: Select control button label e.g. "Button width"
 						__( 'Navigates to select %s' ),
-						selectedOption.label
+						label
 					) }
 				>
 					<Icon icon={ chevronRight }></Icon>

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,32 +96,42 @@ 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>
 		);
 	}
 }

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/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/navigator/stories/index.js

@@ -9,7 +9,7 @@ import { css } from '@emotion/react';
 import Button from '../../button';
 import { Card, CardBody, CardFooter, CardHeader } from '../../card';
 import { HStack } from '../../h-stack';
-import { Flyout } from '../../flyout';
+import Dropdown from '../../dropdown';
 import { useCx } from '../../utils/hooks/use-cx';
 import {
 	NavigatorProvider,
@@ -54,17 +54,23 @@ const MyNavigation = () => {
 								Navigate to screen with sticky content.
 							</NavigatorButton>
 
-							<Flyout
-								trigger={
-									<Button variant="primary">
+							<Dropdown
+								renderToggle={ ( { isOpen, onToggle } ) => (
+									<Button
+										onClick={ onToggle }
+										aria-expanded={ isOpen }
+										variant="primary"
+									>
 										Open test dialog
 									</Button>
-								}
-								placement="bottom-start"
-							>
-								<CardHeader>Go</CardHeader>
-								<CardBody>Stuff</CardBody>
-							</Flyout>
+								) }
+								renderContent={ () => (
+									<Card>
+										<CardHeader>Go</CardHeader>
+										<CardBody>Stuff</CardBody>
+									</Card>
+								) }
+							/>
 						</HStack>
 					</CardBody>
 				</Card>

package/src/palette-edit/index.js

@@ -56,11 +56,36 @@ function NameInput( { value, onChange, label } ) {
 	);
 }
 
-function getNameForPosition( position ) {
+/**
+ * Returns a temporary name for a palette item in the format "Color + id".
+ * To ensure there are no duplicate ids, this function checks all slugs for temporary names.
+ * It expects slugs to be in the format: slugPrefix + color- + number.
+ * It then sets the id component of the new name based on the incremented id of the highest existing slug id.
+ *
+ * @param {string} elements   An array of color palette items.
+ * @param {string} slugPrefix The slug prefix used to match the element slug.
+ *
+ * @return {string} A unique name for a palette item.
+ */
+export function getNameForPosition( elements, slugPrefix ) {
+	const temporaryNameRegex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
+	const position = elements.reduce( ( previousValue, currentValue ) => {
+		if ( typeof currentValue?.slug === 'string' ) {
+			const matches = currentValue?.slug.match( temporaryNameRegex );
+			if ( matches ) {
+				const id = parseInt( matches[ 1 ], 10 );
+				if ( id >= previousValue ) {
+					return id + 1;
+				}
+			}
+		}
+		return previousValue;
+	}, 1 );
+
 	return sprintf(
 		/* translators: %s: is a temporary id for a custom color */
-		__( 'Color %s ' ),
-		position + 1
+		__( 'Color %s' ),
+		position
 	);
 }
 
@@ -131,7 +156,8 @@ function Option( {
 			</HStack>
 			{ isEditing && (
 				<Popover
-					position="bottom left"
+					placement="left-start"
+					offset={ 20 }
 					className="components-palette-edit__popover"
 				>
 					{ ! isGradient && (
@@ -163,9 +189,10 @@ function Option( {
 	);
 }
 
-function isTemporaryElement( slugPrefix, { slug, color, gradient }, index ) {
+function isTemporaryElement( slugPrefix, { slug, color, gradient } ) {
+	const regex = new RegExp( `^${ slugPrefix }color-([\\d]+)$` );
 	return (
-		slug === slugPrefix + kebabCase( getNameForPosition( index ) ) &&
+		regex.test( slug ) &&
 		( ( !! color && color === DEFAULT_COLOR ) ||
 			( !! gradient && gradient === DEFAULT_GRADIENT ) )
 	);
@@ -193,8 +220,7 @@ function PaletteEditListView( {
 				)
 			) {
 				const newElements = elementsReference.current.filter(
-					( element, index ) =>
-						! isTemporaryElement( slugPrefix, element, index )
+					( element ) => ! isTemporaryElement( slugPrefix, element )
 				);
 				onChange( newElements.length ? newElements : undefined );
 			}
@@ -309,8 +335,10 @@ export default function PaletteEdit( {
 							}
 							onClick={ () => {
 								const tempOptionName = getNameForPosition(
-									elementsLength
+									elements,
+									slugPrefix
 								);
+
 								onChange( [
 									...elements,
 									{

package/src/palette-edit/style.scss

@@ -1,10 +1,3 @@
-@include break-medium() {
-	.components-palette-edit__popover.components-popover .components-popover__content.components-popover__content.components-popover__content {
-		margin-right: #{ math.div($sidebar-width, 2) + $grid-unit-20 };
-		margin-top: #{ -($grid-unit-60 + $border-width) };
-	}
-}
-
 .components-palette-edit__popover {
 	.components-custom-gradient-picker__gradient-bar {
 		margin-top: 0;