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

package/components/internal/table-header.js

@@ -0,0 +1,1109 @@
+import { c } from 'react/compiler-runtime';
+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 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 { 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 'memoize-one';
+
+function TableHeader(t0) {
+  const $ = c(29);
+  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+    for (let $i = 0; $i < 29; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+  }
+  const {
+    expectColumnReorder
+  } = t0;
+  const {
+    columns,
+    noHeader,
+    stickyHeader,
+    columnEditing,
+    onColumnEditingRequest,
+    theadClassName,
+    theadTrClassName
+  } = use(TablePropsContext);
+  const [localColumnEditing, setLocalColumnEditing] = useState(false);
+  const effectiveColumnEditing = columnEditing !== null && columnEditing !== void 0 ? columnEditing : localColumnEditing;
+  let t1;
+  if ($[1] !== columnEditing || $[2] !== localColumnEditing || $[3] !== onColumnEditingRequest) {
+    t1 = source => {
+      let newColumnEditing;
+      if (columnEditing == null) {
+        newColumnEditing = !localColumnEditing;
+        setLocalColumnEditing(newColumnEditing);
+      } else {
+        newColumnEditing = !columnEditing;
+      }
+      onColumnEditingRequest?.(newColumnEditing, source);
+    };
+    $[1] = columnEditing;
+    $[2] = localColumnEditing;
+    $[3] = onColumnEditingRequest;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const toggleColumnEditing = t1;
+  let t2;
+  if ($[5] !== toggleColumnEditing) {
+    t2 = e => {
+      if (window.matchMedia("(hover: none)").matches && !isWithinInteractiveElement(e.target)) {
+        toggleColumnEditing("header");
+      }
+    };
+    $[5] = toggleColumnEditing;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const handleTheadClick = t2;
+  let t3;
+  if ($[7] !== toggleColumnEditing) {
+    t3 = () => {
+      toggleColumnEditing("edit-button");
+    };
+    $[7] = toggleColumnEditing;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  const handleEditColumnsButtonClick = t3;
+  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;
+    $[11] = theadClassName;
+    $[12] = t6;
+  } else {
+    t6 = $[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, {
+        columnIndex: columnIndex,
+        columnEditing: effectiveColumnEditing,
+        handleEditColumnsButtonClick: handleEditColumnsButtonClick,
+        expectColumnReorder: expectColumnReorder
+      }, column.key);
+      $[18] = effectiveColumnEditing;
+      $[19] = expectColumnReorder;
+      $[20] = handleEditColumnsButtonClick;
+      $[21] = t8;
+    } else {
+      t8 = $[21];
+    }
+    t7 = columns.map(t8);
+    $[13] = columns;
+    $[14] = effectiveColumnEditing;
+    $[15] = expectColumnReorder;
+    $[16] = handleEditColumnsButtonClick;
+    $[17] = t7;
+  } else {
+    t7 = $[17];
+  }
+  let t8;
+  if ($[22] !== t7 || $[23] !== theadTrClassName) {
+    t8 = /*#__PURE__*/jsx("tr", {
+      className: theadTrClassName,
+      children: t7
+    });
+    $[22] = t7;
+    $[23] = theadTrClassName;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  let t9;
+  if ($[25] !== handleTheadClick || $[26] !== t6 || $[27] !== t8) {
+    t9 = /*#__PURE__*/jsx("thead", {
+      className: t6,
+      onClick: handleTheadClick,
+      children: t8
+    });
+    $[25] = handleTheadClick;
+    $[26] = t6;
+    $[27] = t8;
+    $[28] = t9;
+  } else {
+    t9 = $[28];
+  }
+  return t9;
+}
+function TableHeaderCell(t0) {
+  const $ = c(41);
+  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+    for (let $i = 0; $i < 41; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+  }
+  const {
+    columnIndex,
+    columnEditing,
+    handleEditColumnsButtonClick,
+    expectColumnReorder
+  } = t0;
+  const {
+    columns,
+    columnEditButton
+  } = use(TablePropsContext);
+  const {
+    key,
+    name,
+    renderHeader,
+    sortOrder,
+    deletable,
+    canReorder,
+    thClassName
+  } = columns[columnIndex];
+  const animatedColumn = use(ColumnAnimationContext);
+  let t1;
+  if ($[1] !== key || $[2] !== name || $[3] !== renderHeader) {
+    t1 = renderHeader ? renderHeader() : name !== null && name !== void 0 ? name : String(key);
+    $[1] = key;
+    $[2] = name;
+    $[3] = renderHeader;
+    $[4] = t1;
+  } else {
+    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);
+    $[5] = t2;
+    $[6] = thClassName;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== canReorder || $[9] !== columnIndex || $[10] !== expectColumnReorder) {
+    t4 = canReorder && /*#__PURE__*/jsx(ColumnReorderHandle, {
+      columnIndex: columnIndex,
+      expectColumnReorder: expectColumnReorder
+    });
+    $[8] = canReorder;
+    $[9] = columnIndex;
+    $[10] = expectColumnReorder;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== children || $[13] !== columnIndex || $[14] !== sortOrder) {
+    t5 = sortOrder ? /*#__PURE__*/jsx(SortButton, {
+      columnIndex: columnIndex,
+      "aria-description": `Sort order: ${sortOrder}`,
+      children: children
+    }) : children;
+    $[12] = children;
+    $[13] = columnIndex;
+    $[14] = sortOrder;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  let t6;
+  if ($[16] !== canReorder) {
+    t6 = canReorder && /*#__PURE__*/jsx(ColumnReorderHandleMirror, {});
+    $[16] = canReorder;
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+  let t7;
+  if ($[18] !== t4 || $[19] !== t5 || $[20] !== t6) {
+    t7 = /*#__PURE__*/jsxs("div", {
+      className: styles.sortAndHeader,
+      children: [t4, t5, t6]
+    });
+    $[18] = t4;
+    $[19] = t5;
+    $[20] = t6;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== columnIndex || $[23] !== deletable) {
+    t8 = deletable && /*#__PURE__*/jsx(DeleteColumnButton, {
+      columnIndex: columnIndex
+    });
+    $[22] = columnIndex;
+    $[23] = deletable;
+    $[24] = t8;
+  } else {
+    t8 = $[24];
+  }
+  let t9;
+  if ($[25] !== columnEditButton || $[26] !== columnEditing || $[27] !== columnIndex || $[28] !== columns.length || $[29] !== handleEditColumnsButtonClick) {
+    t9 = 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;
+  } else {
+    t9 = $[30];
+  }
+  let t10;
+  if ($[31] !== t8 || $[32] !== t9) {
+    t10 = /*#__PURE__*/jsxs("div", {
+      className: styles.rightButtons,
+      children: [t8, t9]
+    });
+    $[31] = t8;
+    $[32] = t9;
+    $[33] = t10;
+  } else {
+    t10 = $[33];
+  }
+  let t11;
+  if ($[34] !== t10 || $[35] !== t7) {
+    t11 = /*#__PURE__*/jsxs("div", {
+      className: styles.headerCellInnerWrapper,
+      children: [t7, t10]
+    });
+    $[34] = t10;
+    $[35] = t7;
+    $[36] = t11;
+  } else {
+    t11 = $[36];
+  }
+  let t12;
+  if ($[37] !== sortOrder || $[38] !== t11 || $[39] !== t3) {
+    t12 = /*#__PURE__*/jsx("th", {
+      className: t3,
+      scope: "col",
+      "aria-sort": sortOrder,
+      children: t11
+    });
+    $[37] = sortOrder;
+    $[38] = t11;
+    $[39] = t3;
+    $[40] = t12;
+  } else {
+    t12 = $[40];
+  }
+  return t12;
+}
+function SortButton(t0) {
+  const $ = c(22);
+  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+    for (let $i = 0; $i < 22; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+  }
+  let children;
+  let className;
+  let columnIndex;
+  let onClick;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      columnIndex,
+      className,
+      children,
+      onClick,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = children;
+    $[3] = className;
+    $[4] = columnIndex;
+    $[5] = onClick;
+    $[6] = restProps;
+  } else {
+    children = $[2];
+    className = $[3];
+    columnIndex = $[4];
+    onClick = $[5];
+    restProps = $[6];
+  }
+  const tableProps = use(TablePropsContext);
+  const column = tableProps?.columns[columnIndex];
+  const sortOrder = column?.sortOrder;
+  const glyph = sortOrder === "none" ? sortableIcon : sortOrder === "ascending" ? arrowUpIcon : sortOrder === "descending" ? arrowDownIcon : undefined;
+  let t1;
+  if ($[7] !== columnIndex || $[8] !== onClick || $[9] !== sortOrder || $[10] !== tableProps) {
+    t1 = e => {
+      onClick?.(e);
+      if (!e.defaultPrevented) {
+        const nextOrder = sortOrder === "ascending" ? "descending" : sortOrder === "descending" ? "none" : "ascending";
+        tableProps.onSort?.(columnIndex, nextOrder, tableProps.columns);
+      }
+    };
+    $[7] = columnIndex;
+    $[8] = onClick;
+    $[9] = sortOrder;
+    $[10] = tableProps;
+    $[11] = t1;
+  } else {
+    t1 = $[11];
+  }
+  const handleClick = t1;
+  if (!tableProps || !column) {
+    return null;
+  }
+  let t2;
+  if ($[12] !== className) {
+    t2 = classNames(styles.headerButton, className);
+    $[12] = className;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  let t3;
+  if ($[14] !== glyph) {
+    t3 = /*#__PURE__*/jsx(Icon, {
+      glyph: glyph,
+      "aria-hidden": true
+    });
+    $[14] = glyph;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  let t4;
+  if ($[16] !== children || $[17] !== handleClick || $[18] !== restProps || $[19] !== t2 || $[20] !== t3) {
+    t4 = /*#__PURE__*/jsxs("button", {
+      type: "button",
+      className: t2,
+      onClick: handleClick,
+      ...restProps,
+      children: [children, " ", t3]
+    });
+    $[16] = children;
+    $[17] = handleClick;
+    $[18] = restProps;
+    $[19] = t2;
+    $[20] = t3;
+    $[21] = t4;
+  } else {
+    t4 = $[21];
+  }
+  return t4;
+}
+function DeleteColumnButton(t0) {
+  var _column$name;
+  const $ = c(18);
+  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+    for (let $i = 0; $i < 18; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+  }
+  let className;
+  let columnIndex;
+  let onClick;
+  let restProps;
+  if ($[1] !== t0) {
+    ({
+      columnIndex,
+      className,
+      onClick,
+      ...restProps
+    } = t0);
+    $[1] = t0;
+    $[2] = className;
+    $[3] = columnIndex;
+    $[4] = onClick;
+    $[5] = restProps;
+  } else {
+    className = $[2];
+    columnIndex = $[3];
+    onClick = $[4];
+    restProps = $[5];
+  }
+  const tableProps = use(TablePropsContext);
+  const column = tableProps?.columns[columnIndex];
+  let t1;
+  if ($[6] !== columnIndex || $[7] !== onClick || $[8] !== tableProps) {
+    t1 = e => {
+      onClick?.(e);
+      if (!e.defaultPrevented) {
+        tableProps.onColumnDelete?.(columnIndex, tableProps.columns);
+      }
+    };
+    $[6] = columnIndex;
+    $[7] = onClick;
+    $[8] = tableProps;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  const handleClick = t1;
+  if (!tableProps || !column) {
+    return null;
+  }
+  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);
+    $[10] = className;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  let t3;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/jsx(Icon, {
+      glyph: trashIcon,
+      "aria-hidden": "true"
+    });
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== handleClick || $[14] !== hint || $[15] !== restProps || $[16] !== t2) {
+    t4 = /*#__PURE__*/jsx("button", {
+      type: "button",
+      className: t2,
+      onClick: handleClick,
+      "aria-label": hint,
+      title: hint,
+      ...restProps,
+      children: t3
+    });
+    $[13] = handleClick;
+    $[14] = hint;
+    $[15] = restProps;
+    $[16] = t2;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  return t4;
+}
+function EditColumnsButton(t0) {
+  const $ = c(14);
+  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+    for (let $i = 0; $i < 14; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+  }
+  let columnEditing;
+  let hint;
+  let restProps;
+  let t1;
+  let t2;
+  if ($[1] !== t0) {
+    const {
+      columnEditing: t3,
+      ...props
+    } = t0;
+    columnEditing = t3;
+    const {
+      className,
+      ...t4
+    } = props;
+    restProps = t4;
+    hint = columnEditing ? "Hide column controls." : "Show column controls.";
+    t1 = "button";
+    t2 = classNames(styles.headerButton, styles.editColumnsButton, className);
+    $[1] = t0;
+    $[2] = columnEditing;
+    $[3] = hint;
+    $[4] = restProps;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    columnEditing = $[2];
+    hint = $[3];
+    restProps = $[4];
+    t1 = $[5];
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = /*#__PURE__*/jsx(Icon, {
+      glyph: settingsIcon,
+      "aria-hidden": "true"
+    });
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== columnEditing || $[9] !== hint || $[10] !== restProps || $[11] !== t1 || $[12] !== t2) {
+    t4 = /*#__PURE__*/jsx("button", {
+      type: t1,
+      className: t2,
+      "aria-pressed": columnEditing,
+      "aria-label": hint,
+      title: hint,
+      ...restProps,
+      children: t3
+    });
+    $[8] = columnEditing;
+    $[9] = hint;
+    $[10] = restProps;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+}
+function ColumnReorderHandle(t0) {
+  var _column$name2;
+  const $ = c(59);
+  if ($[0] !== "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a") {
+    for (let $i = 0; $i < 59; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+  }
+  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;
+  } else {
+    className = $[2];
+    columnIndex = $[3];
+    expectColumnReorder = $[4];
+    onKeyDown = $[5];
+    onLostPointerCapture = $[6];
+    onPointerCancel = $[7];
+    onPointerDown = $[8];
+    onPointerMove = $[9];
+    onPointerUp = $[10];
+    restProps = $[11];
+    userRef = $[12];
+  }
+  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
+    });
+    $[48] = composedRef;
+    $[49] = handleKeyDown;
+    $[50] = handleLostPointerCapture;
+    $[51] = handlePointerCancel;
+    $[52] = handlePointerDown;
+    $[53] = handlePointerMove;
+    $[54] = handlePointerUp;
+    $[55] = hint;
+    $[56] = restProps;
+    $[57] = t14;
+    $[58] = t16;
+  } else {
+    t16 = $[58];
+  }
+  return t16;
+}
+/**
+ * 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") {
+    for (let $i = 0; $i < 2; $i += 1) {
+      $[$i] = Symbol.for("react.memo_cache_sentinel");
+    }
+    $[0] = "12be56e7e3023192524687b975ff98ec759f5dac43ff15a672ef295c41ac272a";
+  }
+  let t0;
+  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = /*#__PURE__*/jsx("span", {
+      className: styles.columnReorderHandleMirror,
+      "aria-hidden": "true"
+    });
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+export { TableHeader };