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

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

@@ -1,44 +1,71 @@
-import { type ComponentPropsWithoutRef } from 'react';
+import { type ComponentPropsWithRef } 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:
+ * For every prop and component referenced here, see the corresponding docs
+ * for detailed behavior.
+ *
+ * ## Minimal usage
+ *
+ * You need the following props:
  * - `data`
  * - `getKey`
  * - `columns`
  *   - `key`
- *   - `renderCell` (not required, but usually needed)
+ *   - `name` (not required but needed in most cases)
+ *   - `renderCell` (not required but needed in most cases)
  *
  * ## Selection
  *
- * Following three props support the selection:
+ * Selection is handled on item level via `renderItem` (often with
+ * `DefaultItemRenderer`) and its props:
+ *
+ * - `clickable`
+ * - `selected`
+ * - `onClick` or `onPointerUp`, etc.
  *
- * - `selection`
- * - `isItemClickable`
- * - `DefaultItemRenderer.onClick`
+ * You may use the TableSelection from `global/table-selection.ts` for the selection control:
  *
- * Only `selection` is required: you can display and modify selection your way, e.g., via
- * checkboxes in cells.
+ * - `selected={tableSelection.isSelected(item)}`
+ * - `onClick={() => setTableSelection(tableSelection.toggle(item))}`
+ *
+ * See the stories for examples with this utility.
+ *
+ * Additionally, for accessibility, you will likely need a cell with a checkbox
+ * to toggle item selection.
  *
  * ## 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.
+ * - Set initial `Column.sortOrder` to `none`. Do not leave `undefined`
+ *   for 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.
+ *   to update `columns` by setting the new `sortOrder` value for
+ *   the corresponding column, and updating the data accordingly.
+ *
+ * ## Focus
+ *
+ * The table supports the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
+ * technique to focus rows with the up/down arrow keys and, possibly, with the pointer.
+ * To support it, use the following props of the `DefaultItemRenderer`:
+ *
+ * - `keyboardFocusable`
+ * - Possibly `onClick` invoking `focusRow(e.currentTarget)`
+ *
+ * In your custom row renderer, use `TableRow`, which also has the `keyboardFocusable` prop.
  *
  * ## 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 />`.
+ *   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.
+ *   to update `columns` by removing the corresponding column.
  *
  * ## Row virtualization
  *
@@ -50,4 +77,4 @@ import type { TableProps } from './table';
  *   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;
+export default function Table<T>(props: TableProps<T> & ComponentPropsWithRef<'table'>): import("react").JSX.Element;

package/components/table/table-component.js

@@ -1,49 +1,78 @@
 import { useRef } from 'react';
 import classNames from 'classnames';
+import { mergeRefs } from 'react-merge-refs';
 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 { onBlurCaptureTbody, onKeyDownTbody } from './table-row-focus';
 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:
+ * For every prop and component referenced here, see the corresponding docs
+ * for detailed behavior.
+ *
+ * ## Minimal usage
+ *
+ * You need the following props:
  * - `data`
  * - `getKey`
  * - `columns`
  *   - `key`
- *   - `renderCell` (not required, but usually needed)
+ *   - `name` (not required but needed in most cases)
+ *   - `renderCell` (not required but needed in most cases)
  *
  * ## Selection
  *
- * Following three props support the selection:
+ * Selection is handled on item level via `renderItem` (often with
+ * `DefaultItemRenderer`) and its props:
+ *
+ * - `clickable`
+ * - `selected`
+ * - `onClick` or `onPointerUp`, etc.
  *
- * - `selection`
- * - `isItemClickable`
- * - `DefaultItemRenderer.onClick`
+ * You may use the TableSelection from `global/table-selection.ts` for the selection control:
  *
- * Only `selection` is required: you can display and modify selection your way, e.g., via
- * checkboxes in cells.
+ * - `selected={tableSelection.isSelected(item)}`
+ * - `onClick={() => setTableSelection(tableSelection.toggle(item))}`
+ *
+ * See the stories for examples with this utility.
+ *
+ * Additionally, for accessibility, you will likely need a cell with a checkbox
+ * to toggle item selection.
  *
  * ## 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.
