@ably/ui 7.10.0-dev.45e131a → 7.10.0-dev.caff705

package/src/core/MeganavSearch/component.jsx

@@ -10,12 +10,13 @@ const MeganavSearch = ({ absUrl }) => {
       <button
         type="button"
         data-id="meganav-control"
-        className="h-64 w-24 px-24 pr-48 py-20"
+        data-control="search"
+        className="h-64 w-24 px-24 pr-48 py-20 group focus:outline-none"
         aria-expanded="false"
         aria-controls="panel-search"
         aria-label={`Show Search Panel`}
       >
-        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="" />
+        <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="group-hover:text-gui-hover group-focus:text-gui-focus" />
       </button>
 
       <div className="ui-meganav-panel invisible" id="panel-search" data-id="meganav-panel">

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

@@ -0,0 +1,6 @@
+<div
+  class="absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey"
+  data-id="meganav-search-autocomplete-container"
+>
+  <ol class="m-16" data-id="meganav-search-autocomplete-list"></ol>
+</div>

package/src/core/MeganavSearchAutocomplete/component.js

@@ -0,0 +1,170 @@
+import { queryId } from "../dom-query";
+import AddSearchClient from "addsearch-js-client";
+
+const init = ({ input, container, listContainer, clear, client }) => {
+  client.setAnalyticsTag("Meganav autocomplete");
+  client.setThrottleTime(400);
+
+  const clearResults = () => {
+    container.classList.add("hidden");
+    listContainer.innerHTML = "";
+  };
+
+  const toggleClearBtn = (query) => {
+    if ((query || "").length > 0 && clear) {
+      clear.classList.remove("invisible");
+    } else if (clear) {
+      clear.classList.add("invisible");
+    }
+  };
+
+  const markQueryInSuggestion = (suggestionValue, query) => {
+    return suggestionValue.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, index) => {
+        const li = document.createElement("li");
+        const button = document.createElement("button");
+        button.type = "button";
+
+        button.classList.add(
+          "ui-text-menu2",
+          "font-medium",
+          "p-8",
+          "w-full",
+          "text-left",
+          "rounded",
+          "hover:text-gui-hover",
+          "focus:outline-gui-focus",
+          "hover:bg-light-grey"
+        );
+
+        button.innerHTML = markQueryInSuggestion(suggestion.value, query);
+
+        button.dataset.suggestionIndex = index;
+
+        button.addEventListener("click", () => {
+          navigateToUrl(suggestion.value);
+        });
+
+        button.addEventListener("keydown", (e) => {
+          const key = e.key;
+
+          if (key === "ArrowDown") {
+            focusNext(index);
+          } else if (key === "ArrowUp" && index - 1 < 0) {
+            input.focus();
+          } else if (key === "ArrowUp" && index - 1 >= 0) {
+            focusPrevious(index);
+          } else if (key === "Enter" || key === "Space") {
+            navigateToUrl(suggestion.value);
+          }
+        });
+
+        li.appendChild(button);
+        return li;
+      });
+
+      listContainer.innerHTML = "";
+      items.forEach((item) => listContainer.appendChild(item));
+      container.classList.remove("hidden");
+    };
+
+  const keyupHandler = (e) => {
+    const query = e.target.value;
+    const key = e.key;
+
+    if (key === "ArrowDown") {
+      focusNext(0);
+      return;
+    }
+
+    if (!query) {
+      clearResults();
+    } else {
+      client.suggestions(query, renderResults(query));
+    }
+  };
+
+  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);
+      if (clear) clear.removeEventListener("click", clearHandler);
+    },
+    clear: () => {
+      input.value = "";
+      clearResults();
+    },
+  };
+};
+
+export default () => {
+  const apiKey = document.body.dataset.addSearchApiKey;
+  if (!apiKey) {
+    console.log(`No AddSearch API key provided, skipping search suggestions.`);
+    return [];
+  }
+  const client = new AddSearchClient(apiKey);
+
+  return [
+    queryId("meganav-search-input"),
+    queryId("meganav-mobile-search-input"),
+  ]
+    .filter((i) => i)
+    .map((input) => {
+      const parent = input.parentNode;
+      const container = queryId(
+        "meganav-search-autocomplete-container",
+        parent
+      );
+      const listContainer = queryId("meganav-search-autocomplete-list", parent);
+      const clear = queryId("meganav-search-input-clear", parent);
+
+      return init({ input, container, listContainer, client, clear });
+    });
+};

