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

package/components/legacy-table/table.js

@@ -0,0 +1,191 @@
+/**
+ * @name Table
+ */
+import { Component, PureComponent } from 'react';
+import * as React from 'react';
+import classNames from 'classnames';
+import { arrayMove, List } from 'react-movable';
+import focusSensorHOC from '../global/focus-sensor-hoc';
+import getUID from '../global/get-uid';
+import Shortcuts from '../shortcuts/shortcuts';
+import Loader from '../loader/loader';
+import Header from './header';
+import selectionShortcutsHOC from './selection-shortcuts-hoc';
+import disableHoverHOC from './disable-hover-hoc';
+import Row from './row-with-focus-sensor';
+import style from './table.css';
+/**
+ * Interactive table with selection and keyboard navigation support.
+ */
+export class Table extends PureComponent {
+    static defaultProps = {
+        isItemSelectable: () => true,
+        loading: false,
+        onSort: () => { },
+        onReorder: () => { },
+        getItemKey: (item) => {
+            // Default behavior stays backward compatible: use item's "id" if present
+            if ('id' in item) {
+                return item.id;
+            }
+            // If there's no id provided on item and no getKey supplied, fail fast with a clear message
+            throw new Error('Table: getItemKey is required when items have no "id" property');
+        },
+        sortKey: 'id',
+        sortOrder: true,
+        draggable: false,
+        alwaysShowDragHandle: false,
+        stickyHeader: true,
+        getItemLevel: () => 0,
+        getItemClassName: () => null,
+        getMetaColumnClassName: () => null,
+        getItemDataTest: () => null,
+        isItemCollapsible: () => false,
+        isParentCollapsible: () => false,
+        isItemCollapsed: () => false,
+        onItemCollapse: () => { },
+        onItemExpand: () => { },
+        onItemDoubleClick: () => { },
+        onItemClick: () => { },
+        remoteSelection: false,
+        isDisabledSelectionVisible: () => false,
+        getCheckboxTooltip: () => undefined,
+        RowComponent: Row,
+        wideFirstColumn: false,
+    };
+    state = {
+        shortcutsScope: getUID('ring-table-'),
+        userSelectNone: false,
+    };
+    componentDidMount() {
+        document.addEventListener('mouseup', this.onMouseUp);
+    }
+    componentDidUpdate({ data, selection, onSelect, selectable, remoteSelection }) {
+        if (data !== this.props.data && remoteSelection) {
+            onSelect(selection.cloneWith({ data: this.props.data }));
+        }
+        if (!this.props.selectable && this.props.selectable !== selectable) {
+            onSelect(selection.resetSelection());
+        }
+    }
+    componentWillUnmount() {
+        document.removeEventListener('mouseup', this.onMouseUp);
+    }
+    onMouseDown = (e) => {
+        if (e.shiftKey) {
+            this.setState({ userSelectNone: true });
+        }
+    };
+    onMouseUp = () => {
+        if (this.state.userSelectNone) {
+            this.setState({ userSelectNone: false });
+        }
+    };
+    onRowFocus = (row) => {
+        const { selection, onSelect } = this.props;
+        onSelect(selection.focus(row));
+    };
+    onRowSelect = (row, selected) => {
+        const { selection, onSelect } = this.props;
+        if (selected) {
+            onSelect(selection.select(row));
+        }
+        else {
+            onSelect(selection.deselect(row));
+        }
+    };
+    onSortEnd = ({ oldIndex, newIndex }) => {
+        const data = arrayMove(this.props.data, oldIndex, newIndex);
+        this.props.onReorder({ data, oldIndex, newIndex });
+    };
+    onCheckboxChange = (e) => {
+        const { checked } = e.currentTarget;
+        const { selection, onSelect } = this.props;
+        if (checked) {
+            onSelect(selection.selectAll());
+        }
+        else {
+            onSelect(selection.reset());
+        }
+        this.restoreFocusWithoutScroll();
+    };
+    restoreFocusWithoutScroll = () => {
+        const { scrollX, scrollY } = window;
+        this.props.onFocusRestore();
+        window.scrollTo(scrollX, scrollY);
+    };
+    render() {
+        const { data, selection, columns, caption, getItemKey, selectable, focused, isItemSelectable, getItemLevel, getItemClassName, getMetaColumnClassName, getItemDataTest, draggable, alwaysShowDragHandle, dragHandleTitle, loading, onSort, sortKey, sortOrder, loaderClassName, stickyHeader, stickyHeaderOffset, isItemCollapsible, isParentCollapsible, isItemCollapsed, onItemCollapse, onItemExpand, isDisabledSelectionVisible, getCheckboxTooltip, onItemDoubleClick, onItemClick, renderEmpty, RowComponent, renderLoader, } = this.props;
+        // NOTE: Do not construct new object per render because it causes all rows rerendering
+        const columnsArray = typeof columns === 'function' ? columns(null) : columns;
+        const headerProps = {
+            caption,
+            selectable,
+            draggable,
+            columns: columnsArray,
+            onSort,
+            sortKey,
+            sortOrder,
+            sticky: stickyHeader,
+            topStickOffset: stickyHeaderOffset,
+            className: this.props.headerClassName,
+        };
+        const selectedSize = selection.getSelected().size;
+        const allSelectedSize = selection.selectAll().getSelected().size;
+        headerProps.checked = selectedSize > 0 && selectedSize === allSelectedSize;
+        headerProps.onCheckboxChange = this.onCheckboxChange;
+        headerProps.checkboxDisabled = this.props.data.length === 0;
+        const wrapperClasses = classNames(style.tableWrapper, this.props.wrapperClassName);
+        const classes = classNames(this.props.className, {
+            [style.table]: true,
+            [style.wideFirstColumn]: this.props.wideFirstColumn,
+            [style.userSelectNone]: this.state.userSelectNone,
+            [style.disabledHover]: this.props.disabledHover,
+        });
+        const renderList = ({ children, props }) => {
+            const empty = (<tr>
+          <td colSpan={columnsArray.length || 1} className={style.tableMessage}>
+            {renderEmpty ? renderEmpty() : null}
+          </td>
+        </tr>);
+            const tbody = Array.isArray(children) && children.length > 0 ? children : empty;
+            return (<table className={classes} data-test='ring-table'>
+          <Header {...headerProps}/>
+          <tbody {...props} data-test='ring-table-body'>
+            {tbody}
+          </tbody>
+        </table>);
+        };
+        const renderItem = ({ value, props = {}, isDragged }) => {
+            if (value === null || value === undefined) {
+                return null;
+            }
+            const { ref, ...restProps } = props;
+            const row = (<RowComponent innerRef={ref} level={getItemLevel(value)} item={value} showFocus={selection.isFocused(value)} autofocus={selection.isFocused(value)} focused={focused && selection.isFocused(value)} selectable={selectable && isItemSelectable(value)} selected={selectable && selection.isSelected(value)} onFocus={this.onRowFocus} onSelect={this.onRowSelect} onDoubleClick={onItemDoubleClick} onClick={onItemClick} collapsible={isItemCollapsible(value)} parentCollapsible={isParentCollapsible(value)} collapsed={isItemCollapsed(value)} onCollapse={onItemCollapse} onExpand={onItemExpand} showDisabledSelection={isDisabledSelectionVisible(value)} checkboxTooltip={getCheckboxTooltip(value)} className={classNames(getItemClassName(value), { [style.draggingRow]: isDragged })} metaColumnClassName={getMetaColumnClassName(value)} draggable={draggable} alwaysShowDragHandle={alwaysShowDragHandle} dragHandleTitle={dragHandleTitle} columns={columns} data-test={getItemDataTest(value)} cellClassName={this.props.cellClassName} {...restProps} key={restProps.key ?? getItemKey(value)}/>);
+            return isDragged ? (<table style={{ ...props.style }} className={style.draggingTable}>
+          <tbody>{row}</tbody>
+        </table>) : (row);
+        };
+        return (<div className={wrapperClasses} data-test='ring-table-wrapper' ref={this.props.innerRef}>
+        {focused && <Shortcuts map={this.props.shortcutsMap} scope={this.state.shortcutsScope}/>}
+
+        {/* Handler detects that user holds Shift key */}
+        <div role='presentation' onMouseDown={this.onMouseDown}>
+          {draggable ? (<List values={data} renderList={renderList} renderItem={renderItem} onChange={this.onSortEnd}/>) : (renderList({ children: data.map((value, index) => renderItem({ value, index })) }))}
+        </div>
+
+        {loading && (<div className={style.loadingOverlay}>
+            {renderLoader ? renderLoader(loaderClassName) : <Loader className={loaderClassName}/>}
+          </div>)}
+      </div>);
+    }
+}
+const getContainer = () => disableHoverHOC(selectionShortcutsHOC(focusSensorHOC(Table)));
+// eslint-disable-next-line react/no-multi-comp
+export default class TableContainer extends Component {
+    // https://stackoverflow.com/a/53882322/6304152
+    Table = getContainer();
+    render() {
+        return <this.Table {...this.props}/>;
+    }
+}

