nexus-shared 3.0.0 → 3.1.0

package/dist/Components/Viewers/DataTable.js

@@ -1,13 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconAlertCircle, iconArrowAutofitWidth, iconArrowBarToLeft, iconArrowBarToRight, iconArrowDown, iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowsSort, iconChevronDown, iconDatabase, iconDotsVertical, iconEyeOff, iconDownload, iconFileExport, iconFileImport, iconPinnedOff, iconPrinter, iconRefresh, iconRestore, iconSearch, iconSearchOff, iconSortAscending, iconSortDescending, iconX, InlineIcon, } from "nexus-icons";
+import { iconAlertCircle, iconArrowAutofitWidth, iconArrowBarToLeft, iconArrowBarToRight, iconArrowDown, iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowsSort, iconChecks, iconChevronDown, iconColumns3, iconDatabase, iconDotsVertical, iconEyeOff, iconDownload, iconFileExport, iconFileImport, iconFilter, iconFilterOff, iconPinnedOff, iconPlus, iconPrinter, iconRefresh, iconRestore, iconRowInsertBottom, iconSearch, iconSearchOff, iconSortAscending, iconSortDescending, iconX, InlineIcon, } from "nexus-icons";
 import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
+import { flushSync } from "react-dom";
 import { cx } from "../../Helpers/ClassHelpers.js";
 import { useBrowserTimeZone, useDatePreferences } from "../../Helpers/DatePreferences.js";
 import { fitColumnWidth, headLeafCells, startColumnDrag, startColumnResize } from "../../Helpers/TableColumns.js";
 import { exportTableCsv, printTable } from "../../Helpers/TableExport.js";
+import { asFilterInput, filterNames, filterRequest } from "../../Helpers/TableFilters.js";
 import { canPinColumn, columnAlign, columnValue, cssLength, DEFAULT_MAX_SELECTION, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, formatCellText, headBands, MIN_COLUMN_WIDTH, orderColumns, TABLE_ACTIONS_COLUMN, TABLE_INDEX_COLUMN, viewColumns, } from "../../Helpers/TableHelpers.js";
 import { TableStore } from "../../Helpers/TableStore.js";
+import { readUserPreferences, useNumberLocale, useUserPreferences } from "../../Helpers/UserPreferences.js";
 import { Button } from "../Documents/Button.js";
 import { Menu } from "../Documents/Menu.js";
 import { SplitButton } from "../Documents/SplitButton.js";
@@ -16,6 +19,7 @@ import { toast } from "../Layouts/Toaster.js";
 import { downloadExcelTemplate, exportExcel } from "../../Services/ExcelApi.js";
 import { openExcelImport } from "../Forms/ExcelImport.js";
 import { TableColumnsPanel } from "./DataTableColumns.js";
