@infinite-table/infinite-react 0.3.21 → 0.3.22

package/index.esm.js

@@ -1100,7 +1100,7 @@ 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)", scrollTopForActiveRow: "var(--_1slvgu97)", activeCellColWidth: "var(--_1slvgu98)", activeCellColOffset: "var(--_1slvgu99)", columnReorderEffectDurationAtIndex: "var(--_1slvgu9a)", columnWidthAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndex: "var(--_1slvgu9c)", columnOffsetAtIndexWhileReordering: "var(--_1slvgu9d)", columnZIndexAtIndex: "var(--_1slvgu9e)", pinnedStartWidth: "var(--_1slvgu9f)", pinnedEndWidth: "var(--_1slvgu9g)", pinnedStartDraggingWidth: "var(--_1slvgu9h)", pinnedEndDraggingWidth: "var(--_1slvgu9i)", pinnedEndOffset: "var(--_1slvgu9j)", computedVisibleColumnsCount: "var(--_1slvgu9k)", baseZIndexForCells: "var(--_1slvgu9l)", bodyWidth: "var(--_1slvgu9m)", bodyHeight: "var(--_1slvgu9n)", scrollbarWidthHorizontal: "var(--_1slvgu9o)", scrollbarWidthVertical: "var(--_1slvgu9p)", scrollLeft: "var(--_1slvgu9q)", scrollTop: "var(--_1slvgu9r)" };
+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)", columnReorderEffectDurationAtIndex: "var(--_1slvgu9a)", columnWidthAtIndex: "var(--_1slvgu9b)", columnOffsetAtIndex: "var(--_1slvgu9c)", columnOffsetAtIndexWhileReordering: "var(--_1slvgu9d)", columnZIndexAtIndex: "var(--_1slvgu9e)", pinnedStartWidth: "var(--_1slvgu9f)", pinnedEndWidth: "var(--_1slvgu9g)", pinnedEndOffset: "var(--_1slvgu9h)", computedVisibleColumnsCount: "var(--_1slvgu9i)", baseZIndexForCells: "var(--_1slvgu9j)", bodyWidth: "var(--_1slvgu9k)", bodyHeight: "var(--_1slvgu9l)", scrollbarWidthHorizontal: "var(--_1slvgu9m)", scrollbarWidthVertical: "var(--_1slvgu9n)", scrollLeft: "var(--_1slvgu9o)", scrollTop: "var(--_1slvgu9p)" };
 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)", pinnedBorder: "var(--infinite-pinned-cell-border)", 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";
 
@@ -4269,7 +4269,6 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
-var import_binary_search2 = __toModule(require_binary_search());
 import { useCallback as useCallback6, useState as useState5 } from "react";
 
 // src/components/InfiniteTable/hooks/useInfiniteTable.ts
@@ -4291,23 +4290,6 @@ var useInfiniteTable = () => {
   return useContext3(TableContext2);
 };
 
-// src/components/InfiniteTable/utils/moveXatY.ts
-var moveXatY = (arr, dragIndex, dropIndex) => {
-  arr = [...arr];
-  if (dragIndex === dropIndex || arr[dragIndex] === void 0 || arr[dropIndex] === void 0) {
-    return arr;
-  }
-  const dragItem = arr[dragIndex];
-  if (dropIndex < dragIndex) {
-    arr.splice(dragIndex, 1);
-    arr.splice(dropIndex, 0, dragItem);
-  } else {
-    arr.splice(dragIndex, 1);
-    arr.splice(dropIndex, 0, dragItem);
-  }
-  return arr;
-};
-
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
@@ -4316,9 +4298,9 @@ var InfiniteClsHasPinnedEnd = "_1yeub2vo";
 var InfiniteClsHasPinnedStart = "_1yeub2vn";
 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 PinnedEndIndicatorBorder = "_1yeub2vr _1yeub2vp _16lm1iw2 _16lm1iw12 _16lm1iwe _16lm1iwx _16lm1iw10 _16lm1iw1n _16lm1iwf _16lm1iwl";
+var PinnedEndIndicatorBorder = "_1yeub2vr _1yeub2vp _16lm1iw2 _16lm1iw12 _16lm1iwe _16lm1iwx _16lm1iw10 _16lm1iw1n _16lm1iwf _16lm1iwp";
 var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vi", end: "_1yeub2vj", false: "_1yeub2vk" } }, defaultVariants: {}, compoundVariants: [] });
