@versini/ui-datagrid 3.1.2 → 4.0.0

package/dist/DataGridInfinite/index.js

@@ -1,10 +1,11 @@
 /*!
-  @versini/ui-datagrid v3.1.2
+  @versini/ui-datagrid v4.0.0
   © 2026 gizmette.com
 */
 
-import { jsx } from "react/jsx-runtime";
-import { useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { elementScroll, observeElementOffset, observeElementRect, observeWindowOffset, observeWindowRect, useVirtualizer, windowScroll } from "@tanstack/react-virtual";
+import { useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { DataGridContext } from "../430.js";
 import { CellWrapper } from "../799.js";
 import { getBodyClass, useColumnMeasurement } from "../197.js";
@@ -17,291 +18,250 @@ import { getBodyClass, useColumnMeasurement } from "../197.js";
 
 
 
-const DEFAULT_BATCH_SIZE = 20;
-const DEFAULT_THRESHOLD = 5;
-const DEFAULT_ROOT_MARGIN = "20px";
-const ROW_INDEX_DATA_ATTR = "data-row-index";
-/**
- * Finds the nearest scrollable ancestor of an element. Returns null if no
- * scrollable ancestor is found (uses viewport).
- */ function findScrollableAncestor(element) {
-    let parent = element.parentElement;
-    while(parent){
-        const style = getComputedStyle(parent);
-        const overflowY = style.overflowY;
-        if (overflowY === "auto" || overflowY === "scroll") {
-            return parent;
-        }
-        parent = parent.parentElement;
-    }
-    return null;
-}
+
+
+const DEFAULT_OVERSCAN = 8;
+const DEFAULT_ESTIMATED_ROW_HEIGHT = 44;
+const DEFAULT_COMPACT_ESTIMATED_ROW_HEIGHT = 29;
 /**
- * A DataGridBody variant that handles infinite scroll internally.
+ * A virtualized DataGrid body for large datasets.
+ *
+ * Only the rows near the viewport stay mounted (windowing via
+ * `@tanstack/react-virtual`), so the DOM stays small and scrolling stays smooth
+ * at any row count. Rows are rendered in normal grid flow between two full-span
+ * spacer elements, so `columns`/subgrid (including intrinsic `auto` tracks) keep
+ * working without any consumer change. The virtualizer windows against the
+ * DataGrid's own scroll container (created by `maxHeight` or a sticky
+ * header/footer), or the page (window scroll) when the grid has neither.
  *
- * This component manages all the complexity of infinite scroll:
- * - Progressive data loading with IntersectionObserver
- * - Correct marker placement for seamless scrolling
- * - Automatic data slicing and memoization
- * - Programmatic scroll-to-row with smooth animation
+ * Because off-screen rows are removed from the DOM, the grid exposes
+ * `aria-rowcount`/`aria-rowindex` and keeps keyboard focus on the grid if a
+ * focused row recycles out. Browser find-in-page and uncontrolled per-row state
+ * do not persist across recycling (inherent to DOM virtualization).
  *
  * @example
  * ```tsx
- * const infiniteBodyRef = useRef<DataGridInfiniteBodyRef>(null);
- *
- * // Jump to a specific row
- * const handleJumpToRow = () => {
- *   infiniteBodyRef.current?.scrollToIndex(134);
- * };
- *
  * <DataGrid maxHeight="400px" stickyHeader>
- *   <DataGridHeader caption={`Showing ${visibleCount} of ${data.length}`}>
+ *   <DataGridHeader caption={`Showing ${reached} of ${data.length}`}>
  *     <DataGridRow>
  *       <DataGridCell>Name</DataGridCell>
- *       <DataGridCell>Role</DataGridCell>
  *     </DataGridRow>
  *   </DataGridHeader>
  *
- *   <DataGridInfiniteBody
- *     ref={infiniteBodyRef}
- *     data={largeData}
- *     batchSize={25}
- *     onVisibleCountChange={(count) => setVisibleCount(count)}
- *   >
+ *   <DataGridInfiniteBody data={largeData} estimatedRowHeight={56}>
  *     {(row) => (
  *       <DataGridRow key={row.id}>
  *         <DataGridCell>{row.name}</DataGridCell>
- *         <DataGridCell>{row.role}</DataGridCell>
  *       </DataGridRow>
  *     )}
  *   </DataGridInfiniteBody>
  * </DataGrid>
  * ```
  *
- */ function DataGridInfiniteBody({ data = [], children: renderRow, batchSize = DEFAULT_BATCH_SIZE, threshold = DEFAULT_THRESHOLD, rootMargin = DEFAULT_ROOT_MARGIN, onVisibleCountChange, className, noData = false, noDataText, ref }) {
+ */ function DataGridInfiniteBody({ data = [], children: renderRow, overscan = DEFAULT_OVERSCAN, estimatedRowHeight, onVisibleCountChange, className, noData = false, noDataText, ref }) {
     const ctx = useContext(DataGridContext);
     const bodyRef = useRef(null);
-    const observerRef = useRef(null);
-    const pendingScrollRef = useRef(null);
+    // A zero-height grid item at the list start. The display:contents body has no
+    // box, so we measure this real element to find the list's scroll-margin.
+    const sentinelRef = useRef(null);
     const totalItems = data.length;
-    const initialCount = Math.min(batchSize + threshold, totalItems);
-    const [visibleCount, setVisibleCount] = useState(initialCount);
-    const hasMore = visibleCount < totalItems;
+    const headerRows = ctx.headerRows ?? 0;
+    const footerRows = ctx.footerRows ?? 0;
     /**
-	 * Scroll to a row by its index. Called after visibleCount updates.
-	 * NOTE: We query for the wrapper with data-row-index, then scroll to the
-	 * actual row element inside it (since the wrapper has display:contents and
-	 * doesn't have a bounding box).
-	 */ const scrollToRowElement = useCallback((index)=>{
-        const body = bodyRef.current;
-        if (!body) {
+	 * Default the row-height estimate from the grid's density when the consumer
+	 * doesn't set it: `compact` rows are much shorter (~29px vs ~44px), and an
+	 * estimate far from the real height hurts scrollbar accuracy and scrollToIndex.
+	 */ const resolvedEstimatedRowHeight = estimatedRowHeight ?? (ctx.compact ? DEFAULT_COMPACT_ESTIMATED_ROW_HEIGHT : DEFAULT_ESTIMATED_ROW_HEIGHT);
+    const [scrollMargin, setScrollMargin] = useState(0);
+    /**
+	 * The scroll target is provided by the parent DataGrid: its internal bounded
+	 * scroller (sticky / maxHeight), or the page (window scroll) when it owns
+	 * none. This avoids fragile DOM-walking that can mistake an unbounded
+	 * `overflow-x:auto` wrapper for a real vertical scroller.
+	 */ const useWindow = ctx.pageScroll === true;
+    const scrollEl = useWindow ? null : ctx.scrollContainer ?? null;
+    const resolved = useWindow || scrollEl !== null;
+    // Measure the list's offset within the scroller (= sticky-header padding /
+    // inline-header height / page offset). Keeps the window origin correct.
+    useLayoutEffect(()=>{
+        if (!resolved || noData) {
             return;
         }
-        const wrapper = body.querySelector(`[${ROW_INDEX_DATA_ATTR}="${index}"]`);
-        if (wrapper) {
-            // The wrapper has display:contents, so scroll to the actual row inside.
-            const row = wrapper.querySelector('[role="row"]');
-            if (row) {
-                row.scrollIntoView({
-                    behavior: "smooth",
-                    block: "center"
-                });
+        const compute = ()=>{
+            const node = sentinelRef.current;
+            if (!node) {
+                return;
             }
+            const top = node.getBoundingClientRect().top;
+            const next = useWindow ? Math.max(0, Math.round(top + window.scrollY)) : Math.max(0, Math.round(top - scrollEl.getBoundingClientRect().top + scrollEl.scrollTop));
+            setScrollMargin((prev)=>prev === next ? prev : next);
+        };
+        compute();
+        const target = useWindow ? document.documentElement : scrollEl;
+        if (!target) {
+            return;
         }
-    }, []);
+        const observer = new ResizeObserver(compute);
+        observer.observe(target);
+        return ()=>observer.disconnect();
+    }, [
+        resolved,
+        useWindow,
+        scrollEl,
+        noData
+    ]);
+    const virtualizer = useVirtualizer({
+        count: totalItems,
+        // In window mode the scroll element IS `window` (the window observers read
+        // window.innerHeight / window.scrollY off it); cast bridges the type since
+        // useVirtualizer's element constraint excludes Window.
+        getScrollElement: ()=>useWindow ? typeof window !== "undefined" ? window : null : scrollEl,
+        estimateSize: ()=>resolvedEstimatedRowHeight,
+        overscan,
+        scrollMargin,
+        // React 19: let React batch the scroll-driven updates natively.
+        useFlushSync: false,
+        // Window vs element observers are selected to match getScrollElement; the
+        // casts bridge the Element|Window union react-virtual can't narrow here.
+        observeElementRect: useWindow ? observeWindowRect : observeElementRect,
+        observeElementOffset: useWindow ? observeWindowOffset : observeElementOffset,
+        scrollToFn: useWindow ? windowScroll : elementScroll,
+        // Window mode: seed the offset from the live scroll position (mirrors
+        // useWindowVirtualizer). Without this, on mount the virtualizer's offset is
+        // 0, so it scrolls an already-scrolled page to the top and computes the
+        // wrong initial window.
+        initialOffset: useWindow ? ()=>typeof window !== "undefined" ? window.scrollY : 0 : undefined
+    });
+    const virtualItems = virtualizer.getVirtualItems();
+    const totalSize = virtualizer.getTotalSize();
+    const lastVisibleIndex = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1].index : -1;
     /**
-	 * Handle pending scroll after render (when visibleCount has been expanded).
+	 * Dev-only: warn about scroll-container setups that silently break
+	 * virtualization — windowing against the page while a bounded ancestor is
+	 * actually the scroller (only the first screen renders), or an internal
+	 * scroller that isn't height-bounded (every row mounts). Runs after paint so
+	 * the measurements are real; stripped from production builds.
 	 */ useEffect(()=>{
-        if (pendingScrollRef.current !== null) {
-            const targetIndex = pendingScrollRef.current;
-            // Only scroll if the target is now within visible range.
-            if (targetIndex < visibleCount) {
-                // Use requestAnimationFrame to ensure DOM has updated.
-                requestAnimationFrame(()=>{
-                    scrollToRowElement(targetIndex);
-                });
-                pendingScrollRef.current = null;
+        // Treat a missing `process` (a non-Node runtime whose bundler didn't replace
+        // this expression) as production, so reading NODE_ENV can never throw.
+        const isProduction = typeof process === "undefined" || process.env.NODE_ENV === "production";
+        if (isProduction || noData || totalItems === 0 || typeof window === "undefined") {
+            return;
+        }
+        if (useWindow) {
+            let el = bodyRef.current?.parentElement ?? null;
+            while(el && el !== document.body && el !== document.documentElement){
+                const { overflowY } = getComputedStyle(el);
+                if ((overflowY === "auto" || overflowY === "scroll") && el.scrollHeight > el.clientHeight) {
+                    console.warn("[DataGridInfiniteBody] Virtualizing against the page (window scroll), but " + "the grid is inside a scrollable container, so only the first screen of " + "rows will render. Set `maxHeight` on the DataGrid to scroll inside it.");
+                    break;
+                }
+                el = el.parentElement;
             }
+        } else if (scrollEl && scrollEl.clientHeight > window.innerHeight && scrollEl.scrollHeight <= scrollEl.clientHeight + 1) {
+            console.warn("[DataGridInfiniteBody] The scroll container is not height-bounded, so every " + "row mounts and virtualization has no effect. Set `maxHeight` on the DataGrid.");
         }
     }, [
-        visibleCount,
-        scrollToRowElement
+        useWindow,
+        scrollEl,
+        noData,
+        totalItems
     ]);
     /**
-	 * Expose imperative methods via ref.
+	 * Expose scrollToIndex via ref; delegate to the virtualizer (centers the row,
+	 * mounting it first if needed).
 	 */ useImperativeHandle(ref, ()=>({
             scrollToIndex: (index)=>{
                 if (index < 0 || index >= totalItems) {
-                    console.warn(`scrollToIndex: index ${index} is out of bounds (0-${totalItems - 1})`);
-                    return;
-                }
-                // If the row is already visible, just scroll to it.
-                if (index < visibleCount) {
-                    scrollToRowElement(index);
+                    console.warn(`scrollToIndex: index ${index} is out of bounds${totalItems === 0 ? " (the grid is empty)" : ` (0-${totalItems - 1})`}`);
                     return;
                 }
-                /**
-				 * Otherwise, expand visible count to include the target row. Add some
-				 * buffer so the row isn't at the very edge.
-				 */ const targetCount = Math.min(index + threshold + 1, totalItems);
-                pendingScrollRef.current = index;
-                setVisibleCount(targetCount);
+                // Smooth scroll, unless the user prefers reduced motion. Smoothness is
+                // best when `estimatedRowHeight` is close to the real row height; a far-
+                // off estimate makes the virtualizer re-correct the offset as rows are
+                // measured, which reads as a stutter near the target (a react-virtual
+                // limitation with dynamically measured rows).
+                const reduceMotion = typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+                virtualizer.scrollToIndex(index, {
+                    align: "center",
+                    behavior: reduceMotion ? "auto" : "smooth"
+                });
             }
         }), [
         totalItems,
-        visibleCount,
-        threshold,
-        scrollToRowElement
+        virtualizer
     ]);
-    // Reset visible count when data changes significantly.
-    useEffect(()=>{
-        setVisibleCount(Math.min(batchSize + threshold, totalItems));
-    }, [
-        totalItems,
-        batchSize,
-        threshold
-    ]);
-    // Notify parent of visible count changes.
+    /**
+	 * Report a monotonic high-water mark via onVisibleCountChange: the furthest
+	 * row index reached + 1 (resets when the dataset length changes).
+	 */ const highWaterRef = useRef(0);
+    const prevTotalRef = useRef(totalItems);
     useEffect(()=>{
-        onVisibleCountChange?.(visibleCount, totalItems);
+        if (prevTotalRef.current !== totalItems) {
+            prevTotalRef.current = totalItems;
+            highWaterRef.current = 0;
+        }
+        const hw = Math.min(lastVisibleIndex + 1, totalItems);
+        if (hw > highWaterRef.current) {
+            highWaterRef.current = hw;
+            onVisibleCountChange?.(hw, totalItems);
+        }
     }, [
-        visibleCount,
+        lastVisibleIndex,
         totalItems,
         onVisibleCountChange
     ]);
     /**
-	 * IntersectionObserver callback - triggered when marker becomes visible. Loads
-	 * the next batch of items.
-	 */ const handleIntersection = useCallback((entries)=>{
-        const target = entries[0];
-        if (target?.isIntersecting) {
-            setVisibleCount((prev)=>Math.min(prev + batchSize, totalItems));
+	 * Report the total row count to the grid for aria-rowcount (header + body +
+	 * footer rows), and clear it when this body unmounts. Empty/noData grids
+	 * report nothing, so they render no aria-rowcount and no focus sentinel.
+	 */ useEffect(()=>{
+        if (noData || totalItems === 0) {
+            ctx.setRowCount?.(undefined);
+            return;
         }
+        ctx.setRowCount?.(totalItems + headerRows + footerRows);
+        return ()=>ctx.setRowCount?.(undefined);
     }, [
-        batchSize,
-        totalItems
+        noData,
+        totalItems,
+        headerRows,
+        footerRows,
+        ctx.setRowCount
     ]);
     /**
-	 * Callback ref for the marker element. Sets up IntersectionObserver when
-	 * marker mounts, cleans up when it unmounts. This pattern ensures the observer
-	 * always watches the current marker element, even when visibleCount changes
-	 * and a new marker is created at a different position.
-	 */ const markerRefCallback = useCallback((node)=>{
-        // Clean up previous observer.
-        if (observerRef.current) {
-            observerRef.current.disconnect();
-            observerRef.current = null;
+	 * Focus preservation: when a focused per-row control recycles out of the DOM,
+	 * focus would fall to document.body. Track the focused row index; if it
+	 * unmounts and focus drops to the body, move focus to the grid sentinel.
+	 */ const focusedIndexRef = useRef(null);
+    useLayoutEffect(()=>{
+        const body = bodyRef.current;
+        const active = document.activeElement;
+        if (active && body?.contains(active)) {
+            const rowEl = active.closest("[data-index]");
+            focusedIndexRef.current = rowEl ? Number(rowEl.getAttribute("data-index")) : null;
+            return;
         }
-        // Set up new observer if we have a marker and more items to load.
-        if (node && hasMore) {
-            const root = findScrollableAncestor(node);
-            observerRef.current = new IntersectionObserver(handleIntersection, {
-                root,
-                rootMargin
-            });
-            observerRef.current.observe(node);
+        if (focusedIndexRef.current !== null && (active === document.body || active === null) && body && !body.querySelector(`[data-index="${focusedIndexRef.current}"]`)) {
+            ctx.focusGrid?.();
         }
-    }, [
-        hasMore,
-        handleIntersection,
-        rootMargin
-    ]);
-    // Clean up observer on unmount.
-    useEffect(()=>{
-        return ()=>{
-            observerRef.current?.disconnect();
-        };
-    }, []);
-    /**
-	 * Calculate marker position. The marker should be placed `threshold` items
-	 * from the end of visible items. This allows seamless scrolling - new items
-	 * load while user scrolls through the remaining `threshold` items.
-	 */ const markerPosition = useMemo(()=>{
-        if (!hasMore) {
-            return -1; // No marker needed when all items are loaded.
-        }
-        // Place marker at visibleCount - threshold, but ensure it's at least 0.
-        return Math.max(0, visibleCount - threshold);
-    }, [
-        hasMore,
-        visibleCount,
-        threshold
-    ]);
+        focusedIndexRef.current = null;
+    });
     /**
-	 * Context value for body rows (shared base, rowIndex added per-row).
+	 * Context value for body rows (shared base; per-row fields added below).
 	 */ const bodyContextBase = useMemo(()=>({
             ...ctx,
             cellWrapper: CellWrapper.BODY
         }), [
         ctx
     ]);
-    /**
-	 * Render items with marker at the correct position. Each row gets a
-	 * data-row-index attribute for scrollToIndex functionality. Each row is
-	 * wrapped with a context provider that includes the isLastRow flag for proper
-	 * border removal (CSS :last-child doesn't work with wrappers).
-	 */ const renderedContent = useMemo(()=>{
-        const result = [];
-        // Determine the actual last visible index (for border styling).
-        const lastVisibleIndex = Math.min(visibleCount, totalItems) - 1;
-        for(let i = 0; i < visibleCount && i < totalItems; i++){
-            // Insert marker at the calculated position.
-            if (i === markerPosition) {
-                result.push(/*#__PURE__*/ jsx("div", {
-                    ref: markerRefCallback,
-                    "aria-hidden": "true",
-                    style: {
-                        height: "1px",
-                        background: "transparent"
-                    }
-                }, "__infinite-scroll-marker-inline__"));
-            }
-            /**
-			 * Determine if this is the last row (only when all data is loaded). If
-			 * hasMore is true, no row is "last" since more will be loaded.
-			 */ const isLastRow = !hasMore && i === lastVisibleIndex;
-            /**
-			 * Wrap row with context provider that includes rowIndex for proper odd/even
-			 * styling. Using display:contents so the wrapper doesn't affect grid layout.
-			 */ result.push(/*#__PURE__*/ jsx(DataGridContext.Provider, {
-                value: {
-                    ...bodyContextBase,
-                    isLastRow
-                },
-                children: /*#__PURE__*/ jsx("div", {
-                    [ROW_INDEX_DATA_ATTR]: i,
-                    style: {
-                        display: "contents"
-                    },
-                    children: renderRow(data[i], i)
-                })
-            }, i));
-        }
-        // If marker position is at the end (edge case with small data).
-        if (markerPosition === visibleCount && hasMore) {
-            result.push(/*#__PURE__*/ jsx("div", {
-                ref: markerRefCallback,
-                "aria-hidden": "true",
-                style: {
-                    height: "1px",
-                    background: "transparent"
-                }
-            }, "__infinite-scroll-marker-end__"));
-        }
-        return result;
-    }, [
-        data,
-        visibleCount,
-        totalItems,
-        markerPosition,
-        hasMore,
-        renderRow,
-        markerRefCallback,
-        bodyContextBase
-    ]);
-    // Measure column widths for sticky header/footer sync.
-    useColumnMeasurement(bodyRef, renderedContent, noData);
+    // Measure column widths for sticky header/footer sync. Re-key on the first
+    // mounted row so the sticky header re-syncs as the window (and the auto-column
+    // width) slides.
+    useColumnMeasurement(bodyRef, virtualItems[0]?.index, noData);
     const bodyClass = getBodyClass(className);
+    const paddingTop = virtualItems.length > 0 ? Math.max(0, virtualItems[0].start - scrollMargin) : 0;
+    const paddingBottom = virtualItems.length > 0 ? Math.max(0, totalSize - virtualItems[virtualItems.length - 1].end) : 0;
     return /*#__PURE__*/ jsx(DataGridContext.Provider, {
         value: {
             ...ctx,
@@ -324,7 +284,42 @@ const ROW_INDEX_DATA_ATTR = "data-row-index";
                     },
                     children: noDataText ?? "No Data"
                 })
-            }) : renderedContent
+            }) : /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        ref: sentinelRef,
+                        "aria-hidden": "true",
+                        style: {
+                            gridColumn: "1 / -1",
+                            height: 0
+                        }
+                    }),
+                    paddingTop > 0 && /*#__PURE__*/ jsx("div", {
+                        "aria-hidden": "true",
+                        style: {
+                            gridColumn: "1 / -1",
+                            height: paddingTop
+                        }
+                    }),
+                    virtualItems.map((vItem)=>/*#__PURE__*/ jsx(DataGridContext.Provider, {
+                            value: {
+                                ...bodyContextBase,
+                                isLastRow: vItem.index === totalItems - 1,
+                                ariaRowIndex: vItem.index + headerRows + 1,
+                                dataIndex: vItem.index,
+                                measureRowElement: virtualizer.measureElement
+                            },
+                            children: renderRow(data[vItem.index], vItem.index)
+                        }, vItem.key)),
+                    paddingBottom > 0 && /*#__PURE__*/ jsx("div", {
+                        "aria-hidden": "true",
+                        style: {
+                            gridColumn: "1 / -1",
+                            height: paddingBottom
+                        }
+                    })
+                ]
+            })
         })
     });
 }

