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

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

@@ -141,12 +141,14 @@
       })]
     });
   };
-  const bar$2 = "_bar_bf839_1";
-  const label$1 = "_label_bf839_5";
-  const backgroundRect = "_backgroundRect_bf839_11";
+  const bar$2 = "_bar_1jxh9_1";
+  const label$1 = "_label_1jxh9_5";
+  const labelStroke = "_labelStroke_1jxh9_11";
+  const backgroundRect = "_backgroundRect_1jxh9_17";
   const defaultStyles$u = {
     bar: bar$2,
     label: label$1,
+    labelStroke,
     backgroundRect
   };
   function preventOverlap(labelPositions, iteration = 0, labelSize = 12, coordinate = "y", moveBothLabels = true) {
@@ -219,7 +221,7 @@
     const renderLabel = (config, i) => jsxRuntime.jsx("text", {
       ref: (element) => textElements.current[i] = element,
       "text-rendering": "optimizeLegibility",
-      className: styles2.label,
+      className: `${styles2.label} ${config.hasStroke ? styles2.labelStroke : ""}`,
       style: {
         display: "visible"
       },
@@ -271,6 +273,10 @@
       });
       return preventOverlap(labels, 0, labelOverlapConfig.labelSize, "x", labelOverlapConfig.moveBothLabels);
     }, [stack, height, width]);
+    const strokedHangingLabelConfig = hooks.useMemo(() => [...hangingLabelConfig].map((l) => ({
+      ...l,
+      hasStroke: true
+    })), [hangingLabelConfig]);
     const backgroundRect2 = jsxRuntime.jsx("g", {
       children: jsxRuntime.jsx("rect", {
         x: "0",
@@ -288,7 +294,7 @@
         viewBox: `0 0 ${width} ${svgHeight}`,
         xmlns: "http://www.w3.org/2000/svg",
         children: [showBackgroundRect && backgroundRect2, jsxRuntime.jsxs("g", {
-          children: [content2, labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))]
+          children: [content2, labelType === LabelType.hanging && !hideLabels && strokedHangingLabelConfig.map((config, i) => renderLabel(config, i)), labelType === LabelType.hanging && !hideLabels && hangingLabelConfig.map((config, i) => renderLabel(config, i))]
         })]
       });
     }
@@ -475,7 +481,10 @@
     numberOfRows,
     type = WaffleType.circle,
     idAccessor,
-    onMouseOver,
+    onMouseOver = () => {
+    },
+    onClick = () => {
+    },
     styles: styles2
   }) => {
     const containerRef = hooks.useRef();
@@ -500,6 +509,7 @@
               attributes = {
                 id: unit2[idAccessor] || `w-${j}`,
                 onMouseOver: (e) => onMouseOver(unit2, e),
+                onClick: (e) => onClick(unit2, e),
                 class: `${styles2.unit} ${unit2.class}`,
                 height: unitHeight,
                 width: unitWidth,
@@ -510,6 +520,7 @@
               attributes = {
                 id: unit2[idAccessor] || `w-${j}`,
                 onMouseOver: (e) => onMouseOver(unit2, e),
+                onClick: (e) => onClick(unit2, e),
                 class: `${styles2.unit} ${unit2.class}`,
                 r: unitWidth / 2,
                 transform: `translate(${unitWidth * Math.floor(j / numberOfRows) + unitWidth / 2}, ${unitHeight * (j % numberOfRows) + unitHeight / 2})`
@@ -1933,11 +1944,11 @@
       })]
     });
   });
-  const borderTop = "_borderTop_lw99b_9";
-  const section = "_section_lw99b_13";
-  const fullWidth = "_fullWidth_lw99b_56";
-  const header = "_header_lw99b_95";
-  const content = "_content_lw99b_132";
+  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 defaultStyles$9 = {
     borderTop,
     section,
@@ -2140,14 +2151,14 @@
       })
     });
   }
