@tulipfarm/sprout 0.0.0-stage → 0.2.0

package/dist/components/table.js

@@ -0,0 +1,663 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState, } from "react";
+import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, arrayMove, horizontalListSortingStrategy, sortableKeyboardCoordinates, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { aggregationFn_count, aggregationFn_max, aggregationFn_mean, aggregationFn_min, aggregationFn_sum, columnFilteringFeature, columnGroupingFeature, columnOrderingFeature, columnPinningFeature, columnResizingFeature, columnSizingFeature, columnVisibilityFeature, constructFilterFn, createExpandedRowModel, createFilteredRowModel, createGroupedRowModel, createPaginatedRowModel, createSortedRowModel, filterFn_equals, filterFn_inDateRange, filterFn_inNumberRange, filterFn_includesString, functionalUpdate, globalFilteringFeature, rowAggregationFeature, rowExpandingFeature, rowPaginationFeature, rowSelectionFeature, rowSortingFeature, sortFn_alphanumeric, sortFn_basic, sortFn_datetime, sortFn_text, tableFeatures, useTable, } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDown } from "reicon-react/icons/ArrowDown";
+import { ArrowUp } from "reicon-react/icons/ArrowUp";
+import { ChevronDown } from "reicon-react/icons/ChevronDown";
+import { ChevronRight } from "reicon-react/icons/ChevronRight";
+import { InfoCircle } from "reicon-react/icons/InfoCircle";
+import { Plus } from "reicon-react/icons/Plus";
+import { Reorder } from "reicon-react/icons/Reorder";
+import { SortV } from "reicon-react/icons/SortV";
+import { X } from "reicon-react/icons/X";
+import { cn } from "../internal/classes.js";
+import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "./dropdown-menu.js";
+import { Input } from "./input.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { ScrollArea } from "./scroll-area.js";
+import { SearchField } from "./search-field.js";
+import { Skeleton } from "./skeleton.js";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip.js";
+export const tableVariantNames = ["plain", "grid"];
+export const tableNarrowNames = ["scroll", "stack"];
+export const tableAlignNames = ["left", "right"];
+export const tableFilterNames = [
+    "text",
+    "number",
+    "select",
+    "date",
+    "boolean",
+];
+export const tableEditNames = [
+    "text",
+    "number",
+    "select",
+    "date",
+    "checkbox",
+];
+export const tableAggregateNames = [
+    "sum",
+    "count",
+    "min",
+    "max",
+    "mean",
+];
+export const tableLayoutKeys = [
+    "columnSizing",
+    "columnOrder",
+    "columnPinning",
+    "columnVisibility",
+];
+// dnd-kit's live region is a div; inside <table> it breaks the table roles.
+const dndAccessibility = {
+    container: typeof document === "undefined" ? undefined : document.body,
+};
+const isAnyOf = constructFilterFn({
+    filter: (dataValue, filterValue) => filterValue.includes(String(dataValue)),
+    autoRemove: (value) => !value?.length,
+});
+const features = tableFeatures({
+    columnFilteringFeature,
+    globalFilteringFeature,
+    rowSortingFeature,
+    columnGroupingFeature,
+    rowAggregationFeature,
+    rowExpandingFeature,
+    rowPaginationFeature,
+    rowSelectionFeature,
+    columnVisibilityFeature,
+    columnOrderingFeature,
+    columnPinningFeature,
+    columnSizingFeature,
+    columnResizingFeature,
+    filteredRowModel: createFilteredRowModel(),
+    sortedRowModel: createSortedRowModel(),
+    groupedRowModel: createGroupedRowModel(),
+    expandedRowModel: createExpandedRowModel(),
+    paginatedRowModel: createPaginatedRowModel(),
+    filterFns: {
+        includesString: filterFn_includesString,
+        inNumberRange: filterFn_inNumberRange,
+        inDateRange: filterFn_inDateRange,
+        equals: filterFn_equals,
+        isAnyOf,
+    },
+    sortFns: {
+        alphanumeric: sortFn_alphanumeric,
+        text: sortFn_text,
+        datetime: sortFn_datetime,
+        basic: sortFn_basic,
+    },
+    aggregationFns: {
+        sum: aggregationFn_sum,
+        count: aggregationFn_count,
+        min: aggregationFn_min,
+        max: aggregationFn_max,
+        mean: aggregationFn_mean,
+    },
+});
+const filterFnFor = {
+    text: "includesString",
+    number: "inNumberRange",
+    select: "isAnyOf",
+    date: "inDateRange",
+    boolean: "equals",
+};
+const DEFAULT_PAGE_SIZE = 10;
+const pageResetKeys = new Set([
+    "sorting",
+    "columnFilters",
+    "globalFilter",
+    "grouping",
+]);
+function initialState(columns, pageSize) {
+    return {
+        sorting: [],
+        columnFilters: [],
+        globalFilter: "",
+        grouping: [],
+        expanded: true,
+        pagination: { pageIndex: 0, pageSize: pageSize ?? DEFAULT_PAGE_SIZE },
+        columnSizing: {},
+        columnOrder: [],
+        columnPinning: {
+            start: columns.filter((c) => c.pin === "left").map((c) => c.key),
+            end: columns.filter((c) => c.pin === "right").map((c) => c.key),
+        },
+        columnVisibility: Object.fromEntries(columns.filter((c) => c.hidden).map((c) => [c.key, false])),
+    };
+}
+const storageKey = (key) => `sprout-table:${key}`;
+function readLayout(key) {
+    try {
+        const raw = localStorage.getItem(storageKey(key));
+        return raw ? JSON.parse(raw) : {};
+    }
+    catch {
+        return {};
+    }
+}
+function writeLayout(key, state) {
+    try {
+        localStorage.setItem(storageKey(key), JSON.stringify(Object.fromEntries(tableLayoutKeys.map((k) => [k, state[k]]))));
+    }
+    catch {
+        // Storage can be full or blocked; the Layout then lasts for this visit only.
+    }
+}
+/**
+ * A data table. Pass rows and column settings; it renders the header, body,
+ * Toolbar, and footer, and runs sorting, filtering, grouping, selection,
+ * paging, Row edit, and Layout changes for you.
+ */
+export function Table(props) {
+    const { data, columns, getRowId, rowLabel = getRowId, variant = "plain", narrow = "scroll", caption, manual = false, rowCount, onStateChange, persistKey, searchable = false, columnMenu = false, resizable = false, reorderable = false, selectable = false, onSelectionChange, pageSize, virtual = false, onRowReorder, getSubRows, onRowSave, getRowHref, onRowClick, onRowDrop, actions, loading = false, empty, className, } = props;
+    const label = props["aria-label"];
+    const [inner, setInner] = useState(() => initialState(columns, pageSize));
+    const state = { ...inner, ...props.state };
+    const stateRef = useRef(state);
+    stateRef.current = state;
+    const [rowSelection, setRowSelection] = useState({});
+    const [editing, setEditing] = useState(null);
+    const [dropTarget, setDropTarget] = useState(null);
+    const [pinOffsets, setPinOffsets] = useState({});
+    const headRowRef = useRef(null);
+    const anchorRef = useRef(null);
+    useEffect(() => {
+        if (!persistKey)
+            return;
+        const saved = readLayout(persistKey);
+        if (Object.keys(saved).length)
+            setInner((prev) => ({ ...prev, ...saved }));
+    }, [persistKey]);
+    const setSlice = (key) => (updater) => {
+        const next = {
+            ...stateRef.current,
+            [key]: functionalUpdate(updater, stateRef.current[key]),
+        };
+        if (pageResetKeys.has(key) && next.pagination.pageIndex !== 0) {
+            next.pagination = { ...next.pagination, pageIndex: 0 };
+        }
+        stateRef.current = next;
+        setInner(next);
+        if (persistKey && tableLayoutKeys.includes(key)) {
+            writeLayout(persistKey, next);
+        }
+        onStateChange?.(next);
+    };
+    const byKey = useMemo(() => new Map(columns.map((c) => [c.key, c])), [columns]);
+    const columnDefs = useMemo(() => columns.map((c) => ({
+        id: c.key,
+        accessorFn: (row) => row[c.key],
+        header: c.header,
+        enableSorting: c.sort ?? false,
+        sortDescFirst: false,
+        enableColumnFilter: !!c.filter,
+        enableGrouping: c.group ?? false,
+        ...(c.filter ? { filterFn: filterFnFor[c.filter] } : {}),
+        ...(c.aggregate ? { aggregationFn: c.aggregate } : {}),
+        ...(c.width ? { size: c.width } : {}),
+    })), [columns]);
+    const table = useTable({
+        features,
+        columns: columnDefs,
+        data,
+        getRowId,
+        ...(getSubRows ? { getSubRows } : {}),
+        state: { ...state, rowSelection },
+        onSortingChange: setSlice("sorting"),
+        onColumnFiltersChange: setSlice("columnFilters"),
+        onGlobalFilterChange: setSlice("globalFilter"),
+        onGroupingChange: setSlice("grouping"),
+        onExpandedChange: setSlice("expanded"),
+        onPaginationChange: setSlice("pagination"),
+        onColumnSizingChange: setSlice("columnSizing"),
+        onColumnOrderChange: setSlice("columnOrder"),
+        onColumnPinningChange: setSlice("columnPinning"),
+        onColumnVisibilityChange: setSlice("columnVisibility"),
+        onRowSelectionChange: (updater) => {
+            const next = functionalUpdate(updater, rowSelection);
+            setRowSelection(next);
+            onSelectionChange?.(Object.keys(next).filter((id) => next[id]));
+        },
+        globalFilterFn: "includesString",
+        groupedColumnMode: "remove",
+        // The reset would use TanStack's empty default, closing every group on each search.
+        autoResetExpanded: false,
+        // TanStack resets on every new state array (inline or URL state) and never in manual mode; setSlice resets instead.
+        autoResetPageIndex: false,
+        columnResizeMode: "onChange",
+        enableMultiSort: true,
+        manualSorting: manual,
+        manualFiltering: manual,
+        manualPagination: manual || !pageSize,
+        ...(rowCount !== undefined ? { rowCount } : {}),
+    });
+    const rows = table.getRowModel().rows;
+    // getVisibleLeafColumns keeps the column order but ignores pinning; the header follows pinning.
+    const leafColumns = [
+        ...table.getStartVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getEndVisibleLeafColumns(),
+    ];
+    const editable = !!onRowSave && columns.some((c) => c.edit);
+    const hasActions = !!actions || editable;
+    const draggableRows = !!onRowReorder &&
+        state.sorting.length === 0 &&
+        state.grouping.length === 0 &&
+        state.columnFilters.length === 0 &&
+        !state.globalFilter;
+    const totals = columns.some((c) => c.aggregate) && !loading && rows.length > 0;
+    const colSpan = leafColumns.length +
+        (selectable ? 1 : 0) +
+        (onRowReorder ? 1 : 0) +
+        (hasActions ? 1 : 0);
+    const sized = resizable || columns.some((c) => c.width);
+    const pinsStart = !!state.columnPinning.start?.length;
+    const pinned = pinsStart || !!state.columnPinning.end?.length;
+    const pinLayout = `${leafColumns.map((c) => `${c.id}:${c.getIsPinned()}`).join()}|${selectable}|${!!onRowReorder}|${hasActions}`;
+    useLayoutEffect(() => {
+        const row = headRowRef.current;
+        if (!pinned || !row)
+            return;
+        const observer = new ResizeObserver(() => {
+            const next = measurePinOffsets(Array.from(row.children));
+            setPinOffsets((prev) => JSON.stringify(prev) === JSON.stringify(next) ? prev : next);
+        });
+        for (const cell of row.children)
+            observer.observe(cell);
+        return () => observer.disconnect();
+    }, [pinned, pinLayout]);
+    const selectRow = (row, checked, range) => {
+        const ids = rows
+            .filter((r) => !r.getIsGrouped() && r.getCanSelect())
+            .map((r) => r.id);
+        const from = anchorRef.current ? ids.indexOf(anchorRef.current) : -1;
+        const to = ids.indexOf(row.id);
+        if (range && from !== -1 && to !== -1) {
+            const span = ids.slice(Math.min(from, to), Math.max(from, to) + 1);
+            table.setRowSelection((prev) => {
+                const next = { ...prev };
+                for (const id of span) {
+                    if (checked)
+                        next[id] = true;
+                    else
+                        delete next[id];
+                }
+                return next;
+            });
+        }
+        else {
+            row.toggleSelected(checked);
+        }
+        anchorRef.current = row.id;
+    };
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const scrollRef = useRef(null);
+    const virtualizer = useVirtualizer({
+        count: virtual ? rows.length : 0,
+        getScrollElement: () => scrollRef.current,
+        estimateSize: () => 41,
+        overscan: 8,
+        initialRect: { width: 0, height: 600 },
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    const visibleRows = virtual
+        ? virtualItems.flatMap((item) => rows[item.index] ?? [])
+        : rows;
+    const paddingTop = virtual ? (virtualItems[0]?.start ?? 0) : 0;
+    const paddingBottom = virtual
+        ? virtualizer.getTotalSize() - (virtualItems.at(-1)?.end ?? 0)
+        : 0;
+    const startEdit = (row) => setEditing({
+        id: row.id,
+        draft: Object.fromEntries(columns.filter((c) => c.edit).map((c) => [c.key, row.original[c.key]])),
+    });
+    const saveEdit = async (row) => {
+        if (!editing || !onRowSave)
+            return;
+        const changes = Object.fromEntries(Object.entries(editing.draft).filter(([key, value]) => row.original[key] !== value));
+        setEditing({ ...editing, saving: true });
+        try {
+            await onRowSave(row.original, changes);
+            setEditing(null);
+        }
+        catch (error) {
+            setEditing({
+                ...editing,
+                saving: false,
+                error: error instanceof Error ? error.message : String(error),
+            });
+        }
+    };
+    const onColumnDragEnd = ({ active, over }) => {
+        if (!over || active.id === over.id)
+            return;
+        const order = state.columnOrder.length
+            ? state.columnOrder
+            : table.getAllLeafColumns().map((c) => c.id);
+        table.setColumnOrder(arrayMove(order, order.indexOf(String(active.id)), order.indexOf(String(over.id))));
+    };
+    const onRowDragEnd = ({ active, over }) => {
+        if (!over || active.id === over.id || !onRowReorder)
+            return;
+        const ids = data.map(getRowId);
+        onRowReorder(ids.indexOf(String(active.id)), ids.indexOf(String(over.id)));
+    };
+    const toolbar = searchable || columns.some((c) => c.filter || c.group) || columnMenu;
+    const allPageSelected = table.getIsAllPageRowsSelected();
+    const somePageSelected = table.getIsSomePageRowsSelected();
+    const stack = narrow === "stack";
+    const role = (value) => (stack ? value : undefined);
+    const header = (_jsx("thead", { "data-slot": "table-header", className: "sprout-table-header", role: role("rowgroup"), children: _jsx(DndContext, { sensors: sensors, accessibility: dndAccessibility, collisionDetection: closestCenter, onDragEnd: onColumnDragEnd, children: _jsx(SortableContext, { items: leafColumns.map((c) => c.id), strategy: horizontalListSortingStrategy, children: _jsxs("tr", { ref: headRowRef, "data-slot": "table-row", className: "sprout-table-row", role: role("row"), children: [onRowReorder && (_jsx("th", { className: "sprout-table-head", "data-selection": "", "data-column-id": "__reorder", role: role("columnheader"), children: _jsx("span", { className: "sprout-table-sr-only", children: "Reorder" }) })), selectable && (_jsx("th", { className: "sprout-table-head", "data-selection": "", "data-column-id": "__select", role: role("columnheader"), children: _jsx(Checkbox, { "aria-label": "Select all rows", checked: allPageSelected, indeterminate: !allPageSelected && somePageSelected, onCheckedChange: (checked) => table.toggleAllPageRowsSelected(checked) }) })), table
+                            .getFlatHeaders()
+                            .map((h) => h.column.getIsVisible() ? (_jsx(HeadCell, { header: h, config: byKey.get(h.column.id), resizable: resizable, reorderable: reorderable, sized: sized, role: role("columnheader") }, h.id)) : null), hasActions && (_jsx("th", { className: "sprout-table-head", "data-sticky-end": "", "data-column-id": "__actions", role: role("columnheader"), children: _jsx("span", { className: "sprout-table-sr-only", children: "Actions" }) }))] }) }) }) }));
+    const body = (_jsxs("tbody", { "data-slot": "table-body", className: "sprout-table-body", role: role("rowgroup"), children: [paddingTop > 0 && (_jsx("tr", { "aria-hidden": "true", children: _jsx("td", { colSpan: colSpan, style: { height: paddingTop, padding: 0 } }) })), loading ? (Array.from({ length: 3 }, (_, i) => (_jsxs("tr", { className: "sprout-table-row", "data-loading-row": "", role: role("row"), children: [onRowReorder && (_jsx("td", { className: "sprout-table-cell", "data-selection": "" })), selectable && (_jsx("td", { className: "sprout-table-cell", "data-selection": "", children: _jsx(Skeleton, { shape: "checkbox" }) })), leafColumns.map((c) => (_jsx("td", { className: "sprout-table-cell", role: role("cell"), children: _jsx(Skeleton, {}) }, c.id))), hasActions && (_jsx("td", { className: "sprout-table-cell", "data-sticky-end": "", children: _jsx(Skeleton, { shape: "action" }) }))] }, i)))) : rows.length === 0 ? (_jsx("tr", { className: "sprout-table-row", role: role("row"), children: _jsx("td", { className: "sprout-table-cell sprout-table-empty", colSpan: colSpan, role: role("cell"), children: empty ?? "No results." }) })) : (_jsx(DndContext, { sensors: sensors, accessibility: dndAccessibility, collisionDetection: closestCenter, onDragEnd: onRowDragEnd, children: _jsx(SortableContext, { items: rows.map((r) => r.id), strategy: verticalListSortingStrategy, children: visibleRows.map((row) => row.getIsGrouped() ? (_jsx(GroupRow, { row: row, columns: leafColumns, byKey: byKey, selectable: selectable, reorder: !!onRowReorder, hasActions: hasActions, rowIndex: virtual ? row.index + 2 : undefined, role: role }, row.id)) : (_jsx(BodyRow, { row: row, columns: leafColumns, byKey: byKey, label: rowLabel(row.original), selectable: selectable, onSelect: (checked, range) => selectRow(row, checked, range), reorder: onRowReorder ? draggableRows : undefined, editing: editing?.id === row.id ? editing : null, editable: editable, onEditChange: (key, value) => setEditing((prev) => prev && {
+                            ...prev,
+                            draft: { ...prev.draft, [key]: value },
+                        }), onEdit: () => startEdit(row), onSave: () => void saveEdit(row), onCancel: () => setEditing(null), actions: actions, hasActions: hasActions, href: getRowHref?.(row.original), onOpen: onRowClick ? () => onRowClick(row.original) : undefined, drop: onRowDrop
+                            ? {
+                                active: dropTarget === row.id,
+                                set: (on) => setDropTarget(on ? row.id : null),
+                                onDrop: (files) => onRowDrop(row.original, files),
+                            }
+                            : undefined, colSpan: colSpan, rowIndex: virtual ? row.index + 2 : undefined, role: role }, row.id))) }) })), paddingBottom > 0 && (_jsx("tr", { "aria-hidden": "true", children: _jsx("td", { colSpan: colSpan, style: { height: paddingBottom, padding: 0 } }) }))] }));
+    const footer = totals && (_jsx("tfoot", { "data-slot": "table-footer", className: "sprout-table-footer", role: role("rowgroup"), children: _jsxs("tr", { className: "sprout-table-row", role: role("row"), children: [onRowReorder && _jsx("td", { className: "sprout-table-cell", "data-selection": "" }), selectable && _jsx("td", { className: "sprout-table-cell", "data-selection": "" }), leafColumns.map((c, index) => {
+                    const config = byKey.get(c.id);
+                    return (_jsx("td", { className: "sprout-table-cell", "data-align": config?.align ?? "left", "data-label": config?.header, role: role("cell"), style: pinStyle(c, sized, pinOffsets), "data-pinned": c.getIsPinned() || undefined, children: config?.aggregate
+                            ? formatAggregate(config, c.getAggregationValue())
+                            : index === 0
+                                ? "Total"
+                                : null }, c.id));
+                }), hasActions && _jsx("td", { className: "sprout-table-cell", "data-sticky-end": "" })] }) }));
+    const tableElement = (_jsxs("table", { "data-slot": "table", "data-variant": variant, "data-narrow": narrow, "data-sized": sized || undefined, "data-pin-start": pinsStart || undefined, className: "sprout-table", "aria-label": label, "aria-rowcount": virtual ? rows.length + 1 : undefined, "aria-busy": loading || undefined, role: role("table"), style: {
+            ...(sized ? { minWidth: table.getTotalSize() } : {}),
+            ...(pinOffsets.__select !== undefined
+                ? { "--sprout-table-select-start": `${pinOffsets.__select}px` }
+                : {}),
+        }, children: [caption && (_jsx("caption", { "data-slot": "table-caption", className: "sprout-table-caption", children: caption })), _jsxs(PinOffsetsContext, { value: pinOffsets, children: [header, body] }), footer] }));
+    const pageCount = table.getPageCount();
+    return (_jsx(TooltipProvider, { children: _jsxs("div", { "data-slot": "table-root", className: cn("sprout-table-root", className), children: [toolbar && (_jsx(Toolbar, { table: table, columns: columns, label: label, searchable: searchable, columnMenu: columnMenu, onReset: () => {
+                        const reset = initialState(columns, pageSize);
+                        for (const key of tableLayoutKeys)
+                            setSlice(key)(reset[key]);
+                    } })), virtual ? (_jsx("div", { ref: scrollRef, "data-slot": "table-container", "data-virtual": "", className: "sprout-table-container", tabIndex: 0, role: "region", "aria-label": label, children: tableElement })) : variant === "grid" ? (_jsx(ScrollArea, { variant: "table", orientation: "both", viewportLabel: label, "data-slot": "table-container", children: tableElement })) : (_jsx(PlainContainer, { label: label, children: tableElement })), pageSize && pageCount > 1 && (_jsxs("nav", { className: "sprout-table-pages", "aria-label": `${label} pages`, children: [_jsxs("span", { "aria-live": "polite", children: ["Page ", state.pagination.pageIndex + 1, " of ", pageCount] }), _jsx(Button, { variant: "outline", size: "sm", disabled: !table.getCanPreviousPage(), onClick: () => table.previousPage(), children: "Previous" }), _jsx(Button, { variant: "outline", size: "sm", disabled: !table.getCanNextPage(), onClick: () => table.nextPage(), children: "Next" })] }))] }) }));
+}
+const PinOffsetsContext = createContext({});
+/** Sticky offsets from the real header cell widths, so columns without a set width pin in the right place. */
+function measurePinOffsets(cells) {
+    const offsets = {};
+    let start = 0;
+    for (const cell of cells) {
+        const id = cell.dataset.columnId;
+        if (!id ||
+            (cell.dataset.selection === undefined && cell.dataset.pinned !== "start"))
+            continue;
+        offsets[id] = start;
+        start += cell.getBoundingClientRect().width;
+    }
+    let end = 0;
+    for (const cell of [...cells].reverse()) {
+        const id = cell.dataset.columnId;
+        if (!id ||
+            (cell.dataset.stickyEnd === undefined && cell.dataset.pinned !== "end"))
+            continue;
+        offsets[id] = end;
+        end += cell.getBoundingClientRect().width;
+    }
+    return offsets;
+}
+function pinStyle(column, sized, offsets) {
+    const pinned = column.getIsPinned();
+    const width = sized ? column.getSize() : undefined;
+    if (!pinned)
+        return width ? { width } : undefined;
+    return pinned === "start"
+        ? {
+            width,
+            insetInlineStart: offsets[column.id] ?? column.getStart("start"),
+        }
+        : { width, insetInlineEnd: offsets[column.id] ?? column.getAfter("end") };
+}
+function formatAggregate(config, value) {
+    if (typeof value !== "number")
+        return null;
+    return config.formatAggregate
+        ? config.formatAggregate(value)
+        : value.toLocaleString();
+}
+/** Joins the Tab order only while the table is wider than its container, so keyboard users can scroll it. */
+function PlainContainer({ label, children, }) {
+    const ref = useRef(null);
+    const [overflowing, setOverflowing] = useState(false);
+    useEffect(() => {
+        const element = ref.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const measure = () => setOverflowing(element.scrollWidth > element.clientWidth);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        if (element.firstElementChild)
+            observer.observe(element.firstElementChild);
+        return () => observer.disconnect();
+    }, []);
+    return (_jsx("div", { ref: ref, "data-slot": "table-container", "data-overflowing": overflowing || undefined, className: "sprout-table-container", tabIndex: overflowing ? 0 : undefined, role: overflowing ? "region" : undefined, "aria-label": overflowing ? label : undefined, children: children }));
+}
+function HeadCell({ header, config, resizable, reorderable, sized, role, }) {
+    const column = header.column;
+    const title = config?.header ?? column.id;
+    const align = config?.align ?? "left";
+    const sorted = column.getIsSorted();
+    const sortable = column.getCanSort();
+    const sortable_ = useSortable({ id: column.id, disabled: !reorderable });
+    const pinned = column.getIsPinned();
+    const offsets = useContext(PinOffsetsContext);
+    const style = {
+        ...pinStyle(column, sized, offsets),
+        ...(reorderable && sortable_.transform
+            ? {
+                transform: CSS.Translate.toString(sortable_.transform),
+                transition: sortable_.transition,
+            }
+            : {}),
+    };
+    const next = column.getNextSortingOrder();
+    const hint = sorted === "asc"
+        ? `, ascending. ${next === "desc" ? "Select for descending" : "Select to clear"}`
+        : sorted === "desc"
+            ? `, descending. ${next === "asc" ? "Select for ascending" : "Select to clear"}`
+            : "";
+    const Icon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : SortV;
+    const onResizeKey = (event) => {
+        const step = event.shiftKey ? 40 : 10;
+        const delta = event.key === "ArrowRight" ? step : event.key === "ArrowLeft" ? -step : 0;
+        if (!delta)
+            return;
+        event.preventDefault();
+        column.table.setColumnSizing((prev) => ({
+            ...prev,
+            [column.id]: Math.max(48, column.getSize() + delta),
+        }));
+    };
+    return (_jsxs("th", { ref: reorderable ? sortable_.setNodeRef : undefined, "data-slot": "table-head", "data-align": align, "data-pinned": pinned || undefined, "data-column-id": column.id, "data-dragging": sortable_.isDragging || undefined, className: "sprout-table-head", "aria-sort": sorted === "asc"
+            ? "ascending"
+            : sorted === "desc"
+                ? "descending"
+                : undefined, role: role, style: style, children: [_jsxs("span", { className: "sprout-table-head-inner", children: [reorderable && (_jsx("button", { type: "button", className: "sprout-table-handle", "aria-label": `Move ${title} column`, ...sortable_.attributes, ...sortable_.listeners, children: _jsx(Reorder, { size: 14, "aria-hidden": "true" }) })), sortable ? (_jsxs(Button, { variant: sorted ? "secondary" : "ghost", size: align === "right" ? "column-header-end" : "column-header", "aria-label": `Sort by ${title}${hint}`, title: sorted ? undefined : "Sort ascending", onClick: column.getToggleSortingHandler(), children: [title, _jsx(Icon, { size: 14, "aria-hidden": "true" })] })) : (title), config?.hint && (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { render: _jsx("button", { type: "button", "aria-label": `About ${title}`, className: "sprout-table-hint" }), children: _jsx(InfoCircle, { size: 14, "aria-hidden": "true" }) }), _jsx(TooltipContent, { children: config.hint })] }))] }), resizable && (_jsx("div", { role: "separator", "aria-orientation": "vertical", "aria-label": `Resize ${title} column`, "aria-valuenow": column.getSize(), "aria-valuemin": 48, tabIndex: 0, className: "sprout-table-resizer", "data-resizing": column.getIsResizing() || undefined, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), onKeyDown: onResizeKey, onDoubleClick: () => column.resetSize() }))] }));
+}
+function GroupRow({ row, columns, byKey, selectable, reorder, hasActions, rowIndex, role, }) {
+    const groupColumn = byKey.get(row.groupingColumnId ?? "");
+    const value = row.groupingValue;
+    const option = groupColumn?.options?.find((o) => o.value === String(value));
+    const name = option?.label ?? (value == null || value === "" ? "None" : String(value));
+    const expanded = row.getIsExpanded();
+    const leafRows = row.getLeafRows().filter((r) => !r.getIsGrouped());
+    const offsets = useContext(PinOffsetsContext);
+    return (_jsxs("tr", { "data-slot": "table-row", "data-group": "", className: "sprout-table-row", "aria-rowindex": rowIndex, role: role("row"), children: [reorder && _jsx("td", { className: "sprout-table-cell", "data-selection": "" }), selectable && _jsx("td", { className: "sprout-table-cell", "data-selection": "" }), columns.map((column, index) => {
+                const config = byKey.get(column.id);
+                return (_jsx("td", { className: "sprout-table-cell", "data-align": index === 0 ? "left" : (config?.align ?? "left"), "data-pinned": column.getIsPinned() || undefined, role: role("cell"), style: pinStyle(column, false, offsets), children: index === 0 ? (_jsxs("button", { type: "button", className: "sprout-table-toggle", "aria-expanded": expanded, onClick: row.getToggleExpandedHandler(), style: { paddingInlineStart: row.depth * 16 }, children: [expanded ? (_jsx(ChevronDown, { size: 14, "aria-hidden": "true" })) : (_jsx(ChevronRight, { size: 14, "aria-hidden": "true" })), _jsxs("span", { className: "sprout-table-group-name", children: [groupColumn?.header, ": ", name] }), _jsx("span", { className: "sprout-table-group-count", children: leafRows.length })] })) : config?.aggregate ? (formatAggregate(config, column.getAggregationValue({ rows: leafRows }))) : null }, column.id));
+            }), hasActions && _jsx("td", { className: "sprout-table-cell", "data-sticky-end": "" })] }));
+}
+function BodyRow({ row, columns, byKey, label, selectable, onSelect, reorder, editing, editable, onEditChange, onEdit, onSave, onCancel, actions, hasActions, href, onOpen, drop, colSpan, rowIndex, role, }) {
+    const sortable = useSortable({ id: row.id, disabled: !reorder });
+    const selected = row.getIsSelected();
+    const offsets = useContext(PinOffsetsContext);
+    const hasFiles = (event) => event.dataTransfer.types.includes("Files");
+    const onKeyDown = (event) => {
+        if (!editing)
+            return;
+        if (event.key === "Escape") {
+            event.preventDefault();
+            onCancel();
+        }
+        else if (event.key === "Enter" &&
+            event.target instanceof HTMLInputElement) {
+            event.preventDefault();
+            onSave();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs("tr", { ref: reorder !== undefined ? sortable.setNodeRef : undefined, "data-slot": "table-row", "data-state": selected ? "selected" : undefined, "data-editing": editing ? "" : undefined, "data-drop-target": drop?.active || undefined, "data-linked": href || onOpen ? "" : undefined, "data-dragging": sortable.isDragging || undefined, className: "sprout-table-row", "aria-rowindex": rowIndex, "aria-selected": selectable ? selected : undefined, role: role("row"), style: sortable.transform
+                    ? {
+                        transform: CSS.Translate.toString(sortable.transform),
+                        transition: sortable.transition,
+                    }
+                    : undefined, onKeyDown: onKeyDown, onDragOver: drop
+                    ? (event) => {
+                        if (!hasFiles(event))
+                            return;
+                        event.preventDefault();
+                        if (!drop.active)
+                            drop.set(true);
+                    }
+                    : undefined, onDragLeave: drop
+                    ? (event) => {
+                        if (!event.currentTarget.contains(event.relatedTarget))
+                            drop.set(false);
+                    }
+                    : undefined, onDrop: drop
+                    ? (event) => {
+                        if (!hasFiles(event))
+                            return;
+                        event.preventDefault();
+                        drop.set(false);
+                        drop.onDrop(Array.from(event.dataTransfer.files));
+                    }
+                    : undefined, children: [reorder !== undefined && (_jsx("td", { className: "sprout-table-cell", "data-selection": "", role: role("cell"), children: _jsx("button", { type: "button", className: "sprout-table-handle", "aria-label": `Move ${label}`, disabled: !reorder, title: reorder
+                                ? undefined
+                                : "Clear sorting, filters, and grouping to reorder", ...sortable.attributes, ...sortable.listeners, children: _jsx(Reorder, { size: 14, "aria-hidden": "true" }) }) })), selectable && (_jsx("td", { className: "sprout-table-cell", "data-selection": "", role: role("cell"), children: _jsx(Checkbox, { "aria-label": `Select ${label}`, checked: selected, disabled: !row.getCanSelect(), onCheckedChange: (checked, details) => onSelect(checked, details.event.shiftKey ===
+                                true) }) })), columns.map((column, index) => {
+                        const config = byKey.get(column.id);
+                        const content = config?.cell
+                            ? config.cell(row.original)
+                            : row.getValue(column.id);
+                        const first = index === 0;
+                        const canExpand = first && row.getCanExpand();
+                        return (_jsx("td", { "data-slot": "table-cell", "data-align": config?.align ?? "left", "data-pinned": column.getIsPinned() || undefined, "data-label": config?.header, className: "sprout-table-cell", role: role("cell"), style: pinStyle(column, false, offsets), children: editing && config?.edit ? (_jsx(Editor, { config: config, label: `${config.header} for ${label}`, value: editing.draft[column.id], onChange: (value) => onEditChange(column.id, value), autoFocus: first ||
+                                    columns.findIndex((c) => byKey.get(c.id)?.edit) === index })) : first ? (_jsxs("span", { className: "sprout-table-first", style: row.depth
+                                    ? { paddingInlineStart: row.depth * 16 }
+                                    : undefined, children: [canExpand && (_jsx("button", { type: "button", className: "sprout-table-toggle", "aria-expanded": row.getIsExpanded(), "aria-label": `${row.getIsExpanded() ? "Collapse" : "Expand"} ${label}`, onClick: row.getToggleExpandedHandler(), children: row.getIsExpanded() ? (_jsx(ChevronDown, { size: 14, "aria-hidden": "true" })) : (_jsx(ChevronRight, { size: 14, "aria-hidden": "true" })) })), href ? (_jsx("a", { className: "sprout-table-link", href: href, children: content })) : onOpen ? (_jsx("button", { type: "button", className: "sprout-table-link", onClick: onOpen, children: content })) : (content)] })) : (content) }, column.id));
+                    }), hasActions && (_jsx("td", { className: "sprout-table-cell", "data-sticky-end": "", role: role("cell"), children: _jsx("span", { className: "sprout-table-actions", children: editing ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "sm", disabled: editing.saving, onClick: onSave, children: editing.saving ? "Saving" : "Save" }), _jsx(Button, { size: "sm", variant: "ghost", disabled: editing.saving, onClick: onCancel, children: "Cancel" })] })) : (_jsxs(_Fragment, { children: [editable && (_jsx(Button, { size: "sm", variant: "ghost", "aria-label": `Edit ${label}`, onClick: onEdit, children: "Edit" })), actions?.(row.original)] })) }) }))] }), editing?.error && (_jsx("tr", { className: "sprout-table-row", "data-error-row": "", role: role("row"), children: _jsx("td", { colSpan: colSpan, className: "sprout-table-cell sprout-table-error", role: "alert", children: editing.error }) }))] }));
+}
+function Editor({ config, label, value, onChange, autoFocus, }) {
+    if (config.edit === "checkbox") {
+        return (_jsx(Checkbox, { "aria-label": label, checked: Boolean(value), onCheckedChange: (checked) => onChange(checked), autoFocus: autoFocus }));
+    }
+    if (config.edit === "select") {
+        return (_jsx("select", { "aria-label": label, className: "sprout-table-select", value: String(value ?? ""), onChange: (event) => onChange(event.target.value), autoFocus: autoFocus, children: config.options?.map((o) => (_jsx("option", { value: o.value, children: o.label }, o.value))) }));
+    }
+    return (_jsx(Input, { "aria-label": label, type: config.edit === "number"
+            ? "number"
+            : config.edit === "date"
+                ? "date"
+                : "text", value: value == null ? "" : String(value), onValueChange: (next) => onChange(config.edit === "number" ? (next === "" ? null : Number(next)) : next), autoFocus: autoFocus, className: "sprout-table-input" }));
+}
+function Toolbar({ table, columns, label, searchable, columnMenu, onReset, }) {
+    const [pending, setPending] = useState([]);
+    const [open, setOpen] = useState(null);
+    const filters = table.state.columnFilters;
+    const filterable = columns.filter((c) => c.filter);
+    const groupable = columns.filter((c) => c.group);
+    const grouping = table.state.grouping;
+    const chips = filterable.filter((c) => pending.includes(c.key) || filters.some((f) => f.id === c.key));
+    return (_jsxs("div", { className: "sprout-table-toolbar", role: "toolbar", "aria-label": `${label} tools`, children: [searchable && (_jsx(SearchField, { label: `Search ${label}`, value: String(table.state.globalFilter ?? ""), onChange: (value) => table.setGlobalFilter(value) })), chips.map((c) => {
+                const column = table.getColumn(c.key);
+                if (!column)
+                    return null;
+                return (_jsxs("span", { className: "sprout-table-chip", children: [_jsxs(Popover, { open: open === c.key, onOpenChange: (next) => setOpen(next ? c.key : null), children: [_jsxs(PopoverTrigger, { className: "sprout-table-chip-label", children: [c.header, describeFilter(c, column.getFilterValue())] }), _jsx(PopoverContent, { align: "start", children: _jsx(FilterEditor, { config: c, column: column }) })] }), _jsx("button", { type: "button", className: "sprout-table-chip-remove", "aria-label": `Remove ${c.header} filter`, onClick: () => {
+                                column.setFilterValue(undefined);
+                                setPending((p) => p.filter((k) => k !== c.key));
+                            }, children: _jsx(X, { size: 12, "aria-hidden": "true" }) })] }, c.key));
+            }), filterable.length > chips.length && (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm" }), children: [_jsx(Plus, { size: 14, "aria-hidden": "true" }), "Filter"] }), _jsx(DropdownMenuContent, { align: "start", size: "menu", children: filterable
+                            .filter((c) => !chips.includes(c))
+                            .map((c) => (_jsx(DropdownMenuItem, { onClick: () => {
+                                setPending((p) => [...p, c.key]);
+                                setOpen(c.key);
+                            }, children: c.header }, c.key))) })] })), _jsxs("span", { className: "sprout-table-toolbar-end", children: [groupable.length > 0 && (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm" }), children: [grouping.length ? `Group: ${grouping.length}` : "Group", _jsx(ChevronDown, { size: 14, "aria-hidden": "true" })] }), _jsx(DropdownMenuContent, { align: "end", size: "menu", children: groupable.map((c) => (_jsx(DropdownMenuCheckboxItem, { checked: grouping.includes(c.key), onCheckedChange: () => table.getColumn(c.key)?.toggleGrouping(), children: c.header }, c.key))) })] })), columnMenu && (_jsxs(DropdownMenu, { children: [_jsxs(DropdownMenuTrigger, { render: _jsx(Button, { variant: "ghost", size: "sm" }), children: ["Columns", _jsx(ChevronDown, { size: 14, "aria-hidden": "true" })] }), _jsxs(DropdownMenuContent, { align: "end", size: "menu", children: [columns.map((c) => {
+                                        const column = table.getColumn(c.key);
+                                        if (!column)
+                                            return null;
+                                        return (_jsxs(DropdownMenuSub, { children: [_jsx(DropdownMenuSubTrigger, { children: c.header }), _jsxs(DropdownMenuSubContent, { children: [_jsx(DropdownMenuCheckboxItem, { checked: column.getIsVisible(), onCheckedChange: (checked) => column.toggleVisibility(checked), children: "Show" }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuRadioGroup, { value: column.getIsPinned() || "none", onValueChange: (value) => column.pin(value === "none"
+                                                                ? false
+                                                                : value), children: [_jsx(DropdownMenuRadioItem, { value: "none", children: "Not pinned" }), _jsx(DropdownMenuRadioItem, { value: "start", children: "Pin to start" }), _jsx(DropdownMenuRadioItem, { value: "end", children: "Pin to end" })] })] })] }, c.key));
+                                    }), _jsx(DropdownMenuSeparator, {}), _jsx(DropdownMenuItem, { onClick: onReset, children: "Reset columns" })] })] }))] })] }));
+}
+function describeFilter(config, value) {
+    if (value === undefined)
+        return "";
+    if (config.filter === "select" && Array.isArray(value)) {
+        const labels = value.map((v) => config.options?.find((o) => o.value === v)?.label ?? String(v));
+        return `: ${labels.join(", ")}`;
+    }
+    if ((config.filter === "number" || config.filter === "date") &&
+        Array.isArray(value)) {
+        const [min, max] = value;
+        const has = (v) => v !== undefined && v !== null && v !== "";
+        if (has(min) && has(max))
+            return `: ${min} – ${max}`;
+        if (has(min))
+            return `: ≥ ${min}`;
+        if (has(max))
+            return `: ≤ ${max}`;
+        return "";
+    }
+    if (config.filter === "boolean")
+        return `: ${value ? "Yes" : "No"}`;
+    return `: ${String(value)}`;
+}
+function FilterEditor({ config, column, }) {
+    const value = column.getFilterValue();
+    const name = config.header;
+    if (config.filter === "select") {
+        const selected = value ?? [];
+        return (_jsxs("fieldset", { className: "sprout-table-filter", children: [_jsx("legend", { children: name }), config.options?.map((o) => (_jsxs("label", { className: "sprout-table-filter-option", children: [_jsx(Checkbox, { variant: "neutral", checked: selected.includes(o.value), onCheckedChange: (checked) => column.setFilterValue(checked
+                                ? [...selected, o.value]
+                                : selected.filter((v) => v !== o.value)) }), o.label] }, o.value)))] }));
+    }
+    if (config.filter === "boolean") {
+        return (_jsxs("fieldset", { className: "sprout-table-filter", children: [_jsx("legend", { children: name }), [true, false].map((option) => (_jsxs("label", { className: "sprout-table-filter-option", children: [_jsx("input", { type: "radio", name: `${column.id}-filter`, checked: value === option, onChange: () => column.setFilterValue(option) }), option ? "Yes" : "No"] }, String(option))))] }));
+    }
+    if (config.filter === "number" || config.filter === "date") {
+        const [min, max] = value ?? [
+            undefined,
+            undefined,
+        ];
+        const type = config.filter === "number" ? "number" : "date";
+        const set = (index, next) => {
+            const parsed = next === "" ? undefined : type === "number" ? Number(next) : next;
+            const range = index === 0 ? [parsed, max] : [min, parsed];
+            column.setFilterValue(range[0] === undefined && range[1] === undefined ? undefined : range);
+        };
+        return (_jsxs("fieldset", { className: "sprout-table-filter", "data-range": "", children: [_jsx("legend", { children: name }), _jsx(Input, { "aria-label": `${name} from`, type: type, value: min == null ? "" : String(min), onValueChange: (next) => set(0, next) }), _jsx(Input, { "aria-label": `${name} to`, type: type, value: max == null ? "" : String(max), onValueChange: (next) => set(1, next) })] }));
+    }
+    return (_jsx(Input, { "aria-label": `${name} contains`, autoFocus: true, value: String(value ?? ""), onValueChange: (next) => column.setFilterValue(next || undefined) }));
+}