4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 51:T6716,'use client' 'use no memo' import { memo, useCallback, useEffect, useRef, useState } from 'react' import type { CSSProperties, ReactNode } from 'react' import { useDataGrid } from '@/components/spaceui/data-grid' import { DataGridTableBase, DataGridTableBody, DataGridTableEmpty, DataGridTableFillBodyCell, DataGridTableFillHeadCell, DataGridTableFoot, DataGridTableHead, DataGridTableHeadRow, DataGridTableHeadRowCell, DataGridTableHeadRowCellResize, DataGridTableRenderedRow, DataGridTableRowSpacer, DataGridTableViewport, getDataGridScrollAreaViewport, getDataGridTableMergedHeaderGroups, getDataGridTableRowSections, getPinningStyles, hasDataGridTableRightPinnedColumns, } from '@/components/spaceui/data-grid-table' import { flexRender } from '@tanstack/react-table' import type { Column, Row, Table } from '@tanstack/react-table' import { useVirtualizer } from '@tanstack/react-virtual' import type { VirtualItem, Virtualizer, VirtualizerOptions } from '@tanstack/react-virtual' import { cn } from '@/lib/utils' import { Spinner } from '@/components/ui/spinner' type DataGridTableVirtualScrollElements = { containerElement: HTMLDivElement | null scrollElement: HTMLElement | null } type DataGridTableVirtualizerInstance = Virtualizer type DataGridTableVirtualScrollAlignment = 'auto' | 'center' | 'start' | 'end' type DataGridTableVirtualScrollRequest = { align: DataGridTableVirtualScrollAlignment behavior: ScrollBehavior containerElement: HTMLDivElement headerSticky: boolean isVirtualizationEnabled: boolean rowId: string | undefined rowIndex: number scrollElement: HTMLElement } function isSameDataGridTableScrollRequest( previous: DataGridTableVirtualScrollRequest | null, next: DataGridTableVirtualScrollRequest, ) { return ( previous?.align === next.align && previous.behavior === next.behavior && previous.containerElement === next.containerElement && previous.headerSticky === next.headerSticky && previous.isVirtualizationEnabled === next.isVirtualizationEnabled && previous.rowId === next.rowId && previous.rowIndex === next.rowIndex && previous.scrollElement === next.scrollElement ) } function getDataGridTableScrollTarget({ align, clientHeight, rowBottom, rowHeight, rowTop, scrollHeight, scrollTop, viewportTopOffset = 0, }: { align: DataGridTableVirtualScrollAlignment clientHeight: number rowBottom: number rowHeight: number rowTop: number scrollHeight: number scrollTop: number viewportTopOffset?: number }) { const visibleHeight = Math.max(0, clientHeight - viewportTopOffset) const viewportTop = scrollTop + viewportTopOffset const viewportBottom = scrollTop + clientHeight const targetTop = align === 'auto' ? rowTop < viewportTop ? rowTop - viewportTopOffset : rowBottom > viewportBottom ? rowBottom - clientHeight : null : align === 'start' ? rowTop - viewportTopOffset : align === 'end' ? rowBottom - clientHeight : rowTop - viewportTopOffset - Math.max(0, (visibleHeight - rowHeight) / 2) if (targetTop === null) return null return Math.min(Math.max(0, targetTop), Math.max(0, scrollHeight - clientHeight)) } function getDataGridTableHeaderOffset({ containerElement, headerSticky, scrollElement, }: { containerElement: HTMLDivElement headerSticky: boolean scrollElement: HTMLElement }) { if (!headerSticky) return 0 const headerElement = containerElement.querySelector(':scope > [data-slot="data-grid-table"] > thead') if (!headerElement) return 0 const scrollRect = scrollElement.getBoundingClientRect() const headerRect = headerElement.getBoundingClientRect() const headerBottomOffset = headerRect.bottom - scrollRect.top const overlapsViewportTop = headerRect.top <= scrollRect.top + 0.5 && headerBottomOffset > 0 if (!overlapsViewportTop) return 0 return Math.min(scrollElement.clientHeight, Math.max(0, headerBottomOffset)) } function scrollDataGridTableToOffset({ behavior, scrollElement, targetTop, virtualizer, }: { behavior: ScrollBehavior scrollElement: HTMLElement targetTop: number virtualizer?: DataGridTableVirtualizerInstance }) { if (virtualizer) { virtualizer.scrollToOffset(targetTop, { align: 'start', behavior }) } else if (typeof scrollElement.scrollTo === 'function') { scrollElement.scrollTo({ behavior, top: targetTop }) } else { scrollElement.scrollTop = targetTop } } function scrollDataGridTableRowIntoView({ align, behavior, cancelPendingScroll = false, containerElement, headerSticky, rowIndex, scrollElement, virtualizer, }: { align: DataGridTableVirtualScrollAlignment behavior: ScrollBehavior cancelPendingScroll?: boolean containerElement: HTMLDivElement | null headerSticky: boolean rowIndex: number scrollElement: HTMLElement | null virtualizer?: DataGridTableVirtualizerInstance }) { if (!containerElement || !scrollElement) return false const rowElement = containerElement.querySelector( `:scope > [data-slot="data-grid-table"] > tbody > tr[data-index="${rowIndex}"]`, ) if (!rowElement) return false const scrollRect = scrollElement.getBoundingClientRect() const rowRect = rowElement.getBoundingClientRect() const viewportTopOffset = getDataGridTableHeaderOffset({ containerElement, headerSticky, scrollElement, }) const rowTop = scrollElement.scrollTop + rowRect.top - scrollRect.top const rowBottom = scrollElement.scrollTop + rowRect.bottom - scrollRect.top const targetTop = getDataGridTableScrollTarget({ align, clientHeight: scrollElement.clientHeight, rowBottom, rowHeight: rowRect.height || rowElement.offsetHeight, rowTop, scrollHeight: scrollElement.scrollHeight, scrollTop: scrollElement.scrollTop, viewportTopOffset, }) if (targetTop === null || Math.abs(targetTop - scrollElement.scrollTop) < 0.5) { if (cancelPendingScroll) { scrollDataGridTableToOffset({ behavior: 'auto', scrollElement, targetTop: scrollElement.scrollTop, virtualizer, }) } return true } scrollDataGridTableToOffset({ behavior, scrollElement, targetTop, virtualizer, }) return true } type DataGridTableVirtualizerOptions = Omit< VirtualizerOptions, 'count' | 'estimateSize' | 'getItemKey' | 'getScrollElement' > & { estimateSize?: (index: number, row: Row) => number getItemKey?: (index: number, row: Row) => string | number getScrollElement?: (elements: DataGridTableVirtualScrollElements) => HTMLElement | null } interface DataGridTableVirtualProps { height?: number | string estimateSize?: number overscan?: number /** Scroll animation used when revealing a controlled target row. */ scrollBehavior?: ScrollBehavior /** Alignment used when revealing a controlled target row. Defaults to auto. */ scrollToRowAlign?: DataGridTableVirtualScrollAlignment /** Index within the center (non-pinned) row section to reveal. */ scrollToRowIndex?: number footerContent?: ReactNode renderHeader?: boolean onFetchMore?: () => void isFetchingMore?: boolean hasMore?: boolean fetchMoreOffset?: number virtualizerOptions?: DataGridTableVirtualizerOptions } interface VirtualBodyProps { table: Table topRows: Row[] centerRows: Row[] bottomRows: Row[] virtualItems: VirtualItem[] totalSize: number isVirtualizationEnabled: boolean isInfiniteMode: boolean isFetchingMore: boolean hasMore?: boolean loadingMoreMessage: ReactNode allRowsLoadedMessage: ReactNode measureRowRef?: (element: HTMLTableRowElement | null) => void } function DataGridTableVirtualPinnedPlaceholderCell({ column }: { column: Column }) { const { props } = useDataGrid() const isPinned = column.getIsPinned() const isLastLeftPinned = isPinned === 'left' && column.getIsLastColumn('left') const isFirstRightPinned = isPinned === 'right' && column.getIsFirstColumn('right') return ( ) } function DataGridTableVirtualUtilityRow({ table, children, centerCellClassName, centerCellStyle, rowClassName, ariaHidden, }: { table: Table children: ReactNode centerCellClassName?: string centerCellStyle?: CSSProperties rowClassName?: string ariaHidden?: boolean }) { const { props } = useDataGrid() const leftVisibleColumns = table.getLeftVisibleLeafColumns() const centerVisibleColumns = table.getCenterVisibleLeafColumns() const rightVisibleColumns = table.getRightVisibleLeafColumns() const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table) return ( {leftVisibleColumns.map((column) => ( ))} {children} {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? : null} {rightVisibleColumns.map((column) => ( ))} {props.tableLayout?.columnsResizable && !hasRightPinnedColumns ? : null} ) } function DataGridTableVirtualSpacer({ table, height }: { table: Table; height: number }) { if (height <= 0) return null return ( {null} ) } function DataGridTableVirtualStatusRow({ table, children, className, }: { table: Table children: ReactNode className?: string }) { return ( {children} ) } function DataGridTableVirtualBody({ table, topRows, centerRows, bottomRows, virtualItems, totalSize, isVirtualizationEnabled, isInfiniteMode, isFetchingMore, hasMore, loadingMoreMessage, allRowsLoadedMessage, measureRowRef, }: VirtualBodyProps) { const { isLoading } = useDataGrid() const totalRows = topRows.length + centerRows.length + bottomRows.length if (!totalRows) { // Initial load must not flash the empty state as if the query returned // nothing. if (isLoading) { return (

{loadingMoreMessage}

) } return } const hasCenterRows = centerRows.length > 0 const showFetchingRow = isInfiniteMode && isFetchingMore const showCompleteRow = isInfiniteMode && hasMore === false && totalRows > 0 const hasMiddleSection = hasCenterRows || showFetchingRow || showCompleteRow const leadingSpacerHeight = isVirtualizationEnabled && hasCenterRows && virtualItems.length > 0 ? (virtualItems[0]?.start ?? 0) : 0 const trailingSpacerHeight = isVirtualizationEnabled && hasCenterRows && virtualItems.length > 0 ? Math.max(0, totalSize - (virtualItems[virtualItems.length - 1]?.end ?? 0)) : 0 const renderedRows: ReactNode[] = [] topRows.forEach((row, index) => { renderedRows.push( , ) }) if (isVirtualizationEnabled) { if (leadingSpacerHeight > 0) { renderedRows.push( , ) } virtualItems.forEach((virtualRow) => { const row = centerRows[virtualRow.index] if (!row) return renderedRows.push( , ) }) if (trailingSpacerHeight > 0) { renderedRows.push( , ) } } else { centerRows.forEach((row, rowIndex) => { renderedRows.push() }) } if (showFetchingRow) { renderedRows.push(

{loadingMoreMessage}

, ) } if (showCompleteRow) { renderedRows.push( {allRowsLoadedMessage} , ) } bottomRows.forEach((row, index) => { renderedRows.push( 0 || hasMiddleSection) ? 'bottom' : undefined} />, ) }) return <>{renderedRows} } /** * Memoized virtual body: skip re-renders during active column resize. * Column widths update via CSS variables on the element, * so the browser handles width changes without React re-renders. */ const MemoizedVirtualBody = memo( DataGridTableVirtualBody, (_prev, next) => !!next.table.getState().columnSizingInfo.isResizingColumn, ) as typeof DataGridTableVirtualBody function DataGridTableVirtual({ height, estimateSize = 48, overscan = 10, scrollBehavior = 'auto', scrollToRowAlign = 'auto', scrollToRowIndex, footerContent, renderHeader = true, onFetchMore, isFetchingMore = false, hasMore, fetchMoreOffset = 0, virtualizerOptions, }: DataGridTableVirtualProps) { const { table, props } = useDataGrid() const mergedHeaderGroups = getDataGridTableMergedHeaderGroups(table) const hasRightPinnedColumns = hasDataGridTableRightPinnedColumns(table) const { topRows, centerRows, bottomRows } = getDataGridTableRowSections(table, props.tableLayout?.rowsPinnable) const isInfiniteMode = typeof onFetchMore === 'function' const [viewportElements, setViewportElements] = useState({ containerElement: null, scrollElement: null, }) const { estimateSize: customEstimateSize, getItemKey: customGetItemKey, getScrollElement: customGetScrollElement, measureElement: customMeasureElement, overscan: customOverscan, ...virtualizerOptionsRest } = virtualizerOptions ?? {} const isVirtualizationEnabled = virtualizerOptions?.enabled !== false const loadingMoreMessage = props.fetchingMoreMessage || props.loadingMessage || 'Loading...' const allRowsLoadedMessage = props.allRowsLoadedMessage || 'All records loaded' const handleViewportRef = useCallback((node: HTMLDivElement | null) => { setViewportElements({ containerElement: node, scrollElement: node ? (getDataGridScrollAreaViewport(node) ?? node) : null, }) }, []) const usesExternalScrollArea = viewportElements.scrollElement !== null && viewportElements.scrollElement !== viewportElements.containerElement const resolveScrollElement = useCallback(() => { if (customGetScrollElement) { return customGetScrollElement(viewportElements) } return viewportElements.scrollElement }, [customGetScrollElement, viewportElements]) const resolveItemKey = useCallback( (index: number) => { const row = centerRows[index] if (!row) return index return customGetItemKey?.(index, row) ?? row.id ?? index }, [centerRows, customGetItemKey], ) const resolveEstimateSize = useCallback( (index: number) => { const row = centerRows[index] return row ? (customEstimateSize?.(index, row) ?? estimateSize) : estimateSize }, [centerRows, customEstimateSize, estimateSize], ) const virtualizer = useVirtualizer({ count: centerRows.length, getScrollElement: resolveScrollElement, getItemKey: resolveItemKey, estimateSize: resolveEstimateSize, overscan: customOverscan ?? overscan, measureElement: customMeasureElement, ...virtualizerOptionsRest, }) as DataGridTableVirtualizerInstance const virtualItems = isVirtualizationEnabled ? virtualizer.getVirtualItems() : [] const totalSize = isVirtualizationEnabled ? virtualizer.getTotalSize() : 0 const measureRowRef = isVirtualizationEnabled && customMeasureElement ? virtualizer.measureElement : undefined const resolvedFetchMoreOffset = Math.max(0, fetchMoreOffset) const scrollToRowId = scrollToRowIndex !== undefined ? centerRows[scrollToRowIndex]?.id : undefined const scrollToRowVirtualItem = isVirtualizationEnabled && scrollToRowIndex !== undefined ? virtualItems.find((item) => item.index === scrollToRowIndex) : undefined const pendingScrollToRowIndexRef = useRef(null) const lastScrollRequestRef = useRef(null) // Latch onFetchMore per row count: virtualItems gets a new identity every // scroll frame, so without it the effect fires duplicate page requests // before the consumer flips isFetchingMore, and loops at end-of-data when // hasMore is never set. const fetchMoreFiredAtCountRef = useRef(null) // Resolve after every commit so a stable getter can expose a replaced ref; // the request signature prevents duplicate scrolling on ordinary renders. useEffect(() => { const previousRequest = lastScrollRequestRef.current if (scrollToRowIndex === undefined || scrollToRowIndex < 0 || scrollToRowIndex >= centerRows.length) { pendingScrollToRowIndexRef.current = null lastScrollRequestRef.current = null if (previousRequest) { const scrollElement = resolveScrollElement() if (scrollElement) { scrollDataGridTableToOffset({ behavior: 'auto', scrollElement, targetTop: scrollElement.scrollTop, virtualizer: isVirtualizationEnabled ? virtualizer : undefined, }) } } return } const scrollElement = resolveScrollElement() const containerElement = viewportElements.containerElement if (!containerElement || !scrollElement) return const headerSticky = renderHeader && !!props.tableLayout?.headerSticky const nextRequest: DataGridTableVirtualScrollRequest = { align: scrollToRowAlign, behavior: scrollBehavior, containerElement, headerSticky, isVirtualizationEnabled, rowId: scrollToRowId, rowIndex: scrollToRowIndex, scrollElement, } if (isSameDataGridTableScrollRequest(previousRequest, nextRequest)) return pendingScrollToRowIndexRef.current = null const rowWasHandled = scrollDataGridTableRowIntoView({ align: scrollToRowAlign, behavior: scrollBehavior, cancelPendingScroll: previousRequest !== null, containerElement, headerSticky, rowIndex: scrollToRowIndex, scrollElement, virtualizer: isVirtualizationEnabled ? virtualizer : undefined, }) if (rowWasHandled) { lastScrollRequestRef.current = nextRequest return } if (!isVirtualizationEnabled) return pendingScrollToRowIndexRef.current = scrollToRowIndex lastScrollRequestRef.current = nextRequest virtualizer.scrollToIndex(scrollToRowIndex, { align: scrollToRowAlign, behavior: scrollBehavior, }) }) useEffect(() => { if ( !isVirtualizationEnabled || scrollToRowIndex === undefined || pendingScrollToRowIndexRef.current !== scrollToRowIndex || !scrollToRowVirtualItem ) { return } const rowWasHandled = scrollDataGridTableRowIntoView({ align: scrollToRowAlign, behavior: 'auto', cancelPendingScroll: true, containerElement: viewportElements.containerElement, headerSticky: renderHeader && !!props.tableLayout?.headerSticky, rowIndex: scrollToRowIndex, scrollElement: resolveScrollElement(), virtualizer, }) if (rowWasHandled) { pendingScrollToRowIndexRef.current = null } }, [ isVirtualizationEnabled, props.tableLayout?.headerSticky, renderHeader, resolveScrollElement, scrollToRowAlign, scrollToRowIndex, scrollToRowVirtualItem, virtualizer, viewportElements.containerElement, ]) useEffect(() => { if (!isVirtualizationEnabled || !isInfiniteMode || hasMore === false || isFetchingMore) { return } const lastItem = virtualItems[virtualItems.length - 1] if (!lastItem) return if (fetchMoreFiredAtCountRef.current === centerRows.length) return if (lastItem.index >= centerRows.length - 1 - resolvedFetchMoreOffset) { fetchMoreFiredAtCountRef.current = centerRows.length onFetchMore?.() } }, [ centerRows.length, hasMore, isFetchingMore, isInfiniteMode, isVirtualizationEnabled, onFetchMore, resolvedFetchMoreOffset, virtualItems, ]) return ( {renderHeader && ( {mergedHeaderGroups.map((headerGroup) => ( {headerGroup.headers .filter((header) => header.column.getIsPinned() !== 'right') .map((header) => { const { column } = header return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} {props.tableLayout?.columnsResizable && column.getCanResize() && ( )} ) })} {props.tableLayout?.columnsResizable && hasRightPinnedColumns ? : null} {headerGroup.headers .filter((header) => header.column.getIsPinned() === 'right') .map((header) => { const { column } = header return ( {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} {props.tableLayout?.columnsResizable && column.getCanResize() && ( )} ) })} {props.tableLayout?.columnsResizable && !hasRightPinnedColumns ? : null} ))} )} {renderHeader && (props.tableLayout?.stripped || !props.tableLayout?.rowBorder) && } {footerContent && {footerContent}} ) } export { DataGridTableVirtual } export type { DataGridTableVirtualScrollAlignment, DataGridTableVirtualProps, DataGridTableVirtualScrollElements, DataGridTableVirtualizerOptions, } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tanstack/react-table",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-table","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-table"}]]}]}],["$","li","@tanstack/react-virtual",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tanstack%2Freact-virtual","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@tanstack/react-virtual"}]]}]}]]}],["$","$L4f",null,{"namespace":"@spaceui","registryDependencies":["https://www.spaceui.one/r/components-spaceui-data-grid.json","https://www.spaceui.one/r/components-spaceui-data-grid-table.json","https://www.spaceui.one/r/lib-utils.json","https://www.spaceui.one/r/primitives-spinner.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/registry/components/spaceui/data-grid/data-grid-table-virtual/index.tsx","content":"$51","type":"registry:component","target":"components/spaceui/data-grid-table-virtual.tsx"}],"className":"h-[70svh] min-h-80"}]]}]