@infinite-table/infinite-react 0.0.5 → 0.0.9

package/index.js

@@ -53,26 +53,6 @@ var __reExport = (target, module2, desc) => {
 var __toModule = (module2) => {
   return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
 };
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 
 // node_modules/ms/index.js
 var require_ms = __commonJS({
@@ -216,6 +196,8 @@ var require_common = __commonJS({
       function createDebug(namespace) {
         let prevTime;
         let enableOverride = null;
+        let namespacesCache;
+        let enabledCache;
         function debug6(...args) {
           if (!debug6.enabled) {
             return;
@@ -258,7 +240,16 @@ var require_common = __commonJS({
         Object.defineProperty(debug6, "enabled", {
           enumerable: true,
           configurable: false,
-          get: () => enableOverride === null ? createDebug.enabled(namespace) : enableOverride,
+          get: () => {
+            if (enableOverride !== null) {
+              return enableOverride;
+            }
+            if (namespacesCache !== createDebug.namespaces) {
+              namespacesCache = createDebug.namespaces;
+              enabledCache = createDebug.enabled(namespace);
+            }
+            return enabledCache;
+          },
           set: (v) => {
             enableOverride = v;
           }
@@ -275,6 +266,7 @@ var require_common = __commonJS({
       }
       function enable(namespaces) {
         createDebug.save(namespaces);
+        createDebug.namespaces = namespaces;
         createDebug.names = [];
         createDebug.skips = [];
         let i;
@@ -470,14 +462,14 @@ var require_browser = __commonJS({
         } else {
           exports.storage.removeItem("debug");
         }
-      } catch (error3) {
+      } catch (error2) {
       }
     }
     function load() {
       let r;
       try {
         r = exports.storage.getItem("debug");
-      } catch (error3) {
+      } catch (error2) {
       }
       if (!r && typeof process !== "undefined" && "env" in process) {
         r = process.env.DEBUG;
@@ -487,7 +479,7 @@ var require_browser = __commonJS({
     function localstorage() {
       try {
         return localStorage;
-      } catch (error3) {
+      } catch (error2) {
       }
     }
     module2.exports = require_common()(exports);
@@ -495,13 +487,106 @@ var require_browser = __commonJS({
     formatters.j = function(v) {
       try {
         return JSON.stringify(v);
-      } catch (error3) {
-        return "[UnexpectedJSONParseError]: " + error3.message;
+      } catch (error2) {
+        return "[UnexpectedJSONParseError]: " + error2.message;
       }
     };
   }
 });
 
+// node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.cjs.dev.js
+var require_vanilla_extract_recipes_createRuntimeFn_cjs_dev = __commonJS({
+  "node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.cjs.dev.js"(exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    function _defineProperty(obj, key, value) {
+      if (key in obj) {
+        Object.defineProperty(obj, key, {
+          value,
+          enumerable: true,
+          configurable: true,
+          writable: true
+        });
+      } else {
+        obj[key] = value;
+      }
+      return obj;
+    }
+    function ownKeys(object, enumerableOnly) {
+      var keys = Object.keys(object);
+      if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+          symbols = symbols.filter(function(sym) {
+            return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+          });
+        }
+        keys.push.apply(keys, symbols);
+      }
+      return keys;
+    }
+    function _objectSpread2(target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i] != null ? arguments[i] : {};
+        if (i % 2) {
+          ownKeys(Object(source), true).forEach(function(key) {
+            _defineProperty(target, key, source[key]);
+          });
+        } else if (Object.getOwnPropertyDescriptors) {
+          Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+        } else {
+          ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+          });
+        }
+      }
+      return target;
+    }
+    var shouldApplyCompound = (compoundCheck, selections) => {
+      for (var key of Object.keys(compoundCheck)) {
+        if (compoundCheck[key] !== selections[key]) {
+          return false;
+        }
+      }
+      return true;
+    };
+    var createRuntimeFn = (config) => (options) => {
+      var className = config.defaultClassName;
+      var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
+      for (var variantName in selections) {
+        var _selections$variantNa;
+        var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
+        if (variantSelection != null) {
+          var selection = variantSelection;
+          if (typeof selection === "boolean") {
+            selection = selection === true ? "true" : "false";
+          }
+          className += " " + config.variantClassNames[variantName][selection];
+        }
+      }
+      for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
+        if (shouldApplyCompound(compoundCheck, selections)) {
+          className += " " + compoundClassName;
+        }
+      }
+      return className;
+    };
+    exports.createRuntimeFn = createRuntimeFn;
+  }
+});
+
+// node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.cjs.js
+var require_vanilla_extract_recipes_createRuntimeFn_cjs = __commonJS({
+  "node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.cjs.js"(exports, module2) {
+    "use strict";
+    if (false) {
+      module2.exports = null;
+    } else {
+      module2.exports = require_vanilla_extract_recipes_createRuntimeFn_cjs_dev();
+    }
+  }
+});
+
 // node_modules/binary-search/index.js
 var require_binary_search = __commonJS({
   "node_modules/binary-search/index.js"(exports, module2) {
@@ -563,7 +648,7 @@ var require_decamelize = __commonJS({
       if (preserveConsecutiveUppercase) {
         return handlePreserveConsecutiveUppercase(decamelized, separator);
       }
-      return decamelized.replace(/(\p{Uppercase_Letter}+)(\p{Uppercase_Letter}\p{Lowercase_Letter}+)/gu, replacement).toLowerCase();
+      return decamelized.replace(/(\p{Uppercase_Letter})(\p{Uppercase_Letter}\p{Lowercase_Letter}+)/gu, replacement).toLowerCase();
     };
   }
 });
@@ -580,6 +665,7 @@ __export(exports, {
   getComponentStateRoot: () => getComponentStateRoot,
   group: () => group,
   interceptMap: () => interceptMap,
+  multisort: () => multisort,
   useComponentState: () => useComponentState,
   useDataSource: () => useDataSource
 });
@@ -667,7 +753,7 @@ var ScrollListener = class {
 
 // src/components/InfiniteTable/state/computeColumnGroupsDepths.ts
 function computeColumnGroupsDepths(columnGroups) {
-  const map = new Map();
+  const map2 = new Map();
   columnGroups.forEach((colGroup, colGroupId) => {
     let parentGroupId = colGroup.columnGroup;
     let depth = 0;
@@ -682,12 +768,24 @@ function computeColumnGroupsDepths(columnGroups) {
       depth++;
       parentGroupId = parent.columnGroup;
     }
-    map.set(colGroupId, depth);
+    map2.set(colGroupId, depth);
   });
-  return map;
+  return map2;
 }
 
 // src/components/InfiniteTable/state/getInitialState.ts
+function toMap(mapOrObject) {
+  if (!mapOrObject) {
+    return new Map();
+  }
+  if (mapOrObject instanceof Map) {
+    return mapOrObject;
+  }
+  return new Map(Object.entries(mapOrObject));
+}
+function toColumnTypesMap(mapOrObject) {
+  return toMap(mapOrObject);
+}
 function initSetupState() {
   const columnsGeneratedForGrouping = new Map();
   return {
@@ -717,7 +815,11 @@ function initSetupState() {
 }
 var forwardProps = () => {
   return {
-    columns: 1,
+    columns: (columns) => {
+      var _a;
+      return (_a = toMap(columns)) != null ? _a : new Map();
+    },
+    scrollTopId: 1,
     components: 1,
     loadingText: 1,
     pivotColumns: 1,
@@ -743,15 +845,17 @@ var forwardProps = () => {
     pivotColumn: 1,
     pivotRowLabelsColumn: 1,
     pivotColumnGroups: 1,
+    onScrollbarsChange: 1,
+    viewportReservedWidth: (viewportReservedWidth) => viewportReservedWidth != null ? viewportReservedWidth : 0,
     activeIndex: (activeIndex) => activeIndex != null ? activeIndex : 0,
     columnMinWidth: (columnMinWidth) => columnMinWidth != null ? columnMinWidth : 30,
     columnMaxWidth: (columnMaxWidth) => columnMaxWidth != null ? columnMaxWidth : 2e3,
-    columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 300,
+    columnDefaultWidth: (columnDefaultWidth) => columnDefaultWidth != null ? columnDefaultWidth : 200,
     draggableColumns: (draggableColumns) => draggableColumns != null ? draggableColumns : true,
     sortable: (sortable) => sortable != null ? sortable : true,
     hideEmptyGroupColumns: (hideEmptyGroupColumns) => hideEmptyGroupColumns != null ? hideEmptyGroupColumns : false,
     pivotTotalColumnPosition: (pivotTotalColumnPosition) => pivotTotalColumnPosition != null ? pivotTotalColumnPosition : "end",
-    licenseKey: (licenseKey) => licenseKey || globalThis.InfiniteTableLicenseKey || "",
+    licenseKey: (licenseKey) => licenseKey || "",
     columnOrder: (columnOrder) => columnOrder != null ? columnOrder : true,
     header: (header) => header != null ? header : true,
     showZebraRows: (showZebraRows) => showZebraRows != null ? showZebraRows : true,
@@ -761,6 +865,14 @@ var forwardProps = () => {
     headerHeight: (headerHeight) => typeof headerHeight === "number" ? headerHeight : 0,
     columnVisibility: (columnVisibility) => columnVisibility != null ? columnVisibility : new Map(),
     columnPinning: (columnPinning) => columnPinning != null ? columnPinning : new Map(),
+    columnSizing: (columnSizing) => {
+      var _a;
+      return (_a = toMap(columnSizing)) != null ? _a : new Map();
+    },
+    columnTypes: (columnTypes) => {
+      var _a;
+      return (_a = toColumnTypesMap(columnTypes)) != null ? _a : new Map();
+    },
     columnAggregations: (columnAggregations) => columnAggregations != null ? columnAggregations : new Map(),
     collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
     columnGroups: (columnGroups) => columnGroups != null ? columnGroups : new Map()
@@ -795,7 +907,7 @@ var mapPropsToState = (params) => {
   return {
     groupRenderStrategy,
     groupRowsBy,
-    computedColumns: state.computedPivotColumns || state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || props.columns,
+    computedColumns: state.computedPivotColumns || state.columnsWhenGrouping || state.columnsWhenInlineGroupRenderStrategy || state.columns,
     virtualizeHeader,
     columnGroupsDepthsMap,
     columnGroupsMaxDepth: columnGroupsDepthsMap != state.columnGroupsDepthsMap ? Math.max(...columnGroupsDepthsMap.values(), 0) : state.columnGroupsMaxDepth,
@@ -927,7 +1039,7 @@ var computeFlex = (params) => {
   items.forEach((item, i) => {
     var _a, _b, _c, _d, _e, _f;
     let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-    let minSize = (_d = (_c = item.maxSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+    let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
     if (item.size != null) {
       if (maxSize != null && item.size > maxSize) {
         item.size = maxSize;
@@ -955,7 +1067,7 @@ var computeFlex = (params) => {
     if (item.flex != null) {
       const approxFlexSize = sizePerFlex * item.flex;
       let maxSize = (_b = (_a = item.maxSize) != null ? _a : defaultMaxSize) != null ? _b : void 0;
-      let minSize = (_d = (_c = item.maxSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
+      let minSize = (_d = (_c = item.minSize) != null ? _c : defaultMinSize) != null ? _d : void 0;
       let constrained = false;
       let substractSize = 0;
       if (maxSize != null && approxFlexSize > maxSize) {
@@ -1090,8 +1202,52 @@ var Logger = class {
   }
 };
 
+// src/utils/getGlobal.ts
+function getGlobal() {
+  return globalThis;
+}
+
+// src/components/utils/getScrollbarWidth.ts
+var scrollbarWidth;
+function getScrollbarWidth() {
+  var _a, _b;
+  if (scrollbarWidth != null) {
+    return scrollbarWidth;
+  }
+  const doc = (_a = getGlobal().document) != null ? _a : null;
+  if (!doc) {
+    return 0;
+  }
+  const outer = doc.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.overflow = "scroll";
+  doc.body.appendChild(outer);
+  const inner = doc.createElement("div");
+  outer.appendChild(inner);
+  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  (_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
+  return scrollbarWidth;
+}
+
+// src/components/InfiniteTable/utils/getColumnComputedType.ts
+var emptyType = Object.freeze({});
+function getColumnComputedType(column, columnTypes) {
+  const defaultType = columnTypes.get("default") || emptyType;
+  if (column.type === void 0) {
+    return defaultType;
+  }
+  if (column.type === null) {
+    return emptyType;
+  }
+  if (typeof column.type === "string") {
+    const type = columnTypes.get(column.type) || emptyType;
+    return type;
+  }
+  return column.type.reduce((acc, columnType) => Object.assign(acc, columnTypes.get(columnType)), {});
+}
+
 // src/components/InfiniteTable/utils/getComputedVisibleColumns.ts
-var error = err("getComputedVisibleColumns");
+var logError = err("getComputedVisibleColumns");
 var isColumnVisible = (columnVisibility, _columnVisibilityAssumeVisible, colId) => {
   return !columnVisibility.has(colId) || columnVisibility.get(colId) !== false;
 };
@@ -1112,22 +1268,26 @@ var getComputedVisibleColumns = ({
   sortInfo,
   setSortInfo,
   multiSort,
+  viewportReservedWidth,
   draggableColumns,
   columnOrder,
   columnPinning,
+  columnSizing,
+  columnTypes,
   columnVisibility,
   columnVisibilityAssumeVisible
 }) => {
   let computedOffset = 0;
   const normalizedColumnOrder = adjustColumnOrderForPinning(columnOrder === true ? [...columns.keys()] : columnOrder, columnPinning);
-  const visibleColumnOrder = normalizedColumnOrder.filter(isColumnVisible.bind(null, columnVisibility, columnVisibilityAssumeVisible));
-  const columnsArray = visibleColumnOrder.map((columnId) => {
-    let col = columns.get(columnId);
+  const visibleColumnOrder = normalizedColumnOrder.filter((colId) => {
+    let col = columns.get(colId);
     if (!col) {
-      error(`Column with id "${columnId}" specified in columnOrder array cannot be found in the columns map.`);
+      logError(`Column with id "${colId}" specified in columnOrder array cannot be found in the columns map.`);
+      return false;
     }
-    return col;
-  }).filter(Boolean);
+    return isColumnVisible(columnVisibility, columnVisibilityAssumeVisible, colId);
+  });
+  const columnsArray = visibleColumnOrder.map((columnId) => columns.get(columnId)).filter(Boolean);
   const sortedMap = (sortInfo != null ? sortInfo : []).reduce((acc, info, index) => {
     if (info.id) {
       acc[info.id] = { sortInfo: info, index };
@@ -1141,20 +1301,39 @@ var getComputedVisibleColumns = ({
     return acc;
   }, {});
   const flexResult = computeFlex({
-    availableSize: bodySize.width,
+    availableSize: Math.max(bodySize.width - (viewportReservedWidth != null ? viewportReservedWidth : 0) - getScrollbarWidth(), 0),
     maxSize: columnMaxWidth,
     minSize: columnMinWidth,
-    items: columnsArray.map((col) => {
-      var _a, _b;
-      let size = col.flex != null ? void 0 : (_a = col.width) != null ? _a : columnDefaultWidth;
-      if (!size && col.flex == null) {
-        size = (_b = col.minWidth) != null ? _b : columnMinWidth;
+    items: visibleColumnOrder.map((colId) => {
+      var _a, _b, _c, _d;
+      const column = columns.get(colId);
+      const colType = getColumnComputedType(column, columnTypes);
+      const colTypeSizing = {
+        minWidth: colType == null ? void 0 : colType.minWidth,
+        maxWidth: colType == null ? void 0 : colType.maxWidth,
+        width: colType == null ? void 0 : colType.width,
+        flex: colType == null ? void 0 : colType.flex
+      };
+      let colSizing = columnSizing.get(colId) || {};
+      if (colSizing.width != null) {
+        delete colTypeSizing.flex;
+      }
+      if (colSizing.flex != null) {
+        delete colTypeSizing.width;
+      }
+      colSizing = Object.assign(colTypeSizing, colSizing);
+      let colFlex = (_a = colSizing.flex) != null ? _a : void 0;
+      const colMinWidth = (_b = colSizing.minWidth) != null ? _b : columnMinWidth;
+      const colMaxWidth = (_c = colSizing.maxWidth) != null ? _c : columnMaxWidth;
+      let size = colFlex != void 0 ? void 0 : (_d = colSizing.width) != null ? _d : columnDefaultWidth;
+      if (!size && colFlex == void 0) {
+        size = colMinWidth;
       }
       return {
         size,
-        flex: col.flex,
-        minSize: col.minWidth,
-        maxSize: col.maxWidth
+        flex: colFlex,
+        minSize: colMinWidth,
+        maxSize: colMaxWidth
       };
     })
   });
@@ -1189,6 +1368,7 @@ var getComputedVisibleColumns = ({
     var _a, _b, _c, _d, _e, _f, _g, _h, _i;
     const id = visibleColumnOrder[i];
     const nextColumnId = visibleColumnOrder[i + 1];
+    const colType = getColumnComputedType(c, columnTypes);
     const sortingInfo = sortedMap[id] ? sortedMap[id] : c.field ? (_a = sortedMap[c.field]) != null ? _a : null : null;
     const computedSortInfo = (_b = sortingInfo == null ? void 0 : sortingInfo.sortInfo) != null ? _b : null;
     const computedSorted = !!computedSortInfo;
@@ -1244,8 +1424,10 @@ var getComputedVisibleColumns = ({
     const computedFirstInCategory = computedPinned !== prevPinned;
     const computedLastInCategory = computedLast || computedPinned !== getComputedPinned(nextColumnId, columnPinning);
     const result2 = __spreadProps(__spreadValues({
-      align: "start",
-      verticalAlign: "center"
+      align: colType.align,
+      verticalAlign: colType.verticalAlign,
+      renderValue: colType.renderValue,
+      render: colType.render
     }, c), {
       computedWidth,
       computedAbsoluteOffset,
@@ -1324,28 +1506,28 @@ var useRerender = () => {
 
 // src/components/hooks/useInterceptedMap.ts
 var import_react6 = __toModule(require("react"));
-function interceptMap(map, fns) {
-  const { set, delete: deleteKey, clear } = map;
+function interceptMap(map2, fns) {
+  const { set, delete: deleteKey, clear } = map2;
   if (fns.set) {
-    map.set = (key, value) => {
-      set.call(map, key, value);
+    map2.set = (key, value) => {
+      set.call(map2, key, value);
       fns.set(key, value);
-      return map;
+      return map2;
     };
   }
   if (fns.delete) {
-    map.delete = (key) => {
-      const removed = deleteKey.call(map, key);
+    map2.delete = (key) => {
+      const removed = deleteKey.call(map2, key);
       fns.delete(key);
       return removed;
     };
   }
   if (fns.clear || fns.beforeClear) {
-    map.clear = () => {
+    map2.clear = () => {
       if (fns.beforeClear) {
-        fns.beforeClear(map);
+        fns.beforeClear(map2);
       }
-      const result = clear.call(map);
+      const result = clear.call(map2);
       if (fns.clear) {
         fns.clear();
       }
@@ -1354,13 +1536,13 @@ function interceptMap(map, fns) {
   }
   return () => {
     if (set) {
-      map.set = set;
+      map2.set = set;
     }
     if (deleteKey) {
-      map.delete = deleteKey;
+      map2.delete = deleteKey;
     }
     if (clear) {
-      map.clear = clear;
+      map2.clear = clear;
     }
   };
 }
@@ -1380,16 +1562,16 @@ var rafFn = (fn) => {
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var useRerenderOnKeyChange = (map) => {
+var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
   (0, import_react7.useEffect)(() => {
     const update = rafFn(rerender);
-    return interceptMap(map, {
+    return interceptMap(map2, {
       set: update,
       clear: update,
       delete: update
     });
-  }, [map]);
+  }, [map2]);
   return renderId;
 };
 
@@ -1407,11 +1589,16 @@ var useComputedVisibleColumns = ({
   setSortInfo,
   columnOrder,
   columnPinning,
+  columnTypes,
   pinnedEndMaxWidth,
   pinnedStartMaxWidth,
+  viewportReservedWidth,
   columnVisibility,
-  columnVisibilityAssumeVisible
+  columnVisibilityAssumeVisible,
+  columnSizing
 }) => {
+  const columnsSizingRenderId = useRerenderOnKeyChange(columnSizing);
+  const columnTypesRenderId = useRerenderOnKeyChange(columnTypes);
   const columnsRenderId = useRerenderOnKeyChange(columns);
   const visibilityRenderId = useRerenderOnKeyChange(columnVisibility);
   const pinningRenderId = useRerenderOnKeyChange(columnPinning);
@@ -1437,6 +1624,7 @@ var useComputedVisibleColumns = ({
       columnMinWidth,
       columnMaxWidth,
       columnDefaultWidth,
+      viewportReservedWidth,
       sortable,
       sortInfo,
       setSortInfo,
@@ -1446,6 +1634,8 @@ var useComputedVisibleColumns = ({
       draggableColumns,
       columnOrder,
       columnPinning,
+      columnSizing,
+      columnTypes,
       columnVisibility,
       columnVisibilityAssumeVisible: columnVisibilityAssumeVisible != null ? columnVisibilityAssumeVisible : true
     });
@@ -1467,7 +1657,9 @@ var useComputedVisibleColumns = ({
     columnPinning,
     columnsRenderId,
     visibilityRenderId,
-    pinningRenderId
+    columnsSizingRenderId,
+    pinningRenderId,
+    columnTypesRenderId
   ]);
   const result = {
     columns,
@@ -1493,7 +1685,7 @@ var useComputedVisibleColumns = ({
 var sortAscending = (a, b) => a - b;
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-var import_react19 = __toModule(require("react"));
+var import_react20 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useColumnAggregations.ts
 var import_react12 = __toModule(require("react"));
@@ -1601,7 +1793,7 @@ function getComponentStateContext() {
   }
   return ComponentContext = (0, import_react11.createContext)(null);
 }
-function getReducerActions(dispatch, getState, getProps, propsToForward, allowedControlledPropOverrides) {
+function getReducerGeneratedActions(dispatch, getState, getProps, propsToForward, allowedControlledPropOverrides, interceptedActions) {
   const state = getState();
   return Object.keys(state).reduce((actions, stateKey) => {
     const key = stateKey;
@@ -1613,6 +1805,9 @@ function getReducerActions(dispatch, getState, getProps, propsToForward, allowed
         return;
       }
       notifyChange(props, stateKey, value);
+      if (interceptedActions && typeof interceptedActions[key] === "function") {
+        interceptedActions[key](value, { actions, state: state2 });
+      }
       const forwardFn = propsToForward[key];
       if (typeof forwardFn === "function") {
         value = forwardFn(value);
@@ -1725,7 +1920,7 @@ function getComponentStateRoot(config) {
     const getComponentState = useLatest(state);
     const { allowedControlledPropOverrides } = config;
     const actions = (0, import_react11.useMemo)(() => {
-      const generatedActions = getReducerActions(dispatch, getComponentState, getProps, propsToForward, allowedControlledPropOverrides);
+      const generatedActions = getReducerGeneratedActions(dispatch, getComponentState, getProps, propsToForward, allowedControlledPropOverrides, config.interceptActions);
       return generatedActions;
     }, [
       dispatch,
@@ -1892,7 +2087,7 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-var import_react18 = __toModule(require("react"));
+var import_react19 = __toModule(require("react"));
 
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
 var React7 = __toModule(require("react"));
@@ -1953,43 +2148,10 @@ function ExpanderIcon(props) {
   }));
 }
 
-// node_modules/@vanilla-extract/recipes/createRuntimeFn/dist/vanilla-extract-recipes-createRuntimeFn.esm.js
-var shouldApplyCompound = (compoundCheck, selections) => {
-  for (const key of Object.keys(compoundCheck)) {
-    if (compoundCheck[key] !== selections[key]) {
-      return false;
-    }
-  }
-  return true;
-};
-var createRuntimeFn = (config) => (options) => {
-  let className = config.defaultClassName;
-  const selections = {
-    ...config.defaultVariants,
-    ...options
-  };
-  for (const variantName in selections) {
-    var _selections$variantNa;
-    const variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
-    if (variantSelection != null) {
-      let selection = variantSelection;
-      if (typeof selection === "boolean") {
-        selection = selection === true ? "true" : "false";
-      }
-      className += " " + config.variantClassNames[variantName][selection];
-    }
-  }
-  for (const [compoundCheck, compoundClassName] of config.compoundVariants) {
-    if (shouldApplyCompound(compoundCheck, selections)) {
-      className += " " + compoundClassName;
-    }
-  }
-  return className;
-};
-
 // src/components/InfiniteTable/components/InfiniteTableRow/row.css.ts
+var import_createRuntimeFn = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var GroupRowExpanderCls = "_7pupv0b";
-var RowClsRecipe = createRuntimeFn({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
+var RowClsRecipe = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_7pupv00", variantClassNames: { zebra: { false: "_7pupv02", even: "_7pupv03", odd: "_7pupv04" }, groupRow: { true: "_7pupv05", false: "_7pupv06" }, inlineGroupRow: { true: "_7pupv07", false: "_7pupv08" }, showHoverRows: { true: "_7pupv09", false: "_7pupv0a" } }, defaultVariants: {}, compoundVariants: [] });
 var RowHoverCls = "_7pupv01";
 
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
@@ -2174,67 +2336,236 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
 }
 
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
-var import_react17 = __toModule(require("react"));
+var import_react18 = __toModule(require("react"));
 
 // src/components/DataSource/index.tsx
 var React9 = __toModule(require("react"));
 
-// src/components/DataSource/privateHooks/useLoadData.ts
-var import_react15 = __toModule(require("react"));
+// src/utils/multisort/sortTypes.ts
+var numberComparator = function(first, second) {
+  return first - second;
+};
+var stringComparator = function(first, second) {
+  first = `${first}`;
+  second = `${second}`;
+  return first.localeCompare(second);
+};
+var sortTypes = {
+  number: numberComparator,
+  string: stringComparator
+};
+var sortTypes_default = sortTypes;
 
-// src/components/DataSource/privateHooks/buildDataSourceDataInfo.ts
-function buildDataSourceDataInfo(dataParam) {
-  let dataArray = [];
-  if (Array.isArray(dataParam.data)) {
-    dataArray = dataParam.data;
-  } else {
-    dataArray = dataParam;
+// src/utils/multisort/index.ts
+var multisort = (sortInfo, array, get) => {
+  array.sort(getMultisortFunction(sortInfo, get));
+  return array;
+};
+multisort.knownTypes = sortTypes_default;
+var getSingleSortFunction = (info) => {
+  if (!info) {
+    return;
   }
-  return {
-    originalDataArray: dataArray
+  const field = info.field;
+  var dir = info.dir < 0 ? -1 : info.dir > 0 ? 1 : 0;
+  if (!dir) {
+    return;
+  }
+  let fn = info.fn;
+  if (!fn && info.type) {
+    fn = multisort.knownTypes[info.type];
+    if (!fn) {
+      console.warn(`Unknown sort type "${info.type}" - please pass one of ${Object.keys(multisort.knownTypes).join(", ")}`);
+    }
+  }
+  if (!fn) {
+    fn = sortTypes_default.string;
+  }
+  return (first, second) => {
+    const a = field ? first[field] : first;
+    const b = field ? second[field] : second;
+    return dir * fn(a, b);
   };
-}
-
-// src/components/DataSource/privateHooks/loadDataAsync.ts
-function loadDataAsync(data) {
-  return __async(this, null, function* () {
-    if (typeof data === "function") {
-      data = data();
+};
+var getSortFunctions = (sortInfo) => {
+  return sortInfo.map(getSingleSortFunction).filter((fn) => fn instanceof Function);
+};
+var getMultisortFunction = (sortInfo, get) => {
+  const fns = getSortFunctions(sortInfo);
+  return (first, second) => {
+    if (get) {
+      first = get(first);
+      second = get(second);
     }
-    return buildDataSourceDataInfo(yield data);
-  });
+    let result = 0;
+    let i = 0;
+    let fn;
+    const len = fns.length;
+    for (; i < len; i++) {
+      fn = fns[i];
+      if (!fn) {
+        continue;
+      }
+      result = fn(first, second);
+      if (result !== 0) {
+        return result;
+      }
+    }
+    return result;
+  };
+};
+
+// src/components/DataSource/privateHooks/useLoadData.ts
+var import_react16 = __toModule(require("react"));
+
+// src/components/hooks/useEffectWithChanges.ts
+var import_react15 = __toModule(require("react"));
+function useEffectWithChanges(fn, deps) {
+  const prevRef = (0, import_react15.useRef)({});
+  const oldValuesRef = (0, import_react15.useRef)({});
+  const oldValues = oldValuesRef.current;
+  const changesRef = (0, import_react15.useRef)({});
+  const changes = changesRef.current;
+  const useEffectDeps = [];
+  for (let k in deps) {
+    if (deps.hasOwnProperty(k)) {
+      if (deps[k] !== prevRef.current[k]) {
+        changes[k] = deps[k];
+        oldValues[k] = prevRef.current[k];
+      }
+      useEffectDeps.push(deps[k]);
+    }
+  }
+  prevRef.current = deps;
+  (0, import_react15.useEffect)(() => {
+    const changes2 = changesRef.current;
+    const result = fn(changes2, oldValues);
+    changesRef.current = {};
+    oldValuesRef.current = {};
+    return result;
+  }, useEffectDeps);
 }
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-function buildDataSourceInfo(data) {
-  return { originalDataArray: data };
+function buildDataSourceDataParams(componentState) {
+  var _a, _b;
+  const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
+  const dataSourceParams = {
+    originalDataArray: componentState.originalDataArray,
+    sortInfo,
+    groupRowsBy: componentState.groupRowsBy,
+    pivotBy: componentState.pivotBy
+  };
+  if (componentState.livePagination !== void 0) {
+    dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
+  }
+  return dataSourceParams;
+}
+function notifyDataParamsChanged(componentState, actions) {
+  var _a;
+  if (typeof componentState.data === "function") {
+    loadData(componentState.data, componentState, actions);
+  }
+  const dataParams = buildDataSourceDataParams(componentState);
+  (_a = componentState.onDataParamsChange) == null ? void 0 : _a.call(componentState, dataParams);
+}
+function loadData(data, componentState, actions) {
+  const dataParams = buildDataSourceDataParams(componentState);
+  if (typeof data === "function") {
+    data = data(dataParams);
+  }
+  const dataIsPromise = typeof data === "object" && typeof data.then === "function";
+  if (dataIsPromise) {
+    actions.loading = true;
+  }
+  Promise.resolve(data).then((dataParam) => {
+    let dataArray = [];
+    if (Array.isArray(dataParam.data)) {
+      const remoteData = dataParam;
+      dataArray = remoteData.data;
+      if (remoteData.livePaginationCursor !== void 0) {
+        actions.livePaginationCursor = remoteData.livePaginationCursor;
+      }
+    } else {
+      dataArray = dataParam;
+    }
+    actions.originalDataArray = dataArray;
+    if (dataIsPromise) {
+      actions.loading = false;
+    }
+  });
 }
 function useLoadData() {
   const {
+    getComponentState,
     componentActions: actions,
     componentState: { data }
   } = useComponentState();
-  const loadData = (data2) => {
-    let dataSourceInfo = {
-      originalDataArray: []
-    };
-    if (typeof data2 === "function") {
-      data2 = data2();
-    }
-    if (Array.isArray(data2)) {
-      dataSourceInfo = buildDataSourceInfo(data2);
-      actions.originalDataArray = dataSourceInfo.originalDataArray;
-    } else {
-      actions.loading = true;
-      loadDataAsync(data2).then((dataSourceInfo2) => {
-        actions.originalDataArray = dataSourceInfo2.originalDataArray;
-        actions.loading = false;
-      });
-    }
-  };
-  (0, import_react15.useLayoutEffect)(() => {
-    loadData(data);
+  (0, import_react16.useLayoutEffect)(() => {
+    loadData(data, getComponentState(), actions);
   }, [data]);
+  useLivePagination();
+}
+function useLivePagination() {
+  const {
+    getComponentState,
+    componentActions: actions,
+    componentState
+  } = useComponentState();
+  const {
+    notifyScrollbarsChange,
+    sortInfo,
+    groupRowsBy,
+    pivotBy,
+    livePaginationCursor,
+    scrollBottomId
+  } = componentState;
+  const [scrollbars, setScrollbars] = (0, import_react16.useState)({
+    vertical: false,
+    horizontal: false
+  });
+  const scrollbarsRef = (0, import_react16.useRef)(scrollbars);
+  (0, import_react16.useEffect)(() => {
+    notifyScrollbarsChange.onChange((scrollbars2) => {
+      if (!scrollbars2) {
+        return;
+      }
+      scrollbarsRef.current = scrollbars2;
+      setScrollbars(scrollbars2);
+    });
+    return () => notifyScrollbarsChange.destroy();
+  }, [notifyScrollbarsChange]);
+  const [cursorId, updateCursorId] = (0, import_react16.useState)(void 0);
+  (0, import_react16.useEffect)(() => {
+    const frameId = requestAnimationFrame(() => {
+      var _a;
+      if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical)) {
+        updateCursorId(livePaginationCursor);
+      }
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [livePaginationCursor]);
+  (0, import_react16.useEffect)(() => {
+    const { livePaginationCursor: livePaginationCursor2, livePagination } = getComponentState();
+    if (!scrollbars.vertical && livePagination) {
+      updateCursorId(livePaginationCursor2);
+    }
+  }, [scrollbars.vertical]);
+  (0, import_react16.useEffect)(() => {
+    updateCursorId(scrollBottomId);
+  }, [scrollBottomId]);
+  const depsObject = {
+    sortInfo,
+    groupRowsBy,
+    pivotBy,
+    cursorId
+  };
+  useEffectWithChanges(() => {
+    if (cursorId === void 0) {
+      return;
+    }
+    notifyDataParamsChanged(getComponentState(), actions);
+  }, depsObject);
 }
 
 // src/components/DataSource/state/normalizeSortInfo.ts
@@ -2244,7 +2575,7 @@ var normalizeSortInfo = (sortInfo) => {
 };
 
 // src/components/hooks/useOnce.ts
-var import_react16 = __toModule(require("react"));
+var import_react17 = __toModule(require("react"));
 function once(fn) {
   let called = false;
   let result = null;
@@ -2259,7 +2590,7 @@ function once(fn) {
   return onceFn;
 }
 function useOnce(fn) {
-  const onceFn = (0, import_react16.useMemo)(() => {
+  const onceFn = (0, import_react17.useMemo)(() => {
     return once(fn);
   }, []);
   return onceFn();
@@ -2288,9 +2619,9 @@ var DeepMap = class {
         if (!pair) {
           return;
         }
-        const { map } = pair;
+        const { map: map2 } = pair;
         const keys = [...parentKeys, key];
-        const next = map ? () => this.visitWithNext(keys, fn, map) : void 0;
+        const next = map2 ? () => this.visitWithNext(keys, fn, map2) : void 0;
         if (pair.hasOwnProperty("value")) {
           fn(pair.value, keys, i, next);
           i++;
@@ -2356,14 +2687,14 @@ var DeepMap = class {
     return this.length;
   }
   clear() {
-    const clearMap = (map) => {
-      map.forEach((value, _key) => {
-        const { map: map2 } = value;
-        if (map2) {
-          clearMap(map2);
+    const clearMap = (map2) => {
+      map2.forEach((value, _key) => {
+        const { map: map3 } = value;
+        if (map3) {
+          clearMap(map3);
         }
       });
-      map.clear();
+      map2.clear();
     };
     clearMap(this.map);
     this.length = 0;
@@ -2408,9 +2739,9 @@ var DeepMap = class {
       }
     }
     while (maps.length) {
-      let map = maps.pop();
+      let map2 = maps.pop();
       let key = keys.pop();
-      if (key && (map == null ? void 0 : map.size) === 0) {
+      if (key && (map2 == null ? void 0 : map2.size) === 0) {
         let parentMap = maps[maps.length - 1];
         let pair = parentMap == null ? void 0 : parentMap.get(key);
         if (pair) {
@@ -2449,12 +2780,12 @@ var DeepMap = class {
     if (!pair) {
       return;
     }
-    const { map } = pair;
+    const { map: map2 } = pair;
     const keys = [...parentKeys, key];
     const next = once(() => {
-      if (map) {
-        map.forEach((_, k) => {
-          this.visitKey(k, map, keys, fn);
+      if (map2) {
+        map2.forEach((_, k) => {
+          this.visitKey(k, map2, keys, fn);
         });
       }
     });
@@ -2620,14 +2951,68 @@ var GroupRowsState = class {
   }
 };
 
+// src/utils/shallowEqualObjects.ts
+function shallowEqualObjects(objA, objB) {
+  if (objA === objB) {
+    return true;
+  }
+  if (!objA || !objB) {
+    return false;
+  }
+  var aKeys = Object.keys(objA);
+  var bKeys = Object.keys(objB);
+  var len = aKeys.length;
+  if (bKeys.length !== len) {
+    return false;
+  }
+  for (var i = 0; i < len; i++) {
+    var key = aKeys[i];
+    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
+      return false;
+    }
+  }
+  return true;
+}
+
+// src/components/utils/discardCallsWithEqualArg.ts
+var map = new WeakMap();
+var getCompareDefault = (a) => a;
+function discardCallsWithEqualArg(fn, timeframe = 50, getCompareObject2) {
+  map.set(fn, {
+    lastCallTime: 0,
+    lastCallArg: null
+  });
+  const getCompare = getCompareObject2 != null ? getCompareObject2 : getCompareDefault;
+  return (arg) => {
+    const { lastCallTime, lastCallArg } = map.get(fn) || {
+      lastCallTime: 0,
+      lastCallArg: null
+    };
+    const now = Date.now();
+    const diff = now - lastCallTime;
+    const objectsEqual = shallowEqualObjects(getCompare(lastCallArg), getCompare(arg));
+    if (diff < timeframe && objectsEqual) {
+      return;
+    }
+    map.set(fn, {
+      lastCallTime: now,
+      lastCallArg: arg
+    });
+    fn(arg);
+  };
+}
+
 // src/components/DataSource/state/getInitialState.ts
 function initSetupState2() {
   const now = Date.now();
   const originalDataArray = [];
   const dataArray = [];
   return {
+    dataParams: void 0,
+    notifyScrollbarsChange: buildSubscriptionCallback(),
     pivotTotalColumnPosition: "end",
     originalDataArray,
+    scrollBottomId: Symbol("scrollBottomId"),
     pivotColumns: void 0,
     pivotColumnGroups: void 0,
     dataArray,
@@ -2644,12 +3029,20 @@ function initSetupState2() {
     lastGroupDataArray: void 0
   };
 }
+function getCompareObject(dataParams) {
+  const obj = __spreadValues({}, dataParams);
+  delete obj.originalDataArray;
+  return obj;
+}
 var forwardProps3 = () => {
   return {
+    onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObject) : void 0,
     remoteCount: 1,
     data: 1,
     pivotBy: 1,
     primaryKey: 1,
+    livePagination: 1,
+    livePaginationCursor: 1,
     loading: (loading) => loading != null ? loading : false,
     sortInfo: (sortInfo) => normalizeSortInfo(sortInfo),
     groupRowsBy: (groupRowsBy) => groupRowsBy != null ? groupRowsBy : [],
@@ -2662,10 +3055,20 @@ var forwardProps3 = () => {
   };
 };
 function mapPropsToState2(params) {
-  var _a;
   const { props } = params;
+  const controlledSort = isControlledValue(props.sortInfo);
   return {
-    multiSort: Array.isArray((_a = props.sortInfo) != null ? _a : props.defaultSortInfo)
+    controlledSort,
+    multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
+  };
+}
+function getInterceptActions() {
+  return {
+    sortInfo: (sortInfo, { actions, state }) => {
+      const dataParams = buildDataSourceDataParams(state);
+      dataParams.sortInfo = sortInfo;
+      actions.dataParams = dataParams;
+    }
   };
 }
 
@@ -2844,132 +3247,60 @@ function enhancedFlatten(param) {
     var _a;
     const items = deepMapValue.items;
     const groupNesting = groupKeys.length;
-    const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
-    const enhancedGroupData = getEnhancedGroupData({
-      groupBy: groupByStrings,
-      parents: Array.from(parents),
-      indexInGroup,
-      indexInParentGroups: Array.from(indexInParentGroups),
-      indexInAll: result.length,
-      groupKeys,
-      collapsed
-    }, deepMapValue);
-    const include = generateGroupRows || collapsed;
-    if (include) {
-      result.push(enhancedGroupData);
-    }
-    if (collapsed) {
-      parents.forEach((parent) => {
-        parent.collapsedChildrenCount += enhancedGroupData.groupCount;
-        parent.collapsedGroupsCount += 1;
-      });
-    }
-    indexInParentGroups.push(indexInGroup);
-    parents.push(enhancedGroupData);
-    if (!collapsed) {
-      if (!next) {
-        if (!pivot) {
-          const startIndex = result.length;
-          result.push(...items.map((item, index) => {
-            return {
-              id: toPrimaryKey(item),
-              data: item,
-              isGroupRow: false,
-              collapsed: false,
-              groupKeys,
-              parents: Array.from(parents),
-              indexInParentGroups: [...indexInParentGroups, index],
-              indexInGroup: index,
-              indexInAll: startIndex + index,
-              groupBy: groupByStrings,
-              groupNesting,
-              groupCount: enhancedGroupData.groupCount
-            };
-          }));
-        }
-      } else {
-        next();
-      }
-    }
-    parents.pop();
-    indexInParentGroups.pop();
-  });
-  return {
-    data: result
-  };
-}
-
-// src/utils/multisort/sortTypes.ts
-var sortTypes = {
-  number: function(first, second) {
-    return first - second;
-  },
-  string: function(first, second) {
-    first = `${first}`;
-    second = `${second}`;
-    return first.localeCompare(second);
-  }
-};
-var sortTypes_default = sortTypes;
-
-// src/utils/multisort/index.ts
-var multisort = (sortInfo, array, get) => {
-  array.sort(getMultisortFunction(sortInfo, get));
-  return array;
-};
-multisort.knownTypes = sortTypes_default;
-var getSingleSortFunction = (info) => {
-  if (!info) {
-    return;
-  }
-  const field = info.field;
-  var dir = info.dir < 0 ? -1 : info.dir > 0 ? 1 : 0;
-  if (!dir) {
-    return;
-  }
-  let fn = info.fn;
-  if (!fn && info.type) {
-    fn = multisort.knownTypes[info.type];
-    if (!fn) {
-      console.warn(`Unknown sort type "${info.type}" - please pass one of ${Object.keys(multisort.knownTypes).join(", ")}`);
-    }
-  }
-  if (!fn) {
-    fn = sortTypes_default.string;
-  }
-  return (first, second) => {
-    const a = field ? first[field] : first;
-    const b = field ? second[field] : second;
-    return dir * fn(a, b);
-  };
-};
-var getSortFunctions = (sortInfo) => {
-  return sortInfo.map(getSingleSortFunction).filter((fn) => fn instanceof Function);
-};
-var getMultisortFunction = (sortInfo, get) => {
-  const fns = getSortFunctions(sortInfo);
-  return (first, second) => {
-    if (get) {
-      first = get(first);
-      second = get(second);
+    const collapsed = (_a = groupRowsState == null ? void 0 : groupRowsState.isGroupRowCollapsed(groupKeys)) != null ? _a : false;
+    const enhancedGroupData = getEnhancedGroupData({
+      groupBy: groupByStrings,
+      parents: Array.from(parents),
+      indexInGroup,
+      indexInParentGroups: Array.from(indexInParentGroups),
+      indexInAll: result.length,
+      groupKeys,
+      collapsed
+    }, deepMapValue);
+    const include = generateGroupRows || collapsed;
+    if (include) {
+      result.push(enhancedGroupData);
     }
-    let result = 0;
-    let i = 0;
-    let fn;
-    const len = fns.length;
-    for (; i < len; i++) {
-      fn = fns[i];
-      if (!fn) {
-        continue;
-      }
-      result = fn(first, second);
-      if (result !== 0) {
-        return result;
+    if (collapsed) {
+      parents.forEach((parent) => {
+        parent.collapsedChildrenCount += enhancedGroupData.groupCount;
+        parent.collapsedGroupsCount += 1;
+      });
+    }
+    indexInParentGroups.push(indexInGroup);
+    parents.push(enhancedGroupData);
+    if (!collapsed) {
+      if (!next) {
+        if (!pivot) {
+          const startIndex = result.length;
+          result.push(...items.map((item, index) => {
+            return {
+              id: toPrimaryKey(item),
+              data: item,
+              isGroupRow: false,
+              collapsed: false,
+              groupKeys,
+              parents: Array.from(parents),
+              indexInParentGroups: [...indexInParentGroups, index],
+              indexInGroup: index,
+              indexInAll: startIndex + index,
+              groupBy: groupByStrings,
+              groupNesting,
+              groupCount: enhancedGroupData.groupCount
+            };
+          }));
+        }
+      } else {
+        next();
       }
     }
-    return result;
+    parents.pop();
+    indexInParentGroups.pop();
+  });
+  return {
+    data: result
   };
-};
+}
 
 // src/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
 function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPosition) {
@@ -3095,7 +3426,7 @@ function concludeReducer(params) {
   var _a;
   const { state, previousState } = params;
   const sortInfo = state.sortInfo;
-  const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length);
+  const shouldSort = !!(sortInfo == null ? void 0 : sortInfo.length) && !state.controlledSort;
   const sortDepsChanged = haveDepsChanged(previousState, state, [
     "originalDataArray",
     "sortInfo"
@@ -3165,7 +3496,9 @@ function concludeReducer(params) {
   }
   state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
-  globalThis.state = state;
+  if (true) {
+    globalThis.state = state;
+  }
   return state;
 }
 
@@ -3188,7 +3521,8 @@ var DataSourceRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
   forwardProps: forwardProps3,
   concludeReducer,
-  mapPropsToState: mapPropsToState2
+  mapPropsToState: mapPropsToState2,
+  interceptActions: getInterceptActions()
 });
 function DataSourceCmp({ children }) {
   const DataSourceContext = getDataSourceContext();
@@ -3218,7 +3552,7 @@ function DataSource(props) {
 // src/components/InfiniteTable/hooks/useToggleGroupRow.ts
 function useToggleGroupRow() {
   const { getState: getDataSourceState, componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react17.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react18.useCallback)((groupKeys) => {
     const newState = new GroupRowsState(getDataSourceState().groupRowsState);
     newState.toggleGroupRow(groupKeys);
     dataSourceActions.groupRowsState = newState;
@@ -3228,7 +3562,7 @@ function useToggleGroupRow() {
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
 function useGroupRowsMap(groupRowsBy) {
-  const groupRowsMap = (0, import_react18.useMemo)(() => {
+  const groupRowsMap = (0, import_react19.useMemo)(() => {
     return groupRowsBy.reduce((acc, groupBy, index) => {
       acc.set(groupBy.field, {
         groupBy,
@@ -3248,10 +3582,10 @@ function useColumnsWhen() {
     componentState: { groupRenderStrategy, pivotTotalColumnPosition }
   } = useComponentState();
   const groupRowsMap = useGroupRowsMap(groupRowsBy);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupRowsMap);
@@ -3314,7 +3648,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupRowsMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -3340,7 +3674,7 @@ function useColumnsWhenPivoting() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     const computedPivotColumns = getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, {
       pivotColumn,
       pivotRowLabelsColumn,
@@ -3361,7 +3695,7 @@ function useColumnsWhenGrouping() {
     componentState: { columns, groupColumn, groupRenderStrategy, pivotColumns }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (pivotColumns) {
       return;
     }
@@ -3398,7 +3732,7 @@ function useHideEmptyGroupColumns(groupRowsMap) {
       groupRenderStrategy
     }
   } = useComponentState();
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (groupRenderStrategy === "single-column") {
       return;
     }
@@ -3463,25 +3797,27 @@ function getColumnsWhenGrouping(params) {
   const computedColumns = new Map();
   if (groupRenderStrategy === "multi-column") {
     groupRowsBy.forEach((groupByForColumn, groupIndexForColumn, arr) => {
-      computedColumns.set(`group-by-${groupByForColumn.field}`, getColumnForGroupBy({
+      const generatedGroupColumn = getColumnForGroupBy({
         groupByForColumn,
         groupRowsBy,
         groupIndexForColumn,
         groupCount: arr.length,
         groupRenderStrategy
-      }, toggleGroupRow, groupColumn));
+      }, toggleGroupRow, groupColumn);
+      computedColumns.set(generatedGroupColumn.id || `group-by-${groupByForColumn.field}`, generatedGroupColumn);
     });
   } else if (groupRenderStrategy === "single-column") {
-    computedColumns.set("group-by", getSingleGroupColumn({
+    const singleGroupColumn = getSingleGroupColumn({
       groupCount: groupRowsBy.length,
       groupRowsBy,
       groupRenderStrategy
-    }, toggleGroupRow, groupColumn));
+    }, toggleGroupRow, groupColumn);
+    computedColumns.set(singleGroupColumn.id || "group-by", singleGroupColumn);
   }
   columns.forEach((col, colId) => {
     computedColumns.set(colId, col);
   });
-  return computedColumns;
+  return computedColumns.size ? computedColumns : void 0;
 }
 
 // src/components/InfiniteTable/hooks/useComputed.ts
@@ -3492,8 +3828,15 @@ function useComputed() {
     componentActions: dataSourceActions,
     componentState: dataSourceState
   } = useDataSourceContextValue();
-  const { columnOrder, columnVisibility, columnPinning, bodySize } = componentState;
-  (0, import_react19.useState)(() => {
+  const {
+    columnOrder,
+    columnVisibility,
+    columnPinning,
+    columnSizing,
+    columnTypes,
+    bodySize
+  } = componentState;
+  (0, import_react20.useState)(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -3509,9 +3852,10 @@ function useComputed() {
   const { multiSort } = dataSourceState;
   useColumnGroups();
   useColumnsWhen();
-  const setSortInfo = (0, import_react19.useCallback)((sortInfo) => {
+  const setSortInfo = (0, import_react20.useCallback)((sortInfo) => {
     var _a2;
-    dataSourceActions.sortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
+    const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
+    dataSourceActions.sortInfo = newSortInfo;
   }, []);
   const columns = componentState.computedColumns;
   const {
@@ -3537,6 +3881,7 @@ function useComputed() {
     pinnedStartMaxWidth: componentState.pinnedStartMaxWidth,
     pinnedEndMaxWidth: componentState.pinnedEndMaxWidth,
     bodySize,
+    viewportReservedWidth: componentState.viewportReservedWidth,
     sortable: componentState.sortable,
     draggableColumns: componentState.draggableColumns,
     sortInfo: (_a = dataSourceState.sortInfo) != null ? _a : void 0,
@@ -3545,7 +3890,9 @@ function useComputed() {
     columnOrder,
     columnVisibility,
     columnVisibilityAssumeVisible: true,
-    columnPinning
+    columnPinning,
+    columnSizing,
+    columnTypes
   });
   const unpinnedColumnWidths = computedUnpinnedColumns.map((c) => c.computedWidth);
   let sortedUnpinnedColumnWidths = [...unpinnedColumnWidths].sort(sortAscending);
@@ -3616,33 +3963,6 @@ var InfiniteTableBody = React10.forwardRef(function InfiniteTableBody2(props, re
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderWrapper.tsx
 var React22 = __toModule(require("react"));
 
-// src/utils/getGlobal.ts
-function getGlobal() {
-  return globalThis;
-}
-
-// src/components/utils/getScrollbarWidth.ts
-var scrollbarWidth;
-function getScrollbarWidth() {
-  var _a, _b;
-  if (scrollbarWidth != null) {
-    return scrollbarWidth;
-  }
-  const doc = (_a = getGlobal().document) != null ? _a : null;
-  if (!doc) {
-    return 0;
-  }
-  const outer = doc.createElement("div");
-  outer.style.visibility = "hidden";
-  outer.style.overflow = "scroll";
-  doc.body.appendChild(outer);
-  const inner = doc.createElement("div");
-  outer.appendChild(inner);
-  scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
-  (_b = outer.parentNode) == null ? void 0 : _b.removeChild(outer);
-  return scrollbarWidth;
-}
-
 // src/components/InfiniteTable/components/ScrollbarPlaceholder.tsx
 var React11 = __toModule(require("react"));
 function HorizontalScrollbarPlaceholderFn(props) {
@@ -3679,10 +3999,11 @@ function VerticalScrollbarPlaceholderFn(props) {
 var VerticalScrollbarPlaceholder = React11.memo(VerticalScrollbarPlaceholderFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts
+var import_createRuntimeFn2 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellCls = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var HeaderCellProxy = "_12zfob10";
-var HeaderCellRecipe = createRuntimeFn({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
-var HeaderClsRecipe = createRuntimeFn({ defaultClassName: "_12zfob12 _16lm1iw10", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
+var HeaderCellRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob1c", variantClassNames: { dragging: { true: "_12zfob1d", false: "_12zfob1e" }, first: { true: "_12zfob1f", false: "_12zfob1g" }, last: { true: "_12zfob1h", false: "_12zfob1i" }, groupByField: { true: "_12zfob1j", false: "_12zfob1k" }, firstInCategory: { true: "_12zfob1l", false: "_12zfob1m" }, lastInCategory: { true: "_12zfob1n", false: "_12zfob1o" }, pinned: { start: "_12zfob1p", end: "_12zfob1q", false: "_12zfob1r" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_12zfob1s"], [{ pinned: "end", firstInCategory: true }, "_12zfob1t"], [{ pinned: false, lastInCategory: true }, "_12zfob1u"]] });
+var HeaderClsRecipe = (0, import_createRuntimeFn2.createRuntimeFn)({ defaultClassName: "_12zfob12 _16lm1iw10", variantClassNames: { pinned: { start: "_12zfob13", end: "_12zfob14", false: "_12zfob15" }, virtualized: { true: "_12zfob16", false: "_12zfob17" }, overflow: { true: "_12zfob18", false: "_12zfob19" } }, defaultVariants: {}, compoundVariants: [[{ overflow: true, pinned: "start" }, "_12zfob1a"], [{ overflow: true, pinned: "end" }, "_12zfob1b"]] });
 var HeaderGroupCls = "_16lm1iwz _16lm1iwj";
 var HeaderGroup_Children = "_16lm1iwj _16lm1iw10 _16lm1iw12 _16lm1iwc";
 var HeaderGroup_Header = "_12zfob1x _16lm1iwj _16lm1iw10 _16lm1iw11";
@@ -3691,27 +4012,28 @@ var HeaderWrapperCls = "_12zfob1v _16lm1iw16 _16lm1iw1 _16lm1iwj _16lm1iw10";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
 var React18 = __toModule(require("react"));
-var import_react26 = __toModule(require("react"));
+var import_react28 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var React14 = __toModule(require("react"));
-var import_react23 = __toModule(require("react"));
+var import_react24 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 var React12 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useInfiniteTableState.ts
-var import_react20 = __toModule(require("react"));
+var import_react21 = __toModule(require("react"));
 var useInfiniteTableState = () => {
   const TableContext2 = getInfiniteTableContext();
-  const { componentState } = (0, import_react20.useContext)(TableContext2);
+  const { componentState } = (0, import_react21.useContext)(TableContext2);
   return componentState;
 };
 
 // src/components/InfiniteTable/components/cell.css.ts
+var import_createRuntimeFn3 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var CellCls2 = "_1eexc2a5 _16lm1iwj _16lm1iw10 _16lm1iw11 _16lm1iw2 _16lm1iw19 _16lm1iw1a";
 var CellClsVariants = { shifting: "_1eexc2a3", dragging: "_1eexc2a4" };
-var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
+var ColumnCellRecipe = (0, import_createRuntimeFn3.createRuntimeFn)({ defaultClassName: "_16lm1iw2 _16lm1iwo _16lm1iw7 _16lm1iwr", variantClassNames: { dragging: { false: "_1eexc2a7" }, first: { true: "_1eexc2a8", false: "_1eexc2a9" }, last: { true: "_1eexc2aa", false: "_1eexc2ab" }, groupByField: { true: "_1eexc2ac", false: "_1eexc2ad" }, firstInCategory: { true: "_1eexc2ae", false: "_1eexc2af" }, lastInCategory: { true: "_1eexc2ag", false: "_1eexc2ah" }, pinned: { start: "_1eexc2ai", end: "_1eexc2aj", false: "_1eexc2ak" } }, defaultVariants: {}, compoundVariants: [[{ pinned: "start", lastInCategory: true }, "_1eexc2al"], [{ pinned: "end", firstInCategory: true }, "_1eexc2am"]] });
 var columnAlignCellStyle = { center: "_1eexc2a0", start: "_1eexc2a1", end: "_1eexc2a2" };
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
@@ -3769,7 +4091,7 @@ var InfiniteTableCell = React12.memo(InfiniteTableCellFn);
 
 // src/components/InfiniteTable/hooks/useColumnPointerEvents.ts
 var import_binary_search = __toModule(require_binary_search());
-var import_react21 = __toModule(require("react"));
+var import_react22 = __toModule(require("react"));
 
 // src/components/InfiniteTable/utils/moveXatY.ts
 var moveXatY = (arr, dragIndex, dropIndex) => {
@@ -3803,18 +4125,18 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = (0, import_react21.useState)(null);
-  const [proxyOffset, setProxyOffset] = (0, import_react21.useState)(null);
-  const breakpointsRef = (0, import_react21.useRef)([]);
-  const pointerMoveRef = (0, import_react21.useRef)(null);
-  const didDragRef = (0, import_react21.useRef)(false);
-  const initialClientPos = (0, import_react21.useRef)(null);
-  const currentDropIndexRef = (0, import_react21.useRef)(null);
+  const [draggingDiff, setDraggingDiff] = (0, import_react22.useState)(null);
+  const [proxyOffset, setProxyOffset] = (0, import_react22.useState)(null);
+  const breakpointsRef = (0, import_react22.useRef)([]);
+  const pointerMoveRef = (0, import_react22.useRef)(null);
+  const didDragRef = (0, import_react22.useRef)(false);
+  const initialClientPos = (0, import_react22.useRef)(null);
+  const currentDropIndexRef = (0, import_react22.useRef)(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
-  const column = (0, import_react21.useMemo)(() => columns.get(columnId), [columnId, columns]);
-  const { columnIndex, columnWidth, columnsArray } = (0, import_react21.useMemo)(() => {
+  const column = (0, import_react22.useMemo)(() => columns.get(columnId), [columnId, columns]);
+  const { columnIndex, columnWidth, columnsArray } = (0, import_react22.useMemo)(() => {
     const columnsArray2 = Array.from(columns.values());
     return {
       columnsArray: columnsArray2,
@@ -3822,8 +4144,8 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = (0, import_react21.useRef)("auto");
-  const onPointerDown = (0, import_react21.useCallback)((e) => {
+  let cursorRef = (0, import_react22.useRef)("auto");
+  const onPointerDown = (0, import_react22.useCallback)((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
     didDragRef.current = false;
@@ -3886,7 +4208,7 @@ var useColumnPointerEvents = ({
     target.addEventListener("pointermove", onPointerMove);
     target.setPointerCapture(e.pointerId);
   }, [columns, column, columnIndex, columnsArray, computedRemainingSpace]);
-  const onPointerUp = (0, import_react21.useCallback)((e) => {
+  const onPointerUp = (0, import_react22.useCallback)((e) => {
     const target = domRef.current;
     target.style.cursor = cursorRef.current;
     target.releasePointerCapture(e.pointerId);
@@ -3961,7 +4283,7 @@ var import_react_dom = __toModule(require("react-dom"));
 
 // src/components/InfiniteTable/components/icons/SortIcon.tsx
 var React13 = __toModule(require("react"));
-var import_react22 = __toModule(require("react"));
+var import_react23 = __toModule(require("react"));
 var defaultLineStyle = {
   marginTop: 2,
   marginBottom: 2,
@@ -3969,8 +4291,8 @@ var defaultLineStyle = {
 };
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = (0, import_react22.useState)(true);
-  const [opacity, setOpacity] = (0, import_react22.useState)(0);
+  const [rendered, setRendered] = (0, import_react23.useState)(true);
+  const [opacity, setOpacity] = (0, import_react23.useState)(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -3984,7 +4306,7 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -4061,8 +4383,8 @@ function InfiniteTableHeaderCell(props) {
     className: `${baseCls}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
   });
-  const domRef = (0, import_react23.useRef)(null);
-  const ref = (0, import_react23.useCallback)((node) => {
+  const domRef = (0, import_react24.useRef)(null);
+  const ref = (0, import_react24.useCallback)((node) => {
     var _a2;
     domRef.current = node;
     (_a2 = props.domRef) == null ? void 0 : _a2.call(props, node);
@@ -4071,7 +4393,7 @@ function InfiniteTableHeaderCell(props) {
     computed: { computedRemainingSpace },
     componentState: { portalDOMRef }
   } = useInfiniteTable();
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -4124,7 +4446,25 @@ function InfiniteTableHeaderCell(props) {
 
 // src/components/RawList/index.tsx
 var React17 = __toModule(require("react"));
+var import_react27 = __toModule(require("react"));
+
+// src/components/RawList/AvoidReactDiff.tsx
+var React15 = __toModule(require("react"));
 var import_react25 = __toModule(require("react"));
+function AvoidReactDiffFn(props) {
+  const [children, setChildren] = (0, import_react25.useState)(props.updater.get());
+  (0, import_react25.useLayoutEffect)(() => {
+    const remove = props.updater.onChange((children2) => {
+      setChildren(children2);
+    });
+    return remove;
+  }, [props.updater]);
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, children);
+}
+var AvoidReactDiff = React15.memo(AvoidReactDiffFn);
+
+// src/components/RawList/useVirtualRenderer.ts
+var import_react26 = __toModule(require("react"));
 
 // src/components/RawList/ReactVirtualRenderer.tsx
 var React16 = __toModule(require("react"));
@@ -4143,10 +4483,10 @@ var MappedItems = class extends Logger {
       return result;
     };
     this.getElementsOutsideItemRange = (startIndex, endIndex) => {
-      const map = this.elementIndexToItemIndex;
+      const map2 = this.elementIndexToItemIndex;
       const result = [];
-      for (const elementIndex in map) {
-        const itemIndex = map[elementIndex];
+      for (const elementIndex in map2) {
+        const itemIndex = map2[elementIndex];
         if (itemIndex < startIndex || itemIndex > endIndex) {
           result.push(elementIndex >> 0);
         }
@@ -4222,6 +4562,9 @@ var MappedItems = class extends Logger {
     this.itemIndexToElementIndex = {};
     this.renderedElements = {};
   }
+  reset() {
+    this.init();
+  }
   destroy() {
     this.init();
   }
@@ -4241,21 +4584,6 @@ var MappedItems = class extends Logger {
   }
 };
 
-// src/components/RawList/AvoidReactDiff.tsx
-var React15 = __toModule(require("react"));
-var import_react24 = __toModule(require("react"));
-function AvoidReactDiffFn(props) {
-  const [children, setChildren] = (0, import_react24.useState)(props.updater.get());
-  (0, import_react24.useLayoutEffect)(() => {
-    const remove = props.updater.onChange((children2) => {
-      setChildren(children2);
-    });
-    return remove;
-  }, [props.updater]);
-  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, children);
-}
-var AvoidReactDiff = React15.memo(AvoidReactDiffFn);
-
 // src/components/RawList/ReactVirtualRenderer.tsx
 var ITEM_POSITION_WITH_TRANSFORM = true;
 var ReactVirtualRenderer = class extends Logger {
@@ -4362,17 +4690,12 @@ var ReactVirtualRenderer = class extends Logger {
       }
     };
     this.destroy = () => {
-      if (true) {
-        return;
-      }
       this.destroyed = true;
-      this.mappedItems.destroy();
-      this.itemDOMElements = [];
-      this.itemDOMRefs = [];
-      this.updaters = [];
+      this.reset();
       this.onRender = null;
       this.renderItem = null;
       this.brain = null;
+      this.mappedItems = null;
     };
     if (onRender) {
       this.onRender = onRender;
@@ -4430,28 +4753,53 @@ var ReactVirtualRenderer = class extends Logger {
     itemUpdater(renderedNode);
     this.updateElementPosition(elementIndex);
   }
+  reset() {
+    this.itemDOMElements = {};
+    this.itemDOMRefs = {};
+    this.updaters = {};
+    this.items = [];
+    this.mappedItems.reset();
+  }
 };
 
+// src/components/RawList/useVirtualRenderer.ts
+function createRenderer(brain) {
+  const renderer = new ReactVirtualRenderer(brain, {});
+  const onRenderUpdater = buildSubscriptionCallback();
+  brain.onDestroy(() => {
+    renderer.destroy();
+    onRenderUpdater.destroy();
+  });
+  return {
+    renderer,
+    onRenderUpdater
+  };
+}
+function useVirtualRenderer({
+  brain
+}) {
+  return (0, import_react26.useMemo)(() => {
+    return createRenderer(brain);
+  }, [brain]);
+}
+
 // src/components/RawList/index.tsx
 function RawListFn(props) {
   const { renderItem, brain, debugChannel } = props;
-  const { onRenderUpdater, renderer } = (0, import_react25.useMemo)(() => {
-    const onRenderUpdater2 = buildSubscriptionCallback();
-    const renderer2 = new ReactVirtualRenderer(brain, {
-      channel: debugChannel
-    });
-    return { onRenderUpdater: onRenderUpdater2, renderer: renderer2 };
-  }, []);
+  const { onRenderUpdater, renderer } = useVirtualRenderer({
+    brain,
+    debugChannel
+  });
   const getRenderItem = useLatest(renderItem);
-  (0, import_react25.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
       renderItem,
       force: true,
       onRender: onRenderUpdater
     });
-  }, [renderItem, onRenderUpdater]);
-  (0, import_react25.useEffect)(() => {
+  }, [brain, renderItem, onRenderUpdater]);
+  (0, import_react27.useEffect)(() => {
     const remove = brain.onRenderRangeChange((renderRange) => {
       renderer.renderRange(renderRange, {
         force: false,
@@ -4461,12 +4809,6 @@ function RawListFn(props) {
     });
     return remove;
   }, [brain, onRenderUpdater]);
-  (0, import_react25.useEffect)(() => {
-    return () => {
-      renderer.destroy();
-      onRenderUpdater.destroy();
-    };
-  }, [renderer, onRenderUpdater]);
   return /* @__PURE__ */ React17.createElement(AvoidReactDiff, {
     updater: onRenderUpdater
   });
@@ -4484,7 +4826,7 @@ function InfiniteTableHeaderFn(props) {
     componentState: { headerHeight }
   } = useInfiniteTable();
   const { computedVisibleColumnsMap } = computed;
-  const renderColumn = (0, import_react26.useCallback)(({ domRef: domRef2, itemIndex: columnIndex }) => {
+  const renderColumn = (0, import_react28.useCallback)(({ domRef: domRef2, itemIndex: columnIndex }) => {
     const column = columns[columnIndex];
     if (!column) {
       if (true) {
@@ -4499,14 +4841,14 @@ function InfiniteTableHeaderFn(props) {
       columns: computedVisibleColumnsMap
     });
   }, [computedVisibleColumnsMap, columns, repaintId, headerHeight]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
     };
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = (0, import_react26.useRef)(null);
+  const domRef = (0, import_react28.useRef)(null);
   const headerCls = HeaderClsRecipe({
     pinned: pinning,
     overflow: false,
@@ -4532,7 +4874,7 @@ var React20 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/buildColumnAndGroupTree.ts
 function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
-  const map = new Map();
+  const map2 = new Map();
   const temporaryMap = new Map();
   const mapOfAllParentGroupsForColumns = new Map();
   columns.forEach((col, index) => {
@@ -4550,7 +4892,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
       computedWidth: col.computedWidth,
       depth: col.columnGroup ? ((_d = columnGroupsDepthsMap.get(col.columnGroup)) != null ? _d : 0) + 1 : 0
     };
-    map.set([colId], colItem);
+    map2.set([colId], colItem);
     let groupId = col.columnGroup;
     let colGroupItem;
     let prevGroupItem = colItem;
@@ -4572,7 +4914,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
             computedWidth: 0,
             depth: (_e = columnGroupsDepthsMap.get(groupId)) != null ? _e : 0
           };
-          map.set(groupAbsoluteId, colGroupItem);
+          map2.set(groupAbsoluteId, colGroupItem);
           temporaryMap.set(groupId, colGroupItem);
         }
         colGroupItem.columnItems.push(colItem);
@@ -4589,7 +4931,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
   });
   const result = [];
   let groupOffset = 0;
-  map.forEach((item) => {
+  map2.forEach((item) => {
     if (!item.ref.columnGroup) {
       const itemWidth = item.type === "column" ? item.ref.computedWidth : item.columnItems.reduce((sum, col) => sum + col.ref.computedWidth, 0);
       item.groupOffset = groupOffset;
@@ -4601,7 +4943,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
       groupOffset += itemWidth;
     }
   });
-  map.clear();
+  map2.clear();
   temporaryMap.clear();
   return result;
 }
@@ -4698,7 +5040,7 @@ function renderColumnHeaderGroups(config) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-var import_react27 = __toModule(require("react"));
+var import_react29 = __toModule(require("react"));
 var { rootClassName: rootClassName5 } = internalProps;
 var TableHeaderClassName2 = `${rootClassName5}Header`;
 var UPDATE_SCROLL = (node, scrollPosition) => {
@@ -4764,7 +5106,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   if (totalWidth != null) {
     style.width = availableWidth;
   }
-  (0, import_react27.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     const scroller = brain || scrollListener;
     if (!scroller || !scrollable) {
       return;
@@ -4878,12 +5220,12 @@ function TableHeaderWrapper(props) {
 
 // src/components/VirtualScrollContainer/index.tsx
 var React23 = __toModule(require("react"));
-var import_react29 = __toModule(require("react"));
+var import_react31 = __toModule(require("react"));
 
 // src/components/hooks/useOnScroll.ts
-var import_react28 = __toModule(require("react"));
+var import_react30 = __toModule(require("react"));
 var useOnScroll = (domRef, onScroll) => {
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     const domNode = domRef == null ? void 0 : domRef.current;
     const scrollFn = (event) => {
       const node = event.target;
@@ -4929,7 +5271,7 @@ var VirtualScrollContainer = React23.forwardRef(function VirtualScrollContainer2
     className,
     style
   } = props;
-  const domRef = ref != null ? ref : (0, import_react29.useRef)(null);
+  const domRef = ref != null ? ref : (0, import_react31.useRef)(null);
   useOnScroll(domRef, onContainerScroll);
   return /* @__PURE__ */ React23.createElement("div", {
     ref: domRef,
@@ -4960,18 +5302,18 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = React24.memo(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-var import_react40 = __toModule(require("react"));
+var import_react42 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 var React30 = __toModule(require("react"));
-var import_react33 = __toModule(require("react"));
+var import_react35 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualRowList.tsx
 var React26 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.tsx
 var React25 = __toModule(require("react"));
-var import_react30 = __toModule(require("react"));
+var import_react32 = __toModule(require("react"));
 
 // src/components/VirtualList/VirtualList.css.ts
 var VirtualListCls = "mlx2t0 _16lm1iw0";
@@ -5014,11 +5356,11 @@ var VirtualList = (props) => {
     "onContainerScroll",
     "children"
   ]);
-  const domRef = (0, import_react30.useRef)(null);
+  const domRef = (0, import_react32.useRef)(null);
   const [, rerender] = useRerender();
-  const [totalSize, setTotalSize] = (0, import_react30.useState)(0);
-  const renderCountRef = (0, import_react30.useRef)(0);
-  (0, import_react30.useEffect)(() => {
+  const [totalSize, setTotalSize] = (0, import_react32.useState)(0);
+  const renderCountRef = (0, import_react32.useRef)(0);
+  (0, import_react32.useEffect)(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
       if (true) {
@@ -5037,7 +5379,7 @@ var VirtualList = (props) => {
       removeOnTotalSizeChange();
     };
   }, [virtualBrain]);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       UPDATE_SCROLL2(domRef.current, scrollPosition);
     };
@@ -5063,7 +5405,7 @@ var VirtualList = (props) => {
     brain: virtualBrain,
     renderItem,
     repaintId,
-    debugChannel: "VirtualList"
+    debugChannel: "VirtualList-" + mainAxis
   })), children, /* @__PURE__ */ React25.createElement(SpacePlaceholder, {
     count,
     width,
@@ -5091,7 +5433,7 @@ var VirtualRowList = (props) => {
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRow.tsx
 var React28 = __toModule(require("react"));
-var import_react32 = __toModule(require("react"));
+var import_react34 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 var React27 = __toModule(require("react"));
@@ -5195,7 +5537,7 @@ function InfiniteTableColumnCellFn(props) {
 var InfiniteTableColumnCell = React27.memo(InfiniteTableColumnCellFn);
 
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
-var import_react31 = __toModule(require("react"));
+var import_react33 = __toModule(require("react"));
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName.ts
 var { rootClassName: rootClassName9 } = internalProps;
@@ -5220,8 +5562,8 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     domRef: domRefFromProps,
     rowInfo
   } = props;
-  const domRef = (0, import_react31.useRef)(null);
-  const rowDOMRef = (0, import_react31.useCallback)((node) => {
+  const domRef = (0, import_react33.useRef)(null);
+  const rowDOMRef = (0, import_react33.useCallback)((node) => {
     domRefFromProps(node);
     domRef.current = node;
   }, []);
@@ -5253,7 +5595,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
   }), `${InfiniteTableRowClassName}--${rowInfo.isGroupRow ? "group" : "normal"}-row`, inlineGroupRoot ? `${InfiniteTableRowClassName}--inline-group-row` : "", showZebraRows ? `${InfiniteTableRowClassName}--${odd ? "odd" : "even"}` : null, showHoverRows ? `${InfiniteTableRowClassName}--show-hover` : null, domProps == null ? void 0 : domProps.className, rowProps == null ? void 0 : rowProps.className, rowComputedClassName);
   const initialMouseEnter = rowProps == null ? void 0 : rowProps.onMouseEnter;
   const initialMouseLeave = rowProps == null ? void 0 : rowProps.onMouseLeave;
-  const onMouseEnter = (0, import_react31.useCallback)((event) => {
+  const onMouseEnter = (0, import_react33.useCallback)((event) => {
     var _a;
     initialMouseEnter == null ? void 0 : initialMouseEnter(event);
     const rowIndex2 = ((_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex) * 1;
@@ -5267,7 +5609,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     const rows = parentNode.querySelectorAll(hoverSelector.join(","));
     rows.forEach((row) => row.classList.add(InfiniteTableRowClassName__hover, RowHoverCls));
   }, [initialMouseEnter, showHoverRows]);
-  const onMouseLeave = (0, import_react31.useCallback)((event) => {
+  const onMouseLeave = (0, import_react33.useCallback)((event) => {
     var _a;
     initialMouseLeave == null ? void 0 : initialMouseLeave(event);
     const rowIndex2 = (_a = event.currentTarget) == null ? void 0 : _a.dataset.rowIndex;
@@ -5323,7 +5665,7 @@ function InfiniteTableRowFn(props) {
     width: rowWidth,
     height: rowHeight
   }, domProps.style);
-  const renderCellRef = (0, import_react32.useRef)(null);
+  const renderCellRef = (0, import_react34.useRef)(null);
   const renderCell = React28.useCallback(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
@@ -5427,7 +5769,7 @@ function useUnpinnedRendering(params) {
   } = params;
   const { virtualizeColumns } = getState();
   const shouldVirtualizeColumns = typeof virtualizeColumns === "function" ? virtualizeColumns(computedUnpinnedColumns) : virtualizeColumns != null ? virtualizeColumns : true;
-  const renderRowUnpinned = (0, import_react33.useCallback)((rowParams) => {
+  const renderRowUnpinned = (0, import_react35.useCallback)((rowParams) => {
     const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
@@ -5493,22 +5835,23 @@ function useUnpinnedRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
-var import_react34 = __toModule(require("react"));
+var import_react36 = __toModule(require("react"));
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
+var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
 var FooterCls = "_16lm1iw1";
 var InfiniteCls = "_1yeub2v0 _16lm1iw1 _16lm1iwj _16lm1iwz _16lm1iw0";
-var InfiniteClsRecipe = createRuntimeFn({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
+var InfiniteClsRecipe = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { focused: { true: "_1yeub2v2", false: "_1yeub2v3" }, focusedWithin: { true: "_1yeub2v4", false: "_1yeub2v5" }, hasPinnedStart: { true: "_1yeub2v6", false: "_1yeub2v7" }, hasPinnedEnd: { true: "_1yeub2v8", false: "_1yeub2v9" }, hasPinnedStartOverflow: { true: "_1yeub2va", false: "_1yeub2vb" }, hasPinnedEndOverflow: { true: "_1yeub2vc", false: "_1yeub2vd" } }, defaultVariants: {}, compoundVariants: [] });
 var InfiniteClsScrolling = "_1yeub2v1";
 var InfiniteClsShiftingColumns = "_16lm1iwm";
 var PinnedRowsClsVariants = { pinnedStart: "_1yeub2ve", pinnedEnd: "_1yeub2vf", overflow: "_1yeub2vg" };
-var PinnedRowsContainerClsVariants = createRuntimeFn({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
+var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn4.createRuntimeFn)({ defaultClassName: "", variantClassNames: { pinned: { start: "_1yeub2vh", end: "_1yeub2vi", false: "_1yeub2vj" } }, defaultVariants: {}, compoundVariants: [] });
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
 var DELAY = 200;
 var TableClassName = internalProps.rootClassName;
 var TableClassName__Scrolling = `${TableClassName}--scrolling`;
-var SCROLL_BOTTOM_OFFSET = 0;
+var SCROLL_BOTTOM_OFFSET = 1;
 var useOnContainerScroll = ({
   verticalVirtualBrain,
   horizontalVirtualBrain,
@@ -5524,14 +5867,15 @@ var useOnContainerScroll = ({
       bodySize
     }
   } = useInfiniteTable();
-  const timeoutIdRef = (0, import_react34.useRef)(0);
-  const scrollingRef = (0, import_react34.useRef)(false);
-  const scrollTopMaxRef = (0, import_react34.useRef)(0);
-  (0, import_react34.useEffect)(() => {
+  const { componentActions: dataSourceActions, getState: getDataSourceState } = useDataSourceContextValue();
+  const timeoutIdRef = (0, import_react36.useRef)(0);
+  const scrollingRef = (0, import_react36.useRef)(false);
+  const scrollTopMaxRef = (0, import_react36.useRef)(0);
+  (0, import_react36.useEffect)(() => {
     const { current: node } = scrollerDOMRef;
     scrollTopMaxRef.current = node.scrollHeight - node.clientHeight;
   }, [reservedContentHeight, bodySize.height]);
-  const setScrolling = (0, import_react34.useCallback)((scrolling) => {
+  const setScrolling = (0, import_react36.useCallback)((scrolling) => {
     var _a;
     const prevScrolling = scrollingRef.current;
     scrollingRef.current = scrolling;
@@ -5556,7 +5900,7 @@ var useOnContainerScroll = ({
       }
     }
   }, []);
-  const onContainerScroll = (0, import_react34.useCallback)((scrollInfo) => {
+  const onContainerScroll = (0, import_react36.useCallback)((scrollInfo) => {
     verticalVirtualBrain.setScrollPosition(scrollInfo);
     horizontalVirtualBrain.setScrollPosition(scrollInfo);
     setScrolling(true);
@@ -5566,15 +5910,15 @@ var useOnContainerScroll = ({
     domRef.current,
     setScrolling
   ]);
-  const scrollPositionRef = (0, import_react34.useRef)({
+  const scrollPositionRef = (0, import_react36.useRef)({
     scrollLeft: 0,
     scrollTop: 0
   });
-  const applyScrollHorizontal = (0, import_react34.useCallback)(({ scrollLeft }) => {
+  const applyScrollHorizontal = (0, import_react36.useCallback)(({ scrollLeft }) => {
     scrollPositionRef.current.scrollLeft = scrollLeft;
     onContainerScroll(scrollPositionRef.current);
   }, [onContainerScroll]);
-  const applyScrollVertical = (0, import_react34.useCallback)(({ scrollTop }) => {
+  const applyScrollVertical = (0, import_react36.useCallback)(({ scrollTop }) => {
     scrollPositionRef.current.scrollTop = scrollTop;
     onContainerScroll(scrollPositionRef.current);
     if (scrollTop === 0) {
@@ -5584,6 +5928,9 @@ var useOnContainerScroll = ({
     const isScrollBottom = scrollTop + offset >= scrollTopMaxRef.current;
     if (isScrollBottom) {
       onScrollToBottom == null ? void 0 : onScrollToBottom();
+      if (getDataSourceState().livePagination) {
+        dataSourceActions.scrollBottomId = Date.now();
+      }
     }
   }, [onContainerScroll, scrollToBottomOffset, onScrollToBottom, onScrollToTop]);
   return {
@@ -5594,16 +5941,16 @@ var useOnContainerScroll = ({
 
 // src/components/InfiniteTable/hooks/usePinnedRendering.tsx
 var React32 = __toModule(require("react"));
-var import_react37 = __toModule(require("react"));
+var import_react39 = __toModule(require("react"));
 
 // src/components/VirtualList/RowListWithExternalScrolling.tsx
 var React31 = __toModule(require("react"));
-var import_react36 = __toModule(require("react"));
+var import_react38 = __toModule(require("react"));
 
 // src/components/hooks/useOnMount.ts
-var import_react35 = __toModule(require("react"));
+var import_react37 = __toModule(require("react"));
 function useOnMount(domRef, props) {
-  (0, import_react35.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const { onMount, onUnmount } = props;
     const node = domRef == null ? void 0 : domRef.current;
     onMount == null ? void 0 : onMount(node);
@@ -5634,8 +5981,8 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   } = props;
-  const domRef = (0, import_react36.useRef)(null);
-  const renderItem = (0, import_react36.useCallback)((renderProps) => renderRow({
+  const domRef = (0, import_react38.useRef)(null);
+  const renderItem = (0, import_react38.useCallback)((renderProps) => renderRow({
     domRef: renderProps.domRef,
     rowHeight: renderProps.itemSize,
     rowIndex: renderProps.itemIndex
@@ -5644,7 +5991,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  (0, import_react36.useEffect)(() => {
+  (0, import_react38.useEffect)(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -5711,7 +6058,7 @@ function PinnedRowsContainer(props) {
     }
     return result;
   }, [height, rowWidth, pinning, hasOverflow]);
-  const updateScroll = (0, import_react37.useCallback)((node, scrollPosition) => {
+  const updateScroll = (0, import_react39.useCallback)((node, scrollPosition) => {
     UPDATE_SCROLL3(node, scrollPosition, hasOverflow ? pinnedScrollListener.getScrollPosition() : void 0);
   }, [hasOverflow, pinnedScrollListener]);
   const rowListProps = {
@@ -5753,7 +6100,7 @@ function PinnedRowsContainer(props) {
 }
 function useRenderPinnedRow(params) {
   const { getData, getState, columnsWidth, columns, verticalBrain } = params;
-  const renderPinnedRow = (0, import_react37.useCallback)((rowParams) => {
+  const renderPinnedRow = (0, import_react39.useCallback)((rowParams) => {
     const dataArray = getData();
     const rowInfo = dataArray[rowParams.rowIndex];
     const { showZebraRows, showHoverRows } = getState();
@@ -5867,7 +6214,7 @@ function usePinnedStartRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
-var import_react39 = __toModule(require("react"));
+var import_react41 = __toModule(require("react"));
 
 // src/components/VirtualBrain/index.ts
 var import_binary_search2 = __toModule(require_binary_search());
@@ -5883,11 +6230,13 @@ var VirtualBrain = class extends Logger {
     super(`VirtualBrain:${options.mainAxis}`);
     this.scrollPosition = initialScrollPosition2;
     this.scrollPositionOnMainAxis = 0;
+    this.destroyed = false;
     this.totalSize = 0;
     this.onScrollFns = [];
     this.onTotalSizeChangeFns = [];
     this.onRenderCountChangeFns = [];
     this.onRenderRangeChangeFns = [];
+    this.onDestroyFns = [];
     this.renderCount = 0;
     this.renderRange = {
       renderStartIndex: -1,
@@ -5984,6 +6333,12 @@ var VirtualBrain = class extends Logger {
         this.onRenderRangeChangeFns = this.onRenderRangeChangeFns.filter((f) => f !== fn);
       };
     };
+    this.onDestroy = (fn) => {
+      this.onDestroyFns.push(fn);
+      return () => {
+        this.onDestroyFns = this.onDestroyFns.filter((f) => f !== fn);
+      };
+    };
     this.update = (newCount, newItemSize, newItemSpan) => {
       const { itemSize, count, itemSpan } = this.options;
       const countChange = count !== newCount;
@@ -6180,7 +6535,13 @@ var VirtualBrain = class extends Logger {
       return result;
     };
     this.destroy = () => {
+      if (this.destroyed) {
+        return;
+      }
+      this.notifyDestroy();
       this.reset();
+      this.destroyed = true;
+      this.onDestroyFns = [];
       this.onScrollFns = [];
       this.onTotalSizeChangeFns = [];
       this.onRenderCountChangeFns = [];
@@ -6216,6 +6577,12 @@ var VirtualBrain = class extends Logger {
       fns[i](scrollPosition);
     }
   }
+  notifyDestroy() {
+    const fns = this.onDestroyFns;
+    for (let i = 0, len = fns.length; i < len; i++) {
+      fns[i]();
+    }
+  }
   notifyTotalSizeChange() {
     const totalSize = this.getTotalSize();
     const fns = this.onTotalSizeChangeFns;
@@ -6285,9 +6652,9 @@ var VirtualBrain = class extends Logger {
 };
 
 // src/components/InfiniteTable/hooks/useColumnSizeFn.ts
-var import_react38 = __toModule(require("react"));
+var import_react40 = __toModule(require("react"));
 function useColumnSizeFn(computedUnpinnedColumns) {
-  const columnSize = (0, import_react38.useCallback)((index) => {
+  const columnSize = (0, import_react40.useCallback)((index) => {
     const column = computedUnpinnedColumns[index];
     if (!column) {
       console.log("cannot find column at index", index, computedUnpinnedColumns);
@@ -6326,16 +6693,21 @@ function useYourBrain(param) {
     });
     return brain;
   });
+  (0, import_react41.useEffect)(() => {
+    return () => {
+      horizontalVirtualBrain.destroy();
+      verticalVirtualBrain.destroy();
+    };
+  }, []);
   horizontalVirtualBrain.update(computedUnpinnedColumns.length, columnSize);
   verticalVirtualBrain.update(dataArray.length, rowHeight, rowSpan);
-  globalThis.verticalVirtualBrain = verticalVirtualBrain;
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
       width: 0
     });
   }, [bodySize, verticalVirtualBrain]);
-  (0, import_react39.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
       width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
@@ -6344,29 +6716,6 @@ function useYourBrain(param) {
   return { horizontalVirtualBrain, verticalVirtualBrain };
 }
 
-// src/utils/shallowEqualObjects.ts
-function shallowEqualObjects(objA, objB) {
-  if (objA === objB) {
-    return true;
-  }
-  if (!objA || !objB) {
-    return false;
-  }
-  var aKeys = Object.keys(objA);
-  var bKeys = Object.keys(objB);
-  var len = aKeys.length;
-  if (bKeys.length !== len) {
-    return false;
-  }
-  for (var i = 0; i < len; i++) {
-    var key = aKeys[i];
-    if (objA[key] !== objB[key] || !Object.prototype.hasOwnProperty.call(objB, key)) {
-      return false;
-    }
-  }
-  return true;
-}
-
 // src/components/InfiniteTable/hooks/useListRendering.tsx
 function useListRendering(param) {
   const { computed, bodySize, columnShifts } = param;
@@ -6396,12 +6745,12 @@ function useListRendering(param) {
     pinnedEndScrollListener
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = (0, import_react40.useRef)(0);
+  const repaintIdRef = (0, import_react42.useRef)(0);
   if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
     repaintIdRef.current++;
   }
   const repaintId = repaintIdRef.current;
-  const rowSpan = (0, import_react40.useMemo)(() => {
+  const rowSpan = (0, import_react42.useMemo)(() => {
     const colsWithRowspan = computedVisibleColumns.filter((col) => typeof col.rowspan === "function");
     return colsWithRowspan.length ? ({ itemIndex }) => {
       let maxSpan = 1;
@@ -6438,12 +6787,12 @@ function useListRendering(param) {
   });
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
-  const hasVerticalScrollbar = bodySize.height < reservedContentHeight;
-  const scrollbars = (0, import_react40.useMemo)(() => ({
+  const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
+  const scrollbars = (0, import_react42.useMemo)(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     if (!bodySize.height) {
       return;
     }
@@ -6469,7 +6818,7 @@ function useListRendering(param) {
     reservedContentHeight
   });
   const { componentActions: dataSourceActions } = useDataSourceContextValue();
-  const toggleGroupRow = (0, import_react40.useCallback)((groupKeys) => {
+  const toggleGroupRow = (0, import_react42.useCallback)((groupKeys) => {
     const newState = new GroupRowsState(getDataSourceState().groupRowsState);
     newState.toggleGroupRow(groupKeys);
     dataSourceActions.groupRowsState = newState;
@@ -6504,7 +6853,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react42.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -6528,7 +6877,7 @@ function useListRendering(param) {
 
 // src/components/InfiniteTable/components/InfiniteTableLicenseFooter/index.tsx
 var React33 = __toModule(require("react"));
-var import_react41 = __toModule(require("react"));
+var import_react43 = __toModule(require("react"));
 
 // src/components/utils/decamelize.ts
 var import_decamelize = __toModule(require_decamelize());
@@ -6578,7 +6927,7 @@ var InfiniteTableLicenseFooter = React33.forwardRef(function InfiniteTableLicens
       ref.current = node;
     }
   }, []);
-  (0, import_react41.useEffect)(() => {
+  (0, import_react43.useEffect)(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -6606,7 +6955,7 @@ var InfiniteTableLicenseFooter = React33.forwardRef(function InfiniteTableLicens
 });
 
 // src/components/InfiniteTable/hooks/useLicense/useLicense.ts
-var import_react42 = __toModule(require("react"));
+var import_react44 = __toModule(require("react"));
 
 // src/components/InfiniteTable/hooks/useLicense/crc32.ts
 var DEFAULT_ReversedPolynomial = 3988292384;
@@ -6755,11 +7104,11 @@ var SANDBOX_REGEX = /(https):\/\/\d+\-\d+\-\d\-(sandpack\.codesandbox\.io)/g;
 var origin = typeof window !== "undefined" ? window.location.origin : "";
 var [_fullUrl, protocol, sandboxUrl] = Array.from(SANDBOX_REGEX.exec(origin) || []);
 var isInsideSandbox = protocol === "https" && sandboxUrl === "sandpack.codesandbox.io";
-var useLicense = (licenseKey) => {
-  const valid = (0, import_react42.useMemo)(() => {
+var useLicense = (licenseKey = "") => {
+  const valid = (0, import_react44.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.5"
+      version: "0.0.9"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -6771,8 +7120,8 @@ var useLicense = (licenseKey) => {
 
 // src/components/CSSVariableWatch.tsx
 var React34 = __toModule(require("react"));
-var import_react43 = __toModule(require("react"));
-var error2 = err("CSSVariableWatch");
+var import_react45 = __toModule(require("react"));
+var error = err("CSSVariableWatch");
 var debug5 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
   position: "absolute",
@@ -6784,7 +7133,7 @@ var WRAPPER_STYLE = {
   overflow: "hidden"
 };
 var useCSSVariableWatch = (params) => {
-  const lastValueRef = (0, import_react43.useRef)(0);
+  const lastValueRef = (0, import_react45.useRef)(0);
   const onResize = React34.useCallback(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
@@ -6799,12 +7148,12 @@ var useCSSVariableWatch = (params) => {
       debug5(`Variable ${params.varName} found and equals ${value}.`);
       params.onChange(value);
     } else {
-      error2(`Specified variable ${params.varName} not found or does not have a numeric value.`);
+      error(`Specified variable ${params.varName} not found or does not have a numeric value.`);
     }
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = (0, import_react43.useRef)(null);
+  const domRef = (0, import_react45.useRef)(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
@@ -6946,9 +7295,15 @@ var InfiniteTableRoot = getComponentStateRoot({
 });
 var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
   var _a;
-  const { componentState, getComputed, computed } = useInfiniteTable();
   const {
-    componentState: { dataArray, loading }
+    componentState,
+    getComputed,
+    computed,
+    getState: getInfiniteTableState
+  } = useInfiniteTable();
+  const {
+    componentState: { dataArray, loading },
+    getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
     domRef,
@@ -6985,6 +7340,15 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
+  React36.useLayoutEffect(() => {
+    const dataSourceState = getDataSourceState();
+    const { onScrollbarsChange } = getInfiniteTableState();
+    const { notifyScrollbarsChange } = dataSourceState;
+    if (onScrollbarsChange && dataSourceState.updatedAt && dataSourceState.dataArray.length) {
+      onScrollbarsChange(scrollbars);
+    }
+    notifyScrollbarsChange(scrollbars);
+  }, [scrollbars]);
   return /* @__PURE__ */ React36.createElement("div", __spreadValues({
     ref: domRef
   }, domProps), header ? /* @__PURE__ */ React36.createElement(TableHeaderWrapper, {
@@ -7016,7 +7380,7 @@ var InfiniteTableComponent = React36.memo(function InfiniteTableComponent2() {
 });
 function InfiniteTableContextProvider() {
   const { componentActions, componentState } = useComponentState();
-  const { scrollerDOMRef } = componentState;
+  const { scrollerDOMRef, scrollTopId } = componentState;
   const computed = useComputed();
   const getComputed = useLatest(computed);
   const getState = useLatest(componentState);
@@ -7051,6 +7415,11 @@ function InfiniteTableContextProvider() {
       componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
+  React36.useEffect(() => {
+    if (scrollerDOMRef.current) {
+      scrollerDOMRef.current.scrollTop = 0;
+    }
+  }, [scrollTopId, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
   return /* @__PURE__ */ React36.createElement(TableContext2.Provider, {
     value: contextValue