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

package/src/dialog/title.tsx

@@ -1,6 +1,6 @@
 import { Dialog as _Dialog } from '@base-ui/react/dialog';
 import { useMergeRefs } from '@wordpress/compose';
-import { forwardRef, useLayoutEffect, useRef } from '@wordpress/element';
+import { forwardRef, useEffect, useRef } from '@wordpress/element';
 import { Text } from '../text';
 import { useDialogValidationContext } from './context';
 import styles from './style.module.css';
@@ -30,9 +30,11 @@ const Title = forwardRef< HTMLHeadingElement, TitleProps >(
 		const internalRef = useRef< HTMLHeadingElement >( null );
 		const mergedRef = useMergeRefs( [ internalRef, forwardedRef ] );
 
-		// Register this title with the parent Popup for validation (dev only)
-		useLayoutEffect( () => {
-			validationContext?.registerTitle( internalRef.current );
+		useEffect( () => {
+			if ( validationContext ) {
+				return validationContext.registerTitle( internalRef.current );
+			}
+			return undefined;
 		}, [ validationContext ] );
 
 		return (

package/src/empty-state/stories/index.story.tsx

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

package/src/form/input-control/stories/index.story.tsx

@@ -1,7 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useState } from '@wordpress/element';
 import { plus, reset, seen, unseen } from '@wordpress/icons';
-import { IconButton, InputControl, InputLayout, Stack } from '../../..';
+import { InputControl } from '../';
+import { IconButton } from '../../../icon-button';
+import { InputLayout } from '../../primitives/input-layout';
+import { Stack } from '../../../stack';
 import {
 	WithPrefix,
 	WithSuffixControl,

package/src/form/primitives/field/stories/index.story.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useId } from '@wordpress/element';
-import { Field } from '../../../..';
+import * as Field from '../';
 import { DETAILS_EXAMPLE } from '../../../stories/shared';
 
 const meta: Meta< typeof Field.Root > = {

package/src/form/primitives/fieldset/stories/index.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Fieldset } from '../../../..';
+import * as Fieldset from '../';
 import { DETAILS_EXAMPLE } from '../../../stories/shared';
 
 const meta: Meta< typeof Fieldset.Root > = {

package/src/form/primitives/input/stories/index.story.tsx

@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Input, InputLayout } from '../../../..';
+import { Input } from '../';
+import { InputLayout } from '../../input-layout';
 import { WithSuffixControl } from '../../input-layout/stories/index.story';
 
 const meta: Meta< typeof Input > = {

package/src/form/primitives/input-layout/stories/index.story.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import { copy } from '@wordpress/icons';
-import { IconButton, InputLayout } from '../../../..';
+import { InputLayout } from '../';
+import { IconButton } from '../../../../icon-button';
 
 const meta: Meta< typeof InputLayout > = {
 	title: 'Design System/Components/Form/Primitives/InputLayout',

package/src/form/primitives/select/stories/index.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Select } from '../../../..';
+import * as Select from '../';
 
 const meta: Meta< typeof Select.Root > = {
 	title: 'Design System/Components/Form/Primitives/Select',

package/src/link/link.tsx

@@ -20,20 +20,10 @@ export const Link = forwardRef< HTMLAnchorElement, LinkProps >( function Link(
 		openInNewTab = false,
 		render,
 		className,
-		onClick,
 		...props
 	},
 	ref
 ) {
-	const isInternalAnchor = !! props.href?.startsWith( '#' );
-
-	const handleClick = ( event: React.MouseEvent< HTMLAnchorElement > ) => {
-		if ( openInNewTab && isInternalAnchor ) {
-			event.preventDefault();
-		}
-		onClick?.( event );
-	};
-
 	const element = useRender( {
 		render,
 		defaultTagName: 'a',
@@ -46,27 +36,23 @@ export const Link = forwardRef< HTMLAnchorElement, LinkProps >( function Link(
 				variant !== 'unstyled' && styles.link,
 				variant !== 'unstyled' && styles[ `is-${ tone }` ],
 				variant === 'unstyled' && styles[ 'is-unstyled' ],
-				openInNewTab && styles[ 'has-link-icon' ],
 				className
 			),
-			onClick: handleClick,
 			target: openInNewTab ? '_blank' : undefined,
-			children: openInNewTab ? (
+			children: (
 				<>
-					<span className={ styles[ 'link-contents' ] }>
-						{ children }
-					</span>
-					<span
-						className={ styles[ 'link-icon' ] }
-						role="img"
-						aria-label={
-							/* translators: accessibility text appended to link text */
-							__( '(opens in a new tab)' )
-						}
-					/>
+					{ children }
+					{ openInNewTab && (
+						<span
+							className={ styles[ 'link-icon' ] }
+							role="img"
+							aria-label={
+								/* translators: accessibility text appended to link text */
+								__( '(opens in a new tab)' )
+							}
+						/>
+					) }
 				</>
-			) : (
-				children
 			),
 		} ),
 	} );

package/src/link/style.module.css

@@ -46,26 +46,14 @@
 	}
 
 	/* Link icon pattern — arrow rendered via ::after pseudo-element to avoid
-	 * Twemoji replacement and text-selection issues. Root <a> gets
-	 * text-decoration:none; the link-contents span re-applies it.
-	 * text-underline-offset is inherited and propagates from .link
-	 * automatically. text-decoration-thickness and text-decoration-color
-	 * are NOT inherited, so they are explicitly redeclared on
-	 * .link-contents (the latter via `inherit` to carry the neutral
-	 * tone's custom color token through). */
-	.has-link-icon {
-		text-decoration: none;
-	}
-
-	.link-contents {
-		text-decoration: underline;
-		text-decoration-color: inherit;
-		text-decoration-thickness: 0.5px;
-	}
+	 * Twemoji replacement and text-selection issues. The icon is an
+	 * inline-block so the link underline stays scoped to the text. */
 
 	.link-icon {
+		display: inline-block;
 		margin-inline-start: var(--wpds-dimension-padding-xs);
 		font-weight: var(--wpds-typography-font-weight-regular);
+		text-decoration: none;
 	}
 
 	.link-icon::after {

package/src/link/test/index.test.tsx

@@ -16,6 +16,24 @@ describe( 'Link', () => {
 		expect( ref.current ).toBeInstanceOf( HTMLAnchorElement );
 	} );
 
+	it( 'calls onClick when clicked (often used for analytics tracking)', async () => {
+		const user = userEvent.setup();
+		const onClick = jest.fn(
+			( event: React.MouseEvent< HTMLAnchorElement > ) =>
+				event.preventDefault()
+		);
+
+		render(
+			<Link href="/page" onClick={ onClick }>
+				Go to page
+			</Link>
+		);
+
+		await user.click( screen.getByRole( 'link', { name: 'Go to page' } ) );
+
+		expect( onClick ).toHaveBeenCalledTimes( 1 );
+	} );
+
 	describe( 'openInNewTab', () => {
 		it( 'sets target="_blank" when true', () => {
 			render(
@@ -47,47 +65,33 @@ describe( 'Link', () => {
 
 			expect(
 				screen.getByLabelText( '(opens in a new tab)' )
-			).toBeInTheDocument();
+			).toBeVisible();
 		} );
 
-		it( 'prevents default for internal anchor links', async () => {
-			const user = userEvent.setup();
-			const onClick = jest.fn();
-
+		it( 'keeps the link text on the anchor element', () => {
 			render(
-				<Link href="#section" openInNewTab onClick={ onClick }>
-					Jump
+				<Link href="https://example.com" openInNewTab>
+					External
 				</Link>
 			);
 
-			await user.click( screen.getByRole( 'link' ) );
-
-			expect( onClick ).toHaveBeenCalledTimes( 1 );
-			expect( onClick.mock.calls[ 0 ][ 0 ].defaultPrevented ).toBe(
-				true
+			expect( screen.getByText( 'External' ) ).toBe(
+				screen.getByRole( 'link' )
 			);
 		} );
 
-		it( 'does not prevent default for external links', async () => {
-			const user = userEvent.setup();
-			const onClick = jest.fn();
-
+		it( 'includes the new tab notice in the link name', () => {
 			render(
-				<Link
-					href="https://example.com"
-					openInNewTab
-					onClick={ onClick }
-				>
+				<Link href="https://example.com" openInNewTab>
 					External
 				</Link>
 			);
 
-			await user.click( screen.getByRole( 'link' ) );
-
-			expect( onClick ).toHaveBeenCalledTimes( 1 );
-			expect( onClick.mock.calls[ 0 ][ 0 ].defaultPrevented ).toBe(
-				false
-			);
+			expect(
+				screen.getByRole( 'link', {
+					name: 'External (opens in a new tab)',
+				} )
+			).toBeVisible();
 		} );
 	} );
 } );

package/src/link/types.ts

@@ -22,8 +22,7 @@ export interface LinkProps extends Omit< ComponentProps< 'a' >, 'target' > {
 
 	/**
 	 * Whether to open the link in a new browser tab.
-	 * When true, sets `target="_blank"`, appends a visual arrow indicator,
-	 * and prevents navigation for internal anchors (`#`-prefixed hrefs).
+	 * When true, sets `target="_blank"` and appends a visual arrow indicator.
 	 *
 	 * @default false
 	 */

package/src/notice/action-link.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import { forwardRef } from '@wordpress/element';
 import { Link } from '../link';
+import { Text } from '../text';
 import type { ActionLinkProps } from './types';
 import styles from './style.module.css';
 
@@ -8,14 +9,16 @@ import styles from './style.module.css';
  * An action link for use within Notice.Actions.
  */
 export const ActionLink = forwardRef< HTMLAnchorElement, ActionLinkProps >(
-	function NoticeActionLink( { className, ...props }, ref ) {
+	function NoticeActionLink( { className, render, ...props }, ref ) {
 		return (
-			<Link
+			<Text
 				ref={ ref }
 				className={ clsx( styles[ 'action-link' ], className ) }
 				{ ...props }
-				tone="neutral"
-				variant="default"
+				variant="body-md"
+				render={
+					<Link tone="neutral" variant="default" render={ render } />
+				}
 			/>
 		);
 	}

package/src/notice/style.module.css

@@ -64,11 +64,6 @@
 
 	.action-link {
 		flex-shrink: 0;
-		font-family: var(--wpds-typography-font-family-body);
-		font-size: var(--wpds-typography-font-size-md);
-		font-weight: var(--wpds-typography-font-weight-regular);
-		line-height: var(--wpds-typography-line-height-sm);
-		margin-block: auto;
 
 		/* Add more horizontal space when following another action link/button */
 		&:not(:first-child) {
@@ -125,6 +120,11 @@
 }
 
 @layer wp-ui-compositions {
+	/* Override `Text` margin */
+	.action-link {
+		margin-block: auto;
+	}
+
 	/* Add partial transparency to CloseIcon and outline/minimal ActionButton
 	 * for a better look over tinted backgrounds */
 	.close-icon,

package/src/popover/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 PopoverValidationContextType = {
-	registerTitle: ( element: HTMLElement | null ) => void;
+	registerTitle: ( element: HTMLElement | null ) => () => void;
 };
 
 const PopoverValidationContext = VALIDATION_ENABLED
@@ -47,16 +48,7 @@ function PopoverValidationProviderDev( {
 } ) {
 	const titleElementRef = useRef< HTMLElement | null >( null );
 
-	const registerTitle = useCallback( ( element: HTMLElement | null ) => {
-		titleElementRef.current = element;
-	}, [] );
-
-	const contextValue = useMemo(
-		() => ( { registerTitle } ),
-		[ registerTitle ]
-	);
-
-	useEffect( () => {
+	const scheduleValidation = useScheduleValidation( () => {
 		const titleElement = titleElementRef.current;
 
 		if ( ! titleElement ) {
@@ -74,7 +66,31 @@ function PopoverValidationProviderDev( {
 					'Provide meaningful text content for the popover 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 (
 		<PopoverValidationContext.Provider value={ contextValue }>

package/src/popover/popup.tsx

@@ -84,7 +84,10 @@ const Popup = forwardRef< HTMLDivElement, PopupProps >( function PopoverPopup(
 					ref={ mergedPopupRef }
 					initialFocus={ resolvedInitialFocus }
 					finalFocus={ finalFocus }
-					className={ clsx( variant !== 'unstyled' && styles.popup ) }
+					className={ clsx(
+						styles.popup,
+						variant !== 'unstyled' && styles.default
+					) }
 					{ ...props }
 				>
 					<PopoverValidationProvider>

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

@@ -2,7 +2,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import { useId, useRef, useState } from '@wordpress/element';
 import { SlotFillProvider, Slot } from '@wordpress/components';
 import { close, info } from '@wordpress/icons';
-import { Popover, VisuallyHidden } from '../..';
+import * as Popover from '../';
+import { VisuallyHidden } from '../../visually-hidden';
 import { Icon } from '../../icon';
 import { IconButton } from '../../icon-button';
 import { GenericIframe, useMeasure } from './utils';

package/src/popover/style.module.css

@@ -1,11 +1,33 @@
 @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-popover-z-index, initial);
 	}
 
-	.popup {
+	/*
+	 * Structural marker; no visual styles. Always applied to the popup so
+	 * the ThemeProvider display workaround above matches regardless of
+	 * `variant`. Visuals live in `.default`.
+	 */
+	/* stylelint-disable-next-line block-no-empty -- structural marker for the
+	 * ThemeProvider display workaround above; kept class-based (not a data
+	 * attribute) so it is defined alongside the other component classes. */
+	.popup {}
+
+	.default {
 		background-color: var(--wpds-color-bg-surface-neutral-strong);
 		padding: var(--wpds-dimension-padding-lg);
 		border-radius: var(--wpds-border-radius-md);