stimeo-ui 0.17.0 → 0.18.0

package/dist/controllers/toggle_group_controller.js

@@ -37,6 +37,107 @@ 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");
 }
+function hasModifierChord(event) {
+  return event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+}
+
+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 ownerIndex(candidates, node) {
   if (!(node instanceof Node)) return -1;
@@ -121,6 +222,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;
@@ -151,6 +255,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -206,9 +313,9 @@ var ITEM_ATTRIBUTES = [
   "contenteditable",
   "controls"
 ];
-var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var ToggleGroupController = class extends Controller {
   #moves = new MoveCounter();
+  #connectionGeneration = 0;
   static targets = ["item", "fields"];
   static values = {
     mode: { type: String, default: "multiple" },
@@ -221,13 +328,17 @@ var ToggleGroupController = class extends Controller {
   #handledEvents = /* @__PURE__ */ new WeakSet();
   #managedItems = /* @__PURE__ */ new Set();
   #originalTabindex = /* @__PURE__ */ new WeakMap();
-  #ownedPressed = /* @__PURE__ */ new Set();
-  #internalPressedValues = /* @__PURE__ */ new Map();
+  #ownedPressed = /* @__PURE__ */ new Map();
   #pass = new MorphRenderWatcher(() => this.#reconcileDom());
-  #observer = null;
+  #observer = new AuthoredMutationWatcher((records) => {
+    this.#releaseAuthoredPressed(records);
+    this.#pass.schedule();
+  });
   #connected = false;
   #committedValues = [];
+  #listeners = new ListenerSet();
   connect() {
+    this.#releaseDefaultsRewrittenWhileAway();
     const currentItems = new Set(this.itemTargets);
     for (const item of this.#managedItems) {
       if (!currentItems.has(item)) this.#releaseItem(item);
@@ -241,26 +352,21 @@ var ToggleGroupController = class extends Controller {
     this.#ensureTabStop(preferred);
     this.#mirrorFields(false);
     this.#committedValues = this.#pressedValues();
-    this.element.addEventListener("click", this.#onClickCapture, true);
-    this.element.addEventListener("keydown", this.#onKeydownCapture, true);
-    this.element.addEventListener("click", this.#onClick);
-    this.element.addEventListener("keydown", this.#onKeydown);
-    this.element.addEventListener("focusin", this.#onFocusin);
+    this.#listeners.add(this.element, "click", this.#onClickCapture, { capture: true });
+    this.#listeners.add(this.element, "keydown", this.#onKeydownCapture, { capture: true });
+    this.#listeners.add(this.element, "click", this.#onClick);
+    this.#listeners.add(this.element, "keydown", this.#onKeydown);
+    this.#listeners.add(this.element, "focusin", this.#onFocusin);
     this.#connected = true;
-    this.#internalPressedValues.clear();
     this.#pass.observe(this.element);
     this.#observeMutations();
   }
   disconnect() {
+    this.#connectionGeneration += 1;
     this.#connected = false;
     this.#pass.disconnect();
-    this.element.removeEventListener("click", this.#onClickCapture, true);
-    this.element.removeEventListener("keydown", this.#onKeydownCapture, true);
-    this.element.removeEventListener("click", this.#onClick);
-    this.element.removeEventListener("keydown", this.#onKeydown);
-    this.element.removeEventListener("focusin", this.#onFocusin);
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#listeners.dispose();
+    this.#observer.disconnect();
   }
   itemTargetConnected(item) {
     if (!this.#connected) return;
@@ -327,7 +433,7 @@ var ToggleGroupController = class extends Controller {
     if (event.defaultPrevented || !this.#isSupportedHost(item)) return;
     if (event.isComposing) return;
     if (isReservedArrowChord(event)) return;
-    if ((event.key === "Home" || event.key === "End") && hasModifier(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
     if (!this.#managedItems.has(item)) this.#reconcileHost(item, true);
     this.#ensureTabStop();
     const items = this.#managedTargets;
@@ -363,6 +469,7 @@ var ToggleGroupController = class extends Controller {
   }
   #toggleItem(item, reason = "user") {
     if (!this.#isSupportedHost(item) || this.#isActivationDisabled(item)) return;
+    const generation = this.#connectionGeneration;
     if (!this.#managedItems.has(item)) this.#reconcileHost(item, true);
     const willPress = !this.#isPressed(item);
     if (this.modeValue === "single") {
@@ -382,7 +489,7 @@ var ToggleGroupController = 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("change", {
       detail: { value: this.#itemValue(item), pressed: willPress, values: [...values], reason }
     });
@@ -390,22 +497,21 @@ var ToggleGroupController = class extends Controller {
   #mirrorFields(notify) {
     if (!this.hasFieldsTarget) return;
     const options = { name: this.nameValue, form: this.formValue };
-    if (writeFields(this.fieldsTarget, this.#pressedValues(), options) && notify) {
-      commitField(this.fieldsTarget);
-    }
+    const removed = [...this.fieldsTarget.childNodes];
+    const changed = writeFields(this.fieldsTarget, this.#pressedValues(), options);
+    if (changed)
+      this.#observer.claimChildList(this.fieldsTarget, [...this.fieldsTarget.childNodes], removed);
+    if (changed && notify) commitField(this.fieldsTarget);
   }
   #reconcileDom() {
-    const observer = this.#observer;
-    if (observer) {
-      this.#releaseAuthoredPressed(observer.takeRecords());
-      observer.disconnect();
-    }
+    this.#releaseAuthoredPressed(this.#observer.take());
     for (const item of this.itemTargets) this.#reconcileHost(item, true);
     this.#normalizeSelection();
     this.#ensureTabStop();
     this.#mirrorFields(false);
-    this.#internalPressedValues.clear();
-    if (observer) this.#observeWith(observer);
+    const authored = this.#observer.take();
+    this.#releaseAuthoredPressed(authored);
+    if (authored.length > 0) this.#pass.schedule();
     this.#reportMove();
   }
   #reportMove() {
@@ -434,16 +540,15 @@ var ToggleGroupController = class extends Controller {
     const original = this.#originalTabindex.get(item);
     if (original === null) item.removeAttribute("tabindex");
     else if (original !== void 0) item.setAttribute("tabindex", original);
-    if (this.#ownedPressed.delete(item)) item.removeAttribute("aria-pressed");
+    if (this.#ownedPressed.delete(item)) this.#writePressed(item, null);
   }
   #normalizePressed(item) {
     const value = item.getAttribute("aria-pressed");
     if (value === null) {
-      this.#ownedPressed.add(item);
-      this.#internalPressedValues.set(item, "false");
-      item.setAttribute("aria-pressed", "false");
+      this.#ownedPressed.set(item, "false");
+      this.#writePressed(item, "false");
     } else if (value !== "true" && value !== "false") {
-      item.setAttribute("aria-pressed", "false");
+      this.#writePressed(item, "false");
     }
   }
   #normalizeSelection() {
@@ -521,34 +626,23 @@ var ToggleGroupController = class extends Controller {
       if (record.attributeName !== "aria-pressed") continue;
       const item = record.target;
       const value = item.getAttribute("aria-pressed");
-      if (value !== null && this.#internalPressedValues.get(item) !== value) {
+      if (value !== null) {
         this.#ownedPressed.delete(item);
       }
     }
-    this.#internalPressedValues.clear();
   }
   #observeMutations() {
-    const observer = new MutationObserver((records) => {
-      this.#releaseAuthoredPressed(records);
-      this.#pass.schedule();
-    });
-    this.#observer = observer;
-    this.#observeWith(observer);
-  }
-  #observeWith(observer) {
-    observer.observe(this.element, {
+    this.#observer.observe(this.element, {
       subtree: true,
       childList: true,
-      attributes: true,
-      attributeFilter: ITEM_ATTRIBUTES
+      attributes: ITEM_ATTRIBUTES,
+      ancestorAttributes: ["contenteditable", "disabled"]
     });
-    let ancestor = this.element.parentElement;
-    while (ancestor) {
-      observer.observe(ancestor, {
-        attributes: true,
-        attributeFilter: ["contenteditable", "disabled"]
-      });
-      ancestor = ancestor.parentElement;
+  }
+  #releaseDefaultsRewrittenWhileAway() {
+    for (const [item, written] of this.#ownedPressed) {
+      const current = item.getAttribute("aria-pressed");
+      if (current !== null && current !== written) this.#ownedPressed.delete(item);
     }
   }
   get #managedTargets() {
@@ -562,8 +656,8 @@ var ToggleGroupController = class extends Controller {
   }
   #setPressed(item, pressed) {
     const value = pressed ? "true" : "false";
-    this.#internalPressedValues.set(item, value);
-    item.setAttribute("aria-pressed", value);
+    if (this.#ownedPressed.has(item)) this.#ownedPressed.set(item, value);
+    this.#writePressed(item, value);
   }
   #pressedValues() {
     return this.#managedTargets.filter((item) => this.#isPressed(item)).map((item) => this.#itemValue(item));
@@ -571,6 +665,14 @@ var ToggleGroupController = class extends Controller {
   #itemValue(item) {
     return item.getAttribute("data-value") ?? "";
   }
+  #writePressed(item, value) {
+    setAttributeIfChanged(
+      item,
+      "aria-pressed",
+      value,
+      () => this.#observer.claim(item, "aria-pressed", value)
+    );
+  }
 };
 
 export { ToggleGroupController };