feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-motion/lib-commonjs/hooks/useAnimateAtoms.js

@@ -0,0 +1,201 @@
+'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, {
+    DEFAULT_ANIMATION_OPTIONS: function() {
+        return DEFAULT_ANIMATION_OPTIONS;
+    },
+    useAnimateAtoms: function() {
+        return useAnimateAtoms;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _isAnimationRunning = require("../utils/isAnimationRunning");
+const DEFAULT_ANIMATION_OPTIONS = {
+    fill: 'forwards'
+};
+// A motion atom's default reduced motion is a simple 1 ms duration.
+// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
+const DEFAULT_REDUCED_MOTION_ATOM = {
+    duration: 1
+};
+/**
+ * Creates an animation handle that controls multiple animations.
+ * Is used to avoid leaking "element" references from the hook.
+ *
+ * @param animations
+ */ function createHandle(animations) {
+    return {
+        set playbackRate (rate){
+            animations.forEach((animation)=>{
+                animation.playbackRate = rate;
+            });
+        },
+        setMotionEndCallbacks (onfinish, oncancel) {
+            // Heads up!
+            // This could use "Animation:finished", but it's causing a memory leak in Chromium.
+            // See: https://issues.chromium.org/u/2/issues/383016426
+            const promises = animations.map((animation)=>{
+                return new Promise((resolve, reject)=>{
+                    animation.onfinish = ()=>resolve();
+                    animation.oncancel = ()=>reject();
+                });
+            });
+            Promise.all(promises).then(()=>{
+                onfinish();
+            }).catch(()=>{
+                oncancel();
+            });
+        },
+        isRunning () {
+            return animations.some((animation)=>(0, _isAnimationRunning.isAnimationRunning)(animation));
+        },
+        dispose: ()=>{
+            animations.length = 0;
+        },
+        cancel: ()=>{
+            animations.forEach((animation)=>{
+                animation.cancel();
+            });
+        },
+        pause: ()=>{
+            animations.forEach((animation)=>{
+                animation.pause();
+            });
+        },
+        play: ()=>{
+            animations.forEach((animation)=>{
+                animation.play();
+            });
+        },
+        finish: ()=>{
+            animations.forEach((animation)=>{
+                animation.finish();
+            });
+        },
+        reverse: ()=>{
+            // Heads up!
+            //
+            // This is used for the interruptible motion. If the animation is running, we need to reverse it.
+            //
+            // TODO: what do with animations that have "delay"?
+            // TODO: what do with animations that have different "durations"?
+            animations.forEach((animation)=>{
+                animation.reverse();
+            });
+        }
+    };
+}
+function useAnimateAtomsInSupportedEnvironment() {
+    var _window_Animation;
+    // eslint-disable-next-line @nx/workspace-no-restricted-globals
+    const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof ((_window_Animation = window.Animation) === null || _window_Animation === void 0 ? void 0 : _window_Animation.prototype.persist) === 'function';
+    return _react.useCallback((element, value, options)=>{
+        const atoms = Array.isArray(value) ? value : [
+            value
+        ];
+        const { isReducedMotion } = options;
+        const animations = atoms.map((motion)=>{
+            // Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
+            const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
+            // Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
+            const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
+            const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
+            const animationParams = {
+                ...DEFAULT_ANIMATION_OPTIONS,
+                ...params,
+                // Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
+                ...isReducedMotion && reducedMotionParams
+            };
+            try {
+                // Firefox can throw an error when calling `element.animate()`.
+                // See: https://github.com/microsoft/fluentui/issues/33902
+                const animation = element.animate(animationKeyframes, animationParams);
+                if (SUPPORTS_PERSIST) {
+                    // Chromium browsers can return null when calling `element.animate()`.
+                    // See: https://github.com/microsoft/fluentui/issues/33902
+                    animation === null || animation === void 0 ? void 0 : animation.persist();
+                } else {
+                    const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
+                    var _element_style;
+                    Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
+                }
+                return animation;
+            } catch (e) {
+                return null;
+            }
+        }).filter((animation)=>!!animation);
+        return createHandle(animations);
+    }, [
+        SUPPORTS_PERSIST
+    ]);
+}
+/**
+ * In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
+ * to ensure that the callback is not executed synchronously, which would cause the test to fail.
+ *
+ * @see https://github.com/microsoft/fluentui/issues/31701
+ */ function useAnimateAtomsInTestEnvironment() {
+    const [count, setCount] = _react.useState(0);
+    const callbackRef = _react.useRef(undefined);
+    const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
+    _react.useEffect(()=>{
+        if (count > 0) {
+            var _callbackRef_current;
+            (_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
+        }
+    }, [
+        count
+    ]);
+    return _react.useCallback((element, value, options)=>{
+        const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
+        // Heads up!
+        // If the environment supports Web Animations API, we can use the native implementation.
+        if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
+            return realAnimateAtoms(element, value, options);
+        }
+        return {
+            setMotionEndCallbacks (onfinish) {
+                callbackRef.current = onfinish;
+                setCount((v)=>v + 1);
+            },
+            set playbackRate (rate){
+            /* no-op */ },
+            isRunning () {
+                return false;
+            },
+            dispose () {
+            /* no-op */ },
+            cancel () {
+            /* no-op */ },
+            pause () {
+            /* no-op */ },
+            play () {
+            /* no-op */ },
+            finish () {
+            /* no-op */ },
+            reverse () {
+            /* no-op */ }
+        };
+    }, [
+        realAnimateAtoms
+    ]);
+}
+function useAnimateAtoms() {
+    'use no memo';
+    if (process.env.NODE_ENV === 'test') {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        return useAnimateAtomsInTestEnvironment();
+    }
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    return useAnimateAtomsInSupportedEnvironment();
+}

node_modules/@fluentui/react-motion/lib-commonjs/hooks/useIsReducedMotion.js

@@ -0,0 +1,42 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useIsReducedMotion", {
+    enumerable: true,
+    get: function() {
+        return useIsReducedMotion;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
+function useIsReducedMotion() {
+    const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
+    var _targetDocument_defaultView;
+    const targetWindow = (_targetDocument_defaultView = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) !== null && _targetDocument_defaultView !== void 0 ? _targetDocument_defaultView : null;
+    const queryValue = _react.useRef(false);
+    const isEnabled = _react.useCallback(()=>queryValue.current, []);
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
+            return;
+        }
+        const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);
+        if (queryMatch.matches) {
+            queryValue.current = true;
+        }
+        const matchListener = (e)=>{
+            queryValue.current = e.matches;
+        };
+        queryMatch.addEventListener('change', matchListener);
+        return ()=>{
+            queryMatch.removeEventListener('change', matchListener);
+        };
+    }, [
+        targetWindow
+    ]);
+    return isEnabled;
+}

