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

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

@@ -0,0 +1,143 @@
+/* eslint-disable no-nested-ternary */
+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 settingsIcon from '@jetbrains/icons/settings-12px';
+import trashIcon from '@jetbrains/icons/trash-12px';
+import unsortedIcon from '@jetbrains/icons/unsorted-12px';
+import { TablePropsContext } from '../table-const';
+import Icon from '../../icon';
+import { isWithinInteractiveElement } from '../../global/is-within-interactive-element';
+import { ReorderHandle } from './reorder-handle';
+import { ReorderAnimationContext } from './reorder-animation-context';
+import { ReorderLayoutContext, useReorderLayoutContextValue } from './reorder-layout-context';
+import { useReorderItemLayout } from '../reorder-item-layout';
+import styles from '../table.css';
+export function TableHeader() {
+    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]);
+    const reorderContextValue = useReorderLayoutContextValue();
+    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}>
+        <ReorderLayoutContext value={reorderContextValue}>
+          {columns.map((column, columnIndex) => (<TableHeaderCell key={column.key} columnIndex={columnIndex} columnEditing={effectiveColumnEditing} handleEditColumnsButtonClick={handleEditColumnsButtonClick}/>))}
+        </ReorderLayoutContext>
+      </tr>
+    </thead>);
+}
+function TableHeaderCell({ columnIndex, columnEditing, handleEditColumnsButtonClick, }) {
+    const ref = useRef(null);
+    const { columns, columnEditButton } = use(TablePropsContext);
+    const { key, name, renderHeader, sortOrder, deletable, canReorder, thClassName } = columns[columnIndex];
+    const { reorderAnimation } = use(ReorderAnimationContext);
+    const children = renderHeader ? renderHeader() : (name ?? String(key));
+    useReorderItemLayout({
+        index: columnIndex,
+        getBounds: () => {
+            const r = ref.current?.getBoundingClientRect();
+            return { start: r?.left ?? 0, end: r?.right ?? 0 };
+        },
+    });
+    return (<th ref={ref} className={classNames(styles.headerCell, reorderAnimation?.direction === 'columns' &&
+            reorderAnimation.index === columnIndex &&
+            reorderAnimation.className, thClassName)} scope='col' aria-sort={sortOrder}>
+      <div className={styles.headerCellInnerWrapper}>
+        <div className={styles.sortAndHeader}>
+          {canReorder && <ColumnReorderHandle columnIndex={columnIndex}/>}
+          {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.tableButton, 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) {
+            const columns = tableProps.columns;
+            tableProps.onColumnDelete?.(columns[columnIndex], columnIndex, 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.tableButton, 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.tableButton, styles.editColumnsButton, className)} aria-pressed={columnEditing} aria-label={hint} title={hint} {...restProps}>
+      <Icon glyph={settingsIcon} aria-hidden='true'/>
+    </button>);
+}
+function ColumnReorderHandle({ columnIndex, ...restProps }) {
+    return <ReorderHandle direction='columns' index={columnIndex} {...restProps}/>;
+}
+/**
+ * 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/virtualization.d.ts

@@ -0,0 +1,41 @@
+import { type RefObject } from 'react';
+import { type IntersectionObserverHandle } from '../../global/intersection-observer-context';
+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;
+interface VirtualizationContextValue {
+    intersectionObserverHandle: IntersectionObserverHandle;
+    collapseItemIntoSpacer: CollapseItemIntoSpacerCallback;
+}
+export declare const VirtualizationContext: import("react").Context<VirtualizationContextValue>;
+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[];
+    virtualizationContextValue: {
+        intersectionObserverHandle: IntersectionObserverHandle;
+        collapseItemIntoSpacer: (index: number, height: number) => void;
+    };
+};
+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/virtualization.js}

@@ -1,52 +1,48 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-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 VirtualizationContext = createContext({
+    intersectionObserverHandle: { observe: () => () => { } },
+    collapseItemIntoSpacer: () => { },
+});
 /**
  * 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, data, data: { 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: data.reduce((acc, item, index, items) => acc + estimateHeight(item, index, items), 0),
-            key: `${styles.spacerRow}-0`,
-        },
-    ]);
+    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(data[i], i, data);
-                const itemOffsetStart = offsetInSpacer;
-                const itemOffsetEnd = offsetInSpacer + itemHeight;
-                if (itemOffsetStart < materializeOffsetEnd && itemOffsetEnd > materializeOffsetStart) {
+                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;
             }
         }
     }, [data, estimateHeight, lookaheadPx, scrollerRef, tableRef]);
@@ -56,7 +52,7 @@ export function useTableVirtualize({ enabled, data, data: { length }, scrollerRe
         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];
@@ -72,7 +68,7 @@ export function useTableVirtualize({ enabled, data, data: { length }, scrollerRe
                         from: i,
                         to: i + 1,
                         height,
-                        key: `${styles.spacerRow}-${spacerCounter++}`,
+                        key: spacerKey(spacerCounter++),
                     });
                 }
             }
@@ -96,7 +92,10 @@ export function useTableVirtualize({ enabled, data, data: { length }, scrollerRe
             callbacksRef.current = null;
         }, virtualizationThrottleDelay);
     }, []);
+    const prevEnabledRef = useRef(enabled);
     useEffect(() => {
+        const prevEnabled = prevEnabledRef.current;
+        prevEnabledRef.current = enabled;
         if (!enabled)
             return;
         const scroller = scrollerRef?.current;
@@ -121,27 +120,65 @@ export function useTableVirtualize({ enabled, data, data: { length }, scrollerRe
         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 = useCallback((index, height) => {
+    function collapseItemIntoSpacer(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,
-        intersectionObserverHandle,
-        collapseItemIntoSpacer,
+        virtualItems,
+        virtualizationContextValue: { 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,37 @@
+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, pass a stable array reference to avoid restarting
+     * observation on every render — for example, memoize it with `useMemo()`,
+     * unless you use the React Compiler.
+     */
+    refs: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[];
+    /**
+     * Invoked when the `isIntersecting` state of the observed elements changes.
+     * Pass a stable function reference to avoid restarting observation on every render —
+     * for example, wrap it with `useCallback()`, unless you use the React Compiler.
+     *
+     * @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,26 @@
+import { use, useEffect } from 'react';
+import { VirtualizationContext } from './internal/virtualization';
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+export function useItemVirtualization({ index, refs, onIntersectionChange, }) {
+    const { intersectionObserverHandle, collapseItemIntoSpacer } = use(VirtualizationContext);
+    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 = intersectionObserverHandle.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, intersectionObserverHandle, index, onIntersectionChange, refs]);
+}

package/components/table/reorder-animation.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Information about a column or item currently being animated after reorder.
+ *
+ * Available through {@link useReorderAnimation} to allow custom cell
+ * renderers to animate reordered columns and items consistently with the default
+ * table renderer.
+ */
+export interface ReorderAnimation {
+    /**
+     * What is animated: columns or items (rows).
+     */
+    direction: 'columns' | 'items';
+    /**
+     * Index of the column or item being animated.
+     */
+    index: number;
+    /**
+     * Current animation phase.
+     */
+    phase: 'initial' | 'fade-out';
+    /**
+     * CSS class to apply to the animated row, cell, or another element used to
+     * render the animation on this phase.
+     *
+     * The class sets `background-color` and `transition`. If your custom styles
+     * also define `transition` on the same element, they may conflict with the
+     * animation.
+     */
+    className: string;
+}
+/**
+ * Provides information about the currently animated column or item after reorder.
+ *
+ * Use in a custom cell renderer to animate reordered columns and items
+ * consistently with the default table renderer.
+ */
+export declare function useReorderAnimation(): ReorderAnimation | null;