+import { TableFiltersPanel } from "./DataTableFilters.js";
 import { columnStyle, formatCount, TableColumnGroup, TableFooter, TableIndexCell, TableMessageRow, TablePageSize, TablePinnedHead, TableRowView, TableSkeletonRows, } from "./DataTableParts.js";
 /*
  * DataTable: rows in a table with a search, sorting by column, pages, a selection with actions on the selected rows,
@@ -89,26 +93,38 @@ const sameNumbers = (a, b) => {
  * />
  */
 export function DataTable(props) {
-    const { columns, rows: givenRows, load, loadKey, rowKey = "id", rowLabel, table: givenTable, searchable = true, searchPlaceholder = "Search…", toolbar, actions, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, rowActions, onRowOpen, openOnClick = false, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, excel, pageSize = DEFAULT_PAGE_SIZE, pageSizes = DEFAULT_PAGE_SIZES, defaultSort = null, stateKey, emptyMessage = "No records yet.", emptyAction, maxHeight, fill = false, size = "md", id, className, style, ref, } = props;
+    const { columns, rows: givenRows, load, loadKey, rowKey = "id", rowLabel, table: givenTable, searchable = true, searchPlaceholder = "Search…", toolbar, actions, add, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, selectBy, rowActions, onRowOpen, openOnClick: ownOpenOnClick, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, excel, pageSize: ownPageSize, pageSizes = DEFAULT_PAGE_SIZES, defaultSort = null, stateKey, emptyMessage = "No records yet.", emptyAction, maxHeight, fill = false, size = "md", id, className, style, ref, } = props;
     const paging = givenRows ? "client" : (props.paging ?? "client");
     const reloadable = props.reloadable ?? Boolean(load);
     const searchDelay = props.searchDelay ?? (paging === "server" ? 300 : 0);
     // A table with checkboxes numbers its rows: the number becomes the checkbox as soon as the row is under the pointer.
     const numbered = props.numbered ?? selectable;
-    const [own] = useState(() => (givenTable ? null : new TableStore(pageSize)));
+    // The person's choices in the quick preference panel, once made, go over what the table names itself.
+    const preferences = useUserPreferences();
+    const openOnClick = preferences.rowClick ?? ownOpenOnClick ?? false;
+    /** The page size the table opens with: the person's default when this table offers it, else the table's own. */
+    const openingPageSize = () => {
+        const preferred = readUserPreferences().pageSize;
+        return preferred !== null && pageSizes.includes(preferred) ? preferred : (ownPageSize ?? DEFAULT_PAGE_SIZE);
+    };
+    const [own] = useState(() => (givenTable ? null : new TableStore(ownPageSize ?? DEFAULT_PAGE_SIZE)));
     const table = givenTable ?? own;
-    table.configure({ columns, rowKey, rows: givenRows, load, paging, maxSelection, onSelectionChange });
+    // Prepared once for the store and the panel: the same params without what would make them filter on their own.
+    const filterInputs = useMemo(() => props.filterInputs?.map(asFilterInput), [props.filterInputs]);
+    table.configure({ columns, rowKey, rows: givenRows, load, paging, maxSelection, onSelectionChange, filterInputs });
     useImperativeHandle(ref, () => table, [table]);
     const state = useSyncExternalStore(table.subscribe, table.getState, table.getState);
-    const preferences = useDatePreferences();
+    const dates = useDatePreferences();
     const timeZone = useBrowserTimeZone();
-    const cellOptions = useMemo(() => ({ preferences, timeZone: timeZone ?? undefined }), [preferences, timeZone]);
+    const numbers = useNumberLocale();
+    const cellOptions = useMemo(() => ({ preferences: dates, timeZone: timeZone ?? undefined, locale: numbers }), [dates, timeZone, numbers]);
     const tableId = useId();
     // The search box is uncontrolled: a new key clears it when a new list starts over.
     const [searchGeneration, setSearchGeneration] = useState(0);
     // The pinned section starts folded shut, then takes the choice this device remembers (a layout effect: no flicker).
     const [pinsOpen, setPinsOpen] = useState(false);
     const searchTimer = useRef(undefined);
+    const searchRef = useRef(null);
     const started = useRef(false);
     const loadedKey = useRef(loadKey);
     // First rows: saved settings first, then the rows given or the first load. A layout effect, so rows that are at hand
@@ -118,7 +134,7 @@ export function DataTable(props) {
             started.current = true;
             const saved = readSaved(stateKey);
             table.restore({
-                pageSize: saved?.pageSize && pageSizes.includes(saved.pageSize) ? saved.pageSize : pageSize,
+                pageSize: saved?.pageSize && pageSizes.includes(saved.pageSize) ? saved.pageSize : openingPageSize(),
                 sort: saved?.sort !== undefined ? saved.sort : defaultSort,
                 hidden: saved?.hidden ?? columns.filter(column => column.hidden).map(column => column.key),
                 order: saved?.order,
@@ -159,7 +175,8 @@ export function DataTable(props) {
         if (!stateKey || !started.current)
             return;
         writeSaved(stateKey, {
-            pageSize: state.query.pageSize,
+            // Only a size the person picked here: one equal to the default is not kept, so a new default still reaches it.
+            pageSize: state.query.pageSize === openingPageSize() ? undefined : state.query.pageSize,
             sort: state.query.sort,
             hidden: hiddenList,
             order: state.order.length ? [...state.order] : undefined,
@@ -167,6 +184,20 @@ export function DataTable(props) {
             pinned: Object.keys(state.pinned).length ? state.pinned : undefined,
         });
     }, [stateKey, state.query.pageSize, state.query.sort, hiddenList, state.order, state.widths, state.pinned]);
+    // A new default page size from the panel reaches an open table where no size was picked. Only a change counts: on the
+    // first effects the save above still holds the store's opening size and has not written the restored one yet, so a
+    // check then would find nothing saved and undo a size picked earlier. The size is read from storage, not from the
+    // hook's value, which is the server's default while the page hydrates.
+    const preferredSize = useRef(preferences.pageSize);
+    useEffect(() => {
+        if (preferredSize.current === preferences.pageSize)
+            return;
+        preferredSize.current = preferences.pageSize;
+        if (!started.current || readSaved(stateKey)?.pageSize)
+            return;
+        table.setPageSize(openingPageSize());
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [preferences.pageSize]);
     const visible = useMemo(() => columns.filter(column => !state.hidden.has(column.key)), [columns, state.hidden]);
     // Every column in the order the user put them in, hidden ones among them: what the Columns panel lists.
     const ordered = useMemo(() => orderColumns(columns, state.order), [columns, state.order]);
@@ -360,15 +391,19 @@ export function DataTable(props) {
         });
     };
     /* The bar above the table, and the options menu */
+    // The labels of the filters that are on: the menu's second line, the dot's title, and an export's note.
+    const filtersOn = filterNames(filterInputs ?? [], query.filters);
     const outputName = exportName ?? props["aria-label"] ?? "Table";
     const output = () => {
         const shown = views.map(view => view.column);
         const rowsOut = table.getViewRows();
-        const note = [`${formatCount(rowsOut.length)} ${rowsOut.length === 1 ? "row" : "rows"}`, query.search && `search: ${query.search}`].filter(Boolean).join(" · ");
+        const note = [`${formatCount(rowsOut.length)} ${rowsOut.length === 1 ? "row" : "rows"}`, query.search && `search: ${query.search}`, filtersOn.length && `filters: ${filtersOn.join(", ")}`]
+            .filter(Boolean)
+            .join(" · ");
         return { columns: shown, rows: rowsOut, cellOptions, name: outputName, note };
     };
     const serverPage = paging === "server";
-    /** What an export to Excel asks the server for: the search and the sort on screen, and the page's own filters. */
+    /** What an export to Excel asks the server for: the search, the filters and the sort on screen, and the page's own filters. */
     const exportQuery = () => {
         const column = query.sort ? columns.find(candidate => candidate.key === query.sort.key) : undefined;
         return {
@@ -379,32 +414,94 @@ export function DataTable(props) {
                 search: query.search || null,
                 sort: column ? (column.sortKey ?? column.key) : null,
                 direction: query.sort?.direction,
-                filters: excel?.filters?.(),
+                filters: { ...filterRequest(query.filters, filterInputs ?? [], columns), ...excel?.filters?.() },
             },
         };
     };
-    /** After an import: the rows it wrote are the server's, so the table reads its page again. */
+    /**
+     * After an import: the rows it wrote are the server's, so the table reads its page again - after the page has heard
+     * of it. A `Crud` drops the lists it keeps in `onImported`, and a reload asked first was answered from that cache: on a
+     * page just opened, the list stayed as it was until the person reloaded it themselves (the owner, 2026-10-07).
+     */
     const onImported = () => {
-        void table.reload({ quiet: true });
         excel?.onImported?.();
+        void table.reload({ quiet: true });
+    };
+    // The Filters and Columns panels open from the options menu, under its button.
+    const optionsRef = useRef(null);
+    const filtersRef = useRef(null);
+    const columnsRef = useRef(null);
+    const hasColumnsPanel = columnsMenu && columns.length > 1;
+    // The stylesheet takes the bar's steps by the table's width. A bar wider than those steps expect (a long Add label,
+    // the page's own buttons, cozy density) is squeezed into the next step as soon as a line would break, a frame after
+    // its size changed, so the ResizeObserver never loops. Reload waits in the options menu whenever its button is hidden:
+    // the menu asks the button, so what decides it is written once, in the stylesheet.
+    const barRef = useRef(null);
+    const reloadRef = useRef(null);
+    const [reloadHidden, setReloadHidden] = useState(false);
+    const addPart = Boolean(add || actions);
+    const listsPart = Boolean(toolbar);
+    useLayoutEffect(() => {
+        const root = rootRef.current;
+        const bar = barRef.current;
+        if (!root || !bar)
+            return;
+        let frame = 0;
+        const fit = () => {
+            squeezeBar(bar);
+            setReloadHidden(reloadRef.current ? getComputedStyle(reloadRef.current).display === "none" : false);
+        };
+        const observer = new ResizeObserver(() => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(fit);
+        });
+        observer.observe(root);
+        for (const part of Array.from(bar.children))
+            observer.observe(part);
+        return () => {
+            observer.disconnect();
+            cancelAnimationFrame(frame);
+        };
+    }, [addPart, listsPart, searchable, reloadable]);
+    const reload = () => {
+        onReload?.();
+        void table.reload({ quiet: true });
     };
+    // A spreadsheet: the template to fill, the file to bring back, and an export the server writes from what is on
+    // screen. With an Add, they are other ways to add, under its arrow; without one, they are in the options menu.
+    const sheetItems = excel
+        ? [
+            { id: "excel-template", label: "Download template", description: `A spreadsheet to fill in`, icon: _jsx(InlineIcon, { icon: iconDownload }), separator: true, onSelect: () => void downloadExcelTemplate(excel.endpoints, { params: excel.params }) },
+            { id: "excel-import", label: "Import from a spreadsheet", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: () => openExcelImport({ endpoints: excel.endpoints, subject: excel.subject, params: excel.params, onImported: onImported }) },
+            // A bulk insert is an Add of many rows, so it is offered only beside an Add: a CRUD shows its Add only to a person
+            // who may create, and nobody types fifty rows to be refused at the end.
+            ...(excel.bulk === false || !add
+                ? []
+                : [{ id: "excel-bulk", label: "Bulk insert", description: "Type the rows here, with no file", icon: _jsx(InlineIcon, { icon: iconRowInsertBottom }), onSelect: () => openExcelImport({ endpoints: excel.endpoints, subject: excel.subject, params: excel.params, onImported: onImported, mode: "bulk" }) }]),
+            ...(excel.endpoints.export
+                ? [{ id: "excel-export", label: "Export to Excel", description: "Everything the search and filters leave, from the server", icon: _jsx(InlineIcon, { icon: iconFileExport }), onSelect: () => void exportExcel(excel.endpoints, exportQuery()) }]
+                : []),
+        ]
+        : [];
+    // In the bar it is `block`: as wide as its own label there, and the whole line once the Add section takes one.
+    const addButton = (block = false) => add && (_jsx(Button, { variant: "primary", size: "sm", block: block, icon: _jsx(InlineIcon, { icon: iconPlus }), onClick: add.onClick, children: add.label }));
     const optionItems = [
+        ...(filterInputs?.length
+            ? [{ id: "filters", label: "Filters", description: filtersOn.join(", ") || undefined, icon: _jsx(InlineIcon, { icon: iconFilter }), onSelect: () => filtersRef.current?.open() }]
+            : []),
+        ...(filtersOn.length ? [{ id: "clear-filters", label: "Clear filters", icon: _jsx(InlineIcon, { icon: iconFilterOff }), onSelect: () => table.setFilters({}) }] : []),
+        ...(hasColumnsPanel ? [{ id: "columns", label: "Columns", icon: _jsx(InlineIcon, { icon: iconColumns3 }), onSelect: () => columnsRef.current?.open() }] : []),
         ...(exportable && status === "ready" && rows.length > 0
             ? [{ id: "export", label: serverPage ? "Export this page (CSV)" : "Export as CSV", icon: _jsx(InlineIcon, { icon: iconFileExport }), onSelect: () => exportTableCsv(output()) }]
             : []),
         ...(printable && status === "ready" && rows.length > 0
             ? [{ id: "print", label: serverPage ? "Print this page" : "Print", icon: _jsx(InlineIcon, { icon: iconPrinter }), onSelect: () => printTable(output()) }]
             : []),
-        // A spreadsheet: the template to fill, the file to bring back, and an export the server writes from what is on
-        // screen. Its own Import replaces the page's `onImport` hook.
+        // The sheet's own Import replaces the page's `onImport` hook.
         ...(excel
-            ? [
-                { id: "excel-template", label: "Download template", description: `A spreadsheet to fill in`, icon: _jsx(InlineIcon, { icon: iconDownload }), separator: true, onSelect: () => void downloadExcelTemplate(excel.endpoints, { params: excel.params }) },
-                { id: "excel-import", label: "Import from a spreadsheet", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: () => openExcelImport({ endpoints: excel.endpoints, subject: excel.subject, params: excel.params, onImported: onImported }) },
-                ...(excel.endpoints.export
-                    ? [{ id: "excel-export", label: "Export to Excel", description: "Everything the search leaves, from the server", icon: _jsx(InlineIcon, { icon: iconFileExport }), onSelect: () => void exportExcel(excel.endpoints, exportQuery()) }]
-                    : []),
-            ]
+            ? add
+                ? []
+                : sheetItems
             : onImport
                 ? [{ id: "import", label: "Import", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: onImport }]
                 : []),
@@ -413,11 +510,9 @@ export function DataTable(props) {
         ...(!columnsMenu && table.hasColumnChanges()
             ? [{ id: "reset-columns", label: "Reset columns", description: "Their order, widths, and pins", icon: _jsx(InlineIcon, { icon: iconRestore }), separator: true, onSelect: () => table.resetColumns() }]
             : []),
+        ...(reloadable && reloadHidden ? [{ id: "reload", label: "Reload", icon: _jsx(InlineIcon, { icon: iconRefresh }), separator: true, onSelect: reload }] : []),
     ];
-    const optionEntries = optionItems.flatMap((action, index) => [
-        ...(action.separator && index > 0 ? [{ separator: true }] : []),
-        { value: action.id, label: action.label, icon: action.icon, description: action.description, tone: action.tone, disabled: action.disabled },
-    ]);
+    const optionEntries = menuEntries(optionItems);
     const pageSizePicker = _jsx(TablePageSize, { pageSize: query.pageSize, pageSizes: pageSizes, compact: searchable, onChange: value => table.setPageSize(value) });
     let body;
     if (status === "loading") {
@@ -426,15 +521,24 @@ export function DataTable(props) {
     else if (status === "error") {
         body = (_jsx(TableMessageRow, { span: span, tone: "danger", icon: iconAlertCircle, title: "The rows could not be loaded.", detail: state.error, children: _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconRefresh }), onClick: () => void table.reload({ quiet: false }), children: "Retry" }) }));
     }
-    else if (rows.length === 0 && query.search) {
-        body = (_jsx(TableMessageRow, { span: span, icon: iconSearchOff, title: `Nothing matches “${query.search}”.`, detail: "Check the spelling, or search for something shorter.", children: _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), onClick: () => {
-                    clearTimeout(searchTimer.current);
-                    setSearchGeneration(count => count + 1);
-                    table.setSearch("");
-                }, children: "Clear search" }) }));
+    else if (rows.length === 0 && (query.search || query.filters)) {
+        // What left no rows, the search, the filters or both, and a way to clear each.
+        const title = !query.filters ? `Nothing matches “${query.search}”.` : query.search ? `Nothing matches “${query.search}” with these filters.` : "No rows match the filters.";
+        const detail = !query.filters ? "Check the spelling, or search for something shorter." : query.search ? undefined : "Change them, or clear them.";
+        body = (_jsxs(TableMessageRow, { span: span, icon: query.search ? iconSearchOff : iconFilterOff, title: title, detail: detail, children: [query.search && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), onClick: () => {
+                        clearTimeout(searchTimer.current);
+                        flushSync(() => {
+                            setSearchGeneration(count => count + 1);
+                            table.setSearch("");
+                        });
+                        searchRef.current?.focus();
+                    }, children: "Clear search" })), query.filters && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconFilterOff }), onClick: () => {
+                        optionsRef.current?.focus();
+                        table.setFilters({});
+                    }, children: "Clear filters" }))] }));
     }
     else if (rows.length === 0) {
-        body = (_jsx(TableMessageRow, { span: span, icon: iconDatabase, title: emptyMessage, children: emptyAction }));
+        body = (_jsx(TableMessageRow, { span: span, icon: iconDatabase, title: emptyMessage, children: emptyAction === undefined ? addButton() : emptyAction }));
     }
     else {
         body = rows.map((row, index) => {
@@ -459,18 +563,30 @@ export function DataTable(props) {
             return (_jsx(TableRowView, { row: row, rowKey: key, number: index + 1, label: labelOf(row), columns: views, cellOptions: cellOptions, selectable: selectable, selected: selected, selectionFull: selectionFull && !selected, busy: state.busy.has(key), flashed: state.flashed.has(key), numbered: numbered, pinned: true, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, `pin:${key || index}`));
         });
     const selectedRows = selecting ? [...state.selected.values()] : [];
+    // Select again by what the rows are: exactly the rows on the page that pass, or the whole page.
+    const pick = (label, test) => {
+        const matching = test ? rows.filter(test) : rows;
+        if (matching.length === 0)
+            return toast(`No row on this page is ${label.toLowerCase()}.`);
+        table.clearSelection();
+        table.select(matching, true);
+    };
+    const picks = selectBy?.length
+        ? [
+            { id: "page", label: "All on this page", icon: _jsx(InlineIcon, { icon: iconChecks }), onSelect: () => pick("on this page") },
+            ...selectBy.map((rule, index) => ({ id: `by-${index}`, label: rule.label, icon: rule.icon, separator: index === 0, onSelect: () => pick(rule.label, rule.test) })),
+        ]
+        : [];
     const mass = selectedRows.length ? (typeof massActions === "function" ? massActions(selectedRows) : (massActions ?? [])) : [];
     // A column's own heading, wherever it stands: across both rows when no band is above it, in the row under its band when one is.
     const headingCell = (view, rowSpan) => (_jsx(HeaderCell, { view: view, sized: sized, rowSpan: rowSpan, sort: query.sort, disabled: status !== "ready" || rows.length < 2, covered: selectedRows.length > 0, canPin: canPinColumn(view.column, { pinnable }), canHide: view.column.hideable !== false && visible.length > 1, neighbours: moveTargets(views, view.column.key), onSort: direction => table.setSort(direction ? { key: view.column.key, direction } : null), onPin: side => table.setPinned(view.column.key, side), onMove: beforeKey => table.moveColumn(view.column.key, beforeKey), onFit: () => fitColumn(view.column.key), onHide: () => table.setHidden(view.column.key, true), onPointerDown: event => onColumnPointerDown(event, view), onResizerDown: event => onResizerPointerDown(event, view.column.key) }, view.column.key));
-    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-table", `nx-table--${size}`, fill && "nx-table--fill", className), style: style, "data-head-rows": headRows, "data-status": status, "data-refreshing": refreshing || undefined, "data-selecting": selecting || undefined, "data-sized": sized || undefined, children: [_jsxs("div", { className: "nx-table__bar", children: [toolbar && _jsx("div", { className: "nx-table__bar-start", children: toolbar }), _jsxs("div", { className: "nx-table__bar-end", children: [searchable ? (_jsx(TextBox, { type: "search", size: "sm", className: "nx-table__search", actionsStart: pageSizePicker, icon: _jsx(InlineIcon, { icon: iconSearch }), placeholder: searchPlaceholder, "aria-label": searchPlaceholder.replace(/…$/, ""), "aria-controls": tableId, defaultValue: query.search, clearable: true, onValueChange: onSearch, onKeyDown: event => {
-                                    if (event.key === "Enter") {
-                                        clearTimeout(searchTimer.current);
-                                        table.setSearch(event.currentTarget.value);
-                                    }
-                                } }, searchGeneration)) : (pageSizePicker), columnsMenu && columns.length > 1 && (_jsx(TableColumnsPanel, { columns: ordered, hidden: state.hidden, pinned: state.pinned, reorderable: reorderable, size: "sm", changed: table.hasColumnChanges(), onToggle: (key, hide) => table.setHidden(key, hide), onOrder: keys => table.setOrder(keys), onReset: () => table.resetColumns() })), reloadable && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconRefresh, className: refreshing ? "nx-spin" : undefined }), "aria-label": "Reload", title: "Reload", disabled: status === "loading", onClick: () => {
-                                    onReload?.();
-                                    void table.reload({ quiet: true });
-                                } })), optionEntries.length > 0 && (_jsx(Menu, { items: optionEntries, size: "sm", align: "end", "aria-label": "More options", onSelect: value => optionItems.find(action => action.id === value)?.onSelect(), children: _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), "aria-label": "More options", title: "More options", "data-table-options": true }) })), actions] })] }), _jsxs("div", { className: "nx-table__frame", children: [selectedRows.length > 0 && (_jsx(SelectionBar, { count: selectedRows.length, actions: mass, rows: selectedRows, onClear: () => table.clearSelection(), controls: tableId })), _jsx("div", { className: "nx-table__progress", "aria-hidden": "true" }), _jsx("div", { ref: scrollRef, className: "nx-table__scroll", style: fill ? undefined : { maxHeight: cssLength(maxHeight) }, children: _jsxs("table", { ref: tableRef, id: tableId, className: "nx-table__table", "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-busy": status === "loading" || refreshing || undefined, children: [sized && _jsx(TableColumnGroup, { columns: views, widths: state.widths, frame: frame, colRefs: colRefs }), _jsxs("thead", { ref: headRef, className: "nx-table__thead", children: [_jsxs("tr", { className: "nx-table__head", children: [frame.index && (_jsx(TableIndexCell, { heading: true, rowSpan: headRows, own: frame.index, number: "#", numbered: numbered, selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", children: _jsx("input", { ref: headerCheck, type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: allOnPage, disabled: rows.length === 0 || status !== "ready", "aria-label": "Select every row on this page", onChange: event => {
+    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-table", `nx-table--${size}`, fill && "nx-table--fill", className), style: style, "data-head-rows": headRows, "data-status": status, "data-refreshing": refreshing || undefined, "data-selecting": selecting || undefined, "data-sized": sized || undefined, children: [_jsxs("div", { ref: barRef, className: "nx-table__bar", children: [addPart && (_jsxs("div", { className: "nx-table__bar-add", children: [add &&
+                                (sheetItems.length > 0 ? (_jsx(SplitButton, { fixed: true, block: true, size: "sm", menuLabel: "More ways to add", options: [{ value: "add", label: add.label, icon: _jsx(InlineIcon, { icon: iconPlus }) }, ...sheetItems.map(item => ({ value: item.id, label: item.label, icon: item.icon, description: item.description }))], onAction: value => (value === "add" ? add.onClick() : sheetItems.find(item => item.id === value)?.onSelect()) })) : (addButton(true))), actions] })), toolbar && _jsx("div", { className: "nx-table__bar-start", children: toolbar }), _jsxs("div", { className: "nx-table__bar-end", children: [filterInputs?.length ? (_jsx(TableFiltersPanel, { ref: filtersRef, anchor: optionsRef, inputs: filterInputs, value: query.filters, delay: searchDelay, matches: state.matches, total: state.total, onChange: values => table.setFilters(values) })) : null, hasColumnsPanel && (_jsx(TableColumnsPanel, { ref: columnsRef, anchor: optionsRef, columns: ordered, hidden: state.hidden, pinned: state.pinned, reorderable: reorderable, size: "sm", changed: table.hasColumnChanges(), onToggle: (key, hide) => table.setHidden(key, hide), onOrder: keys => table.setOrder(keys), onReset: () => table.resetColumns() })), reloadable && (_jsx(Button, { ref: reloadRef, size: "sm", variant: "ghost", className: "nx-table__reload", icon: _jsx(InlineIcon, { icon: iconRefresh, className: refreshing ? "nx-spin" : undefined }), "aria-label": "Reload", title: "Reload", disabled: status === "loading", onClick: reload })), optionEntries.length > 0 && (_jsx(Menu, { items: optionEntries, size: "sm", align: "end", "aria-label": "More options", onSelect: value => optionItems.find(action => action.id === value)?.onSelect(), children: _jsx(Button, { ref: optionsRef, size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), dot: filtersOn.length > 0 && "primary", "aria-label": "More options", title: filtersOn.length ? `More options · ${filtersOn.length} ${filtersOn.length === 1 ? "filter" : "filters"} on` : "More options", "data-table-options": true }) })), !searchable && pageSizePicker] }), searchable && (_jsx(TextBox, { ref: searchRef, type: "search", size: "sm", className: "nx-table__search", actionsStart: pageSizePicker, icon: _jsx(InlineIcon, { icon: iconSearch }), placeholder: searchPlaceholder, "aria-label": searchPlaceholder.replace(/…$/, ""), "aria-controls": tableId, defaultValue: query.search, clearable: true, onValueChange: onSearch, onKeyDown: event => {
+                            if (event.key === "Enter") {
+                                clearTimeout(searchTimer.current);
+                                table.setSearch(event.currentTarget.value);
+                            }
+                        } }, searchGeneration))] }), _jsxs("div", { className: "nx-table__frame", children: [selectedRows.length > 0 && (_jsx(SelectionBar, { count: selectedRows.length, actions: mass, picks: picks, rows: selectedRows, onClear: () => table.clearSelection(), controls: tableId })), _jsx("div", { className: "nx-table__progress", "aria-hidden": "true" }), _jsx("div", { ref: scrollRef, className: "nx-table__scroll", style: fill ? undefined : { maxHeight: cssLength(maxHeight) }, children: _jsxs("table", { ref: tableRef, id: tableId, className: "nx-table__table", "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-busy": status === "loading" || refreshing || undefined, children: [sized && _jsx(TableColumnGroup, { columns: views, widths: state.widths, frame: frame, colRefs: colRefs }), _jsxs("thead", { ref: headRef, className: "nx-table__thead", children: [_jsxs("tr", { className: "nx-table__head", children: [frame.index && (_jsx(TableIndexCell, { heading: true, rowSpan: headRows, own: frame.index, number: "#", numbered: numbered, selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", children: _jsx("input", { ref: headerCheck, type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: allOnPage, disabled: rows.length === 0 || status !== "ready", "aria-label": "Select every row on this page", onChange: event => {
                                                                 lastToggled.current = null;
                                                                 if (table.selectPage(event.currentTarget.checked) > 0)
                                                                     warnFull();
@@ -565,8 +681,40 @@ function HeaderCell({ view, sized, rowSpan, sort, disabled, covered, canPin, can
     const label = _jsx("span", { className: "nx-table__heading-label", children: column.label });
     return (_jsxs("th", { scope: "col", className: cx("nx-table__heading", `nx-table__cell--${align}`), rowSpan: rowSpan, "data-col": column.key, "data-pin": view.pin ?? undefined, "data-pin-edge": (view.pin && view.edge) || undefined, "data-movable": view.movable || undefined, style: columnStyle(view, sized), "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : undefined, onPointerDown: onPointerDown, children: [_jsxs("div", { className: "nx-table__heading-inner", children: [sortable ? (_jsxs("button", { type: "button", className: "nx-table__sort", "data-sorted": direction ?? undefined, disabled: disabled && !direction, tabIndex: covered ? -1 : undefined, onClick: () => onSort(direction === "asc" ? "desc" : direction === "desc" ? null : "asc"), title: `Sort by ${column.label}`, children: [label, _jsx(InlineIcon, { icon: direction === "asc" ? iconArrowUp : direction === "desc" ? iconArrowDown : iconArrowsSort, className: "nx-table__sort-icon" })] })) : (label), entries.length > 0 && (_jsx(Menu, { items: entries, size: "sm", align: "end", "aria-label": `${column.label}: column`, onSelect: choose, children: _jsx(Button, { variant: "ghost", size: "sm", className: "nx-table__col-menu", icon: _jsx(InlineIcon, { icon: iconChevronDown }), tabIndex: covered ? -1 : undefined, "aria-label": `${column.label}: column options`, title: "Column options" }) }))] }), view.resizable && (_jsx("span", { className: "nx-table__resizer", "aria-hidden": "true", "data-resize": column.key, title: `Drag to resize ${column.label}, double-click to fit`, onPointerDown: onResizerDown, onDoubleClick: onFit }))] }));
 }
+/** The steps a bar is squeezed into when its parts do not fit, each one keeping the steps before it. */
+const BAR_SQUEEZES = ["search", "search reload", "search reload add"];
+/** Whether the parts of the bar that are not meant to take a line of their own share one line. */
+function barFits(bar) {
+    let middle = null;
+    for (const part of Array.from(bar.children)) {
+        if (part.offsetWidth === 0 || getComputedStyle(part).flexBasis === "100%")
+            continue;
+        const at = part.offsetTop + part.offsetHeight / 2;
+        if (middle === null)
+            middle = at;
+        else if (Math.abs(at - middle) > 4)
+            return false;
+    }
+    return true;
+}
+/** Takes the squeeze off, then squeezes the bar one step at a time until it fits (or runs out of steps). */
+function squeezeBar(bar) {
+    bar.removeAttribute("data-squeeze");
+    for (const squeeze of BAR_SQUEEZES) {
+        if (barFits(bar))
+            return;
+        bar.setAttribute("data-squeeze", squeeze);
+    }
+}
 /** The bar over the column headings while rows are selected: the count, one button for the actions, and Clear. */
-function SelectionBar({ count, actions, rows, onClear, controls }) {
+/** Menu actions as a menu's entries: a separator wherever an action starts a group. */
+function menuEntries(actions) {
+    return actions.flatMap((action, index) => [
+        ...(action.separator && index > 0 ? [{ separator: true }] : []),
+        { value: action.id, label: action.label, icon: action.icon, description: action.description, tone: action.tone, disabled: action.disabled },
+    ]);
+}
+function SelectionBar({ count, actions, picks, rows, onClear, controls }) {
     const [running, setRunning] = useState(null);
     const [chosen, setChosen] = useState(undefined);
     const alive = useRef(true);
@@ -592,5 +740,5 @@ function SelectionBar({ count, actions, rows, onClear, controls }) {
     // Every action on the selected rows lives in one button: the one shown runs on a click, the menu holds the rest and
     // makes the one picked the button, the way a split button works everywhere else.
     const options = actions.map(action => ({ value: action.id, label: action.label, icon: action.icon, disabled: action.disabled }));
-    return (_jsxs("div", { className: "nx-table__selection", role: "toolbar", "aria-label": "Selected rows", "aria-controls": controls, children: [_jsxs("span", { className: "nx-table__selection-count", "aria-live": "polite", children: [formatCount(count), " selected"] }), _jsx("div", { className: "nx-table__selection-actions", children: actions.length > 1 ? (_jsx(SplitButton, { options: options, value: current?.id, size: "sm", variant: current?.tone === "danger" ? "danger" : "primary", loading: running !== null, menuLabel: "More actions on the selected rows", className: "nx-table__mass", onValueChange: value => setChosen(value), onAction: value => run(actions.find(action => action.id === value)) })) : (actions.map(action => (_jsx(Button, { variant: "primary", size: "sm", icon: action.icon, loading: running === action.id, disabled: action.disabled, "data-action": action.id, title: action.label, className: "nx-table__mass", onClick: () => run(action), children: action.label }, action.id)))) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), className: "nx-table__selection-clear", disabled: running !== null, onClick: onClear, children: "Clear" })] }));
+    return (_jsxs("div", { className: "nx-table__selection", role: "toolbar", "aria-label": "Selected rows", "aria-controls": controls, children: [picks.length > 0 ? (_jsx(Menu, { items: menuEntries(picks), size: "sm", "aria-label": "Select rows", onSelect: value => picks.find(item => item.id === value)?.onSelect(), children: _jsx(Button, { variant: "ghost", size: "sm", iconEnd: _jsx(InlineIcon, { icon: iconChevronDown }), title: "Select by what the rows are", className: "nx-table__selection-pick", children: _jsxs("span", { className: "nx-table__selection-count", "aria-live": "polite", children: [formatCount(count), " selected"] }) }) })) : (_jsxs("span", { className: "nx-table__selection-count", "aria-live": "polite", children: [formatCount(count), " selected"] })), _jsx("div", { className: "nx-table__selection-actions", children: actions.length > 1 ? (_jsx(SplitButton, { options: options, value: current?.id, size: "sm", variant: current?.tone === "danger" ? "danger" : "primary", loading: running !== null, menuLabel: "More actions on the selected rows", className: "nx-table__mass", onValueChange: value => setChosen(value), onAction: value => run(actions.find(action => action.id === value)) })) : (actions.map(action => (_jsx(Button, { variant: "primary", size: "sm", icon: action.icon, loading: running === action.id, disabled: action.disabled, "data-action": action.id, title: action.label, className: "nx-table__mass", onClick: () => run(action), children: action.label }, action.id)))) }), _jsx(Button, { variant: "ghost", size: "sm", icon: _jsx(InlineIcon, { icon: iconX }), className: "nx-table__selection-clear", disabled: running !== null, onClick: onClear, children: "Clear" })] }));
 }

package/dist/Components/Viewers/DataTableColumns.d.ts

@@ -1,3 +1,5 @@
+import { type Ref, type RefObject } from "react";
+import { type PopoverPanelHandle } from "../../Helpers/PopoverHooks.ts";
 import type { TableColumn, TablePinSide, TableRow } from "../../Interfaces/TableInterfaces.ts";
 export interface TableColumnsPanelProps<TRow extends TableRow> {
     /** Every column the table has, in the order they are in now - hidden ones among them. */
@@ -14,10 +16,12 @@ export interface TableColumnsPanelProps<TRow extends TableRow> {
     /** The whole order, by key, after a move. */
     onOrder: (keys: readonly string[]) => void;
     onReset?: () => void;
-    "aria-label"?: string;
+    /** What the panel opens under, such as the table's options button; Esc gives the focus back to it. */
+    anchor: RefObject<HTMLElement | null>;
+    ref?: Ref<PopoverPanelHandle>;
 }
 /**
- * The button that opens the Columns panel, and the panel itself: a checkbox per column, bands with their columns under
+ * The Columns panel, opened through its `open()` handle under `anchor`: a checkbox per column, bands with their columns under
  * them, and a handle to drag a row into another place. The panel is a popover under the button, so it closes on Esc,
  * on a click outside, and on Tab.
  *
@@ -25,4 +29,4 @@ export interface TableColumnsPanelProps<TRow extends TableRow> {
  * <TableColumnsPanel columns={columns} hidden={state.hidden} pinned={state.pinned}
  *   onToggle={(key, hide) => table.setHidden(key, hide)} onOrder={keys => table.setOrder(keys)} />
  */
-export declare function TableColumnsPanel<TRow extends TableRow>({ columns, hidden, pinned, reorderable, size, changed, onToggle, onOrder, onReset, "aria-label": ariaLabel, }: TableColumnsPanelProps<TRow>): import("react").JSX.Element;
+export declare function TableColumnsPanel<TRow extends TableRow>({ columns, hidden, pinned, reorderable, size, changed, onToggle, onOrder, onReset, anchor, ref, }: TableColumnsPanelProps<TRow>): import("react").JSX.Element;

package/dist/Components/Viewers/DataTableColumns.js

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { iconArrowBackUp, iconColumns3, iconGripVertical, iconPin, InlineIcon } from "nexus-icons";
-import { useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { iconArrowBackUp, iconGripVertical, iconPin, InlineIcon } from "nexus-icons";
+import { useEffect, useId, useRef, useState } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
+import { isPopoverOpen } from "../../Helpers/PopoverHelpers.js";
+import { usePopoverPanel } from "../../Helpers/PopoverHooks.js";
 import { Button } from "../Documents/Button.js";
 /** The rows of the panel: a band for every run of neighbours that name the same group, as the header draws them. */
 function panelRows(columns, groups) {
@@ -42,15 +43,12 @@ function dropIndex(boxes, y, from) {
     }
     return boxes.length - 1;
 }
-/** The room kept between the panel and the window's edge, and the least height it is ever given. */
-const PANEL_MARGIN = 8;
-const PANEL_MIN_HEIGHT = 160;
 /** The text of a label that may be a node, for an accessible name. */
 function textOf(label) {
     return typeof label === "string" || typeof label === "number" ? String(label) : "the column";
 }
 /**
- * The button that opens the Columns panel, and the panel itself: a checkbox per column, bands with their columns under
+ * The Columns panel, opened through its `open()` handle under `anchor`: a checkbox per column, bands with their columns under
  * them, and a handle to drag a row into another place. The panel is a popover under the button, so it closes on Esc,
  * on a click outside, and on Tab.
  *
@@ -58,15 +56,10 @@ function textOf(label) {
  * <TableColumnsPanel columns={columns} hidden={state.hidden} pinned={state.pinned}
  *   onToggle={(key, hide) => table.setHidden(key, hide)} onOrder={keys => table.setOrder(keys)} />
  */
-export function TableColumnsPanel({ columns, hidden, pinned, reorderable = true, size = "md", changed = false, onToggle, onOrder, onReset, "aria-label": ariaLabel = "Columns", }) {
+export function TableColumnsPanel({ columns, hidden, pinned, reorderable = true, size = "md", changed = false, onToggle, onOrder, onReset, anchor, ref, }) {
     const id = useId();
     const panelId = `${id}-columns`;
-    const triggerId = `${id}-columns-trigger`;
-    const triggerRef = useRef(null);
-    const panelRef = useRef(null);
-    const [open, setOpen] = useState(false);
-    // Set on pointer down while the panel is open: that press closes it, and its click must not open it again.
-    const dismissing = useRef(false);
+    const { panelRef, open, onToggle: onPanelToggle } = usePopoverPanel(anchor, ref);
     // While a row is held: its key, the list it may move in, and where it would land.
     const [drag, setDrag] = useState(null);
     const [said, setSaid] = useState("");
@@ -84,25 +77,6 @@ export function TableColumnsPanel({ columns, hidden, pinned, reorderable = true,
     const rows = panelRows(all, groups);
     const shownCount = all.filter(column => column.shown).length;
     const bands = rows.some(row => row.band !== null);
-    function place() {
-        const panel = panelRef.current;
-        const trigger = triggerRef.current;
-        if (!panel || !trigger)
-            return;
-        // Measured at its own height, then capped to the room on the side it landed on: a table with many columns keeps
-        // its heading, its note and Reset in the window, and the list of columns scrolls instead.
-        panel.style.maxHeight = "";
-        placeUnderAnchor(panel, trigger.getBoundingClientRect(), { align: "end" });
-        const top = panel.getBoundingClientRect().top;
-        panel.style.maxHeight = `${Math.max(PANEL_MIN_HEIGHT, window.innerHeight - top - PANEL_MARGIN)}px`;
-    }
-    // The panel is fixed, so it follows the button while the page or a scroller moves.
-    useLayoutEffect(() => {
-        if (!open)
-            return;
-        return followAnchor(place);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
     // A panel opened again starts without the last move's message, so a screen reader is not told about an old move.
     useEffect(() => {
         if (!open)
@@ -205,39 +179,22 @@ export function TableColumnsPanel({ columns, hidden, pinned, reorderable = true,
         const lastShown = column.shown && shownCount <= 1;
         return (_jsxs("li", { className: cx("nx-columns__row", inBand && "nx-columns__row--child"), "data-held": drag?.key === column.key ? "" : undefined, "data-drop": drag && drag.list === list && drag.key !== column.key && drag.to === index ? "" : undefined, children: [column.movable && !bandOff ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${textOf(column.label)}`, title: inBand ? `Drag to move it inside ${list}, or use the arrow keys` : "Drag to move, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, list, index, column.key, textOf(column.label)), onKeyDown: event => onHandleKeyDown(event, list, index, textOf(column.label)), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: column.shown && !bandOff, disabled: bandOff || !column.hideable || lastShown, title: bandOff ? `${list} is hidden` : column.hideable ? undefined : "Always shown", onChange: event => onToggle(column.key, !event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: column.label }) })] }), column.pin && (_jsxs("span", { className: "nx-columns__pin", title: `Pinned to the ${column.pin === "left" ? "left" : "right"}`, children: [_jsx(InlineIcon, { icon: iconPin }), _jsx("span", { className: "nx-visually-hidden", children: `Pinned to the ${column.pin === "left" ? "left" : "right"}` })] }))] }, column.key));
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: triggerRef, id: triggerId, size: size === "sm" ? "sm" : "md", icon: _jsx(InlineIcon, { icon: iconColumns3 }), "aria-label": ariaLabel, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, title: "Columns: show, hide, and arrange", onPointerDown: () => {
-                    dismissing.current = isPopoverOpen(panelRef.current);
-                }, onClick: () => {
-                    if (dismissing.current) {
-                        dismissing.current = false;
-                        return;
-                    }
-                    const panel = panelRef.current;
-                    if (!panel)
-                        return;
-                    if (isPopoverOpen(panel))
-                        hidePopover(panel);
-                    else {
-                        panel.showPopover();
-                        place();
-                        panel.focus();
-                    }
-                } }), _jsxs("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", tabIndex: -1, "aria-labelledby": `${panelId}-title`, className: cx("nx-popover", "nx-columns", size === "sm" && "nx-columns--sm"), "data-dragging": drag ? "" : undefined, onToggle: (event) => setOpen(event.newState === "open"), onKeyDown: event => {
-                    if (event.key === "Tab")
-                        hidePopover(event.currentTarget);
-                }, children: [_jsxs("div", { className: "nx-columns__head", children: [_jsx("span", { className: "nx-columns__title", id: `${panelId}-title`, children: "Columns" }), _jsxs("span", { className: "nx-columns__count", children: [shownCount, " of ", all.length, " shown"] })] }), _jsx("ul", { className: "nx-columns__list", "data-list": "", children: rows.map((row, index) => {
-                            if (row.band === null)
-                                return columnRow(row.column, "", index, false, false);
-                            const band = row.band;
-                            // A band whose columns were split into two runs is drawn twice, so a row is known by its first column, never
-                            // by the band's name: two rows under one name would be one row to React.
-                            const bandId = `band:${row.columns[0].key}`;
-                            const shown = row.columns.filter(column => column.shown).length;
-                            const movable = row.columns.every(column => column.movable);
-                            const last = shown > 0 && shownCount - shown < 1;
-                            return (_jsxs("li", { className: "nx-columns__row nx-columns__row--band", "data-held": drag?.key === bandId ? "" : undefined, "data-drop": drag && drag.list === "" && drag.key !== bandId && drag.to === index ? "" : undefined, children: [_jsxs("div", { className: "nx-columns__band", children: [movable ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${band}`, title: "Drag to move the whole band, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, "", index, bandId, band), onKeyDown: event => onHandleKeyDown(event, "", index, band), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: shown > 0, disabled: last, ref: input => {
-                                                            if (input)
-                                                                input.indeterminate = shown > 0 && shown < row.columns.length;
-                                                        }, "aria-label": `${band}: ${shown} of ${row.columns.length} shown`, onChange: event => toggleBand(band, row.columns, event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: band }) })] }), _jsxs("span", { className: "nx-columns__band-count", children: [shown, " / ", row.columns.length] })] }), _jsx("ul", { className: "nx-columns__children", "data-list": band, children: row.columns.map((column, childIndex) => columnRow(column, band, childIndex, true, shown === 0)) })] }, bandId));
-                        }) }), _jsxs("p", { className: "nx-columns__note", children: [reorderable ? "Drag a handle, or move it with the arrow keys." : "This table keeps the order of its columns.", bands ? " A column under a band moves inside it; the band moves as one." : ""] }), onReset && (_jsx("div", { className: "nx-columns__foot", children: _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), disabled: !changed, onClick: () => onReset(), children: "Reset columns" }) })), _jsx("span", { className: "nx-visually-hidden", "aria-live": "polite", children: said })] })] }));
+    return (_jsx(_Fragment, { children: _jsxs("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", tabIndex: -1, "aria-labelledby": `${panelId}-title`, className: cx("nx-popover", "nx-table-panel", "nx-columns", size === "sm" && "nx-columns--sm"), "data-dragging": drag ? "" : undefined, onToggle: onPanelToggle, onKeyDown: event => {
+                if (event.key === "Tab")
+                    hidePopover(event.currentTarget);
+            }, children: [_jsxs("div", { className: "nx-table-panel__head", children: [_jsx("span", { className: "nx-table-panel__title", id: `${panelId}-title`, children: "Columns" }), _jsxs("span", { className: "nx-table-panel__count", children: [shownCount, " of ", all.length, " shown"] })] }), _jsx("ul", { className: "nx-columns__list nx-popover__scroll", "data-list": "", children: rows.map((row, index) => {
+                        if (row.band === null)
+                            return columnRow(row.column, "", index, false, false);
+                        const band = row.band;
+                        // A band whose columns were split into two runs is drawn twice, so a row is known by its first column, never
+                        // by the band's name: two rows under one name would be one row to React.
+                        const bandId = `band:${row.columns[0].key}`;
+                        const shown = row.columns.filter(column => column.shown).length;
+                        const movable = row.columns.every(column => column.movable);
+                        const last = shown > 0 && shownCount - shown < 1;
+                        return (_jsxs("li", { className: "nx-columns__row nx-columns__row--band", "data-held": drag?.key === bandId ? "" : undefined, "data-drop": drag && drag.list === "" && drag.key !== bandId && drag.to === index ? "" : undefined, children: [_jsxs("div", { className: "nx-columns__band", children: [movable ? (_jsx("button", { type: "button", className: "nx-columns__handle", "aria-label": `Move ${band}`, title: "Drag to move the whole band, or use the arrow keys", onPointerDown: event => onHandlePointerDown(event, "", index, bandId, band), onKeyDown: event => onHandleKeyDown(event, "", index, band), children: _jsx(InlineIcon, { icon: iconGripVertical }) })) : (_jsx("span", { className: "nx-columns__handle nx-columns__handle--fixed", "aria-hidden": "true" })), _jsxs("label", { className: "nx-choice nx-choice--sm nx-columns__choice", children: [_jsx("input", { type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: shown > 0, disabled: last, ref: input => {
+                                                        if (input)
+                                                            input.indeterminate = shown > 0 && shown < row.columns.length;
+                                                    }, "aria-label": `${band}: ${shown} of ${row.columns.length} shown`, onChange: event => toggleBand(band, row.columns, event.currentTarget.checked) }), _jsx("span", { className: "nx-choice__text", children: _jsx("span", { className: "nx-choice__label nx-columns__label", children: band }) })] }), _jsxs("span", { className: "nx-columns__band-count", children: [shown, " / ", row.columns.length] })] }), _jsx("ul", { className: "nx-columns__children", "data-list": band, children: row.columns.map((column, childIndex) => columnRow(column, band, childIndex, true, shown === 0)) })] }, bandId));
+                    }) }), _jsxs("p", { className: "nx-columns__note", children: [reorderable ? "Drag a handle, or move it with the arrow keys." : "This table keeps the order of its columns.", bands ? " A column under a band moves inside it; the band moves as one." : ""] }), onReset && (_jsx("div", { className: "nx-table-panel__foot", children: _jsx(Button, { size: "sm", variant: "ghost", icon: _jsx(InlineIcon, { icon: iconArrowBackUp }), disabled: !changed, onClick: () => onReset(), children: "Reset columns" }) })), _jsx("span", { className: "nx-visually-hidden", "aria-live": "polite", children: said })] }) }));
 }

package/dist/Components/Viewers/DataTableFilters.d.ts

@@ -0,0 +1,21 @@
+import { type Ref, type RefObject } from "react";
+import { type PopoverPanelHandle } from "../../Helpers/PopoverHooks.ts";
+import type { InputParams } from "../../Interfaces/FormInterfaces.ts";
+import type { TableFilters } from "../../Interfaces/TableInterfaces.ts";
+export interface TableFiltersPanelProps {
+    /** The filter inputs, as the table prepared them (`asFilterInput`). */
+    inputs: readonly InputParams[];
+    /** The table's filters: a change from outside, such as Clear filters, loads them into the form. */
+    value: TableFilters | undefined;
+    /** Milliseconds a typed value waits: the table's search delay. */
+    delay: number;
+    /** The rows the search and the filters leave, and every row, for the foot. */
+    matches: number;
+    total: number;
+    onChange: (values: Readonly<Record<string, unknown>>) => void;
+    /** The options button (⋮) the panel opens under; Esc gives the focus back to it. */
+    anchor: RefObject<HTMLElement | null>;
+    ref?: Ref<PopoverPanelHandle>;
+}
+/** The Filters panel, opened through its `open()` handle: a `Form` of the filter inputs, the count, and Clear all. */
+export declare function TableFiltersPanel({ inputs, value, delay, matches, total, onChange, anchor, ref }: TableFiltersPanelProps): import("react").JSX.Element;