@wpmoo/ui 1.0.0-rc.6 → 1.0.0-rc.8

package/dist/js/datatable.js

@@ -1,23 +1,60 @@
 /*!
- * Moo UI datatable.js v1.0.0-rc.6 (https://ui.wpmoo.org/)
+ * Moo UI datatable.js v1.0.0-rc.8 (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();
+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-portal-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.");
@@ -26,7 +63,6 @@ export default class DataTable {
     if (existing) {
       return existing;
     }
-
     this._element = element;
     this._document = element.ownerDocument;
     this._window = this._document.defaultView;
@@ -39,34 +75,31 @@ 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 = new Map();
-    this._reparentedRowMenuByTrigger = new WeakMap();
-    this._reparentedSortMenus = new Map();
-    this._reparentedSortMenuByTrigger = new WeakMap();
-
+    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();
@@ -75,7 +108,6 @@ export default class DataTable {
     this._initRowActionDropdowns();
     this._initSortDropdowns();
   }
-
   dispose() {
     this._disposeRowActionDropdowns();
     this._disposeSortDropdowns();
@@ -89,11 +121,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;
@@ -101,9 +131,9 @@ 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 under body.
+  // 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.
@@ -112,10 +142,9 @@ export default class DataTable {
   // 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\"]"
+      '.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) {
@@ -123,17 +152,15 @@ export default class DataTable {
     }
     this._rowActionTriggers().forEach((trigger) => {
       Dropdown.getOrCreateInstance(trigger, {
-        popperConfig: (defaultConfig) => this._clippingSafePopperConfig(defaultConfig),
+        popperConfig: /* @__PURE__ */ __name((defaultConfig) => this._clippingSafePopperConfig(defaultConfig), "popperConfig")
       });
     });
   }
-
   _sortTriggers() {
     return this._element.querySelectorAll(
-      ".datatable-sort [data-bs-toggle=\"dropdown\"]"
+      '.datatable-sort [data-bs-toggle="dropdown"]'
     );
   }
-
   _initSortDropdowns() {
     const Dropdown = this._bootstrap("Dropdown");
     if (!Dropdown) {
@@ -141,34 +168,32 @@ export default class DataTable {
     }
     this._sortTriggers().forEach((trigger) => {
       Dropdown.getOrCreateInstance(trigger, {
-        popperConfig: (defaultConfig) => this._clippingSafePopperConfig(defaultConfig),
+        popperConfig: /* @__PURE__ */ __name((defaultConfig) => this._clippingSafePopperConfig(defaultConfig), "popperConfig")
       });
     });
   }
-
   _clippingSafePopperConfig(defaultConfig) {
     return {
       ...defaultConfig,
       strategy: "fixed",
       modifiers: [
-        ...(defaultConfig.modifiers || []),
+        ...defaultConfig.modifiers || [],
         {
           name: "flip",
           options: {
-            fallbackPlacements: ["top-end", "top-start", "bottom-end", "bottom-start"],
-          },
+            fallbackPlacements: ["top-end", "top-start", "bottom-end", "bottom-start"]
+          }
         },
         {
           name: "preventOverflow",
           options: {
             boundary: "viewport",
-            padding: 8,
-          },
-        },
-      ],
+            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.
@@ -186,7 +211,6 @@ export default class DataTable {
       instance.dispose();
     });
   }
