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

package/components/table/default-item-renderer.d.ts

@@ -5,13 +5,10 @@ export interface DefaultItemRendererProps {
      */
     index: number;
     /**
-     * If true, the row will be focusable with up/down arrow keys.
+     * If `true`, the row will be focusable with up/down arrow keys.
      * Focus is implemented using the
      * ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
      * technique, that is, only the focused row has `tabIndex={0}`.
-     *
-     * To focus the row on click or other user interaction, add e.g. `onClick()`
-     * and invoke `focusRow(e.currentTarget)` imported from `table-row-focus.ts`.
      */
     keyboardFocusable?: boolean;
     /**
@@ -20,17 +17,39 @@ export interface DefaultItemRendererProps {
      */
     clickable?: boolean;
     /**
-     * If true, the row is highlighted as selected, that is, with the
-     * a different background color.
+     * If `true`, the row is highlighted as selected with a different background color.
      */
     selected?: boolean;
     /**
-     * A level of a nested item. Results in an indent for columns with `indent: true`.
-     * 0, negative values, and an unset value mean no indent.
+     * The nesting level of an item. Applies an indent for columns with
+     * `Column.indent` set to `true`. `0`, negative values, and an unset value
+     * mean no indent.
      */
     level?: number;
+    /**
+     * When set to `true`, does not control item virtualization.
+     * Useful when you include `DefaultItemRenderer` as a part of a custom row renderer,
+     * and track the visibility yourself.
+     */
+    noItemVirtualization?: boolean;
+    /**
+     * When set to `true`, does not report the item's boundaries to the reorder system.
+     * Useful when you include `DefaultItemRenderer` as a part of a custom row renderer
+     * that registers boundaries itself.
+     */
+    noReorderLayout?: boolean;
 }
 /**
- * @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 declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;
+export declare function DefaultItemRenderer<T>({ index, keyboardFocusable, clickable, selected, level, noItemVirtualization, noReorderLayout, ref: userRef, className, ...restProps }: DefaultItemRendererProps & ComponentPropsWithRef<'tr'>): import("react").JSX.Element | null;

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

@@ -1,40 +1,43 @@
 import { c } from 'react/compiler-runtime';
 import { useRef, use } from 'react';
 import classNames from 'classnames';
-import { mergeRefs } from 'react-merge-refs';
-import { CollapseItemIntoSpacerContext, TablePropsContext } from './table-const.js';
-import { useIsIntersectingListener } from '../global/intersection-observer-context.js';
+import { TablePropsContext } from './table-const.js';
+import { useComposedRef } from '../global/compose-refs.js';
+import { useItemVirtualization } from './item-virtualization.js';
 import { TableRow, TableCell } from './table-primitives.js';
+import { ReorderAnimationContext } from '../internal/reorder-animation-context.js';
+import { useReorderItemLayout } from './reorder-item-layout.js';
 import { s as styles } from '../_helpers/table.js';
 import { jsx } from 'react/jsx-runtime';
-import '@jetbrains/icons/unsorted-12px';
-import '@jetbrains/icons/arrow-12px-down';
-import '@jetbrains/icons/arrow-12px-up';
-import '@jetbrains/icons/trash-12px';
+import 'memoize-one';
+import '../internal/virtualization.js';
+import '../global/intersection-observer-context.js';
+import '../global/schedule-with-cleanup.js';
+import '../internal/reorder-handle.js';
+import '@jetbrains/icons/drag-12px';
 import '../icon/icon.js';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
-import './table-row-focus.js';
+import '../global/parse-css-duration.js';
+import '../internal/reorder-layout-context.js';
 
-const INDENT_SIZE = 24;
-/**
- * @see TableProps.renderItem
- */
 function DefaultItemRenderer(t0) {
-  const $ = c(35);
-  if ($[0] !== "550d56d2b4709142d4ace07b800bfd11367b60c980b981f1e1be21c6b691222c") {
-    for (let $i = 0; $i < 35; $i += 1) {
+  const $ = c(47);
+  if ($[0] !== "bc245d0d0a3699b5ab0d750beda2a663dcc05f6d122b039db369f77f976f7ee8") {
+    for (let $i = 0; $i < 47; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "550d56d2b4709142d4ace07b800bfd11367b60c980b981f1e1be21c6b691222c";
+    $[0] = "bc245d0d0a3699b5ab0d750beda2a663dcc05f6d122b039db369f77f976f7ee8";
   }
   let className;
   let clickable;
   let index;
   let keyboardFocusable;
   let level;
+  let noItemVirtualization;
+  let noReorderLayout;
   let restProps;
   let selected;
   let userRef;
@@ -45,6 +48,8 @@ function DefaultItemRenderer(t0) {
       clickable,
       selected,
       level,
+      noItemVirtualization,
+      noReorderLayout,
       ref: userRef,
       className,
       ...restProps
@@ -55,123 +60,176 @@ function DefaultItemRenderer(t0) {
     $[4] = index;
     $[5] = keyboardFocusable;
     $[6] = level;
-    $[7] = restProps;
-    $[8] = selected;
-    $[9] = userRef;
+    $[7] = noItemVirtualization;
+    $[8] = noReorderLayout;
+    $[9] = restProps;
+    $[10] = selected;
+    $[11] = userRef;
   } else {
     className = $[2];
     clickable = $[3];
     index = $[4];
     keyboardFocusable = $[5];
     level = $[6];
-    restProps = $[7];
-    selected = $[8];
-    userRef = $[9];
+    noItemVirtualization = $[7];
+    noReorderLayout = $[8];
+    restProps = $[9];
+    selected = $[10];
+    userRef = $[11];
   }
   const localRef = useRef(null);
-  const collapseItemIntoSpacer = use(CollapseItemIntoSpacerContext);
+  const composedRef = useComposedRef(userRef, localRef);
   let t1;
-  if ($[10] !== collapseItemIntoSpacer) {
-    t1 = isIntersecting => {
-      if (localRef.current && !isIntersecting) {
-        collapseItemIntoSpacer(localRef.current.getBoundingClientRect().height);
-      }
+  if ($[12] !== noItemVirtualization) {
+    t1 = (t2, _i, t3) => {
+      const [isIntersecting] = t2;
+      const [element] = t3;
+      return isIntersecting === false && !noItemVirtualization && element?.isConnected && !element.contains(document.activeElement) && !element.previousElementSibling?.contains(document.activeElement) && !element.nextElementSibling?.contains(document.activeElement) ? element.getBoundingClientRect().height : undefined;
     };
-    $[10] = collapseItemIntoSpacer;
-    $[11] = t1;
+    $[12] = noItemVirtualization;
+    $[13] = t1;
   } else {
-    t1 = $[11];
+    t1 = $[13];
   }
-  useIsIntersectingListener(localRef, t1);
+  const t2 = t1;
+  let t3;
+  if ($[14] !== index || $[15] !== t2) {
+    t3 = {
+      index,
+      refs: localRef,
+      onIntersectionChange: t2
+    };
+    $[14] = index;
+    $[15] = t2;
+    $[16] = t3;
+  } else {
+    t3 = $[16];
+  }
+  useItemVirtualization(t3);
+  let t4;
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = () => {
+      var _r$top, _r$bottom;
+      const r = localRef.current?.getBoundingClientRect();
+      return {
+        start: (_r$top = r?.top) !== null && _r$top !== void 0 ? _r$top : 0,
+        end: (_r$bottom = r?.bottom) !== null && _r$bottom !== void 0 ? _r$bottom : 0
+      };
+    };
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  let t5;
+  if ($[18] !== index || $[19] !== noReorderLayout) {
+    t5 = {
+      disabled: noReorderLayout,
+      index,
+      getBounds: t4
+    };
+    $[18] = index;
+    $[19] = noReorderLayout;
+    $[20] = t5;
+  } else {
+    t5 = $[20];
+  }
+  useReorderItemLayout(t5);
   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];
-  let t2;
-  if ($[12] !== userRef) {
-    t2 = mergeRefs([userRef, localRef]);
-    $[12] = userRef;
-    $[13] = t2;
-  } else {
-    t2 = $[13];
-  }
-  const t3 = clickable && styles.clickableRow;
-  const t4 = selected && styles.selectedRow;
-  let t5;
-  if ($[14] !== className || $[15] !== t3 || $[16] !== t4) {
-    t5 = classNames(className, t3, t4);
-    $[14] = className;
-    $[15] = t3;
-    $[16] = t4;
-    $[17] = t5;
+  const t6 = clickable && styles.clickableRow;
+  const t7 = selected && styles.selectedRow;
+  const t8 = isAnimatedItem && animateClassName;
+  let t9;
+  if ($[21] !== className || $[22] !== t6 || $[23] !== t7 || $[24] !== t8) {
+    t9 = classNames(className, t6, t7, t8);
+    $[21] = className;
+    $[22] = t6;
+    $[23] = t7;
+    $[24] = t8;
+    $[25] = t9;
   } else {
-    t5 = $[17];
+    t9 = $[25];
   }
-  let t6;
-  if ($[18] !== columns || $[19] !== data || $[20] !== index || $[21] !== item || $[22] !== level) {
-    let t7;
-    if ($[24] !== data || $[25] !== index || $[26] !== item || $[27] !== level) {
-      t7 = (column, columnIndex) => {
+  let t10;
+  if ($[26] !== animateClassName || $[27] !== animatedColumnIndex || $[28] !== columns || $[29] !== data || $[30] !== index || $[31] !== item || $[32] !== level) {
+    let t11;
+    if ($[34] !== animateClassName || $[35] !== animatedColumnIndex || $[36] !== data || $[37] !== index || $[38] !== item || $[39] !== level) {
+      t11 = (column, columnIndex) => {
         var _column$renderCell;
+        const {
+          key,
+          tdClassName,
+          indent
+        } = column;
         return /*#__PURE__*/jsx(TableCell, {
-          className: column.tdClassName?.(item, index, data),
-          style: column.indent && level != null && level > 0 ? {
-            paddingInlineStart: `${level * INDENT_SIZE}px`
+          className: classNames(columnIndex === animatedColumnIndex && animateClassName, typeof tdClassName === "function" ? tdClassName(item, index, data) : tdClassName),
+          style: indent && level != null && level > 0 ? {
+            paddingInlineStart: `${level * 24}px`
           } : undefined,
-          children: (_column$renderCell = column.renderCell?.(item, index, data)) !== null && _column$renderCell !== void 0 ? _column$renderCell : getDefaultCellValue(item, columnIndex)
-        }, column.key);
+          children: (_column$renderCell = column.renderCell?.(item, index, data)) !== null && _column$renderCell !== void 0 ? _column$renderCell : getDefaultCellValue(item, columnIndex, key)
+        }, key);
       };
-      $[24] = data;
-      $[25] = index;
-      $[26] = item;
-      $[27] = level;
-      $[28] = t7;
+      $[34] = animateClassName;
+      $[35] = animatedColumnIndex;
+      $[36] = data;
+      $[37] = index;
+      $[38] = item;
+      $[39] = level;
+      $[40] = t11;
     } else {
-      t7 = $[28];
+      t11 = $[40];
     }
-    t6 = columns.map(t7);
-    $[18] = columns;
-    $[19] = data;
-    $[20] = index;
-    $[21] = item;
-    $[22] = level;
-    $[23] = t6;
+    t10 = columns.map(t11);
+    $[26] = animateClassName;
+    $[27] = animatedColumnIndex;
+    $[28] = columns;
+    $[29] = data;
+    $[30] = index;
+    $[31] = item;
+    $[32] = level;
+    $[33] = t10;
   } else {
-    t6 = $[23];
+    t10 = $[33];
   }
-  let t7;
-  if ($[29] !== keyboardFocusable || $[30] !== restProps || $[31] !== t2 || $[32] !== t5 || $[33] !== t6) {
-    t7 = /*#__PURE__*/jsx(TableRow, {
-      ref: t2,
+  let t11;
+  if ($[41] !== composedRef || $[42] !== keyboardFocusable || $[43] !== restProps || $[44] !== t10 || $[45] !== t9) {
+    t11 = /*#__PURE__*/jsx(TableRow, {
+      ref: composedRef,
       keyboardFocusable: keyboardFocusable,
-      className: t5,
+      className: t9,
       ...restProps,
-      children: t6
+      children: t10
     });
-    $[29] = keyboardFocusable;
-    $[30] = restProps;
-    $[31] = t2;
-    $[32] = t5;
-    $[33] = t6;
-    $[34] = t7;
+    $[41] = composedRef;
+    $[42] = keyboardFocusable;
+    $[43] = restProps;
+    $[44] = t10;
+    $[45] = t9;
+    $[46] = t11;
   } else {
-    t7 = $[34];
+    t11 = $[46];
   }
-  return t7;
+  return t11;
 }
-function getDefaultCellValue(item, columnIndex) {
+function getDefaultCellValue(item, columnIndex, columnKey) {
   if (Array.isArray(item)) {
-    var _item$columnIndex;
-    return String((_item$columnIndex = item[columnIndex]) !== null && _item$columnIndex !== void 0 ? _item$columnIndex : '');
+    return String(item[columnIndex]);
   }
   if (item !== null && typeof item === 'object') {
-    var _Object$values$column;
-    return String((_Object$values$column = Object.values(item)[columnIndex]) !== null && _Object$values$column !== void 0 ? _Object$values$column : '');
+    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-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-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/table-header.d.ts

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

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/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,73 @@
+import { c } from 'react/compiler-runtime';
+import { use, useEffect } from 'react';
+import { VirtualizationContext } from '../internal/virtualization.js';
+import '../global/intersection-observer-context.js';
+import '../global/schedule-with-cleanup.js';
+import '../_helpers/table.js';
+import 'react/jsx-runtime';
+
+/**
+ * Use in an item renderer to control item virtualization.
+ */
+function useItemVirtualization(t0) {
+  const $ = c(8);
+  if ($[0] !== "28d3fc0a1c743c2e72a27a83caad5b78c5438f38b7abdd065da2a832e4f9fcec") {
+    for (let $i = 0; $i < 8; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "28d3fc0a1c743c2e72a27a83caad5b78c5438f38b7abdd065da2a832e4f9fcec";
+  }
+  const {
+    index,
+    refs,
+    onIntersectionChange
+  } = t0;
+  const {
+    intersectionObserverHandle,
+    collapseItemIntoSpacer
+  } = use(VirtualizationContext);
+  let t1;
+  let t2;
+  if ($[1] !== collapseItemIntoSpacer || $[2] !== index || $[3] !== intersectionObserverHandle || $[4] !== onIntersectionChange || $[5] !== refs) {
+    t1 = () => {
+      const intersectionStates = Array.isArray(refs) ? refs.map(_temp) : [undefined];
+      const elements = Array.isArray(refs) ? refs.map(_temp2) : [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(_temp3);
+    };
+    t2 = [collapseItemIntoSpacer, intersectionObserverHandle, index, onIntersectionChange, refs];
+    $[1] = collapseItemIntoSpacer;
+    $[2] = index;
+    $[3] = intersectionObserverHandle;
+    $[4] = onIntersectionChange;
+    $[5] = refs;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t1 = $[6];
+    t2 = $[7];
+  }
+  useEffect(t1, t2);
+}
+function _temp3(cleanup_0) {
+  return cleanup_0();
+}
+function _temp2(r) {
+  return r.current;
+}
+function _temp() {}
+
+export { useItemVirtualization };

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,18 @@
+import { use } from 'react';
+import { ReorderAnimationContext } from '../internal/reorder-animation-context.js';
+import 'react/compiler-runtime';
+import '../global/parse-css-duration.js';
+import '../global/schedule-with-cleanup.js';
+import '../_helpers/table.js';
+
+/**
+ * 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.
+ */
+function useReorderAnimation() {
+  return use(ReorderAnimationContext).reorderAnimation;
+}
+
+export { useReorderAnimation };