[Dialog, AlertDialog] Fix the nesting of different dialogs

packages/react/src/alert-dialog/root/AlertDialogRootContext.ts

@@ -1,29 +1,19 @@
 'use client';
 import * as React from 'react';
-import { type useDialogRoot } from '../../dialog/root/useDialogRoot';
+import { DialogContext } from '../../dialog/utils/DialogContext';
 
-export interface AlertDialogRootContext extends useDialogRoot.ReturnValue {
-  /**
-   * Determines if the dialog is nested within a parent dialog.
-   */
-  nested: boolean;
-}
-
-export const AlertDialogRootContext = React.createContext<AlertDialogRootContext | undefined>(
-  undefined,
-);
+export const AlertDialogRootContext = DialogContext;
 
-if (process.env.NODE_ENV !== 'production') {
-  AlertDialogRootContext.displayName = 'AlertDialogRootContext';
-}
+export interface AlertDialogRootContext extends DialogContext {}
 
 export function useAlertDialogRootContext() {
-  const context = React.useContext(AlertDialogRootContext);
+  const context = React.useContext(DialogContext);
   if (context === undefined) {
     throw new Error(
-      'Base UI: AlertDialogRootContext is missing. AlertDialog parts must be placed within <AlertDialog.Root>.',
+      'Base UI: AlertDialogRootContext is missing. Alert dialogs parts must be placed within <AlertDialog.Root>.',
     );
   }
 
   return context;
 }
+

packages/react/src/dialog/popup/DialogPopup.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { Dialog } from '@base-ui-components/react/dialog';
+import { AlertDialog } from '@base-ui-components/react/alert-dialog';
 import { act, waitFor, screen } from '@mui/internal-test-utils';
 import { describeConformance, createRenderer } from '#test-utils';
 
@@ -232,5 +233,66 @@ describe('<Dialog.Popup />', () => {
       expect(parentDialog).to.have.attribute('data-has-nested-dialogs');
       expect(nestedDialog).not.to.have.attribute('data-has-nested-dialogs');
     });
+
+    it('adds the `nested` and `has-nested-dialogs` style hooks if a dialog has a parent alert dialog', async () => {
+      await render(
+        <AlertDialog.Root open>
+          <AlertDialog.Portal>
+            <AlertDialog.Popup data-testid="parent-dialog" />
+            <Dialog.Root open>
+              <Dialog.Portal>
+                <Dialog.Popup data-testid="nested-dialog">
+                  <Dialog.Root>
+                    <Dialog.Portal>
+                      <Dialog.Popup />
+                    </Dialog.Portal>
+                  </Dialog.Root>
+                </Dialog.Popup>
+              </Dialog.Portal>
+            </Dialog.Root>
+          </AlertDialog.Portal>
+        </AlertDialog.Root>,
+      );
+
+      const parentDialog = screen.getByTestId('parent-dialog');
+      const nestedDialog = screen.getByTestId('nested-dialog');
+
+      expect(parentDialog).not.to.have.attribute('data-nested');
+      expect(nestedDialog).to.have.attribute('data-nested');
+
+      expect(parentDialog).to.have.attribute('data-has-nested-dialogs');
+      expect(nestedDialog).not.to.have.attribute('data-has-nested-dialogs');
+    });
+  });
+
+
+  it('adds the `nested` and `has-nested-dialogs` style hooks on an alert dialog if has a parent dialog', async () => {
+    await render(
+      <Dialog.Root open>
+        <Dialog.Portal>
+          <Dialog.Popup data-testid="parent-dialog" />
+          <AlertDialog.Root open>
+            <AlertDialog.Portal>
+              <AlertDialog.Popup data-testid="nested-dialog">
+                <AlertDialog.Root>
+                  <AlertDialog.Portal>
+                    <AlertDialog.Popup />
+                  </AlertDialog.Portal>
+                </AlertDialog.Root>
+              </AlertDialog.Popup>
+            </AlertDialog.Portal>
+          </AlertDialog.Root>
+        </Dialog.Portal>
+      </Dialog.Root>,
+    );
+
+    const parentDialog = screen.getByTestId('parent-dialog');
+    const nestedDialog = screen.getByTestId('nested-dialog');
+
+    expect(parentDialog).not.to.have.attribute('data-nested');
+    expect(nestedDialog).to.have.attribute('data-nested');
+
+    expect(parentDialog).to.have.attribute('data-has-nested-dialogs');
+    expect(nestedDialog).not.to.have.attribute('data-has-nested-dialogs');
   });
 });

packages/react/src/dialog/root/DialogRoot.tsx

@@ -2,6 +2,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { DialogRootContext } from './DialogRootContext';
+import { DialogContext } from '../utils/DialogContext';
 import { type CommonParameters, useDialogRoot } from './useDialogRoot';
 import { PortalContext } from '../../portal/PortalContext';
 
@@ -41,9 +42,11 @@ const DialogRoot = function DialogRoot(props: DialogRoot.Props) {
   );
 
   return (
-    <DialogRootContext.Provider value={contextValue}>
-      <PortalContext.Provider value={dialogRoot.mounted}>{children}</PortalContext.Provider>
-    </DialogRootContext.Provider>
+    <DialogContext.Provider value={contextValue}>
+      <DialogRootContext.Provider value={contextValue}>
+        <PortalContext.Provider value={dialogRoot.mounted}>{children}</PortalContext.Provider>
+      </DialogRootContext.Provider>
+    </DialogContext.Provider>
   );
 };
 

packages/react/src/dialog/root/DialogRootContext.ts

@@ -1,12 +1,8 @@
 'use client';
 import * as React from 'react';
-import type { useDialogRoot } from './useDialogRoot';
+import { DialogContext } from '../utils/DialogContext';
 
-export interface DialogRootContext extends useDialogRoot.ReturnValue {
-  /**
-   * Determines if the dialog is nested within a parent dialog.
-   */
-  nested: boolean;
+export interface DialogRootContext extends DialogContext {
   /**
    * Determines whether the dialog should close on outside clicks.
    */
@@ -15,13 +11,21 @@ export interface DialogRootContext extends useDialogRoot.ReturnValue {
 
 export const DialogRootContext = React.createContext<DialogRootContext | undefined>(undefined);
 
+if (process.env.NODE_ENV !== 'production') {
+  DialogRootContext.displayName = 'DialogRootContext';
+}
+
 export function useDialogRootContext() {
-  const context = React.useContext(DialogRootContext);
-  if (context === undefined) {
+  const dialogRootContext = React.useContext(DialogRootContext);
+  const dialogContext = React.useContext(DialogContext);
+  if (dialogRootContext === undefined || dialogContext === undefined) {
     throw new Error(
       'Base UI: DialogRootContext is missing. Dialog parts must be placed within <Dialog.Root>.',
     );
   }
 
-  return context;
+  return {
+    ...dialogRootContext,
+    ...dialogContext
+  };
 }

packages/react/src/dialog/utils/DialogContext.ts

@@ -0,0 +1,24 @@
+'use client';
+import * as React from 'react';
+import type { useDialogRoot } from '../root/useDialogRoot';
+
+/**
+ * Common context for dialog & dialog alert components.
+ */
+export interface DialogContext extends useDialogRoot.ReturnValue {
+  /**
+   * Determines if the dialog is nested within a parent dialog.
+   */
+  nested: boolean;
+}
+
+export const DialogContext = React.createContext<DialogContext | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  DialogContext.displayName = 'DialogContext';
+}
+
+export function useDialogContext() {
+  const context = React.useContext(DialogContext);
+  return context;
+}