-
   _disposeSortDropdowns() {
     const Dropdown = this._bootstrap("Dropdown");
     if (!Dropdown) {
@@ -201,14 +225,12 @@ export default class DataTable {
       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) {
@@ -216,7 +238,6 @@ export default class DataTable {
     }
     return trigger?.closest?.("[data-datatable-card]")?.getAttribute("data-datatable-card-for") || "";
   }
-
   _reparentRowActionMenu(trigger) {
     const menu = this._rowActionMenuForTrigger(trigger);
     if (!menu || this._reparentedRowMenus.has(menu)) {
@@ -233,25 +254,26 @@ export default class DataTable {
       parent: menu.parentNode,
       nextSibling: menu.nextSibling,
       trigger,
+      owner: findThemeOwner(trigger)
     });
     this._reparentedRowMenuByTrigger.set(trigger, menu);
-    this._document.body.appendChild(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 } = original;
-    if (parent?.isConnected) {
+    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 {
@@ -267,24 +289,17 @@ export default class DataTable {
     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
-    );
+    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) {
@@ -297,25 +312,26 @@ export default class DataTable {
       nextSibling: menu.nextSibling,
       trigger,
       owner: trigger.closest(".datatable-sort"),
+      themeOwner: findThemeOwner(trigger)
     });
     this._reparentedSortMenuByTrigger.set(trigger, menu);
-    this._document.body.appendChild(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 } = original;
-    if (parent?.isConnected) {
+    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 {
@@ -329,17 +345,17 @@ export default class DataTable {
     }
     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
@@ -356,36 +372,25 @@ 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
@@ -397,7 +402,7 @@ export default class DataTable {
     }
     const inputs = toggles.flatMap((toggle) => Array.from(toggle.querySelectorAll("input")));
     const storageKey = `moo-datatable-view:${this._element.id}`;
-    const setView = (value, { persist = false } = {}) => {
+    const setView = /* @__PURE__ */ __name((value, { persist = false } = {}) => {
       this._element.dataset.datatableView = value;
       inputs.forEach((input) => {
         input.checked = input.value === value;
@@ -406,10 +411,9 @@ export default class DataTable {
         try {
           this._window.localStorage.setItem(storageKey, value);
         } catch {
-          // Storage may be unavailable (private browsing); the toggle still works for this session.
         }
       }
-    };
+    }, "setView");
     let stored = null;
     try {
       stored = this._window.localStorage.getItem(storageKey);
@@ -429,7 +433,6 @@ export default class DataTable {
       });
     });
   }
-
   _readFacets(tr) {
     const facets = {};
     Array.from(tr.attributes).forEach((attr) => {
@@ -440,7 +443,6 @@ export default class DataTable {
     });
     return facets;
   }
-
   _readInitialFacetVisibility() {
     this._element.querySelectorAll("[data-datatable-facet]").forEach((facetRoot) => {
       const key = facetRoot.dataset.datatableFacet;
@@ -461,7 +463,6 @@ export default class DataTable {
       }
     });
   }
-
   _readInitialSort() {
     const th = this._element.querySelector("th[data-datatable-initial-sort][data-datatable-column]");
     const direction = th?.dataset.datatableInitialSort;
@@ -471,16 +472,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) {
@@ -488,7 +487,6 @@ export default class DataTable {
     }
     return normalize(cell.dataset.datatableSortValue ?? cell.textContent);
   }
-
   _matchesFilters(row) {
     if (this._searchTerm && !row.search.includes(this._searchTerm)) {
       return false;
@@ -503,7 +501,6 @@ export default class DataTable {
     }
     return true;
   }
-
   _visibleRows() {
     const filtered = this._rows.filter((row) => this._matchesFilters(row));
     if (this._sortKey) {
@@ -521,11 +518,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);
@@ -533,7 +528,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;
@@ -541,19 +535,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);
@@ -562,7 +546,6 @@ export default class DataTable {
         }
       });
     }
-
     this._renderToolbarState();
     this._renderSortHeaders();
     this._renderSelection(pageRows);
@@ -572,7 +555,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);
@@ -580,10 +562,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);
       }
@@ -609,36 +590,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) => {
@@ -657,7 +633,6 @@ export default class DataTable {
       control.indeterminate = checked > 0 && checked < total;
     });
   }
-
   _renderBulkActions() {
     const bar = this._element.querySelector("[data-datatable-bulk-actions]");
     if (!bar) {
@@ -669,14 +644,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) {
@@ -696,7 +669,6 @@ export default class DataTable {
       reset.hidden = !hasRows;
     }
   }
-
   _sortAriaValue(direction) {
     if (direction === "asc") {
       return "ascending";
@@ -706,7 +678,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]");
@@ -727,7 +698,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]");
@@ -737,7 +707,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) {
@@ -748,43 +717,29 @@ export default class DataTable {
         summary.textContent = `Showing ${start}-${end} of ${totalRows}`;
       }
     }
-
     const template = this._element.querySelector("template[data-datatable-page-numbers]");
     if (!template) {
       return;
     }
-
     const pages = this._pageWindow(this._currentPage, pageCount);
     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)
-        : "…"
+    const existingWindow = existing.map(
+      (node) => node.dataset.datatablePageEllipsis === void 0 ? Number(node.dataset.datatablePageNumber) : "\u2026"
     );
-    // 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]);
-
+    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 === "…") {
+        if (page === "\u2026") {
           li.dataset.datatablePageEllipsis = "";
-          li.innerHTML = '<span class="page-link">…</span>';
+          li.innerHTML = '<span class="page-link">\u2026</span>';
         } else {
           li.dataset.datatablePageNumber = String(page);
           const button = this._document.createElement("button");
@@ -799,7 +754,6 @@ export default class DataTable {
       });
       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);
@@ -810,7 +764,6 @@ export default class DataTable {
       }
     });
   }
