@progress/kendo-react-animation 9.0.0-develop.3 → 9.0.0-develop.5

package/Animation.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 R=require("react"),e=require("prop-types"),r=require("@progress/kendo-react-common"),C=require("./AnimationChild.js"),N=require("react-transition-group"),O=require("./package-metadata.js");function A(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(i,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return i.default=t,Object.freeze(i)}const s=A(R),c=t=>{r.validatePackage(O.packageMetadata);const{id:i,style:n,children:o,component:l="div",className:u,childFactory:d,stackChildren:T,componentChildStyle:m,componentChildClassName:y,...p}=t,g=r.useUnstyled()||t.unstyled,a=t.unstyled||g,b=a&&a.uAnimation,f={id:i,style:n,component:l,childFactory:d,className:r.classNames(r.uAnimation.child({c:b}),u)},h=s.Children.map(o||null,q=>s.createElement(C.AnimationChild,{...p,unstyled:a,style:m,className:y},q));return s.createElement(N.TransitionGroup,{...f},h)};c.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};exports.Animation=c;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),e=require("prop-types"),r=require("@progress/kendo-react-common"),C=require("./AnimationChild.js"),N=require("react-transition-group"),O=require("./package-metadata.js");function A(t){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(i,n,o.get?o:{enumerable:!0,get:()=>t[n]})}}return i.default=t,Object.freeze(i)}const s=A(R),c=t=>{r.validatePackage(O.packageMetadata);const{id:i,style:n,children:o,component:l="div",className:u,childFactory:d,stackChildren:T,componentChildStyle:m,componentChildClassName:p,...y}=t,g=r.useUnstyled(),a=t.unstyled||g,b=a&&a.uAnimation,f={id:i,style:n,component:l,childFactory:d,className:r.classNames(r.uAnimation.child({c:b}),u)},h=s.Children.map(o||null,q=>s.createElement(C.AnimationChild,{...y,unstyled:a,style:m,className:p},q));return s.createElement(N.TransitionGroup,{...f},h)};c.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};exports.Animation=c;

package/Animation.mjs

@@ -6,33 +6,33 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as i from "react";
+import * as n from "react";
 import e from "prop-types";
 import { validatePackage as R, useUnstyled as g, classNames as q, uAnimation as C } from "@progress/kendo-react-common";
 import { AnimationChild as b } from "./AnimationChild.mjs";
 import { TransitionGroup as A } from "react-transition-group";
 import { packageMetadata as x } from "./package-metadata.mjs";
