@wordpress/components 40.0.0 → 40.1.0

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

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, fireEvent } from '@testing-library/react';
 import ContentEditableControl from '..';
 
@@ -142,15 +143,15 @@ describe( 'ContentEditableControl', () => {
 	it( 'forwards its ref to the contenteditable element', () => {
 		// The rich-text wiring (the `useRichText` ref, event-listener refs,
 		// an anchor ref, …) is injected through this forwarded ref.
-		const ref = jest.fn();
+		const ref = vi.fn();
 		render( <ContentEditableControl label="Note" ref={ ref } /> );
 
 		expect( ref ).toHaveBeenCalledWith( screen.getByRole( 'textbox' ) );
 	} );
 
 	it( 'calls consumer-supplied focus and blur handlers', () => {
-		const onFocus = jest.fn();
-		const onBlur = jest.fn();
+		const onFocus = vi.fn();
+		const onBlur = vi.fn();
 		render(
 			<ContentEditableControl
 				label="Field"

package/src/context/{context-system-provider.js → context-system-provider.tsx}

@@ -1,6 +1,7 @@
 import deepmerge from 'deepmerge';
 import fastDeepEqual from 'fast-deep-equal/es6/index.js';
 import { isPlainObject } from 'is-plain-object';
+import type { ReactNode } from 'react';
 import {
 	createContext,
 	useContext,
@@ -11,9 +12,12 @@ import {
 import warn from '@wordpress/warning';
 import { useUpdateEffect } from '../utils';
 
-export const ComponentsContext = createContext(
-	/** @type {Record<string, any>} */ ( {} )
-);
+type ContextSystemValue = Record<
+	string,
+	Record< string, unknown > | undefined
+>;
+
+export const ComponentsContext = createContext< ContextSystemValue >( {} );
 ComponentsContext.displayName = 'ComponentsContext';
 
 export const useComponentsContext = () => useContext( ComponentsContext );
@@ -27,7 +31,11 @@ export const useComponentsContext = () => useContext( ComponentsContext );
  * @param {Record<string, any>} props.value
  * @return {Record<string, any>} The consolidated value.
  */
-function useContextSystemBridge( { value } ) {
+function useContextSystemBridge( {
+	value,
+}: {
+	value?: ContextSystemValue;
+} ): ContextSystemValue {
 	const parentContext = useComponentsContext();
 
 	const valueRef = useRef( value );
@@ -82,7 +90,13 @@ function useContextSystemBridge( { value } ) {
  * @param {T}               options.value    Props to render into connected components.
  * @return {React.JSX.Element} A Provider wrapped component.
  */
-const BaseContextSystemProvider = ( { children, value } ) => {
+const BaseContextSystemProvider = ( {
+	children,
+	value,
+}: {
+	children: ReactNode;
+	value?: ContextSystemValue;
+} ) => {
 	const contextValue = useContextSystemBridge( { value } );
 
 	return (

package/src/context/stories/{ComponentsProvider.stories.jsx → ComponentsProvider.stories.tsx}

@@ -4,7 +4,7 @@ import { View } from '../../view';
 import { Text } from '../../text';
 import { ContextSystemProvider } from '../index';
 
-const SomeContext = createContext();
+const SomeContext = createContext< number | undefined >( undefined );
 const useSomeContext = () => useContext( SomeContext );
 
 export default {
@@ -39,7 +39,7 @@ const innerContext = {
 
 const InnerContent = memo( () => {
 	const state = useSomeContext();
-	const isEven = state % 2 === 0;
+	const isEven = state !== undefined && state % 2 === 0;
 	return (
 		<View style={ { background: isEven ? 'red' : 'initial' } }>
 			<Text>Card (inside innerContext)</Text>

package/src/context/test/context-connect.tsx

@@ -1,9 +1,9 @@
+import { describe, it } from 'vitest';
 import type { ForwardedRef } from 'react';
 import { contextConnect, contextConnectWithoutRef } from '../context-connect';
 import type { WordPressComponentProps } from '../wordpress-component';
 
 // Static TypeScript tests
-/* eslint-disable jest/expect-expect */
 describe( 'ref forwarding', () => {
 	const ComponentWithRef = (
 		props: WordPressComponentProps< {}, 'div' >,
@@ -47,4 +47,3 @@ describe( 'ref forwarding', () => {
 		<NoRef foo={ null } />;
 	} );
 } );
-/* eslint-enable jest/expect-expect */

package/src/context/test/{context-system-provider.js → context-system-provider.jsdom.test.tsx}

@@ -1,41 +1,86 @@
+import { describe, expect, test, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import styled from '@emotion/styled';
+import type {
+	ComponentPropsWithoutRef,
+	ForwardedRef,
+	ReactElement,
+	ReactNode,
+} from 'react';
 import { cloneElement } from '@wordpress/element';
+import warn from '@wordpress/warning';
 import { contextConnect } from '../context-connect';
 import { ContextSystemProvider } from '../context-system-provider';
 import { useContextSystem } from '../use-context-system';
 
+vi.mock( import( '@wordpress/warning' ), () => ( { default: vi.fn() } ) );
+
 const View = styled.div``;
 
+type TestComponentProps = ComponentPropsWithoutRef< 'div' > & {
+	quote?: ReactNode;
+};
+
+function TestComponent(
+	props: TestComponentProps,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	return <View { ...useContextSystem( props, 'Component' ) } ref={ ref } />;
+}
+
+function TestComponentWithQuote(
+	props: TestComponentProps,
+	ref: ForwardedRef< HTMLDivElement >
+) {
+	const { quote, ...otherProps } = useContextSystem( props, 'Component' );
+	return (
+		<View { ...otherProps } ref={ ref }>
+			{ quote }
+		</View>
+	);
+}
+
 describe( 'props', () => {
-	test( 'should render correctly', () => {
-		const Component = ( props, ref ) => (
-			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
+	test( 'should not warn when rerendered without a value', () => {
+		vi.mocked( warn ).mockClear();
+
+		const { rerender } = render(
+			<ContextSystemProvider>
+				<div />
+			</ContextSystemProvider>
 		);
-		const ConnectedComponent = contextConnect( Component, 'Component' );
-		const { container } = render(
+
+		rerender(
 			<ContextSystemProvider>
-				<ConnectedComponent />
+				<div />
 			</ContextSystemProvider>
 		);
 
-		expect( container ).toMatchSnapshot();
+		expect( warn ).not.toHaveBeenCalled();
 	} );
 
-	test( 'should render context props', () => {
-		const Component = ( props, ref ) => {
-			const { quote, ...otherProps } = useContextSystem(
-				props,
-				'Component'
-			);
-			return (
-				<View { ...otherProps } ref={ ref }>
-					{ quote }
-				</View>
-			);
-		};
+	test( 'should render correctly', () => {
+		const ConnectedComponent = contextConnect( TestComponent, 'Component' );
+		render(
+			<ContextSystemProvider>
+				<ConnectedComponent data-testid="component" />
+			</ContextSystemProvider>
+		);
 
-		const ConnectedComponent = contextConnect( Component, 'Component' );
+		expect( screen.getByTestId( 'component' ) ).toHaveClass(
+			'components-component'
+		);
+		expect( screen.getByTestId( 'component' ) ).toHaveAttribute(
+			'data-wp-component',
+			'Component'
+		);
+	} );
+
+	test( 'should render context props', () => {
+		const ConnectedComponent = contextConnect(
+			TestComponentWithQuote,
+			'Component'
+		);
 
 		const contextValue = {
 			Component: {
@@ -43,30 +88,20 @@ describe( 'props', () => {
 			},
 		};
 
-		const { container } = render(
+		render(
 			<ContextSystemProvider value={ contextValue }>
 				<ConnectedComponent />
 			</ContextSystemProvider>
 		);
 
-		expect( container ).toMatchSnapshot();
 		expect( screen.getByText( 'Code is Poetry' ) ).toBeVisible();
 	} );
 
 	test( 'should render _override props', () => {
-		const Component = ( props, ref ) => {
-			const { quote, ...otherProps } = useContextSystem(
-				props,
-				'Component'
-			);
-			return (
-				<View { ...otherProps } ref={ ref }>
-					{ quote }
-				</View>
-			);
-		};
-
-		const ConnectedComponent = contextConnect( Component, 'Component' );
+		const ConnectedComponent = contextConnect(
+			TestComponentWithQuote,
+			'Component'
+		);
 
 		const contextValue = {
 			Component: {
@@ -76,7 +111,7 @@ describe( 'props', () => {
 			},
 		};
 
-		const { container } = render(
+		render(
 			<>
 				<ContextSystemProvider value={ contextValue }>
 					<ConnectedComponent
@@ -87,8 +122,6 @@ describe( 'props', () => {
 			</>
 		);
 
-		expect( container ).toMatchSnapshot();
-
 		const element = screen.getByText( 'Code is Poetry' );
 		expect( element ).toBeVisible();
 		expect( element ).toHaveClass( 'test-component' );
@@ -99,10 +132,7 @@ describe( 'props', () => {
 
 describe( 'children', () => {
 	test( 'should pass through children', () => {
-		const Component = ( props, ref ) => (
-			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
-		);
-		const ConnectedComponent = contextConnect( Component, 'Component' );
+		const ConnectedComponent = contextConnect( TestComponent, 'Component' );
 
 		render(
 			<ContextSystemProvider>
@@ -114,13 +144,11 @@ describe( 'children', () => {
 	} );
 
 	test( 'should not accept children via `context`', () => {
-		const Component = ( props, ref ) => (
-			<View { ...useContextSystem( props, 'Component' ) } ref={ ref } />
-		);
-		const ConnectedComponent = contextConnect( Component, 'Component' );
+		const ConnectedComponent = contextConnect( TestComponent, 'Component' );
 
 		render(
 			<ContextSystemProvider
+				// @ts-expect-error Verify that the unsupported `context` prop is ignored.
 				context={ { Component: { children: 'Override' } } }
 			>
 				<ConnectedComponent />
@@ -132,13 +160,18 @@ describe( 'children', () => {
 
 	// This matches the behavior for normal, non-context-connected components.
 	test( 'should not override inherent children', () => {
-		const Component = ( props, ref ) => (
+		const Component = (
+			props: TestComponentProps,
+			ref: ForwardedRef< HTMLDivElement >
+		) => (
 			<View { ...useContextSystem( props, 'Component' ) } ref={ ref }>
 				Inherent
 			</View>
 		);
 		const ConnectedComponent = contextConnect( Component, 'Component' );
-		const NormalComponent = ( props ) => <div { ...props }>Inherent</div>;
+		const NormalComponent = (
+			props: ComponentPropsWithoutRef< 'div' >
+		) => <div { ...props }>Inherent</div>;
 
 		render(
 			<ContextSystemProvider>
@@ -153,12 +186,21 @@ describe( 'children', () => {
 	} );
 
 	describe( 'when connected component does a `cloneElement()`', () => {
-		// eslint-disable-next-line no-unused-vars
-		const ComponentThatClones = ( { content, ...props }, _ref ) =>
-			cloneElement(
+		type CloneComponentProps = {
+			content: ReactElement;
+			children?: ReactNode;
+			className?: string;
+		};
+		const ComponentThatClones = (
+			{ content, ...props }: CloneComponentProps,
+			ref: ForwardedRef< HTMLElement >
+		) => {
+			void ref;
+			return cloneElement(
 				content,
 				useContextSystem( props, 'ComponentThatClones' )
 			);
+		};
 		const ConnectedComponentThatClones = contextConnect(
 			ComponentThatClones,
 			'ComponentThatClones'

package/src/context/test/wordpress-component.tsx

@@ -1,9 +1,9 @@
+import { describe, it } from 'vitest';
 import type { ForwardedRef } from 'react';
 import { forwardRef } from '@wordpress/element';
 import type { WordPressComponentProps } from '../wordpress-component';
 
 // Static TypeScript checks
-/* eslint-disable jest/expect-expect */
 describe( 'WordPressComponentProps', () => {
 	it( 'should not accept a ref', () => {
 		const Foo = ( props: WordPressComponentProps< {}, 'div' > ) => (
@@ -24,4 +24,3 @@ describe( 'WordPressComponentProps', () => {
 		<ForwardedFoo ref={ null } />;
 	} );
 } );
-/* eslint-enable jest/expect-expect */

package/src/context/use-context-system.js

@@ -33,11 +33,20 @@ export function useContextSystem( props, namespace ) {
 		...getNamespace( namespace ),
 	};
 
-	const { _overrides: overrideProps, ...otherContextProps } = contextProps;
+	const { _overrides, ...otherContextProps } = contextProps;
+	/** @type {Record<string, unknown>} */
+	const overrideProps = /** @type {Record<string, unknown>} */ ( _overrides );
 
 	const initialMergedProps = Object.entries( otherContextProps ).length
 		? Object.assign( {}, otherContextProps, props )
 		: props;
+	/**
+	 * @type {P & {
+	 *   children?: React.ReactNode,
+	 *   renderChildren?: (props: P) => React.ReactNode
+	 * }}
+	 */
+	const propsWithChildren = initialMergedProps;
 
 	const cx = useCx();
 
@@ -48,9 +57,9 @@ export function useContextSystem( props, namespace ) {
 
 	// Provides the ability to customize the render of the component.
 	const rendered =
-		typeof initialMergedProps.renderChildren === 'function'
-			? initialMergedProps.renderChildren( initialMergedProps )
-			: initialMergedProps.children;
+		typeof propsWithChildren.renderChildren === 'function'
+			? propsWithChildren.renderChildren( initialMergedProps )
+			: propsWithChildren.children;
 
 	for ( const key in initialMergedProps ) {
 		// @ts-expect-error A string key cannot index the merged props type.

package/src/custom-gradient-picker/gradient-bar/test/{utils.ts → utils.jsdom.test.ts}

@@ -1,8 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
 import { getHorizontalRelativeGradientPosition } from '../utils';
 
 describe( 'getHorizontalRelativeGradientPosition', () => {
 	it( 'should return relative percentage position', () => {
-		jest.spyOn(
+		vi.spyOn(
 			window.HTMLElement.prototype,
 			'getBoundingClientRect'
 		).mockImplementationOnce(
@@ -20,7 +21,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should subtract the x position of the container from the mouse position', () => {
-		jest.spyOn(
+		vi.spyOn(
 			window.HTMLElement.prototype,
 			'getBoundingClientRect'
 		).mockImplementationOnce(
@@ -38,7 +39,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should clamp to a whole percentage number', () => {
-		jest.spyOn(
+		vi.spyOn(
 			window.HTMLElement.prototype,
 			'getBoundingClientRect'
 		).mockImplementationOnce(
@@ -57,7 +58,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should clamp to zero when mouse position is less the x position', () => {
-		jest.spyOn(
+		vi.spyOn(
 			window.HTMLElement.prototype,
 			'getBoundingClientRect'
 		).mockImplementationOnce(
@@ -75,7 +76,7 @@ describe( 'getHorizontalRelativeGradientPosition', () => {
 	} );
 
 	it( 'should clamp to 100 when mouse position is greater than width', () => {
-		jest.spyOn(
+		vi.spyOn(
 			window.HTMLElement.prototype,
 			'getBoundingClientRect'
 		).mockImplementationOnce(

package/src/custom-gradient-picker/test/serializer.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import {
 	serializeGradientColor,
 	serializeGradientPosition,

package/src/custom-select-control-v2/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import { click, press, type } from '@ariakit/test';
 import { render } from '@ariakit/test/react';
@@ -5,6 +6,8 @@ import { useState } from '@wordpress/element';
 import UncontrolledCustomSelectControlV2 from '..';
 import type { CustomSelectProps } from '../types';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const items = [
 	{
 		key: 'flower1',
@@ -222,7 +225,7 @@ describe.each( [
 
 	describe( 'Multiple selection', () => {
 		it( 'Should be able to select multiple items when provided an array', async () => {
-			const onChangeMock = jest.fn();
+			const onChangeMock = vi.fn();
 
 			// initial selection as defaultValue
 			const defaultValues = [

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

@@ -1,8 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { format } from 'date-fns';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import DatePicker from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'DatePicker', () => {
 	it( 'should highlight the current date', () => {
 		render( <DatePicker currentDate="2022-05-02T11:00:00" /> );
@@ -26,7 +29,7 @@ describe( 'DatePicker', () => {
 	it( 'should call onChange when a day is selected', async () => {
 		const user = userEvent.setup();
 
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render(
 			<DatePicker
@@ -45,8 +48,8 @@ describe( 'DatePicker', () => {
 	it( 'should call onMonthPreviewed and onChange when a day in a different month is selected', async () => {
 		const user = userEvent.setup();
 
-		const onMonthPreviewed = jest.fn();
-		const onChange = jest.fn();
+		const onMonthPreviewed = vi.fn();
+		const onChange = vi.fn();
 
 		render(
 			<DatePicker

package/src/date-time/date-picker/test/{use-lilius.ts → use-lilius.jsdom.test.ts}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { act, renderHook } from '@testing-library/react';
 import { addYears, getYear, set, startOfToday, subYears } from 'date-fns';
 import { Month, useLilius } from '../use-lilius';

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';