@hexclave/dashboard-ui-components 1.0.0

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

@@ -0,0 +1,923 @@
+"use client";
+
+import { ArrowDown, ArrowUp, CaretDown, CaretUp, CheckSquare, MinusSquare, Square } from "@phosphor-icons/react";
+import { cn } from "@hexclave/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { exportToCsv, formatGridDate, resolveColumnValue } from "./state.js";
+import { resolveDataGridStrings } from "./strings.js";
+import { throwErr } from "@hexclave/shared/dist/utils/errors";
+import { getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { DesignSkeleton } from "../skeleton.js";
+import { DEFAULT_COL_WIDTH, clampColumnWidth, getEffectiveMaxWidth, getEffectiveMinWidth } from "./data-grid-sizing.js";
+import { DataGridToolbar } from "./data-grid-toolbar.js";
+
+//#region src/components/data-grid/data-grid.tsx
+function getEventTargetElement(target) {
+	if (target instanceof Element) return target;
+	if (target instanceof Node) return target.parentElement;
+	return null;
+}
+function isDataGridInteractiveRowClickTarget(target) {
+	return getEventTargetElement(target)?.closest([
+		"a",
+		"button",
+		"input",
+		"select",
+		"textarea",
+		"[role=\"button\"]",
+		"[role=\"menuitem\"]",
+		"[contenteditable]:not([contenteditable=\"false\"])",
+		"[data-no-row-click]"
+	].join(",")) != null;
+}
+function shouldIgnoreRowClick(event) {
+	return event.defaultPrevented || isDataGridInteractiveRowClickTarget(event.target);
+}
+function toTanstackSorting(sorting) {
+	return sorting.map((s) => ({
+		id: s.columnId,
+		desc: s.direction === "desc"
+	}));
+}
+function fromTanstackSorting(sorting) {
+	return sorting.map((s) => ({
+		columnId: s.id,
+		direction: s.desc ? "desc" : "asc"
+	}));
+}
+function toTanstackRowSelection(ids) {
+	const out = {};
+	for (const id of ids) out[id] = true;
+	return out;
+}
+function resolveUpdater(updater, current) {
+	return typeof updater === "function" ? updater(current) : updater;
+}
+function distributeFlexWidths(sizes, visibleColumns, available) {
+	const flexCols = visibleColumns.filter((c) => c.flex != null && c.flex > 0);
+	if (flexCols.length === 0 || available <= 0) return;
+	const totalFlex = flexCols.reduce((acc, c) => acc + (c.flex ?? 0), 0);
+	let remaining = available;
+	flexCols.forEach((col, i) => {
+		const share = i === flexCols.length - 1 ? remaining : Math.floor(available * ((col.flex ?? 0) / totalFlex));
+		const max = col.maxWidth ?? Infinity;
+		const add = Math.max(0, Math.min(share, max - sizes[col.id]));
+		sizes[col.id] += add;
+		remaining -= add;
+	});
+}
+function selectSingle(current, rowId) {
+	const isSelected = current.selectedIds.has(rowId);
+	return {
+		selectedIds: isSelected ? /* @__PURE__ */ new Set() : new Set([rowId]),
+		anchorId: isSelected ? null : rowId
+	};
+}
+function selectRange(current, rowId, allRowIds, additive) {
+	if (current.anchorId == null) return null;
+	const anchorIdx = allRowIds.indexOf(current.anchorId);
+	const currentIdx = allRowIds.indexOf(rowId);
+	if (anchorIdx < 0 || currentIdx < 0) return null;
+	const start = Math.min(anchorIdx, currentIdx);
+	const end = Math.max(anchorIdx, currentIdx);
+	const next = additive ? new Set(current.selectedIds) : /* @__PURE__ */ new Set();
+	for (let i = start; i <= end; i++) next.add(allRowIds[i]);
+	return {
+		selectedIds: next,
+		anchorId: current.anchorId
+	};
+}
+function selectToggle(current, rowId) {
+	const next = new Set(current.selectedIds);
+	if (next.has(rowId)) next.delete(rowId);
+	else next.add(rowId);
+	return {
+		selectedIds: next,
+		anchorId: rowId
+	};
+}
+function nextSelection(input) {
+	const { current, rowId, mode, modifiers, allRowIds } = input;
+	if (mode === "single") return selectSingle(current, rowId);
+	if (modifiers.shift) {
+		const range = selectRange(current, rowId, allRowIds, modifiers.ctrl);
+		if (range != null) return range;
+	}
+	if (modifiers.ctrl) return selectToggle(current, rowId);
+	return {
+		selectedIds: new Set([rowId]),
+		anchorId: rowId
+	};
+}
+function HeaderCell({ header, col, resizable }) {
+	const sorted = header.column.getIsSorted();
+	const sortIndex = header.column.getSortIndex();
+	const totalSorts = header.column.getCanMultiSort() ? header.getContext().table.getState().sorting.length : 0;
+	const ctx = {
+		columnId: col.id,
+		columnDef: col,
+		isSorted: sorted === false ? false : sorted,
+		sortIndex: totalSorts > 1 && sortIndex >= 0 ? sortIndex + 1 : null
+	};
+	const label = typeof col.header === "function" ? col.header(ctx) : col.header;
+	const sortable = header.column.getCanSort();
+	const canResize = resizable && header.column.getCanResize();
+	const isResizing = header.column.getIsResizing();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group/header relative flex items-center gap-1.5 px-3 select-none bg-transparent overflow-hidden", "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0", sortable && "cursor-pointer"),
+		style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
+		"data-col-id": col.id,
+		onClick: sortable ? header.column.getToggleSortingHandler() : void 0,
+		role: "columnheader",
+		"aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none",
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: cn("flex-1 min-w-0 truncate text-xs font-semibold uppercase tracking-wider text-muted-foreground", col.align === "center" && "text-center", col.align === "right" && "text-right"),
+				children: label
+			}),
+			sorted && /* @__PURE__ */ jsxs("span", {
+				className: "flex items-center gap-0.5 text-foreground/60",
+				children: [sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, {
+					className: "h-3 w-3",
+					weight: "bold"
+				}) : /* @__PURE__ */ jsx(ArrowDown, {
+					className: "h-3 w-3",
+					weight: "bold"
+				}), ctx.sortIndex != null && /* @__PURE__ */ jsx("span", {
+					className: "text-[10px] font-medium tabular-nums",
+					children: ctx.sortIndex
+				})]
+			}),
+			!sorted && sortable && /* @__PURE__ */ jsxs("span", {
+				className: "hidden group-hover/header:flex items-center text-foreground/20",
+				children: [/* @__PURE__ */ jsx(CaretUp, {
+					className: "h-2.5 w-2.5 -mb-[1px]",
+					weight: "bold"
+				}), /* @__PURE__ */ jsx(CaretDown, {
+					className: "h-2.5 w-2.5 -mt-[1px]",
+					weight: "bold"
+				})]
+			}),
+			canResize && /* @__PURE__ */ jsx("div", {
+				onMouseDown: header.getResizeHandler(),
+				onTouchStart: header.getResizeHandler(),
+				onClick: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+				className: cn("absolute right-0 top-0 bottom-0 z-10 w-[5px] cursor-col-resize touch-none", "group-hover/header:bg-foreground/[0.06] hover:!bg-blue-500/30", "transition-colors duration-100", isResizing && "bg-blue-500/40")
+			})
+		]
+	});
+}
+function DataCell({ col, row, rowId, rowIndex, isSelected, dateDisplay }) {
+	const value = resolveColumnValue(col, row);
+	const ctx = {
+		row,
+		rowId,
+		rowIndex,
+		value,
+		columnId: col.id,
+		isSelected,
+		dateDisplay
+	};
+	const isDateCol = col.type === "date" || col.type === "dateTime";
+	let content;
+	if (col.renderCell) content = col.renderCell(ctx);
+	else if (isDateCol) content = renderDateCell(value, dateDisplay, col);
+	else content = formatCellValue(value);
+	const hasCellClick = col.onCellClick || col.onCellDoubleClick;
+	const isWrap = col.cellOverflow === "wrap";
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex px-3 bg-transparent overflow-hidden", "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0", "text-sm text-foreground", isWrap ? "items-start py-2" : "items-center", col.align === "center" && "justify-center", col.align === "right" && "justify-end", hasCellClick && "cursor-pointer"),
+		style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
+		"data-col-id": col.id,
+		role: "gridcell",
+		onClick: col.onCellClick ? (e) => {
+			e.stopPropagation();
+			col.onCellClick(ctx, e);
+		} : void 0,
+		onDoubleClick: col.onCellDoubleClick ? (e) => {
+			e.stopPropagation();
+			col.onCellDoubleClick(ctx, e);
+		} : void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0", isWrap ? "flex-1" : "truncate"),
+			children: content
+		})
+	});
+}
+function formatCellValue(value) {
+	if (value == null) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground/40",
+		children: "-"
+	});
+	if (typeof value === "boolean") return /* @__PURE__ */ jsx("span", {
+		className: cn("inline-flex items-center px-1.5 py-0.5 rounded-md text-xs font-medium", value ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "bg-foreground/[0.04] text-muted-foreground"),
+		children: value ? "Yes" : "No"
+	});
+	if (value instanceof Date) return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums text-muted-foreground",
+		children: value.toLocaleDateString()
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "truncate",
+		children: String(value)
+	});
+}
+function renderDateCell(value, dateDisplay, col) {
+	const { display, tooltip } = formatGridDate(value, dateDisplay, {
+		parseValue: col.parseValue,
+		dateFormat: col.dateFormat
+	});
+	if (display == null) return /* @__PURE__ */ jsx("span", {
+		className: "text-muted-foreground/40",
+		children: "-"
+	});
+	return /* @__PURE__ */ jsx("span", {
+		className: "tabular-nums text-muted-foreground truncate cursor-help",
+		title: tooltip ?? void 0,
+		children: display
+	});
+}
+function hashStringToInt(value) {
+	let hash = 0;
+	for (let i = 0; i < value.length; i++) hash = (hash << 5) - hash + value.charCodeAt(i) | 0;
+	return Math.abs(hash);
+}
+function SkeletonRow({ columns, height, showCheckbox }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex",
+		style: { height },
+		role: "row",
+		children: [showCheckbox && /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]",
+			style: { width: 44 },
+			children: /* @__PURE__ */ jsx(DesignSkeleton, { className: "h-4 w-4 rounded" })
+		}), columns.map((col) => /* @__PURE__ */ jsx("div", {
+			className: "flex items-center px-3 border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0",
+			style: { width: `calc(var(--col-${col.id}-size) * 1px)` },
+			children: /* @__PURE__ */ jsx(DesignSkeleton, {
+				className: "h-3.5 rounded-md",
+				style: { width: `${40 + hashStringToInt(col.id) % 40}%` }
+			})
+		}, col.id))]
+	});
+}
+function SelectionCheckbox({ checked, indeterminate, onChange, ariaLabel, title }) {
+	const Icon = indeterminate ? MinusSquare : checked ? CheckSquare : Square;
+	return /* @__PURE__ */ jsx("button", {
+		className: cn("flex items-center justify-center w-full h-full", "hover:bg-foreground/[0.04] transition-colors duration-75", checked || indeterminate ? "text-blue-600 dark:text-blue-400" : "text-muted-foreground/40 hover:text-muted-foreground/60"),
+		onClick: (e) => {
+			e.stopPropagation();
+			onChange(e);
+		},
+		"aria-label": ariaLabel,
+		title: title ?? ariaLabel,
+		role: "checkbox",
+		"aria-checked": indeterminate ? "mixed" : checked,
+		children: /* @__PURE__ */ jsx(Icon, {
+			className: "h-4 w-4",
+			weight: checked || indeterminate ? "fill" : "regular"
+		})
+	});
+}
+const NOOP = () => {};
+function InfiniteScrollSentinel({ onIntersect, isLoading, rootRef, strings }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0]?.isIntersecting) onIntersect();
+		}, {
+			root: rootRef?.current ?? null,
+			rootMargin: "200px"
+		});
+		observer.observe(el);
+		return () => observer.disconnect();
+	}, [onIntersect, rootRef]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: "flex items-center justify-center py-4",
+		children: isLoading && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 text-xs text-muted-foreground",
+			children: [/* @__PURE__ */ jsx("div", { className: "h-3 w-3 rounded-full border-2 border-current border-t-transparent animate-spin" }), strings.loadingMore]
+		})
+	});
+}
+function DefaultFooter({ ctx, pagination, onChange }) {
+	const { state, totalRowCount, visibleRowCount, selectedRowCount, strings } = ctx;
+	const totalPages = totalRowCount != null ? Math.max(1, Math.ceil(totalRowCount / state.pagination.pageSize)) : void 0;
+	const setPage = (pageIndex) => onChange((s) => ({
+		...s,
+		pagination: {
+			...s.pagination,
+			pageIndex
+		}
+	}));
+	const setPageSize = (pageSize) => onChange((s) => ({
+		...s,
+		pagination: {
+			...s.pagination,
+			pageSize,
+			pageIndex: 0
+		}
+	}));
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center justify-between px-4 py-2.5 border-t border-foreground/[0.06] text-xs text-muted-foreground",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [selectedRowCount > 0 && /* @__PURE__ */ jsx("span", {
+				className: "font-medium text-foreground",
+				children: strings.rowsSelected(selectedRowCount)
+			}), totalRowCount != null && /* @__PURE__ */ jsxs("span", { children: [
+				visibleRowCount,
+				" of ",
+				totalRowCount,
+				" rows"
+			] })]
+		}), pagination !== "infinite" && totalPages != null && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-3",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1.5",
+				children: [/* @__PURE__ */ jsx("span", { children: strings.rowsPerPage }), /* @__PURE__ */ jsx("select", {
+					className: cn("h-7 rounded-lg border border-black/[0.08] dark:border-white/[0.08] bg-background px-1.5", "text-xs text-foreground focus:outline-none focus:ring-1 focus:ring-foreground/[0.1]", "cursor-pointer"),
+					value: state.pagination.pageSize,
+					onChange: (e) => setPageSize(Number(e.target.value)),
+					children: [
+						10,
+						25,
+						50,
+						100
+					].map((size) => /* @__PURE__ */ jsx("option", {
+						value: size,
+						children: size
+					}, size))
+				})]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-1",
+				children: [
+					/* @__PURE__ */ jsx("button", {
+						className: cn("h-7 w-7 flex items-center justify-center rounded-lg", "hover:bg-foreground/[0.04] disabled:opacity-30 disabled:cursor-not-allowed", "transition-colors duration-75"),
+						onClick: () => setPage(state.pagination.pageIndex - 1),
+						disabled: state.pagination.pageIndex === 0,
+						"aria-label": "Previous page",
+						children: /* @__PURE__ */ jsx(CaretUp, {
+							className: "h-3.5 w-3.5 -rotate-90",
+							weight: "bold"
+						})
+					}),
+					/* @__PURE__ */ jsx("span", {
+						className: "px-2 tabular-nums font-medium",
+						children: strings.pageOf(state.pagination.pageIndex + 1, totalPages)
+					}),
+					/* @__PURE__ */ jsx("button", {
+						className: cn("h-7 w-7 flex items-center justify-center rounded-lg", "hover:bg-foreground/[0.04] disabled:opacity-30 disabled:cursor-not-allowed", "transition-colors duration-75"),
+						onClick: () => setPage(state.pagination.pageIndex + 1),
+						disabled: state.pagination.pageIndex >= totalPages - 1,
+						"aria-label": "Next page",
+						children: /* @__PURE__ */ jsx(CaretDown, {
+							className: "h-3.5 w-3.5 -rotate-90",
+							weight: "bold"
+						})
+					})
+				]
+			})]
+		})]
+	});
+}
+/**
+* Interactive table built on TanStack Table v8. Sorting, column sizing,
+* visibility, ordering, and pinning are owned by the table instance; we
+* layer virtualization, sticky toolbar/header/footer, infinite scroll,
+* quick search, CSV export, and date-format toggling on top.
+*
+* The grid is display-only — it does not fetch or page data itself. Pair
+* with `useDataSource` for client- or server-side data and pass the
+* already-processed slice through `rows`.
+*
+* ```tsx
+* const columns = useMemo(() => [...], []);
+* const [gridState, setGridState] = useState(() => createDefaultDataGridState(columns));
+* const gridData = useDataSource({
+*   data: users, columns, getRowId: (r) => r.id,
+*   sorting: gridState.sorting,
+*   quickSearch: gridState.quickSearch,
+*   pagination: gridState.pagination,
+*   paginationMode: "client",
+* });
+*
+* <DataGrid
+*   columns={columns}
+*   rows={gridData.rows}
+*   getRowId={(r) => r.id}
+*   totalRowCount={gridData.totalRowCount}
+*   isLoading={gridData.isLoading}
+*   state={gridState}
+*   onChange={setGridState}
+* />
+* ```
+*
+* Iron rules:
+* - `rows` is always `gridData.rows`, never your raw array.
+* - Columns must be stable (define outside the component or wrap in `useMemo`).
+* - Initialize state with `createDefaultDataGridState(columns)`.
+* - `renderCell` must be a pure function — no React hooks inside.
+*/
+function DataGrid(props) {
+	const { columns: allColumns, rows, getRowId, totalRowCount, isLoading = false, isRefetching = false, hasMore = false, isLoadingMore = false, onLoadMore, state, onChange, paginationMode = "paginated", selectionMode = "none", resizable = true, rowHeight: rowHeightProp = 44, estimatedRowHeight: estimatedRowHeightProp, headerHeight = 44, overscan = 5, maxHeight, fillHeight = true, stickyTop, toolbar, toolbarExtra, emptyState, loadingState, footer, footerExtra, exportFilename = "export", strings: stringsOverride, className, onRowClick, onRowDoubleClick, onSelectionChange, onSortChange, onColumnResize, onColumnVisibilityChange } = props;
+	const isDynamicRowHeight = rowHeightProp === "auto";
+	const fixedRowHeight = isDynamicRowHeight ? void 0 : rowHeightProp;
+	const estimatedRowHeight = estimatedRowHeightProp ?? fixedRowHeight ?? 44;
+	const strings = useMemo(() => resolveDataGridStrings(stringsOverride), [stringsOverride]);
+	const tableColumns = useMemo(() => allColumns.map((col) => ({
+		id: col.id,
+		accessorFn: (row) => resolveColumnValue(col, row),
+		header: typeof col.header === "string" ? col.header : col.id,
+		size: col.width ?? DEFAULT_COL_WIDTH,
+		minSize: getEffectiveMinWidth(col),
+		maxSize: getEffectiveMaxWidth(col),
+		enableSorting: col.sortable !== false,
+		enableHiding: col.hideable !== false,
+		enableResizing: col.resizable !== false,
+		enableMultiSort: true
+	})), [allColumns]);
+	const tanstackSorting = useMemo(() => toTanstackSorting(state.sorting), [state.sorting]);
+	const tanstackRowSelection = useMemo(() => toTanstackRowSelection(state.selection.selectedIds), [state.selection.selectedIds]);
+	const tanstackColumnPinning = useMemo(() => ({
+		left: [...state.columnPinning.left],
+		right: [...state.columnPinning.right]
+	}), [state.columnPinning]);
+	const tanstackColumnOrder = useMemo(() => [...state.columnOrder], [state.columnOrder]);
+	const allColumnsRef = useRef(allColumns);
+	allColumnsRef.current = allColumns;
+	const handleSortingChange = useCallback((updater) => {
+		const ours = fromTanstackSorting(resolveUpdater(updater, toTanstackSorting(state.sorting))).map((s) => ({ ...s }));
+		onChange((s) => ({
+			...s,
+			sorting: ours,
+			pagination: {
+				...s.pagination,
+				pageIndex: 0
+			}
+		}));
+		onSortChange?.(ours);
+	}, [
+		onChange,
+		onSortChange,
+		state.sorting
+	]);
+	const handleColumnSizingChange = useCallback((updater) => {
+		const next = resolveUpdater(updater, state.columnWidths);
+		const clamped = {};
+		for (const [id, w] of Object.entries(next)) {
+			const col = allColumnsRef.current.find((c) => c.id === id);
+			clamped[id] = col ? clampColumnWidth(col, w) : w;
+		}
+		onChange((s) => ({
+			...s,
+			columnWidths: clamped
+		}));
+		if (onColumnResize) {
+			for (const [id, w] of Object.entries(clamped)) if (state.columnWidths[id] !== w) onColumnResize(id, w);
+		}
+	}, [
+		onChange,
+		onColumnResize,
+		state.columnWidths
+	]);
+	const handleVisibilityChange = useCallback((updater) => {
+		const next = resolveUpdater(updater, state.columnVisibility);
+		onChange((s) => ({
+			...s,
+			columnVisibility: next
+		}));
+		onColumnVisibilityChange?.(next);
+	}, [
+		onChange,
+		onColumnVisibilityChange,
+		state.columnVisibility
+	]);
+	const handleColumnOrderChange = useCallback((updater) => {
+		const next = resolveUpdater(updater, [...state.columnOrder]);
+		onChange((s) => ({
+			...s,
+			columnOrder: next
+		}));
+	}, [onChange, state.columnOrder]);
+	const handleColumnPinningChange = useCallback((updater) => {
+		const next = resolveUpdater(updater, {
+			left: [...state.columnPinning.left],
+			right: [...state.columnPinning.right]
+		});
+		onChange((s) => ({
+			...s,
+			columnPinning: {
+				left: next.left ?? [],
+				right: next.right ?? []
+			}
+		}));
+	}, [onChange, state.columnPinning]);
+	const table = useReactTable({
+		data: rows,
+		columns: tableColumns,
+		getRowId: (row) => getRowId(row),
+		getCoreRowModel: getCoreRowModel(),
+		state: {
+			sorting: tanstackSorting,
+			columnVisibility: state.columnVisibility,
+			columnSizing: state.columnWidths,
+			columnOrder: tanstackColumnOrder,
+			columnPinning: tanstackColumnPinning,
+			rowSelection: tanstackRowSelection
+		},
+		onSortingChange: handleSortingChange,
+		onColumnSizingChange: handleColumnSizingChange,
+		onColumnVisibilityChange: handleVisibilityChange,
+		onColumnOrderChange: handleColumnOrderChange,
+		onColumnPinningChange: handleColumnPinningChange,
+		columnResizeMode: "onEnd",
+		enableRowSelection: selectionMode !== "none",
+		enableMultiRowSelection: selectionMode === "multiple",
+		enableColumnResizing: resizable,
+		manualSorting: true,
+		manualPagination: true,
+		manualFiltering: true
+	});
+	const visibleColumns = useMemo(() => {
+		const colMap = new Map(allColumns.map((c) => [c.id, c]));
+		return table.getVisibleLeafColumns().map((c) => colMap.get(c.id)).filter(Boolean);
+	}, [
+		allColumns,
+		table,
+		state.columnOrder,
+		state.columnVisibility
+	]);
+	const rowIds = useMemo(() => rows.map(getRowId), [rows, getRowId]);
+	const [containerWidth, setContainerWidth] = useState(0);
+	useLayoutEffect(() => {
+		const grid = gridRef.current;
+		const scroller = scrollContainerRef.current;
+		if (!grid) return;
+		const update = () => {
+			const w = scroller?.clientWidth ?? grid.clientWidth;
+			if (w > 0) setContainerWidth(w);
+		};
+		update();
+		const observer = new ResizeObserver(update);
+		observer.observe(grid);
+		if (scroller) observer.observe(scroller);
+		return () => observer.disconnect();
+	}, []);
+	const columnSizingInfo = table.getState().columnSizingInfo;
+	const columnSizes = useMemo(() => {
+		const sizes = {};
+		let baseTotal = selectionMode !== "none" ? 44 : 0;
+		const resizingId = columnSizingInfo.isResizingColumn || null;
+		const deltaOffset = columnSizingInfo.deltaOffset ?? 0;
+		for (const col of visibleColumns) {
+			const baseSize = table.getColumn(col.id)?.getSize() ?? col.width ?? DEFAULT_COL_WIDTH;
+			const liveSize = resizingId === col.id ? clampColumnWidth(col, baseSize + deltaOffset) : baseSize;
+			sizes[col.id] = liveSize;
+			baseTotal += liveSize;
+		}
+		distributeFlexWidths(sizes, visibleColumns, containerWidth - baseTotal);
+		return sizes;
+	}, [
+		visibleColumns,
+		table,
+		columnSizingInfo,
+		state.columnWidths,
+		containerWidth,
+		selectionMode
+	]);
+	const totalContentWidth = useMemo(() => {
+		let total = selectionMode !== "none" ? 44 : 0;
+		for (const col of visibleColumns) total += columnSizes[col.id] ?? 0;
+		return total;
+	}, [
+		visibleColumns,
+		columnSizes,
+		selectionMode
+	]);
+	const cssVars = useMemo(() => {
+		const vars = { "--grid-total-w": `${totalContentWidth}px` };
+		for (const col of visibleColumns) vars[`--col-${col.id}-size`] = columnSizes[col.id];
+		return vars;
+	}, [
+		visibleColumns,
+		columnSizes,
+		totalContentWidth
+	]);
+	const fireSelection = useCallback((next) => {
+		onChange((s) => ({
+			...s,
+			selection: next
+		}));
+		if (onSelectionChange) {
+			const idSet = next.selectedIds;
+			onSelectionChange(idSet, rows.filter((r) => idSet.has(getRowId(r))));
+		}
+	}, [
+		onChange,
+		onSelectionChange,
+		rows,
+		getRowId
+	]);
+	const handleRowClick = useCallback((row, rowId, event) => {
+		if (selectionMode !== "none") fireSelection(nextSelection({
+			current: state.selection,
+			rowId,
+			mode: selectionMode,
+			modifiers: {
+				shift: event.shiftKey,
+				ctrl: event.metaKey || event.ctrlKey
+			},
+			allRowIds: rowIds
+		}));
+		onRowClick?.(row, rowId, event);
+	}, [
+		selectionMode,
+		state.selection,
+		rowIds,
+		fireSelection,
+		onRowClick
+	]);
+	const handleSelectAll = useCallback(() => {
+		fireSelection(rowIds.length > 0 && rowIds.every((id) => state.selection.selectedIds.has(id)) ? {
+			selectedIds: /* @__PURE__ */ new Set(),
+			anchorId: null
+		} : {
+			selectedIds: new Set(rowIds),
+			anchorId: null
+		});
+	}, [
+		rowIds,
+		state.selection.selectedIds,
+		fireSelection
+	]);
+	const handleExportCsv = useCallback(() => {
+		if (typeof window !== "undefined" && rows.length > 0) {
+			const totalSuffix = totalRowCount != null && totalRowCount > rows.length ? ` of ${totalRowCount} total — load more rows first to include them` : "";
+			if (!window.confirm(`Export ${rows.length.toLocaleString()} loaded row${rows.length === 1 ? "" : "s"}${totalSuffix}?`)) return;
+		}
+		exportToCsv(rows, visibleColumns, exportFilename);
+	}, [
+		rows,
+		visibleColumns,
+		exportFilename,
+		totalRowCount
+	]);
+	const scrollContainerRef = useRef(null);
+	const headerScrollRef = useRef(null);
+	const stickyChromeRef = useRef(null);
+	const rowsClipRef = useRef(null);
+	const gridRef = useRef(null);
+	const measureElementFn = useCallback((el) => el.getBoundingClientRect().height, []);
+	const rowVirtualizer = useVirtualizer({
+		count: rows.length,
+		getScrollElement: () => scrollContainerRef.current,
+		estimateSize: () => estimatedRowHeight,
+		overscan,
+		getItemKey: (index) => {
+			const row = rows[index];
+			return row != null ? String(getRowId(row)) : index;
+		},
+		...isDynamicRowHeight ? { measureElement: measureElementFn } : {}
+	});
+	useLayoutEffect(() => {
+		const gridEl = gridRef.current;
+		const stickyEl = stickyChromeRef.current;
+		const bodyEl = scrollContainerRef.current;
+		const clipEl = rowsClipRef.current;
+		if (!gridEl || !stickyEl || !bodyEl || !clipEl) return;
+		const updateClip = () => {
+			const stickyRect = stickyEl.getBoundingClientRect();
+			const clipRect = clipEl.getBoundingClientRect();
+			const overlap = Math.max(0, stickyRect.bottom - clipRect.top);
+			clipEl.style.setProperty("--data-grid-sticky-overlap", `${overlap}px`);
+		};
+		updateClip();
+		bodyEl.addEventListener("scroll", updateClip);
+		window.addEventListener("scroll", updateClip, true);
+		window.addEventListener("resize", updateClip);
+		const observer = new ResizeObserver(updateClip);
+		observer.observe(gridEl);
+		observer.observe(stickyEl);
+		observer.observe(bodyEl);
+		return () => {
+			bodyEl.removeEventListener("scroll", updateClip);
+			window.removeEventListener("scroll", updateClip, true);
+			window.removeEventListener("resize", updateClip);
+			observer.disconnect();
+		};
+	}, []);
+	const handleBodyScroll = useCallback(() => {
+		const body = scrollContainerRef.current;
+		const header = headerScrollRef.current;
+		if (body && header) header.scrollLeft = body.scrollLeft;
+	}, []);
+	const toolbarCtx = useMemo(() => ({
+		state,
+		onChange,
+		columns: allColumns,
+		visibleColumns,
+		totalRowCount,
+		selectedRowCount: state.selection.selectedIds.size,
+		strings,
+		exportCsv: handleExportCsv
+	}), [
+		state,
+		onChange,
+		allColumns,
+		visibleColumns,
+		totalRowCount,
+		strings,
+		handleExportCsv
+	]);
+	const footerCtx = useMemo(() => ({
+		state,
+		totalRowCount,
+		visibleRowCount: rows.length,
+		selectedRowCount: state.selection.selectedIds.size,
+		paginationMode,
+		strings
+	}), [
+		state,
+		totalRowCount,
+		rows.length,
+		paginationMode,
+		strings
+	]);
+	const allSelected = rowIds.length > 0 && rowIds.every((id) => state.selection.selectedIds.has(id));
+	const someSelected = !allSelected && rowIds.some((id) => state.selection.selectedIds.has(id));
+	const infiniteScrollRootRef = paginationMode === "infinite" && (fillHeight || maxHeight != null) ? scrollContainerRef : void 0;
+	const headers = useMemo(() => table.getHeaderGroups()[0]?.headers.filter((h) => visibleColumns.some((c) => c.id === h.column.id)) ?? [], [table, visibleColumns]);
+	const headerByColId = useMemo(() => {
+		const m = /* @__PURE__ */ new Map();
+		for (const h of headers) m.set(h.column.id, h);
+		return m;
+	}, [headers]);
+	const isBounded = fillHeight || maxHeight != null;
+	return /* @__PURE__ */ jsxs("div", {
+		ref: gridRef,
+		className: cn("isolate flex w-full min-w-0 max-w-full flex-col bg-transparent rounded-[calc(var(--radius)*2)]", fillHeight ? "min-h-0 h-full" : "min-h-0 h-auto", isBounded && "overflow-hidden", className),
+		style: maxHeight != null ? {
+			...cssVars,
+			maxHeight
+		} : cssVars,
+		role: "grid",
+		"aria-rowcount": totalRowCount ?? rows.length,
+		"aria-colcount": visibleColumns.length,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: stickyChromeRef,
+				className: "sticky z-30 w-full min-w-0 shrink-0 overflow-visible rounded-t-[calc(var(--radius)*2)] bg-white/90 dark:bg-background/60 backdrop-blur-xl",
+				style: { top: stickyTop ?? (maxHeight != null ? 0 : "var(--data-grid-sticky-top, 0px)") },
+				children: [toolbar !== false && /* @__PURE__ */ jsx("div", {
+					className: "relative bg-transparent",
+					children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(DataGridToolbar, {
+						ctx: toolbarCtx,
+						extra: typeof toolbarExtra === "function" ? toolbarExtra(toolbarCtx) : toolbarExtra
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [isRefetching && /* @__PURE__ */ jsx("div", {
+						className: "absolute top-0 left-0 right-0 h-0.5 z-30 bg-foreground/[0.04] overflow-hidden",
+						children: /* @__PURE__ */ jsx("div", { className: "h-full w-1/3 bg-blue-500/60 rounded-full animate-pulse" })
+					}), /* @__PURE__ */ jsx("div", {
+						ref: headerScrollRef,
+						className: "w-full min-w-0 shrink-0 overflow-hidden border-b border-foreground/[0.06]",
+						children: /* @__PURE__ */ jsxs("div", {
+							className: "flex",
+							style: {
+								height: headerHeight,
+								minWidth: totalContentWidth
+							},
+							role: "row",
+							children: [selectionMode !== "none" && /* @__PURE__ */ jsx("div", {
+								className: "flex items-center justify-center border-r border-foreground/[0.04]",
+								style: { width: 44 },
+								children: selectionMode === "multiple" && /* @__PURE__ */ jsx(SelectionCheckbox, {
+									checked: allSelected,
+									indeterminate: someSelected,
+									onChange: handleSelectAll,
+									ariaLabel: "Select all rows on this page",
+									title: "Select all rows on this page"
+								})
+							}), visibleColumns.map((col) => {
+								const header = headerByColId.get(col.id);
+								if (!header) return null;
+								return /* @__PURE__ */ jsx(HeaderCell, {
+									header,
+									col,
+									resizable
+								}, col.id);
+							})]
+						})
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollContainerRef,
+				className: cn("relative z-0 w-full min-w-0 overflow-auto bg-transparent", isBounded ? "min-h-0 flex-1" : "flex-none", "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar]:h-1.5", "[&::-webkit-scrollbar-track]:bg-transparent", "[&::-webkit-scrollbar-thumb]:bg-foreground/[0.08] [&::-webkit-scrollbar-thumb]:rounded-full", "[&::-webkit-scrollbar-thumb]:hover:bg-foreground/[0.15]"),
+				onScroll: handleBodyScroll,
+				children: /* @__PURE__ */ jsxs("div", {
+					ref: rowsClipRef,
+					"data-data-grid-rows-clip": "",
+					className: "relative z-0",
+					style: {
+						minWidth: totalContentWidth,
+						clipPath: "inset(var(--data-grid-sticky-overlap, 0px) 0 0 0)"
+					},
+					children: [
+						isLoading && /* @__PURE__ */ jsx("div", {
+							style: { minWidth: totalContentWidth },
+							children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {
+								columns: visibleColumns,
+								height: estimatedRowHeight,
+								showCheckbox: selectionMode !== "none"
+							}, i))
+						}),
+						!isLoading && rows.length === 0 && /* @__PURE__ */ jsx("div", {
+							className: "flex items-center justify-center py-16 text-sm text-muted-foreground",
+							style: { minWidth: totalContentWidth },
+							children: emptyState ?? strings.noData
+						}),
+						!isLoading && rows.length > 0 && /* @__PURE__ */ jsx("div", {
+							style: {
+								height: rowVirtualizer.getTotalSize(),
+								width: "100%",
+								minWidth: totalContentWidth,
+								position: "relative"
+							},
+							children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
+								const row = rows[virtualRow.index] ?? throwErr(`DataGrid: virtualized row index ${virtualRow.index} out of range (rows.length=${rows.length})`);
+								const rowId = getRowId(row);
+								const isSelected = state.selection.selectedIds.has(rowId);
+								const isOddRow = virtualRow.index % 2 === 1;
+								return /* @__PURE__ */ jsxs("div", {
+									ref: isDynamicRowHeight ? rowVirtualizer.measureElement : void 0,
+									"data-index": virtualRow.index,
+									className: cn("absolute left-0 w-full flex", "border-b border-black/[0.03] dark:border-white/[0.03]", "transition-colors duration-75", isSelected ? "bg-blue-500/[0.06] dark:bg-blue-400/[0.08] hover:bg-blue-500/[0.08] dark:hover:bg-blue-400/[0.1]" : isOddRow ? "bg-foreground/[0.02] dark:bg-foreground/[0.03] hover:bg-foreground/[0.04] dark:hover:bg-foreground/[0.06]" : "hover:bg-foreground/[0.025] dark:hover:bg-foreground/[0.04]", (selectionMode !== "none" || onRowClick) && "cursor-pointer"),
+									style: {
+										...isDynamicRowHeight ? { minHeight: estimatedRowHeight } : { height: fixedRowHeight },
+										transform: `translateY(${virtualRow.start}px)`
+									},
+									onClick: (e) => {
+										if (!shouldIgnoreRowClick(e)) handleRowClick(row, rowId, e);
+									},
+									onDoubleClick: (e) => {
+										if (!shouldIgnoreRowClick(e)) onRowDoubleClick?.(row, rowId, e);
+									},
+									role: "row",
+									"aria-rowindex": virtualRow.index + 2,
+									"aria-selected": isSelected,
+									"data-row-id": rowId,
+									"data-state": isSelected ? "selected" : void 0,
+									children: [selectionMode !== "none" && /* @__PURE__ */ jsx("div", {
+										className: "flex items-center justify-center border-r border-black/[0.04] dark:border-white/[0.04]",
+										style: { width: 44 },
+										children: /* @__PURE__ */ jsx(SelectionCheckbox, {
+											checked: isSelected,
+											onChange: (event) => handleRowClick(row, rowId, event),
+											ariaLabel: `Select row ${rowId}`
+										})
+									}), visibleColumns.map((col) => /* @__PURE__ */ jsx(DataCell, {
+										col,
+										row,
+										rowId,
+										rowIndex: virtualRow.index,
+										isSelected,
+										dateDisplay: state.dateDisplay
+									}, col.id))]
+								}, rowId);
+							})
+						}),
+						paginationMode === "infinite" && hasMore && !isLoading && /* @__PURE__ */ jsx(InfiniteScrollSentinel, {
+							onIntersect: onLoadMore ?? NOOP,
+							isLoading: isLoadingMore,
+							rootRef: infiniteScrollRootRef,
+							strings
+						})
+					]
+				})
+			}),
+			footer !== false && /* @__PURE__ */ jsxs("div", {
+				className: "sticky bottom-0 z-30 shrink-0 overflow-hidden rounded-b-[calc(var(--radius)*2)] bg-white/90 dark:bg-background/60 backdrop-blur-xl",
+				children: [footer ? footer(footerCtx) : /* @__PURE__ */ jsx(DefaultFooter, {
+					ctx: footerCtx,
+					pagination: paginationMode,
+					onChange
+				}), footerExtra && (typeof footerExtra === "function" ? footerExtra(footerCtx) : footerExtra)]
+			})
+		]
+	});
+}
+
+//#endregion
+export { DataGrid, isDataGridInteractiveRowClickTarget };
+//# sourceMappingURL=data-grid.js.map