@guardian/interactive-component-library 0.1.0-alpha.21 → 0.1.0-alpha.22

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

@@ -424,14 +424,15 @@
     button: button$5,
     svg: svg$7
   };
-  const InfoButton = ({
+  const InfoButton = compat.forwardRef(({
     onClick,
     styles: styles2
-  }) => {
+  }, ref) => {
     styles2 = mergeStyles({
       ...defaultStyles$p
     }, styles2);
     return jsxRuntime.jsx("button", {
+      ref,
       class: styles2.button,
       onClick,
       children: jsxRuntime.jsx("svg", {
@@ -443,7 +444,7 @@
         })
       })
     });
-  };
+  });
   const svg$6 = "_svg_1v49v_1";
   const circle$1 = "_circle_1v49v_5";
   const pulse = "_pulse_1v49v_9";
@@ -1538,161 +1539,27 @@
       children: show && chart
     });
   };
-  const useTooltipTarget = (targetElement, trackPosition) => {
-    const [targetRect, setTargetRect] = hooks.useState();
-    const [position, setPosition] = hooks.useState(null);
-    const [hoverActive, setHoverActive] = hooks.useState(false);
-    const onMouseMove = ({
-      clientX,
-      clientY,
-      currentTarget
-    }) => {
-      const rect = currentTarget.getBoundingClientRect();
-      const x = clientX - rect.left;
-      const y = clientY - rect.top;
-      requestAnimationFrame(() => {
-        setTargetRect(rect);
-        setPosition({
-          x,
-          y
-        });
-        setHoverActive(true);
-      });
-    };
-    const onMouseOut = () => {
-      requestAnimationFrame(() => {
-        setHoverActive(false);
-      });
-    };
-    hooks.useEffect(() => {
-      setTargetRect(targetElement.getBoundingClientRect());
-      if (trackPosition) {
-        targetElement.addEventListener("mousemove", onMouseMove);
-        targetElement.addEventListener("mouseout", onMouseOut);
-      }
-      return () => {
-        if (trackPosition) {
-          targetElement.removeEventListener("mousemove", onMouseMove);
-          targetElement.removeEventListener("mouseout", onMouseOut);
-        }
-      };
-    }, [targetElement, trackPosition]);
-    return {
-      targetRect,
-      positionInTarget: position,
-      hoverActive
-    };
-  };
-  function n(n2) {
-    return (r) => {
-      n2.forEach((n3) => {
-        "function" == typeof n3 ? n3(r) : null != n3 && (n3.current = r);
-      });
-    };
-  }
-  var T, c;
-  !function(e) {
-    e.APPEAR = "appear", e.APPEAR_ACTIVE = "appearActive", e.APPEAR_DONE = "appearDone", e.ENTER = "enter", e.ENTER_ACTIVE = "enterActive", e.ENTER_DONE = "enterDone", e.EXIT = "exit", e.EXIT_ACTIVE = "exitActive", e.EXIT_DONE = "exitDone";
-  }(T || (T = {})), function(e) {
-    e.ENTER = "onEnter", e.ENTERING = "onEntering", e.ENTERED = "onEntered", e.EXIT = "onExit", e.EXITING = "onExiting", e.EXITED = "onExited";
-  }(c || (c = {}));
-  const s = { [T.APPEAR]: [c.ENTER, T.APPEAR_ACTIVE], [T.APPEAR_ACTIVE]: [c.ENTERING, T.APPEAR_DONE, true], [T.APPEAR_DONE]: [c.ENTERED], [T.ENTER]: [c.ENTER, T.ENTER_ACTIVE], [T.ENTER_ACTIVE]: [c.ENTERING, T.ENTER_DONE, true], [T.ENTER_DONE]: [c.ENTERED], [T.EXIT]: [c.EXIT, T.EXIT_ACTIVE], [T.EXIT_ACTIVE]: [c.EXITING, T.EXIT_DONE, true], [T.EXIT_DONE]: [c.EXITED] };
-  var u = (r) => {
-    const { children: c2, in: u2 = false, appear: A = false, enter: N2 = true, exit: l = true, duration: I = 500, alwaysMounted: p2 = false, addEndListener: R2 } = r, P2 = hooks.useRef(), _2 = hooks.useRef();
-    let d2 = false;
-    const [f, D] = hooks.useState(() => (d2 = true, u2 ? A ? T.APPEAR : T.APPEAR_DONE : T.EXIT_DONE));
-    hooks.useEffect(() => {
-      var e;
-      const { setTimeout: E, clearTimeout: t } = window, [n2, o, i] = s[f];
-      return null == (e = r[n2]) || e.call(r, P2.current), o && (i ? R2 ? R2(P2.current, () => D(o)) : _2.current = E(D, I, o) : D(o)), () => {
-        t(_2.current);
-      };
-    }, [f, I]), hooks.useLayoutEffect(() => {
-      d2 || D(u2 ? N2 ? T.ENTER : T.ENTER_DONE : l ? T.EXIT : T.EXIT_DONE);
-    }, [u2]);
-    const X = hooks.useMemo(() => {
-      const e = {};
-      return Object.values(T).forEach((r2) => {
-        e[r2] = f === r2;
-      }), e;
-    }, [f]);
-    if (!p2 && f === T.EXIT_DONE)
-      return null;
-    const O = c2(X, f);
-    return preact.cloneElement(O, { ref: n([P2, O.ref]) });
-  };
-  function N(e, r) {
-    if (null == e)
-      return {};
-    var E, t, n2 = {}, o = Object.keys(e);
-    for (t = 0; t < o.length; t++)
-      r.indexOf(E = o[t]) >= 0 || (n2[E] = e[E]);
-    return n2;
+  function rectsIntersect(rect1, rect2) {
+    if (rect1.width === 0 || rect1.height === 0 || rect2.width === 0 || rect2.height === 0) {
+      return false;
+    }
+    if (rect1.x + rect1.width <= rect2.x || rect2.x + rect2.width <= rect1.x || rect1.y + rect1.height <= rect2.y || rect2.y + rect2.height <= rect1.y) {
+      return false;
+    }
+    return true;
   }
-  const p = ["children", "classNames"], R = { [T.APPEAR]: "-appear", [T.APPEAR_ACTIVE]: "-appear-active", [T.APPEAR_DONE]: "-appear-done", [T.ENTER]: "-enter", [T.ENTER_ACTIVE]: "-enter-active", [T.ENTER_DONE]: "-enter-done", [T.EXIT]: "-exit", [T.EXIT_ACTIVE]: "-exit-active", [T.EXIT_DONE]: "-exit-done" }, P = (...e) => e.filter((e2) => !!e2).join(" "), _ = (e, r) => "string" == typeof r ? `${r}${R[e]}` : r[e];
-  var d = (E) => {
-    const { children: t, classNames: n2 } = E, o = N(E, p);
-    return preact.createElement(u, o, (r, E2) => {
-      const { className: o2 } = t.props, i = hooks.useMemo(() => P(o2, ((e, r2) => {
-        const E3 = _(e, r2);
-        switch (e) {
-          case T.APPEAR_ACTIVE:
-            return P(_(T.APPEAR, r2), E3);
-          case T.ENTER_ACTIVE:
-            return P(_(T.ENTER, r2), E3);
-          case T.EXIT_ACTIVE:
-            return P(_(T.EXIT, r2), E3);
-          default:
-            return E3;
-        }
-      })(E2, n2)), [o2, n2, E2]);
-      return preact.cloneElement(t, { className: i });
-    });
-  };
-  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$6 = {
-    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 jsxRuntime.jsx(d, {
-      in: visible,
-      duration: 300,
-      classNames: styles$6,
-      alwaysMounted: true,
-      children: jsxRuntime.jsx("div", {
-        class: styles$6.transitionContainer,
-        children: jsxRuntime.jsx("div", {
-          class: styles$6.modalBox,
-          children
-        })
-      })
-    });
+  function pointInsideRect(point, rect) {
+    return point.x >= rect.x && point.x <= rect.x + rect.width && point.y >= rect.y && point.y <= rect.y + rect.height;
   }
   const tooltip = "_tooltip_11t5d_1";
   const defaultStyles$b = {
     tooltip
   };
-  const TooltipType = {
-    float: "float",
-    modal: "modal"
-  };
   function Tooltip({
     for: targetElement,
-    renderIn: refOrSelector,
-    type = TooltipType.float,
+    touchRect,
+    positionInTarget,
+    show = true,
     styles: styles2,
     children
   }) {
@@ -1703,29 +1570,19 @@
       y: 0
     });
     const [displayElement, setDisplayElement] = hooks.useState(null);
-    const trackPosition = typeof children === "function";
-    const {
-      targetRect,
-      positionInTarget,
-      hoverActive
-    } = useTooltipTarget(targetElement, trackPosition);
-    const tooltipRef = hooks.useRef(null);
+    const tooltipRef = hooks.useRef();
     styles2 = mergeStyles(defaultStyles$b, styles2);
     hooks.useEffect(() => {
-      let element = null;
-      if (typeof refOrSelector === "string") {
-        element = document.querySelector(refOrSelector);
-      } else if ("current" in refOrSelector) {
-        element = refOrSelector.current;
-      } else {
-        throw new Error("renderIn prop needs to be a selector or ref (from useRef)");
-      }
-      setDisplayElement(element);
-    }, [refOrSelector]);
+      setDisplayElement(document.querySelector("body"));
+      return () => {
+        setDisplayElement(null);
+      };
+    }, []);
     hooks.useLayoutEffect(() => {
       if (!tooltipRef.current)
         return;
-      if (trackPosition && positionInTarget) {
+      const targetRect = targetElement.getBoundingClientRect();
+      if (positionInTarget) {
         const newPosition = tooltipPositionForPoint({
           targetRect,
           positionInTarget,
@@ -1733,35 +1590,32 @@
           displayElement
         });
         setTooltipPosition(newPosition);
-      } else if (!trackPosition) {
+      } else if (!positionInTarget) {
         const newPosition = tooltipPositionForRect({
           targetRect,
+          touchRect,
           tooltip: tooltipRef.current,
           displayElement
         });
         setTooltipPosition(newPosition);
       }
-    }, [trackPosition, targetRect, positionInTarget, displayElement, tooltipRef]);
+    }, [targetElement, positionInTarget, displayElement, tooltipRef, touchRect]);
     if (!displayElement)
       return;
-    const displayTooltip = hoverActive || !trackPosition;
-    const fixedStyle = type === TooltipType.modal ? {} : {
-      display: displayTooltip ? "block" : "none",
+    const fixedStyle = {
+      display: show ? "block" : "none",
       position: "fixed",
       left: tooltipPosition.x,
       top: tooltipPosition.y,
       zIndex: 100
     };
-    const tooltip2 = jsxRuntime.jsxs("div", {
+    const tooltip2 = jsxRuntime.jsx("div", {
       ref: tooltipRef,
       className: styles2.tooltip,
       style: fixedStyle,
-      children: [positionInTarget && children(positionInTarget), !trackPosition && children]
+      children
     });
-    return compat.createPortal(type === TooltipType.modal ? jsxRuntime.jsx(Modal$1, {
-      visible: hoverActive,
-      children: tooltip2
-    }) : tooltip2, displayElement);
+    return compat.createPortal(tooltip2, displayElement);
   }
   function tooltipPositionForPoint({
     targetRect,
@@ -1782,10 +1636,19 @@
     if (newPosition.y + tooltipHeight > displayElementRect.bottom) {
       newPosition.y -= tooltipHeight;
     }
+    if (newPosition.x <= displayElementRect.left) {
+      newPosition.x = displayElementRect.left + displayElementRect.width / 2 - tooltipWidth / 2;
+    }
     return newPosition;
   }
   function tooltipPositionForRect({
     targetRect,
+    touchRect = {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0
+    },
     tooltip: tooltip2,
     displayElement
   }) {
@@ -1795,6 +1658,15 @@
     };
     const tooltipWidth = tooltip2.offsetWidth;
     const tooltipHeight = tooltip2.offsetHeight;
+    const tooltipRect = {
+      ...newPosition,
+      width: tooltipWidth,
+      height: tooltipHeight
+    };
+    if (rectsIntersect(tooltipRect, touchRect)) {
+      newPosition.x = touchRect.x + touchRect.width / 2;
+      newPosition.y = touchRect.y - tooltipHeight;
+    }
     const displayElementRect = displayElement.getBoundingClientRect();
     if (newPosition.x + tooltipWidth > displayElementRect.right) {
       newPosition.x = targetRect.left - tooltipWidth;
@@ -1802,6 +1674,9 @@
     if (newPosition.y - tooltipHeight < displayElementRect.top) {
       newPosition.y = targetRect.bottom;
     }
+    if (newPosition.x <= displayElementRect.left) {
+      newPosition.x = displayElementRect.left + displayElementRect.width / 2 - tooltipWidth / 2;
+    }
     return newPosition;
   }
   const text$1 = "_text_1b8t2_1";
@@ -1865,7 +1740,7 @@
     displayColumn,
     topRow
   };
-  const ToplineResult = ({
+  const ToplineResult = compat.forwardRef(({
     name: name2,
     secondaryName,
     mainNumber: mainNumber2,
@@ -1876,8 +1751,9 @@
     abbreviation,
     onMouseOver,
     onInfoPress,
-    showInfoButton = false
-  }) => {
+    showInfoButton = false,
+    infoButtonRef
+  }, ref) => {
     styles2 = mergeStyles({
       ...defaultStyles$9
     }, styles2);
@@ -1885,6 +1761,7 @@
     return !secondaryName ? jsxRuntime.jsxs("div", {
       class: styles2.toplineResult,
       onMouseOver,
+      ref,
       children: [jsxRuntime.jsxs("div", {
         class: styles2.topRow,
         children: [jsxRuntime.jsx("span", {
@@ -1893,7 +1770,8 @@
         }), " ", showInfoButton && jsxRuntime.jsx("span", {
           class: styles2.infoButton,
           children: jsxRuntime.jsx(InfoButton, {
-            onClick: onInfoPress
+            onClick: onInfoPress,
+            ref: infoButtonRef
           })
         })]
       }), jsxRuntime.jsxs("div", {
@@ -1912,6 +1790,7 @@
     }) : jsxRuntime.jsxs("div", {
       class: styles2.toplineResult,
       onMouseOver,
+      ref,
       children: [jsxRuntime.jsxs("div", {
         class: styles2.topRow,
         children: [jsxRuntime.jsx("span", {
@@ -1943,7 +1822,7 @@
         })]
       })]
     });
-  };
+  });
   const section = "_section_12aiu_9";
   const borderTop = "_borderTop_12aiu_52";
   const header = "_header_12aiu_56";
@@ -3010,6 +2889,72 @@
       })
     });
   }
