@wordpress/components 32.2.1-next.v.202602191100.0 → 32.3.0

package/src/color-picker/test/index.tsx

@@ -248,18 +248,19 @@ describe( 'ColorPicker', () => {
 			expect( onChange ).toHaveBeenLastCalledWith( '#597326' );
 
 			// Interact with the Lightness slider, setting to 100 (ie. white).
-			// It should also cause the `onChange` callback to fire, and reset the
-			// hue and saturation inputs to `0`.
+			// It should also cause the `onChange` callback to fire. The hue and
+			// saturation should be preserved (not reset to 0) since the user
+			// explicitly set them earlier.
 			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
 
 			await waitFor( () =>
 				expect( lightnessSlider ).toHaveValue( '100' )
 			);
 			expect( lightnessNumberInput ).toHaveValue( 100 );
-			expect( hueSlider ).toHaveValue( '0' );
-			expect( saturationSlider ).toHaveValue( '0' );
-			expect( hueNumberInput ).toHaveValue( 0 );
-			expect( saturationNumberInput ).toHaveValue( 0 );
+			expect( hueSlider ).toHaveValue( '80' );
+			expect( saturationSlider ).toHaveValue( '50' );
+			expect( hueNumberInput ).toHaveValue( 80 );
+			expect( saturationNumberInput ).toHaveValue( 50 );
 			expect( onChange ).toHaveBeenCalledTimes( 2 );
 			expect( onChange ).toHaveBeenLastCalledWith( '#ffffff' );
 
@@ -309,6 +310,138 @@ describe( 'ColorPicker', () => {
 			expect( lightnessNumberInput ).toHaveValue( 52 );
 		} );
 
+		it( 'should preserve hue and saturation when lightness is set to 0 (black)', async () => {
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#2ad5d5" // hsl(180, 67%, 50%)
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await userEvent.setup().selectOptions( formatSelector, 'hsl' );
+
+			const hueSliders = screen.getAllByRole( 'slider', { name: 'Hue' } );
+			const hueSlider = hueSliders.at( -1 )!;
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			const hueNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Hue',
+			} );
+			const saturationNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Saturation',
+			} );
+
+			// Verify initial values
+			expect( hueSlider ).toHaveValue( '180' );
+			expect( saturationSlider ).toHaveValue( '67' );
+
+			// Set lightness to 0 (black)
+			fireEvent.change( lightnessSlider, { target: { value: 0 } } );
+
+			await waitFor( () => expect( lightnessSlider ).toHaveValue( '0' ) );
+
+			// Hue and saturation should be preserved
+			expect( hueSlider ).toHaveValue( '180' );
+			expect( saturationSlider ).toHaveValue( '67' );
+			expect( hueNumberInput ).toHaveValue( 180 );
+			expect( saturationNumberInput ).toHaveValue( 67 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+		} );
+
+		it( 'should reset saturation to 0 when a mid-gray is entered via hex input', async () => {
+			const user = userEvent.setup();
+
+			render(
+				<ControlledColorPicker
+					enableAlpha={ false }
+					initialColor="#2ad5d5" // hsl(180, 67%, 50%)
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+
+			// Start in hex mode and enter a mid-gray.
+			await user.selectOptions( formatSelector, 'hex' );
+			const hexInput = screen.getByRole( 'textbox' );
+			await user.clear( hexInput );
+			await user.type( hexInput, '808080' );
+
+			// Switch to HSL to inspect the values.
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			const saturationNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Saturation',
+			} );
+
+			// #808080 is hsl(0, 0%, 50%) — a pure mid-gray.
+			// Saturation must be 0, not the stale value from the
+			// previous chromatic color.
+			await waitFor( () =>
+				expect( saturationSlider ).toHaveValue( '0' )
+			);
+			expect( saturationNumberInput ).toHaveValue( 0 );
+		} );
+
+		it( 'should preserve hue when saturation is set to 0', async () => {
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#ff0000" // hsl(0, 100%, 50%) - pure red
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await userEvent.setup().selectOptions( formatSelector, 'hsl' );
+
+			const hueSliders = screen.getAllByRole( 'slider', { name: 'Hue' } );
+			const hueSlider = hueSliders.at( -1 )!;
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			const hueNumberInput = screen.getByRole( 'spinbutton', {
+				name: 'Hue',
+			} );
+
+			// Set a specific hue first
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			// Set saturation to 0 (grayscale)
+			fireEvent.change( saturationSlider, { target: { value: 0 } } );
+
+			await waitFor( () =>
+				expect( saturationSlider ).toHaveValue( '0' )
+			);
+
+			// Hue should be preserved even though color is now gray
+			expect( hueSlider ).toHaveValue( '200' );
+			expect( hueNumberInput ).toHaveValue( 200 );
+
+			// Increase saturation again - hue should still be 200
+			fireEvent.change( saturationSlider, { target: { value: 50 } } );
+
+			await waitFor( () =>
+				expect( saturationSlider ).toHaveValue( '50' )
+			);
+
+			expect( hueSlider ).toHaveValue( '200' );
+			expect( hueNumberInput ).toHaveValue( 200 );
+		} );
 		describe.each( [
 			[ 'hue', 'Hue', '#aad52a' ],
 			[ 'saturation', 'Saturation', '#20dfdf' ],

package/src/color-picker/types.ts

@@ -56,15 +56,17 @@ export type ColorPickerProps = WordPressComponentProps<
 >;
 
 export interface PickerProps {
-	color: Colord;
+	hsla: HslaColor;
 	enableAlpha: boolean;
-	onChange: ( nextColor: Colord ) => void;
+	onChange: ( nextHsla: HslaColor ) => void;
 }
 
 export interface ColorInputProps {
 	colorType: 'hsl' | 'hex' | 'rgb';
 	color: Colord;
+	hsla: HslaColor;
 	onChange: ( nextColor: Colord ) => void;
+	onHSLChange: ( nextHsla: HslaColor ) => void;
 	enableAlpha: boolean;
 }
 
@@ -84,8 +86,8 @@ export interface HexInputProps {
 }
 
 export interface HslInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
+	hsla: HslaColor;
+	onChange: ( nextHsla: HslaColor ) => void;
 	enableAlpha: boolean;
 }
 

package/src/date-time/date/styles.ts

@@ -68,6 +68,7 @@ export const DayButton = styled( Button, {
 	grid-column: ${ ( props ) => props.column };
 	position: relative;
 	justify-content: center;
+	padding: 0;
 
 	${ ( props ) =>
 		props.disabled &&

package/src/dropdown/types.ts

@@ -1,11 +1,5 @@
-/**
- * External dependencies
- */
+import type { useFocusOnMount } from '@wordpress/compose';
 import type { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react';
-
-/**
- * Internal dependencies
- */
 import type Popover from '../popover';
 import type { PopoverProps } from '../popover/types';
 
@@ -42,16 +36,17 @@ export type DropdownProps = {
 	 */
 	expandOnMobile?: boolean;
 	/**
-	 * By default, the first tabbable element in the popover will receive focus
-	 * when it mounts. This is the same as setting this prop to "firstElement".
-	 * Specifying a true value will focus the container instead.
-	 * Specifying a false value disables the focus handling entirely
-	 * (this should only be done when an appropriately accessible
-	 * substitute behavior exists).
+	 * Determines focus behavior when the dialog mounts.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default 'firstElement'
 	 */
-	focusOnMount?: 'firstElement' | boolean;
+	focusOnMount?: useFocusOnMount.Mode;
 	/**
 	 * Set this to customize the text that is shown in the dropdown's header
 	 * when it is fullscreen on mobile.

package/src/form-token-field/style.scss

@@ -25,6 +25,7 @@
 		flex: 1;
 		font-family: inherit;
 		font-size: 16px;
+		line-height: 1; // Override forms.css styles
 		width: 100%;
 		max-width: 100%;
 		margin-left: 4px;

package/src/modal/types.ts

@@ -51,14 +51,18 @@ export type ModalProps = {
 	 */
 	contentLabel?: string;
 	/**
-	 * If this property is true, it will focus the first tabbable element
-	 * rendered in the modal.
+	 * Determines focus behavior when the modal opens.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `"firstContentElement"` focuses the first tabbable element within the modal’s content element.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default true
 	 */
-	focusOnMount?:
-		| Parameters< typeof useFocusOnMount >[ 0 ]
-		| 'firstContentElement';
+	focusOnMount?: useFocusOnMount.Mode | 'firstContentElement';
 	/**
 	 * Elements that are injected into the modal header to the left of the close button (if rendered).
 	 * Hidden if `__experimentalHideHeader` is `true`.

package/src/number-control/index.tsx

@@ -18,6 +18,7 @@ import deprecated from '@wordpress/deprecated';
  */
 import { Input, SpinButton, styles } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
+import type { StateReducer } from '../input-control/reducer/state';
 import { add, subtract, clamp, ensureValidStep } from '../utils/math';
 import { ensureNumber, isValueEmpty } from '../utils/values';
 import type { WordPressComponentProps } from '../context/wordpress-component';
@@ -120,93 +121,91 @@ function UnforwardedNumberControl(
 	 *
 	 * @return The updated state to apply to InputControl
 	 */
-	const numberControlStateReducer: NumberControlProps[ '__unstableStateReducer' ] =
-		( state, action ) => {
-			const nextState = { ...state };
+	const numberControlStateReducer: StateReducer = ( state, action ) => {
+		const nextState = { ...state };
 
-			const { type, payload } = action;
-			const event = payload.event;
-			const currentValue = nextState.value;
+		const { type, payload } = action;
+		const event = payload.event;
+		const currentValue = nextState.value;
 
-			/**
-			 * Handles custom UP and DOWN Keyboard events
-			 */
-			if (
-				type === inputControlActionTypes.PRESS_UP ||
-				type === inputControlActionTypes.PRESS_DOWN
-			) {
-				nextState.value = spinValue(
-					currentValue,
-					type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
-					event as KeyboardEvent | undefined
-				);
-			}
+		/**
+		 * Handles custom UP and DOWN Keyboard events
+		 */
+		if (
+			type === inputControlActionTypes.PRESS_UP ||
+			type === inputControlActionTypes.PRESS_DOWN
+		) {
+			nextState.value = spinValue(
+				currentValue,
+				type === inputControlActionTypes.PRESS_UP ? 'up' : 'down',
+				event as KeyboardEvent | undefined
+			);
+		}
 
-			/**
-			 * Handles drag to update events
-			 */
-			if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
-				const [ x, y ] = payload.delta;
-				const enableShift = payload.shiftKey && isShiftStepEnabled;
-				const modifier = enableShift
-					? ensureNumber( shiftStep ) * baseSpin
-					: baseSpin;
+		/**
+		 * Handles drag to update events
+		 */
+		if ( type === inputControlActionTypes.DRAG && isDragEnabled ) {
+			const [ x, y ] = payload.delta;
+			const enableShift = payload.shiftKey && isShiftStepEnabled;
+			const modifier = enableShift
+				? ensureNumber( shiftStep ) * baseSpin
+				: baseSpin;
 
-				let directionModifier;
-				let delta;
+			let directionModifier;
+			let delta;
 
-				switch ( dragDirection ) {
-					case 'n':
-						delta = y;
-						directionModifier = -1;
-						break;
+			switch ( dragDirection ) {
+				case 'n':
+					delta = y;
+					directionModifier = -1;
+					break;
 
-					case 'e':
-						delta = x;
-						directionModifier = isRTL() ? -1 : 1;
-						break;
+				case 'e':
+					delta = x;
+					directionModifier = isRTL() ? -1 : 1;
+					break;
 
-					case 's':
-						delta = y;
-						directionModifier = 1;
-						break;
+				case 's':
+					delta = y;
+					directionModifier = 1;
+					break;
 
-					case 'w':
-						delta = x;
-						directionModifier = isRTL() ? 1 : -1;
-						break;
-				}
+				case 'w':
+					delta = x;
+					directionModifier = isRTL() ? 1 : -1;
+					break;
+			}
 
-				if ( delta !== 0 ) {
-					delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
-					const distance = delta * modifier * directionModifier;
+			if ( delta !== 0 ) {
+				delta = Math.ceil( Math.abs( delta ) ) * Math.sign( delta );
+				const distance = delta * modifier * directionModifier;
 
-					nextState.value = constrainValue(
-						// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
-						add( currentValue, distance ),
-						enableShift ? modifier : undefined
-					);
-				}
+				nextState.value = constrainValue(
+					// @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
+					add( currentValue, distance ),
+					enableShift ? modifier : undefined
+				);
 			}
+		}
 
-			/**
-			 * Handles commit (ENTER key press or blur)
-			 */
-			if (
-				type === inputControlActionTypes.PRESS_ENTER ||
-				type === inputControlActionTypes.COMMIT
-			) {
-				const applyEmptyValue =
-					required === false && currentValue === '';
+		/**
+		 * Handles commit (ENTER key press or blur)
+		 */
+		if (
+			type === inputControlActionTypes.PRESS_ENTER ||
+			type === inputControlActionTypes.COMMIT
+		) {
+			const applyEmptyValue = required === false && currentValue === '';
 
-				nextState.value = applyEmptyValue
-					? currentValue
-					: // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
-					  constrainValue( currentValue );
-			}
+			nextState.value = applyEmptyValue
+				? currentValue
+				: // @ts-expect-error TODO: Investigate if it's ok for currentValue to be undefined
+				  constrainValue( currentValue );
+		}
 
-			return nextState;
-		};
+		return stateReducerProp?.( nextState, action ) ?? nextState;
+	};
 
 	const buildSpinButtonClickHandler =
 		( direction: 'up' | 'down' ) =>
@@ -238,10 +237,7 @@ function UnforwardedNumberControl(
 			type={ typeProp }
 			// @ts-expect-error TODO: Resolve discrepancy between `value` types in InputControl based components
 			value={ valueProp }
-			__unstableStateReducer={ ( state, action ) => {
-				const baseState = numberControlStateReducer( state, action );
-				return stateReducerProp?.( baseState, action ) ?? baseState;
-			} }
+			__unstableStateReducer={ numberControlStateReducer }
 			size={ size }
 			__shouldNotWarnDeprecated36pxSize
 			suffix={

package/src/popover/types.ts

@@ -1,8 +1,6 @@
-/**
- * External dependencies
- */
-import type { ReactNode, MutableRefObject, SyntheticEvent } from 'react';
 import type { Placement } from '@floating-ui/react-dom';
+import type { useFocusOnMount } from '@wordpress/compose';
+import type { MutableRefObject, ReactNode, SyntheticEvent } from 'react';
 
 type PositionYAxis = 'top' | 'middle' | 'bottom';
 type PositionXAxis = 'left' | 'center' | 'right';
@@ -75,15 +73,17 @@ export type PopoverProps = {
 	 */
 	constrainTabbing?: boolean;
 	/**
-	 * By default, the _first tabbable element_ in the popover will receive focus
-	 * when it mounts. This is the same as setting this prop to `"firstElement"`.
-	 * Specifying a `false` value disables the focus handling entirely (this
-	 * should only be done when an appropriately accessible substitute behavior
-	 * exists).
+	 * Determines focus behavior when the popover mounts.
+	 *
+	 * - `"firstElement"` focuses the first tabbable element within.
+	 * - `"firstInputElement"` focuses the first value control within.
+	 * - `true` focuses the element itself.
+	 * - `false` does nothing and _should not be used unless an accessible
+	 *    substitute behavior is implemented_.
 	 *
 	 * @default 'firstElement'
 	 */
-	focusOnMount?: 'firstElement' | boolean;
+	focusOnMount?: useFocusOnMount.Mode;
 	/**
 	 * A callback invoked when the focus leaves the opened popover. This should
 	 * only be provided in advanced use-cases when a popover should close under

package/src/select-control/styles/select-control-styles.ts

@@ -162,6 +162,7 @@ export const Select = styled.select< SelectProps >`
 		cursor: inherit;
 		display: block;
 		font-family: inherit;
+		line-height: 1.3; // Override forms.css styles, large enough value to prevent descender clipping without affecting height
 		margin: 0;
 		width: 100%;
 		max-width: none;

package/src/snackbar/list.tsx

@@ -86,7 +86,12 @@ export function SnackbarList( {
 
 					return (
 						<motion.div
-							layout={ ! isReducedMotion } // See https://www.framer.com/docs/animation/#layout-animations
+							layout={ isReducedMotion ? false : 'position' } // See https://www.framer.com/docs/animation/#layout-animations
+							// Ensures a stable full-width bounding box so that
+							// `layout="position"` only ever detects vertical
+							// shifts, preventing horizontal animation when
+							// notice text changes in place.
+							style={ { width: '100%' } }
 							initial="init"
 							animate="open"
 							exit="exit"

package/src/toggle-group-control/test/__snapshots__/index.tsx.snap

@@ -137,7 +137,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -157,12 +156,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   border: 0;
 }
 
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -211,7 +211,6 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -229,12 +228,13 @@ exports[`ToggleGroupControl controlled should render correctly with icons 1`] =
   border: 0;
 }
 
-.emotion-17[disabled] {
+.emotion-17[disabled],
+.emotion-17[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-17:hover {
+.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -491,12 +491,13 @@ exports[`ToggleGroupControl controlled should render correctly with text options
   border: 0;
 }
 
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -726,7 +727,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -746,12 +746,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   border: 0;
 }
 
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -800,7 +801,6 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   user-select: none;
   width: 100%;
   z-index: 2;
-  color: var(--wp-components-color-foreground, #1e1e1e);
   height: 38px;
   aspect-ratio: 1;
   padding-left: 0;
@@ -818,12 +818,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with icons 1`]
   border: 0;
 }
 
-.emotion-17[disabled] {
+.emotion-17[disabled],
+.emotion-17[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-17:hover {
+.emotion-17:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }
 
@@ -1074,12 +1075,13 @@ exports[`ToggleGroupControl uncontrolled should render correctly with text optio
   border: 0;
 }
 
-.emotion-12[disabled] {
+.emotion-12[disabled],
+.emotion-12[aria-disabled='true'] {
   opacity: 0.4;
   cursor: default;
 }
 
-.emotion-12:hover {
+.emotion-12:hover:not( [disabled] ):not( [aria-disabled='true'] ) {
   color: var(--wp-components-color-foreground, #1e1e1e);
 }