feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-motion/lib-commonjs/factories/createMotionComponent.js

@@ -0,0 +1,96 @@
+'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, {
+    MOTION_DEFINITION: function() {
+        return MOTION_DEFINITION;
+    },
+    createMotionComponent: function() {
+        return createMotionComponent;
+    }
+});
+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 _useAnimateAtoms = require("../hooks/useAnimateAtoms");
+const _useMotionImperativeRef = require("../hooks/useMotionImperativeRef");
+const _useIsReducedMotion = require("../hooks/useIsReducedMotion");
+const _useChildElement = require("../utils/useChildElement");
+const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
+const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
+function createMotionComponent(value) {
+    const Atom = (props)=>{
+        'use no memo';
+        const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
+        const params = _rest;
+        const [child, childRef] = (0, _useChildElement.useChildElement)(children);
+        const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef);
+        const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
+        const optionsRef = _react.useRef({
+            skipMotions,
+            params
+        });
+        const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)();
+        const isReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)();
+        const onMotionStart = (0, _reactutilities.useEventCallback)(()=>{
+            onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);
+        });
+        const onMotionFinish = (0, _reactutilities.useEventCallback)(()=>{
+            onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
+        });
+        const onMotionCancel = (0, _reactutilities.useEventCallback)(()=>{
+            onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
+        });
+        (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+            // Heads up!
+            // We store the params in a ref to avoid re-rendering the component when the params change.
+            optionsRef.current = {
+                skipMotions,
+                params
+            };
+        });
+        (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+            const element = childRef.current;
+            if (element) {
+                const atoms = typeof value === 'function' ? value({
+                    element,
+                    ...optionsRef.current.params
+                }) : value;
+                onMotionStart();
+                const handle = animateAtoms(element, atoms, {
+                    isReducedMotion: isReducedMotion()
+                });
+                handleRef.current = handle;
+                handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
+                if (optionsRef.current.skipMotions) {
+                    handle.finish();
+                }
+                return ()=>{
+                    handle.cancel();
+                };
+            }
+        }, [
+            animateAtoms,
+            childRef,
+            handleRef,
+            isReducedMotion,
+            onMotionFinish,
+            onMotionStart,
+            onMotionCancel
+        ]);
+        return child;
+    };
+    return Object.assign(Atom, {
+        // Heads up!
+        // Always normalize it to a function to simplify types
+        [MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
+    });
+}

node_modules/@fluentui/react-motion/lib-commonjs/factories/createMotionComponentVariant.js

@@ -0,0 +1,32 @@
+"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, {
+    createMotionComponentVariant: function() {
+        return createMotionComponentVariant;
+    },
+    createMotionFnVariant: function() {
+        return createMotionFnVariant;
+    }
+});
+const _createMotionComponent = require("./createMotionComponent");
+function createMotionFnVariant(motionFn, variantParams) {
+    const variantFn = (runtimeParams)=>motionFn({
+            ...variantParams,
+            ...runtimeParams
+        });
+    return variantFn;
+}
+function createMotionComponentVariant(component, variantParams) {
+    const originalFn = component[_createMotionComponent.MOTION_DEFINITION];
+    // The variant params become new defaults, but they can still be overridden by runtime params.
+    const variantFn = createMotionFnVariant(originalFn, variantParams);
+    return (0, _createMotionComponent.createMotionComponent)(variantFn);
+}

node_modules/@fluentui/react-motion/lib-commonjs/factories/createMotionComponentVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';\n\n/**\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  motionFn: AtomMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof motionFn {\n  const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: MotionComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n  const originalFn = component[MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createMotionFnVariant(originalFn, variantParams);\n  return createMotionComponent(variantFn);\n}\n"],"names":["createMotionComponentVariant","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","component","originalFn","MOTION_DEFINITION","createMotionComponent"],"mappings":";;;;;;;;;;;IA4BgBA,4BAA4B;eAA5BA;;IAlBAC,qBAAqB;eAArBA;;;uCAT0D;AASnE,SAASA,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAYO,SAASJ,6BACdM,SAAwC,EACxCH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,wCAAiB,CAAC;IAC/C,8FAA8F;IAC9F,MAAMJ,YAAYH,sBAAsBM,YAAYJ;IACpD,OAAOM,IAAAA,4CAAqB,EAACL;AAC/B"}

