@wordpress/ui 0.9.1-next.v.202603102151.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/ui",
-	"version": "0.9.1-next.v.202603102151.0+59e17f9ec",
+	"version": "0.10.0",
 	"description": "Themeable React UI components for the WordPress Design System.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -43,25 +43,26 @@
 	"types": "build-types",
 	"sideEffects": false,
 	"dependencies": {
-		"@base-ui/react": "^1.2.0",
-		"@wordpress/a11y": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/compose": "^7.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/element": "^6.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/i18n": "^6.14.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/icons": "^12.0.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/keycodes": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/primitives": "^4.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/private-apis": "^1.41.1-next.v.202603102151.0+59e17f9ec",
-		"@wordpress/theme": "^0.8.1-next.v.202603102151.0+59e17f9ec",
-		"clsx": "^2.1.1"
+		"@base-ui/react": "^1.3.0",
+		"@wordpress/a11y": "^4.43.0",
+		"@wordpress/compose": "^7.43.0",
+		"@wordpress/element": "^6.43.0",
+		"@wordpress/i18n": "^6.16.0",
+		"@wordpress/icons": "^12.1.0",
+		"@wordpress/keycodes": "^4.43.0",
+		"@wordpress/primitives": "^4.43.0",
+		"@wordpress/private-apis": "^1.43.0",
+		"@wordpress/theme": "^0.10.0",
+		"clsx": "^2.1.1",
+		"tabbable": "^6.4.0"
 	},
 	"devDependencies": {
-		"@storybook/addon-docs": "^10.1.11",
-		"@storybook/react-vite": "^10.1.11",
+		"@storybook/addon-docs": "^10.2.8",
+		"@storybook/react-vite": "^10.2.8",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@types/jest": "^29.5.14",
 		"@types/node": "^20.17.10",
-		"storybook": "^10.1.11"
+		"storybook": "^10.2.8"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -70,5 +71,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "86db21e727d89e8f0dbba9300d2f97fd22b08693"
+	"gitHead": "2cea90674d11aa521ec3f71652fb3a6a4c383969"
 }

package/src/alert-dialog/context.tsx

@@ -0,0 +1,14 @@
+import { createContext } from '@wordpress/element';
+import type { RootProps } from './types';
+
+type Intent = NonNullable< RootProps[ 'intent' ] >;
+
+interface AlertDialogContextValue {
+	intent: Intent;
+}
+
+const AlertDialogContext = createContext< AlertDialogContextValue >( {
+	intent: 'default',
+} );
+
+export { AlertDialogContext };

package/src/alert-dialog/index.ts

@@ -0,0 +1,3 @@
+export { Root } from './root';
+export { Trigger } from './trigger';
+export { Popup } from './popup';

package/src/alert-dialog/popup.tsx

@@ -0,0 +1,58 @@
+import { forwardRef, useContext } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { Button } from '../button';
+import * as Dialog from '../dialog';
+import { AlertDialogContext } from './context';
+import styles from './style.module.css';
+import type { PopupProps } from './types';
+
+const Popup = forwardRef< HTMLDivElement, PopupProps >(
+	function AlertDialogPopup(
+		{
+			title,
+			children,
+			onConfirm,
+			confirmButtonText = __( 'OK' ),
+			cancelButtonText = __( 'Cancel' ),
+			loading,
+		},
+		ref
+	) {
+		const { intent } = useContext( AlertDialogContext );
+
+		// When `loading` is provided, the consumer controls when the dialog
+		// closes (async flow). Use a plain Button so clicking confirm doesn't
+		// auto-close — the consumer sets `open={false}` after their operation.
+		const ConfirmButton = loading !== undefined ? Button : Dialog.Action;
+
+		return (
+			<Dialog.Popup ref={ ref }>
+				<Dialog.Header>
+					<Dialog.Title>{ title }</Dialog.Title>
+				</Dialog.Header>
+				{ children }
+				<Dialog.Footer>
+					<Dialog.Action
+						variant="minimal"
+						disabled={ loading || undefined }
+					>
+						{ cancelButtonText }
+					</Dialog.Action>
+					<ConfirmButton
+						className={
+							intent === 'irreversible'
+								? styles[ 'irreversible-action' ]
+								: undefined
+						}
+						onClick={ onConfirm }
+						loading={ loading }
+					>
+						{ confirmButtonText }
+					</ConfirmButton>
+				</Dialog.Footer>
+			</Dialog.Popup>
+		);
+	}
+);
+
+export { Popup };

package/src/alert-dialog/root.tsx

