@bsol-oss/react-datatable5 13.0.1-beta.33 → 13.0.1-beta.35

package/dist/index.d.ts

@@ -1057,6 +1057,10 @@ interface TimeViewportGridProps {
     viewportStart?: TimeInput;
     viewportEnd?: TimeInput;
     tickCount?: number;
+    tickStrategy?: 'count' | 'timeUnit';
+    tickUnit?: 'minute' | 'hour' | 'day';
+    tickStep?: number;
+    format?: string;
     minorDivisions?: number;
     majorLineColor?: string;
     minorLineColor?: string;
@@ -1065,6 +1069,20 @@ interface TimeViewportGridProps {
     animationDurationMs?: number;
     animationEasing?: string;
 }
+interface TimeViewportBlockRenderArgs {
+    block: TimeViewportBlockItem;
+    geometry: {
+        leftPercent: number;
+        widthPercent: number;
+    };
+    index: number;
+}
+interface TimeViewportTrackRenderArgs {
+    trackIndex: number;
+    trackKey?: string | number;
+    trackBlocks: TimeViewportBlockItem[];
+    defaultContent: ReactNode;
+}
 interface TimeViewportBlocksProps {
     blocks: TimeViewportBlockItem[];
     viewportStart?: TimeInput;
@@ -1089,7 +1107,17 @@ interface TimeViewportBlocksProps {
         trackBlocks: TimeViewportBlockItem[];
         trackKey?: string | number;
     }) => ReactNode;
+    /** Custom render function for block content. The returned node is placed inside a positioning wrapper that handles translateX and transitions. */
+    renderBlock?: (args: TimeViewportBlockRenderArgs) => ReactNode;
+    /** Custom render function for an entire track row. Receives the default rendered content so you can wrap or replace it. */
+    renderTrack?: (args: TimeViewportTrackRenderArgs) => ReactNode;
     onBlockClick?: (block: TimeViewportBlockItem) => void;
+    /** Enable virtual scrolling for large track lists. */
+    virtualize?: boolean;
+    /** Fixed pixel height of the scroll container when virtualize is true. Defaults to 400. */
+    virtualHeight?: number;
+    /** Number of off-screen rows to render above/below the visible area. Defaults to 5. */
+    overscan?: number;
 }
 interface TimeViewportRootProps {
     viewportStart: TimeInput;
@@ -1172,8 +1200,8 @@ declare function TimeViewportHeader({ viewportStart, viewportEnd, tickCount, tic
  * Vertical grid lines for measuring block positions in the viewport.
  * Render inside a relative container that also contains blocks.
  */
-declare function TimeViewportGrid({ viewportStart, viewportEnd, tickCount, minorDivisions, majorLineColor, minorLineColor, showMinorLines, zIndex, animationDurationMs, animationEasing, }: TimeViewportGridProps): react_jsx_runtime.JSX.Element | null;
-declare function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height, minWidthPx, borderRadius, defaultColorPalette, showLabel, hideWhenOutOfView, hideEmptyTracks, gap, allowOverlap, overlapOpacity, renderTrackPrefix, renderTrackSuffix, onBlockClick, }: TimeViewportBlocksProps): react_jsx_runtime.JSX.Element;
+declare function TimeViewportGrid({ viewportStart, viewportEnd, tickCount, tickStrategy, tickUnit, tickStep, format, minorDivisions, majorLineColor, minorLineColor, showMinorLines, zIndex, animationDurationMs, animationEasing, }: TimeViewportGridProps): react_jsx_runtime.JSX.Element | null;
+declare function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height, minWidthPx, borderRadius, defaultColorPalette, showLabel, hideWhenOutOfView, hideEmptyTracks, gap, allowOverlap, overlapOpacity, renderTrackPrefix, renderTrackSuffix, renderBlock, renderTrack, onBlockClick, virtualize, virtualHeight, overscan, }: TimeViewportBlocksProps): react_jsx_runtime.JSX.Element;
 declare function TimeRangeZoom({ range, onRangeChange, minDurationMs, maxDurationMs, zoomFactor, resetDurationMs, showResetButton, disabled, labels, }: TimeRangeZoomProps): react_jsx_runtime.JSX.Element;
 declare function useTimeRangeZoom({ range, onRangeChange, minDurationMs, maxDurationMs, zoomFactor, resetDurationMs, disabled, labels, }: TimeRangeZoomProps): UseTimeRangeZoomResult;
 
@@ -1450,4 +1478,4 @@ declare module '@tanstack/react-table' {
     }
 }
 