node_modules/@fluentui/react-motion/lib-commonjs/hooks/useIsReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n  const { targetDocument } = useFluent();\n  const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n  const queryValue = React.useRef<boolean>(false);\n  const isEnabled = React.useCallback(() => queryValue.current, []);\n\n  useIsomorphicLayoutEffect(() => {\n    if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n      return;\n    }\n\n    const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n    if (queryMatch.matches) {\n      queryValue.current = true;\n    }\n\n    const matchListener = (e: MediaQueryListEvent) => {\n      queryValue.current = e.matches;\n    };\n\n    queryMatch.addEventListener('change', matchListener);\n\n    return () => {\n      queryMatch.removeEventListener('change', matchListener);\n    };\n  }, [targetWindow]);\n\n  return isEnabled;\n}\n"],"names":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useIsomorphicLayoutEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":"AAAA;;;;;+BAUgBA;;;eAAAA;;;;qCARgC;gCACN;iEACnB;AAEvB,MAAMC,sBAAsB;AAIrB,SAASD;IACd,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;QACAD;IAApC,MAAME,eAA8BF,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBG,WAAW,cAA3BH,yCAAAA,8BAA+B;IAEnE,MAAMI,aAAaC,OAAMC,MAAM,CAAU;IACzC,MAAMC,YAAYF,OAAMG,WAAW,CAAC,IAAMJ,WAAWK,OAAO,EAAE,EAAE;IAEhEC,IAAAA,yCAAyB,EAAC;QACxB,IAAIR,iBAAiB,QAAQ,OAAOA,aAAaS,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaV,aAAaS,UAAU,CAACZ;QAE3C,IAAIa,WAAWC,OAAO,EAAE;YACtBT,WAAWK,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBX,WAAWK,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACZ;KAAa;IAEjB,OAAOK;AACT"}

node_modules/@fluentui/react-motion/lib-commonjs/hooks/useMotionImperativeRef.js

