nexus-shared 3.1.0 → 4.0.0

package/dist/Components/Viewers/DataTable.js

@@ -1,30 +1,34 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-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 { iconAlertCircle, iconArrowAutofitWidth, iconArrowBarToLeft, iconArrowBarToRight, iconArrowDown, iconArrowLeft, iconArrowRight, iconArrowUp, iconArrowsSort, iconChecks, iconChevronDown, iconColumns3, iconDatabase, iconDotsVertical, iconEyeOff, iconDownload, iconFileExport, iconFileImport, iconFilter, iconFilterOff, iconPin, 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 { canCall, permissionsVersion, subscribePermissions } from "../../Helpers/Permissions.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 { joinKeys, joinSourceName, tableJoins } from "../../Helpers/TableJoins.js";
+import { canPinColumn, columnAlign, columnValue, cssLength, DEFAULT_MAX_SELECTION, DEFAULT_PAGE_SIZE, DEFAULT_PAGE_SIZES, formatCellText, headBands, MIN_COLUMN_WIDTH, orderColumns, releasedPins, 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 { useReadOnlyNotice } from "../Inputs/ReadOnlyNotice.js";
 import { TextBox } from "../Inputs/TextBox.js";
 import { toast } from "../Layouts/Toaster.js";
 import { downloadExcelTemplate, exportExcel } from "../../Services/ExcelApi.js";
+import { joinSource } from "../../Services/JoinSources.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";
+import { columnStyle, formatCount, TableColumnGroup, TableFooter, TableIndexCell, TableMessageRow, TablePageSize, TableRowView, TableSectionHead, TableSkeletonRows, } from "./DataTableParts.js";
 /*
  * DataTable: rows in a table with a search, sorting by column, pages, a selection with actions on the selected rows,
  * actions on each row, and columns the user arranges (shown or hidden, in any order, resized, pinned to a side). Rows
- * given as `pinnedRows` sit in a section above the page that folds open and shut. Rows are given, loaded once, or
+ * given as `sections` (the records pinned, the favourites) sit above the page, each folding open and shut. Rows are given, loaded once, or
  * loaded a page at a time; what the table shows lives in a `TableStore`, which pages (and the CRUD component) change
  * from outside.
  */
@@ -37,6 +41,12 @@ export function useTable() {
     return store;
 }
 const STATE_PREFIX = "nx-table:";
+/** The key of the section `pinnedRows` makes. */
+const PINS_SECTION = "pins";
+/** A version that never changes: the lookups' for a table with no `join` column, the permissions' for one with no sheet. */
+const NO_VERSION = () => 0;
+/** The page size of a table read whole (`pager="none"`): every row on the first page. */
+const WHOLE_PAGE = Number.MAX_SAFE_INTEGER;
 function readSaved(key) {
     if (!key || typeof localStorage === "undefined")
         return null;
@@ -48,7 +58,7 @@ function readSaved(key) {
         return null;
     }
 }
-// Settings are written in two places (the query and the columns together, the pinned section on its own click), so a
+// Settings are written in two places (the query and the columns together, a section's fold on its own click), so a
 // write keeps whatever it does not mention.
 function writeSaved(key, changes) {
     try {
@@ -71,6 +81,9 @@ function usePerRow(make) {
         return value;
     }, [cache, make]);
 }
+/** No pinned column scrolls: the table is wide enough for them all. */
+const NONE_RELEASED = new Set();
+const sameKeys = (a, b) => a.size === b.size && [...a].every(key => b.has(key));
 const sameNumbers = (a, b) => {
     const keys = Object.keys(a);
     return keys.length === Object.keys(b).length && keys.every(key => a[key] === b[key]);
@@ -93,17 +106,24 @@ 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, 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 { columns, rows: givenRows, load, loadKey, rowKey = "id", rowLabel, table: givenTable, searchable = true, searchPlaceholder = "Search…", caption, toolbar, actions, add, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, selectBy, rowActions, onRowOpen, openOnClick: ownOpenOnClick, onPick, sections: ownSections, rowMarks, 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, currency, emptyMessage = "No records yet.", emptyAction, maxHeight, fill = false, size = "md", id, className, style, ref, } = props;
     const paging = givenRows ? "client" : (props.paging ?? "client");
+    // A server's pages cannot all be shown at once: such a table keeps its paging in the footer instead.
+    const pager = props.pager === "none" && paging === "server" ? "footer" : (props.pager ?? "bar");
+    const whole = pager === "none";
     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;
+    // A table with checkboxes numbers its rows: the number becomes the checkbox as soon as the row is under the pointer. So
+    // does one whose rows are picked, whose first column holds each row's radio button.
+    const pickable = Boolean(onPick);
+    const numbered = props.numbered ?? (selectable || pickable);
     // 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. */
+    /** The page size the table opens with: every row for a table read whole, the person's default when this table offers it, else the table's own. */
     const openingPageSize = () => {
+        if (whole)
+            return WHOLE_PAGE;
         const preferred = readUserPreferences().pageSize;
         return preferred !== null && pageSizes.includes(preferred) ? preferred : (ownPageSize ?? DEFAULT_PAGE_SIZE);
     };
@@ -111,18 +131,29 @@ export function DataTable(props) {
     const table = givenTable ?? own;
     // 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 });
+    table.configure({ columns, rowKey, rows: givenRows, load, paging, maxSelection, onSelectionChange, onPickChange: onPick, filterInputs });
     useImperativeHandle(ref, () => table, [table]);
     const state = useSyncExternalStore(table.subscribe, table.getState, table.getState);
+    // The columns whose values are other records', looked up by key (`join`). Only a table with one listens to the page's
+    // lookups, and it draws again - its rows too, through `cellOptions` - each time names come in.
+    const joins = useMemo(() => columns.flatMap(column => (column.join ? [column.join] : [])), [columns]);
+    const subscribeJoins = useCallback((listener) => (joins.length ? tableJoins.subscribe(listener) : () => { }), [joins.length]);
+    const joinsVersion = useSyncExternalStore(subscribeJoins, joins.length ? tableJoins.getVersion : NO_VERSION, NO_VERSION);
+    // A spreadsheet's items ask the app's permissions, as a CRUD's actions do, so only a table with one listens for them.
+    const hasSheet = Boolean(excel);
+    const subscribeSheet = useCallback((listener) => (hasSheet ? subscribePermissions(listener) : () => { }), [hasSheet]);
+    useSyncExternalStore(subscribeSheet, hasSheet ? permissionsVersion : NO_VERSION, NO_VERSION);
     const dates = useDatePreferences();
     const timeZone = useBrowserTimeZone();
     const numbers = useNumberLocale();
-    const cellOptions = useMemo(() => ({ preferences: dates, timeZone: timeZone ?? undefined, locale: numbers }), [dates, timeZone, numbers]);
+    // `joinsVersion` is read by no cell option: a new object is what tells the memoized rows that their names came in.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const cellOptions = useMemo(() => ({ preferences: dates, timeZone: timeZone ?? undefined, locale: numbers, currency }), [dates, timeZone, numbers, currency, joinsVersion]);
     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);
+    // Every section starts folded shut, then takes the choice this device remembers (a layout effect: no flicker).
+    const [openSections, setOpenSections] = useState(() => new Set());
     const searchTimer = useRef(undefined);
     const searchRef = useRef(null);
     const started = useRef(false);
@@ -134,15 +165,16 @@ export function DataTable(props) {
             started.current = true;
             const saved = readSaved(stateKey);
             table.restore({
-                pageSize: saved?.pageSize && pageSizes.includes(saved.pageSize) ? saved.pageSize : openingPageSize(),
+                pageSize: !whole && 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,
                 widths: saved?.widths,
                 pinned: saved?.pinned,
             });
-            if (saved?.pinsOpen)
-                setPinsOpen(true);
+            const open = saved?.openSections ?? (saved?.pinsOpen ? [PINS_SECTION] : []);
+            if (open.length)
+                setOpenSections(new Set(open));
             if (givenRows)
                 table.setRows(givenRows);
             else
@@ -159,6 +191,26 @@ export function DataTable(props) {
         if (started.current && givenRows)
             table.setRows(givenRows);
     }, [table, givenRows]);
+    // Another table's settings behind the same table (a CRUD's scope keeps its own): read as on the first draw, before the
+    // rows its new list loads, and the settings on screen are not written under the new key (`restoredKey` is what says
+    // the store already holds that key's settings).
+    const restoredKey = useRef(stateKey);
+    useLayoutEffect(() => {
+        if (!started.current || restoredKey.current === stateKey)
+            return;
+        restoredKey.current = stateKey;
+        const saved = readSaved(stateKey);
+        table.restore({
+            pageSize: !whole && saved?.pageSize && pageSizes.includes(saved.pageSize) ? saved.pageSize : openingPageSize(),
+            sort: saved?.sort !== undefined ? saved.sort : (defaultSort ?? null),
+            hidden: saved?.hidden ?? columns.filter(column => column.hidden).map(column => column.key),
+            order: saved?.order ?? [],
+            widths: saved?.widths ?? {},
+            pinned: saved?.pinned ?? {},
+        }, { notify: true });
+        setOpenSections(new Set(saved?.openSections ?? (saved?.pinsOpen ? [PINS_SECTION] : [])));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [table, stateKey]);
     // Another list behind the same table: start over from the first page, with no search and no selection.
     useLayoutEffect(() => {
         if (loadedKey.current === loadKey)
@@ -169,20 +221,24 @@ export function DataTable(props) {
         void table.reload({ reset: true });
     }, [table, loadKey]);
     useEffect(() => () => clearTimeout(searchTimer.current), []);
-    // Saved settings follow the user's choices.
+    // Saved settings follow the user's choices. What is written is the store's state now, never this draw's: the first
+    // draw, and the draw that took another key's settings, still hold the settings from before the restore, and writing
+    // those would put the opening defaults (or another key's settings) under the key.
     const hiddenList = useMemo(() => [...state.hidden].sort(), [state.hidden]);
     useEffect(() => {
         if (!stateKey || !started.current)
             return;
+        const now = table.getState();
         writeSaved(stateKey, {
             // 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,
-            widths: Object.keys(state.widths).length ? state.widths : undefined,
-            pinned: Object.keys(state.pinned).length ? state.pinned : undefined,
+            pageSize: now.query.pageSize === openingPageSize() ? undefined : now.query.pageSize,
+            sort: now.query.sort,
+            hidden: [...now.hidden].sort(),
+            order: now.order.length ? [...now.order] : undefined,
+            widths: Object.keys(now.widths).length ? now.widths : undefined,
+            pinned: Object.keys(now.pinned).length ? now.pinned : undefined,
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [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
@@ -193,11 +249,25 @@ export function DataTable(props) {
         if (preferredSize.current === preferences.pageSize)
             return;
         preferredSize.current = preferences.pageSize;
-        if (!started.current || readSaved(stateKey)?.pageSize)
+        if (whole || !started.current || readSaved(stateKey)?.pageSize)
             return;
         table.setPageSize(openingPageSize());
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [preferences.pageSize]);
+    // Every key the rows hold for a join, asked for together: a client table's every row, since it searches and sorts them
+    // all, a server table's page, and the rows of the sections above it. What is known already is not asked again.
+    useEffect(() => {
+        if (!joins.length || state.status !== "ready")
+            return;
+        const shown = [...table.getRows(), ...(pinnedRows ?? []), ...(ownSections ?? []).flatMap(section => section.rows)];
+        for (const [source, keys] of joinKeys(joins, shown))
+            tableJoins.request(joinSource(source), keys);
+    }, [joins, state.status, state.rows, pinnedRows, ownSections, table]);
+    // Names came in: a client table searches and sorts again with them.
+    useEffect(() => {
+        if (joinsVersion)
+            table.refreshValues();
+    }, [joinsVersion, table]);
     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]);
@@ -205,7 +275,7 @@ export function DataTable(props) {
         if (rowLabel)
             return rowLabel(row);
         const first = columns[0];
-        const text = first ? formatCellText(first, columnValue(first, row), cellOptions) : "";
+        const text = first ? formatCellText(first, columnValue(first, row), cellOptions, row) : "";
         return text || `row ${table.keyOf(row)}`;
     }, [rowLabel, columns, cellOptions, table]);
     const actionsOf = usePerRow(rowActions);
@@ -232,6 +302,10 @@ export function DataTable(props) {
             void result.finally(() => table.setBusy([key], false)).catch(() => undefined);
         }
     }, [table]);
+    // The picked row (`onPick`): a click on a row, or its radio button, picks it through the store, which follows it.
+    const pickRow = useCallback((row) => table.pick(row), [table]);
+    const pickName = `${tableId}pick`;
+    const pickedKey = state.picked ? table.keyOf(state.picked) : null;
     const onSearch = (text) => {
         clearTimeout(searchTimer.current);
         if (searchDelay > 0 && text.trim())
@@ -252,9 +326,11 @@ export function DataTable(props) {
     const headRef = useRef(null);
     const colRefs = useMemo(() => new Map(), []);
     const [offsets, setOffsets] = useState({});
+    // Pinned columns that scroll for now: on a narrow table the ones past `PINNED_SHARE` of its width give way.
+    const [released, setReleased] = useState(NONE_RELEASED);
     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;
+    const views = useMemo(() => viewColumns(visible, { order: state.order, pinned: state.pinned, widths: state.widths, offsets, released, reorderable, resizable }), [visible, state.order, state.pinned, state.widths, offsets, released, reorderable, resizable]);
+    const indexOn = selectable || numbered || pickable;
     // 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);
@@ -299,8 +375,36 @@ export function DataTable(props) {
         // The bar of the selected rows starts after the checkbox column, whatever width it took.
         root?.style.setProperty("--nx-table-index-w", `${Math.round(left)}px`);
         setOffsets(previous => (sameNumbers(previous, next) ? previous : next));
+        settlePins.current();
     });
+    // Which pinned columns give way: measured from the headings after every render and whenever the table's width
+    // changes. Staying or scrolling changes no width, so it settles at once.
+    const settlePins = useRef(() => undefined);
+    settlePins.current = () => {
+        const scroller = scrollRef.current;
+        const cells = headLeafCells(headRef.current);
+        if (!scroller || cells.length === 0)
+            return;
+        const sides = new Map(views.map(view => [view.column.key, view.side]));
+        let frameWidth = 0;
+        const left = [];
+        const right = [];
+        for (const cell of cells) {
+            const key = cell.getAttribute("data-col");
+            const width = cell.getBoundingClientRect().width;
+            if (key === TABLE_INDEX_COLUMN || key === TABLE_ACTIONS_COLUMN)
+                frameWidth += width;
+            else if (key && sides.get(key) === "left")
+                left.push([key, width]);
+            else if (key && sides.get(key) === "right")
+                right.unshift([key, width]);
+        }
+        const next = left.length + right.length === 0 ? NONE_RELEASED : releasedPins(scroller.clientWidth, frameWidth, left, right);
+        setReleased(previous => (sameKeys(previous, next) ? previous : next));
+    };
     // Shadows at the pinned columns while the others scroll under them: set on the frame, with no render.
+    // The width the rows can show goes on the frame too, so a message across a wide table (no rows, a hint, a failed
+    // load) stays inside what is on screen instead of centring on the whole scroll width.
     useLayoutEffect(() => {
         const scroller = scrollRef.current;
         const frameElement = scroller?.parentElement;
@@ -311,9 +415,14 @@ export function DataTable(props) {
             frameElement.toggleAttribute("data-scroll-start", left > 1);
             frameElement.toggleAttribute("data-scroll-end", left < scroller.scrollWidth - scroller.clientWidth - 1);
         };
-        update();
+        const measure = () => {
+            frameElement.style.setProperty("--nx-table-view-w", `${scroller.clientWidth}px`);
+            update();
+            settlePins.current();
+        };
+        measure();
         scroller.addEventListener("scroll", update, { passive: true });
-        const observer = new ResizeObserver(update);
+        const observer = new ResizeObserver(measure);
         observer.observe(scroller);
         if (scroller.firstElementChild)
             observer.observe(scroller.firstElementChild);
@@ -439,6 +548,10 @@ export function DataTable(props) {
     const barRef = useRef(null);
     const reloadRef = useRef(null);
     const [reloadHidden, setReloadHidden] = useState(false);
+    // An Add that cannot add yet (`add.disabled` with a `description`) says why on a press, under it.
+    const addNotice = useReadOnlyNotice(Boolean(add?.disabled && add.description), barRef, add?.description, { anchor: target => target.closest(".nx-btn"), typing: false, lock: "label" });
+    // The spreadsheet's other ways to add sit under the Add's arrow only while it can add.
+    const addable = Boolean(add && !add.disabled);
     const addPart = Boolean(add || actions);
     const listsPart = Boolean(toolbar);
     useLayoutEffect(() => {
@@ -463,28 +576,44 @@ export function DataTable(props) {
             cancelAnimationFrame(frame);
         };
     }, [addPart, listsPart, searchable, reloadable]);
+    // A person's Reload is a refresh of what the table shows, the names it looked up included: those are marked old - still
+    // drawn, asked again with the rows - and nothing else the page keeps is touched.
     const reload = () => {
+        for (const join of joins)
+            tableJoins.expire(joinSourceName(join.source));
         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.
+    // screen. With an Add, they are other ways to add, under its arrow; without one, they are in the options menu. Each is
+    // offered only to a person the app's permissions let call every endpoint it needs, the settings included.
+    const sheet = excel?.endpoints;
+    const mayUseSheet = (...endpoints) => [sheet.settings, ...endpoints].every(endpoint => canCall(endpoint));
     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
+            ...(mayUseSheet(sheet.template) ? [{ id: "excel-template", label: "Download template", description: `A spreadsheet to fill in`, icon: _jsx(InlineIcon, { icon: iconDownload }), onSelect: () => void downloadExcelTemplate(excel.endpoints, { params: excel.params }) }] : []),
+            ...(mayUseSheet(sheet.verify, sheet.import)
+                ? [
+                    { 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 that can 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 || !addable
+                        ? []
+                        : [{ 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" }) }]),
+                ]
+                : []),
+            ...(sheet.export && mayUseSheet(sheet.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()) }]
                 : []),
-        ]
+        ].map((item, index) => (index === 0 ? { ...item, separator: true } : item))
         : [];
     // 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 addButton = (block = false) => add && (_jsx(Button, { variant: "primary", size: "sm", block: block, icon: _jsx(InlineIcon, { icon: iconPlus }), "aria-disabled": add.disabled || undefined, title: add.description, onKeyDown: addNotice.onKeyDown, onClick: event => {
+            if (!add.disabled)
+                add.onClick();
+            else if (!add.onDisabledPress?.())
+                addNotice.show(event.currentTarget);
+        }, children: add.label }));
     const optionItems = [
         ...(filterInputs?.length
             ? [{ id: "filters", label: "Filters", description: filtersOn.join(", ") || undefined, icon: _jsx(InlineIcon, { icon: iconFilter }), onSelect: () => filtersRef.current?.open() }]
@@ -499,7 +628,7 @@ export function DataTable(props) {
             : []),
         // The sheet's own Import replaces the page's `onImport` hook.
         ...(excel
-            ? add
+            ? addable
                 ? []
                 : sheetItems
             : onImport
@@ -513,7 +642,9 @@ export function DataTable(props) {
         ...(reloadable && reloadHidden ? [{ id: "reload", label: "Reload", icon: _jsx(InlineIcon, { icon: iconRefresh }), separator: true, onSelect: reload }] : []),
     ];
     const optionEntries = menuEntries(optionItems);
-    const pageSizePicker = _jsx(TablePageSize, { pageSize: query.pageSize, pageSizes: pageSizes, compact: searchable, onChange: value => table.setPageSize(value) });
+    // Rows per page: inside the search box, in the bar without one, or beside the pager (`pager`); none for a table read whole.
+    const pageSizePicker = whole ? null : _jsx(TablePageSize, { pageSize: query.pageSize, pageSizes: pageSizes, compact: searchable && pager === "bar", onChange: value => table.setPageSize(value) });
+    const barPageSize = pager === "bar" ? pageSizePicker : null;
     let body;
     if (status === "loading") {
         body = _jsx(TableSkeletonRows, { count: Math.min(query.pageSize, 8), cells: cellCount, frame: frame, sized: sized });
@@ -544,24 +675,33 @@ export function DataTable(props) {
         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, openOnClick: openOnClick }, 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, marks: rowMarks?.(row), frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick, onPick: pickable ? pickRow : undefined, picked: key === pickedKey, pickName: pickable ? pickName : undefined }, key || index));
         });
     }
-    /* The pinned section above the page: the records the user pinned, folded open or shut, remembered on this device */
+    /* The sections above the page: the records pinned, the favourites, each folded open or shut, remembered on this device */
+    const pinsSection = pinnedRows ? { key: PINS_SECTION, label: pinnedLabel, icon: iconPin, rows: pinnedRows, loading: pinnedLoading, max: pinnedMax } : null;
     // A section with nothing in it and nothing on its way would be an empty heading, so it does not show at all.
-    const pins = pinnedRows && (pinnedRows.length > 0 || pinnedLoading) ? pinnedRows : null;
-    const togglePins = () => {
-        const next = !pinsOpen;
-        setPinsOpen(next);
+    const sections = [...(pinsSection ? [pinsSection] : []), ...(ownSections ?? [])].filter(section => section.rows.length > 0 || section.loading);
+    const toggleSection = (key) => {
+        const next = new Set(openSections);
+        if (!next.delete(key))
+            next.add(key);
+        setOpenSections(next);
         if (stateKey)
-            writeSaved(stateKey, { pinsOpen: next });
+            writeSaved(stateKey, { openSections: [...next], pinsOpen: undefined });
     };
-    const pinnedBody = pinsOpen &&
-        pins?.map((row, index) => {
+    const sectionRows = (section) => {
+        // A row with no marks of its own still wears the section's icon.
+        const own = [{ icon: section.icon, label: section.label }];
+        return section.rows.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, openOnClick: openOnClick }, `pin:${key || index}`));
+            const marks = rowMarks?.(row);
+            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, marks: marks?.length ? marks : own, frame: frame, sized: sized, actions: hasActions ? (actionsOf(row) ?? []) : null, onToggle: onToggle, onAction: onAction, onOpen: onRowOpen, openOnClick: openOnClick, 
+                // A click picks a section's row too; its radio button is the one in the list below, where the arrow keys move.
+                onPick: pickable ? pickRow : undefined, picked: key === pickedKey }, 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) => {
@@ -580,8 +720,8 @@ export function DataTable(props) {
     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", { 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 => {
+    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: [caption && _jsx("div", { className: "nx-table__caption", children: caption }), _jsxs("div", { ref: barRef, className: "nx-table__bar", children: [addPart && (_jsxs("div", { className: "nx-table__bar-add", children: [add &&
+                                (addable && 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 && barPageSize] }), searchable && (_jsx(TextBox, { ref: searchRef, type: "search", size: "sm", className: "nx-table__search", actionsStart: barPageSize, 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);
@@ -590,13 +730,16 @@ export function DataTable(props) {
                                                                 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) })] }));
+                                                            } }) })) })), 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))) })] }), sections.map(section => {
+                                    const open = openSections.has(section.key);
+                                    return (_jsxs("tbody", { className: "nx-table__section", "data-section": section.key, "data-open": open || undefined, children: [_jsx(TableSectionHead, { span: span, label: section.label, icon: section.icon, count: section.rows.length, max: section.max, loading: Boolean(section.loading), open: open, onToggle: () => toggleSection(section.key) }), open && sectionRows(section)] }, section.key));
+                                }), _jsx("tbody", { children: body })] }) })] }), _jsx(TableFooter, { state: state, disabled: refreshing, whole: whole, pageSize: pager === "footer" ? pageSizePicker : null, onPage: page => table.setPage(page) }), addNotice.notice] }));
 }
 /** 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) {
     // A column moves among the columns on its own side, past the ones that stay put.
-    const pin = views.find(view => view.column.key === key)?.pin ?? null;
-    const group = views.filter(view => view.pin === pin && view.movable);
+    const side = views.find(view => view.column.key === key)?.side ?? null;
+    const group = views.filter(view => view.side === side && view.movable);
     const at = group.findIndex(view => view.column.key === key);
     if (at < 0)
         return { left: undefined, right: undefined };
@@ -637,11 +780,12 @@ function HeaderCell({ view, sized, rowSpan, sort, disabled, covered, canPin, can
     if (canPin) {
         if (entries.length)
             entries.push({ separator: true });
-        if (view.pin !== "left")
+        // The side chosen, also while a narrow table lets it scroll.
+        if (view.side !== "left")
             entries.push({ value: "pin-left", label: "Pin left", icon: _jsx(InlineIcon, { icon: iconArrowBarToLeft }) });
-        if (view.pin !== "right")
+        if (view.side !== "right")
             entries.push({ value: "pin-right", label: "Pin right", icon: _jsx(InlineIcon, { icon: iconArrowBarToRight }) });
-        if (view.pin)
+        if (view.side)
             entries.push({ value: "unpin", label: "Unpin", icon: _jsx(InlineIcon, { icon: iconPinnedOff }) });
     }
     if (view.movable && (neighbours.left !== undefined || neighbours.right !== undefined)) {
@@ -679,7 +823,7 @@ function HeaderCell({ view, sized, rowSpan, sort, disabled, covered, canPin, can
             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}`), 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 }))] }));
+    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-side": view.side ?? 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"];

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

@@ -1,6 +1,6 @@
 import { type Ref, type RefObject } from "react";
 import { type PopoverPanelHandle } from "../../Helpers/PopoverHooks.ts";
-import type { InputParams } from "../../Interfaces/FormInterfaces.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`). */

