@wordpress/components 19.11.0 → 19.14.0

package/src/input-control/index.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classNames from 'classnames';
 import type { ForwardedRef } from 'react';
 
@@ -17,6 +16,9 @@ import { useState, forwardRef } from '@wordpress/element';
 import InputBase from './input-base';
 import InputField from './input-field';
 import type { InputControlProps } from './types';
+import { useDraft } from './utils';
+
+const noop = () => {};
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputControl );
@@ -52,6 +54,12 @@ export function UnforwardedInputControl(
 	const id = useUniqueId( idProp );
 	const classes = classNames( 'components-input-control', className );
 
+	const draftHookProps = useDraft( {
+		value,
+		onBlur: props.onBlur,
+		onChange,
+	} );
+
 	return (
 		<InputBase
 			__unstableInputWidth={ __unstableInputWidth }
@@ -75,14 +83,13 @@ export function UnforwardedInputControl(
 				id={ id }
 				isFocused={ isFocused }
 				isPressEnterToChange={ isPressEnterToChange }
-				onChange={ onChange }
 				onKeyDown={ onKeyDown }
 				onValidate={ onValidate }
 				ref={ ref }
 				setIsFocused={ setIsFocused }
 				size={ size }
 				stateReducer={ stateReducer }
-				value={ value }
+				{ ...draftHookProps }
 			/>
 		</InputBase>
 	);

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import { useDrag } from '@use-gesture/react';
 import type {
 	SyntheticEvent,
@@ -24,9 +23,10 @@ import type { WordPressComponentProps } from '../ui/context';
 import { useDragCursor } from './utils';
 import { Input } from './styles/input-control-styles';
 import { useInputControlStateReducer } from './reducer/reducer';
-import { useUpdateEffect } from '../utils';
 import type { InputFieldProps } from './types';
 
+const noop = () => {};
+
 function InputField(
 	{
 		disabled = false,
@@ -67,40 +67,21 @@ function InputField(
 		pressEnter,
 		pressUp,
 		reset,
-	} = useInputControlStateReducer( stateReducer, {
-		isDragEnabled,
-		value: valueProp,
-		isPressEnterToChange,
-	} );
+	} = useInputControlStateReducer(
+		stateReducer,
+		{
+			isDragEnabled,
+			value: valueProp,
+			isPressEnterToChange,
+		},
+		onChange
+	);
 
-	const { _event, value, isDragging, isDirty } = state;
+	const { value, isDragging, isDirty } = state;
 	const wasDirtyOnBlur = useRef( false );
 
 	const dragCursor = useDragCursor( isDragging, dragDirection );
 
-	/*
-	 * Handles synchronization of external and internal value state.
-	 * If not focused and did not hold a dirty value[1] on blur
-	 * updates the value from the props. Otherwise if not holding
-	 * a dirty value[1] propagates the value and event through onChange.
-	 * [1] value is only made dirty if isPressEnterToChange is true
-	 */
-	useUpdateEffect( () => {
-		if ( valueProp === value ) {
-			return;
-		}
-		if ( ! isFocused && ! wasDirtyOnBlur.current ) {
-			commit( valueProp, _event as SyntheticEvent );
-		} else if ( ! isDirty ) {
-			onChange( value, {
-				event: _event as
-					| ChangeEvent< HTMLInputElement >
-					| PointerEvent< HTMLInputElement >,
-			} );
-			wasDirtyOnBlur.current = false;
-		}
-	}, [ value, isDirty, isFocused, valueProp ] );
-
 	const handleOnBlur = ( event: FocusEvent< HTMLInputElement > ) => {
 		onBlur( event );
 		setIsFocused?.( false );

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

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import type { SyntheticEvent } from 'react';
+import type { SyntheticEvent, ChangeEvent, PointerEvent } from 'react';
 
 /**
  * WordPress dependencies
  */
-import { useReducer } from '@wordpress/element';
+import { useReducer, useLayoutEffect, useRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -18,6 +18,7 @@ import {
 	initialStateReducer,
 } from './state';
 import * as actions from './actions';
+import type { InputChangeCallback } from '../types';
 
 /**
  * Prepares initialState for the reducer.
@@ -108,9 +109,7 @@ function inputControlStateReducer(
 				break;
 		}
 
-		if ( action.payload.event ) {
-			nextState._event = action.payload.event;
-		}
+		nextState._event = action.payload.event;
 
 		/**
 		 * Send the nextState + action to the composedReducers via
@@ -131,58 +130,44 @@ function inputControlStateReducer(
  * This technique uses the "stateReducer" design pattern:
  * https://kentcdodds.com/blog/the-state-reducer-pattern/
  *
- * @param  stateReducer An external state reducer.
- * @param  initialState The initial state for the reducer.
+ * @param  stateReducer    An external state reducer.
+ * @param  initialState    The initial state for the reducer.
+ * @param  onChangeHandler A handler for the onChange event.
  * @return State, dispatch, and a collection of actions.
  */
 export function useInputControlStateReducer(
 	stateReducer: StateReducer = initialStateReducer,
-	initialState: Partial< InputState > = initialInputControlState
+	initialState: Partial< InputState > = initialInputControlState,
+	onChangeHandler: InputChangeCallback
 ) {
 	const [ state, dispatch ] = useReducer< StateReducer >(
 		inputControlStateReducer( stateReducer ),
 		mergeInitialState( initialState )
 	);
 
-	const createChangeEvent = ( type: actions.ChangeEventAction[ 'type' ] ) => (
-		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();
-		}
-
-		dispatch( {
-			type,
-			payload: { value: nextValue, event },
-		} as actions.InputAction );
-	};
-
-	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();
-		}
-
-		dispatch( { type, payload: { event } } );
-	};
-
-	const createDragEvent = ( type: actions.DragEventAction[ 'type' ] ) => (
-		payload: actions.DragEventAction[ 'payload' ]
-	) => {
-		dispatch( { type, payload } );
-	};
+	const createChangeEvent =
+		( type: actions.ChangeEventAction[ 'type' ] ) =>
+		(
+			nextValue: actions.ChangeEventAction[ 'payload' ][ 'value' ],
+			event: actions.ChangeEventAction[ 'payload' ][ 'event' ]
+		) => {
+			dispatch( {
+				type,
+				payload: { value: nextValue, event },
+			} as actions.InputAction );
+		};
+
+	const createKeyEvent =
+		( type: actions.KeyEventAction[ 'type' ] ) =>
+		( event: actions.KeyEventAction[ 'payload' ][ 'event' ] ) => {
+			dispatch( { type, payload: { event } } );
+		};
+
+	const createDragEvent =
+		( type: actions.DragEventAction[ 'type' ] ) =>
+		( payload: actions.DragEventAction[ 'payload' ] ) => {
+			dispatch( { type, payload } );
+		};
 
 	/**
 	 * Actions for the reducer
@@ -201,6 +186,37 @@ export function useInputControlStateReducer(
 	const pressDown = createKeyEvent( actions.PRESS_DOWN );
 	const pressEnter = createKeyEvent( actions.PRESS_ENTER );
 
+	const currentState = useRef( state );
+	const refProps = useRef( { value: initialState.value, onChangeHandler } );
+	useLayoutEffect( () => {
+		currentState.current = state;
+		refProps.current = { value: initialState.value, onChangeHandler };
+	} );
+	useLayoutEffect( () => {
+		if (
+			currentState.current._event !== undefined &&
+			state.value !== refProps.current.value &&
+			! state.isDirty
+		) {
+			refProps.current.onChangeHandler( state.value ?? '', {
+				event: currentState.current._event as
+					| ChangeEvent< HTMLInputElement >
+					| PointerEvent< HTMLInputElement >,
+			} );
+		}
+	}, [ state.value, state.isDirty ] );
+	useLayoutEffect( () => {
+		if (
+			initialState.value !== currentState.current.value &&
+			! currentState.current.isDirty
+		) {
+			dispatch( {
+				type: actions.RESET,
+				payload: { value: initialState.value },
+			} );
+		}
+	}, [ initialState.value ] );
+
 	return {
 		change,
 		commit,

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { Reducer } from 'react';
+import type { Reducer, SyntheticEvent } from 'react';
 
 /**
  * Internal dependencies
@@ -9,7 +9,7 @@ import type { Reducer } from 'react';
 import type { InputAction } from './actions';
 
 export interface InputState {
-	_event: Event | {};
+	_event?: SyntheticEvent;
 	error: unknown;
 	initialValue?: string;
 	isDirty: boolean;
@@ -24,7 +24,6 @@ export type StateReducer = Reducer< InputState, InputAction >;
 export const initialStateReducer: StateReducer = ( state: InputState ) => state;
 
 export const initialInputControlState: InputState = {
-	_event: {},
 	error: null,
 	initialValue: '',
 	isDirty: false,

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

@@ -1,13 +1,24 @@
 /**
  * External dependencies
  */
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import BaseInputControl from '../';
 
+const setupUser = () =>
+	userEvent.setup( {
+		advanceTimers: jest.advanceTimersByTime,
+	} );
+
 const getInput = () => screen.getByTestId( 'input' );
 
 describe( 'InputControl', () => {
@@ -42,49 +53,66 @@ describe( 'InputControl', () => {
 	} );
 
 	describe( 'Ensurance of focus for number inputs', () => {
-		it( 'should focus its input on mousedown events', () => {
+		it( 'should focus its input on mousedown events', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
 			render( <InputControl type="number" onFocus={ spy } /> );
+			const target = getInput();
 
-			const input = getInput();
-			fireEvent.mouseDown( input );
+			// Hovers the input and presses (without releasing) primary button.
+			await user.pointer( [
+				{ target },
+				{ keys: '[MouseLeft]', target },
+			] );
 
 			expect( spy ).toHaveBeenCalledTimes( 1 );
 		} );
 	} );
 
 	describe( 'Value', () => {
-		it( 'should update value onChange', () => {
+		it( 'should update value onChange', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
-			render( <InputControl value="Hello" onChange={ spy } /> );
-
+			render(
+				<InputControl value="Hello" onChange={ ( v ) => spy( v ) } />
+			);
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 'There' } } );
 
-			expect( input.value ).toBe( 'There' );
-			expect( spy ).toHaveBeenCalledTimes( 1 );
+			await user.type( input, ' there' );
+
+			expect( input ).toHaveValue( 'Hello there' );
+			expect( spy ).toHaveBeenCalledTimes( ' there'.length );
+			expect( spy ).toHaveBeenLastCalledWith( 'Hello there' );
 		} );
 
-		it( 'should work as a controlled component', () => {
+		it( 'should work as a controlled component', async () => {
+			const user = setupUser();
 			const spy = jest.fn();
-			const { rerender } = render(
-				<InputControl value="one" onChange={ spy } />
-			);
-
+			const Example = () => {
+				const [ state, setState ] = useState( 'one' );
+				const onChange = ( value ) => {
+					setState( value );
+					spy( value );
+				};
+				const onKeyDown = ( { key } ) => {
+					if ( key === 'Escape' ) setState( 'three' );
+				};
+				return (
+					<InputControl
+						value={ state }
+						onChange={ onChange }
+						onKeyDown={ onKeyDown }
+					/>
+				);
+			};
+			render( <Example /> );
 			const input = getInput();
 
-			input.focus();
-			fireEvent.change( input, { target: { value: 'two' } } );
-
-			// Ensuring <InputControl /> is controlled.
-			fireEvent.blur( input );
-
-			// Updating the value.
-			rerender( <InputControl value="three" onChange={ spy } /> );
-
-			expect( input.value ).toBe( 'three' );
+			await user.type( input, '2' );
+			// Make a controlled update.
+			await user.keyboard( '{Escape}' );
 
+			expect( input ).toHaveValue( 'three' );
 			/*
 			 * onChange called only once. onChange is not called when a
 			 * parent component explicitly passed a (new value) change down to
@@ -98,21 +126,68 @@ describe( 'InputControl', () => {
 			const { rerender } = render(
 				<InputControl value="Original" onChange={ spy } />
 			);
-
 			const input = getInput();
 
-			// Assuming <InputControl /> is controlled (not focused)
-
 			// Updating the value.
 			rerender( <InputControl value="New" onChange={ spy } /> );
 
-			expect( input.value ).toBe( 'New' );
+			expect( input ).toHaveValue( 'New' );
 
 			// Change it back to the original value.
 			rerender( <InputControl value="Original" onChange={ spy } /> );
 
-			expect( input.value ).toBe( 'Original' );
+			expect( input ).toHaveValue( 'Original' );
 			expect( spy ).toHaveBeenCalledTimes( 0 );
 		} );
+
+		it( 'should not commit value until blurred when isPressEnterToChange is true', async () => {
+			const user = setupUser();
+			const spy = jest.fn();
+			render(
+				<InputControl
+					value=""
+					onChange={ ( v ) => spy( v ) }
+					isPressEnterToChange
+				/>
+			);
+			const input = getInput();
+
+			await user.type( input, 'that was then' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( spy ).toHaveBeenCalledTimes( 1 );
+			expect( spy ).toHaveBeenCalledWith( 'that was then' );
+		} );
+
+		it( 'should commit value when blurred if value is invalid', async () => {
+			const user = setupUser();
+			const spyChange = jest.fn();
+			render(
+				<InputControl
+					value="this is"
+					onChange={ ( v ) => spyChange( v ) }
+					// If the value contains 'now' it is not valid.
+					pattern="(?!.*now)^.*$"
+					__unstableStateReducer={ ( state, action ) => {
+						let { value } = state;
+						if (
+							action.type === 'COMMIT' &&
+							action.payload.event.type === 'blur'
+						)
+							value = value.replace( /\bnow\b/, 'meow' );
+
+						return { ...state, value };
+					} }
+				/>
+			);
+			const input = getInput();
+
+			await user.type( input, ' now' );
+			// Clicking document.body to trigger a blur event on the input.
+			await user.click( document.body );
+
+			expect( spyChange ).toHaveBeenLastCalledWith( 'this is meow' );
+		} );
 	} );
 } );

package/src/input-control/utils.ts

@@ -1,7 +1,22 @@
+/**
+ * External dependencies
+ */
+import type { FocusEventHandler } from 'react';
+
 /**
  * WordPress dependencies
  */
-import { useEffect } from '@wordpress/element';
+import {
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import type { InputChangeCallback } from './types';
 
 /**
  * Gets a CSS cursor value based on a drag direction.
@@ -48,7 +63,46 @@ export function useDragCursor(
 			// @ts-expect-error
 			document.documentElement.style.cursor = null;
 		}
-	}, [ isDragging ] );
+	}, [ isDragging, dragCursor ] );
 
 	return dragCursor;
 }
+
+export function useDraft( props: {
+	value: string | undefined;
+	onBlur?: FocusEventHandler;
+	onChange: InputChangeCallback;
+} ) {
+	const refPreviousValue = useRef( props.value );
+	const [ draft, setDraft ] = useState< {
+		value?: string;
+		isStale?: boolean;
+	} >( {} );
+	const value = draft.value !== undefined ? draft.value : props.value;
+
+	// Determines when to discard the draft value to restore controlled status.
+	// To do so, it tracks the previous value and marks the draft value as stale
+	// after each render.
+	useLayoutEffect( () => {
+		const { current: previousValue } = refPreviousValue;
+		refPreviousValue.current = props.value;
+		if ( draft.value !== undefined && ! draft.isStale )
+			setDraft( { ...draft, isStale: true } );
+		else if ( draft.isStale && props.value !== previousValue )
+			setDraft( {} );
+	}, [ props.value, draft ] );
+
+	const onChange: InputChangeCallback = ( nextValue, extra ) => {
+		// Mutates the draft value to avoid an extra effect run.
+		setDraft( ( current ) =>
+			Object.assign( current, { value: nextValue, isStale: false } )
+		);
+		props.onChange( nextValue, extra );
+	};
+	const onBlur: FocusEventHandler = ( event ) => {
+		setDraft( {} );
+		props.onBlur?.( event );
+	};
+
+	return { value, onBlur, onChange };
+}

package/src/item-group/stories/index.js

@@ -57,7 +57,8 @@ export const _default = () => {
 		size: select(
 			'Item 1: size',
 			{
-				'unset (defaults to the value set on the <ItemGroup> parent)': PROP_UNSET,
+				'unset (defaults to the value set on the <ItemGroup> parent)':
+					PROP_UNSET,
 				small: 'small',
 				medium: 'medium',
 				large: 'large',

package/src/menu-item/test/index.js

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { shallow } from 'enzyme';
-import { noop } from 'lodash';
 
 /**
  * WordPress dependencies
@@ -14,6 +13,8 @@ import { more } from '@wordpress/icons';
  */
 import { MenuItem } from '../';
 
+const noop = () => {};
+
 describe( 'MenuItem', () => {
 	it( 'should match snapshot when only label provided', () => {
 		const wrapper = shallow( <MenuItem>My item</MenuItem> );

package/src/menu-items-choice/index.js

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { noop } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -13,6 +8,8 @@ import { check } from '@wordpress/icons';
  */
 import MenuItem from '../menu-item';
 
+const noop = () => {};
+
 export default function MenuItemsChoice( {
 	choices = [],
 	onHover = noop,

package/src/mobile/bottom-sheet/bottom-sheet-context.native.js

@@ -36,7 +36,5 @@ export const BottomSheetContext = createContext( {
 	setIsFullScreen: () => {},
 } );
 
-export const {
-	Provider: BottomSheetProvider,
-	Consumer: BottomSheetConsumer,
-} = BottomSheetContext;
+export const { Provider: BottomSheetProvider, Consumer: BottomSheetConsumer } =
+	BottomSheetContext;

package/src/mobile/bottom-sheet/cell.native.js

@@ -37,9 +37,8 @@ class BottomSheetCell extends Component {
 			isScreenReaderEnabled: false,
 		};
 
-		this.handleScreenReaderToggled = this.handleScreenReaderToggled.bind(
-			this
-		);
+		this.handleScreenReaderToggled =
+			this.handleScreenReaderToggled.bind( this );
 
 		this.isCurrent = false;
 	}

package/src/mobile/bottom-sheet/cycle-picker-cell.native.js

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import { findIndex } from 'lodash';
 /**
  * Internal dependencies
  */
@@ -14,7 +10,9 @@ export default function BottomSheetCyclePickerCell( props ) {
 		return options[ ( selectedOptionIndex + 1 ) % options.length ].value;
 	};
 
-	const selectedOptionIndex = findIndex( options, [ 'value', value ] );
+	const selectedOptionIndex = options.findIndex(
+		( option ) => option.value === value
+	);
 	const optionsContainsValue =
 		options.length > 0 && selectedOptionIndex !== -1;