@jetbrains/ring-ui 8.0.0-beta.2 → 8.0.0-beta.4

package/components/table/internal/table-header.js

@@ -0,0 +1,357 @@
+/* eslint-disable no-nested-ternary, max-lines */
+import { use, useCallback, useRef, useState } from 'react';
+import classNames from 'classnames';
+import arrowDownIcon from '@jetbrains/icons/arrow-12px-down';
+import arrowUpIcon from '@jetbrains/icons/arrow-12px-up';
+import dragIcon from '@jetbrains/icons/drag-12px';
+import settingsIcon from '@jetbrains/icons/settings-12px';
+import trashIcon from '@jetbrains/icons/trash-12px';
+import unsortedIcon from '@jetbrains/icons/unsorted-12px';
+import { ColumnAnimationContext, TablePropsContext } from '../table-const';
+import Icon from '../../icon';
+import { useComposedRef } from '../../global/compose-refs';
+import { isWithinInteractiveElement } from '../../global/is-within-interactive-element';
+import { parseCssDuration } from '../../global/parse-css-duration';
+import styles from '../table.css';
+export function TableHeader({ expectColumnReorder }) {
+    const { columns, noHeader, stickyHeader, columnEditing, onColumnEditingRequest, theadClassName, theadTrClassName } = use(TablePropsContext);
+    const [localColumnEditing, setLocalColumnEditing] = useState(false);
+    const effectiveColumnEditing = columnEditing ?? localColumnEditing;
+    const toggleColumnEditing = useCallback((source) => {
+        let newColumnEditing;
+        if (columnEditing == null) {
+            newColumnEditing = !localColumnEditing;
+            setLocalColumnEditing(newColumnEditing);
+        }
+        else {
+            newColumnEditing = !columnEditing;
+        }
+        onColumnEditingRequest?.(newColumnEditing, source);
+    }, [columnEditing, localColumnEditing, onColumnEditingRequest]);
+    const handleTheadClick = useCallback((e) => {
+        if (window.matchMedia('(hover: none)').matches && !isWithinInteractiveElement(e.target)) {
+            toggleColumnEditing('header');
+        }
+    }, [toggleColumnEditing]);
+    const handleEditColumnsButtonClick = useCallback(() => {
+        toggleColumnEditing('edit-button');
+    }, [toggleColumnEditing]);
+    if (noHeader)
+        return null;
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions, jsx-a11y/click-events-have-key-events
+    <thead className={classNames(theadClassName, effectiveColumnEditing && styles.theadColumnEditing, stickyHeader && styles.stickyHeader)} onClick={handleTheadClick}>
+      <tr className={theadTrClassName}>
+        {columns.map((column, columnIndex) => (<TableHeaderCell key={column.key} columnIndex={columnIndex} columnEditing={effectiveColumnEditing} handleEditColumnsButtonClick={handleEditColumnsButtonClick} expectColumnReorder={expectColumnReorder}/>))}
+      </tr>
+    </thead>);
+}
+function TableHeaderCell({ columnIndex, columnEditing, handleEditColumnsButtonClick, expectColumnReorder, }) {
+    const { columns, columnEditButton } = use(TablePropsContext);
+    const { key, name, renderHeader, sortOrder, deletable, canReorder, thClassName } = columns[columnIndex];
+    const animatedColumn = use(ColumnAnimationContext);
+    const children = renderHeader ? renderHeader() : (name ?? String(key));
+    return (<th className={classNames(styles.headerCell, animatedColumn?.columnIndex === columnIndex && animatedColumn.cellClassName, thClassName)} scope='col' aria-sort={sortOrder}>
+      <div className={styles.headerCellInnerWrapper}>
+        <div className={styles.sortAndHeader}>
+          {canReorder && <ColumnReorderHandle columnIndex={columnIndex} expectColumnReorder={expectColumnReorder}/>}
+          {sortOrder ? (<SortButton columnIndex={columnIndex} aria-description={`Sort order: ${sortOrder}`}>
+              {children}
+            </SortButton>) : (children)}
+          {canReorder && <ColumnReorderHandleMirror />}
+        </div>
+
+        <div className={styles.rightButtons}>
+          {deletable && <DeleteColumnButton columnIndex={columnIndex}/>}
+          {columnIndex === columns.length - 1 && columnEditButton && (<EditColumnsButton columnEditing={columnEditing} onClick={handleEditColumnsButtonClick}/>)}
+        </div>
+      </div>
+    </th>);
+}
+function SortButton({ columnIndex, className, children, onClick, ...restProps }) {
+    const tableProps = use(TablePropsContext);
+    const column = tableProps?.columns[columnIndex];
+    const sortOrder = column?.sortOrder;
+    const glyph = sortOrder === 'none'
+        ? unsortedIcon
+        : sortOrder === 'ascending'
+            ? arrowUpIcon
+            : sortOrder === 'descending'
+                ? arrowDownIcon
+                : undefined;
+    const handleClick = useCallback((e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) {
+            const nextOrder = sortOrder === 'ascending' ? 'descending' : sortOrder === 'descending' ? 'none' : 'ascending';
+            tableProps.onSort?.(columnIndex, nextOrder, tableProps.columns);
+        }
+    }, [columnIndex, onClick, sortOrder, tableProps]);
+    if (!tableProps || !column) {
+        return null;
+    }
+    return (<button type='button' className={classNames(styles.headerButton, className)} onClick={handleClick} {...restProps}>
+      {children} <Icon glyph={glyph} aria-hidden/>
+    </button>);
+}
+function DeleteColumnButton({ columnIndex, className, onClick, ...restProps }) {
+    const tableProps = use(TablePropsContext);
+    const column = tableProps?.columns[columnIndex];
+    const handleClick = useCallback((e) => {
+        onClick?.(e);
+        if (!e.defaultPrevented) {
+            tableProps.onColumnDelete?.(columnIndex, tableProps.columns);
+        }
+    }, [columnIndex, onClick, tableProps]);
+    if (!tableProps || !column) {
+        return null;
+    }
+    const hint = `Delete column ${column.name ?? String(column.key)}.`;
+    return (<button type='button' className={classNames(styles.headerButton, styles.deleteColumnButton, className)} onClick={handleClick} aria-label={hint} title={hint} {...restProps}>
+      <Icon glyph={trashIcon} aria-hidden='true'/>
+    </button>);
+}
+function EditColumnsButton({ columnEditing, ...props }) {
+    const { className, ...restProps } = props;
+    const hint = columnEditing ? 'Hide column controls.' : 'Show column controls.';
+    return (<button type='button' className={classNames(styles.headerButton, styles.editColumnsButton, className)} aria-pressed={columnEditing} aria-label={hint} title={hint} {...restProps}>
+      <Icon glyph={settingsIcon} aria-hidden='true'/>
+    </button>);
+}
+function ColumnReorderHandle({ columnIndex, expectColumnReorder, ref: userRef, className, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, onKeyDown, ...restProps }) {
+    const tableProps = use(TablePropsContext);
+    const column = tableProps?.columns[columnIndex];
+    const canReorder = column?.canReorder;
+    const canReorderCb = useCallback((index) => canReorder === true || (typeof canReorder === 'function' && canReorder(index, tableProps.columns)), [canReorder, tableProps]);
+    const localRef = useRef(null);
+    const composedRef = useComposedRef(localRef, userRef);
+    const activeDragRef = useRef(null);
+    const getDragFrame = useCallback(() => {
+        return document.body.querySelector(`.${styles.columnDragFrame}`);
+    }, []);
+    const renderDragFrame = useCallback((clientX) => {
+        const { startColumnIndex, startClientX, headerTopClientY, columnsClientX, indicatorHeight } = activeDragRef.current;
+        const { l, r } = columnsClientX[startColumnIndex];
+        let dragFrame = getDragFrame();
+        if (!dragFrame) {
+            dragFrame = document.createElement('div');
+            dragFrame.className = styles.columnDragFrame;
+            dragFrame.style.setProperty('top', `calc(max(0px, ${headerTopClientY - 2}px))`);
+            dragFrame.style.setProperty('width', `${r - l}px`);
+            dragFrame.style.setProperty('height', indicatorHeight);
+            document.body.appendChild(dragFrame);
+        }
+        dragFrame.style.setProperty('left', `${l + clientX - startClientX}px`);
+    }, [getDragFrame]);
+    const translateXButton = useCallback((clientX) => {
+        if (!localRef.current || !activeDragRef.current)
+            return;
+        const { startClientX } = activeDragRef.current;
+        localRef.current.style.setProperty('transform', `translateX(${clientX - startClientX}px)`);
+    }, []);
+    const getClosestInsertionPoint = useCallback((clientX) => {
+        let bestDistance = Infinity;
+        let index = -1;
+        let after = false;
+        activeDragRef.current?.columnsClientX.forEach(({ l, r }, i) => {
+            const distanceToLeft = Math.abs(l - clientX);
+            const distanceToRight = Math.abs(r - clientX);
+            if (distanceToLeft < bestDistance && canReorderCb(i)) {
+                bestDistance = distanceToLeft;
+                index = i;
+                after = false;
+            }
+            if (distanceToRight < bestDistance && canReorderCb(i + 1)) {
+                bestDistance = distanceToRight;
+                index = i;
+                after = true;
+            }
+        });
+        return { index, after };
+    }, [canReorderCb]);
+    const getInsertionIndicator = useCallback(() => {
+        return document.body.querySelector(`.${styles.columnInsertionIndicator}`);
+    }, []);
+    const renderInsertionIndicator = useCallback((insertionPoint) => {
+        const { index, after } = insertionPoint;
+        const { headerTopClientY, columnsClientX, indicatorHeight } = activeDragRef.current;
+        const { l, r } = columnsClientX[index];
+        let indicator = getInsertionIndicator();
+        if (!indicator) {
+            indicator = document.createElement('div');
+            indicator.className = styles.columnInsertionIndicator;
+            indicator.style.setProperty('top', `${headerTopClientY}px`);
+            indicator.style.setProperty('height', indicatorHeight);
+            document.body.appendChild(indicator);
+        }
+        indicator.style.setProperty('left', `${(after ? r : l) - 1}px`);
+    }, [getInsertionIndicator]);
+    const cleanupDrag = useCallback(() => {
+        if (activeDragRef.current) {
+            activeDragRef.current.cleanup();
+            activeDragRef.current = null;
+        }
+        const btn = localRef.current;
+        if (btn) {
+            btn.style.removeProperty('transform');
+            btn.style.removeProperty('transition');
+        }
+        getDragFrame()?.remove();
+        getInsertionIndicator()?.remove();
+    }, [getDragFrame, getInsertionIndicator]);
+    const animateNoChangeThenCleanup = useCallback(() => {
+        if (activeDragRef.current?.state === 'is-dragging') {
+            activeDragRef.current.state = 'ended-with-no-change';
+            activeDragRef.current.cleanup();
+            activeDragRef.current.cleanup = () => { };
+            const dragFrame = getDragFrame();
+            if (dragFrame) {
+                const { columnsClientX, startColumnIndex } = activeDragRef.current;
+                dragFrame.style.left = `${columnsClientX[startColumnIndex].l}px`;
+                dragFrame.style.opacity = '0';
+                dragFrame.style.transition = 'left var(--ring-ease), opacity var(--ring-ease)';
+            }
+            const indicator = getInsertionIndicator();
+            if (indicator) {
+                indicator.style.opacity = '0';
+                indicator.style.transition = 'opacity var(--ring-ease)';
+            }
+            const btn = localRef.current;
+            if (btn) {
+                btn.style.transform = 'translateX(0)';
+                btn.style.transition = 'transform var(--ring-ease)';
+            }
+        }
+        const ringEaseMs = parseCssDuration(window.getComputedStyle(document.documentElement).getPropertyValue('--ring-ease'));
+        setTimeout(cleanupDrag, ringEaseMs);
+    }, [cleanupDrag, getDragFrame, getInsertionIndicator]);
+    const handlePointerDown = useCallback((e) => {
+        onPointerDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        const { clientX: startClientX, pointerId, currentTarget } = e;
+        const thead = currentTarget.closest('thead');
+        const table = thead?.closest('table');
+        if (!thead || !table)
+            return;
+        const headerTopClientY = thead.getBoundingClientRect().top;
+        const columnsClientX = [...thead.querySelectorAll('th')].map(th => {
+            const rect = th.getBoundingClientRect();
+            return { l: rect.x, r: rect.x + rect.width };
+        });
+        const { bottom } = table.getBoundingClientRect();
+        const visibleTableHeight = bottom - headerTopClientY;
+        const viewportBottomRelativeToHeaderTop = window.innerHeight - headerTopClientY;
+        const indicatorHeight = `min(${visibleTableHeight}px, calc(${viewportBottomRelativeToHeaderTop}px - .5rem))`;
+        currentTarget.setPointerCapture(pointerId);
+        function keydownListener(keyEvent) {
+            if (keyEvent.key === 'Escape') {
+                animateNoChangeThenCleanup();
+                keyEvent.stopPropagation();
+                keyEvent.preventDefault();
+            }
+        }
+        document.addEventListener('keydown', keydownListener); // In Safari, the button is not focused
+        currentTarget.style.cursor = 'grabbing';
+        activeDragRef.current = {
+            state: 'is-dragging',
+            startColumnIndex: columnIndex,
+            startClientX,
+            headerTopClientY,
+            columnsClientX,
+            indicatorHeight,
+            cleanup: () => {
+                document.removeEventListener('keydown', keydownListener);
+                currentTarget.releasePointerCapture(pointerId);
+                currentTarget.style.removeProperty('cursor');
+            },
+        };
+        renderDragFrame(startClientX);
+        e.preventDefault();
+    }, [animateNoChangeThenCleanup, columnIndex, onPointerDown, renderDragFrame]);
+    const handlePointerMove = useCallback((e) => {
+        onPointerMove?.(e);
+        if (e.defaultPrevented || activeDragRef.current?.state !== 'is-dragging')
+            return;
+        const { clientX } = e;
+        renderDragFrame(clientX);
+        translateXButton(clientX);
+        const insertionPoint = getClosestInsertionPoint(clientX);
+        if (insertionPoint)
+            renderInsertionIndicator(insertionPoint);
+    }, [getClosestInsertionPoint, translateXButton, onPointerMove, renderDragFrame, renderInsertionIndicator]);
+    const handlePointerUp = useCallback((e) => {
+        onPointerUp?.(e);
+        if (e.defaultPrevented || activeDragRef.current?.state !== 'is-dragging')
+            return;
+        const table = e.currentTarget.closest('table');
+        if (!table) {
+            cleanupDrag();
+            return;
+        }
+        const { index, after } = getClosestInsertionPoint(e.clientX);
+        const insertionIndex = after ? index + 1 : index;
+        if (insertionIndex === columnIndex || insertionIndex === columnIndex + 1) {
+            animateNoChangeThenCleanup();
+            return;
+        }
+        cleanupDrag();
+        expectColumnReorder({ fromIndex: columnIndex, insertionIndex });
+        tableProps.onColumnReorder?.(columnIndex, insertionIndex, tableProps.columns);
+    }, [
+        animateNoChangeThenCleanup,
+        cleanupDrag,
+        columnIndex,
+        expectColumnReorder,
+        getClosestInsertionPoint,
+        onPointerUp,
+        tableProps,
+    ]);
+    const handlePointerCancel = useCallback((e) => {
+        onPointerCancel?.(e);
+        if (e.defaultPrevented)
+            return;
+        animateNoChangeThenCleanup();
+    }, [animateNoChangeThenCleanup, onPointerCancel]);
+    const handleLostPointerCapture = useCallback((e) => {
+        onLostPointerCapture?.(e);
+        if (e.defaultPrevented)
+            return;
+        animateNoChangeThenCleanup();
+    }, [animateNoChangeThenCleanup, onLostPointerCapture]);
+    const handleKeyDown = useCallback((e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented || !tableProps)
+            return;
+        const left = e.key === 'ArrowLeft';
+        const right = e.key === 'ArrowRight';
+        if (!left && !right)
+            return;
+        const initialInsertionIndex = left ? columnIndex - 1 : columnIndex + 2;
+        const step = left ? -1 : 1;
+        // eslint-disable-next-line yoda
+        for (let i = initialInsertionIndex; 0 <= i && i <= tableProps.columns.length; i += step) {
+            if (canReorderCb(i)) {
+                expectColumnReorder({ fromIndex: columnIndex, insertionIndex: i });
+                tableProps.onColumnReorder?.(columnIndex, i, tableProps.columns);
+                e.preventDefault();
+                return;
+            }
+        }
+    }, [canReorderCb, columnIndex, expectColumnReorder, onKeyDown, tableProps]);
+    if (!tableProps || !column) {
+        return null;
+    }
+    const hint = `Reorder column ${column.name ?? String(column.key)}.`;
+    const description = 'Use Left and Right arrow keys to move the column.';
+    return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    <button ref={composedRef} type='button' className={classNames(styles.headerButton, styles.columnReorderHandle, className)} aria-label={hint} aria-description={description} aria-keyshortcuts='ArrowLeft ArrowRight' onKeyDown={handleKeyDown} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onPointerCancel={handlePointerCancel} onLostPointerCapture={handleLostPointerCapture} {...restProps}>
+      <Icon glyph={dragIcon} aria-hidden='true'/>
+    </button>);
+}
+/**
+ * Reserves the space for the reorder handle and prevents layout shift when the handle appears on hover.
+ */
+function ColumnReorderHandleMirror() {
+    return <span className={styles.columnReorderHandleMirror} aria-hidden='true'/>;
+}

