feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-aria/lib/useTypingAnnounce/index.js

@@ -0,0 +1 @@
+export { useTypingAnnounce } from './useTypingAnnounce';

node_modules/@fluentui/react-aria/lib/useTypingAnnounce/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useTypingAnnounce/index.ts"],"sourcesContent":["export { useTypingAnnounce } from './useTypingAnnounce';\n"],"names":["useTypingAnnounce"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,sBAAsB"}

node_modules/@fluentui/react-aria/lib/useTypingAnnounce/useTypingAnnounce.js

@@ -0,0 +1,72 @@
+'use client';
+import * as React from 'react';
+import { useTimeout } from '@fluentui/react-utilities';
+import { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+const valueMutationOptions = {
+    attributes: true,
+    subtree: true,
+    characterData: true,
+    attributeFilter: [
+        'value'
+    ]
+};
+export function useTypingAnnounce() {
+    const { targetDocument } = useFluent();
+    const { announce } = useAnnounce();
+    const inputRef = React.useRef(null);
+    const observer = React.useRef(undefined);
+    const [setTypingTimeout, clearTypingTimeout] = useTimeout();
+    const messageQueue = React.useRef([]);
+    const callback = React.useCallback((mutationList, mutationObserver)=>{
+        setTypingTimeout(()=>{
+            messageQueue.current.forEach(({ message, options })=>{
+                announce(message, options);
+            });
+            messageQueue.current.length = 0;
+            mutationObserver.disconnect();
+        }, 500);
+    }, [
+        announce,
+        setTypingTimeout
+    ]);
+    const typingAnnounce = React.useCallback((message, options = {})=>{
+        messageQueue.current.push({
+            message,
+            options
+        });
+        if (inputRef.current && observer.current) {
+            observer.current.observe(inputRef.current, valueMutationOptions);
+        }
+        setTypingTimeout(()=>{
+            observer.current && callback([], observer.current);
+        }, 500);
+    }, [
+        callback,
+        inputRef,
+        setTypingTimeout
+    ]);
+    React.useEffect(()=>{
+        const win = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+        if (!win) {
+            return;
+        }
+        if (!observer.current) {
+            observer.current = new win.MutationObserver(callback);
+        }
+        return ()=>{
+            // Clean up the observer when the component unmounts
+            if (observer.current) {
+                observer.current.disconnect();
+                clearTypingTimeout();
+            }
+        };
+    }, [
+        callback,
+        clearTypingTimeout,
+        targetDocument
+    ]);
+    return {
+        typingAnnounce,
+        inputRef
+    };
+}

node_modules/@fluentui/react-aria/lib/useTypingAnnounce/useTypingAnnounce.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/useTypingAnnounce/useTypingAnnounce.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTimeout } from '@fluentui/react-utilities';\nimport { useAnnounce, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { AnnounceOptions } from '@fluentui/react-shared-contexts';\nimport { AriaLiveAnnounceFn } from '../AriaLiveAnnouncer/AriaLiveAnnouncer.types';\n\ntype Message = {\n  message: string;\n  options: AnnounceOptions;\n};\n\nconst valueMutationOptions = {\n  attributes: true,\n  subtree: true,\n  characterData: true,\n  attributeFilter: ['value'],\n};\n\ninterface TypingAnnounceReturn<TInputElement extends HTMLElement = HTMLElement> {\n  typingAnnounce: AriaLiveAnnounceFn;\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n  inputRef: React.MutableRefObject<TInputElement | null>;\n}\n\nexport function useTypingAnnounce<\n  TInputElement extends HTMLElement = HTMLElement,\n>(): TypingAnnounceReturn<TInputElement> {\n  const { targetDocument } = useFluent();\n  const { announce } = useAnnounce();\n\n  const inputRef = React.useRef<TInputElement | null>(null);\n  const observer = React.useRef<MutationObserver>(undefined);\n  const [setTypingTimeout, clearTypingTimeout] = useTimeout();\n  const messageQueue = React.useRef<Message[]>([]);\n\n  const callback: MutationCallback = React.useCallback(\n    (mutationList, mutationObserver) => {\n      setTypingTimeout(() => {\n        messageQueue.current.forEach(({ message, options }) => {\n          announce(message, options);\n        });\n        messageQueue.current.length = 0;\n        mutationObserver.disconnect();\n      }, 500);\n    },\n    [announce, setTypingTimeout],\n  );\n\n  const typingAnnounce: AriaLiveAnnounceFn = React.useCallback(\n    (message: string, options: AnnounceOptions = {}) => {\n      messageQueue.current.push({ message, options });\n\n      if (inputRef.current && observer.current) {\n        observer.current.observe(inputRef.current, valueMutationOptions);\n      }\n\n      setTypingTimeout(() => {\n        observer.current && callback([], observer.current);\n      }, 500);\n    },\n    [callback, inputRef, setTypingTimeout],\n  );\n\n  React.useEffect(() => {\n    const win = targetDocument?.defaultView;\n    if (!win) {\n      return;\n    }\n\n    if (!observer.current) {\n      observer.current = new win.MutationObserver(callback);\n    }\n\n    return () => {\n      // Clean up the observer when the component unmounts\n      if (observer.current) {\n        observer.current.disconnect();\n        clearTypingTimeout();\n      }\n    };\n  }, [callback, clearTypingTimeout, targetDocument]);\n\n  return { typingAnnounce, inputRef };\n}\n"],"names":["React","useTimeout","useAnnounce","useFluent_unstable","useFluent","valueMutationOptions","attributes","subtree","characterData","attributeFilter","useTypingAnnounce","targetDocument","announce","inputRef","useRef","observer","undefined","setTypingTimeout","clearTypingTimeout","messageQueue","callback","useCallback","mutationList","mutationObserver","current","forEach","message","options","length","disconnect","typingAnnounce","push","observe","useEffect","win","defaultView","MutationObserver"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,4BAA4B;AACvD,SAASC,WAAW,EAAEC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAS/F,MAAMC,uBAAuB;IAC3BC,YAAY;IACZC,SAAS;IACTC,eAAe;IACfC,iBAAiB;QAAC;KAAQ;AAC5B;AAQA,OAAO,SAASC;IAGd,MAAM,EAAEC,cAAc,EAAE,GAAGP;IAC3B,MAAM,EAAEQ,QAAQ,EAAE,GAAGV;IAErB,MAAMW,WAAWb,MAAMc,MAAM,CAAuB;IACpD,MAAMC,WAAWf,MAAMc,MAAM,CAAmBE;IAChD,MAAM,CAACC,kBAAkBC,mBAAmB,GAAGjB;IAC/C,MAAMkB,eAAenB,MAAMc,MAAM,CAAY,EAAE;IAE/C,MAAMM,WAA6BpB,MAAMqB,WAAW,CAClD,CAACC,cAAcC;QACbN,iBAAiB;YACfE,aAAaK,OAAO,CAACC,OAAO,CAAC,CAAC,EAAEC,OAAO,EAAEC,OAAO,EAAE;gBAChDf,SAASc,SAASC;YACpB;YACAR,aAAaK,OAAO,CAACI,MAAM,GAAG;YAC9BL,iBAAiBM,UAAU;QAC7B,GAAG;IACL,GACA;QAACjB;QAAUK;KAAiB;IAG9B,MAAMa,iBAAqC9B,MAAMqB,WAAW,CAC1D,CAACK,SAAiBC,UAA2B,CAAC,CAAC;QAC7CR,aAAaK,OAAO,CAACO,IAAI,CAAC;YAAEL;YAASC;QAAQ;QAE7C,IAAId,SAASW,OAAO,IAAIT,SAASS,OAAO,EAAE;YACxCT,SAASS,OAAO,CAACQ,OAAO,CAACnB,SAASW,OAAO,EAAEnB;QAC7C;QAEAY,iBAAiB;YACfF,SAASS,OAAO,IAAIJ,SAAS,EAAE,EAAEL,SAASS,OAAO;QACnD,GAAG;IACL,GACA;QAACJ;QAAUP;QAAUI;KAAiB;IAGxCjB,MAAMiC,SAAS,CAAC;QACd,MAAMC,MAAMvB,2BAAAA,qCAAAA,eAAgBwB,WAAW;QACvC,IAAI,CAACD,KAAK;YACR;QACF;QAEA,IAAI,CAACnB,SAASS,OAAO,EAAE;YACrBT,SAASS,OAAO,GAAG,IAAIU,IAAIE,gBAAgB,CAAChB;QAC9C;QAEA,OAAO;YACL,oDAAoD;YACpD,IAAIL,SAASS,OAAO,EAAE;gBACpBT,SAASS,OAAO,CAACK,UAAU;gBAC3BX;YACF;QACF;IACF,GAAG;QAACE;QAAUF;QAAoBP;KAAe;IAEjD,OAAO;QAAEmB;QAAgBjB;IAAS;AACpC"}