@wordpress/components 33.1.1-next.v.202605131006.0 → 34.0.0

package/src/input-control/input-base.tsx

@@ -23,6 +23,7 @@ import {
 	useContextSystem,
 } from '../context';
 import { useDeprecated36pxDefaultSizeProp } from '../utils/use-deprecated-props';
+import type { FlexDirection } from '../flex/types';
 
 function useUniqueId( idProp?: string ) {
 	const instanceId = useInstanceId( InputBase );
@@ -34,7 +35,7 @@ function useUniqueId( idProp?: string ) {
 // Adapter to map props for the new ui/flex component.
 function getUIFlexProps( labelPosition?: LabelPosition ) {
 	const props: {
-		direction?: string;
+		direction?: FlexDirection;
 		gap?: number;
 		justify?: string;
 		expanded?: boolean;
@@ -92,7 +93,6 @@ function InputBase(
 	}, [ __next40pxDefaultSize, size ] );
 
 	return (
-		// @ts-expect-error The `direction` prop from Flex (FlexDirection) conflicts with legacy SVGAttributes `direction` (string) that come from React intrinsic prop definitions.
 		<Root
 			{ ...restProps }
 			{ ...getUIFlexProps( labelPosition ) }

package/src/menu/README.md

@@ -120,7 +120,7 @@ make disabled elements still accessible via keyboard.
 
 ##### `render`
 
- - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React
@@ -245,7 +245,7 @@ The contents of the menu item's prefix, such as an icon.
 
 ##### `render`
 
- - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React
@@ -329,14 +329,14 @@ The radio item's name.
 
 ##### `onChange`
 
- - Type: `BivariantCallback<(event: ChangeEvent<HTMLInputElement>) => void>`
+ - Type: `BivariantCallback<(event: ChangeEvent<HTMLInputElement, Element>) => void>`
  - Required: No
 
 A function that is called when the checkbox's checked state changes.
 
 ##### `render`
 
- - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React
@@ -427,14 +427,14 @@ The checkbox menu item's name.
 
 ##### `onChange`
 
- - Type: `ChangeEventHandler<HTMLInputElement>`
+ - Type: `ChangeEventHandler<HTMLInputElement, HTMLInputElement>`
  - Required: No
 
 A function that is called when the checkbox's checked state changes.
 
 ##### `render`
 
- - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React
@@ -575,7 +575,7 @@ The contents of the menu item's prefix, such as an icon.
 
 ##### `render`
 
- - Type: `ReactElement<any, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
+ - Type: `ReactElement<unknown, string | JSXElementConstructor<any>> | RenderProp<HTMLAttributes<any> & { ref?: Ref<any>; }>`
  - Required: No
 
 Allows the component to be rendered as a different HTML element or React

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

@@ -33,7 +33,6 @@ const meta: Meta< typeof Menu > = {
 		Group: Menu.Group,
 		GroupLabel: Menu.GroupLabel,
 		Separator: Menu.Separator,
-		// @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170
 		Context: Menu.Context,
 		RadioItem: Menu.RadioItem,
 		ItemLabel: Menu.ItemLabel,

package/src/menu/test/index.tsx

@@ -156,7 +156,7 @@ describe( 'Menu', () => {
 			await waitForFocusedMenuItem( 'First item' );
 		} );
 
-		it( 'should open and focus the first item when pressing the space key on the trigger', async () => {
+		it( 'should open when pressing the space key on the trigger', async () => {
 			render(
 				<Menu>
 					<Menu.TriggerButton>Open dropdown</Menu.TriggerButton>
@@ -181,11 +181,16 @@ describe( 'Menu', () => {
 			expect( screen.queryByRole( 'menuitem' ) ).not.toBeInTheDocument();
 
 			// Keyboard-triggered clicks have `detail: 0`, which Ariakit uses to
-			// choose the initial item focus path instead of the pointer path.
+			// distinguish keyboard activation from pointer activation.
 			await press.Space( toggleButton, { detail: 0 } );
 
-			// Menu open, focus is on the first focusable item
-			await waitForFocusedMenuItem( 'First item' );
+			await waitFor( () =>
+				expect( toggleButton ).toHaveAttribute(
+					'aria-expanded',
+					'true'
+				)
+			);
+			expect( screen.getByRole( 'menu' ) ).toBeVisible();
 		} );
 
 		it( 'should close when pressing the escape key', async () => {

package/src/modal/style.scss

@@ -200,7 +200,8 @@
 	align-items: center;
 	height: $header-height + $grid-unit-10; // 72px
 	width: 100%;
-	z-index: z-index(".components-modal__header");
+	// Stack above modal content that may overlap the header.
+	z-index: 10;
 	position: absolute;
 	top: 0;
 	left: 0;

package/src/notice/README.md

@@ -17,7 +17,6 @@ Notices display at the top of the screen, below any toolbars anchored to the top
 Notices are color-coded to indicate the type of message being communicated:
 
 - **Informational** notices are **blue** by default.
-- If there is a parent `Theme` component with an `accent` color prop, informational notices will take on that color instead.
 - **Success** notices are **green.**
 - **Warning** notices are **yellow.**
 - **Error** notices are **red.**
@@ -101,7 +100,7 @@ Used to provide a custom spoken message in place of the `children` default.
 
 #### `status`: `'warning' | 'success' | 'error' | 'info'`
 
-Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue, but if there is a parent Theme component with an accent color prop, the notice will take on that color instead.
+Determines the color of the notice: `warning` (yellow), `success` (green), `error` (red), or `'info'`. By default `'info'` will be blue.
 
 - Required: No
 - Default: `info`

package/src/notice/index.tsx

@@ -9,7 +9,7 @@ import clsx from 'clsx';
 import { __ } from '@wordpress/i18n';
 import { RawHTML, useEffect, renderToString } from '@wordpress/element';
 import { speak } from '@wordpress/a11y';
-import { close } from '@wordpress/icons';
+import { closeSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -93,9 +93,9 @@ function Notice( {
 }: NoticeProps ) {
 	useSpokenMessage( spokenMessage, politeness );
 
-	const classes = clsx( className, 'components-notice', 'is-' + status, {
-		'is-dismissible': isDismissible,
-	} );
+	// Dismissibility is not a wrapper modifier; target `.components-notice__dismiss`
+	// or `.components-notice:has(.components-notice__dismiss)` from outside CSS.
+	const classes = clsx( className, 'components-notice', 'is-' + status );
 
 	if ( __unstableHTML && typeof children === 'string' ) {
 		children = <RawHTML>{ children }</RawHTML>;
@@ -109,71 +109,64 @@ function Notice( {
 	return (
 		<div className={ classes }>
 			<VisuallyHidden>{ getStatusLabel( status ) }</VisuallyHidden>
-			<div className="components-notice__content">
-				{ children }
-				{ actions.length > 0 && (
-					<div className="components-notice__actions">
-						{ actions.map(
-							(
-								{
-									className: buttonCustomClasses,
-									label,
-									isPrimary,
-									variant,
-									noDefaultClasses = false,
-									onClick,
-									url,
-									disabled,
-								}: NoticeAction &
-									// `isPrimary` is a legacy prop included for
-									// backcompat, but `variant` should be used
-									// instead.
-									Pick< DeprecatedButtonProps, 'isPrimary' >,
-								index
-							) => {
-								let computedVariant = variant;
-								if (
-									variant !== 'primary' &&
-									! noDefaultClasses
-								) {
-									computedVariant = ! url
-										? 'secondary'
-										: 'link';
-								}
-								if (
-									typeof computedVariant === 'undefined' &&
-									isPrimary
-								) {
-									computedVariant = 'primary';
-								}
-
-								return (
-									<Button
-										__next40pxDefaultSize
-										key={ index }
-										href={ url }
-										variant={ computedVariant }
-										onClick={ onClick }
-										disabled={ disabled }
-										accessibleWhenDisabled
-										className={ clsx(
-											'components-notice__action',
-											buttonCustomClasses
-										) }
-									>
-										{ label }
-									</Button>
-								);
+			<div className="components-notice__content">{ children }</div>
+			{ actions.length > 0 && (
+				<div className="components-notice__actions">
+					{ actions.map(
+						(
+							{
+								className: buttonCustomClasses,
+								label,
+								isPrimary,
+								variant,
+								noDefaultClasses = false,
+								onClick,
+								url,
+								disabled,
+							}: NoticeAction &
+								// `isPrimary` is a legacy prop included for
+								// backcompat, but `variant` should be used
+								// instead.
+								Pick< DeprecatedButtonProps, 'isPrimary' >,
+							index
+						) => {
+							let computedVariant = variant;
+							if ( variant !== 'primary' && ! noDefaultClasses ) {
+								computedVariant = ! url ? 'secondary' : 'link';
+							}
+							if (
+								typeof computedVariant === 'undefined' &&
+								isPrimary
+							) {
+								computedVariant = 'primary';
 							}
-						) }
-					</div>
-				) }
-			</div>
+
+							return (
+								<Button
+									size="compact"
+									key={ index }
+									href={ url }
+									variant={ computedVariant }
+									onClick={ onClick }
+									disabled={ disabled }
+									accessibleWhenDisabled
+									className={ clsx(
+										'components-notice__action',
+										buttonCustomClasses
+									) }
+								>
+									{ label }
+								</Button>
+							);
+						}
+					) }
+				</div>
+			) }
 			{ isDismissible && (
 				<Button
 					size="small"
 					className="components-notice__dismiss"
-					icon={ close }
+					icon={ closeSmall }
 					label={ __( 'Close' ) }
 					onClick={ onDismissNotice }
 				/>

package/src/notice/style.scss

@@ -1,67 +1,77 @@
-@use "sass:color";
-@use "@wordpress/base-styles/colors" as *;
 @use "@wordpress/base-styles/variables" as *;
-@use "../utils/theme-variables" as *;
 
 .components-notice {
-	display: flex;
-	font-family: $default-font;
-	font-size: $default-font-size;
-	background-color: $white;
-	border-left: 4px solid $components-color-accent;
-	padding: 8px 12px;
-	align-items: center;
-	color: $gray-900;
-
-	&.is-dismissible {
-		position: relative;
+	--wp-components-notice-background-color: var(--wpds-color-bg-surface-info-weak);
+	--wp-components-notice-border-color: var(--wpds-color-stroke-surface-info);
+	--wp-components-notice-text-color: var(--wpds-color-fg-content-info);
 
-		.components-notice__content {
-			margin-right: #{ $button-size-small + $border-width };
-		}
-	}
+	box-sizing: border-box;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	align-items: start;
+	padding: var(--wpds-dimension-padding-md);
+	border: var(--wpds-border-width-xs) solid var(--wp-components-notice-border-color);
+	border-radius: var(--wpds-border-radius-lg);
+	background-color: var(--wp-components-notice-background-color);
+	color: var(--wp-components-notice-text-color);
+	font-family: var(--wpds-typography-font-family-body);
+	font-size: var(--wpds-typography-font-size-md);
+	line-height: var(--wpds-typography-line-height-sm);
 
 	&.is-success {
-		border-left-color: $alert-green;
-		background-color: color.adjust($alert-green, $lightness: +45%);
+		--wp-components-notice-background-color: var(--wpds-color-bg-surface-success-weak);
+		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-success);
+		--wp-components-notice-text-color: var(--wpds-color-fg-content-success);
 	}
 
 	&.is-warning {
-		border-left-color: $alert-yellow;
-		background-color: color.adjust($alert-yellow, $lightness: +35%);
+		--wp-components-notice-background-color: var(--wpds-color-bg-surface-warning-weak);
+		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-warning);
+		--wp-components-notice-text-color: var(--wpds-color-fg-content-warning);
 	}
 
 	&.is-error {
-		border-left-color: $alert-red;
-		background-color: color.adjust($alert-red, $lightness: +35%);
+		--wp-components-notice-background-color: var(--wpds-color-bg-surface-error-weak);
+		--wp-components-notice-border-color: var(--wpds-color-stroke-surface-error);
+		--wp-components-notice-text-color: var(--wpds-color-fg-content-error);
 	}
 }
 
 .components-notice__content {
-	flex-grow: 1;
-	margin-top: $grid-unit-05;
-	margin-bottom: $grid-unit-05;
+	grid-column: 1;
+	grid-row: 1;
+
+	// Centers single-line copy with the dismiss row when it is present. The same
+	// padding is kept when the notice is not dismissible so block height stays
+	// consistent across variants, matching `@wordpress/ui` Notice (`.title` /
+	// `.description` always use `--text-vertical-padding` whether or not `CloseIcon`
+	// is rendered).
+	// TODO: Replace `$button-size-small` with a WPDS size token once size tokens
+	// land in `@wordpress/theme`.
+	padding-block: calc((#{$button-size-small} - 1lh) / 2);
 }
 
 .components-notice__actions {
+	grid-column: 1;
+	grid-row: 2;
+
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
-	gap: $grid-unit-15;
-	margin-top: $grid-unit-15;
+	gap: var(--wpds-dimension-gap-md);
+	margin-top: var(--wpds-dimension-gap-sm);
 }
 
 .components-notice__dismiss {
-	color: $gray-700;
-
-	// Place the dismiss button at the top of the container, even when text wraps onto two lines.
-	align-self: flex-start;
-	flex-shrink: 0;
+	grid-column: 2;
+	grid-row: 1;
+	color: var(--wpds-color-fg-interactive-neutral);
+	margin-inline-start: var(--wpds-dimension-gap-xs);
 
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):hover,
 	&:not(:disabled):not([aria-disabled="true"]):not(.is-secondary):active,
 	&:not(:disabled):not([aria-disabled="true"]):focus {
-		color: $gray-900;
+		color: var(--wpds-color-fg-interactive-neutral-active);
 		background-color: transparent;
 	}
 
@@ -71,13 +81,11 @@
 }
 
 .components-notice-list {
+	display: flex;
+	flex-direction: column;
+	gap: var(--wpds-dimension-gap-md);
+
 	// The notice should never be wider than the viewport, or the close button might be hidden. Especially relevant at high zoom levels. Related to https://core.trac.wordpress.org/ticket/47603#ticket.
 	max-width: 100vw;
 	box-sizing: border-box;
-
-	.components-notice__content {
-		margin-top: $grid-unit-15;
-		margin-bottom: $grid-unit-15;
-		line-height: 2;
-	}
 }

package/src/notice/test/__snapshots__/index.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Notice should match snapshot 1`] = `
 <div>
   <div
-    class="components-notice is-success is-dismissible"
+    class="components-notice is-success"
   >
     <div
       class="components-visually-hidden css-1ragr82-PolymorphicDiv emotion-0"
@@ -18,28 +18,28 @@ exports[`Notice should match snapshot 1`] = `
       class="components-notice__content"
     >
       Example
-      <div
-        class="components-notice__actions"
+    </div>
+    <div
+      class="components-notice__actions"
+    >
+      <a
+        class="components-button components-notice__action is-compact is-link"
+        href="https://example.com"
+      >
+        More information
+      </a>
+      <button
+        class="components-button components-notice__action is-secondary is-compact"
+        type="button"
+      >
+        Cancel
+      </button>
+      <button
+        class="components-button components-notice__action is-primary is-compact"
+        type="button"
       >
-        <a
-          class="components-button components-notice__action is-next-40px-default-size is-link"
-          href="https://example.com"
-        >
-          More information
-        </a>
-        <button
-          class="components-button components-notice__action is-next-40px-default-size is-secondary"
-          type="button"
-        >
-          Cancel
-        </button>
-        <button
-          class="components-button components-notice__action is-next-40px-default-size is-primary"
-          type="button"
-        >
-          Submit
-        </button>
-      </div>
+        Submit
+      </button>
     </div>
     <button
       aria-label="Close"
@@ -55,7 +55,7 @@ exports[`Notice should match snapshot 1`] = `
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
-          d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"
+          d="M12 13.06l3.712 3.713 1.061-1.06L13.061 12l3.712-3.712-1.06-1.06L12 10.938 8.288 7.227l-1.061 1.06L10.939 12l-3.712 3.712 1.06 1.061L12 13.061z"
         />
       </svg>
     </button>

package/src/notice/test/index.tsx

@@ -43,14 +43,14 @@ describe( 'Notice', () => {
 		expect( container ).toMatchSnapshot();
 	} );
 
-	it( 'should not have is-dismissible class when isDismissible prop is false', () => {
-		const { container } = render(
+	it( 'should not render a dismiss control when isDismissible prop is false', () => {
+		render(
 			<Notice isDismissible={ false }>I cannot be dismissed!</Notice>
 		);
-		const wrapper = getNoticeWrapper( container );
 
-		expect( wrapper ).toHaveClass( 'components-notice' );
-		expect( wrapper ).not.toHaveClass( 'is-dismissible' );
+		expect(
+			screen.queryByRole( 'button', { name: 'Close' } )
+		).not.toBeInTheDocument();
 	} );
 
 	it( 'should default to info status', () => {

package/src/notice/types.ts

@@ -53,8 +53,7 @@ export type NoticeProps = {
 	/**
 	 * Determines the color of the notice: `warning` (yellow),
 	 * `success` (green), `error` (red), or `'info'`.
-	 * By default `'info'` will be blue, but if there is a parent Theme component
-	 * with an accent color prop, the notice will take on that color instead.
+	 * By default `'info'` will be blue.
 	 *
 	 * @default 'info'
 	 */

package/src/popover/index.tsx

@@ -146,6 +146,11 @@ const UnforwardedPopover = (
 		getAnchorRect,
 		isAlternate,
 
+		// `onKeyDown` is forwarded to `useDialog` so the consumer's handler
+		// is merged with the close-on-Escape one (rather than being silently
+		// overridden by the spread of `dialogProps` further below).
+		onKeyDown,
+
 		// Rest
 		...contentProps
 	} = useContextSystem( props, 'Popover' );
@@ -194,7 +199,7 @@ const UnforwardedPopover = (
 		} );
 	}
 
-	const arrowRef = useRef< HTMLElement | null >( null );
+	const arrowRef = useRef< HTMLElement >( null );
 
 	const [ fallbackReferenceElement, setFallbackReferenceElement ] =
 		useState< HTMLSpanElement | null >( null );
@@ -279,6 +284,28 @@ const UnforwardedPopover = (
 				) {
 					return;
 				}
+				// Treat focus moves involving portaled descendants as
+				// internal: either the next focus target is in the
+				// `@wordpress/ui` compat overlay slot, or focus is back
+				// inside this popover by the time we evaluate (e.g. when
+				// a portaled overlay is dismissed and synchronously
+				// restores focus to its trigger).
+				// See https://github.com/WordPress/gutenberg/issues/78406.
+				const relatedTarget =
+					'relatedTarget' in event ? event.relatedTarget : null;
+				if (
+					relatedTarget instanceof Element &&
+					relatedTarget.closest( '[data-wp-compat-overlay-slot]' )
+				) {
+					return;
+				}
+				if (
+					floatingElement &&
+					ownerDocument?.activeElement instanceof Element &&
+					floatingElement.contains( ownerDocument.activeElement )
+				) {
+					return;
+				}
 				// Call onFocusOutside if defined or call onClose.
 				if ( onFocusOutside ) {
 					onFocusOutside( event );
@@ -295,6 +322,7 @@ const UnforwardedPopover = (
 	const [ dialogRef, dialogProps ] = useDialog( {
 		constrainTabbing,
 		focusOnMount,
+		onKeyDown,
 		__unstableOnClose: onDialogClose,
 		// @ts-expect-error The __unstableOnClose property needs to be deprecated first (see https://github.com/WordPress/gutenberg/pull/27675)
 		onClose: onDialogClose,