@fluentui/react-dialog 9.7.9 → 9.8.0

package/CHANGELOG.json

@@ -2,7 +2,87 @@
   "name": "@fluentui/react-dialog",
   "entries": [
     {
-      "date": "Thu, 12 Oct 2023 14:52:34 GMT",
+      "date": "Mon, 23 Oct 2023 09:48:55 GMT",
+      "tag": "@fluentui/react-dialog_v9.8.0",
+      "version": "9.8.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "4ac68a632b61c2cb1886f32a6293c3218bf07c0e",
+            "comment": "feat: adds motion to DialogSurface"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.14.1",
+            "commit": "e4ef1febe8a185dddc10f8936944d177d50bc396"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.3.25",
+            "commit": "e4ef1febe8a185dddc10f8936944d177d50bc396"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 18 Oct 2023 17:54:03 GMT",
+      "tag": "@fluentui/react-dialog_v9.7.10",
+      "version": "9.7.10",
+      "comments": {
+        "none": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-dialog",
+            "commit": "aa6771ed95c5af78f413b3c20068867f032cf4c4",
+            "comment": "chore: Add e2e tests for virtual parents"
+          }
+        ],
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-utilities to v9.15.1",
+            "commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.18",
+            "commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-context-selector to v9.1.41",
+            "commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-aria to v9.3.43",
+            "commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-tabster to v9.14.0",
+            "commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-dialog",
+            "comment": "Bump @fluentui/react-portal to v9.3.24",
+            "commit": "c0d3065982e1646c54ba00c1d524248b792dbcad"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 12 Oct 2023 14:55:44 GMT",
       "tag": "@fluentui/react-dialog_v9.7.9",
       "version": "9.7.9",
       "comments": {
@@ -11,7 +91,7 @@
             "author": "beachball",
             "package": "@fluentui/react-dialog",
             "comment": "Bump @fluentui/react-jsx-runtime to v9.0.17",
-            "commit": "1a52f5b27e2f71f7257c470bc9c7552ea5e07867"
+            "commit": "8178c3cae60005bc21137aa1f3e766e18cdb4a30"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,17 +1,42 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Thu, 12 Oct 2023 14:52:34 GMT and should not be manually modified.
+This log was last generated on Mon, 23 Oct 2023 09:48:55 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.8.0)
+
+Mon, 23 Oct 2023 09:48:55 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.10..@fluentui/react-dialog_v9.8.0)
+
+### Minor changes
+
+- feat: adds motion to DialogSurface ([PR #29391](https://github.com/microsoft/fluentui/pull/29391) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-tabster to v9.14.1 ([commit](https://github.com/microsoft/fluentui/commit/e4ef1febe8a185dddc10f8936944d177d50bc396) by beachball)
+- Bump @fluentui/react-portal to v9.3.25 ([commit](https://github.com/microsoft/fluentui/commit/e4ef1febe8a185dddc10f8936944d177d50bc396) by beachball)
+
+## [9.7.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.10)
+
+Wed, 18 Oct 2023 17:54:03 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.9..@fluentui/react-dialog_v9.7.10)
+
+### Patches
+
+- Bump @fluentui/react-utilities to v9.15.1 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.18 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
+- Bump @fluentui/react-context-selector to v9.1.41 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
+- Bump @fluentui/react-aria to v9.3.43 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
+- Bump @fluentui/react-tabster to v9.14.0 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
+- Bump @fluentui/react-portal to v9.3.24 ([PR #29560](https://github.com/microsoft/fluentui/pull/29560) by beachball)
+
 ## [9.7.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.9)
 
-Thu, 12 Oct 2023 14:52:34 GMT 
+Thu, 12 Oct 2023 14:55:44 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.7.8..@fluentui/react-dialog_v9.7.9)
 
 ### Patches
 
-- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #29488](https://github.com/microsoft/fluentui/pull/29488) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.17 ([PR #29513](https://github.com/microsoft/fluentui/pull/29513) by beachball)
 
 ## [9.7.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.7.8)
 

package/dist/index.d.ts

@@ -255,7 +255,9 @@ export declare type DialogSurfaceSlots = {
 /**
  * State used in rendering DialogSurface
  */
-export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Partial<Pick<DialogContextValue, 'isNestedDialog'>> & Pick<PortalProps, 'mountNode'>;
+export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<DialogContextValue, 'isNestedDialog'> & Pick<PortalProps, 'mountNode'> & {
+    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
+};
 
 /**
  * The `DialogTitle` component expects to have a title/header

package/lib/components/Dialog/renderDialog.js

@@ -1,5 +1,7 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { Transition } from 'react-transition-group';
 import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
+import { DialogTransitionProvider } from '../../contexts/dialogTransitionContext';
 /**
  * Render the final JSX of Dialog
  */ export const renderDialog_unstable = (state, contextValues)=>{
@@ -10,7 +12,18 @@ import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
             value: contextValues.dialogSurface,
             children: [
                 trigger,
-                content
+                /*#__PURE__*/ _jsx(Transition, {
+                    mountOnEnter: true,
+                    unmountOnExit: true,
+                    in: state.open,
+                    nodeRef: state.dialogRef,
+                    // FIXME: this should not be hardcoded tokens.durationGentle
+                    timeout: 250,
+                    children: (status)=>/*#__PURE__*/ _jsx(DialogTransitionProvider, {
+                            value: status,
+                            children: content
+                        })
+                })
             ]
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["DialogProvider","DialogSurfaceProvider","renderDialog_unstable","state","contextValues","content","trigger","value","dialog","dialogSurface"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,cAAc,EAAEC,qBAAqB,QAAQ,iBAAiB;AAGvE;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxD,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAE7B,qBACE,KAACH;QAAeO,OAAOH,cAAcI,MAAM;kBACzC,cAAA,MAACP;YAAsBM,OAAOH,cAAcK,aAAa;;gBACtDH;gBACAD;;;;AAIT,EAAE"}
+{"version":3,"sources":["renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Transition } from 'react-transition-group';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport type { DialogState, DialogContextValues } from './Dialog.types';\nimport { DialogTransitionProvider } from '../../contexts/dialogTransitionContext';\n\n/**\n * Render the final JSX of Dialog\n */\nexport const renderDialog_unstable = (state: DialogState, contextValues: DialogContextValues) => {\n  const { content, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        <Transition\n          mountOnEnter\n          unmountOnExit\n          in={state.open}\n          nodeRef={state.dialogRef}\n          // FIXME: this should not be hardcoded tokens.durationGentle\n          timeout={250}\n        >\n          {status => <DialogTransitionProvider value={status}>{content}</DialogTransitionProvider>}\n        </Transition>\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["Transition","DialogProvider","DialogSurfaceProvider","DialogTransitionProvider","renderDialog_unstable","state","contextValues","content","trigger","value","dialog","dialogSurface","mountOnEnter","unmountOnExit","in","open","nodeRef","dialogRef","timeout","status"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,UAAU,QAAQ,yBAAyB;AACpD,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,iBAAiB;AAEvE,SAASC,wBAAwB,QAAQ,yCAAyC;AAElF;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxD,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAE7B,qBACE,KAACJ;QAAeQ,OAAOH,cAAcI,MAAM;kBACzC,cAAA,MAACR;YAAsBO,OAAOH,cAAcK,aAAa;;gBACtDH;8BACD,KAACR;oBACCY,YAAY;oBACZC,aAAa;oBACbC,IAAIT,MAAMU,IAAI;oBACdC,SAASX,MAAMY,SAAS;oBACxB,4DAA4D;oBAC5DC,SAAS;8BAERC,CAAAA,uBAAU,KAAChB;4BAAyBM,OAAOU;sCAASZ;;;;;;AAK/D,EAAE"}

package/lib/components/Dialog/useDialog.js

@@ -49,7 +49,7 @@ import { useModalAttributes } from '@fluentui/react-tabster';
         inertTrapFocus,
         open,
         modalType,
-        content: open ? content : null,
+        content,
         trigger,
         requestOpenChange,
         dialogTitleId: useId('dialog-title-'),

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

@@ -1 +1 @@
-{"version":3,"sources":["useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 } = props;\n\n  const [trigger, content] = childrenToTriggerAndContent(children);\n\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n    onOpenChange?.(data.event, data);\n\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n\n  const { modalAttributes, triggerAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n\n  return {\n    components: {\n      backdrop: 'div',\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content: open ? content : null,\n    trigger,\n    requestOpenChange,\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef,\n    modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n    triggerAttributes,\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","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useHasParentContext","useDisableBodyScroll","useFocusFirstElement","DialogContext","useModalAttributes","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","disableBodyScroll","isBodyScrollLocked","Boolean","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","isNestedDialog","dialogRef","undefined","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AACrH,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,cAAc;AACzE,SAASC,aAAa,QAAQ,iBAAiB;AAG/C,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAEhF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IAEvD,MAAM,CAACO,MAAMC,QAAQ,GAAGnB,qBAAqB;QAC3CoB,OAAOV,MAAMQ,IAAI;QACjBG,cAAcX,MAAMY,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,oBAAoBvB,iBAAiB,CAACwB;QAC1CZ,yBAAAA,mCAAAA,aAAeY,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,WAAWtB,qBAAqBY,MAAMN;IAC5C,MAAMiB,oBAAoBxB;IAC1B,MAAMyB,qBAAqBC,QAAQb,QAAQN,cAAc;IAEzDT,0BAA0B;QACxB,IAAI2B,oBAAoB;YACtB,OAAOD;QACT;IACF,GAAG;QAACA;QAAmBC;KAAmB;IAE1C,MAAM,EAAEE,eAAe,EAAEC,iBAAiB,EAAE,GAAGzB,mBAAmB;QAChE0B,WAAWtB,cAAc;QACzBuB,iBAAiB,CAACrB;IACpB;IAEA,OAAO;QACLsB,YAAY;YACVC,UAAU;QACZ;QACAvB;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU;QAC1BD;QACAS;QACAc,eAAepC,MAAM;QACrBqC,gBAAgBnC,oBAAoBG;QACpCiC,WAAWZ;QACXI,iBAAiBpB,cAAc,cAAcoB,kBAAkBS;QAC/DR;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAAShB,4BACPN,QAAyB;IAEzB,MAAM+B,gBAAgB3C,MAAM4C,QAAQ,CAACC,OAAO,CAACjC;IAC7C,IAAIkC,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;gBAACD;gBAAWC,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACD;gBAAWA;aAAU;IACjC;AACF"}
+{"version":3,"sources":["useDialog.ts"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\n\nimport type { DialogOpenChangeData, DialogProps, DialogState } from './Dialog.types';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 } = props;\n\n  const [trigger, content] = childrenToTriggerAndContent(children);\n\n  const [open, setOpen] = useControllableState({\n    state: props.open,\n    defaultState: props.defaultOpen,\n    initialState: false,\n  });\n\n  const requestOpenChange = useEventCallback((data: DialogOpenChangeData) => {\n    onOpenChange?.(data.event, data);\n\n    // if user prevents default then do not change state value\n    // otherwise updates state value and trigger reference to the element that caused the opening\n    if (!data.event.isDefaultPrevented()) {\n      setOpen(data.open);\n    }\n  });\n\n  const focusRef = useFocusFirstElement(open, modalType);\n  const disableBodyScroll = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n\n  useIsomorphicLayoutEffect(() => {\n    if (isBodyScrollLocked) {\n      return disableBodyScroll();\n    }\n  }, [disableBodyScroll, isBodyScrollLocked]);\n\n  const { modalAttributes, triggerAttributes } = useModalAttributes({\n    trapFocus: modalType !== 'non-modal',\n    legacyTrapFocus: !inertTrapFocus,\n  });\n\n  return {\n    components: {\n      backdrop: 'div',\n    },\n    inertTrapFocus,\n    open,\n    modalType,\n    content,\n    trigger,\n    requestOpenChange,\n    dialogTitleId: useId('dialog-title-'),\n    isNestedDialog: useHasParentContext(DialogContext),\n    dialogRef: focusRef,\n    modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n    triggerAttributes,\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","useControllableState","useEventCallback","useId","useIsomorphicLayoutEffect","useHasParentContext","useDisableBodyScroll","useFocusFirstElement","DialogContext","useModalAttributes","useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","state","defaultState","defaultOpen","initialState","requestOpenChange","data","event","isDefaultPrevented","focusRef","disableBodyScroll","isBodyScrollLocked","Boolean","modalAttributes","triggerAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","isNestedDialog","dialogRef","undefined","childrenArray","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,oBAAoB,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AACrH,SAASC,mBAAmB,QAAQ,mCAAmC;AACvE,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,cAAc;AACzE,SAASC,aAAa,QAAQ,iBAAiB;AAG/C,SAASC,kBAAkB,QAAQ,0BAA0B;AAE7D;;;;;;;CAOC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAEhF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IAEvD,MAAM,CAACO,MAAMC,QAAQ,GAAGnB,qBAAqB;QAC3CoB,OAAOV,MAAMQ,IAAI;QACjBG,cAAcX,MAAMY,WAAW;QAC/BC,cAAc;IAChB;IAEA,MAAMC,oBAAoBvB,iBAAiB,CAACwB;QAC1CZ,yBAAAA,mCAAAA,aAAeY,KAAKC,KAAK,EAAED;QAE3B,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YACpCR,QAAQM,KAAKP,IAAI;QACnB;IACF;IAEA,MAAMU,WAAWtB,qBAAqBY,MAAMN;IAC5C,MAAMiB,oBAAoBxB;IAC1B,MAAMyB,qBAAqBC,QAAQb,QAAQN,cAAc;IAEzDT,0BAA0B;QACxB,IAAI2B,oBAAoB;YACtB,OAAOD;QACT;IACF,GAAG;QAACA;QAAmBC;KAAmB;IAE1C,MAAM,EAAEE,eAAe,EAAEC,iBAAiB,EAAE,GAAGzB,mBAAmB;QAChE0B,WAAWtB,cAAc;QACzBuB,iBAAiB,CAACrB;IACpB;IAEA,OAAO;QACLsB,YAAY;YACVC,UAAU;QACZ;QACAvB;QACAI;QACAN;QACAI;QACAD;QACAS;QACAc,eAAepC,MAAM;QACrBqC,gBAAgBnC,oBAAoBG;QACpCiC,WAAWZ;QACXI,iBAAiBpB,cAAc,cAAcoB,kBAAkBS;QAC/DR;IACF;AACF,EAAE;AAEF;;CAEC,GACD,SAAShB,4BACPN,QAAyB;IAEzB,MAAM+B,gBAAgB3C,MAAM4C,QAAQ,CAACC,OAAO,CAACjC;IAC7C,IAAIkC,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;gBAACD;gBAAWC,aAAa,CAAC,EAAE;aAAC;QACtC,eAAe;QACf;YACE,OAAO;gBAACD;gBAAWA;aAAU;IACjC;AACF"}

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

@@ -1 +1 @@
-{"version":3,"sources":["DialogSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\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\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<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  Partial<Pick<DialogContextValue, 'isNestedDialog'>> &\n  Pick<PortalProps, 'mountNode'>;\n"],"names":[],"mappings":"AAAA,WAoCiC"}
+{"version":3,"sources":["DialogSurface.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\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\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<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    // This is only optional to avoid breaking changes, it should be mandatory and in fact it is always defined internally.\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n  };\n"],"names":[],"mappings":"AAAA,WAuCI"}

package/lib/components/DialogSurface/useDialogSurface.js

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps } from '@fluentui/react-utilities';
 import { useDialogContext_unstable } from '../../contexts';
 import { Escape } from '@fluentui/keyboard-keys';
+import { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';
 /**
  * Create the state required to render DialogSurface.
  *
@@ -13,9 +14,9 @@ import { Escape } from '@fluentui/keyboard-keys';
  */ export const useDialogSurface_unstable = (props, ref)=>{
     const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);
     const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);
+    const transitionStatus = useDialogTransitionContext_unstable();
     const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);
     const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);
-    const open = useDialogContext_unstable((ctx)=>ctx.open);
     const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
     const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);
     const handledBackdropClick = useEventCallback((event)=>{
@@ -46,7 +47,7 @@ import { Escape } from '@fluentui/keyboard-keys';
         }
     });
     const backdrop = slot.optional(props.backdrop, {
-        renderByDefault: open && modalType !== 'non-modal',
+        renderByDefault: modalType !== 'non-modal',
         defaultProps: {
             'aria-hidden': 'true'
         },
@@ -62,6 +63,7 @@ import { Escape } from '@fluentui/keyboard-keys';
         },
         backdrop,
         isNestedDialog,
+        transitionStatus,
         mountNode: props.mountNode,
         root: slot.always(getIntrinsicElementProps('div', {
             tabIndex: -1,

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

@@ -1 +1 @@
-{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\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 modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\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: open && modalType !== 'non-modal',\n    defaultProps: {\n      'aria-hidden': 'true',\n    },\n    elementType: 'div',\n  });\n  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n  }\n  return {\n    components: { backdrop: 'div', root: 'div' },\n    backdrop,\n    isNestedDialog,\n    mountNode: props.mountNode,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        'aria-modal': modalType !== 'non-modal',\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\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, dialogRef) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useDialogContext_unstable","Escape","useDialogSurface_unstable","props","ref","modalType","ctx","isNestedDialog","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","components","root","mountNode","always","tabIndex","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,MAAM,QAAQ,0BAA0B;AAEjD;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,YAAYL,0BAA0BM,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBP,0BAA0BM,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,kBAAkBR,0BAA0BM,CAAAA,MAAOA,IAAIE,eAAe;IAC5E,MAAMC,YAAYT,0BAA0BM,CAAAA,MAAOA,IAAIG,SAAS;IAChE,MAAMC,OAAOV,0BAA0BM,CAAAA,MAAOA,IAAII,IAAI;IACtD,MAAMC,oBAAoBX,0BAA0BM,CAAAA,MAAOA,IAAIK,iBAAiB;IAChF,MAAMC,gBAAgBZ,0BAA0BM,CAAAA,MAAOA,IAAIO,aAAa;IAExE,MAAMC,uBAAuBnB,iBAAiB,CAACoB;QAC7C,IAAIlB,oBAAoBM,MAAMa,QAAQ,GAAG;gBACvCb,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMa,QAAQ,EAACC,OAAO,cAAtBd,8CAAAA,6BAAAA,iBAAyBY;QAC3B;QACA,IAAIV,cAAc,WAAW,CAACU,MAAMG,kBAAkB,IAAI;YACxDP,kBAAkB;gBAChBI;gBACAL,MAAM;gBACNS,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgBzB,iBAAiB,CAACoB;YACtCZ;SAAAA,mBAAAA,MAAMkB,SAAS,cAAflB,uCAAAA,sBAAAA,OAAkBY;QAElB,IAAIA,MAAMO,GAAG,KAAKrB,UAAU,CAACc,MAAMG,kBAAkB,IAAI;YACvDP,kBAAkB;gBAChBI;gBACAL,MAAM;gBACNS,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAWlB,KAAK0B,QAAQ,CAACrB,MAAMa,QAAQ,EAAE;QAC7CS,iBAAiBf,QAAQL,cAAc;QACvCqB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIX,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB;IACA,OAAO;QACLc,YAAY;YAAEZ,UAAU;YAAOa,MAAM;QAAM;QAC3Cb;QACAT;QACAuB,WAAW3B,MAAM2B,SAAS;QAC1BD,MAAM/B,KAAKiC,MAAM,CACfhC,yBAAyB,OAAO;YAC9BiC,UAAU,CAAC;YACX,cAAc3B,cAAc;YAC5B4B,MAAM5B,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAG+B,YAAYtB;YACrD,GAAGT,KAAK;YACR,GAAGK,eAAe;YAClBa,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FhB,KAAKR,cAAcQ,KAAKK;QAC1B,IACA;YAAEkB,aAAa;QAAM;IAEzB;AACF,EAAE"}
+{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n} from '@fluentui/react-utilities';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';\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 modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n  const transitionStatus = useDialogTransitionContext_unstable();\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\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  if (backdrop) {\n    backdrop.onClick = handledBackdropClick;\n  }\n  return {\n    components: { backdrop: 'div', root: 'div' },\n    backdrop,\n    isNestedDialog,\n    transitionStatus,\n    mountNode: props.mountNode,\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        tabIndex: -1, // https://github.com/microsoft/fluentui/issues/25150\n        'aria-modal': modalType !== 'non-modal',\n        role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n        'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\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, dialogRef) as React.Ref<HTMLDivElement>,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useDialogContext_unstable","Escape","useDialogTransitionContext_unstable","useDialogSurface_unstable","props","ref","modalType","ctx","isNestedDialog","transitionStatus","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","open","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","components","root","mountNode","always","tabIndex","role","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,QACnB,4BAA4B;AAEnC,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,MAAM,QAAQ,0BAA0B;AACjD,SAASC,mCAAmC,QAAQ,yCAAyC;AAE7F;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,YAAYN,0BAA0BO,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBR,0BAA0BO,CAAAA,MAAOA,IAAIC,cAAc;IAC1E,MAAMC,mBAAmBP;IACzB,MAAMQ,kBAAkBV,0BAA0BO,CAAAA,MAAOA,IAAIG,eAAe;IAC5E,MAAMC,YAAYX,0BAA0BO,CAAAA,MAAOA,IAAII,SAAS;IAChE,MAAMC,oBAAoBZ,0BAA0BO,CAAAA,MAAOA,IAAIK,iBAAiB;IAChF,MAAMC,gBAAgBb,0BAA0BO,CAAAA,MAAOA,IAAIO,aAAa;IAExE,MAAMC,uBAAuBpB,iBAAiB,CAACqB;QAC7C,IAAInB,oBAAoBO,MAAMa,QAAQ,GAAG;gBACvCb,yBAAAA;aAAAA,0BAAAA,CAAAA,kBAAAA,MAAMa,QAAQ,EAACC,OAAO,cAAtBd,8CAAAA,6BAAAA,iBAAyBY;QAC3B;QACA,IAAIV,cAAc,WAAW,CAACU,MAAMG,kBAAkB,IAAI;YACxDP,kBAAkB;gBAChBI;gBACAI,MAAM;gBACNC,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgB3B,iBAAiB,CAACqB;YACtCZ;SAAAA,mBAAAA,MAAMmB,SAAS,cAAfnB,uCAAAA,sBAAAA,OAAkBY;QAElB,IAAIA,MAAMQ,GAAG,KAAKvB,UAAU,CAACe,MAAMG,kBAAkB,IAAI;YACvDP,kBAAkB;gBAChBI;gBACAI,MAAM;gBACNC,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDL,MAAMS,cAAc;QACtB;IACF;IAEA,MAAMR,WAAWnB,KAAK4B,QAAQ,CAACtB,MAAMa,QAAQ,EAAE;QAC7CU,iBAAiBrB,cAAc;QAC/BsB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIZ,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB;IACA,OAAO;QACLe,YAAY;YAAEb,UAAU;YAAOc,MAAM;QAAM;QAC3Cd;QACAT;QACAC;QACAuB,WAAW5B,MAAM4B,SAAS;QAC1BD,MAAMjC,KAAKmC,MAAM,CACflC,yBAAyB,OAAO;YAC9BmC,UAAU,CAAC;YACX,cAAc5B,cAAc;YAC5B6B,MAAM7B,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAGgC,YAAYvB;YACrD,GAAGT,KAAK;YACR,GAAGM,eAAe;YAClBa,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FjB,KAAKT,cAAcS,KAAKM;QAC1B,IACA;YAAEkB,aAAa;QAAM;IAEzB;AACF,EAAE"}

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

@@ -9,31 +9,64 @@ export const dialogSurfaceClassNames = {
 /**
  * Styles for the root slot
  */
-const useRootResetStyles = /*#__PURE__*/__resetStyles("r1mol2m5", "r1vxe5sp", {
-  r: [".r1mol2m5{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1mol2m5:focus{outline-style:none;}", ".r1mol2m5:focus-visible{outline-style:none;}", ".r1mol2m5[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1mol2m5[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r1vxe5sp{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}", ".r1vxe5sp:focus{outline-style:none;}", ".r1vxe5sp:focus-visible{outline-style:none;}", ".r1vxe5sp[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1vxe5sp[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
-  s: ["@media screen and (max-width: 480px){.r1mol2m5{max-width:100vw;}}", "@media screen and (max-width: 480px){.r1vxe5sp{max-width:100vw;}}"]
+const useRootBaseStyle = /*#__PURE__*/__resetStyles("r1xd7yeh", "r93c6rw", {
+  r: [".r1xd7yeh{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);opacity:0;transition-duration:var(--durationGentle);transition-property:opacity,transform,box-shadow;transition-timing-function:var(--curveDecelerateMid);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);transform:scale(0.85) translateZ(0);}", ".r1xd7yeh:focus{outline-style:none;}", ".r1xd7yeh:focus-visible{outline-style:none;}", ".r1xd7yeh[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1xd7yeh[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r93c6rw{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);opacity:0;transition-duration:var(--durationGentle);transition-property:opacity,transform,box-shadow;transition-timing-function:var(--curveDecelerateMid);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);transform:scale(0.85) translateZ(0);}", ".r93c6rw:focus{outline-style:none;}", ".r93c6rw:focus-visible{outline-style:none;}", ".r93c6rw[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r93c6rw[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media screen and (max-width: 480px){.r1xd7yeh{max-width:100vw;}}", "@media screen and (max-width: 480px){.r93c6rw{max-width:100vw;}}"]
 });
-const useBackdropStyles = /*#__PURE__*/__styles({
-  nestedDialogBackdrop: {
-    De3pzq: "f1c21dwh"
-  }
+const useRootStyles = /*#__PURE__*/__styles({
+  unmounted: {},
+  entering: {},
+  entered: {
+    E5pizo: "f10nrhrw",
+    Bz10aip: "f186d0ee",
+    abs64n: "f5p0z4x"
+  },
+  idle: {},
+  exiting: {
+    Bkqvd7p: "f1mfizis"
+  },
+  exited: {}
 }, {
-  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}"]
+  d: [".f10nrhrw{box-shadow:var(--shadow64);}", ".f186d0ee{transform:scale(1) translateZ(0);}", ".f5p0z4x{opacity:1;}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"]
 });
 /**
  * Styles for the backdrop slot
  */
-const useBackdropResetStyles = /*#__PURE__*/__resetStyles("rvs8970", "r1uj6nuu", [".rvs8970{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}", ".r1uj6nuu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}"]);
+const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("raidwwn", "r17vltcu", [".raidwwn{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}", ".r17vltcu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}"]);
+const useBackdropStyles = /*#__PURE__*/__styles({
+  nestedDialogBackdrop: {
+    De3pzq: "f1c21dwh"
+  },
+  unmounted: {},
+  entering: {},
+  entered: {
+    abs64n: "f5p0z4x"
+  },
+  idle: {},
+  exiting: {
+    Bkqvd7p: "f1mfizis"
+  },
+  exited: {}
+}, {
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f5p0z4x{opacity:1;}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"]
+});
 /**
  * Apply styling to the DialogSurface slots based on the state
  */
 export const useDialogSurfaceStyles_unstable = state => {
-  const surfaceResetStyles = useRootResetStyles();
-  const styles = useBackdropStyles();
-  const backdropResetStyles = useBackdropResetStyles();
-  state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);
-  if (state.backdrop) {
-    state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
+  const {
+    isNestedDialog,
+    root,
+    backdrop,
+    transitionStatus = 'unmounted'
+  } = state;
+  const rootBaseStyle = useRootBaseStyle();
+  const rootStyles = useRootStyles();
+  const backdropBaseStyle = useBackdropBaseStyle();
+  const backdropStyles = useBackdropStyles();
+  root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, rootStyles[transitionStatus], root.className);
+  if (backdrop) {
+    backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdropStyles[transitionStatus], backdrop.className);
   }
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootResetStyles","r","s","useBackdropStyles","nestedDialogBackdrop","De3pzq","d","useBackdropResetStyles","useDialogSurfaceStyles_unstable","state","surfaceResetStyles","styles","backdropResetStyles","className","isNestedDialog"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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 useRootResetStyles = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    ...shorthands.inset(0),\n    ...shorthands.padding(0),\n    ...shorthands.padding(SURFACE_PADDING),\n    ...shorthands.margin('auto'),\n    ...shorthands.borderStyle('none'),\n    ...shorthands.overflow('unset'),\n    ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n    contain: 'content',\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    boxShadow: tokens.shadow64,\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    }\n});\nconst useBackdropStyles = makeStyles({\n    nestedDialogBackdrop: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropResetStyles = makeResetStyles({\n    ...shorthands.inset('0px'),\n    backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    position: 'fixed'\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n    const surfaceResetStyles = useRootResetStyles();\n    const styles = useBackdropStyles();\n    const backdropResetStyles = useBackdropResetStyles();\n    state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);\n    if (state.backdrop) {\n        state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACvG,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,kBAAkB,gBAAGZ,aAAA;EAAAa,CAAA;EAAAC,CAAA;AAAA,CAyB9B,CAAC;AACF,MAAMC,iBAAiB,gBAAGd,QAAA;EAAAe,oBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,sBAAsB,gBAAGnB,aAAA,uOAIlC,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMoB,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAMC,kBAAkB,GAAGV,kBAAkB,CAAC,CAAC;EAC/C,MAAMW,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAClC,MAAMS,mBAAmB,GAAGL,sBAAsB,CAAC,CAAC;EACpDE,KAAK,CAACX,IAAI,CAACe,SAAS,GAAGvB,YAAY,CAACO,uBAAuB,CAACC,IAAI,EAAEY,kBAAkB,EAAED,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;EAC3G,IAAIJ,KAAK,CAACV,QAAQ,EAAE;IAChBU,KAAK,CAACV,QAAQ,CAACc,SAAS,GAAGvB,YAAY,CAACO,uBAAuB,CAACE,QAAQ,EAAEa,mBAAmB,EAAEH,KAAK,CAACK,cAAc,IAAIH,MAAM,CAACP,oBAAoB,EAAEK,KAAK,CAACV,QAAQ,CAACc,SAAS,CAAC;EACjL;EACA,OAAOJ,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createFocusOutlineStyle","MEDIA_QUERY_BREAKPOINT_SELECTOR","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useRootStyles","unmounted","entering","entered","E5pizo","Bz10aip","abs64n","idle","exiting","Bkqvd7p","exited","d","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","useDialogSurfaceStyles_unstable","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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    ...shorthands.inset(0),\n    ...shorthands.padding(0),\n    ...shorthands.padding(SURFACE_PADDING),\n    ...shorthands.margin('auto'),\n    ...shorthands.borderStyle('none'),\n    ...shorthands.overflow('unset'),\n    ...shorthands.border(SURFACE_BORDER_WIDTH, 'solid', tokens.colorTransparentStroke),\n    ...shorthands.borderRadius(tokens.borderRadiusXLarge),\n    contain: 'content',\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    },\n    // initial style before animation:\n    opacity: 0,\n    transitionDuration: tokens.durationGentle,\n    transitionProperty: 'opacity, transform, box-shadow',\n    // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n    transitionTimingFunction: tokens.curveDecelerateMid,\n    boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',\n    transform: 'scale(0.85) translateZ(0)'\n});\nconst useRootStyles = makeStyles({\n    unmounted: {},\n    entering: {},\n    entered: {\n        boxShadow: tokens.shadow64,\n        transform: 'scale(1) translateZ(0)',\n        opacity: 1\n    },\n    idle: {},\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    exited: {}\n});\n/**\n * Styles for the backdrop slot\n */ const useBackdropBaseStyle = makeResetStyles({\n    ...shorthands.inset('0px'),\n    backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    position: 'fixed',\n    // initial style before animation:\n    transitionDuration: tokens.durationGentle,\n    transitionTimingFunction: tokens.curveLinear,\n    transitionProperty: 'opacity',\n    willChange: 'opacity',\n    opacity: 0\n});\nconst useBackdropStyles = makeStyles({\n    nestedDialogBackdrop: {\n        backgroundColor: tokens.colorTransparentBackground\n    },\n    unmounted: {},\n    entering: {},\n    entered: {\n        opacity: 1\n    },\n    idle: {},\n    exiting: {\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    exited: {}\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n    const { isNestedDialog, root, backdrop, transitionStatus = 'unmounted' } = state;\n    const rootBaseStyle = useRootBaseStyle();\n    const rootStyles = useRootStyles();\n    const backdropBaseStyle = useBackdropBaseStyle();\n    const backdropStyles = useBackdropStyles();\n    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, rootStyles[transitionStatus], root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdropStyles[transitionStatus], backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,+BAA+B,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACvG,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGZ,aAAA;EAAAa,CAAA;EAAAC,CAAA;AAAA,CAgC5B,CAAC;AACF,MAAMC,aAAa,gBAAGd,QAAA;EAAAe,SAAA;EAAAC,QAAA;EAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,IAAA;EAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;AAAA;EAAAC,CAAA;AAAA,CAarB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,oBAAoB,gBAAG3B,aAAA,2gBAUhC,CAAC;AACF,MAAM4B,iBAAiB,gBAAG3B,QAAA;EAAA4B,oBAAA;IAAAC,MAAA;EAAA;EAAAd,SAAA;EAAAC,QAAA;EAAAC,OAAA;IAAAG,MAAA;EAAA;EAAAC,IAAA;EAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;AAAA;EAAAC,CAAA;AAAA,CAczB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC,cAAc;IAAEvB,IAAI;IAAEC,QAAQ;IAAEuB,gBAAgB,GAAG;EAAY,CAAC,GAAGF,KAAK;EAChF,MAAMG,aAAa,GAAGvB,gBAAgB,CAAC,CAAC;EACxC,MAAMwB,UAAU,GAAGrB,aAAa,CAAC,CAAC;EAClC,MAAMsB,iBAAiB,GAAGV,oBAAoB,CAAC,CAAC;EAChD,MAAMW,cAAc,GAAGV,iBAAiB,CAAC,CAAC;EAC1ClB,IAAI,CAAC6B,SAAS,GAAGrC,YAAY,CAACO,uBAAuB,CAACC,IAAI,EAAEyB,aAAa,EAAEC,UAAU,CAACF,gBAAgB,CAAC,EAAExB,IAAI,CAAC6B,SAAS,CAAC;EACxH,IAAI5B,QAAQ,EAAE;IACVA,QAAQ,CAAC4B,SAAS,GAAGrC,YAAY,CAACO,uBAAuB,CAACE,QAAQ,EAAE0B,iBAAiB,EAAEJ,cAAc,IAAIK,cAAc,CAACT,oBAAoB,EAAES,cAAc,CAACJ,gBAAgB,CAAC,EAAEvB,QAAQ,CAAC4B,SAAS,CAAC;EACvM;EACA,OAAOP,KAAK;AAChB,CAAC"}

package/lib/contexts/dialogTransitionContext.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+/**
+ * @internal
+ */ const defaultContextValue = 'unmounted';
+// Contexts should default to undefined
+/**
+ * @internal
+ */ export const DialogTransitionContext = React.createContext(undefined);
+/**
+ * @internal
+ */ export const DialogTransitionProvider = DialogTransitionContext.Provider;
+/**
+ * @internal
+ */ export const useDialogTransitionContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(DialogTransitionContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultContextValue;
+};

package/lib/contexts/dialogTransitionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["dialogTransitionContext.ts"],"sourcesContent":["import * as React from 'react';\nimport { TransitionStatus } from 'react-transition-group';\n\n/**\n * @internal\n */\nexport type DialogTransitionContextValue = TransitionStatus;\n\n/**\n * @internal\n */\nconst defaultContextValue: DialogTransitionContextValue = 'unmounted';\n\n// Contexts should default to undefined\n/**\n * @internal\n */\nexport const DialogTransitionContext: React.Context<DialogTransitionContextValue | undefined> = React.createContext<\n  DialogTransitionContextValue | undefined\n>(undefined);\n\n/**\n * @internal\n */\nexport const DialogTransitionProvider = DialogTransitionContext.Provider;\n\n/**\n * @internal\n */\nexport const useDialogTransitionContext_unstable = (): DialogTransitionContextValue => {\n  return React.useContext(DialogTransitionContext) ?? defaultContextValue;\n};\n"],"names":["React","defaultContextValue","DialogTransitionContext","createContext","undefined","DialogTransitionProvider","Provider","useDialogTransitionContext_unstable","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAQ/B;;CAEC,GACD,MAAMC,sBAAoD;AAE1D,uCAAuC;AACvC;;CAEC,GACD,OAAO,MAAMC,0BAAmFF,MAAMG,aAAa,CAEjHC,WAAW;AAEb;;CAEC,GACD,OAAO,MAAMC,2BAA2BH,wBAAwBI,QAAQ,CAAC;AAEzE;;CAEC,GACD,OAAO,MAAMC,sCAAsC;QAC1CP;IAAP,OAAOA,CAAAA,oBAAAA,MAAMQ,UAAU,CAACN,sCAAjBF,+BAAAA,oBAA6CC;AACtD,EAAE"}

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

@@ -9,7 +9,9 @@ Object.defineProperty(exports, "renderDialog_unstable", {
     }
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reacttransitiongroup = require("react-transition-group");
 const _contexts = require("../../contexts");
+const _dialogTransitionContext = require("../../contexts/dialogTransitionContext");
 const renderDialog_unstable = (state, contextValues)=>{
     const { content, trigger } = state;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_contexts.DialogProvider, {
@@ -18,7 +20,18 @@ const renderDialog_unstable = (state, contextValues)=>{
             value: contextValues.dialogSurface,
             children: [
                 trigger,
-                content
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
+                    mountOnEnter: true,
+                    unmountOnExit: true,
+                    in: state.open,
+                    nodeRef: state.dialogRef,
+                    // FIXME: this should not be hardcoded tokens.durationGentle
+                    timeout: 250,
+                    children: (status)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_dialogTransitionContext.DialogTransitionProvider, {
+                            value: status,
+                            children: content
+                        })
+                })
             ]
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDialog.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\n/**\n * Render the final JSX of Dialog\n */ export const renderDialog_unstable = (state, contextValues)=>{\n    const { content, trigger } = state;\n    return /*#__PURE__*/ _jsx(DialogProvider, {\n        value: contextValues.dialog,\n        children: /*#__PURE__*/ _jsxs(DialogSurfaceProvider, {\n            value: contextValues.dialogSurface,\n            children: [\n                trigger,\n                content\n            ]\n        })\n    });\n};\n"],"names":["renderDialog_unstable","state","contextValues","content","trigger","_jsx","DialogProvider","value","dialog","children","_jsxs","DialogSurfaceProvider","dialogSurface"],"mappings":";;;;+BAIiBA;;;eAAAA;;;4BAJ4B;0BACS;AAG3C,MAAMA,wBAAwB,CAACC,OAAOC;IAC7C,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAC7B,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACC,wBAAc,EAAE;QACtCC,OAAOL,cAAcM,MAAM;QAC3BC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,+BAAqB,EAAE;YACjDJ,OAAOL,cAAcU,aAAa;YAClCH,UAAU;gBACNL;gBACAD;aACH;QACL;IACJ;AACJ"}
+{"version":3,"sources":["renderDialog.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { Transition } from 'react-transition-group';\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport { DialogTransitionProvider } from '../../contexts/dialogTransitionContext';\n/**\n * Render the final JSX of Dialog\n */ export const renderDialog_unstable = (state, contextValues)=>{\n    const { content, trigger } = state;\n    return /*#__PURE__*/ _jsx(DialogProvider, {\n        value: contextValues.dialog,\n        children: /*#__PURE__*/ _jsxs(DialogSurfaceProvider, {\n            value: contextValues.dialogSurface,\n            children: [\n                trigger,\n                /*#__PURE__*/ _jsx(Transition, {\n                    mountOnEnter: true,\n                    unmountOnExit: true,\n                    in: state.open,\n                    nodeRef: state.dialogRef,\n                    // FIXME: this should not be hardcoded tokens.durationGentle\n                    timeout: 250,\n                    children: (status)=>/*#__PURE__*/ _jsx(DialogTransitionProvider, {\n                            value: status,\n                            children: content\n                        })\n                })\n            ]\n        })\n    });\n};\n"],"names":["renderDialog_unstable","state","contextValues","content","trigger","_jsx","DialogProvider","value","dialog","children","_jsxs","DialogSurfaceProvider","dialogSurface","Transition","mountOnEnter","unmountOnExit","in","open","nodeRef","dialogRef","timeout","status","DialogTransitionProvider"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;sCAClB;0BAC2B;yCACb;AAG9B,MAAMA,wBAAwB,CAACC,OAAOC;IAC7C,MAAM,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGH;IAC7B,OAAO,WAAW,GAAGI,IAAAA,eAAI,EAACC,wBAAc,EAAE;QACtCC,OAAOL,cAAcM,MAAM;QAC3BC,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,+BAAqB,EAAE;YACjDJ,OAAOL,cAAcU,aAAa;YAClCH,UAAU;gBACNL;gBACA,WAAW,GAAGC,IAAAA,eAAI,EAACQ,gCAAU,EAAE;oBAC3BC,cAAc;oBACdC,eAAe;oBACfC,IAAIf,MAAMgB,IAAI;oBACdC,SAASjB,MAAMkB,SAAS;oBACxB,4DAA4D;oBAC5DC,SAAS;oBACTX,UAAU,CAACY,SAAS,WAAW,GAAGhB,IAAAA,eAAI,EAACiB,iDAAwB,EAAE;4BACzDf,OAAOc;4BACPZ,UAAUN;wBACd;gBACR;aACH;QACL;IACJ;AACJ"}

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

@@ -53,7 +53,7 @@ const useDialog_unstable = (props)=>{
         inertTrapFocus,
         open,
         modalType,
-        content: open ? content : null,
+        content,
         trigger,
         requestOpenChange,
         dialogTitleId: (0, _reactutilities.useId)('dialog-title-'),

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

@@ -1 +1 @@
-{"version":3,"sources":["useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 */ export const useDialog_unstable = (props)=>{\n    const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n    const [trigger, content] = childrenToTriggerAndContent(children);\n    const [open, setOpen] = useControllableState({\n        state: props.open,\n        defaultState: props.defaultOpen,\n        initialState: false\n    });\n    const requestOpenChange = useEventCallback((data)=>{\n        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\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    const focusRef = useFocusFirstElement(open, modalType);\n    const disableBodyScroll = useDisableBodyScroll();\n    const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n    useIsomorphicLayoutEffect(()=>{\n        if (isBodyScrollLocked) {\n            return disableBodyScroll();\n        }\n    }, [\n        disableBodyScroll,\n        isBodyScrollLocked\n    ]);\n    const { modalAttributes, triggerAttributes } = useModalAttributes({\n        trapFocus: modalType !== 'non-modal',\n        legacyTrapFocus: !inertTrapFocus\n    });\n    return {\n        components: {\n            backdrop: 'div'\n        },\n        inertTrapFocus,\n        open,\n        modalType,\n        content: open ? content : null,\n        trigger,\n        requestOpenChange,\n        dialogTitleId: useId('dialog-title-'),\n        isNestedDialog: useHasParentContext(DialogContext),\n        dialogRef: focusRef,\n        modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n        triggerAttributes\n    };\n};\n/**\n * Extracts trigger and content from children\n */ function childrenToTriggerAndContent(children) {\n    const childrenArray = React.Children.toArray(children);\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(`@fluentui/react-dialog [useDialog]:\nDialog must contain at least one child <DialogSurface/>,\nand at most two children <DialogTrigger/> <DialogSurface/> (in this order).`);\n        }\n    }\n    switch(childrenArray.length){\n        // case where there's a trigger followed by content\n        case 2:\n            return childrenArray;\n        // case where there's only content\n        case 1:\n            return [\n                undefined,\n                childrenArray[0]\n            ];\n        // unknown case\n        default:\n            return [\n                undefined,\n                undefined\n            ];\n    }\n}\n"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","disableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","modalAttributes","triggerAttributes","useModalAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","useId","isNestedDialog","useHasParentContext","DialogContext","dialogRef","undefined","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACkE;sCACrD;uBACuB;0BAC7B;8BACK;AAQxB,MAAMA,qBAAqB,CAACC;IACnC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAChF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QACzCC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc;IAClB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAAC,CAACC;QACxCd,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED;QACrF,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YAClCV,QAAQQ,KAAKT,IAAI;QACrB;IACJ;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAMoB,oBAAoBC,IAAAA,2BAAoB;IAC9C,MAAMC,qBAAqBC,QAAQjB,QAAQN,cAAc;IACzDwB,IAAAA,yCAAyB,EAAC;QACtB,IAAIF,oBAAoB;YACpB,OAAOF;QACX;IACJ,GAAG;QACCA;QACAE;KACH;IACD,MAAM,EAAEG,eAAe,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,gCAAkB,EAAC;QAC9DC,WAAW5B,cAAc;QACzB6B,iBAAiB,CAAC3B;IACtB;IACA,OAAO;QACH4B,YAAY;YACRC,UAAU;QACd;QACA7B;QACAI;QACAN;QACAI,SAASE,OAAOF,UAAU;QAC1BD;QACAU;QACAmB,eAAeC,IAAAA,qBAAK,EAAC;QACrBC,gBAAgBC,IAAAA,yCAAmB,EAACC,uBAAa;QACjDC,WAAWnB;QACXO,iBAAiBzB,cAAc,cAAcyB,kBAAkBa;QAC/DZ;IACJ;AACJ;AACA;;CAEC,GAAG,SAASrB,4BAA4BN,QAAQ;IAC7C,MAAMwC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAAC3C;IAC7C,IAAI4C,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC1D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,CAAC;;2EAEiD,CAAC;QACpE;IACJ;IACA,OAAOT,cAAcO,MAAM;QACvB,mDAAmD;QACnD,KAAK;YACD,OAAOP;QACX,kCAAkC;QAClC,KAAK;YACD,OAAO;gBACHD;gBACAC,aAAa,CAAC,EAAE;aACnB;QACL,eAAe;QACf;YACI,OAAO;gBACHD;gBACAA;aACH;IACT;AACJ"}
+{"version":3,"sources":["useDialog.js"],"sourcesContent":["import * as React from 'react';\nimport { useControllableState, useEventCallback, useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useHasParentContext } from '@fluentui/react-context-selector';\nimport { useDisableBodyScroll, useFocusFirstElement } from '../../utils';\nimport { DialogContext } from '../../contexts';\nimport { useModalAttributes } from '@fluentui/react-tabster';\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 */ export const useDialog_unstable = (props)=>{\n    const { children, modalType = 'modal', onOpenChange, inertTrapFocus = false } = props;\n    const [trigger, content] = childrenToTriggerAndContent(children);\n    const [open, setOpen] = useControllableState({\n        state: props.open,\n        defaultState: props.defaultOpen,\n        initialState: false\n    });\n    const requestOpenChange = useEventCallback((data)=>{\n        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(data.event, data);\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    const focusRef = useFocusFirstElement(open, modalType);\n    const disableBodyScroll = useDisableBodyScroll();\n    const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n    useIsomorphicLayoutEffect(()=>{\n        if (isBodyScrollLocked) {\n            return disableBodyScroll();\n        }\n    }, [\n        disableBodyScroll,\n        isBodyScrollLocked\n    ]);\n    const { modalAttributes, triggerAttributes } = useModalAttributes({\n        trapFocus: modalType !== 'non-modal',\n        legacyTrapFocus: !inertTrapFocus\n    });\n    return {\n        components: {\n            backdrop: 'div'\n        },\n        inertTrapFocus,\n        open,\n        modalType,\n        content,\n        trigger,\n        requestOpenChange,\n        dialogTitleId: useId('dialog-title-'),\n        isNestedDialog: useHasParentContext(DialogContext),\n        dialogRef: focusRef,\n        modalAttributes: modalType !== 'non-modal' ? modalAttributes : undefined,\n        triggerAttributes\n    };\n};\n/**\n * Extracts trigger and content from children\n */ function childrenToTriggerAndContent(children) {\n    const childrenArray = React.Children.toArray(children);\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(`@fluentui/react-dialog [useDialog]:\nDialog must contain at least one child <DialogSurface/>,\nand at most two children <DialogTrigger/> <DialogSurface/> (in this order).`);\n        }\n    }\n    switch(childrenArray.length){\n        // case where there's a trigger followed by content\n        case 2:\n            return childrenArray;\n        // case where there's only content\n        case 1:\n            return [\n                undefined,\n                childrenArray[0]\n            ];\n        // unknown case\n        default:\n            return [\n                undefined,\n                undefined\n            ];\n    }\n}\n"],"names":["useDialog_unstable","props","children","modalType","onOpenChange","inertTrapFocus","trigger","content","childrenToTriggerAndContent","open","setOpen","useControllableState","state","defaultState","defaultOpen","initialState","requestOpenChange","useEventCallback","data","event","isDefaultPrevented","focusRef","useFocusFirstElement","disableBodyScroll","useDisableBodyScroll","isBodyScrollLocked","Boolean","useIsomorphicLayoutEffect","modalAttributes","triggerAttributes","useModalAttributes","trapFocus","legacyTrapFocus","components","backdrop","dialogTitleId","useId","isNestedDialog","useHasParentContext","DialogContext","dialogRef","undefined","childrenArray","React","Children","toArray","process","env","NODE_ENV","length","console","warn"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACkE;sCACrD;uBACuB;0BAC7B;8BACK;AAQxB,MAAMA,qBAAqB,CAACC;IACnC,MAAM,EAAEC,QAAQ,EAAEC,YAAY,OAAO,EAAEC,YAAY,EAAEC,iBAAiB,KAAK,EAAE,GAAGJ;IAChF,MAAM,CAACK,SAASC,QAAQ,GAAGC,4BAA4BN;IACvD,MAAM,CAACO,MAAMC,QAAQ,GAAGC,IAAAA,oCAAoB,EAAC;QACzCC,OAAOX,MAAMQ,IAAI;QACjBI,cAAcZ,MAAMa,WAAW;QAC/BC,cAAc;IAClB;IACA,MAAMC,oBAAoBC,IAAAA,gCAAgB,EAAC,CAACC;QACxCd,iBAAiB,QAAQA,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAac,KAAKC,KAAK,EAAED;QACrF,0DAA0D;QAC1D,6FAA6F;QAC7F,IAAI,CAACA,KAAKC,KAAK,CAACC,kBAAkB,IAAI;YAClCV,QAAQQ,KAAKT,IAAI;QACrB;IACJ;IACA,MAAMY,WAAWC,IAAAA,2BAAoB,EAACb,MAAMN;IAC5C,MAAMoB,oBAAoBC,IAAAA,2BAAoB;IAC9C,MAAMC,qBAAqBC,QAAQjB,QAAQN,cAAc;IACzDwB,IAAAA,yCAAyB,EAAC;QACtB,IAAIF,oBAAoB;YACpB,OAAOF;QACX;IACJ,GAAG;QACCA;QACAE;KACH;IACD,MAAM,EAAEG,eAAe,EAAEC,iBAAiB,EAAE,GAAGC,IAAAA,gCAAkB,EAAC;QAC9DC,WAAW5B,cAAc;QACzB6B,iBAAiB,CAAC3B;IACtB;IACA,OAAO;QACH4B,YAAY;YACRC,UAAU;QACd;QACA7B;QACAI;QACAN;QACAI;QACAD;QACAU;QACAmB,eAAeC,IAAAA,qBAAK,EAAC;QACrBC,gBAAgBC,IAAAA,yCAAmB,EAACC,uBAAa;QACjDC,WAAWnB;QACXO,iBAAiBzB,cAAc,cAAcyB,kBAAkBa;QAC/DZ;IACJ;AACJ;AACA;;CAEC,GAAG,SAASrB,4BAA4BN,QAAQ;IAC7C,MAAMwC,gBAAgBC,OAAMC,QAAQ,CAACC,OAAO,CAAC3C;IAC7C,IAAI4C,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,IAAIN,cAAcO,MAAM,KAAK,KAAKP,cAAcO,MAAM,KAAK,GAAG;YAC1D,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,CAAC;;2EAEiD,CAAC;QACpE;IACJ;IACA,OAAOT,cAAcO,MAAM;QACvB,mDAAmD;QACnD,KAAK;YACD,OAAOP;QACX,kCAAkC;QAClC,KAAK;YACD,OAAO;gBACHD;gBACAC,aAAa,CAAC,EAAE;aACnB;QACL,eAAe;QACf;YACI,OAAO;gBACHD;gBACAA;aACH;IACT;AACJ"}

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

@@ -13,12 +13,13 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactutilities = require("@fluentui/react-utilities");
 const _contexts = require("../../contexts");
 const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _dialogTransitionContext = require("../../contexts/dialogTransitionContext");
 const useDialogSurface_unstable = (props, ref)=>{
     const modalType = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalType);
     const isNestedDialog = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.isNestedDialog);
+    const transitionStatus = (0, _dialogTransitionContext.useDialogTransitionContext_unstable)();
     const modalAttributes = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.modalAttributes);
     const dialogRef = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogRef);
-    const open = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.open);
     const requestOpenChange = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.requestOpenChange);
     const dialogTitleID = (0, _contexts.useDialogContext_unstable)((ctx)=>ctx.dialogTitleId);
     const handledBackdropClick = (0, _reactutilities.useEventCallback)((event)=>{
@@ -49,7 +50,7 @@ const useDialogSurface_unstable = (props, ref)=>{
         }
     });
     const backdrop = _reactutilities.slot.optional(props.backdrop, {
-        renderByDefault: open && modalType !== 'non-modal',
+        renderByDefault: modalType !== 'non-modal',
         defaultProps: {
             'aria-hidden': 'true'
         },
@@ -65,6 +66,7 @@ const useDialogSurface_unstable = (props, ref)=>{
         },
         backdrop,
         isNestedDialog,
+        transitionStatus,
         mountNode: props.mountNode,
         root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
             tabIndex: -1,

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

@@ -1 +1 @@
-{"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\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 */ export const useDialogSurface_unstable = (props, ref)=>{\n    const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n    const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);\n    const modalAttributes = useDialogContext_unstable((ctx)=>ctx.modalAttributes);\n    const dialogRef = useDialogContext_unstable((ctx)=>ctx.dialogRef);\n    const open = useDialogContext_unstable((ctx)=>ctx.open);\n    const requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);\n    const dialogTitleID = useDialogContext_unstable((ctx)=>ctx.dialogTitleId);\n    const handledBackdropClick = useEventCallback((event)=>{\n        if (isResolvedShorthand(props.backdrop)) {\n            var _props_backdrop_onClick, _props_backdrop;\n            (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n        }\n        if (modalType === 'modal' && !event.isDefaultPrevented()) {\n            requestOpenChange({\n                event,\n                open: false,\n                type: 'backdropClick'\n            });\n        }\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        var _props_onKeyDown;\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\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    const backdrop = slot.optional(props.backdrop, {\n        renderByDefault: open && modalType !== 'non-modal',\n        defaultProps: {\n            'aria-hidden': 'true'\n        },\n        elementType: 'div'\n    });\n    if (backdrop) {\n        backdrop.onClick = handledBackdropClick;\n    }\n    return {\n        components: {\n            backdrop: 'div',\n            root: 'div'\n        },\n        backdrop,\n        isNestedDialog,\n        mountNode: props.mountNode,\n        root: slot.always(getIntrinsicElementProps('div', {\n            tabIndex: -1,\n            'aria-modal': modalType !== 'non-modal',\n            role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n            'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\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, dialogRef)\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDialogSurface_unstable","props","ref","modalType","useDialogContext_unstable","ctx","isNestedDialog","modalAttributes","dialogRef","open","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","backdrop","_props_backdrop_onClick","_props_backdrop","onClick","call","isDefaultPrevented","type","handleKeyDown","_props_onKeyDown","onKeyDown","key","Escape","preventDefault","slot","optional","renderByDefault","defaultProps","elementType","components","root","mountNode","always","getIntrinsicElementProps","tabIndex","role","undefined","useMergedRefs"],"mappings":";;;;+BAYiBA;;;eAAAA;;;;iEAZM;gCAC8E;0BAC3D;8BACnB;AASZ,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAMC,YAAYC,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBF,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIC,cAAc;IAC1E,MAAMC,kBAAkBH,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIE,eAAe;IAC5E,MAAMC,YAAYJ,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIG,SAAS;IAChE,MAAMC,OAAOL,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAII,IAAI;IACtD,MAAMC,oBAAoBN,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIK,iBAAiB;IAChF,MAAMC,gBAAgBP,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIO,aAAa;IACxE,MAAMC,uBAAuBC,IAAAA,gCAAgB,EAAC,CAACC;QAC3C,IAAIC,IAAAA,mCAAmB,EAACf,MAAMgB,QAAQ,GAAG;YACrC,IAAIC,yBAAyBC;YAC5BD,CAAAA,0BAA0B,AAACC,CAAAA,kBAAkBlB,MAAMgB,QAAQ,AAAD,EAAGG,OAAO,AAAD,MAAO,QAAQF,4BAA4B,KAAK,IAAI,KAAK,IAAIA,wBAAwBG,IAAI,CAACF,iBAAiBJ;QACnL;QACA,IAAIZ,cAAc,WAAW,CAACY,MAAMO,kBAAkB,IAAI;YACtDZ,kBAAkB;gBACdK;gBACAN,MAAM;gBACNc,MAAM;YACV;QACJ;IACJ;IACA,MAAMC,gBAAgBV,IAAAA,gCAAgB,EAAC,CAACC;QACpC,IAAIU;QACHA,CAAAA,mBAAmBxB,MAAMyB,SAAS,AAAD,MAAO,QAAQD,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBJ,IAAI,CAACpB,OAAOc;QACrH,IAAIA,MAAMY,GAAG,KAAKC,oBAAM,IAAI,CAACb,MAAMO,kBAAkB,IAAI;YACrDZ,kBAAkB;gBACdK;gBACAN,MAAM;gBACNc,MAAM;YACV;YACA,qFAAqF;YACrF,gDAAgD;YAChDR,MAAMc,cAAc;QACxB;IACJ;IACA,MAAMZ,WAAWa,oBAAI,CAACC,QAAQ,CAAC9B,MAAMgB,QAAQ,EAAE;QAC3Ce,iBAAiBvB,QAAQN,cAAc;QACvC8B,cAAc;YACV,eAAe;QACnB;QACAC,aAAa;IACjB;IACA,IAAIjB,UAAU;QACVA,SAASG,OAAO,GAAGP;IACvB;IACA,OAAO;QACHsB,YAAY;YACRlB,UAAU;YACVmB,MAAM;QACV;QACAnB;QACAX;QACA+B,WAAWpC,MAAMoC,SAAS;QAC1BD,MAAMN,oBAAI,CAACQ,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CC,UAAU,CAAC;YACX,cAAcrC,cAAc;YAC5BsC,MAAMtC,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAGyC,YAAY/B;YACrD,GAAGV,KAAK;YACR,GAAGM,eAAe;YAClBmB,WAAWF;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FtB,KAAKyC,IAAAA,6BAAa,EAACzC,KAAKM;QAC5B,IAAI;YACA0B,aAAa;QACjB;IACJ;AACJ"}
+{"version":3,"sources":["useDialogSurface.js"],"sourcesContent":["import * as React from 'react';\nimport { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps } from '@fluentui/react-utilities';\nimport { useDialogContext_unstable } from '../../contexts';\nimport { Escape } from '@fluentui/keyboard-keys';\nimport { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';\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 */ export const useDialogSurface_unstable = (props, ref)=>{\n    const modalType = useDialogContext_unstable((ctx)=>ctx.modalType);\n    const isNestedDialog = useDialogContext_unstable((ctx)=>ctx.isNestedDialog);\n    const transitionStatus = useDialogTransitionContext_unstable();\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 handledBackdropClick = useEventCallback((event)=>{\n        if (isResolvedShorthand(props.backdrop)) {\n            var _props_backdrop_onClick, _props_backdrop;\n            (_props_backdrop_onClick = (_props_backdrop = props.backdrop).onClick) === null || _props_backdrop_onClick === void 0 ? void 0 : _props_backdrop_onClick.call(_props_backdrop, event);\n        }\n        if (modalType === 'modal' && !event.isDefaultPrevented()) {\n            requestOpenChange({\n                event,\n                open: false,\n                type: 'backdropClick'\n            });\n        }\n    });\n    const handleKeyDown = useEventCallback((event)=>{\n        var _props_onKeyDown;\n        (_props_onKeyDown = props.onKeyDown) === null || _props_onKeyDown === void 0 ? void 0 : _props_onKeyDown.call(props, event);\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    const backdrop = slot.optional(props.backdrop, {\n        renderByDefault: modalType !== 'non-modal',\n        defaultProps: {\n            'aria-hidden': 'true'\n        },\n        elementType: 'div'\n    });\n    if (backdrop) {\n        backdrop.onClick = handledBackdropClick;\n    }\n    return {\n        components: {\n            backdrop: 'div',\n            root: 'div'\n        },\n        backdrop,\n        isNestedDialog,\n        transitionStatus,\n        mountNode: props.mountNode,\n        root: slot.always(getIntrinsicElementProps('div', {\n            tabIndex: -1,\n            'aria-modal': modalType !== 'non-modal',\n            role: modalType === 'alert' ? 'alertdialog' : 'dialog',\n            'aria-labelledby': props['aria-label'] ? undefined : dialogTitleID,\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, dialogRef)\n        }), {\n            elementType: 'div'\n        })\n    };\n};\n"],"names":["useDialogSurface_unstable","props","ref","modalType","useDialogContext_unstable","ctx","isNestedDialog","transitionStatus","useDialogTransitionContext_unstable","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","handledBackdropClick","useEventCallback","event","isResolvedShorthand","backdrop","_props_backdrop_onClick","_props_backdrop","onClick","call","isDefaultPrevented","open","type","handleKeyDown","_props_onKeyDown","onKeyDown","key","Escape","preventDefault","slot","optional","renderByDefault","defaultProps","elementType","components","root","mountNode","always","getIntrinsicElementProps","tabIndex","role","undefined","useMergedRefs"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCAC8E;0BAC3D;8BACnB;yCAC6B;AASzC,MAAMA,4BAA4B,CAACC,OAAOC;IACjD,MAAMC,YAAYC,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIF,SAAS;IAChE,MAAMG,iBAAiBF,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIC,cAAc;IAC1E,MAAMC,mBAAmBC,IAAAA,4DAAmC;IAC5D,MAAMC,kBAAkBL,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAII,eAAe;IAC5E,MAAMC,YAAYN,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIK,SAAS;IAChE,MAAMC,oBAAoBP,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIM,iBAAiB;IAChF,MAAMC,gBAAgBR,IAAAA,mCAAyB,EAAC,CAACC,MAAMA,IAAIQ,aAAa;IACxE,MAAMC,uBAAuBC,IAAAA,gCAAgB,EAAC,CAACC;QAC3C,IAAIC,IAAAA,mCAAmB,EAAChB,MAAMiB,QAAQ,GAAG;YACrC,IAAIC,yBAAyBC;YAC5BD,CAAAA,0BAA0B,AAACC,CAAAA,kBAAkBnB,MAAMiB,QAAQ,AAAD,EAAGG,OAAO,AAAD,MAAO,QAAQF,4BAA4B,KAAK,IAAI,KAAK,IAAIA,wBAAwBG,IAAI,CAACF,iBAAiBJ;QACnL;QACA,IAAIb,cAAc,WAAW,CAACa,MAAMO,kBAAkB,IAAI;YACtDZ,kBAAkB;gBACdK;gBACAQ,MAAM;gBACNC,MAAM;YACV;QACJ;IACJ;IACA,MAAMC,gBAAgBX,IAAAA,gCAAgB,EAAC,CAACC;QACpC,IAAIW;QACHA,CAAAA,mBAAmB1B,MAAM2B,SAAS,AAAD,MAAO,QAAQD,qBAAqB,KAAK,IAAI,KAAK,IAAIA,iBAAiBL,IAAI,CAACrB,OAAOe;QACrH,IAAIA,MAAMa,GAAG,KAAKC,oBAAM,IAAI,CAACd,MAAMO,kBAAkB,IAAI;YACrDZ,kBAAkB;gBACdK;gBACAQ,MAAM;gBACNC,MAAM;YACV;YACA,qFAAqF;YACrF,gDAAgD;YAChDT,MAAMe,cAAc;QACxB;IACJ;IACA,MAAMb,WAAWc,oBAAI,CAACC,QAAQ,CAAChC,MAAMiB,QAAQ,EAAE;QAC3CgB,iBAAiB/B,cAAc;QAC/BgC,cAAc;YACV,eAAe;QACnB;QACAC,aAAa;IACjB;IACA,IAAIlB,UAAU;QACVA,SAASG,OAAO,GAAGP;IACvB;IACA,OAAO;QACHuB,YAAY;YACRnB,UAAU;YACVoB,MAAM;QACV;QACApB;QACAZ;QACAC;QACAgC,WAAWtC,MAAMsC,SAAS;QAC1BD,MAAMN,oBAAI,CAACQ,MAAM,CAACC,IAAAA,wCAAwB,EAAC,OAAO;YAC9CC,UAAU,CAAC;YACX,cAAcvC,cAAc;YAC5BwC,MAAMxC,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAG2C,YAAYhC;YACrD,GAAGX,KAAK;YACR,GAAGQ,eAAe;YAClBmB,WAAWF;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FxB,KAAK2C,IAAAA,6BAAa,EAAC3C,KAAKQ;QAC5B,IAAI;YACA0B,aAAa;QACjB;IACJ;AACJ"}

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

@@ -23,46 +23,81 @@ const dialogSurfaceClassNames = {
 };
 /**
  * Styles for the root slot
- */ const useRootResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1mol2m5", "r1vxe5sp", {
+ */ const useRootBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("r1xd7yeh", "r93c6rw", {
     r: [
-        ".r1mol2m5{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
-        ".r1mol2m5:focus{outline-style:none;}",
-        ".r1mol2m5:focus-visible{outline-style:none;}",
-        ".r1mol2m5[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
-        ".r1mol2m5[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
-        ".r1vxe5sp{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}",
-        ".r1vxe5sp:focus{outline-style:none;}",
-        ".r1vxe5sp:focus-visible{outline-style:none;}",
-        ".r1vxe5sp[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
-        ".r1vxe5sp[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
+        ".r1xd7yeh{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);opacity:0;transition-duration:var(--durationGentle);transition-property:opacity,transform,box-shadow;transition-timing-function:var(--curveDecelerateMid);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);transform:scale(0.85) translateZ(0);}",
+        ".r1xd7yeh:focus{outline-style:none;}",
+        ".r1xd7yeh:focus-visible{outline-style:none;}",
+        ".r1xd7yeh[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}",
+        ".r1xd7yeh[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}",
+        ".r93c6rw{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);opacity:0;transition-duration:var(--durationGentle);transition-property:opacity,transform,box-shadow;transition-timing-function:var(--curveDecelerateMid);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);transform:scale(0.85) translateZ(0);}",
+        ".r93c6rw:focus{outline-style:none;}",
+        ".r93c6rw:focus-visible{outline-style:none;}",
+        ".r93c6rw[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}",
+        ".r93c6rw[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"
     ],
     s: [
-        "@media screen and (max-width: 480px){.r1mol2m5{max-width:100vw;}}",
-        "@media screen and (max-width: 480px){.r1vxe5sp{max-width:100vw;}}"
+        "@media screen and (max-width: 480px){.r1xd7yeh{max-width:100vw;}}",
+        "@media screen and (max-width: 480px){.r93c6rw{max-width:100vw;}}"
     ]
 });
-const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
-    nestedDialogBackdrop: {
-        De3pzq: "f1c21dwh"
-    }
+const useRootStyles = /*#__PURE__*/ (0, _react.__styles)({
+    unmounted: {},
+    entering: {},
+    entered: {
+        E5pizo: "f10nrhrw",
+        Bz10aip: "f186d0ee",
+        abs64n: "f5p0z4x"
+    },
+    idle: {},
+    exiting: {
+        Bkqvd7p: "f1mfizis"
+    },
+    exited: {}
 }, {
     d: [
-        ".f1c21dwh{background-color:var(--colorTransparentBackground);}"
+        ".f10nrhrw{box-shadow:var(--shadow64);}",
+        ".f186d0ee{transform:scale(1) translateZ(0);}",
+        ".f5p0z4x{opacity:1;}",
+        ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"
     ]
 });
 /**
  * Styles for the backdrop slot
- */ const useBackdropResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rvs8970", "r1uj6nuu", [
-    ".rvs8970{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}",
-    ".r1uj6nuu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}"
+ */ const useBackdropBaseStyle = /*#__PURE__*/ (0, _react.__resetStyles)("raidwwn", "r17vltcu", [
+    ".raidwwn{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}",
+    ".r17vltcu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}"
 ]);
+const useBackdropStyles = /*#__PURE__*/ (0, _react.__styles)({
+    nestedDialogBackdrop: {
+        De3pzq: "f1c21dwh"
+    },
+    unmounted: {},
+    entering: {},
+    entered: {
+        abs64n: "f5p0z4x"
+    },
+    idle: {},
+    exiting: {
+        Bkqvd7p: "f1mfizis"
+    },
+    exited: {}
+}, {
+    d: [
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".f5p0z4x{opacity:1;}",
+        ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"
+    ]
+});
 const useDialogSurfaceStyles_unstable = (state)=>{
-    const surfaceResetStyles = useRootResetStyles();
-    const styles = useBackdropStyles();
-    const backdropResetStyles = useBackdropResetStyles();
-    state.root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);
-    if (state.backdrop) {
-        state.backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);
+    const { isNestedDialog, root, backdrop, transitionStatus = 'unmounted' } = state;
+    const rootBaseStyle = useRootBaseStyle();
+    const rootStyles = useRootStyles();
+    const backdropBaseStyle = useBackdropBaseStyle();
+    const backdropStyles = useBackdropStyles();
+    root.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.root, rootBaseStyle, rootStyles[transitionStatus], root.className);
+    if (backdrop) {
+        backdrop.className = (0, _react.mergeClasses)(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdropStyles[transitionStatus], backdrop.className);
     }
     return state;
 }; //# sourceMappingURL=useDialogSurfaceStyles.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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 */\nconst useRootResetStyles = /*#__PURE__*/__resetStyles(\"r1mol2m5\", \"r1vxe5sp\", {\n  r: [\".r1mol2m5{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1mol2m5:focus{outline-style:none;}\", \".r1mol2m5:focus-visible{outline-style:none;}\", \".r1mol2m5[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1mol2m5[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r1vxe5sp{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;box-shadow:var(--shadow64);background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);}\", \".r1vxe5sp:focus{outline-style:none;}\", \".r1vxe5sp:focus-visible{outline-style:none;}\", \".r1vxe5sp[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r1vxe5sp[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n  s: [\"@media screen and (max-width: 480px){.r1mol2m5{max-width:100vw;}}\", \"@media screen and (max-width: 480px){.r1vxe5sp{max-width:100vw;}}\"]\n});\nconst useBackdropStyles = /*#__PURE__*/__styles({\n  nestedDialogBackdrop: {\n    De3pzq: \"f1c21dwh\"\n  }\n}, {\n  d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropResetStyles = /*#__PURE__*/__resetStyles(\"rvs8970\", \"r1uj6nuu\", [\".rvs8970{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}\", \".r1uj6nuu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}\"]);\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n  const surfaceResetStyles = useRootResetStyles();\n  const styles = useBackdropStyles();\n  const backdropResetStyles = useBackdropResetStyles();\n  state.root.className = mergeClasses(dialogSurfaceClassNames.root, surfaceResetStyles, state.root.className);\n  if (state.backdrop) {\n    state.backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropResetStyles, state.isNestedDialog && styles.nestedDialogBackdrop, state.backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootResetStyles","__resetStyles","r","s","useBackdropStyles","__styles","nestedDialogBackdrop","De3pzq","d","useBackdropResetStyles","state","surfaceResetStyles","styles","backdropResetStyles","className","mergeClasses","isNestedDialog"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAyBAC,+BAA+B;eAA/BA;;;uBA7BqD;AAI3D,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,qBAAqB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,YAAY;IAC5EC,GAAG;QAAC;QAA0nC;QAAwC;QAAgD;QAAiK;QAAmvB;QAA0nC;QAAwC;QAAgD;QAAiK;KAAkvB;IAC/sIC,GAAG;QAAC;QAAqE;KAAoE;AAC/I;AACA,MAAMC,oBAAoB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC9CC,sBAAsB;QACpBC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;KAAiE;AACvE;AACA;;CAEC,GACD,MAAMC,yBAAyB,WAAW,GAAER,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAuG;CAAuG;AAIzR,MAAMJ,kCAAkCa,CAAAA;IAC7C,MAAMC,qBAAqBX;IAC3B,MAAMY,SAASR;IACf,MAAMS,sBAAsBJ;IAC5BC,MAAMZ,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAY,EAACnB,wBAAwBE,IAAI,EAAEa,oBAAoBD,MAAMZ,IAAI,CAACgB,SAAS;IAC1G,IAAIJ,MAAMX,QAAQ,EAAE;QAClBW,MAAMX,QAAQ,CAACe,SAAS,GAAGC,IAAAA,mBAAY,EAACnB,wBAAwBG,QAAQ,EAAEc,qBAAqBH,MAAMM,cAAc,IAAIJ,OAAON,oBAAoB,EAAEI,MAAMX,QAAQ,CAACe,SAAS;IAC9K;IACA,OAAOJ;AACT,GACA,yDAAyD"}
+{"version":3,"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { MEDIA_QUERY_BREAKPOINT_SELECTOR, 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 */\nconst useRootBaseStyle = /*#__PURE__*/__resetStyles(\"r1xd7yeh\", \"r93c6rw\", {\n  r: [\".r1xd7yeh{top:0;right:0;bottom:0;left:0;padding-top:24px;padding-right:24px;padding-bottom:24px;padding-left:24px;margin-top:auto;margin-right:auto;margin-bottom:auto;margin-left:auto;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-right-radius:var(--borderRadiusXLarge);border-bottom-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);opacity:0;transition-duration:var(--durationGentle);transition-property:opacity,transform,box-shadow;transition-timing-function:var(--curveDecelerateMid);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);transform:scale(0.85) translateZ(0);}\", \".r1xd7yeh:focus{outline-style:none;}\", \".r1xd7yeh:focus-visible{outline-style:none;}\", \".r1xd7yeh[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}\", \".r1xd7yeh[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-width:2px;border-right-width:2px;border-bottom-width:2px;border-left-width:2px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}\", \".r93c6rw{top:0;left:0;bottom:0;right:0;padding-top:24px;padding-left:24px;padding-bottom:24px;padding-right:24px;margin-top:auto;margin-left:auto;margin-bottom:auto;margin-right:auto;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;overflow-x:unset;overflow-y:unset;border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-left-radius:var(--borderRadiusXLarge);border-bottom-right-radius:var(--borderRadiusXLarge);border-top-left-radius:var(--borderRadiusXLarge);border-top-right-radius:var(--borderRadiusXLarge);contain:content;display:block;-webkit-user-select:unset;-moz-user-select:unset;-ms-user-select:unset;user-select:unset;visibility:unset;position:fixed;height:fit-content;max-width:600px;max-height:100vh;box-sizing:border-box;background-color:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);opacity:0;transition-duration:var(--durationGentle);transition-property:opacity,transform,box-shadow;transition-timing-function:var(--curveDecelerateMid);box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);transform:scale(0.85) translateZ(0);}\", \".r93c6rw:focus{outline-style:none;}\", \".r93c6rw:focus-visible{outline-style:none;}\", \".r93c6rw[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}\", \".r93c6rw[data-fui-focus-visible]::after{content:\\\"\\\";position:absolute;pointer-events:none;z-index:1;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-width:2px;border-left-width:2px;border-bottom-width:2px;border-right-width:2px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-color:var(--colorStrokeFocus2);border-left-color:var(--colorStrokeFocus2);border-bottom-color:var(--colorStrokeFocus2);border-right-color:var(--colorStrokeFocus2);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}\"],\n  s: [\"@media screen and (max-width: 480px){.r1xd7yeh{max-width:100vw;}}\", \"@media screen and (max-width: 480px){.r93c6rw{max-width:100vw;}}\"]\n});\nconst useRootStyles = /*#__PURE__*/__styles({\n  unmounted: {},\n  entering: {},\n  entered: {\n    E5pizo: \"f10nrhrw\",\n    Bz10aip: \"f186d0ee\",\n    abs64n: \"f5p0z4x\"\n  },\n  idle: {},\n  exiting: {\n    Bkqvd7p: \"f1mfizis\"\n  },\n  exited: {}\n}, {\n  d: [\".f10nrhrw{box-shadow:var(--shadow64);}\", \".f186d0ee{transform:scale(1) translateZ(0);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Styles for the backdrop slot\n */\nconst useBackdropBaseStyle = /*#__PURE__*/__resetStyles(\"raidwwn\", \"r17vltcu\", [\".raidwwn{top:0px;right:0px;bottom:0px;left:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\", \".r17vltcu{top:0px;left:0px;bottom:0px;right:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;transition-duration:var(--durationGentle);transition-timing-function:var(--curveLinear);transition-property:opacity;will-change:opacity;opacity:0;}\"]);\nconst useBackdropStyles = /*#__PURE__*/__styles({\n  nestedDialogBackdrop: {\n    De3pzq: \"f1c21dwh\"\n  },\n  unmounted: {},\n  entering: {},\n  entered: {\n    abs64n: \"f5p0z4x\"\n  },\n  idle: {},\n  exiting: {\n    Bkqvd7p: \"f1mfizis\"\n  },\n  exited: {}\n}, {\n  d: [\".f1c21dwh{background-color:var(--colorTransparentBackground);}\", \".f5p0z4x{opacity:1;}\", \".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}\"]\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */\nexport const useDialogSurfaceStyles_unstable = state => {\n  const {\n    isNestedDialog,\n    root,\n    backdrop,\n    transitionStatus = 'unmounted'\n  } = state;\n  const rootBaseStyle = useRootBaseStyle();\n  const rootStyles = useRootStyles();\n  const backdropBaseStyle = useBackdropBaseStyle();\n  const backdropStyles = useBackdropStyles();\n  root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, rootStyles[transitionStatus], root.className);\n  if (backdrop) {\n    backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdropStyles[transitionStatus], backdrop.className);\n  }\n  return state;\n};\n//# sourceMappingURL=useDialogSurfaceStyles.styles.js.map"],"names":["dialogSurfaceClassNames","useDialogSurfaceStyles_unstable","root","backdrop","useRootBaseStyle","__resetStyles","r","s","useRootStyles","__styles","unmounted","entering","entered","E5pizo","Bz10aip","abs64n","idle","exiting","Bkqvd7p","exited","d","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","mergeClasses"],"mappings":";;;;;;;;;;;IAIaA,uBAAuB;eAAvBA;;IAmDAC,+BAA+B;eAA/BA;;;uBAvDqD;AAI3D,MAAMD,0BAA0B;IACrCE,MAAM;IACNC,UAAU;AACZ;AACA;;CAEC,GACD,MAAMC,mBAAmB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,WAAW;IACzEC,GAAG;QAAC;QAA20C;QAAwC;QAAgD;QAAiK;QAAmvB;QAA00C;QAAuC;QAA+C;QAAgK;KAAivB;IAC5mJC,GAAG;QAAC;QAAqE;KAAmE;AAC9I;AACA,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,WAAW,CAAC;IACZC,UAAU,CAAC;IACXC,SAAS;QACPC,QAAQ;QACRC,SAAS;QACTC,QAAQ;IACV;IACAC,MAAM,CAAC;IACPC,SAAS;QACPC,SAAS;IACX;IACAC,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAA0C;QAAgD;QAAwB;KAAmE;AAC3L;AACA;;CAEC,GACD,MAAMC,uBAAuB,WAAW,GAAEhB,IAAAA,oBAAa,EAAC,WAAW,YAAY;IAAC;IAAyP;CAAyP;AAClkB,MAAMiB,oBAAoB,WAAW,GAAEb,IAAAA,eAAQ,EAAC;IAC9Cc,sBAAsB;QACpBC,QAAQ;IACV;IACAd,WAAW,CAAC;IACZC,UAAU,CAAC;IACXC,SAAS;QACPG,QAAQ;IACV;IACAC,MAAM,CAAC;IACPC,SAAS;QACPC,SAAS;IACX;IACAC,QAAQ,CAAC;AACX,GAAG;IACDC,GAAG;QAAC;QAAkE;QAAwB;KAAmE;AACnK;AAIO,MAAMnB,kCAAkCwB,CAAAA;IAC7C,MAAM,EACJC,cAAc,EACdxB,IAAI,EACJC,QAAQ,EACRwB,mBAAmB,WAAW,EAC/B,GAAGF;IACJ,MAAMG,gBAAgBxB;IACtB,MAAMyB,aAAarB;IACnB,MAAMsB,oBAAoBT;IAC1B,MAAMU,iBAAiBT;IACvBpB,KAAK8B,SAAS,GAAGC,IAAAA,mBAAY,EAACjC,wBAAwBE,IAAI,EAAE0B,eAAeC,UAAU,CAACF,iBAAiB,EAAEzB,KAAK8B,SAAS;IACvH,IAAI7B,UAAU;QACZA,SAAS6B,SAAS,GAAGC,IAAAA,mBAAY,EAACjC,wBAAwBG,QAAQ,EAAE2B,mBAAmBJ,kBAAkBK,eAAeR,oBAAoB,EAAEQ,cAAc,CAACJ,iBAAiB,EAAExB,SAAS6B,SAAS;IACpM;IACA,OAAOP;AACT,GACA,yDAAyD"}

package/lib-commonjs/contexts/dialogTransitionContext.js

@@ -0,0 +1,32 @@
+"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, {
+    DialogTransitionContext: function() {
+        return DialogTransitionContext;
+    },
+    DialogTransitionProvider: function() {
+        return DialogTransitionProvider;
+    },
+    useDialogTransitionContext_unstable: function() {
+        return useDialogTransitionContext_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+/**
+ * @internal
+ */ const defaultContextValue = 'unmounted';
+const DialogTransitionContext = /*#__PURE__*/ _react.createContext(undefined);
+const DialogTransitionProvider = DialogTransitionContext.Provider;
+const useDialogTransitionContext_unstable = ()=>{
+    var _React_useContext;
+    return (_React_useContext = _react.useContext(DialogTransitionContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultContextValue;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["dialogTransitionContext.js"],"sourcesContent":["import * as React from 'react';\n/**\n * @internal\n */ const defaultContextValue = 'unmounted';\n// Contexts should default to undefined\n/**\n * @internal\n */ export const DialogTransitionContext = React.createContext(undefined);\n/**\n * @internal\n */ export const DialogTransitionProvider = DialogTransitionContext.Provider;\n/**\n * @internal\n */ export const useDialogTransitionContext_unstable = ()=>{\n    var _React_useContext;\n    return (_React_useContext = React.useContext(DialogTransitionContext)) !== null && _React_useContext !== void 0 ? _React_useContext : defaultContextValue;\n};\n"],"names":["DialogTransitionContext","DialogTransitionProvider","useDialogTransitionContext_unstable","defaultContextValue","React","createContext","undefined","Provider","_React_useContext","useContext"],"mappings":";;;;;;;;;;;IAOiBA,uBAAuB;eAAvBA;;IAGAC,wBAAwB;eAAxBA;;IAGAC,mCAAmC;eAAnCA;;;;iEAbM;AACvB;;CAEC,GAAG,MAAMC,sBAAsB;AAIrB,MAAMH,wCAA0BI,OAAMC,aAAa,CAACC;AAGpD,MAAML,2BAA2BD,wBAAwBO,QAAQ;AAGjE,MAAML,sCAAsC;IACnD,IAAIM;IACJ,OAAO,AAACA,CAAAA,oBAAoBJ,OAAMK,UAAU,CAACT,wBAAuB,MAAO,QAAQQ,sBAAsB,KAAK,IAAIA,oBAAoBL;AAC1I"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-dialog",
-  "version": "9.7.9",
+  "version": "9.8.0",
   "description": "Dialog component for Fluent UI React",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -36,16 +36,17 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-utilities": "^9.15.0",
-    "@fluentui/react-jsx-runtime": "^9.0.17",
+    "@fluentui/react-utilities": "^9.15.1",
+    "@fluentui/react-jsx-runtime": "^9.0.18",
+    "react-transition-group": "^4.4.1",
     "@fluentui/keyboard-keys": "^9.0.6",
-    "@fluentui/react-context-selector": "^9.1.40",
+    "@fluentui/react-context-selector": "^9.1.41",
     "@fluentui/react-shared-contexts": "^9.10.0",
-    "@fluentui/react-aria": "^9.3.42",
+    "@fluentui/react-aria": "^9.3.43",
     "@fluentui/react-icons": "^2.0.217",
-    "@fluentui/react-tabster": "^9.13.6",
+    "@fluentui/react-tabster": "^9.14.1",
     "@fluentui/react-theme": "^9.1.14",
-    "@fluentui/react-portal": "^9.3.23",
+    "@fluentui/react-portal": "^9.3.25",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1"
   },