@wordpress/components 19.2.3 → 19.4.1-next.f435e9e01b.0

package/src/input-control/styles/input-control-styles.tsx

@@ -3,7 +3,6 @@
  */
 import { css, SerializedStyles } from '@emotion/react';
 import styled from '@emotion/styled';
-// eslint-disable-next-line no-restricted-imports
 import type { CSSProperties, ReactNode } from 'react';
 
 /**
@@ -13,7 +12,7 @@ import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
 import { COLORS, rtl } from '../../utils';
-import type { LabelPosition } from '../types';
+import type { LabelPosition, Size } from '../types';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -105,8 +104,6 @@ export const Container = styled.div< ContainerProps >`
 	${ containerWidthStyles }
 `;
 
-type Size = 'default' | 'small';
-
 type InputProps = {
 	disabled?: boolean;
 	inputSize?: Size;
@@ -126,6 +123,7 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	const sizes = {
 		default: '13px',
 		small: '11px',
+		'__unstable-large': '13px',
 	};
 
 	const fontSize = sizes[ size as Size ] || sizes.default;
@@ -148,11 +146,22 @@ const sizeStyles = ( { inputSize: size }: InputProps ) => {
 			height: 30,
 			lineHeight: 1,
 			minHeight: 30,
+			paddingLeft: 8,
+			paddingRight: 8,
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
+			paddingLeft: 8,
+			paddingRight: 8,
+		},
+		'__unstable-large': {
+			height: 40,
+			lineHeight: 1,
+			minHeight: 40,
+			paddingLeft: 16,
+			paddingRight: 16,
 		},
 	};
 
@@ -205,8 +214,6 @@ export const Input = styled.input< InputProps >`
 		display: block;
 		margin: 0;
 		outline: none;
-		padding-left: 8px;
-		padding-right: 8px;
 		width: 100%;
 
 		${ dragStyles }
@@ -220,18 +227,18 @@ export const Input = styled.input< InputProps >`
 	}
 `;
 
-const labelPadding = ( {
+const labelMargin = ( {
 	labelPosition,
 }: {
 	labelPosition?: LabelPosition;
 } ) => {
-	let paddingBottom = 4;
+	let marginBottom = 8;
 
 	if ( labelPosition === 'edge' || labelPosition === 'side' ) {
-		paddingBottom = 0;
+		marginBottom = 0;
 	}
 
-	return css( { paddingTop: 0, paddingBottom } );
+	return css( { marginTop: 0, marginRight: 0, marginBottom, marginLeft: 0 } );
 };
 
 const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
@@ -239,11 +246,12 @@ const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 		box-sizing: border-box;
 		color: currentColor;
 		display: block;
-		margin: 0;
+		padding-top: 0;
+		padding-bottom: 0;
 		max-width: 100%;
 		z-index: 1;
 
-		${ labelPadding }
+		${ labelMargin }
 		overflow: hidden;
 		text-overflow: ellipsis;
 		white-space: nowrap;
@@ -315,6 +323,8 @@ export const Prefix = styled.span`
 `;
 
 export const Suffix = styled.span`
+	align-items: center;
+	align-self: stretch;
 	box-sizing: border-box;
-	display: block;
+	display: flex;
 `;

package/src/input-control/types.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type {
 	CSSProperties,
 	ReactNode,
@@ -23,12 +22,14 @@ export type DragDirection = 'n' | 's' | 'e' | 'w';
 
 export type DragProps = Parameters< Parameters< typeof useDrag >[ 0 ] >[ 0 ];
 
+export type Size = 'default' | 'small' | '__unstable-large';
+
 interface BaseProps {
 	__unstableInputWidth?: CSSProperties[ 'width' ];
 	hideLabelFromVision?: boolean;
 	isFocused: boolean;
 	labelPosition?: LabelPosition;
-	size?: 'default' | 'small';
+	size?: Size;
 }
 
 export type InputChangeCallback<

package/src/item-group/item/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

package/src/item-group/item/hook.ts

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { ElementType } from 'react';
 
 /**
@@ -49,7 +48,7 @@ export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
 				spacedAround && styles.spacedAround,
 				className
 			),
-		[ as, className, size, spacedAround ]
+		[ as, className, cx, size, spacedAround ]
 	);
 
 	const wrapperClassName = cx( styles.itemWrapper );

package/src/item-group/item-group/component.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-// eslint-disable-next-line no-restricted-imports
 import type { Ref } from 'react';
 
 /**

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

@@ -4,15 +4,20 @@
  * External dependencies
  */
 import { boolean, select } from '@storybook/addon-knobs';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 
 /**
  * WordPress dependencies
  */