package/src/core/MeganavSearchAutocomplete/component.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+const MeganavSearchAutocomplete = () => {
+  return (
+    <div
+      className="absolute w-full mt-8 z-10 hidden shadow-container rounded-lg bg-white border border-mid-grey"
+      data-id="meganav-search-autocomplete-container"
+    >
+      <ol className="m-16" data-id="meganav-search-autocomplete-list"></ol>
+    </div>
+  );
+};
+
+export default MeganavSearchAutocomplete;

package/src/core/MeganavSearchAutocomplete/component.rb

@@ -0,0 +1,6 @@
+module AblyUi
+  module Core
+    class MeganavSearchAutocomplete < ViewComponent::Base
+    end
+  end
+end

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

@@ -4,7 +4,9 @@
       <form class="flex items-start" action={absUrl("/search")} method="get">
         <div class="relative w-full">
           <%= render(AblyUi::Core::Icon.new(name: "icon-gui-search", size: "1.5rem", color: "text-cool-black", additional_css:"absolute top-12 left-16")) %>
-          <input type="search" name="q" class="ui-input pl-48 h-48" placeholder="Search" />
+          <input type="search" name="q" class="ui-input pl-48 h-48" placeholder="Search" autocomplete="off" data-id="meganav-search-input" />
+
+          <%= render(AblyUi::Core::MeganavSearchAutocomplete.new) %>
         </div>
 
         <button type="submit" class="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">

package/src/core/MeganavSearchPanel/component.jsx

@@ -3,6 +3,7 @@ import T from "prop-types";
 
 import Icon from "../Icon/component.jsx";
 import MeganavSearchSuggestions from "../MeganavSearchSuggestions/component.jsx";
