col-browser 2.2.2 → 2.2.4

package/es/taxonDistribution.js

@@ -3,7 +3,7 @@ import { j as i } from "./chunks/jsx-runtime-BzflLqGi.js";
 import { useState as s, useEffect as $ } from "react";
 import { s as D, c as l, R as T, b as g } from "./chunks/router-CssZk5qZ.js";
 import { Row as k, Col as v, Spin as w } from "antd";
-import { D as A } from "./chunks/Distributions-Cwl_75VG.js";
+import { D as A } from "./chunks/Distributions-BWucAjsL.js";
 const C = ({
   taxonId: o,
   datasetKey: n,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "col-browser",
-  "version": "2.2.2",
+  "version": "2.2.4",
   "description": "Catalogue of Life browse and search React components",
   "main": "umd/col-browser.js",
   "module": "es/index.js",
@@ -104,7 +104,7 @@
     "terser": "^5.48.0",
     "typescript": "^6.0.0",
     "vite": "^6.4.2",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.8"
   },
   "author": "",
   "homepage": "",

package/umd/col-browser.js

@@ -78246,6 +78246,7 @@ html body {
   }) => {
     var _a2;
     const containerRef = reactExports.useRef(null);
+    const wrapperRef = reactExports.useRef(null);
     const mapRef = reactExports.useRef(null);
     const popupRef = reactExports.useRef(null);
     const recordMapRef = reactExports.useRef(/* @__PURE__ */ new Map());
@@ -78347,6 +78348,10 @@ html body {
         new maplibregl.NavigationControl({ showCompass: false }),
         "top-left"
       );
+      map.addControl(
+        new maplibregl.FullscreenControl({ container: wrapperRef.current }),
+        "top-right"
+      );
       mapRef.current = map;
       map.on("load", () => {
         setStyleReady(true);
@@ -78735,93 +78740,102 @@ html body {
       );
     }
     const focalName = ((_a2 = focalTaxon == null ? void 0 : focalTaxon.name) == null ? void 0 : _a2.scientificName) || "This taxon";
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "col-distributions-map", style: { position: "relative" }, children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          ref: containerRef,
-          style: { height: 360, width: "100%", background: "#f5f5f5" }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LayerControl,
-        {
-          open: controlOpen,
-          onOpen: openControl,
-          onClose: () => setControlOpen(false),
-          focalName,
-          focalReady,
-          focalVisible,
-          onToggleFocal: () => setFocalVisible((v2) => !v2),
-          gbifEnabled: !!gbifChecklistKey,
-          gbifVisible,
-          gbifAvailable,
-          onToggleGbif: handleToggleGbif,
-          descendantStatus: descendantState.status,
-          descendantsByRank,
-          descendantColors,
-          visibleTaxonIds,
-          onToggleTaxon: toggleTaxon,
-          onToggleRankGroup: toggleRankGroup,
-          onRetry: () => {
-            fetchTriggeredRef.current = false;
-            setDescendantState({ status: "idle", taxa: [] });
-            triggerDescendantFetch();
-          }
-        }
-      ),
-      !showDescendantLegend && (presentMeans.length > 0 || gbifChecklistKey && gbifAvailable !== false && gbifVisible) && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            bottom: 8,
-            left: 8,
-            zIndex: 1,
-            background: "#fff",
-            borderRadius: 4,
-            boxShadow: "0 1px 4px rgba(0,0,0,0.2)",
-            padding: "6px 8px",
-            fontSize: 12,
-            lineHeight: 1.5
-          },
-          children: [
-            presentMeans.map((m2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "div",
-              {
-                style: { display: "flex", alignItems: "center", gap: 6 },
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "span",
-                    {
-                      style: {
-                        display: "inline-block",
-                        width: 12,
-                        height: 12,
-                        background: m2.color,
-                        border: "1px solid rgba(0,0,0,0.15)",
-                        borderRadius: 2
-                      }
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: m2.label })
-                ]
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "col-distributions-map",
+        ref: wrapperRef,
+        style: { position: "relative" },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              ref: containerRef,
+              className: "col-distributions-map__canvas",
+              style: { height: 360, width: "100%", background: "#f5f5f5" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LayerControl,
+            {
+              open: controlOpen,
+              onOpen: openControl,
+              onClose: () => setControlOpen(false),
+              focalName,
+              focalReady,
+              focalVisible,
+              onToggleFocal: () => setFocalVisible((v2) => !v2),
+              gbifEnabled: !!gbifChecklistKey,
+              gbifVisible,
+              gbifAvailable,
+              onToggleGbif: handleToggleGbif,
+              descendantStatus: descendantState.status,
+              descendantsByRank,
+              descendantColors,
+              visibleTaxonIds,
+              onToggleTaxon: toggleTaxon,
+              onToggleRankGroup: toggleRankGroup,
+              onRetry: () => {
+                fetchTriggeredRef.current = false;
+                setDescendantState({ status: "idle", taxa: [] });
+                triggerDescendantFetch();
+              }
+            }
+          ),
+          !showDescendantLegend && (presentMeans.length > 0 || gbifChecklistKey && gbifAvailable !== false && gbifVisible) && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "div",
+            {
+              style: {
+                position: "absolute",
+                bottom: 8,
+                left: 8,
+                zIndex: 1,
+                background: "#fff",
+                borderRadius: 4,
+                boxShadow: "0 1px 4px rgba(0,0,0,0.2)",
+                padding: "6px 8px",
+                fontSize: 12,
+                lineHeight: 1.5
               },
-              m2.key
-            )),
-            gbifChecklistKey && gbifAvailable !== false && gbifVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(GbifLegendEntry, {})
-          ]
-        }
-      ),
-      showDescendantLegend && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        IncludedTaxaLegend,
-        {
-          visibleGroups: descendantLegend.visibleGroups,
-          unmappableGroups: descendantLegend.unmappableGroups,
-          showGbif: !!gbifChecklistKey && gbifAvailable !== false && gbifVisible
-        }
-      )
-    ] });
+              children: [
+                presentMeans.map((m2) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "div",
+                  {
+                    style: { display: "flex", alignItems: "center", gap: 6 },
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(
+                        "span",
+                        {
+                          style: {
+                            display: "inline-block",
+                            width: 12,
+                            height: 12,
+                            background: m2.color,
+                            border: "1px solid rgba(0,0,0,0.15)",
+                            borderRadius: 2
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: m2.label })
+                    ]
+                  },
+                  m2.key
+                )),
+                gbifChecklistKey && gbifAvailable !== false && gbifVisible && /* @__PURE__ */ jsxRuntimeExports.jsx(GbifLegendEntry, {})
+              ]
+            }
+          ),
+          showDescendantLegend && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            IncludedTaxaLegend,
+            {
+              visibleGroups: descendantLegend.visibleGroups,
+              unmappableGroups: descendantLegend.unmappableGroups,
+              showGbif: !!gbifChecklistKey && gbifAvailable !== false && gbifVisible
+            }
+          )
+        ]
+      }
+    );
   };
   const LayerControl = ({
     open: open2,
@@ -78853,7 +78867,8 @@ html body {
           title: "Layers",
           style: {
             position: "absolute",
-            top: 10,
+            // Sits just below the maplibre fullscreen control (top-right).
+            top: 48,
             right: 10,
             zIndex: 2,
             width: 30,
@@ -78876,7 +78891,8 @@ html body {
       {
         style: {
           position: "absolute",
-          top: 10,
+          // Aligns with the collapsed "+" button, below the fullscreen control.
+          top: 48,
           right: 10,
           zIndex: 2,
           background: "#fff",
@@ -79100,48 +79116,52 @@ html body {
     if (!showMap && !hasAnyRecords) return null;
     const unmappable = baseUnmappable + fetchFailures;
     const showToggle = hasAnyRecords;
-    const activeView = showMap && showToggle ? view : showMap ? "map" : "list";
-    const body = activeView === "map" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      showToggle ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Radio.Group,
-        {
-          size: "small",
-          value: view,
-          onChange: (e2) => setView(e2.target.value),
-          style: { marginBottom: 8 },
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Radio.Button, { value: "map", children: "Map" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Radio.Button, { value: "list", children: "List" })
-          ]
-        }
-      ) : (
-        // Reserve the vertical space the Map/List toggle would occupy so the
-        // map's top edge lines up with the "Distributions" label.
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: 24, marginBottom: 8 } })
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        DistributionsMap,
-        {
-          records: mappable,
-          onUnmappable: setFetchFailures,
-          datasetKey,
-          focalTaxon,
-          rankOrder,
-          gbifChecklistKey,
-          gbifAvailable
-        }
-      ),
-      showToggle && unmappable > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { onClick: () => setView("list"), style: { cursor: "pointer" }, children: [
-        "+",
-        unmappable,
-        " distribution",
-        unmappable === 1 ? "" : "s",
-        " not on map"
-      ] }) })
-    ] }) : (
-      // List view: either the user toggled to it, or there is no map to show.
-      /* @__PURE__ */ jsxRuntimeExports.jsx(ListView, { datasetKey, data })
-    );
+    let body;
+    if (!showMap) {
+      body = /* @__PURE__ */ jsxRuntimeExports.jsx(ListView, { datasetKey, data });
+    } else {
+      const activeView = showToggle ? view : "map";
+      body = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        showToggle ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Radio.Group,
+          {
+            size: "small",
+            value: activeView,
+            onChange: (e2) => setView(e2.target.value),
+            style: { marginBottom: 8 },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Radio.Button, { value: "map", children: "Map" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Radio.Button, { value: "list", children: "List" })
+            ]
+          }
+        ) : (
+          // Reserve the vertical space the Map/List toggle would occupy so the
+          // map's top edge lines up with the "Distributions" label.
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { height: 24, marginBottom: 8 } })
+        ),
+        activeView === "map" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            DistributionsMap,
+            {
+              records: mappable,
+              onUnmappable: setFetchFailures,
+              datasetKey,
+              focalTaxon,
+              rankOrder,
+              gbifChecklistKey,
+              gbifAvailable
+            }
+          ),
+          showToggle && unmappable > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: { marginTop: 6 }, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("a", { onClick: () => setView("list"), style: { cursor: "pointer" }, children: [
+            "+",
+            unmappable,
+            " distribution",
+            unmappable === 1 ? "" : "s",
+            " not on map"
+          ] }) })
+        ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ListView, { datasetKey, data })
+      ] });
+    }
     const content = /* @__PURE__ */ jsxRuntimeExports.jsx("div", { style: style2, children: body });
     return label ? /* @__PURE__ */ jsxRuntimeExports.jsx(PresentationItem$1, { md: md2, label, children: content }) : content;
   };
@@ -87579,7 +87599,6 @@ html body {
             /* @__PURE__ */ jsxRuntimeExports.jsx(
               DistributionsTable,
               {
-                style: { marginTop: "-3px" },
                 label: "Distributions",
                 md,
                 data: (info == null ? void 0 : info.distributions) || [],