@fluentui/react-motion-components-preview 0.0.0-nightly-20241014-0408.1 → 0.0.0-nightly-20241015-0407.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +7 -7
  2. package/dist/index.d.ts +4 -0
  3. package/lib/components/Collapse/Collapse.js +18 -14
  4. package/lib/components/Collapse/Collapse.js.map +1 -1
  5. package/lib-commonjs/components/Collapse/Collapse.js +18 -14
  6. package/lib-commonjs/components/Collapse/Collapse.js.map +1 -1
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,20 +1,20 @@
1
1
  # Change Log - @fluentui/react-motion-components-preview
2
2
 
3
- This log was last generated on Mon, 14 Oct 2024 04:13:31 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 15 Oct 2024 04:12:17 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20241014-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241014-0408.1)
7
+ ## [0.0.0-nightly-20241015-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241015-0407.1)
8
8
 
9
- Mon, 14 Oct 2024 04:13:31 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241014-0408.1)
9
+ Tue, 15 Oct 2024 04:12:17 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241015-0407.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-motion to v0.0.0-nightly-20241014-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/ca7b6c975dcf1e028b740bd5951fee3891dff3bb) by beachball)
16
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20241014-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/ca7b6c975dcf1e028b740bd5951fee3891dff3bb) by beachball)
17
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241014-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/ca7b6c975dcf1e028b740bd5951fee3891dff3bb) by beachball)
15
+ - Bump @fluentui/react-motion to v0.0.0-nightly-20241015-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/0856bcfb0425d289539d6db23f2d75b70ce21479) by beachball)
16
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20241015-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/0856bcfb0425d289539d6db23f2d75b70ce21479) by beachball)
17
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241015-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/0856bcfb0425d289539d6db23f2d75b70ce21479) by beachball)
18
18
 
19
19
  ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
20
20
 
package/dist/index.d.ts CHANGED
@@ -7,9 +7,13 @@ export declare const Collapse: PresenceComponent<CollapseRuntimeParams>;
7
7
 
8
8
  export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>;
9
9
 
