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

package/dist/components/Items/Items.mjs

@@ -0,0 +1,455 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, Suspense, lazy, useRef, useEffect } from "react";
+import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { ItemFigure } from "./Item.mjs";
+import { ItemsPager } from "./Pager.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { itemsOfCollection, itemsOfManifest } from "../../core/items.mjs";
+import { selectPosition, selectSequence } from "../../core/selectors.mjs";
+import { localize } from "../../core/value.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useOptionalClover, useCloverSelector } from "../../react/context.mjs";
+import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
+import { useRootLanguage } from "../../react/language.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+import { titleTag } from "../../ui/heading.mjs";
+import { useRovingFocus } from "../../ui/useRovingFocus.mjs";
+import { useScrollTrack } from "../../ui/useScrollTrack.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+const Items = forwardRef(
+  function Items2(props, ref) {
+    const root = useOptionalClover();
+    const standalone = !root || props.iiifContent !== void 0 || props.items !== void 0;
+    return standalone ? /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(StandaloneItems, { ...props, forwardedRef: ref }) }) : /* @__PURE__ */ jsx(ConnectedItems, { ...props, forwardedRef: ref });
+  }
+);
+const StandaloneItems = lazy(() => import("./StandaloneItems.mjs"));
+function ConnectedItems({ of = "views", ...props }) {
+  return of === "members" ? /* @__PURE__ */ jsx(MemberItems, { ...props }) : /* @__PURE__ */ jsx(ViewItems, { ...props });
+}
+function MemberItems({
+  onSelect,
+  forwardedRef,
+  ...rest
+}) {
+  const { clover, language } = useOptionalClover();
+  const collection = useCloverSelector((state) => state.collection);
+  const manifestId = useCloverSelector((state) => {
+    var _a;
+    return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
+  });
+  const items = itemsOfCollection(collection);
+  if (!items.length) return null;
+  const choose = (item, event) => {
+    onSelect == null ? void 0 : onSelect(item, event);
+    void clover.goToManifest(item.id);
+  };
+  if (rest.layout === "pager") {
+    const position = items.findIndex((item) => item.id === manifestId);
+    return /* @__PURE__ */ jsx(
+      Pager,
+      {
+        ...rest,
+        forwardedRef,
+        steps: stepsOf(items, position, "left-to-right", choose)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ItemsView,
+    {
+      ...rest,
+      forwardedRef,
+      items,
+      selected: items.findIndex((item) => item.id === manifestId),
+      navigation: "id",
+      language,
+      request: clover.request,
+      showSummary: true,
+      onActivate: choose
+    }
+  );
+}
+function ViewItems({
+  onSelect,
+  forwardedRef,
+  ...rest
+}) {
+  const { clover, language } = useOptionalClover();
+  const manifest = useCloverSelector((state) => state.manifest);
+  const position = useCloverSelector(
+    (state) => selectPosition(state.manifest, state.canvasId)
+  );
+  const direction = useCloverSelector(
+    (state) => selectSequence(state.manifest).direction
+  );
+  const items = itemsOfManifest(manifest);
+  if (items.length < 2) return null;
+  const select = (item) => clover.goTo(item.id);
+  if (rest.layout === "pager") {
+    return /* @__PURE__ */ jsx(
+      Pager,
+      {
+        ...rest,
+        forwardedRef,
+        steps: stepsOf(items, position, direction, select)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    ItemsView,
+    {
+      ...rest,
+      forwardedRef,
+      items,
+      selected: position,
+      navigation: "id",
+      rtl: direction === "right-to-left",
+      language,
+      request: clover.request,
+      onActivate: (item, event) => {
+        onSelect == null ? void 0 : onSelect(item, event);
+        clover.goTo(item.id);
+      },
+      followFocus: select
+    }
+  );
+}
+function stepsOf(items, selected, direction, go) {
+  return {
+    position: selected,
+    total: items.length,
+    direction,
+    step: (by, event) => {
+      const item = items[selected + by];
+      if (item) go(item, event);
+    }
+  };
+}
+function Pager({
+  steps,
+  forwardedRef,
+  /* eslint-disable @typescript-eslint/no-unused-vars -- Items' own, not the nav's */
+  layout,
+  thumbnailSize,
+  renderItem,
+  header,
+  headingLevel,
+  request,
+  language,
+  navigation,
+  of,
+  /* eslint-enable @typescript-eslint/no-unused-vars */
+  ...rest
+}) {
+  const root = useRootLanguage(forwardedRef, rest.lang);
+  return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsx(
+    ItemsPager,
+    {
+      ...rest,
+      steps,
+      forwardedRef: root.ref,
+      hostLanguage: root.hostLanguage
+    }
+  ) });
+}
+function ItemsView({
+  forwardedRef,
+  items,
+  selected,
+  navigation,
+  rtl = false,
+  layout = "slider",
+  thumbnailSize = 200,
+  request,
+  language,
+  showSummary = false,
+  heading,
+  headingLevel = 2,
+  renderItem,
+  onActivate,
+  followFocus,
+  as: Tag = "section",
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  var _a;
+  const { t } = useCloverTranslation();
+  const id = useUniqueId();
+  const root = useRootLanguage(forwardedRef, rest.lang);
+  const { langOf } = root;
+  const slider = layout === "slider";
+  const listbox = navigation === "id";
+  const track = useScrollTrack({
+    align: listbox ? "center" : "start",
+    itemCount: items.length
+  });
+  const held = useRef(void 0);
+  useEffect(() => () => window.clearTimeout(held.current), []);
+  const roving = useRovingFocus(items.length, selected, {
+    orientation: layout === "slider" ? "horizontal" : layout === "list" ? "vertical" : "both",
+    rtl,
+    onActivate: (index, event) => onActivate(items[index], event),
+    onMove: followFocus ? (index, event) => {
+      window.clearTimeout(held.current);
+      const select = () => followFocus(items[index]);
+      if (event.repeat) held.current = window.setTimeout(select, 150);
+      else select();
+    } : void 0
+  });
+  const listRef = useRef(null);
+  const hadFocus = useRef(false);
+  hadFocus.current = Boolean(
+    (_a = listRef.current) == null ? void 0 : _a.contains(listRef.current.ownerDocument.activeElement)
+  );
+  useEffect(() => {
+    var _a2;
+    const list = listRef.current;
+    if (!list || !hadFocus.current) return;
+    const { activeElement, body } = list.ownerDocument;
+    if (activeElement && activeElement !== body) return;
+    (_a2 = list.querySelector(
+      `[data-track-index="${Math.max(0, selected)}"]`
+    )) == null ? void 0 : _a2.focus();
+  }, [items]);
+  const arrived = useRef(false);
+  useEffect(() => {
+    var _a2;
+    if (selected < 0) return;
+    const instant = !arrived.current;
+    arrived.current = true;
+    if (slider) {
+      track.scrollToIndex(selected, { instant });
+      return;
+    }
+    const option = (_a2 = listRef.current) == null ? void 0 : _a2.querySelector(
+      `[data-track-index="${selected}"]`
+    );
+    if (option) keepInView(option, instant);
+  }, [slider, selected]);
+  const Title = titleTag(headingLevel);
+  const headingLabel = heading ? localize(heading.label, language) : null;
+  const headingSummary = heading ? localize(heading.summary, language) : null;
+  const titled = ariaLabel === void 0 && Boolean(headingLabel == null ? void 0 : headingLabel.text);
+  const fallbackName = useContainerName(
+    t("itemsLabel"),
+    langOf("itemsLabel"),
+    ariaLabel !== void 0 || titled,
+    root.hostLanguage
+  );
+  const listName = titled ? { "aria-labelledby": `${id}-title` } : ariaLabel !== void 0 ? { "aria-label": ariaLabel } : fallbackName.props;
+  const figure = (item, isSelected) => renderItem ? renderItem(item, { selected: isSelected }) : /* @__PURE__ */ jsx(
+    ItemFigure,
+    {
+      item,
+      size: thumbnailSize,
+      language,
+      request,
+      showSummary
+    }
+  );
+  const positioned = (item) => !(renderItem || localize(item.label, language).text || showSummary && localize(item.summary, language).text);
+  const positionName = (item, index) => positioned(item) ? t("canvasPosition", { index: index + 1, total: items.length }) : void 0;
+  const positionLang = (item) => positioned(item) ? langOf("canvasPosition") : void 0;
+  const trackStyle = slider ? { display: "flex", margin: 0, padding: 0, listStyle: "none" } : void 0;
+  const slideStyle = slider ? { flex: "0 0 auto", scrollSnapAlign: listbox ? "center" : "start" } : void 0;
+  const stepping = listbox && selected >= 0;
+  const scrollButton = (step) => {
+    const to = selected + (step === "prev" ? -1 : 1);
+    const can = stepping ? to >= 0 && to < items.length : step === "prev" ? track.canScrollPrev : track.canScrollNext;
+    const labelKey = stepping ? step === "prev" ? "commonPrevious" : "commonNext" : step === "prev" ? "itemsScrollBack" : "itemsScrollForward";
+    const label = t(labelKey);
+    const onClick = (event) => {
+      if (!can) return;
+      if (!stepping)
+        return (step === "prev" ? track.scrollPrev : track.scrollNext)();
+      const item = items[to];
+      if (followFocus) followFocus(item);
+      else onActivate(item, event);
+    };
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: `clover-items-scroll-${step}`,
+        "aria-controls": stepping ? void 0 : `${id}-viewport`,
+        lang: langOf(labelKey),
+        "aria-disabled": !can || void 0,
+        tabIndex: can ? void 0 : -1,
+        onClick,
+        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" !== rtl ? "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: label }),
+          /* @__PURE__ */ jsx(Tip, { label })
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx(HostLanguageContext.Provider, { value: root.hostLanguage, children: /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: root.ref,
+      className: join("clover-items", className),
+      "data-layout": layout,
+      "data-navigation": navigation,
+      ...rest,
+      children: [
+        heading && ((headingLabel == null ? void 0 : headingLabel.text) || (headingSummary == null ? void 0 : headingSummary.text)) && /* @__PURE__ */ jsxs("header", { className: "clover-items-header", children: [
+          (headingLabel == null ? void 0 : headingLabel.text) && /* @__PURE__ */ jsx(
+            Title,
+            {
+              className: "clover-items-title",
+              id: `${id}-title`,
+              lang: headingLabel.lang,
+              children: headingLabel.text
+            }
+          ),
+          (headingSummary == null ? void 0 : headingSummary.text) && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "clover-items-description",
+              lang: headingSummary.lang,
+              children: headingSummary.text.replace(/<[^>]*>/g, "")
+            }
+          ),
+          heading.homepage && /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: "clover-items-homepage",
+              href: heading.homepage,
+              lang: langOf("commonViewAll"),
+              children: t("commonViewAll")
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "clover-items-frame",
+            style: { position: "relative" },
+            dir: rtl ? "rtl" : void 0,
+            children: [
+              slider && scrollButton("prev"),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  id: `${id}-viewport`,
+                  className: "clover-items-viewport",
+                  ref: slider ? track.ref : void 0,
+                  children: listbox ? /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ref: listRef,
+                      role: "listbox",
+                      ...listName,
+                      "aria-orientation": slider ? "horizontal" : "vertical",
+                      className: "clover-items-track",
+                      style: trackStyle,
+                      children: items.map((item, index) => {
+                        const isSelected = index === selected;
+                        return /* @__PURE__ */ jsx(
+                          "div",
+                          {
+                            id: `${id}-${index}`,
+                            role: "option",
+                            "aria-selected": isSelected,
+                            "aria-label": positionName(item, index),
+                            lang: positionLang(item),
+                            className: "clover-items-item",
+                            "data-track-index": index,
+                            style: slideStyle,
+                            ...roving.itemProps(index),
+                            onClick: (event) => onActivate(item, event),
+                            children: figure(item, isSelected)
+                          },
+                          item.id
+                        );
+                      })
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "ul",
+                    {
+                      ...listName,
+                      className: "clover-items-track",
+                      style: trackStyle,
+                      children: items.map((item, index) => /* @__PURE__ */ jsx(
+                        "li",
+                        {
+                          className: "clover-items-item",
+                          "data-track-index": index,
+                          style: slideStyle,
+                          children: /* @__PURE__ */ jsx(
+                            "a",
+                            {
+                              className: "clover-items-link",
+                              href: item.href,
+                              "aria-label": positionName(item, index),
+                              lang: positionLang(item),
+                              draggable: false,
+                              onClick: (event) => onActivate(item, event),
+                              children: figure(item, false)
+                            }
+                          )
+                        },
+                        item.id
+                      ))
+                    }
+                  )
+                }
+              ),
+              slider && scrollButton("next")
+            ]
+          }
+        ),
+        fallbackName.node
+      ]
+    }
+  ) });
+}
+function keepInView(element, instant) {
+  var _a;
+  let box = element.parentElement;
+  while (box && box !== document.body) {
+    const { overflowY } = getComputedStyle(box);
+    if (/(auto|scroll)/.test(overflowY) && box.scrollHeight > box.clientHeight) {
+      break;
+    }
+    box = box.parentElement;
+  }
+  if (!box || box === document.body) return;
+  const outer = box.getBoundingClientRect();
+  const inner = element.getBoundingClientRect();
+  const delta = inner.top < outer.top ? inner.top - outer.top : inner.bottom > outer.bottom ? inner.bottom - outer.bottom : 0;
+  if (delta) {
+    (_a = box.scrollBy) == null ? void 0 : _a.call(box, { top: delta, behavior: instant ? "auto" : "smooth" });
+  }
+}
+export {
+  Items,
+  ItemsView,
+  Pager,
+  stepsOf
+};

