stimeo-ui 0.16.0 → 0.17.0

data/dist/controllers/data_grid_controller.js

@@ -1,13 +1,31 @@
 import { Controller } from '@hotwired/stimulus';
 
-// src/controllers/data_grid_controller.ts
+var FOCUS_EVENTS = /* @__PURE__ */ new Set(["blur", "focus", "focusin", "focusout"]);
+var POINTER_EVENTS = /* @__PURE__ */ new Set(["mouseenter", "mouseleave", "pointerenter", "pointerleave"]);
+function stateReasonFor(event) {
+  if (!event) return "api";
+  if (FOCUS_EVENTS.has(event.type)) return "focus";
+  if (POINTER_EVENTS.has(event.type)) return "pointer";
+  return "user";
+}
+
+function actionSource(source) {
+  if (source instanceof HTMLElement) {
+    return { event: null, host: source, origin: source, reason: "api" };
+  }
+  const event = source ?? null;
+  return {
+    event,
+    host: event?.currentTarget instanceof Element ? event.currentTarget : null,
+    origin: event?.target instanceof Element ? event.target : null,
+    reason: stateReasonFor(event)
+  };
+}
 
-// src/utils/logical_scroll.ts
 function isRtl(element) {
   return window.getComputedStyle(element).direction === "rtl";
 }
 
-// src/utils/arrow_step.ts
 function logicalArrowKey(key, element) {
   if (key !== "ArrowRight" && key !== "ArrowLeft") return key;
   if (!isRtl(element)) return key;
@@ -18,7 +36,6 @@ 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");
 }
 
