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

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

@@ -19,3 +19,46 @@ export declare function TableRow(props: TableRowProps & ComponentPropsWithRef<'t
  * 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

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import { ReorderHandle } from './internal/reorder-handle';
 import styles from './table.css';
 /**
  * @internal
@@ -23,3 +24,11 @@ export function TableCell(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}/>;
+}

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

@@ -34,7 +34,7 @@ export interface TableProps<T> {
      * Called when the user clicks on a column delete button in the header.
      * The client is expected to update the `columns` prop with the column removed.
      */
-    onColumnDelete?: (columnIndex: number, columns: readonly Column<T>[]) => void;
+    onColumnDelete?: (column: Column<T>, columnIndex: number, columns: readonly Column<T>[]) => void;
     /**
      * Called when the user reorders columns by dragging a column.
      * The `insertionIndex` parameter represents an insertion position in the original,
@@ -43,20 +43,44 @@ export interface TableProps<T> {
      * One possible implementation is:
      *
      * ```ts
-     * const [moved] = columns.splice(fromIndex, 1);
-     * columns.splice(fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex, 0, moved);
+     * columns.splice(fromIndex, 1);
+     * columns.splice(fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex, 0, columnBeingReordered);
      * ```
      *
      * The callback is not called when the reorder operation would not change the
      * column order, i.e. when
      * `insertionIndex === fromIndex || insertionIndex === fromIndex + 1`.
      */
-    onColumnReorder?: (fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => void;
+    onColumnReorder?: (columnBeingReordered: Column<T>, fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => void;
     /**
      * By default, when a column is reordered, the moved column is highlighted
      * with a temporary background color. Set `true` to disable this animation.
      */
     noColumnReorderAnimation?: boolean;
+    /**
+     * If defined, determines whether an item may be reordered to a specific insertion position.
+     * If not defined, any item may be reordered to any position.
+     */
+    canReorderItem?: (itemBeingReordered: T, fromIndex: number, insertionIndex: number, items: readonly T[]) => boolean;
+    /**
+     * Called when the user reorders items by dragging a handle.
+     * The `insertionIndex` parameter represents an insertion position in the original,
+     * unchanged `data` array before the item is removed. See {@link TableProps.onColumnReorder}
+     * for an example implementation.
+     *
+     * To make reorder possible, render `ItemReorderHandle` (from `table-primitives`)
+     * anywhere in a row.
+     *
+     * The callback is not called when the reorder operation would not change the
+     * item order, i.e. when
+     * `insertionIndex === fromIndex || insertionIndex === fromIndex + 1`.
+     */
+    onItemReorder?: (itemBeingReordered: T, fromIndex: number, insertionIndex: number, items: readonly T[]) => void;
+    /**
+     * By default, when an item is reordered, the moved item is highlighted
+     * with a temporary background color. Set `true` to disable this animation.
+     */
+    noItemReorderAnimation?: boolean;
     /**
      * Customizes how an item is rendered.
      *
@@ -266,7 +290,7 @@ export interface Column<T> {
      * Make sure {@link Column.name} or {@link Column.key} is meaningful,
      * as it will be included in the `aria-label` of the reorder button.
      */
-    canReorder?: boolean | ((insertionIndex: number, columns: readonly Column<T>[]) => boolean);
+    canReorder?: boolean | ((columnBeingReordered: Column<T>, fromIndex: number, insertionIndex: number, columns: readonly Column<T>[]) => boolean);
     /**
      * The class name to apply to the `th` element inside `table > thead`.
      */

package/components/table/table.css

@@ -1,7 +1,7 @@
 @import '../global/variables.css';
 
 .table {
-  --animated-column-fade-out-duration: 600ms;
+  --reorder-animation-fade-out-duration: 600ms;
 
   width: 100%;
 
@@ -40,7 +40,7 @@
   &:hover {
     --header-cell-shadow-color: var(--ring-line-color);
 
-    &:not(.animatedColumnInitial, .animatedColumnFadeOut) {
+    &:not(.reorderAnimationInitial, .reorderAnimationFadeOut) {
       background-color: var(--ring-grey-container-light-color);
     }
   }
@@ -67,7 +67,7 @@
   }
 }
 
-.headerButton {
+.tableButton {
   margin: unset;
   padding: unset;
 
@@ -134,6 +134,15 @@
   touch-action: none;
 }
 
+.itemReorderHandle {
+  cursor: grab;
+
+  color: var(--ring-secondary-color);
+
+  border-radius: var(--ring-border-radius);
+  touch-action: none;
+}
+
 .theadColumnEditing .columnReorderHandle,
 .headerCell:hover .columnReorderHandle,
 .columnReorderHandle:focus-visible {
@@ -167,7 +176,7 @@
   }
 }
 
-.columnDragFrame {
+.dragFrame {
   position: fixed;
 
   z-index: var(--ring-overlay-z-index);
@@ -180,24 +189,22 @@
   background-color: rgba(var(--ring-border-accent-components), 0.06);
 }
 
-.columnInsertionIndicator {
+.insertionIndicator {
   position: fixed;
 
   z-index: var(--ring-overlay-z-index);
 
-  width: 2px;
-
   background-color: var(--ring-main-color);
 }
 
-.animatedColumnInitial {
+.reorderAnimationInitial {
   transition: none;
 
   background-color: rgba(var(--ring-border-accent-components), 0.12);
 }
 
-.animatedColumnFadeOut {
-  transition: background-color var(--animated-column-fade-out-duration) ease-out;
+.reorderAnimationFadeOut {
+  transition: background-color var(--reorder-animation-fade-out-duration) ease-out;
 
   background-color: transparent;
 }

package/components/table/table.d.ts

@@ -89,7 +89,7 @@ import type { TableProps } from './table-props';
  * Note that for accessibility reasons, you should have a cell with a checkbox
  * to display and toggle item selection.
  *
- * ## Rows focus
+ * ## Row focus
  *
  * The table implements the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
  * technique to focus rows with the up/down arrow keys.
@@ -157,6 +157,23 @@ import type { TableProps } from './table-props';
  *   expected to update `columns` by moving the corresponding column to the
  *   new position.
  *
+ * ## Item reorder
+ *
+ * To allow the user to reorder rows by dragging:
+ *
+ * - Place `ItemReorderHandle` (from `table/table-primitives`) anywhere inside
+ *   a cell. It renders a drag icon button the user can grab to reorder the row.
+ * - Handle `TableProps.onItemReorder`. It is expected to update `data` by
+ *   moving the item to the new position.
+ * - Optionally, set `TableProps.canReorderItem` to restrict which positions
+ *   an item may be dropped into.
+ *
+ * By default, dragging shows a drag frame (a border around the dragged row)
+ * and an insertion indicator (a line between rows showing where the item will
+ * land). To implement fully custom drag visuals, set `noDragFrame` and
+ * `noHandleTranslate` on `ItemReorderHandle` and use its `onUserDrag` callback
+ * to track the drag lifecycle.
+ *
  * ## Row virtualization
  *
  * To render only rows near the viewport while replacing off-screen rows with
@@ -198,10 +215,19 @@ import type { TableProps } from './table-props';
  * set the `noItemVirtualization` prop to `true`, otherwise it will also try
  * to control the virtualization, possibly reporting incorrect item height.
  *
- * ### Column reorder animation
+ * ### Item reorder
+ *
+ * If `TableProps.onItemReorder` is set and your item spans multiple rows, call
+ * `useReorderItemLayout()` (from `table/reorder-item-layout`) to register the
+ * item's boundaries so the insertion indicator and insertion point calculation
+ * are correct. If `DefaultItemRenderer` is included inside your custom renderer,
+ * set its `noReorderLayout` prop to `true` to prevent double registration.
+ *
+ * ### Reorder animation
  *
- * Default-rendered rows highlight the column that was just reordered. To apply
- * the same animation to your custom-rendered rows, use `ColumnAnimationContext`
- * (from `table/table-const`) to get information about the currently animated column.
+ * After a column or item is reordered, the table briefly highlights the moved
+ * element. To apply the same animation in your custom-rendered rows, use
+ * `useReorderAnimation()` (from `table/reorder-animation`) to get information
+ * about the currently animated column or item.
  */
 export default function Table<T>(props: TableProps<T> & ComponentPropsWithRef<'table'>): React.JSX.Element;

package/components/table/table.js

@@ -1,15 +1,15 @@
-import React, { Fragment, useCallback, useRef } from 'react';
+import React, { Fragment, useRef } from 'react';
 import classNames from 'classnames';
-import { IntersectionObserverContext } from '../global/intersection-observer-context';
-import { CollapseItemIntoSpacerContext, SpacerRow, useVirtualItems } from './internal/virtual-items';
+import { SpacerRow, useVirtualItems, VirtualizationContext } from './internal/virtualization';
 import { DefaultItemRenderer } from './default-item-renderer';
-import { ColumnAnimationContext, defaultRowHeight, TablePropsContext } from './table-const';
+import { defaultRowHeight, TablePropsContext } from './table-const';
 import { focusWithTemporaryTabIndex } from '../global/focus-with-temporary-tabindex';
-import { useColumnAnimation } from './internal/column-animation';
+import { ReorderAnimationContext, useReorderAnimationContextValue } from './internal/reorder-animation-context';
 import { useComposedRef } from '../global/compose-refs';
 import { TableHeader } from './internal/table-header';
 import { keyboardFocusableAttrName } from './table-primitives';
 import { isWithinNavigableElement } from '../global/is-within-navigable-element';
+import { ReorderLayoutContext, useReorderLayoutContextValue } from './internal/reorder-layout-context';
 import styles from './table.css';
 /**
  * Table component replacing the tables in the `legacy-table` folder.
@@ -100,7 +100,7 @@ import styles from './table.css';
  * Note that for accessibility reasons, you should have a cell with a checkbox
  * to display and toggle item selection.
  *
- * ## Rows focus
+ * ## Row focus
  *
  * The table implements the ["roving tabindex"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/Guides/Keyboard-navigable_JavaScript_widgets#technique_1_roving_tabindex)
  * technique to focus rows with the up/down arrow keys.
@@ -168,6 +168,23 @@ import styles from './table.css';
  *   expected to update `columns` by moving the corresponding column to the
  *   new position.
  *
+ * ## Item reorder
+ *
+ * To allow the user to reorder rows by dragging:
+ *
+ * - Place `ItemReorderHandle` (from `table/table-primitives`) anywhere inside
+ *   a cell. It renders a drag icon button the user can grab to reorder the row.
+ * - Handle `TableProps.onItemReorder`. It is expected to update `data` by
+ *   moving the item to the new position.
+ * - Optionally, set `TableProps.canReorderItem` to restrict which positions
+ *   an item may be dropped into.
+ *
+ * By default, dragging shows a drag frame (a border around the dragged row)
+ * and an insertion indicator (a line between rows showing where the item will
+ * land). To implement fully custom drag visuals, set `noDragFrame` and
+ * `noHandleTranslate` on `ItemReorderHandle` and use its `onUserDrag` callback
+ * to track the drag lifecycle.
+ *
  * ## Row virtualization
  *
  * To render only rows near the viewport while replacing off-screen rows with
@@ -209,14 +226,23 @@ import styles from './table.css';
  * set the `noItemVirtualization` prop to `true`, otherwise it will also try
  * to control the virtualization, possibly reporting incorrect item height.
  *
- * ### Column reorder animation
+ * ### Item reorder
  *
- * Default-rendered rows highlight the column that was just reordered. To apply
- * the same animation to your custom-rendered rows, use `ColumnAnimationContext`
- * (from `table/table-const`) to get information about the currently animated column.
+ * If `TableProps.onItemReorder` is set and your item spans multiple rows, call
+ * `useReorderItemLayout()` (from `table/reorder-item-layout`) to register the
+ * item's boundaries so the insertion indicator and insertion point calculation
+ * are correct. If `DefaultItemRenderer` is included inside your custom renderer,
+ * set its `noReorderLayout` prop to `true` to prevent double registration.
+ *
+ * ### Reorder animation
+ *
+ * After a column or item is reordered, the table briefly highlights the moved
+ * element. To apply the same animation in your custom-rendered rows, use
+ * `useReorderAnimation()` (from `table/reorder-animation`) to get information
+ * about the currently animated column or item.
  */
 export default function Table(props) {
-    const { data, columns, getKey, noHeader, stickyHeader, onSort, onColumnDelete, onColumnReorder, noColumnReorderAnimation, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, 
+    const { data, columns, getKey, noHeader, stickyHeader, onSort, onColumnDelete, onColumnReorder, noColumnReorderAnimation, canReorderItem, onItemReorder, noItemReorderAnimation, renderItem, virtualizeRows = false, scrollerRef, estimateHeight = () => defaultRowHeight, 
     // eslint-disable-next-line no-magic-numbers
     lookaheadPx = 400, 
     // eslint-disable-next-line no-magic-numbers
@@ -224,22 +250,14 @@ export default function Table(props) {
     // eslint-disable-next-line no-magic-numbers
     minScrollAndResizeDeltaPx = 50, columnEditing, onColumnEditingRequest, columnEditButton, theadClassName, theadTrClassName, tbodyClassName, ref: userRef, className, ...restProps } = props;
     const localRef = useRef(null);
-    const { virtualItems, intersectionObserverHandle, collapseItemIntoSpacer } = useVirtualItems({
-        enabled: virtualizeRows,
-        data,
-        scrollerRef,
-        tableRef: localRef,
-        estimateHeight,
-        lookaheadPx,
-        retentionMarginPx,
-        minScrollAndResizeDeltaPx,
-    });
-    const { columnAnimation, expectColumnReorder } = useColumnAnimation({
-        disabled: noColumnReorderAnimation,
+    const reorderAnimationContextValue = useReorderAnimationContextValue({
+        noColumnReorderAnimation,
+        noItemReorderAnimation,
         tableRef: localRef,
+        data,
         columns,
     });
-    const handleRowNavigation = useCallback((e) => {
+    function handleRowNavigation(e) {
         if (e.defaultPrevented || isWithinNavigableElement(e.target))
             return;
         const arrowUp = e.key === 'ArrowUp';
@@ -259,15 +277,26 @@ export default function Table(props) {
                 return;
             }
         }
-    }, []);
+    }
+    const { virtualItems, virtualizationContextValue } = useVirtualItems({
+        enabled: virtualizeRows,
+        data,
+        scrollerRef,
+        tableRef: localRef,
+        estimateHeight,
+        lookaheadPx,
+        retentionMarginPx,
+        minScrollAndResizeDeltaPx,
+    });
+    const itemReorderLayoutContextValue = useReorderLayoutContextValue();
     return (<TablePropsContext value={props}>
-      <ColumnAnimationContext value={columnAnimation}>
+      <ReorderAnimationContext value={reorderAnimationContextValue}>
         <table className={classNames(styles.table, className)} ref={useComposedRef(userRef, localRef)} {...restProps}>
-          <TableHeader expectColumnReorder={expectColumnReorder}/>
-          <IntersectionObserverContext value={intersectionObserverHandle}>
-            <CollapseItemIntoSpacerContext value={collapseItemIntoSpacer}>
-              {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
-              <tbody className={tbodyClassName} onKeyDown={handleRowNavigation}>
+          <TableHeader />
+          {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */}
+          <tbody className={tbodyClassName} onKeyDown={handleRowNavigation}>
+            <VirtualizationContext value={virtualizationContextValue}>
+              <ReorderLayoutContext value={itemReorderLayoutContextValue}>
                 {(virtualizeRows ? virtualItems : data).map((item, index) => {
             let dataItem;
             let dataItemIndex;
@@ -289,10 +318,10 @@ export default function Table(props) {
                       {renderItem ? (renderItem(dataItem, dataItemIndex, data)) : (<DefaultItemRenderer index={dataItemIndex}/>)}
                     </Fragment>);
         })}
-              </tbody>
-            </CollapseItemIntoSpacerContext>
-          </IntersectionObserverContext>
+              </ReorderLayoutContext>
+            </VirtualizationContext>
+          </tbody>
         </table>
-      </ColumnAnimationContext>
+      </ReorderAnimationContext>
     </TablePropsContext>);
 }

package/components/user-card/smart-user-card-tooltip.d.ts

@@ -10,6 +10,6 @@ export default class SmartUserCardTooltip extends Component<SmartUserCardTooltip
         loading: boolean;
     };
     loadUser: () => Promise<void>;
-    renderNoUser: () => "" | import("react").JSX.Element;
+    renderNoUser: () => import("react").JSX.Element | "";
     render(): import("react").JSX.Element;
 }

package/components/util-stories.d.ts

@@ -19,9 +19,9 @@ export declare function createRandom(seed: bigint): {
     /**
      * Up to random n items (in random order) from the array
      */
-    <T>(array: T[], n: number): T[];
+    <T>(array: readonly T[], n: number): T[];
     /**
      * Random item from the array
      */
-    <T>(array: T[]): T;
+    <T>(array: readonly T[]): T;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "8.0.0-beta.4",
+  "version": "8.0.0-beta.5",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -132,7 +132,7 @@
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/webpack-env": "^1.18.8",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.3",
     "@vitest/eslint-plugin": "^1.6.20",
     "acorn": "^8.17.0",
     "babel-plugin-require-context-hook": "^1.0.0",
@@ -155,10 +155,10 @@
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
     "eslint-plugin-storybook": "^10.4.6",
-    "eslint-plugin-unicorn": "^68.0.0",
+    "eslint-plugin-unicorn": "^70.0.0",
     "events": "^3.3.0",
     "glob": "^13.0.6",
-    "globals": "^17.6.0",
+    "globals": "^17.7.0",
     "html-webpack-plugin": "^5.6.7",
     "http-server": "^14.1.1",
     "husky": "^9.1.7",
@@ -170,7 +170,7 @@
     "markdown-it": "^14.2.0",
     "merge-options": "^3.0.4",
     "pinst": "^3.0.0",
-    "prettier": "^3.8.4",
+    "prettier": "^3.9.4",
     "raw-loader": "^4.0.2",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
@@ -180,19 +180,19 @@
     "rollup-plugin-clear": "^2.0.7",
     "storage-mock": "^2.1.0",
     "storybook": "10.4.6",
-    "stylelint": "^17.13.0",
+    "stylelint": "^17.14.0",
     "stylelint-config-sass-guidelines": "^13.0.0",
     "svg-inline-loader": "^0.8.2",
     "teamcity-service-messages": "^0.1.14",
     "terser-webpack-plugin": "^5.6.1",
     "typed-css-modules": "^0.9.1",
     "typescript": "~6.0.3",
-    "typescript-eslint": "^8.61.1",
-    "vite": "^8.0.16",
+    "typescript-eslint": "^8.62.1",
+    "vite": "^8.1.0",
     "vitest": "^4.1.9",
     "vitest-teamcity-reporter": "^0.4.1",
-    "webpack": "^5.107.2",
-    "webpack-cli": "^7.0.3",
+    "webpack": "^5.108.1",
+    "webpack-cli": "^7.1.0",
     "xmlappend": "^1.0.4"
   },
   "peerDependencies": {
@@ -227,7 +227,7 @@
     "babel-loader": "10.1.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
-    "browserslist": "^4.28.2",
+    "browserslist": "^4.28.4",
     "change-case": "^4.1.1",
     "classnames": "^2.5.1",
     "combokeys": "^3.0.1",
@@ -238,7 +238,7 @@
     "element-resize-detector": "^1.2.4",
     "fastdom": "^1.0.12",
     "file-loader": "^6.2.0",
-    "focus-trap": "^8.2.1",
+    "focus-trap": "^8.2.2",
     "highlight.js": "^10.7.2",
     "just-debounce-it": "^3.2.0",
     "memoize-one": "^6.0.0",

package/components/table/internal/column-animation.d.ts

@@ -1,16 +0,0 @@
-import { type RefObject } from 'react';
-import type { Column } from '../table-props';
-import type { ColumnAnimation } from '../table-const';
-export interface ReorderSpec {
-    fromIndex: number;
-    insertionIndex: number;
-}
-export type ExpectColumnReorder = (reorderSpec: ReorderSpec) => void;
-export declare function useColumnAnimation<T>({ disabled, tableRef, columns, }: {
-    disabled: boolean | undefined;
-    tableRef: RefObject<HTMLTableElement | null>;
-    columns: readonly Column<T>[];
-}): {
-    columnAnimation: ColumnAnimation | null;
-    expectColumnReorder: ExpectColumnReorder;
-};

package/components/table/internal/column-animation.js

@@ -1,45 +0,0 @@
-import { useCallback, 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';
-const reorderExpectationTimeout = 1000;
-export function useColumnAnimation({ disabled, tableRef, columns, }) {
-    const [columnAnimation, setColumnAnimation] = useState(null);
-    const pendingColumnReorder = useRef(null);
-    const expectColumnReorder = useCallback((reorderSpec) => {
-        if (disabled)
-            return;
-        const timerId = window.setTimeout(() => {
-            pendingColumnReorder.current = null;
-        }, reorderExpectationTimeout);
-        pendingColumnReorder.current = { ...reorderSpec, timerId, columns };
-    }, [disabled, columns]);
-    useEffect(() => {
-        return () => {
-            if (pendingColumnReorder.current) {
-                window.clearTimeout(pendingColumnReorder.current.timerId);
-                pendingColumnReorder.current = null;
-            }
-        };
-    }, []);
-    useEffect(() => {
-        const table = tableRef.current;
-        if (!table || !pendingColumnReorder.current || columns === pendingColumnReorder.current.columns)
-            return;
-        const { fromIndex, insertionIndex } = pendingColumnReorder.current;
-        pendingColumnReorder.current = null;
-        const columnIndex = fromIndex < insertionIndex ? insertionIndex - 1 : insertionIndex;
-        return requestAnimationFrameWithCleanup(() => setColumnAnimation(prev => prev == null ? { columnIndex, phase: 'initial', cellClassName: styles.animatedColumnInitial } : prev));
-    }, [columns, tableRef]);
-    useEffect(() => {
-        if (columnAnimation?.phase === 'initial') {
-            return requestAnimationFrameWithCleanup(() => setColumnAnimation(prev => prev === columnAnimation ? { ...prev, phase: 'fade-out', cellClassName: styles.animatedColumnFadeOut } : prev));
-        }
-        if (columnAnimation?.phase === 'fade-out') {
-            const fadeOutMs = parseCssDuration(window.getComputedStyle(tableRef.current).getPropertyValue('--animated-column-fade-out-duration'));
-            return setTimeoutWithCleanup(() => setColumnAnimation(prev => (prev === columnAnimation ? null : prev)), fadeOutMs);
-        }
-        return undefined;
-    }, [columnAnimation, tableRef]);
-    return { columnAnimation, expectColumnReorder };
-}