@wordpress/components 23.6.0 → 23.7.0

package/src/color-picker/legacy-adapter.tsx

@@ -2,10 +2,9 @@
  * Internal dependencies
  */
 import ColorPicker from './component';
+import type { LegacyAdapterProps } from './types';
 import { useDeprecatedProps } from './use-deprecated-props';
 
-type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
-
 export const LegacyAdapter = ( props: LegacyAdapterProps ) => {
 	return <ColorPicker { ...useDeprecatedProps( props ) } />;
 };

package/src/color-picker/picker.tsx

@@ -2,17 +2,16 @@
  * External dependencies
  */
 import { RgbStringColorPicker, RgbaStringColorPicker } from 'react-colorful';
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * WordPress dependencies
  */
 import { useMemo } from '@wordpress/element';
-interface PickerProps {
-	color: Colord;
-	enableAlpha: boolean;
-	onChange: ( nextColor: Colord ) => void;
-}
+/**
+ * Internal dependencies
+ */
+import type { PickerProps } from './types';
 
 export const Picker = ( { color, enableAlpha, onChange }: PickerProps ) => {
 	const Component = enableAlpha

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

@@ -1,18 +1,13 @@
 /**
  * External dependencies
  */
-import { colord, Colord } from 'colord';
+import { colord } from 'colord';
 
 /**
  * Internal dependencies
  */
 import { InputWithSlider } from './input-with-slider';
-
-interface RgbInputProps {
-	color: Colord;
-	onChange: ( nextColor: Colord ) => void;
-	enableAlpha: boolean;
-}
+import type { RgbInputProps } from './types';
 
 export const RgbInput = ( { color, onChange, enableAlpha }: RgbInputProps ) => {
 	const { r, g, b, a } = color.toRgb();

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

@@ -0,0 +1,51 @@
+/**
+ * External dependencies
+ */
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+
+/**
+ * WordPress dependencies
+ */
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ColorPicker } from '../component';
+
+const meta: ComponentMeta< typeof ColorPicker > = {
+	component: ColorPicker,
+	title: 'Components/ColorPicker',
+	argTypes: {
+		as: { control: { type: null } },
+		color: { control: { type: null } },
+	},
+	parameters: {
+		actions: { argTypesRegex: '^on.*' },
+		controls: {
+			expanded: true,
+		},
+		docs: { source: { state: 'open' } },
+	},
+};
+export default meta;
+
+const Template: ComponentStory< typeof ColorPicker > = ( {
+	onChange,
+	...props
+} ) => {
+	const [ color, setColor ] = useState< string | undefined >();
+
+	return (
+		<ColorPicker
+			{ ...props }
+			color={ color }
+			onChange={ ( ...changeArgs ) => {
+				onChange?.( ...changeArgs );
+				setColor( ...changeArgs );
+			} }
+		/>
+	);
+};
+
+export const Default = Template.bind( {} );

package/src/color-picker/test/{index.js → index.tsx}

@@ -9,34 +9,37 @@ import { render, fireEvent, waitFor } from '@testing-library/react';
 import { ColorPicker } from '..';
 
 /**
- * Ordinarily we'd try to select the compnoent by role but the silder role appears
+ * Ordinarily we'd try to select the component by role but the slider role appears
  * on several elements and we'd end up encoding assumptions about order when
- * trying to select the appropriate element. We might as well just use the classname
+ * trying to select the appropriate element. We might as well just use the class name
  * on the container which will be more durable if, for example, the order changes.
- *
- * @param {HTMLElement} container
- * @return {HTMLElement} The saturation element
  */
-function getSaturation( container ) {
+function getSaturation( container: HTMLElement ) {
 	return container.querySelector(
 		'.react-colorful__saturation .react-colorful__interactive'
 	);
 }
 
+type PageXPageY = { pageX: number; pageY: number };
+
 // Fix to pass `pageX` and `pageY`
 // See https://github.com/testing-library/react-testing-library/issues/268
-class FakeMouseEvent extends window.MouseEvent {
-	constructor( type, values = {} ) {
+class FakeMouseEvent extends MouseEvent {
+	constructor( type: MouseEvent[ 'type' ], values?: PageXPageY ) {
 		super( type, { buttons: 1, bubbles: true, ...values } );
 
 		Object.assign( this, {
-			pageX: values.pageX || 0,
-			pageY: values.pageY || 0,
+			pageX: values?.pageX ?? 0,
+			pageY: values?.pageY ?? 0,
 		} );
 	}
 }
 
-function moveReactColorfulSlider( sliderElement, from, to ) {
+function moveReactColorfulSlider(
+	sliderElement: Element,
+	from: PageXPageY,
+	to: PageXPageY
+) {
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousedown', from ) );
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
 }
@@ -81,6 +84,13 @@ describe( 'ColorPicker', () => {
 			);
 
 			const saturation = getSaturation( container );
+
+			if ( saturation === null ) {
+				throw new Error( 'The saturation slider could not be found' );
+			}
+
+			expect( saturation ).toBeInTheDocument();
+
 			moveReactColorfulSlider(
 				saturation,
 				{ pageX: 0, pageY: 0 },
@@ -106,6 +116,13 @@ describe( 'ColorPicker', () => {
 		);
 
 		const saturation = getSaturation( container );
+
+		if ( saturation === null ) {
+			throw new Error( 'The saturation slider could not be found' );
+		}
+
+		expect( saturation ).toBeInTheDocument();
+
 		moveReactColorfulSlider(
 			saturation,
 			{ pageX: 0, pageY: 0 },
@@ -121,13 +138,7 @@ describe( 'ColorPicker', () => {
 
 	it( 'should fire onChange with the HSL value', async () => {
 		const onChange = jest.fn();
-		const color = {
-			h: 125,
-			s: 0.2,
-			l: 0.5,
-			// Add alpha to prove it's ignored.
-			a: 0.5,
-		};
+		const color = 'hsla(125, 20%, 50%, 0.5)';
 
 		const { container } = render(
 			<ColorPicker
@@ -138,6 +149,13 @@ describe( 'ColorPicker', () => {
 		);
 
 		const saturation = getSaturation( container );
+
+		if ( saturation === null ) {
+			throw new Error( 'The saturation slider could not be found' );
+		}
+
+		expect( saturation ).toBeInTheDocument();
+
 		moveReactColorfulSlider(
 			saturation,
 			{ pageX: 0, pageY: 0 },

package/src/color-picker/types.ts

@@ -1,10 +1,137 @@
 /**
  * External dependencies
  */
-import type { Colord } from 'colord';
+import type {
+	Colord,
+	HslColor,
+	HsvaColor,
+	HsvColor,
+	RgbaColor,
+	RgbColor,
+} from 'colord';
+import type { HslaColor } from 'react-colorful';
+/**
+ * Internal dependencies
+ */
+import type { WordPressComponentProps } from '../ui/context';
+import type { useDeprecatedProps } from './use-deprecated-props';
 
 export type ColorType = 'rgb' | 'hsl' | 'hex';
 export type ColorCopyButtonProps = {
 	color: Colord;
 	colorType: ColorType;
 };
+
+export type LegacyAdapterProps = Parameters< typeof useDeprecatedProps >[ 0 ];
+
+export type ColorPickerProps = WordPressComponentProps<
+	{
+		/**
+		 * When `true` the color picker will display the alpha channel both in
+		 * the bottom inputs as well as in the color picker itself.
+		 *
+		 * @default false
+		 */
+		enableAlpha?: boolean;
+		/**
+		 * The current color value to display in the picker.
+		 * Must be a hex or hex8 string.
+		 */
+		color?: string;
+		/**
+		 * Fired when the color changes. Always passes a hex or hex8 color string.
+		 */
+		onChange?: ( color: string ) => void;
+		/**
+		 * An optional default value to use for the color picker.
+		 */
+		defaultValue?: string;
+		/**
+		 * The format to copy when clicking the displayed color format.
+		 */
+		copyFormat?: ColorType;
+	},
+	'div',
+	false
+>;
+
+export interface PickerProps {
+	color: Colord;
+	enableAlpha: boolean;
+	onChange: ( nextColor: Colord ) => void;
+}
+
+export interface ColorInputProps {
+	colorType: 'hsl' | 'hex' | 'rgb';
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface InputWithSliderProps {
+	min: number;
+	max: number;
+	value: number;
+	label: string;
+	abbreviation: string;
+	onChange: ( value: number ) => void;
+}
+
+export interface HexInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface HslInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+export interface RgbInputProps {
+	color: Colord;
+	onChange: ( nextColor: Colord ) => void;
+	enableAlpha: boolean;
+}
+
+/**
+ * @deprecated
+ */
+export type LegacyColor =
+	| string
+	| {
+			hex: string;
+			hsl: HslColor | HslaColor;
+			hsv: HsvColor | HsvaColor;
+			rgb: RgbColor | RgbaColor;
+			/**
+			 * @deprecated
+			 */
+			oldHue: number;
+			/**
+			 * @deprecated
+			 */
+			source: 'hex';
+	  };
+
+/**
+ * @deprecated
+ */
+export interface LegacyProps {
+	color?: LegacyColor;
+	/**
+	 * @deprecated
+	 */
+	onChangeComplete: ( colors: LegacyColor ) => void;
+	/**
+	 * @deprecated
+	 */
+	oldHue: string;
+	className: string;
+	/**
+	 * @deprecated
+	 */
+	disableAlpha: boolean;
+	onChange?: never;
+}

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

@@ -1,16 +1,7 @@
 /**
  * External dependencies
  */
-import {
-	colord,
-	HslColor,
-	HslaColor,
-	HsvColor,
-	HsvaColor,
-	RgbColor,
-	RgbaColor,
-} from 'colord';
-import type { ComponentProps } from 'react';
+import { colord } from 'colord';
 import memoize from 'memize';
 
 /**
@@ -21,49 +12,7 @@ import { useCallback } from '@wordpress/element';
 /**
  * Internal dependencies
  */
-import type ColorPicker from './component';
-
-type ColorPickerProps = ComponentProps< typeof ColorPicker >;
-
-/**
- * @deprecated
- */
-type LegacyColor =
-	| string
-	| {
-			hex: string;
-			hsl: HslColor | HslaColor;
-			hsv: HsvColor | HsvaColor;
-			rgb: RgbColor | RgbaColor;
-			/**
-			 * @deprecated
-			 */
-			oldHue: number;
-			/**
-			 * @deprecated
-			 */
-			source: 'hex';
-	  };
-
-/**
- * @deprecated
- */
-export interface LegacyProps {
-	color?: LegacyColor;
-	/**
-	 * @deprecated
-	 */
-	onChangeComplete: ( colors: LegacyColor ) => void;
-	/**
-	 * @deprecated
-	 */
-	oldHue: string;
-	className: string;
-	/**
-	 * @deprecated
-	 */
-	disableAlpha: boolean;
-}
+import type { ColorPickerProps, LegacyColor, LegacyProps } from './types';
 
 function isLegacyProps( props: any ): props is LegacyProps {
 	return (

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

@@ -36,7 +36,7 @@ const meta: ComponentMeta< typeof ComboboxControl > = {
 };
 export default meta;
 
-const mapCountryOption = ( country: typeof countries[ number ] ) => ( {
+const mapCountryOption = ( country: ( typeof countries )[ number ] ) => ( {
 	value: country.code,
 	label: country.name,
 } );

package/src/custom-gradient-picker/{constants.js → constants.ts}

@@ -10,8 +10,8 @@ export const DEFAULT_LINEAR_GRADIENT_ANGLE = 180;
 
 export const HORIZONTAL_GRADIENT_ORIENTATION = {
 	type: 'angular',
-	value: 90,
-};
+	value: '90',
+} as const;
 
 export const GRADIENT_OPTIONS = [
 	{ value: 'linear-gradient', label: __( 'Linear' ) },