@clubmed/trident-ui/molecules/Tabs/TabPanel.js

Shared ClubMed React UI components

"use client";
import { jsx as p } from "react/jsx-runtime";
import { c as d } from "../../chunks/index.js";
import { useRef as l, useEffect as f } from "react";
import { useSpring as u, animated as b } from "@react-spring/web";
import { useActiveTab as y } from "./hooks/tabControl.js";
const a = {
  opacity: 0,
  pointerEvents: "none",
  display: "none"
}, n = {
  opacity: 1,
  pointerEvents: "auto",
  display: "block"
}, R = ({
  value: o,
  className: i,
  onSelect: e,
  children: c
}) => {
  const r = l(!1), t = y() === o, [m, s] = u(() => ({
    from: t ? n : a
  }));
  return f(() => {
    if (!r.current) {
      r.current = !0;
      return;
    }
    s.start({
      to: {
        ...t ? n : a,
        display: "block"
      },
      onRest: () => {
        s.start({
          to: { display: t ? "block" : "none" },
          immediate: !0
        });
      }
    }), t && (e == null || e({ value: o }));
  }, [t, s, o, e]), /* @__PURE__ */ p(
    b.div,
    {
      "data-name": "Tab",
      style: m,
      role: "tabpanel",
      "aria-hidden": !t,
      tabIndex: t ? 0 : -1,
      className: d("col-start-1 col-end-1 row-start-1 row-end-1", i, {
        "z-0": !t,
        "z-1": t
      }),
      children: c
    }
  );
};
export {
  R as TabPanel
};
//# sourceMappingURL=TabPanel.js.map