@wpmoo/ui 0.9.0 → 1.0.0-rc.2

package/dist/js/combobox.js

@@ -279,8 +279,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,7 +356,7 @@ 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();
     }
   }
 
@@ -348,7 +366,7 @@ export default class Combobox {
       if (!this._isMultiple && this._input.dataset.mooComboboxSelected === "true") {
         this._input.select();
       }
-      this._setActiveOption(this._visibleOptions()[0] || null);
+      this._activateFirstOptionIfNeeded();
     });
     this._listen(this._input, "input", () => {
       if (!this._isMultiple) {
@@ -356,10 +374,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) {
@@ -407,6 +435,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 +444,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 +464,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

@@ -174,6 +174,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 +230,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 +245,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

@@ -47,6 +47,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 +65,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 +92,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 +644,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 +1207,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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmoo/ui",
-  "version": "0.9.0",
+  "version": "1.0.0-rc.2",
   "description": "Bootstrap markup. shadcn feel. A frontend-framework-free component system for server-rendered apps.",
   "license": "MIT",
   "author": "WPMoo (https://wpmoo.org)",
@@ -74,7 +74,7 @@
     "access": "public"
   },
   "devDependencies": {
-    "axe-core": "4.12.1",
-    "wrangler": "^4.112.0"
+    "axe-core": "4.13.0",
+    "wrangler": "^4.120.0"
   }
 }

package/scss/_facade-settings.scss

@@ -23,10 +23,10 @@
 //   Brand colors — any valid Sass color value:
 //     $primary        Default: #171717
 //     $secondary      Default: #f4f4f5
-//     $success        Default: #16803c
-//     $info           Default: #0f6e8c
-//     $warning        Default: #a15c00
-//     $danger         Default: #dc2626
+//     $success        Default: #047857
+//     $info           Default: #0369a1
+//     $warning        Default: #b45309
+//     $danger         Default: #e7000b
 //     $light          Default: #fafafa
 //     $dark           Default: #18181b
 //

package/scss/settings/_facade_public.scss

@@ -6,10 +6,10 @@
 
 $primary: #171717 !default;
 $secondary: #f4f4f5 !default;
-$success: #16803c !default;
-$info: #0f6e8c !default;
-$warning: #a15c00 !default;
-$danger: #dc2626 !default;
+$success: #047857 !default;
+$info: #0369a1 !default;
+$warning: #b45309 !default;
+$danger: #e7000b !default;
 $light: #fafafa !default;
 $dark: #18181b !default;