-var PinnedStartIndicatorBorder = "_1yeub2vq _1yeub2vp _16lm1iw2 _16lm1iw12 _16lm1iwe _16lm1iwx _16lm1iw10 _16lm1iw1n _16lm1iwf _16lm1iwl";
+var PinnedStartIndicatorBorder = "_1yeub2vq _1yeub2vp _16lm1iw2 _16lm1iw12 _16lm1iwe _16lm1iwx _16lm1iw10 _16lm1iw1n _16lm1iwf _16lm1iwp";
 
 // src/components/utils/getScrollbarWidth.ts
 var scrollbarWidth;
@@ -4367,12 +4349,10 @@ var activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
 var activeCellColOffset = stripVar(InternalVars.activeCellColOffset);
 var baseZIndexForCells = stripVar(InternalVars.baseZIndexForCells);
 var pinnedStartWidthCSSVar = stripVar(InternalVars.pinnedStartWidth);
-var pinnedStartDraggingWidthCSSVar = stripVar(InternalVars.pinnedStartDraggingWidth);
 var bodyWidthCSSVar = stripVar(InternalVars.bodyWidth);
 var bodyHeightCSSVar = stripVar(InternalVars.bodyHeight);
 var pinnedEndOffsetCSSVar = stripVar(InternalVars.pinnedEndOffset);
 var pinnedEndWidthCSSVar = stripVar(InternalVars.pinnedEndWidth);
