@anoki/fse-ui/dist/index.es253.js

FSE UI components library

import { j as o } from "./index.es278.js";
import d, { useState as E, useEffect as h, useCallback as I } from "react";
import './components/ui/TableOfContents/TableOfContents.css';/* empty css            */
import { useMediaQueryV2 as R } from "./index.es320.js";
import { clsx as x } from "./index.es280.js";
import { Row as k } from "./index.es219.js";
import { ArrowDown as C } from "./index.es19.js";
import { ScrollArea as A } from "./index.es500.js";
const O = ({
  title: w = "Indice",
  headings: l,
  titleTag: v = "h1",
  modeAuthenticated: b = !1,
  isOpen: m,
  onToggle: u = () => {
  }
}) => {
  const [g, f] = d.useState(""), [j, S] = E(0), p = R("(min-width: 768px)", !1), T = p || m, n = d.useRef(!1), i = d.useRef(null);
  h(() => {
    const t = () => {
      const r = window.scrollY, e = document.documentElement.scrollHeight - window.innerHeight, s = e > 0 ? Math.min(r / e * 100, 100) : 0;
      S(s);
    };
    return window.addEventListener("scroll", t), t(), () => window.removeEventListener("scroll", t);
  }, []);
  const a = I(
    (t) => {
      if (window.innerWidth < 768) return;
      const r = document.querySelector(
        `a[href="#${t}"]`
      ), e = document.querySelector(
        ".toc-scroll"
      );
      if (r && e) {
        const s = e.getBoundingClientRect(), c = r.getBoundingClientRect();
        if (!(c.top >= s.top && c.bottom <= s.bottom)) {
          const N = c.top - s.top, y = e.scrollTop + N - s.height / 2 + c.height / 2;
          e.scrollTo({
            top: y,
            behavior: "smooth"
          });
        }
      }
    },
    [p]
  );
  return h(() => {
    const t = new IntersectionObserver(
      (r) => {
        n.current || r.forEach((e) => {
          e.isIntersecting && (f(e.target.id), a(e.target.id));
        });
      },
      {
        rootMargin: "-90px 0px -70% 0px",
        threshold: 0
      }
    );
    return l.forEach(({ id: r }) => {
      const e = document.getElementById(r);
      e && t.observe(e);
    }), () => t.disconnect();
  }, [l, a]), /* @__PURE__ */ o.jsxs(
    "div",
    {
      className: x("toc-container", {
        "toc-container-authenticated": b
      }),
      children: [
        /* @__PURE__ */ o.jsx(
          "button",
          {
            className: "ui-button-accordion-toc",
            onClick: u,
            type: "button",
            children: /* @__PURE__ */ o.jsxs(k, { className: "ui-header-table-of-contents", children: [
              /* @__PURE__ */ o.jsx(v, { className: "text-slate-20 fw-semibold fs-7", children: w }),
              /* @__PURE__ */ o.jsx(
                C,
                {
                  color: "primary",
                  className: x("ui-arrow-toc", { "ui-expanded-toc": m })
                }
              )
            ] })
          }
        ),
        /* @__PURE__ */ o.jsx("div", { className: "scroll-progress-bar", children: /* @__PURE__ */ o.jsx(
          "div",
          {
            className: "scroll-progress",
            style: { width: `${j}%` }
          }
        ) }),
        T && /* @__PURE__ */ o.jsx(
          A,
          {
            type: "always",
            scrollbars: "vertical",
            className: "toc-scroll fw-semibold fs-6",
            children: /* @__PURE__ */ o.jsx("div", { className: "toc-list base-col", children: l.map((t) => /* @__PURE__ */ o.jsx("div", { className: "toc-item", children: /* @__PURE__ */ o.jsx(
              "a",
              {
                href: `#${t.id}`,
                className: `toc-link ${g === t.id ? "active text-primary" : "text-slate-28"}`,
                onClick: (r) => {
                  var e;
                  r.preventDefault(), f(t.id), n.current = !0, i.current && clearTimeout(i.current), i.current = setTimeout(() => {
                    n.current = !1;
                  }, 1e3), setTimeout(() => {
                    a(t.id);
                  }, 100), (e = document.getElementById(t.id)) == null || e.scrollIntoView({ behavior: "smooth" }), u();
                },
                children: t.text
              }
            ) }, t.id)) })
          }
        )
      ]
    }
  );
};
export {
  O as TableOfContents
};
//# sourceMappingURL=index.es253.js.map