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

package/lib/utils/useDisableBodyScroll.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useDisableBodyScroll.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,iCAAnC;AACA,SAAS,WAAT,QAA4B,OAA5B;AAEA,MAAM,wBAAwB,GAAG,8BAAjC;AAUA;;AAEG;;AACH,OAAM,SAAU,oBAAV,GAA8B;EAClC,MAAM;IAAE;EAAF,IAAqB,kBAAkB,EAA7C;EACA,OAAO,WAAW,CAAC,MAAK;IACtB,IAAI,cAAJ,EAAoB;MAClB,OAAO,aAAa,CAAC,cAAc,CAAC,IAAhB,CAApB;IACD;EACF,CAJiB,EAIf,CAAC,cAAD,CAJe,CAAlB;AAKD;AAED;;;;AAIG;;AACH,OAAM,SAAU,aAAV,CAAwB,MAAxB,EAA2C;;;EAC/C,MAAM;IAAE;EAAF,IAAkB,MAAM,CAAC,aAAP,CAAqB,eAA7C;EACA,MAAM,UAAU,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,aAAP,CAAqB,WAArB,MAAgC,IAAhC,IAAgC,EAAA,KAAA,KAAA,CAAhC,GAAgC,KAAA,CAAhC,GAAgC,EAAA,CAAE,UAAlC,MAA4C,IAA5C,IAA4C,EAAA,KAAA,KAAA,CAA5C,GAA4C,EAA5C,GAAgD,CAAnE;EACA,4BAA4B,CAAC,MAAD,CAA5B;;EACA,IAAI,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC,KAA2C,CAA/C,EAAkD;IAChD,MAAM,CAAC,KAAP,CAAa,QAAb,GAAwB,QAAxB;IACA,MAAM,CAAC,KAAP,CAAa,YAAb,GAA4B,GAAG,UAAU,GAAG,WAAW,IAAvD;EACD;;EACD,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC;EACA,OAAO,MAAK;IACV,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC;;IACA,IAAI,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC,KAA2C,CAA/C,EAAkD;MAChD,MAAM,CAAC,KAAP,CAAa,QAAb,GAAwB,MAAM,CAAC,wBAAD,CAAN,CAAiC,qBAAzD;MACA,MAAM,CAAC,KAAP,CAAa,YAAb,GAA4B,MAAM,CAAC,wBAAD,CAAN,CAAiC,yBAA7D;IACD;EACF,CAND;AAOD;;AAED,SAAS,4BAAT,CAAsC,OAAtC,EAA0D;;;;;EACxD,CAAA,EAAA,GAAA,CAAA,EAAA,GAAC,OAAD,EAAwC,wBAAxC,CAAA,MAAgE,IAAhE,IAAgE,EAAA,KAAA,KAAA,CAAhE,GAAgE,EAAhE,GAAgE,EAAA,CAAxB,wBAAwB,CAAA,GAAM;IACpE,KAAK,EAAE,CAD6D;IAEpE,qBAAqB,EAAE,OAAO,CAAC,KAAR,CAAc,QAF+B;IAGpE,yBAAyB,EAAE,OAAO,CAAC,KAAR,CAAc;EAH2B,CAAtE;AAKD","sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\n\nconst disableScrollElementProp = '__fluentDisableScrollElement' as const;\n\ntype FluentDisableScrollElement = HTMLElement & {\n  [disableScrollElementProp]: {\n    count: number;\n    previousOverflowStyle: string;\n    previousPaddingRightStyle: string;\n  };\n};\n\n/**\n * hook that disables body scrolling through `overflow: hidden` CSS property\n */\nexport function useDisableBodyScroll() {\n  const { targetDocument } = useFluent_unstable();\n  return useCallback(() => {\n    if (targetDocument) {\n      return disableScroll(targetDocument.body);\n    }\n  }, [targetDocument]);\n}\n\n/**\n * disables scrolling from a given element through `overflow: hidden` CSS property\n * @param target - element to disable scrolling from\n * @returns a method for enabling scrolling again\n */\nexport function disableScroll(target: HTMLElement) {\n  const { clientWidth } = target.ownerDocument.documentElement;\n  const innerWidth = target.ownerDocument.defaultView?.innerWidth ?? 0;\n  assertIsDisableScrollElement(target);\n  if (target[disableScrollElementProp].count === 0) {\n    target.style.overflow = 'hidden';\n    target.style.paddingRight = `${innerWidth - clientWidth}px`;\n  }\n  target[disableScrollElementProp].count++;\n  return () => {\n    target[disableScrollElementProp].count--;\n    if (target[disableScrollElementProp].count === 0) {\n      target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;\n      target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;\n    }\n  };\n}\n\nfunction assertIsDisableScrollElement(element: HTMLElement): asserts element is FluentDisableScrollElement {\n  (element as FluentDisableScrollElement)[disableScrollElementProp] ??= {\n    count: 0,\n    previousOverflowStyle: element.style.overflow,\n    previousPaddingRightStyle: element.style.paddingRight,\n  };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/utils/useDisableBodyScroll.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,iCAAnC;AACA,SAAS,WAAT,QAA4B,OAA5B;AAEA,MAAM,wBAAwB,GAAG,8BAAjC;AAUA;;AAEG;;AACH,OAAM,SAAU,oBAAV,GAA8B;EAClC,MAAM;IAAE;EAAF,IAAqB,kBAAkB,EAA7C;EACA,OAAO,WAAW,CAAC,MAAK;IACtB,IAAI,cAAJ,EAAoB;MAClB,OAAO,aAAa,CAAC,cAAc,CAAC,IAAhB,CAApB;IACD;EACF,CAJiB,EAIf,CAAC,cAAD,CAJe,CAAlB;AAKD;AAED;;;;AAIG;;AACH,OAAM,SAAU,aAAV,CAAwB,MAAxB,EAA2C;;;EAC/C,MAAM;IAAE;EAAF,IAAkB,MAAM,CAAC,aAAP,CAAqB,eAA7C;EACA,MAAM,UAAU,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAM,CAAC,aAAP,CAAqB,WAArB,MAAgC,IAAhC,IAAgC,EAAA,KAAA,KAAA,CAAhC,GAAgC,KAAA,CAAhC,GAAgC,EAAA,CAAE,UAAlC,MAA4C,IAA5C,IAA4C,EAAA,KAAA,KAAA,CAA5C,GAA4C,EAA5C,GAAgD,CAAnE;EACA,4BAA4B,CAAC,MAAD,CAA5B;;EACA,IAAI,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC,KAA2C,CAA/C,EAAkD;IAChD,MAAM,CAAC,KAAP,CAAa,QAAb,GAAwB,QAAxB;IACA,MAAM,CAAC,KAAP,CAAa,YAAb,GAA4B,GAAG,UAAU,GAAG,WAAW,IAAvD;EACD;;EACD,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC;EACA,OAAO,MAAK;IACV,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC;;IACA,IAAI,MAAM,CAAC,wBAAD,CAAN,CAAiC,KAAjC,KAA2C,CAA/C,EAAkD;MAChD,MAAM,CAAC,KAAP,CAAa,QAAb,GAAwB,MAAM,CAAC,wBAAD,CAAN,CAAiC,qBAAzD;MACA,MAAM,CAAC,KAAP,CAAa,YAAb,GAA4B,MAAM,CAAC,wBAAD,CAAN,CAAiC,yBAA7D;IACD;EACF,CAND;AAOD;;AAED,SAAS,4BAAT,CAAsC,OAAtC,EAA0D;;;;;EACxD,CAAA,EAAA,GAAA,CAAA,EAAA,GAAC,OAAD,EAAwC,wBAAxC,CAAA,MAAgE,IAAhE,IAAgE,EAAA,KAAA,KAAA,CAAhE,GAAgE,EAAhE,GAAgE,EAAA,CAAxB,wBAAwB,CAAA,GAAM;IACpE,KAAK,EAAE,CAD6D;IAEpE,qBAAqB,EAAE,OAAO,CAAC,KAAR,CAAc,QAF+B;IAGpE,yBAAyB,EAAE,OAAO,CAAC,KAAR,CAAc;EAH2B,CAAtE;AAKD","sourcesContent":["import { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { useCallback } from 'react';\n\nconst disableScrollElementProp = '__fluentDisableScrollElement' as const;\n\ntype FluentDisableScrollElement = HTMLElement & {\n  [disableScrollElementProp]: {\n    count: number;\n    previousOverflowStyle: string;\n    previousPaddingRightStyle: string;\n  };\n};\n\n/**\n * hook that disables body scrolling through `overflow: hidden` CSS property\n */\nexport function useDisableBodyScroll() {\n  const { targetDocument } = useFluent_unstable();\n  return useCallback(() => {\n    if (targetDocument) {\n      return disableScroll(targetDocument.body);\n    }\n  }, [targetDocument]);\n}\n\n/**\n * disables scrolling from a given element through `overflow: hidden` CSS property\n * @param target - element to disable scrolling from\n * @returns a method for enabling scrolling again\n */\nexport function disableScroll(target: HTMLElement) {\n  const { clientWidth } = target.ownerDocument.documentElement;\n  const innerWidth = target.ownerDocument.defaultView?.innerWidth ?? 0;\n  assertIsDisableScrollElement(target);\n  if (target[disableScrollElementProp].count === 0) {\n    target.style.overflow = 'hidden';\n    target.style.paddingRight = `${innerWidth - clientWidth}px`;\n  }\n  target[disableScrollElementProp].count++;\n  return () => {\n    target[disableScrollElementProp].count--;\n    if (target[disableScrollElementProp].count === 0) {\n      target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;\n      target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;\n    }\n  };\n}\n\nfunction assertIsDisableScrollElement(element: HTMLElement): asserts element is FluentDisableScrollElement {\n  (element as FluentDisableScrollElement)[disableScrollElementProp] ??= {\n    count: 0,\n    previousOverflowStyle: element.style.overflow,\n    previousPaddingRightStyle: element.style.paddingRight,\n  };\n}\n"],"sourceRoot":"../src/"}

package/lib/utils/useFocusFirstElement.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useFocusFinders } from '@fluentui/react-tabster';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
-import { isHTMLDialogElement } from './isHTMLDialogElement';
 /**
  * Focus first element on content when dialog is opened,
  */
@@ -26,14 +25,14 @@ export function useFocusFirstElement(open, modalType) {
     const element = dialogRef.current && findFirstFocusable(dialogRef.current);
 
     if (element) {
-      // this is only required for non native dialogs
-      if (!isHTMLDialogElement(dialogRef.current)) {
-        element.focus();
-      }
-    } else if (process.env.NODE_ENV !== 'production') {
-      (_b = triggerRef.current) === null || _b === void 0 ? void 0 : _b.blur(); // eslint-disable-next-line no-console
+      element.focus();
+    } else {
+      (_b = dialogRef.current) === null || _b === void 0 ? void 0 : _b.focus(); // https://github.com/microsoft/fluentui/issues/25150
 
-      console.warn('A Dialog should have at least one focusable element inside DialogSurface');
+      if (process.env.NODE_ENV !== 'production') {
+        // eslint-disable-next-line no-console
+        console.warn(['@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.', 'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`'].join('\n'));
+      }
     }
   }, [findFirstFocusable, open, modalType, targetDocument]);
   return dialogRef;

