@progress/kendo-react-animation/index.d.ts

React Animation component assists with animating HTML elements. KendoReact Animation package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { AnimationsClassStructure } from '@progress/kendo-react-common';
import { default as default_2 } from 'prop-types';
import { JSX as JSX_2 } from 'react/jsx-runtime';
import * as React_2 from 'react';

declare const Animation_2: {
    (props: AnimationProps): JSX_2.Element;
    propTypes: {
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        childFactory: default_2.Requireable<any>;
        className: default_2.Requireable<string>;
        component: default_2.Requireable<string>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<any>;
        transitionName: default_2.Validator<string>;
        appear: default_2.Validator<boolean>;
        enter: default_2.Validator<boolean>;
        exit: default_2.Validator<boolean>;
        transitionEnterDuration: default_2.Validator<number>;
        transitionExitDuration: default_2.Validator<number>;
    };
};
export { Animation_2 as Animation }

export declare const AnimationChild: React_2.ForwardRefExoticComponent<AnimationChildProps & React_2.RefAttributes<AnimationChildHandle | null>>;

/**
 * Represents the AnimationChild handle.
 */
export declare interface AnimationChildHandle {
    /**
     * Gets the element.
     */
    element: HTMLDivElement | null;
    /**
     * Gets the props.
     */
    props: AnimationChildProps;
}

/**
 * Represents the props of the child Animation elements.
 */
export declare interface AnimationChildProps extends AnimationInterface {
    /**
     * Controlled by `TransitionGroup` if present. Otherwise, sets the state of the enter or exit Animations.
     */
    in?: boolean;
    /**
     * @hidden
     */
    style?: any;
    /**
     * @hidden
     */
    className?: string;
    /**
     * Specifies the transition class which will be applied on the appear, enter, and exit transition.
     */
    transitionName: string;
    /**
     * Specifies the style which will be applied when the Animation reaches its entering state.
     */
    animationEnteringStyle?: any;
    /**
     * Specifies the style which will be applied when the Animation reaches its entered state.
     */
    animationEnteredStyle?: any;
    /**
     * Specifies the style which will be applied when the Animation reaches its exiting state.
     */
    animationExitingStyle?: any;
    /**
     * Specifies the style which will be applied when the Animation reaches its exited state.
     */
    animationExitedStyle?: any;
    /**
     * The unstyled option classes.
     */
    unstyled?: AnimationsClassStructure;
}

/** @hidden */
declare type AnimationConfig = {
    initial?: React_2.CSSProperties;
    duration?: number;
    appear?: boolean;
    onStart?: any;
    onUpdate?: any;
    onEnd?: any;
};

/**
 * The arguments that are passed to the life-cycle hooks.
 */
declare interface AnimationEventArguments {
    /**
     * The element that is currently being animated.
     */
    animatedElement: HTMLElement;
    /**
     * The AnimationChild component which controls the animation.
     */
    target: AnimationChildHandle;
}

/**
 * Inherited by all Animations. Represents the properties which can be set to an Animation.
 */
