@progress/kendo-react-animation 13.3.0 → 13.4.0-develop.2

package/Animation.d.ts

@@ -0,0 +1,118 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { AnimationsClassStructure } from '@progress/kendo-react-common';
+import { AnimationInterface } from './AnimationInterface.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact Animation component](https://www.telerik.com/kendo-react-ui/components/animation).
+ */
+export 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.
+     *
+     * @default "div"
+     * @example
+     * <Animation component="main" />
+     */
+    component?: React.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 Animation: {
+    (props: AnimationProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        childFactory: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<any>;
+        transitionName: PropTypes.Validator<string>;
+        appear: PropTypes.Validator<boolean>;
+        enter: PropTypes.Validator<boolean>;
+        exit: PropTypes.Validator<boolean>;
+        transitionEnterDuration: PropTypes.Validator<number>;
+        transitionExitDuration: PropTypes.Validator<number>;
+    };
+};

package/AnimationChild.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 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 { AnimationInterface } from './AnimationInterface.js';
+import * as React from 'react';
+/**
+ * Represents the AnimationChild handle.
+ */
+export interface AnimationChildHandle {
+    /**
+     * Gets the element.
+     */
+    element: HTMLDivElement | null;
+    /**
+     * Gets the props.
+     */
+    props: AnimationChildProps;
+}
+/**
+ * Represents the props of the child Animation elements.
+ */
+export 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 generates
+     * the `appear`, `enter`, and `exit` transition classes.
+     *
+     * @example
+     * <AnimationChild transitionName="fade" />
+     */
+    transitionName: string;
+    /**
+     * Specifies the style that applies when the Animation reaches its entering state.
+     *
+     * @example
+     * <AnimationChild animationEnteringStyle={{ opacity: 0.5 }} />
+     */
+    animationEnteringStyle?: any;
+    /**
+     * Inline styles that apply when the Animation has entered.
+     *
+     * @example
+     * <AnimationChild animationEnteredStyle={{ opacity: 1 }} />
+     */
+    animationEnteredStyle?: any;
+    /**
+     * Specifies the style that applies when the Animation reaches its exiting state.
+     *
+     * @example
+     * <AnimationChild animationExitingStyle={{ opacity: 0.5 }} />
+     */
+    animationExitingStyle?: any;
+    /**
+     * Inline styles that apply when the Animation has exited.
+     *
+     * @example
+     * <AnimationChild animationExitedStyle={{ opacity: 0 }} />
+     */
+    animationExitedStyle?: any;
+    /**
+     * Provides unstyled options for the Animation. Accepts an object
+     * that implements the `AnimationsClassStructure` interface.
+     *
+     * @example
+     * <AnimationChild unstyled={{ appear: "custom-appear-class" }} />
+     */
+    unstyled?: AnimationsClassStructure;
+}
+export declare const AnimationChild: React.ForwardRefExoticComponent<AnimationChildProps & React.RefAttributes<AnimationChildHandle | null>>;

package/AnimationChild.mjs

@@ -7,7 +7,7 @@
  */
 import * as a from "react";
 import t from "prop-types";