package/components/table/reorder-animation.js

@@ -0,0 +1,11 @@
+import { use } from 'react';
+import { ReorderAnimationContext } from './internal/reorder-animation-context';
+/**
+ * Provides information about the currently animated column or item after reorder.
+ *
+ * Use in a custom cell renderer to animate reordered columns and items
+ * consistently with the default table renderer.
+ */
+export function useReorderAnimation() {
+    return use(ReorderAnimationContext).reorderAnimation;
+}

package/components/table/reorder-item-layout.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Registers the physical boundaries of a custom-rendered item with the reorder
+ * system, so that the insertion indicator and insertion point calculation are
+ * correct for items that span multiple rows or have non-standard sizing.
+ *
+ * `DefaultItemRenderer` calls this automatically. Use this hook in a custom item
+ * renderer when the default boundary measurement is insufficient — for example,
+ * when the item spans multiple rows, or when you don't use
+ * the `DefaultItemRenderer` at all.
+ *
+ * If you include `DefaultItemRenderer` inside your custom renderer, set its
+ * `noReorderLayout` prop to `true` to prevent double registration.
+ */
+export declare function useReorderItemLayout({ disabled, index, getBounds, }: {
+    /**
+     * When `true`, the item is not registered. Use to disable without violating
+     * the rules of hooks.
+     */
+    disabled?: boolean;
+    /**
+     * Index of the item in the `data` array.
+     */
+    index: number;
+    /**
+     * Returns the item's top and bottom client coordinates (in pixels, relative
+     * to the viewport).
+     */
+    getBounds: () => {
+        start: number;
+        end: number;
+    };
+}): void;

package/components/table/reorder-item-layout.js

