@fluentui/react-motion-components-preview 0.10.0 → 0.11.0

package/lib/components/Collapse/collapse-test-utils.js

@@ -0,0 +1,137 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ /**
+ * Helper to validate the structure of a collapse motion object.
+ * Returns validation data that can be used with Jest expectations.
+ */ export function getCollapseMotionValidation(motion) {
+    return {
+        enterCount: motion.enter.length,
+        exitCount: motion.exit.length,
+        hasEnterOpacity: motion.enter.length === 3 && 'opacity' in (motion.enter[2].keyframes[0] || {}),
+        hasExitOpacity: motion.exit.length === 3 && 'opacity' in (motion.exit[0].keyframes[0] || {}),
+        enterStructure: motion.enter.map((atom)=>({
+                hasKeyframes: Array.isArray(atom.keyframes),
+                hasDuration: typeof atom.duration === 'number',
+                hasEasing: typeof atom.easing === 'string',
+                hasDelay: typeof atom.delay === 'number'
+            })),
+        exitStructure: motion.exit.map((atom)=>({
+                hasKeyframes: Array.isArray(atom.keyframes),
+                hasDuration: typeof atom.duration === 'number',
+                hasEasing: typeof atom.easing === 'string',
+                hasDelay: typeof atom.delay === 'number'
+            }))
+    };
+}
+/**
+ * Helper to extract timing information from collapse motion atoms.
+ */ export function getCollapseTimingInfo(motion, animateOpacity = true) {
+    var _motion_enter_, _motion_enter_1, _motion_enter_2, _motion_exit_, _motion_exit_1, _motion_exit_2, _motion_exit_3, _motion_exit_4;
+    var _motion_enter__delay, _motion_enter__delay1, _motion_enter__delay2;
+    const enterDelays = {
+        size: (_motion_enter__delay = (_motion_enter_ = motion.enter[0]) === null || _motion_enter_ === void 0 ? void 0 : _motion_enter_.delay) !== null && _motion_enter__delay !== void 0 ? _motion_enter__delay : 0,
+        whitespace: (_motion_enter__delay1 = (_motion_enter_1 = motion.enter[1]) === null || _motion_enter_1 === void 0 ? void 0 : _motion_enter_1.delay) !== null && _motion_enter__delay1 !== void 0 ? _motion_enter__delay1 : 0,
+        opacity: animateOpacity ? (_motion_enter__delay2 = (_motion_enter_2 = motion.enter[2]) === null || _motion_enter_2 === void 0 ? void 0 : _motion_enter_2.delay) !== null && _motion_enter__delay2 !== void 0 ? _motion_enter__delay2 : 0 : undefined
+    };
+    var _motion_exit__delay, _motion_exit__delay1, _motion_exit__delay2, _motion_exit__delay3, _motion_exit__delay4;
+    const exitDelays = animateOpacity ? {
+        opacity: (_motion_exit__delay = (_motion_exit_ = motion.exit[0]) === null || _motion_exit_ === void 0 ? void 0 : _motion_exit_.delay) !== null && _motion_exit__delay !== void 0 ? _motion_exit__delay : 0,
+        size: (_motion_exit__delay1 = (_motion_exit_1 = motion.exit[1]) === null || _motion_exit_1 === void 0 ? void 0 : _motion_exit_1.delay) !== null && _motion_exit__delay1 !== void 0 ? _motion_exit__delay1 : 0,
+        whitespace: (_motion_exit__delay2 = (_motion_exit_2 = motion.exit[2]) === null || _motion_exit_2 === void 0 ? void 0 : _motion_exit_2.delay) !== null && _motion_exit__delay2 !== void 0 ? _motion_exit__delay2 : 0
+    } : {
+        size: (_motion_exit__delay3 = (_motion_exit_3 = motion.exit[0]) === null || _motion_exit_3 === void 0 ? void 0 : _motion_exit_3.delay) !== null && _motion_exit__delay3 !== void 0 ? _motion_exit__delay3 : 0,
+        whitespace: (_motion_exit__delay4 = (_motion_exit_4 = motion.exit[1]) === null || _motion_exit_4 === void 0 ? void 0 : _motion_exit_4.delay) !== null && _motion_exit__delay4 !== void 0 ? _motion_exit__delay4 : 0
+    };
+    return {
+        enter: enterDelays,
+        exit: exitDelays
+    };
+}
+/**
+ * Helper to extract duration information from collapse motion atoms.
+ */ export function getCollapseDurationInfo(motion, animateOpacity = true) {
+    var _motion_enter_, _motion_enter_1, _motion_enter_2, _motion_exit_, _motion_exit_1, _motion_exit_2, _motion_exit_3, _motion_exit_4;
+    var _motion_enter__duration, _motion_enter__duration1, _motion_enter__duration2;
+    const enterDurations = {
+        size: (_motion_enter__duration = (_motion_enter_ = motion.enter[0]) === null || _motion_enter_ === void 0 ? void 0 : _motion_enter_.duration) !== null && _motion_enter__duration !== void 0 ? _motion_enter__duration : 0,
+        whitespace: (_motion_enter__duration1 = (_motion_enter_1 = motion.enter[1]) === null || _motion_enter_1 === void 0 ? void 0 : _motion_enter_1.duration) !== null && _motion_enter__duration1 !== void 0 ? _motion_enter__duration1 : 0,
+        opacity: animateOpacity ? (_motion_enter__duration2 = (_motion_enter_2 = motion.enter[2]) === null || _motion_enter_2 === void 0 ? void 0 : _motion_enter_2.duration) !== null && _motion_enter__duration2 !== void 0 ? _motion_enter__duration2 : 0 : undefined
+    };
+    var _motion_exit__duration, _motion_exit__duration1, _motion_exit__duration2, _motion_exit__duration3, _motion_exit__duration4;
+    const exitDurations = animateOpacity ? {
+        opacity: (_motion_exit__duration = (_motion_exit_ = motion.exit[0]) === null || _motion_exit_ === void 0 ? void 0 : _motion_exit_.duration) !== null && _motion_exit__duration !== void 0 ? _motion_exit__duration : 0,
+        size: (_motion_exit__duration1 = (_motion_exit_1 = motion.exit[1]) === null || _motion_exit_1 === void 0 ? void 0 : _motion_exit_1.duration) !== null && _motion_exit__duration1 !== void 0 ? _motion_exit__duration1 : 0,
+        whitespace: (_motion_exit__duration2 = (_motion_exit_2 = motion.exit[2]) === null || _motion_exit_2 === void 0 ? void 0 : _motion_exit_2.duration) !== null && _motion_exit__duration2 !== void 0 ? _motion_exit__duration2 : 0
+    } : {
+        size: (_motion_exit__duration3 = (_motion_exit_3 = motion.exit[0]) === null || _motion_exit_3 === void 0 ? void 0 : _motion_exit_3.duration) !== null && _motion_exit__duration3 !== void 0 ? _motion_exit__duration3 : 0,
+        whitespace: (_motion_exit__duration4 = (_motion_exit_4 = motion.exit[1]) === null || _motion_exit_4 === void 0 ? void 0 : _motion_exit_4.duration) !== null && _motion_exit__duration4 !== void 0 ? _motion_exit__duration4 : 0
+    };
+    return {
+        enter: enterDurations,
+        exit: exitDurations
+    };
+}
+/**
+ * Helper to analyze orientation-specific properties in collapse atoms.
+ */ export function getCollapseOrientationInfo(motion, animateOpacity = true) {
+    const enterSizeAtom = motion.enter[0];
+    const enterWhitespaceAtom = motion.enter[1];
+    const exitOffset = animateOpacity ? 1 : 0;
+    const exitSizeAtom = motion.exit[exitOffset];
+    const exitWhitespaceAtom = motion.exit[exitOffset + 1];
+    return {
+        enter: {
+            sizeProperties: Object.keys((enterSizeAtom === null || enterSizeAtom === void 0 ? void 0 : enterSizeAtom.keyframes[0]) || {}),
+            whitespaceProperties: Object.keys((enterWhitespaceAtom === null || enterWhitespaceAtom === void 0 ? void 0 : enterWhitespaceAtom.keyframes[0]) || {})
+        },
+        exit: {
+            sizeProperties: Object.keys((exitSizeAtom === null || exitSizeAtom === void 0 ? void 0 : exitSizeAtom.keyframes[0]) || {}),
+            whitespaceProperties: Object.keys((exitWhitespaceAtom === null || exitWhitespaceAtom === void 0 ? void 0 : exitWhitespaceAtom.keyframes[0]) || {})
+        }
+    };
+}
+/**
+ * Helper to analyze size atom keyframes for validation.
+ */ export function getSizeAtomInfo(sizeAtom, direction) {
+    const keyframes = sizeAtom.keyframes;
+    const properties = Object.keys(keyframes[0] || {});
+    return {
+        keyframeCount: keyframes.length,
+        properties,
+        hasOffset: direction === 'enter' ? 'offset' in (keyframes[1] || {}) : false,
+        hasFill: 'fill' in sizeAtom,
+        fillValue: sizeAtom.fill,
+        firstFrameValues: keyframes[0] || {},
+        lastFrameValues: keyframes[keyframes.length - 1] || {}
+    };
+}
+/**
+ * Helper to analyze whitespace atom keyframes for validation.
+ */ export function getWhitespaceAtomInfo(whitespaceAtom, direction) {
+    const keyframe = whitespaceAtom.keyframes[0] || {};
+    return {
+        properties: Object.keys(keyframe),
+        offset: keyframe.offset,
+        expectedOffset: direction === 'enter' ? 0 : 1,
+        hasFill: 'fill' in whitespaceAtom,
+        fillValue: whitespaceAtom.fill,
+        isVertical: 'paddingBlockStart' in keyframe,
+        isHorizontal: 'paddingInlineStart' in keyframe
+    };
+}
+/**
+ * Helper to compare opacity handling between two motion objects.
+ */ export function getOpacityComparisonInfo(withOpacity, withoutOpacity) {
+    return {
+        withOpacity: {
+            enterCount: withOpacity.enter.length,
+            exitCount: withOpacity.exit.length,
+            hasEnterOpacity: withOpacity.enter.length === 3,
+            hasExitOpacity: withOpacity.exit.length === 3
+        },
+        withoutOpacity: {
+            enterCount: withoutOpacity.enter.length,
+            exitCount: withoutOpacity.exit.length,
+            hasEnterOpacity: false,
+            hasExitOpacity: false
+        }
+    };
+}

