@stackframe/dashboard-ui-components 2.8.86 → 2.8.89

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

@@ -6,10 +6,11 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef } from "react";
 import { clearSelection, exportToCsv, formatGridDate, getSortDirection, getSortIndex, isColumnVisible, resolveColumnValue, resolveColumnWidth, selectAll, toggleRowSelection, toggleSort } from "./state.js";
 import { resolveDataGridStrings } from "./strings.js";
+import { throwErr } from "@stackframe/stack-shared/dist/utils/errors";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { DesignSkeleton } from "../skeleton.js";
-import { DataGridToolbar } from "./data-grid-toolbar.js";
 import { applyDraggedColumnWidth, clampColumnWidth, createGridSizingStyle, getColumnSizingStyle } from "./data-grid-sizing.js";
+import { DataGridToolbar } from "./data-grid-toolbar.js";
 
 //#region src/components/data-grid/data-grid.tsx
 function ResizeHandle({ onResize, onResizeEnd }) {
@@ -69,6 +70,37 @@ function ResizeHandle({ onResize, onResizeEnd }) {
 		onPointerDown
 	});
 }
+function getNearestVerticalScrollElement(element) {
+	let current = element?.parentElement ?? null;
+	while (current) {
+		const style = window.getComputedStyle(current);
+		const overflowY = style.overflowY === "visible" ? style.overflow : style.overflowY;
+		if ((overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") && current.scrollHeight > current.clientHeight + 1) return current;
+		current = current.parentElement;
+	}
+	return window;
+}
+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 HeaderCell({ col, isSorted, sortIndex, resizable, onSort, onResize, onResizeEnd }) {
 	const ctx = {
 		columnId: col.id,
@@ -79,7 +111,7 @@ function HeaderCell({ col, isSorted, sortIndex, resizable, onSort, onResize, onR
 	const label = typeof col.header === "function" ? col.header(ctx) : col.header;
 	const sortable = col.sortable !== false;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("group/header relative flex items-center gap-1.5 px-3 select-none bg-transparent", "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0", sortable && "cursor-pointer"),
+		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: getColumnSizingStyle(col),
 		"data-col-id": col.id,
 		onClick: (e) => sortable && onSort(col.id, e.metaKey || e.ctrlKey),
@@ -87,7 +119,7 @@ function HeaderCell({ col, isSorted, sortIndex, resizable, onSort, onResize, onR
 		"aria-sort": isSorted === "asc" ? "ascending" : isSorted === "desc" ? "descending" : "none",
 		children: [
 			/* @__PURE__ */ jsx("span", {
-				className: cn("flex-1 truncate text-xs font-semibold uppercase tracking-wider text-muted-foreground", col.align === "center" && "text-center", col.align === "right" && "text-right"),
+				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
 			}),
 			isSorted && /* @__PURE__ */ jsxs("span", {
@@ -137,8 +169,9 @@ function DataCell({ col, row, rowId, rowIndex, isSelected, dateDisplay }) {
 	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 items-center px-3 truncate bg-transparent", "border-r border-black/[0.04] dark:border-white/[0.04] last:border-r-0", "text-sm text-foreground", col.align === "center" && "justify-center", col.align === "right" && "justify-end", hasCellClick && "cursor-pointer"),
+		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: getColumnSizingStyle(col),
 		"data-col-id": col.id,
 		role: "gridcell",
@@ -150,7 +183,10 @@ function DataCell({ col, row, rowId, rowIndex, isSelected, dateDisplay }) {
 			e.stopPropagation();
 			col.onCellDoubleClick(ctx, e);
 		} : void 0,
-		children: content
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("min-w-0", isWrap ? "flex-1" : "truncate"),
+			children: content
+		})
 	});
 }
 function formatCellValue(value) {
@@ -190,6 +226,11 @@ function renderDateCell(value, dateDisplay, col) {
 		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",
@@ -204,7 +245,7 @@ function SkeletonRow({ columns, height, showCheckbox }) {
 			style: getColumnSizingStyle(col),
 			children: /* @__PURE__ */ jsx(DesignSkeleton, {
 				className: "h-3.5 rounded-md",
-				style: { width: `${40 + Math.random() * 40}%` }
+				style: { width: `${40 + hashStringToInt(col.id) % 40}%` }
 			})
 		}, col.id))]
 	});
@@ -226,17 +267,21 @@ function SelectionCheckbox({ checked, indeterminate, onChange, ariaLabel }) {
 		})
 	});
 }
