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

package/dist/interactive-component-library.js

@@ -1133,8 +1133,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 +1169,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 +1192,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 +3091,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 +3151,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];