package/components/table/default-item-renderer.d.ts

@@ -0,0 +1,25 @@
+import { type ComponentPropsWithoutRef } from 'react';
+export interface DefaultItemRendererProps {
+    /**
+     * Installed on the `<tr>` element
+     */
+    ref?: React.RefObject<HTMLTableRowElement | null>;
+    /**
+     * The index of the `data` item to render
+     */
+    index: number;
+    /**
+     * Changes the highlight on hover and applies the pointer cursor.
+     * Note that `false` doesn't mean it cannot handle `onClick`.
+     */
+    clickable?: boolean;
+    /**
+     * A level of a nested item. Results in an indent for columns with `indent: true`.
+     * 0, negative and not set mean no indent.
+     */
+    level?: number;
+}
+/**
+ * @see TableProps.renderItem
+ */
+export declare function DefaultItemRenderer<T>({ ref: userRef, index, clickable, level, className, onKeyDown, onBlur, ...restProps }: DefaultItemRendererProps & ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;

package/components/table/default-item-renderer.js

@@ -0,0 +1,64 @@
+import { useContext, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import { CollapseItemIntoSpacerContext, TablePropsContext } from './table-const';
+import { useIsIntersectingListener } from '../global/intersection-observer-context';
+import { TableCell, TableRow } from './table-base';
+import styles from './table.css';
+const INDENT_SIZE = 24;
+/**
+ * @see TableProps.renderItem
+ */
+export function DefaultItemRenderer({ ref: userRef, index, clickable, level, className, onKeyDown, onBlur, ...restProps }) {
+    const selfRef = useRef(null);
+    const ref = userRef ?? selfRef;
+    const collapseItemIntoSpacer = useContext(CollapseItemIntoSpacerContext);
+    useIsIntersectingListener(ref, isIntersecting => {
+        if (ref.current && !isIntersecting) {
+            collapseItemIntoSpacer(ref.current.getBoundingClientRect().height);
+        }
+    });
+    const { data, columns, selection, isItemKeyboardFocusable, onItemFocus } = useContext(TablePropsContext);
+    const item = data[index];
+    const selected = selection?.isSelected(item);
+    function handleKeyDown(e) {
+        onKeyDown?.(e);
+        if (!e.defaultPrevented && (e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+            const step = e.key === 'ArrowUp' ? -1 : 1;
+            // eslint-disable-next-line yoda
+            for (let i = index + step; 0 <= i && i < data.length; i += step) {
+                if (isItemKeyboardFocusable?.(data[i], i, data)) {
+                    onItemFocus?.(data[i], i, data);
+                    break;
+                }
+            }
+        }
+    }
+    const focused = selection?.isFocused(item);
+    useEffect(() => {
+        if (focused)
+            ref.current?.focus();
+    }, [focused, ref]);
+    function handleBlur(e) {
+        onBlur?.(e);
+        if (!e.defaultPrevented && focused) {
+            onItemFocus?.(null, -1, data);
+        }
+    }
+    return (<TableRow ref={ref} className={classNames(className, clickable && styles.clickableRow, selected && styles.selectedRow)} onKeyDown={handleKeyDown} tabIndex={focused ? 0 : undefined} onBlur={focused ? handleBlur : undefined} {...restProps}>
+      {columns.map((column, columnIndex) => (<TableCell key={column.key} className={column.tdClassName?.(item, index, data)} style={column.indent && level != null && level > 0 ? { paddingInlineStart: `${level * INDENT_SIZE}px` } : undefined}>
+          {column.renderCell?.(item, index, data) ?? getDefaultCellValue(item, columnIndex)}
+        </TableCell>))}
+    </TableRow>);
+}
+function getDefaultCellValue(item, columnIndex) {
+    if (Array.isArray(item)) {
+        return String(item[columnIndex] ?? '');
+    }
+    if (item !== null && typeof item === 'object') {
+        return String(Object.values(item)[columnIndex] ?? '');
+    }
+    if (columnIndex === 0) {
+        return String(item);
+    }
+    return '';
+}

package/components/table/table-base.d.ts

@@ -0,0 +1,24 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * Include it in a column header to make the column sortable.
+ * Handle clicks with {@link TableProps.onSort}.
+ */
+export declare function SortButton<T>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
+/**
+ * Include it in a column header to make the column deletable.
+ * Beware that `column.name ?? String(column.key)` is used in the aria-label.
+ * Handle clicks with {@link TableProps.onColumnDelete}.
+ */
+export declare function DeleteColumnButton<T>(props: ComponentPropsWithoutRef<'button'>): import("react").JSX.Element | null;
+/**
+ * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row classnames.
+ */
+export declare function TableRow(props: {
+    ref?: React.Ref<HTMLTableRowElement>;
+} & ComponentPropsWithoutRef<'tr'>): import("react").JSX.Element;
+/**
+ * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell classnames, but not data-dependent `tdClassName`.
+ */
+export declare function TableCell(props: ComponentPropsWithoutRef<'td'>): import("react").JSX.Element;

package/components/table/table-base.js

@@ -0,0 +1,79 @@
+import { useContext } from 'react';
+import classNames from 'classnames';
+import unsortedIcon from '@jetbrains/icons/unsorted-12px';
+import arrowDownIcon from '@jetbrains/icons/arrow-12px-down';
+import arrowUpIcon from '@jetbrains/icons/arrow-12px-up';
+import trashIcon from '@jetbrains/icons/trash-12px';
+import Icon from '../icon/icon';
+import { ColumnIndexContext, TablePropsContext } from './table-const';
+import styles from './table.css';
+/**
+ * Include it in a column header to make the column sortable.
+ * Handle clicks with {@link TableProps.onSort}.
+ */
+export function SortButton(props) {
+    const tableProps = useContext(TablePropsContext);
+    const columnIndex = useContext(ColumnIndexContext);
+    const column = tableProps?.columns[columnIndex];
+    if (!tableProps || !column) {
+        return null;
+    }
+    const sortOrder = column.sortOrder ?? 'none';
+    // eslint-disable-next-line no-nested-ternary, prettier/prettier
+    const glyph = sortOrder === 'none' ? unsortedIcon
+        : sortOrder === 'ascending' ? arrowUpIcon
+            : arrowDownIcon;
+    const { className, children, onClick, ...restProps } = props;
+    function handleClick(e) {
+        onClick?.(e);
+        if (!e.defaultPrevented) {
+            const sequence = ['none', 'ascending', 'descending'];
+            const nextOrder = sequence[(sequence.indexOf(sortOrder) + 1) % sequence.length];
+            tableProps.onSort?.(columnIndex, nextOrder);
+        }
+    }
+    return (<button type='button' className={classNames(styles.headerButton, className)} onClick={handleClick} {...restProps}>
+      {children} <Icon glyph={glyph} aria-hidden/>
+    </button>);
+}
+/**
+ * Include it in a column header to make the column deletable.
+ * Beware that `column.name ?? String(column.key)` is used in the aria-label.
+ * Handle clicks with {@link TableProps.onColumnDelete}.
+ */
+export function DeleteColumnButton(props) {
+    const tableProps = useContext(TablePropsContext);
+    const columnIndex = useContext(ColumnIndexContext);
+    const column = tableProps?.columns[columnIndex];
+    if (!tableProps || !column) {
+        return null;
+    }
+    const { className, onClick, ...restProps } = props;
+    function handleClick(e) {
+        onClick?.(e);
+        if (!e.defaultPrevented) {
+            tableProps.onColumnDelete?.(columnIndex);
+        }
+    }
+    return (<button type='button' className={classNames(styles.headerButton, styles.deleteColumnButton, className)} onClick={handleClick} aria-label={`Delete column ${column.name ?? String(column.key)}`} {...restProps}>
+      <Icon glyph={trashIcon}/>
+    </button>);
+}
+/**
+ * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row classnames.
+ */
+export function TableRow(props) {
+    const { ref, className, ...restProps } = props;
+    const classes = classNames(styles.row, className);
+    return <tr ref={ref} className={classes} {...restProps}/>;
+}
+/**
+ * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell classnames, but not data-dependent `tdClassName`.
+ */
+export function TableCell(props) {
+    const { className, ...restProps } = props;
+    const classes = classNames(styles.cell, className);
+    return <td className={classes} {...restProps}/>;
+}

package/components/table/table-component.d.ts

@@ -0,0 +1,53 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import type { TableProps } from './table';
+/**
+ * The new Table component. Use it instead of tables in the `legacy-table` folder.
+ *
+ * Minimal usage requires the following props:
+ * - `data`
+ * - `getKey`
+ * - `columns`
+ *   - `key`
+ *   - `renderCell` (not required, but usually needed)
+ *
+ * ## Selection
+ *
+ * Following three props support the selection:
+ *
+ * - `selection`
+ * - `isItemClickable`
+ * - `DefaultItemRenderer.onClick`
+ *
+ * Only `selection` is required: you can display and modify selection your way, e.g., via
+ * checkboxes in cells.
+ *
+ * ## Sorting
+ * You need the following to support sorting:
+ *
+ * - Include `<SortButton />` in a column header
+ * - Set initial `Column.sortOrder` to `none`, `ascending`.
+ * Do not leave `undefined` for the accessibility reasons.
+ * - Handle `TableProps.onSort` callback in the client code. It is expected
+ * to update `columns`, by setting the new `sortOrder` value for
+ * the corresponding column, and updating the data accordingly.
+ *
+ * ## Deleting columns
+ * You need the following to support deleting columns:
+ *
+ * - Make sure the `column` has a proper `name` or `key` prop, which will be
+ * automatically included in the aria-label of `<DeleteColumnButton />`.
+ * - Include `<DeleteColumnButton />` in a column header
+ * - Handle `TableProps.onColumnDelete` callback in the client code. It is expected
+ * to update `columns` by removing the corresponding column.
+ *
+ * ## Row virtualization
+ *
+ * To render only rows near the viewport and replace others with spacers, use:
+ *
+ * - `virtualizeRows`
+ * - `scrollerRef` — required when the scrollable container is not the whole document
+ * - `estimateHeight` — recommended when rows are expected to be taller than
+ *   the default height (e.g. multiline or custom content)
+ * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`, `minScrollAndResizeDeltaPx`
+ */
+export default function Table<T>(props: TableProps<T> & ComponentPropsWithoutRef<'table'>): import("react").JSX.Element;

package/components/table/table-component.js

@@ -0,0 +1,101 @@
+import { useRef } from 'react';
+import classNames from 'classnames';
+import { IntersectionObserverContext } from '../global/intersection-observer-context';
+import { SpacerRow, useTableVirtualize } from './table-virtualize';
+import { DefaultItemRenderer } from './default-item-renderer';
+import { CollapseItemIntoSpacerContext, ColumnIndexContext, defaultLookaheadPx, defaultMinScrollAndResizeDeltaPx, defaultRetentionMarginPx, defaultRowHeight, TablePropsContext, } from './table-const';
+import styles from './table.css';
+/**
+ * The new Table component. Use it instead of tables in the `legacy-table` folder.
+ *
+ * Minimal usage requires the following props:
+ * - `data`
+ * - `getKey`
+ * - `columns`
+ *   - `key`
+ *   - `renderCell` (not required, but usually needed)
+ *
+ * ## Selection
+ *
+ * Following three props support the selection:
+ *
+ * - `selection`
+ * - `isItemClickable`
+ * - `DefaultItemRenderer.onClick`
+ *
+ * Only `selection` is required: you can display and modify selection your way, e.g., via
+ * checkboxes in cells.
+ *
+ * ## Sorting
+ * You need the following to support sorting:
+ *
+ * - Include `<SortButton />` in a column header
+ * - Set initial `Column.sortOrder` to `none`, `ascending`.
+ * Do not leave `undefined` for the accessibility reasons.
+ * - Handle `TableProps.onSort` callback in the client code. It is expected
+ * to update `columns`, by setting the new `sortOrder` value for
+ * the corresponding column, and updating the data accordingly.
+ *
+ * ## Deleting columns
+ * You need the following to support deleting columns:
+ *
+ * - Make sure the `column` has a proper `name` or `key` prop, which will be
+ * automatically included in the aria-label of `<DeleteColumnButton />`.
+ * - Include `<DeleteColumnButton />` in a column header
+ * - Handle `TableProps.onColumnDelete` callback in the client code. It is expected
+ * to update `columns` by removing the corresponding column.
+ *
+ * ## Row virtualization
+ *
+ * To render only rows near the viewport and replace others with spacers, use:
+ *
+ * - `virtualizeRows`
+ * - `scrollerRef` — required when the scrollable container is not the whole document
+ * - `estimateHeight` — recommended when rows are expected to be taller than
+ *   the default height (e.g. multiline or custom content)
+ * - Fine-tuning props: `lookaheadPx`, `retentionMarginPx`, `minScrollAndResizeDeltaPx`
+ */
+export default function Table(props) {
+    const { data, columns, getKey, selection, isItemKeyboardFocusable, onItemFocus, onItemMove, onSort, onColumnDelete, onColumnMove, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, lookaheadPx = defaultLookaheadPx, retentionMarginPx = defaultRetentionMarginPx, minScrollAndResizeDeltaPx = defaultMinScrollAndResizeDeltaPx, columnEditButton, ref: userRef, className, theadClassName, theadTrClassName, tbodyClassName, ...restProps } = props;
+    const selfRef = useRef(null);
+    const tableRef = userRef ?? selfRef;
+    const { virtualItems, intersectionObserverHandle, collapseItemIntoSpacer } = useTableVirtualize({
+        enabled: virtualizeRows,
+        length: data.length,
+        scrollerRef,
+        tableRef,
+        estimateHeight,
+        lookaheadPx,
+        retentionMarginPx,
+        minScrollAndResizeDeltaPx,
+    });
+    return (<TablePropsContext.Provider value={props}>
+      <IntersectionObserverContext.Provider value={intersectionObserverHandle}>
+        <table className={classNames(styles.table, className)} ref={tableRef} {...restProps}>
+          <thead className={theadClassName}>
+            <tr className={classNames(styles.headerRow, theadTrClassName)}>
+              {columns.map((column, columnIndex) => (<th key={column.key} className={classNames(styles.headerCell, column.thClassName)} aria-sort={column.sortOrder}>
+                  <ColumnIndexContext.Provider value={columnIndex}>
+                    {column.renderHeader?.() ?? column.name ?? String(column.key)}
+                  </ColumnIndexContext.Provider>
+                </th>))}
+            </tr>
+          </thead>
+
+          <tbody className={tbodyClassName}>
+            {virtualItems.map(virtualItem => {
+            if (virtualItem.type === 'spacer') {
+                return <SpacerRow key={virtualItem.key} spacer={virtualItem} colSpan={columns.length}/>;
+            }
+            const index = virtualItem.index;
+            const item = data[index];
+            const key = props.getKey(item, index);
+            return (<CollapseItemIntoSpacerContext.Provider value={height => collapseItemIntoSpacer(index, height)} key={key}>
+                  {renderItem ? renderItem(item, index, data) : <DefaultItemRenderer index={index}/>}
+                </CollapseItemIntoSpacerContext.Provider>);
+        })}
+          </tbody>
+        </table>
+      </IntersectionObserverContext.Provider>
+    </TablePropsContext.Provider>);
+}

package/components/table/table-const.d.ts

@@ -0,0 +1,8 @@
+import type { TableProps } from './table';
+export declare const TablePropsContext: import("react").Context<TableProps<unknown> | null>;
+export declare const ColumnIndexContext: import("react").Context<number>;
+export declare const CollapseItemIntoSpacerContext: import("react").Context<(height: number) => void>;
+export declare const defaultRowHeight = 37;
+export declare const defaultLookaheadPx = 400;
+export declare const defaultRetentionMarginPx = 450;
+export declare const defaultMinScrollAndResizeDeltaPx = 50;

package/components/table/table-const.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+export const TablePropsContext = createContext(null);
+export const ColumnIndexContext = createContext(-1);
+export const CollapseItemIntoSpacerContext = createContext(() => { });
+export const defaultRowHeight = 37;
+export const defaultLookaheadPx = 400;
+export const defaultRetentionMarginPx = 450;
+export const defaultMinScrollAndResizeDeltaPx = 50;

package/components/table/table-virtualize.d.ts

@@ -0,0 +1,32 @@
+import { type RefObject } from 'react';
+export type VirtualItem = RenderedItem | Spacer;
+interface RenderedItem {
+    type: 'rendered';
+    index: number;
+}
+interface Spacer {
+    type: 'spacer';
+    from: number;
+    to: number;
+    height: number;
+    key: string;
+}
+export declare function useTableVirtualize({ enabled, length, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
+    enabled: boolean;
+    length: number;
+    scrollerRef: RefObject<HTMLElement | null> | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    estimateHeight: (index: number) => number;
+    lookaheadPx: number;
+    retentionMarginPx: number;
+    minScrollAndResizeDeltaPx: number;
+}): {
+    virtualItems: VirtualItem[];
+    intersectionObserverHandle: import("../global/intersection-observer-context").IntersectionObserverHandle | null;
+    collapseItemIntoSpacer: (index: number, height: number) => void;
+};
+export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
+    spacer: Spacer;
+    colSpan: number;
+}): import("react").JSX.Element;
+export {};