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

package/lib/contexts/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["contexts/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,+BAA+B,GAAG,sCAAsC,CAAC;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AACtC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC;AAChC,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;AACvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC;AACnD,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAC;AACrD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC","sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_RADIUS = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n\nexport const ACTIONS_START_GRID_AREA = 'actions-start';\nexport const ACTIONS_END_GRID_AREA = 'actions-end';\nexport const TITLE_GRID_AREA = 'title';\nexport const CLOSE_BUTTON_GRID_AREA = 'close-button';\nexport const BODY_GRID_AREA = 'body';\n"]}
+{"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["contexts/constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,+BAA+B,GAAG,sCAAsC,CAAC;AACtF,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC;AACtC,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC;AAChC,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC;AAC3C,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC;AAE1C,MAAM,CAAC,MAAM,uBAAuB,GAAG,eAAe,CAAC;AACvD,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAAC;AACnD,MAAM,CAAC,MAAM,eAAe,GAAG,OAAO,CAAC;AACvC,MAAM,CAAC,MAAM,sBAAsB,GAAG,cAAc,CAAC;AACrD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC","sourcesContent":["export const MEDIA_QUERY_BREAKPOINT_SELECTOR = '@media screen and (max-width: 480px)';\nexport const SURFACE_PADDING = '24px';\nexport const DIALOG_GAP = '8px';\nexport const SURFACE_BORDER_RADIUS = '8px';\nexport const SURFACE_BORDER_WIDTH = '1px';\n\nexport const ACTIONS_START_GRID_AREA = 'actions-start';\nexport const ACTIONS_END_GRID_AREA = 'actions-end';\nexport const TITLE_GRID_AREA = 'title';\nexport const TITLE_ACTION_GRID_AREA = 'close-button';\nexport const BODY_GRID_AREA = 'body';\n"]}

package/lib/contexts/dialogContext.js

@@ -2,10 +2,8 @@ import { createContext, useContextSelector } from '@fluentui/react-context-selec
 const defaultContextValue = {
   open: false,
   modalType: 'modal',
-  triggerRef: {
-    current: null
-  },
-  contentRef: {
+  isNestedDialog: false,
+  dialogRef: {
     current: null
   },
 

package/lib/contexts/dialogContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["contexts/dialogContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAsBA,MAAM,mBAAmB,GAAuB;EAC9C,IAAI,EAAE,KADwC;EAE9C,SAAS,EAAE,OAFmC;EAG9C,UAAU,EAAE;IAAE,OAAO,EAAE;EAAX,CAHkC;EAI9C,UAAU,EAAE;IAAE,OAAO,EAAE;EAAX,CAJkC;;EAK9C,iBAAiB,GAAA;IACf;EACD;;AAP6C,CAAhD,C,CAUA;;AACA,OAAO,MAAM,aAAa,gBAA4C,aAAa,CACjF,SADiF,CAA5E;AAIP,OAAO,MAAM,cAAc,GAAG,aAAa,CAAC,QAArC;AACP,OAAO,MAAM,yBAAyB,GAAO,QAAJ,IACvC,kBAAkB,CAAC,aAAD,EAAgB,CAAC,GAAG,GAAG,mBAAP,KAA+B,QAAQ,CAAC,GAAD,CAAvD,CADb","sourcesContent":["import { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogOpenChangeData, DialogModalType } from '../Dialog';\nimport * as React from 'react';\n\nexport type DialogContextValue = {\n  /**\n   * Reference to trigger element that opened the Dialog\n   * null if Dialog is closed\n   */\n  triggerRef: React.RefObject<HTMLElement>;\n  contentRef: React.RefObject<HTMLElement>;\n  modalType: DialogModalType;\n  dialogTitleID?: string;\n  dialogBodyID?: string;\n  open: boolean;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange: (data: DialogOpenChangeData) => void;\n};\n\nconst defaultContextValue: DialogContextValue = {\n  open: false,\n  modalType: 'modal',\n  triggerRef: { current: null },\n  contentRef: { current: null },\n  requestOpenChange() {\n    /* noop */\n  },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n  undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n  useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["contexts/dialogContext.ts"],"names":[],"mappings":"AACA,SAAS,aAAT,EAAyC,kBAAzC,QAAmE,kCAAnE;AAkBA,MAAM,mBAAmB,GAAuB;EAC9C,IAAI,EAAE,KADwC;EAE9C,SAAS,EAAE,OAFmC;EAG9C,cAAc,EAAE,KAH8B;EAI9C,SAAS,EAAE;IAAE,OAAO,EAAE;EAAX,CAJmC;;EAK9C,iBAAiB,GAAA;IACf;EACD;;AAP6C,CAAhD,C,CAUA;;AACA,OAAO,MAAM,aAAa,gBAA4C,aAAa,CACjF,SADiF,CAA5E;AAIP,OAAO,MAAM,cAAc,GAAG,aAAa,CAAC,QAArC;AACP,OAAO,MAAM,yBAAyB,GAAO,QAAJ,IACvC,kBAAkB,CAAC,aAAD,EAAgB,CAAC,GAAG,GAAG,mBAAP,KAA+B,QAAQ,CAAC,GAAD,CAAvD,CADb","sourcesContent":["import * as React from 'react';\nimport { createContext, ContextSelector, useContextSelector } from '@fluentui/react-context-selector';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport type { Context } from '@fluentui/react-context-selector';\nimport type { DialogModalType, DialogOpenChangeData } from '../Dialog';\n\nexport type DialogContextValue = {\n  open: boolean;\n  dialogBodyID?: string;\n  dialogTitleID?: string;\n  isNestedDialog: boolean;\n  dialogRef: React.Ref<DialogSurfaceElement>;\n  modalType: DialogModalType;\n  /**\n   * Requests dialog main component to update it's internal open state\n   */\n  requestOpenChange: (data: DialogOpenChangeData) => void;\n};\n\nconst defaultContextValue: DialogContextValue = {\n  open: false,\n  modalType: 'modal',\n  isNestedDialog: false,\n  dialogRef: { current: null },\n  requestOpenChange() {\n    /* noop */\n  },\n};\n\n// Contexts should default to undefined\nexport const DialogContext: Context<DialogContextValue | undefined> = createContext<DialogContextValue | undefined>(\n  undefined,\n);\n\nexport const DialogProvider = DialogContext.Provider;\nexport const useDialogContext_unstable = <T>(selector: ContextSelector<DialogContextValue, T>): T =>\n  useContextSelector(DialogContext, (ctx = defaultContextValue) => selector(ctx));\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,4 +1,4 @@
-export { Dialog, dialogClassNames, renderDialog_unstable, useDialogStyles_unstable, useDialog_unstable } from './Dialog';
+export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';
 export { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';
 export { DialogActions, dialogActionsClassNames, useDialogActions_unstable, useDialogActionsStyles_unstable, renderDialogActions_unstable } from './DialogActions';
 export { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBodyStyles_unstable, renderDialogBody_unstable } from './DialogBody';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,MADF,EAEE,gBAFF,EAGE,qBAHF,EAIE,wBAJF,EAKE,kBALF,QAMO,UANP;AASA,SAAS,aAAT,EAAwB,yBAAxB,EAAmD,4BAAnD,QAAuF,iBAAvF;AAQA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP;AAcA,SACE,UADF,EAEE,oBAFF,EAGE,sBAHF,EAIE,4BAJF,EAKE,yBALF,QAMO,cANP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,6BAJF,EAKE,0BALF,QAMO,eANP;AASA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP","sourcesContent":["export {\n  Dialog,\n  dialogClassNames,\n  renderDialog_unstable,\n  useDialogStyles_unstable,\n  useDialog_unstable,\n} from './Dialog';\nexport type { DialogProps, DialogOpenChangeData, DialogOpenChangeEvent, DialogSlots, DialogState } from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n  DialogTriggerProps,\n  DialogTriggerChildProps,\n  DialogTriggerState,\n  DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n  DialogActions,\n  dialogActionsClassNames,\n  useDialogActions_unstable,\n  useDialogActionsStyles_unstable,\n  renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n  DialogActionsProps,\n  DialogActionsSlots,\n  DialogActionsState,\n  DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n  DialogBody,\n  dialogBodyClassNames,\n  useDialogBody_unstable,\n  useDialogBodyStyles_unstable,\n  renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n  DialogTitle,\n  dialogTitleClassNames,\n  useDialogTitle_unstable,\n  useDialogTitleStyles_unstable,\n  renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  useDialogSurface_unstable,\n  useDialogSurfaceStyles_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SAAS,MAAT,EAAiB,qBAAjB,EAAwC,kBAAxC,QAAkE,UAAlE;AAUA,SAAS,aAAT,EAAwB,yBAAxB,EAAmD,4BAAnD,QAAuF,iBAAvF;AAQA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP;AAcA,SACE,UADF,EAEE,oBAFF,EAGE,sBAHF,EAIE,4BAJF,EAKE,yBALF,QAMO,cANP;AASA,SACE,WADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,6BAJF,EAKE,0BALF,QAMO,eANP;AASA,SACE,aADF,EAEE,uBAFF,EAGE,yBAHF,EAIE,+BAJF,EAKE,4BALF,QAMO,iBANP","sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport type {\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogOpenChangeData,\n  DialogOpenChangeEvent,\n  DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n  DialogTriggerProps,\n  DialogTriggerChildProps,\n  DialogTriggerState,\n  DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n  DialogActions,\n  dialogActionsClassNames,\n  useDialogActions_unstable,\n  useDialogActionsStyles_unstable,\n  renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n  DialogActionsProps,\n  DialogActionsSlots,\n  DialogActionsState,\n  DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n  DialogBody,\n  dialogBodyClassNames,\n  useDialogBody_unstable,\n  useDialogBodyStyles_unstable,\n  renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n  DialogTitle,\n  dialogTitleClassNames,\n  useDialogTitle_unstable,\n  useDialogTitleStyles_unstable,\n  renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  useDialogSurface_unstable,\n  useDialogSurfaceStyles_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type { DialogSurfaceProps, DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface';\n"],"sourceRoot":"../src/"}

package/lib/utils/index.js

@@ -1,5 +1,6 @@
 export * from './isEscapeKeyDown';
-export * from './isTargetDisabled';
-export * from './localShorthands';
-export * from './normalizeDefaultPrevented';
+export * from './useDisableBodyScroll';
+export * from './useFocusFirstElement';
+export * from './isHTMLDialogElement';
+export * from './useControlNativeDialogOpenState';
 //# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,6BAA6B,CAAC","sourcesContent":["export * from './isEscapeKeyDown';\nexport * from './isTargetDisabled';\nexport * from './localShorthands';\nexport * from './normalizeDefaultPrevented';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './isEscapeKeyDown';\nexport * from './useDisableBodyScroll';\nexport * from './useFocusFirstElement';\nexport * from './isHTMLDialogElement';\nexport * from './useControlNativeDialogOpenState';\n"]}

package/lib/utils/isEscapeKeyDown.js

@@ -1,11 +1,12 @@
 import { Escape } from '@fluentui/keyboard-keys';
-import { normalizeDefaultPrevented } from './normalizeDefaultPrevented';
+import { isHTMLDialogElement } from './isHTMLDialogElement';
 /**
  * Checks if keydown event is a proper Escape key dismiss
  */
 
-export function isEscapeKeyDismiss(event, type) {
-  const isDefaultPrevented = normalizeDefaultPrevented(event);
-  return event.key === Escape && type !== 'alert' && !isDefaultPrevented();
+export function isEscapeKeyDismiss(event, modalType) {
+  return event.key === Escape && ( // `non-modal` should always have Escape key handling
+  // `modal` should only be handled in the case of non native dialog
+  modalType === 'non-modal' || !isHTMLDialogElement(event.currentTarget) && modalType === 'modal') && !event.isDefaultPrevented();
 }
 //# sourceMappingURL=isEscapeKeyDown.js.map

package/lib/utils/isEscapeKeyDown.js.map

@@ -1 +1 @@
-{"version":3,"sources":["utils/isEscapeKeyDown.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,yBAAvB;AAEA,SAAS,yBAAT,QAA0C,6BAA1C;AAEA;;AAEG;;AACH,OAAM,SAAU,kBAAV,CAA6B,KAA7B,EAAyE,IAAzE,EAA8F;EAClG,MAAM,kBAAkB,GAAG,yBAAyB,CAAC,KAAD,CAApD;EACA,OAAO,KAAK,CAAC,GAAN,KAAc,MAAd,IAAwB,IAAI,KAAK,OAAjC,IAA4C,CAAC,kBAAkB,EAAtE;AACD","sourcesContent":["import * as React from 'react';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { DialogModalType } from '../components/Dialog/Dialog.types';\nimport { normalizeDefaultPrevented } from './normalizeDefaultPrevented';\n\n/**\n * Checks if keydown event is a proper Escape key dismiss\n */\nexport function isEscapeKeyDismiss(event: React.KeyboardEvent | KeyboardEvent, type: DialogModalType): boolean {\n  const isDefaultPrevented = normalizeDefaultPrevented(event);\n  return event.key === Escape && type !== 'alert' && !isDefaultPrevented();\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["utils/isEscapeKeyDown.ts"],"names":[],"mappings":"AACA,SAAS,MAAT,QAAuB,yBAAvB;AAGA,SAAS,mBAAT,QAAoC,uBAApC;AAEA;;AAEG;;AACH,OAAM,SAAU,kBAAV,CACJ,KADI,EAEJ,SAFI,EAEsB;EAE1B,OACE,KAAK,CAAC,GAAN,KAAc,MAAd,MACA;EACA;EACC,SAAS,KAAK,WAAd,IAA8B,CAAC,mBAAmB,CAAC,KAAK,CAAC,aAAP,CAApB,IAA6C,SAAS,KAAK,OAH1F,KAIA,CAAC,KAAK,CAAC,kBAAN,EALH;AAOD","sourcesContent":["import * as React from 'react';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport type { DialogModalType } from '../components/Dialog/Dialog.types';\nimport { DialogSurfaceElement } from '../DialogSurface';\nimport { isHTMLDialogElement } from './isHTMLDialogElement';\n\n/**\n * Checks if keydown event is a proper Escape key dismiss\n */\nexport function isEscapeKeyDismiss(\n  event: React.KeyboardEvent<DialogSurfaceElement>,\n  modalType: DialogModalType,\n): boolean {\n  return (\n    event.key === Escape &&\n    // `non-modal` should always have Escape key handling\n    // `modal` should only be handled in the case of non native dialog\n    (modalType === 'non-modal' || (!isHTMLDialogElement(event.currentTarget) && modalType === 'modal')) &&\n    !event.isDefaultPrevented()\n  );\n}\n"],"sourceRoot":"../src/"}

package/lib/utils/isHTMLDialogElement.js

@@ -0,0 +1,4 @@
+export function isHTMLDialogElement(element) {
+  return Boolean(element && 'open' in element && 'show' in element && 'showModal' in element && 'close' in element);
+}
+//# sourceMappingURL=isHTMLDialogElement.js.map

package/lib/utils/isHTMLDialogElement.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/isHTMLDialogElement.ts"],"names":[],"mappings":"AAEA,OAAM,SAAU,mBAAV,CAA8B,OAA9B,EAA0D;EAC9D,OAAO,OAAO,CAAC,OAAO,IAAI,UAAU,OAArB,IAAgC,UAAU,OAA1C,IAAqD,eAAe,OAApE,IAA+E,WAAW,OAA3F,CAAd;AACD","sourcesContent":["import * as React from 'react';\n\nexport function isHTMLDialogElement(element?: HTMLElement | null): element is HTMLDialogElement {\n  return Boolean(element && 'open' in element && 'show' in element && 'showModal' in element && 'close' in element);\n}\n\n/**\n * adds additional types which are missing from current version of react\n * @internal\n */\nexport type HTMLDialogElementProps = JSX.IntrinsicElements['dialog'] & {\n  /**\n   * The close event is fired on a <dialog> when it has been closed.\n   */\n  onClose?: (event: React.SyntheticEvent) => void;\n  /**\n   * The cancel event fires on a <dialog> when\n   * the user instructs the browser that they wish to dismiss the current open dialog.\n   * For example, the browser might fire this event when the user presses the Esc\n   * key.\n   */\n  onCancel?: (event: React.SyntheticEvent) => void;\n};\n"],"sourceRoot":"../src/"}

package/lib/utils/useControlNativeDialogOpenState.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { isHTMLDialogElement } from './isHTMLDialogElement';
+export function useControlNativeDialogOpenState(open, modalType) {
+  const dialogSurfaceRef = React.useRef(null);
+  React.useEffect(() => {
+    if (isHTMLDialogElement(dialogSurfaceRef.current) && dialogSurfaceRef.current.open !== open) {
+      if (open) {
+        if (modalType === 'non-modal') {
+          dialogSurfaceRef.current.show();
+        } else {
+          dialogSurfaceRef.current.showModal();
+        }
+      } else {
+        dialogSurfaceRef.current.close();
+      }
+    }
+  }, [open, modalType]);
+  return dialogSurfaceRef;
+}
+//# sourceMappingURL=useControlNativeDialogOpenState.js.map

package/lib/utils/useControlNativeDialogOpenState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["utils/useControlNativeDialogOpenState.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,uBAApC;AAIA,OAAM,SAAU,+BAAV,CAA0C,IAA1C,EAAyD,SAAzD,EAAmF;EACvF,MAAM,gBAAgB,GAAG,KAAK,CAAC,MAAN,CAAmC,IAAnC,CAAzB;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,mBAAmB,CAAC,gBAAgB,CAAC,OAAlB,CAAnB,IAAiD,gBAAgB,CAAC,OAAjB,CAAyB,IAAzB,KAAkC,IAAvF,EAA6F;MAC3F,IAAI,IAAJ,EAAU;QACR,IAAI,SAAS,KAAK,WAAlB,EAA+B;UAC7B,gBAAgB,CAAC,OAAjB,CAAyB,IAAzB;QACD,CAFD,MAEO;UACL,gBAAgB,CAAC,OAAjB,CAAyB,SAAzB;QACD;MACF,CAND,MAMO;QACL,gBAAgB,CAAC,OAAjB,CAAyB,KAAzB;MACD;IACF;EACF,CAZD,EAYG,CAAC,IAAD,EAAO,SAAP,CAZH;EAcA,OAAO,gBAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { isHTMLDialogElement } from './isHTMLDialogElement';\nimport type { DialogModalType } from '../Dialog';\nimport type { DialogSurfaceElement } from '../DialogSurface';\n\nexport function useControlNativeDialogOpenState(open: boolean, modalType: DialogModalType) {\n  const dialogSurfaceRef = React.useRef<DialogSurfaceElement>(null);\n\n  React.useEffect(() => {\n    if (isHTMLDialogElement(dialogSurfaceRef.current) && dialogSurfaceRef.current.open !== open) {\n      if (open) {\n        if (modalType === 'non-modal') {\n          dialogSurfaceRef.current.show();\n        } else {\n          dialogSurfaceRef.current.showModal();\n        }\n      } else {\n        dialogSurfaceRef.current.close();\n      }\n    }\n  }, [open, modalType]);\n\n  return dialogSurfaceRef;\n}\n"],"sourceRoot":"../src/"}

package/lib/utils/useDisableBodyScroll.js

@@ -0,0 +1,60 @@
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { useCallback } from 'react';
+const disableScrollElementProp = '__fluentDisableScrollElement';
+/**
+ * hook that disables body scrolling through `overflow: hidden` CSS property
+ */
+
+export function useDisableBodyScroll() {
+  const {
+    targetDocument
+  } = useFluent_unstable();
+  return useCallback(() => {
+    if (targetDocument) {
+      return disableScroll(targetDocument.body);
+    }
+  }, [targetDocument]);
+}
+/**
+ * disables scrolling from a given element through `overflow: hidden` CSS property
+ * @param target - element to disable scrolling from
+ * @returns a method for enabling scrolling again
+ */
+
+export function disableScroll(target) {
+  var _a, _b;
+
+  const {
+    clientWidth
+  } = target.ownerDocument.documentElement;
+  const innerWidth = (_b = (_a = target.ownerDocument.defaultView) === null || _a === void 0 ? void 0 : _a.innerWidth) !== null && _b !== void 0 ? _b : 0;
+  assertIsDisableScrollElement(target);
+
+  if (target[disableScrollElementProp].count === 0) {
+    target.style.overflow = 'hidden';
+    target.style.paddingRight = `${innerWidth - clientWidth}px`;
+  }
+
+  target[disableScrollElementProp].count++;
+  return () => {
+    target[disableScrollElementProp].count--;
+
+    if (target[disableScrollElementProp].count === 0) {
+      target.style.overflow = target[disableScrollElementProp].previousOverflowStyle;
+      target.style.paddingRight = target[disableScrollElementProp].previousPaddingRightStyle;
+    }
+  };
+}
+
+function assertIsDisableScrollElement(element) {
+  var _a;
+
+  var _b;
+
+  (_a = (_b = element)[disableScrollElementProp]) !== null && _a !== void 0 ? _a : _b[disableScrollElementProp] = {
+    count: 0,
+    previousOverflowStyle: element.style.overflow,
+    previousPaddingRightStyle: element.style.paddingRight
+  };
+}
+//# sourceMappingURL=useDisableBodyScroll.js.map

package/lib/utils/useDisableBodyScroll.js.map

@@ -0,0 +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/"}

package/lib/utils/useFocusFirstElement.js

@@ -0,0 +1,41 @@
+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,
+ */
+
+export function useFocusFirstElement(open, modalType) {
+  const {
+    findFirstFocusable
+  } = useFocusFinders();
+  const {
+    targetDocument
+  } = useFluent_unstable();
+  const dialogRef = React.useRef(null);
+  const triggerRef = React.useRef();
+  React.useEffect(() => {
+    var _a, _b;
+
+    if (!open) {
+      return (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+
+    triggerRef.current = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
+    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
+
+      console.warn('A Dialog should have at least one focusable element inside DialogSurface');
+    }
+  }, [findFirstFocusable, open, modalType, targetDocument]);
+  return dialogRef;
+}
+//# sourceMappingURL=useFocusFirstElement.js.map

package/lib/utils/useFocusFirstElement.js.map

@@ -0,0 +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/"}

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

@@ -11,8 +11,6 @@ const useDialog_1 = /*#__PURE__*/require("./useDialog");
 
 const renderDialog_1 = /*#__PURE__*/require("./renderDialog");
 
-const useDialogStyles_1 = /*#__PURE__*/require("./useDialogStyles");
-
 const useDialogContextValues_1 = /*#__PURE__*/require("./useDialogContextValues");
 /**
  * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.
@@ -26,7 +24,6 @@ const useDialogContextValues_1 = /*#__PURE__*/require("./useDialogContextValues"
 exports.Dialog = /*#__PURE__*/React.memo(props => {
   const state = useDialog_1.useDialog_unstable(props);
   const contextValues = useDialogContextValues_1.useDialogContextValues_unstable(state);
-  useDialogStyles_1.useDialogStyles_unstable(state);
   return renderDialog_1.renderDialog_unstable(state, contextValues);
 });
 exports.Dialog.displayName = 'Dialog';

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;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,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,iBAAA,CAAA,wBAAA,CAAyB,KAAzB;EACA,OAAO,cAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,aAA7B,CAAP;AACD,CAN4C,CAAhC;AAQb,OAAA,CAAA,MAAA,CAAO,WAAP,GAAqB,QAArB","sourcesContent":["import * as React from 'react';\nimport { useDialog_unstable } from './useDialog';\nimport { renderDialog_unstable } from './renderDialog';\nimport { useDialogStyles_unstable } from './useDialogStyles';\nimport type { DialogProps } from './Dialog.types';\nimport { useDialogContextValues_unstable } from './useDialogContextValues';\n\n/**\n * The `Dialog` root level component serves as an interface for interaction with all possible behaviors exposed.\n * It provides context down the hierarchy to `children` compound components to allow functionality.\n * This component expects to receive as children either a `DialogSurface` or a `DialogTrigger`\n * and a `DialogSurface` (or some component that will eventually render one of those compound components)\n * in this specific order\n */\nexport const Dialog: React.FC<DialogProps> = React.memo(props => {\n  const state = useDialog_unstable(props);\n  const contextValues = useDialogContextValues_unstable(state);\n\n  useDialogStyles_unstable(state);\n  return renderDialog_unstable(state, contextValues);\n});\n\nDialog.displayName = 'Dialog';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Dialog/Dialog.tsx"],"names":[],"mappings":";;;;;;;AAAA,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

@@ -13,6 +13,4 @@ tslib_1.__exportStar(require("./Dialog.types"), exports);
 tslib_1.__exportStar(require("./renderDialog"), exports);
 
 tslib_1.__exportStar(require("./useDialog"), exports);
-
-tslib_1.__exportStar(require("./useDialogStyles"), exports);
 //# sourceMappingURL=index.js.map

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;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\nexport * from './useDialogStyles';\n"],"sourceRoot":"../src/"}
+{"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/"}

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

@@ -7,10 +7,6 @@ exports.renderDialog_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const react_portal_1 = /*#__PURE__*/require("@fluentui/react-portal");
-
 const contexts_1 = /*#__PURE__*/require("../../contexts");
 /**
  * Render the final JSX of Dialog
@@ -20,19 +16,13 @@ const contexts_1 = /*#__PURE__*/require("../../contexts");
 const renderDialog_unstable = (state, contextValues) => {
   const {
     content,
-    trigger,
-    open
+    trigger
   } = state;
-  const {
-    slots,
-    slotProps
-  } = react_utilities_1.getSlots(state);
   return React.createElement(contexts_1.DialogProvider, {
     value: contextValues.dialog
   }, React.createElement(contexts_1.DialogSurfaceProvider, {
     value: contextValues.dialogSurface
-  }, trigger, open && React.createElement(react_portal_1.Portal, null, slots.overlay && React.createElement(slots.overlay, { ...slotProps.overlay
-  }), content)));
+  }, trigger, content));
 };
 
 exports.renderDialog_unstable = renderDialog_unstable;

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,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,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,OAAX;IAAoB;EAApB,IAA6B,KAAnC;EACA,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAsB,KAAtB,CAA7B;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,IAAI,IACH,KAAA,CAAA,aAAA,CAAC,cAAA,CAAA,MAAD,EAAO,IAAP,EACG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADpB,EAEG,OAFH,CAHJ,CADF,CADF;AAaD,CAjBM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogSlots, 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, open } = state;\n  const { slots, slotProps } = getSlots<DialogSlots>(state);\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {open && (\n          <Portal>\n            {slots.overlay && <slots.overlay {...slotProps.overlay} />}\n            {content}\n          </Portal>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"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/"}

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

@@ -9,11 +9,11 @@ const React = /*#__PURE__*/require("react");
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
-
-const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
 
 const utils_1 = /*#__PURE__*/require("../../utils");
+
+const contexts_1 = /*#__PURE__*/require("../../contexts");
 /**
  * Create the state required to render Dialog.
  *
@@ -27,7 +27,6 @@ const utils_1 = /*#__PURE__*/require("../../utils");
 const useDialog_unstable = props => {
   const {
     children,
-    overlay,
     modalType = 'modal',
     onOpenChange
   } = props;
@@ -37,63 +36,36 @@ const useDialog_unstable = props => {
     defaultState: props.defaultOpen,
     initialState: false
   });
-  const overlayShorthand = react_utilities_1.resolveShorthand(overlay, {
-    required: modalType !== 'non-modal',
-    defaultProps: {
-      'aria-hidden': 'true'
-    }
-  });
   const requestOpenChange = react_utilities_1.useEventCallback(data => {
-    const isDefaultPrevented = utils_1.normalizeDefaultPrevented(data.event);
-
-    if (onOpenChange) {
-      onOpenChange(data.event, data);
-    } // if user prevents default then do not change state value
+    onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data); // if user prevents default then do not change state value
     // otherwise updates state value and trigger reference to the element that caused the opening
 
-
-    if (!isDefaultPrevented()) {
-      triggerRef.current = !open && data.open ? data.event.currentTarget : null;
+    if (!data.event.isDefaultPrevented()) {
       setOpen(data.open);
     }
   });
-  const {
-    contentRef,
-    triggerRef
-  } = useFocusFirstElement({
-    open,
-    modalType,
-    requestOpenChange
-  });
-  const handleOverLayClick = react_utilities_1.useEventCallback(event => {
-    var _a;
-
-    (_a = overlayShorthand === null || overlayShorthand === void 0 ? void 0 : overlayShorthand.onClick) === null || _a === void 0 ? void 0 : _a.call(overlayShorthand, event);
-
-    if (isOverlayClickDismiss(event, modalType)) {
-      requestOpenChange({
-        event,
-        open: false,
-        type: 'overlayClick'
-      });
+  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(() => {
+    if (isBodyScrollLocked) {
+      return disableBodyScroll();
     }
-  });
+  }, [disableBodyScroll, isBodyScrollLocked]);
   return {
     components: {
-      overlay: 'div'
-    },
-    overlay: overlayShorthand && { ...overlayShorthand,
-      onClick: handleOverLayClick
+      backdrop: 'div'
     },
     open,
     modalType,
-    content,
+    content: open ? content : null,
     trigger,
-    triggerRef,
-    contentRef,
     requestOpenChange,
     dialogBodyID: react_utilities_1.useId('dialog-body-'),
-    dialogTitleID: react_utilities_1.useId('dialog-title-')
+    dialogTitleID: react_utilities_1.useId('dialog-title-'),
+    isNestedDialog: react_context_selector_1.useHasParentContext(contexts_1.DialogContext),
+    dialogRef: react_utilities_1.useMergedRefs(focusRef, nativeControlRef)
   };
 };
 
@@ -126,86 +98,4 @@ function childrenToTriggerAndContent(children) {
       return [undefined, undefined];
   }
 }
-/**
- * Checks is click event is a proper Overlay click dismiss
- */
-
-
-function isOverlayClickDismiss(event, type) {
-  const isDefaultPrevented = utils_1.normalizeDefaultPrevented(event);
-  return type === 'modal' && !isDefaultPrevented();
-}
-/**
- * Focus first element on content when dialog is opened,
- * in case there's no focusable element, then a eventlistener is added to document
- * to ensure Escape keydown functionality
- */
-
-
-function useFocusFirstElement({
-  open,
-  requestOpenChange,
-  modalType
-}) {
-  const {
-    findFirstFocusable
-  } = react_tabster_1.useFocusFinders();
-  const {
-    targetDocument
-  } = react_shared_contexts_1.useFluent_unstable();
-  const contentRef = React.useRef(null);
-  const triggerRef = React.useRef(null);
-  React.useEffect(() => {
-    if (!open) {
-      return;
-    }
-
-    const element = contentRef.current && findFirstFocusable(contentRef.current);
-
-    if (element) {
-      element.focus(); // NOTE: if it's non-modal global listener to escape is necessary
-
-      if (modalType !== 'non-modal') {
-        return;
-      }
-    } else {
-      if (process.env.NODE_ENV !== 'production') {
-        // eslint-disable-next-line no-console
-        console.warn('A Dialog should have at least one focusable element inside DialogSurface');
-      }
-    }
-
-    if (triggerRef.current && targetDocument) {
-      const trigger = triggerRef.current; // if the trigger is still the active element, the default behavior is to return focus to document.body,
-      // which can be achived by blurring
-
-      if (targetDocument.activeElement === trigger) {
-        trigger.blur();
-      }
-
-      const listener = event => {
-        if (utils_1.isEscapeKeyDismiss(event, modalType)) {
-          requestOpenChange({
-            event,
-            open: false,
-            type: 'documentEscapeKeyDown'
-          });
-          trigger.focus();
-          event.stopImmediatePropagation();
-        }
-      };
-
-      targetDocument.addEventListener('keydown', listener, {
-        passive: false
-      });
-      return () => {
-        targetDocument.removeEventListener('keydown', listener);
-      };
-    }
-  }, [findFirstFocusable, requestOpenChange, open, modalType, targetDocument]);
-  return {
-    contentRef,
-    triggerRef
-  };
-}
 //# sourceMappingURL=useDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/useDialog.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { resolveShorthand, useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\nimport { useFocusFinders } from '@fluentui/react-tabster';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { normalizeDefaultPrevented, isEscapeKeyDismiss } from '../../utils';\n\nimport type { DialogProps, DialogState, DialogModalType, DialogOpenChangeData } 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, overlay, 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 overlayShorthand = resolveShorthand(overlay, {\n    required: modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n  });\n\n  const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n    const isDefaultPrevented = normalizeDefaultPrevented(data.event);\n\n    if (onOpenChange) {\n      onOpenChange(data.event, data);\n    }\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 (!isDefaultPrevented()) {\n      (triggerRef as React.MutableRefObject<HTMLElement | null>).current =\n        !open && data.open ? (data.event.currentTarget as HTMLElement) : null;\n      setOpen(data.open);\n    }\n  });\n\n  const { contentRef, triggerRef } = useFocusFirstElement({\n    open,\n    modalType,\n    requestOpenChange,\n  });\n\n  const handleOverLayClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    overlayShorthand?.onClick?.(event);\n    if (isOverlayClickDismiss(event, modalType)) {\n      requestOpenChange({ event, open: false, type: 'overlayClick' });\n    }\n  });\n\n  return {\n    components: {\n      overlay: 'div',\n    },\n    overlay: overlayShorthand && {\n      ...overlayShorthand,\n      onClick: handleOverLayClick,\n    },\n    open,\n    modalType,\n    content,\n    trigger,\n    triggerRef,\n    contentRef,\n    requestOpenChange,\n    dialogBodyID: useId('dialog-body-'),\n    dialogTitleID: useId('dialog-title-'),\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\n/**\n * Checks is click event is a proper Overlay click dismiss\n */\nfunction isOverlayClickDismiss(event: React.MouseEvent, type: DialogModalType): boolean {\n  const isDefaultPrevented = normalizeDefaultPrevented(event);\n  return type === 'modal' && !isDefaultPrevented();\n}\n\n/**\n * Focus first element on content when dialog is opened,\n * in case there's no focusable element, then a eventlistener is added to document\n * to ensure Escape keydown functionality\n */\nfunction useFocusFirstElement({\n  open,\n  requestOpenChange,\n  modalType,\n}: Pick<DialogState, 'open' | 'requestOpenChange' | 'modalType'>) {\n  const { findFirstFocusable } = useFocusFinders();\n  const { targetDocument } = useFluent_unstable();\n  const contentRef = React.useRef<HTMLElement>(null);\n  const triggerRef = React.useRef<HTMLElement>(null);\n\n  React.useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    const element = contentRef.current && findFirstFocusable(contentRef.current);\n    if (element) {\n      element.focus();\n      // NOTE: if it's non-modal global listener to escape is necessary\n      if (modalType !== 'non-modal') {\n        return;\n      }\n    } else {\n      if (process.env.NODE_ENV !== 'production') {\n        // eslint-disable-next-line no-console\n        console.warn('A Dialog should have at least one focusable element inside DialogSurface');\n      }\n    }\n\n    if (triggerRef.current && targetDocument) {\n      const trigger = triggerRef.current;\n      // if the trigger is still the active element, the default behavior is to return focus to document.body,\n      // which can be achived by blurring\n      if (targetDocument.activeElement === trigger) {\n        trigger.blur();\n      }\n      const listener = (event: KeyboardEvent) => {\n        if (isEscapeKeyDismiss(event, modalType)) {\n          requestOpenChange({\n            event,\n            open: false,\n            type: 'documentEscapeKeyDown',\n          });\n          trigger.focus();\n          event.stopImmediatePropagation();\n        }\n      };\n      targetDocument.addEventListener('keydown', listener, { passive: false });\n      return () => {\n        targetDocument.removeEventListener('keydown', listener);\n      };\n    }\n  }, [findFirstFocusable, requestOpenChange, open, modalType, targetDocument]);\n\n  return { contentRef, triggerRef };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/Dialog/useDialog.ts"],"names":[],"mappings":"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","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/"}

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

@@ -9,10 +9,10 @@ function useDialogContextValues_unstable(state) {
   const {
     modalType,
     open,
-    triggerRef,
-    contentRef,
     dialogBodyID,
+    dialogRef,
     dialogTitleID,
+    isNestedDialog,
     requestOpenChange
   } = state;
   /**
@@ -23,10 +23,10 @@ function useDialogContextValues_unstable(state) {
   const dialog = {
     open,
     modalType,
-    triggerRef,
-    contentRef,
+    dialogRef,
     dialogBodyID,
     dialogTitleID,
+    isNestedDialog,
     requestOpenChange
   };
   const dialogSurface = false;

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,UAAnB;IAA+B,UAA/B;IAA2C,YAA3C;IAAyD,aAAzD;IAAwE;EAAxE,IAA8F,KAApG;EAEA;;;AAGG;;EACH,MAAM,MAAM,GAAuB;IACjC,IADiC;IAEjC,SAFiC;IAGjC,UAHiC;IAIjC,UAJiC;IAKjC,YALiC;IAMjC,aANiC;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, triggerRef, contentRef, dialogBodyID, dialogTitleID, 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    triggerRef,\n    contentRef,\n    dialogBodyID,\n    dialogTitleID,\n    requestOpenChange,\n  };\n\n  const dialogSurface: DialogSurfaceContextValue = false;\n\n  return { dialog, dialogSurface };\n}\n"],"sourceRoot":"../src/"}
+{"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/"}