stimeo-ui 0.17.0 → 0.18.0

package/dist/controllers/radio_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;
@@ -108,6 +209,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;
@@ -138,6 +242,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -197,9 +304,9 @@ var OBSERVED_ATTRIBUTES = [
   "type",
   "value"
 ];
-var hasModifier = (event) => event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
 var RadioGroupController = class extends Controller {
   #moves = new MoveCounter();
+  #connectionGeneration = 0;
   #moveToken = 0;
   static targets = ["radio", "field"];
   static actions = ["onKeydown", "select"];
@@ -209,17 +316,20 @@ var RadioGroupController = class extends Controller {
   #handledEvents = /* @__PURE__ */ new WeakSet();
   #managedRadios = /* @__PURE__ */ new Set();
   #originalTabindex = /* @__PURE__ */ new Map();
-  #ownedChecked = /* @__PURE__ */ new Set();
-  #internalCheckedValues = /* @__PURE__ */ new Map();
-  #internalTabindexValues = /* @__PURE__ */ new Map();
-  #observer = null;
+  #ownedChecked = /* @__PURE__ */ new Map();
+  #writtenTabindex = /* @__PURE__ */ new WeakMap();
+  #observer = new AuthoredMutationWatcher(
+    (records) => this.#handleMutationRecords(records)
+  );
   #committed = NO_SELECTION;
   #connected = false;
   #lastOrder = [];
   #focusedRadio = null;
   #pendingFocusIndex = null;
   #preferChecked = false;
+  #listeners = new ListenerSet();
   connect() {
+    this.#releaseDefaultsRewrittenWhileAway();
     const currentRadios = new Set(this.radioTargets);
     for (const radio of this.#managedRadios) {
       if (!currentRadios.has(radio)) this.#releaseRadio(radio);
@@ -230,30 +340,23 @@ var RadioGroupController = class extends Controller {
     this.#reflectField(this.#selectedRadio);
     this.#committed = this.#settled;
     this.#lastOrder = this.#managedTargets;
-    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.element.addEventListener("focusout", this.#onFocusout);
+    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.#listeners.add(this.element, "focusout", this.#onFocusout);
     this.#connected = true;
     this.#preferChecked = false;
-    this.#internalCheckedValues.clear();
-    this.#internalTabindexValues.clear();
     this.#reconcile.observe(this.element);
     this.#observeMutations();
   }
   disconnect() {
+    this.#connectionGeneration += 1;
     this.#connected = false;
     this.#reconcile.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.element.removeEventListener("focusout", this.#onFocusout);
-    this.#observer?.disconnect();
-    this.#observer = null;
+    this.#listeners.dispose();
+    this.#observer.disconnect();
     this.#focusedRadio = null;
     this.#pendingFocusIndex = null;
     this.#committed = NO_SELECTION;
@@ -338,7 +441,7 @@ var RadioGroupController = class extends Controller {
   #handleKeydown(event, radio) {
     if (event.defaultPrevented || !this.#isSupportedHost(radio)) return;
     if (event.isComposing || isReservedArrowChord(event)) return;
-    if ((event.key === "Home" || event.key === "End") && hasModifier(event)) return;
+    if ((event.key === "Home" || event.key === "End") && hasModifierChord(event)) return;
     if (event.key === " ") {
       if (this.#isActivationDisabled(radio)) {
         event.preventDefault();
@@ -374,6 +477,7 @@ var RadioGroupController = class extends Controller {
   }
   #selectRadio(radio, { focus }, reason = "user") {
     if (!this.#isSupportedHost(radio) || this.#isActivationDisabled(radio)) return;
+    const generation = this.#connectionGeneration;
     const value = this.#radioValue(radio);
     const changed = this.#committed.radio !== radio || this.#committed.value !== value;
     for (const item of this.#managedTargets) this.#setChecked(item, item === radio);
@@ -381,17 +485,18 @@ var RadioGroupController = class extends Controller {
     if (changed) this.#moveToken = this.#moves.record();
     const token = this.#moveToken;
     this.#setActive(radio);
-    const fieldChanged = this.hasFieldTarget && writeField(this.fieldTarget, value);
+    const fieldChanged = this.#writeField(value);
+    this.#handleMutationRecords(this.#observer.take());
     if (focus) radio.focus();
-    if (!this.#connected || !this.#moves.isLatest(token)) return;
+    if (generation !== this.#connectionGeneration || !this.#connected || !this.#moves.isLatest(token))
+      return;
     if (changed && fieldChanged) commitField(this.fieldTarget);
-    if (changed && this.#moves.isLatest(token)) {
+    if (changed && generation === this.#connectionGeneration && this.#connected && this.#moves.isLatest(token)) {
       this.dispatch("change", { detail: { value, radio, reason } });
     }
   }
   #reconcileDom() {
-    const observer = this.#observer;
-    this.#handleMutationRecords(observer?.takeRecords() ?? []);
+    this.#handleMutationRecords(this.#observer.take());
     for (const radio of this.radioTargets) this.#reconcileHost(radio, true);
     this.#normalizeSelection();
     const pendingFocusIndex = this.#pendingFocusIndex;
@@ -406,9 +511,7 @@ var RadioGroupController = class extends Controller {
     this.#reflectField(this.#selectedRadio);
     this.#lastOrder = this.#managedTargets;
     this.#preferChecked = false;
-    observer?.takeRecords();
-    this.#internalCheckedValues.clear();
-    this.#internalTabindexValues.clear();
+    this.#handleMutationRecords(this.#observer.take());
     const settled = this.#settled;
     const committed = this.#committed;
     const changed = settled.radio !== committed.radio || settled.value !== committed.value;
@@ -436,22 +539,19 @@ var RadioGroupController = class extends Controller {
     this.#managedRadios.delete(radio);
     const original = this.#originalTabindex.get(radio);
     if (original === null) {
-      this.#markInternal(this.#internalTabindexValues, radio, null);
-      radio.removeAttribute("tabindex");
+      this.#writeAttribute(radio, "tabindex", null);
     } else if (original !== void 0) {
-      this.#markInternal(this.#internalTabindexValues, radio, original);
-      radio.setAttribute("tabindex", original);
+      this.#writeAttribute(radio, "tabindex", original);
     }
     this.#originalTabindex.delete(radio);
     if (this.#ownedChecked.delete(radio)) {
-      this.#markInternal(this.#internalCheckedValues, radio, null);
-      radio.removeAttribute("aria-checked");
+      this.#writeAttribute(radio, "aria-checked", null);
     }
   }
   #normalizeChecked(radio) {
     const value = radio.getAttribute("aria-checked");
     if (value === null) {
-      this.#ownedChecked.add(radio);
+      this.#ownedChecked.set(radio, "false");
       this.#setChecked(radio, false);
     } else if (value !== "true" && value !== "false") {
       this.#setChecked(radio, false);
@@ -506,7 +606,8 @@ var RadioGroupController = class extends Controller {
     const index = items.indexOf(radio);
     this.#roving.setActive(index);
     for (const item of items) {
-      this.#markInternal(this.#internalTabindexValues, item, item.getAttribute("tabindex"));
+      this.#observer.claimCurrent(item, "tabindex");
+      this.#writtenTabindex.set(item, item.getAttribute("tabindex"));
     }
     if (focus) radio?.focus();
   }
@@ -549,58 +650,36 @@ var RadioGroupController = class extends Controller {
       const target = record.target;
       const attribute = record.attributeName;
       if (attribute === "aria-checked") {
-        const value = target.getAttribute(attribute);
-        if (this.#matchesInternal(this.#internalCheckedValues, target, value)) continue;
         this.#ownedChecked.delete(target);
         this.#preferChecked = true;
         external = true;
       } else if (attribute === "tabindex") {
         const value = target.getAttribute(attribute);
-        if (this.#matchesInternal(this.#internalTabindexValues, target, value)) continue;
         if (this.#managedRadios.has(target)) this.#originalTabindex.set(target, value);
         external = true;
       } else {
         external = true;
       }
     }
-    this.#internalTabindexValues.clear();
     if (external) this.#reconcile.schedule();
   }
-  #markInternal(values, target, value) {
-    const pending = values.get(target);
-    if (pending) {
-      pending.value = value;
-      pending.count += 1;
-    } else {
-      values.set(target, { value, count: 1 });
-    }
-  }
-  #matchesInternal(values, target, value) {
-    const pending = values.get(target);
-    if (!pending || pending.value !== value) return false;
-    pending.count -= 1;
-    if (pending.count === 0) values.delete(target);
-    return true;
-  }
   #observeMutations() {
-    const observer = new MutationObserver((records) => this.#handleMutationRecords(records));
-    this.#observer = observer;
-    this.#observeWith(observer);
-  }
-  #observeWith(observer) {
-    observer.observe(this.element, {
+    this.#observer.observe(this.element, {
       subtree: true,
       childList: true,
-      attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES
+      attributes: OBSERVED_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 [radio, written] of this.#ownedChecked) {
+      const current = radio.getAttribute("aria-checked");
+      if (current !== null && current !== written) this.#ownedChecked.delete(radio);
+    }
+    for (const radio of this.#managedRadios) {
+      const written = this.#writtenTabindex.get(radio);
+      const current = radio.getAttribute("tabindex");
+      if (current !== written) this.#originalTabindex.set(radio, current);
     }
   }
   get #managedTargets() {
@@ -621,23 +700,31 @@ var RadioGroupController = class extends Controller {
   }
   #setChecked(radio, checked) {
     const value = checked ? "true" : "false";
-    if (radio.getAttribute("aria-checked") === value) return;
-    this.#markInternal(this.#internalCheckedValues, radio, value);
-    radio.setAttribute("aria-checked", value);
+    if (this.#ownedChecked.has(radio)) this.#ownedChecked.set(radio, value);
+    this.#writeAttribute(radio, "aria-checked", value);
   }
   #writeTabindex(radio, value) {
     const serialized = String(value);
-    this.#markInternal(this.#internalTabindexValues, radio, serialized);
-    radio.tabIndex = value;
+    this.#writtenTabindex.set(radio, serialized);
+    this.#writeAttribute(radio, "tabindex", serialized);
+  }
+  #writeAttribute(target, name, value) {
+    setAttributeIfChanged(target, name, value, () => this.#observer.claim(target, name, value));
   }
   #reflectField(radio) {
-    if (!this.hasFieldTarget) return;
     const value = radio ? this.#radioValue(radio) : "";
-    writeField(this.fieldTarget, value);
+    this.#writeField(value);
   }
   #radioValue(radio) {
     return radio.getAttribute("data-value") ?? "";
   }
+  #writeField(value) {
+    if (!this.hasFieldTarget) return false;
+    const changed = writeField(this.fieldTarget, value);
+    if (changed && this.fieldTarget.type === "hidden")
+      this.#observer.claimCurrent(this.fieldTarget, "value");
+    return changed;
+  }
 };
 
 export { RadioGroupController };