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

package/dist/ui/HideToggle.mjs

@@ -0,0 +1,57 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useUniqueId } from "./useUniqueId.mjs";
+import { Tip } from "./Tip.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+function HideToggle({
+  hidden,
+  onChange,
+  of
+}) {
+  const { t, langOf } = useCloverTranslation();
+  const id = useUniqueId();
+  const key = of ? "annotationsHideTip" : "annotationsHide";
+  return /* @__PURE__ */ jsxs("label", { className: "clover-hide", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "checkbox",
+        checked: hidden,
+        "aria-labelledby": of ? `${id} ${of}` : id,
+        onChange: (event) => onChange(event.target.checked)
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: 14,
+        height: 14,
+        viewBox: "0 0 512 512",
+        "aria-hidden": "true",
+        focusable: "false",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 40,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ jsx("path", { d: "M32 256s80-144 224-144 224 144 224 144-80 144-224 144S32 256 32 256z" }),
+          /* @__PURE__ */ jsx("circle", { cx: 256, cy: 256, r: 72 }),
+          hidden && /* @__PURE__ */ jsx("path", { d: "M80 80l352 352" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { id, hidden: true, lang: langOf(key), children: t(key) }),
+    /* @__PURE__ */ jsx(
+      Tip,
+      {
+        label: t("annotationsHideTip"),
+        lang: langOf("annotationsHideTip")
+      }
+    )
+  ] });
+}
+export {
+  HideToggle
+};

package/dist/ui/Loading.mjs

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { join } from "../lib/classnames.mjs";
+function Loading({
+  overlay = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: join("clover-loading", className),
+      "data-overlay": overlay || void 0,
+      children: /* @__PURE__ */ jsx("span", {})
+    }
+  );
+}
+export {
+  Loading
+};

package/dist/ui/Markup.mjs

@@ -0,0 +1,95 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { forwardRef, useState, useEffect } from "react";
+import { readAs, markdownToPlainText, toPlainText, hasMarkup } from "../core/text.mjs";
+import { localize } from "../core/value.mjs";
+import { directionOf } from "../core/direction.mjs";
+function useSanitized(text, markdown = false, headingLevel = 3) {
+  const markup = markdown || hasMarkup(text);
+  const key = markdown ? `${headingLevel}
+${text}` : text;
+  const [html, setHtml] = useState(null);
+  useEffect(() => {
+    if (!markup) return;
+    let live = true;
+    Promise.all([
+      import("../core/sanitize.mjs"),
+      markdown ? import("../core/markdown.mjs") : null
+    ]).then(([{ sanitizeHTML }, md]) => {
+      const source = md ? md.markdownToHtml(text, { headingLevel }) : text;
+      if (live)
+        setHtml({ for: key, html: sanitizeHTML(source, { markdown: !!md }) });
+    });
+    return () => {
+      live = false;
+    };
+  }, [text, key, markup, markdown, headingLevel]);
+  return markup && (html == null ? void 0 : html.for) === key ? html.html : null;
+}
+const Markup = forwardRef(function Markup2({ as: Tag = "span", markup, language, format, headingLevel, ...rest }, ref) {
+  const { text, lang } = localize(markup, language);
+  const dir = directionOf(lang);
+  const kind = readAs(format, text);
+  const markdown = kind === "markdown";
+  const html = useSanitized(
+    kind === "plain" ? "" : text,
+    markdown,
+    headingLevel
+  );
+  if (!text) return null;
+  if (kind === "plain")
+    return /* @__PURE__ */ jsx(Tag, { ref, ...rest, lang, dir, children: text.split(/\r?\n/).map((line, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx("br", {}),
+      line
+    ] }, index)) });
+  return html !== null ? /* @__PURE__ */ jsx(
+    Tag,
+    {
+      ref,
+      ...rest,
+      lang,
+      dir,
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  ) : (
+    // Until the sanitizer arrives, Markdown shows without its syntax.
+    /* @__PURE__ */ jsx(Tag, { ref, ...rest, lang, dir, children: markdown ? markdownToPlainText(text) : toPlainText(text) })
+  );
+});
+const MetadataList = ({
+  metadata,
+  language,
+  renderValue,
+  ...rest
+}) => {
+  if (!(metadata == null ? void 0 : metadata.length)) return null;
+  return /* @__PURE__ */ jsx("dl", { ...rest, children: metadata.map((item, index) => {
+    const label = localize(item.label, language);
+    const custom = renderValue == null ? void 0 : renderValue(item);
+    return (
+      // `dl` accepts a plain `div` around each pair, keeping dt and dd associated.
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-label": localize(item.label, "none").text.replace(/\s+/g, "-").toLowerCase(),
+          children: [
+            /* @__PURE__ */ jsx("dt", { lang: label.lang, children: label.text }),
+            custom !== void 0 ? /* @__PURE__ */ jsx("dd", { children: custom }) : /* @__PURE__ */ jsx(
+              Markup,
+              {
+                as: "dd",
+                markup: item.value,
+                language
+              }
+            )
+          ]
+        },
+        index
+      )
+    );
+  }) });
+};
+export {
+  Markup,
+  MetadataList
+};