@@ -0,0 +1,48 @@
+import { AlertDialog as _AlertDialog } from '@base-ui/react/alert-dialog';
+import { useMemo } from '@wordpress/element';
+import { AlertDialogContext } from './context';
+import type { RootProps } from './types';
+
+/**
+ * A dialog that requires a user response to proceed.
+ *
+ * Use `AlertDialog.Trigger` to render a button that opens the dialog.
+ * Use `AlertDialog.Popup` to render the dialog content.
+ * The `AlertDialog.Trigger` is optional — the dialog can also be controlled
+ * via `open` / `onOpenChange` props.
+ *
+ * ## Use cases
+ *
+ * - **Default intent**: Standard confirmation dialog for reversible actions.
+ * - **Irreversible intent**: Confirmation dialog for irreversible actions that
+ *   cannot be undone. The confirm button uses error/danger coloring.
+ *
+ * For use cases outside the standard confirm/cancel pattern, use the lower-level
+ * `Dialog` component directly.
+ *
+ * See the [Destructive Actions guidelines](?path=/docs/design-system-patterns-destructive-actions--docs)
+ * for more details on when to use each pattern.
+ */
+function Root( {
+	intent = 'default',
+	children,
+	open,
+	onOpenChange,
+	defaultOpen,
+}: RootProps ) {
+	const contextValue = useMemo( () => ( { intent } ), [ intent ] );
+
+	return (
+		<_AlertDialog.Root
+			open={ open }
+			onOpenChange={ onOpenChange }
+			defaultOpen={ defaultOpen }
+		>
+			<AlertDialogContext.Provider value={ contextValue }>
+				{ children }
+			</AlertDialogContext.Provider>
+		</_AlertDialog.Root>
+	);
+}
+
+export { Root };

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

