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

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

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