-  const searchContainer = "_searchContainer_1883t_1";
-  const input = "_input_1883t_5";
-  const searchIcon = "_searchIcon_1883t_23";
-  const clearButton = "_clearButton_1883t_32";
-  const suggestions = "_suggestions_1883t_38";
-  const suggestion = "_suggestion_1883t_38";
-  const selected$1 = "_selected_1883t_61";
-  const highlighted = "_highlighted_1883t_65";
+  const searchContainer = "_searchContainer_116es_1";
+  const input = "_input_116es_5";
+  const searchIcon = "_searchIcon_116es_27";
+  const clearButton = "_clearButton_116es_36";
+  const suggestions = "_suggestions_116es_42";
+  const suggestion = "_suggestion_116es_42";
+  const selected$1 = "_selected_116es_68";
+  const highlighted = "_highlighted_116es_72";
   const defaultStyles$5 = {
     searchContainer,
     input,
@@ -2186,6 +2197,7 @@
         onSelectSuggestion(suggestions2[selectedIndex]);
       } else if (event.key === "Enter") {
         onSubmit(inputRef.current.value);
+        inputRef.current.blur();
       }
     }
     async function inputChanged(input2) {
@@ -2201,7 +2213,7 @@
       inputRef.current.value = suggestion2.text;
       inputRef.current.blur();
     }
-    const showClearButton = ((_a = inputRef.current) == null ? void 0 : _a.value) && ((_b = inputRef.current) == null ? void 0 : _b.value) !== "";
+    const showClearButton = ((_a = inputRef.current) == null ? void 0 : _a.value) && ((_b = inputRef.current) == null ? void 0 : _b.value) !== "" || inputValue && inputValue !== "";
     return jsxRuntime.jsxs("div", {
       className: styles2.searchContainer,
       children: [jsxRuntime.jsx("input", {
@@ -2441,6 +2453,8 @@
         }
       };
     }, [onClick, visible]);
+    if (typeof document === "undefined")
+      return;
     return compat.createPortal(jsxRuntime.jsx(d, {
       in: visible,
       duration: 300,
@@ -3711,10 +3725,10 @@
       })
     });
   }
-  const zoomControl$3 = "_zoomControl_1qhlz_1";
+  const zoomControl$2 = "_zoomControl_1qhlz_1";
   const button$2 = "_button_1qhlz_7";
   const styles$5 = {
-    zoomControl: zoomControl$3,
+    zoomControl: zoomControl$2,
     button: button$2
   };
   function ZoomControl$1({
@@ -3758,15 +3772,15 @@
     }, [children]);
     return organisedChildren;
   }
-  const container = "_container_aj5oa_1";
-  const svg = "_svg_aj5oa_9";
-  const controls$1 = "_controls_aj5oa_15";
-  const zoomControl$2 = "_zoomControl_aj5oa_23";
+  const container = "_container_1ta61_1";
+  const svg = "_svg_1ta61_7";
+  const controls$1 = "_controls_1ta61_13";
+  const zoomControl$1 = "_zoomControl_1ta61_21";
   const styles$4 = {
     container,
     svg,
     controls: controls$1,
-    zoomControl: zoomControl$2
+    zoomControl: zoomControl$1
   };
   const _Projection = {
     geoAlbersUKComposite: geoAlbersUk(),
@@ -3887,10 +3901,11 @@
     return size[0] > 0 && size[1] > 0;
   }
   function sizeMinusPadding(size, padding) {
+    let newSize = [...size];
     if (padding) {
-      size = [size[0] - padding.left - padding.right, size[1] - padding.top - padding.bottom];
+      newSize = [size[0] - padding.left - padding.right, size[1] - padding.top - padding.bottom];
     }
-    return size;
+    return newSize;
   }
   function scaleSize(size, ratio, dest) {
     if (dest === void 0) {
@@ -3903,8 +3918,8 @@
   function scalePadding(padding, ratio) {
     const scaled = {
       top: Math.round(padding.top * ratio),
-      right: Math.round(padding.top * ratio),
-      bottom: Math.round(padding.top * ratio),
+      right: Math.round(padding.right * ratio),
+      bottom: Math.round(padding.bottom * ratio),
       left: Math.round(padding.left * ratio)
     };
     return scaled;
@@ -4616,17 +4631,18 @@
         return;
       listenersForEvent.delete(listenerKey);
     }
-    dispatch(eventType) {
+    dispatch(eventType, payload) {
       const listenersForEvent = this._listenersByEvent.get(eventType);
       if (!listenersForEvent)
         return;
       listenersForEvent.forEach((callback) => {
-        callback(this.target);
+        callback(this.target, payload);
       });
     }
   }
-  const EventType = {
-    CHANGE: "change"
+  const MapEvent = {
+    CHANGE: "change",
+    ZOOM: "zoom"
   };
   var noop = { value: () => {
   } };
@@ -5932,6 +5948,7 @@
       this.view = options.view;
       this.target = options.target;
       this.layers = [];
+      this.dispatcher = new Dispatcher(this);
       this._viewport = document.createElement("div");
       this._viewport.style.position = "relative";
       this._viewport.style.overflow = "hidden";
@@ -5958,9 +5975,9 @@
       }).on("zoom", (event) => {
         this.view.transform = event.transform;
         this._requestRender();
-        if (this._onZoomEventCallback) {
-          this._onZoomEventCallback(event.transform.k);
-        }
+        this.dispatcher.dispatch(MapEvent.ZOOM, {
+          currentZoomLevel: event.transform.k
+        });
       });
       d3Selection.select(this._viewport).call(this._zoomBehaviour);
     }