package/dist/components/Items/Pager.mjs

@@ -0,0 +1,190 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { itemsOfCollection } from "../../core/items.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { join } from "../../lib/classnames.mjs";
+import { useClover, useCloverSelector } from "../../react/context.mjs";
+import { useNavigation, useSequence } from "../../react/hooks.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { useContainerName } from "../../ui/useContainerName.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
+function useRootSteps(of, part) {
+  const { clover } = useClover(part);
+  const navigation = useNavigation();
+  const { direction } = useSequence();
+  const collection = useCloverSelector((state) => state.collection);
+  const shown = useCloverSelector((state) => {
+    var _a;
+    return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
+  });
+  if (of === "members") {
+    const members = itemsOfCollection(collection);
+    const position = members.findIndex((item) => item.id === shown);
+    return {
+      position,
+      total: members.length,
+      direction: "left-to-right",
+      step: (by) => {
+        const to = members[position + by];
+        if (to) void clover.goToManifest(to.id);
+      }
+    };
+  }
+  return {
+    position: navigation.position,
+    total: navigation.total,
+    direction,
+    step: (by) => by < 0 ? navigation.previous() : navigation.next()
+  };
+}
+const NEXT_ROTATION = {
+  "left-to-right": 0,
+  "right-to-left": 180,
+  "top-to-bottom": 90,
+  "bottom-to-top": 270
+};
+function Chevron({ rotate }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      focusable: "false",
+      width: "16",
+      height: "16",
+      viewBox: "0 0 16 16",
+      className: "clover-pager-icon",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M6 3l5 5-5 5",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          transform: `rotate(${rotate} 8 8)`
+        }
+      )
+    }
+  );
+}
+const StepButton = forwardRef(function StepButton2({ steps, step, className, disabled, onClick, ...rest }, ref) {
+  const { t, langOf } = useCloverTranslation();
+  const { position, total, direction } = steps;
+  if (total < 2) return null;
+  const isNext = step === "next";
+  const available = isNext ? position + 1 < total : position > 0;
+  const rotate = NEXT_ROTATION[direction] + (isNext ? 0 : 180);
+  const labelKey = isNext ? "commonNext" : "commonPrevious";
+  const label = t(labelKey);
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: join(`clover-pager-${step}`, className),
+      "data-direction": direction,
+      lang: langOf(labelKey),
+      disabled,
+      "aria-disabled": !available || void 0,
+      tabIndex: available ? void 0 : -1,
+      onClick: (event) => {
+        if (!available) return;
+        onClick == null ? void 0 : onClick(event);
+        if (!event.defaultPrevented) steps.step(isNext ? 1 : -1, event);
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(Chevron, { rotate }),
+        /* @__PURE__ */ jsx("span", { style: visuallyHidden, children: label }),
+        /* @__PURE__ */ jsx(Tip, { label })
+      ]
+    }
+  );
+});
+const Previous = forwardRef(
+  function Previous2({ of = "views", ...props }, ref) {
+    const steps = useRootSteps(of, "Previous");
+    return /* @__PURE__ */ jsx(StepButton, { ref, ...props, steps, step: "previous" });
+  }
+);
+const Next = forwardRef(function Next2({ of = "views", ...props }, ref) {
+  const steps = useRootSteps(of, "Next");
+  return /* @__PURE__ */ jsx(StepButton, { ref, ...props, steps, step: "next" });
+});
+const PositionText = forwardRef(function PositionText2({ steps, as: Tag = "span", className, ...rest }, ref) {
+  const { t, langOf } = useCloverTranslation();
+  const { position, total } = steps;
+  if (total < 2 || position < 0) return null;
+  const index = position + 1;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref,
+      className: join("clover-pager-position", className),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+          index,
+          " / ",
+          total
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "clover-pager-room", "aria-hidden": "true", hidden: true, children: [
+          total,
+          " / ",
+          total
+        ] }),
+        /* @__PURE__ */ jsx("span", { style: visuallyHidden, lang: langOf("canvasPosition"), children: t("canvasPosition", { index, total }) })
+      ]
+    }
+  );
+});
+const Position = forwardRef(
+  function Position2({ of = "views", ...props }, ref) {
+    const steps = useRootSteps(of, "Position");
+    return /* @__PURE__ */ jsx(PositionText, { ref, ...props, steps });
+  }
+);
+function ItemsPager({
+  steps,
+  as: Tag = "nav",
+  className,
+  forwardedRef,
+  hostLanguage,
+  ...rest
+}) {
+  const { t, langOf } = useCloverTranslation(void 0, hostLanguage);
+  const name = useContainerName(
+    t("itemsLabel"),
+    langOf("itemsLabel"),
+    rest["aria-label"] !== void 0 || rest["aria-labelledby"] !== void 0,
+    hostLanguage
+  );
+  if (steps.total < 2) return null;
+  const rtl = steps.direction === "right-to-left";
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ref: forwardedRef,
+      ...name.props,
+      className: join("clover-items clover-pager", className),
+      "data-layout": "pager",
+      "data-direction": steps.direction,
+      ...rest,
+      children: [
+        name.node,
+        !rtl && /* @__PURE__ */ jsx(PositionText, { steps }),
+        /* @__PURE__ */ jsx(StepButton, { steps, step: rtl ? "next" : "previous" }),
+        /* @__PURE__ */ jsx(StepButton, { steps, step: rtl ? "previous" : "next" }),
+        rtl && /* @__PURE__ */ jsx(PositionText, { steps })
+      ]
+    }
+  );
+}
+export {
+  ItemsPager,
+  Next,
+  Position,
+  Previous
+};