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

package/lib/components/Dialog/index.js

@@ -2,5 +2,4 @@ export * from './Dialog';
 export * from './Dialog.types';
 export * from './renderDialog';
 export * from './useDialog';
-export * from './useDialogStyles';
 //# sourceMappingURL=index.js.map

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

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

package/lib/components/Dialog/renderDialog.js

@@ -1,6 +1,4 @@
 import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
-import { Portal } from '@fluentui/react-portal';
 import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
 /**
  * Render the final JSX of Dialog
@@ -9,18 +7,12 @@ import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
 export const renderDialog_unstable = (state, contextValues) => {
   const {
     content,
-    trigger,
-    open
+    trigger
   } = state;
-  const {
-    slots,
-    slotProps
-  } = getSlots(state);
   return /*#__PURE__*/React.createElement(DialogProvider, {
     value: contextValues.dialog
   }, /*#__PURE__*/React.createElement(DialogSurfaceProvider, {
     value: contextValues.dialogSurface
-  }, trigger, open && /*#__PURE__*/React.createElement(Portal, null, slots.overlay && /*#__PURE__*/React.createElement(slots.overlay, { ...slotProps.overlay
-  }), content)));
+  }, trigger, content));
 };
 //# sourceMappingURL=renderDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Dialog/renderDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,MAAT,QAAuB,wBAAvB;AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,gBAAtD;AAGA;;AAEG;;AACH,OAAO,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,QAAQ,CAAc,KAAd,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAf,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACG,OADH,EAEG,IAAI,iBACH,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,EACG,KAAK,CAAC,OAAN,iBAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,CADpB,EAEG,OAFH,CAHJ,CADF,CADF;AAaD,CAjBM","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,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,gBAAtD;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAG,CAAC,KAAD,EAAqB,aAArB,KAA2D;EAC9F,MAAM;IAAE,OAAF;IAAW;EAAX,IAAuB,KAA7B;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,cAAD,EAAe;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAf,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,EACG,OADH,EAEG,OAFH,CADF,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Dialog/useDialog.js

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

package/lib/components/Dialog/useDialogContextValues.js

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

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

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

package/lib/components/DialogActions/useDialogActionsStyles.js

@@ -1,6 +1,5 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { DIALOG_GAP, ACTIONS_END_GRID_AREA, ACTIONS_START_GRID_AREA, MEDIA_QUERY_BREAKPOINT_SELECTOR } from '../../contexts/constants';
-import * as localShorthands from '../../utils/localShorthands';
 export const dialogActionsClassNames = {
   root: 'fui-DialogActions'
 };
