@wordpress/components 22.1.0 → 23.1.0

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render, screen, within } from '@testing-library/react';
+import { render, screen, within, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 /**
@@ -9,24 +9,27 @@ import userEvent from '@testing-library/user-event';
  */
 import ColorPalette from '..';
 
+jest.useFakeTimers();
+
+const EXAMPLE_COLORS = [
+	{ name: 'red', color: '#f00' },
+	{ name: 'green', color: '#0f0' },
+	{ name: 'blue', color: '#00f' },
+];
+const INITIAL_COLOR = EXAMPLE_COLORS[ 0 ].color;
+
+function getWrappingPopoverElement( element: HTMLElement ) {
+	return element.closest( '.components-popover' );
+}
+
 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();
-	} );
+	it( 'should render a dynamic toolbar of colors', () => {
+		const onChange = jest.fn();
 
-	test( 'should render a dynamic toolbar of colors', () => {
 		const { container } = render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -34,11 +37,13 @@ describe( 'ColorPalette', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	test( 'should render three color button options', () => {
+	it( 'should render three color button options', () => {
+		const onChange = jest.fn();
+
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -48,15 +53,16 @@ describe( 'ColorPalette', () => {
 		).toHaveLength( 3 );
 	} );
 
-	test( 'should call onClick on an active button with undefined', async () => {
+	it( 'should call onClick on an active button with undefined', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -69,19 +75,22 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should call onClick on an inactive button', async () => {
+	it( 'should call onClick on an inactive button', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
 
+		// Click the first unpressed button
+		// (i.e. a button representing a color that is not the current color)
 		await user.click(
 			screen.getAllByRole( 'button', {
 				name: /^Color:/,
@@ -89,19 +98,21 @@ describe( 'ColorPalette', () => {
 			} )[ 0 ]
 		);
 
+		// Expect the green color to have been selected
 		expect( onChange ).toHaveBeenCalledTimes( 1 );
-		expect( onChange ).toHaveBeenCalledWith( '#fff' );
+		expect( onChange ).toHaveBeenCalledWith( EXAMPLE_COLORS[ 1 ].color, 1 );
 	} );
 
-	test( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
+	it( 'should call onClick with undefined, when the clearButton onClick is triggered', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -112,12 +123,14 @@ describe( 'ColorPalette', () => {
 		expect( onChange ).toHaveBeenCalledWith( undefined );
 	} );
 
-	test( 'should allow disabling custom color picker', () => {
+	it( 'should allow disabling custom color picker', () => {
+		const onChange = jest.fn();
+
 		const { container } = render(
 			<ColorPalette
-				colors={ colors }
+				colors={ EXAMPLE_COLORS }
 				disableCustomColors
-				value={ currentColor }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -125,15 +138,16 @@ describe( 'ColorPalette', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	test( 'should render dropdown and its content', async () => {
+	it( 'should render dropdown and its content', async () => {
 		const user = userEvent.setup( {
 			advanceTimers: jest.advanceTimersByTime,
 		} );
+		const onChange = jest.fn();
 
 		render(
 			<ColorPalette
-				colors={ colors }
-				value={ currentColor }
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
 				onChange={ onChange }
 			/>
 		);
@@ -153,12 +167,48 @@ describe( 'ColorPalette', () => {
 		expect( dropdownButton ).toBeVisible();
 
 		expect(
-			within( dropdownButton ).getByText( colors[ 0 ].name )
+			within( dropdownButton ).getByText( EXAMPLE_COLORS[ 0 ].name )
 		).toBeVisible();
+
 		expect(
 			within( dropdownButton ).getByText(
-				colors[ 0 ].color.replace( '#', '' )
+				EXAMPLE_COLORS[ 0 ].color.replace( '#', '' )
 			)
 		).toBeVisible();
+
+		// Check that the popover with custom color input has appeared.
+		const dropdownColorInput = screen.getByLabelText( 'Hex color' );
+
+		await waitFor( () =>
+			expect(
+				getWrappingPopoverElement( dropdownColorInput )
+			).toBePositionedPopover()
+		);
+	} );
+
+	it( 'should show the clear button by default', () => {
+		const onChange = jest.fn();
+
+		render(
+			<ColorPalette
+				colors={ EXAMPLE_COLORS }
+				value={ INITIAL_COLOR }
+				onChange={ onChange }
+			/>
+		);
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
+	} );
+
+	it( 'should show the clear button even when `colors` is an empty array', () => {
+		const onChange = jest.fn();
+
+		render( <ColorPalette colors={ [] } onChange={ onChange } /> );
+
+		expect(
+			screen.getByRole( 'button', { name: 'Clear' } )
+		).toBeInTheDocument();
 	} );
 } );

package/src/color-palette/types.ts

@@ -1,12 +1,12 @@
 /**
  * External dependencies
  */
-import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 
 /**
  * Internal dependencies
  */
-import type { PopoverProps } from '../popover/types';
+import type { DropdownProps } from '../dropdown/types';
 
 export type ColorObject = {
 	name: string;
@@ -24,7 +24,7 @@ type PaletteProps = {
 	/**
 	 * Callback called when a color is selected.
 	 */
-	onChange: ( newColor?: string ) => void;
+	onChange: ( newColor?: string, index?: number ) => void;
 	value?: string;
 	actions?: ReactNode;
 };
@@ -37,15 +37,8 @@ export type MultiplePalettesProps = PaletteProps & {
 	colors: PaletteObject[];
 };
 
-// TODO: should extend `Dropdown`'s props once it gets refactored to TypeScript
-export type CustomColorPickerDropdownProps = {
+export type CustomColorPickerDropdownProps = DropdownProps & {
 	isRenderedInSidebar: boolean;
-	renderContent: () => ReactNode;
-	popoverProps?: Omit< PopoverProps, 'children' >;
-	renderToggle: ( props: {
-		isOpen: boolean;
-		onToggle: MouseEventHandler< HTMLButtonElement >;
-	} ) => ReactNode;
 };
 
 export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
@@ -81,13 +74,6 @@ export type ColorPaletteProps = Pick< PaletteProps, 'onChange' > & {
 	 * 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.
 	 *

package/src/color-picker/README.md

@@ -6,6 +6,7 @@
 
 ```jsx
 import { ColorPicker } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 function Example() {
 	const [color, setColor] = useState();

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

@@ -60,6 +60,7 @@ export const InputWithSlider = ( {
 				size="__unstable-large"
 			/>
 			<RangeControl
+				__nextHasNoMarginBottom
 				label={ label }
 				hideLabelFromVision
 				min={ min }

package/src/color-picker/styles.ts

@@ -38,10 +38,6 @@ export const SelectControl = styled( InnerSelectControl )`
 export const RangeControl = styled( InnerRangeControl )`
 	flex: 1;
 	margin-right: ${ space( 2 ) };
-
-	${ StyledField } {
-		margin-bottom: 0;
-	}
 `;
 
 // Make the Hue circle picker not go out of the bar.

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

@@ -8,6 +8,8 @@ import { render, fireEvent } from '@testing-library/react';
  */
 import { ColorPicker } from '..';
 
+jest.useFakeTimers();
+
 /**
  * Ordinarily we'd try to select the compnoent by role but the silder role appears
  * on several elements and we'd end up encoding assumptions about order when

package/src/combobox-control/test/index.js

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import ComboboxControl from '../';
 
+jest.useFakeTimers();
+
 const timezones = [
 	{ label: 'Greenwich Mean Time', value: 'GMT' },
 	{ label: 'Universal Coordinated Time', value: 'UTC' },

package/src/confirm-dialog/README.md

@@ -4,7 +4,7 @@
 This feature is still experimental. "Experimental" means this is an early implementation subject to drastic and breaking changes.
 </div>
 
-`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md] and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
+`ConfirmDialog` is built of top of [`Modal`](/packages/components/src/modal/README.md) and displays a confirmation dialog, with _confirm_ and _cancel_ buttons.
 
 The dialog is confirmed by clicking the _confirm_ button or by pressing the `Enter` key. It is cancelled (closed) by clicking the _cancel_ button, by pressing the `ESC` key, or by clicking outside the dialog focus (i.e, the overlay).
 
@@ -44,6 +44,7 @@ Let the parent component control when the dialog is open/closed. It's activated
 
 ```jsx
 import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { useState } from '@wordpress/element';
 
 function Example() {
 	const [ isOpen, setIsOpen ] = useState( true );
@@ -72,7 +73,7 @@ function Example() {
 
 ### Unsupported: Multiple instances
 
-Multiple `ConfirmDialog's is an edge case that's currently not officially supported by this component. At the moment, new instances will end up closing the last instance due to the way the `Modal` is implemented.
+Multiple `ConfirmDialog`s is an edge case that's currently not officially supported by this component. At the moment, new instances will end up closing the last instance due to the way the `Modal` is implemented.
 
 ## Custom Types
 

package/src/confirm-dialog/test/index.js

@@ -15,6 +15,8 @@ import userEvent from '@testing-library/user-event';
  */
 import { ConfirmDialog } from '..';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 describe( 'Confirm', () => {

package/src/custom-select-control/README.md

@@ -145,6 +145,20 @@ A handler for onMouseOut events.
 -   Type: `Function`
 -   Required: No
 
+#### onFocus
+
+A handler for onFocus events.
+
+-   Type: `Function`
+-   Required: No
+
+#### onBlur
+
+A handler for onBlur events.
+
+-   Type: `Function`
+-   Required: No
+
 ## Related components
 
 -   Like this component, but implemented using a native `<select>` for when custom styling is not necessary, the `SelectControl` component.

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

@@ -79,6 +79,8 @@ export default function CustomSelectControl( props ) {
 		value: _selectedItem,
 		onMouseOver,
 		onMouseOut,
+		onFocus,
+		onBlur,
 		__experimentalShowSelectedHint = false,
 	} = props;
 
@@ -103,6 +105,16 @@ export default function CustomSelectControl( props ) {
 
 	const [ isFocused, setIsFocused ] = useState( false );
 
+	function handleOnFocus( e ) {
+		setIsFocused( true );
+		onFocus?.( e );
+	}
+
+	function handleOnBlur( e ) {
+		setIsFocused( false );
+		onBlur?.( e );
+	}
+
 	if ( ! __nextUnconstrainedWidth ) {
 		deprecated(
 			'Constrained width styles for wp.components.CustomSelectControl',
@@ -182,8 +194,8 @@ export default function CustomSelectControl( props ) {
 					onMouseOver={ onMouseOver }
 					onMouseOut={ onMouseOut }
 					as="button"
-					onFocus={ () => setIsFocused( true ) }
-					onBlur={ () => setIsFocused( false ) }
+					onFocus={ handleOnFocus }
+					onBlur={ handleOnBlur }
 					selectSize={ size }
 					__next36pxDefaultSize={ __next36pxDefaultSize }
 					{ ...getToggleButtonProps( {

package/src/dashicon/{index.js → index.tsx}

@@ -5,14 +5,20 @@
  * @property {string}                    [className] Class name
  * @property {number}                    [size]      Size of the icon
  */
-/** @typedef {import('react').ComponentPropsWithoutRef<'span'> & OwnProps} Props */
 
 /**
- * @param {Props} props
- * @return {JSX.Element} Element
+ * Internal dependencies
  */
+import type { WordPressComponentProps } from '../ui/context';
+import type { DashiconProps } from './types';
 
-function Dashicon( { icon, className, size = 20, style = {}, ...extraProps } ) {
+function Dashicon( {
+	icon,
+	className,
+	size = 20,
+	style = {},
+	...extraProps
+}: WordPressComponentProps< DashiconProps, 'span', false > ) {
 	const iconClass = [
 		'dashicon',
 		'dashicons',

package/src/dashicon/types.ts

@@ -1,3 +1,20 @@
+export type DashiconProps = {
+	/**
+	 * The icon name
+	 */
+	icon: IconKey;
+
+	/**
+	 * Class name
+	 */
+	className?: string;
+
+	/**
+	 * Size of the icon
+	 */
+	size?: number;
+};
+
 export type IconKey =
 	| 'admin-appearance'
 	| 'admin-collapse'

package/src/date-time/date/test/index.tsx

@@ -10,6 +10,8 @@ import userEvent from '@testing-library/user-event';
  */
 import DatePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'DatePicker', () => {
 	it( 'should highlight the current date', () => {
 		render( <DatePicker currentDate="2022-05-02T11:00:00" /> );

package/src/date-time/date-time/index.tsx

@@ -43,14 +43,14 @@ function UnforwardedDateTimePicker(
 	if ( ! __nextRemoveHelpButton ) {
 		deprecated( 'Help button in wp.components.DateTimePicker', {
 			since: '13.4',
-			version: '14.6', // Six months of plugin releases.
+			version: '15.8', // One year of plugin releases.
 			hint: 'Set the `__nextRemoveHelpButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
 		} );
 	}
 	if ( ! __nextRemoveResetButton ) {
 		deprecated( 'Reset button in wp.components.DateTimePicker', {
 			since: '13.4',
-			version: '14.6', // Six months of plugin releases.
+			version: '15.8', // One year of plugin releases.
 			hint: 'Set the `__nextRemoveResetButton` prop to `true` to remove this warning and opt in to the new behaviour, which will become the default in a future version.',
 		} );
 	}

package/src/date-time/time/test/index.tsx

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import TimePicker from '..';
 
+jest.useFakeTimers();
+
 describe( 'TimePicker', () => {
 	it( 'should call onChange with updated date values', async () => {
 		const user = userEvent.setup( {

package/src/dimension-control/index.js

@@ -7,7 +7,6 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -50,10 +49,10 @@ export function DimensionControl( props ) {
 	};
 
 	const selectLabel = (
-		<Fragment>
+		<>
 			{ icon && <Icon icon={ icon } /> }
 			{ label }
-		</Fragment>
+		</>
 	);
 
 	return (

package/src/dimension-control/test/__snapshots__/index.test.js.snap

@@ -37,7 +37,6 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
@@ -175,7 +174,7 @@ exports[`DimensionControl rendering renders with custom sizes 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
+  border-color: #949494;
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -309,7 +308,6 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
@@ -447,7 +445,7 @@ exports[`DimensionControl rendering renders with defaults 1`] = `
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
+  border-color: #949494;
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -591,7 +589,6 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
@@ -729,7 +726,7 @@ exports[`DimensionControl rendering renders with icon and custom icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
+  border-color: #949494;
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;
@@ -885,7 +882,6 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  height: 100%;
   box-sizing: border-box;
   position: relative;
   border-radius: 2px;
@@ -1023,7 +1019,7 @@ exports[`DimensionControl rendering renders with icon and default icon label 1`]
   position: absolute;
   right: 0;
   top: 0;
-  border-color: #757575;
+  border-color: #949494;
   border-style: solid;
   border-width: 1px;
   padding-left: 2px;

package/src/dimension-control/test/index.test.js

@@ -14,6 +14,8 @@ import { plus } from '@wordpress/icons';
  */
 import { DimensionControl } from '../';
 
+jest.useFakeTimers();
+
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
 	const instanceId = 1;

package/src/disabled/stories/index.tsx

@@ -15,6 +15,7 @@ import Disabled from '../';
 import SelectControl from '../../select-control/';
 import TextControl from '../../text-control/';
 import TextareaControl from '../../textarea-control/';
+import { VStack } from '../../v-stack/';
 
 const meta: ComponentMeta< typeof Disabled > = {
 	title: 'Components/Disabled',
@@ -37,18 +38,21 @@ const Form = () => {
 	const [ textControlValue, setTextControlValue ] = useState( '' );
 	const [ textAreaValue, setTextAreaValue ] = useState( '' );
 	return (
-		<div>
+		<VStack>
 			<TextControl
+				__nextHasNoMarginBottom
 				label="Text Control"
 				value={ textControlValue }
 				onChange={ setTextControlValue }
 			/>
 			<TextareaControl
+				__nextHasNoMarginBottom
 				label="TextArea Control"
 				value={ textAreaValue }
 				onChange={ setTextAreaValue }
 			/>
 			<SelectControl
+				__nextHasNoMarginBottom
 				label="Select Control"
 				onChange={ () => {} }
 				options={ [
@@ -58,7 +62,7 @@ const Form = () => {
 					{ value: 'c', label: 'Option C' },
 				] }
 			/>
-		</div>
+		</VStack>
 	);
 };