@wpmoo/ui 1.0.0-rc.1 → 1.0.0-rc.11

package/dist/js/combobox.js

@@ -1,15 +1,18 @@
-const instances = new WeakMap();
-const normalize = (value) => value.trim().toLowerCase();
+/*!
+ * Moo UI combobox.js v1.0.0-rc.11 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
 
-export default class Combobox {
+const instances = /* @__PURE__ */ new WeakMap();
+const normalize = (value) => value.trim().toLowerCase();
+class Combobox {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
   }
-
   static getOrCreateInstance(element, config = {}) {
     return Combobox.getInstance(element) || new Combobox(element, config);
   }
-
   constructor(element, config = {}) {
     if (element?.nodeType !== 1 || !element.matches(".combobox")) {
       throw new TypeError("Combobox requires a .combobox root element.");
@@ -18,7 +21,6 @@ export default class Combobox {
     if (existing) {
       return existing;
     }
-
     this._element = element;
     this._document = element.ownerDocument;
     this._window = this._document.defaultView;
@@ -29,46 +31,41 @@ export default class Combobox {
     if (!this._input || !this._menu || this._options.length === 0) {
       throw new TypeError("Combobox requires an input, menu, and at least one option.");
     }
-
-    this._isMultiple = element.dataset.mooComboboxMultiple === "true";
+    this._isMultiple = element.dataset.comboboxMultiple === "true";
     this._hidden = this._isMultiple ? null : element.querySelector('input[type="hidden"]');
     this._chipValue = element.querySelector(".combobox-value");
-    this._valueStore = element.querySelector("[data-moo-combobox-value-store]");
-    this._chipIconTemplate = element.querySelector("[data-moo-combobox-chip-icon]");
-    this._clearTrigger = element.querySelector("[data-moo-combobox-clear]");
+    this._valueStore = element.querySelector("[data-combobox-value-store]");
+    this._chipIconTemplate = element.querySelector("[data-combobox-chip-icon]");
+    this._clearTrigger = element.querySelector("[data-combobox-clear]");
     this._indicator = element.querySelector(".combobox-indicator");
-    this._groups = Array.from(element.querySelectorAll("[data-moo-combobox-group]"));
-    this._separators = Array.from(element.querySelectorAll("[data-moo-combobox-separator]"));
+    this._groups = Array.from(element.querySelectorAll("[data-combobox-group]"));
+    this._separators = Array.from(element.querySelectorAll("[data-combobox-separator]"));
     this._listeners = [];
     this._generated = [];
     this._startsOpen = this._menu.classList.contains("show");
-
-    this._empty = this._menu.querySelector("[data-moo-combobox-empty]");
+    this._empty = this._menu.querySelector("[data-combobox-empty]");
     if (!this._empty) {
       this._empty = this._document.createElement("li");
       this._empty.className = "combobox-empty";
       this._empty.hidden = true;
-      this._empty.dataset.mooComboboxEmpty = "true";
+      this._empty.dataset.comboboxEmpty = "true";
       this._empty.textContent = this._config.noResultsText;
       this._menu.appendChild(this._empty);
       this._generated.push(this._empty);
     }
-
-    this._liveRegion = element.querySelector("[data-moo-combobox-live]");
+    this._liveRegion = element.querySelector("[data-combobox-live]");
     if (!this._liveRegion) {
       this._liveRegion = this._document.createElement("span");
       this._liveRegion.className = "visually-hidden";
       this._liveRegion.setAttribute("aria-live", "polite");
-      this._liveRegion.dataset.mooComboboxLive = "true";
+      this._liveRegion.dataset.comboboxLive = "true";
       element.appendChild(this._liveRegion);
       this._generated.push(this._liveRegion);
     }
-
     instances.set(element, this);
     this._bindEvents();
     this._toggleClear(
-      this._input.dataset.mooComboboxSelected === "true" ||
-        element.dataset.mooComboboxSelected === "true"
+      this._input.dataset.comboboxSelected === "true" || element.dataset.comboboxSelected === "true"
     );
     this._syncMultipleValue();
     this._filterOptions({ open: this._startsOpen, activate: this._startsOpen });
@@ -76,7 +73,6 @@ export default class Combobox {
       this._closeMenu(false);
     }
   }
-
   dispose() {
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
@@ -85,38 +81,33 @@ export default class Combobox {
     this._closeMenu(false);
     this._generated.forEach((element) => element.remove());
     this._generated = [];
-    this._chipValue?.querySelectorAll("[data-moo-combobox-generated]").forEach((item) => item.remove());
-    this._valueStore?.querySelectorAll("[data-moo-combobox-generated]").forEach((item) => item.remove());
+    this._chipValue?.querySelectorAll("[data-combobox-generated]").forEach((item) => item.remove());
+    this._valueStore?.querySelectorAll("[data-combobox-generated]").forEach((item) => item.remove());
     instances.delete(this._element);
   }
-
   _listen(target, type, handler, options) {
     target?.addEventListener(type, handler, options);
     if (target) {
       this._listeners.push({ target, type, handler, options });
     }
   }
-
   _trigger(name, detail = {}) {
     return this._element.dispatchEvent(
       new this._window.CustomEvent(`${name}.moo.combobox`, {
         bubbles: true,
         cancelable: name === "show" || name === "hide",
-        detail,
+        detail
       })
     );
   }
-
   _optionGroupIsHidden(option) {
-    return option.closest("[data-moo-combobox-group]")?.hidden || false;
+    return option.closest("[data-combobox-group]")?.hidden || false;
   }
-
   _visibleOptions() {
     return this._options.filter(
       (option) => !option.hidden && !option.disabled && !this._optionGroupIsHidden(option)
     );
   }
-
   _syncGroupVisibility() {
     if (this._groups.length === 0) {
       return;
@@ -133,7 +124,6 @@ export default class Combobox {
       separator.hidden = visibleGroupCount < 2;
     });
   }
-
   _openMenu(emit = true) {
     if (this._menu.classList.contains("show")) {
       this._input.setAttribute("aria-expanded", "true");
@@ -148,7 +138,6 @@ export default class Combobox {
       this._trigger("shown");
     }
   }
-
   _closeMenu(emit = true) {
     const wasOpen = this._menu.classList.contains("show");
     if (wasOpen && emit && !this._trigger("hide")) {
@@ -157,24 +146,24 @@ export default class Combobox {
     this._menu.classList.remove("show");
     this._input.setAttribute("aria-expanded", "false");
     this._input.removeAttribute("aria-activedescendant");
-    this._options.forEach((option) => option.removeAttribute("aria-current"));
+    this._options.forEach((option) => {
+      option.removeAttribute("aria-current");
+      option.classList.remove("active");
+    });
     if (wasOpen && emit) {
       this._trigger("hidden");
     }
   }
-
   _optionLabel(option) {
     return option?.querySelector(".combobox-option__label")?.textContent?.trim() || "";
   }
-
   _selectedOptions() {
     return this._options.filter((option) => option.getAttribute("aria-selected") === "true");
   }
-
   _toggleClear(selected) {
     const value = selected ? "true" : "false";
-    this._element.dataset.mooComboboxSelected = value;
-    this._input.dataset.mooComboboxSelected = value;
+    this._element.dataset.comboboxSelected = value;
+    this._input.dataset.comboboxSelected = value;
     if (this._clearTrigger) {
       this._clearTrigger.hidden = !selected;
       if (this._indicator) {
@@ -182,14 +171,13 @@ export default class Combobox {
       }
     }
   }
-
   _createChip(option) {
     const value = option.dataset.value || "";
     const label = this._optionLabel(option);
     const chip = this._document.createElement("span");
     chip.className = "badge text-bg-secondary combobox-chip";
     chip.dataset.value = value;
-    chip.dataset.mooComboboxGenerated = "true";
+    chip.dataset.comboboxGenerated = "true";
     const labelElement = this._document.createElement("span");
     labelElement.className = "combobox-chip__label";
     labelElement.textContent = label;
@@ -198,13 +186,12 @@ export default class Combobox {
     remove.className = "combobox-chip__remove";
     remove.type = "button";
     remove.dataset.value = value;
-    remove.dataset.mooComboboxChipRemove = "true";
+    remove.dataset.comboboxChipRemove = "true";
     remove.setAttribute("aria-label", `Remove ${label}`);
     remove.append(this._chipIconTemplate?.content.cloneNode(true) || "x");
     chip.appendChild(remove);
     return chip;
   }
-
   _syncMultipleValue() {
     if (!this._isMultiple) {
       return;
@@ -215,26 +202,24 @@ export default class Combobox {
     }
     if (this._valueStore) {
       this._valueStore.replaceChildren();
-      const name = this._valueStore.dataset.mooComboboxName || "";
+      const name = this._valueStore.dataset.comboboxName || "";
       selected.forEach((option) => {
         const field = this._document.createElement("input");
         field.type = "hidden";
         field.name = name;
         field.value = option.dataset.value || "";
-        field.dataset.mooComboboxGenerated = "true";
+        field.dataset.comboboxGenerated = "true";
         this._valueStore.appendChild(field);
       });
     }
     this._toggleClear(selected.length > 0);
   }
-
   _emitChange() {
     const selected = this._selectedOptions();
     this._trigger("change", {
-      values: selected.map((option) => option.dataset.value || ""),
+      values: selected.map((option) => option.dataset.value || "")
     });
   }
-
   _removeChip(value) {
     const option = this._options.find((candidate) => candidate.dataset.value === value);
     if (!option) {
@@ -244,7 +229,6 @@ export default class Combobox {
     this._syncMultipleValue();
     this._emitChange();
   }
-
   _clearSelection(emit = true) {
     if (this._hidden) {
       this._hidden.value = "";
@@ -259,7 +243,6 @@ export default class Combobox {
       this._emitChange();
     }
   }
-
   _clearStaleSelection() {
     if (this._isMultiple) {
       this._input.value = "";
@@ -272,29 +255,75 @@ export default class Combobox {
     }
     const selected = this._selectedOptions()[0] || null;
     const label = this._optionLabel(selected);
-    if (!this._input.value || (label && normalize(this._input.value) === normalize(label))) {
+    if (!this._input.value || label && normalize(this._input.value) === normalize(label)) {
       return;
     }
     this._clearSelection();
     this._input.value = "";
   }
-
-  _setActiveOption(option) {
-    this._options.forEach((candidate) => candidate.toggleAttribute("aria-current", candidate === option));
+  _activeOption() {
+    const activeId = this._input.getAttribute("aria-activedescendant");
+    if (!activeId) {
+      return null;
+    }
+    return this._visibleOptions().find((option) => option.id === activeId) || null;
+  }
+  _selectedOption() {
+    if (this._isMultiple) {
+      return null;
+    }
+    return this._visibleOptions().find(
+      (option) => option.getAttribute("aria-selected") === "true"
+    ) || null;
+  }
+  _preferredActiveOption() {
+    return this._selectedOption() || this._visibleOptions()[0] || null;
+  }
+  _activatePreferredOptionIfNeeded() {
+    if (!this._activeOption()) {
+      this._setActiveOption(this._preferredActiveOption());
+    }
+  }
+  _setActiveOption(option, { scroll = true } = {}) {
+    this._options.forEach((candidate) => {
+      const active = candidate === option;
+      if (active) {
+        candidate.setAttribute("aria-current", "true");
+      } else {
+        candidate.removeAttribute("aria-current");
+      }
+      candidate.classList.toggle("active", active);
+    });
     if (!option) {
       this._input.removeAttribute("aria-activedescendant");
       return;
     }
     this._input.setAttribute("aria-activedescendant", option.id);
-    const optionRect = option.getBoundingClientRect();
-    const menuRect = this._menu.getBoundingClientRect();
-    if (optionRect.top < menuRect.top) {
-      this._menu.scrollTop -= menuRect.top - optionRect.top;
-    } else if (optionRect.bottom > menuRect.bottom) {
-      this._menu.scrollTop += optionRect.bottom - menuRect.bottom;
+    if (scroll) {
+      const optionRect = option.getBoundingClientRect();
+      const menuRect = this._menu.getBoundingClientRect();
+      if (optionRect.top < menuRect.top) {
+        this._menu.scrollTop -= menuRect.top - optionRect.top;
+      } else if (optionRect.bottom > menuRect.bottom) {
+        this._menu.scrollTop += optionRect.bottom - menuRect.bottom;
+      }
+    }
+  }
+  _activateOptionFromPointer(option, event) {
+    if (event.pointerType === "touch" || option.disabled || option.getAttribute("aria-disabled") === "true" || option === this._activeOption()) {
+      return;
+    }
+    this._setActiveOption(option, { scroll: false });
+  }
+  _restoreSelectedActiveOption() {
+    if (!this._menu.classList.contains("show")) {
+      return;
+    }
+    const selected = this._selectedOption();
+    if (selected) {
+      this._setActiveOption(selected, { scroll: false });
     }
   }
-
   _chooseOption(option) {
     if (!option || option.disabled) {
       return;
@@ -322,8 +351,7 @@ export default class Combobox {
     this._setActiveOption(option);
     this._emitChange();
   }
-
-  _filterOptions({ open = true, activate = true } = {}) {
+  _filterOptions({ open = true, activate = true, resetActive = false } = {}) {
     if (open) {
       this._openMenu();
     }
@@ -337,29 +365,44 @@ export default class Combobox {
     this._syncGroupVisibility();
     this._empty.hidden = count !== 0;
     this._liveRegion.textContent = count === 0 ? "No results" : `${count} result${count === 1 ? "" : "s"}`;
+    if (resetActive) {
+      this._setActiveOption(null, { scroll: false });
+    }
     if (activate) {
-      this._setActiveOption(this._visibleOptions()[0] || null);
+      this._activatePreferredOptionIfNeeded();
     }
   }
-
   _bindEvents() {
     this._listen(this._input, "focus", () => {
       this._openMenu();
-      if (!this._isMultiple && this._input.dataset.mooComboboxSelected === "true") {
+      if (!this._isMultiple && this._input.dataset.comboboxSelected === "true") {
         this._input.select();
       }
-      this._setActiveOption(this._visibleOptions()[0] || null);
+      this._activatePreferredOptionIfNeeded();
     });
     this._listen(this._input, "input", () => {
       if (!this._isMultiple) {
         this._clearSelection();
       }
-      this._filterOptions();
+      this._filterOptions({ resetActive: true });
+    });
+    this._listen(this._input, "blur", (event) => {
+      const nextTarget = event.relatedTarget;
+      if (nextTarget instanceof this._window.Node && this._element.contains(nextTarget)) {
+        return;
+      }
+      this._clearStaleSelection();
+    });
+    this._listen(this._input, "click", () => {
+      this._openMenu();
+      this._setActiveOption(this._preferredActiveOption());
     });
-    this._listen(this._input, "blur", () => this._clearStaleSelection());
-    this._listen(this._input, "click", () => this._openMenu());
     this._listen(this._input, "keydown", (event) => this._handleKeydown(event));
     this._options.forEach((option) => {
+      this._listen(option, "keydown", (event) => this._handleKeydown(event));
+      this._listen(option, "pointerenter", (event) => {
+        this._activateOptionFromPointer(option, event);
+      });
       this._listen(option, "click", () => {
         this._chooseOption(option);
         if (this._isMultiple) {
@@ -374,8 +417,9 @@ export default class Combobox {
       this._clearSelection();
       this._input.value = "";
       this._input.focus();
-      this._filterOptions();
+      this._filterOptions({ resetActive: true });
     });
+    this._listen(this._menu, "pointerleave", () => this._restoreSelectedActiveOption());
     this._listen(this._element, "click", (event) => this._handleRootClick(event));
     this._listen(this._document, "click", (event) => {
       if (event.target instanceof this._window.Node && !this._element.contains(event.target)) {
@@ -383,30 +427,24 @@ export default class Combobox {
       }
     });
   }
-
   _handleRootClick(event) {
     const target = event.target;
-    const trigger = target instanceof this._window.Element
-      ? target.closest("[data-moo-combobox-chip-remove]")
-      : null;
+    const trigger = target instanceof this._window.Element ? target.closest("[data-combobox-chip-remove]") : null;
     if (trigger) {
       event.preventDefault();
       this._removeChip(trigger.dataset.value || "");
       this._input.focus();
-    } else if (
-      this._isMultiple &&
-      target instanceof this._window.Element &&
-      target.closest(".combobox-chips")
-    ) {
+    } else if (this._isMultiple && target instanceof this._window.Element && target.closest(".combobox-chips")) {
       this._input.focus();
     }
   }
-
   _handleKeydown(event) {
     const available = this._visibleOptions();
     const current = available.findIndex(
       (option) => option.id === this._input.getAttribute("aria-activedescendant")
     );
+    const isNextKey = event.key === "ArrowDown" || event.key === "Down";
+    const isPreviousKey = event.key === "ArrowUp" || event.key === "Up";
     if (this._isMultiple && event.key === "Backspace" && this._input.value === "") {
       const selected = this._selectedOptions();
       const last = selected[selected.length - 1];
@@ -414,12 +452,15 @@ export default class Combobox {
         event.preventDefault();
         this._removeChip(last.dataset.value || "");
       }
-    } else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && available.length) {
+    } else if ((isNextKey || isPreviousKey) && available.length) {
       event.preventDefault();
       this._openMenu();
-      const offset = event.key === "ArrowDown" ? 1 : -1;
+      const offset = isNextKey ? 1 : -1;
       const next = current === -1 ? 0 : (current + offset + available.length) % available.length;
       this._setActiveOption(available[next]);
+      if (event.target !== this._input) {
+        this._input.focus({ preventScroll: true });
+      }
     } else if (event.key === "Enter") {
       const option = available[current];
       if (option) {
@@ -431,9 +472,12 @@ export default class Combobox {
       }
     } else if (event.key === "Escape") {
       this._closeMenu();
-      this._input.blur();
+      this._input.focus();
     } else if (event.key === "Tab") {
       this._closeMenu();
     }
   }
 }
+export {
+  Combobox as default
+};