@progress/kendo-react-animation 6.1.1 → 7.0.0-develop.2

package/index.mjs

@@ -0,0 +1,669 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import * as a from "react";
+import * as e from "prop-types";
+import { classNames as C, noop as v, validatePackage as V } from "@progress/kendo-react-common";
+import { CSSTransition as _, TransitionGroup as B } from "react-transition-group";
+const G = (o) => {
+  if (!o || !o.ownerDocument.defaultView)
+    return 0;
+  const t = o.ownerDocument.defaultView.getComputedStyle(o), n = parseFloat(t.marginTop), s = parseFloat(t.marginBottom);
+  return o.offsetHeight + n + s;
+}, K = (o) => {
+  if (!o || !o.ownerDocument.defaultView)
+    return 0;
+  const t = o.ownerDocument.defaultView.getComputedStyle(o), n = parseFloat(t.marginLeft), s = parseFloat(t.marginRight);
+  return o.offsetWidth + n + s;
+}, X = {
+  "animation-container": "k-animation-container",
+  "animation-container-relative": "k-animation-container-relative",
+  "animation-container-fixed": "k-animation-container-fixed",
+  "push-right-enter": "k-push-right-enter",
+  "push-right-appear": "k-push-right-appear",
+  "push-right-enter-active": "k-push-right-enter-active",
+  "push-right-appear-active": "k-push-right-appear-active",
+  "push-right-exit": "k-push-right-exit",
+  "push-right-exit-active": "k-push-right-exit-active",
+  "push-left-enter": "k-push-left-enter",
+  "push-left-appear": "k-push-left-appear",
+  "push-left-enter-active": "k-push-left-enter-active",
+  "push-left-appear-active": "k-push-left-appear-active",
+  "push-left-exit": "k-push-left-exit",
+  "push-left-exit-active": "k-push-left-exit-active",
+  "push-down-enter": "k-push-down-enter",
+  "push-down-appear": "k-push-down-appear",
+  "push-down-enter-active": "k-push-down-enter-active",
+  "push-down-appear-active": "k-push-down-appear-active",
+  "push-down-exit": "k-push-down-exit",
+  "push-down-exit-active": "k-push-down-exit-active",
+  "push-up-enter": "k-push-up-enter",
+  "push-up-appear": "k-push-up-appear",
+  "push-up-enter-active": "k-push-up-enter-active",
+  "push-up-appear-active": "k-push-up-appear-active",
+  "push-up-exit": "k-push-up-exit",
+  "push-up-exit-active": "k-push-up-exit-active",
+  expand: "k-expand",
+  "expand-vertical-enter": "k-expand-vertical-enter",
+  "expand-vertical-appear": "k-expand-vertical-appear",
+  "expand-vertical-enter-active": "k-expand-vertical-enter-active",
+  "expand-vertical-appear-active": "k-expand-vertical-appear-active",
+  "expand-vertical-exit": "k-expand-vertical-exit",
+  "expand-vertical-exit-active": "k-expand-vertical-exit-active",
+  "expand-horizontal-enter": "k-expand-horizontal-enter",
+  "expand-horizontal-appear": "k-expand-horizontal-appear",
+  "expand-horizontal-enter-active": "k-expand-horizontal-enter-active",
+  "expand-horizontal-appear-active": "k-expand-horizontal-appear-active",
+  "expand-horizontal-exit": "k-expand-horizontal-exit",
+  "expand-horizontal-exit-active": "k-expand-horizontal-exit-active",
+  "child-animation-container": "k-child-animation-container",
+  "fade-enter": "k-fade-enter",
+  "fade-appear": "k-fade-appear",
+  "fade-enter-active": "k-fade-enter-active",
+  "fade-appear-active": "k-fade-appear-active",
+  "fade-exit": "k-fade-exit",
+  "fade-exit-active": "k-fade-exit-active",
+  "zoom-in-enter": "k-zoom-in-enter",
+  "zoom-in-appear": "k-zoom-in-appear",
+  "zoom-in-enter-active": "k-zoom-in-enter-active",
+  "zoom-in-appear-active": "k-zoom-in-appear-active",
+  "zoom-in-exit": "k-zoom-in-exit",
+  "zoom-in-exit-active": "k-zoom-in-exit-active",
+  "zoom-out-enter": "k-zoom-out-enter",
+  "zoom-out-appear": "k-zoom-out-appear",
+  "zoom-out-enter-active": "k-zoom-out-enter-active",
+  "zoom-out-appear-active": "k-zoom-out-appear-active",
+  "zoom-out-exit": "k-zoom-out-exit",
+  "zoom-out-exit-active": "k-zoom-out-exit-active",
+  "slide-in-appear": "k-slide-in-appear",
+  centered: "k-centered",
+  "slide-in-appear-active": "k-slide-in-appear-active",
+  "slide-down-enter": "k-slide-down-enter",
+  "slide-down-appear": "k-slide-down-appear",
+  "slide-down-enter-active": "k-slide-down-enter-active",
+  "slide-down-appear-active": "k-slide-down-appear-active",
+  "slide-down-exit": "k-slide-down-exit",
+  "slide-down-exit-active": "k-slide-down-exit-active",
+  "slide-up-enter": "k-slide-up-enter",
+  "slide-up-appear": "k-slide-up-appear",
+  "slide-up-enter-active": "k-slide-up-enter-active",
+  "slide-up-appear-active": "k-slide-up-appear-active",
+  "slide-up-exit": "k-slide-up-exit",
+  "slide-up-exit-active": "k-slide-up-exit-active",
+  "slide-right-enter": "k-slide-right-enter",
+  "slide-right-appear": "k-slide-right-appear",
+  "slide-right-enter-active": "k-slide-right-enter-active",
+  "slide-right-appear-active": "k-slide-right-appear-active",
+  "slide-right-exit": "k-slide-right-exit",
+  "slide-right-exit-active": "k-slide-right-exit-active",
+  "slide-left-enter": "k-slide-left-enter",
+  "slide-left-appear": "k-slide-left-appear",
+  "slide-left-enter-active": "k-slide-left-enter-active",
+  "slide-left-appear-active": "k-slide-left-appear-active",
+  "slide-left-exit": "k-slide-left-exit",
+  "slide-left-exit-active": "k-slide-left-exit-active",
+  "reveal-vertical-enter": "k-reveal-vertical-enter",
+  "reveal-vertical-appear": "k-reveal-vertical-appear",
+  "reveal-vertical-enter-active": "k-reveal-vertical-enter-active",
+  "reveal-vertical-appear-active": "k-reveal-vertical-appear-active",
+  "reveal-vertical-exit": "k-reveal-vertical-exit",
+  "reveal-vertical-exit-active": "k-reveal-vertical-exit-active",
+  "reveal-horizontal-enter": "k-reveal-horizontal-enter",
+  "reveal-horizontal-appear": "k-reveal-horizontal-appear",
+  "reveal-horizontal-enter-active": "k-reveal-horizontal-enter-active",
+  "reveal-horizontal-appear-active": "k-reveal-horizontal-appear-active",
+  "reveal-horizontal-exit": "k-reveal-horizontal-exit",
+  "reveal-horizontal-exit-active": "k-reveal-horizontal-exit-active"
+}, Y = {
+  outerHeight: G,
+  outerWidth: K,
+  styles: X
+}, k = Y, g = k.styles;
+class E extends a.Component {
+  constructor() {
+    super(...arguments), this.elementRef = a.createRef();
+  }
+  /**
+   * The element that is being animated.
+   */
+  get element() {
+    return this.elementRef.current;
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      children: i,
+      style: t,
+      appear: n,
+      enter: s,
+      exit: c,
+      transitionName: r,
+      transitionEnterDuration: l,
+      transitionExitDuration: d,
+      className: h,
+      onEnter: u,
+      onEntering: p,
+      onEntered: f,
+      onExit: m,
+      onExiting: y,
+      onExited: z,
+      onAfterExited: w,
+      mountOnEnter: b,
+      unmountOnExit: F,
+      animationEnteringStyle: A,
+      animationEnteredStyle: P,
+      animationExitingStyle: W,
+      animationExitedStyle: H,
+      ...I
+    } = this.props, q = C(
+      h,
+      g["child-animation-container"]
+    ), L = {
+      transitionDelay: "0ms",
+      ...t
+    }, M = {
+      entering: { transitionDuration: `${l}ms`, ...A },
+      entered: { ...P },
+      exiting: { transitionDuration: `${d}ms`, ...W },
+      exited: { ...H }
+    }, U = {
+      in: this.props.in,
+      appear: n,
+      enter: s,
+      exit: c,
+      mountOnEnter: b,
+      unmountOnExit: F,
+      timeout: {
+        enter: l,
+        exit: d
+      },
+      onEnter: () => {
+        u && u.call(void 0, { animatedElement: this.element, target: this });
+      },
+      onEntering: () => {
+        p && p.call(void 0, { animatedElement: this.element, target: this });
+      },
+      onEntered: () => {
+        f && f.call(void 0, { animatedElement: this.element, target: this });
+      },
+      onExit: () => {
+        m && m.call(void 0, { animatedElement: this.element, target: this });
+      },
+      onExiting: () => {
+        y && y.call(void 0, { animatedElement: this.element, target: this });
+      },
+      onExited: () => {
+        w && w.call(void 0, { animatedElement: this.element, target: this }), z && z.call(void 0, { animatedElement: this.element, target: this });
+      },
+      classNames: {
+        appear: g[`${r}-appear`] || `${r}-appear`,
+        appearActive: g[`${r}-appear-active`] || `${r}-appear-active`,
+        enter: g[`${r}-enter`] || `${r}-enter`,
+        enterActive: g[`${r}-enter-active`] || `${r}-enter-active`,
+        exit: g[`${r}-exit`] || `${r}-exit`,
+        exitActive: g[`${r}-exit-active`] || `${r}-exit-active`
+      }
+    };
+    return /* @__PURE__ */ a.createElement(_, { ...U, ...I, nodeRef: this.elementRef }, (j) => /* @__PURE__ */ a.createElement(
+      "div",
+      {
+        style: {
+          ...L,
+          ...M[j]
+        },
+        className: q,
+        ref: this.elementRef
+      },
+      i
+    ));
+  }
+}
+E.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
+};
+E.defaultProps = {
+  mountOnEnter: !0,
+  unmountOnExit: !1,
+  onEnter: v,
+  onEntering: v,
+  onEntered: v,
+  onExit: v,
+  onExiting: v,
+  onExited: v,
+  onAfterExited: v,
+  animationEnteringStyle: {},
+  animationEnteredStyle: {},
+  animationExitingStyle: {},
+  animationExitedStyle: {}
+};
+const Z = {
+  name: "@progress/kendo-react-animation",
+  productName: "KendoReact",
+  productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
+  publishDate: 1700572990,
+  version: "",
+  licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
+}, N = k.styles;
+class x extends a.Component {
+  constructor(i) {
+    super(i), V(Z);
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      id: i,
+      style: t,
+      children: n,
+      component: s,
+      className: c,
+      childFactory: r,
+      stackChildren: l,
+      componentChildStyle: d,
+      componentChildClassName: h,
+      ...u
+    } = this.props, p = {
+      id: i,
+      style: t,
+      component: s,
+      childFactory: r,
+      className: C(
+        N["animation-container"],
+        N["animation-container-relative"],
+        c
+      )
+    }, f = a.Children.map(n || null, (m) => /* @__PURE__ */ a.createElement(
+      E,
+      {
+        ...u,
+        style: d,
+        className: h
+      },
+      m
+    ));
+    return /* @__PURE__ */ a.createElement(B, { ...p }, f);
+  }
+}
+x.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
+};
+x.defaultProps = {
+  component: "div"
+};
+class D extends a.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      children: i,
+      ...t
+    } = this.props, n = {
+      transitionName: "fade"
+    };
+    return /* @__PURE__ */ a.createElement(x, { ...n, ...t }, i);
+  }
+}
+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
+};
+D.defaultProps = {
+  appear: !1,
+  enter: !0,
+  exit: !1,
+  transitionEnterDuration: 500,
+  transitionExitDuration: 500
+};
+class O extends a.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      direction: i,
+      children: t,
+      ...n
+    } = this.props, s = {
+      transitionName: `expand-${i}`
+    };
+    return /* @__PURE__ */ a.createElement(x, { ...s, ...n }, t);
+  }
+}
+O.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
+};
+O.defaultProps = {
+  appear: !1,
+  enter: !0,
+  exit: !0,
+  transitionEnterDuration: 300,
+  transitionExitDuration: 300,
+  direction: "vertical"
+};
+const J = { position: "absolute", top: "0", left: "0" };
+class S extends a.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      children: i,
+      direction: t,
+      ...n
+    } = this.props;
+    return /* @__PURE__ */ a.createElement(
+      x,
+      {
+        ...n,
+        transitionName: `push-${t}`,
+        animationExitingStyle: this.props.stackChildren ? J : void 0
+      },
+      i
+    );
+  }
+}
+S.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
+};
+S.defaultProps = {
+  appear: !1,
+  enter: !0,
+  exit: !0,
+  transitionEnterDuration: 300,
+  transitionExitDuration: 300,
+  direction: "right",
+  stackChildren: !1
+};
+class T extends a.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      direction: i,
+      children: t,
+      ...n
+    } = this.props, s = {
+      transitionName: `slide-${i}`
+    };
+    return /* @__PURE__ */ a.createElement(x, { ...s, ...n }, t);
+  }
+}
+T.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
+};
+T.defaultProps = {
+  appear: !1,
+  enter: !0,
+  exit: !0,
+  transitionEnterDuration: 300,
+  transitionExitDuration: 300,
+  direction: "down"
+};
+const Q = { position: "absolute", top: "0", left: "0" };
+class R extends a.Component {
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      children: i,
+      direction: t,
+      ...n
+    } = this.props;
+    return /* @__PURE__ */ a.createElement(
+      x,
+      {
+        ...n,
+        transitionName: `zoom-${t}`,
+        animationExitingStyle: this.props.stackChildren ? Q : void 0
+      },
+      i
+    );
+  }
+}
+R.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
+};
+R.defaultProps = {
+  appear: !1,
+  enter: !0,
+  exit: !0,
+  transitionEnterDuration: 300,
+  transitionExitDuration: 300,
+  direction: "out",
+  stackChildren: !1
+};
+class $ extends a.Component {
+  constructor() {
+    super(...arguments), this.state = {
+      maxHeight: void 0,
+      maxWidth: void 0
+    }, this.componentWillEnter = (i) => {
+      const { onEnter: t, onBeforeEnter: n } = this.props;
+      n && n.call(void 0, i), this.updateContainerDimensions(i.animatedElement, () => {
+        t && t.call(void 0, i);
+      });
+    }, this.componentIsEntering = (i) => {
+      const { onEntering: t } = this.props;
+      this.updateContainerDimensions(i.animatedElement, () => {
+        t && t.call(void 0, i);
+      });
+    }, this.componentWillExit = (i) => {
+      const { onExit: t } = this.props;
+      this.updateContainerDimensions(i.animatedElement, () => {
+        t && t.call(void 0, i);
+      });
+    }, this.updateContainerDimensions = (i, t = v) => {
+      const n = i.firstChild;
+      if (n) {
+        const s = k.outerHeight(n), c = k.outerWidth(n);
+        this.setState(
+          {
+            maxHeight: s,
+            maxWidth: c
+          },
+          t
+        );
+      }
+    };
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const {
+      direction: i,
+      children: t,
+      childFactory: n,
+      ...s
+    } = this.props, {
+      maxHeight: c,
+      maxWidth: r
+    } = this.state;
+    let l;
+    i === "vertical" ? l = { maxHeight: c ? `${c}px` : "" } : l = { maxWidth: r ? `${r}px` : "" };
+    const d = {
+      maxHeight: l.maxHeight,
+      maxWidth: l.maxWidth
+    }, h = (u) => {
+      let p = n ? n(u) : u;
+      return p.props.in ? p : a.cloneElement(p, {
+        ...p.props,
+        style: {
+          ...p.props.style,
+          maxHeight: l.maxHeight,
+          maxWidth: l.maxWidth
+        }
+      });
+    };
+    return /* @__PURE__ */ a.createElement(
+      x,
+      {
+        ...s,
+        childFactory: h,
+        onEnter: this.componentWillEnter,
+        onEntering: this.componentIsEntering,
+        onExit: this.componentWillExit,
+        animationEnteringStyle: d,
+        transitionName: `reveal-${i}`
+      },
+      t
+    );
+  }
+}
+$.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
+};
+$.defaultProps = {
+  appear: !1,
+  enter: !0,
+  exit: !0,
+  transitionEnterDuration: 300,
+  transitionExitDuration: 300,
+  direction: "vertical"
+};
+const ie = (o, i) => {
+  const t = a.useRef(0), n = a.useRef(!1), s = a.useRef(), c = (r) => {
+    const l = r.duration;
+    let d, h, u = t.current && 1 - t.current;
+    r.onStart && r.onStart();
+    const p = (f) => {
+      d || (d = f), h = f - d + 1;
+      const m = h / l + u;
+      m <= 1 ? (r.onUpdate && r.onUpdate(m), s.current = window.requestAnimationFrame(p), t.current = m) : (r.onEnd && r.onEnd(1), t.current = 0);
+    };
+    s.current = window.requestAnimationFrame(p);
+  };
+  a.useEffect(
+    () => (c(o), () => {
+      s.current && window.cancelAnimationFrame(s.current);
+    }),
+    i
+  ), a.useEffect(
+    () => {
+      n.current = !0;
+    },
+    []
+  );
+};
+export {
+  x as Animation,
+  E as AnimationChild,
+  O as Expand,
+  D as Fade,
+  S as Push,
+  $ as Reveal,
+  T as Slide,
+  R as Zoom,
+  ie as useAnimation
+};

package/package-metadata.d.ts

@@ -0,0 +1,9 @@
+/**-----------------------------------------------------------------------------------------
+* Copyright © 2023 Progress Software Corporation. All rights reserved.
+* Licensed under commercial license. See LICENSE.md in the package root for more information
+*-------------------------------------------------------------------------------------------*/
+import { PackageMetadata } from '@progress/kendo-licensing';
+/**
+ * @hidden
+ */
+export declare const packageMetadata: PackageMetadata;