@fluentui/react-motion-components-preview 0.0.0-nightly-20241018-0406.1 → 0.0.0-nightly-20241022-0408.1

package/CHANGELOG.md

@@ -1,20 +1,20 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Fri, 18 Oct 2024 04:11:45 GMT and should not be manually modified.
+This log was last generated on Tue, 22 Oct 2024 04:13:00 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20241018-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241018-0406.1)
+## [0.0.0-nightly-20241022-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1)
 
-Fri, 18 Oct 2024 04:11:45 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241018-0406.1)
+Tue, 22 Oct 2024 04:13:00 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-motion to v0.0.0-nightly-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) by beachball)
+- Bump @fluentui/react-motion to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
 
 ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
 

package/dist/index.d.ts

@@ -5,6 +5,27 @@ 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 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;
+};
+
 export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
 
 declare type CollapseOrientation = 'horizontal' | 'vertical';
@@ -29,7 +50,10 @@ 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>;
 
 /** A React component that applies fade in/out transitions to its children. */

package/lib/components/Collapse/Collapse.js

@@ -1,126 +1,67 @@
 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';
-        // 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.
-        const collapsedWhiteSpace = {};
-        if (orientation === 'horizontal') {
-            collapsedWhiteSpace.paddingLeft = '0';
-            collapsedWhiteSpace.paddingRight = '0';
-        } else {
-            collapsedWhiteSpace.paddingTop = '0';
-            collapsedWhiteSpace.paddingBottom = '0';
-        }
+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,
-                easing: enterEasing
-            },
-            // Expand whitespace (padding currently).
-            {
-                // Animate from zero values to the element's natural values (i.e. the missing other keyframe).
-                keyframes: [
-                    {
-                        ...collapsedWhiteSpace,
-                        offset: 0
-                    }
-                ],
-                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
+            }));
         }
+        // ----- 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,
-            fill: 'both'
-        });
-        exitAtoms.push(// Collapse whitespace (padding currently).
-        {
-            // Animate from the element's natural values (i.e. the missing other keyframe) to zero values.
-            keyframes: [
-                {
-                    ...collapsedWhiteSpace,
-                    offset: 1
-                }
-            ],
-            duration: exitDuration,
+            element,
+            delay: exitDelay
+        }));
+        exitAtoms.push(whitespaceExitAtom({
+            orientation,
+            duration: exitSizeDuration,
             easing: exitEasing,
-            fill: 'forwards'
-        });
+            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
@@ -128,3 +69,10 @@ export const CollapseSnappy = createPresenceComponent(createCollapsePresence({
 export const CollapseExaggerated = 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    // 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.\n    const collapsedWhiteSpace = {} as { [key: string]: string };\n    if (orientation === 'horizontal') {\n      collapsedWhiteSpace.paddingLeft = '0';\n      collapsedWhiteSpace.paddingRight = '0';\n    } else {\n      collapsedWhiteSpace.paddingTop = '0';\n      collapsedWhiteSpace.paddingBottom = '0';\n    }\n\n    // The enter transition is an array of up to 3 motion atoms: size, whitespace 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      // Expand whitespace (padding currently).\n      {\n        // Animate from zero values to the element's natural values (i.e. the missing other keyframe).\n        keyframes: [{ ...collapsedWhiteSpace, offset: 0 }],\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 3 motion atoms: opacity, size and whitespace.\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    exitAtoms.push(\n      // Collapse whitespace (padding currently).\n      {\n        // Animate from the element's natural values (i.e. the missing other keyframe) to zero values.\n        keyframes: [{ ...collapsedWhiteSpace, offset: 1 }],\n        duration: exitDuration,\n        easing: exitEasing,\n        fill: 'forwards',\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","collapsedWhiteSpace","paddingLeft","paddingRight","paddingTop","paddingBottom","enterAtoms","keyframes","offset","duration","easing","push","opacity","fill","exitAtoms","enter","exit","Collapse","CollapseSnappy","durationFast","CollapseExaggerated","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["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 CollapseExaggerated = 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","CollapseExaggerated","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,sBAAsBnC,wBACjC6B,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":["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":"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"}

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":["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/index.js

@@ -1,3 +1,3 @@
-export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse';
+export { Collapse, CollapseSnappy, CollapseExaggerated, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } 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, 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"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseExaggerated,\n  CollapseDelayed,\n  createCollapsePresence,\n  createCollapseDelayedPresence,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeExaggerated","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,mBAAmB,EACnBC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,eAAe,QAAQ,oBAAoB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB"}

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

@@ -12,137 +12,83 @@ _export(exports, {
     Collapse: function() {
         return Collapse;
     },
+    CollapseDelayed: function() {
+        return CollapseDelayed;
+    },
     CollapseExaggerated: function() {
         return CollapseExaggerated;
     },
     CollapseSnappy: function() {
         return CollapseSnappy;
     },
+    createCollapseDelayedPresence: function() {
+        return createCollapseDelayedPresence;
+    },
     createCollapsePresence: function() {
         return createCollapsePresence;
     }
 });
 const _reactmotion = require("@fluentui/react-motion");
-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';
-        // 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.
-        const collapsedWhiteSpace = {};
-        if (orientation === 'horizontal') {
-            collapsedWhiteSpace.paddingLeft = '0';
-            collapsedWhiteSpace.paddingRight = '0';
-        } else {
-            collapsedWhiteSpace.paddingTop = '0';
-            collapsedWhiteSpace.paddingBottom = '0';
-        }
+const _collapseatoms = require("./collapse-atoms");
+const createCollapseDelayedPresence = ({ enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, 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,
-                easing: enterEasing
-            },
-            // Expand whitespace (padding currently).
-            {
-                // Animate from zero values to the element's natural values (i.e. the missing other keyframe).
-                keyframes: [
-                    {
-                        ...collapsedWhiteSpace,
-                        offset: 0
-                    }
-                ],
-                duration: enterDuration,
+            (0, _collapseatoms.sizeEnterAtom)({
+                orientation,
+                duration: enterSizeDuration,
+                easing: enterEasing,
+                element
+            }),
+            (0, _collapseatoms.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((0, _collapseatoms.opacityEnterAtom)({
+                duration: enterOpacityDuration,
                 easing: enterEasing,
-                fill: 'both'
-            });
+                delay: enterDelay
+            }));
         }
+        // ----- 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((0, _collapseatoms.opacityExitAtom)({
+                duration: exitOpacityDuration,
                 easing: exitEasing
-            });
+            }));
         }
