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

package/dist/interactive-component-library.js

@@ -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);
     })
   });