@wordpress/components 19.6.1 → 19.8.0

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

@@ -17,7 +17,6 @@ import type {
  * WordPress dependencies
  */
 import { forwardRef, useRef } from '@wordpress/element';
-import { UP, DOWN, ENTER, ESCAPE } from '@wordpress/keycodes';
 /**
  * Internal dependencies
  */
@@ -68,7 +67,6 @@ function InputField(
 		pressEnter,
 		pressUp,
 		reset,
-		update,
 	} = useInputControlStateReducer( stateReducer, {
 		isDragEnabled,
 		value: valueProp,
@@ -92,10 +90,12 @@ function InputField(
 			return;
 		}
 		if ( ! isFocused && ! wasDirtyOnBlur.current ) {
-			update( valueProp, _event as SyntheticEvent );
+			commit( valueProp, _event as SyntheticEvent );
 		} else if ( ! isDirty ) {
 			onChange( value, {
-				event: _event as ChangeEvent< HTMLInputElement >,
+				event: _event as
+					| ChangeEvent< HTMLInputElement >
+					| PointerEvent< HTMLInputElement >,
 			} );
 			wasDirtyOnBlur.current = false;
 		}
@@ -109,7 +109,7 @@ function InputField(
 		 * If isPressEnterToChange is set, this commits the value to
 		 * the onChange callback.
 		 */
-		if ( isPressEnterToChange && isDirty ) {
+		if ( isDirty || ! event.target.validity.valid ) {
 			wasDirtyOnBlur.current = true;
 			handleOnCommit( event );
 		}
@@ -137,19 +137,19 @@ function InputField(
 	};
 
 	const handleOnKeyDown = ( event: KeyboardEvent< HTMLInputElement > ) => {
-		const { keyCode } = event;
+		const { key } = event;
 		onKeyDown( event );
 
-		switch ( keyCode ) {
-			case UP:
+		switch ( key ) {
+			case 'ArrowUp':
 				pressUp( event );
 				break;
 
-			case DOWN:
+			case 'ArrowDown':
 				pressDown( event );
 				break;
 
-			case ENTER:
+			case 'Enter':
 				pressEnter( event );
 
 				if ( isPressEnterToChange ) {
@@ -158,7 +158,7 @@ function InputField(
 				}
 				break;
 
-			case ESCAPE:
+			case 'Escape':
 				if ( isPressEnterToChange && isDirty ) {
 					event.preventDefault();
 					reset( valueProp, event );
@@ -169,7 +169,18 @@ function InputField(
 
 	const dragGestureProps = useDrag< PointerEvent< HTMLInputElement > >(
 		( dragProps ) => {
-			const { distance, dragging, event } = dragProps;
+			const { distance, dragging, event, target } = dragProps;
+
+			// The `target` prop always references the `input` element while, by
+			// default, the `dragProps.event.target` property would reference the real
+			// event target (i.e. any DOM element that the pointer is hovering while
+			// dragging). Ensuring that the `target` is always the `input` element
+			// allows consumers of `InputControl` (or any higher-level control) to
+			// check the input's validity by accessing `event.target.validity.valid`.
+			dragProps.event = {
+				...dragProps.event,
+				target,
+			};
 
 			if ( ! distance ) return;
 			event.stopPropagation();

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

@@ -18,7 +18,6 @@ export const PRESS_DOWN = 'PRESS_DOWN';
 export const PRESS_ENTER = 'PRESS_ENTER';
 export const PRESS_UP = 'PRESS_UP';
 export const RESET = 'RESET';
-export const UPDATE = 'UPDATE';
 
 interface EventPayload {
 	event?: SyntheticEvent;
@@ -42,14 +41,9 @@ export type DragStartAction = Action< typeof DRAG_START, DragProps >;
 export type DragEndAction = Action< typeof DRAG_END, DragProps >;
 export type DragAction = Action< typeof DRAG, DragProps >;
 export type ResetAction = Action< typeof RESET, Partial< ValuePayload > >;
-export type UpdateAction = Action< typeof UPDATE, ValuePayload >;
 export type InvalidateAction = Action< typeof INVALIDATE, { error: unknown } >;
 
-export type ChangeEventAction =
-	| ChangeAction
-	| ResetAction
-	| CommitAction
-	| UpdateAction;
+export type ChangeEventAction = ChangeAction | ResetAction | CommitAction;
 
 export type DragEventAction = DragStartAction | DragEndAction | DragAction;
 

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { isEmpty } from 'lodash';
 import type { SyntheticEvent } from 'react';
 
 /**
@@ -38,27 +37,6 @@ function mergeInitialState(
 	} as InputState;
 }
 
-/**
- * Composes multiple stateReducers into a single stateReducer, building
- * the pipeline to control the flow for state and actions.
- *
- * @param  fns State reducers.
- * @return The single composed stateReducer.
- */
-export const composeStateReducers = (
-	...fns: StateReducer[]
-): StateReducer => {
-	return ( ...args ) => {
-		return fns.reduceRight( ( state, fn ) => {
-			// TODO: Assess whether this can be replaced with a more standard `compose` implementation
-			// like wp.data.compose() (aka lodash flowRight) or Redux compose().
-			// The current implementation only works by functions mutating the original state object.
-			const fnState = fn( ...args );
-			return isEmpty( fnState ) ? state : { ...state, ...fnState };
-		}, {} as InputState );
-	};
-};
-
 /**
  * Creates a reducer that opens the channel for external state subscription
  * and modification.
@@ -122,11 +100,6 @@ function inputControlStateReducer(
 				nextState.value = action.payload.value || state.initialValue;
 				break;
 
-			case actions.UPDATE:
-				nextState.value = action.payload.value;
-				nextState.isDirty = false;
-				break;
-
 			/**
 			 * Validation
 			 */
@@ -219,7 +192,6 @@ export function useInputControlStateReducer(
 		dispatch( { type: actions.INVALIDATE, payload: { error, event } } );
 	const reset = createChangeEvent( actions.RESET );
 	const commit = createChangeEvent( actions.COMMIT );
-	const update = createChangeEvent( actions.UPDATE );
 
 	const dragStart = createDragEvent( actions.DRAG_START );
 	const drag = createDragEvent( actions.DRAG );
@@ -242,6 +214,5 @@ export function useInputControlStateReducer(
 		pressUp,
 		reset,
 		state,
-		update,
 	} as const;
 }

package/src/input-control/types.ts

@@ -6,6 +6,7 @@ import type {
 	ReactNode,
 	ChangeEvent,
 	SyntheticEvent,
+	PointerEvent,
 } from 'react';
 import type { useDrag } from '@use-gesture/react';
 
@@ -33,7 +34,7 @@ interface BaseProps {
 }
 
 export type InputChangeCallback<
-	E = ChangeEvent< HTMLInputElement >,
+	E = ChangeEvent< HTMLInputElement > | PointerEvent< HTMLInputElement >,
 	P = {}
 > = ( nextValue: string | undefined, extra: { event: E } & P ) => void;
 

package/src/item-group/styles.ts

@@ -36,6 +36,7 @@ export const item = css`
 	width: 100%;
 	display: block;
 	margin: 0;
+	color: inherit;
 `;
 
 export const bordered = css`

package/src/item-group/test/__snapshots__/index.js.snap

@@ -11,8 +11,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -24,8 +24,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-346xw3-View-large-item-spacedAround em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-10mizr-View-large-item-spacedAround em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -44,8 +44,8 @@ Snapshot Diff:
     role="listitem"
   >
     <div
--     class="components-item css-4qcpca-View-medium-item em57xhy0"
-+     class="components-item css-132y1d5-View-large-item em57xhy0"
+-     class="components-item css-bsdqin-View-medium-item em57xhy0"
++     class="components-item css-1ohjtsa-View-large-item em57xhy0"
       data-wp-c16t="true"
       data-wp-component="Item"
     >
@@ -78,6 +78,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
   width: 100%;
   display: block;
   margin: 0;
+  color: inherit;
   border-radius: 2px;
 }
 
@@ -120,8 +121,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-4qcpca-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-bsdqin-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >
@@ -147,8 +148,8 @@ Snapshot Diff:
       role="listitem"
     >
       <div
--       class="components-item css-2fnxcf-View-medium-item-spacedAround em57xhy0"
-+       class="components-item css-4qcpca-View-medium-item em57xhy0"
+-       class="components-item css-1uo9kmu-View-medium-item-spacedAround em57xhy0"
++       class="components-item css-bsdqin-View-medium-item em57xhy0"
         data-wp-c16t="true"
         data-wp-component="Item"
       >

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

@@ -78,7 +78,6 @@ export default class Picker extends Component {
 			<BottomSheet
 				isVisible={ isVisible }
 				onClose={ this.onClose }
-				style={ { paddingBottom: 20 } }
 				hideHeader
 				testID={ testID }
 			>

package/src/number-control/README.md

@@ -97,6 +97,20 @@ The minimum `value` allowed.
 -   Required: No
 -   Default: `-Infinity`
 
+### onChange
+
+Callback fired whenever the value of the input changes.
+
+The callback receives two arguments:
+
+1. `newValue`: the new value of the input
+2. `extra`: an object containing, under the `event` key, the original browser event.
+
+Note that the value received as the first argument of the callback is _not_ guaranteed to be a valid value (e.g. it could be outside of the range defined by the [`min`, `max`] props, or it could not match the `step`). In order to check the value's validity, check the `event.target?.validity.valid` property from the callback's second argument.
+
+-   Type: `(newValue, extra) => void`
+-   Required: No
+
 ### required
 
 If `true` enforces a valid number within the control's min/max range. If `false` allows an empty string as a valid value.

package/src/number-control/index.js

@@ -15,13 +15,12 @@ import { isRTL } from '@wordpress/i18n';
  */
 import { Input } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
-import { composeStateReducers } from '../input-control/reducer/reducer';
 import { add, subtract, roundClamp } from '../utils/math';
 import { isValueEmpty } from '../utils/values';
 
 export function NumberControl(
 	{
-		__unstableStateReducer: stateReducer = ( state ) => state,
+		__unstableStateReducer: stateReducerProp,
 		className,
 		dragDirection = 'n',
 		hideHTMLArrows = false,
@@ -62,9 +61,11 @@ export function NumberControl(
 	 * @return {Object} The updated state to apply to InputControl
 	 */
 	const numberControlStateReducer = ( state, action ) => {
+		const nextState = { ...state };
+
 		const { type, payload } = action;
 		const event = payload?.event;
-		const currentValue = state.value;
+		const currentValue = nextState.value;
 
 		/**
 		 * Handles custom UP and DOWN Keyboard events
@@ -94,7 +95,7 @@ export function NumberControl(
 				nextValue = subtract( nextValue, incrementalValue );
 			}
 
-			state.value = constrainValue(
+			nextState.value = constrainValue(
 				nextValue,
 				enableShift ? incrementalValue : null
 			);
@@ -139,7 +140,7 @@ export function NumberControl(
 				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
 				const distance = delta * modifier * directionModifier;
 
-				state.value = constrainValue(
+				nextState.value = constrainValue(
 					add( currentValue, distance ),
 					enableShift ? modifier : null
 				);
@@ -147,7 +148,7 @@ export function NumberControl(
 		}
 
 		/**
-		 * Handles commit (ENTER key press or on blur if isPressEnterToChange)
+		 * Handles commit (ENTER key press or blur)
 		 */
 		if (
 			type === inputControlActionTypes.PRESS_ENTER ||
@@ -155,12 +156,12 @@ export function NumberControl(
 		) {
 			const applyEmptyValue = required === false && currentValue === '';
 
-			state.value = applyEmptyValue
+			nextState.value = applyEmptyValue
 				? currentValue
 				: constrainValue( currentValue );
 		}
 
-		return state;
+		return nextState;
 	};
 
 	return (
@@ -180,10 +181,10 @@ export function NumberControl(
 			step={ step }
 			type={ typeProp }
 			value={ valueProp }
-			__unstableStateReducer={ composeStateReducers(
-				numberControlStateReducer,
-				stateReducer
-			) }
+			__unstableStateReducer={ ( state, action ) => {
+				const baseState = numberControlStateReducer( state, action );
+				return stateReducerProp?.( baseState, action ) ?? baseState;
+			} }
 		/>
 	);
 }

package/src/number-control/stories/index.js

@@ -23,6 +23,7 @@ export default {
 
 function Example() {
 	const [ value, setValue ] = useState( '0' );
+	const [ isValidValue, setIsValidValue ] = useState( true );
 
 	const props = {
 		disabled: boolean( 'disabled', false ),
@@ -32,18 +33,24 @@ function Example() {
 		label: text( 'label', 'Number' ),
 		min: number( 'min', 0 ),
 		max: number( 'max', 100 ),
-		placeholder: text( 'placeholder', 0 ),
+		placeholder: text( 'placeholder', '0' ),
 		required: boolean( 'required', false ),
 		shiftStep: number( 'shiftStep', 10 ),
-		step: text( 'step', 1 ),
+		step: text( 'step', '1' ),
 	};
 
 	return (
-		<NumberControl
-			{ ...props }
-			value={ value }
-			onChange={ ( v ) => setValue( v ) }
-		/>
+		<>
+			<NumberControl
+				{ ...props }
+				value={ value }
+				onChange={ ( v, extra ) => {
+					setValue( v );
+					setIsValidValue( extra.event.target.validity.valid );
+				} }
+			/>
+			<p>Is valid? { isValidValue ? 'Yes' : 'No' }</p>
+		</>
 	);
 }
 

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 
 /**
  * WordPress dependencies
@@ -63,6 +63,68 @@ describe( 'NumberControl', () => {
 
 			expect( spy ).toHaveBeenCalledWith( '10' );
 		} );
+
+		it( 'should call onChange callback when value is clamped on blur', async () => {
+			const spy = jest.fn();
+			render(
+				<NumberControl
+					value={ 5 }
+					min={ 4 }
+					max={ 10 }
+					onChange={ ( v ) => spy( v ) }
+				/>
+			);
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: 1 } } );
+
+			// Before blurring, the value is still un-clamped
+			expect( input.value ).toBe( '1' );
+
+			input.blur();
+
+			// After blur, value is clamped
+			expect( input.value ).toBe( '4' );
+
+			// After the blur, the `onChange` callback fires asynchronously.
+			await waitFor( () => {
+				expect( spy ).toHaveBeenCalledTimes( 2 );
+				expect( spy ).toHaveBeenNthCalledWith( 1, '1' );
+				expect( spy ).toHaveBeenNthCalledWith( 2, 4 );
+			} );
+		} );
+
+		it( 'should call onChange callback when value is not valid', () => {
+			const spy = jest.fn();
+			render(
+				<NumberControl
+					value={ 5 }
+					min={ 1 }
+					max={ 10 }
+					onChange={ ( v, extra ) =>
+						spy( v, extra.event.target.validity.valid )
+					}
+				/>
+			);
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: 14 } } );
+
+			expect( input.value ).toBe( '14' );
+
+			fireKeyDown( { keyCode: ENTER } );
+
+			expect( input.value ).toBe( '10' );
+
+			expect( spy ).toHaveBeenCalledTimes( 2 );
+
+			// First call: invalid, unclamped value
+			expect( spy ).toHaveBeenNthCalledWith( 1, '14', false );
+			// Second call: valid, clamped value
+			expect( spy ).toHaveBeenNthCalledWith( 2, 10, true );
+		} );
 	} );
 
 	describe( 'Validation', () => {
@@ -82,6 +144,22 @@ describe( 'NumberControl', () => {
 			expect( input.value ).toBe( '0' );
 		} );
 
+		it( 'should clamp value within range on blur', () => {
+			render( <NumberControl value={ 5 } min={ 0 } max={ 10 } /> );
+
+			const input = getInput();
+			input.focus();
+			fireEvent.change( input, { target: { value: 41 } } );
+
+			// Before blurring, the value is still un-clamped
+			expect( input.value ).toBe( '41' );
+
+			input.blur();
+
+			// After blur, value is clamped
+			expect( input.value ).toBe( '10' );
+		} );
+
 		it( 'should parse to number value on ENTER keypress when required', () => {
 			render( <NumberControl value={ 5 } required={ true } /> );