@kunukn/react-collapse/dist/react-collapse.mjs

Collapse library based on CSS transition for React

import { jsx as V } from "react/jsx-runtime";
import { useReducer as _, useRef as D, useState as z, useEffect as B, useCallback as J } from "react";
const w = "collapsed", p = "collapsing", r = "expanding", a = "expanded", K = "collapse-css-transition", M = "div", Q = "0px";
function N(o) {
  requestAnimationFrame(function() {
    requestAnimationFrame(o);
  });
}
const O = ({
  children: o,
  transition: T,
  style: A,
  render: d,
  elementType: y = M,
  isOpen: n,
  collapseHeight: s = Q,
  onInit: L,
  onChange: P,
  className: v = K,
  addState: R,
  noAnim: h,
  overflowOnExpanded: S,
  ...F
}) => {
  const m = () => s === "0px" ? "hidden" : void 0, [W, u] = _((t) => t + 1, 0), i = D(), [b, l] = z(0), e = D({
    collapse: n ? a : w,
    style: {
      height: n ? void 0 : s,
      visibility: n ? void 0 : m()
    }
  }).current;
  B(() => {
    b && g(P);
  }, [b]);
  const g = (t, f = {}) => {
    t && t({ state: e.collapse, style: e.style, ...f });
  };
  function C() {
    i.current && (e.collapse = w, e.style = {
      height: s,
      visibility: m()
    }, u(), setTimeout(() => l(Date.now), 0));
  }
  function $() {
    if (i.current) {
      if (h)
        return C();
      e.collapse = p, e.style = {
        height: x(),
        visibility: void 0
      }, u(), N(() => {
        i.current && e.collapse === p && (e.style = {
          height: s,
          visibility: void 0
        }, l(Date.now));
      });
    }
  }
  function q() {
    if (i.current) {
      if (h)
        return E();
      e.collapse = r, N(() => {
        i.current && e.collapse === r && (e.style = {
          height: x(),
          visibility: void 0
        }, l(Date.now));
      });
    }
  }
  function E() {
    i.current && (e.collapse = a, e.style = {
      height: void 0,
      visibility: void 0
    }, u(), setTimeout(() => l(Date.now), 0));
  }
  function x() {
    return `${i.current.scrollHeight}px`;
  }
  function G({ target: t, propertyName: f }) {
    if (t === i.current && f === "height") {
      const c = t.style.height;
      switch (e.collapse) {
        case r:
          c === void 0 || c === s || E();
          break;
        case p:
          c === void 0 || c !== s || C();
          break;
      }
    }
  }
  const k = e.collapse === a || e.collapse === r;
  !k && n && q(), k && !n && $();
  const I = {
    overflow: e.collapse === a && S ? void 0 : "hidden",
    transition: T,
    ...A,
    ...e.style
  }, X = y, j = J(
    (t) => {
      t && (i.current = t, g(L, { node: t }));
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [y]
  ), U = R ? `${v} --c-${e.collapse}` : v;
  return (
    // @ts-ignore
    /* @__PURE__ */ V(
      X,
      {
        ref: j,
        style: I,
        onTransitionEnd: G,
        className: U,
        ...F,
        children: typeof o == "function" ? o(e.collapse) : typeof d == "function" ? d(e.collapse) : o
      }
    )
  );
};
export {
  O as Collapse
};
//# sourceMappingURL=react-collapse.mjs.map