-const E = (t) => {
+const E = (i) => {
   R(x);
   const {
     id: o,
     style: r,
     children: s,
     component: a = "div",
-    className: l,
-    childFactory: c,
+    className: c,
+    childFactory: l,
     stackChildren: T,
     componentChildStyle: m,
     componentChildClassName: d,
-    ...u
-  } = t, p = g() || t.unstyled, n = t.unstyled || p, y = n && n.uAnimation, h = {
+    ...p
+  } = i, u = g(), t = i.unstyled || u, y = t && t.uAnimation, h = {
     id: o,
     style: r,
     component: a,
-    childFactory: c,
-    className: q(C.child({ c: y }), l)
-  }, f = i.Children.map(s || null, (N) => /* @__PURE__ */ i.createElement(b, { ...u, unstyled: n, style: m, className: d }, N));
-  return /* @__PURE__ */ i.createElement(A, { ...h }, f);
+    childFactory: l,
+    className: q(C.child({ c: y }), c)
+  }, f = n.Children.map(s || null, (N) => /* @__PURE__ */ n.createElement(b, { ...p, unstyled: t, style: m, className: d }, N));
+  return /* @__PURE__ */ n.createElement(A, { ...h }, f);
 };
 E.propTypes = {
   children: e.oneOfType([e.arrayOf(e.node), e.node]),

package/AnimationChild.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 G=require("react"),t=require("prop-types"),n=require("@progress/kendo-react-common"),B=require("react-transition-group");function F(r){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const m=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(s,e,m.get?m:{enumerable:!0,get:()=>r[e]})}}return s.default=r,Object.freeze(s)}const c=F(G),d=c.forwardRef((r,s)=>{const e=c.useRef(null),{mountOnEnter:m=i.mountOnEnter,unmountOnExit:O=i.unmountOnExit,onEnter:E=i.onEnter,onEntering:x=i.onEntering,onEntered:g=i.onEntered,onExit:f=i.onExit,onExiting:p=i.onExiting,onExited:y=i.onExited,onAfterExited:S=i.onAfterExited,animationEnteringStyle:R=i.animationEnteringStyle,animationEnteredStyle:j=i.animationEnteredStyle,animationExitingStyle:D=i.animationExitingStyle,animationExitedStyle:h=i.animationExitedStyle,children:C,style:T,appear:q,enter:P,exit:_,transitionName:u,transitionEnterDuration:A,transitionExitDuration:b,className:k,unstyled:v,...w}=r,H={transitionDelay:"0ms",...T},l=v&&v.uAnimation,I=n.classNames(k,n.uAnimation.childContainer({c:l})),o=c.useRef({element:e.current,props:r}),a=c.useRef(null);c.useImperativeHandle(a,()=>({element:e.current,props:r})),c.useImperativeHandle(s,()=>a.current,[]);const M={entering:{transitionDuration:`${A}ms`,...R},entered:{...j},exiting:{transitionDuration:`${b}ms`,...D},exited:{...h}},$={in:r.in,appear:q,enter:P,exit:_,mountOnEnter:m,unmountOnExit:O,timeout:{enter:A,exit:b},onEnter:()=>{E&&E.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onEntering:()=>{x&&x.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onEntered:()=>{g&&g.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onExit:()=>{f&&f.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onExiting:()=>{p&&p.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onExited:()=>{S&&S.call(void 0,{animatedElement:e.current,target:a.current||o.current}),y&&y.call(void 0,{animatedElement:e.current,target:a.current||o.current})},classNames:{appear:n.classNames(n.uAnimation.appear({c:l,transitionName:u})),appearActive:n.classNames(n.uAnimation.appearActive({c:l,transitionName:u})),enter:n.classNames(n.uAnimation.enter({c:l,transitionName:u})),enterActive:n.classNames(n.uAnimation.enterActive({c:l,transitionName:u})),exit:n.classNames(n.uAnimation.exit({c:l,transitionName:u})),exitActive:n.classNames(n.uAnimation.exitActive({c:l,transitionName:u}))}};return c.createElement(B.CSSTransition,{...$,...w,nodeRef:e},z=>c.createElement("div",{style:{...H,...M[z]},className:I,ref:N=>{e.current=N,o.current.element=N}},C))}),i={mountOnEnter:!0,unmountOnExit:!1,onEnter:n.noop,onEntering:n.noop,onEntered:n.noop,onExit:n.noop,onExiting:n.noop,onExited:n.noop,onAfterExited:n.noop,animationEnteringStyle:{},animationEnteredStyle:{},animationExitingStyle:{},animationExitedStyle:{}};d.displayName="AnimationChild";d.propTypes={in:t.bool,children:t.oneOfType([t.arrayOf(t.node),t.node]),transitionName:t.string.isRequired,className:t.string,appear:t.bool,enter:t.bool,exit:t.bool,transitionEnterDuration:t.number.isRequired,transitionExitDuration:t.number.isRequired,mountOnEnter:t.bool,unmountOnExit:t.bool,animationEnteringStyle:t.object,animationEnteredStyle:t.object,animationExitingStyle:t.object,animationExitedStyle:t.object};exports.AnimationChild=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),t=require("prop-types"),n=require("@progress/kendo-react-common"),K=require("react-transition-group");function B(r){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const m=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(s,e,m.get?m:{enumerable:!0,get:()=>r[e]})}}return s.default=r,Object.freeze(s)}const c=B(G),d=c.forwardRef((r,s)=>{const e=c.useRef(null),{mountOnEnter:m=i.mountOnEnter,unmountOnExit:O=i.unmountOnExit,onEnter:E=i.onEnter,onEntering:x=i.onEntering,onEntered:g=i.onEntered,onExit:f=i.onExit,onExiting:p=i.onExiting,onExited:y=i.onExited,onAfterExited:S=i.onAfterExited,animationEnteringStyle:R=i.animationEnteringStyle,animationEnteredStyle:j=i.animationEnteredStyle,animationExitingStyle:D=i.animationExitingStyle,animationExitedStyle:h=i.animationExitedStyle,children:C,style:T,appear:q,enter:P,exit:_,transitionName:u,transitionEnterDuration:A,transitionExitDuration:b,className:k,unstyled:v,...w}=r,H={transitionDelay:"0ms",...T},l=v&&v.uAnimation,I=n.classNames(k,n.uAnimation.childContainer({c:l})),o=c.useRef({element:e.current,props:r}),a=c.useRef(null);c.useImperativeHandle(a,()=>({element:e.current,props:r})),c.useImperativeHandle(s,()=>a.current,[]);const M={entering:{transitionDuration:`${A}ms`,...R},entered:{...j},exiting:{transitionDuration:`${b}ms`,...D},exited:{...h}},$={in:r.in,appear:q,enter:P,exit:_,mountOnEnter:m,unmountOnExit:O,timeout:{enter:A,exit:b},onEnter:()=>{E&&E.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onEntering:()=>{x&&x.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onEntered:()=>{g&&g.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onExit:()=>{f&&f.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onExiting:()=>{p&&p.call(void 0,{animatedElement:e.current,target:a.current||o.current})},onExited:()=>{S&&S.call(void 0,{animatedElement:e.current,target:a.current||o.current}),y&&y.call(void 0,{animatedElement:e.current,target:a.current||o.current})},classNames:{appear:n.classNames(n.uAnimation.appear({c:l,transitionName:u})),appearActive:n.classNames(n.uAnimation.appearActive({c:l,transitionName:u})),enter:n.classNames(n.uAnimation.enter({c:l,transitionName:u})),enterActive:n.classNames(n.uAnimation.enterActive({c:l,transitionName:u})),exit:n.classNames(n.uAnimation.exit({c:l,transitionName:u})),exitActive:n.classNames(n.uAnimation.exitActive({c:l,transitionName:u}))}};return c.createElement(K.CSSTransition,{...$,...w,nodeRef:e},z=>c.createElement("div",{style:{...H,...M[z]},className:I,ref:N=>{e.current=N,o.current.element=N}},C))}),i={mountOnEnter:!0,unmountOnExit:!1,onEnter:n.noop,onEntering:n.noop,onEntered:n.noop,onExit:n.noop,onExiting:n.noop,onExited:n.noop,onAfterExited:n.noop,animationEnteringStyle:{},animationEnteredStyle:{},animationExitingStyle:{},animationExitedStyle:{}};d.displayName="KendoReactAnimationChild";d.propTypes={in:t.bool,children:t.oneOfType([t.arrayOf(t.node),t.node]),transitionName:t.string.isRequired,className:t.string,appear:t.bool,enter:t.bool,exit:t.bool,transitionEnterDuration:t.number.isRequired,transitionExitDuration:t.number.isRequired,mountOnEnter:t.bool,unmountOnExit:t.bool,animationEnteringStyle:t.object,animationEnteredStyle:t.object,animationExitingStyle:t.object,animationExitedStyle:t.object};exports.AnimationChild=d;

package/AnimationChild.mjs

@@ -8,10 +8,10 @@
 "use client";
 import * as a from "react";
 import t from "prop-types";
-import { classNames as l, uAnimation as m, noop as c } from "@progress/kendo-react-common";
-import { CSSTransition as K } from "react-transition-group";
-const O = a.forwardRef(
-  (E, R) => {
+import { classNames as l, uAnimation as c, noop as m } from "@progress/kendo-react-common";
+import { CSSTransition as J } from "react-transition-group";
+const R = a.forwardRef(
+  (E, O) => {
     const e = a.useRef(null), {
       mountOnEnter: N = n.mountOnEnter,
       unmountOnExit: h = n.unmountOnExit,
@@ -36,11 +36,11 @@ const O = a.forwardRef(
       transitionExitDuration: v,
       className: w,
       unstyled: A,
-      ...k
-    } = E, z = {
+      ...K
+    } = E, k = {
       transitionDelay: "0ms",
       ...P
-    }, o = A && A.uAnimation, B = l(w, m.childContainer({ c: o })), r = a.useRef({
+    }, o = A && A.uAnimation, z = l(w, c.childContainer({ c: o })), r = a.useRef({
       element: e.current,
       props: E
     }), i = a.useRef(null);
@@ -48,16 +48,16 @@ const O = a.forwardRef(
       element: e.current,
       props: E
     })), a.useImperativeHandle(
-      R,
+      O,
       () => i.current,
       []
     );
-    const F = {
+    const B = {
       entering: { transitionDuration: `${S}ms`, ...D },
       entered: { ...C },
       exiting: { transitionDuration: `${v}ms`, ...T },
       exited: { ...j }
-    }, G = {
+    }, F = {
       in: E.in,
       appear: H,
       enter: I,
@@ -108,22 +108,22 @@ const O = a.forwardRef(
         });
       },
       classNames: {
-        appear: l(m.appear({ c: o, transitionName: u })),
-        appearActive: l(m.appearActive({ c: o, transitionName: u })),
-        enter: l(m.enter({ c: o, transitionName: u })),
-        enterActive: l(m.enterActive({ c: o, transitionName: u })),
-        exit: l(m.exit({ c: o, transitionName: u })),
-        exitActive: l(m.exitActive({ c: o, transitionName: u }))
+        appear: l(c.appear({ c: o, transitionName: u })),
+        appearActive: l(c.appearActive({ c: o, transitionName: u })),
+        enter: l(c.enter({ c: o, transitionName: u })),
+        enterActive: l(c.enterActive({ c: o, transitionName: u })),
+        exit: l(c.exit({ c: o, transitionName: u })),
+        exitActive: l(c.exitActive({ c: o, transitionName: u }))
       }
     };
-    return /* @__PURE__ */ a.createElement(K, { ...G, ...k, nodeRef: e }, (J) => /* @__PURE__ */ a.createElement(
+    return /* @__PURE__ */ a.createElement(J, { ...F, ...K, nodeRef: e }, (G) => /* @__PURE__ */ a.createElement(
       "div",
       {
         style: {
-          ...z,
-          ...F[J]
+          ...k,
+          ...B[G]
         },
-        className: B,
+        className: z,
         ref: (b) => {
           e.current = b, r.current.element = b;
         }
@@ -134,20 +134,20 @@ const O = a.forwardRef(
 ), n = {
   mountOnEnter: !0,
   unmountOnExit: !1,
-  onEnter: c,
-  onEntering: c,
-  onEntered: c,
-  onExit: c,
-  onExiting: c,
-  onExited: c,
-  onAfterExited: c,
+  onEnter: m,
+  onEntering: m,
+  onEntered: m,
+  onExit: m,
+  onExiting: m,
+  onExited: m,
+  onAfterExited: m,
   animationEnteringStyle: {},
   animationEnteredStyle: {},
   animationExitingStyle: {},
   animationExitedStyle: {}
 };
-O.displayName = "AnimationChild";
-O.propTypes = {
+R.displayName = "KendoReactAnimationChild";
+R.propTypes = {
   in: t.bool,
   children: t.oneOfType([t.arrayOf(t.node), t.node]),
   transitionName: t.string.isRequired,
@@ -165,5 +165,5 @@ O.propTypes = {
   animationExitedStyle: t.object
 };
 export {
-  O as AnimationChild
+  R as AnimationChild
 };

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,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}),[])}}));
+!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}},K={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,{...K,...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="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={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(),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/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-animation",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1729494476,
+  publishDate: 1729596282,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-animation",
-  "version": "9.0.0-develop.3",
+  "version": "9.0.0-develop.5",
   "description": "React Animation component assists with animating HTML elements. KendoReact Animation package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -23,7 +23,7 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "9.0.0-develop.3",
+    "@progress/kendo-react-common": "9.0.0-develop.5",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0",