@@ -0,0 +1,23 @@
+import { use, useEffect } from 'react';
+import { ReorderLayoutContext } from './internal/reorder-layout-context';
+/**
+ * Registers the physical boundaries of a custom-rendered item with the reorder
+ * system, so that the insertion indicator and insertion point calculation are
+ * correct for items that span multiple rows or have non-standard sizing.
+ *
+ * `DefaultItemRenderer` calls this automatically. Use this hook in a custom item
+ * renderer when the default boundary measurement is insufficient — for example,
+ * when the item spans multiple rows, or when you don't use
+ * the `DefaultItemRenderer` at all.
+ *
+ * If you include `DefaultItemRenderer` inside your custom renderer, set its
+ * `noReorderLayout` prop to `true` to prevent double registration.
+ */
+export function useReorderItemLayout({ disabled, index, getBounds, }) {
+    const { registerReorderItem } = use(ReorderLayoutContext);
+    useEffect(() => {
+        if (disabled)
+            return;
+        return registerReorderItem(index, getBounds);
+    }, [index, getBounds, registerReorderItem, disabled]);
+}

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

@@ -1,8 +1,10 @@
-import type { TableProps } from './table';
+import type { TableProps } from './table-props';
+/**
+ * Use anywhere inside the table to get access to the props passed to it.
+ * Cast to `Context<TableProps<T>>` in usage place.
+ */
 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>;
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
 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

@@ -1,8 +1,10 @@
 import { createContext } from 'react';
+/**
+ * Use anywhere inside the table to get access to the props passed to it.
+ * Cast to `Context<TableProps<T>>` in usage place.
+ */
 export const TablePropsContext = createContext(null);
-export const ColumnIndexContext = createContext(-1);
-export const CollapseItemIntoSpacerContext = createContext(() => { });
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
 export const defaultRowHeight = 37;
-export const defaultLookaheadPx = 400;
-export const defaultRetentionMarginPx = 450;
-export const defaultMinScrollAndResizeDeltaPx = 50;

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

@@ -1,15 +1,4 @@
-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;
+import type { ComponentPropsWithRef } from 'react';
 export interface TableRowProps {
     /**
      * @see DefaultItemRendererProps.keyboardFocusable
@@ -17,12 +6,59 @@ export interface TableRowProps {
     keyboardFocusable?: boolean;
 }
 /**
- * A helper `<tr>` component for a custom {@link TableProps.renderItem} implementations.
- * Applies the standard row classnames.
+ * @internal
+ */
+export declare const keyboardFocusableAttrName = "data-keyboard-focusable";
+/**
+ * A helper `<tr>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row class names.
  */
 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`.
+ * A helper `<td>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell class names, but not data-dependent `tdClassName`.
  */
 export declare function TableCell(props: ComponentPropsWithRef<'td'>): import("react").JSX.Element;
+/**
+ * - `'pointerdown'` means the user has pressed the mouse button or touched the handle.
+ * - `number` means the distance in pixels the user has dragged the handle along
+ *   the Y axis.
+ * - `'cancelled'` means the reorder was aborted — e.g. the user pressed Escape,
+ *   released the pointer outside the browser, or dropped the item at its original
+ *   position. Use this phase to play a cancellation animation in your custom renderer.
+ *   This state lasts 600 ms (matching the built-in cancel animation), after which
+ *   `undefined` is sent.
+ * - `undefined` means the drag interaction is fully over. Sent after a successful
+ *   reorder as well as after the `'cancelled'` phase, so you can always do cleanup
+ *   here without managing your own timer.
+ */
+export type DragState = 'pointerdown' | number | 'cancelled' | undefined;
+export interface ItemReorderHandleProps {
+    /**
+     * The index of the item in the table data array.
+     */
+    index: number;
+    /**
+     * When `true`, the drag frame, indicating the currently dragged item,
+     * will not be rendered.
+     */
+    noDragFrame?: boolean;
+    /**
+     * When `true`, the drag handle stays fixed in place instead of following
+     * the pointer during drag.
+     */
+    noHandleTranslate?: boolean;
+    /**
+     * Callback that is called when the user drags the handle.
+     * Use it for custom drag indication.
+     * The `TableProps.onItemReorder` will be called after this callback.
+     * @param state The current drag state.
+     */
+    onUserDrag?: (state: DragState) => void;
+}
+/**
+ * A drag handle that allows the user to reorder the row. Place it anywhere
+ * inside a row renderer.
+ * Use {@link TableProps.canReorderItem} and {@link TableProps.onItemReorder}.
+ */
+export declare function ItemReorderHandle({ index, ...restProps }: ItemReorderHandleProps & ComponentPropsWithRef<'button'>): import("react").JSX.Element;