package/lib/utils/useFocusFirstElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/useFocusFirstElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,kBAAT,QAAmC,iCAAnC;AAGA,SAAS,mBAAT,QAAoC,uBAApC;AAEA;;AAEG;;AACH,OAAM,SAAU,oBAAV,CAA+B,IAA/B,EAA8C,SAA9C,EAAwE;EAC5E,MAAM;IAAE;EAAF,IAAyB,eAAe,EAA9C;EACA,MAAM;IAAE;EAAF,IAAqB,kBAAkB,EAA7C;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAN,CAAmC,IAAnC,CAAlB;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAN,EAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;;;IACnB,IAAI,CAAC,IAAL,EAAW;MACT,OAAO,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,KAAF,EAAzB;IACD;;IACD,UAAU,CAAC,OAAX,GAAqB,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAArC;IACA,MAAM,OAAO,GAAG,SAAS,CAAC,OAAV,IAAqB,kBAAkB,CAAC,SAAS,CAAC,OAAX,CAAvD;;IACA,IAAI,OAAJ,EAAa;MACX;MACA,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,OAAX,CAAxB,EAA6C;QAC3C,OAAO,CAAC,KAAR;MACD;IACF,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;MAChD,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,IAAF,EAAlB,CADgD,CAEhD;;MACA,OAAO,CAAC,IAAR,CAAa,0EAAb;IACD;EACF,CAhBD,EAgBG,CAAC,kBAAD,EAAqB,IAArB,EAA2B,SAA3B,EAAsC,cAAtC,CAhBH;EAkBA,OAAO,SAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface';\nimport type { DialogModalType } from '../Dialog';\nimport { isHTMLDialogElement } from './isHTMLDialogElement';\n\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open: boolean, modalType: DialogModalType) {\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent_unstable();\n  const dialogRef = React.useRef<DialogSurfaceElement>(null);\n  const triggerRef = React.useRef<HTMLElement>();\n\n  React.useEffect(() => {\n    if (!open) {\n      return triggerRef.current?.focus();\n    }\n    triggerRef.current = targetDocument?.activeElement as HTMLElement | undefined;\n    const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n    if (element) {\n      // this is only required for non native dialogs\n      if (!isHTMLDialogElement(dialogRef.current)) {\n        element.focus();\n      }\n    } else if (process.env.NODE_ENV !== 'production') {\n      triggerRef.current?.blur();\n      // eslint-disable-next-line no-console\n      console.warn('A Dialog should have at least one focusable element inside DialogSurface');\n    }\n  }, [findFirstFocusable, open, modalType, targetDocument]);\n\n  return dialogRef;\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/utils/useFocusFirstElement.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,kBAAT,QAAmC,iCAAnC;AAIA;;AAEG;;AACH,OAAM,SAAU,oBAAV,CAA+B,IAA/B,EAA8C,SAA9C,EAAwE;EAC5E,MAAM;IAAE;EAAF,IAAyB,eAAe,EAA9C;EACA,MAAM;IAAE;EAAF,IAAqB,kBAAkB,EAA7C;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,MAAN,CAAmC,IAAnC,CAAlB;EACA,MAAM,UAAU,GAAG,KAAK,CAAC,MAAN,EAAnB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;;;IACnB,IAAI,CAAC,IAAL,EAAW;MACT,OAAO,CAAA,EAAA,GAAA,UAAU,CAAC,OAAX,MAAkB,IAAlB,IAAkB,EAAA,KAAA,KAAA,CAAlB,GAAkB,KAAA,CAAlB,GAAkB,EAAA,CAAE,KAAF,EAAzB;IACD;;IACD,UAAU,CAAC,OAAX,GAAqB,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAc,KAAA,CAAd,GAAA,cAAc,CAAE,aAArC;IACA,MAAM,OAAO,GAAG,SAAS,CAAC,OAAV,IAAqB,kBAAkB,CAAC,SAAS,CAAC,OAAX,CAAvD;;IACA,IAAI,OAAJ,EAAa;MACX,OAAO,CAAC,KAAR;IACD,CAFD,MAEO;MACL,CAAA,EAAA,GAAA,SAAS,CAAC,OAAV,MAAiB,IAAjB,IAAiB,EAAA,KAAA,KAAA,CAAjB,GAAiB,KAAA,CAAjB,GAAiB,EAAA,CAAE,KAAF,EAAjB,CADK,CACuB;;MAC5B,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;QACzC;QACA,OAAO,CAAC,IAAR,CACE,CACE,mGADF,EAEE,kGAFF,EAGE,IAHF,CAGO,IAHP,CADF;MAMD;IACF;EACF,CApBD,EAoBG,CAAC,kBAAD,EAAqB,IAArB,EAA2B,SAA3B,EAAsC,cAAtC,CApBH;EAsBA,OAAO,SAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport type { DialogSurfaceElement } from '../DialogSurface';\nimport type { DialogModalType } from '../Dialog';\n\n/**\n * Focus first element on content when dialog is opened,\n */\nexport function useFocusFirstElement(open: boolean, modalType: DialogModalType) {\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent_unstable();\n  const dialogRef = React.useRef<DialogSurfaceElement>(null);\n  const triggerRef = React.useRef<HTMLElement>();\n\n  React.useEffect(() => {\n    if (!open) {\n      return triggerRef.current?.focus();\n    }\n    triggerRef.current = targetDocument?.activeElement as HTMLElement | undefined;\n    const element = dialogRef.current && findFirstFocusable(dialogRef.current);\n    if (element) {\n      element.focus();\n    } else {\n      dialogRef.current?.focus(); // https://github.com/microsoft/fluentui/issues/25150\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn(\n          [\n            '@fluentui/react-dialog: a Dialog should have at least one focusable element inside DialogSurface.',\n            'Please add at least a close button either on `DialogTitle` action slot or inside `DialogActions`',\n          ].join('\\n'),\n        );\n      }\n    }\n  }, [findFirstFocusable, open, modalType, targetDocument]);\n\n  return dialogRef;\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Dialog.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Dialog/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/Dialog.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Dialog/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DialogActions.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogActions/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/DialogActions.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogActions/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DialogBody.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogBody/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/DialogBody.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,+BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogBody/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/DialogContent.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./components/DialogContent/index"), exports);
+//# sourceMappingURL=DialogContent.js.map

