@guardian/interactive-component-library 0.1.0-alpha.15 → 0.1.0-alpha.17

package/dist/interactive-component-library.js

@@ -3,7 +3,7 @@ import { useRef, useState, useLayoutEffect, useCallback, useEffect, useMemo, use
 import { render, createElement, cloneElement, createContext, toChildArray } from "preact";
 import { useSyncExternalStore, createPortal, forwardRef } from "preact/compat";
 import { scaleLinear as scaleLinear$1 } from "d3-scale";
-import { geoStream, geoAlbers, geoPath, geoMercator } from "d3-geo";
+import { geoStream, geoAlbers, geoPath, geoContains, geoMercator } from "d3-geo";
 const main = "";
 const group = "_group_nq9z3_1";
 const rotated = "_rotated_nq9z3_6";
@@ -1589,33 +1589,33 @@ var d = (E) => {
     return cloneElement(t, { className: i });
   });
 };
-const transitionContainer = "_transitionContainer_1gzlr_1";
-const modalBox = "_modalBox_1gzlr_13";
-const enter = "_enter_1gzlr_21";
-const exitDone = "_exitDone_1gzlr_22";
-const enterActive = "_enterActive_1gzlr_31";
-const exit = "_exit_1gzlr_22";
-const styles$4 = {
-  transitionContainer,
-  modalBox,
-  enter,
-  exitDone,
-  enterActive,
-  exit
-};
-function Modal({
+const transitionContainer$1 = "_transitionContainer_1gzlr_1";
+const modalBox$1 = "_modalBox_1gzlr_13";
+const enter$1 = "_enter_1gzlr_21";
+const exitDone$1 = "_exitDone_1gzlr_22";
+const enterActive$1 = "_enterActive_1gzlr_31";
+const exit$1 = "_exit_1gzlr_22";
+const styles$5 = {
+  transitionContainer: transitionContainer$1,
+  modalBox: modalBox$1,
+  enter: enter$1,
+  exitDone: exitDone$1,
+  enterActive: enterActive$1,
+  exit: exit$1
+};
+function Modal$1({
   visible = false,
   children
 }) {
   return jsx(d, {
     in: visible,
     duration: 300,
-    classNames: styles$4,
+    classNames: styles$5,
     alwaysMounted: true,
     children: jsx("div", {
-      class: styles$4.transitionContainer,
+      class: styles$5.transitionContainer,
       children: jsx("div", {
-        class: styles$4.modalBox,
+        class: styles$5.modalBox,
         children
       })
     })
@@ -1698,7 +1698,7 @@ function Tooltip({
     style: fixedStyle,
     children: [positionInTarget && children(positionInTarget), !trackPosition && children]
   });
-  return createPortal(type === TooltipType.modal ? jsx(Modal, {
+  return createPortal(type === TooltipType.modal ? jsx(Modal$1, {
     visible: hoverActive,
     children: tooltip2
   }) : tooltip2, displayElement);
@@ -2433,7 +2433,7 @@ function useContainerSize(containerRef) {
 }
 const container$1 = "_container_cyrny_1";
 const svg$1 = "_svg_cyrny_6";
-const styles$3 = {
+const styles$4 = {
   container: container$1,
   svg: svg$1
 };
@@ -2455,6 +2455,12 @@ function Polygon({
   const context = useContext(MapContext);
   useEffect(() => {
     function findFeatureAtPoint(point) {
+      const projectedPoint = context.projection.invert(point);
+      for (const feature of features) {
+        if (geoContains(feature, projectedPoint)) {
+          return feature;
+        }
+      }
     }
     const layer = {
       zIndex,
@@ -2464,7 +2470,7 @@ function Polygon({
     return () => {
       context.unregisterLayer(layer);
     };
-  }, [context, zIndex]);
+  }, [context, zIndex, features]);
   return jsx(Fragment, {
     children: features.map((d2, index2) => {
       return jsx("path", {
@@ -2675,7 +2681,7 @@ const Map$1 = forwardRef(({
   const renderSVG = containerSize && !config.drawToCanvas;
   return jsx("div", {
     ref: containerRef,
-    className: styles$3.container,
+    className: styles$4.container,
     style: containerStyle,
     children: renderSVG && jsx(SVGMapProvider, {
       id,
@@ -2727,7 +2733,7 @@ function ResultSummary({
 }
 const svg = "_svg_1dms8_1";
 const path = "_path_1dms8_8";
-const styles$2 = {
+const styles$3 = {
   svg,
   path
 };
@@ -2735,9 +2741,9 @@ function SearchIcon() {
   return jsx("svg", {
     viewBox: "0 0 20 20",
     xmlns: "http://www.w3.org/2000/svg",
-    className: styles$2.svg,
+    className: styles$3.svg,
     children: jsx("path", {
-      className: styles$2.path,
+      className: styles$3.path,
       "fill-rule": "evenodd",
       "clip-rule": "evenodd",
       d: "M7.273 0c4.022 0 7.25 3.295 7.25 7.273a7.226 7.226 0 01-7.25 7.25C3.25 14.523 0 11.295 0 7.273 0 3.295 3.25 0 7.273 0zm0 1.84A5.403 5.403 0 001.84 7.274c0 3 2.409 5.454 5.432 5.454 3 0 5.454-2.454 5.454-5.454 0-3.023-2.454-5.432-5.454-5.432zM20 18.16l-5.432-5.432h-.932l-.909.91v.931L18.16 20 20 18.159z"
@@ -2936,6 +2942,50 @@ function ResponsiveGrid({
     })
   });
 }
+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 styles$2 = {
+  transitionContainer,
+  modalBox,
+  enter,
+  exitDone,
+  enterActive,
+  exit
+};
+function Modal({
+  visible = false,
+  children,
+  onClickOutside
+}) {
+  const modalBoxRef = useRef();
+  const onClick = useCallback((event) => {
+    if (!modalBoxRef.current.contains(event.target)) {
+      if (onClickOutside && visible)
+        onClickOutside(event);
+    }
+  }, [onClickOutside, visible]);
+  return createPortal(jsx(d, {
+    in: visible,
+    duration: 300,
+    classNames: styles$2,
+    children: jsx("div", {
+      class: styles$2.transitionContainer,
+      onClick,
+      style: {
+        pointerEvents: visible ? "auto" : "none"
+      },
+      children: jsx("div", {
+        ref: modalBoxRef,
+        class: styles$2.modalBox,
+        children
+      })
+    })
+  }), document.body);
+}
 const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
 const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
 const coalition = "_coalition_1ahqy_9";
@@ -3108,17 +3158,19 @@ function Gradient() {
     })]
   });
 }
-const ticker = "_ticker_1tpek_9";
-const tickerItems = "_tickerItems_1tpek_19";
-const tickerItem = "_tickerItem_1tpek_19";
-const controls = "_controls_1tpek_41";
-const gradient = "_gradient_1tpek_56";
-const buttons = "_buttons_1tpek_70";
-const button = "_button_1tpek_70";
-const buttonInner = "_buttonInner_1tpek_96";
+const ticker = "_ticker_fyd8z_9";
+const tickerItems = "_tickerItems_fyd8z_19";
+const tickerScroll = "_tickerScroll_fyd8z_24";
+const tickerItem = "_tickerItem_fyd8z_19";
+const controls = "_controls_fyd8z_46";
+const gradient = "_gradient_fyd8z_61";
+const buttons = "_buttons_fyd8z_75";
+const button = "_button_fyd8z_75";
+const buttonInner = "_buttonInner_fyd8z_101";
 const styles = {
   ticker,
   tickerItems,
+  tickerScroll,
   tickerItem,
   controls,
   gradient,
@@ -3126,45 +3178,37 @@ const styles = {
   button,
   buttonInner
 };
-function totalSizeForElements(elements) {
-  return Array.from(elements).reduce((totalSize, element) => {
-    totalSize.width += element.clientWidth;
-    totalSize.height += element.clientHeight;
-    return totalSize;
-  }, {
-    width: 0,
-    height: 0
-  });
-}
 function Ticker({
   maxItems = 20,
   onStateChange,
   children
 }) {
-  const [offset, setOffset] = useState(0);
+  const [pageIndex, setPageIndex] = useState(0);
+  const [pageWidth, setPageWidth] = useState(0);
+  const [numberOfPages, setNumberOfPages] = useState(0);
+  const offsetWidth = useMemo(() => {
+    return -pageIndex * (pageWidth || 0);
+  }, [pageIndex, pageWidth]);
   const windowSize = useWindowSize();
   const tickerRef = useRef();
   const tickerItemsRef = useRef();
+  const tickerScrollRef = useRef();
+  const controlsRef = useRef();
   const [hideButtons, setHideButtons] = useState(false);
-  const [nextButtonDisabled, setNextButtonDisabled] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const childArray = toChildArray(children);
   useLayoutEffect(() => {
     const tickerItemsContainer = tickerItemsRef.current;
-    if (tickerItemsContainer) {
-      const {
-        width,
-        height
-      } = totalSizeForElements(tickerItemsContainer.children);
-      const hideButtons2 = windowSize.width >= 480 ? width <= tickerItemsContainer.clientWidth : height <= tickerItemsContainer.clientHeight;
-      setHideButtons(hideButtons2);
-      if (tickerItemsContainer.children.length > 0) {
-        const itemWidth = tickerItemsContainer.children[0].clientWidth;
-        const nextButtonDisabled2 = offset * itemWidth > width - tickerItemsContainer.clientWidth;
-        setNextButtonDisabled(nextButtonDisabled2);
-      }
-    }
-  }, [offset, windowSize, childArray, setHideButtons, setNextButtonDisabled]);
+    const pageWidth2 = tickerItemsContainer.clientWidth * 0.75;
+    setPageWidth(pageWidth2);
+    const numberOfPages2 = Math.ceil(tickerScrollRef.current.scrollWidth / pageWidth2);
+    setNumberOfPages(numberOfPages2);
+  }, []);
+  useLayoutEffect(() => {
+    const tickerItemsContainer = tickerItemsRef.current;
+    const hideButtons2 = windowSize.width >= 480 ? tickerScrollRef.current.scrollWidth <= tickerItemsContainer.clientWidth : tickerScrollRef.current.scrollHeight <= tickerItemsContainer.clientHeight;
+    setHideButtons(hideButtons2);
+  }, [windowSize, setHideButtons]);
   function toggleExpandedState() {
     setExpanded((expanded2) => {
       const newState = !expanded2;
@@ -3178,32 +3222,37 @@ function Ticker({
   return jsxs("div", {
     ref: tickerRef,
     className: styles.ticker,
-    style: `--ticker-offset: ${offset}`,
+    style: `--ticker-offset: ${offsetWidth}px;`,
     "data-expanded": expanded,
     children: [jsx("div", {
       ref: tickerItemsRef,
       className: styles.tickerItems,
-      children: childArray.map((child, index2) => jsx("div", {
-        className: styles.tickerItem,
-        children: child
-      }, index2))
+      children: jsx("div", {
+        ref: tickerScrollRef,
+        className: styles.tickerScroll,
+        children: childArray.map((child, index2) => jsx("div", {
+          className: styles.tickerItem,
+          children: child
+        }, index2))
+      })
     }), jsxs("div", {
+      ref: controlsRef,
       className: styles.controls,
       style: hideButtons && {
         display: "none"
       },
       children: [jsx("div", {
         className: styles.gradient,
-        children: jsx(Gradient, {})
+        children: !expanded && jsx(Gradient, {})
       }), jsxs("div", {
         className: styles.buttons,
         children: [jsx(ArrowButton, {
-          onClick: () => setOffset((d2) => d2 + 1),
-          disabled: nextButtonDisabled
+          onClick: () => setPageIndex((d2) => d2 + 1),
+          disabled: pageIndex >= numberOfPages - 1
         }), jsx(ArrowButton, {
           direction: "left",
-          onClick: () => setOffset((d2) => d2 - 1),
-          disabled: offset <= 0
+          onClick: () => setPageIndex((d2) => d2 - 1),
+          disabled: pageIndex <= 0
         })]
       }), jsx("div", {
         className: styles.button,
@@ -3237,6 +3286,7 @@ export {
   Map$1 as Map,
   MapConfiguration,
   index as MapLayers,
+  Modal,
   PageSection,
   PartyProfile,
   Projection,