@@ -0,0 +1,254 @@
+import { Menu } from '@base-ui/react/menu';
+import { useState } from '@wordpress/element';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { action } from 'storybook/actions';
+import { fn } from 'storybook/test';
+
+import { AlertDialog } from '../..';
+
+const meta: Meta< typeof AlertDialog.Root > = {
+	title: 'Design System/Components/AlertDialog',
+	component: AlertDialog.Root,
+	subcomponents: {
+		'AlertDialog.Trigger': AlertDialog.Trigger,
+		'AlertDialog.Popup': AlertDialog.Popup,
+	},
+	argTypes: {
+		onOpenChange: { action: fn() },
+	},
+};
+export default meta;
+
+type Story = StoryObj< typeof AlertDialog.Root >;
+
+/**
+ * Standard confirmation dialog for reversible actions. The dialog can be
+ * dismissed via Escape key or the cancel/confirm buttons. Backdrop click
+ * is blocked.
+ */
+export const Default: Story = {
+	args: {
+		children: (
+			<>
+				<AlertDialog.Trigger>Move to trash</AlertDialog.Trigger>
+				<AlertDialog.Popup
+					title="Move to trash?"
+					onConfirm={ action( 'onConfirm' ) }
+				>
+					This post will be moved to trash. You can restore it later.
+				</AlertDialog.Popup>
+			</>
+		),
+	},
+};
+
+/**
+ * Confirmation dialog for irreversible actions that cannot be undone.
+ * The confirm button uses error/danger coloring.
+ */
+export const Irreversible: Story = {
+	args: {
+		intent: 'irreversible',
+		children: (
+			<>
+				<AlertDialog.Trigger>Delete permanently</AlertDialog.Trigger>
+				<AlertDialog.Popup
+					title="Delete permanently?"
+					onConfirm={ action( 'onConfirm' ) }
+					confirmButtonText="Delete permanently"
+				>
+					This action cannot be undone. All data will be lost.
+				</AlertDialog.Popup>
+			</>
+		),
+	},
+};
+
+/**
+ * Example with custom button text for both confirm and cancel buttons.
+ */
+export const CustomButtonText: Story = {
+	args: {
+		children: (
+			<>
+				<AlertDialog.Trigger>Send feedback</AlertDialog.Trigger>
+				<AlertDialog.Popup
+					title="Send feedback?"
+					onConfirm={ action( 'onConfirm' ) }
+					confirmButtonText="Send feedback"
+					cancelButtonText="Not now"
+				>
+					Your feedback helps us improve. Would you like to send it
+					now?
+				</AlertDialog.Popup>
+			</>
+		),
+	},
+};
+
+const menuPopupStyles: React.CSSProperties = {
+	background: 'var(--wpds-color-bg-surface-neutral-strong)',
+	border: '1px solid var(--wpds-color-stroke-surface-neutral)',
+	borderRadius: '8px',
+	padding: '4px',
+	minWidth: '160px',
+	boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+};
+
+const menuItemStyles: React.CSSProperties = {
+	display: 'block',
+	width: '100%',
+	padding: '8px 12px',
+	borderRadius: '4px',
+	border: 'none',
+	background: 'none',
+	textAlign: 'start',
+	fontSize: 'inherit',
+	userSelect: 'none',
+};
+
+/**
+ * Example showing composition with a menu. The `AlertDialog.Trigger` is
+ * composed with Base UI's `Menu.Item` using the `render` prop, allowing the
+ * menu item to directly trigger the alert dialog.
+ *
+ * Note: the example currently uses the `Menu` component from BaseUI, although
+ * consumers should not use BaseUI directly and instead use the DS `Menu`
+ * component (not ready yet).
+ */
+export const MenuTrigger: Story = {
+	args: {
+		intent: 'irreversible',
+	},
+	render: ( args ) => {
+		const [ menuOpen, setMenuOpen ] = useState( false );
+		return (
+			<>
+				<Menu.Root onOpenChange={ setMenuOpen } open={ menuOpen }>
+					<Menu.Trigger>Actions ▾</Menu.Trigger>
+					<Menu.Portal>
+						<Menu.Positioner>
+							<Menu.Popup style={ menuPopupStyles }>
+								<Menu.Item style={ menuItemStyles }>
+									Edit
+								</Menu.Item>
+								<AlertDialog.Root { ...args }>
+									<Menu.Item
+										render={
+											<AlertDialog.Trigger
+												// Quick fix to remove `button`-specific styles.
+												// This shouldn't be an issue once we use the DS `Menu`
+												// component, which will come with item styles.
+												render={ <div /> }
+											/>
+										}
+										style={ menuItemStyles }
+										closeOnClick={ false }
+									>
+										Delete...
+										<AlertDialog.Popup
+											title="Delete permanently?"
+											onConfirm={ () => {
+												setMenuOpen( false );
+												action( 'onConfirm' )();
+											} }
+											confirmButtonText="Delete permanently"
+										>
+											This action cannot be undone. All
+											data will be lost.
+										</AlertDialog.Popup>
+									</Menu.Item>
+								</AlertDialog.Root>
+							</Menu.Popup>
+						</Menu.Positioner>
+					</Menu.Portal>
+				</Menu.Root>
+			</>
+		);
+	},
+};
+
+/**
+ * Consumer-driven async confirm flow. The consumer uses controlled mode to
+ * keep the dialog open while the async operation is in progress, and passes
+ * `loading` to show a spinner on the confirm button and disable the cancel
+ * button.
+ */
+export const AsyncConfirm: Story = {
+	render: function AsyncConfirm( args ) {
+		const [ isOpen, setIsOpen ] = useState( false );
+		const [ isLoading, setIsLoading ] = useState( false );
+
+		return (
+			<>
+				<button onClick={ () => setIsOpen( true ) }>
+					Delete permanently
+				</button>
+				<AlertDialog.Root
+					{ ...args }
+					open={ isOpen }
+					onOpenChange={ ( open, eventDetails ) => {
+						if ( ! isLoading ) {
+							setIsOpen( open );
+						}
+						args.onOpenChange?.( open, eventDetails );
+					} }
+				>
+					<AlertDialog.Popup
+						title="Delete permanently?"
+						loading={ isLoading }
+						onConfirm={ () => {
+							action( 'onConfirm' )();
+							setIsLoading( true );
+							new Promise< void >( ( resolve ) =>
+								setTimeout( resolve, 2000 )
+							).then( () => {
+								setIsLoading( false );
+								setIsOpen( false );
+							} );
+						} }
+						confirmButtonText="Delete permanently"
+					>
+						This action cannot be undone. All data will be lost.
+					</AlertDialog.Popup>
+				</AlertDialog.Root>
+			</>
+		);
+	},
+	args: {
+		intent: 'irreversible',
+	},
+};
+
+/**
+ * The `AlertDialog.Trigger` element is not necessary when the open state is
+ * controlled externally. This is useful when the dialog needs to be opened
+ * from code or from a non-standard trigger element.
+ */
+export const Controlled: Story = {
+	render: function Controlled( args ) {
+		const [ isOpen, setIsOpen ] = useState( false );
+
+		return (
+			<>
+				<button onClick={ () => setIsOpen( true ) }>Open Dialog</button>
+				<AlertDialog.Root
+					{ ...args }
+					open={ isOpen }
+					onOpenChange={ ( open, eventDetails ) => {
+						setIsOpen( open );
+						args.onOpenChange?.( open, eventDetails );
+					} }
+				>
+					<AlertDialog.Popup
+						title="Move to trash?"
+						onConfirm={ action( 'onConfirm' ) }
+					>
+						This post will be moved to trash. You can restore it
+						later.
+					</AlertDialog.Popup>
+				</AlertDialog.Root>
+			</>
+		);
+	},
+};

package/src/alert-dialog/style.module.css

@@ -0,0 +1,10 @@
+@layer wp-ui-utilities, wp-ui-components, wp-ui-compositions, wp-ui-overrides;
+
+@layer wp-ui-compositions {
+	.irreversible-action {
+		--wp-ui-button-background-color: var(--wpds-color-bg-interactive-error-strong);
+		--wp-ui-button-background-color-active: var(--wpds-color-bg-interactive-error-strong-active);
+		--wp-ui-button-foreground-color: var(--wpds-color-fg-interactive-error-strong);
+		--wp-ui-button-foreground-color-active: var(--wpds-color-fg-interactive-error-strong-active);
+	}
+}