10
+ declare type CollapseOrientation = 'horizontal' | 'vertical';
11
+
10
12
  declare type CollapseRuntimeParams = {
11
13
  /** Whether to animate the opacity. Defaults to `true`. */
12
14
  animateOpacity?: boolean;
15
+ /** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
16
+ orientation?: CollapseOrientation;
13
17
  };
14
18
 
15
19
  export declare const CollapseSnappy: PresenceComponent<CollapseRuntimeParams>;
package/lib/components/Collapse/Collapse.js CHANGED
@@ -1,41 +1,45 @@
1
1
  import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
2
- /** Define a presence motion for collapse/expand */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true })=>{
2
+ /** 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' })=>{
3
+ // TODO: don't change opacity at all if animateOpacity is false
3
4
  const fromOpacity = animateOpacity ? 0 : 1;
4
5
  const toOpacity = 1;
5
- const fromHeight = '0'; // Could be a custom param in the future to start partially expanded
6
- const toHeight = `${element.scrollHeight}px`;
7
- const overflow = 'hidden';
6
+ const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height
7
+ const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
8
+ const toSize = `${measuredSize}px`;
9
+ // use generic names for size and overflow, handling vertical or horizontal orientation
10
+ const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
11
+ const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
8
12
  const enterKeyframes = [
9
13
  {
10
14
  opacity: fromOpacity,
11
- maxHeight: fromHeight,
12
- overflow
15
+ [sizeName]: fromSize,
16
+ [overflowName]: 'hidden'
13
17
  },
14
18
  // Transition to the height of the content, at 99.99% of the duration.
15
19
  {
16
20
  opacity: toOpacity,
17
- maxHeight: toHeight,
21
+ [sizeName]: toSize,
18
22
  offset: 0.9999,
19
- overflow
23
+ [overflowName]: 'hidden'
20
24
  },
21
25
  // On completion, remove the maxHeight because the content might need to expand later.
22
26
  // This extra keyframe is simpler than firing a callback on completion.
23
27
  {
24
28
  opacity: toOpacity,
25
- maxHeight: 'unset',
26
- overflow
29
+ [sizeName]: 'unset',
30
+ [overflowName]: 'hidden'
27
31
  }
28
32
  ];
29
33
  const exitKeyframes = [
30
34
  {
31
35
  opacity: toOpacity,
32
- maxHeight: toHeight,
33
- overflow
36
+ [sizeName]: toSize,
37
+ [overflowName]: 'hidden'
34
38
  },
35
39
  {
36
40
  opacity: fromOpacity,
37
- maxHeight: fromHeight,
38
- overflow
41
+ [sizeName]: fromSize,
42
+ [overflowName]: 'hidden'
39
43
  }
40
44
  ];
41
45
  return {
package/lib/components/Collapse/Collapse.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\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\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 }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromHeight = '0'; // Could be a custom param in the future to start partially expanded\n const toHeight = `${element.scrollHeight}px`;\n const overflow = 'hidden';\n\n const enterKeyframes = [\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n // Transition to the height of the content, at 99.99% of the duration.\n { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n // On completion, remove the maxHeight because the content might need to expand later.\n // This extra keyframe is simpler than firing a callback on completion.\n { opacity: toOpacity, maxHeight: 'unset', overflow },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, maxHeight: toHeight, overflow },\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n ];\n\n return {\n enter: { duration: enterDuration, easing: enterEasing, keyframes: enterKeyframes },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\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","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","duration","easing","keyframes","exit","Collapse","CollapseSnappy","durationFast","CollapseExaggerated","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAsB/E,iDAAiD,GACjD,OAAO,MAAMC,yBACX,CAAC,EACCC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,gBAAgB,EAC3CC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GACN,CAAC,EAAEI,OAAO,EAAEC,iBAAiB,IAAI,EAAE;QACjC,MAAMC,cAAcD,iBAAiB,IAAI;QACzC,MAAME,YAAY;QAClB,MAAMC,aAAa,KAAK,oEAAoE;QAC5F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;QAC5C,MAAMC,WAAW;QAEjB,MAAMC,iBAAiB;YACrB;gBAAEC,SAASP;gBAAaQ,WAAWN;gBAAYG;YAAS;YACxD,sEAAsE;YACtE;gBAAEE,SAASN;gBAAWO,WAAWL;gBAAUM,QAAQ;gBAAQJ;YAAS;YACpE,sFAAsF;YACtF,uEAAuE;YACvE;gBAAEE,SAASN;gBAAWO,WAAW;gBAASH;YAAS;SACpD;QAED,MAAMK,gBAAgB;YACpB;gBAAEH,SAASN;gBAAWO,WAAWL;gBAAUE;YAAS;YACpD;gBAAEE,SAASP;gBAAaQ,WAAWN;gBAAYG;YAAS;SACzD;QAED,OAAO;YACLM,OAAO;gBAAEC,UAAUpB;gBAAeqB,QAAQnB;gBAAaoB,WAAWR;YAAe;YACjFS,MAAM;gBAAEH,UAAUhB;gBAAciB,QAAQhB;gBAAYiB,WAAWJ;YAAc;QAC/E;IACF,EAAE;AAEJ,gFAAgF,GAChF,OAAO,MAAMM,WAAW1B,wBAAwBC,0BAA0B;AAE1E,OAAO,MAAM0B,iBAAiB3B,wBAC5BC,uBAAuB;IAAEC,eAAeH,aAAa6B,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,sBAAsB7B,wBACjCC,uBAAuB;IAAEC,eAAeH,aAAa+B,cAAc;AAAC,IACpE"}
1
+ {"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } 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 // TODO: don't change opacity at all if animateOpacity is false\n const fromOpacity = animateOpacity ? 0 : 1;\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 const enterKeyframes = [\n { opacity: fromOpacity, [sizeName]: fromSize, [overflowName]: 'hidden' },\n // Transition to the height of the content, at 99.99% of the duration.\n { opacity: toOpacity, [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n // On completion, remove the maxHeight because the content might need to expand later.\n // This extra keyframe is simpler than firing a callback on completion.\n { opacity: toOpacity, [sizeName]: 'unset', [overflowName]: 'hidden' },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, [sizeName]: toSize, [overflowName]: 'hidden' },\n { opacity: fromOpacity, [sizeName]: fromSize, [overflowName]: 'hidden' },\n ];\n\n return {\n enter: { duration: enterDuration, easing: enterEasing, keyframes: enterKeyframes },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\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","enterKeyframes","opacity","offset","exitKeyframes","enter","duration","easing","keyframes","exit","Collapse","CollapseSnappy","durationFast","CollapseExaggerated","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AA2B/E,iDAAiD,GACjD,OAAO,MAAMC,yBACX,CAAC,EACCC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,gBAAgB,EAC3CC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GACN,CAAC,EAAEI,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,+DAA+D;QAC/D,MAAMC,cAAcF,iBAAiB,IAAI;QACzC,MAAMG,YAAY;QAClB,MAAMC,WAAW,KAAK,yFAAyF;QAC/G,MAAMC,eAAeJ,gBAAgB,eAAeF,QAAQO,WAAW,GAAGP,QAAQQ,YAAY;QAC9F,MAAMC,SAAS,CAAC,EAAEH,aAAa,EAAE,CAAC;QAClC,uFAAuF;QACvF,MAAMI,WAAWR,gBAAgB,eAAe,aAAa;QAC7D,MAAMS,eAAeT,gBAAgB,eAAe,cAAc;QAElE,MAAMU,iBAAiB;YACrB;gBAAEC,SAASV;gBAAa,CAACO,SAAS,EAAEL;gBAAU,CAACM,aAAa,EAAE;YAAS;YACvE,sEAAsE;YACtE;gBAAEE,SAAST;gBAAW,CAACM,SAAS,EAAED;gBAAQK,QAAQ;gBAAQ,CAACH,aAAa,EAAE;YAAS;YACnF,sFAAsF;YACtF,uEAAuE;YACvE;gBAAEE,SAAST;gBAAW,CAACM,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAS;SACrE;QAED,MAAMI,gBAAgB;YACpB;gBAAEF,SAAST;gBAAW,CAACM,SAAS,EAAED;gBAAQ,CAACE,aAAa,EAAE;YAAS;YACnE;gBAAEE,SAASV;gBAAa,CAACO,SAAS,EAAEL;gBAAU,CAACM,aAAa,EAAE;YAAS;SACxE;QAED,OAAO;YACLK,OAAO;gBAAEC,UAAUvB;gBAAewB,QAAQtB;gBAAauB,WAAWP;YAAe;YACjFQ,MAAM;gBAAEH,UAAUnB;gBAAcoB,QAAQnB;gBAAYoB,WAAWJ;YAAc;QAC/E;IACF,EAAE;AAEJ,gFAAgF,GAChF,OAAO,MAAMM,WAAW7B,wBAAwBC,0BAA0B;AAE1E,OAAO,MAAM6B,iBAAiB9B,wBAC5BC,uBAAuB;IAAEC,eAAeH,aAAagC,YAAY;AAAC,IAClE;AAEF,OAAO,MAAMC,sBAAsBhC,wBACjCC,uBAAuB;IAAEC,eAAeH,aAAakC,cAAc;AAAC,IACpE"}
package/lib-commonjs/components/Collapse/Collapse.js CHANGED
@@ -23,43 +23,47 @@ _export(exports, {
23
23
  }
24
24
  });
25
25
  const _reactmotion = require("@fluentui/react-motion");
26
- const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true })=>{
26
+ const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{
27
+ // TODO: don't change opacity at all if animateOpacity is false
27
28
  const fromOpacity = animateOpacity ? 0 : 1;
28
29
  const toOpacity = 1;
29
- const fromHeight = '0'; // Could be a custom param in the future to start partially expanded
30
- const toHeight = `${element.scrollHeight}px`;
31
- const overflow = 'hidden';
30
+ const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height
31
+ const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
32
+ const toSize = `${measuredSize}px`;
33
+ // use generic names for size and overflow, handling vertical or horizontal orientation
34
+ const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
35
+ const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
32
36
  const enterKeyframes = [
33
37
  {
34
38
  opacity: fromOpacity,
35
- maxHeight: fromHeight,
36
- overflow
39
+ [sizeName]: fromSize,
40
+ [overflowName]: 'hidden'
37
41
  },
38
42
  // Transition to the height of the content, at 99.99% of the duration.
39
43
  {
40
44
  opacity: toOpacity,
41
- maxHeight: toHeight,
45
+ [sizeName]: toSize,
42
46
  offset: 0.9999,
43
- overflow
47
+ [overflowName]: 'hidden'
44
48
  },
45
49
  // On completion, remove the maxHeight because the content might need to expand later.
46
50
  // This extra keyframe is simpler than firing a callback on completion.
47
51
  {
48
52
  opacity: toOpacity,
49
- maxHeight: 'unset',
50
- overflow
53
+ [sizeName]: 'unset',
54
+ [overflowName]: 'hidden'
51
55
  }
52
56
  ];
53
57
  const exitKeyframes = [
54
58
  {
55
59
  opacity: toOpacity,
56
- maxHeight: toHeight,
57
- overflow
60
+ [sizeName]: toSize,
61
+ [overflowName]: 'hidden'
58
62
  },
59
63
  {
60
64
  opacity: fromOpacity,
61
- maxHeight: fromHeight,
62
- overflow
65
+ [sizeName]: fromSize,
66
+ [overflowName]: 'hidden'
63
67
  }
64
68
  ];
65
69
  return {
package/lib-commonjs/components/Collapse/Collapse.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionFnCreator } from '../../types';\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\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 }) => {\n const fromOpacity = animateOpacity ? 0 : 1;\n const toOpacity = 1;\n const fromHeight = '0'; // Could be a custom param in the future to start partially expanded\n const toHeight = `${element.scrollHeight}px`;\n const overflow = 'hidden';\n\n const enterKeyframes = [\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n // Transition to the height of the content, at 99.99% of the duration.\n { opacity: toOpacity, maxHeight: toHeight, offset: 0.9999, overflow },\n // On completion, remove the maxHeight because the content might need to expand later.\n // This extra keyframe is simpler than firing a callback on completion.\n { opacity: toOpacity, maxHeight: 'unset', overflow },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, maxHeight: toHeight, overflow },\n { opacity: fromOpacity, maxHeight: fromHeight, overflow },\n ];\n\n return {\n enter: { duration: enterDuration, easing: enterEasing, keyframes: enterKeyframes },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\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","fromOpacity","toOpacity","fromHeight","toHeight","scrollHeight","overflow","enterKeyframes","opacity","maxHeight","offset","exitKeyframes","enter","duration","easing","keyframes","exit","createPresenceComponent","durationFast","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA0DaA,QAAAA;eAAAA;;IAMAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;IArCAC,sBAAAA;eAAAA;;;6BAvByC;AAuB/C,MAAMA,yBACX,CAAC,EACCC,gBAAgBC,yBAAAA,CAAaC,cAAc,EAC3CC,cAAcF,yBAAAA,CAAaG,gBAAgB,EAC3CC,eAAeL,aAAa,EAC5BM,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GACN,CAAC,EAAEI,OAAO,EAAEC,iBAAiB,IAAI,EAAE;QACjC,MAAMC,cAAcD,iBAAiB,IAAI;QACzC,MAAME,YAAY;QAClB,MAAMC,aAAa,KAAK,oEAAoE;QAC5F,MAAMC,WAAW,CAAC,EAAEL,QAAQM,YAAY,CAAC,EAAE,CAAC;QAC5C,MAAMC,WAAW;QAEjB,MAAMC,iBAAiB;YACrB;gBAAEC,SAASP;gBAAaQ,WAAWN;gBAAYG;YAAS;YACxD,sEAAsE;YACtE;gBAAEE,SAASN;gBAAWO,WAAWL;gBAAUM,QAAQ;gBAAQJ;YAAS;YACpE,sFAAsF;YACtF,uEAAuE;YACvE;gBAAEE,SAASN;gBAAWO,WAAW;gBAASH;YAAS;SACpD;QAED,MAAMK,gBAAgB;YACpB;gBAAEH,SAASN;gBAAWO,WAAWL;gBAAUE;YAAS;YACpD;gBAAEE,SAASP;gBAAaQ,WAAWN;gBAAYG;YAAS;SACzD;QAED,OAAO;YACLM,OAAO;gBAAEC,UAAUrB;gBAAesB,QAAQnB;gBAAaoB,WAAWR;YAAe;YACjFS,MAAM;gBAAEH,UAAUhB;gBAAciB,QAAQhB;gBAAYiB,WAAWJ;YAAc;QAC/E;IACF;AAGK,MAAMvB,WAAW6B,IAAAA,oCAAAA,EAAwB1B;AAEzC,MAAMD,iBAAiB2B,IAAAA,oCAAAA,EAC5B1B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAayB,YAAY;AAAC;AAG7D,MAAM7B,sBAAsB4B,IAAAA,oCAAAA,EACjC1B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAa0B,cAAc;AAAC"}
1
+ {"version":3,"sources":["Collapse.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } 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 // TODO: don't change opacity at all if animateOpacity is false\n const fromOpacity = animateOpacity ? 0 : 1;\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 const enterKeyframes = [\n { opacity: fromOpacity, [sizeName]: fromSize, [overflowName]: 'hidden' },\n // Transition to the height of the content, at 99.99% of the duration.\n { opacity: toOpacity, [sizeName]: toSize, offset: 0.9999, [overflowName]: 'hidden' },\n // On completion, remove the maxHeight because the content might need to expand later.\n // This extra keyframe is simpler than firing a callback on completion.\n { opacity: toOpacity, [sizeName]: 'unset', [overflowName]: 'hidden' },\n ];\n\n const exitKeyframes = [\n { opacity: toOpacity, [sizeName]: toSize, [overflowName]: 'hidden' },\n { opacity: fromOpacity, [sizeName]: fromSize, [overflowName]: 'hidden' },\n ];\n\n return {\n enter: { duration: enterDuration, easing: enterEasing, keyframes: enterKeyframes },\n exit: { duration: exitDuration, easing: exitEasing, keyframes: exitKeyframes },\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","enterKeyframes","opacity","offset","exitKeyframes","enter","duration","easing","keyframes","exit","createPresenceComponent","durationFast","durationSlower"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAmEaA,QAAAA;eAAAA;;IAMAC,mBAAAA;eAAAA;;IAJAC,cAAAA;eAAAA;;IAzCAC,sBAAAA;eAAAA;;;6BA5ByC;AA4B/C,MAAMA,yBACX,CAAC,EACCC,gBAAgBC,yBAAAA,CAAaC,cAAc,EAC3CC,cAAcF,yBAAAA,CAAaG,gBAAgB,EAC3CC,eAAeL,aAAa,EAC5BM,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GACN,CAAC,EAAEI,OAAO,EAAEC,iBAAiB,IAAI,EAAEC,cAAc,UAAU,EAAE;QAC3D,+DAA+D;QAC/D,MAAMC,cAAcF,iBAAiB,IAAI;QACzC,MAAMG,YAAY;QAClB,MAAMC,WAAW,KAAK,yFAAyF;QAC/G,MAAMC,eAAeJ,gBAAgB,eAAeF,QAAQO,WAAW,GAAGP,QAAQQ,YAAY;QAC9F,MAAMC,SAAS,CAAC,EAAEH,aAAa,EAAE,CAAC;QAClC,uFAAuF;QACvF,MAAMI,WAAWR,gBAAgB,eAAe,aAAa;QAC7D,MAAMS,eAAeT,gBAAgB,eAAe,cAAc;QAElE,MAAMU,iBAAiB;YACrB;gBAAEC,SAASV;gBAAa,CAACO,SAAS,EAAEL;gBAAU,CAACM,aAAa,EAAE;YAAS;YACvE,sEAAsE;YACtE;gBAAEE,SAAST;gBAAW,CAACM,SAAS,EAAED;gBAAQK,QAAQ;gBAAQ,CAACH,aAAa,EAAE;YAAS;YACnF,sFAAsF;YACtF,uEAAuE;YACvE;gBAAEE,SAAST;gBAAW,CAACM,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAS;SACrE;QAED,MAAMI,gBAAgB;YACpB;gBAAEF,SAAST;gBAAW,CAACM,SAAS,EAAED;gBAAQ,CAACE,aAAa,EAAE;YAAS;YACnE;gBAAEE,SAASV;gBAAa,CAACO,SAAS,EAAEL;gBAAU,CAACM,aAAa,EAAE;YAAS;SACxE;QAED,OAAO;YACLK,OAAO;gBAAEC,UAAUxB;gBAAeyB,QAAQtB;gBAAauB,WAAWP;YAAe;YACjFQ,MAAM;gBAAEH,UAAUnB;gBAAcoB,QAAQnB;gBAAYoB,WAAWJ;YAAc;QAC/E;IACF;AAGK,MAAM1B,WAAWgC,IAAAA,oCAAAA,EAAwB7B;AAEzC,MAAMD,iBAAiB8B,IAAAA,oCAAAA,EAC5B7B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAa4B,YAAY;AAAC;AAG7D,MAAMhC,sBAAsB+B,IAAAA,oCAAAA,EACjC7B,uBAAuB;IAAEC,eAAeC,yBAAAA,CAAa6B,cAAc;AAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-motion-components-preview",
3
- "version": "0.0.0-nightly-20241014-0408.1",
3
+ "version": "0.0.0-nightly-20241015-0407.1",
4
4
  "description": "A preview package for Fluent UI motion components, providing a collection of components",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -29,13 +29,13 @@
29
29
  },
30
30
  "devDependencies": {
31
31
  "@fluentui/eslint-plugin": "*",
32
- "@fluentui/react-conformance": "0.0.0-nightly-20241014-0408.1",
33
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241014-0408.1",
32
+ "@fluentui/react-conformance": "0.0.0-nightly-20241015-0407.1",
33
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241015-0407.1",
34
34
  "@fluentui/scripts-api-extractor": "*",
35
35
  "@fluentui/scripts-tasks": "*"
36
36
  },
37
37
  "dependencies": {
38
- "@fluentui/react-motion": "0.0.0-nightly-20241014-0408.1",
38
+ "@fluentui/react-motion": "0.0.0-nightly-20241015-0407.1",
39
39
  "@swc/helpers": "^0.5.1"
40
40
  },
41
41
  "peerDependencies": {