@fluentui/react-motion-components-preview 0.2.0 → 0.3.1

package/CHANGELOG.md

@@ -1,12 +1,28 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Tue, 15 Oct 2024 17:13:29 GMT and should not be manually modified.
+This log was last generated on Mon, 11 Nov 2024 10:00:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.3.0)
+
+Mon, 11 Nov 2024 10:00:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.3.0)
+
+### Minor changes
+
+- feat: add CollapseDelayed motion component variant ([PR #33069](https://github.com/microsoft/fluentui/pull/33069) by robertpenner@microsoft.com)
+- Rename motion component variants ...Exaggerated to ...Relaxed ([PR #33182](https://github.com/microsoft/fluentui/pull/33182) by olkatruk@microsoft.com)
+
+### Patches
+
+- refactor: migrate Fade motion component to new variant structure ([PR #33080](https://github.com/microsoft/fluentui/pull/33080) by robertpenner@microsoft.com)
+- fix: handle content padding in Collapse ([PR #33063](https://github.com/microsoft/fluentui/pull/33063) by robertpenner@microsoft.com)
+- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
+
 ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
 
-Tue, 15 Oct 2024 17:13:29 GMT 
+Tue, 15 Oct 2024 17:17:49 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.2.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -1,15 +1,37 @@
 import type { MotionParam } from '@fluentui/react-motion';
 import { PresenceComponent } from '@fluentui/react-motion';
+import type { PresenceMotion } from '@fluentui/react-motion';
 import type { PresenceMotionFn } from '@fluentui/react-motion';
 
 /** A React component that applies collapse/expand transitions to its children. */
 export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
 
-export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
+export declare const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>;
+
+declare type CollapseDelayedVariantParams = {
+    /** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */
+    enterSizeDuration?: number;
+    /** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */
+    enterOpacityDuration?: number;
+    /** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */
+    exitSizeDuration?: number;
+    /** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */
+    exitOpacityDuration?: number;
+    /** Time (ms) between the size expand start and the fade-in start. Defaults to `0`.  */
+    enterDelay?: number;
+    /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`.  */
+    exitDelay?: number;
+    /** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value.  */
+    enterEasing?: string;
+    /** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */
+    exitEasing?: string;
+};
 
 declare type CollapseOrientation = 'horizontal' | 'vertical';
 
-declare type CollapseRuntimeParams = {
+export declare const CollapseRelaxed: PresenceComponent<CollapseRuntimeParams>;
+
+export declare type CollapseRuntimeParams = {
     /** Whether to animate the opacity. Defaults to `true`. */
     animateOpacity?: boolean;
     /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
@@ -29,16 +51,42 @@ declare type CollapseVariantParams = {
     exitEasing?: string;
 };
 
-/** Define a presence motion for collapse/expand */
+/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */
+export declare const createCollapseDelayedPresence: PresenceMotionFnCreator<CollapseDelayedVariantParams, CollapseRuntimeParams>;
+
+/** Defines a presence motion for collapse/expand. */
 export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
 
+/** Define a presence motion for fade in/out  */
+export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
+
 /** A React component that applies fade in/out transitions to its children. */
 export declare const Fade: PresenceComponent<    {}>;
 
-export declare const FadeExaggerated: PresenceComponent<    {}>;
+export declare const FadeRelaxed: PresenceComponent<    {}>;
 
 export declare const FadeSnappy: PresenceComponent<    {}>;
 
+declare type FadeVariantParams = {
+    /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
+    enterDuration?: number;
+    /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */
+    enterEasing?: string;
+    /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */
+    exitDuration?: number;
+    /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */
+    exitEasing?: string;
+};
+
+/**
+ * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.
+ * The generated object defines a presence motion with `enter` and `exit` transitions.
+ * This motion object is declarative, i.e. data without side effects,
+ * and it is framework-independent, i.e. non-React.
+ * It can be turned into a React component using `createPresenceComponent`.
+ */
+declare type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotion;
+
 /**
  * This is a factory function that generates a motion function, which has variant params bound into it.
  * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.
@@ -56,7 +104,7 @@ export declare const Scale: PresenceComponent<    {
 animateOpacity?: boolean | undefined;
 }>;
 
-export declare const ScaleExaggerated: PresenceComponent<    {
+export declare const ScaleRelaxed: PresenceComponent<    {
 animateOpacity?: boolean | undefined;
 }>;
 

package/lib/components/Collapse/Collapse.js

@@ -1,94 +1,78 @@
 import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
-/** Define a presence motion for collapse/expand */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
-        const fromOpacity = 0;
-        const toOpacity = 1;
-        const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height
-        const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
-        const toSize = `${measuredSize}px`;
-        // use generic names for size and overflow, handling vertical or horizontal orientation
-        const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
-        const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
-        // The enter transition is an array of up to 2 motion atoms: size and opacity.
+import { sizeEnterAtom, whitespaceEnterAtom, opacityEnterAtom, opacityExitAtom, sizeExitAtom, whitespaceExitAtom } from './collapse-atoms';
+/** 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 = [
-            // Expand size (height or width)
-            {
-                keyframes: [
-                    {
-                        [sizeName]: fromSize,
-                        [overflowName]: 'hidden'
-                    },
-                    {
-                        [sizeName]: toSize,
-                        offset: 0.9999,
-                        [overflowName]: 'hidden'
-                    },
-                    {
-                        [sizeName]: 'unset',
-                        [overflowName]: 'unset'
-                    }
-                ],
-                duration: enterDuration,
+            sizeEnterAtom({
+                orientation,
+                duration: enterSizeDuration,
+                easing: enterEasing,
+                element
+            }),
+            whitespaceEnterAtom({
+                orientation,
+                duration: enterSizeDuration,
                 easing: enterEasing
-            }
+            })
         ];
         // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
         if (animateOpacity) {
-            enterAtoms.push({
-                keyframes: [
-                    {
-                        opacity: fromOpacity
-                    },
-                    {
-                        opacity: toOpacity
-                    }
-                ],
-                duration: enterDuration,
+            enterAtoms.push(opacityEnterAtom({
+                duration: enterOpacityDuration,
                 easing: enterEasing,
-                fill: 'both'
-            });
+                delay: enterDelay
+            }));
         }
-        // The exit transition is an array of up to 2 motion atoms: opacity and size.
+        // ----- 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 false. Otherwise, leave opacity unaffected.
+        // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
         if (animateOpacity) {
-            exitAtoms.push({
-                keyframes: [
-                    {
-                        opacity: toOpacity
-                    },
-                    {
-                        opacity: fromOpacity
-                    }
-                ],
-                duration: exitDuration,
+            exitAtoms.push(opacityExitAtom({
+                duration: exitOpacityDuration,
                 easing: exitEasing
-            });
+            }));
         }
-        exitAtoms.push(// Collapse size (height or width)
-        {
-            keyframes: [
-                {
-                    [sizeName]: toSize,
-                    [overflowName]: 'hidden'
-                },
-                {
-                    [sizeName]: fromSize,
-                    [overflowName]: 'hidden'
-                }
-            ],
-            duration: exitDuration,
+        exitAtoms.push(sizeExitAtom({
+            orientation,
+            duration: exitSizeDuration,
+            easing: exitEasing,
+            element,
+            delay: exitDelay
+        }));
+        exitAtoms.push(whitespaceExitAtom({
+            orientation,
+            duration: exitSizeDuration,
             easing: exitEasing,
-            fill: 'both'
-        });
+            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 CollapseExaggerated = createPresenceComponent(createCollapsePresence({
+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
+}));

package/lib/components/Collapse/Collapse.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\n\ntype CollapseOrientation = 'horizontal' | 'vertical';\n\ntype 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\ntype 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\n/** Define a presence motion for collapse/expand */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> =\n  ({\n    enterDuration = motionTokens.durationNormal,\n    enterEasing = motionTokens.curveEasyEaseMax,\n    exitDuration = enterDuration,\n    exitEasing = enterEasing,\n  } = {}) =>\n  ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n    const fromOpacity = 0;\n    const toOpacity = 1;\n    const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height\n    const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n    const toSize = `${measuredSize}px`;\n    // use generic names for size and overflow, handling vertical or horizontal orientation\n    const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n    const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n\n    // The enter transition is an array of up to 2 motion atoms: size and opacity.\n    const enterAtoms: AtomMotion[] = [\n      // Expand size (height or width)\n      {\n        keyframes: [\n          {\n            [sizeName]: fromSize,\n            [overflowName]: 'hidden',\n          },\n          { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n          { [sizeName]: 'unset', [overflowName]: 'unset' },\n        ],\n        duration: enterDuration,\n        easing: enterEasing,\n      },\n    ];\n    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      enterAtoms.push({\n        keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n        duration: enterDuration,\n        easing: enterEasing,\n        fill: 'both',\n      });\n    }\n\n    // The exit transition is an array of up to 2 motion atoms: opacity and size.\n    const exitAtoms: AtomMotion[] = [];\n    // Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      exitAtoms.push({\n        keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n        duration: exitDuration,\n        easing: exitEasing,\n      });\n    }\n    exitAtoms.push(\n      // Collapse size (height or width)\n      {\n        keyframes: [\n          { [sizeName]: toSize, [overflowName]: 'hidden' },\n          { [sizeName]: fromSize, [overflowName]: 'hidden' },\n        ],\n        duration: exitDuration,\n        easing: exitEasing,\n        fill: 'both',\n      },\n    );\n\n    return {\n      enter: enterAtoms,\n      exit: exitAtoms,\n    };\n  };\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const CollapseExaggerated = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationSlower }),\n);\n"],"names":["motionTokens","createPresenceComponent","createCollapsePresence","enterDuration","durationNormal","enterEasing","curveEasyEaseMax","exitDuration","exitEasing","element","animateOpacity","orientation","fromOpacity","toOpacity","fromSize","measuredSize","scrollWidth","scrollHeight","toSize","sizeName","overflowName","enterAtoms","keyframes","offset","duration","easing","push","opacity","fill","exitAtoms","enter","exit","Collapse","CollapseSnappy","durationFast","CollapseExaggerated","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AA2B3F,iDAAiD,GACjD,OAAO,MAAMC,yBACX,CAAC,EACCC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,gBAAgB,EAC3CC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GACN,CAAC,EAAEI,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,MAAMC,cAAc;QACpB,MAAMC,YAAY;QAClB,MAAMC,WAAW,KAAK,yFAAyF;QAC/G,MAAMC,eAAeJ,gBAAgB,eAAeF,QAAQO,WAAW,GAAGP,QAAQQ,YAAY;QAC9F,MAAMC,SAAS,CAAC,EAAEH,aAAa,EAAE,CAAC;QAClC,uFAAuF;QACvF,MAAMI,WAAWR,gBAAgB,eAAe,aAAa;QAC7D,MAAMS,eAAeT,gBAAgB,eAAe,cAAc;QAElE,8EAA8E;QAC9E,MAAMU,aAA2B;YAC/B,gCAAgC;YAChC;gBACEC,WAAW;oBACT;wBACE,CAACH,SAAS,EAAEL;wBACZ,CAACM,aAAa,EAAE;oBAClB;oBACA;wBAAE,CAACD,SAAS,EAAED;wBAAQK,QAAQ;wBAAQ,CAACH,aAAa,EAAE;oBAAS;oBAC/D;wBAAE,CAACD,SAAS,EAAE;wBAAS,CAACC,aAAa,EAAE;oBAAQ;iBAChD;gBACDI,UAAUrB;gBACVsB,QAAQpB;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIK,gBAAgB;YAClBW,WAAWK,IAAI,CAAC;gBACdJ,WAAW;oBAAC;wBAAEK,SAASf;oBAAY;oBAAG;wBAAEe,SAASd;oBAAU;iBAAE;gBAC7DW,UAAUrB;gBACVsB,QAAQpB;gBACRuB,MAAM;YACR;QACF;QAEA,6EAA6E;QAC7E,MAAMC,YAA0B,EAAE;QAClC,iFAAiF;QACjF,IAAInB,gBAAgB;YAClBmB,UAAUH,IAAI,CAAC;gBACbJ,WAAW;oBAAC;wBAAEK,SAASd;oBAAU;oBAAG;wBAAEc,SAASf;oBAAY;iBAAE;gBAC7DY,UAAUjB;gBACVkB,QAAQjB;YACV;QACF;QACAqB,UAAUH,IAAI,CACZ,kCAAkC;QAClC;YACEJ,WAAW;gBACT;oBAAE,CAACH,SAAS,EAAED;oBAAQ,CAACE,aAAa,EAAE;gBAAS;gBAC/C;oBAAE,CAACD,SAAS,EAAEL;oBAAU,CAACM,aAAa,EAAE;gBAAS;aAClD;YACDI,UAAUjB;YACVkB,QAAQjB;YACRoB,MAAM;QACR;QAGF,OAAO;YACLE,OAAOT;YACPU,MAAMF;QACR;IACF,EAAE;AAEJ,gFAAgF,GAChF,OAAO,MAAMG,WAAW/B,wBAAwBC,0BAA0B;AAE1E,OAAO,MAAM+B,iBAAiBhC,wBAC5BC,uBAAuB;IAAEC,eAAeH,aAAakC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,sBAAsBlC,wBACjCC,uBAAuB;IAAEC,eAAeH,aAAaoC,cAAc;AAAC,IACpE"}
+{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, AtomMotion } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\nimport type { CollapseDelayedVariantParams, CollapseRuntimeParams, CollapseVariantParams } from './collapse-types';\nimport {\n  sizeEnterAtom,\n  whitespaceEnterAtom,\n  opacityEnterAtom,\n  opacityExitAtom,\n  sizeExitAtom,\n  whitespaceExitAtom,\n} from './collapse-atoms';\n\n/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */\nexport const createCollapseDelayedPresence: PresenceMotionFnCreator<\n  CollapseDelayedVariantParams,\n  CollapseRuntimeParams\n> =\n  ({\n    // enter\n    enterSizeDuration = motionTokens.durationNormal,\n    enterOpacityDuration = enterSizeDuration, // in sync with size duration by default\n    enterEasing = motionTokens.curveEasyEaseMax,\n    enterDelay = 0,\n\n    // exit: durations and easing default to enter values for symmetry\n    exitSizeDuration = enterSizeDuration,\n    exitOpacityDuration = enterOpacityDuration,\n    exitEasing = enterEasing,\n    exitDelay = 0,\n  } = {}) =>\n  ({ element, animateOpacity = true, orientation = 'vertical' }) => {\n    // ----- ENTER -----\n    // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n    const enterAtoms: AtomMotion[] = [\n      sizeEnterAtom({\n        orientation,\n        duration: enterSizeDuration,\n        easing: enterEasing,\n        element,\n      }),\n      whitespaceEnterAtom({\n        orientation,\n        duration: enterSizeDuration,\n        easing: enterEasing,\n      }),\n    ];\n    // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      enterAtoms.push(\n        opacityEnterAtom({\n          duration: enterOpacityDuration,\n          easing: enterEasing,\n          delay: enterDelay,\n        }),\n      );\n    }\n\n    // ----- EXIT -----\n    // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n    const exitAtoms: AtomMotion[] = [];\n    // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n    if (animateOpacity) {\n      exitAtoms.push(\n        opacityExitAtom({\n          duration: exitOpacityDuration,\n          easing: exitEasing,\n        }),\n      );\n    }\n    exitAtoms.push(\n      sizeExitAtom({\n        orientation,\n        duration: exitSizeDuration,\n        easing: exitEasing,\n        element,\n        delay: exitDelay,\n      }),\n    );\n    exitAtoms.push(\n      whitespaceExitAtom({\n        orientation,\n        duration: exitSizeDuration,\n        easing: exitEasing,\n        delay: exitDelay,\n      }),\n    );\n\n    return {\n      enter: enterAtoms,\n      exit: exitAtoms,\n    };\n  };\n\n/** Defines a presence motion for collapse/expand. */\nexport const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEaseMax,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) =>\n  // Implement a regular collapse as a special case of the delayed collapse,\n  // where the delays are zero, and the size and opacity durations are equal.\n  createCollapseDelayedPresence({\n    enterSizeDuration: enterDuration,\n    enterEasing,\n    exitSizeDuration: exitDuration,\n    exitEasing,\n  });\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(createCollapsePresence());\n\nexport const CollapseSnappy = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationFast }),\n);\n\nexport const CollapseRelaxed = createPresenceComponent(\n  createCollapsePresence({ enterDuration: motionTokens.durationSlower }),\n);\n\nexport const CollapseDelayed = createPresenceComponent(\n  createCollapseDelayedPresence({\n    enterSizeDuration: motionTokens.durationNormal,\n    enterOpacityDuration: motionTokens.durationSlower,\n    enterDelay: motionTokens.durationNormal,\n    exitDelay: motionTokens.durationSlower,\n    enterEasing: motionTokens.curveEasyEase,\n  }),\n);\n"],"names":["motionTokens","createPresenceComponent","sizeEnterAtom","whitespaceEnterAtom","opacityEnterAtom","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","createCollapseDelayedPresence","enterSizeDuration","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","duration","easing","push","delay","exitAtoms","enter","exit","createCollapsePresence","enterDuration","exitDuration","Collapse","CollapseSnappy","durationFast","CollapseRelaxed","durationSlower","CollapseDelayed","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAoB,yBAAyB;AAG3F,SACEC,aAAa,EACbC,mBAAmB,EACnBC,gBAAgB,EAChBC,eAAe,EACfC,YAAY,EACZC,kBAAkB,QACb,mBAAmB;AAE1B,iHAAiH,GACjH,OAAO,MAAMC,gCAIX,CAAC,EACC,QAAQ;AACRC,oBAAoBT,aAAaU,cAAc,EAC/CC,uBAAuBF,iBAAiB,EACxCG,cAAcZ,aAAaa,gBAAgB,EAC3CC,aAAa,CAAC,EAEd,kEAAkE;AAClEC,mBAAmBN,iBAAiB,EACpCO,sBAAsBL,oBAAoB,EAC1CM,aAAaL,WAAW,EACxBM,YAAY,CAAC,EACd,GAAG,CAAC,CAAC,GACN,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,oBAAoB;QACpB,0FAA0F;QAC1F,MAAMC,aAA2B;YAC/BpB,cAAc;gBACZmB;gBACAE,UAAUd;gBACVe,QAAQZ;gBACRO;YACF;YACAhB,oBAAoB;gBAClBkB;gBACAE,UAAUd;gBACVe,QAAQZ;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWG,IAAI,CACbrB,iBAAiB;gBACfmB,UAAUZ;gBACVa,QAAQZ;gBACRc,OAAOZ;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMa,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIP,gBAAgB;YAClBO,UAAUF,IAAI,CACZpB,gBAAgB;gBACdkB,UAAUP;gBACVQ,QAAQP;YACV;QAEJ;QACAU,UAAUF,IAAI,CACZnB,aAAa;YACXe;YACAE,UAAUR;YACVS,QAAQP;YACRE;YACAO,OAAOR;QACT;QAEFS,UAAUF,IAAI,CACZlB,mBAAmB;YACjBc;YACAE,UAAUR;YACVS,QAAQP;YACRS,OAAOR;QACT;QAGF,OAAO;YACLU,OAAON;YACPO,MAAMF;QACR;IACF,EAAE;AAEJ,mDAAmD,GACnD,OAAO,MAAMG,yBAAgG,CAAC,EAC5GC,gBAAgB/B,aAAaU,cAAc,EAC3CE,cAAcZ,aAAaa,gBAAgB,EAC3CmB,eAAeD,aAAa,EAC5Bd,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GACJ,0EAA0E;IAC1E,2EAA2E;IAC3EJ,8BAA8B;QAC5BC,mBAAmBsB;QACnBnB;QACAG,kBAAkBiB;QAClBf;IACF,GAAG;AAEL,gFAAgF,GAChF,OAAO,MAAMgB,WAAWhC,wBAAwB6B,0BAA0B;AAE1E,OAAO,MAAMI,iBAAiBjC,wBAC5B6B,uBAAuB;IAAEC,eAAe/B,aAAamC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,kBAAkBnC,wBAC7B6B,uBAAuB;IAAEC,eAAe/B,aAAaqC,cAAc;AAAC,IACpE;AAEF,OAAO,MAAMC,kBAAkBrC,wBAC7BO,8BAA8B;IAC5BC,mBAAmBT,aAAaU,cAAc;IAC9CC,sBAAsBX,aAAaqC,cAAc;IACjDvB,YAAYd,aAAaU,cAAc;IACvCQ,WAAWlB,aAAaqC,cAAc;IACtCzB,aAAaZ,aAAauC,aAAa;AACzC,IACA"}

package/lib/components/Collapse/collapse-atoms.js

@@ -0,0 +1,123 @@
+// ----- 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 currently includes padding, but could be extended to handle margin.
+const whitespaceValuesForOrientation = (orientation)=>{
+    const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';
+    const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';
+    return {
+        paddingStart,
+        paddingEnd
+    };
+};
+// Because a height of zero does not eliminate padding,
+// we will create keyframes to animate it to zero.
+// TODO: consider collapsing margin, perhaps as an option.
+export const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
+    const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
+    return {
+        keyframes: [
+            {
+                [paddingStart]: '0',
+                [paddingEnd]: '0',
+                offset: 0
+            }
+        ],
+        duration,
+        easing
+    };
+};
+export const whitespaceExitAtom = ({ orientation, duration, easing, delay = 0 })=>{
+    const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
+    return {
+        keyframes: [
+            {
+                [paddingStart]: '0',
+                [paddingEnd]: '0',
+                offset: 1
+            }
+        ],
+        duration,
+        easing,
+        fill: 'forwards',
+        delay
+    };
+};
+// ----- OPACITY -----
+export const opacityEnterAtom = ({ duration, easing, delay = 0, fromOpacity = 0, toOpacity = 1 })=>({
+        keyframes: [
+            {
+                opacity: fromOpacity
+            },
+            {
+                opacity: toOpacity
+            }
+        ],
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    });
+export const opacityExitAtom = ({ duration, easing, fromOpacity = 0, toOpacity = 1 })=>({
+        keyframes: [
+            {
+                opacity: toOpacity
+            },
+            {
+                opacity: fromOpacity
+            }
+        ],
+        duration,
+        easing
+    });

package/lib/components/Collapse/collapse-atoms.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion } from '@fluentui/react-motion/src/types';\nimport type { CollapseOrientation } from './collapse-types';\n\n// ----- SIZE -----\n\nconst sizeValuesForOrientation = (orientation: CollapseOrientation, element: Element) => {\n  const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';\n  const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';\n  const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;\n  const toSize = `${measuredSize}px`;\n  return { sizeName, overflowName, toSize };\n};\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  fromSize?: string;\n}): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n      { [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n      { [sizeName]: 'unset', [overflowName]: 'unset' },\n    ],\n    duration,\n    easing,\n  };\n};\n\nexport const sizeExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  delay = 0,\n  fromSize = '0',\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  delay?: number;\n  fromSize?: string;\n}): AtomMotion => {\n  const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);\n\n  return {\n    keyframes: [\n      { [sizeName]: toSize, [overflowName]: 'hidden' },\n      { [sizeName]: fromSize, [overflowName]: 'hidden' },\n    ],\n    duration,\n    easing,\n    fill: 'both',\n    delay,\n  };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation currently includes padding, but could be extended to handle margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n  const paddingStart = orientation === 'horizontal' ? 'paddingLeft' : 'paddingTop';\n  const paddingEnd = orientation === 'horizontal' ? 'paddingRight' : 'paddingBottom';\n  return { paddingStart, paddingEnd };\n};\n\n// Because a height of zero does not eliminate padding,\n// we will create keyframes to animate it to zero.\n// TODO: consider collapsing margin, perhaps as an option.\nexport const whitespaceEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n}): AtomMotion => {\n  const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n  return {\n    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 0 }],\n    duration,\n    easing,\n  };\n};\n\nexport const whitespaceExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  delay = 0,\n}: {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  delay?: number;\n}): AtomMotion => {\n  const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);\n  return {\n    keyframes: [{ [paddingStart]: '0', [paddingEnd]: '0', offset: 1 }],\n    duration,\n    easing,\n    fill: 'forwards',\n    delay,\n  };\n};\n\n// ----- OPACITY -----\n\nexport const opacityEnterAtom = ({\n  duration,\n  easing,\n  delay = 0,\n  fromOpacity = 0,\n  toOpacity = 1,\n}: {\n  duration: number;\n  easing: string;\n  delay?: number;\n  fromOpacity?: number;\n  toOpacity?: number;\n}): AtomMotion => ({\n  keyframes: [{ opacity: fromOpacity }, { opacity: toOpacity }],\n  duration,\n  easing,\n  delay,\n  fill: 'both',\n});\n\nexport const opacityExitAtom = ({\n  duration,\n  easing,\n  fromOpacity = 0,\n  toOpacity = 1,\n}: {\n  duration: number;\n  easing: string;\n  fromOpacity?: number;\n  toOpacity?: number;\n}): AtomMotion => ({\n  keyframes: [{ opacity: toOpacity }, { opacity: fromOpacity }],\n  duration,\n  easing,\n});\n"],"names":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","keyframes","offset","sizeExitAtom","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","whitespaceEnterAtom","whitespaceExitAtom","opacityEnterAtom","fromOpacity","toOpacity","opacity","opacityExitAtom"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAGA,mBAAmB;AAEnB,MAAMA,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,CAAC,EAAEH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAEA,OAAO,MAAMC,gBAAgB,CAAC,EAC5BR,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPU,WAAW,GAAG,EAOf;IACC,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQM,QAAQ;gBAAQ,CAACV,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDM;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMI,eAAe,CAAC,EAC3Bd,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPc,QAAQ,CAAC,EACTJ,WAAW,GAAG,EAQf;IACC,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;SAClD;QACDM;QACAC;QACAM,MAAM;QACND;IACF;AACF,EAAE;AAEF,yBAAyB;AAEzB,2FAA2F;AAC3F,MAAME,iCAAiC,CAACjB;IACtC,MAAMkB,eAAelB,gBAAgB,eAAe,gBAAgB;IACpE,MAAMmB,aAAanB,gBAAgB,eAAe,iBAAiB;IACnE,OAAO;QAAEkB;QAAcC;IAAW;AACpC;AAEA,uDAAuD;AACvD,kDAAkD;AAClD,0DAA0D;AAC1D,OAAO,MAAMC,sBAAsB,CAAC,EAClCpB,WAAW,EACXS,QAAQ,EACRC,MAAM,EAKP;IACC,MAAM,EAAEQ,YAAY,EAAEC,UAAU,EAAE,GAAGF,+BAA+BjB;IACpE,OAAO;QACLY,WAAW;YAAC;gBAAE,CAACM,aAAa,EAAE;gBAAK,CAACC,WAAW,EAAE;gBAAKN,QAAQ;YAAE;SAAE;QAClEJ;QACAC;IACF;AACF,EAAE;AAEF,OAAO,MAAMW,qBAAqB,CAAC,EACjCrB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNK,QAAQ,CAAC,EAMV;IACC,MAAM,EAAEG,YAAY,EAAEC,UAAU,EAAE,GAAGF,+BAA+BjB;IACpE,OAAO;QACLY,WAAW;YAAC;gBAAE,CAACM,aAAa,EAAE;gBAAK,CAACC,WAAW,EAAE;gBAAKN,QAAQ;YAAE;SAAE;QAClEJ;QACAC;QACAM,MAAM;QACND;IACF;AACF,EAAE;AAEF,sBAAsB;AAEtB,OAAO,MAAMO,mBAAmB,CAAC,EAC/Bb,QAAQ,EACRC,MAAM,EACNK,QAAQ,CAAC,EACTQ,cAAc,CAAC,EACfC,YAAY,CAAC,EAOd,GAAkB,CAAA;QACjBZ,WAAW;YAAC;gBAAEa,SAASF;YAAY;YAAG;gBAAEE,SAASD;YAAU;SAAE;QAC7Df;QACAC;QACAK;QACAC,MAAM;IACR,CAAA,EAAG;AAEH,OAAO,MAAMU,kBAAkB,CAAC,EAC9BjB,QAAQ,EACRC,MAAM,EACNa,cAAc,CAAC,EACfC,YAAY,CAAC,EAMd,GAAkB,CAAA;QACjBZ,WAAW;YAAC;gBAAEa,SAASD;YAAU;YAAG;gBAAEC,SAASF;YAAY;SAAE;QAC7Dd;QACAC;IACF,CAAA,EAAG"}

package/lib/components/Collapse/collapse-types.js

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

package/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"}

package/lib/components/Collapse/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Collapse';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,aAAa"}
+{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export * from './Collapse';\nexport type { CollapseRuntimeParams } from './collapse-types';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,aAAa"}

package/lib/components/Fade/Fade.js

@@ -1,40 +1,34 @@
-import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
-const duration = motionTokens.durationNormal;
-const easing = motionTokens.curveEasyEase;
-/** Define a presence motion for fade in/out  */ const fadeMotion = {
-    enter: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 0
-            },
-            {
-                opacity: 1
-            }
-        ]
-    },
-    exit: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ]
-    }
-};
-/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(fadeMotion);
-export const FadeSnappy = createPresenceComponentVariant(Fade, {
-    all: {
-        duration: motionTokens.durationFast
-    }
-});
-export const FadeExaggerated = createPresenceComponentVariant(Fade, {
-    all: {
-        duration: motionTokens.durationGentle
-    }
-});
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+/** Define a presence motion for fade in/out  */ export const createFadePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
+        enter: {
+            duration: enterDuration,
+            easing: enterEasing,
+            keyframes: [
+                {
+                    opacity: 0
+                },
+                {
+                    opacity: 1
+                }
+            ]
+        },
+        exit: {
+            duration: exitDuration,
+            easing: exitEasing,
+            keyframes: [
+                {
+                    opacity: 1
+                },
+                {
+                    opacity: 0
+                }
+            ]
+        }
+    });
+/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(createFadePresence());
+export const FadeSnappy = createPresenceComponent(createFadePresence({
+    enterDuration: motionTokens.durationFast
+}));
+export const FadeRelaxed = createPresenceComponent(createFadePresence({
+    enterDuration: motionTokens.durationGentle
+}));

package/lib/components/Fade/Fade.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotion,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\nconst duration = motionTokens.durationNormal;\nconst easing = motionTokens.curveEasyEase;\n\n/** Define a presence motion for fade in/out  */\nconst fadeMotion: PresenceMotion = {\n  enter: { duration, easing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration, easing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadeMotion);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationFast } });\n\nexport const FadeExaggerated = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationGentle } });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","duration","durationNormal","easing","curveEasyEase","fadeMotion","enter","keyframes","opacity","exit","Fade","FadeSnappy","all","durationFast","FadeExaggerated","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,MAAMC,WAAWH,aAAaI,cAAc;AAC5C,MAAMC,SAASL,aAAaM,aAAa;AAEzC,8CAA8C,GAC9C,MAAMC,aAA6B;IACjCC,OAAO;QAAEL;QAAUE;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;IACvEC,MAAM;QAAER;QAAUE;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;AACxE;AAEA,4EAA4E,GAC5E,OAAO,MAAME,OAAOX,wBAAwBM,YAAY;AAExD,OAAO,MAAMM,aAAaX,+BAA+BU,MAAM;IAAEE,KAAK;QAAEX,UAAUH,aAAae,YAAY;IAAC;AAAE,GAAG;AAEjH,OAAO,MAAMC,kBAAkBd,+BAA+BU,MAAM;IAAEE,KAAK;QAAEX,UAAUH,aAAaiB,cAAc;IAAC;AAAE,GAAG"}
+{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n  enterDuration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out  */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEase,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) => ({\n  enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeRelaxed = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationGentle }));\n"],"names":["motionTokens","createPresenceComponent","createFadePresence","enterDuration","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","duration","easing","keyframes","opacity","exit","Fade","FadeSnappy","durationFast","FadeRelaxed","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAiB/E,8CAA8C,GAC9C,OAAO,MAAMC,qBAA+D,CAAC,EAC3EC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,aAAa,EACxCC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAO;YAAEC,UAAUP;YAAeQ,QAAQN;YAAaO,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;QACnGC,MAAM;YAAEJ,UAAUH;YAAcI,QAAQH;YAAYI,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;IAClG,CAAA,EAAG;AAEH,4EAA4E,GAC5E,OAAO,MAAME,OAAOd,wBAAwBC,sBAAsB;AAElE,OAAO,MAAMc,aAAaf,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAaiB,YAAY;AAAC,IAAI;AAEpH,OAAO,MAAMC,cAAcjB,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAamB,cAAc;AAAC,IAAI"}

package/lib/components/Fade/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,SAAS"}
+{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export * from './Fade';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,SAAS"}

package/lib/components/Scale/Scale.js

@@ -50,7 +50,7 @@ export const ScaleSnappy = createPresenceComponentVariant(Scale, {
         easing: motionTokens.curveAccelerateMax
     }
 });
-export const ScaleExaggerated = createPresenceComponentVariant(Scale, {
+export const ScaleRelaxed = createPresenceComponentVariant(Scale, {
     enter: {
         duration: motionTokens.durationSlow,
         easing: motionTokens.curveDecelerateMax

package/lib/components/Scale/Scale.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for scale in/out */\nconst scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromScale = 0.9; // Could be a custom param in the future\n  const toScale = 1;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n  ];\n\n  return {\n    enter: {\n      duration: motionTokens.durationGentle,\n      easing: motionTokens.curveDecelerateMax,\n      keyframes: enterKeyframes,\n    },\n    exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scaleMotion);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },\n  exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },\n});\n\nexport const ScaleExaggerated = createPresenceComponentVariant(Scale, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },\n  exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","scaleMotion","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","durationGentle","easing","curveDecelerateMax","keyframes","exit","durationNormal","curveAccelerateMax","Scale","ScaleSnappy","durationFast","ScaleExaggerated","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,8CAA8C,GAC9C,MAAMC,cAA8D,CAAC,EAAEC,iBAAiB,IAAI,EAAE;IAC5F,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,YAAY,KAAK,wCAAwC;IAC/D,MAAMC,UAAU;IAEhB,MAAMC,iBAAiB;QACrB;YAAEC,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAU;QACnG;YAAEF,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLC,UAAUf,aAAagB,cAAc;YACrCC,QAAQjB,aAAakB,kBAAkB;YACvCC,WAAWV;QACb;QACAW,MAAM;YAAEL,UAAUf,aAAaqB,cAAc;YAAEJ,QAAQjB,aAAasB,kBAAkB;YAAEH,WAAWN;QAAc;IACnH;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMU,QAAQtB,wBAAwBE,aAAa;AAE1D,OAAO,MAAMqB,cAActB,+BAA+BqB,OAAO;IAC/DT,OAAO;QAAEC,UAAUf,aAAaqB,cAAc;QAAEJ,QAAQjB,aAAakB,kBAAkB;IAAC;IACxFE,MAAM;QAAEL,UAAUf,aAAayB,YAAY;QAAER,QAAQjB,aAAasB,kBAAkB;IAAC;AACvF,GAAG;AAEH,OAAO,MAAMI,mBAAmBxB,+BAA+BqB,OAAO;IACpET,OAAO;QAAEC,UAAUf,aAAa2B,YAAY;QAAEV,QAAQjB,aAAakB,kBAAkB;IAAC;IACtFE,MAAM;QAAEL,UAAUf,aAAagB,cAAc;QAAEC,QAAQjB,aAAasB,kBAAkB;IAAC;AACzF,GAAG"}
+{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for scale in/out */\nconst scaleMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromScale = 0.9; // Could be a custom param in the future\n  const toScale = 1;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'visible' },\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, transform: `scale3d(${toScale}, ${toScale}, 1)` },\n    { opacity: fromOpacity, transform: `scale3d(${fromScale}, ${fromScale}, 1)`, visibility: 'hidden' },\n  ];\n\n  return {\n    enter: {\n      duration: motionTokens.durationGentle,\n      easing: motionTokens.curveDecelerateMax,\n      keyframes: enterKeyframes,\n    },\n    exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveAccelerateMax, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scaleMotion);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n  enter: { duration: motionTokens.durationNormal, easing: motionTokens.curveDecelerateMax },\n  exit: { duration: motionTokens.durationFast, easing: motionTokens.curveAccelerateMax },\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveDecelerateMax },\n  exit: { duration: motionTokens.durationGentle, easing: motionTokens.curveAccelerateMax },\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","scaleMotion","animateOpacity","fromOpacity","toOpacity","fromScale","toScale","enterKeyframes","opacity","transform","visibility","exitKeyframes","enter","duration","durationGentle","easing","curveDecelerateMax","keyframes","exit","durationNormal","curveAccelerateMax","Scale","ScaleSnappy","durationFast","ScaleRelaxed","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,8CAA8C,GAC9C,MAAMC,cAA8D,CAAC,EAAEC,iBAAiB,IAAI,EAAE;IAC5F,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,YAAY,KAAK,wCAAwC;IAC/D,MAAMC,UAAU;IAEhB,MAAMC,iBAAiB;QACrB;YAAEC,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAU;QACnG;YAAEF,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;KACvE;IAED,MAAMK,gBAAgB;QACpB;YAAEH,SAASJ;YAAWK,WAAW,CAAC,QAAQ,EAAEH,QAAQ,EAAE,EAAEA,QAAQ,IAAI,CAAC;QAAC;QACtE;YAAEE,SAASL;YAAaM,WAAW,CAAC,QAAQ,EAAEJ,UAAU,EAAE,EAAEA,UAAU,IAAI,CAAC;YAAEK,YAAY;QAAS;KACnG;IAED,OAAO;QACLE,OAAO;YACLC,UAAUf,aAAagB,cAAc;YACrCC,QAAQjB,aAAakB,kBAAkB;YACvCC,WAAWV;QACb;QACAW,MAAM;YAAEL,UAAUf,aAAaqB,cAAc;YAAEJ,QAAQjB,aAAasB,kBAAkB;YAAEH,WAAWN;QAAc;IACnH;AACF;AAEA,6EAA6E,GAC7E,OAAO,MAAMU,QAAQtB,wBAAwBE,aAAa;AAE1D,OAAO,MAAMqB,cAActB,+BAA+BqB,OAAO;IAC/DT,OAAO;QAAEC,UAAUf,aAAaqB,cAAc;QAAEJ,QAAQjB,aAAakB,kBAAkB;IAAC;IACxFE,MAAM;QAAEL,UAAUf,aAAayB,YAAY;QAAER,QAAQjB,aAAasB,kBAAkB;IAAC;AACvF,GAAG;AAEH,OAAO,MAAMI,eAAexB,+BAA+BqB,OAAO;IAChET,OAAO;QAAEC,UAAUf,aAAa2B,YAAY;QAAEV,QAAQjB,aAAakB,kBAAkB;IAAC;IACtFE,MAAM;QAAEL,UAAUf,aAAagB,cAAc;QAAEC,QAAQjB,aAAasB,kBAAkB;IAAC;AACzF,GAAG"}

package/lib/components/Scale/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Scale';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,UAAU"}
+{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export * from './Scale';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,UAAU"}

package/lib/index.js

@@ -1,3 +1,3 @@
-export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse';
-export { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';
-export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';
+export { Collapse, CollapseSnappy, CollapseRelaxed, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
+export { Fade, FadeSnappy, FadeRelaxed, createFadePresence } from './components/Fade';
+export { Scale, ScaleSnappy, ScaleRelaxed } from './components/Scale';