@progress/kendo-react-animation/dist/cdn/js/kendo-react-animation.js

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * 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}),[])}}));