[Dialog] Modality changes

mui · Dec 9, 2024 · 9a01a54 · 9a01a54
1 parent 8b560c4
commit 9a01a54
Show file tree

Hide file tree

Showing 13 changed files with 251 additions and 34 deletions.
diff --git a/docs/reference/generated/alert-dialog-root.json b/docs/reference/generated/alert-dialog-root.json
@@ -8,7 +8,7 @@
       "description": "Determines whether the dialog is initally open.\nThis is an uncontrolled equivalent of the `open` prop."
     },
     "onOpenChange": {
-      "type": "(open, event) => void",
+      "type": "(open, event, reason) => void",
       "description": "Callback invoked when the dialog is being opened or closed."
     },
     "open": {

diff --git a/docs/reference/generated/dialog-root.json b/docs/reference/generated/dialog-root.json
@@ -18,7 +18,7 @@
       "description": "Determines whether the dialog is modal."
     },
     "onOpenChange": {
-      "type": "(open, event) => void",
+      "type": "(open, event, reason) => void",
       "description": "Callback invoked when the dialog is being opened or closed."
     },
     "open": {

diff --git a/docs/reference/overrides/alert-dialog-root.json b/docs/reference/overrides/alert-dialog-root.json
@@ -2,7 +2,7 @@
   "name": "AlertDialogRoot",
   "props": {
     "onOpenChange": {
-      "type": "(open, event) => void"
+      "type": "(open, event, reason) => void"
     }
   }
 }
diff --git a/docs/reference/overrides/dialog-root.json b/docs/reference/overrides/dialog-root.json
@@ -2,7 +2,7 @@
   "name": "DialogRoot",
   "props": {
     "onOpenChange": {
-      "type": "(open, event) => void"
+      "type": "(open, event, reason) => void"
     }
   }
 }