package/lib-commonjs/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-dialog/src/DialogContent.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogContent/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/DialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DialogSurface.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogSurface/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/DialogSurface.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogSurface/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/DialogTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DialogTitle.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogTitle/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/DialogTitle.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogTitle/index';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/DialogTrigger.js.map

@@ -1 +1 @@
-{"version":3,"sources":["DialogTrigger.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogTrigger/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/DialogTrigger.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/DialogTrigger/index';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAEA;;;;;;AAMG;;;AACU,OAAA,CAAA,MAAA,gBAAgC,KAAK,CAAC,IAAN,CAAW,KAAK,IAAG;EAC9D,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,CAAd;EACA,MAAM,aAAa,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,CAAtB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,aAA7B,CAAP;AACD,CAL4C,CAAhC;AAOb,OAAA,CAAA,MAAA,CAAO,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,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAEA;;;;;;AAMG;;;AACU,OAAA,CAAA,MAAA,gBAAgC,KAAK,CAAC,IAAN,CAAW,KAAK,IAAG;EAC9D,MAAM,KAAK,GAAG,WAAA,CAAA,kBAAA,CAAmB,KAAnB,CAAd;EACA,MAAM,aAAa,GAAG,wBAAA,CAAA,+BAAA,CAAgC,KAAhC,CAAtB;EAEA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,aAA7B,CAAP;AACD,CAL4C,CAAhC;AAOb,OAAA,CAAA,MAAA,CAAO,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-commonjs/components/Dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/Dialog/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,UAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,aAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/renderDialog.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAqB,aAArB,KAA2D;EAC9F,MAAM;IAAE,OAAF;IAAW;EAAX,IAAuB,KAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,UAAA,CAAA,cAAD,EAAe;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAf,EACE,KAAA,CAAA,aAAA,CAAC,UAAA,CAAA,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACG,OADH,EAEG,OAFH,CADF,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","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,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAqB,aAArB,KAA2D;EAC9F,MAAM;IAAE,OAAF;IAAW;EAAX,IAAuB,KAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,UAAA,CAAA,cAAD,EAAe;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAf,EACE,KAAA,CAAA,aAAA,CAAC,UAAA,CAAA,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACG,OADH,EAEG,OAFH,CADF,CADF;AAQD,CAXM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","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-commonjs/components/Dialog/useDialog.js

@@ -45,7 +45,6 @@ const useDialog_unstable = props => {
     }
   });
   const focusRef = utils_1.useFocusFirstElement(open, modalType);
