@hakit/components/dist/es/Shared/AutoHeight/index.js

A series of components to work with @hakit/core

import { j as x } from "../../../emotion-react-jsx-runtime.browser.esm-BErL7L7Y.js";
import { useRef as l, useState as g, useLayoutEffect as H } from "react";
const $ = ({
  isOpen: u,
  children: y,
  duration: i = 300,
  className: d,
  style: A,
  onCollapseComplete: a
}) => {
  const h = l(null), [c, s] = g(u), [R, f] = g(!0), m = l(!1), t = l(null), r = l(null), n = l(!1);
  return H(() => {
    const e = h.current;
    if (e) {
      if (t.current && (clearTimeout(t.current), t.current = null), r.current && (cancelAnimationFrame(r.current), r.current = null), !m.current) {
        m.current = !0, u ? (s(!0), f(!1), e.style.height = "auto", n.current = !1) : (s(!1), n.current = !1);
        return;
      }
      if (!n.current) {
        if (u) {
          if (c && e.style.height === "auto")
            return;
          n.current = !0, s(!0), e.style.height = "0px", r.current = requestAnimationFrame(() => {
            const o = e.scrollHeight;
            f(!0), e.style.transition = `height ${i}ms ease`, e.style.height = `${o}px`, t.current = setTimeout(() => {
              e.style.transition = "", e.style.height = "auto", n.current = !1, t.current = null;
            }, i);
          });
        } else {
          if (!c)
            return;
          n.current = !0;
          const o = e.scrollHeight;
          e.style.height = `${o}px`, r.current = requestAnimationFrame(() => {
            f(!0), e.style.transition = `height ${i}ms ease`, e.style.height = "0px", t.current = setTimeout(() => {
              s(!1), n.current = !1, t.current = null, a && a();
            }, i);
          });
        }
        return () => {
          t.current && (clearTimeout(t.current), t.current = null), r.current && (cancelAnimationFrame(r.current), r.current = null), n.current = !1;
        };
      }
    }
  }, [u, i, a, c]), /* @__PURE__ */ x("div", { ref: h, className: d, style: {
    overflow: "hidden",
    height: u && !R ? "auto" : void 0,
    ...A
  }, children: c ? y : null });
};
export {
  $ as AutoHeight
};
//# sourceMappingURL=index.js.map