-        exitAtoms.push({
-            keyframes: [
-                {
-                    [sizeName]: toSize,
-                    [overflowName]: 'hidden'
-                },
-                {
-                    [sizeName]: fromSize,
-                    [overflowName]: 'hidden'
-                }
-            ],
-            duration: exitDuration,
+        exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
+            orientation,
+            duration: exitSizeDuration,
             easing: exitEasing,
-            fill: 'both'
-        });
-        exitAtoms.push({
-            // Animate from the element's natural values (i.e. the missing other keyframe) to zero values.
-            keyframes: [
-                {
-                    ...collapsedWhiteSpace,
-                    offset: 1
-                }
-            ],
-            duration: exitDuration,
+            element,
+            delay: exitDelay
+        }));
+        exitAtoms.push((0, _collapseatoms.whitespaceExitAtom)({
+            orientation,
+            duration: exitSizeDuration,
             easing: exitEasing,
-            fill: 'forwards'
-        });
+            delay: exitDelay
+        }));
         return {
             enter: enterAtoms,
             exit: exitAtoms
         };
     };
+const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// where the delays are zero, and the size and opacity durations are equal.
+    createCollapseDelayedPresence({
+        enterSizeDuration: enterDuration,
+        enterEasing,
+        exitSizeDuration: exitDuration,
+        exitEasing
+    });
 const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence());
 const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
     enterDuration: _reactmotion.motionTokens.durationFast
@@ -150,3 +96,10 @@ const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapseP
 const CollapseExaggerated = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({
     enterDuration: _reactmotion.motionTokens.durationSlower
 }));
+const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({
+    enterSizeDuration: _reactmotion.motionTokens.durationNormal,
+    enterOpacityDuration: _reactmotion.motionTokens.durationSlower,
+    enterDelay: _reactmotion.motionTokens.durationNormal,
+    exitDelay: _reactmotion.motionTokens.durationSlower,
+    enterEasing: _reactmotion.motionTokens.curveEasyEase
+}));

