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

package/dist/interactive-component-library.umd.cjs

@@ -107,12 +107,12 @@
   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",
@@ -504,9 +504,9 @@
       })
     });
   };
-  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) {
@@ -885,7 +885,7 @@
     }, styles2);
     let timeSince = dayjs(timeStamp).fromNow();
     return jsxRuntime.jsx("span", {
-      className: styles2.text,
+      className: styles2.dateStampText,
       children: timeSince
     });
   };
@@ -1078,14 +1078,14 @@
   };
   function ArrowButton({
     direction = "right",
-    disabled = false,
+    disabled: disabled2 = false,
     styles: styles2,
     onClick
   }) {
     styles2 = mergeStyles(defaultStyles$j, styles2);
     return jsxRuntime.jsx("button", {
       className: styles2.button,
-      disabled,
+      disabled: disabled2,
       onClick,
       children: jsxRuntime.jsxs("svg", {
         className: [styles2.icon, direction].join(" "),
@@ -2080,14 +2080,15 @@
       })
     });
   }
-  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,
@@ -2095,6 +2096,7 @@
     clearButton,
     suggestions,
     suggestion,
+    disabled,
     selected: selected$1,
     highlighted
   };
@@ -2114,18 +2116,34 @@
     const [selectedIndex, setSelectedIndex] = hooks.useState(-1);
     const [suggestions2, setSuggestions] = hooks.useState();
     const [showSuggestions, setShowSuggestions] = hooks.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();
       }
     }
@@ -2203,18 +2221,19 @@
       className: styles2.suggestions,
       "aria-label": "Search suggestions",
       children: suggestions2.map((d2, index) => {
-        return jsxRuntime.jsx("li", {
+        const shouldHighlight = !d2.disabled;
+        return jsxRuntime.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 ? jsxRuntime.jsx("span", {
+          children: [shouldHighlight && d2.text.split(new RegExp(`(${highlightText})`, "ig")).map((part, i) => i % 2 === 1 ? jsxRuntime.jsx("span", {
             className: styles2.highlighted,
             children: part
-          }, i) : part)
+          }, i) : part), !shouldHighlight && d2.text]
         }, index);
       })
     });
@@ -7612,7 +7631,7 @@
     const offsetWidth = hooks.useMemo(() => {
       return -pageIndex * (pageWidth || 0);
     }, [pageIndex, pageWidth]);
-    const windowSize = useWindowSize();
+    useWindowSize();
     const tickerRef = hooks.useRef();
     const tickerItemsRef = hooks.useRef();
     const tickerScrollRef = hooks.useRef();
@@ -7628,10 +7647,9 @@
       setNumberOfPages(numberOfPages2);
     }, []);
     hooks.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;