@wordpress/components 18.0.0 → 19.0.3

package/src/color-picker/README.md

@@ -1,24 +1,53 @@
 # ColorPicker
 
-Accessible color picker.
-
-_Parts of the source code were derived and modified from [react-color](https://github.com/casesandberg/react-color/), released under the MIT license._
+`ColorPicker` is a color picking component based on `react-colorful`. It lets you pick a color visually or by manipulating the individual RGB(A), HSL(A) and Hex(8) color values.
 
 ## Usage
 
 ```jsx
-import { ColorPicker } from '@wordpress/components';
-import { useState } from '@wordpress/element';
-
-const MyColorPicker = () => {
-	const [ color, setColor ] = useState( '#f00' );
+import { ColorPicker } from '@wordpress/components/ui';
 
+function Example() {
+	const [color, setColor] = useState();
 	return (
 		<ColorPicker
-			color={ color }
-			onChangeComplete={ ( value ) => setColor( value.hex ) }
-			disableAlpha
+			color={color}
+			onChange={setColor}
+			enableAlpha
+			defaultValue="#000"
 		/>
 	);
-};
+}
 ```
+
+## Props
+
+### `color`
+
+**Type**: `string`
+
+The current color value to display in the picker. Must be a hex or hex8 string.
+
+### `onChange`
+
+**Type**: `(hex8Color: string) => void`
+
+Fired when the color changes. Always passes a hex8 color string.
+
+### `enableAlpha`
+
+**Type**: `boolean`
+
+Defaults to `false`. When `true` the color picker will display the alpha channel both in the bottom inputs as well as in the color picker itself.
+
+### `defaultValue`
+
+**Type**: `string | undefined`
+
+An optional default value to use for the color picker.
+
+### `copyFormat`
+
+**Type**: `'hex' | 'hsl' | 'rgb' | undefined`
+
+The format to copy when clicking the displayed color format.

package/src/{ui/color-picker → color-picker}/color-display.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import colorize, { ColorFormats } from 'tinycolor2';
+import { colord, extend, Colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -13,20 +13,20 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Text } from '../../text';
-import { Flex, FlexItem } from '../../flex';
-import { Tooltip } from '../tooltip';
+import { Text } from '../text';
+import { Flex, FlexItem } from '../flex';
+import { Tooltip } from '../ui/tooltip';
 import type { ColorType } from './types';
-import { space } from '../utils/space';
+import { space } from '../ui/utils/space';
 
 interface ColorDisplayProps {
-	color: ColorFormats.HSLA;
+	color: Colord;
 	colorType: ColorType;
 	enableAlpha: boolean;
 }
 
 interface DisplayProps {
-	color: ColorFormats.HSLA;
+	color: Colord;
 	enableAlpha: boolean;
 }
 
@@ -50,7 +50,7 @@ const ValueDisplay = ( { values }: ValueDisplayProps ) => (
 );
 
 const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { h, s, l, a } = colorize( color ).toHsl();
+	const { h, s, l, a } = color.toHsl();
 
 	const values: Values = [
 		[ Math.floor( h ), 'H' ],
@@ -65,7 +65,7 @@ const HslDisplay = ( { color, enableAlpha }: DisplayProps ) => {
 };
 
 const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const { r, g, b, a } = colorize( color ).toRgb();
+	const { r, g, b, a } = color.toRgb();
 
 	const values: Values = [
 		[ r, 'R' ],
@@ -80,14 +80,8 @@ const RgbDisplay = ( { color, enableAlpha }: DisplayProps ) => {
 	return <ValueDisplay values={ values } />;
 };
 
-const HexDisplay = ( { color, enableAlpha }: DisplayProps ) => {
-	const colorized = colorize( color );
-	const colorWithoutHash = ( enableAlpha
-		? colorized.toHex8String()
-		: colorized.toHexString()
-	)
-		.slice( 1 )
-		.toUpperCase();
+const HexDisplay = ( { color }: DisplayProps ) => {
+	const colorWithoutHash = color.toHex().slice( 1 ).toUpperCase();
 	return (
 		<FlexItem>
 			<Text color="blue">#</Text>
@@ -114,24 +108,21 @@ export const ColorDisplay = ( {
 	enableAlpha,
 }: ColorDisplayProps ) => {
 	const [ copiedColor, setCopiedColor ] = useState< string | null >( null );
-	const copyTimer = useRef< number | undefined >();
+	const copyTimer = useRef< ReturnType< typeof setTimeout > | undefined >();
 	const props = { color, enableAlpha };
 	const Component = getComponent( colorType );
 	const copyRef = useCopyToClipboard< HTMLDivElement >(
 		() => {
 			switch ( colorType ) {
 				case 'hsl': {
-					return colorize( color ).toHslString();
+					return color.toHslString();
 				}
 				case 'rgb': {
-					return colorize( color ).toRgbString();
+					return color.toRgbString();
 				}
 				default:
 				case 'hex': {
-					const colorized = colorize( color );
-					return enableAlpha
-						? colorized.toHex8String()
-						: colorized.toHexString();
+					return color.toHex();
 				}
 			}
 		},
@@ -139,7 +130,7 @@ export const ColorDisplay = ( {
 			if ( copyTimer.current ) {
 				clearTimeout( copyTimer.current );
 			}
-			setCopiedColor( colorize( color ).toHex8String() );
+			setCopiedColor( color.toHex() );
 			copyTimer.current = setTimeout( () => {
 				setCopiedColor( null );
 				copyTimer.current = undefined;
@@ -158,7 +149,7 @@ export const ColorDisplay = ( {
 		<Tooltip
 			content={
 				<Text color="white">
-					{ copiedColor === colorize( color ).toHex8String()
+					{ copiedColor === color.toHex()
 						? __( 'Copied!' )
 						: __( 'Copy' ) }
 				</Text>

package/src/{ui/color-picker → color-picker}/color-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ColorFormats } from 'tinycolor2';
+import { colord, extend, Colord } from 'colord';
 
 /**
  * Internal dependencies
@@ -12,8 +12,8 @@ import { HexInput } from './hex-input';
 
 interface ColorInputProps {
 	colorType: 'hsl' | 'hex' | 'rgb';
-	color: ColorFormats.HSLA;
-	onChange: ( value: ColorFormats.HSLA ) => void;
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
 	enableAlpha: boolean;
 }
 

package/src/{ui/color-picker → color-picker}/component.tsx

@@ -2,15 +2,15 @@
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-import type { Ref } from 'react';
-import type { ColorFormats } from 'tinycolor2';
+import { Ref, useCallback } from 'react';
+import { colord, extend, Colord } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+import { useState, useMemo } from '@wordpress/element';
 import { settings } from '@wordpress/icons';
-import { useDebounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 
 /**
@@ -20,9 +20,9 @@ import {
 	useContextSystem,
 	contextConnect,
 	WordPressComponentProps,
-} from '../context';
-import { HStack } from '../../h-stack';
-import { Spacer } from '../../spacer';
+} from '../ui/context';
+import { HStack } from '../h-stack';
+import { Spacer } from '../spacer';
 import {
 	ColorfulWrapper,
 	SelectControl,
@@ -32,15 +32,16 @@ import {
 import { ColorDisplay } from './color-display';
 import { ColorInput } from './color-input';
 import { Picker } from './picker';
-import { useControlledValue } from '../../utils/hooks';
 
 import type { ColorType } from './types';
 
+extend( [ namesPlugin ] );
+
 export interface ColorPickerProps {
 	enableAlpha?: boolean;
-	color?: ColorFormats.HSL | ColorFormats.HSLA;
-	onChange?: ( color: ColorFormats.HSL | ColorFormats.HSLA ) => void;
-	defaultValue?: ColorFormats.HSL | ColorFormats.HSLA;
+	color?: string;
+	onChange?: ( color: string ) => void;
+	defaultValue?: string;
 	copyFormat?: ColorType;
 }
 
@@ -50,42 +51,30 @@ const options = [
 	{ label: 'Hex', value: 'hex' as const },
 ];
 
-const getSafeColor = (
-	color: ColorFormats.HSL | ColorFormats.HSLA | undefined
-): ColorFormats.HSLA => {
-	return color ? { a: 1, ...color } : { h: 0, s: 0, l: 100, a: 1 };
-};
-
 const ColorPicker = (
 	props: WordPressComponentProps< ColorPickerProps, 'div', false >,
 	forwardedRef: Ref< any >
 ) => {
 	const {
 		enableAlpha = false,
-		color: colorProp,
+		color,
 		onChange,
-		defaultValue,
+		defaultValue = '#fff',
 		copyFormat,
 		...divProps
 	} = useContextSystem( props, 'ColorPicker' );
 
-	const [ color, setColor ] = useControlledValue( {
-		onChange,
-		value: colorProp,
-		defaultValue,
-	} );
-
-	// Debounce to prevent rapid changes from conflicting with one another.
-	const debouncedSetColor = useDebounce( setColor );
-
-	const handleChange = (
-		nextValue: ColorFormats.HSLA | ColorFormats.HSL
-	) => {
-		debouncedSetColor( nextValue );
-	};
-
 	// Use a safe default value for the color and remove the possibility of `undefined`.
-	const safeColor = getSafeColor( color );
+	const safeColordColor = useMemo( () => {
+		return color ? colord( color ) : colord( defaultValue );
+	}, [ color, defaultValue ] );
+
+	const handleChange = useCallback(
+		( nextValue: Colord ) => {
+			onChange( nextValue.toHex() );
+		},
+		[ onChange ]
+	);
 
 	const [ showInputs, setShowInputs ] = useState< boolean >( false );
 	const [ colorType, setColorType ] = useState< ColorType >(
@@ -96,7 +85,7 @@ const ColorPicker = (
 		<ColorfulWrapper ref={ forwardedRef } { ...divProps }>
 			<Picker
 				onChange={ handleChange }
-				color={ safeColor }
+				color={ safeColordColor }
 				enableAlpha={ enableAlpha }
 			/>
 			<AuxiliaryColorArtefactWrapper>
@@ -113,7 +102,7 @@ const ColorPicker = (
 						/>
 					) : (
 						<ColorDisplay
-							color={ safeColor }
+							color={ safeColordColor }
 							colorType={ copyFormat || colorType }
 							enableAlpha={ enableAlpha }
 						/>
@@ -134,7 +123,7 @@ const ColorPicker = (
 				{ showInputs && (
 					<ColorInput
 						colorType={ colorType }
-						color={ safeColor }
+						color={ safeColordColor }
 						onChange={ handleChange }
 						enableAlpha={ enableAlpha }
 					/>

package/src/{ui/color-picker → color-picker}/hex-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import colorize, { ColorFormats } from 'tinycolor2';
+import { colord, Colord } from 'colord';
 
 /**
  * WordPress dependencies
@@ -11,29 +11,24 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { Text } from '../../text';
-import { Spacer } from '../../spacer';
-import { space } from '../utils/space';
+import { Text } from '../text';
+import { Spacer } from '../spacer';
+import { space } from '../ui/utils/space';
 import { ColorHexInputControl } from './styles';
 
 interface HexInputProps {
-	color: ColorFormats.HSLA;
-	onChange: ( value: ColorFormats.HSLA ) => void;
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
 	enableAlpha: boolean;
 }
 
 export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 	const handleValidate = ( value: string ) => {
-		if ( ! colorize( value ).isValid() ) {
+		if ( ! colord( '#' + value ).isValid() ) {
 			throw new Error( 'Invalid hex color input' );
 		}
 	};
 
-	const colorized = colorize( color );
-	const value = enableAlpha
-		? colorized.toHex8String()
-		: colorized.toHexString();
-
 	return (
 		<ColorHexInputControl
 			prefix={
@@ -46,10 +41,10 @@ export const HexInput = ( { color, onChange, enableAlpha }: HexInputProps ) => {
 					#
 				</Spacer>
 			}
-			value={ value.slice( 1 ).toUpperCase() }
-			onChange={ ( nextValue ) =>
-				onChange( colorize( nextValue ).toHsl() )
-			}
+			value={ color.toHex().slice( 1 ).toUpperCase() }
+			onChange={ ( nextValue ) => {
+				onChange( colord( '#' + nextValue ) );
+			} }
 			onValidate={ handleValidate }
 			maxLength={ enableAlpha ? 8 : 6 }
 			label={ __( 'Hex color' ) }

package/src/{ui/color-picker → color-picker}/hsl-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import type { ColorFormats } from 'tinycolor2';
+import { colord, Colord } from 'colord';
 
 /**
  * Internal dependencies
@@ -9,45 +9,59 @@ import type { ColorFormats } from 'tinycolor2';
 import { InputWithSlider } from './input-with-slider';
 
 interface HslInputProps {
-	color: ColorFormats.HSLA;
-	onChange: ( color: ColorFormats.HSLA ) => void;
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
 	enableAlpha: boolean;
 }
 
 export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
-	const { h, s, l, a } = color;
+	const { h, s, l, a } = color.toHsl();
 
 	return (
 		<>
 			<InputWithSlider
-				min={ 1 }
-				max={ 360 }
+				min={ 0 }
+				max={ 359 }
 				label="Hue"
 				abbreviation="H"
-				value={ Math.trunc( h ) }
-				onChange={ ( nextH: number ) =>
-					onChange( { h: nextH, s, l, a } )
-				}
+				value={ h }
+				onChange={ ( nextH: number ) => {
+					onChange( colord( { h: nextH, s, l, a } ) );
+				} }
 			/>
 			<InputWithSlider
 				min={ 0 }
 				max={ 100 }
 				label="Saturation"
 				abbreviation="S"
-				value={ s <= 1 ? Math.trunc( 100 * s ) : s }
-				onChange={ ( nextS: number ) =>
-					onChange( { h, s: nextS / 100, l, a } )
-				}
+				value={ s }
+				onChange={ ( nextS: number ) => {
+					onChange(
+						colord( {
+							h,
+							s: nextS,
+							l,
+							a,
+						} )
+					);
+				} }
 			/>
 			<InputWithSlider
 				min={ 0 }
 				max={ 100 }
 				label="Lightness"
 				abbreviation="L"
-				value={ l <= 1 ? Math.trunc( 100 * l ) : l }
-				onChange={ ( nextL: number ) =>
-					onChange( { h, s, l: nextL / 100, a } )
-				}
+				value={ l }
+				onChange={ ( nextL: number ) => {
+					onChange(
+						colord( {
+							h,
+							s,
+							l: nextL,
+							a,
+						} )
+					);
+				} }
 			/>
 			{ enableAlpha && (
 				<InputWithSlider
@@ -56,14 +70,16 @@ export const HslInput = ( { color, onChange, enableAlpha }: HslInputProps ) => {
 					label="Alpha"
 					abbreviation="A"
 					value={ Math.trunc( 100 * a ) }
-					onChange={ ( nextA: number ) =>
-						onChange( {
-							h,
-							s,
-							l,
-							a: nextA / 100,
-						} )
-					}
+					onChange={ ( nextA: number ) => {
+						onChange(
+							colord( {
+								h,
+								s,
+								l,
+								a: nextA / 100,
+							} )
+						);
+					} }
 				/>
 			) }
 		</>

package/src/color-picker/index.native.js

@@ -3,7 +3,8 @@
  */
 import { View, Text, TouchableWithoutFeedback, Platform } from 'react-native';
 import HsvColorPicker from 'react-native-hsv-color-picker';
-import tinycolor from 'tinycolor2';
+import { colord, extend } from 'colord';
+import namesPlugin from 'colord/plugins/names';
 /**
  * WordPress dependencies
  */
@@ -17,6 +18,8 @@ import { Icon, check, close } from '@wordpress/icons';
  */
 import styles from './style.scss';
 
+extend( [ namesPlugin ] );
+
 function ColorPicker( {
 	shouldEnableBottomSheetScroll,
 	shouldEnableBottomSheetMaxHeight,
@@ -35,11 +38,11 @@ function ColorPicker( {
 	const hitSlop = { top: 22, bottom: 22, left: 22, right: 22 };
 	const { h: initH, s: initS, v: initV } =
 		! isGradientColor && activeColor
-			? tinycolor( activeColor ).toHsv()
-			: { h: 0, s: 0.5, v: 0.5 };
+			? colord( activeColor ).toHsv()
+			: { h: 0, s: 50, v: 50 };
 	const [ hue, setHue ] = useState( initH );
-	const [ sat, setSaturation ] = useState( initS );
-	const [ val, setValue ] = useState( initV );
+	const [ sat, setSaturation ] = useState( initS / 100 );
+	const [ val, setValue ] = useState( initV / 100 );
 	const [ savedColor ] = useState( activeColor );
 
 	const {
@@ -71,9 +74,11 @@ function ColorPicker( {
 		styles.footerDark
 	);
 
-	const currentColor = tinycolor(
-		`hsv ${ hue } ${ sat } ${ val }`
-	).toHexString();
+	const currentColor = colord( {
+		h: hue,
+		s: sat * 100,
+		v: val * 100,
+	} ).toHex();
 
 	useEffect( () => {
 		if ( ! didMount.current ) {
@@ -205,4 +210,4 @@ function ColorPicker( {
 	);
 }
 
-export default ColorPicker;
+export { ColorPicker };

package/src/{ui/color-picker → color-picker}/index.ts

@@ -1 +1,4 @@
+/**
+ * Internal dependencies
+ */
 export { LegacyAdapter as ColorPicker } from './legacy-adapter';

package/src/{ui/color-picker → color-picker}/input-with-slider.tsx

@@ -1,10 +1,10 @@
 /**
  * Internal dependencies
  */
-import { HStack } from '../../h-stack';
-import { Text } from '../../text';
-import { Spacer } from '../../spacer';
-import { space } from '../utils/space';
+import { HStack } from '../h-stack';
+import { Text } from '../text';
+import { Spacer } from '../spacer';
+import { space } from '../ui/utils/space';
 import { RangeControl, NumberControlWrapper } from './styles';
 
 interface InputWithSliderProps {

package/src/color-picker/picker.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
+import { colord, Colord } from 'colord';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+interface PickerProps {
+	color: Colord;
+	enableAlpha: boolean;
+	onChange: ( nextColor: Colord ) => void;
+}
+
+export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
+	const Component = enableAlpha
+		? RgbaStringColorPicker
+		: RgbStringColorPicker;
+	const rgbColor = useMemo( () => color.toRgbString(), [ color ] );
+
+	return (
+		<Component
+			color={ rgbColor }
+			onChange={ ( nextColor ) => {
+				onChange( colord( nextColor ) );
+			} }
+		/>
+	);
+};

package/src/{ui/color-picker → color-picker}/rgb-input.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import colorize, { ColorFormats } from 'tinycolor2';
+import { colord, Colord } from 'colord';
 
 /**
  * Internal dependencies
@@ -9,13 +9,13 @@ import colorize, { ColorFormats } from 'tinycolor2';
 import { InputWithSlider } from './input-with-slider';
 
 interface RgbInputProps {
-	color: ColorFormats.HSLA;
-	onChange: ( color: ColorFormats.HSLA ) => void;
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
 	enableAlpha: boolean;
 }
 
 export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
-	const { r, g, b, a } = colorize( color ).toRgb();
+	const { r, g, b, a } = color.toRgb();
 
 	return (
 		<>
@@ -26,7 +26,7 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 				abbreviation="R"
 				value={ r }
 				onChange={ ( nextR: number ) =>
-					onChange( colorize( { r: nextR, g, b, a } ).toHsl() )
+					onChange( colord( { r: nextR, g, b, a } ) )
 				}
 			/>
 			<InputWithSlider
@@ -36,7 +36,7 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 				abbreviation="G"
 				value={ g }
 				onChange={ ( nextG: number ) =>
-					onChange( colorize( { r, g: nextG, b, a } ).toHsl() )
+					onChange( colord( { r, g: nextG, b, a } ) )
 				}
 			/>
 			<InputWithSlider
@@ -46,7 +46,7 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 				abbreviation="B"
 				value={ b }
 				onChange={ ( nextB: number ) =>
-					onChange( colorize( { r, g, b: nextB, a } ).toHsl() )
+					onChange( colord( { r, g, b: nextB, a } ) )
 				}
 			/>
 			{ enableAlpha && (
@@ -58,12 +58,12 @@ export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 					value={ Math.trunc( a * 100 ) }
 					onChange={ ( nextA: number ) =>
 						onChange(
-							colorize( {
+							colord( {
 								r,
 								g,
 								b,
 								a: nextA / 100,
-							} ).toHsl()
+							} )
 						)
 					}
 				/>