nexus-shared 2.0.0 → 3.1.0

package/dist/Components/Viewers/Avatar.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "nexus-icons";
+import { useState } from "react";
+import { cx } from "../../Helpers/ClassHelpers.js";
+import { avatarTone, initials } from "../../Helpers/DropdownHelpers.js";
+/**
+ * A person: a round picture, or their initials on a soft tone when there is none or it fails to load. The chat,
+ * the dropdown's avatar column and the admin bar all draw this one.
+ */
+export function Avatar({ name, src, size = "md", className, onChangePicture, changeLabel = "Change picture", role, tabIndex }) {
+    const url = typeof src === "string" ? src.trim() : "";
+    const [failed, setFailed] = useState(null);
+    const photo = url !== "" && failed !== url;
+    const face = photo ? _jsx("img", { src: url, alt: "", loading: "lazy", decoding: "async", onError: () => setFailed(url) }) : initials(name);
+    const shared = { className: cx("nx-avatar", size !== "md" && `nx-avatar--${size}`, className), "data-tone": photo ? undefined : avatarTone(name) };
+    if (!onChangePicture) {
+        return (_jsx("span", { ...shared, "aria-hidden": "true", children: face }));
+    }
+    return (_jsxs("button", { ...shared, type: "button", role: role, tabIndex: tabIndex, "aria-label": changeLabel, title: changeLabel, onClick: onChangePicture, children: [face, _jsx("span", { className: "nx-avatar__veil", "aria-hidden": "true", children: _jsx(Icon, { name: "camera", size: "40%" }) })] }));
+}

package/dist/Components/Viewers/DataTable.js

@@ -1,18 +1,25 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconAlertCircle, iconArrowAutofitWidth, iconArrowBarToLeft, iconArrowBarToRight, iconArrowDown, iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowsSort, iconChevronDown, iconColumns3, iconDatabase, iconDotsVertical, iconEyeOff, 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, startColumnDrag, startColumnResize } from "../../Helpers/TableColumns.js";
+import { fitColumnWidth, headLeafCells, startColumnDrag, startColumnResize } from "../../Helpers/TableColumns.js";
 import { exportTableCsv, printTable } from "../../Helpers/TableExport.js";
-import { canPinColumn, columnAlign, columnValue, cssLength, DEFAULT_MAX_SELECTION, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, formatCellText, MIN_COLUMN_WIDTH, TABLE_ACTIONS_COLUMN, TABLE_INDEX_COLUMN, viewColumns, } from "../../Helpers/TableHelpers.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";
 import { TextBox } from "../Inputs/TextBox.js";
 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,
