@wheelhouse/ui 0.2.4 → 0.2.6

package/dist/components/data-grid/data-grid-column-header.js

@@ -0,0 +1,137 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+import { getColumnHeaderLabel, useDataGrid } from './data-grid';
+import { Button } from '../button';
+import { cn } from '../../lib/utils';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from '../dropdown-menu';
+import { ArrowDownIcon, ArrowLeftIcon, ArrowLeftToLineIcon, ArrowRightIcon, ArrowRightToLineIcon, ArrowUpIcon, CheckIcon, ChevronsUpDownIcon, PinOffIcon, Settings2Icon, } from 'lucide-react';
+function DataGridColumnHeaderInner({ column, title, icon, className, filter, visibility = false }) {
+    const { isLoading, table, props, recordCount } = useDataGrid();
+    const resolvedTitle = title ?? getColumnHeaderLabel(column);
+    const columnOrder = table.getState().columnOrder;
+    const columnVisibilityKey = JSON.stringify(table.getState().columnVisibility);
+    const isSorted = column.getIsSorted();
+    const isPinned = column.getIsPinned();
+    const canSort = column.getCanSort();
+    const canPin = column.getCanPin();
+    const canResize = column.getCanResize();
+    const columnIndex = columnOrder.indexOf(column.id);
+    const canMoveLeft = columnIndex > 0;
+    const canMoveRight = columnIndex < columnOrder.length - 1;
+    const handleSort = () => {
+        if (isSorted === 'asc') {
+            column.toggleSorting(true);
+        }
+        else if (isSorted === 'desc') {
+            column.clearSorting();
+        }
+        else {
+            column.toggleSorting(false);
+        }
+    };
+    const headerLabelClassName = cn('inline-flex h-full items-center gap-1.5 text-[0.8125rem] leading-[calc(1.125/0.8125)] font-normal text-secondary-foreground/80 [&_svg]:size-3.5 [&_svg]:opacity-60', className);
+    const headerButtonClassName = cn('-ms-2 h-6 rounded-lg px-2 font-normal text-secondary-foreground/80 hover:bg-secondary hover:text-foreground data-[state=open]:bg-secondary data-[state=open]:text-foreground', className);
+    const sortIcon = canSort &&
+        (isSorted === 'desc' ? (_jsx(ArrowDownIcon, { className: "size-3.25" })) : isSorted === 'asc' ? (_jsx(ArrowUpIcon, { className: "size-3.25" })) : (_jsx(ChevronsUpDownIcon, { className: "mt-px size-3.25" })));
+    const hasControls = props.tableLayout?.columnsMovable || (props.tableLayout?.columnsVisibility && visibility) || (props.tableLayout?.columnsPinnable && canPin) || filter;
+    const menuItems = useMemo(() => {
+        const items = [];
+        let hasPreviousSection = false;
+        // Filter section
+        if (filter) {
+            items.push(_jsx(DropdownMenuGroup, { children: _jsx(DropdownMenuLabel, { children: filter }, "filter") }, "group-filter"));
+            hasPreviousSection = true;
+        }
+        // Sort section
+        if (canSort) {
+            if (hasPreviousSection) {
+                items.push(_jsx(DropdownMenuSeparator, {}, "sep-sort"));
+            }
+            items.push(_jsxs(DropdownMenuItem, { onClick: () => {
+                    if (isSorted === 'asc') {
+                        column.clearSorting();
+                    }
+                    else {
+                        column.toggleSorting(false);
+                    }
+                }, disabled: !canSort, children: [_jsx(ArrowUpIcon, { className: "size-3.5!" }), _jsx("span", { className: "grow", children: "Asc" }), isSorted === 'asc' && _jsx(CheckIcon, { className: "size-4 text-primary opacity-100!" })] }, "sort-asc"), _jsxs(DropdownMenuItem, { onClick: () => {
+                    if (isSorted === 'desc') {
+                        column.clearSorting();
+                    }
+                    else {
+                        column.toggleSorting(true);
+                    }
+                }, disabled: !canSort, children: [_jsx(ArrowDownIcon, { className: "size-3.5!" }), _jsx("span", { className: "grow", children: "Desc" }), isSorted === 'desc' && _jsx(CheckIcon, { className: "size-4 text-primary opacity-100!" })] }, "sort-desc"));
+            hasPreviousSection = true;
+        }
+        // Pin section
+        if (props.tableLayout?.columnsPinnable && canPin) {
+            if (hasPreviousSection) {
+                items.push(_jsx(DropdownMenuSeparator, {}, "sep-pin"));
+            }
+            items.push(_jsxs(DropdownMenuItem, { onClick: () => column.pin(isPinned === 'left' ? false : 'left'), children: [_jsx(ArrowLeftToLineIcon, { className: "size-3.5!", "aria-hidden": "true" }), _jsx("span", { className: "grow", children: "Pin to left" }), isPinned === 'left' && _jsx(CheckIcon, { className: "size-4 text-primary opacity-100!" })] }, "pin-left"), _jsxs(DropdownMenuItem, { onClick: () => column.pin(isPinned === 'right' ? false : 'right'), children: [_jsx(ArrowRightToLineIcon, { className: "size-3.5!", "aria-hidden": "true" }), _jsx("span", { className: "grow", children: "Pin to right" }), isPinned === 'right' && _jsx(CheckIcon, { className: "size-4 text-primary opacity-100!" })] }, "pin-right"));
+            hasPreviousSection = true;
+        }
+        // Move section
+        if (props.tableLayout?.columnsMovable) {
+            if (hasPreviousSection) {
+                items.push(_jsx(DropdownMenuSeparator, {}, "sep-move"));
+            }
+            items.push(_jsxs(DropdownMenuItem, { onClick: () => {
+                    if (columnIndex > 0) {
+                        const newOrder = [...columnOrder];
+                        const [movedColumn] = newOrder.splice(columnIndex, 1);
+                        newOrder.splice(columnIndex - 1, 0, movedColumn);
+                        table.setColumnOrder(newOrder);
+                    }
+                }, disabled: !canMoveLeft || isPinned !== false, children: [_jsx(ArrowLeftIcon, { className: "size-3.5!", "aria-hidden": "true" }), _jsx("span", { children: "Move to Left" })] }, "move-left"), _jsxs(DropdownMenuItem, { onClick: () => {
+                    if (columnIndex < columnOrder.length - 1) {
+                        const newOrder = [...columnOrder];
+                        const [movedColumn] = newOrder.splice(columnIndex, 1);
+                        newOrder.splice(columnIndex + 1, 0, movedColumn);
+                        table.setColumnOrder(newOrder);
+                    }
+                }, disabled: !canMoveRight || isPinned !== false, children: [_jsx(ArrowRightIcon, { className: "size-3.5!", "aria-hidden": "true" }), _jsx("span", { children: "Move to Right" })] }, "move-right"));
+            hasPreviousSection = true;
+        }
+        // Visibility section
+        if (props.tableLayout?.columnsVisibility && visibility) {
+            if (hasPreviousSection) {
+                items.push(_jsx(DropdownMenuSeparator, {}, "sep-visibility"));
+            }
+            items.push(_jsxs(DropdownMenuSub, { children: [_jsxs(DropdownMenuSubTrigger, { children: [_jsx(Settings2Icon, { className: "size-3.5!" }), _jsx("span", { children: "Columns" })] }), _jsx(DropdownMenuSubContent, { side: "right", children: table
+                            .getAllColumns()
+                            .filter((col) => col.getCanHide())
+                            .map((col) => (_jsx(DropdownMenuCheckboxItem, { checked: col.getIsVisible(), onSelect: (event) => event.preventDefault(), onCheckedChange: (value) => col.toggleVisibility(!!value), className: "capitalize", children: getColumnHeaderLabel(col) }, col.id))) })] }, "visibility"));
+        }
+        return items;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        filter,
+        canSort,
+        isSorted,
+        column,
+        props.tableLayout?.columnsPinnable,
+        props.tableLayout?.columnsMovable,
+        props.tableLayout?.columnsVisibility,
+        canPin,
+        isPinned,
+        canMoveLeft,
+        canMoveRight,
+        visibility,
+        table,
+        columnIndex,
+        columnOrder,
+        columnVisibilityKey, // Needed to update checkbox states when visibility changes
+    ]);
+    if (hasControls) {
+        return (_jsxs("div", { className: "flex h-full items-center justify-between gap-1.5", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: _jsxs(Button, { variant: "ghost", className: headerButtonClassName, disabled: isLoading || recordCount === 0, children: [icon && icon, resolvedTitle, sortIcon] }) }), _jsx(DropdownMenuContent, { className: "w-40", align: "start", children: menuItems })] }), props.tableLayout?.columnsPinnable && canPin && isPinned && (_jsx(Button, { size: "icon-sm", variant: "ghost", className: "-me-1 size-7 rounded-md", onClick: () => column.pin(false), "aria-label": `Unpin ${resolvedTitle} column`, title: `Unpin ${resolvedTitle} column`, children: _jsx(PinOffIcon, { className: "size-3.5! opacity-50!", "aria-hidden": "true" }) }))] }));
+    }
+    if (canSort || (props.tableLayout?.columnsResizable && canResize)) {
+        return (_jsx("div", { className: "flex h-full items-center", children: _jsxs(Button, { variant: "ghost", className: headerButtonClassName, disabled: isLoading || recordCount === 0, onClick: handleSort, children: [icon && icon, resolvedTitle, sortIcon] }) }));
+    }
+    return (_jsxs("div", { className: headerLabelClassName, children: [icon && icon, resolvedTitle] }));
+}
+const DataGridColumnHeader = memo(DataGridColumnHeaderInner);
+export { DataGridColumnHeader };

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

