@wordpress/components 37.0.1-next.v.202607070741.0 → 39.0.0

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

@@ -1,18 +1,7 @@
-/**
- * External dependencies
- */
 import { fireEvent, screen, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { click } from '@ariakit/test';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import { ColorPicker } from '..';
 
 const hslaMatcher = expect.objectContaining( {
@@ -378,6 +367,102 @@ describe( 'ColorPicker', () => {
 			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
 		} );
 
+		it.each( [
+			[ 'black', 0 ],
+			[ 'white', 100 ],
+		] )(
+			'should allow saturation 50→0 at %s without firing onChange',
+			async ( _label, lightness ) => {
+				const onChange = jest.fn();
+
+				render(
+					<ControlledColorPicker
+						onChange={ onChange }
+						enableAlpha={ false }
+						initialColor="#000000"
+					/>
+				);
+
+				const formatSelector = screen.getByRole( 'combobox' );
+				await userEvent.setup().selectOptions( formatSelector, 'hsl' );
+
+				const hueSlider = screen
+					.getAllByRole( 'slider', { name: 'Hue' } )
+					.at( -1 )!;
+				const saturationSlider = screen.getByRole( 'slider', {
+					name: 'Saturation',
+				} );
+				const lightnessSlider = screen.getByRole( 'slider', {
+					name: 'Lightness',
+				} );
+				const saturationNumberInput = screen.getByRole( 'spinbutton', {
+					name: 'Saturation',
+				} );
+
+				// Build hsl(200, 50%, lightness%) via HSL controls.
+				fireEvent.change( hueSlider, { target: { value: 200 } } );
+				fireEvent.change( saturationSlider, { target: { value: 50 } } );
+				fireEvent.change( lightnessSlider, {
+					target: { value: lightness },
+				} );
+				await waitFor( () =>
+					expect( lightnessSlider ).toHaveValue( String( lightness ) )
+				);
+
+				expect( saturationSlider ).toHaveValue( '50' );
+				expect( saturationNumberInput ).toHaveValue( 50 );
+				onChange.mockClear();
+
+				fireEvent.change( saturationSlider, { target: { value: 0 } } );
+
+				expect( saturationSlider ).toHaveValue( '0' );
+				expect( saturationNumberInput ).toHaveValue( 0 );
+				expect( onChange ).not.toHaveBeenCalled();
+			}
+		);
+
+		it( 'should fire onChange once per real color change in controlled mode', 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 lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+
+			fireEvent.change( lightnessSlider, { target: { value: 40 } } );
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '40' )
+			);
+			expect( onChange ).toHaveBeenCalledTimes( 1 );
+
+			fireEvent.change( lightnessSlider, { target: { value: 30 } } );
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '30' )
+			);
+			expect( onChange ).toHaveBeenCalledTimes( 2 );
+
+			fireEvent.change( lightnessSlider, { target: { value: 0 } } );
+			await waitFor( () => expect( lightnessSlider ).toHaveValue( '0' ) );
+			expect( onChange ).toHaveBeenCalledTimes( 3 );
+			onChange.mockClear();
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 90 } } );
+			expect( onChange ).not.toHaveBeenCalled();
+		} );
+
 		it( 'should reset saturation to 0 when a mid-gray is entered via hex input', async () => {
 			const user = userEvent.setup();
 
@@ -501,6 +586,412 @@ describe( 'ColorPicker', () => {
 		} );
 	} );
 
