@wordpress/components 23.2.0 → 23.3.0

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

@@ -1,15 +1,13 @@
 /**
  * External dependencies
  */
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 
 /**
  * Internal dependencies
  */
 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
@@ -43,12 +41,6 @@ function moveReactColorfulSlider( sliderElement, from, to ) {
 	fireEvent( sliderElement, new FakeMouseEvent( 'mousemove', to ) );
 }
 
-const sleep = ( ms ) => {
-	const promise = new Promise( ( resolve ) => setTimeout( resolve, ms ) );
-	jest.advanceTimersByTime( ms + 1 );
-	return promise;
-};
-
 const hslaMatcher = expect.objectContaining( {
 	h: expect.any( Number ),
 	s: expect.any( Number ),
@@ -95,8 +87,9 @@ describe( 'ColorPicker', () => {
 				{ pageX: 10, pageY: 10 }
 			);
 
-			// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-			await sleep( 1 );
+			await waitFor( () =>
+				expect( onChangeComplete ).toHaveBeenCalled()
+			);
 
 			expect( onChangeComplete ).toHaveBeenCalledWith(
 				legacyColorMatcher
@@ -119,8 +112,7 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
+		await waitFor( () => expect( onChange ).toHaveBeenCalled() );
 
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{8})$/ )
@@ -152,8 +144,7 @@ describe( 'ColorPicker', () => {
 			{ pageX: 10, pageY: 10 }
 		);
 
-		// `onChange` is debounced so we need to sleep for at least 1ms before checking that onChange was called
-		await sleep( 1 );
+		await waitFor( () => expect( onChange ).toHaveBeenCalled() );
 
 		expect( onChange ).toHaveBeenCalledWith(
 			expect.stringMatching( /^#([a-fA-F0-9]{6})$/ )

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

@@ -14,8 +14,6 @@ import { useState } from '@wordpress/element';
  */
 import ComboboxControl from '../';
 
-jest.useFakeTimers();
-
 const timezones = [
 	{ label: 'Greenwich Mean Time', value: 'GMT' },
 	{ label: 'Universal Coordinated Time', value: 'UTC' },
@@ -56,10 +54,7 @@ const getInput = ( name ) => screen.getByRole( 'combobox', { name } );
 const getOption = ( name ) => screen.getByRole( 'option', { name } );
 const getAllOptions = () => screen.getAllByRole( 'option' );
 const getOptionSearchString = ( option ) => option.label.substring( 0, 11 );
-const setupUser = () =>
-	userEvent.setup( {
-		advanceTimers: jest.advanceTimersByTime,
-	} );
+const setupUser = () => userEvent.setup();
 
 const ControlledComboboxControl = ( {
 	value: valueProp,

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

@@ -15,8 +15,6 @@ import userEvent from '@testing-library/user-event';
  */
 import { ConfirmDialog } from '..';
 
-jest.useFakeTimers();
-
 const noop = () => {};
 
 describe( 'Confirm', () => {
@@ -82,9 +80,7 @@ describe( 'Confirm', () => {
 			} );
 
 			it( 'should not render if closed by clicking `OK`, and the `onConfirm` callback should be called', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
@@ -104,9 +100,7 @@ describe( 'Confirm', () => {
 			} );
 
 			it( 'should not render if closed by clicking `Cancel`, and the `onCancel` callback should be called', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
@@ -126,9 +120,7 @@ describe( 'Confirm', () => {
 			} );
 
 			it( 'should be dismissable even if an `onCancel` callback is not provided', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				render(
 					<ConfirmDialog onConfirm={ noop }>
@@ -166,9 +158,7 @@ describe( 'Confirm', () => {
 			} );
 
 			it( 'should not render if dialog is closed by pressing `Escape`, and the `onCancel` callback should be called', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				const onCancel = jest.fn().mockName( 'onCancel()' );
 
@@ -187,9 +177,7 @@ describe( 'Confirm', () => {
 			} );
 
 			it( 'should not render if dialog is closed by pressing `Enter`, and the `onConfirm` callback should be called', async () => {
-				const user = userEvent.setup( {
-					advanceTimers: jest.advanceTimersByTime,
-				} );
+				const user = userEvent.setup();
 
 				const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
@@ -245,9 +233,7 @@ describe( 'Confirm', () => {
 		} );
 
 		it( 'should call the `onConfirm` callback if `OK`', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onConfirm = jest.fn().mockName( 'onConfirm()' );
 
@@ -265,9 +251,7 @@ describe( 'Confirm', () => {
 		} );
 
 		it( 'should call the `onCancel` callback if `Cancel` is clicked', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
@@ -313,9 +297,7 @@ describe( 'Confirm', () => {
 		} );
 
 		it( 'should call the `onCancel` callback if the `Escape` key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onCancel = jest.fn().mockName( 'onCancel()' );
 
@@ -331,9 +313,7 @@ describe( 'Confirm', () => {
 		} );
 
 		it( 'should call the `onConfirm` callback if the `Enter` key is pressed', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			const onConfirm = jest.fn().mockName( 'onConfirm()' );
 

package/src/custom-gradient-picker/gradient-bar/utils.js

@@ -170,7 +170,7 @@ export function updateControlPointColorByPosition(
  * @param {number}  mouseXCoordinate Horizontal coordinate of the mouse position.
  * @param {Element} containerElement Container for the gradient picker.
  *
- * @return {number} Whole number percentage from the left.
+ * @return {number | undefined} Whole number percentage from the left.
  */
 export function getHorizontalRelativeGradientPosition(
 	mouseXCoordinate,

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

@@ -16,6 +16,7 @@ import {
 	startOfWeek,
 	endOfWeek,
 } from 'date-fns';
+import type { KeyboardEventHandler } from 'react';
 
 /**
  * WordPress dependencies
@@ -273,7 +274,7 @@ type DayProps = {
 	numEvents: number;
 	isInvalid: boolean;
 	onClick: () => void;
-	onKeyDown: ( event: KeyboardEvent ) => void;
+	onKeyDown: KeyboardEventHandler;
 };
 
 function Day( {

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

@@ -10,8 +10,6 @@ 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" /> );
@@ -33,9 +31,7 @@ describe( 'DatePicker', () => {
 	} );
 
 	it( 'should call onChange when a day is selected', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChange = jest.fn();
 
@@ -54,9 +50,7 @@ describe( 'DatePicker', () => {
 	} );
 
 	it( 'should call onMonthPreviewed and onChange when a day in a different month is selected', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onMonthPreviewed = jest.fn();
 		const onChange = jest.fn();

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

@@ -9,13 +9,9 @@ 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( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -69,9 +65,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should call onChange with an updated hour (12-hour clock)', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -93,9 +87,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should call onChange with a bounded hour (12-hour clock) if the hour is out of bounds', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -117,9 +109,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should call onChange with an updated hour (24-hour clock)', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -141,9 +131,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should call onChange with a bounded minute if out of bounds', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -165,9 +153,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should switch to PM correctly', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -187,9 +173,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should switch to AM correctly', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -209,9 +193,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should allow to set the time correctly when the PM period is selected', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 
@@ -244,9 +226,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should truncate at the minutes on change', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const onChangeSpy = jest.fn();
 

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

@@ -14,8 +14,6 @@ import { plus } from '@wordpress/icons';
  */
 import { DimensionControl } from '../';
 
-jest.useFakeTimers();
-
 describe( 'DimensionControl', () => {
 	const onChangeHandler = jest.fn();
 	const instanceId = 1;
@@ -90,9 +88,7 @@ describe( 'DimensionControl', () => {
 
 	describe( 'callbacks', () => {
 		it( 'should call onChange handler with correct args on size change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<DimensionControl
@@ -114,9 +110,7 @@ describe( 'DimensionControl', () => {
 		} );
 
 		it( 'should call onChange handler with undefined value when no size is provided on change', async () => {
-			const user = userEvent.setup( {
-				advanceTimers: jest.advanceTimersByTime,
-			} );
+			const user = userEvent.setup();
 
 			render(
 				<DimensionControl

package/src/disabled/test/index.tsx

@@ -9,8 +9,6 @@ import { render, screen } from '@testing-library/react';
 import Disabled from '../';
 import userEvent from '@testing-library/user-event';
 
-jest.useFakeTimers();
-
 describe( 'Disabled', () => {
 	const Form = () => (
 		<form title="form">
@@ -75,9 +73,7 @@ describe( 'Disabled', () => {
 	} );
 
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 
 		const MaybeDisable = ( { isDisabled = true } ) => (
 			<Disabled isDisabled={ isDisabled }>

package/src/draggable/test/index.native.js

@@ -59,7 +59,7 @@ describe( 'Draggable', () => {
 			{ state: State.ACTIVE },
 		] );
 
-		expect( onLongPress ).toBeCalledTimes( 1 );
+		expect( onLongPress ).toHaveBeenCalledTimes( 1 );
 		expect( onLongPress ).toHaveBeenCalledWith( triggerId );
 	} );
 
@@ -111,16 +111,16 @@ describe( 'Draggable', () => {
 			{ state: State.END },
 		] );
 
-		expect( onDragStart ).toBeCalledTimes( 1 );
+		expect( onDragStart ).toHaveBeenCalledTimes( 1 );
 		expect( onDragStart ).toHaveBeenCalledWith( {
 			id: triggerId,
 			x: touchEvents[ 0 ].x,
 			y: touchEvents[ 0 ].y,
 		} );
-		expect( onDragOver ).toBeCalledTimes( 2 );
+		expect( onDragOver ).toHaveBeenCalledTimes( 2 );
 		expect( onDragOver ).toHaveBeenNthCalledWith( 1, touchEvents[ 1 ] );
 		expect( onDragOver ).toHaveBeenNthCalledWith( 2, touchEvents[ 2 ] );
-		expect( onDragEnd ).toBeCalledTimes( 1 );
+		expect( onDragEnd ).toHaveBeenCalledTimes( 1 );
 		expect( onDragEnd ).toHaveBeenCalledWith( {
 			id: triggerId,
 			x: touchEvents[ 2 ].x,

package/src/dropdown/README.md

@@ -13,7 +13,7 @@ const MyDropdown = () => (
 	<Dropdown
 		className="my-container-class-name"
 		contentClassName="my-popover-content-classname"
-		position="bottom right"
+		popoverProps={ { placement: 'bottom-start' } }
 		renderToggle={ ( { isOpen, onToggle } ) => (
 			<Button
 				variant="primary"
@@ -90,13 +90,6 @@ Use this object to access properties/features of the `Popover` component that ar
 
 -   Required: No
 
-### `position`: `PopoverProps[ 'position' ]`
-
-The direction in which the popover should open relative to its parent node. Specify a y- and an x-axis as a space-separated string. Supports `"top"`, `"bottom"` y-axis, and `"left"`, `"center"`, `"right"` x-axis.
-
--   Required: No
--   Default: `"top center"`
-
 ### `renderContent`: `( props: CallbackProps ) => ReactNode`
 
 A callback invoked to render the content of the dropdown menu.

package/src/dropdown/index.tsx

@@ -9,6 +9,7 @@ import type { ForwardedRef } from 'react';
  */
 import { forwardRef, useEffect, useRef, useState } from '@wordpress/element';
 import { useMergeRefs } from '@wordpress/compose';
+import deprecated from '@wordpress/deprecated';
 
 /**
  * Internal dependencies
@@ -41,14 +42,24 @@ function UnforwardedDropdown(
 		expandOnMobile,
 		headerTitle,
 		focusOnMount,
-		position,
 		popoverProps,
 		onClose,
 		onToggle,
 		style,
+
+		// Deprecated props
+		position,
 	}: DropdownProps,
 	forwardedRef: ForwardedRef< any >
 ) {
+	if ( position !== undefined ) {
+		deprecated( '`position` prop in wp.components.Dropdown', {
+			since: '6.2',
+			alternative: '`popoverProps.placement` prop',
+			hint: 'Note that the `position` prop will override any values passed through the `popoverProps.placement` prop.',
+		} );
+	}
+
 	// Use internal state instead of a ref to make sure that the component
 	// re-renders when the popover's anchor updates.
 	const [ fallbackPopoverAnchor, setFallbackPopoverAnchor ] =
@@ -141,7 +152,7 @@ function UnforwardedDropdown(
 					{ ...popoverProps }
 					className={ classnames(
 						'components-dropdown__content',
-						popoverProps ? popoverProps.className : undefined,
+						popoverProps?.className,
 						contentClassName
 					) }
 				>
@@ -161,18 +172,18 @@ function UnforwardedDropdown(
  * const MyDropdown = () => (
  *   <Dropdown
  *     className="my-container-class-name"
- *     contentClassName="my-popover-content-classname"
- *     position="bottom right"
+ *     contentClassName="my-dropdown-content-classname"
+ *     popoverProps={ { placement: 'bottom-start' } }
  *     renderToggle={ ( { isOpen, onToggle } ) => (
  *       <Button
  *         variant="primary"
  *         onClick={ onToggle }
  *         aria-expanded={ isOpen }
  *       >
- *         Toggle Popover!
+ *         Toggle Dropdown!
  *       </Button>
  *     ) }
- *     renderContent={ () => <div>This is the content of the popover.</div> }
+ *     renderContent={ () => <div>This is the content of the dropdown.</div> }
  *   />
  * );
  * ```

package/src/dropdown/stories/index.tsx

@@ -16,11 +16,12 @@ const meta: ComponentMeta< typeof Dropdown > = {
 	subcomponents: { DropdownContentWrapper },
 	argTypes: {
 		focusOnMount: {
+			options: [ 'firstElement', true, false ],
 			control: {
 				type: 'radio',
-				options: [ 'firstElement', true, false ],
 			},
 		},
+		position: { control: { type: null } },
 		renderContent: { control: { type: null } },
 		renderToggle: { control: { type: null } },
 	},
@@ -42,9 +43,8 @@ const Template: ComponentStory< typeof Dropdown > = ( args ) => {
 
 export const Default: ComponentStory< typeof Dropdown > = Template.bind( {} );
 Default.args = {
-	position: 'bottom right',
 	renderToggle: ( { isOpen, onToggle } ) => (
-		<Button onClick={ onToggle } aria-expanded={ isOpen } isPrimary>
+		<Button onClick={ onToggle } aria-expanded={ isOpen } variant="primary">
 			Open dropdown
 		</Button>
 	),

package/src/dropdown/test/index.tsx

@@ -9,13 +9,9 @@ import userEvent from '@testing-library/user-event';
  */
 import Dropdown from '..';
 
-jest.useFakeTimers();
-
 describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		const { unmount } = render(
 			<Dropdown
 				className="container"
@@ -49,9 +45,7 @@ describe( 'Dropdown', () => {
 	} );
 
 	it( 'should close the dropdown when calling onClose', async () => {
-		const user = userEvent.setup( {
-			advanceTimers: jest.advanceTimersByTime,
-		} );
+		const user = userEvent.setup();
 		render(
 			<Dropdown
 				className="container"

package/src/dropdown/types.ts

@@ -81,16 +81,6 @@ export type DropdownProps = {
 		ComponentPropsWithoutRef< typeof Popover >,
 		'children'
 	>;
-	/**
-	 * The direction in which the popover should open
-	 * relative to its parent node.
-	 * Specify a y- and an x-axis as a space-separated string.
-	 * Supports "top", "bottom" y-axis,
-	 * and "left", "center", "right" x-axis.
-	 *
-	 * @default 'top center'
-	 */
-	position?: PopoverProps[ 'position' ];
 	/**
 	 * A callback invoked to render the content of the dropdown menu.
 	 * Its first argument is the same as the renderToggle prop.
@@ -112,4 +102,13 @@ export type DropdownProps = {
 	 * The style of the global container.
 	 */
 	style?: CSSProperties;
+	/**
+	 * Legacy way to specify the popover's position with respect to its anchor.
+	 * For details about the possible values, see the `Popover` component's docs.
+	 * _Note: this prop is deprecated. Use the `popoverProps.placement` prop
+	 * instead._
+	 *
+	 * @deprecated
+	 */
+	position?: PopoverProps[ 'position' ];
 };

package/src/dropdown-menu/README.md

@@ -205,6 +205,6 @@ Use this object to modify props available for the `NavigableMenu` component that
 
 In some contexts, the arrow down key used to open the dropdown menu might need to be disabled—for example when that key is used to perform another action.
 
--   Type: `Object`
+-   Type: `boolean`
 -   Required: No
 -   Default: `false`