@wordpress/ui 0.11.0 → 0.12.1-next.v.202604201441.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.11.0",
+	"version": "0.12.1-next.v.202604201441.0+dab6d8c07",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -44,15 +44,15 @@
 	"sideEffects": false,
 	"dependencies": {
 		"@base-ui/react": "^1.4.0",
-		"@wordpress/a11y": "^4.44.0",
-		"@wordpress/compose": "^7.44.0",
-		"@wordpress/element": "^6.44.0",
-		"@wordpress/i18n": "^6.17.0",
-		"@wordpress/icons": "^12.2.0",
-		"@wordpress/keycodes": "^4.44.0",
-		"@wordpress/primitives": "^4.44.0",
-		"@wordpress/private-apis": "^1.44.0",
-		"@wordpress/theme": "^0.11.0",
+		"@wordpress/a11y": "^4.44.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/compose": "^7.44.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/element": "^6.44.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/i18n": "^6.17.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/icons": "^12.2.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/keycodes": "^4.44.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/primitives": "^4.44.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/private-apis": "^1.44.1-next.v.202604201441.0+dab6d8c07",
+		"@wordpress/theme": "^0.11.1-next.v.202604201441.0+dab6d8c07",
 		"clsx": "^2.1.1",
 		"tabbable": "^6.4.0"
 	},
@@ -71,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "b862d8c84121a47bbeff882f6c87e61681ce2e0d"
+	"gitHead": "c788005ba4ee2a34851c1217c51602656aa7c3a6"
 }

package/src/alert-dialog/stories/index.story.tsx

@@ -3,8 +3,8 @@ import { useId, useState } from '@wordpress/element';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { action } from 'storybook/actions';
 import { fn } from 'storybook/test';
