@guardian/interactive-component-library 0.1.0-alpha.24 → 0.1.0-alpha.26

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", {
@@ -3121,18 +3132,19 @@ function Modal({
     })
   }), document.body);
 }
-const container = "_container_iozsb_1";
-const button$1 = "_button_iozsb_6";
-const icon = "_icon_iozsb_22";
-const title$1 = "_title_iozsb_27";
-const popout = "_popout_iozsb_34";
-const hint = "_hint_iozsb_51";
-const option = "_option_iozsb_58";
-const optionIcon = "_optionIcon_iozsb_79";
-const optionTitle = "_optionTitle_iozsb_84";
-const optionDescription = "_optionDescription_iozsb_92";
-const checkmark = "_checkmark_iozsb_99";
-const checkmarkPath = "_checkmarkPath_iozsb_105";
+const container = "_container_1enis_1";
+const button$1 = "_button_1enis_6";
+const icon = "_icon_1enis_22";
+const title$1 = "_title_1enis_27";
+const popout = "_popout_1enis_34";
+const hint = "_hint_1enis_51";
+const groupHeader = "_groupHeader_1enis_58";
+const option = "_option_1enis_65";
+const optionIcon = "_optionIcon_1enis_86";
+const optionTitle = "_optionTitle_1enis_91";
+const optionDescription = "_optionDescription_1enis_99";
+const checkmark = "_checkmark_1enis_106";
+const checkmarkPath = "_checkmarkPath_1enis_112";
 const styles$2 = {
   container,
   button: button$1,
@@ -3140,6 +3152,7 @@ const styles$2 = {
   title: title$1,
   popout,
   hint,
+  groupHeader,
   option,
   optionIcon,
   optionTitle,
@@ -3164,10 +3177,29 @@ function Dropdown({
     if (collapseOnSelect)
       setExpanded(false);
   }, [onSelect]);
+  const optionGroups = useMemo(() => {
+    const containsOptionGroups = "options" in options[0];
+    if (!containsOptionGroups) {
+      return [{
+        options
+      }];
+    }
+    let optionIndex = 0;
+    for (const group2 of options) {
+      for (const option2 of group2.options) {
+        option2.index = optionIndex;
+        optionIndex++;
+      }
+    }
+    return options;
+  }, options);
+  const flatOptions = useMemo(() => {
+    return optionGroups.map((group2) => group2.options).flat();
+  }, [optionGroups]);
   const iconForSelectedOption = useMemo(() => {
-    const selectedOption = options[selectedIndex];
+    const selectedOption = flatOptions[selectedIndex];
     return selectedOption.icon;
-  }, [options, selectedIndex]);
+  }, [flatOptions, selectedIndex]);
   return jsxs("div", {
     className: styles$2.container,
     children: [jsxs("button", {
@@ -3192,9 +3224,28 @@ function Dropdown({
       children: [hint2 && jsx("p", {
         className: styles$2.hint,
         children: hint2
-      }), options.map((option2, index2) => jsxs("button", {
+      }), optionGroups.map((group2) => jsx(OptionGroup, {
+        ...group2,
+        selectedIndex,
+        onOptionClick
+      }))]
+    })]
+  });
+}
+function OptionGroup({
+  title: title2,
+  options,
+  selectedIndex,
+  onOptionClick
+}) {
+  return jsxs(Fragment, {
+    children: [title2 && jsx("p", {
+      className: styles$2.groupHeader,
+      children: title2
+    }), options.map((option2) => {
+      return jsxs("button", {
         className: styles$2.option,
-        onClick: () => onOptionClick(option2, index2),
+        onClick: () => onOptionClick(option2, option2.index),
         children: [jsx("img", {
           src: option2.icon,
           className: styles$2.optionIcon
@@ -3207,11 +3258,11 @@ function Dropdown({
             className: styles$2.optionDescription,
             children: option2.description
           })]
-        }), index2 === selectedIndex && jsx("div", {
+        }), option2.index === selectedIndex && jsx("div", {
           className: styles$2.checkmark,
           children: jsx(Checkmark, {})
         })]
-      }, option2.title))]
+      }, option2.title);
     })]
   });
 }
@@ -3230,15 +3281,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,
@@ -3260,7 +3311,8 @@ function CoalitionsTracker({
   abbreviationAccessor = "abbreviation",
   thresholdTextBold: thresholdTextBold2,
   thresholdText: thresholdText2,
-  styles: styles2
+  styles: styles2,
+  labelOverlapConfig = LabelOverlapConfig
 }) {
   const wrapperRef = useRef(null);
   const thresholdTextRef = useRef(null);
@@ -3314,6 +3366,8 @@ function CoalitionsTracker({
         },
         children: list.description
       }), jsx(StackedBar, {
+        labelOverlapConfig,
+        labelType: LabelType.hanging,
         stack: list.stack,
         width: list.width,
         height: barChartHeight,
@@ -3645,6 +3699,7 @@ export {
   GradientIcon,
   GridType,
   InfoButton,
+  LabelOverlapConfig,
   LabelType,
   LegendItem,
   Map$1 as Map,