package/dist/ui/ReadMore.mjs

@@ -0,0 +1,84 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
+import { useUniqueId } from "./useUniqueId.mjs";
+import { useCloverTranslation } from "../i18n/useCloverTranslation.mjs";
+import { useRootLanguage } from "../react/language.mjs";
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
+function ReadMore({ children }) {
+  const { t } = useCloverTranslation();
+  const own = useRootLanguage();
+  const ref = useRef(null);
+  const fallbackId = useUniqueId();
+  const child = React.Children.only(children);
+  const id = child.props.id ?? fallbackId;
+  const { open, cut, toggle } = useReadMore(ref);
+  return /* @__PURE__ */ jsxs("div", { className: "clover-read-more", children: [
+    React.cloneElement(
+      child,
+      {
+        ref,
+        id,
+        "data-read-more": open ? "open" : ""
+      }
+    ),
+    (cut || open) && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "clover-read-more-button",
+        "aria-expanded": open,
+        "aria-controls": id,
+        onClick: toggle,
+        ref: own.ref,
+        lang: own.langOf(open ? "readLess" : "readMore"),
+        children: open ? t("readLess") : t("readMore")
+      }
+    )
+  ] });
+}
+function useReadMore(ref) {
+  const [open, setOpen] = useState(false);
+  const [cut, setCut] = useState(false);
+  const measure = () => {
+    const node = ref.current;
+    if (node && !open) setCut(node.scrollHeight > node.clientHeight + 1);
+  };
+  useIsomorphicLayoutEffect(measure);
+  useEffect(() => {
+    var _a, _b;
+    const node = ref.current;
+    if (!node) return;
+    let frame = 0;
+    const again = () => {
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(measure);
+    };
+    const resized = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(again);
+    resized == null ? void 0 : resized.observe(node);
+    const styled = typeof MutationObserver === "undefined" ? null : new MutationObserver(again);
+    styled == null ? void 0 : styled.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    styled == null ? void 0 : styled.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["style", "class"]
+    });
+    styled == null ? void 0 : styled.observe(node, { attributes: true, attributeFilter: ["style"] });
+    (_b = (_a = document.fonts) == null ? void 0 : _a.addEventListener) == null ? void 0 : _b.call(_a, "loadingdone", again);
+    return () => {
+      var _a2, _b2;
+      cancelAnimationFrame(frame);
+      resized == null ? void 0 : resized.disconnect();
+      styled == null ? void 0 : styled.disconnect();
+      (_b2 = (_a2 = document.fonts) == null ? void 0 : _a2.removeEventListener) == null ? void 0 : _b2.call(_a2, "loadingdone", again);
+    };
+  }, [open, ref.current]);
+  return { open, cut, toggle: () => setOpen((value) => !value) };
+}
+export {
+  ReadMore,
+  useReadMore
+};