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

package/dist/interactive-component-library.js

@@ -2373,13 +2373,13 @@ var d = (E) => {
     return 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,
@@ -2387,11 +2387,12 @@ const defaultStyles$3 = {
   enter,
   exitDone,
   enterActive,
-  exitActive
+  exit
 };
 function Modal({
   visible = false,
   blurBackground = true,
+  alwaysMounted = false,
   styles: styles2,
   children,
   onClickOutside
@@ -2418,10 +2419,11 @@ function Modal({
   }, [onClick, visible]);
   if (typeof document === "undefined")
     return;
-  return createPortal(jsx(d, {
+  return jsx(d, {
     in: visible,
     duration: 300,
     classNames: styles2,
+    alwaysMounted,
     children: jsx("div", {
       className: [styles2.transitionContainer, blurBackground && styles2.blur, visible && styles2.visible].join(" "),
       onClick,
@@ -2431,7 +2433,7 @@ function Modal({
         children
       })
     })
-  }), document.body);
+  });
 }
 const container$1 = "_container_6u92g_1";
 const button$3 = "_button_6u92g_5";
@@ -3884,6 +3886,21 @@ function scalePadding(padding, ratio) {
   };
   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) {
@@ -5921,7 +5938,9 @@ let Map$2 = class Map2 {
     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) {
@@ -6067,22 +6086,11 @@ let Map$2 = class Map2 {
   /** 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) {
@@ -6317,11 +6325,11 @@ class View {
     };
   }
 }
-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,
@@ -6755,7 +6763,7 @@ class Text {
     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: {} };
@@ -6889,7 +6897,14 @@ class VectorSource {
   }
   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;
@@ -7816,7 +7831,7 @@ function Ticker({
         className: styles.buttons,
         children: [jsx(ArrowButton, {
           onClick: () => setPageIndex((d2) => d2 + 1),
-          disabled: pageIndex >= numberOfPages - 1
+          disabled: pageIndex >= numberOfPages - 2
         }), jsx(ArrowButton, {
           direction: "left",
           onClick: () => setPageIndex((d2) => d2 - 1),