declare interface AnimationInterface {
    /**
     * @hidden
     */
    children?: React.ReactNode;
    /**
     * Specifies the CSS class names which are set to each of the animated children elements.
     */
    componentChildClassName?: string;
    /**
     * Specifies the styles which are set to each of the animated children elements.
     */
    componentChildStyle?: any;
    /**
     * Called when a component is added to an existing Animation component and the Animation has not started yet ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
     */
    onEnter?: (event: AnimationEventArguments) => void;
    /**
     * Called when a component is added to an existing Animation component and the Animation is now happening ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
     */
    onEntering?: (event: AnimationEventArguments) => void;
    /**
     * Called when a component is added to an existing Animation component and the Animation is now finished ([more information and example]({% slug lifecyclehooks_animation %}#toc-adding-child-elements)).
     */
    onEntered?: (event: AnimationEventArguments) => void;
    /**
     * An event that is called after the Animation has reached its exit state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
     */
    onExit?: (event: AnimationEventArguments) => void;
    /**
     * An event that is called after the Animation has reached its exiting state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
     */
    onExiting?: (event: AnimationEventArguments) => void;
    /**
     * An event that is called after the Animation has reached its exited state ([more information and example]({% slug lifecyclehooks_animation %}#toc-removing-child-elements)).
     */
    onExited?: (event: AnimationEventArguments) => void;
    /**
     * @hidden
     * This event is always triggered in contrast to `onExited` which TransitionGroup prevents when target element is not removed from DOM.
     */
    onAfterExited?: (event: AnimationEventArguments) => void;
    /**
     * Defines whether a transition should happen on the first mount. Defaults to `false`.
     */
    appear?: boolean;
    /**
     * Specifies whether to animate the entering (showing) element ([see example]({% slug disabledstate_animation %})). Defaults to `true`.
     */
    enter?: boolean;
    /**
     * Specifies whether to animate a leaving (disappearing) element ([see example]({% slug disabledstate_animation %})). Defaults to `true`.
     */
    exit?: boolean;
    /**
     * Specifies the duration of the transition for the entering (`animation in`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated. Defaults to `300ms`.
     */
    transitionEnterDuration?: number;
    /**
     * Specifies the duration of the transition for the exiting (`animation out`) Animation ([see example]({% slug duration_animation %})). After the time runs out, the Animation is terminated. Defaults to `300ms`.
     */
    transitionExitDuration?: number;
    /**
     * Specifies if the Animation will use lazy-mounting on the first `in={true}`. Defaults to `false`.
     */
    mountOnEnter?: boolean;
    /**
     * Specifies if the Animation will unmount after it reaches its exited state. Defaults to `false`.
     */
    unmountOnExit?: boolean;
}

/**
 * Represents the props of the [KendoReact Animation component]({% slug overview_animation %}).
 */
export declare interface AnimationProps extends AnimationInterface {
    /**
     * When the element reaches its exit state, it is no longer available in the DOM ([see example]({% slug exitingchildcomponents_animation %})).
     */
    childFactory?: any;
    /**
     * Specifies the name of the CSS class which is set to the Animation.
     */
    className?: string;
    /**
     * Specifies the node type of the parent Animation. Defaults to `div`.
     */
    component?: string;
    /**
     * Specifies the id of the Animation.
     */
    id?: string;
    /**
     * Specifies the style of the parent Animation.
     */
    style?: any;
    /**
     * Specifies whether the Animation children will stack on top of each other without interfering ([see example]({% slug stacked_animation %})).
     */
    stackChildren?: boolean;
    /**
     * Specifies the `classNames` which will be applied during the transition ([see example]({% slug customizing_animation %})).
     */
    transitionName: string;
    /**
     * Specifies the style which will be applied when the Animation reaches its entering state.
     */
    animationEnteringStyle?: any;
    /**
     * Specifies the style which will be applied when the Animation reaches its entered state.
     */
    animationEnteredStyle?: any;
    /**
     * Specifies the style which will be applied when the Animation reaches its exiting state.
     */
    animationExitingStyle?: any;
    /**
     * Specifies the style which will be applied when the Animation reaches its exited state.
     */
    animationExitedStyle?: any;
    /**
     * The unstyled option classes.
     */
    unstyled?: AnimationsClassStructure;
}

export declare const Expand: {
    (props: ExpandProps): JSX_2.Element;
    propTypes: {
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        childFactory: default_2.Requireable<any>;
        className: default_2.Requireable<string>;
        direction: default_2.Requireable<string>;
        component: default_2.Requireable<string>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<any>;
    };
};

/**
 * Specifies the direction of the Expand Animation ([see example]({% slug direction_animation %}#toc-expand)).
 *
 * The supported directions are:
 * * (Default) `vertical`&mdash;Expands the content from center to top and bottom, and vice-versa.
 * * `horizontal`&mdash;Expands the content from center to left and right, and vice-versa.
 */
export declare type ExpandDirection = 'horizontal' | 'vertical';

/**
 * Represent the props of the [KendoReact Expand Animation component]({% slug animationtypes_animation %}#toc-expand).
 *
 * {% meta height:300 %}
 * {% embed_file props/expand/func/app.tsx preview %}
 * {% embed_file props/expand/func/main.tsx %}
 * {% embed_file props/expand/func/styles.css %}
 * {% endmeta %}
 *
 */
export declare interface ExpandProps extends AnimationInterface {
    /**
     * After the element reached its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
     */
    childFactory?: any;
    /**
     * Specifies the CSS class names which are set to the Animation.
     */
    className?: string;
    /**
     * Specifies the direction of the Expand Animation. Defaults to `vertical`.
     */
    direction?: ExpandDirection;
    /**
     * Specifies the node type of the parent Animation. Defaults to `div`.
     */
    component?: string;
    /**
     * Specifies the id of the Animation.
     */
    id?: string;
    /**
     * Specifies the style of the parent Animation.
     */
    style?: any;
}

