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

package/src/popover/test/index.test.tsx

@@ -1,8 +1,21 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Component, createRef, useState } from '@wordpress/element';
+import { createRef, useState } from '@wordpress/element';
 import * as Popover from '../index';
 
+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( 'Popover', () => {
 	describe( 'forwards ref', () => {
 		it( 'should forward ref on Trigger', () => {
@@ -613,84 +626,87 @@ describe( 'Popover', () => {
 	} );
 
 	describe( 'title validation', () => {
+		// 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( () => {
+			// eslint-disable-next-line no-console
+			originalConsoleError = console.error;
+			// eslint-disable-next-line no-console
+			console.error = jest.fn();
+		} );
+
+		afterEach( () => {
+			// eslint-disable-next-line no-console
+			console.error = originalConsoleError;
+		} );
+
 		it( 'should throw when Popover.Title is missing', async () => {
 			const user = userEvent.setup();
-			const onError = jest.fn();
-
-			// Suppress console.error from React error boundary
-			const spy = jest
-				.spyOn( console, 'error' )
-				.mockImplementation( () => {} );
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<ErrorBoundary onError={ onError }>
-					<Popover.Root>
-						<Popover.Trigger>Open</Popover.Trigger>
-						<Popover.Popup>No title here</Popover.Popup>
-					</Popover.Root>
-				</ErrorBoundary>
+				<Popover.Root>
+					<Popover.Trigger>Open</Popover.Trigger>
+					<Popover.Popup>No title here</Popover.Popup>
+				</Popover.Root>
 			);
 
 			await user.click( screen.getByRole( 'button', { name: 'Open' } ) );
 
 			await waitFor( () => {
-				expect( onError ).toHaveBeenCalledWith(
-					expect.objectContaining( {
-						message: expect.stringContaining(
-							'Missing <Popover.Title>'
-						),
-					} )
-				);
+				expect( errors.length ).toBeGreaterThan( 0 );
 			} );
 
-			spy.mockRestore();
+			expect( errors[ 0 ].message ).toBe(
+				'Popover: Missing <Popover.Title>. ' +
+					'For accessibility, every popover requires a title. ' +
+					'If needed, the title can be visually hidden but must not be omitted.'
+			);
+
+			cleanup();
 		} );
 
 		it( 'should throw when Popover.Title is empty', async () => {
 			const user = userEvent.setup();
-			const onError = jest.fn();
-
-			const spy = jest
-				.spyOn( console, 'error' )
-				.mockImplementation( () => {} );
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<ErrorBoundary onError={ onError }>
-					<Popover.Root>
-						<Popover.Trigger>Open</Popover.Trigger>
-						<Popover.Popup>
-							<Popover.Title />
-						</Popover.Popup>
-					</Popover.Root>
-				</ErrorBoundary>
+				<Popover.Root>
+					<Popover.Trigger>Open</Popover.Trigger>
+					<Popover.Popup>
+						<Popover.Title />
+					</Popover.Popup>
+				</Popover.Root>
 			);
 
 			await user.click( screen.getByRole( 'button', { name: 'Open' } ) );
 
 			await waitFor( () => {
-				expect( onError ).toHaveBeenCalledWith(
-					expect.objectContaining( {
-						message: expect.stringContaining( 'cannot be empty' ),
-					} )
-				);
+				expect( errors.length ).toBeGreaterThan( 0 );
 			} );
 
-			spy.mockRestore();
+			expect( errors[ 0 ].message ).toBe(
+				'Popover: <Popover.Title> cannot be empty. ' +
+					'Provide meaningful text content for the popover title.'
+			);
+
+			cleanup();
 		} );
 
 		it( 'should not throw when Popover.Title is present', async () => {
 			const user = userEvent.setup();
-			const onError = jest.fn();
+			const { errors, cleanup } = collectUncaughtErrors();
 
 			render(
-				<ErrorBoundary onError={ onError }>
-					<Popover.Root>
-						<Popover.Trigger>Open</Popover.Trigger>
-						<Popover.Popup>
-							<Popover.Title>Valid Title</Popover.Title>
-						</Popover.Popup>
-					</Popover.Root>
-				</ErrorBoundary>
+				<Popover.Root>
+					<Popover.Trigger>Open</Popover.Trigger>
+					<Popover.Popup>
+						<Popover.Title>Valid Title</Popover.Title>
+					</Popover.Popup>
+				</Popover.Root>
 			);
 
 			await user.click( screen.getByRole( 'button', { name: 'Open' } ) );
@@ -699,29 +715,89 @@ describe( 'Popover', () => {
 				expect( screen.getByText( 'Valid Title' ) ).toBeVisible();
 			} );
 
-			expect( onError ).not.toHaveBeenCalled();
+			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			expect( errors ).toHaveLength( 0 );
+
+			cleanup();
 		} );
-	} );
-} );
 
