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