+ * - Set initial `Column.sortOrder` to `none`. Do not leave `undefined`
+ *   for 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.
+ *   to update `columns` by setting the new `sortOrder` value for
+ *   the corresponding column, and updating the data accordingly.
+ *
+ * ## Focus
+ *
+ * The table supports the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
+ * technique to focus rows with the up/down arrow keys and, possibly, with the pointer.
+ * To support it, use the following props of the `DefaultItemRenderer`:
+ *
+ * - `keyboardFocusable`
+ * - Possibly `onClick` invoking `focusRow(e.currentTarget)`
+ *
+ * In your custom row renderer, use `TableRow`, which also has the `keyboardFocusable` prop.
  *
  * ## 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 />`.
+ *   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.
+ *   to update `columns` by removing the corresponding column.
  *
  * ## Row virtualization
  *
@@ -56,46 +85,46 @@ import styles from './table.css';
  * - 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 { data, columns, getKey, noHeader, onItemMove, onSort, onColumnDelete, onColumnMove, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, lookaheadPx = defaultLookaheadPx, retentionMarginPx = defaultRetentionMarginPx, minScrollAndResizeDeltaPx = defaultMinScrollAndResizeDeltaPx, columnEditButton, theadClassName, theadTrClassName, tbodyClassName, ref: userRef, className, ...restProps } = props;
+    const localRef = useRef(null);
     const { virtualItems, intersectionObserverHandle, collapseItemIntoSpacer } = useTableVirtualize({
         enabled: virtualizeRows,
-        length: data.length,
+        data,
         scrollerRef,
-        tableRef,
+        tableRef: localRef,
         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>
+    return (<TablePropsContext value={props}>
+      <IntersectionObserverContext value={intersectionObserverHandle}>
+        <table className={classNames(styles.table, className)} ref={mergeRefs([userRef, localRef])} {...restProps}>
+          {!noHeader && (<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 value={columnIndex}>
+                      {column.renderHeader?.() ?? column.name ?? String(column.key)}
+                    </ColumnIndexContext>
+                  </th>))}
+              </tr>
+            </thead>)}
 
-          <tbody className={tbodyClassName}>
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+          <tbody className={tbodyClassName} onKeyDown={onKeyDownTbody} onBlurCapture={onBlurCaptureTbody}>
             {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}>
+            const key = getKey(item, index, data);
+            return (<CollapseItemIntoSpacerContext value={height => collapseItemIntoSpacer(index, height)} key={key}>
                   {renderItem ? renderItem(item, index, data) : <DefaultItemRenderer index={index}/>}
-                </CollapseItemIntoSpacerContext.Provider>);
+                </CollapseItemIntoSpacerContext>);
         })}
           </tbody>
         </table>
-      </IntersectionObserverContext.Provider>
-    </TablePropsContext.Provider>);
+      </IntersectionObserverContext>
+    </TablePropsContext>);
 }

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

