@wordpress/components 39.0.0 → 40.1.0

package/src/font-size-picker/test/{font-size-picker-select.tsx → font-size-picker-select.jsdom.test.tsx}

@@ -1,9 +1,12 @@
+import { describe, expect, it, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from '@ariakit/test/react';
 import FontSizePickerSelect from '../font-size-picker-select';
 import type { FontSize } from '../types';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'FontSizePickerSelect', () => {
 	const fontSizes: FontSize[] = [
 		{
@@ -25,14 +28,14 @@ describe( 'FontSizePickerSelect', () => {
 
 	describe( 'valueMode prop', () => {
 		it( 'should find font size by size value when valueMode is literal', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerSelect
 					fontSizes={ fontSizes }
 					value="16px"
 					valueMode="literal"
 					onChange={ onChange }
-					onSelectCustom={ jest.fn() }
+					onSelectCustom={ vi.fn() }
 					disableCustomFontSizes={ false }
 				/>
 			);
@@ -43,14 +46,14 @@ describe( 'FontSizePickerSelect', () => {
 		} );
 
 		it( 'should find font size by slug when valueMode is slug', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerSelect
 					fontSizes={ fontSizes }
 					value="medium"
 					valueMode="slug"
 					onChange={ onChange }
-					onSelectCustom={ jest.fn() }
+					onSelectCustom={ vi.fn() }
 					disableCustomFontSizes={ false }
 				/>
 			);
@@ -61,14 +64,14 @@ describe( 'FontSizePickerSelect', () => {
 		} );
 
 		it( 'should handle undefined value', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerSelect
 					fontSizes={ fontSizes }
 					value={ undefined }
 					valueMode="literal"
 					onChange={ onChange }
-					onSelectCustom={ jest.fn() }
+					onSelectCustom={ vi.fn() }
 					disableCustomFontSizes={ false }
 				/>
 			);
@@ -79,14 +82,14 @@ describe( 'FontSizePickerSelect', () => {
 		} );
 
 		it( 'should handle empty string value', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerSelect
 					fontSizes={ fontSizes }
 					value=""
 					valueMode="literal"
 					onChange={ onChange }
-					onSelectCustom={ jest.fn() }
+					onSelectCustom={ vi.fn() }
 					disableCustomFontSizes={ false }
 				/>
 			);
@@ -100,12 +103,12 @@ describe( 'FontSizePickerSelect', () => {
 	describe( 'onChange callback', () => {
 		it( 'should call onChange with FontSize object as second parameter', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerSelect
 					fontSizes={ fontSizes }
 					onChange={ onChange }
-					onSelectCustom={ jest.fn() }
+					onSelectCustom={ vi.fn() }
 					disableCustomFontSizes={ false }
 				/>
 			);
@@ -120,13 +123,13 @@ describe( 'FontSizePickerSelect', () => {
 
 		it( 'should call onChange with undefined as second parameter for default option', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerSelect
 					fontSizes={ fontSizes }
 					value="16px" // Start with a selected value
 					onChange={ onChange }
-					onSelectCustom={ jest.fn() }
+					onSelectCustom={ vi.fn() }
 					disableCustomFontSizes={ false }
 				/>
 			);
@@ -160,14 +163,14 @@ describe( 'FontSizePickerSelect', () => {
 		];
 
 		it( 'should handle multiple font sizes with same value in literal mode', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerSelect
 					fontSizes={ fontSizesWithDuplicates }
 					value="12px"
 					valueMode="literal"
 					onChange={ onChange }
-					onSelectCustom={ jest.fn() }
+					onSelectCustom={ vi.fn() }
 					disableCustomFontSizes={ false }
 				/>
 			);
@@ -178,14 +181,14 @@ describe( 'FontSizePickerSelect', () => {
 		} );
 
 		it( 'should handle multiple font sizes with same value in slug mode', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerSelect
 					fontSizes={ fontSizesWithDuplicates }
 					value="small-1"
 					valueMode="slug"
 					onChange={ onChange }
-					onSelectCustom={ jest.fn() }
+					onSelectCustom={ vi.fn() }
 					disableCustomFontSizes={ false }
 				/>
 			);

package/src/font-size-picker/test/{font-size-picker-toggle-group.tsx → font-size-picker-toggle-group.jsdom.test.tsx}

@@ -1,8 +1,10 @@
+import { describe, expect, it, vi } from 'vitest';
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from '@ariakit/test/react';
 import FontSizePickerToggleGroup from '../font-size-picker-toggle-group';
 import type { FontSize } from '../types';
+globalThis.wpVitest.mockResizeObserver();
 
 describe( 'FontSizePickerToggleGroup', () => {
 	const fontSizes: FontSize[] = [
@@ -25,7 +27,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 
 	describe( 'valueMode prop', () => {
 		it( 'should find font size by size value when valueMode is literal', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizes }
@@ -41,7 +43,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 		} );
 
 		it( 'should find font size by slug when valueMode is slug', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizes }
@@ -57,7 +59,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 		} );
 
 		it( 'should handle undefined value', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizes }
@@ -73,7 +75,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 		} );
 
 		it( 'should handle empty string value', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizes }
@@ -92,7 +94,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 	describe( 'onChange callback', () => {
 		it( 'should call onChange with FontSize object as second parameter', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizes }
@@ -105,7 +107,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 
 		it( 'should call onChange with FontSize object when selecting a different option', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizes }
@@ -139,7 +141,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 		];
 
 		it( 'should handle multiple font sizes with same value in literal mode', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizesWithDuplicates }
@@ -155,7 +157,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 		} );
 
 		it( 'should handle multiple font sizes with same value in slug mode', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ fontSizesWithDuplicates }
@@ -196,7 +198,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 		];
 
 		it( 'should handle different units in literal mode', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ heterogeneousFontSizes }
@@ -212,7 +214,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 		} );
 
 		it( 'should handle complex font size values in literal mode', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ heterogeneousFontSizes }
@@ -228,7 +230,7 @@ describe( 'FontSizePickerToggleGroup', () => {
 		} );
 
 		it( 'should handle different units in slug mode', async () => {
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePickerToggleGroup
 					fontSizes={ heterogeneousFontSizes }

package/src/font-size-picker/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, test, vi } from 'vitest';
 import { screen, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { render } from '@ariakit/test/react';
@@ -5,6 +6,10 @@ import { useState } from '@wordpress/element';
 import FontSizePicker from '../';
 import type { FontSize } from '../types';
 
+globalThis.wpVitest.mockMatchMedia();
+
+globalThis.wpVitest.mockResizeObserver();
+
 const ControlledFontSizePicker = ( {
 	onChange,
 	...props
@@ -34,7 +39,7 @@ describe( 'FontSizePicker', () => {
 		'should call onChange( $expectedValue ) after user types 80 when value is $value',
 		async ( { value, expectedValue } ) => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePicker value={ value } onChange={ onChange } />
 			);
@@ -57,7 +62,7 @@ describe( 'FontSizePicker', () => {
 		'should call onChange( $expectedValue ) after user types 80 when first font size is $firstFontSize',
 		async ( { firstFontSize, expectedValue } ) => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePicker
 					fontSizes={ [ { slug: 'slug', size: firstFontSize } ] }
@@ -142,7 +147,7 @@ describe( 'FontSizePicker', () => {
 			'calls onChange( $expectedArguments ) when $option is selected',
 			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup();
-				const onChange = jest.fn();
+				const onChange = vi.fn();
 				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
@@ -264,7 +269,7 @@ describe( 'FontSizePicker', () => {
 			'calls onChange( $expectedValue ) when $option is selected',
 			async ( { option, value, expectedArguments } ) => {
 				const user = userEvent.setup();
-				const onChange = jest.fn();
+				const onChange = vi.fn();
 				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
@@ -333,7 +338,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'calls onChange when a font size is selected', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
@@ -491,7 +496,7 @@ describe( 'FontSizePicker', () => {
 			'calls onChange( $expectedArguments ) when $radio is selected',
 			async ( { radio, expectedArguments } ) => {
 				const user = userEvent.setup();
-				const onChange = jest.fn();
+				const onChange = vi.fn();
 				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
@@ -646,7 +651,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'allows custom values by default', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
@@ -711,7 +716,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'allows a slider to be used when withSlider is set', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
@@ -734,7 +739,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'allows reset by default', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
@@ -842,7 +847,7 @@ describe( 'FontSizePicker', () => {
 
 			it( 'should call onChange with size value and FontSize object when valueMode is literal', async () => {
 				const user = userEvent.setup();
-				const onChange = jest.fn();
+				const onChange = vi.fn();
 				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
@@ -880,7 +885,7 @@ describe( 'FontSizePicker', () => {
 
 			it( 'should call onChange with size value and FontSize object when valueMode is slug', async () => {
 				const user = userEvent.setup();
-				const onChange = jest.fn();
+				const onChange = vi.fn();
 				await render(
 					<FontSizePicker
 						fontSizes={ fontSizes }
@@ -1031,7 +1036,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'should call onChange with FontSize object as second parameter for select control', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePicker fontSizes={ fontSizes } onChange={ onChange } />
 			);
@@ -1046,7 +1051,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'should call onChange with undefined as second parameter for default option', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			await render(
 				<FontSizePicker
 					fontSizes={ fontSizes }
@@ -1065,7 +1070,7 @@ describe( 'FontSizePicker', () => {
 
 		it( 'should call onChange with FontSize object as second parameter for toggle group control', async () => {
 			const user = userEvent.setup();
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			// Use fewer font sizes to trigger toggle group (≤ 5)
 			const toggleGroupFontSizes = [
 				{

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/form-toggle/stories/index.story.tsx

@@ -21,6 +21,9 @@ const meta: Meta< typeof FormToggle > = {
 			whereUsed: 'global',
 			notes: 'For standard toggles with labels, use `ToggleControl` instead.',
 		},
+		// FIXME: Story shows FormToggle without a visible label (label).
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
 	},
 };
 export default meta;

package/src/form-toggle/style.scss

@@ -103,7 +103,7 @@ $transition-duration: 0.2s;
 
 	// Disabled state:
 	&.is-disabled,
-	.components-disabled & {
+	[inert] & {
 		.components-form-toggle__track {
 			background-color: $components-color-gray-100;
 			border-color: var(--wpds-color-stroke-interactive-neutral-disabled);

package/src/form-toggle/test/__snapshots__/{index.tsx.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[`FormToggle basic rendering should render a span element with an unchecked checkbox 1`] = `
+exports[`FormToggle > basic rendering > should render a span element with an unchecked checkbox 1`] = `
 <div>
   <span
     class="components-form-toggle"
@@ -19,7 +19,7 @@ exports[`FormToggle basic rendering should render a span element with an uncheck
 </div>
 `;
 
-exports[`FormToggle basic rendering should render an id prop for the input checkbox 1`] = `
+exports[`FormToggle > basic rendering > should render an id prop for the input checkbox 1`] = `
 Snapshot Diff:
 - First value
 + Second value
@@ -38,7 +38,7 @@ Snapshot Diff:
       />
 `;
 
-exports[`FormToggle basic rendering should render with an additional className 1`] = `
+exports[`FormToggle > basic rendering > should render with an additional className 1`] = `
 Snapshot Diff:
 - First value
 + Second value

package/src/form-toggle/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+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';
@@ -70,7 +71,7 @@ describe( 'FormToggle', () => {
 		it( 'should flip the checked property when clicked', async () => {
 			const user = userEvent.setup();
 
-			const onChange = jest.fn();
+			const onChange = vi.fn();
 			render( <ControlledFormToggle onChange={ onChange } /> );
 
 			const input = getInput();

package/src/form-token-field/index.tsx

@@ -399,7 +399,7 @@ export function FormTokenField( props: FormTokenFieldProps ) {
 	function handleUpArrowKey() {
 		setSelectedSuggestionIndex( ( index ) => {
 			return (
-				( index === 0
+				( index <= 0
 					? getMatchingSuggestions(
 							incompleteTokenValue,
 							suggestions,

package/src/form-token-field/style.scss

@@ -14,10 +14,16 @@
 		background: $components-color-gray-100;
 		border-color: $components-color-gray-400;
 		cursor: default;
+
+		// TODO: Use WPDS disabled border tokens once this container is aligned with the design system.
+		// Until then, cancel `input-control` hover styles (the wrapper uses `.is-disabled`, not `:disabled`).
+		&:hover {
+			border-color: $components-color-gray-400;
+		}
 	}
 
 	&.is-active {
-		@include input-style__focus;
+		@include outset-ring__focus;
 	}
 
 	// Token input