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

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";
@@ -3237,6 +3287,7 @@ export {
   Map$1 as Map,
   MapConfiguration,
   index as MapLayers,
+  Modal,
   PageSection,
   PartyProfile,
   Projection,