@ably/ui 6.0.1 → 6.2.1

package/core/CompanyAutocomplete/component.css

@@ -0,0 +1,46 @@
+@layer components {
+  .ui-company-autocomplete-container {
+    @apply shadow-container absolute bg-white w-full z-10 font-sans;
+  }
+
+  .ui-company-autocomplete-list {
+    @apply border border-mid-grey border-t-0;
+  }
+
+  .ui-company-autocomplete-listitem {
+    @apply border-b border-mid-grey h-48;
+  }
+
+  .ui-company-autocomplete-btn {
+    @apply h-full w-full flex items-center py-4 px-12;
+  }
+
+  .ui-company-autocomplete-btn:focus {
+    @apply focus:text-gui-focus;
+  }
+
+  .ui-company-autocomplete-listitem:last-child {
+    @apply border-b-0;
+  }
+
+  .ui-company-autocomplete-listitem:hover {
+    @apply bg-light-grey cursor-pointer;
+  }
+
+  .ui-company-autocomplete-listitem:hover .ui-company-autocomplete-name {
+    @apply text-gui-hover;
+  }
+
+  .ui-company-autocomplete-logo {
+    @apply w-32;
+  }
+
+  .ui-company-autocomplete-name {
+    @apply font-sans font-light text-cool-black ml-8 text-p3 text-left;
+  }
+
+  .ui-company-autocomplete-domain {
+    @apply font-sans font-light text-dark-grey ml-auto text-p3;
+  }
+}
+

