feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,85 @@
+'use client';
+import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
+import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
+import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
+import { useChildElement } from '../utils/useChildElement';
+import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
+/**
+ * A private symbol to store the motion definition on the component for variants.
+ *
+ * @internal
+ */ export const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
+/**
+ * Creates a component that will animate the children using the provided motion.
+ *
+ * @param value - A motion definition.
+ */ export 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] = useChildElement(children);
+        const handleRef = useMotionImperativeRef(imperativeRef);
+        const skipMotions = useMotionBehaviourContext() === 'skip';
+        const optionsRef = React.useRef({
+            skipMotions,
+            params
+        });
+        const animateAtoms = useAnimateAtoms();
+        const isReducedMotion = useIsReducedMotion();
+        const onMotionStart = useEventCallback(()=>{
+            onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);
+        });
+        const onMotionFinish = useEventCallback(()=>{
+            onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
+        });
+        const onMotionCancel = useEventCallback(()=>{
+            onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
+        });
+        useIsomorphicLayoutEffect(()=>{
+            // Heads up!
+            // We store the params in a ref to avoid re-rendering the component when the params change.
+            optionsRef.current = {
+                skipMotions,
+                params
+            };
+        });
+        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/factories/createMotionComponentVariant.js

@@ -0,0 +1,29 @@
+import { MOTION_DEFINITION, createMotionComponent } from './createMotionComponent';
+/**
+ * Create a variant function that wraps a motion function to customize it.
+ * The new motion function has the supplied variant params as defaults,
+ * but these can still be overridden by runtime params when the new function is called.
+ *
+ * @internal
+ */ export function createMotionFnVariant(motionFn, variantParams) {
+    const variantFn = (runtimeParams)=>motionFn({
+            ...variantParams,
+            ...runtimeParams
+        });
+    return variantFn;
+}
+/**
+ * Create a new motion component based on another motion component,
+ * using the provided variant parameters as defaults.
+ *
+ * @param component - A component created by `createMotionComponent`.
+ * @param variantParams - An object containing the variant parameters to be used as defaults.
+ * The variant parameters should match the type of the component's motion parameters.
+ * @returns A new motion component that uses the provided variant parameters as defaults.
+ * The new component can still accept runtime parameters that override the defaults.
+ */ export function createMotionComponentVariant(component, variantParams) {
+    const originalFn = component[MOTION_DEFINITION];
+    // The variant params become new defaults, but they can still be overridden by runtime params.
+    const variantFn = createMotionFnVariant(originalFn, variantParams);
+    return createMotionComponent(variantFn);
+}

node_modules/@fluentui/react-motion/lib/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":["MOTION_DEFINITION","createMotionComponent","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","createMotionComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,iBAAiB,EAAEC,qBAAqB,QAAyB,0BAA0B;AAEpG;;;;;;CAMC,GACD,OAAO,SAASC,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,6BACdC,SAAwC,EACxCJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,8FAA8F;IAC9F,MAAMK,YAAYH,sBAAsBO,YAAYL;IACpD,OAAOH,sBAAsBI;AAC/B"}

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

@@ -0,0 +1,168 @@
+'use client';
+import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
+import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
+import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
+import { useMountedState } from '../hooks/useMountedState';
+import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
+import { useChildElement } from '../utils/useChildElement';
+import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
+import { createMotionComponent } from './createMotionComponent';
+/**
+ * A private symbol to store the motion definition on the component for variants.
+ *
+ * @internal
+ */ export const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');
+const INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');
+export function createPresenceComponent(value) {
+    return Object.assign((props)=>{
+        'use no memo';
+        const itemContext = React.useContext(PresenceGroupChildContext);
+        const merged = {
+            ...itemContext,
+            ...props
+        };
+        const skipMotions = useMotionBehaviourContext() === 'skip';
+        const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
+        const params = _rest;
+        const [mounted, setMounted] = useMountedState(visible, unmountOnExit);
+        const [child, childRef] = useChildElement(children, mounted);
+        const handleRef = useMotionImperativeRef(imperativeRef);
+        const optionsRef = React.useRef({
+            appear,
+            params,
+            skipMotions
+        });
+        const animateAtoms = useAnimateAtoms();
+        const isFirstMount = useFirstMount();
+        const isReducedMotion = useIsReducedMotion();
+        const handleMotionStart = useEventCallback((direction)=>{
+            onMotionStart === null || onMotionStart === void 0 ? void 0 : onMotionStart(null, {
+                direction
+            });
+        });
+        const handleMotionFinish = 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 = useEventCallback((direction)=>{
+            onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
+                direction
+            });
+        });
+        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
+            };
+        });
+        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: 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: 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/factories/createPresenceComponentVariant.js

@@ -0,0 +1,29 @@
+import { PRESENCE_MOTION_DEFINITION, createPresenceComponent } from './createPresenceComponent';
+/**
+ * Create a variant function that wraps a presence function to customize it.
+ * The new presence function has the supplied variant params as defaults,
+ * but these can still be overridden by runtime params when the new function is called.
+ *
+ * @internal
+ */ export function createPresenceFnVariant(presenceFn, variantParams) {
+    const variantFn = (runtimeParams)=>presenceFn({
+            ...variantParams,
+            ...runtimeParams
+        });
+    return variantFn;
+}
+/**
+ * Create a new presence component based on another presence component,
+ * using the provided variant parameters as defaults.
+ *
+ * @param component - A component created by `createPresenceComponent`.
+ * @param variantParams - An object containing the variant parameters to be used as defaults.
+ * The variant parameters should match the type of the component's motion parameters.
+ * @returns A new presence component that uses the provided variant parameters as defaults.
+ * The new component can still accept runtime parameters that override the defaults.
+ */ export function createPresenceComponentVariant(component, variantParams) {
+    const originalFn = component[PRESENCE_MOTION_DEFINITION];
+    // The variant params become new defaults, but they can still be overridden by runtime params.
+    const variantFn = createPresenceFnVariant(originalFn, variantParams);
+    return createPresenceComponent(variantFn);
+}

node_modules/@fluentui/react-motion/lib/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":["PRESENCE_MOTION_DEFINITION","createPresenceComponent","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","createPresenceComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,0BAA0B,EAAEC,uBAAuB,QAA2B,4BAA4B;AAEnH;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,+BACdC,SAA0C,EAC1CJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,2BAA2B;IACxD,8FAA8F;IAC9F,MAAMK,YAAYH,wBAAwBO,YAAYL;IACtD,OAAOH,wBAAwBI;AACjC"}