feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,22 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "AriaLive", {
+    enumerable: true,
+    get: function() {
+        return AriaLive;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useAriaLive = require("./useAriaLive");
+const _renderAriaLive = require("./renderAriaLive");
+const _useAriaLiveStylesstyles = require("./useAriaLiveStyles.styles");
+const AriaLive = (props)=>{
+    const state = (0, _useAriaLive.useAriaLive_unstable)(props);
+    (0, _useAriaLiveStylesstyles.useAriaLiveStyles_unstable)(state);
+    return (0, _renderAriaLive.renderAriaLive_unstable)(state);
+};
+AriaLive.displayName = 'AriaLive';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AriaLive/AriaLive.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAriaLive_unstable } from './useAriaLive';\nimport { renderAriaLive_unstable } from './renderAriaLive';\nimport { useAriaLiveStyles_unstable } from './useAriaLiveStyles.styles';\nimport type { AriaLiveProps } from './AriaLive.types';\n\n/**\n * A component that manages aria live announcements imperatively\n */\nexport const AriaLive: React.FC<AriaLiveProps> = props => {\n  const state = useAriaLive_unstable(props);\n\n  useAriaLiveStyles_unstable(state);\n  return renderAriaLive_unstable(state);\n};\n\nAriaLive.displayName = 'AriaLive';\n"],"names":["React","useAriaLive_unstable","renderAriaLive_unstable","useAriaLiveStyles_unstable","AriaLive","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;6BACM,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;AAMjE,MAAMI,WAAoCC,CAAAA;IAC/C,MAAMC,YAAQL,iCAAAA,EAAqBI;QAEnCF,mDAAAA,EAA2BG;IAC3B,WAAOJ,uCAAAA,EAAwBI;AACjC,EAAE;AAEFF,SAASG,WAAW,GAAG"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AriaLive/AriaLive.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type AriaLiveSlots = {\n  assertive: NonNullable<Slot<'div'>>;\n  polite: NonNullable<Slot<'div'>>;\n};\n\nexport type AriaLivePoliteness = 'polite' | 'assertive';\n\n/**\n * AriaLive Props\n */\nexport type AriaLiveProps = ComponentProps<Partial<AriaLiveSlots>> & {\n  announceRef: React.Ref<Announce>;\n  children?: React.ReactNode;\n};\n\n/**\n * State used in rendering AriaLive\n */\nexport type AriaLiveState = ComponentState<AriaLiveSlots>;\n\nexport type Announce = (message: string, options: AnnounceOptions) => void;\n\nexport type LiveMessage = {\n  message: string;\n  createdAt: number;\n  politeness: AriaLivePoliteness;\n};\n\nexport type AnnounceOptions = {\n  politeness: AriaLivePoliteness;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

node_modules/@fluentui/react-toast/lib-commonjs/components/AriaLive/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, {
+    AriaLive: function() {
+        return _AriaLive.AriaLive;
+    },
+    ariaLiveClassNames: function() {
+        return _useAriaLiveStylesstyles.ariaLiveClassNames;
+    },
+    renderAriaLive_unstable: function() {
+        return _renderAriaLive.renderAriaLive_unstable;
+    },
+    useAriaLiveStyles_unstable: function() {
+        return _useAriaLiveStylesstyles.useAriaLiveStyles_unstable;
+    },
+    useAriaLive_unstable: function() {
+        return _useAriaLive.useAriaLive_unstable;
+    }
+});
+const _AriaLive = require("./AriaLive");
+const _renderAriaLive = require("./renderAriaLive");
+const _useAriaLive = require("./useAriaLive");
+const _useAriaLiveStylesstyles = require("./useAriaLiveStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AriaLive/index.ts"],"sourcesContent":["export { AriaLive } from './AriaLive';\nexport type {\n  Announce,\n  AnnounceOptions,\n  AriaLivePoliteness,\n  AriaLiveProps,\n  AriaLiveSlots,\n  AriaLiveState,\n  LiveMessage,\n} from './AriaLive.types';\nexport { renderAriaLive_unstable } from './renderAriaLive';\nexport { useAriaLive_unstable } from './useAriaLive';\nexport { ariaLiveClassNames, useAriaLiveStyles_unstable } from './useAriaLiveStyles.styles';\n"],"names":["AriaLive","renderAriaLive_unstable","useAriaLive_unstable","ariaLiveClassNames","useAriaLiveStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAYRG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BAXJ,aAAa;gCAUE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}

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

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderAriaLive_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderAriaLive_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderAriaLive_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.assertive, {}),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(state.polite, {})
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AriaLive/renderAriaLive.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 type { AriaLiveState, AriaLiveSlots } from './AriaLive.types';\n\n/**\n * Render the final JSX of AriaLive\n */\nexport const renderAriaLive_unstable = (state: AriaLiveState): JSXElement => {\n  assertSlots<AriaLiveSlots>(state);\n\n  return (\n    <>\n      <state.assertive />\n      <state.polite />\n    </>\n  );\n};\n"],"names":["assertSlots","renderAriaLive_unstable","state","assertive","polite"],"mappings":";;;;+BAUaC;;;;;;4BATb,UAAiD;gCAErB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAAA,oBAAA,EAAA;;8BACE,eAAA,EAACA,MAAMC,SAAS,EAAA,CAAA;8BAChB,eAAA,EAACD,MAAME,MAAM,EAAA,CAAA;;;AAGnB,EAAE"}

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

@@ -0,0 +1,81 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useAriaLive_unstable", {
+    enumerable: true,
+    get: function() {
+        return useAriaLive_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");
+/** The duration the message needs to be in present in DOM for screen readers to register a change and announce */ const MESSAGE_DURATION = 500;
+const useAriaLive_unstable = (props)=>{
+    const [currentMessage, setCurrentMessage] = _react.useState(undefined);
+    // Can't rely on Date.now() if user invokes announce more than once in a code block
+    const order = _react.useRef(0);
+    const [messageQueue] = _react.useState(()=>(0, _reactutilities.createPriorityQueue)((a, b)=>{
+            if (a.politeness === b.politeness) {
+                return a.createdAt - b.createdAt;
+            }
+            return a.politeness === 'assertive' ? -1 : 1;
+        }));
+    const announce = (0, _reactutilities.useEventCallback)((message, options)=>{
+        const { politeness } = options;
+        if (message === (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.message)) {
+            return;
+        }
+        const liveMessage = {
+            message,
+            politeness,
+            createdAt: order.current++
+        };
+        if (!currentMessage) {
+            setCurrentMessage(liveMessage);
+        } else {
+            messageQueue.enqueue(liveMessage);
+        }
+    });
+    const [setMessageTimeout, clearMessageTimeout] = (0, _reactutilities.useTimeout)();
+    _react.useEffect(()=>{
+        setMessageTimeout(()=>{
+            if (messageQueue.peek()) {
+                setCurrentMessage(messageQueue.dequeue());
+            } else {
+                setCurrentMessage(undefined);
+            }
+        }, MESSAGE_DURATION);
+        return ()=>clearMessageTimeout();
+    }, [
+        currentMessage,
+        messageQueue,
+        setMessageTimeout,
+        clearMessageTimeout
+    ]);
+    _react.useImperativeHandle(props.announceRef, ()=>announce);
+    const politeMessage = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.politeness) === 'polite' ? currentMessage.message : undefined;
+    const assertiveMessage = (currentMessage === null || currentMessage === void 0 ? void 0 : currentMessage.politeness) === 'assertive' ? currentMessage.message : undefined;
+    return {
+        components: {
+            assertive: 'div',
+            polite: 'div'
+        },
+        assertive: _reactutilities.slot.always(props.assertive, {
+            defaultProps: {
+                'aria-live': 'assertive',
+                children: assertiveMessage
+            },
+            elementType: 'div'
+        }),
+        polite: _reactutilities.slot.always(props.polite, {
+            defaultProps: {
+                'aria-live': 'polite',
+                children: politeMessage
+            },
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js

@@ -0,0 +1,36 @@
+'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, {
+    ariaLiveClassNames: function() {
+        return ariaLiveClassNames;
+    },
+    useAriaLiveStyles_unstable: function() {
+        return useAriaLiveStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const ariaLiveClassNames = {
+    assertive: 'fui-AriaLive__assertive',
+    polite: 'fui-AriaLive__polite'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rrd10u0", null, [
+    ".rrd10u0{clip:rect(0px, 0px, 0px, 0px);height:1px;margin:-1px;overflow:hidden;padding:0px;width:1px;position:absolute;}"
+]);
+const useAriaLiveStyles_unstable = (state)=>{
+    'use no memo';
+    const visuallyHidden = useResetStyles();
+    state.assertive.className = (0, _react.mergeClasses)(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
+    state.polite.className = (0, _react.mergeClasses)(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);
+    return state;
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useAriaLiveStyles.styles.js"],"sourcesContent":["'use client';\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nexport const ariaLiveClassNames = {\n    assertive: 'fui-AriaLive__assertive',\n    polite: 'fui-AriaLive__polite'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    clip: 'rect(0px, 0px, 0px, 0px)',\n    height: '1px',\n    margin: '-1px',\n    overflow: 'hidden',\n    padding: '0px',\n    width: '1px',\n    position: 'absolute'\n});\n/**\n * Apply styling to the AriaLive slots based on the state\n */ export const useAriaLiveStyles_unstable = (state)=>{\n    'use no memo';\n    const visuallyHidden = useResetStyles();\n    state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n    state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n    return state;\n};\n"],"names":["mergeClasses","__resetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECE,kBAAkB;;;IAiBdI,0BAA0B;;;;uBAlBG,gBAAgB;AACvD,2BAA2B;IAC9BH,SAAS,EAAE,yBAAyB;IACpCC,MAAM,EAAE;AACZ,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGJ,oBAAA,EAAA,WAAA,MAAA;IAAA;CAQ1B,CAAC;AAGS,oCAAoCM,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGH,cAAc,CAAC,CAAC;IACvCE,KAAK,CAACJ,SAAS,CAACM,SAAS,OAAGT,mBAAY,EAACQ,cAAc,EAAEN,kBAAkB,CAACC,SAAS,EAAEI,KAAK,CAACJ,SAAS,CAACM,SAAS,CAAC;IACjHF,KAAK,CAACH,MAAM,CAACK,SAAS,OAAGT,mBAAY,EAACQ,cAAc,EAAEN,kBAAkB,CAACE,MAAM,EAAEG,KAAK,CAACH,MAAM,CAACK,SAAS,CAAC;IACxG,OAAOF,KAAK;AAChB,CAAC"}

node_modules/@fluentui/react-toast/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js

@@ -0,0 +1,42 @@
+'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, {
+    ariaLiveClassNames: function() {
+        return ariaLiveClassNames;
+    },
+    useAriaLiveStyles_unstable: function() {
+        return useAriaLiveStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const ariaLiveClassNames = {
+    assertive: 'fui-AriaLive__assertive',
+    polite: 'fui-AriaLive__polite'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = (0, _react.makeResetStyles)({
+    clip: 'rect(0px, 0px, 0px, 0px)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: '0px',
+    width: '1px',
+    position: 'absolute'
+});
+const useAriaLiveStyles_unstable = (state)=>{
+    'use no memo';
+    const visuallyHidden = useResetStyles();
+    state.assertive.className = (0, _react.mergeClasses)(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);
+    state.polite.className = (0, _react.mergeClasses)(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);
+    return state;
+};

node_modules/@fluentui/react-toast/lib-commonjs/components/AriaLive/useAriaLiveStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AriaLive/useAriaLiveStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { mergeClasses, makeResetStyles } from '@griffel/react';\nimport type { AriaLiveSlots, AriaLiveState } from './AriaLive.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const ariaLiveClassNames: SlotClassNames<AriaLiveSlots> = {\n  assertive: 'fui-AriaLive__assertive',\n  polite: 'fui-AriaLive__polite',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  clip: 'rect(0px, 0px, 0px, 0px)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: '0px',\n  width: '1px',\n  position: 'absolute',\n});\n\n/**\n * Apply styling to the AriaLive slots based on the state\n */\nexport const useAriaLiveStyles_unstable = (state: AriaLiveState): AriaLiveState => {\n  'use no memo';\n\n  const visuallyHidden = useResetStyles();\n  state.assertive.className = mergeClasses(visuallyHidden, ariaLiveClassNames.assertive, state.assertive.className);\n  state.polite.className = mergeClasses(visuallyHidden, ariaLiveClassNames.polite, state.polite.className);\n\n  return state;\n};\n"],"names":["mergeClasses","makeResetStyles","ariaLiveClassNames","assertive","polite","useResetStyles","clip","height","margin","overflow","padding","width","position","useAriaLiveStyles_unstable","state","visuallyHidden","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaE,kBAAAA;;;8BAqBAW;eAAAA;;;uBAzBiC,iBAAiB;AAIxD,2BAA0D;IAC/DV,WAAW;IACXC,QAAQ;AACV,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBJ,0BAAAA,EAAgB;IACrCK,MAAM;IACNC,QAAQ;IACRC,QAAQ;IACRC,UAAU;IACVC,SAAS;IACTC,OAAO;IACPC,UAAU;AACZ;AAKO,mCAAmC,CAACE;IACzC;IAEA,MAAMC,iBAAiBV;IACvBS,MAAMX,SAAS,CAACa,SAAS,OAAGhB,mBAAAA,EAAae,gBAAgBb,mBAAmBC,SAAS,EAAEW,MAAMX,SAAS,CAACa,SAAS;IAChHF,MAAMV,MAAM,CAACY,SAAS,OAAGhB,mBAAAA,EAAae,gBAAgBb,mBAAmBE,MAAM,EAAEU,MAAMV,MAAM,CAACY,SAAS;IAEvG,OAAOF;AACT,EAAE"}