@wordpress/components 19.16.0 → 19.17.0

package/src/form-token-field/index.tsx

@@ -34,6 +34,7 @@ import { TokensAndInputWrapperFlex } from './styles';
 import SuggestionsList from './suggestions-list';
 import type { FormTokenFieldProps, TokenItem } from './types';
 import { FlexItem } from '../flex';
+import { StyledLabel } from '../base-control/styles/base-control-styles';
 
 const identity = ( value: string ) => value;
 
@@ -72,6 +73,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 			remove: __( 'Remove item' ),
 			__experimentalInvalid: __( 'Invalid item' ),
 		},
+		__experimentalRenderItem,
 		__experimentalExpandOnFocus = false,
 		__experimentalValidateInput = () => true,
 		__experimentalShowHowTo = true,
@@ -659,12 +661,12 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	/* eslint-disable jsx-a11y/no-static-element-interactions */
 	return (
 		<div { ...tokenFieldProps }>
-			<label
+			<StyledLabel
 				htmlFor={ `components-form-token-input-${ instanceId }` }
 				className="components-form-token-field__label"
 			>
 				{ label }
-			</label>
+			</StyledLabel>
 			<div
 				ref={ tokensAndInput }
 				className={ classes }
@@ -692,6 +694,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 						scrollIntoView={ selectedSuggestionScroll }
 						onHover={ onSuggestionHovered }
 						onSelect={ onSuggestionSelected }
+						__experimentalRenderItem={ __experimentalRenderItem }
 					/>
 				) }
 			</div>

package/src/form-token-field/stories/index.tsx

@@ -101,3 +101,17 @@ Async.args = {
 	label: 'Type a continent',
 	suggestions: continents,
 };
+
+/**
+ * The rendered output of each suggestion can be customized by passing a
+ * render function to the `__experimentalRenderItem` prop. (This is still an experimental feature
+ * and is subject to change.)
+ */
+export const WithCustomRenderItem: ComponentStory< typeof FormTokenField > =
+	DefaultTemplate.bind( {} );
+WithCustomRenderItem.args = {
+	...Default.args,
+	__experimentalRenderItem: ( { item } ) => (
+		<div>{ `${ item } — a nice place to visit` }</div>
+	),
+};

package/src/form-token-field/style.scss

@@ -48,11 +48,6 @@
 	}
 }
 
