nitro_kit 0.9.0 → 2.0.0.alpha.2

data/app/javascript/controllers/nk/combobox_controller.js

@@ -1,130 +1,362 @@
 import { Controller } from "@hotwired/stimulus";
-import Combobox from "@github/combobox-nav";
 import {
-  computePosition,
-  offset,
-  flip,
-  shift,
-  autoUpdate,
-} from "@floating-ui/dom";
+  observeOverlayPosition,
+  positionOverlay,
+} from "controllers/nk/overlay_position";
+
+// The Combobox component translates these and passes them in as Stimulus
+// values. They remain here as the shipped English fallbacks.
+const INVALID_SELECTION_MESSAGE = "Choose an option.";
+const NO_RESULTS_MESSAGE = "No options found.";
+const RESULTS_ONE_MESSAGE = "%{count} option available.";
+const RESULTS_OTHER_MESSAGE = "%{count} options available.";
+
+const OPTION_LABEL_SELECTOR = '[data-slot="combobox-option-label"]';
 
 export default class extends Controller {
-  static targets = ["input", "list", "hiddenField", "clearButton"];
+  static targets = [
+    "control",
+    "input",
+    "native",
+    "value",
+    "listbox",
+    "option",
+    "status",
+  ];
   static values = {
-    open: { type: Boolean, default: false },
-    // Options for floating-ui
-    placement: { type: String },
-    // Options for combobox-nav
-    tabInsertsSuggestions: { type: Boolean },
-    firstOptionSelectionMode: { type: String },
-    scrollIntoViewOptions: { type: Object },
+    open: Boolean,
+    required: Boolean,
+    invalidSelection: String,
+    noResults: String,
+    resultsOne: String,
+    resultsOther: String,
   };
 
-  connect() {
-    this.combobox = new Combobox(this.inputTarget, this.listTarget, {
-      tabInsertsSuggestions: this.tabInsertsSuggestionsValue,
-      firstOptionSelectionMode: this.firstOptionSelectionModeValue,
-      scrollIntoViewOptions: this.scrollIntoViewOptionsValue,
-    });
+  get invalidSelectionMessage() {
+    return this.invalidSelectionValue || INVALID_SELECTION_MESSAGE;
+  }
 
-    this.updatePosition();
+  get noResultsMessage() {
+    return this.noResultsValue || NO_RESULTS_MESSAGE;
+  }
 
-    this.listTarget.addEventListener("combobox-commit", (event) => {
-      this.select(event);
-      this.close();
-    });
+  resultsMessage(count) {
+    const template =
+      count === 1
+        ? this.resultsOneValue || RESULTS_ONE_MESSAGE
+        : this.resultsOtherValue || RESULTS_OTHER_MESSAGE;
+
+    return template.replace("%{count}", String(count));
+  }
+
+  connect() {
+    this.activeOption = null;
+    this.enhanced = true;
+    this.nativeRequired = this.requiredValue;
+    this.element.dataset.enhanced = "true";
+    this.controlTarget.hidden = false;
+    this.nativeTarget.hidden = true;
+    this.valueTarget.required = false;
+    this.syncSelection();
+    this.syncValidity();
+    this.reflectOpenState();
   }
 
   disconnect() {
-    this.combobox.destroy();
+    this.stopPositioning?.();
+    this.enhanced = false;
+    const control = this.element.querySelector(
+      ':scope > [data-slot="combobox-control"]',
+    );
+    const input = control?.querySelector('[data-nk--combobox-target~="input"]');
+    const native = this.element.querySelector(
+      ':scope > [data-slot="combobox-native"]',
+    );
+    const value = native?.querySelector('[data-nk--combobox-target~="value"]');
+    const listbox = this.element.querySelector(
+      ':scope > [data-slot="combobox-listbox"]',
+    );
+    const status = this.element.querySelector(
+      ':scope > [data-slot="combobox-status"]',
+    );
+
+    this.element.setAttribute("data-nk--combobox-open-value", "false");
+    this.element.dataset.state = "closed";
+    if (listbox) {
+      listbox.dataset.state = "closed";
+      listbox.hidden = true;
+    }
+    if (input) {
+      input.setAttribute("aria-expanded", "false");
+      input.setCustomValidity("");
+      input.removeAttribute("aria-activedescendant");
+    }
+    if (control) control.hidden = true;
+    if (native) native.hidden = false;
+    if (value) value.required = this.nativeRequired;
+    if (status) status.textContent = "";
+    delete this.element.dataset.enhanced;
   }
 
-  select(event) {
-    this.inputTarget.value = event.target.textContent;
-    this.hiddenFieldTarget.value =
-      event.target.dataset.value || event.target.textContent;
+  controlTargetConnected(control) {
+    if (this.enhanced) control.hidden = false;
+  }
+
+  nativeTargetConnected(native) {
+    if (this.enhanced) native.hidden = true;
+  }
+
+  valueTargetConnected(value) {
+    if (!this.enhanced) return;
+
+    this.nativeRequired = this.requiredValue;
+    value.required = false;
+    if (this.hasInputTarget) {
+      this.syncSelection();
+      this.syncValidity();
+    }
+  }
+
+  inputTargetConnected() {
+    if (!this.enhanced) return;
+
+    if (this.hasValueTarget) this.syncValidity();
+    this.reflectOpenState();
+  }
+
+  inputTargetDisconnected() {
+    this.activeOption = null;
+  }
+
+  listboxTargetConnected() {
+    if (this.enhanced) this.reflectOpenState();
+  }
+
+  optionTargetConnected() {
+    if (this.enhanced && this.hasValueTarget) this.syncSelection();
+  }
+
+  optionTargetDisconnected(option) {
+    if (this.activeOption === option) this.setActive(null);
   }
 
   open() {
+    if (this.inputTarget.disabled) return;
+
     this.openValue = true;
   }
 
   close() {
     this.openValue = false;
+    this.setActive(null);
   }
 
-  focusShift({ target }) {
-    if (!this.openValue) return;
-    if (this.element.contains(target)) return;
-
-    this.close();
+  closeFromOutside(event) {
+    if (!this.element.contains(event.target)) this.close();
   }
 
-  windowClick({ target }) {
-    if (!this.openValue) return;
-    if (this.element.contains(target)) return;
+  filter() {
+    const query = this.inputTarget.value.trim().toLocaleLowerCase();
+    let exactMatch = null;
 
-    this.close();
+    this.optionTargets.forEach((option) => {
+      const label = this.optionLabel(option);
+      option.hidden = !label.toLocaleLowerCase().includes(query);
+
+      if (
+        label.toLocaleLowerCase() === query &&
+        option.getAttribute("aria-disabled") !== "true"
+      ) {
+        exactMatch = option;
+      }
+    });
+
+    this.setSubmittedValue(exactMatch?.dataset.value ?? "");
+    this.syncSelection();
+    this.setActive(null);
+    this.syncValidity();
+    this.announceResults();
+    this.open();
   }
 
-  clear() {
-    this.combobox.resetSelection();
-    this.inputTarget.value = "";
-    this.input();
-    this.hiddenFieldTarget.value = "";
+  select(event) {
+    this.commit(event.currentTarget);
   }
 
-  input(_event) {
-    if (!this.isOpen) this.open();
+  activate(event) {
+    this.setActive(event.currentTarget);
+  }
 
-    const filter = this.inputTarget.value.toLowerCase();
+  navigate(event) {
+    const options = this.visibleOptions;
+    const currentIndex = options.indexOf(this.activeOption);
+    let nextIndex;
 
-    Array.from(this.listTarget.children).forEach((item) => {
-      const value = item.dataset.value?.toLowerCase();
-      const text = item.textContent.toLowerCase();
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault();
+        this.open();
+        nextIndex = (currentIndex + 1) % options.length;
+        break;
+      case "ArrowUp":
+        event.preventDefault();
+        this.open();
+        nextIndex = (currentIndex - 1 + options.length) % options.length;
+        break;
+      case "Home":
+        if (!this.openValue) return;
+        event.preventDefault();
+        nextIndex = 0;
+        break;
+      case "End":
+        if (!this.openValue) return;
+        event.preventDefault();
+        nextIndex = options.length - 1;
+        break;
+      case "Enter":
+        if (!this.openValue || !this.activeOption) return;
+        event.preventDefault();
+        this.commit(this.activeOption);
+        return;
+      case "Escape":
+        if (!this.openValue) return;
+        event.preventDefault();
+        this.close();
+        return;
+      case "Tab":
+        this.close();
+        this.syncValidity();
+        return;
+      default:
+        return;
+    }
 
-      if (value?.includes(filter) || text.includes(filter)) {
-        item.setAttribute("role", "option");
-      } else {
-        item.removeAttribute("role");
-      }
-    });
+    if (options.length > 0) this.setActive(options[nextIndex]);
+  }
 
-    this.hiddenFieldTarget.value = this.inputTarget.value;
+  validate() {
+    this.syncValidity();
   }
 
-  openValueChanged(state, _previous) {
-    if (!this.combobox) return;
+  openValueChanged(open) {
+    if (!this.enhanced) return;
 
-    if (state) {
-      this.combobox.start();
+    this.reflectOpenState(open);
+  }
 
-      this.listTarget.dataset.state = "open";
+  reflectOpenState(open = this.openValue) {
+    if (!this.hasListboxTarget || !this.hasInputTarget) return;
 
-      this.clearAutoUpdate = autoUpdate(
-        this.inputTarget,
-        this.listTarget,
-        this.updatePosition,
+    const state = open ? "open" : "closed";
+    this.element.dataset.state = state;
+    this.listboxTarget.dataset.state = state;
+    this.listboxTarget.hidden = !open;
+    this.inputTarget.setAttribute("aria-expanded", String(open));
+
+    if (open && (!this.activeOption || !this.activeOption.isConnected)) {
+      const selected = this.optionTargets.find(
+        (option) =>
+          option.getAttribute("aria-selected") === "true" && !option.hidden,
+      );
+      this.setActive(selected ?? this.visibleOptions[0] ?? null);
+    } else if (open && this.activeOption) {
+      this.inputTarget.setAttribute(
+        "aria-activedescendant",
+        this.activeOption.id,
       );
+    }
+
+    if (open) {
+      this.startPositioning();
     } else {
-      this.combobox.stop();
+      this.stopPositioning?.();
+      this.stopPositioning = null;
+    }
+  }
 
-      this.listTarget.dataset.state = "closed";
+  startPositioning() {
+    this.stopPositioning?.();
+    const update = () =>
+      positionOverlay(
+        this.inputTarget,
+        this.listboxTarget,
+        this.element.dataset.placement,
+      );
 
-      if (this.clearAutoUpdate) {
-        this.clearAutoUpdate();
-      }
-    }
+    update();
+    this.stopPositioning = observeOverlayPosition(update);
   }
 
-  updatePosition = () => {
-    computePosition(this.inputTarget, this.listTarget, {
-      placement: this.placementValue,
-      middleware: [offset(5), flip(), shift({ padding: 5 })],
-    }).then(({ x, y }) => {
-      this.listTarget.style.left = `${x}px`;
-      this.listTarget.style.top = `${y}px`;
-      this.listTarget.style.width = `${this.inputTarget.clientWidth}px`;
+  commit(option) {
+    if (!option || option.getAttribute("aria-disabled") === "true") return;
+
+    this.inputTarget.value = this.optionLabel(option);
+    this.setSubmittedValue(option.dataset.value);
+    this.syncSelection();
+    this.syncValidity();
+    this.close();
+    this.inputTarget.focus();
+  }
+
+  setSubmittedValue(value) {
+    if (this.valueTarget.value === value) return;
+
+    this.valueTarget.value = value;
+    this.valueTarget.dispatchEvent(new Event("change", { bubbles: true }));
+  }
+
+  syncSelection() {
+    this.optionTargets.forEach((option) => {
+      const selected = option.dataset.value === this.valueTarget.value;
+      option.setAttribute("aria-selected", String(selected));
+      option.dataset.state = selected ? "selected" : "unselected";
     });
-  };
+  }
+
+  syncValidity() {
+    const hasVisibleValue = this.inputTarget.value.trim() !== "";
+    const hasSubmittedValue = this.valueTarget.value !== "";
+    const invalid =
+      (this.requiredValue && !hasSubmittedValue) ||
+      (hasVisibleValue && !hasSubmittedValue);
+    this.inputTarget.setCustomValidity(
+      invalid ? this.invalidSelectionMessage : "",
+    );
+    this.inputTarget.setAttribute("aria-invalid", String(invalid));
+  }
+
+  setActive(option) {
+    this.optionTargets.forEach((candidate) => {
+      candidate.dataset.active = String(candidate === option);
+    });
+
+    this.activeOption = option;
+
+    if (option && this.hasInputTarget) {
+      this.inputTarget.setAttribute("aria-activedescendant", option.id);
+      option.scrollIntoView({ block: "nearest" });
+    } else if (this.hasInputTarget) {
+      this.inputTarget.removeAttribute("aria-activedescendant");
+    }
+  }
+
+  optionLabel(option) {
+    const label = option.querySelector(OPTION_LABEL_SELECTOR) ?? option;
+
+    return label.textContent.trim();
+  }
+
+  announceResults() {
+    const count = this.optionTargets.filter((option) => !option.hidden).length;
+
+    this.statusTarget.textContent =
+      count === 0 ? this.noResultsMessage : this.resultsMessage(count);
+  }
+
+  get visibleOptions() {
+    return this.optionTargets.filter(
+      (option) =>
+        !option.hidden && option.getAttribute("aria-disabled") !== "true",
+    );
+  }
 }

data/app/javascript/controllers/nk/command_palette_controller.js

@@ -0,0 +1,249 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = [
+    "trigger",
+    "panel",
+    "search",
+    "form",
+    "frame",
+    "input",
+    "destination",
+    "empty",
+    "status",
+  ];
+  static values = {
+    empty: String,
+    resultsOne: String,
+    resultsOther: String,
+  };
+
+  connect() {
+    this.connected = true;
+    this.restoreFocus = true;
+    this.loadedQuery = this.inputTarget.value;
+    this.triggerTarget.removeAttribute("command");
+    this.searchTarget.hidden = false;
+    this.element.dataset.enhanced = "true";
+  }
+
+  disconnect() {
+    this.connected = false;
+    clearTimeout(this.searchTimer);
+    const trigger = this.element.querySelector(
+      ':scope > [data-slot="command-palette-trigger"]',
+    );
+    const panel = this.element.querySelector(
+      ':scope > [data-slot="command-palette-panel"]',
+    );
+    const search = panel?.querySelector('[data-slot="command-palette-search"]');
+    const input = panel?.querySelector('[data-slot="command-palette-input"]');
+    const empty = panel?.querySelector('[data-slot="command-palette-empty"]');
+    const status = panel?.querySelector('[data-slot="command-palette-status"]');
+
+    this.restoreFocus = false;
+    if (panel?.open) panel.close();
+    if (input) input.value = "";
+    panel
+      ?.querySelectorAll('[data-slot="command-palette-destination"]')
+      .forEach((destination) => {
+        destination.hidden = false;
+      });
+    if (empty) empty.hidden = true;
+    if (status) status.textContent = "";
+    trigger?.setAttribute("command", "show-modal");
+    if (search) search.hidden = true;
+    delete this.element.dataset.enhanced;
+  }
+
+  open(event) {
+    event?.preventDefault();
+    if (!this.canOpen) return;
+
+    this.returnFocus = document.activeElement;
+    this.restoreFocus = true;
+    this.reset();
+    this.panelTarget.showModal();
+    this.inputTarget.focus();
+    if (this.hasFormTarget) this.submitSearch();
+  }
+
+  shortcut(event) {
+    if (
+      event.defaultPrevented ||
+      event.repeat ||
+      event.isComposing ||
+      event.altKey ||
+      event.shiftKey ||
+      event.key.toLocaleLowerCase() !== "k" ||
+      (!event.metaKey && !event.ctrlKey)
+    )
+      return;
+
+    if (this.panelTarget.open) {
+      event.preventDefault();
+      this.panelTarget.close();
+    } else {
+      if (!this.canOpen) return;
+
+      event.preventDefault();
+      this.open();
+    }
+  }
+
+  filter() {
+    const query = this.inputTarget.value.trim().toLocaleLowerCase();
+
+    this.destinationTargets.forEach((destination) => {
+      destination.hidden = !destination.textContent
+        .toLocaleLowerCase()
+        .includes(query);
+    });
+
+    this.updateResultState();
+  }
+
+  search() {
+    clearTimeout(this.searchTimer);
+    this.searchTimer = setTimeout(() => this.submitSearch(), 150);
+  }
+
+  navigateInput(event) {
+    const destinations = this.visibleDestinations;
+
+    if (
+      event.key === "Enter" &&
+      this.hasFormTarget &&
+      this.inputTarget.value !== this.loadedQuery
+    ) {
+      event.preventDefault();
+      this.submitSearch();
+      return;
+    }
+
+    if (destinations.length === 0) return;
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      destinations[0].click();
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      (event.key === "ArrowDown"
+        ? destinations[0]
+        : destinations.at(-1)
+      ).focus();
+    }
+  }
+
+  navigateDestination(event) {
+    const destinations = this.visibleDestinations;
+    const currentIndex = destinations.indexOf(event.currentTarget);
+    const nextIndex = {
+      ArrowDown: (currentIndex + 1) % destinations.length,
+      ArrowUp: (currentIndex - 1 + destinations.length) % destinations.length,
+      Home: 0,
+      End: destinations.length - 1,
+    }[event.key];
+
+    if (nextIndex === undefined) return;
+
+    event.preventDefault();
+    destinations[nextIndex].focus();
+  }
+
+  select() {
+    this.restoreFocus = false;
+    this.panelTarget.close();
+  }
+
+  closeForVisit() {
+    if (!this.panelTarget.open) return;
+
+    this.restoreFocus = false;
+    this.panelTarget.close();
+  }
+
+  loading() {
+    this.frameTarget.setAttribute("aria-busy", "true");
+  }
+
+  loaded() {
+    this.frameTarget.removeAttribute("aria-busy");
+  }
+
+  destinationTargetConnected() {
+    this.scheduleResultUpdate();
+  }
+
+  destinationTargetDisconnected() {
+    this.scheduleResultUpdate();
+  }
+
+  scheduleResultUpdate() {
+    if (this.resultUpdateScheduled) return;
+
+    this.resultUpdateScheduled = true;
+    queueMicrotask(() => {
+      this.resultUpdateScheduled = false;
+      if (!this.connected || !this.panelTarget.open || !this.hasFormTarget)
+        return;
+
+      this.loadedQuery = this.inputTarget.value;
+      this.updateResultState();
+    });
+  }
+
+  closed() {
+    const returnFocus = this.returnFocus;
+
+    this.reset();
+    this.returnFocus = null;
+    if (this.restoreFocus && returnFocus?.isConnected) returnFocus.focus();
+    this.restoreFocus = true;
+  }
+
+  reset() {
+    clearTimeout(this.searchTimer);
+    if (this.hasInputTarget) this.inputTarget.value = "";
+    this.destinationTargets.forEach((destination) => {
+      destination.hidden = false;
+    });
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = true;
+    if (this.hasStatusTarget) this.statusTarget.textContent = "";
+  }
+
+  resultsMessage(count) {
+    const template =
+      count === 1 ? this.resultsOneValue : this.resultsOtherValue;
+
+    return template.replace("%{count}", String(count));
+  }
+
+  submitSearch() {
+    clearTimeout(this.searchTimer);
+    this.formTarget.requestSubmit();
+  }
+
+  updateResultState() {
+    const count = this.visibleDestinations.length;
+    this.emptyTarget.hidden = count !== 0;
+    this.statusTarget.textContent =
+      count === 0 ? this.emptyValue : this.resultsMessage(count);
+  }
+
+  get visibleDestinations() {
+    return this.destinationTargets.filter((destination) => !destination.hidden);
+  }
+
+  get canOpen() {
+    if (
+      this.panelTarget.open ||
+      this.triggerTarget.getClientRects().length === 0
+    )
+      return false;
+
+    const activeModal = document.querySelector("dialog:modal");
+
+    return !activeModal || activeModal.contains(this.element);
+  }
+}