@infinite-table/infinite-react 0.0.8 → 0.0.9

package/index.esm.js

@@ -48,26 +48,6 @@ var __reExport = (target, module, desc) => {
 var __toModule = (module) => {
   return __reExport(__markAsModule(__defProp(module != null ? __create(__getProtoOf(module)) : {}, "default", module && module.__esModule && "default" in module ? { get: () => module.default, enumerable: true } : { value: module, enumerable: true })), module);
 };
-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({
@@ -673,7 +653,8 @@ import {
   StrictMode,
   createElement as createElement33,
   memo as memo13,
-  useEffect as useEffect22
+  useEffect as useEffect24,
+  useLayoutEffect as useLayoutEffect6
 } from "react";
 
 // src/components/InfiniteTable/internalProps.ts
@@ -756,7 +737,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;
@@ -771,9 +752,9 @@ 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
@@ -786,6 +767,9 @@ function toMap(mapOrObject) {
   }
   return new Map(Object.entries(mapOrObject));
 }
+function toColumnTypesMap(mapOrObject) {
+  return toMap(mapOrObject);
+}
 function initSetupState() {
   const columnsGeneratedForGrouping = new Map();
   return {
@@ -819,6 +803,7 @@ var forwardProps = () => {
       var _a;
       return (_a = toMap(columns)) != null ? _a : new Map();
     },
+    scrollTopId: 1,
     components: 1,
     loadingText: 1,
     pivotColumns: 1,
@@ -844,6 +829,7 @@ 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,
@@ -869,7 +855,7 @@ var forwardProps = () => {
     },
     columnTypes: (columnTypes) => {
       var _a;
-      return (_a = toMap(columnTypes)) != null ? _a : new Map();
+      return (_a = toColumnTypesMap(columnTypes)) != null ? _a : new Map();
     },
     columnAggregations: (columnAggregations) => columnAggregations != null ? columnAggregations : new Map(),
     collapsedColumnGroups: (collapsedColumnGroups) => collapsedColumnGroups != null ? collapsedColumnGroups : new Map(),
@@ -1512,28 +1498,28 @@ var useRerender = () => {
 
 // src/components/hooks/useInterceptedMap.ts
 import { useEffect as useEffect2 } from "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();
       }
@@ -1542,13 +1528,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;
     }
   };
 }
@@ -1568,16 +1554,16 @@ var rafFn = (fn) => {
 };
 
 // src/components/InfiniteTable/hooks/useRerenderOnKeyChange.ts
-var useRerenderOnKeyChange = (map) => {
+var useRerenderOnKeyChange = (map2) => {
   const [renderId, rerender] = useRerender();
   useEffect3(() => {
     const update = rafFn(rerender);
-    return interceptMap(map, {
+    return interceptMap(map2, {
       set: update,
       clear: update,
       delete: update
     });
-  }, [map]);
+  }, [map2]);
   return renderId;
 };
 
@@ -1691,7 +1677,7 @@ var useComputedVisibleColumns = ({
 var sortAscending = (a, b) => a - b;
 
 // src/components/InfiniteTable/hooks/useComputed.ts
-import { useCallback as useCallback5, useState as useState4 } from "react";
+import { useCallback as useCallback5, useState as useState5 } from "react";
 
 // src/components/InfiniteTable/hooks/useColumnAggregations.ts
 import { useEffect as useEffect5 } from "react";
@@ -1814,7 +1800,7 @@ function getComponentStateContext() {
   }
   return ComponentContext = createContext3(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;
@@ -1826,6 +1812,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);
@@ -1938,7 +1927,7 @@ function getComponentStateRoot(config) {
     const getComponentState = useLatest(state);
     const { allowedControlledPropOverrides } = config;
     const actions = useMemo3(() => {
-      const generatedActions = getReducerActions(dispatch, getComponentState, getProps, propsToForward, allowedControlledPropOverrides);
+      const generatedActions = getReducerGeneratedActions(dispatch, getComponentState, getProps, propsToForward, allowedControlledPropOverrides, config.interceptActions);
       return generatedActions;
     }, [
       dispatch,
@@ -2107,7 +2096,7 @@ function useColumnGroups() {
 }
 
 // src/components/InfiniteTable/hooks/useColumnsWhen.ts
-import { useEffect as useEffect8, useMemo as useMemo5 } from "react";
+import { useEffect as useEffect10, useMemo as useMemo5 } from "react";
 
 // src/components/InfiniteTable/state/getComputedPivotColumnsFromDataSourcePivotColumns.tsx
 import {
@@ -2371,62 +2360,231 @@ import {
   createElement as createElement6
 } from "react";
 
-// src/components/DataSource/privateHooks/useLoadData.ts
-import { useLayoutEffect as useLayoutEffect3 } from "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
+import { useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState4 } from "react";
+
+// src/components/hooks/useEffectWithChanges.ts
+import { useEffect as useEffect8, useRef as useRef5 } from "react";
+function useEffectWithChanges(fn, deps) {
+  const prevRef = useRef5({});
+  const oldValuesRef = useRef5({});
+  const oldValues = oldValuesRef.current;
+  const changesRef = useRef5({});
+  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;
+  useEffect8(() => {
+    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;
-      });
-    }
-  };
   useLayoutEffect3(() => {
-    loadData(data);
+    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] = useState4({
+    vertical: false,
+    horizontal: false
+  });
+  const scrollbarsRef = useRef6(scrollbars);
+  useEffect9(() => {
+    notifyScrollbarsChange.onChange((scrollbars2) => {
+      if (!scrollbars2) {
+        return;
+      }
+      scrollbarsRef.current = scrollbars2;
+      setScrollbars(scrollbars2);
+    });
+    return () => notifyScrollbarsChange.destroy();
+  }, [notifyScrollbarsChange]);
+  const [cursorId, updateCursorId] = useState4(void 0);
+  useEffect9(() => {
+    const frameId = requestAnimationFrame(() => {
+      var _a;
+      if (!((_a = scrollbarsRef.current) == null ? void 0 : _a.vertical)) {
+        updateCursorId(livePaginationCursor);
+      }
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [livePaginationCursor]);
+  useEffect9(() => {
+    const { livePaginationCursor: livePaginationCursor2, livePagination } = getComponentState();
+    if (!scrollbars.vertical && livePagination) {
+      updateCursorId(livePaginationCursor2);
+    }
+  }, [scrollbars.vertical]);
+  useEffect9(() => {
+    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
@@ -2480,9 +2638,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++;
@@ -2548,14 +2706,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;
@@ -2600,9 +2758,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) {
@@ -2641,12 +2799,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);
         });
       }
     });
@@ -2812,14 +2970,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,
@@ -2836,12 +3048,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 : [],
@@ -2854,10 +3074,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;
+    }
   };
 }
 
@@ -3091,80 +3321,6 @@ function enhancedFlatten(param) {
   };
 }
 
-// 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/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);
-    }
-    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/utils/groupAndPivot/getPivotColumnsAndColumnGroups.ts
 function getPivotColumnsAndColumnGroups(deepMap, pivotBy, pivotTotalColumnPosition) {
   const pivotLength = pivotBy.length;
@@ -3289,7 +3445,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"
@@ -3359,7 +3515,9 @@ function concludeReducer(params) {
   }
   state.dataArray = rowInfoDataArray;
   state.reducedAt = now;
-  globalThis.state = state;
+  if (true) {
+    globalThis.state = state;
+  }
   return state;
 }
 
@@ -3382,7 +3540,8 @@ var DataSourceRoot = getComponentStateRoot({
   initSetupState: initSetupState2,
   forwardProps: forwardProps3,
   concludeReducer,
-  mapPropsToState: mapPropsToState2
+  mapPropsToState: mapPropsToState2,
+  interceptActions: getInterceptActions()
 });
 function DataSourceCmp({ children }) {
   const DataSourceContext = getDataSourceContext();
@@ -3442,10 +3601,10 @@ function useColumnsWhen() {
     componentState: { groupRenderStrategy, pivotTotalColumnPosition }
   } = useComponentState();
   const groupRowsMap = useGroupRowsMap(groupRowsBy);
-  useEffect8(() => {
+  useEffect10(() => {
     dataSourceActions.generateGroupRows = groupRenderStrategy !== "inline";
   }, [groupRenderStrategy]);
-  useEffect8(() => {
+  useEffect10(() => {
     dataSourceActions.pivotTotalColumnPosition = pivotTotalColumnPosition;
   }, [pivotTotalColumnPosition]);
   useColumnsWhenInlineGroupRenderStrategy(groupRowsMap);
@@ -3508,7 +3667,7 @@ function useColumnsWhenInlineGroupRenderStrategy(groupRowsMap) {
     });
     return computedColumns.size === 0 ? void 0 : computedColumns;
   }
-  useEffect8(() => {
+  useEffect10(() => {
     const update = () => {
       componentActions.columnsWhenInlineGroupRenderStrategy = computeColumnsWhenInlineGroupRenderStrategy(columns, groupRowsMap, groupRenderStrategy, toggleGroupRow);
     };
@@ -3534,7 +3693,7 @@ function useColumnsWhenPivoting() {
     }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect8(() => {
+  useEffect10(() => {
     const computedPivotColumns = getComputedPivotColumnsFromDataSourcePivotColumns(pivotColumns, {
       pivotColumn,
       pivotRowLabelsColumn,
@@ -3555,7 +3714,7 @@ function useColumnsWhenGrouping() {
     componentState: { columns, groupColumn, groupRenderStrategy, pivotColumns }
   } = useComponentState();
   const toggleGroupRow = useToggleGroupRow();
-  useEffect8(() => {
+  useEffect10(() => {
     if (pivotColumns) {
       return;
     }
@@ -3592,7 +3751,7 @@ function useHideEmptyGroupColumns(groupRowsMap) {
       groupRenderStrategy
     }
   } = useComponentState();
-  useEffect8(() => {
+  useEffect10(() => {
     if (groupRenderStrategy === "single-column") {
       return;
     }
@@ -3696,7 +3855,7 @@ function useComputed() {
     columnTypes,
     bodySize
   } = componentState;
-  useState4(() => {
+  useState5(() => {
     componentState.onRowHeightCSSVarChange.onChange((rowHeight) => {
       if (rowHeight) {
         componentActions.rowHeight = rowHeight;
@@ -3714,7 +3873,8 @@ function useComputed() {
   useColumnsWhen();
   const setSortInfo = useCallback5((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 {
@@ -3882,14 +4042,14 @@ import {
   createElement as createElement15,
   memo as memo6
 } from "react";
-import { useCallback as useCallback8, useEffect as useEffect12, useRef as useRef7 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect14, useRef as useRef9 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 import {
   Fragment as Fragment2,
   createElement as createElement11
 } from "react";
-import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect12, useRef as useRef8 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableCell.tsx
 import {
@@ -3970,8 +4130,8 @@ var import_binary_search = __toModule(require_binary_search());
 import {
   useCallback as useCallback6,
   useMemo as useMemo6,
-  useRef as useRef5,
-  useState as useState5
+  useRef as useRef7,
+  useState as useState6
 } from "react";
 
 // src/components/InfiniteTable/utils/moveXatY.ts
@@ -4006,13 +4166,13 @@ var useColumnPointerEvents = ({
   columns,
   computedRemainingSpace
 }) => {
-  const [draggingDiff, setDraggingDiff] = useState5(null);
-  const [proxyOffset, setProxyOffset] = useState5(null);
-  const breakpointsRef = useRef5([]);
-  const pointerMoveRef = useRef5(null);
-  const didDragRef = useRef5(false);
-  const initialClientPos = useRef5(null);
-  const currentDropIndexRef = useRef5(null);
+  const [draggingDiff, setDraggingDiff] = useState6(null);
+  const [proxyOffset, setProxyOffset] = useState6(null);
+  const breakpointsRef = useRef7([]);
+  const pointerMoveRef = useRef7(null);
+  const didDragRef = useRef7(false);
+  const initialClientPos = useRef7(null);
+  const currentDropIndexRef = useRef7(null);
   const dragging = draggingDiff != null;
   const { componentActions, computed } = useInfiniteTable();
   const { computedColumnOrder } = computed;
@@ -4025,7 +4185,7 @@ var useColumnPointerEvents = ({
       columnWidth: column.computedWidth
     };
   }, [columns, columnId, column]);
-  let cursorRef = useRef5("auto");
+  let cursorRef = useRef7("auto");
   const onPointerDown = useCallback6((e) => {
     const target = domRef.current;
     cursorRef.current = target.style.cursor;
@@ -4166,7 +4326,7 @@ import { createPortal } from "react-dom";
 import {
   createElement as createElement10
 } from "react";
-import { useEffect as useEffect9, useState as useState6 } from "react";
+import { useEffect as useEffect11, useState as useState7 } from "react";
 var defaultLineStyle = {
   marginTop: 2,
   marginBottom: 2,
@@ -4174,8 +4334,8 @@ var defaultLineStyle = {
 };
 function SortIcon(props) {
   var _a;
-  const [rendered, setRendered] = useState6(true);
-  const [opacity, setOpacity] = useState6(0);
+  const [rendered, setRendered] = useState7(true);
+  const [opacity, setOpacity] = useState7(0);
   const { direction, lineWidth = 1, style, className, index } = props;
   const showIndex = index != null && index > 0;
   const size = (_a = props.size) != null ? _a : 16;
@@ -4189,7 +4349,7 @@ function SortIcon(props) {
   }), props.lineStyle), {
     opacity
   });
-  useEffect9(() => {
+  useEffect11(() => {
     const newOpacity = direction != 0 ? 1 : 0;
     if (!rendered && newOpacity) {
       setRendered(true);
@@ -4266,7 +4426,7 @@ function InfiniteTableHeaderCell(props) {
     className: `${baseCls}__sort-icon ${HeaderSortIconCls}`,
     direction: column.computedSorted ? column.computedSortedAsc ? 1 : -1 : 0
   });
-  const domRef = useRef6(null);
+  const domRef = useRef8(null);
   const ref = useCallback7((node) => {
     var _a2;
     domRef.current = node;
@@ -4276,7 +4436,7 @@ function InfiniteTableHeaderCell(props) {
     computed: { computedRemainingSpace },
     componentState: { portalDOMRef }
   } = useInfiniteTable();
-  useEffect10(() => {
+  useEffect12(() => {
     let clearOnResize = null;
     const node = domRef.current;
     if (onResize && node) {
@@ -4332,7 +4492,7 @@ import {
   createElement as createElement14,
   memo as memo5
 } from "react";
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect13 } from "react";
 
 // src/components/RawList/AvoidReactDiff.tsx
 import {
@@ -4340,9 +4500,9 @@ import {
   createElement as createElement12,
   memo as memo4
 } from "react";
-import { useLayoutEffect as useLayoutEffect4, useState as useState7 } from "react";
+import { useLayoutEffect as useLayoutEffect4, useState as useState8 } from "react";
 function AvoidReactDiffFn(props) {
-  const [children, setChildren] = useState7(props.updater.get());
+  const [children, setChildren] = useState8(props.updater.get());
   useLayoutEffect4(() => {
     const remove = props.updater.onChange((children2) => {
       setChildren(children2);
@@ -4375,10 +4535,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);
         }
@@ -4683,7 +4843,7 @@ function RawListFn(props) {
     debugChannel
   });
   const getRenderItem = useLatest(renderItem);
-  useEffect11(() => {
+  useEffect13(() => {
     const renderRange = brain.getRenderRange();
     renderer.renderRange(renderRange, {
       renderItem,
@@ -4691,7 +4851,7 @@ function RawListFn(props) {
       onRender: onRenderUpdater
     });
   }, [brain, renderItem, onRenderUpdater]);
-  useEffect11(() => {
+  useEffect13(() => {
     const remove = brain.onRenderRangeChange((renderRange) => {
       renderer.renderRange(renderRange, {
         force: false,
@@ -4733,14 +4893,14 @@ function InfiniteTableHeaderFn(props) {
       columns: computedVisibleColumnsMap
     });
   }, [computedVisibleColumnsMap, columns, repaintId, headerHeight]);
-  useEffect12(() => {
+  useEffect14(() => {
     const onScroll = (scrollPosition) => {
       domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
     };
     const removeOnScroll = brain.onScroll(onScroll);
     return removeOnScroll;
   }, [brain]);
-  const domRef = useRef7(null);
+  const domRef = useRef9(null);
   const headerCls = HeaderClsRecipe({
     pinned: pinning,
     overflow: false,
@@ -4763,7 +4923,7 @@ import {
   createElement as createElement18,
   memo as memo7,
   useMemo as useMemo8,
-  useRef as useRef8
+  useRef as useRef10
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/renderColumnHeaderGroups.tsx
@@ -4773,7 +4933,7 @@ import {
 
 // 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) => {
@@ -4791,7 +4951,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;
@@ -4813,7 +4973,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);
@@ -4830,7 +4990,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;
@@ -4842,7 +5002,7 @@ function buildColumnAndGroupTree(columns, columnGroups, columnGroupsDepthsMap) {
       groupOffset += itemWidth;
     }
   });
-  map.clear();
+  map2.clear();
   temporaryMap.clear();
   return result;
 }
@@ -4941,7 +5101,7 @@ function renderColumnHeaderGroups(config) {
 }
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderUnvirtualized.tsx
-import { useEffect as useEffect13 } from "react";
+import { useEffect as useEffect15 } from "react";
 var { rootClassName: rootClassName5 } = internalProps;
 var TableHeaderClassName2 = `${rootClassName5}Header`;
 var UPDATE_SCROLL = (node, scrollPosition) => {
@@ -4974,7 +5134,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
     },
     computed: { computedVisibleColumnsMap: columnsMap }
   } = useInfiniteTable();
-  const domRef = useRef8(null);
+  const domRef = useRef10(null);
   const hasColumnGroups = computedColumnGroups.size > 0;
   const columnHeaderGroups = useMemo8(() => {
     return hasColumnGroups ? renderColumnHeaderGroups({
@@ -5007,7 +5167,7 @@ function InfiniteTableHeaderUnvirtualizedFn(props) {
   if (totalWidth != null) {
     style.width = availableWidth;
   }
-  useEffect13(() => {
+  useEffect15(() => {
     const scroller = brain || scrollListener;
     if (!scroller || !scrollable) {
       return;
@@ -5124,12 +5284,12 @@ import {
   createElement as createElement20,
   forwardRef as forwardRef2
 } from "react";
-import { useRef as useRef9 } from "react";
+import { useRef as useRef11 } from "react";
 
 // src/components/hooks/useOnScroll.ts
-import { useEffect as useEffect14 } from "react";
+import { useEffect as useEffect16 } from "react";
 var useOnScroll = (domRef, onScroll) => {
-  useEffect14(() => {
+  useEffect16(() => {
     const domNode = domRef == null ? void 0 : domRef.current;
     const scrollFn = (event) => {
       const node = event.target;
@@ -5175,7 +5335,7 @@ var VirtualScrollContainer = forwardRef2(function VirtualScrollContainer2(props,
     className,
     style
   } = props;
-  const domRef = ref != null ? ref : useRef9(null);
+  const domRef = ref != null ? ref : useRef11(null);
   useOnScroll(domRef, onContainerScroll);
   return /* @__PURE__ */ createElement20("div", {
     ref: domRef,
@@ -5209,7 +5369,7 @@ function SpacePlaceholderFn(props) {
 var SpacePlaceholder = memo8(SpacePlaceholderFn);
 
 // src/components/InfiniteTable/hooks/useListRendering.tsx
-import { useCallback as useCallback17, useEffect as useEffect20, useMemo as useMemo10, useRef as useRef15 } from "react";
+import { useCallback as useCallback17, useEffect as useEffect22, useMemo as useMemo10, useRef as useRef17 } from "react";
 
 // src/components/InfiniteTable/hooks/useUnpinnedRendering.tsx
 import {
@@ -5228,7 +5388,7 @@ import {
   Fragment as Fragment4,
   createElement as createElement22
 } from "react";
-import { useRef as useRef10, useEffect as useEffect15, useState as useState8 } from "react";
+import { useRef as useRef12, useEffect as useEffect17, useState as useState9 } from "react";
 
 // src/components/VirtualList/VirtualList.css.ts
 var VirtualListCls = "mlx2t0 _16lm1iw0";
@@ -5271,11 +5431,11 @@ var VirtualList = (props) => {
     "onContainerScroll",
     "children"
   ]);
-  const domRef = useRef10(null);
+  const domRef = useRef12(null);
   const [, rerender] = useRerender();
-  const [totalSize, setTotalSize] = useState8(0);
-  const renderCountRef = useRef10(0);
-  useEffect15(() => {
+  const [totalSize, setTotalSize] = useState9(0);
+  const renderCountRef = useRef12(0);
+  useEffect17(() => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
       if (true) {
@@ -5294,7 +5454,7 @@ var VirtualList = (props) => {
       removeOnTotalSizeChange();
     };
   }, [virtualBrain]);
-  useEffect15(() => {
+  useEffect17(() => {
     const onScroll = (scrollPosition) => {
       UPDATE_SCROLL2(domRef.current, scrollPosition);
     };
@@ -5352,7 +5512,7 @@ import {
   memo as memo10,
   useCallback as useCallback11
 } from "react";
-import { useRef as useRef12 } from "react";
+import { useRef as useRef14 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import {
@@ -5461,7 +5621,7 @@ var InfiniteTableColumnCell = memo9(InfiniteTableColumnCellFn);
 // src/components/InfiniteTable/components/InfiniteTableRow/useRowDOMProps.ts
 import {
   useCallback as useCallback10,
-  useRef as useRef11
+  useRef as useRef13
 } from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableRowClassName.ts
@@ -5487,7 +5647,7 @@ function useRowDOMProps(props, rowProps, rowStyle, rowClassName, groupRenderStra
     domRef: domRefFromProps,
     rowInfo
   } = props;
-  const domRef = useRef11(null);
+  const domRef = useRef13(null);
   const rowDOMRef = useCallback10((node) => {
     domRefFromProps(node);
     domRef.current = node;
@@ -5590,7 +5750,7 @@ function InfiniteTableRowFn(props) {
     width: rowWidth,
     height: rowHeight
   }, domProps.style);
-  const renderCellRef = useRef12(null);
+  const renderCellRef = useRef14(null);
   const renderCell = useCallback11(({ domRef, itemIndex }) => {
     const column = columns[itemIndex];
     if (!column) {
@@ -5763,7 +5923,7 @@ function useUnpinnedRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useOnContainerScroll.ts
-import { useCallback as useCallback13, useEffect as useEffect16, useRef as useRef13 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect18, useRef as useRef15 } from "react";
 
 // src/components/InfiniteTable/InfiniteCls.css.ts
 var import_createRuntimeFn4 = __toModule(require_vanilla_extract_recipes_createRuntimeFn_cjs());
@@ -5779,7 +5939,7 @@ var PinnedRowsContainerClsVariants = (0, import_createRuntimeFn4.createRuntimeFn
 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,
@@ -5795,10 +5955,11 @@ var useOnContainerScroll = ({
       bodySize
     }
   } = useInfiniteTable();
-  const timeoutIdRef = useRef13(0);
-  const scrollingRef = useRef13(false);
-  const scrollTopMaxRef = useRef13(0);
-  useEffect16(() => {
+  const { componentActions: dataSourceActions, getState: getDataSourceState } = useDataSourceContextValue();
+  const timeoutIdRef = useRef15(0);
+  const scrollingRef = useRef15(false);
+  const scrollTopMaxRef = useRef15(0);
+  useEffect18(() => {
     const { current: node } = scrollerDOMRef;
     scrollTopMaxRef.current = node.scrollHeight - node.clientHeight;
   }, [reservedContentHeight, bodySize.height]);
@@ -5837,7 +5998,7 @@ var useOnContainerScroll = ({
     domRef.current,
     setScrolling
   ]);
-  const scrollPositionRef = useRef13({
+  const scrollPositionRef = useRef15({
     scrollLeft: 0,
     scrollTop: 0
   });
@@ -5855,6 +6016,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 {
@@ -5874,12 +6038,12 @@ import { useCallback as useCallback15 } from "react";
 import {
   createElement as createElement28
 } from "react";
-import { useEffect as useEffect18, useCallback as useCallback14, useRef as useRef14 } from "react";
+import { useEffect as useEffect20, useCallback as useCallback14, useRef as useRef16 } from "react";
 
 // src/components/hooks/useOnMount.ts
-import { useEffect as useEffect17 } from "react";
+import { useEffect as useEffect19 } from "react";
 function useOnMount(domRef, props) {
-  useEffect17(() => {
+  useEffect19(() => {
     const { onMount, onUnmount } = props;
     const node = domRef == null ? void 0 : domRef.current;
     onMount == null ? void 0 : onMount(node);
@@ -5910,7 +6074,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   } = props;
-  const domRef = useRef14(null);
+  const domRef = useRef16(null);
   const renderItem = useCallback14((renderProps) => renderRow({
     domRef: renderProps.domRef,
     rowHeight: renderProps.itemSize,
@@ -5920,7 +6084,7 @@ var RowListWithExternalScrolling = (props) => {
     onMount,
     onUnmount
   });
-  useEffect18(() => {
+  useEffect20(() => {
     const onScroll = (scrollPosition) => {
       const node = domRef.current;
       if (node) {
@@ -6143,7 +6307,7 @@ function usePinnedStartRendering(params) {
 }
 
 // src/components/InfiniteTable/hooks/useYourBrain.ts
-import { useEffect as useEffect19 } from "react";
+import { useEffect as useEffect21 } from "react";
 
 // src/components/VirtualBrain/index.ts
 var import_binary_search2 = __toModule(require_binary_search());
@@ -6622,7 +6786,7 @@ function useYourBrain(param) {
     });
     return brain;
   });
-  useEffect19(() => {
+  useEffect21(() => {
     return () => {
       horizontalVirtualBrain.destroy();
       verticalVirtualBrain.destroy();
@@ -6630,13 +6794,13 @@ function useYourBrain(param) {
   }, []);
   horizontalVirtualBrain.update(computedUnpinnedColumns.length, columnSize);
   verticalVirtualBrain.update(dataArray.length, rowHeight, rowSpan);
-  useEffect19(() => {
+  useEffect21(() => {
     verticalVirtualBrain.setAvailableSize({
       height: bodySize.height,
       width: 0
     });
   }, [bodySize, verticalVirtualBrain]);
-  useEffect19(() => {
+  useEffect21(() => {
     horizontalVirtualBrain.setAvailableSize({
       height: 0,
       width: Math.max(bodySize.width - computedPinnedStartWidth - computedPinnedEndWidth, 0)
@@ -6645,29 +6809,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;
@@ -6697,7 +6838,7 @@ function useListRendering(param) {
     pinnedEndScrollListener
   } = componentState;
   const prevDataSourceTimestamp = usePrevious(dataSourceState.updatedAt);
-  const repaintIdRef = useRef15(0);
+  const repaintIdRef = useRef17(0);
   if (!shallowEqualObjects(prevComputed, computed) || prevDataSourceTimestamp !== dataSourceState.updatedAt) {
     repaintIdRef.current++;
   }
@@ -6739,12 +6880,12 @@ function useListRendering(param) {
   });
   const hasHorizontalScrollbar = computedUnpinnedColumnsWidth > bodySize.width - computedPinnedStartColumnsWidth - computedPinnedEndColumnsWidth;
   const reservedContentHeight = verticalVirtualBrain.getTotalSize() + (hasHorizontalScrollbar ? getScrollbarWidth() : 0);
-  const hasVerticalScrollbar = bodySize.height < reservedContentHeight;
+  const hasVerticalScrollbar = bodySize.height > 0 && bodySize.height < reservedContentHeight;
   const scrollbars = useMemo10(() => ({
     vertical: hasVerticalScrollbar,
     horizontal: hasHorizontalScrollbar
   }), [hasVerticalScrollbar, hasHorizontalScrollbar]);
-  useEffect20(() => {
+  useEffect22(() => {
     if (!bodySize.height) {
       return;
     }
@@ -6805,7 +6946,7 @@ function useListRendering(param) {
     computedUnpinnedColumns
   });
   const [, rerender] = useRerender();
-  useEffect20(() => {
+  useEffect22(() => {
     rerender();
   }, [dataSourceState]);
   const { pinnedStartList, pinnedStartScrollbarPlaceholder } = usePinnedStartRendering(pinnedRenderingParams);
@@ -6832,9 +6973,9 @@ import {
   createElement as createElement30,
   forwardRef as forwardRef3,
   useCallback as useCallback18,
-  useRef as useRef16
+  useRef as useRef18
 } from "react";
-import { useEffect as useEffect21 } from "react";
+import { useEffect as useEffect23 } from "react";
 
 // src/components/utils/decamelize.ts
 var import_decamelize = __toModule(require_decamelize());
@@ -6872,7 +7013,7 @@ var enforceStyle = (node, style) => {
 };
 var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter2(props, ref) {
   const { rootClassName: rootClassName12 } = useInternalProps();
-  const domRef = useRef16(null);
+  const domRef = useRef18(null);
   const domCallback = useCallback18((node) => {
     domRef.current = node;
     if (!ref) {
@@ -6884,7 +7025,7 @@ var InfiniteTableLicenseFooter = forwardRef3(function InfiniteTableLicenseFooter
       ref.current = node;
     }
   }, []);
-  useEffect21(() => {
+  useEffect23(() => {
     const forceStyle = () => {
       requestAnimationFrame(() => {
         var _a;
@@ -7065,7 +7206,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.0.8"
+      version: "0.0.9"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7081,7 +7222,7 @@ import {
   useCallback as useCallback19,
   useLayoutEffect as useLayoutEffect5
 } from "react";
-import { useRef as useRef17 } from "react";
+import { useRef as useRef19 } from "react";
 var error = err("CSSVariableWatch");
 var debug5 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
@@ -7094,7 +7235,7 @@ var WRAPPER_STYLE = {
   overflow: "hidden"
 };
 var useCSSVariableWatch = (params) => {
-  const lastValueRef = useRef17(0);
+  const lastValueRef = useRef19(0);
   const onResize = useCallback19(({ height }) => {
     if (height && height !== lastValueRef.current) {
       lastValueRef.current = height;
@@ -7114,7 +7255,7 @@ var useCSSVariableWatch = (params) => {
   }, []);
 };
 var CSSVariableWatch = (props) => {
-  const domRef = useRef17(null);
+  const domRef = useRef19(null);
   useCSSVariableWatch(__spreadProps(__spreadValues({}, props), {
     ref: domRef
   }));
@@ -7259,9 +7400,15 @@ var InfiniteTableRoot = getComponentStateRoot({
 });
 var InfiniteTableComponent = memo13(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,
@@ -7298,6 +7445,15 @@ var InfiniteTableComponent = memo13(function InfiniteTableComponent2() {
   const licenseValid = useLicense(licenseKey);
   const domProps = useDOMProps(componentState.domProps);
   const LoadMaskCmp = (_a = components == null ? void 0 : components.LoadMask) != null ? _a : LoadMask;
+  useLayoutEffect6(() => {
+    const dataSourceState = getDataSourceState();
+    const { onScrollbarsChange } = getInfiniteTableState();
+    const { notifyScrollbarsChange } = dataSourceState;
+    if (onScrollbarsChange && dataSourceState.updatedAt && dataSourceState.dataArray.length) {
+      onScrollbarsChange(scrollbars);
+    }
+    notifyScrollbarsChange(scrollbars);
+  }, [scrollbars]);
   return /* @__PURE__ */ createElement33("div", __spreadValues({
     ref: domRef
   }, domProps), header ? /* @__PURE__ */ createElement33(TableHeaderWrapper, {
@@ -7329,7 +7485,7 @@ var InfiniteTableComponent = memo13(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);
@@ -7358,12 +7514,17 @@ function InfiniteTableContextProvider() {
     }
     componentActions.bodySize = bodySize;
   }, { earlyAttach: true });
-  useEffect22(() => {
+  useEffect24(() => {
     return () => {
       componentState.onRowHeightCSSVarChange.destroy();
       componentState.onHeaderHeightCSSVarChange.destroy();
     };
   }, []);
+  useEffect24(() => {
+    if (scrollerDOMRef.current) {
+      scrollerDOMRef.current.scrollTop = 0;
+    }
+  }, [scrollTopId, scrollerDOMRef]);
   const TableContext2 = getInfiniteTableContext();
   return /* @__PURE__ */ createElement33(TableContext2.Provider, {
     value: contextValue
@@ -7388,6 +7549,7 @@ export {
   getComponentStateRoot,
   group,
   interceptMap,
+  multisort,
   useComponentState,
   useDataSource
 };