feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/Toaster.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Toaster", {
+    enumerable: true,
+    get: function() {
+        return Toaster;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useToaster = require("./useToaster");
+const _renderToaster = require("./renderToaster");
+const _useToasterStylesstyles = require("./useToasterStyles.styles");
+const Toaster = (props)=>{
+    const state = (0, _useToaster.useToaster_unstable)(props);
+    (0, _useToasterStylesstyles.useToasterStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useToasterStyles_unstable')(state);
+    return (0, _renderToaster.renderToaster_unstable)(state);
+};
+Toaster.displayName = 'Toaster';

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/Toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toaster/Toaster.tsx"],"sourcesContent":["'use client';\n\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport * as React from 'react';\n\nimport { useToaster_unstable } from './useToaster';\nimport { renderToaster_unstable } from './renderToaster';\nimport { useToasterStyles_unstable } from './useToasterStyles.styles';\nimport type { ToasterProps } from './Toaster.types';\n\n/**\n * Toaster component - renders a collection of toasts dispatched imperatively\n */\nexport const Toaster: React.FC<ToasterProps> = props => {\n  const state = useToaster_unstable(props);\n\n  useToasterStyles_unstable(state);\n  useCustomStyleHook_unstable('useToasterStyles_unstable')(state);\n  return renderToaster_unstable(state);\n};\n\nToaster.displayName = 'Toaster';\n"],"names":["useCustomStyleHook_unstable","React","useToaster_unstable","renderToaster_unstable","useToasterStyles_unstable","Toaster","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;qCAE4C,kCAAkC;iEACvD,QAAQ;4BAEK,eAAe;+BACZ,kBAAkB;wCACf,4BAA4B;AAM/D,MAAMK,UAAkCC,CAAAA;IAC7C,MAAMC,YAAQL,+BAAAA,EAAoBI;QAElCF,iDAAAA,EAA0BG;QAC1BP,gDAAAA,EAA4B,6BAA6BO;IACzD,WAAOJ,qCAAAA,EAAuBI;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG"}

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/Toaster.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering Toaster
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/Toaster.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toaster/Toaster.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { PortalProps } from '@fluentui/react-portal';\nimport { ToasterOptions } from '../../state/types';\nimport { Announce, AriaLiveProps } from '../AriaLive';\n\nexport type ToasterSlots = {\n  /**\n   * NOTE: This root slot maps in exactly the same way to the containers rendered for each toast position\n   * There is no intention (currently) to let users customize the div for each toast position.\n   */\n  root: Slot<'div'>;\n};\n\nexport type ToasterSlotsInternal = ToasterSlots & {\n  bottomEnd?: Slot<'div'>;\n  bottomStart?: Slot<'div'>;\n  topEnd?: Slot<'div'>;\n  topStart?: Slot<'div'>;\n  top?: Slot<'div'>;\n  bottom?: Slot<'div'>;\n};\n\n/**\n * Toaster Props\n */\nexport type ToasterProps = Omit<ComponentProps<ToasterSlots>, 'children'> &\n  Partial<ToasterOptions> &\n  Pick<PortalProps, 'mountNode'> & {\n    /**\n     * User override API for aria-live narration for toasts\n     */\n    announce?: Announce;\n\n    inline?: boolean;\n  };\n\n/**\n * State used in rendering Toaster\n */\nexport type ToasterState = ComponentState<ToasterSlotsInternal> &\n  Pick<AriaLiveProps, 'announceRef'> &\n  Pick<PortalProps, 'mountNode'> &\n  Pick<Required<ToasterProps>, 'announce' | 'inline'> & {\n    offset: ToasterOptions['offset'] | undefined;\n    renderAriaLive: boolean;\n    dir: 'rtl' | 'ltr';\n  };\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAOI"}

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/index.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Toaster: function() {
+        return _Toaster.Toaster;
+    },
+    renderToaster_unstable: function() {
+        return _renderToaster.renderToaster_unstable;
+    },
+    toasterClassNames: function() {
+        return _useToasterStylesstyles.toasterClassNames;
+    },
+    useToasterStyles_unstable: function() {
+        return _useToasterStylesstyles.useToasterStyles_unstable;
+    },
+    useToaster_unstable: function() {
+        return _useToaster.useToaster_unstable;
+    }
+});
+const _Toaster = require("./Toaster");
+const _renderToaster = require("./renderToaster");
+const _useToaster = require("./useToaster");
+const _useToasterStylesstyles = require("./useToasterStyles.styles");

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toaster/index.ts"],"sourcesContent":["export { Toaster } from './Toaster';\nexport type { ToasterProps, ToasterSlots, ToasterSlotsInternal, ToasterState } from './Toaster.types';\nexport { renderToaster_unstable } from './renderToaster';\nexport { useToaster_unstable } from './useToaster';\nexport { toasterClassNames, useToasterStyles_unstable } from './useToasterStyles.styles';\n"],"names":["Toaster","renderToaster_unstable","useToaster_unstable","toasterClassNames","useToasterStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAEPC,qCAAsB;;;eAEtBE,yCAAiB;;;eAAEC,iDAAyB;;;eAD5CF,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACrB,eAAe;wCACU,4BAA4B"}

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/renderToaster.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderToaster_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderToaster_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactportal = require("@fluentui/react-portal");
+const _AriaLive = require("../AriaLive");
+const renderToaster_unstable = (state)=>{
+    const { announceRef, renderAriaLive, inline, mountNode } = state;
+    (0, _reactutilities.assertSlots)(state);
+    const hasToasts = !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;
+    const ariaLive = renderAriaLive ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_AriaLive.AriaLive, {
+        announceRef: announceRef
+    }) : null;
+    const positionSlots = /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            state.bottom ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottom, {}) : null,
+            state.bottomStart ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomStart, {}) : null,
+            state.bottomEnd ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.bottomEnd, {}) : null,
+            state.topStart ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.topStart, {}) : null,
+            state.topEnd ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.topEnd, {}) : null,
+            state.top ? /*#__PURE__*/ (0, _jsxruntime.jsx)(state.top, {}) : null
+        ]
+    });
+    if (inline) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+            children: [
+                ariaLive,
+                hasToasts ? positionSlots : null
+            ]
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            ariaLive,
+            hasToasts ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactportal.Portal, {
+                mountNode: mountNode,
+                children: positionSlots
+            }) : null
+        ]
+    });
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/renderToaster.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toaster/renderToaster.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { Portal } from '@fluentui/react-portal';\nimport type { ToasterState, ToasterSlotsInternal } from './Toaster.types';\nimport { AriaLive } from '../AriaLive';\n\n/**\n * Render the final JSX of Toaster\n */\nexport const renderToaster_unstable = (state: ToasterState): JSXElement => {\n  const { announceRef, renderAriaLive, inline, mountNode } = state;\n  assertSlots<ToasterSlotsInternal>(state);\n\n  const hasToasts =\n    !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;\n\n  const ariaLive = renderAriaLive ? <AriaLive announceRef={announceRef} /> : null;\n  const positionSlots = (\n    <>\n      {state.bottom ? <state.bottom /> : null}\n      {state.bottomStart ? <state.bottomStart /> : null}\n      {state.bottomEnd ? <state.bottomEnd /> : null}\n      {state.topStart ? <state.topStart /> : null}\n      {state.topEnd ? <state.topEnd /> : null}\n      {state.top ? <state.top /> : null}\n    </>\n  );\n\n  if (inline) {\n    return (\n      <>\n        {ariaLive}\n        {hasToasts ? positionSlots : null}\n      </>\n    );\n  }\n\n  return (\n    <>\n      {ariaLive}\n      {hasToasts ? <Portal mountNode={mountNode}>{positionSlots}</Portal> : null}\n    </>\n  );\n};\n"],"names":["assertSlots","Portal","AriaLive","renderToaster_unstable","state","announceRef","renderAriaLive","inline","mountNode","hasToasts","bottomStart","bottomEnd","topStart","topEnd","top","bottom","ariaLive","positionSlots"],"mappings":";;;;+BAYaG;;;;;;4BAXb,UAAiD;gCAErB,4BAA4B;6BAEjC,yBAAyB;0BAEvB,cAAc;AAKhC,+BAA+B,CAACC;IACrC,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGJ;IAC3DJ,+BAAAA,EAAkCI;IAElC,MAAMK,YACJ,CAAC,CAACL,MAAMM,WAAW,IAAI,CAAC,CAACN,MAAMO,SAAS,IAAI,CAAC,CAACP,MAAMQ,QAAQ,IAAI,CAAC,CAACR,MAAMS,MAAM,IAAI,CAAC,CAACT,MAAMU,GAAG,IAAI,CAAC,CAACV,MAAMW,MAAM;IAEjH,MAAMC,WAAWV,iBAAAA,WAAAA,OAAiB,eAAA,EAACJ,kBAAAA,EAAAA;QAASG,aAAaA;SAAkB;IAC3E,MAAMY,gBAAAA,WAAAA,OACJ,gBAAA,EAAA,oBAAA,EAAA;;YACGb,MAAMW,MAAM,GAAA,WAAA,GAAG,mBAAA,EAACX,MAAMW,MAAM,EAAA,CAAA,KAAM;YAClCX,MAAMM,WAAW,GAAA,WAAA,OAAG,eAAA,EAACN,MAAMM,WAAW,EAAA,CAAA,KAAM;YAC5CN,MAAMO,SAAS,GAAA,WAAA,OAAG,eAAA,EAACP,MAAMO,SAAS,EAAA,CAAA,KAAM;YACxCP,MAAMQ,QAAQ,GAAA,WAAA,OAAG,eAAA,EAACR,MAAMQ,QAAQ,EAAA,CAAA,KAAM;YACtCR,MAAMS,MAAM,GAAA,WAAA,OAAG,eAAA,EAACT,MAAMS,MAAM,EAAA,CAAA,KAAM;YAClCT,MAAMU,GAAG,GAAA,WAAA,OAAG,eAAA,EAACV,MAAMU,GAAG,EAAA,CAAA,KAAM;;;IAIjC,IAAIP,QAAQ;QACV,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;gBACGS;gBACAP,YAAYQ,gBAAgB;;;IAGnC;IAEA,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;YACGD;YACAP,YAAAA,WAAAA,OAAY,eAAA,EAACR,mBAAAA,EAAAA;gBAAOO,WAAWA;0BAAYS;iBAA0B;;;AAG5E,EAAE"}

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/useToastAnnounce.js