package/lib-commonjs/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    // 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.\n    const collapsedWhiteSpace = {} as { [key: string]: string };\n    if (orientation === 'horizontal') {\n      collapsedWhiteSpace.paddingLeft = '0';\n      collapsedWhiteSpace.paddingRight = '0';\n    } else {\n      collapsedWhiteSpace.paddingTop = '0';\n      collapsedWhiteSpace.paddingBottom = '0';\n    }\n\n    // The enter transition is an array of up to 3 motion atoms: size, whitespace 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      // Expand whitespace (padding currently).\n      {\n        // Animate from zero values to the element's natural values (i.e. the missing other keyframe).\n        keyframes: [{ ...collapsedWhiteSpace, offset: 0 }],\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 3 motion atoms: opacity, size and whitespace.\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    exitAtoms.push(\n      // Collapse whitespace (padding currently).\n      {\n        // Animate from the element's natural values (i.e. the missing other keyframe) to zero values.\n        keyframes: [{ ...collapsedWhiteSpace, offset: 1 }],\n        duration: exitDuration,\n        easing: exitEasing,\n        fill: 'forwards',\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","collapsedWhiteSpace","paddingLeft","paddingRight","paddingTop","paddingBottom","enterAtoms","keyframes","offset","duration","easing","push","opacity","fill","exitAtoms","enter","exit","createPresenceComponent","durationFast","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
+{"version":3,"sources":["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 CollapseExaggerated = 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":["Collapse","CollapseDelayed","CollapseExaggerated","CollapseSnappy","createCollapseDelayedPresence","createCollapsePresence","enterSizeDuration","motionTokens","durationNormal","enterOpacityDuration","enterEasing","curveEasyEaseMax","enterDelay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","element","animateOpacity","orientation","enterAtoms","sizeEnterAtom","duration","easing","whitespaceEnterAtom","push","opacityEnterAtom","delay","exitAtoms","opacityExitAtom","sizeExitAtom","whitespaceExitAtom","enter","exit","enterDuration","exitDuration","createPresenceComponent","durationFast","durationSlower","curveEasyEase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA8GaA,QAAAA;eAAAA;;IAUAC,eAAAA;eAAAA;;IAJAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;IAnGAC,6BAAAA;eAAAA;;IAiFAC,sBAAAA;eAAAA;;;6BA9FqD;+BAU3D;AAGA,MAAMD,gCAIX,CAAC,EAECE,oBAAoBC,yBAAAA,CAAaC,cAAc,EAC/CC,uBAAuBH,iBAAiB,EACxCI,cAAcH,yBAAAA,CAAaI,gBAAgB,EAC3CC,aAAa,CAAC,EAGdC,mBAAmBP,iBAAiB,EACpCQ,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/BC,IAAAA,4BAAAA,EAAc;gBACZF;gBACAG,UAAUhB;gBACViB,QAAQb;gBACRO;YACF;YACAO,IAAAA,kCAAAA,EAAoB;gBAClBL;gBACAG,UAAUhB;gBACViB,QAAQb;YACV;SACD;QACD,+EAA+E;QAC/E,IAAIQ,gBAAgB;YAClBE,WAAWK,IAAI,CACbC,IAAAA,+BAAAA,EAAiB;gBACfJ,UAAUb;gBACVc,QAAQb;gBACRiB,OAAOf;YACT;QAEJ;QAEA,mBAAmB;QACnB,yFAAyF;QACzF,MAAMgB,YAA0B,EAAE;QAClC,gFAAgF;QAChF,IAAIV,gBAAgB;YAClBU,UAAUH,IAAI,CACZI,IAAAA,8BAAAA,EAAgB;gBACdP,UAAUR;gBACVS,QAAQR;YACV;QAEJ;QACAa,UAAUH,IAAI,CACZK,IAAAA,2BAAAA,EAAa;YACXX;YACAG,UAAUT;YACVU,QAAQR;YACRE;YACAU,OAAOX;QACT;QAEFY,UAAUH,IAAI,CACZM,IAAAA,iCAAAA,EAAmB;YACjBZ;YACAG,UAAUT;YACVU,QAAQR;YACRY,OAAOX;QACT;QAGF,OAAO;YACLgB,OAAOZ;YACPa,MAAML;QACR;IACF;AAGK,MAAMvB,yBAAgG,CAAC,EAC5G6B,gBAAgB3B,yBAAAA,CAAaC,cAAc,EAC3CE,cAAcH,yBAAAA,CAAaI,gBAAgB,EAC3CwB,eAAeD,aAAa,EAC5BnB,aAAaL,WAAW,EACzB,GAAG,CAAC,CAAC,GAEJ,2EAA2E;IAC3EN,8BAA8B;QAC5BE,mBAAmB4B;QACnBxB;QACAG,kBAAkBsB;QAClBpB;IACF;AAGK,MAAMf,WAAWoC,IAAAA,oCAAAA,EAAwB/B;AAEzC,MAAMF,iBAAiBiC,IAAAA,oCAAAA,EAC5B/B,uBAAuB;IAAE6B,eAAe3B,yBAAAA,CAAa8B,YAAY;AAAC;AAG7D,MAAMnC,sBAAsBkC,IAAAA,oCAAAA,EACjC/B,uBAAuB;IAAE6B,eAAe3B,yBAAAA,CAAa+B,cAAc;AAAC;AAG/D,MAAMrC,kBAAkBmC,IAAAA,oCAAAA,EAC7BhC,8BAA8B;IAC5BE,mBAAmBC,yBAAAA,CAAaC,cAAc;IAC9CC,sBAAsBF,yBAAAA,CAAa+B,cAAc;IACjD1B,YAAYL,yBAAAA,CAAaC,cAAc;IACvCQ,WAAWT,yBAAAA,CAAa+B,cAAc;IACtC5B,aAAaH,yBAAAA,CAAagC,aAAa;AACzC"}

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

@@ -0,0 +1,149 @@
+// ----- SIZE -----
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    opacityEnterAtom: function() {
+        return opacityEnterAtom;
+    },
+    opacityExitAtom: function() {
+        return opacityExitAtom;
+    },
+    sizeEnterAtom: function() {
+        return sizeEnterAtom;
+    },
+    sizeExitAtom: function() {
+        return sizeExitAtom;
+    },
+    whitespaceEnterAtom: function() {
+        return whitespaceEnterAtom;
+    },
+    whitespaceExitAtom: function() {
+        return whitespaceExitAtom;
+    }
+});
+const sizeValuesForOrientation = (orientation, element)=>{
+    const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
+    const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
+    const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
+    const toSize = `${measuredSize}px`;
+    return {
+        sizeName,
+        overflowName,
+        toSize
+    };
+};
+const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0' })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: fromSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: toSize,
+                offset: 0.9999,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: 'unset',
+                [overflowName]: 'unset'
+            }
+        ],
+        duration,
+        easing
+    };
+};
+const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
+    const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
+    return {
+        keyframes: [
+            {
+                [sizeName]: toSize,
+                [overflowName]: 'hidden'
+            },
+            {
+                [sizeName]: fromSize,
+                [overflowName]: 'hidden'
+            }
+        ],
+        duration,
+        easing,
+        fill: 'both',
+        delay
+    };
+};
+// ----- WHITESPACE -----
+// Whitespace animation 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
+    };
+};
+const whitespaceEnterAtom = ({ orientation, duration, easing })=>{
+    const { paddingStart, paddingEnd } = whitespaceValuesForOrientation(orientation);
+    return {
+        keyframes: [
+            {
+                [paddingStart]: '0',
+                [paddingEnd]: '0',
+                offset: 0
+            }
+        ],
+        duration,
+        easing
+    };
+};
+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
+    };
+};
+const opacityEnterAtom = ({ duration, easing, delay = 0, fromOpacity = 0, toOpacity = 1 })=>({
+        keyframes: [
+            {
+                opacity: fromOpacity
+            },
+            {
+                opacity: toOpacity
+            }
+        ],
+        duration,
+        easing,
+        delay,
+        fill: 'both'
+    });
+const opacityExitAtom = ({ duration, easing, fromOpacity = 0, toOpacity = 1 })=>({
+        keyframes: [
+            {
+                opacity: toOpacity
+            },
+            {
+                opacity: fromOpacity
+            }
+        ],
+        duration,
+        easing
+    });

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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":["opacityEnterAtom","opacityExitAtom","sizeEnterAtom","sizeExitAtom","whitespaceEnterAtom","whitespaceExitAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","fromOpacity","toOpacity","opacity"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["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":""}

