@nulib/clover 0.0.0-stage → 4.0.0-beta.1

package/dist/ui/Sections.mjs

@@ -0,0 +1,448 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useEffect, useLayoutEffect, createContext, useContext } from "react";
+import { useUniqueId } from "./useUniqueId.mjs";
+import { titleTag } from "./heading.mjs";
+import { Tip } from "./Tip.mjs";
+import { useContainerName } from "./useContainerName.mjs";
+import { useScrollTrack } from "./useScrollTrack.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+const SectionActionsContext = createContext(null);
+function useSectionActions() {
+  return useContext(SectionActionsContext);
+}
+const SectionOpenedContext = createContext(0);
+function useSectionOpened() {
+  return useContext(SectionOpenedContext);
+}
+function Sections({
+  items,
+  layout = "tabs",
+  value,
+  onValueChange,
+  label,
+  labelLang,
+  headingLevel = 3
+}) {
+  var _a;
+  const id = useUniqueId();
+  const name = useContainerName(label ?? "", labelLang, label === void 0);
+  const buttons = useRef([]);
+  const tabs = layout === "tabs";
+  const { t, langOf } = useCloverTranslation();
+  const track = useScrollTrack({ dragFree: true, itemCount: items.length });
+  const open = items.some((item) => item.value === value) ? value : ((_a = items[0]) == null ? void 0 : _a.value) ?? null;
+  const mounted = useRef(/* @__PURE__ */ new Set());
+  if (open) mounted.current.add(open);
+  const pressed = useRef(null);
+  const [opened, setOpened] = useState(
+    { value: null, count: 0 }
+  );
+  useEffect(() => {
+    var _a2;
+    if (tabs || !open || pressed.current !== open) return;
+    pressed.current = null;
+    const index = items.findIndex((item) => item.value === open);
+    const panel = document.getElementById(`${id}-panel-${index}`);
+    const heading = (_a2 = buttons.current[index]) == null ? void 0 : _a2.parentElement;
+    if (!panel || !heading) return;
+    const hidden = heading.getBoundingClientRect().bottom - panel.getBoundingClientRect().top;
+    if (hidden <= 0) return;
+    const scroller2 = scrollerOf(panel);
+    if (scroller2) scroller2.scrollTop -= hidden;
+  }, [open, tabs, items, id]);
+  const keepInSight = (event) => {
+    var _a2, _b, _c, _d;
+    const index = items.findIndex((item) => item.value === open);
+    const panel = document.getElementById(`${id}-panel-${index}`);
+    const target = event.target;
+    if (!panel || target === panel || !panel.contains(target)) return;
+    if (!focusShows(target)) return;
+    const above = (_b = (_a2 = buttons.current[index]) == null ? void 0 : _a2.parentElement) == null ? void 0 : _b.getBoundingClientRect();
+    const below = index + 1 < items.length ? (_d = (_c = buttons.current[index + 1]) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.getBoundingClientRect() : void 0;
+    if (!above) return;
+    const box = target.getBoundingClientRect();
+    const shift = box.top < above.bottom ? Math.floor(box.top - above.bottom) : below && box.bottom > below.top ? Math.ceil(Math.min(box.bottom - below.top, box.top - above.bottom)) : 0;
+    const scroller2 = shift ? scrollerOf(panel) : null;
+    if (scroller2) scroller2.scrollTop += shift;
+  };
+  const list = useRef(null);
+  const values = items.map((item) => item.value).join("\n");
+  useIsomorphicLayoutEffect(() => {
+    const root = list.current;
+    if (tabs || !root || typeof ResizeObserver === "undefined") return;
+    const sections = [
+      ...root.querySelectorAll(":scope > .clover-sections-item")
+    ];
+    const headings = sections.map((section) => section.firstElementChild);
+    const first = headings[0];
+    const last = headings[headings.length - 1];
+    const heights = /* @__PURE__ */ new Map();
+    const height = (heading) => (heading && heights.get(heading)) ?? 0;
+    const page = document.scrollingElement;
+    let scroller2 = null;
+    let insets = 0;
+    const measure = () => {
+      const total = headings.reduce((sum, heading) => sum + height(heading), 0);
+      let before = 0;
+      sections.forEach((section, index) => {
+        section.style.setProperty("--clover-sections-before", `${before}px`);
+        before += height(headings[index]);
+        section.style.setProperty(
+          "--clover-sections-after",
+          `${total - before}px`
+        );
+      });
+      root.style.setProperty("--clover-sections-total", `${total}px`);
+      const style = first && getComputedStyle(first);
+      if ((style == null ? void 0 : style.position) === "sticky" && last) {
+        insets = parseFloat(style.top) + parseFloat(getComputedStyle(last).bottom) || 0;
+      }
+      const text = getComputedStyle(root);
+      const line = parseFloat(text.lineHeight) || 1.2 * parseFloat(text.fontSize);
+      const room = (scroller2 == null ? void 0 : scroller2.clientHeight) ?? 0;
+      if (room > 0 && room - insets - total < 2 * line) {
+        root.dataset.stacks = "off";
+      } else {
+        delete root.dataset.stacks;
+      }
+    };
+    const observer = new ResizeObserver((entries) => {
+      var _a2, _b;
+      for (const entry of entries) {
+        if (!headings.includes(entry.target)) continue;
+        heights.set(
+          entry.target,
+          ((_b = (_a2 = entry.borderBoxSize) == null ? void 0 : _a2[0]) == null ? void 0 : _b.blockSize) ?? entry.target.getBoundingClientRect().height
+        );
+      }
+      measure();
+    });
+    const watch = () => {
+      const next = scrollerOf(root);
+      if (next === scroller2) return;
+      if (scroller2 && scroller2 !== page) observer.unobserve(scroller2);
+      if (next && next !== page) observer.observe(next);
+      scroller2 = next;
+    };
+    const resize = () => {
+      watch();
+      measure();
+    };
+    watch();
+    for (const heading of headings) {
+      if (heading) observer.observe(heading, { box: "border-box" });
+    }
+    window.addEventListener("resize", resize);
+    return () => {
+      observer.disconnect();
+      window.removeEventListener("resize", resize);
+      for (const section of sections) {
+        section.style.removeProperty("--clover-sections-before");
+        section.style.removeProperty("--clover-sections-after");
+      }
+      root.style.removeProperty("--clover-sections-total");
+      delete root.dataset.stacks;
+    };
+  }, [tabs, values, headingLevel]);
+  useEffect(() => {
+    if (tabs) return;
+    const headings = buttons.current.map((button2) => button2 == null ? void 0 : button2.parentElement).filter((heading) => Boolean(heading));
+    const onWheel = (event) => {
+      var _a2;
+      if (event.ctrlKey) return;
+      const heading = event.currentTarget;
+      const inner = scrolling(heading);
+      if (!inner || inner === document.scrollingElement) return;
+      event.preventDefault();
+      const unit = event.deltaMode === 1 ? parseFloat(getComputedStyle(heading).lineHeight) || 16 : event.deltaMode === 2 ? inner.clientHeight : 1;
+      (_a2 = scrolling(inner) ?? document.scrollingElement) == null ? void 0 : _a2.scrollBy({
+        left: event.deltaX * unit,
+        top: event.deltaY * unit,
+        behavior: "instant"
+      });
+    };
+    for (const heading of headings)
+      heading.addEventListener("wheel", onWheel, { passive: false });
+    return () => {
+      for (const heading of headings)
+        heading.removeEventListener("wheel", onWheel);
+    };
+  }, [tabs, values]);
+  const choose = (item) => {
+    if (item === open) return;
+    pressed.current = item;
+    if (!tabs) setOpened((last) => ({ value: item, count: last.count + 1 }));
+    onValueChange == null ? void 0 : onValueChange(item);
+  };
+  const onKeyDown = (event, index) => {
+    var _a2;
+    const last = items.length - 1;
+    const [back, forward] = tabs ? ["ArrowLeft", "ArrowRight"] : ["ArrowUp", "ArrowDown"];
+    const next = event.key === forward ? (index + 1) % items.length : event.key === back ? (index - 1 + items.length) % items.length : event.key === "Home" ? 0 : event.key === "End" ? last : null;
+    if (next === null) return;
+    event.preventDefault();
+    (_a2 = buttons.current[next]) == null ? void 0 : _a2.focus();
+    if (tabs) choose(items[next].value);
+  };
+  const placed = useRef(false);
+  useEffect(() => {
+    if (!tabs) return;
+    const index = items.findIndex((item) => item.value === open);
+    const tab = buttons.current[index];
+    const row = tab == null ? void 0 : tab.parentElement;
+    if (!tab || !row) return;
+    const style = getComputedStyle(row);
+    const room = row.getBoundingClientRect();
+    const box = tab.getBoundingClientRect();
+    const start = room.left + (parseFloat(style.scrollPaddingLeft) || 0);
+    const end = room.right - (parseFloat(style.scrollPaddingRight) || 0);
+    if (box.left < start - 1 || box.right > end + 1)
+      track.scrollToIndex(index, { instant: !placed.current });
+    placed.current = true;
+  }, [open, tabs, items.length, track.scrollToIndex]);
+  const scroller = (step) => {
+    const more = step === "prev" ? track.canScrollPrev : track.canScrollNext;
+    const key = step === "prev" ? "sectionsScrollBack" : "sectionsScrollForward";
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `clover-sections-scroll-${step}`,
+        "aria-hidden": "true",
+        tabIndex: -1,
+        hidden: !more,
+        lang: langOf(key),
+        onMouseDown: (event) => event.preventDefault(),
+        onClick: step === "prev" ? track.scrollPrev : track.scrollNext,
+        children: [
+          /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              focusable: "false",
+              width: "16",
+              height: "16",
+              viewBox: "0 0 16 16",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: step === "next" ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(Tip, { label: t(key) })
+        ]
+      }
+    );
+  };
+  const Heading = titleTag(headingLevel, "div");
+  const button = (item, index) => {
+    const isOpen = item.value === open;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (element) => {
+          buttons.current[index] = element;
+        },
+        type: "button",
+        id: `${id}-button-${index}`,
+        className: "clover-sections-button",
+        "data-value": item.value,
+        "data-track-index": tabs ? index : void 0,
+        "aria-controls": `${id}-panel-${index}`,
+        ...tabs ? {
+          role: "tab",
+          "aria-selected": isOpen,
+          tabIndex: isOpen ? 0 : -1
+        } : {
+          "aria-expanded": isOpen,
+          // WAI-ARIA's accordion: an open panel that cannot collapse is disabled.
+          "aria-disabled": isOpen || void 0
+        },
+        onClick: () => choose(item.value),
+        onKeyDown: (event) => onKeyDown(event, index),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "clover-sections-label", children: item.label }),
+          !tabs && !isOpen && /* @__PURE__ */ jsx(
+            "svg",
+            {
+              "aria-hidden": "true",
+              focusable: "false",
+              width: "12",
+              height: "12",
+              viewBox: "0 0 12 12",
+              className: "clover-sections-chevron",
+              children: /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: "M3 4.5l3 3 3-3",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "1.5",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round"
+                }
+              )
+            }
+          )
+        ]
+      },
+      item.value
+    );
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: list,
+      className: "clover-sections",
+      "data-layout": layout,
+      onFocus: tabs ? void 0 : keepInSight,
+      style: tabs ? void 0 : {
+        "--clover-sections-count": items.length
+      },
+      children: [
+        tabs && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "clover-sections-tabs",
+            "data-more": [track.canScrollPrev && "start", track.canScrollNext && "end"].filter(Boolean).join(" ") || void 0,
+            children: /* @__PURE__ */ jsxs("div", { className: "clover-sections-row", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  role: "tablist",
+                  ref: track.ref,
+                  ...name.props,
+                  className: "clover-sections-list",
+                  children: items.map(button)
+                }
+              ),
+              scroller("prev"),
+              scroller("next")
+            ] })
+          }
+        ),
+        tabs && name.node,
+        items.map((item, index) => {
+          const isOpen = item.value === open;
+          return /* @__PURE__ */ jsxs(
+            "section",
+            {
+              className: "clover-sections-item",
+              "data-value": item.value,
+              "data-open": isOpen,
+              style: tabs ? void 0 : {
+                "--clover-sections-index": index
+              },
+              children: [
+                !tabs && /* @__PURE__ */ jsxs(Heading, { className: "clover-sections-heading", children: [
+                  button(item, index),
+                  /* @__PURE__ */ jsx("span", { className: "clover-sections-reach", "aria-hidden": "true" })
+                ] }),
+                /* @__PURE__ */ jsx(
+                  SectionOpenedContext.Provider,
+                  {
+                    value: opened.value === item.value ? opened.count : 0,
+                    children: /* @__PURE__ */ jsx(
+                      Panel,
+                      {
+                        id: `${id}-panel-${index}`,
+                        tabs,
+                        labelledBy: `${id}-button-${index}`,
+                        hidden: !isOpen,
+                        children: mounted.current.has(item.value) ? item.content : null
+                      }
+                    )
+                  }
+                )
+              ]
+            },
+            item.value
+          );
+        })
+      ]
+    }
+  );
+}
+function Panel({
+  id,
+  tabs,
+  labelledBy,
+  hidden,
+  children
+}) {
+  const [actions, setActions] = useState(null);
+  useIsomorphicLayoutEffect(() => {
+    const section = actions == null ? void 0 : actions.parentElement;
+    if (hidden || !actions || !section || typeof ResizeObserver === "undefined")
+      return;
+    const observer = new ResizeObserver(() => {
+      const width = actions.offsetWidth;
+      if (width) {
+        section.style.setProperty("--clover-sections-actions", `${width}px`);
+      } else {
+        section.style.removeProperty("--clover-sections-actions");
+      }
+    });
+    observer.observe(actions);
+    return () => {
+      observer.disconnect();
+      section.style.removeProperty("--clover-sections-actions");
+    };
+  }, [actions, hidden]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !tabs && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setActions,
+        className: "clover-sections-actions",
+        hidden
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id,
+        role: tabs ? "tabpanel" : "region",
+        "aria-labelledby": labelledBy,
+        tabIndex: tabs ? 0 : void 0,
+        className: "clover-sections-panel",
+        hidden,
+        children: /* @__PURE__ */ jsx(SectionActionsContext.Provider, { value: tabs ? null : actions, children })
+      }
+    )
+  ] });
+}
+function scrollerOf(node) {
+  for (let at = node.parentElement; at && at !== document.body; at = at.parentElement) {
+    if (/auto|scroll|hidden/.test(getComputedStyle(at).overflowY)) return at;
+  }
+  return document.scrollingElement;
+}
+function scrolling(node) {
+  for (let at = node.parentElement; at && at !== document.body; at = at.parentElement) {
+    if (/auto|scroll/.test(getComputedStyle(at).overflowY) && at.scrollHeight > at.clientHeight)
+      return at;
+  }
+  return document.scrollingElement;
+}
+function focusShows(node) {
+  try {
+    return node.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
+export {
+  Sections,
+  useSectionActions,
+  useSectionOpened
+};

package/dist/ui/Steps.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { join } from "../lib/classnames.mjs";
+import { Tip } from "./Tip.mjs";
+import { visuallyHidden } from "./visuallyHidden.mjs";
+function Steps({
+  steps,
+  sentence,
+  className
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const { position, total } = steps;
+  if (total < 1) return null;
+  const current = position + 1;
+  return /* @__PURE__ */ jsxs("div", { className: join("clover-steps", className), children: [
+    /* @__PURE__ */ jsxs("span", { "aria-live": "polite", className: "clover-steps-position", children: [
+      /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+        current > 0 ? current : "–",
+        " / ",
+        total
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "clover-steps-room", "aria-hidden": "true", hidden: true, children: [
+        total,
+        " / ",
+        total
+      ] }),
+      current > 0 && /* @__PURE__ */ jsx("span", { style: visuallyHidden, lang: langOf(sentence), children: t(sentence, { index: current, total }) })
+    ] }),
+    /* @__PURE__ */ jsx(Step, { steps, step: "previous" }),
+    /* @__PURE__ */ jsx(Step, { steps, step: "next" })
+  ] });
+}
+function Step({
+  steps,
+  step
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const isNext = step === "next";
+  const available = isNext ? steps.position + 1 < steps.total : steps.position > 0;
+  const key = isNext ? "commonNext" : "commonPrevious";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "clover-steps-step",
+      "data-step": step,
+      lang: langOf(key),
+      "aria-disabled": !available || void 0,
+      tabIndex: available ? void 0 : -1,
+      onClick: () => {
+        if (available) steps.step(isNext ? 1 : -1);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "aria-hidden": "true",
+            focusable: "false",
+            width: "12",
+            height: "12",
+            viewBox: "0 0 16 16",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: isNext ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: t(key) }),
+        /* @__PURE__ */ jsx(Tip, { label: t(key) })
+      ]
+    }
+  );
+}
+export {
+  Steps
+};