@wordpress/components 19.14.0 → 19.17.0

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

@@ -7,7 +7,7 @@ import type { ForwardedRef } from 'react';
  * WordPress dependencies
  */
 import { useInstanceId } from '@wordpress/compose';
-import { forwardRef } from '@wordpress/element';
+import { forwardRef, useMemo } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -20,8 +20,10 @@ import {
 	Prefix,
 	Suffix,
 	LabelWrapper,
+	getSizeConfig,
 } from './styles/input-control-styles';
 import type { InputBaseProps, LabelPosition } from './types';
+import { ContextSystemProvider } from '../ui/context';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -52,6 +54,7 @@ function getUIFlexProps( labelPosition?: LabelPosition ) {
 
 export function InputBase(
 	{
+		__next36pxDefaultSize,
 		__unstableInputWidth,
 		children,
 		className,
@@ -71,6 +74,17 @@ export function InputBase(
 	const id = useUniqueId( idProp );
 	const hideLabel = hideLabelFromVision || ! label;
 
+	const { paddingLeft, paddingRight } = getSizeConfig( {
+		inputSize: size,
+		__next36pxDefaultSize,
+	} );
+	const prefixSuffixContextValue = useMemo( () => {
+		return {
+			InputControlPrefixWrapper: { paddingLeft },
+			InputControlSuffixWrapper: { paddingRight },
+		};
+	}, [ paddingLeft, paddingRight ] );
+
 	return (
 		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
@@ -87,7 +101,6 @@ export function InputBase(
 					hideLabelFromVision={ hideLabelFromVision }
 					labelPosition={ labelPosition }
 					htmlFor={ id }
-					size={ size }
 				>
 					{ label }
 				</Label>
@@ -99,17 +112,19 @@ export function InputBase(
 				hideLabel={ hideLabel }
 				labelPosition={ labelPosition }
 			>
-				{ prefix && (
-					<Prefix className="components-input-control__prefix">
-						{ prefix }
-					</Prefix>
-				) }
-				{ children }
-				{ suffix && (
-					<Suffix className="components-input-control__suffix">
-						{ suffix }
-					</Suffix>
-				) }
+				<ContextSystemProvider value={ prefixSuffixContextValue }>
+					{ prefix && (
+						<Prefix className="components-input-control__prefix">
+							{ prefix }
+						</Prefix>
+					) }
+					{ children }
+					{ suffix && (
+						<Suffix className="components-input-control__suffix">
+							{ suffix }
+						</Suffix>
+					) }
+				</ContextSystemProvider>
 				<Backdrop disabled={ disabled } isFocused={ isFocused } />
 			</Container>
 		</Root>

package/src/input-control/input-prefix-wrapper.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '../spacer';
+import {
+	WordPressComponentProps,
+	contextConnect,
+	useContextSystem,
+} from '../ui/context';
+import type { InputControlPrefixWrapperProps } from './types';
+
+function UnconnectedInputControlPrefixWrapper(
+	props: WordPressComponentProps< InputControlPrefixWrapperProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const derivedProps = useContextSystem( props, 'InputControlPrefixWrapper' );
+
+	return (
+		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+	);
+}
+
+/**
+ * A convenience wrapper for the `prefix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalInputControl as InputControl,
+ *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+ * />
+ * ```
+ */
+export const InputControlPrefixWrapper = contextConnect(
+	UnconnectedInputControlPrefixWrapper,
+	'InputControlPrefixWrapper'
+);
+
+export default InputControlPrefixWrapper;

package/src/input-control/input-suffix-wrapper.tsx

@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import type { ForwardedRef } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import { Spacer } from '../spacer';
+import {
+	WordPressComponentProps,
+	contextConnect,
+	useContextSystem,
+} from '../ui/context';
+import type { InputControlSuffixWrapperProps } from './types';
+
+function UnconnectedInputControlSuffixWrapper(
+	props: WordPressComponentProps< InputControlSuffixWrapperProps, 'div' >,
+	forwardedRef: ForwardedRef< any >
+) {
+	const derivedProps = useContextSystem( props, 'InputControlSuffixWrapper' );
+
+	return (
+		<Spacer marginBottom={ 0 } { ...derivedProps } ref={ forwardedRef } />
+	);
+}
+
+/**
+ * A convenience wrapper for the `suffix` when you want to apply
+ * standard padding in accordance with the size variant.
+ *
+ * ```jsx
+ * import {
+ *   __experimentalInputControl as InputControl,
+ *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+ * } from '@wordpress/components';
+ *
+ * <InputControl
+ *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+ * />
+ * ```
+ */
+export const InputControlSuffixWrapper = contextConnect(
+	UnconnectedInputControlSuffixWrapper,
+	'InputControlSuffixWrapper'
+);
+
+export default InputControlSuffixWrapper;

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

@@ -7,10 +7,13 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  * Internal dependencies
  */
 import InputControl from '..';
+import { InputControlPrefixWrapper } from '../input-prefix-wrapper';
+import { InputControlSuffixWrapper } from '../input-suffix-wrapper';
 
 const meta: ComponentMeta< typeof InputControl > = {
 	title: 'Components (Experimental)/InputControl',
 	component: InputControl,
+	subcomponents: { InputControlPrefixWrapper, InputControlSuffixWrapper },
 	argTypes: {
 		__unstableInputWidth: { control: { type: 'text' } },
 		__unstableStateReducer: { control: { type: null } },
@@ -37,16 +40,26 @@ Default.args = {
 	placeholder: 'Placeholder',
 };
 
+/**
+ * A `prefix` can be inserted before the input. By default, the prefix is aligned with the edge of the input border,
+ * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
+ * `<InputControlPrefixWrapper>` convenience wrapper.
+ */
 export const WithPrefix = Template.bind( {} );
 WithPrefix.args = {
 	...Default.args,
-	prefix: <span style={ { paddingLeft: 8 } }>@</span>,
+	prefix: <InputControlPrefixWrapper>@</InputControlPrefixWrapper>,
 };
 
+/**
+ * A `suffix` can be inserted after the input. By default, the suffix is aligned with the edge of the input border,
+ * with no padding. If you want to apply standard padding in accordance with the size variant, use the provided
+ * `<InputControlSuffixWrapper>` convenience wrapper.
+ */
 export const WithSuffix = Template.bind( {} );
 WithSuffix.args = {
 	...Default.args,
-	suffix: <button style={ { marginRight: 4 } }>Send</button>,
+	suffix: <InputControlSuffixWrapper>%</InputControlSuffixWrapper>,
 };
 
 export const WithSideLabel = Template.bind( {} );

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

@@ -11,8 +11,9 @@ 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';
 
 type ContainerProps = {
 	disabled?: boolean;
@@ -110,6 +111,8 @@ type InputProps = {
 	inputSize?: Size;
 	isDragging?: boolean;
 	dragCursor?: CSSProperties[ 'cursor' ];
+	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
+	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
 };
 
 const disabledStyles = ( { disabled }: InputProps ) => {
@@ -141,31 +144,32 @@ const fontSizeStyles = ( { inputSize: size }: InputProps ) => {
 	`;
 };
 
-const sizeStyles = ( {
+export const getSizeConfig = ( {
 	inputSize: size,
 	__next36pxDefaultSize,
 }: InputProps ) => {
+	// Paddings may be overridden by the custom paddings props.
 	const sizes = {
 		default: {
 			height: 36,
 			lineHeight: 1,
 			minHeight: 36,
-			paddingLeft: 16,
-			paddingRight: 16,
+			paddingLeft: space( 4 ),
+			paddingRight: space( 4 ),
 		},
 		small: {
 			height: 24,
 			lineHeight: 1,
 			minHeight: 24,
-			paddingLeft: 8,
-			paddingRight: 8,
+			paddingLeft: space( 2 ),
+			paddingRight: space( 2 ),
 		},
 		'__unstable-large': {
 			height: 40,
 			lineHeight: 1,
 			minHeight: 40,
-			paddingLeft: 16,
-			paddingRight: 16,
+			paddingLeft: space( 4 ),
+			paddingRight: space( 4 ),
 		},
 	};
 
@@ -174,14 +178,23 @@ const sizeStyles = ( {
 			height: 30,
 			lineHeight: 1,
 			minHeight: 30,
-			paddingLeft: 8,
-			paddingRight: 8,
+			paddingLeft: space( 2 ),
+			paddingRight: space( 2 ),
 		};
 	}
 
-	const style = sizes[ size as Size ] || sizes.default;
+	return sizes[ size as Size ] || sizes.default;
+};
 
-	return css( style );
+const sizeStyles = ( props: InputProps ) => {
+	return css( getSizeConfig( props ) );
+};
+
+const customPaddings = ( {
+	paddingInlineStart,
+	paddingInlineEnd,
+}: InputProps ) => {
+	return css( { paddingInlineStart, paddingInlineEnd } );
 };
 
 const dragStyles = ( { isDragging, dragCursor }: InputProps ) => {
@@ -235,6 +248,7 @@ export const Input = styled.input< InputProps >`
 		${ disabledStyles }
 		${ fontSizeStyles }
 		${ sizeStyles }
+		${ customPaddings }
 
 		&::-webkit-input-placeholder {
 			line-height: normal;
@@ -258,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/input-control/types.ts

@@ -102,6 +102,8 @@ export interface InputFieldProps extends BaseProps {
 		nextValue: string,
 		event?: SyntheticEvent< HTMLInputElement >
 	) => void;
+	paddingInlineStart?: CSSProperties[ 'paddingInlineStart' ];
+	paddingInlineEnd?: CSSProperties[ 'paddingInlineEnd' ];
 	setIsFocused: ( isFocused: boolean ) => void;
 	stateReducer?: StateReducer;
 	/**
@@ -123,10 +125,38 @@ export interface InputBaseProps extends BaseProps, FlexProps {
 	children: ReactNode;
 	/**
 	 * Renders an element on the left side of the input.
+	 *
+	 * By default, the prefix is aligned with the edge of the input border, with no padding.
+	 * If you want to apply standard padding in accordance with the size variant, wrap the element in
+	 * the provided `<InputControlPrefixWrapper>` component.
+	 *
+	 * @example
+	 * import {
+	 *   __experimentalInputControl as InputControl,
+	 *   __experimentalInputControlPrefixWrapper as InputControlPrefixWrapper,
+	 * } from '@wordpress/components';
+	 *
+	 * <InputControl
+	 *   prefix={<InputControlPrefixWrapper>@</InputControlPrefixWrapper>}
+	 * />
 	 */
 	prefix?: ReactNode;
 	/**
 	 * Renders an element on the right side of the input.
+	 *
+	 * By default, the suffix is aligned with the edge of the input border, with no padding.
+	 * If you want to apply standard padding in accordance with the size variant, wrap the element in
+	 * the provided `<InputControlSuffixWrapper>` component.
+	 *
+	 * @example
+	 * import {
+	 *   __experimentalInputControl as InputControl,
+	 *   __experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
+	 * } from '@wordpress/components';
+	 *
+	 * <InputControl
+	 *   suffix={<InputControlSuffixWrapper>%</InputControlSuffixWrapper>}
+	 * />
 	 */
 	suffix?: ReactNode;
 	/**
@@ -152,12 +182,17 @@ export interface InputControlProps
 		 * be the only prefix prop. Otherwise it tries to do a union of the two prefix properties and you end up
 		 * with an unresolvable type.
 		 *
-		 * `isFocused` and `setIsFocused` are managed internally by the InputControl, but the rest of the props
-		 * for InputField are passed through.
+		 * `isFocused`, `setIsFocused`, `paddingInlineStart`, and `paddingInlineEnd` are managed internally by
+		 * the InputControl, but the rest of the props for InputField are passed through.
 		 */
 		Omit<
 			WordPressComponentProps< InputFieldProps, 'input', false >,
-			'stateReducer' | 'prefix' | 'isFocused' | 'setIsFocused'
+			| 'stateReducer'
+			| 'prefix'
+			| 'isFocused'
+			| 'setIsFocused'
+			| 'paddingInlineStart'
+			| 'paddingInlineEnd'
 		> {
 	__unstableStateReducer?: InputFieldProps[ 'stateReducer' ];
 }
@@ -168,3 +203,17 @@ export interface InputControlLabelProps {
 	labelPosition?: BaseProps[ 'labelPosition' ];
 	size?: BaseProps[ 'size' ];
 }
+
+export type InputControlPrefixWrapperProps = {
+	/**
+	 * The prefix to be inserted.
+	 */
+	children: ReactNode;
+};
+
+export type InputControlSuffixWrapperProps = {
+	/**
+	 * The suffix to be inserted.
+	 */
+	children: ReactNode;
+};

package/src/menu-item/index.js

@@ -3,7 +3,6 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { isString } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -41,7 +40,7 @@ export function MenuItem( props, ref ) {
 		);
 	}
 
-	if ( icon && ! isString( icon ) ) {
+	if ( icon && typeof icon !== 'string' ) {
 		icon = cloneElement( icon, {
 			className: classnames( 'components-menu-items__item-icon', {
 				'has-icon-right': iconPosition === 'right',

package/src/mobile/focal-point-settings-panel/index.native.js

@@ -8,7 +8,7 @@ import { useRoute, useNavigation } from '@react-navigation/native';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { memo, useContext, useState } from '@wordpress/element';
+import { memo, useContext, useState, useCallback } from '@wordpress/element';
 import { BottomSheetContext, FocalPointPicker } from '@wordpress/components';
 
 /**
@@ -56,7 +56,7 @@ const FocalPointSettingsPanelMemo = memo(
 				</NavBar>
 				<FocalPointPicker
 					focalPoint={ draftFocalPoint }
-					onChange={ setPosition }
+					onChange={ useCallback( setPosition, [] ) }
 					shouldEnableBottomSheetScroll={
 						shouldEnableBottomSheetScroll
 					}