@unabridged/midwest 0.19.2 → 0.20.1

package/app/assets/javascript/midwest.js

@@ -3244,8 +3244,12 @@ class FormLiveSummary extends Controller {
         return;
       if (this.element.contains(element))
         return;
+      if (element.closest("fieldset.midwest-show-if[hidden]"))
+        return;
       if (element instanceof HTMLButtonElement)
         return;
+      if (element.closest(".midwest-tree-view"))
+        return;
       if (element instanceof HTMLInputElement) {
         if (SKIPPED_INPUT_TYPES.has(element.type))
           return;
@@ -3306,6 +3310,26 @@ class FormLiveSummary extends Controller {
       const selected = Array.from(ac.querySelectorAll(".midwest-autocomplete-tokens .value")).map((el) => el.textContent?.trim()).filter(Boolean).join(", ");
       fields.push({ label, value: selected || "\u2014" });
     });
+    const seenTreeNames = /* @__PURE__ */ new Set();
+    form.querySelectorAll(".midwest-tree-view").forEach((tree) => {
+      if (this.element.contains(tree))
+        return;
+      const checked = Array.from(
+        tree.querySelectorAll(".tree-node-checkbox:checked")
+      );
+      const firstName = checked[0]?.name || tree.querySelectorAll(".tree-node-checkbox")[0]?.name;
+      if (!firstName)
+        return;
+      if (seenTreeNames.has(firstName))
+        return;
+      seenTreeNames.add(firstName);
+      const label = this.prettifyName(firstName.replace(/\[\]$/, ""));
+      const values = checked.map((cb) => {
+        const nodeLabel = cb.closest(".midwest-tree-node")?.querySelector(":scope > .tree-node-trigger > .tree-node-label");
+        return nodeLabel?.textContent?.trim() || cb.value;
+      });
+      fields.push({ label, value: values.join(", ") || "\u2014" });
+    });
     return fields;
   }
   // Builds a small inline colour swatch to display alongside a colour value.
@@ -4925,6 +4949,635 @@ class Pagination extends Controller {
   }
 }
 
