stimeo-ui 0.16.0 → 0.18.0

data/dist/controllers/roving_controller.js

@@ -1,13 +1,9 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/roving_controller.ts
-
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
 
-// 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");
@@ -16,13 +12,11 @@ function hasModifierChord(event) {
   return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 }
 
-// src/utils/event_owner.ts
 function ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
   return candidates.findIndex((candidate) => candidate.contains(node));
 }
 
-// src/utils/focus_candidate.ts
 function inheritsFieldsetDisabled(control) {
   let fieldset = control.closest("fieldset[disabled]");
   while (fieldset) {
@@ -33,27 +27,36 @@ function inheritsFieldsetDisabled(control) {
   return false;
 }
 
-// src/utils/microtask_coalescer.ts
+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 MicrotaskCoalescer = class {
   #run;
   #queued = false;
   #active = false;
   #generation = 0;
-  /** @param run - the single reconciliation pass, invoked at most once per batch. */
   constructor(run) {
     this.#run = run;
   }
-  /** Opens the window in which {@link schedule} is honoured; call from `connect()`. */
   activate() {
     this.#active = true;
   }
-  /** Closes the window and drops any pending pass; call from `disconnect()`. */
   cancel() {
     this.#active = false;
     this.#queued = false;
     this.#generation += 1;
   }
-  /** Requests one pass after the batch settles. Idempotent; inert outside the window. */
+  get pending() {
+    return this.#queued;
+  }
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -66,31 +69,42 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/utils/roving_tabindex.ts
+var MorphRenderWatcher = class {
+  #listeners = new ListenerSet();
+  #pass;
+  #element = null;
+  #onMorph = () => this.#pass.schedule();
+  constructor(run) {
+    this.#pass = new MicrotaskCoalescer(run);
+  }
+  observe(element) {
+    if (this.#element === element) return;
+    this.disconnect();
+    this.#element = element;
+    this.#pass.activate();
+    this.#listeners.add(element, "turbo:morph-element", this.#onMorph);
+  }
+  schedule() {
+    this.#pass.schedule();
+  }
+  get pending() {
+    return this.#pass.pending;
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
 var RovingTabindex = class {
-  /** Returns the current ordered item elements; called on every operation. */
   #getItems;
-  /**
-   * @param getItems - Returns the current ordered item elements. Called on every
-   *   operation so the live target list is always used.
-   */
   constructor(getItems) {
     this.#getItems = getItems;
   }
-  /** Index of the currently tabbable item (`tabindex="0"`), or `-1` if none. */
   get activeIndex() {
     return this.#getItems().findIndex((item) => item.tabIndex === 0);
   }
-  /**
-   * Makes exactly the item at `index` tabbable (`tabindex="0"`) and removes every
-   * other item from the Tab sequence (`tabindex="-1"`). An out-of-range `index`
-   * (e.g. `-1`) leaves all items at `-1`, which a controller can use to express
-   * "nothing is currently tabbable".
-   *
-   * @param index - Position of the item to make tabbable.
-   * @param options - Pass `{ focus: true }` to also move DOM focus to that item,
-   *   and `items` to reuse an event-scoped collection snapshot.
-   */
   setActive(index, options = {}) {
     const { focus = false } = options;
     const items = options.items ?? this.#getItems();
@@ -107,7 +121,6 @@ function rovingMove(current, length, delta, wrap) {
   return Math.min(length - 1, Math.max(0, next));
 }
 
-// src/controllers/roving_controller.ts
 var STATE_ATTRIBUTES = ["disabled", "hidden"];
 var RovingController = class extends Controller {
   static targets = ["item"];
@@ -118,36 +131,33 @@ var RovingController = class extends Controller {
   };
   static events = ["change"];
   #roving = new RovingTabindex(() => this.itemTargets);
-  #reconcile = new MicrotaskCoalescer(() => this.#ensureTabStop(true));
+  #reconcile = new MorphRenderWatcher(() => this.#ensureTabStop(true));
   #connected = false;
   #observer = null;
+  #listeners = new ListenerSet();
   connect() {
     this.#ensureTabStop(false);
-    this.element.addEventListener("keydown", this.#onKeydown);
-    this.element.addEventListener("focusin", this.#onFocusin);
+    this.#listeners.add(this.element, "keydown", this.#onKeydown);
+    this.#listeners.add(this.element, "focusin", this.#onFocusin);
     this.#watchState();
     this.#connected = true;
-    this.#reconcile.activate();
+    this.#reconcile.observe(this.element);
   }
   disconnect() {
     this.#connected = false;
-    this.#reconcile.cancel();
-    this.element.removeEventListener("keydown", this.#onKeydown);
-    this.element.removeEventListener("focusin", this.#onFocusin);
+    this.#reconcile.disconnect();
+    this.#listeners.dispose();
     this.#observer?.disconnect();
     this.#observer = null;
   }
-  /** Drops a runtime-added item from the Tab sequence before batch reconciliation. */
   itemTargetConnected(item) {
     if (!this.#connected) return;
     item.tabIndex = -1;
     this.#reconcile.schedule();
   }
-  /** Re-establishes the single Tab stop after an item leaves the target set. */
   itemTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /** Arrow keys move focus + the tab stop; Home/End jump to the ends. */
   #onKeydown = (event) => {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
@@ -176,21 +186,14 @@ var RovingController = class extends Controller {
     event.preventDefault();
     this.#activate(next, true);
   };
-  /**
-   * Syncs the single tab stop to an item that received focus by other means
-   * (click, programmatic `focus()`), so returning via Tab lands on it. The
-   * keyboard path's own `focus()` re-enters here but is a no-op (index unchanged).
-   */
   #onFocusin = (event) => {
     const index = this.#indexOf(event.target);
     if (index === -1 || !this.#reachable(index)) return;
     this.#activate(index, false);
   };
-  /** Resolves the item index owning an event target (the item or a descendant). */
   #indexOf(target) {
     return ownerIndex(this.itemTargets, target);
   }
-  /** Makes `index` the tab stop (optionally focusing it), emitting `change` once. */
   #activate(index, focus) {
     const previous = this.#roving.activeIndex;
     this.#roving.setActive(index, { focus });
@@ -198,16 +201,6 @@ var RovingController = class extends Controller {
       this.dispatch("change", { detail: { index, item: this.itemTargets[index] } });
     }
   }
-  /**
-   * Keeps the Tab stop on a reachable item.
-   *
-   * `followFocus` is on for re-establishment only: an item added and focused in
-   * the same task has already claimed the stop through `focusin`, and the batch
-   * that follows must not hand it back to the first item. `connect()` passes it
-   * off so the authored DOM decides the initial stop. With nothing reachable the
-   * DOM is left as it is — a group inside a collapsed region gets its stop back
-   * when the region opens, instead of losing it for good.
-   */
   #ensureTabStop(followFocus) {
     const items = this.itemTargets;
     const focused = followFocus ? items.findIndex((item, i) => item === document.activeElement && this.#reachable(i)) : -1;
@@ -217,15 +210,6 @@ var RovingController = class extends Controller {
     if (index === -1) return;
     this.#roving.setActive(index);
   }
-  /**
-   * Resolves the next reachable index in `delta`'s direction, honouring `wrap`.
-   *
-   * An arrow on the widget's own axis is the widget's to consume even when the
-   * position does not change, so a clamped end resolves to the current item
-   * rather than to nothing. An unreachable origin escapes to the first reachable
-   * item instead of sitting in a dead end, and `-1` is left for the one case that
-   * really is not ours: no reachable item anywhere.
-   */
   #step(current, delta, wrap) {
     const length = this.itemTargets.length;
     let index = current;
@@ -237,23 +221,15 @@ var RovingController = class extends Controller {
     }
     return this.#reachable(current) ? current : this.#firstReachable();
   }
-  /** Index of the first reachable item, or `-1`. */
   #firstReachable() {
     return this.itemTargets.findIndex((_item, i) => this.#reachable(i));
   }
-  /** Index of the last reachable item, or `-1`. */
   #lastReachable() {
     for (let i = this.itemTargets.length - 1; i >= 0; i -= 1) {
       if (this.#reachable(i)) return i;
     }
     return -1;
   }
-  /**
-   * Whether the item at `index` can hold the Tab stop and take focus.
-   *
-   * `aria-disabled` is deliberately not consulted: it keeps an item reachable and
-   * only suppresses activation, which this part does not own.
-   */
   #reachable(index) {
     const item = this.itemTargets[index];
     if (!item) return false;
@@ -262,14 +238,6 @@ var RovingController = class extends Controller {
     if (item.disabled) return false;
     return !inheritsFieldsetDisabled(item);
   }
-  /**
-   * Whether `item`, or anything between it and the container, is `hidden`.
-   *
-   * The walk stops at the container on purpose: a group inside a hidden region is
-   * already out of the page's Tab order, and calling every item unreachable there
-   * would drop the stop with nothing left to restore it — the ancestor lies
-   * outside the subtree whose state attributes are watched.
-   */
   #hidden(item) {
     let node = item;
     while (node && node !== this.element) {
@@ -278,12 +246,6 @@ var RovingController = class extends Controller {
     }
     return false;
   }
-  /**
-   * Watches the attributes that decide reachability, so disabling the item that
-   * holds the Tab stop hands it to another one instead of taking the whole set
-   * out of the Tab sequence. An enclosing `fieldset` disables items from outside
-   * the observed subtree, so each one's own `disabled` is watched too.
-   */
   #watchState() {
     if (typeof MutationObserver === "undefined") return;
     const observer = new MutationObserver(() => this.#reconcile.schedule());
@@ -300,5 +262,4 @@ var RovingController = class extends Controller {
 };
 
 export { RovingController };
-//# sourceMappingURL=roving_controller.js.map
 //# sourceMappingURL=roving_controller.js.map