inclusive-elements 0.5.4 → 0.5.5

package/dist/inclusive-elements10.js

@@ -1,9 +1,9 @@
 var l = Object.defineProperty;
-var p = (o, s, t) => s in o ? l(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
-var e = (o, s, t) => (p(o, typeof s != "symbol" ? s + "" : s, t), t);
-import { autoUpdate as u, computePosition as c, shift as v, flip as m } from "@floating-ui/dom";
-import { hello as b, goodbye as f } from "hello-goodbye";
-const n = class n extends HTMLElement {
+var u = (n, s, t) => s in n ? l(n, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[s] = t;
+var e = (n, s, t) => (u(n, typeof s != "symbol" ? s + "" : s, t), t);
+import { autoUpdate as p, computePosition as c, shift as v, flip as m } from "@floating-ui/dom";
+import { hello as f, goodbye as b } from "hello-goodbye";
+const o = class o extends HTMLElement {
   constructor() {
     super(...arguments);
     e(this, "parent");
@@ -13,20 +13,20 @@ const n = class n extends HTMLElement {
     e(this, "showing", !1);
     e(this, "cleanup");
     e(this, "prevInnerHTML");
-    e(this, "tabPressed", !1);
+    e(this, "focusKeyPressed", !1);
     e(this, "onMouseEnter", () => {
       window.matchMedia("(hover: hover) and (pointer: fine)").matches && this.afterDelay(this.show);
     });
     e(this, "onFocus", () => {
-      this.tabPressed && this.show();
+      this.focusKeyPressed && this.show();
     });
     e(this, "onMouseLeave", this.afterDelay.bind(this, this.hide));
     e(this, "onBlur", this.hide.bind(this));
     e(this, "onKeyDown", (t) => {
-      t.key === "Tab" && (this.tabPressed = !0), t.key === "Escape" && this.hide();
+      this.isFocusTriggerKey(t.key) && (this.focusKeyPressed = !0), t.key === "Escape" && this.hide();
     });
     e(this, "onKeyUp", (t) => {
-      t.key === "Tab" && (this.tabPressed = !1);
+      this.isFocusTriggerKey(t.key) && (this.focusKeyPressed = !1);
     });
   }
   connectedCallback() {
@@ -46,16 +46,19 @@ const n = class n extends HTMLElement {
   set disabled(t) {
     t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
   }
+  isFocusTriggerKey(t) {
+    return t === "Tab" || t === "ArrowUp" || t === "ArrowDown" || t === "ArrowLeft" || t === "ArrowRight";
+  }
   show() {
     var i;
     if (this.disabled)
       return;
     const t = this.createTooltip();
-    clearTimeout(this.timeout), this.showing || (t.hidden = !1, b(t), this.showing = !0), this.innerHTML !== this.prevInnerHTML && (this.prevInnerHTML = t.innerHTML = this.innerHTML), t.style.position = "absolute", (i = this.cleanup) == null || i.call(this), this.cleanup = u(
+    clearTimeout(this.timeout), this.showing || (t.hidden = !1, f(t), this.showing = !0), this.innerHTML !== this.prevInnerHTML && (this.prevInnerHTML = t.innerHTML = this.innerHTML), t.style.position = "absolute", (i = this.cleanup) == null || i.call(this), this.cleanup = p(
       this.parent,
       t,
       () => c(this.parent, t, {
-        placement: this.getAttribute("placement") || n.placement,
+        placement: this.getAttribute("placement") || o.placement,
         middleware: [v(), m()]
       }).then(({ x: h, y: a, placement: d }) => {
         Object.assign(t.style, {
@@ -67,7 +70,7 @@ const n = class n extends HTMLElement {
   }
   hide() {
     var t;
-    clearTimeout(this.timeout), (t = this.cleanup) == null || t.call(this), this.showing && (this.showing = !1, this.tooltip && f(this.tooltip).then(() => {
+    clearTimeout(this.timeout), (t = this.cleanup) == null || t.call(this), this.showing && (this.showing = !1, this.tooltip && b(this.tooltip).then(() => {
       this.tooltip && (this.tooltip.hidden = !0);
     }), this.dispatchEvent(new Event("close")));
   }
@@ -76,18 +79,18 @@ const n = class n extends HTMLElement {
     const i = parseInt(this.getAttribute("delay") || "");
     this.timeout = window.setTimeout(
       t.bind(this),
-      isNaN(i) ? n.delay : i
+      isNaN(i) ? o.delay : i
     );
   }
   createTooltip() {
     return this.tooltip || (this.tooltip = document.createElement("div"), this.tooltip.hidden = !0, this.tooltip.addEventListener("mouseenter", this.show.bind(this)), this.tooltip.addEventListener(
       "mouseleave",
       this.afterDelay.bind(this, this.hide)
-    ), document.body.appendChild(this.tooltip)), this.tooltip.className = this.getAttribute("tooltip-class") || n.tooltipClass, this.tooltip;
+    ), document.body.appendChild(this.tooltip)), this.tooltip.className = this.getAttribute("tooltip-class") || o.tooltipClass, this.tooltip;
   }
 };
-e(n, "delay", 100), e(n, "placement", "top"), e(n, "tooltipClass", "tooltip");
-let r = n;
+e(o, "delay", 100), e(o, "placement", "top"), e(o, "tooltipClass", "tooltip");
+let r = o;
 export {
   r as default
 };

package/dist/inclusive-elements5.js

@@ -1,6 +1,6 @@
-var c = Object.defineProperty;
-var u = (r, e, t) => e in r ? c(r, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : r[e] = t;
-var n = (r, e, t) => (u(r, typeof e != "symbol" ? e + "" : e, t), t);
+var h = Object.defineProperty;
+var u = (s, i, t) => i in s ? h(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
+var n = (s, i, t) => (u(s, typeof i != "symbol" ? i + "" : i, t), t);
 import { isFocusable as l } from "tabbable";
 const a = class a extends HTMLElement {
   constructor() {
@@ -9,19 +9,27 @@ const a = class a extends HTMLElement {
     n(this, "searchTimeout");
     n(this, "onKeyDown", (t) => {
       if (!this.hidden) {
-        if (t.key === "ArrowUp") {
+        if (this.horizontal && t.key === "ArrowLeft") {
           this.navigate(-1), t.preventDefault();
           return;
         }
-        if (t.key === "ArrowDown") {
+        if (this.horizontal && t.key === "ArrowRight") {
           this.navigate(1), t.preventDefault();
           return;
         }
+        if (t.key === "ArrowUp") {
+          this.horizontal ? this.focusItemAtIndex(0) : this.navigate(-1), t.preventDefault();
+          return;
+        }
+        if (t.key === "ArrowDown") {
+          this.horizontal ? this.focusItemAtIndex(this.items.length - 1) : this.navigate(1), t.preventDefault();
+          return;
+        }
         t.key.length > 1 || t.ctrlKey || t.metaKey || t.altKey || (this.search += t.key.toLowerCase(), t.preventDefault(), clearTimeout(this.searchTimeout), this.searchTimeout = window.setTimeout(() => {
           this.search = "";
-        }, a.searchDelay), this.items.some((s) => {
-          var i;
-          return ((i = s.textContent) == null ? void 0 : i.trim().toLowerCase().indexOf(this.search)) === 0 ? (s.focus(), !0) : !1;
+        }, a.searchDelay), this.items.some((e) => {
+          var r;
+          return ((r = e.textContent) == null ? void 0 : r.trim().toLowerCase().indexOf(this.search)) === 0 ? (e.focus(), !0) : !1;
         }));
       }
     });
@@ -39,15 +47,21 @@ const a = class a extends HTMLElement {
       this.querySelectorAll("[role^=menuitem]")
     ).filter((t) => l(t));
   }
+  get horizontal() {
+    return this.getAttribute("aria-orientation") === "horizontal";
+  }
   navigate(t) {
-    var o;
-    const s = this.items;
-    let i = (document.activeElement instanceof HTMLElement ? s.indexOf(document.activeElement) : -1) + t;
-    i < 0 && (i = s.length - 1), i >= s.length && (i = 0), (o = s[i]) == null || o.focus();
+    const e = this.items;
+    let r = (document.activeElement instanceof HTMLElement ? e.indexOf(document.activeElement) : -1) + t;
+    r < 0 && (r = e.length - 1), r >= e.length && (r = 0), this.focusItemAtIndex(r);
+  }
+  focusItemAtIndex(t) {
+    var e;
+    (e = this.items[t]) == null || e.focus();
   }
 };
 n(a, "searchDelay", 800);
-let h = a;
+let o = a;
 export {
-  h as default
+  o as default
 };

package/dist/types/menu/menu.d.ts

@@ -5,6 +5,8 @@ export default class MenuElement extends HTMLElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private get items();
+    private get horizontal();
     private onKeyDown;
     private navigate;
+    private focusItemAtIndex;
 }

package/dist/types/tooltip/tooltip.d.ts

@@ -9,7 +9,7 @@ export default class TooltipElement extends HTMLElement {
     private showing;
     private cleanup?;
     private prevInnerHTML?;
-    private tabPressed;
+    private focusKeyPressed;
     private onMouseEnter;
     private onFocus;
     private onMouseLeave;
@@ -20,6 +20,7 @@ export default class TooltipElement extends HTMLElement {
     set disabled(val: boolean);
     private onKeyDown;
     private onKeyUp;
+    private isFocusTriggerKey;
     show(): void;
     hide(): void;
     private afterDelay;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "inclusive-elements",
-    "version": "0.5.4",
+    "version": "0.5.5",
     "description": "Accessible, lightweight, unstyled implementations of common UI controls.",
     "module": "dist/inclusive-elements.js",
     "type": "module",