-class ErrorBoundary extends Component<
-	{ children: React.ReactNode; onError: ( error: Error ) => void },
-	{ hasError: boolean }
-> {
-	state = { hasError: false };
+		it( 'should throw when title is removed after mount', async () => {
+			const { errors, cleanup } = collectUncaughtErrors();
 
-	static getDerivedStateFromError() {
-		return { hasError: true };
-	}
+			const ui = ( showTitle: boolean ) => (
+				<Popover.Root defaultOpen>
+					<Popover.Trigger>Open</Popover.Trigger>
+					<Popover.Popup>
+						{ showTitle && <Popover.Title>My Title</Popover.Title> }
+						<p>Content</p>
+					</Popover.Popup>
+				</Popover.Root>
+			);
 
-	componentDidCatch( error: Error ) {
-		this.props.onError( error );
-	}
+			const { rerender } = render( ui( true ) );
 
-	render() {
-		if ( this.state.hasError ) {
-			return null;
-		}
-		return this.props.children;
-	}
-}
+			// Wait for the popover to render.
+			await waitFor( () => {
+				expect( screen.getByText( 'Content' ) ).toBeInTheDocument();
+			} );
+
+			// Let initial validation settle — no errors expected.
+			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			expect( errors ).toHaveLength( 0 );
+
+			// Remove the title via rerender.
+			rerender( ui( false ) );
+
+			await waitFor( () => {
+				expect( errors.length ).toBeGreaterThan( 0 );
+			} );
+
+			expect( errors[ 0 ].message ).toBe(
+				'Popover: Missing <Popover.Title>. ' +
+					'For accessibility, every popover 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 { errors, cleanup } = collectUncaughtErrors();
+
+			const ui = ( showTitle: boolean ) => (
+				<Popover.Root defaultOpen>
+					<Popover.Trigger>Open</Popover.Trigger>
+					<Popover.Popup>
+						{ showTitle && <Popover.Title>My Title</Popover.Title> }
+						<p>Content</p>
+					</Popover.Popup>
+				</Popover.Root>
+			);
+
+			const { rerender } = render( ui( false ) );
+
+			// Wait for the popover to render.
+			await waitFor( () => {
+				expect( screen.getByText( 'Content' ) ).toBeInTheDocument();
+			} );
+
+			// Initially no title — should error.
+			await waitFor( () => {
+				expect( errors.length ).toBeGreaterThan( 0 );
+			} );
+
+			const errorCountAfterInitial = errors.length;
+
+			// Add the title back via rerender.
+			rerender( ui( true ) );
+
+			// 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();
+		} );
+	} );
+} );

package/src/popover/title.tsx

