@wordpress/components 40.0.0 → 40.1.1-next.v.202609031004.0

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

@@ -1,18 +1,65 @@
 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';
 
+jest.mock( '@wordpress/warning', () => jest.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', () => {
+		jest.mocked( warn ).mockClear();
+
+		const { rerender } = render(
+			<ContextSystemProvider>
+				<div />
+			</ContextSystemProvider>
 		);
-		const ConnectedComponent = contextConnect( Component, 'Component' );
+
+		rerender(
+			<ContextSystemProvider>
+				<div />
+			</ContextSystemProvider>
+		);
+
+		expect( warn ).not.toHaveBeenCalled();
+	} );
+
+	test( 'should render correctly', () => {
+		const ConnectedComponent = contextConnect( TestComponent, 'Component' );
 		const { container } = render(
 			<ContextSystemProvider>
 				<ConnectedComponent />
@@ -23,19 +70,10 @@ describe( 'props', () => {
 	} );
 
 	test( 'should render context 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: {
@@ -54,19 +92,10 @@ describe( 'props', () => {
 	} );
 
 	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: {
@@ -99,10 +128,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 +140,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 +156,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 +182,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/test/serializer.ts

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

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/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/style.module.scss

@@ -2,7 +2,7 @@
 
 .content-wrapper {
 	// Negative margin to reset (offset) the default padding on .components-popover__content.
-	/* stylelint-disable plugin/use-logical-properties-and-values -- Preserve the previous physical offsets against Popover padding. */
+	/* 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;
 
@@ -13,7 +13,7 @@
 	&:last-of-type {
 		margin-bottom: -$grid-unit-10;
 	}
-	/* stylelint-enable plugin/use-logical-properties-and-values */
+	/* stylelint-enable logical-css/require-logical-properties */
 }
 
 .padding-small {

package/src/font-size-picker/test/utils.ts

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { isSimpleCssValue } from '../utils';
 
 describe( 'isSimpleCssValue', () => {

package/src/icon/index.tsx

@@ -1,4 +1,4 @@
-import type { ComponentType, HTMLProps, SVGProps } from 'react';
+import type { ComponentType, CSSProperties, HTMLProps, SVGProps } from 'react';
 import {
 	cloneElement,
 	createElement,
@@ -19,6 +19,7 @@ type SizeProps = {
 	size?: number;
 	width?: number | string;
 	height?: number | string;
+	style?: CSSProperties;
 };
 
 type AdditionalProps< T > = T extends ComponentType< infer U >
@@ -88,23 +89,38 @@ function Icon( {
 		} );
 	}
 
-	if ( icon && ( icon.type === 'svg' || icon.type === SVG ) ) {
-		const appliedProps = {
-			...icon.props,
-			width: size,
-			height: size,
-			...additionalProps,
-		};
+	if ( isValidElement< SizeProps >( icon ) ) {
+		const { style: consumerStyle, ...restProps } =
+			additionalProps as SVGProps< SVGSVGElement >;
+		const mergedStyle =
+			icon.props.style || consumerStyle
+				? { ...icon.props.style, ...consumerStyle }
+				: undefined;
+		const styleProps = mergedStyle ? { style: mergedStyle } : {};
 
-		return <SVG { ...appliedProps } />;
-	}
+		if ( icon.type === 'svg' || icon.type === SVG ) {
+			const appliedProps = {
+				...icon.props,
+				width: size,
+				height: size,
+				...restProps,
+				// Merge styles so the icon's intrinsic style (e.g. `fill: none` on
+				// stroke-based icons) is preserved unless the consumer overrides
+				// the same property explicitly.
+				...styleProps,
+			};
+
+			return <SVG { ...appliedProps } />;
+		}
 
-	if ( isValidElement< SizeProps >( icon ) ) {
 		return cloneElement( icon, {
 			size,
 			width: size,
 			height: size,
-			...additionalProps,
+			...restProps,
+			// Merge styles so the icon's intrinsic style is preserved unless
+			// the consumer overrides the same property explicitly.
+			...styleProps,
 		} );
 	}
 

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

@@ -95,4 +95,70 @@ describe( 'Icon', () => {
 
 		expect( screen.getByTestId( testId ) ).toHaveClass( className );
 	} );
+
+	it( "merges a consumer 'style' prop with the icon's intrinsic style", () => {
+		const strokeIcon = (
+			<SVG style={ { fill: 'none' } }>
+				<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+			</SVG>
+		);
+		render(
+			<Icon
+				data-testid={ testId }
+				icon={ strokeIcon }
+				style={ { marginInlineStart: 4 } }
+			/>
+		);
+		const icon = screen.getByTestId( testId );
+
+		// The icon's intrinsic `fill: none` survives…
+		expect( icon ).toHaveStyle( 'fill: none' );
+		// …alongside the consumer-supplied style.
+		expect( icon ).toHaveStyle( 'margin-inline-start: 4px' );
+	} );
+
+	it( "lets a consumer 'style' override the icon's intrinsic style", () => {
+		const strokeIcon = (
+			<SVG style={ { fill: 'none' } }>
+				<Path d="M5 4v3h5.5v12h3V7H19V4z" />
+			</SVG>
+		);
+		render(
+			<Icon
+				data-testid={ testId }
+				icon={ strokeIcon }
+				style={ { fill: 'red' } }
+			/>
+		);
+
+		expect( screen.getByTestId( testId ) ).toHaveStyle( 'fill: red' );
+	} );
+
+	it( "merges a consumer 'style' with a non-svg element's intrinsic style", () => {
+		render(
+			<Icon
+				icon={
+					<span data-testid={ testId } style={ { fill: 'none' } } />
+				}
+				style={ { marginInlineStart: 4 } }
+			/>
+		);
+		const icon = screen.getByTestId( testId );
+
+		expect( icon ).toHaveStyle( 'fill: none' );
+		expect( icon ).toHaveStyle( 'margin-inline-start: 4px' );
+	} );
+
+	it( "does not add a 'style' prop to a non-svg element without styles", () => {
+		let hasStyleProp = true;
+		const CustomIcon = ( props: Record< string, unknown > ) => {
+			hasStyleProp = 'style' in props;
+			return <span data-testid={ testId } />;
+		};
+
+		render( <Icon icon={ <CustomIcon /> } /> );
+
+		expect( screen.getByTestId( testId ) ).toBeVisible();
+		expect( hasStyleProp ).toBe( false );
+	} );
 } );

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

@@ -1,16 +1,17 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { KeyboardEvent } from 'react';
 import { useState } from '@wordpress/element';
 import BaseInputControl from '../';
 import InputControlPrefixWrapper from '../input-prefix-wrapper';
+import type { InputControlProps } from '../types';
 
-const getInput = () => screen.getByTestId( 'input' );
+const getInput = () => screen.getByTestId< HTMLInputElement >( 'input' );
 
 describe( 'InputControl', () => {
-	const InputControl = ( props ) => {
+	const InputControl = ( props: InputControlProps ) => {
 		return <BaseInputControl { ...props } data-testid="input" />;
 	};
-
 	describe( 'Basic rendering', () => {
 		it( 'should render', () => {
 			render( <InputControl /> );
@@ -85,14 +86,16 @@ describe( 'InputControl', () => {
 		it( 'should work as a controlled component given normal, falsy or nullish values', async () => {
 			const user = await userEvent.setup();
 			const spy = jest.fn();
-			const heldKeySet = new Set();
+			const heldKeySet = new Set< string >();
 			const Example = () => {
-				const [ state, setState ] = useState( 'one' );
-				const onChange = ( value ) => {
+				const [ state, setState ] = useState< string | undefined >(
+					'one'
+				);
+				const onChange = ( value: string | undefined ) => {
 					setState( value );
 					spy( value );
 				};
-				const onKeyDown = ( { key } ) => {
+				const onKeyDown = ( { key }: KeyboardEvent ) => {
 					heldKeySet.add( key );
 					if ( key === 'Escape' ) {
 						if ( heldKeySet.has( 'Meta' ) ) {
@@ -104,7 +107,8 @@ describe( 'InputControl', () => {
 						}
 					}
 				};
-				const onKeyUp = ( { key } ) => heldKeySet.delete( key );
+				const onKeyUp = ( { key }: KeyboardEvent ) =>
+					heldKeySet.delete( key );
 				return (
 					<InputControl
 						value={ state }
@@ -189,7 +193,8 @@ describe( 'InputControl', () => {
 						let { value } = state;
 						if (
 							action.type === 'COMMIT' &&
-							action.payload.event.type === 'blur'
+							action.payload.event?.type === 'blur' &&
+							value !== undefined
 						) {
 							value = value.replace( /\bnow\b/, 'meow' );
 						}
@@ -219,7 +224,8 @@ describe( 'InputControl', () => {
 				<InputControl
 					label="Test"
 					prefix={ prefix }
-					{ ...{ size: '__unstable-large' } }
+					// @ts-expect-error Verify the legacy value that is omitted from the public type.
+					size="__unstable-large"
 				/>
 			);
 

package/src/item-group/style.module.scss

@@ -70,8 +70,7 @@ $padding-y-large: calc((calc(#{$control-height} * 1.2) - #{$base-font-height} -
 		background: none;
 		text-align: start;
 
-		svg,
-		path {
+		svg {
 			fill: currentColor;
 		}
 

package/src/navigator/test/router.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { patternMatch, findParent } from '../utils/router';
 
 describe( 'patternMatch', () => {

package/src/notice/test/__snapshots__/{index.tsx.snap → index.jsdom.test.tsx.snap}

@@ -48,15 +48,18 @@ exports[`Notice should match snapshot 1`] = `
     >
       <svg
         aria-hidden="true"
-        fill="currentColor"
         focusable="false"
         height="24"
+        stroke="currentColor"
+        stroke-width="1.5"
+        style="fill: none;"
         viewBox="0 0 24 24"
         width="24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
+          d="M7.75 16.25L16.25 7.75M16.25 16.25L7.75 7.75"
+          vector-effect="non-scaling-stroke"
         />
       </svg>
     </button>

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/query-controls/test/terms.ts

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

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

@@ -79,7 +79,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 +91,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>