@@ -0,0 +1,28 @@
+import { type ComponentPropsWithRef } from 'react';
+/**
+ * Include it in a column header to make the column sortable.
+ * Handle clicks with {@link TableProps.onSort}.
+ */
+export declare function SortButton<T>({ className, children, onClick, ...restProps }: ComponentPropsWithRef<'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>({ className, onClick, ...restProps }: ComponentPropsWithRef<'button'>): import("react").JSX.Element | null;
+export interface TableRowProps {
+    /**
+     * @see DefaultItemRendererProps.keyboardFocusable
+     */
+    keyboardFocusable?: boolean;
+}
+/**
+ * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row classnames.
+ */
+export declare function TableRow(props: TableRowProps & ComponentPropsWithRef<'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: ComponentPropsWithRef<'td'>): import("react").JSX.Element;

package/components/table/{table-base.js → table-primitives.js}

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { use, useCallback } from 'react';
 import classNames from 'classnames';
 import unsortedIcon from '@jetbrains/icons/unsorted-12px';
 import arrowDownIcon from '@jetbrains/icons/arrow-12px-down';
@@ -6,31 +6,31 @@ 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 { keyboardFocusableAttrName } from './table-row-focus';
 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);
+export function SortButton({ className, children, onClick, ...restProps }) {
+    const tableProps = use(TablePropsContext);
+    const columnIndex = use(ColumnIndexContext);
     const column = tableProps?.columns[columnIndex];
-    if (!tableProps || !column) {
-        return null;
-    }
-    const sortOrder = column.sortOrder ?? 'none';
+    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) {
+    const handleClick = useCallback((e) => {
         onClick?.(e);
         if (!e.defaultPrevented) {
             const sequence = ['none', 'ascending', 'descending'];
             const nextOrder = sequence[(sequence.indexOf(sortOrder) + 1) % sequence.length];
-            tableProps.onSort?.(columnIndex, nextOrder);
+            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/>
@@ -41,19 +41,18 @@ export function SortButton(props) {
  * 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);
+export function DeleteColumnButton({ className, onClick, ...restProps }) {
+    const tableProps = use(TablePropsContext);
+    const columnIndex = use(ColumnIndexContext);
     const column = tableProps?.columns[columnIndex];
-    if (!tableProps || !column) {
-        return null;
-    }
-    const { className, onClick, ...restProps } = props;
-    function handleClick(e) {
+    const handleClick = useCallback((e) => {
         onClick?.(e);
         if (!e.defaultPrevented) {
-            tableProps.onColumnDelete?.(columnIndex);
+            tableProps.onColumnDelete?.(columnIndex, tableProps.columns);
         }
+    }, [columnIndex, onClick, tableProps]);
+    if (!tableProps || !column) {
+        return null;
     }
     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}/>
@@ -64,9 +63,10 @@ export function DeleteColumnButton(props) {
  * Applies the standard row classnames.
  */
 export function TableRow(props) {
-    const { ref, className, ...restProps } = props;
+    const { keyboardFocusable, className, ...restProps } = props;
     const classes = classNames(styles.row, className);
-    return <tr ref={ref} className={classes} {...restProps}/>;
+    const trRestProps = keyboardFocusable ? { [keyboardFocusableAttrName]: '', ...restProps } : restProps;
+    return <tr className={classes} {...trRestProps}/>;
 }
 /**
  * A helper `<td>` component for a custom {@link TableProps.renderItem} implementations.

package/components/table/table-row-focus.d.ts

@@ -0,0 +1,4 @@
+export declare const keyboardFocusableAttrName = "data-keyboard-focusable";
+export declare function focusRow(row: HTMLTableRowElement): void;
+export declare function onKeyDownTbody(e: React.KeyboardEvent<HTMLTableSectionElement>): void;
+export declare function onBlurCaptureTbody(e: React.FocusEvent<HTMLTableSectionElement>): void;

package/components/table/table-row-focus.js

@@ -0,0 +1,42 @@
+export const keyboardFocusableAttrName = 'data-keyboard-focusable';
+const temporaryTabIndexAttrName = 'data-temporary-tabindex';
+export function focusRow(row) {
+    if (!row.hasAttribute('tabindex')) {
+        row.tabIndex = 0;
+        row.setAttribute(temporaryTabIndexAttrName, '');
+    }
+    row.focus();
+}
+export function onKeyDownTbody(e) {
+    if (e.key !== 'ArrowUp' && e.key !== 'ArrowDown') {
+        return;
+    }
+    const tbody = e.currentTarget;
+    const currentRow = e.target.closest('tr');
+    if (!(currentRow instanceof HTMLTableRowElement) || currentRow.parentElement !== tbody) {
+        return;
+    }
+    let candidate = currentRow;
+    while (candidate) {
+        candidate =
+            e.key === 'ArrowUp'
+                ? candidate.previousElementSibling
+                : candidate.nextElementSibling;
+        if (candidate?.hasAttribute(keyboardFocusableAttrName)) {
+            focusRow(candidate);
+            e.preventDefault();
+            return;
+        }
+    }
+}
+export function onBlurCaptureTbody(e) {
+    const tbody = e.currentTarget;
+    if (!(e.target instanceof HTMLTableRowElement) || e.target.parentElement !== tbody) {
+        return;
+    }
+    const row = e.target;
+    if (row.hasAttribute(temporaryTabIndexAttrName)) {
+        row.removeAttribute('tabindex');
+        row.removeAttribute(temporaryTabIndexAttrName);
+    }
+}

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

@@ -11,12 +11,12 @@ interface Spacer {
     height: number;
     key: string;
 }
-export declare function useTableVirtualize({ enabled, length, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
+export declare function useTableVirtualize<T>({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }: {
     enabled: boolean;
-    length: number;
+    data: T[];
     scrollerRef: RefObject<HTMLElement | null> | undefined;
     tableRef: RefObject<HTMLTableElement | null>;
-    estimateHeight: (index: number) => number;
+    estimateHeight: (item: T, index: number, items: T[]) => number;
     lookaheadPx: number;
     retentionMarginPx: number;
     minScrollAndResizeDeltaPx: number;

package/components/table/table-virtualize.js

@@ -1,5 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import useEventCallback from '../global/use-event-callback';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useIntersectionObserverHandle } from '../global/intersection-observer-context';
 import styles from './table.css';
 /**
@@ -8,18 +7,18 @@ import styles from './table.css';
  * Therefore, we throttle with a custom delay.
  */
 const virtualizationThrottleDelay = 50;
-export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }) {
+export function useTableVirtualize({ 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),
+            height: data.reduce((acc, item, index, items) => acc + estimateHeight(item, index, items), 0),
             key: `${styles.spacerRow}-0`,
         },
     ]);
-    const materializeVisibleSpacerItems = useEventCallback(() => {
+    const materializeVisibleSpacerItems = useCallback(() => {
         if (!tableRef.current)
             return;
         const containerHeight = scrollerRef?.current?.clientHeight ?? window.innerHeight;
@@ -38,7 +37,7 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
             const to = Number(spacerRow.dataset.to);
             for (let i = from; i < to; i++) {
                 const itemMaterialization = itemsMaterialization.current[i];
-                const itemHeight = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(i);
+                const itemHeight = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(data[i], i, data);
                 const itemOffsetStart = offsetInSpacer;
                 const itemOffsetEnd = offsetInSpacer + itemHeight;
                 if (itemOffsetStart < materializeOffsetEnd && itemOffsetEnd > materializeOffsetStart) {
@@ -50,8 +49,8 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
                 offsetInSpacer += itemHeight;
             }
         }
-    });
-    const recomputeVirtualItems = useEventCallback(() => {
+    }, [data, estimateHeight, lookaheadPx, scrollerRef, tableRef]);
+    const recomputeVirtualItems = useCallback(() => {
         const newVirtualItems = [];
         let spacerCounter = 0;
         for (let i = 0; i < length; i++) {
@@ -62,7 +61,7 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
             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;
@@ -79,10 +78,10 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
             }
         }
         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,7 +95,7 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
             timerIdRef.current = null;
             callbacksRef.current = null;
         }, virtualizationThrottleDelay);
-    });
+    }, []);
     useEffect(() => {
         if (!enabled)
             return;
@@ -130,12 +129,12 @@ export function useTableVirtualize({ enabled, length, scrollerRef, tableRef, est
         };
     }, [enabled, 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);
-    });
+    }, [enabled, throttle, recomputeVirtualItems]);
     const allVisibleVirtualItems = useMemo(() => Array.from({ length: enabled ? 0 : length }, (_, index) => ({ type: 'rendered', index })), [enabled, length]);
     return {
         virtualItems: enabled ? virtualItems : allVisibleVirtualItems,

package/components/table/table.d.ts

@@ -1,6 +1,5 @@
 import Table from './table-component';
 import type { ReactNode, RefObject } from 'react';
-import type Selection from '../legacy-table/selection';
 export default Table;
 export interface TableProps<T> {
     /**
@@ -15,21 +14,11 @@ export interface TableProps<T> {
     /**
      * Used to render a row key, e.g. `<tr key={getKey(item, index)}>`.
      */
-    getKey: (item: T, index: number) => React.Key;
+    getKey: (item: T, index: number, items: T[]) => React.Key;
     /**
-     * Displays the selection and focus state.
+     * If true, the table header will not be rendered.
      */
-    selection?: Selection<T>;
-    /**
-     * If true, the item can be focused by keyboard up/down arrows.
-     * Note that `false` doesn't prevent from `selection.focus()`.
-     */
-    isItemKeyboardFocusable?: (item: T, index: number, items: T[]) => boolean;
-    /**
-     * When the item should get focused by keyboard navigation.
-     * The client is expected to update `selection`.
-     */
-    onItemFocus?: (item: T | null, index: number, items: T[]) => void;
+    noHeader?: boolean;
     /**
      * Called when the client moves a row by dragging it.
      */
@@ -37,15 +26,15 @@ export interface TableProps<T> {
     /**
      * Called when the client clicks on SortButton in a column header.
      */
-    onSort?: (columnIndex: number, newOrder: SortOrder) => void;
+    onSort?: (columnIndex: number, newOrder: SortOrder, columns: Column<T>[]) => void;
     /**
      * Called when the client clicks on a column delete button in the header.
      */
-    onColumnDelete?: (columnIndex: number) => void;
+    onColumnDelete?: (columnIndex: number, columns: Column<T>[]) => void;
     /**
      * Called when the client moves a column.
      */
-    onColumnMove?: (fromIndex: number, toIndex: number) => void;
+    onColumnMove?: (fromIndex: number, toIndex: number, columns: Column<T>[]) => void;
     /**
      * Implement to specify props like `clickable`, handlers like `onClick`,
      * a custom `className`, a `ref` etc., or to provide a custom renderer.
@@ -89,7 +78,7 @@ export interface TableProps<T> {
      * - ResizeObserver observes `document.body`
      * - IntersectionObserver has no root (i.e. the viewport is used)
      */
-    scrollerRef?: React.RefObject<HTMLElement | null>;
+    scrollerRef?: RefObject<HTMLElement | null>;
     /**
      * Used with `virtualizeRows` to estimate the height of items that have not been rendered yet.
      * The function should be fast and side-effect free. Do not measure the DOM here.
@@ -105,7 +94,7 @@ export interface TableProps<T> {
      *
      * Default: 37px = 16px padding + 20px line height + 1px border.
      */
-    estimateHeight?: (index: number) => number;
+    estimateHeight?: (item: T, index: number, items: T[]) => number;
     /**
      * When using `virtualizeRows`, the number of pixels above and below the viewport
      * to materialize in advance.
@@ -151,10 +140,6 @@ export interface TableProps<T> {
      * Whether to show a small gear button at the top right corner.
      */
     columnEditButton?: 'everywhere' | 'mobileOnly';
-    /**
-     * Optional ref to install on the table element.
-     */
-    ref?: RefObject<HTMLTableElement | null>;
     /**
      * Applied to the `<thead>` element.
      */
@@ -174,7 +159,7 @@ export type SortOrder = 'none' | 'ascending' | 'descending';
  */
 export interface Column<T> {
     /**
-     * Used to render a row key, e.g. `<thead><tr><td key={getKey(item, index)}...</td></tr></thead>`.
+     * Used to render a row key, e.g. `<thead><tr><td key={getKey(item, index, items)}...</td></tr></thead>`.
      */
     key: React.Key;
     /**

package/components/tags-input/tags-input.d.ts

@@ -110,6 +110,8 @@ export default class TagsInput extends PureComponent<TagsInputProps, TagsInputSt
     selectRef: (el: Select | null) => void;
     render(): React.JSX.Element;
 }
-export declare const RerenderableTagsInput: React.ForwardRefExoticComponent<TagsInputProps & React.RefAttributes<TagsInput>>;
+export declare const RerenderableTagsInput: ({ ref, ...props }: TagsInputProps & {
+    ref?: React.Ref<TagsInput> | undefined;
+}) => React.JSX.Element;
 export type TagsInputAttrs = React.JSX.LibraryManagedAttributes<typeof TagsInput, TagsInputProps>;
 export {};

package/components/tooltip/tooltip.js

@@ -135,13 +135,13 @@ export default class Tooltip extends Component {
         const popup = (<Popup trapFocus={false} anchorElement={this.containerNode} hidden={!this.state.showPopup || this.state.showNestedPopup} onCloseAttempt={this.hidePopup} maxHeight={400} attached={false} onMouseOut={this.hideIfMovedOutsidePopup} top={4} dontCloseOnAnchorClick ref={this.popupRef} {...popupProps} className={classNames(styles.tooltip, { [styles.long]: long, [styles.inheritedTheme]: theme === 'inherit' }, popupProps?.className)}>
         {title}
       </Popup>);
-        return (<TooltipContext.Provider value={{ onNestedTooltipShow, onNestedTooltipHide }}>
+        return (<TooltipContext value={{ onNestedTooltipShow, onNestedTooltipHide }}>
         <span {...ariaProps} {...restProps} ref={this.containerRef} data-test={dataTests('ring-tooltip', dataTest)} data-test-title={typeof title === 'string' ? title : undefined}>
           {children}
           {theme === 'inherit' ? (popup) : (<ThemeProvider theme={theme} passToPopups WrapperComponent={props => <span {...props}/>}>
               {popup}
             </ThemeProvider>)}
         </span>
-      </TooltipContext.Provider>);
+      </TooltipContext>);
     }
 }