package/core/CompanyAutocomplete/component.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.AblyUi=e():(t.AblyUi=t.AblyUi||{},t.AblyUi.Core=t.AblyUi.Core||{},t.AblyUi.Core.CompanyAutocomplete=e())}(this,(function(){return(()=>{var t={7757:(t,e,r)=>{t.exports=r(5666)},3096:(t,e,r)=>{var n="Expected a function",o=/^\s+|\s+$/g,i=/^[-+]0x[0-9a-f]+$/i,a=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt,f="object"==typeof r.g&&r.g&&r.g.Object===Object&&r.g,l="object"==typeof self&&self&&self.Object===Object&&self,s=f||l||Function("return this")(),p=Object.prototype.toString,d=Math.max,h=Math.min,v=function(){return s.Date.now()};function y(t){var e=typeof t;return!!t&&("object"==e||"function"==e)}function m(t){if("number"==typeof t)return t;if(function(t){return"symbol"==typeof t||function(t){return!!t&&"object"==typeof t}(t)&&"[object Symbol]"==p.call(t)}(t))return NaN;if(y(t)){var e="function"==typeof t.valueOf?t.valueOf():t;t=y(e)?e+"":e}if("string"!=typeof t)return 0===t?t:+t;t=t.replace(o,"");var r=a.test(t);return r||c.test(t)?u(t.slice(2),r?2:8):i.test(t)?NaN:+t}t.exports=function(t,e,r){var o=!0,i=!0;if("function"!=typeof t)throw new TypeError(n);return y(r)&&(o="leading"in r?!!r.leading:o,i="trailing"in r?!!r.trailing:i),function(t,e,r){var o,i,a,c,u,f,l=0,s=!1,p=!1,g=!0;if("function"!=typeof t)throw new TypeError(n);function w(e){var r=o,n=i;return o=i=void 0,l=e,c=t.apply(n,r)}function b(t){return l=t,u=setTimeout(E,e),s?w(t):c}function x(t){var r=t-f;return void 0===f||r>=e||r<0||p&&t-l>=a}function E(){var t=v();if(x(t))return L(t);u=setTimeout(E,function(t){var r=e-(t-f);return p?h(r,a-(t-l)):r}(t))}function L(t){return u=void 0,g&&o?w(t):(o=i=void 0,c)}function j(){var t=v(),r=x(t);if(o=arguments,i=this,f=t,r){if(void 0===u)return b(f);if(p)return u=setTimeout(E,e),w(f)}return void 0===u&&(u=setTimeout(E,e)),c}return e=m(e)||0,y(r)&&(s=!!r.leading,a=(p="maxWait"in r)?d(m(r.maxWait)||0,e):a,g="trailing"in r?!!r.trailing:g),j.cancel=function(){void 0!==u&&clearTimeout(u),l=0,o=f=i=u=void 0},j.flush=function(){return void 0===u?c:L(v())},j}(t,e,{leading:o,maxWait:e,trailing:i})}},5666:t=>{var e=function(t){"use strict";var e,r=Object.prototype,n=r.hasOwnProperty,o="function"==typeof Symbol?Symbol:{},i=o.iterator||"@@iterator",a=o.asyncIterator||"@@asyncIterator",c=o.toStringTag||"@@toStringTag";function u(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{u({},"")}catch(t){u=function(t,e,r){return t[e]=r}}function f(t,e,r,n){var o=e&&e.prototype instanceof y?e:y,i=Object.create(o.prototype),a=new k(n||[]);return i._invoke=function(t,e,r){var n=s;return function(o,i){if(n===d)throw new Error("Generator is already running");if(n===h){if("throw"===o)throw i;return A()}for(r.method=o,r.arg=i;;){var a=r.delegate;if(a){var c=O(a,r);if(c){if(c===v)continue;return c}}if("next"===r.method)r.sent=r._sent=r.arg;else if("throw"===r.method){if(n===s)throw n=h,r.arg;r.dispatchException(r.arg)}else"return"===r.method&&r.abrupt("return",r.arg);n=d;var u=l(t,e,r);if("normal"===u.type){if(n=r.done?h:p,u.arg===v)continue;return{value:u.arg,done:r.done}}"throw"===u.type&&(n=h,r.method="throw",r.arg=u.arg)}}}(t,r,a),i}function l(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}t.wrap=f;var s="suspendedStart",p="suspendedYield",d="executing",h="completed",v={};function y(){}function m(){}function g(){}var w={};w[i]=function(){return this};var b=Object.getPrototypeOf,x=b&&b(b(N([])));x&&x!==r&&n.call(x,i)&&(w=x);var E=g.prototype=y.prototype=Object.create(w);function L(t){["next","throw","return"].forEach((function(e){u(t,e,(function(t){return this._invoke(e,t)}))}))}function j(t,e){function r(o,i,a,c){var u=l(t[o],t,i);if("throw"!==u.type){var f=u.arg,s=f.value;return s&&"object"==typeof s&&n.call(s,"__await")?e.resolve(s.__await).then((function(t){r("next",t,a,c)}),(function(t){r("throw",t,a,c)})):e.resolve(s).then((function(t){f.value=t,a(f)}),(function(t){return r("throw",t,a,c)}))}c(u.arg)}var o;this._invoke=function(t,n){function i(){return new e((function(e,o){r(t,n,e,o)}))}return o=o?o.then(i,i):i()}}function O(t,r){var n=t.iterator[r.method];if(n===e){if(r.delegate=null,"throw"===r.method){if(t.iterator.return&&(r.method="return",r.arg=e,O(t,r),"throw"===r.method))return v;r.method="throw",r.arg=new TypeError("The iterator does not provide a 'throw' method")}return v}var o=l(n,t.iterator,r.arg);if("throw"===o.type)return r.method="throw",r.arg=o.arg,r.delegate=null,v;var i=o.arg;return i?i.done?(r[t.resultName]=i.value,r.next=t.nextLoc,"return"!==r.method&&(r.method="next",r.arg=e),r.delegate=null,v):i:(r.method="throw",r.arg=new TypeError("iterator result is not an object"),r.delegate=null,v)}function T(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function _(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function k(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(T,this),this.reset(!0)}function N(t){if(t){var r=t[i];if(r)return r.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var o=-1,a=function r(){for(;++o<t.length;)if(n.call(t,o))return r.value=t[o],r.done=!1,r;return r.value=e,r.done=!0,r};return a.next=a}}return{next:A}}function A(){return{value:e,done:!0}}return m.prototype=E.constructor=g,g.constructor=m,m.displayName=u(g,c,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===m||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,g):(t.__proto__=g,u(t,c,"GeneratorFunction")),t.prototype=Object.create(E),t},t.awrap=function(t){return{__await:t}},L(j.prototype),j.prototype[a]=function(){return this},t.AsyncIterator=j,t.async=function(e,r,n,o,i){void 0===i&&(i=Promise);var a=new j(f(e,r,n,o),i);return t.isGeneratorFunction(r)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},L(E),u(E,c,"Generator"),E[i]=function(){return this},E.toString=function(){return"[object Generator]"},t.keys=function(t){var e=[];for(var r in t)e.push(r);return e.reverse(),function r(){for(;e.length;){var n=e.pop();if(n in t)return r.value=n,r.done=!1,r}return r.done=!0,r}},t.values=N,k.prototype={constructor:k,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=e,this.done=!1,this.delegate=null,this.method="next",this.arg=e,this.tryEntries.forEach(_),!t)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=e)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var r=this;function o(n,o){return c.type="throw",c.arg=t,r.next=n,o&&(r.method="next",r.arg=e),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],c=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var u=n.call(a,"catchLoc"),f=n.call(a,"finallyLoc");if(u&&f){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(u){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!f)throw new Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,v):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),v},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),_(r),v}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;_(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,r,n){return this.delegate={iterator:N(t),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=e),v}},t}(t.exports);try{regeneratorRuntime=e}catch(t){Function("r","regeneratorRuntime = r")(e)}}},e={};function r(n){var o=e[n];if(void 0!==o)return o.exports;var i=e[n]={exports:{}};return t[n](i,i.exports,r),i.exports}r.n=t=>{var e=t&&t.__esModule?()=>t.default:()=>t;return r.d(e,{a:e}),e},r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"==typeof window)return window}}(),r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var n={};return(()=>{"use strict";r.d(n,{default:()=>h});var t=r(7757),e=r.n(t),o=r(3096),i=r.n(o);function a(t,e,r,n,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void r(t)}c.done?e(u):Promise.resolve(u).then(n,o)}function c(t){return function(){var e=this,r=arguments;return new Promise((function(n,o){var i=t.apply(e,r);function c(t){a(i,n,o,c,u,"next",t)}function u(t){a(i,n,o,c,u,"throw",t)}c(void 0)}))}}var u=function(t){return t.parentNode.querySelector("[data-id=company-autocomplete-dropdown]")},f=function(t){return t?t.querySelectorAll("li > button"):[]},l=function(t){return Array.from(t).indexOf(document.activeElement)},s=function(t){var e=u(t);e&&(e.classList.add("hidden"),e.querySelector("ol").innerHTML="")},p=function(t,e){var r=t.parentNode,n=function(t){var e=u(t);if(!e){t.parentNode.style.position="relative",(e=document.createElement("div")).dataset.id="company-autocomplete-dropdown",e.classList.add("ui-company-autocomplete-container");var r=document.createElement("ol");return r.classList.add("ui-company-autocomplete-list"),{container:e,list:r}}return{container:e,list:e.querySelector("ol")}}(t),o=n.container,i=n.list,a=function(t){return t.map((function(t){var e=document.createElement("li");e.classList.add("ui-company-autocomplete-listitem");var r=document.createElement("button");r.classList.add("ui-company-autocomplete-btn"),r.dataset.name=t.name;var n=document.createElement("img");n.alt="".concat(t.name," logo"),n.src=t.logo,n.classList.add("ui-company-autocomplete-logo");var o=document.createElement("p");o.textContent=t.name,o.classList.add("ui-company-autocomplete-name");var i=document.createElement("p");return i.textContent=t.domain,i.classList.add("ui-company-autocomplete-domain"),r.append(n),r.append(o),r.append(i),e.append(r),e}))}(e);s(t),a.forEach((function(r,n){i.append(r),r.addEventListener("click",(function(r){t.value=e[n].name,r.preventDefault()}))})),o.append(i),o.classList.remove("hidden"),r.append(o)},d=function(){var t=c(e().mark((function t(r,n){var o,i;return e().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(t.prev=0,n){t.next=3;break}return t.abrupt("return",[]);case 3:return t.next=5,fetch("".concat(r,"?query=").concat(n));case 5:return o=t.sent,t.next=8,o.json();case 8:return i=t.sent,t.abrupt("return",i);case 12:return t.prev=12,t.t0=t.catch(0),console.error(t.t0),t.abrupt("return",[]);case 16:case"end":return t.stop()}}),t,null,[[0,12]])})));return function(e,r){return t.apply(this,arguments)}}();const h=function(t,r){t&&r&&(t.setAttribute("autocomplete","off"),t.addEventListener("keyup",i()(function(){var n=c(e().mark((function n(o){var i,a;return e().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!["Enter","Space","Tab","Escape"].includes(o.code)){e.next=2;break}return e.abrupt("return");case 2:return i=o.target.value,e.next=5,d(r,i);case 5:(a=e.sent)&&a.length>0&&p(t,a);case 7:case"end":return e.stop()}}),n)})));return function(t){return n.apply(this,arguments)}}(),100,{trailing:!0})),t.parentNode.addEventListener("keydown",(function(e){"ArrowDown"===e.code?function(t,e){var r=u(t),n=f(r),o=l(n);0!==n.length&&(document.activeElement===t?n[0].focus():o>=0&&o<n.length-1&&n[o+1].focus(),e.preventDefault())}(t,e):"ArrowUp"===e.code?function(t,e){var r=u(t),n=f(r),o=l(n);0!==n.length&&(0===o?t.focus():o>0&&n[o-1].focus(),e.preventDefault())}(t,e):"Enter"===e.code||"Space"===e.code?function(t,e){e.target.dataset.name&&(t.value=e.target.dataset.name,s(t),t.focus(),e.preventDefault())}(t,e):"Tab"===e.code?function(t,e){var r=u(t),n=f(r),o=l(n);(document.activeElement===t&&e.shiftKey||o===n.length-1)&&s(t)}(t,e):"Escape"===e.code&&s(t)})),document.body.addEventListener("click",(function(){s(t)})))}})(),n.default})()}));

