@infinite-table/infinite-react 0.3.14 → 0.3.17

package/index.js

@@ -666,7 +666,7 @@ function debounce(fn, { wait }) {
 
 // src/components/InfiniteTable/index.tsx
 var React36 = __toModule(require("react"));
-var import_react49 = __toModule(require("react"));
+var import_react50 = __toModule(require("react"));
 
 // src/utils/join.ts
 var join = (...args) => args.filter((x) => !!`${x}`).join(" ");
@@ -1092,8 +1092,8 @@ function stripVar(cssVariableWithVarString) {
 }
 
 // src/components/InfiniteTable/theme.css.ts
-var InternalVars = { currentColumnWidth: "var(--_1slvgu90)", currentColumnTransformX: "var(--_1slvgu91)", currentColumnTransformY: "var(--_1slvgu92)", activeCellRowOffset: "var(--_1slvgu93)", activeCellRowHeight: "var(--_1slvgu94)", activeCellOffsetX: "var(--_1slvgu95)", activeCellOffsetY: "var(--_1slvgu96)", scrollLeftForActiveCell: "var(--_1slvgu97)", scrollTopForActiveCell: "var(--_1slvgu98)", activeCellColWidth: "var(--_1slvgu99)", activeCellColOffset: "var(--_1slvgu9a)", columnWidthAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndex: "var(--_1slvgu9c)" };
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { draggingBackground: "var(--infinite-header-cell-dragging-background)", background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
+var InternalVars = { currentColumnWidth: "var(--_1slvgu90)", currentColumnTransformX: "var(--_1slvgu91)", currentColumnTransformY: "var(--_1slvgu92)", activeCellRowOffset: "var(--_1slvgu93)", activeCellRowHeight: "var(--_1slvgu94)", activeCellOffsetX: "var(--_1slvgu95)", activeCellOffsetY: "var(--_1slvgu96)", scrollTopForActiveRow: "var(--_1slvgu97)", activeCellColWidth: "var(--_1slvgu98)", activeCellColOffset: "var(--_1slvgu99)", columnWidthAtIndex: "var(--_1slvgu9a)", columnOffsetAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndexWhileReordering: "var(--_1slvgu9c)", columnZIndexAtIndex: "var(--_1slvgu9d)", computedVisibleColumnsCount: "var(--_1slvgu9e)", baseZIndexForCells: "var(--_1slvgu9f)" };
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", error: "var(--infinite-error-color)", color: "var(--infinite-color)" }, spacing: { "0": "var(--infinite-space-0)", "1": "var(--infinite-space-1)", "2": "var(--infinite-space-2)", "3": "var(--infinite-space-3)", "4": "var(--infinite-space-4)", "5": "var(--infinite-space-5)", "6": "var(--infinite-space-6)", "7": "var(--infinite-space-7)", "8": "var(--infinite-space-8)", "9": "var(--infinite-space-9)", "10": "var(--infinite-space-10)" }, fontSize: { "0": "var(--infinite-font-size-0)", "1": "var(--infinite-font-size-1)", "2": "var(--infinite-font-size-2)", "3": "var(--infinite-font-size-3)", "4": "var(--infinite-font-size-4)", "5": "var(--infinite-font-size-5)", "6": "var(--infinite-font-size-6)", "7": "var(--infinite-font-size-7)" }, fontFamily: "var(--infinite-font-family)", minHeight: "var(--infinite-min-height)", borderRadius: "var(--infinite-border-radius)", background: "var(--infinite-background)", components: { LoadMask: { padding: "var(--infinite-load-mask-padding)", color: "var(--infinite-load-mask-color)", textBackground: "var(--infinite-load-mask-text-background)", overlayBackground: "var(--infinite-load-mask-overlay-background)", overlayOpacity: "var(--infinite-load-mask-overlay-opacity)", borderRadius: "var(--infinite-load-mask-border-radius)" }, Header: { background: "var(--infinite-header-background)", color: "var(--infinite-header-color)", columnHeaderHeight: "var(--infinite-column-header-height)" }, HeaderCell: { background: "var(--infinite-header-cell-background)", hoverBackground: "var(--infinite-header-cell-hover-background)", padding: "var(--infinite-header-cell-padding)", paddingX: "var(--infinite-header-cell-padding-x)", paddingY: "var(--infinite-header-cell-padding-y)", iconSize: "var(--infinite-header-cell-icon-size)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", resizeHandleActiveAreaWidth: "var(--infinite-resize-handle-active-area-width)", resizeHandleWidth: "var(--infinite-resize-handle-width)", resizeHandleHoverBackground: "var(--infinite-resize-handle-hover-background)", resizeHandleConstrainedHoverBackground: "var(--infinite-resize-handle-constrained-hover-background)" }, Cell: { padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderInvisible: "var(--infinite-cell-border-invisible)", borderRadius: "var(--infinite-cell-border-radius)", reorderEffectDuration: "var(--infinite-column-reorder-effect-duration)", color: "var(--infinite-cell-color)", activeBorderColor_R: "var(--infinite-active-cell-border-color--r)", activeBorderColor_G: "var(--infinite-active-cell-border-color--g)", activeBorderColor_B: "var(--infinite-active-cell-border-color--b)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBorderColor: "var(--infinite-active-cell-border-color)", activeBorderWidth: "var(--infinite-active-cell-border-width)", activeBorderStyle: "var(--infinite-active-cell-border-style)", activeBorder: "var(--infinite-active-cell-border)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", activeBackground: "var(--infinite-active-row-background)", activeBorderColor: "var(--infinite-active-row-border-color)", activeBorderWidth: "var(--infinite-active-row-border-width)", activeBorderStyle: "var(--infinite-active-row-border-style)", activeBorder: "var(--infinite-active-row-border)", activeBackgroundAlpha: "var(--infinite-active-row-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-row-background-alpha--table-unfocused)", hoverBackground: "var(--infinite-row-hover-background)", groupRowBackground: "var(--infinite-group-row-background)", groupRowColumnNesting: "var(--infinite-group-row-column-nesting)", groupNesting: "var(--infinite-dont-override-group-row-nesting-length)", pointerEventsWhileScrolling: "var(--infinite-row-pointer-events-while-scrolling)" }, ColumnCell: { background: "var(--infinite-column-cell-bg-dont-override)" } } };
 var columnHeaderHeightName = "column-header-height";
 
 // src/utils/selectParent.ts
@@ -1123,6 +1123,8 @@ function getParentInfiniteNode(node) {
 }
 var columnWidthAtIndex = stripVar(InternalVars.columnWidthAtIndex);
 var columnOffsetAtIndex = stripVar(InternalVars.columnOffsetAtIndex);