@@ -5991,7 +6008,7 @@
     addLayers(layers) {
       this.layers = this.layers.concat(layers);
       layers.forEach((layer) => {
-        layer.on(EventType.CHANGE, () => {
+        layer.on(MapEvent.CHANGE, () => {
           this._requestRender();
         });
       });
@@ -6166,12 +6183,12 @@
     }
     // map size in pixels (i.e. scaled by device pixel ratio)
     get mapSize() {
-      return sizeMinusPadding(scaleSize(this.viewPortSize, this.pixelRatio), this.scaledPadding);
+      return scaleSize(this.viewPortSize, this.pixelRatio);
     }
-    // padding in pixels (i.e. scaled by device pixel ratio)
     get padding() {
       return this._padding;
     }
+    // padding in pixels (i.e. scaled by device pixel ratio)
     get scaledPadding() {
       const scaledPadding = {
         ...this._padding
@@ -6228,12 +6245,13 @@
     }
     // get extent for drawn map
     getMapExtent() {
-      const [width, height] = this.mapSize;
-      const {
-        left,
-        top
-      } = this.scaledPadding;
-      return [[left, top], [width, height]];
+      const mapSizeInPixels = this.mapSize;
+      const paddingInPixels = this.scaledPadding;
+      return [[paddingInPixels.left, paddingInPixels.top], sizeMinusPadding(mapSizeInPixels, {
+        ...paddingInPixels,
+        left: 0,
+        top: 0
+      })];
     }
     // visible extent in map coordinates
     getVisibleExtent(transform, projection) {
@@ -6256,6 +6274,90 @@
       };
     }
   }
+  const mapContainer = "_mapContainer_y5eeh_9";
+  const helpTextContainer = "_helpTextContainer_y5eeh_15";
+  const helpText = "_helpText_y5eeh_15";
+  const highlight = "_highlight_y5eeh_40";
+  const styles$3 = {
+    mapContainer,
+    helpTextContainer,
+    helpText,
+    highlight
+  };
+  const Map$1 = compat.forwardRef(({
+    config,
+    onLoad,
+    children
+  }, ref) => {
+    const {
+      layers
+    } = children;
+    const [map, setMap] = hooks.useState();
+    const [hideDefaultHelpText, setHideDefaultHelpText] = hooks.useState(false);
+    const [zoomHelpText, setZoomHelpText] = hooks.useState("");
+    const [highlightHelpText, setHighlightHelpText] = hooks.useState(false);
+    hooks.useEffect(() => {
+      const map2 = new Map$2({
+        view: new View(config.view),
+        target: targetRef.current
+      });
+      map2.addLayers(layers);
+      setMap(map2);
+      if (ref)
+        ref.current = map2;
+      onLoad && onLoad(map2);
+      const zoomHelpText2 = navigator.userAgent.indexOf("Mac") !== -1 ? "Use ⌘ + scroll to zoom" : "Use Ctrl + scroll to zoom";
+      setZoomHelpText(zoomHelpText2);
+      return () => {
+        if (ref)
+          ref.current = null;
+        setMap(null);
+      };
+    }, []);
+    hooks.useEffect(() => {
+      if (!map)
+        return;
+      let timeoutID;
+      map.onFilterEvent(() => {
+        if (timeoutID)
+          clearTimeout(timeoutID);
+        setHighlightHelpText(true);
+        timeoutID = setTimeout(() => {
+          setHighlightHelpText();
+        }, 1e3);
+      });
+      map.onZoomEvent((zoomLevel) => {
+        setHideDefaultHelpText(zoomLevel > 1);
+      });
+      return () => {
+        if (timeoutID)
+          clearTimeout(timeoutID);
+      };
+    }, [map]);
+    hooks.useEffect(() => {
+      if (map && layers !== map.layers) {
+        map.setLayers(layers);
+      }
+    }, [map, layers]);
+    const targetRef = hooks.useRef();
+    const hideHelpText = hideDefaultHelpText && !highlightHelpText;
+    const helpText2 = highlightHelpText ? zoomHelpText : config.defaultHelpText;
+    return jsxRuntime.jsx("div", {
+      ref: targetRef,
+      className: styles$3.mapContainer,
+      children: jsxRuntime.jsx("div", {
+        className: styles$3.helpTextContainer,
+        style: {
+          opacity: hideHelpText ? 0 : 1
+        },
+        "aria-hidden": true,
+        children: jsxRuntime.jsx("p", {
+          className: [styles$3.helpText, highlightHelpText && styles$3.highlight].join(" "),
+          children: helpText2
+        })
+      })
+    });
+  });
   function IconMinus() {
     return jsxRuntime.jsx("svg", {
       width: "22",
@@ -6303,10 +6405,10 @@
       })
     });
   }
