@infinite-table/infinite-react 0.1.1 → 0.1.2

package/index.d.ts

@@ -158,7 +158,7 @@ declare module "components/hooks/useComponentState" {
     type ComponentStateRootConfig<T_PROPS, COMPONENT_MAPPED_STATE, COMPONENT_SETUP_STATE = {}, COMPONENT_DERIVED_STATE = {}, T_ACTIONS = {}, T_PARENT_STATE = {}> = {
         debugName?: string;
         initSetupState?: () => COMPONENT_SETUP_STATE;
-        forwardProps?: () => ForwardPropsToStateFnResult<T_PROPS, COMPONENT_MAPPED_STATE>;
+        forwardProps?: (setupState: COMPONENT_SETUP_STATE) => ForwardPropsToStateFnResult<T_PROPS, COMPONENT_MAPPED_STATE>;
         allowedControlledPropOverrides?: Record<keyof T_PROPS, true>;
         interceptActions?: ComponentInterceptedActions<COMPONENT_MAPPED_STATE & COMPONENT_DERIVED_STATE & COMPONENT_SETUP_STATE>;
         mapPropsToState?: (params: {
@@ -212,7 +212,9 @@ declare module "components/DataSource/types" {
         groupBy?: DataSourcePropGroupBy<T>;
         pivotBy?: DataSourcePropPivotBy<T>;
         livePaginationCursor?: DataSourceLivePaginationCursorValue;
+        changes?: DataSourceDataParamsChanges<T>;
     }
+    export type DataSourceDataParamsChanges<T> = Record<keyof Omit<DataSourceDataParams<T>, 'originalDataArray' | 'changes'>, true>;
     export type DataSourceSingleSortInfo<T> = MultisortInfo<T> & {
         field?: keyof T;
         id?: string;
@@ -235,7 +237,6 @@ declare module "components/DataSource/types" {
     export interface DataSourceMappedState<T> {
         aggregationReducers?: DataSourceProps<T>['aggregationReducers'];
         livePagination: DataSourceProps<T>['livePagination'];
-        livePaginationCursor: DataSourceProps<T>['livePaginationCursor'];
         onDataParamsChange: DataSourceProps<T>['onDataParamsChange'];
         data: DataSourceProps<T>['data'];
         primaryKey: DataSourceProps<T>['primaryKey'];
@@ -253,6 +254,7 @@ declare module "components/DataSource/types" {
         done?: (accumulatedValue: AggregationResultType | any, array: T[]) => AggregationResultType;
     };
     export interface DataSourceSetupState<T> {
+        propsCache: Map<keyof DataSourceProps<T>, WeakMap<any, any>>;
         showSeparatePivotColumnForSingleAggregation: boolean;
         dataParams?: DataSourceDataParams<T>;
         notifyScrollbarsChange: SubscriptionCallback<Scrollbars>;
@@ -298,14 +300,23 @@ declare module "components/DataSource/types" {
         onSortInfoChange?: ((sortInfo: DataSourceSingleSortInfo<T> | null) => void) | ((sortInfo: DataSourceSingleSortInfo<T>[]) => void);
         onDataParamsChange?: (dataParamsChange: DataSourceDataParams<T>) => void;
         livePagination?: boolean;
-        livePaginationCursor?: DataSourceLivePaginationCursorValue;
+        livePaginationCursor?: DataSourcePropLivePaginationCursor<T>;
+        onLivePaginationCursorChange?: (livePaginationCursor: DataSourceLivePaginationCursorValue) => void;
     }
-    export type DataSourceLivePaginationCursorValue = string | number;
+    export type DataSourcePropLivePaginationCursor<T> = DataSourceLivePaginationCursorValue | DataSourceLivePaginationCursorFn<T>;
+    export type DataSourceLivePaginationCursorFn<T> = (params: DataSourceLivePaginationCursorParams<T>) => DataSourceLivePaginationCursorValue;
+    export type DataSourceLivePaginationCursorParams<T> = {
+        array: T[];
+        lastItem: T | Partial<T> | null;
+        length: number;
+    };
+    export type DataSourceLivePaginationCursorValue = string | number | null;
     export interface DataSourceState<T> extends DataSourceSetupState<T>, DataSourceDerivedState<T>, DataSourceMappedState<T> {
     }
     export interface DataSourceDerivedState<_T> {
         multiSort: boolean;
         controlledSort: boolean;
+        livePaginationCursor?: DataSourceLivePaginationCursorValue;
     }
     export type DataSourceComponentActions<T> = ComponentStateActions<DataSourceState<T>>;
     export interface DataSourceContextValue<T> {
@@ -341,14 +352,14 @@ declare module "components/hooks/useEffectWithChanges" {
     export function useEffectWithObject(fn: EffectCallback, deps: Record<string, any>): void;
 }
 declare module "components/DataSource/privateHooks/useLoadData" {
-    import { DataSourceDataParams, DataSourceState } from "components/DataSource/types";
-    export function buildDataSourceDataParams<T>(componentState: DataSourceState<T>): DataSourceDataParams<T>;
+    import { DataSourceDataParams, DataSourceState, DataSourceDataParamsChanges } from "components/DataSource/types";
+    export function buildDataSourceDataParams<T>(componentState: DataSourceState<T>, changes?: DataSourceDataParamsChanges<T>): DataSourceDataParams<T>;
     export function useLoadData<T>(): void;
     export function useLivePagination<T>(): void;
 }
 declare module "components/DataSource/state/normalizeSortInfo" {
     import { DataSourceSingleSortInfo, DataSourceSortInfo } from "components/DataSource/types";
-    export const normalizeSortInfo: <T>(sortInfo?: DataSourceSortInfo<T> | undefined) => DataSourceSingleSortInfo<T>[];
+    export const normalizeSortInfo: <T>(initialSortInfo?: DataSourceSortInfo<T> | undefined, weakMap?: WeakMap<any, any> | undefined) => DataSourceSingleSortInfo<T>[];
 }
 declare module "components/utils/buildSubscriptionCallback" {
     import { SubscriptionCallback } from "components/types/SubscriptionCallback";
@@ -366,18 +377,17 @@ declare module "components/DataSource/state/getInitialState" {
     import { ComponentInterceptedActions, ForwardPropsToStateFnResult } from "components/hooks/useComponentState";
     import { DataSourceDataParams } from "components/DataSource/index";
     export function initSetupState<T>(): DataSourceSetupState<T>;
-    export const forwardProps: <T>() => Partial<{
+    export const forwardProps: <T>(setupState: DataSourceSetupState<T>) => Partial<{
         data: 1 | ((value: import("components/DataSource").DataSourceData<T>) => import("components/DataSource").DataSourceData<T>);
         loading: 1 | ((value: boolean | undefined) => boolean);
+        sortInfo: 1 | ((value: import("components/DataSource").DataSourceSortInfo<T> | undefined) => import("components/DataSource").DataSourceSingleSortInfo<T>[] | null);
+        groupBy: 1 | ((value: import("components/DataSource").DataSourcePropGroupBy<T> | undefined) => import("components/DataSource").DataSourcePropGroupBy<T>);
+        pivotBy: 1 | ((value: import("components/DataSource").DataSourcePropPivotBy<T> | undefined) => import("components/DataSource").DataSourcePropPivotBy<T> | undefined);
         aggregationReducers: 1 | ((value: import("components/DataSource").DataSourcePropAggregationReducers<T> | undefined) => import("components/DataSource").DataSourcePropAggregationReducers<T> | undefined);
         livePagination: 1 | ((value: boolean | undefined) => boolean | undefined);
-        livePaginationCursor: 1 | ((value: import("components/DataSource").DataSourceLivePaginationCursorValue | undefined) => import("components/DataSource").DataSourceLivePaginationCursorValue | undefined);
         onDataParamsChange: 1 | ((value: ((dataParamsChange: DataSourceDataParams<T>) => void) | undefined) => ((dataParamsChange: DataSourceDataParams<T>) => void) | undefined);
         primaryKey: 1 | ((value: keyof T) => keyof T);
-        groupBy: 1 | ((value: import("components/DataSource").DataSourcePropGroupBy<T> | undefined) => import("components/DataSource").DataSourcePropGroupBy<T>);
         groupRowsState: 1 | ((value: GroupRowsState<any> | undefined) => GroupRowsState<any>);
-        pivotBy: 1 | ((value: import("components/DataSource").DataSourcePropPivotBy<T> | undefined) => import("components/DataSource").DataSourcePropPivotBy<T> | undefined);
-        sortInfo: 1 | ((value: import("components/DataSource").DataSourceSortInfo<T> | undefined) => import("components/DataSource").DataSourceSingleSortInfo<T>[] | null);
     }>;
     export function mapPropsToState<T extends any>(params: {
         props: DataSourceProps<T>;
@@ -3118,4 +3128,5 @@ declare module "@infinite-table/infinite-react" {
     export { group, flatten } from "utils/groupAndPivot/index";
     export { useComponentState, getComponentStateRoot, } from "components/hooks/useComponentState";
     export { interceptMap } from "components/hooks/useInterceptedMap";
+    export { useEffectWithChanges } from "components/hooks/useEffectWithChanges";
 }

package/index.esm.js

@@ -193,11 +193,11 @@ var require_common = __commonJS({
         let enableOverride = null;
         let namespacesCache;
         let enabledCache;
-        function debug6(...args) {
-          if (!debug6.enabled) {
+        function debug7(...args) {
+          if (!debug7.enabled) {
             return;
           }
-          const self = debug6;
+          const self = debug7;
           const curr = Number(new Date());
           const ms = curr - (prevTime || curr);
           self.diff = ms;
@@ -227,12 +227,12 @@ var require_common = __commonJS({
           const logFn = self.log || createDebug.log;
           logFn.apply(self, args);
         }
-        debug6.namespace = namespace;
-        debug6.useColors = createDebug.useColors();
-        debug6.color = createDebug.selectColor(namespace);
-        debug6.extend = extend;
-        debug6.destroy = createDebug.destroy;
-        Object.defineProperty(debug6, "enabled", {
+        debug7.namespace = namespace;
+        debug7.useColors = createDebug.useColors();
+        debug7.color = createDebug.selectColor(namespace);
+        debug7.extend = extend;
+        debug7.destroy = createDebug.destroy;
+        Object.defineProperty(debug7, "enabled", {
           enumerable: true,
           configurable: false,
           get: () => {
@@ -250,9 +250,9 @@ var require_common = __commonJS({
           }
         });
         if (typeof createDebug.init === "function") {
-          createDebug.init(debug6);
+          createDebug.init(debug7);
         }
-        return debug6;
+        return debug7;
       }
       function extend(namespace, delimiter) {
         const newDebug = createDebug(this.namespace + (typeof delimiter === "undefined" ? ":" : delimiter) + namespace);
@@ -1798,12 +1798,14 @@ function forwardProps2(propsToForward, props) {
 function getComponentStateRoot(config) {
   return memo(function ComponentStateRoot(props) {
     var _a, _b;
+    const [initialSetupState] = useState2(() => {
+      return config.initSetupState ? config.initSetupState() : {};
+    });
     const propsToStateSetRef = useRef4(new Set());
-    const propsToForward = useMemo3(() => config.forwardProps ? config.forwardProps() : {}, []);
+    const propsToForward = useMemo3(() => config.forwardProps ? config.forwardProps(initialSetupState) : {}, [initialSetupState]);
     const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
     const getParentState = useLatest(parentState);
     const [wholeState] = useState2(() => {
-      const initialSetupState = config.initSetupState ? config.initSetupState() : {};
       let mappedState = {};
       if (propsToForward) {
         mappedState = forwardProps2(propsToForward, props);
@@ -2404,7 +2406,16 @@ function useEffectWithChanges(fn, deps) {
 }
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-function buildDataSourceDataParams(componentState) {
+var debug3 = dbg("DataSource:useLoadData");
+function anonimizeValues(arg) {
+  const result = {};
+  for (var k in arg)
+    if (arg.hasOwnProperty(k)) {
+      result[k] = true;
+    }
+  return result;
+}
+function buildDataSourceDataParams(componentState, changes) {
   var _a, _b;
   const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
   const dataSourceParams = {
@@ -2416,14 +2427,17 @@ function buildDataSourceDataParams(componentState) {
   if (componentState.livePagination !== void 0) {
     dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
   }
+  if (changes !== void 0) {
+    dataSourceParams.changes = changes;
+  }
   return dataSourceParams;
 }
-function notifyDataParamsChanged(componentState, actions) {
+function notifyDataParamsChanged(componentState, actions, changes) {
   var _a;
   if (typeof componentState.data === "function") {
     loadData(componentState.data, componentState, actions);
   }
-  const dataParams = buildDataSourceDataParams(componentState);
+  const dataParams = buildDataSourceDataParams(componentState, changes);
   (_a = componentState.onDataParamsChange) == null ? void 0 : _a.call(componentState, dataParams);
 }
 function loadData(data, componentState, actions) {
@@ -2515,20 +2529,32 @@ function useLivePagination() {
     sortInfo,
     groupBy,
     pivotBy,
-    cursorId
+    livePaginationCursor: cursorId
   };
-  useEffectWithChanges(() => {
+  useEffectWithChanges((changes, prevValues) => {
     if (cursorId === void 0) {
       return;
     }
-    notifyDataParamsChanged(getComponentState(), actions);
+    debug3("onDataParamsChange triggered because the following values have changed", changes, "old values", prevValues);
+    notifyDataParamsChanged(getComponentState(), actions, anonimizeValues(changes));
   }, depsObject);
 }
 
 // src/components/DataSource/state/normalizeSortInfo.ts
-var normalizeSortInfo = (sortInfo) => {
-  sortInfo = sortInfo != null ? sortInfo : [];
-  return Array.isArray(sortInfo) ? sortInfo : [sortInfo];
+var EMPTY_ARRAY = Object.freeze([]);
+var normalizeSortInfo = (initialSortInfo, weakMap) => {
+  const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
+  const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
+  if (weakMap && weakMap.has(sortInfo)) {
+    const prevResult = weakMap.get(sortInfo);
+    if (prevResult && prevResult.length === result.length) {
+      return prevResult;
+    }
+  }
+  if (weakMap && sortInfo) {
+    weakMap.set(sortInfo, result);
+  }
+  return result;
 };
 
 // src/components/hooks/useOnce.ts
@@ -2978,6 +3004,9 @@ function initSetupState2() {
     originalDataArray,
     scrollBottomId: Symbol("scrollBottomId"),
     showSeparatePivotColumnForSingleAggregation: false,
+    propsCache: new Map([
+      ["sortInfo", new WeakMap()]
+    ]),
     pivotColumns: void 0,
     pivotColumnGroups: void 0,
     dataArray,
@@ -2998,17 +3027,16 @@ function getCompareObject(dataParams) {
   delete obj.originalDataArray;
   return obj;
 }
-var forwardProps3 = () => {
+var forwardProps3 = (setupState) => {
   return {
     onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObject) : void 0,
     data: 1,
     pivotBy: 1,
     primaryKey: 1,
     livePagination: 1,
-    livePaginationCursor: 1,
     aggregationReducers: 1,
     loading: (loading) => loading != null ? loading : false,
-    sortInfo: (sortInfo) => normalizeSortInfo(sortInfo),
+    sortInfo: (sortInfo) => normalizeSortInfo(sortInfo, setupState.propsCache.get("sortInfo")),
     groupBy: (groupBy) => groupBy != null ? groupBy : [],
     groupRowsState: (groupRowsState) => {
       return groupRowsState || new GroupRowsState({
@@ -3019,12 +3047,21 @@ var forwardProps3 = () => {
   };
 };
 function mapPropsToState2(params) {
-  const { props } = params;
+  const { props, state } = params;
   const controlledSort = isControlledValue(props.sortInfo);
-  return {
+  const result = {
     controlledSort,
     multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
   };
+  if (props.livePagination) {
+    const livePaginationCursor = typeof props.livePaginationCursor === "function" ? props.livePaginationCursor({
+      array: state.originalDataArray,
+      length: state.originalDataArray.length,
+      lastItem: state.originalDataArray[state.originalDataArray.length - 1]
+    }) : props.livePaginationCursor;
+    result.livePaginationCursor = livePaginationCursor;
+  }
+  return result;
 }
 function getInterceptActions() {
   return {
@@ -3902,7 +3939,8 @@ function useComputed() {
   const { componentActions, componentState } = useComponentState();
   const {
     componentActions: dataSourceActions,
-    componentState: dataSourceState
+    componentState: dataSourceState,
+    getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
     columnOrder,
@@ -3935,7 +3973,10 @@ function useComputed() {
     var _a2;
     const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
-  }, []);
+    if (getDataSourceState().livePagination) {
+      dataSourceActions.livePaginationCursor = null;
+    }
+  }, [getDataSourceState]);
   const columns = componentState.computedColumns;
   const {
     computedColumnOrder,
@@ -4928,7 +4969,7 @@ function RawListFn(props) {
 var RawList = memo5(RawListFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var debug3 = dbg("Header");
+var debug4 = dbg("Header");
 var { rootClassName: rootClassName4 } = internalProps;
 var TableHeaderClassName = `${rootClassName4}Header`;
 function InfiniteTableHeaderFn(props) {
@@ -4942,7 +4983,7 @@ function InfiniteTableHeaderFn(props) {
     const column = columns[columnIndex];
     if (!column) {
       if (true) {
-        debug3("Cannot find column to render at ", columnIndex);
+        debug4("Cannot find column to render at ", columnIndex);
       }
       return null;
     }
@@ -5459,7 +5500,7 @@ var scrollTransformTargetCls = "mlx2t3";
 var UPDATE_SCROLL2 = (node, scrollPosition) => {
   node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, ${-scrollPosition.scrollTop}px, 0px)`;
 };
-var debug4 = dbg("VirtuaList");
+var debug5 = dbg("VirtuaList");
 var rootClassName7 = "InfiniteList";
 var VirtualList = (props) => {
   const _a = props, {
@@ -5499,7 +5540,7 @@ var VirtualList = (props) => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
       if (true) {
-        debug4.extend(mainAxis)(`Render count change ${renderCount}`);
+        debug5.extend(mainAxis)(`Render count change ${renderCount}`);
       }
       rerender();
     });
@@ -7269,7 +7310,7 @@ var useLicense = (licenseKey = "") => {
   const valid = useMemo11(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.1.1"
+      version: "0.1.2"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7287,7 +7328,7 @@ import {
 } from "react";
 import { useRef as useRef19 } from "react";
 var error = err("CSSVariableWatch");
-var debug5 = dbg("CSSVariableWatch");
+var debug6 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
   position: "absolute",
   pointerEvents: "none",
@@ -7310,7 +7351,7 @@ var useCSSVariableWatch = (params) => {
     const value = params.ref.current.getBoundingClientRect().height;
     if (value) {
       lastValueRef.current = value;
-      debug5(`Variable ${params.varName} found and equals ${value}.`);
+      debug6(`Variable ${params.varName} found and equals ${value}.`);
       params.onChange(value);
     } else {
       error(`Specified variable ${params.varName} not found or does not have a numeric value.`);
@@ -7614,5 +7655,6 @@ export {
   interceptMap,
   multisort,
   useComponentState,
-  useDataSource
+  useDataSource,
+  useEffectWithChanges
 };

package/index.js

@@ -198,11 +198,11 @@ var require_common = __commonJS({
         let enableOverride = null;
         let namespacesCache;
         let enabledCache;
-        function debug6(...args) {
-          if (!debug6.enabled) {
+        function debug7(...args) {
+          if (!debug7.enabled) {
             return;
           }
-          const self = debug6;
+          const self = debug7;
           const curr = Number(new Date());
           const ms = curr - (prevTime || curr);
           self.diff = ms;
@@ -232,12 +232,12 @@ var require_common = __commonJS({
           const logFn = self.log || createDebug.log;
           logFn.apply(self, args);
         }
-        debug6.namespace = namespace;
-        debug6.useColors = createDebug.useColors();
-        debug6.color = createDebug.selectColor(namespace);
-        debug6.extend = extend;
-        debug6.destroy = createDebug.destroy;
-        Object.defineProperty(debug6, "enabled", {
+        debug7.namespace = namespace;
+        debug7.useColors = createDebug.useColors();
+        debug7.color = createDebug.selectColor(namespace);
+        debug7.extend = extend;
+        debug7.destroy = createDebug.destroy;
+        Object.defineProperty(debug7, "enabled", {
           enumerable: true,
           configurable: false,
           get: () => {
@@ -255,9 +255,9 @@ var require_common = __commonJS({
           }
         });
         if (typeof createDebug.init === "function") {
-          createDebug.init(debug6);
+          createDebug.init(debug7);
         }
-        return debug6;
+        return debug7;
       }
       function extend(namespace, delimiter) {
         const newDebug = createDebug(this.namespace + (typeof delimiter === "undefined" ? ":" : delimiter) + namespace);
@@ -635,7 +635,8 @@ __export(exports, {
   interceptMap: () => interceptMap,
   multisort: () => multisort,
   useComponentState: () => useComponentState,
-  useDataSource: () => useDataSource
+  useDataSource: () => useDataSource,
+  useEffectWithChanges: () => useEffectWithChanges
 });
 
 // src/components/InfiniteTable/index.tsx
@@ -1795,12 +1796,14 @@ function forwardProps2(propsToForward, props) {
 function getComponentStateRoot(config) {
   return React2.memo(function ComponentStateRoot(props) {
     var _a, _b;
+    const [initialSetupState] = (0, import_react11.useState)(() => {
+      return config.initSetupState ? config.initSetupState() : {};
+    });
     const propsToStateSetRef = (0, import_react11.useRef)(new Set());
-    const propsToForward = (0, import_react11.useMemo)(() => config.forwardProps ? config.forwardProps() : {}, []);
+    const propsToForward = (0, import_react11.useMemo)(() => config.forwardProps ? config.forwardProps(initialSetupState) : {}, [initialSetupState]);
     const parentState = (_b = (_a = config.getParentState) == null ? void 0 : _a.call(config)) != null ? _b : null;
     const getParentState = useLatest(parentState);
     const [wholeState] = (0, import_react11.useState)(() => {
-      const initialSetupState = config.initSetupState ? config.initSetupState() : {};
       let mappedState = {};
       if (propsToForward) {
         mappedState = forwardProps2(propsToForward, props);
@@ -2387,7 +2390,16 @@ function useEffectWithChanges(fn, deps) {
 }
 
 // src/components/DataSource/privateHooks/useLoadData.ts
-function buildDataSourceDataParams(componentState) {
+var debug3 = dbg("DataSource:useLoadData");
+function anonimizeValues(arg) {
+  const result = {};
+  for (var k in arg)
+    if (arg.hasOwnProperty(k)) {
+      result[k] = true;
+    }
+  return result;
+}
+function buildDataSourceDataParams(componentState, changes) {
   var _a, _b;
   const sortInfo = componentState.multiSort ? componentState.sortInfo : (_b = (_a = componentState.sortInfo) == null ? void 0 : _a[0]) != null ? _b : null;
   const dataSourceParams = {
@@ -2399,14 +2411,17 @@ function buildDataSourceDataParams(componentState) {
   if (componentState.livePagination !== void 0) {
     dataSourceParams.livePaginationCursor = componentState.livePaginationCursor;
   }
+  if (changes !== void 0) {
+    dataSourceParams.changes = changes;
+  }
   return dataSourceParams;
 }
-function notifyDataParamsChanged(componentState, actions) {
+function notifyDataParamsChanged(componentState, actions, changes) {
   var _a;
   if (typeof componentState.data === "function") {
     loadData(componentState.data, componentState, actions);
   }
-  const dataParams = buildDataSourceDataParams(componentState);
+  const dataParams = buildDataSourceDataParams(componentState, changes);
   (_a = componentState.onDataParamsChange) == null ? void 0 : _a.call(componentState, dataParams);
 }
 function loadData(data, componentState, actions) {
@@ -2498,20 +2513,32 @@ function useLivePagination() {
     sortInfo,
     groupBy,
     pivotBy,
-    cursorId
+    livePaginationCursor: cursorId
   };
-  useEffectWithChanges(() => {
+  useEffectWithChanges((changes, prevValues) => {
     if (cursorId === void 0) {
       return;
     }
-    notifyDataParamsChanged(getComponentState(), actions);
+    debug3("onDataParamsChange triggered because the following values have changed", changes, "old values", prevValues);
+    notifyDataParamsChanged(getComponentState(), actions, anonimizeValues(changes));
   }, depsObject);
 }
 
 // src/components/DataSource/state/normalizeSortInfo.ts
-var normalizeSortInfo = (sortInfo) => {
-  sortInfo = sortInfo != null ? sortInfo : [];
-  return Array.isArray(sortInfo) ? sortInfo : [sortInfo];
+var EMPTY_ARRAY = Object.freeze([]);
+var normalizeSortInfo = (initialSortInfo, weakMap) => {
+  const sortInfo = initialSortInfo != null ? initialSortInfo : EMPTY_ARRAY;
+  const result = Array.isArray(sortInfo) ? sortInfo : [sortInfo];
+  if (weakMap && weakMap.has(sortInfo)) {
+    const prevResult = weakMap.get(sortInfo);
+    if (prevResult && prevResult.length === result.length) {
+      return prevResult;
+    }
+  }
+  if (weakMap && sortInfo) {
+    weakMap.set(sortInfo, result);
+  }
+  return result;
 };
 
 // src/components/hooks/useOnce.ts
@@ -2961,6 +2988,9 @@ function initSetupState2() {
     originalDataArray,
     scrollBottomId: Symbol("scrollBottomId"),
     showSeparatePivotColumnForSingleAggregation: false,
+    propsCache: new Map([
+      ["sortInfo", new WeakMap()]
+    ]),
     pivotColumns: void 0,
     pivotColumnGroups: void 0,
     dataArray,
@@ -2981,17 +3011,16 @@ function getCompareObject(dataParams) {
   delete obj.originalDataArray;
   return obj;
 }
-var forwardProps3 = () => {
+var forwardProps3 = (setupState) => {
   return {
     onDataParamsChange: (fn) => fn ? discardCallsWithEqualArg(fn, 100, getCompareObject) : void 0,
     data: 1,
     pivotBy: 1,
     primaryKey: 1,
     livePagination: 1,
-    livePaginationCursor: 1,
     aggregationReducers: 1,
     loading: (loading) => loading != null ? loading : false,
-    sortInfo: (sortInfo) => normalizeSortInfo(sortInfo),
+    sortInfo: (sortInfo) => normalizeSortInfo(sortInfo, setupState.propsCache.get("sortInfo")),
     groupBy: (groupBy) => groupBy != null ? groupBy : [],
     groupRowsState: (groupRowsState) => {
       return groupRowsState || new GroupRowsState({
@@ -3002,12 +3031,21 @@ var forwardProps3 = () => {
   };
 };
 function mapPropsToState2(params) {
-  const { props } = params;
+  const { props, state } = params;
   const controlledSort = isControlledValue(props.sortInfo);
-  return {
+  const result = {
     controlledSort,
     multiSort: Array.isArray(controlledSort ? props.sortInfo : props.defaultSortInfo)
   };
+  if (props.livePagination) {
+    const livePaginationCursor = typeof props.livePaginationCursor === "function" ? props.livePaginationCursor({
+      array: state.originalDataArray,
+      length: state.originalDataArray.length,
+      lastItem: state.originalDataArray[state.originalDataArray.length - 1]
+    }) : props.livePaginationCursor;
+    result.livePaginationCursor = livePaginationCursor;
+  }
+  return result;
 }
 function getInterceptActions() {
   return {
@@ -3885,7 +3923,8 @@ function useComputed() {
   const { componentActions, componentState } = useComponentState();
   const {
     componentActions: dataSourceActions,
-    componentState: dataSourceState
+    componentState: dataSourceState,
+    getState: getDataSourceState
   } = useDataSourceContextValue();
   const {
     columnOrder,
@@ -3918,7 +3957,10 @@ function useComputed() {
     var _a2;
     const newSortInfo = multiSort ? sortInfo : (_a2 = sortInfo[0]) != null ? _a2 : null;
     dataSourceActions.sortInfo = newSortInfo;
-  }, []);
+    if (getDataSourceState().livePagination) {
+      dataSourceActions.livePaginationCursor = null;
+    }
+  }, [getDataSourceState]);
   const columns = componentState.computedColumns;
   const {
     computedColumnOrder,
@@ -4878,7 +4920,7 @@ function RawListFn(props) {
 var RawList = React16.memo(RawListFn);
 
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx
-var debug3 = dbg("Header");
+var debug4 = dbg("Header");
 var { rootClassName: rootClassName4 } = internalProps;
 var TableHeaderClassName = `${rootClassName4}Header`;
 function InfiniteTableHeaderFn(props) {
@@ -4892,7 +4934,7 @@ function InfiniteTableHeaderFn(props) {
     const column = columns[columnIndex];
     if (!column) {
       if (true) {
-        debug3("Cannot find column to render at ", columnIndex);
+        debug4("Cannot find column to render at ", columnIndex);
       }
       return null;
     }
@@ -5386,7 +5428,7 @@ var scrollTransformTargetCls = "mlx2t3";
 var UPDATE_SCROLL2 = (node, scrollPosition) => {
   node.style.transform = `translate3d(${-scrollPosition.scrollLeft}px, ${-scrollPosition.scrollTop}px, 0px)`;
 };
-var debug4 = dbg("VirtuaList");
+var debug5 = dbg("VirtuaList");
 var rootClassName7 = "InfiniteList";
 var VirtualList = (props) => {
   const _a = props, {
@@ -5426,7 +5468,7 @@ var VirtualList = (props) => {
     const removeOnRenderCount = virtualBrain.onRenderCountChange((renderCount) => {
       renderCountRef.current = renderCount;
       if (true) {
-        debug4.extend(mainAxis)(`Render count change ${renderCount}`);
+        debug5.extend(mainAxis)(`Render count change ${renderCount}`);
       }
       rerender();
     });
@@ -7173,7 +7215,7 @@ var useLicense = (licenseKey = "") => {
   const valid = (0, import_react43.useMemo)(() => {
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "0.1.1"
+      version: "0.1.2"
     });
     if (!licenseKey && !valid2 && isInsideSandbox) {
       return true;
@@ -7187,7 +7229,7 @@ var useLicense = (licenseKey = "") => {
 var React33 = __toModule(require("react"));
 var import_react44 = __toModule(require("react"));
 var error = err("CSSVariableWatch");
-var debug5 = dbg("CSSVariableWatch");
+var debug6 = dbg("CSSVariableWatch");
 var WRAPPER_STYLE = {
   position: "absolute",
   pointerEvents: "none",
@@ -7210,7 +7252,7 @@ var useCSSVariableWatch = (params) => {
     const value = params.ref.current.getBoundingClientRect().height;
     if (value) {
       lastValueRef.current = value;
-      debug5(`Variable ${params.varName} found and equals ${value}.`);
+      debug6(`Variable ${params.varName} found and equals ${value}.`);
       params.onChange(value);
     } else {
       error(`Specified variable ${params.varName} not found or does not have a numeric value.`);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infinite-table/infinite-react",
   "description": "Infinite Table for React",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "index.js",
   "module": "index.esm.js",
   "typings": "index.d.ts",
@@ -14,5 +14,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1642076142630
+  "publishedAt": 1642424005983
 }