-var pinnedEndDraggingWidthCSSVar = stripVar(InternalVars.pinnedEndDraggingWidth);
 var computedVisibleColumnsCountCSSVar = stripVar(InternalVars.computedVisibleColumnsCount);
 function getColumnZIndex(col, params) {
   let computedZIndex = "auto";
@@ -4433,8 +4413,8 @@ function useDOMProps(initialDOMProps) {
   cssVars[computedVisibleColumnsCountCSSVar] = computedVisibleColumns.length;
   cssVars[scrollbarWidthHorizontal] = scrollbars.horizontal ? `${scrollbarWidth2}px` : "0px";
   cssVars[scrollbarWidthVertical] = scrollbars.vertical ? `${scrollbarWidth2}px` : "0px";
-  cssVars[pinnedStartWidthCSSVar] = `calc( ` + computedPinnedStartColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ` - var(${pinnedStartDraggingWidthCSSVar}, 0px) )`;
-  cssVars[pinnedEndWidthCSSVar] = `calc( ` + computedPinnedEndColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ` - var(${pinnedEndDraggingWidthCSSVar}, 0px) )`;
+  cssVars[pinnedStartWidthCSSVar] = `calc( ` + computedPinnedStartColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ")";
+  cssVars[pinnedEndWidthCSSVar] = `calc( ` + computedPinnedEndColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ")";
   cssVars[baseZIndexForCells] = computedVisibleColumns.length * 10;
   cssVars[pinnedEndOffsetCSSVar] = `calc( var(${bodyWidthCSSVar}) - var(${pinnedEndWidthCSSVar}) - var(${scrollbarWidthVertical}) )`;
   cssVars[bodyWidthCSSVar] = `${bodySize.width}px`;
@@ -4507,6 +4487,26 @@ function useDOMProps(initialDOMProps) {
   return domProps;
 }
 
+// src/components/InfiniteTable/hooks/reorderColumnsOnDrag.ts
+var import_binary_search2 = __toModule(require_binary_search());
+
+// src/components/InfiniteTable/utils/moveXatY.ts
+var moveXatY = (arr, dragIndex, dropIndex) => {
+  arr = [...arr];
+  if (dragIndex === dropIndex || arr[dragIndex] === void 0 || arr[dropIndex] === void 0) {
+    return arr;
+  }
+  const dragItem = arr[dragIndex];
+  if (dropIndex < dragIndex) {
+    arr.splice(dragIndex, 1);
+    arr.splice(dropIndex, 0, dragItem);
+  } else {
+    arr.splice(dragIndex, 1);
+    arr.splice(dropIndex, 0, dragItem);
+  }
+  return arr;
+};
+
 // src/components/InfiniteTable/utils/progressiveSpeedScroller.ts
 var progressiveSpeedScroller = (staticOptions) => {
   let scrollLeftRafId = null;
@@ -4583,19 +4583,284 @@ var progressiveSpeedScroller = (staticOptions) => {
   };
 };
 
+// src/components/InfiniteTable/hooks/reorderColumnsOnDrag.ts
+var PROXY_OFFSET = 10;
+var pinnedStartWidthCSSVar2 = stripVar(InternalVars.pinnedStartWidth);
+function reorderColumnsOnDrag(params) {
+  const {
+    columnOffsetAtIndexCSSVar,
+    columnWidthAtIndexCSSVar,
+    computedVisibleColumns,
+    computedVisibleColumnsMap,
+    computedPinnedEndColumns,
+    computedPinnedStartColumns,
+    dragColumnId,
+    infiniteDOMNode,
+    brain,
+    dragColumnHeaderTargetRect,
+    tableRect,
+    setProxyPosition,
+    imperativeApi
+  } = params;
+  function getCurrentPinnedWidth(pinned) {
+    let currentWidth = pinned === "start" ? pinnedStartInitialWidth : pinnedEndInitialWidth;
+    if (initialDragColumnPinned === currentDragColumnPinned) {
+      return currentWidth;
+    }
+    if (currentDragColumnPinned === pinned) {
+      return currentWidth + dragColumn.computedWidth;
+    }
+    if (initialDragColumnPinned === pinned) {
+      return currentWidth - dragColumn.computedWidth;
+    }
+    return currentWidth;
+  }
+  function isColumnVisible2(b) {
+    if (b.index === dragColumnIndex) {
+      return true;
+    }
+    const col = computedVisibleColumns[b.index];
+    if (col.computedPinned) {
+      return true;
+    }
+    const scrollLeft2 = brain.getScrollPosition().scrollLeft;
+    return col.computedOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
+  }
+  const getBreakPoints = (columns) => {
+    const breakpoints = [];
+    columns.forEach((c) => {
+      const b = {
+        columnId: c.id,
+        index: c.computedVisibleIndex,
+        breakpoint: c.computedOffset + Math.round(c.computedWidth / 2)
+      };
+      if (isColumnVisible2(b)) {
+        breakpoints.push(b);
+      }
+    });
+    return breakpoints;
+  };
+  const initialPinnedStartCount = computedPinnedStartColumns.length;
+  let currentPinnedStartCount = initialPinnedStartCount;
+  const initialMousePosition = {
+    clientX: Math.round(params.initialMousePosition.clientX),
+    clientY: Math.round(params.initialMousePosition.clientY)
+  };
+  const initialProxyPosition = {
+    left: initialMousePosition.clientX - tableRect.left - (initialMousePosition.clientX - dragColumnHeaderTargetRect.left) + PROXY_OFFSET,
+    top: initialMousePosition.clientY - tableRect.top - (initialMousePosition.clientY - dragColumnHeaderTargetRect.top) + PROXY_OFFSET
+  };
+  const initialScrollPosition2 = brain.getScrollPosition();
+  const initialIndexes = computedVisibleColumns.map((c) => c.computedVisibleIndex);
+  let currentIndexes = initialIndexes;
+  const dragColumn = computedVisibleColumnsMap.get(dragColumnId);
+  const dragColumnIndex = dragColumn.computedVisibleIndex;
+  const initialDragColumnPinned = dragColumn == null ? void 0 : dragColumn.computedPinned;
+  let currentDropIndex = dragColumnIndex;
+  let currentDragColumnPinned = initialDragColumnPinned;
+  const pinnedStartInitialWidth = brain.getFixedStartColsWidth();
+  const pinnedEndInitialWidth = brain.getFixedEndColsWidth();
+  let currentMousePosition = initialMousePosition;
+  let currentDiff = {
+    x: 0,
+    y: 0
+  };
+  let dir = 1;
+  let diffX = 0;
+  function updatePositionAndDiff(mousePosition) {
+    const clientX = Math.round(mousePosition.clientX);
+    const clientY = Math.round(mousePosition.clientY);
+    if (clientX === currentMousePosition.clientX && clientY === currentMousePosition.clientY) {
+      return;
+    }
+    currentMousePosition = { clientX, clientY };
+    const currentScrollLeft = brain.getScrollPosition().scrollLeft;
+    const scrollLeftDiff = currentScrollLeft - initialScrollPosition2.scrollLeft;
+    currentDiff.x = currentMousePosition.clientX - initialMousePosition.clientX;
+    currentDiff.y = currentMousePosition.clientY - initialMousePosition.clientY;
+    diffX = currentDiff.x + scrollLeftDiff;
+    dir = diffX < 0 ? -1 : 1;
+    setProxyPosition({
+      left: initialProxyPosition.left + currentDiff.x,
+      top: initialProxyPosition.top + currentDiff.y
+    });
+  }
+  function updatePinnedStartCount(columnIndexes) {
+    let pinnedStartCount = 0;
+    if (!initialDragColumnPinned) {
+      columnIndexes.forEach((colIndex, i) => {
+        var _a;
+        if (((_a = computedVisibleColumns[colIndex]) == null ? void 0 : _a.computedPinned) === "start") {
+          pinnedStartCount = i + 1;
+        }
+      });
+    } else if (initialDragColumnPinned === "start") {
+      columnIndexes.forEach((colIndex, i) => {
+        var _a;
+        if (pinnedStartCount) {
+          return;
+        }
+        if (((_a = computedVisibleColumns[colIndex]) == null ? void 0 : _a.computedPinned) !== "start") {
+          pinnedStartCount = i;
+        }
+      });
+    }
+    currentPinnedStartCount = pinnedStartCount;
+    updatePinningMarker("start", columnIndexes, pinnedStartCount);
+  }
+  function updatePinningMarker(where, columnIndexes, pinnedCount) {
+    if (where === "start") {
+      let width = 0;
+      for (let i = 0; i < pinnedCount; i++) {
+        const colIndex = columnIndexes[i];
+        const col = computedVisibleColumns[colIndex];
+        width += col.computedWidth;
+      }
+      setInfiniteVarOnRoot(pinnedStartWidthCSSVar2, `${width}px`, infiniteDOMNode);
+    }
+  }
+  function updateDropIndex(newDropIndex) {
+    if (newDropIndex === currentDropIndex) {
+      return;
+    }
+    currentDropIndex = newDropIndex;
+    const newColumnIndexes = moveXatY(initialIndexes, dragColumnIndex, currentDropIndex > dragColumnIndex ? currentDropIndex - 1 : currentDropIndex);
+    let pinnedStartCount = 0;
+    currentPinnedStartCount = pinnedStartCount;
+    const indexesWithTransition = new Set();
+    newColumnIndexes.forEach((newIndex, i) => {
+      const currentIndex = currentIndexes[i];
+      if (newIndex !== currentIndex) {
+        indexesWithTransition.add(newIndex);
+      }
+      updatePinnedStartCount(newColumnIndexes);
+    });
+    currentIndexes = newColumnIndexes;
+    adjustAllOffsets(indexesWithTransition);
+    return {
+      newColumnIndexes,
+      indexesWithTransition,
+      pinnedStartCount: currentPinnedStartCount
+    };
+  }
+  function adjustAllOffsets(indexesWithTransition) {
+    computedVisibleColumns.forEach((col) => {
+      const colIndex = col.computedVisibleIndex;
+      if (indexesWithTransition.has(colIndex)) {
+        restoreInfiniteColumnReorderDuration(colIndex, infiniteDOMNode);
+      } else {
+        clearInfiniteColumnReorderDuration(colIndex, infiniteDOMNode);
+      }
+      const isDragColumn = colIndex === dragColumnIndex;
+      let isOutsideCol = dir === -1 ? colIndex < currentDropIndex || colIndex > dragColumnIndex : colIndex < dragColumnIndex || colIndex >= currentDropIndex;
+      let newPosition = "";
+      if (dir === -1) {
+        newPosition = isDragColumn ? `var(${columnOffsetAtIndexCSSVar}-${currentDropIndex})` : isOutsideCol ? `var(${columnOffsetAtIndexCSSVar}-${colIndex})` : `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) + var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`;
+      } else {
+        newPosition = isOutsideCol ? `var(${columnOffsetAtIndexCSSVar}-${colIndex})` : isDragColumn ? `calc( var(${columnOffsetAtIndexCSSVar}-${currentDropIndex - 1}) + var(${columnWidthAtIndexCSSVar}-${currentDropIndex - 1}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )` : `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`;
+      }
+      setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, infiniteDOMNode);
+    });
+  }
+  const pinnedStartColsRight = tableRect.left + getCurrentPinnedWidth("start");
+  const pinnedEndColsLeft = tableRect.right - getCurrentPinnedWidth("end");
+  const speedScroller = progressiveSpeedScroller({
+    scrollOffsetStart: pinnedStartColsRight,
+    scrollOffsetEnd: pinnedEndColsLeft
+  });
+  updatePositionAndDiff(initialMousePosition);
+  return {
+    speedScroller,
+    stop() {
+      speedScroller.stop();
+    },
+    onMove(mousePosition) {
+      updatePositionAndDiff(mousePosition);
+      speedScroller.scroll({
+        mousePosition: currentMousePosition,
+        get scrollLeft() {
+          return brain.getScrollPosition().scrollLeft;
+        },
+        set scrollLeft(value) {
+          imperativeApi.scrollLeft = value;
+        }
+      });
+      const breakpoints = getBreakPoints(computedVisibleColumns);
+      let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
+      let idx = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
+        return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
+      });
+      if (idx < 0) {
+        idx = ~idx;
+      }
+      idx = breakpoints[idx] ? breakpoints[idx].index : breakpoints[breakpoints.length - 1].index + 1;
+      if (idx != null && idx !== currentDropIndex) {
+        if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
+          idx = dragColumnIndex;
+        }
+        updateDropIndex(idx);
+      }
+      const columnPinning = {};
+      computedPinnedEndColumns.forEach((col) => {
+        columnPinning[col.id] = "end";
+      });
+      for (let i = 0; i < currentPinnedStartCount; i++) {
+        const colIndex = currentIndexes[i];
+        const col = computedVisibleColumns[colIndex];
+        columnPinning[col.id] = "start";
+      }
+      const columnOrder = currentIndexes.map((colIndex) => {
+        return computedVisibleColumns[colIndex].id;
+      });
+      return {
+        columnPinning,
+        columnOrder
+      };
+    }
+  };
+}
+
+// src/utils/shallowEqualObjects.ts
+function shallowEqualObjects(objA, objB, ignoreKeys) {
+  if (objA === objB) {
+    return true;
+  }
+  if (!objA || !objB) {
+    return false;
+  }
+  var aKeys = Object.keys(objA);
+  var bKeys = Object.keys(objB);
+  if (ignoreKeys) {
+    aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
+    bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
+  }
+  var len = aKeys.length;
+  if (bKeys.length !== len) {
+    return false;
+  }
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i];
+    if (ignoreKeys) {
+      if (ignoreKeys.has(key)) {
+        continue;
+      }
+    }
+    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
+      return false;
+    }
+  }
+  return true;
+}
+
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var columnOffsetAtIndex4 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
 var baseZIndexForCells2 = stripVar(InternalVars.baseZIndexForCells);
