@wordpress/components 40.0.0 → 40.1.0

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

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { screen, waitFor } from '@testing-library/react';
 import { press, click } from '@ariakit/test';
 import { render } from '@ariakit/test/react';
@@ -5,16 +6,17 @@ import { useEffect, useState } from '@wordpress/element';
 import { isRTL } from '@wordpress/i18n';
 import { Tabs } from '..';
 import type { TabsProps } from '../types';
+globalThis.wpVitest.mockResizeObserver();
 
 // Setup mocking the `isRTL` function to test arrow key navigation behavior.
-jest.mock( '@wordpress/i18n', () => {
-	const original = jest.requireActual( '@wordpress/i18n' );
+vi.mock( import( '@wordpress/i18n' ), async ( importOriginal ) => {
+	const original = await importOriginal();
 	return {
 		...original,
-		isRTL: jest.fn( () => false ),
+		isRTL: vi.fn( () => false ),
 	};
 } );
-const mockedIsRTL = isRTL as jest.Mock;
+const mockedIsRTL = vi.mocked( isRTL );
 
 type Tab = {
 	tabId: string;
@@ -335,7 +337,7 @@ describe( 'Tabs', () => {
 
 	describe( 'pointer interactions', () => {
 		it( 'should select a tab when clicked', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			await render(
 				<UncontrolledTabs tabs={ TABS } onSelect={ mockOnSelect } />
@@ -385,7 +387,7 @@ describe( 'Tabs', () => {
 		} );
 
 		it( 'should not select a disabled tab when clicked', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			await render(
 				<UncontrolledTabs
@@ -641,7 +643,7 @@ describe( 'Tabs', () => {
 				} );
 
 				it( 'should ignore any changes to the `defaultTabId` prop after the first render', async () => {
-					const mockOnSelect = jest.fn();
+					const mockOnSelect = vi.fn();
 
 					const { rerender } = await render(
 						<UncontrolledTabs
@@ -929,7 +931,7 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should select tabs in the tablist when using the left and right arrow keys by default (automatic tab activation)', async () => {
-				const mockOnSelect = jest.fn();
+				const mockOnSelect = vi.fn();
 
 				await render(
 					<Component tabs={ TABS } onSelect={ mockOnSelect } />
@@ -1008,7 +1010,7 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should not automatically select tabs in the tablist when pressing the left and right arrow keys if the `selectOnMove` prop is set to `false` (manual tab activation)', async () => {
-				const mockOnSelect = jest.fn();
+				const mockOnSelect = vi.fn();
 
 				await render(
 					<Component
@@ -1081,7 +1083,7 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should not select tabs in the tablist when using the up and down arrow keys, unless the `orientation` prop is set to `vertical`', async () => {
-				const mockOnSelect = jest.fn();
+				const mockOnSelect = vi.fn();
 
 				const { rerender } = await render(
 					<Component tabs={ TABS } onSelect={ mockOnSelect } />
@@ -1185,7 +1187,7 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should loop tab focus at the end of the tablist when using arrow keys', async () => {
-				const mockOnSelect = jest.fn();
+				const mockOnSelect = vi.fn();
 
 				await render(
 					<Component tabs={ TABS } onSelect={ mockOnSelect } />
@@ -1250,7 +1252,7 @@ describe( 'Tabs', () => {
 				// For this test only, mock the writing direction to RTL.
 				mockedIsRTL.mockImplementation( () => true );
 
-				const mockOnSelect = jest.fn();
+				const mockOnSelect = vi.fn();
 
 				await render(
 					<Component tabs={ TABS } onSelect={ mockOnSelect } />
@@ -1332,7 +1334,7 @@ describe( 'Tabs', () => {
 			} );
 
 			it( 'should focus tabs in the tablist even if disabled', async () => {
-				const mockOnSelect = jest.fn();
+				const mockOnSelect = vi.fn();
 
 				await render(
 					<Component
@@ -1534,7 +1536,7 @@ describe( 'Tabs', () => {
 		describe( 'removing a tab', () => {
 			describe( 'with no explicitly set initial tab', () => {
 				it( 'should not select a new tab when the selected tab is removed', async () => {
-					const mockOnSelect = jest.fn();
+					const mockOnSelect = vi.fn();
 
 					const { rerender } = await render(
 						<UncontrolledTabs
@@ -1600,7 +1602,7 @@ describe( 'Tabs', () => {
 				'when using the `%s` prop [%s]',
 				( propName, _mode, Component ) => {
 					it( 'should not select a new tab when the selected tab is removed', async () => {
-						const mockOnSelect = jest.fn();
+						const mockOnSelect = vi.fn();
 
 						const initialComponentProps = {
 							tabs: TABS,
@@ -1662,7 +1664,7 @@ describe( 'Tabs', () => {
 					} );
 
 					it( `should not select the tab matching the \`${ propName }\` prop as a fallback when the selected tab is removed`, async () => {
-						const mockOnSelect = jest.fn();
+						const mockOnSelect = vi.fn();
 
 						const initialComponentProps = {
 							tabs: TABS,
@@ -1758,7 +1760,7 @@ describe( 'Tabs', () => {
 				'when using the `%s` prop [%s]',
 				( propName, _mode, Component ) => {
 					it( `should select a newly added tab if it matches the \`${ propName }\` prop`, async () => {
-						const mockOnSelect = jest.fn();
+						const mockOnSelect = vi.fn();
 
 						const initialComponentProps = {
 							tabs: TABS,
@@ -1812,7 +1814,7 @@ describe( 'Tabs', () => {
 				'when using the `%s` prop [%s]',
 				( propName, _mode, Component ) => {
 					it( `should keep the initial tab matching the \`${ propName }\` prop as selected even if it becomes disabled`, async () => {
-						const mockOnSelect = jest.fn();
+						const mockOnSelect = vi.fn();
 
 						const initialComponentProps = {
 							tabs: TABS,
@@ -1874,7 +1876,7 @@ describe( 'Tabs', () => {
 					} );
 
 					it( 'should keep the current tab selected by the user as selected even if it becomes disabled', async () => {
-						const mockOnSelect = jest.fn();
+						const mockOnSelect = vi.fn();
 
 						const { rerender } = await render(
 							<Component

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

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

package/src/text-highlight/test/{index.tsx → index.jsdom.test.tsx}

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

package/src/textarea-control/style.module.scss

@@ -6,7 +6,7 @@
 	display: block;
 	background: $components-color-background;
 	color: $components-color-foreground;
-	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve Emotion `resize: vertical`; `block` is not equivalent in vertical writing modes. */
+	/* stylelint-disable-next-line logical-css/require-logical-keywords -- Preserve Emotion `resize: vertical`; `block` is not equivalent in vertical writing modes. */
 	resize: vertical;
 
 	@include input-control;
@@ -21,9 +21,10 @@
 	min-height: 38px;
 
 	&:disabled {
-		background: $components-color-gray-100;
-		border-color: $components-color-gray-400;
-		color: $components-color-gray-600;
+		border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
+		color: var(--wpds-color-foreground-interactive-neutral-disabled);
+		// Core's `form.css` sets its own background on disabled textareas.
+		background: $components-color-background;
 	}
 
 	// Use opacity to work in various editor styles.
@@ -53,4 +54,8 @@
 			color: $components-color-light-gray-placeholder;
 		}
 	}
+
+	&:disabled::placeholder {
+		color: var(--wpds-color-foreground-interactive-neutral-disabled);
+	}
 }

package/src/tip/style.scss

@@ -7,7 +7,7 @@
 
 	svg {
 		align-self: center;
-		fill: $alert-yellow;
+		color: $alert-yellow;
 		flex-shrink: 0;
 		margin-right: $grid-unit-20;
 	}

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

@@ -1,6 +1,9 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import ToggleControl from '..';
 
+globalThis.wpVitest.mockMatchMedia();
+
 describe( 'ToggleControl', () => {
 	it( 'should label the toggle', () => {
 		render( <ToggleControl label="My toggle" onChange={ () => {} } /> );
@@ -11,7 +14,7 @@ describe( 'ToggleControl', () => {
 	} );
 
 	it( 'triggers change callback with boolean', () => {
-		const onChange = jest.fn();
+		const onChange = vi.fn();
 
 		render( <ToggleControl label="My toggle" onChange={ onChange } /> );
 

package/src/toggle-group-control/context.ts

@@ -1,11 +1,20 @@
 import { createContext, useContext } from '@wordpress/element';
 import type { ToggleGroupControlContextProps } from './types';
 
-const ToggleGroupControlContext = createContext(
-	{} as ToggleGroupControlContextProps
-);
+const ToggleGroupControlContext = createContext<
+	ToggleGroupControlContextProps | undefined
+>( undefined );
 ToggleGroupControlContext.displayName = 'ToggleGroupControlContext';
 
-export const useToggleGroupControlContext = () =>
-	useContext( ToggleGroupControlContext );
+export const useToggleGroupControlContext = (
+	componentName = 'ToggleGroupControlOptionBase'
+) => {
+	const context = useContext( ToggleGroupControlContext );
+	if ( ! context ) {
+		throw new Error(
+			`${ componentName } can only be rendered inside ToggleGroupControl.`
+		);
+	}
+	return context;
+};
 export default ToggleGroupControlContext;

package/src/toggle-group-control/stories/index.story.tsx

@@ -39,8 +39,9 @@ const Template: StoryFn< typeof ToggleGroupControl > = ( {
 	onChange,
 	...props
 } ) => {
-	const [ value, setValue ] =
-		useState< ToggleGroupControlProps[ 'value' ] >();
+	const [ value, setValue ] = useState< ToggleGroupControlProps[ 'value' ] >(
+		props.value
+	);
 
 	return (
 		<ToggleGroupControl
@@ -135,3 +136,15 @@ Deselectable.args = {
 	...WithIcons.args,
 	isDeselectable: true,
 };
+
+/**
+ * When the `disabled` prop is true, the control is unselectable.
+ */
+export const Disabled: StoryFn< typeof ToggleGroupControl > = Template.bind(
+	{}
+);
+Disabled.args = {
+	...Default.args,
+	disabled: true,
+	value: 'left',
+};

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

@@ -1,3 +1,4 @@
+import { describe, expect, it, test, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { press, click, hover, sleep } from '@ariakit/test';
 import { useState } from '@wordpress/element';
@@ -12,12 +13,22 @@ import { TOOLTIP_DELAY } from '../../tooltip';
 import type { ToggleGroupControlProps } from '../types';
 import controlStyles from '../toggle-group-control/style.module.scss';
 import optionStyles from '../toggle-group-control-option-base/style.module.scss';
+globalThis.wpVitest.mockResizeObserver();
 
 const hoverOutside = async () => {
 	await hover( document.body );
 	await hover( document.body, { clientX: 10, clientY: 10 } );
 };
 
+const expectGroupChromeDisabled = ( group: HTMLElement ) => {
+	expect( group ).toBeVisible();
+	expect( group ).toHaveAttribute( 'aria-disabled', 'true' );
+	// `toBeEnabled()` treats aria-disabled as disabled, so it cannot
+	// catch an HTML `disabled` leak onto this div.
+	// eslint-disable-next-line jest-dom/prefer-enabled-disabled
+	expect( group ).not.toHaveAttribute( 'disabled' );
+};
+
 const getGeneratedEmotionClassNames = ( element: HTMLElement ) =>
 	Array.from( element.classList ).filter( ( className ) =>
 		/^(css|emotion)-/.test( className )
@@ -90,6 +101,32 @@ const optionsWithDisabledOption = (
 	</>
 );
 
+describe( 'required context', () => {
+	it( 'throws when ToggleGroupControlOption is outside ToggleGroupControl', () => {
+		expect( () =>
+			render( <ToggleGroupControlOption value="value" label="Label" /> )
+		).toThrow(
+			'ToggleGroupControlOption can only be rendered inside ToggleGroupControl.'
+		);
+		expect( console ).toHaveErrored();
+	} );
+
+	it( 'throws when ToggleGroupControlOptionIcon is outside ToggleGroupControl', () => {
+		expect( () =>
+			render(
+				<ToggleGroupControlOptionIcon
+					value="value"
+					label="Label"
+					icon={ formatUppercase }
+				/>
+			)
+		).toThrow(
+			'ToggleGroupControlOptionIcon can only be rendered inside ToggleGroupControl.'
+		);
+		expect( console ).toHaveErrored();
+	} );
+} );
+
 describe.each( [
 	[ 'uncontrolled', ToggleGroupControl ],
 	[ 'controlled', ControlledToggleGroupControl ],
@@ -98,17 +135,27 @@ describe.each( [
 
 	describe( 'should render correctly', () => {
 		it( 'with text options', () => {
-			const { container } = render(
+			render(
 				<Component label="Test Toggle Group Control">
 					{ options }
 				</Component>
 			);
 
-			expect( container ).toMatchSnapshot();
+			expect(
+				screen.getByRole( 'radiogroup', {
+					name: 'Test Toggle Group Control',
+				} )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'radio', { name: 'R' } )
+			).toBeInTheDocument();
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).toBeInTheDocument();
 		} );
 
 		it( 'with icons', () => {
-			const { container } = render(
+			render(
 				<Component value="uppercase" label="Test Toggle Group Control">
 					<ToggleGroupControlOptionIcon
 						value="uppercase"
@@ -123,7 +170,12 @@ describe.each( [
 				</Component>
 			);
 
-			expect( container ).toMatchSnapshot();
+			expect(
+				screen.getByRole( 'radio', { name: 'Uppercase' } )
+			).toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'Lowercase' } )
+			).not.toBeChecked();
 		} );
 	} );
 	it( 'should render with the correct option initially selected when `value` is defined', () => {
@@ -143,7 +195,7 @@ describe.each( [
 		expect( screen.getByRole( 'radio', { name: 'J' } ) ).not.toBeChecked();
 	} );
 	it( 'should call onChange with proper value', async () => {
-		const mockOnChange = jest.fn();
+		const mockOnChange = vi.fn();
 
 		render(
 			<Component
@@ -402,7 +454,7 @@ describe.each( [
 	describe( 'isDeselectable', () => {
 		describe( 'isDeselectable = false', () => {
 			it( 'should not be deselectable', async () => {
-				const mockOnChange = jest.fn();
+				const mockOnChange = vi.fn();
 
 				render(
 					<Component
@@ -453,7 +505,7 @@ describe.each( [
 			} );
 
 			it( 'should ignore disabled radio options', async () => {
-				const mockOnChange = jest.fn();
+				const mockOnChange = vi.fn();
 
 				render(
 					<Component
@@ -501,7 +553,7 @@ describe.each( [
 
 		describe( 'isDeselectable = true', () => {
 			it( 'should be deselectable', async () => {
-				const mockOnChange = jest.fn();
+				const mockOnChange = vi.fn();
 
 				render(
 					<Component
@@ -567,7 +619,7 @@ describe.each( [
 			} );
 
 			it( 'should ignore disabled options', async () => {
-				const mockOnChange = jest.fn();
+				const mockOnChange = vi.fn();
 
 				render(
 					<Component
@@ -626,6 +678,228 @@ describe.each( [
 			} );
 		} );
 	} );
+
+	describe( 'disabled', () => {
+		it( 'should not select another option when the control is disabled', async () => {
+			const mockOnChange = vi.fn();
+
+			render(
+				<Component
+					value="rigas"
+					label="Test"
+					disabled
+					onChange={ mockOnChange }
+				>
+					{ options }
+				</Component>
+			);
+
+			expectGroupChromeDisabled(
+				screen.getByRole( 'radiogroup', { name: 'Test' } )
+			);
+
+			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
+
+			await click( screen.getByRole( 'radio', { name: 'J' } ) );
+
+			expect( screen.getByRole( 'radio', { name: 'R' } ) ).toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'J' } )
+			).not.toBeChecked();
+			expect( mockOnChange ).not.toHaveBeenCalled();
+
+			await press.ArrowRight();
+			expect( mockOnChange ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should skip the disabled control when tabbing', async () => {
+			render(
+				<>
+					<button>Before ToggleGroupControl</button>
+					<Component value="rigas" label="Test" disabled>
+						{ options }
+					</Component>
+					<button>After ToggleGroupControl</button>
+				</>
+			);
+
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Before ToggleGroupControl',
+				} )
+			).toHaveFocus();
+
+			await press.Tab();
+
+			const expectedFocusTarget =
+				mode === 'uncontrolled'
+					? screen.getByRole( 'button', {
+							name: 'After ToggleGroupControl',
+					  } )
+					: screen.getByRole( 'button', { name: 'Reset' } );
+
+			expect( expectedFocusTarget ).toHaveFocus();
+		} );
+
+		it( 'should keep the selected option when the control is disabled', () => {
+			render(
+				<Component value="jack" label="Test" disabled>
+					{ options }
+				</Component>
+			);
+
+			expect( screen.getByRole( 'radio', { name: 'J' } ) ).toBeChecked();
+			expect(
+				screen.getByRole( 'radio', { name: 'R' } )
+			).not.toBeChecked();
+		} );
+
+		it( 'should not call onChange when a disabled control is clicked', async () => {
+			const mockOnChange = vi.fn();
+
+			render(
+				<Component
+					value="rigas"
+					label="Test"
+					disabled
+					onChange={ mockOnChange }
+				>
+					{ options }
+				</Component>
+			);
+
+			await click( screen.getByRole( 'radio', { name: 'J' } ) );
+			await click( screen.getByRole( 'radio', { name: 'R' } ) );
+
+			expect( mockOnChange ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should disable every option when the control is disabled, including options without their own disabled prop', () => {
+			render(
+				<Component value="pizza" label="Test" disabled>
+					{ optionsWithDisabledOption }
+				</Component>
+			);
+
+			expectGroupChromeDisabled(
+				screen.getByRole( 'radiogroup', { name: 'Test' } )
+			);
+
+			expect(
+				screen.getByRole( 'radio', { name: 'Pizza' } )
+			).toBeDisabled();
+			expect(
+				screen.getByRole( 'radio', { name: 'Rice' } )
+			).toBeDisabled();
+			expect(
+				screen.getByRole( 'radio', { name: 'Pasta' } )
+			).toBeDisabled();
+		} );
+
+		it( 'should not deselect the pressed option when the control is disabled', async () => {
+			const mockOnChange = vi.fn();
+
+			render(
+				<Component
+					value="rigas"
+					label="Test"
+					onChange={ mockOnChange }
+					isDeselectable
+					disabled
+				>
+					{ options }
+				</Component>
+			);
+
+			expectGroupChromeDisabled(
+				screen.getByRole( 'group', { name: 'Test' } )
+			);
+
+			const pressed = screen.getByRole( 'button', {
+				name: 'R',
+				pressed: true,
+			} );
+			expect( pressed ).toBeVisible();
+			expect( pressed ).toBeDisabled();
+
+			await click( pressed );
+
+			expect(
+				screen.getByRole( 'button', {
+					name: 'R',
+					pressed: true,
+				} )
+			).toBeVisible();
+			expect( mockOnChange ).not.toHaveBeenCalled();
+		} );
+
+		it( 'should skip a deselectable disabled control when tabbing', async () => {
+			render(
+				<>
+					<button>Before ToggleGroupControl</button>
+					<Component
+						isDeselectable
+						value="rigas"
+						label="Test"
+						disabled
+					>
+						{ options }
+					</Component>
+					<button>After ToggleGroupControl</button>
+				</>
+			);
+
+			await press.Tab();
+			expect(
+				screen.getByRole( 'button', {
+					name: 'Before ToggleGroupControl',
+				} )
+			).toHaveFocus();
+
+			await press.Tab();
+
+			const expectedFocusTarget =
+				mode === 'uncontrolled'
+					? screen.getByRole( 'button', {
+							name: 'After ToggleGroupControl',
+					  } )
+					: screen.getByRole( 'button', { name: 'Reset' } );
+
+			expect( expectedFocusTarget ).toHaveFocus();
+		} );
+
+		it( 'should not call onChange when a deselectable disabled control is clicked', async () => {
+			const mockOnChange = vi.fn();
+
+			render(
+				<Component
+					value="rigas"
+					label="Test"
+					onChange={ mockOnChange }
+					isDeselectable
+					disabled
+				>
+					{ options }
+				</Component>
+			);
+
+			await click(
+				screen.getByRole( 'button', {
+					name: 'R',
+					pressed: true,
+				} )
+			);
+			await click(
+				screen.getByRole( 'button', {
+					name: 'J',
+					pressed: false,
+				} )
+			);
+
+			expect( mockOnChange ).not.toHaveBeenCalled();
+		} );
+	} );
 } );
 
 test( 'should render block styles without Emotion-generated classes', () => {

package/src/toggle-group-control/toggle-group-control/README.md

@@ -18,11 +18,7 @@ import {
 
 function Example() {
 	return (
-		<ToggleGroupControl
-			label="my label"
-			value="vertical"
-			isBlock
-		>
+		<ToggleGroupControl label="my label" value="vertical" isBlock>
 			<ToggleGroupControlOption value="horizontal" label="Horizontal" />
 			<ToggleGroupControlOption value="vertical" label="Vertical" />
 		</ToggleGroupControl>
@@ -84,3 +80,10 @@ Callback when a segment is selected.
 The value of the `ToggleGroupControl`.
 
 -   Required: No
+
+### `disabled`: `boolean`
+
+If true, every option is unselectable. The selected value is left as-is.
+
+-   Required: No
+-   Default: `false`