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

package/dist/interactive-component-library.js

@@ -219,9 +219,7 @@ function StackedBar({
     ...defaultStyles$u
   }, styles2);
   const svgHeight = labelType === LabelType.hanging && !hideLabels ? height + 20 : height;
-  const cleanBorderAbbr = (abbrText) => {
-    return abbrText.split("-")[0];
-  };
+  const cleanBorderAbbr = (abbrText) => abbrText.split("-")[0];
   const renderLabel = (config, i) => jsx("text", {
     ref: (element) => textElements.current[i] = element,
     "text-rendering": "optimizeLegibility",
@@ -256,7 +254,6 @@ function StackedBar({
           fill: d2.fill
         },
         "shape-rendering": "crispEdges"
-        // stroke={border && var()}
       }), labelType === LabelType.inline && !hideLabels && renderLabel(labelConfig, index)]
     }, index);
     totalWidth += itemWidth;
@@ -444,46 +441,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 = {
@@ -1333,9 +1309,11 @@ function useTable({
     if (sortState.columnIndex < 0) {
       return data;
     }
+    const dataCopy = new Array(...data);
     const column = columns[sortState.columnIndex];
     const sortFunction = sortState.ascending ? sortAscending(column.accessor) : sortDescending(column.accessor);
-    return data.toSorted(sortFunction);
+    dataCopy.sort(sortFunction);
+    return dataCopy;
   }, [columns, data, sortState]);
   const columnModels = useMemo(() => {
     return columns.map((column, columnIndex) => {
@@ -1567,17 +1545,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 +3855,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 +3877,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 +7405,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";