-.components-form-token-field__label {
-	display: inline-block;
-	margin-bottom: $grid-unit-10;
-}
-
 .components-form-token-field__help {
 	font-size: $helptext-font-size;
 	font-style: normal;

package/src/form-token-field/suggestions-list.tsx

@@ -4,7 +4,7 @@
 import { map } from 'lodash';
 import scrollView from 'dom-scroll-into-view';
 import classnames from 'classnames';
-import type { MouseEventHandler } from 'react';
+import type { MouseEventHandler, ReactNode } from 'react';
 
 /**
  * WordPress dependencies
@@ -31,6 +31,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 	suggestions = [],
 	displayTransform,
 	instanceId,
+	__experimentalRenderItem,
 }: SuggestionsListProps< T > ) {
 	const [ scrollingIntoView, setScrollingIntoView ] = useState( false );
 
@@ -122,6 +123,24 @@ export function SuggestionsList< T extends string | { value: string } >( {
 					}
 				);
 
+				let output: ReactNode;
+
+				if ( typeof __experimentalRenderItem === 'function' ) {
+					output = __experimentalRenderItem( { item: suggestion } );
+				} else if ( matchText ) {
+					output = (
+						<span aria-label={ displayTransform( suggestion ) }>
+							{ matchText.suggestionBeforeMatch }
+							<strong className="components-form-token-field__suggestion-match">
+								{ matchText.suggestionMatch }
+							</strong>
+							{ matchText.suggestionAfterMatch }
+						</span>
+					);
+				} else {
+					output = displayTransform( suggestion );
+				}
+
 				/* eslint-disable jsx-a11y/click-events-have-key-events */
 				return (
 					<li
@@ -139,17 +158,7 @@ export function SuggestionsList< T extends string | { value: string } >( {
 						onMouseEnter={ handleHover( suggestion ) }
 						aria-selected={ index === selectedIndex }
 					>
-						{ matchText ? (
-							<span aria-label={ displayTransform( suggestion ) }>
-								{ matchText.suggestionBeforeMatch }
-								<strong className="components-form-token-field__suggestion-match">
-									{ matchText.suggestionMatch }
-								</strong>
-								{ matchText.suggestionAfterMatch }
-							</span>
-						) : (
-							displayTransform( suggestion )
-						) }
+						{ output }
 					</li>
 				);
 				/* eslint-enable jsx-a11y/click-events-have-key-events */

package/src/form-token-field/types.ts

@@ -1,7 +1,11 @@
 /**
  * External dependencies
  */
-import type { ComponentPropsWithRef, MouseEventHandler } from 'react';
+import type {
+	ComponentPropsWithRef,
+	MouseEventHandler,
+	ReactNode,
+} from 'react';
 
 type Messages = {
 	/**
@@ -154,9 +158,18 @@ export interface FormTokenFieldProps
 	 * @default false
 	 */
 	__next36pxDefaultSize?: boolean;
+	/**
+	 * Custom renderer for suggestions.
+	 */
+	__experimentalRenderItem?: ( args: { item: string } ) => ReactNode;
 }
 
-export interface SuggestionsListProps< T = string | { value: string } > {
+/**
+ * `T` can be either a `string` or an object which must have a `value` prop as a string.
+ */
+export interface SuggestionsListProps<
+	T = string | ( Record< string, unknown > & { value: string } )
+> {
 	selectedIndex: number;
 	scrollIntoView: boolean;
 	match: T;
@@ -165,6 +178,7 @@ export interface SuggestionsListProps< T = string | { value: string } > {
 	suggestions: T[];
 	displayTransform: ( value: T ) => string;
 	instanceId: string | number;
+	__experimentalRenderItem?: ( args: { item: T } ) => ReactNode;
 }
 
 export interface TokenProps extends TokenItem {

package/src/index.js

@@ -30,7 +30,10 @@ export {
 	isEmptyBorder as __experimentalIsEmptyBorder,
 } from './border-box-control';
 export { BorderControl as __experimentalBorderControl } from './border-control';
-export { default as __experimentalBoxControl } from './box-control';
+export {
+	default as __experimentalBoxControl,
+	applyValueToSides as __experimentalApplyValueToSides,
+} from './box-control';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './button-group';
 export {

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

@@ -101,7 +101,6 @@ export function InputBase(
 					hideLabelFromVision={ hideLabelFromVision }
 					labelPosition={ labelPosition }
 					htmlFor={ id }
-					size={ size }
 				>
 					{ label }
 				</Label>

package/src/input-control/reducer/actions.ts

@@ -10,6 +10,7 @@ import type { DragProps } from '../types';
 
 export const CHANGE = 'CHANGE';
 export const COMMIT = 'COMMIT';
+export const CONTROL = 'CONTROL';
 export const DRAG_END = 'DRAG_END';
 export const DRAG_START = 'DRAG_START';
 export const DRAG = 'DRAG';
@@ -23,7 +24,7 @@ interface EventPayload {
 	event?: SyntheticEvent;
 }
 
-interface Action< Type, ExtraPayload = {} > {
+export interface Action< Type = string, ExtraPayload = {} > {
 	type: Type;
 	payload: EventPayload & ExtraPayload;
 }
@@ -34,6 +35,7 @@ interface ValuePayload {
 
 export type ChangeAction = Action< typeof CHANGE, ValuePayload >;
 export type CommitAction = Action< typeof COMMIT, ValuePayload >;
+export type ControlAction = Action< typeof CONTROL, ValuePayload >;
 export type PressUpAction = Action< typeof PRESS_UP >;
 export type PressDownAction = Action< typeof PRESS_DOWN >;
 export type PressEnterAction = Action< typeof PRESS_ENTER >;

package/src/input-control/reducer/reducer.ts

@@ -39,22 +39,32 @@ function mergeInitialState(
 }
 
 /**
- * Creates a reducer that opens the channel for external state subscription
- * and modification.
+ * Creates the base reducer which may be coupled to a specializing reducer.
+ * As its final step, for all actions other than CONTROL, the base reducer
+ * passes the state and action on through the specializing reducer. The
+ * exception for CONTROL actions is because they represent controlled updates
+ * from props and no case has yet presented for their specialization.
  *
- * This technique uses the "stateReducer" design pattern:
- * https://kentcdodds.com/blog/the-state-reducer-pattern/
- *
- * @param  composedStateReducers A custom reducer that can subscribe and modify state.
+ * @param  composedStateReducers A reducer to specialize state changes.
  * @return The reducer.
  */
 function inputControlStateReducer(
 	composedStateReducers: StateReducer
-): StateReducer {
+): StateReducer< actions.ControlAction > {
 	return ( state, action ) => {
 		const nextState = { ...state };
 
 		switch ( action.type ) {
+			/*
+			 * Controlled updates
+			 */
+			case actions.CONTROL:
+				nextState.value = action.payload.value;
+				nextState.isDirty = false;
+				nextState._event = undefined;
+				// Returns immediately to avoid invoking additional reducers.
+				return nextState;
+
 			/**
 			 * Keyboard events
 			 */
@@ -140,7 +150,7 @@ export function useInputControlStateReducer(
 	initialState: Partial< InputState > = initialInputControlState,
 	onChangeHandler: InputChangeCallback
 ) {
-	const [ state, dispatch ] = useReducer< StateReducer >(
+	const [ state, dispatch ] = useReducer(
 		inputControlStateReducer( stateReducer ),
 		mergeInitialState( initialState )
 	);
@@ -188,10 +198,15 @@ export function useInputControlStateReducer(
 
 	const currentState = useRef( state );
 	const refProps = useRef( { value: initialState.value, onChangeHandler } );
+
+	// Freshens refs to props and state so that subsequent effects have access
+	// to their latest values without their changes causing effect runs.
 	useLayoutEffect( () => {
 		currentState.current = state;
 		refProps.current = { value: initialState.value, onChangeHandler };
 	} );
+
+	// Propagates the latest state through onChange.
 	useLayoutEffect( () => {
 		if (
 			currentState.current._event !== undefined &&
@@ -205,14 +220,16 @@ export function useInputControlStateReducer(
 			} );
 		}
 	}, [ state.value, state.isDirty ] );
+
+	// Updates the state from props.
 	useLayoutEffect( () => {
 		if (
 			initialState.value !== currentState.current.value &&
 			! currentState.current.isDirty
 		) {
 			dispatch( {
-				type: actions.RESET,
-				payload: { value: initialState.value },
+				type: actions.CONTROL,
+				payload: { value: initialState.value ?? '' },
 			} );
 		}
 	}, [ initialState.value ] );

package/src/input-control/reducer/state.ts

@@ -6,7 +6,7 @@ import type { Reducer, SyntheticEvent } from 'react';
 /**
  * Internal dependencies
  */
-import type { InputAction } from './actions';
+import type { Action, InputAction } from './actions';
 
 export interface InputState {
 	_event?: SyntheticEvent;
@@ -19,7 +19,12 @@ export interface InputState {
 	value?: string;
 }
 
-export type StateReducer = Reducer< InputState, InputAction >;
+export type StateReducer< SpecializedAction = {} > = Reducer<
+	InputState,
+	SpecializedAction extends Action
+		? InputAction | SpecializedAction
+		: InputAction
+>;
 
 export const initialStateReducer: StateReducer = ( state: InputState ) => state;
 

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

@@ -11,7 +11,7 @@ import type { CSSProperties, ReactNode } from 'react';
 import type { WordPressComponentProps } from '../../ui/context';
 import { Flex, FlexItem } from '../../flex';
 import { Text } from '../../text';
-import { COLORS, rtl } from '../../utils';
+import { baseLabelTypography, COLORS, rtl } from '../../utils';
 import type { LabelPosition, Size } from '../types';
 import { space } from '../../ui/utils/space';
 
@@ -272,6 +272,8 @@ const labelMargin = ( {
 
 const BaseLabel = styled( Text )< { labelPosition?: LabelPosition } >`
 	&&& {
+		${ baseLabelTypography };
+
 		box-sizing: border-box;
 		display: block;
 		padding-top: 0;

package/src/input-control/test/index.js

@@ -85,9 +85,10 @@ describe( 'InputControl', () => {
 			expect( spy ).toHaveBeenLastCalledWith( 'Hello there' );
 		} );
 
-		it( 'should work as a controlled component', async () => {
+		it( 'should work as a controlled component given normal, falsy or nullish values', async () => {
 			const user = setupUser();
 			const spy = jest.fn();
+			const heldKeySet = new Set();
 			const Example = () => {
 				const [ state, setState ] = useState( 'one' );
 				const onChange = ( value ) => {
@@ -95,13 +96,21 @@ describe( 'InputControl', () => {
 					spy( value );
 				};
 				const onKeyDown = ( { key } ) => {
-					if ( key === 'Escape' ) setState( 'three' );
+					heldKeySet.add( key );
+					if ( key === 'Escape' ) {
+						if ( heldKeySet.has( 'Meta' ) ) setState( 'qux' );
+						else if ( heldKeySet.has( 'Alt' ) )
+							setState( undefined );
+						else setState( '' );
+					}
 				};
+				const onKeyUp = ( { key } ) => heldKeySet.delete( key );
 				return (
 					<InputControl
 						value={ state }
 						onChange={ onChange }
 						onKeyDown={ onKeyDown }
+						onKeyUp={ onKeyUp }
 					/>
 				);
 			};
@@ -109,10 +118,17 @@ describe( 'InputControl', () => {
 			const input = getInput();
 
 			await user.type( input, '2' );
-			// Make a controlled update.
+			// Make a controlled update with a falsy value.
 			await user.keyboard( '{Escape}' );
+			expect( input ).toHaveValue( '' );
 
-			expect( input ).toHaveValue( 'three' );
+			// Make a controlled update with a normal value.
+			await user.keyboard( '{Meta>}{Escape}{/Meta}' );
+			expect( input ).toHaveValue( 'qux' );
+
+			// Make a controlled update with a nullish value.
+			await user.keyboard( '{Alt>}{Escape}{/Alt}' );
+			expect( input ).toHaveValue( '' );
 			/*
 			 * onChange called only once. onChange is not called when a
 			 * parent component explicitly passed a (new value) change down to

package/src/mobile/global-styles-context/utils.native.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { find, startsWith, get, camelCase, has } from 'lodash';
+import { find, get, camelCase, has } from 'lodash';
 import { Dimensions } from 'react-native';
 
 /**
@@ -32,6 +32,7 @@ const BLOCK_STYLE_ATTRIBUTES_MAPPING = {
 
 const PADDING = 12; // $solid-border-space
 const UNKNOWN_VALUE = 'undefined';
+const DEFAULT_FONT_SIZE = 16;
 
 export function getBlockPaddings(
 	mergedStyle,
@@ -103,7 +104,7 @@ export function getBlockColors(
 
 	// Custom colors.
 	Object.entries( blockStyleAttributes ).forEach( ( [ key, value ] ) => {
-		const isCustomColor = startsWith( value, '#' );
+		const isCustomColor = value?.startsWith?.( '#' );
 		let styleKey = key;
 
 		if ( BLOCK_STYLE_ATTRIBUTES_MAPPING[ styleKey ] ) {
@@ -190,7 +191,7 @@ export function getBlockTypography(
 
 export function parseStylesVariables( styles, mappedValues, customValues ) {
 	let stylesBase = styles;
-	const variables = [ 'preset', 'custom', 'var' ];
+	const variables = [ 'preset', 'custom', 'var', 'fontSize' ];
 
 	if ( ! stylesBase ) {
 		return styles;
@@ -203,6 +204,7 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 		// var:preset|color|custom-color-2
 		const regex = new RegExp( `var\\(--wp--${ variable }--(.*?)\\)`, 'g' );
 		const varRegex = /\"var:preset\|color\|(.*?)\"/gm;
+		const fontSizeRegex = /"fontSize":"(.*?)"/gm;
 
 		if ( variable === 'preset' ) {
 			stylesBase = stylesBase.replace( regex, ( _$1, $2 ) => {
@@ -244,6 +246,21 @@ export function parseStylesVariables( styles, mappedValues, customValues ) {
 				return UNKNOWN_VALUE;
 			} );
 		}
+
+		if ( variable === 'fontSize' ) {
+			const { width, height } = Dimensions.get( 'window' );
+
+			stylesBase = stylesBase.replace( fontSizeRegex, ( _$1, $2 ) => {
+				const parsedFontSize =
+					getPxFromCssUnit( $2, {
+						width,
+						height,
+						fontSize: DEFAULT_FONT_SIZE,
+					} ) || `${ DEFAULT_FONT_SIZE }px`;
+
+				return `"fontSize":"${ parsedFontSize }"`;
+			} );
+		}
 	} );
 
 	return JSON.parse( stylesBase );
@@ -297,7 +314,7 @@ function normalizeFontSizes( fontSizes ) {
 						{
 							width: dimensions.width,
 							height: dimensions.height,
-							fontSize: 16,
+							fontSize: DEFAULT_FONT_SIZE,
 						}
 					);
 					return fontSizeObject;

package/src/mobile/image/index.native.js

@@ -1,7 +1,12 @@
 /**
  * External dependencies
  */
-import { Image as RNImage, Text, View } from 'react-native';
+import {
+	Image as RNImage,
+	Text,
+	View,
+	useWindowDimensions,
+} from 'react-native';
 import FastImage from 'react-native-fast-image';
 
 /**
@@ -11,7 +16,7 @@ import { __ } from '@wordpress/i18n';
 import { Icon } from '@wordpress/components';
 import { image as icon } from '@wordpress/icons';
 import { usePreferredColorSchemeStyle } from '@wordpress/compose';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useState, useRef, Platform } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -54,6 +59,10 @@ const ImageComponent = ( {
 } ) => {
 	const [ imageData, setImageData ] = useState( null );
 	const [ containerSize, setContainerSize ] = useState( null );
+	const [ shouldUseFallback, setShouldUseFallback ] = useState( false );
+	const { height: windowHeight, width: windowWidth } = useWindowDimensions();
+	const isLandscape = useRef( windowWidth > windowHeight );
+
 	const Image = ! shouldUseFastImage ? RNImage : FastImage;
 	const imageResizeMode = ! shouldUseFastImage
 		? resizeMode
@@ -80,6 +89,21 @@ const ImageComponent = ( {
 		return () => ( isCurrent = false );
 	}, [ url ] );
 
+	// Workaround for Android where changing the orientation breaks FastImage
+	// for now if there's any orientation changes, it will use the fallback
+	// prop to use the default Image component.
+	// https://github.com/WordPress/gutenberg/issues/42869
+	useEffect( () => {
+		if ( Platform.isAndroid && shouldUseFastImage ) {
+			const isCurrentOrientationLandscape = windowWidth > windowHeight;
+
+			if ( isLandscape.current !== isCurrentOrientationLandscape ) {
+				setShouldUseFallback( true );
+				isLandscape.current = isCurrentOrientationLandscape;
+			}
+		}
+	}, [ windowHeight, windowWidth ] );
+
 	const onContainerLayout = ( event ) => {
 		const { height, width } = event.nativeEvent.layout;
 
@@ -226,6 +250,7 @@ const ImageComponent = ( {
 								resizeMethod: 'scale',
 							} ) }
 							resizeMode={ imageResizeMode }
+							fallback={ shouldUseFallback }
 						/>
 					</View>
 				) }

package/src/mobile/link-picker/link-picker-screen.native.js

@@ -3,12 +3,11 @@
  */
 import { Keyboard } from 'react-native';
 import { useNavigation, useRoute } from '@react-navigation/native';
-import { delay } from 'lodash';
 
 /**
  * WordPress dependencies
  */
-import { useMemo } from '@wordpress/element';
+import { useEffect, useMemo, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,10 +17,12 @@ import { LinkPicker } from './';
 const LinkPickerScreen = ( { returnScreenName } ) => {
 	const navigation = useNavigation();
 	const route = useRoute();
+	const navigateToLinkTimeoutRef = useRef( null );
+	const navigateBackTimeoutRef = useRef( null );
 
 	const onLinkPicked = ( { url, title } ) => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateToLinkTimeoutRef.current = setTimeout( () => {
 			navigation.navigate( returnScreenName, {
 				inputValue: url,
 				text: title,
@@ -31,11 +32,18 @@ const LinkPickerScreen = ( { returnScreenName } ) => {
 
 	const onCancel = () => {
 		Keyboard.dismiss();
-		delay( () => {
+		navigateBackTimeoutRef.current = setTimeout( () => {
 			navigation.goBack();
 		}, 100 );
 	};
 
+	useEffect( () => {
+		return () => {
+			clearTimeout( navigateToLinkTimeoutRef.current );
+			clearTimeout( navigateBackTimeoutRef.current );
+		};
+	}, [] );
+
 	const { inputValue } = route.params;
 	return useMemo( () => {
 		return (

package/src/mobile/picker/index.ios.js

@@ -10,6 +10,12 @@ import { __ } from '@wordpress/i18n';
 import { Component, forwardRef, useContext } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { BottomSheetContext } from '@wordpress/components';
+import { usePreferredColorScheme } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import styles from './styles.scss';
 
 class Picker extends Component {
 	presentPicker() {
@@ -23,10 +29,16 @@ class Picker extends Component {
 			isBottomSheetOpened,
 			closeBottomSheet,
 			onHandleClosingBottomSheet,
+			colorScheme,
 		} = this.props;
 		const labels = options.map( ( { label } ) => label );
 		const fullOptions = [ __( 'Cancel' ) ].concat( labels );
 
+		const buttonTitleColor =
+			colorScheme === 'light'
+				? styles[ 'components-picker__button-title' ].color
+				: styles[ 'components-picker__button-title--dark' ].color;
+
 		ActionSheetIOS.showActionSheetWithOptions(
 			{
 				title,
@@ -35,6 +47,7 @@ class Picker extends Component {
 				destructiveButtonIndex,
 				disabledButtonIndices,
 				anchor: getAnchor && getAnchor(),
+				tintColor: buttonTitleColor,
 			},
 			( buttonIndex ) => {
 				if ( buttonIndex === 0 ) {
@@ -66,6 +79,8 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 	const { closeGeneralSidebar } = useDispatch( 'core/edit-post' );
 	const { onHandleClosingBottomSheet } = useContext( BottomSheetContext );
 
+	const colorScheme = usePreferredColorScheme();
+
 	return (
 		<Picker
 			ref={ ref }
@@ -73,6 +88,7 @@ const PickerComponent = forwardRef( ( props, ref ) => {
 			isBottomSheetOpened={ isBottomSheetOpened }
 			closeBottomSheet={ closeGeneralSidebar }
 			onHandleClosingBottomSheet={ onHandleClosingBottomSheet }
+			colorScheme={ colorScheme }
 		/>
 	);
 } );

package/src/mobile/picker/styles.native.scss

@@ -19,3 +19,11 @@
 	padding-left: 0;
 	padding-right: 0;
 }
+
+.components-picker__button-title {
+	color: $blue-50;
+}
+
+.components-picker__button-title--dark {
+	color: $blue-30;
+}

package/src/panel/style.scss

@@ -35,9 +35,12 @@
 	justify-content: space-between;
 	align-items: center;
 	padding: 0 $grid-unit-20;
-	height: $grid-unit-60;
 	border-bottom: $border-width solid $gray-300;
 
+	// This helps ensure the correct panel height, including the border, avoiding subpixel rounding issues.
+	box-sizing: content-box;
+	height: $grid-unit-60 - $border-width;
+
 	h2 {
 		margin: 0;
 		font-size: inherit;