package/core/Meganav.jsx

@@ -684,7 +684,14 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
     className: "ui-meganav-media-heading"
   }, "Streaming data sources"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Augment your apps with realtime updates like weather or transit."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+  }, "Augment your apps with realtime updates like weather or transit."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/periodic-table-of-realtime"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "The Periodic Table of Realtime"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "A compendium for all things realtime and event-driven."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline uppercase",
     id: "meganav-developers-panel-quick-links"
   }, "Quick links"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {

package/core/MeganavContentDevelopers.jsx

@@ -372,7 +372,14 @@ var MeganavContentDevelopers = function MeganavContentDevelopers(_ref) {
     className: "ui-meganav-media-heading"
   }, "Streaming data sources"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
     className: "ui-meganav-media-copy"
-  }, "Augment your apps with realtime updates like weather or transit."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
+  }, "Augment your apps with realtime updates like weather or transit."))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
+    href: absUrl("/periodic-table-of-realtime"),
+    className: "ui-meganav-media group"
+  }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-heading"
+  }, "The Periodic Table of Realtime"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", {
+    className: "ui-meganav-media-copy"
+  }, "A compendium for all things realtime and event-driven."))))), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("h3", {
     className: "ui-meganav-overline uppercase",
     id: "meganav-developers-panel-quick-links"
   }, "Quick links"), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("ul", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "6.0.1",
+  "version": "6.2.1",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",

package/src/core/CompanyAutocomplete/component.css

@@ -0,0 +1,45 @@
+@layer components {
+  .ui-company-autocomplete-container {
+    @apply shadow-container absolute bg-white w-full z-10 font-sans;
+  }
+
+  .ui-company-autocomplete-list {
+    @apply border border-mid-grey border-t-0;
+  }
+
+  .ui-company-autocomplete-listitem {
+    @apply border-b border-mid-grey h-48;
+  }
+
+  .ui-company-autocomplete-btn {
+    @apply h-full w-full flex items-center py-4 px-12;
+  }
+
+  .ui-company-autocomplete-btn:focus {
+    @apply focus:text-gui-focus;
+  }
+
+  .ui-company-autocomplete-listitem:last-child {
+    @apply border-b-0;
+  }
+
+  .ui-company-autocomplete-listitem:hover {
+    @apply bg-light-grey cursor-pointer;
+  }
+
+  .ui-company-autocomplete-listitem:hover .ui-company-autocomplete-name {
+    @apply text-gui-hover;
+  }
+
+  .ui-company-autocomplete-logo {
+    @apply w-32;
+  }
+
+  .ui-company-autocomplete-name {
+    @apply font-sans font-light text-cool-black ml-8 text-p3 text-left;
+  }
+
+  .ui-company-autocomplete-domain {
+    @apply font-sans font-light text-dark-grey ml-auto text-p3;
+  }
+}

package/src/core/CompanyAutocomplete/component.js

@@ -0,0 +1,204 @@
+import "./component.css";
+
+import throttle from "lodash.throttle";
+
+const COMPANY_AUTOCOMPLETE_DROPDOWN = "[data-id=company-autocomplete-dropdown]";
+
+const getContainer = (input) =>
+  input.parentNode.querySelector(COMPANY_AUTOCOMPLETE_DROPDOWN);
+const getItems = (container) =>
+  container ? container.querySelectorAll("li > button") : [];
+const getFocusedItemIndex = (items) =>
+  Array.from(items).indexOf(document.activeElement);
+
+const clearList = (input) => {
+  const container = getContainer(input);
+
+  if (container) {
+    container.classList.add("hidden");
+    container.querySelector("ol").innerHTML = "";
+  }
+};
+
+const renderItems = (data) =>
+  data.map((element) => {
+    const listItem = document.createElement("li");
+    listItem.classList.add("ui-company-autocomplete-listitem");
+
+    const btn = document.createElement("button");
+    btn.classList.add("ui-company-autocomplete-btn");
+    btn.dataset.name = element.name;
+
+    const logo = document.createElement("img");
+    logo.alt = `${element.name} logo`;
+    logo.src = element.logo;
+    logo.classList.add("ui-company-autocomplete-logo");
+
+    const name = document.createElement("p");
+    name.textContent = element.name;
+    name.classList.add("ui-company-autocomplete-name");
+
+    const domain = document.createElement("p");
+    domain.textContent = element.domain;
+    domain.classList.add("ui-company-autocomplete-domain");
+
+    btn.append(logo);
+    btn.append(name);
+    btn.append(domain);
+    listItem.append(btn);
+
+    return listItem;
+  });
+
+const renderContainer = (input) => {
+  let container = getContainer(input);
+
+  if (!container) {
+    input.parentNode.style.position = "relative";
+
+    container = document.createElement("div");
+    container.dataset.id = "company-autocomplete-dropdown";
+    container.classList.add("ui-company-autocomplete-container");
+
+    const list = document.createElement("ol");
+    list.classList.add("ui-company-autocomplete-list");
+
+    return { container, list };
+  }
+
+  return { container, list: container.querySelector("ol") };
+};
+
+const renderDropdown = (input, data) => {
+  const parent = input.parentNode;
+  const { container, list } = renderContainer(input);
+  const items = renderItems(data);
+
+  clearList(input);
+
+  items.forEach((item, index) => {
+    list.append(item);
+    item.addEventListener("click", (event) => {
+      input.value = data[index].name;
+      event.preventDefault();
+    });
+  });
+
+  container.append(list);
+  container.classList.remove("hidden");
+  parent.append(container);
+};
+
+const fetchData = async (url, query) => {
+  try {
+    if (!query) {
+      return [];
+    }
+
+    const res = await fetch(`${url}?query=${query}`);
+    const payload = await res.json();
+
+    return payload;
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+    return [];
+  }
+};
+
+const handleDownArrow = (input, event) => {
+  const container = getContainer(input);
+  const items = getItems(container);
+  const focusedItemIndex = getFocusedItemIndex(items);
+
+  if (items.length === 0) {
+    return;
+  } else if (document.activeElement === input) {
+    items[0].focus();
+  } else if (focusedItemIndex >= 0 && focusedItemIndex < items.length - 1) {
+    items[focusedItemIndex + 1].focus();
+  }
+
+  event.preventDefault();
+};
+
+const handleUpArrow = (input, event) => {
+  const container = getContainer(input);
+  const items = getItems(container);
+  const focusedItemIndex = getFocusedItemIndex(items);
+
+  if (items.length === 0) {
+    return;
+  } else if (focusedItemIndex === 0) {
+    input.focus();
+  } else if (focusedItemIndex > 0) {
+    items[focusedItemIndex - 1].focus();
+  }
+
+  event.preventDefault();
+};
+
+const handleTab = (input, event) => {
+  const container = getContainer(input);
+  const items = getItems(container);
+  const focusedItemIndex = getFocusedItemIndex(items);
+
+  if (document.activeElement === input && event.shiftKey) {
+    clearList(input);
+  } else if (focusedItemIndex === items.length - 1) {
+    clearList(input);
+  }
+};
+
+const handleEnter = (input, event) => {
+  if (event.target.dataset.name) {
+    input.value = event.target.dataset.name;
+    clearList(input);
+    input.focus();
+    event.preventDefault();
+  }
+};
+
+const CompanyAutocomplete = (input, url) => {
+  if (!input || !url) return;
+
+  input.setAttribute("autocomplete", "off");
+
+  input.addEventListener(
+    "keyup",
+    throttle(
+      async (event) => {
+        if (["Enter", "Space", "Tab", "Escape"].includes(event.code)) return;
+
+        const query = event.target.value;
+        const data = await fetchData(url, query);
+
+        if (data && data.length > 0) {
+          renderDropdown(input, data);
+        }
+      },
+      100,
+      { trailing: true }
+    )
+  );
+
+  input.parentNode.addEventListener("keydown", (event) => {
+    if (event.code === "ArrowDown") {
+      handleDownArrow(input, event);
+    } else if (event.code === "ArrowUp") {
+      handleUpArrow(input, event);
+    } else if (event.code === "Enter" || event.code === "Space") {
+      handleEnter(input, event);
+    } else if (event.code === "Tab") {
+      handleTab(input, event);
+    } else if (event.code === "Escape") {
+      clearList(input);
+    }
+  });
+
+  document.body.addEventListener("click", () => {
+    clearList(input);
+  });
+};
+
+export default CompanyAutocomplete;

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

@@ -35,6 +35,12 @@
           <p class="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
          <% end %>
       </li>
+      <li>
+        <%= link_to abs_url("/periodic-table-of-realtime"), class: "ui-meganav-media group" do %>
+          <p class="ui-meganav-media-heading">The Periodic Table of Realtime</p>
+          <p class="ui-meganav-media-copy">A compendium for all things realtime and event-driven.</p>
+         <% end %>
+      </li>
     </ul>
   </div>
 

package/src/core/MeganavContentDevelopers/component.jsx

@@ -44,6 +44,12 @@ const MeganavContentDevelopers = ({ absUrl }) => (
             <p className="ui-meganav-media-copy">Augment your apps with realtime updates like weather or transit.</p>
           </a>
         </li>
+        <li>
+          <a href={absUrl("/periodic-table-of-realtime")} className="ui-meganav-media group">
+            <p className="ui-meganav-media-heading">The Periodic Table of Realtime</p>
+            <p className="ui-meganav-media-copy">A compendium for all things realtime and event-driven.</p>
+          </a>
+        </li>
       </ul>
     </div>