@@ -0,0 +1,53 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToastAnnounce", {
+    enumerable: true,
+    get: function() {
+        return useToastAnnounce;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+function useToastAnnounce(announce) {
+    const activeRef = _react.useRef(true);
+    const cleanupRef = _react.useRef(()=>undefined);
+    const announceToast = _react.useCallback((message, options)=>{
+        if (activeRef.current) {
+            announce(message, options);
+        }
+    }, [
+        announce
+    ]);
+    const toasterRef = _react.useCallback((el)=>{
+        if (!el) {
+            cleanupRef.current();
+            return;
+        }
+        const onFocusIn = (e)=>{
+            if ((0, _reactutilities.isHTMLElement)(e.currentTarget) && e.currentTarget.contains((0, _reactutilities.isHTMLElement)(e.relatedTarget) ? e.relatedTarget : null)) {
+                return;
+            }
+            activeRef.current = false;
+        };
+        const onFocusOut = (e)=>{
+            if ((0, _reactutilities.isHTMLElement)(e.currentTarget) && e.currentTarget.contains((0, _reactutilities.isHTMLElement)(e.relatedTarget) ? e.relatedTarget : null)) {
+                return;
+            }
+            activeRef.current = true;
+        };
+        el.addEventListener('focusin', onFocusIn);
+        el.addEventListener('focusout', onFocusOut);
+        cleanupRef.current = ()=>{
+            el.removeEventListener('focusin', onFocusIn);
+            el.removeEventListener('focusout', onFocusOut);
+        };
+    }, []);
+    return {
+        announceToast,
+        toasterRef
+    };
+}

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/useToastAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toaster/useToastAnnounce.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Announce } from '../AriaLive';\nimport { isHTMLElement } from '@fluentui/react-utilities';\n\n/**\n * Wraps an aria live announcement function.\n * Aria live announcements can be detrimental once the user is already navigating\n * multiple toasts. Once the user is focused inside the toaster, the announecments should be disabled.\n * @param announce\n * @returns A function to announce a toast and a ref to attach to the toaster element\n */\nexport function useToastAnnounce(announce: Announce): {\n  announceToast: Announce;\n  toasterRef: React.RefCallback<HTMLDivElement>;\n} {\n  const activeRef = React.useRef(true);\n  const cleanupRef = React.useRef<() => void>(() => undefined);\n  const announceToast = React.useCallback<Announce>(\n    (message, options) => {\n      if (activeRef.current) {\n        announce(message, options);\n      }\n    },\n    [announce],\n  );\n\n  const toasterRef = React.useCallback((el: HTMLDivElement | null) => {\n    if (!el) {\n      cleanupRef.current();\n      return;\n    }\n\n    const onFocusIn = (e: FocusEvent) => {\n      if (\n        isHTMLElement(e.currentTarget) &&\n        e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n      ) {\n        return;\n      }\n\n      activeRef.current = false;\n    };\n\n    const onFocusOut = (e: FocusEvent) => {\n      if (\n        isHTMLElement(e.currentTarget) &&\n        e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)\n      ) {\n        return;\n      }\n\n      activeRef.current = true;\n    };\n\n    el.addEventListener('focusin', onFocusIn);\n    el.addEventListener('focusout', onFocusOut);\n\n    cleanupRef.current = () => {\n      el.removeEventListener('focusin', onFocusIn);\n      el.removeEventListener('focusout', onFocusOut);\n    };\n  }, []);\n\n  return {\n    announceToast,\n    toasterRef,\n  };\n}\n"],"names":["React","isHTMLElement","useToastAnnounce","announce","activeRef","useRef","cleanupRef","undefined","announceToast","useCallback","message","options","current","toasterRef","el","onFocusIn","e","currentTarget","contains","relatedTarget","onFocusOut","addEventListener","removeEventListener"],"mappings":"AAAA;;;;;+BAagBE;;;;;;;iEAXO,QAAQ;gCAED,4BAA4B;AASnD,0BAA0BC,QAAkB;IAIjD,MAAMC,YAAYJ,OAAMK,MAAM,CAAC;IAC/B,MAAMC,aAAaN,OAAMK,MAAM,CAAa,IAAME;IAClD,MAAMC,gBAAgBR,OAAMS,WAAW,CACrC,CAACC,SAASC;QACR,IAAIP,UAAUQ,OAAO,EAAE;YACrBT,SAASO,SAASC;QACpB;IACF,GACA;QAACR;KAAS;IAGZ,MAAMU,aAAab,OAAMS,WAAW,CAAC,CAACK;QACpC,IAAI,CAACA,IAAI;YACPR,WAAWM,OAAO;YAClB;QACF;QAEA,MAAMG,YAAY,CAACC;YACjB,QACEf,6BAAAA,EAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,KAACjB,6BAAAA,EAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,OAC5E;gBACA;YACF;YAEAf,UAAUQ,OAAO,GAAG;QACtB;QAEA,MAAMQ,aAAa,CAACJ;YAClB,QACEf,6BAAAA,EAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,CAACjB,iCAAAA,EAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,OAC5E;gBACA;YACF;YAEAf,UAAUQ,OAAO,GAAG;QACtB;QAEAE,GAAGO,gBAAgB,CAAC,WAAWN;QAC/BD,GAAGO,gBAAgB,CAAC,YAAYD;QAEhCd,WAAWM,OAAO,GAAG;YACnBE,GAAGQ,mBAAmB,CAAC,WAAWP;YAClCD,GAAGQ,mBAAmB,CAAC,YAAYF;QACrC;IACF,GAAG,EAAE;IAEL,OAAO;QACLZ;QACAK;IACF;AACF"}

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/useToaster.js