package/lib/components/Collapse/collapse-test-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Collapse/collapse-test-utils.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport type { AtomMotion } from '@fluentui/react-motion';\n\n/**\n * Collapse-specific test utilities for validating motion structure and behavior.\n * These utilities are meant to be used within Jest test files.\n */\n\nexport interface CollapseMotionCounts {\n  enter: number;\n  exit: number;\n}\n\nexport interface CollapseTimingExpectations {\n  enter: { size: number; whitespace: number; opacity?: number };\n  exit: { opacity?: number; size: number; whitespace: number };\n}\n\nexport interface CollapseDurationExpectations {\n  enter: { size: number; whitespace: number; opacity?: number };\n  exit: { opacity?: number; size: number; whitespace: number };\n}\n\n/**\n * Helper to validate the structure of a collapse motion object.\n * Returns validation data that can be used with Jest expectations.\n */\nexport function getCollapseMotionValidation(motion: { enter: AtomMotion[]; exit: AtomMotion[] }) {\n  return {\n    enterCount: motion.enter.length,\n    exitCount: motion.exit.length,\n    hasEnterOpacity: motion.enter.length === 3 && 'opacity' in (motion.enter[2].keyframes[0] || {}),\n    hasExitOpacity: motion.exit.length === 3 && 'opacity' in (motion.exit[0].keyframes[0] || {}),\n    enterStructure: motion.enter.map(atom => ({\n      hasKeyframes: Array.isArray(atom.keyframes),\n      hasDuration: typeof atom.duration === 'number',\n      hasEasing: typeof atom.easing === 'string',\n      hasDelay: typeof atom.delay === 'number',\n    })),\n    exitStructure: motion.exit.map(atom => ({\n      hasKeyframes: Array.isArray(atom.keyframes),\n      hasDuration: typeof atom.duration === 'number',\n      hasEasing: typeof atom.easing === 'string',\n      hasDelay: typeof atom.delay === 'number',\n    })),\n  };\n}\n\n/**\n * Helper to extract timing information from collapse motion atoms.\n */\nexport function getCollapseTimingInfo(\n  motion: { enter: AtomMotion[]; exit: AtomMotion[] },\n  animateOpacity: boolean = true,\n) {\n  const enterDelays = {\n    size: motion.enter[0]?.delay ?? 0,\n    whitespace: motion.enter[1]?.delay ?? 0,\n    opacity: animateOpacity ? motion.enter[2]?.delay ?? 0 : undefined,\n  };\n\n  const exitDelays = animateOpacity\n    ? {\n        opacity: motion.exit[0]?.delay ?? 0,\n        size: motion.exit[1]?.delay ?? 0,\n        whitespace: motion.exit[2]?.delay ?? 0,\n      }\n    : {\n        size: motion.exit[0]?.delay ?? 0,\n        whitespace: motion.exit[1]?.delay ?? 0,\n      };\n\n  return { enter: enterDelays, exit: exitDelays };\n}\n\n/**\n * Helper to extract duration information from collapse motion atoms.\n */\nexport function getCollapseDurationInfo(\n  motion: { enter: AtomMotion[]; exit: AtomMotion[] },\n  animateOpacity: boolean = true,\n) {\n  const enterDurations = {\n    size: motion.enter[0]?.duration ?? 0,\n    whitespace: motion.enter[1]?.duration ?? 0,\n    opacity: animateOpacity ? motion.enter[2]?.duration ?? 0 : undefined,\n  };\n\n  const exitDurations = animateOpacity\n    ? {\n        opacity: motion.exit[0]?.duration ?? 0,\n        size: motion.exit[1]?.duration ?? 0,\n        whitespace: motion.exit[2]?.duration ?? 0,\n      }\n    : {\n        size: motion.exit[0]?.duration ?? 0,\n        whitespace: motion.exit[1]?.duration ?? 0,\n      };\n\n  return { enter: enterDurations, exit: exitDurations };\n}\n\n/**\n * Helper to analyze orientation-specific properties in collapse atoms.\n */\nexport function getCollapseOrientationInfo(\n  motion: { enter: AtomMotion[]; exit: AtomMotion[] },\n  animateOpacity: boolean = true,\n) {\n  const enterSizeAtom = motion.enter[0];\n  const enterWhitespaceAtom = motion.enter[1];\n\n  const exitOffset = animateOpacity ? 1 : 0;\n  const exitSizeAtom = motion.exit[exitOffset];\n  const exitWhitespaceAtom = motion.exit[exitOffset + 1];\n\n  return {\n    enter: {\n      sizeProperties: Object.keys(enterSizeAtom?.keyframes[0] || {}),\n      whitespaceProperties: Object.keys(enterWhitespaceAtom?.keyframes[0] || {}),\n    },\n    exit: {\n      sizeProperties: Object.keys(exitSizeAtom?.keyframes[0] || {}),\n      whitespaceProperties: Object.keys(exitWhitespaceAtom?.keyframes[0] || {}),\n    },\n  };\n}\n\n/**\n * Helper to analyze size atom keyframes for validation.\n */\nexport function getSizeAtomInfo(sizeAtom: AtomMotion, direction: 'enter' | 'exit') {\n  const keyframes = sizeAtom.keyframes;\n  const properties = Object.keys(keyframes[0] || {});\n\n  return {\n    keyframeCount: keyframes.length,\n    properties,\n    hasOffset: direction === 'enter' ? 'offset' in (keyframes[1] || {}) : false,\n    hasFill: 'fill' in sizeAtom,\n    fillValue: sizeAtom.fill,\n    firstFrameValues: keyframes[0] || {},\n    lastFrameValues: keyframes[keyframes.length - 1] || {},\n  };\n}\n\n/**\n * Helper to analyze whitespace atom keyframes for validation.\n */\nexport function getWhitespaceAtomInfo(whitespaceAtom: AtomMotion, direction: 'enter' | 'exit') {\n  const keyframe = whitespaceAtom.keyframes[0] || {};\n\n  return {\n    properties: Object.keys(keyframe),\n    offset: keyframe.offset,\n    expectedOffset: direction === 'enter' ? 0 : 1,\n    hasFill: 'fill' in whitespaceAtom,\n    fillValue: whitespaceAtom.fill,\n    isVertical: 'paddingBlockStart' in keyframe,\n    isHorizontal: 'paddingInlineStart' in keyframe,\n  };\n}\n\n/**\n * Helper to compare opacity handling between two motion objects.\n */\nexport function getOpacityComparisonInfo(\n  withOpacity: { enter: AtomMotion[]; exit: AtomMotion[] },\n  withoutOpacity: { enter: AtomMotion[]; exit: AtomMotion[] },\n) {\n  return {\n    withOpacity: {\n      enterCount: withOpacity.enter.length,\n      exitCount: withOpacity.exit.length,\n      hasEnterOpacity: withOpacity.enter.length === 3,\n      hasExitOpacity: withOpacity.exit.length === 3,\n    },\n    withoutOpacity: {\n      enterCount: withoutOpacity.enter.length,\n      exitCount: withoutOpacity.exit.length,\n      hasEnterOpacity: false,\n      hasExitOpacity: false,\n    },\n  };\n}\n"],"names":["getCollapseMotionValidation","motion","enterCount","enter","length","exitCount","exit","hasEnterOpacity","keyframes","hasExitOpacity","enterStructure","map","atom","hasKeyframes","Array","isArray","hasDuration","duration","hasEasing","easing","hasDelay","delay","exitStructure","getCollapseTimingInfo","animateOpacity","enterDelays","size","whitespace","opacity","undefined","exitDelays","getCollapseDurationInfo","enterDurations","exitDurations","getCollapseOrientationInfo","enterSizeAtom","enterWhitespaceAtom","exitOffset","exitSizeAtom","exitWhitespaceAtom","sizeProperties","Object","keys","whitespaceProperties","getSizeAtomInfo","sizeAtom","direction","properties","keyframeCount","hasOffset","hasFill","fillValue","fill","firstFrameValues","lastFrameValues","getWhitespaceAtomInfo","whitespaceAtom","keyframe","offset","expectedOffset","isVertical","isHorizontal","getOpacityComparisonInfo","withOpacity","withoutOpacity"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["import type { BasePresenceParams, PresenceEasing, PresenceDelay, AnimateOpacity } from '../../types';\n\nexport type CollapseOrientation = 'horizontal' | 'vertical';\n\n/** Common properties shared by all collapse components */\ntype CollapseBaseParams = PresenceEasing &\n  PresenceDelay &\n  AnimateOpacity & {\n    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n    orientation?: CollapseOrientation;\n  };\n\nexport type CollapseParams = BasePresenceParams &\n  AnimateOpacity & {\n    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n    orientation?: CollapseOrientation;\n  };\n\nexport type CollapseDelayedParams = CollapseBaseParams & {\n  /** Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms). */\n  sizeDuration?: number;\n\n  /** Time (ms) for the fade-in. Defaults to the `sizeDuration` param, to sync fade-in with expand. */\n  opacityDuration?: number;\n\n  /** Time (ms) for the size collapse. Defaults to the `sizeDuration` param, for temporal symmetry. */\n  exitSizeDuration?: number;\n\n  /** Time (ms) for the fade-out. 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  delay?: number;\n\n  /** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */\n  exitDelay?: number;\n};\n"],"names":[],"mappings":"AAkBA,WAkBE"}
+{"version":3,"sources":["../src/components/Collapse/collapse-types.ts"],"sourcesContent":["import type { BasePresenceParams, AnimateOpacity } from '../../types';\n\nexport type CollapseOrientation = 'horizontal' | 'vertical';\n\n/**\n * Duration properties for granular timing control in Collapse animations.\n */\nexport type CollapseDurations = {\n  /** Time (ms) for the size animation during enter. Defaults to `duration` for unified timing. */\n  sizeDuration?: number;\n\n  /** Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing. */\n  opacityDuration?: number;\n\n  /** Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing. */\n  exitSizeDuration?: number;\n\n  /** Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing. */\n  exitOpacityDuration?: number;\n};\n\nexport type CollapseParams = BasePresenceParams &\n  AnimateOpacity &\n  CollapseDurations & {\n    /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */\n    orientation?: CollapseOrientation;\n\n    /** The starting size for the expand animation. Defaults to `'0px'`. */\n    fromSize?: string;\n\n    /**\n     * Time (ms) to delay the inner stagger between size and opacity animations.\n     * On enter this delays the opacity after size; on exit this delays the size after opacity.\n     * Defaults to 0.\n     */\n    staggerDelay?: number;\n\n    /**\n     * Time (ms) to delay the inner stagger during exit. Defaults to the `staggerDelay` param for symmetry.\n     */\n    exitStaggerDelay?: number;\n  };\n"],"names":[],"mappings":"AAqBA,WAoBI"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\nexport type { CollapseParams, CollapseDelayedParams } from './collapse-types';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,eAAe,EAAEC,eAAe,EAAEC,cAAc,QAAQ,aAAa"}
+{"version":3,"sources":["../src/components/Collapse/index.ts"],"sourcesContent":["export { Collapse, CollapseDelayed, CollapseRelaxed, CollapseSnappy } from './Collapse';\nexport type { CollapseParams, CollapseDurations } from './collapse-types';\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy"],"mappings":"AAAA,SAASA,QAAQ,EAAEC,eAAe,EAAEC,eAAe,EAAEC,cAAc,QAAQ,aAAa"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseRelaxed,\n  CollapseDelayed,\n  type CollapseParams,\n  type CollapseDelayedParams,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, type FadeParams } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, type ScaleParams } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed, type SlideParams } from './components/Slide';\nexport { Blur, type BlurParams } from './components/Blur';\nexport { Rotate, type RotateParams } from './components/Rotate';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed","Blur","Rotate"],"mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,QAGV,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAyB,oBAAoB;AACnF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,IAAI,QAAyB,oBAAoB;AAC1D,SAASC,MAAM,QAA2B,sBAAsB"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseRelaxed,\n  CollapseDelayed,\n  type CollapseParams,\n  type CollapseDurations,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeRelaxed, type FadeParams } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleRelaxed, type ScaleParams } from './components/Scale';\nexport { Slide, SlideSnappy, SlideRelaxed, type SlideParams } from './components/Slide';\nexport { Blur, type BlurParams } from './components/Blur';\nexport { Rotate, type RotateParams } from './components/Rotate';\n"],"names":["Collapse","CollapseSnappy","CollapseRelaxed","CollapseDelayed","Fade","FadeSnappy","FadeRelaxed","Scale","ScaleSnappy","ScaleRelaxed","Slide","SlideSnappy","SlideRelaxed","Blur","Rotate"],"mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,eAAe,EACfC,eAAe,QAGV,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,WAAW,QAAyB,oBAAoB;AACnF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,KAAK,EAAEC,WAAW,EAAEC,YAAY,QAA0B,qBAAqB;AACxF,SAASC,IAAI,QAAyB,oBAAoB;AAC1D,SAASC,MAAM,QAA2B,sBAAsB"}

