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

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/internal/virtualization.js

@@ -0,0 +1,186 @@
+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 useVirtualItems({ enabled, data, data: { length }, scrollerRef, tableRef, estimateHeight, lookaheadPx, retentionMarginPx, minScrollAndResizeDeltaPx, }) {
+    const itemsMaterialization = useRef([]);
+    const [virtualItems, setVirtualItems] = useState(() => enabled ? getAllVirtualizedItems(data, estimateHeight) : []);
+    const materializeVisibleSpacerItems = useCallback(() => {
+        if (!tableRef.current)
+            return;
+        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 spacerRect = spacerRow.getBoundingClientRect();
+            if (spacerRect.bottom < materializeStart || spacerRect.top > materializeEnd) {
+                continue;
+            }
+            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 itemTop = currentTop;
+                const itemBottom = currentTop + itemHeight;
+                if (itemBottom >= materializeStart && itemTop <= materializeEnd) {
+                    itemsMaterialization.current[i] = true;
+                }
+                else if (itemTop > materializeEnd) {
+                    break;
+                }
+                currentTop += itemHeight;
+            }
+        }
+    }, [data, estimateHeight, lookaheadPx, scrollerRef, tableRef]);
+    const recomputeVirtualItems = useCallback(() => {
+        const newVirtualItems = [];
+        let spacerCounter = 0;
+        for (let i = 0; i < length; i++) {
+            const itemMaterialization = itemsMaterialization.current[i];
+            if (itemMaterialization === true) {
+                newVirtualItems.push({ type: 'materialized', index: i });
+            }
+            else {
+                const lastItemOrSpacer = newVirtualItems[newVirtualItems.length - 1];
+                const lastSpacer = lastItemOrSpacer?.type === 'spacer' ? lastItemOrSpacer : undefined;
+                const height = typeof itemMaterialization === 'number' ? itemMaterialization : estimateHeight(data[i], i, data);
+                if (lastSpacer) {
+                    lastSpacer.to = i + 1;
+                    lastSpacer.height += height;
+                }
+                else {
+                    newVirtualItems.push({
+                        type: 'spacer',
+                        from: i,
+                        to: i + 1,
+                        height,
+                        key: spacerKey(spacerCounter++),
+                    });
+                }
+            }
+        }
+        setVirtualItems(newVirtualItems);
+    }, [data, estimateHeight, length]);
+    const timerIdRef = useRef(null);
+    const callbacksRef = useRef(null);
+    const throttle = useCallback((...callbacks) => {
+        if (timerIdRef.current != null) {
+            callbacks.forEach(cb => {
+                callbacksRef.current.delete(cb);
+                callbacksRef.current.add(cb);
+            });
+            return;
+        }
+        callbacksRef.current = new Set(callbacks);
+        timerIdRef.current = window.setTimeout(() => {
+            callbacksRef.current.forEach(cb => cb());
+            timerIdRef.current = null;
+            callbacksRef.current = null;
+        }, virtualizationThrottleDelay);
+    }, []);
+    const prevEnabledRef = useRef(enabled);
+    useEffect(() => {
+        const prevEnabled = prevEnabledRef.current;
+        prevEnabledRef.current = enabled;
+        if (!enabled)
+            return;
+        const scroller = scrollerRef?.current;
+        let lastHandledScrollTop = -Infinity;
+        let lastHandledHeight = -Infinity;
+        let lastHandledWidth = -Infinity;
+        function handleViewportChange() {
+            const scrollTop = scroller ? scroller.scrollTop : window.scrollY;
+            const height = scroller ? scroller.clientHeight : window.innerHeight;
+            const width = scroller ? scroller.clientWidth : window.innerWidth;
+            if (Math.abs(scrollTop - lastHandledScrollTop) >= minScrollAndResizeDeltaPx ||
+                Math.abs(height - lastHandledHeight) >= minScrollAndResizeDeltaPx ||
+                Math.abs(width - lastHandledWidth) >= minScrollAndResizeDeltaPx) {
+                lastHandledScrollTop = scrollTop;
+                lastHandledHeight = height;
+                lastHandledWidth = width;
+                throttle(materializeVisibleSpacerItems, recomputeVirtualItems);
+            }
+        }
+        const scrollTarget = scroller ?? window;
+        scrollTarget.addEventListener('scroll', handleViewportChange, { passive: true });
+        const resizeObserver = new ResizeObserver(handleViewportChange);
+        const resizeTarget = scroller ?? document.documentElement;
+        resizeObserver.observe(resizeTarget);
+        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;
+            }
+        };
+    }, [
+        data,
+        enabled,
+        estimateHeight,
+        length,
+        materializeVisibleSpacerItems,
+        minScrollAndResizeDeltaPx,
+        recomputeVirtualItems,
+        scrollerRef,
+        throttle,
+    ]);
+    const intersectionObserverHandle = useIntersectionObserverHandle(scrollerRef, scrollerRef ? retentionMarginPx : undefined, !scrollerRef ? retentionMarginPx : undefined);
+    function collapseItemIntoSpacer(index, height) {
+        if (!enabled)
+            return;
+        itemsMaterialization.current[index] = height;
+        throttle(recomputeVirtualItems);
+    }
+    return {
+        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 }}/>
+    </tr>);
+}

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

@@ -0,0 +1,10 @@
+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>;
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
+export declare const defaultRowHeight = 37;

package/components/table/table-const.js

@@ -0,0 +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);
+/**
+ * When a row only contains unformatted single-line text, it will be exactly of this height.
+ */
+export const defaultRowHeight = 37;

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

@@ -0,0 +1,64 @@
+import type { ComponentPropsWithRef } from 'react';
+export interface TableRowProps {
+    /**
+     * @see DefaultItemRendererProps.keyboardFocusable
+     */
+    keyboardFocusable?: boolean;
+}
+/**
+ * @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 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;

package/components/table/table-primitives.js

@@ -0,0 +1,34 @@
+import classNames from 'classnames';
+import { ReorderHandle } from './internal/reorder-handle';
+import styles from './table.css';
+/**
+ * @internal
+ */
+export const keyboardFocusableAttrName = 'data-keyboard-focusable';
+/**
+ * A helper `<tr>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard row class names.
+ */
+export function TableRow(props) {
+    const { keyboardFocusable, className, ...restProps } = props;
+    const classes = classNames(styles.row, className);
+    const trRestProps = keyboardFocusable ? { [keyboardFocusableAttrName]: '', ...restProps } : restProps;
+    return <tr className={classes} {...trRestProps}/>;
+}
+/**
+ * A helper `<td>` component for custom {@link TableProps.renderItem} implementations.
+ * Applies the standard cell class names, but not data-dependent `tdClassName`.
+ */
+export function TableCell(props) {
+    const { className, ...restProps } = props;
+    const classes = classNames(styles.cell, className);
+    return <td className={classes} {...restProps}/>;
+}
+/**
+ * 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 function ItemReorderHandle({ index, ...restProps }) {
+    return <ReorderHandle direction='items' index={index} {...restProps}/>;
+}