@@ -0,0 +1,95 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToaster_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToaster_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reacttabster = require("@fluentui/react-tabster");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _state = require("../../state");
+const _ToastContainer = require("../ToastContainer");
+const _useToasterFocusManagement = require("./useToasterFocusManagement");
+const _useToastAnnounce = require("./useToastAnnounce");
+const useToaster_unstable = (props)=>{
+    'use no memo';
+    const { offset, announce: announceProp, mountNode, inline = false, ...rest } = props;
+    const announceRef = _react.useRef(()=>null);
+    const { toastsToRender, isToastVisible, pauseAllToasts, playAllToasts, tryRestoreFocus, closeAllToasts } = (0, _state.useToaster)(rest);
+    const announce = _react.useCallback((message, options)=>announceRef.current(message, options), []);
+    const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const { onKeyDown: onKeyDownProp, ...rootProps } = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', rest), {
+        elementType: 'div'
+    });
+    const focusableGroupAttr = (0, _reacttabster.useFocusableGroup)({
+        tabBehavior: 'limited-trap-focus',
+        ignoreDefaultKeydown: {
+            Escape: true
+        }
+    });
+    const onKeyDown = (0, _reactutilities.useEventCallback)((e)=>{
+        if (e.key === _keyboardkeys.Escape) {
+            e.preventDefault();
+            closeAllToasts();
+        }
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+    });
+    const usePositionSlot = (toastPosition)=>{
+        var _toastsToRender_get;
+        const focusManagementRef = (0, _useToasterFocusManagement.useToasterFocusManagement_unstable)(pauseAllToasts, playAllToasts);
+        const { announceToast, toasterRef } = (0, _useToastAnnounce.useToastAnnounce)(announceProp !== null && announceProp !== void 0 ? announceProp : announce);
+        return _reactutilities.slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {
+            defaultProps: {
+                ref: (0, _reactutilities.useMergedRefs)(focusManagementRef, toasterRef),
+                children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ _react.createElement(_ToastContainer.ToastContainer, {
+                        ...toast,
+                        tryRestoreFocus: tryRestoreFocus,
+                        intent: toast.intent,
+                        announce: announceToast,
+                        key: toast.toastId,
+                        visible: isToastVisible(toast.toastId)
+                    }, toast.content)),
+                onKeyDown,
+                ...focusableGroupAttr,
+                'data-toaster-position': toastPosition,
+                role: 'list'
+            },
+            elementType: 'div'
+        });
+    };
+    return {
+        dir,
+        mountNode,
+        components: {
+            root: 'div',
+            bottomStart: 'div',
+            bottomEnd: 'div',
+            topStart: 'div',
+            topEnd: 'div',
+            top: 'div',
+            bottom: 'div'
+        },
+        root: _reactutilities.slot.always(rootProps, {
+            elementType: 'div'
+        }),
+        bottomStart: usePositionSlot(_state.TOAST_POSITIONS.bottomStart),
+        bottomEnd: usePositionSlot(_state.TOAST_POSITIONS.bottomEnd),
+        topStart: usePositionSlot(_state.TOAST_POSITIONS.topStart),
+        topEnd: usePositionSlot(_state.TOAST_POSITIONS.topEnd),
+        top: usePositionSlot(_state.TOAST_POSITIONS.top),
+        bottom: usePositionSlot(_state.TOAST_POSITIONS.bottom),
+        announceRef,
+        offset,
+        announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,
+        renderAriaLive: !announceProp,
+        inline
+    };
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/useToasterFocusManagement.js

