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

package/CHANGELOG.md

@@ -1,9 +1,23 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Tue, 23 Jul 2024 20:13:12 GMT and should not be manually modified.
+This log was last generated on Tue, 15 Oct 2024 17:13:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [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 
+[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
+
+- refactor: simplify motion component variant creation ([PR #32939](https://github.com/microsoft/fluentui/pull/32939) by robertpenner@microsoft.com)
+- feat: add Collapse orientation parameter & horizontal implementation ([PR #32998](https://github.com/microsoft/fluentui/pull/32998) by robertpenner@microsoft.com)
+
+### Patches
+
+- fix: Collapse should only effect opacity when animateOpacity is true ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by robertpenner@microsoft.com)
+
 ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
 
 Tue, 23 Jul 2024 20:13:12 GMT 

package/dist/index.d.ts

@@ -1,17 +1,36 @@
+import type { MotionParam } from '@fluentui/react-motion';
 import { PresenceComponent } 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<    {
-animateOpacity?: boolean | undefined;
-}>;
+export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
 
-export declare const CollapseExaggerated: PresenceComponent<    {
-animateOpacity?: boolean | undefined;
-}>;
+export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
 
-export declare const CollapseSnappy: PresenceComponent<    {
-animateOpacity?: boolean | undefined;
-}>;
+declare type CollapseOrientation = 'horizontal' | 'vertical';
+
+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. */
+    orientation?: CollapseOrientation;
+};
+
+export declare const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
+
+declare type CollapseVariantParams = {
+    /** Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms). */
+    enterDuration?: number;
+    /** Easing curve for the enter transition (expand). Defaults to the `easeEaseMax` value.  */
+    enterEasing?: string;
+    /** Time (ms) for the exit transition (collapse). Defaults to the `enterDuration` param for symmetry. */
+    exitDuration?: number;
+    /** Easing curve for the exit transition (collapse). Defaults to the `enterEasing` param for symmetry.  */
+    exitEasing?: string;
+};
+
+/** Define a presence motion for collapse/expand */
+export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
 
 /** A React component that applies fade in/out transitions to its children. */
 export declare const Fade: PresenceComponent<    {}>;
@@ -20,6 +39,18 @@ export declare const FadeExaggerated: PresenceComponent<    {}>;
 
 export declare const FadeSnappy: PresenceComponent<    {}>;
 
+/**
+ * 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.
+ * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
+ * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
+ * while the runtime params may give access to the target element, which is different for each instance.
+ *
+ * The generated motion function is also framework-independent, i.e. non-React.
+ * It can be turned into a React component using `createPresenceComponent`.
+ */
+declare type PresenceMotionFnCreator<MotionVariantParams extends Record<string, MotionParam> = {}, MotionRuntimeParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;
+
 /** A React component that applies scale in/out transitions to its children. */
 export declare const Scale: PresenceComponent<    {
 animateOpacity?: boolean | undefined;

package/lib/components/Collapse/Collapse.js

@@ -1,71 +1,94 @@
-import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
-/** Define a presence motion for collapse/expand */ const collapseMotion = ({ element, animateOpacity = true })=>{
-    const fromOpacity = animateOpacity ? 0 : 1;
-    const toOpacity = 1;
-    const fromHeight = '0'; // Could be a custom param in the future: start partially expanded
-    const toHeight = `${element.scrollHeight}px`;
-    const overflow = 'hidden';
-    const duration = motionTokens.durationNormal;
-    const easing = motionTokens.curveEasyEaseMax;
-    const enterKeyframes = [
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
-        },
-        // Transition to the height of the content, at 99.99% of the duration.
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            offset: 0.9999,
-            overflow
-        },
-        // On completion, remove the maxHeight because the content might need to expand later.
-        // This extra keyframe is simpler than firing a callback on completion.
-        {
-            opacity: toOpacity,
-            maxHeight: 'unset',
-            overflow
+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.
+        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,
+                easing: enterEasing
+            }
+        ];
+        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            enterAtoms.push({
+                keyframes: [
+                    {
+                        opacity: fromOpacity
+                    },
+                    {
+                        opacity: toOpacity
+                    }
+                ],
+                duration: enterDuration,
+                easing: enterEasing,
+                fill: 'both'
+            });
         }
-    ];
-    const exitKeyframes = [
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            overflow
-        },
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
-        }
-    ];
-    return {
-        enter: {
-            duration,
-            easing,
-            keyframes: enterKeyframes
-        },
-        exit: {
-            duration,
-            easing,
-            keyframes: exitKeyframes
+        // The exit transition is an array of up to 2 motion atoms: opacity and size.
+        const exitAtoms = [];
+        // Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            exitAtoms.push({
+                keyframes: [
+                    {
+                        opacity: toOpacity
+                    },
+                    {
+                        opacity: fromOpacity
+                    }
+                ],
+                duration: exitDuration,
+                easing: exitEasing
+            });
         }
