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

package/components/internal/reorder-handle.js

@@ -0,0 +1,750 @@
+import { c } from 'react/compiler-runtime';
+import { useRef, use, useEffectEvent, useEffect } from 'react';
+import classNames from 'classnames';
+import dragIcon from '@jetbrains/icons/drag-12px';
+import { TablePropsContext } from '../table/table-const.js';
+import Icon from '../icon/icon.js';
+import { useComposedRef } from '../global/compose-refs.js';
+import { parseCssDuration } from '../global/parse-css-duration.js';
+import { ReorderAnimationContext } from './reorder-animation-context.js';
+import { ReorderLayoutContext } from './reorder-layout-context.js';
+import { s as styles } from '../_helpers/table.js';
+import { jsx } from 'react/jsx-runtime';
+import 'util-deprecate';
+import '../icon/icon.constants.js';
+import '../_helpers/icon-svg.js';
+import '../global/memoize.js';
+import 'memoize-one';
+import '../global/schedule-with-cleanup.js';
+
+const columnDragFrameAdjustmentPx = -1;
+const itemDragFrameAdjustmentPx = -2;
+const scrollAreaPx = 100;
+const scrollStepPx = 100;
+const scrollIntervalMs = 200;
+function ReorderHandle(t0) {
+  var _columns$index$name;
+  const $ = c(117);
+  if ($[0] !== "4544842fd05f0c29d1fc5074a4df3120dd2baf71388dcaaf57c84e7cd83c8c63") {
+    for (let $i = 0; $i < 117; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "4544842fd05f0c29d1fc5074a4df3120dd2baf71388dcaaf57c84e7cd83c8c63";
+  }
+  let className;
+  let direction;
+  let index;
+  let noDragFrame;
+  let noHandleTranslate;
+  let onKeyDown;
+  let onLostPointerCapture;
+  let onPointerCancel;
+  let onPointerDown;
+  let onPointerMove;
+  let onPointerUp;
+  let onUserDrag;
+  let restProps;
+  let userRef;
+  if ($[1] !== t0) {
+    ({
+      direction,
+      index,
+      noDragFrame,
+      noHandleTranslate,
+      onUserDrag,
+      ref: userRef,
+      className,
+      onKeyDown,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      onLostPointerCapture,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = direction;
+    $[4] = index;
+    $[5] = noDragFrame;
+    $[6] = noHandleTranslate;
+    $[7] = onKeyDown;
+    $[8] = onLostPointerCapture;
+    $[9] = onPointerCancel;
+    $[10] = onPointerDown;
+    $[11] = onPointerMove;
+    $[12] = onPointerUp;
+    $[13] = onUserDrag;
+    $[14] = restProps;
+    $[15] = userRef;
+  } else {
+    className = $[2];
+    direction = $[3];
+    index = $[4];
+    noDragFrame = $[5];
+    noHandleTranslate = $[6];
+    onKeyDown = $[7];
+    onLostPointerCapture = $[8];
+    onPointerCancel = $[9];
+    onPointerDown = $[10];
+    onPointerMove = $[11];
+    onPointerUp = $[12];
+    onUserDrag = $[13];
+    restProps = $[14];
+    userRef = $[15];
+  }
+  const localRef = useRef(null);
+  const composedRef = useComposedRef(localRef, userRef);
+  const isColumn = direction === "columns";
+  const tableProps = use(TablePropsContext);
+  const data = tableProps?.data;
+  const columns = tableProps?.columns;
+  const canReorderItem = tableProps?.canReorderItem;
+  const onItemReorder = tableProps?.onItemReorder;
+  const onColumnReorder = tableProps?.onColumnReorder;
+  let t1;
+  if ($[16] !== canReorderItem || $[17] !== columns || $[18] !== data || $[19] !== index || $[20] !== isColumn) {
+    t1 = function canReorder(insertionIndex) {
+      const columnBeingReordered = columns?.[index];
+      if (isColumn && columnBeingReordered) {
+        const canReorderColumn = columnBeingReordered.canReorder;
+        if (canReorderColumn === true) {
+          return true;
+        }
+        if (typeof canReorderColumn === "function") {
+          return canReorderColumn(columnBeingReordered, index, insertionIndex, columns);
+        }
+        return false;
+      }
+      if (!isColumn && data) {
+        return canReorderItem ? canReorderItem(data[index], index, insertionIndex, data) : true;
+      }
+      return false;
+    };
+    $[16] = canReorderItem;
+    $[17] = columns;
+    $[18] = data;
+    $[19] = index;
+    $[20] = isColumn;
+    $[21] = t1;
+  } else {
+    t1 = $[21];
+  }
+  const canReorder = t1;
+  const {
+    expectReorder
+  } = use(ReorderAnimationContext);
+  let t2;
+  if ($[22] !== columns || $[23] !== data || $[24] !== direction || $[25] !== expectReorder || $[26] !== index || $[27] !== isColumn || $[28] !== onColumnReorder || $[29] !== onItemReorder) {
+    t2 = function onReorder(insertionIndex_0) {
+      if (isColumn && columns) {
+        expectReorder({
+          direction,
+          fromIndex: index,
+          insertionIndex: insertionIndex_0
+        });
+        onColumnReorder?.(columns[index], index, insertionIndex_0, columns);
+      } else {
+        if (!isColumn && data) {
+          expectReorder({
+            direction,
+            fromIndex: index,
+            insertionIndex: insertionIndex_0
+          });
+          onItemReorder?.(data[index], index, insertionIndex_0, data);
+        }
+      }
+    };
+    $[22] = columns;
+    $[23] = data;
+    $[24] = direction;
+    $[25] = expectReorder;
+    $[26] = index;
+    $[27] = isColumn;
+    $[28] = onColumnReorder;
+    $[29] = onItemReorder;
+    $[30] = t2;
+  } else {
+    t2 = $[30];
+  }
+  const onReorder = t2;
+  const activeDragRef = useRef(null);
+  let t3;
+  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = function getDragFrame() {
+      return document.body.querySelector(`.${styles.dragFrame}`);
+    };
+    $[31] = t3;
+  } else {
+    t3 = $[31];
+  }
+  const getDragFrame = t3;
+  let t4;
+  if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = function getInsertionIndicator() {
+      return document.body.querySelector(`.${styles.insertionIndicator}`);
+    };
+    $[32] = t4;
+  } else {
+    t4 = $[32];
+  }
+  const getInsertionIndicator = t4;
+  const {
+    getItemBounds,
+    getClosestInsertionPoint
+  } = use(ReorderLayoutContext);
+  let t5;
+  if ($[33] !== isColumn || $[34] !== noDragFrame) {
+    t5 = function renderDragFrame(clientX, clientY) {
+      const drag = activeDragRef.current;
+      if (noDragFrame || !drag) {
+        return;
+      }
+      const {
+        startX,
+        startY,
+        initialItemStart,
+        initialItemEnd,
+        indicatorStart,
+        indicatorSize
+      } = drag;
+      let dragFrame = getDragFrame();
+      if (!dragFrame) {
+        dragFrame = document.createElement("div");
+        dragFrame.className = styles.dragFrame;
+        const frameStart = `calc(max(0px, ${indicatorStart - 2}px))`;
+        const frameAcrossSize = `${initialItemEnd - initialItemStart}px`;
+        const frameAlongSize = indicatorSize;
+        dragFrame.style[isColumn ? "top" : "left"] = frameStart;
+        dragFrame.style[isColumn ? "width" : "height"] = frameAcrossSize;
+        dragFrame.style[isColumn ? "height" : "width"] = frameAlongSize;
+        document.body.appendChild(dragFrame);
+      }
+      if (isColumn) {
+        dragFrame.style.left = `${initialItemStart + clientX - startX + columnDragFrameAdjustmentPx}px`;
+      } else {
+        dragFrame.style.top = `${initialItemStart + clientY - startY + itemDragFrameAdjustmentPx}px`;
+      }
+    };
+    $[33] = isColumn;
+    $[34] = noDragFrame;
+    $[35] = t5;
+  } else {
+    t5 = $[35];
+  }
+  const renderDragFrame = t5;
+  let t6;
+  if ($[36] !== getItemBounds || $[37] !== index || $[38] !== isColumn || $[39] !== noHandleTranslate) {
+    t6 = function translateButton(clientX_0, clientY_0) {
+      var _getItemBounds;
+      const btn = localRef.current;
+      const drag_0 = activeDragRef.current;
+      if (noHandleTranslate || !btn || !drag_0) {
+        return;
+      }
+      const {
+        startX: startX_0,
+        startY: startY_0,
+        initialItemStart: initialItemStart_0
+      } = drag_0;
+      const offsetByPointerMove = isColumn ? clientX_0 - startX_0 : clientY_0 - startY_0;
+      const {
+        start: itemStart
+      } = (_getItemBounds = getItemBounds(index)) !== null && _getItemBounds !== void 0 ? _getItemBounds : {
+        start: 0};
+      const offsetByItemMove = itemStart - initialItemStart_0;
+      const offset = offsetByPointerMove - offsetByItemMove;
+      btn.style.transform = isColumn ? `translateX(${offset}px)` : `translateY(${offset}px)`;
+    };
+    $[36] = getItemBounds;
+    $[37] = index;
+    $[38] = isColumn;
+    $[39] = noHandleTranslate;
+    $[40] = t6;
+  } else {
+    t6 = $[40];
+  }
+  const translateButton = t6;
+  let t7;
+  if ($[41] !== canReorder || $[42] !== getClosestInsertionPoint || $[43] !== isColumn) {
+    t7 = function getClosestInsertionPointLocal(clientX_1, clientY_1) {
+      const clientOffset = isColumn ? clientX_1 : clientY_1;
+      return getClosestInsertionPoint(clientOffset, canReorder);
+    };
+    $[41] = canReorder;
+    $[42] = getClosestInsertionPoint;
+    $[43] = isColumn;
+    $[44] = t7;
+  } else {
+    t7 = $[44];
+  }
+  const getClosestInsertionPointLocal = t7;
+  let t8;
+  if ($[45] !== getItemBounds || $[46] !== isColumn) {
+    t8 = function renderInsertionIndicator(t9) {
+      const {
+        itemIndex,
+        after
+      } = t9;
+      const drag_1 = activeDragRef.current;
+      if (!drag_1) {
+        return;
+      }
+      const {
+        indicatorStart: indicatorStart_0,
+        indicatorSize: indicatorSize_0
+      } = drag_1;
+      const itemBounds = getItemBounds(itemIndex);
+      if (!itemBounds) {
+        return;
+      }
+      const {
+        start: itemStart_0,
+        end: itemEnd
+      } = itemBounds;
+      let indicator = getInsertionIndicator();
+      if (!indicator) {
+        indicator = document.createElement("div");
+        indicator.className = styles.insertionIndicator;
+        indicator.style[isColumn ? "top" : "left"] = `${indicatorStart_0}px`;
+        indicator.style[isColumn ? "height" : "width"] = indicatorSize_0;
+        indicator.style[isColumn ? "width" : "height"] = "2px";
+        document.body.appendChild(indicator);
+      }
+      const itemOffset = `${(after ? itemEnd : itemStart_0) - 1}px`;
+      indicator.style[isColumn ? "left" : "top"] = itemOffset;
+    };
+    $[45] = getItemBounds;
+    $[46] = isColumn;
+    $[47] = t8;
+  } else {
+    t8 = $[47];
+  }
+  const renderInsertionIndicator = t8;
+  let t9;
+  if ($[48] !== onUserDrag) {
+    t9 = function cleanupDrag() {
+      if (activeDragRef.current) {
+        activeDragRef.current.cleanup();
+        activeDragRef.current = null;
+      }
+      const btn_0 = localRef.current;
+      if (btn_0) {
+        btn_0.style.removeProperty("transform");
+        btn_0.style.removeProperty("transition");
+      }
+      getDragFrame()?.remove();
+      getInsertionIndicator()?.remove();
+      onUserDrag?.(undefined);
+    };
+    $[48] = onUserDrag;
+    $[49] = t9;
+  } else {
+    t9 = $[49];
+  }
+  const cleanupDrag = t9;
+  let t10;
+  if ($[50] !== cleanupDrag || $[51] !== isColumn || $[52] !== onUserDrag) {
+    t10 = function animateNoChangeThenCleanup() {
+      const drag_2 = activeDragRef.current;
+      if (drag_2?.state !== "is-dragging") {
+        return;
+      }
+      drag_2.state = "ended-with-no-change";
+      drag_2.cleanup();
+      drag_2.cleanup = _temp;
+      const dragFrame_0 = getDragFrame();
+      if (dragFrame_0) {
+        const {
+          initialItemStart: initialItemStart_1
+        } = drag_2;
+        if (isColumn) {
+          dragFrame_0.style.left = `${initialItemStart_1 + columnDragFrameAdjustmentPx}px`;
+        } else {
+          dragFrame_0.style.top = `${initialItemStart_1 + itemDragFrameAdjustmentPx}px`;
+        }
+        dragFrame_0.style.transition = "left var(--ring-ease), top var(--ring-ease), opacity var(--ring-ease)";
+        dragFrame_0.style.opacity = "0";
+      }
+      const indicator_0 = getInsertionIndicator();
+      if (indicator_0) {
+        indicator_0.style.opacity = "0";
+        indicator_0.style.transition = "opacity var(--ring-ease)";
+      }
+      const btn_1 = localRef.current;
+      if (btn_1) {
+        btn_1.style.transform = isColumn ? "translateX(0)" : "translateY(0)";
+        btn_1.style.transition = "transform var(--ring-ease)";
+      }
+      onUserDrag?.("cancelled");
+      const ringEaseMs = parseCssDuration(window.getComputedStyle(document.documentElement).getPropertyValue("--ring-ease"));
+      setTimeout(cleanupDrag, ringEaseMs);
+    };
+    $[50] = cleanupDrag;
+    $[51] = isColumn;
+    $[52] = onUserDrag;
+    $[53] = t10;
+  } else {
+    t10 = $[53];
+  }
+  const animateNoChangeThenCleanup = t10;
+  let t11;
+  if ($[54] !== animateNoChangeThenCleanup || $[55] !== getItemBounds || $[56] !== index || $[57] !== isColumn || $[58] !== onPointerDown || $[59] !== onUserDrag || $[60] !== renderDragFrame) {
+    t11 = function handlePointerDown(e) {
+      var _getItemBounds2;
+      onPointerDown?.(e);
+      if (e.defaultPrevented) {
+        return;
+      }
+      const {
+        clientX: clientX_2,
+        clientY: clientY_2,
+        pointerId,
+        currentTarget
+      } = e;
+      const {
+        start: initialItemStart_2,
+        end: initialItemEnd_0
+      } = (_getItemBounds2 = getItemBounds(index)) !== null && _getItemBounds2 !== void 0 ? _getItemBounds2 : {
+        start: 0,
+        end: 0
+      };
+      let indicatorStart_1;
+      let indicatorSize_1;
+      if (isColumn) {
+        const thead = currentTarget.closest("thead");
+        const table = thead?.closest("table");
+        if (!thead || !table) {
+          return;
+        }
+        const {
+          top: headerTop
+        } = thead.getBoundingClientRect();
+        indicatorStart_1 = headerTop;
+        const {
+          bottom: tableBottom
+        } = table.getBoundingClientRect();
+        const visibleTableHeight = tableBottom - headerTop;
+        const viewportBottomRelativeToHeaderTop = window.innerHeight - headerTop;
+        indicatorSize_1 = `min(${visibleTableHeight}px, calc(${viewportBottomRelativeToHeaderTop}px - .5rem))`;
+      } else {
+        const tr = currentTarget.closest("tr");
+        const tbody = tr?.closest("tbody");
+        if (!tr || !tbody) {
+          return;
+        }
+        const {
+          left: itemLeft,
+          right: itemRight
+        } = tr.getBoundingClientRect();
+        indicatorStart_1 = itemLeft;
+        const visibleItemWidth = itemRight - itemLeft;
+        const viewportRightRelativeToTableLeft = window.innerWidth - itemLeft;
+        indicatorSize_1 = `min(${visibleItemWidth}px, calc(${viewportRightRelativeToTableLeft}px - .5rem))`;
+      }
+      const keydownListener = function keydownListener(keyEvent) {
+        if (keyEvent.key === "Escape") {
+          animateNoChangeThenCleanup();
+          keyEvent.stopPropagation();
+          keyEvent.preventDefault();
+        }
+      };
+      currentTarget.setPointerCapture(pointerId);
+      document.addEventListener("keydown", keydownListener);
+      currentTarget.style.cursor = "grabbing";
+      activeDragRef.current = {
+        state: "is-dragging",
+        startX: clientX_2,
+        startY: clientY_2,
+        initialItemStart: initialItemStart_2,
+        initialItemEnd: initialItemEnd_0,
+        indicatorStart: indicatorStart_1,
+        indicatorSize: indicatorSize_1,
+        cleanup: () => {
+          currentTarget.releasePointerCapture(pointerId);
+          document.removeEventListener("keydown", keydownListener);
+          currentTarget.style.removeProperty("cursor");
+        }
+      };
+      renderDragFrame(clientX_2, clientY_2);
+      onUserDrag?.("pointerdown");
+      e.preventDefault();
+    };
+    $[54] = animateNoChangeThenCleanup;
+    $[55] = getItemBounds;
+    $[56] = index;
+    $[57] = isColumn;
+    $[58] = onPointerDown;
+    $[59] = onUserDrag;
+    $[60] = renderDragFrame;
+    $[61] = t11;
+  } else {
+    t11 = $[61];
+  }
+  const handlePointerDown = t11;
+  const scrollerRef = tableProps?.scrollerRef;
+  const lastScrolledRef = useRef(0);
+  let t12;
+  if ($[62] !== scrollerRef?.current) {
+    t12 = function scrollThrottled(scrollDirection) {
+      const now = performance.now();
+      if (now > lastScrolledRef.current + scrollIntervalMs) {
+        var _scrollerRef$current;
+        lastScrolledRef.current = now;
+        const top = scrollDirection === "up" ? -scrollStepPx : scrollStepPx;
+        const scroller = (_scrollerRef$current = scrollerRef?.current) !== null && _scrollerRef$current !== void 0 ? _scrollerRef$current : window;
+        scroller?.scrollBy({
+          top,
+          behavior: "smooth"
+        });
+      }
+    };
+    $[62] = scrollerRef?.current;
+    $[63] = t12;
+  } else {
+    t12 = $[63];
+  }
+  const scrollThrottled = t12;
+  let t13;
+  if ($[64] !== getClosestInsertionPointLocal || $[65] !== isColumn || $[66] !== onPointerMove || $[67] !== onUserDrag || $[68] !== renderDragFrame || $[69] !== renderInsertionIndicator || $[70] !== scrollThrottled || $[71] !== scrollerRef?.current || $[72] !== translateButton) {
+    t13 = function handlePointerMove(e_0) {
+      onPointerMove?.(e_0);
+      if (e_0.defaultPrevented) {
+        return;
+      }
+      const drag_3 = activeDragRef.current;
+      if (drag_3?.state !== "is-dragging") {
+        return;
+      }
+      const {
+        clientX: clientX_3,
+        clientY: clientY_3
+      } = e_0;
+      renderDragFrame(clientX_3, clientY_3);
+      translateButton(clientX_3, clientY_3);
+      const insertionPoint = getClosestInsertionPointLocal(clientX_3, clientY_3);
+      if (insertionPoint) {
+        renderInsertionIndicator(insertionPoint);
+      }
+      onUserDrag?.(isColumn ? clientX_3 - drag_3.startX : clientY_3 - drag_3.startY);
+      if (!isColumn) {
+        var _scrollerRect$top;
+        const scrollerRect = scrollerRef?.current?.getBoundingClientRect();
+        const scrollerTop = (_scrollerRect$top = scrollerRect?.top) !== null && _scrollerRect$top !== void 0 ? _scrollerRect$top : 0;
+        const scrollerBottom = scrollerRect ? Math.min(scrollerRect.bottom, window.innerHeight) : window.innerHeight;
+        if (clientY_3 < scrollerTop + scrollAreaPx) {
+          scrollThrottled("up");
+        } else {
+          if (clientY_3 > scrollerBottom - scrollAreaPx) {
+            scrollThrottled("down");
+          }
+        }
+      }
+    };
+    $[64] = getClosestInsertionPointLocal;
+    $[65] = isColumn;
+    $[66] = onPointerMove;
+    $[67] = onUserDrag;
+    $[68] = renderDragFrame;
+    $[69] = renderInsertionIndicator;
+    $[70] = scrollThrottled;
+    $[71] = scrollerRef?.current;
+    $[72] = translateButton;
+    $[73] = t13;
+  } else {
+    t13 = $[73];
+  }
+  const handlePointerMove = t13;
+  let t14;
+  if ($[74] !== animateNoChangeThenCleanup || $[75] !== cleanupDrag || $[76] !== getClosestInsertionPointLocal || $[77] !== index || $[78] !== onPointerUp || $[79] !== onReorder) {
+    t14 = function handlePointerUp(e_1) {
+      onPointerUp?.(e_1);
+      if (e_1.defaultPrevented) {
+        return;
+      }
+      if (activeDragRef.current?.state !== "is-dragging") {
+        return;
+      }
+      const {
+        clientX: clientX_4,
+        clientY: clientY_4
+      } = e_1;
+      const insertionPoint_0 = getClosestInsertionPointLocal(clientX_4, clientY_4);
+      const insertionIndex_1 = insertionPoint_0 && insertionPoint_0.itemIndex + (insertionPoint_0.after ? 1 : 0);
+      if (insertionIndex_1 == null || insertionIndex_1 === index || insertionIndex_1 === index + 1) {
+        animateNoChangeThenCleanup();
+        return;
+      }
+      cleanupDrag();
+      onReorder(insertionIndex_1);
+    };
+    $[74] = animateNoChangeThenCleanup;
+    $[75] = cleanupDrag;
+    $[76] = getClosestInsertionPointLocal;
+    $[77] = index;
+    $[78] = onPointerUp;
+    $[79] = onReorder;
+    $[80] = t14;
+  } else {
+    t14 = $[80];
+  }
+  const handlePointerUp = t14;
+  let t15;
+  if ($[81] !== canReorder || $[82] !== columns || $[83] !== data || $[84] !== index || $[85] !== isColumn || $[86] !== onKeyDown || $[87] !== onReorder) {
+    t15 = function handleKeyDown(e_2) {
+      onKeyDown?.(e_2);
+      if (e_2.defaultPrevented) {
+        return;
+      }
+      const left = isColumn && e_2.key === "ArrowLeft";
+      const right = isColumn && e_2.key === "ArrowRight";
+      const up = !isColumn && e_2.key === "ArrowUp";
+      const down = !isColumn && e_2.key === "ArrowDown";
+      if (!left && !right && !up && !down || !columns || !data) {
+        return;
+      }
+      const backward = left || up;
+      const initialInsertionIndex = backward ? index - 1 : index + 2;
+      const maxInsertionIndex = isColumn ? columns.length : data.length;
+      const step = backward ? -1 : 1;
+      for (let i = initialInsertionIndex; 0 <= i && i <= maxInsertionIndex; i = i + step, i) {
+        if (canReorder(i)) {
+          onReorder(i);
+          e_2.preventDefault();
+          return;
+        }
+      }
+    };
+    $[81] = canReorder;
+    $[82] = columns;
+    $[83] = data;
+    $[84] = index;
+    $[85] = isColumn;
+    $[86] = onKeyDown;
+    $[87] = onReorder;
+    $[88] = t15;
+  } else {
+    t15 = $[88];
+  }
+  const handleKeyDown = t15;
+  let t16;
+  if ($[89] !== animateNoChangeThenCleanup || $[90] !== onPointerCancel) {
+    t16 = function handlePointerCancel(e_3) {
+      onPointerCancel?.(e_3);
+      if (!e_3.defaultPrevented) {
+        animateNoChangeThenCleanup();
+      }
+    };
+    $[89] = animateNoChangeThenCleanup;
+    $[90] = onPointerCancel;
+    $[91] = t16;
+  } else {
+    t16 = $[91];
+  }
+  const handlePointerCancel = t16;
+  let t17;
+  if ($[92] !== animateNoChangeThenCleanup || $[93] !== onLostPointerCapture) {
+    t17 = function handleLostPointerCapture(e_4) {
+      onLostPointerCapture?.(e_4);
+      if (!e_4.defaultPrevented) {
+        animateNoChangeThenCleanup();
+      }
+    };
+    $[92] = animateNoChangeThenCleanup;
+    $[93] = onLostPointerCapture;
+    $[94] = t17;
+  } else {
+    t17 = $[94];
+  }
+  const handleLostPointerCapture = t17;
+  let t18;
+  if ($[95] !== cleanupDrag) {
+    t18 = () => {
+      if (activeDragRef.current) {
+        cleanupDrag();
+      }
+    };
+    $[95] = cleanupDrag;
+    $[96] = t18;
+  } else {
+    t18 = $[96];
+  }
+  const cleanupComponent = useEffectEvent(t18);
+  let t19;
+  if ($[97] !== cleanupComponent) {
+    t19 = () => cleanupComponent;
+    $[97] = cleanupComponent;
+    $[98] = t19;
+  } else {
+    t19 = $[98];
+  }
+  let t20;
+  if ($[99] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = [];
+    $[99] = t20;
+  } else {
+    t20 = $[99];
+  }
+  useEffect(t19, t20);
+  const hint = isColumn ? `Reorder column ${(_columns$index$name = columns?.[index]?.name) !== null && _columns$index$name !== void 0 ? _columns$index$name : String(columns?.[index]?.key)}.` : `Reorder item ${index + 1}.`;
+  const description = isColumn ? "Use Left and Right arrow keys to move the column." : "Use Up and Down arrow keys to move the item.";
+  const shortcuts = isColumn ? "ArrowLeft ArrowRight" : "ArrowUp ArrowDown";
+  const t21 = isColumn ? styles.columnReorderHandle : styles.itemReorderHandle;
+  let t22;
+  if ($[100] !== className || $[101] !== t21) {
+    t22 = classNames(styles.tableButton, t21, className);
+    $[100] = className;
+    $[101] = t21;
+    $[102] = t22;
+  } else {
+    t22 = $[102];
+  }
+  let t23;
+  if ($[103] === Symbol.for("react.memo_cache_sentinel")) {
+    t23 = /*#__PURE__*/jsx(Icon, {
+      glyph: dragIcon,
+      "aria-hidden": "true"
+    });
+    $[103] = t23;
+  } else {
+    t23 = $[103];
+  }
+  let t24;
+  if ($[104] !== composedRef || $[105] !== description || $[106] !== handleKeyDown || $[107] !== handleLostPointerCapture || $[108] !== handlePointerCancel || $[109] !== handlePointerDown || $[110] !== handlePointerMove || $[111] !== handlePointerUp || $[112] !== hint || $[113] !== restProps || $[114] !== shortcuts || $[115] !== t22) {
+    t24 = /*#__PURE__*/jsx("button", {
+      ref: composedRef,
+      type: "button",
+      className: t22,
+      "aria-label": hint,
+      "aria-description": description,
+      "aria-keyshortcuts": shortcuts,
+      onKeyDown: handleKeyDown,
+      onPointerDown: handlePointerDown,
+      onPointerMove: handlePointerMove,
+      onPointerUp: handlePointerUp,
+      onPointerCancel: handlePointerCancel,
+      onLostPointerCapture: handleLostPointerCapture,
+      ...restProps,
+      children: t23
+    });
+    $[104] = composedRef;
+    $[105] = description;
+    $[106] = handleKeyDown;
+    $[107] = handleLostPointerCapture;
+    $[108] = handlePointerCancel;
+    $[109] = handlePointerDown;
+    $[110] = handlePointerMove;
+    $[111] = handlePointerUp;
+    $[112] = hint;
+    $[113] = restProps;
+    $[114] = shortcuts;
+    $[115] = t22;
+    $[116] = t24;
+  } else {
+    t24 = $[116];
+  }
+  return t24;
+}
+function _temp() {}
+
+export { ReorderHandle };