@wordpress/components 39.0.0 → 40.1.0

package/src/snackbar/test/list.jsdom.test.tsx

@@ -0,0 +1,100 @@
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { act, render, screen } from '@testing-library/react';
+import { click } from '@ariakit/test';
+import { useEffect, useState } from '@wordpress/element';
+import SnackbarList from '../list';
+
+vi.mock( import( '@wordpress/compose' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	useReducedMotion: () => false,
+} ) );
+
+window.scrollTo = vi.fn();
+
+describe( 'SnackbarList', () => {
+	afterEach( () => {
+		vi.resetAllMocks();
+		vi.useRealTimers();
+	} );
+
+	it( 'should get focus after a snackbar is dismissed', async () => {
+		render(
+			<SnackbarList
+				notices={ [
+					{
+						id: 'ID_1',
+						content: 'Post published.',
+						explicitDismiss: true,
+					},
+					{
+						id: 'ID_2',
+						content: 'Post updated.',
+						explicitDismiss: true,
+					},
+				] }
+				onRemove={ () => {} }
+			/>
+		);
+
+		await click(
+			screen.getAllByRole( 'button', {
+				name: 'Dismiss this notice',
+			} )[ 0 ]
+		);
+
+		expect( screen.getByTestId( 'snackbar-list' ) ).toHaveFocus();
+	} );
+
+	it( 'should restart auto-dismissal when a notice is replaced with the same ID', async () => {
+		vi.useFakeTimers();
+		const onRemove = vi.fn();
+		const notice = {
+			id: 'ID_1',
+			content: 'A collaborator joined.',
+		};
+
+		function RecreatedNotice() {
+			const [ notices, setNotices ] = useState( [ notice ] );
+			const [ shouldRecreate, setShouldRecreate ] = useState( false );
+
+			useEffect( () => {
+				if ( ! shouldRecreate ) {
+					return;
+				}
+
+				const timeoutHandle = setTimeout( () => {
+					setNotices( [ { ...notice } ] );
+					setShouldRecreate( false );
+				}, 50 );
+
+				return () => clearTimeout( timeoutHandle );
+			}, [ shouldRecreate ] );
+
+			return (
+				<SnackbarList
+					notices={ notices }
+					onRemove={ ( id ) => {
+						onRemove( id );
+						setNotices( [] );
+						setShouldRecreate( true );
+					} }
+				/>
+			);
+		}
+
+		render( <RecreatedNotice /> );
+
+		await act( async () => vi.advanceTimersByTime( 6000 ) );
+		expect( onRemove ).toHaveBeenCalledTimes( 1 );
+
+		// Recreate the notice before its 100ms exit animation completes.
+		await act( async () => vi.advanceTimersByTime( 50 ) );
+
+		expect( screen.getByTestId( 'snackbar' ) ).toHaveTextContent(
+			notice.content
+		);
+
+		await act( async () => vi.advanceTimersByTime( 6000 ) );
+		expect( onRemove ).toHaveBeenCalledTimes( 2 );
+	} );
+} );

package/src/spinner/stories/index.story.tsx

@@ -3,7 +3,6 @@ import Spinner from '../';
 import { space } from '../../utils/space';
 
 const meta: Meta< typeof Spinner > = {
-	tags: [ 'manifest' ],
 	title: 'Components/Feedback/Spinner',
 	id: 'components-spinner',
 	component: Spinner,
@@ -13,8 +12,9 @@ const meta: Meta< typeof Spinner > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
+			notes: 'Use [`Spinner`](?path=/docs/design-system-components-spinner--docs) from `@wordpress/ui` instead.',
 		},
 	},
 };

package/src/style-provider/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { afterEach, describe, expect, it } from 'vitest';
 import { render } from '@testing-library/react';
 import { registerStyle } from '@wordpress/style-runtime';
 import StyleProvider from '..';

package/src/style.scss

@@ -21,6 +21,7 @@
 @use "./form-token-field/style.scss" as *;
 @use "./guide/style.scss" as *;
 @use "./higher-order/navigate-regions/style.scss" as *;
+@use "./input-control/style.scss" as *;
 @use "./menu-group/style.scss" as *;
 @use "./menu-item/style.scss" as *;
 @use "./menu-items-choice/style.scss" as *;

package/src/surface/style.module.scss

@@ -9,12 +9,12 @@
 }
 
 .border-left {
-	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Surface exposes physical border props. */
+	/* stylelint-disable-next-line logical-css/require-logical-properties -- Surface exposes physical border props. */
 	border-left: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
 }
 
 .border-right {
-	/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Surface exposes physical border props. */
+	/* stylelint-disable-next-line logical-css/require-logical-properties -- Surface exposes physical border props. */
 	border-right: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-surface-neutral);
 }
 

package/src/surface/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 { Surface } from '../index';
 

package/src/tab-panel/style.scss

