@wordpress/components 39.0.0 → 40.1.0

package/src/tree-grid/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,9 +1,11 @@
+import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { LEFT, RIGHT, UP, DOWN, HOME, END } from '@wordpress/keycodes';
 import { forwardRef } from '@wordpress/element';
 import TreeGrid from '..';
 import TreeGridRow from '../row';
 import TreeGridCell from '../cell';
+globalThis.wpVitest.mockVisibleElements();
 
 const TestButton = forwardRef(
 	(
@@ -29,7 +31,7 @@ describe( 'TreeGrid', () => {
 
 	describe( 'onExpandRow', () => {
 		it( 'should call onExpandRow when pressing Right Arrow on a collapsed row', () => {
-			const onExpandRow = jest.fn();
+			const onExpandRow = vi.fn();
 
 			render(
 				<TreeGrid onExpandRow={ onExpandRow }>
@@ -81,7 +83,7 @@ describe( 'TreeGrid', () => {
 
 	describe( 'onCollapseRow', () => {
 		it( 'should call onCollapseRow when pressing Left Arrow on an expanded row', () => {
-			const onCollapseRow = jest.fn();
+			const onCollapseRow = vi.fn();
 
 			render(
 				<TreeGrid onCollapseRow={ onCollapseRow }>
@@ -157,7 +159,7 @@ describe( 'TreeGrid', () => {
 		);
 
 		it( 'should call onFocusRow with event, start and end nodes when pressing Down Arrow', () => {
-			const onFocusRow = jest.fn();
+			const onFocusRow = vi.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );
 
 			screen.getByText( 'Row 2' ).focus();
@@ -179,7 +181,7 @@ describe( 'TreeGrid', () => {
 		} );
 
 		it( 'should call onFocusRow with event, start and end nodes when pressing End', () => {
-			const onFocusRow = jest.fn();
+			const onFocusRow = vi.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );
 
 			screen.getByText( 'Row 1' ).focus();
@@ -201,7 +203,7 @@ describe( 'TreeGrid', () => {
 		} );
 
 		it( 'should call onFocusRow with event, start and end nodes when pressing Up Arrow', () => {
-			const onFocusRow = jest.fn();
+			const onFocusRow = vi.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );
 
 			screen.getByText( 'Row 2' ).focus();
@@ -223,7 +225,7 @@ describe( 'TreeGrid', () => {
 		} );
 
 		it( 'should call onFocusRow with event, start and end nodes when pressing Home', () => {
-			const onFocusRow = jest.fn();
+			const onFocusRow = vi.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );
 
 			screen.getByText( 'Row 3' ).focus();
@@ -245,7 +247,7 @@ describe( 'TreeGrid', () => {
 		} );
 
 		it( 'should call onFocusRow when shift key is held', () => {
-			const onFocusRow = jest.fn();
+			const onFocusRow = vi.fn();
 			render( <TestTree onFocusRow={ onFocusRow } /> );
 
 			screen.getByText( 'Row 2' ).focus();

package/src/tree-grid/test/{roving-tab-index-item.tsx → roving-tab-index-item.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { render } from '@testing-library/react';
 import { forwardRef } from '@wordpress/element';
 import RovingTabIndex from '../roving-tab-index';
@@ -14,7 +15,9 @@ describe( 'RovingTabIndexItem', () => {
 	it( 'requires RovingTabIndex to be declared as a parent component somewhere in the component hierarchy', () => {
 		expect( () =>
 			render( <RovingTabIndexItem as={ TestButton } /> )
-		).toThrow();
+		).toThrow(
+			'TreeGridItem can only be rendered inside a TreeGrid component.'
+		);
 		expect( console ).toHaveErrored();
 	} );
 

package/src/tree-grid/test/{roving-tab-index.tsx → roving-tab-index.jsdom.test.tsx}

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

package/src/tree-grid/test/row.jsdom.test.tsx

@@ -0,0 +1,132 @@
+import { describe, expect, it } from 'vitest';
+/* eslint-disable jsx-a11y/no-noninteractive-element-to-interactive-role */
+import { render, screen } from '@testing-library/react';
+import { createPortal, useId } from '@wordpress/element';
+import TreeGridRow from '../row';
+import TreeGrid from '..';
+
+describe( 'TreeGridRow', () => {
+	it( 'throws outside a treegrid', () => {
+		expect( () =>
+			render(
+				<table>
+					<tbody>
+						<TreeGridRow
+							level={ 1 }
+							positionInSet={ 1 }
+							setSize={ 1 }
+						>
+							<td>Test</td>
+						</TreeGridRow>
+					</tbody>
+				</table>
+			)
+		).toThrow(
+			'TreeGridRow must be rendered inside an element with role="treegrid".'
+		);
+		expect( console ).toHaveErrored();
+	} );
+
+	it( 'accepts a row explicitly owned by the treegrid', () => {
+		const portalTable = document.createElement( 'table' );
+		const portalBody = document.createElement( 'tbody' );
+		portalTable.append( portalBody );
+		document.body.append( portalTable );
+
+		function AriaOwnedRow() {
+			const rowId = useId();
+
+			return (
+				<TreeGrid aria-owns={ rowId }>
+					{ createPortal(
+						<TreeGridRow
+							id={ rowId }
+							level={ 1 }
+							positionInSet={ 1 }
+							setSize={ 1 }
+						>
+							<td>Test</td>
+						</TreeGridRow>,
+						portalBody
+					) }
+				</TreeGrid>
+			);
+		}
+
+		try {
+			render( <AriaOwnedRow /> );
+
+			expect( screen.getByRole( 'row' ) ).toHaveTextContent( 'Test' );
+		} finally {
+			portalTable.remove();
+		}
+	} );
+
+	it( 'accepts a row inside a rowgroup explicitly owned by the treegrid', () => {
+		const portalTable = document.createElement( 'table' );
+		document.body.append( portalTable );
+
+		function AriaOwnedRowGroup() {
+			const rowGroupId = useId();
+
+			return (
+				<TreeGrid aria-owns={ rowGroupId }>
+					{ createPortal(
+						<tbody id={ rowGroupId }>
+							<TreeGridRow
+								level={ 1 }
+								positionInSet={ 1 }
+								setSize={ 1 }
+							>
+								<td>Test</td>
+							</TreeGridRow>
+						</tbody>,
+						portalTable
+					) }
+				</TreeGrid>
+			);
+		}
+
+		try {
+			render( <AriaOwnedRowGroup /> );
+
+			expect( screen.getByRole( 'row' ) ).toHaveTextContent( 'Test' );
+		} finally {
+			portalTable.remove();
+		}
+	} );
+
+	it( 'renders a tr with support for level, positionInSet and setSize props', () => {
+		const { container } = render(
+			<table role="treegrid">
+				<tbody>
+					<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 1 }>
+						<td>Test</td>
+					</TreeGridRow>
+				</tbody>
+			</table>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+
+	it( 'forwards other props to the rendered tr element', () => {
+		const { container } = render(
+			<table role="treegrid">
+				<tbody>
+					<TreeGridRow
+						className="my-row"
+						level={ 1 }
+						positionInSet={ 1 }
+						setSize={ 1 }
+					>
+						<td>Test</td>
+					</TreeGridRow>
+				</tbody>
+			</table>
+		);
+
+		expect( container ).toMatchSnapshot();
+	} );
+} );
+/* eslint-enable jsx-a11y/no-noninteractive-element-to-interactive-role */

package/src/tree-grid/use-validate-tree-grid-structure.ts

@@ -0,0 +1,104 @@
+import { useEffect } from '@wordpress/element';
+
+const ROW_SELECTOR = 'tr:not([role]), [role="row"]';
+const TREE_GRID_SELECTOR = '[role="treegrid"]';
+
+function getAriaOwners( element: HTMLElement ) {
+	if ( ! element.id ) {
+		return [];
+	}
+
+	const escapedId = element.id
+		.replaceAll( '\\', '\\\\' )
+		.replaceAll( '"', '\\"' );
+
+	return Array.from(
+		element.ownerDocument.querySelectorAll< HTMLElement >(
+			`[aria-owns~="${ escapedId }"]`
+		)
+	);
+}
+
+function isContainedInOrOwnedBy(
+	element: HTMLElement,
+	selector: string,
+	visited = new Set< HTMLElement >()
+): boolean {
+	if ( visited.has( element ) ) {
+		return false;
+	}
+	visited.add( element );
+
+	if ( element.parentElement?.closest( selector ) ) {
+		return true;
+	}
+
+	const hasValidOwner = getAriaOwners( element ).some(
+		( owner ) =>
+			owner.matches( selector ) ||
+			isContainedInOrOwnedBy( owner, selector, visited )
+	);
+	if ( hasValidOwner ) {
+		return true;
+	}
+
+	return element.parentElement
+		? isContainedInOrOwnedBy( element.parentElement, selector, visited )
+		: false;
+}
+
+function isOwnedByRowInTreeGrid(
+	element: HTMLElement,
+	visited = new Set< HTMLElement >()
+): boolean {
+	if ( visited.has( element ) ) {
+		return false;
+	}
+	visited.add( element );
+
+	const hasValidOwner = getAriaOwners( element ).some( ( owner ) => {
+		const row = owner.matches( ROW_SELECTOR )
+			? owner
+			: owner.closest< HTMLElement >( ROW_SELECTOR );
+
+		return row
+			? isContainedInOrOwnedBy( row, TREE_GRID_SELECTOR )
+			: isOwnedByRowInTreeGrid( owner, visited );
+	} );
+	if ( hasValidOwner ) {
+		return true;
+	}
+
+	return element.parentElement
+		? isOwnedByRowInTreeGrid( element.parentElement, visited )
+		: false;
+}
+
+export function useValidateTreeGridStructure(
+	componentName: 'TreeGridRow' | 'TreeGridCell',
+	elementRef: React.RefObject< HTMLElement >
+) {
+	useEffect( () => {
+		const element = elementRef.current;
+		if ( ! element ) {
+			return;
+		}
+
+		const row =
+			element.parentElement?.closest< HTMLElement >( ROW_SELECTOR );
+		const hasValidStructure =
+			componentName === 'TreeGridRow'
+				? isContainedInOrOwnedBy( element, TREE_GRID_SELECTOR )
+				: ( row &&
+						isContainedInOrOwnedBy( row, TREE_GRID_SELECTOR ) ) ||
+				  isOwnedByRowInTreeGrid( element );
+
+		if ( ! hasValidStructure ) {
+			throw new Error(
+				componentName === 'TreeGridRow'
+					? 'TreeGridRow must be rendered inside an element with role="treegrid".'
+					: 'TreeGridCell must be rendered as a cell in a row that belongs to an element with role="treegrid".'
+			);
+		}
+	}, [ componentName, elementRef ] );
+}

package/src/truncate/style.module.scss

@@ -6,7 +6,6 @@
 }
 
 .is-line-clamp {
-	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- -webkit-line-clamp requires this legacy physical value. */
 	-webkit-box-orient: vertical;
 	-webkit-line-clamp: var(--wp-components-truncate-lines);
 	display: -webkit-box;

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

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

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

@@ -1,9 +1,12 @@
+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 UnitControl from '..';
 import { CSS_UNITS, parseQuantityAndUnitFromRawValue } from '../utils';
 
+globalThis.wpVitest.mockMatchMedia();
+
 const getInput = ( {
 	isInputTypeText = false,
 }: {
@@ -125,7 +128,7 @@ describe( 'UnitControl', () => {
 	describe( 'Value', () => {
 		it( 'should update value on change', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
@@ -146,7 +149,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should increment value on UP press', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
@@ -162,7 +165,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should increment value on UP + SHIFT press, with step', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <UnitControl value="50px" onChange={ onChangeSpy } /> );
 
@@ -178,7 +181,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should decrement value on DOWN press', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
 
@@ -194,7 +197,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should decrement value on DOWN + SHIFT press, with step', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render( <UnitControl value={ 50 } onChange={ onChangeSpy } /> );
 
@@ -210,7 +213,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should cancel change when ESCAPE key is pressed', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<UnitControl
@@ -237,8 +240,8 @@ describe( 'UnitControl', () => {
 		it( 'should run onBlur callback when quantity input is blurred', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
-			const onBlurSpy = jest.fn();
+			const onChangeSpy = vi.fn();
+			const onBlurSpy = vi.fn();
 
 			render(
 				<UnitControl
@@ -267,7 +270,7 @@ describe( 'UnitControl', () => {
 		it( 'should invoke onChange when isPressEnterToChange is true and the input is blurred with an uncommitted value', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<UnitControl
@@ -299,7 +302,7 @@ describe( 'UnitControl', () => {
 		it( 'should update value correctly when typed and blurred when a single unit is passed', async () => {
 			const user = userEvent.setup();
 
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 			render(
 				<>
 					<button>Click me</button>
@@ -332,8 +335,8 @@ describe( 'UnitControl', () => {
 	describe( 'Unit', () => {
 		it( 'should update unit value on change', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
-			const onUnitChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
+			const onUnitChangeSpy = vi.fn();
 
 			render(
 				<UnitControl
@@ -381,7 +384,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should reset value on unit change, if unit has default value', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const units = [
 				{ value: 'pt', label: 'pt', default: 25 },
@@ -417,7 +420,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should not reset value on unit change, if disabled', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			const units = [
 				{ value: 'pt', label: 'pt', default: 25 },
@@ -453,7 +456,7 @@ describe( 'UnitControl', () => {
 
 		it( 'should set correct unit if single units', async () => {
 			const user = userEvent.setup();
-			const onChangeSpy = jest.fn();
+			const onChangeSpy = vi.fn();
 
 			render(
 				<UnitControl
@@ -530,8 +533,8 @@ describe( 'UnitControl', () => {
 		it( 'should run onBlur callback when the unit select is blurred', async () => {
 			const user = userEvent.setup();
 
-			const onUnitChangeSpy = jest.fn();
-			const onBlurSpy = jest.fn();
+			const onUnitChangeSpy = vi.fn();
+			const onBlurSpy = vi.fn();
 
 			render(
 				<UnitControl
@@ -600,8 +603,8 @@ describe( 'UnitControl', () => {
 			'should move focus from the input to the unit select when typing the first character of %p',
 			async ( testUnit ) => {
 				const user = userEvent.setup();
-				const onChangeSpy = jest.fn();
-				const onUnitChangeSpy = jest.fn();
+				const onChangeSpy = vi.fn();
+				const onUnitChangeSpy = vi.fn();
 
 				render(
 					<UnitControl

package/src/unit-control/test/utils.ts

@@ -1,3 +1,4 @@
+import { describe, expect, it, test } from 'vitest';
 import {
 	filterUnitsWithSettings,
 	useCustomUnits,

package/src/utils/colors-values.js

@@ -72,22 +72,23 @@ const THEME = {
 	},
 };
 
-/* eslint-enable @wordpress/no-ds-tokens */
-
 const UI = {
 	background: THEME.background,
 	backgroundDisabled: THEME.gray[ 100 ],
 	border: THEME.gray[ 600 ],
 	borderHover: THEME.gray[ 700 ],
 	borderFocus: THEME.accent,
-	borderDisabled: THEME.gray[ 400 ],
-	textDisabled: THEME.gray[ 600 ],
+	// The gray ramp above has no disabled step to map these through.
+	borderDisabled: `var(--wpds-color-stroke-interactive-neutral-disabled, #dbdbdb)`,
+	textDisabled: `var(--wpds-color-foreground-interactive-neutral-disabled, #8d8d8d)`,
 
 	// Matches @wordpress/base-styles
 	darkGrayPlaceholder: `color-mix(in srgb, ${ THEME.foreground }, transparent 38%)`,
 	lightGrayPlaceholder: `color-mix(in srgb, ${ THEME.background }, transparent 35%)`,
 };
 
+/* eslint-enable @wordpress/no-ds-tokens */
+
 export const COLORS = Object.freeze( {
 	/**
 	 * The main gray color object.

package/src/utils/config-values.js

@@ -20,9 +20,6 @@ const CONTROL_PROPS = {
 // TypeScript type declarations.
 export default Object.assign( {}, CONTROL_PROPS, {
 	colorDivider: 'rgba(0, 0, 0, 0.1)',
-	colorScrollbarThumb: 'rgba(0, 0, 0, 0.2)',
-	colorScrollbarThumbHover: 'rgba(0, 0, 0, 0.5)',
-	colorScrollbarTrack: 'rgba(0, 0, 0, 0.04)',
 	elevationIntensity: 1,
 	radiusXSmall: '1px',
 	radiusSmall: '2px',

package/src/utils/hooks/test/{use-controlled-state.js → use-controlled-state.jsdom.test.tsx}

@@ -1,18 +1,33 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, fireEvent, screen } from '@testing-library/react';
+import type { ChangeEvent } from 'react';
 import useControlledState from '../use-controlled-state';
 
 const noop = () => {};
 
 describe( 'hooks', () => {
-	const getInput = () => screen.getByTestId( 'input' );
+	const getInput = () => screen.getByTestId< HTMLInputElement >( 'input' );
 
 	describe( 'useControlledState', () => {
-		const Example = ( { initial, value: valueProp, onChange = noop } ) => {
+		type ExampleProps = {
+			initial?: string;
+			value?: string;
+			onChange?: ( value: string ) => void;
+		};
+
+		const Example = ( {
+			initial,
+			value: valueProp,
+			onChange = noop,
+		}: ExampleProps ) => {
 			const [ state, setState ] = useControlledState( valueProp, {
 				initial,
+				fallback: '',
 			} );
 
-			const handleOnChange = ( event ) => {
+			const handleOnChange = (
+				event: ChangeEvent< HTMLInputElement >
+			) => {
 				const nextValue = event.target.value;
 				setState( nextValue );
 				onChange( nextValue );
@@ -29,7 +44,7 @@ describe( 'hooks', () => {
 		};
 
 		it( 'should use incoming prop as state on initial render', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render( <Example value="Hello" onChange={ spy } /> );
 
 			const input = getInput();
@@ -39,7 +54,7 @@ describe( 'hooks', () => {
 		} );
 
 		it( 'should update rendered value onChange', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			render( <Example onChange={ spy } /> );
 
 			const input = getInput();
@@ -67,7 +82,7 @@ describe( 'hooks', () => {
 		 * be updated if a new incoming prop value is changed.
 		 */
 		it( 'should update changed value with new incoming prop value', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 
 			/**
 			 * The <input /> value starts with "Hello", since it is passed down
@@ -97,7 +112,7 @@ describe( 'hooks', () => {
 		} );
 
 		it( 'should render with initial value and be controllable', () => {
-			const spy = jest.fn();
+			const spy = vi.fn();
 			// Input starts off as being uncontrolled / self-managed.
 			const { rerender } = render(
 				<Example onChange={ spy } initial="Hello" />

package/src/utils/hooks/test/{use-controlled-value.js → use-controlled-value.jsdom.test.tsx}

@@ -1,7 +1,10 @@
+import { describe, expect, it, vi } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { useControlledValue } from '../use-controlled-value';
 
-function Input( props ) {
+type InputProps = Parameters< typeof useControlledValue< string > >[ 0 ];
+
+function Input( props: InputProps ) {
 	const [ value, setValue ] = useControlledValue( props );
 	return (
 		<input
@@ -32,7 +35,7 @@ describe( 'useControlledValue', () => {
 	} );
 
 	it( 'should call onChange only when there is no value being passed in', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		render( <Input defaultValue="WordPress.org" onChange={ onChange } /> );
 
 		expect( getInput() ).toHaveValue( 'WordPress.org' );
@@ -44,7 +47,7 @@ describe( 'useControlledValue', () => {
 	} );
 
 	it( 'should call onChange when there is a value passed in', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 		const { rerender } = render(
 			<Input
 				defaultValue="WordPress.org"

package/src/utils/hooks/test/{use-cx.js → use-cx.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 // eslint-disable-next-line no-restricted-imports
 import { cx as innerCx } from '@emotion/css';
 import { insertStyles } from '@emotion/utils';
@@ -6,15 +7,17 @@ import { css, CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import { useCx } from '..';
 
-jest.mock( '@emotion/css', () => ( {
-	cx: jest.fn(),
+vi.mock( import( '@emotion/css' ), () => ( {
+	cx: vi.fn(),
 } ) );
 
-jest.mock( '@emotion/utils', () => ( {
-	insertStyles: jest.fn(),
+vi.mock( import( '@emotion/utils' ), () => ( {
+	insertStyles: vi.fn(),
 } ) );
 
-function Example( { args } ) {
+type CxArg = Parameters< ReturnType< typeof useCx > >[ number ];
+
+function Example( { args }: { args: CxArg[] } ) {
 	const cx = useCx();
 
 	return <div className={ cx( ...args ) } />;

package/src/utils/test/colors.js

@@ -1,3 +1,4 @@
+import { describe, expect, it, test } from 'vitest';
 import { getOptimalTextColor, getOptimalTextShade, rgba } from '../colors';
 
 describe( 'rbga', () => {

package/src/utils/test/{get-node-text.js → get-node-text.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import getNodeText from '../get-node-text';
 
 describe( 'getNodeText', () => {