@wordpress/components 39.0.0 → 40.1.0

package/src/resizable-box/resize-tooltip/test/index.jsdom.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { createRef, createElement } from '@wordpress/element';
+import ResizeTooltip from '../index';
+import styles from '../style.module.scss';
+
+describe( 'ResizeTooltip', () => {
+	it( 'renders the legacy root class together with className and style', () => {
+		render(
+			<ResizeTooltip
+				className="custom-tooltip"
+				data-testid="resize-tooltip"
+				style={ { zIndex: 7 } }
+			/>
+		);
+
+		const root = screen.getByTestId( 'resize-tooltip' );
+
+		expect( root ).toHaveClass( 'components-resize-tooltip' );
+		expect( root ).toHaveClass( styles.root );
+		expect( root ).toHaveClass( 'custom-tooltip' );
+		expect( root ).toHaveStyle( { zIndex: '7' } );
+	} );
+
+	it( 'renders as a different element, forwards the root ref, and forwards target-specific props', () => {
+		const ref = createRef< HTMLElement >();
+
+		render(
+			createElement( ResizeTooltip, {
+				as: 'label',
+				'data-testid': 'resize-tooltip',
+				htmlFor: 'size-field',
+				ref,
+			} as React.ComponentProps< typeof ResizeTooltip > & {
+				htmlFor?: string;
+			} )
+		);
+
+		const root = screen.getByTestId( 'resize-tooltip' );
+
+		expect( root.tagName ).toBe( 'LABEL' );
+		expect( ref.current ).toBe( root );
+		expect( root ).toHaveAttribute( 'for', 'size-field' );
+	} );
+} );

package/src/resizable-box/resize-tooltip/test/label.jsdom.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from '@testing-library/react';
+import Label from '../label';
+import { POSITIONS } from '../utils';
+
+describe( 'ResizeTooltip label', () => {
+	it( 'keeps the Text contract when an ancestor uses a bold font weight', () => {
+		render(
+			<div style={ { fontWeight: 700 } }>
+				<Label
+					label="120 x 80"
+					position={ POSITIONS.bottom }
+					zIndex={ 1 }
+				/>
+			</div>
+		);
+
+		const label = screen.getByText( '120 x 80' );
+
+		expect( label.tagName ).toBe( 'SPAN' );
+		expect( label ).toHaveClass( 'components-text' );
+		expect( label ).toHaveClass( 'components-truncate' );
+		expect( label ).toHaveAttribute( 'data-wp-component', 'Text' );
+		expect( label ).toHaveStyle( { fontWeight: 'normal' } );
+	} );
+} );

package/src/resizable-box/stories/index.story.tsx

@@ -11,6 +11,7 @@ const meta: Meta< typeof ResizableBox > = {
 		children: { control: false },
 		enable: { control: 'object' },
 		onResizeStop: { action: 'onResizeStop' },
+		__experimentalShowTooltip: { control: 'boolean' },
 	},
 	parameters: {
 		controls: { expanded: true },
@@ -85,3 +86,13 @@ DisabledDirections.args = {
 		topLeft: false,
 	},
 };
+
+/**
+ * The resize size label is hidden by default. Enable it with
+ * `__experimentalShowTooltip`, or toggle that control in Storybook.
+ */
+export const WithResizeTooltip = Template.bind( {} );
+WithResizeTooltip.args = {
+	...Default.args,
+	__experimentalShowTooltip: true,
+};

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

@@ -28,12 +28,14 @@ const Template: StoryFn< typeof SandBox > = ( args ) => <SandBox { ...args } />;
 
 export const Default = Template.bind( {} );
 Default.args = {
+	title: 'Sandbox preview',
 	html: '<p>Arbitrary HTML content</p>',
 	allowForms: false,
 };
 
 export const WithForm = Template.bind( {} );
 WithForm.args = {
+	title: 'Sandbox preview with form',
 	html: '<form action="#"><label for="name">Name</label><input id="name" type="text" /><button type="submit">Submit</button></form>',
 	allowForms: true,
 };

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

@@ -1,3 +1,4 @@
+import { describe, expect, it } from 'vitest';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { useState } from '@wordpress/element';
 import SandBox, { VIEWPORT_UNIT_VALUE_REGEX, buildSandBoxDocument } from '..';

package/src/scroll-lock/test/{index.tsx → index.jsdom.test.tsx}

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

package/src/scrollable/hook.ts

@@ -1,9 +1,8 @@
-import { useMemo } from '@wordpress/element';
+import clsx from 'clsx';
 import type { WordPressComponentProps } from '../context';
 import { useContextSystem } from '../context';
-import * as styles from './styles';
-import { useCx } from '../utils/hooks/use-cx';
 import type { ScrollableProps } from './types';