-
   _renderPageSize() {
     const currentSize = String(this._pageSize);
     const value = this._element.querySelector("[data-datatable-page-size-value]");
@@ -827,7 +780,6 @@ export default class DataTable {
       option.setAttribute("aria-pressed", active ? "true" : "false");
     });
   }
-
   _setPageItemDisabled(button, disabled) {
     if (!button) {
       return;
@@ -835,31 +787,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;
@@ -874,7 +819,6 @@ export default class DataTable {
       });
     }
   }
-
   _setSort(key, direction) {
     const validDirection = direction === "asc" || direction === "desc" ? direction : null;
     this._sortKey = validDirection ? key : null;
@@ -882,16 +826,13 @@ 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 sort =
-      menu?.closest(".datatable-sort") ||
-      this._reparentedSortMenus.get(menu)?.owner;
+    const sort = menu?.closest(".datatable-sort") || this._reparentedSortMenus.get(menu)?.owner;
     if (!sort || !this._element.contains(sort)) {
       return;
     }
@@ -906,7 +847,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]");
@@ -918,7 +858,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 {
@@ -937,7 +877,6 @@ export default class DataTable {
     this._render();
     this._trigger("filter");
   }
-
   _handleFacetSearch(event) {
     const search = event.target.closest("[data-datatable-facet-search]");
     if (!search) {
@@ -950,7 +889,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
@@ -974,7 +912,6 @@ export default class DataTable {
       firstVisible.focus();
     }
   }
-
   _handleFilterOptionClick(event) {
     const option = event.target.closest("[data-datatable-filter-option]");
     if (!option) {
@@ -986,7 +923,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 {
@@ -1000,18 +937,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) {
@@ -1026,7 +959,6 @@ export default class DataTable {
       this._showFilterPickerPanel();
     }
   }
-
   _handleFilterOptionSearch(event) {
     const search = event.target.closest("[data-datatable-filter-option-search]");
     if (!search) {
@@ -1039,7 +971,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) {
@@ -1062,7 +993,6 @@ export default class DataTable {
       firstVisible.focus();
     }
   }
-
   _handleFilterToggleClick(event) {
     const toggle = event.target.closest("[data-datatable-filter-toggle]");
     if (!toggle) {
@@ -1081,7 +1011,6 @@ export default class DataTable {
     }
     this._render();
   }
-
   _handleColumnToggleClick(event) {
     const toggle = event.target.closest("[data-datatable-column-toggle]");
     if (!toggle) {
@@ -1091,7 +1020,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) {
@@ -1108,7 +1036,6 @@ export default class DataTable {
     this._render();
     this._trigger("filter");
   }
-
   _handleSelectAll(event) {
     const checked = event.target.checked;
     const filtered = this._visibleRows();
@@ -1124,7 +1051,6 @@ export default class DataTable {
     this._render();
     this._trigger("select");
   }
-
   _handleSelectRow(event) {
     const checkbox = event.target.closest("[data-datatable-select-row]");
     if (!checkbox) {
@@ -1144,7 +1070,6 @@ export default class DataTable {
     this._render();
     this._trigger("select");
   }
-
   _handleBulkClick(event) {
     if (event.target.closest("[data-datatable-bulk-clear]")) {
       this._clearSelection();
@@ -1167,14 +1092,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;
@@ -1207,7 +1130,6 @@ export default class DataTable {
     this._render();
     this._trigger("bulk-update", { key, value, ids: this.getSelectedIds() });
   }
-
   _applyBulkDelete() {
     const ids = this.getSelectedIds();
     ids.forEach((id) => {
@@ -1222,7 +1144,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) {
@@ -1250,7 +1171,6 @@ export default class DataTable {
       this._render();
     }
   }
-
   _setPageSize(value) {
     const nextPageSize = Number(value);
     if (!Number.isFinite(nextPageSize) || nextPageSize <= 0) {
@@ -1261,7 +1181,6 @@ export default class DataTable {
     this._currentPage = 1;
     this._render();
   }
-
   _bindEvents() {
     const search = this._element.querySelector("[data-datatable-search]");
     this._listen(search, "input", (event) => {
@@ -1281,7 +1200,6 @@ export default class DataTable {
         Dropdown.getOrCreateInstance(trigger).hide();
       }
     });
-
     this._listen(this._element, "click", (event) => {
       this._handleFilterPickerClick(event);
       this._handleFilterOptionClick(event);
@@ -1298,27 +1216,11 @@ export default class DataTable {
       }
     });
     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
-    // 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, "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);
@@ -1334,31 +1236,30 @@ export default class DataTable {
         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
+};