koval-ui/dist/src/internal/Transitions/Transition.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { useState as S, useMemo as f } from "react";
import { useEventListener as y } from "../hooks/useEventListener.js";
import { useIsFirstRender as I } from "../hooks/useIsFirstRender.js";
import { useSafeLayoutEffect as x } from "../hooks/useSafeLayoutEffect.js";
const k = ({
  show: r = !1,
  children: v,
  exitClassName: o = "transition-exit",
  exitDoneClassName: u = "transition-exit-done",
  enterClassName: l = "transition-enter",
  enterDoneClassName: m = "transition-enter-done",
  nodeRef: t,
  unmountNode: D,
  onExit: E = () => {
  },
  onEnter: A = () => {
  }
}) => {
  const F = I(), [a, L] = S(r);
  x(() => {
    r && L(r);
  }, [r]);
  const e = f(
    () => ({
      enter: l.split(" "),
      exit: o.split(" "),
      exitDone: u.split(" "),
      enterDone: m.split(" ")
    }),
    [l, m, o, u]
  );
  return x(() => {
    var s, i, n, c, d, p;
    r ? ((s = t.current) == null || s.classList.add(...e.enter), (i = t.current) == null || i.classList.remove(...e.exit), (n = t.current) == null || n.classList.remove(...e.exitDone)) : ((c = t.current) == null || c.classList.add(...e.exit), (d = t.current) == null || d.classList.remove(...e.enter), (p = t.current) == null || p.classList.remove(...e.enterDone));
  }, [e, t, r, a, F]), y("animationend", () => {
    var s, i, n, c;
    r && a ? (A(), (s = t.current) == null || s.classList.remove(...e.enter), (i = t.current) == null || i.classList.add(...e.enterDone)) : a && (E(), (n = t.current) == null || n.classList.remove(...e.exit), (c = t.current) == null || c.classList.add(...e.exitDone), L(!1));
  }, t.current), (a || !D) && v;
};
export {
  k as Transition
};
//# sourceMappingURL=Transition.js.map