@guardian/interactive-component-library 0.1.0-alpha.29 → 0.1.0-alpha.30

package/dist/interactive-component-library.js

@@ -444,46 +444,25 @@ const defaultStyles$s = {
   unit,
   container: container$6
 };
-function useWindowSize() {
-  const [windowSize, setWindowSize] = useState(() => {
-    if (typeof window === "undefined")
-      return {
-        width: 0,
-        height: 0
-      };
-    return {
-      width: window.innerWidth,
-      height: window.innerHeight
-    };
-  });
-  useEffect(() => {
-    if (typeof window === "undefined")
-      return;
-    function handleResize() {
-      setWindowSize({
-        width: window.innerWidth,
-        height: window.innerHeight
-      });
-    }
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, []);
-  return windowSize;
-}
 function useContainerSize(containerRef) {
-  const windowSize = useWindowSize();
   const [containerSize, setContainerSize] = useState();
   useLayoutEffect(() => {
     const container2 = containerRef.current;
     if (!container2)
       return;
-    setContainerSize({
-      width: container2.clientWidth,
-      height: container2.clientHeight
+    const observer = new ResizeObserver((entries) => {
+      for (let entry of entries) {
+        setContainerSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
     });
-  }, [containerRef, windowSize]);
+    observer.observe(container2);
+    return () => {
+      observer.disconnect();
+    };
+  }, [containerRef]);
   return containerSize;
 }
 const WaffleType = {
@@ -1567,17 +1546,13 @@ const SlopeChart = ({
   }
 }) => {
   const wrapperRef = useRef(null);
-  const windowSize = useWindowSize();
-  const [width, setWidth] = useState(0);
+  const containerSize = useContainerSize(wrapperRef);
+  const width = containerSize ? containerSize.width : 0;
   const contentWidth = Math.floor(width - padding.left - padding.right);
   const contentHeight = contentWidth;
   const height = contentHeight + padding.top + padding.bottom;
   const yScale = scaleLinear(domain, [contentHeight, 0]);
   const show = width > 0;
-  useLayoutEffect(() => {
-    const newWidth = wrapperRef.current.getBoundingClientRect().width;
-    setWidth(newWidth);
-  }, [windowSize]);
   const y1Labels = useMemo(() => {
     let labels = lines.map((d2) => ({
       y: yScale(d2.y1),
@@ -3881,6 +3856,8 @@ const SVGMap = forwardRef(({
   }, [width, height]);
   const organisedChildren = useOrganisedChildren(children);
   const renderSVG = containerSize && !config.drawToCanvas;
+  const zoomControl2 = organisedChildren.controls["ZoomControl"];
+  const renderZoomControl = zoomControl2 && zoom2.enabled;
   return jsxs("div", {
     ref: containerRef,
     className: styles$4.container,
@@ -3901,9 +3878,9 @@ const SVGMap = forwardRef(({
       })
     }), jsx("div", {
       className: styles$4.controls,
-      children: jsx("div", {
+      children: renderZoomControl && jsx("div", {
         className: styles$4.zoomControl,
-        children: cloneElement(organisedChildren.controls["ZoomControl"], {
+        children: cloneElement(zoomControl2, {
           onZoomIn: () => rendererRef.current.zoomIn(),
           onZoomOut: () => rendererRef.current.zoomOut()
         })
@@ -7429,6 +7406,34 @@ class GeoJSON {
     });
   }
 }
+function useWindowSize() {
+  const [windowSize, setWindowSize] = useState(() => {
+    if (typeof window === "undefined")
+      return {
+        width: 0,
+        height: 0
+      };
+    return {
+      width: window.innerWidth,
+      height: window.innerHeight
+    };
+  });
+  useEffect(() => {
+    if (typeof window === "undefined")
+      return;
+    function handleResize() {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight
+      });
+    }
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+  return windowSize;
+}
 const coalitionsWrapper = "_coalitionsWrapper_4egbd_9";
 const coalitionsContainer = "_coalitionsContainer_4egbd_14";
 const coalition = "_coalition_4egbd_9";