+        exitAtoms.push(// Collapse size (height or width)
+        {
+            keyframes: [
+                {
+                    [sizeName]: toSize,
+                    [overflowName]: 'hidden'
+                },
+                {
+                    [sizeName]: fromSize,
+                    [overflowName]: 'hidden'
+                }
+            ],
+            duration: exitDuration,
+            easing: exitEasing,
+            fill: 'both'
+        });
+        return {
+            enter: enterAtoms,
+            exit: exitAtoms
+        };
     };
-};
-/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(collapseMotion);
-export const CollapseSnappy = createPresenceComponentVariant(Collapse, {
-    all: {
-        duration: motionTokens.durationUltraFast
-    }
-});
-export const CollapseExaggerated = createPresenceComponentVariant(Collapse, {
-    enter: {
-        duration: motionTokens.durationSlow,
-        easing: motionTokens.curveEasyEaseMax
-    },
-    exit: {
-        duration: motionTokens.durationNormal,
-        easing: motionTokens.curveEasyEaseMax
-    }
-});
+/** 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({
+    enterDuration: motionTokens.durationSlower
+}));

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

@@ -1 +1 @@
-{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  type PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for collapse/expand */\nconst collapseMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ element, animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromHeight = '0'; // Could be a custom param in the future: start partially expanded\n  const toHeight = `${element.scrollHeight}px`;\n  const overflow = 'hidden';\n\n  const duration = motionTokens.durationNormal;\n  const easing = motionTokens.curveEasyEaseMax;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n    // Transition to the height of the content, at 99.99% of the duration.\n    { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n    // On completion, remove the maxHeight because the content might need to expand later.\n    // This extra keyframe is simpler than firing a callback on completion.\n    { opacity: toOpacity, maxHeight: 'unset', overflow },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, maxHeight: toHeight, overflow },\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n  ];\n\n  return {\n    enter: { duration, easing, keyframes: enterKeyframes },\n    exit: { duration, easing, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapseMotion);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  all: { duration: motionTokens.durationUltraFast },\n});\n\nexport const CollapseExaggerated = createPresenceComponentVariant(Collapse, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveEasyEaseMax },\n  exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveEasyEaseMax },\n});\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","collapseMotion","element","animateOpacity","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","duration","durationNormal","easing","curveEasyEaseMax","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","keyframes","exit","Collapse","CollapseSnappy","all","durationUltraFast","CollapseExaggerated","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,iDAAiD,GACjD,MAAMC,iBAAiE,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAE;IACxG,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,aAAa,KAAK,kEAAkE;IAC1F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;IAC5C,MAAMC,WAAW;IAEjB,MAAMC,WAAWZ,aAAaa,cAAc;IAC5C,MAAMC,SAASd,aAAae,gBAAgB;IAE5C,MAAMC,iBAAiB;QACrB;YAAEC,SAASX;YAAaY,WAAWV;YAAYG;QAAS;QACxD,sEAAsE;QACtE;YAAEM,SAASV;YAAWW,WAAWT;YAAUU,QAAQ;YAAQR;QAAS;QACpE,sFAAsF;QACtF,uEAAuE;QACvE;YAAEM,SAASV;YAAWW,WAAW;YAASP;QAAS;KACpD;IAED,MAAMS,gBAAgB;QACpB;YAAEH,SAASV;YAAWW,WAAWT;YAAUE;QAAS;QACpD;YAAEM,SAASX;YAAaY,WAAWV;YAAYG;QAAS;KACzD;IAED,OAAO;QACLU,OAAO;YAAET;YAAUE;YAAQQ,WAAWN;QAAe;QACrDO,MAAM;YAAEX;YAAUE;YAAQQ,WAAWF;QAAc;IACrD;AACF;AAEA,gFAAgF,GAChF,OAAO,MAAMI,WAAWvB,wBAAwBE,gBAAgB;AAEhE,OAAO,MAAMsB,iBAAiBvB,+BAA+BsB,UAAU;IACrEE,KAAK;QAAEd,UAAUZ,aAAa2B,iBAAiB;IAAC;AAClD,GAAG;AAEH,OAAO,MAAMC,sBAAsB1B,+BAA+BsB,UAAU;IAC1EH,OAAO;QAAET,UAAUZ,aAAa6B,YAAY;QAAEf,QAAQd,aAAae,gBAAgB;IAAC;IACpFQ,MAAM;QAAEX,UAAUZ,aAAaa,cAAc;QAAEC,QAAQd,aAAae,gBAAgB;IAAC;AACvF,GAAG"}
+{"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"}