+var columnOffsetAtIndexWhileReordering = stripVar(InternalVars.columnOffsetAtIndexWhileReordering);
+var columnZIndexAtIndex = stripVar(InternalVars.columnZIndexAtIndex);
 function setInfiniteVarOnRoot(varName, varValue, node) {
   const infinite = node ? getParentInfiniteNode(node) : document.querySelector(InfiniteSelector);
   setInfiniteVarOnNode(varName, varValue, infinite);
@@ -1146,6 +1148,12 @@ function setInfiniteColumnWidth(colIndex, colWidth, node) {
 function setInfiniteColumnOffset(colIndex, colOffset, node) {
   setInfiniteVarOnRoot(`${columnOffsetAtIndex}-${colIndex}`, typeof colOffset === "number" ? colOffset + "px" : colOffset, node);
 }
+function setInfiniteColumnZIndex(colIndex, colZIndex, node) {
+  setInfiniteVarOnRoot(`${columnZIndexAtIndex}-${colIndex}`, `${colZIndex}`, node);
+}
+function setInfiniteColumnOffsetWhileReordering(colIndex, offset, node) {
+  setInfiniteVarOnRoot(`${columnOffsetAtIndexWhileReordering}-${colIndex}`, typeof offset === "number" ? `calc( var(${columnOffsetAtIndex}-${colIndex}) + ${offset}px )` : offset, node);
+}
 function getCSSVarNameForColWidth(colIndex) {
   return `${columnWidthAtIndex}-${colIndex}`;
 }
@@ -1445,6 +1453,36 @@ var MatrixBrain = class extends Logger {
       renderCount = Math.min(count, renderCount);
       return renderCount;
     };
+    this.isColFixedEnd = (colIndex) => {
+      if (!this.fixedColsEnd) {
+        return false;
+      }
+      return colIndex >= this.cols - this.fixedColsEnd;
+    };
+    this.isColFixedStart = (colIndex) => {
+      if (!this.fixedColsStart) {
+        return false;
+      }
+      return colIndex < this.fixedColsStart;
+    };
+    this.isRowFixedEnd = (rowIndex) => {
+      if (!this.fixedRowsEnd) {
+        return false;
+      }
+      return rowIndex >= this.rows - this.fixedRowsEnd;
+    };
+    this.isRowFixedStart = (rowIndex) => {
+      if (!this.fixedRowsStart) {
+        return false;
+      }
+      return rowIndex < this.fixedRowsStart;
+    };
+    this.isColFixed = (colIndex) => {
+      return this.isColFixedStart(colIndex) || this.isColFixedEnd(colIndex);
+    };
+    this.isRowFixed = (rowIndex) => {
+      return this.isRowFixedStart(rowIndex) || this.isRowFixedEnd(rowIndex);
+    };
     this.getFixedEndColsWidth = () => {
       if (!this.fixedColsEnd) {
         return 0;
@@ -2624,7 +2662,8 @@ var MappedCells = class extends Logger {
 // src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
 var ITEM_POSITION_WITH_TRANSFORM = true;
 var currentColumnTransformY = stripVar(InternalVars.currentColumnTransformY);
-var columnTransformX = stripVar(InternalVars.columnOffsetAtIndex);
+var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
+var columnOffsetAtIndexWhileReordering2 = stripVar(InternalVars.columnOffsetAtIndexWhileReordering);
 var ReactHeadlessTableRenderer = class extends Logger {
   constructor(brain) {
     super("ReactHeadlessTableRenderer");
@@ -2639,14 +2678,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.currentHoveredRow = -1;
     this.hoverRowUpdatesInProgress = new Map();
     this.infiniteNode = null;
-    this.setTransform = (element, _rowIndex, colIndex, x, y) => {
-      const transformXVar = `${columnTransformX}-${colIndex}`;
+    this.setTransform = (element, _rowIndex, colIndex, x, y, zIndex2) => {
+      const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
+      const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
       if (!this.infiniteNode) {
         this.infiniteNode = getParentInfiniteNode(element);
       }
-      this.infiniteNode.style.setProperty(transformXVar, `${x}px`);
+      this.infiniteNode.style.setProperty(columnOffsetX, `${x}px`);
       element.style.setProperty(currentColumnTransformY, `${y}px`);
-      element.style.transform = `translate3d(var(${transformXVar}), ${InternalVars.currentColumnTransformY}, 0)`;
+      element.style.transform = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), ${InternalVars.currentColumnTransformY}, 0)`;
+      if (zIndex2 != null) {
+      }
     };
     this.getFullyVisibleRowsRange = () => {
       let {
@@ -2676,21 +2718,26 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
       const rowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
       const rowHeight = brain.getItemSize(rowIndex, "vertical");
+      const fixedStartRowsHeight = brain.getFixedStartRowsHeight();
+      const fixedEndRowsHeight = brain.getFixedEndRowsHeight();
       const top2 = scrollPosition.scrollTop;
       const availableSize = brain.getAvailableSize();
+      if (!availableSize.height) {
+        return null;
+      }
       const bottom = top2 + availableSize.height;
       if (!scrollAdjustPosition) {
-        scrollAdjustPosition = rowOffset > bottom ? "end" : rowOffset < top2 ? "start" : "end";
+        scrollAdjustPosition = rowOffset > bottom - fixedEndRowsHeight ? "end" : rowOffset < top2 + fixedStartRowsHeight ? "start" : "end";
       }
       let scrollTop = scrollPosition.scrollTop;
       if (scrollAdjustPosition === "center") {
-        scrollTop = rowOffset - Math.floor(brain.getAvailableSize().height / 2);
+        scrollTop = rowOffset - Math.floor((brain.getAvailableSize().height - fixedStartRowsHeight - fixedEndRowsHeight) / 2);
       } else if (scrollAdjustPosition === "start") {
         offset = -offset;
-        scrollTop += rowOffset - top2 + offset;
+        scrollTop += rowOffset - top2 + offset - fixedStartRowsHeight;
       } else {
         offset += rowHeight;
-        scrollTop += rowOffset - bottom + offset;
+        scrollTop += rowOffset - bottom + offset + fixedEndRowsHeight;
       }
       return __spreadProps(__spreadValues({}, scrollPosition), {
         scrollTop
@@ -2703,37 +2750,47 @@ var ReactHeadlessTableRenderer = class extends Logger {
       if (this.isColumnFullyVisible(colIndex) && !scrollAdjustPosition) {
         return scrollPosition;
       }
-      const rowOffset = brain.getItemOffsetFor(colIndex, "horizontal");
+      const colOffset = brain.getItemOffsetFor(colIndex, "horizontal");
       const colWidth = brain.getItemSize(colIndex, "horizontal");
+      const fixedStartColsWidth = brain.getFixedStartColsWidth();
+      const fixedEndColsWidth = brain.getFixedStartColsWidth();
       const left2 = scrollPosition.scrollLeft;
       const availableSize = brain.getAvailableSize();
+      if (!availableSize.width) {
+        return null;
+      }
       const right = left2 + availableSize.width;
       if (!scrollAdjustPosition) {
-        scrollAdjustPosition = rowOffset > right ? "end" : rowOffset < left2 ? "start" : "end";
+        scrollAdjustPosition = colOffset > right - fixedEndColsWidth ? "end" : colOffset < left2 + fixedStartColsWidth ? "start" : "end";
       }
       let scrollLeft = scrollPosition.scrollLeft;
       if (scrollAdjustPosition === "center") {
-        scrollLeft = rowOffset - Math.floor(brain.getAvailableSize().width / 2);
+        scrollLeft = colOffset - Math.floor((brain.getAvailableSize().width - fixedStartColsWidth - fixedEndColsWidth) / 2);
       } else if (scrollAdjustPosition === "start") {
         offset = -offset;
-        scrollLeft += rowOffset - left2 + offset;
+        scrollLeft += colOffset - left2 + offset - fixedStartColsWidth;
       } else {
         offset += colWidth;
-        scrollLeft += rowOffset - right + offset;
+        scrollLeft += colOffset - right + offset + fixedEndColsWidth;
       }
       return __spreadProps(__spreadValues({}, scrollPosition), {
         scrollLeft
       });
     };
     this.getScrollPositionForScrollCellIntoView = (rowIndex, colIndex, config = { offsetLeft: 0, offsetTop: 0 }) => {
-      const { scrollLeft } = this.getScrollPositionForScrollColumnIntoView(colIndex, {
+      const scrollPosForCol = this.getScrollPositionForScrollColumnIntoView(colIndex, {
         scrollAdjustPosition: config.colScrollAdjustPosition || config.scrollAdjustPosition,
         offset: config.offsetLeft
       });
-      const { scrollTop } = this.getScrollPositionForScrollRowIntoView(rowIndex, {
+      const scrollPosForRow = this.getScrollPositionForScrollRowIntoView(rowIndex, {
         scrollAdjustPosition: config.rowScrollAdjustPosition || config.scrollAdjustPosition,
         offset: config.offsetTop
       });
+      if (!scrollPosForCol || !scrollPosForRow) {
+        return null;
+      }
+      const { scrollLeft } = scrollPosForCol;
+      const { scrollTop } = scrollPosForRow;
       return { scrollLeft, scrollTop };
     };
     this.isRowFullyVisible = (rowIndex, offsetMargin = 2) => {
@@ -2744,6 +2801,9 @@ var ReactHeadlessTableRenderer = class extends Logger {
         return false;
       }
       const { brain } = this;
+      if (brain.isRowFixed(rowIndex)) {
+        return true;
+      }
       const {
         start: [startRow],
         end: [endRow]
@@ -2783,23 +2843,26 @@ var ReactHeadlessTableRenderer = class extends Logger {
         return false;
       }
       const { brain } = this;
+      if (brain.isColFixed(colIndex)) {
+        return true;
+      }
       const {
         start: [_, startCol],
         end: [__, endCol]
       } = brain.getRenderRange();
-      const midCol = Math.floor((startCol + endCol) / 2);
       if (colIndex < startCol) {
         return false;
       }
       if (colIndex >= endCol) {
         return false;
       }
+      const midCol = Math.floor((startCol + endCol) / 2);
       if (colIndex >= midCol) {
-        const lastVisibleCol = brain.getItemAt(brain.getAvailableSize().width + brain.getScrollPosition().scrollLeft - offsetMargin, "horizontal");
+        const lastVisibleCol = brain.getItemAt(brain.getAvailableSize().width + brain.getScrollPosition().scrollLeft - offsetMargin - brain.getFixedEndColsWidth(), "horizontal");
         return colIndex <= lastVisibleCol;
       }
       if (colIndex < midCol) {
-        const firstVisibleCol = brain.getItemAt(brain.getScrollPosition().scrollLeft + offsetMargin, "horizontal");
+        const firstVisibleCol = brain.getItemAt(brain.getScrollPosition().scrollLeft + offsetMargin + brain.getFixedStartColsWidth(), "horizontal");
         return colIndex >= firstVisibleCol;
       }
       return true;
@@ -3142,7 +3205,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
         itemElement.dataset.rowIndex = rowIndex;
         itemElement.dataset.colIndex = colIndex;
         if (ITEM_POSITION_WITH_TRANSFORM) {
-          this.setTransform(itemElement, rowIndex, colIndex, x, y);
+          this.setTransform(itemElement, rowIndex, colIndex, x, y, null);
           itemElement.style.willChange = "transform";
           itemElement.style.backfaceVisibility = "hidden";
           const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
@@ -3188,37 +3251,29 @@ var ReactHeadlessTableRenderer = class extends Logger {
         }
       }
       const adjustColStart = (_rowIndex, colIndex, node, { x, y }, { scrollLeft }) => {
-        node.style.zIndex = `${fixedColsStart - colIndex}`;
-        this.setTransform(node, _rowIndex, colIndex, x + scrollLeft, y);
+        this.setTransform(node, _rowIndex, colIndex, x + scrollLeft, y, fixedColsStart - colIndex);
       };
       const adjustRowStart = (rowIndex, _colIndex, node, coords, scrollPosition2) => {
-        node.style.zIndex = `${fixedRowsStart - rowIndex}`;
-        this.setTransform(node, rowIndex, _colIndex, coords.x, coords.y + scrollPosition2.scrollTop);
+        this.setTransform(node, rowIndex, _colIndex, coords.x, coords.y + scrollPosition2.scrollTop, fixedRowsStart - rowIndex);
       };
       const adjustColEnd = (_rowIndex, colIndex, node, { y }) => {
-        node.style.zIndex = `${cols - colIndex}`;
         const val = fixedEndColsOffsets[colIndex];
-        this.setTransform(node, _rowIndex, colIndex, val, y);
+        this.setTransform(node, _rowIndex, colIndex, val, y, cols - colIndex);
       };
       const adjustRowEnd = (rowIndex, _colIndex, node, coords) => {
-        node.style.zIndex = `${rows - rowIndex}`;
-        this.setTransform(node, rowIndex, _colIndex, coords.x, fixedEndRowsOffsets[rowIndex]);
+        this.setTransform(node, rowIndex, _colIndex, coords.x, fixedEndRowsOffsets[rowIndex], rows - rowIndex);
       };
       const adjustColStartRowStart = (_rowIndex, _colIndex, node, { x, y }, scrollPosition2) => {
-        node.style.zIndex = `1000000`;
-        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, y + scrollPosition2.scrollTop);
+        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, y + scrollPosition2.scrollTop, 1e5);
       };
       const adjustColStartRowEnd = (_rowIndex, _colIndex, node, { x }, scrollPosition2) => {
-        node.style.zIndex = `2000000`;
-        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, fixedEndRowsOffsets[_rowIndex]);
+        this.setTransform(node, _rowIndex, _colIndex, x + scrollPosition2.scrollLeft, fixedEndRowsOffsets[_rowIndex], 2e5);
       };
       const adjustColEndRowStart = (_rowIndex, colIndex, node, coords) => {
-        node.style.zIndex = `3000000`;
-        this.setTransform(node, _rowIndex, colIndex, fixedEndColsOffsets[colIndex], coords.y + scrollPosition.scrollTop);
+        this.setTransform(node, _rowIndex, colIndex, fixedEndColsOffsets[colIndex], coords.y + scrollPosition.scrollTop, 3e5);
       };
       const adjustColEndRowEnd = (rowIndex, colIndex, node) => {
-        node.style.zIndex = `4000000`;
-        this.setTransform(node, rowIndex, colIndex, fixedEndColsOffsets[colIndex], fixedEndRowsOffsets[rowIndex]);
+        this.setTransform(node, rowIndex, colIndex, fixedEndColsOffsets[colIndex], fixedEndRowsOffsets[rowIndex], 4e5);
       };
       if (fixedColsStart || fixedColsEnd) {
         for (let rowIndex = startRow; rowIndex < endRow; rowIndex++) {
@@ -3451,39 +3506,43 @@ var useRerender = () => {
 };
 
 // src/components/InfiniteTable/components/ActiveCellIndicator.css.ts
-var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwx _16lm1iwv", hidden: "nxbq1c3 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwx _16lm1iwv" };
-var ActiveIndicatorWrapperCls = "_16lm1iwf _16lm1iw3 _16lm1iwx _16lm1iwv _16lm1iwr";
+var ActiveCellIndicatorCls = { visible: "nxbq1c2 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx", hidden: "nxbq1c3 nxbq1c1 _16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx" };
+var ActiveIndicatorWrapperCls = "_16lm1iwf _16lm1iw3 _16lm1iwz _16lm1iwx _16lm1iwt _16lm1iwn";
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.css.ts
-var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iwu _16lm1iwv _16lm1iwx", hidden: "j26lrx2 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iwu _16lm1iwv _16lm1iwx" };
+var ActiveRowIndicatorCls = { visible: "j26lrx1 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iww _16lm1iwx _16lm1iwz", hidden: "j26lrx2 j26lrx0 _16lm1iwf _16lm1iw3 _16lm1iww _16lm1iwx _16lm1iwz" };
 
 // src/components/InfiniteTable/components/ActiveRowIndicator.tsx
 var { rootClassName: rootClassName3 } = internalProps;
 var baseCls = `${rootClassName3}-ActiveRowIndicator`;
+var ActiveStyle = {
+  [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
+  transform: `translate3d(0px, calc( ${InternalVars.activeCellOffsetY} + ${InternalVars.scrollTopForActiveRow}), 0px)`,
+  height: InternalVars.activeCellRowHeight
+};
 var ActiveRowIndicatorFn = (props) => {
   const { brain } = props;
-  const [state, setState] = (0, import_react9.useState)({
-    top: 0,
-    rowHeight: 0
-  });
   const domRef = (0, import_react9.useRef)(null);
-  const stateRef = (0, import_react9.useRef)(state);
   const active = props.activeRowIndex != null && brain.getRowCount() > props.activeRowIndex;
-  const [rerenderId, rerender] = useRerender();
+  const [_rerenderId, rerender] = useRerender();
   (0, import_react9.useLayoutEffect)(() => {
     if (props.activeRowIndex == null) {
       return;
     }
-    setState(stateRef.current = {
-      top: brain.getItemOffsetFor(props.activeRowIndex, "vertical"),
-      rowHeight: brain.getRowHeight(props.activeRowIndex)
-    });
-  }, [props.activeRowIndex, rerenderId]);
+    const rowIndex = props.activeRowIndex;
+    const activeCellRowHeight = brain.getRowHeight(rowIndex);
+    const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
+    const node = domRef.current;
+    setInfiniteVarsOnNode({
+      activeCellRowHeight: `${activeCellRowHeight}px`,
+      activeCellRowOffset: `${activeCellRowOffset}px`
+    }, node);
+  }, [props.activeRowIndex]);
   (0, import_react9.useEffect)(() => {
-    const removeOnScroll = brain.onScroll((scrollPos) => {
-      const node = domRef.current;
-      const topOffset = stateRef.current.top;
-      node.style.transform = `translate3d(0px, ${-scrollPos.scrollTop + topOffset}px, 0px)`;
+    const removeOnScroll = brain.onScroll((scrollPosition) => {
+      setInfiniteVarsOnNode({
+        scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`
+      }, domRef.current);
     });
     const removeOnRenderCountChange = brain.onRenderCountChange(rerender);
     return () => {
@@ -3498,10 +3557,7 @@ var ActiveRowIndicatorFn = (props) => {
     ref: domRef,
     "data-name": "active-row-indicator",
     className: `${baseCls} ${active ? ActiveRowIndicatorCls.visible : ActiveRowIndicatorCls.hidden}`,
-    style: active ? {
-      transform: `translate3d(0px, ${-brain.getScrollPosition().scrollTop + state.top}px,0)`,
-      height: state.rowHeight
-    } : void 0
+    style: active ? ActiveStyle : void 0
   }));
 };
 var ActiveRowIndicator = React10.memo(ActiveRowIndicatorFn);
@@ -3511,15 +3567,17 @@ var React11 = __toModule(require("react"));
 var import_react10 = __toModule(require("react"));
 var { rootClassName: rootClassName4 } = internalProps;
 var baseCls2 = `${rootClassName4}-ActiveCellIndicator`;
-var ActiveStyle = {
-  [stripVar(InternalVars.activeCellOffsetX)]: `calc( ${InternalVars.scrollLeftForActiveCell} + ${InternalVars.activeCellColOffset} )`,
-  [stripVar(InternalVars.activeCellOffsetY)]: `calc( ${InternalVars.scrollTopForActiveCell} + ${InternalVars.activeCellRowOffset} )`,
+var columnZIndexAtIndex2 = stripVar(InternalVars.columnZIndexAtIndex);
+var ActiveStyle2 = {
+  [stripVar(InternalVars.activeCellOffsetX)]: InternalVars.activeCellColOffset,
+  [stripVar(InternalVars.activeCellOffsetY)]: InternalVars.activeCellRowOffset,
   transform: `translate3d(${InternalVars.activeCellOffsetX}, ${InternalVars.activeCellOffsetY}, 0px)`,
   width: InternalVars.activeCellColWidth,
   height: InternalVars.activeCellRowHeight
 };
 var ActiveCellIndicatorFn = (props) => {
   const { brain } = props;
+  const [_rerenderId, rerender] = useRerender();
   const domRef = (0, import_react10.useRef)(null);
   const active = props.activeCellIndex != null && brain.getRowCount() > props.activeCellIndex[0];
   (0, import_react10.useLayoutEffect)(() => {
@@ -3530,33 +3588,30 @@ var ActiveCellIndicatorFn = (props) => {
     const activeCellRowHeight = brain.getRowHeight(rowIndex);
     const activeCellRowOffset = brain.getItemOffsetFor(rowIndex, "vertical");
     const node = domRef.current;
-    const scrollPosition = brain.getScrollPosition();
     setInfiniteVarsOnNode({
-      scrollTopForActiveCell: `${-scrollPosition.scrollTop}px`,
-      scrollLeftForActiveCell: `${-scrollPosition.scrollLeft}px`,
       activeCellRowHeight: `${activeCellRowHeight}px`,
       activeCellRowOffset: `${activeCellRowOffset}px`
     }, node);
   }, [props.activeCellIndex]);
   (0, import_react10.useEffect)(() => {
-    const removeOnSCroll = brain.onScroll((scrollPosition) => {
-      setInfiniteVarsOnNode({
-        scrollTopForActiveCell: `${-scrollPosition.scrollTop}px`,
-        scrollLeftForActiveCell: `${-scrollPosition.scrollLeft}px`
-      }, domRef.current);
+    const removeOnRenderCountChange = brain.onRenderCountChange(() => {
+      rerender();
     });
     return () => {
-      removeOnSCroll();
+      removeOnRenderCountChange();
     };
   }, [brain]);
   return /* @__PURE__ */ React11.createElement("div", {
     className: ActiveIndicatorWrapperCls,
-    "data-name": "active-cell"
+    "data-name": "active-cell",
+    style: active ? {
+      zIndex: `var(${columnZIndexAtIndex2}-${props.activeCellIndex[1]})`
+    } : void 0
   }, /* @__PURE__ */ React11.createElement("div", {
     ref: domRef,
     "data-name": "active-cell-indicator",
     className: `${baseCls2} ${active ? ActiveCellIndicatorCls.visible : ActiveCellIndicatorCls.hidden}`,
-    style: active ? ActiveStyle : void 0
+    style: active ? ActiveStyle2 : void 0
   }));
 };
 var ActiveCellIndicator = React11.memo(ActiveCellIndicatorFn);
@@ -3656,12 +3711,12 @@ function HeadlessTable(props) {
     renderCell,
     brain,
     cellHoverClassNames
-  })), /* @__PURE__ */ React12.createElement(ActiveRowIndicator, {
-    brain,
-    activeRowIndex
   }), /* @__PURE__ */ React12.createElement(ActiveCellIndicator, {
     brain,
     activeCellIndex
+  })), /* @__PURE__ */ React12.createElement(ActiveRowIndicator, {
+    brain,
+    activeRowIndex
   }), /* @__PURE__ */ React12.createElement(SpacePlaceholder, {
     width: scrollSize.width,
     height: scrollSize.height
@@ -3979,20 +4034,20 @@ var useInternalProps = () => {
 };
 
 // src/components/InfiniteTable/utilities.css.ts
-var alignItems = { center: "_16lm1iw15", stretch: "_16lm1iw16" };
-var cssEllipsisClassName = "_16lm1iw1e _16lm1iw1f _16lm1iw1a";
+var alignItems = { center: "_16lm1iw17", stretch: "_16lm1iw18" };
+var cssEllipsisClassName = "_16lm1iw1g _16lm1iw1h _16lm1iw1c";
 var cursor = { pointer: "_16lm1iwd", colResize: "_16lm1iwe" };
-var display = { flex: "_16lm1iwn", block: "_16lm1iwo", inlineBlock: "_16lm1iwp" };
+var display = { flex: "_16lm1iwp", block: "_16lm1iwq", inlineBlock: "_16lm1iwr" };
 var flex = { "1": "_16lm1iwg", none: "_16lm1iwh" };
-var flexFlow = { column: "_16lm1iw13", row: "_16lm1iw14" };
-var justifyContent = { center: "_16lm1iw17", start: "_16lm1iw18", end: "_16lm1iw19" };
-var left = { "0": "_16lm1iwx", "100%": "_16lm1iwy" };
-var overflow = { hidden: "_16lm1iw1a", auto: "_16lm1iw1b", visible: "_16lm1iw1c" };
+var flexFlow = { column: "_16lm1iw15", row: "_16lm1iw16" };
+var justifyContent = { center: "_16lm1iw19", start: "_16lm1iw1a", end: "_16lm1iw1b" };
+var left = { "0": "_16lm1iwz", "100%": "_16lm1iw10" };
+var overflow = { hidden: "_16lm1iw1c", auto: "_16lm1iw1d", visible: "_16lm1iw1e" };
 var position = { relative: "_16lm1iw1", absolute: "_16lm1iw2", sticky: "_16lm1iw3", fixed: "_16lm1iw4" };
-var top = { "0": "_16lm1iwv", "100%": "_16lm1iww" };
+var top = { "0": "_16lm1iwx", "100%": "_16lm1iwy" };
 var transformTranslateZero = "_16lm1iwa";
-var userSelect = { none: "_16lm1iwq" };
-var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "1000": "_16lm1iwk", "10000": "_16lm1iwl", "100000": "_16lm1iwm" };
+var userSelect = { none: "_16lm1iws" };
+var zIndex = { "1": "_16lm1iwi", "10": "_16lm1iwj", "1000": "_16lm1iwk", "10000": "_16lm1iwl", "100000": "_16lm1iwm", "1000000": "_16lm1iwn", "10000000": "_16lm1iwo" };
 
 // src/components/InfiniteTable/components/InfiniteTableBody/InfiniteTableBody.tsx
 var InfiniteTableBody = React14.forwardRef(function InfiniteTableBody2(props, ref) {
@@ -4017,7 +4072,7 @@ var InfiniteTableFooter = React15.forwardRef(function InfiniteTableFooter2(props
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var React22 = __toModule(require("react"));
-var import_react24 = __toModule(require("react"));
+var import_react23 = __toModule(require("react"));
 var import_react_dom = __toModule(require("react-dom"));
 
 // src/components/DataSource/defaultFilterTypes.ts
@@ -4159,120 +4214,297 @@ var moveXatY = (arr, dragIndex, dropIndex) => {
   return arr;
 };
 
+// src/components/InfiniteTable/InfiniteCls.css.ts
+var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var FooterCls = "_16lm1iw1";
+var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwp _16lm1iw15 _16lm1iw0";
+var InfiniteClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "_1yeub2ve"]] });
+var InfiniteClsShiftingColumns = "_1yeub2vl";
+var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
+
+// src/components/InfiniteTable/utils/rafFn.ts
+var rafFn = (fn) => {
+  let rafId = 0;
+  return (...args) => {
+    if (rafId) {
+      cancelAnimationFrame(rafId);
+    }
+    rafId = requestAnimationFrame(() => {
+      rafId = 0;
+      fn(...args);
+    });
+  };
+};
+
+// src/components/InfiniteTable/hooks/useDOMProps.ts
+var columnWidthAtIndex2 = stripVar(InternalVars.columnWidthAtIndex);
+var columnOffsetAtIndex3 = stripVar(InternalVars.columnOffsetAtIndex);
+var columnZIndexAtIndex3 = stripVar(InternalVars.columnZIndexAtIndex);
+var activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
+var activeCellColOffset = stripVar(InternalVars.activeCellColOffset);
+var baseZIndexForCells = stripVar(InternalVars.baseZIndexForCells);
+var computedVisibleColumnsCountCSSVar = stripVar(InternalVars.computedVisibleColumnsCount);
+function getColumnZIndex(col, params) {
+  let computedZIndex = "auto";
+  const index = col.computedVisibleIndex;
+  if (col.computedPinned) {
+    if (col.computedPinned === "start") {
+      computedZIndex = params.pinnedStartColsCount - col.computedVisibleIndexInCategory;
+    } else if (col.computedPinned === "end") {
+      computedZIndex = params.visibleColsCount - col.computedVisibleIndexInCategory;
+    }
+  } else {
+    computedZIndex = -index * 10;
+  }
+  const zIndexValue = typeof computedZIndex === "number" ? `calc( var(${baseZIndexForCells}) ` + (computedZIndex < 0 ? "-" : "+") + ` ${Math.abs(computedZIndex)} )` : "auto";
+  return zIndexValue;
+}
+function useDOMProps(initialDOMProps) {
+  const { computed, componentState, componentActions } = useInfiniteTable();
+  const {
+    focused,
+    focusedWithin,
+    domRef,
+    onBlurWithin,
+    onFocusWithin,
+    onSelfFocus,
+    onSelfBlur,
+    activeCellIndex
+  } = componentState;
+  const {
+    computedPinnedStartColumnsWidth,
+    computedPinnedEndColumnsWidth,
+    computedPinnedStartColumns,
+    computedVisibleColumns
+  } = computed;
+  const cssVars = computedVisibleColumns.reduce((vars, col) => {
+    const index = col.computedVisibleIndex;
+    vars[`${columnWidthAtIndex2}-${index}`] = col.computedWidth + "px";
+    vars[`${columnOffsetAtIndex3}-${index}`] = col.computedOffset + "px";
+    const zIndexValue = getColumnZIndex(col, {
+      pinnedStartColsCount: computedPinnedStartColumns.length,
+      visibleColsCount: computedVisibleColumns.length
+    });
+    vars[`${columnZIndexAtIndex3}-${index}`] = `${zIndexValue}`;
+    return vars;
+  }, {});
+  if (activeCellIndex != null) {
+    cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(activeCellIndex[1])})`;
+    cssVars[activeCellColOffset] = `var(${getCSSVarNameForColOffset(activeCellIndex[1])})`;
+  }
+  cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
+  cssVars[baseZIndexForCells] = computedVisibleColumns.length * 10;
+  const setFocused = rafFn((focused2) => {
+    componentActions.focused = focused2;
+  });
+  const setFocusedWithin = rafFn((focused2) => {
+    componentActions.focusedWithin = focused2;
+  });
+  const onFocus = (event) => {
+    var _a;
+    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onFocus) == null ? void 0 : _a.call(initialDOMProps, event);
+    if (event.target === domRef.current) {
+      setFocused(true);
+      onSelfFocus == null ? void 0 : onSelfFocus(event);
+      if (focusedWithin) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    } else {
+      if (!focusedWithin) {
+        setFocusedWithin(true);
+        onFocusWithin == null ? void 0 : onFocusWithin(event);
+      }
+    }
+  };
+  const onBlur = (event) => {
+    var _a, _b;
+    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onBlur) == null ? void 0 : _a.call(initialDOMProps, event);
+    if (event.target === domRef.current) {
+      setFocused(false);
+      onSelfBlur == null ? void 0 : onSelfBlur(event);
+      if (focusedWithin) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    } else {
+      const contained = (_b = domRef.current) == null ? void 0 : _b.contains(event.relatedTarget);
+      if (!contained) {
+        setFocusedWithin(false);
+        onBlurWithin == null ? void 0 : onBlurWithin(event);
+      }
+    }
+  };
+  const domProps = __spreadProps(__spreadValues({
+    tabIndex: 0
+  }, initialDOMProps), {
+    onFocus,
+    onBlur
+  });
+  const className = join(InfiniteTableClassName, InfiniteCls, domProps == null ? void 0 : domProps.className, computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start` : null, computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end` : null, focused ? `${InfiniteTableClassName}--focused` : null, focusedWithin ? `${InfiniteTableClassName}--focused-within` : null, focused && componentState.focusedClassName ? componentState.focusedClassName : null, focusedWithin && componentState.focusedWithinClassName ? componentState.focusedWithinClassName : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null, InfiniteClsRecipe({
+    hasPinnedStart: !!computedPinnedStartColumnsWidth,
+    hasPinnedEnd: !!computedPinnedEndColumnsWidth,
+    focused,
+    focusedWithin
+  }));
+  domProps.className = className;
+  domProps.style = __spreadValues(__spreadValues({}, initialDOMProps == null ? void 0 : initialDOMProps.style), cssVars);
+  if (focused) {
+    if (componentState.focusedStyle) {
+      Object.assign(domProps.style, componentState.focusedStyle);
+    }
+  }
+  if (focusedWithin) {
+    if (componentState.focusedWithinStyle) {
+      Object.assign(domProps.style, componentState.focusedWithinStyle);
+    }
+  }
+  return domProps;
+}
+
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
+var columnOffsetAtIndex4 = stripVar(InternalVars.columnOffsetAtIndex);
+var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
+var PROXY_OFFSET = 10;
 var getBreakPoints = (columns) => {
   return Array.from(columns.values()).map((c) => {
     return {
       columnId: c.id,
       breakpoint: c.computedAbsoluteOffset + Math.round(c.computedWidth / 2)
     };
-  });
+  }).filter(Boolean);
 };
 var useColumnPointerEvents = ({
   columnId,
   domRef,
   columns,
-  computedRemainingSpace
+  computedRemainingSpace,
+  pinnedStartColsCount,
+  visibleColsCount
 }) => {
-  const [draggingDiff, setDraggingDiff] = (0, import_react17.useState)(null);
-  const [proxyOffset, setProxyOffset] = (0, import_react17.useState)(null);
-  const breakpointsRef = (0, import_react17.useRef)([]);
-  const didDragRef = (0, import_react17.useRef)(false);
-  const initialClientPos = (0, import_react17.useRef)(null);
-  const currentDropIndexRef = (0, import_react17.useRef)(null);
-  const dragging = draggingDiff != null;
-  const { componentActions, computed } = useInfiniteTable();
+  const [proxyPosition, setProxyPosition] = (0, import_react17.useState)(null);
+  const dragging = proxyPosition != null;
+  const {
+    componentActions,
+    computed,
+    componentState: { domRef: rootRef, brain }
+  } = useInfiniteTable();
   const { computedColumnOrder } = computed;
   const column = (0, import_react17.useMemo)(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = (0, import_react17.useMemo)(() => {
+  const { dragColumnIndex, columnsArray } = (0, import_react17.useMemo)(() => {
     const columnsArray2 = Array.from(columns.values());
+    const columnIndex = columnsArray2.findIndex((c) => c.id === columnId);
     return {
       columnsArray: columnsArray2,
-      columnIndex: columnsArray2.findIndex((c) => c.id === columnId),
-      columnWidth: column.computedWidth
+      dragColumnIndex: columnIndex,
+      columnWidth: column.computedWidth,
+      columnOffsetVar: `var(${columnOffsetAtIndex4}-${column.computedVisibleIndex})`
     };
   }, [columns, columnId, column]);
-  let cursorRef = (0, import_react17.useRef)("auto");
   const onPointerDown = (0, import_react17.useCallback)((e) => {
+    var _a;
+    let breakpoints = [];
     const target = domRef.current;
-    cursorRef.current = target.style.cursor;
-    didDragRef.current = false;
-    initialClientPos.current = {
-      clientX: e.clientX,
-      clientY: e.clientY
-    };
+    const initialClientPos = {
+      clientX: Math.round(e.clientX),
+      clientY: Math.round(e.clientY)
+    };
+    const initialScrollPosition2 = brain.getScrollPosition();
+    const initialProxyPosition = {
+      left: PROXY_OFFSET - initialScrollPosition2.scrollLeft,
+      top: PROXY_OFFSET
+    };
+    let currentClientPos = initialClientPos;
+    let currentDiff = {
+      x: 0,
+      y: 0
+    };
+    function updateColumnOffsets(pos) {
+      const clientX = Math.round(pos.clientX);
+      const clientY = Math.round(pos.clientY);
+      if (clientX === currentClientPos.clientX && clientY === currentClientPos.clientY) {
+        return;
+      }
+      currentClientPos = { clientX, clientY };
+      currentDiff.x = currentClientPos.clientX - initialClientPos.clientX;
+      currentDiff.y = currentClientPos.clientY - initialClientPos.clientY;
+      setProxyPosition({
+        left: initialProxyPosition.left + currentDiff.x,
+        top: initialProxyPosition.top + currentDiff.y
+      });
+    }
+    updateColumnOffsets(initialClientPos);
+    let initialCursor = (_a = target.style.cursor) != null ? _a : "auto";
+    let didDragAtLeastOnce = false;
+    let currentDropIndex = dragColumnIndex;
     const onPointerMove = (e2) => {
-      if (!didDragRef.current) {
-        didDragRef.current = true;
-        breakpointsRef.current = getBreakPoints(columns);
-        setDraggingDiff({ top: 0, left: 0 });
-        const rect = target.getBoundingClientRect();
-        setProxyOffset({
-          left: e2.clientX - rect.x - 10,
-          top: e2.clientY - rect.y - 10
-        });
+      var _a2;
+      if (!didDragAtLeastOnce) {
+        didDragAtLeastOnce = true;
+        componentActions.columnReorderInProgress = true;
+        breakpoints = getBreakPoints(columns);
+        setInfiniteColumnZIndex(dragColumnIndex, 1e6, rootRef.current);
+        (_a2 = rootRef.current) == null ? void 0 : _a2.classList.add(InfiniteClsShiftingColumns);
         target.style.cursor = "grabbing";
       }
-      const diffX = e2.clientX - initialClientPos.current.clientX;
-      const diffY = e2.clientY - initialClientPos.current.clientY;
+      updateColumnOffsets(e2);
+      const diffX = currentDiff.x;
       const dir = diffX < 0 ? -1 : 1;
-      const columnPinned = column.computedPinned;
       let currentPos = dir === -1 ? column.computedAbsoluteOffset + diffX : column.computedAbsoluteOffset + column.computedWidth + diffX;
-      const breakpoints = breakpointsRef.current;
-      let index = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
+      let idx = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
         return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
       });
-      if (index < 0) {
-        index = ~index;
-      }
-      if (index !== currentDropIndexRef.current) {
-        currentDropIndexRef.current = index;
-        const shifts = columnsArray.map(() => 0);
-        let total = 0;
-        if (dir === -1) {
-          for (let i = index; i < columnIndex; i++) {
-            let shiftBy = columnWidth;
-            if (columnPinned === "end" && columnsArray[i].computedPinned === false && columnsArray[i].computedLastInCategory && computedRemainingSpace > 0) {
-              shiftBy += computedRemainingSpace;
-            }
-            shifts[i] = shiftBy;
-            total -= shiftBy;
+      if (idx < 0) {
+        idx = ~idx;
+      }
+      if (idx !== currentDropIndex) {
+        currentDropIndex = idx;
+        if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
+          currentDropIndex = dragColumnIndex;
+        }
+        columnsArray.forEach((col) => {
+          const colIndex = col.computedVisibleIndex;
+          if (dir === -1) {
+            let newPosition = colIndex === dragColumnIndex ? `var(${columnOffsetAtIndex4}-${currentDropIndex})` : colIndex < currentDropIndex || colIndex > dragColumnIndex ? `var(${columnOffsetAtIndex4}-${colIndex})` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) + var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
+            setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, rootRef.current);
+            return;
           }
-        } else {
-          for (let i = columnIndex + 1; i < index; i++) {
-            shifts[i] = -columnWidth;
-            total += columnWidth;
+          if (dir === 1) {
+            let newPosition = colIndex < dragColumnIndex || colIndex >= currentDropIndex ? `var(${columnOffsetAtIndex4}-${colIndex})` : colIndex === dragColumnIndex ? `calc( var(${columnOffsetAtIndex4}-${currentDropIndex - 1}) + var(${columnWidthAtIndex3}-${currentDropIndex - 1}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
+            setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, rootRef.current);
+            return;
           }
-        }
-        if (index !== columnIndex) {
-          shifts[columnIndex] = total;
-        }
-        componentActions.columnShifts = shifts;
-        componentActions.draggingColumnId = column.id;
+        });
       }
