stimeo-ui 0.2.0 → 0.3.0

data/dist/controllers/menu_controller.js

@@ -2,6 +2,12 @@ import { Controller } from '@hotwired/stimulus';
 
 // src/controllers/menu_controller.ts
 
+// src/utils/arrow_step.ts
+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");
+}
+
 // src/utils/escape_layer.ts
 function claimsWhileFocusWithin(element) {
   return () => {
@@ -159,18 +165,30 @@ var MenuController = class extends Controller {
   #timers = new SafeTimeout();
   /** Escape-stack membership while open; the shared resolver dismisses via it. */
   #escapeLayer = new EscapeLayer();
-  /** Starts closed and registers delegated listeners. */
+  /**
+   * The item a click started on, recorded in the capture pass. Read once by the
+   * delegated bubble listener, which must not re-derive it: consumer handlers run
+   * in between and may detach the item.
+   */
+  #clickOwner = null;
+  /** Clicks already turned into an activation, so the two paths run it once. */
+  #activated = /* @__PURE__ */ new WeakSet();
+  /** Starts closed and registers activation / outside-click listeners. */
   connect() {
     this.close();
     this.element.addEventListener("click", this.#onItemClickCapture, true);
-    document.addEventListener("click", this.#onOutsideClick);
+    this.element.addEventListener("click", this.#onDelegatedItemClick);
+    this.element.addEventListener("keydown", this.#onDelegatedItemKeydown);
+    document.addEventListener("click", this.#onOutsideClick, true);
   }
   /** Releases the listeners, stack membership, and any pending Tab-close task. */
   disconnect() {
     this.#timers.clearAll();
     this.#escapeLayer.deactivate();
     this.element.removeEventListener("click", this.#onItemClickCapture, true);
-    document.removeEventListener("click", this.#onOutsideClick);
+    this.element.removeEventListener("click", this.#onDelegatedItemClick);
+    this.element.removeEventListener("keydown", this.#onDelegatedItemKeydown);
+    document.removeEventListener("click", this.#onOutsideClick, true);
   }
   /** Toggles the menu open/closed. Bound via `data-action` (click). */
   toggle() {
@@ -209,6 +227,8 @@ var MenuController = class extends Controller {
    * open and then immediately re-toggle the menu.
    */
   onTriggerKeydown(event) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     if (event.key === "ArrowDown") {
       event.preventDefault();
       this.open();
@@ -221,8 +241,18 @@ var MenuController = class extends Controller {
   }
   /** Implements roving focus and closing keys inside the menu. */
   onItemKeydown(event) {
+    this.#handleItemKeydown(event, event.currentTarget);
+  }
+  /**
+   * The roving-focus body, shared by the per-element action and its delegated
+   * twin. `from` is the item the key belongs to: the bound element for the
+   * action, the resolved owner of the event target for the delegate.
+   */
+  #handleItemKeydown(event, from) {
+    if (event.defaultPrevented) return;
+    if (isReservedArrowChord(event)) return;
     const items = this.#navigableItems;
-    const currentIndex = items.indexOf(event.currentTarget);
+    const currentIndex = items.indexOf(from);
     switch (event.key) {
       case "ArrowDown":
         event.preventDefault();
@@ -246,8 +276,23 @@ var MenuController = class extends Controller {
         break;
     }
   }
-  /** Closes the menu after an item is activated. Bound via `data-action`. */
-  activate() {
+  /**
+   * Closes the menu after an item is activated. Bound via `data-action`, and
+   * also reached from the delegated listener.
+   *
+   * Markup that carries the per-element action *and* gets the delegate would run
+   * this twice for one gesture. `close()` writes the state hooks (`hidden`,
+   * `aria-expanded`), and an identical reassign still queues a MutationRecord,
+   * so a second pass is observable to anyone watching them. The event is
+   * therefore claimed: the path that gets there first does the work, the other
+   * one finds it claimed and returns. A programmatic call with no event always
+   * runs.
+   */
+  activate(event) {
+    if (event !== void 0) {
+      if (this.#activated.has(event)) return;
+      this.#activated.add(event);
+    }
     this.#closeAndRestore();
   }
   /** Closes and returns focus to the trigger (Escape / item-activation path). */
@@ -260,16 +305,59 @@ var MenuController = class extends Controller {
     if (this.#isOpen && !this.element.contains(event.target)) this.close();
   };
   /**
-   * Captures clicks so `aria-disabled` commands cannot reach consumer handlers.
-   * Native Enter/Space activation also synthesizes a click and is blocked here.
+   * Delegated twin of {@link onItemKeydown}, bound on the controller element.
+   *
+   * An item that arrives *after* connect — Overflow Menu moves toolbar controls
+   * into this menu at runtime — carries whatever `data-action` its author wrote,
+   * and that is exactly the binding a consumer forgets, because the markup that
+   * declares the item lives nowhere near the menu. Listening on the container
+   * makes membership in the `item` target enough to be operable. The per-element
+   * action stays supported and is not double-handled: see
+   * {@link #handleItemKeydown}.
+   */
+  #onDelegatedItemKeydown = (event) => {
+    const item = this.#itemFrom(event.target);
+    if (item === null) return;
+    this.#handleItemKeydown(event, item);
+  };
+  /**
+   * Delegated twin of {@link activate}, for the same reason as the keydown one.
+   *
+   * It works from the item the capture pass recorded, not from a fresh lookup:
+   * by the time a click bubbles up here, a consumer handler may already have
+   * detached the row it lives in, and `itemTargets` is a live query that would
+   * then resolve nothing — the activation would be lost and the menu left open
+   * over an item that no longer exists. `aria-disabled` items never reach this
+   * listener at all: the capture pass stops the click outright.
+   */
+  #onDelegatedItemClick = (event) => {
+    const item = this.#clickOwner;
+    this.#clickOwner = null;
+    if (item === null) return;
+    this.activate(event);
+  };
+  /** The item target that is, or contains, `node`; `null` when it is neither. */
+  #itemFrom(node) {
+    if (!(node instanceof Node)) return null;
+    return this.itemTargets.find((item) => item === node || item.contains(node)) ?? null;
+  }
+  /**
+   * First look at every click inside the controller, and the only point at which
+   * the DOM is still the one the user clicked. Two jobs: record which item owns
+   * the click for the delegate above, and stop an `aria-disabled` command before
+   * it reaches consumer handlers (native Enter/Space activation synthesizes a
+   * click and is blocked here too).
    */
   #onItemClickCapture = (event) => {
     const target = event.target;
-    if (!(target instanceof Node)) return;
-    const disabled = this.itemTargets.some(
-      (item) => item.getAttribute("aria-disabled") === "true" && item.contains(target)
-    );
-    if (!disabled) return;
+    if (!(target instanceof Node)) {
+      this.#clickOwner = null;
+      return;
+    }
+    const item = this.#itemFrom(target);
+    this.#clickOwner = item;
+    if (item === null || item.getAttribute("aria-disabled") !== "true") return;
+    this.#clickOwner = null;
     event.preventDefault();
     event.stopImmediatePropagation();
   };
@@ -287,13 +375,12 @@ var MenuController = class extends Controller {
     return this.itemTargets.filter((item) => this.#isNavigable(item));
   }
   /**
-   * An item can take roving focus unless it is `hidden`, `aria-disabled="true"`,
-   * or a natively `disabled` form control. CSS-only visibility is not detectable
-   * here and is the consumer's responsibility.
+   * An item can take roving focus unless it is `hidden` or a natively `disabled`
+   * form control. `aria-disabled` remains focusable for discoverability; capture
+   * suppresses activation. CSS-only visibility is the consumer's responsibility.
    */
   #isNavigable(item) {
     if (item.hasAttribute("hidden")) return false;
-    if (item.getAttribute("aria-disabled") === "true") return false;
     return !item.disabled;
   }
   /** Whether the menu is currently visible. */