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

FSE UI components library

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