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

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

@@ -440,46 +440,25 @@
     unit,
     container: container$6
   };
-  function useWindowSize() {
-    const [windowSize, setWindowSize] = hooks.useState(() => {
-      if (typeof window === "undefined")
-        return {
-          width: 0,
-          height: 0
-        };
-      return {
-        width: window.innerWidth,
-        height: window.innerHeight
-      };
-    });
-    hooks.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] = hooks.useState();
     hooks.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 = {
@@ -1563,17 +1542,13 @@
     }
   }) => {
     const wrapperRef = hooks.useRef(null);
-    const windowSize = useWindowSize();
-    const [width, setWidth] = hooks.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;
-    hooks.useLayoutEffect(() => {
-      const newWidth = wrapperRef.current.getBoundingClientRect().width;
-      setWidth(newWidth);
-    }, [windowSize]);
     const y1Labels = hooks.useMemo(() => {
       let labels = lines.map((d2) => ({
         y: yScale(d2.y1),
@@ -3877,6 +3852,8 @@
     }, [width, height]);
     const organisedChildren = useOrganisedChildren(children);
     const renderSVG = containerSize && !config.drawToCanvas;
+    const zoomControl2 = organisedChildren.controls["ZoomControl"];
+    const renderZoomControl = zoomControl2 && zoom.enabled;
     return jsxRuntime.jsxs("div", {
       ref: containerRef,
       className: styles$4.container,
@@ -3897,9 +3874,9 @@
         })
       }), jsxRuntime.jsx("div", {
         className: styles$4.controls,
-        children: jsxRuntime.jsx("div", {
+        children: renderZoomControl && jsxRuntime.jsx("div", {
           className: styles$4.zoomControl,
-          children: preact.cloneElement(organisedChildren.controls["ZoomControl"], {
+          children: preact.cloneElement(zoomControl2, {
             onZoomIn: () => rendererRef.current.zoomIn(),
             onZoomOut: () => rendererRef.current.zoomOut()
           })
@@ -7425,6 +7402,34 @@
       });
     }
   }
+  function useWindowSize() {
+    const [windowSize, setWindowSize] = hooks.useState(() => {
+      if (typeof window === "undefined")
+        return {
+          width: 0,
+          height: 0
+        };
+      return {
+        width: window.innerWidth,
+        height: window.innerHeight
+      };
+    });
+    hooks.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";