@wordpress/components 40.0.0 → 40.1.0

package/src/slot-fill/test/{slot.js → slot.jsdom.test.tsx}

@@ -1,11 +1,12 @@
 import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import type { ReactNode } from 'react';
 import { Component, createPortal, useState } from '@wordpress/element';
 import { registerStyle } from '@wordpress/style-runtime';
 import { Slot, Fill, Provider, useSlotFills } from '../';
 
-function IframePortal( { children } ) {
-	const [ iframe, setIframe ] = useState( null );
+function IframePortal( { children }: { children: ReactNode } ) {
+	const [ iframe, setIframe ] = useState< HTMLIFrameElement | null >( null );
 	const body = iframe?.contentDocument?.body;
 
 	return (
@@ -15,9 +16,14 @@ function IframePortal( { children } ) {
 	);
 }
 
-class Filler extends Component {
-	constructor() {
-		super( ...arguments );
+type FillerProps = {
+	name: string;
+	text?: string;
+};
+
+class Filler extends Component< FillerProps, { num: number } > {
+	constructor( props: FillerProps ) {
+		super( props );
 
 		this.state = {
 			num: 1,
@@ -121,7 +127,7 @@ describe( 'Slot', () => {
 				<div>
 					<Slot name="chicken">
 						{ ( fills ) =>
-							[ ...fills ].length ? (
+							( fills as ReactNode[] ).length ? (
 								<blockquote>{ fills }</blockquote>
 							) : null
 						}
@@ -290,7 +296,8 @@ describe( 'Slot', () => {
 
 	describe( 'cross-document styles', () => {
 		afterEach( () => {
-			delete globalThis.__wpStyleRuntime;
+			delete ( globalThis as { __wpStyleRuntime?: unknown } )
+				.__wpStyleRuntime;
 			document.head.innerHTML = '';
 		} );
 
@@ -315,13 +322,14 @@ describe( 'Slot', () => {
 				</Provider>
 			);
 			const iframeDocument =
-				screen.getByTitle( 'Slot document' ).contentDocument;
+				screen.getByTitle< HTMLIFrameElement >( 'Slot document' )
+					.contentDocument!;
 
 			const styledElement = within( iframeDocument.body ).getByText(
 				'Styled content'
 			);
 			expect(
-				iframeDocument.defaultView.getComputedStyle( styledElement )
+				iframeDocument.defaultView!.getComputedStyle( styledElement )
 					.padding
 			).toBe( '32px' );
 		} );

package/src/snackbar/index.tsx

@@ -1,5 +1,6 @@
 import type { ForwardedRef, KeyboardEvent, MouseEvent } from 'react';
 import clsx from 'clsx';
+import { useIsPresent } from 'framer-motion';
 import { speak } from '@wordpress/a11y';
 import {
 	useEffect,
@@ -57,6 +58,8 @@ function UnforwardedSnackbar(
 	}: WordPressComponentProps< SnackbarProps, 'div' >,
 	ref: ForwardedRef< any >
 ) {
+	const isPresent = useIsPresent();
+
 	function dismissMe( event: KeyboardEvent | MouseEvent ) {
 		if ( event && event.preventDefault ) {
 			event.preventDefault();
@@ -92,16 +95,17 @@ function UnforwardedSnackbar(
 	} );
 
 	useEffect( () => {
-		// Only set up the timeout dismiss if we're not explicitly dismissing.
+		if ( explicitDismiss || ! isPresent ) {
+			return;
+		}
+
 		const timeoutHandle = setTimeout( () => {
-			if ( ! explicitDismiss ) {
-				callbacksRef.current.onDismiss?.();
-				callbacksRef.current.onRemove?.();
-			}
+			callbacksRef.current.onDismiss?.();
+			callbacksRef.current.onRemove?.();
 		}, NOTICE_TIMEOUT );
 
 		return () => clearTimeout( timeoutHandle );
-	}, [ explicitDismiss ] );
+	}, [ explicitDismiss, isPresent ] );
 
 	const classes = clsx( className, 'components-snackbar', {
 		'components-snackbar-explicit-dismiss': !! explicitDismiss,

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

@@ -1,11 +1,15 @@
-import { render, screen, within } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { act, fireEvent, render, screen, within } from '@testing-library/react';
 import { click } from '@ariakit/test';
 import { speak } from '@wordpress/a11y';
 import { SVG, Path } from '@wordpress/primitives';
 import Snackbar from '../index';
 
-jest.mock( '@wordpress/a11y', () => ( { speak: jest.fn() } ) );
-const mockedSpeak = jest.mocked( speak );
+vi.mock( import( '@wordpress/a11y' ), async ( importOriginal ) => ( {
+	...( await importOriginal() ),
+	speak: vi.fn(),
+} ) );
+const mockedSpeak = vi.mocked( speak );
 
 describe( 'Snackbar', () => {
 	const testId = 'snackbar';
@@ -14,6 +18,10 @@ describe( 'Snackbar', () => {
 		mockedSpeak.mockReset();
 	} );
 
+	afterEach( () => {
+		vi.useRealTimers();
+	} );
+
 	it( 'should render correctly', () => {
 		render( <Snackbar>Message</Snackbar> );
 
@@ -44,9 +52,25 @@ describe( 'Snackbar', () => {
 		expect( icon ).toBeVisible();
 	} );
 
+	it( 'should not restart auto-dismissal after an unrelated rerender', async () => {
+		vi.useFakeTimers();
+		const removeNotice = vi.fn();
+		const { rerender } = render(
+			<Snackbar onRemove={ () => removeNotice() }>Message</Snackbar>
+		);
+
+		await act( async () => vi.advanceTimersByTime( 5000 ) );
+		rerender(
+			<Snackbar onRemove={ () => removeNotice() }>Message</Snackbar>
+		);
+		await act( async () => vi.advanceTimersByTime( 1000 ) );
+
+		expect( removeNotice ).toHaveBeenCalledTimes( 1 );
+	} );
+
 	it( 'should be dismissible by clicking the snackbar', async () => {
-		const onRemove = jest.fn();
-		const onDismiss = jest.fn();
+		const onRemove = vi.fn();
+		const onDismiss = vi.fn();
 
 		render(
 			<Snackbar onRemove={ onRemove } onDismiss={ onDismiss }>
@@ -69,8 +93,9 @@ describe( 'Snackbar', () => {
 	} );
 
 	it( 'should not be dismissible by clicking the snackbar when the `explicitDismiss` prop is set to `true`', async () => {
-		const onRemove = jest.fn();
-		const onDismiss = jest.fn();
+		vi.useFakeTimers();
+		const onRemove = vi.fn();
+		const onDismiss = vi.fn();
 
 		render(
 			<Snackbar
@@ -93,15 +118,20 @@ describe( 'Snackbar', () => {
 			'components-snackbar-explicit-dismiss'
 		);
 
-		await click( snackbar );
+		fireEvent.click( snackbar );
+
+		expect( onRemove ).not.toHaveBeenCalled();
+		expect( onDismiss ).not.toHaveBeenCalled();
+
+		await act( async () => vi.advanceTimersByTime( 6000 ) );
 
 		expect( onRemove ).not.toHaveBeenCalled();
 		expect( onDismiss ).not.toHaveBeenCalled();
 	} );
 
 	it( 'should be dismissible by clicking the close button when the `explicitDismiss` prop is set to `true`', async () => {
-		const onRemove = jest.fn();
-		const onDismiss = jest.fn();
+		const onRemove = vi.fn();
+		const onDismiss = vi.fn();
 
 		render(
 			<Snackbar
@@ -169,7 +199,7 @@ describe( 'Snackbar', () => {
 		} );
 
 		it( 'should be rendered as a button and call `onClick` when the `onClick` prop is set', async () => {
-			const onClick = jest.fn();
+			const onClick = vi.fn();
 
 			render(
 				<Snackbar actions={ [ { label: 'View post', onClick } ] }>

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/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/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