nexus-shared 2.0.0 → 3.0.0

package/dist/Components/Inputs/TabularForm.js

@@ -1,11 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { iconArrowDown, iconArrowUp, iconCopy, iconDotsVertical, iconRowInsertBottom, iconRowInsertTop, iconTrash, iconX, InlineIcon } from "nexus-icons";
+import { iconArrowDown, iconArrowUp, iconCopy, iconDotsVertical, iconLock, iconRowInsertBottom, iconRowInsertTop, iconTrash, InlineIcon } from "nexus-icons";
 import { memo, useCallback, useLayoutEffect, useMemo, useRef, useState, } from "react";
 import { cx } from "../../Helpers/ClassHelpers.js";
-import { Button } from "../Documents/Button.js";
 import { Menu } from "../Documents/Menu.js";
-import { firstFocusable, labelText, RowCell, rowName, RowsFooter, RowsLegend, useRowsFrame, useRowsInput, useRowVersion } from "./RowsInput.js";
+import { firstFocusable, labelText, RowCell, RowsFooter, RowsLegend, useRowsFrame, useRowsInput, useRowVersion } from "./RowsInput.js";
 /** Height of a row: the input's box and the line under it. Measured from the first row once it renders. */
 const ROW_HEIGHT = { sm: 29, md: 35, lg: 41 };
 /** Rows rendered above and below the ones in view, so Tab and Enter always find the next row on the page. */