package/lib-commonjs/index.js

@@ -12,6 +12,9 @@ _export(exports, {
     Collapse: function() {
         return _Collapse.Collapse;
     },
+    CollapseDelayed: function() {
+        return _Collapse.CollapseDelayed;
+    },
     CollapseExaggerated: function() {
         return _Collapse.CollapseExaggerated;
     },
@@ -36,6 +39,9 @@ _export(exports, {
     ScaleSnappy: function() {
         return _Scale.ScaleSnappy;
     },
+    createCollapseDelayedPresence: function() {
+        return _Collapse.createCollapseDelayedPresence;
+    },
     createCollapsePresence: function() {
         return _Collapse.createCollapsePresence;
     }

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"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"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseExaggerated,\n  CollapseDelayed,\n  createCollapsePresence,\n  createCollapseDelayedPresence,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,mBAAmB;eAAnBA,6BAAmB;;IADnBC,cAAc;eAAdA,wBAAc;;IAMPC,IAAI;eAAJA,UAAI;;IAAcC,eAAe;eAAfA,qBAAe;;IAA3BC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,gBAAgB;eAAhBA,uBAAgB;;IAA7BC,WAAW;eAAXA,kBAAW;;IAHzBC,6BAA6B;eAA7BA,uCAA6B;;IAD7BC,sBAAsB;eAAtBA,gCAAsB;;;0BAEjB;sBAC2C;uBACG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.0.0-nightly-20241018-0406.1",
+  "version": "0.0.0-nightly-20241022-0408.1",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,13 +29,13 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20241018-0406.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241018-0406.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20241022-0408.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241022-0408.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-motion": "0.0.0-nightly-20241018-0406.1",
+    "@fluentui/react-motion": "0.0.0-nightly-20241022-0408.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {