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

package/dist/interactive-component-library.js

@@ -145,12 +145,14 @@ const LegendItem = ({
     })]
   });
 };
-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) {
@@ -223,7 +225,7 @@ function StackedBar({
   const renderLabel = (config, i) => jsx("text", {
     ref: (element) => textElements.current[i] = element,
     "text-rendering": "optimizeLegibility",
-    className: styles2.label,
+    className: `${styles2.label} ${config.hasStroke ? styles2.labelStroke : ""}`,
     style: {
       display: "visible"
     },
@@ -275,6 +277,10 @@ function StackedBar({
     });
     return preventOverlap(labels, 0, labelOverlapConfig.labelSize, "x", labelOverlapConfig.moveBothLabels);
   }, [stack, height, width]);
+  const strokedHangingLabelConfig = useMemo(() => [...hangingLabelConfig].map((l) => ({
+    ...l,
+    hasStroke: true
+  })), [hangingLabelConfig]);
   const backgroundRect2 = jsx("g", {
     children: jsx("rect", {
       x: "0",
@@ -292,7 +298,7 @@ function StackedBar({
       viewBox: `0 0 ${width} ${svgHeight}`,
       xmlns: "http://www.w3.org/2000/svg",
       children: [showBackgroundRect && backgroundRect2, 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))]
       })]
     });
   }
@@ -479,7 +485,10 @@ const Waffle = ({
   numberOfRows,
   type = WaffleType.circle,
   idAccessor,
-  onMouseOver,
+  onMouseOver = () => {
+  },
+  onClick = () => {
+  },
   styles: styles2
 }) => {
   const containerRef = useRef();
@@ -504,6 +513,7 @@ const Waffle = ({
             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,
@@ -514,6 +524,7 @@ const Waffle = ({
             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})`
@@ -1937,11 +1948,11 @@ const ToplineResult = forwardRef(({
     })]
   });
 });
-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,
@@ -2144,14 +2155,14 @@ function SearchIcon() {
     })
   });
 }
-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,
@@ -2190,6 +2201,7 @@ function SearchInput({
       onSelectSuggestion(suggestions2[selectedIndex]);
     } else if (event.key === "Enter") {
       onSubmit(inputRef.current.value);
+      inputRef.current.blur();
     }
   }
   async function inputChanged(input2) {
@@ -2205,7 +2217,7 @@ function SearchInput({
     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 jsxs("div", {
     className: styles2.searchContainer,
     children: [jsx("input", {
@@ -2445,6 +2457,8 @@ function Modal({
       }
     };
   }, [onClick, visible]);
+  if (typeof document === "undefined")
+    return;
   return createPortal(jsx(d, {
     in: visible,
     duration: 300,
@@ -3715,10 +3729,10 @@ function IconPlus$1() {
     })
   });
 }
-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({
@@ -3762,15 +3776,15 @@ function useOrganisedChildren(children) {
   }, [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(),
@@ -3891,10 +3905,11 @@ function hasArea(size) {
   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) {
@@ -3907,8 +3922,8 @@ function scaleSize(size, ratio, dest) {
 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;
@@ -4620,17 +4635,18 @@ class Dispatcher {
       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: () => {
 } };
@@ -5936,6 +5952,7 @@ let Map$2 = class Map2 {
     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";
@@ -5962,9 +5979,9 @@ let Map$2 = class Map2 {
     }).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
+      });
     });
     select(this._viewport).call(this._zoomBehaviour);
   }
@@ -5995,7 +6012,7 @@ let Map$2 = class Map2 {
   addLayers(layers) {
     this.layers = this.layers.concat(layers);
     layers.forEach((layer) => {
-      layer.on(EventType.CHANGE, () => {
+      layer.on(MapEvent.CHANGE, () => {
         this._requestRender();
       });
     });
@@ -6170,12 +6187,12 @@ class View {
   }
   // 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
@@ -6232,12 +6249,13 @@ class View {
   }
   // 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) {
@@ -6260,6 +6278,90 @@ class View {
     };
   }
 }
+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 = forwardRef(({
+  config,
+  onLoad,
+  children
+}, ref) => {
+  const {
+    layers
+  } = children;
+  const [map, setMap] = useState();
+  const [hideDefaultHelpText, setHideDefaultHelpText] = useState(false);
+  const [zoomHelpText, setZoomHelpText] = useState("");
+  const [highlightHelpText, setHighlightHelpText] = useState(false);
+  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);
+    };
+  }, []);
+  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]);
+  useEffect(() => {
+    if (map && layers !== map.layers) {
+      map.setLayers(layers);
+    }
+  }, [map, layers]);
+  const targetRef = useRef();
+  const hideHelpText = hideDefaultHelpText && !highlightHelpText;
+  const helpText2 = highlightHelpText ? zoomHelpText : config.defaultHelpText;
+  return jsx("div", {
+    ref: targetRef,
+    className: styles$3.mapContainer,
+    children: jsx("div", {
+      className: styles$3.helpTextContainer,
+      style: {
+        opacity: hideHelpText ? 0 : 1
+      },
+      "aria-hidden": true,
+      children: jsx("p", {
+        className: [styles$3.helpText, highlightHelpText && styles$3.highlight].join(" "),
+        children: helpText2
+      })
+    })
+  });
+});
 function IconMinus() {
   return jsx("svg", {
     width: "22",
@@ -6307,10 +6409,10 @@ function IconReset({
     })
   });
 }
-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({
@@ -6332,17 +6434,17 @@ function ZoomControl({
     onReset(event);
   };
   return jsxs("div", {
-    className: styles$3.zoomControl,
+    className: styles$2.zoomControl,
     children: [jsx("button", {
-      className: styles$3.button,
+      className: styles$2.button,
       onClick: _onZoomIn,
       children: jsx(IconPlus, {})
     }), jsx("button", {
-      className: styles$3.button,
+      className: styles$2.button,
       onClick: _onZoomOut,
       children: jsx(IconMinus, {})
     }), jsx("button", {
-      className: styles$3.button,
+      className: styles$2.button,
       onClick: _onReset,
       disabled: !resetEnabled,
       children: jsx(IconReset, {
@@ -6351,101 +6453,6 @@ function ZoomControl({
     })]
   });
 }
-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 = forwardRef(({
-  config,
-  children
-}, ref) => {
-  const {
-    controls: controls2,
-    layers
-  } = children;
-  const [map, setMap] = useState();
-  const [currentZoomLevel, setCurrentZoomLevel] = useState(1);
-  const [hideDefaultHelpText, setHideDefaultHelpText] = useState(false);
-  const [zoomHelpText, setZoomHelpText] = useState("");
-  const [highlightHelpText, setHighlightHelpText] = useState(false);
-  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);
-    };
-  }, []);
-  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]);
-  useEffect(() => {
-    if (map && layers !== map.layers) {
-      map.setLayers(layers);
-    }
-  }, [map, layers]);
-  const targetRef = useRef();
-  const hideHelpText = hideDefaultHelpText && !highlightHelpText;
-  const helpText2 = highlightHelpText ? zoomHelpText : config.defaultHelpText;
-  return jsxs("div", {
-    ref: targetRef,
-    className: styles$2.mapContainer,
-    children: [jsx("div", {
-      className: styles$2.helpTextContainer,
-      style: {
-        opacity: hideHelpText ? 0 : 1
-      },
-      "aria-hidden": true,
-      children: jsx("p", {
-        className: [styles$2.helpText, highlightHelpText && styles$2.highlight].join(" "),
-        children: helpText2
-      })
-    }), jsx("div", {
-      className: styles$2.zoomControl,
-      children: jsx(ZoomControl, {
-        resetEnabled: currentZoomLevel > 1,
-        onZoomIn: () => map.zoomIn(),
-        onZoomOut: () => map.zoomOut(),
-        onReset: () => map.zoomTo(1)
-      })
-    })]
-  });
-});
 const Projection = {
   geoAlbersUKComposite: geoAlbersUk(),
   geoAlbersEngland: geoAlbers().center([0, 52.7]).rotate([1.1743, 0]).parallels([50, 54]),
@@ -6789,7 +6796,7 @@ class VectorSource {
       });
     }
     this._features = features;
-    this.dispatcher.dispatch(EventType.CHANGE);
+    this.dispatcher.dispatch(MapEvent.CHANGE);
   }
 }
 class TextLayer {
@@ -6832,7 +6839,7 @@ class TextLayer {
   }
   set style(style2) {
     this._style = style2;
-    this.dispatcher.dispatch(EventType.CHANGE);
+    this.dispatcher.dispatch(MapEvent.CHANGE);
   }
   getExtent() {
     if (this._extent)
@@ -6970,9 +6977,9 @@ class VectorLayer {
       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) {
@@ -6991,7 +6998,7 @@ class VectorLayer {
   }
   set style(style2) {
     this._style = style2;
-    this.dispatcher.dispatch(EventType.CHANGE);
+    this.dispatcher.dispatch(MapEvent.CHANGE);
   }
   getStyleFunction() {
     const style2 = this.style;
@@ -7523,7 +7530,8 @@ function CoalitionsTracker({
         stack: list.stack,
         width: list.width,
         height: barChartHeight,
-        createSVG: true
+        createSVG: true,
+        styles: styles2
       })]
     }, index);
   };
@@ -7656,7 +7664,7 @@ function Ticker({
   }, []);
   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() {
@@ -7847,6 +7855,7 @@ export {
   Container,
   ControlChange,
   Controls,
+  Dispatcher,
   Dropdown,
   Fill,
   FirstPastThePostWaffle,
@@ -7859,6 +7868,7 @@ export {
   LegendItem,
   Map$1 as Map,
   MapConfiguration,
+  MapEvent,
   MapLayers,
   Modal,
   PageSection,
@@ -7888,6 +7898,7 @@ export {
   VectorSource,
   Waffle,
   WaffleType,
+  ZoomControl,
   _Projection,
   bboxFeature,
   interpolateFeatures,