+import styles from './style.module.scss';
 
 export function useScrollable(
 	props: WordPressComponentProps< ScrollableProps, 'div' >
@@ -15,20 +14,15 @@ export function useScrollable(
 		...otherProps
 	} = useContextSystem( props, 'Scrollable' );
 
-	const cx = useCx();
-
-	const classes = useMemo(
-		() =>
-			cx(
-				styles.Scrollable,
-				styles.scrollableScrollbar,
-				smoothScroll && styles.smoothScroll,
-				scrollDirection === 'x' && styles.scrollX,
-				scrollDirection === 'y' && styles.scrollY,
-				scrollDirection === 'auto' && styles.scrollAuto,
-				className
-			),
-		[ className, cx, scrollDirection, smoothScroll ]
+	const classes = clsx(
+		styles.scrollable,
+		{
+			[ styles[ 'smooth-scroll' ] ]: smoothScroll,
+			[ styles[ 'scroll-x' ] ]: scrollDirection === 'x',
+			[ styles[ 'scroll-y' ] ]: scrollDirection === 'y',
+			[ styles[ 'scroll-auto' ] ]: scrollDirection === 'auto',
+		},
+		className
 	);
 
 	return { ...otherProps, className: classes };

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

@@ -64,6 +64,7 @@ const Template: StoryFn< typeof Scrollable > = ( { ...args } ) => {
 						right: 0,
 					} }
 					type="text"
+					aria-label="Element out of view"
 					value="Focus me"
 					readOnly
 				/>

package/src/scrollable/style.module.scss

@@ -0,0 +1,44 @@
+.scrollable {
+	height: 100%;
+
+	@media only screen and (min-device-width: 40em) {
+		&::-webkit-scrollbar {
+			height: 12px;
+			width: 12px;
+		}
+
+		&::-webkit-scrollbar-track {
+			background: rgba(0, 0, 0, 0.04);
+			border-radius: 8px;
+		}
+
+		&::-webkit-scrollbar-thumb {
+			background-clip: padding-box;
+			background-color: rgba(0, 0, 0, 0.2);
+			border: 2px solid rgba(0, 0, 0, 0);
+			border-radius: 7px;
+		}
+
+		&:hover::-webkit-scrollbar-thumb {
+			background-color: rgba(0, 0, 0, 0.5);
+		}
+	}
+}
+
+.smooth-scroll {
+	scroll-behavior: smooth;
+}
+
+.scroll-x {
+	overflow-x: auto;
+	overflow-y: hidden;
+}
+
+.scroll-y {
+	overflow-x: hidden;
+	overflow-y: auto;
+}
+
+.scroll-auto {
+	overflow-y: auto;
+}

package/src/scrollable/test/index.jsdom.test.tsx

@@ -0,0 +1,145 @@
+import { render, screen, within } from '@testing-library/react';
+import { createPortal, useState } from '@wordpress/element';
+import { registerStyle } from '@wordpress/style-runtime';
+import { CardBody } from '../../card';
+import StyleProvider from '../../style-provider';
+import { Scrollable } from '../index';
+import styles from '../style.module.scss';
+
+type GlobalScopeWithStyleRuntime = typeof globalThis & {
+	__wpStyleRuntime?: unknown;
+};
+
+function IframeWithStyleProvider( {
+	children,
+}: {
+	children: React.ReactNode;
+} ) {
+	const [ iframe, setIframe ] = useState< HTMLIFrameElement | null >( null );
+	const iframeDocument = iframe?.contentDocument;
+
+	return (
+		<iframe title="CardBody document" ref={ setIframe }>
+			{ iframeDocument &&
+				createPortal(
+					<StyleProvider document={ iframeDocument }>
+						{ children }
+					</StyleProvider>,
+					iframeDocument.body
+				) }
+		</iframe>
+	);
+}
+
+describe( 'props', () => {
+	test( 'should render correctly', () => {
+		render(
+			<Scrollable data-testid="scrollable">
+				WordPress.org - Code is Poetry
+			</Scrollable>
+		);
+
+		const scrollable = screen.getByTestId( 'scrollable' );
+
+		expect( scrollable ).toHaveClass( 'components-scrollable' );
+		expect( scrollable ).toHaveClass( styles.scrollable );
+		expect( scrollable ).toHaveClass( styles[ 'scroll-y' ] );
+		expect( scrollable ).not.toHaveClass( styles[ 'smooth-scroll' ] );
+	} );
+
+	test( 'should render smoothScroll', () => {
+		render(
+			<Scrollable smoothScroll data-testid="smooth-scrollable">
+				WordPress.org - Code is Poetry
+			</Scrollable>
+		);
+
+		expect( screen.getByTestId( 'smooth-scrollable' ) ).toHaveClass(
+			styles[ 'smooth-scroll' ]
+		);
+	} );
+
+	test( 'should render scrollDirection x', () => {
+		render(
+			<Scrollable scrollDirection="x" data-testid="scrollable-x">
+				WordPress.org - Code is Poetry
+			</Scrollable>
+		);
+
+		const scrollable = screen.getByTestId( 'scrollable-x' );
+
+		expect( scrollable ).toHaveClass( styles[ 'scroll-x' ] );
+		expect( scrollable ).not.toHaveClass( styles[ 'scroll-y' ] );
+	} );
+
+	test( 'should render scrollDirection auto', () => {
+		render(
+			<Scrollable scrollDirection="auto" data-testid="scrollable-auto">
+				WordPress.org - Code is Poetry
+			</Scrollable>
+		);
+
+		const scrollable = screen.getByTestId( 'scrollable-auto' );
+
+		expect( scrollable ).toHaveClass( styles[ 'scroll-auto' ] );
+		expect( scrollable ).not.toHaveClass( styles[ 'scroll-y' ] );
+	} );
+} );
+
+describe( 'CardBody isScrollable height', () => {
+	const globalScope = globalThis as GlobalScopeWithStyleRuntime;
+
+	afterEach( () => {
+		// Style runtime injects outside Testing Library's container.
+		/* eslint-disable testing-library/no-node-access */
+		document
+			.querySelectorAll( 'style[data-wp-hash="scrollable-height"]' )
+			.forEach( ( style ) => style.remove() );
+		/* eslint-enable testing-library/no-node-access */
+
+		delete globalScope.__wpStyleRuntime;
+	} );
+
+	test( 'should keep height 100% in the main document and in an iframe', () => {
+		// CSS module registration is skipped by the Jest transform, so mirror the
+		// generated production call explicitly.
+		registerStyle(
+			'scrollable-height',
+			`.${ styles.scrollable }{height:100%;}`
+		);
+
+		render( <CardBody data-testid="card-body">Body</CardBody> );
+		render(
+			<CardBody isScrollable data-testid="scrollable-body">
+				Body
+			</CardBody>
+		);
+
+		expect(
+			getComputedStyle( screen.getByTestId( 'card-body' ) ).height
+		).toBe( 'auto' );
+		expect(
+			getComputedStyle( screen.getByTestId( 'scrollable-body' ) ).height
+		).toBe( '100%' );
+
+		render(
+			<IframeWithStyleProvider>
+				<CardBody isScrollable data-testid="scrollable-body-iframe">
+					Body
+				</CardBody>
+			</IframeWithStyleProvider>
+		);
+
+		const iframeDocument =
+			screen.getByTitle< HTMLIFrameElement >( 'CardBody document' )
+				.contentDocument!;
+
+		const iframeBody = within( iframeDocument.body ).getByTestId(
+			'scrollable-body-iframe'
+		);
+
+		expect(
+			iframeDocument.defaultView!.getComputedStyle( iframeBody ).height
+		).toBe( '100%' );
+	} );
+} );

package/src/shortcut/test/__snapshots__/index.jsdom.test.tsx.snap

@@ -0,0 +1,15 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Shortcut > renders passed className 1`] = `
+<span
+  class="my-class"
+>
+  shortcut text
+</span>
+`;
+
+exports[`Shortcut > renders the shortcut display text when a string is passed as the shortcut 1`] = `
+<span>
+  shortcut text
+</span>
+`;

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

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

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

@@ -1,3 +1,4 @@
+import { describe, expect, test } from 'vitest';
 import { render, screen, within } from '@testing-library/react';
 import { createRef } from '@wordpress/element';
 import { createSlotFill, Provider as SlotFillProvider } from '../';
@@ -79,7 +80,7 @@ describe( 'createSlotFill', () => {
 
 	test( 'should forward ref to the slot when using bubblesVirtually', () => {
 		const TestSlotFill = createSlotFill( 'TestRefSlot' );
-		const ref = createRef();
+		const ref = createRef< HTMLElement >();
 
 		render(
 			<SlotFillProvider>
@@ -91,12 +92,12 @@ describe( 'createSlotFill', () => {
 		);
 
 		expect( ref.current ).not.toBeNull();
-		expect( ref.current.tagName ).toBe( 'DIV' );
+		expect( ref.current!.tagName ).toBe( 'DIV' );
 	} );
 
 	test( 'should forward ref without bubblesVirtually (ref stays null for fragment-based slot)', () => {
 		const TestSlotFill = createSlotFill( 'TestRefSlotBase' );
-		const ref = createRef();
+		const ref = createRef< HTMLElement >();
 
 		render(
 			<SlotFillProvider>

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

@@ -60,6 +60,11 @@ WithActions.args = {
 	],
 	children: 'Use Snackbars with an action link to an external page.',
 };
+WithActions.parameters = {
+	// FIXME: Action control nested inside the snackbar creates nested interactive elements (nested-interactive).
+	// See: https://github.com/WordPress/gutenberg/issues/81596
+	a11y: { test: 'todo' },
+};
 
 export const WithIcon: StoryFn< typeof Snackbar > = DefaultTemplate.bind( {} );
 WithIcon.args = {

package/src/snackbar/stories/list.story.tsx

@@ -14,6 +14,9 @@ const meta: Meta< typeof SnackbarList > = {
 		},
 	},
 	parameters: {
+		// FIXME: Snackbars with actions nest interactive elements (nested-interactive).
+		// See: https://github.com/WordPress/gutenberg/issues/81596
+		a11y: { test: 'todo' },
 		controls: {
 			expanded: true,
 		},

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 } ] }>