+  function n(n2) {
+    return (r) => {
+      n2.forEach((n3) => {
+        "function" == typeof n3 ? n3(r) : null != n3 && (n3.current = r);
+      });
+    };
+  }
+  var T, c;
+  !function(e) {
+    e.APPEAR = "appear", e.APPEAR_ACTIVE = "appearActive", e.APPEAR_DONE = "appearDone", e.ENTER = "enter", e.ENTER_ACTIVE = "enterActive", e.ENTER_DONE = "enterDone", e.EXIT = "exit", e.EXIT_ACTIVE = "exitActive", e.EXIT_DONE = "exitDone";
+  }(T || (T = {})), function(e) {
+    e.ENTER = "onEnter", e.ENTERING = "onEntering", e.ENTERED = "onEntered", e.EXIT = "onExit", e.EXITING = "onExiting", e.EXITED = "onExited";
+  }(c || (c = {}));
+  const s = { [T.APPEAR]: [c.ENTER, T.APPEAR_ACTIVE], [T.APPEAR_ACTIVE]: [c.ENTERING, T.APPEAR_DONE, true], [T.APPEAR_DONE]: [c.ENTERED], [T.ENTER]: [c.ENTER, T.ENTER_ACTIVE], [T.ENTER_ACTIVE]: [c.ENTERING, T.ENTER_DONE, true], [T.ENTER_DONE]: [c.ENTERED], [T.EXIT]: [c.EXIT, T.EXIT_ACTIVE], [T.EXIT_ACTIVE]: [c.EXITING, T.EXIT_DONE, true], [T.EXIT_DONE]: [c.EXITED] };
+  var u = (r) => {
+    const { children: c2, in: u2 = false, appear: A = false, enter: N2 = true, exit: l = true, duration: I = 500, alwaysMounted: p2 = false, addEndListener: R2 } = r, P2 = hooks.useRef(), _2 = hooks.useRef();
+    let d2 = false;
+    const [f, D] = hooks.useState(() => (d2 = true, u2 ? A ? T.APPEAR : T.APPEAR_DONE : T.EXIT_DONE));
+    hooks.useEffect(() => {
+      var e;
+      const { setTimeout: E, clearTimeout: t } = window, [n2, o, i] = s[f];
+      return null == (e = r[n2]) || e.call(r, P2.current), o && (i ? R2 ? R2(P2.current, () => D(o)) : _2.current = E(D, I, o) : D(o)), () => {
+        t(_2.current);
+      };
+    }, [f, I]), hooks.useLayoutEffect(() => {
+      d2 || D(u2 ? N2 ? T.ENTER : T.ENTER_DONE : l ? T.EXIT : T.EXIT_DONE);
+    }, [u2]);
+    const X = hooks.useMemo(() => {
+      const e = {};
+      return Object.values(T).forEach((r2) => {
+        e[r2] = f === r2;
+      }), e;
+    }, [f]);
+    if (!p2 && f === T.EXIT_DONE)
+      return null;
+    const O = c2(X, f);
+    return preact.cloneElement(O, { ref: n([P2, O.ref]) });
+  };
+  function N(e, r) {
+    if (null == e)
+      return {};
+    var E, t, n2 = {}, o = Object.keys(e);
+    for (t = 0; t < o.length; t++)
+      r.indexOf(E = o[t]) >= 0 || (n2[E] = e[E]);
+    return n2;
+  }
+  const p = ["children", "classNames"], R = { [T.APPEAR]: "-appear", [T.APPEAR_ACTIVE]: "-appear-active", [T.APPEAR_DONE]: "-appear-done", [T.ENTER]: "-enter", [T.ENTER_ACTIVE]: "-enter-active", [T.ENTER_DONE]: "-enter-done", [T.EXIT]: "-exit", [T.EXIT_ACTIVE]: "-exit-active", [T.EXIT_DONE]: "-exit-done" }, P = (...e) => e.filter((e2) => !!e2).join(" "), _ = (e, r) => "string" == typeof r ? `${r}${R[e]}` : r[e];
+  var d = (E) => {
+    const { children: t, classNames: n2 } = E, o = N(E, p);
+    return preact.createElement(u, o, (r, E2) => {
+      const { className: o2 } = t.props, i = hooks.useMemo(() => P(o2, ((e, r2) => {
+        const E3 = _(e, r2);
+        switch (e) {
+          case T.APPEAR_ACTIVE:
+            return P(_(T.APPEAR, r2), E3);
+          case T.ENTER_ACTIVE:
+            return P(_(T.ENTER, r2), E3);
+          case T.EXIT_ACTIVE:
+            return P(_(T.EXIT, r2), E3);
+          default:
+            return E3;
+        }
+      })(E2, n2)), [o2, n2, E2]);
+      return preact.cloneElement(t, { className: i });
+    });
+  };
   const transitionContainer = "_transitionContainer_wws3j_1";
   const modalBox = "_modalBox_wws3j_13";
   const enter = "_enter_wws3j_21";