-  const nativeControlRef = utils_1.useControlNativeDialogOpenState(open, modalType);
   const disableBodyScroll = utils_1.useDisableBodyScroll();
   const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
   react_utilities_1.useIsomorphicLayoutEffect(() => {
@@ -62,10 +61,10 @@ const useDialog_unstable = props => {
     content: open ? content : null,
     trigger,
     requestOpenChange,
-    dialogBodyID: react_utilities_1.useId('dialog-body-'),
-    dialogTitleID: react_utilities_1.useId('dialog-title-'),
+    dialogContentId: react_utilities_1.useId('dialog-content-'),
+    dialogTitleId: react_utilities_1.useId('dialog-title-'),
     isNestedDialog: react_context_selector_1.useHasParentContext(contexts_1.DialogContext),
-    dialogRef: react_utilities_1.useMergedRefs(focusRef, nativeControlRef)
+    dialogRef: focusRef
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/useDialog.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAOA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;;;;;;AAOG;;;AACI,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,iBAAA,CAAA,oBAAA,CAAqB;IAC3C,KAAK,EAAE,KAAK,CAAC,IAD8B;IAE3C,YAAY,EAAE,KAAK,CAAC,WAFuB;IAG3C,YAAY,EAAE;EAH6B,CAArB,CAAxB;EAMA,MAAM,iBAAiB,GAAG,iBAAA,CAAA,gBAAA,CAAkB,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,CARyB,CAA1B;EAUA,MAAM,QAAQ,GAAG,OAAA,CAAA,oBAAA,CAAqB,IAArB,EAA2B,SAA3B,CAAjB;EACA,MAAM,gBAAgB,GAAG,OAAA,CAAA,+BAAA,CAAgC,IAAhC,EAAsC,SAAtC,CAAzB;EACA,MAAM,iBAAiB,GAAG,OAAA,CAAA,oBAAA,EAA1B;EACA,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,IAAI,SAAS,KAAK,WAAvB,CAAlC;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,kBAAJ,EAAwB;MACtB,OAAO,iBAAiB,EAAxB;IACD;EACF,CAJD,EAIG,CAAC,iBAAD,EAAoB,kBAApB,CAJH;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,iBAAA,CAAA,KAAA,CAAM,cAAN,CATT;IAUL,aAAa,EAAE,iBAAA,CAAA,KAAA,CAAM,eAAN,CAVV;IAWL,cAAc,EAAE,wBAAA,CAAA,mBAAA,CAAoB,UAAA,CAAA,aAApB,CAXX;IAYL,SAAS,EAAE,iBAAA,CAAA,aAAA,CAAc,QAAd,EAAwB,gBAAxB;EAZN,CAAP;AAcD,CA9CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AAgDb;;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,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAIA;;;;;;;AAOG;;;AACI,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,iBAAA,CAAA,oBAAA,CAAqB;IAC3C,KAAK,EAAE,KAAK,CAAC,IAD8B;IAE3C,YAAY,EAAE,KAAK,CAAC,WAFuB;IAG3C,YAAY,EAAE;EAH6B,CAArB,CAAxB;EAMA,MAAM,iBAAiB,GAAG,iBAAA,CAAA,gBAAA,CAAkB,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,CARyB,CAA1B;EAUA,MAAM,QAAQ,GAAG,OAAA,CAAA,oBAAA,CAAqB,IAArB,EAA2B,SAA3B,CAAjB;EACA,MAAM,iBAAiB,GAAG,OAAA,CAAA,oBAAA,EAA1B;EACA,MAAM,kBAAkB,GAAG,OAAO,CAAC,IAAI,IAAI,SAAS,KAAK,WAAvB,CAAlC;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,kBAAJ,EAAwB;MACtB,OAAO,iBAAiB,EAAxB;IACD;EACF,CAJD,EAIG,CAAC,iBAAD,EAAoB,kBAApB,CAJH;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,iBAAA,CAAA,KAAA,CAAM,iBAAN,CATZ;IAUL,aAAa,EAAE,iBAAA,CAAA,KAAA,CAAM,eAAN,CAVV;IAWL,cAAc,EAAE,wBAAA,CAAA,mBAAA,CAAoB,UAAA,CAAA,aAApB,CAXX;IAYL,SAAS,EAAE;EAZN,CAAP;AAcD,CA7CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB;AA+Cb;;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-commonjs/components/Dialog/useDialogContextValues.js

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

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/useDialogContextValues.ts"],"names":[],"mappings":";;;;;;;AAGA,SAAgB,+BAAhB,CAAgD,KAAhD,EAAkE;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;;AApBD,OAAA,CAAA,+BAAA,GAAA,+BAAA","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,SAAgB,+BAAhB,CAAgD,KAAhD,EAAkE;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;;AApBD,OAAA,CAAA,+BAAA,GAAA,+BAAA","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-commonjs/components/DialogActions/DialogActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogActions/DialogActions.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,GAAjC,CAAd;EAEA,wBAAA,CAAA,+BAAA,CAAgC,KAAhC;EACA,OAAO,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,CAAP;AACD,CALqE,CAAzD;AAOb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles';\nimport type { DialogActionsProps } from './DialogActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions: ForwardRefComponent<DialogActionsProps> = React.forwardRef((props, ref) => {\n  const state = useDialogActions_unstable(props, ref);\n\n  useDialogActionsStyles_unstable(state);\n  return renderDialogActions_unstable(state);\n});\n\nDialogActions.displayName = 'DialogActions';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogActions/DialogActions.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,GAAjC,CAAd;EAEA,wBAAA,CAAA,+BAAA,CAAgC,KAAhC;EACA,OAAO,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,CAAP;AACD,CALqE,CAAzD;AAOb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useDialogActions_unstable } from './useDialogActions';\nimport { renderDialogActions_unstable } from './renderDialogActions';\nimport { useDialogActionsStyles_unstable } from './useDialogActionsStyles';\nimport type { DialogActionsProps } from './DialogActions.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * `DialogActions` is a container for the actions of the dialog.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogActions: ForwardRefComponent<DialogActionsProps> = React.forwardRef((props, ref) => {\n  const state = useDialogActions_unstable(props, ref);\n\n  useDialogActionsStyles_unstable(state);\n  return renderDialogActions_unstable(state);\n});\n\nDialogActions.displayName = 'DialogActions';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogActions/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogActions/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DialogActions';\nexport * from './DialogActions.types';\nexport * from './renderDialogActions';\nexport * from './useDialogActions';\nexport * from './useDialogActionsStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogActions/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DialogActions';\nexport * from './DialogActions.types';\nexport * from './renderDialogActions';\nexport * from './useDialogActions';\nexport * from './useDialogActionsStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogActions/renderDialogActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogActions/renderDialogActions.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA8B;EACxE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA6B,KAA7B,CAA7B,CADwE,CAGxE;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState) => {\n  const { slots, slotProps } = getSlots<DialogActionsSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogActions/renderDialogActions.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA8B;EACxE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA6B,KAA7B,CAA7B,CADwE,CAGxE;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogActionsState, DialogActionsSlots } from './DialogActions.types';\n\n/**\n * Render the final JSX of DialogActions\n */\nexport const renderDialogActions_unstable = (state: DialogActionsState) => {\n  const { slots, slotProps } = getSlots<DialogActionsSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogActions/useDialogActions.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogActions/useDialogActions.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,QAAQ,GAAG;EAAb,IAAuB,KAA7B;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B,CAJD;IAQL;EARK,CAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n  props: DialogActionsProps,\n  ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n  const { position = 'end' } = props;\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    position,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogActions/useDialogActions.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;EACtB,MAAM;IAAE,QAAQ,GAAG;EAAb,IAAuB,KAA7B;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,GAAG;IAF8B,CAA7B,CAJD;IAQL;EARK,CAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { DialogActionsProps, DialogActionsState } from './DialogActions.types';\n\n/**\n * Create the state required to render DialogActions.\n *\n * The returned state can be modified with hooks such as useDialogActionsStyles_unstable,\n * before being passed to renderDialogActions_unstable.\n *\n * @param props - props from this instance of DialogActions\n * @param ref - reference to root HTMLElement of DialogActions\n */\nexport const useDialogActions_unstable = (\n  props: DialogActionsProps,\n  ref: React.Ref<HTMLElement>,\n): DialogActionsState => {\n  const { position = 'end' } = props;\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    position,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogActions/useDialogActionsStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogActions/useDialogActionsStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,WAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAOa,OAAA,CAAA,uBAAA,GAA8D;EACzE,IAAI,EAAE;AADmE,CAA9D;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,uBAAA,CAAwB,IADH,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,KAAmB,OAAnB,IAA8B,MAAM,CAAC,iBAHhB,EAIrB,KAAK,CAAC,QAAN,KAAmB,KAAnB,IAA4B,MAAM,CAAC,eAJd,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAOA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n  DIALOG_GAP,\n  ACTIONS_END_GRID_AREA,\n  ACTIONS_START_GRID_AREA,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n  root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    height: 'fit-content',\n    boxSizing: 'border-box',\n    display: 'flex',\n    ...shorthands.gap(DIALOG_GAP),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      flexDirection: 'column',\n      justifySelf: 'stretch',\n    },\n  },\n  gridPositionEnd: {\n    justifySelf: 'end',\n    ...shorthands.gridArea(ACTIONS_END_GRID_AREA),\n  },\n  gridPositionStart: {\n    justifySelf: 'start',\n    ...shorthands.gridArea(ACTIONS_START_GRID_AREA),\n  },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    dialogActionsClassNames.root,\n    styles.root,\n    state.position === 'start' && styles.gridPositionStart,\n    state.position === 'end' && styles.gridPositionEnd,\n    state.root.className,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogActions/useDialogActionsStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,WAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAOa,OAAA,CAAA,uBAAA,GAA8D;EACzE,IAAI,EAAE;AADmE,CAA9D;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAqBA;;AAEG;;;AACI,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,uBAAA,CAAwB,IADH,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,KAAmB,OAAnB,IAA8B,MAAM,CAAC,iBAHhB,EAIrB,KAAK,CAAC,QAAN,KAAmB,KAAnB,IAA4B,MAAM,CAAC,eAJd,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;EAOA,OAAO,KAAP;AACD,CAVM;;AAAM,OAAA,CAAA,+BAAA,GAA+B,+BAA/B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogActionsSlots, DialogActionsState } from './DialogActions.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n  DIALOG_GAP,\n  ACTIONS_END_GRID_AREA,\n  ACTIONS_START_GRID_AREA,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n} from '../../contexts/constants';\n\nexport const dialogActionsClassNames: SlotClassNames<DialogActionsSlots> = {\n  root: 'fui-DialogActions',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    height: 'fit-content',\n    boxSizing: 'border-box',\n    display: 'flex',\n    ...shorthands.gap(DIALOG_GAP),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      flexDirection: 'column',\n      justifySelf: 'stretch',\n    },\n  },\n  gridPositionEnd: {\n    justifySelf: 'end',\n    ...shorthands.gridArea(ACTIONS_END_GRID_AREA),\n  },\n  gridPositionStart: {\n    justifySelf: 'start',\n    ...shorthands.gridArea(ACTIONS_START_GRID_AREA),\n  },\n});\n\n/**\n * Apply styling to the DialogActions slots based on the state\n */\nexport const useDialogActionsStyles_unstable = (state: DialogActionsState): DialogActionsState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(\n    dialogActionsClassNames.root,\n    styles.root,\n    state.position === 'start' && styles.gridPositionStart,\n    state.position === 'end' && styles.gridPositionEnd,\n    state.root.className,\n  );\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogBody/DialogBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogBody/DialogBody.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;EAEA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;EACA,OAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDialogBody_unstable(props, ref);\n\n  useDialogBodyStyles_unstable(state);\n  return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/DialogBody.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,eAAA,CAAA,sBAAA,CAAuB,KAAvB,EAA8B,GAA9B,CAAd;EAEA,qBAAA,CAAA,4BAAA,CAA6B,KAA7B;EACA,OAAO,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,CAAP;AACD,CAL+D,CAAnD;AAOb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { useDialogBody_unstable } from './useDialogBody';\nimport { renderDialogBody_unstable } from './renderDialogBody';\nimport { useDialogBodyStyles_unstable } from './useDialogBodyStyles';\nimport type { DialogBodyProps } from './DialogBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `DialogBody` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogBody: ForwardRefComponent<DialogBodyProps> = React.forwardRef((props, ref) => {\n  const state = useDialogBody_unstable(props, ref);\n\n  useDialogBodyStyles_unstable(state);\n  return renderDialogBody_unstable(state);\n});\n\nDialogBody.displayName = 'DialogBody';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogBody/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogBody/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DialogBody';\nexport * from './DialogBody.types';\nexport * from './renderDialogBody';\nexport * from './useDialogBody';\nexport * from './useDialogBodyStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DialogBody';\nexport * from './DialogBody.types';\nexport * from './renderDialogBody';\nexport * from './useDialogBody';\nexport * from './useDialogBodyStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogBody/renderDialogBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogBody/renderDialogBody.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B,CADkE,CAGlE;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState) => {\n  const { slots, slotProps } = getSlots<DialogBodySlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/renderDialogBody.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,yBAAyB,GAAI,KAAD,IAA2B;EAClE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA0B,KAA1B,CAA7B,CADkE,CAGlE;;EACA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CALM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogBodyState, DialogBodySlots } from './DialogBody.types';\n\n/**\n * Render the final JSX of DialogBody\n */\nexport const renderDialogBody_unstable = (state: DialogBodyState) => {\n  const { slots, slotProps } = getSlots<DialogBodySlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogBody/useDialogBody.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useDialogBody_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const contexts_1 = /*#__PURE__*/require("../../contexts");
 /**
  * Create the state required to render DialogBody.
  *
@@ -20,13 +18,14 @@ const contexts_1 = /*#__PURE__*/require("../../contexts");
 
 
 const useDialogBody_unstable = (props, ref) => {
+  var _a;
+
   return {
     components: {
       root: 'div'
     },
-    root: react_utilities_1.getNativeElementProps('div', {
+    root: react_utilities_1.getNativeElementProps((_a = props.as) !== null && _a !== void 0 ? _a : 'div', {
       ref,
-      id: contexts_1.useDialogContext_unstable(ctx => ctx.dialogBodyID),
       ...props
     })
   };

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

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogBody/useDialogBody.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;EAC7G,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B;MACjC,GADiC;MAEjC,EAAE,EAAE,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,YAArC,CAF6B;MAGjC,GAAG;IAH8B,CAA7B;EAJD,CAAP;AAUD,CAXM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAyB,GAAzB,KAAyE;;;EAC7G,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,KAAlC,EAAyC;MAC7C,GAD6C;MAE7C,GAAG;IAF0C,CAAzC;EAJD,CAAP;AASD,CAVM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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-commonjs/components/DialogBody/useDialogBodyStyles.js

@@ -7,9 +7,7 @@ exports.useDialogBodyStyles_unstable = exports.dialogBodyClassNames = void 0;
 
 const react_1 = /*#__PURE__*/require("@griffel/react");
 
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
-const constants_1 = /*#__PURE__*/require("../../contexts/constants");
+const contexts_1 = /*#__PURE__*/require("../../contexts");
 
 exports.dialogBodyClassNames = {
   root: 'fui-DialogBody'
@@ -20,22 +18,33 @@ exports.dialogBodyClassNames = {
 
 const useStyles = /*#__PURE__*/react_1.__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
@@ -44,9 +53,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
 
 const useDialogBodyStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_1.mergeClasses(exports.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 = react_1.mergeClasses(exports.dialogBodyClassNames.root, styles.root, state.root.className);
   return state;
 };
 

package/lib-commonjs/components/DialogBody/useDialogBodyStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAEa,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE;AAD6D,CAAxD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB,CAFsF,CAItF;EACA;;EAEA,OAAO,KAAP;AACD,CARM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { BODY_GRID_AREA } from '../../contexts/constants';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n  root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    width: '100%',\n    height: '100%',\n    overflowY: 'auto',\n    minHeight: '32px',\n    boxSizing: 'border-box',\n    ...shorthands.gridArea(BODY_GRID_AREA),\n    ...typographyStyles.body1,\n  },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAGA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAWa,OAAA,CAAA,oBAAA,GAAwD;EACnE,IAAI,EAAE;AAD6D,CAAxD;AAIb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAlB;AAiCA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CAAa,OAAA,CAAA,oBAAA,CAAqB,IAAlC,EAAwC,MAAM,CAAC,IAA/C,EAAqD,KAAK,CAAC,IAAN,CAAW,SAAhE,CAAvB;EAEA,OAAO,KAAP;AACD,CALM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport {\n  ACTIONS_END_GRID_AREA,\n  ACTIONS_START_GRID_AREA,\n  CONTENT_GRID_AREA,\n  DIALOG_GAP,\n  MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  SURFACE_PADDING,\n  TITLE_ACTION_GRID_AREA,\n  TITLE_GRID_AREA,\n} from '../../contexts';\n\nexport const dialogBodyClassNames: SlotClassNames<DialogBodySlots> = {\n  root: 'fui-DialogBody',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'grid',\n    '&::backdrop': {\n      backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    },\n    width: `100%`,\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: `calc(100vh - 2 * ${SURFACE_PADDING})`,\n    boxSizing: 'border-box',\n    gridTemplateRows: 'auto 1fr auto',\n    gridTemplateColumns: '1fr 1fr auto',\n    gridTemplateAreas: `\n    \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n    \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n    \"${ACTIONS_START_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n    `,\n    ...shorthands.overflow('unset'),\n    ...shorthands.gap(DIALOG_GAP),\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      maxWidth: '100vw',\n      gridTemplateRows: 'auto 1fr auto auto',\n      gridTemplateAreas: `\n        \"${TITLE_GRID_AREA} ${TITLE_GRID_AREA} ${TITLE_ACTION_GRID_AREA}\"\n        \"${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA} ${CONTENT_GRID_AREA}\"\n        \"${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA} ${ACTIONS_START_GRID_AREA}\"\n        \"${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA} ${ACTIONS_END_GRID_AREA}\"\n      `,\n    },\n  },\n});\n\n/**\n * Apply styling to the DialogBody slots based on the state\n */\nexport const useDialogBodyStyles_unstable = (state: DialogBodyState): DialogBodyState => {\n  const styles = useStyles();\n  state.root.className = mergeClasses(dialogBodyClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogContent/DialogContent.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DialogContent = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useDialogContent_1 = /*#__PURE__*/require("./useDialogContent");
+
+const renderDialogContent_1 = /*#__PURE__*/require("./renderDialogContent");
+
+const useDialogContentStyles_1 = /*#__PURE__*/require("./useDialogContentStyles");
+/**
+ * The `DialogContent` is a container where the content of the dialog is rendered.
+ * Apart from styling, this component does not have other behavior.
+ */
+
+
+exports.DialogContent = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDialogContent_1.useDialogContent_unstable(props, ref);
+  useDialogContentStyles_1.useDialogContentStyles_unstable(state);
+  return renderDialogContent_1.renderDialogContent_unstable(state);
+});
+exports.DialogContent.displayName = 'DialogContent';
+//# sourceMappingURL=DialogContent.js.map

package/lib-commonjs/components/DialogContent/DialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/DialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,qBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;AAIA;;;AAGG;;;AACU,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,kBAAA,CAAA,yBAAA,CAA0B,KAA1B,EAAiC,GAAjC,CAAd;EAEA,wBAAA,CAAA,+BAAA,CAAgC,KAAhC;EACA,OAAO,qBAAA,CAAA,4BAAA,CAA6B,KAA7B,CAAP;AACD,CALqE,CAAzD;AAOb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { useDialogContent_unstable } from './useDialogContent';\nimport { renderDialogContent_unstable } from './renderDialogContent';\nimport { useDialogContentStyles_unstable } from './useDialogContentStyles';\nimport type { DialogContentProps } from './DialogContent.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * The `DialogContent` is a container where the content of the dialog is rendered.\n * Apart from styling, this component does not have other behavior.\n */\nexport const DialogContent: ForwardRefComponent<DialogContentProps> = React.forwardRef((props, ref) => {\n  const state = useDialogContent_unstable(props, ref);\n\n  useDialogContentStyles_unstable(state);\n  return renderDialogContent_unstable(state);\n});\n\nDialogContent.displayName = 'DialogContent';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogContent/DialogContent.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=DialogContent.types.js.map

package/lib-commonjs/components/DialogContent/DialogContent.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/DialogContent/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
+tslib_1.__exportStar(require("./DialogContent"), exports);
+
+tslib_1.__exportStar(require("./DialogContent.types"), exports);
+
+tslib_1.__exportStar(require("./renderDialogContent"), exports);
+
+tslib_1.__exportStar(require("./useDialogContent"), exports);
+
+tslib_1.__exportStar(require("./useDialogContentStyles"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/DialogContent/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,uBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './DialogContent';\nexport * from './DialogContent.types';\nexport * from './renderDialogContent';\nexport * from './useDialogContent';\nexport * from './useDialogContentStyles';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogContent/renderDialogContent.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderDialogContent_unstable = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+/**
+ * Render the final JSX of DialogContent
+ */
+
+
+const renderDialogContent_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  });
+};
+
+exports.renderDialogContent_unstable = renderDialogContent_unstable;
+//# sourceMappingURL=renderDialogContent.js.map

