@wordpress/components 25.0.0 → 25.1.1

package/src/unit-control/index.tsx

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import type {
-	FocusEventHandler,
-	KeyboardEvent,
-	ForwardedRef,
-	SyntheticEvent,
-} from 'react';
+import type { KeyboardEvent, ForwardedRef, SyntheticEvent } from 'react';
 import classnames from 'classnames';
 
 /**
@@ -20,7 +15,6 @@ import { __ } from '@wordpress/i18n';
  * Internal dependencies
  */
 import type { WordPressComponentProps } from '../ui/context';
-import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { ValueInput } from './styles/unit-control-styles';
 import UnitSelectControl from './unit-select-control';
 import {
@@ -31,7 +25,6 @@ import {
 } from './utils';
 import { useControlledState } from '../utils/hooks';
 import type { UnitControlProps, UnitControlOnChangeCallback } from './types';
-import type { StateReducer } from '../input-control/reducer/state';
 
 function UnforwardedUnitControl(
 	unitControlProps: WordPressComponentProps<
@@ -42,7 +35,7 @@ function UnforwardedUnitControl(
 	forwardedRef: ForwardedRef< any >
 ) {
 	const {
-		__unstableStateReducer: stateReducerProp,
+		__unstableStateReducer,
 		autoComplete = 'off',
 		// @ts-expect-error Ensure that children is omitted from restProps
 		children,
@@ -59,7 +52,6 @@ function UnforwardedUnitControl(
 		unit: unitProp,
 		units: unitsProp = CSS_UNITS,
 		value: valueProp,
-		onBlur: onBlurProp,
 		onFocus: onFocusProp,
 		...props
 	} = unitControlProps;
@@ -76,10 +68,19 @@ function UnforwardedUnitControl(
 	// ensures it fallback to `undefined` in case a consumer of `UnitControl`
 	// still passes `null` as a `value`.
 	const nonNullValueProp = valueProp ?? undefined;
-	const units = useMemo(
-		() => getUnitsWithCurrentUnit( nonNullValueProp, unitProp, unitsProp ),
-		[ nonNullValueProp, unitProp, unitsProp ]
-	);
+	const [ units, reFirstCharacterOfUnits ] = useMemo( () => {
+		const list = getUnitsWithCurrentUnit(
+			nonNullValueProp,
+			unitProp,
+			unitsProp
+		);
+		const [ { value: firstUnitValue = '' } = {}, ...rest ] = list;
+		const firstCharacters = rest.reduce( ( carry, { value } ) => {
+			const first = value?.substring( 0, 1 ) || '';
+			return carry.includes( first ) ? carry : `${ carry }|${ first }`;
+		}, firstUnitValue.substring( 0, 1 ) );
+		return [ list, new RegExp( `^(?:${ firstCharacters })$`, 'i' ) ];
+	}, [ nonNullValueProp, unitProp, unitsProp ] );
 	const [ parsedQuantity, parsedUnit ] = getParsedQuantityAndUnit(
 		nonNullValueProp,
 		unitProp,
@@ -100,9 +101,6 @@ function UnforwardedUnitControl(
 		}
 	}, [ parsedUnit, setUnit ] );
 
-	// Stores parsed value for hand-off in state reducer.
-	const refParsedQuantity = useRef< number | undefined >( undefined );
-
 	const classes = classnames(
 		'components-unit-control',
 		// This class is added for legacy purposes to maintain it on the outer
@@ -158,85 +156,22 @@ function UnforwardedUnitControl(
 		setUnit( nextUnitValue );
 	};
 
-	const mayUpdateUnit = ( event: SyntheticEvent< HTMLInputElement > ) => {
-		if ( ! isNaN( Number( event.currentTarget.value ) ) ) {
-			refParsedQuantity.current = undefined;
-			return;
-		}
-		const [ validParsedQuantity, validParsedUnit ] =
-			getValidParsedQuantityAndUnit(
-				event.currentTarget.value,
-				units,
-				parsedQuantity,
-				unit
-			);
-
-		refParsedQuantity.current = validParsedQuantity;
-
-		if ( isPressEnterToChange && validParsedUnit !== unit ) {
-			const data = Array.isArray( units )
-				? units.find( ( option ) => option.value === validParsedUnit )
-				: undefined;
-			const changeProps = { event, data };
-
-			// The `onChange` callback already gets called, no need to call it explicitly.
-			onUnitChange?.( validParsedUnit, changeProps );
-
-			setUnit( validParsedUnit );
-		}
-	};
-
-	const handleOnBlur: FocusEventHandler< HTMLInputElement > = ( event ) => {
-		mayUpdateUnit( event );
-		onBlurProp?.( event );
-	};
-
-	const handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
-		const { key } = event;
-		if ( key === 'Enter' ) {
-			mayUpdateUnit( event );
-		}
-	};
-
-	/**
-	 * "Middleware" function that intercepts updates from InputControl.
-	 * This allows us to tap into actions to transform the (next) state for
-	 * InputControl.
-	 *
-	 * @param state  State from InputControl
-	 * @param action Action triggering state change
-	 * @return The updated state to apply to InputControl
-	 */
-	const unitControlStateReducer: StateReducer = ( state, action ) => {
-		const nextState = { ...state };
-
-		/*
-		 * On commits (when pressing ENTER and on blur if
-		 * isPressEnterToChange is true), if a parse has been performed
-		 * then use that result to update the state.
-		 */
-		if ( action.type === inputControlActionTypes.COMMIT ) {
-			if ( refParsedQuantity.current !== undefined ) {
-				nextState.value = (
-					refParsedQuantity.current ?? ''
-				).toString();
-				refParsedQuantity.current = undefined;
-			}
-		}
-
-		return nextState;
-	};
-
-	let stateReducer: StateReducer = unitControlStateReducer;
-	if ( stateReducerProp ) {
-		stateReducer = ( state, action ) => {
-			const baseState = unitControlStateReducer( state, action );
-			return stateReducerProp( baseState, action );
+	let handleOnKeyDown;
+	if ( ! disableUnits && isUnitSelectTabbable && units.length ) {
+		handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
+			props.onKeyDown?.( event );
+			// Unless the meta key was pressed (to avoid interfering with
+			// shortcuts, e.g. pastes), moves focus to the unit select if a key
+			// matches the first character of a unit.
+			if ( ! event.metaKey && reFirstCharacterOfUnits.test( event.key ) )
+				refInputSuffix.current?.focus();
 		};
 	}
 
+	const refInputSuffix = useRef< HTMLSelectElement >( null );
 	const inputSuffix = ! disableUnits ? (
 		<UnitSelectControl
+			ref={ refInputSuffix }
 			aria-label={ __( 'Select unit' ) }
 			disabled={ disabled }
 			isUnitSelectTabbable={ isUnitSelectTabbable }
@@ -244,8 +179,8 @@ function UnforwardedUnitControl(
 			size={ size }
 			unit={ unit }
 			units={ units }
-			onBlur={ onBlurProp }
 			onFocus={ onFocusProp }
+			onBlur={ unitControlProps.onBlur }
 		/>
 	) : null;
 
@@ -262,7 +197,6 @@ function UnforwardedUnitControl(
 
 	return (
 		<ValueInput
-			type={ isPressEnterToChange ? 'text' : 'number' }
 			{ ...props }
 			autoComplete={ autoComplete }
 			className={ classes }
@@ -270,16 +204,16 @@ function UnforwardedUnitControl(
 			spinControls="none"
 			isPressEnterToChange={ isPressEnterToChange }
 			label={ label }
-			onBlur={ handleOnBlur }
 			onKeyDown={ handleOnKeyDown }
 			onChange={ handleOnQuantityChange }
 			ref={ forwardedRef }
 			size={ size }
 			suffix={ inputSuffix }
+			type={ isPressEnterToChange ? 'text' : 'number' }
 			value={ parsedQuantity ?? '' }
 			step={ step }
-			__unstableStateReducer={ stateReducer }
 			onFocus={ onFocusProp }
+			__unstableStateReducer={ __unstableStateReducer }
 		/>
 	);
 }

package/src/unit-control/stories/index.tsx

@@ -69,10 +69,6 @@ export const PressEnterToChange: ComponentStory< typeof UnitControl > =
 PressEnterToChange.args = {
 	...Default.args,
 	isPressEnterToChange: true,
-	onChange: ( v ) => {
-		// eslint-disable-next-line no-console
-		console.log( v );
-	},
 };
 
 /**