-export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, type CustomQueryFn, type CustomQueryFnParams, type CustomQueryFnResponse, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerContext, DatePickerInput, type DatePickerInputProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, type LoadInitialValuesParams, type LoadInitialValuesResult, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, type TableFilterTagsProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type TimePickerLabels, TimeRangeZoom, type TimeRangeZoomLabels, type TimeRangeZoomProps, TimeViewportBlock, type TimeViewportBlockItem, type TimeViewportBlockProps, TimeViewportBlocks, type TimeViewportBlocksProps, TimeViewportGrid, type TimeViewportGridProps, TimeViewportHeader, type TimeViewportHeaderProps, type TimeViewportHeaderTick, TimeViewportMarkerLine, type TimeViewportMarkerLineProps, TimeViewportRoot, type TimeViewportRootProps, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type UseTimeRangeZoomResult, type UseTimeViewportBlockGeometryResult, type UseTimeViewportDerivedResult, type UseTimeViewportTicksResult, type ValidationErrorType, ViewDialog, type ViewableTimeRange, defaultRenderDisplay, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, useTimeRangeZoom, useTimeViewport, useTimeViewportBlockGeometry, useTimeViewportHeader, useTimeViewportTicks };
+export { CalendarDisplay, type CalendarDisplayProps, type CalendarEvent, type CalendarProps, CardHeader, type CardHeaderProps, type CustomJSONSchema7, type CustomJSONSchema7Definition, type CustomQueryFn, type CustomQueryFnParams, type CustomQueryFnResponse, DataDisplay, type DataDisplayProps, type DataResponse, DataTable, type DataTableDefaultState, type DataTableProps, DataTableServer, type DataTableServerProps, DatePickerContext, DatePickerInput, type DatePickerInputProps, type DatePickerLabels, type DatePickerProps, type DateTimePickerLabels, DefaultCardTitle, DefaultForm, type DefaultFormProps, DefaultTable, type DefaultTableProps, DefaultTableServer, type DefaultTableServerProps, DensityToggleButton, type DensityToggleButtonProps, type EditFilterButtonProps, EditSortingButton, type EditSortingButtonProps, type EditViewButtonProps, EmptyState, type EmptyStateProps, type EnumPickerLabels, ErrorAlert, type ErrorAlertProps, type FilePickerLabels, type FilePickerMediaFile, type FilePickerProps, FilterDialog, FormBody, type FormButtonLabels, FormRoot, type FormRootProps, FormTitle, type GetDateColorProps, type GetMultiDatesProps, type GetRangeDatesProps, type GetStyleProps, type GetVariantProps, GlobalFilter, type IdPickerLabels, type LoadInitialValuesParams, type LoadInitialValuesResult, MediaLibraryBrowser, type MediaLibraryBrowserProps, PageSizeControl, type PageSizeControlProps, Pagination, type QueryParams, type RangeCalendarProps, type RangeDatePickerLabels, type RangeDatePickerProps, RecordDisplay, type RecordDisplayProps, ReloadButton, type ReloadButtonProps, ResetFilteringButton, ResetSelectionButton, ResetSortingButton, type Result, RowCountText, SelectAllRowsToggle, type SelectAllRowsToggleProps, Table, TableBody, type TableBodyProps, TableCardContainer, type TableCardContainerProps, TableCards, type TableCardsProps, TableComponent, TableControls, type TableControlsProps, TableDataDisplay, type TableDataDisplayProps, TableFilter, TableFilterTags, type TableFilterTagsProps, TableFooter, type TableFooterProps, TableHeader, type TableHeaderProps, type TableHeaderTexts, TableLoadingComponent, type TableLoadingComponentProps, type TableProps, type TableRendererProps, type TableRowSelectorProps, TableSelector, TableSorter, TableViewer, TextCell, type TextCellProps, type TimePickerLabels, TimeRangeZoom, type TimeRangeZoomLabels, type TimeRangeZoomProps, TimeViewportBlock, type TimeViewportBlockItem, type TimeViewportBlockProps, type TimeViewportBlockRenderArgs, TimeViewportBlocks, type TimeViewportBlocksProps, TimeViewportGrid, type TimeViewportGridProps, TimeViewportHeader, type TimeViewportHeaderProps, type TimeViewportHeaderTick, TimeViewportMarkerLine, type TimeViewportMarkerLineProps, TimeViewportRoot, type TimeViewportRootProps, type TimeViewportTrackRenderArgs, type UseDataTableProps, type UseDataTableReturn, type UseDataTableServerProps, type UseDataTableServerReturn, type UseFormProps, type UseTimeRangeZoomResult, type UseTimeViewportBlockGeometryResult, type UseTimeViewportDerivedResult, type UseTimeViewportTicksResult, type ValidationErrorType, ViewDialog, type ViewableTimeRange, defaultRenderDisplay, getMultiDates, getRangeDates, useDataTable, useDataTableContext, useDataTableServer, useForm, useTimeRangeZoom, useTimeViewport, useTimeViewportBlockGeometry, useTimeViewportHeader, useTimeViewportTicks };

package/dist/index.js

@@ -32,6 +32,7 @@ var timezone = require('dayjs/plugin/timezone');
 var utc = require('dayjs/plugin/utc');
 var ti = require('react-icons/ti');
 var ajv = require('@hookform/resolvers/ajv');
