Finish making InputControl et al. more controllable

packages/components/src/input-control/reducer/actions.ts

@@ -20,7 +20,7 @@ export const PRESS_UP = 'PRESS_UP';
 export const RESET = 'RESET';
 
 interface EventPayload {
-	event?: SyntheticEvent;
+	event: SyntheticEvent;
 }
 
 interface Action< Type, ExtraPayload = {} > {

packages/components/src/input-control/reducer/reducer.ts

@@ -52,6 +52,14 @@ function inputControlStateReducer(
 	composedStateReducers: StateReducer
 ): StateReducer {
 	return ( state, action ) => {
+		// Updates state and returns early when there's no action type. These
+		// are controlled updates and need no exposure to additional reducers.
+		if ( ! ( 'type' in action ) ) {
+			return {
+				...state,
+				value: `${ action.value ?? '' }`,
+			};
+		}
 		const nextState = { ...state };
 
 		switch ( action.type ) {
@@ -98,7 +106,7 @@ function inputControlStateReducer(
 			case actions.RESET:
 				nextState.error = null;
 				nextState.isDirty = false;
-				nextState.value = action.payload.value || state.initialValue;
+				nextState.value = action.payload.value ?? state.initialValue;
 				break;
 
 			/**
@@ -109,10 +117,6 @@ function inputControlStateReducer(
 				break;
 		}
 
-		if ( action.payload.event ) {
-			nextState._event = action.payload.event;
-		}
-
 		/**
 		 * Send the nextState + action to the composedReducers via
 		 * this "bridge" mechanism. This allows external stateReducers
@@ -151,15 +155,7 @@ export function useInputControlStateReducer(
 		nextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],
 		event: actions.ChangeEventAction[ 'payload' ][ 'event' ]
 	) => {
-		/**
-		 * Persist allows for the (Synthetic) event to be used outside of
-		 * this function call.
-		 * https://reactjs.org/docs/events.html#event-pooling
-		 */
-		if ( event && event.persist ) {
-			event.persist();
-		}
-
+		refEvent.current = event;
 		dispatch( {
 			type,
 			payload: { value: nextValue, event },
@@ -169,30 +165,25 @@ export function useInputControlStateReducer(
 	const createKeyEvent = ( type: actions.KeyEventAction[ 'type' ] ) => (
 		event: actions.KeyEventAction[ 'payload' ][ 'event' ]
 	) => {
-		/**
-		 * Persist allows for the (Synthetic) event to be used outside of
-		 * this function call.
-		 * https://reactjs.org/docs/events.html#event-pooling
-		 */
-		if ( event && event.persist ) {
-			event.persist();
-		}
-
+		refEvent.current = event;
 		dispatch( { type, payload: { event } } );
 	};
 
 	const createDragEvent = ( type: actions.DragEventAction[ 'type' ] ) => (
 		payload: actions.DragEventAction[ 'payload' ]
 	) => {
+		refEvent.current = payload.event;
 		dispatch( { type, payload } );
 	};
 
 	/**
 	 * Actions for the reducer
 	 */
 	const change = createChangeEvent( actions.CHANGE );
-	const invalidate = ( error: unknown, event: SyntheticEvent ) =>
+	const invalidate = ( error: unknown, event: SyntheticEvent ) => {
+		refEvent.current = event;
 		dispatch( { type: actions.INVALIDATE, payload: { error, event } } );
+	};
 	const reset = createChangeEvent( actions.RESET );
 	const commit = createChangeEvent( actions.COMMIT );
 
@@ -206,17 +197,19 @@ export function useInputControlStateReducer(
 
 	const currentState = useRef( state );
 	const currentValueProp = useRef( initialState.value );
+	const refEvent = useRef< SyntheticEvent | null >( null );
 	useLayoutEffect( () => {
 		currentState.current = state;
 		currentValueProp.current = initialState.value;
 	} );
 	useLayoutEffect( () => {
 		if (
+			refEvent.current &&
 			state.value !== currentValueProp.current &&
 			! currentState.current.isDirty
 		) {
 			onChangeHandler( state.value ?? '', {
-				event: currentState.current._event as
+				event: refEvent.current as
 					| ChangeEvent< HTMLInputElement >
 					| PointerEvent< HTMLInputElement >,
 			} );
@@ -227,11 +220,9 @@ export function useInputControlStateReducer(
 			initialState.value !== currentState.current.value &&
 			! currentState.current.isDirty
 		) {
-			reset(
-				initialState.value,
-				currentState.current._event as SyntheticEvent
-			);
+			dispatch( { value: initialState.value } );
 		}
+		if ( refEvent.current ) refEvent.current = null;
 	}, [ initialState.value ] );
 
 	return {

packages/components/src/input-control/reducer/state.ts

@@ -9,22 +9,24 @@ import type { Reducer } from 'react';
 import type { InputAction } from './actions';
 
 export interface InputState {
-	_event: Event | {};
 	error: unknown;
-	initialValue?: string;
+	initialValue: string;
 	isDirty: boolean;
 	isDragEnabled: boolean;
 	isDragging: boolean;
 	isPressEnterToChange: boolean;
-	value?: string;
+	value: string;
 }
 
-export type StateReducer = Reducer< InputState, InputAction >;
+export type StateReducer = Reducer<
+	InputState,
+	InputAction | Partial< InputState >
+>;
+export type SecondaryReducer = Reducer< InputState, InputAction >;
 
 export const initialStateReducer: StateReducer = ( state: InputState ) => state;
 
 export const initialInputControlState: InputState = {
-	_event: {},
 	error: null,
 	initialValue: '',
 	isDirty: false,

packages/components/src/range-control/index.js

@@ -18,8 +18,8 @@ import { useInstanceId } from '@wordpress/compose';
 import BaseControl from '../base-control';
 import Button from '../button';
 import Icon from '../icon';
-import { COLORS } from '../utils';
-import { floatClamp, useControlledRangeValue } from './utils';
+import { COLORS, useControlledState } from '../utils';
+import { useUnimpededRangedNumberEntry } from './utils';
 import InputRange from './input-range';
 import RangeRail from './rail';
 import SimpleTooltip from './tooltip';
@@ -70,13 +70,10 @@ function RangeControl(
 	},
 	ref
 ) {
-	const [ value, setValue ] = useControlledRangeValue( {
-		min,
-		max,
-		value: valueProp,
-		initial: initialPosition,
-	} );
 	const isResetPendent = useRef( false );
+	const [ value, setValue ] = useControlledState( valueProp, {
+		fallback: null,
+	} );
 
 	if ( step === 'any' ) {
 		// The tooltip and number input field are hidden when the step is "any"
@@ -102,15 +99,15 @@ function RangeControl(
 	const isThumbFocused = ! disabled && isFocused;
 
 	const isValueReset = value === null;
-	const currentValue = value !== undefined ? value : currentInput;
+	const usedValue = isValueReset
+		? resetFallbackValue ?? initialPosition
+		: value ?? currentInput;
 
-	const inputSliderValue = isValueReset ? '' : currentValue;
-
-	const rangeFillValue = isValueReset ? ( max - min ) / 2 + min : value;
-
-	const calculatedFillValue = ( ( value - min ) / ( max - min ) ) * 100;
-	const fillValue = isValueReset ? 50 : calculatedFillValue;
-	const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
+	const fillPercent = `${
+		usedValue === null || usedValue === undefined
+			? 50
+			: ( ( clamp( usedValue, min, max ) - min ) / ( max - min ) ) * 100
+	}%`;
 
 	const classes = classnames( 'components-range-control', className );
 
@@ -129,23 +126,20 @@ function RangeControl(
 		onChange( nextValue );
 	};
 
-	const handleOnChange = ( nextValue ) => {
-		nextValue = parseFloat( nextValue );
-		setValue( nextValue );
-		/*
-		 * Calls onChange only when nextValue is numeric
-		 * otherwise may queue a reset for the blur event.
-		 */
-		if ( ! isNaN( nextValue ) ) {
-			if ( nextValue < min || nextValue > max ) {
-				nextValue = floatClamp( nextValue, min, max );
+	const someNumberInputProps = useUnimpededRangedNumberEntry( {
+		max,
+		min,
+		value: usedValue ?? '',
+		onChange: ( nextValue ) => {
+			if ( ! isNaN( nextValue ) ) {
+				setValue( nextValue );
+				onChange( nextValue );
+				isResetPendent.current = false;
+			} else if ( allowReset ) {
+				isResetPendent.current = true;
 			}
-			onChange( nextValue );
-			isResetPendent.current = false;
-		} else if ( allowReset ) {
-			isResetPendent.current = true;
-		}
-	};
+		},
+	} );
 
 	const handleOnInputNumberBlur = () => {
 		if ( isResetPendent.current ) {
@@ -155,30 +149,20 @@ function RangeControl(
 	};
 
 	const handleOnReset = () => {
-		let resetValue = parseFloat( resetFallbackValue );
-		let onChangeResetValue = resetValue;
+		const resetValue = parseFloat( resetFallbackValue );
 
 		if ( isNaN( resetValue ) ) {
-			resetValue = null;
-			onChangeResetValue = undefined;
+			setValue( null );
+			/*
+			 * If the value is reset without a resetFallbackValue, the onChange
+			 * callback receives undefined as that was the behavior when the
+			 * component was stablized.
+			 */
+			onChange( undefined );
+		} else {
+			setValue( resetValue );
+			onChange( resetValue );
 		}
-
-		setValue( resetValue );
-
-		/**
-		 * Previously, this callback would always receive undefined as
-		 * an argument. This behavior is unexpected, specifically
-		 * when resetFallbackValue is defined.
-		 *
-		 * The value of undefined is not ideal. Passing it through
-		 * to internal <input /> elements would change it from a
-		 * controlled component to an uncontrolled component.
-		 *
-		 * For now, to minimize unexpected regressions, we're going to
-		 * preserve the undefined callback argument, except when a
-		 * resetFallbackValue is defined.
-		 */
-		onChange( onChangeResetValue );
 	};
 
 	const handleShowTooltip = () => setShowTooltip( true );
@@ -197,7 +181,7 @@ function RangeControl(
 	};
 
 	const offsetStyle = {
-		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
+		[ isRTL() ? 'right' : 'left' ]: fillPercent,
 	};
 
 	return (
@@ -235,7 +219,7 @@ function RangeControl(
 						onMouseLeave={ onMouseLeave }
 						ref={ setRef }
 						step={ step }
-						value={ inputSliderValue }
+						value={ usedValue ?? '' }
 					/>
 					<RangeRail
 						aria-hidden={ true }
@@ -245,13 +229,13 @@ function RangeControl(
 						min={ min }
 						railColor={ railColor }
 						step={ step }
-						value={ rangeFillValue }
+						value={ usedValue }
 					/>
 					<Track
 						aria-hidden={ true }
 						className="components-range-control__track"
 						disabled={ disabled }
-						style={ { width: fillValueOffset } }
+						style={ { width: fillPercent } }
 						trackColor={ trackColor }
 					/>
 					<ThumbWrapper style={ offsetStyle } disabled={ disabled }>
@@ -285,13 +269,10 @@ function RangeControl(
 						disabled={ disabled }
 						inputMode="decimal"
 						isShiftStepEnabled={ isShiftStepEnabled }
-						max={ max }
-						min={ min }
 						onBlur={ handleOnInputNumberBlur }
-						onChange={ handleOnChange }
 						shiftStep={ shiftStep }
 						step={ step }
-						value={ inputSliderValue }
+						{ ...someNumberInputProps }
 					/>
 				) }
 				{ allowReset && (

packages/components/src/range-control/rail.js

@@ -16,7 +16,7 @@ export default function RangeRail( {
 	min = 0,
 	max = 100,
 	step = 1,
-	value = 0,
+	value,
 	...restProps
 } ) {
 	return (
@@ -29,7 +29,7 @@ export default function RangeRail( {
 					min={ min }
 					max={ max }
 					step={ step }
-					value={ value }
+					value={ value ?? ( max - min ) / 2 + min }
 				/>
 			) }
 		</>