UI: Add AlertDialog primitive

packages/ui/CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### New Features
 
+-   Add `AlertDialog` primitive ([#76847](https://github.com/WordPress/gutenberg/pull/76847)).
 -   Add `InputControl` component ([#76653](https://github.com/WordPress/gutenberg/pull/76653)).
 -   `Dialog`: Expose `initialFocus` and `finalFocus` props on `Dialog.Popup` for custom focus management ([#76860](https://github.com/WordPress/gutenberg/pull/76860)).
 
@@ -12,6 +13,10 @@
 -   `Card`: Add `overflow: clip` to `Card.Root` to prevent child content from overflowing rounded corners ([#76678](https://github.com/WordPress/gutenberg/pull/76678)).
 -   `CollapsibleCard`: do not animate the focus ring when expanding/collapsing the card ([#76459](https://github.com/WordPress/gutenberg/pull/76459)).
 
+### Enhancements
+
+-   `Dialog.Root`: expose `disablePointerDismissal` prop ([#76847](https://github.com/WordPress/gutenberg/pull/76847)).
+
 ### Internal
 
 -   `Tabs`: Add development-mode validation for Tab/Panel count matching ([#75170](https://github.com/WordPress/gutenberg/pull/75170)).

packages/ui/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 };

packages/ui/src/alert-dialog/index.ts

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

packages/ui/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 };

packages/ui/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 };