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

package/CHANGELOG.json

@@ -2,7 +2,181 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Thu, 15 Sep 2022 09:44:20 GMT",
+      "date": "Thu, 13 Oct 2022 10:59:24 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": {
+        "prerelease": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "79d1b0e32631bf916a52834e3731de464aa4898c",
+            "comment": "bugfix(react-dialog): Adds color style to DialogSurface"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
+            "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
+          }
+        ],
+        "none": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "81de40f0df0dfa8bac4e4fb522bf830d9fe8e066",
+            "comment": "Includes Tooltip Escape scenarios on e2e tests"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "cf5f5e14c86cc35ee8bfff6c6be130a36fb6d16d",
+            "comment": "chore: scaffold DialogContent component"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 15 Sep 2022 09:48:59 GMT",
       "tag": "@fluentui/react-dialog_v9.0.0-beta.8",
       "version": "9.0.0-beta.8",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,66 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Thu, 15 Sep 2022 09:44:20 GMT and should not be manually modified.
+This log was last generated on Thu, 13 Oct 2022 10:59:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.0.0)
+
+Thu, 13 Oct 2022 10:59:24 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: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 #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)
 
-Thu, 15 Sep 2022 09:44:20 GMT 
+Thu, 15 Sep 2022 09:48:59 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

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.
@@ -75,10 +76,32 @@ export declare type DialogBodySlots = {
  */
 export declare type DialogBodyState = ComponentState<DialogBodySlots>;
 
+/**
+ * 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>;
+
+export declare const dialogContentClassNames: SlotClassNames<DialogContentSlots>;
+
+/**
+ * DialogContent Props
+ */
+export declare type DialogContentProps = ComponentProps<DialogContentSlots>;
+
+export declare type DialogContentSlots = {
+    root: Slot<'div'>;
+};
+
+/**
+ * State used in rendering DialogContent
+ */
+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;
@@ -126,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;
 
@@ -160,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}.
@@ -189,8 +220,10 @@ declare type DialogSurfaceContextValues = {
     dialogSurface: DialogSurfaceContextValue;
 };
 
-/** @internal */
-declare type DialogSurfaceElement = HTMLDialogElement | HTMLDivElement;
+/**
+ * Union between all possible semantic element that represent a DialogSurface
+ */
+export declare type DialogSurfaceElement = HTMLDialogElement | HTMLDivElement;
 
 /**
  * DialogSurface Props
@@ -211,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'>;
 };
 
 /**
@@ -230,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 = {
     /**
@@ -266,23 +299,19 @@ 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
-     */
-    children: React_2.ReactElement | ((props: DialogTriggerChildProps) => React_2.ReactElement | null);
 };
 
 export declare type DialogTriggerState = {
@@ -304,6 +333,11 @@ export declare const renderDialogActions_unstable: (state: DialogActionsState) =
  */
 export declare const renderDialogBody_unstable: (state: DialogBodyState) => JSX.Element;
 
+/**
+ * Render the final JSX of DialogContent
+ */
+export declare const renderDialogContent_unstable: (state: DialogContentState) => JSX.Element;
+
 /**
  * Render the final JSX of DialogSurface
  */
@@ -363,6 +397,22 @@ export declare const useDialogBody_unstable: (props: DialogBodyProps, ref: React
  */
 export declare const useDialogBodyStyles_unstable: (state: DialogBodyState) => DialogBodyState;
 
+/**
+ * Create the state required to render DialogBody.
+ *
+ * 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 DialogBody
+ * @param ref - reference to root HTMLElement of DialogBody
+ */
+export declare const useDialogContent_unstable: (props: DialogContentProps, ref: React_2.Ref<HTMLElement>) => DialogContentState;
+
+/**
+ * Apply styling to the DialogContent slots based on the state
+ */
+export declare const useDialogContentStyles_unstable: (state: DialogContentState) => DialogContentState;
+
 /**
  * Create the state required to render DialogSurface.
  *

package/lib/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"../src/","sources":["Dialog.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Dialog/index';\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/Dialog.ts"],"names":[],"mappings":"AAAA,cAAc,2BAA2B,CAAC","sourcesContent":["export * from './components/Dialog/index';\n"]}

package/lib/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogActions.js","sourceRoot":"../src/","sources":["DialogActions.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogActions/index';\n"]}
+{"version":3,"file":"DialogActions.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogActions.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogActions/index';\n"]}

package/lib/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogBody.js","sourceRoot":"../src/","sources":["DialogBody.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/DialogBody/index';\n"]}
+{"version":3,"file":"DialogBody.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogBody.ts"],"names":[],"mappings":"AAAA,cAAc,+BAA+B,CAAC","sourcesContent":["export * from './components/DialogBody/index';\n"]}

package/lib/DialogContent.js

@@ -0,0 +1,2 @@
+export * from './components/DialogContent/index';
+//# sourceMappingURL=DialogContent.js.map

package/lib/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContent.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogContent.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogContent/index';\n"]}

package/lib/DialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogSurface.js","sourceRoot":"../src/","sources":["DialogSurface.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogSurface/index';\n"]}
+{"version":3,"file":"DialogSurface.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogSurface.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogSurface/index';\n"]}

package/lib/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTitle.js","sourceRoot":"../src/","sources":["DialogTitle.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/DialogTitle/index';\n"]}
+{"version":3,"file":"DialogTitle.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogTitle.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC","sourcesContent":["export * from './components/DialogTitle/index';\n"]}

package/lib/DialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogTrigger.js","sourceRoot":"../src/","sources":["DialogTrigger.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogTrigger/index';\n"]}
+{"version":3,"file":"DialogTrigger.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/DialogTrigger.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './components/DialogTrigger/index';\n"]}

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;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/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/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 } 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/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC","sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-dialog/src/components/Dialog/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC","sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\n"]}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/renderDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,gBAAtD;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAqB,aAArB,KAA2D;EAC9F,MAAM;IAAE,OAAF;IAAW;EAAX,IAAuB,KAA7B;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAf,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACG,OADH,EAEG,OAFH,CADF,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/renderDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,gBAAtD;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAqB,aAArB,KAA2D;EAC9F,MAAM;IAAE,OAAF;IAAW;EAAX,IAAuB,KAA7B;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAf,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACG,OADH,EAEG,OAFH,CADF,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

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":["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":["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/"}