-function InfiniteScrollSentinel({ onIntersect, isLoading, strings }) {
+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();
-		}, { rootMargin: "200px" });
+		}, {
+			root: rootRef?.current ?? null,
+			rootMargin: "200px"
+		});
 		observer.observe(el);
 		return () => observer.disconnect();
-	}, [onIntersect]);
+	}, [onIntersect, rootRef]);
 	return /* @__PURE__ */ jsx("div", {
 		ref,
 		className: "flex items-center justify-center py-4",
@@ -513,6 +558,39 @@ function DefaultFooter({ ctx, pagination, onChange }) {
 * and footer all call it for you. You do not need to wire any of this
 * manually.
 *
+* ## Cell overflow and dynamic row heights
+*
+* By default every cell truncates its content with an ellipsis
+* (`cellOverflow: "truncate"`). For columns whose content should wrap
+* — badge lists, multi-line text, permission chips — set
+* `cellOverflow: "wrap"` on the column definition.
+*
+* To let rows grow to fit their tallest cell, set `rowHeight="auto"`
+* on the grid. The virtualizer will measure each row after render and
+* adjust scroll positions accordingly. Pair with `estimatedRowHeight`
+* (default 44) for better scroll-position estimates before measurement.
+*
+* ```tsx
+* // Columns: UUIDs truncate, auth-method badges wrap
+* const columns = [
+*   { id: "userId", header: "User ID", width: 130 },                      // default truncate
+*   { id: "auth", header: "Auth methods", width: 150, cellOverflow: "wrap",
+*     renderCell: ({ row }) => (
+*       <div className="flex flex-wrap gap-1">
+*         {row.authTypes.map((t) => <Badge key={t}>{t}</Badge>)}
+*       </div>
+*     ),
+*   },
+* ];
+*
+* <DataGrid columns={columns} rowHeight="auto" estimatedRowHeight={48} ... />
+* ```
+*
+* With a fixed numeric `rowHeight` (the default), `cellOverflow: "wrap"`
+* still lets content wrap within the row, but anything exceeding the
+* fixed height is clipped. This is useful when you want controlled
+* wrapping without variable row heights.
+*
 * ## Height and scrolling
 *
 * DataGrid is NOT a card. It has no border, rounded corners, or shadow of
@@ -553,7 +631,10 @@ function DefaultFooter({ ctx, pagination, onChange }) {
 * toggle for `date` / `dateTime` columns.
 */
 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 = 44, headerHeight = 44, overscan = 5, maxHeight, toolbar, toolbarExtra, emptyState, loadingState, footer, footerExtra, exportFilename = "export", strings: stringsOverride, className, onRowClick, onRowDoubleClick, onSelectionChange, onSortChange } = 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 } = props;
+	const isDynamicRowHeight = rowHeightProp === "auto";
+	const fixedRowHeight = isDynamicRowHeight ? void 0 : rowHeightProp;
+	const estimatedRowHeight = estimatedRowHeightProp ?? fixedRowHeight ?? 44;
 	const strings = useMemo(() => resolveDataGridStrings(stringsOverride), [stringsOverride]);
 	const visibleColumns = useMemo(() => (state.columnOrder.length > 0 ? state.columnOrder.map((id) => allColumns.find((c) => c.id === id)).filter(Boolean) : allColumns).filter((col) => isColumnVisible(col.id, state.columnVisibility)), [
 		allColumns,
@@ -582,15 +663,17 @@ function DataGrid(props) {
 	const resizeRef = useRef(null);
 	const gridRef = useRef(null);
 	const handleSort = useCallback((columnId, multi) => {
-		onChange((s) => {
-			const next = toggleSort(s.sorting, columnId, multi);
-			onSortChange?.(next);
-			return {
-				...s,
-				sorting: next
-			};
-		});
-	}, [onChange, onSortChange]);
+		const next = toggleSort(state.sorting, columnId, multi);
+		onChange((s) => ({
+			...s,
+			sorting: next
+		}));
+		onSortChange?.(next);
+	}, [
+		onChange,
+		onSortChange,
+		state.sorting
+	]);
 	const handleResize = useCallback((columnId, delta) => {
 		const col = allColumns.find((c) => c.id === columnId);
 		if (!col) return;
@@ -628,17 +711,17 @@ function DataGrid(props) {
 		}));
 	}, [onChange]);
 	const handleRowClick = useCallback((row, rowId, event) => {
-		if (selectionMode !== "none") onChange((s) => {
-			const next = toggleRowSelection(s.selection, rowId, selectionMode, event.shiftKey, event.metaKey || event.ctrlKey, rowIds);
+		if (selectionMode !== "none") {
+			const next = toggleRowSelection(state.selection, rowId, selectionMode, event.shiftKey, event.metaKey || event.ctrlKey, rowIds);
+			onChange((s) => ({
+				...s,
+				selection: next
+			}));
 			if (onSelectionChange) {
 				const selectedRows = rows.filter((r) => next.selectedIds.has(getRowId(r)));
-				setTimeout(() => onSelectionChange(next.selectedIds, selectedRows), 0);
+				onSelectionChange(next.selectedIds, selectedRows);
 			}
-			return {
-				...s,
-				selection: next
-			};
-		});
+		}
 		onRowClick?.(row, rowId, event);
 	}, [
 		selectionMode,
@@ -647,29 +730,27 @@ function DataGrid(props) {
 		onSelectionChange,
 		rowIds,
 		rows,
-		getRowId
+		getRowId,
+		state.selection
 	]);
 	const handleRowSelectionCheckboxClick = useCallback((row, rowId, event) => {
 		handleRowClick(row, rowId, event);
 	}, [handleRowClick]);
 	const handleSelectAll = useCallback(() => {
-		onChange((s) => {
-			const allSelected = rowIds.every((id) => s.selection.selectedIds.has(id));
-			const next = allSelected ? clearSelection() : selectAll(rowIds);
-			if (onSelectionChange) {
-				const selectedRows = allSelected ? [] : rows;
-				setTimeout(() => onSelectionChange(next.selectedIds, [...selectedRows]), 0);
-			}
-			return {
-				...s,
-				selection: next
-			};
-		});
+		const allSelectedNow = rowIds.every((id) => state.selection.selectedIds.has(id));
+		const next = allSelectedNow ? clearSelection() : selectAll(rowIds);
+		const selectedRows = allSelectedNow ? [] : rows;
+		onChange((s) => ({
+			...s,
+			selection: next
+		}));
+		if (onSelectionChange) onSelectionChange(next.selectedIds, [...selectedRows]);
 	}, [
 		onChange,
 		rowIds,
 		rows,
-		onSelectionChange
+		onSelectionChange,
+		state.selection
 	]);
 	const handleExportCsv = useCallback(() => {
 		exportToCsv(rows, visibleColumns, exportFilename);
@@ -680,12 +761,118 @@ function DataGrid(props) {
 	]);
 	const scrollContainerRef = useRef(null);
 	const headerScrollRef = useRef(null);
+	const stickyChromeRef = useRef(null);
+	const rowsClipRef = useRef(null);
+	const measureElementFn = useCallback((el) => el.getBoundingClientRect().height, []);
 	const rowVirtualizer = useVirtualizer({
 		count: rows.length,
 		getScrollElement: () => scrollContainerRef.current,
-		estimateSize: () => rowHeight,
-		overscan
+		estimateSize: () => estimatedRowHeight,
+		overscan,
+		getItemKey: (index) => {
+			const row = rows[index];
+			return row != null ? String(getRowId(row)) : index;
+		},
+		...isDynamicRowHeight ? { measureElement: measureElementFn } : {}
 	});
+	useLayoutEffect(() => {
+		const grid = gridRef.current;
+		const stickyEl = stickyChromeRef.current;
+		if (!grid || !stickyEl) return;
+		const parseRgba = (raw) => {
+			const rgbaMatch = raw.match(/rgba?\(\s*([\d.]+),\s*([\d.]+),\s*([\d.]+)(?:,\s*([\d.]+))?\s*\)/);
+			if (!rgbaMatch) return null;
+			const alphaRaw = rgbaMatch[4];
+			return [
+				Number(rgbaMatch[1]),
+				Number(rgbaMatch[2]),
+				Number(rgbaMatch[3]),
+				alphaRaw === void 0 ? 1 : Number(alphaRaw)
+			];
+		};
+		const blendOver = (base, top) => {
+			const [tr, tg, tb, ta] = top;
+			const [br, bg, bb, ba] = base;
+			const outA = ta + ba * (1 - ta);
+			if (outA === 0) return [
+				0,
+				0,
+				0,
+				0
+			];
+			return [
+				(tr * ta + br * ba * (1 - ta)) / outA,
+				(tg * ta + bg * ba * (1 - ta)) / outA,
+				(tb * ta + bb * ba * (1 - ta)) / outA,
+				outA
+			];
+		};
+		const detect = () => {
+			const layers = [];
+			let ancestor = grid.parentElement;
+			while (ancestor) {
+				const parsed = parseRgba(getComputedStyle(ancestor).backgroundColor);
+				if (parsed && parsed[3] > 0) {
+					layers.push(parsed);
+					if (parsed[3] >= 1) break;
+				}
+				ancestor = ancestor.parentElement;
+			}
+			if (layers.length === 0) {
+				stickyEl.style.backgroundColor = "";
+				return;
+			}
+			let result = layers[layers.length - 1];
+			for (let i = layers.length - 2; i >= 0; i--) result = blendOver(result, layers[i]);
+			const [r, g, b] = result;
+			stickyEl.style.backgroundColor = `rgb(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)})`;
+		};
+		detect();
+		const observer = new MutationObserver(detect);
+		observer.observe(document.documentElement, {
+			attributes: true,
+			attributeFilter: ["class"]
+		});
+		return () => observer.disconnect();
+	}, []);
+	useLayoutEffect(() => {
+		const gridEl = gridRef.current;
+		const stickyEl = stickyChromeRef.current;
+		const bodyEl = scrollContainerRef.current;
+		const clipEl = rowsClipRef.current;
+		if (!gridEl || !stickyEl || !bodyEl || !clipEl) return;
+		const verticalScrollEl = fillHeight ? bodyEl : getNearestVerticalScrollElement(gridEl);
+		let extraObservedScrollEl = null;
+		if (verticalScrollEl instanceof HTMLElement && verticalScrollEl !== bodyEl) extraObservedScrollEl = verticalScrollEl;
+		const updateClip = () => {
+			const stickyRect = stickyEl.getBoundingClientRect();
+			const clipRect = clipEl.getBoundingClientRect();
+			const overlap = Math.max(0, stickyRect.bottom - clipRect.top);
+			const clipValue = overlap > 0 ? `inset(${overlap}px 0 0 0)` : "";
+			const maskValue = overlap > 0 ? `linear-gradient(to bottom, transparent 0px, transparent ${overlap}px, black ${overlap}px, black 100%)` : "";
+			clipEl.style.clipPath = clipValue;
+			clipEl.style.setProperty("-webkit-clip-path", clipValue);
+			clipEl.style.maskImage = maskValue;
+			clipEl.style.setProperty("-webkit-mask-image", maskValue);
+		};
+		updateClip();
+		bodyEl.addEventListener("scroll", updateClip);
+		if (verticalScrollEl === window) window.addEventListener("scroll", updateClip, true);
+		else if (extraObservedScrollEl) extraObservedScrollEl.addEventListener("scroll", updateClip);
+		window.addEventListener("resize", updateClip);
+		const ro = new ResizeObserver(updateClip);
+		ro.observe(gridEl);
+		ro.observe(stickyEl);
+		ro.observe(bodyEl);
+		if (extraObservedScrollEl) ro.observe(extraObservedScrollEl);
+		return () => {
+			bodyEl.removeEventListener("scroll", updateClip);
+			if (verticalScrollEl === window) window.removeEventListener("scroll", updateClip, true);
+			else if (extraObservedScrollEl) extraObservedScrollEl.removeEventListener("scroll", updateClip);
+			window.removeEventListener("resize", updateClip);
+			ro.disconnect();
+		};
+	}, [fillHeight]);
 	const handleBodyScroll = useCallback(() => {
 		const body = scrollContainerRef.current;
 		const header = headerScrollRef.current;
@@ -725,9 +912,10 @@ function DataGrid(props) {
 	]);
 	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;
 	return /* @__PURE__ */ jsxs("div", {
 		ref: gridRef,
-		className: cn("flex flex-col h-full min-h-0 bg-transparent", className),
+		className: cn("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", className),
 		style: maxHeight != null ? {
 			...gridSizingStyle,
 			maxHeight
@@ -736,23 +924,24 @@ function DataGrid(props) {
 		"aria-rowcount": totalRowCount ?? rows.length,
 		"aria-colcount": visibleColumns.length,
 		children: [
-			toolbar !== false && /* @__PURE__ */ jsx("div", {
-				className: "relative shrink-0 bg-transparent",
-				children: toolbar ? toolbar(toolbarCtx) : /* @__PURE__ */ jsx(DataGridToolbar, {
-					ctx: toolbarCtx,
-					extra: typeof toolbarExtra === "function" ? toolbarExtra(toolbarCtx) : toolbarExtra
-				})
-			}),
 			/* @__PURE__ */ jsxs("div", {
-				className: "relative flex min-h-0 flex-1 flex-col",
-				children: [
-					isRefetching && /* @__PURE__ */ jsx("div", {
+				ref: stickyChromeRef,
+				className: "sticky z-20 w-full min-w-0 shrink-0 rounded-t-[calc(var(--radius)*2)] bg-background",
+				style: { top: stickyTop ?? "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", {
+					}), /* @__PURE__ */ jsx("div", {
 						ref: headerScrollRef,
-						className: "overflow-hidden shrink-0 border-b border-foreground/[0.06]",
+						className: "w-full min-w-0 shrink-0 overflow-hidden border-b border-foreground/[0.06]",
 						children: /* @__PURE__ */ jsxs("div", {
 							className: "flex",
 							style: {
@@ -779,77 +968,89 @@ function DataGrid(props) {
 								onResizeEnd: handleResizeEnd
 							}, col.id))]
 						})
-					}),
-					/* @__PURE__ */ jsxs("div", {
-						ref: scrollContainerRef,
-						className: cn("min-h-0 overflow-auto flex-1 bg-transparent", "[&::-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: [
-							isLoading && /* @__PURE__ */ jsx("div", {
-								style: { minWidth: visibleColumnMetrics.totalWidth },
-								children: loadingState ?? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(SkeletonRow, {
-									columns: visibleColumns,
-									height: rowHeight,
-									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: visibleColumnMetrics.totalWidth },
-								children: emptyState ?? strings.noData
-							}),
-							!isLoading && rows.length > 0 && /* @__PURE__ */ jsx("div", {
-								style: {
-									height: rowVirtualizer.getTotalSize(),
-									width: "100%",
-									minWidth: visibleColumnMetrics.totalWidth,
-									position: "relative"
-								},
-								children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-									const row = rows[virtualRow.index];
-									const rowId = getRowId(row);
-									const isSelected = state.selection.selectedIds.has(rowId);
-									const isOddRow = virtualRow.index % 2 === 1;
-									return /* @__PURE__ */ jsxs("div", {
-										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" && "cursor-pointer"),
-										style: {
-											height: rowHeight,
-											transform: `translateY(${virtualRow.start}px)`
-										},
-										onClick: (e) => handleRowClick(row, rowId, e),
-										onDoubleClick: (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) => handleRowSelectionCheckboxClick(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 ?? (() => {}),
-								isLoading: isLoadingMore,
-								strings
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref: scrollContainerRef,
+				className: cn("w-full min-w-0 overflow-auto bg-transparent", fillHeight ? "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,
+					children: [
+						isLoading && /* @__PURE__ */ jsx("div", {
+							style: { minWidth: visibleColumnMetrics.totalWidth },
+							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: visibleColumnMetrics.totalWidth },
+							children: emptyState ?? strings.noData
+						}),
+						!isLoading && rows.length > 0 && /* @__PURE__ */ jsx("div", {
+							style: {
+								height: rowVirtualizer.getTotalSize(),
+								width: "100%",
+								minWidth: visibleColumnMetrics.totalWidth,
+								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)) return;
+										handleRowClick(row, rowId, e);
+									},
+									onDoubleClick: (e) => {
+										if (shouldIgnoreRowClick(e)) return;
+										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) => handleRowSelectionCheckboxClick(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: "relative z-10 shrink-0 bg-transparent",
@@ -864,5 +1065,5 @@ function DataGrid(props) {
 }
 
 //#endregion
-export { DataGrid };
+export { DataGrid, isDataGridInteractiveRowClickTarget };
 //# sourceMappingURL=data-grid.js.map