Virtualizer

1'use client';
2/* eslint-disable react-hooks/incompatible-library */
3 
4import type { CSSProperties } from 'react';
5import { Fragment, useImperativeHandle, useRef } from 'react';
6import { useVirtualizer } from '@tanstack/react-virtual';
7import { Slot } from '@radix-ui/react-slot';
8import { cn } from '@/lib/utils';
9import { virtualizerVariants } from './virtualizer-variants';
10import type { VirtualGridProps, VirtualizerGrid } from './types';
11 
12const VirtualGrid = <
13  T,
14  TScrollElement extends HTMLDivElement = HTMLDivElement,
15  TItemElement extends Element = Element
16>(
17  props: VirtualGridProps<T, TScrollElement, TItemElement>
18) => {
19  const {
20    data,
21    columns,
22    rowHeight,
23    columnWidth,
24    width,
25    height,
26    ref,
27    className,
28    classNames,
29    style,
30    containerProps,
31    keyExtractor,
32    onChange,
33    onScroll,
34    renderCell,
35    columnProps,
36    ...rest
37  } = props;
38 
39  const { root, inner } = virtualizerVariants();
40 
41  const mergedRootCls = cn(root(), className ?? classNames?.root);
42  const innerCls = cn(inner(), classNames?.inner);
43 
44  const rootRef = useRef<HTMLDivElement>(null);
45 
46  const rowCount = Math.ceil(data.length / columns);
47 
48  const getRowSize = (index: number) =>
49    typeof rowHeight === 'function' ? rowHeight(index) : rowHeight;
50 
51  const getColumnSize = (index: number) =>
52    typeof columnWidth === 'function' ? columnWidth(index) : columnWidth;
53 
54  // Vertical virtualization: rows
55  const rowVirtualizer = useVirtualizer<TScrollElement, TItemElement>({
56    getScrollElement: () => rootRef.current as TScrollElement,
57    count: rowCount,
58    estimateSize: getRowSize,
59    // Row virtualizer onChange serves as primary onChange/onScroll callback
60    onChange: (instance, sync) => {
61      onChange?.(instance, sync);
62      onScroll?.(instance.scrollOffset ?? 0);
63    },
64    ...rest
65  });
66 
67  // Horizontal virtualization: columns
68  const columnVirtualizer = useVirtualizer<TScrollElement, TItemElement>({
69    getScrollElement: () => rootRef.current as TScrollElement,
70    count: columns,
71    estimateSize: getColumnSize,
72    horizontal: true,
73    ...columnProps
74  });
75 
76  const containerStyle: CSSProperties = {
77    height,
78    width,
79    overflow: 'auto',
80    ...style
81  };
82 
83  const innerStyle: CSSProperties = {
84    position: 'relative',
85    height: rowVirtualizer.getTotalSize(),
86    width: columnVirtualizer.getTotalSize()
87  };
88 
89  useImperativeHandle(ref, () => {
90    return {
91      containerRef: rootRef.current as TScrollElement,
92// … truncated