@jetbrains/ring-ui 8.0.0-beta.1 → 8.0.0-beta.10

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;

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 {};