@guardian/interactive-component-library 0.1.0-alpha.23 → 0.1.0-alpha.25

package/dist/interactive-component-library.js

@@ -152,6 +152,8 @@ const defaultStyles$t = {
   backgroundRect
 };
 function preventOverlap(labelPositions, iteration = 0, labelSize = 12, coordinate = "y", moveBothLabels = true) {
+  const maxIterations = 10;
+  let totalOverlap = 0;
   for (let index2 = 1; index2 < labelPositions.length; index2++) {
     const previousElement = labelPositions[index2 - 1];
     const element = labelPositions[index2];
@@ -165,8 +167,12 @@ function preventOverlap(labelPositions, iteration = 0, labelSize = 12, coordinat
     } else {
       previousElement[coordinate] -= overlap;
     }
-    return labelPositions;
+    totalOverlap += overlap;
   }
+  if (totalOverlap > 0 && iteration < maxIterations) {
+    return preventOverlap(labelPositions, iteration + 1, labelSize, coordinate, moveBothLabels);
+  }
+  return labelPositions;
 }
 function uniqueBy(array, key) {
   return [...array.reduce((map, d2) => map.set(d2[key], d2), /* @__PURE__ */ new Map()).values()];
@@ -189,6 +195,10 @@ const LabelType = {
   hanging: "hanging",
   inline: "inline"
 };
+const LabelOverlapConfig = {
+  labelSize: 20,
+  moveBothLabels: false
+};
 function StackedBar({
   stack,
   width,
@@ -197,7 +207,8 @@ function StackedBar({
   labelType = LabelType.inline,
   showBackgroundRect = false,
   createSVG = true,
-  styles: styles2
+  styles: styles2,
+  labelOverlapConfig = LabelOverlapConfig
 }) {
   const rectElements = useRef([]);
   const textElements = useRef([]);
@@ -258,7 +269,7 @@ function StackedBar({
       totalW += itemWidth;
       return labelConfig;
     });
-    return preventOverlap(labels, 0, 20, "x", false);
+    return preventOverlap(labels, 0, labelOverlapConfig.labelSize, "x", labelOverlapConfig.moveBothLabels);
   }, [stack, height, width]);
   const backgroundRect2 = jsx("g", {
     children: jsx("rect", {
@@ -1133,8 +1144,8 @@ const SquareIcon = ({
     })
   });
 };
-const button$4 = "_button_1fees_1";
-const icon$2 = "_icon_1fees_6";
+const button$4 = "_button_1kqfn_1";
+const icon$2 = "_icon_1kqfn_6";
 const defaultStyles$i = {
   button: button$4,
   icon: icon$2
@@ -1169,8 +1180,8 @@ function ArrowButton({
     })
   });
 }
-const button$3 = "_button_3521c_1";
-const buttonInner$1 = "_buttonInner_3521c_6";
+const button$3 = "_button_s6ell_1";
+const buttonInner$1 = "_buttonInner_s6ell_6";
 const defaultStyles$h = {
   button: button$3,
   buttonInner: buttonInner$1
@@ -1192,10 +1203,10 @@ function Button({
     })
   });
 }
-const button$2 = "_button_125im_1";
-const buttonBorder = "_buttonBorder_125im_11";
-const svg$3 = "_svg_125im_19";
-const path$3 = "_path_125im_25";
+const button$2 = "_button_nr8bh_1";
+const buttonBorder = "_buttonBorder_nr8bh_11";
+const svg$3 = "_svg_nr8bh_19";
+const path$3 = "_path_nr8bh_25";
 const defaultStyles$g = {
   button: button$2,
   buttonBorder,
@@ -3091,6 +3102,18 @@ function Modal({
         onClickOutside(event);
     }
   }, [onClickOutside, visible]);
+  useEffect(() => {
+    if (visible) {
+      window.addEventListener("scroll", onClick, {
+        once: true
+      });
+    }
+    return () => {
+      if (visible) {
+        window.removeEventListener("scroll", onClick);
+      }
+    };
+  }, [onClick, visible]);
   return createPortal(jsx(d, {
     in: visible,
     duration: 300,
@@ -3139,14 +3162,18 @@ function Dropdown({
   title: title2,
   hint: hint2,
   options,
-  onSelect
+  onSelect,
+  collapseOnSelect = false,
+  expandByDefault = true
 }) {
-  const [expanded, setExpanded] = useState(true);
+  const [expanded, setExpanded] = useState(expandByDefault);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const onOptionClick = useCallback((option2, index2) => {
     setSelectedIndex(index2);
     if (onSelect)
       onSelect(option2, index2);
+    if (collapseOnSelect)
+      setExpanded(false);
   }, [onSelect]);
   const iconForSelectedOption = useMemo(() => {
     const selectedOption = options[selectedIndex];
@@ -3214,15 +3241,15 @@ function Checkmark() {
     })
   });
 }
-const coalitionsWrapper = "_coalitionsWrapper_1ahqy_9";
-const coalitionsContainer = "_coalitionsContainer_1ahqy_14";
-const coalition = "_coalition_1ahqy_9";
-const title = "_title_1ahqy_27";
-const description = "_description_1ahqy_28";
-const thresholdText = "_thresholdText_1ahqy_43";
-const thresholdTextBold = "_thresholdTextBold_1ahqy_54";
-const thresholdDot = "_thresholdDot_1ahqy_61";
-const thresholdLine = "_thresholdLine_1ahqy_61";
+const coalitionsWrapper = "_coalitionsWrapper_4egbd_9";
+const coalitionsContainer = "_coalitionsContainer_4egbd_14";
+const coalition = "_coalition_4egbd_9";
+const title = "_title_4egbd_27";
+const description = "_description_4egbd_28";
+const thresholdText = "_thresholdText_4egbd_43";
+const thresholdTextBold = "_thresholdTextBold_4egbd_54";
+const thresholdDot = "_thresholdDot_4egbd_61";
+const thresholdLine = "_thresholdLine_4egbd_62";
 const defaultStyles = {
   coalitionsWrapper,
   coalitionsContainer,
@@ -3244,7 +3271,8 @@ function CoalitionsTracker({
   abbreviationAccessor = "abbreviation",
   thresholdTextBold: thresholdTextBold2,
   thresholdText: thresholdText2,
-  styles: styles2
+  styles: styles2,
+  labelOverlapConfig = LabelOverlapConfig
 }) {
   const wrapperRef = useRef(null);
   const thresholdTextRef = useRef(null);
@@ -3298,6 +3326,8 @@ function CoalitionsTracker({
         },
         children: list.description
       }), jsx(StackedBar, {
+        labelOverlapConfig,
+        labelType: LabelType.hanging,
         stack: list.stack,
         width: list.width,
         height: barChartHeight,
@@ -3629,6 +3659,7 @@ export {
   GradientIcon,
   GridType,
   InfoButton,
+  LabelOverlapConfig,
   LabelType,
   LegendItem,
   Map$1 as Map,