@@ -52,19 +51,20 @@ function columnWidth(params) {
 /** One row of inputs. It renders again only when its position, its messages, or a value set from code change. */
 const TabularRow = memo(function TabularRow({ store, rowKey, index, count, columns, context, onAction }) {
     useRowVersion(store, rowKey);
-    const name = rowName(store, index);
     const title = `${store.names.title} ${index + 1}`;
     const invalid = context.showAll && store.rowProblems(rowKey) > 0;
     const items = [];
-    if (context.canAdd) {
+    // A row nobody may change (an inherited field) has nothing to offer: no copy of it, no move, no removal.
+    const fixed = Boolean(context.rowLock(rowKey, index));
+    if (context.canAdd && !fixed) {
         items.push({ value: "insert-above", label: "Insert above", icon: _jsx(InlineIcon, { icon: iconRowInsertTop }) }, { value: "insert-below", label: "Insert below", icon: _jsx(InlineIcon, { icon: iconRowInsertBottom }) }, { value: "duplicate", label: "Duplicate", icon: _jsx(InlineIcon, { icon: iconCopy }) });
     }
-    if (context.sortable) {
+    if (context.sortable && !fixed) {
         if (items.length)
             items.push({ separator: true });
-        items.push({ value: "move-up", label: "Move up", icon: _jsx(InlineIcon, { icon: iconArrowUp }), disabled: index === 0 }, { value: "move-down", label: "Move down", icon: _jsx(InlineIcon, { icon: iconArrowDown }), disabled: index === count - 1 });
+        items.push({ value: "move-up", label: "Move up", icon: _jsx(InlineIcon, { icon: iconArrowUp }), disabled: index === 0 || Boolean(context.rowLock(store.keyAt(index - 1), index - 1)) }, { value: "move-down", label: "Move down", icon: _jsx(InlineIcon, { icon: iconArrowDown }), disabled: index === count - 1 });
     }
-    if (context.removable) {
+    if (context.removable && !fixed) {
         if (items.length)
             items.push({ separator: true });
         items.push({ value: "remove", label: "Remove", icon: _jsx(InlineIcon, { icon: iconTrash }), tone: "danger" });
@@ -76,7 +76,7 @@ const TabularRow = memo(function TabularRow({ store, rowKey, index, count, colum
             return;
         store.touch(rowKey, cell.dataset.nxCell ?? "");
     }
-    return (_jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": index + 2, "data-nx-row": rowKey, "data-problem": invalid || undefined, onBlur: onBlur, children: [context.numbered && (_jsx("div", { role: "cell", className: "nx-tabular__num", children: items.length > (context.removable ? 1 : 0) ? (_jsx(Menu, { items: items, onSelect: value => onAction(value, rowKey), "aria-label": `${title} actions`, children: _jsxs("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `${title} actions`, title: `${title} actions`, "data-nx-row-actions": "", children: [_jsx("span", { className: "nx-tabular__num-text", children: index + 1 }), _jsx(InlineIcon, { icon: iconDotsVertical, className: "nx-tabular__num-icon" })] }) })) : (_jsx("span", { className: "nx-tabular__num-text", children: index + 1 })) })), columns.map(params => (_jsx("div", { role: "cell", className: cx("nx-tabular__cell", `nx-tabular__cell--${cellKind(params)}`), "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: params, index: index, error: store.shownError(rowKey, params.name), layout: "tabular", idPrefix: context.idPrefix, size: context.size, readOnly: context.readOnly, disabled: context.disabled }, store.revision(rowKey, params.name)) }, params.name))), context.removable && (_jsx("div", { role: "cell", className: "nx-tabular__end", children: _jsx(Button, { variant: "ghost", size: "sm", hoverTone: "danger", className: "nx-tabular__remove", icon: _jsx(InlineIcon, { icon: iconX }), "aria-label": `Remove ${name}`, title: `Remove ${name}`, onClick: () => onAction("remove", rowKey) }) }))] }));
+    return (_jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": index + 2, "data-nx-row": rowKey, "data-problem": invalid || undefined, onBlur: onBlur, children: [context.numbered && (_jsxs("div", { role: "cell", className: "nx-tabular__num", children: [_jsx("span", { className: "nx-tabular__num-text", children: index + 1 }), items.length > 0 && (_jsx(Menu, { items: items, onSelect: value => onAction(value, rowKey), "aria-label": `${title} actions`, children: _jsx("button", { type: "button", className: "nx-tabular__num-button", "aria-label": `${title} actions`, title: `${title} actions`, "data-nx-row-actions": "", children: _jsx(InlineIcon, { icon: iconDotsVertical }) }) }))] })), columns.map(params => (_jsx("div", { role: "cell", className: cx("nx-tabular__cell", `nx-tabular__cell--${cellKind(params)}`), "data-nx-cell": params.name, children: _jsx(RowCell, { store: store, rowKey: rowKey, params: context.cellParams(rowKey, params, index), index: index, error: store.shownError(rowKey, params.name), layout: "tabular", idPrefix: context.idPrefix, size: context.size, readOnly: context.readOnly, disabled: context.disabled, lock: context.cellLock(rowKey, params.name, index) }, store.revision(rowKey, params.name)) }, params.name)))] }));
 });
 /**
  * Rows of inputs in a table, one column per input: a person's emails or addresses, invoice lines, a salary sheet. The
@@ -84,9 +84,13 @@ const TabularRow = memo(function TabularRow({ store, rowKey, index, count, colum
  * come as params, the same objects a form takes, so the same list can show as sections in a `GroupForm`.
  *
  * Only the rows in view are on the page, so a sheet of thousands of rows opens and types as fast as a short one; the
- * values live in a store outside React, and typing renders nothing. The header, the row numbers, and the remove buttons
- * stay in place while the table scrolls. A row number opens the row's menu (insert, duplicate, move, remove). Enter in
- * a text or number cell moves down the column, and on the last row adds a row.
+ * values live in a store outside React, and typing renders nothing. The header and the numbered column stay in place
+ * while the table scrolls. Each row has one control, beside its number and never in its place: a menu of insert,
+ * duplicate, move and remove. Enter in a text or number cell moves down the column, and on the last row adds a row.
+ *
+ * Every row is one line high, whatever it holds, so nothing shifts as the table is used; a column generated for every
+ * row (`cellReadOnly`) says so once on its header rather than on each of its cells; and `maxHeight` is brought down
+ * to whole rows, because a scroller that cuts the last one in half reads as broken rather than as scrollable.
  *
  * Inside a `<form>`, the rows are sent as JSON under `name`; a row with a problem blocks submit, and the first one
  * scrolls into view with focus.
@@ -115,6 +119,7 @@ export function TabularForm(props) {
     const headRef = useRef(null);
     const bodyRef = useRef(null);
     const [rowHeight, setRowHeight] = useState(ROW_HEIGHT[size]);
+    const [viewportMax, setViewportMax] = useState(null);
     const pageRows = Math.ceil((typeof maxHeight === "number" ? maxHeight : 600) / rowHeight);
     const [range, setRange] = useState({ start: 0, end: pageRows + OVERSCAN });
     const [status, setStatus] = useState(null);
@@ -148,6 +153,27 @@ export function TabularForm(props) {
         if (height && height !== rowHeight)
             setRowHeight(height);
     });
+    /**
+     * `maxHeight`, brought down to whole rows. A scroller that cuts the last row in half reads as broken rather than as
+     * scrollable, and the header is not a row, so the arithmetic has to leave it out — as it does the frame and the
+     * horizontal scroll bar, neither of which is a row either.
+     */
+    useLayoutEffect(() => {
+        const viewport = viewportRef.current;
+        const wanted = typeof maxHeight === "number" ? maxHeight : null;
+        if (!viewport || wanted === null || count === 0) {
+            if (viewportMax !== null)
+                setViewportMax(null);
+            return;
+        }
+        const head = headRef.current?.offsetHeight ?? 0;
+        const chrome = viewport.offsetHeight - viewport.clientHeight;
+        const room = wanted - chrome - head;
+        // Not even one row fits: leave what was asked for rather than showing a header and a sliver.
+        const next = room < rowHeight ? null : chrome + head + Math.floor(room / rowHeight) * rowHeight;
+        if (next !== viewportMax)
+            setViewportMax(next);
+    });
     // A resize, a new row height, or fewer rows change which rows are in view.
     useLayoutEffect(() => {
         const viewport = viewportRef.current;
@@ -260,8 +286,46 @@ export function TabularForm(props) {
             layoutRef.current?.focusRow(key, name);
         }
     }
-    const context = useMemo(() => ({ idPrefix: frame.id, size, readOnly, disabled, numbered, removable, sortable, canAdd: rows.canAdd, showAll: snapshot.showAll }), [frame.id, size, readOnly, disabled, numbered, removable, sortable, rows.canAdd, snapshot.showAll]);
-    const numberWidth = `calc(${Math.max(2, String(count).length)}ch + 24px)`;
+    const context = useMemo(() => ({ idPrefix: frame.id, size, readOnly, disabled, numbered, removable, sortable, canAdd: rows.canAdd, showAll: snapshot.showAll, cellLock: rows.cellLock, cellParams: rows.cellParams, rowLock: rows.rowLock }), [frame.id, size, readOnly, disabled, numbered, removable, sortable, rows.canAdd, snapshot.showAll, rows.cellLock, rows.cellParams, rows.rowLock]);
+    /**
+     * Which columns are generated for **every** row on the page. The lock is then said once, on the column header,
+     * instead of on each of its cells: eighteen locks down one column is eighteen times the ink for one fact. The cells
+     * keep their read-only tint and their reason, which shows under the table when one is used.
+     *
+     * Only the rows in view are asked, which is what a column-wide rule (`cellReadOnly` on a name) answers the same way
+     * however the table is scrolled. A lock that really is per row leaves the column unlocked, which is what it means.
+     */
+    const lockedColumns = useMemo(() => {
+        const locked = new Map();
+        for (const params of columns) {
+            if (readOnly || params.readOnly === true) {
+                locked.set(params.name, true);
+                continue;
+            }
+            if (!shownKeys.length)
+                continue;
+            let reason;
+            for (const [offset, key] of shownKeys.entries()) {
+                // A locked row says nothing about its columns: the rows around it decide whether a column is generated.
+                if (rows.rowLock(key, start + offset))
+                    continue;
+                const lock = rows.cellLock(key, params.name, start + offset);
+                if (!lock) {
+                    reason = undefined;
+                    break;
+                }
+                if (reason === undefined)
+                    reason = typeof lock === "string" ? lock : true;
+            }
+            if (reason !== undefined)
+                locked.set(params.name, reason);
+        }
+        return locked;
+        // `shownKeys` is a fresh array on every render; the work is a call per visible cell, and nothing memoised is
+        // handed to the rows, so recomputing it costs a map and never a re-render of a row.
+    }, [columns, readOnly, rows.cellLock, rows.rowLock, shownKeys, start]);
+    // The number and the row's menu, side by side, plus the frame around them. Both are always there, so nothing moves.
+    const numberWidth = `calc(${Math.max(2, String(count).length)}ch + 18px + var(--nx-tabular-menu))`;
     const widths = columns.map(columnWidth);
     const template = [
         numbered ? numberWidth : null,
@@ -269,15 +333,16 @@ export function TabularForm(props) {
             const grow = params.grow ?? (FIXED_TYPES.has(params.type) ? 0 : 1);
             return grow > 0 ? `minmax(${widths[index]}, ${grow}fr)` : widths[index];
         }),
-        removable ? "var(--nx-tabular-end)" : null,
     ]
         .filter(Boolean)
         .join(" ");
-    const minWidth = `calc(${[numbered ? numberWidth : "0px", ...widths, removable ? "var(--nx-tabular-end)" : "0px"].join(" + ")})`;
-    const tableStyle = { "--nx-tabular-columns": template, minWidth };
+    const minWidth = `calc(${[numbered ? numberWidth : "0px", ...widths].join(" + ")})`;
+    const tableStyle = { "--nx-tabular-columns": template, "--nx-tabular-num": numbered ? numberWidth : "0px", minWidth };
     const invalid = Boolean(error || snapshot.message || snapshot.invalidRows);
-    return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-tabular", `nx-tabular--${size}`, className), style: style, disabled: disabled, "data-problem": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-describedby": frame.messageId, children: [_jsx(RowsLegend, { id: frame.legendId, label: label, required: required || (props.min ?? 0) > 0, lock: frame.lock }), _jsx("input", { ref: rows.proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", form: props.form, onInvalid: rows.onInvalid }), _jsx("div", { ref: viewportRef, className: "nx-tabular__viewport", tabIndex: -1, style: { maxHeight: cssLength(maxHeight) }, onScroll: updateRange, children: _jsxs("div", { role: "table", className: "nx-tabular__table", style: tableStyle, "aria-labelledby": label ? frame.legendId : undefined, "aria-label": label ? undefined : props["aria-label"], "aria-rowcount": count + 1, children: [_jsx("div", { ref: headRef, role: "rowgroup", className: "nx-tabular__head", children: _jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": 1, children: [numbered && (_jsxs("div", { role: "columnheader", className: "nx-tabular__num", children: [_jsx("span", { "aria-hidden": "true", children: "#" }), _jsx("span", { className: "nx-visually-hidden", children: store.names.title })] })), columns.map(params => {
+    return (_jsxs("fieldset", { id: frame.id, className: cx("nx-rows", "nx-tabular", `nx-tabular--${size}`, className), style: style, disabled: disabled, "data-problem": invalid || undefined, "data-readonly": readOnly || undefined, "aria-label": props["aria-label"], "aria-describedby": frame.messageId, children: [_jsx(RowsLegend, { id: frame.legendId, label: label, required: required || (props.min ?? 0) > 0, lock: frame.lock }), _jsx("input", { ref: rows.proxyRef, className: "nx-visually-hidden", tabIndex: -1, "aria-hidden": "true", form: props.form, onInvalid: rows.onInvalid }), _jsx("div", { ref: viewportRef, className: "nx-tabular__viewport", tabIndex: -1, style: { maxHeight: viewportMax ?? cssLength(maxHeight) }, onScroll: updateRange, children: _jsxs("div", { role: "table", className: "nx-tabular__table", style: tableStyle, "aria-labelledby": label ? frame.legendId : undefined, "aria-label": label ? undefined : props["aria-label"], "aria-rowcount": count + 1, children: [_jsx("div", { ref: headRef, role: "rowgroup", className: "nx-tabular__head", children: _jsxs("div", { role: "row", className: "nx-tabular__row", "aria-rowindex": 1, children: [numbered && (_jsxs("div", { role: "columnheader", className: "nx-tabular__num", children: [_jsx("span", { "aria-hidden": "true", children: "#" }), _jsx("span", { className: "nx-visually-hidden", children: store.names.title })] })), columns.map(params => {
                                         const columnHint = params.hint;
-                                        return (_jsxs("div", { role: "columnheader", className: cx("nx-tabular__head-cell", `nx-tabular__cell--${cellKind(params)}`), title: typeof columnHint === "string" ? columnHint : undefined, children: [_jsx("span", { className: "nx-tabular__head-label", children: params.label ?? params.name }), params.required && (_jsx("span", { className: "nx-field__required", "aria-hidden": "true", children: "*" }))] }, params.name));
-                                    }), removable && (_jsx("div", { role: "columnheader", className: "nx-tabular__end", children: _jsx("span", { className: "nx-visually-hidden", children: "Remove" }) }))] }) }), _jsx("div", { ref: bodyRef, role: "rowgroup", className: "nx-tabular__body", style: { paddingTop: start * rowHeight, paddingBottom: Math.max(0, count - end) * rowHeight }, onKeyDown: onBodyKeyDown, onFocus: readStatus, onBlur: readStatusSoon, onInput: readStatusSoon, children: count === 0 ? (_jsx("div", { role: "row", className: "nx-tabular__row nx-tabular__row--empty", children: _jsx("div", { role: "cell", className: "nx-tabular__empty", children: frame.emptyMessage }) })) : (shownKeys.map((key, offset) => (_jsx(TabularRow, { store: store, rowKey: key, index: start + offset, count: count, columns: columns, context: context, onAction: onAction }, `${snapshot.generation}:${key}`)))) })] }) }), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, status: status, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
+                                        const locked = lockedColumns.get(params.name);
+                                        const reason = typeof locked === "string" ? locked : locked ? "Read-only" : undefined;
+                                        return (_jsxs("div", { role: "columnheader", className: cx("nx-tabular__head-cell", `nx-tabular__cell--${cellKind(params)}`), title: reason ?? (typeof columnHint === "string" ? columnHint : undefined), "data-nx-locked": locked ? "" : undefined, children: [_jsx("span", { className: "nx-tabular__head-label", children: params.label ?? params.name }), params.required && !locked && (_jsx("span", { className: "nx-field__required", "aria-hidden": "true", children: "*" })), locked && _jsx(InlineIcon, { icon: iconLock, className: "nx-tabular__head-lock", "aria-hidden": "true" })] }, params.name));
+                                    })] }) }), _jsx("div", { ref: bodyRef, role: "rowgroup", className: "nx-tabular__body", style: { paddingTop: start * rowHeight, paddingBottom: Math.max(0, count - end) * rowHeight }, onKeyDown: onBodyKeyDown, onFocus: readStatus, onBlur: readStatusSoon, onInput: readStatusSoon, children: count === 0 ? (_jsx("div", { role: "row", className: "nx-tabular__row nx-tabular__row--empty", children: _jsx("div", { role: "cell", className: "nx-tabular__empty", children: frame.emptyMessage }) })) : (shownKeys.map((key, offset) => (_jsx(TabularRow, { store: store, rowKey: key, index: start + offset, count: count, columns: columns, context: context, onAction: onAction }, `${snapshot.generation}:${key}`)))) })] }) }), _jsx(RowsFooter, { messageId: frame.messageId, store: store, snapshot: snapshot, error: error, hint: hint, status: status, addLabel: frame.addLabel, addable: addable, canAdd: rows.canAdd, max: max, maxMessage: frame.maxMessage, size: size, onAdd: () => rows.actions.add(), onUndo: () => rows.actions.undo() })] }));
 }

