stimeo-ui 0.17.0 → 0.18.0

package/dist/controllers/data_grid_controller.js

@@ -36,6 +36,104 @@ 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");
 }
 
+function setAttributeIfChanged(element, name, value, beforeWrite) {
+  if (element.getAttribute(name) === value) return false;
+  beforeWrite?.();
+  if (value === null) element.removeAttribute(name);
+  else element.setAttribute(name, value);
+  return true;
+}
+
+var AuthoredMutationWatcher = class {
+  #onAuthored;
+  #claims = null;
+  #observer = null;
+  constructor(onAuthored) {
+    this.#onAuthored = onAuthored;
+  }
+  observe(root, options) {
+    this.disconnect();
+    const observer = new MutationObserver((records) => {
+      if (this.#observer !== observer) return;
+      const authored = this.#filter(records);
+      if (authored.length > 0) this.#onAuthored(authored);
+    });
+    this.#observer = observer;
+    this.#claims = { attributes: /* @__PURE__ */ new Map(), children: /* @__PURE__ */ new Map() };
+    observer.observe(root, {
+      attributes: true,
+      attributeFilter: [...options.attributes],
+      subtree: options.subtree ?? false,
+      childList: options.childList ?? false
+    });
+    if (options.ancestorAttributes) {
+      let ancestor = root.parentElement;
+      while (ancestor) {
+        observer.observe(ancestor, {
+          attributes: true,
+          attributeFilter: [...options.ancestorAttributes]
+        });
+        ancestor = ancestor.parentElement;
+      }
+    }
+  }
+  claim(target, name, value) {
+    const claims = this.#claims?.attributes;
+    let attributes = claims?.get(target);
+    if (!attributes) {
+      attributes = /* @__PURE__ */ new Map();
+      claims?.set(target, attributes);
+    }
+    const pending = attributes.get(name);
+    attributes.set(name, { value, count: (pending?.count ?? 0) + 1 });
+  }
+  claimCurrent(target, name) {
+    this.claim(target, name, target.getAttribute(name));
+  }
+  claimChildList(target, added, removed) {
+    const claims = this.#claims?.children;
+    const pending = claims?.get(target) ?? { added: /* @__PURE__ */ new Map(), removed: /* @__PURE__ */ new Map() };
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) + 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) + 1);
+    claims?.set(target, pending);
+  }
+  take() {
+    return this.#filter(this.#observer?.takeRecords() ?? []);
+  }
+  disconnect() {
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#claims = null;
+  }
+  #filter(records) {
+    const authored = records.filter((record) => !this.#consume(record));
+    this.#claims?.attributes.clear();
+    this.#claims?.children.clear();
+    return authored;
+  }
+  #consume(record) {
+    if (record.type === "attributes") {
+      const target = record.target;
+      const pending2 = this.#claims?.attributes.get(target)?.get(record.attributeName);
+      if (!pending2 || pending2.count === 0 || target.getAttribute(record.attributeName) !== pending2.value) {
+        return false;
+      }
+      pending2.count -= 1;
+      return true;
+    }
+    const pending = this.#claims?.children.get(record.target);
+    if (!pending) return false;
+    const added = [...record.addedNodes];
+    const removed = [...record.removedNodes];
+    if (added.some((node) => !pending.added.get(node)) || removed.some((node) => !pending.removed.get(node))) {
+      return false;
+    }
+    for (const node of added) pending.added.set(node, (pending.added.get(node) ?? 0) - 1);
+    for (const node of removed) pending.removed.set(node, (pending.removed.get(node) ?? 0) - 1);
+    return true;
+  }
+};
+
 function writeFields(container, values, { name, form = "" }) {
   const current = [...container.children];
   const submits = current.length === values.length && current.every(
@@ -101,6 +199,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;
@@ -131,6 +232,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -155,9 +259,6 @@ function targetSelector(identifier, name) {
 
 var SORT_CYCLE = ["none", "ascending", "descending"];
 var OBSERVED_ATTRIBUTES = ["aria-selected", "data-value"];
-function setAttributeIfChanged(element, name, value) {
-  if (element.getAttribute(name) !== value) element.setAttribute(name, value);
-}
 function sameSelection(a, b) {
   if (a.size !== b.size) return false;
   for (const [row, value] of a) {
@@ -172,6 +273,7 @@ function nextSortDirection(current) {
 }
 var DataGridController = class extends Controller {
   #moves = new MoveCounter();
+  #connectionGeneration = 0;
   #stopHolder = null;
   static targets = ["columnHeader", "row", "cell", "fields"];
   static values = {
@@ -182,7 +284,9 @@ var DataGridController = class extends Controller {
   static actions = ["onKeydown", "sort", "toggleSelect"];
   static events = ["selectionchange", "sort", "reconcile"];
   #reconcile = new MorphRenderWatcher(() => this.#reconcileRows());
-  #observer = null;
+  #observer = new AuthoredMutationWatcher((records) => {
+    if (this.#concernsRows(records)) this.#reconcile.schedule();
+  });
   #settled = /* @__PURE__ */ new Map();
   connect() {
     this.#restoreBaseline();
@@ -191,9 +295,9 @@ var DataGridController = class extends Controller {
     this.#observeRows();
   }
   disconnect() {
+    this.#connectionGeneration += 1;
     this.#reconcile.disconnect();
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#observer.disconnect();
   }
   #restoreBaseline() {
     const cells = this.#navigableCells();
@@ -204,7 +308,7 @@ var DataGridController = class extends Controller {
     this.#syncSelectable();
     const pageWrote = this.#takePageRecords();
     this.#normalizeSelection();
-    this.#dropOwnRecords(pageWrote);
+    this.#flushMutations(pageWrote);
     this.#mirrorFields(false);
   }
   #reconcileRows() {
@@ -253,16 +357,16 @@ var DataGridController = class extends Controller {
   #normalizeSelection() {
     const rows = this.rowTargets;
     if (this.selectionValue === "none") {
-      for (const row of rows) row.removeAttribute("aria-selected");
+      for (const row of rows) this.#writeSelection(row, null);
       return;
     }
     const single = this.selectionValue === "single";
     const first = rows.find((row) => row.getAttribute("aria-selected") === "true");
     for (const row of rows) {
       if (single) {
-        setAttributeIfChanged(row, "aria-selected", row === first ? "true" : "false");
+        this.#writeSelection(row, row === first ? "true" : "false");
       } else if (row.getAttribute("aria-selected") !== "true") {
-        setAttributeIfChanged(row, "aria-selected", "false");
+        this.#writeSelection(row, "false");
       }
     }
   }
@@ -303,6 +407,9 @@ var DataGridController = class extends Controller {
     if (event.defaultPrevented) return;
     if (isReservedArrowChord(event)) return;
     if (event.isComposing) return;
+    if ((event.key === "Home" || event.key === "End") && (event.altKey || event.metaKey || event.shiftKey)) {
+      return;
+    }
     const cell = event.currentTarget;
     if (this.#claimedByDescendant(event, cell)) return;
     const matrix = this.#matrix();
@@ -369,15 +476,16 @@ var DataGridController = class extends Controller {
     this.dispatch("sort", { detail: { column: header, direction, reason: "user" } });
   }
   #toggleRow(row, reason = "user") {
+    const generation = this.#connectionGeneration;
     const selected = row.getAttribute("aria-selected") === "true";
     const pageWrote = this.#takePageRecords();
     if (this.selectionValue === "single") {
       for (const other of this.rowTargets) {
-        if (other !== row) setAttributeIfChanged(other, "aria-selected", "false");
+        if (other !== row) this.#writeSelection(other, "false");
       }
     }
-    row.setAttribute("aria-selected", selected ? "false" : "true");
-    this.#dropOwnRecords(pageWrote);
+    this.#writeSelection(row, selected ? "false" : "true");
+    this.#flushMutations(pageWrote);
     const selection = this.#selection();
     const changed = !sameSelection(selection, this.#settled);
     this.#settled = selection;
@@ -387,7 +495,7 @@ var DataGridController = class extends Controller {
     }
     const token = this.#moves.record();
     this.#mirrorFields(true);
-    if (!this.#moves.isLatest(token)) return;
+    if (generation !== this.#connectionGeneration || !this.#moves.isLatest(token)) return;
     this.dispatch("selectionchange", { detail: { rows: [...selection.keys()], reason } });
   }
   #selection() {
@@ -396,27 +504,22 @@ var DataGridController = class extends Controller {
     );
   }
   #observeRows() {
-    const observer = new MutationObserver((records) => {
-      if (this.#concernsRows(records)) this.#reconcile.schedule();
-    });
-    observer.observe(this.element, {
+    this.#observer.observe(this.element, {
       subtree: true,
-      attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES
+      attributes: OBSERVED_ATTRIBUTES
     });
-    this.#observer = observer;
   }
   #takePageRecords() {
-    const records = this.#observer?.takeRecords() ?? [];
+    const records = this.#observer.take();
     return records.length > 0 && this.#concernsRows(records);
   }
   #concernsRows(records) {
     const rows = new Set(this.rowTargets);
     return records.some((record) => rows.has(record.target));
   }
-  #dropOwnRecords(pageWrote) {
-    this.#observer?.takeRecords();
-    if (pageWrote) this.#reconcile.schedule();
+  #flushMutations(pageWrote) {
+    const authored = this.#concernsRows(this.#observer.take());
+    if (pageWrote || authored) this.#reconcile.schedule();
   }
   #mirrorFields(notify) {
     if (!this.hasFieldsTarget) return;
@@ -430,9 +533,7 @@ var DataGridController = class extends Controller {
     this.#stopHolder = cell;
     for (const candidate of cells ?? this.#navigableCells()) {
       const wanted = candidate === cell ? "0" : "-1";
-      if (candidate.getAttribute("tabindex") !== wanted) {
-        candidate.setAttribute("tabindex", wanted);
-      }
+      setAttributeIfChanged(candidate, "tabindex", wanted);
     }
     if (focus) cell.focus();
   }
@@ -460,6 +561,11 @@ var DataGridController = class extends Controller {
     if (!cells || cells.length === 0) return void 0;
     return cells[Math.min(col, cells.length - 1)];
   }
+  #writeSelection(target, value) {
+    setAttributeIfChanged(target, "aria-selected", value, () => {
+      this.#observer.claim(target, "aria-selected", value);
+    });
+  }
 };
 
 export { DataGridController };