408 lines
18 KiB
TypeScript
408 lines
18 KiB
TypeScript
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 { }
|