@wordpress/components 21.0.6 → 21.0.7

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

@@ -0,0 +1,164 @@
+/**
+ * External dependencies
+ */
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+/**
+ * Internal dependencies
+ */
+import ColorPalette from '..';
+
+describe( 'ColorPalette', () => {
+	const colors = [
+		{ name: 'red', color: '#f00' },
+		{ name: 'white', color: '#fff' },
+		{ name: 'blue', color: '#00f' },
+	];
+	const currentColor = '#f00';
+	const onChange = jest.fn();
+
+	beforeEach( () => {
+		onChange.mockClear();
+	} );
+
+	test( 'should render a dynamic toolbar of colors', () => {
+		const { container } = render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should render three color button options', () => {
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getAllByRole( 'button', { name: /^Color:/ } )
+		).toHaveLength( 3 );
+	} );
+
+	test( 'should call onClick on an active button with undefined', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', { name: /^Color:/, pressed: true } )
+		);
+
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( undefined );
+	} );
+
+	test( 'should call onClick on an inactive button', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getAllByRole( 'button', {
+				name: /^Color:/,
+				pressed: false,
+			} )[ 0 ]
+		);
+
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( '#fff' );
+	} );
+
+	test( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click( screen.getByRole( 'button', { name: 'Clear' } ) );
+
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( undefined );
+	} );
+
+	test( 'should allow disabling custom color picker', () => {
+		const { container } = render(
+			<ColorPalette
+				colors={ colors }
+				disableCustomColors
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	test( 'should render dropdown and its content', async () => {
+		const user = userEvent.setup( {
+			advanceTimers: jest.advanceTimersByTime,
+		} );
+
+		render(
+			<ColorPalette
+				colors={ colors }
+				value={ currentColor }
+				onChange={ onChange }
+			/>
+		);
+
+		await user.click(
+			screen.getByRole( 'button', {
+				name: /^Custom color picker/,
+				expanded: false,
+			} )
+		);
+
+		const dropdownButton = screen.getByRole( 'button', {
+			name: /^Custom color picker/,
+			expanded: true,
+		} );
+
+		expect( dropdownButton ).toBeVisible();
+
+		expect(
+			within( dropdownButton ).getByText( colors[ 0 ].name )
+		).toBeVisible();
+		expect(
+			within( dropdownButton ).getByText(
+				colors[ 0 ].color.replace( '#', '' )
+			)
+		).toBeVisible();
+	} );
+} );

package/src/color-palette/types.ts

@@ -0,0 +1,93 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+
+type OnColorChange = ( newColor?: string ) => void;
+
+export type ColorObject = {
+	name: string;
+	color: NonNullable< CSSProperties[ 'color' ] >;
+};
+
+export type PaletteObject = {
+	name: string;
+	colors: ColorObject[];
+};
+
+type PaletteProps = {
+	className?: string;
+	clearColor: () => void;
+	onChange: OnColorChange;
+	value?: string;
+	actions?: ReactNode;
+};
+
+export type SinglePaletteProps = PaletteProps & {
+	colors: ColorObject[];
+};
+
+export type MultiplePalettesProps = PaletteProps & {
+	colors: PaletteObject[];
+};
+
+// TODO: should extend `Dropdown`'s props once it gets refactored to TypeScript
+export type CustomColorPickerDropdownProps = {
+	isRenderedInSidebar: boolean;
+	renderContent: () => ReactNode;
+	popoverProps?: string[];
+	renderToggle: ( props: {
+		isOpen: boolean;
+		onToggle: MouseEventHandler< HTMLButtonElement >;
+	} ) => ReactNode;
+};
+
+export type ColorPaletteProps = {
+	/**
+	 * Whether the palette should have a clearing button.
+	 *
+	 * @default true
+	 */
+	clearable?: boolean;
+	/**
+	 * Array with the colors to be shown. When displaying multiple color palettes
+	 * to choose from, the format of the array changes from an array of colors
+	 * objects, to an array of color palettes.
+	 *
+	 * @default []
+	 */
+	colors?: ( PaletteObject | ColorObject )[];
+	/**
+	 * Whether to allow the user to pick a custom color on top of the predefined
+	 * choices (defined via the `colors` prop).
+	 *
+	 * @default false
+	 */
+	disableCustomColors?: boolean;
+	/**
+	 * Whether the color picker should display the alpha channel
+	 * both in the bottom inputs as well as in the color picker itself.
+	 */
+	enableAlpha?: boolean;
+	/**
+	 * Callback called when a color is selected.
+	 */
+	onChange: OnColorChange;
+	/**
+	 * Currently active value.
+	 */
+	value?: string;
+	/**
+	 * Whether the colors prop is an array of color palettes,
+	 * rather than an array of color objects.
+	 *
+	 * @default false
+	 */
+	__experimentalHasMultipleOrigins?: boolean;
+	/**
+	 * Whether this is rendered in the sidebar.
+	 *
+	 * @default false
+	 */
+	__experimentalIsRenderedInSidebar?: boolean;
+};

package/src/form-token-field/index.tsx

@@ -11,6 +11,17 @@ import { useEffect, useRef, useState } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { useDebounce, useInstanceId, usePrevious } from '@wordpress/compose';
 import { speak } from '@wordpress/a11y';
+import {
+	BACKSPACE,
+	ENTER,
+	UP,
+	DOWN,
+	LEFT,
+	RIGHT,
+	SPACE,
+	DELETE,
+	ESCAPE,
+} from '@wordpress/keycodes';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
 /**
@@ -172,34 +183,34 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 		if ( event.defaultPrevented ) {
 			return;
 		}
-		switch ( event.code ) {
-			case 'Backspace':
+		switch ( event.keyCode ) {
+			case BACKSPACE:
 				preventDefault = handleDeleteKey( deleteTokenBeforeInput );
 				break;
-			case 'Enter':
+			case ENTER:
 				preventDefault = addCurrentToken();
 				break;
-			case 'ArrowLeft':
+			case LEFT:
 				preventDefault = handleLeftArrowKey();
 				break;
-			case 'ArrowUp':
+			case UP:
 				preventDefault = handleUpArrowKey();
 				break;
-			case 'ArrowRight':
+			case RIGHT:
 				preventDefault = handleRightArrowKey();
 				break;
-			case 'ArrowDown':
+			case DOWN:
 				preventDefault = handleDownArrowKey();
 				break;
-			case 'Delete':
+			case DELETE:
 				preventDefault = handleDeleteKey( deleteTokenAfterInput );
 				break;
-			case 'Space':
+			case SPACE:
 				if ( tokenizeOnSpace ) {
 					preventDefault = addCurrentToken();
 				}
 				break;
-			case 'Escape':
+			case ESCAPE:
 				preventDefault = handleEscapeKey( event );
 				break;
 			default: