@wordpress/components 19.7.0-next.e230fbab09.0 → 19.7.0

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

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render as RTLrender, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * WordPress dependencies
  */
-import { UP, DOWN, ENTER, ESCAPE } from '@wordpress/keycodes';
 import { useState } from '@wordpress/element';
 
 /**
@@ -15,6 +15,16 @@ import { useState } from '@wordpress/element';
 import UnitControl from '../';
 import { parseQuantityAndUnitFromRawValue } from '../utils';
 
+function render( jsx ) {
+	return {
+		user: userEvent.setup( {
+			// Avoids timeout errors (https://github.com/testing-library/user-event/issues/565#issuecomment-1064579531).
+			delay: null,
+		} ),
+		...RTLrender( jsx ),
+	};
+}
+
 const getComponent = () =>
 	document.body.querySelector( '.components-unit-control' );
 const getInput = () =>
@@ -24,9 +34,6 @@ const getSelect = () =>
 const getUnitLabel = () =>
 	document.body.querySelector( '.components-unit-control__unit-label' );
 
-const fireKeyDown = ( data ) =>
-	fireEvent.keyDown( document.activeElement || document.body, data );
-
 const ControlledSyncUnits = () => {
 	const [ state, setState ] = useState( { valueA: '', valueB: '' } );
 
@@ -93,7 +100,7 @@ describe( 'UnitControl', () => {
 		} );
 
 		it( 'should not render select, if units are disabled', () => {
-			render( <UnitControl unit="em" units={ [] } /> );
+			render( <UnitControl value="3em" units={ [] } /> );
 			const input = getInput();
 			const select = getSelect();
 
@@ -113,73 +120,87 @@ describe( 'UnitControl', () => {
 	} );
 
 	describe( 'Value', () => {
-		it( 'should update value on change', () => {
+		it( 'should update value on change', async () => {
 			let state = '50px';
 			const setState = jest.fn( ( value ) => ( state = value ) );
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			const { user } = render(
+				<UnitControl value={ state } onChange={ setState } />
+			);
 
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 62 } } );
-
-			expect( setState ).toHaveBeenCalledTimes( 1 );
+			await user.clear( input );
+			await user.type( input, '62' );
+
+			// 3 times:
+			// - 1: clear
+			// - 2: type '6'
+			// - 3: type '62'
+			expect( setState ).toHaveBeenCalledTimes( 3 );
 			expect( state ).toBe( '62px' );
 		} );
 
-		it( 'should increment value on UP press', () => {
+		it( 'should increment value on UP press', async () => {
 			let state = '50px';
 			const setState = ( nextState ) => ( state = nextState );
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			const { user } = render(
+				<UnitControl value={ state } onChange={ setState } />
+			);
 
-			getInput().focus();
-			fireKeyDown( { keyCode: UP } );
+			const input = getInput();
+			await user.type( input, '{ArrowUp}' );
 
 			expect( state ).toBe( '51px' );
 		} );
 
-		it( 'should increment value on UP + SHIFT press, with step', () => {
+		it( 'should increment value on UP + SHIFT press, with step', async () => {
 			let state = '50px';
 			const setState = ( nextState ) => ( state = nextState );
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			const { user } = render(
+				<UnitControl value={ state } onChange={ setState } />
+			);
 
-			getInput().focus();
-			fireKeyDown( { keyCode: UP, shiftKey: true } );
+			const input = getInput();
+			await user.type( input, '{Shift>}{ArrowUp}{/Shift}' );
 
 			expect( state ).toBe( '60px' );
 		} );
 
-		it( 'should decrement value on DOWN press', () => {
+		it( 'should decrement value on DOWN press', async () => {
 			let state = 50;
 			const setState = ( nextState ) => ( state = nextState );
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			const { user } = render(
+				<UnitControl value={ state } onChange={ setState } />
+			);
 
-			getInput().focus();
-			fireKeyDown( { keyCode: DOWN } );
+			const input = getInput();
+			await user.type( input, '{ArrowDown}' );
 
 			expect( state ).toBe( '49px' );
 		} );
 
-		it( 'should decrement value on DOWN + SHIFT press, with step', () => {
+		it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
 			let state = 50;
 			const setState = ( nextState ) => ( state = nextState );
 
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			const { user } = render(
+				<UnitControl value={ state } onChange={ setState } />
+			);
 
-			getInput().focus();
-			fireKeyDown( { keyCode: DOWN, shiftKey: true } );
+			const input = getInput();
+			await user.type( input, '{Shift>}{ArrowDown}{/Shift}' );
 
 			expect( state ).toBe( '40px' );
 		} );
 
-		it( 'should cancel change when ESCAPE key is pressed', () => {
+		it( 'should cancel change when ESCAPE key is pressed', async () => {
 			let state = 50;
 			const setState = ( nextState ) => ( state = nextState );
 
-			render(
+			const { user } = render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -188,14 +209,13 @@ describe( 'UnitControl', () => {
 			);
 
 			const input = getInput();
-			input.focus();
-
-			fireEvent.change( input, { target: { value: '300px' } } );
+			await user.clear( input );
+			await user.type( input, '300px' );
 
 			expect( input.value ).toBe( '300px' );
 			expect( state ).toBe( 50 );
 
-			fireKeyDown( { keyCode: ESCAPE } );
+			user.keyboard( '{Escape}' );
 
 			expect( input.value ).toBe( '50' );
 			expect( state ).toBe( 50 );
@@ -203,17 +223,25 @@ describe( 'UnitControl', () => {
 	} );
 
 	describe( 'Unit', () => {
-		it( 'should update unit value on change', () => {
-			let state = 'px';
+		it( 'should update unit value on change', async () => {
+			let state = '14rem';
 			const setState = ( nextState ) => ( state = nextState );
 
-			render( <UnitControl unit={ state } onUnitChange={ setState } /> );
+			const spy = jest.fn();
+
+			const { user } = render(
+				<UnitControl
+					value={ state }
+					onChange={ setState }
+					onUnitChange={ spy }
+				/>
+			);
 
 			const select = getSelect();
-			select.focus();
-			fireEvent.change( select, { target: { value: 'em' } } );
+			await user.selectOptions( select, [ 'px' ] );
 
-			expect( state ).toBe( 'em' );
+			expect( spy ).toHaveBeenCalledWith( 'px', expect.anything() );
+			expect( state ).toBe( '14px' );
 		} );
 
 		it( 'should render customized units, if defined', () => {
@@ -235,7 +263,7 @@ describe( 'UnitControl', () => {
 			expect( vmax.value ).toBe( 'vmax' );
 		} );
 
-		it( 'should reset value on unit change, if unit has default value', () => {
+		it( 'should reset value on unit change, if unit has default value', async () => {
 			let state = 50;
 			const setState = ( nextState ) => ( state = nextState );
 
@@ -244,7 +272,7 @@ describe( 'UnitControl', () => {
 				{ value: 'vmax', label: 'vmax', default: 75 },
 			];
 
-			render(
+			const { user } = render(
 				<UnitControl
 					isResetValueOnUnitChange
 					units={ units }
@@ -254,18 +282,16 @@ describe( 'UnitControl', () => {
 			);
 
 			const select = getSelect();
-			select.focus();
-
-			fireEvent.change( select, { target: { value: 'vmax' } } );
+			await user.selectOptions( select, [ 'vmax' ] );
 
 			expect( state ).toBe( '75vmax' );
 
-			fireEvent.change( select, { target: { value: 'pt' } } );
+			await user.selectOptions( select, [ 'pt' ] );
 
 			expect( state ).toBe( '25pt' );
 		} );
 
-		it( 'should not reset value on unit change, if disabled', () => {
+		it( 'should not reset value on unit change, if disabled', async () => {
 			let state = 50;
 			const setState = ( nextState ) => ( state = nextState );
 
@@ -274,7 +300,7 @@ describe( 'UnitControl', () => {
 				{ value: 'vmax', label: 'vmax', default: 75 },
 			];
 
-			render(
+			const { user } = render(
 				<UnitControl
 					isResetValueOnUnitChange={ false }
 					value={ state }
@@ -284,69 +310,88 @@ describe( 'UnitControl', () => {
 			);
 
 			const select = getSelect();
-			select.focus();
-
-			fireEvent.change( select, { target: { value: 'vmax' } } );
+			await user.selectOptions( select, [ 'vmax' ] );
 
 			expect( state ).toBe( '50vmax' );
 
-			fireEvent.change( select, { target: { value: 'pt' } } );
+			await user.selectOptions( select, [ 'pt' ] );
 
 			expect( state ).toBe( '50pt' );
 		} );
 
-		it( 'should set correct unit if single units', () => {
+		it( 'should set correct unit if single units', async () => {
 			let state = '50%';
 			const setState = ( value ) => ( state = value );
 
-			render(
+			const { user } = render(
 				<UnitControl
 					value={ state }
-					unit="%"
 					units={ [ { value: '%', label: '%' } ] }
 					onChange={ setState }
 				/>
 			);
 
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: 62 } } );
+			await user.clear( input );
+			await user.type( input, '62' );
 
-			expect( state ).toBe( '62%' );
+			await waitFor( () => expect( state ).toBe( '62%' ) );
 		} );
 
-		it( 'should update unit value when a new raw value is passed', () => {
-			render( <ControlledSyncUnits /> );
+		it( 'should update unit value when a new raw value is passed', async () => {
+			const { user } = render( <ControlledSyncUnits /> );
 
 			const [ inputA, inputB ] = screen.getAllByRole( 'spinbutton' );
 			const [ selectA, selectB ] = screen.getAllByRole( 'combobox' );
 
-			inputA.focus();
-			fireEvent.change( inputA, { target: { value: '55' } } );
+			const [ remOptionA ] = screen.getAllByRole( 'option', {
+				name: 'rem',
+			} );
+			const [ , vwOptionB ] = screen.getAllByRole( 'option', {
+				name: 'vw',
+			} );
+
+			await user.type( inputA, '55' );
 
-			inputB.focus();
-			fireEvent.change( inputB, { target: { value: '14' } } );
+			await user.type( inputB, '14' );
 
-			selectA.focus();
-			fireEvent.change( selectA, { target: { value: 'rem' } } );
+			await user.selectOptions( selectA, remOptionA );
 
+			await waitFor( () => expect( selectB ).toHaveValue( 'rem' ) );
 			expect( selectA ).toHaveValue( 'rem' );
-			expect( selectB ).toHaveValue( 'rem' );
 
-			selectB.focus();
-			fireEvent.change( selectB, { target: { value: 'vw' } } );
+			await user.selectOptions( selectB, vwOptionB );
 
-			expect( selectA ).toHaveValue( 'vw' );
+			await waitFor( () => expect( selectA ).toHaveValue( 'vw' ) );
 			expect( selectB ).toHaveValue( 'vw' );
 		} );
+
+		it( 'should maintain the chosen non-default unit when value is cleared', async () => {
+			const units = [
+				{ value: 'pt', label: 'pt' },
+				{ value: 'vmax', label: 'vmax' },
+			];
+
+			const { user } = render(
+				<UnitControl units={ units } value="5" />
+			);
+
+			const select = getSelect();
+			await user.selectOptions( select, [ 'vmax' ] );
+
+			const input = getInput();
+			await user.clear( input );
+
+			expect( select ).toHaveValue( 'vmax' );
+		} );
 	} );
 
 	describe( 'Unit Parser', () => {
 		let state = '10px';
 		const setState = jest.fn( ( nextState ) => ( state = nextState ) );
 
-		it( 'should parse unit from input', () => {
-			render(
+		it( 'should parse unit from input', async () => {
+			const { user } = render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -355,15 +400,15 @@ describe( 'UnitControl', () => {
 			);
 
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '55 em' } } );
-			fireKeyDown( { keyCode: ENTER } );
+			await user.clear( input );
+			await user.type( input, '55 em' );
+			user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '55em' );
 		} );
 
-		it( 'should parse PX unit from input', () => {
-			render(
+		it( 'should parse PX unit from input', async () => {
+			const { user } = render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -372,15 +417,15 @@ describe( 'UnitControl', () => {
 			);
 
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '61   PX' } } );
-			fireKeyDown( { keyCode: ENTER } );
+			await user.clear( input );
+			await user.type( input, '61   PX' );
+			user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '61px' );
 		} );
 
-		it( 'should parse EM unit from input', () => {
-			render(
+		it( 'should parse EM unit from input', async () => {
+			const { user } = render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -389,15 +434,15 @@ describe( 'UnitControl', () => {
 			);
 
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '55 em' } } );
-			fireKeyDown( { keyCode: ENTER } );
+			await user.clear( input );
+			await user.type( input, '55 em' );
+			user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '55em' );
 		} );
 
-		it( 'should parse % unit from input', () => {
-			render(
+		it( 'should parse % unit from input', async () => {
+			const { user } = render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -406,15 +451,15 @@ describe( 'UnitControl', () => {
 			);
 
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, { target: { value: '-10  %' } } );
-			fireKeyDown( { keyCode: ENTER } );
+			await user.clear( input );
+			await user.type( input, '-10  %' );
+			user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '-10%' );
 		} );
 
-		it( 'should parse REM unit from input', () => {
-			render(
+		it( 'should parse REM unit from input', async () => {
+			const { user } = render(
 				<UnitControl
 					value={ state }
 					onChange={ setState }
@@ -423,25 +468,23 @@ describe( 'UnitControl', () => {
 			);
 
 			const input = getInput();
-			input.focus();
-			fireEvent.change( input, {
-				target: { value: '123       rEm  ' },
-			} );
-			fireKeyDown( { keyCode: ENTER } );
+			await user.clear( input );
+			await user.type( input, '123       rEm  ' );
+			user.keyboard( '{Enter}' );
 
 			expect( state ).toBe( '123rem' );
 		} );
 
-		it( 'should update unit after initial render and with new unit prop', () => {
+		it( 'should update unit after initial render and with new unit prop', async () => {
 			const { rerender } = render( <UnitControl value={ '10%' } /> );
 
 			const select = getSelect();
 
 			expect( select.value ).toBe( '%' );
 
-			rerender( <UnitControl value={ '20' } unit="em" /> );
+			rerender( <UnitControl value={ '20vh' } /> );
 
-			expect( select.value ).toBe( 'em' );
+			await waitFor( () => expect( select.value ).toBe( 'vh' ) );
 		} );
 
 		it( 'should fallback to default unit if parsed unit is invalid', () => {

package/src/unit-control/types.ts

@@ -9,6 +9,7 @@ import type { CSSProperties, SyntheticEvent } from 'react';
 import type { StateReducer } from '../input-control/reducer/state';
 import type {
 	InputChangeCallback,
+	InputControlProps,
 	Size as InputSize,
 } from '../input-control/types';
 
@@ -51,8 +52,6 @@ export type UnitSelectControlProps = {
 	isUnitSelectTabbable?: boolean;
 	/**
 	 * A callback function invoked when the value is changed.
-	 *
-	 * @default noop
 	 */
 	onChange?: UnitControlOnChangeCallback;
 	/**
@@ -74,42 +73,62 @@ export type UnitSelectControlProps = {
 };
 
 // TODO: when available, should (partially) extend `NumberControl` props.
-export type UnitControlProps = UnitSelectControlProps & {
-	__unstableStateReducer?: StateReducer;
-	__unstableInputWidth?: CSSProperties[ 'width' ];
-	/**
-	 * If `true`, the unit `<select>` is hidden.
-	 *
-	 * @default false
-	 */
-	disableUnits?: boolean;
-	/**
-	 * If `true`, the `ENTER` key press is required in order to trigger an `onChange`.
-	 * If enabled, a change is also triggered when tabbing away (`onBlur`).
-	 *
-	 * @default false
-	 */
-	isPressEnterToChange?: boolean;
-	/**
-	 * If `true`, and the selected unit provides a `default` value, this value is set
-	 * when changing units.
-	 *
-	 * @default false
-	 */
-	isResetValueOnUnitChange?: boolean;
-	/**
-	 * If this property is added, a label will be generated using label property as the content.
-	 */
-	label?: string;
-	/**
-	 * Callback when the `unit` changes.
-	 *
-	 * @default noop
-	 */
-	onUnitChange?: UnitControlOnChangeCallback;
-	/**
-	 * Current value. If passed as a string, the current unit will be inferred from this value.
-	 * For example, a `value` of "50%" will set the current unit to `%`.
-	 */
-	value?: string | number;
-};
+export type UnitControlProps = Omit< UnitSelectControlProps, 'unit' > &
+	Pick< InputControlProps, 'hideLabelFromVision' > & {
+		__unstableStateReducer?: StateReducer;
+		__unstableInputWidth?: CSSProperties[ 'width' ];
+		/**
+		 * If `true`, the unit `<select>` is hidden.
+		 *
+		 * @default false
+		 */
+		disableUnits?: boolean;
+		/**
+		 * If `true`, the `ENTER` key press is required in order to trigger an `onChange`.
+		 * If enabled, a change is also triggered when tabbing away (`onBlur`).
+		 *
+		 * @default false
+		 */
+		isPressEnterToChange?: boolean;
+		/**
+		 * If `true`, and the selected unit provides a `default` value, this value is set
+		 * when changing units.
+		 *
+		 * @default false
+		 */
+		isResetValueOnUnitChange?: boolean;
+		/**
+		 * If this property is added, a label will be generated using label property as the content.
+		 */
+		label?: string;
+		/**
+		 * Callback when the `unit` changes.
+		 */
+		onUnitChange?: UnitControlOnChangeCallback;
+		/**
+		 * Current unit. _Note: this prop is deprecated. Instead, provide a unit with a value through the `value` prop._
+		 *
+		 * @deprecated
+		 */
+		unit?: string;
+		/**
+		 * Current value. If passed as a string, the current unit will be inferred from this value.
+		 * For example, a `value` of "50%" will set the current unit to `%`.
+		 */
+		value?: string | number;
+		/**
+		 * If true, pressing `UP` or `DOWN` along with the `SHIFT` key will increment
+		 * the value by the `shiftStep` value.
+		 *
+		 * @default true
+		 */
+		isShiftStepEnabled?: boolean;
+		/**
+		 * Amount to increment by when the `SHIFT` key is held down. This shift value
+		 * is a multiplier to the `step` value. For example, if the `step` value is `5`,
+		 * and `shiftStep` is `10`, each jump would increment/decrement by `50`.
+		 *
+		 * @default 10
+		 */
+		shiftStep?: number;
+	};

package/src/unit-control/unit-select-control.tsx

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { noop } from 'lodash';
 import classnames from 'classnames';
 import type { ChangeEvent } from 'react';
 
@@ -16,7 +15,7 @@ import type { UnitSelectControlProps } from './types';
 export default function UnitSelectControl( {
 	className,
 	isUnitSelectTabbable: isTabbable = true,
-	onChange = noop,
+	onChange,
 	size = 'default',
 	unit = 'px',
 	units = CSS_UNITS,
@@ -37,7 +36,7 @@ export default function UnitSelectControl( {
 		const { value: unitValue } = event.target;
 		const data = units.find( ( option ) => option.value === unitValue );
 
-		onChange( unitValue, { event, data } );
+		onChange?.( unitValue, { event, data } );
 	};
 
 	const classes = classnames( 'components-unit-control__select', className );