@@ -1,4 +1,5 @@
 @use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/mixins" as *;
 
 .components-tab-panel__tabs {
 	display: flex;
@@ -16,7 +17,6 @@
 	height: $grid-unit-60 !important; // https://github.com/WordPress/gutenberg/pull/65075#discussion_r1746282734
 	background: transparent;
 	border: none;
-	box-shadow: none;
 	cursor: var(--wpds-cursor-control);
 	padding: 3px var(--wpds-dimension-padding-lg); // Use padding to offset the is-active border, this benefits Windows High Contrast mode
 	margin-left: 0;
@@ -34,7 +34,6 @@
 
 	&:focus:not(:disabled) {
 		position: relative;
-		box-shadow: none;
 		outline: none;
 	}
 
@@ -73,24 +72,12 @@
 		position: absolute;
 		inset: var(--wpds-dimension-padding-md);
 		pointer-events: none;
-
-		// Draw the indicator.
-		box-shadow: 0 0 0 0 transparent;
 		border-radius: var(--wpds-border-radius-sm);
-
-		// Animation
-		@media not (prefers-reduced-motion) {
-			transition: box-shadow 0.1s linear;
-		}
 	}
 
 	&:focus-visible::before {
-		box-shadow:
-			0 0 0 var(--wpds-border-width-focus)
-			var(--wpds-color-stroke-focus);
-
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
+		@include outset-ring__focus();
+		outline-offset: 0;
 	}
 
 	.components-tab-panel__tabs[aria-orientation="vertical"] & {
@@ -108,17 +95,11 @@
 
 .components-tab-panel__tab-content {
 	&:focus {
-		box-shadow: none;
 		outline: none;
 	}
 
 	&:focus-visible {
-		box-shadow:
-			0 0 0 var(--wpds-border-width-focus)
-			var(--wpds-color-stroke-focus);
-
-		// Windows high contrast mode.
-		outline: 2px solid transparent;
+		@include outset-ring__focus();
 		outline-offset: 0;
 	}
 }

package/src/tab-panel/test/{index.tsx → index.jsdom.test.tsx}

@@ -1,3 +1,4 @@
+import { describe, expect, it, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
 import { press, hover, click } from '@ariakit/test';
 import { wordpress, category, media } from '@wordpress/icons';
@@ -34,7 +35,7 @@ describe.each( [
 
 	describe( 'Accessibility and semantics', () => {
 		it( 'should use the correct aria attributes', async () => {
-			const panelRenderFunction = jest.fn();
+			const panelRenderFunction = vi.fn();
 
 			render(
 				<Component tabs={ TABS } children={ panelRenderFunction } />
@@ -66,7 +67,7 @@ describe.each( [
 		} );
 
 		it( 'should display a tooltip when hovering tabs provided with an icon', async () => {
-			const panelRenderFunction = jest.fn();
+			const panelRenderFunction = vi.fn();
 
 			const TABS_WITH_ICON = [
 				{ ...TABS[ 0 ], icon: wordpress },
@@ -102,8 +103,8 @@ describe.each( [
 		} );
 
 		it( 'should display a tooltip when moving the selection via the keyboard on tabs provided with an icon', async () => {
-			const mockOnSelect = jest.fn();
-			const panelRenderFunction = jest.fn();
+			const mockOnSelect = vi.fn();
+			const panelRenderFunction = vi.fn();
 
 			const TABS_WITH_ICON = [
 				{ ...TABS[ 0 ], icon: wordpress },
@@ -163,7 +164,7 @@ describe.each( [
 
 	describe( 'Without `initialTabName`', () => {
 		it( 'should render first tab', async () => {
-			const panelRenderFunction = jest.fn();
+			const panelRenderFunction = vi.fn();
 
 			render(
 				<Component tabs={ TABS } children={ panelRenderFunction } />
@@ -176,7 +177,7 @@ describe.each( [
 		} );
 
 		it( 'should fall back to first enabled tab if the active tab is removed', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 			const { rerender } = render(
 				<Component
 					tabs={ TABS }
@@ -247,7 +248,7 @@ describe.each( [
 		} );
 
 		it( 'should fall back to the tab associated to `initialTabName` if the currently active tab is removed', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			const { rerender } = render(
 				<Component
@@ -279,7 +280,7 @@ describe.each( [
 		} );
 
 		it( 'should have no active tabs when the tab associated to `initialTabName` is removed while being the active tab', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			const { rerender } = render(
 				<Component
@@ -311,7 +312,7 @@ describe.each( [
 		} );
 
 		it( 'waits for the tab with the `initialTabName` to be present in the `tabs` array before selecting it', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 			const { rerender } = render(
 				<Component
 					initialTabName="delta"
@@ -349,7 +350,7 @@ describe.each( [
 
 	describe( 'Disabled Tab', () => {
 		it( 'should disable the tab when `disabled` is `true`', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			render(
 				<Component
@@ -381,7 +382,7 @@ describe.each( [
 		} );
 
 		it( 'should select first enabled tab when the initial tab is disabled', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			const { rerender } = render(
 				<Component
@@ -416,7 +417,7 @@ describe.each( [
 		} );
 
 		it( 'should select first enabled tab when the tab associated to `initialTabName` is disabled', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			const { rerender } = render(
 				<Component
@@ -452,7 +453,7 @@ describe.each( [
 		} );
 
 		it( 'should select the first enabled tab when the selected tab becomes disabled', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 			const { rerender } = render(
 				<Component
 					tabs={ TABS }
@@ -496,7 +497,7 @@ describe.each( [
 		} );
 
 		it( 'should select the first enabled tab when the tab associated to `initialTabName` becomes disabled while being the active tab', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			const { rerender } = render(
 				<Component
@@ -544,8 +545,8 @@ describe.each( [
 
 	describe( 'Tab Activation', () => {
 		it( 'defaults to automatic tab activation (pointer clicks)', async () => {
-			const panelRenderFunction = jest.fn();
-			const mockOnSelect = jest.fn();
+			const panelRenderFunction = vi.fn();
+			const mockOnSelect = vi.fn();
 
 			render(
 				<Component
@@ -582,7 +583,7 @@ describe.each( [
 		} );
 
 		it( 'defaults to automatic tab activation (arrow keys)', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			render(
 				<Component
@@ -619,7 +620,7 @@ describe.each( [
 		} );
 
 		it( 'wraps around the last/first tab when using arrow keys', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			render(
 				<Component
@@ -656,7 +657,7 @@ describe.each( [
 		} );
 
 		it( 'should not move tab selection when pressing the up/down arrow keys, unless the orientation is changed to `vertical`', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			const { rerender } = render(
 				<Component
@@ -743,7 +744,7 @@ describe.each( [
 		} );
 
 		it( 'should move focus on a tab even if disabled with arrow key, but not with pointer clicks', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			render(
 				<Component
@@ -822,7 +823,7 @@ describe.each( [
 		} );
 
 		it( 'switches to manual tab activation when the `selectOnMove` prop is set to `false`', async () => {
-			const mockOnSelect = jest.fn();
+			const mockOnSelect = vi.fn();
 
 			render(
 				<Component

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

@@ -3,7 +3,6 @@ import { useState } from '@wordpress/element';
 import TextControl from '..';
 
 const meta: Meta< typeof TextControl > = {
-	tags: [ 'manifest' ],
 	component: TextControl,
 	title: 'Components/Selection & Input/Common/TextControl',
 	id: 'components-textcontrol',
@@ -19,9 +18,9 @@ const meta: Meta< typeof TextControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Prefer `InputControl` when placing buttons or icons in the prefix/suffix slots.',
+			notes: 'Use [`InputControl`](?path=/docs/design-system-components-form-inputcontrol--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-inputcontrol--migration-guide).',
 		},
 	},
 };

package/src/text-control/style.scss

@@ -24,7 +24,6 @@
 	background: $components-color-background;
 	color: $components-color-foreground;
 	@include input-control;
-	border-color: $components-color-border;
 
 	// Subtract 1px to account for the border, which isn't included on the element
 	// on newer components like InputControl, SelectControl, etc.

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/index.tsx

@@ -2,9 +2,9 @@ import clsx from 'clsx';
 import { useInstanceId } from '@wordpress/compose';
 import { forwardRef } from '@wordpress/element';
 import BaseControl from '../base-control';
-import { StyledTextarea } from './styles/textarea-control-styles';
 import type { TextareaControlProps } from './types';
 import type { WordPressComponentProps } from '../context';
+import styles from './style.module.scss';
 
 function UnforwardedTextareaControl(
 	props: WordPressComponentProps< TextareaControlProps, 'textarea', false >,
@@ -37,8 +37,11 @@ function UnforwardedTextareaControl(
 			help={ help }
 			className={ classes }
 		>
-			<StyledTextarea
-				className="components-textarea-control__input"
+			<textarea
+				className={ clsx(
+					'components-textarea-control__input',
+					styles.textarea
+				) }
 				id={ id }
 				rows={ rows }
 				onChange={ onChangeValue }

package/src/textarea-control/stories/index.story.tsx

@@ -3,7 +3,6 @@ import { useState } from '@wordpress/element';
 import TextareaControl from '..';
 
 const meta: Meta< typeof TextareaControl > = {
-	tags: [ 'manifest' ],
 	component: TextareaControl,
 	title: 'Components/Selection & Input/Common/TextareaControl',
 	id: 'components-textareacontrol',
@@ -22,9 +21,9 @@ const meta: Meta< typeof TextareaControl > = {
 		},
 		docs: { canvas: { sourceState: 'shown' } },
 		componentStatus: {
-			status: 'recommended',
+			status: 'not-recommended',
 			whereUsed: 'global',
-			notes: 'Will be superseded by [`TextareaControl`](?path=/docs/design-system-components-form-primitives-textarea--docs) in `@wordpress/ui`, but continue using for now.',
+			notes: 'Use [`TextareaControl`](?path=/docs/design-system-components-form-textareacontrol--docs) from `@wordpress/ui` instead. See the [migration guide](?path=/docs/components-textareacontrol--migration-guide).',
 		},
 	},
 };