@progress/kendo-react-animation 11.0.0-develop.2 → 11.0.0-develop.21

package/Animation.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 R=require("react"),e=require("prop-types"),s=require("@progress/kendo-react-common"),C=require("./AnimationChild.js"),N=require("react-transition-group");function O(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 a=O(R),c=t=>{const{id:i,style:n,children:o,component:l="div",className:u,childFactory:d,stackChildren:A,componentChildStyle:m,componentChildClassName:p,...y}=t,b=s.useUnstyled(),r=t.unstyled||b,f=r&&r.uAnimation,h={id:i,style:n,component:l,childFactory:d,className:s.classNames(s.uAnimation.child({c:f}),u)},g=a.Children.map(o||null,q=>a.createElement(C.AnimationChild,{...y,unstyled:r,style:m,className:p},q));return a.createElement(N.TransitionGroup,{...h},g)};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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const R=require("react"),e=require("prop-types"),s=require("@progress/kendo-react-common"),C=require("./AnimationChild.js"),N=require("react-transition-group");function O(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 a=O(R),c=t=>{const{id:i,style:n,children:o,component:l="div",className:u,childFactory:d,stackChildren:A,componentChildStyle:m,componentChildClassName:p,...y}=t,b=s.useUnstyled(),r=t.unstyled||b,f=r&&r.uAnimation,h={id:i,style:n,component:l,childFactory:d,className:s.classNames(s.uAnimation.child({c:f}),u)},q=a.Children.map(o||null,g=>a.createElement(C.AnimationChild,{...y,unstyled:r,style:m,className:p},g));return a.createElement(N.TransitionGroup,{...h},q)};c.propTypes={children:e.oneOfType([e.arrayOf(e.node),e.node]),childFactory:e.any,className:e.string,component:e.node,id:e.string,style:e.any,transitionName:e.string.isRequired,appear:e.bool.isRequired,enter:e.bool.isRequired,exit:e.bool.isRequired,transitionEnterDuration:e.number.isRequired,transitionExitDuration:e.number.isRequired};exports.Animation=c;

package/Animation.mjs

@@ -10,7 +10,7 @@ import e from "prop-types";
 import { useUnstyled as R, 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";
-const g = (i) => {
+const x = (i) => {
   const {
     id: o,
     style: r,
@@ -18,7 +18,7 @@ const g = (i) => {
     component: a = "div",
     className: l,
     childFactory: c,
-    stackChildren: x,
+    stackChildren: E,
     componentChildStyle: m,
     componentChildClassName: d,
     ...p
@@ -31,11 +31,11 @@ const g = (i) => {
   }, f = t.Children.map(s || null, (N) => /* @__PURE__ */ t.createElement(b, { ...p, unstyled: n, style: m, className: d }, N));
   return /* @__PURE__ */ t.createElement(A, { ...h }, f);
 };
-g.propTypes = {
+x.propTypes = {
   children: e.oneOfType([e.arrayOf(e.node), e.node]),
   childFactory: e.any,
   className: e.string,
-  component: e.string,
+  component: e.node,
   id: e.string,
   style: e.any,
   transitionName: e.string.isRequired,
@@ -46,5 +46,5 @@ g.propTypes = {
   transitionExitDuration: e.number.isRequired
 };
 export {
-  g as Animation
+  x as Animation
 };

package/Expand.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 f=require("react"),t=require("prop-types"),y=require("./Animation.js");function m(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const g=m(f),a=e=>{const{appear:i=r.appear,enter:n=r.enter,exit:o=r.exit,transitionEnterDuration:c=r.transitionEnterDuration,transitionExitDuration:s=r.transitionExitDuration,direction:u=r.direction,children:p,...l}=e,d={transitionName:`expand-${u}`};return g.createElement(y.Animation,{...d,appear:i,enter:n,exit:o,transitionEnterDuration:c,transitionExitDuration:s,...l},p)},r={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};a.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,direction:t.oneOf(["horizontal","vertical"]),component:t.string,id:t.string,style:t.any};exports.Expand=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),t=require("prop-types"),y=require("./Animation.js");function m(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const g=m(f),a=e=>{const{appear:i=r.appear,enter:n=r.enter,exit:o=r.exit,transitionEnterDuration:c=r.transitionEnterDuration,transitionExitDuration:s=r.transitionExitDuration,direction:u=r.direction,children:p,...l}=e,d={transitionName:`expand-${u}`};return g.createElement(y.Animation,{...d,appear:i,enter:n,exit:o,transitionEnterDuration:c,transitionExitDuration:s,...l},p)},r={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};a.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,direction:t.oneOf(["horizontal","vertical"]),component:t.node,id:t.string,style:t.any};exports.Expand=a;

package/Expand.mjs

@@ -47,7 +47,7 @@ x.propTypes = {
   childFactory: t.any,
   className: t.string,
   direction: t.oneOf(["horizontal", "vertical"]),
-  component: t.string,
+  component: t.node,
   id: t.string,
   style: t.any
 };

package/Fade.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 d=require("react"),t=require("prop-types"),f=require("./Animation.js");function y(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const m=y(d),o=e=>{const{appear:r=a.appear,enter:n=a.enter,exit:i=a.exit,transitionEnterDuration:s=a.transitionEnterDuration,transitionExitDuration:c=a.transitionExitDuration,children:u,...p}=e,l={transitionName:"fade"};return m.createElement(f.Animation,{...l,appear:r,enter:n,exit:i,transitionEnterDuration:s,transitionExitDuration:c,...p},u)},a={appear:!1,enter:!0,exit:!1,transitionEnterDuration:500,transitionExitDuration:500};o.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,component:t.string,id:t.string,style:t.any};exports.Fade=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),t=require("prop-types"),f=require("./Animation.js");function y(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const i=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,i.get?i:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const m=y(d),o=e=>{const{appear:r=a.appear,enter:n=a.enter,exit:i=a.exit,transitionEnterDuration:s=a.transitionEnterDuration,transitionExitDuration:c=a.transitionExitDuration,children:u,...p}=e,l={transitionName:"fade"};return m.createElement(f.Animation,{...l,appear:r,enter:n,exit:i,transitionEnterDuration:s,transitionExitDuration:c,...p},u)},a={appear:!1,enter:!0,exit:!1,transitionEnterDuration:500,transitionExitDuration:500};o.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,component:t.node,id:t.string,style:t.any};exports.Fade=o;

package/Fade.mjs

@@ -44,7 +44,7 @@ l.propTypes = {
   children: t.oneOfType([t.arrayOf(t.node), t.node]),
   childFactory: t.any,
   className: t.string,
-  component: t.string,
+  component: t.node,
   id: t.string,
   style: t.any
 };

package/Push.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 f=require("react"),t=require("prop-types"),h=require("./Animation.js");function y(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(i,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return i.default=e,Object.freeze(i)}const g=y(f),m={position:"absolute",top:"0",left:"0"},a=e=>{const{appear:i=n.appear,enter:r=n.enter,exit:o=n.exit,transitionEnterDuration:s=n.transitionEnterDuration,transitionExitDuration:c=n.transitionExitDuration,stackChildren:l=n.stackChildren,direction:u=n.direction,children:d,...p}=e;return g.createElement(h.Animation,{appear:i,enter:r,exit:o,transitionEnterDuration:s,transitionExitDuration:c,stackChildren:l,...p,transitionName:`push-${u}`,animationExitingStyle:e.stackChildren?m:void 0},d)},n={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"right",stackChildren:!1};a.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,direction:t.oneOf(["up","down","left","right"]),component:t.string,id:t.string,style:t.any,stackChildren:t.bool};exports.Push=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),t=require("prop-types"),h=require("./Animation.js");function y(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const o=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(i,r,o.get?o:{enumerable:!0,get:()=>e[r]})}}return i.default=e,Object.freeze(i)}const g=y(f),m={position:"absolute",top:"0",left:"0"},a=e=>{const{appear:i=n.appear,enter:r=n.enter,exit:o=n.exit,transitionEnterDuration:s=n.transitionEnterDuration,transitionExitDuration:c=n.transitionExitDuration,stackChildren:l=n.stackChildren,direction:u=n.direction,children:d,...p}=e;return g.createElement(h.Animation,{appear:i,enter:r,exit:o,transitionEnterDuration:s,transitionExitDuration:c,stackChildren:l,...p,transitionName:`push-${u}`,animationExitingStyle:e.stackChildren?m:void 0},d)},n={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"right",stackChildren:!1};a.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,direction:t.oneOf(["up","down","left","right"]),component:t.node,id:t.string,style:t.any,stackChildren:t.bool};exports.Push=a;

package/Push.mjs

@@ -10,30 +10,30 @@ import t from "prop-types";
 import { Animation as h } from "./Animation.mjs";
 const m = { position: "absolute", top: "0", left: "0" }, f = (i) => {
   const {
-    appear: r = n.appear,
-    enter: e = n.enter,
+    appear: e = n.appear,
+    enter: r = n.enter,
     exit: o = n.exit,
     transitionEnterDuration: a = n.transitionEnterDuration,
     transitionExitDuration: s = n.transitionExitDuration,
     stackChildren: c = n.stackChildren,
     direction: p = n.direction,
-    children: l,
-    ...d
+    children: d,
+    ...l
   } = i;
   return /* @__PURE__ */ u.createElement(
     h,
     {
-      appear: r,
-      enter: e,
+      appear: e,
+      enter: r,
       exit: o,
       transitionEnterDuration: a,
       transitionExitDuration: s,
       stackChildren: c,
-      ...d,
+      ...l,
       transitionName: `push-${p}`,
       animationExitingStyle: i.stackChildren ? m : void 0
     },
-    l
+    d
   );
 }, n = {
   appear: !1,
@@ -49,7 +49,7 @@ f.propTypes = {
   childFactory: t.any,
   className: t.string,
   direction: t.oneOf(["up", "down", "left", "right"]),
-  component: t.string,
+  component: t.node,
   id: t.string,
   style: t.any,
   stackChildren: t.bool

package/Reveal.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 w=require("react"),i=require("prop-types"),F=require("./Animation.js"),x=require("./util.js");function N(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const o in e)if(o!=="default"){const a=Object.getOwnPropertyDescriptor(e,o);Object.defineProperty(r,o,a.get?a:{enumerable:!0,get:()=>e[o]})}}return r.default=e,Object.freeze(r)}const s=N(w),h=e=>{const[r,o]=s.useState(),[a,p]=s.useState(),[u,E]=s.useState({}),{appear:y=l.appear,enter:v=l.enter,exit:W=l.exit,transitionEnterDuration:O=l.transitionEnterDuration,transitionExitDuration:D=l.transitionExitDuration,direction:f=l.direction,children:H,childFactory:g,...T}=e;let c;f==="vertical"?c={maxHeight:r?`${r}px`:""}:c={maxWidth:a?`${a}px`:""};const b={maxHeight:c.maxHeight,maxWidth:c.maxWidth};s.useEffect(()=>{e&&u.name&&e[u.name]&&e[u.name].call(void 0,u.event)},[r,a,u]);const S=t=>{const{onBeforeEnter:n}=e;n&&n.call(void 0,t),m(t,"onEnter")},j=t=>{m(t,"onEntering")},P=t=>{m(t,"onExit")},m=(t,n)=>{const d=t.animatedElement.firstChild;if(d){const M=x.outerHeight(d),R=x.outerWidth(d);o(M),p(R),E({name:n,event:t})}},q=t=>{const n=g?g(t):t;return n.props.in?n:s.cloneElement(n,{...n.props,style:{...n.props.style,maxHeight:c.maxHeight,maxWidth:c.maxWidth}})};return s.createElement(F.Animation,{...T,appear:y,enter:v,exit:W,transitionEnterDuration:O,transitionExitDuration:D,childFactory:q,onEnter:S,onEntering:j,onExit:P,animationEnteringStyle:b,transitionName:`reveal-${f}`},H)},l={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};h.propTypes={children:i.oneOfType([i.arrayOf(i.node),i.node]),childFactory:i.any,className:i.string,direction:i.oneOf(["horizontal","vertical"]),component:i.string,id:i.string,style:i.any};exports.Reveal=h;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),i=require("prop-types"),F=require("./Animation.js"),x=require("./util.js");function N(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const a=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(o,r,a.get?a:{enumerable:!0,get:()=>e[r]})}}return o.default=e,Object.freeze(o)}const s=N(w),h=e=>{const[o,r]=s.useState(),[a,p]=s.useState(),[u,E]=s.useState({}),{appear:y=l.appear,enter:v=l.enter,exit:W=l.exit,transitionEnterDuration:O=l.transitionEnterDuration,transitionExitDuration:D=l.transitionExitDuration,direction:f=l.direction,children:H,childFactory:g,...T}=e;let c;f==="vertical"?c={maxHeight:o?`${o}px`:""}:c={maxWidth:a?`${a}px`:""};const b={maxHeight:c.maxHeight,maxWidth:c.maxWidth};s.useEffect(()=>{e&&u.name&&e[u.name]&&e[u.name].call(void 0,u.event)},[o,a,u]);const S=t=>{const{onBeforeEnter:n}=e;n&&n.call(void 0,t),m(t,"onEnter")},j=t=>{m(t,"onEntering")},P=t=>{m(t,"onExit")},m=(t,n)=>{const d=t.animatedElement.firstChild;if(d){const M=x.outerHeight(d),R=x.outerWidth(d);r(M),p(R),E({name:n,event:t})}},q=t=>{const n=g?g(t):t;return n.props.in?n:s.cloneElement(n,{...n.props,style:{...n.props.style,maxHeight:c.maxHeight,maxWidth:c.maxWidth}})};return s.createElement(F.Animation,{...T,appear:y,enter:v,exit:W,transitionEnterDuration:O,transitionExitDuration:D,childFactory:q,onEnter:S,onEntering:j,onExit:P,animationEnteringStyle:b,transitionName:`reveal-${f}`},H)},l={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"vertical"};h.propTypes={children:i.oneOfType([i.arrayOf(i.node),i.node]),childFactory:i.any,className:i.string,direction:i.oneOf(["horizontal","vertical"]),component:i.node,id:i.string,style:i.any};exports.Reveal=h;