@@ -86,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, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, pageSize = DEFAULT_PAGE_SIZE, pageSizes = DEFAULT_PAGE_SIZES, defaultSort = null, stateKey, emptyMessage = "No records yet.", emptyAction, maxHeight, 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
@@ -115,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,
@@ -156,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,
@@ -164,8 +184,23 @@ 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]);
-    const hideable = columns.filter(column => column.hideable !== false);
+    // 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]);
     const labelOf = useCallback((row) => {
         if (rowLabel)
             return rowLabel(row);
@@ -220,6 +255,11 @@ export function DataTable(props) {
     const sized = Object.keys(state.widths).length > 0;
     const views = useMemo(() => viewColumns(visible, { order: state.order, pinned: state.pinned, widths: state.widths, offsets, reorderable, resizable }), [visible, state.order, state.pinned, state.widths, offsets, reorderable, resizable]);
     const indexOn = selectable || numbered;
+    // The bands above the headings. With no group anywhere the header is the one row it always was.
+    const bands = useMemo(() => headBands(views), [views]);
+    const grouped = bands.some(band => band.group !== null);
+    /** How many rows the header has: a heading with no band above it is as tall as both. */
+    const headRows = grouped ? 2 : undefined;
     // The shadow while columns scroll under a pinned side belongs to its last column, which may be one of the table's own.
     const pinnedLeft = views.some(view => view.pin === "left");
     const pinnedRight = views.some(view => view.pin === "right");
@@ -232,13 +272,13 @@ export function DataTable(props) {
     // How far the pinned cells sit from their edge, measured from the headings before them. It runs after every render
     // (before the browser paints) and settles at once, since nothing changes when the numbers are the same.
     useLayoutEffect(() => {
-        const row = headRef.current;
+        const cells = headLeafCells(headRef.current);
         const root = rootRef.current;
-        if (!row)
+        if (cells.length === 0)
             return;
         const next = {};
         let left = 0;
-        for (const cell of row.children) {
+        for (const cell of cells) {
             if (cell.getAttribute("data-pin") !== "left")
                 break;
             const key = cell.getAttribute("data-col");
@@ -247,8 +287,8 @@ export function DataTable(props) {
             left += cell.getBoundingClientRect().width;
         }
         let right = 0;
-        for (let index = row.children.length - 1; index >= 0; index--) {
-            const cell = row.children[index];
+        for (let index = cells.length - 1; index >= 0; index--) {
+            const cell = cells[index];
             if (cell.getAttribute("data-pin") !== "right")
                 break;
             const key = cell.getAttribute("data-col");
@@ -289,9 +329,8 @@ export function DataTable(props) {
     });
     /* Resizing a column: the table freezes the widths it has, then only the dragged edge moves */
     const measureWidths = useCallback(() => {
-        const row = headRef.current;
         const widths = {};
-        for (const cell of row?.children ?? []) {
+        for (const cell of headLeafCells(headRef.current)) {
             const key = cell.getAttribute("data-col");
             if (key)
                 widths[key] = Math.round(cell.getBoundingClientRect().width);
@@ -352,29 +391,128 @@ 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, 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 {
+            params: excel?.params,
+            subject: excel?.subject,
+            rows: state.matches,
+            query: {
+                search: query.search || null,
+                sort: column ? (column.sortKey ?? column.key) : null,
+                direction: query.sort?.direction,
+                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 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 = () => {
+        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()) }]
             : []),
-        ...(onImport ? [{ id: "import", label: "Import", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: onImport }] : []),
+        // The sheet's own Import replaces the page's `onImport` hook.
+        ...(excel
+            ? add
+                ? []
+                : sheetItems
+            : onImport
+                ? [{ id: "import", label: "Import", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: onImport }]
+                : []),
         ...(moreActions ?? []),
-        ...(table.hasColumnChanges() ? [{ id: "reset-columns", label: "Reset columns", description: "Their order, widths, and pins", icon: _jsx(InlineIcon, { icon: iconRestore }), separator: true, onSelect: () => table.resetColumns() }] : []),
+        // Reset belongs in the Columns panel, beside what it resets; it is offered here only for a table without one.
+        ...(!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") {
@@ -383,21 +521,30 @@ 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) => {
             const key = pageKeys[index];
             const selected = state.selected.has(key);
-            return (_jsx(TableRowView, { row: row, rowKey: key, number: state.offset + 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, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen }, key || index));
+            return (_jsx(TableRowView, { row: row, rowKey: key, number: state.offset + 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, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick }, key || index));
         });
     }
     /* The pinned section above the page: the records the user pinned, folded open or shut, remembered on this device */
@@ -413,30 +560,37 @@ export function DataTable(props) {
         pins?.map((row, index) => {
             const key = table.keyOf(row);
             const selected = state.selected.has(key);
-            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 }, `pin:${key || index}`));
+            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 ?? [])) : [];
-    const columnItems = hideable.map(column => ({ value: column.key, label: column.label, checked: !state.hidden.has(column.key) }));
-    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-table", `nx-table--${size}`, className), style: style, "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 && hideable.length > 1 && (_jsx(Menu, { items: columnItems, kind: "checkbox", size: "sm", align: "end", closeOnSelect: false, "aria-label": "Columns", onSelect: value => {
-                                    const hide = !state.hidden.has(value);
-                                    // At least one column stays.
-                                    if (hide && visible.length <= 1)
-                                        return;
-                                    table.setHidden(value, hide);
-                                }, children: _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconColumns3 }), "aria-label": "Columns", title: "Show or hide columns" }) })), 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: { 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 }), _jsx("thead", { children: _jsxs("tr", { ref: headRef, className: "nx-table__head", children: [frame.index && (_jsx(TableIndexCell, { heading: true, 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();
-                                                        } }) })) })), views.map(view => (_jsx(HeaderCell, { view: view, sized: sized, 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))), sized && _jsx("td", { className: "nx-table__heading nx-table__cell--filler" }), frame.actions && (_jsx("th", { scope: "col", className: "nx-table__heading nx-table__cell--actions", "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: { right: frame.actions.offset }, children: _jsx("span", { className: "nx-visually-hidden", children: "Actions" }) }))] }) }), pins && (_jsxs("tbody", { className: "nx-table__pins", "data-open": pinsOpen || undefined, children: [_jsx(TablePinnedHead, { span: span, label: pinnedLabel, count: pins.length, max: pinnedMax, loading: pinnedLoading, open: pinsOpen, onToggle: togglePins }), pinnedBody] })), _jsx("tbody", { children: body })] }) })] }), _jsx(TableFooter, { state: state, disabled: refreshing, onPage: page => table.setPage(page) })] }));
+    // 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", { 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();
+                                                            } }) })) })), bands.map(band => band.group === null ? (headingCell(band.columns[0], headRows)) : (_jsx(GroupHeading, { band: band }, `group:${band.group}:${band.columns[0].column.key}`))), sized && _jsx("td", { className: "nx-table__heading nx-table__cell--filler", rowSpan: headRows }), frame.actions && (_jsx("th", { scope: "col", className: "nx-table__heading nx-table__cell--actions", rowSpan: headRows, "data-col": TABLE_ACTIONS_COLUMN, "data-pin": "right", "data-pin-edge": frame.actions.edge || undefined, style: { right: frame.actions.offset }, children: _jsx("span", { className: "nx-visually-hidden", children: "Actions" }) }))] }), grouped && _jsx("tr", { className: "nx-table__head nx-table__head--leaves", children: bands.filter(band => band.group !== null).flatMap(band => band.columns.map(view => headingCell(view))) })] }), pins && (_jsxs("tbody", { className: "nx-table__pins", "data-open": pinsOpen || undefined, children: [_jsx(TablePinnedHead, { span: span, label: pinnedLabel, count: pins.length, max: pinnedMax, loading: pinnedLoading, open: pinsOpen, onToggle: togglePins }), pinnedBody] })), _jsx("tbody", { children: body })] }) })] }), _jsx(TableFooter, { state: state, disabled: refreshing, onPage: page => table.setPage(page) })] }));
 }
 /** Where "Move left" and "Move right" put a column: the key it goes before, or null for the end of its side. */
 function moveTargets(views, key) {
@@ -451,12 +605,23 @@ function moveTargets(views, key) {
         right: at < group.length - 1 ? (group[at + 2]?.column.key ?? null) : undefined,
     };
 }
