@canopy-iiif/app 0.8.4 → 0.8.6

package/ui/dist/server.mjs

@@ -149,8 +149,45 @@ var Slider = (props) => {
   return /* @__PURE__ */ React3.createElement(CloverSlider, { ...props });
 };
 
+// ui/src/iiif/Scroll.jsx
+import React4, { useEffect as useEffect3, useState as useState3 } from "react";
+var Scroll = (props) => {
+  const [CloverScroll, setCloverScroll] = useState3(null);
+  useEffect3(() => {
+    let mounted = true;
+    const canUseDom = typeof window !== "undefined" && typeof document !== "undefined";
+    if (canUseDom) {
+      import("@samvera/clover-iiif/scroll").then((mod) => {
+        if (!mounted) return;
+        const Comp = mod && (mod.default || mod.Scroll || mod);
+        setCloverScroll(() => Comp);
+      }).catch(() => {
+      });
+    }
+    return () => {
+      mounted = false;
+    };
+  }, []);
+  if (!CloverScroll) {
+    let json = "{}";
+    try {
+      json = JSON.stringify(props || {});
+    } catch (_) {
+      json = "{}";
+    }
+    return /* @__PURE__ */ React4.createElement("div", { "data-canopy-scroll": "1", className: "not-prose" }, /* @__PURE__ */ React4.createElement(
+      "script",
+      {
+        type: "application/json",
+        dangerouslySetInnerHTML: { __html: json }
+      }
+    ));
+  }
+  return /* @__PURE__ */ React4.createElement(CloverScroll, { ...props });
+};
+
 // ui/src/iiif/MdxRelatedItems.jsx