package/Reveal.mjs

@@ -10,19 +10,19 @@ import n from "prop-types";
 import { Animation as N } from "./Animation.mjs";
 import p from "./util.mjs";
 const P = (a) => {
-  const [c, E] = o.useState(), [m, f] = o.useState(), [s, g] = o.useState({}), {
-    appear: u = r.appear,
+  const [c, E] = o.useState(), [m, f] = o.useState(), [s, u] = o.useState({}), {
+    appear: g = r.appear,
     enter: y = r.enter,
     exit: W = r.exit,
     transitionEnterDuration: H = r.transitionEnterDuration,
     transitionExitDuration: v = r.transitionExitDuration,
-    direction: d = r.direction,
+    direction: x = r.direction,
     children: D,
     childFactory: h,
     ...T
   } = a;
   let i;
-  d === "vertical" ? i = { maxHeight: c ? `${c}px` : "" } : i = { maxWidth: m ? `${m}px` : "" };
+  x === "vertical" ? i = { maxHeight: c ? `${c}px` : "" } : i = { maxWidth: m ? `${m}px` : "" };
   const O = {
     maxHeight: i.maxHeight,
     maxWidth: i.maxWidth
@@ -38,10 +38,10 @@ const P = (a) => {
   }, M = (t) => {
     l(t, "onExit");
   }, l = (t, e) => {
-    const x = t.animatedElement.firstChild;
-    if (x) {
-      const w = p.outerHeight(x), C = p.outerWidth(x);
-      E(w), f(C), g({
+    const d = t.animatedElement.firstChild;
+    if (d) {
+      const w = p.outerHeight(d), C = p.outerWidth(d);
+      E(w), f(C), u({
         name: e,
         event: t
       });
@@ -61,7 +61,7 @@ const P = (a) => {
     N,
     {
       ...T,
-      appear: u,
+      appear: g,
       enter: y,
       exit: W,
       transitionEnterDuration: H,
@@ -71,7 +71,7 @@ const P = (a) => {
       onEntering: F,
       onExit: M,
       animationEnteringStyle: O,
-      transitionName: `reveal-${d}`
+      transitionName: `reveal-${x}`
     },
     D
   );
@@ -88,7 +88,7 @@ P.propTypes = {
   childFactory: n.any,
   className: n.string,
   direction: n.oneOf(["horizontal", "vertical"]),
-  component: n.string,
+  component: n.node,
   id: n.string,
   style: n.any
 };

package/Slide.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 f=require("react"),t=require("prop-types"),y=require("./Animation.js");function m(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const g=m(f),a=e=>{const{appear:i=r.appear,enter:n=r.enter,exit:o=r.exit,transitionEnterDuration:c=r.transitionEnterDuration,transitionExitDuration:s=r.transitionExitDuration,direction:u=r.direction,children:l,...d}=e,p={transitionName:`slide-${u}`};return g.createElement(y.Animation,{...p,appear:i,enter:n,exit:o,transitionEnterDuration:c,transitionExitDuration:s,...d},l)},r={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"down"};a.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,direction:t.oneOf(["up","down","left","right"]),component:t.string,id:t.string,style:t.any};exports.Slide=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),t=require("prop-types"),y=require("./Animation.js");function m(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const g=m(f),a=e=>{const{appear:i=r.appear,enter:n=r.enter,exit:o=r.exit,transitionEnterDuration:c=r.transitionEnterDuration,transitionExitDuration:s=r.transitionExitDuration,direction:u=r.direction,children:d,...l}=e,p={transitionName:`slide-${u}`};return g.createElement(y.Animation,{...p,appear:i,enter:n,exit:o,transitionEnterDuration:c,transitionExitDuration:s,...l},d)},r={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"down"};a.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,direction:t.oneOf(["up","down","left","right"]),component:t.node,id:t.string,style:t.any};exports.Slide=a;

package/Slide.mjs

@@ -47,7 +47,7 @@ f.propTypes = {
   childFactory: t.any,
   className: t.string,
   direction: t.oneOf(["up", "down", "left", "right"]),
-  component: t.string,
+  component: t.node,
   id: t.string,
   style: t.any
 };

package/Zoom.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 f=require("react"),t=require("prop-types"),m=require("./Animation.js");function y(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const o=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(r,i,o.get?o:{enumerable:!0,get:()=>e[i]})}}return r.default=e,Object.freeze(r)}const g=y(f),b={position:"absolute",top:"0",left:"0"},a=e=>{const{appear:r=n.appear,enter:i=n.enter,exit:o=n.exit,transitionEnterDuration:c=n.transitionEnterDuration,transitionExitDuration:s=n.transitionExitDuration,stackChildren:l=n.stackChildren,direction:u=n.direction,children:d,...p}=e;return g.createElement(m.Animation,{appear:r,enter:i,exit:o,transitionEnterDuration:c,transitionExitDuration:s,stackChildren:l,...p,transitionName:`zoom-${u}`,animationExitingStyle:e.stackChildren?b:void 0},d)},n={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"out",stackChildren:!1};a.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,direction:t.oneOf(["in","out"]),component:t.string,id:t.string,style:t.any,stackChildren:t.bool};exports.Zoom=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),t=require("prop-types"),m=require("./Animation.js");function y(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const o=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(r,i,o.get?o:{enumerable:!0,get:()=>e[i]})}}return r.default=e,Object.freeze(r)}const b=y(f),g={position:"absolute",top:"0",left:"0"},a=e=>{const{appear:r=n.appear,enter:i=n.enter,exit:o=n.exit,transitionEnterDuration:c=n.transitionEnterDuration,transitionExitDuration:s=n.transitionExitDuration,stackChildren:l=n.stackChildren,direction:u=n.direction,children:d,...p}=e;return b.createElement(m.Animation,{appear:r,enter:i,exit:o,transitionEnterDuration:c,transitionExitDuration:s,stackChildren:l,...p,transitionName:`zoom-${u}`,animationExitingStyle:e.stackChildren?g:void 0},d)},n={appear:!1,enter:!0,exit:!0,transitionEnterDuration:300,transitionExitDuration:300,direction:"out",stackChildren:!1};a.propTypes={children:t.oneOfType([t.arrayOf(t.node),t.node]),childFactory:t.any,className:t.string,direction:t.oneOf(["in","out"]),component:t.node,id:t.string,style:t.any,stackChildren:t.bool};exports.Zoom=a;

package/Zoom.mjs

@@ -10,30 +10,30 @@ import t from "prop-types";
 import { Animation as u } from "./Animation.mjs";
 const f = { position: "absolute", top: "0", left: "0" }, E = (i) => {
   const {
-    appear: r = n.appear,
-    enter: e = n.enter,
-    exit: o = n.exit,
+    appear: e = n.appear,
+    enter: o = n.enter,
+    exit: r = n.exit,
     transitionEnterDuration: a = n.transitionEnterDuration,
     transitionExitDuration: s = n.transitionExitDuration,
     stackChildren: c = n.stackChildren,
-    direction: l = n.direction,
-    children: p,
-    ...d
+    direction: d = n.direction,
+    children: l,
+    ...p
   } = i;
   return /* @__PURE__ */ m.createElement(
     u,
     {
-      appear: r,
-      enter: e,
-      exit: o,
+      appear: e,
+      enter: o,
+      exit: r,
       transitionEnterDuration: a,
       transitionExitDuration: s,
       stackChildren: c,
-      ...d,
-      transitionName: `zoom-${l}`,
+      ...p,
+      transitionName: `zoom-${d}`,
       animationExitingStyle: i.stackChildren ? f : void 0
     },
-    p
+    l
   );
 }, n = {
   appear: !1,
@@ -49,7 +49,7 @@ E.propTypes = {
   childFactory: t.any,
   className: t.string,
   direction: t.oneOf(["in", "out"]),
-  component: t.string,
+  component: t.node,
   id: t.string,
   style: t.any,
   stackChildren: t.bool

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

package/index.d.mts

@@ -16,7 +16,7 @@ declare const Animation_2: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
         transitionName: default_2.Validator<string>;
@@ -236,7 +236,7 @@ export declare interface AnimationProps extends AnimationInterface {
      * @example
      * <Animation component="main" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -309,7 +309,7 @@ export declare const Expand: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
     };
@@ -327,12 +327,6 @@ export declare type ExpandDirection = 'horizontal' | 'vertical';
 /**
  * Represent the props of the [KendoReact Expand Animation component]({% slug animationtypes_animation %}#toc-expand).
  *
- * {% meta height:300 %}
- * {% embed_file props/expand/func/app.tsx preview %}
- * {% embed_file props/expand/func/main.tsx %}
- * {% embed_file props/expand/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface ExpandProps extends AnimationInterface {
     /**
@@ -362,7 +356,7 @@ export declare interface ExpandProps extends AnimationInterface {
      * @example
      * <Expand component="nav" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -385,7 +379,7 @@ export declare const Fade: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
     };
@@ -393,13 +387,6 @@ export declare const Fade: {
 
 /**
  * Represent the props of the [KendoReact Fade Animation component]({% slug animationtypes_animation %}#toc-fade).
- *
- * {% meta height:300 %}
- * {% embed_file props/fade/func/app.tsx preview %}
- * {% embed_file props/fade/func/main.tsx %}
- * {% embed_file props/fade/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface FadeProps extends AnimationInterface {
     /**
@@ -422,7 +409,7 @@ export declare interface FadeProps extends AnimationInterface {
      * @example
      * <Fade component="header" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -446,7 +433,7 @@ export declare const Push: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
         stackChildren: default_2.Requireable<boolean>;
@@ -466,13 +453,6 @@ export declare type PushDirection = 'up' | 'down' | 'left' | 'right';
 
 /**
  * Represent the props of the [KendoReact Push Animation component]({% slug animationtypes_animation %}#toc-push).
- *
- * {% meta height:300 %}
- * {% embed_file props/push/func/app.tsx preview %}
- * {% embed_file props/push/func/main.tsx %}
- * {% embed_file props/push/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface PushProps extends AnimationInterface {
     /**
@@ -502,7 +482,7 @@ export declare interface PushProps extends AnimationInterface {
      * @example
      * <Push component="footer" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -533,7 +513,7 @@ export declare const Reveal: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
     };
@@ -550,13 +530,6 @@ export declare type RevealDirection = 'horizontal' | 'vertical';
 
 /**
  * Represent the props of the [KendoReact Reveal Animation component]({% slug animationtypes_animation %}#toc-rveal).
- *
- * {% meta height:300 %}
- * {% embed_file props/reveal/func/app.tsx preview %}
- * {% embed_file props/reveal/func/main.tsx %}
- * {% embed_file props/reveal/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface RevealProps extends AnimationInterface {
     /**
@@ -586,7 +559,7 @@ export declare interface RevealProps extends AnimationInterface {
      * @example
      * <Reveal component="aside" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -615,7 +588,7 @@ export declare const Slide: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
     };
@@ -634,13 +607,6 @@ export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';
 
 /**
  * Represent the props of the [KendoReact Slide Animation component]({% slug animationtypes_animation %}#toc-slide).
- *
- * {% meta height:300 %}
- * {% embed_file props/slide/func/app.tsx preview %}
- * {% embed_file props/slide/func/main.tsx %}
- * {% embed_file props/slide/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface SlideProps extends AnimationInterface {
     /**
@@ -670,7 +636,7 @@ export declare interface SlideProps extends AnimationInterface {
      * @example
      * <Slide component="article" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -697,7 +663,7 @@ export declare const Zoom: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
         stackChildren: default_2.Requireable<boolean>;
@@ -715,13 +681,6 @@ export declare type ZoomDirection = 'in' | 'out';
 
 /**
  * Represent the props of the [KendoReact Zoom Animation component]({% slug animationtypes_animation %}#toc-zoom).
- *
- * {% meta height:300 %}
- * {% embed_file props/zoom/func/app.tsx preview %}
- * {% embed_file props/zoom/func/main.tsx %}
- * {% embed_file props/zoom/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface ZoomProps extends AnimationInterface {
     /**
@@ -751,7 +710,7 @@ export declare interface ZoomProps extends AnimationInterface {
      * @example
      * <Zoom component="section" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *

package/index.d.ts

@@ -16,7 +16,7 @@ declare const Animation_2: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
         transitionName: default_2.Validator<string>;
@@ -236,7 +236,7 @@ export declare interface AnimationProps extends AnimationInterface {
      * @example
      * <Animation component="main" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -309,7 +309,7 @@ export declare const Expand: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
     };
@@ -327,12 +327,6 @@ export declare type ExpandDirection = 'horizontal' | 'vertical';
 /**
  * Represent the props of the [KendoReact Expand Animation component]({% slug animationtypes_animation %}#toc-expand).
  *
- * {% meta height:300 %}
- * {% embed_file props/expand/func/app.tsx preview %}
- * {% embed_file props/expand/func/main.tsx %}
- * {% embed_file props/expand/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface ExpandProps extends AnimationInterface {
     /**
@@ -362,7 +356,7 @@ export declare interface ExpandProps extends AnimationInterface {
      * @example
      * <Expand component="nav" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -385,7 +379,7 @@ export declare const Fade: {
         children: default_2.Requireable<NonNullable<default_2.ReactNodeLike>>;
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
     };
@@ -393,13 +387,6 @@ export declare const Fade: {
 
 /**
  * Represent the props of the [KendoReact Fade Animation component]({% slug animationtypes_animation %}#toc-fade).
- *
- * {% meta height:300 %}
- * {% embed_file props/fade/func/app.tsx preview %}
- * {% embed_file props/fade/func/main.tsx %}
- * {% embed_file props/fade/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface FadeProps extends AnimationInterface {
     /**
@@ -422,7 +409,7 @@ export declare interface FadeProps extends AnimationInterface {
      * @example
      * <Fade component="header" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -446,7 +433,7 @@ export declare const Push: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
         stackChildren: default_2.Requireable<boolean>;
@@ -466,13 +453,6 @@ export declare type PushDirection = 'up' | 'down' | 'left' | 'right';
 
 /**
  * Represent the props of the [KendoReact Push Animation component]({% slug animationtypes_animation %}#toc-push).
- *
- * {% meta height:300 %}
- * {% embed_file props/push/func/app.tsx preview %}
- * {% embed_file props/push/func/main.tsx %}
- * {% embed_file props/push/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface PushProps extends AnimationInterface {
     /**
@@ -502,7 +482,7 @@ export declare interface PushProps extends AnimationInterface {
      * @example
      * <Push component="footer" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -533,7 +513,7 @@ export declare const Reveal: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
     };
@@ -550,13 +530,6 @@ export declare type RevealDirection = 'horizontal' | 'vertical';
 
 /**
  * Represent the props of the [KendoReact Reveal Animation component]({% slug animationtypes_animation %}#toc-rveal).
- *
- * {% meta height:300 %}
- * {% embed_file props/reveal/func/app.tsx preview %}
- * {% embed_file props/reveal/func/main.tsx %}
- * {% embed_file props/reveal/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface RevealProps extends AnimationInterface {
     /**
@@ -586,7 +559,7 @@ export declare interface RevealProps extends AnimationInterface {
      * @example
      * <Reveal component="aside" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -615,7 +588,7 @@ export declare const Slide: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
     };
@@ -634,13 +607,6 @@ export declare type SlideDirection = 'up' | 'down' | 'left' | 'right';
 
 /**
  * Represent the props of the [KendoReact Slide Animation component]({% slug animationtypes_animation %}#toc-slide).
- *
- * {% meta height:300 %}
- * {% embed_file props/slide/func/app.tsx preview %}
- * {% embed_file props/slide/func/main.tsx %}
- * {% embed_file props/slide/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface SlideProps extends AnimationInterface {
     /**
@@ -670,7 +636,7 @@ export declare interface SlideProps extends AnimationInterface {
      * @example
      * <Slide component="article" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *
@@ -697,7 +663,7 @@ export declare const Zoom: {
         childFactory: default_2.Requireable<any>;
         className: default_2.Requireable<string>;
         direction: default_2.Requireable<string>;
-        component: default_2.Requireable<string>;
+        component: default_2.Requireable<default_2.ReactNodeLike>;
         id: default_2.Requireable<string>;
         style: default_2.Requireable<any>;
         stackChildren: default_2.Requireable<boolean>;
@@ -715,13 +681,6 @@ export declare type ZoomDirection = 'in' | 'out';
 
 /**
  * Represent the props of the [KendoReact Zoom Animation component]({% slug animationtypes_animation %}#toc-zoom).
- *
- * {% meta height:300 %}
- * {% embed_file props/zoom/func/app.tsx preview %}
- * {% embed_file props/zoom/func/main.tsx %}
- * {% embed_file props/zoom/func/styles.css %}
- * {% endmeta %}
- *
  */
 export declare interface ZoomProps extends AnimationInterface {
     /**
@@ -751,7 +710,7 @@ export declare interface ZoomProps extends AnimationInterface {
      * @example
      * <Zoom component="section" />
      */
-    component?: string;
+    component?: React_2.ReactNode;
     /**
      * Specifies the `id` attribute of the Animation container.
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-animation",
-  "version": "11.0.0-develop.2",
+  "version": "11.0.0-develop.21",
   "description": "React Animation component assists with animating HTML elements. KendoReact Animation package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,8 +25,8 @@
   },
   "sideEffects": false,
   "peerDependencies": {
-    "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-common": "11.0.0-develop.2",
+    "@progress/kendo-licensing": "^1.6.0",
+    "@progress/kendo-react-common": "11.0.0-develop.21",
     "@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",