@fluentui/react-motion-components-preview
Advanced tools
Comparing version 0.0.0-nightly-20241018-0406.1 to 0.0.0-nightly-20241022-0408.1
# Change Log - @fluentui/react-motion-components-preview | ||
This log was last generated on Fri, 18 Oct 2024 04:11:45 GMT and should not be manually modified. | ||
This log was last generated on Tue, 22 Oct 2024 04:13:00 GMT and should not be manually modified. | ||
<!-- Start content --> | ||
## [0.0.0-nightly-20241018-0406.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241018-0406.1) | ||
## [0.0.0-nightly-20241022-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1) | ||
Fri, 18 Oct 2024 04:11:45 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241018-0406.1) | ||
Tue, 22 Oct 2024 04:13:00 GMT | ||
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1) | ||
@@ -15,5 +15,5 @@ ### Changes | ||
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com) | ||
- Bump @fluentui/react-motion to v0.0.0-nightly-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) by beachball) | ||
- Bump @fluentui/react-conformance to v0.0.0-nightly-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) by beachball) | ||
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241018-0406.1 ([commit](https://github.com/microsoft/fluentui/commit/dd2fe119ae40240363e6e4a8beb9d03496e4ed99) by beachball) | ||
- Bump @fluentui/react-motion to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball) | ||
- Bump @fluentui/react-conformance to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball) | ||
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball) | ||
@@ -20,0 +20,0 @@ ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0) |
@@ -8,2 +8,23 @@ import type { MotionParam } from '@fluentui/react-motion'; | ||
export declare const CollapseDelayed: PresenceComponent<CollapseRuntimeParams>; | ||
declare type CollapseDelayedVariantParams = { | ||
/** Time (ms) for the size expand. Defaults to the durationNormal value (200 ms). */ | ||
enterSizeDuration?: number; | ||
/** Time (ms) for the fade-in. Defaults to the enterSizeDuration param, to sync fade-in with expand. */ | ||
enterOpacityDuration?: number; | ||
/** Time (ms) for the size collapse. Defaults to the enterSizeDuration param, for temporal symmetry.. */ | ||
exitSizeDuration?: number; | ||
/** Defaults to the exitSizeDuration param, to sync the fade-out with the collapse. */ | ||
exitOpacityDuration?: number; | ||
/** Time (ms) between the size expand start and the fade-in start. Defaults to `0`. */ | ||
enterDelay?: number; | ||
/** Time (ms) between the fade-out start and the size collapse start. Defaults to `0`. */ | ||
exitDelay?: number; | ||
/** Easing curve for the enter transition, shared by size and opacity. Defaults to the easeEaseMax value. */ | ||
enterEasing?: string; | ||
/** Easing curve for the exit transition, shared by size and opacity. Defaults to the enterEasing param. */ | ||
exitEasing?: string; | ||
}; | ||
export declare const CollapseExaggerated: PresenceComponent<CollapseRuntimeParams>; | ||
@@ -33,3 +54,6 @@ | ||
/** Define a presence motion for collapse/expand */ | ||
/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */ | ||
export declare const createCollapseDelayedPresence: PresenceMotionFnCreator<CollapseDelayedVariantParams, CollapseRuntimeParams>; | ||
/** Defines a presence motion for collapse/expand. */ | ||
export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>; | ||
@@ -36,0 +60,0 @@ |
@@ -15,2 +15,5 @@ "use strict"; | ||
}, | ||
CollapseDelayed: function() { | ||
return CollapseDelayed; | ||
}, | ||
CollapseExaggerated: function() { | ||
@@ -22,2 +25,5 @@ return CollapseExaggerated; | ||
}, | ||
createCollapseDelayedPresence: function() { | ||
return createCollapseDelayedPresence; | ||
}, | ||
createCollapsePresence: function() { | ||
@@ -28,117 +34,50 @@ return createCollapsePresence; | ||
const _reactmotion = require("@fluentui/react-motion"); | ||
const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{ | ||
const fromOpacity = 0; | ||
const toOpacity = 1; | ||
const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height | ||
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight; | ||
const toSize = `${measuredSize}px`; | ||
// use generic names for size and overflow, handling vertical or horizontal orientation | ||
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight'; | ||
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY'; | ||
// Because a height of zero does not eliminate padding, | ||
// we will create keyframes to animate it to zero. | ||
// TODO: consider collapsing margin, perhaps as an option. | ||
const collapsedWhiteSpace = {}; | ||
if (orientation === 'horizontal') { | ||
collapsedWhiteSpace.paddingLeft = '0'; | ||
collapsedWhiteSpace.paddingRight = '0'; | ||
} else { | ||
collapsedWhiteSpace.paddingTop = '0'; | ||
collapsedWhiteSpace.paddingBottom = '0'; | ||
} | ||
const _collapseatoms = require("./collapse-atoms"); | ||
const createCollapseDelayedPresence = ({ enterSizeDuration = _reactmotion.motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, enterDelay = 0, exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{ | ||
// ----- ENTER ----- | ||
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity. | ||
const enterAtoms = [ | ||
// Expand size (height or width) | ||
{ | ||
keyframes: [ | ||
{ | ||
[sizeName]: fromSize, | ||
[overflowName]: 'hidden' | ||
}, | ||
{ | ||
[sizeName]: toSize, | ||
offset: 0.9999, | ||
[overflowName]: 'hidden' | ||
}, | ||
{ | ||
[sizeName]: 'unset', | ||
[overflowName]: 'unset' | ||
} | ||
], | ||
duration: enterDuration, | ||
(0, _collapseatoms.sizeEnterAtom)({ | ||
orientation, | ||
duration: enterSizeDuration, | ||
easing: enterEasing, | ||
element | ||
}), | ||
(0, _collapseatoms.whitespaceEnterAtom)({ | ||
orientation, | ||
duration: enterSizeDuration, | ||
easing: enterEasing | ||
}, | ||
// Expand whitespace (padding currently). | ||
{ | ||
// Animate from zero values to the element's natural values (i.e. the missing other keyframe). | ||
keyframes: [ | ||
{ | ||
...collapsedWhiteSpace, | ||
offset: 0 | ||
} | ||
], | ||
duration: enterDuration, | ||
easing: enterEasing | ||
} | ||
}) | ||
]; | ||
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected. | ||
if (animateOpacity) { | ||
enterAtoms.push({ | ||
keyframes: [ | ||
{ | ||
opacity: fromOpacity | ||
}, | ||
{ | ||
opacity: toOpacity | ||
} | ||
], | ||
duration: enterDuration, | ||
enterAtoms.push((0, _collapseatoms.opacityEnterAtom)({ | ||
duration: enterOpacityDuration, | ||
easing: enterEasing, | ||
fill: 'both' | ||
}); | ||
delay: enterDelay | ||
})); | ||
} | ||
// ----- EXIT ----- | ||
// The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace. | ||
const exitAtoms = []; | ||
// Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected. | ||
// Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected. | ||
if (animateOpacity) { | ||
exitAtoms.push({ | ||
keyframes: [ | ||
{ | ||
opacity: toOpacity | ||
}, | ||
{ | ||
opacity: fromOpacity | ||
} | ||
], | ||
duration: exitDuration, | ||
exitAtoms.push((0, _collapseatoms.opacityExitAtom)({ | ||
duration: exitOpacityDuration, | ||
easing: exitEasing | ||
}); | ||
})); | ||
} | ||
exitAtoms.push({ | ||
keyframes: [ | ||
{ | ||
[sizeName]: toSize, | ||
[overflowName]: 'hidden' | ||
}, | ||
{ | ||
[sizeName]: fromSize, | ||
[overflowName]: 'hidden' | ||
} | ||
], | ||
duration: exitDuration, | ||
exitAtoms.push((0, _collapseatoms.sizeExitAtom)({ | ||
orientation, | ||
duration: exitSizeDuration, | ||
easing: exitEasing, | ||
fill: 'both' | ||
}); | ||
exitAtoms.push({ | ||
// Animate from the element's natural values (i.e. the missing other keyframe) to zero values. | ||
keyframes: [ | ||
{ | ||
...collapsedWhiteSpace, | ||
offset: 1 | ||
} | ||
], | ||
duration: exitDuration, | ||
element, | ||
delay: exitDelay | ||
})); | ||
exitAtoms.push((0, _collapseatoms.whitespaceExitAtom)({ | ||
orientation, | ||
duration: exitSizeDuration, | ||
easing: exitEasing, | ||
fill: 'forwards' | ||
}); | ||
delay: exitDelay | ||
})); | ||
return { | ||
@@ -149,2 +88,9 @@ enter: enterAtoms, | ||
}; | ||
const createCollapsePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// where the delays are zero, and the size and opacity durations are equal. | ||
createCollapseDelayedPresence({ | ||
enterSizeDuration: enterDuration, | ||
enterEasing, | ||
exitSizeDuration: exitDuration, | ||
exitEasing | ||
}); | ||
const Collapse = (0, _reactmotion.createPresenceComponent)(createCollapsePresence()); | ||
@@ -157,1 +103,8 @@ const CollapseSnappy = (0, _reactmotion.createPresenceComponent)(createCollapsePresence({ | ||
})); | ||
const CollapseDelayed = (0, _reactmotion.createPresenceComponent)(createCollapseDelayedPresence({ | ||
enterSizeDuration: _reactmotion.motionTokens.durationNormal, | ||
enterOpacityDuration: _reactmotion.motionTokens.durationSlower, | ||
enterDelay: _reactmotion.motionTokens.durationNormal, | ||
exitDelay: _reactmotion.motionTokens.durationSlower, | ||
enterEasing: _reactmotion.motionTokens.curveEasyEase | ||
})); |
@@ -15,2 +15,5 @@ "use strict"; | ||
}, | ||
CollapseDelayed: function() { | ||
return _Collapse.CollapseDelayed; | ||
}, | ||
CollapseExaggerated: function() { | ||
@@ -40,2 +43,5 @@ return _Collapse.CollapseExaggerated; | ||
}, | ||
createCollapseDelayedPresence: function() { | ||
return _Collapse.createCollapseDelayedPresence; | ||
}, | ||
createCollapsePresence: function() { | ||
@@ -42,0 +48,0 @@ return _Collapse.createCollapsePresence; |
import { motionTokens, createPresenceComponent } from '@fluentui/react-motion'; | ||
/** Define a presence motion for collapse/expand */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{ | ||
const fromOpacity = 0; | ||
const toOpacity = 1; | ||
const fromSize = '0'; // Could be a custom param in the future to start with partially expanded width or height | ||
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight; | ||
const toSize = `${measuredSize}px`; | ||
// use generic names for size and overflow, handling vertical or horizontal orientation | ||
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight'; | ||
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY'; | ||
// Because a height of zero does not eliminate padding, | ||
// we will create keyframes to animate it to zero. | ||
// TODO: consider collapsing margin, perhaps as an option. | ||
const collapsedWhiteSpace = {}; | ||
if (orientation === 'horizontal') { | ||
collapsedWhiteSpace.paddingLeft = '0'; | ||
collapsedWhiteSpace.paddingRight = '0'; | ||
} else { | ||
collapsedWhiteSpace.paddingTop = '0'; | ||
collapsedWhiteSpace.paddingBottom = '0'; | ||
} | ||
import { sizeEnterAtom, whitespaceEnterAtom, opacityEnterAtom, opacityExitAtom, sizeExitAtom, whitespaceExitAtom } from './collapse-atoms'; | ||
/** Define a presence motion for collapse/expand that can stagger the size and opacity motions by a given delay. */ export const createCollapseDelayedPresence = ({ // enter | ||
enterSizeDuration = motionTokens.durationNormal, enterOpacityDuration = enterSizeDuration, enterEasing = motionTokens.curveEasyEaseMax, enterDelay = 0, // exit: durations and easing default to enter values for symmetry | ||
exitSizeDuration = enterSizeDuration, exitOpacityDuration = enterOpacityDuration, exitEasing = enterEasing, exitDelay = 0 } = {})=>({ element, animateOpacity = true, orientation = 'vertical' })=>{ | ||
// ----- ENTER ----- | ||
// The enter transition is an array of up to 3 motion atoms: size, whitespace and opacity. | ||
const enterAtoms = [ | ||
// Expand size (height or width) | ||
{ | ||
keyframes: [ | ||
{ | ||
[sizeName]: fromSize, | ||
[overflowName]: 'hidden' | ||
}, | ||
{ | ||
[sizeName]: toSize, | ||
offset: 0.9999, | ||
[overflowName]: 'hidden' | ||
}, | ||
{ | ||
[sizeName]: 'unset', | ||
[overflowName]: 'unset' | ||
} | ||
], | ||
duration: enterDuration, | ||
sizeEnterAtom({ | ||
orientation, | ||
duration: enterSizeDuration, | ||
easing: enterEasing, | ||
element | ||
}), | ||
whitespaceEnterAtom({ | ||
orientation, | ||
duration: enterSizeDuration, | ||
easing: enterEasing | ||
}, | ||
// Expand whitespace (padding currently). | ||
{ | ||
// Animate from zero values to the element's natural values (i.e. the missing other keyframe). | ||
keyframes: [ | ||
{ | ||
...collapsedWhiteSpace, | ||
offset: 0 | ||
} | ||
], | ||
duration: enterDuration, | ||
easing: enterEasing | ||
} | ||
}) | ||
]; | ||
// Fade in only if animateOpacity is true. Otherwise, leave opacity unaffected. | ||
if (animateOpacity) { | ||
enterAtoms.push({ | ||
keyframes: [ | ||
{ | ||
opacity: fromOpacity | ||
}, | ||
{ | ||
opacity: toOpacity | ||
} | ||
], | ||
duration: enterDuration, | ||
enterAtoms.push(opacityEnterAtom({ | ||
duration: enterOpacityDuration, | ||
easing: enterEasing, | ||
fill: 'both' | ||
}); | ||
delay: enterDelay | ||
})); | ||
} | ||
// ----- EXIT ----- | ||
// The exit transition is an array of up to 3 motion atoms: opacity, size and whitespace. | ||
const exitAtoms = []; | ||
// Fade out only if animateOpacity is false. Otherwise, leave opacity unaffected. | ||
// Fade out only if animateOpacity is true. Otherwise, leave opacity unaffected. | ||
if (animateOpacity) { | ||
exitAtoms.push({ | ||
keyframes: [ | ||
{ | ||
opacity: toOpacity | ||
}, | ||
{ | ||
opacity: fromOpacity | ||
} | ||
], | ||
duration: exitDuration, | ||
exitAtoms.push(opacityExitAtom({ | ||
duration: exitOpacityDuration, | ||
easing: exitEasing | ||
}); | ||
})); | ||
} | ||
exitAtoms.push(// Collapse size (height or width) | ||
{ | ||
keyframes: [ | ||
{ | ||
[sizeName]: toSize, | ||
[overflowName]: 'hidden' | ||
}, | ||
{ | ||
[sizeName]: fromSize, | ||
[overflowName]: 'hidden' | ||
} | ||
], | ||
duration: exitDuration, | ||
exitAtoms.push(sizeExitAtom({ | ||
orientation, | ||
duration: exitSizeDuration, | ||
easing: exitEasing, | ||
fill: 'both' | ||
}); | ||
exitAtoms.push(// Collapse whitespace (padding currently). | ||
{ | ||
// Animate from the element's natural values (i.e. the missing other keyframe) to zero values. | ||
keyframes: [ | ||
{ | ||
...collapsedWhiteSpace, | ||
offset: 1 | ||
} | ||
], | ||
duration: exitDuration, | ||
element, | ||
delay: exitDelay | ||
})); | ||
exitAtoms.push(whitespaceExitAtom({ | ||
orientation, | ||
duration: exitSizeDuration, | ||
easing: exitEasing, | ||
fill: 'forwards' | ||
}); | ||
delay: exitDelay | ||
})); | ||
return { | ||
@@ -124,2 +57,10 @@ enter: enterAtoms, | ||
}; | ||
/** Defines a presence motion for collapse/expand. */ export const createCollapsePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEaseMax, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>// Implement a regular collapse as a special case of the delayed collapse, | ||
// where the delays are zero, and the size and opacity durations are equal. | ||
createCollapseDelayedPresence({ | ||
enterSizeDuration: enterDuration, | ||
enterEasing, | ||
exitSizeDuration: exitDuration, | ||
exitEasing | ||
}); | ||
/** A React component that applies collapse/expand transitions to its children. */ export const Collapse = createPresenceComponent(createCollapsePresence()); | ||
@@ -132,1 +73,8 @@ export const CollapseSnappy = createPresenceComponent(createCollapsePresence({ | ||
})); | ||
export const CollapseDelayed = createPresenceComponent(createCollapseDelayedPresence({ | ||
enterSizeDuration: motionTokens.durationNormal, | ||
enterOpacityDuration: motionTokens.durationSlower, | ||
enterDelay: motionTokens.durationNormal, | ||
exitDelay: motionTokens.durationSlower, | ||
enterEasing: motionTokens.curveEasyEase | ||
})); |
@@ -1,3 +0,3 @@ | ||
export { Collapse, CollapseSnappy, CollapseExaggerated, createCollapsePresence } from './components/Collapse'; | ||
export { Collapse, CollapseSnappy, CollapseExaggerated, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse'; | ||
export { Fade, FadeSnappy, FadeExaggerated } from './components/Fade'; | ||
export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale'; |
{ | ||
"name": "@fluentui/react-motion-components-preview", | ||
"version": "0.0.0-nightly-20241018-0406.1", | ||
"version": "0.0.0-nightly-20241022-0408.1", | ||
"description": "A preview package for Fluent UI motion components, providing a collection of components", | ||
@@ -32,4 +32,4 @@ "main": "lib-commonjs/index.js", | ||
"@fluentui/eslint-plugin": "*", | ||
"@fluentui/react-conformance": "0.0.0-nightly-20241018-0406.1", | ||
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241018-0406.1", | ||
"@fluentui/react-conformance": "0.0.0-nightly-20241022-0408.1", | ||
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241022-0408.1", | ||
"@fluentui/scripts-api-extractor": "*", | ||
@@ -39,3 +39,3 @@ "@fluentui/scripts-tasks": "*" | ||
"dependencies": { | ||
"@fluentui/react-motion": "0.0.0-nightly-20241018-0406.1", | ||
"@fluentui/react-motion": "0.0.0-nightly-20241022-0408.1", | ||
"@swc/helpers": "^0.5.1" | ||
@@ -42,0 +42,0 @@ }, |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
86318
45
882
+ Added@fluentui/keyboard-keys@0.0.0-nightly-20241022-0408.1(transitive)
+ Added@fluentui/react-motion@0.0.0-nightly-20241022-0408.1(transitive)
+ Added@fluentui/react-shared-contexts@0.0.0-nightly-20241022-0408.1(transitive)
+ Added@fluentui/react-theme@0.0.0-nightly-20241022-0408.1(transitive)
+ Added@fluentui/react-utilities@0.0.0-nightly-20241022-0408.1(transitive)
+ Added@fluentui/tokens@0.0.0-nightly-20241022-0408.1(transitive)
- Removed@fluentui/keyboard-keys@0.0.0-nightly-20241018-0406.1(transitive)
- Removed@fluentui/react-motion@0.0.0-nightly-20241018-0406.1(transitive)
- Removed@fluentui/react-shared-contexts@0.0.0-nightly-20241018-0406.1(transitive)
- Removed@fluentui/react-theme@0.0.0-nightly-20241018-0406.1(transitive)
- Removed@fluentui/react-utilities@0.0.0-nightly-20241018-0406.1(transitive)
- Removed@fluentui/tokens@0.0.0-nightly-20241018-0406.1(transitive)