@infinite-table/infinite-react 5.0.0-canary.8 → 5.1.0-canary.1

package/index.dev.js

@@ -1304,49 +1304,6 @@ function buildSubscriptionCallback(withRaf = false) {
   return updater;
 }
 
-// src/components/InfiniteTable/vars.css.ts
-var ThemeVars = { color: { accent: "var(--infinite-accent-color)", success: "var(--infinite-success-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)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, 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)", border: "var(--infinite-header-cell-border)", 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)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", 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)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { flashingDuration: "var(--infinite-flashing-duration)", flashingAnimationName: "var(--infinite-flashing-animation-name)", flashingOverlayZIndex: "var(--infinite-flashing-overlay-z-index)", flashingBackground: "var(--infinite-flashing-background)", flashingUpBackground: "var(--infinite-flashing-up-background)", flashingDownBackground: "var(--infinite-flashing-down-background)", padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", 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)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", 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)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", 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)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-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/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
-var React9 = __toESM(require("react"));
-
-// src/utils/mathIntersection.ts
-function arrayIntersection(...arrays) {
-  if (!arrays.length) {
-    return [];
-  }
-  const map2 = /* @__PURE__ */ new Map();
-  arrays.forEach((arr) => {
-    for (let i = 0, len2 = arr.length; i < len2; i++) {
-      const item = arr[i];
-      const count = map2.get(item) ?? 0;
-      map2.set(item, count + 1);
-    }
-    return map2;
-  });
-  const len = arrays.length;
-  return arrays[0].filter((x) => {
-    return map2.get(x) === len;
-  });
-}
-
-// src/utils/raf.ts
-var raf = getGlobal().requestAnimationFrame || ((fn) => {
-  return setTimeout(fn, 16);
-});
-var cancelRaf = getGlobal().cancelAnimationFrame || ((timeoutId) => {
-  return clearTimeout(timeoutId);
-});
-
-// src/utils/stripVar.ts
-function stripVar(cssVariableWithVarString) {
-  return cssVariableWithVarString.slice(4, -1);
-}
-
-// src/components/InfiniteTable/internalVars.css.ts
-var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", currentFlashingBackground: "var(--currentFlashingBackground__16hkbkc2)", currentFlashingDuration: "var(--currentFlashingDuration__16hkbkc3)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc4)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc5)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc6)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc7)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc8)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkca)", activeCellColWidth: "var(--activeCellColWidth__16hkbkcb)", activeCellColOffset: "var(--activeCellColOffset__16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcd)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkce)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcg)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkch)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkci)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcj)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkck)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcl)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkcm)", bodyWidth: "var(--bodyWidth__16hkbkcn)", bodyHeight: "var(--bodyHeight__16hkbkco)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcp)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcq)", scrollLeft: "var(--scrollLeft__16hkbkcr)", scrollTop: "var(--scrollTop__16hkbkcs)" };
-
 // src/utils/selectParent.ts
 function selectParent(el, selector2) {
   let node = el;
@@ -1382,12 +1339,24 @@ function selectParentUntil(el, selector2, root) {
   return null;
 }
 
+// src/utils/stripVar.ts
+function stripVar(cssVariableWithVarString) {
+  return cssVariableWithVarString.slice(4, -1);
+}
+
 // src/components/InfiniteTable/internalProps.ts
 var rootClassName2 = "Infinite";
 var internalProps = {
   rootClassName: rootClassName2
 };
 
+// src/components/InfiniteTable/internalVars.css.ts
+var InternalVars = { currentColumnTransformX: "var(--currentColumnTransformX__16hkbkc0)", y: "var(--y__16hkbkc1)", currentFlashingBackground: "var(--currentFlashingBackground__16hkbkc2)", currentFlashingDuration: "var(--currentFlashingDuration__16hkbkc3)", activeCellRowOffset: "var(--activeCellRowOffset__16hkbkc4)", activeCellRowOffsetX: "var(--activeCellRowOffsetX__16hkbkc5)", activeCellRowHeight: "var(--activeCellRowHeight__16hkbkc6)", activeCellOffsetX: "var(--activeCellOffsetX__16hkbkc7)", activeCellOffsetY: "var(--activeCellOffsetY__16hkbkc8)", scrollTopForActiveRow: "var(--scrollTopForActiveRow__16hkbkc9)", scrollLeftForActiveRowWhenHorizontalLayout: "var(--scrollLeftForActiveRowWhenHorizontalLayout__16hkbkca)", activeCellColWidth: "var(--activeCellColWidth__16hkbkcb)", activeCellColOffset: "var(--activeCellColOffset__16hkbkcc)", columnReorderEffectDurationAtIndex: "var(--columnReorderEffectDurationAtIndex__16hkbkcd)", columnWidthAtIndex: "var(--columnWidthAtIndex__16hkbkce)", columnOffsetAtIndex: "var(--columnOffsetAtIndex__16hkbkcf)", columnOffsetAtIndexWhileReordering: "var(--columnOffsetAtIndexWhileReordering__16hkbkcg)", columnZIndexAtIndex: "var(--columnZIndexAtIndex__16hkbkch)", pinnedStartWidth: "var(--pinnedStartWidth__16hkbkci)", pinnedEndWidth: "var(--pinnedEndWidth__16hkbkcj)", pinnedEndOffset: "var(--pinnedEndOffset__16hkbkck)", computedVisibleColumnsCount: "var(--computedVisibleColumnsCount__16hkbkcl)", baseZIndexForCells: "var(--baseZIndexForCells__16hkbkcm)", bodyWidth: "var(--bodyWidth__16hkbkcn)", bodyHeight: "var(--bodyHeight__16hkbkco)", scrollbarWidthHorizontal: "var(--scrollbarWidthHorizontal__16hkbkcp)", scrollbarWidthVertical: "var(--scrollbarWidthVertical__16hkbkcq)", scrollLeft: "var(--scrollLeft__16hkbkcr)", scrollTop: "var(--scrollTop__16hkbkcs)" };
+
+// src/components/InfiniteTable/vars.css.ts
+var ThemeVars = { color: { accent: "var(--infinite-accent-color)", success: "var(--infinite-success-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)", iconSize: "var(--infinite-icon-size)", runtime: { bodyWidth: "var(--infinite-runtime-body-content-width)", totalVisibleColumnsWidthValue: "var(--infinite-runtime-total-visible-columns-width)", totalVisibleColumnsWidthVar: "var(--infinite-runtime-total-visible-columns-width-var)", visibleColumnsCount: "var(--infinite-runtime-visible-columns-count)", browserScrollbarWidth: "var(--infinite-runtime-browser-scrollbar-width)" }, 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)", border: "var(--infinite-header-cell-border)", 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)", menuIconLineWidth: "var(--infinite-header-cell-menu-icon-line-width)", sortIconMargin: "var(--infinite-header-cell-sort-icon-margin)", borderRight: "var(--infinite-header-cell-border-right)", 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)", filterOperatorPaddingX: "var(--infinite-filter-operator-padding-x)", filterEditorPaddingX: "var(--infinite-filter-editor-padding-x)", filterEditorMarginX: "var(--infinite-filter-editor-margin-x)", filterOperatorPaddingY: "var(--infinite-filter-operator-padding-y)", filterEditorPaddingY: "var(--infinite-filter-editor-padding-y)", filterEditorMarginY: "var(--infinite-filter-editor-margin-y)", filterEditorBackground: "var(--infinite-filter-editor-background)", filterEditorBorder: "var(--infinite-filter-editor-border)", filterEditorFocusBorderColor: "var(--infinite-filter-editor-focus-border-color)", filterEditorBorderRadius: "var(--infinite-filter-editor-border-radius)", filterEditorColor: "var(--infinite-filter-editor-color)" }, ActiveCellIndicator: { inset: "var(--infinite-active-cell-indicator-inset)" }, Cell: { flashingDuration: "var(--infinite-flashing-duration)", flashingAnimationName: "var(--infinite-flashing-animation-name)", flashingOverlayZIndex: "var(--infinite-flashing-overlay-z-index)", flashingBackground: "var(--infinite-flashing-background)", flashingUpBackground: "var(--infinite-flashing-up-background)", flashingDownBackground: "var(--infinite-flashing-down-background)", padding: "var(--infinite-cell-padding)", borderWidth: "var(--infinite-cell-border-width)", border: "var(--infinite-cell-border)", borderLeft: "var(--infinite-cell-border-left)", borderRight: "var(--infinite-cell-border-right)", borderTop: "var(--infinite-cell-border-top)", 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)", horizontalLayoutColumnReorderDisabledPageOpacity: "var(--infinite-horizontal-layout-column-reorder-disabled-page-opacity)", color: "var(--infinite-cell-color)", selectedBackground: "var(--infinite-selected-cell-background)", selectedBackgroundDefault: "var(--infinite-selected-cell-background-default)", selectedBackgroundAlpha: "var(--infinite-selected-cell-background-alpha)", selectedBackgroundAlphaWhenTableUnfocused: "var(--infinite-selected-cell-background-alpha--table-unfocused)", selectedBorderColor: "var(--infinite-selected-cell-border-color)", selectedBorderWidth: "var(--infinite-selected-cell-border-width)", selectedBorderStyle: "var(--infinite-selected-cell-border-style)", selectedBorder: "var(--infinite-selected-cell-border)", activeBackgroundAlpha: "var(--infinite-active-cell-background-alpha)", activeBackgroundAlphaWhenTableUnfocused: "var(--infinite-active-cell-background-alpha--table-unfocused)", activeBackground: "var(--infinite-active-cell-background)", activeBackgroundDefault: "var(--infinite-active-cell-background-default)", 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)" }, SelectionCheckBox: { marginInline: "var(--infinite-selection-checkbox-margin-inline)" }, Menu: { background: "var(--infinite-menu-background)", color: "var(--infinite-menu-color)", separatorColor: "var(--infinite-menu-separator-color)", padding: "var(--infinite-menu-padding)", cellPaddingVertical: "var(--infinite-menu-cell-padding-vertical)", cellPaddingHorizontal: "var(--infinite-menu-cell-padding-horizontal)", cellMarginVertical: "var(--infinite-menu-cell-margin-vertical)", itemDisabledBackground: "var(--infinite-menu-item-disabled-background)", itemActiveBackground: "var(--infinite-menu-item-active-background)", itemActiveOpacity: "var(--infinite-menu-item-active-opacity)", itemPressedOpacity: "var(--infinite-menu-item-pressed-opacity)", itemPressedBackground: "var(--infinite-menu-item-pressed-background)", itemDisabledOpacity: "var(--infinite-menu-item-disabled-opacity)", borderRadius: "var(--infinite-menu-border-radius)", shadowColor: "var(--infinite-menu-shadow-color)" }, RowDetail: { background: "var(--infinite-rowdetail-background)", padding: "var(--infinite-rowdetail-padding)", gridHeight: "var(--infinite-rowdetail-grid-height)" }, Row: { background: "var(--infinite-row-background)", oddBackground: "var(--infinite-row-odd-background)", disabledBackground: "var(--infinite-row-disabled-background)", oddDisabledBackground: "var(--infinite-row-odd-disabled-background)", selectedBackground: "var(--infinite-row-selected-background)", disabledOpacity: "var(--infinite-row-disabled-opacity)", 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)", selectedHoverBackground: "var(--infinite-row-selected-hover-background)", selectedDisabledBackground: "var(--infinite-row-selected-disabled-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/components/InfiniteTable/utils/infiniteDOMUtils.ts
 var InfiniteSelector = `.${internalProps.rootClassName}`;
 function getParentInfiniteNode(node) {
@@ -1410,34 +1379,20 @@ function setInfiniteVarOnRoot(varName, varValue, node) {
 }
 function setInfiniteVarOnNode(varName, varValue, node) {
   if (node) {
-    const prop = InternalVars[varName] ? stripVar(InternalVars[varName]) : varName;
+    const name = varName;
+    const prop = InternalVars[name] ? stripVar(InternalVars[name]) : varName;
     node.style.setProperty(prop, `${varValue}`);
   }
 }
 function setInfiniteVarsOnNode(vars, node) {
   if (node) {
     for (var varName in vars) {
-      node.style.setProperty(
-        InternalVars[varName] ? stripVar(InternalVars[varName]) : varName,
-        `${vars[varName]}`
-      );
+      const propName = InternalVars[varName] ? stripVar(InternalVars[varName]) : varName;
+      const propValue = `${vars[varName]}`;
+      node.style.setProperty(propName, propValue);
     }
   }
 }
-function setInfiniteColumnWidth(colIndex, colWidth, node) {
-  setInfiniteVarOnRoot(
-    `${columnWidthAtIndex}-${colIndex}`,
-    typeof colWidth === "number" ? colWidth + "px" : colWidth,
-    node
-  );
-}
-function setInfiniteColumnOffset(colIndex, colOffset, node) {
-  setInfiniteVarOnRoot(
-    `${columnOffsetAtIndex}-${colIndex}`,
-    typeof colOffset === "number" ? colOffset + "px" : colOffset,
-    node
-  );
-}
 function addToInfiniteColumnOffset(column, amountToAdd, node) {
   setInfiniteVarOnRoot(
     `${columnOffsetAtIndex}-${column.computedVisibleIndex}`,
@@ -1474,12 +1429,42 @@ function restoreInfiniteColumnReorderDuration(colIndex, node) {
     node
   );
 }
-function getCSSVarNameForColWidth(colIndex) {
-  return `${columnWidthAtIndex}-${colIndex}`;
-}
-function getCSSVarNameForColOffset(colIndex) {
-  return `${columnOffsetAtIndex}-${colIndex}`;
-}
+var InternalVarUtils = {
+  columnWidths: {
+    get(index) {
+      return `var(${this.getVarName(index)})`;
+    },
+    getVarName(index) {
+      return this.varName.get(index);
+    },
+    varName: {
+      get(index) {
+        return `${columnWidthAtIndex}-${index}`;
+      }
+    },
+    set(index, value, node) {
+      value = typeof value === "number" ? value + "px" : value;
+      setInfiniteVarOnRoot(this.varName.get(index), value, node);
+    }
+  },
+  columnOffsets: {
+    get(index) {
+      return `var(${this.getVarName(index)})`;
+    },
+    getVarName(index) {
+      return this.varName.get(index);
+    },
+    varName: {
+      get(index) {
+        return `${columnOffsetAtIndex}-${index}`;
+      }
+    },
+    set(index, value, node) {
+      value = typeof value === "number" ? value + "px" : value;
+      setInfiniteVarOnRoot(this.varName.get(index), value, node);
+    }
+  }
+};
 function setInfiniteScrollPosition(scrollPosition, node) {
   setInfiniteVarsOnNode(
     {
@@ -1490,6 +1475,37 @@ function setInfiniteScrollPosition(scrollPosition, node) {
   );
 }
 
+// src/components/HeadlessTable/ReactHeadlessTableRenderer.tsx
+var React9 = __toESM(require("react"));
+
+// src/utils/mathIntersection.ts
+function arrayIntersection(...arrays) {
+  if (!arrays.length) {
+    return [];
+  }
+  const map2 = /* @__PURE__ */ new Map();
+  arrays.forEach((arr) => {
+    for (let i = 0, len2 = arr.length; i < len2; i++) {
+      const item = arr[i];
+      const count = map2.get(item) ?? 0;
+      map2.set(item, count + 1);
+    }
+    return map2;
+  });
+  const len = arrays.length;
+  return arrays[0].filter((x) => {
+    return map2.get(x) === len;
+  });
+}
+
+// src/utils/raf.ts
+var raf = getGlobal().requestAnimationFrame || ((fn) => {
+  return setTimeout(fn, 16);
+});
+var cancelRaf = getGlobal().cancelAnimationFrame || ((timeoutId) => {
+  return clearTimeout(timeoutId);
+});
+
 // src/components/VirtualBrain/MatrixBrain.ts
 var import_binary_search = __toESM(require_binary_search());
 
@@ -1533,6 +1549,7 @@ var MatrixBrain = class extends Logger {
     this.availableRenderHeight = 0;
     this.cols = 0;
     this.rows = 0;
+    this.alwaysRenderedColumns = /* @__PURE__ */ new Set();
     this._rowsPerPage = 0;
     this.rowHeight = 0;
     this.colWidth = 0;
@@ -1540,6 +1557,14 @@ var MatrixBrain = class extends Logger {
     this.horizontalTotalSize = 0;
     this.horizontalRenderCount = void 0;
     this.verticalRenderCount = void 0;
+    this.horizontalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
+    this.verticalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
     this.horizontalRenderRange = {
       startIndex: 0,
       endIndex: 0
@@ -1679,34 +1704,6 @@ var MatrixBrain = class extends Logger {
         });
       });
     };
-    this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
-      let renderCount = 0;
-      let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
-      size -= this.getFixedSize(direction);
-      if (size <= 0) {
-        return 0;
-      }
-      if (typeof itemSize === "function") {
-        const sizes = [];
-        for (let i = 0; i < count; i++) {
-          sizes.push(this.getItemSize(i, direction));
-        }
-        sizes.sort(SORT_ASC);
-        let sum2 = 0;
-        for (let i = 0; i < count; i++) {
-          sum2 += sizes[i];
-          renderCount++;
-          if (sum2 > size) {
-            break;
-          }
-        }
-        renderCount += 1;
-      } else {
-        renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
-      }
-      renderCount = Math.min(count, renderCount);
-      return renderCount;
-    };
     this.isColFixedEnd = (colIndex) => {
       if (!this.fixedColsEnd) {
         return false;
@@ -1973,7 +1970,7 @@ var MatrixBrain = class extends Logger {
       };
     };
     this.computeDirectionalRenderRange = (direction) => {
-      const renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
+      let renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
       const count = direction === "horizontal" ? this.cols : this.rows;
       if (!renderCount) {
         return {
@@ -1984,7 +1981,15 @@ var MatrixBrain = class extends Logger {
       const fixedStartIndex = (direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart) || 0;
       let scrollPositionForDirection = direction === "horizontal" ? this.scrollPosition.scrollLeft : this.scrollPosition.scrollTop;
       scrollPositionForDirection += this.getFixedStartSize(direction);
+      const extendBy = direction === "horizontal" ? this.horizontalExtendRangeBy : this.verticalExtendRangeBy;
       let startIndex = this.getItemAt(scrollPositionForDirection, direction);
+      if (extendBy.start) {
+        startIndex = Math.max(0, startIndex - extendBy.start);
+        renderCount += extendBy.start;
+      }
+      if (extendBy.end) {
+        renderCount += extendBy.end;
+      }
       let endIndex = startIndex + renderCount;
       const theEnd = Math.max(
         fixedStartIndex,
@@ -2028,7 +2033,6 @@ var MatrixBrain = class extends Logger {
         return searchResult;
       }
       return ~searchResult - 1;
-      return 0;
     };
     this.computeCacheFor = (itemIndex, direction) => {
       const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
@@ -2193,6 +2197,15 @@ var MatrixBrain = class extends Logger {
       }
       return cachedSize;
     };
+    this.keepColumnRendered = (colIndex) => {
+      this.alwaysRenderedColumns.add(colIndex);
+      return () => {
+        this.alwaysRenderedColumns.delete(colIndex);
+      };
+    };
+    this.getAlwaysRenderedColumns = () => {
+      return Array.from(this.alwaysRenderedColumns);
+    };
     this.setRenderRange = ({
       horizontal,
       vertical,
@@ -2462,28 +2475,30 @@ var MatrixBrain = class extends Logger {
    * @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
    */
   extendRenderRange(options) {
-    const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
-    const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
-    const currentRenderCount = this.horizontalRenderCount;
+    const { direction } = options;
+    const horizontal = direction === "horizontal";
+    const extendValueWhenTrue = horizontal ? this.horizontalRenderCount || this.getInitialCols() : this.verticalRenderCount || this.getInitialRows();
+    const startAmount = typeof options.start === "number" ? options.start : options.start === true ? extendValueWhenTrue : 0;
+    const endAmount = typeof options.end === "number" ? options.end : options.end === true ? extendValueWhenTrue : 0;
+    if (horizontal) {
+      this.horizontalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    } else {
+      this.verticalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    }
+    this.updateRenderRange({ horizontal, vertical: !horizontal });
     const restore = () => {
-      this.setRenderCount({
-        horizontal: currentRenderCount,
-        vertical: void 0
+      this.extendRenderRange({
+        start: 0,
+        end: 0,
+        direction
       });
     };
-    const { start, end } = this.getRenderRange();
-    const [startRow, startCol] = start;
-    const [endRow, endCol] = end;
-    this.setRenderRange({
-      horizontal: {
-        startIndex: Math.max(0, startCol - leftAmount),
-        endIndex: Math.min(this.cols, endCol + rightAmount)
-      },
-      vertical: {
-        startIndex: startRow,
-        endIndex: endRow
-      }
-    });
     return restore;
   }
   updateRenderCount(which = ALL_DIRECTIONS) {
@@ -2555,6 +2570,34 @@ var MatrixBrain = class extends Logger {
       fns[i](scrollPosition);
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    let renderCount = 0;
+    let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
+    size -= this.getFixedSize(direction);
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "function") {
+      const sizes = [];
+      for (let i = 0; i < count; i++) {
+        sizes.push(this.getItemSize(i, direction));
+      }
+      sizes.sort(SORT_ASC);
+      let sum2 = 0;
+      for (let i = 0; i < count; i++) {
+        sum2 += sizes[i];
+        renderCount++;
+        if (sum2 > size) {
+          break;
+        }
+      }
+      renderCount += 1;
+    } else {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+    }
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getFixedSize(direction) {
     return direction === "horizontal" ? this.getFixedStartColsWidth() + this.getFixedEndColsWidth() : this.getFixedStartRowsHeight() + this.getFixedEndRowsHeight();
   }
@@ -2668,6 +2711,9 @@ var MatrixBrain = class extends Logger {
     this.reset();
     this.rowspanParent.clear();
     this.colspanParent.clear();
+    this.alwaysRenderedColumns.clear();
+    this.horizontalExtendRangeBy = { start: 0, end: 0 };
+    this.verticalExtendRangeBy = { start: 0, end: 0 };
     this.destroyed = true;
     this.onDestroyFns = [];
     this.onScrollFns = [];
@@ -2701,6 +2747,9 @@ var MappedCells = class extends Logger {
       }
       return elementsOutsideItemRange.pop();
     };
+    this.getElementFromListForRow = (elementsOutsideItemRange, _rowIndex) => {
+      return elementsOutsideItemRange.pop();
+    };
     /**
      * Retrieves the elements that contain rendered cells that are outside
      * of the specified range
@@ -2998,7 +3047,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
     this.detailRowUpdaters = [];
     this.items = [];
     this.detailItems = [];
-    this.currentHoveredRow = -1;
+    this.lastEnteredRow = -1;
+    this.lastExitedRow = -1;
     this.hoverRowUpdatesInProgress = /* @__PURE__ */ new Map();
     this.infiniteNode = null;
     this.setDetailTransform = (element, _rowIndex, {
@@ -3020,14 +3070,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
       scrollLeft: scrollLeft2,
       scrollTop: scrollTop2
     }, zIndex2) => {
-      const columnOffsetX = `${columnOffsetAtIndex2}-${colIndex}`;
+      const columnOffsetX = InternalVarUtils.columnOffsets.get(colIndex);
       const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${colIndex}`;
       const currentTransformYValue = scrollTop2 ? `calc( ${y}px + var(${scrollTopCSSVar}) )` : `${y}px`;
       if (element.__currentTransformY !== currentTransformYValue) {
         element.__currentTransformY = currentTransformYValue;
         element.style.setProperty(currentTransformY, currentTransformYValue);
       }
-      const transformValue = `translate3d(var(${columnOffsetXWhileReordering}, var(${columnOffsetX})), var(${currentTransformY}), 0)`;
+      const transformValue = `translate3d(var(${columnOffsetXWhileReordering}, ${columnOffsetX}), var(${currentTransformY}), 0)`;
       if (element.__transformValue !== transformValue) {
         element.__transformValue = transformValue;
         element.style.transform = transformValue;
@@ -3427,11 +3477,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return covered ? [rowspanParent, colspanParent] : false;
     };
     this.onMouseEnter = (rowIndex) => {
-      this.currentHoveredRow = rowIndex;
+      this.lastEnteredRow = rowIndex;
+      this.lastExitedRow = -1;
       if (this.scrolling) {
         return;
       }
-      this.addHoverClass(rowIndex);
+      if (rowIndex != -1) {
+        this.addHoverClass(rowIndex);
+      }
     };
     this.addHoverClass = (rowIndex) => {
       this.mappedCells.getElementsForRowIndex(rowIndex).forEach((elIndex) => {
@@ -3444,14 +3497,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
       });
     };
     this.onMouseLeave = (rowIndex) => {
-      if (this.currentHoveredRow != -1 && this.currentHoveredRow === rowIndex) {
-        this.removeHoverClass(rowIndex);
-      }
-      this.currentHoveredRow = -1;
+      this.lastExitedRow = rowIndex;
+      this.lastEnteredRow = -1;
       if (this.scrolling) {
         return;
       }
-      this.removeHoverClass(rowIndex);
+      if (rowIndex != -1) {
+        this.removeHoverClass(rowIndex);
+      }
     };
     this.removeHoverClass = (rowIndex) => {
       this.mappedCells.getElementsForRowIndex(rowIndex).forEach((elIndex) => {
@@ -3475,8 +3528,8 @@ var ReactHeadlessTableRenderer = class extends Logger {
       }
       this.hoverRowUpdatesInProgress.set(rowIndex, true);
       const checkHoverClass = () => {
-        if (this.currentHoveredRow != -1 && !this.scrolling) {
-          if (this.currentHoveredRow === rowIndex) {
+        if (!this.scrolling && this.lastEnteredRow != -1) {
+          if (this.lastEnteredRow === rowIndex) {
             this.addHoverClass(rowIndex);
           } else {
             this.removeHoverClass(rowIndex);
@@ -3569,11 +3622,17 @@ var ReactHeadlessTableRenderer = class extends Logger {
     };
     this.onScrollStart = () => {
       this.scrolling = true;
+      if (this.lastEnteredRow != -1) {
+        this.removeHoverClass(this.lastEnteredRow);
+      }
     };
     this.onScrollStop = () => {
       this.scrolling = false;
-      if (this.currentHoveredRow != -1) {
-        this.addHoverClass(this.currentHoveredRow);
+      if (this.lastEnteredRow != -1) {
+        this.addHoverClass(this.lastEnteredRow);
+      }
+      if (this.lastExitedRow != -1) {
+        this.removeHoverClass(this.lastExitedRow);
       }
     };
     this.adjustFixedElementsOnScroll = (scrollPosition = this.brain.getScrollPosition()) => {
@@ -3840,12 +3899,27 @@ var ReactHeadlessTableRenderer = class extends Logger {
       return [];
     }
     const { start, end } = range;
+    const horizontalLayout = this.brain.isHorizontalLayoutBrain;
     if (false) {
       this.debug(`Render range ${start}-${end}. Force ${force}`);
     }
     const { mappedCells, mappedDetailRows } = this;
     const fixedRanges = this.getFixedRanges(range);
     const ranges = [range, ...fixedRanges];
+    const alwaysRenderedColumns = this.brain.getAlwaysRenderedColumns();
+    if (alwaysRenderedColumns.length > 0) {
+      const startCol = range.start[1];
+      const endCol = range.end[1];
+      alwaysRenderedColumns.forEach((colIndex) => {
+        const colInRange = startCol <= colIndex && colIndex < endCol;
+        if (!colInRange) {
+          ranges.push({
+            start: [range.start[0], colIndex],
+            end: [range.end[0], colIndex + 1]
+          });
+        }
+      });
+    }
     const extraCellsMap = /* @__PURE__ */ new Map();
     const extraCells = ranges.map(this.getExtraSpanCellsForRange).flat();
     if (extraCells) {
@@ -3965,9 +4039,15 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (cellRendered && !force && cellMappedCorrectly) {
             continue;
           }
-          const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : mappedCells.getElementFromListForColumn(
-            elementsOutsideItemRange,
-            col
+          const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
+            // TODO when horizontal layout, just do elementsOutsideItemRange.pop()
+            horizontalLayout ? mappedCells.getElementFromListForRow(
+              elementsOutsideItemRange,
+              row
+            ) : mappedCells.getElementFromListForColumn(
+              elementsOutsideItemRange,
+              col
+            )
           );
           if (elementIndex == null) {
             if (false) {
@@ -4210,17 +4290,18 @@ var HorizontalLayoutTableRenderer = class extends ReactHeadlessTableRenderer {
       );
       const pageWidth = ThemeVars.runtime.totalVisibleColumnsWidthVar;
       const pageOffset = pageIndex ? `calc(${pageWidth} * ${pageIndex})` : "0px";
-      const columnOffsetX = `${columnOffsetAtIndex2}-${horizontalLayoutCoords.colIndex}`;
+      const columnOffsetX = InternalVarUtils.columnOffsets.get(
+        horizontalLayoutCoords.colIndex
+      );
       const columnOffsetXWhileReordering = `${columnOffsetAtIndexWhileReordering2}-${horizontalLayoutCoords.colIndex}`;
       const currentTransformYValue = `${y}px`;
       if (element.__currentTransformY !== currentTransformYValue) {
         element.__currentTransformY = currentTransformYValue;
         element.style.setProperty(currentTransformY, currentTransformYValue);
       }
-      const xOffset = `calc(var(${columnOffsetX}) + ${pageOffset})`;
-      const transformX2 = `var(${columnOffsetXWhileReordering}, ${xOffset})`;
+      const xOffset = `calc(var(${columnOffsetXWhileReordering}, ${columnOffsetX}) + ${pageOffset})`;
       const transformY = `var(${currentTransformY})`;
-      const transformValue = `translate3d(${transformX2}, ${transformY}, 0px)`;
+      const transformValue = `translate3d(${xOffset}, ${transformY}, 0px)`;
       if (element.__transformValue !== transformValue) {
         element.__transformValue = transformValue;
         element.style.transform = transformValue;
@@ -5321,22 +5402,22 @@ var import_react18 = require("react");
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
 var CellCls = "cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
-var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob124 utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1b utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_justifyContent_start__16lm1iw1v", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob125", true: "header_HeaderCellContentRecipe_filtered_true__12zfob126" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob127", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob128", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob129" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob12a", end: "header_HeaderCellContentRecipe_align_end__12zfob12b", center: "header_HeaderCellContentRecipe_align_center__12zfob12c" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderCellContentRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellContentRecipe__12zfob126 utilities_height_100%__16lm1iw19 utilities_width_100%__16lm1iw1b utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_justifyContent_start__16lm1iw1v", variantClassNames: { filtered: { false: "header_HeaderCellContentRecipe_filtered_false__12zfob127", true: "header_HeaderCellContentRecipe_filtered_true__12zfob128" }, verticalAlign: { start: "header_HeaderCellContentRecipe_verticalAlign_start__12zfob129", end: "header_HeaderCellContentRecipe_verticalAlign_end__12zfob12a", center: "header_HeaderCellContentRecipe_verticalAlign_center__12zfob12b" }, align: { start: "header_HeaderCellContentRecipe_align_start__12zfob12c", end: "header_HeaderCellContentRecipe_align_end__12zfob12d", center: "header_HeaderCellContentRecipe_align_center__12zfob12e" } }, defaultVariants: {}, compoundVariants: [] });
 var HeaderCellProxy = "header_HeaderCellProxy__12zfob1n utilities_whiteSpace_nowrap__16lm1iw23 utilities_textOverflow_ellipsis__16lm1iw24 utilities_overflow_hidden__16lm1iw1x";
-var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o utilities_display_block__16lm1iw12", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, rowDisabled: { false: "header_HeaderCellRecipe_rowDisabled_false__12zfob1w", true: "header_HeaderCellRecipe_rowDisabled_true__12zfob1x" }, firstRow: { false: "header_HeaderCellRecipe_firstRow_false__12zfob1y", true: "header_HeaderCellRecipe_firstRow_true__12zfob1z" }, firstRowInHorizontalLayoutPage: { false: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_false__12zfob110", true: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_true__12zfob111" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob112", true: "header_HeaderCellRecipe_groupRow_true__12zfob113" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob114", true: "header_HeaderCellRecipe_groupCell_true__12zfob115" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob116", end: "header_HeaderCellRecipe_align_end__12zfob117", center: "header_HeaderCellRecipe_align_center__12zfob118" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob119", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob11a", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob11b" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob11c", even: "header_HeaderCellRecipe_zebra_even__12zfob11d", odd: "header_HeaderCellRecipe_zebra_odd__12zfob11e" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob11f", false: "header_HeaderCellRecipe_dragging_false__12zfob11g" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11h", false: "header_HeaderCellRecipe_first_false__12zfob11i" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11j", false: "header_HeaderCellRecipe_last_false__12zfob11k" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11l", false: "header_HeaderCellRecipe_groupByField_false__12zfob11m" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11n", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11o" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11p", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11q" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11r", end: "header_HeaderCellRecipe_pinned_end__12zfob11s", false: "header_HeaderCellRecipe_pinned_false__12zfob11t" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11u", false: "header_HeaderCellRecipe_filtered_false__12zfob11v" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11w"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11x"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob11y"]] });
+var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "header_HeaderCellRecipe__12zfob1o utilities_display_block__16lm1iw12", variantClassNames: { rowActive: { false: "header_HeaderCellRecipe_rowActive_false__12zfob1p", true: "header_HeaderCellRecipe_rowActive_true__12zfob1q" }, cellSelected: { false: "header_HeaderCellRecipe_cellSelected_false__12zfob1r", true: "header_HeaderCellRecipe_cellSelected_true__12zfob1s" }, rowSelected: { false: "header_HeaderCellRecipe_rowSelected_false__12zfob1t", true: "header_HeaderCellRecipe_rowSelected_true__12zfob1u", null: "header_HeaderCellRecipe_rowSelected_null__12zfob1v" }, rowDisabled: { false: "header_HeaderCellRecipe_rowDisabled_false__12zfob1w", true: "header_HeaderCellRecipe_rowDisabled_true__12zfob1x" }, firstRow: { false: "header_HeaderCellRecipe_firstRow_false__12zfob1y", true: "header_HeaderCellRecipe_firstRow_true__12zfob1z" }, firstRowInHorizontalLayoutPage: { false: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_false__12zfob110", true: "header_HeaderCellRecipe_firstRowInHorizontalLayoutPage_true__12zfob111" }, groupRow: { false: "header_HeaderCellRecipe_groupRow_false__12zfob112", true: "header_HeaderCellRecipe_groupRow_true__12zfob113" }, groupCell: { false: "header_HeaderCellRecipe_groupCell_false__12zfob114", true: "header_HeaderCellRecipe_groupCell_true__12zfob115" }, align: { start: "header_HeaderCellRecipe_align_start__12zfob116", end: "header_HeaderCellRecipe_align_end__12zfob117", center: "header_HeaderCellRecipe_align_center__12zfob118" }, verticalAlign: { start: "header_HeaderCellRecipe_verticalAlign_start__12zfob119", end: "header_HeaderCellRecipe_verticalAlign_end__12zfob11a", center: "header_HeaderCellRecipe_verticalAlign_center__12zfob11b" }, zebra: { false: "header_HeaderCellRecipe_zebra_false__12zfob11c", even: "header_HeaderCellRecipe_zebra_even__12zfob11d", odd: "header_HeaderCellRecipe_zebra_odd__12zfob11e" }, dragging: { true: "header_HeaderCellRecipe_dragging_true__12zfob11f", false: "header_HeaderCellRecipe_dragging_false__12zfob11g" }, insideDisabledDraggingPage: { true: "header_HeaderCellRecipe_insideDisabledDraggingPage_true__12zfob11h", false: "header_HeaderCellRecipe_insideDisabledDraggingPage_false__12zfob11i" }, first: { true: "header_HeaderCellRecipe_first_true__12zfob11j", false: "header_HeaderCellRecipe_first_false__12zfob11k" }, last: { true: "header_HeaderCellRecipe_last_true__12zfob11l", false: "header_HeaderCellRecipe_last_false__12zfob11m" }, groupByField: { true: "header_HeaderCellRecipe_groupByField_true__12zfob11n", false: "header_HeaderCellRecipe_groupByField_false__12zfob11o" }, firstInCategory: { true: "header_HeaderCellRecipe_firstInCategory_true__12zfob11p", false: "header_HeaderCellRecipe_firstInCategory_false__12zfob11q" }, lastInCategory: { true: "header_HeaderCellRecipe_lastInCategory_true__12zfob11r", false: "header_HeaderCellRecipe_lastInCategory_false__12zfob11s" }, pinned: { start: "header_HeaderCellRecipe_pinned_start__12zfob11t", end: "header_HeaderCellRecipe_pinned_end__12zfob11u", false: "header_HeaderCellRecipe_pinned_false__12zfob11v" }, filtered: { true: "header_HeaderCellRecipe_filtered_true__12zfob11w", false: "header_HeaderCellRecipe_filtered_false__12zfob11x" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "header_HeaderCellRecipe_compound_0__12zfob11y"], [{ pinned: "end", firstInCategory: true }, "header_HeaderCellRecipe_compound_1__12zfob11z"], [{ pinned: false, lastInCategory: true }, "header_HeaderCellRecipe_compound_2__12zfob120"]] });
 var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "header_HeaderClsRecipe__12zfob19 utilities_display_block__16lm1iw12 utilities_position_absolute__16lm1iw2", variantClassNames: { pinned: { start: "header_HeaderClsRecipe_pinned_start__12zfob1a", end: "header_HeaderClsRecipe_pinned_end__12zfob1b", false: "header_HeaderClsRecipe_pinned_false__12zfob1c" }, firstInCategory: { true: "header_HeaderClsRecipe_firstInCategory_true__12zfob1d", false: "header_HeaderClsRecipe_firstInCategory_false__12zfob1e" }, lastInCategory: { true: "header_HeaderClsRecipe_lastInCategory_true__12zfob1f", false: "header_HeaderClsRecipe_lastInCategory_false__12zfob1g" }, overflow: { true: "header_HeaderClsRecipe_overflow_true__12zfob1h", false: "header_HeaderClsRecipe_overflow_false__12zfob1i" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "header_HeaderClsRecipe_compound_0__12zfob1j"], [{ pinned: "start", firstInCategory: true }, "header_HeaderClsRecipe_compound_1__12zfob1k"], [{ overflow: true, pinned: "end" }, "header_HeaderClsRecipe_compound_2__12zfob1l"], [{ pinned: "end", lastInCategory: true }, "header_HeaderClsRecipe_compound_3__12zfob1m"]] });
-var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12m utilities_width_100%__16lm1iw1b utilities_height_100%__16lm1iw19";
+var HeaderFilterEditorCls = "header_HeaderFilterEditorCls__12zfob12o utilities_width_100%__16lm1iw1b utilities_height_100%__16lm1iw19";
 var HeaderFilterIconIndexCls = "header_HeaderFilterIconIndexCls__12zfob17";
-var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob12i utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_relative__16lm1iw1";
-var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob12j utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1c", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob12k", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12l" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderFilterRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterRecipe__12zfob12f utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_stretch__16lm1iw1r utilities_position_relative__16lm1iw1", variantClassNames: { active: { true: "header_HeaderFilterRecipe_active_true__12zfob12g", false: "header_HeaderFilterRecipe_active_false__12zfob12h" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderGroupCls = "header_HeaderGroupCls__12zfob12e utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q";
-var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob11z utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_justifyContent_spaceAround__16lm1iw1u utilities_visibility_hidden__16lm1iw21", variantClassNames: { menuVisible: { true: "header_HeaderMenuIconCls_menuVisible_true__12zfob120" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob121", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob122" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob123"]] });
+var HeaderFilterOperatorCls = "header_HeaderFilterOperatorCls__12zfob12k utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_relative__16lm1iw1";
+var HeaderFilterOperatorIconRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterOperatorIconRecipe__12zfob12l utilities_position_relative__16lm1iw1 utilities_top_0__16lm1iw1c", variantClassNames: { disabled: { true: "header_HeaderFilterOperatorIconRecipe_disabled_true__12zfob12m", false: "header_HeaderFilterOperatorIconRecipe_disabled_false__12zfob12n" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderFilterRecipe = createRuntimeFn({ defaultClassName: "header_HeaderFilterRecipe__12zfob12h utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_stretch__16lm1iw1r utilities_position_relative__16lm1iw1", variantClassNames: { active: { true: "header_HeaderFilterRecipe_active_true__12zfob12i", false: "header_HeaderFilterRecipe_active_false__12zfob12j" } }, defaultVariants: {}, compoundVariants: [] });
+var HeaderGroupCls = "header_HeaderGroupCls__12zfob12g utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q";
+var HeaderMenuIconCls = createRuntimeFn({ defaultClassName: "header_HeaderMenuIconCls__12zfob121 utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_justifyContent_spaceAround__16lm1iw1u utilities_visibility_hidden__16lm1iw21", variantClassNames: { menuVisible: { true: "header_HeaderMenuIconCls_menuVisible_true__12zfob122" }, reserveSpaceWhenHidden: { true: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_true__12zfob123", false: "header_HeaderMenuIconCls_reserveSpaceWhenHidden_false__12zfob124" } }, defaultVariants: {}, compoundVariants: [[{ menuVisible: true, reserveSpaceWhenHidden: false }, "header_HeaderMenuIconCls_compound_0__12zfob125"]] });
 var HeaderScrollbarPlaceholderCls = "header_HeaderScrollbarPlaceholderCls__12zfob18 utilities_position_absolute__16lm1iw2";
 var HeaderSortIconCls = "utilities_position_relative__16lm1iw1";
 var HeaderSortIconIndexCls = "header_HeaderSortIconIndexCls__12zfob16";
 var HeaderSortIconRecipe = createRuntimeFn({ defaultClassName: "header__12zfob12", variantClassNames: { align: { start: "header_HeaderSortIconRecipe_align_start__12zfob13", center: "header_HeaderSortIconRecipe_align_center__12zfob14", end: "header_HeaderSortIconRecipe_align_end__12zfob15" } }, defaultVariants: {}, compoundVariants: [] });
-var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob12d utilities_overflow_hidden__16lm1iw1x utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o";
+var HeaderWrapperCls = "header_HeaderWrapperCls__12zfob12f utilities_overflow_hidden__16lm1iw1x utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o";
 
 // src/components/InfiniteTable/components/icons/InfiniteTableIconClassName.ts
 var InfiniteTableIconClassName = "InfiniteTableIcon";
@@ -6778,6 +6859,7 @@ function useCellClassName(column, baseClasses, variants, extraFlags) {
     rowSelected: extraFlags.rowSelected ?? "null",
     rowActive: extraFlags.rowActive,
     dragging: extraFlags.dragging,
+    insideDisabledDraggingPage: extraFlags.insideDisabledDraggingPage,
     firstRow: extraFlags.firstRow ?? false,
     firstRowInHorizontalLayoutPage: extraFlags.firstRowInHorizontalLayoutPage ?? false,
     rowDisabled: extraFlags.rowDisabled,
@@ -6845,11 +6927,11 @@ var import_react21 = require("react");
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var FooterCls = "utilities_position_relative__16lm1iw1";
 var InfiniteCls = "InfiniteCls_InfiniteCls__1yeub2v0 utilities_position_relative__16lm1iw1 utilities_display_flex__16lm1iwz utilities_flexFlow_column__16lm1iw1m utilities_boxSizingBorderBox__16lm1iw0";
-var InfiniteClsHasPinnedEnd = "InfiniteCls_InfiniteClsHasPinnedEnd__1yeub2vq";
-var InfiniteClsHasPinnedStart = "InfiniteCls_InfiniteClsHasPinnedStart__1yeub2vp";
-var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2v2", variantClassNames: { focused: { true: "InfiniteCls_InfiniteClsRecipe_focused_true__1yeub2v3", false: "InfiniteCls_InfiniteClsRecipe_focused_false__1yeub2v4" }, focusedWithin: { true: "InfiniteCls_InfiniteClsRecipe_focusedWithin_true__1yeub2v5", false: "InfiniteCls_InfiniteClsRecipe_focusedWithin_false__1yeub2v6" }, hasPinnedStart: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_true__1yeub2v7", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_false__1yeub2v8" }, hasPinnedEnd: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_true__1yeub2v9", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_false__1yeub2va" }, hasPinnedStartOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_true__1yeub2vb", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_false__1yeub2vc" }, hasPinnedEndOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_true__1yeub2vd", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_false__1yeub2ve" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "InfiniteCls_InfiniteClsRecipe_compound_0__1yeub2vf"]] });
-var InfiniteClsShiftingColumns = "InfiniteCls_shiftingcols__1yeub2vn";
-var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2vj", variantClassNames: { pinned: { start: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_start__1yeub2vk", end: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_end__1yeub2vl", false: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_false__1yeub2vm" } }, defaultVariants: {}, compoundVariants: [] });
+var InfiniteClsHasPinnedEnd = "InfiniteCls_InfiniteClsHasPinnedEnd__1yeub2vs";
+var InfiniteClsHasPinnedStart = "InfiniteCls_InfiniteClsHasPinnedStart__1yeub2vr";
+var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2v2", variantClassNames: { horizontalLayout: { true: "InfiniteCls_InfiniteClsRecipe_horizontalLayout_true__1yeub2v3", false: "InfiniteCls_InfiniteClsRecipe_horizontalLayout_false__1yeub2v4" }, focused: { true: "InfiniteCls_InfiniteClsRecipe_focused_true__1yeub2v5", false: "InfiniteCls_InfiniteClsRecipe_focused_false__1yeub2v6" }, focusedWithin: { true: "InfiniteCls_InfiniteClsRecipe_focusedWithin_true__1yeub2v7", false: "InfiniteCls_InfiniteClsRecipe_focusedWithin_false__1yeub2v8" }, hasPinnedStart: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_true__1yeub2v9", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStart_false__1yeub2va" }, hasPinnedEnd: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_true__1yeub2vb", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEnd_false__1yeub2vc" }, hasPinnedStartOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_true__1yeub2vd", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedStartOverflow_false__1yeub2ve" }, hasPinnedEndOverflow: { true: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_true__1yeub2vf", false: "InfiniteCls_InfiniteClsRecipe_hasPinnedEndOverflow_false__1yeub2vg" } }, defaultVariants: {}, compoundVariants: [[{ focused: false, focusedWithin: false }, "InfiniteCls_InfiniteClsRecipe_compound_0__1yeub2vh"]] });
+var InfiniteClsShiftingColumns = "InfiniteCls_shiftingcols__1yeub2vp";
+var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "InfiniteCls__1yeub2vl", variantClassNames: { pinned: { start: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_start__1yeub2vm", end: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_end__1yeub2vn", false: "InfiniteCls_PinnedRowsContainerClsVariants_pinned_false__1yeub2vo" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/utils/rafFn.ts
 var rafFn = (fn) => {
@@ -6890,7 +6972,6 @@ var scrollbarWidthHorizontal = stripVar(
 );
 var scrollbarWidthVertical = stripVar(InternalVars.scrollbarWidthVertical);
 var columnWidthAtIndex2 = stripVar(InternalVars.columnWidthAtIndex);
-var columnOffsetAtIndex3 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnZIndexAtIndex3 = stripVar(InternalVars.columnZIndexAtIndex);
 var scrollLeftCSSVar = stripVar(InternalVars.scrollLeft);
 var activeCellColWidth = stripVar(InternalVars.activeCellColWidth);
@@ -6932,7 +7013,8 @@ function useDOMProps(initialDOMProps) {
     onSelfFocus,
     onSelfBlur,
     bodySize,
-    activeCellIndex
+    activeCellIndex,
+    wrapRowsHorizontally
   } = state;
   const {
     computedPinnedStartColumnsWidth,
@@ -6947,11 +7029,11 @@ function useDOMProps(initialDOMProps) {
   const cssVars = computedVisibleColumns.reduce(
     (vars, col) => {
       const index = col.computedVisibleIndex;
-      vars[`${columnWidthAtIndex2}-${index}`] = col.computedWidth + "px";
-      vars[`${columnOffsetAtIndex3}-${index}`] = col.computedPinned === "start" ? `calc( ${col.computedOffset}px + var(${scrollLeftCSSVar}) )` : col.computedPinned === "end" ? (
+      vars[InternalVarUtils.columnWidths.varName.get(index)] = col.computedWidth + "px";
+      vars[InternalVarUtils.columnOffsets.varName.get(index)] = col.computedPinned === "start" ? `calc( ${col.computedOffset}px + var(${scrollLeftCSSVar}) )` : col.computedPinned === "end" ? (
         // see #startcoloffsets-pinnedend
         `calc( var(${pinnedEndOffsetCSSVar}) ${prevPinnedEndCols.length ? "+" : ""} ${prevPinnedEndCols.map(
-          (c) => `var(${columnWidthAtIndex2}-${c.computedVisibleIndex})`
+          (c) => InternalVarUtils.columnWidths.get(c.computedVisibleIndex)
         ).join(" + ")} + var(${scrollLeftCSSVar}) )`
       ) : `${col.computedOffset}px`;
       const zIndexValue = getColumnZIndex(col, {
@@ -6976,12 +7058,12 @@ function useDOMProps(initialDOMProps) {
   }).join(" + ")})`;
   cssVars[publicRuntimeVars.visibleColumnsCount.name] = computedVisibleColumns.length;
   if (activeCellIndex != null) {
-    cssVars[activeCellColWidth] = `var(${getCSSVarNameForColWidth(
+    cssVars[activeCellColWidth] = InternalVarUtils.columnWidths.get(
       activeCellIndex[1]
-    )})`;
-    const defaultActiveCellColOffset = `var(${getCSSVarNameForColOffset(
+    );
+    const defaultActiveCellColOffset = InternalVarUtils.columnOffsets.get(
       activeCellIndex[1]
-    )})`;
+    );
     if (state.brain.isHorizontalLayoutBrain) {
       const pageIndex = state.brain.getPageIndexForRow(activeCellIndex[0]);
       cssVars[activeCellColOffset] = pageIndex ? `calc( ${ThemeVars.runtime.totalVisibleColumnsWidthVar} * ${pageIndex} + ${defaultActiveCellColOffset})` : defaultActiveCellColOffset;
@@ -6992,8 +7074,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(" + ") + ")";
-  cssVars[pinnedEndWidthCSSVar] = `calc( ` + computedPinnedEndColumns.map((c) => `var(${getCSSVarNameForColWidth(c.computedVisibleIndex)})`).join(" + ") + ")";
+  cssVars[pinnedStartWidthCSSVar] = `calc( ` + computedPinnedStartColumns.map((c) => InternalVarUtils.columnWidths.get(c.computedVisibleIndex)).join(" + ") + ")";
+  cssVars[pinnedEndWidthCSSVar] = `calc( ` + computedPinnedEndColumns.map((c) => InternalVarUtils.columnWidths.get(c.computedVisibleIndex)).join(" + ") + ")";
   cssVars[baseZIndexForCells] = computedVisibleColumns.length * 10;
   cssVars[pinnedEndOffsetCSSVar] = `calc( var(${bodyWidthCSSVar}) - var(${pinnedEndWidthCSSVar}) - var(${scrollbarWidthVertical}) )`;
   cssVars[bodyWidthCSSVar] = `${bodySize.width}px`;
@@ -7051,6 +7133,7 @@ function useDOMProps(initialDOMProps) {
   const className = join(
     InfiniteTableClassName,
     InfiniteCls,
+    wrapRowsHorizontally ? `${InfiniteTableClassName}--horizontal-layout` : null,
     domProps?.className,
     computedPinnedStartColumnsWidth ? `${InfiniteTableClassName}--has-pinned-start ${InfiniteClsHasPinnedStart}` : null,
     computedPinnedEndColumnsWidth ? `${InfiniteTableClassName}--has-pinned-end  ${InfiniteClsHasPinnedEnd}` : null,
@@ -7061,6 +7144,7 @@ function useDOMProps(initialDOMProps) {
     computed.computedPinnedStartOverflow ? `${InfiniteTableClassName}--has-pinned-start-overflow` : null,
     computed.computedPinnedEndOverflow ? `${InfiniteTableClassName}--has-pinned-end-overflow` : null,
     InfiniteClsRecipe({
+      horizontalLayout: !!wrapRowsHorizontally,
       hasPinnedStart: !!computedPinnedStartColumnsWidth,
       hasPinnedEnd: !!computedPinnedEndColumnsWidth,
       // hasPinnedStartOverflow: !!computed.computedPinnedStartOverflow,
@@ -7090,6 +7174,68 @@ function useDOMProps(initialDOMProps) {
 // src/components/InfiniteTable/hooks/reorderColumnsOnDrag.ts
 var import_binary_search2 = __toESM(require_binary_search());
 
+// src/components/InfiniteTable/utils/CSSCalc.ts
+function mapToContinuation(args) {
+  return args.map(
+    (arg) => arg instanceof CssContinuation ? arg : new CssContinuation(null, [arg])
+  );
+}
+var CssContinuation = class {
+  constructor(operation, operands = []) {
+    this.__operands = [];
+    this.__operation = null;
+    this.__operands = operands;
+    this.__operation = operation;
+  }
+  add(...args) {
+    return new CssContinuation("+", [this, ...args]);
+  }
+  subtract(...args) {
+    return new CssContinuation("-", [this, ...args]);
+  }
+  minus(...args) {
+    return this.subtract(...args);
+  }
+  multiply(...args) {
+    return new CssContinuation("*", [this, ...args]);
+  }
+  divide(...args) {
+    return new CssContinuation("/", [this, ...args]);
+  }
+  __get(parent) {
+    const { __operation, __operands } = this;
+    const result = __operands.map((operand) => operandToString(operand, this)).join(` ${__operation} `);
+    const skipParens = __operands.length <= 1 ? true : parent?.__operation === "+" || parent?.__operation === "-";
+    return skipParens ? result : `(${result})`;
+  }
+  done() {
+    const str = this.__get();
+    const hasParens = str.startsWith("(") && str.endsWith(")");
+    const value = hasParens ? str : `(${str})`;
+    return `calc${value}`;
+  }
+};
+function operandToString(operand, parent) {
+  if (typeof operand === "string" || typeof operand === "number") {
+    return `${operand}`;
+  }
+  if (!parent) {
+    return operand.done();
+  }
+  return operand.__get(parent);
+}
+var add = (...args) => new CssContinuation("+", mapToContinuation(args));
+var subtract = (...args) => new CssContinuation("-", mapToContinuation(args));
+var multiply = (...args) => new CssContinuation("*", mapToContinuation(args));
+var divide = (...args) => new CssContinuation("/", mapToContinuation(args));
+var CSSCalc = {
+  add,
+  subtract,
+  minus: subtract,
+  multiply,
+  divide
+};
+
 // src/components/InfiniteTable/utils/moveXatY.ts
 var moveXatY = (arr, dragIndex, dropIndex) => {
   arr = [...arr];
@@ -7190,8 +7336,6 @@ var PROXY_OFFSET = 10;
 var pinnedStartWidthCSSVar2 = stripVar(InternalVars.pinnedStartWidth);
 function reorderColumnsOnDrag(params) {
   const {
-    columnOffsetAtIndexCSSVar,
-    columnWidthAtIndexCSSVar,
     computedVisibleColumns,
     computedVisibleColumnsMap,
     computedPinnedEndColumns,
@@ -7203,7 +7347,9 @@ function reorderColumnsOnDrag(params) {
     draggableColumnsRestrictTo,
     tableRect,
     setProxyPosition,
-    api: imperativeApi
+    api: imperativeApi,
+    horizontalLayoutPageIndex,
+    pageWidth
   } = params;
   function getCurrentPinnedWidth(pinned) {
     let currentWidth = pinned === "start" ? pinnedStartInitialWidth : pinnedEndInitialWidth;
@@ -7219,27 +7365,32 @@ function reorderColumnsOnDrag(params) {
     return currentWidth;
   }
   function isColumnVisible2(b) {
-    if (b.index === dragColumnIndex) {
+    if (b.columnIndex === dragColumnIndex) {
+      return true;
+    }
+    if (horizontalLayoutPageIndex != null) {
       return true;
     }
-    const col = computedVisibleColumns[b.index];
+    const col = computedVisibleColumns[b.columnIndex];
     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 colOffset = col.computedOffset + (horizontalLayoutPageIndex != null && pageWidth != null ? pageWidth * horizontalLayoutPageIndex : 0);
+    const visible = colOffset >= scrollLeft2 + getCurrentPinnedWidth("start") && colOffset + col.computedWidth <= scrollLeft2 + tableRect.width - getCurrentPinnedWidth("end");
+    return visible;
   }
   const getBreakPoints = (columns, options) => {
     const { restrictToParentGroup, dragColumn: dragColumn2 } = options;
     let breakpoints = [];
     columns.forEach((c) => {
+      if (c.computedVisibleIndex === dragColumnIndex) {
+        return;
+      }
       const b = {
         columnId: c.id,
-        index: c.computedVisibleIndex,
-        breakpoint: (
-          // tableRect.left +
-          c.computedOffset + Math.round(c.computedWidth / 2)
-        )
+        columnIndex: c.computedVisibleIndex,
+        offsetX: c.computedOffset + Math.round(c.computedWidth / 2)
       };
       if (isColumnVisible2(b)) {
         breakpoints.push(b);
@@ -7351,7 +7502,7 @@ function reorderColumnsOnDrag(params) {
     }
   }
   function updateDropIndex(newDropIndex) {
-    if (newDropIndex === currentDropIndex) {
+    if (newDropIndex == null || newDropIndex === currentDropIndex) {
       return;
     }
     currentDropIndex = newDropIndex;
@@ -7393,23 +7544,32 @@ function reorderColumnsOnDrag(params) {
         newPosition = isDragColumn ? (
           // this is the column we're dragging to the left
           // so we place it exactly at the offset of the currentDropIndex
-          `var(${columnOffsetAtIndexCSSVar}-${currentDropIndex})`
+          InternalVarUtils.columnOffsets.get(currentDropIndex)
         ) : isOutsideCol ? (
           // this col should have the initial pos, so we're good
-          `var(${columnOffsetAtIndexCSSVar}-${colIndex})`
+          InternalVarUtils.columnOffsets.get(colIndex)
         ) : (
           // place it at the default offset + the width of the drag column
           // as these are columns situated between the dragindex and the dropindex
-          `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) + var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`
+          CSSCalc.add(
+            InternalVarUtils.columnOffsets.get(colIndex),
+            InternalVarUtils.columnWidths.get(dragColumnIndex)
+          ).done()
         );
       } else {
         newPosition = isOutsideCol ? (
           // this is the default value for a column
-          `var(${columnOffsetAtIndexCSSVar}-${colIndex})`
+          InternalVarUtils.columnOffsets.get(colIndex)
         ) : isDragColumn ? (
           // this is the column we're dragging to the right
-          `calc( var(${columnOffsetAtIndexCSSVar}-${currentDropIndex - 1}) + var(${columnWidthAtIndexCSSVar}-${currentDropIndex - 1}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`
-        ) : `calc( var(${columnOffsetAtIndexCSSVar}-${colIndex}) - var(${columnWidthAtIndexCSSVar}-${dragColumnIndex}) )`;
+          CSSCalc.add(
+            InternalVarUtils.columnOffsets.get(currentDropIndex - 1),
+            InternalVarUtils.columnWidths.get(currentDropIndex - 1)
+          ).minus(InternalVarUtils.columnWidths.get(dragColumnIndex)).done()
+        ) : CSSCalc.minus(
+          InternalVarUtils.columnOffsets.get(colIndex),
+          InternalVarUtils.columnWidths.get(dragColumnIndex)
+        ).done();
       }
       setInfiniteColumnOffsetWhileReordering(
         colIndex,
@@ -7449,20 +7609,25 @@ function reorderColumnsOnDrag(params) {
       let idx = (0, import_binary_search2.default)(
         breakpoints,
         currentPos,
-        ({ breakpoint }, value) => {
-          return breakpoint < value ? -1 : breakpoint > value ? 1 : 0;
+        ({ offsetX }, value) => {
+          return offsetX < value ? -1 : offsetX > 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;
+      if (!breakpoints.length) {
+        if (computedVisibleColumns.length > 1) {
+          console.error("No breakpoints available, something is wrong!");
         }
-        updateDropIndex(idx);
+        idx = 0;
+      } else {
+        idx = breakpoints[idx] ? breakpoints[idx].columnIndex : breakpoints[breakpoints.length - 1].columnIndex + 1;
       }
+      if (idx === dragColumnIndex + 1) {
+        idx = dragColumnIndex;
+      }
+      updateDropIndex(idx);
       const columnPinning = {};
       computedPinnedEndColumns.forEach((col) => {
         columnPinning[col.id] = "end";
@@ -7559,8 +7724,6 @@ function adjustColumnOrderForAllColumns(options) {
 }
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
-var columnOffsetAtIndex4 = stripVar(InternalVars.columnOffsetAtIndex);
-var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
 var baseZIndexForCells2 = stripVar(InternalVars.baseZIndexForCells);
 var equalPinning = (pinning1, pinning2) => {
   const empty1 = !pinning1 || Object.keys(pinning1).length === 0;
@@ -7575,7 +7738,8 @@ var equalPinning = (pinning1, pinning2) => {
 };
 var useColumnPointerEvents = ({
   columnId,
-  domRef
+  domRef,
+  horizontalLayoutPageIndex
 }) => {
   const [proxyPosition, setProxyPosition] = (0, import_react21.useState)(null);
   const {
@@ -7619,13 +7783,20 @@ var useColumnPointerEvents = ({
       const tableRect = rootRef.current.getBoundingClientRect();
       const initialAvailableSize = brain.getAvailableSize();
       const dragColumnIndex = dragColumn.computedVisibleIndex;
+      const dragColumnIndexInHorizontalLayout = brain.getVirtualColIndex(
+        dragColumn.computedVisibleIndex,
+        {
+          pageIndex: horizontalLayoutPageIndex || 0
+        }
+      );
+      const pageWidth = brain.isHorizontalLayoutBrain ? brain.getPageWidth() : null;
       let initialCursor = target.style.cursor ?? "auto";
       let didDragAtLeastOnce = false;
       const dragger = reorderColumnsOnDrag({
         brain,
+        horizontalLayoutPageIndex,
+        pageWidth,
         draggableColumnsRestrictTo,
-        columnOffsetAtIndexCSSVar: columnOffsetAtIndex4,
-        columnWidthAtIndexCSSVar: columnWidthAtIndex3,
         computedPinnedEndColumns,
         computedPinnedStartColumns,
         computedUnpinnedColumns,
@@ -7643,6 +7814,8 @@ var useColumnPointerEvents = ({
         }
       });
       let reorderDragResult = null;
+      let discardAlwaysRenderedColumn;
+      let restoreRenderRange;
       function persistColumnOrder(reorderDragResult2) {
         const { columnPinning, columnOrder } = reorderDragResult2;
         if (!equalPinning(getState().columnPinning, columnPinning)) {
@@ -7671,15 +7844,37 @@ var useColumnPointerEvents = ({
         const { headerBrain, brain: brain2 } = getState();
         if (!didDragAtLeastOnce) {
           didDragAtLeastOnce = true;
-          brain2.setRenderCount({
-            horizontal: computedVisibleColumns.length,
-            vertical: void 0
-          });
-          headerBrain.setRenderCount({
-            horizontal: computedVisibleColumns.length,
-            vertical: void 0
-          });
+          const discardForBody = brain2.keepColumnRendered(
+            dragColumnIndexInHorizontalLayout
+          );
+          const discardForHeader = headerBrain.keepColumnRendered(
+            dragColumnIndexInHorizontalLayout
+          );
+          if (brain2.isHorizontalLayoutBrain) {
+            const extendBy = true;
+            const restoreBodyRange = brain2.extendRenderRange({
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
+            });
+            const restoreHeaderRange = headerBrain.extendRenderRange({
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
+            });
+            restoreRenderRange = () => {
+              restoreBodyRange();
+              restoreHeaderRange();
+            };
+          }
+          discardAlwaysRenderedColumn = () => {
+            discardForBody();
+            discardForHeader();
+          };
           actions.columnReorderDragColumnId = dragColumn.id;
+          if (horizontalLayoutPageIndex != null) {
+            actions.columnReorderInPageIndex = horizontalLayoutPageIndex;
+          }
           setInfiniteColumnZIndex(
             dragColumnIndex,
             `calc( var(${baseZIndexForCells2}) + 10000 )`,
@@ -7698,6 +7893,8 @@ var useColumnPointerEvents = ({
         brain.update({
           ...initialAvailableSize
         });
+        discardAlwaysRenderedColumn?.();
+        restoreRenderRange?.();
         computedVisibleColumns.forEach((col) => {
           clearInfiniteColumnReorderDuration(
             col.computedVisibleIndex,
@@ -7732,12 +7929,15 @@ var useColumnPointerEvents = ({
           persistColumnOrder(reorderDragResult);
         }
         actions.columnReorderDragColumnId = false;
+        if (horizontalLayoutPageIndex != null) {
+          actions.columnReorderInPageIndex = null;
+        }
       };
       target.addEventListener("pointermove", onPointerMove);
       target.addEventListener("pointerup", onPointerUp);
       target.setPointerCapture(e.pointerId);
     },
-    [columnId]
+    [columnId, horizontalLayoutPageIndex]
   );
   return {
     onPointerDown: computed.computedVisibleColumnsMap.get(columnId)?.computedDraggable ? onPointerDown : defaultPointerDown,
@@ -8047,7 +8247,7 @@ function objectValuesExcept(obj, exceptList) {
 
 // src/components/InfiniteTable/components/cell.css.ts
 var ColumnCellCls = "cell_ColumnCellCls__1eexc2a6 cell_CellCls__1eexc2a5 utilities_display_flex__16lm1iwz utilities_flexFlow_row__16lm1iw1o utilities_alignItems_center__16lm1iw1q utilities_position_absolute__16lm1iw2 utilities_willChange_transform__16lm1iw22 utilities_whiteSpace_nowrap__16lm1iw23 utilities_userSelect_none__16lm1iw17";
-var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2am", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2an", true: "cell_ColumnCellRecipe_dragging_true__1eexc2ao" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2ap", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2aq" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2ar", end: "cell_ColumnCellRecipe_align_end__1eexc2as", center: "cell_ColumnCellRecipe_align_center__1eexc2at" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2au", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2av", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2aw" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2ax", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2ay" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2az", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2a10" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2a11", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2a12" }, rowDisabled: { false: "cell_ColumnCellRecipe_rowDisabled_false__1eexc2a13", true: "cell_ColumnCellRecipe_rowDisabled_true__1eexc2a14" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2a15", even: "cell_ColumnCellRecipe_zebra_even__1eexc2a16", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a17" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a18", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a19", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a1a" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a1b", false: "cell_ColumnCellRecipe_first_false__1eexc2a1c" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a1d", false: "cell_ColumnCellRecipe_last_false__1eexc2a1e" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a1f", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a1g" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1h", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1i" }, firstRow: { true: "cell_ColumnCellRecipe_firstRow_true__1eexc2a1j", false: "cell_ColumnCellRecipe_firstRow_false__1eexc2a1k" }, firstRowInHorizontalLayoutPage: { true: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_true__1eexc2a1l", false: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_false__1eexc2a1m" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1n", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1o" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1p", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1q", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1r" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1s", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1t" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "cell_ColumnCellRecipe_compound_0__1eexc2a1u"], [{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a1v"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a1w"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a1x"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_4__1eexc2a1y"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_5__1eexc2a1z"], [{ rowDisabled: true, zebra: "odd" }, "cell_ColumnCellRecipe_compound_6__1eexc2a20"]] });
+var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellRecipe__1eexc2am", variantClassNames: { dragging: { false: "cell_ColumnCellRecipe_dragging_false__1eexc2an", true: "cell_ColumnCellRecipe_dragging_true__1eexc2ao" }, insideDisabledDraggingPage: { true: "cell_ColumnCellRecipe_insideDisabledDraggingPage_true__1eexc2ap", false: "cell_ColumnCellRecipe_insideDisabledDraggingPage_false__1eexc2aq" }, cellSelected: { false: "cell_ColumnCellRecipe_cellSelected_false__1eexc2ar", true: "cell_ColumnCellRecipe_cellSelected_true__1eexc2as" }, align: { start: "cell_ColumnCellRecipe_align_start__1eexc2at", end: "cell_ColumnCellRecipe_align_end__1eexc2au", center: "cell_ColumnCellRecipe_align_center__1eexc2av" }, verticalAlign: { start: "cell_ColumnCellRecipe_verticalAlign_start__1eexc2aw", end: "cell_ColumnCellRecipe_verticalAlign_end__1eexc2ax", center: "cell_ColumnCellRecipe_verticalAlign_center__1eexc2ay" }, rowActive: { false: "cell_ColumnCellRecipe_rowActive_false__1eexc2az", true: "cell_ColumnCellRecipe_rowActive_true__1eexc2a10" }, groupRow: { false: "cell_ColumnCellRecipe_groupRow_false__1eexc2a11", true: "cell_ColumnCellRecipe_groupRow_true__1eexc2a12" }, groupCell: { false: "cell_ColumnCellRecipe_groupCell_false__1eexc2a13", true: "cell_ColumnCellRecipe_groupCell_true__1eexc2a14" }, rowDisabled: { false: "cell_ColumnCellRecipe_rowDisabled_false__1eexc2a15", true: "cell_ColumnCellRecipe_rowDisabled_true__1eexc2a16" }, zebra: { false: "cell_ColumnCellRecipe_zebra_false__1eexc2a17", even: "cell_ColumnCellRecipe_zebra_even__1eexc2a18", odd: "cell_ColumnCellRecipe_zebra_odd__1eexc2a19" }, rowSelected: { true: "cell_ColumnCellRecipe_rowSelected_true__1eexc2a1a", false: "cell_ColumnCellRecipe_rowSelected_false__1eexc2a1b", null: "cell_ColumnCellRecipe_rowSelected_null__1eexc2a1c" }, first: { true: "cell_ColumnCellRecipe_first_true__1eexc2a1d", false: "cell_ColumnCellRecipe_first_false__1eexc2a1e" }, last: { true: "cell_ColumnCellRecipe_last_true__1eexc2a1f", false: "cell_ColumnCellRecipe_last_false__1eexc2a1g" }, groupByField: { true: "cell_ColumnCellRecipe_groupByField_true__1eexc2a1h", false: "cell_ColumnCellRecipe_groupByField_false__1eexc2a1i" }, firstInCategory: { true: "cell_ColumnCellRecipe_firstInCategory_true__1eexc2a1j", false: "cell_ColumnCellRecipe_firstInCategory_false__1eexc2a1k" }, firstRow: { true: "cell_ColumnCellRecipe_firstRow_true__1eexc2a1l", false: "cell_ColumnCellRecipe_firstRow_false__1eexc2a1m" }, firstRowInHorizontalLayoutPage: { true: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_true__1eexc2a1n", false: "cell_ColumnCellRecipe_firstRowInHorizontalLayoutPage_false__1eexc2a1o" }, lastInCategory: { true: "cell_ColumnCellRecipe_lastInCategory_true__1eexc2a1p", false: "cell_ColumnCellRecipe_lastInCategory_false__1eexc2a1q" }, pinned: { start: "cell_ColumnCellRecipe_pinned_start__1eexc2a1r", end: "cell_ColumnCellRecipe_pinned_end__1eexc2a1s", false: "cell_ColumnCellRecipe_pinned_false__1eexc2a1t" }, filtered: { true: "cell_ColumnCellRecipe_filtered_true__1eexc2a1u", false: "cell_ColumnCellRecipe_filtered_false__1eexc2a1v" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "cell_ColumnCellRecipe_compound_0__1eexc2a1w"], [{ pinned: "start", lastInCategory: true }, "cell_ColumnCellRecipe_compound_1__1eexc2a1x"], [{ pinned: "start", firstInCategory: true }, "cell_ColumnCellRecipe_compound_2__1eexc2a1y"], [{ pinned: "end", firstInCategory: true }, "cell_ColumnCellRecipe_compound_3__1eexc2a1z"], [{ pinned: "end", lastInCategory: true }, "cell_ColumnCellRecipe_compound_4__1eexc2a20"], [{ align: "center", groupCell: false }, "cell_ColumnCellRecipe_compound_5__1eexc2a21"], [{ rowDisabled: true, zebra: "odd" }, "cell_ColumnCellRecipe_compound_6__1eexc2a22"]] });
 var ColumnCellSelectionIndicatorRecipe = createRuntimeFn({ defaultClassName: "cell_ColumnCellSelectionIndicatorRecipe__1eexc2ad", variantClassNames: { right: { true: "cell_ColumnCellSelectionIndicatorRecipe_right_true__1eexc2ae", false: "cell_ColumnCellSelectionIndicatorRecipe_right_false__1eexc2af" }, left: { true: "cell_ColumnCellSelectionIndicatorRecipe_left_true__1eexc2ag", false: "cell_ColumnCellSelectionIndicatorRecipe_left_false__1eexc2ah" }, top: { true: "cell_ColumnCellSelectionIndicatorRecipe_top_true__1eexc2ai", false: "cell_ColumnCellSelectionIndicatorRecipe_top_false__1eexc2aj" }, bottom: { true: "cell_ColumnCellSelectionIndicatorRecipe_bottom_true__1eexc2ak", false: "cell_ColumnCellSelectionIndicatorRecipe_bottom_false__1eexc2al" } }, defaultVariants: {}, compoundVariants: [] });
 var FlashingColumnCellRecipe = createRuntimeFn({ defaultClassName: "cell_FlashingColumnCellRecipe__1eexc2a9", variantClassNames: { direction: { up: "cell_FlashingColumnCellRecipe_direction_up__1eexc2aa", down: "cell_FlashingColumnCellRecipe_direction_down__1eexc2ab", neutral: "cell_FlashingColumnCellRecipe_direction_neutral__1eexc2ac" } }, defaultVariants: {}, compoundVariants: [] });
 var SelectionCheckboxCls = "cell_SelectionCheckboxCls__1eexc2a7";
@@ -8440,7 +8640,7 @@ var React34 = __toESM(require("react"));
 var { rootClassName: rootClassName5 } = internalProps;
 var InfiniteTableCellClassName = `${rootClassName5}Cell`;
 var InfiniteTableCellContentClassName = `${rootClassName5}Cell_content`;
-var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
+var columnWidthAtIndex3 = stripVar(InternalVars.columnWidthAtIndex);
 var columnReorderEffectDurationAtIndex2 = stripVar(
   InternalVars.columnReorderEffectDurationAtIndex
 );
@@ -8465,7 +8665,7 @@ function InfiniteTableCellFn(props) {
   } = props;
   const children = renderChildren();
   const style2 = {
-    width: `var(${columnWidthAtIndex4}-${column.computedVisibleIndex})`,
+    width: `var(${columnWidthAtIndex3}-${column.computedVisibleIndex})`,
     transition: `transform var(${columnReorderEffectDurationAtIndex2}-${column.computedVisibleIndex}, 0s)`,
     ...domProps.style
   };
@@ -8655,7 +8855,7 @@ function InfiniteTableColumnCellFn(props) {
     api: dataSourceApi,
     componentActions: dataSourceActions
   } = useDataSourceContextValue();
-  const { activeRowIndex, keyboardNavigation } = getState();
+  const { activeRowIndex, keyboardNavigation, columnReorderInPageIndex } = getState();
   const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
   const renderingContext = {
     getState,
@@ -8979,6 +9179,7 @@ function InfiniteTableColumnCellFn(props) {
     right: rightSelectionBorder,
     bottom: bottomSelectionBorder
   } : null;
+  const insideDisabledDraggingPage = columnReorderInPageIndex != null ? horizontalLayoutPageIndex !== columnReorderInPageIndex : false;
   const afterChildren = editor;
   const theChildren = renderChildren();
   const cellProps = {
@@ -9003,6 +9204,7 @@ function InfiniteTableColumnCellFn(props) {
         ColumnCellRecipe,
         {
           dragging: false,
+          insideDisabledDraggingPage,
           zebra,
           align: align2,
           verticalAlign,
@@ -9266,7 +9468,7 @@ function getColumnResizer(colIndex, {
   const column = columns[colIndex];
   return {
     resize(diff) {
-      setInfiniteColumnWidth(
+      InternalVarUtils.columnWidths.set(
         colIndex,
         column.computedWidth + diff,
         domRef.current
@@ -9277,7 +9479,7 @@ function getColumnResizer(colIndex, {
         if (!nextColumn) {
           return;
         }
-        setInfiniteColumnWidth(
+        InternalVarUtils.columnWidths.set(
           nextColIndex,
           nextColumn.computedWidth - diff,
           domRef.current
@@ -9285,7 +9487,7 @@ function getColumnResizer(colIndex, {
         if (nextColumn.computedPinned === "start") {
           addToInfiniteColumnOffset(nextColumn, diff, domRef.current);
         } else {
-          setInfiniteColumnOffset(
+          InternalVarUtils.columnOffsets.set(
             nextColIndex,
             nextColumn.computedOffset + diff,
             domRef.current
@@ -9306,7 +9508,11 @@ function getColumnResizer(colIndex, {
           if (col.computedPinned === "end") {
             continue;
           }
-          setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
+          InternalVarUtils.columnOffsets.set(
+            i,
+            col.computedOffset + diff,
+            domRef.current
+          );
         }
         return;
       }
@@ -9315,7 +9521,11 @@ function getColumnResizer(colIndex, {
         if (col.computedPinned) {
           continue;
         }
-        setInfiniteColumnOffset(i, col.computedOffset + diff, domRef.current);
+        InternalVarUtils.columnOffsets.set(
+          i,
+          col.computedOffset + diff,
+          domRef.current
+        );
       }
     }
   };
@@ -9343,12 +9553,12 @@ function getColumnGroupResizer(colIndexes, config) {
         const colIndex = colIndexes[i];
         const column = columns[colIndex];
         const newWidth = column.computedWidth + diff;
-        setInfiniteColumnWidth(colIndex, newWidth, node);
+        InternalVarUtils.columnWidths.set(colIndex, newWidth, node);
         if (column.computedPinned === "end") {
           return;
         }
         if (offset) {
-          setInfiniteColumnOffset(colIndex, offset, node);
+          InternalVarUtils.columnOffsets.set(colIndex, offset, node);
         }
         offset += newWidth;
       });
@@ -9360,7 +9570,11 @@ function getColumnGroupResizer(colIndexes, config) {
         if (col.computedPinned === "end") {
           continue;
         }
-        setInfiniteColumnOffset(i, col.computedOffset + diffSum, node);
+        InternalVarUtils.columnOffsets.set(
+          i,
+          col.computedOffset + diffSum,
+          node
+        );
       }
     }
   };
@@ -9400,12 +9614,14 @@ function ResizeHandleFn(props) {
     const target = e.target;
     if (brain.isHorizontalLayoutBrain) {
       const restoreBodyRange = brain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       const restoreHeaderRange = headerBrain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       restoreRenderRange = () => {
         restoreBodyRange();
@@ -9615,7 +9831,8 @@ function InfiniteTableHeaderCell(props) {
       portalDOMRef,
       columnHeaderHeight,
       columnReorderDragColumnId,
-      columnMenuVisibleForColumnId
+      columnMenuVisibleForColumnId,
+      columnReorderInPageIndex
     },
     getDataSourceMasterContext
   } = useInfiniteTable();
@@ -9626,7 +9843,9 @@ function InfiniteTableHeaderCell(props) {
     componentState: { filterDelay, filterTypes }
   } = useDataSourceContextValue();
   const { allRowsSelected, someRowsSelected, selectionMode } = useDataSourceState();
+  const horizontalLayoutPageIndex = props.horizontalLayoutPageIndex;
   const dragging = columnReorderDragColumnId === column.id;
+  const insideDisabledDraggingPage = columnReorderInPageIndex != null ? horizontalLayoutPageIndex !== columnReorderInPageIndex : false;
   const { onResize, height, width, headerOptions, columnsMap } = props;
   const sortInfo = column.computedSortInfo;
   const header = column.header;
@@ -9691,7 +9910,7 @@ function InfiniteTableHeaderCell(props) {
   const MenuIconCmp = column.components?.MenuIcon || components2?.MenuIcon || MenuIcon;
   const menuIcon = /* @__PURE__ */ React42.createElement(MenuIconCmp, { ...menuIconProps });
   const initialRenderParam = {
-    horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
+    horizontalLayoutPageIndex,
     dragging,
     domRef: ref,
     insideColumnMenu: false,
@@ -9855,7 +10074,8 @@ function InfiniteTableHeaderCell(props) {
   const headerClassName = typeof column.headerClassName === "function" ? column.headerClassName(renderParam) : column.headerClassName;
   const { onPointerDown, proxyPosition } = useColumnPointerEvents({
     columnId: column.id,
-    domRef
+    domRef,
+    horizontalLayoutPageIndex
   });
   let draggingProxy = null;
   if (dragging && proxyPosition) {
@@ -9899,7 +10119,7 @@ function InfiniteTableHeaderCell(props) {
   const FilterEditor = operator?.components?.FilterEditor || filterType?.components?.FilterEditor || column.components?.FilterEditor || StringFilterEditor;
   const FilterOperatorSwitch = filterType?.components?.FilterOperatorSwitch || column.components?.FilterOperatorSwitch;
   const resizeHandle = useColumnResizeHandle(column, {
-    horizontalLayoutPageIndex: props.horizontalLayoutPageIndex
+    horizontalLayoutPageIndex
   });
   const zIndex2 = `var(${columnZIndexAtIndex5}-${column.computedVisibleIndex})`;
   style2.zIndex = zIndex2;
@@ -9939,6 +10159,7 @@ function InfiniteTableHeaderCell(props) {
           HeaderCellRecipe,
           {
             dragging,
+            insideDisabledDraggingPage,
             align: align2,
             verticalAlign,
             rowSelected: false,
@@ -9959,7 +10180,7 @@ function InfiniteTableHeaderCell(props) {
       afterChildren: /* @__PURE__ */ React42.createElement(React42.Fragment, null, showColumnFilters ? column.computedFilterable ? /* @__PURE__ */ React42.createElement(
         InfiniteTableColumnHeaderFilter,
         {
-          horizontalLayoutPageIndex: props.horizontalLayoutPageIndex,
+          horizontalLayoutPageIndex,
           filterEditor: FilterEditor,
           filterOperatorSwitch: FilterOperatorSwitch ?? InfiniteTableFilterOperatorSwitch,
           operator,
@@ -10277,7 +10498,7 @@ function useColumnGroupResizeHandle(groupColumns, config) {
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderGroup.tsx
 var TableHeaderGroupClassName = `${rootClassName2}HeaderGroup`;
-var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
+var columnWidthAtIndex4 = stripVar(InternalVars.columnWidthAtIndex);
 var columnZIndexAtIndex6 = stripVar(InternalVars.columnZIndexAtIndex);
 function InfiniteTableHeaderGroup(props) {
   const { columnGroup, height, columns, bodyBrain, columnGroupsMaxDepth } = props;
@@ -10296,8 +10517,8 @@ function InfiniteTableHeaderGroup(props) {
   });
   const firstColumn = columns[0];
   const width = columns.length > 1 ? `calc( ` + columns.map(
-    (col) => `var(${columnWidthAtIndex5}-${col.computedVisibleIndex})`
-  ).join(" + ") + " )" : `var(${columnWidthAtIndex5}-${firstColumn.computedVisibleIndex})`;
+    (col) => `var(${columnWidthAtIndex4}-${col.computedVisibleIndex})`
+  ).join(" + ") + " )" : `var(${columnWidthAtIndex4}-${firstColumn.computedVisibleIndex})`;
   const zIndex2 = `calc(var(${columnZIndexAtIndex6}-${firstColumn.computedVisibleIndex}) + ${columnGroupsMaxDepth - columnGroup.depth})`;
   let style2 = typeof userStyle === "function" ? userStyle({
     columnGroup,
@@ -17043,6 +17264,17 @@ var InfiniteTableApiImpl = class {
   setColumnVisibility(columnVisibility) {
     this.actions.columnVisibility = columnVisibility;
   }
+  get scrollContainer() {
+    return this.getState().scrollerDOMRef.current;
+  }
+  get scrollLeftMax() {
+    const scrollLeftMax = this.getState().brain.scrollLeftMax;
+    return scrollLeftMax;
+  }
+  get scrollTopMax() {
+    const scrollTopMax = this.getState().brain.scrollTopMax;
+    return scrollTopMax;
+  }
   get scrollLeft() {
     const state = this.getState();
     return state.brain.getScrollPosition().scrollLeft;
@@ -18054,6 +18286,46 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
       });
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    if (direction === "vertical") {
+      return super.computeDirectionalRenderCount(
+        direction,
+        itemSize,
+        count,
+        theRenderSize
+      );
+    }
+    let renderCount = 0;
+    let size = theRenderSize.width;
+    size -= this.getFixedSize("horizontal");
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "number") {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+      renderCount = Math.min(count, renderCount);
+      return renderCount;
+    }
+    const pagesInView = Math.floor(size / this.pageWidth);
+    renderCount += pagesInView * this.initialCols;
+    const remainingSize = size - pagesInView * this.pageWidth;
+    const sizes = [];
+    for (let i = 0; i < this.initialCols; i++) {
+      sizes.push(this.getItemSize(i, direction));
+    }
+    sizes.sort(SORT_ASC);
+    let sum2 = 0;
+    for (let i = 0; i < this.initialCols; i++) {
+      sum2 += sizes[i];
+      renderCount++;
+      if (sum2 > remainingSize) {
+        break;
+      }
+    }
+    renderCount += 1;
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getRowIndexInPage(rowIndex) {
     return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
   }
@@ -18200,6 +18472,9 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
     }
     this._totalPageCount = value;
   }
+  getPageWidth() {
+    return this.pageWidth;
+  }
   doUpdateRenderCount(which = ALL_DIRECTIONS) {
     const rowHeight = this.getInitialRowHeight();
     let pageWidth = 0;
@@ -18352,6 +18627,7 @@ function initSetupState2({
       scrollLeft: 0
     },
     columnReorderDragColumnId: false,
+    columnReorderInPageIndex: null,
     ready: false,
     focused: false,
     focusedWithin: false,
@@ -19776,7 +20052,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "5.0.0-canary.8"
+      version: "5.1.0-canary.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -23428,17 +23704,17 @@ function HScrollSyncContent(props) {
 }
 
 // src/components/InfiniteTable/hooks/useVisibleColumnSizes.ts
-var columnWidthAtIndex6 = stripVar(InternalVars.columnWidthAtIndex);
-var columnOffsetAtIndex5 = stripVar(InternalVars.columnOffsetAtIndex);
+var columnWidthAtIndex5 = stripVar(InternalVars.columnWidthAtIndex);
+var columnOffsetAtIndex3 = stripVar(InternalVars.columnOffsetAtIndex);
 function useVisibleColumnSizes() {
   const context = useInfiniteTable();
   return context.computed.computedVisibleColumns.map((column) => {
     return {
       id: column.id,
       width: column.computedWidth,
-      cssVarForWidth: `var(${columnWidthAtIndex6}-${column.computedVisibleIndex})`,
+      cssVarForWidth: `var(${columnWidthAtIndex5}-${column.computedVisibleIndex})`,
       offset: column.computedOffset,
-      cssVarForOffset: `var(${columnOffsetAtIndex5}-${column.computedVisibleIndex})`,
+      cssVarForOffset: `var(${columnOffsetAtIndex3}-${column.computedVisibleIndex})`,
       pinned: column.computedPinned
     };
   });