@fluentui/react-dialog 9.10.6 → 9.10.7

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @fluentui/react-dialog
 
-This log was last generated on Mon, 20 May 2024 12:36:31 GMT and should not be manually modified.
+This log was last generated on Thu, 23 May 2024 07:57:54 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.10.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.7)
+
+Thu, 23 May 2024 07:57:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.10.6..@fluentui/react-dialog_v9.10.7)
+
+### Patches
+
+- chore(Dialog): migrate to new motion APIs ([PR #31380](https://github.com/microsoft/fluentui/pull/31380) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+- Bump @fluentui/react-portal to v9.4.26 ([commit](https://github.com/microsoft/fluentui/commit/10e6758b203de79c53ce31ba264e137f83f50ff4) by beachball)
+
 ## [9.10.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-dialog_v9.10.6)
 
-Mon, 20 May 2024 12:36:31 GMT 
+Mon, 20 May 2024 12:44:55 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-dialog_v9.10.5..@fluentui/react-dialog_v9.10.6)
 
 ### Patches

package/dist/index.d.ts

@@ -117,7 +117,7 @@ export declare type DialogContextValue = {
     requestOpenChange: (data: DialogOpenChangeData) => void;
 } & Partial<ReturnType<typeof useModalAttributes>>;
 
-declare type DialogContextValues = {
+export declare type DialogContextValues = {
     dialog: DialogContextValue;
     /**
      * dialogSurface context is provided by Dialog as false
@@ -256,9 +256,12 @@ export declare type DialogSurfaceSlots = {
  * State used in rendering DialogSurface
  */
 export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & Pick<DialogContextValue, 'isNestedDialog'> & Pick<PortalProps, 'mountNode'> & {
+    open?: boolean;
     /**
      * Transition status for animation.
      * In test environment, this is always `undefined`.
+     *
+     * @deprecated Will be always `undefined`.
      */
     transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';
 };
@@ -431,6 +434,8 @@ export declare const useDialogContentStyles_unstable: (state: DialogContentState
 
 export declare const useDialogContext_unstable: <T>(selector: ContextSelector<DialogContextValue, T>) => T;
 
+export declare function useDialogContextValues_unstable(state: DialogState): DialogContextValues;
+
 /**
  * Create the state required to render DialogSurface.
  *

package/lib/components/Dialog/index.js

@@ -2,3 +2,4 @@ export * from './Dialog';
 export * from './Dialog.types';
 export * from './renderDialog';
 export * from './useDialog';
+export * from './useDialogContextValues';

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

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,cAAc"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\nexport * from './useDialogContextValues';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,cAAc;AAC5B,cAAc,2BAA2B"}

package/lib/components/Dialog/renderDialog.js

@@ -1,32 +1,22 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
-import { Transition } from 'react-transition-group';
+import * as React from 'react';
 import { DialogProvider, DialogSurfaceProvider } from '../../contexts';
-import { DialogTransitionProvider } from '../../contexts/dialogTransitionContext';
+import { DialogSurfaceMotion } from '../DialogSurfaceMotion';
 /**
  * Render the final JSX of Dialog
  */ export const renderDialog_unstable = (state, contextValues)=>{
-    const { content, trigger } = state;
+    const { content, open, trigger } = state;
     return /*#__PURE__*/ _jsx(DialogProvider, {
         value: contextValues.dialog,
         children: /*#__PURE__*/ _jsxs(DialogSurfaceProvider, {
             value: contextValues.dialogSurface,
             children: [
                 trigger,
-                process.env.NODE_ENV === 'test' ? state.open && /*#__PURE__*/ _jsx(DialogTransitionProvider, {
-                    value: undefined,
-                    children: content
-                }) : /*#__PURE__*/ _jsx(Transition, {
-                    mountOnEnter: true,
-                    unmountOnExit: true,
-                    in: state.open,
-                    nodeRef: state.dialogRef,
+                content && /*#__PURE__*/ _jsx(DialogSurfaceMotion, {
                     appear: true,
-                    // FIXME: this should not be hardcoded tokens.durationGentle
-                    timeout: 250,
-                    children: (status)=>/*#__PURE__*/ _jsx(DialogTransitionProvider, {
-                            value: status,
-                            children: content
-                        })
+                    visible: open,
+                    unmountOnExit: true,
+                    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 { 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        {process.env.NODE_ENV === 'test' ? (\n          state.open && <DialogTransitionProvider value={undefined}>{content}</DialogTransitionProvider>\n        ) : (\n          <Transition\n            mountOnEnter\n            unmountOnExit\n            in={state.open}\n            nodeRef={state.dialogRef}\n            appear={true}\n            // FIXME: this should not be hardcoded tokens.durationGentle\n            timeout={250}\n          >\n            {status => <DialogTransitionProvider value={status}>{content}</DialogTransitionProvider>}\n          </Transition>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["Transition","DialogProvider","DialogSurfaceProvider","DialogTransitionProvider","renderDialog_unstable","state","contextValues","content","trigger","value","dialog","dialogSurface","process","env","NODE_ENV","open","undefined","mountOnEnter","unmountOnExit","in","nodeRef","dialogRef","appear","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;gBACAI,QAAQC,GAAG,CAACC,QAAQ,KAAK,SACxBT,MAAMU,IAAI,kBAAI,KAACZ;oBAAyBM,OAAOO;8BAAYT;mCAE3D,KAACP;oBACCiB,YAAY;oBACZC,aAAa;oBACbC,IAAId,MAAMU,IAAI;oBACdK,SAASf,MAAMgB,SAAS;oBACxBC,QAAQ;oBACR,4DAA4D;oBAC5DC,SAAS;8BAERC,CAAAA,uBAAU,KAACrB;4BAAyBM,OAAOe;sCAASjB;;;;;;AAMjE,EAAE"}
+{"version":3,"sources":["renderDialog.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport * as React from 'react';\n\nimport { DialogProvider, DialogSurfaceProvider } from '../../contexts';\nimport { DialogSurfaceMotion } from '../DialogSurfaceMotion';\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, open, trigger } = state;\n\n  return (\n    <DialogProvider value={contextValues.dialog}>\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        {trigger}\n        {content && (\n          <DialogSurfaceMotion appear visible={open} unmountOnExit>\n            {/* Casting here as content should be equivalent to <DialogSurface/> */}\n            {/* FIXME: content should not be ReactNode it should be ReactElement instead. */}\n            {content as React.ReactElement}\n          </DialogSurfaceMotion>\n        )}\n      </DialogSurfaceProvider>\n    </DialogProvider>\n  );\n};\n"],"names":["React","DialogProvider","DialogSurfaceProvider","DialogSurfaceMotion","renderDialog_unstable","state","contextValues","content","open","trigger","value","dialog","dialogSurface","appear","visible","unmountOnExit"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,EAAEC,qBAAqB,QAAQ,iBAAiB;AACvE,SAASC,mBAAmB,QAAQ,yBAAyB;AAG7D;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAoBC;IACxD,MAAM,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAE,GAAGJ;IAEnC,qBACE,KAACJ;QAAeS,OAAOJ,cAAcK,MAAM;kBACzC,cAAA,MAACT;YAAsBQ,OAAOJ,cAAcM,aAAa;;gBACtDH;gBACAF,yBACC,KAACJ;oBAAoBU,MAAM;oBAACC,SAASN;oBAAMO,aAAa;8BAGrDR;;;;;AAMb,EAAE"}

package/lib/components/DialogBackdropMotion.js

@@ -0,0 +1,23 @@
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motions-preview';
+const keyframes = [
+    {
+        opacity: 0
+    },
+    {
+        opacity: 1
+    }
+];
+export const DialogBackdropMotion = createPresenceComponent({
+    enter: {
+        keyframes,
+        easing: motionTokens.curveLinear,
+        duration: motionTokens.durationGentle
+    },
+    exit: {
+        keyframes: [
+            ...keyframes
+        ].reverse(),
+        easing: motionTokens.curveLinear,
+        duration: motionTokens.durationGentle
+    }
+});

package/lib/components/DialogBackdropMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DialogBackdropMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motions-preview';\n\nconst keyframes = [{ opacity: 0 }, { opacity: 1 }];\n\nexport const DialogBackdropMotion = createPresenceComponent({\n  enter: {\n    keyframes,\n    easing: motionTokens.curveLinear,\n    duration: motionTokens.durationGentle,\n  },\n  exit: {\n    keyframes: [...keyframes].reverse(),\n    easing: motionTokens.curveLinear,\n    duration: motionTokens.durationGentle,\n  },\n});\n"],"names":["createPresenceComponent","motionTokens","keyframes","opacity","DialogBackdropMotion","enter","easing","curveLinear","duration","durationGentle","exit","reverse"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,kCAAkC;AAExF,MAAMC,YAAY;IAAC;QAAEC,SAAS;IAAE;IAAG;QAAEA,SAAS;IAAE;CAAE;AAElD,OAAO,MAAMC,uBAAuBJ,wBAAwB;IAC1DK,OAAO;QACLH;QACAI,QAAQL,aAAaM,WAAW;QAChCC,UAAUP,aAAaQ,cAAc;IACvC;IACAC,MAAM;QACJR,WAAW;eAAIA;SAAU,CAACS,OAAO;QACjCL,QAAQL,aAAaM,WAAW;QAChCC,UAAUP,aAAaQ,cAAc;IACvC;AACF,GAAG"}

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  Pick<DialogContextValue, 'isNestedDialog'> &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n  };\n"],"names":[],"mappings":"AAAA,WA0CI"}
+{"version":3,"sources":["DialogSurface.types.ts"],"sourcesContent":["import type { PortalProps } from '@fluentui/react-portal';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nimport { DialogContextValue, DialogSurfaceContextValue } from '../../contexts';\n\nexport type DialogSurfaceSlots = {\n  /**\n   * Dimmed background of dialog.\n   * The default backdrop is rendered as a `<div>` with styling.\n   * This slot expects a `<div>` element which will replace the default backdrop.\n   * The backdrop should have `aria-hidden=\"true\"`.\n   *\n   */\n  backdrop?: Slot<'div'>;\n  root: Slot<'div'>;\n};\n\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    open?: boolean;\n\n    /**\n     * Transition status for animation.\n     * In test environment, this is always `undefined`.\n     *\n     * @deprecated Will be always `undefined`.\n     */\n    transitionStatus?: 'entering' | 'entered' | 'idle' | 'exiting' | 'exited' | 'unmounted';\n  };\n"],"names":[],"mappings":"AAAA,WA+CI"}

package/lib/components/DialogSurface/renderDialogSurface.js

@@ -1,7 +1,8 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { Portal } from '@fluentui/react-portal';
 import { assertSlots } from '@fluentui/react-utilities';
 import { DialogSurfaceProvider } from '../../contexts';
-import { Portal } from '@fluentui/react-portal';
+import { DialogBackdropMotion } from '../DialogBackdropMotion';
 /**
  * Render the final JSX of DialogSurface
  */ export const renderDialogSurface_unstable = (state, contextValues)=>{
@@ -9,7 +10,11 @@ import { Portal } from '@fluentui/react-portal';
     return /*#__PURE__*/ _jsxs(Portal, {
         mountNode: state.mountNode,
         children: [
-            state.backdrop && /*#__PURE__*/ _jsx(state.backdrop, {}),
+            state.backdrop && /*#__PURE__*/ _jsx(DialogBackdropMotion, {
+                appear: true,
+                visible: state.open,
+                children: /*#__PURE__*/ _jsx(state.backdrop, {})
+            }),
             /*#__PURE__*/ _jsx(DialogSurfaceProvider, {
                 value: contextValues.dialogSurface,
                 children: /*#__PURE__*/ _jsx(state.root, {})

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

@@ -1 +1 @@
-{"version":3,"sources":["renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\nimport { DialogSurfaceProvider } from '../../contexts';\nimport { Portal } from '@fluentui/react-portal';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n  assertSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      {state.backdrop && <state.backdrop />}\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        <state.root />\n      </DialogSurfaceProvider>\n    </Portal>\n  );\n};\n"],"names":["assertSlots","DialogSurfaceProvider","Portal","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","value","dialogSurface","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEL,YAAgCI;IAEhC,qBACE,MAACF;QAAOI,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;0BAClC,KAACN;gBAAsBO,OAAOH,cAAcI,aAAa;0BACvD,cAAA,KAACL,MAAMM,IAAI;;;;AAInB,EAAE"}
+{"version":3,"sources":["renderDialogSurface.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { Portal } from '@fluentui/react-portal';\nimport { assertSlots } from '@fluentui/react-utilities';\n\nimport { DialogSurfaceProvider } from '../../contexts';\nimport { DialogBackdropMotion } from '../DialogBackdropMotion';\nimport type { DialogSurfaceState, DialogSurfaceSlots, DialogSurfaceContextValues } from './DialogSurface.types';\n\n/**\n * Render the final JSX of DialogSurface\n */\nexport const renderDialogSurface_unstable = (state: DialogSurfaceState, contextValues: DialogSurfaceContextValues) => {\n  assertSlots<DialogSurfaceSlots>(state);\n\n  return (\n    <Portal mountNode={state.mountNode}>\n      {state.backdrop && (\n        <DialogBackdropMotion appear visible={state.open}>\n          <state.backdrop />\n        </DialogBackdropMotion>\n      )}\n      <DialogSurfaceProvider value={contextValues.dialogSurface}>\n        <state.root />\n      </DialogSurfaceProvider>\n    </Portal>\n  );\n};\n"],"names":["Portal","assertSlots","DialogSurfaceProvider","DialogBackdropMotion","renderDialogSurface_unstable","state","contextValues","mountNode","backdrop","appear","visible","open","value","dialogSurface","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,MAAM,QAAQ,yBAAyB;AAChD,SAASC,WAAW,QAAQ,4BAA4B;AAExD,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,oBAAoB,QAAQ,0BAA0B;AAG/D;;CAEC,GACD,OAAO,MAAMC,+BAA+B,CAACC,OAA2BC;IACtEL,YAAgCI;IAEhC,qBACE,MAACL;QAAOO,WAAWF,MAAME,SAAS;;YAC/BF,MAAMG,QAAQ,kBACb,KAACL;gBAAqBM,MAAM;gBAACC,SAASL,MAAMM,IAAI;0BAC9C,cAAA,KAACN,MAAMG,QAAQ;;0BAGnB,KAACN;gBAAsBU,OAAON,cAAcO,aAAa;0BACvD,cAAA,KAACR,MAAMS,IAAI;;;;AAInB,EAAE"}

package/lib/components/DialogSurface/useDialogSurface.js

@@ -1,8 +1,7 @@
-import * as React from 'react';
+import { Escape } from '@fluentui/keyboard-keys';
 import { useEventCallback, useMergedRefs, isResolvedShorthand, slot, getIntrinsicElementProps, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
 import { useDialogContext_unstable } from '../../contexts';
-import { Escape } from '@fluentui/keyboard-keys';
-import { useDialogTransitionContext_unstable } from '../../contexts/dialogTransitionContext';
 import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
 /**
  * Create the state required to render DialogSurface.
@@ -15,7 +14,6 @@ import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
  */ 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 requestOpenChange = useDialogContext_unstable((ctx)=>ctx.requestOpenChange);
@@ -59,32 +57,28 @@ import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
         backdrop.onClick = handledBackdropClick;
     }
     const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();
-    const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');
     useIsomorphicLayoutEffect(()=>{
-        if (isNestedDialog) {
+        if (isNestedDialog || modalType === 'non-modal') {
             return;
         }
-        if (open && isBodyScrollLocked && transitionStatus === 'entering') {
-            disableBodyScroll();
-        } else if (transitionStatus === 'exited') {
+        disableBodyScroll();
+        return ()=>{
             enableBodyScroll();
-        }
+        };
     }, [
-        disableBodyScroll,
         enableBodyScroll,
-        isBodyScrollLocked,
         isNestedDialog,
-        open,
-        transitionStatus
+        disableBodyScroll,
+        modalType
     ]);
     return {
         components: {
             backdrop: 'div',
             root: 'div'
         },
+        open,
         backdrop,
         isNestedDialog,
-        transitionStatus,
         mountNode: props.mountNode,
         root: slot.always(getIntrinsicElementProps('div', {
             tabIndex: -1,
@@ -100,6 +94,8 @@ import { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';
             ref: useMergedRefs(ref, dialogRef)
         }), {
             elementType: 'div'
-        })
+        }),
+        // Deprecated properties
+        transitionStatus: undefined
     };
 };

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  useIsomorphicLayoutEffect,\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';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\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  const open = useDialogContext_unstable(ctx => ctx.open);\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\n  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n  const isBodyScrollLocked = Boolean(open && modalType !== 'non-modal');\n  useIsomorphicLayoutEffect(() => {\n    if (isNestedDialog) {\n      return;\n    }\n    if (open && isBodyScrollLocked && transitionStatus === 'entering') {\n      disableBodyScroll();\n    } else if (transitionStatus === 'exited') {\n      enableBodyScroll();\n    }\n  }, [disableBodyScroll, enableBodyScroll, isBodyScrollLocked, isNestedDialog, open, transitionStatus]);\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","useIsomorphicLayoutEffect","useDialogContext_unstable","Escape","useDialogTransitionContext_unstable","useDisableBodyScroll","useDialogSurface_unstable","props","ref","modalType","ctx","isNestedDialog","transitionStatus","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","disableBodyScroll","enableBodyScroll","isBodyScrollLocked","Boolean","components","root","mountNode","always","tabIndex","role","undefined"],"mappings":"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"}
+{"version":3,"sources":["useDialogSurface.ts"],"sourcesContent":["import { Escape } from '@fluentui/keyboard-keys';\nimport {\n  useEventCallback,\n  useMergedRefs,\n  isResolvedShorthand,\n  slot,\n  getIntrinsicElementProps,\n  useIsomorphicLayoutEffect,\n} from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useDialogContext_unstable } from '../../contexts';\nimport { useDisableBodyScroll } from '../../utils/useDisableBodyScroll';\nimport type { DialogSurfaceElement, DialogSurfaceProps, DialogSurfaceState } from './DialogSurface.types';\n\n/**\n * Create the state required to render DialogSurface.\n *\n * The returned state can be modified with hooks such as useDialogSurfaceStyles_unstable,\n * before being passed to renderDialogSurface_unstable.\n *\n * @param props - props from this instance of DialogSurface\n * @param ref - reference to root HTMLElement of DialogSurface\n */\nexport const useDialogSurface_unstable = (\n  props: DialogSurfaceProps,\n  ref: React.Ref<DialogSurfaceElement>,\n): DialogSurfaceState => {\n  const modalType = useDialogContext_unstable(ctx => ctx.modalType);\n  const isNestedDialog = useDialogContext_unstable(ctx => ctx.isNestedDialog);\n\n  const modalAttributes = useDialogContext_unstable(ctx => ctx.modalAttributes);\n  const dialogRef = useDialogContext_unstable(ctx => ctx.dialogRef);\n  const requestOpenChange = useDialogContext_unstable(ctx => ctx.requestOpenChange);\n  const dialogTitleID = useDialogContext_unstable(ctx => ctx.dialogTitleId);\n  const open = useDialogContext_unstable(ctx => ctx.open);\n\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\n  const { disableBodyScroll, enableBodyScroll } = useDisableBodyScroll();\n\n  useIsomorphicLayoutEffect(() => {\n    if (isNestedDialog || modalType === 'non-modal') {\n      return;\n    }\n\n    disableBodyScroll();\n\n    return () => {\n      enableBodyScroll();\n    };\n  }, [enableBodyScroll, isNestedDialog, disableBodyScroll, modalType]);\n\n  return {\n    components: { backdrop: 'div', root: 'div' },\n    open,\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    // Deprecated properties\n    transitionStatus: undefined,\n  };\n};\n"],"names":["Escape","useEventCallback","useMergedRefs","isResolvedShorthand","slot","getIntrinsicElementProps","useIsomorphicLayoutEffect","React","useDialogContext_unstable","useDisableBodyScroll","useDialogSurface_unstable","props","ref","modalType","ctx","isNestedDialog","modalAttributes","dialogRef","requestOpenChange","dialogTitleID","dialogTitleId","open","handledBackdropClick","event","backdrop","onClick","isDefaultPrevented","type","handleKeyDown","onKeyDown","key","preventDefault","optional","renderByDefault","defaultProps","elementType","disableBodyScroll","enableBodyScroll","components","root","mountNode","always","tabIndex","role","undefined","transitionStatus"],"mappings":"AAAA,SAASA,MAAM,QAAQ,0BAA0B;AACjD,SACEC,gBAAgB,EAChBC,aAAa,EACbC,mBAAmB,EACnBC,IAAI,EACJC,wBAAwB,EACxBC,yBAAyB,QACpB,4BAA4B;AACnC,YAAYC,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,iBAAiB;AAC3D,SAASC,oBAAoB,QAAQ,mCAAmC;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,4BAA4B,CACvCC,OACAC;IAEA,MAAMC,YAAYL,0BAA0BM,CAAAA,MAAOA,IAAID,SAAS;IAChE,MAAME,iBAAiBP,0BAA0BM,CAAAA,MAAOA,IAAIC,cAAc;IAE1E,MAAMC,kBAAkBR,0BAA0BM,CAAAA,MAAOA,IAAIE,eAAe;IAC5E,MAAMC,YAAYT,0BAA0BM,CAAAA,MAAOA,IAAIG,SAAS;IAChE,MAAMC,oBAAoBV,0BAA0BM,CAAAA,MAAOA,IAAII,iBAAiB;IAChF,MAAMC,gBAAgBX,0BAA0BM,CAAAA,MAAOA,IAAIM,aAAa;IACxE,MAAMC,OAAOb,0BAA0BM,CAAAA,MAAOA,IAAIO,IAAI;IAEtD,MAAMC,uBAAuBrB,iBAAiB,CAACsB;QAC7C,IAAIpB,oBAAoBQ,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;YACxDR,kBAAkB;gBAChBK;gBACAF,MAAM;gBACNM,MAAM;YACR;QACF;IACF;IAEA,MAAMC,gBAAgB3B,iBAAiB,CAACsB;YACtCZ;SAAAA,mBAAAA,MAAMkB,SAAS,cAAflB,uCAAAA,sBAAAA,OAAkBY;QAElB,IAAIA,MAAMO,GAAG,KAAK9B,UAAU,CAACuB,MAAMG,kBAAkB,IAAI;YACvDR,kBAAkB;gBAChBK;gBACAF,MAAM;gBACNM,MAAM;YACR;YACA,qFAAqF;YACrF,gDAAgD;YAChDJ,MAAMQ,cAAc;QACtB;IACF;IAEA,MAAMP,WAAWpB,KAAK4B,QAAQ,CAACrB,MAAMa,QAAQ,EAAE;QAC7CS,iBAAiBpB,cAAc;QAC/BqB,cAAc;YACZ,eAAe;QACjB;QACAC,aAAa;IACf;IACA,IAAIX,UAAU;QACZA,SAASC,OAAO,GAAGH;IACrB;IAEA,MAAM,EAAEc,iBAAiB,EAAEC,gBAAgB,EAAE,GAAG5B;IAEhDH,0BAA0B;QACxB,IAAIS,kBAAkBF,cAAc,aAAa;YAC/C;QACF;QAEAuB;QAEA,OAAO;YACLC;QACF;IACF,GAAG;QAACA;QAAkBtB;QAAgBqB;QAAmBvB;KAAU;IAEnE,OAAO;QACLyB,YAAY;YAAEd,UAAU;YAAOe,MAAM;QAAM;QAC3ClB;QACAG;QACAT;QACAyB,WAAW7B,MAAM6B,SAAS;QAC1BD,MAAMnC,KAAKqC,MAAM,CACfpC,yBAAyB,OAAO;YAC9BqC,UAAU,CAAC;YACX,cAAc7B,cAAc;YAC5B8B,MAAM9B,cAAc,UAAU,gBAAgB;YAC9C,mBAAmBF,KAAK,CAAC,aAAa,GAAGiC,YAAYzB;YACrD,GAAGR,KAAK;YACR,GAAGK,eAAe;YAClBa,WAAWD;YACX,SAAS;YACT,6FAA6F;YAC7F,4FAA4F;YAC5FhB,KAAKV,cAAcU,KAAKK;QAC1B,IACA;YAAEkB,aAAa;QAAM;QAGvB,wBAAwB;QACxBU,kBAAkBD;IACpB;AACF,EAAE"}

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

@@ -9,85 +9,17 @@ export const dialogSurfaceClassNames = {
 /**
  * Styles for the root slot
  */
-const useRootBaseStyle = /*#__PURE__*/__resetStyles("rhzkxut", "r1dhpx9", {
-  r: [".rhzkxut{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-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);}", ".rhzkxut:focus{outline-style:none;}", ".rhzkxut:focus-visible{outline-style:none;}", ".rhzkxut[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".rhzkxut[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);}", ".r1dhpx9{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-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);}", ".r1dhpx9:focus{outline-style:none;}", ".r1dhpx9:focus-visible{outline-style:none;}", ".r1dhpx9[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r1dhpx9[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 (forced-colors: active){.rhzkxut[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media screen and (max-width: 480px){.rhzkxut{max-width:100vw;}}", "@media screen and (max-height: 359px){.rhzkxut{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.r1dhpx9[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@media screen and (max-width: 480px){.r1dhpx9{max-width:100vw;}}", "@media screen and (max-height: 359px){.r1dhpx9{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"]
+const useRootBaseStyle = /*#__PURE__*/__resetStyles("r1svjbtt", "r131yuoq", {
+  r: [".r1svjbtt{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-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);}", ".r1svjbtt:focus{outline-style:none;}", ".r1svjbtt:focus-visible{outline-style:none;}", ".r1svjbtt[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r1svjbtt[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".r131yuoq{inset:0;padding:24px;margin:auto;border-style:none;overflow:unset;border:1px solid var(--colorTransparentStroke);border-radius:var(--borderRadiusXLarge);display:block;-webkit-user-select:unset;-moz-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);}", ".r131yuoq:focus{outline-style:none;}", ".r131yuoq:focus-visible{outline-style:none;}", ".r131yuoq[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r131yuoq[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.r1svjbtt[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media screen and (max-width: 480px){.r1svjbtt{max-width:100vw;}}", "@media screen and (max-height: 359px){.r1svjbtt{overflow-y:auto;padding-right:calc(24px - 4px);border-right-width:4px;border-top-width:4px;border-bottom-width:4px;}}", "@media (forced-colors: active){.r131yuoq[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}", "@media screen and (max-width: 480px){.r131yuoq{max-width:100vw;}}", "@media screen and (max-height: 359px){.r131yuoq{overflow-y:auto;padding-left:calc(24px - 4px);border-left-width:4px;border-top-width:4px;border-bottom-width:4px;}}"]
 });
-const rootVisible = {
-  boxShadow: tokens.shadow64,
-  transform: 'scale(1) translateZ(0)',
-  opacity: 1
-};
-const rootWhenAnimating = {
-  transitionDuration: tokens.durationGentle,
-  transitionProperty: 'opacity, transform, box-shadow',
-  // // FIXME: https://github.com/microsoft/fluentui/issues/29473
-  transitionTimingFunction: tokens.curveDecelerateMid
-};
-const useRootStyles = /*#__PURE__*/__styles({
-  animated: {
-    abs64n: "fk73vx1",
-    E5pizo: "f1yzz98r",
-    Bz10aip: "f15ofi6c"
-  },
-  "static": {
-    E5pizo: "f10nrhrw"
-  },
-  unmounted: {},
-  entering: {
-    B3o57yi: "fc397y7",
-    Bmy1vo4: "f1b86uth",
-    Bkqvd7p: "f18ad807",
-    E5pizo: "f10nrhrw",
-    Bz10aip: "f186d0ee",
-    abs64n: "f5p0z4x"
-  },
-  entered: {
-    E5pizo: "f10nrhrw",
-    Bz10aip: "f186d0ee",
-    abs64n: "f5p0z4x"
-  },
-  idle: {
-    E5pizo: "f10nrhrw",
-    Bz10aip: "f186d0ee",
-    abs64n: "f5p0z4x"
-  },
-  exiting: {
-    B3o57yi: "fc397y7",
-    Bmy1vo4: "f1b86uth",
-    Bkqvd7p: "f1mfizis"
-  },
-  exited: {}
-}, {
-  d: [".fk73vx1{opacity:0;}", ".f1yzz98r{box-shadow:0px 0px 0px 0px rgba(0, 0, 0, 0.1);}", ".f15ofi6c{transform:scale(0.85) translateZ(0);}", ".f10nrhrw{box-shadow:var(--shadow64);}", ".fc397y7{transition-duration:var(--durationGentle);}", ".f1b86uth{transition-property:opacity,transform,box-shadow;}", ".f18ad807{transition-timing-function:var(--curveDecelerateMid);}", ".f186d0ee{transform:scale(1) translateZ(0);}", ".f5p0z4x{opacity:1;}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"]
-});
-/**
- * Styles for the backdrop slot
- */
-const backdropVisible = {
-  opacity: 1
-};
-const useBackdropBaseStyle = /*#__PURE__*/__resetStyles("r19ug08i", null, [".r19ug08i{inset: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 useBackdropBaseStyle = /*#__PURE__*/__resetStyles("rsptlh5", null, [".rsptlh5{inset:0px;background-color:rgba(0, 0, 0, 0.4);position:fixed;}"]);
 const useBackdropStyles = /*#__PURE__*/__styles({
   nestedDialogBackdrop: {
     De3pzq: "f1c21dwh"
-  },
-  unmounted: {},
-  entering: {
-    abs64n: "f5p0z4x"
-  },
-  entered: {
-    abs64n: "f5p0z4x"
-  },
-  idle: {
-    abs64n: "f5p0z4x"
-  },
-  exiting: {
-    Bkqvd7p: "f1mfizis"
-  },
-  exited: {}
+  }
 }, {
-  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f5p0z4x{opacity:1;}", ".f1mfizis{transition-timing-function:var(--curveAccelerateMin);}"]
+  d: [".f1c21dwh{background-color:var(--colorTransparentBackground);}"]
 });
 /**
  * Apply styling to the DialogSurface slots based on the state
@@ -96,16 +28,14 @@ export const useDialogSurfaceStyles_unstable = state => {
   const {
     isNestedDialog,
     root,
-    backdrop,
-    transitionStatus
+    backdrop
   } = state;
   const rootBaseStyle = useRootBaseStyle();
-  const rootStyles = useRootStyles();
   const backdropBaseStyle = useBackdropBaseStyle();
   const backdropStyles = useBackdropStyles();
-  root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);
+  root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);
   if (backdrop) {
-    backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);
+    backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdrop.className);
   }
   return state;
 };

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

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","rootVisible","boxShadow","shadow64","transform","opacity","rootWhenAnimating","transitionDuration","durationGentle","transitionProperty","transitionTimingFunction","curveDecelerateMid","useRootStyles","animated","abs64n","E5pizo","Bz10aip","unmounted","entering","B3o57yi","Bmy1vo4","Bkqvd7p","entered","idle","exiting","exited","d","backdropVisible","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","useDialogSurfaceStyles_unstable","state","isNestedDialog","transitionStatus","rootBaseStyle","rootStyles","backdropBaseStyle","backdropStyles","className","static"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n    root: 'fui-DialogSurface',\n    backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    inset: 0,\n    padding: SURFACE_PADDING,\n    margin: 'auto',\n    borderStyle: 'none',\n    overflow: 'unset',\n    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    },\n    [MEDIA_QUERY_SHORT_SCREEN]: {\n        overflowY: 'auto',\n        // We need to offset the scrollbar by adding transparent borders otherwise\n        // it conflits with the border radius.\n        paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n        borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n    }\n});\nconst rootVisible = {\n    boxShadow: tokens.shadow64,\n    transform: 'scale(1) translateZ(0)',\n    opacity: 1\n};\nconst rootWhenAnimating = {\n    transitionDuration: tokens.durationGentle,\n    transitionProperty: 'opacity, transform, box-shadow',\n    // // FIXME: https://github.com/microsoft/fluentui/issues/29473\n    transitionTimingFunction: tokens.curveDecelerateMid\n};\nconst useRootStyles = makeStyles({\n    animated: {\n        // initial style before animation:\n        opacity: 0,\n        boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',\n        transform: 'scale(0.85) translateZ(0)'\n    },\n    static: {\n        boxShadow: tokens.shadow64\n    },\n    unmounted: {},\n    entering: {\n        ...rootWhenAnimating,\n        ...rootVisible\n    },\n    entered: rootVisible,\n    idle: rootVisible,\n    exiting: {\n        ...rootWhenAnimating,\n        transitionTimingFunction: tokens.curveAccelerateMin\n    },\n    exited: {}\n});\n/**\n * Styles for the backdrop slot\n */ const backdropVisible = {\n    opacity: 1\n};\nconst useBackdropBaseStyle = makeResetStyles({\n    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: backdropVisible,\n    entered: backdropVisible,\n    idle: backdropVisible,\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 } = state;\n    const rootBaseStyle = useRootBaseStyle();\n    const rootStyles = useRootStyles();\n    const backdropBaseStyle = useBackdropBaseStyle();\n    const backdropStyles = useBackdropStyles();\n    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, transitionStatus ? rootStyles.animated : rootStyles.static, transitionStatus && rootStyles[transitionStatus], root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, transitionStatus && backdropStyles[transitionStatus], backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kCAAkC,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACrK,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CA+B5B,CAAC;AACF,MAAMC,WAAW,GAAG;EAChBC,SAAS,EAAEd,MAAM,CAACe,QAAQ;EAC1BC,SAAS,EAAE,wBAAwB;EACnCC,OAAO,EAAE;AACb,CAAC;AACD,MAAMC,iBAAiB,GAAG;EACtBC,kBAAkB,EAAEnB,MAAM,CAACoB,cAAc;EACzCC,kBAAkB,EAAE,gCAAgC;EACpD;EACAC,wBAAwB,EAAEtB,MAAM,CAACuB;AACrC,CAAC;AACD,MAAMC,aAAa,gBAAG1B,QAAA;EAAA2B,QAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAA;IAAAD,MAAA;EAAA;EAAAE,SAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAN,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAQ,OAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAS,IAAA;IAAAR,MAAA;IAAAC,OAAA;IAAAF,MAAA;EAAA;EAAAU,OAAA;IAAAL,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAI,MAAA;AAAA;EAAAC,CAAA;AAAA,CAsBrB,CAAC;AACF;AACA;AACA;AAAI,MAAMC,eAAe,GAAG;EACxBtB,OAAO,EAAE;AACb,CAAC;AACD,MAAMuB,oBAAoB,gBAAG3C,aAAA,iPAU5B,CAAC;AACF,MAAM4C,iBAAiB,gBAAG3C,QAAA;EAAA4C,oBAAA;IAAAC,MAAA;EAAA;EAAAd,SAAA;EAAAC,QAAA;IAAAJ,MAAA;EAAA;EAAAQ,OAAA;IAAAR,MAAA;EAAA;EAAAS,IAAA;IAAAT,MAAA;EAAA;EAAAU,OAAA;IAAAH,OAAA;EAAA;EAAAI,MAAA;AAAA;EAAAC,CAAA;AAAA,CAYzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMM,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC,cAAc;IAAEtC,IAAI;IAAEC,QAAQ;IAAEsC;EAAiB,CAAC,GAAGF,KAAK;EAClE,MAAMG,aAAa,GAAGtC,gBAAgB,CAAC,CAAC;EACxC,MAAMuC,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,iBAAiB,GAAGV,oBAAoB,CAAC,CAAC;EAChD,MAAMW,cAAc,GAAGV,iBAAiB,CAAC,CAAC;EAC1CjC,IAAI,CAAC4C,SAAS,GAAGrD,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEwC,aAAa,EAAED,gBAAgB,GAAGE,UAAU,CAACxB,QAAQ,GAAGwB,UAAU,CAACI,MAAM,EAAEN,gBAAgB,IAAIE,UAAU,CAACF,gBAAgB,CAAC,EAAEvC,IAAI,CAAC4C,SAAS,CAAC;EACxM,IAAI3C,QAAQ,EAAE;IACVA,QAAQ,CAAC2C,SAAS,GAAGrD,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEyC,iBAAiB,EAAEJ,cAAc,IAAIK,cAAc,CAACT,oBAAoB,EAAEK,gBAAgB,IAAII,cAAc,CAACJ,gBAAgB,CAAC,EAAEtC,QAAQ,CAAC2C,SAAS,CAAC;EAC3N;EACA,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createFocusOutlineStyle","FULLSCREEN_DIALOG_SCROLLBAR_OFFSET","MEDIA_QUERY_BREAKPOINT_SELECTOR","MEDIA_QUERY_SHORT_SCREEN","SURFACE_BORDER_WIDTH","SURFACE_PADDING","dialogSurfaceClassNames","root","backdrop","useRootBaseStyle","r","s","useBackdropBaseStyle","useBackdropStyles","nestedDialogBackdrop","De3pzq","d","useDialogSurfaceStyles_unstable","state","isNestedDialog","rootBaseStyle","backdropBaseStyle","backdropStyles","className"],"sources":["useDialogSurfaceStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { FULLSCREEN_DIALOG_SCROLLBAR_OFFSET, MEDIA_QUERY_BREAKPOINT_SELECTOR, MEDIA_QUERY_SHORT_SCREEN, SURFACE_BORDER_WIDTH, SURFACE_PADDING } from '../../contexts';\nexport const dialogSurfaceClassNames = {\n    root: 'fui-DialogSurface',\n    backdrop: 'fui-DialogSurface__backdrop'\n};\n/**\n * Styles for the root slot\n */ const useRootBaseStyle = makeResetStyles({\n    ...createFocusOutlineStyle(),\n    inset: 0,\n    padding: SURFACE_PADDING,\n    margin: 'auto',\n    borderStyle: 'none',\n    overflow: 'unset',\n    border: `${SURFACE_BORDER_WIDTH} solid ${tokens.colorTransparentStroke}`,\n    borderRadius: tokens.borderRadiusXLarge,\n    display: 'block',\n    userSelect: 'unset',\n    visibility: 'unset',\n    position: 'fixed',\n    height: 'fit-content',\n    maxWidth: '600px',\n    maxHeight: '100vh',\n    boxSizing: 'border-box',\n    backgroundColor: tokens.colorNeutralBackground1,\n    color: tokens.colorNeutralForeground1,\n    [MEDIA_QUERY_BREAKPOINT_SELECTOR]: {\n        maxWidth: '100vw'\n    },\n    [MEDIA_QUERY_SHORT_SCREEN]: {\n        overflowY: 'auto',\n        // We need to offset the scrollbar by adding transparent borders otherwise\n        // it conflicts with the border radius.\n        paddingRight: `calc(${SURFACE_PADDING} - ${FULLSCREEN_DIALOG_SCROLLBAR_OFFSET})`,\n        borderRightWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderTopWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET,\n        borderBottomWidth: FULLSCREEN_DIALOG_SCROLLBAR_OFFSET\n    }\n});\nconst useBackdropBaseStyle = makeResetStyles({\n    inset: '0px',\n    backgroundColor: 'rgba(0, 0, 0, 0.4)',\n    position: 'fixed'\n});\nconst useBackdropStyles = makeStyles({\n    nestedDialogBackdrop: {\n        backgroundColor: tokens.colorTransparentBackground\n    }\n});\n/**\n * Apply styling to the DialogSurface slots based on the state\n */ export const useDialogSurfaceStyles_unstable = (state)=>{\n    const { isNestedDialog, root, backdrop } = state;\n    const rootBaseStyle = useRootBaseStyle();\n    const backdropBaseStyle = useBackdropBaseStyle();\n    const backdropStyles = useBackdropStyles();\n    root.className = mergeClasses(dialogSurfaceClassNames.root, rootBaseStyle, root.className);\n    if (backdrop) {\n        backdrop.className = mergeClasses(dialogSurfaceClassNames.backdrop, backdropBaseStyle, isNestedDialog && backdropStyles.nestedDialogBackdrop, backdrop.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,uBAAuB,QAAQ,yBAAyB;AACjE,SAASC,kCAAkC,EAAEC,+BAA+B,EAAEC,wBAAwB,EAAEC,oBAAoB,EAAEC,eAAe,QAAQ,gBAAgB;AACrK,OAAO,MAAMC,uBAAuB,GAAG;EACnCC,IAAI,EAAE,mBAAmB;EACzBC,QAAQ,EAAE;AACd,CAAC;AACD;AACA;AACA;AAAI,MAAMC,gBAAgB,gBAAGb,aAAA;EAAAc,CAAA;EAAAC,CAAA;AAAA,CA+B5B,CAAC;AACF,MAAMC,oBAAoB,gBAAGhB,aAAA,6FAI5B,CAAC;AACF,MAAMiB,iBAAiB,gBAAGhB,QAAA;EAAAiB,oBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAIzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,+BAA+B,GAAIC,KAAK,IAAG;EACxD,MAAM;IAAEC,cAAc;IAAEZ,IAAI;IAAEC;EAAS,CAAC,GAAGU,KAAK;EAChD,MAAME,aAAa,GAAGX,gBAAgB,CAAC,CAAC;EACxC,MAAMY,iBAAiB,GAAGT,oBAAoB,CAAC,CAAC;EAChD,MAAMU,cAAc,GAAGT,iBAAiB,CAAC,CAAC;EAC1CN,IAAI,CAACgB,SAAS,GAAGzB,YAAY,CAACQ,uBAAuB,CAACC,IAAI,EAAEa,aAAa,EAAEb,IAAI,CAACgB,SAAS,CAAC;EAC1F,IAAIf,QAAQ,EAAE;IACVA,QAAQ,CAACe,SAAS,GAAGzB,YAAY,CAACQ,uBAAuB,CAACE,QAAQ,EAAEa,iBAAiB,EAAEF,cAAc,IAAIG,cAAc,CAACR,oBAAoB,EAAEN,QAAQ,CAACe,SAAS,CAAC;EACrK;EACA,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/DialogSurfaceMotion.js

@@ -0,0 +1,28 @@
+import { createPresenceComponent, motionTokens } from '@fluentui/react-motions-preview';
+import { tokens } from '@fluentui/react-theme';
+const keyframes = [
+    {
+        opacity: 0,
+        boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)',
+        transform: 'scale(0.85) translateZ(0)'
+    },
+    {
+        boxShadow: tokens.shadow64,
+        transform: 'scale(1) translateZ(0)',
+        opacity: 1
+    }
+];
+export const DialogSurfaceMotion = createPresenceComponent({
+    enter: {
+        keyframes,
+        easing: motionTokens.curveDecelerateMid,
+        duration: motionTokens.durationGentle
+    },
+    exit: {
+        keyframes: [
+            ...keyframes
+        ].reverse(),
+        easing: motionTokens.curveAccelerateMin,
+        duration: motionTokens.durationGentle
+    }
+});

package/lib/components/DialogSurfaceMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DialogSurfaceMotion.ts"],"sourcesContent":["import { createPresenceComponent, motionTokens } from '@fluentui/react-motions-preview';\nimport { tokens } from '@fluentui/react-theme';\n\nconst keyframes = [\n  { opacity: 0, boxShadow: '0px 0px 0px 0px rgba(0, 0, 0, 0.1)', transform: 'scale(0.85) translateZ(0)' },\n  {\n    boxShadow: tokens.shadow64,\n    transform: 'scale(1) translateZ(0)',\n    opacity: 1,\n  },\n];\n\nexport const DialogSurfaceMotion = createPresenceComponent({\n  enter: {\n    keyframes,\n    easing: motionTokens.curveDecelerateMid,\n    duration: motionTokens.durationGentle,\n  },\n  exit: {\n    keyframes: [...keyframes].reverse(),\n    easing: motionTokens.curveAccelerateMin,\n    duration: motionTokens.durationGentle,\n  },\n});\n"],"names":["createPresenceComponent","motionTokens","tokens","keyframes","opacity","boxShadow","transform","shadow64","DialogSurfaceMotion","enter","easing","curveDecelerateMid","duration","durationGentle","exit","reverse","curveAccelerateMin"],"mappings":"AAAA,SAASA,uBAAuB,EAAEC,YAAY,QAAQ,kCAAkC;AACxF,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,MAAMC,YAAY;IAChB;QAAEC,SAAS;QAAGC,WAAW;QAAsCC,WAAW;IAA4B;IACtG;QACED,WAAWH,OAAOK,QAAQ;QAC1BD,WAAW;QACXF,SAAS;IACX;CACD;AAED,OAAO,MAAMI,sBAAsBR,wBAAwB;IACzDS,OAAO;QACLN;QACAO,QAAQT,aAAaU,kBAAkB;QACvCC,UAAUX,aAAaY,cAAc;IACvC;IACAC,MAAM;QACJX,WAAW;eAAIA;SAAU,CAACY,OAAO;QACjCL,QAAQT,aAAae,kBAAkB;QACvCJ,UAAUX,aAAaY,cAAc;IACvC;AACF,GAAG"}

package/lib/components/DialogTitle/useDialogTitleStyles.styles.js

@@ -24,9 +24,9 @@ const useActionResetStyles = /*#__PURE__*/__resetStyles("r13kcrze", null, [".r13
  * Styles to be applied on internal elements used by default action on non-modal Dialog
  * @internal
  */
-export const useDialogTitleInternalStyles = /*#__PURE__*/__resetStyles("r8i4vpr", "r15ezg2h", {
-  r: [".r8i4vpr{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".r8i4vpr:focus{outline-style:none;}", ".r8i4vpr:focus-visible{outline-style:none;}", ".r8i4vpr[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r8i4vpr[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);}", ".r15ezg2h{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".r15ezg2h:focus{outline-style:none;}", ".r15ezg2h:focus-visible{outline-style:none;}", ".r15ezg2h[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".r15ezg2h[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 (forced-colors: active){.r8i4vpr[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.r15ezg2h[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
+export const useDialogTitleInternalStyles = /*#__PURE__*/__resetStyles("r2avt6e", "roj2bbc", {
+  r: [".r2avt6e{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".r2avt6e:focus{outline-style:none;}", ".r2avt6e:focus-visible{outline-style:none;}", ".r2avt6e[data-fui-focus-visible]{border-top-color:transparent;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent;}", ".r2avt6e[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);right:calc(2px * -1);bottom:calc(2px * -1);left:calc(2px * -1);}", ".roj2bbc{overflow:visible;padding:0;border-style:none;position:relative;box-sizing:content-box;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;cursor:pointer;line-height:0;-webkit-appearance:button;text-align:unset;}", ".roj2bbc:focus{outline-style:none;}", ".roj2bbc:focus-visible{outline-style:none;}", ".roj2bbc[data-fui-focus-visible]{border-top-color:transparent;border-left-color:transparent;border-bottom-color:transparent;border-right-color:transparent;}", ".roj2bbc[data-fui-focus-visible]::after{content:\"\";position:absolute;pointer-events:none;z-index:1;border:2px solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);top:calc(2px * -1);left:calc(2px * -1);bottom:calc(2px * -1);right:calc(2px * -1);}"],
+  s: ["@media (forced-colors: active){.r2avt6e[data-fui-focus-visible]::after{border-top-color:Highlight;border-right-color:Highlight;border-bottom-color:Highlight;border-left-color:Highlight;}}", "@media (forced-colors: active){.roj2bbc[data-fui-focus-visible]::after{border-top-color:Highlight;border-left-color:Highlight;border-bottom-color:Highlight;border-right-color:Highlight;}}"]
 });
 /**
  * Apply styling to the DialogTitle slots based on the state

package/lib/index.js

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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable } from './Dialog';\nexport type {\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogOpenChangeData,\n  DialogOpenChangeEvent,\n  DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n  DialogTriggerProps,\n  DialogTriggerChildProps,\n  DialogTriggerState,\n  DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n  DialogActions,\n  dialogActionsClassNames,\n  useDialogActions_unstable,\n  useDialogActionsStyles_unstable,\n  renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n  DialogActionsProps,\n  DialogActionsSlots,\n  DialogActionsState,\n  DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n  DialogBody,\n  dialogBodyClassNames,\n  useDialogBody_unstable,\n  useDialogBodyStyles_unstable,\n  renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n  DialogTitle,\n  dialogTitleClassNames,\n  useDialogTitle_unstable,\n  useDialogTitleStyles_unstable,\n  renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  useDialogSurface_unstable,\n  useDialogSurfaceStyles_unstable,\n  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n  DialogSurfaceElement,\n  DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n  DialogContent,\n  dialogContentClassNames,\n  useDialogContent_unstable,\n  useDialogContentStyles_unstable,\n  renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n  useDialogContext_unstable,\n  useDialogSurfaceContext_unstable,\n  DialogProvider,\n  DialogSurfaceProvider,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,QAAQ,WAAW;AAU7E,SAASC,aAAa,EAAEC,yBAAyB,EAAEC,4BAA4B,QAAQ,kBAAkB;AAQzG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAQzB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,sBAAsB,EACtBC,4BAA4B,EAC5BC,yBAAyB,QACpB,eAAe;AAGtB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,sCAAsC,EACtCC,4BAA4B,QACvB,kBAAkB;AASzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAGzB,SACEC,yBAAyB,EACzBC,gCAAgC,EAChCC,cAAc,EACdC,qBAAqB,QAChB,mBAAmB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Dialog, renderDialog_unstable, useDialog_unstable, useDialogContextValues_unstable } from './Dialog';\nexport type {\n  DialogContextValues,\n  DialogSlots,\n  DialogProps,\n  DialogState,\n  DialogOpenChangeData,\n  DialogOpenChangeEvent,\n  DialogOpenChangeEventHandler,\n} from './Dialog';\n\nexport { DialogTrigger, useDialogTrigger_unstable, renderDialogTrigger_unstable } from './DialogTrigger';\nexport type {\n  DialogTriggerProps,\n  DialogTriggerChildProps,\n  DialogTriggerState,\n  DialogTriggerAction,\n} from './DialogTrigger';\n\nexport {\n  DialogActions,\n  dialogActionsClassNames,\n  useDialogActions_unstable,\n  useDialogActionsStyles_unstable,\n  renderDialogActions_unstable,\n} from './DialogActions';\nexport type {\n  DialogActionsProps,\n  DialogActionsSlots,\n  DialogActionsState,\n  DialogActionsPosition,\n} from './DialogActions';\n\nexport {\n  DialogBody,\n  dialogBodyClassNames,\n  useDialogBody_unstable,\n  useDialogBodyStyles_unstable,\n  renderDialogBody_unstable,\n} from './DialogBody';\nexport type { DialogBodyProps, DialogBodySlots, DialogBodyState } from './DialogBody';\n\nexport {\n  DialogTitle,\n  dialogTitleClassNames,\n  useDialogTitle_unstable,\n  useDialogTitleStyles_unstable,\n  renderDialogTitle_unstable,\n} from './DialogTitle';\nexport type { DialogTitleProps, DialogTitleSlots, DialogTitleState } from './DialogTitle';\n\nexport {\n  DialogSurface,\n  dialogSurfaceClassNames,\n  useDialogSurface_unstable,\n  useDialogSurfaceStyles_unstable,\n  useDialogSurfaceContextValues_unstable,\n  renderDialogSurface_unstable,\n} from './DialogSurface';\nexport type {\n  DialogSurfaceProps,\n  DialogSurfaceSlots,\n  DialogSurfaceState,\n  DialogSurfaceElement,\n  DialogSurfaceContextValues,\n} from './DialogSurface';\n\nexport {\n  DialogContent,\n  dialogContentClassNames,\n  useDialogContent_unstable,\n  useDialogContentStyles_unstable,\n  renderDialogContent_unstable,\n} from './DialogContent';\nexport type { DialogContentProps, DialogContentSlots, DialogContentState } from './DialogContent';\n\nexport {\n  useDialogContext_unstable,\n  useDialogSurfaceContext_unstable,\n  DialogProvider,\n  DialogSurfaceProvider,\n} from './contexts/index';\n\nexport type { DialogContextValue, DialogSurfaceContextValue } from './contexts/index';\n"],"names":["Dialog","renderDialog_unstable","useDialog_unstable","useDialogContextValues_unstable","DialogTrigger","useDialogTrigger_unstable","renderDialogTrigger_unstable","DialogActions","dialogActionsClassNames","useDialogActions_unstable","useDialogActionsStyles_unstable","renderDialogActions_unstable","DialogBody","dialogBodyClassNames","useDialogBody_unstable","useDialogBodyStyles_unstable","renderDialogBody_unstable","DialogTitle","dialogTitleClassNames","useDialogTitle_unstable","useDialogTitleStyles_unstable","renderDialogTitle_unstable","DialogSurface","dialogSurfaceClassNames","useDialogSurface_unstable","useDialogSurfaceStyles_unstable","useDialogSurfaceContextValues_unstable","renderDialogSurface_unstable","DialogContent","dialogContentClassNames","useDialogContent_unstable","useDialogContentStyles_unstable","renderDialogContent_unstable","useDialogContext_unstable","useDialogSurfaceContext_unstable","DialogProvider","DialogSurfaceProvider"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,EAAEC,+BAA+B,QAAQ,WAAW;AAW9G,SAASC,aAAa,EAAEC,yBAAyB,EAAEC,4BAA4B,QAAQ,kBAAkB;AAQzG,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAQzB,SACEC,UAAU,EACVC,oBAAoB,EACpBC,sBAAsB,EACtBC,4BAA4B,EAC5BC,yBAAyB,QACpB,eAAe;AAGtB,SACEC,WAAW,EACXC,qBAAqB,EACrBC,uBAAuB,EACvBC,6BAA6B,EAC7BC,0BAA0B,QACrB,gBAAgB;AAGvB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,sCAAsC,EACtCC,4BAA4B,QACvB,kBAAkB;AASzB,SACEC,aAAa,EACbC,uBAAuB,EACvBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,4BAA4B,QACvB,kBAAkB;AAGzB,SACEC,yBAAyB,EACzBC,gCAAgC,EAChCC,cAAc,EACdC,qBAAqB,QAChB,mBAAmB"}

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

@@ -7,3 +7,4 @@ _export_star._(require("./Dialog"), exports);
 _export_star._(require("./Dialog.types"), exports);
 _export_star._(require("./renderDialog"), exports);
 _export_star._(require("./useDialog"), exports);
+_export_star._(require("./useDialogContextValues"), exports);

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

@@ -1 +1 @@
-{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA"}
+{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Dialog';\nexport * from './Dialog.types';\nexport * from './renderDialog';\nexport * from './useDialog';\nexport * from './useDialogContextValues';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA"}