package/lib-commonjs/atoms/blur-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface BlurAtomParams extends BaseAtomParams {\n  fromRadius?: string;\n}\n\n/**\n * Generates a motion atom object for a blur-in or blur-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '20px'.\n * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.\n */\nexport const blurAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  fromRadius = '10px',\n}: BlurAtomParams): AtomMotion => {\n  const keyframes = [{ filter: `blur(${fromRadius})` }, { filter: 'blur(0px)' }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["blurAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromRadius","keyframes","filter","reverse"],"mappings":";;;;+BAeaA;;;eAAAA;;;6BAf4B;AAelC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,MAAM,EACJ;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEF,WAAW,CAAC,CAAC;QAAC;QAAG;YAAEE,QAAQ;QAAY;KAAE;IAC9E,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAG;IACF;AACF"}
+{"version":3,"sources":["../src/atoms/blur-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface BlurAtomParams extends BaseAtomParams {\n  fromRadius?: string;\n}\n\n/**\n * Generates a motion atom object for a blur-in or blur-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromRadius - The blur radius value with units (e.g., '20px', '1rem'). Defaults to '20px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with filter blur keyframes and the supplied duration and easing.\n */\nexport const blurAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  fromRadius = '10px',\n}: BlurAtomParams): AtomMotion => {\n  const keyframes = [{ filter: `blur(${fromRadius})` }, { filter: 'blur(0px)' }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["blurAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromRadius","keyframes","filter","reverse"],"mappings":";;;;+BAgBaA;;;eAAAA;;;6BAhB4B;AAgBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,MAAM,EACJ;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEF,WAAW,CAAC,CAAC;QAAC;QAAG;YAAEE,QAAQ;QAAY;KAAE;IAC9E,IAAIR,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAG;IACF;AACF"}

package/lib-commonjs/atoms/rotate-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n  axis?: Axis3D;\n  angle?: number;\n  exitAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n  return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  axis = 'y',\n  angle = -90,\n  exitAngle = -angle,\n}: RotateAtomParams): AtomMotion => {\n  let fromAngle = angle;\n  let toAngle = 0;\n\n  if (direction === 'exit') {\n    fromAngle = 0;\n    toAngle = exitAngle;\n  }\n  const keyframes = [{ rotate: createRotateValue(axis, fromAngle) }, { rotate: createRotateValue(axis, toAngle) }];\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["rotateAtom","createRotateValue","axis","angle","toLowerCase","direction","duration","easing","motionTokens","curveLinear","delay","exitAngle","fromAngle","toAngle","keyframes","rotate"],"mappings":";;;;+BA0BaA;;;eAAAA;;;6BA1B4B;AAYzC,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAYO,MAAMH,aAAa,CAAC,EACzBK,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXQ,YAAY,CAACR,KAAK,EACD;IACjB,IAAIS,YAAYT;IAChB,IAAIU,UAAU;IAEd,IAAIR,cAAc,QAAQ;QACxBO,YAAY;QACZC,UAAUF;IACZ;IACA,MAAMG,YAAY;QAAC;YAAEC,QAAQd,kBAAkBC,MAAMU;QAAW;QAAG;YAAEG,QAAQd,kBAAkBC,MAAMW;QAAS;KAAE;IAEhH,OAAO;QACLC;QACAR;QACAC;QACAG;IACF;AACF"}
+{"version":3,"sources":["../src/atoms/rotate-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport type { RotateParams } from '../components/Rotate/rotate-types';\nimport { BaseAtomParams } from '../types';\n\ntype Axis3D = NonNullable<RotateParams['axis']>;\n\ninterface RotateAtomParams extends BaseAtomParams {\n  axis?: Axis3D;\n  angle?: number;\n  exitAngle?: number;\n}\n\nconst createRotateValue = (axis: Axis3D, angle: number): string => {\n  return `${axis.toLowerCase()} ${angle}deg`;\n};\n\n/**\n * Generates a motion atom object for a rotation around a single axis.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.\n * @param angle - The starting rotation angle in degrees. Defaults to -90.\n * @param exitAngle - The ending rotation angle in degrees. Defaults to the negation of `angle`.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with rotate keyframes and the supplied duration and easing.\n */\nexport const rotateAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  axis = 'y',\n  angle = -90,\n  exitAngle = -angle,\n}: RotateAtomParams): AtomMotion => {\n  let fromAngle = angle;\n  let toAngle = 0;\n\n  if (direction === 'exit') {\n    fromAngle = 0;\n    toAngle = exitAngle;\n  }\n  const keyframes = [{ rotate: createRotateValue(axis, fromAngle) }, { rotate: createRotateValue(axis, toAngle) }];\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["rotateAtom","createRotateValue","axis","angle","toLowerCase","direction","duration","easing","motionTokens","curveLinear","delay","exitAngle","fromAngle","toAngle","keyframes","rotate"],"mappings":";;;;+BA2BaA;;;eAAAA;;;6BA3B4B;AAYzC,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAaO,MAAMH,aAAa,CAAC,EACzBK,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVC,QAAQ,CAAC,EAAE,EACXQ,YAAY,CAACR,KAAK,EACD;IACjB,IAAIS,YAAYT;IAChB,IAAIU,UAAU;IAEd,IAAIR,cAAc,QAAQ;QACxBO,YAAY;QACZC,UAAUF;IACZ;IACA,MAAMG,YAAY;QAAC;YAAEC,QAAQd,kBAAkBC,MAAMU;QAAW;QAAG;YAAEG,QAAQd,kBAAkBC,MAAMW;QAAS;KAAE;IAEhH,OAAO;QACLC;QACAR;QACAC;QACAG;IACF;AACF"}

package/lib-commonjs/atoms/scale-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface ScaleAtomParams extends BaseAtomParams {\n  fromScale?: number;\n  toScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  fromScale = 0.9,\n  toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: fromScale }, { scale: toScale }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["scaleAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromScale","toScale","keyframes","scale","reverse"],"mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB4B;AAiBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}
+{"version":3,"sources":["../src/atoms/scale-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface ScaleAtomParams extends BaseAtomParams {\n  fromScale?: number;\n  toScale?: number;\n}\n\n/**\n * Generates a motion atom object for a scale in or scale out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromScale - The starting scale value. Defaults to 0.9.\n * @param toScale - The ending scale value. Defaults to 1.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with scale keyframes and the supplied duration and easing.\n */\nexport const scaleAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  fromScale = 0.9,\n  toScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n  const keyframes = [{ scale: fromScale }, { scale: toScale }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["scaleAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromScale","toScale","keyframes","scale","reverse"],"mappings":";;;;+BAkBaA;;;eAAAA;;;6BAlB4B;AAkBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,YAAY,GAAG,EACfC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAU;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC5D,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}

package/lib-commonjs/atoms/slide-atom.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface SlideAtomParams extends BaseAtomParams {\n  fromX?: string;\n  fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  fromX = '0px',\n  fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n  const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromX","fromY","keyframes","translate","reverse"],"mappings":";;;;+BAiBaA;;;eAAAA;;;6BAjB4B;AAiBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGH,MAAM,CAAC,EAAEC,OAAO;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIT,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}
+{"version":3,"sources":["../src/atoms/slide-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface SlideAtomParams extends BaseAtomParams {\n  fromX?: string;\n  fromY?: string;\n}\n\n/**\n * Generates a motion atom object for a slide-in or slide-out.\n * @param direction - The functional direction of the motion: 'enter' or 'exit'.\n * @param duration - The duration of the motion in milliseconds.\n * @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.\n * @param fromX - The starting X translate value with units (e.g., '0px', '100%'). Defaults to '0px'.\n * @param fromY - The starting Y translate value with units (e.g., '-20px', '100%'). Defaults to '0px'.\n * @param delay - Time (ms) to delay the animation. Defaults to 0.\n * @returns A motion atom object with translate keyframes and the supplied duration and easing.\n */\nexport const slideAtom = ({\n  direction,\n  duration,\n  easing = motionTokens.curveLinear,\n  delay = 0,\n  fromX = '0px',\n  fromY = '20px',\n}: SlideAtomParams): AtomMotion => {\n  const keyframes = [{ translate: `${fromX} ${fromY}` }, { translate: '0px 0px' }];\n  if (direction === 'exit') {\n    keyframes.reverse();\n  }\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n};\n"],"names":["slideAtom","direction","duration","easing","motionTokens","curveLinear","delay","fromX","fromY","keyframes","translate","reverse"],"mappings":";;;;+BAkBaA;;;eAAAA;;;6BAlB4B;AAkBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,QAAQ,KAAK,EACbC,QAAQ,MAAM,EACE;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGH,MAAM,CAAC,EAAEC,OAAO;QAAC;QAAG;YAAEE,WAAW;QAAU;KAAE;IAChF,IAAIT,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}

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

@@ -25,46 +25,71 @@ _export(exports, {
 const _reactmotion = require("@fluentui/react-motion");
 const _collapseatoms = require("./collapse-atoms");
 const _fadeatom = require("../../atoms/fade-atom");
-/** Internal helper to create collapse atoms with shared logic */ function createCollapseAtoms({ element, orientation, animateOpacity, // Enter params
-sizeDuration, opacityDuration = sizeDuration, easing, delay, // Exit params
-exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay }) {
+/**
+ * Define a presence motion for collapse/expand
+ *
+ * @param element - The element to apply the collapse motion to
+ * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)
+ * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value
+ * @param delay - Time (ms) to delay the entire enter transition. Defaults to 0
+ * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry
+ * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
+ * @param exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry
+ * @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0
+ * @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry
+ * @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing
+ * @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing
+ * @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing
+ * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing
+ * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
+ * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
+ * @param fromSize - The starting size for the expand animation. Defaults to `'0px'`
+ */ const collapsePresenceFn = ({ element, // Primary duration controls (simple API)
+duration = _reactmotion.motionTokens.durationNormal, exitDuration = duration, // Granular duration controls with smart defaults (advanced API)
+sizeDuration = duration, opacityDuration = sizeDuration, exitSizeDuration = exitDuration, exitOpacityDuration = exitSizeDuration, // Other timing controls
+easing = _reactmotion.motionTokens.curveEasyEaseMax, delay = 0, exitEasing = easing, exitDelay = delay, staggerDelay = 0, exitStaggerDelay = staggerDelay, // Animation controls
+animateOpacity = true, orientation = 'vertical', fromSize = '0px' })=>{
     // ----- ENTER -----
     // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.
+    // For enter: size expands first, then opacity fades in after staggerDelay
     const enterAtoms = [
+        // Apply global delay to size atom - size expansion starts first
         (0, _collapseatoms.sizeEnterAtom)({
             orientation,
             duration: sizeDuration,
             easing,
-            element
+            element,
+            fromSize,
+            delay
         }),
         (0, _collapseatoms.whitespaceAtom)({
             direction: 'enter',
             orientation,
             duration: sizeDuration,
-            easing
+            easing,
+            delay
         })
     ];
     // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.
     if (animateOpacity) {
-        enterAtoms.push({
-            ...(0, _fadeatom.fadeAtom)({
-                direction: 'enter',
-                duration: opacityDuration,
-                easing
-            }),
-            delay,
-            fill: 'both'
-        });
+        enterAtoms.push((0, _fadeatom.fadeAtom)({
+            direction: 'enter',
+            duration: opacityDuration,
+            easing,
+            delay: delay + staggerDelay
+        }));
     }
     // ----- EXIT -----
     // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.
+    // For exit: opacity fades out first, then size collapses after exitStaggerDelay
     const exitAtoms = [];
     // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.
     if (animateOpacity) {
         exitAtoms.push((0, _fadeatom.fadeAtom)({
             direction: 'exit',
             duration: exitOpacityDuration,
-            easing: exitEasing
+            easing: exitEasing,
+            delay: exitDelay
         }));
     }
     exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
@@ -72,72 +97,19 @@ exitSizeDuration, exitOpacityDuration = exitSizeDuration, exitEasing, exitDelay
         duration: exitSizeDuration,
         easing: exitEasing,
         element,
-        delay: exitDelay
+        delay: exitDelay + exitStaggerDelay,
+        fromSize
     }), (0, _collapseatoms.whitespaceAtom)({
         direction: 'exit',
         orientation,
         duration: exitSizeDuration,
         easing: exitEasing,
-        delay: exitDelay
+        delay: exitDelay + exitStaggerDelay
     }));
     return {
         enter: enterAtoms,
         exit: exitAtoms
     };
-}
-/**
- * Define a presence motion for collapse/expand
- *
- * @param element - The element to apply the collapse motion to
- * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)
- * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value
- * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry
- * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
- * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
- * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
- */ const collapsePresenceFn = ({ element, duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = duration, exitEasing = easing, animateOpacity = true, orientation = 'vertical' })=>{
-    return createCollapseAtoms({
-        element,
-        orientation,
-        animateOpacity,
-        sizeDuration: duration,
-        opacityDuration: duration,
-        easing,
-        exitSizeDuration: exitDuration,
-        exitOpacityDuration: exitDuration,
-        exitEasing,
-        delay: 0,
-        exitDelay: 0
-    });
-};
-/**
- * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay
- *
- * @param element - The element to apply the collapse motion to
- * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)
- * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)
- * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value
- * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)
- * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry
- * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry
- * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry
- * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)
- * @param animateOpacity - Whether to animate the opacity. Defaults to `true`
- * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height
- */ const collapseDelayedPresenceFn = ({ element, sizeDuration = _reactmotion.motionTokens.durationNormal, opacityDuration = _reactmotion.motionTokens.durationSlower, easing = _reactmotion.motionTokens.curveEasyEase, delay = _reactmotion.motionTokens.durationNormal, exitSizeDuration = sizeDuration, exitOpacityDuration = opacityDuration, exitEasing = easing, exitDelay = _reactmotion.motionTokens.durationSlower, animateOpacity = true, orientation = 'vertical' })=>{
-    return createCollapseAtoms({
-        element,
-        orientation,
-        animateOpacity,
-        sizeDuration,
-        opacityDuration,
-        easing,
-        delay,
-        exitSizeDuration,
-        exitOpacityDuration,
-        exitEasing,
-        exitDelay
-    });
 };
 const Collapse = (0, _reactmotion.createPresenceComponent)(collapsePresenceFn);
 const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
@@ -146,4 +118,16 @@ const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse
 const CollapseRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
     duration: _reactmotion.motionTokens.durationSlower
 });
-const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(collapseDelayedPresenceFn);
+const CollapseDelayed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
+    // Enter timing per motion design spec
+    sizeDuration: _reactmotion.motionTokens.durationNormal,
+    opacityDuration: _reactmotion.motionTokens.durationSlower,
+    staggerDelay: _reactmotion.motionTokens.durationNormal,
+    // Exit timing per motion design spec
+    exitSizeDuration: _reactmotion.motionTokens.durationNormal,
+    exitOpacityDuration: _reactmotion.motionTokens.durationSlower,
+    exitStaggerDelay: _reactmotion.motionTokens.durationSlower,
+    // Easing per motion design spec
+    easing: _reactmotion.motionTokens.curveEasyEase,
+    exitEasing: _reactmotion.motionTokens.curveEasyEase
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n  AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseDelayedParams, CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/** Internal helper to create collapse atoms with shared logic */\nfunction createCollapseAtoms({\n  element,\n  orientation,\n  animateOpacity,\n\n  // Enter params\n  sizeDuration,\n  opacityDuration = sizeDuration,\n  easing,\n  delay,\n\n  // Exit params\n  exitSizeDuration,\n  exitOpacityDuration = exitSizeDuration,\n  exitEasing,\n  exitDelay,\n}: {\n  element: HTMLElement;\n} & Required<CollapseDelayedParams>) {\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({ orientation, duration: sizeDuration, easing, element }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push({\n      ...fadeAtom({ direction: 'enter', duration: opacityDuration, easing }),\n      delay,\n      fill: 'both',\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(fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing }));\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({ orientation, duration: exitSizeDuration, easing: exitEasing, element, delay: exitDelay }),\n    whitespaceAtom({\n      direction: 'exit',\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/**\n * Define a presence motion for collapse/expand\n *\n * @param element - The element to apply the collapse motion to\n * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value\n * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  duration = motionTokens.durationNormal,\n  easing = motionTokens.curveEasyEaseMax,\n  exitDuration = duration,\n  exitEasing = easing,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration: duration,\n    opacityDuration: duration,\n    easing,\n    exitSizeDuration: exitDuration,\n    exitOpacityDuration: exitDuration,\n    exitEasing,\n    delay: 0,\n    exitDelay: 0,\n  });\n};\n\n/**\n * Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay\n *\n * @param element - The element to apply the collapse motion to\n * @param sizeDuration - Time (ms) for the size expand. Defaults to the `durationNormal` value (200 ms)\n * @param opacityDuration - Time (ms) for the fade-in. Defaults to the `durationSlower` value (400 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEase` value\n * @param delay - Time (ms) between the size expand start and the fade-in start. Defaults to the `durationNormal` value (200 ms)\n * @param exitSizeDuration - Time (ms) for the size collapse. Defaults to the `sizeDuration` param for temporal symmetry\n * @param exitOpacityDuration - Time (ms) for the fade-out. Defaults to the `opacityDuration` param for temporal symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param exitDelay - Time (ms) between the fade-out start and the size collapse start. Defaults to the `durationSlower` value (400 ms)\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n */\nconst collapseDelayedPresenceFn: PresenceMotionFn<CollapseDelayedParams> = ({\n  element,\n  sizeDuration = motionTokens.durationNormal,\n  opacityDuration = motionTokens.durationSlower,\n  easing = motionTokens.curveEasyEase,\n  delay = motionTokens.durationNormal,\n  exitSizeDuration = sizeDuration,\n  exitOpacityDuration = opacityDuration,\n  exitEasing = easing,\n  exitDelay = motionTokens.durationSlower,\n  animateOpacity = true,\n  orientation = 'vertical',\n}) => {\n  return createCollapseAtoms({\n    element,\n    orientation,\n    animateOpacity,\n    sizeDuration,\n    opacityDuration,\n    easing,\n    delay,\n    exitSizeDuration,\n    exitOpacityDuration,\n    exitEasing,\n    exitDelay,\n  });\n};\n\n/** A React component that applies collapse/expand transitions to its children. */\nexport const Collapse = createPresenceComponent(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponent(collapseDelayedPresenceFn);\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","createCollapseAtoms","element","orientation","animateOpacity","sizeDuration","opacityDuration","easing","delay","exitSizeDuration","exitOpacityDuration","exitEasing","exitDelay","enterAtoms","sizeEnterAtom","duration","whitespaceAtom","direction","push","fadeAtom","fill","exitAtoms","sizeExitAtom","enter","exit","collapsePresenceFn","motionTokens","durationNormal","curveEasyEaseMax","exitDuration","collapseDelayedPresenceFn","durationSlower","curveEasyEase","createPresenceComponent","createPresenceComponentVariant","durationFast"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Collapse/Collapse.ts"],"sourcesContent":["import {\n  motionTokens,\n  createPresenceComponent,\n  PresenceMotionFn,\n  createPresenceComponentVariant,\n  AtomMotion,\n} from '@fluentui/react-motion';\nimport type { CollapseParams } from './collapse-types';\nimport { sizeEnterAtom, sizeExitAtom, whitespaceAtom } from './collapse-atoms';\nimport { fadeAtom } from '../../atoms/fade-atom';\n\n/**\n * Define a presence motion for collapse/expand\n *\n * @param element - The element to apply the collapse motion to\n * @param duration - Time (ms) for the enter transition (expand). Defaults to the `durationNormal` value (200 ms)\n * @param easing - Easing curve for the enter transition. Defaults to the `curveEasyEaseMax` value\n * @param delay - Time (ms) to delay the entire enter transition. Defaults to 0\n * @param exitDuration - Time (ms) for the exit transition (collapse). Defaults to the `duration` param for symmetry\n * @param exitEasing - Easing curve for the exit transition. Defaults to the `easing` param for symmetry\n * @param exitDelay - Time (ms) to delay the entire exit transition. Defaults to the `delay` param for symmetry\n * @param staggerDelay - Time (ms) offset between the size and opacity animations. Defaults to 0\n * @param exitStaggerDelay - Time (ms) offset between the size and opacity animations on exit. Defaults to the `staggerDelay` param for symmetry\n * @param sizeDuration - Time (ms) for the size animation during enter. Defaults to `duration` for unified timing\n * @param opacityDuration - Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing\n * @param exitSizeDuration - Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing\n * @param exitOpacityDuration - Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`\n * @param orientation - The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height\n * @param fromSize - The starting size for the expand animation. Defaults to `'0px'`\n */\nconst collapsePresenceFn: PresenceMotionFn<CollapseParams> = ({\n  element,\n  // Primary duration controls (simple API)\n  duration = motionTokens.durationNormal,\n  exitDuration = duration,\n\n  // Granular duration controls with smart defaults (advanced API)\n  sizeDuration = duration,\n  opacityDuration = sizeDuration,\n  exitSizeDuration = exitDuration,\n  exitOpacityDuration = exitSizeDuration,\n\n  // Other timing controls\n  easing = motionTokens.curveEasyEaseMax,\n  delay = 0,\n  exitEasing = easing,\n  exitDelay = delay,\n  staggerDelay = 0,\n  exitStaggerDelay = staggerDelay,\n\n  // Animation controls\n  animateOpacity = true,\n  orientation = 'vertical',\n  fromSize = '0px',\n}) => {\n  // ----- ENTER -----\n  // The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity.\n  // For enter: size expands first, then opacity fades in after staggerDelay\n  const enterAtoms: AtomMotion[] = [\n    // Apply global delay to size atom - size expansion starts first\n    sizeEnterAtom({ orientation, duration: sizeDuration, easing, element, fromSize, delay }),\n    whitespaceAtom({ direction: 'enter', orientation, duration: sizeDuration, easing, delay }),\n  ];\n  // Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    enterAtoms.push(fadeAtom({ direction: 'enter', duration: opacityDuration, easing, delay: delay + staggerDelay }));\n  }\n\n  // ----- EXIT -----\n  // The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace.\n  // For exit: opacity fades out first, then size collapses after exitStaggerDelay\n  const exitAtoms: AtomMotion[] = [];\n  // Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected.\n  if (animateOpacity) {\n    exitAtoms.push(\n      fadeAtom({ direction: 'exit', duration: exitOpacityDuration, easing: exitEasing, delay: exitDelay }),\n    );\n  }\n\n  exitAtoms.push(\n    sizeExitAtom({\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      element,\n      delay: exitDelay + exitStaggerDelay,\n      fromSize,\n    }),\n    whitespaceAtom({\n      direction: 'exit',\n      orientation,\n      duration: exitSizeDuration,\n      easing: exitEasing,\n      delay: exitDelay + exitStaggerDelay, // Size/whitespace collapse after opacity finishes fading out\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(collapsePresenceFn);\n\nexport const CollapseSnappy = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationFast,\n});\n\nexport const CollapseRelaxed = createPresenceComponentVariant(Collapse, {\n  duration: motionTokens.durationSlower,\n});\n\n/** A React component that applies collapse/expand transitions with delayed fade to its children. */\nexport const CollapseDelayed = createPresenceComponentVariant(Collapse, {\n  // Enter timing per motion design spec\n  sizeDuration: motionTokens.durationNormal, // 200ms\n  opacityDuration: motionTokens.durationSlower, // 400ms\n  staggerDelay: motionTokens.durationNormal, // 200ms\n\n  // Exit timing per motion design spec\n  exitSizeDuration: motionTokens.durationNormal, // 200ms\n  exitOpacityDuration: motionTokens.durationSlower, // 400ms\n  exitStaggerDelay: motionTokens.durationSlower, // 400ms\n\n  // Easing per motion design spec\n  easing: motionTokens.curveEasyEase,\n  exitEasing: motionTokens.curveEasyEase,\n});\n"],"names":["Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","collapsePresenceFn","element","duration","motionTokens","durationNormal","exitDuration","sizeDuration","opacityDuration","exitSizeDuration","exitOpacityDuration","easing","curveEasyEaseMax","delay","exitEasing","exitDelay","staggerDelay","exitStaggerDelay","animateOpacity","orientation","fromSize","enterAtoms","sizeEnterAtom","whitespaceAtom","direction","push","fadeAtom","exitAtoms","sizeExitAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlower","curveEasyEase"],"mappings":";;;;;;;;;;;IAyGaA,QAAQ;eAARA;;IAWAC,eAAe;eAAfA;;IALAC,eAAe;eAAfA;;IAJAC,cAAc;eAAdA;;;6BArGN;+BAEqD;0BACnC;AAEzB;;;;;;;;;;;;;;;;;;;CAmBC,GACD,MAAMC,qBAAuD,CAAC,EAC5DC,OAAO,EACP,yCAAyC;AACzCC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,eAAeH,QAAQ,EAEvB,gEAAgE;AAChEI,eAAeJ,QAAQ,EACvBK,kBAAkBD,YAAY,EAC9BE,mBAAmBH,YAAY,EAC/BI,sBAAsBD,gBAAgB,EAEtC,wBAAwB;AACxBE,SAASP,yBAAY,CAACQ,gBAAgB,EACtCC,QAAQ,CAAC,EACTC,aAAaH,MAAM,EACnBI,YAAYF,KAAK,EACjBG,eAAe,CAAC,EAChBC,mBAAmBD,YAAY,EAE/B,qBAAqB;AACrBE,iBAAiB,IAAI,EACrBC,cAAc,UAAU,EACxBC,WAAW,KAAK,EACjB;IACC,oBAAoB;IACpB,0FAA0F;IAC1F,0EAA0E;IAC1E,MAAMC,aAA2B;QAC/B,gEAAgE;QAChEC,IAAAA,4BAAa,EAAC;YAAEH;YAAahB,UAAUI;YAAcI;YAAQT;YAASkB;YAAUP;QAAM;QACtFU,IAAAA,6BAAc,EAAC;YAAEC,WAAW;YAASL;YAAahB,UAAUI;YAAcI;YAAQE;QAAM;KACzF;IACD,+EAA+E;IAC/E,IAAIK,gBAAgB;QAClBG,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAASrB,UAAUK;YAAiBG;YAAQE,OAAOA,QAAQG;QAAa;IAChH;IAEA,mBAAmB;IACnB,yFAAyF;IACzF,gFAAgF;IAChF,MAAMW,YAA0B,EAAE;IAClC,gFAAgF;IAChF,IAAIT,gBAAgB;QAClBS,UAAUF,IAAI,CACZC,IAAAA,kBAAQ,EAAC;YAAEF,WAAW;YAAQrB,UAAUO;YAAqBC,QAAQG;YAAYD,OAAOE;QAAU;IAEtG;IAEAY,UAAUF,IAAI,CACZG,IAAAA,2BAAY,EAAC;QACXT;QACAhB,UAAUM;QACVE,QAAQG;QACRZ;QACAW,OAAOE,YAAYE;QACnBG;IACF,IACAG,IAAAA,6BAAc,EAAC;QACbC,WAAW;QACXL;QACAhB,UAAUM;QACVE,QAAQG;QACRD,OAAOE,YAAYE;IACrB;IAGF,OAAO;QACLY,OAAOR;QACPS,MAAMH;IACR;AACF;AAGO,MAAM9B,WAAWkC,IAAAA,oCAAuB,EAAC9B;AAEzC,MAAMD,iBAAiBgC,IAAAA,2CAA8B,EAACnC,UAAU;IACrEM,UAAUC,yBAAY,CAAC6B,YAAY;AACrC;AAEO,MAAMlC,kBAAkBiC,IAAAA,2CAA8B,EAACnC,UAAU;IACtEM,UAAUC,yBAAY,CAAC8B,cAAc;AACvC;AAGO,MAAMpC,kBAAkBkC,IAAAA,2CAA8B,EAACnC,UAAU;IACtE,sCAAsC;IACtCU,cAAcH,yBAAY,CAACC,cAAc;IACzCG,iBAAiBJ,yBAAY,CAAC8B,cAAc;IAC5ClB,cAAcZ,yBAAY,CAACC,cAAc;IAEzC,qCAAqC;IACrCI,kBAAkBL,yBAAY,CAACC,cAAc;IAC7CK,qBAAqBN,yBAAY,CAAC8B,cAAc;IAChDjB,kBAAkBb,yBAAY,CAAC8B,cAAc;IAE7C,gCAAgC;IAChCvB,QAAQP,yBAAY,CAAC+B,aAAa;IAClCrB,YAAYV,yBAAY,CAAC+B,aAAa;AACxC"}

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

@@ -31,7 +31,7 @@ const sizeValuesForOrientation = (orientation, element)=>{
         toSize
     };
 };
-const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0' })=>{
+const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0', delay = 0 })=>{
     const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
     return {
         keyframes: [
@@ -50,7 +50,9 @@ const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0'
             }
         ],
         duration,
-        easing
+        easing,
+        delay,
+        fill: 'both'
     };
 };
 const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
@@ -68,8 +70,8 @@ const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromS
         ],
         duration,
         easing,
-        fill: 'both',
-        delay
+        delay,
+        fill: 'both'
     };
 };
 // ----- WHITESPACE -----
