Initial commit

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

@@ -0,0 +1,115 @@
+"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;
+    },
+    createCollapseDelayedPresence: function() {
+        return createCollapseDelayedPresence;
+    },
+    createCollapsePresence: function() {
+        return createCollapsePresence;
+    }
+});
+const _reactmotion = require("@fluentui/react-motion");
+const _collapseatoms = require("./collapse-atoms");
+const _fadeatom = require("../../atoms/fade-atom");
+const createCollapseDelayedPresence = ({ // enter
+enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry
+exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
+        // ----- ENTER -----
+        // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
+        const enterAtoms = [
+            (0, _collapseatoms.sizeEnterAtom)({
+                orientation,
+                duration: enterSizeDuration,
+                easing: enterEasing,
+                element
+            }),
+            (0, _collapseatoms.whitespaceAtom)({
+                direction: 'enter',
+                orientation,
+                duration: enterSizeDuration,
+                easing: enterEasing
+            })
+        ];
+        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            enterAtoms.push({
+                ...(0, _fadeatom.fadeAtom)({
+                    direction: 'enter',
+                    duration: enterOpacityDuration,
+                    easing: enterEasing
+                }),
+                delay: enterDelay,
+                fill: 'both'
+            });
+        }
+        // ----- EXIT -----
+        // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
+        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
+            }));
+        }
+        exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
+            orientation,
+            duration: exitSizeDuration,
+            easing: exitEasing,
+            element,
+            delay: exitDelay
+        }), (0, _collapseatoms.whitespaceAtom)({
+            direction: 'exit',
+            orientation,
+            duration: exitSizeDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+        return {
+            enter: enterAtoms,
+            exit: exitAtoms
+        };
+    };
+const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// Implement a regular collapse as a special case of the delayed collapse,
+    // where the delays are zero, and the size and opacity durations are equal.
+    createCollapseDelayedPresence({
+        enterSizeDuration: enterDuration,
+        enterEasing,
+        exitSizeDuration: exitDuration,
+        exitEasing
+    });
+const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
+const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
+    enterDuration: _reactmotion.motionTokens.durationFast
+}));
+const CollapseRelaxed = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
+    enterDuration: _reactmotion.motionTokens.durationSlower
+}));
+const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
+    enterSizeDuration: _reactmotion.motionTokens.durationNormal,
+    enterOpacityDuration: _reactmotion.motionTokens.durationSlower,
+    enterDelay: _reactmotion.motionTokens.durationNormal,
+    exitDelay: _reactmotion.motionTokens.durationSlower,
+    enterEasing: _reactmotion.motionTokens.curveEasyEase
+}));

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

@@ -0,0 +1,118 @@
+"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, {
+    sizeEnterAtom: function() {
+        return sizeEnterAtom;
+    },
+    sizeExitAtom: function() {
+        return sizeExitAtom;
+    },
+    whitespaceAtom: function() {
+        return whitespaceAtom;
+    }
+});
+// ----- SIZE -----
+const sizeValuesForOrientation = (orientation, element)=>{
+    const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
+    const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
+    const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+    const toSize = `${measuredSize}px`;
+    return {
+        sizeName,
+        overflowName,
+        toSize
+    };
+};
+const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0' })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: fromSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: toSize,
+                offset: 0.9999,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: 'unset',
+                [overflowName]: 'unset'
+            }
+        ],
+        duration,
+        easing
+    };
+};
+const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: toSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: fromSize,
+                [overflowName]: 'hidden'
+            }
+        ],
+        duration,
+        easing,
+        fill: 'both',
+        delay
+    };
+};
+// ----- WHITESPACE -----
+// Whitespace animation includes padding and margin.
+const whitespaceValuesForOrientation = (orientation)=>{
+    // horizontal whitespace collapse
+    if (orientation === 'horizontal') {
+        return {
+            paddingStart: 'paddingInlineStart',
+            paddingEnd: 'paddingInlineEnd',
+            marginStart: 'marginInlineStart',
+            marginEnd: 'marginInlineEnd'
+        };
+    }
+    // vertical whitespace collapse
+    return {
+        paddingStart: 'paddingBlockStart',
+        paddingEnd: 'paddingBlockEnd',
+        marginStart: 'marginBlockStart',
+        marginEnd: 'marginBlockEnd'
+    };
+};
+const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })=>{
+    const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
+    // The keyframe with zero whitespace is at the start for enter and at the end for exit.
+    const offset = direction === 'enter' ? 0 : 1;
+    const keyframes = [
+        {
+            [paddingStart]: '0',
+            [paddingEnd]: '0',
+            [marginStart]: '0',
+            [marginEnd]: '0',
+            offset
+        }
+    ];
+    const atom = {
+        keyframes,
+        duration,
+        easing,
+        delay
+    };
+    if (direction === 'exit') {
+        atom.fill = 'forwards';
+    }
+    return atom;
+};

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

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"rangeMappings":"","mappings":""}

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

@@ -0,0 +1,31 @@
+"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.Collapse;
+    },
+    CollapseDelayed: function() {
+        return _Collapse.CollapseDelayed;
+    },
+    CollapseRelaxed: function() {
+        return _Collapse.CollapseRelaxed;
+    },
+    CollapseSnappy: function() {
+        return _Collapse.CollapseSnappy;
+    },
+    createCollapseDelayedPresence: function() {
+        return _Collapse.createCollapseDelayedPresence;
+    },
+    createCollapsePresence: function() {
+        return _Collapse.createCollapsePresence;
+    }
+});
+const _Collapse = require("./Collapse");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseDelayed,\n  CollapseRelaxed,\n  CollapseSnappy,\n  createCollapseDelayedPresence,\n  createCollapsePresence,\n} from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IACRC,eAAe;eAAfA,yBAAe;;IACfC,eAAe;eAAfA,yBAAe;;IACfC,cAAc;eAAdA,wBAAc;;IACdC,6BAA6B;eAA7BA,uCAA6B;;IAC7BC,sBAAsB;eAAtBA,gCAAsB;;;0BACjB"}