package/lib-commonjs/components/DialogContent/renderDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/renderDialogContent.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,4BAA4B,GAAI,KAAD,IAA8B;EACxE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA6B,KAA7B,CAA7B;EAEA,OAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAAP;AACD,CAJM;;AAAM,OAAA,CAAA,4BAAA,GAA4B,4BAA5B","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogContentState, DialogContentSlots } from './DialogContent.types';\n\n/**\n * Render the final JSX of DialogContent\n */\nexport const renderDialogContent_unstable = (state: DialogContentState) => {\n  const { slots, slotProps } = getSlots<DialogContentSlots>(state);\n\n  return <slots.root {...slotProps.root} />;\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/DialogContent/useDialogContent.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDialogContent_unstable = void 0;
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const contexts_1 = /*#__PURE__*/require("../../contexts");
+/**
+ * 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
+ */
+
+
+const useDialogContent_unstable = (props, ref) => {
+  var _a;
+
+  const dialogContentId = contexts_1.useDialogContext_unstable(ctx => ctx.dialogContentId);
+  return {
+    components: {
+      root: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps((_a = props.as) !== null && _a !== void 0 ? _a : 'div', {
+      ref,
+      id: dialogContentId,
+      ...props
+    })
+  };
+};
+
+exports.useDialogContent_unstable = useDialogContent_unstable;
+//# sourceMappingURL=useDialogContent.js.map

package/lib-commonjs/components/DialogContent/useDialogContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-dialog/src/components/DialogContent/useDialogContent.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,yBAAyB,GAAG,CACvC,KADuC,EAEvC,GAFuC,KAGjB;;;EACtB,MAAM,eAAe,GAAG,UAAA,CAAA,yBAAA,CAA0B,GAAG,IAAI,GAAG,CAAC,eAArC,CAAxB;EACA,OAAO;IACL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CADP;IAIL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,CAAA,EAAA,GAAA,KAAK,CAAC,EAAN,MAAQ,IAAR,IAAQ,EAAA,KAAA,KAAA,CAAR,GAAQ,EAAR,GAAY,KAAlC,EAAyC;MAC7C,GAD6C;MAE7C,EAAE,EAAE,eAFyC;MAG7C,GAAG;IAH0C,CAAzC;EAJD,CAAP;AAUD,CAfM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { DialogContentProps, DialogContentState } from './DialogContent.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 useDialogContent_unstable = (\n  props: DialogContentProps,\n  ref: React.Ref<HTMLElement>,\n): DialogContentState => {\n  const dialogContentId = useDialogContext_unstable(ctx => ctx.dialogContentId);\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps(props.as ?? 'div', {\n      ref,\n      id: dialogContentId,\n      ...props,\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}