@nulib/clover 4.4.1 → 4.5.0

package/README.md

@@ -109,10 +109,11 @@ If you serve Clover's files yourself, copy the whole `dist/web-components` folde
 - [Composing layouts](https://clover.iiif.library.northwestern.edu/docs/composing): layouts of your
   own, from the parts and hooks.
 - [Styling](https://clover.iiif.library.northwestern.edu/docs/styling): colors, sizes and classes.
-- [Technical overview](https://clover.iiif.library.northwestern.edu/docs/technical): events,
-  languages, types, what each part loads, and coming from Clover 3.x.
+- [Glossary](https://clover.iiif.library.northwestern.edu/docs/composing/glossary): every
+  component and helper, and the package's structure.
 
-Clover 3.x, `@samvera/clover-iiif`, is documented on the same site, under
+Clover 3.x, `@samvera/clover-iiif`, is deprecated and no longer maintained. Its docs are
+kept on the same site, under
 [Clover 3.x](https://clover.iiif.library.northwestern.edu/docs/deprecated-versions).
 
 ## License

package/dist/components/Annotations/Annotations.mjs

@@ -26,7 +26,7 @@ import { useLoaded } from "../../hooks/useLoaded.mjs";
 import { HideToggle } from "../../ui/HideToggle.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 import { startingLanguage } from "../../core/language-choice.mjs";
-import { useReadingLanguages } from "../../react/readingLanguages.mjs";
+import { useReadingLanguages, covers } from "../../react/readingLanguages.mjs";
 import { LanguageChoice } from "../../ui/LanguageChoice.mjs";
 import { languagesOf, inLanguage } from "./languages.mjs";
 import { languageProps } from "../../i18n/direction.mjs";
@@ -160,7 +160,8 @@ function AnnotationGroup({
   const languages = useMemo(() => languagesOf(entries), [entries]);
   const [picked, setPicked] = useState();
   const offered = useReadingLanguages();
-  const chosen = offered ? startingLanguage(languages, offered.chosen) : startingLanguage(languages, language, picked);
+  const follows = covers(offered, languages);
+  const chosen = follows ? startingLanguage(languages, offered.chosen) : startingLanguage(languages, (offered == null ? void 0 : offered.chosen) ?? language, picked);
   const listed = entries.filter((entry) => inLanguage(entry, chosen));
   return /* @__PURE__ */ jsxs(
     "section",
@@ -179,7 +180,7 @@ function AnnotationGroup({
               children: title.text
             }
           ),
-          chosen && !offered && /* @__PURE__ */ jsx(
+          chosen && !follows && /* @__PURE__ */ jsx(
             LanguageChoice,
             {
               languages,
@@ -391,7 +392,12 @@ const AnnotationLayers = forwardRef(function AnnotationLayers2({
           const languages = languagesOf(
             layer.canvases.flatMap((group) => group.entries)
           );
-          const chosen = offered ? startingLanguage(languages, offered.chosen) : startingLanguage(languages, language, picked[layer.key]);
+          const follows = covers(offered, languages);
+          const chosen = follows ? startingLanguage(languages, offered.chosen) : startingLanguage(
+            languages,
+            (offered == null ? void 0 : offered.chosen) ?? language,
+            picked[layer.key]
+          );
           return /* @__PURE__ */ jsxs(
             "section",
             {
@@ -408,7 +414,7 @@ const AnnotationLayers = forwardRef(function AnnotationLayers2({
                       children: layer.title.text
                     }
                   ),
-                  chosen && !offered && /* @__PURE__ */ jsx(
+                  chosen && !follows && /* @__PURE__ */ jsx(
                     LanguageChoice,
                     {
                       languages,

package/dist/components/Body/Caption.mjs

@@ -38,7 +38,7 @@ const Caption = ({
       "data-testid": "clover-canvas-caption",
       id,
       onKeyDown: (event) => {
-        if (event.key !== "Escape") return;
+        if (event.key !== "Escape" || event.defaultPrevented) return;
         event.preventDefault();
         event.stopPropagation();
         onClose(true);

package/dist/components/Canvas/AnnotationMenu.mjs

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef } from "react";
 import { startOf } from "./Annotations.mjs";
 import ControlMenu from "./ControlMenu.mjs";
 import { CueTime } from "../../ui/Cue.mjs";
@@ -20,6 +21,7 @@ const AnnotationMenu = ({
   onClose
 }) => {
   const name = useContainerName(label, labelLang);
+  const pointer = useRef(false);
   const groups = [];
   annotations.forEach((annotation, index) => {
     var _a, _b;
@@ -84,6 +86,9 @@ const AnnotationMenu = ({
                       "data-selected": picked,
                       onMouseEnter: () => onActivate(annotation.id),
                       onMouseLeave: () => onActivate(null),
+                      onPointerDown: () => {
+                        pointer.current = true;
+                      },
                       children: [
                         /* @__PURE__ */ jsx(
                           "input",
@@ -91,8 +96,17 @@ const AnnotationMenu = ({
                             type: "radio",
                             name: id,
                             checked: picked,
-                            onChange: () => onSelect(annotation),
-                            onClick: () => picked && onSelect(annotation),
+                            onChange: () => onSelect(annotation, pointer.current),
+                            onClick: () => {
+                              if (picked || !pointer.current) onSelect(annotation);
+                            },
+                            onKeyDown: (event) => {
+                              pointer.current = false;
+                              if (event.key === "Enter") {
+                                event.preventDefault();
+                                onSelect(annotation);
+                              }
+                            },
                             onFocus: () => onActivate(annotation.id),
                             onBlur: () => onActivate(null)
                           }

package/dist/components/Canvas/AnnotationState.mjs

@@ -165,30 +165,34 @@ function AnnotationState({
   hiddenPagesRef.current = hiddenPages;
   const setPagesVisibleRef = useRef(setPagesVisible);
   setPagesVisibleRef.current = setPagesVisible;
-  const selectAnnotation = useCallback((annotation) => {
-    var _a, _b, _c;
-    if (annotation.pageId && hiddenPagesRef.current.includes(annotation.pageId))
-      setPagesVisibleRef.current([annotation.pageId], true);
-    setOwnSelected(annotation.id);
-    (_a = onAnnotationActiveRef.current) == null ? void 0 : _a.call(onAnnotationActiveRef, annotation.id);
-    (_b = onAnnotationSelectRef.current) == null ? void 0 : _b.call(onAnnotationSelectRef, annotation.id);
-    if (held.current) return;
-    if ("start" in annotation) {
-      const element = mediaElementRef.current;
-      if (!element) return;
-      sought.current = annotation.id;
-      playFrom(element, annotation.start);
-      return;
-    }
-    framed.current = annotation.id;
-    if (annotation.track) {
-      const element = mediaElementRef.current;
-      if (element && goToTrack(annotation, element))
+  const selectAnnotation = useCallback(
+    (annotation, play = true) => {
+      var _a, _b, _c;
+      if (annotation.pageId && hiddenPagesRef.current.includes(annotation.pageId))
+        setPagesVisibleRef.current([annotation.pageId], true);
+      setOwnSelected(annotation.id);
+      (_a = onAnnotationActiveRef.current) == null ? void 0 : _a.call(onAnnotationActiveRef, annotation.id);
+      (_b = onAnnotationSelectRef.current) == null ? void 0 : _b.call(onAnnotationSelectRef, annotation.id);
+      if (held.current) return;
+      if ("start" in annotation) {
+        const element = mediaElementRef.current;
+        if (!element) return;
         sought.current = annotation.id;
-      return;
-    }
-    (_c = rendererRef.current) == null ? void 0 : _c.fitAnnotation(annotation.world, !glide.current);
-  }, []);
+        if (play) playFrom(element, annotation.start);
+        else element.currentTime = annotation.start;
+        return;
+      }
+      framed.current = annotation.id;
+      if (annotation.track) {
+        const element = mediaElementRef.current;
+        if (element && goToTrack(annotation, element))
+          sought.current = annotation.id;
+        return;
+      }
+      (_c = rendererRef.current) == null ? void 0 : _c.fitAnnotation(annotation.world, !glide.current);
+    },
+    []
+  );
   const selectedRef = useRef(selectedAnnotation);
   selectedRef.current = selectedAnnotation;
   const releaseAnnotation = useCallback(() => {

package/dist/components/Canvas/ControlMenu.mjs

@@ -58,11 +58,20 @@ const ControlMenu = ({
       };
       document.addEventListener("keydown", after, { once: true });
     };
+    const onFocusIn = (event) => {
+      var _a;
+      const target = event.target;
+      if (!(target == null ? void 0 : target.closest(".clover-canvas-viewport"))) return;
+      if ((_a = ref.current) == null ? void 0 : _a.contains(target)) return;
+      onClose(false);
+    };
     document.addEventListener("pointerdown", onPointerDown);
     document.addEventListener("keydown", onKeyDown, true);
+    document.addEventListener("focusin", onFocusIn);
     return () => {
       document.removeEventListener("pointerdown", onPointerDown);
       document.removeEventListener("keydown", onKeyDown, true);
+      document.removeEventListener("focusin", onFocusIn);
     };
   }, [triggerId, onClose, holds]);
   return /* @__PURE__ */ jsx(

package/dist/components/Canvas/PlaceBox.mjs

@@ -7,6 +7,7 @@ import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { localize } from "../../core/value.mjs";
 import { useOneOpen } from "../../ui/useOneOpen.mjs";
 import { languageProps } from "../../i18n/direction.mjs";
+import { useContainerName } from "../../i18n/useContainerName.mjs";
 import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 function PlaceBox({
   id,
@@ -19,6 +20,11 @@ function PlaceBox({
   const { t, langOf } = useCloverTranslation();
   useOneOpen(open, () => onClose(false));
   const heading = localize(name, language);
+  const fallback = useContainerName(
+    t("mapLabel"),
+    langOf("mapLabel"),
+    Boolean(heading.text)
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -28,6 +34,7 @@ function PlaceBox({
       id,
       role: "group",
       "aria-labelledby": heading.text ? `${id}-name` : void 0,
+      ...fallback.props,
       onKeyDown: (event) => {
         if (event.key !== "Escape") return;
         event.preventDefault();
@@ -46,6 +53,7 @@ function PlaceBox({
             children: /* @__PURE__ */ jsx(Close, {})
           }
         ),
+        fallback.node,
         heading.text && /* @__PURE__ */ jsx(
           "p",
           {

package/dist/components/Canvas/media/Transport.mjs

@@ -14,6 +14,7 @@ import { useOneOpen } from "../../../ui/useOneOpen.mjs";
 import { PlayIcon, PauseIcon, VolumeMutedIcon, VolumeHighIcon, CaptionsIcon, FitIcon, FillIcon, ExitFullScreenIcon, FullScreenIcon } from "../../../ui/mediaIcons.mjs";
 import { useContainerName } from "../../../i18n/useContainerName.mjs";
 import { useCloverTranslation } from "../../../i18n/useCloverTranslation.mjs";
+import { visuallyHidden } from "../../../ui/visuallyHidden.mjs";
 import { toggleFullscreen } from "../../../lib/fullscreen.mjs";
 import useFullscreenSupported from "../../../hooks/useFullscreenSupported.mjs";
 import { languageProps } from "../../../i18n/direction.mjs";
@@ -330,7 +331,7 @@ const Transport = ({
     focused.current = null;
     const active = document.activeElement;
     if (!active || active === document.body) (_a2 = play.current) == null ? void 0 : _a2.focus();
-  }, [captions.length, chapters.length, hasFullscreen]);
+  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -481,28 +482,41 @@ const Transport = ({
                 "--clover-transport-progress": `${(muted ? 0 : volume) * 100}%`
               },
               type: "range",
-              value: muted ? 0 : volume
+              value: muted ? 0 : volume,
+              "aria-valuetext": `${Math.round((muted ? 0 : volume) * 100)}%`
             }
           ),
           /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-status", children: [
             /* @__PURE__ */ jsxs("span", { className: "clover-canvas-transport-time", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-label": t("playerCurrentTime"),
-                  ...languageProps(langOf("playerCurrentTime")),
-                  children: formatTime(currentTime)
-                }
-              ),
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: visuallyHidden,
+                    ...languageProps(langOf("playerCurrentTime")),
+                    children: [
+                      t("playerCurrentTime"),
+                      " "
+                    ]
+                  }
+                ),
+                formatTime(currentTime)
+              ] }),
               /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " / " }),
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "aria-label": t("playerDuration"),
-                  ...languageProps(langOf("playerDuration")),
-                  children: formatTime(duration)
-                }
-              )
+              /* @__PURE__ */ jsxs("span", { children: [
+                /* @__PURE__ */ jsxs(
+                  "span",
+                  {
+                    style: visuallyHidden,
+                    ...languageProps(langOf("playerDuration")),
+                    children: [
+                      t("playerDuration"),
+                      " "
+                    ]
+                  }
+                ),
+                formatTime(duration)
+              ] })
             ] }),
             chapter >= 0 && /* @__PURE__ */ jsx(
               "span",

package/dist/components/Items/CountMenu.mjs

@@ -2,12 +2,16 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useRef, useCallback, Suspense, lazy } from "react";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
+import { languageProps } from "../../i18n/direction.mjs";
+import { visuallyHidden } from "../../ui/visuallyHidden.mjs";
 const ControlMenu = lazy(() => import("../Canvas/ControlMenu.mjs"));
 function CountMenu({
   position,
   total,
   list
 }) {
+  const { t, langOf } = useCloverTranslation();
   const triggerId = `${useUniqueId().replace(/:/g, "")}-count`;
   const menuId = `${triggerId}-menu`;
   const [open, setOpen] = useState(false);
@@ -36,11 +40,19 @@ function CountMenu({
         onClick: () => setOpen(!open),
         children: [
           /* @__PURE__ */ jsxs("span", { className: "clover-pager-position", "aria-live": "polite", children: [
-            /* @__PURE__ */ jsxs("span", { children: [
+            /* @__PURE__ */ jsxs("span", { "aria-hidden": position >= 0 || void 0, children: [
               position >= 0 ? position + 1 : "–",
               " / ",
               total
             ] }),
+            position >= 0 && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: visuallyHidden,
+                ...languageProps(langOf("canvasPosition")),
+                children: t("canvasPosition", { index: position + 1, total })
+              }
+            ),
             /* @__PURE__ */ jsxs("span", { className: "clover-pager-room", "aria-hidden": "true", hidden: true, children: [
               total,
               " / ",

package/dist/components/Items/Items.mjs

@@ -183,6 +183,7 @@ function ItemsView({
   navigation,
   rtl = false,
   layout = "slider",
+  orientation = "horizontal",
   thumbnailSize = 200,
   request,
   language,
@@ -212,6 +213,7 @@ function ItemsView({
   const { langOf } = root;
   const contrast = useHighContrast(highContrast);
   const slider = layout === "slider";
+  const vertical = slider && orientation === "vertical";
   const listbox = navigation === "id";
   const viewport = useRef(null);
   const masonry = layout === "masonry";
@@ -230,12 +232,13 @@ function ItemsView({
   }, [masonry]);
   const track = useScrollTrack({
     align: listbox ? "center" : "start",
-    itemCount: items.length
+    itemCount: items.length,
+    axis: vertical ? "y" : "x"
   });
   const held = useRef(void 0);
   useEffect(() => () => window.clearTimeout(held.current), []);
   const roving = useRovingFocus(items.length, selected, {
-    orientation: layout === "slider" ? "horizontal" : layout === "list" ? "vertical" : "both",
+    orientation: vertical ? "vertical" : layout === "slider" ? "horizontal" : layout === "list" ? "vertical" : "both",
     rtl,
     onActivate: (index, event) => onActivate(items[index], event),
     onMove: followFocus ? (index, event) => {
@@ -301,7 +304,13 @@ function ItemsView({
   const positioned = (item) => !(renderItem || localize(item.label, language).text || showSummary && secondary === "summary" && 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 trackStyle = slider ? {
+    display: "flex",
+    flexDirection: vertical ? "column" : void 0,
+    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) => {
@@ -339,7 +348,7 @@ function ItemsView({
               children: /* @__PURE__ */ jsx(
                 "path",
                 {
-                  d: step === "next" !== rtl ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
+                  d: vertical ? step === "next" ? "M3 6l5 5 5-5" : "M3 10l5-5 5 5" : step === "next" !== rtl ? "M6 3l5 5-5 5" : "M10 3L5 8l5 5",
                   fill: "none",
                   stroke: "currentColor",
                   strokeWidth: "2",
@@ -361,6 +370,7 @@ function ItemsView({
       ref: root.ref,
       className: join("clover-items", className),
       "data-layout": layout,
+      "data-orientation": vertical ? "vertical" : void 0,
       "data-navigation": navigation,
       ...highContrastProps(contrast),
       ...rest,
@@ -414,7 +424,7 @@ function ItemsView({
                       ref: listRef,
                       role: "listbox",
                       ...listName,
-                      "aria-orientation": slider ? "horizontal" : "vertical",
+                      "aria-orientation": vertical ? "vertical" : slider ? "horizontal" : layout === "list" ? "vertical" : void 0,
                       className: "clover-items-track",
                       style: trackStyle,
                       children: items.map((item, index) => {
@@ -480,7 +490,7 @@ function ItemsView({
   ) });
 }
 function keepInView(element, instant) {
-  var _a;
+  var _a, _b;
   let box = element.parentElement;
   while (box && box !== document.body) {
     const { overflowY } = getComputedStyle(box);
@@ -494,7 +504,14 @@ function keepInView(element, instant) {
   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" });
+    const still = (_a = window.matchMedia) == null ? void 0 : _a.call(
+      window,
+      "(prefers-reduced-motion: reduce)"
+    ).matches;
+    (_b = box.scrollBy) == null ? void 0 : _b.call(box, {
+      top: delta,
+      behavior: instant || still ? "auto" : "smooth"
+    });
   }
 }
 export {

package/dist/components/Items/PagerLayout.mjs

@@ -10,6 +10,7 @@ function PagerLayout({
   forwardedRef,
   /* eslint-disable @typescript-eslint/no-unused-vars -- Items' own, not the nav's */
   layout,
+  orientation,
   thumbnailSize,
   renderItem,
   header,

package/dist/components/Map/MapView.mjs

@@ -221,7 +221,7 @@ function MapView({
         (bundled) => bundled.mapLibreSheet().then(() => bundled)
       )
     ]).then(async ([module, bundled]) => {
-      var _a;
+      var _a, _b, _c, _d, _e;
       const maplibre = "Map" in module ? module : module.default;
       if (!live || !container.current) return;
       const worker = workerUrl ?? getMapWorkerUrl() ?? bundled.bundledWorkerUrl((_a = maplibre.getVersion) == null ? void 0 : _a.call(maplibre));
@@ -243,7 +243,7 @@ function MapView({
         scrollZoom,
         // Its credits behind their ⓘ, in the lower corner; none where left out.
         attributionControl: credits ? { compact: true } : false,
-        // MapLibre's own names, in Clover's words; kept current below.
+        // MapLibre's own names, in Clover's interface words; kept current below.
         locale: {
           "Map.Title": t2("mapLabel"),
           "NavigationControl.ZoomIn": t2("imageZoomIn"),
@@ -256,6 +256,8 @@ function MapView({
         new maplibre.NavigationControl({ showCompass: false }),
         "bottom-left"
       );
+      (_c = (_b = instance.touchZoomRotate) == null ? void 0 : _b.disableRotation) == null ? void 0 : _c.call(_b);
+      (_e = (_d = instance.keyboard) == null ? void 0 : _d.disableRotation) == null ? void 0 : _e.call(_d);
       instance.on("load", () => {
         var _a2;
         if (!live) return;
@@ -269,6 +271,7 @@ function MapView({
         let popup = null;
         let picked = null;
         let shown = "";
+        let dismissed = "";
         let hovered;
         let pickedId;
         const idOf = (feature) => typeof feature.id === "number" && feature.id >= 0 ? feature.id : latest.current.features.features.indexOf(feature);
@@ -294,7 +297,7 @@ function MapView({
           shown = "";
         };
         const show2 = (feature) => {
-          var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
+          var _a3, _b2, _c2, _d2, _e2, _f, _g, _h, _i;
           if (shown === keyOf(feature) && popup) return;
           unname();
           const title = (_a3 = feature.properties) == null ? void 0 : _a3.title;
@@ -302,7 +305,7 @@ function MapView({
           if (!title || !bounds) return;
           const text = document.createElement("span");
           text.textContent = String(title);
-          const lang = (_b = feature.properties) == null ? void 0 : _b.titleLang;
+          const lang = (_b2 = feature.properties) == null ? void 0 : _b2.titleLang;
           const marked = (element, tag) => {
             if (tag === void 0) return;
             element.lang = tag;
@@ -311,7 +314,7 @@ function MapView({
           };
           const nameLang = lang === void 0 ? void 0 : String(lang);
           marked(text, nameLang);
-          const date = readDate((_c = feature.properties) == null ? void 0 : _c.navDate);
+          const date = readDate((_c2 = feature.properties) == null ? void 0 : _c2.navDate);
           if (date) {
             const locale = cloverI18n.language;
             const time = document.createElement("time");
@@ -326,7 +329,7 @@ function MapView({
           }
           const [[west, south], [east, north]] = bounds;
           const middle = (west + east) / 2;
-          const room = ((_e = (_d = instance.getContainer) == null ? void 0 : _d.call(instance)) == null ? void 0 : _e.clientHeight) ?? 0;
+          const room = ((_e2 = (_d2 = instance.getContainer) == null ? void 0 : _d2.call(instance)) == null ? void 0 : _e2.clientHeight) ?? 0;
           const top = ((_g = (_f = instance.project) == null ? void 0 : _f.call(instance, [middle, north])) == null ? void 0 : _g.y) ?? 0;
           const foot = ((_i = (_h = instance.project) == null ? void 0 : _h.call(instance, [middle, south])) == null ? void 0 : _i.y) ?? 0;
           const below = room - foot >= top;
@@ -345,9 +348,9 @@ function MapView({
         };
         let hangs = 0;
         const keepInside = () => {
-          var _a3, _b, _c, _d;
+          var _a3, _b2, _c2, _d2;
           const element = (_a3 = popup == null ? void 0 : popup.getElement) == null ? void 0 : _a3.call(popup);
-          const box2 = (_d = (_c = (_b = instance.getContainer) == null ? void 0 : _b.call(instance)) == null ? void 0 : _c.getBoundingClientRect) == null ? void 0 : _d.call(_c);
+          const box2 = (_d2 = (_c2 = (_b2 = instance.getContainer) == null ? void 0 : _b2.call(instance)) == null ? void 0 : _c2.getBoundingClientRect) == null ? void 0 : _d2.call(_c2);
           if (!element || !box2 || !popup.setOffset) return;
           const away = gap();
           popup.setOffset([0, hangs]);
@@ -370,37 +373,39 @@ function MapView({
           show2(kept);
         };
         name.current = (feature) => {
+          dismissed = "";
           picked = feature;
           pick(feature);
           show2(feature);
         };
         for (const layer of CLICKABLE) {
           instance.on("click", layer, (event) => {
-            var _a3, _b, _c, _d;
+            var _a3, _b2, _c2, _d2;
             const feature = (_a3 = event.features) == null ? void 0 : _a3[0];
             if (!feature) return;
-            (_b = name.current) == null ? void 0 : _b.call(name, feature, event.lngLat);
-            (_d = (_c = latest.current).onSelect) == null ? void 0 : _d.call(_c, feature);
+            (_b2 = name.current) == null ? void 0 : _b2.call(name, feature, event.lngLat);
+            (_d2 = (_c2 = latest.current).onSelect) == null ? void 0 : _d2.call(_c2, feature);
           });
           instance.on("mousemove", layer, (event) => {
-            var _a3, _b, _c;
+            var _a3, _b2, _c2;
             instance.getCanvas().style.cursor = "pointer";
             const feature = (_a3 = event.features) == null ? void 0 : _a3[0];
             if (!feature) return;
-            show2(feature);
+            if (keyOf(feature) !== dismissed) show2(feature);
             const id = idOf(feature);
             if (id === hovered) return;
             mark(hovered, "hover", false);
             hovered = id;
             mark(hovered, "hover", true);
-            (_c = (_b = latest.current).onHighlight) == null ? void 0 : _c.call(_b, feature);
+            (_c2 = (_b2 = latest.current).onHighlight) == null ? void 0 : _c2.call(_b2, feature);
           });
           instance.on("mouseleave", layer, () => {
-            var _a3, _b;
+            var _a3, _b2;
             instance.getCanvas().style.cursor = "";
+            dismissed = "";
             mark(hovered, "hover", false);
             hovered = void 0;
-            (_b = (_a3 = latest.current).onHighlight) == null ? void 0 : _b.call(_a3, null);
+            (_b2 = (_a3 = latest.current).onHighlight) == null ? void 0 : _b2.call(_a3, null);
             if (picked) show2(picked);
             else unname();
           });
@@ -419,13 +424,20 @@ function MapView({
           unname();
         });
         const escape = (event) => {
-          if (event.key !== "Escape" || !popup) return;
+          var _a3;
+          if (event.key !== "Escape" || event.defaultPrevented || !popup)
+            return;
+          const own = (_a3 = container.current) == null ? void 0 : _a3.closest(".clover-geomap");
+          const target = event.target;
+          if (!(own == null ? void 0 : own.contains(target)) && !(own == null ? void 0 : own.matches(":hover"))) return;
+          event.preventDefault();
+          dismissed = shown;
           picked = null;
           pick(null);
           unname();
         };
-        document.addEventListener("keydown", escape);
-        letGo = () => document.removeEventListener("keydown", escape);
+        document.addEventListener("keydown", escape, true);
+        letGo = () => document.removeEventListener("keydown", escape, true);
         setMap(instance);
       });
       if (typeof ResizeObserver !== "undefined") {