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

FSE UI components library

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