@ably/ui 14.0.5 → 14.0.6

package/src/core/MeganavSearchAutocomplete/component.js

@@ -1,177 +0,0 @@
-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 = {}) => {
-      toggleClearBtn(query);
-
-      // Prevent invalid access error when key is invalid
-      if (!Array.isArray(results.suggestions)) {
-        clearResults();
-        return;
-      }
-
-      // Prevent key error from invalid key
-      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 (apiKey) => {
-  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.tsx

@@ -1,12 +0,0 @@
-import React from "react";
-
-const MeganavSearchAutocomplete = () => (
-  <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/MeganavSearchPanel.tsx

@@ -1,52 +0,0 @@
-import React from "react";
-
-import Icon from "./Icon";
-import MeganavSearchSuggestions from "./MeganavSearchSuggestions";
-import MeganavSearchAutocomplete from "./MeganavSearchAutocomplete";
-import { AbsUrl } from "./Meganav";
-
-const MeganavSearchPanel = ({ absUrl }: { absUrl: AbsUrl }) => (
-  <section className="ui-meganav-content grid-cols-12">
-    <div className="col-span-8">
-      <div className="mb-32">
-        <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"
-              autoComplete="off"
-              data-id="meganav-search-input"
-            />
-
-            <MeganavSearchAutocomplete />
-          </div>
-
-          <button
-            type="submit"
-            className="ui-btn-secondary flex-shrink-0 ml-8 sm:ml-16 md:ml-24 xl:ml-32"
-          >
-            Search
-          </button>
-        </form>
-      </div>
-    </div>
-
-    <div className="col-span-12">
-      <MeganavSearchSuggestions displaySupportLink={true} absUrl={absUrl} />
-    </div>
-  </section>
-);
-
-export default MeganavSearchPanel;

package/src/core/MeganavSearchSuggestions/component.js

@@ -1,133 +0,0 @@
-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 getItemsTotalWidth = (nodes) =>
-  nodes
-    .map((item) => item.getBoundingClientRect().width)
-    .reduce((acc, val) => acc + val, 0);
-
-const MeganavSearchSuggestions = () => {
-  const suggestionsToggle = queryId("meganav-mobile-search-input");
-  const suggestions = queryId("meganav-mobile-search-suggestions");
-  const list = suggestions.querySelector("ul");
-  const listItems = Array.from(list.querySelectorAll("li"));
-
-  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);
-    const itemsTotalWidth = getItemsTotalWidth(listItems);
-
-    if (dragRightBoundary(translateX, itemsTotalWidth, listWidth, threshold)) {
-      return;
-    }
-
-    updateTranslateX(list, translateX);
-  };
-
-  const dragRightEnd = (distance, threshold) => {
-    const listWidth = list.getBoundingClientRect().width;
-    const currentTranslateX = getTranslateX(list);
-    const itemsTotalWidth = getItemsTotalWidth(listItems);
-    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");
-  };
-
-  const wheelHandler = (e) => {
-    const distance = e.deltaY * 4;
-    if (withinBuffer(distance)) return;
-    distance > 0 ? dragLeftEnd(distance, 24) : dragRightEnd(distance, 48);
-  };
-
-  suggestionsToggle.addEventListener("focus", focusSuggestionsHandler);
-  suggestionsToggle.addEventListener("blur", blurSuggestionsHandler);
-  suggestions.addEventListener("touchstart", touchstartHandler);
-  suggestions.addEventListener("touchmove", touchmoveHandler);
-  suggestions.addEventListener("touchend", touchendHandler);
-  suggestions.addEventListener("wheel", wheelHandler);
-
-  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.tsx

@@ -1,62 +0,0 @@
-import React from "react";
-
-import FeaturedLink from "./FeaturedLink";
-import { AbsUrl } from "./Meganav";
-
-type MeganavSearchSuggestionsProps = {
-  absUrl: AbsUrl;
-  displaySupportLink: boolean;
-};
-
-const MeganavSearchSuggestions = ({
-  absUrl,
-  displaySupportLink,
-}: MeganavSearchSuggestionsProps) => (
-  <>
-    <p className="ui-text-overline2 text-cool-black py-12">Popular pages</p>
-
-    <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 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 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 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 hover:text-gui-hover active:text-gui-active focus:text-gui-focus"
-          >
-            Platform
-          </a>
-        </li>
-      </ul>
-      {displaySupportLink ? (
-        <FeaturedLink url={absUrl("/support")} textSize="text-p2">
-          Support
-        </FeaturedLink>
-      ) : null}
-    </div>
-  </>
-);
-
-export default MeganavSearchSuggestions;

package/src/core/Notice/component.css

@@ -1,7 +0,0 @@
-@layer components {
-  .ui-announcement {
-    @apply font-sans;
-    max-height: 37.5rem;
-    transition: max-height 300ms;
-  }
-}

package/src/core/Notice/component.js

@@ -1,154 +0,0 @@
-import Cookie from "js-cookie";
-import throttle from "lodash.throttle";
-
-import { queryId } from "../dom-query";
-import { FLASH_DATA_ID } from "../Flash";
-
-const COOKIE_EXPIRY = 90;
-const COLLAPSE_TRIGGER_DISTANCE = 5;
-const SCROLL_LISTENER_THROTTLE = 100;
-const RESIZE_LISTENER_THROTTLE = 100;
-
-const isMdViewport = () => !window.matchMedia(`(min-width: 65rem)`).matches;
-
-const adjustFlashMargin = (open) => {
-  // HACK ALERT
-  // Add margin to flashes when opening the notice.
-  // Flashes are react components and this notice needs to work as a view-component and react component.
-  // We could do this with redux but then we potentially update state on every scroll event, which
-  // even with debounce will deplate our frame budget.
-
-  const flash = queryId(FLASH_DATA_ID);
-
-  if (flash) {
-    flash.style.marginTop = open ? `4rem` : null;
-  }
-};
-
-const hideOnMobile = (bannerContainer) => {
-  if (isMdViewport()) {
-    bannerContainer.style.display = "none";
-  } else {
-    bannerContainer.style.display = null;
-  }
-};
-
-const hideNotice = (bannerContainer) => {
-  bannerContainer.style.maxHeight = 0;
-  bannerContainer.style.overflow = "hidden";
-
-  adjustFlashMargin(false);
-};
-
-const showNotice = (bannerContainer) => {
-  bannerContainer.style.maxHeight = null;
-  bannerContainer.style.overflow = null;
-
-  adjustFlashMargin(true);
-};
-
-const setupRememberClosed = (cookieId, noticeId) => {
-  const cookie = Cookie.get(cookieId) || "";
-
-  Cookie.set(cookieId, `${cookie.replace(`${noticeId},`, "") + noticeId},`, {
-    expires: COOKIE_EXPIRY,
-  });
-};
-
-const hasBeenClosedBefore = (cookieId, noticeId) =>
-  (Cookie.get(cookieId) || "").includes(noticeId);
-
-const setupNoticeCollapse = (bannerContainer) => {
-  const scrollTop = window.scrollY;
-
-  if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {
-    hideNotice(bannerContainer);
-  }
-
-  const listener = throttle(() => {
-    const scrollTop = window.scrollY;
-
-    if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {
-      hideNotice(bannerContainer);
-    } else if (bannerContainer.style.overflow) {
-      showNotice(bannerContainer);
-    }
-  }, SCROLL_LISTENER_THROTTLE);
-
-  document.addEventListener("scroll", listener);
-
-  return () => document.removeEventListener("scroll", listener);
-};
-
-const setupCloseBtn = (
-  bannerContainer,
-  cookieId,
-  noticeId,
-  collapseUnmountListeners,
-) => {
-  const closeBtn = bannerContainer.querySelector("button");
-
-  if (!closeBtn) return () => {};
-
-  const listener = () => {
-    if (cookieId && noticeId) setupRememberClosed(cookieId, noticeId);
-
-    hideNotice(bannerContainer);
-    collapseUnmountListeners();
-  };
-
-  closeBtn.addEventListener("click", listener);
-
-  return () => document.removeEventListener("click", listener);
-};
-
-const resizeHandler = (bannerContainer) => {
-  const handler = throttle(() => {
-    hideOnMobile(bannerContainer);
-  }, RESIZE_LISTENER_THROTTLE);
-
-  window.addEventListener("resize", handler);
-
-  return () => window.removeEventListener("resize", handler);
-};
-
-const Notice = ({ bannerContainer, cookieId, noticeId, options }) => {
-  if (typeof window === "undefined") return () => {};
-
-  if (!bannerContainer) {
-    console.warn(
-      "A Notice component was initited but no notice container was found.",
-    );
-    return () => {};
-  }
-
-  if (hasBeenClosedBefore(cookieId, noticeId)) return () => {};
-
-  hideOnMobile(bannerContainer);
-  showNotice(bannerContainer);
-
-  const opts = { collapse: true, ...options };
-
-  const collapseUnmountListeners = opts.collapse
-    ? setupNoticeCollapse(bannerContainer)
-    : () => {};
-
-  const closeBtnUnmountListeners = setupCloseBtn(
-    bannerContainer,
-    cookieId,
-    noticeId,
-    collapseUnmountListeners,
-  );
-
-  const resizeUnmountListener = resizeHandler(bannerContainer);
-
-  return () => {
-    [
-      closeBtnUnmountListeners,
-      collapseUnmountListeners,
-      resizeUnmountListener,
-    ].forEach((unmount) => unmount());
-  };
-};
-
-export default Notice;

package/src/core/Notice.tsx

@@ -1,102 +0,0 @@
-import React, { ReactNode, useEffect } from "react";
-
-import NoticeScripts from "./Notice/component.js";
-import Icon from "./Icon";
-type ContentWrapperProps = {
-  buttonLink: string;
-  children: ReactNode;
-};
-
-// TODO(jamiehenson):
-// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.
-// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are
-// the ones after the line break.
-type NoticeProps = {
-  buttonLink?: string;
-  buttonLabel?: string;
-  bodyText?: string;
-  title?: string;
-  closeBtn?: boolean;
-  config?: {
-    collapse: boolean;
-    noticeId: string;
-    cookieId: string;
-  };
-  bgColor?: string;
-  textColor?: string;
-
-  bannerContainer?: Element | null;
-  cookieId?: string;
-  noticeId?: string;
-  options?: { collapse: boolean };
-};
-
-const contentWrapperClasses = "w-full pr-8 ui-text-p3 self-center";
-
-const ContentWrapper = ({ buttonLink, children }: ContentWrapperProps) =>
-  buttonLink ? (
-    <a href={buttonLink} className={contentWrapperClasses}>
-      {children}
-    </a>
-  ) : (
-    <div className={contentWrapperClasses}>{children}</div>
-  );
-
-const Notice = ({
-  buttonLink,
-  buttonLabel,
-  bodyText,
-  title,
-  config,
-  closeBtn,
-  bgColor = "bg-gradient-active-orange",
-  textColor = "text-white",
-}: NoticeProps) => {
-  useEffect(() => {
-    NoticeScripts({
-      bannerContainer: document.querySelector('[data-id="ui-notice"]'),
-      cookieId: config?.cookieId,
-      noticeId: config?.noticeId,
-      options: {
-        collapse: config?.collapse || false,
-      },
-    });
-  }, []);
-
-  const wrapperClasses = ["ui-announcement", bgColor, textColor].join(" ");
-
-  return (
-    <div
-      className={wrapperClasses}
-      data-id="ui-notice"
-      style={{ maxHeight: 0, overflow: "hidden" }}
-    >
-      <div className="ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start">
-        <ContentWrapper buttonLink={buttonLink ?? "#"}>
-          <strong className="font-bold whitespace-nowrap pr-4">{title}</strong>
-          <span className="pr-4">{bodyText}</span>
-          {buttonLabel && (
-            <span className="underline cursor-pointer whitespace-nowrap">
-              {buttonLabel}
-            </span>
-          )}
-        </ContentWrapper>
-
-        {closeBtn && (
-          <button
-            type="button"
-            className="ml-auto h-20 w-20 border-none bg-none self-baseline"
-          >
-            <Icon
-              name="icon-gui-close"
-              size="1.25rem"
-              color="text-cool-black"
-            />
-          </button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default Notice;