@wordpress/components 23.6.0 → 23.8.0

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

@@ -12,24 +12,30 @@ import {
 describe( 'It should serialize a gradient', () => {
 	test( 'serializeGradientColor', () => {
 		expect(
-			serializeGradientColor( { type: 'rgba', value: [ 1, 2, 3, 0.5 ] } )
+			serializeGradientColor( {
+				type: 'rgba',
+				value: [ '1', '2', '3', '0.5' ],
+			} )
 		).toBe( 'rgba(1,2,3,0.5)' );
 
 		expect(
-			serializeGradientColor( { type: 'rgb', value: [ 255, 0, 0 ] } )
+			serializeGradientColor( {
+				type: 'rgb',
+				value: [ '255', '0', '0' ],
+			} )
 		).toBe( 'rgb(255,0,0)' );
 	} );
 
 	test( 'serializeGradientPosition', () => {
-		expect( serializeGradientPosition( { type: '%', value: 70 } ) ).toBe(
+		expect( serializeGradientPosition( { type: '%', value: '70' } ) ).toBe(
 			'70%'
 		);
 
-		expect( serializeGradientPosition( { type: '%', value: 0 } ) ).toBe(
+		expect( serializeGradientPosition( { type: '%', value: '0' } ) ).toBe(
 			'0%'
 		);
 
-		expect( serializeGradientPosition( { type: 'px', value: 4 } ) ).toBe(
+		expect( serializeGradientPosition( { type: 'px', value: '4' } ) ).toBe(
 			'4px'
 		);
 	} );
@@ -38,35 +44,35 @@ describe( 'It should serialize a gradient', () => {
 		expect(
 			serializeGradientColorStop( {
 				type: 'rgba',
-				value: [ 1, 2, 3, 0.5 ],
-				length: { type: '%', value: 70 },
+				value: [ '1', '2', '3', '0.5' ],
+				length: { type: '%', value: '70' },
 			} )
 		).toBe( 'rgba(1,2,3,0.5) 70%' );
 
 		expect(
 			serializeGradientColorStop( {
 				type: 'rgb',
-				value: [ 255, 0, 0 ],
-				length: { type: '%', value: 0 },
+				value: [ '255', '0', '0' ],
+				length: { type: '%', value: '0' },
 			} )
 		).toBe( 'rgb(255,0,0) 0%' );
 
 		expect(
 			serializeGradientColorStop( {
 				type: 'rgba',
-				value: [ 1, 2, 3, 0.5 ],
-				length: { type: 'px', value: 100 },
+				value: [ '1', '2', '3', '0.5' ],
+				length: { type: 'px', value: '100' },
 			} )
 		).toBe( 'rgba(1,2,3,0.5) 100px' );
 	} );
 
 	test( 'serializeGradientOrientation', () => {
 		expect(
-			serializeGradientOrientation( { type: 'angular', value: 40 } )
+			serializeGradientOrientation( { type: 'angular', value: '40' } )
 		).toBe( '40deg' );
 
 		expect(
-			serializeGradientOrientation( { type: 'angular', value: 0 } )
+			serializeGradientOrientation( { type: 'angular', value: '0' } )
 		).toBe( '0deg' );
 	} );
 
@@ -74,17 +80,17 @@ describe( 'It should serialize a gradient', () => {
 		expect(
 			serializeGradient( {
 				type: 'linear-gradient',
-				orientation: { type: 'angular', value: 40 },
+				orientation: { type: 'angular', value: '40' },
 				colorStops: [
 					{
 						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 70 },
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '70' },
 					},
 					{
 						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
 					},
 				],
 			} )
@@ -98,13 +104,13 @@ describe( 'It should serialize a gradient', () => {
 				colorStops: [
 					{
 						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 70 },
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '70' },
 					},
 					{
 						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
 					},
 				],
 			} )
@@ -117,12 +123,12 @@ describe( 'It should serialize a gradient', () => {
 					{
 						type: 'hex',
 						value: '000',
-						length: { type: '%', value: 70 },
+						length: { type: '%', value: '70' },
 					},
 					{
 						type: 'hex',
 						value: 'fff',
-						length: { type: '%', value: 40 },
+						length: { type: '%', value: '40' },
 					},
 				],
 			} )
@@ -131,27 +137,27 @@ describe( 'It should serialize a gradient', () => {
 		expect(
 			serializeGradient( {
 				type: 'linear-gradient',
-				orientation: { type: 'angular', value: 0 },
+				orientation: { type: 'angular', value: '0' },
 				colorStops: [
 					{
 						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 0 },
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '0' },
 					},
 					{
 						type: 'rgba',
-						value: [ 255, 1, 1, 0.9 ],
-						length: { type: '%', value: 40 },
+						value: [ '255', '1', '1', '0.9' ],
+						length: { type: '%', value: '40' },
 					},
 					{
 						type: 'rgba',
-						value: [ 1, 2, 3, 0.5 ],
-						length: { type: '%', value: 100 },
+						value: [ '1', '2', '3', '0.5' ],
+						length: { type: '%', value: '100' },
 					},
 					{
 						type: 'rgba',
-						value: [ 10, 20, 30, 0.5 ],
-						length: { type: '%', value: 20 },
+						value: [ '10', '20', '30', '0.5' ],
+						length: { type: '%', value: '20' },
 					},
 				],
 			} )

package/src/custom-gradient-picker/types.ts

@@ -0,0 +1,119 @@
+/**
+ * External dependencies
+ */
+import type gradientParser from 'gradient-parser';
+
+export type CustomGradientPickerProps = {
+	/**
+	 * Start opting in to the new margin-free styles that will become the default
+	 * in a future version, currently scheduled to be WordPress 6.4. (The prop
+	 * can be safely removed once this happens.)
+	 *
+	 * @default false
+	 */
+	__nextHasNoMargin?: boolean;
+	/**
+	 * The current value of the gradient. Pass a css gradient string (See default value for example).
+	 * Optionally pass in a `null` value to specify no gradient is currently selected.
+	 *
+	 * @default 'linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%)'
+	 */
+	value?: string | null;
+	/**
+	 * The function called when a new gradient has been defined. It is passed to
+	 * the `currentGradient` as an argument.
+	 */
+	onChange: ( currentGradient: string ) => void;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type GradientAnglePickerProps = {
+	gradientAST:
+		| gradientParser.LinearGradientNode
+		| gradientParser.RepeatingLinearGradientNode;
+	hasGradient: boolean;
+	onChange: ( gradient: string ) => void;
+};
+
+export type GradientTypePickerProps = {
+	gradientAST: gradientParser.GradientNode;
+	hasGradient: boolean;
+	onChange: ( gradient: string ) => void;
+};
+
+export type ControlPoint = { color: string; position: number };
+
+export type CustomGradientBarProps = {
+	background: React.CSSProperties[ 'background' ];
+	hasGradient: boolean;
+	value: ControlPoint[];
+	onChange: ( newControlPoints: ControlPoint[] ) => void;
+	disableInserter?: boolean;
+	disableAlpha?: boolean;
+	__experimentalIsRenderedInSidebar?: boolean;
+};
+
+export type CustomGradientBarIdleState = { id: 'IDLE' };
+type CustomGradientBarMovingInserterState = {
+	id: 'MOVING_INSERTER';
+	insertPosition: number;
+};
+type CustomGradientBarInsertingControlPointState = {
+	id: 'INSERTING_CONTROL_POINT';
+	insertPosition: number;
+};
+type CustomGradientBarMovingControlPointState = { id: 'MOVING_CONTROL_POINT' };
+
+export type CustomGradientBarReducerState =
+	| CustomGradientBarIdleState
+	| CustomGradientBarMovingInserterState
+	| CustomGradientBarInsertingControlPointState
+	| CustomGradientBarMovingControlPointState;
+
+export type CustomGradientBarReducerAction =
+	| { type: 'MOVE_INSERTER'; insertPosition: number }
+	| { type: 'STOP_INSERTER_MOVE' }
+	| { type: 'OPEN_INSERTER' }
+	| { type: 'CLOSE_INSERTER' }
+	| { type: 'START_CONTROL_CHANGE' }
+	| { type: 'STOP_CONTROL_CHANGE' };
+
+export type ControlPointButtonProps = {
+	isOpen: boolean;
+	position: ControlPoint[ 'position' ];
+	color: string;
+};
+
+export type ControlPointsProps = {
+	disableRemove: boolean;
+	disableAlpha: boolean;
+	gradientPickerDomRef: React.RefObject< HTMLDivElement >;
+	ignoreMarkerPosition?: number;
+	value: ControlPoint[];
+	onChange: ( controlPoints: ControlPoint[] ) => void;
+	onStartControlPointChange: () => void;
+	onStopControlPointChange: () => void;
+	__experimentalIsRenderedInSidebar: boolean;
+};
+
+export type ControlPointMoveState = {
+	initialPosition: number;
+	index: number;
+	significantMoveHappened: boolean;
+	listenersActivated: boolean;
+};
+
+export type InsertPointProps = {
+	value: ControlPoint[];
+	onChange: ( controlPoints: ControlPoint[] ) => void;
+	onOpenInserter: () => void;
+	onCloseInserter: () => void;
+	insertPosition: number;
+	disableAlpha: boolean;
+	__experimentalIsRenderedInSidebar: boolean;
+};

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

@@ -1,5 +1,3 @@
-// @ts-nocheck
-
 /**
  * External dependencies
  */
@@ -16,10 +14,13 @@ import {
 	DIRECTIONAL_ORIENTATION_ANGLE_MAP,
 } from './constants';
 import { serializeGradient } from './serializer';
+import type { ControlPoint } from './types';
 
 extend( [ namesPlugin ] );
 
-export function getLinearGradientRepresentation( gradientAST ) {
+export function getLinearGradientRepresentation(
+	gradientAST: gradientParser.GradientNode
+) {
 	return serializeGradient( {
 		type: 'linear-gradient',
 		orientation: HORIZONTAL_GRADIENT_ORIENTATION,
@@ -27,29 +28,41 @@ export function getLinearGradientRepresentation( gradientAST ) {
 	} );
 }
 
-function hasUnsupportedLength( item ) {
+function hasUnsupportedLength( item: gradientParser.ColorStop ) {
 	return item.length === undefined || item.length.type !== '%';
 }
 
-export function getGradientAstWithDefault( value ) {
+export function getGradientAstWithDefault( value?: string | null ) {
 	// gradientAST will contain the gradient AST as parsed by gradient-parser npm module.
 	// More information of its structure available at https://www.npmjs.com/package/gradient-parser#ast.
-	let gradientAST;
+	let gradientAST: gradientParser.GradientNode | undefined;
+	let hasGradient = !! value;
+
+	const valueToParse = value ?? DEFAULT_GRADIENT;
 
 	try {
-		gradientAST = gradientParser.parse( value )[ 0 ];
-		gradientAST.value = value;
+		gradientAST = gradientParser.parse( valueToParse )[ 0 ];
 	} catch ( error ) {
+		// eslint-disable-next-line no-console
+		console.warn(
+			'wp.components.CustomGradientPicker failed to parse the gradient with error',
+			error
+		);
+
 		gradientAST = gradientParser.parse( DEFAULT_GRADIENT )[ 0 ];
-		gradientAST.value = DEFAULT_GRADIENT;
+		hasGradient = false;
 	}
 
-	if ( gradientAST.orientation?.type === 'directional' ) {
-		gradientAST.orientation.type = 'angular';
-		gradientAST.orientation.value =
-			DIRECTIONAL_ORIENTATION_ANGLE_MAP[
+	if (
+		! Array.isArray( gradientAST.orientation ) &&
+		gradientAST.orientation?.type === 'directional'
+	) {
+		gradientAST.orientation = {
+			type: 'angular',
+			value: DIRECTIONAL_ORIENTATION_ANGLE_MAP[
 				gradientAST.orientation.value
-			].toString();
+			].toString(),
+		};
 	}
 
 	if ( gradientAST.colorStops.some( hasUnsupportedLength ) ) {
@@ -57,19 +70,18 @@ export function getGradientAstWithDefault( value ) {
 		const step = 100 / ( colorStops.length - 1 );
 		colorStops.forEach( ( stop, index ) => {
 			stop.length = {
-				value: step * index,
+				value: `${ step * index }`,
 				type: '%',
 			};
 		} );
-		gradientAST.value = serializeGradient( gradientAST );
 	}
 
-	return gradientAST;
+	return { gradientAST, hasGradient };
 }
 
 export function getGradientAstWithControlPoints(
-	gradientAST,
-	newControlPoints
+	gradientAST: gradientParser.GradientNode,
+	newControlPoints: ControlPoint[]
 ) {
 	return {
 		...gradientAST,
@@ -81,13 +93,16 @@ export function getGradientAstWithControlPoints(
 					value: position?.toString(),
 				},
 				type: a < 1 ? 'rgba' : 'rgb',
-				value: a < 1 ? [ r, g, b, a ] : [ r, g, b ],
+				value:
+					a < 1
+						? [ `${ r }`, `${ g }`, `${ b }`, `${ a }` ]
+						: [ `${ r }`, `${ g }`, `${ b }` ],
 			};
 		} ),
-	};
+	} as gradientParser.GradientNode;
 }
 
-export function getStopCssColor( colorStop ) {
+export function getStopCssColor( colorStop: gradientParser.ColorStop ) {
 	switch ( colorStop.type ) {
 		case 'hex':
 			return `#${ colorStop.value }`;

package/src/custom-select-control/test/index.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { render, fireEvent, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -9,7 +10,8 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import CustomSelectControl from '..';
 
 describe( 'CustomSelectControl', () => {
-	it( 'Captures the keypress event and does not let it propagate', () => {
+	it( 'Captures the keypress event and does not let it propagate', async () => {
+		const user = userEvent.setup();
 		const onKeyDown = jest.fn();
 		const options = [
 			{
@@ -39,10 +41,10 @@ describe( 'CustomSelectControl', () => {
 			</div>
 		);
 		const toggleButton = screen.getByRole( 'button' );
-		fireEvent.click( toggleButton );
+		await user.click( toggleButton );
 
 		const customSelect = screen.getByRole( 'listbox' );
-		fireEvent.keyDown( customSelect );
+		await user.type( customSelect, '{enter}' );
 
 		expect( onKeyDown ).toHaveBeenCalledTimes( 0 );
 	} );

package/src/drop-zone/index.tsx

@@ -120,30 +120,34 @@ export function DropZoneComponent( {
 
 	let children;
 	const backdrop = {
-		hidden: { scaleY: 0, opacity: 0 },
+		hidden: { opacity: 0 },
 		show: {
-			scaleY: 1,
 			opacity: 1,
 			transition: {
 				type: 'tween',
 				duration: 0.2,
-				delay: 0.1,
-				delayChildren: 0.2,
+				delay: 0,
+				delayChildren: 0.1,
 			},
 		},
 		exit: {
-			scaleY: 1,
 			opacity: 0,
 			transition: {
-				duration: 0.3,
+				duration: 0.2,
 				delayChildren: 0,
 			},
 		},
 	};
 
 	const foreground = {
-		hidden: { opacity: 0, scale: 0.75 },
-		show: { opacity: 1, scale: 1 },
+		hidden: { opacity: 0, scale: 0.9 },
+		show: {
+			opacity: 1,
+			scale: 1,
+			transition: {
+				duration: 0.1,
+			},
+		},
 		exit: { opacity: 0, scale: 0.9 },
 	};
 

package/src/drop-zone/style.scss

@@ -38,7 +38,7 @@
 }
 
 .components-drop-zone__content-icon {
-	margin: 0 auto;
+	margin: 0 auto $grid-unit-10;
 	line-height: 0;
 	fill: currentColor;
 	pointer-events: none;

package/src/{color-list-picker → duotone-picker/color-list-picker}/index.tsx

@@ -7,11 +7,11 @@ import { swatch } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import Button from '../button';
-import ColorPalette from '../color-palette';
-import ColorIndicator from '../color-indicator';
-import Icon from '../icon';
-import { HStack } from '../h-stack';
+import Button from '../../button';
+import ColorPalette from '../../color-palette';
+import ColorIndicator from '../../color-indicator';
+import Icon from '../../icon';
+import { HStack } from '../../h-stack';
 import type { ColorListPickerProps, ColorOptionProps } from './types';
 
 function ColorOption( {
@@ -75,7 +75,8 @@ function ColorListPicker( {
 					disableCustomColors={ disableCustomColors }
 					enableAlpha={ enableAlpha }
 					onChange={ ( newColor ) => {
-						const newColors = value.slice();
+						const newColors: ( string | undefined )[] =
+							value.slice();
 						newColors[ index ] = newColor;
 						onChange( newColors );
 					} }

package/src/{color-list-picker → duotone-picker/color-list-picker}/types.ts

@@ -5,7 +5,7 @@ import type { CSSProperties } from 'react';
 
 export type ColorListPickerProps = {
 	/**
-	 * A list of predifened colors. Each color is an object with a `name` and a
+	 * A list of predefined colors. Each color is an object with a `name` and a
 	 * `color` value.
 	 * The `name` is a string used to identify the color in the UI.
 	 * The `color` is a valid CSS color string.
@@ -21,7 +21,7 @@ export type ColorListPickerProps = {
 	/**
 	 * An array containing the currently selected colors.
 	 */
-	value?: Array< string | undefined >;
+	value?: Array< string >;
 	/**
 	 * Controls whether the custom color picker is displayed.
 	 */

package/src/duotone-picker/{custom-duotone-bar.js → custom-duotone-bar.tsx}

@@ -11,7 +11,13 @@ import {
 
 const PLACEHOLDER_VALUES = [ '#333', '#CCC' ];
 
-export default function CustomDuotoneBar( { value, onChange } ) {
+export default function CustomDuotoneBar( {
+	value,
+	onChange,
+}: {
+	value?: string[];
+	onChange: ( value?: string[] ) => void;
+} ) {
 	const hasGradient = !! value;
 	const values = hasGradient ? value : PLACEHOLDER_VALUES;
 	const background = getGradientFromCSSColors( values );

package/src/duotone-picker/{duotone-picker.js → duotone-picker.tsx}

@@ -12,14 +12,48 @@ import { __, sprintf } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import ColorListPicker from '../color-list-picker';
+import ColorListPicker from './color-list-picker';
 import CircularOptionPicker from '../circular-option-picker';
 import { VStack } from '../v-stack';
 
 import CustomDuotoneBar from './custom-duotone-bar';
 import { getDefaultColors, getGradientFromCSSColors } from './utils';
 import { Spacer } from '../spacer';
+import type { DuotonePickerProps } from './types';
 
+/**
+ * ```jsx
+ * import { DuotonePicker, DuotoneSwatch } from '@wordpress/components';
+ * import { useState } from '@wordpress/element';
+ *
+ * const DUOTONE_PALETTE = [
+ * 	{ colors: [ '#8c00b7', '#fcff41' ], name: 'Purple and yellow', slug: 'purple-yellow' },
+ * 	{ colors: [ '#000097', '#ff4747' ], name: 'Blue and red', slug: 'blue-red' },
+ * ];
+ *
+ * const COLOR_PALETTE = [
+ * 	{ color: '#ff4747', name: 'Red', slug: 'red' },
+ * 	{ color: '#fcff41', name: 'Yellow', slug: 'yellow' },
+ * 	{ color: '#000097', name: 'Blue', slug: 'blue' },
+ * 	{ color: '#8c00b7', name: 'Purple', slug: 'purple' },
+ * ];
+ *
+ * const Example = () => {
+ * 	const [ duotone, setDuotone ] = useState( [ '#000000', '#ffffff' ] );
+ * 	return (
+ * 		<>
+ * 			<DuotonePicker
+ * 				duotonePalette={ DUOTONE_PALETTE }
+ * 				colorPalette={ COLOR_PALETTE }
+ * 				value={ duotone }
+ * 				onChange={ setDuotone }
+ * 			/>
+ * 			<DuotoneSwatch values={ duotone } />
+ * 		</>
+ * 	);
+ * };
+ * ```
+ */
 function DuotonePicker( {
 	clearable = true,
 	unsetable = true,
@@ -29,7 +63,7 @@ function DuotonePicker( {
 	disableCustomDuotone,
 	value,
 	onChange,
-} ) {
+}: DuotonePickerProps ) {
 	const [ defaultDark, defaultLight ] = useMemo(
 		() => getDefaultColors( colorPalette ),
 		[ colorPalette ]
@@ -125,6 +159,9 @@ function DuotonePicker( {
 									newColors.length >= 2
 										? newColors
 										: undefined;
+								// @ts-expect-error TODO: The color arrays for a DuotonePicker should be a tuple of two colors,
+								// but it's currently typed as a string[].
+								// See also https://github.com/WordPress/gutenberg/pull/49060#discussion_r1136951035
 								onChange( newValue );
 							} }
 						/>

package/src/duotone-picker/{duotone-swatch.js → duotone-swatch.tsx}

@@ -9,8 +9,9 @@ import { swatch } from '@wordpress/icons';
 import ColorIndicator from '../color-indicator';
 import Icon from '../icon';
 import { getGradientFromCSSColors } from './utils';
+import type { DuotoneSwatchProps } from './types';
 
-function DuotoneSwatch( { values } ) {
+function DuotoneSwatch( { values }: DuotoneSwatchProps ) {
 	return values ? (
 		<ColorIndicator
 			colorValue={ getGradientFromCSSColors( values, '135deg' ) }