@@ -1,6 +1,6 @@
 import { Popover as _Popover } from '@base-ui/react/popover';
 import { useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';
+import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { Text } from '../text';
 import { usePopoverValidationContext } from './context';
 import type { TitleProps } from './types';
@@ -27,8 +27,11 @@ const Title = forwardRef< HTMLHeadingElement, TitleProps >(
 		const internalRef = useRef< HTMLHeadingElement >( null );
 		const mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );
 
-		useLayoutEffect( () => {
-			validationContext?.registerTitle( internalRef.current );
+		useEffect( () => {
+			if ( validationContext ) {
+				return validationContext.registerTitle( internalRef.current );
+			}
+			return undefined;
 		}, [ validationContext ] );
 
 		return (

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

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Stack } from '../index';
 
 const meta: Meta< typeof Stack > = {
+	tags: [ 'manifest' ],
 	title: 'Design System/Components/Stack',
 	component: Stack,
 };

package/src/tabs/context.tsx

@@ -2,10 +2,11 @@ import {
 	createContext,
 	useContext,
 	useCallback,
+	useEffect,
 	useMemo,
 	useRef,
-	useEffect,
 } from '@wordpress/element';
+import { useScheduleValidation } from '../utils/use-schedule-validation';
 
 type TabsValidationContextType = {
 	registerTab: () => () => void;
@@ -77,33 +78,20 @@ function TabsValidationProviderDev( {
 } ) {
 	const tabCountRef = useRef( 0 );
 	const panelCountRef = useRef( 0 );
-	const validationScheduledRef = useRef< ReturnType<
-		typeof setTimeout
-	> | null >( null );
 
-	const scheduleValidation = useCallback( () => {
-		if ( validationScheduledRef.current ) {
-			clearTimeout( validationScheduledRef.current );
+	const scheduleValidation = useScheduleValidation( () => {
+		const tabCount = tabCountRef.current;
+		const panelCount = panelCountRef.current;
+
+		if ( tabCount !== panelCount ) {
+			throw new Error(
+				`Tabs: Tab/Panel count mismatch (${ tabCount } Tabs, ${ panelCount } Panels). ` +
+					`Each Tab must be associated with exactly one Panel. ` +
+					`Mismatched or missing associations can break screen reader navigation ` +
+					`and violate WAI-ARIA Tabs pattern requirements.`
+			);
 		}
-
-		// Schedule validation for the next tick to allow all
-		// registrations/unregistrations to complete.
-		validationScheduledRef.current = setTimeout( () => {
-			const tabCount = tabCountRef.current;
-			const panelCount = panelCountRef.current;
-
-			if ( tabCount !== panelCount ) {
-				throw new Error(
-					`Tabs: Tab/Panel count mismatch (${ tabCount } Tabs, ${ panelCount } Panels). ` +
-						`Each Tab must be associated with exactly one Panel. ` +
-						`Mismatched or missing associations can break screen reader navigation ` +
-						`and violate WAI-ARIA Tabs pattern requirements.`
-				);
-			}
-
-			validationScheduledRef.current = null;
-		}, 0 );
-	}, [] );
+	} );
 
 	const registerTab = useCallback( () => {
 		tabCountRef.current += 1;
@@ -125,14 +113,6 @@ function TabsValidationProviderDev( {
 		};
 	}, [ scheduleValidation ] );
 
-	useEffect( () => {
-		return () => {
-			if ( validationScheduledRef.current ) {
-				clearTimeout( validationScheduledRef.current );
-			}
-		};
-	}, [] );
-
 	const contextValue = useMemo(
 		() => ( {
 			registerTab,

package/src/tabs/panel.tsx

@@ -2,7 +2,8 @@ import { forwardRef } from '@wordpress/element';
 import clsx from 'clsx';
 import { Tabs as _Tabs } from '@base-ui/react/tabs';
 import { useRegisterPanel } from './context';
-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 type { TabPanelProps } from './types';
 
 /**
@@ -18,7 +19,11 @@ export const Panel = forwardRef< HTMLDivElement, TabPanelProps >(
 		return (
 			<_Tabs.Panel
 				ref={ forwardedRef }
-				className={ clsx( styles.tabpanel, className ) }
+				className={ clsx(
+					defenseStyles.div,
+					focusStyles[ 'outset-ring--focus-visible' ],
+					className
+				) }
 				{ ...otherProps }
 			/>
 		);

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

@@ -1,7 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState, cloneElement } from '@wordpress/element';
 import { link, more, wordpress } from '@wordpress/icons';
-import { Tabs, Tooltip } from '../..';
+import * as Tabs from '../';
+import * as Tooltip from '../../tooltip';
 
 const meta: Meta< typeof Tabs.Root > = {
 	title: 'Design System/Components/Tabs',

package/src/tabs/style.module.css

@@ -249,21 +249,4 @@
 			rotate: 180deg;
 		}
 	}
-
-	.tabpanel {
-		&:focus {
-			box-shadow: none;
-			outline: none;
-		}
-
-		&:focus-visible {
-			box-shadow:
-				0 0 0 var(--wpds-border-width-focus)
-				var(--wpds-color-stroke-focus-brand);
-
-			/* Windows high contrast mode. */
-			outline: 2px solid transparent;
-			outline-offset: 0;
-		}
-	}
 }

package/src/tabs/test/index.test.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable jest/no-conditional-expect */
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { DirectionProvider } from '@base-ui/react/direction-provider';
 import { useEffect, useState, createRef } from '@wordpress/element';
@@ -2344,7 +2344,9 @@ describe( 'Tabs', () => {
 			await waitForComponentToBeInitializedWithSelectedTab( 'One' );
 
 			// Wait a bit to ensure validation has run
-			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			await act(
+				() => new Promise( ( resolve ) => setTimeout( resolve, 50 ) )
+			);
 
 			expect( errors ).toHaveLength( 0 );
 
@@ -2391,7 +2393,9 @@ describe( 'Tabs', () => {
 			await waitForComponentToBeInitializedWithSelectedTab( 'One' );
 
 			// Wait for validation
-			await new Promise( ( resolve ) => setTimeout( resolve, 50 ) );
+			await act(
+				() => new Promise( ( resolve ) => setTimeout( resolve, 50 ) )
+			);
 
 			// No errors since counts match
 			expect( errors ).toHaveLength( 0 );

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

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

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

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { formatBold, formatItalic } from '@wordpress/icons';
-import { Icon, Tooltip } from '../..';
+import { Icon } from '../../icon';
+import * as Tooltip from '../';
 
 const meta: Meta< typeof Tooltip.Root > = {
 	title: 'Design System/Components/Tooltip',

package/src/tooltip/stories/usage-guidelines.story.tsx

@@ -5,7 +5,11 @@ import {
 	formatUnderline,
 	info,
 } from '@wordpress/icons';
-import { Icon, IconButton, Popover, Tooltip, VisuallyHidden } from '../..';
+import * as Tooltip from '../';
+import { Icon } from '../../icon';
+import { IconButton } from '../../icon-button';
+import * as Popover from '../../popover';
+import { VisuallyHidden } from '../../visually-hidden';
 
 const meta: Meta = {
 	title: 'Design System/Components/Tooltip/Usage Guidelines',

package/src/tooltip/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 {
 	.positioner {
 		z-index: var(--wp-ui-tooltip-z-index, initial);

package/src/utils/css/item-popup.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-utilities {
 	.popup {
 		composes: dropdown-motion from "./dropdown-motion.module.css";

package/src/utils/use-schedule-validation.ts

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useRef } from '@wordpress/element';
+
+/**
+ * Dev-only hook that returns a stable `scheduleValidation` function.
+ *
+ * Each call debounces to `setTimeout(…, 0)` so that rapid
+ * register / unregister cycles (e.g. React strict-mode double-mount)
+ * settle before the check runs. The timer is cleaned up on unmount,
+ * and calls after unmount are silently ignored.
+ *
+ * @param validate Callback that performs the actual validation.
+ *                 Stored in a ref — safe to pass an unstable closure.
+ */
+export function useScheduleValidation( validate: () => void ) {
+	const validateRef = useRef( validate );
+	validateRef.current = validate;
+
+	const timerRef = useRef< ReturnType< typeof setTimeout > | null >( null );
+	const unmountedRef = useRef( false );
+
+	const scheduleValidation = useCallback( () => {
+		if ( unmountedRef.current ) {
+			return;
+		}
+		if ( timerRef.current ) {
+			clearTimeout( timerRef.current );
+		}
+		timerRef.current = setTimeout( () => {
+			validateRef.current();
+			timerRef.current = null;
+		}, 0 );
+	}, [] );
+
+	useEffect( () => {
+		unmountedRef.current = false;
+		return () => {
+			unmountedRef.current = true;
+			if ( timerRef.current ) {
+				clearTimeout( timerRef.current );
+			}
+		};
+	}, [] );
+
+	return scheduleValidation;
+}

package/build/types/css-modules.d.cjs

@@ -1,2 +0,0 @@
-"use strict";
-//# sourceMappingURL=css-modules.d.cjs.map

package/build/types/css-modules.d.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/build/types/react.d.cjs

@@ -1,5 +0,0 @@
-"use strict";
-
-// packages/ui/src/types/react.d.ts
-var import_react = require("react");
-//# sourceMappingURL=react.d.cjs.map

package/build/types/react.d.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/types/react.d.ts"],
-  "sourcesContent": ["import 'react';\n\ndeclare module 'react' {\n\tinterface CSSProperties {\n\t\t[ key: `--${ string }` ]: string | number | undefined;\n\t}\n}\n"],
-  "mappings": ";;;AAAA,mBAAO;",
-  "names": []
-}

package/build-module/types/css-modules.d.mjs

@@ -1 +0,0 @@
-//# sourceMappingURL=css-modules.d.mjs.map

package/build-module/types/css-modules.d.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
-}

package/build-module/types/react.d.mjs

@@ -1,3 +0,0 @@
-// packages/ui/src/types/react.d.ts
-import "react";
-//# sourceMappingURL=react.d.mjs.map

package/build-module/types/react.d.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/types/react.d.ts"],
-  "sourcesContent": ["import 'react';\n\ndeclare module 'react' {\n\tinterface CSSProperties {\n\t\t[ key: `--${ string }` ]: string | number | undefined;\n\t}\n}\n"],
-  "mappings": ";AAAA,OAAO;",
-  "names": []
-}

package/src/types/css-modules.d.ts

@@ -1,4 +0,0 @@
-declare module '*.module.css' {
-	const classes: { [ key: string ]: string };
-	export default classes;
-}

package/src/types/react.d.ts

@@ -1,7 +0,0 @@
-import 'react';
-
-declare module 'react' {
-	interface CSSProperties {
-		[ key: `--${ string }` ]: string | number | undefined;
-	}
-}