stimeo-ui 0.17.0 → 0.18.1

package/dist/controllers/navigation_menu_controller.d.ts

@@ -5,7 +5,7 @@ import { Controller } from '@hotwired/stimulus';
  *
  * Markup contract (identifier: `stimeo--navigation-menu`):
  *   <nav data-controller="stimeo--navigation-menu" aria-label="Main">
- *     <ul>
+ *     <ul data-stimeo--navigation-menu-target="list">
  *       <li>
  *         <button data-stimeo--navigation-menu-target="trigger"
  *                 aria-expanded="false" aria-controls="nav-products"
@@ -32,8 +32,9 @@ import { Controller } from '@hotwired/stimulus';
  * destination, closes it. `ArrowLeft`/`ArrowRight` move focus between the
  * *navigable* triggers without rewriting `tabindex` (they keep their natural Tab
  * order); a modified press (`Alt`/`Ctrl`/`Meta`/`Shift`, e.g. the browser's
- * `Alt+←` history back) is left to the browser. Hover open/close is opt-in via
- * `openOnHover`.
+ * `Alt+←` history back) is left to the browser. `ArrowLeft`/`ArrowRight` follow
+ * the writing direction of the optional `list` target, or of the root while there
+ * is none. Hover open/close is opt-in via `openOnHover`.
  *
  * Every `panel` must be a **descendant of the nav element**: Stimulus resolves
  * targets within the controller's own scope, so a panel moved outside it (a
