Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,196 @@
# Change Log - @fluentui/react-motion-components-preview
This log was last generated on Thu, 22 Jan 2026 17:06:32 GMT and should not be manually modified.
<!-- Start content -->
## [0.15.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.15.0)
Thu, 22 Jan 2026 17:06:32 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.14.1..@fluentui/react-motion-components-preview_v0.15.0)
### Minor changes
- refactor(motion-components): improve parameter naming from 'from/to' to 'out/in' ([PR #35592](https://github.com/microsoft/fluentui/pull/35592) by robertpenner@microsoft.com)
## [0.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.14.0)
Thu, 06 Nov 2025 17:24:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.13.0..@fluentui/react-motion-components-preview_v0.14.0)
### Minor changes
- feat(motion): Add Stagger choreography component ([PR #34705](https://github.com/microsoft/fluentui/pull/34705) by robertpenner@microsoft.com)
## [0.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.13.0)
Thu, 06 Nov 2025 15:01:23 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.12.0..@fluentui/react-motion-components-preview_v0.13.0)
### Minor changes
- feat(motion): export standard motion atoms ([PR #35421](https://github.com/microsoft/fluentui/pull/35421) by robertpenner@microsoft.com)
## [0.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.12.0)
Fri, 31 Oct 2025 16:22:05 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.11.0..@fluentui/react-motion-components-preview_v0.12.0)
### Minor changes
- feat(motion): standardize from/to parameters ([PR #35419](https://github.com/microsoft/fluentui/pull/35419) by robertpenner@microsoft.com)
## [0.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.11.0)
Fri, 03 Oct 2025 14:19:04 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.10.0..@fluentui/react-motion-components-preview_v0.11.0)
### Minor changes
- refactor(Collapse): simplify parameter types ([PR #35262](https://github.com/microsoft/fluentui/pull/35262) by robertpenner@microsoft.com)
### Patches
- fix(Collapse): make size animation work with delay ([PR #35269](https://github.com/microsoft/fluentui/pull/35269) by robertpenner@microsoft.com)
## [0.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.10.0)
Mon, 08 Sep 2025 12:51:10 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.9.0..@fluentui/react-motion-components-preview_v0.10.0)
### Minor changes
- feat(motion): add delay parameter to motion components ([PR #35077](https://github.com/microsoft/fluentui/pull/35077) by robertpenner@microsoft.com)
### Patches
- refactor(motion): normalize motion atom parameters & types ([PR #35076](https://github.com/microsoft/fluentui/pull/35076) by robertpenner@microsoft.com)
- fix(motion): apply opacity in animations using fill mode ([PR #35078](https://github.com/microsoft/fluentui/pull/35078) by robertpenner@microsoft.com)
- test(motion): expand motion atom testing ([PR #35079](https://github.com/microsoft/fluentui/pull/35079) by robertpenner@microsoft.com)
- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
## [0.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.9.0)
Thu, 21 Aug 2025 12:25:13 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.8.1..@fluentui/react-motion-components-preview_v0.9.0)
### Minor changes
- feat(motion): add Rotate presence motion component ([PR #34928](https://github.com/microsoft/fluentui/pull/34928) by robertpenner@microsoft.com)
## [0.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.8.0)
Mon, 28 Jul 2025 18:48:19 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.7.0..@fluentui/react-motion-components-preview_v0.8.0)
### Minor changes
- feat(motion): add Fade presence motion component ([PR #34839](https://github.com/microsoft/fluentui/pull/34839) by robertpenner@microsoft.com)
## [0.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.7.0)
Wed, 16 Jul 2025 13:52:47 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.6.2..@fluentui/react-motion-components-preview_v0.7.0)
### Minor changes
- refactor(Collapse): make consistent with other motion components ([PR #34831](https://github.com/microsoft/fluentui/pull/34831) by robertpenner@microsoft.com)
- feat(motion): add Slide presence motion component ([PR #34774](https://github.com/microsoft/fluentui/pull/34774) by robertpenner@microsoft.com)
- refactor(motion): apply consistent patterns across Fade and Scale ([PR #34830](https://github.com/microsoft/fluentui/pull/34830) by robertpenner@microsoft.com)
## [0.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.6.2)
Thu, 26 Jun 2025 14:11:54 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.5.0..@fluentui/react-motion-components-preview_v0.6.2)
### Patches
- fix(Scale): update variant parameters to design spec & refactor internally ([PR #34712](https://github.com/microsoft/fluentui/pull/34712) by robertpenner@microsoft.com)
## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.5.0)
Wed, 14 May 2025 18:49:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.4.3..@fluentui/react-motion-components-preview_v0.5.0)
### Minor changes
- refactor(motion): simplify Fade & Scale variant creation with createPresenceComponentVariant ([PR #34042](https://github.com/microsoft/fluentui/pull/34042) by robertpenner@microsoft.com)
## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.4.3)
Wed, 22 Jan 2025 14:00:19 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.4.0..@fluentui/react-motion-components-preview_v0.4.3)
### Patches
- refactor(Collapse): streamline motion atom functions ([PR #33463](https://github.com/microsoft/fluentui/pull/33463) by robertpenner@microsoft.com)
## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.4.0)
Mon, 09 Dec 2024 17:38:13 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.3.2..@fluentui/react-motion-components-preview_v0.4.0)
### Minor changes
- feat(Collapse): add margin to whitespace animation ([PR #33405](https://github.com/microsoft/fluentui/pull/33405) by robertpenner@microsoft.com)
### Patches
- feat(motion): Refactor scale, migrate to new variant structure ([PR #33341](https://github.com/microsoft/fluentui/pull/33341) by olkatruk@microsoft.com)
## [0.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.3.2)
Fri, 06 Dec 2024 12:53:40 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.3.0..@fluentui/react-motion-components-preview_v0.3.2)
### Patches
- chore: remove usage of "export *" ([PR #33380](https://github.com/microsoft/fluentui/pull/33380) by olfedias@microsoft.com)
## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.3.0)
Mon, 11 Nov 2024 10:00:46 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.3.0)
### Minor changes
- feat: add CollapseDelayed motion component variant ([PR #33069](https://github.com/microsoft/fluentui/pull/33069) by robertpenner@microsoft.com)
- Rename motion component variants ...Exaggerated to ...Relaxed ([PR #33182](https://github.com/microsoft/fluentui/pull/33182) by olkatruk@microsoft.com)
### Patches
- refactor: migrate Fade motion component to new variant structure ([PR #33080](https://github.com/microsoft/fluentui/pull/33080) by robertpenner@microsoft.com)
- fix: handle content padding in Collapse ([PR #33063](https://github.com/microsoft/fluentui/pull/33063) by robertpenner@microsoft.com)
- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
Tue, 15 Oct 2024 17:17:49 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.1..@fluentui/react-motion-components-preview_v0.2.0)
### Minor changes
- refactor: simplify motion component variant creation ([PR #32939](https://github.com/microsoft/fluentui/pull/32939) by robertpenner@microsoft.com)
- feat: add Collapse orientation parameter & horizontal implementation ([PR #32998](https://github.com/microsoft/fluentui/pull/32998) by robertpenner@microsoft.com)
### Patches
- fix: Collapse should only effect opacity when animateOpacity is true ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by robertpenner@microsoft.com)
## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.1)
Tue, 23 Jul 2024 20:13:12 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.1.0..@fluentui/react-motion-components-preview_v0.1.1)
### Patches
- feat: add Fade motion component ([PR #32020](https://github.com/microsoft/fluentui/pull/32020) by olkatruk@microsoft.com)
- feat(motion): add Scale motion component ([PR #32021](https://github.com/microsoft/fluentui/pull/32021) by olkatruk@microsoft.com)
## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.1.0)
Mon, 15 Jul 2024 17:25:37 GMT
### Minor changes
- feat: release preview package ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by olkatruk@microsoft.com)

View File

@@ -0,0 +1,15 @@
@fluentui/react-motion-components-preview
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

View File

@@ -0,0 +1,5 @@
# @fluentui/react-motion-components-preview
**React Motion Components for [Fluent UI React](https://react.fluentui.dev/)**
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

View File

@@ -0,0 +1,407 @@
import { AtomMotion } from '@fluentui/react-motion';
import { PresenceComponent } from '@fluentui/react-motion';
import { PresenceComponentProps } from '@fluentui/react-motion';
import type { PresenceDirection } from '@fluentui/react-motion';
import * as React_2 from 'react';
/**
* Common opacity animation parameter for motion components.
*/
declare type AnimateOpacity = {
/** Whether to animate the opacity. Defaults to `true`. */
animateOpacity?: boolean;
};
declare type Axis3D = 'x' | 'y' | 'z';
declare type Axis3D_2 = NonNullable<RotateParams['axis']>;
/**
* Common parameters shared by all atom functions.
*/
declare type BaseAtomParams = {
/** The functional direction of the motion: 'enter' or 'exit'. */
direction: PresenceDirection;
/** The duration of the motion in milliseconds. */
duration: number;
/** The easing curve for the motion. */
easing?: EffectTiming['easing'];
/** Time (ms) to delay the animation. */
delay?: EffectTiming['delay'];
};
/**
* Base presence parameters combining duration, easing, and delay for motion components.
*/
declare type BasePresenceParams = PresenceDuration & PresenceEasing & PresenceDelay;
/** A React component that applies blur in/out transitions to its children. */
export declare const Blur: PresenceComponent<BlurParams>;
/**
* Generates a motion atom object for a blur-in or blur-out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
* @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
* @param delay - Time (ms) to delay the animation. Defaults to 0.
* @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
*/
export declare const blurAtom: ({ direction, duration, easing, delay, outRadius, inRadius, }: BlurAtomParams) => AtomMotion;
declare interface BlurAtomParams extends BaseAtomParams {
/** Blur radius for the out state (exited). Defaults to '10px'. */
outRadius?: string;
/** Blur radius for the in state (entered). Defaults to '0px'. */
inRadius?: string;
}
export declare type BlurParams = BasePresenceParams & AnimateOpacity & {
/** Blur radius for the out state (exited). Defaults to '10px'. */
outRadius?: string;
/** Blur radius for the in state (entered). Defaults to '0px'. */
inRadius?: string;
};
/** A React component that applies collapse/expand transitions to its children. */
export declare const Collapse: PresenceComponent<CollapseParams>;
/** A React component that applies collapse/expand transitions with delayed fade to its children. */
export declare const CollapseDelayed: PresenceComponent<CollapseParams>;
/**
* Duration properties for granular timing control in Collapse animations.
*/
export declare type CollapseDurations = {
/** Time (ms) for the size animation during enter. Defaults to `duration` for unified timing. */
sizeDuration?: number;
/** Time (ms) for the opacity animation during enter. Defaults to `sizeDuration` for synchronized timing. */
opacityDuration?: number;
/** Time (ms) for the size animation during exit. Defaults to `exitDuration` for unified timing. */
exitSizeDuration?: number;
/** Time (ms) for the opacity animation during exit. Defaults to `exitSizeDuration` for synchronized timing. */
exitOpacityDuration?: number;
};
declare type CollapseOrientation = 'horizontal' | 'vertical';
export declare type CollapseParams = BasePresenceParams & AnimateOpacity & CollapseDurations & {
/** The orientation of the size animation. Defaults to `'vertical'` to expand/collapse the height. */
orientation?: CollapseOrientation;
/** Size for the out state (collapsed). Defaults to `'0px'`. */
outSize?: string;
/**
* Time (ms) to delay the inner stagger between size and opacity animations.
* On enter this delays the opacity after size; on exit this delays the size after opacity.
* Defaults to 0.
*/
staggerDelay?: number;
/**
* Time (ms) to delay the inner stagger during exit. Defaults to the `staggerDelay` param for symmetry.
*/
exitStaggerDelay?: number;
};
export declare const CollapseRelaxed: PresenceComponent<CollapseParams>;
export declare const CollapseSnappy: PresenceComponent<CollapseParams>;
/** A React component that applies fade in/out transitions to its children. */
export declare const Fade: PresenceComponent<FadeParams>;
/**
* Generates a motion atom object for a fade-in or fade-out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param delay - The delay before the motion starts. Defaults to 0.
* @param outOpacity - Opacity for the out state (exited). Defaults to 0.
* @param inOpacity - Opacity for the in state (entered). Defaults to 1.
* @returns A motion atom object with opacity keyframes and the supplied duration and easing.
*/
export declare const fadeAtom: ({ direction, duration, easing, delay, outOpacity, inOpacity, }: FadeAtomParams) => AtomMotion;
declare interface FadeAtomParams extends BaseAtomParams {
/** Defines how values are applied before and after execution. Defaults to 'both'. */
fill?: FillMode;
/** Opacity for the out state (exited). Defaults to 0. */
outOpacity?: number;
/** Opacity for the in state (entered). Defaults to 1. */
inOpacity?: number;
}
export declare type FadeParams = BasePresenceParams & {
/** Opacity for the out state (exited). Defaults to 0. */
outOpacity?: number;
/** Opacity for the in state (entered). Defaults to 1. */
inOpacity?: number;
};
export declare const FadeRelaxed: PresenceComponent<FadeParams>;
export declare const FadeSnappy: PresenceComponent<FadeParams>;
/**
* Common delay parameters for presence motion components.
*/
declare type PresenceDelay = {
/** Time (ms) to delay the enter transition. */
delay?: EffectTiming['delay'];
/** Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry. */
exitDelay?: EffectTiming['delay'];
};
/**
* Common duration parameters for presence motion components.
*/
declare type PresenceDuration = {
/** Time (ms) for the enter transition. */
duration?: number;
/** Time (ms) for the exit transition. Defaults to the `duration` param for symmetry. */
exitDuration?: number;
};
/**
* Common easing parameters for presence motion components.
*/
declare type PresenceEasing = {
/** Easing curve for the enter transition. */
easing?: string;
/** Easing curve for the exit transition. Defaults to the `easing` param for symmetry. */
exitEasing?: string;
};
export declare const Rotate: PresenceComponent<RotateParams>;
/**
* Generates a motion atom object for a rotation around a single axis.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
* @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
* @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
* @param delay - Time (ms) to delay the animation. Defaults to 0.
* @returns A motion atom object with rotate keyframes and the supplied duration and easing.
*/
export declare const rotateAtom: ({ direction, duration, easing, delay, axis, outAngle, inAngle, }: RotateAtomParams) => AtomMotion;
declare interface RotateAtomParams extends BaseAtomParams {
axis?: Axis3D_2;
/** Rotation angle for the out state (exited) in degrees. Defaults to -90. */
outAngle?: number;
/** Rotation angle for the in state (entered) in degrees. Defaults to 0. */
inAngle?: number;
}
export declare type RotateParams = BasePresenceParams & AnimateOpacity & {
/**
* The axis of rotation: 'x', 'y', or 'z'.
* Defaults to 'z'.
*/
axis?: Axis3D;
/**
* Rotation angle for the out state (exited) in degrees.
* Defaults to -90.
*/
outAngle?: number;
/**
* Rotation angle for the in state (entered) in degrees.
* Defaults to 0.
*/
inAngle?: number;
};
/** A React component that applies scale in/out transitions to its children. */
export declare const Scale: PresenceComponent<ScaleParams>;
/**
* Generates a motion atom object for a scale in or scale out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param outScale - Scale for the out state (exited). Defaults to 0.9.
* @param inScale - Scale for the in state (entered). Defaults to 1.
* @param delay - Time (ms) to delay the animation. Defaults to 0.
* @returns A motion atom object with scale keyframes and the supplied duration and easing.
*/
export declare const scaleAtom: ({ direction, duration, easing, delay, outScale, inScale, }: ScaleAtomParams) => AtomMotion;
declare interface ScaleAtomParams extends BaseAtomParams {
/** Scale for the out state (exited). Defaults to 0.9. */
outScale?: number;
/** Scale for the in state (entered). Defaults to 1. */
inScale?: number;
}
export declare type ScaleParams = BasePresenceParams & AnimateOpacity & {
/** Scale for the out state (exited). Defaults to `0.9`. */
outScale?: number;
/** Scale for the in state (entered). Defaults to `1`. */
inScale?: number;
};
export declare const ScaleRelaxed: PresenceComponent<ScaleParams>;
export declare const ScaleSnappy: PresenceComponent<ScaleParams>;
/** A React component that applies slide in/out transitions to its children. */
export declare const Slide: PresenceComponent<SlideParams>;
/**
* Generates a motion atom object for a slide-in or slide-out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
* @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
* @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
* @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
* @param delay - Time (ms) to delay the animation. Defaults to 0.
* @returns A motion atom object with translate keyframes and the supplied duration and easing.
*/
export declare const slideAtom: ({ direction, duration, easing, delay, outX, outY, inX, inY, }: SlideAtomParams) => AtomMotion;
declare interface SlideAtomParams extends BaseAtomParams {
/** X translate for the out state (exited). Defaults to '0px'. */
outX?: string;
/** Y translate for the out state (exited). Defaults to '0px'. */
outY?: string;
/** X translate for the in state (entered). Defaults to '0px'. */
inX?: string;
/** Y translate for the in state (entered). Defaults to '0px'. */
inY?: string;
}
export declare type SlideParams = BasePresenceParams & AnimateOpacity & {
/** X translate for the out state (exited). Defaults to `'0px'`. */
outX?: string;
/** Y translate for the out state (exited). Defaults to `'0px'`. */
outY?: string;
/** X translate for the in state (entered). Defaults to `'0px'`. */
inX?: string;
/** Y translate for the in state (entered). Defaults to `'0px'`. */
inY?: string;
};
export declare const SlideRelaxed: PresenceComponent<SlideParams>;
export declare const SlideSnappy: PresenceComponent<SlideParams>;
/**
* Stagger is a component that manages the staggered entrance and exit of its children.
* Children are animated in sequence with configurable timing between each item.
* Stagger can be interactively toggled between entrance and exit animations using the `visible` prop.
*
* @param children - React elements to animate. Elements are cloned with animation props.
* @param visible - Controls animation direction. When `true`, the group is animating "enter" (items shown);
* when `false`, the group is animating "exit" (items hidden). Defaults to `false`.
* @param itemDelay - Milliseconds between each item's animation start.
* Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).
* @param itemDuration - Milliseconds each item's animation lasts. Only used with `delayMode="timing"`.
* Defaults to the package's default item duration (see `DEFAULT_ITEM_DURATION`).
* @param reversed - Whether to reverse the stagger sequence (last item animates first). Defaults to `false`.
* @param hideMode - How children's visibility/mounting is managed. Auto-detects if not specified.
* @param delayMode - How staggering timing is implemented. Auto-detects if not specified.
* @param onMotionFinish - Callback invoked when the staggered animation sequence completes.
*
* **Auto-detection behavior:**
* - **hideMode**: Presence components use `'visibleProp'`, DOM elements use `'visibilityStyle'`
* - **delayMode**: Components with delay support use `'delayProp'` (most performant), others use `'timing'`
*
* **hideMode options:**
* - `'visibleProp'`: Children are presence components with `visible` prop (always rendered, visibility controlled via prop)
* - `'visibilityStyle'`: Children remain in DOM with inline style visibility: hidden/visible (preserves layout space)
* - `'unmount'`: Children are mounted/unmounted from DOM based on visibility
*
* **delayMode options:**
* - `'timing'`: Manages visibility over time using JavaScript timing
* - `'delayProp'`: Passes delay props to motion components to use native Web Animations API delays (most performant)
*
* **Static variants:**
* - `<Stagger.In>` - One-way stagger for entrance animations only (auto-detects optimal modes)
* - `<Stagger.Out>` - One-way stagger for exit animations only (auto-detects optimal modes)
*
* @example
* ```tsx
* import { Stagger, Fade, Scale, Rotate } from '@fluentui/react-motion-components-preview';
*
* // Auto-detects optimal modes for presence components (delayProp + visibleProp)
* <Stagger visible={isVisible} itemDelay={150}>
* <Fade><div>Item 2</div></Fade>
* <Scale><div>Item 1</div></Scale>
* <Rotate><div>Item 3</div></Rotate>
* </Stagger>
*
* // Auto-detects optimal modes for motion components (delayProp + unmount)
* <Stagger.In itemDelay={100}>
* <Scale.In><div>Item 1</div></Scale.In>
* <Fade.In><div>Item 2</div></Fade.In>
* </Stagger.In>
*
* // Auto-detects timing mode for DOM elements (timing + visibilityStyle)
* <Stagger visible={isVisible} itemDelay={150} onMotionFinish={handleComplete}>
* <div>Item 1</div>
* <div>Item 2</div>
* <div>Item 3</div>
* </Stagger>
*
* // Override auto-detection when needed
* <Stagger visible={isVisible} delayMode="timing" hideMode="unmount">
* <CustomComponent>Item 1</CustomComponent>
* </Stagger>
* ```
*/
export declare const Stagger: React_2.FC<StaggerProps> & {
In: React_2.FC<Omit<StaggerProps, "visible">>;
Out: React_2.FC<Omit<StaggerProps, "visible">>;
};
/**
* Defines how Stagger implements the timing of staggered animations.
* - 'timing': Manages visibility over time using JavaScript timing (current behavior)
* - 'delayProp': Passes delay props to motion components to use native Web Animations API delays
*/
declare type StaggerDelayMode = 'timing' | 'delayProp';
/**
* Defines how Stagger manages its children's visibility/mounting.
* - 'visibleProp': Children are components with a `visible` prop (e.g. motion components)
* - 'visibilityStyle': Children remain in DOM with inline style `visibility: hidden | visible`
* - 'unmount': Children are mounted/unmounted from DOM based on visibility
*/
declare type StaggerHideMode = 'visibleProp' | 'visibilityStyle' | 'unmount';
/**
* Props for the Stagger component that manages staggered entrance and exit animations.
*/
export declare interface StaggerProps {
/** React elements to animate. Elements are cloned with animation props. */
children: React_2.ReactNode;
/**
* Controls children animation direction. When `true`, the group is animating "enter" (items shown).
* When `false`, the group is animating "exit" (items hidden).
*/
visible?: PresenceComponentProps['visible'];
/** Whether to reverse the stagger sequence (last item animates first). Defaults to `false`. */
reversed?: boolean;
/**
* Milliseconds between each child's animation start.
* Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).
*/
itemDelay?: number;
/**
* Milliseconds each child's animation lasts. Only used with `delayMode="timing"`.
* Defaults to the package's default duration (see `DEFAULT_ITEM_DURATION`).
*/
itemDuration?: number;
/** How children's visibility/mounting is managed. Auto-detects if not specified. */
hideMode?: StaggerHideMode;
/** How staggering timing is implemented. Defaults to 'timing'. */
delayMode?: StaggerDelayMode;
/** Callback invoked when the staggered animation sequence completes. */
onMotionFinish?: () => void;
}
export { }

View File

@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "blurAtom", {
enumerable: true,
get: function() {
return blurAtom;
}
});
const _reactmotion = require("@fluentui/react-motion");
const blurAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, outRadius = '10px', inRadius = '0px' })=>{
const keyframes = [
{
filter: `blur(${outRadius})`
},
{
filter: `blur(${inRadius})`
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay
};
};

View File

@@ -0,0 +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 /** Blur radius for the out state (exited). Defaults to '10px'. */\n outRadius?: string;\n /** Blur radius for the in state (entered). Defaults to '0px'. */\n inRadius?: 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 outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.\n * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.\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 outRadius = '10px',\n inRadius = '0px',\n}: BlurAtomParams): AtomMotion => {\n const keyframes = [{ filter: `blur(${outRadius})` }, { filter: `blur(${inRadius})` }];\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","outRadius","inRadius","keyframes","filter","reverse"],"mappings":";;;;+BAoBaA;;;eAAAA;;;6BApB4B;AAoBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,YAAY,MAAM,EAClBC,WAAW,KAAK,EACD;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEH,UAAU,CAAC,CAAC;QAAC;QAAG;YAAEG,QAAQ,CAAC,KAAK,EAAEF,SAAS,CAAC,CAAC;QAAC;KAAE;IACrF,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "fadeAtom", {
enumerable: true,
get: function() {
return fadeAtom;
}
});
const _reactmotion = require("@fluentui/react-motion");
const fadeAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, outOpacity = 0, inOpacity = 1 })=>{
const keyframes = [
{
opacity: outOpacity
},
{
opacity: inOpacity
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay,
// Applying opacity backwards and forwards in time is important
// to avoid a bug where a delayed animation is not hidden when it should be.
fill: 'both'
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface FadeAtomParams extends BaseAtomParams {\n /** Defines how values are applied before and after execution. Defaults to 'both'. */\n fill?: FillMode;\n\n /** Opacity for the out state (exited). Defaults to 0. */\n outOpacity?: number;\n\n /** Opacity for the in state (entered). Defaults to 1. */\n inOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-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 delay - The delay before the motion starts. Defaults to 0.\n * @param outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). Defaults to 1.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n outOpacity = 0,\n inOpacity = 1,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: outOpacity }, { opacity: inOpacity }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n // Applying opacity backwards and forwards in time is important\n // to avoid a bug where a delayed animation is not hidden when it should be.\n fill: 'both',\n };\n};\n"],"names":["fadeAtom","direction","duration","easing","motionTokens","curveLinear","delay","outOpacity","inOpacity","keyframes","opacity","reverse","fill"],"mappings":";;;;+BAwBaA;;;eAAAA;;;6BAxB4B;AAwBlC,MAAMA,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,CAAC,EACdC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASH;QAAW;QAAG;YAAEG,SAASF;QAAU;KAAE;IACnE,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EM,MAAM;IACR;AACF"}

View File

@@ -0,0 +1,33 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "rotateAtom", {
enumerable: true,
get: function() {
return rotateAtom;
}
});
const _reactmotion = require("@fluentui/react-motion");
const createRotateValue = (axis, angle)=>{
return `${axis.toLowerCase()} ${angle}deg`;
};
const rotateAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, axis = 'z', outAngle = -90, inAngle = 0 })=>{
const keyframes = [
{
rotate: createRotateValue(axis, outAngle)
},
{
rotate: createRotateValue(axis, inAngle)
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay
};
};

View File

@@ -0,0 +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 /** Rotation angle for the out state (exited) in degrees. Defaults to -90. */\n outAngle?: number;\n /** Rotation angle for the in state (entered) in degrees. Defaults to 0. */\n inAngle?: 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 outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.\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 = 'z',\n outAngle = -90,\n inAngle = 0,\n}: RotateAtomParams): AtomMotion => {\n const keyframes = [{ rotate: createRotateValue(axis, outAngle) }, { rotate: createRotateValue(axis, inAngle) }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\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","outAngle","inAngle","keyframes","rotate","reverse"],"mappings":";;;;+BA6BaA;;;eAAAA;;;6BA7B4B;AAczC,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,EACVS,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACM;IACjB,MAAMC,YAAY;QAAC;YAAEC,QAAQb,kBAAkBC,MAAMS;QAAU;QAAG;YAAEG,QAAQb,kBAAkBC,MAAMU;QAAS;KAAE;IAC/G,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IAEA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}

View File

@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "scaleAtom", {
enumerable: true,
get: function() {
return scaleAtom;
}
});
const _reactmotion = require("@fluentui/react-motion");
const scaleAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, outScale = 0.9, inScale = 1 })=>{
const keyframes = [
{
scale: outScale
},
{
scale: inScale
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay
};
};

View File

@@ -0,0 +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 /** Scale for the out state (exited). Defaults to 0.9. */\n outScale?: number;\n /** Scale for the in state (entered). Defaults to 1. */\n inScale?: 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 outScale - Scale for the out state (exited). Defaults to 0.9.\n * @param inScale - Scale for the in state (entered). 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 outScale = 0.9,\n inScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: outScale }, { scale: inScale }];\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","outScale","inScale","keyframes","scale","reverse"],"mappings":";;;;+BAoBaA;;;eAAAA;;;6BApB4B;AAoBlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,WAAW,GAAG,EACdC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAS;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC3D,IAAIP,cAAc,QAAQ;QACxBQ,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAP;QACAC;QACAG;IACF;AACF"}

View File

@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "slideAtom", {
enumerable: true,
get: function() {
return slideAtom;
}
});
const _reactmotion = require("@fluentui/react-motion");
const slideAtom = ({ direction, duration, easing = _reactmotion.motionTokens.curveLinear, delay = 0, outX = '0px', outY = '0px', inX = '0px', inY = '0px' })=>{
const keyframes = [
{
translate: `${outX} ${outY}`
},
{
translate: `${inX} ${inY}`
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay
};
};

View File

@@ -0,0 +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 /** X translate for the out state (exited). Defaults to '0px'. */\n outX?: string;\n /** Y translate for the out state (exited). Defaults to '0px'. */\n outY?: string;\n /** X translate for the in state (entered). Defaults to '0px'. */\n inX?: string;\n /** Y translate for the in state (entered). Defaults to '0px'. */\n inY?: 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 outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.\n * @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.\n * @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.\n * @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). 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 outX = '0px',\n outY = '0px',\n inX = '0px',\n inY = '0px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${outX} ${outY}` }, { translate: `${inX} ${inY}` }];\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","outX","outY","inX","inY","keyframes","translate","reverse"],"mappings":";;;;+BA0BaA;;;eAAAA;;;6BA1B4B;AA0BlC,MAAMA,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASC,yBAAY,CAACC,WAAW,EACjCC,QAAQ,CAAC,EACTC,OAAO,KAAK,EACZC,OAAO,KAAK,EACZC,MAAM,KAAK,EACXC,MAAM,KAAK,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGL,KAAK,CAAC,EAAEC,MAAM;QAAC;QAAG;YAAEI,WAAW,GAAGH,IAAI,CAAC,EAAEC,KAAK;QAAC;KAAE;IACpF,IAAIT,cAAc,QAAQ;QACxBU,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAT;QACAC;QACAG;IACF;AACF"}

View File

@@ -0,0 +1,137 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Stagger", {
enumerable: true,
get: function() {
return Stagger;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useStaggerItemsVisibility = require("./useStaggerItemsVisibility");
const _utils = require("./utils");
/**
* Shared utility to detect optimal stagger modes based on children components.
* Consolidates the auto-detection logic used by both StaggerMain and createStaggerDirection.
*/ const detectStaggerModes = (children, options)=>{
const { hideMode, delayMode, fallbackHideMode = 'visibilityStyle' } = options;
const childMapping = (0, _utils.getStaggerChildMapping)(children);
const elements = Object.values(childMapping).map((item)=>item.element);
const hasVisiblePropSupport = elements.every((child)=>(0, _utils.acceptsVisibleProp)(child));
const hasDelayPropSupport = elements.every((child)=>(0, _utils.acceptsDelayProps)(child));
return {
hideMode: hideMode !== null && hideMode !== void 0 ? hideMode : hasVisiblePropSupport ? 'visibleProp' : fallbackHideMode,
delayMode: delayMode !== null && delayMode !== void 0 ? delayMode : hasDelayPropSupport ? 'delayProp' : 'timing'
};
};
const StaggerOneWay = ({ children, direction, itemDelay = _utils.DEFAULT_ITEM_DELAY, itemDuration = _utils.DEFAULT_ITEM_DURATION, reversed = false, hideMode, delayMode = 'timing', onMotionFinish })=>{
const childMapping = _react.useMemo(()=>(0, _utils.getStaggerChildMapping)(children), [
children
]);
// Always call hooks at the top level, regardless of delayMode
const { itemsVisibility } = (0, _useStaggerItemsVisibility.useStaggerItemsVisibility)({
childMapping,
itemDelay,
itemDuration,
direction,
reversed,
onMotionFinish,
hideMode
});
// For delayProp mode, pass delay props directly to motion components
if (delayMode === 'delayProp') {
return /*#__PURE__*/ _react.createElement(_react.Fragment, null, Object.entries(childMapping).map(([key, { element, index }])=>{
const staggerIndex = reversed ? Object.keys(childMapping).length - 1 - index : index;
const delay = staggerIndex * itemDelay;
// Clone element with delay prop (for enter direction) or exitDelay prop (for exit direction)
const delayProp = direction === 'enter' ? {
delay
} : {
exitDelay: delay
};
// Only set visible prop if the component supports it
// Set visible based on direction: true for enter, false for exit
const visibleProp = (0, _utils.acceptsVisibleProp)(element) ? {
visible: direction === 'enter'
} : {};
return /*#__PURE__*/ _react.cloneElement(element, {
key,
...visibleProp,
...delayProp
});
}));
}
// For timing mode, use the existing timing-based implementation
return /*#__PURE__*/ _react.createElement(_react.Fragment, null, Object.entries(childMapping).map(([key, { element }])=>{
if (hideMode === 'visibleProp') {
// Use a generic record type for props to avoid `any` while still allowing unknown prop shapes.
return /*#__PURE__*/ _react.cloneElement(element, {
key,
visible: itemsVisibility[key]
});
} else if (hideMode === 'visibilityStyle') {
const childProps = element.props;
const style = {
...childProps === null || childProps === void 0 ? void 0 : childProps.style,
visibility: itemsVisibility[key] ? 'visible' : 'hidden'
};
return /*#__PURE__*/ _react.cloneElement(element, {
key,
style
});
} else {
// unmount mode
return itemsVisibility[key] ? /*#__PURE__*/ _react.cloneElement(element, {
key
}) : null;
}
}));
};
// Shared helper for StaggerIn and StaggerOut
const createStaggerDirection = (direction)=>{
const StaggerDirection = ({ hideMode, delayMode, children, ...props })=>{
// Auto-detect modes for better performance with motion components
const { hideMode: resolvedHideMode, delayMode: resolvedDelayMode } = detectStaggerModes(children, {
hideMode,
delayMode,
// One-way stagger falls back to visibilityStyle if it doesn't detect visibleProp support
fallbackHideMode: 'visibilityStyle'
});
return /*#__PURE__*/ _react.createElement(StaggerOneWay, {
...props,
children: children,
direction: direction,
hideMode: resolvedHideMode,
delayMode: resolvedDelayMode
});
};
return StaggerDirection;
};
const StaggerIn = createStaggerDirection('enter');
const StaggerOut = createStaggerDirection('exit');
// Main Stagger component with auto-detection or explicit modes
const StaggerMain = (props)=>{
const { children, visible = false, hideMode, delayMode, ...rest } = props;
// Auto-detect modes for bidirectional stagger
const { hideMode: resolvedHideMode, delayMode: resolvedDelayMode } = detectStaggerModes(children, {
hideMode,
delayMode,
// Bidirectional stagger falls back to visibilityStyle if it doesn't detect visibleProp support
fallbackHideMode: 'visibilityStyle'
});
const direction = visible ? 'enter' : 'exit';
return /*#__PURE__*/ _react.createElement(StaggerOneWay, {
...rest,
children: children,
hideMode: resolvedHideMode,
delayMode: resolvedDelayMode,
direction: direction
});
};
const Stagger = Object.assign(StaggerMain, {
In: StaggerIn,
Out: StaggerOut
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Stagger", {
enumerable: true,
get: function() {
return _Stagger.Stagger;
}
});
const _Stagger = require("./Stagger");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/index.ts"],"sourcesContent":["export { Stagger } from './Stagger';\nexport type { StaggerProps } from './stagger-types';\n"],"names":["Stagger"],"mappings":";;;;+BAASA;;;eAAAA,gBAAO;;;yBAAQ"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/stagger-types.ts"],"sourcesContent":["import { PresenceComponentProps, PresenceDirection } from '@fluentui/react-motion';\nimport * as React from 'react';\n\n/**\n * Defines how Stagger manages its children's visibility/mounting.\n * - 'visibleProp': Children are components with a `visible` prop (e.g. motion components)\n * - 'visibilityStyle': Children remain in DOM with inline style `visibility: hidden | visible`\n * - 'unmount': Children are mounted/unmounted from DOM based on visibility\n */\nexport type StaggerHideMode = 'visibleProp' | 'visibilityStyle' | 'unmount';\n\n/**\n * Defines how Stagger implements the timing of staggered animations.\n * - 'timing': Manages visibility over time using JavaScript timing (current behavior)\n * - 'delayProp': Passes delay props to motion components to use native Web Animations API delays\n */\nexport type StaggerDelayMode = 'timing' | 'delayProp';\n\n/**\n * Props for the Stagger component that manages staggered entrance and exit animations.\n */\nexport interface StaggerProps {\n /** React elements to animate. Elements are cloned with animation props. */\n children: React.ReactNode;\n\n /**\n * Controls children animation direction. When `true`, the group is animating \"enter\" (items shown).\n * When `false`, the group is animating \"exit\" (items hidden).\n */\n visible?: PresenceComponentProps['visible'];\n\n /** Whether to reverse the stagger sequence (last item animates first). Defaults to `false`. */\n reversed?: boolean;\n\n /**\n * Milliseconds between each child's animation start.\n * Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).\n */\n itemDelay?: number;\n\n /**\n * Milliseconds each child's animation lasts. Only used with `delayMode=\"timing\"`.\n * Defaults to the package's default duration (see `DEFAULT_ITEM_DURATION`).\n */\n itemDuration?: number;\n\n /** How children's visibility/mounting is managed. Auto-detects if not specified. */\n hideMode?: StaggerHideMode;\n\n /** How staggering timing is implemented. Defaults to 'timing'. */\n delayMode?: StaggerDelayMode;\n\n /** Callback invoked when the staggered animation sequence completes. */\n onMotionFinish?: () => void;\n}\n\nexport interface StaggerOneWayProps extends Omit<StaggerProps, 'visible' | 'hideMode' | 'delayMode'> {\n /** Animation direction: 'enter' or 'exit'. */\n direction: PresenceDirection;\n\n /** How children's visibility/mounting is managed. Required - provided by wrapper components. */\n hideMode: StaggerHideMode;\n\n /** How staggering timing is implemented. Required - provided by wrapper components. */\n delayMode: StaggerDelayMode;\n}\n"],"names":[],"mappings":";;;;;iEACuB"}

View File

@@ -0,0 +1,161 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useStaggerItemsVisibility", {
enumerable: true,
get: function() {
return useStaggerItemsVisibility;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _utils = require("./utils");
function useStaggerItemsVisibility({ childMapping, itemDelay, itemDuration = _utils.DEFAULT_ITEM_DURATION, direction, reversed = false, onMotionFinish, hideMode = 'visibleProp' }) {
const [requestAnimationFrame, cancelAnimationFrame] = (0, _reactutilities.useAnimationFrame)();
// Stabilize the callback reference to avoid re-triggering effects on every render
const handleMotionFinish = (0, _reactutilities.useEventCallback)(onMotionFinish !== null && onMotionFinish !== void 0 ? onMotionFinish : ()=>{
return;
});
// Track animation state independently of child changes
const [animationKey, setAnimationKey] = _react.useState(0);
const prevDirection = _react.useRef(direction);
// Only trigger new animation when direction actually changes, not when children change
_react.useEffect(()=>{
if (prevDirection.current !== direction) {
setAnimationKey((prev)=>prev + 1);
prevDirection.current = direction;
}
}, [
direction
]);
// State: visibility mapping for all items by key
const [itemsVisibility, setItemsVisibility] = _react.useState(()=>{
const initial = {};
// All hide modes start in final state: visible for 'enter', hidden for 'exit'
const initialState = direction === 'enter';
Object.keys(childMapping).forEach((key)=>{
initial[key] = initialState;
});
return initial;
});
// Update visibility mapping when childMapping changes
_react.useEffect(()=>{
setItemsVisibility((prev)=>{
const next = {};
const targetState = direction === 'enter';
// Add or update items from new mapping
Object.keys(childMapping).forEach((key)=>{
if (key in prev) {
// Existing item - preserve its visibility state
next[key] = prev[key];
} else {
// New item - set to target state
next[key] = targetState;
}
});
// Note: Items that were in prev but not in childMapping are automatically removed
// because we only iterate over keys in childMapping
return next;
});
}, [
childMapping,
direction
]);
// Refs: animation timing and control
const startTimeRef = _react.useRef(null);
const frameRef = _react.useRef(null);
const finishedRef = _react.useRef(false);
const isFirstRender = _react.useRef(true);
// Use ref to avoid re-running the animation when child mapping changes
const childMappingRef = _react.useRef(childMapping);
// Update childMapping ref whenever it changes
_react.useEffect(()=>{
childMappingRef.current = childMapping;
}, [
childMapping
]);
// Use ref for reversed to avoid re-running animation when it changes
const reversedRef = _react.useRef(reversed);
// Update reversed ref whenever it changes
_react.useEffect(()=>{
reversedRef.current = reversed;
}, [
reversed
]);
// ====== ANIMATION EFFECT ======
_react.useEffect(()=>{
let cancelled = false;
startTimeRef.current = null;
finishedRef.current = false;
// All hide modes skip animation on first render - items are already in their final state
if (isFirstRender.current) {
isFirstRender.current = false;
// Items are already in their final state from useState, no animation needed
handleMotionFinish();
return; // No cleanup needed for first render
}
// For animations after first render, start from the opposite of the final state
// - Enter animation: start hidden (false), animate to visible (true)
// - Exit animation: start visible (true), animate to hidden (false)
const startState = direction === 'exit';
// Use childMappingRef.current to avoid adding childMapping to dependencies
const initialVisibility = {};
Object.keys(childMappingRef.current).forEach((key)=>{
initialVisibility[key] = startState;
});
setItemsVisibility(initialVisibility);
// Animation loop: update visibility on each frame until complete
const tick = (now)=>{
if (cancelled) {
return;
}
if (startTimeRef.current === null) {
startTimeRef.current = now;
}
const elapsed = now - startTimeRef.current;
const childKeys = Object.keys(childMappingRef.current);
const itemCount = childKeys.length;
const result = (0, _utils.staggerItemsVisibilityAtTime)({
itemCount,
elapsed,
itemDelay,
itemDuration,
direction,
reversed: reversedRef.current
});
// Convert boolean array to keyed object
const nextVisibility = {};
childKeys.forEach((key, idx)=>{
nextVisibility[key] = result.itemsVisibility[idx];
});
setItemsVisibility(nextVisibility);
if (elapsed < result.totalDuration) {
frameRef.current = requestAnimationFrame(tick);
} else if (!finishedRef.current) {
finishedRef.current = true;
handleMotionFinish();
}
};
frameRef.current = requestAnimationFrame(tick);
return ()=>{
cancelled = true;
if (frameRef.current) {
cancelAnimationFrame();
}
};
}, [
animationKey,
itemDelay,
itemDuration,
direction,
requestAnimationFrame,
cancelAnimationFrame,
handleMotionFinish
]);
return {
itemsVisibility
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,23 @@
/**
* Default timing constants for stagger animations (milliseconds).
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DEFAULT_ITEM_DELAY: function() {
return DEFAULT_ITEM_DELAY;
},
DEFAULT_ITEM_DURATION: function() {
return DEFAULT_ITEM_DURATION;
}
});
const _reactmotion = require("@fluentui/react-motion");
const DEFAULT_ITEM_DELAY = _reactmotion.motionTokens.durationFaster;
const DEFAULT_ITEM_DURATION = _reactmotion.motionTokens.durationNormal;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/utils/constants.ts"],"sourcesContent":["/**\n * Default timing constants for stagger animations (milliseconds).\n */\n\nimport { motionTokens } from '@fluentui/react-motion';\n\n/** Default delay in milliseconds between each item's animation start */\nexport const DEFAULT_ITEM_DELAY = motionTokens.durationFaster;\n\n/** Default duration in milliseconds for each item's animation */\nexport const DEFAULT_ITEM_DURATION = motionTokens.durationNormal;\n"],"names":["DEFAULT_ITEM_DELAY","DEFAULT_ITEM_DURATION","motionTokens","durationFaster","durationNormal"],"mappings":"AAAA;;CAEC;;;;;;;;;;;IAKYA,kBAAkB;eAAlBA;;IAGAC,qBAAqB;eAArBA;;;6BANgB;AAGtB,MAAMD,qBAAqBE,yBAAY,CAACC,cAAc;AAGtD,MAAMF,wBAAwBC,yBAAY,CAACE,cAAc"}

View File

@@ -0,0 +1,27 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getStaggerChildMapping", {
enumerable: true,
get: function() {
return getStaggerChildMapping;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function getStaggerChildMapping(children) {
const childMapping = {};
if (children) {
_react.Children.toArray(children).forEach((child, index)=>{
if (_react.isValidElement(child)) {
var _child_key;
childMapping[(_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : ''] = {
element: child,
index
};
}
});
}
return childMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/utils/getStaggerChildMapping.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type StaggerChildMapping = Record<string, { element: React.ReactElement; index: number }>;\n\n/**\n * Given `children`, return an object mapping key to child element and its index.\n * This allows tracking individual items by identity (via React keys) rather than by position.\n *\n * Uses React.Children.toArray() which:\n * - Automatically provides stable indices (0, 1, 2, ...)\n * - Handles key normalization (e.g., 'a' → '.$a') consistently\n * - Flattens fragments automatically\n * - Generates keys for elements without explicit keys (e.g., '.0', '.1', '.2')\n *\n * @param children - React children to map\n * @returns Object mapping child keys to { element, index }\n */\n// TODO: consider unifying with getChildMapping from react-motion package by making it generic\nexport function getStaggerChildMapping(children: React.ReactNode | undefined): StaggerChildMapping {\n const childMapping: StaggerChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach((child, index) => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n element: child,\n index,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["getStaggerChildMapping","children","childMapping","React","Children","toArray","forEach","child","index","isValidElement","key","element"],"mappings":";;;;+BAkBgBA;;;eAAAA;;;;iEAlBO;AAkBhB,SAASA,uBAAuBC,QAAqC;IAC1E,MAAMC,eAAoC,CAAC;IAE3C,IAAID,UAAU;QACZE,OAAMC,QAAQ,CAACC,OAAO,CAACJ,UAAUK,OAAO,CAAC,CAACC,OAAOC;YAC/C,IAAIL,OAAMM,cAAc,CAACF,QAAQ;oBAClBA;gBAAbL,YAAY,CAACK,CAAAA,aAAAA,MAAMG,GAAG,cAATH,wBAAAA,aAAa,GAAG,GAAG;oBAC9BI,SAASJ;oBACTC;gBACF;YACF;QACF;IACF;IAEA,OAAON;AACT"}

View File

@@ -0,0 +1,37 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DEFAULT_ITEM_DELAY: function() {
return _constants.DEFAULT_ITEM_DELAY;
},
DEFAULT_ITEM_DURATION: function() {
return _constants.DEFAULT_ITEM_DURATION;
},
acceptsDelayProps: function() {
return _motionComponentDetection.acceptsDelayProps;
},
acceptsVisibleProp: function() {
return _motionComponentDetection.acceptsVisibleProp;
},
getStaggerChildMapping: function() {
return _getStaggerChildMapping.getStaggerChildMapping;
},
getStaggerTotalDuration: function() {
return _staggercalculations.getStaggerTotalDuration;
},
staggerItemsVisibilityAtTime: function() {
return _staggercalculations.staggerItemsVisibilityAtTime;
}
});
const _constants = require("./constants");
const _staggercalculations = require("./stagger-calculations");
const _motionComponentDetection = require("./motionComponentDetection");
const _getStaggerChildMapping = require("./getStaggerChildMapping");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/utils/index.ts"],"sourcesContent":["export { DEFAULT_ITEM_DELAY, DEFAULT_ITEM_DURATION } from './constants';\nexport { getStaggerTotalDuration, staggerItemsVisibilityAtTime } from './stagger-calculations';\nexport type { StaggerItemsVisibilityAtTimeParams } from './stagger-calculations';\nexport { acceptsVisibleProp, acceptsDelayProps } from './motionComponentDetection';\nexport { getStaggerChildMapping } from './getStaggerChildMapping';\nexport type { StaggerChildMapping } from './getStaggerChildMapping';\n"],"names":["DEFAULT_ITEM_DELAY","DEFAULT_ITEM_DURATION","acceptsDelayProps","acceptsVisibleProp","getStaggerChildMapping","getStaggerTotalDuration","staggerItemsVisibilityAtTime"],"mappings":";;;;;;;;;;;IAASA,kBAAkB;eAAlBA,6BAAkB;;IAAEC,qBAAqB;eAArBA,gCAAqB;;IAGrBC,iBAAiB;eAAjBA,2CAAiB;;IAArCC,kBAAkB;eAAlBA,4CAAkB;;IAClBC,sBAAsB;eAAtBA,8CAAsB;;IAHtBC,uBAAuB;eAAvBA,4CAAuB;;IAAEC,4BAA4B;eAA5BA,iDAA4B;;;2BADJ;qCACY;0CAEhB;wCACf"}

View File

@@ -0,0 +1,48 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
acceptsDelayProps: function() {
return acceptsDelayProps;
},
acceptsVisibleProp: function() {
return acceptsVisibleProp;
},
isMotionComponent: function() {
return isMotionComponent;
},
isPresenceComponent: function() {
return isPresenceComponent;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function isMotionComponent(element) {
if (!(element === null || element === void 0 ? void 0 : element.type) || typeof element.type !== 'function') {
return false;
}
// Check if the component has the MOTION_DEFINITION symbol (internal to createMotionComponent)
const symbols = Object.getOwnPropertySymbols(element.type);
return symbols.some((sym)=>sym.description === 'MOTION_DEFINITION');
}
function isPresenceComponent(element) {
if (!(element === null || element === void 0 ? void 0 : element.type) || typeof element.type !== 'function') {
return false;
}
// Check if the component has the PRESENCE_MOTION_DEFINITION symbol (internal to createPresenceComponent)
const symbols = Object.getOwnPropertySymbols(element.type);
return symbols.some((sym)=>sym.description === 'PRESENCE_MOTION_DEFINITION');
}
function acceptsDelayProps(element) {
return isPresenceComponent(element) || isMotionComponent(element);
}
function acceptsVisibleProp(element) {
return isPresenceComponent(element);
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,76 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getStaggerTotalDuration: function() {
return getStaggerTotalDuration;
},
staggerItemsVisibilityAtTime: function() {
return staggerItemsVisibilityAtTime;
}
});
const _constants = require("./constants");
function getStaggerTotalDuration({ itemCount, itemDelay = _constants.DEFAULT_ITEM_DELAY, itemDuration = _constants.DEFAULT_ITEM_DURATION }) {
if (itemCount <= 0) {
return 0;
}
if (itemCount <= 1) {
return Math.max(0, itemDuration);
}
const staggerDuration = itemDelay * (itemCount - 1);
return Math.max(0, staggerDuration + itemDuration);
}
function staggerItemsVisibilityAtTime({ itemCount, elapsed, itemDelay = _constants.DEFAULT_ITEM_DELAY, itemDuration = _constants.DEFAULT_ITEM_DURATION, direction = 'enter', reversed = false }) {
// If no items, return the empty state
if (itemCount <= 0) {
return {
itemsVisibility: [],
totalDuration: 0
};
}
const totalDuration = getStaggerTotalDuration({
itemCount,
itemDelay,
itemDuration
});
// Calculate progression through the stagger sequence
let completedSteps;
if (itemDelay <= 0) {
// When itemDelay is 0 or negative, all steps complete immediately
completedSteps = itemCount;
} else {
// Both enter and exit should start their first item immediately, but handle t=0 differently
if (elapsed === 0) {
// At exactly t=0, for enter we want first item visible, for exit we want all items visible
completedSteps = direction === 'enter' ? 1 : 0;
} else {
// After t=0, both directions should progress at the same rate
const stepsFromElapsedTime = Math.floor(elapsed / itemDelay) + 1;
completedSteps = Math.min(itemCount, stepsFromElapsedTime);
}
}
const itemsVisibility = Array.from({
length: itemCount
}, (_, idx)=>{
// Calculate based on progression through the sequence (enter pattern)
const fromStart = idx < completedSteps;
const fromEnd = idx >= itemCount - completedSteps;
let itemVisible = reversed ? fromEnd : fromStart;
// For exit, invert the enter pattern
if (direction === 'exit') {
itemVisible = !itemVisible;
}
return itemVisible;
});
return {
itemsVisibility,
totalDuration
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/utils/stagger-calculations.ts"],"sourcesContent":["import type { StaggerProps } from '../stagger-types';\nimport { DEFAULT_ITEM_DELAY, DEFAULT_ITEM_DURATION } from './constants';\n\n/**\n * Calculate the total stagger duration — from the moment the stagger begins\n * until the final item's animation completes.\n *\n * Uses the formula:\n * max(0, itemDelay * (itemCount - 1) + itemDuration)\n *\n * @param params.itemCount Total number of items to stagger\n * @param params.itemDelay Milliseconds between the start of each item (default: DEFAULT_ITEM_DELAY)\n * @param params.itemDuration Milliseconds each item's animation lasts (default: DEFAULT_ITEM_DURATION)\n * @returns Total duration in milliseconds (never negative)\n */\nexport function getStaggerTotalDuration({\n itemCount,\n itemDelay = DEFAULT_ITEM_DELAY,\n itemDuration = DEFAULT_ITEM_DURATION,\n}: {\n itemCount: number;\n} & Pick<StaggerProps, 'itemDelay' | 'itemDuration'>): number {\n if (itemCount <= 0) {\n return 0;\n }\n if (itemCount <= 1) {\n return Math.max(0, itemDuration);\n }\n const staggerDuration = itemDelay * (itemCount - 1);\n return Math.max(0, staggerDuration + itemDuration);\n}\n\nexport interface StaggerItemsVisibilityAtTimeParams\n extends Pick<StaggerProps, 'itemDelay' | 'itemDuration' | 'reversed'> {\n itemCount: number;\n elapsed: number;\n direction?: 'enter' | 'exit';\n}\n\n/**\n * Returns visibility flags plus timing metrics for a stagger sequence.\n */\nexport function staggerItemsVisibilityAtTime({\n itemCount,\n elapsed,\n itemDelay = DEFAULT_ITEM_DELAY,\n itemDuration = DEFAULT_ITEM_DURATION,\n direction = 'enter',\n reversed = false,\n}: StaggerItemsVisibilityAtTimeParams): {\n itemsVisibility: boolean[];\n totalDuration: number;\n} {\n // If no items, return the empty state\n if (itemCount <= 0) {\n return { itemsVisibility: [], totalDuration: 0 };\n }\n\n const totalDuration = getStaggerTotalDuration({ itemCount, itemDelay, itemDuration });\n\n // Calculate progression through the stagger sequence\n let completedSteps: number;\n if (itemDelay <= 0) {\n // When itemDelay is 0 or negative, all steps complete immediately\n completedSteps = itemCount;\n } else {\n // Both enter and exit should start their first item immediately, but handle t=0 differently\n if (elapsed === 0) {\n // At exactly t=0, for enter we want first item visible, for exit we want all items visible\n completedSteps = direction === 'enter' ? 1 : 0;\n } else {\n // After t=0, both directions should progress at the same rate\n const stepsFromElapsedTime = Math.floor(elapsed / itemDelay) + 1;\n completedSteps = Math.min(itemCount, stepsFromElapsedTime);\n }\n }\n\n const itemsVisibility = Array.from({ length: itemCount }, (_, idx) => {\n // Calculate based on progression through the sequence (enter pattern)\n const fromStart = idx < completedSteps;\n const fromEnd = idx >= itemCount - completedSteps;\n\n let itemVisible = reversed ? fromEnd : fromStart;\n\n // For exit, invert the enter pattern\n if (direction === 'exit') {\n itemVisible = !itemVisible;\n }\n\n return itemVisible;\n });\n\n return { itemsVisibility, totalDuration };\n}\n"],"names":["getStaggerTotalDuration","staggerItemsVisibilityAtTime","itemCount","itemDelay","DEFAULT_ITEM_DELAY","itemDuration","DEFAULT_ITEM_DURATION","Math","max","staggerDuration","elapsed","direction","reversed","itemsVisibility","totalDuration","completedSteps","stepsFromElapsedTime","floor","min","Array","from","length","_","idx","fromStart","fromEnd","itemVisible"],"mappings":";;;;;;;;;;;IAegBA,uBAAuB;eAAvBA;;IA2BAC,4BAA4B;eAA5BA;;;2BAzC0C;AAcnD,SAASD,wBAAwB,EACtCE,SAAS,EACTC,YAAYC,6BAAkB,EAC9BC,eAAeC,gCAAqB,EAGc;IAClD,IAAIJ,aAAa,GAAG;QAClB,OAAO;IACT;IACA,IAAIA,aAAa,GAAG;QAClB,OAAOK,KAAKC,GAAG,CAAC,GAAGH;IACrB;IACA,MAAMI,kBAAkBN,YAAaD,CAAAA,YAAY,CAAA;IACjD,OAAOK,KAAKC,GAAG,CAAC,GAAGC,kBAAkBJ;AACvC;AAYO,SAASJ,6BAA6B,EAC3CC,SAAS,EACTQ,OAAO,EACPP,YAAYC,6BAAkB,EAC9BC,eAAeC,gCAAqB,EACpCK,YAAY,OAAO,EACnBC,WAAW,KAAK,EACmB;IAInC,sCAAsC;IACtC,IAAIV,aAAa,GAAG;QAClB,OAAO;YAAEW,iBAAiB,EAAE;YAAEC,eAAe;QAAE;IACjD;IAEA,MAAMA,gBAAgBd,wBAAwB;QAAEE;QAAWC;QAAWE;IAAa;IAEnF,qDAAqD;IACrD,IAAIU;IACJ,IAAIZ,aAAa,GAAG;QAClB,kEAAkE;QAClEY,iBAAiBb;IACnB,OAAO;QACL,4FAA4F;QAC5F,IAAIQ,YAAY,GAAG;YACjB,2FAA2F;YAC3FK,iBAAiBJ,cAAc,UAAU,IAAI;QAC/C,OAAO;YACL,8DAA8D;YAC9D,MAAMK,uBAAuBT,KAAKU,KAAK,CAACP,UAAUP,aAAa;YAC/DY,iBAAiBR,KAAKW,GAAG,CAAChB,WAAWc;QACvC;IACF;IAEA,MAAMH,kBAAkBM,MAAMC,IAAI,CAAC;QAAEC,QAAQnB;IAAU,GAAG,CAACoB,GAAGC;QAC5D,sEAAsE;QACtE,MAAMC,YAAYD,MAAMR;QACxB,MAAMU,UAAUF,OAAOrB,YAAYa;QAEnC,IAAIW,cAAcd,WAAWa,UAAUD;QAEvC,qCAAqC;QACrC,IAAIb,cAAc,QAAQ;YACxBe,cAAc,CAACA;QACjB;QAEA,OAAOA;IACT;IAEA,OAAO;QAAEb;QAAiBC;IAAc;AAC1C"}

View File

@@ -0,0 +1,67 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Blur", {
enumerable: true,
get: function() {
return Blur;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _fadeatom = require("../../atoms/fade-atom");
const _bluratom = require("../../atoms/blur-atom");
/**
* Define a presence motion for blur in/out
*
* @param duration - Time (ms) for the enter transition (blur-in). Defaults to the `durationSlow` value (300 ms).
* @param easing - Easing curve for the enter transition (blur-in). Defaults to the `curveDecelerateMin` value.
* @param delay - Time (ms) to delay the enter transition. Defaults to 0.
* @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.
* @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.
* @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
* @param outRadius - Blur radius for the out state (exited). Defaults to `'10px'`.
* @param inRadius - Blur radius for the in state (entered). Defaults to `'0px'`.
* @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
*/ const blurPresenceFn = ({ duration = _reactmotion.motionTokens.durationSlow, easing = _reactmotion.motionTokens.curveDecelerateMin, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMin, exitDelay = delay, outRadius = '10px', inRadius = '0px', animateOpacity = true })=>{
const enterAtoms = [
(0, _bluratom.blurAtom)({
direction: 'enter',
duration,
easing,
delay,
outRadius,
inRadius
})
];
const exitAtoms = [
(0, _bluratom.blurAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay,
outRadius,
inRadius
})
];
// Only add fade atoms if animateOpacity is true.
if (animateOpacity) {
enterAtoms.push((0, _fadeatom.fadeAtom)({
direction: 'enter',
duration,
easing,
delay
}));
exitAtoms.push((0, _fadeatom.fadeAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay
}));
}
return {
enter: enterAtoms,
exit: exitAtoms
};
};
const Blur = (0, _reactmotion.createPresenceComponent)(blurPresenceFn);

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Blur/Blur.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { blurAtom } from '../../atoms/blur-atom';\nimport { BlurParams } from './blur-types';\n\n/**\n * Define a presence motion for blur in/out\n *\n * @param duration - Time (ms) for the enter transition (blur-in). Defaults to the `durationSlow` value (300 ms).\n * @param easing - Easing curve for the enter transition (blur-in). Defaults to the `curveDecelerateMin` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (blur-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (blur-out). Defaults to the `curveAccelerateMin` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outRadius - Blur radius for the out state (exited). Defaults to `'10px'`.\n * @param inRadius - Blur radius for the in state (entered). Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst blurPresenceFn: PresenceMotionFn<BlurParams> = ({\n duration = motionTokens.durationSlow,\n easing = motionTokens.curveDecelerateMin,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMin,\n exitDelay = delay,\n outRadius = '10px',\n inRadius = '0px',\n animateOpacity = true,\n}) => {\n const enterAtoms = [blurAtom({ direction: 'enter', duration, easing, delay, outRadius, inRadius })];\n const exitAtoms = [\n blurAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n outRadius,\n inRadius,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies blur in/out transitions to its children. */\nexport const Blur = createPresenceComponent(blurPresenceFn);\n"],"names":["Blur","blurPresenceFn","duration","motionTokens","durationSlow","easing","curveDecelerateMin","delay","exitDuration","exitEasing","curveAccelerateMin","exitDelay","outRadius","inRadius","animateOpacity","enterAtoms","blurAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAsDaA;;;eAAAA;;;6BAtD2D;0BAC/C;0BACA;AAGzB;;;;;;;;;;;;CAYC,GACD,MAAMC,iBAA+C,CAAC,EACpDC,WAAWC,yBAAY,CAACC,YAAY,EACpCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,YAAY,MAAM,EAClBC,WAAW,KAAK,EAChBC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASf;YAAUG;YAAQE;YAAOK;YAAWC;QAAS;KAAG;IACnG,MAAMK,YAAY;QAChBF,IAAAA,kBAAQ,EAAC;YACPC,WAAW;YACXf,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASf;YAAUG;YAAQE;QAAM;QACvEW,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQf,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMlB,OAAOuB,IAAAA,oCAAuB,EAACtB"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Blur", {
enumerable: true,
get: function() {
return _Blur.Blur;
}
});
const _Blur = require("./Blur");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Blur/index.ts"],"sourcesContent":["export { Blur } from './Blur';\nexport type { BlurParams } from './blur-types';\n"],"names":["Blur"],"mappings":";;;;+BAASA;;;eAAAA,UAAI;;;sBAAQ"}

View File

@@ -0,0 +1,133 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Collapse: function() {
return Collapse;
},
CollapseDelayed: function() {
return CollapseDelayed;
},
CollapseRelaxed: function() {
return CollapseRelaxed;
},
CollapseSnappy: function() {
return CollapseSnappy;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _collapseatoms = require("./collapse-atoms");
const _fadeatom = require("../../atoms/fade-atom");
/**
* 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 outSize - Size for the out state (collapsed). 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', outSize = '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,
outSize,
delay
}),
(0, _collapseatoms.whitespaceAtom)({
direction: 'enter',
orientation,
duration: sizeDuration,
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: 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,
delay: exitDelay
}));
}
exitAtoms.push((0, _collapseatoms.sizeExitAtom)({
orientation,
duration: exitSizeDuration,
easing: exitEasing,
element,
delay: exitDelay + exitStaggerDelay,
outSize
}), (0, _collapseatoms.whitespaceAtom)({
direction: 'exit',
orientation,
duration: exitSizeDuration,
easing: exitEasing,
delay: exitDelay + exitStaggerDelay
}));
return {
enter: enterAtoms,
exit: exitAtoms
};
};
const Collapse = (0, _reactmotion.createPresenceComponent)(collapsePresenceFn);
const CollapseSnappy = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
duration: _reactmotion.motionTokens.durationFast
});
const CollapseRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Collapse, {
duration: _reactmotion.motionTokens.durationSlower
});
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
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,117 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
sizeEnterAtom: function() {
return sizeEnterAtom;
},
sizeExitAtom: function() {
return sizeExitAtom;
},
whitespaceAtom: function() {
return whitespaceAtom;
}
});
// ----- SIZE -----
const sizeValuesForOrientation = (orientation, element)=>{
const sizeName = orientation === 'horizontal' ? 'maxWidth' : 'maxHeight';
const overflowName = orientation === 'horizontal' ? 'overflowX' : 'overflowY';
const measuredSize = orientation === 'horizontal' ? element.scrollWidth : element.scrollHeight;
const toSize = `${measuredSize}px`;
return {
sizeName,
overflowName,
toSize
};
};
const sizeEnterAtom = ({ orientation, duration, easing, element, outSize = '0', delay = 0 })=>{
const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
return {
keyframes: [
{
[sizeName]: outSize,
[overflowName]: 'hidden'
},
{
[sizeName]: toSize,
offset: 0.9999,
[overflowName]: 'hidden'
},
{
[sizeName]: 'unset',
[overflowName]: 'unset'
}
],
duration,
easing,
delay,
fill: 'both'
};
};
const sizeExitAtom = ({ orientation, duration, easing, element, delay = 0, outSize = '0' })=>{
const { sizeName, overflowName, toSize } = sizeValuesForOrientation(orientation, element);
return {
keyframes: [
{
[sizeName]: toSize,
[overflowName]: 'hidden'
},
{
[sizeName]: outSize,
[overflowName]: 'hidden'
}
],
duration,
easing,
delay,
fill: 'both'
};
};
// ----- WHITESPACE -----
// Whitespace animation includes padding and margin.
const whitespaceValuesForOrientation = (orientation)=>{
// horizontal whitespace collapse
if (orientation === 'horizontal') {
return {
paddingStart: 'paddingInlineStart',
paddingEnd: 'paddingInlineEnd',
marginStart: 'marginInlineStart',
marginEnd: 'marginInlineEnd'
};
}
// vertical whitespace collapse
return {
paddingStart: 'paddingBlockStart',
paddingEnd: 'paddingBlockEnd',
marginStart: 'marginBlockStart',
marginEnd: 'marginBlockEnd'
};
};
const whitespaceAtom = ({ direction, orientation, duration, easing, delay = 0 })=>{
const { paddingStart, paddingEnd, marginStart, marginEnd } = whitespaceValuesForOrientation(orientation);
// The keyframe with zero whitespace is at the start for enter and at the end for exit.
const offset = direction === 'enter' ? 0 : 1;
const keyframes = [
{
[paddingStart]: '0',
[paddingEnd]: '0',
[marginStart]: '0',
[marginEnd]: '0',
offset
}
];
return {
keyframes,
duration,
easing,
delay,
fill: 'both'
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,155 @@
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
getCollapseDurationInfo: function() {
return getCollapseDurationInfo;
},
getCollapseMotionValidation: function() {
return getCollapseMotionValidation;
},
getCollapseOrientationInfo: function() {
return getCollapseOrientationInfo;
},
getCollapseTimingInfo: function() {
return getCollapseTimingInfo;
},
getOpacityComparisonInfo: function() {
return getOpacityComparisonInfo;
},
getSizeAtomInfo: function() {
return getSizeAtomInfo;
},
getWhitespaceAtomInfo: function() {
return getWhitespaceAtomInfo;
}
});
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'
}))
};
}
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
};
}
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
};
}
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]) || {})
}
};
}
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] || {}
};
}
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
};
}
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
}
};
}

File diff suppressed because one or more lines are too long

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Collapse: function() {
return _Collapse.Collapse;
},
CollapseDelayed: function() {
return _Collapse.CollapseDelayed;
},
CollapseRelaxed: function() {
return _Collapse.CollapseRelaxed;
},
CollapseSnappy: function() {
return _Collapse.CollapseSnappy;
}
});
const _Collapse = require("./Collapse");

View File

@@ -0,0 +1 @@
{"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":";;;;;;;;;;;IAASA,QAAQ;eAARA,kBAAQ;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,eAAe;eAAfA,yBAAe;;IAAEC,cAAc;eAAdA,wBAAc;;;0BAAQ"}

View File

@@ -0,0 +1,53 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Fade: function() {
return Fade;
},
FadeRelaxed: function() {
return FadeRelaxed;
},
FadeSnappy: function() {
return FadeSnappy;
},
fadePresenceFn: function() {
return fadePresenceFn;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _fadeatom = require("../../atoms/fade-atom");
const fadePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveEasyEase, delay = 0, exitDuration = duration, exitEasing = easing, exitDelay = delay, outOpacity = 0, inOpacity = 1 })=>{
return {
enter: (0, _fadeatom.fadeAtom)({
direction: 'enter',
duration,
easing,
delay,
outOpacity,
inOpacity
}),
exit: (0, _fadeatom.fadeAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay,
outOpacity,
inOpacity
})
};
};
const Fade = (0, _reactmotion.createPresenceComponent)(fadePresenceFn);
const FadeSnappy = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
duration: _reactmotion.motionTokens.durationFast
});
const FadeRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
duration: _reactmotion.motionTokens.durationGentle
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Fade/Fade.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { FadeParams } from './fade-types';\n\n/**\n * Define a presence motion for fade in/out\n *\n * @param duration - Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (fade-in). Defaults to the `curveEasyEase` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (fade-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (fade-out). Defaults to the `easing` param for symmetry.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). Defaults to 1.\n */\nexport const fadePresenceFn: PresenceMotionFn<FadeParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveEasyEase,\n delay = 0,\n exitDuration = duration,\n exitEasing = easing,\n exitDelay = delay,\n outOpacity = 0,\n inOpacity = 1,\n}) => {\n return {\n enter: fadeAtom({ direction: 'enter', duration, easing, delay, outOpacity, inOpacity }),\n exit: fadeAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n outOpacity,\n inOpacity,\n }),\n };\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadePresenceFn);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { duration: motionTokens.durationFast });\n\nexport const FadeRelaxed = createPresenceComponentVariant(Fade, { duration: motionTokens.durationGentle });\n"],"names":["Fade","FadeRelaxed","FadeSnappy","fadePresenceFn","duration","motionTokens","durationNormal","easing","curveEasyEase","delay","exitDuration","exitEasing","exitDelay","outOpacity","inOpacity","enter","fadeAtom","direction","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationGentle"],"mappings":";;;;;;;;;;;IA6CaA,IAAI;eAAJA;;IAIAC,WAAW;eAAXA;;IAFAC,UAAU;eAAVA;;IA1BAC,cAAc;eAAdA;;;6BAhBN;0BACkB;AAelB,MAAMA,iBAA+C,CAAC,EAC3DC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,aAAa,EACnCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaJ,MAAM,EACnBK,YAAYH,KAAK,EACjBI,aAAa,CAAC,EACdC,YAAY,CAAC,EACd;IACC,OAAO;QACLC,OAAOC,IAAAA,kBAAQ,EAAC;YAAEC,WAAW;YAASb;YAAUG;YAAQE;YAAOI;YAAYC;QAAU;QACrFI,MAAMF,IAAAA,kBAAQ,EAAC;YACbC,WAAW;YACXb,UAAUM;YACVH,QAAQI;YACRF,OAAOG;YACPC;YACAC;QACF;IACF;AACF;AAGO,MAAMd,OAAOmB,IAAAA,oCAAuB,EAAChB;AAErC,MAAMD,aAAakB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACgB,YAAY;AAAC;AAE9F,MAAMpB,cAAcmB,IAAAA,2CAA8B,EAACpB,MAAM;IAAEI,UAAUC,yBAAY,CAACiB,cAAc;AAAC"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Fade: function() {
return _Fade.Fade;
},
FadeRelaxed: function() {
return _Fade.FadeRelaxed;
},
FadeSnappy: function() {
return _Fade.FadeSnappy;
}
});
const _Fade = require("./Fade");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Fade/index.ts"],"sourcesContent":["export { Fade, FadeRelaxed, FadeSnappy } from './Fade';\nexport type { FadeParams } from './fade-types';\n"],"names":["Fade","FadeRelaxed","FadeSnappy"],"mappings":";;;;;;;;;;;IAASA,IAAI;eAAJA,UAAI;;IAAEC,WAAW;eAAXA,iBAAW;;IAAEC,UAAU;eAAVA,gBAAU;;;sBAAQ"}

View File

@@ -0,0 +1,69 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Rotate", {
enumerable: true,
get: function() {
return Rotate;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _fadeatom = require("../../atoms/fade-atom");
const _rotateatom = require("../../atoms/rotate-atom");
/**
* Define a presence motion for rotate in/out
*
* @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.
* @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.
* @param delay - Time (ms) to delay the enter transition. Defaults to 0.
* @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.
* @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.
* @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
* @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.
* @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
* @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
* @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.
*/ const rotatePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, axis = 'z', outAngle = -90, inAngle = 0, animateOpacity = true })=>{
const enterAtoms = [
(0, _rotateatom.rotateAtom)({
direction: 'enter',
duration,
easing,
delay,
axis,
outAngle,
inAngle
})
];
const exitAtoms = [
(0, _rotateatom.rotateAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay,
axis,
outAngle,
inAngle
})
];
if (animateOpacity) {
enterAtoms.push((0, _fadeatom.fadeAtom)({
direction: 'enter',
duration,
easing,
delay
}));
exitAtoms.push((0, _fadeatom.fadeAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay
}));
}
return {
enter: enterAtoms,
exit: exitAtoms
};
};
const Rotate = (0, _reactmotion.createPresenceComponent)(rotatePresenceFn);

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Rotate/Rotate.ts"],"sourcesContent":["import { AtomMotion, createPresenceComponent, motionTokens, PresenceMotionFn } from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { rotateAtom } from '../../atoms/rotate-atom';\nimport { RotateParams } from './rotate-types';\n\n/**\n * Define a presence motion for rotate in/out\n *\n * @param duration - Time (ms) for the enter transition (rotate-in). Defaults to the `durationGentle` value.\n * @param easing - Easing curve for the enter transition (rotate-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (rotate-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (rotate-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'z'.\n * @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.\n * @param animateOpacity - Whether to animate the opacity during the rotation. Defaults to `true`.\n */\nconst rotatePresenceFn: PresenceMotionFn<RotateParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMax,\n exitDelay = delay,\n axis = 'z',\n outAngle = -90,\n inAngle = 0,\n animateOpacity = true,\n}: RotateParams) => {\n const enterAtoms: AtomMotion[] = [\n rotateAtom({\n direction: 'enter',\n duration,\n easing,\n delay,\n axis,\n outAngle,\n inAngle,\n }),\n ];\n\n const exitAtoms: AtomMotion[] = [\n rotateAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n axis,\n outAngle,\n inAngle,\n }),\n ];\n\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n// Create a presence motion component to rotate an element around a single axis (x, y, or z).\nexport const Rotate = createPresenceComponent(rotatePresenceFn);\n"],"names":["Rotate","rotatePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","exitEasing","curveAccelerateMax","exitDelay","axis","outAngle","inAngle","animateOpacity","enterAtoms","rotateAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent"],"mappings":";;;;+BAmEaA;;;eAAAA;;;6BAnEuE;0BAC3D;4BACE;AAG3B;;;;;;;;;;;;;CAaC,GACD,MAAMC,mBAAmD,CAAC,EACxDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,GAAG,EACVC,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACR;IACb,MAAMC,aAA2B;QAC/BC,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB;YACAG;YACAE;YACAK;YACAC;YACAC;QACF;KACD;IAED,MAAMK,YAA0B;QAC9BF,IAAAA,sBAAU,EAAC;YACTC,WAAW;YACXhB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;QACF;KACD;IAED,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLW,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMnB,SAASwB,IAAAA,oCAAuB,EAACvB"}

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Rotate", {
enumerable: true,
get: function() {
return _Rotate.Rotate;
}
});
const _Rotate = require("./Rotate");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Rotate/index.ts"],"sourcesContent":["export { Rotate } from './Rotate';\nexport type { RotateParams } from './rotate-types';\n"],"names":["Rotate"],"mappings":";;;;+BAASA;;;eAAAA,cAAM;;;wBAAQ"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,86 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Scale: function() {
return Scale;
},
ScaleRelaxed: function() {
return ScaleRelaxed;
},
ScaleSnappy: function() {
return ScaleSnappy;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _fadeatom = require("../../atoms/fade-atom");
const _scaleatom = require("../../atoms/scale-atom");
/**
* Define a presence motion for scale in/out
*
* @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).
* @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.
* @param delay - Time (ms) to delay the enter transition. Defaults to 0.
* @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).
* @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.
* @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
* @param outScale - Scale for the out state (exited). Defaults to `0.9`.
* @param inScale - Scale for the in state (entered). Defaults to `1`.
* @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
*/ const scalePresenceFn = ({ duration = _reactmotion.motionTokens.durationGentle, easing = _reactmotion.motionTokens.curveDecelerateMax, delay = 0, exitDuration = _reactmotion.motionTokens.durationNormal, exitEasing = _reactmotion.motionTokens.curveAccelerateMax, exitDelay = delay, outScale = 0.9, inScale = 1, animateOpacity = true })=>{
const enterAtoms = [
(0, _scaleatom.scaleAtom)({
direction: 'enter',
duration,
easing,
delay,
outScale,
inScale
})
];
const exitAtoms = [
(0, _scaleatom.scaleAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay,
outScale,
inScale
})
];
// Only add fade atoms if animateOpacity is true.
if (animateOpacity) {
enterAtoms.push((0, _fadeatom.fadeAtom)({
direction: 'enter',
duration,
easing,
delay
}));
exitAtoms.push((0, _fadeatom.fadeAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay
}));
}
return {
enter: enterAtoms,
exit: exitAtoms
};
};
const Scale = (0, _reactmotion.createPresenceComponent)(scalePresenceFn);
const ScaleSnappy = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
duration: _reactmotion.motionTokens.durationNormal,
exitDuration: _reactmotion.motionTokens.durationFast
});
const ScaleRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Scale, {
duration: _reactmotion.motionTokens.durationSlow,
exitDuration: _reactmotion.motionTokens.durationGentle
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Scale/Scale.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { scaleAtom } from '../../atoms/scale-atom';\nimport { ScaleParams } from './scale-types';\n\n/**\n * Define a presence motion for scale in/out\n *\n * @param duration - Time (ms) for the enter transition (scale-in). Defaults to the `durationGentle` value (250 ms).\n * @param easing - Easing curve for the enter transition (scale-in). Defaults to the `curveDecelerateMax` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (scale-out). Defaults to the `durationNormal` value (200 ms).\n * @param exitEasing - Easing curve for the exit transition (scale-out). Defaults to the `curveAccelerateMax` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outScale - Scale for the out state (exited). Defaults to `0.9`.\n * @param inScale - Scale for the in state (entered). Defaults to `1`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst scalePresenceFn: PresenceMotionFn<ScaleParams> = ({\n duration = motionTokens.durationGentle,\n easing = motionTokens.curveDecelerateMax,\n delay = 0,\n exitDuration = motionTokens.durationNormal,\n exitEasing = motionTokens.curveAccelerateMax,\n exitDelay = delay,\n outScale = 0.9,\n inScale = 1,\n animateOpacity = true,\n}) => {\n const enterAtoms = [scaleAtom({ direction: 'enter', duration, easing, delay, outScale, inScale })];\n const exitAtoms = [\n scaleAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n outScale,\n inScale,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies scale in/out transitions to its children. */\nexport const Scale = createPresenceComponent(scalePresenceFn);\n\nexport const ScaleSnappy = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationNormal,\n exitDuration: motionTokens.durationFast,\n});\n\nexport const ScaleRelaxed = createPresenceComponentVariant(Scale, {\n duration: motionTokens.durationSlow,\n exitDuration: motionTokens.durationGentle,\n});\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy","scalePresenceFn","duration","motionTokens","durationGentle","easing","curveDecelerateMax","delay","exitDuration","durationNormal","exitEasing","curveAccelerateMax","exitDelay","outScale","inScale","animateOpacity","enterAtoms","scaleAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","durationFast","durationSlow"],"mappings":";;;;;;;;;;;IA2DaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BAxDN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;CAYC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeL,yBAAY,CAACM,cAAc,EAC1CC,aAAaP,yBAAY,CAACQ,kBAAkB,EAC5CC,YAAYL,KAAK,EACjBM,WAAW,GAAG,EACdC,UAAU,CAAC,EACXC,iBAAiB,IAAI,EACtB;IACC,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAAShB;YAAUG;YAAQE;YAAOM;YAAUC;QAAQ;KAAG;IAClG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXhB,UAAUM;YACVH,QAAQK;YACRH,OAAOK;YACPC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAShB;YAAUG;YAAQE;QAAM;QACvEY,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQhB,UAAUM;YAAcH,QAAQK;YAAYH,OAAOK;QAAU;IAC5G;IAEA,OAAO;QACLU,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMrB,QAAQ0B,IAAAA,oCAAuB,EAACvB;AAEtC,MAAMD,cAAcyB,IAAAA,2CAA8B,EAAC3B,OAAO;IAC/DI,UAAUC,yBAAY,CAACM,cAAc;IACrCD,cAAcL,yBAAY,CAACuB,YAAY;AACzC;AAEO,MAAM3B,eAAe0B,IAAAA,2CAA8B,EAAC3B,OAAO;IAChEI,UAAUC,yBAAY,CAACwB,YAAY;IACnCnB,cAAcL,yBAAY,CAACC,cAAc;AAC3C"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Scale: function() {
return _Scale.Scale;
},
ScaleRelaxed: function() {
return _Scale.ScaleRelaxed;
},
ScaleSnappy: function() {
return _Scale.ScaleSnappy;
}
});
const _Scale = require("./Scale");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Scale/index.ts"],"sourcesContent":["export { Scale, ScaleRelaxed, ScaleSnappy } from './Scale';\nexport type { ScaleParams } from './scale-types';\n"],"names":["Scale","ScaleRelaxed","ScaleSnappy"],"mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,YAAY;eAAZA,mBAAY;;IAAEC,WAAW;eAAXA,kBAAW;;;uBAAQ"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,91 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Slide: function() {
return Slide;
},
SlideRelaxed: function() {
return SlideRelaxed;
},
SlideSnappy: function() {
return SlideSnappy;
}
});
const _reactmotion = require("@fluentui/react-motion");
const _fadeatom = require("../../atoms/fade-atom");
const _slideatom = require("../../atoms/slide-atom");
/**
* Define a presence motion for slide in/out
*
* @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).
* @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.
* @param delay - Time (ms) to delay the enter transition. Defaults to 0.
* @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.
* @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.
* @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.
* @param outX - X translate for the out state (exited). Defaults to `'0px'`.
* @param outY - Y translate for the out state (exited). Defaults to `'0px'`.
* @param inX - X translate for the in state (entered). Defaults to `'0px'`.
* @param inY - Y translate for the in state (entered). Defaults to `'0px'`.
* @param animateOpacity - Whether to animate the opacity. Defaults to `true`.
*/ const slidePresenceFn = ({ duration = _reactmotion.motionTokens.durationNormal, easing = _reactmotion.motionTokens.curveDecelerateMid, delay = 0, exitDuration = duration, exitEasing = _reactmotion.motionTokens.curveAccelerateMid, exitDelay = delay, outX = '0px', outY = '0px', inX = '0px', inY = '0px', animateOpacity = true })=>{
const enterAtoms = [
(0, _slideatom.slideAtom)({
direction: 'enter',
duration,
easing,
delay,
outX,
outY,
inX,
inY
})
];
const exitAtoms = [
(0, _slideatom.slideAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay,
outX,
outY,
inX,
inY
})
];
// Only add fade atoms if animateOpacity is true.
if (animateOpacity) {
enterAtoms.push((0, _fadeatom.fadeAtom)({
direction: 'enter',
duration,
easing,
delay
}));
exitAtoms.push((0, _fadeatom.fadeAtom)({
direction: 'exit',
duration: exitDuration,
easing: exitEasing,
delay: exitDelay
}));
}
return {
enter: enterAtoms,
exit: exitAtoms
};
};
const Slide = (0, _reactmotion.createPresenceComponent)(slidePresenceFn);
const SlideSnappy = (0, _reactmotion.createPresenceComponentVariant)(Slide, {
easing: _reactmotion.motionTokens.curveDecelerateMax,
exitEasing: _reactmotion.motionTokens.curveAccelerateMax
});
const SlideRelaxed = (0, _reactmotion.createPresenceComponentVariant)(Slide, {
duration: _reactmotion.motionTokens.durationGentle
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Slide/Slide.ts"],"sourcesContent":["import {\n motionTokens,\n createPresenceComponent,\n PresenceMotionFn,\n createPresenceComponentVariant,\n} from '@fluentui/react-motion';\nimport { fadeAtom } from '../../atoms/fade-atom';\nimport { slideAtom } from '../../atoms/slide-atom';\nimport { SlideParams } from './slide-types';\n\n/**\n * Define a presence motion for slide in/out\n *\n * @param duration - Time (ms) for the enter transition (slide-in). Defaults to the `durationNormal` value (200 ms).\n * @param easing - Easing curve for the enter transition (slide-in). Defaults to the `curveDecelerateMid` value.\n * @param delay - Time (ms) to delay the enter transition. Defaults to 0.\n * @param exitDuration - Time (ms) for the exit transition (slide-out). Defaults to the `duration` param for symmetry.\n * @param exitEasing - Easing curve for the exit transition (slide-out). Defaults to the `curveAccelerateMid` value.\n * @param exitDelay - Time (ms) to delay the exit transition. Defaults to the `delay` param for symmetry.\n * @param outX - X translate for the out state (exited). Defaults to `'0px'`.\n * @param outY - Y translate for the out state (exited). Defaults to `'0px'`.\n * @param inX - X translate for the in state (entered). Defaults to `'0px'`.\n * @param inY - Y translate for the in state (entered). Defaults to `'0px'`.\n * @param animateOpacity - Whether to animate the opacity. Defaults to `true`.\n */\nconst slidePresenceFn: PresenceMotionFn<SlideParams> = ({\n duration = motionTokens.durationNormal,\n easing = motionTokens.curveDecelerateMid,\n delay = 0,\n exitDuration = duration,\n exitEasing = motionTokens.curveAccelerateMid,\n exitDelay = delay,\n outX = '0px',\n outY = '0px',\n inX = '0px',\n inY = '0px',\n animateOpacity = true,\n}: SlideParams) => {\n const enterAtoms = [slideAtom({ direction: 'enter', duration, easing, delay, outX, outY, inX, inY })];\n const exitAtoms = [\n slideAtom({\n direction: 'exit',\n duration: exitDuration,\n easing: exitEasing,\n delay: exitDelay,\n outX,\n outY,\n inX,\n inY,\n }),\n ];\n\n // Only add fade atoms if animateOpacity is true.\n if (animateOpacity) {\n enterAtoms.push(fadeAtom({ direction: 'enter', duration, easing, delay }));\n exitAtoms.push(fadeAtom({ direction: 'exit', duration: exitDuration, easing: exitEasing, delay: exitDelay }));\n }\n\n return {\n enter: enterAtoms,\n exit: exitAtoms,\n };\n};\n\n/** A React component that applies slide in/out transitions to its children. */\nexport const Slide = createPresenceComponent(slidePresenceFn);\n\nexport const SlideSnappy = createPresenceComponentVariant(Slide, {\n easing: motionTokens.curveDecelerateMax,\n exitEasing: motionTokens.curveAccelerateMax,\n});\n\nexport const SlideRelaxed = createPresenceComponentVariant(Slide, {\n duration: motionTokens.durationGentle,\n});\n"],"names":["Slide","SlideRelaxed","SlideSnappy","slidePresenceFn","duration","motionTokens","durationNormal","easing","curveDecelerateMid","delay","exitDuration","exitEasing","curveAccelerateMid","exitDelay","outX","outY","inX","inY","animateOpacity","enterAtoms","slideAtom","direction","exitAtoms","push","fadeAtom","enter","exit","createPresenceComponent","createPresenceComponentVariant","curveDecelerateMax","curveAccelerateMax","durationGentle"],"mappings":";;;;;;;;;;;IAiEaA,KAAK;eAALA;;IAOAC,YAAY;eAAZA;;IALAC,WAAW;eAAXA;;;6BA9DN;0BACkB;2BACC;AAG1B;;;;;;;;;;;;;;CAcC,GACD,MAAMC,kBAAiD,CAAC,EACtDC,WAAWC,yBAAY,CAACC,cAAc,EACtCC,SAASF,yBAAY,CAACG,kBAAkB,EACxCC,QAAQ,CAAC,EACTC,eAAeN,QAAQ,EACvBO,aAAaN,yBAAY,CAACO,kBAAkB,EAC5CC,YAAYJ,KAAK,EACjBK,OAAO,KAAK,EACZC,OAAO,KAAK,EACZC,MAAM,KAAK,EACXC,MAAM,KAAK,EACXC,iBAAiB,IAAI,EACT;IACZ,MAAMC,aAAa;QAACC,IAAAA,oBAAS,EAAC;YAAEC,WAAW;YAASjB;YAAUG;YAAQE;YAAOK;YAAMC;YAAMC;YAAKC;QAAI;KAAG;IACrG,MAAMK,YAAY;QAChBF,IAAAA,oBAAS,EAAC;YACRC,WAAW;YACXjB,UAAUM;YACVH,QAAQI;YACRF,OAAOI;YACPC;YACAC;YACAC;YACAC;QACF;KACD;IAED,iDAAiD;IACjD,IAAIC,gBAAgB;QAClBC,WAAWI,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAASjB;YAAUG;YAAQE;QAAM;QACvEa,UAAUC,IAAI,CAACC,IAAAA,kBAAQ,EAAC;YAAEH,WAAW;YAAQjB,UAAUM;YAAcH,QAAQI;YAAYF,OAAOI;QAAU;IAC5G;IAEA,OAAO;QACLY,OAAON;QACPO,MAAMJ;IACR;AACF;AAGO,MAAMtB,QAAQ2B,IAAAA,oCAAuB,EAACxB;AAEtC,MAAMD,cAAc0B,IAAAA,2CAA8B,EAAC5B,OAAO;IAC/DO,QAAQF,yBAAY,CAACwB,kBAAkB;IACvClB,YAAYN,yBAAY,CAACyB,kBAAkB;AAC7C;AAEO,MAAM7B,eAAe2B,IAAAA,2CAA8B,EAAC5B,OAAO;IAChEI,UAAUC,yBAAY,CAAC0B,cAAc;AACvC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Slide: function() {
return _Slide.Slide;
},
SlideRelaxed: function() {
return _Slide.SlideRelaxed;
},
SlideSnappy: function() {
return _Slide.SlideSnappy;
}
});
const _Slide = require("./Slide");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/Slide/index.ts"],"sourcesContent":["export { Slide, SlideRelaxed, SlideSnappy } from './Slide';\nexport type { SlideParams } from './slide-types';\n"],"names":["Slide","SlideRelaxed","SlideSnappy"],"mappings":";;;;;;;;;;;IAASA,KAAK;eAALA,YAAK;;IAAEC,YAAY;eAAZA,mBAAY;;IAAEC,WAAW;eAAXA,kBAAW;;;uBAAQ"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,88 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
Blur: function() {
return _Blur.Blur;
},
Collapse: function() {
return _Collapse.Collapse;
},
CollapseDelayed: function() {
return _Collapse.CollapseDelayed;
},
CollapseRelaxed: function() {
return _Collapse.CollapseRelaxed;
},
CollapseSnappy: function() {
return _Collapse.CollapseSnappy;
},
Fade: function() {
return _Fade.Fade;
},
FadeRelaxed: function() {
return _Fade.FadeRelaxed;
},
FadeSnappy: function() {
return _Fade.FadeSnappy;
},
Rotate: function() {
return _Rotate.Rotate;
},
Scale: function() {
return _Scale.Scale;
},
ScaleRelaxed: function() {
return _Scale.ScaleRelaxed;
},
ScaleSnappy: function() {
return _Scale.ScaleSnappy;
},
Slide: function() {
return _Slide.Slide;
},
SlideRelaxed: function() {
return _Slide.SlideRelaxed;
},
SlideSnappy: function() {
return _Slide.SlideSnappy;
},
Stagger: function() {
return _Stagger.Stagger;
},
blurAtom: function() {
return _bluratom.blurAtom;
},
fadeAtom: function() {
return _fadeatom.fadeAtom;
},
rotateAtom: function() {
return _rotateatom.rotateAtom;
},
scaleAtom: function() {
return _scaleatom.scaleAtom;
},
slideAtom: function() {
return _slideatom.slideAtom;
}
});
const _Collapse = require("./components/Collapse");
const _Fade = require("./components/Fade");
const _Scale = require("./components/Scale");
const _Slide = require("./components/Slide");
const _Blur = require("./components/Blur");
const _Rotate = require("./components/Rotate");
const _Stagger = require("./choreography/Stagger");
const _bluratom = require("./atoms/blur-atom");
const _fadeatom = require("./atoms/fade-atom");
const _rotateatom = require("./atoms/rotate-atom");
const _scaleatom = require("./atoms/scale-atom");
const _slideatom = require("./atoms/slide-atom");
// TODO: consider whether to export some or all collapse atoms

View File

@@ -0,0 +1 @@
{"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';\nexport { Stagger, type StaggerProps } from './choreography/Stagger';\n\n// Motion Atoms\nexport { blurAtom } from './atoms/blur-atom';\nexport { fadeAtom } from './atoms/fade-atom';\nexport { rotateAtom } from './atoms/rotate-atom';\nexport { scaleAtom } from './atoms/scale-atom';\nexport { slideAtom } from './atoms/slide-atom';\n// TODO: consider whether to export some or all collapse atoms\n"],"names":["Blur","Collapse","CollapseDelayed","CollapseRelaxed","CollapseSnappy","Fade","FadeRelaxed","FadeSnappy","Rotate","Scale","ScaleRelaxed","ScaleSnappy","Slide","SlideRelaxed","SlideSnappy","Stagger","blurAtom","fadeAtom","rotateAtom","scaleAtom","slideAtom"],"mappings":";;;;;;;;;;;IAWSA,IAAI;eAAJA,UAAI;;IAVXC,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,eAAe;eAAfA,yBAAe;;IADfC,cAAc;eAAdA,wBAAc;;IAMPC,IAAI;eAAJA,UAAI;;IAAcC,WAAW;eAAXA,iBAAW;;IAAvBC,UAAU;eAAVA,gBAAU;;IAIhBC,MAAM;eAANA,cAAM;;IAHNC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAClBC,KAAK;eAALA,YAAK;;IAAeC,YAAY;eAAZA,mBAAY;;IAAzBC,WAAW;eAAXA,kBAAW;;IAGlBC,OAAO;eAAPA,gBAAO;;IAGPC,QAAQ;eAARA,kBAAQ;;IACRC,QAAQ;eAARA,kBAAQ;;IACRC,UAAU;eAAVA,sBAAU;;IACVC,SAAS;eAATA,oBAAS;;IACTC,SAAS;eAATA,oBAAS;;;0BAbX;sBACwD;uBACI;uBACA;sBAC7B;wBACI;yBACC;0BAGlB;0BACA;4BACE;2BACD;2BACA;CAC1B,8DAA8D"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,29 @@
import { motionTokens } from '@fluentui/react-motion';
/**
* Generates a motion atom object for a blur-in or blur-out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.
* @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.
* @param delay - Time (ms) to delay the animation. Defaults to 0.
* @returns A motion atom object with filter blur keyframes and the supplied duration and easing.
*/ export const blurAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outRadius = '10px', inRadius = '0px' })=>{
const keyframes = [
{
filter: `blur(${outRadius})`
},
{
filter: `blur(${inRadius})`
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay
};
};

View File

@@ -0,0 +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 /** Blur radius for the out state (exited). Defaults to '10px'. */\n outRadius?: string;\n /** Blur radius for the in state (entered). Defaults to '0px'. */\n inRadius?: 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 outRadius - Blur radius for the out state (exited) with units (e.g., '20px', '1rem'). Defaults to '10px'.\n * @param inRadius - Blur radius for the in state (entered) with units (e.g., '0px', '5px'). Defaults to '0px'.\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 outRadius = '10px',\n inRadius = '0px',\n}: BlurAtomParams): AtomMotion => {\n const keyframes = [{ filter: `blur(${outRadius})` }, { filter: `blur(${inRadius})` }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["motionTokens","blurAtom","direction","duration","easing","curveLinear","delay","outRadius","inRadius","keyframes","filter","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAUlE;;;;;;;;;CASC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,YAAY,MAAM,EAClBC,WAAW,KAAK,EACD;IACf,MAAMC,YAAY;QAAC;YAAEC,QAAQ,CAAC,KAAK,EAAEH,UAAU,CAAC,CAAC;QAAC;QAAG;YAAEG,QAAQ,CAAC,KAAK,EAAEF,SAAS,CAAC,CAAC;QAAC;KAAE;IACrF,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,32 @@
import { motionTokens } from '@fluentui/react-motion';
/**
* Generates a motion atom object for a fade-in or fade-out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param delay - The delay before the motion starts. Defaults to 0.
* @param outOpacity - Opacity for the out state (exited). Defaults to 0.
* @param inOpacity - Opacity for the in state (entered). Defaults to 1.
* @returns A motion atom object with opacity keyframes and the supplied duration and easing.
*/ export const fadeAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outOpacity = 0, inOpacity = 1 })=>{
const keyframes = [
{
opacity: outOpacity
},
{
opacity: inOpacity
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay,
// Applying opacity backwards and forwards in time is important
// to avoid a bug where a delayed animation is not hidden when it should be.
fill: 'both'
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/atoms/fade-atom.ts"],"sourcesContent":["import { AtomMotion, motionTokens } from '@fluentui/react-motion';\nimport { BaseAtomParams } from '../types';\n\ninterface FadeAtomParams extends BaseAtomParams {\n /** Defines how values are applied before and after execution. Defaults to 'both'. */\n fill?: FillMode;\n\n /** Opacity for the out state (exited). Defaults to 0. */\n outOpacity?: number;\n\n /** Opacity for the in state (entered). Defaults to 1. */\n inOpacity?: number;\n}\n\n/**\n * Generates a motion atom object for a fade-in or fade-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 delay - The delay before the motion starts. Defaults to 0.\n * @param outOpacity - Opacity for the out state (exited). Defaults to 0.\n * @param inOpacity - Opacity for the in state (entered). Defaults to 1.\n * @returns A motion atom object with opacity keyframes and the supplied duration and easing.\n */\nexport const fadeAtom = ({\n direction,\n duration,\n easing = motionTokens.curveLinear,\n delay = 0,\n outOpacity = 0,\n inOpacity = 1,\n}: FadeAtomParams): AtomMotion => {\n const keyframes = [{ opacity: outOpacity }, { opacity: inOpacity }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n // Applying opacity backwards and forwards in time is important\n // to avoid a bug where a delayed animation is not hidden when it should be.\n fill: 'both',\n };\n};\n"],"names":["motionTokens","fadeAtom","direction","duration","easing","curveLinear","delay","outOpacity","inOpacity","keyframes","opacity","reverse","fill"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAclE;;;;;;;;;CASC,GACD,OAAO,MAAMC,WAAW,CAAC,EACvBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,aAAa,CAAC,EACdC,YAAY,CAAC,EACE;IACf,MAAMC,YAAY;QAAC;YAAEC,SAASH;QAAW;QAAG;YAAEG,SAASF;QAAU;KAAE;IACnE,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;QACA,+DAA+D;QAC/D,4EAA4E;QAC5EM,MAAM;IACR;AACF,EAAE"}

View File

@@ -0,0 +1,33 @@
import { motionTokens } from '@fluentui/react-motion';
const createRotateValue = (axis, angle)=>{
return `${axis.toLowerCase()} ${angle}deg`;
};
/**
* Generates a motion atom object for a rotation around a single axis.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param axis - The axis of rotation: 'x', 'y', or 'z'. Defaults to 'y'.
* @param outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.
* @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.
* @param delay - Time (ms) to delay the animation. Defaults to 0.
* @returns A motion atom object with rotate keyframes and the supplied duration and easing.
*/ export const rotateAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, axis = 'z', outAngle = -90, inAngle = 0 })=>{
const keyframes = [
{
rotate: createRotateValue(axis, outAngle)
},
{
rotate: createRotateValue(axis, inAngle)
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay
};
};

View File

@@ -0,0 +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 /** Rotation angle for the out state (exited) in degrees. Defaults to -90. */\n outAngle?: number;\n /** Rotation angle for the in state (entered) in degrees. Defaults to 0. */\n inAngle?: 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 outAngle - Rotation angle for the out state (exited) in degrees. Defaults to -90.\n * @param inAngle - Rotation angle for the in state (entered) in degrees. Defaults to 0.\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 = 'z',\n outAngle = -90,\n inAngle = 0,\n}: RotateAtomParams): AtomMotion => {\n const keyframes = [{ rotate: createRotateValue(axis, outAngle) }, { rotate: createRotateValue(axis, inAngle) }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["motionTokens","createRotateValue","axis","angle","toLowerCase","rotateAtom","direction","duration","easing","curveLinear","delay","outAngle","inAngle","keyframes","rotate","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAclE,MAAMC,oBAAoB,CAACC,MAAcC;IACvC,OAAO,GAAGD,KAAKE,WAAW,GAAG,CAAC,EAAED,MAAM,GAAG,CAAC;AAC5C;AAEA;;;;;;;;;;CAUC,GACD,OAAO,MAAME,aAAa,CAAC,EACzBC,SAAS,EACTC,QAAQ,EACRC,SAASR,aAAaS,WAAW,EACjCC,QAAQ,CAAC,EACTR,OAAO,GAAG,EACVS,WAAW,CAAC,EAAE,EACdC,UAAU,CAAC,EACM;IACjB,MAAMC,YAAY;QAAC;YAAEC,QAAQb,kBAAkBC,MAAMS;QAAU;QAAG;YAAEG,QAAQb,kBAAkBC,MAAMU;QAAS;KAAE;IAC/G,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IAEA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,29 @@
import { motionTokens } from '@fluentui/react-motion';
/**
* Generates a motion atom object for a scale in or scale out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param outScale - Scale for the out state (exited). Defaults to 0.9.
* @param inScale - Scale for the in state (entered). Defaults to 1.
* @param delay - Time (ms) to delay the animation. Defaults to 0.
* @returns A motion atom object with scale keyframes and the supplied duration and easing.
*/ export const scaleAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outScale = 0.9, inScale = 1 })=>{
const keyframes = [
{
scale: outScale
},
{
scale: inScale
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay
};
};

View File

@@ -0,0 +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 /** Scale for the out state (exited). Defaults to 0.9. */\n outScale?: number;\n /** Scale for the in state (entered). Defaults to 1. */\n inScale?: 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 outScale - Scale for the out state (exited). Defaults to 0.9.\n * @param inScale - Scale for the in state (entered). 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 outScale = 0.9,\n inScale = 1,\n}: ScaleAtomParams): AtomMotion => {\n const keyframes = [{ scale: outScale }, { scale: inScale }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["motionTokens","scaleAtom","direction","duration","easing","curveLinear","delay","outScale","inScale","keyframes","scale","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAUlE;;;;;;;;;CASC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,WAAW,GAAG,EACdC,UAAU,CAAC,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,OAAOH;QAAS;QAAG;YAAEG,OAAOF;QAAQ;KAAE;IAC3D,IAAIN,cAAc,QAAQ;QACxBO,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAN;QACAC;QACAE;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,31 @@
import { motionTokens } from '@fluentui/react-motion';
/**
* Generates a motion atom object for a slide-in or slide-out.
* @param direction - The functional direction of the motion: 'enter' or 'exit'.
* @param duration - The duration of the motion in milliseconds.
* @param easing - The easing curve for the motion. Defaults to `motionTokens.curveLinear`.
* @param outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
* @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.
* @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
* @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.
* @param delay - Time (ms) to delay the animation. Defaults to 0.
* @returns A motion atom object with translate keyframes and the supplied duration and easing.
*/ export const slideAtom = ({ direction, duration, easing = motionTokens.curveLinear, delay = 0, outX = '0px', outY = '0px', inX = '0px', inY = '0px' })=>{
const keyframes = [
{
translate: `${outX} ${outY}`
},
{
translate: `${inX} ${inY}`
}
];
if (direction === 'exit') {
keyframes.reverse();
}
return {
keyframes,
duration,
easing,
delay
};
};

View File

@@ -0,0 +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 /** X translate for the out state (exited). Defaults to '0px'. */\n outX?: string;\n /** Y translate for the out state (exited). Defaults to '0px'. */\n outY?: string;\n /** X translate for the in state (entered). Defaults to '0px'. */\n inX?: string;\n /** Y translate for the in state (entered). Defaults to '0px'. */\n inY?: 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 outX - X translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.\n * @param outY - Y translate for the out state (exited) with units (e.g., '50px', '100%'). Defaults to '0px'.\n * @param inX - X translate for the in state (entered) with units (e.g., '5px', '10%'). Defaults to '0px'.\n * @param inY - Y translate for the in state (entered) with units (e.g., '5px', '10%'). 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 outX = '0px',\n outY = '0px',\n inX = '0px',\n inY = '0px',\n}: SlideAtomParams): AtomMotion => {\n const keyframes = [{ translate: `${outX} ${outY}` }, { translate: `${inX} ${inY}` }];\n if (direction === 'exit') {\n keyframes.reverse();\n }\n return {\n keyframes,\n duration,\n easing,\n delay,\n };\n};\n"],"names":["motionTokens","slideAtom","direction","duration","easing","curveLinear","delay","outX","outY","inX","inY","keyframes","translate","reverse"],"mappings":"AAAA,SAAqBA,YAAY,QAAQ,yBAAyB;AAclE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,YAAY,CAAC,EACxBC,SAAS,EACTC,QAAQ,EACRC,SAASJ,aAAaK,WAAW,EACjCC,QAAQ,CAAC,EACTC,OAAO,KAAK,EACZC,OAAO,KAAK,EACZC,MAAM,KAAK,EACXC,MAAM,KAAK,EACK;IAChB,MAAMC,YAAY;QAAC;YAAEC,WAAW,GAAGL,KAAK,CAAC,EAAEC,MAAM;QAAC;QAAG;YAAEI,WAAW,GAAGH,IAAI,CAAC,EAAEC,KAAK;QAAC;KAAE;IACpF,IAAIR,cAAc,QAAQ;QACxBS,UAAUE,OAAO;IACnB;IACA,OAAO;QACLF;QACAR;QACAC;QACAE;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,189 @@
'use client';
import * as React from 'react';
import { useStaggerItemsVisibility } from './useStaggerItemsVisibility';
import { DEFAULT_ITEM_DURATION, DEFAULT_ITEM_DELAY, acceptsVisibleProp, acceptsDelayProps, getStaggerChildMapping } from './utils';
/**
* Shared utility to detect optimal stagger modes based on children components.
* Consolidates the auto-detection logic used by both StaggerMain and createStaggerDirection.
*/ const detectStaggerModes = (children, options)=>{
const { hideMode, delayMode, fallbackHideMode = 'visibilityStyle' } = options;
const childMapping = getStaggerChildMapping(children);
const elements = Object.values(childMapping).map((item)=>item.element);
const hasVisiblePropSupport = elements.every((child)=>acceptsVisibleProp(child));
const hasDelayPropSupport = elements.every((child)=>acceptsDelayProps(child));
return {
hideMode: hideMode !== null && hideMode !== void 0 ? hideMode : hasVisiblePropSupport ? 'visibleProp' : fallbackHideMode,
delayMode: delayMode !== null && delayMode !== void 0 ? delayMode : hasDelayPropSupport ? 'delayProp' : 'timing'
};
};
const StaggerOneWay = ({ children, direction, itemDelay = DEFAULT_ITEM_DELAY, itemDuration = DEFAULT_ITEM_DURATION, reversed = false, hideMode, delayMode = 'timing', onMotionFinish })=>{
const childMapping = React.useMemo(()=>getStaggerChildMapping(children), [
children
]);
// Always call hooks at the top level, regardless of delayMode
const { itemsVisibility } = useStaggerItemsVisibility({
childMapping,
itemDelay,
itemDuration,
direction,
reversed,
onMotionFinish,
hideMode
});
// For delayProp mode, pass delay props directly to motion components
if (delayMode === 'delayProp') {
return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(childMapping).map(([key, { element, index }])=>{
const staggerIndex = reversed ? Object.keys(childMapping).length - 1 - index : index;
const delay = staggerIndex * itemDelay;
// Clone element with delay prop (for enter direction) or exitDelay prop (for exit direction)
const delayProp = direction === 'enter' ? {
delay
} : {
exitDelay: delay
};
// Only set visible prop if the component supports it
// Set visible based on direction: true for enter, false for exit
const visibleProp = acceptsVisibleProp(element) ? {
visible: direction === 'enter'
} : {};
return /*#__PURE__*/ React.cloneElement(element, {
key,
...visibleProp,
...delayProp
});
}));
}
// For timing mode, use the existing timing-based implementation
return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(childMapping).map(([key, { element }])=>{
if (hideMode === 'visibleProp') {
// Use a generic record type for props to avoid `any` while still allowing unknown prop shapes.
return /*#__PURE__*/ React.cloneElement(element, {
key,
visible: itemsVisibility[key]
});
} else if (hideMode === 'visibilityStyle') {
const childProps = element.props;
const style = {
...childProps === null || childProps === void 0 ? void 0 : childProps.style,
visibility: itemsVisibility[key] ? 'visible' : 'hidden'
};
return /*#__PURE__*/ React.cloneElement(element, {
key,
style
});
} else {
// unmount mode
return itemsVisibility[key] ? /*#__PURE__*/ React.cloneElement(element, {
key
}) : null;
}
}));
};
// Shared helper for StaggerIn and StaggerOut
const createStaggerDirection = (direction)=>{
const StaggerDirection = ({ hideMode, delayMode, children, ...props })=>{
// Auto-detect modes for better performance with motion components
const { hideMode: resolvedHideMode, delayMode: resolvedDelayMode } = detectStaggerModes(children, {
hideMode,
delayMode,
// One-way stagger falls back to visibilityStyle if it doesn't detect visibleProp support
fallbackHideMode: 'visibilityStyle'
});
return /*#__PURE__*/ React.createElement(StaggerOneWay, {
...props,
children: children,
direction: direction,
hideMode: resolvedHideMode,
delayMode: resolvedDelayMode
});
};
return StaggerDirection;
};
const StaggerIn = createStaggerDirection('enter');
const StaggerOut = createStaggerDirection('exit');
// Main Stagger component with auto-detection or explicit modes
const StaggerMain = (props)=>{
const { children, visible = false, hideMode, delayMode, ...rest } = props;
// Auto-detect modes for bidirectional stagger
const { hideMode: resolvedHideMode, delayMode: resolvedDelayMode } = detectStaggerModes(children, {
hideMode,
delayMode,
// Bidirectional stagger falls back to visibilityStyle if it doesn't detect visibleProp support
fallbackHideMode: 'visibilityStyle'
});
const direction = visible ? 'enter' : 'exit';
return /*#__PURE__*/ React.createElement(StaggerOneWay, {
...rest,
children: children,
hideMode: resolvedHideMode,
delayMode: resolvedDelayMode,
direction: direction
});
};
/**
* Stagger is a component that manages the staggered entrance and exit of its children.
* Children are animated in sequence with configurable timing between each item.
* Stagger can be interactively toggled between entrance and exit animations using the `visible` prop.
*
* @param children - React elements to animate. Elements are cloned with animation props.
* @param visible - Controls animation direction. When `true`, the group is animating "enter" (items shown);
* when `false`, the group is animating "exit" (items hidden). Defaults to `false`.
* @param itemDelay - Milliseconds between each item's animation start.
* Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).
* @param itemDuration - Milliseconds each item's animation lasts. Only used with `delayMode="timing"`.
* Defaults to the package's default item duration (see `DEFAULT_ITEM_DURATION`).
* @param reversed - Whether to reverse the stagger sequence (last item animates first). Defaults to `false`.
* @param hideMode - How children's visibility/mounting is managed. Auto-detects if not specified.
* @param delayMode - How staggering timing is implemented. Auto-detects if not specified.
* @param onMotionFinish - Callback invoked when the staggered animation sequence completes.
*
* **Auto-detection behavior:**
* - **hideMode**: Presence components use `'visibleProp'`, DOM elements use `'visibilityStyle'`
* - **delayMode**: Components with delay support use `'delayProp'` (most performant), others use `'timing'`
*
* **hideMode options:**
* - `'visibleProp'`: Children are presence components with `visible` prop (always rendered, visibility controlled via prop)
* - `'visibilityStyle'`: Children remain in DOM with inline style visibility: hidden/visible (preserves layout space)
* - `'unmount'`: Children are mounted/unmounted from DOM based on visibility
*
* **delayMode options:**
* - `'timing'`: Manages visibility over time using JavaScript timing
* - `'delayProp'`: Passes delay props to motion components to use native Web Animations API delays (most performant)
*
* **Static variants:**
* - `<Stagger.In>` - One-way stagger for entrance animations only (auto-detects optimal modes)
* - `<Stagger.Out>` - One-way stagger for exit animations only (auto-detects optimal modes)
*
* @example
* ```tsx
* import { Stagger, Fade, Scale, Rotate } from '@fluentui/react-motion-components-preview';
*
* // Auto-detects optimal modes for presence components (delayProp + visibleProp)
* <Stagger visible={isVisible} itemDelay={150}>
* <Fade><div>Item 2</div></Fade>
* <Scale><div>Item 1</div></Scale>
* <Rotate><div>Item 3</div></Rotate>
* </Stagger>
*
* // Auto-detects optimal modes for motion components (delayProp + unmount)
* <Stagger.In itemDelay={100}>
* <Scale.In><div>Item 1</div></Scale.In>
* <Fade.In><div>Item 2</div></Fade.In>
* </Stagger.In>
*
* // Auto-detects timing mode for DOM elements (timing + visibilityStyle)
* <Stagger visible={isVisible} itemDelay={150} onMotionFinish={handleComplete}>
* <div>Item 1</div>
* <div>Item 2</div>
* <div>Item 3</div>
* </Stagger>
*
* // Override auto-detection when needed
* <Stagger visible={isVisible} delayMode="timing" hideMode="unmount">
* <CustomComponent>Item 1</CustomComponent>
* </Stagger>
* ```
*/ export const Stagger = Object.assign(StaggerMain, {
In: StaggerIn,
Out: StaggerOut
});

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
export { Stagger } from './Stagger';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/index.ts"],"sourcesContent":["export { Stagger } from './Stagger';\nexport type { StaggerProps } from './stagger-types';\n"],"names":["Stagger"],"mappings":"AAAA,SAASA,OAAO,QAAQ,YAAY"}

View File

@@ -0,0 +1 @@
import * as React from 'react';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/stagger-types.ts"],"sourcesContent":["import { PresenceComponentProps, PresenceDirection } from '@fluentui/react-motion';\nimport * as React from 'react';\n\n/**\n * Defines how Stagger manages its children's visibility/mounting.\n * - 'visibleProp': Children are components with a `visible` prop (e.g. motion components)\n * - 'visibilityStyle': Children remain in DOM with inline style `visibility: hidden | visible`\n * - 'unmount': Children are mounted/unmounted from DOM based on visibility\n */\nexport type StaggerHideMode = 'visibleProp' | 'visibilityStyle' | 'unmount';\n\n/**\n * Defines how Stagger implements the timing of staggered animations.\n * - 'timing': Manages visibility over time using JavaScript timing (current behavior)\n * - 'delayProp': Passes delay props to motion components to use native Web Animations API delays\n */\nexport type StaggerDelayMode = 'timing' | 'delayProp';\n\n/**\n * Props for the Stagger component that manages staggered entrance and exit animations.\n */\nexport interface StaggerProps {\n /** React elements to animate. Elements are cloned with animation props. */\n children: React.ReactNode;\n\n /**\n * Controls children animation direction. When `true`, the group is animating \"enter\" (items shown).\n * When `false`, the group is animating \"exit\" (items hidden).\n */\n visible?: PresenceComponentProps['visible'];\n\n /** Whether to reverse the stagger sequence (last item animates first). Defaults to `false`. */\n reversed?: boolean;\n\n /**\n * Milliseconds between each child's animation start.\n * Defaults to the package's default delay (see `DEFAULT_ITEM_DELAY`).\n */\n itemDelay?: number;\n\n /**\n * Milliseconds each child's animation lasts. Only used with `delayMode=\"timing\"`.\n * Defaults to the package's default duration (see `DEFAULT_ITEM_DURATION`).\n */\n itemDuration?: number;\n\n /** How children's visibility/mounting is managed. Auto-detects if not specified. */\n hideMode?: StaggerHideMode;\n\n /** How staggering timing is implemented. Defaults to 'timing'. */\n delayMode?: StaggerDelayMode;\n\n /** Callback invoked when the staggered animation sequence completes. */\n onMotionFinish?: () => void;\n}\n\nexport interface StaggerOneWayProps extends Omit<StaggerProps, 'visible' | 'hideMode' | 'delayMode'> {\n /** Animation direction: 'enter' or 'exit'. */\n direction: PresenceDirection;\n\n /** How children's visibility/mounting is managed. Required - provided by wrapper components. */\n hideMode: StaggerHideMode;\n\n /** How staggering timing is implemented. Required - provided by wrapper components. */\n delayMode: StaggerDelayMode;\n}\n"],"names":["React"],"mappings":"AACA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,176 @@
'use client';
import * as React from 'react';
import { useAnimationFrame, useEventCallback } from '@fluentui/react-utilities';
import { staggerItemsVisibilityAtTime, DEFAULT_ITEM_DURATION } from './utils';
/**
* Hook that tracks the visibility of a staggered sequence of items as time progresses.
*
* Behavior summary for all hide modes:
* - On the first render, items are placed in their final state (enter => visible, exit => hidden)
* and no animation runs.
* - On subsequent renders when direction changes, items animate from the opposite state
* to the final state over the stagger timeline.
* - Changes to the `reversed` prop do not trigger re-animation; they only affect the order
* during the next direction change animation.
*
* This hook uses child key mapping instead of item count to track individual items.
* This allows it to correctly handle:
* - Items being added and removed simultaneously (when count stays the same)
* - Items being reordered
* - Individual item identity across renders
*
* @param childMapping - Mapping of child keys to elements and indices
* @param itemDelay - Milliseconds between the start of each item's animation
* @param itemDuration - Milliseconds each item's animation lasts
* @param direction - 'enter' (show items) or 'exit' (hide items)
* @param reversed - Whether to reverse the stagger order (last item first)
* @param onMotionFinish - Callback fired when the full stagger sequence completes
* @param hideMode - How children's visibility is managed: 'visibleProp', 'visibilityStyle', or 'unmount'
*
* @returns An object with `itemsVisibility: Record<string, boolean>` indicating which items are currently visible by key
*/ export function useStaggerItemsVisibility({ childMapping, itemDelay, itemDuration = DEFAULT_ITEM_DURATION, direction, reversed = false, onMotionFinish, hideMode = 'visibleProp' }) {
const [requestAnimationFrame, cancelAnimationFrame] = useAnimationFrame();
// Stabilize the callback reference to avoid re-triggering effects on every render
const handleMotionFinish = useEventCallback(onMotionFinish !== null && onMotionFinish !== void 0 ? onMotionFinish : ()=>{
return;
});
// Track animation state independently of child changes
const [animationKey, setAnimationKey] = React.useState(0);
const prevDirection = React.useRef(direction);
// Only trigger new animation when direction actually changes, not when children change
React.useEffect(()=>{
if (prevDirection.current !== direction) {
setAnimationKey((prev)=>prev + 1);
prevDirection.current = direction;
}
}, [
direction
]);
// State: visibility mapping for all items by key
const [itemsVisibility, setItemsVisibility] = React.useState(()=>{
const initial = {};
// All hide modes start in final state: visible for 'enter', hidden for 'exit'
const initialState = direction === 'enter';
Object.keys(childMapping).forEach((key)=>{
initial[key] = initialState;
});
return initial;
});
// Update visibility mapping when childMapping changes
React.useEffect(()=>{
setItemsVisibility((prev)=>{
const next = {};
const targetState = direction === 'enter';
// Add or update items from new mapping
Object.keys(childMapping).forEach((key)=>{
if (key in prev) {
// Existing item - preserve its visibility state
next[key] = prev[key];
} else {
// New item - set to target state
next[key] = targetState;
}
});
// Note: Items that were in prev but not in childMapping are automatically removed
// because we only iterate over keys in childMapping
return next;
});
}, [
childMapping,
direction
]);
// Refs: animation timing and control
const startTimeRef = React.useRef(null);
const frameRef = React.useRef(null);
const finishedRef = React.useRef(false);
const isFirstRender = React.useRef(true);
// Use ref to avoid re-running the animation when child mapping changes
const childMappingRef = React.useRef(childMapping);
// Update childMapping ref whenever it changes
React.useEffect(()=>{
childMappingRef.current = childMapping;
}, [
childMapping
]);
// Use ref for reversed to avoid re-running animation when it changes
const reversedRef = React.useRef(reversed);
// Update reversed ref whenever it changes
React.useEffect(()=>{
reversedRef.current = reversed;
}, [
reversed
]);
// ====== ANIMATION EFFECT ======
React.useEffect(()=>{
let cancelled = false;
startTimeRef.current = null;
finishedRef.current = false;
// All hide modes skip animation on first render - items are already in their final state
if (isFirstRender.current) {
isFirstRender.current = false;
// Items are already in their final state from useState, no animation needed
handleMotionFinish();
return; // No cleanup needed for first render
}
// For animations after first render, start from the opposite of the final state
// - Enter animation: start hidden (false), animate to visible (true)
// - Exit animation: start visible (true), animate to hidden (false)
const startState = direction === 'exit';
// Use childMappingRef.current to avoid adding childMapping to dependencies
const initialVisibility = {};
Object.keys(childMappingRef.current).forEach((key)=>{
initialVisibility[key] = startState;
});
setItemsVisibility(initialVisibility);
// Animation loop: update visibility on each frame until complete
const tick = (now)=>{
if (cancelled) {
return;
}
if (startTimeRef.current === null) {
startTimeRef.current = now;
}
const elapsed = now - startTimeRef.current;
const childKeys = Object.keys(childMappingRef.current);
const itemCount = childKeys.length;
const result = staggerItemsVisibilityAtTime({
itemCount,
elapsed,
itemDelay,
itemDuration,
direction,
reversed: reversedRef.current
});
// Convert boolean array to keyed object
const nextVisibility = {};
childKeys.forEach((key, idx)=>{
nextVisibility[key] = result.itemsVisibility[idx];
});
setItemsVisibility(nextVisibility);
if (elapsed < result.totalDuration) {
frameRef.current = requestAnimationFrame(tick);
} else if (!finishedRef.current) {
finishedRef.current = true;
handleMotionFinish();
}
};
frameRef.current = requestAnimationFrame(tick);
return ()=>{
cancelled = true;
if (frameRef.current) {
cancelAnimationFrame();
}
};
}, [
animationKey,
itemDelay,
itemDuration,
direction,
requestAnimationFrame,
cancelAnimationFrame,
handleMotionFinish
]);
return {
itemsVisibility
};
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,5 @@
/**
* Default timing constants for stagger animations (milliseconds).
*/ import { motionTokens } from '@fluentui/react-motion';
/** Default delay in milliseconds between each item's animation start */ export const DEFAULT_ITEM_DELAY = motionTokens.durationFaster;
/** Default duration in milliseconds for each item's animation */ export const DEFAULT_ITEM_DURATION = motionTokens.durationNormal;

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/utils/constants.ts"],"sourcesContent":["/**\n * Default timing constants for stagger animations (milliseconds).\n */\n\nimport { motionTokens } from '@fluentui/react-motion';\n\n/** Default delay in milliseconds between each item's animation start */\nexport const DEFAULT_ITEM_DELAY = motionTokens.durationFaster;\n\n/** Default duration in milliseconds for each item's animation */\nexport const DEFAULT_ITEM_DURATION = motionTokens.durationNormal;\n"],"names":["motionTokens","DEFAULT_ITEM_DELAY","durationFaster","DEFAULT_ITEM_DURATION","durationNormal"],"mappings":"AAAA;;CAEC,GAED,SAASA,YAAY,QAAQ,yBAAyB;AAEtD,sEAAsE,GACtE,OAAO,MAAMC,qBAAqBD,aAAaE,cAAc,CAAC;AAE9D,+DAA+D,GAC/D,OAAO,MAAMC,wBAAwBH,aAAaI,cAAc,CAAC"}

View File

@@ -0,0 +1,29 @@
import * as React from 'react';
/**
* Given `children`, return an object mapping key to child element and its index.
* This allows tracking individual items by identity (via React keys) rather than by position.
*
* Uses React.Children.toArray() which:
* - Automatically provides stable indices (0, 1, 2, ...)
* - Handles key normalization (e.g., 'a' → '.$a') consistently
* - Flattens fragments automatically
* - Generates keys for elements without explicit keys (e.g., '.0', '.1', '.2')
*
* @param children - React children to map
* @returns Object mapping child keys to { element, index }
*/ // TODO: consider unifying with getChildMapping from react-motion package by making it generic
export function getStaggerChildMapping(children) {
const childMapping = {};
if (children) {
React.Children.toArray(children).forEach((child, index)=>{
if (React.isValidElement(child)) {
var _child_key;
childMapping[(_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : ''] = {
element: child,
index
};
}
});
}
return childMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/utils/getStaggerChildMapping.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type StaggerChildMapping = Record<string, { element: React.ReactElement; index: number }>;\n\n/**\n * Given `children`, return an object mapping key to child element and its index.\n * This allows tracking individual items by identity (via React keys) rather than by position.\n *\n * Uses React.Children.toArray() which:\n * - Automatically provides stable indices (0, 1, 2, ...)\n * - Handles key normalization (e.g., 'a' → '.$a') consistently\n * - Flattens fragments automatically\n * - Generates keys for elements without explicit keys (e.g., '.0', '.1', '.2')\n *\n * @param children - React children to map\n * @returns Object mapping child keys to { element, index }\n */\n// TODO: consider unifying with getChildMapping from react-motion package by making it generic\nexport function getStaggerChildMapping(children: React.ReactNode | undefined): StaggerChildMapping {\n const childMapping: StaggerChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach((child, index) => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n element: child,\n index,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["React","getStaggerChildMapping","children","childMapping","Children","toArray","forEach","child","index","isValidElement","key","element"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAI/B;;;;;;;;;;;;CAYC,GACD,8FAA8F;AAC9F,OAAO,SAASC,uBAAuBC,QAAqC;IAC1E,MAAMC,eAAoC,CAAC;IAE3C,IAAID,UAAU;QACZF,MAAMI,QAAQ,CAACC,OAAO,CAACH,UAAUI,OAAO,CAAC,CAACC,OAAOC;YAC/C,IAAIR,MAAMS,cAAc,CAACF,QAAQ;oBAClBA;gBAAbJ,YAAY,CAACI,CAAAA,aAAAA,MAAMG,GAAG,cAATH,wBAAAA,aAAa,GAAG,GAAG;oBAC9BI,SAASJ;oBACTC;gBACF;YACF;QACF;IACF;IAEA,OAAOL;AACT"}

View File

@@ -0,0 +1,4 @@
export { DEFAULT_ITEM_DELAY, DEFAULT_ITEM_DURATION } from './constants';
export { getStaggerTotalDuration, staggerItemsVisibilityAtTime } from './stagger-calculations';
export { acceptsVisibleProp, acceptsDelayProps } from './motionComponentDetection';
export { getStaggerChildMapping } from './getStaggerChildMapping';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/choreography/Stagger/utils/index.ts"],"sourcesContent":["export { DEFAULT_ITEM_DELAY, DEFAULT_ITEM_DURATION } from './constants';\nexport { getStaggerTotalDuration, staggerItemsVisibilityAtTime } from './stagger-calculations';\nexport type { StaggerItemsVisibilityAtTimeParams } from './stagger-calculations';\nexport { acceptsVisibleProp, acceptsDelayProps } from './motionComponentDetection';\nexport { getStaggerChildMapping } from './getStaggerChildMapping';\nexport type { StaggerChildMapping } from './getStaggerChildMapping';\n"],"names":["DEFAULT_ITEM_DELAY","DEFAULT_ITEM_DURATION","getStaggerTotalDuration","staggerItemsVisibilityAtTime","acceptsVisibleProp","acceptsDelayProps","getStaggerChildMapping"],"mappings":"AAAA,SAASA,kBAAkB,EAAEC,qBAAqB,QAAQ,cAAc;AACxE,SAASC,uBAAuB,EAAEC,4BAA4B,QAAQ,yBAAyB;AAE/F,SAASC,kBAAkB,EAAEC,iBAAiB,QAAQ,6BAA6B;AACnF,SAASC,sBAAsB,QAAQ,2BAA2B"}

Some files were not shown because too many files have changed in this diff Show More