@wordpress/components 40.0.0 → 40.1.0

package/src/palette-edit/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, test, vi } from 'vitest';
 import { render, screen, waitFor, within } from '@testing-library/react';
 import { click, type, press } from '@ariakit/test';
 import PaletteEdit, {
@@ -6,6 +7,8 @@ import PaletteEdit, {
 } from '..';
 import type { PaletteElement } from '../types';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const noop = () => {};
 
 async function clearInput( input: HTMLInputElement ) {
@@ -384,7 +387,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'calls the `onChange` with the new color appended', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -413,7 +416,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'calls the `onChange` with the new gradient appended', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -443,7 +446,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'calls the `onChange` with the new duotone appended, seeded from the color palette', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -474,7 +477,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'ignores palette colors a duotone cannot be built from when adding one', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -518,7 +521,7 @@ describe( 'PaletteEdit', () => {
 	// accepts hex, `rgb()` and `hsl()`, so a named color saved as-is would
 	// render in the editor and be dropped on the front end.
 	it( 'normalizes palette colors to hex when adding a duotone', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -551,7 +554,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'falls back to black and white when adding a duotone without a color palette', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -590,7 +593,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'can remove a color', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -623,7 +626,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'can update palette name', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -663,7 +666,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'can update color palette value', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -694,7 +697,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'can update gradient palette value', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -727,7 +730,7 @@ describe( 'PaletteEdit', () => {
 	} );
 
 	it( 'can update duotone palette value', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -757,7 +760,7 @@ describe( 'PaletteEdit', () => {
 	// has to apply when editing one, or the shadows and highlights picker can
 	// offer a color the saved duotone cannot be built from.
 	it( 'hides unusable colors and saves named ones as hex when editing a duotone', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<PaletteEdit
@@ -805,7 +808,7 @@ describe( 'PaletteEdit', () => {
 	// rather than an edge one. The duotone that was clicked has to be the one
 	// that gets edited.
 	it( 'updates the clicked duotone when two share the same colors', async () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const twins = [
 			{ colors: [ '#000000', '#ffffff' ], name: 'First', slug: 'first' },
 			{

package/src/panel/test/__snapshots__/body.jsdom.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PanelBody > basic rendering > should render an empty div with the matching className 1`] = `
+<div>
+  <div
+    class="components-panel__body is-opened"
+  />
+</div>
+`;

package/src/panel/test/__snapshots__/header.jsdom.test.tsx.snap

@@ -0,0 +1,9 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PanelHeader > basic rendering > should render PanelHeader with empty div inside 1`] = `
+<div>
+  <div
+    class="components-panel__header"
+  />
+</div>
+`;

package/src/panel/test/__snapshots__/index.jsdom.test.tsx.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Panel > basic rendering > should render an additional className 1`] = `
+<div>
+  <div
+    class="the-panel components-panel"
+  />
+</div>
+`;
+
+exports[`Panel > basic rendering > should render an empty div without any provided props 1`] = `
+<div>
+  <div
+    class="components-panel"
+  />
+</div>
+`;

package/src/panel/test/__snapshots__/row.jsdom.test.tsx.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PanelRow > should render with the custom class name 1`] = `
+<div>
+  <div
+    class="components-panel__row custom"
+  />
+</div>
+`;
+
+exports[`PanelRow > should render with the default class name 1`] = `
+<div>
+  <div
+    class="components-panel__row"
+  />
+</div>
+`;

package/src/panel/test/{body.tsx → body.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { PanelBody } from '../body';
@@ -131,7 +132,7 @@ describe( 'PanelBody', () => {
 
 		it( 'should pass button props to panel title', async () => {
 			const user = userEvent.setup();
-			const mock = jest.fn();
+			const mock = vi.fn();
 
 			render(
 				<PanelBody title="Panel" buttonProps={ { onClick: mock } }>

package/src/panel/test/{header.tsx → header.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import PanelHeader from '../header';
 

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

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import Panel from '..';
 

package/src/panel/test/{row.tsx → row.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import PanelRow from '../row';
 

package/src/placeholder/style.scss

@@ -51,11 +51,6 @@
 	.block-editor-block-icon {
 		margin-right: $grid-unit-05;
 		fill: currentColor;
-		// Optimize for high contrast modes.
-		// See also https://blogs.windows.com/msedgedev/2020/09/17/styling-for-windows-high-contrast-with-new-standards-for-forced-colors/.
-		@media (forced-colors: active) {
-			fill: CanvasText;
-		}
 	}
 
 	// Don't take up space if the label is empty.

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

@@ -1,3 +1,4 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import { useResizeObserver } from '@wordpress/compose';
 import { SVG, Path } from '@wordpress/primitives';
@@ -6,10 +7,13 @@ import BasePlaceholder from '../';
 import type { WordPressComponentProps } from '../../context';
 import type { PlaceholderProps } from '../types';
 
-jest.mock( '@wordpress/compose', () => {
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => {
+	const original = await importOriginal();
 	return {
-		...jest.requireActual( '@wordpress/compose' ),
-		useResizeObserver: jest.fn( () => [] ),
+		...original,
+		useResizeObserver: vi.fn(
+			() => []
+		) as unknown as typeof original.useResizeObserver,
 	};
 } );
 
@@ -31,15 +35,18 @@ const Placeholder = (
 
 const getPlaceholder = () => screen.getByTestId( 'placeholder' );
 
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
-const mockedSpeak = jest.mocked( speak );
+vi.mock( import( '@wordpress/a11y' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	speak: vi.fn(),
+} ) );
+const mockedUseResizeObserver = vi.mocked( useResizeObserver );
+const mockedSpeak = vi.mocked( speak );
 
 describe( 'Placeholder', () => {
 	beforeEach( () => {
-		// @ts-expect-error The imported hook is not typed as a Jest mock.
-		useResizeObserver.mockReturnValue( [
+		mockedUseResizeObserver.mockReturnValue( [
 			<div key="1" />,
-			{ width: 320 },
+			{ width: 320, height: null },
 		] );
 		mockedSpeak.mockReset();
 	} );
@@ -153,10 +160,9 @@ describe( 'Placeholder', () => {
 
 	describe( 'resize aware', () => {
 		it( 'should not assign modifier class in first-pass `null` width from `useResizeObserver`', () => {
-			// @ts-expect-error The imported hook is not typed as a Jest mock.
-			useResizeObserver.mockReturnValue( [
+			mockedUseResizeObserver.mockReturnValue( [
 				<div key="1" />,
-				{ width: 480 },
+				{ width: 480, height: null },
 			] );
 
 			render( <Placeholder /> );
@@ -168,10 +174,9 @@ describe( 'Placeholder', () => {
 		} );
 
 		it( 'should assign modifier class', () => {
-			// @ts-expect-error The imported hook is not typed as a Jest mock.
-			useResizeObserver.mockReturnValue( [
+			mockedUseResizeObserver.mockReturnValue( [
 				<div key="1" />,
-				{ width: null },
+				{ width: null, height: null },
 			] );
 
 			render( <Placeholder /> );

package/src/popover/README.md

@@ -183,9 +183,9 @@ Used to show/hide the arrow that points at the popover's anchor.
 -   Required: No
 -   Default: `true`
 
-### `offset`: `number`
+### `offset`: `number | { mainAxis?: number; crossAxis?: number }`
 
-The distance (in px) between the anchor and the popover.
+The distance (in px) between the anchor and the popover. A number displaces the popover along its main axis; pass an object to also displace it along its cross axis.
 
 -   Required: No
 

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

@@ -174,6 +174,29 @@ describe( 'Popover', () => {
 			} );
 		} );
 
+		describe( 'offset', () => {
+			it( 'should displace the popover along its cross axis when passed an offset object', async () => {
+				render(
+					<Popover
+						placement="right-start"
+						offset={ { mainAxis: 16, crossAxis: 24 } }
+						animate={ false }
+						flip={ false }
+						shift={ false }
+						data-testid="popover-element"
+					>
+						Hello
+					</Popover>
+				);
+				const popover = screen.getByTestId( 'popover-element' );
+
+				await waitFor( () => expect( popover ).toBeVisible() );
+				expect( popover ).toHaveStyle(
+					'transform: translateX(16px) translateY(24px)'
+				);
+			} );
+		} );
+
 		describe( 'style', () => {
 			it( 'outputs inline styles added through the style prop in addition to built-in popover positioning styles', async () => {
 				render(

package/src/popover/types.ts

@@ -105,9 +105,15 @@ export type PopoverProps = {
 	 */
 	noArrow?: boolean;
 	/**
-	 * The distance (in px) between the anchor and the popover.
-	 */
-	offset?: number;
+	 * The distance (in px) between the anchor and the popover. Pass an object to
+	 * also displace the popover along its cross axis.
+	 */
+	offset?:
+		| number
+		| {
+				mainAxis?: number;
+				crossAxis?: number;
+		  };
 	/**
 	 * A callback invoked when the popover should be closed.
 	 */

package/src/progress-bar/style.module.scss

@@ -33,12 +33,20 @@ $indeterminate-indicator-width: 50%;
 	outline-offset: -2px;
 
 	width: var(--indicator-width);
-	transition: width 0.4s ease-in-out;
+
+	@media not (prefers-reduced-motion) {
+		transition: width 0.4s ease-in-out;
+	}
 
 	&.is-indeterminate {
 		--indicator-width: #{$indeterminate-indicator-width};
 		animation: indeterminate-slide 1.5s ease-in-out infinite;
 		transition: none;
+
+		@media (prefers-reduced-motion: reduce) {
+			animation-duration: 3s;
+			animation-timing-function: steps(4, end);
+		}
 	}
 }
 

package/src/query-controls/test/terms.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { buildTermsTree } from '../terms';
 
 describe( 'buildTermsTree()', () => {

package/src/radio-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,8 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import RadioControl from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const ControlledRadioControl = ( {
 	...props
 }: React.ComponentProps< typeof RadioControl > ) => {
@@ -54,7 +57,7 @@ describe.each( [
 
 	describe( 'semantics and labelling', () => {
 		it( 'should render a radiogroup with an accessible label (legend)', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -65,7 +68,7 @@ describe.each( [
 		} );
 
 		it( 'should render a radiogroup with an accessible label even when the label is visually hidden', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultProps }
@@ -113,7 +116,7 @@ describe.each( [
 		} );
 
 		it( 'should describe the radio group with the help text', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultProps }
@@ -128,7 +131,7 @@ describe.each( [
 		} );
 
 		it( 'should render radio inputs with accessible labels', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -143,7 +146,7 @@ describe.each( [
 		} );
 
 		it( 'should not select have a selected value when the `selected` prop does not match any available options', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -156,7 +159,7 @@ describe.each( [
 		} );
 
 		it( 'should render mutually exclusive radio inputs', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultProps }
@@ -173,7 +176,7 @@ describe.each( [
 		} );
 
 		it( 'should use the option description text to describe individual options', () => {
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultPropsWithDescriptions }
@@ -199,7 +202,7 @@ describe.each( [
 	describe( 'interaction', () => {
 		it( 'should keep enabled options interactive when another option is disabled', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component
 					{ ...defaultPropsWithDisabledOption }
@@ -227,7 +230,7 @@ describe.each( [
 
 		it( 'should select a new value when clicking on the radio input', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -252,7 +255,7 @@ describe.each( [
 
 		it( 'should select a new value when clicking on the radio label', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);
@@ -275,7 +278,7 @@ describe.each( [
 
 		it( 'should select a new value when using the arrow keys', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<Component { ...defaultProps } onChange={ onChangeSpy } />
 			);

package/src/range-control/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,6 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
 import { act, fireEvent, render, screen } from '@testing-library/react';
 import RangeControl from '../';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const getRangeInput = (): HTMLInputElement => screen.getByRole( 'slider' );
 const getNumberInput = (): HTMLInputElement => screen.getByRole( 'spinbutton' );
 const getResetButton = (): HTMLButtonElement => screen.getByRole( 'button' );
@@ -11,7 +14,7 @@ const fireChangeEvent = ( input: HTMLInputElement, value?: number | string ) =>
 describe( 'RangeControl', () => {
 	describe( '#render()', () => {
 		it( 'should trigger change callback with numeric value', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 
 			render( <RangeControl onChange={ onChange } /> );
 
@@ -76,7 +79,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should not call onChange if new value is invalid', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render(
 				<RangeControl onChange={ onChange } min={ 10 } max={ 20 } />
 			);
@@ -90,7 +93,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should keep invalid values in number input until loss of focus', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render(
 				<RangeControl onChange={ onChange } min={ -1 } max={ 1 } />
 			);
@@ -141,7 +144,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should take into account the step starting from min', () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render(
 				<RangeControl
 					onChange={ onChange }
@@ -286,7 +289,7 @@ describe( 'RangeControl', () => {
 
 	describe( 'reset', () => {
 		it( 'should clear the input value when clicking the reset button', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render( <RangeControl allowReset onChange={ spy } /> );
 
 			const resetButton = getResetButton();
@@ -310,7 +313,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should reset to the `initialPosition` value when clicking the reset button', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render(
 				<RangeControl
 					allowReset
@@ -339,7 +342,7 @@ describe( 'RangeControl', () => {
 		} );
 
 		it( 'should reset to the `resetFallbackValue` value when clicking the reset button', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render(
 				<RangeControl
 					initialPosition={ 10 }

package/src/resizable-box/index.tsx

@@ -102,7 +102,7 @@ function UnforwardedResizableBox(
 			) }
 			// Add a focusable element within the drag handle. Unfortunately,
 			// `re-resizable` does not make them properly focusable by default,
-			// causing focus to move the the block wrapper which triggers block
+			// causing focus to move the block wrapper which triggers block
 			// drag.
 			handleComponent={ Object.fromEntries(
 				Object.keys( HANDLE_CLASSES ).map( ( key ) => [

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

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { useState } from '@wordpress/element';
 import SandBox, { VIEWPORT_UNIT_VALUE_REGEX, buildSandBoxDocument } from '..';

package/src/scroll-lock/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render } from '@testing-library/react';
 import ScrollLock from '..';
 

package/src/shortcut/test/__snapshots__/index.jsdom.test.tsx.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Shortcut > renders passed className 1`] = `
+<span
+  class="my-class"
+>
+  shortcut text
+</span>
+`;
+
+exports[`Shortcut > renders the shortcut display text when a string is passed as the shortcut 1`] = `
+<span>
+  shortcut text
+</span>
+`;

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

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import Shortcut from '..';
 

package/src/slot-fill/test/{index.js → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import { createRef } from '@wordpress/element';
 import { createSlotFill, Provider as SlotFillProvider } from '../';
@@ -79,7 +80,7 @@ describe( 'createSlotFill', () => {
 
 	test( 'should forward ref to the slot when using bubblesVirtually', () => {
 		const TestSlotFill = createSlotFill( 'TestRefSlot' );
-		const ref = createRef();
+		const ref = createRef< HTMLElement >();
 
 		render(
 			<SlotFillProvider>
@@ -91,12 +92,12 @@ describe( 'createSlotFill', () => {
 		);
 
 		expect( ref.current ).not.toBeNull();
-		expect( ref.current.tagName ).toBe( 'DIV' );
+		expect( ref.current!.tagName ).toBe( 'DIV' );
 	} );
 
 	test( 'should forward ref without bubblesVirtually (ref stays null for fragment-based slot)', () => {
 		const TestSlotFill = createSlotFill( 'TestRefSlotBase' );
-		const ref = createRef();
+		const ref = createRef< HTMLElement >();
 
 		render(
 			<SlotFillProvider>