package/lib/index.js

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

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","Fade","FadeSnappy","FadeExaggerated","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,mBAAmB,QAAQ,wBAAwB;AACtF,SAASC,IAAI,EAAEC,UAAU,EAAEC,eAAe,QAAQ,oBAAoB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","createCollapsePresence","Fade","FadeSnappy","FadeExaggerated","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SAASA,QAAQ,EAAEC,cAAc,EAAEC,mBAAmB,EAAEC,sBAAsB,QAAQ,wBAAwB;AAC9G,SAASC,IAAI,EAAEC,UAAU,EAAEC,eAAe,QAAQ,oBAAoB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB"}

package/lib/types.js

@@ -0,0 +1,11 @@
+/**
+ * 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.
+ * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
+ * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
+ * while the runtime params may give access to the target element, which is different for each instance.
+ *
+ * The generated motion function is also framework-independent, i.e. non-React.
+ * It can be turned into a React component using `createPresenceComponent`.
+ */ // TODO: move to @fluentui/react-motion when stable
+export { };

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n  MotionVariantParams extends Record<string, MotionParam> = {},\n  MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":"AAEA;;;;;;;;;CASC,GACD,mDAAmD;AACnD,WAGmF"}

package/lib-commonjs/components/Collapse/Collapse.js

@@ -17,76 +17,101 @@ _export(exports, {
     },
     CollapseSnappy: function() {
         return CollapseSnappy;
+    },
+    createCollapsePresence: function() {
+        return createCollapsePresence;
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-/** Define a presence motion for collapse/expand */ const collapseMotion = ({ element, animateOpacity = true })=>{
-    const fromOpacity = animateOpacity ? 0 : 1;
-    const toOpacity = 1;
-    const fromHeight = '0'; // Could be a custom param in the future: start partially expanded
-    const toHeight = `${element.scrollHeight}px`;
-    const overflow = 'hidden';
-    const duration = _reactmotion.motionTokens.durationNormal;
-    const easing = _reactmotion.motionTokens.curveEasyEaseMax;
-    const enterKeyframes = [
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
-        },
-        // Transition to the height of the content, at 99.99% of the duration.
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            offset: 0.9999,
-            overflow
-        },
-        // On completion, remove the maxHeight because the content might need to expand later.
-        // This extra keyframe is simpler than firing a callback on completion.
-        {
-            opacity: toOpacity,
-            maxHeight: 'unset',
-            overflow
-        }
-    ];
-    const exitKeyframes = [
-        {
-            opacity: toOpacity,
-            maxHeight: toHeight,
-            overflow
-        },
-        {
-            opacity: fromOpacity,
-            maxHeight: fromHeight,
-            overflow
+const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.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.
+        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,
+                easing: enterEasing
+            }
+        ];
+        // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            enterAtoms.push({
+                keyframes: [
+                    {
+                        opacity: fromOpacity
+                    },
+                    {
+                        opacity: toOpacity
+                    }
+                ],
+                duration: enterDuration,
+                easing: enterEasing,
+                fill: 'both'
+            });
         }
