@wordpress/components 25.1.0 → 25.1.2

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

@@ -13,8 +13,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import UnitControl from '..';
-import { parseQuantityAndUnitFromRawValue } from '../utils';
-import type { UnitControlOnChangeCallback } from '../types';
+import { CSS_UNITS, parseQuantityAndUnitFromRawValue } from '../utils';
 
 const getInput = ( {
 	isInputTypeText = false,
@@ -137,11 +136,9 @@ describe( 'UnitControl', () => {
 	describe( 'Value', () => {
 		it( 'should update value on change', async () => {
 			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			let state = '50px';
-			const setState = jest.fn( ( value ) => ( state = value ) );
-
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.clear( input );
@@ -151,81 +148,85 @@ describe( 'UnitControl', () => {
 			// - 1: clear
 			// - 2: type '6'
 			// - 3: type '62'
-			expect( setState ).toHaveBeenCalledTimes( 3 );
-			expect( state ).toBe( '62px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'62px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should increment value on UP press', async () => {
 			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			let state: string | undefined = '50px';
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
-
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowUp}' );
 
-			expect( state ).toBe( '51px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'51px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should increment value on UP + SHIFT press, with step', async () => {
 			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			let state: string | undefined = '50px';
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
-
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value={ '50px' } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowUp}{/Shift}' );
 
-			expect( state ).toBe( '60px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'60px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should decrement value on DOWN press', async () => {
 			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
-
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{ArrowDown}' );
 
-			expect( state ).toBe( '49px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'49px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
 			const user = userEvent.setup();
+			const onChangeSpy = jest.fn();
 
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
-
-			render( <UnitControl value={ state } onChange={ setState } /> );
+			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
 
 			const input = getInput();
 			await user.type( input, '{Shift>}{ArrowDown}{/Shift}' );
 
-			expect( state ).toBe( '40px' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'40px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should cancel change when ESCAPE key is pressed', async () => {
 			const user = userEvent.setup();
-
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const onChangeSpy = jest.fn();
 
 			render(
 				<UnitControl
-					value={ state }
-					onChange={ setState }
+					value={ 50 }
+					onChange={ onChangeSpy }
 					isPressEnterToChange
 				/>
 			);
@@ -233,15 +234,15 @@ describe( 'UnitControl', () => {
 			// Input type is `text` when the `isPressEnterToChange` prop is passed
 			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
-			await user.type( input, '300px' );
+			await user.type( input, '300' );
 
-			expect( input.value ).toBe( '300px' );
-			expect( state ).toBe( 50 );
+			expect( input.value ).toBe( '300' );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
 
 			await user.keyboard( '{Escape}' );
 
 			expect( input.value ).toBe( '50' );
-			expect( state ).toBe( 50 );
+			expect( onChangeSpy ).not.toHaveBeenCalled();
 		} );
 
 		it( 'should run onBlur callback when quantity input is blurred', async () => {
@@ -250,16 +251,10 @@ describe( 'UnitControl', () => {
 			const onChangeSpy = jest.fn();
 			const onBlurSpy = jest.fn();
 
-			let state: string | undefined = '33%';
-			const setState: UnitControlOnChangeCallback = ( nextState ) => {
-				onChangeSpy( nextState );
-				state = nextState;
-			};
-
 			render(
 				<UnitControl
-					value={ state }
-					onChange={ setState }
+					value={ '33%' }
+					onChange={ onChangeSpy }
 					onBlur={ onBlurSpy }
 				/>
 			);
@@ -269,7 +264,10 @@ describe( 'UnitControl', () => {
 			await user.type( input, '41' );
 
 			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
-			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41%' );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'41%',
+				expect.anything()
+			);
 
 			// Clicking document.body to trigger a blur event on the input.
 			await user.click( document.body );
@@ -277,23 +275,15 @@ describe( 'UnitControl', () => {
 			expect( onBlurSpy ).toHaveBeenCalledTimes( 1 );
 		} );
 
-		it( 'should invoke onChange and onUnitChange callbacks when isPressEnterToChange is true and the component is blurred with an uncommitted value', async () => {
+		it( 'should invoke onChange when isPressEnterToChange is true and the input is blurred with an uncommitted value', async () => {
 			const user = userEvent.setup();
 
-			const onUnitChangeSpy = jest.fn();
 			const onChangeSpy = jest.fn();
 
-			let state: string | undefined = '15px';
-			const setState: UnitControlOnChangeCallback = ( nextState ) => {
-				onChangeSpy( nextState );
-				state = nextState;
-			};
-
 			render(
 				<UnitControl
-					value={ state }
-					onChange={ setState }
-					onUnitChange={ onUnitChangeSpy }
+					value={ '15px' }
+					onChange={ onChangeSpy }
 					isPressEnterToChange
 				/>
 			);
@@ -301,21 +291,18 @@ describe( 'UnitControl', () => {
 			// Input type is `text` when the `isPressEnterToChange` prop is passed
 			const input = getInput( { isInputTypeText: true } );
 			await user.clear( input );
-			await user.type( input, '41vh' );
-
-			// This is because `isPressEnterToChange` is `true`
-			expect( onChangeSpy ).not.toHaveBeenCalled();
-			expect( onUnitChangeSpy ).not.toHaveBeenCalled();
-
-			// Clicking document.body to trigger a blur event on the input.
-			await user.click( document.body );
+			// Typing the first letter of a unit blurs the input.
+			await user.type( input, '41v' );
 
+			// Called only once because `isPressEnterToChange` is `true`.
 			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
-			expect( onChangeSpy ).toHaveBeenLastCalledWith( '41vh' );
 
-			expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 );
-			expect( onUnitChangeSpy ).toHaveBeenLastCalledWith(
-				'vh',
+			// The correct expected behavior would be for the `onChangeSpy` callback
+			// to be called twice, first with `41px` and immediately after with `41vh`,
+			// but the test environment doesn't seem to change values on `select`
+			// elements when using the keyboard.
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'41px',
 				expect.anything()
 			);
 		} );
@@ -356,26 +343,30 @@ describe( 'UnitControl', () => {
 	describe( 'Unit', () => {
 		it( 'should update unit value on change', async () => {
 			const user = userEvent.setup();
-
-			let state: string | undefined = '14rem';
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
-
-			const spy = jest.fn();
+			const onChangeSpy = jest.fn();
+			const onUnitChangeSpy = jest.fn();
 
 			render(
 				<UnitControl
-					value={ state }
-					onChange={ setState }
-					onUnitChange={ spy }
+					value={ '14rem' }
+					onChange={ onChangeSpy }
+					onUnitChange={ onUnitChangeSpy }
 				/>
 			);
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'px' ] );
 
-			expect( spy ).toHaveBeenCalledWith( 'px', expect.anything() );
-			expect( state ).toBe( '14px' );
+			expect( onUnitChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onUnitChangeSpy ).toHaveBeenLastCalledWith(
+				'px',
+				expect.anything()
+			);
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'14px',
+				expect.anything()
+			);
 		} );
 
 		it( 'should render customized units, if defined', () => {
@@ -398,10 +389,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should reset value on unit change, if unit has default value', async () => {
 			const user = userEvent.setup();
-
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const onChangeSpy = jest.fn();
 
 			const units = [
 				{ value: 'pt', label: 'pt', default: 25 },
@@ -412,27 +400,32 @@ describe( 'UnitControl', () => {
 				<UnitControl
 					isResetValueOnUnitChange
 					units={ units }
-					onChange={ setState }
-					value={ state }
+					onChange={ onChangeSpy }
+					value={ 50 }
 				/>
 			);
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'vmax' ] );
 
-			expect( state ).toBe( '75vmax' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'75vmax',
+				expect.anything()
+			);
 
 			await user.selectOptions( select, [ 'pt' ] );
 
-			expect( state ).toBe( '25pt' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'25pt',
+				expect.anything()
+			);
 		} );
 
 		it( 'should not reset value on unit change, if disabled', async () => {
 			const user = userEvent.setup();
-
-			let state: string | number | undefined = 50;
-			const setState: UnitControlOnChangeCallback = ( nextState ) =>
-				( state = nextState );
+			const onChangeSpy = jest.fn();
 
 			const units = [
 				{ value: 'pt', label: 'pt', default: 25 },
@@ -442,34 +435,39 @@ describe( 'UnitControl', () => {
 			render(
 				<UnitControl
 					isResetValueOnUnitChange={ false }
-					value={ state }
+					value={ 50 }
 					units={ units }
-					onChange={ setState }
+					onChange={ onChangeSpy }
 				/>
 			);
 
 			const select = getSelect();
 			await user.selectOptions( select, [ 'vmax' ] );
 
-			expect( state ).toBe( '50vmax' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 1 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'50vmax',
+				expect.anything()
+			);
 
 			await user.selectOptions( select, [ 'pt' ] );
 
-			expect( state ).toBe( '50pt' );
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 2 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'50pt',
+				expect.anything()
+			);
 		} );
 
 		it( 'should set correct unit if single units', async () => {
 			const user = userEvent.setup();
-
-			let state: string | undefined = '50%';
-			const setState: UnitControlOnChangeCallback = ( value ) =>
-				( state = value );
+			const onChangeSpy = jest.fn();
 
 			render(
 				<UnitControl
-					value={ state }
+					value={ '50%' }
 					units={ [ { value: '%', label: '%' } ] }
-					onChange={ setState }
+					onChange={ onChangeSpy }
 				/>
 			);
 
@@ -477,7 +475,15 @@ describe( 'UnitControl', () => {
 			await user.clear( input );
 			await user.type( input, '62' );
 
-			expect( state ).toBe( '62%' );
+			// 3 times:
+			// - 1: clear
+			// - 2: type '6'
+			// - 3: type '62'
+			expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
+			expect( onChangeSpy ).toHaveBeenLastCalledWith(
+				'62%',
+				expect.anything()
+			);
 		} );
 
 		it( 'should update unit value when a new raw value is passed', async () => {
@@ -560,121 +566,6 @@ describe( 'UnitControl', () => {
 	} );
 
 	describe( 'Unit Parser', () => {
-		it( 'should parse unit from input', async () => {
-			const user = userEvent.setup();
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '55 em' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '55em' );
-		} );
-
-		it( 'should parse PX unit from input', async () => {
-			const user = userEvent.setup();
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '61   PX' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '61px' );
-		} );
-
-		it( 'should parse EM unit from input', async () => {
-			const user = userEvent.setup();
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '55 em' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '55em' );
-		} );
-
-		it( 'should parse % unit from input', async () => {
-			const user = userEvent.setup();
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '-10  %' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '-10%' );
-		} );
-
-		it( 'should parse REM unit from input', async () => {
-			const user = userEvent.setup();
-
-			let state = '10px';
-			const setState = jest.fn( ( nextState ) => ( state = nextState ) );
-
-			render(
-				<UnitControl
-					value={ state }
-					onChange={ setState }
-					isPressEnterToChange
-				/>
-			);
-
-			// Input type is `text` when the `isPressEnterToChange` prop is passed
-			const input = getInput( { isInputTypeText: true } );
-			await user.clear( input );
-			await user.type( input, '123       rEm  ' );
-			await user.keyboard( '{Enter}' );
-
-			expect( state ).toBe( '123rem' );
-		} );
-
 		it( 'should update unit after initial render and with new unit prop', async () => {
 			const { rerender } = render( <UnitControl value={ '10%' } /> );
 
@@ -711,4 +602,41 @@ describe( 'UnitControl', () => {
 			expect( options.length ).toBe( 3 );
 		} );
 	} );
+
+	describe( 'Unit switching convenience', () => {
+		it.each( CSS_UNITS.map( ( { value } ) => value ) )(
+			'should move focus from the input to the unit select when typing the first character of %p',
+			async ( testUnit ) => {
+				const user = userEvent.setup();
+				const onChangeSpy = jest.fn();
+				const onUnitChangeSpy = jest.fn();
+
+				render(
+					<UnitControl
+						value={ '10%' }
+						onChange={ onChangeSpy }
+						onUnitChange={ onUnitChangeSpy }
+					/>
+				);
+
+				const input = getInput();
+				await user.clear( input );
+				await user.type( input, `55${ testUnit }` );
+
+				expect( getSelect() ).toHaveFocus();
+				// The unit character was not entered in the input.
+				expect( input ).toHaveValue( 55 );
+
+				// The correct expected behavior would be for onChangeSpy to be
+				// called 4 times, and for the last value it was called with to be
+				// `55${testUnit}`, but the test environment doesn't seem to change
+				// values on `select` elements when using the keyboard.
+				expect( onChangeSpy ).toHaveBeenCalledTimes( 3 );
+				expect( onChangeSpy ).toHaveBeenLastCalledWith(
+					'55%',
+					expect.anything()
+				);
+			}
+		);
+	} );
 } );

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

@@ -2,7 +2,12 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import type { ChangeEvent } from 'react';
+import type { ChangeEvent, ForwardedRef } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { forwardRef } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -12,15 +17,18 @@ import { UnitSelect, UnitLabel } from './styles/unit-control-styles';
 import { CSS_UNITS, hasUnits } from './utils';
 import type { UnitSelectControlProps } from './types';
 
-export default function UnitSelectControl( {
-	className,
-	isUnitSelectTabbable: isTabbable = true,
-	onChange,
-	size = 'default',
-	unit = 'px',
-	units = CSS_UNITS,
-	...props
-}: WordPressComponentProps< UnitSelectControlProps, 'select', false > ) {
+function UnitSelectControl(
+	{
+		className,
+		isUnitSelectTabbable: isTabbable = true,
+		onChange,
+		size = 'default',
+		unit = 'px',
+		units = CSS_UNITS,
+		...props
+	}: WordPressComponentProps< UnitSelectControlProps, 'select', false >,
+	ref: ForwardedRef< any >
+) {
 	if ( ! hasUnits( units ) || units?.length === 1 ) {
 		return (
 			<UnitLabel
@@ -43,6 +51,7 @@ export default function UnitSelectControl( {
 
 	return (
 		<UnitSelect
+			ref={ ref }
 			className={ classes }
 			onChange={ handleOnChange }
 			selectSize={ size }
@@ -58,3 +67,4 @@ export default function UnitSelectControl( {
 		</UnitSelect>
 	);
 }
+export default forwardRef( UnitSelectControl );

package/src/z-stack/component.tsx

@@ -35,13 +35,14 @@ function UnconnectedZStack(
 
 	const clonedChildren = validChildren.map( ( child, index ) => {
 		const zIndex = isReversed ? childrenLastIndex - index : index;
-		const offsetAmount = offset * index;
+		// Only when the component is layered, the offset needs to be multiplied by
+		// the item's index, so that items can correctly stack at the right distance
+		const offsetAmount = isLayered ? offset * index : offset;
 
 		const key = isValidElement( child ) ? child.key : index;
 
 		return (
 			<ZStackChildView
-				isLayered={ isLayered }
 				offsetAmount={ offsetAmount }
 				zIndex={ zIndex }
 				key={ key }
@@ -55,6 +56,7 @@ function UnconnectedZStack(
 		<ZStackView
 			{ ...otherProps }
 			className={ className }
+			isLayered={ isLayered }
 			ref={ forwardedRef }
 		>
 			{ clonedChildren }

package/src/z-stack/stories/index.tsx

@@ -8,7 +8,6 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
  * Internal dependencies
  */
 import { Elevation } from '../../elevation';
-import { HStack } from '../../h-stack';
 import { View } from '../../view';
 import { ZStack } from '..';
 
@@ -55,18 +54,12 @@ const Avatar = ( {
 
 const Template: ComponentStory< typeof ZStack > = ( args ) => {
 	return (
-		<View>
-			<HStack>
-				<View>
-					<ZStack { ...args }>
-						<Avatar backgroundColor="#444" />
-						<Avatar backgroundColor="#777" />
-						<Avatar backgroundColor="#aaa" />
-						<Avatar backgroundColor="#fff" />
-					</ZStack>
-				</View>
-			</HStack>
-		</View>
+		<ZStack { ...args }>
+			<Avatar backgroundColor="#444" />
+			<Avatar backgroundColor="#777" />
+			<Avatar backgroundColor="#aaa" />
+			<Avatar backgroundColor="#fff" />
+		</ZStack>
 	);
 };