-import { typography } from '@wordpress/icons';
+import { typography, chevronRight } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import { isRTL } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
+import { useCx } from '../../utils';
 import { ItemGroup, Item } from '..';
 import Button from '../../button';
 import { FlexItem, FlexBlock } from '../../flex';
@@ -27,7 +32,7 @@ export default {
 	component: ItemGroup,
 	title: 'Components (Experimental)/ItemGroup',
 	parameters: {
-		knobs: { disabled: false },
+		knobs: { disable: false },
 	},
 };
 
@@ -117,6 +122,58 @@ const SimpleColorSwatch = ( { color, style } ) => (
 	/>
 );
 
+const ChevronWrapper = styled( FlexItem )`
+	display: block;
+	fill: currentColor;
+	transition: transform 0.15s ease-out;
+`;
+
+const ItemWithChevron = ( {
+	children,
+	className,
+	alwaysVisible,
+	...otherProps
+} ) => {
+	const isRtlLayout = isRTL();
+	const cx = useCx();
+
+	const appearingChevron = css`
+		&:not( :hover ):not( :focus ) ${ ChevronWrapper } {
+			display: none;
+		}
+	`;
+
+	const itemClassName = useMemo(
+		() => cx( ! alwaysVisible && appearingChevron, className ),
+		[ alwaysVisible, className, cx ]
+	);
+
+	const chevronIconClassName = useMemo(
+		() =>
+			cx( css`
+				display: block;
+				fill: currentColor;
+				transform: ${ isRtlLayout ? 'scaleX( -100% )' : 'none' };
+			` ),
+		[ cx, isRtlLayout ]
+	);
+
+	return (
+		<Item { ...otherProps } className={ itemClassName }>
+			<HStack justify="flex-start">
+				<FlexBlock>{ children }</FlexBlock>
+				<ChevronWrapper>
+					<Icon
+						className={ chevronIconClassName }
+						icon={ chevronRight }
+						size={ 24 }
+					/>
+				</ChevronWrapper>
+			</HStack>
+		</Item>
+	);
+};
+
 export const complexLayouts = () => {
 	const colors = [
 		{
@@ -177,6 +234,31 @@ export const complexLayouts = () => {
 					</FlexItem>
 				</HStack>
 			</Item>
+
+			<ItemWithChevron onClick={ () => alert( 'Single color setting' ) }>
+				<HStack justify="flex-start">
+					<SimpleColorSwatch
+						color="#2FB63F"
+						style={ { flexShrink: 0 } }
+					/>
+
+					<Truncate>Chevron on hover and focus</Truncate>
+				</HStack>
+			</ItemWithChevron>
+
+			<ItemWithChevron
+				alwaysVisible
+				onClick={ () => alert( 'Single color setting' ) }
+			>
+				<HStack justify="flex-start">
+					<SimpleColorSwatch
+						color="#D175D0"
+						style={ { flexShrink: 0 } }
+					/>
+
+					<Truncate>Chevron always visible</Truncate>
+				</HStack>
+			</ItemWithChevron>
 		</ItemGroup>
 	);
 };

package/src/menu-item/README.md

@@ -67,10 +67,10 @@ Whether or not the menu item is currently selected.
 
 ### `shortcut`
 
--   Type: `string`
+-   Type: `string` or `object`
 -   Required: No
 
-Refer to documentation for [Shortcut's `shortcut` prop](/packages/components/src/shortcut/README.md#shortcut).
+If shortcut is a string, it is expecting the display text. If shortcut is an object, it will accept the properties of `display` (string) and `ariaLabel` (string).
 
 ### `role`
 

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

@@ -32,6 +32,8 @@ export const BottomSheetContext = createContext( {
 	// Android only: Function called to control android hardware back button functionality
 	// Return true if the bottom-sheet default close action shouldn't be called
 	onHandleHardwareButtonPress: () => {},
+	// Toggle full-screen styles and dimensions
+	setIsFullScreen: () => {},
 } );
 
 export const {

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

@@ -16,7 +16,6 @@ import {
 	Children,
 	useRef,
 	cloneElement,
-	Platform,
 } from '@wordpress/element';
 
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
@@ -88,26 +87,21 @@ function BottomSheetNavigationContainer( {
 
 	const setHeight = useCallback(
 		( height ) => {
-			// The screen is fullHeight or changing from fullScreen to the default mode
+			// The screen is fullHeight
 			if (
-				( typeof currentHeight === 'string' &&
-					typeof height !== 'string' ) ||
-				typeof height === 'string'
+				typeof height === 'string' &&
+				typeof height !== typeof currentHeight
 			) {
-				// Animating the opacity for the initial modal results in the backdrop
-				// provided by react-native-modal to never transition from transparent
-				// to partially opaque black. The core issue was not idenfited, but it
-				// may relate to the experimental state of LayoutAnimation for Android.
-				// https://reactnative.dev/docs/layoutanimation
-				if ( ! Platform.isAndroid || currentHeight !== 1 ) {
-					performLayoutAnimation( ANIMATION_DURATION );
-				}
+				performLayoutAnimation( ANIMATION_DURATION );
 				setCurrentHeight( height );
 
 				return;
 			}
 
-			if ( height > 1 ) {
+			if (
+				height > 1 &&
+				Math.round( height ) !== Math.round( currentHeight )
+			) {
 				if ( currentHeight === 1 ) {
 					setCurrentHeight( height );
 				} else if ( animate ) {

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

@@ -27,6 +27,7 @@ const BottomSheetNavigationScreen = ( {
 	fullScreen,
 	isScrollable,
 	isNested,
+	name,
 } ) => {
 	const navigation = useNavigation();
 	const heightRef = useRef( { maxHeight: 0 } );
@@ -56,6 +57,25 @@ const BottomSheetNavigationScreen = ( {
 				onHandleHardwareButtonPress( null );
 				return false;
 			} );
+			/**
+			 * TODO: onHandleHardwareButtonPress stores a single value, which means
+			 * future invocations from sibling screens can replace the callback for
+			 * the currently active screen. Currently, the empty dependency array
+			 * passed to useCallback here is what prevents erroneous callback
+			 * replacements, but leveraging memoization to achieve this is brittle and
+			 * explicitly discouraged in the React documentation.
+			 * https://reactjs.org/docs/hooks-reference.html#usememo
+			 *
+			 * Ideally, we refactor onHandleHardwareButtonPress to manage multiple
+			 * callbacks triggered based upon which screen is currently active.
+			 *
+			 * Related: https://git.io/JD2no
+			 */
+		}, [] )
+	);
+
+	useFocusEffect(
+		useCallback( () => {
 			if ( fullScreen ) {
 				setHeight( '100%' );
 				setIsFullScreen( true );
@@ -64,8 +84,9 @@ const BottomSheetNavigationScreen = ( {
 				setHeight( heightRef.current.maxHeight );
 			}
 			return () => {};
-		}, [] )
+		}, [ setHeight ] )
 	);
+
 	const onLayout = ( { nativeEvent } ) => {
 		if ( fullScreen ) {
 			return;
@@ -77,13 +98,22 @@ const BottomSheetNavigationScreen = ( {
 			setHeightDebounce( height );
 		}
 	};
+
 	return useMemo( () => {
 		return isScrollable || isNested ? (
-			<View onLayout={ onLayout }>{ children }</View>
+			<View
+				onLayout={ onLayout }
+				testID={ `navigation-screen-${ name }` }
+			>
+				{ children }
+			</View>
 		) : (
 			<ScrollView { ...listProps }>
 				<TouchableHighlight accessible={ false }>
-					<View onLayout={ onLayout }>
+					<View
+						onLayout={ onLayout }
+						testID={ `navigation-screen-${ name }` }
+					>
 						{ children }
 						{ ! isNested && (
 							<View

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

@@ -0,0 +1,162 @@
+/**
+ * External dependencies
+ */
+import { Text } from 'react-native';
+import { render, fireEvent, waitFor, act } from 'test/helpers';
+import { useNavigation } from '@react-navigation/native';
+
+/**
+ * Internal dependencies
+ */
+import NavigationContainer from '../navigation-container';
+import NavigationScreen from '../navigation-screen';
+import { performLayoutAnimation } from '../../../layout-animation';
+
+jest.mock( '../../../layout-animation', () => ( {
+	performLayoutAnimation: jest.fn(),
+} ) );
+
+const TestScreen = ( { fullScreen, name, navigateTo } ) => {
+	const navigation = useNavigation();
+	return (
+		<NavigationScreen fullScreen={ fullScreen } name={ name }>
+			<Text onPress={ () => navigation.navigate( navigateTo ) }>
+				{ name }
+			</Text>
+		</NavigationScreen>
+	);
+};
+
+jest.useFakeTimers( 'legacy' );
+
+it( 'animates height transitioning from non-full-screen to full-screen', async () => {
+	const screen = render(
+		<NavigationContainer main animate>
+			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+			<TestScreen
+				name="test-screen-2"
+				navigateTo="test-screen-1"
+				fullScreen
+			/>
+		</NavigationContainer>
+	);
+
+	// Await navigation screen to allow async state updates to complete
+	const navigationScreen = await waitFor( () =>
+		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	);
+	// Trigger non-full-screen layout event
+	act( () => {
+		fireEvent( navigationScreen, 'layout', {
+			nativeEvent: {
+				layout: {
+					height: 123,
+				},
+			},
+		} );
+		// Trigger debounced setting of height after layout event
+		jest.advanceTimersByTime( 10 );
+	} );
+	// Navigate to screen 2
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-1/ ) )
+	);
+	// Await navigation screen to allow async state updates to complete
+	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+
+	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
+} );
+
+it( 'animates height transitioning from full-screen to non-full-screen', async () => {
+	const screen = render(
+		<NavigationContainer main animate>
+			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+			<TestScreen
+				name="test-screen-2"
+				navigateTo="test-screen-1"
+				fullScreen
+			/>
+		</NavigationContainer>
+	);
+
+	// Await navigation screen to allow async state updates to complete
+	const navigationScreen = await waitFor( () =>
+		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	);
+	// Trigger non-full-screen layout event
+	act( () => {
+		fireEvent( navigationScreen, 'layout', {
+			nativeEvent: {
+				layout: {
+					height: 123,
+				},
+			},
+		} );
+		// Trigger debounced setting of height after layout event
+		jest.advanceTimersByTime( 10 );
+	} );
+	// Navigate to screen 2
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-1/ ) )
+	);
+	// Navigate to screen 1
+	fireEvent.press(
+		// Use custom waitFor due to https://git.io/JYYGE
+		await waitFor( () => screen.getByText( /test-screen-2/ ) )
+	);
+	// Await navigation screen to allow async state updates to complete
+	await waitFor( () => screen.getByText( /test-screen-1/ ) );
+
+	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 2 );
+} );
+
+it( 'does not animate height transitioning from full-screen to full-screen', async () => {
+	const screen = render(
+		<NavigationContainer main animate>
+			<TestScreen name="test-screen-1" navigateTo="test-screen-2" />
+			<TestScreen
+				name="test-screen-2"
+				navigateTo="test-screen-3"
+				fullScreen
+			/>
+			<TestScreen
+				name="test-screen-3"
+				navigateTo="test-screen-2"
+				fullScreen
+			/>
+		</NavigationContainer>
+	);
+
+	// Await navigation screen to allow async state updates to complete
+	const navigationScreen = await waitFor( () =>
+		screen.getByTestId( 'navigation-screen-test-screen-1' )
+	);
+	// Trigger non-full-screen layout event
+	act( () => {
+		fireEvent( navigationScreen, 'layout', {
+			nativeEvent: {
+				layout: {
+					height: 123,
+				},
+			},
+		} );
+		// Trigger debounced setting of height after layout event
+		jest.advanceTimersByTime( 10 );
+	} );
+	// Navigate to screen 2
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-1/ ) )
+	);
+	// Navigate to screen 3
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-2/ ) )
+	);
+	// Navigate to screen 2
+	fireEvent.press(
+		await waitFor( () => screen.getByText( /test-screen-3/ ) )
+	);
+	// Await navigation screen to allow async state updates to complete
+	await waitFor( () => screen.getByText( /test-screen-2/ ) );
+
+	expect( performLayoutAnimation ).toHaveBeenCalledTimes( 1 );
+} );

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

@@ -52,7 +52,7 @@ class BottomSheetCell extends Component {
 
 	componentDidMount() {
 		this.isCurrent = true;
-		AccessibilityInfo.addEventListener(
+		this.a11yInfoChangeSubscription = AccessibilityInfo.addEventListener(
 			'screenReaderChanged',
 			this.handleScreenReaderToggled
 		);
@@ -68,10 +68,7 @@ class BottomSheetCell extends Component {
 
 	componentWillUnmount() {
 		this.isCurrent = false;
-		AccessibilityInfo.removeEventListener(
-			'screenReaderChanged',
-			this.handleScreenReaderToggled
-		);
+		this.a11yInfoChangeSubscription.remove();
 	}
 
 	handleScreenReaderToggled( isScreenReaderEnabled ) {
@@ -359,7 +356,12 @@ class BottomSheetCell extends Component {
 					<View style={ rowContainerStyles }>
 						<View style={ styles.cellRowContainer }>
 							{ icon && (
-								<View style={ styles.cellRowContainer }>
+								<View
+									style={ [
+										styles.cellRowContainer,
+										styles.cellRowIcon,
+									] }
+								>
 									<Icon
 										icon={ icon }
 										size={ 24 }