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

package/components/internal/table-header.js

@@ -3,34 +3,36 @@ import { use, useState, useRef } from 'react';
 import classNames from 'classnames';
 import arrowDownIcon from '@jetbrains/icons/arrow-12px-down';
 import arrowUpIcon from '@jetbrains/icons/arrow-12px-up';
-import dragIcon from '@jetbrains/icons/drag-12px';
 import settingsIcon from '@jetbrains/icons/settings-12px';
 import trashIcon from '@jetbrains/icons/trash-12px';
 import sortableIcon from '@jetbrains/icons/unsorted-12px';
-import { TablePropsContext, ColumnAnimationContext } from '../table/table-const.js';
+import { TablePropsContext } from '../table/table-const.js';
 import Icon from '../icon/icon.js';
-import { useComposedRef } from '../global/compose-refs.js';
 import { isWithinInteractiveElement } from '../global/is-within-interactive-element.js';
-import { parseCssDuration } from '../global/parse-css-duration.js';
+import { ReorderHandle } from './reorder-handle.js';
+import { ReorderAnimationContext } from './reorder-animation-context.js';
+import { useReorderLayoutContextValue, ReorderLayoutContext } from './reorder-layout-context.js';
+import { useReorderItemLayout } from '../table/reorder-item-layout.js';
 import { s as styles } from '../_helpers/table.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import 'util-deprecate';
 import '../icon/icon.constants.js';
 import '../_helpers/icon-svg.js';
 import '../global/memoize.js';
+import '@jetbrains/icons/drag-12px';
+import '../global/compose-refs.js';
 import 'memoize-one';
+import '../global/parse-css-duration.js';
+import '../global/schedule-with-cleanup.js';
 