package/dist/Components/Inputs/TimePicker.js

@@ -111,7 +111,8 @@ export function TimePicker(props) {
             return;
         if (!isPopoverOpen(panel))
             panel.showPopover();
-        const place = () => placeUnderAnchor(panel, box.getBoundingClientRect());
+        // No arrow: the panel opens flush under the box and is read as the field's own list.
+        const place = () => placeUnderAnchor(panel, box.getBoundingClientRect(), { arrow: false });
         place();
         const stopFollowing = followAnchor(place);
         const onPointerDown = (event) => {

package/dist/Components/Layouts/ThemeSwitcher.d.ts

@@ -7,7 +7,7 @@ export interface ThemeSwitcherProps extends ThemePickerProps {
     variant?: ButtonVariant;
 }
 /**
- * A palette button that opens the theme picker below it. The panel is a native popover:
- * it closes with Esc or a click outside, and needs no library.
+ * A palette button that opens the theme picker below it, with the panel's arrow on the button. The panel is a native
+ * popover: it closes with Esc or a click outside, and needs no library.
  */
 export declare function ThemeSwitcher({ label, variant, className, ...pickerProps }: ThemeSwitcherProps): import("react").JSX.Element;

package/dist/Components/Layouts/ThemeSwitcher.js

@@ -1,29 +1,49 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { iconPalette, InlineIcon } from "nexus-icons";
-import { useId, useRef } from "react";
+import { useId, useLayoutEffect, useRef, useState } from "react";
+import { followAnchor, isPopoverOpen, placeUnderAnchor } from "../../Helpers/PopoverHelpers.js";
 import { Button } from "../Documents/Button.js";
 import { ThemePicker } from "./ThemePicker.js";
-// Keep in step with the width of .nx-theme-switcher__panel.
-const PANEL_WIDTH = 340;
-const GAP = 8;
 /**
- * A palette button that opens the theme picker below it. The panel is a native popover:
- * it closes with Esc or a click outside, and needs no library.
+ * A palette button that opens the theme picker below it, with the panel's arrow on the button. The panel is a native
+ * popover: it closes with Esc or a click outside, and needs no library.
  */
 export function ThemeSwitcher({ label = "Theme", variant = "ghost", className, ...pickerProps }) {
     const panelId = useId();
     const buttonRef = useRef(null);
-    // Opens under the button, aligned to its right edge, and kept inside the window.
-    function place(event) {
+    const panelRef = useRef(null);
+    const [open, setOpen] = useState(false);
+    // Set on pointer down while the panel is open: that press closes it (light dismiss), and its click must not reopen it.
+    const dismissingRef = useRef(false);
+    // The panel is shown from here rather than by the button's popovertarget, because it can be measured only once it is
+    // shown: placing it needs its size. It opens under the button, lined up with its right edge and inside the window.
+    useLayoutEffect(() => {
+        const panel = panelRef.current;
         const button = buttonRef.current;
-        if (event.newState !== "open" || !button)
+        if (!open || !panel || !button)
             return;
-        const box = button.getBoundingClientRect();
-        const width = Math.min(PANEL_WIDTH, window.innerWidth - GAP * 2);
-        const left = Math.min(Math.max(GAP, box.right - width), window.innerWidth - width - GAP);
-        event.currentTarget.style.top = `${box.bottom + GAP}px`;
-        event.currentTarget.style.left = `${left}px`;
+        const place = () => placeUnderAnchor(panel, button.getBoundingClientRect(), { align: "end" });
+        place();
+        return followAnchor(place);
+    }, [open]);
+    // Opening sets the state in the click itself, so the panel is placed before the frame it first paints in; closing
+    // can also come from Esc or a click outside, which only the event reports.
+    function onToggle(event) {
+        if (event.newState === "closed")
+            setOpen(false);
     }
-    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, variant: variant, className: className, "aria-label": label, title: label, popoverTarget: panelId, icon: _jsx(InlineIcon, { icon: iconPalette }) }), _jsx("div", { id: panelId, popover: "auto", role: "dialog", "aria-label": label, className: "nx-popover nx-theme-switcher__panel", onBeforeToggle: place, children: _jsx(ThemePicker, { ...pickerProps }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { ref: buttonRef, variant: variant, className: className, "aria-label": label, title: label, "aria-haspopup": "dialog", "aria-expanded": open, "aria-controls": panelId, icon: _jsx(InlineIcon, { icon: iconPalette }), onPointerDown: () => {
+                    dismissingRef.current = isPopoverOpen(panelRef.current);
+                }, onClick: () => {
+                    const panel = panelRef.current;
+                    if (dismissingRef.current)
+                        dismissingRef.current = false;
+                    else if (isPopoverOpen(panel))
+                        panel?.hidePopover();
+                    else if (panel && typeof panel.showPopover === "function") {
+                        panel.showPopover();
+                        setOpen(true);
+                    }
+                } }), _jsx("div", { ref: panelRef, id: panelId, popover: "auto", role: "dialog", "aria-label": label, className: "nx-popover nx-theme-switcher__panel", onToggle: onToggle, children: _jsx(ThemePicker, { ...pickerProps }) })] }));
 }