package/dist/Components/Viewers/DataTableFilters.js

@@ -4,6 +4,7 @@ import { iconFilterOff, InlineIcon } from "nexus-icons";
 import { useEffect, useId, useRef } from "react";
 import { usePopoverPanel } from "../../Helpers/PopoverHooks.js";
 import { activeFilters } from "../../Helpers/TableFilters.js";
+import { EInputTypes } from "../../Interfaces/FormInterfaces.js";
 import { Button } from "../Documents/Button.js";
 import { Form, useForm } from "../Forms/Form.js";
 import { formatCount } from "./DataTableParts.js";
@@ -14,7 +15,21 @@ import { formatCount } from "./DataTableParts.js";
  * never clears a filter on its way out.
  */
 /** Inputs typed into or dragged: their value waits until the person stops. A date box reads a date from part of one. */
-const TYPED = new Set(["text", "email", "search", "tel", "url", "textarea", "number", "slider", "range-slider", "date", "date-range", "time", "date-time"]);
+const TYPED = new Set([
+    EInputTypes.Text,
+    EInputTypes.Email,
+    EInputTypes.Search,
+    EInputTypes.Tel,
+    EInputTypes.Url,
+    EInputTypes.TextArea,
+    EInputTypes.Number,
+    EInputTypes.Slider,
+    EInputTypes.RangeSlider,
+    EInputTypes.Date,
+    EInputTypes.DateRange,
+    EInputTypes.Time,
+    EInputTypes.DateTime,
+]);
 /** The Filters panel, opened through its `open()` handle: a `Form` of the filter inputs, the count, and Clear all. */
 export function TableFiltersPanel({ inputs, value, delay, matches, total, onChange, anchor, ref }) {
     const titleId = useId();
@@ -57,7 +72,7 @@ export function TableFiltersPanel({ inputs, value, delay, matches, total, onChan
         }, children: [_jsxs("div", { className: "nx-table-panel__head", children: [_jsx("span", { className: "nx-table-panel__title", id: titleId, children: "Filters" }), _jsx("span", { className: "nx-table-panel__count", children: count ? `${count} on` : "None" })] }), _jsx("div", { className: "nx-popover__scroll", children: shown && (_jsx(Form, { form: form, inputs: inputs, size: "sm", defaultValue: value, className: "nx-table-filters__form", onValueChange: (_, name) => {
                         if (name === null)
                             return;
-                        if (delay > 0 && TYPED.has(inputs.find(params => params.name === name)?.type ?? ""))
+                        if (delay > 0 && TYPED.has(inputs.find(params => params.name === name)?.type ?? 0))
                             wait();
                         else
                             apply();