-      setDraggingDiff({ left: diffX, top: diffY });
     };
     const onPointerUp = (e2) => {
+      var _a2;
       const target2 = domRef.current;
-      target2.style.cursor = cursorRef.current;
+      (_a2 = rootRef.current) == null ? void 0 : _a2.classList.remove(InfiniteClsShiftingColumns);
+      columnsArray.forEach((col) => {
+        setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
+      });
+      setInfiniteColumnZIndex(dragColumnIndex, getColumnZIndex(column, {
+        pinnedStartColsCount,
+        visibleColsCount
+      }), rootRef.current);
+      target2.style.cursor = initialCursor;
       target2.releasePointerCapture(e2.pointerId);
       target2.removeEventListener("pointermove", onPointerMove);
       target2.removeEventListener("pointerup", onPointerUp);
-      setDraggingDiff(null);
-      componentActions.columnShifts = null;
-      componentActions.draggingColumnId = null;
-      if (!didDragRef.current && column.computedSortable) {
+      setProxyPosition(null);
+      if (!didDragAtLeastOnce && column.computedSortable) {
         column.toggleSort();
       }
-      const dropIndex = currentDropIndexRef.current;
-      if (dropIndex != null && dropIndex !== columnIndex) {
-        const newOrder = moveXatY(computedColumnOrder, columnIndex, dropIndex > columnIndex ? dropIndex - 1 : dropIndex);
+      if (currentDropIndex != null && currentDropIndex !== dragColumnIndex) {
+        const newOrder = moveXatY(computedColumnOrder, dragColumnIndex, currentDropIndex > dragColumnIndex ? currentDropIndex - 1 : currentDropIndex);
+        columnsArray.forEach((col) => {
+          setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
+        });
         componentActions.columnOrder = newOrder;
       }
-      breakpointsRef.current = [];
-      didDragRef.current = false;
-      initialClientPos.current = null;
-      currentDropIndexRef.current = null;
+      componentActions.columnReorderInProgress = false;
+      breakpoints = [];
     };
     target.addEventListener("pointermove", onPointerMove);
     target.addEventListener("pointerup", onPointerUp);
@@ -4280,7 +4512,9 @@ var useColumnPointerEvents = ({
   }, [
     columns,
     column,
-    columnIndex,
+    dragColumnIndex,
+    visibleColsCount,
+    pinnedStartColsCount,
     columnsArray,
     computedRemainingSpace,
     computedColumnOrder
@@ -4289,8 +4523,7 @@ var useColumnPointerEvents = ({
     onPointerDown: column.computedDraggable ? onPointerDown : () => {
     },
     dragging,
-    proxyOffset,
-    draggingDiff: draggingDiff != null ? draggingDiff : { top: 0, left: 0 }
+    proxyPosition
   };
 };
 
@@ -4341,20 +4574,20 @@ var React17 = __toModule(require("react"));
 var import_react19 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
-var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellCls = "_1eexc2a5 _16lm1iwn _16lm1iw14 _16lm1iw15 _16lm1iw2 _16lm1iw1d _16lm1iw1e";
-var HeaderCellContentRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob117 _16lm1iws _16lm1iwu _16lm1iwn _16lm1iw14 _16lm1iw15", variantClassNames: { filtered: { false: "_12zfob118", true: "_12zfob119" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderCellProxy = "_12zfob10";
-var HeaderCellRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob1h _16lm1iwo", variantClassNames: { rowActive: { false: "_12zfob1i", true: "_12zfob1j" }, zebra: { false: "_12zfob1k", even: "_12zfob1l", odd: "_12zfob1m" }, dragging: { true: "_12zfob1n", false: "_12zfob1o" }, first: { true: "_12zfob1p", false: "_12zfob1q" }, last: { true: "_12zfob1r", false: "_12zfob1s" }, groupByField: { true: "_12zfob1t", false: "_12zfob1u" }, firstInCategory: { true: "_12zfob1v", false: "_12zfob1w" }, lastInCategory: { true: "_12zfob1x", false: "_12zfob1y" }, pinned: { start: "_12zfob1z", end: "_12zfob110", false: "_12zfob111" }, filtered: { true: "_12zfob112", false: "_12zfob113" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob114"], [{ pinned: "end", firstInCategory: true }, "_12zfob115"], [{ pinned: false, lastInCategory: true }, "_12zfob116"]] });
-var HeaderClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_12zfob17 _16lm1iwo _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob18", end: "_12zfob19", false: "_12zfob1a" }, virtualized: { true: "_12zfob1b", false: "_12zfob1c" }, overflow: { true: "_12zfob1d", false: "_12zfob1e" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1f"], [{ overflow: true, pinned: "end" }, "_12zfob1g"]] });
-var HeaderFilterCls = "_12zfob11c _16lm1iwn _16lm1iw14 _16lm1iw15 _16lm1iw1";
-var HeaderFilterEditorCls = "_16lm1iwu _16lm1iws";
-var HeaderGroupCls = "_12zfob11b _16lm1iwn _16lm1iw14 _16lm1iw15";
-var HeaderScrollbarPlaceholderCls = "_12zfob16 _16lm1iw2";
+var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var CellCls = "_1eexc2a5 _16lm1iwp _16lm1iw16 _16lm1iw17 _16lm1iw2 _16lm1iw1f _16lm1iw1g";
+var HeaderCellContentRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob117 _16lm1iwu _16lm1iww _16lm1iwp _16lm1iw16 _16lm1iw17", variantClassNames: { filtered: { false: "_12zfob118", true: "_12zfob119" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellProxy = "_12zfob1g _16lm1iw1g _16lm1iw1h _16lm1iw1c";
+var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1h _16lm1iwq", variantClassNames: { rowActive: { false: "_12zfob1i", true: "_12zfob1j" }, zebra: { false: "_12zfob1k", even: "_12zfob1l", odd: "_12zfob1m" }, dragging: { true: "_12zfob1n", false: "_12zfob1o" }, first: { true: "_12zfob1p", false: "_12zfob1q" }, last: { true: "_12zfob1r", false: "_12zfob1s" }, groupByField: { true: "_12zfob1t", false: "_12zfob1u" }, firstInCategory: { true: "_12zfob1v", false: "_12zfob1w" }, lastInCategory: { true: "_12zfob1x", false: "_12zfob1y" }, pinned: { start: "_12zfob1z", end: "_12zfob110", false: "_12zfob111" }, filtered: { true: "_12zfob112", false: "_12zfob113" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob114"], [{ pinned: "end", firstInCategory: true }, "_12zfob115"], [{ pinned: false, lastInCategory: true }, "_12zfob116"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob16 _16lm1iwq _16lm1iw2", variantClassNames: { pinned: { start: "_12zfob17", end: "_12zfob18", false: "_12zfob19" }, virtualized: { true: "_12zfob1a", false: "_12zfob1b" }, overflow: { true: "_12zfob1c", false: "_12zfob1d" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1e"], [{ overflow: true, pinned: "end" }, "_12zfob1f"]] });
+var HeaderFilterCls = "_12zfob11c _16lm1iwp _16lm1iw16 _16lm1iw17 _16lm1iw1";
+var HeaderFilterEditorCls = "_16lm1iww _16lm1iwu";
+var HeaderGroupCls = "_12zfob11b _16lm1iwp _16lm1iw16 _16lm1iw17";
+var HeaderScrollbarPlaceholderCls = "_12zfob15 _16lm1iw2";
 var HeaderSortIconCls = "_16lm1iw1";
