@fluentui/react-dialog 9.0.0-beta.7 → 9.0.0-beta.8

package/CHANGELOG.json

@@ -2,7 +2,156 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Wed, 03 Aug 2022 16:00:14 GMT",
+      "date": "Thu, 15 Sep 2022 09:44:20 GMT",
+      "tag": "@fluentui/react-dialog_v9.0.0-beta.8",
+      "version": "9.0.0-beta.8",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "0547583ebcebe746110e5ef8d0599b0972b1f4c6",
+            "comment": "chore(react-dialog): Updates trigger to use useARIAButtonProps"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "827dffa4e4a164682c29b157b572ceb63c5dd6a9",
+            "comment": "chore(react-dialog): removes react-button max-width overrides"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "7b46e969e352bd636f7094ac5e29177fb7e8bff2",
+            "comment": "feat: add scroll lock feature to Dialog"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "b02e8f3ab48daf6b9db7f7efebbf026c6cbed740",
+            "comment": "feat(react-dialog): moves backdrop slot from Dialog to DialogSurface"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "9c10bc432b8fc8df6d51975c580a19603a10fd1e",
+            "comment": "feat(react-dialog): adds proper style to make DialogBody responsive"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "c9a58334a7abebf949f59d2c0a4bb1271074d808",
+            "comment": "chore: renames overlay slot to backdrop"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "6c6fe4c8246abec30d9cd3ba2079d379c4d7acb8",
+            "comment": "bugfix: stops propagation on Escape key"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "2630091d8093879d26c38dc6a4c585e886cff057",
+            "comment": "feat: Adds padding-right style to avoid jumping on scroll lock"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "94ab82dd00db0bf177908e7ccc60125efaa4e22d",
+            "comment": "chore(react-dialog): removes document listener to Escape keydown"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "0865ee92c7cab7273aafd21b1b3dff9418c0d479",
+            "comment": "feat(react-dialog): replace `closeButton` to a more generic `action` slot"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "fd88d8b10fe32eb635c949aa28653c3376f64c3d",
+            "comment": "feat(react-dialog): 1st rule of ARIA for Dialog"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-utilities to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.3",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.0.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.2.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.1.1",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-theme to v9.1.0",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.0.5",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
+            "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
+          }
+        ],
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
+            "comment": "chore: update package scaffold"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "5cd0e8dbc07b0a71ab0a48813cdcbbbd37a222e1",
+            "comment": "chore: remove localShorthands in favor of griffel shorthands"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "ba9444d594f3a960cc590eae5237c08bf7c5a07f",
+            "comment": "chore: consume cypress.config from it's package boundary"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 03 Aug 2022 16:03:47 GMT",
       "tag": "@fluentui/react-dialog_v9.0.0-beta.7",
       "version": "9.0.0-beta.7",
       "comments": {
@@ -23,25 +172,25 @@
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-aria to v9.1.0",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-tabster to v9.1.0",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-portal to v9.0.4",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
-            "commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
+            "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,22 +1,50 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Wed, 03 Aug 2022 16:00:14 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Sep 2022 09:44:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.8)
+
+Thu, 15 Sep 2022 09:44:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.7..@fluentui/react-dialog_v9.0.0-beta.8)
+
+### Changes
+
+- chore(react-dialog): Updates trigger to use useARIAButtonProps ([PR #24177](https://github.com/microsoft/fluentui/pull/24177) by bernardo.sunderhus@gmail.com)
+- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
+- chore(react-dialog): removes react-button max-width overrides ([PR #24674](https://github.com/microsoft/fluentui/pull/24674) by bernardo.sunderhus@gmail.com)
+- feat: add scroll lock feature to Dialog ([PR #24375](https://github.com/microsoft/fluentui/pull/24375) by bernardo.sunderhus@gmail.com)
+- feat(react-dialog): moves backdrop slot from Dialog to DialogSurface ([PR #24669](https://github.com/microsoft/fluentui/pull/24669) by bernardo.sunderhus@gmail.com)
+- feat(react-dialog): adds proper style to make DialogBody responsive ([PR #24354](https://github.com/microsoft/fluentui/pull/24354) by bernardo.sunderhus@gmail.com)
+- chore: renames overlay slot to backdrop ([PR #24220](https://github.com/microsoft/fluentui/pull/24220) by bernardo.sunderhus@gmail.com)
+- bugfix: stops propagation on Escape key ([PR #24750](https://github.com/microsoft/fluentui/pull/24750) by bernardo.sunderhus@gmail.com)
+- feat: Adds padding-right style to avoid jumping on scroll lock ([PR #24408](https://github.com/microsoft/fluentui/pull/24408) by bernardo.sunderhus@gmail.com)
+- chore(react-dialog): removes document listener to Escape keydown ([PR #24668](https://github.com/microsoft/fluentui/pull/24668) by bernardo.sunderhus@gmail.com)
+- feat(react-dialog): replace `closeButton` to a more generic `action` slot ([PR #24719](https://github.com/microsoft/fluentui/pull/24719) by bernardo.sunderhus@gmail.com)
+- feat(react-dialog): 1st rule of ARIA for Dialog ([PR #24525](https://github.com/microsoft/fluentui/pull/24525) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.3 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.0.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-aria to v9.2.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-portal to v9.0.5 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
+
 ## [9.0.0-beta.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.7)
 
-Wed, 03 Aug 2022 16:00:14 GMT 
+Wed, 03 Aug 2022 16:03:47 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.6..@fluentui/react-dialog_v9.0.0-beta.7)
 
 ### Changes
 
 - chore: adds aria-labelledby and aria-describedby attributes ([PR #24141](https://github.com/microsoft/fluentui/pull/24141) by bernardo.sunderhus@gmail.com)
 - feat: adds react-dialog to react-components unstable ([PR #24140](https://github.com/microsoft/fluentui/pull/24140) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-aria to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-tabster to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-portal to v9.0.4 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
+- Bump @fluentui/react-aria to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-portal to v9.0.4 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
 
 ## [9.0.0-beta.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.6)
 

package/Spec.md

@@ -83,19 +83,7 @@ Sample usages will be give in the following section of this document [Sample cod
 The root level component serves as an interface for interaction with all possible behaviors exposed. It provides context down the hierarchy to `children` compound components to allow functionality. This component expects to receive as children either a `DialogSurface` or a `DialogTrigger` and a `DialogSurface` (or some component that will eventually render one of those compound components) in this specific order
 
 ```tsx
-type DialogSlots = {
-  /**
-   * Dimmed background of dialog.
-   * The default overlay is rendered as a `<div>` with styling.
-   * This slot expects a `<div>` element which will replace the default overlay.
-   * The overlay should have `aria-hidden="true"`.
-   */
-  overlay?: Slot<'div'>;
-  /**
-   * The root element of the Dialog right after Portal.
-   */
-  root: Slot<'div'>;
-};
+type DialogSlots = {};
 
 type DialogProps = ComponentProps<DialogSlots> & {
   /**
@@ -131,7 +119,7 @@ type DialogOpenChangeData = {
   /**
    * The event source of the callback invocation
    */
-  type: 'escapeKeyDown' | 'overlayClick' | 'triggerClick';
+  type: 'escapeKeyDown' | 'backdropClick' | 'triggerClick';
   /**
    * The next value for the internal state of the dialog
    */
@@ -167,19 +155,26 @@ export type DialogTriggerProps = {
 The `DialogSurface` component represents the visual part of a `Dialog` as a whole, it contains everything that should be visible.
 
 ```tsx
-type DialogTitleSlots = {
+type DialogSurfaceSlots = {
   /**
-   * By default this is a div.
+   * Dimmed background of dialog.
+   * The default backdrop is rendered as a `<div>` with styling.
+   * This slot expects a `<div>` element which will replace the default backdrop.
+   * The backdrop should have `aria-hidden="true"`.
+   *
+   * By default if `DialogSurface` is `<dialog>` element the backdrop is ignored,
+   * since native `<dialog>` element supports [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)
    */
-  root: Slot<'div', 'main'>;
+  backdrop?: Slot<'div'>;
+  root: NonNullable<Slot<'dialog', 'div'>>;
 };
 
-type DialogTitleProps = ComponentProps<DialogTitleSlots>;
+type DialogTitleProps = ComponentProps<DialogSurfaceSlots>;
 ```
 
 ### DialogTitle
 
-The DialogTitle component will expect to have a dialog title/header and will show the close (X icon) button if specified so. Apart from styling and presenting `closeButton`, this component does not have other behavior.
+The `DialogTitle` component expects to have a title/header and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.
 
 ```tsx
 type DialogTitleSlots = {
@@ -187,7 +182,10 @@ type DialogTitleSlots = {
    * By default this is a div, but can be a heading.
    */
   root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
-  closeButton?: Slot<'button'>;
+  /**
+   * By default a Dialog with modalType='non-modal' will have a close button action
+   */
+  action?: Slot<'div'>;
 };
 
 type DialogTitleProps = ComponentProps<DialogTitleSlots>;
@@ -238,7 +236,7 @@ const dialog = <Dialog>
 <!-- expected DOM output  -->
 <button aria-haspopup="true" class="fui-button">Open Dialog</button>
 <!-- ... portal ... -->
-<div aria-hidden="true" class="fui-dialog-overlay"></div>
+<div aria-hidden="true" class="fui-dialog-backdrop"></div>
 <div aria-modal="true" role="dialog" class="fui-dialog-content">This is as basic as it gets</div>
 ```
 
@@ -271,7 +269,7 @@ const dialog = <Dialog type="alert">
 ```html
 <button aria-haspopup="true" class="fui-button">Open Dialog</button>
 <!-- ... portal ... -->
-<div aria-hidden="true" class="fui-dialog-overlay"></div>
+<div aria-hidden="true" class="fui-dialog-backdrop"></div>
 <div
   aria-describedby="fui-dialog-body-id"
   aria-labelledby="fui-dialog-title-id"
@@ -281,7 +279,7 @@ const dialog = <Dialog type="alert">
 >
   <div id="fui-dialog-title-id" class="fui-dialog-title">
     <span>Title</span>
-    <!-- closeButton -->
+    <!-- action -->
   </div>
   <div id="fui-dialog-body-id" class="fui-dialog-body">This is going to be inside the dialog</div>
   <div class="fui-dialog-actions">
@@ -333,7 +331,7 @@ const CustomDialog = () => {
 ```html
 <button aria-haspopup="true" class="fui-button">Open Dialog</button>
 <!-- ... portal ... -->
-<div aria-hidden="true" class="fui-dialog-overlay"></div>
+<div aria-hidden="true" class="fui-dialog-backdrop"></div>
 <div
   aria-describedby="fui-dialog-body-id"
   aria-labelledby="fui-dialog-title-id"
@@ -343,7 +341,7 @@ const CustomDialog = () => {
 >
   <div id="fui-dialog-title-id" class="fui-dialog-title">
     <span>Title</span>
-    <!-- closeButton -->
+    <!-- action -->
   </div>
   <div id="fui-dialog-body-id" class="fui-dialog-body">This is going to be inside the dialog</div>
   <div class="fui-dialog-actions">
@@ -402,6 +400,27 @@ function AsyncConfirmDialog() {
 }
 ```
 
+### Opting out of native `<dialog>`
+
+```tsx
+const dialog = <Dialog>
+  <DialogTrigger>
+    <Button>Open Dialog</Button>
+  <DialogTrigger>
+  <DialogSurface as="div">
+    This is as basic as it gets.
+  </DialogSurface>
+</Dialog>
+```
+
+```html
+<!-- expected DOM output  -->
+<button aria-haspopup="true" class="fui-button">Open Dialog</button>
+<!-- ... portal ... -->
+<div aria-hidden="true" class="fui-dialog-backdrop"></div>
+<div aria-modal="true" role="dialog" class="fui-dialog-content">This is as basic as it gets</div>
+```
+
 ## Migration
 
 _TBA: Link to migration guide doc_

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 
-import { ARIAButtonSlotProps } from '@fluentui/react-aria';
+import { ARIAButtonResultProps } from '@fluentui/react-aria';
+import { ARIAButtonType } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { FluentTriggerComponent } from '@fluentui/react-utilities';
@@ -74,19 +75,13 @@ export declare type DialogBodySlots = {
  */
 export declare type DialogBodyState = ComponentState<DialogBodySlots>;
 
-export declare const dialogClassNames: SlotClassNames<DialogSlots>;
-
 declare type DialogContextValue = {
-    /**
-     * Reference to trigger element that opened the Dialog
-     * null if Dialog is closed
-     */
-    triggerRef: React_2.RefObject<HTMLElement>;
-    contentRef: React_2.RefObject<HTMLElement>;
-    modalType: DialogModalType;
-    dialogTitleID?: string;
-    dialogBodyID?: string;
     open: boolean;
+    dialogBodyID?: string;
+    dialogTitleID?: string;
+    isNestedDialog: boolean;
+    dialogRef: React_2.Ref<DialogSurfaceElement>;
+    modalType: DialogModalType;
     /**
      * Requests dialog main component to update it's internal open state
      */
@@ -105,28 +100,35 @@ declare type DialogContextValues = {
 declare type DialogModalType = 'modal' | 'non-modal' | 'alert';
 
 export declare type DialogOpenChangeData = {
-    type: 'escapeKeyDown';
+    /**
+     * triggered when Escape key is pressed in a native `dialog`
+     */
+    type: 'dialogCancel';
     open: boolean;
-    event: React_2.KeyboardEvent;
-}
-/**
-* document escape keydown defers from internal escape keydown events because of the synthetic event API
-*/
-| {
-    type: 'documentEscapeKeyDown';
+    event: React_2.SyntheticEvent<DialogSurfaceElement>;
+} | {
+    type: 'escapeKeyDown';
     open: boolean;
-    event: KeyboardEvent;
+    event: React_2.KeyboardEvent<DialogSurfaceElement>;
 } | {
-    type: 'overlayClick';
+    type: 'backdropClick';
     open: boolean;
-    event: React_2.MouseEvent;
+    event: React_2.MouseEvent<DialogSurfaceElement>;
 } | {
     type: 'triggerClick';
     open: boolean;
-    event: React_2.MouseEvent;
+    event: React_2.MouseEvent<DialogSurfaceElement>;
 };
 
-export declare type DialogOpenChangeEvent = React_2.KeyboardEvent | React_2.MouseEvent | KeyboardEvent;
+export declare type DialogOpenChangeEvent = DialogOpenChangeData['event'];
+
+/**
+ * Callback fired when the component changes value from open state.
+ *
+ * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`
+ * @param data - A data object with relevant information, such as open value and type
+ */
+export declare type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;
 
 export declare type DialogProps = ComponentProps<Partial<DialogSlots>> & {
     /**
@@ -158,13 +160,7 @@ export declare type DialogProps = ComponentProps<Partial<DialogSlots>> & {
      * @default false
      */
     defaultOpen?: boolean;
-    /**
-     * Callback fired when the component changes value from open state.
-     *
-     * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`
-     * @param data - A data object with relevant information, such as open value and type
-     */
-    onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;
+    onOpenChange?: DialogOpenChangeEventHandler;
     /**
      * Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.
      * Alternatively can only contain {@link DialogSurface} if using trigger outside dialog, or controlling state.
@@ -172,15 +168,7 @@ export declare type DialogProps = ComponentProps<Partial<DialogSlots>> & {
     children: [JSX.Element, JSX.Element] | JSX.Element;
 };
 
-export declare type DialogSlots = {
-    /**
-     * Dimmed background of dialog.
-     * The default overlay is rendered as a `<div>` with styling.
-     * This slot expects a `<div>` element which will replace the default overlay.
-     * The overlay should have `aria-hidden="true"`.
-     */
-    overlay?: Slot<'div'>;
-};
+export declare type DialogSlots = {};
 
 export declare type DialogState = ComponentState<DialogSlots> & DialogContextValue & {
     content: React_2.ReactNode;
@@ -201,13 +189,29 @@ declare type DialogSurfaceContextValues = {
     dialogSurface: DialogSurfaceContextValue;
 };
 
+/** @internal */
+declare type DialogSurfaceElement = HTMLDialogElement | HTMLDivElement;
+
 /**
  * DialogSurface Props
+ *
+ * Omits basic types from native `dialog` (`open`, `onCancel` and `onClose`)
+ * to ensure `onOpenChange`, `open` and `defaultOpen` from `Dialog` is used instead
  */
-export declare type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & {};
+export declare type DialogSurfaceProps = Omit<ComponentProps<DialogSurfaceSlots>, 'open' | 'onCancel' | 'onClose'>;
 
 export declare type DialogSurfaceSlots = {
-    root: Slot<'div', 'main'>;
+    /**
+     * Dimmed background of dialog.
+     * The default backdrop is rendered as a `<div>` with styling.
+     * This slot expects a `<div>` element which will replace the default backdrop.
+     * The backdrop should have `aria-hidden="true"`.
+     *
+     * By default if `DialogSurface` is `<dialog>` element the backdrop is ignored,
+     * since native `<dialog>` element supports [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)
+     */
+    backdrop?: Slot<'div'>;
+    root: NonNullable<Slot<'dialog', 'div'>>;
 };
 
 /**
@@ -216,9 +220,8 @@ export declare type DialogSurfaceSlots = {
 export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;
 
 /**
- * The `DialogTitle` component will expect to have a dialog title/header
- * and will show the close (X icon) button if specified so.
- * Apart from styling and presenting `closeButton`, this component does not have other behavior.
+ * The `DialogTitle` component expects to have a title/header
+ * and when `Dialog` is `non-modal` a close (X icon) button is provided through `action` slot by default.
  */
 export declare const DialogTitle: ForwardRefComponent<DialogTitleProps>;
 
@@ -234,7 +237,10 @@ export declare type DialogTitleSlots = {
      * By default this is a div, but can be a heading.
      */
     root: Slot<'div', 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'>;
-    closeButton?: Slot<ARIAButtonSlotProps>;
+    /**
+     * By default a Dialog with modalType='non-modal' will have a close button action
+     */
+    action?: Slot<'div'>;
 };
 
 /**
@@ -259,9 +265,10 @@ export declare type DialogTriggerAction = 'open' | 'close';
 /**
  * Props that are passed to the child of the DialogTrigger when cloned to ensure correct behaviour for the Dialog
  */
-export declare type DialogTriggerChildProps = Pick<React_2.HTMLAttributes<HTMLElement>, 'onClick' | 'onKeyDown' | 'aria-haspopup'> & {
-    ref?: React_2.Ref<never>;
-};
+export declare type DialogTriggerChildProps<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
+    ref: React_2.Ref<unknown>;
+    'aria-haspopup'?: 'dialog';
+}>;
 
 export declare type DialogTriggerProps = {
     /**
@@ -275,9 +282,7 @@ export declare type DialogTriggerProps = {
      * Explicitly require single child or render function
      * to inject properties
      */
-    children: (React_2.ReactElement & {
-        ref?: React_2.Ref<unknown>;
-    }) | ((props: DialogTriggerChildProps) => React_2.ReactElement | null);
+    children: React_2.ReactElement | ((props: DialogTriggerChildProps) => React_2.ReactElement | null);
 };
 
 export declare type DialogTriggerState = {
@@ -358,11 +363,6 @@ export declare const useDialogBody_unstable: (props: DialogBodyProps, ref: React
  */
 export declare const useDialogBodyStyles_unstable: (state: DialogBodyState) => DialogBodyState;
 
-/**
- * Apply styling to the Dialog slots based on the state
- */
-export declare const useDialogStyles_unstable: (state: DialogState) => DialogState;
-
 /**
  * Create the state required to render DialogSurface.
  *
@@ -372,7 +372,7 @@ export declare const useDialogStyles_unstable: (state: DialogState) => DialogSta
  * @param props - props from this instance of DialogSurface
  * @param ref - reference to root HTMLElement of DialogSurface
  */
-export declare const useDialogSurface_unstable: (props: DialogSurfaceProps, ref: React_2.Ref<HTMLElement>) => DialogSurfaceState;
+export declare const useDialogSurface_unstable: (props: DialogSurfaceProps, ref: React_2.Ref<DialogSurfaceElement>) => DialogSurfaceState;
 
 /**
  * Apply styling to the DialogSurface slots based on the state

package/lib/components/Dialog/Dialog.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useDialog_unstable } from './useDialog';
 import { renderDialog_unstable } from './renderDialog';
-import { useDialogStyles_unstable } from './useDialogStyles';
 import { useDialogContextValues_unstable } from './useDialogContextValues';
 /**
  * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
@@ -14,7 +13,6 @@ import { useDialogContextValues_unstable } from './useDialogContextValues';
 export const Dialog = /*#__PURE__*/React.memo(props => {
   const state = useDialog_unstable(props);
   const contextValues = useDialogContextValues_unstable(state);
-  useDialogStyles_unstable(state);
   return renderDialog_unstable(state, contextValues);
 });
 Dialog.displayName = 'Dialog';

package/lib/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,wBAAT,QAAyC,mBAAzC;AAEA,SAAS,+BAAT,QAAgD,0BAAhD;AAEA;;;;;;AAMG;;AACH,OAAO,MAAM,MAAM,gBAA0B,KAAK,CAAC,IAAN,CAAW,KAAK,IAAG;EAC9D,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,CAAhC;EACA,MAAM,aAAa,GAAG,+BAA+B,CAAC,KAAD,CAArD;EAEA,wBAAwB,CAAC,KAAD,CAAxB;EACA,OAAO,qBAAqB,CAAC,KAAD,EAAQ,aAAR,CAA5B;AACD,CAN4C,CAAtC;AAQP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport { useDialogStyles_unstable } from './useDialogStyles';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\n/**\n * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\n * It provides context down the hierarchy to `children` compound components to allow functionality.\n * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\n * and a `DialogSurface` (or some component that will eventually render one of those compound components)\n * in this specific order\n */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n  const state = useDialog_unstable(props);\n  const contextValues = useDialogContextValues_unstable(state);\n\n  useDialogStyles_unstable(state);\n  return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,aAAnC;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AAEA,SAAS,+BAAT,QAAgD,0BAAhD;AAEA;;;;;;AAMG;;AACH,OAAO,MAAM,MAAM,gBAA0B,KAAK,CAAC,IAAN,CAAW,KAAK,IAAG;EAC9D,MAAM,KAAK,GAAG,kBAAkB,CAAC,KAAD,CAAhC;EACA,MAAM,aAAa,GAAG,+BAA+B,CAAC,KAAD,CAArD;EAEA,OAAO,qBAAqB,CAAC,KAAD,EAAQ,aAAR,CAA5B;AACD,CAL4C,CAAtC;AAOP,MAAM,CAAC,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\n/**\n * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\n * It provides context down the hierarchy to `children` compound components to allow functionality.\n * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\n * and a `DialogSurface` (or some component that will eventually render one of those compound components)\n * in this specific order\n */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n  const state = useDialog_unstable(props);\n  const contextValues = useDialogContextValues_unstable(state);\n\n  return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"sourceRoot":"../src/"}

package/lib/components/Dialog/Dialog.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.types.js","sourceRoot":"../src/","sources":["components/Dialog/Dialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSlots = {\n  /**\n   * Dimmed background of dialog.\n   * The default overlay is rendered as a `<div>` with styling.\n   * This slot expects a `<div>` element which will replace the default overlay.\n   * The overlay should have `aria-hidden=\"true\"`.\n   */\n  overlay?: Slot<'div'>;\n};\n\nexport type DialogOpenChangeEvent = React.KeyboardEvent | React.MouseEvent | KeyboardEvent;\n\nexport type DialogOpenChangeData =\n  | { type: 'escapeKeyDown'; open: boolean; event: React.KeyboardEvent }\n  /**\n   * document escape keydown defers from internal escape keydown events because of the synthetic event API\n   */\n  | { type: 'documentEscapeKeyDown'; open: boolean; event: KeyboardEvent }\n  | { type: 'overlayClick'; open: boolean; event: React.MouseEvent }\n  | { type: 'triggerClick'; open: boolean; event: React.MouseEvent };\n\nexport type DialogModalType = 'modal' | 'non-modal' | 'alert';\n\nexport type DialogContextValues = {\n  dialog: DialogContextValue;\n  /**\n   * dialogSurface context is provided by Dialog as false\n   * to ensure components inside Dialog but outside DialogSurface will consume this as false\n   */\n  dialogSurface: DialogSurfaceContextValue;\n};\n\nexport type DialogProps = ComponentProps<Partial<DialogSlots>> & {\n  /**\n   * Dialog variations.\n   *\n   * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\n   * The tab sequence is kept within the dialog and moving the focus outside\n   * the dialog will imply closing it. This is the default type of the component.\n   *\n   * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\n   * and users can interact with the rest of the page.\n   * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n   *\n   * `alert`: is a special type of modal dialogs that interrupts the user's workflow\n   * to communicate an important message or ask for a decision.\n   * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\n   * and it cannot be dismissed through the dimmed background or escape key.\n   *\n   * @default modal\n   */\n  modalType?: DialogModalType;\n  /**\n   * Controls the open state of the dialog\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Default value for the uncontrolled open state of the dialog.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  /**\n   * Callback fired when the component changes value from open state.\n   *\n   * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n   * @param data - A data object with relevant information, such as open value and type\n   */\n  onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;\n  /**\n   * Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.\n   * Alternatively can only contain {@link DialogSurface} if using trigger outside dialog, or controlling state.\n   */\n  children: [JSX.Element, JSX.Element] | JSX.Element;\n};\n\nexport type DialogState = ComponentState<DialogSlots> &\n  DialogContextValue & {\n    content: React.ReactNode;\n    trigger: React.ReactNode;\n  };\n"]}
+{"version":3,"file":"Dialog.types.js","sourceRoot":"../src/","sources":["components/Dialog/Dialog.types.ts"],"names":[],"mappings":"","sourcesContent":["import type * as React from 'react';\nimport type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface/DialogSurface.types';\n\nexport type DialogSlots = {};\n\nexport type DialogOpenChangeEvent = DialogOpenChangeData['event'];\n\nexport type DialogOpenChangeData =\n  | {\n      /**\n       * triggered when Escape key is pressed in a native `dialog`\n       */\n      type: 'dialogCancel';\n      open: boolean;\n      event: React.SyntheticEvent<DialogSurfaceElement>;\n    }\n  | {\n      type: 'escapeKeyDown';\n      open: boolean;\n      event: React.KeyboardEvent<DialogSurfaceElement>;\n    }\n  | {\n      type: 'backdropClick';\n      open: boolean;\n      event: React.MouseEvent<DialogSurfaceElement>;\n    }\n  | {\n      type: 'triggerClick';\n      open: boolean;\n      event: React.MouseEvent<DialogSurfaceElement>;\n    };\n\nexport type DialogModalType = 'modal' | 'non-modal' | 'alert';\n\n/**\n * Callback fired when the component changes value from open state.\n *\n * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown`\n * @param data - A data object with relevant information, such as open value and type\n */\nexport type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;\n\nexport type DialogContextValues = {\n  dialog: DialogContextValue;\n  /**\n   * dialogSurface context is provided by Dialog as false\n   * to ensure components inside Dialog but outside DialogSurface will consume this as false\n   */\n  dialogSurface: DialogSurfaceContextValue;\n};\n\nexport type DialogProps = ComponentProps<Partial<DialogSlots>> & {\n  /**\n   * Dialog variations.\n   *\n   * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.\n   * The tab sequence is kept within the dialog and moving the focus outside\n   * the dialog will imply closing it. This is the default type of the component.\n   *\n   * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out\n   * and users can interact with the rest of the page.\n   * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element.\n   *\n   * `alert`: is a special type of modal dialogs that interrupts the user's workflow\n   * to communicate an important message or ask for a decision.\n   * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog,\n   * and it cannot be dismissed through the dimmed background or escape key.\n   *\n   * @default modal\n   */\n  modalType?: DialogModalType;\n  /**\n   * Controls the open state of the dialog\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Default value for the uncontrolled open state of the dialog.\n   * @default false\n   */\n  defaultOpen?: boolean;\n  onOpenChange?: DialogOpenChangeEventHandler;\n  /**\n   * Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.\n   * Alternatively can only contain {@link DialogSurface} if using trigger outside dialog, or controlling state.\n   */\n  children: [JSX.Element, JSX.Element] | JSX.Element;\n};\n\nexport type DialogState = ComponentState<DialogSlots> &\n  DialogContextValue & {\n    content: React.ReactNode;\n    trigger: React.ReactNode;\n  };\n"]}