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

package/build-types/popover/types.d.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';
 type PositionCorner = 'top' | 'right' | 'bottom' | 'left';
@@ -70,15 +68,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/build-types/popover/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/popover/types.ts"],"names":[],"mappings":"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"}

package/build-types/select-control/styles/select-control-styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select-control-styles.d.ts","sourceRoot":"","sources":["../../../src/select-control/styles/select-control-styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAKnD,UAAU,WACT,SAAQ,IAAI,CACX,kBAAkB,EAClB,uBAAuB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAC7D;IAGD,UAAU,CAAC,EAAE,kBAAkB,CAAE,MAAM,CAAE,CAAC;CAC1C;AAuBD,eAAO,MAAM,eAAe;;;;wBAM3B,CAAC;AAiDF,eAAO,MAAM,eAAe,KAAK,CAAC;AAmDlC,eAAO,MAAM,MAAM;;;mIAuBlB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAO5B,CAAC;AAEF,eAAO,MAAM,yCAAyC;;;;UAOrD,CAAC"}
+{"version":3,"file":"select-control-styles.d.ts","sourceRoot":"","sources":["../../../src/select-control/styles/select-control-styles.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAC;AAKnD,UAAU,WACT,SAAQ,IAAI,CACX,kBAAkB,EAClB,uBAAuB,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAC7D;IAGD,UAAU,CAAC,EAAE,kBAAkB,CAAE,MAAM,CAAE,CAAC;CAC1C;AAuBD,eAAO,MAAM,eAAe;;;;wBAM3B,CAAC;AAiDF,eAAO,MAAM,eAAe,KAAK,CAAC;AAmDlC,eAAO,MAAM,MAAM;;;mIAwBlB,CAAC;AAEF,eAAO,MAAM,gBAAgB;;;yGAO5B,CAAC;AAEF,eAAO,MAAM,yCAAyC;;;;UAOrD,CAAC"}

package/build-types/snackbar/list.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/snackbar/list.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AA8B1D;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAE,EAC7B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,GACR,EAAE,uBAAuB,CAAE,iBAAiB,EAAE,KAAK,CAAE,+BA6CrD;AAED,eAAe,YAAY,CAAC"}
+{"version":3,"file":"list.d.ts","sourceRoot":"","sources":["../../src/snackbar/list.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,YAAY,CAAC;AA8B1D;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAE,EAC7B,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,GACR,EAAE,uBAAuB,CAAE,iBAAiB,EAAE,KAAK,CAAE,+BAkDrD;AAED,eAAe,YAAY,CAAC"}

package/build-types/toggle-group-control/toggle-group-control-option-base/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,uBAAuB,EACvB,iCAAiC,EACjC,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAK,8CAKzB,IAAI,CAAE,uBAAuB,EAAE,gBAAgB,GAAG,MAAM,CAAE,GAC5D,IAAI,CAAE,iCAAiC,EAAE,QAAQ,CAAE,GAAG;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,8CA2CD,CAAC;AAsBF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/toggle-group-control/toggle-group-control-option-base/styles.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACX,uBAAuB,EACvB,iCAAiC,EACjC,MAAM,UAAU,CAAC;AAElB,eAAO,MAAM,SAAS;;;yGAKrB,CAAC;AAEF,eAAO,MAAM,UAAU,2CAEtB,CAAC;AAEF,eAAO,MAAM,UAAU,GAAK,8CAKzB,IAAI,CAAE,uBAAuB,EAAE,gBAAgB,GAAG,MAAM,CAAE,GAC5D,IAAI,CAAE,iCAAiC,EAAE,QAAQ,CAAE,GAAG;IACrD,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB,8CA4CD,CAAC;AAoBF,eAAO,MAAM,iBAAiB;;;yGAI7B,CAAC"}

package/build-types/tools-panel/tools-panel/hook.d.ts

@@ -23,7 +23,7 @@ export declare function useToolsPanel(props: WordPressComponentProps<ToolsPanelP
     toggleItem: (label: string) => void;
     className: string;
     children: import("react").ReactNode;
-    dropdownMenuProps?: React.ComponentProps<typeof import("../..").DropdownMenu>;
+    dropdownMenuProps?: Omit<React.ComponentProps<typeof import("../..").DropdownMenu>, "label">;
     label: string;
     defaultValue?: string | number | readonly string[] | undefined;
     onChange?: import("react").FormEventHandler<HTMLDivElement> | undefined;

package/build-types/tools-panel/types.d.ts

@@ -17,7 +17,7 @@ export type ToolsPanelProps = {
     /**
      * The dropdown menu props to configure the panel's `DropdownMenu`.
      */
-    dropdownMenuProps?: React.ComponentProps<typeof DropdownMenu>;
+    dropdownMenuProps?: Omit<React.ComponentProps<typeof DropdownMenu>, 'label'>;
     /**
      * Flags that the items in this ToolsPanel will be contained within an inner
      * wrapper element allowing the panel to lay them out accordingly.

package/build-types/tools-panel/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/tools-panel/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/components",
-	"version": "32.2.1-next.v.202602191100.0+2f8ac7442",
+	"version": "32.3.0",
 	"description": "UI components for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -64,24 +64,24 @@
 		"@types/highlight-words-core": "1.2.1",
 		"@types/react": "^18.3.27",
 		"@use-gesture/react": "^10.3.1",
-		"@wordpress/a11y": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/base-styles": "^6.16.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/compose": "^7.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/date": "^5.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/deprecated": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/dom": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/element": "^6.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/escape-html": "^3.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/hooks": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/html-entities": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/i18n": "^6.13.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/icons": "^11.7.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/is-shallow-equal": "^5.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/keycodes": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/primitives": "^4.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/private-apis": "^1.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/rich-text": "^7.40.1-next.v.202602191100.0+2f8ac7442",
-		"@wordpress/warning": "^3.40.1-next.v.202602191100.0+2f8ac7442",
+		"@wordpress/a11y": "^4.41.0",
+		"@wordpress/base-styles": "^6.17.0",
+		"@wordpress/compose": "^7.41.0",
+		"@wordpress/date": "^5.41.0",
+		"@wordpress/deprecated": "^4.41.0",
+		"@wordpress/dom": "^4.41.0",
+		"@wordpress/element": "^6.41.0",
+		"@wordpress/escape-html": "^3.41.0",
+		"@wordpress/hooks": "^4.41.0",
+		"@wordpress/html-entities": "^4.41.0",
+		"@wordpress/i18n": "^6.14.0",
+		"@wordpress/icons": "^11.8.0",
+		"@wordpress/is-shallow-equal": "^5.41.0",
+		"@wordpress/keycodes": "^4.41.0",
+		"@wordpress/primitives": "^4.41.0",
+		"@wordpress/private-apis": "^1.41.0",
+		"@wordpress/rich-text": "^7.41.0",
+		"@wordpress/warning": "^3.41.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -107,7 +107,7 @@
 		"@storybook/react-vite": "^10.1.11",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
-		"@wordpress/jest-console": "^8.40.1-next.v.202602191100.0+2f8ac7442",
+		"@wordpress/jest-console": "^8.41.0",
 		"snapshot-diff": "^0.10.0",
 		"storybook": "^10.1.11",
 		"timezone-mock": "^1.3.6"
@@ -119,5 +119,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "de48b2351a7efb8a33a83067612960a0cf239592"
+	"gitHead": "8bfc179b9aed74c0a6dd6e8edf7a49e40e4f87cc"
 }

package/src/button/style.scss

@@ -13,6 +13,7 @@
 .components-button {
 	display: inline-flex;
 	text-decoration: none;
+	word-break: break-word;
 	font-family: inherit;
 	font-size: $default-font-size;
 	font-weight: $font-weight-medium;

package/src/color-picker/color-input.tsx

@@ -9,17 +9,36 @@ import type { ColorInputProps } from './types';
 export const ColorInput = ( {
 	colorType,
 	color,
+	hsla,
 	onChange,
+	onHSLChange,
 	enableAlpha,
 }: ColorInputProps ) => {
-	const props = { color, onChange, enableAlpha };
 	switch ( colorType ) {
 		case 'hsl':
-			return <HslInput { ...props } />;
+			return (
+				<HslInput
+					hsla={ hsla }
+					onChange={ onHSLChange }
+					enableAlpha={ enableAlpha }
+				/>
+			);
 		case 'rgb':
-			return <RgbInput { ...props } />;
+			return (
+				<RgbInput
+					color={ color }
+					onChange={ onChange }
+					enableAlpha={ enableAlpha }
+				/>
+			);
 		default:
 		case 'hex':
-			return <HexInput { ...props } />;
+			return (
+				<HexInput
+					color={ color }
+					onChange={ onChange }
+					enableAlpha={ enableAlpha }
+				/>
+			);
 	}
 };

package/src/color-picker/component.tsx

@@ -4,12 +4,19 @@
 import type { ClipboardEvent, ForwardedRef } from 'react';
 import type { Colord } from 'colord';
 import { colord, extend, getFormat } from 'colord';
+import type { HslaColor } from 'react-colorful';
 import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useState, useMemo } from '@wordpress/element';
+import {
+	useCallback,
+	useEffect,
+	useRef,
+	useState,
+	useMemo,
+} from '@wordpress/element';
 import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
@@ -33,6 +40,21 @@ import type { ColorPickerProps, ColorType } from './types';
 
 extend( [ namesPlugin ] );
 
+/**
+ * Merges incoming HSLA with previous state, preserving hue for achromatic
+ * colors and saturation only at lightness extremes (black/white) where
+ * it has no visual effect.
+ */
+function mergeHSLA( nextHSLA: HslaColor, prevHSLA: HslaColor ): HslaColor {
+	if ( nextHSLA.s === 0 ) {
+		if ( nextHSLA.l === 0 || nextHSLA.l === 100 ) {
+			return { ...nextHSLA, h: prevHSLA.h, s: prevHSLA.s };
+		}
+		return { ...nextHSLA, h: prevHSLA.h };
+	}
+	return nextHSLA;
+}
+
 const options = [
 	{ label: 'RGB', value: 'rgb' as const },
 	{ label: 'HSL', value: 'hsl' as const },
@@ -65,9 +87,69 @@ const UnconnectedColorPicker = (
 
 	const debouncedSetColor = useDebounce( setColor );
 
+	// Internal HSLA state preserves hue and saturation values that
+	// would otherwise be lost when converting to/from hex at achromatic
+	// colors (e.g. pure black or white where any H/S maps to the same hex).
+	const [ internalHSLA, setInternalHSLA ] = useState< HslaColor >( () => ( {
+		...safeColordColor.toHsl(),
+	} ) );
+
+	// Track the last hex we produced so the sync effect can
+	// distinguish our own updates from external prop changes.
+	const lastProducedHexRef = useRef( safeColordColor.toHex() );
+
+	// Sync internalHSLA when the color prop changes externally (e.g.
+	// parent passes a new color that wasn't produced by our onChange).
+	useEffect( () => {
+		const incomingHex = safeColordColor.toHex();
+
+		// If this hex matches what we last produced, it's our own
+		// update arriving back — skip the sync to avoid overwriting
+		// internalHSLA with lossy round-tripped values.
+		if ( incomingHex === lastProducedHexRef.current ) {
+			return;
+		}
+
+		// Genuinely external change — sync internalHSLA.
+		lastProducedHexRef.current = incomingHex;
+		const externalHSLA = safeColordColor.toHsl();
+		setInternalHSLA( ( prev ) => mergeHSLA( externalHSLA, prev ) );
+	}, [ safeColordColor ] );
+
+	// Handler for HSL-aware components (Picker, HSL inputs) that
+	// provide raw HSLA values without information loss.
+	// Uses direct setColor (not debounced) to prevent race conditions
+	// where a stale debounced hex would overwrite newer internalHSLA.
+	// This is safe performance-wise because react-colorful internally
+	// throttles its onChange callbacks using requestAnimationFrame.
+
+	const handleHSLAChange = useCallback(
+		( nextHSLA: HslaColor ) => {
+			// No mergeHSLA here — this handler receives the user's explicit
+			// choice from the picker or HSL inputs, with no lossy conversion.
+			setInternalHSLA( nextHSLA );
+			const previousHex = lastProducedHexRef.current;
+			const nextHex = colord( nextHSLA ).toHex();
+			// Only notify parent when the hex actually changes. This
+			// avoids firing onChange for H/S changes on achromatic
+			// colors (e.g. adjusting hue on pure white).
+			if ( nextHex !== previousHex ) {
+				lastProducedHexRef.current = nextHex;
+				setColor( nextHex );
+			}
+		},
+		[ setColor ]
+	);
+
+	// Handler for components that provide Colord values (RGB, Hex inputs).
+	// Uses debouncedSetColor since the hex input fires per keystroke.
 	const handleChange = useCallback(
 		( nextValue: Colord ) => {
-			debouncedSetColor( nextValue.toHex() );
+			const nextHSLA = nextValue.toHsl();
+			setInternalHSLA( ( prev ) => mergeHSLA( nextHSLA, prev ) );
+			const nextHex = nextValue.toHex();
+			lastProducedHexRef.current = nextHex;
+			debouncedSetColor( nextHex );
 		},
 		[ debouncedSetColor ]
 	);
@@ -128,8 +210,8 @@ const UnconnectedColorPicker = (
 			onPasteCapture={ maybeHandlePaste }
 		>
 			<Picker
-				onChange={ handleChange }
-				color={ safeColordColor }
+				onChange={ handleHSLAChange }
+				hsla={ internalHSLA }
 				enableAlpha={ enableAlpha }
 			/>
 			<AuxiliaryColorArtefactWrapper>
@@ -154,7 +236,9 @@ const UnconnectedColorPicker = (
 					<ColorInput
 						colorType={ colorType }
 						color={ safeColordColor }
+						hsla={ internalHSLA }
 						onChange={ handleChange }
+						onHSLChange={ handleHSLAChange }
 						enableAlpha={ enableAlpha }
 					/>
 				</ColorInputWrapper>

package/src/color-picker/hsl-input.tsx

@@ -1,12 +1,7 @@
 /**
  * External dependencies
  */
-import { colord } from 'colord';
-
-/**
- * WordPress dependencies
- */
-import { useState, useEffect, useMemo } from '@wordpress/element';
+import type { HslaColor } from 'react-colorful';
 
 /**
  * Internal dependencies
@@ -14,49 +9,12 @@ import { useState, useEffect, useMemo } from '@wordpress/element';
 import { InputWithSlider } from './input-with-slider';
 import type { HslInputProps } from './types';
 
-export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
-	const colorPropHSLA = useMemo( () => color.toHsl(), [ color ] );
-
-	const [ internalHSLA, setInternalHSLA ] = useState( { ...colorPropHSLA } );
-
-	const isInternalColorSameAsReceivedColor = color.isEqual(
-		colord( internalHSLA )
-	);
-
-	useEffect( () => {
-		if ( ! isInternalColorSameAsReceivedColor ) {
-			// Keep internal HSLA color up to date with the received color prop
-			setInternalHSLA( colorPropHSLA );
-		}
-	}, [ colorPropHSLA, isInternalColorSameAsReceivedColor ] );
-
-	// If the internal color is equal to the received color prop, we can use the
-	// HSLA values from the local state which, compared to the received color prop,
-	// retain more details about the actual H and S values that the user selected,
-	// and thus allow for better UX when interacting with the H and S sliders.
-	const colorValue = isInternalColorSameAsReceivedColor
-		? internalHSLA
-		: colorPropHSLA;
-
-	const updateHSLAValue = (
-		partialNewValue: Partial< typeof colorPropHSLA >
-	) => {
-		const nextOnChangeValue = colord( {
-			...colorValue,
+export const HslInput = ( { hsla, onChange, enableAlpha }: HslInputProps ) => {
+	const updateHSLAValue = ( partialNewValue: Partial< HslaColor > ) => {
+		onChange( {
+			...hsla,
 			...partialNewValue,
 		} );
-
-		// Fire `onChange` only if the resulting color is different from the
-		// current one.
-		// Otherwise, update the internal HSLA color to cause a re-render.
-		if ( ! color.isEqual( nextOnChangeValue ) ) {
-			onChange( nextOnChangeValue );
-		} else {
-			setInternalHSLA( ( prevHSLA ) => ( {
-				...prevHSLA,
-				...partialNewValue,
-			} ) );
-		}
 	};
 
 	return (
@@ -66,7 +24,7 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 359 }
 				label="Hue"
 				abbreviation="H"
-				value={ colorValue.h }
+				value={ hsla.h }
 				onChange={ ( nextH: number ) => {
 					updateHSLAValue( { h: nextH } );
 				} }
@@ -76,7 +34,7 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Saturation"
 				abbreviation="S"
-				value={ colorValue.s }
+				value={ hsla.s }
 				onChange={ ( nextS: number ) => {
 					updateHSLAValue( { s: nextS } );
 				} }
@@ -86,7 +44,7 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 				max={ 100 }
 				label="Lightness"
 				abbreviation="L"
-				value={ colorValue.l }
+				value={ hsla.l }
 				onChange={ ( nextL: number ) => {
 					updateHSLAValue( { l: nextL } );
 				} }
@@ -97,7 +55,7 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 					max={ 100 }
 					label="Alpha"
 					abbreviation="A"
-					value={ Math.trunc( 100 * colorValue.a ) }
+					value={ Math.trunc( 100 * hsla.a ) }
 					onChange={ ( nextA: number ) => {
 						updateHSLAValue( { a: nextA / 100 } );
 					} }

package/src/color-picker/picker.tsx

@@ -1,40 +1,44 @@
 /**
  * External dependencies
  */
-import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
-import { colord } from 'colord';
+import { HslColorPicker, HslaColorPicker } from 'react-colorful';
 
-/**
- * WordPress dependencies
- */
-import { useMemo } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 import type { PickerProps } from './types';
 
-export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
-	const Component = enableAlpha
-		? RgbaStringColorPicker
-		: RgbStringColorPicker;
-	const rgbColor = useMemo( () => color.toRgbString(), [ color ] );
+// 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 );
+	},
+};
+
+export const Picker = ( { hsla, enableAlpha, onChange }: PickerProps ) => {
+	if ( enableAlpha ) {
+		return (
+			<HslaColorPicker
+				color={ hsla }
+				onChange={ onChange }
+				{ ...pointerCaptureProps }
+			/>
+		);
+	}
 
 	return (
-		<Component
-			color={ rgbColor }
+		<HslColorPicker
+			color={ hsla }
 			onChange={ ( nextColor ) => {
-				onChange( colord( nextColor ) );
-			} }
-			// 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.
-			onPointerDown={ ( { currentTarget, pointerId } ) => {
-				currentTarget.setPointerCapture( pointerId );
-			} }
-			onPointerUp={ ( { currentTarget, pointerId } ) => {
-				currentTarget.releasePointerCapture( pointerId );
+				onChange( { ...nextColor, a: hsla.a } );
 			} }
+			{ ...pointerCaptureProps }
 		/>
 	);
 };