@@ -0,0 +1,8 @@
+import type { ReactElement } from 'react';
+import type { Table } from '@tanstack/react-table';
+declare function DataGridColumnVisibility<TData>({ table, trigger }: {
+    table: Table<TData>;
+    trigger: ReactElement<Record<string, unknown>>;
+}): import("react/jsx-runtime").JSX.Element;
+export { DataGridColumnVisibility };
+//# sourceMappingURL=data-grid-column-visibility.d.ts.map

package/dist/components/data-grid/data-grid-column-visibility.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-column-visibility.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-column-visibility.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAInD,iBAAS,wBAAwB,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IAAC,OAAO,EAAE,YAAY,CAAC,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;CAAE,2CA2BnI;AAED,OAAO,EAAE,wBAAwB,EAAE,CAAC"}

package/dist/components/data-grid/data-grid-column-visibility.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getColumnHeaderLabel } from './data-grid';
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuTrigger } from '../dropdown-menu';
+function DataGridColumnVisibility({ table, trigger }) {
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { render: trigger }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[150px]", children: _jsxs(DropdownMenuGroup, { children: [_jsx(DropdownMenuLabel, { className: "font-medium", children: "Toggle Columns" }), table
+                            .getAllColumns()
+                            .filter((column) => column.getCanHide())
+                            .map((column) => {
+                            return (_jsx(DropdownMenuCheckboxItem, { className: "capitalize", checked: column.getIsVisible(), onSelect: (event) => event.preventDefault(), onCheckedChange: (value) => column.toggleVisibility(!!value), children: getColumnHeaderLabel(column) }, column.id));
+                        })] }) })] }));
+}
+export { DataGridColumnVisibility };

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

