@wordpress/components 40.0.0 → 40.1.1-next.v.202609031004.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,4 +1,4 @@
-import { render, screen, within } from '@testing-library/react';
+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';
@@ -14,6 +14,10 @@ describe( 'Snackbar', () => {
 		mockedSpeak.mockReset();
 	} );
 
+	afterEach( () => {
+		jest.useRealTimers();
+	} );
+
 	it( 'should render correctly', () => {
 		render( <Snackbar>Message</Snackbar> );
 
@@ -44,6 +48,22 @@ describe( 'Snackbar', () => {
 		expect( icon ).toBeVisible();
 	} );
 
+	it( 'should not restart auto-dismissal after an unrelated rerender', async () => {
+		jest.useFakeTimers();
+		const removeNotice = jest.fn();
+		const { rerender } = render(
+			<Snackbar onRemove={ () => removeNotice() }>Message</Snackbar>
+		);
+
+		await act( async () => jest.advanceTimersByTime( 5000 ) );
+		rerender(
+			<Snackbar onRemove={ () => removeNotice() }>Message</Snackbar>
+		);
+		await act( async () => jest.advanceTimersByTime( 1000 ) );
+
+		expect( removeNotice ).toHaveBeenCalledTimes( 1 );
+	} );
+
 	it( 'should be dismissible by clicking the snackbar', async () => {
 		const onRemove = jest.fn();
 		const onDismiss = jest.fn();
@@ -69,6 +89,7 @@ describe( 'Snackbar', () => {
 	} );
 
 	it( 'should not be dismissible by clicking the snackbar when the `explicitDismiss` prop is set to `true`', async () => {
+		jest.useFakeTimers();
 		const onRemove = jest.fn();
 		const onDismiss = jest.fn();
 
@@ -93,7 +114,12 @@ describe( 'Snackbar', () => {
 			'components-snackbar-explicit-dismiss'
 		);
 
-		await click( snackbar );
+		fireEvent.click( snackbar );
+
+		expect( onRemove ).not.toHaveBeenCalled();
+		expect( onDismiss ).not.toHaveBeenCalled();
+
+		await act( async () => jest.advanceTimersByTime( 6000 ) );
 
 		expect( onRemove ).not.toHaveBeenCalled();
 		expect( onDismiss ).not.toHaveBeenCalled();

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

@@ -0,0 +1,99 @@
+import { act, render, screen } from '@testing-library/react';
+import { click } from '@ariakit/test';
+import { useEffect, useState } from '@wordpress/element';
+import SnackbarList from '../list';
+
+jest.mock( '@wordpress/compose', () => ( {
+	...jest.requireActual( '@wordpress/compose' ),
+	useReducedMotion: () => false,
+} ) );
+
+window.scrollTo = jest.fn();
+
+describe( 'SnackbarList', () => {
+	afterEach( () => {
+		jest.resetAllMocks();
+		jest.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 () => {
+		jest.useFakeTimers();
+		const onRemove = jest.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 () => jest.advanceTimersByTime( 6000 ) );
+		expect( onRemove ).toHaveBeenCalledTimes( 1 );
+
+		// Recreate the notice before its 100ms exit animation completes.
+		await act( async () => jest.advanceTimersByTime( 50 ) );
+
+		expect( screen.getByTestId( 'snackbar' ) ).toHaveTextContent(
+			notice.content
+		);
+
+		await act( async () => jest.advanceTimersByTime( 6000 ) );
+		expect( onRemove ).toHaveBeenCalledTimes( 2 );
+	} );
+} );

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

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-group-control/toggle-group-control/style.module.scss

@@ -30,7 +30,7 @@
 
 		border-radius: var(--wpds-border-radius-sm);
 		top: -1px;
-		/* stylelint-disable-next-line plugin/use-logical-properties-and-values -- Preserve the indicator's physical offset. */
+		/* stylelint-disable-next-line logical-css/require-logical-properties -- Preserve the indicator's physical offset. */
 		left: -2px;
 		width: calc(calc(var(--selected-width, 0) * 1px) + 2px);
 		height: calc(calc(var(--selected-height, 0) * 1px) + 2px);