package/dist/DataGridRow/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.2
+  @versini/ui-datagrid v4.0.0
   © 2026 gizmette.com
 */
 
@@ -22,7 +22,7 @@ import { getRowClasses } from "../91.js";
     // Count the number of direct children to determine column count.
     const columnCount = react.Children.count(children);
     return /*#__PURE__*/ jsx(DataGridContext.Consumer, {
-        children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths, isLastRow })=>{
+        children: ({ mode, cellWrapper, stickyHeader, stickyFooter, columns, measuredColumnWidths, isLastRow, ariaRowIndex, dataIndex, measureRowElement })=>{
             /**
 				 * Determine if this row is inside a sticky header/footer. Sticky elements
 				 * are absolutely positioned and outside the main grid flow, so they can't
@@ -75,6 +75,7 @@ import { getRowClasses } from "../91.js";
                 };
             }
             return /*#__PURE__*/ jsx("div", {
+                ref: measureRowElement,
                 role: "row",
                 className: getRowClasses({
                     mode,
@@ -89,6 +90,8 @@ import { getRowClasses } from "../91.js";
                     ...userStyle
                 },
                 "data-active": active || undefined,
+                "data-index": dataIndex,
+                "aria-rowindex": ariaRowIndex,
                 ...rest,
                 children: children
             });

package/dist/DataGridSorting/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-datagrid v3.1.2
+  @versini/ui-datagrid v4.0.0
   © 2026 gizmette.com
 */
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-datagrid",
-	"version": "3.1.2",
+	"version": "4.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -91,6 +91,7 @@
 		"@versini/ui-types": "10.0.0"
 	},
 	"dependencies": {
+		"@tanstack/react-virtual": "3.14.4",
 		"@versini/ui-icons": "4.29.0",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.3.1"
@@ -98,5 +99,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "f25e4b557175f745705c249d10e2e77dc02ed462"
+	"gitHead": "4f7d84ec0f33c46dd0757121a5f04da7071b2d4c"
 }