@unabridged/midwest 0.16.0 → 0.16.1

package/app/assets/javascript/midwest.js

@@ -3465,10 +3465,12 @@ class FormLiveSummary extends Controller {
     this.render();
     this.form?.addEventListener("input", this.render);
     this.form?.addEventListener("change", this.render);
+    this.form?.addEventListener("midwest-autocomplete:change", this.render);
   }
   disconnect() {
     this.form?.removeEventListener("input", this.render);
     this.form?.removeEventListener("change", this.render);
+    this.form?.removeEventListener("midwest-autocomplete:change", this.render);
   }
   get form() {
     return this.element.closest("form");
@@ -3551,6 +3553,16 @@ class FormLiveSummary extends Controller {
         value: element.value
       });
     });
+    form.querySelectorAll(".midwest-autocomplete").forEach((ac) => {
+      if (this.element.contains(ac))
+        return;
+      if (!ac.querySelector('[role="combobox"]'))
+        return;
+      const labelEl = ac.querySelector("label");
+      const label = labelEl?.textContent?.trim() || this.prettifyName((ac.dataset.name ?? "").replace(/\[.*\]$/, ""));
+      const selected = Array.from(ac.querySelectorAll(".midwest-autocomplete-tokens .value")).map((el) => el.textContent?.trim()).filter(Boolean).join(", ");
+      fields.push({ label, value: selected || "\u2014" });
+    });
     return fields;
   }
   // Finds the label associated with a specific element via `for` attribute,
