@guardian/interactive-component-library 0.1.0-alpha.49 → 0.1.0-alpha.51

package/dist/interactive-component-library.umd.cjs

@@ -2369,13 +2369,13 @@
       return preact.cloneElement(t, { className: i });
     });
   };
-  const transitionContainer = "_transitionContainer_48fp9_1";
-  const blur = "_blur_48fp9_11";
-  const modalBox = "_modalBox_48fp9_16";
-  const enter = "_enter_48fp9_25";
-  const exitDone = "_exitDone_48fp9_26";
-  const enterActive = "_enterActive_48fp9_37";
-  const exitActive = "_exitActive_48fp9_48";
+  const transitionContainer = "_transitionContainer_11twd_1";
+  const blur = "_blur_11twd_11";
+  const modalBox = "_modalBox_11twd_16";
+  const enter = "_enter_11twd_25";
+  const exitDone = "_exitDone_11twd_26";
+  const enterActive = "_enterActive_11twd_37";
+  const exit = "_exit_11twd_26";
   const defaultStyles$3 = {
     transitionContainer,
     blur,
@@ -2383,11 +2383,12 @@
     enter,
     exitDone,
     enterActive,
-    exitActive
+    exit
   };
   function Modal({
     visible = false,
     blurBackground = true,
+    alwaysMounted = false,
     styles: styles2,
     children,
     onClickOutside
@@ -2414,10 +2415,11 @@
     }, [onClick, visible]);
     if (typeof document === "undefined")
       return;
-    return compat.createPortal(jsxRuntime.jsx(d, {
+    return jsxRuntime.jsx(d, {
       in: visible,
       duration: 300,
       classNames: styles2,
+      alwaysMounted,
       children: jsxRuntime.jsx("div", {
         className: [styles2.transitionContainer, blurBackground && styles2.blur, visible && styles2.visible].join(" "),
         onClick,
@@ -2427,7 +2429,7 @@
           children
         })
       })
-    }), document.body);
+    });
   }
   const container$1 = "_container_6u92g_1";
   const button$3 = "_button_6u92g_5";
@@ -3880,6 +3882,21 @@
     };
     return scaled;
   }