package/components/table/internal/virtual-items.d.ts

@@ -0,0 +1,34 @@
+import { type RefObject } from 'react';
+export type VirtualItem = MaterializedItem | Spacer;
+interface MaterializedItem {
+    type: 'materialized';
+    index: number;
+}
+interface Spacer {
+    type: 'spacer';
+    from: number;
+    to: number;
+    height: number;
+    key: string;
+}
+type CollapseItemIntoSpacerCallback = (index: number, height: number) => void;
+export declare const CollapseItemIntoSpacerContext: import("react").Context<CollapseItemIntoSpacerCallback>;
+export declare function useVirtualItems<T>({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
+    enabled: boolean;
+    data: readonly T[];
+    scrollerRef: RefObject<HTMLElement | null> | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    estimateHeight: (item: T, index: number, items: readonly T[]) => number;
+    lookaheadPx: number;
+    retentionMarginPx: number;
+    minScrollAndResizeDeltaPx: number;
+}): {
+    virtualItems: VirtualItem[];
+    intersectionObserverHandle: import("../../global/intersection-observer-context").IntersectionObserverHandle;
+    collapseItemIntoSpacer: CollapseItemIntoSpacerCallback;
+};
+export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
+    spacer: Spacer;
+    colSpan: number;
+}): import("react").JSX.Element;
+export {};

