@wordpress/components 39.0.0 → 40.1.0

package/src/date-time/date-time/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,9 +1,20 @@
+import {
+	afterAll,
+	afterEach,
+	beforeAll,
+	describe,
+	expect,
+	it,
+	vi,
+} from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import timezoneMock from 'timezone-mock';
 import { getSettings, setSettings, type DateSettings } from '@wordpress/date';
 import DateTimePicker from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'DateTimePicker', () => {
 	let originalSettings: DateSettings;
 	beforeAll( () => {
@@ -20,7 +31,7 @@ describe( 'DateTimePicker', () => {
 	} );
 
 	afterEach( () => {
-		jest.restoreAllMocks();
+		vi.restoreAllMocks();
 		timezoneMock.unregister();
 	} );
 
@@ -30,7 +41,7 @@ describe( 'DateTimePicker', () => {
 
 	it( 'should display and select dates correctly when timezones match', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		timezoneMock.register( 'US/Eastern' );
 
@@ -120,7 +131,7 @@ describe( 'DateTimePicker', () => {
 				} ) => {
 					it( 'should display and select dates correctly', async () => {
 						const user = userEvent.setup();
-						const onChange = jest.fn();
+						const onChange = vi.fn();
 
 						timezoneMock.register( timezone );
 
@@ -196,7 +207,7 @@ describe( 'DateTimePicker', () => {
 
 	describe( 'input types with timezone variations', () => {
 		afterEach( () => {
-			jest.useRealTimers();
+			vi.useRealTimers();
 			timezoneMock.unregister();
 		} );
 
@@ -268,16 +279,14 @@ describe( 'DateTimePicker', () => {
 					// set initial dates.
 					let user: ReturnType< typeof userEvent.setup >;
 					if ( initialDate === undefined ) {
-						jest.useFakeTimers();
-						jest.setSystemTime( Date.UTC( 2025, 10, 16, 1, 0, 0 ) );
-						user = userEvent.setup( {
-							advanceTimers: jest.advanceTimersByTime,
-						} );
+						vi.useFakeTimers( { toFake: [ 'Date' ] } );
+						vi.setSystemTime( Date.UTC( 2025, 10, 16, 1, 0, 0 ) );
+						user = userEvent.setup();
 					} else {
 						user = userEvent.setup();
 					}
 
-					const onChange = jest.fn();
+					const onChange = vi.fn();
 					const { rerender } = render(
 						<DateTimePicker
 							currentDate={ initialDate }
@@ -392,7 +401,7 @@ describe( 'DateTimePicker', () => {
 
 	it( 'should preserve time when changing date', async () => {
 		const user = userEvent.setup();
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		timezoneMock.register( 'UTC' );
 

package/src/date-time/test/utils.test.ts

@@ -1,3 +1,12 @@
+import {
+	afterAll,
+	afterEach,
+	beforeAll,
+	beforeEach,
+	describe,
+	expect,
+	it,
+} from 'vitest';
 import timezoneMock from 'timezone-mock';
 import { getSettings, setSettings, type DateSettings } from '@wordpress/date';
 import { inputToDate, getDaysInMonth } from '../utils';

package/src/date-time/time-picker/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,14 +1,28 @@
+import {
+	afterAll,
+	afterEach,
+	beforeAll,
+	beforeEach,
+	describe,
+	expect,
+	it,
+	vi,
+} from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import timezoneMock from 'timezone-mock';
 import { getSettings, setSettings, type DateSettings } from '@wordpress/date';
 import TimePicker from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 describe( 'TimePicker', () => {
 	it( 'should call onChange with updated date values', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -62,7 +76,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with an updated hour (12-hour clock)', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -84,7 +98,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();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -106,7 +120,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with an updated hour (24-hour clock)', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -128,7 +142,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with a bounded minute if out of bounds', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -150,7 +164,7 @@ describe( 'TimePicker', () => {
 	it( 'should call onChange with a bounded day if out of bounds', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -173,7 +187,7 @@ describe( 'TimePicker', () => {
 	it( 'should clamp day when switching months', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -195,7 +209,7 @@ describe( 'TimePicker', () => {
 	it( 'should clamp day when switching year from leap to non-leap', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -219,7 +233,7 @@ describe( 'TimePicker', () => {
 	it( 'should switch to PM correctly', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -239,7 +253,7 @@ describe( 'TimePicker', () => {
 	it( 'should switch to AM correctly', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -259,7 +273,7 @@ describe( 'TimePicker', () => {
 	it( 'should allow to set the time correctly when the PM period is selected', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -292,7 +306,7 @@ describe( 'TimePicker', () => {
 	it( 'should truncate at the minutes on change', async () => {
 		const user = userEvent.setup();
 
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -312,7 +326,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should reset the date when currentTime changed', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		const { rerender } = render(
 			<TimePicker
@@ -351,7 +365,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'should have different layouts/orders for 12/24 hour formats', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		const { rerender } = render(
 			<form aria-label="form">
@@ -395,7 +409,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'Should change layouts/orders when `dateOrder` prop is passed', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<form aria-label="form">
@@ -425,7 +439,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'Should ignore `is12Hour` prop setting when `dateOrder` prop is explicitly passed', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<form aria-label="form">
@@ -456,7 +470,7 @@ describe( 'TimePicker', () => {
 	} );
 
 	it( 'Should set a time when passed a null currentTime', () => {
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimePicker
@@ -505,7 +519,7 @@ describe( 'TimePicker', () => {
 		} );
 
 		afterEach( () => {
-			jest.useRealTimers();
+			vi.useRealTimers();
 			timezoneMock.unregister();
 		} );
 
@@ -576,19 +590,15 @@ describe( 'TimePicker', () => {
 					// For undefined, set fake system time to get a known current time
 					let user: ReturnType< typeof userEvent.setup >;
 					if ( initialTime === undefined ) {
-						jest.useFakeTimers();
+						vi.useFakeTimers( { toFake: [ 'Date' ] } );
 						// Set system time to 12:00 UTC
-						jest.setSystemTime(
-							Date.UTC( 2025, 11, 18, 12, 0, 0 )
-						);
-						user = userEvent.setup( {
-							advanceTimers: jest.advanceTimersByTime,
-						} );
+						vi.setSystemTime( Date.UTC( 2025, 11, 18, 12, 0, 0 ) );
+						user = userEvent.setup();
 					} else {
 						user = userEvent.setup();
 					}
 
-					const onChange = jest.fn();
+					const onChange = vi.fn();
 
 					const { rerender } = render(
 						<TimePicker
@@ -653,7 +663,7 @@ describe( 'TimePicker', () => {
 	describe( 'ISO 8601 compliance', () => {
 		it( 'should handle years below 1000 with zero-padded output', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<TimePicker

package/src/date-time/time-picker/time-input/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,13 +1,18 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import TimeInput from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 describe( 'TimeInput', () => {
 	it( 'should call onChange with updated values | 24-hours format', async () => {
 		const user = userEvent.setup();
 
 		const timeInputValue = { hours: 0, minutes: 0 };
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimeInput
@@ -59,7 +64,7 @@ describe( 'TimeInput', () => {
 		const user = userEvent.setup();
 
 		const timeInputValue = { hours: 0, minutes: 0 };
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimeInput
@@ -106,7 +111,7 @@ describe( 'TimeInput', () => {
 		const user = userEvent.setup();
 
 		const timeInputValue = { hours: 0, minutes: 0 };
-		const onChangeSpy = jest.fn();
+		const onChangeSpy = vi.fn();
 
 		render(
 			<TimeInput

package/src/disabled/index.tsx

@@ -59,14 +59,14 @@ function Disabled( {
 			<div
 				// @ts-expect-error `inert` is not declared in React 18's HTML attribute types.
 				inert={ isDisabled ? 'true' : undefined }
+				// Only the disabled styling is conditional. The consumer's own
+				// className has to stick around so the wrapper stays targetable
+				// whether or not it is currently disabled.
 				className={
-					isDisabled
-						? clsx(
-								styles.disabled,
-								className,
-								'components-disabled'
-						  )
-						: undefined
+					clsx(
+						className,
+						isDisabled && [ styles.disabled, 'components-disabled' ]
+					) || undefined
 				}
 				{ ...props }
 			>

package/src/disabled/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, test } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Disabled from '../';
@@ -67,6 +68,31 @@ describe( 'Disabled', () => {
 		);
 	} );
 
+	it( 'keeps the consumer className and toggles only the disabled classes', () => {
+		const MaybeDisable = ( { isDisabled = true } ) => (
+			<Disabled
+				isDisabled={ isDisabled }
+				className="my-wrapper"
+				data-testid="disabled-wrapper"
+			>
+				<Form />
+			</Disabled>
+		);
+
+		const { rerender } = render( <MaybeDisable /> );
+
+		const wrapper = screen.getByTestId( 'disabled-wrapper' );
+		expect( wrapper ).toHaveClass( 'my-wrapper' );
+		expect( wrapper ).toHaveClass( 'components-disabled' );
+		expect( wrapper ).toHaveClass( styles.disabled );
+
+		rerender( <MaybeDisable isDisabled={ false } /> );
+
+		expect( wrapper ).toHaveClass( 'my-wrapper' );
+		expect( wrapper ).not.toHaveClass( 'components-disabled' );
+		expect( wrapper ).not.toHaveClass( styles.disabled );
+	} );
+
 	it( 'should preserve input values when toggling the isDisabled prop', async () => {
 		const user = userEvent.setup();
 

package/src/draggable/index.tsx

@@ -6,7 +6,7 @@ import type { DraggableProps } from './types';
 import styles from './style.module.scss';
 
 // Legacy class names preserved alongside the CSS-module hashed ones for
-// backwards compatibility. `filter(Boolean)` strips `undefined` from Jest's
+// backwards compatibility. `filter(Boolean)` strips `undefined` from the
 // CSS-module mock.
 const dragImageClasses = [
 	styles[ 'invisible-drag-image' ],

package/src/draggable/style.module.scss

@@ -2,7 +2,7 @@
 
 .invisible-drag-image {
 	position: fixed;
-	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Offscreen drag-image stand-in; flipping with writing direction has no benefit. */
+	/* stylelint-disable-next-line logical-css/require-logical-properties -- Offscreen drag-image stand-in; flipping with writing direction has no benefit. */
 	left: -1000px;
 	height: 50px;
 	width: 50px;

package/src/dropdown/dropdown-content-wrapper.tsx

@@ -1,22 +1,32 @@
+import clsx from 'clsx';
 import type { ForwardedRef } from 'react';
 import type { WordPressComponentProps } from '../context';
 import { contextConnect, useContextSystem } from '../context';
-import { DropdownContentWrapperDiv } from './styles';
 import type { DropdownContentWrapperProps } from './types';
+import styles from './style.module.scss';
 
 function UnconnectedDropdownContentWrapper(
 	props: WordPressComponentProps< DropdownContentWrapperProps, 'div', false >,
 	forwardedRef: ForwardedRef< any >
 ) {
-	const { paddingSize = 'small', ...derivedProps } = useContextSystem(
-		props,
-		'DropdownContentWrapper'
-	);
+	const {
+		paddingSize = 'small',
+		className,
+		...derivedProps
+	} = useContextSystem( props, 'DropdownContentWrapper' );
 
 	return (
-		<DropdownContentWrapperDiv
+		<div
 			{ ...derivedProps }
-			paddingSize={ paddingSize }
+			className={ clsx(
+				styles[ 'content-wrapper' ],
+				{
+					[ styles[ 'padding-small' ] ]:
+						paddingSize !== 'none' && paddingSize !== 'medium',
+					[ styles[ 'padding-medium' ] ]: paddingSize === 'medium',
+				},
+				className
+			) }
 			ref={ forwardedRef }
 		/>
 	);

package/src/dropdown/stories/index.story.tsx

@@ -12,11 +12,6 @@ const meta: Meta< typeof Dropdown > = {
 	id: 'components-dropdown',
 	component: Dropdown,
 	subcomponents: { DropdownContentWrapper },
-	// Temporary: Due to an upstream bug, render the root explicitly so the
-	// components manifest extractor can resolve props from the JSX.
-	//
-	// See: https://github.com/storybookjs/storybook/issues/34877
-	render: ( args ) => <Dropdown { ...args } />,
 	args: {
 		onClose: fn(),
 		onToggle: fn(),

package/src/dropdown/style.module.scss

@@ -0,0 +1,25 @@
+@use "@wordpress/base-styles/variables" as *;
+
+.content-wrapper {
+	// Negative margin to reset (offset) the default padding on .components-popover__content.
+	/* stylelint-disable logical-css/require-logical-properties -- Preserve the previous physical offsets against Popover padding. */
+	margin-left: -$grid-unit-10;
+	margin-right: -$grid-unit-10;
+
+	&:first-of-type {
+		margin-top: -$grid-unit-10;
+	}
+
+	&:last-of-type {
+		margin-bottom: -$grid-unit-10;
+	}
+	/* stylelint-enable logical-css/require-logical-properties */
+}
+
+.padding-small {
+	padding: $grid-unit-10;
+}
+
+.padding-medium {
+	padding: $grid-unit-20;
+}

package/src/dropdown/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,6 +1,58 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import Dropdown from '..';
+import { DropdownContentWrapper } from '../dropdown-content-wrapper';
+import styles from '../style.module.scss';
+
+describe( 'DropdownContentWrapper', () => {
+	it( 'should apply the small padding class by default', () => {
+		render(
+			<DropdownContentWrapper>
+				<span>content</span>
+			</DropdownContentWrapper>
+		);
+
+		// Disable reason: Semantic queries can't reach the wrapper.
+		// eslint-disable-next-line testing-library/no-node-access
+		expect( screen.getByText( 'content' ).parentElement ).toHaveClass(
+			styles[ 'content-wrapper' ],
+			styles[ 'padding-small' ]
+		);
+	} );
+
+	it( 'should apply the medium padding class', () => {
+		render(
+			<DropdownContentWrapper paddingSize="medium">
+				<span>content</span>
+			</DropdownContentWrapper>
+		);
+
+		// Disable reason: Semantic queries can't reach the wrapper.
+		// eslint-disable-next-line testing-library/no-node-access
+		const wrapper = screen.getByText( 'content' ).parentElement;
+		expect( wrapper ).toHaveClass(
+			styles[ 'content-wrapper' ],
+			styles[ 'padding-medium' ]
+		);
+		expect( wrapper ).not.toHaveClass( styles[ 'padding-small' ] );
+	} );
+
+	it( 'should omit padding classes when paddingSize is none', () => {
+		render(
+			<DropdownContentWrapper paddingSize="none">
+				<span>content</span>
+			</DropdownContentWrapper>
+		);
+
+		// Disable reason: Semantic queries can't reach the wrapper.
+		// eslint-disable-next-line testing-library/no-node-access
+		const wrapper = screen.getByText( 'content' ).parentElement;
+		expect( wrapper ).toHaveClass( styles[ 'content-wrapper' ] );
+		expect( wrapper ).not.toHaveClass( styles[ 'padding-small' ] );
+		expect( wrapper ).not.toHaveClass( styles[ 'padding-medium' ] );
+	} );
+} );
 
 describe( 'Dropdown', () => {
 	it( 'should toggle the dropdown properly', async () => {

package/src/dropdown-menu/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
@@ -26,22 +27,22 @@ describe( 'DropdownMenu', () => {
 			{
 				title: 'Up',
 				icon: arrowUp,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 			{
 				title: 'Right',
 				icon: arrowRight,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 			{
 				title: 'Down',
 				icon: arrowDown,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 			{
 				title: 'Left',
 				icon: arrowLeft,
-				onClick: jest.fn(),
+				onClick: vi.fn(),
 			},
 		];
 

package/src/duotone-picker/README.md

@@ -57,23 +57,38 @@ Array of duotone presets of the form `{ colors: [ '#000000', '#ffffff' ], name:
 
 An array of colors for the duotone effect.
 
+### `selectedSlug`
+
+-   Type: `string`
+-   Required: No
+
+The slug of the selected duotone preset. When a non-empty `selectedSlug` is given, selection is decided strictly by slug, which keeps two presets holding the same pair of colors apart. Presets whose slug does not match will not appear selected in this mode, even if their colors match `value`.
+
+An empty string is treated the same as `undefined`: selection falls back to matching by color value.
+
 ### `onChange`
 
--   Type: `Function`
+-   Type: `(value: string[] | 'unset' | undefined, index?: number | undefined, slug?: string | undefined) => void`
 -   Required: Yes
 
-Callback which is called when the duotone colors change.
+The function called when the duotone colors change. It is passed the new `value` as an argument. When a preset from `duotonePalette` is picked, the second argument is its index and the third is its slug.
+
+Both are omitted whenever no preset is being picked: the custom, unset and clear controls, and deselecting the currently selected preset, which reports `undefined` alone.
+
+### `presentation`: `'listbox' | 'toggle-buttons' | 'command-buttons'`
 
-### `asButtons`: `boolean`
+Controls the predefined swatches' interaction and accessibility semantics.
 
-Whether the control should present as a set of buttons, each with its own tab stop.
+-   `listbox` uses one tab stop for the picker. Arrow keys move between options. Options expose selection with `aria-selected`.
+-   `toggle-buttons` uses a tab stop for each swatch. Swatches expose selection with `aria-pressed`.
+-   `command-buttons` uses a tab stop for each swatch. Swatches do not expose selection. The `value` and `selectedSlug` props do not mark predefined swatches as selected, and activating a swatch always calls `onChange` with that swatch.
 
 - Required: No
-- Default: `false`
+- Default: `listbox`
 
 ### `loop`: `boolean`
 
-Prevents keyboard interaction from wrapping around. Only used when `asButtons` is not true.
+Prevents arrow-key navigation from wrapping around. Only used with the `listbox` presentation.
 
 - Required: No
 - Default: `true`

package/src/duotone-picker/custom-duotone-bar.tsx

@@ -21,6 +21,7 @@ export default function CustomDuotoneBar( {
 	return (
 		<CustomGradientBar
 			disableInserter
+			disablePositioning
 			background={ background }
 			hasGradient={ hasGradient }
 			value={ controlPoints }