@ciridae/ui 0.4.0 → 0.6.0

package/dist/components/ui/data-table-column-settings.d.ts

@@ -9,12 +9,15 @@ declare module "@tanstack/react-table" {
 /**
  * Choose which columns appear and in what order.
  *
- * Every change applies immediately, like the search box and the facet filters
- * beside it. A draft with its own Apply would be the one control in the toolbar
- * whose state is not already the table's -- and in a table whose view lives in
- * the URL, the draft would have nowhere to live until it was applied.
+ * A draft the reader commits rather than a live edit. Rearranging a table is
+ * several changes that only mean something together, and applying each one as
+ * it is made redraws the table under the hand still working on it. Cancel has
+ * to be able to mean "none of that", so nothing here touches the table until
+ * Apply.
  */
-declare function DataTableColumnSettings({ title }: {
-    title: string;
+declare function DataTableColumnSettings({ description, title, triggerLabel, }: {
+    description?: string;
+    title?: string;
+    triggerLabel?: string;
 }): React.JSX.Element | null;
 export { DataTableColumnSettings };

package/dist/components/ui/data-table-column-settings.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
 import { closestCenter, DndContext, KeyboardSensor, PointerSensor, useSensor, useSensors, } from "@dnd-kit/core";
 import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
@@ -7,50 +8,151 @@ import { cn } from "../../lib/utils";
 import { useDataTable } from "./data-table-context";
 import { Button } from "./button";
 import { Checkbox } from "./checkbox";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { Separator } from "./separator";
+import { Sheet, SheetBody, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, } from "./sheet";
 /**
  * Choose which columns appear and in what order.
  *
- * Every change applies immediately, like the search box and the facet filters
- * beside it. A draft with its own Apply would be the one control in the toolbar
- * whose state is not already the table's -- and in a table whose view lives in
- * the URL, the draft would have nowhere to live until it was applied.
+ * A draft the reader commits rather than a live edit. Rearranging a table is
+ * several changes that only mean something together, and applying each one as
+ * it is made redraws the table under the hand still working on it. Cancel has
+ * to be able to mean "none of that", so nothing here touches the table until
+ * Apply.
  */
-function DataTableColumnSettings({ title }) {
+function DataTableColumnSettings({ description = "Choose which columns appear and drag them into the order you prefer.", title = "Column settings", triggerLabel = "Settings", }) {
     const table = useDataTable();
-    // Already the order the grid draws, column order and grouping applied.
+    const [open, setOpen] = React.useState(false);
+    // `null` means "whatever the table is showing"; anything else is an edit in
+    // progress. Cleared on every open and close, so a cancelled edit cannot come
+    // back the next time the sheet is opened.
+    const [draft, setDraft] = React.useState(null);
     const columns = table.getAllLeafColumns();
-    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     // Reordering stands on its own, so a table where nothing may be hidden still
     // has something to offer here.
-    if (!columns.length)
+    if (columns.length === 0)
         return null;
+    const current = draft ?? readColumns(table);
+    return (_jsxs(Sheet, { onOpenChange: (next) => {
+            setDraft(null);
+            setOpen(next);
+        }, open: open, children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs(Button, { size: "sm", type: "button", variant: "ghost", children: [_jsx(SlidersHorizontalIcon, {}), _jsx("span", { children: triggerLabel })] }) }), _jsxs(SheetContent, { size: "md", children: [_jsxs(SheetHeader, { children: [_jsx(SheetTitle, { children: title }), _jsx(SheetDescription, { children: description })] }), _jsx(SheetBody, { className: "pb-(--panel-padding)", children: _jsx(ColumnDraftList, { columns: columns, draft: current, onDraftChange: setDraft }) }), _jsxs(SheetFooter, { children: [_jsx(Button, { className: "mr-auto", onClick: () => {
+                                    setDraft(readDefaultColumns(table));
+                                }, type: "button", variant: "ghost", children: "Reset" }), _jsx(Button, { onClick: () => {
+                                    setOpen(false);
+                                }, type: "button", variant: "outline", children: "Cancel" }), _jsx(Button, { onClick: () => {
+                                    applyColumns(table, current);
+                                    setOpen(false);
+                                }, type: "button", children: "Apply" })] })] })] }));
+}
+function ColumnDraftList({ columns, draft, onDraftChange, }) {
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+    const order = draft.order;
+    const byId = new Map(columns.map((column) => [column.id, column]));
     const reorder = (event) => {
         const { active, over } = event;
         if (!over || active.id === over.id)
             return;
-        const ids = columns.map((column) => column.id);
-        const from = ids.indexOf(String(active.id));
-        const to = ids.indexOf(String(over.id));
+        const from = order.indexOf(String(active.id));
+        const to = order.indexOf(String(over.id));
         if (from === -1 || to === -1)
             return;
-        table.setColumnOrder(arrayMove(ids, from, to));
+        onDraftChange({ ...draft, order: arrayMove(order, from, to) });
     };
-    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", children: [_jsx(SlidersHorizontalIcon, {}), _jsx("span", { children: title })] }) }), _jsxs(PopoverContent, { align: "end", className: "w-60 p-0", children: [_jsx("div", { className: "px-3 py-2 text-meta text-muted-foreground", children: title }), _jsx(Separator, {}), _jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: reorder, sensors: sensors, children: _jsx(SortableContext, { items: columns.map((column) => column.id), strategy: verticalListSortingStrategy, children: _jsx("ul", { className: "grid gap-0.5 p-1", children: columns.map((column) => (_jsx(ColumnSettingsRow, { column: column }, column.id))) }) }) }), _jsx(Separator, {}), _jsx("div", { className: "p-1", children: _jsx(Button, { className: "w-full justify-center", onClick: () => {
-                                table.resetColumnOrder();
-                                table.resetColumnVisibility();
-                            }, size: "sm", type: "button", variant: "ghost", children: "Reset" }) })] })] }));
+    return (_jsx(DndContext, { collisionDetection: closestCenter, onDragEnd: reorder, sensors: sensors, children: _jsx(SortableContext, { items: order, strategy: verticalListSortingStrategy, children: _jsx("ul", { className: "grid gap-0.5", children: order.map((id) => {
+                    const column = byId.get(id);
+                    if (column === undefined)
+                        return null;
+                    return (_jsx(ColumnSettingsRow, { column: column, hidden: draft.hidden.includes(id), onToggle: (visible) => {
+                            onDraftChange({
+                                hidden: visible
+                                    ? draft.hidden.filter((entry) => entry !== id)
+                                    : [...draft.hidden, id],
+                                order,
+                            });
+                        } }, id));
+                }) }) }) }));
 }
-function ColumnSettingsRow({ column }) {
+function ColumnSettingsRow({ column, hidden, onToggle, }) {
     const label = getColumnLabel(column);
     const { attributes, isDragging, listeners, setNodeRef, transform, transition } = useSortable({
         id: column.id,
     });
-    return (_jsxs("li", { className: cn("flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm", isDragging && "relative z-10 bg-accent"), ref: setNodeRef, style: { transform: CSS.Translate.toString(transform), transition }, children: [_jsx("button", { "aria-label": `Reorder ${label}`, className: "cursor-grab text-muted-foreground outline-none focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50", type: "button", ...attributes, ...listeners, children: _jsx(GripVerticalIcon, { className: "size-4" }) }), _jsx(Checkbox, { checked: column.getIsVisible(), disabled: !column.getCanHide(), id: `column-setting-${column.id}`, onCheckedChange: (checked) => {
-                    column.toggleVisibility(checked === true);
+    return (_jsxs("li", { className: cn("flex items-center gap-3 rounded-sm px-1 py-2 text-sm", isDragging && "relative z-10 bg-accent"), ref: setNodeRef, style: { transform: CSS.Translate.toString(transform), transition }, children: [_jsx("button", { "aria-label": `Reorder ${label}`, className: "cursor-grab text-muted-foreground outline-none focus-visible:ring-[var(--focus-ring-width)] focus-visible:ring-ring/50", type: "button", ...attributes, ...listeners, children: _jsx(GripVerticalIcon, { className: "size-4" }) }), _jsx(Checkbox, { checked: !hidden, disabled: !column.getCanHide(), id: `column-setting-${column.id}`, onCheckedChange: (checked) => {
+                    onToggle(checked === true);
                 } }), _jsx("label", { className: "min-w-0 flex-1 truncate", htmlFor: `column-setting-${column.id}`, children: label })] }));
 }
+/**
+ * What the table is showing now, in the shape the draft edits.
+ *
+ * Both fields are spelled out rather than left empty to mean "unchanged": the
+ * list has to draw an order either way, and an empty one would have to be
+ * filled in from somewhere -- from the current order, which would make Reset
+ * write back the very arrangement it was asked to undo.
+ */
+function readColumns(table) {
+    const columns = table.getAllLeafColumns();
+    return {
+        hidden: columns.filter((column) => !column.getIsVisible()).map((column) => column.id),
+        order: columns.map((column) => column.id),
+    };
+}
+/**
+ * What Reset goes back to: the caller's own defaults, which `TanStackDataTable`
+ * keeps in `initialState` for exactly this.
+ *
+ * Not "every column, as declared" -- a table given a `defaultColumnVisibility`
+ * starts with something hidden on purpose, and a Reset that revealed it would
+ * be showing a view the caller never offered.
+ *
+ * A `columnOrder` is a partial list in TanStack: it names the columns it cares
+ * about and everything else keeps its declared position after them. The draft
+ * cannot be partial, because the list draws exactly what the draft names -- so
+ * a default naming two of five columns would make the other three vanish from
+ * the sheet, unreorderable and unhideable, and Apply would then write that
+ * two-column order back. Reconciling against the live leaf ids keeps the
+ * caller's prefix and restores the rest behind it.
+ */
+function readDefaultColumns(table) {
+    const { columnOrder, columnVisibility } = table.initialState;
+    // Declared order, not drawn order: `getAllLeafColumns` has already had the
+    // current order applied to it, so resetting through it would return the
+    // arrangement Reset was asked to undo.
+    const declared = table
+        .getAllFlatColumns()
+        .filter((column) => column.columns.length === 0)
+        .map((column) => column.id);
+    const named = (columnOrder ?? []).filter((id) => declared.includes(id));
+    return {
+        hidden: Object.entries(columnVisibility ?? {})
+            .filter(([, visible]) => !visible)
+            .map(([id]) => id),
+        order: [...named, ...declared.filter((id) => !named.includes(id))],
+    };
+}
+/**
+ * Commit a draft to the table.
+ *
+ * Back to the defaults goes through the table's own reset rather than through
+ * an equivalent-looking explicit order. Writing the full list would leave a
+ * caller mirroring this into a URL with an order parameter saying "arranged"
+ * for a view that is not, and would pin today's columns so a later release
+ * appended its new one at the end rather than where it was declared.
+ */
+function applyColumns(table, draft) {
+    if (isDefaultColumns(draft, readDefaultColumns(table))) {
+        table.resetColumnOrder();
+        table.resetColumnVisibility();
+        return;
+    }
+    table.setColumnOrder(draft.order);
+    table.setColumnVisibility(Object.fromEntries(draft.hidden.map((id) => [id, false])));
+}
+/** Whether a draft is the default arrangement, in whatever order it names it. */
+function isDefaultColumns(draft, defaults) {
+    return (draft.order.length === defaults.order.length &&
+        draft.order.every((id, index) => defaults.order[index] === id) &&
+        draft.hidden.length === defaults.hidden.length &&
+        defaults.hidden.every((id) => draft.hidden.includes(id)));
+}
 /**
  * What to call a column in a list of columns.
  *

package/dist/components/ui/data-table-context.js

@@ -15,16 +15,40 @@ import * as React from "react";
  */
 const DataTableContext = React.createContext(null);
 function DataTableProvider({ children, table, }) {
-    // `.Provider` rather than the React 19 context-as-provider shorthand: this
-    // package's react peer is `>=18`, and every other context here does the same.
-    return _jsx(DataTableContext.Provider, { value: table, children: children });
+    // A fresh object every render, deliberately, and the one thing here that must
+    // not be memoised.
+    //
+    // A control like `DataTableFacetFilter` takes only static props -- a column
+    // id, a title, a list of options -- and reads everything that changes from
+    // this context. In an app compiled with React Compiler that makes its element
+    // cacheable: no reactive props, so the element is built once and React skips
+    // re-rendering it. Publishing the table object itself would close the other
+    // door too, because its identity never changes however much its state does,
+    // so context propagation would never fire either and the control would render
+    // once and then show the table as it was at mount forever.
+    //
+    // Wrapping restores propagation: the provider re-renders whenever the table's
+    // state changes, the value is new each time, and React re-renders every
+    // consumer regardless of what the compiler did to their elements.
+    //
+    // `state` is carried so a reader can see what the value is meant to track,
+    // and because TanStack rebuilds its state object each render where the table
+    // object is the same one forever.
+    //
+    // It is NOT a guard against this package one day being built with React
+    // Compiler. The compiler takes its dependencies from the sources of an
+    // expression, and the only source of `table.getState()` is `table` -- so it
+    // would cache the call on `[table]`, cache this literal on the result, and
+    // freeze the whole thing exactly as before. If that day comes, this
+    // component needs a real bailout, not another field.
+    return (_jsx(DataTableContext.Provider, { value: { state: table.getState(), table }, children: children }));
 }
 function useDataTable() {
-    const table = React.useContext(DataTableContext);
-    if (table === null) {
+    const context = React.useContext(DataTableContext);
+    if (context === null) {
         throw new Error("This control must be rendered inside a <TanStackDataTable />.");
     }
     // eslint-disable-next-line no-restricted-syntax -- restores the row type erased by the context above; the provider only ever stores a TanStackTable.
-    return table;
+    return context.table;
 }
 export { DataTableProvider, useDataTable };

package/dist/components/ui/data-table-grid.js

@@ -1,20 +1,34 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ArrowDownIcon, ArrowUpDownIcon, ArrowUpIcon } from "lucide-react";
+import { ArrowDownIcon, ArrowUpIcon, ChevronsUpDownIcon } from "lucide-react";
 import { flexRender, } from "@tanstack/react-table";
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table";
+/** Font taken from the enclosing `TableHead`; see `DataTableHeaderCell`. */
+const inheritType = { fontSize: "inherit", fontWeight: "inherit", lineHeight: "inherit" };
 function DataTableGrid({ empty, getRowClassName, onRowClick, rows, table, }) {
-    return (_jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((group) => (_jsx(TableRow, { children: group.headers.map((header) => (_jsx(TableHead, { style: { width: header.getSize() }, children: header.isPlaceholder ? null : _jsx(DataTableHeaderCell, { header: header }) }, header.id))) }, group.id))) }), _jsx(TableBody, { children: rows.length ? (rows.map((row) => (_jsx(DataTableDataRow, { getRowClassName: getRowClassName, onRowClick: onRowClick, row: row }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { className: "h-32 text-center text-sm text-muted-foreground", colSpan: table.getVisibleLeafColumns().length, children: empty }) })) })] }));
+    // One scroller, owned by `data-table-content` outside this: nesting an
+    // `overflow-x-auto` inside it would give the sticky header a scrollport that
+    // only ever scrolls sideways, so the header would ride away with the rows.
+    return (_jsxs(Table, { scrollable: false, children: [_jsx(TableHeader, { className: "sticky top-0 z-10 bg-background", children: table.getHeaderGroups().map((group) => (_jsx(TableRow, { children: group.headers.map((header) => (_jsx(TableHead, { style: { width: header.getSize() }, children: header.isPlaceholder ? null : _jsx(DataTableHeaderCell, { header: header }) }, header.id))) }, group.id))) }), _jsx(TableBody, { children: rows.length ? (rows.map((row) => (_jsx(DataTableDataRow, { getRowClassName: getRowClassName, onRowClick: onRowClick, row: row }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { className: "h-32 text-center text-sm text-muted-foreground", colSpan: table.getVisibleLeafColumns().length, children: empty }) })) })] }));
 }
 function DataTableDataRow({ getRowClassName, onRowClick, row, }) {
     return (_jsx(TableRow, { className: cn(onRowClick && "cursor-pointer", getRowClassName?.(row)), "data-state": row.getIsSelected() ? "selected" : undefined, onClick: onRowClick ? () => onRowClick(row) : undefined, children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }));
 }
 function DataTableHeaderCell({ header }) {
     const sorted = header.column.getIsSorted();
-    const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ArrowUpDownIcon;
+    // Paired chevrons while unsorted, a single arrow once sorted: the pair reads
+    // as "this can go either way", the arrow as "it went this way".
+    const Icon = sorted === "asc" ? ArrowUpIcon : sorted === "desc" ? ArrowDownIcon : ChevronsUpDownIcon;
     if (!header.column.getCanSort())
         return flexRender(header.column.columnDef.header, header.getContext());
-    return (_jsxs(Button, { "aria-pressed": Boolean(sorted), className: "text-meta -ml-2 h-auto px-2 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
+    return (_jsxs(Button, { "aria-pressed": Boolean(sorted), className: "-ml-2 h-auto px-2 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", 
+        // Type taken from the `<th>` this sits in, whatever that turns out to be,
+        // so a caller restyling its headers moves the sortable ones with them.
+        // Inline because Tailwind has no font-size or font-weight `inherit`
+        // utility, and an arbitrary-value one would be a second utility in the
+        // same group as the Button recipe's own -- decided by stylesheet order
+        // rather than by this file.
+        style: inheritType, onClick: header.column.getToggleSortingHandler(), size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: flexRender(header.column.columnDef.header, header.getContext()) }), _jsx(Icon, {})] }));
 }
 export { DataTableGrid };

package/dist/components/ui/data-table-pagination.d.ts

@@ -1,6 +1,12 @@
 import type { Table as TanStackTable } from "@tanstack/react-table";
 import type { DataTablePaginationVariant, ResolvedDataTableLabels } from "./data-table-tanstack";
-declare function DataTablePagination<TData>({ labels, pageSizeOptions, selectedRows, table, totalRows, variant, }: {
+declare function DataTablePagination<TData>({ footerControls, labels, pageSizeOptions, selectedRows, table, totalRows, variant, }: {
+    /**
+     * Controls that belong beside the row count rather than above the table --
+     * column settings, an export. Whatever governs the whole result set reads
+     * better next to the number saying how big it is.
+     */
+    footerControls?: React.ReactNode;
     labels: ResolvedDataTableLabels;
     pageSizeOptions: number[];
     selectedRows: number;

package/dist/components/ui/data-table-pagination.js

@@ -3,16 +3,20 @@ import { ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon,
 import { Button } from "./button";
 import { NativeSelect, NativeSelectOption } from "./native-select";
 import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem } from "./pagination";
-function DataTablePagination({ labels, pageSizeOptions, selectedRows, table, totalRows, variant = "compact", }) {
+function DataTablePagination({ footerControls, labels, pageSizeOptions, selectedRows, table, totalRows, variant = "compact", }) {
     const pagination = table.getState().pagination;
-    const pageCount = Math.max(table.getPageCount(), 1);
+    // `-1` is TanStack's "unknown", which a server-driven table reports until it
+    // is told a total. Clamping is right for the labels -- a reader is on page 1
+    // of at least 1 -- but a control that jumps to the end needs the difference.
+    const totalPages = table.getPageCount();
+    const pageCount = Math.max(totalPages, 1);
     const page = Math.min(pagination.pageIndex + 1, pageCount);
     const rowsShown = table.getRowModel().rows.length;
-    return (_jsxs("div", { "data-slot": "data-table-pagination", className: "flex flex-col gap-2 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between", children: [_jsx("div", { className: "min-w-0", children: selectedRows > 0
-                    ? (labels.rowsSelected?.(selectedRows, totalRows) ??
-                        `${selectedRows} of ${totalRows} row(s) selected.`)
-                    : (labels.rowsShown?.(rowsShown, totalRows) ??
-                        `${rowsShown} of ${totalRows} row(s) shown.`) }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(NativeSelect, { "aria-label": "Rows per page", onChange: (event) => table.setPageSize(Number(event.target.value)), size: "sm", value: pagination.pageSize, children: pageSizeOptions.map((pageSize) => (_jsxs(NativeSelectOption, { value: pageSize, children: [pageSize, " rows"] }, pageSize))) }), variant === "numbered" ? (_jsx(DataTablePager, { page: page, pageCount: pageCount, table: table })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-20 text-center tabular-nums", children: labels.page?.(page, pageCount) ?? `Page ${page} of ${pageCount}` }), _jsx(DataTablePaginationButtons, { labels: labels, table: table })] }))] })] }));
+    return (_jsxs("div", { "data-slot": "data-table-pagination", className: "flex flex-col gap-2 text-sm text-muted-foreground sm:flex-row sm:items-center sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { className: "min-w-0 truncate", children: selectedRows > 0
+                            ? (labels.rowsSelected?.(selectedRows, totalRows) ??
+                                `${selectedRows} of ${totalRows} row(s) selected.`)
+                            : (labels.rowsShown?.(rowsShown, totalRows) ??
+                                `${rowsShown} of ${totalRows} row(s) shown.`) }), footerControls] }), _jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [_jsx("span", { className: "shrink-0", children: labels.rowsPerPage }), _jsx(NativeSelect, { "aria-label": labels.rowsPerPageName, className: "min-w-20 shrink-0", onChange: (event) => table.setPageSize(Number(event.target.value)), size: "sm", value: pagination.pageSize, children: pageSizeOptions.map((pageSize) => (_jsx(NativeSelectOption, { value: pageSize, children: pageSize }, pageSize))) }), variant === "numbered" ? (_jsx(DataTablePager, { labels: labels, page: page, pageCount: pageCount, pageCountKnown: totalPages >= 0, table: table })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-20 text-center tabular-nums", children: labels.page?.(page, pageCount) ?? `Page ${page} of ${pageCount}` }), _jsx(DataTablePaginationButtons, { labels: labels, pageCountKnown: totalPages >= 0, table: table })] }))] })] }));
 }
 /**
  * Pages as a numbered row rather than a step counter.
@@ -22,14 +26,33 @@ function DataTablePagination({ labels, pageSizeOptions, selectedRows, table, tot
  * uses, so an out-of-range index highlights nothing rather than inventing a
  * page that is not there.
  */
-function DataTablePager({ page, pageCount, table, }) {
-    return (_jsx(Pagination, { className: "mx-0 w-auto justify-end", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(Button, { "aria-label": "Previous page", disabled: !table.getCanPreviousPage(), onClick: () => {
-                            table.previousPage();
-                        }, size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronLeftIcon, {}) }) }), getPagerSteps(page, pageCount).map((step, index) => (_jsx(PaginationItem, { children: step === "gap" ? (_jsx(PaginationEllipsis, { className: "size-8" })) : (_jsx(Button, { "aria-current": step === page ? "page" : undefined, "aria-label": `Page ${String(step)}`, className: "tabular-nums", onClick: () => {
-                            table.setPageIndex(step - 1);
-                        }, size: "icon-sm", type: "button", variant: step === page ? "outline" : "ghost", children: step })) }, step === "gap" ? `gap-${String(index)}` : step))), _jsx(PaginationItem, { children: _jsx(Button, { "aria-label": "Next page", disabled: !table.getCanNextPage(), onClick: () => {
-                            table.nextPage();
-                        }, size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronRightIcon, {}) }) })] }) }));
+function DataTablePager({ labels, page, pageCount, pageCountKnown, table, }) {
+    const back = !table.getCanPreviousPage();
+    const forward = !table.getCanNextPage();
+    return (_jsx(Pagination, { className: "mx-0 w-auto justify-end", children: _jsxs(PaginationContent, { children: [_jsx(PagerStepButton, { disabled: back, icon: ChevronsLeftIcon, label: labels.firstPage, onClick: () => {
+                        table.firstPage();
+                    } }), _jsx(PagerStepButton, { disabled: back, icon: ChevronLeftIcon, label: labels.previousPage, onClick: () => {
+                        table.previousPage();
+                    } }), _jsx(PagerNumbers, { page: page, pageCount: pageCount, table: table }), _jsx(PagerStepButton, { disabled: forward, icon: ChevronRightIcon, label: labels.nextPage, onClick: () => {
+                        table.nextPage();
+                    } }), pageCountKnown ? (_jsx(PagerStepButton, { disabled: forward, icon: ChevronsRightIcon, label: labels.lastPage, onClick: () => {
+                        table.lastPage();
+                    } })) : null] }) }));
+}
+/** The numbers themselves, with an ellipsis wherever the row elides a run. */
+function PagerNumbers({ page, pageCount, table, }) {
+    return (_jsx(_Fragment, { children: getPagerSteps(page, pageCount).map((step, index) => (_jsx(PaginationItem, { children: step === "gap" ? (_jsx(PaginationEllipsis, { className: "size-8" })) : (_jsx(Button, { "aria-current": step === page ? "page" : undefined, "aria-label": `Page ${String(step)}`, className: "tabular-nums", onClick: () => {
+                    table.setPageIndex(step - 1);
+                }, size: "icon-sm", type: "button", variant: step === page ? "outline" : "ghost", children: step })) }, step === "gap" ? `gap-${String(index)}` : step))) }));
+}
+/**
+ * One of the four steps either side of the numbers, which differ only in these.
+ *
+ * Ghost rather than outlined: a row of six bordered boxes reads as six equal
+ * things, and the only one worth pointing at is the page you are on.
+ */
+function PagerStepButton({ disabled, icon: Icon, label, onClick, }) {
+    return (_jsx(PaginationItem, { children: _jsx(Button, { "aria-label": label, disabled: disabled, onClick: onClick, size: "icon-sm", type: "button", variant: "ghost", children: _jsx(Icon, {}) }) }));
 }
 /**
  * The page numbers to draw: always the first and last, always the current and
@@ -60,7 +83,7 @@ function getPagerSteps(page, pageCount) {
 function countUp(from, to) {
     return Array.from({ length: to - from + 1 }, (_, index) => from + index);
 }
-function DataTablePaginationButtons({ labels, table, }) {
-    return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { "aria-label": "First page", disabled: !table.getCanPreviousPage(), onClick: () => table.firstPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronsLeftIcon, {}) }), _jsx(Button, { "aria-label": labels.previousPage, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronLeftIcon, {}) }), _jsx(Button, { "aria-label": labels.nextPage, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronRightIcon, {}) }), _jsx(Button, { "aria-label": "Last page", disabled: !table.getCanNextPage(), onClick: () => table.lastPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronsRightIcon, {}) })] }));
+function DataTablePaginationButtons({ labels, pageCountKnown, table, }) {
+    return (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { "aria-label": labels.firstPage, disabled: !table.getCanPreviousPage(), onClick: () => table.firstPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronsLeftIcon, {}) }), _jsx(Button, { "aria-label": labels.previousPage, disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronLeftIcon, {}) }), _jsx(Button, { "aria-label": labels.nextPage, disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronRightIcon, {}) }), pageCountKnown ? (_jsx(Button, { "aria-label": labels.lastPage, disabled: !table.getCanNextPage(), onClick: () => table.lastPage(), size: "icon-sm", type: "button", variant: "outline", children: _jsx(ChevronsRightIcon, {}) })) : null] }));
 }
 export { DataTablePagination };

package/dist/components/ui/data-table-tanstack.d.ts

@@ -13,9 +13,19 @@ type DataTableLabels = {
     columns?: string;
     empty?: React.ReactNode;
     filterPlaceholder?: string;
+    firstPage?: string;
+    lastPage?: string;
     nextPage?: string;
     page?: (page: number, pageCount: number) => string;
     previousPage?: string;
+    /** Sits before the page-size control, which reads "Show 25" rather than "25 rows". */
+    rowsPerPage?: string;
+    /**
+     * The page-size control's accessible name. Separate from `rowsPerPage`
+     * because that one is terse by design: "Show" beside a number says enough
+     * with the footer in view and nothing at all read out on its own.
+     */
+    rowsPerPageName?: string;
     rowsSelected?: (selected: number, total: number) => string;
     rowsShown?: (shown: number, total: number) => string;
 };
@@ -45,6 +55,15 @@ type TanStackDataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps
     enableSorting?: boolean;
     filterMode?: DataTableFilterMode;
     filterPlaceholder?: string;
+    /**
+     * Controls for the footer, beside the row count. Whatever governs the whole
+     * result set -- column settings, an export -- reads better next to the number
+     * saying how big it is than stacked above the table with the filters.
+     *
+     * The footer is the pagination row, so `enablePagination={false}` removes
+     * these along with it; put them in `actions` for a table that does not page.
+     */
+    footerControls?: React.ReactNode;
     getRowClassName?: (row: Row<TData>) => string | undefined;
     getRowId?: TableOptions<TData>["getRowId"];
     labels?: DataTableLabels;
@@ -56,6 +75,12 @@ type TanStackDataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps
     onColumnOrderChange?: OnChangeFn<ColumnOrderState>;
     onColumnVisibilityChange?: OnChangeFn<VisibilityState>;
     onGlobalFilterChange?: OnChangeFn<string>;
+    /**
+     * Called instead of `onPaginationChange` when `clampPageIndex` moves a page
+     * index that pointed past the end, so a caller storing the page can replace
+     * the address that was wrong rather than pushing the correction on top of it.
+     */
+    onPageIndexCorrected?: (pageIndex: number) => void;
     onPaginationChange?: OnChangeFn<PaginationState>;
     onRowClick?: (row: Row<TData>) => void;
     onRowSelectionChange?: OnChangeFn<RowSelectionState>;
@@ -68,7 +93,7 @@ type TanStackDataTableProps<TData, TValue = unknown> = Omit<React.ComponentProps
     tableOptions?: Partial<TableOptions<TData>>;
     toolbar?: React.ReactNode;
 };
-type ResolvedDataTableLabels = Required<Pick<DataTableLabels, "columns" | "filterPlaceholder" | "nextPage" | "previousPage">> & DataTableLabels;
+type ResolvedDataTableLabels = Required<Pick<DataTableLabels, "columns" | "filterPlaceholder" | "firstPage" | "lastPage" | "nextPage" | "previousPage" | "rowsPerPage" | "rowsPerPageName">> & DataTableLabels;
 declare function TanStackDataTable<TData, TValue = unknown>(props: TanStackDataTableProps<TData, TValue>): React.JSX.Element;
 export { TanStackDataTable };
 export type { DataTableFilterMode, DataTableLabels, DataTablePaginationVariant, DataTableState, ResolvedDataTableLabels, TanStackDataTableProps, };

package/dist/components/ui/data-table-tanstack.js

@@ -11,12 +11,16 @@ const defaultLabels = {
     columns: "Columns",
     empty: "No results.",
     filterPlaceholder: "Filter rows...",
+    firstPage: "First page",
+    lastPage: "Last page",
     nextPage: "Next page",
     previousPage: "Previous page",
+    rowsPerPage: "Show",
+    rowsPerPageName: "Rows per page",
 };
 function TanStackDataTable(props) {
     const table = useDataTableInstance(props);
-    useClampedPageIndex(table, props.clampPageIndex, props.loading);
+    useClampedPageIndex(table, props.clampPageIndex, props.loading, props.onPageIndexCorrected);
     const labels = { ...defaultLabels, ...props.labels };
     const rows = table.getRowModel().rows;
     const pagination = table.getState().pagination;
@@ -25,7 +29,7 @@ function TanStackDataTable(props) {
         props.actions ||
         props.filterMode !== false ||
         props.enableColumnVisibility !== false);
-    return (_jsx(DataTableProvider, { table: table, children: _jsxs("div", { "data-slot": "data-table", className: cn("grid gap-(--panel-gap)", props.className), children: [hasToolbar ? _jsx(DataTableTools, { labels: labels, props: props, table: table }) : null, _jsx("div", { "data-slot": "data-table-content", className: "overflow-hidden border-t border-border", children: props.loading ? (_jsx(TableSkeleton, { className: "rounded-none border-x-0 border-b-0", columns: table.getVisibleLeafColumns().length, rows: pagination.pageSize })) : (_jsx(DataTableGrid, { empty: props.empty ?? labels.empty, getRowClassName: props.getRowClassName, onRowClick: props.onRowClick, rows: rows, table: table })) }), props.enablePagination !== false ? (_jsx(DataTablePagination, { labels: labels, pageSizeOptions: props.pageSizeOptions ?? [10, 25, 50, 100], selectedRows: table.getFilteredSelectedRowModel().rows.length, table: table, totalRows: totalRows, variant: props.paginationVariant })) : null] }) }));
+    return (_jsx(DataTableProvider, { table: table, children: _jsxs("div", { "data-slot": "data-table", className: cn("flex flex-col gap-(--panel-gap)", props.className), children: [hasToolbar ? _jsx(DataTableTools, { labels: labels, props: props, table: table }) : null, _jsx("div", { "data-slot": "data-table-content", className: "min-h-0 flex-1 overflow-auto border-t border-border", children: props.loading ? (_jsx(TableSkeleton, { className: "rounded-none border-x-0 border-b-0", columns: table.getVisibleLeafColumns().length, rows: pagination.pageSize })) : (_jsx(DataTableGrid, { empty: props.empty ?? labels.empty, getRowClassName: props.getRowClassName, onRowClick: props.onRowClick, rows: rows, table: table })) }), props.enablePagination !== false ? (_jsx(DataTablePagination, { footerControls: props.footerControls, labels: labels, pageSizeOptions: props.pageSizeOptions ?? [10, 25, 50, 100], selectedRows: table.getFilteredSelectedRowModel().rows.length, table: table, totalRows: totalRows, variant: props.paginationVariant })) : null] }) }));
 }
 /**
  * Move a page index that points past the last page back onto a page that
@@ -42,13 +46,27 @@ function TanStackDataTable(props) {
  * caller's handler, which for a caller that navigates on pagination is a
  * navigation -- not something to start doing to an existing table uninvited,
  * or to do at all while an empty result still means "not yet".
+ *
+ * `onPageIndexCorrected` exists so that handler can tell a correction from a
+ * page turn. A caller writing the page into the URL wants a turn to be a place
+ * to come back to and a correction to replace the address that was wrong --
+ * and without this they arrive as the same call.
  */
-function useClampedPageIndex(table, enabled, loading) {
+function useClampedPageIndex(table, enabled, loading, onCorrected) {
     const { pageIndex } = table.getState().pagination;
     const lastPageIndex = Math.max(table.getPageCount() - 1, 0);
     const outOfRange = enabled === true && loading !== true && pageIndex > lastPageIndex;
+    const correctedRef = React.useRef(onCorrected);
+    React.useEffect(() => {
+        correctedRef.current = onCorrected;
+    }, [onCorrected]);
     React.useEffect(() => {
-        if (outOfRange)
+        if (!outOfRange)
+            return;
+        const corrected = correctedRef.current;
+        if (corrected)
+            corrected(lastPageIndex);
+        else
             table.setPageIndex(lastPageIndex);
     }, [lastPageIndex, outOfRange, table]);
 }

package/dist/components/ui/data-table.js

@@ -20,8 +20,16 @@ function DataTableEmpty({ className, ...props }) {
 function DataTableSkeleton({ className, ...props }) {
     return (_jsx(DataTableContent, { className: "border-t-0", children: _jsx(TableSkeleton, { className: cn("rounded-none border-x-0 border-b-0", className), ...props }) }));
 }
+/** Font taken from the enclosing `TableHead`; see `SortableTableHead`. */
+const inheritType = { fontSize: "inherit", fontWeight: "inherit", lineHeight: "inherit" };
 function SortableTableHead({ active = false, children, className, direction = "asc", onSort, align = "left", ...props }) {
     const Icon = active ? (direction === "asc" ? ArrowUpIcon : ArrowDownIcon) : ArrowUpDownIcon;
-    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("text-meta h-auto px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
+    return (_jsx(TableHead, { "aria-sort": active ? (direction === "asc" ? "ascending" : "descending") : "none", className: cn(align === "right" && "text-right", className), ...props, children: _jsxs(Button, { "aria-pressed": active, className: cn("h-auto px-0 py-0 text-muted-foreground hover:bg-transparent hover:text-foreground", align === "right" ? "ml-auto justify-end" : "justify-start"), onClick: onSort, size: "sm", 
+            // Type taken from the `<th>`, including a `className` the caller put
+            // there, so a restyled header row stays one typeface. Inline rather
+            // than a utility: Tailwind has no font-size or font-weight `inherit`,
+            // and an arbitrary-value one would compete with the Button recipe's
+            // own on stylesheet order.
+            style: inheritType, type: "button", variant: "ghost", children: [_jsx("span", { children: children }), _jsx(Icon, {})] }) }));
 }
 export { DataTable, DataTableToolbar, DataTableContent, DataTableEmpty, DataTableSkeleton, TanStackDataTable, SortableTableHead, };

package/dist/components/ui/sidebar/layout.js

@@ -53,7 +53,12 @@ function SidebarGap({ variant }) {
             : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }));
 }
 function SidebarInset({ className, ...props }) {
-    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn("relative flex w-full flex-1 flex-col bg-background", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow-xs md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
+    return (_jsx("main", { "data-slot": "sidebar-inset", className: cn(
+        // `min-w-0` because this is a flex item beside the sidebar, and a flex
+        // item will not shrink below its content: without it a page holding
+        // anything wide -- a table with sized columns -- pushes the whole app
+        // sideways instead of scrolling inside its own box.
+        "relative flex w-full min-w-0 flex-1 flex-col bg-background", "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-lg md:peer-data-[variant=inset]:shadow-xs md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className), ...props }));
 }
 function SidebarInput({ className, ...props }) {
     return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props }));

package/dist/components/ui/table.d.ts

@@ -1,5 +1,16 @@
 import * as React from "react";
-declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+declare function Table({ className, scrollable, ...props }: React.ComponentProps<"table"> & {
+    /**
+     * Whether the wrapper scrolls a too-wide table sideways. A caller that
+     * already scrolls the table from outside passes `false`: an `overflow` of
+     * anything but `visible` makes this wrapper a scrollport on *both* axes, so
+     * leaving it on would anchor a sticky header here rather than to the box
+     * that actually scrolls. Two overflow utilities cannot settle this between
+     * them -- `cn` does not dedupe them, and the axis-specific one wins -- so it
+     * is a switch rather than a class.
+     */
+    scrollable?: boolean;
+}): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
 declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;

package/dist/components/ui/table.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils";
-function Table({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+function Table({ className, scrollable = true, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: cn("relative w-full", scrollable && "overflow-x-auto"), children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
     return _jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props });
@@ -17,7 +17,13 @@ function TableRow({ className, ...props }) {
     return (_jsx("tr", { "data-slot": "table-row", className: cn("h-(--table-row-height) border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
 }
 function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn("h-(--table-row-height) px-(--table-cell-padding-x) py-(--table-cell-padding-y) text-left align-middle text-xs font-medium tracking-normal whitespace-nowrap text-table-header-foreground normal-case [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn(
+        // A step down from the rows and a step up in weight, so the header
+        // reads as the label of the column rather than as its first entry.
+        // It lives here rather than on the sort button so that a table mixing
+        // sortable and plain columns draws one header row, not two typefaces
+        // side by side -- the sort buttons restate this pair to match.
+        "h-(--table-row-height) px-(--table-cell-padding-x) py-(--table-cell-padding-y) text-left align-middle text-xs font-medium tracking-normal whitespace-nowrap text-table-header-foreground normal-case [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
 }
 function TableCell({ className, ...props }) {
     return (_jsx("td", { "data-slot": "table-cell", className: cn("px-(--table-cell-padding-x) py-(--table-cell-padding-y) align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ciridae/ui",
-	"version": "0.4.0",
+	"version": "0.6.0",
 	"type": "module",
 	"private": false,
 	"repository": {