-    ];
-    return {
-        enter: {
-            duration,
-            easing,
-            keyframes: enterKeyframes
-        },
-        exit: {
-            duration,
-            easing,
-            keyframes: exitKeyframes
+        // The exit transition is an array of up to 2 motion atoms: opacity and size.
+        const exitAtoms = [];
+        // Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected.
+        if (animateOpacity) {
+            exitAtoms.push({
+                keyframes: [
+                    {
+                        opacity: toOpacity
+                    },
+                    {
+                        opacity: fromOpacity
+                    }
+                ],
+                duration: exitDuration,
+                easing: exitEasing
+            });
         }
+        exitAtoms.push({
+            keyframes: [
+                {
+                    [sizeName]: toSize,
+                    [overflowName]: 'hidden'
+                },
+                {
+                    [sizeName]: fromSize,
+                    [overflowName]: 'hidden'
+                }
+            ],
+            duration: exitDuration,
+            easing: exitEasing,
+            fill: 'both'
+        });
+        return {
+            enter: enterAtoms,
+            exit: exitAtoms
+        };
     };
-};
-const Collapse = (0, _reactmotion.createPresenceComponent)(collapseMotion);
-const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
-    all: {
-        duration: _reactmotion.motionTokens.durationUltraFast
-    }
-});
-const CollapseExaggerated = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
-    enter: {
-        duration: _reactmotion.motionTokens.durationSlow,
-        easing: _reactmotion.motionTokens.curveEasyEaseMax
-    },
-    exit: {
-        duration: _reactmotion.motionTokens.durationNormal,
-        easing: _reactmotion.motionTokens.curveEasyEaseMax
-    }
-});
+const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
+const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
+    enterDuration: _reactmotion.motionTokens.durationFast
+}));
+const CollapseExaggerated = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
+    enterDuration: _reactmotion.motionTokens.durationSlower
+}));

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