export declare const Fade: {
    (props: FadeProps): JSX_2.Element;
    propTypes: {
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        childFactory: default_2.Requireable<any>;
        className: default_2.Requireable<string>;
        component: default_2.Requireable<string>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<any>;
    };
};

/**
 * Represent the props of the [KendoReact Fade Animation component]({% slug animationtypes_animation %}#toc-fade).
 *
 * {% meta height:300 %}
 * {% embed_file props/fade/func/app.tsx preview %}
 * {% embed_file props/fade/func/main.tsx %}
 * {% embed_file props/fade/func/styles.css %}
 * {% endmeta %}
 *
 */
export declare interface FadeProps extends AnimationInterface {
    /**
     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
     */
    childFactory?: any;
    /**
     * Specifies CSS class names which are set to the Animation.
     */
    className?: string;
    /**
     * Specifies the node type of the parent Animation. Defaults to `div`.
     */
    component?: string;
    /**
     * Specifies the id of the Animation.
     */
    id?: string;
    /**
     * Specifies the style of the parent Animation.
     */
    style?: any;
}

export declare const Push: {
    (props: PushProps): JSX_2.Element;
    propTypes: {
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        childFactory: default_2.Requireable<any>;
        className: default_2.Requireable<string>;
        direction: default_2.Requireable<string>;
        component: default_2.Requireable<string>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<any>;
        stackChildren: default_2.Requireable<boolean>;
    };
};

/**
 * Specifies the direction of the Push Animation ([see example]({% slug direction_animation %}#toc-push)).
 *
 * The supported directions are:
 * * (Default) `right`&mdash;Pushes the content from left to right.
 * * `up`&mdash;Pushes the content from bottom to top.
 * * `down`&mdash;Pushes the content from top to bottom.
 * * `left`&mdash;Pushes the content from right to left.
 */
export declare type PushDirection = 'up' | 'down' | 'left' | 'right';

/**
 * Represent the props of the [KendoReact Push Animation component]({% slug animationtypes_animation %}#toc-push).
 *
 * {% meta height:300 %}
 * {% embed_file props/push/func/app.tsx preview %}
 * {% embed_file props/push/func/main.tsx %}
 * {% embed_file props/push/func/styles.css %}
 * {% endmeta %}
 *
 */
export declare interface PushProps extends AnimationInterface {
    /**
     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
     */
    childFactory?: any;
    /**
     * Specifies the CSS class names which are set to the Animation.
     */
    className?: string;
    /**
     * Specifies the direction of the Push Animation. Defaults to `out`.
     */
    direction?: PushDirection;
    /**
     * Specifies the node type of the parent Animation. Defaults to `div`.
     */
    component?: string;
    /**
     * Specifies the id of the Animation.
     */
    id?: string;
    /**
     * Specifies the style of the parent Animation.
     */
    style?: any;
    /**
     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
     */
    stackChildren?: boolean;
}

export declare const Reveal: {
    (props: RevealProps): JSX_2.Element;
    propTypes: {
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        childFactory: default_2.Requireable<any>;
        className: default_2.Requireable<string>;
        direction: default_2.Requireable<string>;
        component: default_2.Requireable<string>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<any>;
    };
};

/**
 * Specifies the direction of the Reveal Animation ([see example]({% slug direction_animation %}#toc-reveal)).
 *
 * The supported directions are:
 * * (Default) `vertical`&mdash;Reveals the height of the content.
 * * `horizontal`&mdash;Reveals the width of the content.
 */
export declare type RevealDirection = 'horizontal' | 'vertical';

/**
 * Represent the props of the [KendoReact Reveal Animation component]({% slug animationtypes_animation %}#toc-rveal).
 *
 * {% meta height:300 %}
 * {% embed_file props/reveal/func/app.tsx preview %}
 * {% embed_file props/reveal/func/main.tsx %}
 * {% embed_file props/reveal/func/styles.css %}
 * {% endmeta %}
 *
 */