@@ -0,0 +1,34 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMotionImperativeRef", {
+    enumerable: true,
+    get: function() {
+        return useMotionImperativeRef;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+function useMotionImperativeRef(imperativeRef) {
+    const animationRef = _react.useRef(undefined);
+    _react.useImperativeHandle(imperativeRef, ()=>({
+            setPlayState: (state)=>{
+                if (state === 'running') {
+                    var _animationRef_current;
+                    (_animationRef_current = animationRef.current) === null || _animationRef_current === void 0 ? void 0 : _animationRef_current.play();
+                }
+                if (state === 'paused') {
+                    var _animationRef_current1;
+                    (_animationRef_current1 = animationRef.current) === null || _animationRef_current1 === void 0 ? void 0 : _animationRef_current1.pause();
+                }
+            },
+            setPlaybackRate: (rate)=>{
+                if (animationRef.current) {
+                    animationRef.current.playbackRate = rate;
+                }
+            }
+        }));
+    return animationRef;
+}

node_modules/@fluentui/react-motion/lib-commonjs/hooks/useMotionImperativeRef.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(\n  imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined,\n  // eslint-disable-next-line @typescript-eslint/no-deprecated\n): React.MutableRefObject<AnimationHandle | undefined> {\n  const animationRef = React.useRef<AnimationHandle | undefined>(undefined);\n\n  React.useImperativeHandle(imperativeRef, () => ({\n    setPlayState: state => {\n      if (state === 'running') {\n        animationRef.current?.play();\n      }\n\n      if (state === 'paused') {\n        animationRef.current?.pause();\n      }\n    },\n    setPlaybackRate: rate => {\n      if (animationRef.current) {\n        animationRef.current.playbackRate = rate;\n      }\n    },\n  }));\n\n  return animationRef;\n}\n"],"names":["useMotionImperativeRef","imperativeRef","animationRef","React","useRef","undefined","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"mappings":"AAAA;;;;;+BAKgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,uBACdC,aAAqE;IAGrE,MAAMC,eAAeC,OAAMC,MAAM,CAA8BC;IAE/DF,OAAMG,mBAAmB,CAACL,eAAe,IAAO,CAAA;YAC9CM,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBN;qBAAAA,wBAAAA,aAAaO,OAAO,cAApBP,4CAAAA,sBAAsBQ,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBN;qBAAAA,yBAAAA,aAAaO,OAAO,cAApBP,6CAAAA,uBAAsBS,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIX,aAAaO,OAAO,EAAE;oBACxBP,aAAaO,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOX;AACT"}

node_modules/@fluentui/react-motion/lib-commonjs/hooks/useMountedState.js

@@ -0,0 +1,35 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useMountedState", {
+    enumerable: true,
+    get: function() {
+        return useMountedState;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+function useMountedState(visible = false, unmountOnExit = false) {
+    const mountedRef = _react.useRef(unmountOnExit ? visible : true);
+    const forceUpdate = (0, _reactutilities.useForceUpdate)();
+    const setMounted = _react.useCallback((newValue)=>{
+        if (mountedRef.current !== newValue) {
+            mountedRef.current = newValue;
+            forceUpdate();
+        }
+    }, [
+        forceUpdate
+    ]);
+    _react.useEffect(()=>{
+        if (visible) {
+            mountedRef.current = visible;
+        }
+    });
+    return [
+        visible || mountedRef.current,
+        setMounted
+    ];
+}

node_modules/@fluentui/react-motion/lib-commonjs/hooks/useMountedState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["'use client';\n\nimport { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n  visible: boolean = false,\n  unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n  const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n  const forceUpdate = useForceUpdate();\n\n  const setMounted = React.useCallback(\n    (newValue: boolean) => {\n      if (mountedRef.current !== newValue) {\n        mountedRef.current = newValue;\n        forceUpdate();\n      }\n    },\n    [forceUpdate],\n  );\n\n  React.useEffect(() => {\n    if (visible) {\n      mountedRef.current = visible;\n    }\n  });\n\n  return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useMountedState","visible","unmountOnExit","mountedRef","React","useRef","forceUpdate","useForceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA;;;;;+BASgBA;;;eAAAA;;;;gCAPe;iEACR;AAMhB,SAASA,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaC,OAAMC,MAAM,CAAUH,gBAAgBD,UAAU;IACnE,MAAMK,cAAcC,IAAAA,8BAAc;IAElC,MAAMC,aAAaJ,OAAMK,WAAW,CAClC,CAACC;QACC,IAAIP,WAAWQ,OAAO,KAAKD,UAAU;YACnCP,WAAWQ,OAAO,GAAGD;YACrBJ;QACF;IACF,GACA;QAACA;KAAY;IAGfF,OAAMQ,SAAS,CAAC;QACd,IAAIX,SAAS;YACXE,WAAWQ,OAAO,GAAGV;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWQ,OAAO;QAAEH;KAAW;AACpD"}