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

package/Reveal.d.ts

@@ -0,0 +1,84 @@
+/**
+ * @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, AnimationEventArguments } from './AnimationInterface.js';
+import * as React from 'react';
+/**
+ * Specifies the direction of the Reveal Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/direction#toc-reveal)).
+ *
+ * The supported directions are:
+ * * (Default) `vertical`—Reveals the height of the content.
+ * * `horizontal`—Reveals the width of the content.
+ */
+export type RevealDirection = 'horizontal' | 'vertical';
+/**
+ * Represents the props of the [KendoReact Reveal Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-reveal).
+ */
+export 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.
+     *
+     * @default "vertical"
+     * @example
+     * <Reveal direction="horizontal" />
+     */
+    direction?: RevealDirection;
+    /**
+     * Specifies the HTML tag of the parent Animation container.
+     *
+     * @default "div"
+     * @example
+     * <Reveal component="aside" />
+     */
+    component?: React.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 Reveal: {
+    (props: RevealProps): 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/Slide.d.ts

@@ -0,0 +1,81 @@
+/**
+ * @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 Slide Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/direction#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 type SlideDirection = 'up' | 'down' | 'left' | 'right';
+/**
+ * Represents the props of the [KendoReact Slide Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-slide).
+ */
+export 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.
+     *
+     * @default "down"
+     * @example
+     * <Slide direction="left" />
+     */
+    direction?: SlideDirection;
+    /**
+     * Specifies the HTML tag of the parent Animation container.
+     *
+     * @default "div"
+     * @example
+     * <Slide component="article" />
+     */
+    component?: React.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;
+}
+export declare const Slide: {
+    (props: SlideProps): 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/Zoom.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @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 Zoom Animation ([see example](https://www.telerik.com/kendo-react-ui/components/animation/direction#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 type ZoomDirection = 'in' | 'out';
+/**
+ * Represents the props of the [KendoReact Zoom Animation component](https://www.telerik.com/kendo-react-ui/components/animation/types#toc-zoom).
+ */
+export 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.
+     *
+     * @default "out"
+     * @example
+     * <Zoom direction="in" />
+     */
+    direction?: ZoomDirection;
+    /**
+     * Specifies the HTML tag of the parent Animation container.
+     *
+     * @default "div"
+     * @example
+     * <Zoom component="section" />
+     */
+    component?: React.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.
+     *
+     * @default false
+     * @example
+     * <Zoom stackChildren={true} />
+     */
+    stackChildren?: boolean;
+}
+export declare const Zoom: {
+    (props: ZoomProps): 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>;
+    };
+};

package/dist/cdn/js/kendo-react-animation.js

@@ -12,4 +12,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("react-transition-group")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","react-transition-group"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactAnimation={},t.React,t.PropTypes,t.KendoReactCommon,t.ReactTransitionGroup)}(this,(function(t,n,e,i,r){"use strict";function a(t){var n=Object.create(null);return t&&Object.keys(t).forEach((function(e){if("default"!==e){var i=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,i.get?i:{enumerable:!0,get:function(){return t[e]}})}})),n.default=t,Object.freeze(n)}var o=a(n);const s=o.forwardRef(((t,n)=>{const e=o.useRef(null),{mountOnEnter:a=c.mountOnEnter,unmountOnExit:s=c.unmountOnExit,onEnter:l=c.onEnter,onEntering:u=c.onEntering,onEntered:d=c.onEntered,onExit:m=c.onExit,onExiting:p=c.onExiting,onExited:E=c.onExited,onAfterExited:x=c.onAfterExited,animationEnteringStyle:y=c.animationEnteringStyle,animationEnteredStyle:f=c.animationEnteredStyle,animationExitingStyle:g=c.animationExitingStyle,animationExitedStyle:h=c.animationExitedStyle,children:D,style:N,appear:O,enter:v,exit:S,transitionName:b,transitionEnterDuration:A,transitionExitDuration:C,className:R,unstyled:T,...w}=t,F={transitionDelay:"0ms",...N},k=T&&T.uAnimation,q=i.classNames(R,i.uAnimation.childContainer({c:k})),j=o.useRef({element:e.current,props:t}),$=o.useRef(null);o.useImperativeHandle($,(()=>({element:e.current,props:t}))),o.useImperativeHandle(n,(()=>$.current),[]);const H={entering:{transitionDuration:`${A}ms`,...y},entered:{...f},exiting:{transitionDuration:`${C}ms`,...g},exited:{...h}},W={in:t.in,appear:O,enter:v,exit:S,mountOnEnter:a,unmountOnExit:s,timeout:{enter:A,exit:C},onEnter:()=>{l&&l.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onEntering:()=>{u&&u.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onEntered:()=>{d&&d.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onExit:()=>{m&&m.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onExiting:()=>{p&&p.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onExited:()=>{x&&x.call(void 0,{animatedElement:e.current,target:$.current||j.current}),E&&E.call(void 0,{animatedElement:e.current,target:$.current||j.current})},classNames:{appear:i.classNames(i.uAnimation.appear({c:k,transitionName:b})),appearActive:i.classNames(i.uAnimation.appearActive({c:k,transitionName:b})),enter:i.classNames(i.uAnimation.enter({c:k,transitionName:b})),enterActive:i.classNames(i.uAnimation.enterActive({c:k,transitionName:b})),exit:i.classNames(i.uAnimation.exit({c:k,transitionName:b})),exitActive:i.classNames(i.uAnimation.exitActive({c:k,transitionName:b}))}};return o.createElement(r.CSSTransition,{...W,...w,nodeRef:e},(t=>o.createElement("div",{style:{...F,...H[t]},className:q,ref:t=>{e.current=t,j.current.element=t}},D)))})),c={mountOnEnter:!0,unmountOnExit:!1,onEnter:i.noop,onEntering:i.noop,onEntered:i.noop,onExit:i.noop,onExiting:i.noop,onExited:i.noop,onAfterExited:i.noop,animationEnteringStyle:{},animationEnteredStyle:{},animationExitingStyle:{},animationExitedStyle:{}};s.displayName="KendoReactAnimationChild",s.propTypes={in:e.bool,children:e.oneOfType([e.arrayOf(e.node),e.node]),transitionName:e.string.isRequired,className:e.string,appear:e.bool,enter:e.bool,exit:e.bool,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired,mountOnEnter:e.bool,unmountOnExit:e.bool,animationEnteringStyle:e.object,animationEnteredStyle:e.object,animationExitingStyle:e.object,animationExitedStyle:e.object};const l=t=>{const{id:n,style:e,children:a,component:c="div",className:l,childFactory:u,stackChildren:d,componentChildStyle:m,componentChildClassName:p,...E}=t,x=i.useUnstyled(),y=t.unstyled||x,f=y&&y.uAnimation,g={id:n,style:e,component:c,childFactory:u,className:i.classNames(i.uAnimation.child({c:f}),l)},h=o.Children.map(a||null,(t=>o.createElement(s,{...E,unstyled:y,style:m,className:p},t)));return o.createElement(r.TransitionGroup,{...g},h)};l.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.node,id:e.string,style:e.any,transitionName:e.string.isRequired,appear:e.bool.isRequired,enter:e.bool.isRequired,exit:e.bool.isRequired,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired};const u=t=>{const{appear:n=d.appear,enter:e=d.enter,exit:i=d.exit,transitionEnterDuration:r=d.transitionEnterDuration,transitionExitDuration:a=d.transitionExitDuration,children:s,...c}=t;return o.createElement(l,{transitionName:"fade",appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,...c},s)},d={appear:!1,enter:!0,exit:!1,transitionEnterDuration:500,transitionExitDuration:500};u.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.node,id:e.string,style:e.any};const m=t=>{const{appear:n=p.appear,enter:e=p.enter,exit:i=p.exit,transitionEnterDuration:r=p.transitionEnterDuration,transitionExitDuration:a=p.transitionExitDuration,direction:s=p.direction,children:c,...u}=t,d={transitionName:`expand-${s}`};return o.createElement(l,{...d,appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,...u},c)},p={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};m.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.node,id:e.string,style:e.any};const E={position:"absolute",top:"0",left:"0"},x=t=>{const{appear:n=y.appear,enter:e=y.enter,exit:i=y.exit,transitionEnterDuration:r=y.transitionEnterDuration,transitionExitDuration:a=y.transitionExitDuration,stackChildren:s=y.stackChildren,direction:c=y.direction,children:u,...d}=t;return o.createElement(l,{appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,stackChildren:s,...d,transitionName:`push-${c}`,animationExitingStyle:t.stackChildren?E:void 0},u)},y={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"right",stackChildren:!1};x.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.node,id:e.string,style:e.any,stackChildren:e.bool};const f=t=>{const{appear:n=g.appear,enter:e=g.enter,exit:i=g.exit,transitionEnterDuration:r=g.transitionEnterDuration,transitionExitDuration:a=g.transitionExitDuration,direction:s=g.direction,children:c,...u}=t,d={transitionName:`slide-${s}`};return o.createElement(l,{...d,appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,...u},c)},g={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"down"};f.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.node,id:e.string,style:e.any};const h={position:"absolute",top:"0",left:"0"},D=t=>{const{appear:n=N.appear,enter:e=N.enter,exit:i=N.exit,transitionEnterDuration:r=N.transitionEnterDuration,transitionExitDuration:a=N.transitionExitDuration,stackChildren:s=N.stackChildren,direction:c=N.direction,children:u,...d}=t;return o.createElement(l,{appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,stackChildren:s,...d,transitionName:`zoom-${c}`,animationExitingStyle:t.stackChildren?h:void 0},u)},N={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"out",stackChildren:!1};D.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["in","out"]),component:e.node,id:e.string,style:e.any,stackChildren:e.bool};const O=t=>{if(!t||!t.ownerDocument.defaultView)return 0;const n=t.ownerDocument.defaultView.getComputedStyle(t),e=parseFloat(n.marginTop),i=parseFloat(n.marginBottom);return t.offsetHeight+e+i},v=t=>{if(!t||!t.ownerDocument.defaultView)return 0;const n=t.ownerDocument.defaultView.getComputedStyle(t),e=parseFloat(n.marginLeft),i=parseFloat(n.marginRight);return t.offsetWidth+e+i},S=(i.animationStyles,t=>{const[n,e]=o.useState(),[i,r]=o.useState(),[a,s]=o.useState({}),{appear:c=b.appear,enter:u=b.enter,exit:d=b.exit,transitionEnterDuration:m=b.transitionEnterDuration,transitionExitDuration:p=b.transitionExitDuration,direction:E=b.direction,children:x,childFactory:y,...f}=t;let g;g="vertical"===E?{maxHeight:n?`${n}px`:""}:{maxWidth:i?`${i}px`:""};const h={maxHeight:g.maxHeight,maxWidth:g.maxWidth};o.useEffect((()=>{t&&a.name&&t[a.name]&&t[a.name].call(void 0,a.event)}),[n,i,a]);const D=(t,n)=>{const i=t.animatedElement.firstChild;if(i){const a=O(i),o=v(i);e(a),r(o),s({name:n,event:t})}};return o.createElement(l,{...f,appear:c,enter:u,exit:d,transitionEnterDuration:m,transitionExitDuration:p,childFactory:t=>{const n=y?y(t):t;return n.props.in?n:o.cloneElement(n,{...n.props,style:{...n.props.style,maxHeight:g.maxHeight,maxWidth:g.maxWidth}})},onEnter:n=>{const{onBeforeEnter:e}=t;e&&e.call(void 0,n),D(n,"onEnter")},onEntering:t=>{D(t,"onEntering")},onExit:t=>{D(t,"onExit")},animationEnteringStyle:h,transitionName:`reveal-${E}`},x)}),b={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};S.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.node,id:e.string,style:e.any};t.Animation=l,t.AnimationChild=s,t.Expand=m,t.Fade=u,t.Push=x,t.Reveal=S,t.Slide=f,t.Zoom=D,t.useAnimation=(t,n)=>{const e=o.useRef(0),i=o.useRef(!1),r=o.useRef(null);o.useEffect((()=>((t=>{const n=t.duration;let i,a;const o=e.current&&1-e.current;t.onStart&&t.onStart();const s=c=>{i||(i=c),a=c-i+1;const l=a/n+o;l<=1?(t.onUpdate&&t.onUpdate(l),r.current=window.requestAnimationFrame(s),e.current=l):(t.onEnd&&t.onEnd(1),e.current=0)};r.current=window.requestAnimationFrame(s)})(t),()=>{r.current&&window.cancelAnimationFrame(r.current)})),n),o.useEffect((()=>{i.current=!0}),[])}}));
+!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("react-transition-group")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","react-transition-group"],n):n((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactAnimation={},t.React,t.PropTypes,t.KendoReactCommon,t.ReactTransitionGroup)}(this,function(t,n,e,i,r){"use strict";function a(t){var n=Object.create(null);return t&&Object.keys(t).forEach(function(e){if("default"!==e){var i=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,i.get?i:{enumerable:!0,get:function(){return t[e]}})}}),n.default=t,Object.freeze(n)}var o=a(n);const s=o.forwardRef((t,n)=>{const e=o.useRef(null),{mountOnEnter:a=c.mountOnEnter,unmountOnExit:s=c.unmountOnExit,onEnter:l=c.onEnter,onEntering:u=c.onEntering,onEntered:d=c.onEntered,onExit:m=c.onExit,onExiting:p=c.onExiting,onExited:E=c.onExited,onAfterExited:x=c.onAfterExited,animationEnteringStyle:y=c.animationEnteringStyle,animationEnteredStyle:f=c.animationEnteredStyle,animationExitingStyle:g=c.animationExitingStyle,animationExitedStyle:h=c.animationExitedStyle,children:D,style:N,appear:O,enter:v,exit:S,transitionName:b,transitionEnterDuration:A,transitionExitDuration:C,className:R,unstyled:T,...w}=t,F={transitionDelay:"0ms",...N},k=T&&T.uAnimation,q=i.classNames(R,i.uAnimation.childContainer({c:k})),j=o.useRef({element:e.current,props:t}),$=o.useRef(null);o.useImperativeHandle($,()=>({element:e.current,props:t})),o.useImperativeHandle(n,()=>$.current,[]);const H={entering:{transitionDuration:`${A}ms`,...y},entered:{...f},exiting:{transitionDuration:`${C}ms`,...g},exited:{...h}},W={in:t.in,appear:O,enter:v,exit:S,mountOnEnter:a,unmountOnExit:s,timeout:{enter:A,exit:C},onEnter:()=>{l&&l.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onEntering:()=>{u&&u.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onEntered:()=>{d&&d.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onExit:()=>{m&&m.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onExiting:()=>{p&&p.call(void 0,{animatedElement:e.current,target:$.current||j.current})},onExited:()=>{x&&x.call(void 0,{animatedElement:e.current,target:$.current||j.current}),E&&E.call(void 0,{animatedElement:e.current,target:$.current||j.current})},classNames:{appear:i.classNames(i.uAnimation.appear({c:k,transitionName:b})),appearActive:i.classNames(i.uAnimation.appearActive({c:k,transitionName:b})),enter:i.classNames(i.uAnimation.enter({c:k,transitionName:b})),enterActive:i.classNames(i.uAnimation.enterActive({c:k,transitionName:b})),exit:i.classNames(i.uAnimation.exit({c:k,transitionName:b})),exitActive:i.classNames(i.uAnimation.exitActive({c:k,transitionName:b}))}};return o.createElement(r.CSSTransition,{...W,...w,nodeRef:e},t=>o.createElement("div",{style:{...F,...H[t]},className:q,ref:t=>{e.current=t,j.current.element=t}},D))}),c={mountOnEnter:!0,unmountOnExit:!1,onEnter:i.noop,onEntering:i.noop,onEntered:i.noop,onExit:i.noop,onExiting:i.noop,onExited:i.noop,onAfterExited:i.noop,animationEnteringStyle:{},animationEnteredStyle:{},animationExitingStyle:{},animationExitedStyle:{}};s.displayName="KendoReactAnimationChild",s.propTypes={in:e.bool,children:e.oneOfType([e.arrayOf(e.node),e.node]),transitionName:e.string.isRequired,className:e.string,appear:e.bool,enter:e.bool,exit:e.bool,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired,mountOnEnter:e.bool,unmountOnExit:e.bool,animationEnteringStyle:e.object,animationEnteredStyle:e.object,animationExitingStyle:e.object,animationExitedStyle:e.object};const l=t=>{const{id:n,style:e,children:a,component:c="div",className:l,childFactory:u,stackChildren:d,componentChildStyle:m,componentChildClassName:p,...E}=t,x=i.useUnstyled(),y=t.unstyled||x,f=y&&y.uAnimation,g={id:n,style:e,component:c,childFactory:u,className:i.classNames(i.uAnimation.child({c:f}),l)},h=o.Children.map(a||null,t=>o.createElement(s,{...E,unstyled:y,style:m,className:p},t));return o.createElement(r.TransitionGroup,{...g},h)};l.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.node,id:e.string,style:e.any,transitionName:e.string.isRequired,appear:e.bool.isRequired,enter:e.bool.isRequired,exit:e.bool.isRequired,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired};const u=t=>{const{appear:n=d.appear,enter:e=d.enter,exit:i=d.exit,transitionEnterDuration:r=d.transitionEnterDuration,transitionExitDuration:a=d.transitionExitDuration,children:s,...c}=t;return o.createElement(l,{transitionName:"fade",appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,...c},s)},d={appear:!1,enter:!0,exit:!1,transitionEnterDuration:500,transitionExitDuration:500};u.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.node,id:e.string,style:e.any};const m=t=>{const{appear:n=p.appear,enter:e=p.enter,exit:i=p.exit,transitionEnterDuration:r=p.transitionEnterDuration,transitionExitDuration:a=p.transitionExitDuration,direction:s=p.direction,children:c,...u}=t,d={transitionName:`expand-${s}`};return o.createElement(l,{...d,appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,...u},c)},p={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};m.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.node,id:e.string,style:e.any};const E={position:"absolute",top:"0",left:"0"},x=t=>{const{appear:n=y.appear,enter:e=y.enter,exit:i=y.exit,transitionEnterDuration:r=y.transitionEnterDuration,transitionExitDuration:a=y.transitionExitDuration,stackChildren:s=y.stackChildren,direction:c=y.direction,children:u,...d}=t;return o.createElement(l,{appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,stackChildren:s,...d,transitionName:`push-${c}`,animationExitingStyle:t.stackChildren?E:void 0},u)},y={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"right",stackChildren:!1};x.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.node,id:e.string,style:e.any,stackChildren:e.bool};const f=t=>{const{appear:n=g.appear,enter:e=g.enter,exit:i=g.exit,transitionEnterDuration:r=g.transitionEnterDuration,transitionExitDuration:a=g.transitionExitDuration,direction:s=g.direction,children:c,...u}=t,d={transitionName:`slide-${s}`};return o.createElement(l,{...d,appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,...u},c)},g={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"down"};f.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["up","down","left","right"]),component:e.node,id:e.string,style:e.any};const h={position:"absolute",top:"0",left:"0"},D=t=>{const{appear:n=N.appear,enter:e=N.enter,exit:i=N.exit,transitionEnterDuration:r=N.transitionEnterDuration,transitionExitDuration:a=N.transitionExitDuration,stackChildren:s=N.stackChildren,direction:c=N.direction,children:u,...d}=t;return o.createElement(l,{appear:n,enter:e,exit:i,transitionEnterDuration:r,transitionExitDuration:a,stackChildren:s,...d,transitionName:`zoom-${c}`,animationExitingStyle:t.stackChildren?h:void 0},u)},N={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"out",stackChildren:!1};D.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["in","out"]),component:e.node,id:e.string,style:e.any,stackChildren:e.bool};const O=t=>{if(!t||!t.ownerDocument.defaultView)return 0;const n=t.ownerDocument.defaultView.getComputedStyle(t),e=parseFloat(n.marginTop),i=parseFloat(n.marginBottom);return t.offsetHeight+e+i},v=t=>{if(!t||!t.ownerDocument.defaultView)return 0;const n=t.ownerDocument.defaultView.getComputedStyle(t),e=parseFloat(n.marginLeft),i=parseFloat(n.marginRight);return t.offsetWidth+e+i},S=(i.animationStyles,t=>{const[n,e]=o.useState(),[i,r]=o.useState(),[a,s]=o.useState({}),{appear:c=b.appear,enter:u=b.enter,exit:d=b.exit,transitionEnterDuration:m=b.transitionEnterDuration,transitionExitDuration:p=b.transitionExitDuration,direction:E=b.direction,children:x,childFactory:y,...f}=t;let g;g="vertical"===E?{maxHeight:n?`${n}px`:""}:{maxWidth:i?`${i}px`:""};const h={maxHeight:g.maxHeight,maxWidth:g.maxWidth};o.useEffect(()=>{t&&a.name&&t[a.name]&&t[a.name].call(void 0,a.event)},[n,i,a]);const D=(t,n)=>{const i=t.animatedElement.firstChild;if(i){const a=O(i),o=v(i);e(a),r(o),s({name:n,event:t})}};return o.createElement(l,{...f,appear:c,enter:u,exit:d,transitionEnterDuration:m,transitionExitDuration:p,childFactory:t=>{const n=y?y(t):t;return n.props.in?n:o.cloneElement(n,{...n.props,style:{...n.props.style,maxHeight:g.maxHeight,maxWidth:g.maxWidth}})},onEnter:n=>{const{onBeforeEnter:e}=t;e&&e.call(void 0,n),D(n,"onEnter")},onEntering:t=>{D(t,"onEntering")},onExit:t=>{D(t,"onExit")},animationEnteringStyle:h,transitionName:`reveal-${E}`},x)}),b={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};S.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,direction:e.oneOf(["horizontal","vertical"]),component:e.node,id:e.string,style:e.any};t.Animation=l,t.AnimationChild=s,t.Expand=m,t.Fade=u,t.Push=x,t.Reveal=S,t.Slide=f,t.Zoom=D,t.useAnimation=(t,n)=>{const e=o.useRef(0),i=o.useRef(!1),r=o.useRef(null);o.useEffect(()=>((t=>{const n=t.duration;let i,a;const o=e.current&&1-e.current;t.onStart&&t.onStart();const s=c=>{i||(i=c),a=c-i+1;const l=a/n+o;l<=1?(t.onUpdate&&t.onUpdate(l),r.current=window.requestAnimationFrame(s),e.current=l):(t.onEnd&&t.onEnd(1),e.current=0)};r.current=window.requestAnimationFrame(s)})(t),()=>{r.current&&window.cancelAnimationFrame(r.current)}),n),o.useEffect(()=>{i.current=!0},[])}});

package/hooks/useAnimation.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/** @hidden */
+export type AnimationConfig = {
+    initial?: React.CSSProperties;
+    duration?: number;
+    appear?: boolean;
+    onStart?: any;
+    onUpdate?: any;
+    onEnd?: any;
+};
+/** @hidden */
+export declare const useAnimation: (config: AnimationConfig, deps: any[]) => void;