-  const zoomControl$1 = "_zoomControl_13wd1_1";
+  const zoomControl = "_zoomControl_13wd1_1";
   const button$1 = "_button_13wd1_7";
-  const styles$3 = {
-    zoomControl: zoomControl$1,
+  const styles$2 = {
+    zoomControl,
     button: button$1
   };
   function ZoomControl({
@@ -6328,17 +6430,17 @@
       onReset(event);
     };
     return jsxRuntime.jsxs("div", {
-      className: styles$3.zoomControl,
+      className: styles$2.zoomControl,
       children: [jsxRuntime.jsx("button", {
-        className: styles$3.button,
+        className: styles$2.button,
         onClick: _onZoomIn,
         children: jsxRuntime.jsx(IconPlus, {})
       }), jsxRuntime.jsx("button", {
-        className: styles$3.button,
+        className: styles$2.button,
         onClick: _onZoomOut,
         children: jsxRuntime.jsx(IconMinus, {})
       }), jsxRuntime.jsx("button", {
-        className: styles$3.button,
+        className: styles$2.button,
         onClick: _onReset,
         disabled: !resetEnabled,
         children: jsxRuntime.jsx(IconReset, {
@@ -6347,101 +6449,6 @@
       })]
     });
   }
-  const mapContainer = "_mapContainer_aknz0_9";
-  const helpTextContainer = "_helpTextContainer_aknz0_15";
-  const helpText = "_helpText_aknz0_15";
-  const highlight = "_highlight_aknz0_40";
-  const zoomControl = "_zoomControl_aknz0_45";
-  const styles$2 = {
-    mapContainer,
-    helpTextContainer,
-    helpText,
-    highlight,
-    zoomControl
-  };
-  const Map$1 = compat.forwardRef(({
-    config,
-    children
-  }, ref) => {
-    const {
-      controls: controls2,
-      layers
-    } = children;
-    const [map, setMap] = hooks.useState();
-    const [currentZoomLevel, setCurrentZoomLevel] = hooks.useState(1);
-    const [hideDefaultHelpText, setHideDefaultHelpText] = hooks.useState(false);
-    const [zoomHelpText, setZoomHelpText] = hooks.useState("");
-    const [highlightHelpText, setHighlightHelpText] = hooks.useState(false);
-    hooks.useEffect(() => {
-      const map2 = new Map$2({
-        view: new View(config.view),
-        target: targetRef.current
-      });
-      map2.addLayers(layers);
-      setMap(map2);
-      if (ref)
-        ref.current = map2;
-      const zoomHelpText2 = navigator.userAgent.indexOf("Mac") !== -1 ? "Use ⌘ + scroll to zoom" : "Use Ctrl + scroll to zoom";
-      setZoomHelpText(zoomHelpText2);
-      return () => {
-        if (ref)
-          ref.current = null;
-        setMap(null);
-      };
-    }, []);
-    hooks.useEffect(() => {
-      if (!map)
-        return;
-      let timeoutID;
-      map.onFilterEvent(() => {
-        if (timeoutID)
-          clearTimeout(timeoutID);
-        setHighlightHelpText(true);
-        timeoutID = setTimeout(() => {
-          setHighlightHelpText();
-        }, 1e3);
-      });
-      map.onZoomEvent((zoomLevel) => {
-        setCurrentZoomLevel(zoomLevel);
-        setHideDefaultHelpText(zoomLevel > 1);
-      });
-      return () => {
-        if (timeoutID)
-          clearTimeout(timeoutID);
-      };
-    }, [map]);
-    hooks.useEffect(() => {
-      if (map && layers !== map.layers) {
-        map.setLayers(layers);
-      }
-    }, [map, layers]);
-    const targetRef = hooks.useRef();
-    const hideHelpText = hideDefaultHelpText && !highlightHelpText;
-    const helpText2 = highlightHelpText ? zoomHelpText : config.defaultHelpText;
-    return jsxRuntime.jsxs("div", {
-      ref: targetRef,
-      className: styles$2.mapContainer,
-      children: [jsxRuntime.jsx("div", {
-        className: styles$2.helpTextContainer,
-        style: {
-          opacity: hideHelpText ? 0 : 1
-        },
-        "aria-hidden": true,
-        children: jsxRuntime.jsx("p", {
-          className: [styles$2.helpText, highlightHelpText && styles$2.highlight].join(" "),
-          children: helpText2
-        })
-      }), jsxRuntime.jsx("div", {
-        className: styles$2.zoomControl,
-        children: jsxRuntime.jsx(ZoomControl, {
-          resetEnabled: currentZoomLevel > 1,
-          onZoomIn: () => map.zoomIn(),
-          onZoomOut: () => map.zoomOut(),
-          onReset: () => map.zoomTo(1)
-        })
-      })]
-    });
-  });
   const Projection = {
     geoAlbersUKComposite: geoAlbersUk(),
     geoAlbersEngland: d3Geo.geoAlbers().center([0, 52.7]).rotate([1.1743, 0]).parallels([50, 54]),
@@ -6785,7 +6792,7 @@
         });
       }
       this._features = features;
-      this.dispatcher.dispatch(EventType.CHANGE);
+      this.dispatcher.dispatch(MapEvent.CHANGE);
     }
   }
   class TextLayer {
@@ -6828,7 +6835,7 @@
     }
     set style(style) {
       this._style = style;
-      this.dispatcher.dispatch(EventType.CHANGE);
+      this.dispatcher.dispatch(MapEvent.CHANGE);
     }
     getExtent() {
       if (this._extent)
@@ -6966,9 +6973,9 @@
         this._source.tearDown();
       }
       this._source = source;
