@wpmoo/ui 1.0.0-rc.3 → 1.0.0-rc.5

package/dist/js/chart.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI chart.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI chart.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/chart.min.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI chart.min.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI chart.min.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/combobox.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI combobox.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI combobox.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -162,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");
     }
@@ -292,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) {
@@ -309,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 });
     }
   }
 
@@ -346,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();
     }
@@ -360,8 +406,11 @@ 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();
     }
   }
 
@@ -371,13 +420,13 @@ export default class Combobox {
       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;
@@ -388,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) {
@@ -407,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)) {

package/dist/js/context-menu.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI context-menu.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI context-menu.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/datatable.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datatable.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI datatable.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -54,6 +54,8 @@ export default class DataTable {
     this._filterMode = element.dataset.datatableFilterMode || "inline";
     this._reparentedRowMenus = new Map();
     this._reparentedRowMenuByTrigger = new WeakMap();
+    this._reparentedSortMenus = new Map();
+    this._reparentedSortMenuByTrigger = new WeakMap();
 
     this._rows = Array.from(this._tbody.querySelectorAll(":scope > tr[data-datatable-row]")).map((tr, index) => ({
       element: tr,
@@ -71,11 +73,14 @@ export default class DataTable {
     this._initBulkTooltips();
     this._initViewToggle();
     this._initRowActionDropdowns();
+    this._initSortDropdowns();
   }
 
   dispose() {
     this._disposeRowActionDropdowns();
+    this._disposeSortDropdowns();
     this._restoreRowActionMenus();
+    this._restoreSortMenus();
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
     });
@@ -118,30 +123,52 @@ export default class DataTable {
     }
     this._rowActionTriggers().forEach((trigger) => {
       Dropdown.getOrCreateInstance(trigger, {
-        popperConfig: (defaultConfig) => ({
-          ...defaultConfig,
-          strategy: "fixed",
-          modifiers: [
-            ...(defaultConfig.modifiers || []),
-            {
-              name: "flip",
-              options: {
-                fallbackPlacements: ["top-end", "top-start", "bottom-end", "bottom-start"],
-              },
-            },
-            {
-              name: "preventOverflow",
-              options: {
-                boundary: "viewport",
-                padding: 8,
-              },
-            },
-          ],
-        }),
+        popperConfig: (defaultConfig) => this._clippingSafePopperConfig(defaultConfig),
       });
     });
   }
 
+  _sortTriggers() {
+    return this._element.querySelectorAll(
+      ".datatable-sort [data-bs-toggle=\"dropdown\"]"
+    );
+  }
+
+  _initSortDropdowns() {
+    const Dropdown = this._bootstrap("Dropdown");
+    if (!Dropdown) {
+      return;
+    }
+    this._sortTriggers().forEach((trigger) => {
+      Dropdown.getOrCreateInstance(trigger, {
+        popperConfig: (defaultConfig) => this._clippingSafePopperConfig(defaultConfig),
+      });
+    });
+  }
+
+  _clippingSafePopperConfig(defaultConfig) {
+    return {
+      ...defaultConfig,
+      strategy: "fixed",
+      modifiers: [
+        ...(defaultConfig.modifiers || []),
+        {
+          name: "flip",
+          options: {
+            fallbackPlacements: ["top-end", "top-start", "bottom-end", "bottom-start"],
+          },
+        },
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: "viewport",
+            padding: 8,
+          },
+        },
+      ],
+    };
+  }
+
   // dispose() alone leaves any open row-action Dropdown's show/aria-expanded/
   // data-bs-popper state and Bootstrap instance behind; hide and dispose each
   // one first so a subsequent re-init starts from a clean state.
@@ -160,6 +187,21 @@ export default class DataTable {
     });
   }
 
+  _disposeSortDropdowns() {
+    const Dropdown = this._bootstrap("Dropdown");
+    if (!Dropdown) {
+      return;
+    }
+    this._sortTriggers().forEach((trigger) => {
+      const instance = Dropdown.getInstance(trigger);
+      if (!instance) {
+        return;
+      }
+      instance.hide();
+      instance.dispose();
+    });
+  }
+
   _rowActionMenuForTrigger(trigger) {
     if (!trigger?.closest?.(".table-row-actions")) {
       return null;
@@ -232,6 +274,68 @@ export default class DataTable {
     });
   }
 
