Initial commit

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

@@ -0,0 +1,85 @@
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+import { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';
+import { fadeAtom } from '../../atoms/fade-atom';
+/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */ export const createCollapseDelayedPresence = ({ // enter
+enterSizeDuration = motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = 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 = [
+            sizeEnterAtom({
+                orientation,
+                duration: enterSizeDuration,
+                easing: enterEasing,
+                element
+            }),
+            whitespaceAtom({
+                direction: 'enter',
+                orientation,
+                duration: enterSizeDuration,
+                easing: enterEasing
+            })
+        ];
+        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            enterAtoms.push({
+                ...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(fadeAtom({
+                direction: 'exit',
+                duration: exitOpacityDuration,
+                easing: exitEasing
+            }));
+        }
+        exitAtoms.push(sizeExitAtom({
+            orientation,
+            duration: exitSizeDuration,
+            easing: exitEasing,
+            element,
+            delay: exitDelay
+        }), whitespaceAtom({
+            direction: 'exit',
+            orientation,
+            duration: exitSizeDuration,
+            easing: exitEasing,
+            delay: exitDelay
+        }));
+        return {
+            enter: enterAtoms,
+            exit: exitAtoms
+        };
+    };
+/** Defines a presence motion for collapse/expand. */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = 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
+    });
+/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence());
+export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
+    enterDuration: motionTokens.durationFast
+}));
+export const CollapseRelaxed = createPresenceComponent(createCollapsePresence({
+    enterDuration: motionTokens.durationSlower
+}));
+export const CollapseDelayed = createPresenceComponent(createCollapseDelayedPresence({
+    enterSizeDuration: motionTokens.durationNormal,
+    enterOpacityDuration: motionTokens.durationSlower,
+    enterDelay: motionTokens.durationNormal,
+    exitDelay: motionTokens.durationSlower,
+    enterEasing: motionTokens.curveEasyEase
+}));

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

@@ -0,0 +1,101 @@
+// ----- 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
+    };
+};
+export 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
+    };
+};
+export 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'
+    };
+};
+/**
+ * A collapse animates an element's height to zero,
+ but the zero height does not eliminate padding or margin in the box model.
+ So here we generate keyframes to animate those whitespace properties to zero.
+ */ export 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/components/Collapse/collapse-types.js

@@ -0,0 +1 @@
+export { };

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["export type CollapseOrientation = 'horizontal' | 'vertical';\n\n// TODO: reduce duplication between CollapseDelayedVariantParams and CollapseVariantParams\nexport type CollapseDelayedVariantParams = {\n  /** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */\n  enterSizeDuration?: number;\n\n  /** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */\n  enterOpacityDuration?: number;\n\n  /** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */\n  exitSizeDuration?: number;\n\n  /** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */\n  exitOpacityDuration?: number;\n\n  /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`.  */\n  enterDelay?: number;\n\n  /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`.  */\n  exitDelay?: number;\n\n  /** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value.  */\n  enterEasing?: string;\n\n  /** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */\n  exitEasing?: string;\n};\n\nexport type CollapseRuntimeParams = {\n  /** Whether to animate the opacity. Defaults to `true`. */\n  animateOpacity?: boolean;\n\n  /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n  orientation?: CollapseOrientation;\n};\n\nexport type CollapseVariantParams = {\n  /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */\n  enterDuration?: number;\n\n  /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n"],"names":[],"rangeMappings":"","mappings":"AAqCA,WAYE"}

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

@@ -0,0 +1 @@
+export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy, createCollapseDelayedPresence, createCollapsePresence } from './Collapse';

node_modules/@fluentui/react-motion-components-preview/lib/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":"AAAA,SACEA,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,6BAA6B,EAC7BC,sBAAsB,QACjB,aAAa"}