package/components/table/{table-virtualize.js → internal/virtual-items.js}

@@ -1,68 +1,60 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import useEventCallback from '../global/use-event-callback';
-import { useIntersectionObserverHandle } from '../global/intersection-observer-context';
-import styles from './table.css';
+import { createContext, useCallback, useEffect, useRef, useState } from 'react';
+import { useIntersectionObserverHandle } from '../../global/intersection-observer-context';
+import { setTimeoutWithCleanup } from '../../global/schedule-with-cleanup';
+import styles from '../table.css';
+export const CollapseItemIntoSpacerContext = createContext(() => { });
 /**
  * RAF is somewhat too frequent. Most updates happen on virtualization boundaries
  * within the invisible overscroll area, so they don't require such a high update rate.
  * Therefore, we throttle with a custom delay.
  */
 const virtualizationThrottleDelay = 50;
-export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }) {
+export function useVirtualItems({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }) {
     const itemsMaterialization = useRef([]);
-    const [virtualItems, setVirtualItems] = useState(() => [
-        {
-            type: 'spacer',
-            from: 0,
-            to: length,
-            height: Array.from({ length }, (_, i) => estimateHeight(i)).reduce((a, b) => a + b, 0),
-            key: `${styles.spacerRow}-0`,
-        },
-    ]);
-    const materializeVisibleSpacerItems = useEventCallback(() => {
+    const [virtualItems, setVirtualItems] = useState(() => enabled ? getAllVirtualizedItems(data, estimateHeight) : []);
+    const materializeVisibleSpacerItems = useCallback(() => {
         if (!tableRef.current)
             return;
-        const containerHeight = scrollerRef?.current?.clientHeight ?? window.innerHeight;
+        const scrollerRect = scrollerRef?.current?.getBoundingClientRect();
+        const visibleStart = scrollerRect?.top ?? 0;
+        const visibleEnd = scrollerRect ? Math.min(scrollerRect.bottom, window.innerHeight) : window.innerHeight;
+        const materializeStart = visibleStart - lookaheadPx;
+        const materializeEnd = visibleEnd + lookaheadPx;
         for (const spacerRow of tableRef.current.querySelectorAll(`.${styles.spacerRow}`)) {
-            const rect = spacerRow.getBoundingClientRect();
-            const spacerIntersectsLookaheadArea = rect.top < containerHeight + lookaheadPx && rect.bottom > -lookaheadPx;
-            if (!spacerIntersectsLookaheadArea) {
+            const spacerRect = spacerRow.getBoundingClientRect();
+            if (spacerRect.bottom < materializeStart || spacerRect.top > materializeEnd) {
                 continue;
             }
-            const visibleOffsetStart = Math.max(0, -rect.top);
-            const visibleOffsetEnd = Math.min(rect.height, containerHeight - rect.top);
-            const materializeOffsetStart = visibleOffsetStart - lookaheadPx;
-            const materializeOffsetEnd = visibleOffsetEnd + lookaheadPx;
-            let offsetInSpacer = 0;
             const from = Number(spacerRow.dataset.from);
             const to = Number(spacerRow.dataset.to);
+            let currentTop = spacerRect.top;
             for (let i = from; i < to; i++) {
                 const itemMaterialization = itemsMaterialization.current[i];
-                const itemHeight = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(i);
-                const itemOffsetStart = offsetInSpacer;
-                const itemOffsetEnd = offsetInSpacer + itemHeight;
-                if (itemOffsetStart < materializeOffsetEnd && itemOffsetEnd > materializeOffsetStart) {
+                const itemHeight = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(data[i], i, data);
+                const itemTop = currentTop;
+                const itemBottom = currentTop + itemHeight;
+                if (itemBottom >= materializeStart && itemTop <= materializeEnd) {
                     itemsMaterialization.current[i] = true;
                 }
-                else if (itemOffsetStart > materializeOffsetEnd) {
+                else if (itemTop > materializeEnd) {
                     break;
                 }
-                offsetInSpacer += itemHeight;
+                currentTop += itemHeight;
             }
         }
-    });
-    const recomputeVirtualItems = useEventCallback(() => {
+    }, [data, estimateHeight, lookaheadPx, scrollerRef, tableRef]);
+    const recomputeVirtualItems = useCallback(() => {
         const newVirtualItems = [];
         let spacerCounter = 0;
         for (let i = 0; i < length; i++) {
             const itemMaterialization = itemsMaterialization.current[i];
             if (itemMaterialization === true) {
-                newVirtualItems.push({ type: 'rendered', index: i });
+                newVirtualItems.push({ type: 'materialized', index: i });
             }
             else {
                 const lastItemOrSpacer = newVirtualItems[newVirtualItems.length - 1];
                 const lastSpacer = lastItemOrSpacer?.type === 'spacer' ? lastItemOrSpacer : undefined;
-                const height = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(i);
+                const height = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(data[i], i, data);
                 if (lastSpacer) {
                     lastSpacer.to = i + 1;
                     lastSpacer.height += height;
@@ -73,16 +65,16 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
                         from: i,
                         to: i + 1,
                         height,
-                        key: `${styles.spacerRow}-${spacerCounter++}`,
+                        key: spacerKey(spacerCounter++),
                     });
                 }
             }
         }
         setVirtualItems(newVirtualItems);
-    });
+    }, [data, estimateHeight, length]);
     const timerIdRef = useRef(null);
     const callbacksRef = useRef(null);
-    const throttle = useEventCallback((...callbacks) => {
+    const throttle = useCallback((...callbacks) => {
         if (timerIdRef.current != null) {
             callbacks.forEach(cb => {
                 callbacksRef.current.delete(cb);
@@ -96,8 +88,11 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
             timerIdRef.current = null;
             callbacksRef.current = null;
         }, virtualizationThrottleDelay);
-    });
+    }, []);
+    const prevEnabledRef = useRef(enabled);
     useEffect(() => {
+        const prevEnabled = prevEnabledRef.current;
+        prevEnabledRef.current = enabled;
         if (!enabled)
             return;
         const scroller = scrollerRef?.current;
@@ -122,27 +117,66 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
         const resizeObserver = new ResizeObserver(handleViewportChange);
         const resizeTarget = scroller ?? document.documentElement;
         resizeObserver.observe(resizeTarget);
-        handleViewportChange();
+        let timeoutCleanup;
+        if (!prevEnabled) {
+            timeoutCleanup = setTimeoutWithCleanup(() => {
+                itemsMaterialization.current = [];
+                setVirtualItems(getAllVirtualizedItems(data, estimateHeight));
+                handleViewportChange();
+            });
+        }
+        else {
+            handleViewportChange();
+        }
         return () => {
+            timeoutCleanup?.();
             scrollTarget.removeEventListener('scroll', handleViewportChange);
             resizeObserver.unobserve(resizeTarget);
             resizeObserver.disconnect();
+            if (timerIdRef.current != null) {
+                window.clearTimeout(timerIdRef.current);
+                timerIdRef.current = null;
+                callbacksRef.current = null;
+            }
         };
-    }, [enabled, materializeVisibleSpacerItems, minScrollAndResizeDeltaPx, recomputeVirtualItems, scrollerRef, throttle]);
+    }, [
+        data,
+        enabled,
+        estimateHeight,
+        length,
+        materializeVisibleSpacerItems,
+        minScrollAndResizeDeltaPx,
+        recomputeVirtualItems,
+        scrollerRef,
+        throttle,
+    ]);
     const intersectionObserverHandle = useIntersectionObserverHandle(scrollerRef, scrollerRef ? retentionMarginPx : undefined, !scrollerRef ? retentionMarginPx : undefined);
-    const collapseItemIntoSpacer = useEventCallback((index, height) => {
+    const collapseItemIntoSpacer = useCallback((index, height) => {
         if (!enabled)
             return;
         itemsMaterialization.current[index] = height;
         throttle(recomputeVirtualItems);
-    });
-    const allVisibleVirtualItems = useMemo(() => Array.from({ length: enabled ? 0 : length }, (_, index) => ({ type: 'rendered', index })), [enabled, length]);
+    }, [enabled, throttle, recomputeVirtualItems]);
     return {
-        virtualItems: enabled ? virtualItems : allVisibleVirtualItems,
+        virtualItems,
         intersectionObserverHandle,
         collapseItemIntoSpacer,
     };
 }
+function getAllVirtualizedItems(data, estimateHeight) {
+    return [
+        {
+            type: 'spacer',
+            from: 0,
+            to: data.length,
+            height: data.reduce((acc, item, index, items) => acc + estimateHeight(item, index, items), 0),
+            key: spacerKey(0),
+        },
+    ];
+}
+function spacerKey(index) {
+    return `__${styles.spacerRow}-${index}`;
+}
 export function SpacerRow({ spacer: { from, to, height }, colSpan }) {
     return (<tr className={styles.spacerRow} data-from={from} data-to={to}>
       <td className={styles.spacerCell} colSpan={colSpan} style={{ height }}/>

package/components/table/item-virtualization.d.ts

@@ -0,0 +1,35 @@
+import { type RefObject } from 'react';
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+export declare function useItemVirtualization({ index, refs, onIntersectionChange, }: {
+    /**
+     * Index of the item.
+     */
+    index: number;
+    /**
+     * One or more elements representing this item.
+     *
+     * When multiple elements are provided, the virtualization callback receives
+     * the intersection state of all of them.
+     *
+     * If you pass multiple refs, memoize the array (for example with `useMemo()`)
+     * to avoid restarting observation on every render.
+     */
+    refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[];
+    /**
+     * Invoked when the `isIntersecting` state of the observed elements changes.
+     * Consider wrapping a callback to `useCallback()` to avoid restarting observation on every render.
+     *
+     * @param intersectionStates - Current intersection state of every observed element.
+     * Entries are initially `undefined` until the corresponding element
+     * has been reported by `IntersectionObserver`.
+     * @param changedIndex - Index of the element whose intersection state changed.
+     * @param elements - The observed elements. Note that some elements may
+     * already be disconnected from the DOM when this callback is invoked.
+     * Use additional checks like `element.isConnected`.
+     * @returns Return the height of an item to collapse the item into spacer,
+     * or `undefined` to keep the item rendered.
+     */
+    onIntersectionChange: (intersectionStates: (boolean | undefined)[], changedIndex: number, elements: (Element | null)[]) => number | undefined;
+}): void;

package/components/table/item-virtualization.js

@@ -0,0 +1,28 @@
+import { use, useEffect } from 'react';
+import { IntersectionObserverContext } from '../global/intersection-observer-context';
+import { CollapseItemIntoSpacerContext } from './internal/virtual-items';
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+export function useItemVirtualization({ index, refs, onIntersectionChange, }) {
+    const handle = use(IntersectionObserverContext);
+    const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
+    useEffect(() => {
+        const intersectionStates = Array.isArray(refs) ? refs.map(() => undefined) : [undefined];
+        const elements = Array.isArray(refs) ? refs.map(r => r.current) : [refs.current];
+        const cleanups = [];
+        elements.forEach((element, elementIndex) => {
+            if (!element)
+                return;
+            const cleanup = handle.observe(element, isIntersecting => {
+                intersectionStates[elementIndex] = isIntersecting;
+                const height = onIntersectionChange(intersectionStates, elementIndex, elements);
+                if (height != null) {
+                    collapseItemIntoSpacer(index, height);
+                }
+            });
+            cleanups.push(cleanup);
+        });
+        return () => cleanups.forEach(cleanup => cleanup());
+    }, [collapseItemIntoSpacer, handle, index, onIntersectionChange, refs]);
+}