@@ -0,0 +1,95 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useToasterFocusManagement_unstable", {
+    enumerable: true,
+    get: function() {
+        return useToasterFocusManagement_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _keyboardkeys = require("@fluentui/keyboard-keys");
+const _ToastContainer = require("../ToastContainer");
+const noop = ()=>undefined;
+function useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts) {
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    const cleanupListenersRef = _react.useRef(noop);
+    return _react.useCallback((el)=>{
+        if (!el || !targetDocument) {
+            cleanupListenersRef.current();
+            cleanupListenersRef.current = noop;
+            return;
+        }
+        const toastContainerWalker = targetDocument.createTreeWalker(el, NodeFilter.SHOW_ELEMENT, {
+            acceptNode (node) {
+                if ((0, _reactutilities.isHTMLElement)(node) && node.classList.contains(_ToastContainer.toastContainerClassNames.root)) {
+                    return NodeFilter.FILTER_ACCEPT;
+                }
+                return NodeFilter.FILTER_SKIP;
+            }
+        });
+        /**
+       * FIXME: https://github.com/microsoft/tabster/issues/299
+       * Toasts  should be arrow navigable and focus should be trapped in a stack of tasts
+       * This is a temporary measure, Tabster does not have an API yet to enable mover arrow keys from within grouppers
+       * Once tabster fully supports this use case, remove this hook
+       */ const keydownListener = (e)=>{
+            const { target, key } = e;
+            if (!(0, _reactutilities.isHTMLElement)(target)) {
+                return;
+            }
+            if (key === _keyboardkeys.ArrowDown) {
+                toastContainerWalker.currentNode = target;
+                let nextToastContainer = toastContainerWalker.nextNode();
+                if (!nextToastContainer) {
+                    toastContainerWalker.currentNode = el;
+                    nextToastContainer = toastContainerWalker.nextNode();
+                }
+                if ((0, _reactutilities.isHTMLElement)(nextToastContainer)) {
+                    nextToastContainer.focus();
+                }
+            }
+            if (key === _keyboardkeys.ArrowUp) {
+                toastContainerWalker.currentNode = target;
+                let prevToastContainer = toastContainerWalker.previousNode();
+                if (prevToastContainer && prevToastContainer.contains(target)) {
+                    prevToastContainer = toastContainerWalker.previousNode();
+                }
+                if (!prevToastContainer) {
+                    toastContainerWalker.currentNode = el;
+                    prevToastContainer = toastContainerWalker.lastChild();
+                }
+                if ((0, _reactutilities.isHTMLElement)(prevToastContainer)) {
+                    prevToastContainer.focus();
+                }
+            }
+        };
+        const focusInListener = (e)=>{
+            if ((0, _reactutilities.isHTMLElement)(e.currentTarget) && !e.currentTarget.contains((0, _reactutilities.isHTMLElement)(e.relatedTarget) ? e.relatedTarget : null)) {
+                pauseAllToasts();
+            }
+        };
+        const focusOutListener = (e)=>{
+            if ((0, _reactutilities.isHTMLElement)(e.currentTarget) && !e.currentTarget.contains((0, _reactutilities.isHTMLElement)(e.relatedTarget) ? e.relatedTarget : null)) {
+                playAllToasts();
+            }
+        };
+        el.addEventListener('keydown', keydownListener);
+        el.addEventListener('focusin', focusInListener);
+        el.addEventListener('focusout', focusOutListener);
+        cleanupListenersRef.current = ()=>{
+            el.removeEventListener('keydown', keydownListener);
+            el.removeEventListener('focusin', focusInListener);
+            el.removeEventListener('focusout', focusOutListener);
+        };
+    }, [
+        targetDocument,
+        pauseAllToasts,
+        playAllToasts
+    ]);
+}

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/useToasterStyles.styles.js

@@ -0,0 +1,87 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toasterClassNames: function() {
+        return toasterClassNames;
+    },
+    useToasterStyles_unstable: function() {
+        return useToasterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _index = require("../../state/index");
+const toasterClassNames = {
+    root: 'fui-Toaster'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = /*#__PURE__*/ (0, _react.__resetStyles)("r3hfdjz", null, [
+    ".r3hfdjz{position:fixed;width:292px;pointer-events:none;}"
+]);
+const useToasterStyles = /*#__PURE__*/ (0, _react.__styles)({
+    inline: {
+        qhf8xq: "f1euv43f"
+    }
+}, {
+    d: [
+        ".f1euv43f{position:absolute;}"
+    ]
+});
+const useToasterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const styles = useToasterStyles();
+    const className = (0, _react.mergeClasses)(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
+    if (state.bottomStart) {
+        var _state_bottomStart;
+        state.bottomStart.className = className;
+        var _style;
+        (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};
+        Object.assign(state.bottomStart.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottomStart, state.dir, state.offset));
+    }
+    if (state.bottomEnd) {
+        var _state_bottomEnd;
+        state.bottomEnd.className = className;
+        var _style1;
+        (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};
+        Object.assign(state.bottomEnd.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottomEnd, state.dir, state.offset));
+    }
+    if (state.topStart) {
+        var _state_topStart;
+        state.topStart.className = className;
+        var _style2;
+        (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};
+        Object.assign(state.topStart.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.topStart, state.dir, state.offset));
+    }
+    if (state.topEnd) {
+        var _state_topEnd;
+        state.topEnd.className = className;
+        var _style3;
+        (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};
+        Object.assign(state.topEnd.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.topEnd, state.dir, state.offset));
+    }
+    if (state.top) {
+        var _state_top;
+        state.top.className = className;
+        var _style4;
+        (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};
+        Object.assign(state.top.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.top, state.dir, state.offset));
+    }
+    if (state.bottom) {
+        var _state_bottom;
+        state.bottom.className = className;
+        var _style5;
+        (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};
+        Object.assign(state.bottom.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottom, state.dir, state.offset));
+    }
+    return state;
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/Toaster/useToasterStyles.styles.raw.js

