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

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

@@ -1,40 +1,74 @@
-import { use, useRef } from 'react';
+import { use, useCallback, useRef } from 'react';
 import classNames from 'classnames';
-import { mergeRefs } from 'react-merge-refs';
-import { CollapseItemIntoSpacerContext, TablePropsContext } from './table-const';
-import { useIsIntersectingListener } from '../global/intersection-observer-context';
+import { TablePropsContext } from './table-const';
+import { useComposedRef } from '../global/compose-refs';
+import { useItemVirtualization } from './item-virtualization';
 import { TableCell, TableRow } from './table-primitives';
+import { ReorderAnimationContext } from './internal/reorder-animation-context';
+import { useReorderItemLayout } from './reorder-item-layout';
 import styles from './table.css';
-const INDENT_SIZE = 24;
 /**
- * @see TableProps.renderItem
+ * Standard component for rendering a table row.
+ *
+ * Renders an item using the table's column definitions and lets you
+ * configure item-scoped behavior such as selection, keyboard navigation,
+ * event handlers, `className`, and `ref`.
+ *
+ * Note that row-level click and keyboard handlers are not discoverable
+ * by assistive technologies. Make sure that any functionality relying on
+ * them (such as selection or expand/collapse) is also available through
+ * accessible controls, such as checkboxes or buttons with accessible
+ * labels.
  */
