feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import * as React from 'react';
+import { useToaster_unstable } from './useToaster';
+import { renderToaster_unstable } from './renderToaster';
+import { useToasterStyles_unstable } from './useToasterStyles.styles';
+/**
+ * Toaster component - renders a collection of toasts dispatched imperatively
+ */ export const Toaster = (props)=>{
+    const state = useToaster_unstable(props);
+    useToasterStyles_unstable(state);
+    useCustomStyleHook_unstable('useToasterStyles_unstable')(state);
+    return renderToaster_unstable(state);
+};
+Toaster.displayName = 'Toaster';

node_modules/@fluentui/react-toast/lib/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;AAEA,SAASA,2BAA2B,QAAQ,kCAAkC;AAC9E,YAAYC,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,yBAAyB,QAAQ,4BAA4B;AAGtE;;CAEC,GACD,OAAO,MAAMC,UAAkCC,CAAAA;IAC7C,MAAMC,QAAQL,oBAAoBI;IAElCF,0BAA0BG;IAC1BP,4BAA4B,6BAA6BO;IACzD,OAAOJ,uBAAuBI;AAChC,EAAE;AAEFF,QAAQG,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering Toaster
+ */ export { };

node_modules/@fluentui/react-toast/lib/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/components/Toaster/index.js

@@ -0,0 +1,4 @@
+export { Toaster } from './Toaster';
+export { renderToaster_unstable } from './renderToaster';
+export { useToaster_unstable } from './useToaster';
+export { toasterClassNames, useToasterStyles_unstable } from './useToasterStyles.styles';

node_modules/@fluentui/react-toast/lib/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":"AAAA,SAASA,OAAO,QAAQ,YAAY;AAEpC,SAASC,sBAAsB,QAAQ,kBAAkB;AACzD,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,iBAAiB,EAAEC,yBAAyB,QAAQ,4BAA4B"}

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

@@ -0,0 +1,41 @@
+  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { Portal } from '@fluentui/react-portal';
+import { AriaLive } from '../AriaLive';
+/**
+ * Render the final JSX of Toaster
+ */ export const renderToaster_unstable = (state)=>{
+    const { announceRef, renderAriaLive, inline, mountNode } = state;
+    assertSlots(state);
+    const hasToasts = !!state.bottomStart || !!state.bottomEnd || !!state.topStart || !!state.topEnd || !!state.top || !!state.bottom;
+    const ariaLive = renderAriaLive ? /*#__PURE__*/ _jsx(AriaLive, {
+        announceRef: announceRef
+    }) : null;
+    const positionSlots = /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            state.bottom ? /*#__PURE__*/ _jsx(state.bottom, {}) : null,
+            state.bottomStart ? /*#__PURE__*/ _jsx(state.bottomStart, {}) : null,
+            state.bottomEnd ? /*#__PURE__*/ _jsx(state.bottomEnd, {}) : null,
+            state.topStart ? /*#__PURE__*/ _jsx(state.topStart, {}) : null,
+            state.topEnd ? /*#__PURE__*/ _jsx(state.topEnd, {}) : null,
+            state.top ? /*#__PURE__*/ _jsx(state.top, {}) : null
+        ]
+    });
+    if (inline) {
+        return /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                ariaLive,
+                hasToasts ? positionSlots : null
+            ]
+        });
+    }
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            ariaLive,
+            hasToasts ? /*#__PURE__*/ _jsx(Portal, {
+                mountNode: mountNode,
+                children: positionSlots
+            }) : null
+        ]
+    });
+};

node_modules/@fluentui/react-toast/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,QAAQ,QAAQ,cAAc;AAEvC;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC,MAAM,EAAEC,WAAW,EAAEC,cAAc,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGJ;IAC3DJ,YAAkCI;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,+BAAiB,KAACJ;QAASG,aAAaA;SAAkB;IAC3E,MAAMY,8BACJ;;YACGb,MAAMW,MAAM,iBAAG,KAACX,MAAMW,MAAM,QAAM;YAClCX,MAAMM,WAAW,iBAAG,KAACN,MAAMM,WAAW,QAAM;YAC5CN,MAAMO,SAAS,iBAAG,KAACP,MAAMO,SAAS,QAAM;YACxCP,MAAMQ,QAAQ,iBAAG,KAACR,MAAMQ,QAAQ,QAAM;YACtCR,MAAMS,MAAM,iBAAG,KAACT,MAAMS,MAAM,QAAM;YAClCT,MAAMU,GAAG,iBAAG,KAACV,MAAMU,GAAG,QAAM;;;IAIjC,IAAIP,QAAQ;QACV,qBACE;;gBACGS;gBACAP,YAAYQ,gBAAgB;;;IAGnC;IAEA,qBACE;;YACGD;YACAP,0BAAY,KAACR;gBAAOO,WAAWA;0BAAYS;iBAA0B;;;AAG5E,EAAE"}

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

@@ -0,0 +1,48 @@
+'use client';
+import * as React from 'react';
+import { isHTMLElement } from '@fluentui/react-utilities';
+/**
+ * Wraps an aria live announcement function.
+ * Aria live announcements can be detrimental once the user is already navigating
+ * multiple toasts. Once the user is focused inside the toaster, the announecments should be disabled.
+ * @param announce
+ * @returns A function to announce a toast and a ref to attach to the toaster element
+ */ export 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 (isHTMLElement(e.currentTarget) && e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
+                return;
+            }
+            activeRef.current = false;
+        };
+        const onFocusOut = (e)=>{
+            if (isHTMLElement(e.currentTarget) && e.currentTarget.contains(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/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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,aAAa,QAAQ,4BAA4B;AAE1D;;;;;;CAMC,GACD,OAAO,SAASC,iBAAiBC,QAAkB;IAIjD,MAAMC,YAAYJ,MAAMK,MAAM,CAAC;IAC/B,MAAMC,aAAaN,MAAMK,MAAM,CAAa,IAAME;IAClD,MAAMC,gBAAgBR,MAAMS,WAAW,CACrC,CAACC,SAASC;QACR,IAAIP,UAAUQ,OAAO,EAAE;YACrBT,SAASO,SAASC;QACpB;IACF,GACA;QAACR;KAAS;IAGZ,MAAMU,aAAab,MAAMS,WAAW,CAAC,CAACK;QACpC,IAAI,CAACA,IAAI;YACPR,WAAWM,OAAO;YAClB;QACF;QAEA,MAAMG,YAAY,CAACC;YACjB,IACEf,cAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,CAACjB,cAAce,EAAEG,aAAa,IAAIH,EAAEG,aAAa,GAAG,OAC5E;gBACA;YACF;YAEAf,UAAUQ,OAAO,GAAG;QACtB;QAEA,MAAMQ,aAAa,CAACJ;YAClB,IACEf,cAAce,EAAEC,aAAa,KAC7BD,EAAEC,aAAa,CAACC,QAAQ,CAACjB,cAAce,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/components/Toaster/useToaster.js

@@ -0,0 +1,88 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { useFocusableGroup } from '@fluentui/react-tabster';
+import { Escape } from '@fluentui/keyboard-keys';
+import { TOAST_POSITIONS, useToaster } from '../../state';
+import { ToastContainer } from '../ToastContainer';
+import { useToasterFocusManagement_unstable } from './useToasterFocusManagement';
+import { useToastAnnounce } from './useToastAnnounce';
+/**
+ * Create the state required to render Toaster.
+ *
+ * @param props - props from this instance of Toaster
+ */ export 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 } = useToaster(rest);
+    const announce = React.useCallback((message, options)=>announceRef.current(message, options), []);
+    const { dir } = useFluent();
+    const { onKeyDown: onKeyDownProp, ...rootProps } = slot.always(getIntrinsicElementProps('div', rest), {
+        elementType: 'div'
+    });
+    const focusableGroupAttr = useFocusableGroup({
+        tabBehavior: 'limited-trap-focus',
+        ignoreDefaultKeydown: {
+            Escape: true
+        }
+    });
+    const onKeyDown = useEventCallback((e)=>{
+        if (e.key === Escape) {
+            e.preventDefault();
+            closeAllToasts();
+        }
+        onKeyDownProp === null || onKeyDownProp === void 0 ? void 0 : onKeyDownProp(e);
+    });
+    const usePositionSlot = (toastPosition)=>{
+        var _toastsToRender_get;
+        const focusManagementRef = useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts);
+        const { announceToast, toasterRef } = useToastAnnounce(announceProp !== null && announceProp !== void 0 ? announceProp : announce);
+        return slot.optional(toastsToRender.has(toastPosition) ? rootProps : null, {
+            defaultProps: {
+                ref: useMergedRefs(focusManagementRef, toasterRef),
+                children: (_toastsToRender_get = toastsToRender.get(toastPosition)) === null || _toastsToRender_get === void 0 ? void 0 : _toastsToRender_get.map((toast)=>/*#__PURE__*/ React.createElement(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: slot.always(rootProps, {
+            elementType: 'div'
+        }),
+        bottomStart: usePositionSlot(TOAST_POSITIONS.bottomStart),
+        bottomEnd: usePositionSlot(TOAST_POSITIONS.bottomEnd),
+        topStart: usePositionSlot(TOAST_POSITIONS.topStart),
+        topEnd: usePositionSlot(TOAST_POSITIONS.topEnd),
+        top: usePositionSlot(TOAST_POSITIONS.top),
+        bottom: usePositionSlot(TOAST_POSITIONS.bottom),
+        announceRef,
+        offset,
+        announce: announceProp !== null && announceProp !== void 0 ? announceProp : announce,
+        renderAriaLive: !announceProp,
+        inline
+    };
+};

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

@@ -0,0 +1,86 @@
+'use client';
+import { isHTMLElement } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+import { ArrowDown, ArrowUp } from '@fluentui/keyboard-keys';
+import { toastContainerClassNames } from '../ToastContainer';
+const noop = ()=>undefined;
+/**
+ * @internal
+ */ export function useToasterFocusManagement_unstable(pauseAllToasts, playAllToasts) {
+    const { targetDocument } = useFluent();
+    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 (isHTMLElement(node) && node.classList.contains(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 (!isHTMLElement(target)) {
+                return;
+            }
+            if (key === ArrowDown) {
+                toastContainerWalker.currentNode = target;
+                let nextToastContainer = toastContainerWalker.nextNode();
+                if (!nextToastContainer) {
+                    toastContainerWalker.currentNode = el;
+                    nextToastContainer = toastContainerWalker.nextNode();
+                }
+                if (isHTMLElement(nextToastContainer)) {
+                    nextToastContainer.focus();
+                }
+            }
+            if (key === 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 (isHTMLElement(prevToastContainer)) {
+                    prevToastContainer.focus();
+                }
+            }
+        };
+        const focusInListener = (e)=>{
+            if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(isHTMLElement(e.relatedTarget) ? e.relatedTarget : null)) {
+                pauseAllToasts();
+            }
+        };
+        const focusOutListener = (e)=>{
+            if (isHTMLElement(e.currentTarget) && !e.currentTarget.contains(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/components/Toaster/useToasterStyles.styles.js

@@ -0,0 +1,71 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { TOAST_POSITIONS, getPositionStyles } from '../../state/index';
+export const toasterClassNames = {
+  root: 'fui-Toaster'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootBaseClassName = /*#__PURE__*/__resetStyles("r3hfdjz", null, [".r3hfdjz{position:fixed;width:292px;pointer-events:none;}"]);
+const useToasterStyles = /*#__PURE__*/__styles({
+  inline: {
+    qhf8xq: "f1euv43f"
+  }
+}, {
+  d: [".f1euv43f{position:absolute;}"]
+});
+/**
+ * Apply styling to the Toaster slots based on the state
+ */
+export const useToasterStyles_unstable = state => {
+  'use no memo';
+
+  const rootBaseClassName = useRootBaseClassName();
+  const styles = useToasterStyles();
+  const className = 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, getPositionStyles(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, getPositionStyles(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, getPositionStyles(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, getPositionStyles(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, getPositionStyles(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, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));
+  }
+  return state;
+};

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

@@ -0,0 +1,69 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { TOAST_POSITIONS, getPositionStyles } from '../../state/index';
+export const toasterClassNames = {
+    root: 'fui-Toaster'
+};
+/**
+ * Styles for the root slot
+ */ const useRootBaseClassName = makeResetStyles({
+    position: 'fixed',
+    width: '292px',
+    pointerEvents: 'none'
+});
+const useToasterStyles = makeStyles({
+    inline: {
+        position: 'absolute'
+    }
+});
+/**
+ * Apply styling to the Toaster slots based on the state
+ */ export const useToasterStyles_unstable = (state)=>{
+    'use no memo';
+    const rootBaseClassName = useRootBaseClassName();
+    const styles = useToasterStyles();
+    const className = 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, getPositionStyles(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, getPositionStyles(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, getPositionStyles(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, getPositionStyles(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, getPositionStyles(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, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Toaster/useToasterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { ToasterSlots, ToasterState } from './Toaster.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { TOAST_POSITIONS, getPositionStyles } from '../../state/index';\n\nexport const toasterClassNames: SlotClassNames<ToasterSlots> = {\n  root: 'fui-Toaster',\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootBaseClassName = makeResetStyles({\n  position: 'fixed',\n  width: '292px',\n  pointerEvents: 'none',\n});\n\nconst useToasterStyles = makeStyles({\n  inline: {\n    position: 'absolute',\n  },\n});\n\n/**\n * Apply styling to the Toaster slots based on the state\n */\nexport const useToasterStyles_unstable = (state: ToasterState): ToasterState => {\n  'use no memo';\n\n  const rootBaseClassName = useRootBaseClassName();\n  const styles = useToasterStyles();\n  const className = mergeClasses(\n    toasterClassNames.root,\n    rootBaseClassName,\n    state.inline && styles.inline,\n    state.root.className,\n  );\n  if (state.bottomStart) {\n    state.bottomStart.className = className;\n    state.bottomStart.style ??= {};\n    Object.assign(state.bottomStart.style, getPositionStyles(TOAST_POSITIONS.bottomStart, state.dir, state.offset));\n  }\n\n  if (state.bottomEnd) {\n    state.bottomEnd.className = className;\n    state.bottomEnd.style ??= {};\n    Object.assign(state.bottomEnd.style, getPositionStyles(TOAST_POSITIONS.bottomEnd, state.dir, state.offset));\n  }\n\n  if (state.topStart) {\n    state.topStart.className = className;\n    state.topStart.style ??= {};\n    Object.assign(state.topStart.style, getPositionStyles(TOAST_POSITIONS.topStart, state.dir, state.offset));\n  }\n\n  if (state.topEnd) {\n    state.topEnd.className = className;\n    state.topEnd.style ??= {};\n    Object.assign(state.topEnd.style, getPositionStyles(TOAST_POSITIONS.topEnd, state.dir, state.offset));\n  }\n\n  if (state.top) {\n    state.top.className = className;\n    state.top.style ??= {};\n    Object.assign(state.top.style, getPositionStyles(TOAST_POSITIONS.top, state.dir, state.offset));\n  }\n\n  if (state.bottom) {\n    state.bottom.className = className;\n    state.bottom.style ??= {};\n    Object.assign(state.bottom.style, getPositionStyles(TOAST_POSITIONS.bottom, state.dir, state.offset));\n  }\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","TOAST_POSITIONS","getPositionStyles","toasterClassNames","root","useRootBaseClassName","position","width","pointerEvents","useToasterStyles","inline","useToasterStyles_unstable","state","rootBaseClassName","styles","className","bottomStart","style","Object","assign","dir","offset","bottomEnd","topStart","topEnd","top","bottom"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,eAAe,EAAEC,iBAAiB,QAAQ,oBAAoB;AAEvE,OAAO,MAAMC,oBAAkD;IAC7DC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,uBAAuBP,gBAAgB;IAC3CQ,UAAU;IACVC,OAAO;IACPC,eAAe;AACjB;AAEA,MAAMC,mBAAmBV,WAAW;IAClCW,QAAQ;QACNJ,UAAU;IACZ;AACF;AAEA;;CAEC,GACD,OAAO,MAAMK,4BAA4B,CAACC;IACxC;IAEA,MAAMC,oBAAoBR;IAC1B,MAAMS,SAASL;IACf,MAAMM,YAAYf,aAChBG,kBAAkBC,IAAI,EACtBS,mBACAD,MAAMF,MAAM,IAAII,OAAOJ,MAAM,EAC7BE,MAAMR,IAAI,CAACW,SAAS;IAEtB,IAAIH,MAAMI,WAAW,EAAE;YAErBJ;QADAA,MAAMI,WAAW,CAACD,SAAS,GAAGA;;QAC9BH,WAAAA,qBAAAA,MAAMI,WAAW,EAACC,gDAAlBL,mBAAkBK,QAAU,CAAC;QAC7BC,OAAOC,MAAM,CAACP,MAAMI,WAAW,CAACC,KAAK,EAAEf,kBAAkBD,gBAAgBe,WAAW,EAAEJ,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IAC/G;IAEA,IAAIT,MAAMU,SAAS,EAAE;YAEnBV;QADAA,MAAMU,SAAS,CAACP,SAAS,GAAGA;;QAC5BH,YAAAA,mBAAAA,MAAMU,SAAS,EAACL,kDAAhBL,iBAAgBK,QAAU,CAAC;QAC3BC,OAAOC,MAAM,CAACP,MAAMU,SAAS,CAACL,KAAK,EAAEf,kBAAkBD,gBAAgBqB,SAAS,EAAEV,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IAC3G;IAEA,IAAIT,MAAMW,QAAQ,EAAE;YAElBX;QADAA,MAAMW,QAAQ,CAACR,SAAS,GAAGA;;QAC3BH,YAAAA,kBAAAA,MAAMW,QAAQ,EAACN,kDAAfL,gBAAeK,QAAU,CAAC;QAC1BC,OAAOC,MAAM,CAACP,MAAMW,QAAQ,CAACN,KAAK,EAAEf,kBAAkBD,gBAAgBsB,QAAQ,EAAEX,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IACzG;IAEA,IAAIT,MAAMY,MAAM,EAAE;YAEhBZ;QADAA,MAAMY,MAAM,CAACT,SAAS,GAAGA;;QACzBH,YAAAA,gBAAAA,MAAMY,MAAM,EAACP,kDAAbL,cAAaK,QAAU,CAAC;QACxBC,OAAOC,MAAM,CAACP,MAAMY,MAAM,CAACP,KAAK,EAAEf,kBAAkBD,gBAAgBuB,MAAM,EAAEZ,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IACrG;IAEA,IAAIT,MAAMa,GAAG,EAAE;YAEbb;QADAA,MAAMa,GAAG,CAACV,SAAS,GAAGA;;QACtBH,YAAAA,aAAAA,MAAMa,GAAG,EAACR,kDAAVL,WAAUK,QAAU,CAAC;QACrBC,OAAOC,MAAM,CAACP,MAAMa,GAAG,CAACR,KAAK,EAAEf,kBAAkBD,gBAAgBwB,GAAG,EAAEb,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IAC/F;IAEA,IAAIT,MAAMc,MAAM,EAAE;YAEhBd;QADAA,MAAMc,MAAM,CAACX,SAAS,GAAGA;;QACzBH,YAAAA,gBAAAA,MAAMc,MAAM,EAACT,kDAAbL,cAAaK,QAAU,CAAC;QACxBC,OAAOC,MAAM,CAACP,MAAMc,MAAM,CAACT,KAAK,EAAEf,kBAAkBD,gBAAgByB,MAAM,EAAEd,MAAMQ,GAAG,EAAER,MAAMS,MAAM;IACrG;IAEA,OAAOT;AACT,EAAE"}