@@ -105,14 +107,11 @@ const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })
             offset
         }
     ];
-    const atom = {
+    return {
         keyframes,
         duration,
         easing,
-        delay
+        delay,
+        fill: 'both'
     };
-    if (direction === 'exit') {
-        atom.fill = 'forwards';
-    }
-    return atom;
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection } from '@fluentui/react-motion';\nimport { 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\ninterface SizeEnterAtomParams {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  fromSize?: string;\n}\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n}: SizeEnterAtomParams): 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\ninterface SizeExitAtomParams extends SizeEnterAtomParams {\n  delay?: number;\n}\n\nexport const sizeExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  delay = 0,\n  fromSize = '0',\n}: SizeExitAtomParams): 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 includes padding and margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n  // horizontal whitespace collapse\n  if (orientation === 'horizontal') {\n    return {\n      paddingStart: 'paddingInlineStart',\n      paddingEnd: 'paddingInlineEnd',\n      marginStart: 'marginInlineStart',\n      marginEnd: 'marginInlineEnd',\n    };\n  }\n  // vertical whitespace collapse\n  return {\n    paddingStart: 'paddingBlockStart',\n    paddingEnd: 'paddingBlockEnd',\n    marginStart: 'marginBlockStart',\n    marginEnd: 'marginBlockEnd',\n  };\n};\n\ninterface WhitespaceAtomParams {\n  direction: PresenceDirection;\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  delay?: number;\n}\n\n/**\n * A collapse animates an element's height to zero,\n but the zero height does not eliminate padding or margin in the box model.\n So here we generate keyframes to animate those whitespace properties to zero.\n */\nexport const whitespaceAtom = ({\n  direction,\n  orientation,\n  duration,\n  easing,\n  delay = 0,\n}: WhitespaceAtomParams): AtomMotion => {\n  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n  // The keyframe with zero whitespace is at the start for enter and at the end for exit.\n  const offset = direction === 'enter' ? 0 : 1;\n  const keyframes = [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset }];\n\n  const atom: AtomMotion = {\n    keyframes,\n    duration,\n    easing,\n    delay,\n  };\n  if (direction === 'exit') {\n    atom.fill = 'forwards';\n  }\n  return atom;\n};\n"],"names":["sizeEnterAtom","sizeExitAtom","whitespaceAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","keyframes","offset","delay","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","direction","atom"],"mappings":";;;;;;;;;;;IAqBaA,aAAa;eAAbA;;IAwBAC,YAAY;eAAZA;;IAyDAC,cAAc;eAAdA;;;AAnGb,mBAAmB;AAEnB,MAAMC,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,GAAGH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAUO,MAAMX,gBAAgB,CAAC,EAC5BI,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPS,WAAW,GAAG,EACM;IACpB,MAAM,EAAER,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLU,WAAW;YACT;gBAAE,CAACT,SAAS,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQK,QAAQ;gBAAQ,CAACT,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDK;QACAC;IACF;AACF;AAMO,MAAMZ,eAAe,CAAC,EAC3BG,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPY,QAAQ,CAAC,EACTH,WAAW,GAAG,EACK;IACnB,MAAM,EAAER,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLU,WAAW;YACT;gBAAE,CAACT,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;SAClD;QACDK;QACAC;QACAK,MAAM;QACND;IACF;AACF;AAEA,yBAAyB;AAEzB,oDAAoD;AACpD,MAAME,iCAAiC,CAACf;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLgB,cAAc;YACdC,YAAY;YACZC,aAAa;YACbC,WAAW;QACb;IACF;IACA,+BAA+B;IAC/B,OAAO;QACLH,cAAc;QACdC,YAAY;QACZC,aAAa;QACbC,WAAW;IACb;AACF;AAeO,MAAMrB,iBAAiB,CAAC,EAC7BsB,SAAS,EACTpB,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNI,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEG,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+Bf;IAC5F,uFAAuF;IACvF,MAAMY,SAASQ,cAAc,UAAU,IAAI;IAC3C,MAAMT,YAAY;QAAC;YAAE,CAACK,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKP;QAAO;KAAE;IAE5G,MAAMS,OAAmB;QACvBV;QACAH;QACAC;QACAI;IACF;IACA,IAAIO,cAAc,QAAQ;QACxBC,KAAKP,IAAI,GAAG;IACd;IACA,OAAOO;AACT"}
+{"version":3,"sources":["../src/components/Collapse/collapse-atoms.ts"],"sourcesContent":["import { AtomMotion, PresenceDirection } from '@fluentui/react-motion';\nimport { 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\ninterface SizeEnterAtomParams {\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  element: HTMLElement;\n  fromSize?: string;\n  delay?: number;\n}\n\nexport const sizeEnterAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  fromSize = '0',\n  delay = 0,\n}: SizeEnterAtomParams): 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    delay,\n    fill: 'both',\n  };\n};\n\ninterface SizeExitAtomParams extends SizeEnterAtomParams {\n  delay?: number;\n}\n\nexport const sizeExitAtom = ({\n  orientation,\n  duration,\n  easing,\n  element,\n  delay = 0,\n  fromSize = '0',\n}: SizeExitAtomParams): 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    delay,\n    fill: 'both',\n  };\n};\n\n// ----- WHITESPACE -----\n\n// Whitespace animation includes padding and margin.\nconst whitespaceValuesForOrientation = (orientation: CollapseOrientation) => {\n  // horizontal whitespace collapse\n  if (orientation === 'horizontal') {\n    return {\n      paddingStart: 'paddingInlineStart',\n      paddingEnd: 'paddingInlineEnd',\n      marginStart: 'marginInlineStart',\n      marginEnd: 'marginInlineEnd',\n    };\n  }\n  // vertical whitespace collapse\n  return {\n    paddingStart: 'paddingBlockStart',\n    paddingEnd: 'paddingBlockEnd',\n    marginStart: 'marginBlockStart',\n    marginEnd: 'marginBlockEnd',\n  };\n};\n\ninterface WhitespaceAtomParams {\n  direction: PresenceDirection;\n  orientation: CollapseOrientation;\n  duration: number;\n  easing: string;\n  delay?: number;\n}\n\n/**\n * A collapse animates an element's height to zero,\n but the zero height does not eliminate padding or margin in the box model.\n So here we generate keyframes to animate those whitespace properties to zero.\n */\nexport const whitespaceAtom = ({\n  direction,\n  orientation,\n  duration,\n  easing,\n  delay = 0,\n}: WhitespaceAtomParams): AtomMotion => {\n  const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);\n  // The keyframe with zero whitespace is at the start for enter and at the end for exit.\n  const offset = direction === 'enter' ? 0 : 1;\n  const keyframes = [{ [paddingStart]: '0', [paddingEnd]: '0', [marginStart]: '0', [marginEnd]: '0', offset }];\n\n  return {\n    keyframes,\n    duration,\n    easing,\n    delay,\n    fill: 'both',\n  };\n};\n"],"names":["sizeEnterAtom","sizeExitAtom","whitespaceAtom","sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","duration","easing","fromSize","delay","keyframes","offset","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","direction"],"mappings":";;;;;;;;;;;IAsBaA,aAAa;eAAbA;;IA2BAC,YAAY;eAAZA;;IAyDAC,cAAc;eAAdA;;;AAvGb,mBAAmB;AAEnB,MAAMC,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,GAAGH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAWO,MAAMX,gBAAgB,CAAC,EAC5BI,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPS,WAAW,GAAG,EACdC,QAAQ,CAAC,EACW;IACpB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQM,QAAQ;gBAAQ,CAACV,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDK;QACAC;QACAE;QACAG,MAAM;IACR;AACF;AAMO,MAAMjB,eAAe,CAAC,EAC3BG,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNR,OAAO,EACPU,QAAQ,CAAC,EACTD,WAAW,GAAG,EACK;IACnB,MAAM,EAAER,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLW,WAAW;YACT;gBAAE,CAACV,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAEQ;gBAAU,CAACP,aAAa,EAAE;YAAS;SAClD;QACDK;QACAC;QACAE;QACAG,MAAM;IACR;AACF;AAEA,yBAAyB;AAEzB,oDAAoD;AACpD,MAAMC,iCAAiC,CAACf;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLgB,cAAc;YACdC,YAAY;YACZC,aAAa;YACbC,WAAW;QACb;IACF;IACA,+BAA+B;IAC/B,OAAO;QACLH,cAAc;QACdC,YAAY;QACZC,aAAa;QACbC,WAAW;IACb;AACF;AAeO,MAAMrB,iBAAiB,CAAC,EAC7BsB,SAAS,EACTpB,WAAW,EACXQ,QAAQ,EACRC,MAAM,EACNE,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEK,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+Bf;IAC5F,uFAAuF;IACvF,MAAMa,SAASO,cAAc,UAAU,IAAI;IAC3C,MAAMR,YAAY;QAAC;YAAE,CAACI,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKN;QAAO;KAAE;IAE5G,OAAO;QACLD;QACAJ;QACAC;QACAE;QACAG,MAAM;IACR;AACF"}