@fluentui/react-toast 9.0.6 → 9.1.1

package/CHANGELOG.json

@@ -2,7 +2,121 @@
   "name": "@fluentui/react-toast",
   "entries": [
     {
-      "date": "Tue, 01 Aug 2023 10:14:29 GMT",
+      "date": "Wed, 09 Aug 2023 13:11:49 GMT",
+      "tag": "@fluentui/react-toast_v9.1.1",
+      "version": "9.1.1",
+      "comments": {
+        "patch": [
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-toast",
+            "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
+            "comment": "chore: Update Griffel to latest version"
+          },
+          {
+            "author": "bernardo.sunderhus@gmail.com",
+            "package": "@fluentui/react-toast",
+            "commit": "e615f12c54c8a4acad49930a02c3b703fd64692b",
+            "comment": "chore(teams-prg): migrate to new slot API"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-aria to v9.3.29",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-portal to v9.3.6",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.2",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-tabster to v9.12.1",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-theme to v9.1.11",
+            "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Fri, 04 Aug 2023 08:52:57 GMT",
+      "tag": "@fluentui/react-toast_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-toast",
+            "commit": "495a08579f2d16f082f2b18c299f1a647906b236",
+            "comment": "feat: Add extra keyboard behaviour for multi toast scenario"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-aria to v9.3.28",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-portal to v9.3.5",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.7.1",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-tabster to v9.12.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-theme to v9.1.10",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-toast",
+            "comment": "Bump @fluentui/react-utilities to v9.11.0",
+            "commit": "0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 01 Aug 2023 10:17:21 GMT",
       "tag": "@fluentui/react-toast_v9.0.6",
       "version": "9.0.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @fluentui/react-toast
 
-This log was last generated on Tue, 01 Aug 2023 10:14:29 GMT and should not be manually modified.
+This log was last generated on Wed, 09 Aug 2023 13:11:49 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.1.1)
+
+Wed, 09 Aug 2023 13:11:49 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.1.0..@fluentui/react-toast_v9.1.1)
+
+### Patches
+
+- chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
+- chore(teams-prg): migrate to new slot API ([PR #28751](https://github.com/microsoft/fluentui/pull/28751) by bernardo.sunderhus@gmail.com)
+- Bump @fluentui/react-aria to v9.3.29 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-portal to v9.3.6 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.2 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-tabster to v9.12.1 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+- Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
+
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.1.0)
+
+Fri, 04 Aug 2023 08:52:57 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.0.6..@fluentui/react-toast_v9.1.0)
+
+### Minor changes
+
+- feat: Add extra keyboard behaviour for multi toast scenario ([PR #28660](https://github.com/microsoft/fluentui/pull/28660) by lingfangao@hotmail.com)
+- Bump @fluentui/react-aria to v9.3.28 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.13 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-portal to v9.3.5 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.7.1 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-tabster to v9.12.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-theme to v9.1.10 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+- Bump @fluentui/react-utilities to v9.11.0 ([commit](https://github.com/microsoft/fluentui/commit/0bf7d9438c1d0ff90cd2b28bc4cceb4f807afbca) by beachball)
+
 ## [9.0.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-toast_v9.0.6)
 
-Tue, 01 Aug 2023 10:14:29 GMT 
+Tue, 01 Aug 2023 10:17:21 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-toast_v9.0.5..@fluentui/react-toast_v9.0.6)
 
 ### Patches

package/lib/components/AriaLive/renderAriaLive.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of AriaLive
  */ export const renderAriaLive_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(slots.assertive, slotProps.assertive), /*#__PURE__*/ createElement(slots.polite, slotProps.polite));
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(state.assertive, null), /*#__PURE__*/ createElement(state.polite, null));
 };

package/lib/components/AriaLive/renderAriaLive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderAriaLive.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { AriaLiveState, AriaLiveSlots } from './AriaLive.types';\n\n/**\n * Render the final JSX of AriaLive\n */\nexport const renderAriaLive_unstable = (state: AriaLiveState) => {\n  const { slots, slotProps } = getSlotsNext<AriaLiveSlots>(state);\n\n  return (\n    <>\n      <slots.assertive {...slotProps.assertive} />\n      <slots.polite {...slotProps.polite} />\n    </>\n  );\n};\n"],"names":["createElement","Fragment","getSlotsNext","renderAriaLive_unstable","state","slots","slotProps","assertive","polite"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/D,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA4BE;IAEzD,qBACE,AAbJ,cADA,8BAeM,AAdN,cAcOC,MAAME,SAAS,EAAKD,UAAUC,SAAS,iBACxC,AAfN,cAeOF,MAAMG,MAAM,EAAKF,UAAUE,MAAM;AAGxC,EAAE"}
+{"version":3,"sources":["renderAriaLive.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { AriaLiveState, AriaLiveSlots } from './AriaLive.types';\n\n/**\n * Render the final JSX of AriaLive\n */\nexport const renderAriaLive_unstable = (state: AriaLiveState) => {\n  assertSlots<AriaLiveSlots>(state);\n\n  return (\n    <>\n      <state.assertive />\n      <state.polite />\n    </>\n  );\n};\n"],"names":["createElement","Fragment","assertSlots","renderAriaLive_unstable","state","assertive","polite"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC,QAAyB;IAC/DF,YAA2BE;IAE3B,qBACE,AAbJ,cADA,8BAeM,AAdN,cAcOA,MAAMC,SAAS,uBAChB,AAfN,cAeOD,MAAME,MAAM;AAGnB,EAAE"}

package/lib/components/AriaLive/useAriaLive.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { resolveShorthand, createPriorityQueue, useEventCallback } from '@fluentui/react-utilities';
+import { createPriorityQueue, useEventCallback, slot } from '@fluentui/react-utilities';
 /** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;
 /**
  * Create the state required to render AriaLive.
@@ -55,19 +55,19 @@ import { resolveShorthand, createPriorityQueue, useEventCallback } from '@fluent
             assertive: 'div',
             polite: 'div'
         },
-        assertive: resolveShorthand(props.assertive, {
-            required: true,
+        assertive: slot.always(props.assertive, {
             defaultProps: {
                 'aria-live': 'assertive',
                 children: assertiveMessage
-            }
+            },
+            elementType: 'div'
         }),
-        polite: resolveShorthand(props.polite, {
-            required: true,
+        polite: slot.always(props.polite, {
             defaultProps: {
                 'aria-live': 'polite',
                 children: politeMessage
-            }
+            },
+            elementType: 'div'
         })
     };
 };

package/lib/components/AriaLive/useAriaLive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useAriaLive.ts"],"sourcesContent":["import * as React from 'react';\nimport { resolveShorthand, createPriorityQueue, useEventCallback } from '@fluentui/react-utilities';\nimport type { AnnounceOptions, AriaLiveProps, AriaLiveState, LiveMessage } from './AriaLive.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\n/**\n * Create the state required to render AriaLive.\n *\n * The returned state can be modified with hooks such as useAriaLiveStyles_unstable,\n * before being passed to renderAriaLive_unstable.\n *\n * @param props - props from this instance of AriaLive\n */\nexport const useAriaLive_unstable = (props: AriaLiveProps): AriaLiveState => {\n  const [currentMessage, setCurrentMessage] = React.useState<LiveMessage | undefined>(undefined);\n  // Can't rely on Date.now() if user invokes announce more than once in a code block\n  const order = React.useRef(0);\n  const [messageQueue] = React.useState(() =>\n    createPriorityQueue<LiveMessage>((a, b) => {\n      if (a.politeness === b.politeness) {\n        return a.createdAt - b.createdAt;\n      }\n\n      return a.politeness === 'assertive' ? -1 : 1;\n    }),\n  );\n\n  const announce = useEventCallback((message: string, options: AnnounceOptions) => {\n    const { politeness } = options;\n    if (message === currentMessage?.message) {\n      return;\n    }\n\n    const liveMessage: LiveMessage = {\n      message,\n      politeness,\n      createdAt: order.current++,\n    };\n\n    if (!currentMessage) {\n      setCurrentMessage(liveMessage);\n    } else {\n      messageQueue.enqueue(liveMessage);\n    }\n  });\n\n  React.useEffect(() => {\n    const timeout = setTimeout(() => {\n      if (messageQueue.peek()) {\n        setCurrentMessage(messageQueue.dequeue());\n      } else {\n        setCurrentMessage(undefined);\n      }\n    }, MESSAGE_DURATION);\n\n    return () => clearTimeout(timeout);\n  }, [currentMessage, messageQueue]);\n\n  React.useImperativeHandle(props.announceRef, () => announce);\n\n  const politeMessage = currentMessage?.politeness === 'polite' ? currentMessage.message : undefined;\n  const assertiveMessage = currentMessage?.politeness === 'assertive' ? currentMessage.message : undefined;\n\n  return {\n    components: {\n      assertive: 'div',\n      polite: 'div',\n    },\n\n    assertive: resolveShorthand(props.assertive, {\n      required: true,\n      defaultProps: { 'aria-live': 'assertive', children: assertiveMessage },\n    }),\n    polite: resolveShorthand(props.polite, {\n      required: true,\n      defaultProps: { 'aria-live': 'polite', children: politeMessage },\n    }),\n  };\n};\n"],"names":["React","resolveShorthand","createPriorityQueue","useEventCallback","MESSAGE_DURATION","useAriaLive_unstable","props","currentMessage","setCurrentMessage","useState","undefined","order","useRef","messageQueue","a","b","politeness","createdAt","announce","message","options","liveMessage","current","enqueue","useEffect","timeout","setTimeout","peek","dequeue","clearTimeout","useImperativeHandle","announceRef","politeMessage","assertiveMessage","components","assertive","polite","required","defaultProps","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,EAAEC,mBAAmB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAGpG,gHAAgH,GAChH,MAAMC,mBAAmB;AAEzB;;;;;;;CAOC,GACD,OAAO,MAAMC,uBAAuB,CAACC,QAAwC;IAC3E,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGR,MAAMS,QAAQ,CAA0BC;IACpF,mFAAmF;IACnF,MAAMC,QAAQX,MAAMY,MAAM,CAAC;IAC3B,MAAM,CAACC,aAAa,GAAGb,MAAMS,QAAQ,CAAC,IACpCP,oBAAiC,CAACY,GAAGC,IAAM;YACzC,IAAID,EAAEE,UAAU,KAAKD,EAAEC,UAAU,EAAE;gBACjC,OAAOF,EAAEG,SAAS,GAAGF,EAAEE,SAAS;YAClC,CAAC;YAED,OAAOH,EAAEE,UAAU,KAAK,cAAc,CAAC,IAAI,CAAC;QAC9C;IAGF,MAAME,WAAWf,iBAAiB,CAACgB,SAAiBC,UAA6B;QAC/E,MAAM,EAAEJ,WAAU,EAAE,GAAGI;QACvB,IAAID,YAAYZ,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBY,OAAO,AAAD,GAAG;YACvC;QACF,CAAC;QAED,MAAME,cAA2B;YAC/BF;YACAH;YACAC,WAAWN,MAAMW,OAAO;QAC1B;QAEA,IAAI,CAACf,gBAAgB;YACnBC,kBAAkBa;QACpB,OAAO;YACLR,aAAaU,OAAO,CAACF;QACvB,CAAC;IACH;IAEArB,MAAMwB,SAAS,CAAC,IAAM;QACpB,MAAMC,UAAUC,WAAW,IAAM;YAC/B,IAAIb,aAAac,IAAI,IAAI;gBACvBnB,kBAAkBK,aAAae,OAAO;YACxC,OAAO;gBACLpB,kBAAkBE;YACpB,CAAC;QACH,GAAGN;QAEH,OAAO,IAAMyB,aAAaJ;IAC5B,GAAG;QAAClB;QAAgBM;KAAa;IAEjCb,MAAM8B,mBAAmB,CAACxB,MAAMyB,WAAW,EAAE,IAAMb;IAEnD,MAAMc,gBAAgBzB,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBS,UAAU,AAAD,MAAM,WAAWT,eAAeY,OAAO,GAAGT,SAAS;IAClG,MAAMuB,mBAAmB1B,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBS,UAAU,AAAD,MAAM,cAAcT,eAAeY,OAAO,GAAGT,SAAS;IAExG,OAAO;QACLwB,YAAY;YACVC,WAAW;YACXC,QAAQ;QACV;QAEAD,WAAWlC,iBAAiBK,MAAM6B,SAAS,EAAE;YAC3CE,UAAU,IAAI;YACdC,cAAc;gBAAE,aAAa;gBAAaC,UAAUN;YAAiB;QACvE;QACAG,QAAQnC,iBAAiBK,MAAM8B,MAAM,EAAE;YACrCC,UAAU,IAAI;YACdC,cAAc;gBAAE,aAAa;gBAAUC,UAAUP;YAAc;QACjE;IACF;AACF,EAAE"}
+{"version":3,"sources":["useAriaLive.ts"],"sourcesContent":["import * as React from 'react';\nimport { createPriorityQueue, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { AnnounceOptions, AriaLiveProps, AriaLiveState, LiveMessage } from './AriaLive.types';\n\n/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */\nconst MESSAGE_DURATION = 500;\n\n/**\n * Create the state required to render AriaLive.\n *\n * The returned state can be modified with hooks such as useAriaLiveStyles_unstable,\n * before being passed to renderAriaLive_unstable.\n *\n * @param props - props from this instance of AriaLive\n */\nexport const useAriaLive_unstable = (props: AriaLiveProps): AriaLiveState => {\n  const [currentMessage, setCurrentMessage] = React.useState<LiveMessage | undefined>(undefined);\n  // Can't rely on Date.now() if user invokes announce more than once in a code block\n  const order = React.useRef(0);\n  const [messageQueue] = React.useState(() =>\n    createPriorityQueue<LiveMessage>((a, b) => {\n      if (a.politeness === b.politeness) {\n        return a.createdAt - b.createdAt;\n      }\n\n      return a.politeness === 'assertive' ? -1 : 1;\n    }),\n  );\n\n  const announce = useEventCallback((message: string, options: AnnounceOptions) => {\n    const { politeness } = options;\n    if (message === currentMessage?.message) {\n      return;\n    }\n\n    const liveMessage: LiveMessage = {\n      message,\n      politeness,\n      createdAt: order.current++,\n    };\n\n    if (!currentMessage) {\n      setCurrentMessage(liveMessage);\n    } else {\n      messageQueue.enqueue(liveMessage);\n    }\n  });\n\n  React.useEffect(() => {\n    const timeout = setTimeout(() => {\n      if (messageQueue.peek()) {\n        setCurrentMessage(messageQueue.dequeue());\n      } else {\n        setCurrentMessage(undefined);\n      }\n    }, MESSAGE_DURATION);\n\n    return () => clearTimeout(timeout);\n  }, [currentMessage, messageQueue]);\n\n  React.useImperativeHandle(props.announceRef, () => announce);\n\n  const politeMessage = currentMessage?.politeness === 'polite' ? currentMessage.message : undefined;\n  const assertiveMessage = currentMessage?.politeness === 'assertive' ? currentMessage.message : undefined;\n\n  return {\n    components: {\n      assertive: 'div',\n      polite: 'div',\n    },\n\n    assertive: slot.always(props.assertive, {\n      defaultProps: { 'aria-live': 'assertive', children: assertiveMessage },\n      elementType: 'div',\n    }),\n    polite: slot.always(props.polite, {\n      defaultProps: { 'aria-live': 'polite', children: politeMessage },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","createPriorityQueue","useEventCallback","slot","MESSAGE_DURATION","useAriaLive_unstable","props","currentMessage","setCurrentMessage","useState","undefined","order","useRef","messageQueue","a","b","politeness","createdAt","announce","message","options","liveMessage","current","enqueue","useEffect","timeout","setTimeout","peek","dequeue","clearTimeout","useImperativeHandle","announceRef","politeMessage","assertiveMessage","components","assertive","polite","always","defaultProps","children","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,mBAAmB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxF,gHAAgH,GAChH,MAAMC,mBAAmB;AAEzB;;;;;;;CAOC,GACD,OAAO,MAAMC,uBAAuB,CAACC,QAAwC;IAC3E,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGR,MAAMS,QAAQ,CAA0BC;IACpF,mFAAmF;IACnF,MAAMC,QAAQX,MAAMY,MAAM,CAAC;IAC3B,MAAM,CAACC,aAAa,GAAGb,MAAMS,QAAQ,CAAC,IACpCR,oBAAiC,CAACa,GAAGC,IAAM;YACzC,IAAID,EAAEE,UAAU,KAAKD,EAAEC,UAAU,EAAE;gBACjC,OAAOF,EAAEG,SAAS,GAAGF,EAAEE,SAAS;YAClC,CAAC;YAED,OAAOH,EAAEE,UAAU,KAAK,cAAc,CAAC,IAAI,CAAC;QAC9C;IAGF,MAAME,WAAWhB,iBAAiB,CAACiB,SAAiBC,UAA6B;QAC/E,MAAM,EAAEJ,WAAU,EAAE,GAAGI;QACvB,IAAID,YAAYZ,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBY,OAAO,AAAD,GAAG;YACvC;QACF,CAAC;QAED,MAAME,cAA2B;YAC/BF;YACAH;YACAC,WAAWN,MAAMW,OAAO;QAC1B;QAEA,IAAI,CAACf,gBAAgB;YACnBC,kBAAkBa;QACpB,OAAO;YACLR,aAAaU,OAAO,CAACF;QACvB,CAAC;IACH;IAEArB,MAAMwB,SAAS,CAAC,IAAM;QACpB,MAAMC,UAAUC,WAAW,IAAM;YAC/B,IAAIb,aAAac,IAAI,IAAI;gBACvBnB,kBAAkBK,aAAae,OAAO;YACxC,OAAO;gBACLpB,kBAAkBE;YACpB,CAAC;QACH,GAAGN;QAEH,OAAO,IAAMyB,aAAaJ;IAC5B,GAAG;QAAClB;QAAgBM;KAAa;IAEjCb,MAAM8B,mBAAmB,CAACxB,MAAMyB,WAAW,EAAE,IAAMb;IAEnD,MAAMc,gBAAgBzB,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBS,UAAU,AAAD,MAAM,WAAWT,eAAeY,OAAO,GAAGT,SAAS;IAClG,MAAMuB,mBAAmB1B,CAAAA,2BAAAA,4BAAAA,KAAAA,IAAAA,eAAgBS,UAAU,AAAD,MAAM,cAAcT,eAAeY,OAAO,GAAGT,SAAS;IAExG,OAAO;QACLwB,YAAY;YACVC,WAAW;YACXC,QAAQ;QACV;QAEAD,WAAWhC,KAAKkC,MAAM,CAAC/B,MAAM6B,SAAS,EAAE;YACtCG,cAAc;gBAAE,aAAa;gBAAaC,UAAUN;YAAiB;YACrEO,aAAa;QACf;QACAJ,QAAQjC,KAAKkC,MAAM,CAAC/B,MAAM8B,MAAM,EAAE;YAChCE,cAAc;gBAAE,aAAa;gBAAUC,UAAUP;YAAc;YAC/DQ,aAAa;QACf;IACF;AACF,EAAE"}

package/lib/components/Timer/useTimerStyles.styles.js

@@ -1,3 +1,3 @@
 import { __resetStyles } from '@griffel/react';
-export const useBaseAnimationStyles = /*#__PURE__*/__resetStyles("r17x0t3n", "r75casi", [".r17x0t3n{-webkit-animation-name:rsacmq1;animation-name:rsacmq1;}", "@-webkit-keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", "@-webkit-keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", "@keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", ".r75casi{-webkit-animation-name:rsacmq1;animation-name:rsacmq1;}"]);
+export const useBaseAnimationStyles = /*#__PURE__*/__resetStyles("r16zaflb", "r75casi", [".r16zaflb{animation-name:rsacmq1;}", "@keyframes rsacmq1{from{opacity:0;}to{opacity:0;}}", ".r75casi{animation-name:rsacmq1;}"]);
 //# sourceMappingURL=useTimerStyles.styles.js.map

package/lib/components/Timer/useTimerStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","useBaseAnimationStyles"],"sources":["useTimerStyles.styles.js"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\nexport const useBaseAnimationStyles = makeResetStyles({\n    animationName: {\n        from: {\n            opacity: 0\n        },\n        to: {\n            opacity: 0\n        }\n    }\n});\n"],"mappings":"AAAA,SAAAA,aAAA,QAAgC,gBAAgB;AAChD,OAAO,MAAMC,sBAAsB,gBAAGD,aAAA,mVASrC,CAAC"}
+{"version":3,"names":["__resetStyles","useBaseAnimationStyles"],"sources":["useTimerStyles.styles.js"],"sourcesContent":["import { makeResetStyles } from '@griffel/react';\nexport const useBaseAnimationStyles = makeResetStyles({\n    animationName: {\n        from: {\n            opacity: 0\n        },\n        to: {\n            opacity: 0\n        }\n    }\n});\n"],"mappings":"AAAA,SAAAA,aAAA,QAAgC,gBAAgB;AAChD,OAAO,MAAMC,sBAAsB,gBAAGD,aAAA,yJASrC,CAAC"}

package/lib/components/Toast/renderToast.js

@@ -1,11 +1,11 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';
 /**
  * Render the final JSX of Toast
  */ export const renderToast_unstable = (state, contextValues)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(BackgroundAppearanceProvider, {
         value: contextValues.backgroundAppearance
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root));
+    }, /*#__PURE__*/ createElement(state.root, null));
 };

package/lib/components/Toast/renderToast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToast.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';\nimport type { ToastState, ToastSlots, ToastContextValues } from './Toast.types';\n\n/**\n * Render the final JSX of Toast\n */\nexport const renderToast_unstable = (state: ToastState, contextValues: ToastContextValues) => {\n  const { slots, slotProps } = getSlotsNext<ToastSlots>(state);\n\n  return (\n    <BackgroundAppearanceProvider value={contextValues.backgroundAppearance}>\n      <slots.root {...slotProps.root} />\n    </BackgroundAppearanceProvider>\n  );\n};\n"],"names":["createElement","getSlotsNext","BackgroundAppearanceProvider","renderToast_unstable","state","contextValues","slots","slotProps","value","backgroundAppearance","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,4BAA4B,QAAQ,kCAAkC;AAG/E;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC,gBAAsC;IAC5F,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGN,aAAyBG;IAEtD,qBACE,AAdJ,cAcKF;QAA6BM,OAAOH,cAAcI,oBAAoB;qBACrE,AAfN,cAeOH,MAAMI,IAAI,EAAKH,UAAUG,IAAI;AAGpC,EAAE"}
+{"version":3,"sources":["renderToast.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceProvider } from '@fluentui/react-shared-contexts';\nimport type { ToastState, ToastSlots, ToastContextValues } from './Toast.types';\n\n/**\n * Render the final JSX of Toast\n */\nexport const renderToast_unstable = (state: ToastState, contextValues: ToastContextValues) => {\n  assertSlots<ToastSlots>(state);\n\n  return (\n    <BackgroundAppearanceProvider value={contextValues.backgroundAppearance}>\n      <state.root />\n    </BackgroundAppearanceProvider>\n  );\n};\n"],"names":["createElement","assertSlots","BackgroundAppearanceProvider","renderToast_unstable","state","contextValues","value","backgroundAppearance","root"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,4BAA4B,QAAQ,kCAAkC;AAG/E;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC,gBAAsC;IAC5FJ,YAAwBG;IAExB,qBACE,AAdJ,cAcKF;QAA6BI,OAAOD,cAAcE,oBAAoB;qBACrE,AAfN,cAeOH,MAAMI,IAAI;AAGjB,EAAE"}

package/lib/components/Toast/useToast.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 /**
  * Create the state required to render Toast.
  *
@@ -13,9 +13,11 @@ import { getNativeElementProps } from '@fluentui/react-utilities';
         components: {
             root: 'div'
         },
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref,
             ...props
+        }), {
+            elementType: 'div'
         }),
         backgroundAppearance: props.appearance
     };

package/lib/components/Toast/useToast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToast.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps } from '@fluentui/react-utilities';\nimport type { ToastProps, ToastState } from './Toast.types';\n\n/**\n * Create the state required to render Toast.\n *\n * The returned state can be modified with hooks such as useToastStyles_unstable,\n * before being passed to renderToast_unstable.\n *\n * @param props - props from this instance of Toast\n * @param ref - reference to root HTMLElement of Toast\n */\nexport const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref,\n      ...props,\n    }),\n    backgroundAppearance: props.appearance,\n  };\n};\n"],"names":["React","getNativeElementProps","useToast_unstable","props","ref","components","root","backgroundAppearance","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,4BAA4B;AAGlE;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA4C;IAC/F,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,sBAAsB,OAAO;YACjCG;YACA,GAAGD,KAAK;QACV;QACAI,sBAAsBJ,MAAMK,UAAU;IACxC;AACF,EAAE"}
+{"version":3,"sources":["useToast.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastProps, ToastState } from './Toast.types';\n\n/**\n * Create the state required to render Toast.\n *\n * The returned state can be modified with hooks such as useToastStyles_unstable,\n * before being passed to renderToast_unstable.\n *\n * @param props - props from this instance of Toast\n * @param ref - reference to root HTMLElement of Toast\n */\nexport const useToast_unstable = (props: ToastProps, ref: React.Ref<HTMLElement>): ToastState => {\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance: props.appearance,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useToast_unstable","props","ref","components","root","always","elementType","backgroundAppearance","appearance"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAGxE;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA4C;IAC/F,OAAO;QACLC,YAAY;YACVC,MAAM;QACR;QACAA,MAAML,KAAKM,MAAM,CACfP,sBAAsB,OAAO;YAC3BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEK,aAAa;QAAM;QAEvBC,sBAAsBN,MAAMO,UAAU;IACxC;AACF,EAAE"}

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("rzyoxeq", "r1lipnsg", [".rzyoxeq{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}", ".r1lipnsg{display:-ms-grid;display:grid;-ms-grid-columns:auto 1fr auto;grid-template-columns:auto 1fr auto;padding-top:12px;padding-left:12px;padding-bottom:12px;padding-right:12px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color: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("rzyoxeq", "r1lipnsg", [".rzyoxeq{display:grid;grid-template-columns:auto 1fr auto;padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px;border-bottom-right-radius:var(--borderRadiusMedium);border-bottom-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-width:1px;border-right-width:1px;border-bottom-width:1px;border-left-width:1px;border-top-style:solid;border-right-style:solid;border-bottom-style:solid;border-left-style:solid;border-top-color:var(--colorTransparentStroke);border-right-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);box-shadow:var(--shadow8);font-size:var(--fontSizeBase300);line-height:20px;font-weight:var(--fontWeightSemibold);color:var(--colorNeutralForeground1);background-color:var(--colorNeutralBackground1);}", ".r1lipnsg{display:grid;grid-template-columns:auto 1fr auto;padding-top:12px;padding-left:12px;padding-bottom:12px;padding-right:12px;border-bottom-left-radius:var(--borderRadiusMedium);border-bottom-right-radius:var(--borderRadiusMedium);border-top-left-radius:var(--borderRadiusMedium);border-top-right-radius:var(--borderRadiusMedium);border-top-width:1px;border-left-width:1px;border-bottom-width:1px;border-right-width:1px;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-right-style:solid;border-top-color:var(--colorTransparentStroke);border-left-color:var(--colorTransparentStroke);border-bottom-color:var(--colorTransparentStroke);border-right-color: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","shorthands","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, shorthands } 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    ...shorthands.padding('12px', '12px'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.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,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,66DAY5B,CAAC;AACF,MAAMQ,SAAS,gBAAGP,QAAA;EAAAQ,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,GAAGf,YAAY,CAACG,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"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","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, shorthands } 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    ...shorthands.padding('12px', '12px'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.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,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,eAAe,GAAG;EAC3BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,60DAY5B,CAAC;AACF,MAAMQ,SAAS,gBAAGP,QAAA;EAAAQ,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,GAAGf,YAAY,CAACG,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"}

package/lib/components/ToastBody/renderToastBody.js

@@ -1,8 +1,8 @@
 /** @jsxRuntime classic */ /** @jsxFrag Fragment */ /** @jsx createElement */ import { createElement, Fragment } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 /**
  * Render the final JSX of ToastBody
  */ export const renderToastBody_unstable = (state)=>{
-    const { slots , slotProps  } = getSlotsNext(state);
-    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(slots.root, slotProps.root), slots.subtitle ? /*#__PURE__*/ createElement(slots.subtitle, slotProps.subtitle) : null);
+    assertSlots(state);
+    return /*#__PURE__*/ createElement(Fragment, null, /*#__PURE__*/ createElement(state.root, null), state.subtitle ? /*#__PURE__*/ createElement(state.subtitle, null) : null);
 };

package/lib/components/ToastBody/renderToastBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["renderToastBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } from '@fluentui/react-utilities';\nimport type { ToastBodyState, ToastBodySlots } from './ToastBody.types';\n\n/**\n * Render the final JSX of ToastBody\n */\nexport const renderToastBody_unstable = (state: ToastBodyState) => {\n  const { slots, slotProps } = getSlotsNext<ToastBodySlots>(state);\n\n  return (\n    <>\n      <slots.root {...slotProps.root} />\n      {slots.subtitle ? <slots.subtitle {...slotProps.subtitle} /> : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","getSlotsNext","renderToastBody_unstable","state","slots","slotProps","root","subtitle"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,YAAY,QAAQ,4BAA4B;AAGzD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,QAA0B;IACjE,MAAM,EAAEC,MAAK,EAAEC,UAAS,EAAE,GAAGJ,aAA6BE;IAE1D,qBACE,AAbJ,cADA,8BAeM,AAdN,cAcOC,MAAME,IAAI,EAAKD,UAAUC,IAAI,GAC7BF,MAAMG,QAAQ,iBAAG,AAfxB,cAeyBH,MAAMG,QAAQ,EAAKF,UAAUE,QAAQ,IAAO,IAAI;AAGzE,EAAE"}
+{"version":3,"sources":["renderToastBody.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsxFrag Fragment */\n/** @jsx createElement */\n\nimport { createElement, Fragment } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { ToastBodyState, ToastBodySlots } from './ToastBody.types';\n\n/**\n * Render the final JSX of ToastBody\n */\nexport const renderToastBody_unstable = (state: ToastBodyState) => {\n  assertSlots<ToastBodySlots>(state);\n\n  return (\n    <>\n      <state.root />\n      {state.subtitle ? <state.subtitle /> : null}\n    </>\n  );\n};\n"],"names":["createElement","Fragment","assertSlots","renderToastBody_unstable","state","root","subtitle"],"mappings":"AAAA,wBAAwB,GACxB,sBAAsB,GACtB,uBAAuB,GAEvB,SAASA,aAAa,EAAEC,QAAQ,QAAQ,8BAA8B;AACtE,SAASC,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC,QAA0B;IACjEF,YAA4BE;IAE5B,qBACE,AAbJ,cADA,8BAeM,AAdN,cAcOA,MAAMC,IAAI,SACVD,MAAME,QAAQ,iBAAG,AAfxB,cAeyBF,MAAME,QAAQ,UAAM,IAAI;AAGjD,EAAE"}

package/lib/components/ToastBody/useToastBody.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { getNativeElementProps, slot } from '@fluentui/react-utilities';
 import { useToastContainerContext } from '../../contexts/toastContainerContext';
 import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
 /**
@@ -18,11 +18,15 @@ import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
             root: 'div',
             subtitle: 'div'
         },
-        subtitle: resolveShorthand(props.subtitle),
-        root: getNativeElementProps('div', {
+        subtitle: slot.optional(props.subtitle, {
+            elementType: 'div'
+        }),
+        root: slot.always(getNativeElementProps('div', {
             ref,
             id: bodyId,
             ...props
+        }), {
+            elementType: 'div'
         }),
         backgroundAppearance
     };

package/lib/components/ToastBody/useToastBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useToastBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render ToastBody.\n *\n * The returned state can be modified with hooks such as useToastBodyStyles_unstable,\n * before being passed to renderToastBody_unstable.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */\nexport const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { bodyId } = useToastContainerContext();\n  return {\n    components: {\n      root: 'div',\n      subtitle: 'div',\n    },\n    subtitle: resolveShorthand(props.subtitle),\n    root: getNativeElementProps('div', {\n      ref,\n      id: bodyId,\n      ...props,\n    }),\n    backgroundAppearance,\n  };\n};\n"],"names":["React","getNativeElementProps","resolveShorthand","useToastContainerContext","useBackgroundAppearance","useToastBody_unstable","props","ref","backgroundAppearance","bodyId","components","root","subtitle","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEpF,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,uBAAuB,QAAQ,kCAAkC;AAE1E;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC,MAAgD;IAC3G,MAAMC,uBAAuBJ;IAC7B,MAAM,EAAEK,OAAM,EAAE,GAAGN;IACnB,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUV,iBAAiBI,MAAMM,QAAQ;QACzCD,MAAMV,sBAAsB,OAAO;YACjCM;YACAM,IAAIJ;YACJ,GAAGH,KAAK;QACV;QACAE;IACF;AACF,EAAE"}
+{"version":3,"sources":["useToastBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, slot } from '@fluentui/react-utilities';\nimport type { ToastBodyProps, ToastBodyState } from './ToastBody.types';\nimport { useToastContainerContext } from '../../contexts/toastContainerContext';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render ToastBody.\n *\n * The returned state can be modified with hooks such as useToastBodyStyles_unstable,\n * before being passed to renderToastBody_unstable.\n *\n * @param props - props from this instance of ToastBody\n * @param ref - reference to root HTMLElement of ToastBody\n */\nexport const useToastBody_unstable = (props: ToastBodyProps, ref: React.Ref<HTMLElement>): ToastBodyState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { bodyId } = useToastContainerContext();\n  return {\n    components: {\n      root: 'div',\n      subtitle: 'div',\n    },\n    subtitle: slot.optional(props.subtitle, { elementType: 'div' }),\n    root: slot.always(\n      getNativeElementProps('div', {\n        ref,\n        id: bodyId,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    backgroundAppearance,\n  };\n};\n"],"names":["React","getNativeElementProps","slot","useToastContainerContext","useBackgroundAppearance","useToastBody_unstable","props","ref","backgroundAppearance","bodyId","components","root","subtitle","optional","elementType","always","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,EAAEC,IAAI,QAAQ,4BAA4B;AAExE,SAASC,wBAAwB,QAAQ,uCAAuC;AAChF,SAASC,uBAAuB,QAAQ,kCAAkC;AAE1E;;;;;;;;CAQC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC,MAAgD;IAC3G,MAAMC,uBAAuBJ;IAC7B,MAAM,EAAEK,OAAM,EAAE,GAAGN;IACnB,OAAO;QACLO,YAAY;YACVC,MAAM;YACNC,UAAU;QACZ;QACAA,UAAUV,KAAKW,QAAQ,CAACP,MAAMM,QAAQ,EAAE;YAAEE,aAAa;QAAM;QAC7DH,MAAMT,KAAKa,MAAM,CACfd,sBAAsB,OAAO;YAC3BM;YACAS,IAAIP;YACJ,GAAGH,KAAK;QACV,IACA;YAAEQ,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

package/lib/components/ToastBody/useToastBodyStyles.styles.js

@@ -4,8 +4,8 @@ export const toastBodyClassNames = {
   root: 'fui-ToastBody',
   subtitle: 'fui-ToastBody__subtitle'
 };
-const useRootBaseClassName = /*#__PURE__*/__resetStyles("rnxxsue", null, [".rnxxsue{-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;padding-top:6px;font-size:var(--fontSizeBase300);line-height:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);}"]);
-const useSubtitleBaseClassName = /*#__PURE__*/__resetStyles("rzjw1xk", null, [".rzjw1xk{padding-top:4px;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}"]);
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("rnxxsue", null, [".rnxxsue{grid-column-start:2;grid-column-end:3;padding-top:6px;font-size:var(--fontSizeBase300);line-height:var(--fontSizeBase300);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground1);}"]);
+const useSubtitleBaseClassName = /*#__PURE__*/__resetStyles("rzjw1xk", null, [".rzjw1xk{padding-top:4px;grid-column-start:2;grid-column-end:3;font-size:var(--fontSizeBase200);line-height:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);color:var(--colorNeutralForeground2);}"]);
 const useInvertedStyles = /*#__PURE__*/__styles({
   root: {
     sj55zd: "f1w7i9ko"

package/lib/components/ToastBody/useToastBodyStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","useSubtitleBaseClassName","useInvertedStyles","sj55zd","d","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastBodyClassNames = {\n    root: 'fui-ToastBody',\n    subtitle: 'fui-ToastBody__subtitle'\n};\nconst useRootBaseClassName = makeResetStyles({\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    paddingTop: '6px',\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground1\n});\nconst useSubtitleBaseClassName = makeResetStyles({\n    paddingTop: '4px',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground2\n});\nconst useInvertedStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForegroundInverted2\n    },\n    subtitle: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */ export const useToastBodyStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const subtitleBaseClassName = useSubtitleBaseClassName();\n    const invertedStyles = useInvertedStyles();\n    state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n    if (state.subtitle) {\n        state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,0QAQ5B,CAAC;AACF,MAAMQ,wBAAwB,gBAAGR,aAAA,0QAQhC,CAAC;AACF,MAAMS,iBAAiB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,MAAA;EAAA;EAAAJ,QAAA;IAAAI,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;EACxD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1CI,KAAK,CAACR,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,mBAAmB,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACX,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACY,SAAS,CAAC;EACxK,IAAIJ,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACW,SAAS,GAAGf,YAAY,CAACE,mBAAmB,CAACE,QAAQ,EAAES,qBAAqB,EAAEF,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACV,QAAQ,EAAEO,KAAK,CAACP,QAAQ,CAACW,SAAS,CAAC;EAChM;EACA,OAAOJ,KAAK;AAChB,CAAC"}
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","toastBodyClassNames","root","subtitle","useRootBaseClassName","useSubtitleBaseClassName","useInvertedStyles","sj55zd","d","useToastBodyStyles_unstable","state","rootBaseClassName","subtitleBaseClassName","invertedStyles","className","backgroundAppearance"],"sources":["useToastBodyStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const toastBodyClassNames = {\n    root: 'fui-ToastBody',\n    subtitle: 'fui-ToastBody__subtitle'\n};\nconst useRootBaseClassName = makeResetStyles({\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    paddingTop: '6px',\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.fontSizeBase300,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground1\n});\nconst useSubtitleBaseClassName = makeResetStyles({\n    paddingTop: '4px',\n    gridColumnStart: 2,\n    gridColumnEnd: 3,\n    fontSize: tokens.fontSizeBase200,\n    lineHeight: tokens.fontSizeBase200,\n    fontWeight: tokens.fontWeightRegular,\n    color: tokens.colorNeutralForeground2\n});\nconst useInvertedStyles = makeStyles({\n    root: {\n        color: tokens.colorNeutralForegroundInverted2\n    },\n    subtitle: {\n        color: tokens.colorNeutralForegroundInverted2\n    }\n});\n/**\n * Apply styling to the ToastBody slots based on the state\n */ export const useToastBodyStyles_unstable = (state)=>{\n    const rootBaseClassName = useRootBaseClassName();\n    const subtitleBaseClassName = useSubtitleBaseClassName();\n    const invertedStyles = useInvertedStyles();\n    state.root.className = mergeClasses(toastBodyClassNames.root, rootBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.root, state.root.className);\n    if (state.subtitle) {\n        state.subtitle.className = mergeClasses(toastBodyClassNames.subtitle, subtitleBaseClassName, state.backgroundAppearance === 'inverted' && invertedStyles.subtitle, state.subtitle.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,mBAAmB,GAAG;EAC/BC,IAAI,EAAE,eAAe;EACrBC,QAAQ,EAAE;AACd,CAAC;AACD,MAAMC,oBAAoB,gBAAGP,aAAA,oOAQ5B,CAAC;AACF,MAAMQ,wBAAwB,gBAAGR,aAAA,oOAQhC,CAAC;AACF,MAAMS,iBAAiB,gBAAGR,QAAA;EAAAI,IAAA;IAAAK,MAAA;EAAA;EAAAJ,QAAA;IAAAI,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,2BAA2B,GAAIC,KAAK,IAAG;EACpD,MAAMC,iBAAiB,GAAGP,oBAAoB,CAAC,CAAC;EAChD,MAAMQ,qBAAqB,GAAGP,wBAAwB,CAAC,CAAC;EACxD,MAAMQ,cAAc,GAAGP,iBAAiB,CAAC,CAAC;EAC1CI,KAAK,CAACR,IAAI,CAACY,SAAS,GAAGf,YAAY,CAACE,mBAAmB,CAACC,IAAI,EAAES,iBAAiB,EAAED,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACX,IAAI,EAAEQ,KAAK,CAACR,IAAI,CAACY,SAAS,CAAC;EACxK,IAAIJ,KAAK,CAACP,QAAQ,EAAE;IAChBO,KAAK,CAACP,QAAQ,CAACW,SAAS,GAAGf,YAAY,CAACE,mBAAmB,CAACE,QAAQ,EAAES,qBAAqB,EAAEF,KAAK,CAACK,oBAAoB,KAAK,UAAU,IAAIF,cAAc,CAACV,QAAQ,EAAEO,KAAK,CAACP,QAAQ,CAACW,SAAS,CAAC;EAChM;EACA,OAAOJ,KAAK;AAChB,CAAC"}

package/lib/components/ToastContainer/renderToastContainer.js

@@ -1,12 +1,12 @@
 /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
-import { getSlotsNext } from '@fluentui/react-utilities';
+import { assertSlots } from '@fluentui/react-utilities';
 import { Transition } from 'react-transition-group';
 import { ToastContainerContextProvider } from '../../contexts/toastContainerContext';
 /**
  * Render the final JSX of ToastContainer
  */ export const renderToastContainer_unstable = (state, contextValues)=>{
     const { onTransitionEntering , visible , transitionTimeout , remove , nodeRef  } = state;
-    const { slots , slotProps  } = getSlotsNext(state);
+    assertSlots(state);
     return /*#__PURE__*/ createElement(Transition, {
         in: visible,
         appear: true,
@@ -17,5 +17,5 @@ import { ToastContainerContextProvider } from '../../contexts/toastContainerCont
         nodeRef: nodeRef
     }, /*#__PURE__*/ createElement(ToastContainerContextProvider, {
         value: contextValues.toast
-    }, /*#__PURE__*/ createElement(slots.root, slotProps.root), /*#__PURE__*/ createElement(slots.timer, slotProps.timer)));
+    }, /*#__PURE__*/ createElement(state.root, null), /*#__PURE__*/ createElement(state.timer, null)));
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\nimport { getSlotsNext } 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 } = state;\n  const { slots, slotProps } = getSlotsNext<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        <slots.root {...slotProps.root} />\n        <slots.timer {...slotProps.timer} />\n      </ToastContainerContextProvider>\n    </Transition>\n  );\n};\n"],"names":["createElement","getSlotsNext","Transition","ToastContainerContextProvider","renderToastContainer_unstable","state","contextValues","onTransitionEntering","visible","transitionTimeout","remove","nodeRef","slots","slotProps","in","appear","unmountOnExit","timeout","onExited","onEntering","value","toast","root","timer"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,YAAY,QAAQ,4BAA4B;AACzD,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,gBACG;IACH,MAAM,EAAEC,qBAAoB,EAAEC,QAAO,EAAEC,kBAAiB,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGN;IAC9E,MAAM,EAAEO,MAAK,EAAEC,UAAS,EAAE,GAAGZ,aAAkCI;IAE/D,qBACE,AAnBJ,cAmBKH;QACCY,IAAIN;QACJO,QAAAA,IAAM;QACNC,eAAAA,IAAa;QACbC,SAASR;QACTS,UAAUR;QACVS,YAAYZ;QACZI,SAASA;qBAET,AA5BN,cA4BOR;QAA8BiB,OAAOd,cAAce,KAAK;qBACvD,AA7BR,cA6BST,MAAMU,IAAI,EAAKT,UAAUS,IAAI,iBAC9B,AA9BR,cA8BSV,MAAMW,KAAK,EAAKV,UAAUU,KAAK;AAIxC,EAAE"}
+{"version":3,"sources":["renderToastContainer.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@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 } = 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 />\n      </ToastContainerContextProvider>\n    </Transition>\n  );\n};\n"],"names":["createElement","assertSlots","Transition","ToastContainerContextProvider","renderToastContainer_unstable","state","contextValues","onTransitionEntering","visible","transitionTimeout","remove","nodeRef","in","appear","unmountOnExit","timeout","onExited","onEntering","value","toast","root","timer"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,UAAU,QAAQ,yBAAyB;AAEpD,SAASC,6BAA6B,QAAQ,uCAAuC;AAErF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC,gBACG;IACH,MAAM,EAAEC,qBAAoB,EAAEC,QAAO,EAAEC,kBAAiB,EAAEC,OAAM,EAAEC,QAAO,EAAE,GAAGN;IAC9EJ,YAAiCI;IAEjC,qBACE,AAnBJ,cAmBKH;QACCU,IAAIJ;QACJK,QAAAA,IAAM;QACNC,eAAAA,IAAa;QACbC,SAASN;QACTO,UAAUN;QACVO,YAAYV;QACZI,SAASA;qBAET,AA5BN,cA4BOR;QAA8Be,OAAOZ,cAAca,KAAK;qBACvD,AA7BR,cA6BSd,MAAMe,IAAI,uBACX,AA9BR,cA8BSf,MAAMgB,KAAK;AAIpB,EAAE"}

package/lib/components/ToastContainer/useToastContainer.js

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { getNativeElementProps, useMergedRefs, useEventCallback, resolveShorthand, useId } from '@fluentui/react-utilities';
+import { getNativeElementProps, useMergedRefs, useEventCallback, useId, slot } from '@fluentui/react-utilities';
 import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { Delete, Tab } from '@fluentui/keyboard-keys';
+import { useFocusableGroup, useFocusFinders } from '@fluentui/react-tabster';
 import { Timer } from '../Timer/Timer';
-import { useFocusFinders } from '@fluentui/react-tabster';
 const intentPolitenessMap = {
     success: 'assertive',
     warning: 'assertive',
@@ -26,6 +27,16 @@ const intentPolitenessMap = {
     const [running, setRunning] = React.useState(false);
     const imperativePauseRef = React.useRef(false);
     const focusedToastBeforeClose = React.useRef(false);
+    const focusableGroupAttribute = useFocusableGroup({
+        tabBehavior: 'limited-trap-focus',
+        // Users should only use Tab to focus into the toast
+        // Escape is already reserved to dismiss all toasts
+        ignoreDefaultKeydown: {
+            Tab: true,
+            Escape: true,
+            Enter: true
+        }
+    });
     const close = useEventCallback(()=>{
         var _toastRef_current;
         const activeElement = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.activeElement;
@@ -57,18 +68,12 @@ const intentPolitenessMap = {
             setRunning(true);
         }
     });
-    const { findFirstFocusable  } = useFocusFinders();
     React.useImperativeHandle(imperativeRef, ()=>({
             focus: ()=>{
                 if (!toastRef.current) {
                     return;
                 }
-                const firstFocusable = findFirstFocusable(toastRef.current);
-                if (firstFocusable) {
-                    firstFocusable.focus();
-                } else {
-                    toastRef.current.focus();
-                }
+                toastRef.current.focus();
             },
             play: ()=>{
                 imperativePauseRef.current = false;
@@ -141,12 +146,23 @@ const intentPolitenessMap = {
         play();
         userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onMouseEnter = userRootSlot.onMouseEnter) === null || _userRootSlot_onMouseEnter === void 0 ? void 0 : _userRootSlot_onMouseEnter.call(userRootSlot, e);
     });
+    const { findFirstFocusable , findLastFocusable  } = useFocusFinders();
     const onKeyDown = useEventCallback((e)=>{
         var _userRootSlot_onKeyDown;
-        if (e.key === 'Escape') {
+        if (e.key === Delete) {
             e.preventDefault();
             close();
         }
+        if (e.key === Tab && e.currentTarget === e.target) {
+            e.preventDefault();
+            if (e.shiftKey) {
+                var _findLastFocusable;
+                (_findLastFocusable = findLastFocusable(e.currentTarget)) === null || _findLastFocusable === void 0 ? void 0 : _findLastFocusable.focus();
+            } else {
+                var _findFirstFocusable;
+                (_findFirstFocusable = findFirstFocusable(e.currentTarget)) === null || _findFirstFocusable === void 0 ? void 0 : _findFirstFocusable.focus();
+            }
+        }
         userRootSlot === null || userRootSlot === void 0 ? void 0 : (_userRootSlot_onKeyDown = userRootSlot.onKeyDown) === null || _userRootSlot_onKeyDown === void 0 ? void 0 : _userRootSlot_onKeyDown.call(userRootSlot, e);
     });
     React.useEffect(()=>{
@@ -182,26 +198,29 @@ const intentPolitenessMap = {
             timer: Timer,
             root: 'div'
         },
-        timer: resolveShorthand({
+        timer: slot.always({
             key: updateId,
             onTimeout: close,
             running,
             timeout: timerTimeout !== null && timerTimeout !== void 0 ? timerTimeout : -1
         }, {
-            required: true
+            elementType: Timer
         }),
-        root: getNativeElementProps('div', {
+        root: slot.always(getNativeElementProps('div', {
             ref: useMergedRefs(ref, toastRef, toastAnimationRef),
             children,
-            tabIndex: -1,
-            role: 'group',
+            tabIndex: 0,
+            role: 'listitem',
             'aria-labelledby': titleId,
             'aria-describedby': bodyId,
             ...rest,
             ...userRootSlot,
+            ...focusableGroupAttribute,
             onMouseEnter,
             onMouseLeave,
             onKeyDown
+        }), {
+            elementType: 'div'
         }),
         timerTimeout,
         transitionTimeout: 500,