@@ -1 +1 @@
-{"version":3,"sources":["Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  type PresenceMotionFn,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\n/** Define a presence motion for collapse/expand */\nconst collapseMotion: PresenceMotionFn<{ animateOpacity?: boolean }> = ({ element, animateOpacity = true }) => {\n  const fromOpacity = animateOpacity ? 0 : 1;\n  const toOpacity = 1;\n  const fromHeight = '0'; // Could be a custom param in the future: start partially expanded\n  const toHeight = `${element.scrollHeight}px`;\n  const overflow = 'hidden';\n\n  const duration = motionTokens.durationNormal;\n  const easing = motionTokens.curveEasyEaseMax;\n\n  const enterKeyframes = [\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n    // Transition to the height of the content, at 99.99% of the duration.\n    { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n    // On completion, remove the maxHeight because the content might need to expand later.\n    // This extra keyframe is simpler than firing a callback on completion.\n    { opacity: toOpacity, maxHeight: 'unset', overflow },\n  ];\n\n  const exitKeyframes = [\n    { opacity: toOpacity, maxHeight: toHeight, overflow },\n    { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n  ];\n\n  return {\n    enter: { duration, easing, keyframes: enterKeyframes },\n    exit: { duration, easing, keyframes: exitKeyframes },\n  };\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapseMotion);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  all: { duration: motionTokens.durationUltraFast },\n});\n\nexport const CollapseExaggerated = createPresenceComponentVariant(Collapse, {\n  enter: { duration: motionTokens.durationSlow, easing: motionTokens.curveEasyEaseMax },\n  exit: { duration: motionTokens.durationNormal, easing: motionTokens.curveEasyEaseMax },\n});\n"],"names":["Collapse","CollapseExaggerated","CollapseSnappy","collapseMotion","element","animateOpacity","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","duration","motionTokens","durationNormal","easing","curveEasyEaseMax","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","keyframes","exit","createPresenceComponent","createPresenceComponentVariant","all","durationUltraFast","durationSlow"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAuCaA,QAAAA;eAAAA;;IAMAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;;6BApCN;AAEP,iDAAiD,GACjD,MAAMC,iBAAiE,CAAC,EAAEC,OAAO,EAAEC,iBAAiB,IAAI,EAAE;IACxG,MAAMC,cAAcD,iBAAiB,IAAI;IACzC,MAAME,YAAY;IAClB,MAAMC,aAAa,KAAK,kEAAkE;IAC1F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;IAC5C,MAAMC,WAAW;IAEjB,MAAMC,WAAWC,yBAAAA,CAAaC,cAAc;IAC5C,MAAMC,SAASF,yBAAAA,CAAaG,gBAAgB;IAE5C,MAAMC,iBAAiB;QACrB;YAAEC,SAASZ;YAAaa,WAAWX;YAAYG;QAAS;QACxD,sEAAsE;QACtE;YAAEO,SAASX;YAAWY,WAAWV;YAAUW,QAAQ;YAAQT;QAAS;QACpE,sFAAsF;QACtF,uEAAuE;QACvE;YAAEO,SAASX;YAAWY,WAAW;YAASR;QAAS;KACpD;IAED,MAAMU,gBAAgB;QACpB;YAAEH,SAASX;YAAWY,WAAWV;YAAUE;QAAS;QACpD;YAAEO,SAASZ;YAAaa,WAAWX;YAAYG;QAAS;KACzD;IAED,OAAO;QACLW,OAAO;YAAEV;YAAUG;YAAQQ,WAAWN;QAAe;QACrDO,MAAM;YAAEZ;YAAUG;YAAQQ,WAAWF;QAAc;IACrD;AACF;AAGO,MAAMrB,WAAWyB,IAAAA,oCAAAA,EAAwBtB;AAEzC,MAAMD,iBAAiBwB,IAAAA,2CAAAA,EAA+B1B,UAAU;IACrE2B,KAAK;QAAEf,UAAUC,yBAAAA,CAAae,iBAAiB;IAAC;AAClD;AAEO,MAAM3B,sBAAsByB,IAAAA,2CAAAA,EAA+B1B,UAAU;IAC1EsB,OAAO;QAAEV,UAAUC,yBAAAA,CAAagB,YAAY;QAAEd,QAAQF,yBAAAA,CAAaG,gBAAgB;IAAC;IACpFQ,MAAM;QAAEZ,UAAUC,yBAAAA,CAAaC,cAAc;QAAEC,QAAQF,yBAAAA,CAAaG,gBAAgB;IAAC;AACvF"}
+{"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":["Collapse","CollapseExaggerated","CollapseSnappy","createCollapsePresence","enterDuration","motionTokens","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","createPresenceComponent","durationFast","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAqGaA,QAAAA;eAAAA;;IAMAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;IA3EAC,sBAAAA;eAAAA;;;6BA5BqD;AA4B3D,MAAMA,yBACX,CAAC,EACCC,gBAAgBC,yBAAAA,CAAaC,cAAc,EAC3CC,cAAcF,yBAAAA,CAAaG,gBAAgB,EAC3CC,eAAeL,aAAa,EAC5BM,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,UAAUtB;gBACVuB,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,UAAUtB;gBACVuB,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,CAEZ;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;AAGK,MAAM/B,WAAWkC,IAAAA,oCAAAA,EAAwB/B;AAEzC,MAAMD,iBAAiBgC,IAAAA,oCAAAA,EAC5B/B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAa8B,YAAY;AAAC;AAG7D,MAAMlC,sBAAsBiC,IAAAA,oCAAAA,EACjC/B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAa+B,cAAc;AAAC"}

package/lib-commonjs/index.js

@@ -35,6 +35,9 @@ _export(exports, {
     },
     ScaleSnappy: function() {
         return _Scale.ScaleSnappy;
+    },
+    createCollapsePresence: function() {
+        return _Collapse.createCollapsePresence;
     }
 });
 const _Collapse = require("./components/Collapse");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAkBC,mBAAmB;eAAnBA,6BAAmB;;IAAnCC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,eAAe;eAAfA,qBAAe;;IAA3BC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,gBAAgB;eAAhBA,uBAAgB;;IAA7BC,WAAW;eAAXA,kBAAW;;;0BAFmC;sBACZ;uBACG"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAkBC,mBAAmB;eAAnBA,6BAAmB;;IAAnCC,cAAc;eAAdA,wBAAc;;IACxBC,IAAI;eAAJA,UAAI;;IAAcC,eAAe;eAAfA,qBAAe;;IAA3BC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,gBAAgB;eAAhBA,uBAAgB;;IAA7BC,WAAW;eAAXA,kBAAW;;IAF6BC,sBAAsB;eAAtBA,gCAAsB;;;0BAAQ;sBACpC;uBACG"}

package/lib-commonjs/types.js

@@ -0,0 +1,14 @@
+/**
+ * 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.
+ * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.
+ * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,
+ * while the runtime params may give access to the target element, which is different for each instance.
+ *
+ * The generated motion function is also framework-independent, i.e. non-React.
+ * It can be turned into a React component using `createPresenceComponent`.
+ */ // TODO: move to @fluentui/react-motion when stable
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/lib-commonjs/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n  MotionVariantParams extends Record<string, MotionParam> = {},\n  MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":"AAEA;;;;;;;;;CASC,GACD,mDAAmD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",