-var HeaderSortIconIndexCls = "_12zfob15";
-var HeaderSortIconRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob12", center: "_12zfob13", end: "_12zfob14" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderWrapperCls = "_12zfob11a _16lm1iw1a _16lm1iw1 _16lm1iwn _16lm1iw14";
+var HeaderSortIconIndexCls = "_12zfob14";
+var HeaderSortIconRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "", variantClassNames: { align: { start: "_12zfob11", center: "_12zfob12", end: "_12zfob13" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderWrapperCls = "_12zfob11a _16lm1iw1c _16lm1iw1 _16lm1iwp _16lm1iw16";
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var defaultLineStyle = {
@@ -4430,25 +4663,16 @@ function SortIcon(props) {
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 var React18 = __toModule(require("react"));
 
-// src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-var import_react20 = __toModule(require("react"));
-var useInfiniteTableState = () => {
-  const TableContext2 = getInfiniteTableContext();
-  const { componentState } = (0, import_react20.useContext)(TableContext2);
-  return componentState;
-};
-
 // src/components/InfiniteTable/components/cell.css.ts
-var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellCls = "_1eexc2a5 _16lm1iwn _16lm1iw14 _16lm1iw15 _16lm1iw2 _16lm1iw1d _16lm1iw1e";
-var ColumnCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, rowActive: { false: "_1eexc2aa", true: "_1eexc2ab" }, zebra: { false: "_1eexc2ac", even: "_1eexc2ad", odd: "_1eexc2ae" }, first: { true: "_1eexc2af", false: "_1eexc2ag" }, last: { true: "_1eexc2ah", false: "_1eexc2ai" }, groupByField: { true: "_1eexc2aj", false: "_1eexc2ak" }, firstInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, lastInCategory: { true: "_1eexc2an", false: "_1eexc2ao" }, pinned: { start: "_1eexc2ap", end: "_1eexc2aq", false: "_1eexc2ar" }, filtered: { true: "_1eexc2as", false: "_1eexc2at" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2au"], [{ pinned: "end", firstInCategory: true }, "_1eexc2av"]] });
+var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ColumnCellCls = "_1eexc2a6 _1eexc2a5 _16lm1iwp _16lm1iw16 _16lm1iw17 _16lm1iw2 _16lm1iw1f _16lm1iw1g";
+var ColumnCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_1eexc2a7", variantClassNames: { dragging: { false: "_1eexc2a8", true: "_1eexc2a9" }, rowActive: { false: "_1eexc2aa", true: "_1eexc2ab" }, zebra: { false: "_1eexc2ac", even: "_1eexc2ad", odd: "_1eexc2ae" }, first: { true: "_1eexc2af", false: "_1eexc2ag" }, last: { true: "_1eexc2ah", false: "_1eexc2ai" }, groupByField: { true: "_1eexc2aj", false: "_1eexc2ak" }, firstInCategory: { true: "_1eexc2al", false: "_1eexc2am" }, lastInCategory: { true: "_1eexc2an", false: "_1eexc2ao" }, pinned: { start: "_1eexc2ap", end: "_1eexc2aq", false: "_1eexc2ar" }, filtered: { true: "_1eexc2as", false: "_1eexc2at" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2au"], [{ pinned: "end", firstInCategory: true }, "_1eexc2av"]] });
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
-var columnWidthAtIndex2 = stripVar(InternalVars.columnWidthAtIndex);
+var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
 function InfiniteTableCellFn(props) {
   var _b, _c, _d;
   const _a = props, {
@@ -4481,23 +4705,14 @@ function InfiniteTableCellFn(props) {
     "renderChildren"
   ]);
   const children = renderChildren();
-  const { columnShifts } = useInfiniteTableState();
-  const shifting = !!columnShifts;
   const style = __spreadValues({
-    width: `var(${columnWidthAtIndex2}-${column.computedVisibleIndex})`
+    width: `var(${columnWidthAtIndex4}-${column.computedVisibleIndex})`
   }, domProps.style);
-  if (!skipColumnShifting && columnShifts && columnShifts[column.computedVisibleIndex]) {
-    const shiftLeft = columnShifts[column.computedVisibleIndex];
-    if (virtualized) {
-      style.left = shiftLeft;
-    } else {
-      style.transform = `translate3d(${shiftLeft}px, 0px, 0px)`;
-    }
-  }
   const finalDOMProps = __spreadProps(__spreadValues({}, domProps), {
     style,
     "data-column-id": column.id,
-    className: join(domProps.className, justifyContent[(_b = column.align) != null ? _b : "start"], InfiniteTableCellClassName, ColumnCellCls, shifting ? `${InfiniteTableCellClassName}--shifting ${CellClsVariants.shifting}` : ""),
+    "data-z-index": style.zIndex,
+    className: join(domProps.className, justifyContent[(_b = column.align) != null ? _b : "start"], InfiniteTableCellClassName, ColumnCellCls),
     children: /* @__PURE__ */ React18.createElement(React18.Fragment, null, beforeChildren, /* @__PURE__ */ React18.createElement("div", {
       className: join(InfiniteTableCellContentClassName, cssEllipsis ? cssEllipsisClassName : overflow.hidden, contentClassName),
       style: contentStyle
@@ -4515,18 +4730,18 @@ var InfiniteTableCell = React18.memo(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableColumnHeaderFilter.tsx
 var React19 = __toModule(require("react"));
-var import_react21 = __toModule(require("react"));
+var import_react20 = __toModule(require("react"));
 var { rootClassName: rootClassName6 } = internalProps;
 var InfiniteTableColumnHeaderFilterClassName = `${rootClassName6}HeaderCell__filter`;
 var stopPropagation = (e) => e.stopPropagation();
 function InfiniteTableColumnHeaderFilter(props) {
   var _a, _b, _c, _d;
-  const [theValue, setTheValue] = (0, import_react21.useState)((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
+  const [theValue, setTheValue] = (0, import_react20.useState)((_b = (_a = props.columnFilterValue) == null ? void 0 : _a.filterValue) != null ? _b : "");
   const onInputChange = (filterValue) => {
     setTheValue(filterValue);
     props.onChange(filterValue);
   };
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     var _a2;
     if (props.columnFilterValue) {
       if (theValue !== props.columnFilterValue.filterValue) {
@@ -4571,7 +4786,7 @@ function InfiniteTableColumnHeaderFilterEmpty() {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
 var React21 = __toModule(require("react"));
-var import_react23 = __toModule(require("react"));
+var import_react22 = __toModule(require("react"));
 
 // src/components/flexbox/index.ts
 var computeFlex = (params) => {
@@ -4910,7 +5125,7 @@ var computeGroupResize = (params) => {
 };
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
-var import_react22 = __toModule(require("react"));
+var import_react21 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/columnResizer.ts
 function getColumnResizer(colIndex, {
@@ -4965,17 +5180,17 @@ function getColumnGroupResizer(colIndexes, config) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/ResizeHandle.css.ts
-var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iwv _16lm1iw11 _16lm1iwz _16lm1iwe";
-var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "zneyzh1 _16lm1iw2 _16lm1iwv _16lm1iwz", variantClassNames: { constrained: { false: "zneyzh2", true: "zneyzh3" } }, defaultVariants: {}, compoundVariants: [] });
+var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
+var ResizeHandleCls = "zneyzh0 _16lm1iw2 _16lm1iwx _16lm1iw13 _16lm1iw11 _16lm1iwe";
+var ResizeHandleDraggerClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "zneyzh1 _16lm1iw2 _16lm1iwx _16lm1iw11", variantClassNames: { constrained: { false: "zneyzh2", true: "zneyzh3" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/index.tsx
 var { rootClassName: rootClassName7 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls = `${rootClassName7}HeaderCell_ResizeHandle`;
 function ResizeHandleFn(props) {
-  const domRef = (0, import_react22.useRef)(null);
-  const [constrained, setConstrained] = (0, import_react22.useState)(false);
-  const constrainedRef = (0, import_react22.useRef)(constrained);
+  const domRef = (0, import_react21.useRef)(null);
+  const [constrained, setConstrained] = (0, import_react21.useState)(false);
+  const constrainedRef = (0, import_react21.useRef)(constrained);
   constrainedRef.current = constrained;
   const onPointerDown = (e) => {
     e.stopPropagation();
@@ -5014,33 +5229,32 @@ function ResizeHandleFn(props) {
     target.addEventListener("pointermove", onPointerMove);
     target.addEventListener("pointerup", onPointerUp);
   };
-  return /* @__PURE__ */ import_react22.default.createElement("div", {
+  return /* @__PURE__ */ import_react21.default.createElement("div", {
     ref: domRef,
     className: `${InfiniteTableHeaderCellResizeHandleCls} ${ResizeHandleCls}`,
     onPointerDown
-  }, /* @__PURE__ */ import_react22.default.createElement("div", {
+  }, /* @__PURE__ */ import_react21.default.createElement("div", {
     className: ResizeHandleDraggerClsRecipe({
       constrained
     })
   }));
 }
-var ResizeHandle = import_react22.default.memo(ResizeHandleFn);
+var ResizeHandle = import_react21.default.memo(ResizeHandleFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnResizeHandle.tsx
 function useColumnResizeHandle(column) {
   const {
     computed: { computedVisibleColumns },
-    componentState: { domRef },
     getState,
     getComputed,
     componentActions
   } = useInfiniteTable();
-  const computeResizeForDiff = (0, import_react23.useCallback)(({
+  const computeResizeForDiff = (0, import_react22.useCallback)(({
     diff,
     shareSpaceOnResize
   }) => {
     const state = getState();
-    const { columnSizing, viewportReservedWidth, bodySize, activeCellIndex } = state;
+    const { columnSizing, viewportReservedWidth, bodySize } = state;
     const columns = getComputed().computedVisibleColumns;
     let atLeastOneFlex = false;
     const columnSizingWithFlex = columns.reduce((acc, col) => {
@@ -5068,21 +5282,9 @@ function useColumnResizeHandle(column) {
         };
       })
     });
-    if (activeCellIndex && activeCellIndex[1] >= column.computedVisibleIndex) {
-      const activeColumn = columns[activeCellIndex[1]];
-      const currentColumn = columns[column.computedVisibleIndex];
-      if (activeCellIndex[1] === currentColumn.computedVisibleIndex) {
-        setInfiniteColumnWidth(currentColumn.computedVisibleIndex, currentColumn.computedWidth + result.adjustedDiff, domRef.current);
-      } else if (activeColumn) {
-        setInfiniteColumnOffset(activeColumn.computedVisibleIndex, activeColumn.computedOffset + result.adjustedDiff, domRef.current);
-      }
-      if (shareSpaceOnResize && activeCellIndex[1] === currentColumn.computedVisibleIndex + 1 && activeColumn) {
-        setInfiniteColumnWidth(activeColumn.computedVisibleIndex, activeColumn.computedWidth - result.adjustedDiff, domRef.current);
-      }
-    }
     return result;
-  }, []);
-  const onColumnResize = (0, import_react23.useCallback)(({
+  }, [column]);
+  const onColumnResize = (0, import_react22.useCallback)(({
     diff,
     shareSpaceOnResize
   }) => {
@@ -5094,7 +5296,7 @@ function useColumnResizeHandle(column) {
       componentActions.viewportReservedWidth = reservedWidth;
     }
     componentActions.columnSizing = columnSizing;
-  }, []);
+  }, [computeResizeForDiff]);
   const resizeHandle = column.computedResizable ? /* @__PURE__ */ React21.createElement(ResizeHandle, {
     columns: computedVisibleColumns,
     columnIndex: column.computedVisibleIndex,
@@ -5108,6 +5310,8 @@ function useColumnResizeHandle(column) {
 var InfiniteTableHeaderCellContext = React22.createContext(null);
 var { rootClassName: rootClassName8 } = internalProps;
 var InfiniteTableHeaderCellClassName = `${rootClassName8}HeaderCell`;
+var columnZIndexAtIndex4 = stripVar(InternalVars.columnZIndexAtIndex);
+var columnOffsetAtIndex5 = stripVar(InternalVars.columnOffsetAtIndex);
 function InfiniteTableHeaderCell(props) {
   var _a, _b, _c, _d, _e;
   const column = props.column;
@@ -5115,7 +5319,7 @@ function InfiniteTableHeaderCell(props) {
   const { onResize, height, width, headerOptions } = props;
   const sortInfo = column.computedSortInfo;
   let header = column.header;
-  const ref = (0, import_react24.useCallback)((node) => {
+  const ref = (0, import_react23.useCallback)((node) => {
     var _a2;
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
@@ -5146,12 +5350,13 @@ function InfiniteTableHeaderCell(props) {
     header = header != null ? header : column.name;
     return /* @__PURE__ */ React22.createElement(React22.Fragment, null, align === "end" ? sortTool : null, header, align !== "end" ? sortTool : null);
   };
-  const domRef = (0, import_react24.useRef)(null);
+  const domRef = (0, import_react23.useRef)(null);
   const {
     computed: {
       computedRemainingSpace,
       showColumnFilters,
-      computedVisibleColumns
+      computedVisibleColumns,
+      computedPinnedStartColumns
     },
     componentState: { portalDOMRef, columnHeaderHeight, filterEditors }
   } = useInfiniteTable();
@@ -5160,7 +5365,7 @@ function InfiniteTableHeaderCell(props) {
     getState: getDataSourceState,
     componentState: { filterDelay, filterTypes }
   } = useDataSourceContextValue();
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -5173,7 +5378,9 @@ function InfiniteTableHeaderCell(props) {
   const style = {
     height
   };
-  const { onPointerDown, dragging, draggingDiff, proxyOffset } = useColumnPointerEvents({
+  const { onPointerDown, dragging, proxyPosition } = useColumnPointerEvents({
+    pinnedStartColsCount: computedPinnedStartColumns.length,
+    visibleColsCount: computedVisibleColumns.length,
     computedRemainingSpace,
     columnId: column.id,
     domRef,
@@ -5187,9 +5394,9 @@ function InfiniteTableHeaderCell(props) {
         position: "absolute",
         height,
         width,
-        left: column.computedAbsoluteOffset + draggingDiff.left + ((_a = proxyOffset == null ? void 0 : proxyOffset.left) != null ? _a : 0),
-        top: (draggingDiff == null ? void 0 : draggingDiff.top) + ((_b = proxyOffset == null ? void 0 : proxyOffset.top) != null ? _b : 0),
-        zIndex: 1
+        left: `calc( var(${columnOffsetAtIndex5}-${column.computedVisibleIndex}) + ${(_a = proxyPosition.left) != null ? _a : 0}px)`,
+        top: (_b = proxyPosition.top) != null ? _b : 0,
+        zIndex: 1e9
       }
     }, header);
     draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
@@ -5198,7 +5405,7 @@ function InfiniteTableHeaderCell(props) {
   const contentRecipeVariants = {
     filtered: column.computedFiltered
   };
-  const setFilterValue = (0, import_react24.useCallback)((filterValue) => {
+  const setFilterValue = (0, import_react23.useCallback)((filterValue) => {
     var _a2;
     const state = getDataSourceState();
     let newFilterValue = (_a2 = state.filterValue) != null ? _a2 : [];
@@ -5260,6 +5467,8 @@ function InfiniteTableHeaderCell(props) {
   const filterType = column.computedFilterType;
   const FilterEditor = filterEditors[filterType] || defaultFilterEditors[filterType] || StringFilterEditor;
   const resizeHandle = useColumnResizeHandle(column);
+  const zIndex2 = `var(${columnZIndexAtIndex4}-${column.computedVisibleIndex})`;
+  style.zIndex = zIndex2;
   return /* @__PURE__ */ React22.createElement(ContextProvider, {
     value: renderParam
   }, /* @__PURE__ */ React22.createElement(InfiniteTableCell, {
@@ -5268,7 +5477,7 @@ function InfiniteTableHeaderCell(props) {
     column,
     "data-name": `HeaderCell`,
     "data-column-id": column.id,
-    "data-z-index": computedVisibleColumns.length * 10 - column.computedVisibleIndex * 10,
+    "data-z-index": zIndex2,
     style,
     width,
     onPointerDown,
@@ -5289,7 +5498,7 @@ function InfiniteTableHeaderCell(props) {
   }), draggingProxy);
 }
 function useInfiniteHeaderCell() {
-  const result = (0, import_react24.useContext)(InfiniteTableHeaderCellContext);
+  const result = (0, import_react23.useContext)(InfiniteTableHeaderCellContext);
   return result;
 }
 
@@ -5417,23 +5626,23 @@ function assignGroupOffsetsAndComputedWidths(items, groupOffset = 0) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var React26 = __toModule(require("react"));
-var import_react27 = __toModule(require("react"));
+var import_react26 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var React25 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
 var React24 = __toModule(require("react"));
-var import_react26 = __toModule(require("react"));
+var import_react25 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/ResizeHandle/GroupResizeHandle.tsx
-var import_react25 = __toModule(require("react"));
+var import_react24 = __toModule(require("react"));
 var { rootClassName: rootClassName9 } = internalProps;
 var InfiniteTableHeaderCellResizeHandleCls2 = `${rootClassName9}HeaderCell_ResizeHandle`;
 function GroupResizeHandleFn(props) {
-  const domRef = (0, import_react25.useRef)(null);
-  const [constrained, setConstrained] = (0, import_react25.useState)(false);
-  const constrainedRef = (0, import_react25.useRef)(constrained);
+  const domRef = (0, import_react24.useRef)(null);
+  const [constrained, setConstrained] = (0, import_react24.useState)(false);
+  const constrainedRef = (0, import_react24.useRef)(constrained);
   constrainedRef.current = constrained;
   const onPointerDown = (e) => {
     e.stopPropagation();
@@ -5480,18 +5689,18 @@ function GroupResizeHandleFn(props) {
     target.addEventListener("pointermove", onPointerMove);
     target.addEventListener("pointerup", onPointerUp);
   };
-  return /* @__PURE__ */ import_react25.default.createElement("div", {
+  return /* @__PURE__ */ import_react24.default.createElement("div", {
     ref: domRef,
     className: `${InfiniteTableHeaderCellResizeHandleCls2} ${ResizeHandleCls}`,
     onPointerDown
-  }, /* @__PURE__ */ import_react25.default.createElement("div", {
+  }, /* @__PURE__ */ import_react24.default.createElement("div", {
     style: props.style,
     className: ResizeHandleDraggerClsRecipe({
       constrained
     })
   }));
 }
-var GroupResizeHandle = import_react25.default.memo(GroupResizeHandleFn);
+var GroupResizeHandle = import_react24.default.memo(GroupResizeHandleFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/useColumnGroupResizeHandle.tsx
 function useColumnGroupResizeHandle(groupColumns, config) {
@@ -5503,7 +5712,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     componentActions
   } = useInfiniteTable();
   const lastColumnInGroup = groupColumns[groupColumns.length - 1];
-  const computeResizeForDiff = (0, import_react26.useCallback)((diff) => {
+  const computeResizeForDiff = (0, import_react25.useCallback)((diff) => {
     const state = getState();
     const { columnSizing, viewportReservedWidth, bodySize } = state;
     const columns = getComputed().computedVisibleColumns;
@@ -5536,7 +5745,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
     });
     return result;
   }, []);
-  const onColumnResize = (0, import_react26.useCallback)((diff) => {
+  const onColumnResize = (0, import_react25.useCallback)((diff) => {
     const { columnSizing, reservedWidth } = computeResizeForDiff(diff);
     componentActions.viewportReservedWidth = reservedWidth;
     componentActions.columnSizing = columnSizing;
@@ -5557,11 +5766,9 @@ function useColumnGroupResizeHandle(groupColumns, config) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
-var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
+var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
+var columnZIndexAtIndex5 = stripVar(InternalVars.columnZIndexAtIndex);
 function InfiniteTableHeaderGroup(props) {
-  const {
-    computed: { computedVisibleColumns }
-  } = useInfiniteTable();
   const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
   let { header } = columnGroup;
   if (header instanceof Function) {
@@ -5576,8 +5783,8 @@ function InfiniteTableHeaderGroup(props) {
     columnGroupsMaxDepth
   });
   const firstColumn = columns[0];
-  const width = columns.length > 1 ? `calc( ` + columns.map((col) => `var(${columnWidthAtIndex3}-${col.computedVisibleIndex})`).join(" + ") + " )" : `var(${columnWidthAtIndex3}-${firstColumn.computedVisibleIndex})`;
-  const zIndex2 = computedVisibleColumns.length * 10 - firstColumn.computedVisibleIndex * 10 + height * (columnGroupsMaxDepth - columnGroup.depth + 2);
+  const width = columns.length > 1 ? `calc( ` + columns.map((col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
+  const zIndex2 = `calc(var(${columnZIndexAtIndex5}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
   return /* @__PURE__ */ React25.createElement("div", {
     ref: props.domRef,
     "data-group-id": columnGroup.uniqueGroupId,
@@ -5608,7 +5815,7 @@ function InfiniteTableHeaderFn(props) {
     componentState: { headerBrain, headerOptions }
   } = useInfiniteTable();
   const { computedVisibleColumnsMap, showColumnFilters } = computed;
-  (0, import_react27.useEffect)(() => {
+  (0, import_react26.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       if (domRef.current) {
         domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
@@ -5617,7 +5824,7 @@ function InfiniteTableHeaderFn(props) {
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = (0, import_react27.useRef)(null);
+  const domRef = (0, import_react26.useRef)(null);
   const headerCls = HeaderClsRecipe({
     overflow: false,
     virtualized: true
@@ -5627,7 +5834,7 @@ function InfiniteTableHeaderFn(props) {
     className: join(TableHeaderClassName, `${TableHeaderClassName}--virtualized`, className, headerCls),
     style: __spreadProps(__spreadValues({}, style), { height: columnHeaderHeight })
   };
-  const renderCell = (0, import_react27.useCallback)((params) => {
+  const renderCell = (0, import_react26.useCallback)((params) => {
     const {
       rowIndex,
       colIndex,
@@ -5789,7 +5996,7 @@ function TableHeaderWrapper(props) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var React28 = __toModule(require("react"));
-var import_react28 = __toModule(require("react"));
+var import_react27 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
 function decamelize(str, options) {
@@ -5797,14 +6004,6 @@ function decamelize(str, options) {
   return str.replace(/([a-z\d])([A-Z])/g, "$1" + separator + "$2").replace(new RegExp("(" + separator + "[A-Z])([A-Z])", "g"), "$1" + separator + "$2").toLowerCase();
 }
 
-// src/components/InfiniteTable/InfiniteCls.css.ts
-var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
-var FooterCls = "_16lm1iw1";
-var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwn _16lm1iw13 _16lm1iw0";
-var InfiniteClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "_1yeub2ve"]] });
-var InfiniteClsShiftingColumns = "_16lm1iwq";
-var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
-
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var defaultStyle = {
   padding: ThemeVars.spacing[2],
@@ -5846,7 +6045,7 @@ var InfiniteTableLicenseFooter = React28.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -5875,8 +6074,9 @@ var InfiniteTableLicenseFooter = React28.forwardRef(function InfiniteTableLicens
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 var React29 = __toModule(require("react"));
-var import_react29 = __toModule(require("react"));
+var import_react28 = __toModule(require("react"));
 var { rootClassName: rootClassName11 } = internalProps;
+var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
 var InfiniteTableColumnCellContext = React29.createContext(null);
 var InfiniteTableColumnCellClassName = `${rootClassName11}ColumnCell`;
 function isColumnWithField(c) {
@@ -5933,7 +6133,7 @@ function InfiniteTableColumnCellFn(props) {
       value
     });
   }
-  const onClick = (0, import_react29.useCallback)(() => {
+  const onClick = (0, import_react28.useCallback)(() => {
     if (keyboardNavigation === "row") {
       componentActions.activeRowIndex = rowIndex;
       return;
@@ -5973,7 +6173,7 @@ function InfiniteTableColumnCellFn(props) {
     isGroupRow,
     rowIndex,
     toggleGroupRow,
-    toggleCurrentGroupRow: (0, import_react29.useCallback)(() => {
+    toggleCurrentGroupRow: (0, import_react28.useCallback)(() => {
       if (!rowInfo.isGroupRow) {
         return;
       }
@@ -5982,7 +6182,7 @@ function InfiniteTableColumnCellFn(props) {
     groupBy: computedDataSource.groupBy,
     pivotBy: computedDataSource.pivotBy
   });
-  const renderChildren = (0, import_react29.useCallback)(() => {
+  const renderChildren = (0, import_react28.useCallback)(() => {
     if (hidden) {
       return null;
     }
@@ -6006,7 +6206,8 @@ function InfiniteTableColumnCellFn(props) {
   }
   style = column.style ? typeof column.style === "function" ? __spreadValues(__spreadValues({}, style), column.style(stylingRenderParam) || {}) : __spreadValues(__spreadValues({}, style), column.style) : style || {};
   style.height = rowHeight;
-  const memoizedStyle = (0, import_react29.useMemo)(() => style, [!style ? null : JSON.stringify(style)]);
+  style.zIndex = `var(${columnZIndexAtIndex6}-${column.computedVisibleIndex})`;
+  const memoizedStyle = (0, import_react28.useMemo)(() => style, [!style ? null : JSON.stringify(style)]);
   const odd = (rowInfo.indexInAll != null ? rowInfo.indexInAll : rowIndex) % 2 === 1;
   const zebra = showZebraRows ? odd ? "odd" : "even" : false;
   const cellProps = {
@@ -6029,7 +6230,7 @@ function InfiniteTableColumnCellFn(props) {
 }
 var InfiniteTableColumnCell = React29.memo(InfiniteTableColumnCellFn);
 function useInfiniteColumnCell() {
-  const result = (0, import_react29.useContext)(InfiniteTableColumnCellContext);
+  const result = (0, import_react28.useContext)(InfiniteTableColumnCellContext);
   return result;
 }
 
@@ -6043,8 +6244,8 @@ var RowHoverCls = "_7pupv01";
 var React30 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/LoadMask.css.ts
-var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwv _16lm1iwx _16lm1iw11 _16lm1iwz", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwv _16lm1iwx _16lm1iw11 _16lm1iwz" };
-var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwv _16lm1iwx _16lm1iw11 _16lm1iwz";
+var LoadMaskCls = { visible: "qy58ya1 qy58ya0 _16lm1iw2 _16lm1iwx _16lm1iwz _16lm1iw13 _16lm1iw11", hidden: "qy58ya2 qy58ya0 _16lm1iw2 _16lm1iwx _16lm1iwz _16lm1iw13 _16lm1iw11" };
+var LoadMaskOverlayCls = "qy58ya3 _16lm1iw2 _16lm1iwx _16lm1iwz _16lm1iw13 _16lm1iw11";
 var LoadMaskTextCls = "qy58ya4";
 
 // src/components/InfiniteTable/components/LoadMask.tsx
@@ -6076,24 +6277,40 @@ function getImperativeApi(getState, getComputed, getDataSourceState, componentAc
     scrollRowIntoView(rowIndex, config = { offset: 0 }) {
       const state = getState();
       const scrollPosition = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
+      if (!scrollPosition) {
+        return false;
+      }
       const currentScrollPosition = state.brain.getScrollPosition();
+      const scrollTopMax = state.brain.scrollTopMax;
+      if (scrollPosition.scrollTop > scrollTopMax + (config.offset || 0)) {
+        return false;
+      }
       if (scrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
         state.scrollerDOMRef.current.scrollTop = scrollPosition.scrollTop;
       }
+      return true;
     },
     scrollColumnIntoView(colId, config = { offset: 0 }) {
       const state = getState();
       const computed = getComputed();
       const computedColumn = computed.computedVisibleColumnsMap.get(colId);
       if (!computedColumn) {
-        return;
+        return false;
       }
       const colIndex = computedColumn.computedVisibleIndex;
       const scrollPosition = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
+      if (!scrollPosition) {
+        return false;
+      }
       const currentScrollPosition = state.brain.getScrollPosition();
+      const scrollLeftMax = state.brain.scrollLeftMax;
+      if (scrollPosition.scrollLeft > scrollLeftMax + (config.offset || 0)) {
+        return false;
+      }
       if (scrollPosition.scrollLeft !== currentScrollPosition.scrollLeft) {
         state.scrollerDOMRef.current.scrollLeft = scrollPosition.scrollLeft;
       }
+      return true;
     },
     scrollCellIntoView(rowIndex, colIdOrIndex, config = { offset: 0 }) {
       const state = getState();
@@ -6102,30 +6319,45 @@ function getImperativeApi(getState, getComputed, getDataSourceState, componentAc
       if (typeof colIdOrIndex === "string") {
         const computedColumn = computed.computedVisibleColumnsMap.get(colIdOrIndex);
         if (!computedColumn) {
-          return;
+          return false;
         }
         colIndex = computedColumn.computedVisibleIndex;
       }
       const scrollPositionForCol = state.renderer.getScrollPositionForScrollColumnIntoView(colIndex, config);
       const scrollPositionForRow = state.renderer.getScrollPositionForScrollRowIntoView(rowIndex, config);
+      if (!scrollPositionForCol || !scrollPositionForRow) {
+        return false;
+      }
       const newScrollPosition = {
         scrollLeft: scrollPositionForCol.scrollLeft,
         scrollTop: scrollPositionForRow.scrollTop
       };
       const currentScrollPosition = state.brain.getScrollPosition();
+      const scrollLeftMax = state.brain.scrollLeftMax;
+      const scrollTopMax = state.brain.scrollTopMax;
+      if (newScrollPosition.scrollLeft > scrollLeftMax + (config.offset || 0)) {
+        return false;
+      }
+      if (newScrollPosition.scrollTop > scrollTopMax + (config.offset || 0)) {
+        return false;
+      }
       if (newScrollPosition.scrollLeft !== currentScrollPosition.scrollLeft) {
         state.scrollerDOMRef.current.scrollLeft = newScrollPosition.scrollLeft;
       }
       if (newScrollPosition.scrollTop !== currentScrollPosition.scrollTop) {
         state.scrollerDOMRef.current.scrollTop = newScrollPosition.scrollTop;
       }
+      return true;
     }
   };
+  if (false) {
+    globalThis.imperativeApi = imperativeApi;
+  }
   return imperativeApi;
 }
 
 // src/components/InfiniteTable/hooks/useAutoSizeColumns.ts
-var import_react30 = __toModule(require("react"));
+var import_react29 = __toModule(require("react"));
 var OFFSET = 10;
 function getColumnContentMaxWidths(domRef, options) {
   var _a;
@@ -6191,11 +6423,11 @@ function useAutoSizeColumns() {
     componentActions,
     componentState: { domRef, ready, autoSizeColumnsKey, brain }
   } = useComponentState();
-  const [refreshId, setRefreshId] = (0, import_react30.useState)(0);
+  const [refreshId, setRefreshId] = (0, import_react29.useState)(0);
   const theKey = typeof autoSizeColumnsKey === "object" ? autoSizeColumnsKey.key : autoSizeColumnsKey;
   const getTheKey = useLatest(theKey);
-  const lastExecutedIdentifierRef = (0, import_react30.useRef)(null);
-  (0, import_react30.useEffect)(() => {
+  const lastExecutedIdentifierRef = (0, import_react29.useRef)(null);
+  (0, import_react29.useEffect)(() => {
     const key = getTheKey();
     if (key == null) {
       return;
@@ -6208,7 +6440,7 @@ function useAutoSizeColumns() {
     };
     return brain.onRenderRangeChange(onChange);
   }, [brain]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     var _a;
     if (theKey == null) {
       return;
@@ -6253,8 +6485,8 @@ function useAutoSizeColumns() {
 }
 
 // src/components/InfiniteTable/hooks/useCellRendering.tsx
+var import_react30 = __toModule(require("react"));
 var import_react31 = __toModule(require("react"));
-var import_react32 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
 function useYourBrain(param) {
@@ -6324,13 +6556,13 @@ function useCellRendering(param) {
     bodySize,
     rowspan
   });
-  const scrollTopMaxRef = (0, import_react31.useRef)(0);
-  (0, import_react31.useEffect)(() => {
+  const scrollTopMaxRef = (0, import_react30.useRef)(0);
+  (0, import_react30.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       scrollTopMaxRef.current = brain.scrollTopMax;
     });
   }, [brain]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     return brain.onScrollStop((scrollPosition) => {
       const { scrollTop } = scrollPosition;
       if (scrollTop === 0) {
@@ -6347,7 +6579,7 @@ function useCellRendering(param) {
       }
     });
   }, [brain, onScrollToTop, onScrollToBottom]);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
@@ -6358,10 +6590,10 @@ function useCellRendering(param) {
     }
   }, [!!bodySize.height]);
   const [, rerender] = useRerender();
-  (0, import_react31.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
-  const renderCell = (0, import_react31.useCallback)((params) => {
+  const renderCell = (0, import_react30.useCallback)((params) => {
     const {
       rowIndex,
       colIndex,
@@ -6396,7 +6628,7 @@ function useCellRendering(param) {
       rowStyle,
       rowClassName
     };
-    return /* @__PURE__ */ import_react32.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
+    return /* @__PURE__ */ import_react31.default.createElement(InfiniteTableColumnCell, __spreadValues({}, cellProps));
   }, [
     rowHeight,
     getData,
@@ -6414,13 +6646,13 @@ function useCellRendering(param) {
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react46 = __toModule(require("react"));
+var import_react45 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
-var import_react34 = __toModule(require("react"));
+var import_react33 = __toModule(require("react"));
 
 // src/components/hooks/useInterceptedMap.ts
-var import_react33 = __toModule(require("react"));
+var import_react32 = __toModule(require("react"));
 function interceptMap(map2, fns) {
   const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
@@ -6484,20 +6716,6 @@ function computeColumnGroupsDepths(columnGroups) {
   return map2;
 }
 
-// src/components/InfiniteTable/utils/rafFn.ts
-var rafFn = (fn) => {
-  let rafId = 0;
-  return (...args) => {
-    if (rafId) {
-      cancelAnimationFrame(rafId);
-    }
-    rafId = requestAnimationFrame(() => {
-      rafId = 0;
-      fn(...args);
-    });
-  };
-};
-
 // src/components/InfiniteTable/hooks/useColumnGroups.ts
 function useColumnGroups() {
   const {
@@ -6508,7 +6726,7 @@ function useColumnGroups() {
     componentActions,
     getComponentState
   } = useComponentState();
-  (0, import_react34.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     const recompute = () => {
       componentActions.columnGroupsDepthsMap = computeColumnGroupsDepths(computedColumnGroups);
     };
@@ -6519,7 +6737,7 @@ function useColumnGroups() {
       set: update
     });
   }, [computedColumnGroups]);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     return interceptMap(collapsedColumnGroups, {
       set: (key, visibleCol) => {
         const colIds = key.slice(1);
@@ -6554,10 +6772,10 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnRowspan.ts
-var import_react35 = __toModule(require("react"));
+var import_react34 = __toModule(require("react"));
 function useColumnRowspan(computedVisibleColumns) {
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const rowspan = (0, import_react35.useMemo)(() => {
+  const rowspan = (0, import_react34.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ rowIndex, colIndex }) => {
       const dataArray = getDataSourceState().dataArray;
@@ -6583,10 +6801,10 @@ function useColumnRowspan(computedVisibleColumns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react36 = __toModule(require("react"));
+var import_react35 = __toModule(require("react"));
 var debug4 = dbg("useColumnSizeFn");
 function useColumnSizeFn(columns) {
-  const columnSize = (0, import_react36.useCallback)((index) => {
+  const columnSize = (0, import_react35.useCallback)((index) => {
     const column = columns[index];
     if (false) {
       debug4("cannot find column at index", index, columns);
@@ -6597,7 +6815,7 @@ function useColumnSizeFn(columns) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react42 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 var React34 = __toModule(require("react"));
@@ -6612,7 +6830,7 @@ var showLoadingIcon = (rowInfo) => {
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.tsx
 var React32 = __toModule(require("react"));
-var import_react37 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/icons/ExpanderIcon.css.ts
 var import_createRuntimeFn6 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -6623,7 +6841,7 @@ var ExpanderIconClsVariants = (0, import_createRuntimeFn6.createRuntimeFn)({ def
 function ExpanderIcon(props) {
   var _a;
   const { size = 24 } = props;
-  const [expanded, setExpanded] = (0, import_react37.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
+  const [expanded, setExpanded] = (0, import_react36.useState)((_a = props.expanded) != null ? _a : props.defaultExpanded);
   const onClick = () => {
     var _a2;
     (_a2 = props.onChange) == null ? void 0 : _a2.call(props, !expanded);
@@ -6824,11 +7042,11 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useEffectWithRaf.ts
-var import_react38 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 function useEffectWithRaf(fn, deps) {
-  const rafId = (0, import_react38.useRef)(0);
-  const removeFnRaf = (0, import_react38.useRef)();
-  (0, import_react38.useEffect)(() => {
+  const rafId = (0, import_react37.useRef)(0);
+  const removeFnRaf = (0, import_react37.useRef)();
+  (0, import_react37.useEffect)(() => {
     rafId.current = requestAnimationFrame(() => {
       removeFnRaf.current = fn();
     });
@@ -6845,7 +7063,7 @@ function useEffectWithRaf(fn, deps) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react41 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 
 // src/utils/groupAndPivot/index.ts
 var LAZY_ROOT_KEY_FOR_GROUPS = "____root____";
@@ -7486,15 +7704,15 @@ var GroupRowsState = class {
 };
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-var import_react40 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 
 // src/components/hooks/useEffectWithChanges.ts
-var import_react39 = __toModule(require("react"));
+var import_react38 = __toModule(require("react"));
 function useEffectWithChanges(fn, deps) {
-  const prevRef = (0, import_react39.useRef)({});
-  const oldValuesRef = (0, import_react39.useRef)({});
+  const prevRef = (0, import_react38.useRef)({});
+  const oldValuesRef = (0, import_react38.useRef)({});
   const oldValues = oldValuesRef.current;
-  const changesRef = (0, import_react39.useRef)({});
+  const changesRef = (0, import_react38.useRef)({});
   const changes = changesRef.current;
   const useEffectDeps = [];
   for (const k in deps) {
@@ -7507,7 +7725,7 @@ function useEffectWithChanges(fn, deps) {
     }
   }
   prevRef.current = deps;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const changes2 = changesRef.current;
     const result = fn(changes2, oldValues);
     changesRef.current = {};
@@ -7775,12 +7993,12 @@ function useLoadData() {
     livePaginationCursor,
     cursorId: stateCursorId
   } = componentState;
-  const [scrollbars, setScrollbars] = (0, import_react40.useState)({
+  const [scrollbars, setScrollbars] = (0, import_react39.useState)({
     vertical: false,
     horizontal: false
   });
-  const scrollbarsRef = (0, import_react40.useRef)(scrollbars);
-  (0, import_react40.useEffect)(() => {
+  const scrollbarsRef = (0, import_react39.useRef)(scrollbars);
+  (0, import_react39.useEffect)(() => {
     notifyScrollbarsChange.onChange((scrollbars2) => {
       if (!scrollbars2) {
         return;
@@ -7790,7 +8008,7 @@ function useLoadData() {
     });
     return () => notifyScrollbarsChange.destroy();
   }, [notifyScrollbarsChange]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!livePagination) {
       return;
     }
@@ -7804,7 +8022,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [livePaginationCursor]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (!livePagination || livePaginationCursor !== void 0) {
       return;
     }
@@ -7818,7 +8036,7 @@ function useLoadData() {
     });
     return () => cancelAnimationFrame(frameId);
   }, [dataArray.length, livePaginationCursor]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     const state = getComponentState();
     const { livePaginationCursor: livePaginationCursor2, livePagination: livePagination2, dataArray: dataArray2 } = state;
     if (!scrollbars.vertical && livePagination2) {
@@ -7836,7 +8054,7 @@ function useLoadData() {
     filterValue,
     cursorId: livePagination ? stateCursorId : null
   };
-  const initialRef = (0, import_react40.useRef)(true);
+  const initialRef = (0, import_react39.useRef)(true);
   useLazyLoadRange();
   useEffectWithChanges(() => {
     const componentState2 = getComponentState();
@@ -7868,7 +8086,7 @@ function useLazyLoadRange() {
     componentActions: actions,
     componentState
   } = useComponentState();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     actions.lazyLoadCacheOfLoadedBatches = new DeepMap();
   }, [componentState.data, componentState.dataParams]);
   const {
@@ -7877,7 +8095,7 @@ function useLazyLoadRange() {
     dataArray,
     scrollStopDelayUpdatedByTable
   } = componentState;
-  const latestRenderRangeRef = (0, import_react40.useRef)(null);
+  const latestRenderRangeRef = (0, import_react39.useRef)(null);
   const loadRange = (renderRange, cache = getComponentState().lazyLoadCacheOfLoadedBatches) => {
     const componentState2 = getComponentState();
     renderRange = renderRange || latestRenderRangeRef.current;
@@ -7896,8 +8114,8 @@ function useLazyLoadRange() {
       componentActions: actions
     }, cache);
   };
-  const debouncedLoadRange = (0, import_react40.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
-  (0, import_react40.useEffect)(() => {
+  const debouncedLoadRange = (0, import_react39.useMemo)(() => debounce(loadRange, { wait: scrollStopDelayUpdatedByTable }), [scrollStopDelayUpdatedByTable]);
+  (0, import_react39.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       return notifyRenderRangeChange.onChange((renderRange) => {
         latestRenderRangeRef.current = renderRange;
@@ -7906,7 +8124,7 @@ function useLazyLoadRange() {
     }
     return;
   }, [lazyLoadBatchSize]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     if (lazyLoadBatchSize && lazyLoadBatchSize > 0) {
       debouncedLoadRange();
     }
@@ -8747,7 +8965,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react41.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react40.useCallback)((groupKeys) => {
     const state = getDataSourceState();
     const newState = new GroupRowsState(state.groupRowsState);
     newState.toggleGroupRow(groupKeys);
@@ -8779,7 +8997,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupByMap(groupBy) {
-  const groupByMap = (0, import_react42.useMemo)(() => {
+  const groupByMap = (0, import_react41.useMemo)(() => {
     return groupBy.reduce((acc, groupBy2, index) => {
       acc.set(groupBy2.field, {
         groupBy: groupBy2,
@@ -8803,13 +9021,13 @@ function useColumnsWhen() {
     }
   } = useComponentState();
   const groupByMap = useGroupByMap(groupBy);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     if (pivotGrandTotalColumnPosition != void 0) {
       dataSourceActions.pivotGrandTotalColumnPosition = pivotGrandTotalColumnPosition;
     }
@@ -8883,7 +9101,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupByMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  (0, import_react42.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupByMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -8912,7 +9130,7 @@ function useColumnsWhenGrouping() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react42.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const update = () => {
       const columnsWhenGrouping = getColumnsWhenGrouping({
         columns,
@@ -9048,7 +9266,7 @@ function useHideColumns(groupByMap) {
     hideEmptyGroupColumns ? groupRowsState : null,
     hideEmptyGroupColumns
   ]);
-  (0, import_react42.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     const isGrouped = groupBy.length > 0;
     const currentState = getComponentState();
     const { controlledColumnVisibility, columnVisibility } = currentState;
@@ -9163,7 +9381,7 @@ function getColumnsWhenGrouping(params) {
 }
 
 // src/components/InfiniteTable/hooks/useComputedVisibleColumns.ts
-var import_react44 = __toModule(require("react"));
+var import_react43 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/adjustColumnOrderForPinning.ts
 var order = ["start", void 0, "end"];
@@ -9213,7 +9431,7 @@ var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId)
 };
 var getComputedPinned = (colId, columnPinning) => {
   const pinned = columnPinning.get(colId);
-  const computedPinned = pinned === "start" ? "start" : pinned === "end" ? "end" : false;
+  const computedPinned = pinned === "start" || pinned === true ? "start" : pinned === "end" ? "end" : false;
   return computedPinned;
 };
 var getComputedVisibleColumns = ({
@@ -9349,6 +9567,7 @@ var getComputedVisibleColumns = ({
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
     const colType = getColumnComputedType(c, columnTypes);
+    const computedVisibleIndex = i;
     const sortingInfo = sortedMap[id] ? sortedMap[id] : c.field ? (_a = sortedMap[c.field]) != null ? _a : null : null;
     const computedSortInfo = (_b = sortingInfo == null ? void 0 : sortingInfo.sortInfo) != null ? _b : null;
     const computedSorted = !!computedSortInfo;
@@ -9361,7 +9580,15 @@ var getComputedVisibleColumns = ({
     const computedMaxWidth = maxSizes[i] || 1e4;
     const computedPinned = getComputedPinned(id, columnPinning);
     const computedLast = i === visibleColumnOrder.length - 1;
+    let computedVisibleIndexInCategory = computedVisibleIndex;
     const computedPinningOffset = computedPinned === "start" ? computedPinnedStartColumnsWidth : computedPinned === "end" ? computedPinnedEndColumnsWidth : computedOffset - computedPinnedStartColumnsWidth;
+    if (computedPinned == "start") {
+      computedVisibleIndexInCategory = computedVisibleIndex;
+    } else if (computedPinned === "end") {
+      computedVisibleIndexInCategory = computedVisibleIndex - (computedPinnedStartColumns.length + computedUnpinnedColumns.length);
+    } else {
+      computedVisibleIndexInCategory = computedVisibleIndex - computedPinnedStartColumns.length;
+    }
     const computedAbsoluteOffset = computedPinned === "start" || computedPinned === false ? computedOffset : firstPinnedEndAbsoluteOffset + computedPinnedEndColumnsWidth;
     const computedFirstInCategory = computedPinned !== prevPinned;
     const computedLastInCategory = computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning);
@@ -9410,6 +9637,7 @@ var getComputedVisibleColumns = ({
       computedWidth,
       computedAbsoluteOffset,
       computedPinningOffset,
+      computedVisibleIndexInCategory,
       computedOffset,
       computedSortable,
       computedSortInfo,
@@ -9418,7 +9646,7 @@ var getComputedVisibleColumns = ({
       computedSorted,
       computedSortedAsc,
       computedSortedDesc,
-      computedVisibleIndex: i,
+      computedVisibleIndex,
       computedPinned,
       computedDraggable: (_u = (_t = c.draggable) != null ? _t : draggableColumns) != null ? _u : true,
       computedFirstInCategory,
@@ -9511,10 +9739,10 @@ var getComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var import_react43 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
-  (0, import_react43.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     const update = rafFn(rerender);
     return interceptMap(map2, {
       set: update,
@@ -9568,7 +9796,7 @@ var useComputedVisibleColumns = ({
     computedPinnedEndOffset,
     computedPinnedEndWidth,
     computedPinnedStartWidth
-  } = (0, import_react44.useMemo)(() => {
+  } = (0, import_react43.useMemo)(() => {
     return getComputedVisibleColumns({
       columns,
       bodySize,
@@ -9639,7 +9867,7 @@ var useComputedVisibleColumns = ({
 };
 
 // src/components/InfiniteTable/hooks/useScrollbars.ts
-var import_react45 = __toModule(require("react"));
+var import_react44 = __toModule(require("react"));
 var INITIAL_SCROLLBARS = {
   vertical: false,
   horizontal: false
@@ -9647,8 +9875,8 @@ var INITIAL_SCROLLBARS = {
 function useScrollbars(brain) {
   const { getComponentState: getInfiniteTableState } = useComponentState();
   const { getState: getDataSourceState } = useDataSourceContextValue();
-  const [scrollbars, setScrollbars] = (0, import_react45.useState)(INITIAL_SCROLLBARS);
-  (0, import_react45.useEffect)(() => {
+  const [scrollbars, setScrollbars] = (0, import_react44.useState)(INITIAL_SCROLLBARS);
+  (0, import_react44.useEffect)(() => {
     return brain.onRenderCountChange(() => {
       const { scrollTopMax, scrollLeftMax } = brain;
       setScrollbars({
@@ -9657,7 +9885,7 @@ function useScrollbars(brain) {
       });
     });
   }, [brain]);
-  (0, import_react45.useLayoutEffect)(() => {
+  (0, import_react44.useLayoutEffect)(() => {
     const dataSourceState = getDataSourceState();
     const { onScrollbarsChange } = getInfiniteTableState();
     const { notifyScrollbarsChange } = dataSourceState;
@@ -9688,7 +9916,7 @@ function useComputed() {
     bodySize,
     showSeparatePivotColumnForSingleAggregation
   } = componentState;
-  (0, import_react46.useState)(() => {
+  (0, import_react45.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -9700,13 +9928,13 @@ function useComputed() {
       }
     });
   });
-  (0, import_react46.useEffect)(() => {
+  (0, import_react45.useEffect)(() => {
     dataSourceActions.showSeparatePivotColumnForSingleAggregation = showSeparatePivotColumnForSingleAggregation;
   }, [showSeparatePivotColumnForSingleAggregation]);
   const { multiSort, filterValue } = dataSourceState;
   useColumnGroups();
   const { toggleGroupRow } = useColumnsWhen();
-  const setSortInfo = (0, import_react46.useCallback)((sortInfo) => {
+  const setSortInfo = (0, import_react45.useCallback)((sortInfo) => {
     var _a2;
     const newSortInfo = getDataSourceState().multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
@@ -9783,109 +10011,8 @@ function useComputed() {
   };
 }
 
-// src/components/InfiniteTable/hooks/useDOMProps.ts
-var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
-var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
-var activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
-var activeCellColOffset = stripVar(InternalVars.activeCellColOffset);
-function useDOMProps(initialDOMProps) {
-  const { computed, componentState, componentActions } = useInfiniteTable();
-  const {
-    columnShifts,
-    focused,
-    focusedWithin,
-    domRef,
-    onBlurWithin,
-    onFocusWithin,
-    onSelfFocus,
-    onSelfBlur,
-    activeCellIndex
-  } = componentState;
-  const {
-    computedPinnedStartColumnsWidth,
-    computedPinnedEndColumnsWidth,
-    computedVisibleColumns
-  } = computed;
-  const cssVars = computedVisibleColumns.reduce((vars, col) => {
-    const index = col.computedVisibleIndex;
-    vars[`${columnWidthAtIndex4}-${index}`] = col.computedWidth + "px";
-    vars[`${columnOffsetAtIndex2}-${index}`] = col.computedOffset + "px";
-    return vars;
-  }, {});
-  if (activeCellIndex != null) {
-    cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(activeCellIndex[1])})`;
-    cssVars[activeCellColOffset] = `var(${getCSSVarNameForColOffset(activeCellIndex[1])})`;
-  }
-  const setFocused = rafFn((focused2) => {
-    componentActions.focused = focused2;
-  });
-  const setFocusedWithin = rafFn((focused2) => {
-    componentActions.focusedWithin = focused2;
-  });
-  const onFocus = (event) => {
-    var _a;
-    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onFocus) == null ? void 0 : _a.call(initialDOMProps, event);
-    if (event.target === domRef.current) {
-      setFocused(true);
-      onSelfFocus == null ? void 0 : onSelfFocus(event);
-      if (focusedWithin) {
-        setFocusedWithin(false);
-        onBlurWithin == null ? void 0 : onBlurWithin(event);
-      }
-    } else {
-      if (!focusedWithin) {
-        setFocusedWithin(true);
-        onFocusWithin == null ? void 0 : onFocusWithin(event);
-      }
-    }
-  };
-  const onBlur = (event) => {
-    var _a, _b;
-    (_a = initialDOMProps == null ? void 0 : initialDOMProps.onBlur) == null ? void 0 : _a.call(initialDOMProps, event);
-    if (event.target === domRef.current) {
-      setFocused(false);
-      onSelfBlur == null ? void 0 : onSelfBlur(event);
-      if (focusedWithin) {
-        setFocusedWithin(false);
-        onBlurWithin == null ? void 0 : onBlurWithin(event);
-      }
-    } else {
-      const contained = (_b = domRef.current) == null ? void 0 : _b.contains(event.relatedTarget);
-      if (!contained) {
-        setFocusedWithin(false);
-        onBlurWithin == null ? void 0 : onBlurWithin(event);
-      }
-    }
-  };
-  const domProps = __spreadProps(__spreadValues({
-    tabIndex: 0
-  }, initialDOMProps), {
-    onFocus,
-    onBlur
-  });
-  const className = join(InfiniteTableClassName, InfiniteCls, columnShifts ? `${InfiniteClsShiftingColumns} ${InfiniteTableClassName}--shifting` : "", domProps == null ? void 0 : domProps.className, computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start` : null, computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end` : null, focused ? `${InfiniteTableClassName}--focused` : null, focusedWithin ? `${InfiniteTableClassName}--focused-within` : null, focused && componentState.focusedClassName ? componentState.focusedClassName : null, focusedWithin && componentState.focusedWithinClassName ? componentState.focusedWithinClassName : null, computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null, computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null, InfiniteClsRecipe({
-    hasPinnedStart: !!computedPinnedStartColumnsWidth,
-    hasPinnedEnd: !!computedPinnedEndColumnsWidth,
-    focused,
-    focusedWithin
-  }));
-  domProps.className = className;
-  domProps.style = __spreadValues(__spreadValues({}, initialDOMProps == null ? void 0 : initialDOMProps.style), cssVars);
-  if (focused) {
-    if (componentState.focusedStyle) {
-      Object.assign(domProps.style, componentState.focusedStyle);
-    }
-  }
-  if (focusedWithin) {
-    if (componentState.focusedWithinStyle) {
-      Object.assign(domProps.style, componentState.focusedWithinStyle);
-    }
-  }
-  return domProps;
-}
-
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react47 = __toModule(require("react"));
+var import_react46 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -10043,10 +10170,10 @@ var isInsideSandbox = () => {
 };
 var isInsidePlayground = isInsideSandbox() || isInsideSandpack();
 var useLicense = (licenseKey = "") => {
-  const valid = (0, import_react47.useMemo)(() => {
+  const valid = (0, import_react46.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.14"
+      version: "0.3.17"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -10056,6 +10183,73 @@ var useLicense = (licenseKey = "") => {
   return valid;
 };
 
+// src/components/InfiniteTable/hooks/useScrollToActiveCell.ts
+var import_react47 = __toModule(require("react"));
+var RETRIES = 10;
+function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
+  const didScrollRef = (0, import_react47.useRef)(false);
+  const rafId = (0, import_react47.useRef)(null);
+  (0, import_react47.useEffect)(() => {
+    if (activeCellIndex != null) {
+      didScrollRef.current = false;
+      cancelAnimationFrame(rafId.current);
+    }
+  }, [activeCellIndex]);
+  (0, import_react47.useEffect)(() => {
+    if (activeCellIndex != null && !didScrollRef.current) {
+      let tryScroll = function(times = 0) {
+        times++;
+        cancelAnimationFrame(rafId.current);
+        rafId.current = requestAnimationFrame(() => {
+          didScrollRef.current = imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
+            offset: 30
+          });
+          if (!didScrollRef.current && times < RETRIES) {
+            tryScroll(times);
+          }
+        });
+      };
+      tryScroll();
+    }
+    return () => {
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [activeCellIndex, dataCount]);
+}
+
+// src/components/InfiniteTable/hooks/useScrollToActiveRow.ts
+var import_react48 = __toModule(require("react"));
+var RETRIES2 = 10;
+function useScrollToActiveRow(activeRowIndex, dataCount, imperativeApi) {
+  const didScrollRef = (0, import_react48.useRef)(false);
+  const rafId = (0, import_react48.useRef)(null);
+  (0, import_react48.useEffect)(() => {
+    if (activeRowIndex != null) {
+      didScrollRef.current = false;
+      cancelAnimationFrame(rafId.current);
+    }
+  }, [activeRowIndex]);
+  (0, import_react48.useEffect)(() => {
+    if (activeRowIndex != null && !didScrollRef.current) {
+      let tryScroll = function(times = 0) {
+        times++;
+        rafId.current = requestAnimationFrame(() => {
+          didScrollRef.current = imperativeApi.scrollRowIntoView(activeRowIndex, {
+            offset: 30
+          });
+          if (!didScrollRef.current && times < RETRIES2) {
+            tryScroll(times);
+          }
+        });
+      };
+      tryScroll();
+    }
+    return () => {
+      cancelAnimationFrame(rafId.current);
+    };
+  }, [activeRowIndex, dataCount]);
+}
+
 // src/components/utils/clamp.ts
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), max);
@@ -10204,7 +10398,7 @@ function handleKeyboardNavigation(options) {
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
-var import_react48 = __toModule(require("react"));
+var import_react49 = __toModule(require("react"));
 
 // src/components/VirtualBrain/ScrollListener.ts
 var initialScrollPosition = {
@@ -10299,11 +10493,10 @@ function initSetupState2() {
     propsCache: new Map([]),
     brain,
     headerBrain,
-    columnShifts: null,
-    domRef: (0, import_react48.createRef)(),
-    scrollerDOMRef: (0, import_react48.createRef)(),
-    portalDOMRef: (0, import_react48.createRef)(),
-    activeCellIndicatorDOMRef: (0, import_react48.createRef)(),
+    domRef: (0, import_react49.createRef)(),
+    scrollerDOMRef: (0, import_react49.createRef)(),
+    portalDOMRef: (0, import_react49.createRef)(),
+    activeCellIndicatorDOMRef: (0, import_react49.createRef)(),
     onRowHeightCSSVarChange: buildSubscriptionCallback(),
     onColumnHeaderHeightCSSVarChange: buildSubscriptionCallback(),
     bodySize: {
@@ -10314,11 +10507,11 @@ function initSetupState2() {
       scrollTop: 0,
       scrollLeft: 0
     },
+    columnReorderInProgress: false,
     ready: false,
     focused: false,
     focusedWithin: false,
     columnsWhenGrouping: columnsGeneratedForGrouping,
-    draggingColumnId: null,
     pinnedStartScrollListener: new ScrollListener(),
     pinnedEndScrollListener: new ScrollListener(),
     columnsWhenInlineGroupRenderStrategy: void 0
@@ -10372,7 +10565,6 @@ var forwardProps3 = (setupState) => {
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
     pivotGrandTotalColumnPosition: 1,
     licenseKey: (licenseKey) => licenseKey || "",
-    keyboardNavigation: (keyboardNavigation) => keyboardNavigation != null ? keyboardNavigation : "cell",
     activeRowIndex: 1,
     activeCellIndex: 1,
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
@@ -10419,7 +10611,7 @@ var cleanupState = (state) => {
   state.pinnedStartScrollListener.destroy();
 };
 var mapPropsToState2 = (params) => {
-  var _a, _b;
+  var _a, _b, _c;
   const { props, state, oldState, parentState } = params;
   const computedColumnGroups = state.pivotColumnGroups || state.columnGroups;
   const columnGroupsDepthsMap = state.columnGroups && state.columnGroups != (oldState == null ? void 0 : oldState.columnGroups) || state.pivotColumnGroups && state.pivotColumnGroups != (oldState == null ? void 0 : oldState.pivotColumnGroups) ? computeColumnGroupsDepths(computedColumnGroups) : state.columnGroupsDepthsMap;
@@ -10435,7 +10627,8 @@ var mapPropsToState2 = (params) => {
     groupRenderStrategy,
     groupBy,
     computedColumns,
-    columnHeaderCssEllipsis: (_b = (_a = props.columnHeaderCssEllipsis) != null ? _a : props.columnCssEllipsis) != null ? _b : true,
+    keyboardNavigation: (_a = state.keyboardNavigation) != null ? _a : state.activeCellIndex != null ? "cell" : state.activeRowIndex != null ? "row" : "cell",
+    columnHeaderCssEllipsis: (_c = (_b = props.columnHeaderCssEllipsis) != null ? _b : props.columnCssEllipsis) != null ? _c : true,
     columnGroupsDepthsMap,
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
     computedColumnGroups,
@@ -10472,11 +10665,11 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
     getState
   } = useInfiniteTable();
   const {
-    componentState: { loading },
+    componentState: { loading, dataArray },
     getState: getDataSourceState,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
-  const [imperativeApi] = (0, import_react49.useState)(() => {
+  const [imperativeApi] = (0, import_react50.useState)(() => {
     return getImperativeApi(getState, getComputed, getDataSourceState, actions);
   });
   const {
@@ -10500,27 +10693,14 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
     activeCellIndex,
     onRenderUpdater
   } = componentState;
-  (0, import_react49.useEffect)(() => {
-    if (activeRowIndex != null) {
-      imperativeApi.scrollRowIntoView(activeRowIndex, {
-        offset: 30
-      });
-    }
-  }, [activeRowIndex]);
-  (0, import_react49.useEffect)(() => {
-    if (activeCellIndex != null) {
-      imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
-        offset: 30
-      });
-    }
-  }, [activeCellIndex]);
-  const { columnShifts, bodySize } = componentState;
+  useScrollToActiveRow(activeRowIndex, dataArray.length, imperativeApi);
+  useScrollToActiveCell(activeCellIndex, dataArray.length, imperativeApi);
+  const { bodySize } = componentState;
   const { scrollbars } = computed;
   const { renderCell } = useCellRendering({
     imperativeApi,
     getComputed,
     domRef: componentState.domRef,
-    columnShifts,
     bodySize,
     computed
   });
@@ -10542,7 +10722,7 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
     dataSourceActions.scrollStopDelayUpdatedByTable = scrollStopDelay;
   }, [scrollStopDelay]);
   useAutoSizeColumns();
-  const onKeyDown = (0, import_react49.useCallback)((event) => {
+  const onKeyDown = (0, import_react50.useCallback)((event) => {
     if (handleKeyboardNavigation({
       getState,
       actions,
@@ -10564,7 +10744,7 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
   }) : null, /* @__PURE__ */ React36.createElement(InfiniteTableBody, null, /* @__PURE__ */ React36.createElement(HeadlessTable, {
     tabIndex: 0,
     activeRowIndex: componentState.ready && keyboardNavigation === "row" ? activeRowIndex : null,
-    activeCellIndex: componentState.ready && keyboardNavigation === "cell" ? activeCellIndex : null,
+    activeCellIndex: componentState.ready && keyboardNavigation === "cell" && !componentState.columnReorderInProgress ? activeCellIndex : null,
     scrollStopDelay,
     renderer,
     onRenderUpdater,
@@ -10576,7 +10756,7 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
     visible: loading
   }, loadingText)), /* @__PURE__ */ React36.createElement("div", {
     ref: portalDOMRef,
-    className: join(`${rootClassName2}Portal`, zIndex[1e3], position.absolute, top[0], left[0])
+    className: join(`${rootClassName2}Portal`, zIndex[1e7], position.absolute, top[0], left[0])
   }), rowHeightCSSVar ? /* @__PURE__ */ React36.createElement(CSSVariableWatch, {
     varName: rowHeightCSSVar,
     onChange: onRowHeightCSSVarChange