@progress/kendo-react-animation 9.0.0-develop.2 → 9.0.0-develop.4

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

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

package/hooks/useAnimation.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"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 o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,o.get?o:{enumerable:!0,get:()=>t[e]})}}return r.default=t,Object.freeze(r)}const c=g(b),w=(t,r)=>{const e=c.useRef(0),o=c.useRef(!1),u=c.useRef(),d=n=>{const m=n.duration;let a,f,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)};c.useEffect(()=>(d(t),()=>{u.current&&window.cancelAnimationFrame(u.current)}),r),c.useEffect(()=>{o.current=!0},[])};exports.useAnimation=w;
+"use client";"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 o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,o.get?o:{enumerable:!0,get:()=>t[e]})}}return r.default=t,Object.freeze(r)}const c=g(b),w=(t,r)=>{const e=c.useRef(0),o=c.useRef(!1),u=c.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)};c.useEffect(()=>(d(t),()=>{u.current&&window.cancelAnimationFrame(u.current)}),r),c.useEffect(()=>{o.current=!0},[])};exports.useAnimation=w;

package/hooks/useAnimation.mjs

@@ -7,29 +7,24 @@
  */
 "use client";
 import * as t from "react";
-const p = (s, i) => {
+const p = (f, i) => {
   const n = t.useRef(0), m = t.useRef(!1), r = t.useRef(), d = (e) => {
     const l = e.duration;
-    let o, u, w = n.current && 1 - n.current;
+    let o, u;
+    const w = n.current && 1 - n.current;
     e.onStart && e.onStart();
-    const a = (f) => {
-      o || (o = f), u = f - o + 1;
+    const s = (a) => {
+      o || (o = a), u = a - o + 1;
       const c = u / l + w;
-      c <= 1 ? (e.onUpdate && e.onUpdate(c), r.current = window.requestAnimationFrame(a), n.current = c) : (e.onEnd && e.onEnd(1), n.current = 0);
+      c <= 1 ? (e.onUpdate && e.onUpdate(c), r.current = window.requestAnimationFrame(s), n.current = c) : (e.onEnd && e.onEnd(1), n.current = 0);
     };
-    r.current = window.requestAnimationFrame(a);
+    r.current = window.requestAnimationFrame(s);
   };
-  t.useEffect(
-    () => (d(s), () => {
-      r.current && window.cancelAnimationFrame(r.current);
-    }),
-    i
-  ), t.useEffect(
-    () => {
-      m.current = !0;
-    },
-    []
-  );
+  t.useEffect(() => (d(f), () => {
+    r.current && window.cancelAnimationFrame(r.current);
+  }), i), t.useEffect(() => {
+    m.current = !0;
+  }, []);
 };
 export {
   p as useAnimation

package/index.d.mts

@@ -5,15 +5,14 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { AnimationsClassStructure } from '@progress/kendo-react-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import PropTypes from 'prop-types';
 import * as React_2 from 'react';
 
-declare class Animation_2 extends React_2.Component<AnimationProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
+declare const Animation_2: {
+    (props: AnimationProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         childFactory: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
@@ -27,68 +26,23 @@ declare class Animation_2 extends React_2.Component<AnimationProps, {}> {
         transitionEnterDuration: PropTypes.Validator<number>;
         transitionExitDuration: PropTypes.Validator<number>;
     };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        component: string;
-    };
-    constructor(props: AnimationProps);
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+};
 export { Animation_2 as Animation }
 
-export declare class AnimationChild extends React_2.Component<AnimationChildProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        in: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        transitionName: PropTypes.Validator<string>;
-        className: PropTypes.Requireable<string>;
-        appear: PropTypes.Requireable<boolean>;
-        enter: PropTypes.Requireable<boolean>;
-        exit: PropTypes.Requireable<boolean>;
-        transitionEnterDuration: PropTypes.Validator<number>;
-        transitionExitDuration: PropTypes.Validator<number>;
-        mountOnEnter: PropTypes.Requireable<boolean>;
-        unmountOnExit: PropTypes.Requireable<boolean>;
-        animationEnteringStyle: PropTypes.Requireable<object>;
-        animationEnteredStyle: PropTypes.Requireable<object>;
-        animationExitingStyle: PropTypes.Requireable<object>;
-        animationExitedStyle: PropTypes.Requireable<object>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        mountOnEnter: boolean;
-        unmountOnExit: boolean;
-        onEnter: () => void;
-        onEntering: () => void;
-        onEntered: () => void;
-        onExit: () => void;
-        onExiting: () => void;
-        onExited: () => void;
-        onAfterExited: () => void;
-        animationEnteringStyle: {};
-        animationEnteredStyle: {};
-        animationExitingStyle: {};
-        animationExitedStyle: {};
-    };
-    private elementRef;
+export declare const AnimationChild: React_2.ForwardRefExoticComponent<AnimationChildProps & React_2.RefAttributes<AnimationChildHandle | null>>;
+
+/**
+ * Represents the AnimationChild handle.
+ */
+export declare interface AnimationChildHandle {
     /**
-     * The element that is being animated.
+     * Gets the element.
      */
-    get element(): HTMLDivElement | null;
+    element: HTMLDivElement | null;
     /**
-     * @hidden
+     * Gets the props.
      */
-    render(): JSX_2.Element;
+    props: AnimationChildProps;
 }
 
 /**
@@ -127,6 +81,10 @@ export declare interface AnimationChildProps extends AnimationInterface {
      * Specifies the style which will be applied when the Animation reaches its exited state.
      */
     animationExitedStyle?: any;
+    /**
+     * The unstyled option classes.
+     */
+    unstyled?: AnimationsClassStructure;
 }
 
 /** @hidden */
@@ -150,7 +108,7 @@ declare interface AnimationEventArguments {
     /**
      * The AnimationChild component which controls the animation.
      */
-    target: AnimationChild;
+    target: AnimationChildHandle;
 }
 
 /**
@@ -276,13 +234,15 @@ export declare interface AnimationProps extends AnimationInterface {
      * Specifies the style which will be applied when the Animation reaches its exited state.
      */
     animationExitedStyle?: any;
-}
-
-export declare class Expand extends React_2.Component<ExpandProps, {}> {
     /**
-     * @hidden
+     * The unstyled option classes.
      */
-    static propTypes: {
+    unstyled?: AnimationsClassStructure;
+}
+
+export declare const Expand: {
+    (props: ExpandProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         childFactory: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
@@ -291,22 +251,7 @@ export declare class Expand extends React_2.Component<ExpandProps, {}> {
         id: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<any>;
     };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        appear: boolean;
-        enter: boolean;
-        exit: boolean;
-        transitionEnterDuration: number;
-        transitionExitDuration: number;
-        direction: string;
-    };
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+};
 
 /**
  * Specifies the direction of the Expand Animation ([see example]({% slug direction_animation %}#toc-expand)).
@@ -354,11 +299,9 @@ export declare interface ExpandProps extends AnimationInterface {
     style?: any;
 }
 
-export declare class Fade extends React_2.Component<FadeProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
+export declare const Fade: {
+    (props: FadeProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         childFactory: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
@@ -366,21 +309,7 @@ export declare class Fade extends React_2.Component<FadeProps, {}> {
         id: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<any>;
     };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        appear: boolean;
-        enter: boolean;
-        exit: boolean;
-        transitionEnterDuration: number;
-        transitionExitDuration: number;
-    };
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+};
 
 /**
  * Represent the props of the [KendoReact Fade Animation component]({% slug animationtypes_animation %}#toc-fade).
@@ -415,11 +344,9 @@ export declare interface FadeProps extends AnimationInterface {
     style?: any;
 }
 
-export declare class Push extends React_2.Component<PushProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
+export declare const Push: {
+    (props: PushProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         childFactory: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
@@ -429,23 +356,7 @@ export declare class Push extends React_2.Component<PushProps, {}> {
         style: PropTypes.Requireable<any>;
         stackChildren: PropTypes.Requireable<boolean>;
     };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        appear: boolean;
-        enter: boolean;
-        exit: boolean;
-        transitionEnterDuration: number;
-        transitionExitDuration: number;
-        direction: string;
-        stackChildren: boolean;
-    };
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+};
 
 /**
  * Specifies the direction of the Push Animation ([see example]({% slug direction_animation %}#toc-push)).
@@ -499,11 +410,9 @@ export declare interface PushProps extends AnimationInterface {
     stackChildren?: boolean;
 }
 
-export declare class Reveal extends React_2.Component<RevealProps, RevealState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
+export declare const Reveal: {
+    (props: RevealProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         childFactory: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
@@ -512,30 +421,7 @@ export declare class Reveal extends React_2.Component<RevealProps, RevealState>
         id: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<any>;
     };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        appear: boolean;
-        enter: boolean;
-        exit: boolean;
-        transitionEnterDuration: number;
-        transitionExitDuration: number;
-        direction: string;
-    };
-    /**
-     * @hidden
-     */
-    readonly state: RevealState;
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-    private componentWillEnter;
-    private componentIsEntering;
-    private componentWillExit;
-    private updateContainerDimensions;
-}
+};
 
 /**
  * Specifies the direction of the Reveal Animation ([see example]({% slug direction_animation %}#toc-reveal)).
@@ -588,19 +474,9 @@ export declare interface RevealProps extends AnimationInterface {
     onBeforeEnter?: (event: AnimationEventArguments) => void;
 }
 
-/**
- * @hidden
- */
-declare interface RevealState {
-    maxHeight?: number;
-    maxWidth?: number;
-}
-
-export declare class Slide extends React_2.Component<SlideProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
+export declare const Slide: {
+    (props: SlideProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         childFactory: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
@@ -609,22 +485,7 @@ export declare class Slide extends React_2.Component<SlideProps, {}> {
         id: PropTypes.Requireable<string>;
         style: PropTypes.Requireable<any>;
     };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        appear: boolean;
-        enter: boolean;
-        exit: boolean;
-        transitionEnterDuration: number;
-        transitionExitDuration: number;
-        direction: string;
-    };
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+};
 
 /**
  * Specifies the direction of the Slide Animation ([see example]({% slug direction_animation %}#toc-slide)).
@@ -677,11 +538,9 @@ export declare interface SlideProps extends AnimationInterface {
 /** @hidden */
 export declare const useAnimation: (config: AnimationConfig, deps: any[]) => void;
 
-export declare class Zoom extends React_2.Component<ZoomProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
+export declare const Zoom: {
+    (props: ZoomProps): JSX_2.Element;
+    propTypes: {
         children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
         childFactory: PropTypes.Requireable<any>;
         className: PropTypes.Requireable<string>;
@@ -691,23 +550,7 @@ export declare class Zoom extends React_2.Component<ZoomProps, {}> {
         style: PropTypes.Requireable<any>;
         stackChildren: PropTypes.Requireable<boolean>;
     };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        appear: boolean;
-        enter: boolean;
-        exit: boolean;
-        transitionEnterDuration: number;
-        transitionExitDuration: number;
-        direction: string;
-        stackChildren: boolean;
-    };
-    /**
-     * @hidden
-     */
-    render(): JSX_2.Element;
-}
+};
 
 /**
  * Specifies the direction of the Zoom Animation ([see example]({% slug direction_animation %}#toc-zoom)).
@@ -742,7 +585,7 @@ export declare interface ZoomProps extends AnimationInterface {
      */
     direction?: ZoomDirection;
     /**
-     * Specifies the node type of the parent Asnimation. Defaults to `div`.
+     * Specifies the node type of the parent Animation. Defaults to `div`.
      */
     component?: string;
     /**