@progress/kendo-react-animation 10.2.0-develop.1 → 10.2.0-develop.11

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.string,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.string,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.string,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.string,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.string,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.string,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.string,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();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.string,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.string,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.string,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.string,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.string,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.string,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.string,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.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react");function g(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,c.get?c:{enumerable:!0,get:()=>t[e]})}}return r.default=t,Object.freeze(r)}const o=g(b),w=(t,r)=>{const e=o.useRef(0),c=o.useRef(!1),u=o.useRef(),d=n=>{const m=n.duration;let a,f;const p=e.current&&1-e.current;n.onStart&&n.onStart();const i=l=>{a||(a=l),f=l-a+1;const s=f/m+p;s<=1?(n.onUpdate&&n.onUpdate(s),u.current=window.requestAnimationFrame(i),e.current=s):(n.onEnd&&n.onEnd(1),e.current=0)};u.current=window.requestAnimationFrame(i)};o.useEffect(()=>(d(t),()=>{u.current&&window.cancelAnimationFrame(u.current)}),r),o.useEffect(()=>{c.current=!0},[])};exports.useAnimation=w;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react");function g(t){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,c.get?c:{enumerable:!0,get:()=>t[e]})}}return r.default=t,Object.freeze(r)}const o=g(b),w=(t,r)=>{const e=o.useRef(0),c=o.useRef(!1),u=o.useRef(null),d=n=>{const m=n.duration;let a,f;const p=e.current&&1-e.current;n.onStart&&n.onStart();const i=l=>{a||(a=l),f=l-a+1;const s=f/m+p;s<=1?(n.onUpdate&&n.onUpdate(s),u.current=window.requestAnimationFrame(i),e.current=s):(n.onEnd&&n.onEnd(1),e.current=0)};u.current=window.requestAnimationFrame(i)};o.useEffect(()=>(d(t),()=>{u.current&&window.cancelAnimationFrame(u.current)}),r),o.useEffect(()=>{c.current=!0},[])};exports.useAnimation=w;

package/hooks/useAnimation.mjs