package/dist/Components/Viewers/DataTable.js

@@ -1,18 +1,21 @@
 "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, iconChevronDown, iconDatabase, iconDotsVertical, iconEyeOff, iconDownload, iconFileExport, iconFileImport, iconPinnedOff, iconPrinter, iconRefresh, iconRestore, iconSearch, iconSearchOff, iconSortAscending, iconSortDescending, iconX, InlineIcon, } from "nexus-icons";
 import { useCallback, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useSyncExternalStore } from "react";
 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 { 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 { 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 { 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,7 +89,7 @@ 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, columnsMenu = true, selectable = false, maxSelection = DEFAULT_MAX_SELECTION, onSelectionChange, massActions, rowActions, onRowOpen, openOnClick = false, pinnedRows, pinnedLoading = false, pinnedLabel = "Pinned", pinnedMax, onReload, reorderable = true, resizable = true, pinnable = true, moreActions, exportable = true, printable = true, exportName, onImport, excel, pageSize = DEFAULT_PAGE_SIZE, pageSizes = DEFAULT_PAGE_SIZES, defaultSort = null, stateKey, emptyMessage = "No records yet.", emptyAction, maxHeight, fill = false, size = "md", id, className, style, ref, } = props;
     const paging = givenRows ? "client" : (props.paging ?? "client");
     const reloadable = props.reloadable ?? Boolean(load);
     const searchDelay = props.searchDelay ?? (paging === "server" ? 300 : 0);
@@ -165,7 +168,8 @@ export function DataTable(props) {
         });
     }, [stateKey, state.query.pageSize, state.query.sort, hiddenList, state.order, state.widths, state.pinned]);
     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 +224,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 +241,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 +256,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 +298,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);
@@ -360,6 +368,26 @@ export function DataTable(props) {
         return { columns: shown, rows: rowsOut, cellOptions, name: outputName, note };
     };
     const serverPage = paging === "server";
+    /** What an export to Excel asks the server for: the search and the sort on screen, and the page's own filters. */
+    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: excel?.filters?.(),
+            },
+        };
+    };
+    /** After an import: the rows it wrote are the server's, so the table reads its page again. */
+    const onImported = () => {
+        void table.reload({ quiet: true });
+        excel?.onImported?.();
+    };
     const optionItems = [
         ...(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()) }]
@@ -367,9 +395,24 @@ export function DataTable(props) {
         ...(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 }] : []),
+        // A spreadsheet: the template to fill, the file to bring back, and an export the server writes from what is on
+        // screen. Its own Import replaces the page's `onImport` hook.
+        ...(excel
+            ? [
+                { id: "excel-template", label: "Download template", description: `A spreadsheet to fill in`, icon: _jsx(InlineIcon, { icon: iconDownload }), separator: true, onSelect: () => void downloadExcelTemplate(excel.endpoints, { params: excel.params }) },
+                { id: "excel-import", label: "Import from a spreadsheet", icon: _jsx(InlineIcon, { icon: iconFileImport }), onSelect: () => openExcelImport({ endpoints: excel.endpoints, subject: excel.subject, params: excel.params, onImported: onImported }) },
+                ...(excel.endpoints.export
+                    ? [{ id: "excel-export", label: "Export to Excel", description: "Everything the search leaves, from the server", icon: _jsx(InlineIcon, { icon: iconFileExport }), onSelect: () => void exportExcel(excel.endpoints, exportQuery()) }]
+                    : []),
+            ]
+            : 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() }]
+            : []),
     ];
     const optionEntries = optionItems.flatMap((action, index) => [
         ...(action.separator && index > 0 ? [{ separator: true }] : []),
@@ -397,7 +440,7 @@ 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 }, 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 +456,25 @@ 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()] : [];
     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 => {
+    // A column's own heading, wherever it stands: across both rows when no band is above it, in the row under its band when one is.
+    const headingCell = (view, rowSpan) => (_jsx(HeaderCell, { view: view, sized: sized, rowSpan: rowSpan, sort: query.sort, disabled: status !== "ready" || rows.length < 2, covered: selectedRows.length > 0, canPin: canPinColumn(view.column, { pinnable }), canHide: view.column.hideable !== false && visible.length > 1, neighbours: moveTargets(views, view.column.key), onSort: direction => table.setSort(direction ? { key: view.column.key, direction } : null), onPin: side => table.setPinned(view.column.key, side), onMove: beforeKey => table.moveColumn(view.column.key, beforeKey), onFit: () => fitColumn(view.column.key), onHide: () => table.setHidden(view.column.key, true), onPointerDown: event => onColumnPointerDown(event, view), onResizerDown: event => onResizerPointerDown(event, view.column.key) }, view.column.key));
+    return (_jsxs("div", { ref: rootRef, id: id, className: cx("nx-table", `nx-table--${size}`, fill && "nx-table--fill", className), style: style, "data-head-rows": headRows, "data-status": status, "data-refreshing": refreshing || undefined, "data-selecting": selecting || undefined, "data-sized": sized || undefined, children: [_jsxs("div", { className: "nx-table__bar", children: [toolbar && _jsx("div", { className: "nx-table__bar-start", children: toolbar }), _jsxs("div", { className: "nx-table__bar-end", children: [searchable ? (_jsx(TextBox, { type: "search", size: "sm", className: "nx-table__search", actionsStart: pageSizePicker, icon: _jsx(InlineIcon, { icon: iconSearch }), placeholder: searchPlaceholder, "aria-label": searchPlaceholder.replace(/…$/, ""), "aria-controls": tableId, defaultValue: query.search, clearable: true, onValueChange: onSearch, onKeyDown: event => {
                                     if (event.key === "Enter") {
                                         clearTimeout(searchTimer.current);
                                         table.setSearch(event.currentTarget.value);
                                     }
-                                } }, searchGeneration)) : (pageSizePicker), columnsMenu && 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: () => {
+                                } }, searchGeneration)) : (pageSizePicker), columnsMenu && columns.length > 1 && (_jsx(TableColumnsPanel, { columns: ordered, hidden: state.hidden, pinned: state.pinned, reorderable: reorderable, size: "sm", changed: table.hasColumnChanges(), onToggle: (key, hide) => table.setHidden(key, hide), onOrder: keys => table.setOrder(keys), onReset: () => table.resetColumns() })), reloadable && (_jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconRefresh, className: refreshing ? "nx-spin" : undefined }), "aria-label": "Reload", title: "Reload", disabled: status === "loading", onClick: () => {
                                     onReload?.();
                                     void table.reload({ quiet: true });
-                                } })), optionEntries.length > 0 && (_jsx(Menu, { items: optionEntries, size: "sm", align: "end", "aria-label": "More options", onSelect: value => optionItems.find(action => action.id === value)?.onSelect(), children: _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), "aria-label": "More options", title: "More options", "data-table-options": true }) })), actions] })] }), _jsxs("div", { className: "nx-table__frame", children: [selectedRows.length > 0 && (_jsx(SelectionBar, { count: selectedRows.length, actions: mass, rows: selectedRows, onClear: () => table.clearSelection(), controls: tableId })), _jsx("div", { className: "nx-table__progress", "aria-hidden": "true" }), _jsx("div", { ref: scrollRef, className: "nx-table__scroll", style: { 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) })] }));
+                                } })), optionEntries.length > 0 && (_jsx(Menu, { items: optionEntries, size: "sm", align: "end", "aria-label": "More options", onSelect: value => optionItems.find(action => action.id === value)?.onSelect(), children: _jsx(Button, { size: "sm", icon: _jsx(InlineIcon, { icon: iconDotsVertical }), "aria-label": "More options", title: "More options", "data-table-options": true }) })), actions] })] }), _jsxs("div", { className: "nx-table__frame", children: [selectedRows.length > 0 && (_jsx(SelectionBar, { count: selectedRows.length, actions: mass, rows: selectedRows, onClear: () => table.clearSelection(), controls: tableId })), _jsx("div", { className: "nx-table__progress", "aria-hidden": "true" }), _jsx("div", { ref: scrollRef, className: "nx-table__scroll", style: fill ? undefined : { maxHeight: cssLength(maxHeight) }, children: _jsxs("table", { ref: tableRef, id: tableId, className: "nx-table__table", "aria-label": props["aria-label"], "aria-labelledby": props["aria-labelledby"], "aria-busy": status === "loading" || refreshing || undefined, children: [sized && _jsx(TableColumnGroup, { columns: views, widths: state.widths, frame: frame, colRefs: colRefs }), _jsxs("thead", { ref: headRef, className: "nx-table__thead", children: [_jsxs("tr", { className: "nx-table__head", children: [frame.index && (_jsx(TableIndexCell, { heading: true, rowSpan: headRows, own: frame.index, number: "#", numbered: numbered, selectable: selectable, checkbox: selectable && (_jsx("label", { className: "nx-choice nx-choice--sm nx-table__check", children: _jsx("input", { ref: headerCheck, type: "checkbox", className: "nx-choice__control nx-choice__control--checkbox", checked: allOnPage, disabled: rows.length === 0 || status !== "ready", "aria-label": "Select every row on this page", onChange: event => {
+                                                                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 +489,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 +563,20 @@ 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 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 }) {
     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];

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

@@ -0,0 +1,28 @@
+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;
+    "aria-label"?: string;
+}
+/**
+ * The button that opens the Columns panel, and the panel itself: 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, "aria-label": ariaLabel, }: TableColumnsPanelProps<TRow>): import("react").JSX.Element;