@@ -3438,6 +3383,122 @@
       })]
     });
   }
+  function useTouchOrHover() {
+    const ref = hooks.useRef();
+    const [position, setPosition] = hooks.useState();
+    const [isActive, setIsActive] = hooks.useState(false);
+    const [touchRect, setTouchRect] = hooks.useState();
+    hooks.useEffect(() => {
+      const element = ref.current;
+      let touchCancelled = false;
+      const touchStarted = (event) => {
+        if (event.touches.length > 1)
+          return;
+        touchCancelled = false;
+        const touch = event.touches[0];
+        const {
+          clientX,
+          clientY
+        } = touch;
+        const rect = element.getBoundingClientRect();
+        const point = {
+          x: clientX - rect.left,
+          y: clientY - rect.top
+        };
+        setPosition(point);
+        const touchRect2 = {
+          x: clientX - touch.radiusX,
+          y: clientY - touch.radiusY,
+          width: touch.radiusX * 2,
+          height: touch.radiusY * 2
+        };
+        setTouchRect(touchRect2);
+        setIsActive(true);
+        event.stopPropagation();
+      };
+      const touchMoved = (event) => {
+        if (touchCancelled || event.targetTouches.length !== 1)
+          return;
+        const touch = event.targetTouches[0];
+        const {
+          clientX,
+          clientY
+        } = touch;
+        const rect = element.getBoundingClientRect();
+        const point = {
+          x: clientX - rect.left,
+          y: clientY - rect.top
+        };
+        if (!event.cancelable || !pointInsideRect(point, rect)) {
+          setIsActive(false);
+          touchCancelled = true;
+        } else {
+          setPosition(point);
+          setIsActive(true);
+        }
+      };
+      const touchEnded = (event) => {
+        if (event.cancelable) {
+          event.preventDefault();
+        }
+        setIsActive(false);
+        setPosition(null);
+      };
+      const mouseOver = (event) => {
+        const {
+          clientX,
+          clientY
+        } = event;
+        const rect = element.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        setPosition({
+          x,
+          y
+        });
+        setIsActive(true);
+      };
+      const mouseMoved = (event) => {
+        const {
+          clientX,
+          clientY
+        } = event;
+        const rect = element.getBoundingClientRect();
+        const x = clientX - rect.left;
+        const y = clientY - rect.top;
+        setPosition({
+          x,
+          y
+        });
+      };
+      const mouseOut = () => {
+        setIsActive(false);
+        setPosition(null);
+      };
+      element.addEventListener("touchstart", touchStarted);
+      element.addEventListener("touchmove", touchMoved);
+      element.addEventListener("touchend", touchEnded);
+      element.addEventListener("touchcancel", touchEnded);
+      element.addEventListener("mouseover", mouseOver);
+      element.addEventListener("mousemove", mouseMoved);
+      element.addEventListener("mouseout", mouseOut);
+      return () => {
+        element.removeEventListener("touchstart", touchStarted);
+        element.removeEventListener("touchmove", touchMoved);
+        element.removeEventListener("touchend", mouseOut);
+        element.removeEventListener("touchcancel", mouseOut);
+        element.removeEventListener("mouseover", touchStarted);
+        element.removeEventListener("mousemove", mouseMoved);
+        element.removeEventListener("mouseout", mouseOut);
+      };
+    }, []);
+    return {
+      touchOrHoverRef: ref,
+      touchOrHoverIsActive: isActive,
+      touchRect,
+      positionInTarget: position
+    };
+  }
   exports2.AdSlot = AdSlot;
   exports2.ArrowButton = ArrowButton;
   exports2.Button = Button;
@@ -3475,8 +3536,10 @@
   exports2.Table = Table;
   exports2.Ticker = Ticker;
   exports2.Tooltip = Tooltip;
-  exports2.TooltipType = TooltipType;
   exports2.ToplineResult = ToplineResult;
+  exports2.useContainerSize = useContainerSize;
+  exports2.useTouchOrHover = useTouchOrHover;
+  exports2.useWindowSize = useWindowSize;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });
 //# sourceMappingURL=interactive-component-library.umd.cjs.map