@wordpress/components 23.0.0 → 23.2.0

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

@@ -1,13 +1,21 @@
 /**
  * External dependencies
  */
-import { act, fireEvent, render, screen } from '@testing-library/react';
+import {
+	act,
+	fireEvent,
+	render,
+	screen,
+	waitFor,
+} from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 import { BorderControl } from '../';
 
+jest.useRealTimers();
+
 const colors = [
 	{ name: 'Gray', color: '#f6f7f7' },
 	{ name: 'Blue', color: '#72aee6' },
@@ -37,29 +45,24 @@ function createProps( customProps ) {
 
 const toggleLabelRegex = /Border color( and style)* picker/;
 
-const renderBorderControl = async ( props ) => {
-	const view = render( <BorderControl { ...props } /> );
-	// When the `Popover` component is rendered or updated, the `useFloating`
-	// hook from the `floating-ui` package will schedule a state update in a
-	// promise handler. We need to wait for this promise handler to execute
-	// before checking results. That's what this async `act()` call achieves.
-	// See also: https://floating-ui.com/docs/react-dom#testing
-	await act( () => Promise.resolve() );
-	return view;
-};
-
-const rerenderBorderControl = async ( rerender, props ) => {
-	const view = rerender( <BorderControl { ...props } /> );
-	// Same reason to `act()` as in `renderBorderControl` above.
-	await act( () => Promise.resolve() );
-	return view;
-};
+function getWrappingPopoverElement( element ) {
+	return element.closest( '.components-popover' );
+}
 
 const openPopover = async () => {
 	const toggleButton = screen.getByLabelText( toggleLabelRegex );
 	fireEvent.click( toggleButton );
-	// Same reason to `act()` as in `renderBorderControl` above.
-	await act( () => Promise.resolve() );
+
+	// Wait for color picker popover to fully appear
+	const pickerButton = screen.getByRole( 'button', {
+		name: /^Custom color picker/,
+	} );
+
+	await waitFor( () =>
+		expect(
+			getWrappingPopoverElement( pickerButton )
+		).toBePositionedPopover()
+	);
 };
 
 const getButton = ( name ) => {
@@ -93,9 +96,9 @@ const clearWidthInput = () => setWidthInput( '' );
 
 describe( 'BorderControl', () => {
 	describe( 'basic rendering', () => {
-		it( 'should render standard border control', async () => {
+		it( 'should render standard border control', () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const label = screen.getByText( props.label );
 			const colorButton = screen.getByLabelText( toggleLabelRegex );
@@ -114,9 +117,9 @@ describe( 'BorderControl', () => {
 			expect( slider ).not.toBeInTheDocument();
 		} );
 
-		it( 'should hide label', async () => {
+		it( 'should hide label', () => {
 			const props = createProps( { hideLabelFromVision: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			const label = screen.getByText( props.label );
 
 			// As visually hidden labels are still included in the document
@@ -128,17 +131,17 @@ describe( 'BorderControl', () => {
 			);
 		} );
 
-		it( 'should render with slider', async () => {
+		it( 'should render with slider', () => {
 			const props = createProps( { withSlider: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const slider = getSliderInput();
 			expect( slider ).toBeInTheDocument();
 		} );
 
-		it( 'should render placeholder in UnitControl', async () => {
+		it( 'should render placeholder in UnitControl', () => {
 			const props = createProps( { placeholder: 'Mixed' } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 
 			const widthInput = getWidthInput();
 			expect( widthInput ).toHaveAttribute( 'placeholder', 'Mixed' );
@@ -146,7 +149,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should render color and style popover', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const customColorPicker = getButton( /Custom color picker/ );
@@ -170,7 +173,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should render color and style popover header', async () => {
 			const props = createProps( { showDropdownHeader: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const headerLabel = screen.getByText( 'Border color' );
@@ -182,7 +185,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should not render style options when opted out of', async () => {
 			const props = createProps( { enableStyle: false } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 
 			const styleLabel = screen.queryByText( 'Style' );
@@ -199,18 +202,18 @@ describe( 'BorderControl', () => {
 
 	describe( 'color and style picker aria labels', () => {
 		describe( 'with style selection enabled', () => {
-			it( 'should include both color and style in label', async () => {
+			it( 'should include both color and style in label', () => {
 				const props = createProps( { value: undefined } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText( 'Border color and style picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', async () => {
+			it( 'should correctly describe named color selection', () => {
 				const props = createProps( { value: { color: '#72aee6' } } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -219,9 +222,9 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', async () => {
+			it( 'should correctly describe custom color selection', () => {
 				const props = createProps( { value: { color: '#4b1d80' } } );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -230,11 +233,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color and style selections', async () => {
+			it( 'should correctly describe named color and style selections', () => {
 				const props = createProps( {
 					value: { color: '#72aee6', style: 'dotted' },
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -243,11 +246,11 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color and style selections', async () => {
+			it( 'should correctly describe custom color and style selections', () => {
 				const props = createProps( {
 					value: { color: '#4b1d80', style: 'dashed' },
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -258,24 +261,24 @@ describe( 'BorderControl', () => {
 		} );
 
 		describe( 'with style selection disabled', () => {
-			it( 'should only include color in the label', async () => {
+			it( 'should only include color in the label', () => {
 				const props = createProps( {
 					value: undefined,
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText( 'Border color picker.' )
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe named color selection', async () => {
+			it( 'should correctly describe named color selection', () => {
 				const props = createProps( {
 					value: { color: '#72aee6' },
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -284,12 +287,12 @@ describe( 'BorderControl', () => {
 				).toBeInTheDocument();
 			} );
 
-			it( 'should correctly describe custom color selection', async () => {
+			it( 'should correctly describe custom color selection', () => {
 				const props = createProps( {
 					value: { color: '#4b1d80' },
 					enableStyle: false,
 				} );
-				await renderBorderControl( props );
+				render( <BorderControl { ...props } /> );
 
 				expect(
 					screen.getByLabelText(
@@ -301,9 +304,9 @@ describe( 'BorderControl', () => {
 	} );
 
 	describe( 'onChange handling', () => {
-		it( 'should update width with slider value', async () => {
+		it( 'should update width with slider value', () => {
 			const props = createProps( { withSlider: true } );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 
 			const slider = getSliderInput();
 			fireEvent.change( slider, { target: { value: '5' } } );
@@ -313,7 +316,7 @@ describe( 'BorderControl', () => {
 				width: '5px',
 			} );
 
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			const widthInput = getWidthInput();
 
 			expect( widthInput.value ).toEqual( '5' );
@@ -321,7 +324,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should update color selection', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
 
@@ -333,7 +336,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should clear color selection when toggling swatch off', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -345,7 +348,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should update style selection', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Dashed' );
 
@@ -357,7 +360,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should take no action when color and style popover is closed', async () => {
 			const props = createProps( { showDropdownHeader: true } );
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Close border color' );
 
@@ -366,7 +369,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should reset color and style only when popover reset button clicked', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Reset to default' );
 
@@ -379,9 +382,9 @@ describe( 'BorderControl', () => {
 
 		it( 'should sanitize border when width and color are undefined', async () => {
 			const props = createProps();
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			clearWidthInput();
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -392,9 +395,9 @@ describe( 'BorderControl', () => {
 			const props = createProps( {
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			clearWidthInput();
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Blue' );
 
@@ -407,7 +410,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should clear color and set style to `none` when setting zero width', async () => {
 			const props = createProps();
-			await renderBorderControl( props );
+			render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
 			clickButton( 'Dotted' );
@@ -422,12 +425,12 @@ describe( 'BorderControl', () => {
 
 		it( 'should reselect color and style selections when changing to non-zero width', async () => {
 			const props = createProps();
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Green' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Dotted' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			setWidthInput( '0' );
 			setWidthInput( '5' );
 
@@ -440,7 +443,7 @@ describe( 'BorderControl', () => {
 
 		it( 'should set a non-zero width when applying color to zero width border', async () => {
 			const props = createProps( { value: undefined } );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Color: Yellow' );
 
@@ -451,7 +454,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Color: Green' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {
@@ -466,7 +469,7 @@ describe( 'BorderControl', () => {
 				value: undefined,
 				shouldSanitizeBorder: false,
 			} );
-			const { rerender } = await renderBorderControl( props );
+			const { rerender } = render( <BorderControl { ...props } /> );
 			await openPopover();
 			clickButton( 'Dashed' );
 
@@ -477,7 +480,7 @@ describe( 'BorderControl', () => {
 			} );
 
 			setWidthInput( '0' );
-			await rerenderBorderControl( rerender, props );
+			rerender( <BorderControl { ...props } /> );
 			clickButton( 'Dotted' );
 
 			expect( props.onChange ).toHaveBeenCalledWith( {

package/src/border-control/types.ts

@@ -17,10 +17,7 @@ export type Border = {
 
 export type ColorProps = Pick<
 	ColorPaletteProps,
-	| 'colors'
-	| 'enableAlpha'
-	| '__experimentalHasMultipleOrigins'
-	| '__experimentalIsRenderedInSidebar'
+	'colors' | 'enableAlpha' | '__experimentalIsRenderedInSidebar'
 > & {
 	/**
 	 * This toggles the ability to choose custom colors.

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

@@ -14,6 +14,8 @@ import { useState } from '@wordpress/element';
  */
 import BoxControl from '../';
 
+jest.useFakeTimers();
+
 const Example = ( extraProps ) => {
 	const [ state, setState ] = useState();
 

package/src/checkbox-control/test/index.tsx

@@ -15,6 +15,8 @@ import { useState } from '@wordpress/element';
 import BaseCheckboxControl from '..';
 import type { CheckboxControlProps } from '../types';
 
+jest.useFakeTimers();
+
 const noop = () => {};
 
 const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;

package/src/color-palette/index.tsx

@@ -32,6 +32,7 @@ import type {
 	SinglePaletteProps,
 } from './types';
 import type { WordPressComponentProps } from '../ui/context';
+import type { DropdownProps } from '../dropdown/types';
 
 extend( [ namesPlugin, a11yPlugin ] );
 
@@ -134,7 +135,7 @@ export function CustomColorPickerDropdown( {
 	popoverProps: receivedPopoverProps,
 	...props
 }: CustomColorPickerDropdownProps ) {
-	const popoverProps = useMemo(
+	const popoverProps = useMemo< DropdownProps[ 'popoverProps' ] >(
 		() => ( {
 			shift: true,
 			...( isRenderedInSidebar
@@ -166,7 +167,7 @@ export function CustomColorPickerDropdown( {
 export const extractColorNameFromCurrentValue = (
 	currentValue?: ColorPaletteProps[ 'value' ],
 	colors: ColorPaletteProps[ 'colors' ] = [],
-	showMultiplePalettes: ColorPaletteProps[ '__experimentalHasMultipleOrigins' ] = false
+	showMultiplePalettes: boolean = false
 ) => {
 	if ( ! currentValue ) {
 		return '';
@@ -224,33 +225,32 @@ function UnforwardedColorPalette(
 		enableAlpha = false,
 		onChange,
 		value,
-		__experimentalHasMultipleOrigins = false,
 		__experimentalIsRenderedInSidebar = false,
 		...otherProps
 	} = props;
 	const clearColor = useCallback( () => onChange( undefined ), [ onChange ] );
 
+	const hasMultipleColorOrigins =
+		colors.length > 0 &&
+		( colors as PaletteObject[] )[ 0 ].colors !== undefined;
 	const buttonLabelName = useMemo(
 		() =>
 			extractColorNameFromCurrentValue(
 				value,
 				colors,
-				__experimentalHasMultipleOrigins
+				hasMultipleColorOrigins
 			),
-		[ value, colors, __experimentalHasMultipleOrigins ]
+		[ value, colors, hasMultipleColorOrigins ]
 	);
 
-	// Make sure that the `colors` array has a format (single/multiple) that is
-	// compatible with the `__experimentalHasMultipleOrigins` flag. This is true
-	// when __experimentalHasMultipleOrigins and areColorsMultiplePalette() are
-	// either both `true` or both `false`.
+	// Make sure that the `colors` array has a valid format.
 	if (
 		colors.length > 0 &&
-		__experimentalHasMultipleOrigins !== areColorsMultiplePalette( colors )
+		hasMultipleColorOrigins !== areColorsMultiplePalette( colors )
 	) {
 		// eslint-disable-next-line no-console
 		console.warn(
-			'wp.components.ColorPalette: please specify a format for the `colors` prop that is compatible with the `__experimentalHasMultipleOrigins` prop.'
+			'wp.components.ColorPalette: please specify a valid format for the `colors` prop. '
 		);
 		return null;
 	}
@@ -340,7 +340,7 @@ function UnforwardedColorPalette(
 					) }
 				/>
 			) }
-			{ __experimentalHasMultipleOrigins ? (
+			{ hasMultipleColorOrigins ? (
 				<MultiplePalettes
 					{ ...paletteCommonProps }
 					colors={ colors as PaletteObject[] }

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

@@ -20,13 +20,6 @@ const meta: ComponentMeta< typeof ColorPalette > = {
 	title: 'Components/ColorPalette',
 	component: ColorPalette,
 	argTypes: {
-		// Removing the control because setting this prop without changing the
-		// format of the `colors` prop can break the component.
-		__experimentalHasMultipleOrigins: {
-			control: {
-				type: null,
-			},
-		},
 		as: { control: { type: null } },
 		onChange: { action: 'onChange', control: { type: null } },
 		value: { control: { type: null } },
@@ -69,14 +62,8 @@ Default.args = {
 	],
 };
 
-/**
- * When setting the `__experimentalHasMultipleOrigins` prop to `true`,
- * the `colors` prop is expected to be an array of color palettes, rather
- * than an array of color objects.
- */
 export const MultipleOrigins = Template.bind( {} );
 MultipleOrigins.args = {
-	__experimentalHasMultipleOrigins: true,
 	colors: [
 		{
 			name: 'Primary colors',

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

@@ -9,6 +9,8 @@ import userEvent from '@testing-library/user-event';
  */
 import ColorPalette from '..';
 
+jest.useFakeTimers();
+
 const EXAMPLE_COLORS = [
 	{ name: 'red', color: '#f00' },
 	{ name: 'green', color: '#0f0' },

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;
@@ -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/component.tsx

@@ -97,6 +97,7 @@ const ColorPicker = (
 			<AuxiliaryColorArtefactWrapper>
 				<AuxiliaryColorArtefactHStackHeader justify="space-between">
 					<SelectControl
+						__nextHasNoMarginBottom
 						options={ options }
 						value={ colorType }
 						onChange={ ( nextColorType ) =>