stimeo-ui 0.17.0 → 0.18.1

package/dist/controllers/menubar_controller.js

@@ -22,6 +22,13 @@ function actionSource(source) {
   };
 }
 
+function isAriaDisabled(element) {
+  for (let current = element; current; current = current.parentElement) {
+    if (current.getAttribute("aria-disabled") === "true") return true;
+  }
+  return false;
+}
+
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
@@ -30,6 +37,21 @@ function isReservedArrowChord(event, allow = []) {
   if (!event.key.startsWith("Arrow")) return false;
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+var ClickVerdicts = class {
+  #verdicts = /* @__PURE__ */ new WeakMap();
+  record(event, entries, refused) {
+    this.#verdicts.set(event, { entries, refused });
+  }
+  for(event, entry) {
+    const verdict = event && this.#verdicts.get(event);
+    if (!verdict?.entries.includes(entry)) return void 0;
+    return verdict.refused;
+  }
+};
 
 function sharedRegistry(key, create) {
   const symbol = Symbol.for(key);
@@ -117,6 +139,10 @@ function ownerIndex(candidates, node) {
 function ownerOf(candidates, node) {
   return candidates[ownerIndex(candidates, node)] ?? null;
 }
+function ownersOf(candidates, node) {
+  if (!(node instanceof Node)) return [];
+  return candidates.filter((candidate) => candidate.contains(node));
+}
 
 var ListenerSet = class {
   #abort = new AbortController();
@@ -145,6 +171,9 @@ var MicrotaskCoalescer = class {
     this.#queued = false;
     this.#generation += 1;
   }
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -175,6 +204,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -298,6 +330,7 @@ var MenubarController = class extends Controller {
   #connected = false;
   #reporting = false;
   #focused = null;
+  #clickVerdicts = new ClickVerdicts();
   #onFocusIn = (event) => {
     this.#focused = event.target;
   };
@@ -306,14 +339,15 @@ var MenubarController = class extends Controller {
     if (next && !this.element.contains(next)) this.#focused = null;
   };
   #morph = new MorphRenderWatcher(() => this.#reconcile());
+  #listeners = new ListenerSet();
   connect() {
     this.#morph.observe(this.element);
     this.#closeAllMenus("api");
     this.#reconcile();
-    this.element.addEventListener("click", this.#onDisabledClickCapture, true);
-    this.element.addEventListener("focusin", this.#onFocusIn);
-    this.element.addEventListener("focusout", this.#onFocusOut);
-    document.addEventListener("click", this.#onOutsideClick, true);
+    this.#listeners.add(this.element, "click", this.#onClickCapture, { capture: true });
+    this.#listeners.add(this.element, "focusin", this.#onFocusIn);
+    this.#listeners.add(this.element, "focusout", this.#onFocusOut);
+    this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
     if (typeof MutationObserver !== "undefined") {
       this.#observer = new MutationObserver(() => this.#morph.schedule());
       this.#observer.observe(this.element, {
@@ -332,10 +366,7 @@ var MenubarController = class extends Controller {
     this.#reporting = false;
     this.#escapeLayer.deactivate();
     this.#layerActive = false;
-    this.element.removeEventListener("click", this.#onDisabledClickCapture, true);
-    this.element.removeEventListener("focusin", this.#onFocusIn);
-    this.element.removeEventListener("focusout", this.#onFocusOut);
-    document.removeEventListener("click", this.#onOutsideClick, true);
+    this.#listeners.dispose();
     this.#focused = null;
     this.#observer?.disconnect();
     this.#observer = null;
@@ -368,16 +399,18 @@ var MenubarController = class extends Controller {
     if (!top || !this.topTargets.includes(top)) return;
     if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
       return;
+    if (this.#refuses(top, event, origin)) return;
     const moveFocus = event !== null || this.element.contains(document.activeElement);
     if (this.#isExpanded(top)) {
       this.#closeMenu(top, reason);
     } else {
-      this.#openMenu(top, "first", reason, moveFocus);
+      this.#openMenu(top, "first", reason, moveFocus, true);
     }
   }
   onTopKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
     const tops = this.#navigableTops;
     const index = tops.indexOf(event.currentTarget);
     if (index === -1) return;
@@ -417,6 +450,7 @@ var MenubarController = class extends Controller {
   onItemKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
     const item = event.currentTarget;
     const menu = item.closest("[role='menu']");
     if (!menu) return;
@@ -465,6 +499,7 @@ var MenubarController = class extends Controller {
     if (!item || !this.itemTargets.includes(item)) return;
     if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
       return;
+    if (this.#refuses(item, event, origin)) return;
     const moveFocus = event !== null || this.element.contains(document.activeElement);
     const menu = item.closest("[role='menu']");
     const top = this.#topFor(menu);
@@ -482,10 +517,10 @@ var MenubarController = class extends Controller {
       this.#roving.setActive(this.topTargets.indexOf(destination), { focus: true });
     }
   }
-  #openMenu(opener, focus, reason, moveFocus = true) {
+  #openMenu(opener, focus, reason, moveFocus = true, judged = false) {
     if (!opener) return;
     const menu = this.#menuFor(opener);
-    if (!menu || this.#isActivationBlocked(opener)) {
+    if (!menu || !judged && isAriaDisabled(opener)) {
       if (menu || !opener.hasAttribute("aria-controls")) {
         this.#closeAllMenus(reason);
         this.#focusTop(
@@ -562,13 +597,14 @@ var MenubarController = class extends Controller {
       this.#closeAllMenus("outside");
     }
   };
-  #onDisabledClickCapture = (event) => {
-    const target = event.target;
-    if (!(target instanceof Node)) return;
-    const blocked = [...this.topTargets, ...this.itemTargets].some(
-      (element) => this.#isActivationBlocked(element) && element.contains(target)
+  #onClickCapture = (event) => {
+    const entries = ownersOf(this.#entries, event.target);
+    this.#clickVerdicts.record(
+      event,
+      entries,
+      entries.some((entry) => this.#isActivationDisabled(entry))
     );
-    if (!blocked) return;
+    if (!entries.some((entry) => isAriaDisabled(entry))) return;
     event.preventDefault();
     event.stopImmediatePropagation();
   };
@@ -637,6 +673,9 @@ var MenubarController = class extends Controller {
   #itemsIn(menu) {
     return this.itemTargets.filter((item) => menu.contains(item) && this.#isNavigable(item));
   }
+  get #entries() {
+    return [...this.topTargets, ...this.itemTargets];
+  }
   get #navigableTops() {
     return this.topTargets.filter((top) => this.#isNavigable(top));
   }
@@ -644,8 +683,15 @@ var MenubarController = class extends Controller {
     if (element.hasAttribute("hidden")) return false;
     return !element.disabled;
   }
-  #isActivationBlocked(element) {
-    return element.getAttribute("aria-disabled") === "true";
+  #isActivationDisabled(element) {
+    return !this.#isNavigable(element) || isAriaDisabled(element);
+  }
+  #refuses(entry, event, origin) {
+    const recorded = this.#clickVerdicts.for(event, entry);
+    if (recorded !== void 0) return recorded;
+    if (this.#isActivationDisabled(entry)) return true;
+    const target = event ? event.target : origin;
+    return ownersOf(this.#entries, target).some((owner) => this.#isActivationDisabled(owner));
   }
   #focusAt(items, index) {
     items[index]?.focus();