+/**
+ * The heading of a band: one cell centred over the columns of its run, which reads as a heading and not as a column —
+ * it sorts nothing, has no menu, and has no edge to drag. A band over pinned columns stays with them.
+ */
+function GroupHeading({ band }) {
+    const { columns } = band;
+    const pin = columns[0].pin;
+    // Pinned: the band sits where the outermost column of its own side sits.
+    const style = pin === "left" ? { left: columns[0].offset } : pin === "right" ? { right: columns[columns.length - 1].offset } : undefined;
+    return (_jsx("th", { scope: "colgroup", className: "nx-table__heading nx-table__heading--group", colSpan: columns.length, "data-group": band.group, "data-pin": pin ?? undefined, "data-pin-edge": (pin && columns.some(view => view.edge)) || undefined, style: style, children: _jsx("span", { className: "nx-table__group", children: band.group }) }));
+}
 /**
  * A column's heading: a button that sorts (the direction as an arrow and in `aria-sort`), a menu that pins, moves,
  * fits, and hides the column, and an edge to drag for its width. The heading itself drags into another place.
  * While the selection bar covers the headings (`covered`), Tab skips what is under it.
  */
-function HeaderCell({ view, sized, sort, disabled, covered, canPin, canHide, neighbours, onSort, onPin, onMove, onFit, onHide, onPointerDown, onResizerDown }) {
+function HeaderCell({ view, sized, rowSpan, sort, disabled, covered, canPin, canHide, neighbours, onSort, onPin, onMove, onFit, onHide, onPointerDown, onResizerDown }) {
     const { column } = view;
     const direction = sort?.key === column.key ? sort.direction : null;
     const align = columnAlign(column);
@@ -514,15 +679,52 @@ function HeaderCell({ view, sized, sort, disabled, covered, canPin, canHide, nei
             onHide();
     }
     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}`), "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 }))] }));
+    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);
-    useEffect(() => () => {
-        alive.current = false;
+    // The bar is alive again on every mount, not only the first: React runs this twice in development, and the second
+    // mount would otherwise keep the `false` the first one left, so an action's spinner would never stop.
+    useEffect(() => {
+        alive.current = true;
+        return () => {
+            alive.current = false;
+        };
     }, []);
     const usable = actions.filter(action => !action.disabled);
     const current = actions.find(action => action.id === chosen && !action.disabled) ?? usable[0] ?? actions[0];
@@ -538,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

@@ -0,0 +1,32 @@
+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. */
+    columns: readonly TableColumn<TRow>[];
+    hidden: ReadonlySet<string>;
+    pinned: Readonly<Record<string, TablePinSide>>;
+    /** False while the table is not reorderable: the panel then only shows and hides. */
+    reorderable?: boolean;
+    /** Default `md`. */
+    size?: "sm" | "md";
+    /** Whether the user has arranged anything, so Reset has something to undo. */
+    changed?: boolean;
+    onToggle: (key: string, hidden: boolean) => void;
+    /** The whole order, by key, after a move. */
+    onOrder: (keys: readonly string[]) => void;
+    onReset?: () => void;
+    /** 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 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.
+ *
+ * @example
+ * <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, anchor, ref, }: TableColumnsPanelProps<TRow>): import("react").JSX.Element;