stimeo-ui 0.17.0 → 0.18.0

package/dist/controllers/conditional_fields_controller.js

@@ -1,5 +1,103 @@
 import { Controller } from '@hotwired/stimulus';
 
+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;
   return candidates.findIndex((candidate) => candidate.contains(node));
@@ -32,6 +130,11 @@ function canTakeFocus(element) {
   if (element.disabled) return false;
   return !inheritsFieldsetDisabled(element);
 }
+function deepActiveElement(ownerDocument) {
+  let active = ownerDocument.activeElement;
+  while (active?.shadowRoot?.activeElement) active = active.shadowRoot.activeElement;
+  return active;
+}
 
 var FormResetWatcher = class {
   #owns;
@@ -100,6 +203,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;
@@ -130,6 +236,9 @@ var MorphRenderWatcher = class {
   schedule() {
     this.#pass.schedule();
   }
+  get pending() {
+    return this.#pass.pending;
+  }
   disconnect() {
     this.#listeners.dispose();
     this.#pass.cancel();
@@ -163,6 +272,9 @@ function sharedRegistry(key, create) {
   return registry;
 }
 
+function holdsFocus(element) {
+  return element.matches(":focus") || deepActiveElement(element.ownerDocument) === element;
+}
 var TabindexLoan = class _TabindexLoan {
   static #registry = sharedRegistry(
     "stimeo-ui.tabindex-loan.registry.v1",
@@ -170,19 +282,22 @@ var TabindexLoan = class _TabindexLoan {
   );
   #value;
   #record;
+  #preserveFocus;
   #lent = /* @__PURE__ */ new Set();
-  constructor(value, owner) {
+  constructor(value, owner, options = {}) {
     this.#value = value;
     this.#record = `data-${owner}-tabindex-loan`;
+    this.#preserveFocus = options.preserveFocus === true;
     _TabindexLoan.#registry.names.add(this.#record);
   }
-  lend(element) {
+  lend(element, options = {}) {
     const stack = this.#stack(element);
     const current = element.getAttribute("tabindex");
     const held = stack.find((hold) => hold.loan === this) ?? stack.find(
       (hold) => hold.loan === null && hold.record === this.#record && hold.value === this.#value
     );
     const linked = stack.at(-1)?.value === current;
+    if (!held && options.onlyIfUnfocusable && (current !== null || element.tabIndex >= 0)) return;
     if (!held && current !== null && !linked) return;
     this.#lent.add(element);
     if (held) held.loan = this;
@@ -192,19 +307,28 @@ var TabindexLoan = class _TabindexLoan {
       element.setAttribute("tabindex", this.#value);
     }
   }
-  returnAll() {
-    for (const element of this.#lent) {
-      const stack = this.#stack(element);
-      const hold = stack.find((held) => held.loan === this);
-      if (hold) this.#release(element, stack, hold);
+  return(element) {
+    const stack = this.#stack(element);
+    const hold = stack.find((held) => held.loan === this) ?? stack.find(
+      (held) => held.loan === null && held.record === this.#record && held.value === this.#value
+    );
+    if (!hold) return false;
+    if (!this.#release(element, stack, hold, this.#preserveFocus)) {
+      hold.loan = this;
+      this.#lent.add(element);
+      return false;
     }
-    this.#lent.clear();
+    this.#lent.delete(element);
+    return true;
+  }
+  returnAll() {
+    for (const element of Array.from(this.#lent)) this.return(element);
   }
   reclaim(element) {
     if (element.getAttribute(this.#record) !== this.#value) return;
     const stack = this.#stack(element);
     const hold = stack.find((held) => held.loan === null && held.record === this.#record);
-    if (hold && !element.matches(":focus")) this.#release(element, stack, hold);
+    if (hold && !holdsFocus(element)) this.#release(element, stack, hold);
   }
   reclaimWithin(root) {
     for (const element of queryOpenDescendants(root, `[${this.#record}]`)) {
@@ -228,26 +352,26 @@ var TabindexLoan = class _TabindexLoan {
     for (const [index, hold] of holds.entries()) hold.linked = index > 0;
     return holds;
   }
-  #release(element, stack, hold) {
+  #release(element, stack, hold, preserveFocus = false) {
     const current = element.getAttribute("tabindex");
     const index = stack.indexOf(hold);
     const owns = current === hold.value && !stack.slice(index + 1).some((above2) => above2.value === current);
+    if (owns && preserveFocus && holdsFocus(element)) return false;
     stack.splice(index, 1);
     const above = stack[index];
     if (above) above.linked &&= hold.linked;
     this.#mark(element, stack);
-    if (!owns) return;
+    if (!owns) return true;
     const below = hold.linked ? stack[index - 1] : void 0;
     if (!below) element.removeAttribute("tabindex");
     else if (below.value !== current) element.setAttribute("tabindex", below.value);
+    return true;
   }
   #mark(element, stack) {
     const records = /* @__PURE__ */ new Map([[this.#record, null]]);
     for (const hold of stack) records.set(hold.record, hold.value);
     for (const [name, recorded] of records) {
-      if (element.getAttribute(name) === recorded) continue;
-      if (recorded === null) element.removeAttribute(name);
-      else element.setAttribute(name, recorded);
+      setAttributeIfChanged(element, name, recorded);
     }
   }
 };
@@ -277,8 +401,6 @@ var ConditionalFieldsController = class extends Controller {
   static actions = ["evaluate"];
   static events = ["change", "reconcile"];
   #lastVisible = /* @__PURE__ */ new WeakMap();
-  #internalWrites = /* @__PURE__ */ new WeakMap();
-  #observing = false;
   #departed = /* @__PURE__ */ new Set();
   #concealed = /* @__PURE__ */ new WeakSet();
   #reconcile = new MorphRenderWatcher(() => this.#reconcileDom());
@@ -288,7 +410,7 @@ var ConditionalFieldsController = class extends Controller {
     () => this.#reconcile.schedule()
   );
   #rootTabindex = new TabindexLoan("-1", this.identifier);
-  #observer = new MutationObserver((records) => this.#onMutations(records));
+  #observer = new AuthoredMutationWatcher((records) => this.#onMutations(records));
   #onTriggerInput = (event) => {
     const target = event.target;
     const triggers = this.triggerTargets;
@@ -299,23 +421,19 @@ var ConditionalFieldsController = class extends Controller {
   connect() {
     this.#rootTabindex.reclaim(this.element);
     this.#lastVisible = /* @__PURE__ */ new WeakMap();
-    this.#internalWrites = /* @__PURE__ */ new WeakMap();
     this.#settle();
     this.#reconcile.observe(this.element);
     this.#observer.observe(this.element, {
-      attributes: true,
-      attributeFilter: OBSERVED_ATTRIBUTES,
+      attributes: OBSERVED_ATTRIBUTES,
       childList: true,
       subtree: true
     });
-    this.#observing = true;
     this.#listeners.add(this.element, "change", this.#onTriggerInput);
     this.#listeners.add(this.element, "input", this.#onTriggerInput);
     this.#formReset.observe();
   }
   disconnect() {
     this.#reconcile.disconnect();
-    this.#observing = false;
     this.#observer.disconnect();
     this.#listeners.dispose();
     this.#formReset.disconnect();
@@ -468,47 +586,16 @@ var ConditionalFieldsController = class extends Controller {
     return [...plan].every(([region, visible]) => visible || !region.contains(candidate));
   }
   #writeAttribute(element, name, value) {
-    if (element.getAttribute(name) !== value) {
-      if (this.#observing) {
-        let writes = this.#internalWrites.get(element);
-        if (!writes) {
-          writes = /* @__PURE__ */ new Map();
-          this.#internalWrites.set(element, writes);
-        }
-        writes.set(name, value);
-      }
-      if (value === null) element.removeAttribute(name);
-      else element.setAttribute(name, value);
-    }
+    setAttributeIfChanged(element, name, value, () => this.#observer.claim(element, name, value));
   }
   #onMutations(records) {
     const triggers = this.triggerTargets;
     const regions = this.regionTargets;
-    const touchedWrites = /* @__PURE__ */ new Map();
-    let needsReconcile = false;
-    for (const record of records) {
-      if (record.type === "attributes" && record.target instanceof Element) {
-        const name = record.attributeName;
-        const writes = this.#internalWrites.get(record.target);
-        if (name && writes?.has(name)) {
-          let names = touchedWrites.get(record.target);
-          if (!names) {
-            names = /* @__PURE__ */ new Set();
-            touchedWrites.set(record.target, names);
-          }
-          names.add(name);
-          if (record.target.getAttribute(name) === writes.get(name)) continue;
-        }
-      }
-      if (record.target instanceof Element && this.#elementAffectsState(record.target, triggers, regions)) {
-        needsReconcile = true;
-      }
-    }
-    for (const [element, names] of touchedWrites) {
-      const writes = this.#internalWrites.get(element);
-      for (const name of names) writes?.delete(name);
+    if (records.some(
+      (record) => record.target instanceof Element && this.#elementAffectsState(record.target, triggers, regions)
+    )) {
+      this.#reconcile.schedule();
     }
-    if (needsReconcile) this.#reconcile.schedule();
   }
   #elementAffectsState(target, triggers, regions) {
     return ownerIndex(triggers, target) !== -1 || ownerIndex(regions, target) !== -1;