+  function sizeForElement(element) {
+    const computedStyle = getComputedStyle(element);
+    if (!computedStyle)
+      return null;
+    let size;
+    const width = element.offsetWidth - parseFloat(computedStyle["borderLeftWidth"]) - parseFloat(computedStyle["paddingLeft"]) - parseFloat(computedStyle["paddingRight"]) - parseFloat(computedStyle["borderRightWidth"]);
+    const height = element.offsetHeight - parseFloat(computedStyle["borderTopWidth"]) - parseFloat(computedStyle["paddingTop"]) - parseFloat(computedStyle["paddingBottom"]) - parseFloat(computedStyle["borderBottomWidth"]);
+    if (!isNaN(width) && !isNaN(height)) {
+      size = [width, height];
+      if (!hasArea(size) && !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length)) {
+        console.warn("No map visible because the map container's width or height are 0.");
+      }
+    }
+    return size;
+  }
   function arrayEquals(arr1, arr2) {
     const len1 = arr1.length;
     if (len1 !== arr2.length) {
@@ -5917,7 +5934,9 @@
       this._viewport.style.height = "100%";
       this.target.appendChild(this._viewport);
       this._renderer = new MapRenderer(this);
-      this._resizeObserver = new ResizeObserver(() => this._updateSize());
+      this._resizeObserver = new ResizeObserver(() => {
+        this._updateSize();
+      });
       this._resizeObserver.observe(this.target);
       this._viewport.addEventListener("touchmove", (event) => {
         if (event.targetTouches.length < 2 && this.collaborativeGesturesEnabled) {
@@ -6063,22 +6082,11 @@
     /** PRIVATE METHODS */
     _updateSize() {
       const targetElement = this.target;
-      let size;
-      if (targetElement) {
-        const computedStyle = getComputedStyle(targetElement);
-        const width = targetElement.offsetWidth - parseFloat(computedStyle["borderLeftWidth"]) - parseFloat(computedStyle["paddingLeft"]) - parseFloat(computedStyle["paddingRight"]) - parseFloat(computedStyle["borderRightWidth"]);
-        const height = targetElement.offsetHeight - parseFloat(computedStyle["borderTopWidth"]) - parseFloat(computedStyle["paddingTop"]) - parseFloat(computedStyle["paddingBottom"]) - parseFloat(computedStyle["borderBottomWidth"]);
-        if (!isNaN(width) && !isNaN(height)) {
-          size = [width, height];
-          if (!hasArea(size) && !!(targetElement.offsetWidth || targetElement.offsetHeight || targetElement.getClientRects().length)) {
-            console.warn("No map visible because the map container's width or height are 0.");
-          }
-        }
-      }
+      let newSize = sizeForElement(targetElement);
       const oldSize = this.size;
-      if (size && (!oldSize || !arrayEquals(size, oldSize))) {
-        this._size = size;
-        this._updateViewportSize(size);
+      if (newSize && (!oldSize || !arrayEquals(newSize, oldSize))) {
+        this._size = newSize;
+        this._updateViewportSize(newSize);
       }
     }
     _updateViewportSize(size) {
@@ -6313,11 +6321,11 @@
       };
     }
   }
-  const mapContainer = "_mapContainer_qlxau_9";
-  const helpTextContainer = "_helpTextContainer_qlxau_15";
-  const helpText = "_helpText_qlxau_15";
-  const desktopHelpText = "_desktopHelpText_qlxau_40";
-  const mobileHelpText$1 = "_mobileHelpText_qlxau_48";
+  const mapContainer = "_mapContainer_1ogf3_9";
+  const helpTextContainer = "_helpTextContainer_1ogf3_15";
+  const helpText = "_helpText_1ogf3_15";
+  const desktopHelpText = "_desktopHelpText_1ogf3_40";
+  const mobileHelpText$1 = "_mobileHelpText_1ogf3_48";
   const styles$3 = {
     mapContainer,
     helpTextContainer,
@@ -6751,7 +6759,7 @@
       this.fontWeight = (options == null ? void 0 : options.fontWeight) || "400";
       this.lineHeight = (options == null ? void 0 : options.lineHeight) || 1.3;
       this.color = (options == null ? void 0 : options.color) || "#121212";
-      this.textShadow = (options == null ? void 0 : options.textShadow) || "1px 1px 0px white, -1px -1px 0px white, -1px 1px 0px white, 1px -1px white";
+      this.textShadow = (options == null ? void 0 : options.textShadow) || "1px 1px 0px #f6f6f6, -1px -1px 0px #f6f6f6, -1px 1px 0px #f6f6f6, 1px -1px #f6f6f6";
     }
   }
   var rbushKnn = { exports: {} };
@@ -6885,7 +6893,14 @@
     }
     getFeaturesAtCoordinate(coordinate) {
       const [lon, lat] = coordinate;
-      return knn$1(this._featuresRtree, lon, lat, 1, (d2) => d2.feature.containsCoordinate(coordinate)).map((d2) => d2.feature);
+      const features = knn$1(this._featuresRtree, lon, lat, 10, (d2) => d2.feature.containsCoordinate(coordinate)).map((d2) => {
+        const midX = d2.minX + (d2.minX + d2.maxX) / 2;
+        const midY = d2.minY + (d2.minY + d2.maxY) / 2;
+        d2.distance = Math.hypot(midX - lon, midY - lat);
+        return d2;
+      });
+      features.sort((a, b) => a.distance - b.distance);
+      return features.map((d2) => d2.feature);
     }
     getFeaturesInExtent(extent) {
       const [minX, minY, maxX, maxY] = extent;
@@ -7812,7 +7827,7 @@
           className: styles.buttons,
           children: [jsxRuntime.jsx(ArrowButton, {
             onClick: () => setPageIndex((d2) => d2 + 1),
-            disabled: pageIndex >= numberOfPages - 1
+            disabled: pageIndex >= numberOfPages - 2
           }), jsxRuntime.jsx(ArrowButton, {
             direction: "left",
             onClick: () => setPageIndex((d2) => d2 - 1),