export declare interface RevealProps extends AnimationInterface {
    /**
     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
     */
    childFactory?: any;
    /**
     * Specifies the CSS class names which are set to the Animation.
     */
    className?: string;
    /**
     * Specifies the direction of the Reveal Animation. Defaults to `vertical`.
     */
    direction?: RevealDirection;
    /**
     * Specifies the node type of the parent Animation. Defaults to `div`.
     */
    component?: string;
    /**
     * Specifies the id of the Animation.
     */
    id?: string;
    /**
     * Specifies the style of the parent Animation.
     */
    style?: any;
    /**
     * @hidden
     * This is synchronious variant of `onEnter` event.
     */
    onBeforeEnter?: (event: AnimationEventArguments) => void;
}

export declare const Slide: {
    (props: SlideProps): JSX_2.Element;
    propTypes: {
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        childFactory: default_2.Requireable<any>;
        className: default_2.Requireable<string>;
        direction: default_2.Requireable<string>;
        component: default_2.Requireable<string>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<any>;
    };
};

/**
 * Specifies the direction of the Slide Animation ([see example]({% slug direction_animation %}#toc-slide)).
 *
 * The supported directions are:
 * * (Default) `down`&mdash;On showing, slides the content from top to bottom, and vice-versa.
 * * `up`&mdash;On showing, slides the content from bottom to top, and vice-versa.
 * * `left`&mdash;On showing, slides the content from right to left, and vice-versa.
 * * `right`&mdash;On showing, slides the content from left to right, and vice-versa.
 */
export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';

/**
 * Represent the props of the [KendoReact Slide Animation component]({% slug animationtypes_animation %}#toc-slide).
 *
 * {% meta height:300 %}
 * {% embed_file props/slide/func/app.tsx preview %}
 * {% embed_file props/slide/func/main.tsx %}
 * {% embed_file props/slide/func/styles.css %}
 * {% endmeta %}
 *
 */
export declare interface SlideProps extends AnimationInterface {
    /**
     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
     */
    childFactory?: any;
    /**
     * Specifies the CSS class names which are set to the Animation.
     */
    className?: string;
    /**
     * Specifies the direction of the Slide Animation. Defaults to `down`.
     */
    direction?: SlideDirection;
    /**
     * Specifies the node type of the parent Animation. Defaults to `div`.
     */
    component?: string;
    /**
     * Specifies the id of the Animation.
     */
    id?: string;
    /**
     * Specifies the style of the parent Animation.
     */
    style?: any;
}

/** @hidden */
export declare const useAnimation: (config: AnimationConfig, deps: any[]) => void;

export declare const Zoom: {
    (props: ZoomProps): JSX_2.Element;
    propTypes: {
        children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
        childFactory: default_2.Requireable<any>;
        className: default_2.Requireable<string>;
        direction: default_2.Requireable<string>;
        component: default_2.Requireable<string>;
        id: default_2.Requireable<string>;
        style: default_2.Requireable<any>;
        stackChildren: default_2.Requireable<boolean>;
    };
};

/**
 * Specifies the direction of the Zoom Animation ([see example]({% slug direction_animation %}#toc-zoom)).
 *
 * The supported directions are:
 * * (Default) `out`&mdash;Zooms the content from the outside to the inside.
 * * `in`&mdash;Zooms the content from the inside to the outside.
 */
export declare type ZoomDirection = 'in' | 'out';

/**
 * Represent the props of the [KendoReact Zoom Animation component]({% slug animationtypes_animation %}#toc-zoom).
 *
 * {% meta height:300 %}
 * {% embed_file props/zoom/func/app.tsx preview %}
 * {% embed_file props/zoom/func/main.tsx %}
 * {% embed_file props/zoom/func/styles.css %}
 * {% endmeta %}
 *
 */
export declare interface ZoomProps extends AnimationInterface {
    /**
     * After the element reaches its exit state, it is no longer available in the DOM. If a DOM operation is required, access it trough the `childFactory` function.
     */
    childFactory?: any;
    /**
     * Specifies the CSS class names which are set to the Animation.
     */
    className?: string;
    /**
     * Specifies the direction of the Zoom Animation. Defaults to `down`.
     */
    direction?: ZoomDirection;
    /**
     * Specifies the node type of the parent Animation. Defaults to `div`.
     */
    component?: string;
    /**
     * Specifies the id of the Animation.
     */
    id?: string;
    /**
     * Specifies the style of the parent Animation.
     */
    style?: any;
    /**
     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
     */
    stackChildren?: boolean;
}

export { }