@fluentui/react-motion-components-preview 0.0.0-nightly-20251003-0407.1 → 0.0.0-nightly-20251007-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.
package/CHANGELOG.md CHANGED
@@ -1,20 +1,33 @@
1
1
  # Change Log - @fluentui/react-motion-components-preview
2
2
 
3
- This log was last generated on Fri, 03 Oct 2025 04:22:43 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 07 Oct 2025 04:22:25 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20251003-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20251003-0407.1)
7
+ ## [0.0.0-nightly-20251007-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20251007-0407.1)
8
8
 
9
- Fri, 03 Oct 2025 04:22:43 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.10.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20251003-0407.1)
9
+ Tue, 07 Oct 2025 04:22:25 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.11.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20251007-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-20251003-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/68704e7b221bc66bfe05b2d17ef81fba00d3ad33) by beachball)
16
- - Bump @fluentui/react-conformance to v0.0.0-nightly-20251003-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/68704e7b221bc66bfe05b2d17ef81fba00d3ad33) by beachball)
17
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20251003-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/68704e7b221bc66bfe05b2d17ef81fba00d3ad33) by beachball)
15
+ - Bump @fluentui/react-motion to v0.0.0-nightly-20251007-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/ae219f09d0687539e776bb3bfe61423cb26e497d) by beachball)
16
+ - Bump @fluentui/react-conformance to v0.0.0-nightly-20251007-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/ae219f09d0687539e776bb3bfe61423cb26e497d) by beachball)
17
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20251007-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/ae219f09d0687539e776bb3bfe61423cb26e497d) by beachball)
18
+
19
+ ## [0.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.11.0)
20
+
21
+ Fri, 03 Oct 2025 14:19:04 GMT
22
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.10.0..@fluentui/react-motion-components-preview_v0.11.0)
23
+
24
+ ### Minor changes
25
+
26
+ - refactor(Collapse): simplify parameter types ([PR #35262](https://github.com/microsoft/fluentui/pull/35262) by robertpenner@microsoft.com)
27
+
28
+ ### Patches
29
+
30
+ - fix(Collapse): make size animation work with delay ([PR #35269](https://github.com/microsoft/fluentui/pull/35269) by robertpenner@microsoft.com)
18
31
 
19
32
  ## [0.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.10.0)
20
33
 
@@ -30,7 +30,8 @@ export const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize
30
30
  ],
31
31
  duration,
32
32
  easing,
33
- delay
33
+ delay,
34
+ fill: 'both'
34
35
  };
35
36
  };
36
37
  export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
@@ -48,8 +49,8 @@ export const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0
48
49
  ],
49
50
  duration,
50
51
  easing,
51
- fill: 'both',
52
- delay
52
+ delay,
53
+ fill: 'both'
53
54
  };
54
55
  };
55
56
  // ----- WHITESPACE -----
@@ -89,14 +90,11 @@ const whitespaceValuesForOrientation = (orientation)=>{
89
90
  offset
90
91
  }
91
92
  ];
92
- const atom = {
93
+ return {
93
94
  keyframes,
94
95
  duration,
95
96
  easing,
96
- delay
97
+ delay,
98
+ fill: 'both'
97
99
  };
98
- if (direction === 'exit') {
99
- atom.fill = 'forwards';
100
- }
101
- return atom;
102
100
  };