@@ -42,8 +43,9 @@ import { Controller } from '@hotwired/stimulus';
  * By default the hover region is each trigger and its panel. An optional
  * `hoverArea` target widens it: mark a wrapper that contains **exactly one**
  * trigger (e.g. the `<li>` holding a top-level *link*, its disclosure button, and
- * its panel — the APG "Disclosure Navigation with Top-Level Links" arrangement)
- * and hovering anywhere over that wrapper opens the contained trigger's panel.
+ * its panel — the arrangement of the APG example
+ * "Disclosure (Show/Hide) Navigation Menu with Top-Level Links") and hovering
+ * anywhere over that wrapper opens the contained trigger's panel.
  * Wrapping several triggers at once (marking the whole `<ul>`, say) is not
  * supported: every hover over the area then resolves to the *first* contained
  * trigger. A trigger or panel inside a `hoverArea` defers to the wrapper (its own
@@ -109,6 +111,8 @@ declare class NavigationMenuController extends Controller<HTMLElement> {
     readonly triggerTargets: HTMLElement[];
     readonly panelTargets: HTMLElement[];
     readonly hoverAreaTargets: HTMLElement[];
+    readonly listTarget: HTMLElement;
+    readonly hasListTarget: boolean;
     openOnHoverValue: boolean;
     hoverDelayValue: number;
     /** Establishes the closed baseline and the dismissal listeners. */
@@ -146,6 +150,16 @@ declare class NavigationMenuController extends Controller<HTMLElement> {
      * would be unopenable until the pointer left and came back. Keyboard
      * activation (pointer elsewhere) still toggles it closed, and `Escape` and
      * outside clicks dismiss either way.
+     *
+     * A trigger that is `hidden`, natively `disabled` or `aria-disabled` (itself or
+     * through an ancestor) never opens, whether this receives a DOM event of any
+     * type or an explicit element: the refusal leaves an open panel open and reports
+     * nothing, and only the pending hover timer is dropped, as for every explicit
+     * activation. Nor does a trigger whose target lies inside a nested trigger that
+     * refuses. A click keeps the verdict taken as it started, before the handlers
+     * inside the nav element ran, when the trigger held its target then; a trigger that
+     * verdict was not taken for, and anything else, is judged now. A panel already open
+     * behind such a trigger still closes.
      */
     toggle(source: Event | HTMLElement): void;
     /**

package/dist/controllers/navigation_menu_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";
 }
@@ -31,6 +38,18 @@ function isReservedArrowChord(event, allow = []) {
   return event.altKey && !allow.includes("alt") || event.ctrlKey && !allow.includes("ctrl") || event.metaKey && !allow.includes("meta") || event.shiftKey && !allow.includes("shift");
 }
 
+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);
   const scope = globalThis;
@@ -114,6 +133,21 @@ function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
 }
+function ownersOf(candidates, node) {
+  if (!(node instanceof Node)) return [];
+  return candidates.filter((candidate) => candidate.contains(node));
+}
+
+var ListenerSet = class {
+  #abort = new AbortController();
+  add(target, type, handler, options) {
+    target.addEventListener(type, handler, { ...options, signal: this.#abort.signal });
+  }
+  dispose() {
+    this.#abort.abort();
+    this.#abort = new AbortController();
+  }
+};
 
 var MAX_TIMER_DELAY_MS = 2147483647;
 
@@ -201,7 +235,7 @@ function targetSelector(identifier, name) {
 
 var NavigationMenuController = class _NavigationMenuController extends Controller {
   #numbers = new NumberValueReader();
-  static targets = ["trigger", "panel", "hoverArea"];
+  static targets = ["trigger", "panel", "hoverArea", "list"];
   static values = {
     openOnHover: { type: Boolean, default: false },
     hoverDelay: { type: Number, default: 150 }
@@ -212,16 +246,19 @@ var NavigationMenuController = class _NavigationMenuController extends Controlle
   static actions = ["onTriggerKeydown", "toggle"];
   static events = ["close", "open"];
   #hoverTimers = new SafeTimeout();
-  #hoverWired = /* @__PURE__ */ new Set();
+  #hoverListeners = new ListenerSet();
   #hoveredTrigger = null;
   #connected = false;
   #reporting = false;
   #escapeLayer = new EscapeLayer();
+  #listeners = new ListenerSet();
+  #clickVerdicts = new ClickVerdicts();
   connect() {
     this.#connected = true;
     this.#closeAll("api");
-    document.addEventListener("click", this.#onOutsideClick, true);
-    this.element.addEventListener("focusout", this.#onFocusOut);
+    this.#listeners.add(this.element, "click", this.#onClickCapture, { capture: true });
+    this.#listeners.add(document, "click", this.#onOutsideClick, { capture: true });
+    this.#listeners.add(this.element, "focusout", this.#onFocusOut);
     if (this.openOnHoverValue) this.#addHoverListeners();
     this.#reporting = true;
   }
@@ -229,8 +266,7 @@ var NavigationMenuController = class _NavigationMenuController extends Controlle
     this.#connected = false;
     this.#reporting = false;
     this.#escapeLayer.deactivate();
-    document.removeEventListener("click", this.#onOutsideClick, true);
-    this.element.removeEventListener("focusout", this.#onFocusOut);
+    this.#listeners.dispose();
     this.#removeHoverListeners();
     this.#hoverTimers.clearAll();
   }
@@ -258,14 +294,14 @@ var NavigationMenuController = class _NavigationMenuController extends Controlle
     this.#rewireHoverListeners();
   }
   toggle(source) {
-    const { host, origin, reason } = actionSource(source);
+    const { event, host, origin, reason } = actionSource(source);
     const trigger = host?.closest(targetSelector(this.identifier, "trigger"));
     if (!trigger || !this.triggerTargets.includes(trigger)) return;
     if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
       return;
     this.#hoverTimers.clearAll();
     if (!this.#isExpanded(trigger)) {
-      this.#openPanel(trigger, reason);
+      if (!this.#refuses(trigger, event, origin)) this.#openPanel(trigger, reason);
       return;
     }
     if (this.openOnHoverValue && this.#hoveredTrigger === trigger) return;
@@ -282,12 +318,11 @@ var NavigationMenuController = class _NavigationMenuController extends Controlle
     const index = triggers.indexOf(current);
     if (index === -1 || triggers.length < 2) return;
     event.preventDefault();
-    const forward = isRtl(this.element) ? "ArrowLeft" : "ArrowRight";
+    const forward = isRtl(this.hasListTarget ? this.listTarget : this.element) ? "ArrowLeft" : "ArrowRight";
     const step = event.key === forward ? 1 : -1;
     triggers[(index + step + triggers.length) % triggers.length]?.focus();
   }
   #openPanel(trigger, reason) {
-    if (trigger.getAttribute("aria-disabled") === "true") return;
     if (this.#isExpanded(trigger)) {
       this.#syncEscapeLayer();
       return;
@@ -322,6 +357,16 @@ var NavigationMenuController = class _NavigationMenuController extends Controlle
     if (trigger.hasAttribute("hidden")) return false;
     return !trigger.disabled;
   }
+  #isActivationDisabled(trigger) {
+    return !this.#isNavigable(trigger) || isAriaDisabled(trigger);
+  }
+  #refuses(trigger, event, origin) {
+    const recorded = this.#clickVerdicts.for(event, trigger);
+    if (recorded !== void 0) return recorded;
+    if (this.#isActivationDisabled(trigger)) return true;
+    const target = event ? event.target : origin;
+    return ownersOf(this.triggerTargets, target).some((owner) => this.#isActivationDisabled(owner));
+  }
   #syncEscapeLayer() {
     if (this.#isAnyOpen) {
       this.#escapeLayer.activate(document, {
@@ -339,6 +384,14 @@ var NavigationMenuController = class _NavigationMenuController extends Controlle
     this.#closePanel(open, "escape");
     open.focus();
   }
+  #onClickCapture = (event) => {
+    const triggers = ownersOf(this.triggerTargets, event.target);
+    this.#clickVerdicts.record(
+      event,
+      triggers,
+      triggers.some((trigger) => this.#isActivationDisabled(trigger))
+    );
+  };
   #onOutsideClick = (event) => {
     if (this.#isAnyOpen && !this.element.contains(event.target)) this.#closeAll("outside");
   };
@@ -362,7 +415,7 @@ var NavigationMenuController = class _NavigationMenuController extends Controlle
     this.#hoverTimers.set(() => this.#closeFromHover(), this.#safeHoverDelay);
   };
   #openFromHover(trigger) {
-    if (trigger.getAttribute("aria-disabled") === "true") return;
+    if (this.#refuses(trigger, null, trigger)) return;
     const open = this.#openTrigger;
     if (open && open !== trigger && this.#holdsFocus(this.#panelFor(open))) open.focus();
     this.#openPanel(trigger, "pointer");
@@ -377,17 +430,12 @@ var NavigationMenuController = class _NavigationMenuController extends Controlle
   }
   #addHoverListeners() {
     for (const element of this.#hoverElements) {
-      element.addEventListener("mouseenter", this.#onPointerEnter);
-      element.addEventListener("mouseleave", this.#onPointerLeave);
-      this.#hoverWired.add(element);
+      this.#hoverListeners.add(element, "mouseenter", this.#onPointerEnter);
+      this.#hoverListeners.add(element, "mouseleave", this.#onPointerLeave);
     }
   }
   #removeHoverListeners() {
-    for (const element of this.#hoverWired) {
-      element.removeEventListener("mouseenter", this.#onPointerEnter);
-      element.removeEventListener("mouseleave", this.#onPointerLeave);
-    }
-    this.#hoverWired.clear();
+    this.#hoverListeners.dispose();
     this.#hoveredTrigger = null;
   }
   #rewireHoverListeners() {