@unabridged/midwest 0.15.1 → 0.16.1

package/app/assets/javascript/midwest/index.ts

@@ -17,6 +17,7 @@ import AvatarGroup from '../../../components/midwest/avatar_group_component/avat
 import Chart from '../../../components/midwest/chart_component/chart_component_controller'
 import Range from '../../../components/midwest/form/range_component/range_component_controller'
 import Rating from '../../../components/midwest/rating_component/rating_component_controller'
+import Autocomplete from '../../../components/midwest/form/autocomplete_component/autocomplete_component_controller'
 /* IMPORTS */
 
 export { Card, Banner, CountdownTimer, Chart }
@@ -41,5 +42,6 @@ export function registerMidwestControllers (application: any) {
   application.register('midwest-chart', Chart)
   application.register('midwest-range', Range)
   application.register('midwest-rating', Rating)
+  application.register('midwest-autocomplete', Autocomplete)
   /* EXPORTS */
 }

package/app/assets/javascript/midwest.js

@@ -549,17 +549,23 @@ class Banner extends Controller {
 }
 
 class Input extends Controller {
-  static targets = ["input"];
+  static targets = ["input", "counter"];
   updateClearButton = null;
+  updateCounter = null;
   connect() {
     this.applyColor();
     this.applySearchClear();
+    this.applyCounter();
   }
   disconnect() {
     if (this.updateClearButton) {
       this.inputTarget.removeEventListener("input", this.updateClearButton);
       this.updateClearButton = null;
     }
+    if (this.updateCounter) {
+      this.inputTarget.removeEventListener("input", this.updateCounter);
+      this.updateCounter = null;
+    }
   }
   applyColor() {
     if (this.inputTarget.type !== "color") {
@@ -569,6 +575,15 @@ class Input extends Controller {
       this.inputTarget.setAttribute("value", this.inputTarget.value);
     });
   }
+  applyCounter() {
+    if (!this.hasCounterTarget)
+      return;
+    this.counterTarget.textContent = String(this.inputTarget.value.length);
+    this.updateCounter = () => {
+      this.counterTarget.textContent = String(this.inputTarget.value.length);
+    };
+    this.inputTarget.addEventListener("input", this.updateCounter);
+  }
   applySearchClear() {
     if (this.inputTarget.type !== "search")
       return;
@@ -3450,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");
@@ -3536,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,
@@ -3804,6 +3831,352 @@ class Rating extends Controller {
   }
 }
 
+class Autocomplete extends Controller {
+  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 },
+    turboFrameUrl: { type: String, default: "" }
+  };
+  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.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 ──────────────────────────────────────────────────────────
+  focusInput() {
+    this.inputTarget.focus();
+    this.open();
+  }
+  open() {
+    if (this.dropdownTarget.matches(":popover-open"))
+      return;
+    clearTimeout(this.searchTimer);
+    this.resolve(this.inputTarget.value.trim());
+  }
+  search() {
+    const query = this.inputTarget.value.trim();
+    if (!this.hasTurboListTarget && !this.urlValue) {
+      this.renderOptions(this.filteredOptions(query));
+      return;
+    }
+    clearTimeout(this.searchTimer);
+    this.searchTimer = window.setTimeout(() => {
+      this.searchTimer = void 0;
+      this.resolve(query);
+    }, 200);
+  }
+  navigate(event) {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        if (!this.dropdownTarget.matches(":popover-open"))
+          this.open();
+        const items = this.visibleOptions();
+        this.highlightedIndex = Math.min(this.highlightedIndex + 1, items.length - 1);
+        this.syncHighlight(items);
+        break;
+      }
+      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);
+        break;
+      }
+      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]);
+        }
+        break;
+      }
+      case "Escape":
+        this.hideDropdown();
+        break;
+      case "Backspace":
+        if (this.inputTarget.value === "" && this.multipleValue) {
+          const tokens = this.tokensTarget.querySelectorAll("[data-value]");
+          const last = tokens[tokens.length - 1];
+          if (last?.dataset.value)
+            this.deselect(last.dataset.value);
+        }
+        break;
+    }
+  }
+  removeToken(event) {
+    event.stopPropagation();
+    const btn = event.currentTarget;
+    const value = btn.dataset.value;
+    if (value)
+      this.deselect(value);
+  }
+  // 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, "-")}`;
+  }
+  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();
+    return this.optionsValue.filter(
+      (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.listTarget.replaceChildren();
+    this.loading = true;
+    this.announce("Loading");
+    this.showDropdown();
+    try {
+      const url = new URL(this.urlValue, window.location.href);
+      if (query)
+        url.searchParams.set("q", query);
+      const res = await globalThis.fetch(url.toString(), {
+        signal: this.fetchAbort.signal,
+        headers: { Accept: "application/json" }
+      });
+      const data = await res.json();
+      this.renderOptions(data);
+    } catch (err) {
+      if (err.name !== "AbortError") {
+        this.renderEmpty();
+      }
+    }
+  }
+  select(option) {
+    this.appendToken(option);
+    this.hideDropdown();
+    this.inputTarget.value = "";
+    this.inputTarget.focus();
+    this.announce(`${option.label} selected`);
+    this.dispatch("change", { detail: { value: option.value, label: option.label } });
+  }
+  deselect(value) {
+    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) {
+    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 removeBtn = badge.querySelector(".remove");
+      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);
+  }
+  renderOptions(options) {
+    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.isSelected(option.value) ? "true" : "false");
+      li.dataset.value = option.value;
+      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.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") {
+    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();
+  }
+  set loading(on) {
+    if (this.hasLoaderTarget)
+      this.loaderTarget.hidden = !on;
+  }
+  showDropdown() {
+    if (!this.dropdownTarget.matches(":popover-open"))
+      this.dropdownTarget.showPopover();
+  }
+  hideDropdown() {
+    if (this.dropdownTarget.matches(":popover-open"))
+      this.dropdownTarget.hidePopover();
+  }
+  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?.id) {
+      this.inputTarget.setAttribute("aria-activedescendant", active.id);
+    } else {
+      this.inputTarget.removeAttribute("aria-activedescendant");
+    }
+  }
+  pickItem(item) {
+    const value = item.dataset.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 });
+  }
+  announce(message) {
+    if (this.hasStatusTarget)
+      this.statusTarget.textContent = message;
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -3824,6 +4197,7 @@ function registerMidwestControllers(application) {
   application.register("midwest-chart", Chart);
   application.register("midwest-range", Range);
   application.register("midwest-rating", Rating);
+  application.register("midwest-autocomplete", Autocomplete);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };