@tulipfarm/sprout 0.3.0 → 0.4.0

package/dist/components/table.js

@@ -1,63 +1,45 @@
-"use client";
+'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",
-];
+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",
+    '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,
+    container: typeof document === 'undefined' ? undefined : document.body,
 };
 const isAnyOf = constructFilterFn({
     filter: (dataValue, filterValue) => filterValue.includes(String(dataValue)),
@@ -104,34 +86,29 @@ const features = tableFeatures({
     },
 });
 const filterFnFor = {
-    text: "includesString",
-    number: "inNumberRange",
-    select: "isAnyOf",
-    date: "inDateRange",
-    boolean: "equals",
+    text: 'includesString',
+    number: 'inNumberRange',
+    select: 'isAnyOf',
+    date: 'inDateRange',
+    boolean: 'equals',
 };
 const DEFAULT_PAGE_SIZE = 10;
-const pageResetKeys = new Set([
-    "sorting",
-    "columnFilters",
-    "globalFilter",
-    "grouping",
-]);
+const pageResetKeys = new Set(['sorting', 'columnFilters', 'globalFilter', 'grouping']);
 function initialState(columns, pageSize) {
     return {
         sorting: [],
         columnFilters: [],
-        globalFilter: "",
+        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),
+            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])),
+        columnVisibility: Object.fromEntries(columns.filter(c => c.hidden).map(c => [c.key, false])),
     };
 }
 const storageKey = (key) => `sprout-table:${key}`;
@@ -146,7 +123,7 @@ function readLayout(key) {
 }
 function writeLayout(key, state) {
     try {
-        localStorage.setItem(storageKey(key), JSON.stringify(Object.fromEntries(tableLayoutKeys.map((k) => [k, state[k]]))));
+        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.
@@ -158,8 +135,8 @@ function writeLayout(key, state) {
  * 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 { 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);
@@ -175,7 +152,7 @@ export function Table(props) {
             return;
         const saved = readLayout(persistKey);
         if (Object.keys(saved).length)
-            setInner((prev) => ({ ...prev, ...saved }));
+            setInner(prev => ({ ...prev, ...saved }));
     }, [persistKey]);
     const setSlice = (key) => (updater) => {
         const next = {
@@ -192,10 +169,10 @@ export function Table(props) {
         }
         onStateChange?.(next);
     };
-    const byKey = useMemo(() => new Map(columns.map((c) => [c.key, c])), [columns]);
+    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],
+        accessorFn: row => row[c.key],
         header: c.header,
         enableSorting: c.sort ?? false,
         sortDescFirst: false,
@@ -212,28 +189,28 @@ export function Table(props) {
         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) => {
+        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]));
+            onSelectionChange?.(Object.keys(next).filter(id => next[id]));
         },
-        globalFilterFn: "includesString",
-        groupedColumnMode: "remove",
+        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",
+        columnResizeMode: 'onChange',
         enableMultiSort: true,
         manualSorting: manual,
         manualFiltering: manual,
@@ -247,43 +224,38 @@ export function Table(props) {
         ...table.getCenterVisibleLeafColumns(),
         ...table.getEndVisibleLeafColumns(),
     ];