-import { classNames as l, uAnimation as m, noop as c } from "@progress/kendo-react-common";
+import { noop as l, classNames as m, uAnimation as c } from "@progress/kendo-react-common";
 import { CSSTransition as J } from "react-transition-group";
 const R = a.forwardRef(
   (E, O) => {
@@ -39,7 +39,7 @@ const R = a.forwardRef(
     } = E, k = {
       transitionDelay: "0ms",
       ...P
-    }, o = A && A.uAnimation, z = l(w, m.childContainer({ c: o })), r = a.useRef({
+    }, o = A && A.uAnimation, z = m(w, c.childContainer({ c: o })), r = a.useRef({
       element: e.current,
       props: E
     }), i = a.useRef(null);
@@ -107,12 +107,12 @@ const R = a.forwardRef(
         });
       },
       classNames: {
-        appear: l(m.appear({ c: o, transitionName: u })),
-        appearActive: l(m.appearActive({ c: o, transitionName: u })),
-        enter: l(m.enter({ c: o, transitionName: u })),
-        enterActive: l(m.enterActive({ c: o, transitionName: u })),
-        exit: l(m.exit({ c: o, transitionName: u })),
-        exitActive: l(m.exitActive({ c: o, transitionName: u }))
+        appear: m(c.appear({ c: o, transitionName: u })),
+        appearActive: m(c.appearActive({ c: o, transitionName: u })),
+        enter: m(c.enter({ c: o, transitionName: u })),
+        enterActive: m(c.enterActive({ c: o, transitionName: u })),
+        exit: m(c.exit({ c: o, transitionName: u })),
+        exitActive: m(c.exitActive({ c: o, transitionName: u }))
       }
     };
     return /* @__PURE__ */ a.createElement(J, { ...F, ...K, nodeRef: e }, (G) => /* @__PURE__ */ a.createElement(
@@ -133,13 +133,13 @@ const R = a.forwardRef(
 ), n = {
   mountOnEnter: !0,
   unmountOnExit: !1,
-  onEnter: c,
-  onEntering: c,
-  onEntered: c,
-  onExit: c,
-  onExiting: c,
-  onExited: c,
-  onAfterExited: c,
+  onEnter: l,
+  onEntering: l,
+  onEntered: l,
+  onExit: l,
+  onExiting: l,
+  onExited: l,
+  onAfterExited: l,
   animationEnteringStyle: {},
   animationEnteredStyle: {},
   animationExitingStyle: {},

package/AnimationInterface.d.ts

@@ -0,0 +1,109 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { AnimationChildHandle } from './AnimationChild.js';
+/**
+ * The arguments that are passed to the life-cycle hooks.
+ */
+export 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 you can set to an Animation.
+ */
+export interface AnimationInterface {
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * Specifies the CSS class names that are set to each of the animated children elements.
+     */
+    componentChildClassName?: string;
+    /**
+     * Specifies the styles that are set to each of the animated children elements.
+     */
+    componentChildStyle?: any;
+    /**
+     * Called when you add a component to an existing Animation component and the Animation has not started yet ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-adding-child-elements)).
+     */
+    onEnter?: (event: AnimationEventArguments) => void;
+    /**
+     * Called when you add a component to an existing Animation component and the Animation is now happening ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-adding-child-elements)).
+     */
+    onEntering?: (event: AnimationEventArguments) => void;
+    /**
+     * Called when you add a component to an existing Animation component and the Animation is now finished ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-adding-child-elements)).
+     */
+    onEntered?: (event: AnimationEventArguments) => void;
+    /**
+     * An event called after the Animation has reached its exit state ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-removing-child-elements)).
+     */
+    onExit?: (event: AnimationEventArguments) => void;
+    /**
+     * An event called after the Animation has reached its exiting state ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#toc-removing-child-elements)).
+     */
+    onExiting?: (event: AnimationEventArguments) => void;
+    /**
+     * An event called after the Animation has reached its exited state ([more information and example](https://www.telerik.com/kendo-react-ui/components/animation/hooks#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.
+     *
+     * @default false
+     */
+    appear?: boolean;
+    /**
+     * Specifies whether to animate the entering (showing) element ([see example](https://www.telerik.com/kendo-react-ui/components/animation/disabled-state)).
+     *
+     * @default true
+     */
+    enter?: boolean;
+    /**
+     * Specifies whether to animate a leaving (disappearing) element ([see example](https://www.telerik.com/kendo-react-ui/components/animation/disabled-state)).
+     *
+     * @default true
+     */
+    exit?: boolean;
+    /**
+     * Specifies the duration of the transition for the entering (`animation in`) Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/duration)). After the time runs out, the Animation is terminated.
+     *
+     * @default 300
+     */
+    transitionEnterDuration?: number;
+    /**
+     * Specifies the duration of the transition for the exiting (`animation out`) Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/duration)). After the time runs out, the Animation is terminated.
+     *
+     * @default 300
+     */
+    transitionExitDuration?: number;
+    /**
+     * Specifies if the Animation uses lazy-mounting on the first `in={true}`.
+     *
+     * @default false
+     */
+    mountOnEnter?: boolean;
+    /**
+     * Specifies if the Animation unmounts after it reaches its exited state.
+     *
+     * @default false
+     */
+    unmountOnExit?: boolean;
+}

package/Expand.d.ts

@@ -0,0 +1,79 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { AnimationInterface } from './AnimationInterface.js';
+import * as React from 'react';
+/**
+ * Specifies the direction of the Expand Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/direction#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 type ExpandDirection = 'horizontal' | 'vertical';
+/**
+ * Represents the props of the [KendoReact Expand Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-expand).
+ */
+export 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.
+     *
+     * @default "vertical"
+     * @example
+     * <Expand direction="horizontal" />
+     */
+    direction?: ExpandDirection;
+    /**
+     * Specifies the HTML tag of the parent Animation container.
+     *
+     * @default "div"
+     * @example
+     * <Expand component="nav" />
+     */
+    component?: React.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 Expand: {
+    (props: ExpandProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        childFactory: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        direction: PropTypes.Requireable<string>;
+        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<any>;
+    };
+};

package/Fade.d.ts

@@ -0,0 +1,62 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { AnimationInterface } from './AnimationInterface.js';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact Fade Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-fade).
+ */
+export 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.
+     *
+     * @default "div"
+     * @example
+     * <Fade component="header" />
+     */
+    component?: React.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 Fade: {
+    (props: FadeProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        childFactory: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<any>;
+    };
+};

package/Push.d.ts

@@ -0,0 +1,90 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { AnimationInterface } from './AnimationInterface.js';
+import * as React from 'react';
+/**
+ * Specifies the direction of the Push Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/direction#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 type PushDirection = 'up' | 'down' | 'left' | 'right';
+/**
+ * Represents the props of the [KendoReact Push Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-push).
+ */
+export 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.
+     *
+     * @default "right"
+     * @example
+     * <Push direction="up" />
+     */
+    direction?: PushDirection;
+    /**
+     * Specifies the HTML tag of the parent Animation container.
+     *
+     * @default "div"
+     * @example
+     * <Push component="footer" />
+     */
+    component?: React.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.
+     *
+     * @default false
+     * @example
+     * <Push stackChildren={true} />
+     */
+    stackChildren?: boolean;
+}
+export declare const Push: {
+    (props: PushProps): React.JSX.Element;
+    propTypes: {
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+        childFactory: PropTypes.Requireable<any>;
+        className: PropTypes.Requireable<string>;
+        direction: PropTypes.Requireable<string>;
+        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        id: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<any>;
+        stackChildren: PropTypes.Requireable<boolean>;
+    };
+};