@wordpress/components 37.0.0 → 38.0.0

package/src/color-picker/picker.tsx

@@ -1,42 +1,165 @@
 /**
  * External dependencies
  */
-import { HslColorPicker, HslaColorPicker } from 'react-colorful';
+import type { PointerEvent } from 'react';
+import { useEffect, useRef, useState } from '@wordpress/element';
+import { HsvColorPicker, HsvaColorPicker } from 'react-colorful';
+import { colord } from 'colord';
+import type { HslaColor, HsvaColor } from 'react-colorful';
 
 /**
  * Internal dependencies
  */
 import type { PickerProps } from './types';
 
-// Pointer capture fortifies drag gestures so that they continue to work
-// while dragging outside the component over objects like iframes. If a
-// newer version of react-colorful begins to employ pointer capture this
-// will be redundant and should be removed.
-const pointerCaptureProps = {
-	onPointerDown( { currentTarget, pointerId }: React.PointerEvent ) {
-		currentTarget.setPointerCapture( pointerId );
-	},
-	onPointerUp( { currentTarget, pointerId }: React.PointerEvent ) {
-		currentTarget.releasePointerCapture( pointerId );
-	},
-};
+function toHsva( hsla: PickerProps[ 'hsla' ] ): HsvaColor {
+	return {
+		...colord( hsla ).toHsv(),
+		// HSL and HSV share the hue angle. Color conversion collapses achromatic
+		// hue to 0, but HSLA retains the user's latent hue.
+		h: hsla.h,
+		a: hsla.a,
+	};
+}
+
+function isSameHsla( a: HslaColor, b: HslaColor ): boolean {
+	return a.h === b.h && a.s === b.s && a.l === b.l && a.a === b.a;
+}
+
+/**
+ * Convert parent HSLA into HSVA for prop sync.
+ *
+ * At black, RGB round-trips collapse saturation to 0. Preserve the native
+ * HSVA saturation coordinate unless the HSL saturation channel itself
+ * changed (sibling hue/alpha edits must not snap the pointer).
+ *
+ * At white, only `v: 100, s: 0` is visually white — preserving a prior
+ * chromatic saturation would leave the pointer at the top-right and make
+ * the first keyboard step jump from white to a saturated color.
+ */
+function toHsvaFromHsla(
+	hsla: HslaColor,
+	prevHsva: HsvaColor,
+	prevHsla: HslaColor | null
+): HsvaColor {
+	const converted = toHsva( hsla );
+
+	// White and chromatic colors use the converted value as-is.
+	if ( hsla.l !== 0 ) {
+		return converted;
+	}
+
+	const saturationChanged = prevHsla !== null && prevHsla.s !== hsla.s;
+
+	return {
+		h: hsla.h,
+		s: saturationChanged ? hsla.s : prevHsva.s,
+		v: 0,
+		a: hsla.a,
+	};
+}
+
+/**
+ * Visual color surface.
+ *
+ * Uses HSVA (react-colorful's native model) and keeps that value in local
+ * state so HSLA↔hex round-trips cannot move the pointer
+ * Parent ColorPicker still speaks HSLA for
+ * inputs and controlled value sync; conversion happens only at the boundary.
+ *
+ * Prop sync from parent HSLA is suppressed for:
+ * - pointer/touch drags (interaction flag), and
+ * - any picker-originated update including keyboard (HSLA origin token).
+ *
+ * Achromatic HSL sibling edits (hue/alpha while at black) preserve native
+ * HSVA saturation unless saturation itself changed. White always syncs to
+ * the converted `s: 0` visual coordinate.
+ */
+export const Picker = ( {
+	hsla,
+	enableAlpha,
+	onChange,
+	onInteractionStart,
+	onInteractionEnd,
+}: PickerProps ) => {
+	const [ hsva, setHsva ] = useState< HsvaColor >( () => toHsva( hsla ) );
+	// Last HSLA emitted by this picker — skip echoing it back into HSVA.
+	const pickerOriginHslaRef = useRef< HslaColor | null >( null );
+	// Previous parent HSLA — detect which channel changed on achromatic sync.
+	const prevHslaRef = useRef< HslaColor >( hsla );
+	// Pointer/touch drag: never sync from HSLA mid-gesture (origin match alone
+	// can fail across rapid frames when parent gradient state re-renders).
+	const isPointerInteractingRef = useRef( false );
+
+	useEffect( () => {
+		if ( isPointerInteractingRef.current ) {
+			// Keep prevHsla in lockstep with parent updates during the gesture
+			// so a post-drag HSL sibling edit is not compared against pre-drag
+			// HSLA and mistaken for a saturation change.
+			prevHslaRef.current = hsla;
+			return;
+		}
+		if (
+			pickerOriginHslaRef.current &&
+			isSameHsla( pickerOriginHslaRef.current, hsla )
+		) {
+			prevHslaRef.current = hsla;
+			return;
+		}
+		pickerOriginHslaRef.current = null;
+		setHsva( ( prev ) =>
+			toHsvaFromHsla( hsla, prev, prevHslaRef.current )
+		);
+		prevHslaRef.current = hsla;
+	}, [ hsla ] );
+
+	// Inline handlers so refs are not passed into a helper during render
+	// (react-hooks/refs). Pointer capture also keeps drag working over iframes.
+	const pointerCaptureProps = {
+		onPointerDown( { currentTarget, pointerId }: PointerEvent ) {
+			isPointerInteractingRef.current = true;
+			onInteractionStart?.();
+			currentTarget.setPointerCapture( pointerId );
+		},
+		onPointerUp( { currentTarget, pointerId }: PointerEvent ) {
+			currentTarget.releasePointerCapture( pointerId );
+			isPointerInteractingRef.current = false;
+			onInteractionEnd?.();
+		},
+		onPointerCancel( { currentTarget, pointerId }: PointerEvent ) {
+			currentTarget.releasePointerCapture( pointerId );
+			isPointerInteractingRef.current = false;
+			onInteractionEnd?.();
+		},
+	};
+
+	const handleChange = ( next: HsvaColor ) => {
+		setHsva( next );
+		const nextHsla: HslaColor = { ...colord( next ).toHsl(), a: next.a };
+		pickerOriginHslaRef.current = nextHsla;
+		onChange( nextHsla );
+	};
 
-export const Picker = ( { hsla, enableAlpha, onChange }: PickerProps ) => {
 	if ( enableAlpha ) {
 		return (
-			<HslaColorPicker
-				color={ hsla }
-				onChange={ onChange }
+			<HsvaColorPicker
+				color={ hsva }
+				onChange={ handleChange }
 				{ ...pointerCaptureProps }
 			/>
 		);
 	}
 
+	// HsvColorPicker's equality checks enumerate own keys — never pass `a`,
+	// or every parent re-render looks like an external color change and the
+	// pointer jitters while dragging.
+	const hsv = { h: hsva.h, s: hsva.s, v: hsva.v };
+
 	return (
-		<HslColorPicker
-			color={ hsla }
-			onChange={ ( nextColor ) => {
-				onChange( { ...nextColor, a: hsla.a } );
+		<HsvColorPicker
+			color={ hsv }
+			onChange={ ( next ) => {
+				handleChange( { ...next, a: hsva.a } );
 			} }
 			{ ...pointerCaptureProps }
 		/>

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

@@ -378,6 +378,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 +597,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

@@ -59,6 +59,8 @@ export interface PickerProps {
 	hsla: HslaColor;
 	enableAlpha: boolean;
 	onChange: ( nextHsla: HslaColor ) => void;
+	onInteractionStart?: () => void;
+	onInteractionEnd?: () => void;
 }
 
 export interface ColorInputProps {