-import React4 from "react";
+import React5 from "react";
 function MdxRelatedItems(props) {
   let json = "{}";
   try {
@@ -158,12 +195,12 @@ function MdxRelatedItems(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React4.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React4.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React5.createElement("div", { "data-canopy-related-items": "1", className: "not-prose" }, /* @__PURE__ */ React5.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/iiif/Hero.jsx
 var import_hero_utils = __toESM(require_hero_utils());
-import React5 from "react";
+import React6 from "react";
 import helpers from "@canopy-iiif/app/lib/components/featured.js";
 var basePath = (() => {
   try {
@@ -235,17 +272,17 @@ function Hero({
   const figureClassName = ["canopy-hero", className].filter(Boolean).join(" ");
   const figureStyles = { margin: 0, padding: 0, ...style };
   const safeHref = applyBasePath(href);
-  return /* @__PURE__ */ React5.createElement("a", { href: safeHref, className: "canopy-hero-link" }, /* @__PURE__ */ React5.createElement("figure", { className: figureClassName, style: figureStyles, ...sanitizedRest }, /* @__PURE__ */ React5.createElement("div", { className: "canopy-hero__media", style: mediaStyles }, thumbnail ? /* @__PURE__ */ React5.createElement("img", { src: thumbnail, alt: "", "aria-hidden": "true", style: imgStyles }) : null), title ? /* @__PURE__ */ React5.createElement("figcaption", null, title) : null));
+  return /* @__PURE__ */ React6.createElement("a", { href: safeHref, className: "canopy-hero-link" }, /* @__PURE__ */ React6.createElement("figure", { className: figureClassName, style: figureStyles, ...sanitizedRest }, /* @__PURE__ */ React6.createElement("div", { className: "canopy-hero__media", style: mediaStyles }, thumbnail ? /* @__PURE__ */ React6.createElement("img", { src: thumbnail, alt: "", "aria-hidden": "true", style: imgStyles }) : null), title ? /* @__PURE__ */ React6.createElement("figcaption", null, title) : null));
 }
 
 // ui/src/iiif/FeaturedHero.jsx
-import React6 from "react";
+import React7 from "react";
 function FeaturedHero(props = {}) {
-  return /* @__PURE__ */ React6.createElement(Hero, { ...props });
+  return /* @__PURE__ */ React7.createElement(Hero, { ...props });
 }
 
 // ui/src/layout/SubNavigation.jsx
-import React7 from "react";
+import React8 from "react";
 import navigationHelpers from "@canopy-iiif/app/lib/components/navigation.js";
 function resolveRelativeCandidate(page, current) {
   if (page && typeof page.relativePath === "string" && page.relativePath) return page.relativePath;
@@ -270,14 +307,14 @@ function renderNodes(nodes, parentKey = "node") {
     if (node.isActive) classes.push("is-active");
     const linkClass = classes.join(" ");
     const Tag = node.href ? "a" : "span";
-    return /* @__PURE__ */ React7.createElement(
+    return /* @__PURE__ */ React8.createElement(
       "li",
       {
         key,
         className: "canopy-sub-navigation__item",
         "data-depth": depth
       },
-      /* @__PURE__ */ React7.createElement(
+      /* @__PURE__ */ React8.createElement(
         Tag,
         {
           className: linkClass,
@@ -286,7 +323,7 @@ function renderNodes(nodes, parentKey = "node") {
         },
         node.title || node.slug
       ),
-      showChildren ? /* @__PURE__ */ React7.createElement("ul", { className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested", role: "list" }, renderNodes(node.children, key)) : null
+      showChildren ? /* @__PURE__ */ React8.createElement("ul", { className: "canopy-sub-navigation__list canopy-sub-navigation__list--nested", role: "list" }, renderNodes(node.children, key)) : null
     );
   });
 }
@@ -300,12 +337,12 @@ function SubNavigation({
   ariaLabel
 }) {
   const PageContext = navigationHelpers && navigationHelpers.getPageContext ? navigationHelpers.getPageContext() : null;
-  const context = PageContext ? React7.useContext(PageContext) : null;
+  const context = PageContext ? React8.useContext(PageContext) : null;
   const contextNavigation = context && context.navigation ? context.navigation : null;
   const contextPage = context && context.page ? context.page : null;
   const effectiveNavigation = navigationProp || contextNavigation;
   const effectivePage = page || contextPage;
-  const resolvedNavigation = React7.useMemo(() => {
+  const resolvedNavigation = React8.useMemo(() => {
     if (effectiveNavigation && effectiveNavigation.root) return effectiveNavigation;
     const candidate = resolveRelativeCandidate(effectivePage, current);
     if (!candidate) return effectiveNavigation || null;
@@ -329,11 +366,11 @@ function SubNavigation({
   if (!Object.prototype.hasOwnProperty.call(inlineStyle, "--sub-nav-indent")) {
     inlineStyle["--sub-nav-indent"] = "0.85rem";
   }
-  return /* @__PURE__ */ React7.createElement("nav", { className: combinedClassName, style: inlineStyle, "aria-label": navLabel }, finalHeading ? /* @__PURE__ */ React7.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null, /* @__PURE__ */ React7.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root")));
+  return /* @__PURE__ */ React8.createElement("nav", { className: combinedClassName, style: inlineStyle, "aria-label": navLabel }, finalHeading ? /* @__PURE__ */ React8.createElement("div", { className: "canopy-sub-navigation__heading" }, finalHeading) : null, /* @__PURE__ */ React8.createElement("ul", { className: "canopy-sub-navigation__list", role: "list" }, renderNodes([rootNode], rootNode.slug || "root")));
 }
 
 // ui/src/search/MdxSearchResults.jsx
-import React8 from "react";
+import React9 from "react";
 function MdxSearchResults(props) {
   let json = "{}";
   try {
@@ -341,11 +378,11 @@ function MdxSearchResults(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React8.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React8.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-results": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/SearchSummary.jsx
-import React9 from "react";
+import React10 from "react";
 function SearchSummary(props) {
   let json = "{}";
   try {
@@ -353,11 +390,11 @@ function SearchSummary(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React9.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React9.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-summary": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search/MdxSearchTabs.jsx
-import React10 from "react";
+import React11 from "react";
 function MdxSearchTabs(props) {
   let json = "{}";
   try {
@@ -365,18 +402,18 @@ function MdxSearchTabs(props) {
   } catch (_) {
     json = "{}";
   }
-  return /* @__PURE__ */ React10.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React10.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
+  return /* @__PURE__ */ React11.createElement("div", { "data-canopy-search-tabs": "1" }, /* @__PURE__ */ React11.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: json } }));
 }
 
 // ui/src/search-form/MdxSearchFormModal.jsx
-import React14 from "react";
+import React15 from "react";
 
 // ui/src/Icons.jsx
-import React11 from "react";
-var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React11.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React11.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
+import React12 from "react";
+var MagnifyingGlassIcon = (props) => /* @__PURE__ */ React12.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", ...props }, /* @__PURE__ */ React12.createElement("path", { d: "M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z" }));
 
 // ui/src/search/SearchPanelForm.jsx
-import React12 from "react";
+import React13 from "react";
 function readBasePath() {
   const normalize = (val) => {
     const raw = typeof val === "string" ? val.trim() : "";
@@ -435,21 +472,22 @@ function SearchPanelForm(props = {}) {
     buttonLabel = "Search",
     label,
     searchPath = "/search",
-    inputId: inputIdProp
+    inputId: inputIdProp,
+    clearLabel = "Clear search"
   } = props || {};
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
-  const action = React12.useMemo(
+  const action = React13.useMemo(
     () => resolveSearchPath(searchPath),
     [searchPath]
   );
-  const autoId = typeof React12.useId === "function" ? React12.useId() : void 0;
-  const [fallbackId] = React12.useState(
+  const autoId = typeof React13.useId === "function" ? React13.useId() : void 0;
+  const [fallbackId] = React13.useState(
     () => `canopy-search-form-${Math.random().toString(36).slice(2, 10)}`
   );
   const inputId = inputIdProp || autoId || fallbackId;
-  const inputRef = React12.useRef(null);
-  const [hasValue, setHasValue] = React12.useState(false);
-  const focusInput = React12.useCallback(() => {
+  const inputRef = React13.useRef(null);
+  const [hasValue, setHasValue] = React13.useState(false);
+  const focusInput = React13.useCallback(() => {
     const el = inputRef.current;
     if (!el) return;
     if (document.activeElement === el) return;
@@ -462,30 +500,44 @@ function SearchPanelForm(props = {}) {
       }
     }
   }, []);
-  const handlePointerDown = React12.useCallback(
+  const handlePointerDown = React13.useCallback(
     (event) => {
       const target = event.target;
       if (target && typeof target.closest === "function") {
         if (target.closest("[data-canopy-search-form-trigger]")) return;
+        if (target.closest("[data-canopy-search-form-clear]")) return;
       }
       event.preventDefault();
       focusInput();
     },
     [focusInput]
   );
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     const el = inputRef.current;
     if (!el) return;
     if (el.value && el.value.trim()) {
       setHasValue(true);
     }
   }, []);
-  const handleInputChange = React12.useCallback((event) => {
+  const handleInputChange = React13.useCallback((event) => {
     var _a;
-    const nextHasValue = Boolean(((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) && event.target.value.trim());
+    const nextHasValue = Boolean(
+      ((_a = event == null ? void 0 : event.target) == null ? void 0 : _a.value) && event.target.value.trim()
+    );
     setHasValue(nextHasValue);
   }, []);
-  return /* @__PURE__ */ React12.createElement(
+  const handleClear = React13.useCallback((event) => {
+  }, []);
+  const handleClearKey = React13.useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClear(event);
+      }
+    },
+    [handleClear]
+  );
+  return /* @__PURE__ */ React13.createElement(
     "form",
     {
       action,
@@ -495,59 +547,63 @@ function SearchPanelForm(props = {}) {
       spellCheck: "false",
       className: "canopy-search-form canopy-search-form-shell",
       onPointerDown: handlePointerDown,
-      "data-placeholder": placeholder || "",
       "data-has-value": hasValue ? "1" : "0"
     },
-    /* @__PURE__ */ React12.createElement(
-      "label",
+    /* @__PURE__ */ React13.createElement("label", { htmlFor: inputId, className: "canopy-search-form__label" }, /* @__PURE__ */ React13.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }), /* @__PURE__ */ React13.createElement(
+      "input",
       {
-        htmlFor: inputId,
-        className: "canopy-search-form__label"
+        id: inputId,
+        type: "search",
+        name: "q",
+        inputMode: "search",
+        "data-canopy-search-form-input": true,
+        placeholder,
+        className: "canopy-search-form__input",
+        "aria-label": "Search",
+        ref: inputRef,
+        onChange: handleInputChange,
+        onInput: handleInputChange
+      }
+    )),
+    hasValue ? /* @__PURE__ */ React13.createElement(
+      "button",
+      {
+        type: "button",
+        className: "canopy-search-form__clear",
+        onClick: handleClear,
+        onPointerDown: (event) => event.stopPropagation(),
+        onKeyDown: handleClearKey,
+        "aria-label": clearLabel,
+        "data-canopy-search-form-clear": true
       },
-      /* @__PURE__ */ React12.createElement(MagnifyingGlassIcon, { className: "canopy-search-form__icon" }),
-      /* @__PURE__ */ React12.createElement(
-        "input",
-        {
-          id: inputId,
-          type: "search",
-          name: "q",
-          inputMode: "search",
-          "data-canopy-search-form-input": true,
-          placeholder,
-          className: "canopy-search-form__input",
-          "aria-label": "Search",
-          ref: inputRef,
-          onChange: handleInputChange,
-          onInput: handleInputChange
-        }
-      )
-    ),
-    /* @__PURE__ */ React12.createElement(
+      "\xD7"
+    ) : null,
+    /* @__PURE__ */ React13.createElement(
       "button",
       {
         type: "submit",
         "data-canopy-search-form-trigger": "submit",
         className: "canopy-search-form__submit"
       },
-      /* @__PURE__ */ React12.createElement("span", null, text),
-      /* @__PURE__ */ React12.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React12.createElement("span", null, "\u2318"), /* @__PURE__ */ React12.createElement("span", null, "K"))
+      /* @__PURE__ */ React13.createElement("span", null, text),
+      /* @__PURE__ */ React13.createElement("span", { "aria-hidden": true, className: "canopy-search-form__shortcut" }, /* @__PURE__ */ React13.createElement("span", null, "\u2318"), /* @__PURE__ */ React13.createElement("span", null, "K"))
     )
   );
 }
 
 // ui/src/search/SearchPanelTeaserResults.jsx
-import React13 from "react";
+import React14 from "react";
 function SearchPanelTeaserResults(props = {}) {
   const { style, className } = props || {};
   const classes = ["canopy-search-teaser", className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "div",
     {
       "data-canopy-search-form-panel": true,
       className: classes || void 0,
       style
     },
-    /* @__PURE__ */ React13.createElement("div", { id: "cplist" })
+    /* @__PURE__ */ React14.createElement("div", { id: "cplist" })
   );
 }
 
@@ -567,11 +623,11 @@ function MdxSearchFormModal(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React14.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React14.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React14.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React14.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React14.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React15.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React15.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React15.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React15.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React15.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/search/SearchPanel.jsx
-import React15 from "react";
+import React16 from "react";
 function SearchPanel(props = {}) {
   const {
     placeholder = "Search\u2026",
@@ -588,11 +644,11 @@ function SearchPanel(props = {}) {
   const text = typeof label === "string" && label.trim() ? label.trim() : buttonLabel;
   const resolvedSearchPath = resolveSearchPath(searchPath);
   const data = { placeholder, hotkey, maxResults, groupOrder, label: text, searchPath: resolvedSearchPath };
-  return /* @__PURE__ */ React15.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React15.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React15.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React15.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React15.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
+  return /* @__PURE__ */ React16.createElement("div", { "data-canopy-search-form": true, className: "flex-1 min-w-0" }, /* @__PURE__ */ React16.createElement("div", { className: "relative w-full" }, /* @__PURE__ */ React16.createElement(SearchPanelForm, { placeholder, buttonLabel, label, searchPath: resolvedSearchPath }), /* @__PURE__ */ React16.createElement(SearchPanelTeaserResults, null)), /* @__PURE__ */ React16.createElement("script", { type: "application/json", dangerouslySetInnerHTML: { __html: JSON.stringify(data) } }));
 }
 
 // ui/src/iiif/ManifestPrimitives.jsx
-import React16 from "react";
+import React17 from "react";
 import {
   Label as CloverLabel,
   Metadata as CloverMetadata,
@@ -617,24 +673,24 @@ function ensureMetadata(items) {
 function Label({ manifest, label, ...rest }) {
   const intl = label || manifest && manifest.label;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React16.createElement(CloverLabel, { label: intl, ...rest });
+  return /* @__PURE__ */ React17.createElement(CloverLabel, { label: intl, ...rest });
 }
 function Summary({ manifest, summary, ...rest }) {
   const intl = summary || manifest && manifest.summary;
   if (!hasInternationalValue(intl)) return null;
-  return /* @__PURE__ */ React16.createElement(CloverSummary, { summary: intl, ...rest });
+  return /* @__PURE__ */ React17.createElement(CloverSummary, { summary: intl, ...rest });
 }
 function Metadata({ manifest, metadata, ...rest }) {
   const items = ensureMetadata(metadata || manifest && manifest.metadata);
   if (!items.length) return null;
-  return /* @__PURE__ */ React16.createElement(CloverMetadata, { metadata: items, ...rest });
+  return /* @__PURE__ */ React17.createElement(CloverMetadata, { metadata: items, ...rest });
 }
 function RequiredStatement({ manifest, requiredStatement, ...rest }) {
   const stmt = requiredStatement || manifest && manifest.requiredStatement;
   if (!stmt || !hasInternationalValue(stmt.label) || !hasInternationalValue(stmt.value)) {
     return null;
   }
-  return /* @__PURE__ */ React16.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
+  return /* @__PURE__ */ React17.createElement(CloverRequiredStatement, { requiredStatement: stmt, ...rest });
 }
 export {
   FeaturedHero,
@@ -644,6 +700,7 @@ export {
   Metadata,
   MdxRelatedItems as RelatedItems,
   RequiredStatement,
+  Scroll,
   MdxSearchFormModal as SearchFormModal,
   SearchPanel,
   SearchPanelForm,