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

package/dist/js/chart.js

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

package/dist/js/chart.min.js

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

package/dist/js/combobox.js

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

package/dist/js/context-menu.js

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

package/dist/js/datatable.js

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

package/dist/js/datepicker.js

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

package/dist/js/datepicker.min.js

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

package/dist/js/moo-ui.js

@@ -1,5 +1,5 @@
 /*!
- * Moo UI moo-ui.js v1.0.0-rc.4 (https://ui.wpmoo.org/)
+ * Moo UI moo-ui.js v1.0.0-rc.5 (https://ui.wpmoo.org/)
  * Copyright 2026 WPMoo (https://wpmoo.org)
  * Licensed under MIT (https://github.com/wpmoo-org/ui/blob/main/LICENSE)
  */
@@ -15993,6 +15993,8 @@ var DataTable = class _DataTable {
     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, index2) => ({
       element: tr,
       cardElement: cardById.get(tr.id) || null,
@@ -16008,10 +16010,13 @@ var DataTable = class _DataTable {
     this._initBulkTooltips();
     this._initViewToggle();
     this._initRowActionDropdowns();
+    this._initSortDropdowns();
   }
   dispose() {
     this._disposeRowActionDropdowns();
+    this._disposeSortDropdowns();
     this._restoreRowActionMenus();
+    this._restoreSortMenus();
     this._listeners.forEach(({ target, type, handler, options }) => {
       target.removeEventListener(type, handler, options);
     });
@@ -16050,29 +16055,48 @@ var DataTable = class _DataTable {
     }
     this._rowActionTriggers().forEach((trigger) => {
       Dropdown.getOrCreateInstance(trigger, {
-        popperConfig: (defaultConfig) => ({
-          ...defaultConfig,
-          strategy: "fixed",
-          modifiers: [
-            ...defaultConfig.modifiers || [],
-            {
-              name: "flip",
-              options: {
-                fallbackPlacements: ["top-end", "top-start", "bottom-end", "bottom-start"]
-              }
-            },
-            {
-              name: "preventOverflow",
-              options: {
-                boundary: "viewport",
-                padding: 8
-              }
-            }
-          ]
-        })
+        popperConfig: (defaultConfig) => this._clippingSafePopperConfig(defaultConfig)
       });
     });
   }
+  _sortTriggers() {
+    return this._element.querySelectorAll(
+      '.datatable-sort [data-bs-toggle="dropdown"]'
+    );
+  }
+  _initSortDropdowns() {
+    const Dropdown = this._bootstrap("Dropdown");
+    if (!Dropdown) {
+      return;
+    }
+    this._sortTriggers().forEach((trigger) => {
+      Dropdown.getOrCreateInstance(trigger, {
+        popperConfig: (defaultConfig) => this._clippingSafePopperConfig(defaultConfig)
+      });
+    });
+  }
+  _clippingSafePopperConfig(defaultConfig) {
+    return {
+      ...defaultConfig,
+      strategy: "fixed",
+      modifiers: [
+        ...defaultConfig.modifiers || [],
+        {
+          name: "flip",
+          options: {
+            fallbackPlacements: ["top-end", "top-start", "bottom-end", "bottom-start"]
+          }
+        },
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: "viewport",
+            padding: 8
+          }
+        }
+      ]
+    };
+  }
   // dispose() alone leaves any open row-action Dropdown's show/aria-expanded/
   // data-bs-popper state and Bootstrap instance behind; hide and dispose each
   // one first so a subsequent re-init starts from a clean state.
@@ -16090,6 +16114,20 @@ var DataTable = class _DataTable {
       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?.(".table-row-actions")) {
       return null;
@@ -16156,6 +16194,59 @@ var DataTable = class _DataTable {
       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")
+    });
+    this._reparentedSortMenuByTrigger.set(trigger, menu);
+    this._document.body.appendChild(menu);
+  }
+  _restoreSortMenuForTrigger(trigger) {
+    const menu = this._reparentedSortMenuByTrigger.get(trigger) || this._sortMenuForTrigger(trigger);
+    if (menu) {
+      this._restoreSortMenu(menu);
+    }
+  }
+  _restoreSortMenu(menu) {
+    const original = this._reparentedSortMenus.get(menu);
+    if (!original) {
+      return;
+    }
+    const { parent, nextSibling, trigger } = original;
+    if (parent?.isConnected) {
+      if (nextSibling?.parentNode === parent) {
+        parent.insertBefore(menu, nextSibling);
+      } else {
+        parent.appendChild(menu);
+      }
+    } else {
+      menu.remove();
+    }
+    if (trigger) {
+      this._reparentedSortMenuByTrigger.delete(trigger);
+    }
+    this._reparentedSortMenus.delete(menu);
+  }
+  _restoreSortMenus() {
+    Array.from(this._reparentedSortMenus.keys()).forEach((menu) => {
+      this._restoreSortMenu(menu);
+    });
+  }
   _bootstrap(name) {
     return this._window.bootstrap?.[name] || null;
   }
@@ -16632,7 +16723,11 @@ var DataTable = class _DataTable {
       return;
     }
     const menu = trigger.closest(".dropdown-menu");
-    const key = menu?.closest(".datatable-sort")?.querySelector("[data-datatable-sort-key]")?.dataset.datatableSortKey;
+    const sort = menu?.closest(".datatable-sort") || this._reparentedSortMenus.get(menu)?.owner;
+    if (!sort || !this._element.contains(sort)) {
+      return;
+    }
+    const key = sort.querySelector("[data-datatable-sort-key]")?.dataset.datatableSortKey;
     if (!key) {
       return;
     }
@@ -16997,7 +17092,6 @@ var DataTable = class _DataTable {
       }
     });
     this._listen(this._element, "click", (event) => {
-      this._handleSortAction(event);
       this._handleFilterPickerClick(event);
       this._handleFilterOptionClick(event);
       this._handleFilterToggleClick(event);
@@ -17012,6 +17106,7 @@ var DataTable = class _DataTable {
         this._handleSelectRow(event);
       }
     });
+    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();
@@ -17019,12 +17114,14 @@ var DataTable = class _DataTable {
     });
     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();