@@ -1 +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 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 };\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":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","delay","keyframes","offset","sizeExitAtom","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","whitespaceAtom","direction","atom"],"mappings":"AAGA,mBAAmB;AAEnB,MAAMA,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,GAAGH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAWA,OAAO,MAAMC,gBAAgB,CAAC,EAC5BR,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPU,WAAW,GAAG,EACdC,QAAQ,CAAC,EACW;IACpB,MAAM,EAAEV,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLY,WAAW;YACT;gBAAE,CAACX,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQO,QAAQ;gBAAQ,CAACX,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDM;QACAC;QACAE;IACF;AACF,EAAE;AAMF,OAAO,MAAMG,eAAe,CAAC,EAC3Bf,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPW,QAAQ,CAAC,EACTD,WAAW,GAAG,EACK;IACnB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLY,WAAW;YACT;gBAAE,CAACX,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;SAClD;QACDM;QACAC;QACAM,MAAM;QACNJ;IACF;AACF,EAAE;AAEF,yBAAyB;AAEzB,oDAAoD;AACpD,MAAMK,iCAAiC,CAACjB;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLkB,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;AAUA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTvB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNE,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEM,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+BjB;IAC5F,uFAAuF;IACvF,MAAMc,SAASS,cAAc,UAAU,IAAI;IAC3C,MAAMV,YAAY;QAAC;YAAE,CAACK,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKP;QAAO;KAAE;IAE5G,MAAMU,OAAmB;QACvBX;QACAJ;QACAC;QACAE;IACF;IACA,IAAIW,cAAc,QAAQ;QACxBC,KAAKR,IAAI,GAAG;IACd;IACA,OAAOQ;AACT,EAAE"}
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 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":["sizeValuesForOrientation","orientation","element","sizeName","overflowName","measuredSize","scrollWidth","scrollHeight","toSize","sizeEnterAtom","duration","easing","fromSize","delay","keyframes","offset","fill","sizeExitAtom","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","whitespaceAtom","direction"],"mappings":"AAGA,mBAAmB;AAEnB,MAAMA,2BAA2B,CAACC,aAAkCC;IAClE,MAAMC,WAAWF,gBAAgB,eAAe,aAAa;IAC7D,MAAMG,eAAeH,gBAAgB,eAAe,cAAc;IAClE,MAAMI,eAAeJ,gBAAgB,eAAeC,QAAQI,WAAW,GAAGJ,QAAQK,YAAY;IAC9F,MAAMC,SAAS,GAAGH,aAAa,EAAE,CAAC;IAClC,OAAO;QAAEF;QAAUC;QAAcI;IAAO;AAC1C;AAWA,OAAO,MAAMC,gBAAgB,CAAC,EAC5BR,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPU,WAAW,GAAG,EACdC,QAAQ,CAAC,EACW;IACpB,MAAM,EAAEV,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLY,WAAW;YACT;gBAAE,CAACX,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;YACjD;gBAAE,CAACD,SAAS,EAAEK;gBAAQO,QAAQ;gBAAQ,CAACX,aAAa,EAAE;YAAS;YAC/D;gBAAE,CAACD,SAAS,EAAE;gBAAS,CAACC,aAAa,EAAE;YAAQ;SAChD;QACDM;QACAC;QACAE;QACAG,MAAM;IACR;AACF,EAAE;AAMF,OAAO,MAAMC,eAAe,CAAC,EAC3BhB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNT,OAAO,EACPW,QAAQ,CAAC,EACTD,WAAW,GAAG,EACK;IACnB,MAAM,EAAET,QAAQ,EAAEC,YAAY,EAAEI,MAAM,EAAE,GAAGR,yBAAyBC,aAAaC;IAEjF,OAAO;QACLY,WAAW;YACT;gBAAE,CAACX,SAAS,EAAEK;gBAAQ,CAACJ,aAAa,EAAE;YAAS;YAC/C;gBAAE,CAACD,SAAS,EAAES;gBAAU,CAACR,aAAa,EAAE;YAAS;SAClD;QACDM;QACAC;QACAE;QACAG,MAAM;IACR;AACF,EAAE;AAEF,yBAAyB;AAEzB,oDAAoD;AACpD,MAAME,iCAAiC,CAACjB;IACtC,iCAAiC;IACjC,IAAIA,gBAAgB,cAAc;QAChC,OAAO;YACLkB,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;AAUA;;;;CAIC,GACD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAS,EACTvB,WAAW,EACXS,QAAQ,EACRC,MAAM,EACNE,QAAQ,CAAC,EACY;IACrB,MAAM,EAAEM,YAAY,EAAEC,UAAU,EAAEC,WAAW,EAAEC,SAAS,EAAE,GAAGJ,+BAA+BjB;IAC5F,uFAAuF;IACvF,MAAMc,SAASS,cAAc,UAAU,IAAI;IAC3C,MAAMV,YAAY;QAAC;YAAE,CAACK,aAAa,EAAE;YAAK,CAACC,WAAW,EAAE;YAAK,CAACC,YAAY,EAAE;YAAK,CAACC,UAAU,EAAE;YAAKP;QAAO;KAAE;IAE5G,OAAO;QACLD;QACAJ;QACAC;QACAE;QACAG,MAAM;IACR;AACF,EAAE"}
@@ -51,7 +51,8 @@ const sizeEnterAtom = ({ orientation, duration, easing, element, fromSize = '0',
51
51
  ],
52
52
  duration,
53
53
  easing,
54
- delay
54
+ delay,
55
+ fill: 'both'
55
56
  };
56
57
  };
57
58
  const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromSize = '0' })=>{
@@ -69,8 +70,8 @@ const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, fromS
69
70
  ],
70
71
  duration,
71
72
  easing,
72
- fill: 'both',
73
- delay
73
+ delay,
74
+ fill: 'both'
74
75
  };
75
76
  };
76
77
  // ----- WHITESPACE -----
@@ -106,14 +107,11 @@ const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })
106
107
  offset
107
108
  }
108
109
  ];
109
- const atom = {
110
+ return {
110
111
  keyframes,
111
112
  duration,
112
113
  easing,
113
- delay
114
+ delay,
115
+ fill: 'both'
114
116
  };
115
- if (direction === 'exit') {
116
- atom.fill = 'forwards';
117
- }
118
- return atom;
119
117
  };
@@ -1 +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 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 };\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","delay","keyframes","offset","fill","whitespaceValuesForOrientation","paddingStart","paddingEnd","marginStart","marginEnd","direction","atom"],"mappings":";;;;;;;;;;;IAsBaA,aAAa;eAAbA;;IA0BAC,YAAY;eAAZA;;IAyDAC,cAAc;eAAdA;;;AAtGb,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;IACF;AACF;AAMO,MAAMd,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;QACAK,MAAM;QACNH;IACF;AACF;AAEA,yBAAyB;AAEzB,oDAAoD;AACpD,MAAMI,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,MAAMQ,OAAmB;QACvBT;QACAJ;QACAC;QACAE;IACF;IACA,IAAIS,cAAc,QAAQ;QACxBC,KAAKP,IAAI,GAAG;IACd;IACA,OAAOO;AACT"}
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 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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-motion-components-preview",
3
- "version": "0.0.0-nightly-20251003-0407.1",
3
+ "version": "0.0.0-nightly-20251007-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",
@@ -19,12 +19,12 @@
19
19
  "license": "MIT",
20
20
  "devDependencies": {
21
21
  "@fluentui/eslint-plugin": "*",
22
- "@fluentui/react-conformance": "0.0.0-nightly-20251003-0407.1",
23
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20251003-0407.1",
22
+ "@fluentui/react-conformance": "0.0.0-nightly-20251007-0407.1",
23
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20251007-0407.1",
24
24
  "@fluentui/scripts-api-extractor": "*"
25
25
  },
26
26
  "dependencies": {
27
- "@fluentui/react-motion": "0.0.0-nightly-20251003-0407.1",
27
+ "@fluentui/react-motion": "0.0.0-nightly-20251007-0407.1",
28
28
  "@swc/helpers": "^0.5.1"
29
29
  },
30
30
  "peerDependencies": {