+  _sortMenuForTrigger(trigger) {
+    if (!trigger?.closest?.(".datatable-sort")) {
+      return null;
+    }
+    return (
+      this._reparentedSortMenuByTrigger.get(trigger) ||
+      trigger?.closest?.(".dropdown")?.querySelector(":scope > .dropdown-menu") ||
+      null
+    );
+  }
+
+  // Sort menus are authored inside their table header, but must leave the
+  // overflow frame while open just like row-action menus do.
+  _reparentSortMenu(trigger) {
+    const menu = this._sortMenuForTrigger(trigger);
+    if (!menu || this._reparentedSortMenus.has(menu)) {
+      return;
+    }
+    this._reparentedSortMenus.set(menu, {
+      parent: menu.parentNode,
+      nextSibling: menu.nextSibling,
+      trigger,
+      owner: trigger.closest(".datatable-sort"),
+    });
+    this._reparentedSortMenuByTrigger.set(trigger, menu);
+    this._document.body.appendChild(menu);
+  }
+
+  _restoreSortMenuForTrigger(trigger) {
+    const menu = this._reparentedSortMenuByTrigger.get(trigger) || this._sortMenuForTrigger(trigger);
+    if (menu) {
+      this._restoreSortMenu(menu);
+    }
+  }
+
+  _restoreSortMenu(menu) {
+    const original = this._reparentedSortMenus.get(menu);
+    if (!original) {
+      return;
+    }
+    const { parent, nextSibling, trigger } = original;
+    if (parent?.isConnected) {
+      if (nextSibling?.parentNode === parent) {
+        parent.insertBefore(menu, nextSibling);
+      } else {
+        parent.appendChild(menu);
+      }
+    } else {
+      menu.remove();
+    }
+    if (trigger) {
+      this._reparentedSortMenuByTrigger.delete(trigger);
+    }
+    this._reparentedSortMenus.delete(menu);
+  }
+
+  _restoreSortMenus() {
+    Array.from(this._reparentedSortMenus.keys()).forEach((menu) => {
+      this._restoreSortMenu(menu);
+    });
+  }
+
   _bootstrap(name) {
     return this._window.bootstrap?.[name] || null;
   }
@@ -785,9 +889,13 @@ export default class DataTable {
       return;
     }
     const menu = trigger.closest(".dropdown-menu");
-    const key = menu
-      ?.closest(".datatable-sort")
-      ?.querySelector("[data-datatable-sort-key]")?.dataset.datatableSortKey;
+    const sort =
+      menu?.closest(".datatable-sort") ||
+      this._reparentedSortMenus.get(menu)?.owner;
+    if (!sort || !this._element.contains(sort)) {
+      return;
+    }
+    const key = sort.querySelector("[data-datatable-sort-key]")?.dataset.datatableSortKey;
     if (!key) {
       return;
     }
@@ -1175,7 +1283,6 @@ export default class DataTable {
     });
 
     this._listen(this._element, "click", (event) => {
-      this._handleSortAction(event);
       this._handleFilterPickerClick(event);
       this._handleFilterOptionClick(event);
       this._handleFilterToggleClick(event);
@@ -1190,6 +1297,7 @@ export default class DataTable {
         this._handleSelectRow(event);
       }
     });
+    this._listen(this._document, "click", (event) => this._handleSortAction(event));
 
     // Bound to the document, not this._element: a checkbox click does not
     // reliably move focus into the table (WebKit never focuses form
@@ -1213,12 +1321,14 @@ export default class DataTable {
     // re-triggered.
     this._listen(this._element, "show.bs.dropdown", (event) => {
       this._reparentRowActionMenu(event.target);
+      this._reparentSortMenu(event.target);
       const tooltip = this._bootstrap("Tooltip")?.getInstance(event.target);
       tooltip?.hide();
       tooltip?.disable();
     });
     this._listen(this._element, "hidden.bs.dropdown", (event) => {
       this._restoreRowActionMenuForTrigger(event.target);
+      this._restoreSortMenuForTrigger(event.target);
       this._bootstrap("Tooltip")?.getInstance(event.target)?.enable();
       if (event.target.matches("[data-datatable-filter-menu-trigger]")) {
         this._showFilterPickerPanel();

package/dist/js/datepicker.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datepicker.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI datepicker.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */

package/dist/js/datepicker.min.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI datepicker.min.js v1.0.0-rc.3 (https://ui.wpmoo.org/)
+ * Moo UI datepicker.min.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */