@fluentui/react-toast 9.3.43 → 9.3.45

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @fluentui/react-toast
 
-This log was last generated on Mon, 20 May 2024 12:36:43 GMT and should not be manually modified.
+This log was last generated on Thu, 06 Jun 2024 15:22:23 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.3.45](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.45)
+
+Thu, 06 Jun 2024 15:22:23 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.44..@fluentui/react-toast_v9.3.45)
+
+### Patches
+
+- chore: migrate Toast to new motion library ([PR #31516](https://github.com/microsoft/fluentui/pull/31516) by olfedias@microsoft.com)
+- chore: use @fluentui/react-motion ([PR #31574](https://github.com/microsoft/fluentui/pull/31574) by olfedias@microsoft.com)
+- chore: adopt changes in motion APIs ([PR #31508](https://github.com/microsoft/fluentui/pull/31508) by olfedias@microsoft.com)
+- chore: disable eslint rule. ([PR #30967](https://github.com/microsoft/fluentui/pull/30967) by seanmonahan@microsoft.com)
+- Bump @fluentui/react-aria to v9.12.0 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.39 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-motion to v9.0.0 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-portal to v9.4.27 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-tabster to v9.21.5 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+- Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
+
+## [9.3.44](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.44)
+
+Thu, 23 May 2024 08:02:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.43..@fluentui/react-toast_v9.3.44)
+
+### Patches
+
+- chore: replace usage of .shorthands() in styles ([PR #31432](https://github.com/microsoft/fluentui/pull/31432) by olfedias@microsoft.com)
+- Bump @fluentui/react-aria to v9.11.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+- Bump @fluentui/react-portal to v9.4.26 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
+
 ## [9.3.43](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.3.43)
 
-Mon, 20 May 2024 12:36:43 GMT 
+Mon, 20 May 2024 12:45:07 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.3.42..@fluentui/react-toast_v9.3.43)
 
 ### Patches

package/lib/components/Toast/useToastStyles.styles.js

@@ -3,7 +3,7 @@ import { tokens } from '@fluentui/react-theme';
 export const toastClassNames = {
   root: 'fui-Toast'
 };
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("r1yngb2j", null, [".r1yngb2j{display:grid;grid-template-columns:auto 1fr auto;padding:12px 12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("rhf7k35", null, [".rhf7k35{display:grid;grid-template-columns:auto 1fr auto;padding:12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"]);
 const useStyles = /*#__PURE__*/__styles({
   inverted: {
     sj55zd: "f1w7i9ko",

package/lib/components/Toast/useToastStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"sources":["useToastStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n    root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto',\n    padding: '12px 12px',\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: '20px',\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1\n});\nconst useStyles = makeStyles({\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,mYAY5B,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,eAAe,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACI,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACP,QAAQ,EAAEK,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAChK,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastClassNames","root","useRootBaseClassName","useStyles","inverted","sj55zd","De3pzq","d","useToastStyles_unstable","state","rootBaseClassName","styles","className","backgroundAppearance"],"sources":["useToastStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n    root: 'fui-Toast'\n};\nconst useRootBaseClassName = makeResetStyles({\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr auto',\n    padding: '12px',\n    borderRadius: tokens.borderRadiusMedium,\n    border: `1px solid ${tokens.colorTransparentStroke}`,\n    boxShadow: tokens.shadow8,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: '20px',\n    fontWeight: tokens.fontWeightSemibold,\n    color: tokens.colorNeutralForeground1,\n    backgroundColor: tokens.colorNeutralBackground1\n});\nconst useStyles = makeStyles({\n    inverted: {\n        color: tokens.colorNeutralForegroundInverted2,\n        backgroundColor: tokens.colorNeutralBackgroundInverted\n    }\n});\n/**\n * Apply styling to the Toast slots based on the state\n */ export const useToastStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGN,aAAA,4XAY5B,CAAC;AACF,MAAMO,SAAS,gBAAGN,QAAA;EAAAO,QAAA;IAAAC,MAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,uBAAuB,GAAIC,KAAK,IAAG;EAChD,MAAMC,iBAAiB,GAAGR,oBAAoB,CAAC,CAAC;EAChD,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAACR,IAAI,CAACW,SAAS,GAAGd,YAAY,CAACE,eAAe,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACI,oBAAoB,KAAK,UAAU,IAAIF,MAAM,CAACP,QAAQ,EAAEK,KAAK,CAACR,IAAI,CAACW,SAAS,CAAC;EAChK,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastContainer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Announce } from '../AriaLive/AriaLive.types';\nimport { Toast, ToastIntent } from '../../state';\nimport { ToastContainerContextValue } from '../../contexts/toastContainerContext';\nimport { TimerProps } from '../Timer/Timer';\n\nexport type ToastContainerContextValues = {\n  toast: ToastContainerContextValue;\n};\n\nexport type ToastContainerSlots = {\n  root: NonNullable<Slot<'div'>>;\n  timer: NonNullable<Slot<TimerProps>>;\n};\n\n/**\n * ToastContainer Props\n */\nexport type ToastContainerProps = Omit<ComponentProps<Partial<ToastContainerSlots>>, 'content'> &\n  Toast & {\n    visible: boolean;\n    announce: Announce;\n    intent: ToastIntent | undefined;\n    tryRestoreFocus: () => void;\n  };\n\n/**\n * State used in rendering ToastContainer\n */\nexport type ToastContainerState = ComponentState<ToastContainerSlots> &\n  Pick<ToastContainerProps, 'remove' | 'close' | 'updateId' | 'visible' | 'intent'> &\n  Pick<ToastContainerContextValue, 'titleId' | 'bodyId'> & {\n    transitionTimeout: number;\n    timerTimeout: number;\n    running: boolean;\n    onTransitionEntering: () => void;\n    nodeRef: React.Ref<HTMLDivElement>;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["ToastContainer.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { Announce } from '../AriaLive/AriaLive.types';\nimport { Toast, ToastIntent } from '../../state';\nimport { ToastContainerContextValue } from '../../contexts/toastContainerContext';\nimport { TimerProps } from '../Timer/Timer';\n\nexport type ToastContainerContextValues = {\n  toast: ToastContainerContextValue;\n};\n\nexport type ToastContainerSlots = {\n  root: NonNullable<Slot<'div'>>;\n  timer: NonNullable<Slot<TimerProps>>;\n};\n\n/**\n * ToastContainer Props\n */\nexport type ToastContainerProps = Omit<ComponentProps<Partial<ToastContainerSlots>>, 'content'> &\n  Toast & {\n    visible: boolean;\n    announce: Announce;\n    intent: ToastIntent | undefined;\n    tryRestoreFocus: () => void;\n  };\n\n/**\n * State used in rendering ToastContainer\n */\nexport type ToastContainerState = ComponentState<ToastContainerSlots> &\n  Pick<ToastContainerProps, 'remove' | 'close' | 'updateId' | 'visible' | 'intent'> &\n  Pick<ToastContainerContextValue, 'titleId' | 'bodyId'> & {\n    /**\n     * @deprecated Will be always \"0\".\n     */\n    transitionTimeout: number;\n    timerTimeout: number;\n    running: boolean;\n    /**\n     * @deprecated Will be always no-op.\n     */\n    onTransitionEntering: () => void;\n    /**\n     * @deprecated\n     */\n    nodeRef: React.Ref<HTMLDivElement>;\n\n    onMotionFinish?: (event: null, data: { direction: 'enter' | 'exit' }) => void;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/ToastContainer/ToastContainerMotion.js

@@ -0,0 +1,63 @@
+import { createPresenceComponent } from '@fluentui/react-motion';
+export const ToastContainerMotion = createPresenceComponent(({ element })=>({
+        enter: [
+            {
+                keyframes: [
+                    {
+                        marginTop: 0,
+                        minHeight: 0,
+                        maxHeight: 0,
+                        opacity: 0
+                    },
+                    {
+                        marginTop: '16px',
+                        minHeight: 44,
+                        maxHeight: `${element.scrollHeight}px`,
+                        opacity: 0
+                    }
+                ],
+                duration: 200
+            },
+            {
+                keyframes: [
+                    {
+                        opacity: 0
+                    },
+                    {
+                        opacity: 1
+                    }
+                ],
+                delay: 200,
+                duration: 400
+            }
+        ],
+        exit: [
+            {
+                keyframes: [
+                    {
+                        marginTop: '16px',
+                        minHeight: 44,
+                        maxHeight: `${element.scrollHeight}px`
+                    },
+                    {
+                        marginTop: 0,
+                        minHeight: 0,
+                        maxHeight: 0
+                    }
+                ],
+                delay: 400,
+                duration: 200
+            },
+            {
+                keyframes: [
+                    {
+                        opacity: 1
+                    },
+                    {
+                        opacity: 0
+                    }
+                ],
+                duration: 400
+            }
+        ]
+    }));

package/lib/components/ToastContainer/ToastContainerMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ToastContainerMotion.tsx"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-motion';\n\nexport const ToastContainerMotion = createPresenceComponent(({ element }) => ({\n  enter: [\n    {\n      keyframes: [\n        { marginTop: 0, minHeight: 0, maxHeight: 0, opacity: 0 },\n        { marginTop: '16px', minHeight: 44, maxHeight: `${element.scrollHeight}px`, opacity: 0 },\n      ],\n      duration: 200,\n    },\n    {\n      keyframes: [{ opacity: 0 }, { opacity: 1 }],\n      delay: 200,\n      duration: 400,\n    },\n  ],\n\n  exit: [\n    {\n      keyframes: [\n        { marginTop: '16px', minHeight: 44, maxHeight: `${element.scrollHeight}px` },\n        { marginTop: 0, minHeight: 0, maxHeight: 0 },\n      ],\n      delay: 400,\n      duration: 200,\n    },\n    {\n      keyframes: [{ opacity: 1 }, { opacity: 0 }],\n      duration: 400,\n    },\n  ],\n}));\n"],"names":["createPresenceComponent","ToastContainerMotion","element","enter","keyframes","marginTop","minHeight","maxHeight","opacity","scrollHeight","duration","delay","exit"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,yBAAyB;AAEjE,OAAO,MAAMC,uBAAuBD,wBAAwB,CAAC,EAAEE,OAAO,EAAE,GAAM,CAAA;QAC5EC,OAAO;YACL;gBACEC,WAAW;oBACT;wBAAEC,WAAW;wBAAGC,WAAW;wBAAGC,WAAW;wBAAGC,SAAS;oBAAE;oBACvD;wBAAEH,WAAW;wBAAQC,WAAW;wBAAIC,WAAW,CAAC,EAAEL,QAAQO,YAAY,CAAC,EAAE,CAAC;wBAAED,SAAS;oBAAE;iBACxF;gBACDE,UAAU;YACZ;YACA;gBACEN,WAAW;oBAAC;wBAAEI,SAAS;oBAAE;oBAAG;wBAAEA,SAAS;oBAAE;iBAAE;gBAC3CG,OAAO;gBACPD,UAAU;YACZ;SACD;QAEDE,MAAM;YACJ;gBACER,WAAW;oBACT;wBAAEC,WAAW;wBAAQC,WAAW;wBAAIC,WAAW,CAAC,EAAEL,QAAQO,YAAY,CAAC,EAAE,CAAC;oBAAC;oBAC3E;wBAAEJ,WAAW;wBAAGC,WAAW;wBAAGC,WAAW;oBAAE;iBAC5C;gBACDI,OAAO;gBACPD,UAAU;YACZ;YACA;gBACEN,WAAW;oBAAC;wBAAEI,SAAS;oBAAE;oBAAG;wBAAEA,SAAS;oBAAE;iBAAE;gBAC3CE,UAAU;YACZ;SACD;IACH,CAAA,GAAI"}

package/lib/components/ToastContainer/renderToastContainer.js

@@ -1,26 +1,25 @@
   import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
 import { assertSlots } from '@fluentui/react-utilities';
-import { Transition } from 'react-transition-group';
 import { ToastContainerContextProvider } from '../../contexts/toastContainerContext';
+import { ToastContainerMotion } from './ToastContainerMotion';
 /**
  * Render the final JSX of ToastContainer
  */ export const renderToastContainer_unstable = (state, contextValues)=>{
-    const { onTransitionEntering, visible, transitionTimeout, remove, nodeRef, updateId } = state;
+    const { onMotionFinish, visible, updateId } = state;
     assertSlots(state);
-    return /*#__PURE__*/ _jsx(Transition, {
-        in: visible,
-        appear: true,
-        unmountOnExit: true,
-        timeout: transitionTimeout,
-        onExited: remove,
-        onEntering: onTransitionEntering,
-        nodeRef: nodeRef,
-        children: /*#__PURE__*/ _jsxs(ToastContainerContextProvider, {
-            value: contextValues.toast,
-            children: [
-                /*#__PURE__*/ _jsx(state.root, {}),
-                /*#__PURE__*/ _jsx(state.timer, {}, updateId)
-            ]
+    return /*#__PURE__*/ _jsx(ToastContainerContextProvider, {
+        value: contextValues.toast,
+        children: /*#__PURE__*/ _jsx(ToastContainerMotion, {
+            appear: true,
+            onMotionFinish: onMotionFinish,
+            visible: visible,
+            unmountOnExit: true,
+            children: /*#__PURE__*/ _jsxs(state.root, {
+                children: [
+                    state.root.children,
+                    /*#__PURE__*/ _jsx(state.timer, {}, updateId)
+                ]
+            })
         })
     });
 };

package/lib/components/ToastContainer/renderToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Transition } from 'react-transition-group';\nimport type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\n\n/**\n * Render the final JSX of ToastContainer\n */\nexport const renderToastContainer_unstable = (\n  state: ToastContainerState,\n  contextValues: ToastContainerContextValues,\n) => {\n  const { onTransitionEntering, visible, transitionTimeout, remove, nodeRef, updateId } = state;\n  assertSlots<ToastContainerSlots>(state);\n\n  return (\n    <Transition\n      in={visible}\n      appear\n      unmountOnExit\n      timeout={transitionTimeout}\n      onExited={remove}\n      onEntering={onTransitionEntering}\n      nodeRef={nodeRef}\n    >\n      <ToastContainerContextProvider value={contextValues.toast}>\n        <state.root />\n        <state.timer key={updateId} />\n      </ToastContainerContextProvider>\n    </Transition>\n  );\n};\n"],"names":["assertSlots","Transition","ToastContainerContextProvider","renderToastContainer_unstable","state","contextValues","onTransitionEntering","visible","transitionTimeout","remove","nodeRef","updateId","in","appear","unmountOnExit","timeout","onExited","onEntering","value","toast","root","timer"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,oBAAoB,EAAEC,OAAO,EAAEC,iBAAiB,EAAEC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGP;IACxFJ,YAAiCI;IAEjC,qBACE,KAACH;QACCW,IAAIL;QACJM,MAAM;QACNC,aAAa;QACbC,SAASP;QACTQ,UAAUP;QACVQ,YAAYX;QACZI,SAASA;kBAET,cAAA,MAACR;YAA8BgB,OAAOb,cAAcc,KAAK;;8BACvD,KAACf,MAAMgB,IAAI;8BACX,KAAChB,MAAMiB,KAAK,MAAMV;;;;AAI1B,EAAE"}
+{"version":3,"sources":["renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastContainerState, ToastContainerSlots, ToastContainerContextValues } from './ToastContainer.types';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\nimport { ToastContainerMotion } from './ToastContainerMotion';\n\n/**\n * Render the final JSX of ToastContainer\n */\nexport const renderToastContainer_unstable = (\n  state: ToastContainerState,\n  contextValues: ToastContainerContextValues,\n) => {\n  const { onMotionFinish, visible, updateId } = state;\n  assertSlots<ToastContainerSlots>(state);\n\n  return (\n    <ToastContainerContextProvider value={contextValues.toast}>\n      <ToastContainerMotion appear onMotionFinish={onMotionFinish} visible={visible} unmountOnExit>\n        <state.root>\n          {state.root.children}\n          <state.timer key={updateId} />\n        </state.root>\n      </ToastContainerMotion>\n    </ToastContainerContextProvider>\n  );\n};\n"],"names":["assertSlots","ToastContainerContextProvider","ToastContainerMotion","renderToastContainer_unstable","state","contextValues","onMotionFinish","visible","updateId","value","toast","appear","unmountOnExit","root","children","timer"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,6BAA6B,QAAQ,uCAAuC;AACrF,SAASC,oBAAoB,QAAQ,yBAAyB;AAE9D;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,cAAc,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGJ;IAC9CJ,YAAiCI;IAEjC,qBACE,KAACH;QAA8BQ,OAAOJ,cAAcK,KAAK;kBACvD,cAAA,KAACR;YAAqBS,MAAM;YAACL,gBAAgBA;YAAgBC,SAASA;YAASK,aAAa;sBAC1F,cAAA,MAACR,MAAMS,IAAI;;oBACRT,MAAMS,IAAI,CAACC,QAAQ;kCACpB,KAACV,MAAMW,KAAK,MAAMP;;;;;AAK5B,EAAE"}

package/lib/components/ToastContainer/useToastContainer.js

@@ -109,32 +109,21 @@ const intentPolitenessMap = {
         play,
         pauseOnWindowBlur
     ]);
-    // It's impossible to animate to height: auto in CSS, the actual pixel value must be known
-    // Get the height of the toast before animation styles have been applied and set a CSS
-    // variable with its height. The CSS variable will be used by the styles
-    const onTransitionEntering = ()=>{
-        if (!toastRef.current) {
-            return;
-        }
-        const element = toastRef.current;
-        element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);
-    };
     // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController
     const userRootSlot = data.root;
-    // Using a ref callback here because addEventListener supports `once`
-    const toastAnimationRef = React.useCallback((el)=>{
-        if (el && toastRef.current) {
-            toastRef.current.addEventListener('animationend', ()=>{
-                // start toast once it's fully animated in
-                play();
-                onStatusChange('visible');
-            }, {
-                once: true
-            });
+    const onMotionFinish = React.useCallback((_, { direction })=>{
+        if (direction === 'exit') {
+            remove();
+        }
+        if (direction === 'enter') {
+            // start toast once it's fully animated in
+            play();
+            onStatusChange('visible');
         }
     }, [
+        onStatusChange,
         play,
-        onStatusChange
+        remove
     ]);
     const onMouseEnter = useEventCallback((e)=>{
         var _userRootSlot_onMouseEnter;
@@ -209,7 +198,7 @@ const intentPolitenessMap = {
             // FIXME:
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: useMergedRefs(ref, toastRef, toastAnimationRef),
+            ref: useMergedRefs(ref, toastRef),
             children,
             tabIndex: 0,
             role: 'listitem',
@@ -225,16 +214,18 @@ const intentPolitenessMap = {
             elementType: 'div'
         }),
         timerTimeout,
-        transitionTimeout: 500,
+        transitionTimeout: 0,
         running,
         visible,
         remove,
         close,
-        onTransitionEntering,
+        onTransitionEntering: ()=>{
+        /* no-op */ },
         updateId,
         nodeRef: toastRef,
         intent,
         titleId,
-        bodyId
+        bodyId,
+        onMotionFinish
     };
 };

package/lib/components/ToastContainer/useToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useMergedRefs,\n  ExtractSlotProps,\n  Slot,\n  useEventCallback,\n  useId,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { Delete, Tab } from '@fluentui/keyboard-keys';\nimport { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { ToastStatus } from '../../state';\nimport type { ToastContainerProps, ToastContainerState } from './ToastContainer.types';\nimport { Timer, TimerProps } from '../Timer/Timer';\n\nconst intentPolitenessMap = {\n  success: 'assertive',\n  warning: 'assertive',\n  error: 'assertive',\n  info: 'polite',\n} as const;\n\n/**\n * Create the state required to render ToastContainer.\n *\n * The returned state can be modified with hooks such as useToastContainerStyles_unstable,\n * before being passed to renderToastContainer_unstable.\n *\n * @param props - props from this instance of ToastContainer\n * @param ref - reference to root HTMLElement of ToastContainer\n */\nexport const useToastContainer_unstable = (\n  props: ToastContainerProps,\n  ref: React.Ref<HTMLElement>,\n): ToastContainerState => {\n  const {\n    visible,\n    children,\n    close: closeProp,\n    remove,\n    updateId,\n    announce,\n    data,\n    timeout: timerTimeout,\n    politeness: desiredPoliteness,\n    intent = 'info',\n    pauseOnHover,\n    pauseOnWindowBlur,\n    imperativeRef,\n    tryRestoreFocus,\n    ...rest\n  } = props;\n  const titleId = useId('toast-title');\n  const bodyId = useId('toast-body');\n  const toastRef = React.useRef<HTMLDivElement | null>(null);\n  const { targetDocument } = useFluent_unstable();\n  const [running, setRunning] = React.useState(false);\n  const imperativePauseRef = React.useRef(false);\n  const focusedToastBeforeClose = React.useRef(false);\n  const focusableGroupAttribute = useFocusableGroup({\n    tabBehavior: 'limited-trap-focus',\n    // Users should only use Tab to focus into the toast\n    // Escape is already reserved to dismiss all toasts\n    ignoreDefaultKeydown: { Tab: true, Escape: true, Enter: true },\n  });\n\n  const close = useEventCallback(() => {\n    const activeElement = targetDocument?.activeElement;\n    if (activeElement && toastRef.current?.contains(activeElement)) {\n      focusedToastBeforeClose.current = true;\n    }\n\n    closeProp();\n  });\n  const onStatusChange = useEventCallback((status: ToastStatus) => props.onStatusChange?.(null, { status, ...props }));\n  const pause = useEventCallback(() => setRunning(false));\n  const play = useEventCallback(() => {\n    if (imperativePauseRef.current) {\n      return;\n    }\n    const containsActive = !!toastRef.current?.contains(targetDocument?.activeElement ?? null);\n    if (timerTimeout < 0) {\n      setRunning(true);\n      return;\n    }\n\n    if (!containsActive) {\n      setRunning(true);\n    }\n  });\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    focus: () => {\n      if (!toastRef.current) {\n        return;\n      }\n\n      toastRef.current.focus();\n    },\n\n    play: () => {\n      imperativePauseRef.current = false;\n      play();\n    },\n    pause: () => {\n      imperativePauseRef.current = true;\n      pause();\n    },\n  }));\n\n  React.useEffect(() => {\n    return () => onStatusChange('unmounted');\n  }, [onStatusChange]);\n\n  React.useEffect(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    if (pauseOnWindowBlur) {\n      targetDocument.defaultView?.addEventListener('focus', play);\n      targetDocument.defaultView?.addEventListener('blur', pause);\n      return () => {\n        targetDocument.defaultView?.removeEventListener('focus', play);\n        targetDocument.defaultView?.removeEventListener('blur', pause);\n      };\n    }\n  }, [targetDocument, pause, play, pauseOnWindowBlur]);\n\n  // It's impossible to animate to height: auto in CSS, the actual pixel value must be known\n  // Get the height of the toast before animation styles have been applied and set a CSS\n  // variable with its height. The CSS variable will be used by the styles\n  const onTransitionEntering = () => {\n    if (!toastRef.current) {\n      return;\n    }\n\n    const element = toastRef.current;\n    element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);\n  };\n\n  // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n  const userRootSlot = (data as { root?: ExtractSlotProps<Slot<'div'>> }).root;\n\n  // Using a ref callback here because addEventListener supports `once`\n  const toastAnimationRef = React.useCallback(\n    (el: HTMLDivElement | null) => {\n      if (el && toastRef.current) {\n        toastRef.current.addEventListener(\n          'animationend',\n          () => {\n            // start toast once it's fully animated in\n            play();\n            onStatusChange('visible');\n          },\n          { once: true },\n        );\n      }\n    },\n    [play, onStatusChange],\n  );\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    pause();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    play();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === Delete) {\n      e.preventDefault();\n      close();\n    }\n\n    if (e.key === Tab && e.currentTarget === e.target) {\n      e.preventDefault();\n      if (e.shiftKey) {\n        findLastFocusable(e.currentTarget)?.focus();\n      } else {\n        findFirstFocusable(e.currentTarget)?.focus();\n      }\n    }\n\n    userRootSlot?.onKeyDown?.(e);\n  });\n\n  React.useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const politeness = desiredPoliteness ?? intentPolitenessMap[intent];\n    announce(toastRef.current?.textContent ?? '', { politeness });\n  }, [announce, desiredPoliteness, toastRef, visible, updateId, intent]);\n\n  React.useEffect(() => {\n    return () => {\n      if (focusedToastBeforeClose.current) {\n        focusedToastBeforeClose.current = false;\n        tryRestoreFocus();\n      }\n    };\n  }, [tryRestoreFocus]);\n\n  return {\n    components: {\n      timer: Timer,\n      root: 'div',\n    },\n    timer: slot.always<TimerProps>({ onTimeout: close, running, timeout: timerTimeout ?? -1 }, { elementType: Timer }),\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` 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, toastRef, toastAnimationRef) as React.Ref<HTMLDivElement>,\n        children,\n        tabIndex: 0,\n        role: 'listitem',\n        'aria-labelledby': titleId,\n        'aria-describedby': bodyId,\n        ...rest,\n        ...userRootSlot,\n        ...focusableGroupAttribute,\n        onMouseEnter,\n        onMouseLeave,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    timerTimeout,\n    transitionTimeout: 500,\n    running,\n    visible,\n    remove,\n    close,\n    onTransitionEntering,\n    updateId,\n    nodeRef: toastRef,\n    intent,\n    titleId,\n    bodyId,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","useEventCallback","useId","slot","useFluent_unstable","Delete","Tab","useFocusableGroup","useFocusFinders","Timer","intentPolitenessMap","success","warning","error","info","useToastContainer_unstable","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","bodyId","toastRef","useRef","targetDocument","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","focusableGroupAttribute","tabBehavior","ignoreDefaultKeydown","Escape","Enter","activeElement","current","contains","onStatusChange","status","pause","play","containsActive","useImperativeHandle","focus","useEffect","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","onMouseLeave","findFirstFocusable","findLastFocusable","onKeyDown","key","preventDefault","currentTarget","target","shiftKey","textContent","components","timer","always","onTimeout","elementType","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}
+{"version":3,"sources":["useToastContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  getIntrinsicElementProps,\n  useMergedRefs,\n  ExtractSlotProps,\n  Slot,\n  useEventCallback,\n  useId,\n  slot,\n} from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { Delete, Tab } from '@fluentui/keyboard-keys';\nimport { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { ToastStatus } from '../../state';\nimport type { ToastContainerProps, ToastContainerState } from './ToastContainer.types';\nimport { Timer, TimerProps } from '../Timer/Timer';\n\nconst intentPolitenessMap = {\n  success: 'assertive',\n  warning: 'assertive',\n  error: 'assertive',\n  info: 'polite',\n} as const;\n\n/**\n * Create the state required to render ToastContainer.\n *\n * The returned state can be modified with hooks such as useToastContainerStyles_unstable,\n * before being passed to renderToastContainer_unstable.\n *\n * @param props - props from this instance of ToastContainer\n * @param ref - reference to root HTMLElement of ToastContainer\n */\nexport const useToastContainer_unstable = (\n  props: ToastContainerProps,\n  ref: React.Ref<HTMLElement>,\n): ToastContainerState => {\n  const {\n    visible,\n    children,\n    close: closeProp,\n    remove,\n    updateId,\n    announce,\n    data,\n    timeout: timerTimeout,\n    politeness: desiredPoliteness,\n    intent = 'info',\n    pauseOnHover,\n    pauseOnWindowBlur,\n    imperativeRef,\n    tryRestoreFocus,\n    ...rest\n  } = props;\n  const titleId = useId('toast-title');\n  const bodyId = useId('toast-body');\n  const toastRef = React.useRef<HTMLDivElement | null>(null);\n  const { targetDocument } = useFluent_unstable();\n  const [running, setRunning] = React.useState(false);\n  const imperativePauseRef = React.useRef(false);\n  const focusedToastBeforeClose = React.useRef(false);\n  const focusableGroupAttribute = useFocusableGroup({\n    tabBehavior: 'limited-trap-focus',\n    // Users should only use Tab to focus into the toast\n    // Escape is already reserved to dismiss all toasts\n    ignoreDefaultKeydown: { Tab: true, Escape: true, Enter: true },\n  });\n\n  const close = useEventCallback(() => {\n    const activeElement = targetDocument?.activeElement;\n    if (activeElement && toastRef.current?.contains(activeElement)) {\n      focusedToastBeforeClose.current = true;\n    }\n\n    closeProp();\n  });\n  const onStatusChange = useEventCallback((status: ToastStatus) => props.onStatusChange?.(null, { status, ...props }));\n  const pause = useEventCallback(() => setRunning(false));\n  const play = useEventCallback(() => {\n    if (imperativePauseRef.current) {\n      return;\n    }\n    const containsActive = !!toastRef.current?.contains(targetDocument?.activeElement ?? null);\n    if (timerTimeout < 0) {\n      setRunning(true);\n      return;\n    }\n\n    if (!containsActive) {\n      setRunning(true);\n    }\n  });\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    focus: () => {\n      if (!toastRef.current) {\n        return;\n      }\n\n      toastRef.current.focus();\n    },\n\n    play: () => {\n      imperativePauseRef.current = false;\n      play();\n    },\n    pause: () => {\n      imperativePauseRef.current = true;\n      pause();\n    },\n  }));\n\n  React.useEffect(() => {\n    return () => onStatusChange('unmounted');\n  }, [onStatusChange]);\n\n  React.useEffect(() => {\n    if (!targetDocument) {\n      return;\n    }\n\n    if (pauseOnWindowBlur) {\n      targetDocument.defaultView?.addEventListener('focus', play);\n      targetDocument.defaultView?.addEventListener('blur', pause);\n      return () => {\n        targetDocument.defaultView?.removeEventListener('focus', play);\n        targetDocument.defaultView?.removeEventListener('blur', pause);\n      };\n    }\n  }, [targetDocument, pause, play, pauseOnWindowBlur]);\n\n  // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n  const userRootSlot = (data as { root?: ExtractSlotProps<Slot<'div'>> }).root;\n  const onMotionFinish: ToastContainerState['onMotionFinish'] = React.useCallback(\n    (_, { direction }) => {\n      if (direction === 'exit') {\n        remove();\n      }\n\n      if (direction === 'enter') {\n        // start toast once it's fully animated in\n        play();\n        onStatusChange('visible');\n      }\n    },\n    [onStatusChange, play, remove],\n  );\n\n  const onMouseEnter = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    pause();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const onMouseLeave = useEventCallback((e: React.MouseEvent<HTMLDivElement>) => {\n    play();\n    userRootSlot?.onMouseEnter?.(e);\n  });\n\n  const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n  const onKeyDown = useEventCallback((e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === Delete) {\n      e.preventDefault();\n      close();\n    }\n\n    if (e.key === Tab && e.currentTarget === e.target) {\n      e.preventDefault();\n      if (e.shiftKey) {\n        findLastFocusable(e.currentTarget)?.focus();\n      } else {\n        findFirstFocusable(e.currentTarget)?.focus();\n      }\n    }\n\n    userRootSlot?.onKeyDown?.(e);\n  });\n\n  React.useEffect(() => {\n    if (!visible) {\n      return;\n    }\n\n    const politeness = desiredPoliteness ?? intentPolitenessMap[intent];\n    announce(toastRef.current?.textContent ?? '', { politeness });\n  }, [announce, desiredPoliteness, toastRef, visible, updateId, intent]);\n\n  React.useEffect(() => {\n    return () => {\n      if (focusedToastBeforeClose.current) {\n        focusedToastBeforeClose.current = false;\n        tryRestoreFocus();\n      }\n    };\n  }, [tryRestoreFocus]);\n\n  return {\n    components: {\n      timer: Timer,\n      root: 'div',\n    },\n    timer: slot.always<TimerProps>({ onTimeout: close, running, timeout: timerTimeout ?? -1 }, { elementType: Timer }),\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        // FIXME:\n        // `ref` 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, toastRef) as React.Ref<HTMLDivElement>,\n        children,\n        tabIndex: 0,\n        role: 'listitem',\n        'aria-labelledby': titleId,\n        'aria-describedby': bodyId,\n        ...rest,\n        ...userRootSlot,\n        ...focusableGroupAttribute,\n        onMouseEnter,\n        onMouseLeave,\n        onKeyDown,\n      }),\n      { elementType: 'div' },\n    ),\n    timerTimeout,\n    transitionTimeout: 0,\n    running,\n    visible,\n    remove,\n    close,\n    onTransitionEntering: () => {\n      /* no-op */\n    },\n    updateId,\n    nodeRef: toastRef,\n    intent,\n    titleId,\n    bodyId,\n    onMotionFinish,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useMergedRefs","useEventCallback","useId","slot","useFluent_unstable","Delete","Tab","useFocusableGroup","useFocusFinders","Timer","intentPolitenessMap","success","warning","error","info","useToastContainer_unstable","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","bodyId","toastRef","useRef","targetDocument","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","focusableGroupAttribute","tabBehavior","ignoreDefaultKeydown","Escape","Enter","activeElement","current","contains","onStatusChange","status","pause","play","containsActive","useImperativeHandle","focus","useEffect","defaultView","addEventListener","removeEventListener","userRootSlot","root","onMotionFinish","useCallback","_","direction","onMouseEnter","e","onMouseLeave","findFirstFocusable","findLastFocusable","onKeyDown","key","preventDefault","currentTarget","target","shiftKey","textContent","components","timer","always","onTimeout","elementType","tabIndex","role","transitionTimeout","onTransitionEntering","nodeRef"],"mappings":"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"}

package/lib/components/ToastContainer/useToastContainerStyles.styles.js

@@ -1,36 +1,17 @@
-import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { __resetStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 export const toastContainerClassNames = {
   root: 'fui-ToastContainer',
   timer: 'fui-ToastContainer__timer'
 };
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("r14b3ftk", null, [".r14b3ftk{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}", ".r14b3ftk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"]);
-/**
- * Styles for the root slot
- */
-const useStyles = /*#__PURE__*/__styles({
-  enter: {
-    vin17d: "fayl5bc",
-    m1gqa9: "f17oyct0",
-    Bv12yb3: "fvv8lvk"
-  },
-  exit: {
-    vin17d: "f1tk3cza",
-    m1gqa9: "f1nx6yy9",
-    Bv12yb3: "f9wuypy"
-  }
-}, {
-  d: [".fayl5bc{animation-duration:200ms,400ms;}", ".f17oyct0{animation-delay:0ms,200ms;}", ".fvv8lvk{animation-name:f1rp83na,f5j8bii;}", ".f1tk3cza{animation-duration:400ms,200ms;}", ".f1nx6yy9{animation-delay:0ms,400ms;}", ".f9wuypy{animation-name:fk0lfw7,f1n32sdh;}"],
-  k: ["@keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}", "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}", "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}", "@keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}"]
-});
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r98b696", null, [".r98b696{box-sizing:border-box;margin-top:16px;pointer-events:all;border-radius:var(--borderRadiusMedium);}", ".r98b696[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"]);
 /**
  * Apply styling to the ToastContainer slots based on the state
  */
 export const useToastContainerStyles_unstable = state => {
   const rootBaseClassName = useRootBaseClassName();
-  const styles = useStyles();
-  state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);
+  state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);
   return state;
 };
 //# sourceMappingURL=useToastContainerStyles.styles.js.map

package/lib/components/ToastContainer/useToastContainerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useStyles","enter","vin17d","m1gqa9","Bv12yb3","exit","d","k","useToastContainerStyles_unstable","state","rootBaseClassName","styles","className","visible"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n    root: 'fui-ToastContainer',\n    timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    marginTop: '16px',\n    minHeight: '44px',\n    pointerEvents: 'all',\n    borderRadius: tokens.borderRadiusMedium,\n    '--fui-toast-height': '44px',\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n    })\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    enter: {\n        animationDuration: '200ms, 400ms',\n        animationDelay: '0ms, 200ms',\n        animationName: [\n            {\n                from: {\n                    maxHeight: 0,\n                    opacity: 0,\n                    marginTop: 0\n                },\n                to: {\n                    marginTop: '16px',\n                    opacity: 0,\n                    maxHeight: 'var(--fui-toast-height)'\n                }\n            },\n            {\n                from: {\n                    opacity: 0\n                },\n                to: {\n                    opacity: 1\n                }\n            }\n        ]\n    },\n    exit: {\n        animationDuration: '400ms, 200ms',\n        animationDelay: '0ms, 400ms',\n        animationName: [\n            {\n                from: {\n                    opacity: 1\n                },\n                to: {\n                    opacity: 0\n                }\n            },\n            {\n                from: {\n                    opacity: 0\n                },\n                to: {\n                    opacity: 0,\n                    marginTop: 0,\n                    maxHeight: 0\n                }\n            }\n        ]\n    }\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const styles = useStyles();\n    state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGR,aAAA,iRAU5B,CAAC;AACF;AACA;AACA;AAAI,MAAMS,SAAS,gBAAGR,QAAA;EAAAS,KAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAH,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAE,CAAA;EAAAC,CAAA;AAAA,CAmDrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGX,oBAAoB,CAAC,CAAC;EAChD,MAAMY,MAAM,GAAGX,SAAS,CAAC,CAAC;EAC1BS,KAAK,CAACZ,IAAI,CAACe,SAAS,GAAGnB,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEa,iBAAiB,EAAED,KAAK,CAACI,OAAO,GAAGF,MAAM,CAACV,KAAK,GAAGU,MAAM,CAACN,IAAI,EAAEI,KAAK,CAACZ,IAAI,CAACe,SAAS,CAAC;EACvJ,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}
+{"version":3,"names":["__resetStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","toastContainerClassNames","root","timer","useRootBaseClassName","useToastContainerStyles_unstable","state","rootBaseClassName","className"],"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { makeResetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n    root: 'fui-ToastContainer',\n    timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = makeResetStyles({\n    boxSizing: 'border-box',\n    marginTop: '16px',\n    pointerEvents: 'all',\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({\n        outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`\n    })\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */ export const useToastContainerStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE,oBAAoB;EAC1BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,sOAQ5B,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMQ,gCAAgC,GAAIC,KAAK,IAAG;EACzD,MAAMC,iBAAiB,GAAGH,oBAAoB,CAAC,CAAC;EAChDE,KAAK,CAACJ,IAAI,CAACM,SAAS,GAAGV,YAAY,CAACG,wBAAwB,CAACC,IAAI,EAAEK,iBAAiB,EAAED,KAAK,CAACJ,IAAI,CAACM,SAAS,CAAC;EAC3G,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib-commonjs/components/Toast/useToastStyles.styles.js

@@ -20,8 +20,8 @@ const _react = require("@griffel/react");
 const toastClassNames = {
     root: 'fui-Toast'
 };
-const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r1yngb2j", null, [
-    ".r1yngb2j{display:grid;grid-template-columns:auto 1fr auto;padding:12px 12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("rhf7k35", null, [
+    ".rhf7k35{display:grid;grid-template-columns:auto 1fr auto;padding:12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}"
 ]);
 const useStyles = /*#__PURE__*/ (0, _react.__styles)({
     inverted: {

package/lib-commonjs/components/Toast/useToastStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n  root: 'fui-Toast'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r1yngb2j\", null, [\".r1yngb2j{display:grid;grid-template-columns:auto 1fr auto;padding:12px 12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  inverted: {\n    sj55zd: \"f1w7i9ko\",\n    De3pzq: \"f5pduvr\"\n  }\n}, {\n  d: [\".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\", \".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}\"]\n});\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useToastStyles.styles.js.map"],"names":["toastClassNames","useToastStyles_unstable","root","useRootBaseClassName","__resetStyles","useStyles","__styles","inverted","sj55zd","De3pzq","d","state","rootBaseClassName","styles","className","mergeClasses","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaA,eAAe;eAAfA;;IAeAC,uBAAuB;eAAvBA;;;uBAjByC;AAE/C,MAAMD,kBAAkB;IAC7BE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;CAA+W;AAC1b,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,UAAU;QACRC,QAAQ;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA4D;KAAoE;AACtI;AAIO,MAAMT,0BAA0BU,CAAAA;IACrC,MAAMC,oBAAoBT;IAC1B,MAAMU,SAASR;IACfM,MAAMT,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,gBAAgBE,IAAI,EAAEU,mBAAmBD,MAAMK,oBAAoB,KAAK,cAAcH,OAAON,QAAQ,EAAEI,MAAMT,IAAI,CAACY,SAAS;IAC/J,OAAOH;AACT,GACA,iDAAiD"}
+{"version":3,"sources":["useToastStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastClassNames = {\n  root: 'fui-Toast'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"rhf7k35\", null, [\".rhf7k35{display:grid;grid-template-columns:auto 1fr auto;padding:12px;border-radius:var(--borderRadiusMedium);border:1px solid var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}\"]);\nconst useStyles = /*#__PURE__*/__styles({\n  inverted: {\n    sj55zd: \"f1w7i9ko\",\n    De3pzq: \"f5pduvr\"\n  }\n}, {\n  d: [\".f1w7i9ko{color:var(--colorNeutralForegroundInverted2);}\", \".f5pduvr{background-color:var(--colorNeutralBackgroundInverted);}\"]\n});\n/**\n * Apply styling to the Toast slots based on the state\n */\nexport const useToastStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(toastClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && styles.inverted, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useToastStyles.styles.js.map"],"names":["toastClassNames","useToastStyles_unstable","root","useRootBaseClassName","__resetStyles","useStyles","__styles","inverted","sj55zd","De3pzq","d","state","rootBaseClassName","styles","className","mergeClasses","backgroundAppearance"],"mappings":";;;;;;;;;;;IAEaA,eAAe;eAAfA;;IAeAC,uBAAuB;eAAvBA;;;uBAjByC;AAE/C,MAAMD,kBAAkB;IAC7BE,MAAM;AACR;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAAyW;AACnb,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,UAAU;QACRC,QAAQ;QACRC,QAAQ;IACV;AACF,GAAG;IACDC,GAAG;QAAC;QAA4D;KAAoE;AACtI;AAIO,MAAMT,0BAA0BU,CAAAA;IACrC,MAAMC,oBAAoBT;IAC1B,MAAMU,SAASR;IACfM,MAAMT,IAAI,CAACY,SAAS,GAAGC,IAAAA,mBAAY,EAACf,gBAAgBE,IAAI,EAAEU,mBAAmBD,MAAMK,oBAAoB,KAAK,cAAcH,OAAON,QAAQ,EAAEI,MAAMT,IAAI,CAACY,SAAS;IAC/J,OAAOH;AACT,GACA,iDAAiD"}

package/lib-commonjs/components/ToastContainer/ToastContainerMotion.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ToastContainerMotion", {
+    enumerable: true,
+    get: function() {
+        return ToastContainerMotion;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const ToastContainerMotion = (0, _reactmotion.createPresenceComponent)(({ element })=>({
+        enter: [
+            {
+                keyframes: [
+                    {
+                        marginTop: 0,
+                        minHeight: 0,
+                        maxHeight: 0,
+                        opacity: 0
+                    },
+                    {
+                        marginTop: '16px',
+                        minHeight: 44,
+                        maxHeight: `${element.scrollHeight}px`,
+                        opacity: 0
+                    }
+                ],
+                duration: 200
+            },
+            {
+                keyframes: [
+                    {
+                        opacity: 0
+                    },
+                    {
+                        opacity: 1
+                    }
+                ],
+                delay: 200,
+                duration: 400
+            }
+        ],
+        exit: [
+            {
+                keyframes: [
+                    {
+                        marginTop: '16px',
+                        minHeight: 44,
+                        maxHeight: `${element.scrollHeight}px`
+                    },
+                    {
+                        marginTop: 0,
+                        minHeight: 0,
+                        maxHeight: 0
+                    }
+                ],
+                delay: 400,
+                duration: 200
+            },
+            {
+                keyframes: [
+                    {
+                        opacity: 1
+                    },
+                    {
+                        opacity: 0
+                    }
+                ],
+                duration: 400
+            }
+        ]
+    }));

package/lib-commonjs/components/ToastContainer/ToastContainerMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ToastContainerMotion.js"],"sourcesContent":["import { createPresenceComponent } from '@fluentui/react-motion';\nexport const ToastContainerMotion = createPresenceComponent(({ element })=>({\n        enter: [\n            {\n                keyframes: [\n                    {\n                        marginTop: 0,\n                        minHeight: 0,\n                        maxHeight: 0,\n                        opacity: 0\n                    },\n                    {\n                        marginTop: '16px',\n                        minHeight: 44,\n                        maxHeight: `${element.scrollHeight}px`,\n                        opacity: 0\n                    }\n                ],\n                duration: 200\n            },\n            {\n                keyframes: [\n                    {\n                        opacity: 0\n                    },\n                    {\n                        opacity: 1\n                    }\n                ],\n                delay: 200,\n                duration: 400\n            }\n        ],\n        exit: [\n            {\n                keyframes: [\n                    {\n                        marginTop: '16px',\n                        minHeight: 44,\n                        maxHeight: `${element.scrollHeight}px`\n                    },\n                    {\n                        marginTop: 0,\n                        minHeight: 0,\n                        maxHeight: 0\n                    }\n                ],\n                delay: 400,\n                duration: 200\n            },\n            {\n                keyframes: [\n                    {\n                        opacity: 1\n                    },\n                    {\n                        opacity: 0\n                    }\n                ],\n                duration: 400\n            }\n        ]\n    }));\n"],"names":["ToastContainerMotion","createPresenceComponent","element","enter","keyframes","marginTop","minHeight","maxHeight","opacity","scrollHeight","duration","delay","exit"],"mappings":";;;;+BACaA;;;eAAAA;;;6BAD2B;AACjC,MAAMA,uBAAuBC,IAAAA,oCAAuB,EAAC,CAAC,EAAEC,OAAO,EAAE,GAAI,CAAA;QACpEC,OAAO;YACH;gBACIC,WAAW;oBACP;wBACIC,WAAW;wBACXC,WAAW;wBACXC,WAAW;wBACXC,SAAS;oBACb;oBACA;wBACIH,WAAW;wBACXC,WAAW;wBACXC,WAAW,CAAC,EAAEL,QAAQO,YAAY,CAAC,EAAE,CAAC;wBACtCD,SAAS;oBACb;iBACH;gBACDE,UAAU;YACd;YACA;gBACIN,WAAW;oBACP;wBACII,SAAS;oBACb;oBACA;wBACIA,SAAS;oBACb;iBACH;gBACDG,OAAO;gBACPD,UAAU;YACd;SACH;QACDE,MAAM;YACF;gBACIR,WAAW;oBACP;wBACIC,WAAW;wBACXC,WAAW;wBACXC,WAAW,CAAC,EAAEL,QAAQO,YAAY,CAAC,EAAE,CAAC;oBAC1C;oBACA;wBACIJ,WAAW;wBACXC,WAAW;wBACXC,WAAW;oBACf;iBACH;gBACDI,OAAO;gBACPD,UAAU;YACd;YACA;gBACIN,WAAW;oBACP;wBACII,SAAS;oBACb;oBACA;wBACIA,SAAS;oBACb;iBACH;gBACDE,UAAU;YACd;SACH;IACL,CAAA"}

package/lib-commonjs/components/ToastContainer/renderToastContainer.js

@@ -10,25 +10,24 @@ Object.defineProperty(exports, "renderToastContainer_unstable", {
 });
 const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
 const _reactutilities = require("@fluentui/react-utilities");
-const _reacttransitiongroup = require("react-transition-group");
 const _toastContainerContext = require("../../contexts/toastContainerContext");
+const _ToastContainerMotion = require("./ToastContainerMotion");
 const renderToastContainer_unstable = (state, contextValues)=>{
-    const { onTransitionEntering, visible, transitionTimeout, remove, nodeRef, updateId } = state;
+    const { onMotionFinish, visible, updateId } = state;
     (0, _reactutilities.assertSlots)(state);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacttransitiongroup.Transition, {
-        in: visible,
-        appear: true,
-        unmountOnExit: true,
-        timeout: transitionTimeout,
-        onExited: remove,
-        onEntering: onTransitionEntering,
-        nodeRef: nodeRef,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_toastContainerContext.ToastContainerContextProvider, {
-            value: contextValues.toast,
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {}),
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(state.timer, {}, updateId)
-            ]
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_toastContainerContext.ToastContainerContextProvider, {
+        value: contextValues.toast,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ToastContainerMotion.ToastContainerMotion, {
+            appear: true,
+            onMotionFinish: onMotionFinish,
+            visible: visible,
+            unmountOnExit: true,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+                children: [
+                    state.root.children,
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(state.timer, {}, updateId)
+                ]
+            })
         })
     });
 };

package/lib-commonjs/components/ToastContainer/renderToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToastContainer.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { Transition } from 'react-transition-group';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\n/**\n * Render the final JSX of ToastContainer\n */ export const renderToastContainer_unstable = (state, contextValues)=>{\n    const { onTransitionEntering, visible, transitionTimeout, remove, nodeRef, updateId } = state;\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(Transition, {\n        in: visible,\n        appear: true,\n        unmountOnExit: true,\n        timeout: transitionTimeout,\n        onExited: remove,\n        onEntering: onTransitionEntering,\n        nodeRef: nodeRef,\n        children: /*#__PURE__*/ _jsxs(ToastContainerContextProvider, {\n            value: contextValues.toast,\n            children: [\n                /*#__PURE__*/ _jsx(state.root, {}),\n                /*#__PURE__*/ _jsx(state.timer, {}, updateId)\n            ]\n        })\n    });\n};\n"],"names":["renderToastContainer_unstable","state","contextValues","onTransitionEntering","visible","transitionTimeout","remove","nodeRef","updateId","assertSlots","_jsx","Transition","in","appear","unmountOnExit","timeout","onExited","onEntering","children","_jsxs","ToastContainerContextProvider","value","toast","root","timer"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;gCACjB;sCACD;uCACmB;AAGnC,MAAMA,gCAAgC,CAACC,OAAOC;IACrD,MAAM,EAAEC,oBAAoB,EAAEC,OAAO,EAAEC,iBAAiB,EAAEC,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGP;IACxFQ,IAAAA,2BAAW,EAACR;IACZ,OAAO,WAAW,GAAGS,IAAAA,eAAI,EAACC,gCAAU,EAAE;QAClCC,IAAIR;QACJS,QAAQ;QACRC,eAAe;QACfC,SAASV;QACTW,UAAUV;QACVW,YAAYd;QACZI,SAASA;QACTW,UAAU,WAAW,GAAGC,IAAAA,gBAAK,EAACC,oDAA6B,EAAE;YACzDC,OAAOnB,cAAcoB,KAAK;YAC1BJ,UAAU;gBACN,WAAW,GAAGR,IAAAA,eAAI,EAACT,MAAMsB,IAAI,EAAE,CAAC;gBAChC,WAAW,GAAGb,IAAAA,eAAI,EAACT,MAAMuB,KAAK,EAAE,CAAC,GAAGhB;aACvC;QACL;IACJ;AACJ"}
+{"version":3,"sources":["renderToastContainer.js"],"sourcesContent":["  import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { ToastContainerContextProvider } from '../../contexts/toastContainerContext';\nimport { ToastContainerMotion } from './ToastContainerMotion';\n/**\n * Render the final JSX of ToastContainer\n */ export const renderToastContainer_unstable = (state, contextValues)=>{\n    const { onMotionFinish, visible, updateId } = state;\n    assertSlots(state);\n    return /*#__PURE__*/ _jsx(ToastContainerContextProvider, {\n        value: contextValues.toast,\n        children: /*#__PURE__*/ _jsx(ToastContainerMotion, {\n            appear: true,\n            onMotionFinish: onMotionFinish,\n            visible: visible,\n            unmountOnExit: true,\n            children: /*#__PURE__*/ _jsxs(state.root, {\n                children: [\n                    state.root.children,\n                    /*#__PURE__*/ _jsx(state.timer, {}, updateId)\n                ]\n            })\n        })\n    });\n};\n"],"names":["renderToastContainer_unstable","state","contextValues","onMotionFinish","visible","updateId","assertSlots","_jsx","ToastContainerContextProvider","value","toast","children","ToastContainerMotion","appear","unmountOnExit","_jsxs","root","timer"],"mappings":";;;;+BAMiBA;;;eAAAA;;;4BAN4B;gCACjB;uCACkB;sCACT;AAG1B,MAAMA,gCAAgC,CAACC,OAAOC;IACrD,MAAM,EAAEC,cAAc,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGJ;IAC9CK,IAAAA,2BAAW,EAACL;IACZ,OAAO,WAAW,GAAGM,IAAAA,eAAI,EAACC,oDAA6B,EAAE;QACrDC,OAAOP,cAAcQ,KAAK;QAC1BC,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACK,0CAAoB,EAAE;YAC/CC,QAAQ;YACRV,gBAAgBA;YAChBC,SAASA;YACTU,eAAe;YACfH,UAAU,WAAW,GAAGI,IAAAA,gBAAK,EAACd,MAAMe,IAAI,EAAE;gBACtCL,UAAU;oBACNV,MAAMe,IAAI,CAACL,QAAQ;oBACnB,WAAW,GAAGJ,IAAAA,eAAI,EAACN,MAAMgB,KAAK,EAAE,CAAC,GAAGZ;iBACvC;YACL;QACJ;IACJ;AACJ"}

package/lib-commonjs/components/ToastContainer/useToastContainer.js

@@ -112,32 +112,21 @@ const useToastContainer_unstable = (props, ref)=>{
         play,
         pauseOnWindowBlur
     ]);
-    // It's impossible to animate to height: auto in CSS, the actual pixel value must be known
-    // Get the height of the toast before animation styles have been applied and set a CSS
-    // variable with its height. The CSS variable will be used by the styles
-    const onTransitionEntering = ()=>{
-        if (!toastRef.current) {
-            return;
-        }
-        const element = toastRef.current;
-        element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);
-    };
     // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController
     const userRootSlot = data.root;
-    // Using a ref callback here because addEventListener supports `once`
-    const toastAnimationRef = _react.useCallback((el)=>{
-        if (el && toastRef.current) {
-            toastRef.current.addEventListener('animationend', ()=>{
-                // start toast once it's fully animated in
-                play();
-                onStatusChange('visible');
-            }, {
-                once: true
-            });
+    const onMotionFinish = _react.useCallback((_, { direction })=>{
+        if (direction === 'exit') {
+            remove();
+        }
+        if (direction === 'enter') {
+            // start toast once it's fully animated in
+            play();
+            onStatusChange('visible');
         }
     }, [
+        onStatusChange,
         play,
-        onStatusChange
+        remove
     ]);
     const onMouseEnter = (0, _reactutilities.useEventCallback)((e)=>{
         var _userRootSlot_onMouseEnter;
@@ -212,7 +201,7 @@ const useToastContainer_unstable = (props, ref)=>{
             // FIXME:
             // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
             // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-            ref: (0, _reactutilities.useMergedRefs)(ref, toastRef, toastAnimationRef),
+            ref: (0, _reactutilities.useMergedRefs)(ref, toastRef),
             children,
             tabIndex: 0,
             role: 'listitem',
@@ -228,16 +217,18 @@ const useToastContainer_unstable = (props, ref)=>{
             elementType: 'div'
         }),
         timerTimeout,
-        transitionTimeout: 500,
+        transitionTimeout: 0,
         running,
         visible,
         remove,
         close,
-        onTransitionEntering,
+        onTransitionEntering: ()=>{
+        /* no-op */ },
         updateId,
         nodeRef: toastRef,
         intent,
         titleId,
-        bodyId
+        bodyId,
+        onMotionFinish
     };
 };

package/lib-commonjs/components/ToastContainer/useToastContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { Delete, Tab } from '@fluentui/keyboard-keys';\nimport { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { Timer } from '../Timer/Timer';\nconst intentPolitenessMap = {\n    success: 'assertive',\n    warning: 'assertive',\n    error: 'assertive',\n    info: 'polite'\n};\n/**\n * Create the state required to render ToastContainer.\n *\n * The returned state can be modified with hooks such as useToastContainerStyles_unstable,\n * before being passed to renderToastContainer_unstable.\n *\n * @param props - props from this instance of ToastContainer\n * @param ref - reference to root HTMLElement of ToastContainer\n */ export const useToastContainer_unstable = (props, ref)=>{\n    const { visible, children, close: closeProp, remove, updateId, announce, data, timeout: timerTimeout, politeness: desiredPoliteness, intent = 'info', pauseOnHover, pauseOnWindowBlur, imperativeRef, tryRestoreFocus, ...rest } = props;\n    const titleId = useId('toast-title');\n    const bodyId = useId('toast-body');\n    const toastRef = React.useRef(null);\n    const { targetDocument } = useFluent_unstable();\n    const [running, setRunning] = React.useState(false);\n    const imperativePauseRef = React.useRef(false);\n    const focusedToastBeforeClose = React.useRef(false);\n    const focusableGroupAttribute = useFocusableGroup({\n        tabBehavior: 'limited-trap-focus',\n        // Users should only use Tab to focus into the toast\n        // Escape is already reserved to dismiss all toasts\n        ignoreDefaultKeydown: {\n            Tab: true,\n            Escape: true,\n            Enter: true\n        }\n    });\n    const close = useEventCallback(()=>{\n        var _toastRef_current;\n        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n        if (activeElement && ((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains(activeElement))) {\n            focusedToastBeforeClose.current = true;\n        }\n        closeProp();\n    });\n    const onStatusChange = useEventCallback((status)=>{\n        var _props_onStatusChange;\n        return (_props_onStatusChange = props.onStatusChange) === null || _props_onStatusChange === void 0 ? void 0 : _props_onStatusChange.call(props, null, {\n            status,\n            ...props\n        });\n    });\n    const pause = useEventCallback(()=>setRunning(false));\n    const play = useEventCallback(()=>{\n        var _toastRef_current;\n        if (imperativePauseRef.current) {\n            return;\n        }\n        var _targetDocument_activeElement;\n        const containsActive = !!((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains((_targetDocument_activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) !== null && _targetDocument_activeElement !== void 0 ? _targetDocument_activeElement : null));\n        if (timerTimeout < 0) {\n            setRunning(true);\n            return;\n        }\n        if (!containsActive) {\n            setRunning(true);\n        }\n    });\n    React.useImperativeHandle(imperativeRef, ()=>({\n            focus: ()=>{\n                if (!toastRef.current) {\n                    return;\n                }\n                toastRef.current.focus();\n            },\n            play: ()=>{\n                imperativePauseRef.current = false;\n                play();\n            },\n            pause: ()=>{\n                imperativePauseRef.current = true;\n                pause();\n            }\n        }));\n    React.useEffect(()=>{\n        return ()=>onStatusChange('unmounted');\n    }, [\n        onStatusChange\n    ]);\n    React.useEffect(()=>{\n        if (!targetDocument) {\n            return;\n        }\n        if (pauseOnWindowBlur) {\n            var _targetDocument_defaultView, _targetDocument_defaultView1;\n            (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('focus', play);\n            (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.addEventListener('blur', pause);\n            return ()=>{\n                var _targetDocument_defaultView, _targetDocument_defaultView1;\n                (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('focus', play);\n                (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('blur', pause);\n            };\n        }\n    }, [\n        targetDocument,\n        pause,\n        play,\n        pauseOnWindowBlur\n    ]);\n    // It's impossible to animate to height: auto in CSS, the actual pixel value must be known\n    // Get the height of the toast before animation styles have been applied and set a CSS\n    // variable with its height. The CSS variable will be used by the styles\n    const onTransitionEntering = ()=>{\n        if (!toastRef.current) {\n            return;\n        }\n        const element = toastRef.current;\n        element.style.setProperty('--fui-toast-height', `${element.scrollHeight}px`);\n    };\n    // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n    const userRootSlot = data.root;\n    // Using a ref callback here because addEventListener supports `once`\n    const toastAnimationRef = React.useCallback((el)=>{\n        if (el && toastRef.current) {\n            toastRef.current.addEventListener('animationend', ()=>{\n                // start toast once it's fully animated in\n                play();\n                onStatusChange('visible');\n            }, {\n                once: true\n            });\n        }\n    }, [\n        play,\n        onStatusChange\n    ]);\n    const onMouseEnter = useEventCallback((e)=>{\n        var _userRootSlot_onMouseEnter;\n        pause();\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);\n    });\n    const onMouseLeave = useEventCallback((e)=>{\n        var _userRootSlot_onMouseEnter;\n        play();\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);\n    });\n    const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n    const onKeyDown = useEventCallback((e)=>{\n        var _userRootSlot_onKeyDown;\n        if (e.key === Delete) {\n            e.preventDefault();\n            close();\n        }\n        if (e.key === Tab && e.currentTarget === e.target) {\n            e.preventDefault();\n            if (e.shiftKey) {\n                var _findLastFocusable;\n                (_findLastFocusable = findLastFocusable(e.currentTarget)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n            } else {\n                var _findFirstFocusable;\n                (_findFirstFocusable = findFirstFocusable(e.currentTarget)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n            }\n        }\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onKeyDown = userRootSlot.onKeyDown) === null || _userRootSlot_onKeyDown === void 0 ? void 0 : _userRootSlot_onKeyDown.call(userRootSlot, e);\n    });\n    React.useEffect(()=>{\n        var _toastRef_current;\n        if (!visible) {\n            return;\n        }\n        const politeness = desiredPoliteness !== null && desiredPoliteness !== void 0 ? desiredPoliteness : intentPolitenessMap[intent];\n        var _toastRef_current_textContent;\n        announce((_toastRef_current_textContent = (_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.textContent) !== null && _toastRef_current_textContent !== void 0 ? _toastRef_current_textContent : '', {\n            politeness\n        });\n    }, [\n        announce,\n        desiredPoliteness,\n        toastRef,\n        visible,\n        updateId,\n        intent\n    ]);\n    React.useEffect(()=>{\n        return ()=>{\n            if (focusedToastBeforeClose.current) {\n                focusedToastBeforeClose.current = false;\n                tryRestoreFocus();\n            }\n        };\n    }, [\n        tryRestoreFocus\n    ]);\n    return {\n        components: {\n            timer: Timer,\n            root: 'div'\n        },\n        timer: slot.always({\n            onTimeout: close,\n            running,\n            timeout: timerTimeout !== null && timerTimeout !== void 0 ? timerTimeout : -1\n        }, {\n            elementType: Timer\n        }),\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` 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, toastRef, toastAnimationRef),\n            children,\n            tabIndex: 0,\n            role: 'listitem',\n            'aria-labelledby': titleId,\n            'aria-describedby': bodyId,\n            ...rest,\n            ...userRootSlot,\n            ...focusableGroupAttribute,\n            onMouseEnter,\n            onMouseLeave,\n            onKeyDown\n        }), {\n            elementType: 'div'\n        }),\n        timerTimeout,\n        transitionTimeout: 500,\n        running,\n        visible,\n        remove,\n        close,\n        onTransitionEntering,\n        updateId,\n        nodeRef: toastRef,\n        intent,\n        titleId,\n        bodyId\n    };\n};\n"],"names":["useToastContainer_unstable","intentPolitenessMap","success","warning","error","info","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","useId","bodyId","toastRef","React","useRef","targetDocument","useFluent_unstable","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","focusableGroupAttribute","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Tab","Escape","Enter","useEventCallback","_toastRef_current","activeElement","current","contains","onStatusChange","status","_props_onStatusChange","call","pause","play","_targetDocument_activeElement","containsActive","useImperativeHandle","focus","useEffect","_targetDocument_defaultView","_targetDocument_defaultView1","defaultView","addEventListener","removeEventListener","onTransitionEntering","element","style","setProperty","scrollHeight","userRootSlot","root","toastAnimationRef","useCallback","el","once","onMouseEnter","e","_userRootSlot_onMouseEnter","onMouseLeave","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","_userRootSlot_onKeyDown","key","Delete","preventDefault","currentTarget","target","shiftKey","_findLastFocusable","_findFirstFocusable","_toastRef_current_textContent","textContent","components","timer","Timer","slot","always","onTimeout","elementType","getIntrinsicElementProps","useMergedRefs","tabIndex","role","transitionTimeout","nodeRef"],"mappings":"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"}
+{"version":3,"sources":["useToastContainer.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, useMergedRefs, useEventCallback, useId, slot } from '@fluentui/react-utilities';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { Delete, Tab } from '@fluentui/keyboard-keys';\nimport { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';\nimport { Timer } from '../Timer/Timer';\nconst intentPolitenessMap = {\n    success: 'assertive',\n    warning: 'assertive',\n    error: 'assertive',\n    info: 'polite'\n};\n/**\n * Create the state required to render ToastContainer.\n *\n * The returned state can be modified with hooks such as useToastContainerStyles_unstable,\n * before being passed to renderToastContainer_unstable.\n *\n * @param props - props from this instance of ToastContainer\n * @param ref - reference to root HTMLElement of ToastContainer\n */ export const useToastContainer_unstable = (props, ref)=>{\n    const { visible, children, close: closeProp, remove, updateId, announce, data, timeout: timerTimeout, politeness: desiredPoliteness, intent = 'info', pauseOnHover, pauseOnWindowBlur, imperativeRef, tryRestoreFocus, ...rest } = props;\n    const titleId = useId('toast-title');\n    const bodyId = useId('toast-body');\n    const toastRef = React.useRef(null);\n    const { targetDocument } = useFluent_unstable();\n    const [running, setRunning] = React.useState(false);\n    const imperativePauseRef = React.useRef(false);\n    const focusedToastBeforeClose = React.useRef(false);\n    const focusableGroupAttribute = useFocusableGroup({\n        tabBehavior: 'limited-trap-focus',\n        // Users should only use Tab to focus into the toast\n        // Escape is already reserved to dismiss all toasts\n        ignoreDefaultKeydown: {\n            Tab: true,\n            Escape: true,\n            Enter: true\n        }\n    });\n    const close = useEventCallback(()=>{\n        var _toastRef_current;\n        const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;\n        if (activeElement && ((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains(activeElement))) {\n            focusedToastBeforeClose.current = true;\n        }\n        closeProp();\n    });\n    const onStatusChange = useEventCallback((status)=>{\n        var _props_onStatusChange;\n        return (_props_onStatusChange = props.onStatusChange) === null || _props_onStatusChange === void 0 ? void 0 : _props_onStatusChange.call(props, null, {\n            status,\n            ...props\n        });\n    });\n    const pause = useEventCallback(()=>setRunning(false));\n    const play = useEventCallback(()=>{\n        var _toastRef_current;\n        if (imperativePauseRef.current) {\n            return;\n        }\n        var _targetDocument_activeElement;\n        const containsActive = !!((_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.contains((_targetDocument_activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement) !== null && _targetDocument_activeElement !== void 0 ? _targetDocument_activeElement : null));\n        if (timerTimeout < 0) {\n            setRunning(true);\n            return;\n        }\n        if (!containsActive) {\n            setRunning(true);\n        }\n    });\n    React.useImperativeHandle(imperativeRef, ()=>({\n            focus: ()=>{\n                if (!toastRef.current) {\n                    return;\n                }\n                toastRef.current.focus();\n            },\n            play: ()=>{\n                imperativePauseRef.current = false;\n                play();\n            },\n            pause: ()=>{\n                imperativePauseRef.current = true;\n                pause();\n            }\n        }));\n    React.useEffect(()=>{\n        return ()=>onStatusChange('unmounted');\n    }, [\n        onStatusChange\n    ]);\n    React.useEffect(()=>{\n        if (!targetDocument) {\n            return;\n        }\n        if (pauseOnWindowBlur) {\n            var _targetDocument_defaultView, _targetDocument_defaultView1;\n            (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.addEventListener('focus', play);\n            (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.addEventListener('blur', pause);\n            return ()=>{\n                var _targetDocument_defaultView, _targetDocument_defaultView1;\n                (_targetDocument_defaultView = targetDocument.defaultView) === null || _targetDocument_defaultView === void 0 ? void 0 : _targetDocument_defaultView.removeEventListener('focus', play);\n                (_targetDocument_defaultView1 = targetDocument.defaultView) === null || _targetDocument_defaultView1 === void 0 ? void 0 : _targetDocument_defaultView1.removeEventListener('blur', pause);\n            };\n        }\n    }, [\n        targetDocument,\n        pause,\n        play,\n        pauseOnWindowBlur\n    ]);\n    // Users never actually use ToastContainer as a JSX but imperatively through useToastContainerController\n    const userRootSlot = data.root;\n    const onMotionFinish = React.useCallback((_, { direction })=>{\n        if (direction === 'exit') {\n            remove();\n        }\n        if (direction === 'enter') {\n            // start toast once it's fully animated in\n            play();\n            onStatusChange('visible');\n        }\n    }, [\n        onStatusChange,\n        play,\n        remove\n    ]);\n    const onMouseEnter = useEventCallback((e)=>{\n        var _userRootSlot_onMouseEnter;\n        pause();\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);\n    });\n    const onMouseLeave = useEventCallback((e)=>{\n        var _userRootSlot_onMouseEnter;\n        play();\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);\n    });\n    const { findFirstFocusable, findLastFocusable } = useFocusFinders();\n    const onKeyDown = useEventCallback((e)=>{\n        var _userRootSlot_onKeyDown;\n        if (e.key === Delete) {\n            e.preventDefault();\n            close();\n        }\n        if (e.key === Tab && e.currentTarget === e.target) {\n            e.preventDefault();\n            if (e.shiftKey) {\n                var _findLastFocusable;\n                (_findLastFocusable = findLastFocusable(e.currentTarget)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();\n            } else {\n                var _findFirstFocusable;\n                (_findFirstFocusable = findFirstFocusable(e.currentTarget)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();\n            }\n        }\n        userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onKeyDown = userRootSlot.onKeyDown) === null || _userRootSlot_onKeyDown === void 0 ? void 0 : _userRootSlot_onKeyDown.call(userRootSlot, e);\n    });\n    React.useEffect(()=>{\n        var _toastRef_current;\n        if (!visible) {\n            return;\n        }\n        const politeness = desiredPoliteness !== null && desiredPoliteness !== void 0 ? desiredPoliteness : intentPolitenessMap[intent];\n        var _toastRef_current_textContent;\n        announce((_toastRef_current_textContent = (_toastRef_current = toastRef.current) === null || _toastRef_current === void 0 ? void 0 : _toastRef_current.textContent) !== null && _toastRef_current_textContent !== void 0 ? _toastRef_current_textContent : '', {\n            politeness\n        });\n    }, [\n        announce,\n        desiredPoliteness,\n        toastRef,\n        visible,\n        updateId,\n        intent\n    ]);\n    React.useEffect(()=>{\n        return ()=>{\n            if (focusedToastBeforeClose.current) {\n                focusedToastBeforeClose.current = false;\n                tryRestoreFocus();\n            }\n        };\n    }, [\n        tryRestoreFocus\n    ]);\n    return {\n        components: {\n            timer: Timer,\n            root: 'div'\n        },\n        timer: slot.always({\n            onTimeout: close,\n            running,\n            timeout: timerTimeout !== null && timerTimeout !== void 0 ? timerTimeout : -1\n        }, {\n            elementType: Timer\n        }),\n        root: slot.always(getIntrinsicElementProps('div', {\n            // FIXME:\n            // `ref` 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, toastRef),\n            children,\n            tabIndex: 0,\n            role: 'listitem',\n            'aria-labelledby': titleId,\n            'aria-describedby': bodyId,\n            ...rest,\n            ...userRootSlot,\n            ...focusableGroupAttribute,\n            onMouseEnter,\n            onMouseLeave,\n            onKeyDown\n        }), {\n            elementType: 'div'\n        }),\n        timerTimeout,\n        transitionTimeout: 0,\n        running,\n        visible,\n        remove,\n        close,\n        onTransitionEntering: ()=>{\n        /* no-op */ },\n        updateId,\n        nodeRef: toastRef,\n        intent,\n        titleId,\n        bodyId,\n        onMotionFinish\n    };\n};\n"],"names":["useToastContainer_unstable","intentPolitenessMap","success","warning","error","info","props","ref","visible","children","close","closeProp","remove","updateId","announce","data","timeout","timerTimeout","politeness","desiredPoliteness","intent","pauseOnHover","pauseOnWindowBlur","imperativeRef","tryRestoreFocus","rest","titleId","useId","bodyId","toastRef","React","useRef","targetDocument","useFluent_unstable","running","setRunning","useState","imperativePauseRef","focusedToastBeforeClose","focusableGroupAttribute","useFocusableGroup","tabBehavior","ignoreDefaultKeydown","Tab","Escape","Enter","useEventCallback","_toastRef_current","activeElement","current","contains","onStatusChange","status","_props_onStatusChange","call","pause","play","_targetDocument_activeElement","containsActive","useImperativeHandle","focus","useEffect","_targetDocument_defaultView","_targetDocument_defaultView1","defaultView","addEventListener","removeEventListener","userRootSlot","root","onMotionFinish","useCallback","_","direction","onMouseEnter","e","_userRootSlot_onMouseEnter","onMouseLeave","findFirstFocusable","findLastFocusable","useFocusFinders","onKeyDown","_userRootSlot_onKeyDown","key","Delete","preventDefault","currentTarget","target","shiftKey","_findLastFocusable","_findFirstFocusable","_toastRef_current_textContent","textContent","components","timer","Timer","slot","always","onTimeout","elementType","getIntrinsicElementProps","useMergedRefs","tabIndex","role","transitionTimeout","onTransitionEntering","nodeRef"],"mappings":"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"}

package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js

@@ -21,42 +21,12 @@ const toastContainerClassNames = {
     root: 'fui-ToastContainer',
     timer: 'fui-ToastContainer__timer'
 };
-const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r14b3ftk", null, [
-    ".r14b3ftk{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}",
-    ".r14b3ftk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"
+const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r98b696", null, [
+    ".r98b696{box-sizing:border-box;margin-top:16px;pointer-events:all;border-radius:var(--borderRadiusMedium);}",
+    ".r98b696[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}"
 ]);
-/**
- * Styles for the root slot
- */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
-    enter: {
-        vin17d: "fayl5bc",
-        m1gqa9: "f17oyct0",
-        Bv12yb3: "fvv8lvk"
-    },
-    exit: {
-        vin17d: "f1tk3cza",
-        m1gqa9: "f1nx6yy9",
-        Bv12yb3: "f9wuypy"
-    }
-}, {
-    d: [
-        ".fayl5bc{animation-duration:200ms,400ms;}",
-        ".f17oyct0{animation-delay:0ms,200ms;}",
-        ".fvv8lvk{animation-name:f1rp83na,f5j8bii;}",
-        ".f1tk3cza{animation-duration:400ms,200ms;}",
-        ".f1nx6yy9{animation-delay:0ms,400ms;}",
-        ".f9wuypy{animation-name:fk0lfw7,f1n32sdh;}"
-    ],
-    k: [
-        "@keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}",
-        "@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}",
-        "@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}",
-        "@keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}"
-    ]
-});
 const useToastContainerStyles_unstable = (state)=>{
     const rootBaseClassName = useRootBaseClassName();
-    const styles = useStyles();
-    state.root.className = (0, _react.mergeClasses)(toastContainerClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);
+    state.root.className = (0, _react.mergeClasses)(toastContainerClassNames.root, rootBaseClassName, state.root.className);
     return state;
 }; //# sourceMappingURL=useToastContainerStyles.styles.js.map

package/lib-commonjs/components/ToastContainer/useToastContainerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { __resetStyles, __styles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n  root: 'fui-ToastContainer',\n  timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r14b3ftk\", null, [\".r14b3ftk{box-sizing:border-box;margin-top:16px;min-height:44px;pointer-events:all;border-radius:var(--borderRadiusMedium);--fui-toast-height:44px;}\", \".r14b3ftk[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}\"]);\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n  enter: {\n    vin17d: \"fayl5bc\",\n    m1gqa9: \"f17oyct0\",\n    Bv12yb3: \"fvv8lvk\"\n  },\n  exit: {\n    vin17d: \"f1tk3cza\",\n    m1gqa9: \"f1nx6yy9\",\n    Bv12yb3: \"f9wuypy\"\n  }\n}, {\n  d: [\".fayl5bc{animation-duration:200ms,400ms;}\", \".f17oyct0{animation-delay:0ms,200ms;}\", \".fvv8lvk{animation-name:f1rp83na,f5j8bii;}\", \".f1tk3cza{animation-duration:400ms,200ms;}\", \".f1nx6yy9{animation-delay:0ms,400ms;}\", \".f9wuypy{animation-name:fk0lfw7,f1n32sdh;}\"],\n  k: [\"@keyframes f1rp83na{from{max-height:0;opacity:0;margin-top:0;}to{margin-top:16px;opacity:0;max-height:var(--fui-toast-height);}}\", \"@keyframes f5j8bii{from{opacity:0;}to{opacity:1;}}\", \"@keyframes fk0lfw7{from{opacity:1;}to{opacity:0;}}\", \"@keyframes f1n32sdh{from{opacity:0;}to{opacity:0;margin-top:0;max-height:0;}}\"]\n});\n/**\n * Apply styling to the ToastContainer slots based on the state\n */\nexport const useToastContainerStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useStyles();\n  state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.visible ? styles.enter : styles.exit, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useToastContainerStyles.styles.js.map"],"names":["toastContainerClassNames","useToastContainerStyles_unstable","root","timer","useRootBaseClassName","__resetStyles","useStyles","__styles","enter","vin17d","m1gqa9","Bv12yb3","exit","d","k","state","rootBaseClassName","styles","className","mergeClasses","visible"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IA0BAC,gCAAgC;eAAhCA;;;uBA7ByC;AAG/C,MAAMD,2BAA2B;IACtCE,MAAM;IACNC,OAAO;AACT;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,YAAY,MAAM;IAAC;IAAwJ;CAAqG;AACxU;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IACtCC,OAAO;QACLC,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;IACAC,MAAM;QACJH,QAAQ;QACRC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDE,GAAG;QAAC;QAA6C;QAAyC;QAA8C;QAA8C;QAAyC;KAA6C;IAC5QC,GAAG;QAAC;QAAoI;QAAsD;QAAsD;KAAgF;AACtU;AAIO,MAAMb,mCAAmCc,CAAAA;IAC9C,MAAMC,oBAAoBZ;IAC1B,MAAMa,SAASX;IACfS,MAAMb,IAAI,CAACgB,SAAS,GAAGC,IAAAA,mBAAY,EAACnB,yBAAyBE,IAAI,EAAEc,mBAAmBD,MAAMK,OAAO,GAAGH,OAAOT,KAAK,GAAGS,OAAOL,IAAI,EAAEG,MAAMb,IAAI,CAACgB,SAAS;IACtJ,OAAOH;AACT,GACA,0DAA0D"}
+{"version":3,"sources":["useToastContainerStyles.styles.js"],"sourcesContent":["import { __resetStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const toastContainerClassNames = {\n  root: 'fui-ToastContainer',\n  timer: 'fui-ToastContainer__timer'\n};\nconst useRootBaseClassName = /*#__PURE__*/__resetStyles(\"r98b696\", null, [\".r98b696{box-sizing:border-box;margin-top:16px;pointer-events:all;border-radius:var(--borderRadiusMedium);}\", \".r98b696[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}\"]);\n/**\n * Apply styling to the ToastContainer slots based on the state\n */\nexport const useToastContainerStyles_unstable = state => {\n  const rootBaseClassName = useRootBaseClassName();\n  state.root.className = mergeClasses(toastContainerClassNames.root, rootBaseClassName, state.root.className);\n  return state;\n};\n//# sourceMappingURL=useToastContainerStyles.styles.js.map"],"names":["toastContainerClassNames","useToastContainerStyles_unstable","root","timer","useRootBaseClassName","__resetStyles","state","rootBaseClassName","className","mergeClasses"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IAQAC,gCAAgC;eAAhCA;;;uBAX+B;AAGrC,MAAMD,2BAA2B;IACtCE,MAAM;IACNC,OAAO;AACT;AACA,MAAMC,uBAAuB,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;IAA+G;CAAoG;AAItR,MAAMJ,mCAAmCK,CAAAA;IAC9C,MAAMC,oBAAoBH;IAC1BE,MAAMJ,IAAI,CAACM,SAAS,GAAGC,IAAAA,mBAAY,EAACT,yBAAyBE,IAAI,EAAEK,mBAAmBD,MAAMJ,IAAI,CAACM,SAAS;IAC1G,OAAOF;AACT,GACA,0DAA0D"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-toast",
-  "version": "9.3.43",
+  "version": "9.3.45",
   "description": "Toast component for Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -35,16 +35,16 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "react-transition-group": "^4.4.1",
     "@fluentui/keyboard-keys": "^9.0.7",
-    "@fluentui/react-aria": "^9.11.3",
+    "@fluentui/react-aria": "^9.12.0",
     "@fluentui/react-icons": "^2.0.239",
-    "@fluentui/react-jsx-runtime": "^9.0.38",
-    "@fluentui/react-portal": "^9.4.25",
+    "@fluentui/react-jsx-runtime": "^9.0.39",
+    "@fluentui/react-motion": "9.0.0",
+    "@fluentui/react-portal": "^9.4.27",
     "@fluentui/react-shared-contexts": "^9.19.0",
-    "@fluentui/react-tabster": "^9.21.3",
+    "@fluentui/react-tabster": "^9.21.5",
     "@fluentui/react-theme": "^9.1.19",
-    "@fluentui/react-utilities": "^9.18.9",
+    "@fluentui/react-utilities": "^9.18.10",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },