@wheelhouse/ui 0.2.4 → 0.2.6

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

@@ -0,0 +1,560 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, memo, useCallback, useEffect, useMemo, useState, } from 'react';
+import { useDataGrid } from './data-grid';
+import { flexRender } from '@tanstack/react-table';
+import { cva } from 'class-variance-authority';
+import { Checkbox } from '../checkbox';
+import { Spinner } from '../spinner';
+import { cn } from '../../lib/utils';
+const headerCellSpacingVariants = cva('', {
+    variants: {
+        size: {
+            dense: 'h-8 px-2',
+            default: 'px-3',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+const bodyCellSpacingVariants = cva('', {
+    variants: {
+        size: {
+            dense: 'px-2 py-1.5',
+            default: 'px-3 py-2',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+const footerCellSpacingVariants = cva('', {
+    variants: {
+        size: {
+            dense: 'px-2 py-1.5',
+            default: 'px-3 py-2',
+        },
+    },
+    defaultVariants: {
+        size: 'default',
+    },
+});
+function getPinningStyles(column) {
+    const isPinned = column.getIsPinned();
+    return {
+        left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+        right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+        position: isPinned ? 'sticky' : 'relative',
+        width: column.getSize(),
+        zIndex: isPinned ? 1 : 0,
+    };
+}
+function assignRef(ref, value) {
+    if (!ref)
+        return;
+    if (typeof ref === 'function') {
+        ref(value);
+        return;
+    }
+    ref.current = value;
+}
+function isDataGridTouchEvent(event) {
+    return 'touches' in event;
+}
+function getDataGridResizeEventClientX(event) {
+    if (isDataGridTouchEvent(event)) {
+        return event.touches[0]?.clientX ?? event.changedTouches[0]?.clientX;
+    }
+    return event.clientX;
+}
+function startDataGridColumnResizeOnEnd(event, header, table) {
+    const column = table.getColumn(header.column.id);
+    if (!column || !column.getCanResize())
+        return;
+    if (isDataGridTouchEvent(event) && event.touches.length > 1)
+        return;
+    event.persist?.();
+    const ownerDocument = event.currentTarget.ownerDocument;
+    const previousBodyCursor = ownerDocument.body.style.cursor;
+    const previousDocumentCursor = ownerDocument.documentElement.style.cursor;
+    const startSize = header.getSize();
+    const dragStartClientX = getDataGridResizeEventClientX(event);
+    const headerCell = event.currentTarget.closest('th');
+    const headerRect = headerCell?.getBoundingClientRect();
+    const startOffset = headerRect && Number.isFinite(table.options.columnResizeDirection === 'rtl' ? headerRect.left : headerRect.right)
+        ? table.options.columnResizeDirection === 'rtl'
+            ? headerRect.left
+            : headerRect.right
+        : dragStartClientX;
+    if (typeof dragStartClientX !== 'number' || typeof startOffset !== 'number') {
+        return;
+    }
+    ownerDocument.body.style.cursor = 'col-resize';
+    ownerDocument.documentElement.style.cursor = 'col-resize';
+    const columnSizingStart = header.getLeafHeaders().map((leafHeader) => [leafHeader.column.id, leafHeader.column.getSize()]);
+    const directionMultiplier = table.options.columnResizeDirection === 'rtl' ? -1 : 1;
+    const updateOffset = (clientXPos, commit = false) => {
+        if (typeof clientXPos !== 'number')
+            return;
+        const nextColumnSizing = {};
+        const deltaOffset = (clientXPos - dragStartClientX) * directionMultiplier;
+        const deltaPercentage = Math.max(deltaOffset / startSize, -0.999999);
+        columnSizingStart.forEach(([columnId, headerSize]) => {
+            nextColumnSizing[columnId] = Math.round(Math.max(headerSize + headerSize * deltaPercentage, 0) * 100) / 100;
+        });
+        table.setColumnSizingInfo((old) => ({
+            ...old,
+            startOffset,
+            startSize,
+            deltaOffset,
+            deltaPercentage,
+            columnSizingStart,
+            isResizingColumn: column.id,
+        }));
+        if (commit) {
+            table.setColumnSizing((old) => ({
+                ...old,
+                ...nextColumnSizing,
+            }));
+        }
+    };
+    const endResize = (clientXPos) => {
+        updateOffset(clientXPos, true);
+        table.setColumnSizingInfo((old) => ({
+            ...old,
+            isResizingColumn: false,
+            startOffset: null,
+            startSize: null,
+            deltaOffset: null,
+            deltaPercentage: null,
+            columnSizingStart: [],
+        }));
+        ownerDocument.body.style.cursor = previousBodyCursor;
+        ownerDocument.documentElement.style.cursor = previousDocumentCursor;
+    };
+    const mouseMoveHandler = (moveEvent) => {
+        updateOffset(moveEvent.clientX);
+    };
+    const mouseUpHandler = (upEvent) => {
+        ownerDocument.removeEventListener('mousemove', mouseMoveHandler);
+        ownerDocument.removeEventListener('mouseup', mouseUpHandler);
+        endResize(upEvent.clientX);
+    };
+    const touchMoveHandler = (moveEvent) => {
+        if (moveEvent.cancelable) {
+            moveEvent.preventDefault();
+            moveEvent.stopPropagation();
+        }
+        updateOffset(getDataGridResizeEventClientX(moveEvent));
+    };
+    const touchEndHandler = (endEvent) => {
+        ownerDocument.removeEventListener('touchmove', touchMoveHandler);
+        ownerDocument.removeEventListener('touchend', touchEndHandler);
+        if (endEvent.cancelable) {
+            endEvent.preventDefault();
+            endEvent.stopPropagation();
+        }
+        endResize(getDataGridResizeEventClientX(endEvent));
+    };
+    const passiveIfSupported = { passive: false };
+    if (isDataGridTouchEvent(event)) {
+        ownerDocument.addEventListener('touchmove', touchMoveHandler, passiveIfSupported);
+        ownerDocument.addEventListener('touchend', touchEndHandler, passiveIfSupported);
+    }
+    else {
+        ownerDocument.addEventListener('mousemove', mouseMoveHandler, passiveIfSupported);
+        ownerDocument.addEventListener('mouseup', mouseUpHandler, passiveIfSupported);
+    }
+    table.setColumnSizingInfo((old) => ({
+        ...old,
+        startOffset,
+        startSize,
+        deltaOffset: 0,
+        deltaPercentage: 0,
+        columnSizingStart,
+        isResizingColumn: column.id,
+    }));
+}
+function getDataGridTableRowSections(table, rowsPinnable) {
+    if (!rowsPinnable) {
+        return {
+            topRows: [],
+            centerRows: table.getRowModel().rows,
+            bottomRows: [],
+        };
+    }
+    return {
+        topRows: table.getTopRows(),
+        centerRows: table.getCenterRows(),
+        bottomRows: table.getBottomRows(),
+    };
+}
+function getDataGridTableResolvedRows(table, rowsPinnable) {
+    const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(table, rowsPinnable);
+    const resolvedRows = [];
+    topRows.forEach((row, index) => {
+        resolvedRows.push({
+            row,
+            pinnedBoundary: index === topRows.length - 1 && (centerRows.length > 0 || bottomRows.length > 0) ? 'top' : undefined,
+        });
+    });
+    centerRows.forEach((row) => {
+        resolvedRows.push({ row });
+    });
+    bottomRows.forEach((row, index) => {
+        resolvedRows.push({
+            row,
+            pinnedBoundary: index === 0 && (centerRows.length > 0 || topRows.length > 0) ? 'bottom' : undefined,
+        });
+    });
+    return resolvedRows;
+}
+function DataGridTableFillCol() {
+    const { props } = useDataGrid();
+    if (!props.tableLayout?.columnsResizable)
+        return null;
+    return _jsx("col", { "data-slot": "data-grid-table-fill-col", style: { width: 'var(--data-grid-fill-size, 0px)' } });
+}
+function DataGridTableFillHeadCell() {
+    const { props } = useDataGrid();
+    if (!props.tableLayout?.columnsResizable)
+        return null;
+    return _jsx("th", { "aria-hidden": "true", "data-slot": "data-grid-table-fill-head-cell", style: { width: 'var(--data-grid-fill-size, 0px)' }, className: "p-0" });
+}
+function DataGridTableFillBodyCell() {
+    const { props } = useDataGrid();
+    if (!props.tableLayout?.columnsResizable)
+        return null;
+    return _jsx("td", { "aria-hidden": "true", "data-slot": "data-grid-table-fill-body-cell", style: { width: 'var(--data-grid-fill-size, 0px)' }, className: "p-0" });
+}
+function DataGridTableFillFootCell() {
+    const { props } = useDataGrid();
+    if (!props.tableLayout?.columnsResizable)
+        return null;
+    return _jsx("td", { "aria-hidden": "true", "data-slot": "data-grid-table-fill-foot-cell", style: { width: 'var(--data-grid-fill-size, 0px)' }, className: "border-t p-0" });
+}
+function DataGridTableBase({ children }) {
+    const { props, table } = useDataGrid();
+    const visibleColumns = table.getVisibleLeafColumns();
+    /**
+     * Compute column widths as CSS custom properties once upfront (memoized).
+     * Cells reference these via calc(var(--col-X-size) * 1px) so the browser
+     * handles width propagation without per-cell getSize() calls or React
+     * re-renders of the body.
+     */
+    const columnSizeVars = useMemo(() => {
+        if (!props.tableLayout?.columnsResizable)
+            return undefined;
+        const headers = table.getFlatHeaders();
+        const colSizes = {};
+        for (let i = 0; i < headers.length; i++) {
+            const header = headers[i];
+            colSizes[`--header-${header.id}-size`] = header.getSize();
+            colSizes[`--col-${header.column.id}-size`] = header.column.getSize();
+        }
+        return colSizes;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        props.tableLayout?.columnsResizable,
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        table.getState().columnSizing,
+    ]);
+    return (_jsxs("table", { "data-slot": "data-grid-table", className: cn('caption-bottom text-left align-middle text-sm font-normal text-foreground rtl:text-right', props.tableLayout?.columnsResizable ? 'min-w-0' : 'w-full min-w-full', props.tableLayout?.width === 'auto' ? 'table-auto' : 'table-fixed', !props.tableLayout?.columnsResizable && '', !props.tableLayout?.columnsDraggable && 'border-separate border-spacing-0', props.tableClassNames?.base), style: props.tableLayout?.columnsResizable
+            ? {
+                ...columnSizeVars,
+                width: `calc(${table.getTotalSize()}px + var(--data-grid-fill-size, 0px))`,
+            }
+            : undefined, children: [_jsxs("colgroup", { children: [visibleColumns.map((column) => (_jsx("col", { style: props.tableLayout?.columnsResizable
+                            ? { width: `calc(var(--col-${column.id}-size) * 1px)` }
+                            : props.tableLayout?.width === 'fixed'
+                                ? { width: column.getSize() }
+                                : undefined }, column.id))), _jsx(DataGridTableFillCol, {})] }), children] }));
+}
+function DataGridTableViewport({ children, className, viewportRef, style, }) {
+    const { props, table } = useDataGrid();
+    const [viewportElement, setViewportElement] = useState(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    const handleViewportRef = useCallback((node) => {
+        setViewportElement(node);
+        assignRef(viewportRef, node);
+    }, [viewportRef]);
+    const fillWidth = props.tableLayout?.columnsResizable && containerWidth > 0 ? Math.max(0, containerWidth - table.getTotalSize()) : 0;
+    useEffect(() => {
+        let cancelled = false;
+        const scheduleWidthUpdate = (fn) => {
+            queueMicrotask(() => {
+                if (!cancelled) {
+                    fn();
+                }
+            });
+        };
+        if (!viewportElement || !props.tableLayout?.columnsResizable) {
+            scheduleWidthUpdate(() => setContainerWidth(0));
+            return () => {
+                cancelled = true;
+            };
+        }
+        const scrollViewport = viewportElement.closest('[data-slot="scroll-area-viewport"]') ?? viewportElement.parentElement;
+        const measurementTarget = scrollViewport ?? viewportElement;
+        const syncContainerWidth = () => {
+            setContainerWidth(measurementTarget.clientWidth);
+        };
+        scheduleWidthUpdate(syncContainerWidth);
+        if (typeof ResizeObserver === 'undefined') {
+            return () => {
+                cancelled = true;
+            };
+        }
+        const observer = new ResizeObserver(() => {
+            if (!cancelled) {
+                syncContainerWidth();
+            }
+        });
+        observer.observe(measurementTarget);
+        return () => {
+            cancelled = true;
+            observer.disconnect();
+        };
+    }, [props.tableLayout?.columnsResizable, viewportElement]);
+    return (_jsxs("div", { "data-slot": "data-grid-table-viewport", ref: handleViewportRef, className: cn('relative min-w-full align-top', className), style: {
+            ...(props.tableLayout?.columnsResizable
+                ? {
+                    width: `calc(${table.getTotalSize()}px + var(--data-grid-fill-size, 0px))`,
+                    ['--data-grid-fill-size']: `${fillWidth}px`,
+                }
+                : undefined),
+            ...style,
+        }, children: [children, _jsx(DataGridTableResizeIndicator, { viewportElement: viewportElement })] }));
+}
+function DataGridTableHead({ children }) {
+    const { props } = useDataGrid();
+    return _jsx("thead", { className: cn(props.tableClassNames?.header, props.tableLayout?.headerSticky && props.tableClassNames?.headerSticky), children: children });
+}
+function DataGridTableHeadRow({ children, headerGroup }) {
+    const { props } = useDataGrid();
+    return (_jsxs("tr", { className: cn('bg-muted/40', props.tableLayout?.headerBorder && '[&>th]:border-b', props.tableLayout?.cellBorder && '*:last:border-e-0', props.tableLayout?.stripped && 'bg-transparent', props.tableLayout?.headerBackground === false && 'bg-transparent', props.tableClassNames?.headerRow), children: [children, _jsx(DataGridTableFillHeadCell, {})] }, headerGroup.id));
+}
+function DataGridTableHeadRowCell({ children, header, dndRef, dndStyle, }) {
+    const { props } = useDataGrid();
+    const { column } = header;
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right');
+    const isLastVisibleColumn = column.getIndex() === header.getContext().table.getVisibleLeafColumns().length - 1;
+    const headerCellSpacing = headerCellSpacingVariants({
+        size: props.tableLayout?.dense ? 'dense' : 'default',
+    });
+    return (_jsx("th", { ref: dndRef, style: {
+            ...(props.tableLayout?.width === 'fixed' &&
+                !props.tableLayout?.columnsResizable && {
+                width: header.getSize(),
+            }),
+            ...(props.tableLayout?.columnsPinnable && column.getCanPin() && getPinningStyles(column)),
+            ...(props.tableLayout?.columnsResizable && {
+                width: `calc(var(--header-${header.id}-size) * 1px)`,
+            }),
+            ...(dndStyle ? dndStyle : null),
+        }, "data-pinned": isPinned || undefined, "data-last-col": isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined, className: cn('relative h-9 text-left align-middle font-normal text-secondary-foreground/80 rtl:text-right [&:has([role=checkbox])]:pe-0', headerCellSpacing, props.tableLayout?.cellBorder && 'border-e', props.tableLayout?.columnsResizable && column.getCanResize() && 'overflow-visible', props.tableLayout?.columnsResizable && column.getCanResize() && isLastVisibleColumn && 'pe-8', props.tableLayout?.columnsPinnable &&
+            column.getCanPin() &&
+            'data-pinned:bg-muted/90 data-pinned:backdrop-blur-xs [&:not([data-pinned]):has(+[data-pinned])_div.cursor-col-resize:last-child]:opacity-0 [&[data-last-col=left]_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right]:last-child_div.cursor-col-resize:last-child]:opacity-0 [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border', header.column.columnDef.meta?.headerClassName, column.getIndex() === 0 || column.getIndex() === header.headerGroup.headers.length - 1 ? props.tableClassNames?.edgeCell : ''), children: children }, header.id));
+}
+function DataGridTableHeadRowCellResize({ header }) {
+    const { props, table } = useDataGrid();
+    const { column } = header;
+    const isLastVisibleColumn = column.getIndex() === header.getContext().table.getVisibleLeafColumns().length - 1;
+    const isResizeModeOnEnd = (props.tableLayout?.columnsResizeMode ?? table.options.columnResizeMode) === 'onEnd';
+    const handleMouseDown = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (isResizeModeOnEnd) {
+            startDataGridColumnResizeOnEnd(event, header, table);
+            return;
+        }
+        header.getResizeHandler()(event);
+    };
+    const handleTouchStart = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (isResizeModeOnEnd) {
+            startDataGridColumnResizeOnEnd(event, header, table);
+            return;
+        }
+        header.getResizeHandler()(event);
+    };
+    return (_jsx("div", { onDoubleClick: () => column.resetSize(),
+        onMouseDown: handleMouseDown,
+        onTouchStart: handleTouchStart,
+        className: cn('user-select-none absolute top-0 z-10 flex h-full cursor-col-resize touch-none', isLastVisibleColumn
+            ? 'end-0 w-5 justify-end before:hidden'
+            : '-end-2 w-5 justify-center before:absolute before:inset-y-0 before:w-px before:-translate-x-px before:bg-border', column.getIsResizing() &&
+            (isResizeModeOnEnd
+                ? 'opacity-100'
+                : isLastVisibleColumn
+                    ? 'opacity-100 before:absolute before:inset-y-0 before:end-0 before:block before:w-0.5 before:bg-primary'
+                    : 'opacity-100 before:block before:w-0.5 before:bg-primary')) }));
+}
+function DataGridTableResizeIndicator({ viewportElement }) {
+    const { props, table } = useDataGrid();
+    const columnSizingInfo = table.getState().columnSizingInfo;
+    const resizingColumnId = columnSizingInfo.isResizingColumn;
+    const resizeMode = props.tableLayout?.columnsResizeMode ?? table.options.columnResizeMode;
+    if (!props.tableLayout?.columnsResizable || resizeMode !== 'onEnd' || !resizingColumnId) {
+        return null;
+    }
+    const resizingHeader = table.getFlatHeaders().find((header) => header.column.id === resizingColumnId || header.id === resizingColumnId);
+    if (!resizingHeader)
+        return null;
+    const deltaOffset = columnSizingInfo.deltaOffset ?? 0;
+    const headerHeight = viewportElement?.querySelector('[data-slot="data-grid-table"] thead')?.getBoundingClientRect().height ?? 0;
+    const indicatorLeft = typeof columnSizingInfo.startOffset === 'number' && viewportElement
+        ? columnSizingInfo.startOffset - viewportElement.getBoundingClientRect().left
+        : resizingHeader.getStart() + resizingHeader.getSize();
+    return (_jsxs("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-y-0 z-20", style: {
+            left: indicatorLeft,
+            transform: `translateX(${deltaOffset}px)`,
+        }, children: [_jsx("div", { className: "absolute inset-y-0 left-0 w-px -translate-x-1/2 bg-primary/85" }), _jsx("div", { className: "absolute top-0 left-0 -translate-x-1/2 rounded-b-sm bg-primary shadow-xs", style: {
+                    width: 5,
+                    height: Math.max(headerHeight, 6),
+                } })] }));
+}
+function DataGridTableRowSpacer() {
+    return _jsx("tbody", { "aria-hidden": "true", className: "h-2" });
+}
+function DataGridTableBody({ children }) {
+    const { props } = useDataGrid();
+    return (_jsx("tbody", { className: cn('[&_tr:last-child]:border-0', props.tableLayout?.rowRounded && '[&_td:first-child]:rounded-l-lg', props.tableLayout?.rowRounded && '[&_td:last-child]:rounded-r-lg', props.tableClassNames?.body), children: children }));
+}
+function DataGridTableFoot({ children }) {
+    const { props } = useDataGrid();
+    return _jsx("tfoot", { className: cn('border-t', props.tableClassNames?.footer), children: children });
+}
+function DataGridTableFootRow({ children }) {
+    const { props } = useDataGrid();
+    return (_jsxs("tr", { className: cn('bg-muted/40 dark:bg-background', props.tableLayout?.cellBorder && '*:last:border-e-0'), children: [children, _jsx(DataGridTableFillFootCell, {})] }));
+}
+function DataGridTableFootRowCell({ children, colSpan, className }) {
+    const { props } = useDataGrid();
+    const spacing = footerCellSpacingVariants({
+        size: props.tableLayout?.dense ? 'dense' : 'default',
+    });
+    return (_jsx("td", { colSpan: colSpan, className: cn('border-t align-middle font-medium text-secondary-foreground/80', spacing, props.tableLayout?.cellBorder && 'border-e', className), children: children }));
+}
+function DataGridTableBodyRowSkeleton({ children }) {
+    const { table, props } = useDataGrid();
+    return (_jsxs("tr", { className: cn('hover:bg-muted/40 data-[state=selected]:bg-muted/50', props.onRowClick && 'cursor-pointer', !props.tableLayout?.stripped && props.tableLayout?.rowBorder && 'border-b border-border [&:not(:last-child)>td]:border-b', props.tableLayout?.cellBorder && '*:last:border-e-0', props.tableLayout?.stripped && 'odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted', table.options.enableRowSelection && '*:first:relative', props.tableClassNames?.bodyRow), children: [children, _jsx(DataGridTableFillBodyCell, {})] }));
+}
+function DataGridTableBodyRowSkeletonCell({ children, column }) {
+    const { props, table } = useDataGrid();
+    const bodyCellSpacing = bodyCellSpacingVariants({
+        size: props.tableLayout?.dense ? 'dense' : 'default',
+    });
+    return (_jsx("td", { style: props.tableLayout?.columnsResizable ? { width: `calc(var(--col-${column.id}-size) * 1px)` } : undefined, className: cn('align-middle', bodyCellSpacing, props.tableLayout?.cellBorder && 'border-e', props.tableLayout?.columnsResizable && column.getCanResize() && 'truncate', column.columnDef.meta?.cellClassName, props.tableLayout?.columnsPinnable &&
+            column.getCanPin() &&
+            'data-pinned:backdrop-blur-xs" data-pinned:bg-background/90 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border', column.getIndex() === 0 || column.getIndex() === table.getVisibleFlatColumns().length - 1 ? props.tableClassNames?.edgeCell : ''), children: children }));
+}
+function DataGridTableBodyRow({ children, row, pinnedBoundary, rowRef, dndRef, dndStyle, }) {
+    const { props, table } = useDataGrid();
+    const isRowPinned = row.getIsPinned();
+    return (_jsxs("tr", { ref: (node) => {
+            assignRef(rowRef, node);
+            assignRef(dndRef, node);
+        }, style: { ...(dndStyle ? dndStyle : null) }, "data-state": table.options.enableRowSelection && row.getIsSelected() ? 'selected' : undefined, "data-row-pinned": isRowPinned || undefined, "data-row-pinned-boundary": pinnedBoundary, onClick: () => props.onRowClick && props.onRowClick(row.original), className: cn('hover:bg-muted/40 data-[state=selected]:bg-muted/50', props.onRowClick && 'cursor-pointer', !props.tableLayout?.stripped && props.tableLayout?.rowBorder && 'border-b border-border [&:not(:last-child)>td]:border-b', props.tableLayout?.cellBorder && '*:last:border-e-0', props.tableLayout?.stripped && 'odd:bg-muted/90 hover:bg-transparent odd:hover:bg-muted', table.options.enableRowSelection && '*:first:relative', props.tableLayout?.rowsPinnable && isRowPinned && 'bg-muted/30 hover:bg-muted/50', pinnedBoundary === 'top' && '[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)]', pinnedBoundary === 'bottom' && '[&>td]:shadow-[0_2px_0_rgba(0,0,0,0.03)]', props.tableClassNames?.bodyRow), children: [children, _jsx(DataGridTableFillBodyCell, {})] }));
+}
+function DataGridTableBodyRowExpandded({ row }) {
+    const { props, table } = useDataGrid();
+    return (_jsx("tr", { className: cn(props.tableLayout?.rowBorder && '[&:not(:last-child)>td]:border-b'), children: _jsx("td", { colSpan: row.getVisibleCells().length + (props.tableLayout?.columnsResizable ? 1 : 0), children: table
+                .getAllColumns()
+                .find((column) => column.columnDef.meta?.expandedContent)
+                ?.columnDef.meta?.expandedContent?.(row.original) }) }));
+}
+function DataGridTableBodyRowCell({ children, cell, dndRef, dndStyle, }) {
+    const { props } = useDataGrid();
+    const { column, row } = cell;
+    const isPinned = column.getIsPinned();
+    const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left');
+    const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right');
+    const bodyCellSpacing = bodyCellSpacingVariants({
+        size: props.tableLayout?.dense ? 'dense' : 'default',
+    });
+    return (_jsx("td", { ref: dndRef, ...(props.tableLayout?.columnsDraggable && !isPinned ? { cell } : {}), style: {
+            ...(props.tableLayout?.columnsPinnable && column.getCanPin() && getPinningStyles(column)),
+            ...(props.tableLayout?.columnsResizable && {
+                width: `calc(var(--col-${column.id}-size) * 1px)`,
+            }),
+            ...(dndStyle ? dndStyle : null),
+        }, "data-pinned": isPinned || undefined, "data-last-col": isLastLeftPinned ? 'left' : isFirstRightPinned ? 'right' : undefined, className: cn('align-middle', bodyCellSpacing, props.tableLayout?.cellBorder && 'border-e', props.tableLayout?.columnsResizable && column.getCanResize() && 'truncate', cell.column.columnDef.meta?.cellClassName, props.tableLayout?.columnsPinnable &&
+            column.getCanPin() &&
+            'data-pinned:backdrop-blur-xs" data-pinned:bg-background/90 [&[data-pinned=left][data-last-col=left]]:border-e! [&[data-pinned=right][data-last-col=right]]:border-s! [&[data-pinned][data-last-col]]:border-border', column.getIndex() === 0 || column.getIndex() === row.getVisibleCells().length - 1 ? props.tableClassNames?.edgeCell : ''), children: children }, cell.id));
+}
+function DataGridTableRenderedRow({ row, pinnedBoundary, rowRef, }) {
+    return (_jsxs(Fragment, { children: [_jsx(DataGridTableBodyRow, { row: row, pinnedBoundary: pinnedBoundary, rowRef: rowRef, children: row.getVisibleCells().map((cell) => (_jsx(DataGridTableBodyRowCell, { cell: cell, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }), row.getIsExpanded() && _jsx(DataGridTableBodyRowExpandded, { row: row })] }));
+}
+function DataGridTableEmpty() {
+    const { table, props } = useDataGrid();
+    const visibleColumnCount = table.getVisibleLeafColumns().length + (props.tableLayout?.columnsResizable ? 1 : 0);
+    return (_jsx("tr", { children: _jsx("td", { colSpan: Math.max(visibleColumnCount, 1), className: "py-6 text-center text-sm text-muted-foreground", children: props.emptyMessage || 'No data available' }) }));
+}
+function DataGridTableLoader() {
+    const { props } = useDataGrid();
+    return (_jsx("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", children: _jsxs("div", { className: "flex items-center gap-2 rounded-lg border bg-card px-4 py-2 text-sm leading-none font-medium text-muted-foreground", children: [_jsx(Spinner, { className: "size-5 opacity-60" }), props.loadingMessage || 'Loading...'] }) }));
+}
+function DataGridTableRowPin({ row }) {
+    const isPinned = row.getIsPinned();
+    return (_jsx("button", { type: "button", "aria-label": isPinned ? 'Unpin row' : 'Pin row', onClick: () => {
+            if (isPinned) {
+                row.pin(false);
+            }
+            else {
+                row.pin('top');
+            }
+        }, className: cn('inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground', isPinned && 'text-primary hover:text-primary/80'), children: isPinned ? (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", stroke: "none", children: _jsx("path", { d: "M16 2l4.585 4.586-2.122 2.121L17.05 7.293l-3.535 3.536 1.413 5.658-2.12 2.121-4.244-4.243L4.322 18.6l-1.414-1.41 4.242-4.244-4.243-4.243 2.122-2.121 5.656 1.414 3.536-3.536-1.414-1.414z" }) })) : (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "12", y1: "17", x2: "12", y2: "22" }), _jsx("path", { d: "M5 17h14v-1.76a2 2 0 00-1.11-1.79l-1.78-.9A2 2 0 0115 10.76V6h1a2 2 0 000-4H8a2 2 0 000 4h1v4.76a2 2 0 01-1.11 1.79l-1.78.9A2 2 0 005 15.24z" })] })) }));
+}
+function DataGridTableRowSelect({ row }) {
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: cn('absolute inset-s-0 top-0 bottom-0 hidden w-[2px] bg-primary', row.getIsSelected() && 'block') }), _jsx(Checkbox, { checked: row.getIsSelected(), onCheckedChange: (value) => row.toggleSelected(!!value), "aria-label": "Select row", className: "align-[inherit]" })] }));
+}
+function DataGridTableRowSelectAll() {
+    const { table, recordCount, isLoading } = useDataGrid();
+    const isAllSelected = table.getIsAllPageRowsSelected();
+    const isSomeSelected = table.getIsSomePageRowsSelected();
+    return (_jsx(Checkbox, { checked: isAllSelected, indeterminate: isSomeSelected && !isAllSelected, disabled: isLoading || recordCount === 0, onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value), "aria-label": "Select all", className: "align-[inherit]" }));
+}
+function DataGridTableBodyRows({ table }) {
+    const { isLoading, props } = useDataGrid();
+    const pagination = table.getState().pagination;
+    if (isLoading && props.loadingMode === 'skeleton' && pagination?.pageSize) {
+        return (_jsx(_Fragment, { children: Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (_jsx(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => (_jsx(DataGridTableBodyRowSkeletonCell, { column: column, children: column.columnDef.meta?.skeleton }, colIndex))) }, rowIndex))) }));
+    }
+    if (isLoading && props.loadingMode === 'spinner') {
+        return (_jsx("tr", { children: _jsx("td", { colSpan: table.getVisibleFlatColumns().length, className: "p-8", children: _jsxs("div", { className: "flex items-center justify-center", children: [_jsxs("svg", { className: "mr-3 -ml-1 h-5 w-5 animate-spin text-muted-foreground", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })] }), props.loadingMessage || 'Loading...'] }) }) }));
+    }
+    const resolvedRows = getDataGridTableResolvedRows(table, props.tableLayout?.rowsPinnable);
+    if (!resolvedRows.length)
+        return _jsx(DataGridTableEmpty, {});
+    return (_jsx(_Fragment, { children: resolvedRows.map(({ row, pinnedBoundary }) => (_jsx(DataGridTableRenderedRow, { row: row, pinnedBoundary: pinnedBoundary }, row.id))) }));
+}
+/**
+ * Memoized body rows: skip re-renders during active column resize.
+ * Column widths update via CSS variables on the <table> element,
+ * so the browser handles width changes without React re-renders.
+ */
+const MemoizedDataGridTableBodyRows = memo(DataGridTableBodyRows, (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn);
+function DataGridTableHeader() {
+    const { table, props } = useDataGrid();
+    return (_jsx(DataGridTableViewport, { children: _jsx(DataGridTableBase, { children: _jsx(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup, index) => {
+                    return (_jsx(DataGridTableHeadRow, { headerGroup: headerGroup, children: headerGroup.headers.map((header, index) => {
+                            const { column } = header;
+                            return (_jsxs(DataGridTableHeadRowCell, { header: header, children: [header.isPlaceholder ? null : props.tableLayout?.columnsResizable && column.getCanResize() ? (_jsx("div", { className: "truncate", children: flexRender(header.column.columnDef.header, header.getContext()) })) : (flexRender(header.column.columnDef.header, header.getContext())), props.tableLayout?.columnsResizable && column.getCanResize() && _jsx(DataGridTableHeadRowCellResize, { header: header })] }, index));
+                        }) }, index));
+                }) }) }) }));
+}
+function DataGridTable({ footerContent, renderHeader = true }) {
+    const { table, props } = useDataGrid();
+    return (_jsx(DataGridTableViewport, { children: _jsxs(DataGridTableBase, { children: [renderHeader && (_jsx(DataGridTableHead, { children: table.getHeaderGroups().map((headerGroup, index) => {
+                        return (_jsx(DataGridTableHeadRow, { headerGroup: headerGroup, children: headerGroup.headers.map((header, index) => {
+                                const { column } = header;
+                                return (_jsxs(DataGridTableHeadRowCell, { header: header, children: [header.isPlaceholder ? null : props.tableLayout?.columnsResizable && column.getCanResize() ? (_jsx("div", { className: "truncate", children: flexRender(header.column.columnDef.header, header.getContext()) })) : (flexRender(header.column.columnDef.header, header.getContext())), props.tableLayout?.columnsResizable && column.getCanResize() && (_jsx(DataGridTableHeadRowCellResize, { header: header }))] }, index));
+                            }) }, index));
+                    }) })), renderHeader && (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && _jsx(DataGridTableRowSpacer, {}), _jsx(DataGridTableBody, { children: _jsx(MemoizedDataGridTableBodyRows, { table: table }) }), footerContent && _jsx(DataGridTableFoot, { children: footerContent })] }) }));
+}
+export { DataGridTable, DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowExpandded, DataGridTableRenderedRow, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableFoot, DataGridTableFootRow, DataGridTableFootRowCell, DataGridTableHeader, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableLoader, DataGridTableRowPin, DataGridTableRowSelect, DataGridTableRowSelectAll, DataGridTableRowSpacer, DataGridTableViewport, getDataGridTableResolvedRows, getDataGridTableRowSections, };

package/dist/components/data-grid/data-grid.d.ts

@@ -0,0 +1,94 @@
+import { type ReactNode } from 'react';
+import { type Column, type ColumnFiltersState, type RowData, type SortingState, type Table } from '@tanstack/react-table';
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        headerTitle?: string;
+        headerClassName?: string;
+        cellClassName?: string;
+        skeleton?: ReactNode;
+        expandedContent?: (row: TData) => ReactNode;
+    }
+}
+/** Label for headers / column visibility: `meta.headerTitle`, string `columnDef.header`, or `column.id`. */
+export declare function getColumnHeaderLabel<TData, TValue>(column: Column<TData, TValue>): string;
+export type DataGridApiFetchParams = {
+    pageIndex: number;
+    pageSize: number;
+    sorting?: SortingState;
+    filters?: ColumnFiltersState;
+    searchQuery?: string;
+};
+export type DataGridApiResponse<T> = {
+    data: T[];
+    empty: boolean;
+    pagination: {
+        total: number;
+        page: number;
+    };
+};
+export interface DataGridContextProps<TData extends object> {
+    props: DataGridProps<TData>;
+    table: Table<TData>;
+    recordCount: number;
+    isLoading: boolean;
+}
+export type DataGridRequestParams = {
+    pageIndex: number;
+    pageSize: number;
+    sorting?: SortingState;
+    columnFilters?: ColumnFiltersState;
+};
+export interface DataGridProps<TData extends object> {
+    className?: string;
+    table?: Table<TData>;
+    recordCount: number;
+    children?: ReactNode;
+    onRowClick?: (row: TData) => void;
+    isLoading?: boolean;
+    loadingMode?: 'skeleton' | 'spinner';
+    loadingMessage?: ReactNode | string;
+    fetchingMoreMessage?: ReactNode | string;
+    allRowsLoadedMessage?: ReactNode | string;
+    emptyMessage?: ReactNode | string;
+    tableLayout?: {
+        dense?: boolean;
+        cellBorder?: boolean;
+        rowBorder?: boolean;
+        rowRounded?: boolean;
+        stripped?: boolean;
+        headerBackground?: boolean;
+        headerBorder?: boolean;
+        headerSticky?: boolean;
+        width?: 'auto' | 'fixed';
+        columnsVisibility?: boolean;
+        columnsResizable?: boolean;
+        columnsResizeMode?: 'onChange' | 'onEnd';
+        columnsPinnable?: boolean;
+        columnsMovable?: boolean;
+        columnsDraggable?: boolean;
+        rowsDraggable?: boolean;
+        rowsPinnable?: boolean;
+    };
+    tableClassNames?: {
+        base?: string;
+        header?: string;
+        headerRow?: string;
+        headerSticky?: string;
+        body?: string;
+        bodyRow?: string;
+        footer?: string;
+        edgeCell?: string;
+    };
+}
+declare function useDataGrid(): DataGridContextProps<any>;
+declare function DataGridProvider<TData extends object>({ children, table, ...props }: DataGridProps<TData> & {
+    table: Table<TData>;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGrid<TData extends object>({ children, table, ...props }: DataGridProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare function DataGridContainer({ children, className, border }: {
+    children: ReactNode;
+    className?: string;
+    border?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { useDataGrid, DataGridProvider, DataGrid, DataGridContainer };
+//# sourceMappingURL=data-grid.d.ts.map