@@ -12,26 +11,25 @@ const useStyles = /*#__PURE__*/__styles({
     "mc9l5x": "f22iagw",
     "i8kkvl": "f4px1ci",
     "Belr9w4": "fn67r4l",
-    "Bnr8eeb": "f12ep7o",
     "Bmdcpmo": "f6glcwc",
     "th9wkt": "f1e3st1r"
   },
   "gridPositionEnd": {
     "Bdqf98w": "f1a7i8kp",
     "Ijaq50": "f11u0jfc",
-    "nk6f5a": "f23awfp",
     "Br312pm": "f1d6tb1o",
+    "nk6f5a": "f23awfp",
     "Bw0ie65": "fiappcv"
   },
   "gridPositionStart": {
     "Bdqf98w": "fsxvdwy",
     "Ijaq50": "f1vnb230",
-    "nk6f5a": "f13d374e",
     "Br312pm": "f14781pt",
+    "nk6f5a": "f13d374e",
     "Bw0ie65": "f1fjo411"
   }
 }, {
-  "d": [".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f12ep7o>.fui-Button{max-width:100%;}", ".f1a7i8kp{justify-self:end;}", ".f11u0jfc{grid-row-start:actions-end;}", ".f23awfp{grid-row-end:actions-end;}", ".f1d6tb1o{grid-column-start:actions-end;}", ".fiappcv{grid-column-end:actions-end;}", ".fsxvdwy{justify-self:start;}", ".f1vnb230{grid-row-start:actions-start;}", ".f13d374e{grid-row-end:actions-start;}", ".f14781pt{grid-column-start:actions-start;}", ".f1fjo411{grid-column-end:actions-start;}"],
+  "d": [".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f4px1ci{-webkit-column-gap:8px;column-gap:8px;}", ".fn67r4l{row-gap:8px;}", ".f1a7i8kp{justify-self:end;}", ".f11u0jfc{grid-row-start:actions-end;}", ".f1d6tb1o{grid-column-start:actions-end;}", ".f23awfp{grid-row-end:actions-end;}", ".fiappcv{grid-column-end:actions-end;}", ".fsxvdwy{justify-self:start;}", ".f1vnb230{grid-row-start:actions-start;}", ".f14781pt{grid-column-start:actions-start;}", ".f13d374e{grid-row-end:actions-start;}", ".f1fjo411{grid-column-end:actions-start;}"],
   "m": [["@media screen and (max-width: 480px){.f6glcwc{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}}", {
     "m": "screen and (max-width: 480px)"
   }], ["@media screen and (max-width: 480px){.f1e3st1r{justify-self:stretch;}}", {

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

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogActions/useDialogActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SACE,UADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,+BAJF,QAKO,0BALP;AAMA,OAAO,KAAK,eAAZ,MAAiC,6BAAjC;AAEA,OAAO,MAAM,uBAAuB,GAAuC;EACzE,IAAI,EAAE;AADmE,CAApE;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;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;AAwBA;;AAEG;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBAAuB,CAAC,IADS,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,KAAmB,OAAnB,IAA8B,MAAM,CAAC,iBAHJ,EAIjC,KAAK,CAAC,QAAN,KAAmB,KAAnB,IAA4B,MAAM,CAAC,eAJF,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAVM","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';\nimport * as localShorthands from '../../utils/localShorthands';\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    '> .fui-Button': {\n      maxWidth: '100%',\n    },\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n      flexDirection: 'column',\n      justifySelf: 'stretch',\n    },\n  },\n  gridPositionEnd: {\n    justifySelf: 'end',\n    ...localShorthands.gridArea(ACTIONS_END_GRID_AREA),\n  },\n  gridPositionStart: {\n    justifySelf: 'start',\n    ...localShorthands.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":["components/DialogActions/useDialogActionsStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SACE,UADF,EAEE,qBAFF,EAGE,uBAHF,EAIE,+BAJF,QAKO,0BALP;AAOA,OAAO,MAAM,uBAAuB,GAAuC;EACzE,IAAI,EAAE;AADmE,CAApE;;AAIP,MAAM,SAAS,gBAAG;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;;;AACH,OAAO,MAAM,+BAA+B,GAAI,KAAD,IAAkD;EAC/F,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,uBAAuB,CAAC,IADS,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,KAAmB,OAAnB,IAA8B,MAAM,CAAC,iBAHJ,EAIjC,KAAK,CAAC,QAAN,KAAmB,KAAnB,IAA4B,MAAM,CAAC,eAJF,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAVM","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/components/DialogBody/useDialogBodyStyles.js

@@ -1,6 +1,5 @@
-import { __styles, mergeClasses } from '@griffel/react';
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { typographyStyles } from '@fluentui/react-theme';
-import * as localShorthands from '../../utils/localShorthands';
 import { BODY_GRID_AREA } from '../../contexts/constants';
 export const dialogBodyClassNames = {
   root: 'fui-DialogBody'
@@ -12,12 +11,13 @@ export const dialogBodyClassNames = {
 const useStyles = /*#__PURE__*/__styles({
   "root": {
     "a9b677": "fly5x3f",
-    "Bqenvij": "f3052tw",
+    "Bqenvij": "f1l02sjl",
+    "Bmxbyg5": "f5zp4f",
     "sshi5w": "f1nxs5xn",
     "B7ck84d": "f1ewtqcl",
     "Ijaq50": "f6owso0",
-    "nk6f5a": "foucsne",
     "Br312pm": "fupswjn",
+    "nk6f5a": "foucsne",
     "Bw0ie65": "f1ka72gx",
     "Bahqtrf": "fk6fouc",
     "Be2twd7": "fkhj508",
@@ -25,7 +25,7 @@ const useStyles = /*#__PURE__*/__styles({
     "Bg96gwp": "f1i3iumi"
   }
 }, {
-  "d": [".fly5x3f{width:100%;}", ".f3052tw{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}", ".f1nxs5xn{min-height:32px;}", ".f1ewtqcl{box-sizing:border-box;}", ".f6owso0{grid-row-start:body;}", ".foucsne{grid-row-end:body;}", ".fupswjn{grid-column-start: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": [".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);}"]
 });
 /**
  * Apply styling to the DialogBody slots based on the state

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

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,OAAO,KAAK,eAAZ,MAAiC,6BAAjC;AACA,SAAS,cAAT,QAA+B,0BAA/B;AAEA,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE;AAD6D,CAA9D;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAWA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC,CAFsF,CAItF;EACA;;EAEA,OAAO,KAAP;AACD,CARM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { DialogBodySlots, DialogBodyState } from './DialogBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport * as localShorthands from '../../utils/localShorthands';\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: 'fit-content',\n    minHeight: '32px',\n    boxSizing: 'border-box',\n    ...localShorthands.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":["components/DialogBody/useDialogBodyStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAGA,SAAS,gBAAT,QAAiC,uBAAjC;AACA,SAAS,cAAT,QAA+B,0BAA/B;AAEA,OAAO,MAAM,oBAAoB,GAAoC;EACnE,IAAI,EAAE;AAD6D,CAA9D;AAIP;;AAEG;;AACH,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAYA;;AAEG;;;AACH,OAAO,MAAM,4BAA4B,GAAI,KAAD,IAA4C;EACtF,MAAM,MAAM,GAAG,SAAS,EAAxB;EACA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,oBAAoB,CAAC,IAAtB,EAA4B,MAAM,CAAC,IAAnC,EAAyC,KAAK,CAAC,IAAN,CAAW,SAApD,CAAnC,CAFsF,CAItF;EACA;;EAEA,OAAO,KAAP;AACD,CARM","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/"}

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

@@ -1 +1 @@
-{"version":3,"file":"DialogSurface.types.js","sourceRoot":"../src/","sources":["components/DialogSurface/DialogSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n  root: Slot<'div', 'main'>;\n};\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots> & {};\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;\n"]}
+{"version":3,"file":"DialogSurface.types.js","sourceRoot":"../src/","sources":["components/DialogSurface/DialogSurface.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n  /**\n   * Dimmed background of dialog.\n   * The default backdrop is rendered as a `<div>` with styling.\n   * This slot expects a `<div>` element which will replace the default backdrop.\n   * The backdrop should have `aria-hidden=\"true\"`.\n   *\n   * By default if `DialogSurface` is `<dialog>` element the backdrop is ignored,\n   * since native `<dialog>` element supports [::backdrop](https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop)\n   */\n  backdrop?: Slot<'div'>;\n  root: NonNullable<Slot<'dialog', 'div'>>;\n};\n\n/** @internal */\nexport type DialogSurfaceElement = HTMLDialogElement | HTMLDivElement;\n\n/** @internal */\nexport type DialogSurfaceElementIntersection = HTMLDialogElement & HTMLDivElement;\n\n/**\n * DialogSurface Props\n *\n * Omits basic types from native `dialog` (`open`, `onCancel` and `onClose`)\n * to ensure `onOpenChange`, `open` and `defaultOpen` from `Dialog` is used instead\n */\nexport type DialogSurfaceProps = Omit<ComponentProps<DialogSurfaceSlots>, 'open' | 'onCancel' | 'onClose'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots>;\n"]}

package/lib/components/DialogSurface/renderDialogSurface.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 import { DialogSurfaceProvider } from '../../contexts';
+import { Portal } from '@fluentui/react-portal';
 /**
  * Render the final JSX of DialogSurface
  */
@@ -10,9 +11,10 @@ export const renderDialogSurface_unstable = (state, contextValues) => {
     slots,
     slotProps
   } = getSlots(state);
-  return /*#__PURE__*/React.createElement(DialogSurfaceProvider, {
+  return /*#__PURE__*/React.createElement(Portal, null, slots.backdrop && /*#__PURE__*/React.createElement(slots.backdrop, { ...slotProps.backdrop
+  }), /*#__PURE__*/React.createElement(DialogSurfaceProvider, {
     value: contextValues.dialogSurface
   }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
-  }));
+  })));
 };
 //# sourceMappingURL=renderDialogSurface.js.map

package/lib/components/DialogSurface/renderDialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["components/DialogSurface/renderDialogSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,qBAAT,QAAsC,gBAAtC;AAEA;;AAEG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAAC,KAAD,EAA4B,aAA5B,KAAyE;EACnH,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAqB,KAArB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n  const { slots, slotProps } = getSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <DialogSurfaceProvider value={contextValues.dialogSurface}>\n      <slots.root {...slotProps.root} />\n    </DialogSurfaceProvider>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["components/DialogSurface/renderDialogSurface.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,MAAT,QAAuB,wBAAvB;AAEA;;AAEG;;AACH,OAAO,MAAM,4BAA4B,GAAG,CAAC,KAAD,EAA4B,aAA5B,KAAyE;EACnH,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAqB,KAArB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,MAAD,EAAO,IAAP,EACG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;EAAf,CAAf,CADrB,eAEE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CADF,CAFF,CADF;AAQD,CAXM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n  const { slots, slotProps } = getSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal>\n      {slots.backdrop && <slots.backdrop {...slotProps.backdrop} />}\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        <slots.root {...slotProps.root} />\n      </DialogSurfaceProvider>\n    </Portal>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/DialogSurface/useDialogSurface.js

@@ -1,7 +1,7 @@
-import { getNativeElementProps, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
-import { useModalAttributes } from '@fluentui/react-tabster';
+import { getNativeElementProps, resolveShorthand, useEventCallback, useMergedRefs, isResolvedShorthand } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '../../contexts';
 import { isEscapeKeyDismiss } from '../../utils';
+import { useModalAttributes } from '@fluentui/react-tabster';
 /**
  * Create the state required to render DialogSurface.
  *
@@ -13,20 +13,98 @@ import { isEscapeKeyDismiss } from '../../utils';
  */
 
 export const useDialogSurface_unstable = (props, ref) => {
-  const modalType = useDialogContext_unstable(ctx => ctx.modalType);
   const {
-    as = 'div'
+    backdrop,
+    as
   } = props;
-  const contentRef = useDialogContext_unstable(ctx => ctx.contentRef);
+  const isNativeDialog = as === 'dialog' || as === undefined;
+  const modalType = useDialogContext_unstable(ctx => ctx.modalType);
+  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);
+  const open = useDialogContext_unstable(ctx => ctx.open);
+  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
   const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleID);
   const dialogBodyID = useDialogContext_unstable(ctx => ctx.dialogBodyID);
-  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);
-  const {
-    modalAttributes
-  } = useModalAttributes({
-    trapFocus: modalType !== 'non-modal'
+  const handleNativeClick = useEventCallback(event => {
+    var _a;
+
+    (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
+
+    if (modalType === 'alert' || event.target !== event.currentTarget) {
+      return;
+    }
+
+    const {
+      clientX,
+      clientY
+    } = event;
+    const {
+      top,
+      left,
+      width,
+      height
+    } = event.currentTarget.getBoundingClientRect();
+    const isBackdropClick = top > clientY || clientY > top + height || left > clientX || clientX > left + width;
+
+    if (isBackdropClick) {
+      requestOpenChange({
+        event,
+        open: false,
+        type: 'backdropClick'
+      });
+    }
+  });
+  const handleNativeCancel = useEventCallback(event => {
+    var _a, _b;
+
+    (_b = (_a = props).onCancel) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+
+    if (event.currentTarget !== event.target) {
+      return;
+    }
+
+    if (modalType !== 'alert') {
+      requestOpenChange({
+        event,
+        open: false,
+        type: 'dialogCancel'
+      });
+    }
+
+    event.preventDefault();
+  });
+  const handleNativeClose = useEventCallback(event => {
+    var _a, _b;
+
+    (_b = (_a = props).onClose) === null || _b === void 0 ? void 0 : _b.call(_a, event); // Ensure dialog remains open if force closed by close event
+
+    if (event.currentTarget.open !== open) {
+      if (open) {
+        if (modalType === 'non-modal') {
+          event.currentTarget.show();
+        } else {
+          event.currentTarget.showModal();
+        }
+      } else {
+        event.currentTarget.close();
+      }
+    }
+  });
+  const handledBackdropClick = useEventCallback(event => {
+    var _a, _b;
+
+    if (isResolvedShorthand(props.backdrop)) {
+      (_b = (_a = props.backdrop).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, event);
+    }
+
+    if (modalType === 'modal' && !event.isDefaultPrevented()) {
+      requestOpenChange({
+        event,
+        open: false,
+        type: 'backdropClick'
+      });
+    }
   });
-  const handleRootKeyDown = useEventCallback(event => {
+  const handleKeyDown = useEventCallback(event => {
     var _a;
 
     (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
@@ -36,23 +114,44 @@ export const useDialogSurface_unstable = (props, ref) => {
         event,
         open: false,
         type: 'escapeKeyDown'
-      });
-      event.preventDefault();
+      }); // stop propagation to avoid conflicting with other elements that listen for `Escape`
+      // e,g: nested Dialog, Popover, Menu and Tooltip
+
+      event.stopPropagation();
     }
   });
+  const {
+    modalAttributes
+  } = useModalAttributes({
+    trapFocus: modalType !== 'non-modal'
+  });
   return {
     components: {
-      root: 'div'
+      backdrop: 'div',
+      root: 'dialog'
     },
-    root: getNativeElementProps(as, {
-      ref: useMergedRefs(ref, contentRef),
-      'aria-modal': modalType !== 'non-modal',
-      'aria-describedby': dialogBodyID,
-      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
-      role: modalType === 'alert' ? 'alertdialog' : 'dialog',
+    backdrop: resolveShorthand(backdrop, {
+      required: !isNativeDialog && open && modalType !== 'non-modal',
+      defaultProps: {
+        'aria-hidden': 'true',
+        onClick: handledBackdropClick
+      }
+    }),
+    root: getNativeElementProps(as !== null && as !== void 0 ? as : 'dialog', { ...(isNativeDialog ? {
+        role: modalType === 'alert' ? 'alertdialog' : undefined,
+        onClose: handleNativeClose,
+        onClick: handleNativeClick,
+        onCancel: handleNativeCancel
+      } : {
+        'aria-modal': modalType !== 'non-modal',
+        role: modalType === 'alert' ? 'alertdialog' : 'dialog'
+      }),
       ...props,
       ...modalAttributes,
-      onKeyDown: handleRootKeyDown
+      onKeyDown: handleKeyDown,
+      'aria-describedby': dialogBodyID,
+      'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,
+      ref: useMergedRefs(ref, dialogRef)
     })
   };
 };