@wpmoo/ui 1.0.0-rc.2 → 1.0.0-rc.4

package/dist/js/combobox.js

@@ -1,3 +1,8 @@
+/*!
+ * Moo UI combobox.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
 const instances = new WeakMap();
 const normalize = (value) => value.trim().toLowerCase();
 
@@ -30,36 +35,36 @@ export default class Combobox {
       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);
     }
@@ -67,8 +72,8 @@ export default class Combobox {
     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 });
@@ -85,8 +90,8 @@ 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);
   }
 
@@ -108,7 +113,7 @@ export default class Combobox {
   }
 
   _optionGroupIsHidden(option) {
-    return option.closest("[data-moo-combobox-group]")?.hidden || false;
+    return option.closest("[data-combobox-group]")?.hidden || false;
   }
 
   _visibleOptions() {
@@ -157,7 +162,10 @@ 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");
     }
@@ -173,8 +181,8 @@ export default class Combobox {
 
   _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) {
@@ -189,7 +197,7 @@ export default class Combobox {
     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,7 +206,7 @@ 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);
@@ -215,13 +223,13 @@ 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);
       });
     }
@@ -287,16 +295,35 @@ export default class Combobox {
     return this._visibleOptions().find((option) => option.id === activeId) || null;
   }
 
-  _activateFirstOptionIfNeeded() {
+  _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._visibleOptions()[0] || null);
+      this._setActiveOption(this._preferredActiveOption());
     }
   }
 
-  _setActiveOption(option) {
+  _setActiveOption(option, { scroll = true } = {}) {
     this._options.forEach((candidate) => {
       const active = candidate === option;
-      candidate.toggleAttribute("aria-current", active);
+      if (active) {
+        candidate.setAttribute("aria-current", "true");
+      } else {
+        candidate.removeAttribute("aria-current");
+      }
       candidate.classList.toggle("active", active);
     });
     if (!option) {
@@ -304,12 +331,36 @@ export default class Combobox {
       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 });
     }
   }
 
@@ -341,7 +392,7 @@ export default class Combobox {
     this._emitChange();
   }
 
-  _filterOptions({ open = true, activate = true } = {}) {
+  _filterOptions({ open = true, activate = true, resetActive = false } = {}) {
     if (open) {
       this._openMenu();
     }
@@ -355,24 +406,27 @@ 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._activateFirstOptionIfNeeded();
+      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._activateFirstOptionIfNeeded();
+      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;
@@ -383,11 +437,14 @@ export default class Combobox {
     });
     this._listen(this._input, "click", () => {
       this._openMenu();
-      this._setActiveOption(this._visibleOptions()[0] || null);
+      this._setActiveOption(this._preferredActiveOption());
     });
     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) {
@@ -402,8 +459,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)) {
@@ -415,7 +473,7 @@ export default class Combobox {
   _handleRootClick(event) {
     const target = event.target;
     const trigger = target instanceof this._window.Element
-      ? target.closest("[data-moo-combobox-chip-remove]")
+      ? target.closest("[data-combobox-chip-remove]")
       : null;
     if (trigger) {
       event.preventDefault();

package/dist/js/context-menu.js

@@ -1,3 +1,8 @@
+/*!
+ * Moo UI context-menu.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
 const instances = new WeakMap();
 
 function pointerRect(event) {

package/dist/js/datatable.js

@@ -1,3 +1,8 @@
+/*!
+ * Moo UI datatable.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Copyright 2026 WPMoo (https://wpmoo.org)
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
 const instances = new WeakMap();
 
 function normalize(value) {