-    const editable = !!onRowSave && columns.some((c) => c.edit);
+    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 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}`;
+    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);
+            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 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) => {
+            table.setRowSelection(prev => {
                 const next = { ...prev };
                 for (const id of span) {
                     if (checked)
@@ -311,16 +283,12 @@ export function Table(props) {
         initialRect: { width: 0, height: 600 },
     });
     const virtualItems = virtualizer.getVirtualItems();
-    const visibleRows = virtual
-        ? virtualItems.flatMap((item) => rows[item.index] ?? [])
-        : rows;
+    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 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]])),
+        draft: Object.fromEntries(columns.filter(c => c.edit).map(c => [c.key, row.original[c.key]])),
     });
     const saveEdit = async (row) => {
         if (!editing || !onRowSave)
@@ -342,9 +310,7 @@ export function Table(props) {
     const onColumnDragEnd = ({ active, over }) => {
         if (!over || active.id === over.id)
             return;
-        const order = state.columnOrder.length
-            ? state.columnOrder
-            : table.getAllLeafColumns().map((c) => c.id);
+        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 }) => {
@@ -353,44 +319,38 @@ export function Table(props) {
         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 toolbar = searchable || columns.some(c => c.filter || c.group) || columnMenu;
     const allPageSelected = table.getIsAllPageRowsSelected();
     const somePageSelected = table.getIsSomePageRowsSelected();
-    const stack = narrow === "stack";
+    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
+    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 && {
+                            .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),
+                                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 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));
+                    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: {
+    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` }
-                : {}),
+            ...(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: () => {
+    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" })] }))] }) }));
+                    } })), 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. */
@@ -399,8 +359,7 @@ function measurePinOffsets(cells) {
     let start = 0;
     for (const cell of cells) {
         const id = cell.dataset.columnId;
-        if (!id ||
-            (cell.dataset.selection === undefined && cell.dataset.pinned !== "start"))
+        if (!id || (cell.dataset.selection === undefined && cell.dataset.pinned !== 'start'))
             continue;
         offsets[id] = start;
         start += cell.getBoundingClientRect().width;
@@ -408,8 +367,7 @@ function measurePinOffsets(cells) {
     let end = 0;
     for (const cell of [...cells].reverse()) {
         const id = cell.dataset.columnId;
-        if (!id ||
-            (cell.dataset.stickyEnd === undefined && cell.dataset.pinned !== "end"))
+        if (!id || (cell.dataset.stickyEnd === undefined && cell.dataset.pinned !== 'end'))
             continue;
         offsets[id] = end;
         end += cell.getBoundingClientRect().width;
@@ -421,27 +379,25 @@ function pinStyle(column, sized, offsets) {
     const width = sized ? column.getSize() : undefined;
     if (!pinned)
         return width ? { width } : undefined;
-    return pinned === "start"
+    return pinned === 'start'
         ? {
             width,
-            insetInlineStart: offsets[column.id] ?? column.getStart("start"),
+            insetInlineStart: offsets[column.id] ?? column.getStart('start'),
         }
-        : { width, insetInlineEnd: offsets[column.id] ?? column.getAfter("end") };
+        : { width, insetInlineEnd: offsets[column.id] ?? column.getAfter('end') };
 }
 function formatAggregate(config, value) {
-    if (typeof value !== "number")
+    if (typeof value !== 'number')
         return null;
-    return config.formatAggregate
-        ? config.formatAggregate(value)
-        : value.toLocaleString();
+    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, }) {
+function PlainContainer({ label, children }) {
     const ref = useRef(null);
     const [overflowing, setOverflowing] = useState(false);
     useEffect(() => {
         const element = ref.current;
-        if (!element || typeof ResizeObserver === "undefined")
+        if (!element || typeof ResizeObserver === 'undefined')
             return;
         const measure = () => setOverflowing(element.scrollWidth > element.clientWidth);
         measure();
@@ -451,12 +407,12 @@ function PlainContainer({ label, children, }) {
             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 }));
+    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 align = config?.align ?? 'left';
     const sorted = column.getIsSorted();
     const sortable = column.getCanSort();
     const sortable_ = useSortable({ id: column.id, disabled: !reorderable });
@@ -472,67 +428,62 @@ function HeadCell({ header, config, resizable, reorderable, sized, role, }) {
             : {}),
     };
     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 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;
+        const delta = event.key === 'ArrowRight' ? step : event.key === 'ArrowLeft' ? -step : 0;
         if (!delta)
             return;
         event.preventDefault();
-        column.table.setColumnSizing((prev) => ({
+        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() }))] }));
+    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 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 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 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) => {
+    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));
+                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 hasFiles = (event) => event.dataTransfer.types.includes('Files');
     const onKeyDown = (event) => {
         if (!editing)
             return;
-        if (event.key === "Escape") {
+        if (event.key === 'Escape') {
             event.preventDefault();
             onCancel();
         }
-        else if (event.key === "Enter" &&
-            event.target instanceof HTMLInputElement) {
+        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
+    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) => {
+                    ? event => {
                         if (!hasFiles(event))
                             return;
                         event.preventDefault();
@@ -540,124 +491,104 @@ function BodyRow({ row, columns, byKey, label, selectable, onSelect, reorder, ed
                             drop.set(true);
                     }
                     : undefined, onDragLeave: drop
-                    ? (event) => {
+                    ? event => {
                         if (!event.currentTarget.contains(event.relatedTarget))
                             drop.set(false);
                     }
                     : undefined, onDrop: drop
-                    ? (event) => {
+                    ? 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) => {
+                    : 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 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 }) }))] }));
+                        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 === '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))) }));
+    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" }));
+    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 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 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: () => {
+                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));
+                                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]);
+                            .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) => {
+                            }, 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));
+                                        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(", ")}`;
+        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)) {
+    if ((config.filter === 'number' || config.filter === 'date') && Array.isArray(value)) {
         const [min, max] = value;
-        const has = (v) => v !== undefined && v !== null && v !== "";
+        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 "";
+        return '';
     }
-    if (config.filter === "boolean")
-        return `: ${value ? "Yes" : "No"}`;
+    if (config.filter === 'boolean')
+        return `: ${value ? 'Yes' : 'No'}`;
     return `: ${String(value)}`;
 }
-function FilterEditor({ config, column, }) {
+function FilterEditor({ config, column }) {
     const value = column.getFilterValue();
     const name = config.header;
-    if (config.filter === "select") {
+    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)))] }));
+        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 === '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";
+    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 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 (_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) }));
+    return (_jsx(Input, { "aria-label": `${name} contains`, autoFocus: true, value: String(value ?? ''), onValueChange: next => column.setFilterValue(next || undefined) }));
 }