@fluentui/react-dialog 9.0.0-beta.9 → 9.0.1-0

package/CHANGELOG.json

@@ -2,7 +2,161 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Tue, 20 Sep 2022 20:54:06 GMT",
+      "date": "Thu, 13 Oct 2022 12:55:51 GMT",
+      "tag": "@fluentui/react-dialog_v9.0.1-0",
+      "version": "9.0.1-0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "e563f3daaea9b7cc62f50bc15edd44edf5045107",
+            "comment": "feat: adds disableButtonEnhancement property on DialogTrigger"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 13 Oct 2022 11:02:48 GMT",
+      "tag": "@fluentui/react-dialog_v9.0.0",
+      "version": "9.0.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "1a527d440e0497ef8046b3ce240492241e7a04ac",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "12222c2cfb1851ac6fbf57d17a1573432e842ec7",
+            "comment": "feat: focus on surface if no focusable element is available"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "17c5fe742918bbc41ed22f492a289f53bffc5008",
+            "comment": "chore: improves DialogTrigger types"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "443c503b94e602e55857e4e311413c6257d60766",
+            "comment": "chore: cleanups in types"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "b48083b3009bc75f28c328de0024eb400b989145",
+            "comment": "fix: aria-* properties should be reassignable"
+          }
+        ],
+        "patch": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a",
+            "comment": "feat: react-dialog stable release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-utilities to v9.1.1",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.4",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.2.2",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.1.3",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.0.7",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15",
+            "commit": "cd05c21e62ff37812d614330eb70f97fd978c97a"
+          }
+        ],
+        "none": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/react-dialog",
+            "commit": "42acccd4445b42c806f957de00e5f2567589279f",
+            "comment": "chore: updates stories and tests"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 03 Oct 2022 22:24:36 GMT",
+      "tag": "@fluentui/react-dialog_v9.0.0-beta.11",
+      "version": "9.0.0-beta.11",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "da8a1d4d97efdb6d95818b605136415d9428e811",
+            "comment": "feat: removes DialogSurface native dialog support "
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.2.1",
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.1.2",
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.0.6",
+            "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 23 Sep 2022 10:32:29 GMT",
+      "tag": "@fluentui/react-dialog_v9.0.0-beta.10",
+      "version": "9.0.0-beta.10",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "4dd18085b968e10d512c179705d31148e28148b4",
+            "comment": "feat: implements DialogContent as a swap of DialogBody"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 20 Sep 2022 20:55:44 GMT",
       "tag": "@fluentui/react-dialog_v9.0.0-beta.9",
       "version": "9.0.0-beta.9",
       "comments": {
@@ -17,7 +171,7 @@
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
-            "commit": "9617a5a46ef4c5e310a066a5374ff2ed61db3c66"
+            "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
           }
         ],
         "none": [

package/CHANGELOG.md

@@ -1,18 +1,71 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Tue, 20 Sep 2022 20:54:06 GMT and should not be manually modified.
+This log was last generated on Thu, 13 Oct 2022 12:55:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.1-0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.1-0)
+
+Thu, 13 Oct 2022 12:55:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0..@fluentui/react-dialog_v9.0.1-0)
+
+### Changes
+
+- feat: adds disableButtonEnhancement property on DialogTrigger ([PR #25112](https://github.com/microsoft/fluentui/pull/25112) by bernardo.sunderhus@gmail.com)
+
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0)
+
+Thu, 13 Oct 2022 11:02:48 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.11..@fluentui/react-dialog_v9.0.0)
+
+### Patches
+
+- feat: react-dialog stable release ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-utilities to v9.1.1 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.4 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-aria to v9.2.2 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-tabster to v9.1.3 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-portal to v9.0.7 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.15 ([PR #25181](https://github.com/microsoft/fluentui/pull/25181) by beachball)
+
+### Changes
+
+- chore: Update Griffel to latest version ([PR #25075](https://github.com/microsoft/fluentui/pull/25075) by olfedias@microsoft.com)
+- feat: focus on surface if no focusable element is available ([PR #25173](https://github.com/microsoft/fluentui/pull/25173) by bernardo.sunderhus@gmail.com)
+- chore: improves DialogTrigger types ([PR #25044](https://github.com/microsoft/fluentui/pull/25044) by bernardo.sunderhus@gmail.com)
+- chore: cleanups in types ([PR #25070](https://github.com/microsoft/fluentui/pull/25070) by bernardo.sunderhus@gmail.com)
+- fix: aria-* properties should be reassignable ([PR #25092](https://github.com/microsoft/fluentui/pull/25092) by bernardo.sunderhus@gmail.com)
+
+## [9.0.0-beta.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.11)
+
+Mon, 03 Oct 2022 22:24:36 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.10..@fluentui/react-dialog_v9.0.0-beta.11)
+
+### Changes
+
+- feat: removes DialogSurface native dialog support  ([PR #24979](https://github.com/microsoft/fluentui/pull/24979) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.2.1 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-tabster to v9.1.2 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+- Bump @fluentui/react-portal to v9.0.6 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
+
+## [9.0.0-beta.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.10)
+
+Fri, 23 Sep 2022 10:32:29 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.9..@fluentui/react-dialog_v9.0.0-beta.10)
+
+### Changes
+
+- feat: implements DialogContent as a swap of DialogBody ([PR #24855](https://github.com/microsoft/fluentui/pull/24855) by bernardo.sunderhus@gmail.com)
+
 ## [9.0.0-beta.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.9)
 
-Tue, 20 Sep 2022 20:54:06 GMT 
+Tue, 20 Sep 2022 20:55:44 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.0.0-beta.8..@fluentui/react-dialog_v9.0.0-beta.9)
 
 ### Changes
 
 - bugfix(react-dialog): Adds color style to DialogSurface ([PR #24832](https://github.com/microsoft/fluentui/pull/24832) by bernardo.sunderhus@gmail.com)
-- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24870](https://github.com/microsoft/fluentui/pull/24870) by beachball)
+- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
 
 ## [9.0.0-beta.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0-beta.8)
 

package/README.md

@@ -2,4 +2,44 @@
 
 **React Dialog components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
 
-These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+To import React Dialog components:
+
+```jsx
+import * as React from 'react';
+import {
+  Button,
+  Dialog,
+  DialogTrigger,
+  DialogSurface,
+  DialogTitle,
+  DialogBody,
+  DialogActions,
+  DialogContent,
+} from '@fluentui/react-components';
+
+export const DialogExample = () => {
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <Button>Open dialog</Button>
+      </DialogTrigger>
+      <DialogSurface>
+        <DialogBody>
+          <DialogTitle>Dialog title</DialogTitle>
+          <DialogContent>
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam exercitationem cumque repellendus eaque
+            est dolor eius expedita nulla ullam? Tenetur reprehenderit aut voluptatum impedit voluptates in natus iure
+            cumque eaque?
+          </DialogContent>
+          <DialogActions>
+            <DialogTrigger>
+              <Button appearance="secondary">Close</Button>
+            </DialogTrigger>
+            <Button appearance="primary">Do Something</Button>
+          </DialogActions>
+        </DialogBody>
+      </DialogSurface>
+    </Dialog>
+  );
+};
+```

package/dist/index.d.ts

@@ -11,6 +11,7 @@ import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { TriggerProps } from '@fluentui/react-utilities';
 
 /**
  * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
@@ -76,7 +77,8 @@ export declare type DialogBodySlots = {
 export declare type DialogBodyState = ComponentState<DialogBodySlots>;
 
 /**
- * DialogContent component - TODO: add more docs
+ * The `DialogContent` is a container where the content of the dialog is rendered.
+ * Apart from styling, this component does not have other behavior.
  */
 export declare const DialogContent: ForwardRefComponent<DialogContentProps>;
 
@@ -85,7 +87,7 @@ export declare const dialogContentClassNames: SlotClassNames<DialogContentSlots>
 /**
  * DialogContent Props
  */
-export declare type DialogContentProps = ComponentProps<DialogContentSlots> & {};
+export declare type DialogContentProps = ComponentProps<DialogContentSlots>;
 
 export declare type DialogContentSlots = {
     root: Slot<'div'>;
@@ -98,8 +100,8 @@ export declare type DialogContentState = ComponentState<DialogContentSlots>;
 
 declare type DialogContextValue = {
     open: boolean;
-    dialogBodyID?: string;
-    dialogTitleID?: string;
+    dialogContentId?: string;
+    dialogTitleId?: string;
     isNestedDialog: boolean;
     dialogRef: React_2.Ref<DialogSurfaceElement>;
     modalType: DialogModalType;
@@ -147,7 +149,8 @@ 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
+ * @param data - A data object with relevant information,
+ * such as open value and type of interaction that created the event
  */
 export declare type DialogOpenChangeEventHandler = (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void;
 
@@ -181,6 +184,13 @@ 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 of interaction that created the event
+     */
     onOpenChange?: DialogOpenChangeEventHandler;
     /**
      * Can contain two children including {@link DialogTrigger} and {@link DialogSurface}.
@@ -234,7 +244,7 @@ export declare type DialogSurfaceSlots = {
      * since native `<dialog>` element supports [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)
      */
     backdrop?: Slot<'div'>;
-    root: NonNullable<Slot<'dialog', 'div'>>;
+    root: Slot<'div'>;
 };
 
 /**
@@ -253,7 +263,7 @@ export declare const dialogTitleClassNames: SlotClassNames<DialogTitleSlots>;
 /**
  * DialogTitle Props
  */
-export declare type DialogTitleProps = ComponentProps<DialogTitleSlots> & {};
+export declare type DialogTitleProps = ComponentProps<DialogTitleSlots>;
 
 export declare type DialogTitleSlots = {
     /**
@@ -289,23 +299,24 @@ 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<Type extends ARIAButtonType = ARIAButtonType, Props = {}> = ARIAButtonResultProps<Type, Props & {
-    ref: React_2.Ref<unknown>;
     'aria-haspopup'?: 'dialog';
 }>;
 
-export declare type DialogTriggerProps = {
+export declare type DialogTriggerProps = TriggerProps<DialogTriggerChildProps> & {
     /**
      * Explicitly declare if the trigger is responsible for opening or
      * closing a Dialog visibility state.
-     * @default 'open' // if it's outside DialogSurface
-     * @default 'close' // if it's inside DialogSurface
+     *
+     * If `DialogTrigger` is outside `DialogSurface` then it'll be `open` by default
+     *
+     * If `DialogTrigger` is inside `DialogSurface` then it'll be `close` by default
      */
     action?: DialogTriggerAction;
     /**
-     * Explicitly require single child or render function
-     * to inject properties
+     * Disables internal trigger mechanism that ensures a child provided will be a compliant ARIA button.
+     * @default false
      */
-    children: React_2.ReactElement | ((props: DialogTriggerChildProps) => React_2.ReactElement | null);
+    disableButtonEnhancement?: boolean;
 };
 
 export declare type DialogTriggerState = {
@@ -392,13 +403,13 @@ export declare const useDialogBody_unstable: (props: DialogBodyProps, ref: React
 export declare const useDialogBodyStyles_unstable: (state: DialogBodyState) => DialogBodyState;
 
 /**
- * Create the state required to render DialogContent.
+ * Create the state required to render DialogBody.
  *
- * The returned state can be modified with hooks such as useDialogContentStyles_unstable,
- * before being passed to renderDialogContent_unstable.
+ * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,
+ * before being passed to renderDialogBody_unstable.
  *
- * @param props - props from this instance of DialogContent
- * @param ref - reference to root HTMLElement of DialogContent
+ * @param props - props from this instance of DialogBody
+ * @param ref - reference to root HTMLElement of DialogBody
  */
 export declare const useDialogContent_unstable: (props: DialogContentProps, ref: React_2.Ref<HTMLElement>) => DialogContentState;
 

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/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"]}
+{"version":3,"file":"Dialog.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/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,\n * such as open value and type of interaction that created the event\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  /**\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,\n   * such as open value and type of interaction that created the event\n   */\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"]}

package/lib/components/Dialog/useDialog.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import { useHasParentContext } from '@fluentui/react-context-selector';
-import { useControlNativeDialogOpenState, useDisableBodyScroll, useFocusFirstElement } from '../../utils';
+import { useDisableBodyScroll, useFocusFirstElement } from '../../utils';
 import { DialogContext } from '../../contexts';
 /**
  * Create the state required to render Dialog.
@@ -33,7 +33,6 @@ export const useDialog_unstable = props => {
     }
   });
   const focusRef = useFocusFirstElement(open, modalType);
-  const nativeControlRef = useControlNativeDialogOpenState(open, modalType);
   const disableBodyScroll = useDisableBodyScroll();
   const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
   useIsomorphicLayoutEffect(() => {
@@ -50,10 +49,10 @@ export const useDialog_unstable = props => {
     content: open ? content : null,
     trigger,
     requestOpenChange,
-    dialogBodyID: useId('dialog-body-'),
-    dialogTitleID: useId('dialog-title-'),
+    dialogContentId: useId('dialog-content-'),
+    dialogTitleId: useId('dialog-title-'),
     isNestedDialog: useHasParentContext(DialogContext),
-    dialogRef: useMergedRefs(focusRef, nativeControlRef)
+    dialogRef: focusRef
   };
 };
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,oBADF,EAEE,gBAFF,EAGE,KAHF,EAIE,yBAJF,EAKE,aALF,QAMO,2BANP;AAOA,SAAS,mBAAT,QAAoC,kCAApC;AACA,SAAS,+BAAT,EAA0C,oBAA1C,EAAgE,oBAAhE,QAA4F,aAA5F;AACA,SAAS,aAAT,QAA8B,gBAA9B;AAIA;;;;;;;AAOG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoC;EACpE,MAAM;IAAE,QAAF;IAAY,SAAS,GAAG,OAAxB;IAAiC;EAAjC,IAAkD,KAAxD;EAEA,MAAM,CAAC,OAAD,EAAU,OAAV,IAAqB,2BAA2B,CAAC,QAAD,CAAtD;EAEA,MAAM,CAAC,IAAD,EAAO,OAAP,IAAkB,oBAAoB,CAAC;IAC3C,KAAK,EAAE,KAAK,CAAC,IAD8B;IAE3C,YAAY,EAAE,KAAK,CAAC,WAFuB;IAG3C,YAAY,EAAE;EAH6B,CAAD,CAA5C;EAMA,MAAM,iBAAiB,GAAG,gBAAgB,CAAE,IAAD,IAA+B;IACxE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,IAAI,CAAC,KAAR,EAAe,IAAf,CAAZ,CADwE,CAGxE;IACA;;IACA,IAAI,CAAC,IAAI,CAAC,KAAL,CAAW,kBAAX,EAAL,EAAsC;MACpC,OAAO,CAAC,IAAI,CAAC,IAAN,CAAP;IACD;EACF,CARyC,CAA1C;EAUA,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAD,EAAO,SAAP,CAArC;EACA,MAAM,gBAAgB,GAAG,+BAA+B,CAAC,IAAD,EAAO,SAAP,CAAxD;EACA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,IAAI,SAAS,KAAK,WAAvB,CAAlC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,kBAAJ,EAAwB;MACtB,OAAO,iBAAiB,EAAxB;IACD;EACF,CAJwB,EAItB,CAAC,iBAAD,EAAoB,kBAApB,CAJsB,CAAzB;EAMA,OAAO;IACL,UAAU,EAAE;MACV,QAAQ,EAAE;IADA,CADP;IAIL,IAJK;IAKL,SALK;IAML,OAAO,EAAE,IAAI,GAAG,OAAH,GAAa,IANrB;IAOL,OAPK;IAQL,iBARK;IASL,YAAY,EAAE,KAAK,CAAC,cAAD,CATd;IAUL,aAAa,EAAE,KAAK,CAAC,eAAD,CAVf;IAWL,cAAc,EAAE,mBAAmB,CAAC,aAAD,CAX9B;IAYL,SAAS,EAAE,aAAa,CAAC,QAAD,EAAW,gBAAX;EAZnB,CAAP;AAcD,CA9CM;AAgDP;;AAEG;;AACH,SAAS,2BAAT,CACE,QADF,EAC2B;EAEzB,MAAM,aAAa,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,CAAtB;;EACA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAI,aAAa,CAAC,MAAd,KAAyB,CAAzB,IAA8B,aAAa,CAAC,MAAd,KAAyB,CAA3D,EAA8D;MAC5D;MACA,OAAO,CAAC,IAAR,CACE,+DACE,4EAFJ;IAID;EACF;;EACD,QAAQ,aAAa,CAAC,MAAtB;IACE;IACA,KAAK,CAAL;MACE,OAAO,aAAP;IACF;;IACA,KAAK,CAAL;MACE,OAAO,CAAC,SAAD,EAAY,aAAa,CAAC,CAAD,CAAzB,CAAP;IACF;;IACA;MACE,OAAO,CAAC,SAAD,EAAY,SAAZ,CAAP;EATJ;AAWD","sourcesContent":["import * as React from 'react';\nimport {\n  useControllableState,\n  useEventCallback,\n  useId,\n  useIsomorphicLayoutEffect,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useControlNativeDialogOpenState, useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n  const { children, modalType = 'modal', onOpenChange } = props;\n\n  const [trigger, content] = childrenToTriggerAndContent(children);\n\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n    onOpenChange?.(data.event, data);\n\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n\n  const focusRef = useFocusFirstElement(open, modalType);\n  const nativeControlRef = useControlNativeDialogOpenState(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n\n  return {\n    components: {\n      backdrop: 'div',\n    },\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogBodyID: useId('dialog-body-'),\n    dialogTitleID: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: useMergedRefs(focusRef, nativeControlRef),\n  };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n  children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Dialog must contain at least one child <DialogSurface/>,\\n' +\n          'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)',\n      );\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,oBAAT,EAA+B,gBAA/B,EAAiD,KAAjD,EAAwD,yBAAxD,QAAyF,2BAAzF;AACA,SAAS,mBAAT,QAAoC,kCAApC;AACA,SAAS,oBAAT,EAA+B,oBAA/B,QAA2D,aAA3D;AACA,SAAS,aAAT,QAA8B,gBAA9B;AAIA;;;;;;;AAOG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoC;EACpE,MAAM;IAAE,QAAF;IAAY,SAAS,GAAG,OAAxB;IAAiC;EAAjC,IAAkD,KAAxD;EAEA,MAAM,CAAC,OAAD,EAAU,OAAV,IAAqB,2BAA2B,CAAC,QAAD,CAAtD;EAEA,MAAM,CAAC,IAAD,EAAO,OAAP,IAAkB,oBAAoB,CAAC;IAC3C,KAAK,EAAE,KAAK,CAAC,IAD8B;IAE3C,YAAY,EAAE,KAAK,CAAC,WAFuB;IAG3C,YAAY,EAAE;EAH6B,CAAD,CAA5C;EAMA,MAAM,iBAAiB,GAAG,gBAAgB,CAAE,IAAD,IAA+B;IACxE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAY,KAAA,CAAZ,GAAA,YAAY,CAAG,IAAI,CAAC,KAAR,EAAe,IAAf,CAAZ,CADwE,CAGxE;IACA;;IACA,IAAI,CAAC,IAAI,CAAC,KAAL,CAAW,kBAAX,EAAL,EAAsC;MACpC,OAAO,CAAC,IAAI,CAAC,IAAN,CAAP;IACD;EACF,CARyC,CAA1C;EAUA,MAAM,QAAQ,GAAG,oBAAoB,CAAC,IAAD,EAAO,SAAP,CAArC;EACA,MAAM,iBAAiB,GAAG,oBAAoB,EAA9C;EACA,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,IAAI,SAAS,KAAK,WAAvB,CAAlC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,kBAAJ,EAAwB;MACtB,OAAO,iBAAiB,EAAxB;IACD;EACF,CAJwB,EAItB,CAAC,iBAAD,EAAoB,kBAApB,CAJsB,CAAzB;EAMA,OAAO;IACL,UAAU,EAAE;MACV,QAAQ,EAAE;IADA,CADP;IAIL,IAJK;IAKL,SALK;IAML,OAAO,EAAE,IAAI,GAAG,OAAH,GAAa,IANrB;IAOL,OAPK;IAQL,iBARK;IASL,eAAe,EAAE,KAAK,CAAC,iBAAD,CATjB;IAUL,aAAa,EAAE,KAAK,CAAC,eAAD,CAVf;IAWL,cAAc,EAAE,mBAAmB,CAAC,aAAD,CAX9B;IAYL,SAAS,EAAE;EAZN,CAAP;AAcD,CA7CM;AA+CP;;AAEG;;AACH,SAAS,2BAAT,CACE,QADF,EAC2B;EAEzB,MAAM,aAAa,GAAG,KAAK,CAAC,QAAN,CAAe,OAAf,CAAuB,QAAvB,CAAtB;;EACA,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IACzC,IAAI,aAAa,CAAC,MAAd,KAAyB,CAAzB,IAA8B,aAAa,CAAC,MAAd,KAAyB,CAA3D,EAA8D;MAC5D;MACA,OAAO,CAAC,IAAR,CACE,+DACE,4EAFJ;IAID;EACF;;EACD,QAAQ,aAAa,CAAC,MAAtB;IACE;IACA,KAAK,CAAL;MACE,OAAO,aAAP;IACF;;IACA,KAAK,CAAL;MACE,OAAO,CAAC,SAAD,EAAY,aAAa,CAAC,CAAD,CAAzB,CAAP;IACF;;IACA;MACE,OAAO,CAAC,SAAD,EAAY,SAAZ,CAAP;EATJ;AAWD","sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\n\n/**\n * Create the state required to render Dialog.\n *\n * The returned state can be modified with hooks such as useDialogStyles_unstable,\n * before being passed to renderDialog_unstable.\n *\n * @param props - props from this instance of Dialog\n */\nexport const useDialog_unstable = (props: DialogProps): DialogState => {\n  const { children, modalType = 'modal', onOpenChange } = props;\n\n  const [trigger, content] = childrenToTriggerAndContent(children);\n\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n    onOpenChange?.(data.event, data);\n\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n\n  return {\n    components: {\n      backdrop: 'div',\n    },\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogContentId: useId('dialog-content-'),\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef,\n  };\n};\n\n/**\n * Extracts trigger and content from children\n */\nfunction childrenToTriggerAndContent(\n  children: React.ReactNode,\n): readonly [trigger: React.ReactNode, content: React.ReactNode] {\n  const childrenArray = React.Children.toArray(children) as React.ReactElement[];\n  if (process.env.NODE_ENV !== 'production') {\n    if (childrenArray.length !== 1 && childrenArray.length !== 2) {\n      // eslint-disable-next-line no-console\n      console.warn(\n        'Dialog must contain at least one child <DialogSurface/>,\\n' +\n          'and at most two children <DialogTrigger/> <DialogSurface/> (in this order)',\n      );\n    }\n  }\n  switch (childrenArray.length) {\n    // case where there's a trigger followed by content\n    case 2:\n      return childrenArray as [trigger: React.ReactNode, content: React.ReactNode];\n    // case where there's only content\n    case 1:\n      return [undefined, childrenArray[0]];\n    // unknown case\n    default:\n      return [undefined, undefined];\n  }\n}\n"],"sourceRoot":"../src/"}

package/lib/components/Dialog/useDialogContextValues.js

@@ -2,9 +2,9 @@ export function useDialogContextValues_unstable(state) {
   const {
     modalType,
     open,
-    dialogBodyID,
+    dialogContentId,
     dialogRef,
-    dialogTitleID,
+    dialogTitleId,
     isNestedDialog,
     requestOpenChange
   } = state;
@@ -17,8 +17,8 @@ export function useDialogContextValues_unstable(state) {
     open,
     modalType,
     dialogRef,
-    dialogBodyID,
-    dialogTitleID,
+    dialogContentId,
+    dialogTitleId,
     isNestedDialog,
     requestOpenChange
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts"],"names":[],"mappings":"AAGA,OAAM,SAAU,+BAAV,CAA0C,KAA1C,EAA4D;EAChE,MAAM;IAAE,SAAF;IAAa,IAAb;IAAmB,YAAnB;IAAiC,SAAjC;IAA4C,aAA5C;IAA2D,cAA3D;IAA2E;EAA3E,IAAiG,KAAvG;EAEA;;;AAGG;;EACH,MAAM,MAAM,GAAuB;IACjC,IADiC;IAEjC,SAFiC;IAGjC,SAHiC;IAIjC,YAJiC;IAKjC,aALiC;IAMjC,cANiC;IAOjC;EAPiC,CAAnC;EAUA,MAAM,aAAa,GAA8B,KAAjD;EAEA,OAAO;IAAE,MAAF;IAAU;EAAV,CAAP;AACD","sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n  const { modalType, open, dialogBodyID, dialogRef, dialogTitleID, isNestedDialog, requestOpenChange } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const dialog: DialogContextValue = {\n    open,\n    modalType,\n    dialogRef,\n    dialogBodyID,\n    dialogTitleID,\n    isNestedDialog,\n    requestOpenChange,\n  };\n\n  const dialogSurface: DialogSurfaceContextValue = false;\n\n  return { dialog, dialogSurface };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/useDialogContextValues.ts"],"names":[],"mappings":"AAGA,OAAM,SAAU,+BAAV,CAA0C,KAA1C,EAA4D;EAChE,MAAM;IAAE,SAAF;IAAa,IAAb;IAAmB,eAAnB;IAAoC,SAApC;IAA+C,aAA/C;IAA8D,cAA9D;IAA8E;EAA9E,IAAoG,KAA1G;EAEA;;;AAGG;;EACH,MAAM,MAAM,GAAuB;IACjC,IADiC;IAEjC,SAFiC;IAGjC,SAHiC;IAIjC,eAJiC;IAKjC,aALiC;IAMjC,cANiC;IAOjC;EAPiC,CAAnC;EAUA,MAAM,aAAa,GAA8B,KAAjD;EAEA,OAAO;IAAE,MAAF;IAAU;EAAV,CAAP;AACD","sourcesContent":["import type { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\nimport type { DialogContextValues, DialogState } from './Dialog.types';\n\nexport function useDialogContextValues_unstable(state: DialogState): DialogContextValues {\n  const { modalType, open, dialogContentId, dialogRef, dialogTitleId, isNestedDialog, requestOpenChange } = state;\n\n  /**\n   * This context is created with \"@fluentui/react-context-selector\",\n   * there is no sense to memoize it\n   */\n  const dialog: DialogContextValue = {\n    open,\n    modalType,\n    dialogRef,\n    dialogContentId,\n    dialogTitleId,\n    isNestedDialog,\n    requestOpenChange,\n  };\n\n  const dialogSurface: DialogSurfaceContextValue = false;\n\n  return { dialog, dialogSurface };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/DialogBody/useDialogBody.js

@@ -1,5 +1,4 @@
 import { getNativeElementProps } from '@fluentui/react-utilities';
-import { useDialogContext_unstable } from '../../contexts';
 /**
  * Create the state required to render DialogBody.
  *
@@ -11,13 +10,14 @@ import { useDialogContext_unstable } from '../../contexts';
  */
 
 export const useDialogBody_unstable = (props, ref) => {
+  var _a;
+
   return {
     components: {
       root: 'div'
     },
-    root: getNativeElementProps('div', {
+    root: getNativeElementProps((_a = props.as) !== null && _a !== void 0 ? _a : 'div', {
       ref,
-      id: useDialogContext_unstable(ctx => ctx.dialogBodyID),
       ...props
     })
   };

package/lib/components/DialogBody/useDialogBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,yBAAT,QAA0C,gBAA1C;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ;MACjC,GADiC;MAEjC,EAAE,EAAE,yBAAyB,CAAC,GAAG,IAAI,GAAG,CAAC,YAAZ,CAFI;MAGjC,GAAG;IAH8B,CAAR;EAJtB,CAAP;AAUD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogBodyProps, DialogBodyState } from './DialogBody.types';\nimport { useDialogContext_unstable } from '../../contexts';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      id: useDialogContext_unstable(ctx => ctx.dialogBodyID),\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/useDialogBody.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;;;EAC7G,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,qBAAqB,CAAC,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,KAAb,EAAoB;MAC7C,GAD6C;MAE7C,GAAG;IAF0C,CAApB;EAJtB,CAAP;AASD,CAVM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogBodyProps, DialogBodyState } from './DialogBody.types';\n\n/**\n * Create the state required to render DialogBody.\n *\n * The returned state can be modified with hooks such as useDialogBodyStyles_unstable,\n * before being passed to renderDialogBody_unstable.\n *\n * @param props - props from this instance of DialogBody\n * @param ref - reference to root HTMLElement of DialogBody\n */\nexport const useDialogBody_unstable = (props: DialogBodyProps, ref: React.Ref<HTMLElement>): DialogBodyState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(props.as ?? 'div', {\n      ref,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogBody/useDialogBodyStyles.js

@@ -1,6 +1,5 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
-import { typographyStyles } from '@fluentui/react-theme';
-import { BODY_GRID_AREA } from '../../contexts/constants';
+import { ACTIONS_END_GRID_AREA, ACTIONS_START_GRID_AREA, CONTENT_GRID_AREA, DIALOG_GAP, MEDIA_QUERY_BREAKPOINT_SELECTOR, SURFACE_PADDING, TITLE_ACTION_GRID_AREA, TITLE_GRID_AREA } from '../../contexts';
 export const dialogBodyClassNames = {
   root: 'fui-DialogBody'
 };
@@ -10,22 +9,33 @@ export const dialogBodyClassNames = {
 
 const useStyles = /*#__PURE__*/__styles({
   "root": {
+    "mc9l5x": "f13qh94s",
+    "fshzfu": "f120kxnn",
     "a9b677": "fly5x3f",
-    "Bqenvij": "f1l02sjl",
-    "Bmxbyg5": "f5zp4f",
-    "sshi5w": "f1nxs5xn",
+    "Bqenvij": "f3052tw",
+    "B2u0y6b": "fvgz9i8",
+    "Bxyxcbc": "flnwrvu",
     "B7ck84d": "f1ewtqcl",
-    "Ijaq50": "f6owso0",
-    "Br312pm": "fupswjn",
-    "nk6f5a": "foucsne",
-    "Bw0ie65": "f1ka72gx",
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fkhj508",
-    "Bhrd7zp": "figsok6",
-    "Bg96gwp": "f1i3iumi"
+    "wkccdc": "f874eam",
+    "Budl1dq": "fjj47a5",
+    "zoa1oz": "fe34spp",
+    "B68tc82": "f1ln0qer",
+    "Bmxbyg5": "fa2wlxz",
+    "i8kkvl": "f4px1ci",
+    "Belr9w4": "fn67r4l",
+    "B5xtmjs": "ff54dml",
+    "Bqu9lor": "f52bj20",
+    "B06wobe": "f1dangjo"
   }
 }, {
-  "d": [".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".f5zp4f{overflow-y:auto;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f6owso0{grid-row-start:body;}", ".fupswjn{grid-column-start:body;}", ".foucsne{grid-row-end:body;}", ".f1ka72gx{grid-column-end:body;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
+  "d": [".f13qh94s{display:grid;}", ".f120kxnn::backdrop{background-color:rgba(0, 0, 0, 0.4);}", ".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".fvgz9i8{max-width:600px;}", ".flnwrvu{max-height:calc(100vh - 2 * 24px);}", ".f1ewtqcl{box-sizing:border-box;}", ".f874eam{grid-template-rows:auto 1fr auto;}", ".fjj47a5{grid-template-columns:1fr 1fr auto;}", ".fe34spp{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-end actions-end\";}", ".f1ln0qer{overflow-x:unset;}", ".fa2wlxz{overflow-y:unset;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}"],
+  "m": [["@media screen and (max-width: 480px){.ff54dml{max-width:100vw;}}", {
+    "m": "screen and (max-width: 480px)"
+  }], ["@media screen and (max-width: 480px){.f52bj20{grid-template-rows:auto 1fr auto auto;}}", {
+    "m": "screen and (max-width: 480px)"
+  }], ["@media screen and (max-width: 480px){.f1dangjo{grid-template-areas:\"title title close-button\" \"body body body\" \"actions-start actions-start actions-start\" \"actions-end actions-end actions-end\";}}", {
+    "m": "screen and (max-width: 480px)"
+  }]]
 });
 /**
  * Apply styling to the DialogBody slots based on the state
@@ -34,9 +44,7 @@ const useStyles = /*#__PURE__*/__styles({
 
 export const useDialogBodyStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className); // TODO Add class names to slots, for example:
-  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
-
+  state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);
   return state;
 };
 //# sourceMappingURL=useDialogBodyStyles.js.map