diff --git a/packages/react/src/alert-dialog/close/AlertDialogClose.tsx b/packages/react/src/alert-dialog/close/AlertDialogClose.tsx
@@ -23,8 +23,8 @@ const AlertDialogClose = React.forwardRef(function AlertDialogClose(
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const { render, className, ...other } = props;
-  const { open, onOpenChange } = useAlertDialogRootContext();
-  const { getRootProps } = useDialogClose({ open, onOpenChange });
+  const { open, setOpen } = useAlertDialogRootContext();
+  const { getRootProps } = useDialogClose({ open, setOpen });
 
   const { renderElement } = useComponentRenderer({
     render: render ?? 'button',

diff --git a/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx b/packages/react/src/alert-dialog/popup/AlertDialogPopup.tsx
@@ -58,7 +58,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
     getPopupProps,
     mounted,
     nestedOpenDialogCount,
-    onOpenChange,
+    setOpen,
     open,
     openMethod,
     popupRef,
@@ -78,7 +78,7 @@ const AlertDialogPopup = React.forwardRef(function AlertDialogPopup(
     initialFocus,
     modal: true,
     mounted,
-    onOpenChange,
+    setOpen,
     open,
     openMethod,
     ref: mergedRef,

diff --git a/packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx b/packages/react/src/alert-dialog/root/AlertDialogRoot.test.tsx
@@ -3,12 +3,85 @@ import { expect } from 'chai';
 import { describeSkipIf, screen, waitFor } from '@mui/internal-test-utils';
 import { AlertDialog } from '@base-ui-components/react/alert-dialog';
 import { createRenderer } from '#test-utils';
+import { spy } from 'sinon';
 
 const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 
 describe('<AlertDialog.Root />', () => {
   const { render } = createRenderer();
 
+  describe('prop: onOpenChange', () => {
+    it('calls onOpenChange with the new open state', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <AlertDialog.Root onOpenChange={handleOpenChange}>
+          <AlertDialog.Trigger>Open</AlertDialog.Trigger>
+          <AlertDialog.Popup>
+            <AlertDialog.Close>Close</AlertDialog.Close>
+          </AlertDialog.Popup>
+        </AlertDialog.Root>,
+      );
+
+      expect(handleOpenChange.callCount).to.equal(0);
+
+      const openButton = screen.getByText('Open');
+      await user.click(openButton);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[0]).to.equal(true);
+
+      const closeButton = screen.getByText('Close');
+      await user.click(closeButton);
+
+      expect(handleOpenChange.callCount).to.equal(2);
+      expect(handleOpenChange.secondCall.args[0]).to.equal(false);
+    });
+
+    it('calls onOpenChange with the reason for change when clicked on trigger and close button', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <AlertDialog.Root onOpenChange={handleOpenChange}>
+          <AlertDialog.Trigger>Open</AlertDialog.Trigger>
+          <AlertDialog.Popup>
+            <AlertDialog.Close>Close</AlertDialog.Close>
+          </AlertDialog.Popup>
+        </AlertDialog.Root>,
+      );
+
+      const openButton = screen.getByText('Open');
+      await user.click(openButton);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[2]).to.equal('click');
+
+      const closeButton = screen.getByText('Close');
+      await user.click(closeButton);
+
+      expect(handleOpenChange.callCount).to.equal(2);
+      expect(handleOpenChange.secondCall.args[2]).to.equal('click');
+    });
+
+    it('calls onOpenChange with the reason for change when pressed Esc while the dialog is open', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <AlertDialog.Root defaultOpen onOpenChange={handleOpenChange}>
+          <AlertDialog.Trigger>Open</AlertDialog.Trigger>
+          <AlertDialog.Popup>
+            <AlertDialog.Close>Close</AlertDialog.Close>
+          </AlertDialog.Popup>
+        </AlertDialog.Root>,
+      );
+
+      await user.keyboard('[Escape]');
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[2]).to.equal('escape-key');
+    });
+  });
+
   describeSkipIf(isJSDOM)('modality', () => {
     it('makes other interactive elements on the page inert when a modal dialog is open and restores them after the dialog is closed', async () => {
       const { user } = await render(

diff --git a/packages/react/src/dialog/close/DialogClose.tsx b/packages/react/src/dialog/close/DialogClose.tsx
@@ -23,8 +23,8 @@ const DialogClose = React.forwardRef(function DialogClose(
   forwardedRef: React.ForwardedRef<HTMLButtonElement>,
 ) {
   const { render, className, ...other } = props;
-  const { open, onOpenChange } = useDialogRootContext();
-  const { getRootProps } = useDialogClose({ open, onOpenChange });
+  const { open, setOpen } = useDialogRootContext();
+  const { getRootProps } = useDialogClose({ open, setOpen });
 
   const { renderElement } = useComponentRenderer({
     render: render ?? 'button',

diff --git a/packages/react/src/dialog/close/useDialogClose.ts b/packages/react/src/dialog/close/useDialogClose.ts
@@ -1,14 +1,18 @@
 'use client';
 import * as React from 'react';
 import { mergeReactProps } from '../../utils/mergeReactProps';
+import { OpenChangeReason } from '../../utils/translateOpenChangeReason';
 
 export function useDialogClose(params: useDialogClose.Parameters): useDialogClose.ReturnValue {
-  const { open, onOpenChange } = params;
-  const handleClick = React.useCallback(() => {
-    if (open) {
-      onOpenChange?.(false);
-    }
-  }, [open, onOpenChange]);
+  const { open, setOpen } = params;
+  const handleClick = React.useCallback(
+    (event: React.MouseEvent) => {
+      if (open) {
+        setOpen(false, event.nativeEvent, 'click');
+      }
+    },
+    [open, setOpen],
+  );
 
   const getRootProps = (externalProps: React.HTMLAttributes<any>) =>
     mergeReactProps(externalProps, { onClick: handleClick });
@@ -27,7 +31,11 @@ export namespace useDialogClose {
     /**
      * Callback invoked when the dialog is being opened or closed.
      */
-    onOpenChange: (open: boolean) => void;
+    setOpen: (
+      open: boolean,
+      event: Event | undefined,
+      reason: OpenChangeReason | undefined,
+    ) => void;
   }
 
   export interface ReturnValue {

diff --git a/packages/react/src/dialog/popup/DialogPopup.tsx b/packages/react/src/dialog/popup/DialogPopup.tsx
@@ -62,7 +62,7 @@ const DialogPopup = React.forwardRef(function DialogPopup(
     modal,
     mounted,
     nestedOpenDialogCount,
-    onOpenChange,
+    setOpen,
     open,
     openMethod,
     popupRef,
@@ -82,7 +82,7 @@ const DialogPopup = React.forwardRef(function DialogPopup(
     initialFocus,
     modal,
     mounted,
-    onOpenChange,
+    setOpen,
     open,
     openMethod,
     ref: mergedRef,
@@ -117,12 +117,12 @@ const DialogPopup = React.forwardRef(function DialogPopup(
     <FloatingPortal root={container}>
       <FloatingFocusManager
         context={floatingContext}
-        modal={modal}
+        modal
         disabled={!mounted}
         closeOnFocusOut={dismissible}
         initialFocus={resolvedInitialFocus}
         returnFocus={finalFocus}
-        outsideElementsInert
+        outsideElementsInert={modal}
       >
         {renderElement()}
       </FloatingFocusManager>

diff --git a/packages/react/src/dialog/popup/useDialogPopup.tsx b/packages/react/src/dialog/popup/useDialogPopup.tsx
@@ -1,13 +1,22 @@
 'use client';
 import * as React from 'react';
-import { type FloatingRootContext, useFloating, type FloatingContext } from '@floating-ui/react';
+import {
+  type FloatingRootContext,
+  useFloating,
+  type FloatingContext,
+  type OpenChangeReason as FloatingUIOpenChangeReason,
+} from '@floating-ui/react';
 import { useBaseUiId } from '../../utils/useBaseUiId';
 import { useForkRef } from '../../utils/useForkRef';
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useScrollLock } from '../../utils/useScrollLock';
 import { useEnhancedEffect } from '../../utils/useEnhancedEffect';
 import { type InteractionType } from '../../utils/useEnhancedClickHandler';
 import { GenericHTMLProps } from '../../utils/types';
+import {
+  translateOpenChangeReason,
+  type OpenChangeReason,
+} from '../../utils/translateOpenChangeReason';
 
 export function useDialogPopup(parameters: useDialogPopup.Parameters): useDialogPopup.ReturnValue {
   const {
@@ -18,7 +27,7 @@ export function useDialogPopup(parameters: useDialogPopup.Parameters): useDialog
     initialFocus,
     modal,
     mounted,
-    onOpenChange,
+    setOpen,
     open,
     openMethod,
     ref,
@@ -27,9 +36,16 @@ export function useDialogPopup(parameters: useDialogPopup.Parameters): useDialog
     titleElementId,
   } = parameters;
 
+  const handleFloatingUIOpenChange = React.useCallback(
+    (isOpen: boolean, event: Event | undefined, reason: FloatingUIOpenChangeReason | undefined) => {
+      setOpen(isOpen, event, translateOpenChangeReason(reason));
+    },
+    [setOpen],
+  );
+
   const { context, elements } = useFloating({
     open,
-    onOpenChange,
+    onOpenChange: handleFloatingUIOpenChange,
     rootContext: floatingRootContext,
   });
 
@@ -112,7 +128,11 @@ export namespace useDialogPopup {
     /**
      * Callback fired when the dialog is requested to be opened or closed.
      */
-    onOpenChange: (open: boolean, event?: Event) => void;
+    setOpen: (
+      open: boolean,
+      event: Event | undefined,
+      reason: OpenChangeReason | undefined,
+    ) => void;
     /**
      * The id of the title element associated with the dialog.
      */

diff --git a/packages/react/src/dialog/root/DialogRoot.test.tsx b/packages/react/src/dialog/root/DialogRoot.test.tsx
@@ -140,6 +140,96 @@ describe('<Dialog.Root />', () => {
     });
   });
 
+  describe('prop: onOpenChange', () => {
+    it('calls onOpenChange with the new open state', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <Dialog.Root onOpenChange={handleOpenChange}>
+          <Dialog.Trigger>Open</Dialog.Trigger>
+          <Dialog.Popup>
+            <Dialog.Close>Close</Dialog.Close>
+          </Dialog.Popup>
+        </Dialog.Root>,
+      );
+
+      expect(handleOpenChange.callCount).to.equal(0);
+
+      const openButton = screen.getByText('Open');
+      await user.click(openButton);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[0]).to.equal(true);
+
+      const closeButton = screen.getByText('Close');
+      await user.click(closeButton);
+
+      expect(handleOpenChange.callCount).to.equal(2);
+      expect(handleOpenChange.secondCall.args[0]).to.equal(false);
+    });
+
+    it('calls onOpenChange with the reason for change when clicked on trigger and close button', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <Dialog.Root onOpenChange={handleOpenChange}>
+          <Dialog.Trigger>Open</Dialog.Trigger>
+          <Dialog.Popup>
+            <Dialog.Close>Close</Dialog.Close>
+          </Dialog.Popup>
+        </Dialog.Root>,
+      );
+
+      const openButton = screen.getByText('Open');
+      await user.click(openButton);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[2]).to.equal('click');
+
+      const closeButton = screen.getByText('Close');
+      await user.click(closeButton);
+
+      expect(handleOpenChange.callCount).to.equal(2);
+      expect(handleOpenChange.secondCall.args[2]).to.equal('click');
+    });
+
+    it('calls onOpenChange with the reason for change when pressed Esc while the dialog is open', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <Dialog.Root defaultOpen onOpenChange={handleOpenChange}>
+          <Dialog.Trigger>Open</Dialog.Trigger>
+          <Dialog.Popup>
+            <Dialog.Close>Close</Dialog.Close>
+          </Dialog.Popup>
+        </Dialog.Root>,
+      );
+
+      await user.keyboard('[Escape]');
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[2]).to.equal('escape-key');
+    });
+
+    it('calls onOpenChange with the reason for change when user clicks outside while the dialog is open', async () => {
+      const handleOpenChange = spy();
+
+      const { user } = await render(
+        <Dialog.Root defaultOpen onOpenChange={handleOpenChange}>
+          <Dialog.Trigger>Open</Dialog.Trigger>
+          <Dialog.Popup>
+            <Dialog.Close>Close</Dialog.Close>
+          </Dialog.Popup>
+        </Dialog.Root>,
+      );
+
+      await user.click(document.body);
+
+      expect(handleOpenChange.callCount).to.equal(1);
+      expect(handleOpenChange.firstCall.args[2]).to.equal('outside-press');
+    });
+  });
+
   describeSkipIf(isJSDOM)('prop: modal', () => {
     it('makes other interactive elements on the page inert when a modal dialog is open and restores them after the dialog is closed', async () => {
       const { user } = await render(