-// src/utils/field_mirror.ts
 function writeFields(container, values, { name, form = "" }) {
   const current = [...container.children];
   const submits = current.length === values.length && current.every(
@@ -41,7 +58,6 @@ function commitField(target) {
   target.dispatchEvent(new Event("change", { bubbles: true }));
 }
 
-// src/utils/interactive_host.ts
 var INTERACTIVE_HOST_SELECTOR = "button, input, select, textarea, label, a[href], area[href], summary, details, audio[controls], video[controls], iframe, object, embed";
 function isInteractiveHost(element) {
   if (element.matches(INTERACTIVE_HOST_SELECTOR)) return true;
@@ -58,27 +74,33 @@ function isInteractiveHost(element) {
   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. */
   schedule() {
     if (!this.#active || this.#queued) return;
     this.#queued = true;
@@ -91,7 +113,46 @@ var MicrotaskCoalescer = class {
   }
 };
 
-// src/controllers/data_grid_controller.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();
+  }
+  disconnect() {
+    this.#listeners.dispose();
+    this.#pass.cancel();
+    this.#element = null;
+  }
+};
+
+var MoveCounter = class {
+  #sequence = 0;
+  record() {
+    this.#sequence += 1;
+    return this.#sequence;
+  }
+  isLatest(token) {
+    return token === this.#sequence;
+  }
+};
+
+function targetSelector(identifier, name) {
+  return `[data-${identifier}-target~="${name}"]`;
+}
+
 var SORT_CYCLE = ["none", "ascending", "descending"];
 var OBSERVED_ATTRIBUTES = ["aria-selected", "data-value"];
 function setAttributeIfChanged(element, name, value) {
@@ -110,6 +171,8 @@ function nextSortDirection(current) {
   return SORT_CYCLE[(from + 1) % SORT_CYCLE.length] ?? "ascending";
 }
 var DataGridController = class extends Controller {
+  #moves = new MoveCounter();
+  #stopHolder = null;
   static targets = ["columnHeader", "row", "cell", "fields"];
   static values = {
     selection: { type: String, default: "none" },
@@ -118,57 +181,25 @@ var DataGridController = class extends Controller {
   };
   static actions = ["onKeydown", "sort", "toggleSelect"];
   static events = ["selectionchange", "sort", "reconcile"];
-  /**
-   * Collapses the target callbacks, Value changes and observed row writes of one
-   * DOM mutation into a single pass, and refuses to run before `connect()` or
-   * after `disconnect()`.
-   *
-   * Stimulus reports every target one at a time, so an ungated pass would re-walk
-   * the whole grid once per authored cell on mount and once per streamed cell
-   * afterwards — quadratic in the cell count both times.
-   */
-  #reconcile = new MicrotaskCoalescer(() => this.#reconcileRows());
-  /** Watches the row attributes a page can rewrite in place; set while connected. */
+  #reconcile = new MorphRenderWatcher(() => this.#reconcileRows());
   #observer = null;
-  /** The selection last settled: on connect, by the user, or by a reported pass. */
   #settled = /* @__PURE__ */ new Map();
-  /**
-   * Establishes a single tab stop across all navigable cells/headers, brings the
-   * rows to their baseline, and settles the selection without reporting it.
-   *
-   * The whole baseline runs here rather than in the Value callbacks: Stimulus
-   * delivers those before `connect()`, where the pass is refused, and a
-   * re-attached element reuses its cached context, whose value observer does not
-   * fire again.
-   */
   connect() {
     this.#restoreBaseline();
     this.#settled = this.#selection();
-    this.#reconcile.activate();
+    this.#reconcile.observe(this.element);
     this.#observeRows();
   }
-  /** Releases the row observer and drops a queued pass, so neither outlives the element. */
   disconnect() {
-    this.#reconcile.cancel();
+    this.#reconcile.disconnect();
     this.#observer?.disconnect();
     this.#observer = null;
   }
-  /**
-   * Rebuilds the DOM-owned baselines from the live grid: exactly one navigable
-   * cell is in the Tab sequence, `aria-multiselectable` follows `selection`, every
-   * selectable row carries an explicit `aria-selected`, and the fields mirror the
-   * selected rows.
-   *
-   * The tab stop keeps whichever cell already holds it, so a rebuild triggered by
-   * an unrelated row arriving does not throw the user's position away; only when
-   * no cell holds it — the grid is fresh, or the holder was removed — does the
-   * first navigable cell take over. Without that fallback a grid whose active row
-   * is removed keeps every cell at `-1` and drops out of the Tab sequence
-   * entirely.
-   */
   #restoreBaseline() {
     const cells = this.#navigableCells();
-    const active = cells.find((cell) => cell.tabIndex === 0) ?? cells[0];
+    const holder = this.#stopHolder;
+    const kept = holder !== null && holder.tabIndex === 0 && cells.includes(holder);
+    const active = (kept ? holder : cells.find((cell) => cell.tabIndex === 0)) ?? cells[0];
     if (active) this.#setActiveCell(active, { focus: false }, cells);
     this.#syncSelectable();
     const pageWrote = this.#takePageRecords();
@@ -176,83 +207,49 @@ var DataGridController = class extends Controller {
     this.#dropOwnRecords(pageWrote);
     this.#mirrorFields(false);
   }
-  /**
-   * The pass the page's changes run: the baselines are rebuilt, then a selection
-   * that moved is reported. The report comes last, so rows a subscriber rewrites
-   * are the next pass's to settle.
-   */
   #reconcileRows() {
     this.#restoreBaseline();
     this.#reportMove();
   }
-  /**
-   * Reports the selection as `reconcile` when it differs from the one last
-   * settled. The settled selection is replaced before dispatching, so a move a
-   * subscriber makes is measured against what it was told.
-   */
   #reportMove() {
     const selection = this.#selection();
     if (sameSelection(selection, this.#settled)) return;
     this.#settled = selection;
     this.dispatch("reconcile", { detail: { rows: [...selection.keys()] } });
   }
-  /**
-   * Re-renders `aria-multiselectable`, the rows and the fields when application
-   * code (or a Turbo morph) changes `selection` at runtime; a selection the new
-   * mode collapses is reported as `reconcile`.
-   */
   selectionValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Rebuilds the submitted fields when the public name changes at runtime. */
   nameValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Repoints the submitted fields when the owning form changes at runtime. */
   formValueChanged() {
     this.#reconcile.schedule();
   }
-  /** Seeds a fields container inserted after connect from the current selection. */
   fieldsTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the baselines for a row added after connect. */
+  fieldsTargetDisconnected() {
+    this.#reconcile.schedule();
+  }
   rowTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Settles the selection again when a row leaves the grid or drops its target token. */
   rowTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the tab stop when a cell joins the grid after connect. */
   cellTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the tab stop when a cell leaves the grid. */
   cellTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the tab stop when a header joins the grid after connect. */
   columnHeaderTargetConnected() {
     this.#reconcile.schedule();
   }
-  /** Re-establishes the tab stop when a header leaves the grid. */
   columnHeaderTargetDisconnected() {
     this.#reconcile.schedule();
   }
-  /**
-   * Brings the authored rows to the shape the APG requires, without changing
-   * which rows the author chose.
-   *
-   * Every selectable row gets an explicit value — an absent `aria-selected` means
-   * "not selectable" in ARIA, so a forgotten attribute hides a selectable row —
-   * and a single-select grid keeps at most one `true`, first in DOM order.
-   * A grid that declares `selection="none"` has no selectable rows, so the
-   * attribute is removed rather than written: in ARIA its absence is what "not
-   * selectable" looks like.
-   *
-   * @stimeoRenderRoot
-   */
   #normalizeSelection() {
     const rows = this.rowTargets;
     if (this.selectionValue === "none") {
@@ -269,13 +266,6 @@ var DataGridController = class extends Controller {
       }
     }
   }
-  /**
-   * Mirrors `selection="multiple"` onto `aria-multiselectable` (APG Grid) so SRs
-   * announce that more than one row can be selected; cleared for single/none so a
-   * grid never carries a misleading attribute.
-   *
-   * @stimeoRenderRoot
-   */
   #syncSelectable() {
     if (this.selectionValue === "multiple") {
       setAttributeIfChanged(this.element, "aria-multiselectable", "true");
@@ -283,30 +273,32 @@ var DataGridController = class extends Controller {
       this.element.removeAttribute("aria-multiselectable");
     }
   }
-  /** Cycles the activated column header's sort and emits `sort`. */
-  sort(event) {
-    const header = event.currentTarget;
-    if (!this.columnHeaderTargets.includes(header)) return;
-    if (event.defaultPrevented) return;
-    const control = this.#claimingControl(event, header);
+  sort(source) {
+    const { event, host, origin, reason } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
+    const header = host?.closest(targetSelector(this.identifier, "columnHeader"));
+    if (!header || !this.columnHeaderTargets.includes(header)) return;
+    if (event?.defaultPrevented) return;
+    const control = event ? this.#claimingControl(event, header) : null;
     if (control && !(control instanceof HTMLButtonElement)) return;
     const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
     for (const other of this.columnHeaderTargets) {
       other.setAttribute("aria-sort", other === header ? direction : "none");
     }
     this.#setActiveCell(header, { focus: false });
-    this.dispatch("sort", { detail: { column: header, direction } });
+    this.dispatch("sort", { detail: { column: header, direction, reason } });
   }
-  /** Toggles selection of the row owning the event target. Bound optionally. */
-  toggleSelect(event) {
+  toggleSelect(source) {
+    const { event, host, origin, reason } = actionSource(source);
+    if (origin && origin.closest(`[data-controller~="${this.identifier}"]`) !== this.element)
+      return;
     if (this.selectionValue === "none") return;
-    if (event.defaultPrevented) return;
-    const host = event.currentTarget;
-    if (this.#claimedByDescendant(event, host)) return;
-    const row = host.closest("[role='row']");
-    if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
+    if (event?.defaultPrevented) return;
+    if (event && host instanceof HTMLElement && this.#claimedByDescendant(event, host)) return;
+    const row = host?.closest(targetSelector(this.identifier, "row"));
+    if (row && this.rowTargets.includes(row)) this.#toggleRow(row, reason);
   }
-  /** Grid navigation + sort/select activation. Bound to cells and headers. */
   onKeydown(event) {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
@@ -351,38 +343,15 @@ var DataGridController = class extends Controller {
       this.#setActiveCell(target, { focus: true }, matrix.flat());
     }
   }
-  /**
-   * Whether the event was addressed to a control inside `host` rather than to the
-   * grid.
-   *
-   * Cells and headers hold consumer markup, and APG's grid pattern expects that
-   * markup to include working controls — a row action button, an inline editor.
-   * Those own their own keystrokes and clicks, so the grid stands down entirely
-   * rather than acting in parallel. An editable host (its `contenteditable` state
-   * is inherited, so the walk is explicit) counts the same way.
-   */
   #claimedByDescendant(event, host) {
     return this.#claimingControl(event, host) !== null;
   }
-  /**
-   * The nested control this event belongs to, or `null` when the host owns it.
-   *
-   * Naming the control, rather than answering yes or no, is what lets the click
-   * path treat a sortable header's `<button>` as the activation it is while every
-   * other control still takes the event away.
-   */
   #claimingControl(event, host) {
     const source = event.target;
     const control = source.closest(INTERACTIVE_HOST_SELECTOR);
     if (control && host.contains(control)) return control;
     return isInteractiveHost(source) ? source : null;
   }
-  /**
-   * Performs a header's sort or a cell row's selection toggle on activation.
-   *
-   * @stimeoRuntimeOnly `selection` decides whether this one activation toggles the row; the sort it
-   *   cycles does not depend on it.
-   */
   #activate(cell) {
     if (this.columnHeaderTargets.includes(cell)) {
       this.#cycleSort(cell);
@@ -392,20 +361,14 @@ var DataGridController = class extends Controller {
     const row = cell.closest("[role='row']");
     if (row && this.rowTargets.includes(row)) this.#toggleRow(row);
   }
-  /** Cycles a header's sort on keyboard activation and emits `sort`. */
   #cycleSort(header) {
     const direction = nextSortDirection(header.getAttribute("aria-sort") ?? "none");
     for (const other of this.columnHeaderTargets) {
       other.setAttribute("aria-sort", other === header ? direction : "none");
     }
-    this.dispatch("sort", { detail: { column: header, direction } });
-  }
-  /**
-   * Toggles a row's `aria-selected`, honoring single vs. multiple selection.
-   *
-   * @stimeoRuntimeOnly `selection` decides how this one toggle treats the other rows.
-   */
-  #toggleRow(row) {
+    this.dispatch("sort", { detail: { column: header, direction, reason: "user" } });
+  }
+  #toggleRow(row, reason = "user") {
     const selected = row.getAttribute("aria-selected") === "true";
     const pageWrote = this.#takePageRecords();
     if (this.selectionValue === "single") {
@@ -415,22 +378,23 @@ var DataGridController = class extends Controller {
     }
     row.setAttribute("aria-selected", selected ? "false" : "true");
     this.#dropOwnRecords(pageWrote);
-    this.#settled = this.#selection();
+    const selection = this.#selection();
+    const changed = !sameSelection(selection, this.#settled);
+    this.#settled = selection;
+    if (!changed) {
+      this.#mirrorFields(false);
+      return;
+    }
+    const token = this.#moves.record();
     this.#mirrorFields(true);
-    this.dispatch("selectionchange", { detail: { rows: [...this.#settled.keys()] } });
+    if (!this.#moves.isLatest(token)) return;
+    this.dispatch("selectionchange", { detail: { rows: [...selection.keys()], reason } });
   }
-  /** The selected rows in DOM order, each with the `data-value` it submits, if any. */
   #selection() {
     return new Map(
       this.rowTargets.filter((row) => row.getAttribute("aria-selected") === "true").map((row) => [row, row.dataset.value])
     );
   }
-  /**
-   * Watches the rows' `aria-selected` and `data-value`. Every write the grid makes
-   * to them sits between a take and a drop of the observer's queue, so each record
-   * the callback receives is the page's, and only a record on one of the grid's own
-   * rows schedules a pass.
-   */
   #observeRows() {
     const observer = new MutationObserver((records) => {
       if (this.#concernsRows(records)) this.#reconcile.schedule();
@@ -442,40 +406,18 @@ var DataGridController = class extends Controller {
     });
     this.#observer = observer;
   }
-  /**
-   * Empties the observer's queue before the grid writes to the rows, and says
-   * whether the page had queued anything about them. Those records still owe a
-   * pass: a toggle in `multiple` mode rewrites only its own row, so it does not fold
-   * in what the page wrote to the others.
-   */
   #takePageRecords() {
     const records = this.#observer?.takeRecords() ?? [];
     return records.length > 0 && this.#concernsRows(records);
   }
-  /**
-   * Whether any record is about one of this grid's own rows. A widget nested in a
-   * cell writes the same attributes on its own elements, and those are no reason
-   * to reconcile the grid.
-   */
   #concernsRows(records) {
     const rows = new Set(this.rowTargets);
     return records.some((record) => rows.has(record.target));
   }
-  /**
-   * Drops the records the grid's own writes just queued, so the observer never
-   * takes them for the page's, then schedules the pass the page's records owe.
-   */
   #dropOwnRecords(pageWrote) {
     this.#observer?.takeRecords();
     if (pageWrote) this.#reconcile.schedule();
   }
-  /**
-   * Mirrors the selected rows' `data-value` into the optional fields container.
-   * A selected row without one submits nothing, so a grid whose rows carry no
-   * value submits an empty set rather than a row of blanks.
-   *
-   * @stimeoRenderRoot
-   */
   #mirrorFields(notify) {
     if (!this.hasFieldsTarget) return;
     const values = this.rowTargets.filter((row) => row.getAttribute("aria-selected") === "true").map((row) => row.dataset.value).filter((value) => value !== void 0);
@@ -484,17 +426,8 @@ var DataGridController = class extends Controller {
       commitField(this.fieldsTarget);
     }
   }
-  /**
-   * Makes `cell` the single tabbable cell (roving) and optionally focuses it.
-   *
-   * `cells` lets a caller that already walked the grid hand its collection over,
-   * so one keystroke rebuilds the matrix once instead of twice. The write is
-   * skipped where the attribute already holds the wanted value — comparing the
-   * attribute rather than the IDL property, because a cell with no `tabindex` at
-   * all reports `-1` and would then never receive the attribute it needs to be
-   * focusable.
-   */
   #setActiveCell(cell, { focus }, cells) {
+    this.#stopHolder = cell;
     for (const candidate of cells ?? this.#navigableCells()) {
       const wanted = candidate === cell ? "0" : "-1";
       if (candidate.getAttribute("tabindex") !== wanted) {
@@ -503,11 +436,9 @@ var DataGridController = class extends Controller {
     }
     if (focus) cell.focus();
   }
-  /** All navigable elements (headers + cells) in DOM order. */
   #navigableCells() {
     return this.#matrix().flat();
   }
-  /** The grid as rows of navigable cells, derived from each `role="row"`. */
   #matrix() {
     const navigable = /* @__PURE__ */ new Set([...this.columnHeaderTargets, ...this.cellTargets]);
     const rows = Array.from(this.element.querySelectorAll("[role='row']"));
@@ -517,7 +448,6 @@ var DataGridController = class extends Controller {
       )
     ).filter((cells) => cells.length > 0);
   }
-  /** Finds `[rowIndex, colIndex]` of `cell` within `matrix`, or null. */
   #locate(matrix, cell) {
     for (let row = 0; row < matrix.length; row++) {
       const col = (matrix[row] ?? []).indexOf(cell);
@@ -525,7 +455,6 @@ var DataGridController = class extends Controller {
     }
     return null;
   }
-  /** The cell at `[row, col]`, clamping `col` to that row's last cell. */
   #cellInRow(matrix, row, col) {
     const cells = matrix[row];
     if (!cells || cells.length === 0) return void 0;
@@ -534,5 +463,4 @@ var DataGridController = class extends Controller {
 };
 
 export { DataGridController };
-//# sourceMappingURL=data_grid_controller.js.map
 //# sourceMappingURL=data_grid_controller.js.map