@progress/kendo-react-animation

/** * @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 } from 'react/jsx-runtime'; import * as React_2 from 'react'; declare const Animation_2: { (props: AnimationProps): JSX.Element; propTypes: { children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>; childFactory: default_2.Requireable<any>; className: default_2.Requireable<string>; component: default_2.Requireable<default_2.ReactNodeLike>; 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; /** * Custom inline styles to apply to the Animation container. * * @example * <AnimationChild style={{ backgroundColor: "red" }} /> */ style?: any; /** * Custom CSS class to apply to the Animation container. * * @example * <AnimationChild className="custom-animation-class" /> */ className?: string; /** * Specifies the base class name for the transition. This class will be used * to generate the `appear`, `enter`, and `exit` transition classes. * * @example * <AnimationChild transitionName="fade" /> */ transitionName: string; /** * Specifies the style which will be applied when the Animation reaches its entering state. * * @example * <AnimationChild animationEnteringStyle={{ opacity: 0.5 }} /> */ animationEnteringStyle?: any; /** * Inline styles applied when the Animation has entered. * * @example * <AnimationChild animationEnteredStyle={{ opacity: 1 }} /> */ animationEnteredStyle?: any; /** * Specifies the style which will be applied when the Animation reaches its exiting state. * * @example * <AnimationChild animationExitingStyle={{ opacity: 0.5 }} /> */ animationExitingStyle?: any; /** * Inline styles applied when the Animation has exited. * * @example * <AnimationChild animationExitedStyle={{ opacity: 0 }} /> */ animationExitedStyle?: any; /** * Provides unstyled options for the Animation. Accepts an object * implementing the `AnimationsClassStructure` interface. * * @example * <AnimationChild unstyled={{ appear: "custom-appear-class" }} /> */ 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 { /** * A function for customizing the rendering of child elements. * * @example * <Animation childFactory={(child) => React.cloneElement(child, { ariaHidden: true })} /> */ childFactory?: any; /** * Specifies the CSS class names to be applied to the Animation container. * * @example * <Animation className="animation-container" /> */ className?: string; /** * Specifies the HTML tag of the parent Animation container. Defaults to `div`. * * @example * <Animation component="main" /> */ component?: React_2.ReactNode; /** * Specifies the `id` attribute of the Animation container. * * @example * <Animation id="animation-container" /> */ id?: string; /** * Specifies the inline styles to be applied to the Animation container. * * @example * <Animation style={{ width: "100%" }} /> */ style?: any; /** * Determines whether child elements will stack on top of each other during the animation. * * @example * <Animation stackChildren={true} /> */ stackChildren?: boolean; /** * Specifies the base class name for the transition. * * @example * <Animation transitionName="fade" /> */ transitionName: string; /** * Specifies the inline styles applied when the Animation is entering. * * @example * <Animation animationEnteringStyle={{ opacity: 0.5 }} /> */ animationEnteringStyle?: any; /** * Specifies the inline styles applied when the Animation has entered. * * @example * <Animation animationEnteredStyle={{ opacity: 1 }} /> */ animationEnteredStyle?: any; /** * Specifies the inline styles applied when the Animation is exiting. * * @example * <Animation animationExitingStyle={{ opacity: 0.5 }} /> */ animationExitingStyle?: any; /** * Specifies the inline styles applied when the Animation has exited. * * @example * <Animation animationExitedStyle={{ opacity: 0 }} /> */ animationExitedStyle?: any; /** * Provides unstyled options for the Animation. * * @example * <Animation unstyled={{ appear: "unstyled-appear" }} /> */ unstyled?: AnimationsClassStructure; } export declare const Expand: { (props: ExpandProps): JSX.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<default_2.ReactNodeLike>; 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`—Expands the content from center to top and bottom, and vice-versa. * * `horizontal`—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). * */ export declare interface ExpandProps extends AnimationInterface { /** * A function for customizing the rendering of child elements. * * @example * <Expand childFactory={(child) => React.cloneElement(child, { role: "button" })} /> */ childFactory?: any; /** * Specifies the CSS class names to be applied to the Animation container. * * @example * <Expand className="expand-animation" /> */ className?: string; /** * Specifies the direction of the Expand Animation. Defaults to `vertical`. * * @example * <Expand direction="horizontal" /> */ direction?: ExpandDirection; /** * Specifies the HTML tag of the parent Animation container. Defaults to `div`. * * @example * <Expand component="nav" /> */ component?: React_2.ReactNode; /** * Specifies the `id` attribute of the Animation container. * * @example * <Expand id="expand-animation-container" /> */ id?: string; /** * Specifies the inline styles to be applied to the Animation container. * * @example * <Expand style={{ display: "flex" }} /> */ style?: any; } export declare const Fade: { (props: FadeProps): JSX.Element; propTypes: { children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>; childFactory: default_2.Requireable<any>; className: default_2.Requireable<string>; component: default_2.Requireable<default_2.ReactNodeLike>; id: default_2.Requireable<string>; style: default_2.Requireable<any>; }; }; /** * Represent the props of the [KendoReact Fade Animation component]({% slug animationtypes_animation %}#toc-fade). */ export declare interface FadeProps extends AnimationInterface { /** * A function for customizing the rendering of child elements. * * @example * <Fade childFactory={(child) => React.cloneElement(child, { draggable: true })} /> */ childFactory?: any; /** * Specifies the CSS class names to be applied to the Animation container. * * @example * <Fade className="fade-animation" /> */ className?: string; /** * Specifies the HTML tag of the parent Animation container. Defaults to `div`. * * @example * <Fade component="header" /> */ component?: React_2.ReactNode; /** * Specifies the `id` attribute of the Animation container. * * @example * <Fade id="fade-animation-container" /> */ id?: string; /** * Specifies the inline styles to be applied to the Animation container. * * @example * <Fade style={{ color: "blue" }} /> */ style?: any; } export declare const Push: { (props: PushProps): JSX.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<default_2.ReactNodeLike>; 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`—Pushes the content from left to right. * * `up`—Pushes the content from bottom to top. * * `down`—Pushes the content from top to bottom. * * `left`—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). */ export declare interface PushProps extends AnimationInterface { /** * A function for customizing the rendering of child elements. * * @example * <Push childFactory={(child) => React.cloneElement(child, { tabIndex: 0 })} /> */ childFactory?: any; /** * Specifies the CSS class names to be applied to the Animation container. * * @example * <Push className="push-animation" /> */ className?: string; /** * Specifies the direction of the Push Animation. Defaults to `right`. * * @example * <Push direction="up" /> */ direction?: PushDirection; /** * Specifies the HTML tag of the parent Animation container. Defaults to `div`. * * @example * <Push component="footer" /> */ component?: React_2.ReactNode; /** * Specifies the `id` attribute of the Animation container. * * @example * <Push id="push-animation-container" /> */ id?: string; /** * Specifies the inline styles to be applied to the Animation container. * * @example * <Push style={{ border: "1px solid black" }} /> */ style?: any; /** * Determines whether child elements will stack on top of each other during the animation. Defaults to `false`. * * @example * <Push stackChildren={true} /> */ stackChildren?: boolean; } export declare const Reveal: { (props: RevealProps): JSX.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<default_2.ReactNodeLike>; 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`—Reveals the height of the content. * * `horizontal`—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). */ export declare interface RevealProps extends AnimationInterface { /** * A function for customizing the rendering of child elements. * * @example * <Reveal childFactory={(child) => React.cloneElement(child, { hidden: true })} /> */ childFactory?: any; /** * Specifies the CSS class names to be applied to the Animation container. * * @example * <Reveal className="reveal-animation" /> */ className?: string; /** * Specifies the direction of the Reveal Animation. Defaults to `vertical`. * * @example * <Reveal direction="horizontal" /> */ direction?: RevealDirection; /** * Specifies the HTML tag of the parent Animation container. Defaults to `div`. * * @example * <Reveal component="aside" /> */ component?: React_2.ReactNode; /** * Specifies the `id` attribute of the Animation container. * * @example * <Reveal id="reveal-animation-container" /> */ id?: string; /** * Specifies the inline styles to be applied to the Animation container. * * @example * <Reveal style={{ padding: "20px" }} /> */ style?: any; /** * @hidden * This is synchronious variant of `onEnter` event. */ onBeforeEnter?: (event: AnimationEventArguments) => void; } export declare const Slide: { (props: SlideProps): JSX.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<default_2.ReactNodeLike>; 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`—On showing, slides the content from top to bottom, and vice-versa. * * `up`—On showing, slides the content from bottom to top, and vice-versa. * * `left`—On showing, slides the content from right to left, and vice-versa. * * `right`—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). */ export declare interface SlideProps extends AnimationInterface { /** * A function for customizing the rendering of child elements. * * @example * <Slide childFactory={(child) => React.cloneElement(child, { style: { opacity: 0.5 } })} /> */ childFactory?: any; /** * Specifies the CSS class names to be applied to the Animation container. * * @example * <Slide className="slide-animation" /> */ className?: string; /** * Specifies the direction of the Slide Animation. Defaults to `down`. * * @example * <Slide direction="left" /> */ direction?: SlideDirection; /** * Specifies the HTML tag of the parent Animation container. Defaults to `div`. * * @example * <Slide component="article" /> */ component?: React_2.ReactNode; /** * Specifies the `id` attribute of the Animation container. * * @example * <Slide id="slide-animation-container" /> */ id?: string; /** * Specifies the inline styles to be applied to the Animation container. * * @example * <Slide style={{ margin: "10px" }} /> */ style?: any; } /** @hidden */ export declare const useAnimation: (config: AnimationConfig, deps: any[]) => void; export declare const Zoom: { (props: ZoomProps): JSX.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<default_2.ReactNodeLike>; 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`—Zooms the content from the outside to the inside. * * `in`—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). */ export declare interface ZoomProps extends AnimationInterface { /** * A function for customizing the rendering of child elements. * * @example * <Zoom childFactory={(child) => React.cloneElement(child, { className: 'custom-class' })} /> */ childFactory?: any; /** * Specifies the CSS class names to be applied to the Animation container. * * @example * <Zoom className="zoom-animation" /> */ className?: string; /** * Specifies the direction of the Zoom Animation. Defaults to `out`. * * @example * <Zoom direction="in" /> */ direction?: ZoomDirection; /** * Specifies the HTML tag of the parent Animation container. Defaults to `div`. * * @example * <Zoom component="section" /> */ component?: React_2.ReactNode; /** * Specifies the `id` attribute of the Animation container. * * @example * <Zoom id="zoom-animation-container" /> */ id?: string; /** * Specifies the inline styles to be applied to the Animation container. * * @example * <Zoom style={{ backgroundColor: "red" }} /> */ style?: any; /** * Determines whether child elements will stack on top of each other during the animation. Defaults to `false`. * * @example * <Zoom stackChildren={true} /> */ stackChildren?: boolean; } export { }