-function TableHeader(t0) {
-  const $ = c(29);
-  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
-    for (let $i = 0; $i < 29; $i += 1) {
+function TableHeader() {
+  const $ = c(30);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 30; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
   }
-  const {
-    expectColumnReorder
-  } = t0;
   const {
     columns,
     noHeader,
@@ -42,9 +44,9 @@ function TableHeader(t0) {
   } = use(TablePropsContext);
   const [localColumnEditing, setLocalColumnEditing] = useState(false);
   const effectiveColumnEditing = columnEditing !== null && columnEditing !== void 0 ? columnEditing : localColumnEditing;
-  let t1;
+  let t0;
   if ($[1] !== columnEditing || $[2] !== localColumnEditing || $[3] !== onColumnEditingRequest) {
-    t1 = source => {
+    t0 = source => {
       let newColumnEditing;
       if (columnEditing == null) {
         newColumnEditing = !localColumnEditing;
@@ -57,118 +59,128 @@ function TableHeader(t0) {
     $[1] = columnEditing;
     $[2] = localColumnEditing;
     $[3] = onColumnEditingRequest;
-    $[4] = t1;
+    $[4] = t0;
   } else {
-    t1 = $[4];
+    t0 = $[4];
   }
-  const toggleColumnEditing = t1;
-  let t2;
+  const toggleColumnEditing = t0;
+  let t1;
   if ($[5] !== toggleColumnEditing) {
-    t2 = e => {
+    t1 = e => {
       if (window.matchMedia("(hover: none)").matches && !isWithinInteractiveElement(e.target)) {
         toggleColumnEditing("header");
       }
     };
     $[5] = toggleColumnEditing;
-    $[6] = t2;
+    $[6] = t1;
   } else {
-    t2 = $[6];
+    t1 = $[6];
   }
-  const handleTheadClick = t2;
-  let t3;
+  const handleTheadClick = t1;
+  let t2;
   if ($[7] !== toggleColumnEditing) {
-    t3 = () => {
+    t2 = () => {
       toggleColumnEditing("edit-button");
     };
     $[7] = toggleColumnEditing;
-    $[8] = t3;
+    $[8] = t2;
   } else {
-    t3 = $[8];
+    t2 = $[8];
   }
-  const handleEditColumnsButtonClick = t3;
+  const handleEditColumnsButtonClick = t2;
+  const reorderContextValue = useReorderLayoutContextValue();
   if (noHeader) {
     return null;
   }
-  const t4 = effectiveColumnEditing && styles.theadColumnEditing;
-  const t5 = stickyHeader && styles.stickyHeader;
-  let t6;
-  if ($[9] !== t4 || $[10] !== t5 || $[11] !== theadClassName) {
-    t6 = classNames(theadClassName, t4, t5);
-    $[9] = t4;
-    $[10] = t5;
+  const t3 = effectiveColumnEditing && styles.theadColumnEditing;
+  const t4 = stickyHeader && styles.stickyHeader;
+  let t5;
+  if ($[9] !== t3 || $[10] !== t4 || $[11] !== theadClassName) {
+    t5 = classNames(theadClassName, t3, t4);
+    $[9] = t3;
+    $[10] = t4;
     $[11] = theadClassName;
-    $[12] = t6;
+    $[12] = t5;
   } else {
-    t6 = $[12];
+    t5 = $[12];
   }
-  let t7;
-  if ($[13] !== columns || $[14] !== effectiveColumnEditing || $[15] !== expectColumnReorder || $[16] !== handleEditColumnsButtonClick) {
-    let t8;
-    if ($[18] !== effectiveColumnEditing || $[19] !== expectColumnReorder || $[20] !== handleEditColumnsButtonClick) {
-      t8 = (column, columnIndex) => /*#__PURE__*/jsx(TableHeaderCell, {
+  let t6;
+  if ($[13] !== columns || $[14] !== effectiveColumnEditing || $[15] !== handleEditColumnsButtonClick) {
+    let t7;
+    if ($[17] !== effectiveColumnEditing || $[18] !== handleEditColumnsButtonClick) {
+      t7 = (column, columnIndex) => /*#__PURE__*/jsx(TableHeaderCell, {
         columnIndex: columnIndex,
         columnEditing: effectiveColumnEditing,
-        handleEditColumnsButtonClick: handleEditColumnsButtonClick,
-        expectColumnReorder: expectColumnReorder
+        handleEditColumnsButtonClick: handleEditColumnsButtonClick
       }, column.key);
-      $[18] = effectiveColumnEditing;
-      $[19] = expectColumnReorder;
-      $[20] = handleEditColumnsButtonClick;
-      $[21] = t8;
+      $[17] = effectiveColumnEditing;
+      $[18] = handleEditColumnsButtonClick;
+      $[19] = t7;
     } else {
-      t8 = $[21];
+      t7 = $[19];
     }
-    t7 = columns.map(t8);
+    t6 = columns.map(t7);
     $[13] = columns;
     $[14] = effectiveColumnEditing;
-    $[15] = expectColumnReorder;
-    $[16] = handleEditColumnsButtonClick;
-    $[17] = t7;
+    $[15] = handleEditColumnsButtonClick;
+    $[16] = t6;
   } else {
-    t7 = $[17];
+    t6 = $[16];
+  }
+  let t7;
+  if ($[20] !== reorderContextValue || $[21] !== t6) {
+    t7 = /*#__PURE__*/jsx(ReorderLayoutContext, {
+      value: reorderContextValue,
+      children: t6
+    });
+    $[20] = reorderContextValue;
+    $[21] = t6;
+    $[22] = t7;
+  } else {
+    t7 = $[22];
   }
   let t8;
-  if ($[22] !== t7 || $[23] !== theadTrClassName) {
+  if ($[23] !== t7 || $[24] !== theadTrClassName) {
     t8 = /*#__PURE__*/jsx("tr", {
       className: theadTrClassName,
       children: t7
     });
-    $[22] = t7;
-    $[23] = theadTrClassName;
-    $[24] = t8;
+    $[23] = t7;
+    $[24] = theadTrClassName;
+    $[25] = t8;
   } else {
-    t8 = $[24];
+    t8 = $[25];
   }
   let t9;
-  if ($[25] !== handleTheadClick || $[26] !== t6 || $[27] !== t8) {
+  if ($[26] !== handleTheadClick || $[27] !== t5 || $[28] !== t8) {
     t9 = /*#__PURE__*/jsx("thead", {
-      className: t6,
+      className: t5,
       onClick: handleTheadClick,
       children: t8
     });
-    $[25] = handleTheadClick;
-    $[26] = t6;
-    $[27] = t8;
-    $[28] = t9;
+    $[26] = handleTheadClick;
+    $[27] = t5;
+    $[28] = t8;
+    $[29] = t9;
   } else {
-    t9 = $[28];
+    t9 = $[29];
   }
   return t9;
 }
 function TableHeaderCell(t0) {
-  const $ = c(41);
-  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
-    for (let $i = 0; $i < 41; $i += 1) {
+  const $ = c(43);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 43; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
   }
   const {
     columnIndex,
     columnEditing,
-    handleEditColumnsButtonClick,
-    expectColumnReorder
+    handleEditColumnsButtonClick
   } = t0;
+  const ref = useRef(null);
   const {
     columns,
     columnEditButton
@@ -182,7 +194,9 @@ function TableHeaderCell(t0) {
     canReorder,
     thClassName
   } = columns[columnIndex];
-  const animatedColumn = use(ColumnAnimationContext);
+  const {
+    reorderAnimation
+  } = use(ReorderAnimationContext);
   let t1;
   if ($[1] !== key || $[2] !== name || $[3] !== renderHeader) {
     t1 = renderHeader ? renderHeader() : name !== null && name !== void 0 ? name : String(key);
@@ -194,138 +208,163 @@ function TableHeaderCell(t0) {
     t1 = $[4];
   }
   const children = t1;
-  const t2 = animatedColumn?.columnIndex === columnIndex && animatedColumn.cellClassName;
-  let t3;
-  if ($[5] !== t2 || $[6] !== thClassName) {
-    t3 = classNames(styles.headerCell, t2, thClassName);
+  let t2;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = () => {
+      var _r$left, _r$right;
+      const r = ref.current?.getBoundingClientRect();
+      return {
+        start: (_r$left = r?.left) !== null && _r$left !== void 0 ? _r$left : 0,
+        end: (_r$right = r?.right) !== null && _r$right !== void 0 ? _r$right : 0
+      };
+    };
     $[5] = t2;
-    $[6] = thClassName;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== columnIndex) {
+    t3 = {
+      index: columnIndex,
+      getBounds: t2
+    };
+    $[6] = columnIndex;
     $[7] = t3;
   } else {
     t3 = $[7];
   }
-  let t4;
-  if ($[8] !== canReorder || $[9] !== columnIndex || $[10] !== expectColumnReorder) {
-    t4 = canReorder && /*#__PURE__*/jsx(ColumnReorderHandle, {
-      columnIndex: columnIndex,
-      expectColumnReorder: expectColumnReorder
+  useReorderItemLayout(t3);
+  const t4 = reorderAnimation?.direction === "columns" && reorderAnimation.index === columnIndex && reorderAnimation.className;
+  let t5;
+  if ($[8] !== t4 || $[9] !== thClassName) {
+    t5 = classNames(styles.headerCell, t4, thClassName);
+    $[8] = t4;
+    $[9] = thClassName;
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== canReorder || $[12] !== columnIndex) {
+    t6 = canReorder && /*#__PURE__*/jsx(ColumnReorderHandle, {
+      columnIndex: columnIndex
     });
-    $[8] = canReorder;
-    $[9] = columnIndex;
-    $[10] = expectColumnReorder;
-    $[11] = t4;
+    $[11] = canReorder;
+    $[12] = columnIndex;
+    $[13] = t6;
   } else {
-    t4 = $[11];
+    t6 = $[13];
   }
-  let t5;
-  if ($[12] !== children || $[13] !== columnIndex || $[14] !== sortOrder) {
-    t5 = sortOrder ? /*#__PURE__*/jsx(SortButton, {
+  let t7;
+  if ($[14] !== children || $[15] !== columnIndex || $[16] !== sortOrder) {
+    t7 = sortOrder ? /*#__PURE__*/jsx(SortButton, {
       columnIndex: columnIndex,
       "aria-description": `Sort order: ${sortOrder}`,
       children: children
     }) : children;
-    $[12] = children;
-    $[13] = columnIndex;
-    $[14] = sortOrder;
-    $[15] = t5;
+    $[14] = children;
+    $[15] = columnIndex;
+    $[16] = sortOrder;
+    $[17] = t7;
   } else {
-    t5 = $[15];
+    t7 = $[17];
   }
-  let t6;
-  if ($[16] !== canReorder) {
-    t6 = canReorder && /*#__PURE__*/jsx(ColumnReorderHandleMirror, {});
-    $[16] = canReorder;
-    $[17] = t6;
+  let t8;
+  if ($[18] !== canReorder) {
+    t8 = canReorder && /*#__PURE__*/jsx(ColumnReorderHandleMirror, {});
+    $[18] = canReorder;
+    $[19] = t8;
   } else {
-    t6 = $[17];
+    t8 = $[19];
   }
-  let t7;
-  if ($[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
-    t7 = /*#__PURE__*/jsxs("div", {
+  let t9;
+  if ($[20] !== t6 || $[21] !== t7 || $[22] !== t8) {
+    t9 = /*#__PURE__*/jsxs("div", {
       className: styles.sortAndHeader,
-      children: [t4, t5, t6]
+      children: [t6, t7, t8]
     });
-    $[18] = t4;
-    $[19] = t5;
     $[20] = t6;
     $[21] = t7;
+    $[22] = t8;
+    $[23] = t9;
   } else {
-    t7 = $[21];
+    t9 = $[23];
   }
-  let t8;
-  if ($[22] !== columnIndex || $[23] !== deletable) {
-    t8 = deletable && /*#__PURE__*/jsx(DeleteColumnButton, {
+  let t10;
+  if ($[24] !== columnIndex || $[25] !== deletable) {
+    t10 = deletable && /*#__PURE__*/jsx(DeleteColumnButton, {
       columnIndex: columnIndex
     });
-    $[22] = columnIndex;
-    $[23] = deletable;
-    $[24] = t8;
+    $[24] = columnIndex;
+    $[25] = deletable;
+    $[26] = t10;
   } else {
-    t8 = $[24];
+    t10 = $[26];
   }
-  let t9;
-  if ($[25] !== columnEditButton || $[26] !== columnEditing || $[27] !== columnIndex || $[28] !== columns.length || $[29] !== handleEditColumnsButtonClick) {
-    t9 = columnIndex === columns.length - 1 && columnEditButton && /*#__PURE__*/jsx(EditColumnsButton, {
+  let t11;
+  if ($[27] !== columnEditButton || $[28] !== columnEditing || $[29] !== columnIndex || $[30] !== columns.length || $[31] !== handleEditColumnsButtonClick) {
+    t11 = columnIndex === columns.length - 1 && columnEditButton && /*#__PURE__*/jsx(EditColumnsButton, {
       columnEditing: columnEditing,
       onClick: handleEditColumnsButtonClick
     });
-    $[25] = columnEditButton;
-    $[26] = columnEditing;
-    $[27] = columnIndex;
-    $[28] = columns.length;
-    $[29] = handleEditColumnsButtonClick;
-    $[30] = t9;
+    $[27] = columnEditButton;
+    $[28] = columnEditing;
+    $[29] = columnIndex;
+    $[30] = columns.length;
+    $[31] = handleEditColumnsButtonClick;
+    $[32] = t11;
   } else {
-    t9 = $[30];
+    t11 = $[32];
   }
-  let t10;
-  if ($[31] !== t8 || $[32] !== t9) {
-    t10 = /*#__PURE__*/jsxs("div", {
+  let t12;
+  if ($[33] !== t10 || $[34] !== t11) {
+    t12 = /*#__PURE__*/jsxs("div", {
       className: styles.rightButtons,
-      children: [t8, t9]
+      children: [t10, t11]
     });
-    $[31] = t8;
-    $[32] = t9;
     $[33] = t10;
+    $[34] = t11;
+    $[35] = t12;
   } else {
-    t10 = $[33];
+    t12 = $[35];
   }
-  let t11;
-  if ($[34] !== t10 || $[35] !== t7) {
-    t11 = /*#__PURE__*/jsxs("div", {
+  let t13;
+  if ($[36] !== t12 || $[37] !== t9) {
+    t13 = /*#__PURE__*/jsxs("div", {
       className: styles.headerCellInnerWrapper,
-      children: [t7, t10]
+      children: [t9, t12]
     });
-    $[34] = t10;
-    $[35] = t7;
-    $[36] = t11;
+    $[36] = t12;
+    $[37] = t9;
+    $[38] = t13;
   } else {
-    t11 = $[36];
+    t13 = $[38];
   }
-  let t12;
-  if ($[37] !== sortOrder || $[38] !== t11 || $[39] !== t3) {
-    t12 = /*#__PURE__*/jsx("th", {
-      className: t3,
+  let t14;
+  if ($[39] !== sortOrder || $[40] !== t13 || $[41] !== t5) {
+    t14 = /*#__PURE__*/jsx("th", {
+      ref: ref,
+      className: t5,
       scope: "col",
       "aria-sort": sortOrder,
-      children: t11
+      children: t13
     });
-    $[37] = sortOrder;
-    $[38] = t11;
-    $[39] = t3;
-    $[40] = t12;
+    $[39] = sortOrder;
+    $[40] = t13;
+    $[41] = t5;
+    $[42] = t14;
   } else {
-    t12 = $[40];
+    t14 = $[42];
   }
-  return t12;
+  return t14;
 }
 function SortButton(t0) {
   const $ = c(22);
-  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
     for (let $i = 0; $i < 22; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
   }
   let children;
   let className;
@@ -380,7 +419,7 @@ function SortButton(t0) {
   }
   let t2;
   if ($[12] !== className) {
-    t2 = classNames(styles.headerButton, className);
+    t2 = classNames(styles.tableButton, className);
     $[12] = className;
     $[13] = t2;
   } else {
@@ -420,11 +459,11 @@ function SortButton(t0) {
 function DeleteColumnButton(t0) {
   var _column$name;
   const $ = c(18);
-  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
     for (let $i = 0; $i < 18; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
   }
   let className;
   let columnIndex;
@@ -455,7 +494,8 @@ function DeleteColumnButton(t0) {
     t1 = e => {
       onClick?.(e);
       if (!e.defaultPrevented) {
-        tableProps.onColumnDelete?.(columnIndex, tableProps.columns);
+        const columns = tableProps.columns;
+        tableProps.onColumnDelete?.(columns[columnIndex], columnIndex, columns);
       }
     };
     $[6] = columnIndex;
@@ -472,7 +512,7 @@ function DeleteColumnButton(t0) {
   const hint = `Delete column ${(_column$name = column.name) !== null && _column$name !== void 0 ? _column$name : String(column.key)}.`;
   let t2;
   if ($[10] !== className) {
-    t2 = classNames(styles.headerButton, styles.deleteColumnButton, className);
+    t2 = classNames(styles.tableButton, styles.deleteColumnButton, className);
     $[10] = className;
     $[11] = t2;
   } else {
@@ -511,11 +551,11 @@ function DeleteColumnButton(t0) {
 }
 function EditColumnsButton(t0) {
   const $ = c(14);
-  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
     for (let $i = 0; $i < 14; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
   }
   let columnEditing;
   let hint;
@@ -535,7 +575,7 @@ function EditColumnsButton(t0) {
     restProps = t4;
     hint = columnEditing ? "Hide column controls." : "Show column controls.";
     t1 = "button";
-    t2 = classNames(styles.headerButton, styles.editColumnsButton, className);
+    t2 = classNames(styles.tableButton, styles.editColumnsButton, className);
     $[1] = t0;
     $[2] = columnEditing;
     $[3] = hint;
@@ -582,516 +622,52 @@ function EditColumnsButton(t0) {
   return t4;
 }
 function ColumnReorderHandle(t0) {
-  var _column$name2;
-  const $ = c(59);
-  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
-    for (let $i = 0; $i < 59; $i += 1) {
+  const $ = c(7);
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
+    for (let $i = 0; $i < 7; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
   }
-  let className;
   let columnIndex;
-  let expectColumnReorder;
-  let onKeyDown;
-  let onLostPointerCapture;
-  let onPointerCancel;
-  let onPointerDown;
-  let onPointerMove;
-  let onPointerUp;
   let restProps;
-  let userRef;
   if ($[1] !== t0) {
     ({
       columnIndex,
-      expectColumnReorder,
-      ref: userRef,
-      className,
-      onPointerDown,
-      onPointerMove,
-      onPointerUp,
-      onPointerCancel,
-      onLostPointerCapture,
-      onKeyDown,
       ...restProps
     } = t0);
     $[1] = t0;
-    $[2] = className;
-    $[3] = columnIndex;
-    $[4] = expectColumnReorder;
-    $[5] = onKeyDown;
-    $[6] = onLostPointerCapture;
-    $[7] = onPointerCancel;
-    $[8] = onPointerDown;
-    $[9] = onPointerMove;
-    $[10] = onPointerUp;
-    $[11] = restProps;
-    $[12] = userRef;
+    $[2] = columnIndex;
+    $[3] = restProps;
   } else {
-    className = $[2];
-    columnIndex = $[3];
-    expectColumnReorder = $[4];
-    onKeyDown = $[5];
-    onLostPointerCapture = $[6];
-    onPointerCancel = $[7];
-    onPointerDown = $[8];
-    onPointerMove = $[9];
-    onPointerUp = $[10];
-    restProps = $[11];
-    userRef = $[12];
+    columnIndex = $[2];
+    restProps = $[3];
   }
-  const tableProps = use(TablePropsContext);
-  const column = tableProps?.columns[columnIndex];
-  const canReorder = column?.canReorder;
   let t1;
-  if ($[13] !== canReorder || $[14] !== tableProps) {
-    t1 = index => canReorder === true || typeof canReorder === "function" && canReorder(index, tableProps.columns);
-    $[13] = canReorder;
-    $[14] = tableProps;
-    $[15] = t1;
-  } else {
-    t1 = $[15];
-  }
-  const canReorderCb = t1;
-  const localRef = useRef(null);
-  const composedRef = useComposedRef(localRef, userRef);
-  const activeDragRef = useRef(null);
-  const getDragFrame = _temp;
-  let t2;
-  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = clientX => {
-      const {
-        startColumnIndex,
-        startClientX,
-        headerTopClientY,
-        columnsClientX,
-        indicatorHeight
-      } = activeDragRef.current;
-      const {
-        l,
-        r
-      } = columnsClientX[startColumnIndex];
-      let dragFrame = getDragFrame();
-      if (!dragFrame) {
-        dragFrame = document.createElement("div");
-        dragFrame.className = styles.columnDragFrame;
-        dragFrame.style.setProperty("top", `calc(max(0px, ${headerTopClientY - 2}px))`);
-        dragFrame.style.setProperty("width", `${r - l}px`);
-        dragFrame.style.setProperty("height", indicatorHeight);
-        document.body.appendChild(dragFrame);
-      }
-      dragFrame.style.setProperty("left", `${l + clientX - startClientX}px`);
-    };
-    $[16] = t2;
-  } else {
-    t2 = $[16];
-  }
-  const renderDragFrame = t2;
-  let t3;
-  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = clientX_0 => {
-      if (!localRef.current || !activeDragRef.current) {
-        return;
-      }
-      const {
-        startClientX: startClientX_0
-      } = activeDragRef.current;
-      localRef.current.style.setProperty("transform", `translateX(${clientX_0 - startClientX_0}px)`);
-    };
-    $[17] = t3;
-  } else {
-    t3 = $[17];
-  }
-  const translateXButton = t3;
-  let t4;
-  if ($[18] !== canReorderCb) {
-    t4 = clientX_1 => {
-      let bestDistance = Infinity;
-      let index_0 = -1;
-      let after = false;
-      activeDragRef.current?.columnsClientX.forEach((t5, i) => {
-        const {
-          l: l_0,
-          r: r_0
-        } = t5;
-        const distanceToLeft = Math.abs(l_0 - clientX_1);
-        const distanceToRight = Math.abs(r_0 - clientX_1);
-        if (distanceToLeft < bestDistance && canReorderCb(i)) {
-          bestDistance = distanceToLeft;
-          index_0 = i;
-          after = false;
-        }
-        if (distanceToRight < bestDistance && canReorderCb(i + 1)) {
-          bestDistance = distanceToRight;
-          index_0 = i;
-          after = true;
-        }
-      });
-      return {
-        index: index_0,
-        after
-      };
-    };
-    $[18] = canReorderCb;
-    $[19] = t4;
-  } else {
-    t4 = $[19];
-  }
-  const getClosestInsertionPoint = t4;
-  const getInsertionIndicator = _temp2;
-  let t5;
-  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
-    t5 = insertionPoint => {
-      const {
-        index: index_1,
-        after: after_0
-      } = insertionPoint;
-      const {
-        headerTopClientY: headerTopClientY_0,
-        columnsClientX: columnsClientX_0,
-        indicatorHeight: indicatorHeight_0
-      } = activeDragRef.current;
-      const {
-        l: l_1,
-        r: r_1
-      } = columnsClientX_0[index_1];
-      let indicator = getInsertionIndicator();
-      if (!indicator) {
-        indicator = document.createElement("div");
-        indicator.className = styles.columnInsertionIndicator;
-        indicator.style.setProperty("top", `${headerTopClientY_0}px`);
-        indicator.style.setProperty("height", indicatorHeight_0);
-        document.body.appendChild(indicator);
-      }
-      indicator.style.setProperty("left", `${(after_0 ? r_1 : l_1) - 1}px`);
-    };
-    $[20] = t5;
-  } else {
-    t5 = $[20];
-  }
-  const renderInsertionIndicator = t5;
-  let t6;
-  if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
-    t6 = () => {
-      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();
-    };
-    $[21] = t6;
-  } else {
-    t6 = $[21];
-  }
-  const cleanupDrag = t6;
-  let t7;
-  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = () => {
-      if (activeDragRef.current?.state === "is-dragging") {
-        activeDragRef.current.state = "ended-with-no-change";
-        activeDragRef.current.cleanup();
-        activeDragRef.current.cleanup = _temp3;
-        const dragFrame_0 = getDragFrame();
-        if (dragFrame_0) {
-          const {
-            columnsClientX: columnsClientX_1,
-            startColumnIndex: startColumnIndex_0
-          } = activeDragRef.current;
-          dragFrame_0.style.left = `${columnsClientX_1[startColumnIndex_0].l}px`;
-          dragFrame_0.style.opacity = "0";
-          dragFrame_0.style.transition = "left var(--ring-ease), opacity var(--ring-ease)";
-        }
-        const indicator_0 = getInsertionIndicator();
-        if (indicator_0) {
-          indicator_0.style.opacity = "0";
-          indicator_0.style.transition = "opacity var(--ring-ease)";
-        }
-        const btn_0 = localRef.current;
-        if (btn_0) {
-          btn_0.style.transform = "translateX(0)";
-          btn_0.style.transition = "transform var(--ring-ease)";
-        }
-      }
-      const ringEaseMs = parseCssDuration(window.getComputedStyle(document.documentElement).getPropertyValue("--ring-ease"));
-      setTimeout(cleanupDrag, ringEaseMs);
-    };
-    $[22] = t7;
-  } else {
-    t7 = $[22];
-  }
-  const animateNoChangeThenCleanup = t7;
-  let t8;
-  if ($[23] !== columnIndex || $[24] !== onPointerDown) {
-    t8 = e => {
-      onPointerDown?.(e);
-      if (e.defaultPrevented) {
-        return;
-      }
-      const {
-        clientX: startClientX_1,
-        pointerId,
-        currentTarget
-      } = e;
-      const thead = currentTarget.closest("thead");
-      const table = thead?.closest("table");
-      if (!thead || !table) {
-        return;
-      }
-      const headerTopClientY_1 = thead.getBoundingClientRect().top;
-      const columnsClientX_2 = [...thead.querySelectorAll("th")].map(_temp4);
-      const {
-        bottom
-      } = table.getBoundingClientRect();
-      const visibleTableHeight = bottom - headerTopClientY_1;
-      const viewportBottomRelativeToHeaderTop = window.innerHeight - headerTopClientY_1;
-      const indicatorHeight_1 = `min(${visibleTableHeight}px, calc(${viewportBottomRelativeToHeaderTop}px - .5rem))`;
-      currentTarget.setPointerCapture(pointerId);
-      const keydownListener = function keydownListener(keyEvent) {
-        if (keyEvent.key === "Escape") {
-          animateNoChangeThenCleanup();
-          keyEvent.stopPropagation();
-          keyEvent.preventDefault();
-        }
-      };
-      document.addEventListener("keydown", keydownListener);
-      currentTarget.style.cursor = "grabbing";
-      activeDragRef.current = {
-        state: "is-dragging",
-        startColumnIndex: columnIndex,
-        startClientX: startClientX_1,
-        headerTopClientY: headerTopClientY_1,
-        columnsClientX: columnsClientX_2,
-        indicatorHeight: indicatorHeight_1,
-        cleanup: () => {
-          document.removeEventListener("keydown", keydownListener);
-          currentTarget.releasePointerCapture(pointerId);
-          currentTarget.style.removeProperty("cursor");
-        }
-      };
-      renderDragFrame(startClientX_1);
-      e.preventDefault();
-    };
-    $[23] = columnIndex;
-    $[24] = onPointerDown;
-    $[25] = t8;
-  } else {
-    t8 = $[25];
-  }
-  const handlePointerDown = t8;
-  let t9;
-  if ($[26] !== getClosestInsertionPoint || $[27] !== onPointerMove) {
-    t9 = e_0 => {
-      onPointerMove?.(e_0);
-      if (e_0.defaultPrevented || activeDragRef.current?.state !== "is-dragging") {
-        return;
-      }
-      const {
-        clientX: clientX_2
-      } = e_0;
-      renderDragFrame(clientX_2);
-      translateXButton(clientX_2);
-      const insertionPoint_0 = getClosestInsertionPoint(clientX_2);
-      if (insertionPoint_0) {
-        renderInsertionIndicator(insertionPoint_0);
-      }
-    };
-    $[26] = getClosestInsertionPoint;
-    $[27] = onPointerMove;
-    $[28] = t9;
-  } else {
-    t9 = $[28];
-  }
-  const handlePointerMove = t9;
-  let t10;
-  if ($[29] !== columnIndex || $[30] !== expectColumnReorder || $[31] !== getClosestInsertionPoint || $[32] !== onPointerUp || $[33] !== tableProps) {
-    t10 = e_1 => {
-      onPointerUp?.(e_1);
-      if (e_1.defaultPrevented || activeDragRef.current?.state !== "is-dragging") {
-        return;
-      }
-      const table_0 = e_1.currentTarget.closest("table");
-      if (!table_0) {
-        cleanupDrag();
-        return;
-      }
-      const {
-        index: index_2,
-        after: after_1
-      } = getClosestInsertionPoint(e_1.clientX);
-      const insertionIndex = after_1 ? index_2 + 1 : index_2;
-      if (insertionIndex === columnIndex || insertionIndex === columnIndex + 1) {
-        animateNoChangeThenCleanup();
-        return;
-      }
-      cleanupDrag();
-      expectColumnReorder({
-        fromIndex: columnIndex,
-        insertionIndex
-      });
-      tableProps.onColumnReorder?.(columnIndex, insertionIndex, tableProps.columns);
-    };
-    $[29] = columnIndex;
-    $[30] = expectColumnReorder;
-    $[31] = getClosestInsertionPoint;
-    $[32] = onPointerUp;
-    $[33] = tableProps;
-    $[34] = t10;
-  } else {
-    t10 = $[34];
-  }
-  const handlePointerUp = t10;
-  let t11;
-  if ($[35] !== onPointerCancel) {
-    t11 = e_2 => {
-      onPointerCancel?.(e_2);
-      if (e_2.defaultPrevented) {
-        return;
-      }
-      animateNoChangeThenCleanup();
-    };
-    $[35] = onPointerCancel;
-    $[36] = t11;
-  } else {
-    t11 = $[36];
-  }
-  const handlePointerCancel = t11;
-  let t12;
-  if ($[37] !== onLostPointerCapture) {
-    t12 = e_3 => {
-      onLostPointerCapture?.(e_3);
-      if (e_3.defaultPrevented) {
-        return;
-      }
-      animateNoChangeThenCleanup();
-    };
-    $[37] = onLostPointerCapture;
-    $[38] = t12;
-  } else {
-    t12 = $[38];
-  }
-  const handleLostPointerCapture = t12;
-  let t13;
-  if ($[39] !== canReorderCb || $[40] !== columnIndex || $[41] !== expectColumnReorder || $[42] !== onKeyDown || $[43] !== tableProps) {
-    t13 = e_4 => {
-      onKeyDown?.(e_4);
-      if (e_4.defaultPrevented || !tableProps) {
-        return;
-      }
-      const left = e_4.key === "ArrowLeft";
-      const right = e_4.key === "ArrowRight";
-      if (!left && !right) {
-        return;
-      }
-      const initialInsertionIndex = left ? columnIndex - 1 : columnIndex + 2;
-      const step = left ? -1 : 1;
-      for (let i_0 = initialInsertionIndex; 0 <= i_0 && i_0 <= tableProps.columns.length; i_0 = i_0 + step, i_0) {
-        if (canReorderCb(i_0)) {
-          expectColumnReorder({
-            fromIndex: columnIndex,
-            insertionIndex: i_0
-          });
-          tableProps.onColumnReorder?.(columnIndex, i_0, tableProps.columns);
-          e_4.preventDefault();
-          return;
-        }
-      }
-    };
-    $[39] = canReorderCb;
-    $[40] = columnIndex;
-    $[41] = expectColumnReorder;
-    $[42] = onKeyDown;
-    $[43] = tableProps;
-    $[44] = t13;
-  } else {
-    t13 = $[44];
-  }
-  const handleKeyDown = t13;
-  if (!tableProps || !column) {
-    return null;
-  }
-  const hint = `Reorder column ${(_column$name2 = column.name) !== null && _column$name2 !== void 0 ? _column$name2 : String(column.key)}.`;
-  let t14;
-  if ($[45] !== className) {
-    t14 = classNames(styles.headerButton, styles.columnReorderHandle, className);
-    $[45] = className;
-    $[46] = t14;
-  } else {
-    t14 = $[46];
-  }
-  let t15;
-  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
-    t15 = /*#__PURE__*/jsx(Icon, {
-      glyph: dragIcon,
-      "aria-hidden": "true"
-    });
-    $[47] = t15;
-  } else {
-    t15 = $[47];
-  }
-  let t16;
-  if ($[48] !== composedRef || $[49] !== handleKeyDown || $[50] !== handleLostPointerCapture || $[51] !== handlePointerCancel || $[52] !== handlePointerDown || $[53] !== handlePointerMove || $[54] !== handlePointerUp || $[55] !== hint || $[56] !== restProps || $[57] !== t14) {
-    t16 = /*#__PURE__*/jsx("button", {
-      ref: composedRef,
-      type: "button",
-      className: t14,
-      "aria-label": hint,
-      "aria-description": "Use Left and Right arrow keys to move the column.",
-      "aria-keyshortcuts": "ArrowLeft ArrowRight",
-      onKeyDown: handleKeyDown,
-      onPointerDown: handlePointerDown,
-      onPointerMove: handlePointerMove,
-      onPointerUp: handlePointerUp,
-      onPointerCancel: handlePointerCancel,
-      onLostPointerCapture: handleLostPointerCapture,
-      ...restProps,
-      children: t15
+  if ($[4] !== columnIndex || $[5] !== restProps) {
+    t1 = /*#__PURE__*/jsx(ReorderHandle, {
+      direction: "columns",
+      index: columnIndex,
+      ...restProps
     });
-    $[48] = composedRef;
-    $[49] = handleKeyDown;
-    $[50] = handleLostPointerCapture;
-    $[51] = handlePointerCancel;
-    $[52] = handlePointerDown;
-    $[53] = handlePointerMove;
-    $[54] = handlePointerUp;
-    $[55] = hint;
-    $[56] = restProps;
-    $[57] = t14;
-    $[58] = t16;
+    $[4] = columnIndex;
+    $[5] = restProps;
+    $[6] = t1;
   } else {
-    t16 = $[58];
+    t1 = $[6];
   }
-  return t16;
+  return t1;
 }
 /**
  * Reserves the space for the reorder handle and prevents layout shift when the handle appears on hover.
  */
-function _temp4(th) {
-  const rect = th.getBoundingClientRect();
-  return {
-    l: rect.x,
-    r: rect.x + rect.width
-  };
-}
-function _temp3() {}
-function _temp2() {
-  return document.body.querySelector(`.${styles.columnInsertionIndicator}`);
-}
-function _temp() {
-  return document.body.querySelector(`.${styles.columnDragFrame}`);
-}
 function ColumnReorderHandleMirror() {
   const $ = c(2);
-  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+  if ($[0] !== "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d") {
     for (let $i = 0; $i < 2; $i += 1) {
       $[$i] = Symbol.for("react.memo_cache_sentinel");
     }
-    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+    $[0] = "b3c0ce09616b10368937eafd2419f39baff21b41a15b2e7de8de6c88d493b96d";
   }
   let t0;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {