npm - @fluentui/react-dialog - Versions diffs - 9.16.5 → 9.17.0 - Mend

@fluentui/react-dialog 9.16.5 → 9.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (39) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-dialog
-This log was last generated on Wed, 17 Dec 2025 18:06:04 GMT and should not be manually modified.
+This log was last generated on Thu, 12 Feb 2026 10:42:47 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.17.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.17.0)
+Thu, 12 Feb 2026 10:42:47 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:06:52 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.16.5..@fluentui/react-dialog_v9.16.6)
+### Patches
+- fix(react-dialog): update Scale param from "fromScale" to "outScale" ([PR #35592](https://github.com/microsoft/fluentui/pull/35592) by robertpenner@microsoft.com)
+- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-motion to v9.11.6 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-motion-components-preview to v0.15.0 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-aria to v9.17.8 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
+- Bump @fluentui/react-portal to v9.8.10 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
 ## [9.16.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.16.5)
-Wed, 17 Dec 2025 18:06:04 GMT
+Wed, 17 Dec 2025 18:10:11 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.16.4..@fluentui/react-dialog_v9.16.5)
 ### Patches

package/dist/index.d.ts CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/useDialog.js.map CHANGED Viewed

	@@ -1 +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"}
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\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 CHANGED Viewed

	@@ -1 +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~~"}
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, 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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -3,7 +3,7 @@ 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';
@@ -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 CHANGED Viewed

	@@ -1 +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":"AAAA;AAEA,SAASA,MAAM,QAAQ,0BAA0B;AACjD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,EACxBC,yBAAyB,QACpB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,iBAAiB;~~AAC3D~~,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,qBAAqB,QAAQ,wBAAwB;AAG9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaJ;IAEnB,MAAMK,~~YAAYR~~,~~0BAA0BS~~,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,~~iBAAiBV~~,~~0BAA0BS~~,CAAAA,MAAOA,IAAIC,cAAc;~~IAE1E~~,MAAMC,~~kBAAkBX~~,~~0BAA0BS~~,CAAAA,MAAOA,~~IAAIE~~,eAAe;IAC5E,MAAMC,~~YAAYZ~~,~~0BAA0BS~~,CAAAA,MAAOA,~~IAAIG~~,SAAS;IAChE,MAAMC,~~oBAAoBb~~,~~0BAA0BS~~,CAAAA,MAAOA,~~IAAII~~,iBAAiB;IAChF,MAAMC,~~gBAAgBd~~,~~0BAA0BS~~,CAAAA,MAAOA,~~IAAIM~~,aAAa;IACxE,MAAMC,~~OAAOhB~~,~~0BAA0BS~~,CAAAA,MAAOA,~~IAAIO~~,IAAI;IACtD,MAAMC,~~iBAAiBjB~~,~~0BAA0BS~~,CAAAA,MAAOA,~~IAAIQ~~,cAAc;IAE1E,MAAMC,~~uBAAuBzB~~,iBAAiB,~~CAAC0B~~;QAC7C,~~IAAIxB~~,~~oBAAoBU~~,~~MAAMe~~,QAAQ,GAAG;~~gBACvCf~~,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,~~MAAMe~~,QAAQ,EAACC,OAAO,~~cAAtBhB~~,8CAAAA,6BAAAA,~~iBAAyBc~~;QAC3B;QACA,~~IAAIX~~,cAAc,WAAW,~~CAACW~~,MAAMG,kBAAkB,IAAI;YACxDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;QACF;IACF;IAEA,MAAMC,~~gBAAgB/B~~,iBAAiB,~~CAAC0B~~;~~YACtCd~~;SAAAA,mBAAAA,~~MAAMoB~~,SAAS,~~cAAfpB~~,uCAAAA,sBAAAA,~~OAAkBc~~;QAElB,IAAIA,MAAMO,GAAG,~~KAAKnC~~,UAAU,~~CAAC4B~~,MAAMG,kBAAkB,IAAI;YACvDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,~~WAAWxB~~,~~KAAKgC~~,QAAQ,~~CAACvB~~,~~MAAMe~~,QAAQ,EAAE;QAC7CS,~~iBAAiBrB~~,cAAc;QAC/~~BsB~~,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IAEA,~~IAAIX~~,UAAU;QACZA,SAASC,OAAO,GAAGH;~~IACrB~~;IAEA,MAAM,~~EAAEc~~,iBAAiB,EAAEC,gBAAgB,EAAE,~~GAAGhC~~;~~IAEhDH~~,0BAA0B;QACxB,IAAI,~~CAACkB~~,MAAM;~~YACTiB~~;YACA;QACF;QAEA,~~IAAIvB~~,kBAAkBF,cAAc,aAAa;YAC/C;QACF;~~QAEAwB~~;QAEA,OAAO,IAAMC;IACf,GAAG;~~QAACjB~~;~~QAAMR~~;QAAWE;~~QAAgBsB~~;QAAmBC;KAAiB;IAEzE,OAAO;QACLC,YAAY;~~YACVd~~,UAAU;~~YACVe~~,MAAM;YACNC,~~gBAAgBlC~~;QAClB;~~QACAc~~;QACAI;~~QACAV~~;~~QACAO~~;~~QACAoB~~,~~WAAWhC~~,~~MAAMgC~~,SAAS;QAC1BF,~~MAAMvC~~,~~KAAK0C~~,MAAM,~~CACfzC~~,yBAAyB,OAAO;~~YAC9B0C~~,UAAU,CAAC;YACXC,~~MAAMhC~~,cAAc,UAAU,gBAAgB;YAC9C,cAAcA,cAAc;YAC5B,mBAAmBH,KAAK,CAAC,aAAa,~~GAAGoC~~,~~YAAY3B~~;YACrD,eAAe,CAACG,kBAAkB,CAACD,OAAO,~~OAAOyB~~;YACjD,~~GAAGpC~~,KAAK;YACR,~~GAAGM~~,eAAe;YAClBc,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;~~YAC5FlB~~,~~KAAKZ~~,~~cAAcY~~,KAAKC,~~YAAYK~~;QACtC,IACA;YAAEmB,aAAa;QAAM;~~QAEvBK~~,~~gBAAgB5C~~,~~mBAAmBa~~,~~MAAM+B~~,cAAc,EAAE;~~YACvDL~~,~~aAAa7B~~;~~YACb4B~~,cAAc;~~gBACZY~~,~~QAAQzB~~;~~gBACR0B~~,~~SAAS3B~~;YACX;QACF;QAEA,wBAAwB;~~QACxB4B~~,kBAAkBH;IACpB;AACF,EAAE"}
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, useDialogBackdropContext_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 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":"AAAA;AAEA,SAASA,MAAM,QAAQ,0BAA0B;AACjD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,EACxBC,yBAAyB,QACpB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,iBAAiB;AAC9F,SAASC,oBAAoB,QAAQ,mCAAmC;AACxE,SAASC,oBAAoB,QAAQ,0BAA0B;AAC/D,SAASC,qBAAqB,QAAQ,wBAAwB;AAG9D;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,aAAaJ;IAEnB,MAAMK,YAAYT,0BAA0BU,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBX,0BAA0BU,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,mBAAmBX;IACzB,MAAMY,wBAAwBD,6BAAAA,8BAAAA,mBAAoBD;IAElD,MAAMG,kBAAkBd,0BAA0BU,CAAAA,MAAOA,IAAII,eAAe;IAC5E,MAAMC,YAAYf,0BAA0BU,CAAAA,MAAOA,IAAIK,SAAS;IAChE,MAAMC,oBAAoBhB,0BAA0BU,CAAAA,MAAOA,IAAIM,iBAAiB;IAChF,MAAMC,gBAAgBjB,0BAA0BU,CAAAA,MAAOA,IAAIQ,aAAa;IACxE,MAAMC,OAAOnB,0BAA0BU,CAAAA,MAAOA,IAAIS,IAAI;IACtD,MAAMC,iBAAiBpB,0BAA0BU,CAAAA,MAAOA,IAAIU,cAAc;IAE1E,MAAMC,uBAAuB5B,iBAAiB,CAAC6B;QAC7C,IAAI3B,oBAAoBW,MAAMiB,QAAQ,GAAG;gBACvCjB,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMiB,QAAQ,EAACC,OAAO,cAAtBlB,8CAAAA,6BAAAA,iBAAyBgB;QAC3B;QACA,IAAIb,cAAc,WAAW,CAACa,MAAMG,kBAAkB,IAAI;YACxDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgBlC,iBAAiB,CAAC6B;YACtChB;SAAAA,mBAAAA,MAAMsB,SAAS,cAAftB,uCAAAA,sBAAAA,OAAkBgB;QAElB,IAAIA,MAAMO,GAAG,KAAKtC,UAAU,CAAC+B,MAAMG,kBAAkB,IAAI;YACvDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAW3B,KAAKmC,QAAQ,CAACzB,MAAMiB,QAAQ,EAAE;QAC7CS,iBAAiBvB,cAAc;QAC/BwB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IAEA,MAAMC,qBAAqBZ,qBAAAA,+BAAAA,SAAUa,UAAU;IAE/C,IAAIb,UAAU;QACZA,SAASC,OAAO,GAAGH;QACnB,4DAA4D;QAC5D,OAAOE,SAASa,UAAU;IAC5B;IAEA,MAAM,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGpC;IAEhDJ,0BAA0B;QACxB,IAAI,CAACqB,MAAM;YACTmB;YACA;QACF;QAEA,IAAI3B,kBAAkBF,cAAc,aAAa;YAC/C;QACF;QAEA4B;QAEA,OAAO,IAAMC;IACf,GAAG;QAACnB;QAAMV;QAAWE;QAAgB0B;QAAmBC;KAAiB;IAEzE,OAAO;QACLC,YAAY;YACVhB,UAAU;YACViB,MAAM;YACNC,gBAAgBtC;QAClB;QACAgB;QACAI;QACAZ;QACAE;QACAsB;QACAf;QACAsB,WAAWpC,MAAMoC,SAAS;QAC1BF,MAAM5C,KAAK+C,MAAM,CACf9C,yBAAyB,OAAO;YAC9B+C,UAAU,CAAC;YACXC,MAAMpC,cAAc,UAAU,gBAAgB;YAC9C,cAAcA,cAAc;YAC5B,mBAAmBH,KAAK,CAAC,aAAa,GAAGwC,YAAY7B;YACrD,eAAe,CAACG,kBAAkB,CAACD,OAAO,OAAO2B;YACjD,GAAGxC,KAAK;YACR,GAAGQ,eAAe;YAClBc,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FpB,KAAKb,cAAca,KAAKC,YAAYO;QACtC,IACA;YAAEmB,aAAa;QAAM;QAEvBO,gBAAgBjD,mBAAmBc,MAAMmC,cAAc,EAAE;YACvDP,aAAa/B;YACb8B,cAAc;gBACZc,QAAQ3B;gBACR4B,SAAS7B;YACX;QACF;QAEA,wBAAwB;QACxB8B,kBAAkBH;IACpB;AACF,EAAE"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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":[]}
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","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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/components/DialogSurfaceMotion.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';
 import { Scale } from '@fluentui/react-motion-components-preview';
 export const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {
-    fromScale: 0.85,
+    outScale: 0.85,
     easing: motionTokens.curveDecelerateMid,
     duration: motionTokens.durationGentle,
     exitEasing: motionTokens.curveAccelerateMin,

package/lib/components/DialogSurfaceMotion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';\nimport { Scale } from '@fluentui/react-motion-components-preview';\n\nexport const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {\n ~~fromScale~~: 0.85,\n easing: motionTokens.curveDecelerateMid,\n duration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMin,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["createPresenceComponentVariant","motionTokens","Scale","DialogSurfaceMotion","~~fromScale~~","easing","curveDecelerateMid","duration","durationGentle","exitEasing","curveAccelerateMin","exitDuration"],"mappings":"AAAA,SAASA,8BAA8B,EAAEC,YAAY,QAAQ,yBAAyB;AACtF,SAASC,KAAK,QAAQ,4CAA4C;AAElE,OAAO,MAAMC,sBAAsBH,+BAA+BE,OAAO;IACvEE,~~WAAW~~;~~IACXC~~,QAAQJ,aAAaK,kBAAkB;IACvCC,UAAUN,aAAaO,cAAc;IACrCC,YAAYR,aAAaS,kBAAkB;IAC3CC,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}
1	+ {"version":3,"sources":["../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';\nimport { Scale } from '@fluentui/react-motion-components-preview';\n\nexport const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {\n outScale: 0.85,\n easing: motionTokens.curveDecelerateMid,\n duration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMin,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["createPresenceComponentVariant","motionTokens","Scale","DialogSurfaceMotion","outScale","easing","curveDecelerateMid","duration","durationGentle","exitEasing","curveAccelerateMin","exitDuration"],"mappings":"AAAA,SAASA,8BAA8B,EAAEC,YAAY,QAAQ,yBAAyB;AACtF,SAASC,KAAK,QAAQ,4CAA4C;AAElE,OAAO,MAAMC,sBAAsBH,+BAA+BE,OAAO;IACvEE,UAAU;IACVC,QAAQJ,aAAaK,kBAAkB;IACvCC,UAAUN,aAAaO,cAAc;IACrCC,YAAYR,aAAaS,kBAAkB;IAC3CC,cAAcV,aAAaO,cAAc;AAC3C,GAAG"}

package/lib/contexts/dialogBackdropContext.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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-commonjs/DialogSurface.js.map CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/useDialog.js.map CHANGED Viewed

	@@ -1 +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"}
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\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 CHANGED Viewed

	@@ -1 +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~~"}
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, 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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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 CHANGED Viewed

@@ -22,6 +22,8 @@ const useDialogSurface_unstable = (props, ref)=>{
     const contextRef = (0, _MotionRefForwarder.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 +64,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 +97,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 CHANGED Viewed

	@@ -1 +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":"AAAA;;;;;+~~BA6Baa~~;;;;;;;8BA3BU,0BAA0B;6BACd,yBAAyB;gCAQrD,4BAA4B;iEACZ,QAAQ;~~0BAEW~~,iBAAiB;~~sCACtB~~,mCAAmC;sCACnC,0BAA0B;oCACzB,wBAAwB;AAYvD,kCAAkC,CACvCC,OACAC;IAEA,MAAMC,iBAAaJ,yCAAAA;IAEnB,MAAMK,~~gBAAYR~~,~~mCAAAA~~,~~EAA0BS~~,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,~~qBAAiBV~~,mCAAAA,~~EAA0BS~~,CAAAA,MAAOA,IAAIC,cAAc;~~IAE1E~~,MAAMC,~~sBAAkBX~~,mCAAAA,~~EAA0BS~~,CAAAA,MAAOA,~~IAAIE~~,eAAe;IAC5E,MAAMC,~~gBAAYZ~~,mCAAAA,~~EAA0BS~~,CAAAA,MAAOA,~~IAAIG~~,SAAS;IAChE,MAAMC,~~wBAAoBb~~,~~mCAAAA~~,~~EAA0BS~~,CAAAA,MAAOA,~~IAAII~~,iBAAiB;IAChF,MAAMC,~~oBAAgBd~~,mCAAAA,~~EAA0BS~~,CAAAA,MAAOA,~~IAAIM~~,aAAa;IACxE,MAAMC,~~WAAOhB~~,mCAAAA,~~EAA0BS~~,CAAAA,MAAOA,~~IAAIO~~,IAAI;IACtD,MAAMC,~~qBAAiBjB~~,mCAAAA,~~EAA0BS~~,CAAAA,MAAOA,~~IAAIQ~~,cAAc;IAE1E,MAAMC,~~2BAAuBzB~~,gCAAAA,EAAiB,~~CAAC0B~~;QAC7C,~~QAAIxB~~,mCAAAA,~~EAAoBU~~,~~MAAMe~~,QAAQ,GAAG;~~gBACvCf~~,yBAAAA;aAAAA,0BAAAA,~~mBAAAA~~,~~MAAMe~~,QAAAA,AAAQ,EAACC,OAAAA,AAAO,MAAA,~~QAAtBhB~~,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAAA,IAAAA,CAAAA,~~iBAAyBc~~;QAC3B;QACA,~~IAAIX~~,cAAc,WAAW,~~CAACW~~,MAAMG,kBAAkB,IAAI;YACxDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;QACF;IACF;IAEA,MAAMC,~~oBAAgB/B~~,gCAAAA,EAAiB,~~CAAC0B~~;~~YACtCd~~;~~QAAAA~~,~~oBAAAA~~,~~MAAMoB~~,SAAAA,AAAS,MAAA,~~QAAfpB~~,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,~~OAAkBc~~;QAElB,IAAIA,MAAMO,GAAG,~~KAAKnC~~,oBAAAA,IAAU,~~CAAC4B~~,MAAMG,kBAAkB,IAAI;YACvDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,~~WAAWxB~~,oBAAAA,~~CAAKgC~~,QAAQ,~~CAACvB~~,~~MAAMe~~,QAAQ,EAAE;QAC7CS,~~iBAAiBrB~~,cAAc;QAC/~~BsB~~,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IAEA,~~IAAIX~~,UAAU;QACZA,SAASC,OAAO,GAAGH;~~IACrB~~;IAEA,MAAM,~~EAAEc~~,iBAAiB,EAAEC,gBAAgB,EAAE,~~OAAGhC~~,0CAAAA;~~QAEhDH~~,yCAAAA,EAA0B;QACxB,IAAI,~~CAACkB~~,MAAM;~~YACTiB~~;YACA;QACF;QAEA,~~IAAIvB~~,kBAAkBF,cAAc,aAAa;YAC/C;QACF;~~QAEAwB~~;QAEA,OAAO,IAAMC;IACf,GAAG;~~QAACjB~~;~~QAAMR~~;QAAWE;~~QAAgBsB~~;QAAmBC;KAAiB;IAEzE,OAAO;QACLC,YAAY;~~YACVd~~,UAAU;~~YACVe~~,MAAM;YACNC,~~gBAAgBlC~~,0CAAAA;QAClB;~~QACAc~~;QACAI;~~QACAV~~;~~QACAO~~;~~QACAoB~~,~~WAAWhC~~,~~MAAMgC~~,SAAS;QAC1BF,~~MAAMvC~~,oBAAAA,~~CAAK0C~~,MAAM,~~KACfzC~~,wCAAAA,EAAyB,OAAO;~~YAC9B0C~~,UAAU,CAAC;YACXC,~~MAAMhC~~,cAAc,UAAU,gBAAgB;YAC9C,cAAcA,cAAc;YAC5B,mBAAmBH,KAAK,CAAC,aAAa,~~GAAGoC~~,~~YAAY3B~~;YACrD,eAAe,CAACG,kBAAkB,CAACD,OAAO,~~OAAOyB~~;YACjD,~~GAAGpC~~,KAAK;YACR,~~GAAGM~~,eAAe;YAClBc,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;~~YAC5FlB~~,~~SAAKZ~~,6BAAAA,~~EAAcY~~,KAAKC,~~YAAYK~~;QACtC,IACA;YAAEmB,aAAa;QAAM;~~QAEvBK~~,~~oBAAgB5C~~,+BAAAA,~~EAAmBa~~,~~MAAM+B~~,cAAc,EAAE;~~YACvDL~~,~~aAAa7B~~,0CAAAA;~~YACb4B~~,cAAc;~~gBACZY~~,~~QAAQzB~~;~~gBACR0B~~,~~SAAS3B~~;YACX;QACF;QAEA,wBAAwB;~~QACxB4B~~,kBAAkBH;IACpB;AACF,EAAE"}
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, useDialogBackdropContext_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 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":"AAAA;;;;;+BA6Bac;;;;;;;8BA3BU,0BAA0B;6BACd,yBAAyB;gCAQrD,4BAA4B;iEACZ,QAAQ;0BAE8C,iBAAiB;sCACzD,mCAAmC;sCACnC,0BAA0B;oCACzB,wBAAwB;AAYvD,kCAAkC,CACvCC,OACAC;IAEA,MAAMC,iBAAaJ,yCAAAA;IAEnB,MAAMK,YAAYT,uCAAAA,EAA0BU,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,qBAAiBX,mCAAAA,EAA0BU,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,uBAAmBX,2CAAAA;IACzB,MAAMY,wBAAwBD,qBAAAA,QAAAA,qBAAAA,KAAAA,IAAAA,mBAAoBD;IAElD,MAAMG,sBAAkBd,mCAAAA,EAA0BU,CAAAA,MAAOA,IAAII,eAAe;IAC5E,MAAMC,gBAAYf,mCAAAA,EAA0BU,CAAAA,MAAOA,IAAIK,SAAS;IAChE,MAAMC,oBAAoBhB,uCAAAA,EAA0BU,CAAAA,MAAOA,IAAIM,iBAAiB;IAChF,MAAMC,oBAAgBjB,mCAAAA,EAA0BU,CAAAA,MAAOA,IAAIQ,aAAa;IACxE,MAAMC,WAAOnB,mCAAAA,EAA0BU,CAAAA,MAAOA,IAAIS,IAAI;IACtD,MAAMC,qBAAiBpB,mCAAAA,EAA0BU,CAAAA,MAAOA,IAAIU,cAAc;IAE1E,MAAMC,2BAAuB5B,gCAAAA,EAAiB,CAAC6B;QAC7C,QAAI3B,mCAAAA,EAAoBW,MAAMiB,QAAQ,GAAG;gBACvCjB,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMiB,QAAAA,AAAQ,EAACC,OAAAA,AAAO,MAAA,QAAtBlB,4BAAAA,KAAAA,IAAAA,KAAAA,IAAAA,wBAAAA,IAAAA,CAAAA,iBAAyBgB;QAC3B;QACA,IAAIb,cAAc,WAAW,CAACa,MAAMG,kBAAkB,IAAI;YACxDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;QACF;IACF;IAEA,MAAMC,oBAAgBlC,gCAAAA,EAAiB,CAAC6B;YACtChB;SAAAA,mBAAAA,MAAMsB,SAAAA,AAAS,MAAA,QAAftB,qBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,iBAAAA,IAAAA,CAAAA,OAAkBgB;QAElB,IAAIA,MAAMO,GAAG,KAAKtC,oBAAAA,IAAU,CAAC+B,MAAMG,kBAAkB,IAAI;YACvDT,kBAAkB;gBAChBM;gBACAH,MAAM;gBACNO,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAW3B,oBAAAA,CAAKmC,QAAQ,CAACzB,MAAMiB,QAAQ,EAAE;QAC7CS,iBAAiBvB,cAAc;QAC/BwB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IAEA,MAAMC,qBAAqBZ,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,KAAAA,IAAAA,SAAUa,UAAU;IAE/C,IAAIb,UAAU;QACZA,SAASC,OAAO,GAAGH;QACnB,4DAA4D;QAC5D,OAAOE,SAASa,UAAU;IAC5B;IAEA,MAAM,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,OAAGpC,0CAAAA;QAEhDJ,yCAAAA,EAA0B;QACxB,IAAI,CAACqB,MAAM;YACTmB;YACA;QACF;QAEA,IAAI3B,kBAAkBF,cAAc,aAAa;YAC/C;QACF;QAEA4B;QAEA,OAAO,IAAMC;IACf,GAAG;QAACnB;QAAMV;QAAWE;QAAgB0B;QAAmBC;KAAiB;IAEzE,OAAO;QACLC,YAAY;YACVhB,UAAU;YACViB,MAAM;YACNC,gBAAgBtC,0CAAAA;QAClB;QACAgB;QACAI;QACAZ;QACAE;QACAsB;QACAf;QACAsB,WAAWpC,MAAMoC,SAAS;QAC1BF,MAAM5C,oBAAAA,CAAK+C,MAAM,KACf9C,wCAAAA,EAAyB,OAAO;YAC9B+C,UAAU,CAAC;YACXC,MAAMpC,cAAc,UAAU,gBAAgB;YAC9C,cAAcA,cAAc;YAC5B,mBAAmBH,KAAK,CAAC,aAAa,GAAGwC,YAAY7B;YACrD,eAAe,CAACG,kBAAkB,CAACD,OAAO,OAAO2B;YACjD,GAAGxC,KAAK;YACR,GAAGQ,eAAe;YAClBc,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FpB,SAAKb,6BAAAA,EAAca,KAAKC,YAAYO;QACtC,IACA;YAAEmB,aAAa;QAAM;QAEvBO,oBAAgBjD,+BAAAA,EAAmBc,MAAMmC,cAAc,EAAE;YACvDP,aAAa/B,0CAAAA;YACb8B,cAAc;gBACZc,QAAQ3B;gBACR4B,SAAS7B;YACX;QACF;QAEA,wBAAwB;QACxB8B,kBAAkBH;IACpB;AACF,EAAE"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 { 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
1	+ {"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/components/DialogSurfaceMotion.js CHANGED Viewed

@@ -11,7 +11,7 @@ Object.defineProperty(exports, "DialogSurfaceMotion", {
 const _reactmotion = require("@fluentui/react-motion");
 const _reactmotioncomponentspreview = require("@fluentui/react-motion-components-preview");
 const DialogSurfaceMotion = (0, _reactmotion.createPresenceComponentVariant)(_reactmotioncomponentspreview.Scale, {
-    fromScale: 0.85,
+    outScale: 0.85,
     easing: _reactmotion.motionTokens.curveDecelerateMid,
     duration: _reactmotion.motionTokens.durationGentle,
     exitEasing: _reactmotion.motionTokens.curveAccelerateMin,

package/lib-commonjs/components/DialogSurfaceMotion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';\nimport { Scale } from '@fluentui/react-motion-components-preview';\n\nexport const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {\n ~~fromScale~~: 0.85,\n easing: motionTokens.curveDecelerateMid,\n duration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMin,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["createPresenceComponentVariant","motionTokens","Scale","DialogSurfaceMotion","~~fromScale~~","easing","curveDecelerateMid","duration","durationGentle","exitEasing","curveAccelerateMin","exitDuration"],"mappings":";;;;+BAGaG;;;;;;6BAHgD,yBAAyB;8CAChE,4CAA4C;AAE3D,gCAA4BH,2CAAAA,EAA+BE,mCAAAA,EAAO;IACvEE,~~WAAW~~;~~IACXC~~,QAAQJ,yBAAAA,CAAaK,kBAAkB;IACvCC,UAAUN,yBAAAA,CAAaO,cAAc;IACrCC,YAAYR,yBAAAA,CAAaS,kBAAkB;IAC3CC,cAAcV,yBAAAA,CAAaO,cAAc;AAC3C,GAAG"}
1	+ {"version":3,"sources":["../src/components/DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponentVariant, motionTokens } from '@fluentui/react-motion';\nimport { Scale } from '@fluentui/react-motion-components-preview';\n\nexport const DialogSurfaceMotion = createPresenceComponentVariant(Scale, {\n outScale: 0.85,\n easing: motionTokens.curveDecelerateMid,\n duration: motionTokens.durationGentle,\n exitEasing: motionTokens.curveAccelerateMin,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["createPresenceComponentVariant","motionTokens","Scale","DialogSurfaceMotion","outScale","easing","curveDecelerateMid","duration","durationGentle","exitEasing","curveAccelerateMin","exitDuration"],"mappings":";;;;+BAGaG;;;;;;6BAHgD,yBAAyB;8CAChE,4CAA4C;AAE3D,gCAA4BH,2CAAAA,EAA+BE,mCAAAA,EAAO;IACvEE,UAAU;IACVC,QAAQJ,yBAAAA,CAAaK,kBAAkB;IACvCC,UAAUN,yBAAAA,CAAaO,cAAc;IACrCC,YAAYR,yBAAAA,CAAaS,kBAAkB;IAC3CC,cAAcV,yBAAAA,CAAaO,cAAc;AAC3C,GAAG"}

package/lib-commonjs/contexts/dialogBackdropContext.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.16.5",
+  "version": "9.17.0",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -11,31 +11,19 @@
     "url": "https://github.com/microsoft/fluentui"
   },
   "license": "MIT",
-  "devDependencies": {
-    "@fluentui/react-provider": "*",
-    "@fluentui/react-popover": "*",
-    "@fluentui/react-tooltip": "*",
-    "@fluentui/react-button": "*",
-    "@fluentui/react-menu": "*",
-    "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "*",
-    "@fluentui/scripts-api-extractor": "*",
-    "@fluentui/scripts-cypress": "*"
-  },
   "dependencies": {
-    "@fluentui/react-utilities": "^9.26.0",
-    "@fluentui/react-jsx-runtime": "^9.3.4",
+    "@fluentui/react-utilities": "^9.26.1",
+    "@fluentui/react-jsx-runtime": "^9.4.0",
     "@fluentui/keyboard-keys": "^9.0.8",
-    "@fluentui/react-context-selector": "^9.2.13",
-    "@fluentui/react-motion": "^9.11.5",
-    "@fluentui/react-motion-components-preview": "^0.14.2",
-    "@fluentui/react-shared-contexts": "^9.26.0",
-    "@fluentui/react-aria": "^9.17.7",
+    "@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.9",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-tabster": "^9.26.11",
-    "@fluentui/react-theme": "^9.2.0",
-    "@fluentui/react-portal": "^9.8.9",
+    "@fluentui/react-tabster": "^9.26.12",
+    "@fluentui/react-theme": "^9.2.1",
+    "@fluentui/react-portal": "^9.8.10",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },