@wpmoo/ui 0.9.0 → 1.0.0-rc.10

package/dist/js/datatable.js

@@ -1,18 +1,61 @@
-const instances = new WeakMap();
+/*!
+ * Moo UI datatable.js v1.0.0-rc.10 (https://wpmoo.org/)
+ * Copyright 2026 WPMoo Authors
+ * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
+ */
+
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+
+// src/js/theme-owner.js
+var OWNER_SELECTOR = '.moo-ui[data-bs-theme="light"], .moo-ui[data-bs-theme="dark"]';
+var PORTAL_SELECTOR = "[data-moo-overlay-host]";
+function documentFor(node) {
+  if (node?.nodeType === 9) return node;
+  if (node?.ownerDocument) return node.ownerDocument;
+  return typeof document === "undefined" ? null : document;
+}
+__name(documentFor, "documentFor");
+function isResolvedOwner(node) {
+  return Boolean(node?.matches?.(OWNER_SELECTOR));
+}
+__name(isResolvedOwner, "isResolvedOwner");
+function ownerRootFor(node) {
+  const ownerDocument = documentFor(node);
+  if (node?.nodeType === 9 || node === ownerDocument?.body) {
+    return ownerDocument?.body?.firstElementChild || null;
+  }
+  return node;
+}
+__name(ownerRootFor, "ownerRootFor");
+function findThemeOwner(node = typeof document === "undefined" ? null : document) {
+  const start = ownerRootFor(node);
+  if (!start) return null;
+  if (isResolvedOwner(start)) return start;
+  return start.closest?.(OWNER_SELECTOR) || null;
+}
+__name(findThemeOwner, "findThemeOwner");
+function ownerPortalRoot(owner) {
+  if (!owner) return null;
+  return Array.from(owner.children || []).find(
+    (child) => child.matches?.(PORTAL_SELECTOR)
+  ) || owner;
+}
+__name(ownerPortalRoot, "ownerPortalRoot");
 
+// src/js/components/datatable.js
+var instances = /* @__PURE__ */ new WeakMap();
 function normalize(value) {
   return (value ?? "").toString().trim().toLowerCase();
 }
