@ifhover/leaf-ui 0.0.0-stage → 0.6.0

package/dist/esm/tabletanstack/tabletanstack.js

@@ -0,0 +1,833 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useFormattedText } from "../shared/use-formatted-text.js";
+import { flexRender, getCoreRowModel, getExpandedRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronRight, Columns3, Search } from "lucide-react";
+import { Fragment as external_react_Fragment, createContext, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { ButtonControl } from "../button/button.js";
+import { CheckboxControl } from "../checkbox/checkbox.js";
+import { mergeComponentProps, useComponentProps, useGenericComponentDefaults } from "../config-provider/component-defaults.js";
+import { useLeafConfig } from "../config-provider/context.js";
+import { FieldScope } from "../form/form.js";
+import { InputControl } from "../input/input.js";
+import { PaginationControl } from "../pagination/pagination.js";
+import { PopoverControl } from "../popover/popover.js";
+import { RadioControl } from "../radio/radio.js";
+import { classes } from "../shared/classes.js";
+import { assignRef } from "../shared/field.js";
+import { useText } from "../shared/use-text.js";
+import { TableControl } from "../table/table.js";
+import { ReorderColumnHeader, ReorderHandle, ReorderItems, ReorderRow, ReorderScope } from "./reordering.js";
+const DataTableContext = /*#__PURE__*/ createContext(null);
+function useDataTable() {
+    const value = useContext(DataTableContext);
+    if (!value) throw new Error('DataTable parts must be rendered inside DataTable.');
+    return value;
+}
+function DataTableRoot({ table, children, caption, size = 'md', bordered = false, striped = false, stickyHeader = true, maxHeight, minWidth, loading = false, emptyContent, error, onRetry, selection = false, selectAllMode = 'page', getRowLabel, renderExpandedRow, getRowProps, getCellProps, resizable = false, columnReordering = false, onRowReorder, virtual = false, pagination = true, tableRef, className, 'aria-label': label, 'aria-labelledby': labelledBy, ...props }) {
+    const id = useId();
+    const state = table.getState();
+    const rows = table.getRowModel().rows;
+    const rowReordering = Boolean(onRowReorder && !loading && !virtual && !state.sorting.length && !state.columnFilters.length && !state.globalFilter && !state.grouping.length && true !== state.expanded && !Object.values(state.expanded).some(Boolean) && !rows.some((row)=>row.depth || row.subRows.length));
+    const reorderColumns = columnReordering && !loading && table.getAllColumns().every((column)=>!column.columns.length);
+    const value = {
+        table: table,
+        id,
+        label,
+        labelledBy,
+        caption,
+        size,
+        bordered,
+        striped,
+        stickyHeader,
+        maxHeight: maxHeight ?? (virtual ? 400 : void 0),
+        minWidth,
+        loading,
+        emptyContent,
+        error,
+        onRetry,
+        selection,
+        selectAllMode,
+        getRowLabel: getRowLabel ? (row)=>getRowLabel(row) : void 0,
+        renderExpandedRow: renderExpandedRow ? (row)=>renderExpandedRow(row) : void 0,
+        getRowProps: getRowProps ? (row)=>getRowProps(row) : void 0,
+        getCellProps: getCellProps ? (cell)=>getCellProps(cell) : void 0,
+        resizable,
+        columnReordering,
+        onRowReorder: onRowReorder ? (info)=>onRowReorder(info) : void 0,
+        rowReordering,
+        reorderColumns,
+        virtual,
+        pagination,
+        tableRef,
+        expandable: Boolean(renderExpandedRow) || table.getCanSomeRowsExpand()
+    };
+    return /*#__PURE__*/ jsx(DataTableContext.Provider, {
+        value: value,
+        children: /*#__PURE__*/ jsx(FieldScope, {
+            children: /*#__PURE__*/ jsx("div", {
+                ...props,
+                className: classes('leaf-data-table', className),
+                children: /*#__PURE__*/ jsx(ReorderScope, {
+                    enabled: Boolean(onRowReorder || columnReordering),
+                    id: `${id}-reorder`,
+                    disabled: loading || !rowReordering && !reorderColumns,
+                    onReorder: (kind, activeId, overId)=>{
+                        if ('row' === kind && rowReordering && onRowReorder) {
+                            const fromIndex = rows.findIndex((row)=>row.id === activeId);
+                            const toIndex = rows.findIndex((row)=>row.id === overId);
+                            const activeRow = rows[fromIndex];
+                            const overRow = rows[toIndex];
+                            if (!activeRow || !overRow) return;
+                            const next = [
+                                ...rows
+                            ];
+                            next.splice(fromIndex, 1);
+                            next.splice(toIndex, 0, activeRow);
+                            onRowReorder({
+                                rows: next,
+                                fromIndex,
+                                toIndex,
+                                activeRow,
+                                overRow
+                            });
+                        } else if ('column' === kind && reorderColumns) {
+                            const order = table.getAllLeafColumns().map((column)=>column.id);
+                            const fromIndex = order.indexOf(activeId);
+                            const toIndex = order.indexOf(overId);
+                            if (fromIndex < 0 || toIndex < 0) return;
+                            order.splice(fromIndex, 1);
+                            order.splice(toIndex, 0, activeId);
+                            table.setColumnOrder(order);
+                            const pin = table.getColumn(activeId)?.getIsPinned();
+                            if (pin) table.setColumnPinning((previous)=>{
+                                const pinned = [
+                                    ...previous[pin] ?? []
+                                ];
+                                const source = pinned.indexOf(activeId);
+                                const target = pinned.indexOf(overId);
+                                if (source < 0 || target < 0) return previous;
+                                pinned.splice(source, 1);
+                                pinned.splice(target, 0, activeId);
+                                return {
+                                    ...previous,
+                                    [pin]: pinned
+                                };
+                            });
+                        }
+                    },
+                    children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(DataTableContentControl, {}),
+                            pagination && /*#__PURE__*/ jsx(DataTableFooterControl, {
+                                children: /*#__PURE__*/ jsx(DataTablePaginationControl, {})
+                            })
+                        ]
+                    })
+                })
+            })
+        })
+    });
+}
+function DataTableToolbar(rawProps) {
+    const { className, ...props } = useComponentProps('DataTableToolbar', rawProps);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: classes('leaf-data-table__toolbar', className)
+    });
+}
+function DataTableFooterControl({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: classes('leaf-data-table__footer', className)
+    });
+}
+function DataTableSearch(rawProps) {
+    const { columnId, className, ...props } = useComponentProps('DataTableSearch', rawProps);
+    const { table, loading, size } = useDataTable();
+    const t = useText();
+    const column = columnId ? table.getColumn(columnId) : void 0;
+    const value = columnId ? column?.getFilterValue() : table.getState().globalFilter;
+    return /*#__PURE__*/ jsx(InputControl, {
+        "aria-label": t('dataTable.searchTable'),
+        placeholder: t('dataTable.searchTable'),
+        prefix: /*#__PURE__*/ jsx(Search, {
+            size: 16
+        }),
+        allowClear: true,
+        size: size,
+        ...props,
+        disabled: props.disabled || loading || Boolean(columnId && !column?.getCanFilter()),
+        className: classes('leaf-data-table__search', className),
+        value: 'string' == typeof value || 'number' == typeof value ? String(value) : '',
+        onChange: (event)=>{
+            if (columnId) column?.setFilterValue(event.currentTarget.value);
+            else table.setGlobalFilter(event.currentTarget.value);
+        }
+    });
+}
+function columnLabel(column) {
+    const meta = column.columnDef.meta;
+    return meta?.label ?? ('string' == typeof column.columnDef.header ? column.columnDef.header : column.id);
+}
+function DataTableColumnVisibility(rawProps) {
+    const { children, label } = useComponentProps('DataTableColumnVisibility', rawProps);
+    const { table, loading, size } = useDataTable();
+    const t = useText();
+    const title = label ?? t('dataTable.columns');
+    return /*#__PURE__*/ jsx(PopoverControl, {
+        placement: "bottom-end",
+        "aria-label": title,
+        content: /*#__PURE__*/ jsx(FieldScope, {
+            children: /*#__PURE__*/ jsx("div", {
+                className: "leaf-data-table__visibility",
+                children: table.getAllLeafColumns().map((column)=>/*#__PURE__*/ jsx(CheckboxControl, {
+                        checked: column.getIsVisible(),
+                        disabled: loading || !column.getCanHide(),
+                        onChange: column.getToggleVisibilityHandler(),
+                        children: columnLabel(column)
+                    }, column.id))
+            })
+        }),
+        children: /*#__PURE__*/ jsx(ButtonControl, {
+            size: size,
+            variant: "outline",
+            startIcon: /*#__PURE__*/ jsx(Columns3, {
+                size: 16
+            }),
+            disabled: loading,
+            children: children ?? title
+        })
+    });
+}
+function pinProps(column) {
+    const pin = column.getIsPinned();
+    return {
+        pinned: 'left' === pin ? 'start' : 'right' === pin ? 'end' : void 0,
+        pinOffset: 'left' === pin ? column.getStart('left') : 'right' === pin ? column.getAfter('right') : void 0,
+        pinEdge: 'left' === pin ? column.getIsLastColumn('left') : 'right' === pin ? column.getIsFirstColumn('right') : void 0
+    };
+}
+function ResizeHandle({ header }) {
+    const { table, loading } = useDataTable();
+    const { direction } = useLeafConfig();
+    const format = useFormattedText();
+    const column = header.column;
+    const min = column.columnDef.minSize ?? 20;
+    const max = column.columnDef.maxSize ?? Number.MAX_SAFE_INTEGER;
+    return /*#__PURE__*/ jsx("hr", {
+        tabIndex: loading ? -1 : 0,
+        "aria-label": format('dataTable.resizeColumn', {
+            label: columnLabel(column)
+        }),
+        "aria-orientation": "vertical",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": column.getSize(),
+        "aria-disabled": loading || void 0,
+        className: "leaf-data-table__resize",
+        "data-resizing": column.getIsResizing() || void 0,
+        onMouseDown: loading ? void 0 : header.getResizeHandler(),
+        onTouchStart: loading ? void 0 : header.getResizeHandler(),
+        onDoubleClick: ()=>{
+            if (!loading) column.resetSize();
+        },
+        onKeyDown: (event)=>{
+            if (loading || ![
+                'ArrowLeft',
+                'ArrowRight',
+                'Home',
+                'End'
+            ].includes(event.key)) return;
+            event.preventDefault();
+            const step = event.shiftKey ? 50 : 10;
+            const delta = ('ArrowRight' === event.key ? 1 : -1) * ('rtl' === direction ? -1 : 1) * step;
+            const next = 'Home' === event.key ? min : 'End' === event.key ? max : column.getSize() + delta;
+            table.setColumnSizing((previous)=>({
+                    ...previous,
+                    [column.id]: Math.min(max, Math.max(min, next))
+                }));
+        }
+    });
+}
+function SelectionHeader() {
+    const { table, selection, selectAllMode, loading } = useDataTable();
+    const t = useText();
+    if ('multiple' !== selection) return /*#__PURE__*/ jsx("span", {
+        className: "leaf-table__sr-only",
+        children: t('dataTable.selectRows')
+    });
+    const page = 'page' === selectAllMode;
+    const selectable = (page ? table.getRowModel() : table.getPrePaginationRowModel()).flatRows.filter((row)=>row.getCanSelect());
+    return /*#__PURE__*/ jsx(CheckboxControl, {
+        "aria-label": page ? t('dataTable.selectAllRowsOnThisPage') : t('dataTable.selectAllRows'),
+        checked: page ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected(),
+        indeterminate: page ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected(),
+        disabled: loading || !selectable.length,
+        onChange: page ? table.getToggleAllPageRowsSelectedHandler() : table.getToggleAllRowsSelectedHandler()
+    });
+}
+function DataRow({ row, rowIndex, ariaRowIndex, measureRef }) {
+    const config = useDataTable();
+    const { id, selection, loading, getRowLabel, renderExpandedRow, getRowProps, getCellProps } = config;
+    const format = useFormattedText();
+    const detailsId = `${id}-detail-${encodeURIComponent(row.id)}`;
+    const label = getRowLabel?.(row) ?? row.id;
+    const expandable = config.expandable;
+    const detail = Boolean(renderExpandedRow && row.getIsExpanded() && !row.subRows.length);
+    const [visited, setVisited] = useState(detail);
+    useEffect(()=>{
+        if (detail) setVisited(true);
+    }, [
+        detail
+    ]);
+    const cells = row.getVisibleCells();
+    const utilityCount = Number(Boolean(selection)) + Number(expandable) + Number(config.rowReordering);
+    const custom = getRowProps?.(row);
+    const element = useRef(null);
+    useEffect(()=>{
+        const node = element.current;
+        const next = node?.nextElementSibling;
+        if (!node || !measureRef || !next?.hasAttribute('data-detail-row')) return;
+        const measure = ()=>measureRef(node);
+        measure();
+        const observer = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(measure);
+        observer?.observe(next);
+        return ()=>observer?.disconnect();
+    }, [
+        measureRef
+    ]);
+    return /*#__PURE__*/ jsxs(external_react_Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs(ReorderRow, {
+                ...custom,
+                enabled: Boolean(config.onRowReorder),
+                disabled: !config.rowReordering,
+                itemId: row.id,
+                itemLabel: label,
+                ref: (node)=>{
+                    assignRef(element, node);
+                    measureRef?.(node);
+                },
+                "data-index": rowIndex,
+                "data-row-id": row.id,
+                "aria-rowindex": ariaRowIndex,
+                selected: selection ? row.getIsSelected() : custom?.selected,
+                children: [
+                    config.rowReordering && /*#__PURE__*/ jsx(TableControl.Cell, {
+                        className: "leaf-data-table__utility",
+                        children: /*#__PURE__*/ jsx(ReorderHandle, {
+                            label: format('dataTable.reorderRow', {
+                                label
+                            })
+                        })
+                    }),
+                    selection && /*#__PURE__*/ jsx(TableControl.Cell, {
+                        className: "leaf-data-table__utility",
+                        children: 'single' === selection ? /*#__PURE__*/ jsx(RadioControl, {
+                            name: `${id}-selection`,
+                            form: `${id}-detached-selection`,
+                            "aria-label": format('dataTable.selectRow', {
+                                label
+                            }),
+                            checked: row.getIsSelected(),
+                            disabled: loading || !row.getCanSelect(),
+                            onChange: ()=>config.table.setRowSelection({
+                                    [row.id]: true
+                                })
+                        }) : /*#__PURE__*/ jsx(CheckboxControl, {
+                            "aria-label": format('dataTable.selectRow', {
+                                label
+                            }),
+                            checked: row.getIsSelected(),
+                            indeterminate: row.getIsSomeSelected(),
+                            disabled: loading || !row.getCanSelect(),
+                            onChange: row.getToggleSelectedHandler()
+                        })
+                    }),
+                    expandable && /*#__PURE__*/ jsx(TableControl.Cell, {
+                        className: "leaf-data-table__utility",
+                        children: row.getCanExpand() && /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            className: "leaf-data-table__expand",
+                            "aria-label": format(row.getIsExpanded() ? 'dataTable.collapseRow' : 'dataTable.expandRow', {
+                                label
+                            }),
+                            "aria-expanded": row.getIsExpanded(),
+                            "aria-controls": renderExpandedRow && !row.subRows.length ? detailsId : void 0,
+                            disabled: loading,
+                            onClick: row.getToggleExpandedHandler(),
+                            style: {
+                                marginInlineStart: 12 * row.depth
+                            },
+                            children: /*#__PURE__*/ jsx(ChevronRight, {
+                                size: 16,
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }),
+                    cells.map((cell)=>{
+                        const meta = cell.column.columnDef.meta;
+                        const props = getCellProps?.(cell);
+                        if (props?.colSpan === 0 || props?.rowSpan === 0) return null;
+                        return /*#__PURE__*/ jsxs(TableControl.Cell, {
+                            align: meta?.align,
+                            ...pinProps(cell.column),
+                            ...props,
+                            className: classes(meta?.cellClassName, props?.className),
+                            children: [
+                                cell.getIsPlaceholder() ? null : flexRender(cell.getIsAggregated() ? cell.column.columnDef.aggregatedCell ?? cell.column.columnDef.cell : cell.column.columnDef.cell, cell.getContext()),
+                                cell.getIsGrouped() && /*#__PURE__*/ jsxs("span", {
+                                    className: "leaf-data-table__group-count",
+                                    children: [
+                                        " (",
+                                        row.subRows.length,
+                                        ")"
+                                    ]
+                                })
+                            ]
+                        }, cell.id);
+                    })
+                ]
+            }),
+            renderExpandedRow && row.getCanExpand() && !row.subRows.length && /*#__PURE__*/ jsx(TableControl.Row, {
+                className: "leaf-data-table__detail",
+                id: detailsId,
+                "data-detail-row": row.id,
+                "aria-rowindex": ariaRowIndex && detail ? ariaRowIndex + 1 : void 0,
+                hidden: !detail,
+                children: /*#__PURE__*/ jsx(TableControl.Cell, {
+                    colSpan: Math.max(1, cells.length + utilityCount),
+                    children: visited || detail ? renderExpandedRow?.(row) : null
+                })
+            })
+        ]
+    });
+}
+function VirtualRows({ rows, colSpan, headerCount, viewport, tableElement, focusedRowId, rowIndexes }) {
+    const { virtual, table, maxHeight } = useDataTable();
+    const options = 'object' == typeof virtual ? virtual : {};
+    const headerHeight = useRef(44 * headerCount);
+    const focusedIndex = focusedRowId ? rows.findIndex((row)=>row.id === focusedRowId) : -1;
+    const virtualizer = useVirtualizer({
+        count: rows.length,
+        getScrollElement: ()=>viewport.current,
+        estimateSize: ()=>Math.max(1, options.estimateRowHeight ?? 48),
+        overscan: Math.max(1, options.overscan ?? 5),
+        getItemKey: (index)=>rows[index]?.id ?? index,
+        scrollMargin: headerHeight.current,
+        initialRect: {
+            width: 0,
+            height: 'number' == typeof maxHeight ? maxHeight : 400
+        },
+        rangeExtractor: (range)=>{
+            const visible = defaultRangeExtractor(range);
+            return focusedIndex < 0 ? visible : [
+                ...new Set([
+                    ...visible,
+                    focusedIndex
+                ])
+            ].sort((first, second)=>first - second);
+        },
+        measureElement: (element)=>{
+            const detail = element.nextElementSibling;
+            return element.getBoundingClientRect().height + (detail?.hasAttribute('data-detail-row') ? detail.getBoundingClientRect().height : 0);
+        }
+    });
+    const expanded = table.getState().expanded;
+    useEffect(()=>{
+        const header = tableElement.current?.tHead;
+        if (!header) return;
+        const measure = ()=>{
+            headerHeight.current = header.getBoundingClientRect().height;
+            virtualizer.measure();
+        };
+        measure();
+        const observer = "u" < typeof ResizeObserver ? void 0 : new ResizeObserver(measure);
+        observer?.observe(header);
+        return ()=>observer?.disconnect();
+    }, [
+        tableElement,
+        virtualizer
+    ]);
+    useEffect(()=>{
+        if (expanded) virtualizer.measure();
+    }, [
+        expanded,
+        virtualizer
+    ]);
+    const items = virtualizer.getVirtualItems();
+    const last = items.at(-1);
+    const bottom = last ? Math.max(0, virtualizer.getTotalSize() - last.end + headerHeight.current) : virtualizer.getTotalSize();
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            items.map((item, index)=>{
+                const row = rows[item.index];
+                const previous = items[index - 1];
+                const gap = Math.max(0, item.start - (previous?.end ?? headerHeight.current));
+                return row ? /*#__PURE__*/ jsxs(external_react_Fragment, {
+                    children: [
+                        gap > 0 && /*#__PURE__*/ jsx(TableControl.Row, {
+                            className: "leaf-data-table__spacer",
+                            "aria-hidden": "true",
+                            children: /*#__PURE__*/ jsx("td", {
+                                colSpan: colSpan,
+                                style: {
+                                    height: gap
+                                }
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(DataRow, {
+                            row: row,
+                            rowIndex: item.index,
+                            ariaRowIndex: rowIndexes[item.index],
+                            measureRef: virtualizer.measureElement
+                        })
+                    ]
+                }, row.id) : null;
+            }),
+            bottom > 0 && /*#__PURE__*/ jsx(TableControl.Row, {
+                className: "leaf-data-table__spacer",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ jsx("td", {
+                    colSpan: colSpan,
+                    style: {
+                        height: bottom
+                    }
+                })
+            })
+        ]
+    });
+}
+function DataTableContentControl({ className, ...props }) {
+    const config = useDataTable();
+    const { table, caption, tableRef, loading, error, emptyContent, onRetry, selection, resizable, virtual } = config;
+    const t = useText();
+    const format = useFormattedText();
+    const viewport = useRef(null);
+    const element = useRef(null);
+    const [focusedRowId, setFocusedRowId] = useState();
+    const rows = table.getRowModel().rows;
+    const columns = [
+        ...table.getLeftVisibleLeafColumns(),
+        ...table.getCenterVisibleLeafColumns(),
+        ...table.getRightVisibleLeafColumns()
+    ];
+    const headers = table.getHeaderGroups();
+    const expandable = config.expandable;
+    const utilityCount = Number(Boolean(selection)) + Number(expandable) + Number(config.rowReordering);
+    const colSpan = Math.max(1, columns.length + utilityCount);
+    const totalWidth = table.getTotalSize() + 44 * utilityCount;
+    const lastCenter = table.getCenterVisibleLeafColumns().at(-1)?.id;
+    const status = null != error && false !== error ? 'error' : rows.length && columns.length ? null : loading ? 'loading' : 'empty';
+    const expanded = table.getState().expanded;
+    const virtualRows = useMemo(()=>{
+        if (!virtual) return {
+            indexes: [],
+            count: 0
+        };
+        let count = headers.length;
+        const indexes = rows.map((row)=>{
+            const index = ++count;
+            if (expanded && config.renderExpandedRow && row.getIsExpanded() && !row.subRows.length) count++;
+            return index;
+        });
+        return {
+            indexes,
+            count
+        };
+    }, [
+        virtual,
+        rows,
+        headers.length,
+        expanded,
+        config.renderExpandedRow
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        ...props,
+        className: className,
+        children: /*#__PURE__*/ jsxs(TableControl, {
+            ref: (node)=>{
+                assignRef(element, node);
+                assignRef(tableRef, node);
+            },
+            scrollRef: viewport,
+            "aria-label": config.label,
+            "aria-labelledby": config.labelledBy,
+            "aria-busy": loading || void 0,
+            "aria-rowcount": virtual && !status ? virtualRows.count : void 0,
+            size: config.size,
+            bordered: config.bordered,
+            striped: config.striped,
+            stickyHeader: config.stickyHeader,
+            maxHeight: config.maxHeight,
+            minWidth: config.minWidth ?? totalWidth,
+            tableLayout: "fixed",
+            tableStyle: {
+                width: `max(100%, ${totalWidth}px)`
+            },
+            loading: loading && Boolean(rows.length) && 'error' !== status,
+            children: [
+                null != caption && /*#__PURE__*/ jsx(TableControl.Caption, {
+                    children: caption
+                }),
+                /*#__PURE__*/ jsxs("colgroup", {
+                    children: [
+                        config.rowReordering && /*#__PURE__*/ jsx("col", {
+                            style: {
+                                width: 44
+                            }
+                        }),
+                        selection && /*#__PURE__*/ jsx("col", {
+                            style: {
+                                width: 44
+                            }
+                        }),
+                        expandable && /*#__PURE__*/ jsx("col", {
+                            style: {
+                                width: 44
+                            }
+                        }),
+                        columns.map((column)=>/*#__PURE__*/ jsx("col", {
+                                style: {
+                                    width: column.id === lastCenter ? void 0 : column.getSize()
+                                }
+                            }, column.id))
+                    ]
+                }),
+                /*#__PURE__*/ jsx(TableControl.Header, {
+                    children: /*#__PURE__*/ jsx(ReorderItems, {
+                        enabled: Boolean(config.columnReordering),
+                        kind: "column",
+                        ids: config.columnReordering ? columns.map((column)=>column.id) : [],
+                        children: headers.map((group, groupIndex)=>/*#__PURE__*/ jsxs(TableControl.Row, {
+                                "aria-rowindex": virtual ? groupIndex + 1 : void 0,
+                                children: [
+                                    0 === groupIndex && config.rowReordering && /*#__PURE__*/ jsx(TableControl.ColumnHeader, {
+                                        rowSpan: headers.length,
+                                        className: "leaf-data-table__utility",
+                                        children: /*#__PURE__*/ jsx("span", {
+                                            className: "leaf-table__sr-only",
+                                            children: t('dataTable.reorderRows')
+                                        })
+                                    }),
+                                    0 === groupIndex && selection && /*#__PURE__*/ jsx(TableControl.ColumnHeader, {
+                                        rowSpan: headers.length,
+                                        className: "leaf-data-table__utility",
+                                        children: /*#__PURE__*/ jsx(SelectionHeader, {})
+                                    }),
+                                    0 === groupIndex && expandable && /*#__PURE__*/ jsx(TableControl.ColumnHeader, {
+                                        rowSpan: headers.length,
+                                        className: "leaf-data-table__utility",
+                                        children: /*#__PURE__*/ jsx("span", {
+                                            className: "leaf-table__sr-only",
+                                            children: t('dataTable.expandRows')
+                                        })
+                                    }),
+                                    group.headers.map((header)=>{
+                                        const column = header.column;
+                                        const meta = column.columnDef.meta;
+                                        const sorted = column.getIsSorted();
+                                        const canSort = !header.isPlaceholder && !column.columns.length && column.getCanSort();
+                                        const SortIcon = 'asc' === sorted ? ArrowUp : 'desc' === sorted ? ArrowDown : ArrowUpDown;
+                                        const nextSort = column.getNextSortingOrder();
+                                        const sortLabel = 'asc' === nextSort ? t('dataTable.sortAscending') : 'desc' === nextSort ? t('dataTable.sortDescending') : t('dataTable.clearSorting');
+                                        return /*#__PURE__*/ jsxs(ReorderColumnHeader, {
+                                            enabled: Boolean(config.columnReordering && !header.isPlaceholder && !column.columns.length),
+                                            disabled: !config.reorderColumns,
+                                            itemId: column.id,
+                                            itemLabel: columnLabel(column),
+                                            group: column.getIsPinned() || 'center',
+                                            colSpan: header.colSpan,
+                                            scope: header.colSpan > 1 ? 'colgroup' : 'col',
+                                            align: meta?.align,
+                                            className: meta?.headerClassName,
+                                            ...pinProps(column),
+                                            "aria-sort": sorted && 0 === column.getSortIndex() ? 'asc' === sorted ? 'ascending' : 'descending' : void 0,
+                                            children: [
+                                                /*#__PURE__*/ jsxs("div", {
+                                                    className: "leaf-data-table__heading",
+                                                    children: [
+                                                        config.reorderColumns && !header.isPlaceholder && /*#__PURE__*/ jsx(ReorderHandle, {
+                                                            label: format('dataTable.reorderColumn', {
+                                                                label: columnLabel(column)
+                                                            })
+                                                        }),
+                                                        header.isPlaceholder ? null : canSort ? /*#__PURE__*/ jsxs("button", {
+                                                            type: "button",
+                                                            className: "leaf-data-table__sort",
+                                                            "data-sorted": sorted || void 0,
+                                                            "aria-label": `${columnLabel(column)}: ${sortLabel}`,
+                                                            disabled: loading,
+                                                            onClick: column.getToggleSortingHandler(),
+                                                            children: [
+                                                                /*#__PURE__*/ jsx("span", {
+                                                                    children: flexRender(column.columnDef.header, header.getContext())
+                                                                }),
+                                                                /*#__PURE__*/ jsx(SortIcon, {
+                                                                    size: 14,
+                                                                    "aria-hidden": "true"
+                                                                })
+                                                            ]
+                                                        }) : flexRender(column.columnDef.header, header.getContext())
+                                                    ]
+                                                }),
+                                                resizable && !header.isPlaceholder && !column.columns.length && column.getCanResize() && /*#__PURE__*/ jsx(ResizeHandle, {
+                                                    header: header
+                                                })
+                                            ]
+                                        }, header.id);
+                                    })
+                                ]
+                            }, group.id))
+                    })
+                }),
+                /*#__PURE__*/ jsx(TableControl.Body, {
+                    onFocusCapture: virtual ? (event)=>setFocusedRowId(event.target.closest('[data-row-id], [data-detail-row]')?.getAttribute('data-row-id') ?? event.target.closest('[data-detail-row]')?.getAttribute('data-detail-row') ?? void 0) : void 0,
+                    onBlurCapture: virtual ? (event)=>{
+                        if (!event.currentTarget.contains(event.relatedTarget)) setFocusedRowId(void 0);
+                    } : void 0,
+                    children: 'error' === status ? /*#__PURE__*/ jsx(TableControl.Error, {
+                        colSpan: colSpan,
+                        onRetry: onRetry,
+                        children: error
+                    }) : 'loading' === status ? /*#__PURE__*/ jsx(TableControl.Loading, {
+                        colSpan: colSpan
+                    }) : 'empty' === status ? /*#__PURE__*/ jsx(TableControl.Empty, {
+                        colSpan: colSpan,
+                        children: emptyContent
+                    }) : virtual ? /*#__PURE__*/ jsx(VirtualRows, {
+                        rows: rows,
+                        colSpan: colSpan,
+                        headerCount: headers.length,
+                        viewport: viewport,
+                        tableElement: element,
+                        focusedRowId: focusedRowId,
+                        rowIndexes: virtualRows.indexes
+                    }) : /*#__PURE__*/ jsx(ReorderItems, {
+                        enabled: Boolean(config.onRowReorder),
+                        kind: "row",
+                        ids: config.onRowReorder ? rows.map((row)=>row.id) : [],
+                        children: rows.map((row, index)=>/*#__PURE__*/ jsx(DataRow, {
+                                row: row,
+                                rowIndex: index
+                            }, row.id))
+                    })
+                })
+            ]
+        })
+    });
+}
+function DataTablePaginationControl({ className, hasNextPage, ...props }) {
+    const { table, loading, size } = useDataTable();
+    const { pageIndex, pageSize } = table.getState().pagination;
+    const t = useText();
+    const pages = table.getPageCount();
+    if (pages < 0) return /*#__PURE__*/ jsxs("nav", {
+        "aria-label": t('pagination.label'),
+        className: classes('leaf-data-table__pagination', className),
+        children: [
+            /*#__PURE__*/ jsx(ButtonControl, {
+                size: props.size ?? size,
+                variant: props.variant ?? 'outline',
+                disabled: props.disabled || loading || !table.getCanPreviousPage(),
+                onClick: ()=>table.previousPage(),
+                children: t('pagination.previousPage')
+            }),
+            /*#__PURE__*/ jsx("span", {
+                children: pageIndex + 1
+            }),
+            /*#__PURE__*/ jsx(ButtonControl, {
+                size: props.size ?? size,
+                variant: props.variant ?? 'outline',
+                disabled: props.disabled || loading || !(hasNextPage ?? table.getCanNextPage()),
+                onClick: ()=>table.nextPage(),
+                children: t('pagination.nextPage')
+            })
+        ]
+    });
+    const total = table.options.rowCount ?? (table.options.manualPagination && null != table.options.pageCount ? pages * pageSize : table.getRowCount());
+    return /*#__PURE__*/ jsx(PaginationControl, {
+        showSizeChanger: true,
+        size: size,
+        ...props,
+        className: classes('leaf-data-table__pagination', className),
+        total: total,
+        current: pageIndex + 1,
+        pageSize: pageSize,
+        disabled: props.disabled || loading,
+        onChange: (page, nextSize)=>table.setPagination({
+                pageIndex: page - 1,
+                pageSize: nextSize
+            })
+    });
+}
+function ManagedDataTable({ data, columns, rowKey, options, ...props }) {
+    const { direction } = useLeafConfig();
+    const records = useMemo(()=>[
+            ...data
+        ], [
+        data
+    ]);
+    const table = useReactTable({
+        data: records,
+        columns,
+        getCoreRowModel: getCoreRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        getPaginationRowModel: false === props.pagination ? void 0 : getPaginationRowModel(),
+        getExpandedRowModel: getExpandedRowModel(),
+        enableMultiRowSelection: 'single' !== props.selection,
+        getRowCanExpand: (row)=>Boolean(props.renderExpandedRow || row.subRows.length),
+        columnResizeMode: 'onChange',
+        columnResizeDirection: direction,
+        ...options,
+        getRowId: (row, index)=>{
+            const key = 'function' == typeof rowKey ? rowKey(row, index) : row[rowKey];
+            if ('string' != typeof key && 'number' != typeof key) throw new Error('DataTable rowKey must resolve to a stable string or number.');
+            return String(key);
+        }
+    });
+    return /*#__PURE__*/ jsx(DataTableRoot, {
+        ...props,
+        table: table
+    });
+}
+function DataTableComponent(rawProps) {
+    const props = mergeComponentProps(useGenericComponentDefaults('DataTable'), rawProps);
+    return props.table ? /*#__PURE__*/ jsx(DataTableRoot, {
+        ...props
+    }) : /*#__PURE__*/ jsx(ManagedDataTable, {
+        ...props
+    });
+}
+const DataTable = Object.assign(DataTableComponent, {
+    Toolbar: DataTableToolbar,
+    Search: DataTableSearch,
+    ColumnVisibility: DataTableColumnVisibility,
+    Content: DataTableContent,
+    Footer: DataTableFooter,
+    Pagination: DataTablePagination
+});
+function DataTableContent(rawProps) {
+    const props = useComponentProps('DataTableContent', rawProps);
+    return /*#__PURE__*/ jsx(DataTableContentControl, {
+        ...props
+    });
+}
+function DataTablePagination(rawProps) {
+    const props = useComponentProps('DataTablePagination', rawProps);
+    return /*#__PURE__*/ jsx(DataTablePaginationControl, {
+        ...props
+    });
+}
+function DataTableFooter(rawProps) {
+    const props = useComponentProps('DataTableFooter', rawProps);
+    return /*#__PURE__*/ jsx(DataTableFooterControl, {
+        ...props
+    });
+}
+export { DataTable, DataTableColumnVisibility, DataTableContent, DataTableContentControl, DataTableFooter, DataTableFooterControl, DataTablePagination, DataTablePaginationControl, DataTableSearch, DataTableToolbar };
+
+//# sourceMappingURL=tabletanstack.js.map