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

package/components/table/internal/table-header.d.ts

@@ -1,4 +1 @@
-import { type ExpectColumnReorder } from './column-animation';
-export declare function TableHeader<T>({ expectColumnReorder }: {
-    expectColumnReorder: ExpectColumnReorder;
-}): import("react").JSX.Element | null;
+export declare function TableHeader<T>(): import("react").JSX.Element | null;

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

@@ -1,19 +1,20 @@
-/* eslint-disable no-nested-ternary, max-lines */
+/* 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 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 { 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 { 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({ expectColumnReorder }) {
+export function TableHeader() {
     const { columns, noHeader, stickyHeader, columnEditing, onColumnEditingRequest, theadClassName, theadTrClassName } = use(TablePropsContext);
     const [localColumnEditing, setLocalColumnEditing] = useState(false);
     const effectiveColumnEditing = columnEditing ?? localColumnEditing;
@@ -36,25 +37,38 @@ export function TableHeader({ expectColumnReorder }) {
     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}>
-        {columns.map((column, columnIndex) => (<TableHeaderCell key={column.key} columnIndex={columnIndex} columnEditing={effectiveColumnEditing} handleEditColumnsButtonClick={handleEditColumnsButtonClick} expectColumnReorder={expectColumnReorder}/>))}
+        <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, expectColumnReorder, }) {
+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 animatedColumn = use(ColumnAnimationContext);
+    const { reorderAnimation } = use(ReorderAnimationContext);
     const children = renderHeader ? renderHeader() : (name ?? String(key));
-    return (<th className={classNames(styles.headerCell, animatedColumn?.columnIndex === columnIndex && animatedColumn.cellClassName, thClassName)} scope='col' aria-sort={sortOrder}>
+    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} expectColumnReorder={expectColumnReorder}/>}
+          {canReorder && <ColumnReorderHandle columnIndex={columnIndex}/>}
           {sortOrder ? (<SortButton columnIndex={columnIndex} aria-description={`Sort order: ${sortOrder}`}>
               {children}
             </SortButton>) : (children)}
@@ -89,7 +103,7 @@ function SortButton({ columnIndex, className, children, onClick, ...restProps })
     if (!tableProps || !column) {
         return null;
     }
-    return (<button type='button' className={classNames(styles.headerButton, className)} onClick={handleClick} {...restProps}>
+    return (<button type='button' className={classNames(styles.tableButton, className)} onClick={handleClick} {...restProps}>
       {children} <Icon glyph={glyph} aria-hidden/>
     </button>);
 }
@@ -99,255 +113,27 @@ function DeleteColumnButton({ columnIndex, className, onClick, ...restProps }) {
     const handleClick = useCallback((e) => {
         onClick?.(e);
         if (!e.defaultPrevented) {
-            tableProps.onColumnDelete?.(columnIndex, tableProps.columns);
+            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.headerButton, styles.deleteColumnButton, className)} onClick={handleClick} aria-label={hint} title={hint} {...restProps}>
+    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.headerButton, styles.editColumnsButton, className)} aria-pressed={columnEditing} aria-label={hint} title={hint} {...restProps}>
+    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, 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>);
+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.

package/components/table/internal/{virtual-items.d.ts → virtualization.d.ts}

@@ -1,4 +1,5 @@
 import { type RefObject } from 'react';
+import { type IntersectionObserverHandle } from '../../global/intersection-observer-context';
 export type VirtualItem = MaterializedItem | Spacer;
 interface MaterializedItem {
     type: 'materialized';
@@ -12,7 +13,11 @@ interface Spacer {
     key: string;
 }
 type CollapseItemIntoSpacerCallback = (index: number, height: number) => void;
-export declare const CollapseItemIntoSpacerContext: import("react").Context<CollapseItemIntoSpacerCallback>;
+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[];
@@ -24,8 +29,10 @@ export declare function useVirtualItems<T>({ enabled, data, data: { length }, sc
     minScrollAndResizeDeltaPx: number;
 }): {
     virtualItems: VirtualItem[];
-    intersectionObserverHandle: import("../../global/intersection-observer-context").IntersectionObserverHandle;
-    collapseItemIntoSpacer: CollapseItemIntoSpacerCallback;
+    virtualizationContextValue: {
+        intersectionObserverHandle: IntersectionObserverHandle;
+        collapseItemIntoSpacer: (index: number, height: number) => void;
+    };
 };
 export declare function SpacerRow({ spacer: { from, to, height }, colSpan }: {
     spacer: Spacer;

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

@@ -1,8 +1,11 @@
 import { createContext, useCallback, useEffect, useRef, useState } from 'react';
-import { useIntersectionObserverHandle } from '../../global/intersection-observer-context';
+import { useIntersectionObserverHandle, } from '../../global/intersection-observer-context';
 import { setTimeoutWithCleanup } from '../../global/schedule-with-cleanup';
 import styles from '../table.css';
-export const CollapseItemIntoSpacerContext = createContext(() => { });
+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.
@@ -151,16 +154,15 @@ export function useVirtualItems({ enabled, data, data: { length }, 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]);
+    }
     return {
         virtualItems,
-        intersectionObserverHandle,
-        collapseItemIntoSpacer,
+        virtualizationContextValue: { intersectionObserverHandle, collapseItemIntoSpacer },
     };
 }
 function getAllVirtualizedItems(data, estimateHeight) {

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

@@ -13,13 +13,15 @@ export declare function useItemVirtualization({ index, refs, onIntersectionChang
      * 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.
+     * 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.
-     * Consider wrapping a callback to `useCallback()` to avoid restarting observation on every render.
+     * 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

package/components/table/item-virtualization.js

@@ -1,12 +1,10 @@
 import { use, useEffect } from 'react';
-import { IntersectionObserverContext } from '../global/intersection-observer-context';
-import { CollapseItemIntoSpacerContext } from './internal/virtual-items';
+import { VirtualizationContext } from './internal/virtualization';
 /**
  * Use in an item renderer to control item virtualization.
  */
 export function useItemVirtualization({ index, refs, onIntersectionChange, }) {
-    const handle = use(IntersectionObserverContext);
-    const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
+    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];
@@ -14,7 +12,7 @@ export function useItemVirtualization({ index, refs, onIntersectionChange, }) {
         elements.forEach((element, elementIndex) => {
             if (!element)
                 return;
-            const cleanup = handle.observe(element, isIntersecting => {
+            const cleanup = intersectionObserverHandle.observe(element, isIntersecting => {
                 intersectionStates[elementIndex] = isIntersecting;
                 const height = onIntersectionChange(intersectionStates, elementIndex, elements);
                 if (height != null) {
@@ -24,5 +22,5 @@ export function useItemVirtualization({ index, refs, onIntersectionChange, }) {
             cleanups.push(cleanup);
         });
         return () => cleanups.forEach(cleanup => cleanup());
-    }, [collapseItemIntoSpacer, handle, index, onIntersectionChange, refs]);
+    }, [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

@@ -4,38 +4,6 @@ import type { TableProps } from './table-props';
  * Cast to `Context<TableProps<T>>` in usage place.
  */
 export declare const TablePropsContext: import("react").Context<TableProps<unknown> | null>;
-/**
- * Information about a column reorder animation.
- *
- * Available through {@link ColumnAnimationContext} to allow custom cell
- * renderers to animate reordered columns consistently with the default
- * table renderer.
- */
-export interface ColumnAnimation {
-    /**
-     * Index of the column being animated.
-     */
-    columnIndex: number;
-    /**
-     * Current animation phase.
-     */
-    phase: 'initial' | 'fade-out';
-    /**
-     * CSS class to apply to the animated cell or another element used to
-     * render the animation.
-     *
-     * The class only defines the `background-color` and `transition`
-     * properties.
-     */
-    cellClassName: string;
-}
-/**
- * Provides information about the currently animated column.
- *
- * Use in a custom cell renderer to animate reordered columns
- * consistently with the default table renderer.
- */
-export declare const ColumnAnimationContext: import("react").Context<ColumnAnimation | null>;
 /**
  * When a row only contains unformatted single-line text, it will be exactly of this height.
  */

package/components/table/table-const.js

@@ -4,13 +4,6 @@ import { createContext } from 'react';
  * Cast to `Context<TableProps<T>>` in usage place.
  */
 export const TablePropsContext = createContext(null);
-/**
- * Provides information about the currently animated column.
- *
- * Use in a custom cell renderer to animate reordered columns
- * consistently with the default table renderer.
- */
-export const ColumnAnimationContext = createContext(null);
 /**
  * When a row only contains unformatted single-line text, it will be exactly of this height.
  */