@guardian/interactive-component-library 0.1.0-alpha.33 → 0.1.0-alpha.35

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

@@ -485,7 +485,8 @@
     },
     onClick = () => {
     },
-    styles: styles2
+    styles: styles2,
+    svgId
   }) => {
     const containerRef = hooks.useRef();
     const containerSize = useContainerSize(containerRef);
@@ -502,6 +503,7 @@
       children: containerSize && jsxRuntime.jsx("svg", {
         viewBox: `0 0 ${width} ${height}`,
         class: styles2.svg,
+        id: svgId,
         children: jsxRuntime.jsx("g", {
           children: units.map((unit2, j) => {
             let attributes;
@@ -1464,6 +1466,7 @@
           children: table2.columns.map((column, index) => {
             var _a;
             return jsxRuntime.jsx("th", {
+              scope: "col",
               className: mergeStyles(styles2.headerCell, (_a = column.styles) == null ? void 0 : _a.headerCell),
               children: jsxRuntime.jsx(HeaderCell, {
                 styles: mergeStyles(styles2, column.styles),
@@ -1549,7 +1552,8 @@
       right: 24,
       top: 20,
       bottom: 20
-    }
+    },
+    svgId
   }) => {
     const wrapperRef = hooks.useRef(null);
     const containerSize = useContainerSize(wrapperRef);
@@ -1580,6 +1584,7 @@
       class: styles2.svg,
       width,
       height,
+      id: svgId,
       children: jsxRuntime.jsxs("g", {
         transform: `translate(${padding.left} ${padding.top})`,
         children: [jsxRuntime.jsxs("g", {
@@ -1944,11 +1949,11 @@
       })]
     });
   });
-  const borderTop = "_borderTop_1b1s0_9";
-  const section = "_section_1b1s0_13";
-  const fullWidth = "_fullWidth_1b1s0_56";
-  const header = "_header_1b1s0_95";
-  const content = "_content_1b1s0_132";
+  const borderTop = "_borderTop_1yz7f_9";
+  const section = "_section_1yz7f_14";
+  const fullWidth = "_fullWidth_1yz7f_57";
+  const header = "_header_1yz7f_96";
+  const content = "_content_1yz7f_133";
   const defaultStyles$9 = {
     borderTop,
     section,
@@ -2415,22 +2420,25 @@
       return preact.cloneElement(t, { className: i });
     });
   };
-  const transitionContainer = "_transitionContainer_wws3j_1";
-  const modalBox = "_modalBox_wws3j_13";
-  const enter = "_enter_wws3j_21";
-  const exitDone = "_exitDone_wws3j_22";
-  const enterActive = "_enterActive_wws3j_31";
-  const exit = "_exit_wws3j_22";
+  const transitionContainer = "_transitionContainer_1syip_1";
+  const blur = "_blur_1syip_12";
+  const modalBox = "_modalBox_1syip_17";
+  const enter = "_enter_1syip_26";
+  const exitDone = "_exitDone_1syip_27";
+  const enterActive = "_enterActive_1syip_38";
+  const exitActive = "_exitActive_1syip_49";
   const styles$6 = {
     transitionContainer,
+    blur,
     modalBox,
     enter,
     exitDone,
     enterActive,
-    exit
+    exitActive
   };
   function Modal({
     visible = false,
+    blurBackground = true,
     children,
     onClickOutside
   }) {
@@ -2460,11 +2468,8 @@
       duration: 300,
       classNames: styles$6,
       children: jsxRuntime.jsx("div", {
-        class: styles$6.transitionContainer,
+        className: [styles$6.transitionContainer, blurBackground && styles$6.blur, visible && styles$6.visible].join(" "),
         onClick,
-        style: {
-          pointerEvents: visible ? "auto" : "none"
-        },
         children: jsxRuntime.jsx("div", {
           ref: modalBoxRef,
           class: styles$6.modalBox,
@@ -3867,7 +3872,7 @@
     const renderSVG = containerSize && !config.drawToCanvas;
     const zoomControl2 = organisedChildren.controls["ZoomControl"];
     const renderZoomControl = zoomControl2 && zoom.enabled;
-    return jsxRuntime.jsxs("div", {
+    return jsxRuntime.jsxs("figure", {
       ref: containerRef,
       className: styles$4.container,
       style: containerStyle,
@@ -4444,7 +4449,7 @@
     constructor(map) {
       this.map = map;
       this._element = document.createElement("div");
-      this._element.className = "gv-map";
+      this._element.className = "gv-layer-container";
       const style = this._element.style;
       style.position = "absolute";
       style.width = "100%";
@@ -5950,6 +5955,7 @@
       this.layers = [];
       this.dispatcher = new Dispatcher(this);
       this._viewport = document.createElement("div");
+      this._viewport.className = "gv-map";
       this._viewport.style.position = "relative";
       this._viewport.style.overflow = "hidden";
       this._viewport.style.top = 0;
@@ -5963,13 +5969,19 @@
       this.view.transform = d3Zoom.zoomIdentity;
       this._zoomBypassKey = navigator.userAgent.indexOf("Mac") !== -1 ? "metaKey" : "ctrlKey";
       this._zoomBehaviour = d3Zoom.zoom().scaleExtent(this.view.scaleExtent).filter((event) => {
+        const filterEvent = (filter) => {
+          this._filterEventCallback(filter);
+          return !filter;
+        };
         if (event.type === "wheel" && !event[this._zoomBypassKey]) {
-          this._filterEventCallback(this._zoomBypassKey);
-          return false;
+          return filterEvent(true);
         }
-        if ("targetTouches" in event && event.targetTouches.length < 2) {
-          console.log("stop event", event);
-          return false;
+        if ("targetTouches" in event) {
+          if (event.targetTouches.length < 2) {
+            return false;
+          }
+          event.preventDefault();
+          return filterEvent(false);
         }
         return (!event.ctrlKey || event.type === "wheel") && !event.button;
       }).on("zoom", (event) => {
@@ -5980,6 +5992,15 @@
         });
       });
       d3Selection.select(this._viewport).call(this._zoomBehaviour);
+      this._viewport.addEventListener("touchmove", (event) => {
+        if (event.targetTouches.length < 2) {
+          this._filterEventCallback(true);
+        }
+      });
+    }
+    destroy() {
+      this._resizeObserver.disconnect();
+      this._viewport.remove();
     }
     /** PUBLIC GETTERS */
     get size() {
@@ -5995,9 +6016,6 @@
     onFilterEvent(callback) {
       this._filterEventCallback = callback;
     }
-    onZoomEvent(callback) {
-      this._onZoomEventCallback = callback;
-    }
     fitObject(geoJSON) {
       this.view.fitObject(geoJSON);
       this._requestRender();
@@ -6018,7 +6036,7 @@
       if (layers === this.layers) {
         return;
       }
-      [...this.layers].forEach((layer) => {
+      new Array(...this.layers).forEach((layer) => {
         if (!layers.includes(layer)) {
           this.removeLayer(layer);
         }
@@ -6044,11 +6062,32 @@
     }) {
       return d3Selection.select(this._viewport).transition().duration(options.duration).call(this._zoomBehaviour.scaleTo, zoomLevel).end();
     }
-    zoomToFeature(feature, focalPoint) {
+    zoomToFeature(feature, focalPoint, padding = {
+      top: 40,
+      right: 40,
+      bottom: 40,
+      left: 40
+    }) {
       const extent = feature.getExtent();
-      const [[x, y], [width, height]] = this.view.boundsForExtent(extent);
-      const viewPortSize = this.view.viewPortSize;
-      const newTransform = d3Zoom.zoomIdentity.translate(viewPortSize[0] / 2, viewPortSize[1] / 2).scale(Math.min(this.view.maxZoom, 0.9 * Math.min(viewPortSize[0] / width, viewPortSize[1] / height))).translate(-x - width / 2, -y - height / 2);
+      const [[featureX, featureY], [featureWidth, featureHeight]] = this.view.boundsForExtent(extent);
+      const [viewPortWidth, viewPortHeight] = this.view.viewPortSize;
+      const paddedViewPortWidth = viewPortWidth - padding.left - padding.right;
+      const paddedViewPortHeight = viewPortHeight - padding.top - padding.bottom;
+      const featureScale = Math.min(paddedViewPortWidth / featureWidth, paddedViewPortHeight / featureHeight);
+      const zoomScale = Math.min(this.view.maxZoom, featureScale);
+      const scaledPadding = {
+        top: padding.top / zoomScale,
+        right: padding.right / zoomScale,
+        bottom: padding.bottom / zoomScale,
+        left: padding.left / zoomScale
+      };
+      const paddedFeatureBounds = {
+        x: featureX - scaledPadding.left,
+        y: featureY - scaledPadding.top,
+        width: featureWidth + scaledPadding.left + scaledPadding.right,
+        height: featureHeight + scaledPadding.top + scaledPadding.bottom
+      };
+      const newTransform = d3Zoom.zoomIdentity.translate(viewPortWidth / 2, viewPortHeight / 2).scale(zoomScale).translate(-(paddedFeatureBounds.x + paddedFeatureBounds.width / 2), -(paddedFeatureBounds.y + paddedFeatureBounds.height / 2));
       d3Selection.select(this._viewport).transition().duration(500).call(this._zoomBehaviour.transform, newTransform, focalPoint);
     }
     async resetZoom(options) {
@@ -6274,16 +6313,19 @@
       };
     }
   }
-  const mapContainer = "_mapContainer_y5eeh_9";
-  const helpTextContainer = "_helpTextContainer_y5eeh_15";
-  const helpText = "_helpText_y5eeh_15";
-  const highlight = "_highlight_y5eeh_40";
+  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 styles$3 = {
     mapContainer,
     helpTextContainer,
     helpText,
-    highlight
+    desktopHelpText,
+    mobileHelpText: mobileHelpText$1
   };
+  const mobileHelpText = "Use two fingers to zoom";
   const Map$1 = compat.forwardRef(({
     config,
     onLoad,
@@ -6292,10 +6334,10 @@
     const {
       layers
     } = children;
+    const targetRef = hooks.useRef();
     const [map, setMap] = hooks.useState();
-    const [hideDefaultHelpText, setHideDefaultHelpText] = hooks.useState(false);
     const [zoomHelpText, setZoomHelpText] = hooks.useState("");
-    const [highlightHelpText, setHighlightHelpText] = hooks.useState(false);
+    const [showHelpText, setShowHelpText] = hooks.useState(false);
     hooks.useEffect(() => {
       const map2 = new Map$2({
         view: new View(config.view),
@@ -6309,6 +6351,7 @@
       const zoomHelpText2 = navigator.userAgent.indexOf("Mac") !== -1 ? "Use ⌘ + scroll to zoom" : "Use Ctrl + scroll to zoom";
       setZoomHelpText(zoomHelpText2);
       return () => {
+        map2.destroy();
         if (ref)
           ref.current = null;
         setMap(null);
@@ -6318,16 +6361,15 @@
       if (!map)
         return;
       let timeoutID;
-      map.onFilterEvent(() => {
+      map.onFilterEvent((showHelpText2) => {
         if (timeoutID)
           clearTimeout(timeoutID);
-        setHighlightHelpText(true);
-        timeoutID = setTimeout(() => {
-          setHighlightHelpText();
-        }, 1e3);
-      });
-      map.onZoomEvent((zoomLevel) => {
-        setHideDefaultHelpText(zoomLevel > 1);
+        setShowHelpText(showHelpText2);
+        if (showHelpText2) {
+          timeoutID = setTimeout(() => {
+            setShowHelpText(false);
+          }, 1e3);
+        }
       });
       return () => {
         if (timeoutID)
@@ -6339,22 +6381,22 @@
         map.setLayers(layers);
       }
     }, [map, layers]);
-    const targetRef = hooks.useRef();
-    const hideHelpText = hideDefaultHelpText && !highlightHelpText;
-    const helpText2 = highlightHelpText ? zoomHelpText : config.defaultHelpText;
-    return jsxRuntime.jsx("div", {
+    return jsxRuntime.jsx("figure", {
       ref: targetRef,
       className: styles$3.mapContainer,
-      children: jsxRuntime.jsx("div", {
+      children: jsxRuntime.jsxs("div", {
         className: styles$3.helpTextContainer,
         style: {
-          opacity: hideHelpText ? 0 : 1
+          opacity: showHelpText ? 1 : 0
         },
         "aria-hidden": true,
-        children: jsxRuntime.jsx("p", {
-          className: [styles$3.helpText, highlightHelpText && styles$3.highlight].join(" "),
-          children: helpText2
-        })
+        children: [jsxRuntime.jsx("p", {
+          className: [styles$3.helpText, styles$3.desktopHelpText].join(" "),
+          children: zoomHelpText
+        }), jsxRuntime.jsx("p", {
+          className: [styles$3.helpText, styles$3.mobileHelpText].join(" "),
+          children: mobileHelpText
+        })]
       })
     });
   });
@@ -6464,7 +6506,8 @@
     render(frameState, feature, context) {
       const {
         projection,
-        transform
+        transform,
+        pixelRatio
       } = frameState.viewState;
       this.drawingFunction.context(context);
       context.beginPath();
@@ -6477,7 +6520,7 @@
         fill
       } = this.style;
       if (stroke) {
-        context.lineWidth = stroke.width / transform.k;
+        context.lineWidth = stroke.width * pixelRatio / transform.k;
         context.strokeStyle = stroke.color;
         context.stroke();
       }
@@ -6868,6 +6911,8 @@
       this.featureRenderer = new FeatureRenderer();
     }
     renderFrame(frameState, targetElement) {
+      if (this.layer.opacity === 0)
+        return targetElement;
       const {
         projection,
         sizeInPixels,
@@ -6885,14 +6930,14 @@
       const source = this.layer.source;
       const features = source.getFeaturesInExtent(visibleExtent);
       for (const feature of features) {
-        context.save();
         const styleFunction2 = feature.getStyleFunction() || this.layer.getStyleFunction();
         const featureStyle = styleFunction2(feature);
-        if (!featureStyle)
-          continue;
-        this.featureRenderer.setStyle(featureStyle);
-        this.featureRenderer.render(frameState, feature, context);
-        context.restore();
+        if ((featureStyle == null ? void 0 : featureStyle.stroke) || (featureStyle == null ? void 0 : featureStyle.fill)) {
+          context.save();
+          this.featureRenderer.setStyle(featureStyle);
+          this.featureRenderer.render(frameState, feature, context);
+          context.restore();
+        }
       }
       if (Object.prototype.hasOwnProperty.call(projection, "getCompositionBorders")) {
         context.beginPath();
@@ -7420,7 +7465,7 @@
         height: window.innerHeight
       };
     });
-    hooks.useEffect(() => {
+    hooks.useLayoutEffect(() => {
       if (typeof window === "undefined")
         return;
       function handleResize() {
@@ -7511,7 +7556,7 @@
           position: "relative",
           zIndex: 2
         },
-        children: [jsxRuntime.jsx("h4", {
+        children: [jsxRuntime.jsx("h3", {
           className: styles2.title,
           children: list.title
         }), jsxRuntime.jsx("p", {