-export function DefaultItemRenderer({ index, keyboardFocusable, clickable, selected, level, ref: userRef, className, ...restProps }) {
+export function DefaultItemRenderer({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, noReorderLayout, ref: userRef, className, ...restProps }) {
     const localRef = useRef(null);
-    const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
-    useIsIntersectingListener(localRef, isIntersecting => {
-        if (localRef.current && !isIntersecting) {
-            collapseItemIntoSpacer(localRef.current.getBoundingClientRect().height);
-        }
+    const composedRef = useComposedRef(userRef, localRef);
+    useItemVirtualization({
+        index,
+        refs: localRef,
+        onIntersectionChange: useCallback(([isIntersecting], _i, [element]) => isIntersecting === false &&
+            !noItemVirtualization &&
+            element?.isConnected &&
+            !element.contains(document.activeElement) &&
+            !element.previousElementSibling?.contains(document.activeElement) &&
+            !element.nextElementSibling?.contains(document.activeElement)
+            ? element.getBoundingClientRect().height
+            : undefined, [noItemVirtualization]),
+    });
+    useReorderItemLayout({
+        disabled: noReorderLayout,
+        index,
+        getBounds: () => {
+            const r = localRef.current?.getBoundingClientRect();
+            return { start: r?.top ?? 0, end: r?.bottom ?? 0 };
+        },
     });
     const tableProps = use(TablePropsContext);
     if (!tableProps) {
         return null;
     }
+    const { reorderAnimation } = use(ReorderAnimationContext);
+    const isAnimatedItem = reorderAnimation?.direction === 'items' && reorderAnimation.index === index;
+    const animatedColumnIndex = reorderAnimation?.direction === 'columns' ? reorderAnimation.index : undefined;
+    const animateClassName = reorderAnimation?.className;
     const { data, columns } = tableProps;
     const item = data[index];
-    return (<TableRow ref={mergeRefs([userRef, localRef])} keyboardFocusable={keyboardFocusable} className={classNames(className, clickable && styles.clickableRow, selected && styles.selectedRow)} {...restProps}>
-      {columns.map((column, columnIndex) => (<TableCell key={column.key} className={column.tdClassName?.(item, index, data)} style={column.indent && level != null && level > 0 ? { paddingInlineStart: `${level * INDENT_SIZE}px` } : undefined}>
-          {column.renderCell?.(item, index, data) ?? getDefaultCellValue(item, columnIndex)}
-        </TableCell>))}
+    const indentSize = 24;
+    return (<TableRow ref={composedRef} keyboardFocusable={keyboardFocusable} className={classNames(className, clickable && styles.clickableRow, selected && styles.selectedRow, isAnimatedItem && animateClassName)} {...restProps}>
+      {columns.map((column, columnIndex) => {
+            const { key, tdClassName, indent } = column;
+            return (<TableCell key={key} className={classNames(columnIndex === animatedColumnIndex && animateClassName, typeof tdClassName === 'function' ? tdClassName(item, index, data) : tdClassName)} style={indent && level != null && level > 0 ? { paddingInlineStart: `${level * indentSize}px` } : undefined}>
+            {column.renderCell?.(item, index, data) ?? getDefaultCellValue(item, columnIndex, key)}
+          </TableCell>);
+        })}
     </TableRow>);
 }
-function getDefaultCellValue(item, columnIndex) {
+function getDefaultCellValue(item, columnIndex, columnKey) {
     if (Array.isArray(item)) {
-        return String(item[columnIndex] ?? '');
+        return String(item[columnIndex]);
     }
     if (item !== null && typeof item === 'object') {
-        return String(Object.values(item)[columnIndex] ?? '');
+        return String(item[String(columnKey)]);
     }
     if (columnIndex === 0) {
         return String(item);

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

@@ -0,0 +1,21 @@
+import { type RefObject } from 'react';
+import type { Column } from '../table-props';
+import type { ReorderAnimation } from '../reorder-animation';
+export interface ReorderSpec {
+    direction: 'columns' | 'items';
+    fromIndex: number;
+    insertionIndex: number;
+}
+interface ReorderAnimationContextValue {
+    reorderAnimation: ReorderAnimation | null;
+    expectReorder: (reorderSpec: ReorderSpec) => void;
+}
+export declare const ReorderAnimationContext: import("react").Context<ReorderAnimationContextValue>;
+export declare function useReorderAnimationContextValue<T>({ noColumnReorderAnimation, noItemReorderAnimation, tableRef, data, columns, }: {
+    noColumnReorderAnimation: boolean | undefined;
+    noItemReorderAnimation: boolean | undefined;
+    tableRef: RefObject<HTMLTableElement | null>;
+    data: readonly T[];
+    columns: readonly Column<T>[];
+}): ReorderAnimationContextValue;
+export {};

package/components/table/internal/reorder-animation-context.js

@@ -0,0 +1,60 @@
+import { createContext, useEffect, useRef, useState } from 'react';
+import { parseCssDuration } from '../../global/parse-css-duration';
+import { requestAnimationFrameWithCleanup, setTimeoutWithCleanup } from '../../global/schedule-with-cleanup';
+import styles from '../table.css';
+/** How long to wait for the data to change after {@link expectReorder} is called. */
+const pendingReorderTimeoutMs = 1000;
+export const ReorderAnimationContext = createContext({
+    reorderAnimation: null,
+    expectReorder: () => { },
+});
+export function useReorderAnimationContextValue({ noColumnReorderAnimation, noItemReorderAnimation, tableRef, data, columns, }) {
+    const [reorderAnimation, setReorderAnimation] = useState(null);
+    const pendingReorderRef = useRef(null);
+    function expectReorder(reorderSpec) {
+        const isColumn = reorderSpec.direction === 'columns';
+        if ((isColumn && noColumnReorderAnimation) || (!isColumn && noItemReorderAnimation))
+            return;
+        if (pendingReorderRef.current) {
+            window.clearTimeout(pendingReorderRef.current.timerId);
+        }
+        const timerId = window.setTimeout(() => {
+            pendingReorderRef.current = null;
+        }, pendingReorderTimeoutMs);
+        pendingReorderRef.current = { ...reorderSpec, timerId, columns, data };
+    }
+    useEffect(() => {
+        return () => {
+            if (pendingReorderRef.current) {
+                window.clearTimeout(pendingReorderRef.current.timerId);
+                pendingReorderRef.current = null;
+            }
+        };
+    }, []);
+    useEffect(() => {
+        const table = tableRef.current;
+        const pendingReorder = pendingReorderRef.current;
+        if (!table || !pendingReorder)
+            return;
+        const { direction, data: pendingData, columns: pendingColumns } = pendingReorder;
+        const isColumn = direction === 'columns';
+        if ((isColumn && columns === pendingColumns) || (!isColumn && data === pendingData))
+            return;
+        pendingReorderRef.current = null;
+        const { fromIndex, insertionIndex } = pendingReorder;
+        // Moving forward shifts the array by one, hence -1
+        const index = fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex;
+        return requestAnimationFrameWithCleanup(() => setReorderAnimation(prev => prev == null ? { direction, index, phase: 'initial', className: styles.reorderAnimationInitial } : prev));
+    }, [data, columns, tableRef]);
+    useEffect(() => {
+        if (reorderAnimation?.phase === 'initial') {
+            return requestAnimationFrameWithCleanup(() => setReorderAnimation(prev => prev === reorderAnimation ? { ...prev, phase: 'fade-out', className: styles.reorderAnimationFadeOut } : prev));
+        }
+        if (reorderAnimation?.phase === 'fade-out') {
+            const fadeOutMs = parseCssDuration(window.getComputedStyle(tableRef.current).getPropertyValue('--reorder-animation-fade-out-duration'));
+            return setTimeoutWithCleanup(() => setReorderAnimation(prev => (prev === reorderAnimation ? null : prev)), fadeOutMs);
+        }
+        return undefined;
+    }, [reorderAnimation, tableRef]);
+    return { reorderAnimation, expectReorder };
+}

package/components/table/internal/reorder-handle.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithRef } from 'react';
+import type { DragState } from '../table-primitives';
+export declare function ReorderHandle<T>({ direction, index, noDragFrame, noHandleTranslate, onUserDrag, ref: userRef, className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, ...restProps }: {
+    direction: 'columns' | 'items';
+    index: number;
+    noDragFrame?: boolean;
+    noHandleTranslate?: boolean;
+    onUserDrag?: (state: DragState) => void;
+} & ComponentPropsWithRef<'button'>): import("react").JSX.Element;

package/components/table/internal/reorder-handle.js

@@ -0,0 +1,334 @@
+/* eslint-disable max-lines */
+import { use, useEffect, useEffectEvent, useRef, } from 'react';
+import classNames from 'classnames';
+import dragIcon from '@jetbrains/icons/drag-12px';
+import { TablePropsContext } from '../table-const';
+import Icon from '../../icon';
+import { useComposedRef } from '../../global/compose-refs';
+import { parseCssDuration } from '../../global/parse-css-duration';
+import { ReorderAnimationContext } from './reorder-animation-context';
+import { ReorderLayoutContext } from './reorder-layout-context';
+import styles from '../table.css';
+const columnDragFrameAdjustmentPx = -1;
+const itemDragFrameAdjustmentPx = -2;
+const scrollAreaPx = 100;
+const scrollStepPx = 100;
+const scrollIntervalMs = 200;
+export function ReorderHandle({ direction, index, noDragFrame, noHandleTranslate, onUserDrag, ref: userRef, className, onKeyDown, onPointerDown, onPointerMove, onPointerUp, onPointerCancel, onLostPointerCapture, ...restProps }) {
+    const localRef = useRef(null);
+    const composedRef = useComposedRef(localRef, userRef);
+    const isColumn = direction === 'columns';
+    const tableProps = use(TablePropsContext);
+    const data = tableProps?.data;
+    const columns = tableProps?.columns;
+    const canReorderItem = tableProps?.canReorderItem;
+    const onItemReorder = tableProps?.onItemReorder;
+    const onColumnReorder = tableProps?.onColumnReorder;
+    function canReorder(insertionIndex) {
+        const columnBeingReordered = columns?.[index];
+        if (isColumn && columnBeingReordered) {
+            const canReorderColumn = columnBeingReordered.canReorder;
+            if (canReorderColumn === true)
+                return true;
+            if (typeof canReorderColumn === 'function')
+                return canReorderColumn(columnBeingReordered, index, insertionIndex, columns);
+            return false;
+        }
+        if (!isColumn && data) {
+            return canReorderItem ? canReorderItem(data[index], index, insertionIndex, data) : true;
+        }
+        return false;
+    }
+    const { expectReorder } = use(ReorderAnimationContext);
+    function onReorder(insertionIndex) {
+        if (isColumn && columns) {
+            expectReorder({ direction, fromIndex: index, insertionIndex });
+            onColumnReorder?.(columns[index], index, insertionIndex, columns);
+        }
+        else if (!isColumn && data) {
+            expectReorder({ direction, fromIndex: index, insertionIndex });
+            onItemReorder?.(data[index], index, insertionIndex, data);
+        }
+    }
+    const activeDragRef = useRef(null);
+    function getDragFrame() {
+        return document.body.querySelector(`.${styles.dragFrame}`);
+    }
+    function getInsertionIndicator() {
+        return document.body.querySelector(`.${styles.insertionIndicator}`);
+    }
+    const { getItemBounds, getClosestInsertionPoint } = use(ReorderLayoutContext);
+    function renderDragFrame(clientX, clientY) {
+        const drag = activeDragRef.current;
+        if (noDragFrame || !drag)
+            return;
+        const { startX, startY, initialItemStart, initialItemEnd, indicatorStart, indicatorSize } = drag;
+        let dragFrame = getDragFrame();
+        if (!dragFrame) {
+            dragFrame = document.createElement('div');
+            dragFrame.className = styles.dragFrame;
+            const frameStart = `calc(max(0px, ${indicatorStart - 2}px))`;
+            const frameAcrossSize = `${initialItemEnd - initialItemStart}px`;
+            const frameAlongSize = indicatorSize;
+            dragFrame.style[isColumn ? 'top' : 'left'] = frameStart;
+            dragFrame.style[isColumn ? 'width' : 'height'] = frameAcrossSize;
+            dragFrame.style[isColumn ? 'height' : 'width'] = frameAlongSize;
+            document.body.appendChild(dragFrame);
+        }
+        if (isColumn) {
+            dragFrame.style.left = `${initialItemStart + clientX - startX + columnDragFrameAdjustmentPx}px`;
+        }
+        else {
+            dragFrame.style.top = `${initialItemStart + clientY - startY + itemDragFrameAdjustmentPx}px`;
+        }
+    }
+    function translateButton(clientX, clientY) {
+        const btn = localRef.current;
+        const drag = activeDragRef.current;
+        if (noHandleTranslate || !btn || !drag)
+            return;
+        const { startX, startY, initialItemStart } = drag;
+        const offsetByPointerMove = isColumn ? clientX - startX : clientY - startY;
+        const { start: itemStart } = getItemBounds(index) ?? { start: 0, end: 0 };
+        const offsetByItemMove = itemStart - initialItemStart;
+        const offset = offsetByPointerMove - offsetByItemMove;
+        btn.style.transform = isColumn ? `translateX(${offset}px)` : `translateY(${offset}px)`;
+    }
+    function getClosestInsertionPointLocal(clientX, clientY) {
+        const clientOffset = isColumn ? clientX : clientY;
+        return getClosestInsertionPoint(clientOffset, canReorder);
+    }
+    function renderInsertionIndicator({ itemIndex, after }) {
+        const drag = activeDragRef.current;
+        if (!drag)
+            return;
+        const { indicatorStart, indicatorSize } = drag;
+        const itemBounds = getItemBounds(itemIndex);
+        if (!itemBounds)
+            return;
+        const { start: itemStart, end: itemEnd } = itemBounds;
+        let indicator = getInsertionIndicator();
+        if (!indicator) {
+            indicator = document.createElement('div');
+            indicator.className = styles.insertionIndicator;
+            indicator.style[isColumn ? 'top' : 'left'] = `${indicatorStart}px`;
+            indicator.style[isColumn ? 'height' : 'width'] = indicatorSize;
+            indicator.style[isColumn ? 'width' : 'height'] = '2px';
+            document.body.appendChild(indicator);
+        }
+        const itemOffset = `${(after ? itemEnd : itemStart) - 1}px`;
+        indicator.style[isColumn ? 'left' : 'top'] = itemOffset;
+    }
+    function cleanupDrag() {
+        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();
+        onUserDrag?.(undefined);
+    }
+    function animateNoChangeThenCleanup() {
+        const drag = activeDragRef.current;
+        if (drag?.state !== 'is-dragging')
+            return;
+        drag.state = 'ended-with-no-change';
+        drag.cleanup();
+        drag.cleanup = () => { };
+        const dragFrame = getDragFrame();
+        if (dragFrame) {
+            const { initialItemStart } = drag;
+            if (isColumn) {
+                dragFrame.style.left = `${initialItemStart + columnDragFrameAdjustmentPx}px`;
+            }
+            else {
+                dragFrame.style.top = `${initialItemStart + itemDragFrameAdjustmentPx}px`;
+            }
+            dragFrame.style.transition = 'left var(--ring-ease), top var(--ring-ease), opacity var(--ring-ease)';
+            dragFrame.style.opacity = '0';
+        }
+        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 = isColumn ? 'translateX(0)' : 'translateY(0)';
+            btn.style.transition = 'transform var(--ring-ease)';
+        }
+        onUserDrag?.('cancelled');
+        const ringEaseMs = parseCssDuration(window.getComputedStyle(document.documentElement).getPropertyValue('--ring-ease'));
+        setTimeout(cleanupDrag, ringEaseMs);
+    }
+    function handlePointerDown(e) {
+        onPointerDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        const { clientX, clientY, pointerId, currentTarget } = e;
+        const { start: initialItemStart, end: initialItemEnd } = getItemBounds(index) ?? { start: 0, end: 0 };
+        let indicatorStart;
+        let indicatorSize;
+        if (isColumn) {
+            const thead = currentTarget.closest('thead');
+            const table = thead?.closest('table');
+            if (!thead || !table)
+                return;
+            const { top: headerTop } = thead.getBoundingClientRect();
+            indicatorStart = headerTop;
+            const { bottom: tableBottom } = table.getBoundingClientRect();
+            const visibleTableHeight = tableBottom - headerTop;
+            const viewportBottomRelativeToHeaderTop = window.innerHeight - headerTop;
+            indicatorSize = `min(${visibleTableHeight}px, calc(${viewportBottomRelativeToHeaderTop}px - .5rem))`;
+        }
+        else {
+            const tr = currentTarget.closest('tr');
+            const tbody = tr?.closest('tbody');
+            if (!tr || !tbody)
+                return;
+            const { left: itemLeft, right: itemRight } = tr.getBoundingClientRect();
+            indicatorStart = itemLeft;
+            const visibleItemWidth = itemRight - itemLeft;
+            const viewportRightRelativeToTableLeft = window.innerWidth - itemLeft;
+            indicatorSize = `min(${visibleItemWidth}px, calc(${viewportRightRelativeToTableLeft}px - .5rem))`;
+        }
+        function keydownListener(keyEvent) {
+            if (keyEvent.key === 'Escape') {
+                animateNoChangeThenCleanup();
+                keyEvent.stopPropagation();
+                keyEvent.preventDefault();
+            }
+        }
+        currentTarget.setPointerCapture(pointerId);
+        document.addEventListener('keydown', keydownListener);
+        currentTarget.style.cursor = 'grabbing';
+        activeDragRef.current = {
+            state: 'is-dragging',
+            startX: clientX,
+            startY: clientY,
+            initialItemStart,
+            initialItemEnd,
+            indicatorStart,
+            indicatorSize,
+            cleanup: () => {
+                currentTarget.releasePointerCapture(pointerId);
+                document.removeEventListener('keydown', keydownListener);
+                currentTarget.style.removeProperty('cursor');
+            },
+        };
+        renderDragFrame(clientX, clientY);
+        onUserDrag?.('pointerdown');
+        e.preventDefault();
+    }
+    const scrollerRef = tableProps?.scrollerRef;
+    const lastScrolledRef = useRef(0);
+    function scrollThrottled(scrollDirection) {
+        const now = performance.now();
+        if (now > lastScrolledRef.current + scrollIntervalMs) {
+            lastScrolledRef.current = now;
+            const top = scrollDirection === 'up' ? -scrollStepPx : scrollStepPx;
+            const scroller = scrollerRef?.current ?? window;
+            scroller?.scrollBy({ top, behavior: 'smooth' });
+        }
+    }
+    function handlePointerMove(e) {
+        onPointerMove?.(e);
+        if (e.defaultPrevented)
+            return;
+        const drag = activeDragRef.current;
+        if (drag?.state !== 'is-dragging')
+            return;
+        const { clientX, clientY } = e;
+        renderDragFrame(clientX, clientY);
+        translateButton(clientX, clientY);
+        const insertionPoint = getClosestInsertionPointLocal(clientX, clientY);
+        if (insertionPoint)
+            renderInsertionIndicator(insertionPoint);
+        onUserDrag?.(isColumn ? clientX - drag.startX : clientY - drag.startY);
+        if (!isColumn) {
+            const scrollerRect = scrollerRef?.current?.getBoundingClientRect();
+            const scrollerTop = scrollerRect?.top ?? 0;
+            const scrollerBottom = scrollerRect ? Math.min(scrollerRect.bottom, window.innerHeight) : window.innerHeight;
+            if (clientY < scrollerTop + scrollAreaPx) {
+                scrollThrottled('up');
+            }
+            else if (clientY > scrollerBottom - scrollAreaPx) {
+                scrollThrottled('down');
+            }
+        }
+    }
+    function handlePointerUp(e) {
+        onPointerUp?.(e);
+        if (e.defaultPrevented)
+            return;
+        if (activeDragRef.current?.state !== 'is-dragging')
+            return;
+        const { clientX, clientY } = e;
+        const insertionPoint = getClosestInsertionPointLocal(clientX, clientY);
+        const insertionIndex = insertionPoint && insertionPoint.itemIndex + (insertionPoint.after ? 1 : 0);
+        if (insertionIndex == null || insertionIndex === index || insertionIndex === index + 1) {
+            animateNoChangeThenCleanup();
+            return;
+        }
+        cleanupDrag();
+        onReorder(insertionIndex);
+    }
+    function handleKeyDown(e) {
+        onKeyDown?.(e);
+        if (e.defaultPrevented)
+            return;
+        const left = isColumn && e.key === 'ArrowLeft';
+        const right = isColumn && e.key === 'ArrowRight';
+        const up = !isColumn && e.key === 'ArrowUp';
+        const down = !isColumn && e.key === 'ArrowDown';
+        if ((!left && !right && !up && !down) || !columns || !data)
+            return;
+        const backward = left || up;
+        const initialInsertionIndex = backward ? index - 1 : index + 2;
+        const maxInsertionIndex = isColumn ? columns.length : data.length;
+        const step = backward ? -1 : 1;
+        // eslint-disable-next-line yoda
+        for (let i = initialInsertionIndex; 0 <= i && i <= maxInsertionIndex; i += step) {
+            if (canReorder(i)) {
+                onReorder(i);
+                e.preventDefault();
+                return;
+            }
+        }
+    }
+    function handlePointerCancel(e) {
+        onPointerCancel?.(e);
+        if (!e.defaultPrevented)
+            animateNoChangeThenCleanup();
+    }
+    function handleLostPointerCapture(e) {
+        onLostPointerCapture?.(e);
+        if (!e.defaultPrevented)
+            animateNoChangeThenCleanup();
+    }
+    const cleanupComponent = useEffectEvent(() => {
+        if (activeDragRef.current) {
+            cleanupDrag();
+        }
+    });
+    useEffect(() => {
+        return cleanupComponent;
+    }, []);
+    const hint = isColumn
+        ? `Reorder column ${columns?.[index]?.name ?? String(columns?.[index]?.key)}.`
+        : `Reorder item ${index + 1}.`;
+    const description = isColumn
+        ? 'Use Left and Right arrow keys to move the column.'
+        : 'Use Up and Down arrow keys to move the item.';
+    const shortcuts = isColumn ? 'ArrowLeft ArrowRight' : 'ArrowUp ArrowDown';
+    return (
+    // eslint-disable-next-line jsx-a11y/role-supports-aria-props
+    <button ref={composedRef} type='button' className={classNames(styles.tableButton, isColumn ? styles.columnReorderHandle : styles.itemReorderHandle, className)} aria-label={hint} aria-description={description} aria-keyshortcuts={shortcuts} onKeyDown={handleKeyDown} onPointerDown={handlePointerDown} onPointerMove={handlePointerMove} onPointerUp={handlePointerUp} onPointerCancel={handlePointerCancel} onLostPointerCapture={handleLostPointerCapture} {...restProps}>
+      <Icon glyph={dragIcon} aria-hidden='true'/>
+    </button>);
+}

package/components/table/internal/reorder-layout-context.d.ts

@@ -0,0 +1,16 @@
+interface ItemBounds {
+    start: number;
+    end: number;
+}
+export interface InsertionPoint {
+    itemIndex: number;
+    after: boolean;
+}
+interface ReorderLayoutContextValue {
+    registerReorderItem(index: number, getBounds: () => ItemBounds): () => void;
+    getItemBounds(index: number): ItemBounds | undefined;
+    getClosestInsertionPoint(clientOffset: number, canReorder: (insertionIndex: number) => boolean): InsertionPoint | undefined;
+}
+export declare const ReorderLayoutContext: import("react").Context<ReorderLayoutContextValue>;
+export declare function useReorderLayoutContextValue(): ReorderLayoutContextValue;
+export {};

package/components/table/internal/reorder-layout-context.js

@@ -0,0 +1,69 @@
+import { createContext, useRef } from 'react';
+export const ReorderLayoutContext = createContext({
+    registerReorderItem: () => () => { },
+    getItemBounds: () => undefined,
+    getClosestInsertionPoint: () => undefined,
+});
+export function useReorderLayoutContextValue() {
+    const getBoundsByItemIndex = useRef([]);
+    function registerReorderItem(index, getBounds) {
+        getBoundsByItemIndex.current[index] = getBounds;
+        return () => {
+            delete getBoundsByItemIndex.current[index];
+        };
+    }
+    function getItemBounds(index) {
+        const getBounds = getBoundsByItemIndex.current[index];
+        return getBounds?.();
+    }
+    function getClosestInsertionPoint(clientOffset, canReorder) {
+        const candidates = getBoundsByItemIndex.current
+            .map((getBounds, itemIndex) => ({
+            itemIndex,
+            getBounds,
+            beforeAllowed: canReorder(itemIndex),
+            afterAllowed: canReorder(itemIndex + 1),
+        }))
+            .filter(({ beforeAllowed, afterAllowed }) => beforeAllowed || afterAllowed);
+        if (!candidates.length)
+            return undefined;
+        // Lazily computed closest insertion side and distance for each candidate
+        const closest = [];
+        function computeClosest(i) {
+            if (!closest[i]) {
+                const { getBounds, beforeAllowed, afterAllowed } = candidates[i];
+                const { start, end } = getBounds();
+                const beforeDist = Math.abs(clientOffset - start);
+                const afterDist = Math.abs(clientOffset - end);
+                if (!afterAllowed) {
+                    closest[i] = { distance: beforeDist, after: false };
+                }
+                else if (!beforeAllowed) {
+                    closest[i] = { distance: afterDist, after: true };
+                }
+                else {
+                    const after = afterDist < beforeDist;
+                    closest[i] = { distance: after ? afterDist : beforeDist, after };
+                }
+            }
+            return closest[i];
+        }
+        let l = 0;
+        let r = candidates.length - 1;
+        while (l < r) {
+            const m = Math.floor((l + r) / 2);
+            const { distance } = computeClosest(m);
+            if (l <= m - 1 && computeClosest(m - 1).distance < distance) {
+                r = m - 1;
+            }
+            else if (m + 1 <= r && computeClosest(m + 1).distance < distance) {
+                l = m + 1;
+            }
+            else {
+                return { itemIndex: candidates[m].itemIndex, after: computeClosest(m).after };
+            }
+        }
+        return { itemIndex: candidates[l].itemIndex, after: computeClosest(l).after };
+    }
+    return { registerReorderItem, getItemBounds, getClosestInsertionPoint };
+}

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

@@ -0,0 +1 @@
+export declare function TableHeader<T>(): import("react").JSX.Element | null;