-
-import { AlertDialog, Text } from '../..';
+import * as AlertDialog from '../';
+import { Text } from '../../text';
 
 const meta: Meta< typeof AlertDialog.Root > = {
 	title: 'Design System/Components/AlertDialog',

package/src/badge/stories/choosing-intent.story.tsx

@@ -15,7 +15,7 @@ const meta: Meta< typeof Badge > = {
 	parameters: {
 		controls: { disable: true },
 	},
-	tags: [ '!dev' /* Hide individual story pages from sidebar */ ],
+	tags: [ '!dev' /* Hide individual story pages from sidebar */, 'manifest' ],
 };
 export default meta;
 

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

@@ -3,6 +3,7 @@ import { Fragment } from '@wordpress/element';
 import { Badge } from '../index';
 
 const meta: Meta< typeof Badge > = {
+	tags: [ 'manifest' ],
 	title: 'Design System/Components/Badge',
 	component: Badge,
 };

package/src/collapsible-card/header.tsx

@@ -5,6 +5,7 @@ import * as Card from '../card';
 import * as Collapsible from '../collapsible';
 import { Icon } from '../icon';
 import styles from './style.module.css';
+import defenseStyles from '../utils/css/global-css-defense.module.css';
 import focusStyles from '../utils/css/focus.module.css';
 import { HeaderDescriptionIdContext } from './context';
 import type { HeaderProps } from './types';
@@ -55,6 +56,7 @@ export const Header = forwardRef< HTMLDivElement, HeaderProps >(
 						<div
 							className={ clsx(
 								styles[ 'header-trigger-wrapper' ],
+								defenseStyles.div,
 								// While the interactive trigger element is the whole header,
 								// the focus ring will be displayed only on the icon to visually
 								// emulate it being the button.

package/src/dialog/context.tsx

@@ -6,6 +6,7 @@ import {
 	useMemo,
 	useRef,
 } from '@wordpress/element';
+import { useScheduleValidation } from '../utils/use-schedule-validation';
 
 /**
  * Whether validation is enabled. This is a build-time constant that allows
@@ -14,7 +15,7 @@ import {
 const VALIDATION_ENABLED = process.env.NODE_ENV !== 'production';
 
 type DialogValidationContextType = {
-	registerTitle: ( element: HTMLElement | null ) => void;
+	registerTitle: ( element: HTMLElement | null ) => () => void;
 };
 
 // Context is only created in development mode.
@@ -54,19 +55,7 @@ function DialogValidationProviderDev( {
 } ) {
 	const titleElementRef = useRef< HTMLElement | null >( null );
 
-	const registerTitle = useCallback( ( element: HTMLElement | null ) => {
-		titleElementRef.current = element;
-	}, [] );
-
-	const contextValue = useMemo(
-		() => ( { registerTitle } ),
-		[ registerTitle ]
-	);
-
-	// Validate that Dialog.Title is rendered with non-empty text content
-	useEffect( () => {
-		// useLayoutEffect in Title runs before this useEffect,
-		// so titleElementRef should already be set if Title is present
+	const scheduleValidation = useScheduleValidation( () => {
 		const titleElement = titleElementRef.current;
 
 		if ( ! titleElement ) {
@@ -84,7 +73,31 @@ function DialogValidationProviderDev( {
 					'Provide meaningful text content for the dialog title.'
 			);
 		}
-	}, [] );
+	} );
+
+	const registerTitle = useCallback(
+		( element: HTMLElement | null ) => {
+			titleElementRef.current = element;
+			scheduleValidation();
+
+			return () => {
+				titleElementRef.current = null;
+				scheduleValidation();
+			};
+		},
+		[ scheduleValidation ]
+	);
+
+	// Schedule an initial validation on mount to catch missing titles
+	// (when no Title component is rendered, registerTitle is never called).
+	useEffect( () => {
+		scheduleValidation();
+	}, [ scheduleValidation ] );
+
+	const contextValue = useMemo(
+		() => ( { registerTitle } ),
+		[ registerTitle ]
+	);
 
 	return (
 		<DialogValidationContext.Provider value={ contextValue }>

package/src/dialog/style.module.css

@@ -1,5 +1,17 @@
 @layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
 
+/*
+ * Temporary workaround for a Base UI tabbability regression with
+ * checkVisibility() and display: contents.
+ * See: https://github.com/mui/base-ui/issues/4622
+ *
+ * This must stay outside the CSS layers to override ThemeProvider's
+ * unlayered display: contents.
+ */
+[data-wpds-theme-provider-id]:has(> .popup) {
+	display: block;
+}
+
 @layer wp-ui-components {
 	.backdrop {
 		position: fixed;

package/src/dialog/test/index.test.tsx

@@ -1,36 +1,19 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Component, createRef } from '@wordpress/element';
-import type { ReactNode } from 'react';
+import { createRef, useState } from '@wordpress/element';
 import * as Dialog from '../index';
 
-class TestErrorBoundary extends Component<
-	{ children: ReactNode; onError: ( error: Error ) => void },
-	{ hasError: boolean }
-> {
-	constructor( props: {
-		children: ReactNode;
-		onError: ( error: Error ) => void;
-	} ) {
-		super( props );
-		this.state = { hasError: false };
-	}
-
-	static getDerivedStateFromError() {
-		return { hasError: true };
-	}
-
-	componentDidCatch( error: Error ) {
-		this.props.onError( error );
-	}
-
-	render() {
-		if ( this.state.hasError ) {
-			return null;
-		}
-
-		return this.props.children;
-	}
+function collectUncaughtErrors() {
+	const errors: Error[] = [];
+	const handler = ( event: ErrorEvent ) => {
+		event.preventDefault();
+		errors.push( event.error );
+	};
+	window.addEventListener( 'error', handler );
+	return {
+		errors,
+		cleanup: () => window.removeEventListener( 'error', handler ),
+	};
 }
 
 describe( 'Dialog', () => {
@@ -81,7 +64,9 @@ describe( 'Dialog', () => {
 	} );
 
 	describe( 'Development mode validation', () => {
-		// Suppress React's error boundary logging for these tests.
+		// Suppress console.error from React act() warnings and jsdom
+		// unhandled-error logging. Validation errors are caught via
+		// collectUncaughtErrors (window 'error' event) instead.
 		let originalConsoleError: typeof console.error;
 
 		beforeEach( () => {
@@ -98,210 +83,305 @@ describe( 'Dialog', () => {
 
 		it( 'should throw when Dialog.Title is missing', async () => {
 			const user = userEvent.setup();
-			const onError = jest.fn();
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<TestErrorBoundary onError={ onError }>
-					<Dialog.Root>
-						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
-						<Dialog.Popup>
-							<Dialog.Header>
-								{ /* Missing Dialog.Title */ }
-							</Dialog.Header>
-							<p>Content without a title</p>
-							<Dialog.Footer>
-								<Dialog.Action>Close</Dialog.Action>
-							</Dialog.Footer>
-						</Dialog.Popup>
-					</Dialog.Root>
-				</TestErrorBoundary>
+				<Dialog.Root>
+					<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+					<Dialog.Popup>
+						<Dialog.Header>
+							{ /* Missing Dialog.Title */ }
+						</Dialog.Header>
+						<p>Content without a title</p>
+						<Dialog.Footer>
+							<Dialog.Action>Close</Dialog.Action>
+						</Dialog.Footer>
+					</Dialog.Popup>
+				</Dialog.Root>
 			);
 
-			// Open the dialog - this will trigger the error in useEffect
 			await user.click(
 				screen.getByRole( 'button', { name: 'Open Dialog' } )
 			);
 
 			await waitFor( () => {
-				expect( onError ).toHaveBeenCalled();
+				expect( errors.length ).toBeGreaterThan( 0 );
 			} );
 
-			expect( onError.mock.calls[ 0 ][ 0 ] ).toBeInstanceOf( Error );
-			expect( ( onError.mock.calls[ 0 ][ 0 ] as Error ).message ).toBe(
+			expect( errors[ 0 ].message ).toBe(
 				'Dialog: Missing <Dialog.Title>. ' +
 					'For accessibility, every dialog requires a title. ' +
 					'If needed, the title can be visually hidden but must not be omitted.'
 			);
+
+			cleanup();
 		} );
 
 		it( 'should not throw before opening the dialog', async () => {
-			const onError = jest.fn();
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<TestErrorBoundary onError={ onError }>
-					<Dialog.Root>
-						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
-						<Dialog.Popup>
-							<Dialog.Header>
-								<Dialog.Title>My Title</Dialog.Title>
-							</Dialog.Header>
-							<p>Content with a title</p>
-							<Dialog.Footer>
-								<Dialog.Action>Close</Dialog.Action>
-							</Dialog.Footer>
-						</Dialog.Popup>
-					</Dialog.Root>
-				</TestErrorBoundary>
+				<Dialog.Root>
+					<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+					<Dialog.Popup>
+						<Dialog.Header>
+							<Dialog.Title>My Title</Dialog.Title>
+						</Dialog.Header>
+						<p>Content with a title</p>
+						<Dialog.Footer>
+							<Dialog.Action>Close</Dialog.Action>
+						</Dialog.Footer>
+					</Dialog.Popup>
+				</Dialog.Root>
 			);
 
-			// Check that the dialog itself hasn't been rendered in the DOM.
 			await expect( screen.findByRole( 'dialog' ) ).rejects.toThrow();
+			expect( errors ).toHaveLength( 0 );
 
-			expect( onError ).not.toHaveBeenCalled();
+			cleanup();
 		} );
 
 		it( 'should not throw when Dialog.Title is present', async () => {
 			const user = userEvent.setup();
-			const onError = jest.fn();
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<TestErrorBoundary onError={ onError }>
-					<Dialog.Root>
-						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
-						<Dialog.Popup>
-							<Dialog.Header>
-								<Dialog.Title>My Title</Dialog.Title>
-							</Dialog.Header>
-							<p>Content with a title</p>
-							<Dialog.Footer>
-								<Dialog.Action>Close</Dialog.Action>
-							</Dialog.Footer>
-						</Dialog.Popup>
-					</Dialog.Root>
-				</TestErrorBoundary>
+				<Dialog.Root>
+					<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+					<Dialog.Popup>
+						<Dialog.Header>
+							<Dialog.Title>My Title</Dialog.Title>
+						</Dialog.Header>
+						<p>Content with a title</p>
+						<Dialog.Footer>
+							<Dialog.Action>Close</Dialog.Action>
+						</Dialog.Footer>
+					</Dialog.Popup>
+				</Dialog.Root>
 			);
 
-			// Open the dialog - should not throw
 			await user.click(
 				screen.getByRole( 'button', { name: 'Open Dialog' } )
 			);
 
-			// Wait for the dialog to appear and ensure validation does not trigger errors
 			await waitFor( () => {
 				expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 			} );
-			expect( onError ).not.toHaveBeenCalled();
+
+			// Allow deferred validation to settle.
+			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			expect( errors ).toHaveLength( 0 );
+
+			cleanup();
 		} );
 
 		it( 'should throw when Dialog.Title is empty', async () => {
 			const user = userEvent.setup();
-			const onError = jest.fn();
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<TestErrorBoundary onError={ onError }>
-					<Dialog.Root>
-						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
-						<Dialog.Popup>
-							<Dialog.Header>
-								{ /* Empty title */ }
-								<Dialog.Title />
-							</Dialog.Header>
-							<p>Content with empty title</p>
-							<Dialog.Footer>
-								<Dialog.Action>Close</Dialog.Action>
-							</Dialog.Footer>
-						</Dialog.Popup>
-					</Dialog.Root>
-				</TestErrorBoundary>
+				<Dialog.Root>
+					<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+					<Dialog.Popup>
+						<Dialog.Header>
+							<Dialog.Title />
+						</Dialog.Header>
+						<p>Content with empty title</p>
+						<Dialog.Footer>
+							<Dialog.Action>Close</Dialog.Action>
+						</Dialog.Footer>
+					</Dialog.Popup>
+				</Dialog.Root>
 			);
 
-			// Open the dialog - this will trigger the error
 			await user.click(
 				screen.getByRole( 'button', { name: 'Open Dialog' } )
 			);
 
 			await waitFor( () => {
-				expect( onError ).toHaveBeenCalled();
+				expect( errors.length ).toBeGreaterThan( 0 );
 			} );
 
-			expect( onError.mock.calls[ 0 ][ 0 ] ).toBeInstanceOf( Error );
-			expect( ( onError.mock.calls[ 0 ][ 0 ] as Error ).message ).toBe(
+			expect( errors[ 0 ].message ).toBe(
 				'Dialog: <Dialog.Title> cannot be empty. ' +
 					'Provide meaningful text content for the dialog title.'
 			);
+
+			cleanup();
 		} );
 
 		it( 'should throw when Dialog.Title contains only whitespace', async () => {
 			const user = userEvent.setup();
-			const onError = jest.fn();
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<TestErrorBoundary onError={ onError }>
-					<Dialog.Root>
-						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
-						<Dialog.Popup>
-							<Dialog.Header>
-								<Dialog.Title> </Dialog.Title>
-							</Dialog.Header>
-							<p>Content with whitespace-only title</p>
-							<Dialog.Footer>
-								<Dialog.Action>Close</Dialog.Action>
-							</Dialog.Footer>
-						</Dialog.Popup>
-					</Dialog.Root>
-				</TestErrorBoundary>
+				<Dialog.Root>
+					<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+					<Dialog.Popup>
+						<Dialog.Header>
+							<Dialog.Title> </Dialog.Title>
+						</Dialog.Header>
+						<p>Content with whitespace-only title</p>
+						<Dialog.Footer>
+							<Dialog.Action>Close</Dialog.Action>
+						</Dialog.Footer>
+					</Dialog.Popup>
+				</Dialog.Root>
 			);
 
-			// Open the dialog - this will trigger the error
 			await user.click(
 				screen.getByRole( 'button', { name: 'Open Dialog' } )
 			);
 
 			await waitFor( () => {
-				expect( onError ).toHaveBeenCalled();
+				expect( errors.length ).toBeGreaterThan( 0 );
 			} );
 
-			expect( onError.mock.calls[ 0 ][ 0 ] ).toBeInstanceOf( Error );
-			expect( ( onError.mock.calls[ 0 ][ 0 ] as Error ).message ).toBe(
+			expect( errors[ 0 ].message ).toBe(
 				'Dialog: <Dialog.Title> cannot be empty. ' +
 					'Provide meaningful text content for the dialog title.'
 			);
+
+			cleanup();
 		} );
 
 		it( 'should not throw when Dialog.Title contains mixed content with text', async () => {
 			const user = userEvent.setup();
-			const onError = jest.fn();
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<TestErrorBoundary onError={ onError }>
+				<Dialog.Root>
+					<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+					<Dialog.Popup>
+						<Dialog.Header>
+							<Dialog.Title>
+								<span aria-hidden="true">🎉</span>
+								Settings
+							</Dialog.Title>
+						</Dialog.Header>
+						<p>Content with icon and text title</p>
+						<Dialog.Footer>
+							<Dialog.Action>Close</Dialog.Action>
+						</Dialog.Footer>
+					</Dialog.Popup>
+				</Dialog.Root>
+			);
+
+			await user.click(
+				screen.getByRole( 'button', { name: 'Open Dialog' } )
+			);
+
+			await waitFor( () => {
+				expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+			} );
+
+			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			expect( errors ).toHaveLength( 0 );
+
+			cleanup();
+		} );
+
+		it( 'should throw when title is removed after mount', async () => {
+			const user = userEvent.setup();
+			const { errors, cleanup } = collectUncaughtErrors();
+
+			function Test() {
+				const [ showTitle, setShowTitle ] = useState( true );
+				return (
 					<Dialog.Root>
-						<Dialog.Trigger>Open Dialog</Dialog.Trigger>
+						<Dialog.Trigger>Open</Dialog.Trigger>
 						<Dialog.Popup>
-							<Dialog.Header>
-								<Dialog.Title>
-									<span aria-hidden="true">🎉</span>
-									Settings
-								</Dialog.Title>
-							</Dialog.Header>
-							<p>Content with icon and text title</p>
-							<Dialog.Footer>
-								<Dialog.Action>Close</Dialog.Action>
-							</Dialog.Footer>
+							{ showTitle && (
+								<Dialog.Title>My Title</Dialog.Title>
+							) }
+							<button onClick={ () => setShowTitle( false ) }>
+								Remove Title
+							</button>
 						</Dialog.Popup>
 					</Dialog.Root>
-				</TestErrorBoundary>
-			);
+				);
+			}
 
-			// Open the dialog - should not throw
+			render( <Test /> );
+
+			await user.click( screen.getByRole( 'button', { name: 'Open' } ) );
+
+			await waitFor( () => {
+				expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
+			} );
+
+			// Let initial validation settle — no errors expected.
+			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			expect( errors ).toHaveLength( 0 );
+
+			// Remove the title.
 			await user.click(
-				screen.getByRole( 'button', { name: 'Open Dialog' } )
+				screen.getByRole( 'button', { name: 'Remove Title' } )
 			);
 
-			// Wait for the dialog to appear and ensure validation does not trigger errors
+			await waitFor( () => {
+				expect( errors.length ).toBeGreaterThan( 0 );
+			} );
+
+			expect( errors[ 0 ].message ).toBe(
+				'Dialog: Missing <Dialog.Title>. ' +
+					'For accessibility, every dialog requires a title. ' +
+					'If needed, the title can be visually hidden but must not be omitted.'
+			);
+
+			cleanup();
+		} );
+
+		it( 'should recover when title is added back', async () => {
+			const user = userEvent.setup();
+			const { errors, cleanup } = collectUncaughtErrors();
+
+			function Test() {
+				const [ showTitle, setShowTitle ] = useState( false );
+				return (
+					<Dialog.Root>
+						<Dialog.Trigger>Open</Dialog.Trigger>
+						<Dialog.Popup>
+							{ showTitle && (
+								<Dialog.Title>My Title</Dialog.Title>
+							) }
+							<button
+								onClick={ () => setShowTitle( ( s ) => ! s ) }
+							>
+								Toggle Title
+							</button>
+						</Dialog.Popup>
+					</Dialog.Root>
+				);
+			}
+
+			render( <Test /> );
+
+			await user.click( screen.getByRole( 'button', { name: 'Open' } ) );
+
 			await waitFor( () => {
 				expect( screen.getByRole( 'dialog' ) ).toBeInTheDocument();
 			} );
-			expect( onError ).not.toHaveBeenCalled();
+
+			// Initially no title — should error.
+			await waitFor( () => {
+				expect( errors.length ).toBeGreaterThan( 0 );
+			} );
+
+			const errorCountAfterInitial = errors.length;
+
+			// Add the title back.
+			await user.click(
+				screen.getByRole( 'button', { name: 'Toggle Title' } )
+			);
+
+			// Wait for deferred validation to settle.
+			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+
+			// No new errors should have been thrown.
+			expect( errors ).toHaveLength( errorCountAfterInitial );
+
+			cleanup();
 		} );
 	} );