@@ -0,0 +1,20 @@
+import React, { type ReactNode } from 'react';
+interface DataGridPaginationProps {
+    sizes?: number[];
+    sizesInfo?: string;
+    sizesLabel?: string;
+    sizesDescription?: string;
+    sizesSkeleton?: ReactNode;
+    more?: boolean;
+    moreLimit?: number;
+    info?: string;
+    infoSkeleton?: ReactNode;
+    className?: string;
+    rowsPerPageLabel?: string;
+    previousPageLabel?: string;
+    nextPageLabel?: string;
+    ellipsisText?: string;
+}
+declare function DataGridPagination(props: DataGridPaginationProps): React.JSX.Element;
+export { DataGridPagination, type DataGridPaginationProps };
+//# sourceMappingURL=data-grid-pagination.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-pagination.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-pagination.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9C,UAAU,uBAAuB;IAC7B,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAmK7E;AAED,OAAO,EAAE,kBAAkB,EAAE,KAAK,uBAAuB,EAAE,CAAC"}

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

@@ -0,0 +1,76 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, {} from 'react';
+import { useDataGrid } from './data-grid';
+import { Button } from '../button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
+import { Skeleton } from '../skeleton';
+import { cn } from '../../lib/utils';
+import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-react';
+function DataGridPagination(props) {
+    const { table, recordCount, isLoading } = useDataGrid();
+    const defaultProps = {
+        sizes: [5, 10, 25, 50, 100],
+        sizesLabel: 'Show',
+        sizesDescription: 'per page',
+        sizesSkeleton: _jsx(Skeleton, { className: "h-8 w-44" }),
+        moreLimit: 5,
+        more: false,
+        info: '{from} - {to} of {count}',
+        infoSkeleton: _jsx(Skeleton, { className: "h-8 w-60" }),
+        rowsPerPageLabel: 'Rows per page',
+        previousPageLabel: 'Go to previous page',
+        nextPageLabel: 'Go to next page',
+        ellipsisText: '...',
+    };
+    const mergedProps = { ...defaultProps, ...props };
+    const btnBaseClasses = 'size-7 p-0 text-sm';
+    const btnArrowClasses = btnBaseClasses + ' rtl:transform rtl:rotate-180';
+    const pageIndex = table.getState().pagination.pageIndex;
+    const pageSize = table.getState().pagination.pageSize;
+    const from = pageIndex * pageSize + 1;
+    const to = Math.min((pageIndex + 1) * pageSize, recordCount);
+    const pageCount = table.getPageCount();
+    // Replace placeholders in paginationInfo
+    const paginationInfo = mergedProps?.info
+        ? mergedProps.info.replace('{from}', from.toString()).replace('{to}', to.toString()).replace('{count}', recordCount.toString())
+        : `${from} - ${to} of ${recordCount}`;
+    // Pagination limit logic
+    const paginationMoreLimit = mergedProps?.moreLimit || 5;
+    // Determine the start and end of the pagination group
+    const currentGroupStart = Math.floor(pageIndex / paginationMoreLimit) * paginationMoreLimit;
+    const currentGroupEnd = Math.min(currentGroupStart + paginationMoreLimit, pageCount);
+    // Render page buttons based on the current group
+    const renderPageButtons = () => {
+        const buttons = [];
+        for (let i = currentGroupStart; i < currentGroupEnd; i++) {
+            buttons.push(_jsx(Button, { size: "icon-sm", variant: "ghost", className: cn(btnBaseClasses, 'text-muted-foreground', {
+                    'bg-accent text-accent-foreground': pageIndex === i,
+                }), onClick: () => {
+                    if (pageIndex !== i) {
+                        table.setPageIndex(i);
+                    }
+                }, children: i + 1 }, i));
+        }
+        return buttons;
+    };
+    // Render a "previous" ellipsis button if there are previous pages to show
+    const renderEllipsisPrevButton = () => {
+        if (currentGroupStart > 0) {
+            return (_jsx(Button, { size: "icon-sm", className: btnBaseClasses, variant: "ghost", onClick: () => table.setPageIndex(currentGroupStart - 1), children: mergedProps.ellipsisText }));
+        }
+        return null;
+    };
+    // Render a "next" ellipsis button if there are more pages to show after the current group
+    const renderEllipsisNextButton = () => {
+        if (currentGroupEnd < pageCount) {
+            return (_jsx(Button, { className: btnBaseClasses, variant: "ghost", size: "icon-sm", onClick: () => table.setPageIndex(currentGroupEnd), children: mergedProps.ellipsisText }));
+        }
+        return null;
+    };
+    return (_jsxs("div", { "data-slot": "data-grid-pagination", className: cn('flex grow flex-col flex-wrap items-center justify-between gap-2.5 py-2.5 sm:flex-row sm:py-0', mergedProps?.className), children: [_jsx("div", { className: "order-2 flex flex-wrap items-center space-x-2.5 pb-2.5 sm:order-1 sm:pb-0", children: isLoading ? (mergedProps?.sizesSkeleton) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-sm text-muted-foreground", children: mergedProps.rowsPerPageLabel }), _jsxs(Select, { value: `${pageSize}`, onValueChange: (value) => {
+                                const newPageSize = Number(value);
+                                table.setPageSize(newPageSize);
+                            }, children: [_jsx(SelectTrigger, { className: "w-14", size: "sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { side: "top", className: "min-w-18", children: mergedProps?.sizes?.map((size) => (_jsx(SelectItem, { value: `${size}`, children: size }, size))) })] })] })) }), _jsx("div", { className: "order-1 flex flex-col items-center justify-center gap-2.5 pt-2.5 sm:order-2 sm:flex-row sm:justify-end sm:pt-0", children: isLoading ? (mergedProps?.infoSkeleton) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "order-2 text-sm text-nowrap text-muted-foreground sm:order-1", children: paginationInfo }), pageCount > 1 && (_jsxs("div", { className: "order-1 flex items-center space-x-1 sm:order-2", children: [_jsxs(Button, { size: "icon-sm", variant: "ghost", className: btnArrowClasses, onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), children: [_jsx("span", { className: "sr-only", children: mergedProps.previousPageLabel }), _jsx(ChevronLeftIcon, { className: "size-4" })] }), renderEllipsisPrevButton(), renderPageButtons(), renderEllipsisNextButton(), _jsxs(Button, { size: "icon-sm", variant: "ghost", className: btnArrowClasses, onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), children: [_jsx("span", { className: "sr-only", children: mergedProps.nextPageLabel }), _jsx(ChevronRightIcon, { className: "size-4" })] })] }))] })) })] }));
+}
+export { DataGridPagination };

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+type DataGridScrollAreaOrientation = 'horizontal' | 'vertical' | 'both';
+type DataGridScrollAreaProps = Omit<ScrollAreaPrimitive.Root.Props, 'children'> & {
+    children: ReactNode;
+    orientation?: DataGridScrollAreaOrientation;
+};
+declare function DataGridScrollArea({ children, className, orientation, ...props }: DataGridScrollAreaProps): import("react/jsx-runtime").JSX.Element;
+export { DataGridScrollArea };
+export type { DataGridScrollAreaOrientation, DataGridScrollAreaProps };
+//# sourceMappingURL=data-grid-scroll-area.d.ts.map

package/dist/components/data-grid/data-grid-scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-scroll-area.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-scroll-area.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAgB,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrD,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAgB/E,KAAK,6BAA6B,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;AAkBxE,KAAK,uBAAuB,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IAC9E,QAAQ,EAAE,SAAS,CAAC;IACpB,WAAW,CAAC,EAAE,6BAA6B,CAAC;CAC/C,CAAC;AAwBF,iBAAS,kBAAkB,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,WAAoB,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAmR3G;AAED,OAAO,EAAE,kBAAkB,EAAE,CAAC;AAC9B,YAAY,EAAE,6BAA6B,EAAE,uBAAuB,EAAE,CAAC"}

package/dist/components/data-grid/data-grid-scroll-area.js

@@ -0,0 +1,218 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useDataGrid } from './data-grid';
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';
+import { cn } from '../../lib/utils';
+const MIN_THUMB_SIZE = 24;
+const FALLBACK_SCROLLBAR_SIZE = 12;
+const INITIAL_METRICS = {
+    hasVerticalOverflow: false,
+    headerHeight: 0,
+    horizontalScrollbarSize: 0,
+    thumbHeight: 0,
+    thumbTop: 0,
+    trackHeight: 0,
+};
+function clamp(value, min, max) {
+    return Math.min(max, Math.max(min, value));
+}
+function areMetricsEqual(next, prev) {
+    return (next.hasVerticalOverflow === prev.hasVerticalOverflow &&
+        next.headerHeight === prev.headerHeight &&
+        next.horizontalScrollbarSize === prev.horizontalScrollbarSize &&
+        next.thumbHeight === prev.thumbHeight &&
+        next.thumbTop === prev.thumbTop &&
+        next.trackHeight === prev.trackHeight);
+}
+function applyMetrics(element, metrics) {
+    element.style.setProperty('--data-grid-scrollbar-header-height', `${metrics.headerHeight}px`);
+    element.style.setProperty('--data-grid-scrollbar-thumb-height', `${metrics.thumbHeight}px`);
+    element.style.setProperty('--data-grid-scrollbar-thumb-top', `${metrics.thumbTop}px`);
+    element.style.setProperty('--data-grid-scrollbar-track-height', `${metrics.trackHeight}px`);
+}
+function DataGridScrollArea({ children, className, orientation = 'both', ...props }) {
+    const { props: dataGridProps } = useDataGrid();
+    const containerRef = useRef(null);
+    const viewportRef = useRef(null);
+    const dragRef = useRef(null);
+    const metricsRef = useRef(INITIAL_METRICS);
+    const observedElementsRef = useRef({
+        header: null,
+        horizontalScrollbar: null,
+        table: null,
+        tableViewport: null,
+    });
+    const showHorizontal = orientation !== 'vertical';
+    const showVertical = orientation !== 'horizontal';
+    const usesCustomVerticalScrollbar = showVertical && !!dataGridProps.tableLayout?.headerSticky;
+    const [hasCustomVerticalOverflow, setHasCustomVerticalOverflow] = useState(false);
+    const clearDragState = useCallback(() => {
+        dragRef.current = null;
+        document.body.style.userSelect = '';
+        document.body.style.webkitUserSelect = '';
+    }, []);
+    const applyInitialMetricsToContainer = useCallback(() => {
+        const container = containerRef.current;
+        if (container && !areMetricsEqual(INITIAL_METRICS, metricsRef.current)) {
+            applyMetrics(container, INITIAL_METRICS);
+            metricsRef.current = INITIAL_METRICS;
+        }
+    }, []);
+    const resetMetrics = useCallback(() => {
+        applyInitialMetricsToContainer();
+        setHasCustomVerticalOverflow((prev) => (prev ? false : prev));
+    }, [applyInitialMetricsToContainer]);
+    const syncCustomVerticalScrollbar = useCallback(() => {
+        const container = containerRef.current;
+        const viewport = viewportRef.current;
+        if (!container || !viewport || !usesCustomVerticalScrollbar) {
+            resetMetrics();
+            return;
+        }
+        const { header, horizontalScrollbar } = observedElementsRef.current;
+        const headerHeight = header?.getBoundingClientRect().height ?? 0;
+        const viewportHeight = viewport.clientHeight;
+        const viewportWidth = viewport.clientWidth;
+        const scrollHeight = viewport.scrollHeight;
+        const scrollWidth = viewport.scrollWidth;
+        const hasHorizontalOverflow = showHorizontal && scrollWidth > viewportWidth + 0.5;
+        const horizontalScrollbarSize = hasHorizontalOverflow ? horizontalScrollbar?.offsetHeight || FALLBACK_SCROLLBAR_SIZE : 0;
+        const trackHeight = Math.max(0, viewportHeight - headerHeight - horizontalScrollbarSize);
+        const maxScroll = Math.max(0, scrollHeight - viewportHeight);
+        let nextMetrics;
+        if (trackHeight === 0 || maxScroll === 0) {
+            nextMetrics = {
+                hasVerticalOverflow: false,
+                headerHeight,
+                horizontalScrollbarSize,
+                thumbHeight: trackHeight,
+                thumbTop: 0,
+                trackHeight,
+            };
+        }
+        else {
+            const bodyContentHeight = Math.max(trackHeight, scrollHeight - headerHeight);
+            const thumbHeight = clamp(trackHeight * (trackHeight / bodyContentHeight), MIN_THUMB_SIZE, trackHeight);
+            const maxThumbTop = Math.max(0, trackHeight - thumbHeight);
+            const thumbTop = maxThumbTop > 0 ? (viewport.scrollTop / maxScroll) * maxThumbTop : 0;
+            nextMetrics = {
+                hasVerticalOverflow: true,
+                headerHeight,
+                horizontalScrollbarSize,
+                thumbHeight,
+                thumbTop,
+                trackHeight,
+            };
+        }
+        if (!areMetricsEqual(nextMetrics, metricsRef.current)) {
+            applyMetrics(container, nextMetrics);
+            metricsRef.current = nextMetrics;
+        }
+        setHasCustomVerticalOverflow((prev) => (prev === nextMetrics.hasVerticalOverflow ? prev : nextMetrics.hasVerticalOverflow));
+    }, [resetMetrics, showHorizontal, usesCustomVerticalScrollbar]);
+    useEffect(() => {
+        const container = containerRef.current;
+        const viewport = viewportRef.current;
+        if (!container || !viewport)
+            return;
+        if (!usesCustomVerticalScrollbar) {
+            applyInitialMetricsToContainer();
+            queueMicrotask(() => {
+                setHasCustomVerticalOverflow((prev) => (prev ? false : prev));
+            });
+            return;
+        }
+        observedElementsRef.current = {
+            header: container.querySelector('[data-slot="data-grid-table"] thead'),
+            horizontalScrollbar: container.querySelector('[data-slot="data-grid-scrollbar"][data-orientation="horizontal"]'),
+            table: container.querySelector('[data-slot="data-grid-table"]'),
+            tableViewport: container.querySelector('[data-slot="data-grid-table-viewport"]'),
+        };
+        let frame = 0;
+        const scheduleSync = () => {
+            cancelAnimationFrame(frame);
+            frame = window.requestAnimationFrame(syncCustomVerticalScrollbar);
+        };
+        scheduleSync();
+        viewport.addEventListener('scroll', scheduleSync, { passive: true });
+        const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleSync);
+        if (observer) {
+            observer.observe(viewport);
+            const { header, table, tableViewport } = observedElementsRef.current;
+            if (header)
+                observer.observe(header);
+            if (table)
+                observer.observe(table);
+            if (tableViewport)
+                observer.observe(tableViewport);
+        }
+        return () => {
+            cancelAnimationFrame(frame);
+            observer?.disconnect();
+            viewport.removeEventListener('scroll', scheduleSync);
+            clearDragState();
+        };
+    }, [applyInitialMetricsToContainer, clearDragState, resetMetrics, syncCustomVerticalScrollbar, usesCustomVerticalScrollbar]);
+    const scrollToThumbOffset = (nextThumbTop) => {
+        const viewport = viewportRef.current;
+        const { thumbHeight, trackHeight } = metricsRef.current;
+        if (!viewport)
+            return;
+        const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+        const maxThumbTop = Math.max(0, trackHeight - thumbHeight);
+        if (maxScroll === 0 || maxThumbTop === 0) {
+            viewport.scrollTop = 0;
+            return;
+        }
+        const ratio = clamp(nextThumbTop, 0, maxThumbTop) / maxThumbTop;
+        viewport.scrollTop = ratio * maxScroll;
+    };
+    const handleThumbPointerDown = (event) => {
+        const viewport = viewportRef.current;
+        if (!viewport)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        event.currentTarget.setPointerCapture(event.pointerId);
+        dragRef.current = {
+            pointerId: event.pointerId,
+            startScrollTop: viewport.scrollTop,
+            startY: event.clientY,
+        };
+        document.body.style.userSelect = 'none';
+        document.body.style.webkitUserSelect = 'none';
+    };
+    const handleThumbPointerMove = (event) => {
+        const viewport = viewportRef.current;
+        const dragState = dragRef.current;
+        const { thumbHeight, trackHeight } = metricsRef.current;
+        if (!viewport || !dragState || dragState.pointerId !== event.pointerId) {
+            return;
+        }
+        const maxThumbTop = Math.max(0, trackHeight - thumbHeight);
+        const maxScroll = Math.max(0, viewport.scrollHeight - viewport.clientHeight);
+        if (maxThumbTop === 0 || maxScroll === 0)
+            return;
+        const deltaY = event.clientY - dragState.startY;
+        const nextScrollTop = dragState.startScrollTop + (deltaY / maxThumbTop) * maxScroll;
+        viewport.scrollTop = clamp(nextScrollTop, 0, maxScroll);
+    };
+    const handleThumbPointerUp = (event) => {
+        if (dragRef.current?.pointerId !== event.pointerId)
+            return;
+        clearDragState();
+    };
+    const handleTrackPointerDown = (event) => {
+        const { thumbHeight } = metricsRef.current;
+        if (event.target !== event.currentTarget)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const rect = event.currentTarget.getBoundingClientRect();
+        const offsetY = event.clientY - rect.top - thumbHeight / 2;
+        scrollToThumbOffset(offsetY);
+    };
+    return (_jsxs("div", { ref: containerRef, className: "relative", children: [_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "data-grid-scroll-area", className: cn('relative', className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { ref: viewportRef, "data-slot": "scroll-area-viewport", className: "size-full", children: _jsx(ScrollAreaPrimitive.Content, { "data-slot": "scroll-area-content", children: children }) }), showHorizontal && (_jsx(ScrollAreaPrimitive.Scrollbar, { "data-slot": "data-grid-scrollbar", "data-orientation": "horizontal", orientation: "horizontal", className: "flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent", children: _jsx(ScrollAreaPrimitive.Thumb, { "data-slot": "data-grid-thumb", className: "relative flex-1 rounded-full bg-border" }) })), showVertical && !usesCustomVerticalScrollbar && (_jsx(ScrollAreaPrimitive.Scrollbar, { "data-slot": "data-grid-scrollbar", "data-orientation": "vertical", orientation: "vertical", className: "flex touch-none p-px transition-colors select-none data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:border-s data-[orientation=vertical]:border-s-transparent", children: _jsx(ScrollAreaPrimitive.Thumb, { "data-slot": "data-grid-thumb", className: "relative flex-1 rounded-full bg-border" }) }))] }), usesCustomVerticalScrollbar && hasCustomVerticalOverflow && (_jsx("div", { "aria-hidden": "true", className: "pointer-events-none absolute inset-e-0 top-(--data-grid-scrollbar-header-height) z-20 h-(--data-grid-scrollbar-track-height)", children: _jsx("div", { className: "pointer-events-auto relative h-full w-2 touch-none p-px", onPointerDown: handleTrackPointerDown, children: _jsx("div", { className: cn('absolute end-px w-2 bg-border', 'top-(--data-grid-scrollbar-thumb-top) h-(--data-grid-scrollbar-thumb-height)', 'rounded-full'), onLostPointerCapture: clearDragState, onPointerCancel: handleThumbPointerUp, onPointerDown: handleThumbPointerDown, onPointerMove: handleThumbPointerMove, onPointerUp: handleThumbPointerUp }) }) }))] }));
+}
+export { DataGridScrollArea };

package/dist/components/data-grid/data-grid-table-dnd-rows.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from 'react';
+import { type DragEndEvent, type UniqueIdentifier } from '@dnd-kit/core';
+declare function DataGridTableDndRowHandle({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DataGridTableDndRows<TData>({ handleDragEnd, dataIds, footerContent, }: {
+    handleDragEnd: (event: DragEndEvent) => void;
+    dataIds: UniqueIdentifier[];
+    footerContent?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { DataGridTableDndRowHandle, DataGridTableDndRows };
+//# sourceMappingURL=data-grid-table-dnd-rows.d.ts.map

package/dist/components/data-grid/data-grid-table-dnd-rows.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-table-dnd-rows.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-table-dnd-rows.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAqC,KAAK,SAAS,EAA2D,MAAM,OAAO,CAAC;AAkBnI,OAAO,EAGH,KAAK,YAAY,EAKjB,KAAK,gBAAgB,EAGxB,MAAM,eAAe,CAAC;AAcvB,iBAAS,yBAAyB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,2CA4BvE;AA+BD,iBAAS,oBAAoB,CAAC,KAAK,EAAE,EACjC,aAAa,EACb,OAAO,EACP,aAAa,GAChB,EAAE;IACC,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAC7C,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,aAAa,CAAC,EAAE,SAAS,CAAC;CAC7B,2CAuHA;AAED,OAAO,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,CAAC"}

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

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { useDataGrid } from './data-grid';
+import { DataGridTableBase, DataGridTableBody, DataGridTableBodyRow, DataGridTableBodyRowCell, DataGridTableBodyRowSkeleton, DataGridTableBodyRowSkeletonCell, DataGridTableEmpty, DataGridTableFoot, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableRowSpacer, DataGridTableViewport, } from './data-grid-table';
+import { closestCenter, DndContext, KeyboardSensor, MouseSensor, TouchSensor, useSensor, useSensors, } from '@dnd-kit/core';
+import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
+import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { flexRender } from '@tanstack/react-table';
+import { Button } from '../button';
+import { cn } from '../../lib/utils';
+import { GripHorizontalIcon } from 'lucide-react';
+const SortableRowContext = createContext(null);
+function DataGridTableDndRowHandle({ className }) {
+    const context = useContext(SortableRowContext);
+    if (!context) {
+        // Fallback if context is not available (shouldn't happen in normal usage)
+        return (_jsx(Button, { variant: "ghost", size: "icon-sm", className: cn('size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing', className), disabled: true, children: _jsx(GripHorizontalIcon, {}) }));
+    }
+    return (_jsx(Button, { variant: "ghost", size: "icon-sm", className: cn('size-7 cursor-grab opacity-70 hover:bg-transparent hover:opacity-100 active:cursor-grabbing', className), ...context.attributes, ...context.listeners, children: _jsx(GripHorizontalIcon, {}) }));
+}
+function DataGridTableDndRow({ row }) {
+    const { transform, transition, setNodeRef, isDragging, attributes, listeners } = useSortable({
+        id: row.id,
+    });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition: transition,
+        opacity: isDragging ? 0.8 : 1,
+        zIndex: isDragging ? 1 : 0,
+        position: 'relative',
+        cursor: isDragging ? 'grabbing' : undefined,
+    };
+    return (_jsx(SortableRowContext.Provider, { value: { attributes, listeners }, children: _jsx(DataGridTableBodyRow, { row: row, dndRef: setNodeRef, dndStyle: style, children: row.getVisibleCells().map((cell, colIndex) => {
+                return (_jsx(DataGridTableBodyRowCell, { cell: cell, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, colIndex));
+            }) }, row.id) }));
+}
+function DataGridTableDndRows({ handleDragEnd, dataIds, footerContent, }) {
+    const { table, isLoading, props } = useDataGrid();
+    const pagination = table.getState().pagination;
+    const tableContainerRef = useRef(null);
+    const [isDraggingRow, setIsDraggingRow] = useState(false);
+    const sensors = useSensors(useSensor(MouseSensor, {}), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, {}));
+    useEffect(() => {
+        if (!isDraggingRow)
+            return;
+        const { body, documentElement } = document;
+        const previousBodyCursor = body.style.cursor;
+        const previousDocumentCursor = documentElement.style.cursor;
+        body.style.cursor = 'grabbing';
+        documentElement.style.cursor = 'grabbing';
+        return () => {
+            body.style.cursor = previousBodyCursor;
+            documentElement.style.cursor = previousDocumentCursor;
+        };
+    }, [isDraggingRow]);
+    const modifiers = useMemo(() => {
+        const restrictToTableContainer = ({ transform, draggingNodeRect }) => {
+            if (!tableContainerRef.current || !draggingNodeRect) {
+                return transform;
+            }
+            const containerRect = tableContainerRef.current.getBoundingClientRect();
+            const { x, y } = transform;
+            const minX = containerRect.left - draggingNodeRect.left;
+            const maxX = containerRect.right - draggingNodeRect.right;
+            const minY = containerRect.top - draggingNodeRect.top;
+            const maxY = containerRect.bottom - draggingNodeRect.bottom;
+            return {
+                ...transform,
+                x: Math.max(minX, Math.min(maxX, x)),
+                y: Math.max(minY, Math.min(maxY, y)),
+            };
+        };
+        return [restrictToVerticalAxis, restrictToTableContainer];
+    }, []);
+    return (_jsx(DndContext, { id: useId(), collisionDetection: closestCenter, modifiers: modifiers, onDragCancel: () => setIsDraggingRow(false), onDragEnd: (event) => {
+            setIsDraggingRow(false);
+            handleDragEnd(event);
+        }, onDragStart: () => setIsDraggingRow(true), sensors: sensors, children: _jsx(DataGridTableViewport, { viewportRef: tableContainerRef, className: isDraggingRow ? 'relative cursor-grabbing [&_*]:cursor-grabbing!' : 'relative', children: _jsxs(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));
+                        }) }), (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && _jsx(DataGridTableRowSpacer, {}), _jsx(DataGridTableBody, { children: props.loadingMode === 'skeleton' && isLoading && pagination?.pageSize ? (Array.from({ length: pagination.pageSize }).map((_, rowIndex) => (_jsx(DataGridTableBodyRowSkeleton, { children: table.getVisibleFlatColumns().map((column, colIndex) => {
+                                return (_jsx(DataGridTableBodyRowSkeletonCell, { column: column, children: column.columnDef.meta?.skeleton }, colIndex));
+                            }) }, rowIndex)))) : table.getRowModel().rows.length ? (_jsx(SortableContext, { items: dataIds, strategy: verticalListSortingStrategy, children: table.getRowModel().rows.map((row) => {
+                                return _jsx(DataGridTableDndRow, { row: row }, row.id);
+                            }) })) : (_jsx(DataGridTableEmpty, {})) }), footerContent && _jsx(DataGridTableFoot, { children: footerContent })] }) }) }));
+}
+export { DataGridTableDndRowHandle, DataGridTableDndRows };

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

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+import { type DragEndEvent } from '@dnd-kit/core';
+declare function DataGridTableDnd<TData>({ handleDragEnd, footerContent }: {
+    handleDragEnd: (event: DragEndEvent) => void;
+    footerContent?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { DataGridTableDnd };
+//# sourceMappingURL=data-grid-table-dnd.d.ts.map

package/dist/components/data-grid/data-grid-table-dnd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-table-dnd.d.ts","sourceRoot":"","sources":["../../../src/components/data-grid/data-grid-table-dnd.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAgC,KAAK,SAAS,EAAsC,MAAM,OAAO,CAAC;AAmBzG,OAAO,EAA6B,KAAK,YAAY,EAAkF,MAAM,eAAe,CAAC;AA2E7J,iBAAS,gBAAgB,CAAC,KAAK,EAAE,EAAE,aAAa,EAAE,aAAa,EAAE,EAAE;IAAE,aAAa,EAAE,CAAC,KAAK,EAAE,YAAY,KAAK,IAAI,CAAC;IAAC,aAAa,CAAC,EAAE,SAAS,CAAA;CAAE,2CAsH7I;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC"}