+var reactVirtual = require('@tanstack/react-virtual');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 
 function _interopNamespaceDefault(e) {
@@ -8095,7 +8096,7 @@ function TimeViewportRoot({ viewportStart, viewportEnd, children, onViewportChan
     return (jsxRuntime.jsx(TimeViewportContext.Provider, { value: { viewportStart, viewportEnd }, children: jsxRuntime.jsx(react.Box, { ref: containerRef, position: "relative", width: "100%", cursor: enableDragPan ? (isDragging ? 'grabbing' : 'grab') : 'default', userSelect: enableDragPan ? 'none' : undefined, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: stopDragging, onPointerCancel: stopDragging, onWheel: handleWheel, children: children }) }));
 }
 function TimeViewportTrackRow({ trackKey, blocks, resolvedHeight, prefix, suffix, renderBlockNode, }) {
-    return (jsxRuntime.jsxs(react.HStack, { align: "stretch", gap: 2, children: [prefix ? (jsxRuntime.jsx(react.Box, { minW: "fit-content", display: "flex", alignItems: "center", children: prefix })) : null, jsxRuntime.jsx(react.Box, { position: "relative", width: "100%", height: resolvedHeight, children: blocks.map((item, index) => renderBlockNode(item, index)) }), suffix ? (jsxRuntime.jsx(react.Box, { minW: "fit-content", display: "flex", alignItems: "center", children: suffix })) : null] }, trackKey));
+    return (jsxRuntime.jsxs(react.Box, { width: "100%", overflowX: 'hidden', position: "relative", height: resolvedHeight, children: [jsxRuntime.jsx(react.Box, { position: "relative", width: "100%", height: "100%", children: blocks.map((item, index) => renderBlockNode(item, index)) }), prefix ? (jsxRuntime.jsx(react.Box, { position: "absolute", top: 0, insetInlineStart: 0, zIndex: 2, pointerEvents: "auto", children: prefix })) : null, suffix ? (jsxRuntime.jsx(react.Box, { position: "absolute", top: 0, insetInlineEnd: 0, zIndex: 2, pointerEvents: "auto", children: suffix })) : null] }, trackKey));
 }
 const defaultLabels = {
     zoomIn: 'Zoom in',
@@ -8333,7 +8334,7 @@ function TimeViewportMarkerLine({ timestamp, viewportStart, viewportEnd, height
         return null;
     if (hideWhenOutOfView && !marker.inView)
         return null;
-    return (jsxRuntime.jsx(react.Box, { position: "absolute", insetInlineStart: 0, insetInlineEnd: 0, top: 0, bottom: 0, pointerEvents: "none", zIndex: 100, height: height, children: jsxRuntime.jsxs(react.Box, { width: "100%", height: "100%", transform: `translateX(${marker.percent}%)`, transition: VIEWPORT_TRANSITION, transformOrigin: "left center", children: [jsxRuntime.jsx(react.Box, { width: `${lineWidthPx}px`, height: "100%", bg: color ?? `${colorPalette}.500`, _dark: { bg: color ?? `${colorPalette}.300` }, transform: "translateX(-50%)" }), showLabel && label ? (jsxRuntime.jsx(react.Text, { position: "absolute", insetInlineStart: 0, top: "100%", mt: 1, display: "inline-block", fontSize: "xs", whiteSpace: "nowrap", color: color ?? `${colorPalette}.700`, _dark: { color: color ?? `${colorPalette}.200` }, transform: "translateX(-50%)", children: label })) : null] }) }));
+    return (jsxRuntime.jsx(react.Box, { position: "absolute", insetInlineStart: 0, insetInlineEnd: 0, top: 0, bottom: 0, pointerEvents: "none", zIndex: 100, height: height, children: jsxRuntime.jsxs(react.Box, { width: "100%", height: "100%", transform: `translateX(${marker.percent}%)`, transition: VIEWPORT_TRANSITION, transformOrigin: "left center", children: [jsxRuntime.jsx(react.Box, { width: `${lineWidthPx}px`, height: "100%", bg: color ?? `${colorPalette}.500`, _dark: { bg: color ?? `${colorPalette}.500` }, transform: "translateX(-50%)" }), showLabel && label ? (jsxRuntime.jsx(react.Text, { position: "absolute", insetInlineStart: 0, top: "100%", mt: 1, display: "inline-block", fontSize: "xs", whiteSpace: "nowrap", color: color ?? `${colorPalette}.700`, _dark: { color: color ?? `${colorPalette}.500` }, transform: "translateX(-50%)", children: label })) : null] }) }));
 }
 /**
  * Header labels for timeline viewport time scale.
@@ -8357,35 +8358,64 @@ function TimeViewportHeader({ viewportStart, viewportEnd, tickCount = 7, tickStr
  * Vertical grid lines for measuring block positions in the viewport.
  * Render inside a relative container that also contains blocks.
  */
-function TimeViewportGrid({ viewportStart, viewportEnd, tickCount = 8, minorDivisions = 2, majorLineColor = 'gray.300', minorLineColor = 'gray.200', showMinorLines = true, zIndex = 0, animationDurationMs = VIEWPORT_TRANSITION_DURATION_MS, animationEasing = VIEWPORT_TRANSITION_EASING, }) {
-    const viewport = useResolvedViewport(viewportStart, viewportEnd);
-    const start = viewport ? parseTimeInput(viewport.viewportStart) : null;
-    const end = viewport ? parseTimeInput(viewport.viewportEnd) : null;
-    if (!start || !end || !end.isAfter(start))
+function TimeViewportGrid({ viewportStart, viewportEnd, tickCount = 8, tickStrategy = 'count', tickUnit = 'hour', tickStep = 1, format, minorDivisions = 2, majorLineColor = 'gray.300', minorLineColor = 'gray.200', showMinorLines = true, zIndex = 0, animationDurationMs = VIEWPORT_TRANSITION_DURATION_MS, animationEasing = VIEWPORT_TRANSITION_EASING, }) {
+    const { isValidViewport, getTicks } = useTimeViewport(viewportStart, viewportEnd, format);
+    const majorTicks = getTicks({ tickStrategy, tickCount, tickUnit, tickStep });
+    if (!isValidViewport || majorTicks.length < 2)
         return null;
-    const safeTickCount = Math.max(2, tickCount);
-    const majorTicks = Array.from({ length: safeTickCount }, (_, index) => ({
-        index,
-        percent: (index / (safeTickCount - 1)) * 100,
-    }));
     const safeMinorDivisions = Math.max(1, minorDivisions);
     const transitionValue = animationDurationMs > 0
         ? `transform ${animationDurationMs}ms ${animationEasing}, opacity ${animationDurationMs}ms ${animationEasing}`
         : undefined;
     const minorTicks = showMinorLines
-        ? Array.from({ length: safeTickCount - 1 }, (_, segmentIndex) => {
-            const base = (segmentIndex / (safeTickCount - 1)) * 100;
-            const next = ((segmentIndex + 1) / (safeTickCount - 1)) * 100;
+        ? majorTicks.slice(0, -1).flatMap((tick, segmentIndex) => {
+            const base = tick.percent;
+            const next = majorTicks[segmentIndex + 1].percent;
             const segment = [];
             for (let step = 1; step < safeMinorDivisions; step += 1) {
                 segment.push(base + ((next - base) * step) / safeMinorDivisions);
             }
             return segment;
-        }).flat()
+        })
         : [];
     return (jsxRuntime.jsxs(react.Box, { position: "absolute", inset: 0, pointerEvents: "none", zIndex: zIndex, children: [minorTicks.map((percent, index) => (jsxRuntime.jsx(react.Box, { position: "absolute", inset: 0, transform: `translateX(${percent}%)`, transition: transitionValue, children: jsxRuntime.jsx(react.Box, { position: "absolute", insetInlineStart: 0, top: 0, bottom: 0, width: "1px", bg: minorLineColor, _dark: { bg: 'gray.700' } }) }, `minor-grid-${index}`))), majorTicks.map((tick) => (jsxRuntime.jsx(react.Box, { position: "absolute", inset: 0, transform: `translateX(${tick.percent}%)`, transition: transitionValue, children: jsxRuntime.jsx(react.Box, { position: "absolute", insetInlineStart: 0, top: 0, bottom: 0, width: "1px", bg: majorLineColor, _dark: { bg: 'gray.600' } }) }, `major-grid-${tick.index}`)))] }));
 }
-function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px', minWidthPx = 2, borderRadius = 'sm', defaultColorPalette = 'blue', showLabel = true, hideWhenOutOfView = true, hideEmptyTracks = true, gap = 2, allowOverlap = false, overlapOpacity = 0.9, renderTrackPrefix, renderTrackSuffix, onBlockClick, }) {
+function VirtualizedTrackList({ tracks, resolvedHeight, gap, virtualHeight, overscan, renderTrackPrefix, renderTrackSuffix, renderTrack, renderBlockNode, }) {
+    const parentRef = React.useRef(null);
+    const rowHeightPx = parseInt(resolvedHeight, 10) || 28;
+    const gapPx = gap * 4; // Chakra spacing token to px (1 unit = 4px)
+    const virtualizer = reactVirtual.useVirtualizer({
+        count: tracks.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => rowHeightPx + gapPx,
+        overscan,
+    });
+    return (jsxRuntime.jsx(react.Box, { ref: parentRef, overflowY: "auto", height: `${virtualHeight}px`, children: jsxRuntime.jsx(react.Box, { height: `${virtualizer.getTotalSize()}px`, position: "relative", children: virtualizer.getVirtualItems().map((virtualRow) => {
+                const track = tracks[virtualRow.index];
+                const trackBlocks = track.blocks.map((item) => item.block);
+                const prefix = renderTrackPrefix?.({
+                    trackIndex: virtualRow.index,
+                    trackBlocks,
+                    trackKey: track.trackKeyRaw,
+                });
+                const suffix = renderTrackSuffix?.({
+                    trackIndex: virtualRow.index,
+                    trackBlocks,
+                    trackKey: track.trackKeyRaw,
+                });
+                const defaultContent = (jsxRuntime.jsx(TimeViewportTrackRow, { trackKey: track.trackKey, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
+                const trackContent = renderTrack
+                    ? renderTrack({
+                        trackIndex: virtualRow.index,
+                        trackKey: track.trackKeyRaw,
+                        trackBlocks,
+                        defaultContent,
+                    })
+                    : defaultContent;
+                return (jsxRuntime.jsx(react.Box, { position: "absolute", top: 0, left: 0, width: "100%", transform: `translateY(${virtualRow.start}px)`, children: trackContent }, track.trackKey));
+            }) }) }));
+}
+function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px', minWidthPx = 2, borderRadius = 'sm', defaultColorPalette = 'blue', showLabel = true, hideWhenOutOfView = true, hideEmptyTracks = true, gap = 2, allowOverlap = false, overlapOpacity = 0.9, renderTrackPrefix, renderTrackSuffix, renderBlock, renderTrack, onBlockClick, virtualize = false, virtualHeight = 400, overscan = 5, }) {
     const { getGeometry, toTimeMs } = useTimeViewportBlockGeometry(viewportStart, viewportEnd);
     const resolvedHeight = typeof height === 'number' ? `${height}px` : height;
     const expandedBlocks = flattenTrackBlocks(blocks);
@@ -8420,74 +8450,81 @@ function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px
             onBlockClick?.(block);
         };
         const isBlockClickable = Boolean(block.onClick || onBlockClick);
-        return (jsxRuntime.jsx(react.Box, { position: "absolute", inset: 0, pointerEvents: "none", children: jsxRuntime.jsx(react.Box, { width: "100%", height: "100%", transform: `translateX(${geometry.leftPercent}%)`, transition: VIEWPORT_TRANSITION, children: jsxRuntime.jsx(react.Box, { width: `max(${geometry.widthPercent}%, ${minWidthPx}px)`, height: "100%", borderRadius: borderRadius, bg: block.background ??
-                        `${block.colorPalette ?? defaultColorPalette}.500`, _dark: {
-                        bg: block.background ??
-                            `${block.colorPalette ?? defaultColorPalette}.900`,
-                    }, display: "flex", alignItems: "center", justifyContent: "center", px: 2, overflow: "hidden", opacity: allowOverlap ? overlapOpacity : 1, zIndex: indexInLayer + 1, pointerEvents: "auto", onClick: isBlockClickable ? handleBlockClick : undefined, cursor: isBlockClickable ? 'pointer' : 'default', children: showLabel && block.label ? (jsxRuntime.jsx(react.Text, { fontSize: "xs", lineClamp: 1, color: "white", _dark: { color: 'gray.100' }, children: block.label })) : null }) }) }, block.id));
+        const content = renderBlock ? (renderBlock({ block, geometry, index: indexInLayer })) : (jsxRuntime.jsx(react.Box, { width: `max(${geometry.widthPercent}%, ${minWidthPx}px)`, height: "100%", borderRadius: borderRadius, bg: block.background ?? `${block.colorPalette ?? defaultColorPalette}.500`, _dark: {
+                bg: block.background ??
+                    `${block.colorPalette ?? defaultColorPalette}.900`,
+            }, display: "flex", alignItems: "center", justifyContent: "center", px: 2, overflow: "hidden", opacity: allowOverlap ? overlapOpacity : 1, zIndex: indexInLayer + 1, pointerEvents: "auto", onClick: isBlockClickable ? handleBlockClick : undefined, cursor: isBlockClickable ? 'pointer' : 'default', children: showLabel && block.label ? (jsxRuntime.jsx(react.Text, { fontSize: "xs", lineClamp: 1, children: block.label })) : null }));
+        return (jsxRuntime.jsx(react.Box, { height: "100%", position: "absolute", inset: 0, pointerEvents: "none", transform: `translateX(${geometry.leftPercent}%)`, transition: VIEWPORT_TRANSITION, children: content }, block.id));
     };
+    // ---------- Resolve tracks ----------
     const explicitTrackKeys = Array.from(new Set(expandedBlocks
         .map((item) => item.track)
         .filter((track) => track !== undefined)));
-    if (explicitTrackKeys.length > 0) {
-        const tracks = explicitTrackKeys
-            .map((trackKey) => ({
-            trackKey,
-            blocks: parsedBlocks.filter((item) => item.block.track === trackKey),
-        }))
-            .filter((track) => !hideEmptyTracks || track.blocks.length > 0);
-        return (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: gap, children: tracks.map((track, trackIndex) => {
-                const trackBlocks = track.blocks.map((item) => item.block);
-                const prefix = renderTrackPrefix?.({
-                    trackIndex,
-                    trackBlocks,
-                    trackKey: track.trackKey,
-                });
-                const suffix = renderTrackSuffix?.({
-                    trackIndex,
-                    trackBlocks,
-                    trackKey: track.trackKey,
-                });
-                return (jsxRuntime.jsx(TimeViewportTrackRow, { trackKey: `track-keyed-${String(track.trackKey)}`, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
-            }) }));
+    const resolvedTracks = React.useMemo(() => {
+        if (explicitTrackKeys.length > 0) {
+            return explicitTrackKeys
+                .map((trackKey) => ({
+                trackKey: `track-keyed-${String(trackKey)}`,
+                trackKeyRaw: trackKey,
+                blocks: parsedBlocks.filter((item) => item.block.track === trackKey),
+            }))
+                .filter((track) => !hideEmptyTracks || track.blocks.length > 0);
+        }
+        const autoPackedTracks = (() => {
+            const sortedBlocks = [...parsedBlocks]
+                .filter(({ startMs, endMs }) => Number.isFinite(startMs) && Number.isFinite(endMs))
+                .sort((a, b) => {
+                if (a.startMs === b.startMs)
+                    return a.endMs - b.endMs;
+                return a.startMs - b.startMs;
+            });
+            const trackLastEndTimes = [];
+            const tracks = [];
+            sortedBlocks.forEach((item) => {
+                const trackIndex = trackLastEndTimes.findIndex((endMs) => item.startMs >= endMs);
+                if (trackIndex === -1) {
+                    trackLastEndTimes.push(item.endMs);
+                    tracks.push([item]);
+                }
+                else {
+                    trackLastEndTimes[trackIndex] = item.endMs;
+                    tracks[trackIndex].push(item);
+                }
+            });
+            return tracks;
+        })();
+        const packed = allowOverlap ? [parsedBlocks] : autoPackedTracks;
+        return packed.map((track, trackIndex) => ({
+            trackKey: `track-row-${trackIndex}`,
+            trackKeyRaw: undefined,
+            blocks: track,
+        }));
+    }, [allowOverlap, explicitTrackKeys, hideEmptyTracks, parsedBlocks]);
+    // ---------- Render ----------
+    if (virtualize) {
+        return (jsxRuntime.jsx(VirtualizedTrackList, { tracks: resolvedTracks, resolvedHeight: resolvedHeight, gap: gap, virtualHeight: virtualHeight, overscan: overscan, renderTrackPrefix: renderTrackPrefix, renderTrackSuffix: renderTrackSuffix, renderTrack: renderTrack, renderBlockNode: renderBlockNode }));
     }
-    const autoPackedTracks = (() => {
-        const sortedBlocks = [...parsedBlocks]
-            .filter(({ startMs, endMs }) => Number.isFinite(startMs) && Number.isFinite(endMs))
-            .sort((a, b) => {
-            if (a.startMs === b.startMs)
-                return a.endMs - b.endMs;
-            return a.startMs - b.startMs;
-        });
-        const trackLastEndTimes = [];
-        const tracks = [];
-        sortedBlocks.forEach((item) => {
-            const trackIndex = trackLastEndTimes.findIndex((endMs) => item.startMs >= endMs);
-            if (trackIndex === -1) {
-                trackLastEndTimes.push(item.endMs);
-                tracks.push([item]);
-            }
-            else {
-                trackLastEndTimes[trackIndex] = item.endMs;
-                tracks[trackIndex].push(item);
-            }
-        });
-        return tracks;
-    })();
-    const tracks = allowOverlap ? [parsedBlocks] : autoPackedTracks;
-    return (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: gap, children: tracks.map((track, trackIndex) => {
-            const trackBlocks = track.map((item) => item.block);
+    return (jsxRuntime.jsx(react.VStack, { align: "stretch", gap: gap, children: resolvedTracks.map((track, trackIndex) => {
+            const trackBlocks = track.blocks.map((item) => item.block);
             const prefix = renderTrackPrefix?.({
                 trackIndex,
                 trackBlocks,
-                trackKey: undefined,
+                trackKey: track.trackKeyRaw,
             });
             const suffix = renderTrackSuffix?.({
                 trackIndex,
                 trackBlocks,
-                trackKey: undefined,
+                trackKey: track.trackKeyRaw,
             });
-            return (jsxRuntime.jsx(TimeViewportTrackRow, { trackKey: `track-row-${trackIndex}`, blocks: track, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
+            const defaultContent = (jsxRuntime.jsx(TimeViewportTrackRow, { trackKey: track.trackKey, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
+            return renderTrack
+                ? renderTrack({
+                    trackIndex,
+                    trackKey: track.trackKeyRaw,
+                    trackBlocks,
+                    defaultContent,
+                })
+                : defaultContent;
         }) }));
 }
 function TimeRangeZoom({ range, onRangeChange, minDurationMs = DEFAULT_MIN_DURATION_MS, maxDurationMs = DEFAULT_MAX_DURATION_MS, zoomFactor = DEFAULT_ZOOM_FACTOR, resetDurationMs, showResetButton = true, disabled = false, labels, }) {

package/dist/index.mjs

@@ -31,6 +31,7 @@ import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
 import { TiDeleteOutline } from 'react-icons/ti';
 import { ajvResolver } from '@hookform/resolvers/ajv';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import { rankItem } from '@tanstack/match-sorter-utils';
 
 const DataTableContext = createContext({
@@ -8075,7 +8076,7 @@ function TimeViewportRoot({ viewportStart, viewportEnd, children, onViewportChan
     return (jsx(TimeViewportContext.Provider, { value: { viewportStart, viewportEnd }, children: jsx(Box, { ref: containerRef, position: "relative", width: "100%", cursor: enableDragPan ? (isDragging ? 'grabbing' : 'grab') : 'default', userSelect: enableDragPan ? 'none' : undefined, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: stopDragging, onPointerCancel: stopDragging, onWheel: handleWheel, children: children }) }));
 }
 function TimeViewportTrackRow({ trackKey, blocks, resolvedHeight, prefix, suffix, renderBlockNode, }) {
-    return (jsxs(HStack, { align: "stretch", gap: 2, children: [prefix ? (jsx(Box, { minW: "fit-content", display: "flex", alignItems: "center", children: prefix })) : null, jsx(Box, { position: "relative", width: "100%", height: resolvedHeight, children: blocks.map((item, index) => renderBlockNode(item, index)) }), suffix ? (jsx(Box, { minW: "fit-content", display: "flex", alignItems: "center", children: suffix })) : null] }, trackKey));
+    return (jsxs(Box, { width: "100%", overflowX: 'hidden', position: "relative", height: resolvedHeight, children: [jsx(Box, { position: "relative", width: "100%", height: "100%", children: blocks.map((item, index) => renderBlockNode(item, index)) }), prefix ? (jsx(Box, { position: "absolute", top: 0, insetInlineStart: 0, zIndex: 2, pointerEvents: "auto", children: prefix })) : null, suffix ? (jsx(Box, { position: "absolute", top: 0, insetInlineEnd: 0, zIndex: 2, pointerEvents: "auto", children: suffix })) : null] }, trackKey));
 }
 const defaultLabels = {
     zoomIn: 'Zoom in',
@@ -8313,7 +8314,7 @@ function TimeViewportMarkerLine({ timestamp, viewportStart, viewportEnd, height
         return null;
     if (hideWhenOutOfView && !marker.inView)
         return null;
-    return (jsx(Box, { position: "absolute", insetInlineStart: 0, insetInlineEnd: 0, top: 0, bottom: 0, pointerEvents: "none", zIndex: 100, height: height, children: jsxs(Box, { width: "100%", height: "100%", transform: `translateX(${marker.percent}%)`, transition: VIEWPORT_TRANSITION, transformOrigin: "left center", children: [jsx(Box, { width: `${lineWidthPx}px`, height: "100%", bg: color ?? `${colorPalette}.500`, _dark: { bg: color ?? `${colorPalette}.300` }, transform: "translateX(-50%)" }), showLabel && label ? (jsx(Text, { position: "absolute", insetInlineStart: 0, top: "100%", mt: 1, display: "inline-block", fontSize: "xs", whiteSpace: "nowrap", color: color ?? `${colorPalette}.700`, _dark: { color: color ?? `${colorPalette}.200` }, transform: "translateX(-50%)", children: label })) : null] }) }));
+    return (jsx(Box, { position: "absolute", insetInlineStart: 0, insetInlineEnd: 0, top: 0, bottom: 0, pointerEvents: "none", zIndex: 100, height: height, children: jsxs(Box, { width: "100%", height: "100%", transform: `translateX(${marker.percent}%)`, transition: VIEWPORT_TRANSITION, transformOrigin: "left center", children: [jsx(Box, { width: `${lineWidthPx}px`, height: "100%", bg: color ?? `${colorPalette}.500`, _dark: { bg: color ?? `${colorPalette}.500` }, transform: "translateX(-50%)" }), showLabel && label ? (jsx(Text, { position: "absolute", insetInlineStart: 0, top: "100%", mt: 1, display: "inline-block", fontSize: "xs", whiteSpace: "nowrap", color: color ?? `${colorPalette}.700`, _dark: { color: color ?? `${colorPalette}.500` }, transform: "translateX(-50%)", children: label })) : null] }) }));
 }
 /**
  * Header labels for timeline viewport time scale.
@@ -8337,35 +8338,64 @@ function TimeViewportHeader({ viewportStart, viewportEnd, tickCount = 7, tickStr
  * Vertical grid lines for measuring block positions in the viewport.
  * Render inside a relative container that also contains blocks.
  */
-function TimeViewportGrid({ viewportStart, viewportEnd, tickCount = 8, minorDivisions = 2, majorLineColor = 'gray.300', minorLineColor = 'gray.200', showMinorLines = true, zIndex = 0, animationDurationMs = VIEWPORT_TRANSITION_DURATION_MS, animationEasing = VIEWPORT_TRANSITION_EASING, }) {
-    const viewport = useResolvedViewport(viewportStart, viewportEnd);
-    const start = viewport ? parseTimeInput(viewport.viewportStart) : null;
-    const end = viewport ? parseTimeInput(viewport.viewportEnd) : null;
-    if (!start || !end || !end.isAfter(start))
+function TimeViewportGrid({ viewportStart, viewportEnd, tickCount = 8, tickStrategy = 'count', tickUnit = 'hour', tickStep = 1, format, minorDivisions = 2, majorLineColor = 'gray.300', minorLineColor = 'gray.200', showMinorLines = true, zIndex = 0, animationDurationMs = VIEWPORT_TRANSITION_DURATION_MS, animationEasing = VIEWPORT_TRANSITION_EASING, }) {
+    const { isValidViewport, getTicks } = useTimeViewport(viewportStart, viewportEnd, format);
+    const majorTicks = getTicks({ tickStrategy, tickCount, tickUnit, tickStep });
+    if (!isValidViewport || majorTicks.length < 2)
         return null;
-    const safeTickCount = Math.max(2, tickCount);
-    const majorTicks = Array.from({ length: safeTickCount }, (_, index) => ({
-        index,
-        percent: (index / (safeTickCount - 1)) * 100,
-    }));
     const safeMinorDivisions = Math.max(1, minorDivisions);
     const transitionValue = animationDurationMs > 0
         ? `transform ${animationDurationMs}ms ${animationEasing}, opacity ${animationDurationMs}ms ${animationEasing}`
         : undefined;
     const minorTicks = showMinorLines
-        ? Array.from({ length: safeTickCount - 1 }, (_, segmentIndex) => {
-            const base = (segmentIndex / (safeTickCount - 1)) * 100;
-            const next = ((segmentIndex + 1) / (safeTickCount - 1)) * 100;
+        ? majorTicks.slice(0, -1).flatMap((tick, segmentIndex) => {
+            const base = tick.percent;
+            const next = majorTicks[segmentIndex + 1].percent;
             const segment = [];
             for (let step = 1; step < safeMinorDivisions; step += 1) {
                 segment.push(base + ((next - base) * step) / safeMinorDivisions);
             }
             return segment;
-        }).flat()
+        })
         : [];
     return (jsxs(Box, { position: "absolute", inset: 0, pointerEvents: "none", zIndex: zIndex, children: [minorTicks.map((percent, index) => (jsx(Box, { position: "absolute", inset: 0, transform: `translateX(${percent}%)`, transition: transitionValue, children: jsx(Box, { position: "absolute", insetInlineStart: 0, top: 0, bottom: 0, width: "1px", bg: minorLineColor, _dark: { bg: 'gray.700' } }) }, `minor-grid-${index}`))), majorTicks.map((tick) => (jsx(Box, { position: "absolute", inset: 0, transform: `translateX(${tick.percent}%)`, transition: transitionValue, children: jsx(Box, { position: "absolute", insetInlineStart: 0, top: 0, bottom: 0, width: "1px", bg: majorLineColor, _dark: { bg: 'gray.600' } }) }, `major-grid-${tick.index}`)))] }));
 }
-function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px', minWidthPx = 2, borderRadius = 'sm', defaultColorPalette = 'blue', showLabel = true, hideWhenOutOfView = true, hideEmptyTracks = true, gap = 2, allowOverlap = false, overlapOpacity = 0.9, renderTrackPrefix, renderTrackSuffix, onBlockClick, }) {
+function VirtualizedTrackList({ tracks, resolvedHeight, gap, virtualHeight, overscan, renderTrackPrefix, renderTrackSuffix, renderTrack, renderBlockNode, }) {
+    const parentRef = useRef(null);
+    const rowHeightPx = parseInt(resolvedHeight, 10) || 28;
+    const gapPx = gap * 4; // Chakra spacing token to px (1 unit = 4px)
+    const virtualizer = useVirtualizer({
+        count: tracks.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => rowHeightPx + gapPx,
+        overscan,
+    });
+    return (jsx(Box, { ref: parentRef, overflowY: "auto", height: `${virtualHeight}px`, children: jsx(Box, { height: `${virtualizer.getTotalSize()}px`, position: "relative", children: virtualizer.getVirtualItems().map((virtualRow) => {
+                const track = tracks[virtualRow.index];
+                const trackBlocks = track.blocks.map((item) => item.block);
+                const prefix = renderTrackPrefix?.({
+                    trackIndex: virtualRow.index,
+                    trackBlocks,
+                    trackKey: track.trackKeyRaw,
+                });
+                const suffix = renderTrackSuffix?.({
+                    trackIndex: virtualRow.index,
+                    trackBlocks,
+                    trackKey: track.trackKeyRaw,
+                });
+                const defaultContent = (jsx(TimeViewportTrackRow, { trackKey: track.trackKey, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
+                const trackContent = renderTrack
+                    ? renderTrack({
+                        trackIndex: virtualRow.index,
+                        trackKey: track.trackKeyRaw,
+                        trackBlocks,
+                        defaultContent,
+                    })
+                    : defaultContent;
+                return (jsx(Box, { position: "absolute", top: 0, left: 0, width: "100%", transform: `translateY(${virtualRow.start}px)`, children: trackContent }, track.trackKey));
+            }) }) }));
+}
+function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px', minWidthPx = 2, borderRadius = 'sm', defaultColorPalette = 'blue', showLabel = true, hideWhenOutOfView = true, hideEmptyTracks = true, gap = 2, allowOverlap = false, overlapOpacity = 0.9, renderTrackPrefix, renderTrackSuffix, renderBlock, renderTrack, onBlockClick, virtualize = false, virtualHeight = 400, overscan = 5, }) {
     const { getGeometry, toTimeMs } = useTimeViewportBlockGeometry(viewportStart, viewportEnd);
     const resolvedHeight = typeof height === 'number' ? `${height}px` : height;
     const expandedBlocks = flattenTrackBlocks(blocks);
@@ -8400,74 +8430,81 @@ function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height = '28px
             onBlockClick?.(block);
         };
         const isBlockClickable = Boolean(block.onClick || onBlockClick);
-        return (jsx(Box, { position: "absolute", inset: 0, pointerEvents: "none", children: jsx(Box, { width: "100%", height: "100%", transform: `translateX(${geometry.leftPercent}%)`, transition: VIEWPORT_TRANSITION, children: jsx(Box, { width: `max(${geometry.widthPercent}%, ${minWidthPx}px)`, height: "100%", borderRadius: borderRadius, bg: block.background ??
-                        `${block.colorPalette ?? defaultColorPalette}.500`, _dark: {
-                        bg: block.background ??
-                            `${block.colorPalette ?? defaultColorPalette}.900`,
-                    }, display: "flex", alignItems: "center", justifyContent: "center", px: 2, overflow: "hidden", opacity: allowOverlap ? overlapOpacity : 1, zIndex: indexInLayer + 1, pointerEvents: "auto", onClick: isBlockClickable ? handleBlockClick : undefined, cursor: isBlockClickable ? 'pointer' : 'default', children: showLabel && block.label ? (jsx(Text, { fontSize: "xs", lineClamp: 1, color: "white", _dark: { color: 'gray.100' }, children: block.label })) : null }) }) }, block.id));
+        const content = renderBlock ? (renderBlock({ block, geometry, index: indexInLayer })) : (jsx(Box, { width: `max(${geometry.widthPercent}%, ${minWidthPx}px)`, height: "100%", borderRadius: borderRadius, bg: block.background ?? `${block.colorPalette ?? defaultColorPalette}.500`, _dark: {
+                bg: block.background ??
+                    `${block.colorPalette ?? defaultColorPalette}.900`,
+            }, display: "flex", alignItems: "center", justifyContent: "center", px: 2, overflow: "hidden", opacity: allowOverlap ? overlapOpacity : 1, zIndex: indexInLayer + 1, pointerEvents: "auto", onClick: isBlockClickable ? handleBlockClick : undefined, cursor: isBlockClickable ? 'pointer' : 'default', children: showLabel && block.label ? (jsx(Text, { fontSize: "xs", lineClamp: 1, children: block.label })) : null }));
+        return (jsx(Box, { height: "100%", position: "absolute", inset: 0, pointerEvents: "none", transform: `translateX(${geometry.leftPercent}%)`, transition: VIEWPORT_TRANSITION, children: content }, block.id));
     };
+    // ---------- Resolve tracks ----------
     const explicitTrackKeys = Array.from(new Set(expandedBlocks
         .map((item) => item.track)
         .filter((track) => track !== undefined)));
-    if (explicitTrackKeys.length > 0) {
-        const tracks = explicitTrackKeys
-            .map((trackKey) => ({
-            trackKey,
-            blocks: parsedBlocks.filter((item) => item.block.track === trackKey),
-        }))
-            .filter((track) => !hideEmptyTracks || track.blocks.length > 0);
-        return (jsx(VStack, { align: "stretch", gap: gap, children: tracks.map((track, trackIndex) => {
-                const trackBlocks = track.blocks.map((item) => item.block);
-                const prefix = renderTrackPrefix?.({
-                    trackIndex,
-                    trackBlocks,
-                    trackKey: track.trackKey,
-                });
-                const suffix = renderTrackSuffix?.({
-                    trackIndex,
-                    trackBlocks,
-                    trackKey: track.trackKey,
-                });
-                return (jsx(TimeViewportTrackRow, { trackKey: `track-keyed-${String(track.trackKey)}`, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
-            }) }));
+    const resolvedTracks = useMemo(() => {
+        if (explicitTrackKeys.length > 0) {
+            return explicitTrackKeys
+                .map((trackKey) => ({
+                trackKey: `track-keyed-${String(trackKey)}`,
+                trackKeyRaw: trackKey,
+                blocks: parsedBlocks.filter((item) => item.block.track === trackKey),
+            }))
+                .filter((track) => !hideEmptyTracks || track.blocks.length > 0);
+        }
+        const autoPackedTracks = (() => {
+            const sortedBlocks = [...parsedBlocks]
+                .filter(({ startMs, endMs }) => Number.isFinite(startMs) && Number.isFinite(endMs))
+                .sort((a, b) => {
+                if (a.startMs === b.startMs)
+                    return a.endMs - b.endMs;
+                return a.startMs - b.startMs;
+            });
+            const trackLastEndTimes = [];
+            const tracks = [];
+            sortedBlocks.forEach((item) => {
+                const trackIndex = trackLastEndTimes.findIndex((endMs) => item.startMs >= endMs);
+                if (trackIndex === -1) {
+                    trackLastEndTimes.push(item.endMs);
+                    tracks.push([item]);
+                }
+                else {
+                    trackLastEndTimes[trackIndex] = item.endMs;
+                    tracks[trackIndex].push(item);
+                }
+            });
+            return tracks;
+        })();
+        const packed = allowOverlap ? [parsedBlocks] : autoPackedTracks;
+        return packed.map((track, trackIndex) => ({
+            trackKey: `track-row-${trackIndex}`,
+            trackKeyRaw: undefined,
+            blocks: track,
+        }));
+    }, [allowOverlap, explicitTrackKeys, hideEmptyTracks, parsedBlocks]);
+    // ---------- Render ----------
+    if (virtualize) {
+        return (jsx(VirtualizedTrackList, { tracks: resolvedTracks, resolvedHeight: resolvedHeight, gap: gap, virtualHeight: virtualHeight, overscan: overscan, renderTrackPrefix: renderTrackPrefix, renderTrackSuffix: renderTrackSuffix, renderTrack: renderTrack, renderBlockNode: renderBlockNode }));
     }
-    const autoPackedTracks = (() => {
-        const sortedBlocks = [...parsedBlocks]
-            .filter(({ startMs, endMs }) => Number.isFinite(startMs) && Number.isFinite(endMs))
-            .sort((a, b) => {
-            if (a.startMs === b.startMs)
-                return a.endMs - b.endMs;
-            return a.startMs - b.startMs;
-        });
-        const trackLastEndTimes = [];
-        const tracks = [];
-        sortedBlocks.forEach((item) => {
-            const trackIndex = trackLastEndTimes.findIndex((endMs) => item.startMs >= endMs);
-            if (trackIndex === -1) {
-                trackLastEndTimes.push(item.endMs);
-                tracks.push([item]);
-            }
-            else {
-                trackLastEndTimes[trackIndex] = item.endMs;
-                tracks[trackIndex].push(item);
-            }
-        });
-        return tracks;
-    })();
-    const tracks = allowOverlap ? [parsedBlocks] : autoPackedTracks;
-    return (jsx(VStack, { align: "stretch", gap: gap, children: tracks.map((track, trackIndex) => {
-            const trackBlocks = track.map((item) => item.block);
+    return (jsx(VStack, { align: "stretch", gap: gap, children: resolvedTracks.map((track, trackIndex) => {
+            const trackBlocks = track.blocks.map((item) => item.block);
             const prefix = renderTrackPrefix?.({
                 trackIndex,
                 trackBlocks,
-                trackKey: undefined,
+                trackKey: track.trackKeyRaw,
             });
             const suffix = renderTrackSuffix?.({
                 trackIndex,
                 trackBlocks,
-                trackKey: undefined,
+                trackKey: track.trackKeyRaw,
             });
-            return (jsx(TimeViewportTrackRow, { trackKey: `track-row-${trackIndex}`, blocks: track, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
+            const defaultContent = (jsx(TimeViewportTrackRow, { trackKey: track.trackKey, blocks: track.blocks, resolvedHeight: resolvedHeight, prefix: prefix, suffix: suffix, renderBlockNode: renderBlockNode }));
+            return renderTrack
+                ? renderTrack({
+                    trackIndex,
+                    trackKey: track.trackKeyRaw,
+                    trackBlocks,
+                    defaultContent,
+                })
+                : defaultContent;
         }) }));
 }
 function TimeRangeZoom({ range, onRangeChange, minDurationMs = DEFAULT_MIN_DURATION_MS, maxDurationMs = DEFAULT_MAX_DURATION_MS, zoomFactor = DEFAULT_ZOOM_FACTOR, resetDurationMs, showResetButton = true, disabled = false, labels, }) {

package/dist/types/components/DatePicker/TimeRangeZoom.d.ts

@@ -105,6 +105,10 @@ export interface TimeViewportGridProps {
     viewportStart?: TimeInput;
     viewportEnd?: TimeInput;
     tickCount?: number;
+    tickStrategy?: 'count' | 'timeUnit';
+    tickUnit?: 'minute' | 'hour' | 'day';
+    tickStep?: number;
+    format?: string;
     minorDivisions?: number;
     majorLineColor?: string;
     minorLineColor?: string;
@@ -113,6 +117,20 @@ export interface TimeViewportGridProps {
     animationDurationMs?: number;
     animationEasing?: string;
 }
+export interface TimeViewportBlockRenderArgs {
+    block: TimeViewportBlockItem;
+    geometry: {
+        leftPercent: number;
+        widthPercent: number;
+    };
+    index: number;
+}
+export interface TimeViewportTrackRenderArgs {
+    trackIndex: number;
+    trackKey?: string | number;
+    trackBlocks: TimeViewportBlockItem[];
+    defaultContent: ReactNode;
+}
 export interface TimeViewportBlocksProps {
     blocks: TimeViewportBlockItem[];
     viewportStart?: TimeInput;
@@ -137,7 +155,17 @@ export interface TimeViewportBlocksProps {
         trackBlocks: TimeViewportBlockItem[];
         trackKey?: string | number;
     }) => ReactNode;
+    /** Custom render function for block content. The returned node is placed inside a positioning wrapper that handles translateX and transitions. */
+    renderBlock?: (args: TimeViewportBlockRenderArgs) => ReactNode;
+    /** Custom render function for an entire track row. Receives the default rendered content so you can wrap or replace it. */
+    renderTrack?: (args: TimeViewportTrackRenderArgs) => ReactNode;
     onBlockClick?: (block: TimeViewportBlockItem) => void;
+    /** Enable virtual scrolling for large track lists. */
+    virtualize?: boolean;
+    /** Fixed pixel height of the scroll container when virtualize is true. Defaults to 400. */
+    virtualHeight?: number;
+    /** Number of off-screen rows to render above/below the visible area. Defaults to 5. */
+    overscan?: number;
 }
 export interface TimeViewportRootProps {
     viewportStart: TimeInput;
@@ -220,8 +248,8 @@ export declare function TimeViewportHeader({ viewportStart, viewportEnd, tickCou
  * Vertical grid lines for measuring block positions in the viewport.
  * Render inside a relative container that also contains blocks.
  */
-export declare function TimeViewportGrid({ viewportStart, viewportEnd, tickCount, minorDivisions, majorLineColor, minorLineColor, showMinorLines, zIndex, animationDurationMs, animationEasing, }: TimeViewportGridProps): import("react/jsx-runtime").JSX.Element | null;
-export declare function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height, minWidthPx, borderRadius, defaultColorPalette, showLabel, hideWhenOutOfView, hideEmptyTracks, gap, allowOverlap, overlapOpacity, renderTrackPrefix, renderTrackSuffix, onBlockClick, }: TimeViewportBlocksProps): import("react/jsx-runtime").JSX.Element;
+export declare function TimeViewportGrid({ viewportStart, viewportEnd, tickCount, tickStrategy, tickUnit, tickStep, format, minorDivisions, majorLineColor, minorLineColor, showMinorLines, zIndex, animationDurationMs, animationEasing, }: TimeViewportGridProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function TimeViewportBlocks({ blocks, viewportStart, viewportEnd, height, minWidthPx, borderRadius, defaultColorPalette, showLabel, hideWhenOutOfView, hideEmptyTracks, gap, allowOverlap, overlapOpacity, renderTrackPrefix, renderTrackSuffix, renderBlock, renderTrack, onBlockClick, virtualize, virtualHeight, overscan, }: TimeViewportBlocksProps): import("react/jsx-runtime").JSX.Element;
 export declare function TimeRangeZoom({ range, onRangeChange, minDurationMs, maxDurationMs, zoomFactor, resetDurationMs, showResetButton, disabled, labels, }: TimeRangeZoomProps): import("react/jsx-runtime").JSX.Element;
 export declare function useTimeRangeZoom({ range, onRangeChange, minDurationMs, maxDurationMs, zoomFactor, resetDurationMs, disabled, labels, }: TimeRangeZoomProps): UseTimeRangeZoomResult;
 export {};

package/dist/types/components/DatePicker/index.d.ts

@@ -6,4 +6,4 @@ export { TimeRangeZoom, TimeViewportRoot, TimeViewportBlock, TimeViewportBlocks,
 export { UniversalPicker } from './UniversalPicker';
 export { DatePickerInput } from './DatePicker';
 export type { DatePickerProps, CalendarProps, GetDateColorProps, GetVariantProps, } from './DatePicker';
-export type { ViewableTimeRange, TimeRangeZoomLabels, TimeRangeZoomProps, TimeViewportRootProps, TimeViewportBlockProps, TimeViewportBlockItem, TimeViewportBlocksProps, TimeViewportGridProps, TimeViewportHeaderProps, TimeViewportMarkerLineProps, } from './TimeRangeZoom';
+export type { ViewableTimeRange, TimeRangeZoomLabels, TimeRangeZoomProps, TimeViewportRootProps, TimeViewportBlockProps, TimeViewportBlockItem, TimeViewportBlocksProps, TimeViewportBlockRenderArgs, TimeViewportTrackRenderArgs, TimeViewportGridProps, TimeViewportHeaderProps, TimeViewportMarkerLineProps, } from './TimeRangeZoom';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bsol-oss/react-datatable5",
-  "version": "13.0.1-beta.33",
+  "version": "13.0.1-beta.35",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -45,6 +45,7 @@
     "@tanstack/match-sorter-utils": "^8.15.1",
     "@tanstack/react-query": "^5.66.9",
     "@tanstack/react-table": "^8.21.2",
+    "@tanstack/react-virtual": "^3.13.0",
     "@uidotdev/usehooks": "^2.4.1",
     "ajv": "^8.12.0",
     "ajv-errors": "^3.0.0",
@@ -64,6 +65,7 @@
     "@storybook/addon-docs": "^10.0.7",
     "@storybook/addon-onboarding": "^10.0.7",
     "@storybook/react-vite": "^10.0.7",
+    "@tanstack/react-virtual": "^3.13.18",
     "@types/ajv-errors": "^2.0.0",
     "@types/json-schema": "^7.0.15",
     "@types/react": "19.0.2",