+class ShowIf extends Controller {
+  static values = {
+    watch: { type: String, default: "" },
+    is: { type: String, default: "" },
+    negate: { type: Boolean, default: false }
+  };
+  sourceElement = null;
+  listenedElements = [];
+  changeListener = null;
+  connect() {
+    if (!this.watchValue)
+      return;
+    this.sourceElement = document.querySelector(this.watchValue);
+    if (!this.sourceElement)
+      return;
+    this.changeListener = () => this.evaluate();
+    if (this.sourceElement instanceof HTMLInputElement && this.sourceElement.type === "radio") {
+      const radios = document.querySelectorAll(
+        `input[type="radio"][name="${this.sourceElement.name}"]`
+      );
+      const listener = this.changeListener;
+      radios.forEach((radio) => {
+        radio.addEventListener("change", listener);
+        this.listenedElements.push(radio);
+      });
+    } else {
+      this.sourceElement.addEventListener("input", this.changeListener);
+      this.sourceElement.addEventListener("change", this.changeListener);
+      this.listenedElements.push(this.sourceElement);
+    }
+    this.evaluate();
+  }
+  disconnect() {
+    if (this.changeListener) {
+      for (const el of this.listenedElements) {
+        el.removeEventListener("input", this.changeListener);
+        el.removeEventListener("change", this.changeListener);
+      }
+    }
+    this.changeListener = null;
+    this.sourceElement = null;
+    this.listenedElements = [];
+  }
+  evaluate() {
+    const el = this.sourceElement;
+    if (!el)
+      return;
+    const currentValue = this.readValue(el);
+    const match = currentValue === this.isValue;
+    const visible = this.negateValue ? !match : match;
+    this.element.toggleAttribute("hidden", !visible);
+    this.element.toggleAttribute("disabled", !visible);
+  }
+  readValue(el) {
+    if (el instanceof HTMLInputElement) {
+      if (el.type === "radio") {
+        const checked = document.querySelector(
+          `input[name="${el.name}"]:checked`
+        );
+        return checked ? checked.value : "";
+      }
+      if (el.type === "checkbox") {
+        return el.checked ? el.value || "true" : "";
+      }
+      return el.value;
+    }
+    if (el instanceof HTMLSelectElement) {
+      return el.value;
+    }
+    if (el instanceof HTMLTextAreaElement) {
+      return el.value;
+    }
+    return el.getAttribute("value") ?? "";
+  }
+}
+
+class TreeView extends Controller {
+  // ── Expand / Collapse ───────────────────────────────────────────────
+  toggle(event) {
+    const chevron = event.currentTarget.closest(".tree-node-chevron");
+    if (!chevron)
+      return;
+    const node = chevron.closest(".midwest-tree-node");
+    if (!node)
+      return;
+    const expanded = node.getAttribute("aria-expanded") === "true";
+    node.setAttribute("aria-expanded", String(!expanded));
+    this.focusNode(node);
+  }
+  // ── Checkbox Cascading ──────────────────────────────────────────────
+  checkboxChanged(event) {
+    const checkbox = event.target;
+    const node = checkbox.closest(".midwest-tree-node");
+    if (!node)
+      return;
+    const descendants = node.querySelectorAll(
+      ".tree-node-children .tree-node-checkbox"
+    );
+    for (const desc of descendants) {
+      desc.checked = checkbox.checked;
+      desc.indeterminate = false;
+    }
+    this.updateAncestors(node);
+  }
+  updateAncestors(node) {
+    const parentGroup = node.parentElement;
+    if (!parentGroup || !parentGroup.classList.contains("tree-node-children"))
+      return;
+    const parentNode = parentGroup.closest(".midwest-tree-node");
+    if (!parentNode)
+      return;
+    const parentCheckbox = parentNode.querySelector(
+      ":scope > .tree-node-trigger > .tree-node-checkbox"
+    );
+    if (!parentCheckbox)
+      return;
+    const childCheckboxes = parentGroup.querySelectorAll(
+      ":scope > .midwest-tree-node > .tree-node-trigger > .tree-node-checkbox"
+    );
+    const total = childCheckboxes.length;
+    let checked = 0;
+    let indeterminate = 0;
+    for (const cb of childCheckboxes) {
+      if (cb.indeterminate)
+        indeterminate++;
+      else if (cb.checked)
+        checked++;
+    }
+    if (indeterminate > 0 || checked > 0 && checked < total) {
+      parentCheckbox.checked = false;
+      parentCheckbox.indeterminate = true;
+    } else if (checked === total) {
+      parentCheckbox.checked = true;
+      parentCheckbox.indeterminate = false;
+    } else {
+      parentCheckbox.checked = false;
+      parentCheckbox.indeterminate = false;
+    }
+    this.updateAncestors(parentNode);
+  }
+  // ── Keyboard Navigation (WAI-ARIA TreeView) ────────────────────────
+  connect() {
+    this.element.addEventListener("keydown", this.handleKeydown);
+    const firstNode = this.element.querySelector(".midwest-tree-node");
+    if (firstNode) {
+      firstNode.setAttribute("tabindex", "0");
+    }
+  }
+  disconnect() {
+    this.element.removeEventListener("keydown", this.handleKeydown);
+  }
+  handleKeydown = (event) => {
+    const target = event.target.closest(".midwest-tree-node");
+    if (!target)
+      return;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.moveFocus(target, "next");
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.moveFocus(target, "previous");
+        break;
+      case "ArrowRight":
+        event.preventDefault();
+        this.handleArrowRight(target);
+        break;
+      case "ArrowLeft":
+        event.preventDefault();
+        this.handleArrowLeft(target);
+        break;
+      case "Home":
+        event.preventDefault();
+        this.focusFirst();
+        break;
+      case "End":
+        event.preventDefault();
+        this.focusLast();
+        break;
+      case "Enter":
+      case " ":
+        event.preventDefault();
+        this.handleActivate(target);
+        break;
+    }
+  };
+  getVisibleNodes() {
+    const nodes = [];
+    const walk = (container) => {
+      const children = container.querySelectorAll(
+        ":scope > .midwest-tree-node"
+      );
+      for (const child of children) {
+        nodes.push(child);
+        if (child.getAttribute("aria-expanded") === "true") {
+          const group = child.querySelector(":scope > .tree-node-children");
+          if (group)
+            walk(group);
+        }
+      }
+    };
+    walk(this.element);
+    return nodes;
+  }
+  moveFocus(current, direction) {
+    const visible = this.getVisibleNodes();
+    const index = visible.indexOf(current);
+    if (index === -1)
+      return;
+    const nextIndex = direction === "next" ? index + 1 : index - 1;
+    if (nextIndex >= 0 && nextIndex < visible.length) {
+      this.focusNode(visible[nextIndex]);
+    }
+  }
+  handleArrowRight(node) {
+    const isExpanded = node.getAttribute("aria-expanded");
+    if (isExpanded === "false") {
+      node.setAttribute("aria-expanded", "true");
+    } else if (isExpanded === "true") {
+      const firstChild = node.querySelector(
+        ":scope > .tree-node-children > .midwest-tree-node"
+      );
+      if (firstChild)
+        this.focusNode(firstChild);
+    }
+  }
+  handleArrowLeft(node) {
+    const isExpanded = node.getAttribute("aria-expanded");
+    if (isExpanded === "true") {
+      node.setAttribute("aria-expanded", "false");
+    } else {
+      const parentGroup = node.parentElement;
+      if (parentGroup && parentGroup.classList.contains("tree-node-children")) {
+        const parentNode = parentGroup.closest(".midwest-tree-node");
+        if (parentNode)
+          this.focusNode(parentNode);
+      }
+    }
+  }
+  handleActivate(node) {
+    const checkbox = node.querySelector(
+      ":scope > .tree-node-trigger > .tree-node-checkbox"
+    );
+    if (checkbox) {
+      checkbox.checked = !checkbox.checked;
+      checkbox.dispatchEvent(new Event("change", { bubbles: true }));
+      return;
+    }
+    const expanded = node.getAttribute("aria-expanded");
+    if (expanded !== null) {
+      node.setAttribute("aria-expanded", String(expanded !== "true"));
+    }
+  }
+  focusNode(node) {
+    const current = this.element.querySelector(
+      '.midwest-tree-node[tabindex="0"]'
+    );
+    if (current)
+      current.setAttribute("tabindex", "-1");
+    node.setAttribute("tabindex", "0");
+    node.focus();
+  }
+  focusFirst() {
+    const first = this.element.querySelector(".midwest-tree-node");
+    if (first)
+      this.focusNode(first);
+  }
+  focusLast() {
+    const visible = this.getVisibleNodes();
+    if (visible.length > 0) {
+      this.focusNode(visible[visible.length - 1]);
+    }
+  }
+}
+
+function cloneTemplate(template) {
+  const fragment = template.content.cloneNode(true);
+  const el = fragment.firstElementChild;
+  if (!el)
+    throw new Error("Template has no element child");
+  return el;
+}
+
+class CommandPalette extends Controller {
+  static targets = ["input", "list", "empty", "body", "turboList", "itemTemplate", "groupTemplate"];
+  static values = {
+    hotkey: { type: String, default: "k" },
+    items: { type: Array, default: [] },
+    src: { type: String, default: "" },
+    turboFrameUrl: { type: String, default: "" }
+  };
+  highlightedIndex = -1;
+  fetchAbort = null;
+  searchTimer;
+  allItems = [];
+  connect() {
+    this.allItems = this.itemsValue;
+    document.addEventListener("keydown", this.handleGlobalKeydown);
+    this.element.addEventListener("click", this.handleBackdropClick);
+    if (!this.turboFrameUrlValue) {
+      this.renderItems(this.allItems);
+    }
+  }
+  disconnect() {
+    document.removeEventListener("keydown", this.handleGlobalKeydown);
+    this.element.removeEventListener("click", this.handleBackdropClick);
+    if (this.fetchAbort)
+      this.fetchAbort.abort();
+    if (this.searchTimer)
+      clearTimeout(this.searchTimer);
+  }
+  // ── Turbo frame lifecycle ───────────────────────────────────────────
+  turboListTargetConnected(el) {
+    el.addEventListener("turbo:frame-load", this.onFrameLoad);
+  }
+  turboListTargetDisconnected(el) {
+    el.removeEventListener("turbo:frame-load", this.onFrameLoad);
+  }
+  onFrameLoad = () => {
+    if (!this.hasListTarget)
+      return;
+    const items = this.listTarget.querySelectorAll(".command-palette-item");
+    if (items.length > 0) {
+      this.highlightedIndex = 0;
+      this.updateHighlight();
+      this.emptyTarget.hidden = true;
+      if (this.hasListTarget)
+        this.listTarget.hidden = false;
+    } else {
+      this.emptyTarget.hidden = false;
+      if (this.hasListTarget)
+        this.listTarget.hidden = true;
+    }
+  };
+  // ── Public actions ──────────────────────────────────────────────────
+  open() {
+    if (this.element.open)
+      return;
+    this.element.showModal();
+    this.inputTarget.value = "";
+    this.highlightedIndex = -1;
+    if (this.turboFrameUrlValue) {
+      this.navigateFrame("");
+    } else {
+      this.renderItems(this.allItems);
+    }
+    requestAnimationFrame(() => this.inputTarget.focus());
+  }
+  close() {
+    if (!this.element.open)
+      return;
+    this.element.close();
+  }
+  filter() {
+    const query = this.inputTarget.value.trim().toLowerCase();
+    if (this.turboFrameUrlValue) {
+      this.debouncedNavigateFrame(query);
+      return;
+    }
+    if (this.srcValue && query.length > 0) {
+      this.fetchRemote(query);
+      return;
+    }
+    if (query.length === 0) {
+      this.renderItems(this.allItems);
+      return;
+    }
+    const filtered = this.allItems.filter((item) => {
+      const haystack = `${item.label} ${item.description || ""} ${item.group || ""}`.toLowerCase();
+      return haystack.includes(query);
+    });
+    this.renderItems(filtered);
+  }
+  navigate(event) {
+    const items = this.visibleItems;
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.highlightedIndex = Math.min(this.highlightedIndex + 1, items.length - 1);
+        this.updateHighlight();
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.highlightedIndex = Math.max(this.highlightedIndex - 1, 0);
+        this.updateHighlight();
+        break;
+      case "Enter":
+        event.preventDefault();
+        if (this.highlightedIndex >= 0 && this.highlightedIndex < items.length) {
+          this.selectItem(items[this.highlightedIndex]);
+        }
+        break;
+      case "Escape":
+        event.preventDefault();
+        this.close();
+        break;
+    }
+  }
+  select(event) {
+    const el = event.target.closest(".command-palette-item");
+    if (!el)
+      return;
+    const index = parseInt(el.dataset.index || "-1", 10);
+    const items = this.visibleItems;
+    if (index >= 0 && index < items.length) {
+      this.selectItem(items[index]);
+    }
+  }
+  // ── Remote search ───────────────────────────────────────────────────
+  fetchRemote(query) {
+    if (this.fetchAbort)
+      this.fetchAbort.abort();
+    if (this.searchTimer)
+      clearTimeout(this.searchTimer);
+    this.searchTimer = window.setTimeout(async () => {
+      this.fetchAbort = new AbortController();
+      try {
+        const url = new URL(this.srcValue, window.location.origin);
+        url.searchParams.set("q", query);
+        const response = await fetch(url.toString(), {
+          headers: { Accept: "application/json" },
+          signal: this.fetchAbort.signal
+        });
+        if (response.ok) {
+          const data = await response.json();
+          this.renderItems(data);
+        }
+      } catch (e) {
+        if (e.name !== "AbortError")
+          throw e;
+      }
+    }, 200);
+  }
+  // ── Turbo frame navigation ──────────────────────────────────────────
+  navigateFrame(query) {
+    if (!this.hasTurboListTarget)
+      return;
+    const url = new URL(this.turboFrameUrlValue, window.location.href);
+    if (query)
+      url.searchParams.set("q", query);
+    this.turboListTarget.setAttribute("src", url.toString());
+  }
+  debouncedNavigateFrame(query) {
+    if (this.searchTimer)
+      clearTimeout(this.searchTimer);
+    this.searchTimer = window.setTimeout(() => {
+      this.navigateFrame(query);
+    }, 200);
+  }
+  // ── Rendering ───────────────────────────────────────────────────────
+  renderItems(items) {
+    if (!this.hasListTarget)
+      return;
+    this.listTarget.innerHTML = "";
+    this.highlightedIndex = -1;
+    if (items.length === 0) {
+      this.emptyTarget.hidden = false;
+      this.listTarget.hidden = true;
+      return;
+    }
+    this.emptyTarget.hidden = true;
+    this.listTarget.hidden = false;
+    const groups = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const group = item.group || "";
+      if (!groups.has(group))
+        groups.set(group, []);
+      groups.get(group).push(item);
+    }
+    let index = 0;
+    for (const [groupName, groupItems] of groups) {
+      if (groupName) {
+        this.listTarget.appendChild(this.buildGroup(groupName));
+      }
+      for (const item of groupItems) {
+        this.listTarget.appendChild(this.buildItem(item, index));
+        index++;
+      }
+    }
+    if (items.length > 0) {
+      this.highlightedIndex = 0;
+      this.updateHighlight();
+    }
+  }
+  buildGroup(name) {
+    const li = cloneTemplate(this.groupTemplateTarget);
+    const h6 = li.querySelector(".midwest-label");
+    if (h6)
+      h6.textContent = name;
+    return li;
+  }
+  buildItem(item, index) {
+    const li = cloneTemplate(this.itemTemplateTarget);
+    li.dataset.index = String(index);
+    if (item.url)
+      li.dataset.url = item.url;
+    if (item.action)
+      li.dataset.paletteAction = item.action;
+    if (item.method)
+      li.dataset.turboMethod = item.method;
+    if (item.confirm)
+      li.dataset.turboConfirm = item.confirm;
+    const iconSpan = li.querySelector(".command-palette-item-icon");
+    if (item.icon) {
+      iconSpan.innerHTML = this.getIconSvg(item.icon);
+      iconSpan.hidden = false;
+    } else {
+      iconSpan.remove();
+    }
+    const label = li.querySelector(".command-palette-item-label");
+    label.textContent = item.label;
+    const desc = li.querySelector(".command-palette-item-description");
+    if (item.description) {
+      desc.textContent = item.description;
+      desc.hidden = false;
+    } else {
+      desc.remove();
+    }
+    const shortcutSpan = li.querySelector(".command-palette-item-shortcut");
+    if (item.shortcut) {
+      item.shortcut.split("+").forEach((key) => {
+        const kbd = document.createElement("kbd");
+        kbd.className = "midwest-kbd";
+        kbd.textContent = key.trim();
+        shortcutSpan.appendChild(kbd);
+      });
+      shortcutSpan.hidden = false;
+    } else {
+      shortcutSpan.remove();
+    }
+    return li;
+  }
+  // ── Selection ───────────────────────────────────────────────────────
+  selectItem(item) {
+    if (item.confirm && !window.confirm(item.confirm))
+      return;
+    this.close();
+    if (item.url) {
+      this.visit(item.url, item.method);
+      return;
+    }
+    if (item.action) {
+      this.element.dispatchEvent(
+        new CustomEvent("midwest-command-palette:action", {
+          bubbles: true,
+          detail: { action: item.action, item }
+        })
+      );
+    }
+  }
+  visit(url, method) {
+    if (method && method.toLowerCase() !== "get") {
+      const link = document.createElement("a");
+      link.href = url;
+      link.dataset.turboMethod = method;
+      link.style.display = "none";
+      document.body.appendChild(link);
+      link.click();
+      link.remove();
+      return;
+    }
+    const turbo = window.Turbo;
+    if (turbo?.visit) {
+      turbo.visit(url);
+    } else {
+      window.location.href = url;
+    }
+  }
+  // ── Highlight ───────────────────────────────────────────────────────
+  get visibleItems() {
+    if (!this.hasListTarget)
+      return [];
+    const items = [];
+    const els = this.listTarget.querySelectorAll(".command-palette-item");
+    for (const el of els) {
+      items.push({
+        label: el.querySelector(".command-palette-item-label")?.textContent || "",
+        url: el.dataset.url,
+        action: el.dataset.paletteAction,
+        method: el.dataset.turboMethod,
+        confirm: el.dataset.turboConfirm
+      });
+    }
+    return items;
+  }
+  updateHighlight() {
+    if (!this.hasListTarget)
+      return;
+    const items = this.listTarget.querySelectorAll(".command-palette-item");
+    items.forEach((el, i) => {
+      el.setAttribute("aria-selected", String(i === this.highlightedIndex));
+    });
+    const highlighted = items[this.highlightedIndex];
+    if (highlighted) {
+      highlighted.scrollIntoView({ block: "nearest" });
+      this.inputTarget.setAttribute("aria-activedescendant", highlighted.id || "");
+    }
+  }
+  // ── Hotkey ──────────────────────────────────────────────────────────
+  handleGlobalKeydown = (event) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === this.hotkeyValue) {
+      event.preventDefault();
+      if (this.element.open) {
+        this.close();
+      } else {
+        this.open();
+      }
+    }
+  };
+  handleBackdropClick = (event) => {
+    if (event.target === this.element)
+      this.close();
+  };
+  // ── Helpers ─────────────────────────────────────────────────────────
+  getIconSvg(name) {
+    const existing = document.querySelector(`.Midwest-Icon__Svg[aria-label="${name}"]`);
+    if (existing)
+      return existing.outerHTML;
+    const allIcons = document.querySelectorAll(".Midwest-Icon__Svg");
+    for (const icon of allIcons) {
+      if (icon.getAttribute("aria-label")?.toLowerCase() === name.toLowerCase()) {
+        return icon.outerHTML;
+      }
+    }
+    return "";
+  }
+}
+
 function registerMidwestControllers(application) {
   application.register("midwest-card", Card);
   application.register("midwest-banner", Banner);
@@ -4953,6 +5606,9 @@ function registerMidwestControllers(application) {
   application.register("midwest-table", Table);
   application.register("midwest-load-more", LoadMore);
   application.register("midwest-pagination", Pagination);
+  application.register("midwest-show-if", ShowIf);
+  application.register("midwest-tree-view", TreeView);
+  application.register("midwest-command-palette", CommandPalette);
 }
 
 export { Banner, Card, Chart, CountdownTimer, registerMidwestControllers };