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

package/dist/js/combobox.js

@@ -1,3 +1,8 @@
+/*!
+ * Moo UI combobox.js v1.0.0-rc.3 (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() {
@@ -173,8 +178,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 +194,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 +203,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 +220,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);
       });
     }
@@ -279,8 +284,26 @@ export default class Combobox {
     this._input.value = "";
   }
 
+  _activeOption() {
+    const activeId = this._input.getAttribute("aria-activedescendant");
+    if (!activeId) {
+      return null;
+    }
+    return this._visibleOptions().find((option) => option.id === activeId) || null;
+  }
+
+  _activateFirstOptionIfNeeded() {
+    if (!this._activeOption()) {
+      this._setActiveOption(this._visibleOptions()[0] || null);
+    }
+  }
+
   _setActiveOption(option) {
-    this._options.forEach((candidate) => candidate.toggleAttribute("aria-current", candidate === option));
+    this._options.forEach((candidate) => {
+      const active = candidate === option;
+      candidate.toggleAttribute("aria-current", active);
+      candidate.classList.toggle("active", active);
+    });
     if (!option) {
       this._input.removeAttribute("aria-activedescendant");
       return;
@@ -338,17 +361,17 @@ export default class Combobox {
     this._empty.hidden = count !== 0;
     this._liveRegion.textContent = count === 0 ? "No results" : `${count} result${count === 1 ? "" : "s"}`;
     if (activate) {
-      this._setActiveOption(this._visibleOptions()[0] || null);
+      this._activateFirstOptionIfNeeded();
     }
   }
 
   _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._activateFirstOptionIfNeeded();
     });
     this._listen(this._input, "input", () => {
       if (!this._isMultiple) {
@@ -356,10 +379,20 @@ export default class Combobox {
       }
       this._filterOptions();
     });
-    this._listen(this._input, "blur", () => this._clearStaleSelection());
-    this._listen(this._input, "click", () => this._openMenu());
+    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._visibleOptions()[0] || null);
+    });
     this._listen(this._input, "keydown", (event) => this._handleKeydown(event));
     this._options.forEach((option) => {
+      this._listen(option, "keydown", (event) => this._handleKeydown(event));
       this._listen(option, "click", () => {
         this._chooseOption(option);
         if (this._isMultiple) {
@@ -387,7 +420,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();
@@ -407,6 +440,8 @@ export default class Combobox {
     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 +449,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,7 +469,7 @@ export default class Combobox {
       }
     } else if (event.key === "Escape") {
       this._closeMenu();
-      this._input.blur();
+      this._input.focus();
     } else if (event.key === "Tab") {
       this._closeMenu();
     }

package/dist/js/context-menu.js

@@ -1,3 +1,8 @@
+/*!
+ * Moo UI context-menu.js v1.0.0-rc.3 (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) {
@@ -174,6 +179,19 @@ export default class ContextMenu {
     this._openMethod = "pointer";
   }
 
+  _handleFallbackKeydown(event) {
+    if (event.key !== " " && event.key !== "Spacebar") {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    if (this._menu.classList.contains("show")) {
+      this._dropdown.hide();
+      return;
+    }
+    this._open(this._fallback, null, "fallback-keyboard");
+  }
+
   _handleMenuClick(event) {
     const item = menuItemFromEvent(event);
     if (!item) {
@@ -217,6 +235,7 @@ export default class ContextMenu {
     this._listen(this._element, "contextmenu", (event) => this._handleContextMenu(event));
     this._listen(this._element, "keydown", (event) => this._handleKeydown(event));
     this._listen(this._fallback, "click", () => this._handleFallbackClick());
+    this._listen(this._fallback, "keydown", (event) => this._handleFallbackKeydown(event));
     this._listen(this._menu, "click", (event) => this._handleMenuClick(event));
     this._listen(this._fallback, "show.bs.dropdown", (event) => {
       if (!this._trigger("show", true)) {
@@ -231,7 +250,9 @@ export default class ContextMenu {
       // highlight instead of a focus ring competing with it. A keyboard-
       // driven open (Shift+F10/ContextMenu key) still lands on the first
       // item, matching that same native arrow-key-open convention.
-      if (this._openMethod === "keyboard") {
+      if (this._openMethod === "fallback-keyboard") {
+        this._fallback.focus();
+      } else if (this._openMethod === "keyboard") {
         this._menuItems()[0]?.focus();
       } else {
         this._menu.focus();

package/dist/js/datatable.js

@@ -1,3 +1,8 @@
+/*!
+ * Moo UI datatable.js v1.0.0-rc.3 (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) {
@@ -47,6 +52,8 @@ export default class DataTable {
     this._searchTerm = "";
     this._tooltips = [];
     this._filterMode = element.dataset.datatableFilterMode || "inline";
+    this._reparentedRowMenus = new Map();
+    this._reparentedRowMenuByTrigger = new WeakMap();
 
     this._rows = Array.from(this._tbody.querySelectorAll(":scope > tr[data-datatable-row]")).map((tr, index) => ({
       element: tr,
@@ -63,9 +70,12 @@ export default class DataTable {
     this._render();
     this._initBulkTooltips();
     this._initViewToggle();
+    this._initRowActionDropdowns();
   }
 
   dispose() {
+    this._disposeRowActionDropdowns();
+    this._restoreRowActionMenus();
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
     });
@@ -87,6 +97,141 @@ export default class DataTable {
     this._listeners.push({ target, type, handler, options });
   }
 
+  // Row menus are authored next to their trigger so the public HTML stays
+  // inspectable, but when opened they are temporarily moved under body.
+  // That keeps the menu out of the scroll wrapper's layout math, so Safari
+  // cannot clip it at the rounded frame edge or shift the visible table
+  // slice while Popper positions it against the viewport.
+  // Table and card views both wrap row actions in .table-row-actions, but
+  // .table-responsive only contains the table view; card triggers must be
+  // selected separately so both views get the same fixed Popper config.
+  _rowActionTriggers() {
+    return this._element.querySelectorAll(
+      ".table-responsive .table-row-actions [data-bs-toggle=\"dropdown\"], [data-datatable-card] .table-row-actions [data-bs-toggle=\"dropdown\"]"
+    );
+  }
+
+  _initRowActionDropdowns() {
+    const Dropdown = this._bootstrap("Dropdown");
+    if (!Dropdown) {
+      return;
+    }
+    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,
+              },
+            },
+          ],
+        }),
+      });
+    });
+  }
+
+  // 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.
+  _disposeRowActionDropdowns() {
+    const Dropdown = this._bootstrap("Dropdown");
+    if (!Dropdown) {
+      return;
+    }
+    this._rowActionTriggers().forEach((trigger) => {
+      const instance = Dropdown.getInstance(trigger);
+      if (!instance) {
+        return;
+      }
+      instance.hide();
+      instance.dispose();
+    });
+  }
+
+  _rowActionMenuForTrigger(trigger) {
+    if (!trigger?.closest?.(".table-row-actions")) {
+      return null;
+    }
+    return trigger.closest(".dropdown")?.querySelector(":scope > .dropdown-menu") || null;
+  }
+
+  _rowActionOwnerIdForTrigger(trigger) {
+    const rowId = trigger?.closest?.("tr[data-datatable-row]")?.id;
+    if (rowId) {
+      return rowId;
+    }
+    return trigger?.closest?.("[data-datatable-card]")?.getAttribute("data-datatable-card-for") || "";
+  }
+
+  _reparentRowActionMenu(trigger) {
+    const menu = this._rowActionMenuForTrigger(trigger);
+    if (!menu || this._reparentedRowMenus.has(menu)) {
+      return;
+    }
+    const ownerId = this._rowActionOwnerIdForTrigger(trigger);
+    if (ownerId) {
+      menu.setAttribute("data-datatable-row-action-owner", ownerId);
+    }
+    if (trigger.id) {
+      menu.setAttribute("data-datatable-row-action-trigger", trigger.id);
+    }
+    this._reparentedRowMenus.set(menu, {
+      parent: menu.parentNode,
+      nextSibling: menu.nextSibling,
+      trigger,
+    });
+    this._reparentedRowMenuByTrigger.set(trigger, menu);
+    this._document.body.appendChild(menu);
+  }
+
+  _restoreRowActionMenuForTrigger(trigger) {
+    const menu = this._reparentedRowMenuByTrigger.get(trigger) || this._rowActionMenuForTrigger(trigger);
+    if (menu) {
+      this._restoreRowActionMenu(menu);
+    }
+  }
+
+  _restoreRowActionMenu(menu) {
+    const original = this._reparentedRowMenus.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._reparentedRowMenuByTrigger.delete(trigger);
+    }
+    menu.removeAttribute("data-datatable-row-action-owner");
+    menu.removeAttribute("data-datatable-row-action-trigger");
+    this._reparentedRowMenus.delete(menu);
+  }
+
+  _restoreRowActionMenus() {
+    Array.from(this._reparentedRowMenus.keys()).forEach((menu) => {
+      this._restoreRowActionMenu(menu);
+    });
+  }
+
   _bootstrap(name) {
     return this._window.bootstrap?.[name] || null;
   }
@@ -504,35 +649,62 @@ export default class DataTable {
     if (!template) {
       return;
     }
-    template.parentNode
-      .querySelectorAll("[data-datatable-page-number], [data-datatable-page-ellipsis]")
-      .forEach((node) => node.remove());
 
     const pages = this._pageWindow(this._currentPage, pageCount);
-    const fragment = this._document.createDocumentFragment();
-    pages.forEach((page) => {
-      const li = this._document.createElement("li");
-      li.className = "page-item";
-      if (page === "…") {
-        li.dataset.datatablePageEllipsis = "";
-        li.innerHTML = '<span class="page-link">…</span>';
-      } else {
-        li.dataset.datatablePageNumber = String(page);
-        if (page === this._currentPage) {
-          li.classList.add("active");
-          li.setAttribute("aria-current", "page");
+    const existing = Array.from(
+      template.parentNode.querySelectorAll(
+        "[data-datatable-page-number], [data-datatable-page-ellipsis]"
+      )
+    );
+    const existingWindow = existing.map((node) =>
+      node.dataset.datatablePageEllipsis === undefined
+        ? Number(node.dataset.datatablePageNumber)
+        : "…"
+    );
+    // Same node-reuse rationale as the row-reorder skip above: rebuilding
+    // every page-number button on each click destroys and recreates the one
+    // the user just clicked, which blurs it (losing the focus ring and any
+    // keyboard position). The page window is unchanged on most clicks (any
+    // dataset small enough to show every page, or a prev/next inside an
+    // already-visible window), so only rebuild when the window itself
+    // differs; otherwise just resync which node is active below.
+    const windowChanged =
+      existingWindow.length !== pages.length ||
+      existingWindow.some((page, index) => page !== pages[index]);
+
+    if (windowChanged) {
+      existing.forEach((node) => node.remove());
+      const fragment = this._document.createDocumentFragment();
+      pages.forEach((page) => {
+        const li = this._document.createElement("li");
+        li.className = "page-item";
+        if (page === "…") {
+          li.dataset.datatablePageEllipsis = "";
+          li.innerHTML = '<span class="page-link">…</span>';
+        } else {
+          li.dataset.datatablePageNumber = String(page);
+          const button = this._document.createElement("button");
+          button.type = "button";
+          button.className = "page-link";
+          button.textContent = String(page);
+          button.setAttribute("aria-label", `Go to page ${page}`);
+          button.dataset.datatablePageGo = String(page);
+          li.appendChild(button);
         }
-        const button = this._document.createElement("button");
-        button.type = "button";
-        button.className = "page-link";
-        button.textContent = String(page);
-        button.setAttribute("aria-label", `Go to page ${page}`);
-        button.dataset.datatablePageGo = String(page);
-        li.appendChild(button);
+        fragment.appendChild(li);
+      });
+      template.parentNode.insertBefore(fragment, template);
+    }
+
+    template.parentNode.querySelectorAll("[data-datatable-page-number]").forEach((li) => {
+      const isActive = Number(li.dataset.datatablePageNumber) === this._currentPage;
+      li.classList.toggle("active", isActive);
+      if (isActive) {
+        li.setAttribute("aria-current", "page");
+      } else {
+        li.removeAttribute("aria-current");
       }
-      fragment.appendChild(li);
     });
-    template.parentNode.insertBefore(fragment, template);
   }
 
   _renderPageSize() {
@@ -1040,11 +1212,13 @@ export default class DataTable {
     // no-op for as long as the dropdown stays open, however it gets
     // re-triggered.
     this._listen(this._element, "show.bs.dropdown", (event) => {
+      this._reparentRowActionMenu(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._bootstrap("Tooltip")?.getInstance(event.target)?.enable();
       if (event.target.matches("[data-datatable-filter-menu-trigger]")) {
         this._showFilterPickerPanel();