node_modules/@fluentui/react-motion/lib-commonjs/factories/createPresenceComponent.js

@@ -0,0 +1,183 @@
+'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, {
+    PRESENCE_MOTION_DEFINITION: function() {
+        return PRESENCE_MOTION_DEFINITION;
+    },
+    createPresenceComponent: function() {
+        return createPresenceComponent;
+    }
+});
+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 _PresenceGroupChildContext = require("../contexts/PresenceGroupChildContext");
+const _useAnimateAtoms = require("../hooks/useAnimateAtoms");
+const _useMotionImperativeRef = require("../hooks/useMotionImperativeRef");
+const _useMountedState = require("../hooks/useMountedState");
+const _useIsReducedMotion = require("../hooks/useIsReducedMotion");
+const _useChildElement = require("../utils/useChildElement");
+const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
+const _createMotionComponent = require("./createMotionComponent");
+const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');
+const INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');
+function createPresenceComponent(value) {
+    return Object.assign((props)=>{
+        'use no memo';
+        const itemContext = _react.useContext(_PresenceGroupChildContext.PresenceGroupChildContext);
+        const merged = {
+            ...itemContext,
+            ...props
+        };
+        const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
+        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
+        const params = _rest;
+        const [mounted, setMounted] = (0, _useMountedState.useMountedState)(visible, unmountOnExit);
+        const [child, childRef] = (0, _useChildElement.useChildElement)(children, mounted);
+        const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef);
+        const optionsRef = _react.useRef({
+            appear,
+            params,
+            skipMotions
+        });
+        const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)();
+        const isFirstMount = (0, _reactutilities.useFirstMount)();
+        const isReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)();
+        const handleMotionStart = (0, _reactutilities.useEventCallback)((direction)=>{
+            onMotionStart === null || onMotionStart === void 0 ? void 0 : onMotionStart(null, {
+                direction
+            });
+        });
+        const handleMotionFinish = (0, _reactutilities.useEventCallback)((direction)=>{
+            onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, {
+                direction
+            });
+            if (direction === 'exit' && unmountOnExit) {
+                setMounted(false);
+                onExit === null || onExit === void 0 ? void 0 : onExit();
+            }
+        });
+        const handleMotionCancel = (0, _reactutilities.useEventCallback)((direction)=>{
+            onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
+                direction
+            });
+        });
+        (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+            // Heads up!
+            // We store the params in a ref to avoid re-rendering the component when the params change.
+            optionsRef.current = {
+                appear,
+                params,
+                skipMotions
+            };
+        });
+        (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+            const element = childRef.current;
+            if (!element) {
+                return;
+            }
+            let handle;
+            function cleanup() {
+                if (!handle) {
+                    return;
+                }
+                // Heads up!
+                //
+                // If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in
+                // the next effect.
+                if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {
+                    return;
+                }
+                handle.cancel();
+                handleRef.current = undefined;
+            }
+            const presenceMotion = typeof value === 'function' ? value({
+                element,
+                ...optionsRef.current.params
+            }) : value;
+            const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = presenceMotion[INTERRUPTABLE_MOTION_SYMBOL];
+            if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {
+                handle = handleRef.current;
+                if (handle && handle.isRunning()) {
+                    handle.reverse();
+                    return cleanup;
+                }
+            }
+            const atoms = visible ? presenceMotion.enter : presenceMotion.exit;
+            const direction = visible ? 'enter' : 'exit';
+            // Heads up!
+            // Initial styles are applied when the component is mounted for the first time and "appear" is set to "false" (otherwise animations are triggered)
+            const applyInitialStyles = !optionsRef.current.appear && isFirstMount;
+            const skipAnimationByConfig = optionsRef.current.skipMotions;
+            if (!applyInitialStyles) {
+                handleMotionStart(direction);
+            }
+            handle = animateAtoms(element, atoms, {
+                isReducedMotion: isReducedMotion()
+            });
+            if (applyInitialStyles) {
+                // Heads up!
+                // .finish() is used in this case to skip animation and apply animation styles immediately
+                handle.finish();
+                return cleanup;
+            }
+            handleRef.current = handle;
+            handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
+            if (skipAnimationByConfig) {
+                handle.finish();
+            }
+            return cleanup;
+        }, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+            animateAtoms,
+            childRef,
+            handleRef,
+            isReducedMotion,
+            handleMotionFinish,
+            handleMotionStart,
+            handleMotionCancel,
+            visible
+        ]);
+        _react.useEffect(()=>{
+            // Heads up!
+            //
+            // Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate
+            // effect to ensure that the component is unmounted.
+            if (unmountOnExit && !mounted) {
+                var _handleRef_current;
+                (_handleRef_current = handleRef.current) === null || _handleRef_current === void 0 ? void 0 : _handleRef_current.dispose();
+            }
+        }, [
+            handleRef,
+            unmountOnExit,
+            mounted
+        ]);
+        if (mounted) {
+            return child;
+        }
+        return null;
+    }, {
+        // Heads up!
+        // Always normalize it to a function to simplify types
+        [PRESENCE_MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
+    }, {
+        // Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>
+        In: (0, _createMotionComponent.createMotionComponent)(// If we have a motion function, wrap it to forward the runtime params and pick `enter`.
+        // Otherwise, pass the `enter` motion object directly.
+        typeof value === 'function' ? (...args)=>value(...args).enter : value.enter),
+        // Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>
+        Out: (0, _createMotionComponent.createMotionComponent)(// If we have a motion function, wrap it to forward the runtime params and pick `exit`.
+        // Otherwise, pass the `exit` motion object directly.
+        typeof value === 'function' ? (...args)=>value(...args).exit : value.exit)
+    });
+}

node_modules/@fluentui/react-motion/lib-commonjs/factories/createPresenceComponentVariant.js

@@ -0,0 +1,32 @@
+"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, {
+    createPresenceComponentVariant: function() {
+        return createPresenceComponentVariant;
+    },
+    createPresenceFnVariant: function() {
+        return createPresenceFnVariant;
+    }
+});
+const _createPresenceComponent = require("./createPresenceComponent");
+function createPresenceFnVariant(presenceFn, variantParams) {
+    const variantFn = (runtimeParams)=>presenceFn({
+            ...variantParams,
+            ...runtimeParams
+        });
+    return variantFn;
+}
+function createPresenceComponentVariant(component, variantParams) {
+    const originalFn = component[_createPresenceComponent.PRESENCE_MOTION_DEFINITION];
+    // The variant params become new defaults, but they can still be overridden by runtime params.
+    const variantFn = createPresenceFnVariant(originalFn, variantParams);
+    return (0, _createPresenceComponent.createPresenceComponent)(variantFn);
+}

node_modules/@fluentui/react-motion/lib-commonjs/factories/createPresenceComponentVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  presenceFn: PresenceMotionFn<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n  const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n  return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n  component: PresenceComponent<MotionParams>,\n  variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n  const originalFn = component[PRESENCE_MOTION_DEFINITION];\n  // The variant params become new defaults, but they can still be overridden by runtime params.\n  const variantFn = createPresenceFnVariant(originalFn, variantParams);\n  return createPresenceComponent(variantFn);\n}\n"],"names":["createPresenceComponentVariant","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","component","originalFn","PRESENCE_MOTION_DEFINITION","createPresenceComponent"],"mappings":";;;;;;;;;;;IA4BgBA,8BAA8B;eAA9BA;;IAlBAC,uBAAuB;eAAvBA;;;yCATuE;AAShF,SAASA,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAYO,SAASJ,+BACdM,SAA0C,EAC1CH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,mDAA0B,CAAC;IACxD,8FAA8F;IAC9F,MAAMJ,YAAYH,wBAAwBM,YAAYJ;IACtD,OAAOM,IAAAA,gDAAuB,EAACL;AACjC"}