@ably/ui 7.10.0-dev.e5f4e78 → 7.10.0-dev.e980a00

package/src/core/MeganavSearchAutocomplete/component.js

@@ -1,7 +1,7 @@
 import { queryId } from "../dom-query";
 import AddSearchClient from "addsearch-js-client";
 
-const init = ({ input, container, listContainer, client }) => {
+const init = ({ input, container, listContainer, clear, client }) => {
   client.setAnalyticsTag("Meganav autocomplete");
   client.setThrottleTime(400);
 
@@ -10,15 +10,52 @@ const init = ({ input, container, listContainer, client }) => {
     listContainer.innerHTML = "";
   };
 
+  const toggleClearBtn = (query) => {
+    if ((query || "").length > 0 && clear) {
+      clear.classList.remove("invisible");
+    } else if (clear) {
+      clear.classList.add("invisible");
+    }
+  };
+
+  const markQueryInSuggestion = (suggestion, query) => {
+    return suggestion.value.replace(
+      query.toLowerCase(),
+      `<span class="font-light">${query}</span>`
+    );
+  };
+
+  const navigateToUrl = (q) => (window.location = `/search?q=${q}`);
+
+  const focusNext = (index) => {
+    const nextSuggestion = listContainer.querySelector(
+      `[data-suggestion-index="${index + 1}"]`
+    );
+    if (!nextSuggestion) return;
+    nextSuggestion.focus();
+  };
+
+  const focusPrevious = (index) => {
+    const previousIndex = index - 1;
+
+    const previousSuggestion = listContainer.querySelector(
+      `[data-suggestion-index="${previousIndex}"]`
+    );
+    if (!previousSuggestion) return;
+    previousSuggestion.focus();
+  };
+
   const renderResults =
     (query) =>
     (results = { suggestions: [] }) => {
+      toggleClearBtn(query);
+
       if (results.suggestions.length === 0) {
         clearResults();
         return;
       }
 
-      const items = results.suggestions.map((suggestion) => {
+      const items = results.suggestions.map((suggestion, index) => {
         const li = document.createElement("li");
         const button = document.createElement("button");
 
@@ -30,16 +67,30 @@ const init = ({ input, container, listContainer, client }) => {
           "text-left",
           "rounded",
           "hover:text-gui-hover",
+          "focus:outline-gui-focus",
           "hover:bg-light-grey"
         );
 
-        button.innerHTML = suggestion.value.replace(
-          query,
-          `<span class="font-light">${query}</span>`
-        );
+        button.innerHTML = markQueryInSuggestion(suggestion, query);
+
+        button.dataset.suggestionIndex = index;
 
         button.addEventListener("click", () => {
-          window.location = `/search?q=${suggestion}`;
+          navigateToUrl(suggestion);
+        });
+
+        button.addEventListener("keydown", (e) => {
+          const key = e.key;
+
+          if (key === "ArrowDown") {
+            focusNext();
+          } else if (key === "ArrowUp" && index - 1 < 0) {
+            input.focus();
+          } else if (key === "ArrowUp" && index - 1 >= 0) {
+            focusPrevious();
+          } else if (key === "Enter" || key === "Space") {
+            navigateToUrl(suggestion);
+          }
         });
 
         li.appendChild(button);
@@ -53,6 +104,12 @@ const init = ({ input, container, listContainer, client }) => {
 
   const keyupHandler = (e) => {
     const query = e.target.value;
+    const key = e.key;
+
+    if (key === "ArrowDown") {
+      focusNext(0);
+      return;
+    }
 
     if (!query) {
       clearResults();
@@ -61,11 +118,27 @@ const init = ({ input, container, listContainer, client }) => {
     }
   };
 
+  let clearHandler;
+  if (clear) {
+    clearHandler = () => {
+      input.value = "";
+      clear.classList.add("invisible");
+      clearResults();
+    };
+    clear.addEventListener("click", clearHandler);
+  }
+
   input.addEventListener("keyup", keyupHandler);
 
   return {
-    teardown: () => input.removeEventListener("keyup", keyupHandler),
-    clear: () => clearResults(),
+    teardown: () => {
+      input.removeEventListener("keyup", keyupHandler);
+      if (clear) clear.removeEventListener("click", clearHandler);
+    },
+    clear: () => {
+      input.value = "";
+      clearResults();
+    },
   };
 };
 
@@ -89,7 +162,8 @@ export default () => {
         parent
       );
       const listContainer = queryId("meganav-search-autocomplete-list", parent);
+      const clear = queryId("meganav-search-input-clear", parent);
 
-      return init({ input, container, listContainer, client });
+      return init({ input, container, listContainer, client, clear });
     });
 };

package/src/core/MeganavSearchSuggestions/component.html.erb

@@ -1,18 +1,18 @@
 <p class="ui-text-overline2 text-cool-black py-12">Popular pages</p>
 
-<div class="flex justify-between items-center overflow-x-scroll">
+<div class="flex justify-between items-center overflow-x-scroll md:overflow-auto">
   <ul class="flex">
     <li class="py-12 pr-8 flex-shrink-0">
-      <%= link_to 'How does Ably work?', abs_url("/docs/how-ably-works"), class: "ui-text-p2 ui-link" %>
+      <%= link_to 'How does Ably work?', abs_url("/docs/how-ably-works"), class: "ui-text-p2" %>
     </li>
     <li class="py-12 px-8 flex-shrink-0">
-      <%= link_to 'Quickstart guide', abs_url("/docs/quick-start-guide"), class: "ui-text-p2 ui-link" %>
+      <%= link_to 'Quickstart guide', abs_url("/docs/quick-start-guide"), class: "ui-text-p2" %>
     </li>
     <li class="py-12 px-8 flex-shrink-0">
-      <%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2 ui-link" %>
+      <%= link_to 'Publish/Subscribe Messaging', abs_url("/docs/core-features/pubsub"), class: "ui-text-p2" %>
     </li>
     <li class="py-12 pl-8 flex-shrink-0">
-      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2 ui-link" %>
+      <%= link_to 'Platform', abs_url("/docs/how-ably-works"), class: "ui-text-p2" %>
     </li>
   </ul>
 

package/src/core/MeganavSearchSuggestions/component.jsx

@@ -8,25 +8,25 @@ const MeganavSearchSuggestions = ({ absUrl, displaySupportLink }) => {
     <>
       <p className="ui-text-overline2 text-cool-black py-12">Popular pages</p>
 
-      <div className="flex justify-between items-center overflow-x-scroll">
+      <div className="flex justify-between items-center overflow-x-scroll md:overflow-auto">
         <ul className="flex">
           <li className="py-12 pr-8 flex-shrink-0">
-            <a href={absUrl("/docs/how-ably-works")} className="ui-text-p2 ui-link">
+            <a href={absUrl("/docs/how-ably-works")} className="ui-text-p2">
               How does Ably work?
             </a>
           </li>
           <li className="py-12 px-8 flex-shrink-0">
-            <a href={absUrl("/docs/quick-start-guide")} className="ui-text-p2 ui-link">
+            <a href={absUrl("/docs/quick-start-guide")} className="ui-text-p2">
               Quickstart guide
             </a>
           </li>
           <li className="py-12 px-8 flex-shrink-0">
-            <a href={absUrl("/docs/core-features/pubsub")} className="ui-text-p2 ui-link">
+            <a href={absUrl("/docs/core-features/pubsub")} className="ui-text-p2">
               Publish/Subscribe Messaging
             </a>
           </li>
           <li className="py-12 pl-8 flex-shrink-0">
-            <a href={absUrl("/platform")} className="ui-text-p2 ui-link">
+            <a href={absUrl("/platform")} className="ui-text-p2">
               Platform
             </a>
           </li>