-var PROXY_OFFSET = 10;
-var getBreakPoints = (columns) => {
-  return columns.map((c) => {
-    return {
-      columnId: c.id,
-      index: c.computedVisibleIndex,
-      breakpoint: c.computedOffset + Math.round(c.computedWidth / 2)
-    };
-  }).filter(Boolean);
+var equalPinning = (pinning1, pinning2) => {
+  if (!!pinning1 != !!pinning2) {
+    return false;
+  }
+  return shallowEqualObjects(pinning1, pinning2);
 };
 var useColumnPointerEvents = ({
   columnId,
@@ -4607,6 +4872,7 @@ var useColumnPointerEvents = ({
     componentActions,
     computed,
     getComputed,
+    getState,
     imperativeApi,
     componentState: { domRef: rootRef, brain, headerBrain }
   } = useInfiniteTable();
@@ -4615,78 +4881,52 @@ var useColumnPointerEvents = ({
     const {
       computedVisibleColumns,
       computedVisibleColumnsMap,
-      computedPinnedStartColumns
+      computedPinnedStartColumns,
+      computedUnpinnedColumns,
+      computedPinnedEndColumns
     } = getComputed();
     const dragColumn = computedVisibleColumnsMap.get(columnId);
-    const initialBreakpoints = getBreakPoints(computedVisibleColumns);
     const target = domRef.current;
     const targetRect = target.getBoundingClientRect();
     const tableRect = rootRef.current.getBoundingClientRect();
     const initialAvailableSize = brain.getAvailableSize();
     const dragColumnIndex = dragColumn.computedVisibleIndex;
-    let currentColumnIndexes = computedVisibleColumns.map((c) => c.computedVisibleIndex);
-    const initialColumnIndexes = currentColumnIndexes;
-    const pinnedStartCurrentWidth = brain.getFixedStartColsWidth() - (dragColumn.computedPinned === "start" ? dragColumn.computedWidth : 0);
-    const pinnedStartColsRight = tableRect.left + pinnedStartCurrentWidth;
-    const pinnedEndCurrentWidth = brain.getFixedEndColsWidth() - (dragColumn.computedPinned === "end" ? dragColumn.computedWidth : 0);
-    const pinnedEndColsLeft = tableRect.right - pinnedEndCurrentWidth;
-    const speedScroller = progressiveSpeedScroller({
-      scrollOffsetStart: pinnedStartColsRight,
-      scrollOffsetEnd: pinnedEndColsLeft
-    });
-    const isColumnVisible2 = (columnIndex, { scrollLeft: scrollLeft2 }) => {
-      if (columnIndex === dragColumnIndex) {
-        return true;
-      }
-      const col = computedVisibleColumns[columnIndex];
-      if (col.computedPinned) {
-        return true;
+    let initialCursor = (_a2 = target.style.cursor) != null ? _a2 : "auto";
+    let didDragAtLeastOnce = false;
+    const dragger = reorderColumnsOnDrag({
+      brain,
+      columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
+      columnWidthAtIndexCSSVar: columnWidthAtIndex3,
+      computedPinnedEndColumns,
+      computedPinnedStartColumns,
+      computedUnpinnedColumns,
+      computedVisibleColumns,
+      computedVisibleColumnsMap,
+      dragColumnHeaderTargetRect: targetRect,
+      dragColumnId: columnId,
+      imperativeApi,
+      infiniteDOMNode: rootRef.current,
+      setProxyPosition,
+      tableRect,
+      initialMousePosition: {
+        clientX: e.clientX,
+        clientY: e.clientY
       }
-      return col.computedOffset >= scrollLeft2 + pinnedStartCurrentWidth && col.computedOffset + col.computedWidth < scrollLeft2 + tableRect.width - pinnedEndCurrentWidth;
-    };
-    const initialClientPos = {
-      clientX: Math.round(e.clientX),
-      clientY: Math.round(e.clientY)
-    };
-    let currentScrollPosition = {
-      scrollLeft: 0,
-      scrollTop: 0
-    };
-    const initialScrollPosition2 = brain.getScrollPosition();
-    const updateScrollPosition = (scrollPosition) => {
-      currentScrollPosition = scrollPosition;
-    };
-    updateScrollPosition(initialScrollPosition2);
-    const removeOnScroll = brain.onScroll((scrollPosition) => {
-      currentScrollPosition = scrollPosition;
     });
-    const initialProxyPosition = {
-      left: initialClientPos.clientX - tableRect.left - (initialClientPos.clientX - targetRect.left) + PROXY_OFFSET,
-      top: initialClientPos.clientY - tableRect.top - (initialClientPos.clientY - targetRect.top) + PROXY_OFFSET
-    };
-    let currentClientPos = initialClientPos;
-    let currentDiff = {
-      x: 0,
-      y: 0
-    };
-    function updateProxyPosition(pos) {
-      const clientX = Math.round(pos.clientX);
-      const clientY = Math.round(pos.clientY);
-      if (clientX === currentClientPos.clientX && clientY === currentClientPos.clientY) {
-        return;
+    let reorderDragResult = null;
+    function persistColumnOrder(reorderDragResult2) {
+      const { columnPinning, columnOrder } = reorderDragResult2;
+      if (!equalPinning(getState().columnPinning, columnPinning)) {
+        console.log("update pinning");
+        componentActions.columnPinning = columnPinning;
+      }
+      if (JSON.stringify(columnOrder, getComputed().computedColumnOrder)) {
+        computedVisibleColumns.forEach((col) => {
+          setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
+        });
+        componentActions.columnOrder = columnOrder;
       }
-      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
-      });
     }
-    updateProxyPosition(initialClientPos);
-    let initialCursor = (_a2 = target.style.cursor) != null ? _a2 : "auto";
-    let didDragAtLeastOnce = false;
-    let currentDropIndex = dragColumnIndex;
     const onPointerMove = (e2) => {
       var _a3;
       if (!didDragAtLeastOnce) {
@@ -4704,86 +4944,13 @@ var useColumnPointerEvents = ({
         (_a3 = rootRef.current) == null ? void 0 : _a3.classList.add(InfiniteClsShiftingColumns);
         target.style.cursor = "grabbing";
       }
-      updateProxyPosition(e2);
-      const scrollLeft2 = currentScrollPosition.scrollLeft;
-      const scrollLeftDiff = scrollLeft2 - initialScrollPosition2.scrollLeft;
-      let diffX = currentDiff.x + scrollLeftDiff;
-      const dir = diffX < 0 ? -1 : 1;
-      let currentPos = dir === -1 ? dragColumn.computedOffset + diffX : dragColumn.computedOffset + dragColumn.computedWidth + diffX;
-      speedScroller.scroll({
-        mousePosition: currentClientPos,
-        get scrollLeft() {
-          return brain.getScrollPosition().scrollLeft;
-        },
-        set scrollLeft(value) {
-          imperativeApi.scrollLeft = value;
-        }
-      });
-      const breakpoints = initialBreakpoints.filter((b) => isColumnVisible2(b.index, {
-        scrollLeft: currentScrollPosition.scrollLeft
-      })).map((b) => {
-        return __spreadProps(__spreadValues({}, b), { breakpoint: b.breakpoint - scrollLeft2 });
-      });
-      let idx = (0, import_binary_search2.default)(breakpoints, currentPos, ({ breakpoint }, value) => {
-        return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
-      });
-      if (idx < 0) {
-        idx = ~idx;
-        console.log("found breakpoint", breakpoints[idx], "at index", idx, "for currentPos", currentPos, JSON.parse(JSON.stringify(breakpoints)));
-      }
-      idx = breakpoints[idx] ? breakpoints[idx].index : breakpoints[breakpoints.length - 1].index + 1;
-      if (idx != null && idx !== currentDropIndex) {
-        currentDropIndex = idx;
-        if (dir === 1 && currentDropIndex === dragColumnIndex + 1) {
-          currentDropIndex = dragColumnIndex;
-        }
-        const newColumnIndexes = moveXatY(initialColumnIndexes, dragColumnIndex, currentDropIndex > dragColumnIndex ? currentDropIndex - 1 : currentDropIndex);
-        const indexesWithTransition = new Set();
-        newColumnIndexes.forEach((newIndex, i) => {
-          const currentIndex = currentColumnIndexes[i];
-          if (newIndex !== currentIndex) {
-            indexesWithTransition.add(newIndex);
-          }
-        });
-        console.log(JSON.stringify(currentColumnIndexes));
-        console.log(JSON.stringify(newColumnIndexes));
-        console.log("switched", indexesWithTransition);
-        console.log("----");
-        currentColumnIndexes = newColumnIndexes;
-        computedVisibleColumns.forEach((col) => {
-          const colIndex = col.computedVisibleIndex;
-          if (indexesWithTransition.has(colIndex)) {
-            restoreInfiniteColumnReorderDuration(colIndex, rootRef.current);
-          } else {
-            clearInfiniteColumnReorderDuration(colIndex, rootRef.current);
-          }
-          const isDragColumn = colIndex === dragColumnIndex;
-          let isOutsideCol = dir === -1 ? colIndex < currentDropIndex || colIndex > dragColumnIndex : colIndex < dragColumnIndex || colIndex >= currentDropIndex;
-          let newPosition = "";
-          if (dir === -1) {
-            newPosition = isDragColumn ? `var(${columnOffsetAtIndex4}-${currentDropIndex})` : isOutsideCol ? `var(${columnOffsetAtIndex4}-${colIndex})` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) + var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
-          } else {
-            newPosition = isOutsideCol ? `var(${columnOffsetAtIndex4}-${colIndex})` : isDragColumn ? `calc( var(${columnOffsetAtIndex4}-${currentDropIndex - 1}) + var(${columnWidthAtIndex3}-${currentDropIndex - 1}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )` : `calc( var(${columnOffsetAtIndex4}-${colIndex}) - var(${columnWidthAtIndex3}-${dragColumnIndex}) )`;
-          }
-          setInfiniteColumnOffsetWhileReordering(colIndex, newPosition, rootRef.current);
-        });
-      }
+      reorderDragResult = dragger.onMove(e2);
     };
-    function persistColumnOrder() {
-      if (currentDropIndex != null && currentDropIndex !== dragColumnIndex) {
-        const newOrder = moveXatY(getComputed().computedColumnOrder, dragColumnIndex, currentDropIndex > dragColumnIndex ? currentDropIndex - 1 : currentDropIndex);
-        computedVisibleColumns.forEach((col) => {
-          setInfiniteColumnOffsetWhileReordering(col.computedVisibleIndex, "", rootRef.current);
-        });
-        componentActions.columnOrder = newOrder;
-      }
-    }
     const onPointerUp = (e2) => {
       var _a3;
       const target2 = domRef.current;
       (_a3 = rootRef.current) == null ? void 0 : _a3.classList.remove(InfiniteClsShiftingColumns);
-      removeOnScroll();
-      speedScroller.stop();
+      dragger.stop();
       brain.setAvailableSize(__spreadValues({}, initialAvailableSize));
       computedVisibleColumns.forEach((col) => {
         clearInfiniteColumnReorderDuration(col.computedVisibleIndex, rootRef.current);
@@ -4801,7 +4968,9 @@ var useColumnPointerEvents = ({
       if (!didDragAtLeastOnce && dragColumn.computedSortable) {
         dragColumn.toggleSort();
       }
-      persistColumnOrder();
+      if (reorderDragResult) {
+        persistColumnOrder(reorderDragResult);
+      }
       componentActions.columnReorderDragColumnId = false;
     };
     target.addEventListener("pointermove", onPointerMove);
@@ -8633,38 +8802,6 @@ function lazyLoadRange(options, cache) {
   }, initialPromise);
 }
 
-// src/utils/shallowEqualObjects.ts
-function shallowEqualObjects(objA, objB, ignoreKeys) {
-  if (objA === objB) {
-    return true;
-  }
-  if (!objA || !objB) {
-    return false;
-  }
-  var aKeys = Object.keys(objA);
-  var bKeys = Object.keys(objB);
-  if (ignoreKeys) {
-    aKeys = aKeys.filter((key2) => !ignoreKeys.has(key2));
-    bKeys = bKeys.filter((key2) => !ignoreKeys.has(key2));
-  }
-  var len = aKeys.length;
-  if (bKeys.length !== len) {
-    return false;
-  }
-  for (var i = 0; i < len; i++) {
-    var key = aKeys[i];
-    if (ignoreKeys) {
-      if (ignoreKeys.has(key)) {
-        continue;
-      }
-    }
-    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
-      return false;
-    }
-  }
-  return true;
-}
-
 // src/components/utils/discardCallsWithEqualArg.ts
 var map = new WeakMap();
 var getCompareDefault = (a) => a;
@@ -10591,7 +10728,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.3.21"
+      version: "0.3.22"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -10610,14 +10747,14 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
   useEffect26(() => {
     if (activeCellIndex != null) {
       didScrollRef.current = false;
-      cancelAnimationFrame(rafId.current);
+      cancelRaf(rafId.current);
     }
   }, [activeCellIndex]);
   useEffect26(() => {
     if (activeCellIndex != null && !didScrollRef.current) {
       let tryScroll = function(times = 0) {
         times++;
-        cancelAnimationFrame(rafId.current);
+        cancelRaf(rafId.current);
         rafId.current = raf(() => {
           didScrollRef.current = imperativeApi.scrollCellIntoView(activeCellIndex[0], activeCellIndex[1], {
             offset: 30
@@ -10630,7 +10767,7 @@ function useScrollToActiveCell(activeCellIndex, dataCount, imperativeApi) {
       tryScroll();
     }
     return () => {
-      cancelAnimationFrame(rafId.current);
+      cancelRaf(rafId.current);
     };
   }, [activeCellIndex, dataCount]);
 }
@@ -10956,6 +11093,7 @@ var forwardProps3 = (setupState) => {
     onScrollToBottom: 1,
     onScrollStop: 1,
     scrollToBottomOffset: 1,
+    columnPinning: 1,
     rowStyle: 1,
     rowProps: 1,
     rowClassName: 1,
@@ -11040,8 +11178,6 @@ var mapPropsToState2 = (params) => {
   });
   const computedColumns = state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns;
   return {
-    columnPinning: state.columnPinningWhileDragging || state.columnPinning || props.columnPinning,
-    columnPinningWhileDragging: state.columnPinningWhileDragging,
     controlledColumnVisibility: !!props.columnVisibility,
     groupRenderStrategy,
     groupBy,