@wordpress/components 39.0.0 → 40.1.0

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/control-points.tsx

@@ -36,6 +36,7 @@ function ControlPointButton( {
 	isOpen,
 	position,
 	color,
+	disablePositioning,
 	...additionalProps
 }: WordPressComponentProps< ControlPointButtonProps, 'button', true > ) {
 	const instanceId = useInstanceId( ControlPointButton );
@@ -64,9 +65,11 @@ function ControlPointButton( {
 				{ ...additionalProps }
 			/>
 			<VisuallyHidden id={ descriptionId }>
-				{ __(
-					'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
-				) }
+				{ disablePositioning
+					? __( 'Press the button to change the color.' )
+					: __(
+							'Use your left or right arrow keys or drag and drop with the mouse to change the gradient position. Press the button to change the color or remove the control point.'
+					  ) }
 			</VisuallyHidden>
 		</>
 	);
@@ -109,6 +112,7 @@ function GradientColorPickerDropdown( {
 function ControlPoints( {
 	disableRemove,
 	disableAlpha,
+	disablePositioning,
 	gradientPickerDomRef,
 	ignoreMarkerPosition,
 	value: controlPoints,
@@ -206,6 +210,9 @@ function ControlPoints( {
 										onToggle();
 									} }
 									onMouseDown={ () => {
+										if ( disablePositioning ) {
+											return;
+										}
 										if (
 											window &&
 											window.addEventListener
@@ -228,6 +235,19 @@ function ControlPoints( {
 										}
 									} }
 									onKeyDown={ ( event ) => {
+										if ( disablePositioning ) {
+											// The point cannot move, but the
+											// arrow keys are still consumed so
+											// they do not bubble away and move
+											// focus to another editor area.
+											if (
+												event.code === 'ArrowLeft' ||
+												event.code === 'ArrowRight'
+											) {
+												event.stopPropagation();
+											}
+											return;
+										}
 										if ( event.code === 'ArrowLeft' ) {
 											// Stop propagation of the key press event to avoid focus moving
 											// to another editor area.
@@ -263,6 +283,7 @@ function ControlPoints( {
 									isOpen={ isOpen }
 									position={ point.position }
 									color={ point.color }
+									disablePositioning={ disablePositioning }
 								/>
 							) }
 							renderContent={ ( { onClose } ) => (

package/src/custom-gradient-picker/gradient-bar/index.tsx

@@ -74,6 +74,7 @@ export default function CustomGradientBar( {
 	onChange,
 	disableInserter = false,
 	disableAlpha = false,
+	disablePositioning = false,
 	__experimentalIsRenderedInSidebar = false,
 }: CustomGradientBarProps ) {
 	const gradientMarkersContainerDomRef = useRef< HTMLDivElement >( null );
@@ -169,6 +170,7 @@ export default function CustomGradientBar( {
 					}
 					disableAlpha={ disableAlpha }
 					disableRemove={ disableInserter }
+					disablePositioning={ disablePositioning }
 					gradientPickerDomRef={ gradientMarkersContainerDomRef }
 					ignoreMarkerPosition={
 						isInsertingControlPoint

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/{index.tsx → index.jsdom.test.tsx}

@@ -2,6 +2,8 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { useState } from '@wordpress/element';
 import CustomGradientPicker from '../';
+import CustomGradientBar from '../gradient-bar';
+import { KEYBOARD_CONTROL_POINT_VARIATION } from '../gradient-bar/constants';
 
 function ControlledCustomGradientPicker( {
 	initialValue = 'linear-gradient(90deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)',
@@ -178,3 +180,135 @@ describe( 'CustomGradientPicker', () => {
 		} );
 	} );
 } );
+
+describe( 'CustomGradientBar', () => {
+	const POINTS = [
+		{ position: 0, color: 'rgb(0,0,0)' },
+		{ position: 100, color: 'rgb(255,255,255)' },
+	];
+
+	// The counterpart to the duotone bar's tests: positioning is on unless a
+	// consumer opts out, so arrow keys must still move a control point.
+	it( 'moves a control point with the arrow keys', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<CustomGradientBar
+				background="linear-gradient(90deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)"
+				hasGradient
+				value={ POINTS }
+				onChange={ onChange }
+			/>
+		);
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+
+		// The description still offers positioning and removal, which the
+		// duotone bar's shorter one drops.
+		expect( firstPoint ).toHaveAccessibleDescription(
+			/change the gradient position.+remove the control point/
+		);
+
+		firstPoint.focus();
+		await user.keyboard( '[ArrowRight]' );
+
+		expect( onChange ).toHaveBeenCalledWith( [
+			{ position: KEYBOARD_CONTROL_POINT_VARIATION, color: 'rgb(0,0,0)' },
+			POINTS[ 1 ],
+		] );
+	} );
+
+	// Dragging is driven by window-level listeners attached on mousedown, and
+	// the position comes from the markers container's box, so that has to be
+	// given one in jsdom.
+	it( 'moves a control point when dragged', () => {
+		const onChange = jest.fn();
+
+		const { container } = render(
+			<CustomGradientBar
+				background="linear-gradient(90deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)"
+				hasGradient
+				value={ POINTS }
+				onChange={ onChange }
+			/>
+		);
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const markers = container.querySelector(
+			'.components-custom-gradient-picker__markers-container'
+		) as HTMLElement;
+		markers.getBoundingClientRect = () =>
+			( { x: 0, width: 200 } ) as DOMRect;
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+
+		fireEvent.mouseDown( firstPoint );
+		fireEvent.mouseMove( window, { clientX: 100 } );
+		fireEvent.mouseUp( window );
+
+		// 100px into a 200px container is 50%.
+		expect( onChange ).toHaveBeenCalledWith( [
+			{ position: 50, color: 'rgb(0,0,0)' },
+			POINTS[ 1 ],
+		] );
+	} );
+
+	it( 'does not move a control point when dragged and positioning is disabled', () => {
+		const onChange = jest.fn();
+
+		const { container } = render(
+			<CustomGradientBar
+				background="linear-gradient(90deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)"
+				hasGradient
+				disablePositioning
+				value={ POINTS }
+				onChange={ onChange }
+			/>
+		);
+
+		// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+		const markers = container.querySelector(
+			'.components-custom-gradient-picker__markers-container'
+		) as HTMLElement;
+		markers.getBoundingClientRect = () =>
+			( { x: 0, width: 200 } ) as DOMRect;
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+
+		fireEvent.mouseDown( firstPoint );
+		fireEvent.mouseMove( window, { clientX: 100 } );
+		fireEvent.mouseUp( window );
+
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'does not move a control point when positioning is disabled', async () => {
+		const user = userEvent.setup();
+		const onChange = jest.fn();
+
+		render(
+			<CustomGradientBar
+				background="linear-gradient(90deg,rgb(0,0,0) 0%,rgb(255,255,255) 100%)"
+				hasGradient
+				disablePositioning
+				value={ POINTS }
+				onChange={ onChange }
+			/>
+		);
+
+		const [ firstPoint ] = screen.getAllByRole( 'button', {
+			name: /Gradient control point/,
+		} );
+		firstPoint.focus();
+		await user.keyboard( '[ArrowRight]' );
+
+		expect( onChange ).not.toHaveBeenCalled();
+	} );
+} );

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

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

package/src/custom-gradient-picker/types.ts

@@ -60,6 +60,14 @@ export type CustomGradientBarProps = {
 	onChange: ( newControlPoints: ControlPoint[] ) => void;
 	disableInserter?: boolean;
 	disableAlpha?: boolean;
+	/**
+	 * Whether control points are fixed in place. Set by consumers whose value
+	 * has no positions to store, such as a duotone, so the control does not
+	 * offer a move it cannot save.
+	 *
+	 * @default false
+	 */
+	disablePositioning?: boolean;
 	__experimentalIsRenderedInSidebar?: boolean;
 };
 
@@ -92,11 +100,13 @@ export type ControlPointButtonProps = {
 	isOpen: boolean;
 	position: ControlPoint[ 'position' ];
 	color: string;
+	disablePositioning?: boolean;
 };
 
 export type ControlPointsProps = {
 	disableRemove: boolean;
 	disableAlpha: boolean;
+	disablePositioning?: boolean;
 	gradientPickerDomRef: React.RefObject< HTMLDivElement | null >;
 	ignoreMarkerPosition?: number;
 	value: ControlPoint[];

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