+import MeganavSearchAutocomplete from "../MeganavSearchAutocomplete/component.jsx";
 
 const MeganavSearchPanel = ({ absUrl }) => {
   return (
@@ -12,7 +13,9 @@ const MeganavSearchPanel = ({ absUrl }) => {
           <form className="flex items-start" action={absUrl("/search")} method="get">
             <div className="relative w-full">
               <Icon name="icon-gui-search" color="text-cool-black" size="1.5rem" additionalCSS="absolute top-12 left-16" />
-              <input type="search" name="q" className="ui-input pl-48 h-48" placeholder="Search" />
+              <input type="search" name="q" className="ui-input pl-48 h-48" placeholder="Search" autoComplete="off" data-id="meganav-search-input" />
+
+              <MeganavSearchAutocomplete />
             </div>
 
             <button type="submit" className="ui-btn-secondary ml-8 sm:ml-16 md:ml-24 xl:ml-32">

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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus" %>
     </li>
   </ul>
 

package/src/core/MeganavSearchSuggestions/component.js

@@ -0,0 +1,123 @@
+import { queryId } from "../dom-query";
+
+const DRAG_BUFFER = 5;
+
+const getTranslateX = (node) =>
+  new DOMMatrix(window.getComputedStyle(node).transform).e;
+
+const updateTranslateX = (node, value) =>
+  (node.style.transform = `translateX(${value}px)`);
+
+const dragLeftBoundary = (translateX, threshold) => translateX >= threshold;
+
+const dragRightBoundary = (translateX, itemsWidth, windowWidth, threshold) =>
+  Math.abs(translateX - windowWidth + threshold) > itemsWidth;
+
+const getDistance = (e, touchStartX) =>
+  e.changedTouches[0]?.clientX - touchStartX;
+
+const withinBuffer = (distance) => Math.abs(distance) < DRAG_BUFFER;
+
+const MeganavSearchSuggestions = () => {
+  const suggestionsToggle = queryId("meganav-mobile-search-input");
+  const suggestions = queryId("meganav-mobile-search-suggestions");
+  const list = suggestions.querySelector("ul");
+  const listItems = list.querySelectorAll("li");
+
+  const itemsTotalWidth = Array.from(listItems)
+    .map((item) => item.getBoundingClientRect().width)
+    .reduce((acc, val) => acc + val, 0);
+
+  const dragLeft = (distance, threshold) => {
+    const currentTranslateX = getTranslateX(list);
+    const translateX = Math.round(currentTranslateX + distance);
+    if (dragLeftBoundary(translateX, threshold)) return;
+    updateTranslateX(list, translateX);
+  };
+
+  const dragLeftEnd = (distance, threshold) => {
+    const currentTranslateX = getTranslateX(list);
+    let translateX = Math.round(currentTranslateX + distance);
+
+    if (dragLeftBoundary(translateX, threshold)) {
+      translateX = 0;
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  const dragRight = (distance, threshold) => {
+    const listWidth = list.getBoundingClientRect().width;
+    const currentTranslateX = getTranslateX(list);
+    const translateX = Math.round(currentTranslateX + distance);
+
+    if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
+      return;
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  const dragRightEnd = (distance, threshold) => {
+    const listWidth = list.getBoundingClientRect().width;
+    const currentTranslateX = getTranslateX(list);
+    let translateX = Math.round(currentTranslateX + distance);
+
+    if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
+      translateX = -(itemsTotalWidth - listWidth + threshold);
+    }
+
+    updateTranslateX(list, translateX);
+  };
+
+  let touchStartX;
+
+  const touchstartHandler = (e) => {
+    touchStartX = e.touches[0]?.clientX;
+  };
+
+  const touchmoveHandler = (e) => {
+    const distance = getDistance(e, touchStartX);
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeft(distance, 24) : dragRight(distance, 96);
+  };
+
+  const touchendHandler = (e) => {
+    const distance = getDistance(e, touchStartX);
+    if (withinBuffer(distance)) return;
+    distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
+  };
+
+  const focusSuggestionsHandler = () => {
+    suggestions.classList.add("max-h-96");
+  };
+
+  const blurSuggestionsHandler = (e) => {
+    if (e.relatedTarget === suggestions.querySelectorAll("a")[0]) {
+      return;
+    }
+    suggestions.classList.remove("max-h-96");
+  };
+
+  suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
+  suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
+  suggestions.addEventListener("touchstart", touchstartHandler);
+  suggestions.addEventListener("touchmove", touchmoveHandler);
+  suggestions.addEventListener("touchend", touchendHandler);
+
+  return {
+    teardown: () => {
+      suggestionsToggle.removeEventListener("focus", focusSuggestionsHandler);
+      suggestionsToggle.removeEventListener("blur", blurSuggestionsHandler);
+      suggestions.removeEventListener("touchstart", touchstartHandler);
+      suggestions.removeEventListener("touchmove", touchmoveHandler);
+      suggestions.removeEventListener("touchend", touchendHandler);
+    },
+    clear: () => {
+      suggestions.classList.remove("max-h-96");
+      list.style.transform = `translateX(0px)`;
+    },
+  };
+};
+
+export default MeganavSearchSuggestions;

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">
-        <ul className="flex">
+      <div className="flex justify-between items-center overflow-hidden">
+        <ul className="flex transition-transform">
           <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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
               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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
               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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
               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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus">
               Platform
             </a>
           </li>

package/src/core/remote-blogs-posts.js

@@ -3,7 +3,7 @@ import { isJsonResponse } from "./remote-data-util";
 const fetchBlogPosts = async (store, blogUrl) => {
   try {
     if (!blogUrl) {
-      console.warn(
+      console.log(
         `Skipping fetching blog posts, invalid blogUrl: "${blogUrl}"`
       );
       return;

package/src/core/remote-session-data.js

@@ -11,7 +11,7 @@ const fetchSessionData = async (store, sessionUrl) => {
 
   try {
     if (!sessionUrl) {
-      console.warn(
+      console.log(
         `Skipping fetching session, invalid sessionUrl: "${sessionUrl}"`
       );
       sessionLoaded();