@@ -0,0 +1,85 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    toasterClassNames: function() {
+        return toasterClassNames;
+    },
+    useToasterStyles_unstable: function() {
+        return useToasterStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _index = require("../../state/index");
+const toasterClassNames = {
+    root: 'fui-Toaster'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = (0, _react.makeResetStyles)({
+    position: 'fixed',
+    width: '292px',
+    pointerEvents: 'none'
+});
+const useToasterStyles = (0, _react.makeStyles)({
+    inline: {
+        position: 'absolute'
+    }
+});
+const useToasterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const styles = useToasterStyles();
+    const className = (0, _react.mergeClasses)(toasterClassNames.root, rootBaseClassName, state.inline && styles.inline, state.root.className);
+    if (state.bottomStart) {
+        var _state_bottomStart;
+        state.bottomStart.className = className;
+        var _style;
+        (_style = (_state_bottomStart = state.bottomStart).style) !== null && _style !== void 0 ? _style : _state_bottomStart.style = {};
+        Object.assign(state.bottomStart.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottomStart, state.dir, state.offset));
+    }
+    if (state.bottomEnd) {
+        var _state_bottomEnd;
+        state.bottomEnd.className = className;
+        var _style1;
+        (_style1 = (_state_bottomEnd = state.bottomEnd).style) !== null && _style1 !== void 0 ? _style1 : _state_bottomEnd.style = {};
+        Object.assign(state.bottomEnd.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottomEnd, state.dir, state.offset));
+    }
+    if (state.topStart) {
+        var _state_topStart;
+        state.topStart.className = className;
+        var _style2;
+        (_style2 = (_state_topStart = state.topStart).style) !== null && _style2 !== void 0 ? _style2 : _state_topStart.style = {};
+        Object.assign(state.topStart.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.topStart, state.dir, state.offset));
+    }
+    if (state.topEnd) {
+        var _state_topEnd;
+        state.topEnd.className = className;
+        var _style3;
+        (_style3 = (_state_topEnd = state.topEnd).style) !== null && _style3 !== void 0 ? _style3 : _state_topEnd.style = {};
+        Object.assign(state.topEnd.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.topEnd, state.dir, state.offset));
+    }
+    if (state.top) {
+        var _state_top;
+        state.top.className = className;
+        var _style4;
+        (_style4 = (_state_top = state.top).style) !== null && _style4 !== void 0 ? _style4 : _state_top.style = {};
+        Object.assign(state.top.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.top, state.dir, state.offset));
+    }
+    if (state.bottom) {
+        var _state_bottom;
+        state.bottom.className = className;
+        var _style5;
+        (_style5 = (_state_bottom = state.bottom).style) !== null && _style5 !== void 0 ? _style5 : _state_bottom.style = {};
+        Object.assign(state.bottom.style, (0, _index.getPositionStyles)(_index.TOAST_POSITIONS.bottom, state.dir, state.offset));
+    }
+    return state;
+};