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

FSE UI components library

import { j as s } from "./index.es180.js";
import f, { useState as w, useEffect as i } from "react";
import './components/ui/TableOfContents/TableOfContents.css';/* empty css            */
import { useMediaQuery as v } from "./index.es198.js";
import { clsx as b } from "./index.es182.js";
import { Row as j } from "./index.es9.js";
import { ArrowDown as N } from "./index.es113.js";
import { ScrollArea as g } from "./index.es309.js";
const H = ({
  title: n = "Indice",
  headings: r,
  titleTag: a = "h3",
  isOpen: c,
  onToggle: l = () => {
  }
}) => {
  const [d, m] = f.useState(""), [p, x] = w(0), h = v("(min-width: 768px)") || c;
  return i(() => {
    const e = () => {
      const o = window.scrollY, t = document.documentElement.scrollHeight - window.innerHeight, u = t > 0 ? Math.min(o / t * 100, 100) : 0;
      x(u);
    };
    return window.addEventListener("scroll", e), e(), () => window.removeEventListener("scroll", e);
  }, []), i(() => {
    const e = new IntersectionObserver(
      (o) => {
        o.forEach((t) => {
          t.isIntersecting && m(t.target.id);
        });
      },
      {
        rootMargin: "-100px 0px -50% 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: "toc-container", children: [
    /* @__PURE__ */ s.jsx(
      "button",
      {
        className: "ui-button-accordion-toc",
        onClick: l,
        type: "button",
        children: /* @__PURE__ */ s.jsxs(j, { className: "ui-header-table-of-contents", children: [
          /* @__PURE__ */ s.jsx(a, { className: "text-slate-20 fw-semibold fs-7", children: n }),
          /* @__PURE__ */ s.jsx(
            N,
            {
              color: "primary",
              className: b("ui-arrow-toc", { "ui-expanded-toc": c })
            }
          )
        ] })
      }
    ),
    /* @__PURE__ */ s.jsx("div", { className: "scroll-progress-bar", children: /* @__PURE__ */ s.jsx(
      "div",
      {
        className: "scroll-progress",
        style: { width: `${p}%` }
      }
    ) }),
    h && /* @__PURE__ */ s.jsx(
      g,
      {
        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 ${d === e.id ? "active text-primary" : "text-slate-28"}`,
            onClick: (o) => {
              var t;
              o.preventDefault(), (t = document.getElementById(e.id)) == null || t.scrollIntoView({ behavior: "smooth" }), l();
            },
            children: e.text
          }
        ) }, e.id)) })
      }
    )
  ] });
};
export {
  H as TableOfContents
};
//# sourceMappingURL=index.es100.js.map