-      source.on(EventType.CHANGE, () => {
+      source.on(MapEvent.CHANGE, () => {
         this._extent = null;
-        this.dispatcher.dispatch(EventType.CHANGE);
+        this.dispatcher.dispatch(MapEvent.CHANGE);
       });
     }
     setRawProjection(projection) {
@@ -6987,7 +6994,7 @@
     }
     set style(style) {
       this._style = style;
-      this.dispatcher.dispatch(EventType.CHANGE);
+      this.dispatcher.dispatch(MapEvent.CHANGE);
     }
     getStyleFunction() {
       const style = this.style;
@@ -7519,7 +7526,8 @@
           stack: list.stack,
           width: list.width,
           height: barChartHeight,
-          createSVG: true
+          createSVG: true,
+          styles: styles2
         })]
       }, index);
     };
@@ -7652,7 +7660,7 @@
     }, []);
     hooks.useLayoutEffect(() => {
       const tickerItemsContainer = tickerItemsRef.current;
-      const hideButtons2 = windowSize.width >= 480 ? tickerScrollRef.current.scrollWidth <= tickerItemsContainer.clientWidth : tickerScrollRef.current.scrollHeight <= tickerItemsContainer.clientHeight;
+      const hideButtons2 = windowSize.width >= 480 ? tickerScrollRef.current.scrollWidth <= tickerItemsContainer.clientWidth : childArray.length < 3;
       setHideButtons(hideButtons2);
     }, [windowSize, setHideButtons]);
     function toggleExpandedState() {
@@ -7842,6 +7850,7 @@
   exports2.Container = Container;
   exports2.ControlChange = ControlChange;
   exports2.Controls = Controls;
+  exports2.Dispatcher = Dispatcher;
   exports2.Dropdown = Dropdown;
   exports2.Fill = Fill;
   exports2.FirstPastThePostWaffle = FirstPastThePostWaffle;
@@ -7854,6 +7863,7 @@
   exports2.LegendItem = LegendItem;
   exports2.Map = Map$1;
   exports2.MapConfiguration = MapConfiguration;
+  exports2.MapEvent = MapEvent;
   exports2.MapLayers = MapLayers;
   exports2.Modal = Modal;
   exports2.PageSection = PageSection;
@@ -7883,6 +7893,7 @@
   exports2.VectorSource = VectorSource;
   exports2.Waffle = Waffle;
   exports2.WaffleType = WaffleType;
+  exports2.ZoomControl = ZoomControl;
   exports2._Projection = _Projection;
   exports2.bboxFeature = bboxFeature;
   exports2.interpolateFeatures = interpolateFeatures;