-
-export default class DataTable {
+__name(normalize, "normalize");
+var _DataTable = class _DataTable {
   static getInstance(element) {
     return element?.nodeType === 1 ? instances.get(element) || null : null;
   }
-
   static getOrCreateInstance(element, config = {}) {
-    return DataTable.getInstance(element) || new DataTable(element, config);
+    return _DataTable.getInstance(element) || new _DataTable(element, config);
   }
-
   constructor(element, config = {}) {
     if (element?.nodeType !== 1 || !element.matches(".datatable")) {
       throw new TypeError("DataTable requires a .datatable root element.");
@@ -21,7 +64,6 @@ export default class DataTable {
     if (existing) {
       return existing;
     }
-
     this._element = element;
     this._document = element.ownerDocument;
     this._window = this._document.defaultView;
@@ -34,38 +76,44 @@ export default class DataTable {
     const cardById = new Map(
       Array.from(element.querySelectorAll("[data-datatable-card]")).map((card) => [card.dataset.datatableCardFor, card])
     );
-
     this._config = { ...config };
     this._listeners = [];
     this._pageSize = Number(element.dataset.datatablePageSize) || 10;
     this._currentPage = 1;
     this._sortKey = null;
     this._sortDirection = null;
-    this._selectedIds = new Set();
-    this._facetSelections = new Map();
-    this._visibleFacets = new Map();
+    this._selectedIds = /* @__PURE__ */ new Set();
+    this._facetSelections = /* @__PURE__ */ new Map();
+    this._visibleFacets = /* @__PURE__ */ new Map();
     this._searchTerm = "";
     this._tooltips = [];
     this._filterMode = element.dataset.datatableFilterMode || "inline";
-
+    this._reparentedRowMenus = /* @__PURE__ */ new Map();
+    this._reparentedRowMenuByTrigger = /* @__PURE__ */ new WeakMap();
+    this._reparentedSortMenus = /* @__PURE__ */ new Map();
+    this._reparentedSortMenuByTrigger = /* @__PURE__ */ new WeakMap();
     this._rows = Array.from(this._tbody.querySelectorAll(":scope > tr[data-datatable-row]")).map((tr, index) => ({
       element: tr,
       cardElement: cardById.get(tr.id) || null,
       index,
       search: normalize(tr.dataset.datatableSearch),
-      facets: this._readFacets(tr),
+      facets: this._readFacets(tr)
     }));
     this._readInitialFacetVisibility();
     this._readInitialSort();
-
     instances.set(element, this);
     this._bindEvents();
     this._render();
     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);
     });
@@ -74,11 +122,9 @@ export default class DataTable {
     this._tooltips = [];
     instances.delete(this._element);
   }
-
   getSelectedIds() {
     return Array.from(this._selectedIds);
   }
-
   _listen(target, type, handler, options) {
     if (!target) {
       return;
@@ -86,11 +132,231 @@ export default class DataTable {
     target.addEventListener(type, handler, options);
     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 to their nearest
+  // Moo owner portal.
+  // 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.
+  // Public Dropdown compositions need the same behavior as the built-in
+  // row actions. Scope by row/card ownership so toolbar and sort menus keep
+  // their own lifecycle.
+  _rowActionTriggers() {
+    return this._element.querySelectorAll(
+      'tr[data-datatable-row] .dropdown [data-bs-toggle="dropdown"], [data-datatable-card] .dropdown [data-bs-toggle="dropdown"]'
+    );
+  }
+  _initRowActionDropdowns() {
+    const Dropdown = this._bootstrap("Dropdown");
+    if (!Dropdown) {
+      return;
+    }
+    this._rowActionTriggers().forEach((trigger) => {
+      Dropdown.getOrCreateInstance(trigger, {
+        popperConfig: /* @__PURE__ */ __name((defaultConfig) => this._clippingSafePopperConfig(defaultConfig), "popperConfig")
+      });
+    });
+  }
+  _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: /* @__PURE__ */ __name((defaultConfig) => this._clippingSafePopperConfig(defaultConfig), "popperConfig")
+      });
+    });
+  }
+  _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.
+  _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();
+    });
+  }
+  _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?.("tr[data-datatable-row], [data-datatable-card]")) {
+      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,
+      owner: findThemeOwner(trigger)
+    });
+    this._reparentedRowMenuByTrigger.set(trigger, menu);
+    this._portalRoot(trigger).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, owner } = original;
+    if (owner?.isConnected === false) {
+      menu.remove();
+    } else 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);
+    });
+  }
+  _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"),
+      themeOwner: findThemeOwner(trigger)
+    });
+    this._reparentedSortMenuByTrigger.set(trigger, menu);
+    this._portalRoot(trigger).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, themeOwner } = original;
+    if (themeOwner?.isConnected === false) {
+      menu.remove();
+    } else 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;
   }
-
+  _portalRoot(trigger = this._element) {
+    return ownerPortalRoot(findThemeOwner(trigger)) || this._document.body || this._document.documentElement;
+  }
   // The bulk-actions bar's icon-only buttons carry data-bs-title instead of
   // a bare title attribute so Bootstrap's own Tooltip owns the hover/focus
   // affordance (matching the rest of Moo's icon-button contracts) rather
@@ -107,69 +373,73 @@ export default class DataTable {
     if (!Tooltip) {
       return;
     }
-    // Bootstrap's Data store allows only one bound component instance per
-    // element (dom/data.js logs "doesn't allow more than one instance per
-    // element" and silently drops the second). The bulk-action option
-    // trigger (e.g. "Update status") carries both data-bs-title and
-    // data-bs-toggle="dropdown" on the same button, so it must keep its
-    // Dropdown instance and skip the JS-managed Tooltip here; its
-    // aria-label already gives it an accessible name without the hover
-    // affordance.
-    this._element
-      .querySelectorAll("[data-datatable-bulk-actions] [data-bs-title]:not([data-bs-toggle=\"dropdown\"])")
-      .forEach((trigger) => {
-        this._tooltips.push(Tooltip.getOrCreateInstance(trigger, { animation: false }));
-      });
+    this._element.querySelectorAll('[data-datatable-bulk-actions] [data-bs-title]:not([data-bs-toggle="dropdown"])').forEach((trigger) => {
+      this._tooltips.push(Tooltip.getOrCreateInstance(trigger, {
+        animation: false,
+        container: this._portalRoot(trigger)
+      }));
+    });
   }
-
   _hideBulkTooltips({ blur = false } = {}) {
     this._tooltips.forEach((tooltip) => {
       tooltip.hide();
     });
-
     if (!blur) {
       return;
     }
-
     const active = this._document.activeElement;
     if (active?.closest?.("[data-datatable-bulk-actions]")) {
       active.blur();
     }
   }
-
-  // responsive_mode="toggle" renders both the table and the card list and
-  // lets the reader pick between them (Odoo's List/Kanban switcher, not a
-  // developer-chosen breakpoint), so the choice belongs to the reader across
-  // visits, not just the current render.
+  // Auto mode remembers independent narrow/wide choices; toggle mode keeps
+  // its existing viewport-independent preference.
   _initViewToggle() {
     const toggles = Array.from(this._element.querySelectorAll(".datatable-view-toggle"));
     if (!toggles.length) {
       return;
     }
     const inputs = toggles.flatMap((toggle) => Array.from(toggle.querySelectorAll("input")));
-    const storageKey = `moo-datatable-view:${this._element.id}`;
-    const setView = (value, { persist = false } = {}) => {
+    const breakpoint = this._window.getComputedStyle(this._element).getPropertyValue("--moo-datatable-responsive-breakpoint").trim();
+    const auto = this._element.hasAttribute("data-datatable-responsive-breakpoint");
+    const media = auto && breakpoint ? this._window.matchMedia(`(min-width: ${breakpoint})`) : null;
+    const preferences = /* @__PURE__ */ new Map();
+    const storageKey = /* @__PURE__ */ __name(() => `moo-datatable-view:${this._element.id}${media ? media.matches ? ":wide" : ":narrow" : ""}`, "storageKey");
+    const setView = /* @__PURE__ */ __name((value, { persist = false } = {}) => {
+      if (this._element.dataset.datatableView !== value) {
+        const Dropdown = this._bootstrap("Dropdown");
+        [...this._rowActionTriggers(), ...this._sortTriggers()].forEach((trigger) => {
+          Dropdown?.getInstance(trigger)?.hide();
+        });
+      }
       this._element.dataset.datatableView = value;
       inputs.forEach((input) => {
         input.checked = input.value === value;
       });
       if (persist) {
+        preferences.set(storageKey(), value);
         try {
-          this._window.localStorage.setItem(storageKey, value);
+          this._window.localStorage.setItem(storageKey(), value);
         } catch {
-          // Storage may be unavailable (private browsing); the toggle still works for this session.
         }
       }
-    };
-    let stored = null;
-    try {
-      stored = this._window.localStorage.getItem(storageKey);
-    } catch {
-      stored = null;
-    }
-    if (stored === "table" || stored === "cards") {
-      setView(stored);
+    }, "setView");
+    const restoreView = /* @__PURE__ */ __name(() => {
+      let stored = preferences.get(storageKey());
+      try {
+        stored ?? (stored = this._window.localStorage.getItem(storageKey()));
+      } catch {
+      }
+      setView(stored === "table" || stored === "cards" ? stored : media ? media.matches ? "table" : "cards" : this._element.dataset.datatableView);
+    }, "restoreView");
+    if (!auto || media) {
+      restoreView();
+    } else {
+      inputs.forEach((input) => {
+        input.checked = false;
+      });
     }
+    if (media) this._listen(media, "change", restoreView);
     toggles.forEach((toggle) => {
       this._listen(toggle, "change", (event) => {
         const value = event.target.value;
@@ -180,7 +450,6 @@ export default class DataTable {
       });
     });
   }
-
   _readFacets(tr) {
     const facets = {};
     Array.from(tr.attributes).forEach((attr) => {
@@ -191,7 +460,6 @@ export default class DataTable {
     });
     return facets;
   }
-
   _readInitialFacetVisibility() {
     this._element.querySelectorAll("[data-datatable-facet]").forEach((facetRoot) => {
       const key = facetRoot.dataset.datatableFacet;
@@ -212,7 +480,6 @@ export default class DataTable {
       }
     });
   }
-
   _readInitialSort() {
     const th = this._element.querySelector("th[data-datatable-initial-sort][data-datatable-column]");
     const direction = th?.dataset.datatableInitialSort;
@@ -222,16 +489,14 @@ export default class DataTable {
     this._sortKey = th.dataset.datatableColumn || null;
     this._sortDirection = this._sortKey ? direction : null;
   }
-
   _trigger(name, detail = {}) {
     this._element.dispatchEvent(
       new this._window.CustomEvent(`${name}.moo.datatable`, {
         bubbles: true,
-        detail,
+        detail
       })
     );
   }
-
   _sortValue(row, key) {
     const cell = row.element.querySelector(`:scope > [data-datatable-column="${key}"]`);
     if (!cell) {
@@ -239,7 +504,6 @@ export default class DataTable {
     }
     return normalize(cell.dataset.datatableSortValue ?? cell.textContent);
   }
-
   _matchesFilters(row) {
     if (this._searchTerm && !row.search.includes(this._searchTerm)) {
       return false;
@@ -254,7 +518,6 @@ export default class DataTable {
     }
     return true;
   }
-
   _visibleRows() {
     const filtered = this._rows.filter((row) => this._matchesFilters(row));
     if (this._sortKey) {
@@ -272,11 +535,9 @@ export default class DataTable {
     }
     return filtered;
   }
-
   _pageCount(rowCount) {
     return Math.max(1, Math.ceil(rowCount / this._pageSize));
   }
-
   _render() {
     const filtered = this._visibleRows();
     const pageCount = this._pageCount(filtered.length);
@@ -284,7 +545,6 @@ export default class DataTable {
     const start = (this._currentPage - 1) * this._pageSize;
     const pageRows = filtered.slice(start, start + this._pageSize);
     const pageRowIds = new Set(pageRows.map((row) => row.element.id));
-
     this._rows.forEach((row) => {
       const isVisible = pageRowIds.has(row.element.id);
       row.element.hidden = !isVisible;
@@ -292,19 +552,9 @@ export default class DataTable {
         row.cardElement.hidden = !isVisible;
       }
     });
-
-    // appendChild() always detaches-and-reinserts, which blurs a focused
-    // descendant (e.g. a row checkbox) even when the node is only moved to
-    // the position it already occupies. Selecting/deselecting a row never
-    // changes row order, so skip the reorder entirely unless the DOM order
-    // actually disagrees with the desired page order.
-    const currentOrder = Array.from(this._tbody.children)
-      .filter((element) => pageRowIds.has(element.id))
-      .map((element) => element.id);
+    const currentOrder = Array.from(this._tbody.children).filter((element) => pageRowIds.has(element.id)).map((element) => element.id);
     const desiredOrder = pageRows.map((row) => row.element.id);
-    const orderChanged =
-      currentOrder.length !== desiredOrder.length ||
-      currentOrder.some((id, index) => id !== desiredOrder[index]);
+    const orderChanged = currentOrder.length !== desiredOrder.length || currentOrder.some((id, index) => id !== desiredOrder[index]);
     if (orderChanged) {
       pageRows.forEach((row) => {
         this._tbody.appendChild(row.element);
@@ -313,7 +563,6 @@ export default class DataTable {
         }
       });
     }
-
     this._renderToolbarState();
     this._renderSortHeaders();
     this._renderSelection(pageRows);
@@ -323,7 +572,6 @@ export default class DataTable {
     this._renderPageSize();
     this._renderBulkActions();
   }
-
   _renderToolbarState() {
     const hasSearch = Boolean(this._searchTerm);
     const hasFacets = Array.from(this._facetSelections.values()).some((set) => set.size > 0);
@@ -331,10 +579,9 @@ export default class DataTable {
     if (resetButton) {
       resetButton.hidden = !(hasSearch || hasFacets);
     }
-
     this._element.querySelectorAll("[data-datatable-facet]").forEach((facetRoot) => {
       const key = facetRoot.dataset.datatableFacet;
-      const selected = this._facetSelections.get(key) || new Set();
+      const selected = this._facetSelections.get(key) || /* @__PURE__ */ new Set();
       if (this._visibleFacets.has(key)) {
         facetRoot.hidden = !this._visibleFacets.get(key);
       }
@@ -360,36 +607,31 @@ export default class DataTable {
         option.setAttribute("aria-pressed", String(isSelected));
       });
     });
-
     this._element.querySelectorAll("[data-datatable-filter-toggle]").forEach((toggle) => {
       const key = toggle.dataset.datatableFilterToggle;
       const visible = this._visibleFacets.get(key) ?? true;
       toggle.classList.toggle("active", visible);
       toggle.setAttribute("aria-pressed", visible ? "true" : "false");
     });
-
     this._element.querySelectorAll("[data-datatable-filter-option]").forEach((option) => {
       const key = option.dataset.datatableFilterOptionKey;
-      const selected = this._facetSelections.get(key) || new Set();
+      const selected = this._facetSelections.get(key) || /* @__PURE__ */ new Set();
       const active = selected.has(option.dataset.datatableFilterOption);
       option.classList.toggle("active", active);
       option.setAttribute("aria-pressed", active ? "true" : "false");
     });
-
     this._element.querySelectorAll("[data-datatable-filter-group-summary]").forEach((summary) => {
-      const selected = this._facetSelections.get(summary.dataset.datatableFilterGroupSummary) || new Set();
+      const selected = this._facetSelections.get(summary.dataset.datatableFilterGroupSummary) || /* @__PURE__ */ new Set();
       summary.hidden = selected.size === 0;
       summary.textContent = selected.size > 0 ? `${selected.size} selected` : "";
     });
   }
-
   _createFacetBadge(text) {
     const badge = this._document.createElement("span");
     badge.className = "datatable-facet-badge";
     badge.textContent = text;
     return badge;
   }
-
   _renderSelection(pageRows) {
     const selectAllControls = Array.from(this._element.querySelectorAll("[data-datatable-select-all]"));
     pageRows.forEach((row) => {
@@ -408,7 +650,6 @@ export default class DataTable {
       control.indeterminate = checked > 0 && checked < total;
     });
   }
-
   _renderBulkActions() {
     const bar = this._element.querySelector("[data-datatable-bulk-actions]");
     if (!bar) {
@@ -420,14 +661,12 @@ export default class DataTable {
       count.textContent = String(this._selectedIds.size);
     }
   }
-
   _renderFrameState(totalRows) {
     const isEmpty = totalRows === 0;
     this._element.querySelectorAll(".datatable-frame, .datatable-card-frame").forEach((frame) => {
       frame.hidden = isEmpty;
     });
   }
-
   _renderEmptyState(totalRows) {
     const empty = this._element.querySelector("[data-datatable-empty]");
     if (!empty) {
@@ -447,7 +686,6 @@ export default class DataTable {
       reset.hidden = !hasRows;
     }
   }
-
   _sortAriaValue(direction) {
     if (direction === "asc") {
       return "ascending";
@@ -457,7 +695,6 @@ export default class DataTable {
     }
     return "none";
   }
-
   _renderSortHeaders() {
     this._element.querySelectorAll("th[data-datatable-column]").forEach((th) => {
       const trigger = th.querySelector("[data-datatable-sort-key]");
@@ -478,7 +715,6 @@ export default class DataTable {
       }
     });
   }
-
   _renderPagination(totalRows, pageCount) {
     const first = this._element.querySelector("[data-datatable-page-first]");
     const prev = this._element.querySelector("[data-datatable-page-prev]");
@@ -488,7 +724,6 @@ export default class DataTable {
     const atEnd = this._currentPage >= pageCount;
     [first, prev].forEach((button) => this._setPageItemDisabled(button, atStart));
     [next, last].forEach((button) => this._setPageItemDisabled(button, atEnd));
-
     const summary = this._element.querySelector("[data-datatable-results-summary]");
     if (summary) {
       if (totalRows === 0) {
@@ -499,42 +734,53 @@ export default class DataTable {
         summary.textContent = `Showing ${start}-${end} of ${totalRows}`;
       }
     }
-
     const template = this._element.querySelector("template[data-datatable-page-numbers]");
     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 === void 0 ? Number(node.dataset.datatablePageNumber) : "\u2026"
+    );
+    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 === "\u2026") {
+          li.dataset.datatablePageEllipsis = "";
+          li.innerHTML = '<span class="page-link">\u2026</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() {
     const currentSize = String(this._pageSize);
     const value = this._element.querySelector("[data-datatable-page-size-value]");
@@ -551,7 +797,6 @@ export default class DataTable {
       option.setAttribute("aria-pressed", active ? "true" : "false");
     });
   }
-
   _setPageItemDisabled(button, disabled) {
     if (!button) {
       return;
@@ -559,31 +804,24 @@ export default class DataTable {
     button.disabled = disabled;
     button.closest(".page-item")?.classList.toggle("disabled", disabled);
   }
-
   _pageWindow(current, total) {
     if (total <= 7) {
       return Array.from({ length: total }, (_, index) => index + 1);
     }
-    const pages = new Set([1, total, current - 1, current, current + 1]);
-    const sorted = Array.from(pages)
-      .filter((page) => page >= 1 && page <= total)
-      .sort((a, b) => a - b);
+    const pages = /* @__PURE__ */ new Set([1, total, current - 1, current, current + 1]);
+    const sorted = Array.from(pages).filter((page) => page >= 1 && page <= total).sort((a, b) => a - b);
     const withEllipsis = [];
     sorted.forEach((page, index) => {
       if (index > 0 && page - sorted[index - 1] > 1) {
-        withEllipsis.push("…");
+        withEllipsis.push("\u2026");
       }
       withEllipsis.push(page);
     });
     return withEllipsis;
   }
-
   _isColumnFixed(key) {
-    return this._element
-      .querySelector(`th[data-datatable-column="${key}"]`)
-      ?.hasAttribute("data-datatable-column-fixed") || false;
+    return this._element.querySelector(`th[data-datatable-column="${key}"]`)?.hasAttribute("data-datatable-column-fixed") || false;
   }
-
   _setColumnVisible(key, visible, { syncViewToggle = true } = {}) {
     if (!visible && this._isColumnFixed(key)) {
       return;
@@ -598,7 +836,6 @@ export default class DataTable {
       });
     }
   }
-
   _setSort(key, direction) {
     const validDirection = direction === "asc" || direction === "desc" ? direction : null;
     this._sortKey = validDirection ? key : null;
@@ -606,16 +843,17 @@ export default class DataTable {
     this._render();
     this._trigger("sort", { key: this._sortKey, direction: this._sortDirection });
   }
-
   _handleSortAction(event) {
     const trigger = event.target.closest("[data-datatable-sort-action]");
     if (!trigger) {
       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;
     }
@@ -626,7 +864,6 @@ export default class DataTable {
     }
     this._setSort(key, action);
   }
-
   _handleFacetClick(event) {
     const option = event.target.closest("[data-datatable-facet-option]");
     const clear = event.target.closest("[data-datatable-facet-clear]");
@@ -638,7 +875,7 @@ export default class DataTable {
     if (!key) {
       return;
     }
-    const selected = this._facetSelections.get(key) || new Set();
+    const selected = this._facetSelections.get(key) || /* @__PURE__ */ new Set();
     if (clear) {
       selected.clear();
     } else {
@@ -657,7 +894,6 @@ export default class DataTable {
     this._render();
     this._trigger("filter");
   }
-
   _handleFacetSearch(event) {
     const search = event.target.closest("[data-datatable-facet-search]");
     if (!search) {
@@ -670,7 +906,6 @@ export default class DataTable {
       option.closest("li")?.classList.toggle("datatable-facet-search-hidden", query.length > 0 && !label.includes(query));
     });
   }
-
   // Bootstrap's own dropdown keyboard navigation moves focus between
   // .dropdown-item siblings, but it deliberately leaves focus alone while an
   // <input> has it (arrow keys inside a text field move the caret, not a
@@ -694,7 +929,6 @@ export default class DataTable {
       firstVisible.focus();
     }
   }
-
   _handleFilterOptionClick(event) {
     const option = event.target.closest("[data-datatable-filter-option]");
     if (!option) {
@@ -706,7 +940,7 @@ export default class DataTable {
       return;
     }
     this._visibleFacets.set(key, true);
-    const selected = this._facetSelections.get(key) || new Set();
+    const selected = this._facetSelections.get(key) || /* @__PURE__ */ new Set();
     if (selected.has(value)) {
       selected.delete(value);
     } else {
@@ -720,18 +954,14 @@ export default class DataTable {
     this._render();
     this._trigger("filter");
   }
-
   _showFilterPickerPanel(key = null) {
     this._element.querySelectorAll("[data-datatable-filter-panel]").forEach((panel) => {
       const isFacetList = panel.dataset.datatableFilterPanel === "facets";
       const isRequestedOptions = panel.dataset.datatableFilterPanelKey === key;
       panel.hidden = key ? !isRequestedOptions : !isFacetList;
     });
-    this._element
-      .querySelector(".datatable-search-filter-menu")
-      ?.setAttribute("data-datatable-filter-menu-panel", key ? "options" : "facets");
+    this._element.querySelector(".datatable-search-filter-menu")?.setAttribute("data-datatable-filter-menu-panel", key ? "options" : "facets");
   }
-
   _handleFilterPickerClick(event) {
     const group = event.target.closest("[data-datatable-filter-group]");
     if (group) {
@@ -746,7 +976,6 @@ export default class DataTable {
       this._showFilterPickerPanel();
     }
   }
-
   _handleFilterOptionSearch(event) {
     const search = event.target.closest("[data-datatable-filter-option-search]");
     if (!search) {
@@ -759,7 +988,6 @@ export default class DataTable {
       option.closest("li")?.classList.toggle("datatable-filter-option-search-hidden", query.length > 0 && !label.includes(query));
     });
   }
-
   // Same bridge as _handleFacetSearchKeydown, for the filter-picker's
   // drill-down option search box.
   _handleFilterOptionSearchKeydown(event) {
@@ -782,7 +1010,6 @@ export default class DataTable {
       firstVisible.focus();
     }
   }
-
   _handleFilterToggleClick(event) {
     const toggle = event.target.closest("[data-datatable-filter-toggle]");
     if (!toggle) {
@@ -801,7 +1028,6 @@ export default class DataTable {
     }
     this._render();
   }
-
   _handleColumnToggleClick(event) {
     const toggle = event.target.closest("[data-datatable-column-toggle]");
     if (!toggle) {
@@ -811,7 +1037,6 @@ export default class DataTable {
     const visible = toggle.getAttribute("aria-pressed") === "true";
     this._setColumnVisible(key, visible, { syncViewToggle: false });
   }
-
   _handleReset() {
     const search = this._element.querySelector("[data-datatable-search]");
     if (search) {
@@ -828,7 +1053,6 @@ export default class DataTable {
     this._render();
     this._trigger("filter");
   }
-
   _handleSelectAll(event) {
     const checked = event.target.checked;
     const filtered = this._visibleRows();
@@ -844,7 +1068,6 @@ export default class DataTable {
     this._render();
     this._trigger("select");
   }
-
   _handleSelectRow(event) {
     const checkbox = event.target.closest("[data-datatable-select-row]");
     if (!checkbox) {
@@ -864,7 +1087,6 @@ export default class DataTable {
     this._render();
     this._trigger("select");
   }
-
   _handleBulkClick(event) {
     if (event.target.closest("[data-datatable-bulk-clear]")) {
       this._clearSelection();
@@ -887,14 +1109,12 @@ export default class DataTable {
       this._trigger(`bulk-${action}`, { ids: this.getSelectedIds() });
     }
   }
-
   _clearSelection() {
     this._hideBulkTooltips({ blur: true });
     this._selectedIds.clear();
     this._render();
     this._trigger("select");
   }
-
   _applyBulkUpdate(key, value, trigger) {
     const icon = trigger.querySelector("svg")?.cloneNode(true);
     const label = trigger.querySelector("span")?.textContent?.trim() ?? value;
@@ -927,7 +1147,6 @@ export default class DataTable {
     this._render();
     this._trigger("bulk-update", { key, value, ids: this.getSelectedIds() });
   }
-
   _applyBulkDelete() {
     const ids = this.getSelectedIds();
     ids.forEach((id) => {
@@ -942,7 +1161,6 @@ export default class DataTable {
     this._render();
     this._trigger("bulk-delete", { ids });
   }
-
   _handlePageClick(event) {
     const goButton = event.target.closest("[data-datatable-page-go]");
     if (goButton) {
@@ -970,7 +1188,6 @@ export default class DataTable {
       this._render();
     }
   }
-
   _setPageSize(value) {
     const nextPageSize = Number(value);
     if (!Number.isFinite(nextPageSize) || nextPageSize <= 0) {
@@ -981,7 +1198,6 @@ export default class DataTable {
     this._currentPage = 1;
     this._render();
   }
-
   _bindEvents() {
     const search = this._element.querySelector("[data-datatable-search]");
     this._listen(search, "input", (event) => {
@@ -1001,9 +1217,7 @@ export default class DataTable {
         Dropdown.getOrCreateInstance(trigger).hide();
       }
     });
-
     this._listen(this._element, "click", (event) => {
-      this._handleSortAction(event);
       this._handleFilterPickerClick(event);
       this._handleFilterOptionClick(event);
       this._handleFilterToggleClick(event);
@@ -1018,63 +1232,51 @@ export default class DataTable {
         this._handleSelectRow(event);
       }
     });
-
-    // Bound to the document, not this._element: a checkbox click does not
-    // reliably move focus into the table (WebKit never focuses form
-    // controls on click, and even where it does the bulk-actions bar itself
-    // sits outside the table's DOM flow), so a listener scoped to the table
-    // would miss Escape whenever focus is elsewhere on the page.
+    this._listen(this._document, "click", (event) => this._handleSortAction(event));
     this._listen(this._document, "keydown", (event) => {
       if (event.key === "Escape" && this._selectedIds.size > 0) {
         this._clearSelection();
       }
     });
-
-    // A hover-triggered tooltip does not hide itself when a click opens the
-    // same button's dropdown (Bootstrap Tooltip only listens for
-    // mouseleave/blur), so it would otherwise sit on top of the open menu.
-    // hide() alone is not enough: opening the dropdown shifts layout under
-    // the still-hovered cursor, which makes the browser refire mouseenter
-    // and the tooltip re-show a moment later. disable()/enable() -- not
-    // hide() -- is Bootstrap's own way to suppress that: it makes show() a
-    // 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);
+      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();
       }
     });
-
     this._element.querySelectorAll("[data-datatable-filter-option-search]").forEach((searchInput) => {
       this._listen(searchInput, "input", (event) => this._handleFilterOptionSearch(event));
       this._listen(searchInput, "keydown", (event) => this._handleFilterOptionSearchKeydown(event));
     });
-
     this._element.querySelectorAll("[data-datatable-facet-search]").forEach((searchInput) => {
       this._listen(searchInput, "input", (event) => this._handleFacetSearch(event));
       this._listen(searchInput, "keydown", (event) => this._handleFacetSearchKeydown(event));
     });
-
     const resetButton = this._element.querySelector("[data-datatable-reset]");
     this._listen(resetButton, "click", () => this._handleReset());
-
     this._element.querySelectorAll("[data-datatable-select-all]").forEach((selectAll) => {
       this._listen(selectAll, "change", (event) => this._handleSelectAll(event));
     });
-
     const pageSizeSelect = this._element.querySelector("[data-datatable-page-size-select]");
     this._listen(pageSizeSelect, "change", (event) => this._setPageSize(event.target.value));
-
     this._element.querySelectorAll("[data-datatable-page-size-option]").forEach((option) => {
       this._listen(option, "click", () => {
         this._setPageSize(option.dataset.datatablePageSizeOption);
       });
     });
   }
-}
+};
+__name(_DataTable, "DataTable");
+var DataTable = _DataTable;
+export {
+  DataTable as default
+};