feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-motion-components-preview/lib-commonjs/components/Collapse/Collapse.js

@@ -0,0 +1,133 @@
+"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, {
+    Collapse: function() {
+        return Collapse;
+    },
+    CollapseDelayed: function() {
+        return CollapseDelayed;
+    },
+    CollapseRelaxed: function() {
+        return CollapseRelaxed;
+    },
+    CollapseSnappy: function() {
+        return CollapseSnappy;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const _collapseatoms = require("./collapse-atoms");
+const _fadeatom = require("../../atoms/fade-atom");
+/**
+ * Define a presence motion for collapse/expand
+ *
+ * @param element - The element to apply the collapse motion to
+ * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value
+ * @param delay - Time (ms) to delay the entire enter transition. Defaults to 0
+ * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
+ * @param exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry
+ * @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0
+ * @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry
+ * @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing
+ * @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing
+ * @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing
+ * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
+ * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
+ * @param outSize - Size for the out state (collapsed). Defaults to `'0px'`
+ */ const collapsePresenceFn = ({ element, // Primary duration controls (simple API)
+duration = _reactmotion.motionTokens.durationNormal, exitDuration = duration, // Granular duration controls with smart defaults (advanced API)
+sizeDuration = duration, opacityDuration = sizeDuration, exitSizeDuration = exitDuration, exitOpacityDuration = exitSizeDuration, // Other timing controls
+easing = _reactmotion.motionTokens.curveEasyEaseMax, delay = 0, exitEasing = easing, exitDelay = delay, staggerDelay = 0, exitStaggerDelay = staggerDelay, // Animation controls
+animateOpacity = true, orientation = 'vertical', outSize = '0px' })=>{
+    // ----- ENTER -----
+    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
+    // For enter: size expands first, then opacity fades in after staggerDelay
+    const enterAtoms = [
+        // Apply global delay to size atom - size expansion starts first
+        (0, _collapseatoms.sizeEnterAtom)({
+            orientation,
+            duration: sizeDuration,
+            easing,
+            element,
+            outSize,
+            delay
+        }),
+        (0, _collapseatoms.whitespaceAtom)({
+            direction: 'enter',
+            orientation,
+            duration: sizeDuration,
+            easing,
+            delay
+        })
+    ];
+    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        enterAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'enter',
+            duration: opacityDuration,
+            easing,
+            delay: delay + staggerDelay
+        }));
+    }
+    // ----- EXIT -----
+    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
+    // For exit: opacity fades out first, then size collapses after exitStaggerDelay
+    const exitAtoms = [];
+    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
+    if (animateOpacity) {
+        exitAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'exit',
+            duration: exitOpacityDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+    }
+    exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        element,
+        delay: exitDelay + exitStaggerDelay,
+        outSize
+    }), (0, _collapseatoms.whitespaceAtom)({
+        direction: 'exit',
+        orientation,
+        duration: exitSizeDuration,
+        easing: exitEasing,
+        delay: exitDelay + exitStaggerDelay
+    }));
+    return {
+        enter: enterAtoms,
+        exit: exitAtoms
+    };
+};
+const Collapse = (0, _reactmotion.createPresenceComponent)(collapsePresenceFn);
+const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    duration: _reactmotion.motionTokens.durationFast
+});
+const CollapseRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    duration: _reactmotion.motionTokens.durationSlower
+});
+const CollapseDelayed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    // Enter timing per motion design spec
+    sizeDuration: _reactmotion.motionTokens.durationNormal,
+    opacityDuration: _reactmotion.motionTokens.durationSlower,
+    staggerDelay: _reactmotion.motionTokens.durationNormal,
+    // Exit timing per motion design spec
+    exitSizeDuration: _reactmotion.motionTokens.durationNormal,
+    exitOpacityDuration: _reactmotion.motionTokens.durationSlower,
+    exitStaggerDelay: _reactmotion.motionTokens.durationSlower,
+    // Easing per motion design spec
+    easing: _reactmotion.motionTokens.curveEasyEase,
+    exitEasing: _reactmotion.motionTokens.curveEasyEase
+});