+	describe( 'visual picker', () => {
+		const mockInteractiveBounds = ( interactive: HTMLElement ) => {
+			interactive.getBoundingClientRect = () =>
+				( {
+					left: 0,
+					top: 0,
+					width: 100,
+					height: 100,
+					right: 100,
+					bottom: 100,
+					x: 0,
+					y: 0,
+					toJSON: () => ( {} ),
+				} ) as DOMRect;
+		};
+
+		it( 'preserves saturation when keyboard-navigating to black in controlled mode', () => {
+			const onChange = jest.fn();
+
+			// Saturated red with mid brightness — HSVA s stays high at black.
+			const { container } = render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			// Pointer is a presentational sibling; no accessible role.
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( pointer ).toBeTruthy();
+
+			const leftBefore = pointer.style.left;
+			expect( parseFloat( leftBefore ) ).toBeGreaterThan( 50 );
+
+			// react-colorful reads which/keyCode (37–40), not event.key.
+			// From v≈80, 5% steps need at least 16 ArrowDown presses to reach black.
+			colorSlider.focus();
+			for ( let i = 0; i < 20; i++ ) {
+				fireEvent.keyDown( colorSlider, {
+					key: 'ArrowDown',
+					keyCode: 40,
+					which: 40,
+				} );
+			}
+
+			expect( pointer ).toHaveStyle( { top: '100%', left: leftBefore } );
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+		} );
+
+		it( 'preserves saturation when pointer selects black in controlled mode', () => {
+			const onChange = jest.fn();
+
+			const { container } = render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const interactive = screen.getByRole( 'slider', { name: 'Color' } );
+			mockInteractiveBounds( interactive );
+
+			// Pointer is a presentational sibling; no accessible role.
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( parseFloat( pointer.style.left ) ).toBeGreaterThan( 50 );
+
+			// Click the bottom of the saturation surface (v = 0) at ~80% saturation.
+			fireEvent.mouseDown( interactive, {
+				buttons: 1,
+				pageX: 80,
+				pageY: 100,
+				clientX: 80,
+				clientY: 100,
+			} );
+
+			expect( pointer ).toHaveStyle( { top: '100%' } );
+			// Lossy HSVA→HSLA→HSVA sync would snap left to 0%.
+			expect( pointer ).not.toHaveStyle( { left: '0%' } );
+			expect( parseFloat( pointer.style.left ) ).toBeGreaterThan( 50 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+		} );
+
+		it( 'preserves saturation after a full pointer drag to black then HSL hue edit', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const { container } = render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const interactive = screen.getByRole( 'slider', { name: 'Color' } );
+			mockInteractiveBounds( interactive );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+
+			// Full pointer lifecycle so isPointerInteractingRef is exercised
+			// and prevHslaRef stays in sync across mid-gesture parent updates.
+			fireEvent.pointerDown( interactive, {
+				pointerId: 1,
+				buttons: 1,
+				pageX: 80,
+				pageY: 50,
+				clientX: 80,
+				clientY: 50,
+			} );
+			fireEvent.mouseDown( interactive, {
+				buttons: 1,
+				pageX: 80,
+				pageY: 50,
+				clientX: 80,
+				clientY: 50,
+			} );
+			fireEvent.mouseMove( interactive, {
+				buttons: 1,
+				pageX: 80,
+				pageY: 100,
+				clientX: 80,
+				clientY: 100,
+			} );
+			fireEvent.pointerUp( interactive, {
+				pointerId: 1,
+				buttons: 0,
+				pageX: 80,
+				pageY: 100,
+				clientX: 80,
+				clientY: 100,
+			} );
+			fireEvent.mouseUp( interactive, {
+				buttons: 0,
+				pageX: 80,
+				pageY: 100,
+				clientX: 80,
+				clientY: 100,
+			} );
+
+			expect( pointer ).toHaveStyle( { top: '100%' } );
+			expect( parseFloat( pointer.style.left ) ).toBeGreaterThan( 50 );
+			expect( onChange ).toHaveBeenLastCalledWith( '#000000' );
+			const leftAfterDrag = pointer.style.left;
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			// Stale prevHslaRef would mistake the hue edit for a saturation
+			// change and snap the pointer to left: 0%.
+			expect( pointer ).toHaveStyle( {
+				top: '100%',
+				left: leftAfterDrag,
+			} );
+		} );
+
+		it( 'places the pointer at s:0 when HSL lightness is set to white', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			const { container } = render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '100' )
+			);
+			expect( onChange ).toHaveBeenLastCalledWith( '#ffffff' );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			// Only v:100,s:0 is white; a preserved chromatic s leaves the
+			// pointer at top-right and makes the next key step jump to red.
+			expect( pointer ).toHaveStyle( { top: '0%', left: '0%' } );
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			colorSlider.focus();
+			fireEvent.keyDown( colorSlider, {
+				key: 'ArrowDown',
+				keyCode: 40,
+				which: 40,
+			} );
+
+			expect( onChange ).not.toHaveBeenLastCalledWith( '#f50000' );
+			expect( onChange ).not.toHaveBeenLastCalledWith( '#cc0000' );
+		} );
+
+		it( 'preserves visual saturation when HSL hue is edited at black', async () => {
+			const user = userEvent.setup();
+
+			const { container } = render(
+				<ControlledColorPicker
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 0 } } );
+			await waitFor( () => expect( lightnessSlider ).toHaveValue( '0' ) );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			const leftBefore = pointer.style.left;
+			expect( parseFloat( leftBefore ) ).toBeGreaterThan( 50 );
+			expect( pointer ).toHaveStyle( { top: '100%' } );
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			expect( pointer ).toHaveStyle( {
+				top: '100%',
+				left: leftBefore,
+			} );
+		} );
+
+		it( 'keeps the white visual coordinate at s:0 when HSL hue is edited', async () => {
+			const user = userEvent.setup();
+
+			const { container } = render(
+				<ControlledColorPicker
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
+			await waitFor( () =>
+				expect( lightnessSlider ).toHaveValue( '100' )
+			);
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( pointer ).toHaveStyle( { top: '0%', left: '0%' } );
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			expect( pointer ).toHaveStyle( { top: '0%', left: '0%' } );
+		} );
+
+		it( 'uses the HSL hue when leaving white through the visual surface', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			await user.selectOptions( screen.getByRole( 'combobox' ), 'hsl' );
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 100 } } );
+
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			mockInteractiveBounds( colorSlider );
+			onChange.mockClear();
+			fireEvent.mouseDown( colorSlider, {
+				buttons: 1,
+				pageX: 50,
+				pageY: 0,
+				clientX: 50,
+				clientY: 0,
+			} );
+
+			expect( onChange ).toHaveBeenLastCalledWith( '#80d4ff' );
+		} );
+
+		it( 'uses the HSL hue when leaving a mid-gray through the visual surface', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<ControlledColorPicker
+					onChange={ onChange }
+					enableAlpha={ false }
+					initialColor="#808080"
+				/>
+			);
+
+			await user.selectOptions( screen.getByRole( 'combobox' ), 'hsl' );
+			const hueSlider = screen
+				.getAllByRole( 'slider', { name: 'Hue' } )
+				.at( -1 )!;
+			fireEvent.change( hueSlider, { target: { value: 200 } } );
+			await waitFor( () => expect( hueSlider ).toHaveValue( '200' ) );
+
+			const colorSlider = screen.getByRole( 'slider', { name: 'Color' } );
+			mockInteractiveBounds( colorSlider );
+			onChange.mockClear();
+			fireEvent.mouseDown( colorSlider, {
+				buttons: 1,
+				pageX: 50,
+				pageY: 50,
+				clientX: 50,
+				clientY: 50,
+			} );
+
+			expect( onChange ).toHaveBeenLastCalledWith( '#416c81' );
+		} );
+
+		it( 'updates visual saturation when HSL saturation is edited at black', async () => {
+			const user = userEvent.setup();
+
+			const { container } = render(
+				<ControlledColorPicker
+					enableAlpha={ false }
+					initialColor="#cc0000"
+				/>
+			);
+
+			const formatSelector = screen.getByRole( 'combobox' );
+			await user.selectOptions( formatSelector, 'hsl' );
+
+			const lightnessSlider = screen.getByRole( 'slider', {
+				name: 'Lightness',
+			} );
+			fireEvent.change( lightnessSlider, { target: { value: 0 } } );
+			await waitFor( () => expect( lightnessSlider ).toHaveValue( '0' ) );
+
+			// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+			const pointer = container.querySelector(
+				'.react-colorful__saturation-pointer'
+			) as HTMLElement;
+			expect( pointer ).toHaveStyle( { top: '100%' } );
+			expect( parseFloat( pointer.style.left ) ).toBeGreaterThan( 50 );
+
+			const saturationSlider = screen.getByRole( 'slider', {
+				name: 'Saturation',
+			} );
+			fireEvent.change( saturationSlider, {
+				target: { value: 25 },
+			} );
+			await waitFor( () =>
+				expect( saturationSlider ).toHaveValue( '25' )
+			);
+
+			expect( pointer ).toHaveStyle( {
+				top: '100%',
+				left: '25%',
+			} );
+		} );
+	} );
+
 	describe.each( [
 		[ 'hsl', 'HSL' ],
 		[ 'rgb', 'RGB' ],

package/src/color-picker/types.ts

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import type {
 	Colord,
 	HslColor,
@@ -10,9 +7,6 @@ import type {
 	RgbColor,
 } from 'colord';
 import type { HslaColor } from 'react-colorful';
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../context';
 import type { useDeprecatedProps } from './use-deprecated-props';
 
@@ -59,6 +53,8 @@ export interface PickerProps {
 	hsla: HslaColor;
 	enableAlpha: boolean;
 	onChange: ( nextHsla: HslaColor ) => void;
+	onInteractionStart?: () => void;
+	onInteractionEnd?: () => void;
 }
 
 export interface ColorInputProps {

package/src/color-picker/use-deprecated-props.ts

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { colord } from 'colord';
 import memoize from 'memize';
-
-/**
- * WordPress dependencies
- */
 import { useCallback } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { ColorPickerProps, LegacyColor, LegacyProps } from './types';
 
 function isLegacyProps( props: any ): props is LegacyProps {

package/src/combobox-control/index.tsx

@@ -1,11 +1,4 @@
-/**
- * External dependencies
- */
 import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
 import { __, _n, sprintf } from '@wordpress/i18n';
 import {
 	Component,
@@ -17,10 +10,7 @@ import {
 import { useInstanceId } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
 import { closeSmall } from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
+import { withIgnoreIMEEvents } from '@wordpress/keycodes';
 import { InputWrapperFlex } from './styles';
 import TokenInput from '../form-token-field/token-input';
 import SuggestionsList from '../form-token-field/suggestions-list';
@@ -32,7 +22,6 @@ import { useControlledValue } from '../utils/hooks';
 import { normalizeTextString } from '../utils/strings';
 import type { ComboboxControlOption, ComboboxControlProps } from './types';
 import type { TokenInputProps } from '../form-token-field/types';
-import { withIgnoreIMEEvents } from '../utils/with-ignore-ime-events';
 import Spinner from '../spinner';
 
 const noop = () => {};

package/src/combobox-control/stories/index.story.tsx

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import type { Meta, StoryFn } from '@storybook/react-vite';
 import { fn } from 'storybook/test';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import ComboboxControl from '..';
 import type { ComboboxControlProps } from '../types';
 

package/src/combobox-control/style.scss

@@ -33,7 +33,7 @@ input.components-combobox-control__input[type="text"] {
 }
 
 .components-combobox-control__suggestions-container {
-	@include input-control($components-color-accent);
+	@include input-control;
 	display: flex;
 	flex-wrap: wrap;
 	align-items: flex-start;
@@ -41,7 +41,7 @@ input.components-combobox-control__input[type="text"] {
 	padding: 0;
 
 	&:focus-within {
-		@include input-style__focus($components-color-accent);
+		@include input-style__focus;
 	}
 
 	.components-spinner {

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

@@ -1,17 +1,6 @@
-/**
- * External dependencies
- */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-
-/**
- * WordPress dependencies
- */
 import { useState } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import _ComboboxControl from '..';
 import type { ComboboxControlOption, ComboboxControlProps } from '../types';
 

package/src/combobox-control/types.ts

@@ -1,6 +1,3 @@
-/**
- * Internal dependencies
- */
 import type { BaseControlProps } from '../base-control/types';
 
 export type ComboboxControlOption = {

package/src/composite/context.tsx

@@ -1,11 +1,4 @@
-/**
- * WordPress dependencies
- */
 import { createContext, useContext } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { CompositeContextProps } from './types';
 
 export const CompositeContext = createContext< CompositeContextProps >( {} );

package/src/composite/group-label.tsx

@@ -1,16 +1,5 @@
-/**
- * External dependencies
- */
 import * as Ariakit from '@ariakit/react';
-
-/**
- * WordPress dependencies
- */
 import { forwardRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
 import type { WordPressComponentProps } from '../context';
 import { useCompositeContext } from './context';
 import type { CompositeGroupLabelProps } from './types';