@guardian/interactive-component-library 0.1.0-alpha.39 → 0.1.0-alpha.41

package/dist/interactive-component-library.js

@@ -111,12 +111,12 @@ function LargeChevron({
 const container$7 = "_container_jzalm_1";
 const dot = "_dot_jzalm_6";
 const circle$2 = "_circle_jzalm_13";
-const text$3 = "_text_jzalm_17";
+const text$2 = "_text_jzalm_17";
 const defaultStyles$v = {
   container: container$7,
   dot,
   circle: circle$2,
-  text: text$3
+  text: text$2
 };
 const DOT_TYPE = {
   round: "round",
@@ -508,9 +508,9 @@ const CircleIcon = ({
     })
   });
 };
-const text$2 = "_text_1okyv_1";
+const dateStampText = "_dateStampText_wczs5_1";
 const defaultStyles$p = {
-  text: text$2
+  dateStampText
 };
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
@@ -889,7 +889,7 @@ const RelativeTimeSentence = ({
   }, styles2);
   let timeSince = dayjs(timeStamp).fromNow();
   return jsx("span", {
-    className: styles2.text,
+    className: styles2.dateStampText,
     children: timeSince
   });
 };
@@ -1082,14 +1082,14 @@ const defaultStyles$j = {
 };
 function ArrowButton({
   direction = "right",
-  disabled = false,
+  disabled: disabled2 = false,
   styles: styles2,
   onClick
 }) {
   styles2 = mergeStyles(defaultStyles$j, styles2);
   return jsx("button", {
     className: styles2.button,
-    disabled,
+    disabled: disabled2,
     onClick,
     children: jsxs("svg", {
       className: [styles2.icon, direction].join(" "),
@@ -2084,14 +2084,15 @@ function SearchIcon() {
     })
   });
 }
-const searchContainer = "_searchContainer_1px2g_1";
-const input = "_input_1px2g_5";
-const searchIcon = "_searchIcon_1px2g_27";
-const clearButton = "_clearButton_1px2g_36";
-const suggestions = "_suggestions_1px2g_42";
-const suggestion = "_suggestion_1px2g_42";
-const selected$1 = "_selected_1px2g_68";
-const highlighted = "_highlighted_1px2g_72";
+const searchContainer = "_searchContainer_1kj0x_1";
+const input = "_input_1kj0x_5";
+const searchIcon = "_searchIcon_1kj0x_27";
+const clearButton = "_clearButton_1kj0x_36";
+const suggestions = "_suggestions_1kj0x_42";
+const suggestion = "_suggestion_1kj0x_42";
+const disabled = "_disabled_1kj0x_68";
+const selected$1 = "_selected_1kj0x_73";
+const highlighted = "_highlighted_1kj0x_77";
 const defaultStyles$5 = {
   searchContainer,
   input,
@@ -2099,6 +2100,7 @@ const defaultStyles$5 = {
   clearButton,
   suggestions,
   suggestion,
+  disabled,
   selected: selected$1,
   highlighted
 };
@@ -2118,18 +2120,34 @@ function SearchInput({
   const [selectedIndex, setSelectedIndex] = useState(-1);
   const [suggestions2, setSuggestions] = useState();
   const [showSuggestions, setShowSuggestions] = useState(true);
-  function onKeyDown(event) {
+  async function updateSelectedIndex(diff) {
+    setSelectedIndex((currentIndex) => {
+      const newIndex = Math.max(Math.min(currentIndex + diff, suggestions2.length - 1), -1);
+      if (newIndex >= 0 && suggestions2[newIndex].disabled) {
+        return currentIndex;
+      }
+      return newIndex;
+    });
+  }
+  async function onKeyDown(event) {
     if (event.key === "ArrowDown") {
       event.preventDefault();
-      setSelectedIndex((currentIndex) => Math.min(currentIndex + 1, suggestions2.length - 1));
+      updateSelectedIndex(1);
     } else if (event.key === "ArrowUp") {
       event.preventDefault();
-      setSelectedIndex((currentIndex) => Math.max(currentIndex - 1, -1));
+      updateSelectedIndex(-1);
     } else if (event.key === "Enter" && selectedIndex >= 0) {
       event.preventDefault();
       onSelectSuggestion(suggestions2[selectedIndex]);
     } else if (event.key === "Enter") {
-      onSubmit(inputRef.current.value);
+      event.preventDefault();
+      if (onSubmit) {
+        const shouldBlur = await onSubmit(inputRef.current.value);
+        if (shouldBlur) {
+          inputRef.current.blur();
+        }
+      }
+    } else if (event.key === "Escape") {
       inputRef.current.blur();
     }
   }
@@ -2207,18 +2225,19 @@ function SuggestionList({
     className: styles2.suggestions,
     "aria-label": "Search suggestions",
     children: suggestions2.map((d2, index) => {
-      return jsx("li", {
+      const shouldHighlight = !d2.disabled;
+      return jsxs("li", {
         "aria-label": d2.text,
-        className: [styles2.suggestion, index === selectedIndex && styles2.selected].join(" "),
+        className: [styles2.suggestion, index === selectedIndex && styles2.selected, d2.disabled && styles2.disabled].join(" "),
         onMouseDown: (e) => e.preventDefault(),
         onMouseOver: () => onMouseOver(d2, index),
         onClick: () => {
           onSelect(d2);
         },
-        children: d2.text.split(new RegExp(`(${highlightText})`, "ig")).map((part, i) => i % 2 === 1 ? jsx("span", {
+        children: [shouldHighlight && d2.text.split(new RegExp(`(${highlightText})`, "ig")).map((part, i) => i % 2 === 1 ? jsx("span", {
           className: styles2.highlighted,
           children: part
-        }, i) : part)
+        }, i) : part), !shouldHighlight && d2.text]
       }, index);
     })
   });
@@ -7616,7 +7635,7 @@ function Ticker({
   const offsetWidth = useMemo(() => {
     return -pageIndex * (pageWidth || 0);
   }, [pageIndex, pageWidth]);
-  const windowSize = useWindowSize();
+  useWindowSize();
   const tickerRef = useRef();
   const tickerItemsRef = useRef();
   const tickerScrollRef = useRef();
@@ -7632,10 +7651,9 @@ function Ticker({
     setNumberOfPages(numberOfPages2);
   }, []);
   useLayoutEffect(() => {
-    const tickerItemsContainer = tickerItemsRef.current;
-    const hideButtons2 = windowSize.width >= 480 ? tickerScrollRef.current.scrollWidth <= tickerItemsContainer.clientWidth : childArray.length < 3;
+    const hideButtons2 = childArray.length < 4;
     setHideButtons(hideButtons2);
-  }, [windowSize, setHideButtons]);
+  }, [childArray]);
   function toggleExpandedState() {
     setExpanded((expanded2) => {
       const newState = !expanded2;