@fluentui/react-dialog 9.16.6 → 9.17.1

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Thu, 22 Jan 2026 17:01:36 GMT and should not be manually modified.
+This log was last generated on Wed, 25 Feb 2026 13:28:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.17.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.17.1)
+
+Wed, 25 Feb 2026 13:28:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.17.0..@fluentui/react-dialog_v9.17.1)
+
+### Patches
+
+- fix: add  missing "use client" directive to client components and styles ([PR #35719](https://github.com/microsoft/fluentui/pull/35719) by dmytrokirpa@microsoft.com)
+- refactor: use shared MotionRefForwarder from react-motion ([PR #35774](https://github.com/microsoft/fluentui/pull/35774) by robertpenner@microsoft.com)
+- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-motion to v9.12.0 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-aria to v9.17.10 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+- Bump @fluentui/react-portal to v9.8.11 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
+
+## [9.17.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.17.0)
+
+Thu, 12 Feb 2026 10:46:14 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.16.6..@fluentui/react-dialog_v9.17.0)
+
+### Minor changes
+
+- feat: add appearance to backdrop slot ([PR #35692](https://github.com/microsoft/fluentui/pull/35692) by vgenaev@gmail.com)
+- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+- Bump @fluentui/react-aria to v9.17.9 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
+
 ## [9.16.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.16.6)
 
-Thu, 22 Jan 2026 17:01:36 GMT 
+Thu, 22 Jan 2026 17:06:52 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.16.5..@fluentui/react-dialog_v9.16.6)
 
 ### Patches

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { ARIAButtonType } from '@fluentui/react-aria';
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import { ContextSelector } from '@fluentui/react-context-selector';
+import type { ExtractSlotProps } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 import type { PortalProps } from '@fluentui/react-portal';
@@ -63,6 +64,22 @@ export declare type DialogActionsSlots = {
  */
 export declare type DialogActionsState = ComponentState<DialogActionsSlots> & Pick<Required<DialogActionsProps>, 'position' | 'fluid'>;
 
+export declare type DialogBackdropContextValue = boolean;
+
+export declare const DialogBackdropProvider: React_2.Provider<boolean | undefined>;
+
+/**
+ * Custom slot props for the backdrop slot.
+ */
+export declare type DialogBackdropSlotProps = ExtractSlotProps<Slot<'div'> & {
+    /**
+     * Controls the backdrop appearance.
+     * - 'dimmed': Shows a dimmed backdrop (default for standalone dialogs)
+     * - 'transparent': Shows a transparent backdrop (default for nested dialogs)
+     */
+    appearance?: 'dimmed' | 'transparent';
+}>;
+
 /**
  * The `DialogBody` is a container where the content of the dialog is rendered.
  * Apart from styling, this component does not have other behavior.
@@ -265,8 +282,16 @@ export declare type DialogSurfaceSlots = {
      * This slot expects a `<div>` element which will replace the default backdrop.
      * The backdrop should have `aria-hidden="true"`.
      *
+     * Accepts an `appearance` prop to control backdrop visibility:
+     * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.
+     * - `'transparent'`: Always shows a transparent backdrop.
+     *
+     * @example
+     * ```tsx
+     * <DialogSurface backdrop={{ appearance: 'dimmed' }} />
+     * ```
      */
-    backdrop?: Slot<'div'>;
+    backdrop?: Slot<DialogBackdropSlotProps>;
     root: Slot<'div'>;
     /**
      * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).
@@ -281,6 +306,12 @@ export declare type DialogSurfaceSlots = {
 export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<DialogContextValue, 'isNestedDialog'> & Pick<PortalProps, 'mountNode'> & {
     open?: boolean;
     unmountOnClose?: boolean;
+    /**
+     * Whether the backdrop should be treated as nested (transparent).
+     * When inside an OverlayDrawer, this is `false` even though `isNestedDialog` may be `true`,
+     * preventing the false-positive transparent backdrop.
+     */
+    treatBackdropAsNested: boolean;
     /**
      * Transition status for animation.
      * In test environment, this is always `undefined`.
@@ -288,6 +319,7 @@ export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pi
      * @deprecated Will be always `undefined`.
      */
     transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
+    backdropAppearance?: DialogBackdropSlotProps['appearance'];
 };
 
 /**
@@ -428,6 +460,8 @@ export declare const useDialogActions_unstable: (props: DialogActionsProps, ref:
  */
 export declare const useDialogActionsStyles_unstable: (state: DialogActionsState) => DialogActionsState;
 
+export declare const useDialogBackdropContext_unstable: () => DialogBackdropContextValue | undefined;
+
 /**
  * Create the state required to render DialogBody.
  *

package/lib/DialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DialogSurface.ts"],"sourcesContent":["export type {\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './components/DialogSurface/index';\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  renderDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  useDialogSurfaceStyles_unstable,\n  useDialogSurface_unstable,\n} from './components/DialogSurface/index';\n"],"names":["DialogSurface","dialogSurfaceClassNames","renderDialogSurface_unstable","useDialogSurfaceContextValues_unstable","useDialogSurfaceStyles_unstable","useDialogSurface_unstable"],"mappings":"AAOA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}
+{"version":3,"sources":["../src/DialogSurface.ts"],"sourcesContent":["export type {\n  DialogBackdropSlotProps,\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './components/DialogSurface/index';\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  renderDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  useDialogSurfaceStyles_unstable,\n  useDialogSurface_unstable,\n} from './components/DialogSurface/index';\n"],"names":["DialogSurface","dialogSurfaceClassNames","renderDialogSurface_unstable","useDialogSurfaceContextValues_unstable","useDialogSurfaceStyles_unstable","useDialogSurface_unstable"],"mappings":"AAQA,SACEA,aAAa,EACbC,uBAAuB,EACvBC,4BAA4B,EAC5BC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yBAAyB,QACpB,mCAAmC"}

package/lib/components/Dialog/renderDialog.js

@@ -1,7 +1,7 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { MotionRefForwarder } from '../MotionRefForwarder';
+import { MotionRefForwarder } from '@fluentui/react-motion';
 import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
 /**
  * Render the final JSX of Dialog

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { MotionRefForwarder } from '../MotionRefForwarder';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues, InternalDialogSlots } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues): JSXElement => {\n  assertSlots<InternalDialogSlots>(state);\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {state.trigger}\n        {state.content && (\n          <state.surfaceMotion>\n            <MotionRefForwarder>\n              {/* Casting here as content should be equivalent to <DialogSurface/> */}\n              {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n              {state.content as React.ReactElement}\n            </MotionRefForwarder>\n          </state.surfaceMotion>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["assertSlots","React","MotionRefForwarder","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","value","dialog","dialogSurface","trigger","content","surfaceMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,YAAYC,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,iBAAiB;AAGvE;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDP,YAAiCM;IAEjC,qBACE,KAACH;QAAeK,OAAOD,cAAcE,MAAM;kBACzC,cAAA,MAACL;YAAsBI,OAAOD,cAAcG,aAAa;;gBACtDJ,MAAMK,OAAO;gBACbL,MAAMM,OAAO,kBACZ,KAACN,MAAMO,aAAa;8BAClB,cAAA,KAACX;kCAGEI,MAAMM,OAAO;;;;;;AAO5B,EAAE"}
+{"version":3,"sources":["../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues, InternalDialogSlots } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues): JSXElement => {\n  assertSlots<InternalDialogSlots>(state);\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {state.trigger}\n        {state.content && (\n          <state.surfaceMotion>\n            <MotionRefForwarder>\n              {/* Casting here as content should be equivalent to <DialogSurface/> */}\n              {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n              {state.content as React.ReactElement}\n            </MotionRefForwarder>\n          </state.surfaceMotion>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["assertSlots","React","MotionRefForwarder","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","value","dialog","dialogSurface","trigger","content","surfaceMotion"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,YAAYC,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,iBAAiB;AAGvE;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxDP,YAAiCM;IAEjC,qBACE,KAACH;QAAeK,OAAOD,cAAcE,MAAM;kBACzC,cAAA,MAACL;YAAsBI,OAAOD,cAAcG,aAAa;;gBACtDJ,MAAMK,OAAO;gBACbL,MAAMM,OAAO,kBACZ,KAACN,MAAMO,aAAa;8BAClB,cAAA,KAACX;kCAGEI,MAAMM,OAAO;;;;;;AAO5B,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dialog/useDialog.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\n\nimport { useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { DialogSurfaceMotion } from '../DialogSurfaceMotion';\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, inertTrapFocus = false, unmountOnClose = true } = props;\n\n  const dialogTitleId = useId('dialog-title-');\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 dialogRef = useFocusFirstElement(open, modalType);\n\n  const { modalAttributes, triggerAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n  const isNestedDialog = useHasParentContext(DialogContext);\n\n  return {\n    components: {\n      surfaceMotion: DialogSurfaceMotion,\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content,\n    trigger,\n    requestOpenChange,\n    dialogTitleId,\n    isNestedDialog,\n    unmountOnClose,\n    dialogRef,\n    modalAttributes,\n    triggerAttributes,\n    surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n      elementType: DialogSurfaceMotion,\n      defaultProps: {\n        visible: open,\n        appear: unmountOnClose,\n        unmountOnExit: unmountOnClose,\n      },\n    }),\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-dialog [useDialog]:\n        Dialog must contain at least one child <DialogSurface/>,\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"],"names":["React","useHasParentContext","useModalAttributes","presenceMotionSlot","useControllableState","useEventCallback","useId","useFocusFirstElement","DialogContext","DialogSurfaceMotion","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","unmountOnClose","dialogTitleId","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","dialogRef","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","isNestedDialog","components","surfaceMotion","elementType","defaultProps","visible","appear","unmountOnExit","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAE1F,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,mBAAmB,QAAQ,yBAAyB;AAG7D;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAEC,iBAAiB,IAAI,EAAE,GAAGL;IAEvG,MAAMM,gBAAgBX,MAAM;IAE5B,MAAM,CAACY,SAASC,QAAQ,GAAGC,4BAA4BR;IAEvD,MAAM,CAACS,MAAMC,QAAQ,GAAGlB,qBAAqB;QAC3CmB,OAAOZ,MAAMU,IAAI;QACjBG,cAAcb,MAAMc,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,oBAAoBtB,iBAAiB,CAACuB;QAC1Cd,yBAAAA,mCAAAA,aAAec,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,YAAYxB,qBAAqBc,MAAMR;IAE7C,MAAM,EAAEmB,eAAe,EAAEC,iBAAiB,EAAE,GAAG/B,mBAAmB;QAChEgC,WAAWrB,cAAc;QACzBsB,iBAAiB,CAACpB;IACpB;IACA,MAAMqB,iBAAiBnC,oBAAoBO;IAE3C,OAAO;QACL6B,YAAY;YACVC,eAAe7B;QACjB;QACAM;QACAM;QACAR;QACAM;QACAD;QACAS;QACAV;QACAmB;QACApB;QACAe;QACAC;QACAC;QACAK,eAAenC,mBAAmBQ,MAAM2B,aAAa,EAAE;YACrDC,aAAa9B;YACb+B,cAAc;gBACZC,SAASpB;gBACTqB,QAAQ1B;gBACR2B,eAAe3B;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASI,4BACPR,QAAyB;IAEzB,MAAMgC,gBAAgB5C,MAAM6C,QAAQ,CAACC,OAAO,CAAClC;IAC7C,IAAImC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACS;gBAAWT,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACS;gBAAWA;aAAU;IACjC;AACF"}
+{"version":3,"sources":["../src/components/Dialog/useDialog.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\n\nimport { useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { DialogSurfaceMotion } from '../DialogSurfaceMotion';\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, inertTrapFocus = false, unmountOnClose = true } = props;\n\n  const dialogTitleId = useId('dialog-title-');\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 dialogRef = useFocusFirstElement(open, modalType);\n\n  const { modalAttributes, triggerAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n\n  const isNestedDialog = useHasParentContext(DialogContext);\n\n  return {\n    components: {\n      surfaceMotion: DialogSurfaceMotion,\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content,\n    trigger,\n    requestOpenChange,\n    dialogTitleId,\n    isNestedDialog,\n    unmountOnClose,\n    dialogRef,\n    modalAttributes,\n    triggerAttributes,\n    surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n      elementType: DialogSurfaceMotion,\n      defaultProps: {\n        visible: open,\n        appear: unmountOnClose,\n        unmountOnExit: unmountOnClose,\n      },\n    }),\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-dialog [useDialog]:\n        Dialog must contain at least one child <DialogSurface/>,\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"],"names":["React","useHasParentContext","useModalAttributes","presenceMotionSlot","useControllableState","useEventCallback","useId","useFocusFirstElement","DialogContext","DialogSurfaceMotion","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","unmountOnClose","dialogTitleId","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","dialogRef","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","isNestedDialog","components","surfaceMotion","elementType","defaultProps","visible","appear","unmountOnExit","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,kBAAkB,QAAQ,0BAA0B;AAC7D,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,4BAA4B;AAE1F,SAASC,oBAAoB,QAAQ,cAAc;AACnD,SAASC,aAAa,QAAQ,iBAAiB;AAC/C,SAASC,mBAAmB,QAAQ,yBAAyB;AAG7D;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAEC,iBAAiB,IAAI,EAAE,GAAGL;IAEvG,MAAMM,gBAAgBX,MAAM;IAE5B,MAAM,CAACY,SAASC,QAAQ,GAAGC,4BAA4BR;IAEvD,MAAM,CAACS,MAAMC,QAAQ,GAAGlB,qBAAqB;QAC3CmB,OAAOZ,MAAMU,IAAI;QACjBG,cAAcb,MAAMc,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,oBAAoBtB,iBAAiB,CAACuB;QAC1Cd,yBAAAA,mCAAAA,aAAec,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,YAAYxB,qBAAqBc,MAAMR;IAE7C,MAAM,EAAEmB,eAAe,EAAEC,iBAAiB,EAAE,GAAG/B,mBAAmB;QAChEgC,WAAWrB,cAAc;QACzBsB,iBAAiB,CAACpB;IACpB;IAEA,MAAMqB,iBAAiBnC,oBAAoBO;IAE3C,OAAO;QACL6B,YAAY;YACVC,eAAe7B;QACjB;QACAM;QACAM;QACAR;QACAM;QACAD;QACAS;QACAV;QACAmB;QACApB;QACAe;QACAC;QACAC;QACAK,eAAenC,mBAAmBQ,MAAM2B,aAAa,EAAE;YACrDC,aAAa9B;YACb+B,cAAc;gBACZC,SAASpB;gBACTqB,QAAQ1B;gBACR2B,eAAe3B;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASI,4BACPR,QAAyB;IAEzB,MAAMgC,gBAAgB5C,MAAM6C,QAAQ,CAACC,OAAO,CAAClC;IAC7C,IAAImC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACS;gBAAWT,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACS;gBAAWA;aAAU;IACjC;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DialogContextValue, 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   */\n  backdrop?: Slot<'div'>;\n  root: Slot<'div'>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n  // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n  Pick<DialogContextValue, 'isNestedDialog'> &\n  Pick<PortalProps, 'mountNode'> & {\n    open?: boolean;\n    unmountOnClose?: boolean;\n\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     *\n     * @deprecated Will be always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n  };\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAcI"}
+{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot, ExtractSlotProps } from '@fluentui/react-utilities';\n\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\n/**\n * Custom slot props for the backdrop slot.\n */\nexport type DialogBackdropSlotProps = ExtractSlotProps<\n  Slot<'div'> & {\n    /**\n     * Controls the backdrop appearance.\n     * - 'dimmed': Shows a dimmed backdrop (default for standalone dialogs)\n     * - 'transparent': Shows a transparent backdrop (default for nested dialogs)\n     */\n    appearance?: 'dimmed' | 'transparent';\n  }\n>;\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   * Accepts an `appearance` prop to control backdrop visibility:\n   * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n   * - `'transparent'`: Always shows a transparent backdrop.\n   *\n   * @example\n   * ```tsx\n   * <DialogSurface backdrop={{ appearance: 'dimmed' }} />\n   * ```\n   */\n  backdrop?: Slot<DialogBackdropSlotProps>;\n  root: Slot<'div'>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n  // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n  Pick<DialogContextValue, 'isNestedDialog'> &\n  Pick<PortalProps, 'mountNode'> & {\n    open?: boolean;\n    unmountOnClose?: boolean;\n    /**\n     * Whether the backdrop should be treated as nested (transparent).\n     * When inside an OverlayDrawer, this is `false` even though `isNestedDialog` may be `true`,\n     * preventing the false-positive transparent backdrop.\n     */\n    treatBackdropAsNested: boolean;\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     *\n     * @deprecated Will be always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n    backdropAppearance?: DialogBackdropSlotProps['appearance'];\n  };\n"],"names":[],"mappings":"AA2DA;;CAEC,GACD,WAoBI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAQhD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,sCAAsC,QAAQ,kCAAkC"}
+{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n  DialogBackdropSlotProps,\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":"AAAA,SAASA,aAAa,QAAQ,kBAAkB;AAShD,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,yBAAyB,QAAQ,qBAAqB;AAC/D,SAASC,uBAAuB,EAAEC,+BAA+B,QAAQ,kCAAkC;AAC3G,SAASC,sCAAsC,QAAQ,kCAAkC"}

package/lib/components/DialogSurface/useDialogSurface.js

@@ -3,10 +3,10 @@ import { Escape } from '@fluentui/keyboard-keys';
 import { presenceMotionSlot } from '@fluentui/react-motion';
 import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
 import * as React from 'react';
-import { useDialogContext_unstable } from '../../contexts';
+import { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';
 import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
 import { DialogBackdropMotion } from '../DialogBackdropMotion';
-import { useMotionForwardedRef } from '../MotionRefForwarder';
+import { useMotionForwardedRef } from '@fluentui/react-motion';
 /**
  * Create the state required to render DialogSurface.
  *
@@ -19,6 +19,8 @@ import { useMotionForwardedRef } from '../MotionRefForwarder';
     const contextRef = useMotionForwardedRef();
     const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);
     const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);
+    const backdropOverride = useDialogBackdropContext_unstable();
+    const treatBackdropAsNested = backdropOverride !== null && backdropOverride !== void 0 ? backdropOverride : isNestedDialog;
     const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);
     const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);
     const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
@@ -59,8 +61,11 @@ import { useMotionForwardedRef } from '../MotionRefForwarder';
         },
         elementType: 'div'
     });
+    const backdropAppearance = backdrop === null || backdrop === void 0 ? void 0 : backdrop.appearance;
     if (backdrop) {
         backdrop.onClick = handledBackdropClick;
+        // remove backdrop.appearance so it is not passed to the DOM
+        delete backdrop.appearance;
     }
     const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
     useIsomorphicLayoutEffect(()=>{
@@ -89,6 +94,8 @@ import { useMotionForwardedRef } from '../MotionRefForwarder';
         open,
         backdrop,
         isNestedDialog,
+        treatBackdropAsNested,
+        backdropAppearance,
         unmountOnClose,
         mountNode: props.mountNode,
         root: slot.always(getIntrinsicElementProps('div', {

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useDialogContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '../MotionRefForwarder';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const contextRef = useMotionForwardedRef();\n\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const unmountOnClose = useDialogContext_unstable(ctx => ctx.unmountOnClose);\n\n  const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.backdrop)) {\n      props.backdrop.onClick?.(event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick',\n      });\n    }\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n\n    if (event.key === Escape && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.preventDefault();\n    }\n  });\n\n  const backdrop = slot.optional(props.backdrop, {\n    renderByDefault: modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n    elementType: 'div',\n  });\n\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n  }\n\n  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) {\n      enableBodyScroll();\n      return;\n    }\n\n    if (isNestedDialog || modalType === 'non-modal') {\n      return;\n    }\n\n    disableBodyScroll();\n\n    return () => enableBodyScroll();\n  }, [open, modalType, isNestedDialog, disableBodyScroll, enableBodyScroll]);\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n      backdropMotion: DialogBackdropMotion,\n    },\n    open,\n    backdrop,\n    isNestedDialog,\n    unmountOnClose,\n    mountNode: props.mountNode,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-modal': modalType !== 'non-modal',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n        'aria-hidden': !unmountOnClose && !open ? true : undefined,\n        ...props,\n        ...modalAttributes,\n        onKeyDown: handleKeyDown,\n        // FIXME:\n        // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n    backdropMotion: presenceMotionSlot(props.backdropMotion, {\n      elementType: DialogBackdropMotion,\n      defaultProps: {\n        appear: unmountOnClose,\n        visible: open,\n      },\n    }),\n\n    // Deprecated properties\n    transitionStatus: undefined,\n  };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","React","useDialogContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","unmountOnClose","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const contextRef = useMotionForwardedRef();\n\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n  const backdropOverride = useDialogBackdropContext_unstable();\n  const treatBackdropAsNested = backdropOverride ?? isNestedDialog;\n\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const unmountOnClose = useDialogContext_unstable(ctx => ctx.unmountOnClose);\n\n  const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.backdrop)) {\n      props.backdrop.onClick?.(event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick',\n      });\n    }\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n\n    if (event.key === Escape && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.preventDefault();\n    }\n  });\n\n  const backdrop = slot.optional(props.backdrop, {\n    renderByDefault: modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n    elementType: 'div',\n  });\n\n  const backdropAppearance = backdrop?.appearance;\n\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n    // remove backdrop.appearance so it is not passed to the DOM\n    delete backdrop.appearance;\n  }\n\n  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) {\n      enableBodyScroll();\n      return;\n    }\n\n    if (isNestedDialog || modalType === 'non-modal') {\n      return;\n    }\n\n    disableBodyScroll();\n\n    return () => enableBodyScroll();\n  }, [open, modalType, isNestedDialog, disableBodyScroll, enableBodyScroll]);\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n      backdropMotion: DialogBackdropMotion,\n    },\n    open,\n    backdrop,\n    isNestedDialog,\n    treatBackdropAsNested,\n    backdropAppearance,\n    unmountOnClose,\n    mountNode: props.mountNode,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-modal': modalType !== 'non-modal',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n        'aria-hidden': !unmountOnClose && !open ? true : undefined,\n        ...props,\n        ...modalAttributes,\n        onKeyDown: handleKeyDown,\n        // FIXME:\n        // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n    backdropMotion: presenceMotionSlot(props.backdropMotion, {\n      elementType: DialogBackdropMotion,\n      defaultProps: {\n        appear: unmountOnClose,\n        visible: open,\n      },\n    }),\n\n    // Deprecated properties\n    transitionStatus: undefined,\n  };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","React","useDialogContext_unstable","useDialogBackdropContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","backdropOverride","treatBackdropAsNested","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","unmountOnClose","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","backdropAppearance","appearance","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"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"}

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js

@@ -33,19 +33,21 @@ export const useDialogSurfaceStyles_unstable = state => {
   'use no memo';
 
   const {
-    isNestedDialog,
     root,
     backdrop,
     open,
-    unmountOnClose
+    unmountOnClose,
+    treatBackdropAsNested,
+    backdropAppearance
   } = state;
   const rootBaseStyle = useRootBaseStyle();
   const backdropBaseStyle = useBackdropBaseStyle();
   const styles = useStyles();
+  const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
   const mountedAndClosed = !unmountOnClose && !open;
   root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
   if (backdrop) {
-    backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, mountedAndClosed && styles.dialogHidden, backdrop.className);
+    backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
   }
   return state;
 };

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","isNestedDialog","open","unmountOnClose","rootBaseStyle","backdropBaseStyle","styles","mountedAndClosed","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n    root: 'fui-DialogSurface',\n    backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    inset: 0,\n    padding: SURFACE_PADDING,\n    margin: 'auto',\n    borderStyle: 'none',\n    overflow: 'unset',\n    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: [\n        '100vh',\n        '100dvh'\n    ],\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    // Same styles as DialogSurfaceMotion last keyframe,\n    // to ensure dialog will be properly styled when surfaceMotion is opted-out\n    boxShadow: tokens.shadow64,\n    [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    },\n    [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n        overflowY: 'auto',\n        // We need to offset the scrollbar by adding transparent borders otherwise\n        // it conflicts with the border radius.\n        paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n        borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n    }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n    inset: '0px',\n    backgroundColor: tokens.colorBackgroundOverlay,\n    position: 'fixed'\n});\nconst useStyles = makeStyles({\n    nestedDialogBackdrop: {\n        backgroundColor: tokens.colorTransparentBackground\n    },\n    dialogHidden: {\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const { isNestedDialog, root, backdrop, open, unmountOnClose } = state;\n    const rootBaseStyle = useRootBaseStyle();\n    const backdropBaseStyle = useBackdropBaseStyle();\n    const styles = useStyles();\n    const mountedAndClosed = !unmountOnClose && !open;\n    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, mountedAndClosed && styles.dialogHidden, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,yCAAyC,EAAEC,sCAAsC,EAAEC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AAC1L,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,gBAAGhB,aAAA,0GAI5B,CAAC;AACF,MAAMiB,SAAS,gBAAGhB,QAAA;EAAAiB,oBAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAM;IAAEC,cAAc;IAAEd,IAAI;IAAEC,QAAQ;IAAEc,IAAI;IAAEC;EAAe,CAAC,GAAGH,KAAK;EACtE,MAAMI,aAAa,GAAGf,gBAAgB,CAAC,CAAC;EACxC,MAAMgB,iBAAiB,GAAGb,oBAAoB,CAAC,CAAC;EAChD,MAAMc,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1B,MAAMc,gBAAgB,GAAG,CAACJ,cAAc,IAAI,CAACD,IAAI;EACjDf,IAAI,CAACqB,SAAS,GAAG9B,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEiB,aAAa,EAAEG,gBAAgB,IAAID,MAAM,CAACV,YAAY,EAAET,IAAI,CAACqB,SAAS,CAAC;EACnI,IAAIpB,QAAQ,EAAE;IACVA,QAAQ,CAACoB,SAAS,GAAG9B,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEiB,iBAAiB,EAAEJ,cAAc,IAAIK,MAAM,CAACZ,oBAAoB,EAAEa,gBAAgB,IAAID,MAAM,CAACV,YAAY,EAAER,QAAQ,CAACoB,SAAS,CAAC;EACtM;EACA,OAAOR,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n    root: 'fui-DialogSurface',\n    backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    inset: 0,\n    padding: SURFACE_PADDING,\n    margin: 'auto',\n    borderStyle: 'none',\n    overflow: 'unset',\n    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: [\n        '100vh',\n        '100dvh'\n    ],\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    // Same styles as DialogSurfaceMotion last keyframe,\n    // to ensure dialog will be properly styled when surfaceMotion is opted-out\n    boxShadow: tokens.shadow64,\n    [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    },\n    [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n        overflowY: 'auto',\n        // We need to offset the scrollbar by adding transparent borders otherwise\n        // it conflicts with the border radius.\n        paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n        borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n    }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n    inset: '0px',\n    backgroundColor: tokens.colorBackgroundOverlay,\n    position: 'fixed'\n});\nconst useStyles = makeStyles({\n    nestedDialogBackdrop: {\n        backgroundColor: tokens.colorTransparentBackground\n    },\n    dialogHidden: {\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n    const rootBaseStyle = useRootBaseStyle();\n    const backdropBaseStyle = useBackdropBaseStyle();\n    const styles = useStyles();\n    const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n    const mountedAndClosed = !unmountOnClose && !open;\n    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,yCAAyC,EAAEC,sCAAsC,EAAEC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AAC1L,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,gBAAGhB,aAAA,0GAI5B,CAAC;AACF,MAAMiB,SAAS,gBAAGhB,QAAA;EAAAiB,oBAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,aAAa;;EACb,MAAM;IAAEb,IAAI;IAAEC,QAAQ;IAAEa,IAAI;IAAEC,cAAc;IAAEC,qBAAqB;IAAEC;EAAmB,CAAC,GAAGJ,KAAK;EACjG,MAAMK,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;EACxC,MAAMiB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;EAChD,MAAMe,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAMe,qBAAqB,GAAGJ,kBAAkB,GAAGA,kBAAkB,KAAK,aAAa,GAAGD,qBAAqB;EAC/G,MAAMM,gBAAgB,GAAG,CAACP,cAAc,IAAI,CAACD,IAAI;EACjDd,IAAI,CAACuB,SAAS,GAAGhC,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEI,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAET,IAAI,CAACuB,SAAS,CAAC;EACnI,IAAItB,QAAQ,EAAE;IACVA,QAAQ,CAACsB,SAAS,GAAGhC,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,iBAAiB,EAAEG,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAEY,qBAAqB,IAAID,MAAM,CAACb,oBAAoB,EAAEN,QAAQ,CAACsB,SAAS,CAAC;EAC7M;EACA,OAAOV,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js

@@ -64,14 +64,15 @@ const useStyles = makeStyles({
  * Apply styling to the DialogSurface slots based on the state
  */ export const useDialogSurfaceStyles_unstable = (state)=>{
     'use no memo';
-    const { isNestedDialog, root, backdrop, open, unmountOnClose } = state;
+    const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;
     const rootBaseStyle = useRootBaseStyle();
     const backdropBaseStyle = useBackdropBaseStyle();
     const styles = useStyles();
+    const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
     const mountedAndClosed = !unmountOnClose && !open;
     root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
     if (backdrop) {
-        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, mountedAndClosed && styles.dialogHidden, backdrop.className);
+        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
     }
     return state;
 };

package/lib/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  inset: 0,\n  padding: SURFACE_PADDING,\n  margin: 'auto',\n  borderStyle: 'none',\n  overflow: 'unset',\n  border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n  borderRadius: tokens.borderRadiusXLarge,\n\n  display: 'block',\n  userSelect: 'unset',\n  visibility: 'unset',\n  position: 'fixed',\n  height: 'fit-content',\n  maxWidth: '600px',\n  maxHeight: ['100vh', '100dvh'],\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  // Same styles as DialogSurfaceMotion last keyframe,\n  // to ensure dialog will be properly styled when surfaceMotion is opted-out\n  boxShadow: tokens.shadow64,\n\n  [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n  },\n\n  [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n    overflowY: 'auto',\n    // We need to offset the scrollbar by adding transparent borders otherwise\n    // it conflicts with the border radius.\n    paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n    borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n  inset: '0px',\n  backgroundColor: tokens.colorBackgroundOverlay,\n  position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n  nestedDialogBackdrop: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n\n  dialogHidden: {\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const { isNestedDialog, root, backdrop, open, unmountOnClose } = state;\n\n  const rootBaseStyle = useRootBaseStyle();\n  const backdropBaseStyle = useBackdropBaseStyle();\n  const styles = useStyles();\n\n  const mountedAndClosed = !unmountOnClose && !open;\n\n  root.className = mergeClasses(\n    dialogSurfaceClassNames.root,\n    rootBaseStyle,\n    mountedAndClosed && styles.dialogHidden,\n    root.className,\n  );\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      backdropBaseStyle,\n      isNestedDialog && styles.nestedDialogBackdrop,\n      mountedAndClosed && styles.dialogHidden,\n      backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","isNestedDialog","open","unmountOnClose","rootBaseStyle","backdropBaseStyle","styles","mountedAndClosed","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,iBAAiB;AAGxB,OAAO,MAAMC,0BAAsF;IACjGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBb,gBAAgB;IACvC,GAAGI,yBAAyB;IAC5BU,OAAO;IACPC,SAASN;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,qBAAqB,OAAO,EAAEL,OAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,OAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,OAAO6B,uBAAuB;IAC/CC,OAAO9B,OAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,OAAOiC,QAAQ;IAE1B,CAAC9B,uCAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,gCAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,gBAAgB,GAAG,EAAEJ,0CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC;QAClBmC,gBAAgBnC;QAChBoC,mBAAmBpC;IACrB;AACF;AAEA,MAAMqC,uBAAuB1C,gBAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,OAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,YAAY3C,WAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,OAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,cAAc,EAAExC,IAAI,EAAEC,QAAQ,EAAEwC,IAAI,EAAEC,cAAc,EAAE,GAAGH;IAEjE,MAAMI,gBAAgBzC;IACtB,MAAM0C,oBAAoBb;IAC1B,MAAMc,SAASZ;IAEf,MAAMa,mBAAmB,CAACJ,kBAAkB,CAACD;IAE7CzC,KAAK+C,SAAS,GAAGxD,aACfQ,wBAAwBC,IAAI,EAC5B2C,eACAG,oBAAoBD,OAAOT,YAAY,EACvCpC,KAAK+C,SAAS;IAGhB,IAAI9C,UAAU;QACZA,SAAS8C,SAAS,GAAGxD,aACnBQ,wBAAwBE,QAAQ,EAChC2C,mBACAJ,kBAAkBK,OAAOX,oBAAoB,EAC7CY,oBAAoBD,OAAOT,YAAY,EACvCnC,SAAS8C,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}
+{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  inset: 0,\n  padding: SURFACE_PADDING,\n  margin: 'auto',\n  borderStyle: 'none',\n  overflow: 'unset',\n  border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n  borderRadius: tokens.borderRadiusXLarge,\n\n  display: 'block',\n  userSelect: 'unset',\n  visibility: 'unset',\n  position: 'fixed',\n  height: 'fit-content',\n  maxWidth: '600px',\n  maxHeight: ['100vh', '100dvh'],\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  // Same styles as DialogSurfaceMotion last keyframe,\n  // to ensure dialog will be properly styled when surfaceMotion is opted-out\n  boxShadow: tokens.shadow64,\n\n  [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n  },\n\n  [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n    overflowY: 'auto',\n    // We need to offset the scrollbar by adding transparent borders otherwise\n    // it conflicts with the border radius.\n    paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n    borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n  inset: '0px',\n  backgroundColor: tokens.colorBackgroundOverlay,\n  position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n  nestedDialogBackdrop: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n\n  dialogHidden: {\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n\n  const rootBaseStyle = useRootBaseStyle();\n  const backdropBaseStyle = useBackdropBaseStyle();\n  const styles = useStyles();\n  const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n\n  const mountedAndClosed = !unmountOnClose && !open;\n\n  root.className = mergeClasses(\n    dialogSurfaceClassNames.root,\n    rootBaseStyle,\n    mountedAndClosed && styles.dialogHidden,\n    root.className,\n  );\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      backdropBaseStyle,\n      mountedAndClosed && styles.dialogHidden,\n      isBackdropTransparent && styles.nestedDialogBackdrop,\n      backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SACEC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,iBAAiB;AAIxB,OAAO,MAAMC,0BAAsF;IACjGC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,mBAAmBb,gBAAgB;IACvC,GAAGI,yBAAyB;IAC5BU,OAAO;IACPC,SAASN;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,qBAAqB,OAAO,EAAEL,OAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,OAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,OAAO6B,uBAAuB;IAC/CC,OAAO9B,OAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,OAAOiC,QAAQ;IAE1B,CAAC9B,uCAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,gCAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,gBAAgB,GAAG,EAAEJ,0CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC;QAClBmC,gBAAgBnC;QAChBoC,mBAAmBpC;IACrB;AACF;AAEA,MAAMqC,uBAAuB1C,gBAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,OAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,YAAY3C,WAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,OAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEvC,IAAI,EAAEC,QAAQ,EAAEuC,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAE,GAAGJ;IAE5F,MAAMK,gBAAgB1C;IACtB,MAAM2C,oBAAoBd;IAC1B,MAAMe,SAASb;IACf,MAAMc,wBAAwBJ,qBAAqBA,uBAAuB,gBAAgBD;IAE1F,MAAMM,mBAAmB,CAACP,kBAAkB,CAACD;IAE7CxC,KAAKiD,SAAS,GAAG1D,aACfQ,wBAAwBC,IAAI,EAC5B4C,eACAI,oBAAoBF,OAAOV,YAAY,EACvCpC,KAAKiD,SAAS;IAGhB,IAAIhD,UAAU;QACZA,SAASgD,SAAS,GAAG1D,aACnBQ,wBAAwBE,QAAQ,EAChC4C,mBACAG,oBAAoBF,OAAOV,YAAY,EACvCW,yBAAyBD,OAAOZ,oBAAoB,EACpDjC,SAASgD,SAAS;IAEtB;IAEA,OAAOV;AACT,EAAE"}

package/lib/contexts/dialogBackdropContext.js

@@ -0,0 +1,7 @@
+'use client';
+import * as React from 'react';
+export const DialogBackdropContext = React.createContext(undefined);
+export const DialogBackdropProvider = DialogBackdropContext.Provider;
+export const useDialogBackdropContext_unstable = ()=>{
+    return React.useContext(DialogBackdropContext);
+};

package/lib/contexts/dialogBackdropContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/dialogBackdropContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type DialogBackdropContextValue = boolean;\n\nexport const DialogBackdropContext = React.createContext<DialogBackdropContextValue | undefined>(undefined);\n\nexport const DialogBackdropProvider = DialogBackdropContext.Provider;\n\nexport const useDialogBackdropContext_unstable = (): DialogBackdropContextValue | undefined => {\n  return React.useContext(DialogBackdropContext);\n};\n"],"names":["React","DialogBackdropContext","createContext","undefined","DialogBackdropProvider","Provider","useDialogBackdropContext_unstable","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,OAAO,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC,WAAW;AAE5G,OAAO,MAAMC,yBAAyBH,sBAAsBI,QAAQ,CAAC;AAErE,OAAO,MAAMC,oCAAoC;IAC/C,OAAON,MAAMO,UAAU,CAACN;AAC1B,EAAE"}

package/lib/contexts/index.js

@@ -1,3 +1,4 @@
 export { DIALOG_GAP, DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from './constants';
 export { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';
 export { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';
+export { DialogBackdropContext, DialogBackdropProvider, useDialogBackdropContext_unstable } from './dialogBackdropContext';

package/lib/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export {\n  DIALOG_GAP,\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from './constants';\nexport type { DialogContextValue } from './dialogContext';\nexport { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';\nexport type { DialogSurfaceContextValue } from './dialogSurfaceContext';\nexport { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';\n"],"names":["DIALOG_GAP","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","DialogContext","DialogProvider","useDialogContext_unstable","DialogSurfaceContext","DialogSurfaceProvider","useDialogSurfaceContext_unstable"],"mappings":"AAAA,SACEA,UAAU,EACVC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,cAAc;AAErB,SAASC,aAAa,EAAEC,cAAc,EAAEC,yBAAyB,QAAQ,kBAAkB;AAE3F,SAASC,oBAAoB,EAAEC,qBAAqB,EAAEC,gCAAgC,QAAQ,yBAAyB"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export {\n  DIALOG_GAP,\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from './constants';\nexport type { DialogContextValue } from './dialogContext';\nexport { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';\nexport type { DialogSurfaceContextValue } from './dialogSurfaceContext';\nexport type { DialogBackdropContextValue } from './dialogBackdropContext';\nexport { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';\nexport {\n  DialogBackdropContext,\n  DialogBackdropProvider,\n  useDialogBackdropContext_unstable,\n} from './dialogBackdropContext';\n"],"names":["DIALOG_GAP","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","DialogContext","DialogProvider","useDialogContext_unstable","DialogSurfaceContext","DialogSurfaceProvider","useDialogSurfaceContext_unstable","DialogBackdropContext","DialogBackdropProvider","useDialogBackdropContext_unstable"],"mappings":"AAAA,SACEA,UAAU,EACVC,yCAAyC,EACzCC,sCAAsC,EACtCC,+BAA+B,EAC/BC,oBAAoB,EACpBC,eAAe,QACV,cAAc;AAErB,SAASC,aAAa,EAAEC,cAAc,EAAEC,yBAAyB,QAAQ,kBAAkB;AAG3F,SAASC,oBAAoB,EAAEC,qBAAqB,EAAEC,gCAAgC,QAAQ,yBAAyB;AACvH,SACEC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,0BAA0B"}

package/lib/index.js

@@ -5,5 +5,5 @@ export { DialogBody, dialogBodyClassNames, useDialogBody_unstable, useDialogBody
 export { DialogTitle, dialogTitleClassNames, useDialogTitle_unstable, useDialogTitleStyles_unstable, renderDialogTitle_unstable } from './DialogTitle';
 export { DialogSurface, dialogSurfaceClassNames, useDialogSurface_unstable, useDialogSurfaceStyles_unstable, useDialogSurfaceContextValues_unstable, renderDialogSurface_unstable } from './DialogSurface';
 export { DialogContent, dialogContentClassNames, useDialogContent_unstable, useDialogContentStyles_unstable, renderDialogContent_unstable } from './DialogContent';
-export { useDialogContext_unstable, useDialogSurfaceContext_unstable, DialogProvider, DialogSurfaceProvider } from './contexts/index';
+export { useDialogContext_unstable, useDialogSurfaceContext_unstable, DialogProvider, DialogSurfaceProvider, DialogBackdropProvider, useDialogBackdropContext_unstable } from './contexts/index';
 export { DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET } from './contexts/constants';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n  DialogContextValues,\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogModalType,\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  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n  DialogSurfaceElement,\n  DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n  DialogContent,\n  dialogContentClassNames,\n  useDialogContent_unstable,\n  useDialogContentStyles_unstable,\n  renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n  useDialogContext_unstable,\n  useDialogSurfaceContext_unstable,\n  DialogProvider,\n  DialogSurfaceProvider,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';\n\nexport {\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n} from './contexts/constants';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,+BAA+B,QAAQ,WAAW;AAY9G,SAASC,aAAa,EAAEC,yBAAyB,EAAEC,4BAA4B,QAAQ,kBAAkB;AAQzG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAQzB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,sBAAsB,EACtBC,4BAA4B,EAC5BC,yBAAyB,QACpB,eAAe;AAGtB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,sCAAsC,EACtCC,4BAA4B,QACvB,kBAAkB;AASzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAGzB,SACEC,yBAAyB,EACzBC,gCAAgC,EAChCC,cAAc,EACdC,qBAAqB,QAChB,mBAAmB;AAI1B,SACEC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yCAAyC,QACpC,uBAAuB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n  DialogContextValues,\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogModalType,\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  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n  DialogBackdropSlotProps,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n  DialogSurfaceElement,\n  DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n  DialogContent,\n  dialogContentClassNames,\n  useDialogContent_unstable,\n  useDialogContentStyles_unstable,\n  renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n  useDialogContext_unstable,\n  useDialogSurfaceContext_unstable,\n  DialogProvider,\n  DialogSurfaceProvider,\n  DialogBackdropProvider,\n  useDialogBackdropContext_unstable,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue, DialogBackdropContextValue } from './contexts/index';\n\nexport {\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n} from './contexts/constants';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider","DialogBackdropProvider","useDialogBackdropContext_unstable","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,+BAA+B,QAAQ,WAAW;AAY9G,SAASC,aAAa,EAAEC,yBAAyB,EAAEC,4BAA4B,QAAQ,kBAAkB;AAQzG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAQzB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,sBAAsB,EACtBC,4BAA4B,EAC5BC,yBAAyB,QACpB,eAAe;AAGtB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,sCAAsC,EACtCC,4BAA4B,QACvB,kBAAkB;AAUzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAGzB,SACEC,yBAAyB,EACzBC,gCAAgC,EAChCC,cAAc,EACdC,qBAAqB,EACrBC,sBAAsB,EACtBC,iCAAiC,QAC5B,mBAAmB;AAI1B,SACEC,sCAAsC,EACtCC,+BAA+B,EAC/BC,yCAAyC,QACpC,uBAAuB"}

package/lib/utils/useDisableBodyScroll.styles.js

@@ -1,3 +1,5 @@
+'use client';
+
 import { __resetStyles } from '@griffel/react';
 // this style must be applied to the html element to disable scrolling
 export const useHTMLNoScrollStyles = /*#__PURE__*/__resetStyles("r6pzz3z", null, [".r6pzz3z{overflow-y:hidden;overflow-y:clip;scrollbar-gutter:stable;}"]);

package/lib/utils/useDisableBodyScroll.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","useHTMLNoScrollStyles","useBodyNoScrollStyles"],"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n    overflowY: [\n        'hidden',\n        'clip'\n    ],\n    scrollbarGutter: 'stable'\n});\nexport const useBodyNoScrollStyles = makeResetStyles({\n    overflowY: 'hidden'\n});\n"],"mappings":"AAAA,SAAAA,aAAA,QAAgC,gBAAgB;AAChD;AACA,OAAO,MAAMC,qBAAqB,gBAAGD,aAAA,0FAMpC,CAAC;AACF,OAAO,MAAME,qBAAqB,gBAAGF,aAAA,oDAEpC,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","useHTMLNoScrollStyles","useBodyNoScrollStyles"],"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n    overflowY: [\n        'hidden',\n        'clip'\n    ],\n    scrollbarGutter: 'stable'\n});\nexport const useBodyNoScrollStyles = makeResetStyles({\n    overflowY: 'hidden'\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,QAAgC,gBAAgB;AAChD;AACA,OAAO,MAAMC,qBAAqB,gBAAGD,aAAA,0FAMpC,CAAC;AACF,OAAO,MAAME,qBAAqB,gBAAGF,aAAA,oDAEpC,CAAC","ignoreList":[]}

package/lib/utils/useDisableBodyScroll.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 import { makeResetStyles } from '@griffel/react';
 // this style must be applied to the html element to disable scrolling
 export const useHTMLNoScrollStyles = makeResetStyles({

package/lib/utils/useDisableBodyScroll.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useDisableBodyScroll.styles.ts"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n  overflowY: ['hidden', 'clip'],\n  scrollbarGutter: 'stable',\n});\n\nexport const useBodyNoScrollStyles = makeResetStyles({\n  overflowY: 'hidden',\n});\n"],"names":["makeResetStyles","useHTMLNoScrollStyles","overflowY","scrollbarGutter","useBodyNoScrollStyles"],"mappings":"AAAA,SAASA,eAAe,QAAQ,iBAAiB;AAEjD,sEAAsE;AACtE,OAAO,MAAMC,wBAAwBD,gBAAgB;IACnDE,WAAW;QAAC;QAAU;KAAO;IAC7BC,iBAAiB;AACnB,GAAG;AAEH,OAAO,MAAMC,wBAAwBJ,gBAAgB;IACnDE,WAAW;AACb,GAAG"}
+{"version":3,"sources":["../src/utils/useDisableBodyScroll.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles } from '@griffel/react';\n\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n  overflowY: ['hidden', 'clip'],\n  scrollbarGutter: 'stable',\n});\n\nexport const useBodyNoScrollStyles = makeResetStyles({\n  overflowY: 'hidden',\n});\n"],"names":["makeResetStyles","useHTMLNoScrollStyles","overflowY","scrollbarGutter","useBodyNoScrollStyles"],"mappings":"AAAA;AAEA,SAASA,eAAe,QAAQ,iBAAiB;AAEjD,sEAAsE;AACtE,OAAO,MAAMC,wBAAwBD,gBAAgB;IACnDE,WAAW;QAAC;QAAU;KAAO;IAC7BC,iBAAiB;AACnB,GAAG;AAEH,OAAO,MAAMC,wBAAwBJ,gBAAgB;IACnDE,WAAW;AACb,GAAG"}

package/lib-commonjs/DialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DialogSurface.ts"],"sourcesContent":["export type {\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './components/DialogSurface/index';\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  renderDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  useDialogSurfaceStyles_unstable,\n  useDialogSurface_unstable,\n} from './components/DialogSurface/index';\n"],"names":["DialogSurface","dialogSurfaceClassNames","renderDialogSurface_unstable","useDialogSurfaceContextValues_unstable","useDialogSurfaceStyles_unstable","useDialogSurface_unstable"],"mappings":";;;;;;;;;;;;eAQEA,oBAAa;;;eACbC,8BAAuB;;;eACvBC,mCAA4B;;;eAC5BC,6CAAsC;;;eACtCC,sCAA+B;;;eAC/BC,gCAAyB;;;uBACpB,mCAAmC"}
+{"version":3,"sources":["../src/DialogSurface.ts"],"sourcesContent":["export type {\n  DialogBackdropSlotProps,\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './components/DialogSurface/index';\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  renderDialogSurface_unstable,\n  useDialogSurfaceContextValues_unstable,\n  useDialogSurfaceStyles_unstable,\n  useDialogSurface_unstable,\n} from './components/DialogSurface/index';\n"],"names":["DialogSurface","dialogSurfaceClassNames","renderDialogSurface_unstable","useDialogSurfaceContextValues_unstable","useDialogSurfaceStyles_unstable","useDialogSurface_unstable"],"mappings":";;;;;;;;;;;;eASEA,oBAAa;;;eACbC,8BAAuB;;;eACvBC,mCAA4B;;;eAC5BC,6CAAsC;;;eACtCC,sCAA+B;;;eAC/BC,gCAAyB;;;uBACpB,mCAAmC"}

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

@@ -12,7 +12,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
 const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const _MotionRefForwarder = require("../MotionRefForwarder");
+const _reactmotion = require("@fluentui/react-motion");
 const _contexts = require("../../contexts");
 const renderDialog_unstable = (state, contextValues)=>{
     (0, _reactutilities.assertSlots)(state);
@@ -23,7 +23,7 @@ const renderDialog_unstable = (state, contextValues)=>{
             children: [
                 state.trigger,
                 state.content && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.surfaceMotion, {
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_MotionRefForwarder.MotionRefForwarder, {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactmotion.MotionRefForwarder, {
                         children: state.content
                     })
                 })

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { MotionRefForwarder } from '../MotionRefForwarder';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues, InternalDialogSlots } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues): JSXElement => {\n  assertSlots<InternalDialogSlots>(state);\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {state.trigger}\n        {state.content && (\n          <state.surfaceMotion>\n            <MotionRefForwarder>\n              {/* Casting here as content should be equivalent to <DialogSurface/> */}\n              {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n              {state.content as React.ReactElement}\n            </MotionRefForwarder>\n          </state.surfaceMotion>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["assertSlots","React","MotionRefForwarder","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","value","dialog","dialogSurface","trigger","content","surfaceMotion"],"mappings":";;;;+BAcaK;;;;;;;4BAbb,iCAAiD;gCAErB,4BAA4B;iEAEjC,QAAQ;oCAEI,wBAAwB;0BACL,iBAAiB;AAMhE,8BAA8B,CAACC,OAAoBC;QACxDP,2BAAAA,EAAiCM;IAEjC,OAAA,WAAA,OACE,eAAA,EAACH,wBAAAA,EAAAA;QAAeK,OAAOD,cAAcE,MAAM;kBACzC,WAAA,OAAA,gBAAA,EAACL,+BAAAA,EAAAA;YAAsBI,OAAOD,cAAcG,aAAa;;gBACtDJ,MAAMK,OAAO;gBACbL,MAAMM,OAAO,IAAA,WAAA,OACZ,eAAA,EAACN,MAAMO,aAAa,EAAA;8BAClB,WAAA,OAAA,eAAA,EAACX,sCAAAA,EAAAA;kCAGEI,MAAMM,OAAO;;;;;;AAO5B,EAAE"}
+{"version":3,"sources":["../src/components/Dialog/renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { MotionRefForwarder } from '@fluentui/react-motion';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues, InternalDialogSlots } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues): JSXElement => {\n  assertSlots<InternalDialogSlots>(state);\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {state.trigger}\n        {state.content && (\n          <state.surfaceMotion>\n            <MotionRefForwarder>\n              {/* Casting here as content should be equivalent to <DialogSurface/> */}\n              {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n              {state.content as React.ReactElement}\n            </MotionRefForwarder>\n          </state.surfaceMotion>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["assertSlots","React","MotionRefForwarder","DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","value","dialog","dialogSurface","trigger","content","surfaceMotion"],"mappings":";;;;+BAcaK;;;;;;;4BAbb,iCAAiD;gCAErB,4BAA4B;iEAEjC,QAAQ;6BAEI,yBAAyB;0BACN,iBAAiB;AAMhE,8BAA8B,CAACC,OAAoBC;QACxDP,2BAAAA,EAAiCM;IAEjC,OAAA,WAAA,OACE,eAAA,EAACH,wBAAAA,EAAAA;QAAeK,OAAOD,cAAcE,MAAM;kBACzC,WAAA,OAAA,gBAAA,EAACL,+BAAAA,EAAAA;YAAsBI,OAAOD,cAAcG,aAAa;;gBACtDJ,MAAMK,OAAO;gBACbL,MAAMM,OAAO,IAAA,WAAA,OACZ,eAAA,EAACN,MAAMO,aAAa,EAAA;8BAClB,WAAA,OAAA,eAAA,EAACX,+BAAAA,EAAAA;kCAGEI,MAAMM,OAAO;;;;;;AAO5B,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Dialog/useDialog.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\n\nimport { useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { DialogSurfaceMotion } from '../DialogSurfaceMotion';\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, inertTrapFocus = false, unmountOnClose = true } = props;\n\n  const dialogTitleId = useId('dialog-title-');\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 dialogRef = useFocusFirstElement(open, modalType);\n\n  const { modalAttributes, triggerAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n  const isNestedDialog = useHasParentContext(DialogContext);\n\n  return {\n    components: {\n      surfaceMotion: DialogSurfaceMotion,\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content,\n    trigger,\n    requestOpenChange,\n    dialogTitleId,\n    isNestedDialog,\n    unmountOnClose,\n    dialogRef,\n    modalAttributes,\n    triggerAttributes,\n    surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n      elementType: DialogSurfaceMotion,\n      defaultProps: {\n        visible: open,\n        appear: unmountOnClose,\n        unmountOnExit: unmountOnClose,\n      },\n    }),\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-dialog [useDialog]:\n        Dialog must contain at least one child <DialogSurface/>,\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"],"names":["React","useHasParentContext","useModalAttributes","presenceMotionSlot","useControllableState","useEventCallback","useId","useFocusFirstElement","DialogContext","DialogSurfaceMotion","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","unmountOnClose","dialogTitleId","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","dialogRef","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","isNestedDialog","components","surfaceMotion","elementType","defaultProps","visible","appear","unmountOnExit","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":"AAAA;;;;;+BAsBaU;;;;;;;iEApBU,QAAQ;sCAEK,mCAAmC;8BACpC,0BAA0B;6BAC1B,yBAAyB;gCACE,4BAA4B;uBAErD,cAAc;0BACrB,iBAAiB;qCACX,yBAAyB;AAWtD,2BAA2B,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAEC,iBAAiB,IAAI,EAAE,GAAGL;IAEvG,MAAMM,oBAAgBX,qBAAAA,EAAM;IAE5B,MAAM,CAACY,SAASC,QAAQ,GAAGC,4BAA4BR;IAEvD,MAAM,CAACS,MAAMC,QAAQ,OAAGlB,oCAAAA,EAAqB;QAC3CmB,OAAOZ,MAAMU,IAAI;QACjBG,cAAcb,MAAMc,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAoBtB,gCAAAA,EAAiB,CAACuB;QAC1Cd,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAec,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,gBAAYxB,2BAAAA,EAAqBc,MAAMR;IAE7C,MAAM,EAAEmB,eAAe,EAAEC,iBAAiB,EAAE,OAAG/B,gCAAAA,EAAmB;QAChEgC,WAAWrB,cAAc;QACzBsB,iBAAiB,CAACpB;IACpB;IACA,MAAMqB,qBAAiBnC,yCAAAA,EAAoBO,uBAAAA;IAE3C,OAAO;QACL6B,YAAY;YACVC,eAAe7B,wCAAAA;QACjB;QACAM;QACAM;QACAR;QACAM;QACAD;QACAS;QACAV;QACAmB;QACApB;QACAe;QACAC;QACAC;QACAK,mBAAenC,+BAAAA,EAAmBQ,MAAM2B,aAAa,EAAE;YACrDC,aAAa9B,wCAAAA;YACb+B,cAAc;gBACZC,SAASpB;gBACTqB,QAAQ1B;gBACR2B,eAAe3B;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASI,4BACPR,QAAyB;IAEzB,MAAMgC,gBAAgB5C,OAAM6C,QAAQ,CAACC,OAAO,CAAClC;IAC7C,IAAImC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACS;gBAAWT,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACS;gBAAWA;aAAU;IACjC;AACF"}
+{"version":3,"sources":["../src/components/Dialog/useDialog.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useModalAttributes } from '@fluentui/react-tabster';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport { useControllableState, useEventCallback, useId } from '@fluentui/react-utilities';\n\nimport { useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { DialogSurfaceMotion } from '../DialogSurfaceMotion';\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, inertTrapFocus = false, unmountOnClose = true } = props;\n\n  const dialogTitleId = useId('dialog-title-');\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 dialogRef = useFocusFirstElement(open, modalType);\n\n  const { modalAttributes, triggerAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n\n  const isNestedDialog = useHasParentContext(DialogContext);\n\n  return {\n    components: {\n      surfaceMotion: DialogSurfaceMotion,\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content,\n    trigger,\n    requestOpenChange,\n    dialogTitleId,\n    isNestedDialog,\n    unmountOnClose,\n    dialogRef,\n    modalAttributes,\n    triggerAttributes,\n    surfaceMotion: presenceMotionSlot(props.surfaceMotion, {\n      elementType: DialogSurfaceMotion,\n      defaultProps: {\n        visible: open,\n        appear: unmountOnClose,\n        unmountOnExit: unmountOnClose,\n      },\n    }),\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(/* #__DE-INDENT__ */ `\n        @fluentui/react-dialog [useDialog]:\n        Dialog must contain at least one child <DialogSurface/>,\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"],"names":["React","useHasParentContext","useModalAttributes","presenceMotionSlot","useControllableState","useEventCallback","useId","useFocusFirstElement","DialogContext","DialogSurfaceMotion","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","unmountOnClose","dialogTitleId","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","dialogRef","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","isNestedDialog","components","surfaceMotion","elementType","defaultProps","visible","appear","unmountOnExit","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn","undefined"],"mappings":"AAAA;;;;;+BAsBaU;;;;;;;iEApBU,QAAQ;sCAEK,mCAAmC;8BACpC,0BAA0B;6BAC1B,yBAAyB;gCACE,4BAA4B;uBAErD,cAAc;0BACrB,iBAAiB;qCACX,yBAAyB;AAWtD,2BAA2B,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAEC,iBAAiB,IAAI,EAAE,GAAGL;IAEvG,MAAMM,oBAAgBX,qBAAAA,EAAM;IAE5B,MAAM,CAACY,SAASC,QAAQ,GAAGC,4BAA4BR;IAEvD,MAAM,CAACS,MAAMC,QAAQ,OAAGlB,oCAAAA,EAAqB;QAC3CmB,OAAOZ,MAAMU,IAAI;QACjBG,cAAcb,MAAMc,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,wBAAoBtB,gCAAAA,EAAiB,CAACuB;QAC1Cd,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAec,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,gBAAYxB,2BAAAA,EAAqBc,MAAMR;IAE7C,MAAM,EAAEmB,eAAe,EAAEC,iBAAiB,EAAE,OAAG/B,gCAAAA,EAAmB;QAChEgC,WAAWrB,cAAc;QACzBsB,iBAAiB,CAACpB;IACpB;IAEA,MAAMqB,qBAAiBnC,yCAAAA,EAAoBO,uBAAAA;IAE3C,OAAO;QACL6B,YAAY;YACVC,eAAe7B,wCAAAA;QACjB;QACAM;QACAM;QACAR;QACAM;QACAD;QACAS;QACAV;QACAmB;QACApB;QACAe;QACAC;QACAC;QACAK,mBAAenC,+BAAAA,EAAmBQ,MAAM2B,aAAa,EAAE;YACrDC,aAAa9B,wCAAAA;YACb+B,cAAc;gBACZC,SAASpB;gBACTqB,QAAQ1B;gBACR2B,eAAe3B;YACjB;QACF;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAASI,4BACPR,QAAyB;IAEzB,MAAMgC,gBAAgB5C,OAAM6C,QAAQ,CAACC,OAAO,CAAClC;IAC7C,IAAImC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAIL,cAAcM,MAAM,KAAK,KAAKN,cAAcM,MAAM,KAAK,GAAG;YAC5D,sCAAsC;YACtCC,QAAQC,IAAI,CAAsB,CAAC;;2EAInC,CAAC;QACH;IACF;IACA,OAAQR,cAAcM,MAAM;QAC1B,mDAAmD;QACnD,KAAK;YACH,OAAON;QACT,kCAAkC;QAClC,KAAK;YACH,OAAO;gBAACS;gBAAWT,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACS;gBAAWA;aAAU;IACjC;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DialogContextValue, 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   */\n  backdrop?: Slot<'div'>;\n  root: Slot<'div'>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n  // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n  Pick<DialogContextValue, 'isNestedDialog'> &\n  Pick<PortalProps, 'mountNode'> & {\n    open?: boolean;\n    unmountOnClose?: boolean;\n\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     *\n     * @deprecated Will be always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n  };\n"],"names":[],"mappings":"AAqCA;;CAEC,GACD,WAcI"}
+{"version":3,"sources":["../src/components/DialogSurface/DialogSurface.types.ts"],"sourcesContent":["import type { PresenceMotionSlotProps } from '@fluentui/react-motion';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot, ExtractSlotProps } from '@fluentui/react-utilities';\n\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\n/**\n * Custom slot props for the backdrop slot.\n */\nexport type DialogBackdropSlotProps = ExtractSlotProps<\n  Slot<'div'> & {\n    /**\n     * Controls the backdrop appearance.\n     * - 'dimmed': Shows a dimmed backdrop (default for standalone dialogs)\n     * - 'transparent': Shows a transparent backdrop (default for nested dialogs)\n     */\n    appearance?: 'dimmed' | 'transparent';\n  }\n>;\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   * Accepts an `appearance` prop to control backdrop visibility:\n   * - `'dimmed'`: Always shows a dimmed backdrop, regardless of nesting.\n   * - `'transparent'`: Always shows a transparent backdrop.\n   *\n   * @example\n   * ```tsx\n   * <DialogSurface backdrop={{ appearance: 'dimmed' }} />\n   * ```\n   */\n  backdrop?: Slot<DialogBackdropSlotProps>;\n  root: Slot<'div'>;\n  /**\n   * For more information refer to the [Motion docs page](https://react.fluentui.dev/?path=/docs/motion-motion-slot--docs).\n   *\n   */\n  backdropMotion: Slot<PresenceMotionSlotProps>;\n};\n\n/**\n * Union between all possible semantic element that represent a DialogSurface\n */\nexport type DialogSurfaceElement = HTMLElement;\n\n/**\n * DialogSurface Props\n */\nexport type DialogSurfaceProps = ComponentProps<Partial<DialogSurfaceSlots>> & Pick<PortalProps, 'mountNode'>;\n\nexport type DialogSurfaceContextValues = {\n  dialogSurface: DialogSurfaceContextValue;\n};\n\n/**\n * State used in rendering DialogSurface\n */\nexport type DialogSurfaceState = ComponentState<DialogSurfaceSlots> &\n  // This is only partial to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n  Pick<DialogContextValue, 'isNestedDialog'> &\n  Pick<PortalProps, 'mountNode'> & {\n    open?: boolean;\n    unmountOnClose?: boolean;\n    /**\n     * Whether the backdrop should be treated as nested (transparent).\n     * When inside an OverlayDrawer, this is `false` even though `isNestedDialog` may be `true`,\n     * preventing the false-positive transparent backdrop.\n     */\n    treatBackdropAsNested: boolean;\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     *\n     * @deprecated Will be always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n    backdropAppearance?: DialogBackdropSlotProps['appearance'];\n  };\n"],"names":[],"mappings":"AA2DA;;CAEC,GACD,WAoBI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAUbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAG5BI,qEAAsC;;;eADbD,6DAA+B;;;eADxDF,2CAAyB;;;+BATJ,kBAAkB;qCAQH,wBAAwB;kCAC3B,qBAAqB;8CACU,kCAAkC;+CACpD,kCAAkC"}
+{"version":3,"sources":["../src/components/DialogSurface/index.ts"],"sourcesContent":["export { DialogSurface } from './DialogSurface';\nexport type {\n  DialogBackdropSlotProps,\n  DialogSurfaceContextValues,\n  DialogSurfaceElement,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n} from './DialogSurface.types';\nexport { renderDialogSurface_unstable } from './renderDialogSurface';\nexport { useDialogSurface_unstable } from './useDialogSurface';\nexport { dialogSurfaceClassNames, useDialogSurfaceStyles_unstable } from './useDialogSurfaceStyles.styles';\nexport { useDialogSurfaceContextValues_unstable } from './useDialogSurfaceContextValues';\n"],"names":["DialogSurface","renderDialogSurface_unstable","useDialogSurface_unstable","dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable"],"mappings":";;;;;;;;;;;;eAASA,4BAAa;;;eAWbG,qDAAuB;;;eAFvBF,iDAA4B;;;eAG5BI,qEAAsC;;;eADbD,6DAA+B;;;eADxDF,2CAAyB;;;+BAVJ,kBAAkB;qCASH,wBAAwB;kCAC3B,qBAAqB;8CACU,kCAAkC;+CACpD,kCAAkC"}

package/lib-commonjs/components/DialogSurface/useDialogSurface.js

@@ -17,11 +17,12 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _contexts = require("../../contexts");
 const _useDisableBodyScroll = require("../../utils/useDisableBodyScroll");
 const _DialogBackdropMotion = require("../DialogBackdropMotion");
-const _MotionRefForwarder = require("../MotionRefForwarder");
 const useDialogSurface_unstable = (props, ref)=>{
-    const contextRef = (0, _MotionRefForwarder.useMotionForwardedRef)();
+    const contextRef = (0, _reactmotion.useMotionForwardedRef)();
     const modalType = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalType);
     const isNestedDialog = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
+    const backdropOverride = (0, _contexts.useDialogBackdropContext_unstable)();
+    const treatBackdropAsNested = backdropOverride !== null && backdropOverride !== void 0 ? backdropOverride : isNestedDialog;
     const modalAttributes = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalAttributes);
     const dialogRef = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogRef);
     const requestOpenChange = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
@@ -62,8 +63,11 @@ const useDialogSurface_unstable = (props, ref)=>{
         },
         elementType: 'div'
     });
+    const backdropAppearance = backdrop === null || backdrop === void 0 ? void 0 : backdrop.appearance;
     if (backdrop) {
         backdrop.onClick = handledBackdropClick;
+        // remove backdrop.appearance so it is not passed to the DOM
+        delete backdrop.appearance;
     }
     const { disableBodyScroll, enableBodyScroll } = (0, _useDisableBodyScroll.useDisableBodyScroll)();
     (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
@@ -92,6 +96,8 @@ const useDialogSurface_unstable = (props, ref)=>{
         open,
         backdrop,
         isNestedDialog,
+        treatBackdropAsNested,
+        backdropAppearance,
         unmountOnClose,
         mountNode: props.mountNode,
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {

package/lib-commonjs/components/DialogSurface/useDialogSurface.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useDialogContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '../MotionRefForwarder';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const contextRef = useMotionForwardedRef();\n\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const unmountOnClose = useDialogContext_unstable(ctx => ctx.unmountOnClose);\n\n  const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.backdrop)) {\n      props.backdrop.onClick?.(event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick',\n      });\n    }\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n\n    if (event.key === Escape && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.preventDefault();\n    }\n  });\n\n  const backdrop = slot.optional(props.backdrop, {\n    renderByDefault: modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n    elementType: 'div',\n  });\n\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n  }\n\n  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) {\n      enableBodyScroll();\n      return;\n    }\n\n    if (isNestedDialog || modalType === 'non-modal') {\n      return;\n    }\n\n    disableBodyScroll();\n\n    return () => enableBodyScroll();\n  }, [open, modalType, isNestedDialog, disableBodyScroll, enableBodyScroll]);\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n      backdropMotion: DialogBackdropMotion,\n    },\n    open,\n    backdrop,\n    isNestedDialog,\n    unmountOnClose,\n    mountNode: props.mountNode,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-modal': modalType !== 'non-modal',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n        'aria-hidden': !unmountOnClose && !open ? true : undefined,\n        ...props,\n        ...modalAttributes,\n        onKeyDown: handleKeyDown,\n        // FIXME:\n        // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n    backdropMotion: presenceMotionSlot(props.backdropMotion, {\n      elementType: DialogBackdropMotion,\n      defaultProps: {\n        appear: unmountOnClose,\n        visible: open,\n      },\n    }),\n\n    // Deprecated properties\n    transitionStatus: undefined,\n  };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","React","useDialogContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","unmountOnClose","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"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"}
+{"version":3,"sources":["../src/components/DialogSurface/useDialogSurface.ts"],"sourcesContent":["'use client';\n\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { presenceMotionSlot } from '@fluentui/react-motion';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useDialogContext_unstable, useDialogBackdropContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport { useMotionForwardedRef } from '@fluentui/react-motion';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const contextRef = useMotionForwardedRef();\n\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n  const backdropOverride = useDialogBackdropContext_unstable();\n  const treatBackdropAsNested = backdropOverride ?? isNestedDialog;\n\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const unmountOnClose = useDialogContext_unstable(ctx => ctx.unmountOnClose);\n\n  const handledBackdropClick = useEventCallback((event: React.MouseEvent<HTMLDivElement>) => {\n    if (isResolvedShorthand(props.backdrop)) {\n      props.backdrop.onClick?.(event);\n    }\n    if (modalType === 'modal' && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'backdropClick',\n      });\n    }\n  });\n\n  const handleKeyDown = useEventCallback((event: React.KeyboardEvent<HTMLDivElement>) => {\n    props.onKeyDown?.(event);\n\n    if (event.key === Escape && !event.isDefaultPrevented()) {\n      requestOpenChange({\n        event,\n        open: false,\n        type: 'escapeKeyDown',\n      });\n      // stop propagation to avoid conflicting with other elements that listen for `Escape`\n      // e,g: nested Dialog, Popover, Menu and Tooltip\n      event.preventDefault();\n    }\n  });\n\n  const backdrop = slot.optional(props.backdrop, {\n    renderByDefault: modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n    elementType: 'div',\n  });\n\n  const backdropAppearance = backdrop?.appearance;\n\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n    // remove backdrop.appearance so it is not passed to the DOM\n    delete backdrop.appearance;\n  }\n\n  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n  useIsomorphicLayoutEffect(() => {\n    if (!open) {\n      enableBodyScroll();\n      return;\n    }\n\n    if (isNestedDialog || modalType === 'non-modal') {\n      return;\n    }\n\n    disableBodyScroll();\n\n    return () => enableBodyScroll();\n  }, [open, modalType, isNestedDialog, disableBodyScroll, enableBodyScroll]);\n\n  return {\n    components: {\n      backdrop: 'div',\n      root: 'div',\n      backdropMotion: DialogBackdropMotion,\n    },\n    open,\n    backdrop,\n    isNestedDialog,\n    treatBackdropAsNested,\n    backdropAppearance,\n    unmountOnClose,\n    mountNode: props.mountNode,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-modal': modalType !== 'non-modal',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\n        'aria-hidden': !unmountOnClose && !open ? true : undefined,\n        ...props,\n        ...modalAttributes,\n        onKeyDown: handleKeyDown,\n        // FIXME:\n        // `DialogSurfaceElement` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n        // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n        ref: useMergedRefs(ref, contextRef, dialogRef) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n    backdropMotion: presenceMotionSlot(props.backdropMotion, {\n      elementType: DialogBackdropMotion,\n      defaultProps: {\n        appear: unmountOnClose,\n        visible: open,\n      },\n    }),\n\n    // Deprecated properties\n    transitionStatus: undefined,\n  };\n};\n"],"names":["Escape","presenceMotionSlot","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","React","useDialogContext_unstable","useDialogBackdropContext_unstable","useDisableBodyScroll","DialogBackdropMotion","useMotionForwardedRef","useDialogSurface_unstable","props","ref","contextRef","modalType","ctx","isNestedDialog","backdropOverride","treatBackdropAsNested","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","unmountOnClose","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","backdropAppearance","appearance","disableBodyScroll","enableBodyScroll","components","root","backdropMotion","mountNode","always","tabIndex","role","undefined","appear","visible","transitionStatus"],"mappings":"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"}

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js

@@ -64,14 +64,15 @@ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
 });
 const useDialogSurfaceStyles_unstable = (state)=>{
     'use no memo';
-    const { isNestedDialog, root, backdrop, open, unmountOnClose } = state;
+    const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;
     const rootBaseStyle = useRootBaseStyle();
     const backdropBaseStyle = useBackdropBaseStyle();
     const styles = useStyles();
+    const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
     const mountedAndClosed = !unmountOnClose && !open;
     root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
     if (backdrop) {
-        backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, mountedAndClosed && styles.dialogHidden, backdrop.className);
+        backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
     }
     return state;
 };

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n    root: 'fui-DialogSurface',\n    backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    inset: 0,\n    padding: SURFACE_PADDING,\n    margin: 'auto',\n    borderStyle: 'none',\n    overflow: 'unset',\n    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: [\n        '100vh',\n        '100dvh'\n    ],\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    // Same styles as DialogSurfaceMotion last keyframe,\n    // to ensure dialog will be properly styled when surfaceMotion is opted-out\n    boxShadow: tokens.shadow64,\n    [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    },\n    [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n        overflowY: 'auto',\n        // We need to offset the scrollbar by adding transparent borders otherwise\n        // it conflicts with the border radius.\n        paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n        borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n    }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n    inset: '0px',\n    backgroundColor: tokens.colorBackgroundOverlay,\n    position: 'fixed'\n});\nconst useStyles = makeStyles({\n    nestedDialogBackdrop: {\n        backgroundColor: tokens.colorTransparentBackground\n    },\n    dialogHidden: {\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const { isNestedDialog, root, backdrop, open, unmountOnClose } = state;\n    const rootBaseStyle = useRootBaseStyle();\n    const backdropBaseStyle = useBackdropBaseStyle();\n    const styles = useStyles();\n    const mountedAndClosed = !unmountOnClose && !open;\n    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, mountedAndClosed && styles.dialogHidden, backdrop.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","isNestedDialog","open","unmountOnClose","rootBaseStyle","backdropBaseStyle","styles","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCU,uBAAuB;;;mCA2DY;;;;uBA/DU,gBAAgB;AAInE,gCAAgC;IACnCC,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,WAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,MAAA;IAAA;CAI5B,CAAC;AACF,MAAMiB,SAAS,GAAA,WAAA,OAAGhB,eAAA,EAAA;IAAAiB,oBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,MAAMC,kCAAmCC,KAAK,IAAG;IACxD,aAAa;IACb,MAAM,EAAEC,cAAc,EAAEd,IAAI,EAAEC,QAAQ,EAAEc,IAAI,EAAEC,cAAAA,EAAgB,GAAGH,KAAK;IACtE,MAAMI,aAAa,GAAGf,gBAAgB,CAAC,CAAC;IACxC,MAAMgB,iBAAiB,GAAGb,oBAAoB,CAAC,CAAC;IAChD,MAAMc,MAAM,GAAGb,SAAS,CAAC,CAAC;IAC1B,MAAMc,gBAAgB,GAAG,CAACJ,cAAc,IAAI,CAACD,IAAI;IACjDf,IAAI,CAACqB,SAAS,OAAG9B,mBAAY,EAACQ,uBAAuB,CAACC,IAAI,EAAEiB,aAAa,EAAEG,gBAAgB,IAAID,MAAM,CAACV,YAAY,EAAET,IAAI,CAACqB,SAAS,CAAC;IACnI,IAAIpB,QAAQ,EAAE;QACVA,QAAQ,CAACoB,SAAS,OAAG9B,mBAAY,EAACQ,uBAAuB,CAACE,QAAQ,EAAEiB,iBAAiB,EAAEJ,cAAc,IAAIK,MAAM,CAACZ,oBAAoB,EAAEa,gBAAgB,IAAID,MAAM,CAACV,YAAY,EAAER,QAAQ,CAACoB,SAAS,CAAC;IACtM;IACA,OAAOR,KAAK;AAChB,CAAC"}
+{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR, DIALOG_MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n    root: 'fui-DialogSurface',\n    backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    inset: 0,\n    padding: SURFACE_PADDING,\n    margin: 'auto',\n    borderStyle: 'none',\n    overflow: 'unset',\n    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: [\n        '100vh',\n        '100dvh'\n    ],\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    // Same styles as DialogSurfaceMotion last keyframe,\n    // to ensure dialog will be properly styled when surfaceMotion is opted-out\n    boxShadow: tokens.shadow64,\n    [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    },\n    [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n        overflowY: 'auto',\n        // We need to offset the scrollbar by adding transparent borders otherwise\n        // it conflicts with the border radius.\n        paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n        borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n    }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n    inset: '0px',\n    backgroundColor: tokens.colorBackgroundOverlay,\n    position: 'fixed'\n});\nconst useStyles = makeStyles({\n    nestedDialogBackdrop: {\n        backgroundColor: tokens.colorTransparentBackground\n    },\n    dialogHidden: {\n        pointerEvents: 'none'\n    }\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n    'use no memo';\n    const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n    const rootBaseStyle = useRootBaseStyle();\n    const backdropBaseStyle = useBackdropBaseStyle();\n    const styles = useStyles();\n    const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n    const mountedAndClosed = !unmountOnClose && !open;\n    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);\n    }\n    return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useStyles","nestedDialogBackdrop","De3pzq","dialogHidden","Bkecrkj","d","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAKCU,uBAAuB;;;mCA2DY;eAA/Ba;;;uBA/DyC,gBAAgB;AAInE,gCAAgC;IACnCZ,IAAI,EAAE,mBAAmB;IACzBC,QAAQ,EAAE;AACd,CAAC;AACD;;CAEA,GAAI,MAAMC,gBAAgB,GAAA,WAAA,OAAGb,oBAAA,EAAA,YAAA,WAAA;IAAAc,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAqC5B,CAAC;AACF,MAAMC,oBAAoB,GAAA,WAAA,OAAGhB,oBAAA,EAAA,YAAA,MAAA;IAAA;CAI5B,CAAC;AACF,MAAMiB,SAAS,GAAA,WAAA,OAAGhB,eAAA,EAAA;IAAAiB,oBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,yCAAyCE,KAAK,IAAG;IACxD,aAAa;IACb,MAAM,EAAEb,IAAI,EAAEC,QAAQ,EAAEa,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAAA,EAAoB,GAAGJ,KAAK;IACjG,MAAMK,aAAa,GAAGhB,gBAAgB,CAAC,CAAC;IACxC,MAAMiB,iBAAiB,GAAGd,oBAAoB,CAAC,CAAC;IAChD,MAAMe,MAAM,GAAGd,SAAS,CAAC,CAAC;IAC1B,MAAMe,qBAAqB,GAAGJ,kBAAkB,GAAGA,kBAAkB,KAAK,aAAa,GAAGD,qBAAqB;IAC/G,MAAMM,gBAAgB,GAAG,CAACP,cAAc,IAAI,CAACD,IAAI;IACjDd,IAAI,CAACuB,SAAS,OAAGhC,mBAAY,EAACQ,uBAAuB,CAACC,IAAI,EAAEkB,aAAa,EAAEI,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAET,IAAI,CAACuB,SAAS,CAAC;IACnI,IAAItB,QAAQ,EAAE;QACVA,QAAQ,CAACsB,SAAS,OAAGhC,mBAAY,EAACQ,uBAAuB,CAACE,QAAQ,EAAEkB,iBAAiB,EAAEG,gBAAgB,IAAIF,MAAM,CAACX,YAAY,EAAEY,qBAAqB,IAAID,MAAM,CAACb,oBAAoB,EAAEN,QAAQ,CAACsB,SAAS,CAAC;IAC7M;IACA,OAAOV,KAAK;AAChB,CAAC"}

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js

@@ -80,14 +80,15 @@ const useStyles = (0, _react.makeStyles)({
 });
 const useDialogSurfaceStyles_unstable = (state)=>{
     'use no memo';
-    const { isNestedDialog, root, backdrop, open, unmountOnClose } = state;
+    const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;
     const rootBaseStyle = useRootBaseStyle();
     const backdropBaseStyle = useBackdropBaseStyle();
     const styles = useStyles();
+    const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;
     const mountedAndClosed = !unmountOnClose && !open;
     root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, mountedAndClosed && styles.dialogHidden, root.className);
     if (backdrop) {
-        backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && styles.nestedDialogBackdrop, mountedAndClosed && styles.dialogHidden, backdrop.className);
+        backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, mountedAndClosed && styles.dialogHidden, isBackdropTransparent && styles.nestedDialogBackdrop, backdrop.className);
     }
     return state;
 };

package/lib-commonjs/components/DialogSurface/useDialogSurfaceStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  inset: 0,\n  padding: SURFACE_PADDING,\n  margin: 'auto',\n  borderStyle: 'none',\n  overflow: 'unset',\n  border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n  borderRadius: tokens.borderRadiusXLarge,\n\n  display: 'block',\n  userSelect: 'unset',\n  visibility: 'unset',\n  position: 'fixed',\n  height: 'fit-content',\n  maxWidth: '600px',\n  maxHeight: ['100vh', '100dvh'],\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  // Same styles as DialogSurfaceMotion last keyframe,\n  // to ensure dialog will be properly styled when surfaceMotion is opted-out\n  boxShadow: tokens.shadow64,\n\n  [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n  },\n\n  [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n    overflowY: 'auto',\n    // We need to offset the scrollbar by adding transparent borders otherwise\n    // it conflicts with the border radius.\n    paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n    borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n  inset: '0px',\n  backgroundColor: tokens.colorBackgroundOverlay,\n  position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n  nestedDialogBackdrop: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n\n  dialogHidden: {\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const { isNestedDialog, root, backdrop, open, unmountOnClose } = state;\n\n  const rootBaseStyle = useRootBaseStyle();\n  const backdropBaseStyle = useBackdropBaseStyle();\n  const styles = useStyles();\n\n  const mountedAndClosed = !unmountOnClose && !open;\n\n  root.className = mergeClasses(\n    dialogSurfaceClassNames.root,\n    rootBaseStyle,\n    mountedAndClosed && styles.dialogHidden,\n    root.className,\n  );\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      backdropBaseStyle,\n      isNestedDialog && styles.nestedDialogBackdrop,\n      mountedAndClosed && styles.dialogHidden,\n      backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","isNestedDialog","open","unmountOnClose","rootBaseStyle","backdropBaseStyle","styles","mountedAndClosed","className"],"mappings":"AAAA;;;;;;;;;;;;IAeaU,uBAAAA;;;mCAkEAuC;;;;uBA/E6C,iBAAiB;4BAEpD,wBAAwB;8BACP,0BAA0B;0BAO3D,iBAAiB;AAGjB,gCAA4F;IACjGtC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAmBb,sBAAAA,EAAgB;IACvC,OAAGI,qCAAAA,GAAyB;IAC5BU,OAAO;IACPC,SAASN,yBAAAA;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,8BAAAA,CAAqB,OAAO,EAAEL,kBAAAA,CAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,kBAAAA,CAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,kBAAAA,CAAO6B,uBAAuB;IAC/CC,OAAO9B,kBAAAA,CAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,kBAAAA,CAAOiC,QAAQ;IAE1B,CAAC9B,gDAAAA,CAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,yCAAAA,CAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,yBAAAA,CAAgB,GAAG,EAAEJ,mDAAAA,CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC,mDAAAA;QAClBmC,gBAAgBnC,mDAAAA;QAChBoC,mBAAmBpC,mDAAAA;IACrB;AACF;AAEA,MAAMqC,2BAAuB1C,sBAAAA,EAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,kBAAAA,CAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,gBAAY3C,iBAAAA,EAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,kBAAAA,CAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,MAAMC,kCAAkC,CAACC;IAC9C;IAEA,MAAM,EAAEC,cAAc,EAAExC,IAAI,EAAEC,QAAQ,EAAEwC,IAAI,EAAEC,cAAc,EAAE,GAAGH;IAEjE,MAAMI,gBAAgBzC;IACtB,MAAM0C,oBAAoBb;IAC1B,MAAMc,SAASZ;IAEf,MAAMa,mBAAmB,CAACJ,kBAAkB,CAACD;IAE7CzC,KAAK+C,SAAS,OAAGxD,mBAAAA,EACfQ,wBAAwBC,IAAI,EAC5B2C,eACAG,oBAAoBD,OAAOT,YAAY,EACvCpC,KAAK+C,SAAS;IAGhB,IAAI9C,UAAU;QACZA,SAAS8C,SAAS,OAAGxD,mBAAAA,EACnBQ,wBAAwBE,QAAQ,EAChC2C,mBACAJ,kBAAkBK,OAAOX,oBAAoB,EAC7CY,oBAAoBD,OAAOT,YAAY,EACvCnC,SAAS8C,SAAS;IAEtB;IAEA,OAAOR;AACT,EAAE"}
+{"version":3,"sources":["../src/components/DialogSurface/useDialogSurfaceStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport {\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from '../../contexts';\nimport type { DialogSurfaceSlots, DialogSurfaceState } from './DialogSurface.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dialogSurfaceClassNames: SlotClassNames<Omit<DialogSurfaceSlots, 'backdropMotion'>> = {\n  root: 'fui-DialogSurface',\n  backdrop: 'fui-DialogSurface__backdrop',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseStyle = makeResetStyles({\n  ...createFocusOutlineStyle(),\n  inset: 0,\n  padding: SURFACE_PADDING,\n  margin: 'auto',\n  borderStyle: 'none',\n  overflow: 'unset',\n  border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n  borderRadius: tokens.borderRadiusXLarge,\n\n  display: 'block',\n  userSelect: 'unset',\n  visibility: 'unset',\n  position: 'fixed',\n  height: 'fit-content',\n  maxWidth: '600px',\n  maxHeight: ['100vh', '100dvh'],\n  boxSizing: 'border-box',\n  backgroundColor: tokens.colorNeutralBackground1,\n  color: tokens.colorNeutralForeground1,\n  // Same styles as DialogSurfaceMotion last keyframe,\n  // to ensure dialog will be properly styled when surfaceMotion is opted-out\n  boxShadow: tokens.shadow64,\n\n  [DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n    maxWidth: '100vw',\n  },\n\n  [DIALOG_MEDIA_QUERY_SHORT_SCREEN]: {\n    overflowY: 'auto',\n    // We need to offset the scrollbar by adding transparent borders otherwise\n    // it conflicts with the border radius.\n    paddingRight: `calc(${SURFACE_PADDING} - ${DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n    borderRightWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderTopWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n    borderBottomWidth: DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  },\n});\n\nconst useBackdropBaseStyle = makeResetStyles({\n  inset: '0px',\n  backgroundColor: tokens.colorBackgroundOverlay,\n  position: 'fixed',\n});\n\nconst useStyles = makeStyles({\n  nestedDialogBackdrop: {\n    backgroundColor: tokens.colorTransparentBackground,\n  },\n\n  dialogHidden: {\n    pointerEvents: 'none',\n  },\n});\n\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = (state: DialogSurfaceState): DialogSurfaceState => {\n  'use no memo';\n\n  const { root, backdrop, open, unmountOnClose, treatBackdropAsNested, backdropAppearance } = state;\n\n  const rootBaseStyle = useRootBaseStyle();\n  const backdropBaseStyle = useBackdropBaseStyle();\n  const styles = useStyles();\n  const isBackdropTransparent = backdropAppearance ? backdropAppearance === 'transparent' : treatBackdropAsNested;\n\n  const mountedAndClosed = !unmountOnClose && !open;\n\n  root.className = mergeClasses(\n    dialogSurfaceClassNames.root,\n    rootBaseStyle,\n    mountedAndClosed && styles.dialogHidden,\n    root.className,\n  );\n\n  if (backdrop) {\n    backdrop.className = mergeClasses(\n      dialogSurfaceClassNames.backdrop,\n      backdropBaseStyle,\n      mountedAndClosed && styles.dialogHidden,\n      isBackdropTransparent && styles.nestedDialogBackdrop,\n      backdrop.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createFocusOutlineStyle","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","inset","padding","margin","borderStyle","overflow","border","colorTransparentStroke","borderRadius","borderRadiusXLarge","display","userSelect","visibility","position","height","maxWidth","maxHeight","boxSizing","backgroundColor","colorNeutralBackground1","color","colorNeutralForeground1","boxShadow","shadow64","overflowY","paddingRight","borderRightWidth","borderTopWidth","borderBottomWidth","useBackdropBaseStyle","colorBackgroundOverlay","useStyles","nestedDialogBackdrop","colorTransparentBackground","dialogHidden","pointerEvents","useDialogSurfaceStyles_unstable","state","open","unmountOnClose","treatBackdropAsNested","backdropAppearance","rootBaseStyle","backdropBaseStyle","styles","isBackdropTransparent","mountedAndClosed","className"],"mappings":"AAAA;;;;;;;;;;;;IAeaU,uBAAAA;;;IAkEAuC,+BAAAA;;;;uBA/E6C,iBAAiB;4BACpD,wBAAwB;8BACP,0BAA0B;0BAO3D,iBAAiB;AAIjB,gCAA4F;IACjGtC,MAAM;IACNC,UAAU;AACZ,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAmBb,sBAAAA,EAAgB;IACvC,OAAGI,qCAAAA,GAAyB;IAC5BU,OAAO;IACPC,SAASN,yBAAAA;IACTO,QAAQ;IACRC,aAAa;IACbC,UAAU;IACVC,QAAQ,GAAGX,8BAAAA,CAAqB,OAAO,EAAEL,kBAAAA,CAAOiB,sBAAsB,EAAE;IACxEC,cAAclB,kBAAAA,CAAOmB,kBAAkB;IAEvCC,SAAS;IACTC,YAAY;IACZC,YAAY;IACZC,UAAU;IACVC,QAAQ;IACRC,UAAU;IACVC,WAAW;QAAC;QAAS;KAAS;IAC9BC,WAAW;IACXC,iBAAiB5B,kBAAAA,CAAO6B,uBAAuB;IAC/CC,OAAO9B,kBAAAA,CAAO+B,uBAAuB;IACrC,oDAAoD;IACpD,2EAA2E;IAC3EC,WAAWhC,kBAAAA,CAAOiC,QAAQ;IAE1B,CAAC9B,gDAAAA,CAAuC,EAAE;QACxCsB,UAAU;IACZ;IAEA,CAACrB,yCAAAA,CAAgC,EAAE;QACjC8B,WAAW;QACX,0EAA0E;QAC1E,uCAAuC;QACvCC,cAAc,CAAC,KAAK,EAAE7B,yBAAAA,CAAgB,GAAG,EAAEJ,mDAAAA,CAA0C,CAAC,CAAC;QACvFkC,kBAAkBlC,mDAAAA;QAClBmC,gBAAgBnC,mDAAAA;QAChBoC,mBAAmBpC,mDAAAA;IACrB;AACF;AAEA,MAAMqC,2BAAuB1C,sBAAAA,EAAgB;IAC3Cc,OAAO;IACPiB,iBAAiB5B,kBAAAA,CAAOwC,sBAAsB;IAC9CjB,UAAU;AACZ;AAEA,MAAMkB,gBAAY3C,iBAAAA,EAAW;IAC3B4C,sBAAsB;QACpBd,iBAAiB5B,kBAAAA,CAAO2C,0BAA0B;IACpD;IAEAC,cAAc;QACZC,eAAe;IACjB;AACF;AAKO,wCAAwC,CAACE;IAC9C;IAEA,MAAM,EAAEvC,IAAI,EAAEC,QAAQ,EAAEuC,IAAI,EAAEC,cAAc,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAE,GAAGJ;IAE5F,MAAMK,gBAAgB1C;IACtB,MAAM2C,oBAAoBd;IAC1B,MAAMe,SAASb;IACf,MAAMc,wBAAwBJ,qBAAqBA,uBAAuB,gBAAgBD;IAE1F,MAAMM,mBAAmB,CAACP,kBAAkB,CAACD;IAE7CxC,KAAKiD,SAAS,OAAG1D,mBAAAA,EACfQ,wBAAwBC,IAAI,EAC5B4C,eACAI,oBAAoBF,OAAOV,YAAY,EACvCpC,KAAKiD,SAAS;IAGhB,IAAIhD,UAAU;QACZA,SAASgD,SAAS,OAAG1D,mBAAAA,EACnBQ,wBAAwBE,QAAQ,EAChC4C,mBACAG,oBAAoBF,OAAOV,YAAY,EACvCW,yBAAyBD,OAAOZ,oBAAoB,EACpDjC,SAASgD,SAAS;IAEtB;IAEA,OAAOV;AACT,EAAE"}

package/lib-commonjs/contexts/dialogBackdropContext.js

@@ -0,0 +1,29 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DialogBackdropContext: function() {
+        return DialogBackdropContext;
+    },
+    DialogBackdropProvider: function() {
+        return DialogBackdropProvider;
+    },
+    useDialogBackdropContext_unstable: function() {
+        return useDialogBackdropContext_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const DialogBackdropContext = /*#__PURE__*/ _react.createContext(undefined);
+const DialogBackdropProvider = DialogBackdropContext.Provider;
+const useDialogBackdropContext_unstable = ()=>{
+    return _react.useContext(DialogBackdropContext);
+};

package/lib-commonjs/contexts/dialogBackdropContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/contexts/dialogBackdropContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type DialogBackdropContextValue = boolean;\n\nexport const DialogBackdropContext = React.createContext<DialogBackdropContextValue | undefined>(undefined);\n\nexport const DialogBackdropProvider = DialogBackdropContext.Provider;\n\nexport const useDialogBackdropContext_unstable = (): DialogBackdropContextValue | undefined => {\n  return React.useContext(DialogBackdropContext);\n};\n"],"names":["React","DialogBackdropContext","createContext","undefined","DialogBackdropProvider","Provider","useDialogBackdropContext_unstable","useContext"],"mappings":"AAAA;;;;;;;;;;;;yBAMaC;;;0BAEAG;;;qCAEAE;;;;;iEARU,QAAQ;AAIxB,MAAML,sCAAwBD,OAAME,aAAa,CAAyCC,WAAW;AAErG,MAAMC,yBAAyBH,sBAAsBI,QAAQ,CAAC;AAE9D,MAAMC,oCAAoC;IAC/C,OAAON,OAAMO,UAAU,CAACN;AAC1B,EAAE"}

package/lib-commonjs/contexts/index.js

@@ -21,6 +21,12 @@ _export(exports, {
     DIALOG_MEDIA_QUERY_SHORT_SCREEN: function() {
         return _constants.DIALOG_MEDIA_QUERY_SHORT_SCREEN;
     },
+    DialogBackdropContext: function() {
+        return _dialogBackdropContext.DialogBackdropContext;
+    },
+    DialogBackdropProvider: function() {
+        return _dialogBackdropContext.DialogBackdropProvider;
+    },
     DialogContext: function() {
         return _dialogContext.DialogContext;
     },
@@ -39,6 +45,9 @@ _export(exports, {
     SURFACE_PADDING: function() {
         return _constants.SURFACE_PADDING;
     },
+    useDialogBackdropContext_unstable: function() {
+        return _dialogBackdropContext.useDialogBackdropContext_unstable;
+    },
     useDialogContext_unstable: function() {
         return _dialogContext.useDialogContext_unstable;
     },
@@ -49,3 +58,4 @@ _export(exports, {
 const _constants = require("./constants");
 const _dialogContext = require("./dialogContext");
 const _dialogSurfaceContext = require("./dialogSurfaceContext");
+const _dialogBackdropContext = require("./dialogBackdropContext");

package/lib-commonjs/contexts/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export {\n  DIALOG_GAP,\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from './constants';\nexport type { DialogContextValue } from './dialogContext';\nexport { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';\nexport type { DialogSurfaceContextValue } from './dialogSurfaceContext';\nexport { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';\n"],"names":["DIALOG_GAP","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","DialogContext","DialogProvider","useDialogContext_unstable","DialogSurfaceContext","DialogSurfaceProvider","useDialogSurfaceContext_unstable"],"mappings":";;;;;;;;;;;IAEEC,yCAAyC;;;;eADzCD,qBAAU;;;eAEVE,iDAAsC;;;eACtCC,0CAA+B;;;eAKxBG,4BAAa;;;eAAEC,6BAAc;;IAE7BE,oBAAoB;;;;eAAEC,2CAAqB;;;eANlDN,+BAAoB;;;eACpBC,0BAAe;;IAGuBG;uDAAyB;;;eAEXG,sDAAgC;;;2BAJ/E,cAAc;+BAEoD,kBAAkB;sCAEG,yBAAyB"}
+{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export {\n  DIALOG_GAP,\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  SURFACE_BORDER_WIDTH,\n  SURFACE_PADDING,\n} from './constants';\nexport type { DialogContextValue } from './dialogContext';\nexport { DialogContext, DialogProvider, useDialogContext_unstable } from './dialogContext';\nexport type { DialogSurfaceContextValue } from './dialogSurfaceContext';\nexport type { DialogBackdropContextValue } from './dialogBackdropContext';\nexport { DialogSurfaceContext, DialogSurfaceProvider, useDialogSurfaceContext_unstable } from './dialogSurfaceContext';\nexport {\n  DialogBackdropContext,\n  DialogBackdropProvider,\n  useDialogBackdropContext_unstable,\n} from './dialogBackdropContext';\n"],"names":["DIALOG_GAP","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","DialogContext","DialogProvider","useDialogContext_unstable","DialogSurfaceContext","DialogSurfaceProvider","useDialogSurfaceContext_unstable","DialogBackdropContext","DialogBackdropProvider","useDialogBackdropContext_unstable"],"mappings":";;;;;;;;;;;IAEEC,yCAAyC;;;;eADzCD,qBAAU;;;eAEVE,iDAAsC;;;eACtCC,0CAA+B;;;eAU/BS,4CAAqB;;;eACrBC,6CAAsB;;;eANfP,4BAAa;;;eAAEC,6BAAc;;;eAG7BE,0CAAoB;;;eAAEC,2CAAqB;;;eAPlDN,+BAAoB;;mBACL;eAAfC;;;eAUAS,wDAAiC;;;eAPKN,wCAAyB;;;eAGXG,sDAAgC;;;2BAL/E,cAAc;+BAEoD,kBAAkB;sCAGG,yBAAyB;uCAKhH,0BAA0B"}

package/lib-commonjs/index.js

@@ -24,6 +24,9 @@ _export(exports, {
     DialogActions: function() {
         return _DialogActions.DialogActions;
     },
+    DialogBackdropProvider: function() {
+        return _index.DialogBackdropProvider;
+    },
     DialogBody: function() {
         return _DialogBody.DialogBody;
     },
@@ -87,6 +90,9 @@ _export(exports, {
     useDialogActions_unstable: function() {
         return _DialogActions.useDialogActions_unstable;
     },
+    useDialogBackdropContext_unstable: function() {
+        return _index.useDialogBackdropContext_unstable;
+    },
     useDialogBodyStyles_unstable: function() {
         return _DialogBody.useDialogBodyStyles_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n  DialogContextValues,\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogModalType,\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  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n  DialogSurfaceElement,\n  DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n  DialogContent,\n  dialogContentClassNames,\n  useDialogContent_unstable,\n  useDialogContentStyles_unstable,\n  renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n  useDialogContext_unstable,\n  useDialogSurfaceContext_unstable,\n  DialogProvider,\n  DialogSurfaceProvider,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';\n\nexport {\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n} from './contexts/constants';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":";;;;;;;;;;;6CAyF2C;eAAzCuC;;IAFAF,sCAAsC;;;IACtCC;yDAA+B;;;eAxFxBtC,cAAM;;;eAqBbO,4BAAa;;;eAcbK,sBAAU;;IAkCVgB;2CAAa;;IAWbO,cAAc;;;IA3Bdb;2CAAa;;yBA4BQ;eAArBc;;;eArCAnB,wBAAW;;;eAhCJb,4BAAa;;IAUpBI,uBAAuB;;;;eAcvBK,gCAAoB;;;eAkCpBgB,sCAAuB;;;eAhBvBN,sCAAuB;;IATvBL,qBAAqB;;;;eApBrBP,2CAA4B;;IAc5BK,yBAAyB;;;;eAkCzBgB,2CAA4B;;;eAf5BL,2CAA4B;;8BAVF;eAA1BN;;gCApC6E;eAA5Bf;;;eAZlCL,6BAAqB;;IAwBpCS;6DAA+B;;6BADN;eAAzBD;;;eAeAM,wCAA4B;;;eAD5BD,kCAAsB;;;eAmCtBiB,8CAA+B;;;eAD/BD,wCAAyB;;;eAvEiC3B,uCAA+B;;IA8EzF8B,yBAAyB;;;;eArBzBP,qDAAsC;;;eAsBtCQ,uCAAgC;;;eAvBhCT,8CAA+B;;;eAD/BD,wCAAyB;;IARzBJ,6BAA6B;;;IAD7BD;mDAAuB;;;eAlCDd,wCAAyB;;;eAZTH,0BAAkB;;;wBAAyC,WAAW;+BAYvB,kBAAkB;+BAclG,kBAAkB;4BAclB,eAAe;6BASf,gBAAgB;+BAUhB,kBAAkB;+BAelB,kBAAkB;uBAQlB,mBAAmB;2BAQnB,uBAAuB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n  DialogContextValues,\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogModalType,\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  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n  DialogBackdropSlotProps,\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n  DialogSurfaceElement,\n  DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n  DialogContent,\n  dialogContentClassNames,\n  useDialogContent_unstable,\n  useDialogContentStyles_unstable,\n  renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n  useDialogContext_unstable,\n  useDialogSurfaceContext_unstable,\n  DialogProvider,\n  DialogSurfaceProvider,\n  DialogBackdropProvider,\n  useDialogBackdropContext_unstable,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue, DialogBackdropContextValue } from './contexts/index';\n\nexport {\n  DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR,\n  DIALOG_MEDIA_QUERY_SHORT_SCREEN,\n  DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n} from './contexts/constants';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider","DialogBackdropProvider","useDialogBackdropContext_unstable","DIALOG_MEDIA_QUERY_BREAKPOINT_SELECTOR","DIALOG_MEDIA_QUERY_SHORT_SCREEN","DIALOG_FULLSCREEN_DIALOG_SCROLLBAR_OFFSET"],"mappings":";;;;;;;;;;;IA4FEyC,yCAAyC;;;;eAFzCF,iDAAsC;;IACtCC,+BAA+B;;;;eA3FxBxC,cAAM;;;eAqBbO,4BAAa;;IA8Db8B,sBAAsB;;;;eAhDtBzB,sBAAU;;;eAmCVgB,4BAAa;;IAWbO,cAAc;;;;eA5Bdb,4BAAa;;;eA6Bbc,4BAAqB;;IAtCrBnB,WAAW;;;;eAhCJb,4BAAa;;IAUpBI,uBAAuB;;;;eAcvBK,gCAAoB;;;eAmCpBgB,sCAAuB;;2BAjBA;eAAvBN;;;eATAL,kCAAqB;;;eApBrBP,2CAA4B;;IAc5BK,yBAAyB;;;;eAmCzBgB,2CAA4B;;;eAhB5BL,2CAA4B;;;eAV5BN,uCAA0B;;gCApCmD;eAA5Bf;;;eAZlCL,6BAAqB;;IAwBpCS;6DAA+B;;6BADN;eAAzBD;;IA6DA6B;uDAAiC;;;eA9CjCvB,wCAA4B;;;eAD5BD,kCAAsB;;IAoCtBiB;6DAA+B;;;eAD/BD,wCAAyB;;;eAxEiC3B,uCAA+B;;IA+EzF8B;+CAAyB;;;eAtBzBP,qDAAsC;;IAuBtCQ,gCAAgC;;;;eAxBhCT,8CAA+B;;;eAD/BD,wCAAyB;;;eARzBJ,0CAA6B;;;eAD7BD,oCAAuB;;;eAlCDd,wCAAyB;;;eAZTH,0BAAkB;;;wBAAyC,WAAW;+BAYvB,kBAAkB;+BAclG,kBAAkB;4BAclB,eAAe;6BASf,gBAAgB;+BAUhB,kBAAkB;+BAgBlB,kBAAkB;uBAUlB,mBAAmB;2BAQnB,uBAAuB"}

package/lib-commonjs/utils/useDisableBodyScroll.styles.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/utils/useDisableBodyScroll.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n    overflowY: [\n        'hidden',\n        'clip'\n    ],\n    scrollbarGutter: 'stable'\n});\nexport const useBodyNoScrollStyles = makeResetStyles({\n    overflowY: 'hidden'\n});\n"],"names":["__resetStyles","useHTMLNoScrollStyles","useBodyNoScrollStyles"],"mappings":";;;;;;;;;;;yBASkC;;;yBAPA;;;;uBAFF,gBAAgB;AAEzC,MAAMC,wBAAqB,WAAA,OAAGD,oBAAA,EAAA,WAAA,MAAA;IAAA;CAMpC,CAAC;AACK,MAAME,wBAAqB,WAAA,OAAGF,oBAAA,EAAA,YAAA,MAAA;IAAA;CAEpC,CAAC"}
+{"version":3,"sources":["useDisableBodyScroll.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles } from '@griffel/react';\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n    overflowY: [\n        'hidden',\n        'clip'\n    ],\n    scrollbarGutter: 'stable'\n});\nexport const useBodyNoScrollStyles = makeResetStyles({\n    overflowY: 'hidden'\n});\n"],"names":["__resetStyles","useHTMLNoScrollStyles","useBodyNoScrollStyles"],"mappings":"AAAA,YAAY;;;;;;;;;;;;yBAUsB;;;yBAPA;;;;uBAFF,gBAAgB;AAEzC,MAAMC,wBAAqB,WAAA,OAAGD,oBAAA,EAAA,WAAA,MAAA;IAAA;CAMpC,CAAC;AACK,MAAME,wBAAqB,WAAA,OAAGF,oBAAA,EAAA,YAAA,MAAA;IAAA;CAEpC,CAAC"}

package/lib-commonjs/utils/useDisableBodyScroll.styles.raw.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

package/lib-commonjs/utils/useDisableBodyScroll.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/utils/useDisableBodyScroll.styles.ts"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\n\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n  overflowY: ['hidden', 'clip'],\n  scrollbarGutter: 'stable',\n});\n\nexport const useBodyNoScrollStyles = makeResetStyles({\n  overflowY: 'hidden',\n});\n"],"names":["makeResetStyles","useHTMLNoScrollStyles","overflowY","scrollbarGutter","useBodyNoScrollStyles"],"mappings":";;;;;;;;;;;yBAQaI;;;yBALAH;;;;uBAHmB,iBAAiB;AAG1C,MAAMA,4BAAwBD,sBAAAA,EAAgB;IACnDE,WAAW;QAAC;QAAU;KAAO;IAC7BC,iBAAiB;AACnB,GAAG;AAEI,MAAMC,4BAAwBJ,sBAAAA,EAAgB;IACnDE,WAAW;AACb,GAAG"}
+{"version":3,"sources":["../src/utils/useDisableBodyScroll.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles } from '@griffel/react';\n\n// this style must be applied to the html element to disable scrolling\nexport const useHTMLNoScrollStyles = makeResetStyles({\n  overflowY: ['hidden', 'clip'],\n  scrollbarGutter: 'stable',\n});\n\nexport const useBodyNoScrollStyles = makeResetStyles({\n  overflowY: 'hidden',\n});\n"],"names":["makeResetStyles","useHTMLNoScrollStyles","overflowY","scrollbarGutter","useBodyNoScrollStyles"],"mappings":"AAAA;;;;;;;;;;;;yBAUaI;;;yBALAH;;;;uBAHmB,iBAAiB;AAG1C,MAAMA,4BAAwBD,sBAAAA,EAAgB;IACnDE,WAAW;QAAC;QAAU;KAAO;IAC7BC,iBAAiB;AACnB,GAAG;AAEI,MAAMC,4BAAwBJ,sBAAAA,EAAgB;IACnDE,WAAW;AACb,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.16.6",
+  "version": "9.17.1",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,18 +12,18 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-utilities": "^9.26.1",
-    "@fluentui/react-jsx-runtime": "^9.3.5",
+    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-jsx-runtime": "^9.4.1",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-context-selector": "^9.2.14",
-    "@fluentui/react-motion": "^9.11.6",
-    "@fluentui/react-motion-components-preview": "^0.15.0",
-    "@fluentui/react-shared-contexts": "^9.26.1",
-    "@fluentui/react-aria": "^9.17.8",
+    "@fluentui/react-context-selector": "^9.2.15",
+    "@fluentui/react-motion": "^9.12.0",
+    "@fluentui/react-motion-components-preview": "^0.15.1",
+    "@fluentui/react-shared-contexts": "^9.26.2",
+    "@fluentui/react-aria": "^9.17.10",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-tabster": "^9.26.12",
+    "@fluentui/react-tabster": "^9.26.13",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-portal": "^9.8.10",
+    "@fluentui/react-portal": "^9.8.11",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },

package/lib/components/MotionRefForwarder.js

@@ -1,17 +0,0 @@
-'use client';
-import * as React from 'react';
-const MotionRefForwarderContext = /*#__PURE__*/ React.createContext(undefined);
-/**
- * @internal
- */ export function useMotionForwardedRef() {
-    return React.useContext(MotionRefForwarderContext);
-}
-/**
- * A component that forwards a ref to its children via a React context.
- *
- * @internal
- */ export const MotionRefForwarder = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
-        value: ref
-    }, props.children);
-});

package/lib/components/MotionRefForwarder.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n  return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {\n  return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0CAA4BD,MAAME,aAAa,CAAqCC;AAE1F;;CAEC,GACD,OAAO,SAASC;IACd,OAAOJ,MAAMK,UAAU,CAACJ;AAC1B;AAEA;;;;CAIC,GACD,OAAO,MAAMK,mCAAqBN,MAAMO,UAAU,CAAgD,CAACC,OAAOC;IACxG,qBAAO,oBAACR,0BAA0BS,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG"}

package/lib-commonjs/components/MotionRefForwarder.js

@@ -1,30 +0,0 @@
-'use client';
-"use strict";
-Object.defineProperty(exports, "__esModule", {
-    value: true
-});
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    MotionRefForwarder: function() {
-        return MotionRefForwarder;
-    },
-    useMotionForwardedRef: function() {
-        return useMotionForwardedRef;
-    }
-});
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
-const MotionRefForwarderContext = /*#__PURE__*/ _react.createContext(undefined);
-function useMotionForwardedRef() {
-    return _react.useContext(MotionRefForwarderContext);
-}
-const MotionRefForwarder = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
-    return /*#__PURE__*/ _react.createElement(MotionRefForwarderContext.Provider, {
-        value: ref
-    }, props.children);
-});

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n  return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children: React.ReactElement }>((props, ref) => {\n  return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children"],"mappings":"AAAA;;;;;;;;;;;;sBAkBaM;;;yBATGF;;;;;iEAPO,QAAQ;AAE/B,MAAMH,4BAAAA,WAAAA,GAA4BD,OAAME,aAAa,CAAqCC;AAKnF,SAASC;IACd,OAAOJ,OAAMK,UAAU,CAACJ;AAC1B;AAOO,MAAMK,qBAAAA,WAAAA,GAAqBN,OAAMO,UAAU,CAAgD,CAACC,OAAOC;IACxG,OAAA,WAAA,GAAO,OAAA,aAAA,CAACR,0BAA0BS,QAAQ,EAAA;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG"}