@wordpress/components 40.0.0 → 40.1.0

package/src/higher-order/with-filters/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
 import { render, waitFor } from '@testing-library/react';
 import { addFilter, removeAllFilters, removeFilter } from '@wordpress/hooks';
 import withFilters from '..';
@@ -56,7 +57,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should not re-render component when new filter added before component was mounted', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		addFilter(
 			hookName,
 			'test/enhanced-component-spy-1',
@@ -77,7 +78,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should re-render component once when new filter added after component was mounted', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const { container } = render( <EnhancedComponent /> );
@@ -101,7 +102,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should re-render component once when two filters added in the same animation frame', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const { container } = render( <EnhancedComponent /> );
@@ -134,7 +135,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should re-render component twice when new filter added and removed in two different animation frames', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 		const { container } = render( <EnhancedComponent /> );
 
@@ -163,7 +164,7 @@ describe( 'withFilters', () => {
 	} );
 
 	it( 'should re-render both components once each when one filter added', async () => {
-		const SpiedComponent = jest.fn( () => <div>Spied component</div> );
+		const SpiedComponent = vi.fn( () => <div>Spied component</div> );
 		const EnhancedComponent = withFilters( hookName )( SpiedComponent );
 
 		const CombinedComponents = () => (

package/src/higher-order/with-focus-outside/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Component } from '@wordpress/element';
@@ -39,7 +40,7 @@ describe( 'withFocusOutside', () => {
 		origHasFocus = document.hasFocus;
 		document.hasFocus = () => true;
 
-		onFocusOutside = jest.fn();
+		onFocusOutside = vi.fn();
 	} );
 
 	afterEach( () => {

package/src/higher-order/with-focus-return/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { Component } from '@wordpress/element';

package/src/higher-order/with-notices/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import {
 	act,
 	render,

package/src/higher-order/with-spoken-messages/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,10 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render } from '@testing-library/react';
 import withSpokenMessages from '../';
 
 describe( 'withSpokenMessages', () => {
 	it( 'should generate speak and debouncedSpeak props', () => {
-		const testSpeak = jest.fn();
-		const testDebouncedSpeak = jest.fn();
+		const testSpeak = vi.fn();
+		const testDebouncedSpeak = vi.fn();
 		const isFunction = ( maybeFunc: any ) =>
 			typeof maybeFunc === 'function';
 		const DumpComponent = withSpokenMessages(

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

@@ -47,6 +47,21 @@ const backdropBorderColor = ( {
 	return COLORS.ui.border;
 };
 
+const backdropDisabledStyles = ( {
+	disabled,
+	isBorderless,
+}: BackdropProps ) => {
+	if ( ! disabled || isBorderless ) {
+		return undefined;
+	}
+
+	return css`
+		@media ( forced-colors: active ) {
+			border-color: GrayText;
+		}
+	`;
+};
+
 export const BackdropUI = styled.div< BackdropProps >`
 	&&& {
 		box-sizing: border-box;
@@ -64,6 +79,7 @@ export const BackdropUI = styled.div< BackdropProps >`
 		top: 0;
 
 		${ rtl( { paddingLeft: 2 } ) }
+		${ backdropDisabledStyles }
 	}
 `;
 
@@ -75,11 +91,17 @@ export const Root = styled( Flex )`
 `;
 
 const containerDisabledStyles = ( { disabled }: ContainerProps ) => {
-	const backgroundColor = disabled
-		? COLORS.ui.backgroundDisabled
-		: COLORS.ui.background;
+	if ( ! disabled ) {
+		return undefined;
+	}
 
-	return css( { backgroundColor } );
+	return css`
+		color: ${ COLORS.ui.textDisabled };
+
+		@media ( forced-colors: active ) {
+			color: GrayText;
+		}
+	`;
 };
 
 const containerWidthStyles = ( {
@@ -110,6 +132,7 @@ export const Container = styled.div< ContainerProps >`
 	display: flex;
 	flex: 1;
 	position: relative;
+	background-color: ${ COLORS.ui.background };
 
 	${ containerDisabledStyles }
 	${ containerWidthStyles }
@@ -129,9 +152,17 @@ const disabledStyles = ( { disabled }: InputProps ) => {
 		return '';
 	}
 
-	return css( {
-		color: COLORS.ui.textDisabled,
-	} );
+	return css`
+		color: ${ COLORS.ui.textDisabled };
+
+		@media ( forced-colors: active ) {
+			color: GrayText;
+		}
+
+		&:disabled::placeholder {
+			color: ${ COLORS.ui.textDisabled };
+		}
+	`;
 };
 
 export const fontSizeStyles = ( { inputSize: size }: InputProps ) => {

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

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import IsolatedEventContainer from '..';
@@ -5,7 +6,7 @@ import IsolatedEventContainer from '..';
 describe( 'IsolatedEventContainer', () => {
 	it( 'should pass props to container', async () => {
 		const user = userEvent.setup();
-		const clickHandler = jest.fn();
+		const clickHandler = vi.fn();
 		render(
 			<IsolatedEventContainer
 				title="Container"
@@ -38,8 +39,8 @@ describe( 'IsolatedEventContainer', () => {
 	it( 'should stop event propagation only for mousedown, but not for keydown', async () => {
 		const user = userEvent.setup();
 
-		const mousedownHandler = jest.fn();
-		const keydownHandler = jest.fn();
+		const mousedownHandler = vi.fn();
+		const keydownHandler = vi.fn();
 		render(
 			<button
 				onMouseDown={ mousedownHandler }

package/src/item-group/context.ts

@@ -2,6 +2,7 @@ import { createContext, useContext } from '@wordpress/element';
 import type { ItemGroupContext as Context } from './types';
 
 export const ItemGroupContext = createContext( {
+	isList: false,
 	size: 'medium',
 } as Context );
 ItemGroupContext.displayName = 'ItemGroupContext';

package/src/item-group/item/component.tsx

@@ -1,18 +1,36 @@
 import type { ForwardedRef } from 'react';
+import { useEffect, useRef } from '@wordpress/element';
 import type { ItemProps } from '../types';
 import { useItem } from './hook';
 import type { WordPressComponentProps } from '../../context';
 import { contextConnect } from '../../context';
 import { View } from '../../view';
+import { useItemGroupContext } from '../context';
 
 function UnconnectedItem(
 	props: WordPressComponentProps< ItemProps, 'div' >,
 	forwardedRef: ForwardedRef< any >
 ) {
 	const { role, wrapperClassName, ...otherProps } = useItem( props );
+	const itemRef = useRef< HTMLDivElement >( null );
+	const { isList } = useItemGroupContext();
+
+	useEffect( () => {
+		if (
+			isList &&
+			role === 'listitem' &&
+			! itemRef.current?.closest(
+				'ol, ul, menu, [role="list"], [role="directory"]'
+			)
+		) {
+			throw new Error(
+				'Item with list semantics must be rendered inside an element with role="list".'
+			);
+		}
+	}, [ isList, role ] );
 
 	return (
-		<div role={ role } className={ wrapperClassName }>
+		<div ref={ itemRef } role={ role } className={ wrapperClassName }>
 			<View { ...otherProps } ref={ forwardedRef } />
 		</div>
 	);

package/src/item-group/item/hook.ts

@@ -12,17 +12,16 @@ const sizeClassName = {
 };
 
 export function useItem( props: WordPressComponentProps< ItemProps, 'div' > ) {
+	const { isList, spacedAround, size: contextSize } = useItemGroupContext();
 	const {
 		as: asProp,
 		className,
 		onClick,
-		role = 'listitem',
+		role = isList ? 'listitem' : undefined,
 		size: sizeProp,
 		...otherProps
 	} = useContextSystem( props, 'Item' );
 
-	const { spacedAround, size: contextSize } = useItemGroupContext();
-
 	const size = sizeProp || contextSize;
 
 	const as = asProp || ( typeof onClick !== 'undefined' ? 'button' : 'div' );

package/src/item-group/item-group/component.tsx

@@ -23,6 +23,7 @@ function UnconnectedItemGroup(
 	const size = sizeProp || contextSize;
 
 	const contextValue = {
+		isList: otherProps.role === 'list' || otherProps.role === 'directory',
 		spacedAround,
 		size,
 	};

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/item-group/test/__snapshots__/{index.js.snap → index.jsdom.test.tsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ItemGroup Item should read the value of the size prop from context when the prop is not defined 1`] = `
+exports[`ItemGroup > Item > should read the value of the size prop from context when the prop is not defined 1`] = `
 Snapshot Diff:
 - First value
 + Second value
@@ -33,15 +33,15 @@ Snapshot Diff:
         </div>
 `;
 
-exports[`ItemGroup Item should use different amounts of padding depending on the value of the size prop 1`] = `
+exports[`ItemGroup > Item > should use different amounts of padding depending on the value of the size prop 1`] = `
 Snapshot Diff:
 - First value
 + Second value
 
-@@ -2,11 +2,11 @@
+@@ -1,11 +1,11 @@
+  <div>
     <div
       class="style-item-wrapper"
-      role="listitem"
     >
       <div
 -       class="style-item style-is-size-medium components-item"
@@ -53,7 +53,7 @@ Snapshot Diff:
       </div>
 `;
 
-exports[`ItemGroup ItemGroup component should render correctly 1`] = `
+exports[`ItemGroup > ItemGroup component > should render correctly 1`] = `
 <div>
   <div
     class="style-item-group style-is-rounded components-item-group"
@@ -77,7 +77,7 @@ exports[`ItemGroup ItemGroup component should render correctly 1`] = `
 </div>
 `;
 
-exports[`ItemGroup ItemGroup component should render items individually when the isSeparated prop is true 1`] = `
+exports[`ItemGroup > ItemGroup component > should render items individually when the isSeparated prop is true 1`] = `
 Snapshot Diff:
 - First value
 + Second value
@@ -105,7 +105,7 @@ Snapshot Diff:
         </div>
 `;
 
-exports[`ItemGroup ItemGroup component should show borders when the isBordered prop is true 1`] = `
+exports[`ItemGroup > ItemGroup component > should show borders when the isBordered prop is true 1`] = `
 Snapshot Diff:
 - First value
 + Second value
@@ -133,7 +133,7 @@ Snapshot Diff:
         </div>
 `;
 
-exports[`ItemGroup ItemGroup component should show rounded corners when the isRounded prop is true 1`] = `
+exports[`ItemGroup > ItemGroup component > should show rounded corners when the isRounded prop is true 1`] = `
 Snapshot Diff:
 - First value
 + Second value

package/src/item-group/test/{index.js → index.jsdom.test.tsx}

@@ -1,9 +1,70 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { createPortal } from '@wordpress/element';
 import { Item, ItemGroup } from '..';
 
 describe( 'ItemGroup', () => {
 	describe( 'ItemGroup component', () => {
+		it( 'accepts an Item nested within a semantic list', () => {
+			render(
+				<ItemGroup>
+					<div>
+						<Item>Nested item</Item>
+					</div>
+				</ItemGroup>
+			);
+
+			expect( screen.getByRole( 'listitem' ) ).toHaveTextContent(
+				'Nested item'
+			);
+		} );
+
+		it( 'throws when an Item with list semantics is outside a semantic list', () => {
+			const portalContainer = document.createElement( 'div' );
+			document.body.append( portalContainer );
+
+			try {
+				expect( () =>
+					render(
+						<ItemGroup>
+							{ createPortal(
+								<Item>Portaled item</Item>,
+								portalContainer
+							) }
+						</ItemGroup>
+					)
+				).toThrow(
+					'Item with list semantics must be rendered inside an element with role="list".'
+				);
+				expect( console ).toHaveErrored();
+			} finally {
+				portalContainer.remove();
+			}
+		} );
+
+		it( 'accepts custom children', () => {
+			render(
+				<ItemGroup>
+					<div>Custom item</div>
+				</ItemGroup>
+			);
+
+			expect( screen.getByText( 'Custom item' ) ).toBeVisible();
+		} );
+
+		it( 'preserves custom roles', () => {
+			render(
+				<ItemGroup role="group">
+					<div>
+						<Item role="presentation">Custom item</Item>
+					</div>
+				</ItemGroup>
+			);
+
+			expect( screen.getByRole( 'group' ) ).toBeVisible();
+		} );
+
 		it( 'should render correctly', () => {
 			const { container } = render(
 				<ItemGroup>
@@ -66,9 +127,45 @@ describe( 'ItemGroup', () => {
 	} );
 
 	describe( 'Item', () => {
+		it( 'uses list semantics only within a list-semantic ItemGroup', () => {
+			const { rerender } = render( <Item>Standalone item</Item> );
+
+			expect( screen.queryByRole( 'listitem' ) ).not.toBeInTheDocument();
+
+			rerender(
+				<ItemGroup role="group">
+					<Item>Non-list item</Item>
+				</ItemGroup>
+			);
+
+			expect( screen.queryByRole( 'listitem' ) ).not.toBeInTheDocument();
+
+			rerender(
+				<ItemGroup>
+					<Item>Grouped item</Item>
+				</ItemGroup>
+			);
+
+			expect( screen.getByRole( 'listitem' ) ).toHaveTextContent(
+				'Grouped item'
+			);
+		} );
+
+		it( 'uses list semantics within an ItemGroup with the directory role', () => {
+			render(
+				<ItemGroup role="directory">
+					<Item>Directory item</Item>
+				</ItemGroup>
+			);
+
+			expect( screen.getByRole( 'listitem' ) ).toHaveTextContent(
+				'Directory item'
+			);
+		} );
+
 		it( 'should render as a `button` if the `onClick` handler is specified', async () => {
 			const user = userEvent.setup();
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render( <Item onClick={ spy }>Code is poetry</Item> );
 
 			const button = screen.getByRole( 'button' );
@@ -81,7 +178,7 @@ describe( 'ItemGroup', () => {
 		} );
 
 		it( 'should give priority to the `as` prop even if the `onClick` handler is specified', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			const { rerender } = render(
 				<Item onClick={ spy }>Code is poetry</Item>
 			);