@@ -5,23 +5,23 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as t from "react";
+import * as n from "react";
 const p = (s, m) => {
-  const n = t.useRef(0), i = t.useRef(!1), r = t.useRef(), d = (e) => {
-    const w = e.duration;
+  const t = n.useRef(0), i = n.useRef(!1), r = n.useRef(null), d = (e) => {
+    const l = e.duration;
     let o, u;
-    const l = n.current && 1 - n.current;
+    const w = t.current && 1 - t.current;
     e.onStart && e.onStart();
     const a = (f) => {
       o || (o = f), u = f - o + 1;
-      const c = u / w + l;
-      c <= 1 ? (e.onUpdate && e.onUpdate(c), r.current = window.requestAnimationFrame(a), n.current = c) : (e.onEnd && e.onEnd(1), n.current = 0);
+      const c = u / l + w;
+      c <= 1 ? (e.onUpdate && e.onUpdate(c), r.current = window.requestAnimationFrame(a), t.current = c) : (e.onEnd && e.onEnd(1), t.current = 0);
     };
     r.current = window.requestAnimationFrame(a);
   };
-  t.useEffect(() => (d(s), () => {
+  n.useEffect(() => (d(s), () => {
     r.current && window.cancelAnimationFrame(r.current);
-  }), m), t.useEffect(() => {
+  }), m), n.useEffect(() => {
     i.current = !0;
   }, []);
 };

package/index.d.mts

@@ -7,11 +7,11 @@
  */
 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 { JSX } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 
 declare const Animation_2: {
-    (props: AnimationProps): JSX_2.Element;
+    (props: AnimationProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -54,35 +54,61 @@ export declare interface AnimationChildProps extends AnimationInterface {
      */
     in?: boolean;
     /**
-     * @hidden
+     * Custom inline styles to apply to the Animation container.
+     *
+     * @example
+     * <AnimationChild style={{ backgroundColor: "red" }} />
      */
     style?: any;
     /**
-     * @hidden
+     * Custom CSS class to apply to the Animation container.
+     *
+     * @example
+     * <AnimationChild className="custom-animation-class" />
      */
     className?: string;
     /**
-     * Specifies the transition class which will be applied on the appear, enter, and exit transition.
+     * 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;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entered state.
+     * 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;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exited state.
+     * Inline styles applied when the Animation has exited.
+     *
+     * @example
+     * <AnimationChild animationExitedStyle={{ opacity: 0 }} />
      */
     animationExitedStyle?: any;
     /**
-     * The unstyled option classes.
+     * Provides unstyled options for the Animation. Accepts an object
+     * implementing the `AnimationsClassStructure` interface.
+     *
+     * @example
+     * <AnimationChild unstyled={{ appear: "custom-appear-class" }} />
      */
     unstyled?: AnimationsClassStructure;
 }
@@ -191,57 +217,93 @@ declare interface AnimationInterface {
  */
 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 %})).
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Animation childFactory={(child) => React.cloneElement(child, { ariaHidden: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies the name of the CSS class which is set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Animation className="animation-container" />
      */
     className?: string;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Animation component="main" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Animation id="animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Animation style={{ width: "100%" }} />
      */
     style?: any;
     /**
-     * Specifies whether the Animation children will stack on top of each other without interfering ([see example]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation.
+     *
+     * @example
+     * <Animation stackChildren={true} />
      */
     stackChildren?: boolean;
     /**
-     * Specifies the `classNames` which will be applied during the transition ([see example]({% slug customizing_animation %})).
+     * Specifies the base class name for the transition.
+     *
+     * @example
+     * <Animation transitionName="fade" />
      */
     transitionName: string;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entering state.
+     * Specifies the inline styles applied when the Animation is entering.
+     *
+     * @example
+     * <Animation animationEnteringStyle={{ opacity: 0.5 }} />
      */
     animationEnteringStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entered state.
+     * Specifies the inline styles applied when the Animation has entered.
+     *
+     * @example
+     * <Animation animationEnteredStyle={{ opacity: 1 }} />
      */
     animationEnteredStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exiting state.
+     * Specifies the inline styles applied when the Animation is exiting.
+     *
+     * @example
+     * <Animation animationExitingStyle={{ opacity: 0.5 }} />
      */
     animationExitingStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exited state.
+     * Specifies the inline styles applied when the Animation has exited.
+     *
+     * @example
+     * <Animation animationExitedStyle={{ opacity: 0 }} />
      */
     animationExitedStyle?: any;
     /**
-     * The unstyled option classes.
+     * Provides unstyled options for the Animation.
+     *
+     * @example
+     * <Animation unstyled={{ appear: "unstyled-appear" }} />
      */
     unstyled?: AnimationsClassStructure;
 }
 
 export declare const Expand: {
-    (props: ExpandProps): JSX_2.Element;
+    (props: ExpandProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -274,33 +336,51 @@ export declare type ExpandDirection = 'horizontal' | 'vertical';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Expand component="nav" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Expand id="expand-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * 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_2.Element;
+    (props: FadeProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -323,29 +403,44 @@ export declare const Fade: {
  */
 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.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Fade childFactory={(child) => React.cloneElement(child, { draggable: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Fade className="fade-animation" />
      */
     className?: string;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Fade component="header" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Fade id="fade-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * 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_2.Element;
+    (props: PushProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -381,37 +476,58 @@ export declare type PushDirection = 'up' | 'down' | 'left' | 'right';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 `out`.
+     * Specifies the direction of the Push Animation. Defaults to `right`.
+     *
+     * @example
+     * <Push direction="up" />
      */
     direction?: PushDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Push component="footer" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Push id="push-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Push style={{ border: "1px solid black" }} />
      */
     style?: any;
     /**
-     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
+     * 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_2.Element;
+    (props: RevealProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -444,27 +560,45 @@ export declare type RevealDirection = 'horizontal' | 'vertical';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Reveal component="aside" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Reveal id="reveal-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Reveal style={{ padding: "20px" }} />
      */
     style?: any;
     /**
@@ -475,7 +609,7 @@ export declare interface RevealProps extends AnimationInterface {
 }
 
 export declare const Slide: {
-    (props: SlideProps): JSX_2.Element;
+    (props: SlideProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -510,27 +644,45 @@ export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Slide component="article" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Slide id="slide-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Slide style={{ margin: "10px" }} />
      */
     style?: any;
 }
@@ -539,7 +691,7 @@ export declare interface SlideProps extends AnimationInterface {
 export declare const useAnimation: (config: AnimationConfig, deps: any[]) => void;
 
 export declare const Zoom: {
-    (props: ZoomProps): JSX_2.Element;
+    (props: ZoomProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -573,31 +725,52 @@ export declare type ZoomDirection = 'in' | 'out';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 `down`.
+     * Specifies the direction of the Zoom Animation. Defaults to `out`.
+     *
+     * @example
+     * <Zoom direction="in" />
      */
     direction?: ZoomDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Zoom component="section" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Zoom id="zoom-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Zoom style={{ backgroundColor: "red" }} />
      */
     style?: any;
     /**
-     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation. Defaults to `false`.
+     *
+     * @example
+     * <Zoom stackChildren={true} />
      */
     stackChildren?: boolean;
 }

package/index.d.ts

@@ -7,11 +7,11 @@
  */
 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 { JSX } from 'react/jsx-runtime';
 import * as React_2 from 'react';
 
 declare const Animation_2: {
-    (props: AnimationProps): JSX_2.Element;
+    (props: AnimationProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -54,35 +54,61 @@ export declare interface AnimationChildProps extends AnimationInterface {
      */
     in?: boolean;
     /**
-     * @hidden
+     * Custom inline styles to apply to the Animation container.
+     *
+     * @example
+     * <AnimationChild style={{ backgroundColor: "red" }} />
      */
     style?: any;
     /**
-     * @hidden
+     * Custom CSS class to apply to the Animation container.
+     *
+     * @example
+     * <AnimationChild className="custom-animation-class" />
      */
     className?: string;
     /**
-     * Specifies the transition class which will be applied on the appear, enter, and exit transition.
+     * 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;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entered state.
+     * 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;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exited state.
+     * Inline styles applied when the Animation has exited.
+     *
+     * @example
+     * <AnimationChild animationExitedStyle={{ opacity: 0 }} />
      */
     animationExitedStyle?: any;
     /**
-     * The unstyled option classes.
+     * Provides unstyled options for the Animation. Accepts an object
+     * implementing the `AnimationsClassStructure` interface.
+     *
+     * @example
+     * <AnimationChild unstyled={{ appear: "custom-appear-class" }} />
      */
     unstyled?: AnimationsClassStructure;
 }
@@ -191,57 +217,93 @@ declare interface AnimationInterface {
  */
 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 %})).
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Animation childFactory={(child) => React.cloneElement(child, { ariaHidden: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies the name of the CSS class which is set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Animation className="animation-container" />
      */
     className?: string;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Animation component="main" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Animation id="animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Animation style={{ width: "100%" }} />
      */
     style?: any;
     /**
-     * Specifies whether the Animation children will stack on top of each other without interfering ([see example]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation.
+     *
+     * @example
+     * <Animation stackChildren={true} />
      */
     stackChildren?: boolean;
     /**
-     * Specifies the `classNames` which will be applied during the transition ([see example]({% slug customizing_animation %})).
+     * Specifies the base class name for the transition.
+     *
+     * @example
+     * <Animation transitionName="fade" />
      */
     transitionName: string;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entering state.
+     * Specifies the inline styles applied when the Animation is entering.
+     *
+     * @example
+     * <Animation animationEnteringStyle={{ opacity: 0.5 }} />
      */
     animationEnteringStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its entered state.
+     * Specifies the inline styles applied when the Animation has entered.
+     *
+     * @example
+     * <Animation animationEnteredStyle={{ opacity: 1 }} />
      */
     animationEnteredStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exiting state.
+     * Specifies the inline styles applied when the Animation is exiting.
+     *
+     * @example
+     * <Animation animationExitingStyle={{ opacity: 0.5 }} />
      */
     animationExitingStyle?: any;
     /**
-     * Specifies the style which will be applied when the Animation reaches its exited state.
+     * Specifies the inline styles applied when the Animation has exited.
+     *
+     * @example
+     * <Animation animationExitedStyle={{ opacity: 0 }} />
      */
     animationExitedStyle?: any;
     /**
-     * The unstyled option classes.
+     * Provides unstyled options for the Animation.
+     *
+     * @example
+     * <Animation unstyled={{ appear: "unstyled-appear" }} />
      */
     unstyled?: AnimationsClassStructure;
 }
 
 export declare const Expand: {
-    (props: ExpandProps): JSX_2.Element;
+    (props: ExpandProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -274,33 +336,51 @@ export declare type ExpandDirection = 'horizontal' | 'vertical';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Expand component="nav" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Expand id="expand-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * 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_2.Element;
+    (props: FadeProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -323,29 +403,44 @@ export declare const Fade: {
  */
 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.
+     * A function for customizing the rendering of child elements.
+     *
+     * @example
+     * <Fade childFactory={(child) => React.cloneElement(child, { draggable: true })} />
      */
     childFactory?: any;
     /**
-     * Specifies CSS class names which are set to the Animation.
+     * Specifies the CSS class names to be applied to the Animation container.
+     *
+     * @example
+     * <Fade className="fade-animation" />
      */
     className?: string;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Fade component="header" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Fade id="fade-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * 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_2.Element;
+    (props: PushProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -381,37 +476,58 @@ export declare type PushDirection = 'up' | 'down' | 'left' | 'right';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 `out`.
+     * Specifies the direction of the Push Animation. Defaults to `right`.
+     *
+     * @example
+     * <Push direction="up" />
      */
     direction?: PushDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Push component="footer" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Push id="push-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Push style={{ border: "1px solid black" }} />
      */
     style?: any;
     /**
-     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
+     * 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_2.Element;
+    (props: RevealProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -444,27 +560,45 @@ export declare type RevealDirection = 'horizontal' | 'vertical';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Reveal component="aside" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Reveal id="reveal-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Reveal style={{ padding: "20px" }} />
      */
     style?: any;
     /**
@@ -475,7 +609,7 @@ export declare interface RevealProps extends AnimationInterface {
 }
 
 export declare const Slide: {
-    (props: SlideProps): JSX_2.Element;
+    (props: SlideProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -510,27 +644,45 @@ export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Slide component="article" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Slide id="slide-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Slide style={{ margin: "10px" }} />
      */
     style?: any;
 }
@@ -539,7 +691,7 @@ export declare interface SlideProps extends AnimationInterface {
 export declare const useAnimation: (config: AnimationConfig, deps: any[]) => void;
 
 export declare const Zoom: {
-    (props: ZoomProps): JSX_2.Element;
+    (props: ZoomProps): JSX.Element;
     propTypes: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
@@ -573,31 +725,52 @@ export declare type ZoomDirection = 'in' | 'out';
  */
 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.
+     * 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 which are set to the Animation.
+     * 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 `down`.
+     * Specifies the direction of the Zoom Animation. Defaults to `out`.
+     *
+     * @example
+     * <Zoom direction="in" />
      */
     direction?: ZoomDirection;
     /**
-     * Specifies the node type of the parent Animation. Defaults to `div`.
+     * Specifies the HTML tag of the parent Animation container. Defaults to `div`.
+     *
+     * @example
+     * <Zoom component="section" />
      */
     component?: string;
     /**
-     * Specifies the id of the Animation.
+     * Specifies the `id` attribute of the Animation container.
+     *
+     * @example
+     * <Zoom id="zoom-animation-container" />
      */
     id?: string;
     /**
-     * Specifies the style of the parent Animation.
+     * Specifies the inline styles to be applied to the Animation container.
+     *
+     * @example
+     * <Zoom style={{ backgroundColor: "red" }} />
      */
     style?: any;
     /**
-     * Specifies whether the child elements will stack on top of each other without interfering ([more information and examples]({% slug stacked_animation %})).
+     * Determines whether child elements will stack on top of each other during the animation. Defaults to `false`.
+     *
+     * @example
+     * <Zoom stackChildren={true} />
      */
     stackChildren?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-animation",
-  "version": "10.2.0-develop.1",
+  "version": "10.2.0-develop.11",
   "description": "React Animation component assists with animating HTML elements. KendoReact Animation package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,7 +26,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-common": "10.2.0-develop.1",
+    "@progress/kendo-react-common": "10.2.0-develop.11",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",