@@ -3820,22 +3832,75 @@ class Rating extends Controller {
 }
 
 class Autocomplete extends Controller {
-  static targets = ["input", "dropdown", "list", "tokens", "token", "multipleTokenTemplate", "singleTokenTemplate", "status"];
+  static targets = ["input", "dropdown", "list", "tokens", "multipleTokenTemplate", "singleTokenTemplate", "status", "turboList", "loader"];
   static values = {
     options: { type: Array, default: [] },
     url: { type: String, default: "" },
-    multiple: { type: Boolean, default: true }
+    multiple: { type: Boolean, default: true },
+    turboFrameUrl: { type: String, default: "" }
   };
-  selectedValues = /* @__PURE__ */ new Map();
   highlightedIndex = -1;
   fetchAbort = null;
+  searchTimer;
+  // ── Named handlers ─────────────────────────────────────────────────────────
+  // Arrow-function class properties preserve `this` and produce a stable
+  // reference so addEventListener/removeEventListener pairs always match.
+  onFrameLoad = () => {
+    this.syncSelectedState();
+    this.loading = false;
+    this.showDropdown();
+  };
+  onToggle = (e) => {
+    const opened = e.newState === "open";
+    this.inputTarget.setAttribute("aria-expanded", String(opened));
+    if (!opened) {
+      this.inputTarget.removeAttribute("aria-activedescendant");
+      this.highlightedIndex = -1;
+    }
+  };
+  onFocusOut = (e) => {
+    if (!this.element.contains(e.relatedTarget)) {
+      this.hideDropdown();
+    }
+  };
+  onListMouseDown = (e) => {
+    const option = e.target.closest(".midwest-autocomplete-option");
+    if (option) {
+      e.preventDefault();
+      this.pickItem(option);
+    }
+  };
+  // ── Lifecycle ───────────────────────────────────────────────────────────────
   connect() {
-    this.loadInitialTokens();
+    this.element.addEventListener("focusout", this.onFocusOut);
   }
   disconnect() {
     this.fetchAbort?.abort();
+    clearTimeout(this.searchTimer);
+    this.element.removeEventListener("focusout", this.onFocusOut);
+  }
+  // Target callbacks — Stimulus calls these automatically when targets connect
+  // or disconnect, including after the initial connect(). This replaces manual
+  // hasTurboListTarget guards and addEventListener calls inside connect().
+  dropdownTargetConnected(el) {
+    el.addEventListener("toggle", this.onToggle);
+  }
+  dropdownTargetDisconnected(el) {
+    el.removeEventListener("toggle", this.onToggle);
+  }
+  listTargetConnected(el) {
+    el.addEventListener("mousedown", this.onListMouseDown);
+  }
+  listTargetDisconnected(el) {
+    el.removeEventListener("mousedown", this.onListMouseDown);
+  }
+  turboListTargetConnected(el) {
+    el.addEventListener("turbo:frame-load", this.onFrameLoad);
+  }
+  turboListTargetDisconnected(el) {
+    el.removeEventListener("turbo:frame-load", this.onFrameLoad);
   }
-  // ── Public actions ─────────────────────────────────────────────────────────
+  // ── Public actions ──────────────────────────────────────────────────────────
   focusInput() {
     this.inputTarget.focus();
     this.open();
@@ -3843,21 +3908,20 @@ class Autocomplete extends Controller {
   open() {
     if (this.dropdownTarget.matches(":popover-open"))
       return;
-    const query = this.inputTarget.value.trim();
-    if (this.urlValue) {
-      this.fetch(query);
-    } else {
-      this.renderOptions(this.filteredOptions(query));
-    }
+    clearTimeout(this.searchTimer);
+    this.resolve(this.inputTarget.value.trim());
   }
-  async search() {
+  search() {
     const query = this.inputTarget.value.trim();
-    if (this.urlValue) {
-      await this.fetch(query);
-    } else {
+    if (!this.hasTurboListTarget && !this.urlValue) {
       this.renderOptions(this.filteredOptions(query));
+      return;
     }
-    this.showDropdown();
+    clearTimeout(this.searchTimer);
+    this.searchTimer = window.setTimeout(() => {
+      this.searchTimer = void 0;
+      this.resolve(query);
+    }, 200);
   }
   navigate(event) {
     switch (event.key) {
@@ -3872,6 +3936,8 @@ class Autocomplete extends Controller {
       }
       case "ArrowUp": {
         event.preventDefault();
+        if (!this.dropdownTarget.matches(":popover-open"))
+          break;
         const items = this.visibleOptions();
         this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
         this.syncHighlight(items);
@@ -3879,6 +3945,8 @@ class Autocomplete extends Controller {
       }
       case "Enter": {
         event.preventDefault();
+        if (!this.dropdownTarget.matches(":popover-open"))
+          break;
         const items = this.visibleOptions();
         if (this.highlightedIndex >= 0 && items[this.highlightedIndex]) {
           this.pickItem(items[this.highlightedIndex]);
@@ -3890,19 +3958,14 @@ class Autocomplete extends Controller {
         break;
       case "Backspace":
         if (this.inputTarget.value === "" && this.multipleValue) {
-          const entries = Array.from(this.selectedValues.keys());
-          if (entries.length > 0)
-            this.deselect(entries[entries.length - 1]);
+          const tokens = this.tokensTarget.querySelectorAll("[data-value]");
+          const last = tokens[tokens.length - 1];
+          if (last?.dataset.value)
+            this.deselect(last.dataset.value);
         }
         break;
     }
   }
-  visibleOptions() {
-    return this.listTarget.querySelectorAll('.midwest-autocomplete-option:not([aria-selected="true"])');
-  }
-  handleBlur() {
-    setTimeout(() => this.hideDropdown(), 150);
-  }
   removeToken(event) {
     event.stopPropagation();
     const btn = event.currentTarget;
@@ -3910,16 +3973,31 @@ class Autocomplete extends Controller {
     if (value)
       this.deselect(value);
   }
-  // ── Private ────────────────────────────────────────────────────────────────
+  // Public action used by turbo-frame option items via data-action.
+  // Each server-rendered <li> should have:
+  //   data-action="mousedown->midwest-autocomplete#selectOption"
+  selectOption(event) {
+    event.preventDefault();
+    this.pickItem(event.currentTarget);
+  }
+  // ── Private ─────────────────────────────────────────────────────────────────
   get optionIdPrefix() {
     return `ac-opt-${(this.element.dataset.name ?? "field").replace(/\W/g, "-")}`;
   }
-  loadInitialTokens() {
-    this.tokenTargets.forEach((token) => {
-      const value = token.dataset.value ?? "";
-      const label = token.querySelector(".value")?.textContent?.trim() ?? value;
-      this.selectedValues.set(value, { value, label });
-    });
+  isSelected(value) {
+    return !!this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
+  }
+  // Routes to the correct data source. Shared by open() and the debounced search path.
+  resolve(query) {
+    if (this.hasTurboListTarget) {
+      this.navigateFrame(query);
+      return;
+    }
+    if (this.urlValue) {
+      this.fetch(query);
+      return;
+    }
+    this.renderOptions(this.filteredOptions(query));
   }
   filteredOptions(query) {
     const q = query.toLowerCase();
@@ -3927,10 +4005,36 @@ class Autocomplete extends Controller {
       (o) => q === "" || o.label.toLowerCase().includes(q) || (o.support?.toLowerCase().includes(q) ?? false)
     );
   }
+  navigateFrame(query) {
+    const url = new URL(this.turboFrameUrlValue, window.location.href);
+    if (query)
+      url.searchParams.set("q", query);
+    this.tokensTarget.querySelectorAll("input[type=hidden]").forEach((input) => {
+      url.searchParams.append("selected[]", input.value);
+    });
+    this.loading = true;
+    this.turboListTarget.setAttribute("src", url.toString());
+    this.showDropdown();
+  }
+  // After a turbo frame loads, mark already-selected items and update the live region.
+  // The empty state element is always present in the frame and CSS shows/hides it
+  // based on whether any non-selected options exist.
+  syncSelectedState() {
+    const options = this.turboListTarget.querySelectorAll(".midwest-autocomplete-option");
+    options.forEach((option) => {
+      const val = option.dataset.value ?? "";
+      option.setAttribute("aria-selected", this.isSelected(val) ? "true" : "false");
+    });
+    const visibleCount = this.visibleOptions().length;
+    this.announce(visibleCount > 0 ? `${visibleCount} option${visibleCount === 1 ? "" : "s"} available` : "No more options");
+  }
   async fetch(query) {
     this.fetchAbort?.abort();
     this.fetchAbort = new AbortController();
-    this.showLoading();
+    this.listTarget.replaceChildren();
+    this.loading = true;
+    this.announce("Loading");
+    this.showDropdown();
     try {
       const url = new URL(this.urlValue, window.location.href);
       if (query)
@@ -3948,11 +4052,6 @@ class Autocomplete extends Controller {
     }
   }
   select(option) {
-    if (!this.multipleValue) {
-      this.selectedValues.forEach((_, val) => this.removeTokenElement(val));
-      this.selectedValues.clear();
-    }
-    this.selectedValues.set(option.value, option);
     this.appendToken(option);
     this.hideDropdown();
     this.inputTarget.value = "";
@@ -3961,102 +4060,106 @@ class Autocomplete extends Controller {
     this.dispatch("change", { detail: { value: option.value, label: option.label } });
   }
   deselect(value) {
-    const option = this.selectedValues.get(value);
-    this.selectedValues.delete(value);
-    this.removeTokenElement(value);
-    if (option)
-      this.announce(`${option.label} removed`);
+    const token = this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
+    const label = token?.querySelector(".value")?.textContent?.trim();
+    token?.remove();
+    if (label)
+      this.announce(`${label} removed`);
     this.dispatch("change", { detail: { value: null } });
   }
   appendToken(option) {
-    const name = this.element.dataset.name ?? "";
+    if (!this.multipleValue) {
+      this.tokensTarget.querySelectorAll("[data-value]").forEach((el) => el.remove());
+    }
+    const template = this.multipleValue ? this.multipleTokenTemplateTarget : this.singleTokenTemplateTarget;
+    const fragment = template.content.cloneNode(true);
+    const badge = fragment.querySelector(".midwest-badge");
+    if (!badge)
+      return;
+    badge.dataset.value = option.value;
+    const valueEl = badge.querySelector(".value");
+    if (valueEl)
+      valueEl.textContent = option.label;
     if (this.multipleValue) {
-      const fragment = this.multipleTokenTemplateTarget.content.cloneNode(true);
-      const badge = fragment.querySelector(".midwest-badge");
-      badge.dataset.value = option.value;
-      badge.querySelector(".value").textContent = option.label;
       const removeBtn = badge.querySelector(".remove");
-      removeBtn.dataset.value = option.value;
-      removeBtn.setAttribute("aria-label", `Remove ${option.label}`);
-      const input = badge.querySelector("input[type=hidden]");
-      input.name = name;
-      input.value = option.value;
-      this.tokensTarget.appendChild(fragment);
-    } else {
-      this.tokensTarget.querySelectorAll("[data-value]").forEach((el) => el.remove());
-      const fragment = this.singleTokenTemplateTarget.content.cloneNode(true);
-      const badge = fragment.querySelector(".midwest-badge");
-      badge.dataset.value = option.value;
-      badge.querySelector(".value").textContent = option.label;
-      const input = badge.querySelector("input[type=hidden]");
-      input.name = name;
+      if (removeBtn) {
+        removeBtn.dataset.value = option.value;
+        removeBtn.setAttribute("aria-label", `Remove ${option.label}`);
+      }
+    }
+    const input = badge.querySelector("input[type=hidden]");
+    if (input) {
+      input.name = this.element.dataset.name ?? "";
       input.value = option.value;
-      this.tokensTarget.appendChild(fragment);
     }
-  }
-  removeTokenElement(value) {
-    const token = this.tokensTarget.querySelector(`[data-value="${CSS.escape(value)}"]`);
-    token?.remove();
+    this.tokensTarget.appendChild(fragment);
   }
   renderOptions(options) {
-    this.listTarget.innerHTML = "";
     this.highlightedIndex = -1;
     if (options.length === 0) {
       this.renderEmpty();
       return;
     }
+    this.listTarget.replaceChildren();
     options.forEach((option, index) => {
       const li = document.createElement("li");
       li.id = `${this.optionIdPrefix}-${index}`;
       li.className = "midwest-autocomplete-option";
       li.setAttribute("role", "option");
-      li.setAttribute("aria-selected", this.selectedValues.has(option.value) ? "true" : "false");
+      li.setAttribute("aria-selected", this.isSelected(option.value) ? "true" : "false");
       li.dataset.value = option.value;
-      li.innerHTML = `
-        <span class="midwest-autocomplete-option-label">${this.escapeHtml(option.label)}</span>
-        ${option.support ? `<span class="midwest-autocomplete-option-support">${this.escapeHtml(option.support)}</span>` : ""}
-      `;
-      li.addEventListener("mousedown", (e) => {
-        e.preventDefault();
-        this.select(option);
-      });
+      const label = document.createElement("span");
+      label.className = "midwest-autocomplete-option-label";
+      label.textContent = option.label;
+      li.appendChild(label);
+      if (option.support) {
+        const support = document.createElement("span");
+        support.className = "midwest-autocomplete-option-support";
+        support.textContent = option.support;
+        li.appendChild(support);
+      }
       this.listTarget.appendChild(li);
     });
-    const availableCount = options.filter((o) => !this.selectedValues.has(o.value)).length;
+    const availableCount = options.filter((o) => !this.isSelected(o.value)).length;
     if (availableCount === 0) {
       this.renderEmpty("No more options");
       return;
     }
+    this.loading = false;
     this.announce(`${availableCount} option${availableCount === 1 ? "" : "s"} available`);
     this.showDropdown();
   }
   renderEmpty(message = "No results") {
-    this.listTarget.innerHTML = `<li class="midwest-autocomplete-empty" aria-hidden="true">${this.escapeHtml(message)}</li>`;
+    const li = document.createElement("li");
+    li.className = "midwest-autocomplete-empty";
+    li.setAttribute("aria-hidden", "true");
+    li.textContent = message;
+    this.listTarget.replaceChildren(li);
+    this.loading = false;
     this.announce(message);
     this.showDropdown();
   }
-  showLoading() {
-    this.listTarget.innerHTML = '<li class="midwest-autocomplete-loading" aria-hidden="true">Loading\u2026</li>';
-    this.announce("Loading");
-    this.showDropdown();
+  set loading(on) {
+    if (this.hasLoaderTarget)
+      this.loaderTarget.hidden = !on;
   }
   showDropdown() {
     if (!this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.showPopover();
-    this.inputTarget.setAttribute("aria-expanded", "true");
   }
   hideDropdown() {
     if (this.dropdownTarget.matches(":popover-open"))
       this.dropdownTarget.hidePopover();
-    this.inputTarget.setAttribute("aria-expanded", "false");
-    this.inputTarget.removeAttribute("aria-activedescendant");
-    this.highlightedIndex = -1;
+  }
+  visibleOptions() {
+    const container = this.hasTurboListTarget ? this.turboListTarget : this.listTarget;
+    return container.querySelectorAll('.midwest-autocomplete-option:not([aria-selected="true"])');
   }
   syncHighlight(items) {
     items.forEach((item, i) => item.classList.toggle("is-highlighted", i === this.highlightedIndex));
     const active = items[this.highlightedIndex];
     active?.scrollIntoView({ block: "nearest" });
-    if (active) {
+    if (active?.id) {
       this.inputTarget.setAttribute("aria-activedescendant", active.id);
     } else {
       this.inputTarget.removeAttribute("aria-activedescendant");
@@ -4064,7 +4167,7 @@ class Autocomplete extends Controller {
   }
   pickItem(item) {
     const value = item.dataset.value ?? "";
-    const label = item.querySelector(".midwest-autocomplete-option-label")?.textContent?.trim() ?? value;
+    const label = item.dataset.label?.trim() || item.querySelector(".midwest-autocomplete-option-label")?.textContent?.trim() || value;
     const support = item.querySelector(".midwest-autocomplete-option-support")?.textContent?.trim();
     this.select({ value, label, support });
   }
@@ -4072,9 +4175,6 @@ class Autocomplete extends Controller {
     if (this.hasStatusTarget)
       this.statusTarget.textContent = message;
   }
-  escapeHtml(str) {
-    return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
-  }
 }
 
 function registerMidwestControllers(application) {