@etsoo/react 1.8.51 → 1.8.52

package/lib/mjs/components/ScrollerGrid.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { VariableSizeGrid } from "react-window";
+import { Grid, useGridRef } from "react-window";
+import { useCombinedRefs } from "../uses/useCombinedRefs";
 /**
  * Scroller vertical grid
  * @param props Props
@@ -8,17 +9,26 @@ import { VariableSizeGrid } from "react-window";
  */
 export const ScrollerGrid = (props) => {
     // Destruct
-    const { autoLoad = true, defaultOrderBy, footerRenderer, headerRenderer, itemRenderer, idField = "id", loadBatchSize, loadData, mRef, onItemsRendered, onSelectChange, rowHeight = 53, threshold = 6, width, onInitLoad, onUpdateRows, ...rest } = props;
+    const { autoLoad = true, defaultOrderBy, footerRenderer, headerRenderer, height = "100%", gridRef, width = "100%", style = {}, idField = "id", loadBatchSize, loadData, mRef, onCellsRendered, onSelectChange, rowHeight = 53, threshold = 3, onInitLoad, onUpdateRows, ...rest } = props;
+    // Style
+    Object.assign(style, {
+        width,
+        height,
+        overflowX: "hidden"
+    });
+    // Refs
+    const localRef = useGridRef(null);
+    const refs = useCombinedRefs(gridRef, localRef);
     // Rows
     const [rows, updateRows] = React.useState([]);
     const setRows = (rows, reset = false) => {
-        refs.current.loadedItems = rows.length;
+        stateRefs.current.loadedItems = rows.length;
         updateRows(rows);
         if (!reset && onUpdateRows)
-            onUpdateRows(rows, refs.current);
+            onUpdateRows(rows, stateRefs.current);
     };
-    // Refs
-    const refs = React.useRef({
+    // State Refs
+    const stateRefs = React.useRef({
         queryPaging: {
             currentPage: 0,
             orderBy: defaultOrderBy,
@@ -31,58 +41,58 @@ export const ScrollerGrid = (props) => {
         selectedItems: [],
         idCache: {}
     });
-    const ref = React.useRef(null);
     // Load data
     const loadDataLocal = (pageAdd = 1) => {
         // Prevent multiple loadings
-        if (!refs.current.hasNextPage ||
-            refs.current.isNextPageLoading ||
-            refs.current.isMounted === false)
+        if (!stateRefs.current.hasNextPage ||
+            stateRefs.current.isNextPageLoading ||
+            stateRefs.current.isMounted === false)
             return;
         // Update state
-        refs.current.isNextPageLoading = true;
+        stateRefs.current.isNextPageLoading = true;
         // Parameters
-        const { queryPaging, data } = refs.current;
+        const { queryPaging, data } = stateRefs.current;
         const loadProps = {
             queryPaging,
             data
         };
-        loadData(loadProps, refs.current.lastItem).then((result) => {
-            if (result == null || refs.current.isMounted === false) {
+        loadData(loadProps, stateRefs.current.lastItem).then((result) => {
+            if (result == null || stateRefs.current.isMounted === false) {
                 return;
             }
-            refs.current.isMounted = true;
+            stateRefs.current.isMounted = true;
             const newItems = result.length;
-            refs.current.lastLoadedItems = newItems;
-            refs.current.lastItem = result.at(-1);
-            refs.current.isNextPageLoading = false;
-            refs.current.hasNextPage = newItems >= refs.current.queryPaging.batchSize;
+            stateRefs.current.lastLoadedItems = newItems;
+            stateRefs.current.lastItem = result.at(-1);
+            stateRefs.current.isNextPageLoading = false;
+            stateRefs.current.hasNextPage =
+                newItems >= stateRefs.current.queryPaging.batchSize;
             if (pageAdd === 0) {
                 // New items
-                const newRows = refs.current.lastLoadedItems
+                const newRows = stateRefs.current.lastLoadedItems
                     ? [...rows]
-                        .splice(rows.length - refs.current.lastLoadedItems, refs.current.lastLoadedItems)
+                        .splice(rows.length - stateRefs.current.lastLoadedItems, stateRefs.current.lastLoadedItems)
                         .concat(result)
                     : result;
-                refs.current.idCache = {};
+                stateRefs.current.idCache = {};
                 for (const row of newRows) {
                     const id = row[idField];
-                    refs.current.idCache[id] = null;
+                    stateRefs.current.idCache[id] = null;
                 }
                 // Update rows
                 setRows(newRows);
             }
             else {
                 // Set current page
-                if (refs.current.queryPaging.currentPage == null)
-                    refs.current.queryPaging.currentPage = pageAdd;
+                if (stateRefs.current.queryPaging.currentPage == null)
+                    stateRefs.current.queryPaging.currentPage = pageAdd;
                 else
-                    refs.current.queryPaging.currentPage += pageAdd;
+                    stateRefs.current.queryPaging.currentPage += pageAdd;
                 // Update rows, avoid duplicate items
                 const newRows = [...rows];
                 for (const item of result) {
                     const id = item[idField];
-                    if (refs.current.idCache[id] === undefined) {
+                    if (stateRefs.current.idCache[id] === undefined) {
                         newRows.push(item);
                     }
                 }
@@ -90,34 +100,6 @@ export const ScrollerGrid = (props) => {
             }
         });
     };
-    // Item renderer
-    const itemRendererLocal = (itemProps, state) => {
-        // Custom render
-        const data = itemProps.rowIndex < rows.length ? rows[itemProps.rowIndex] : undefined;
-        return itemRenderer({
-            ...itemProps,
-            data,
-            selectedItems: state.selectedItems,
-            setItems: (callback) => {
-                const result = callback(rows, instance);
-                if (result == null)
-                    return;
-                setRows(result);
-            }
-        });
-    };
-    // Local items renderer callback
-    const onItemsRenderedLocal = (props) => {
-        // No items, means no necessary to load more data during reset
-        const itemCount = rows.length;
-        if (itemCount > 0 && props.visibleRowStopIndex + threshold > itemCount) {
-            // Auto load next page
-            loadDataLocal();
-        }
-        // Custom
-        if (onItemsRendered)
-            onItemsRendered(props);
-    };
     // Reset the state and load again
     const reset = (add, items = []) => {
         const { queryPaging, ...rest } = add ?? {};
@@ -130,16 +112,16 @@ export const ScrollerGrid = (props) => {
             lastItem: undefined,
             ...rest
         };
-        Object.assign(refs.current, resetState);
-        Object.assign(refs.current.queryPaging, {
+        Object.assign(stateRefs.current, resetState);
+        Object.assign(stateRefs.current.queryPaging, {
             currentPage: 0,
             ...queryPaging
         });
         // Reset items
-        if (refs.current.isMounted !== false)
+        if (stateRefs.current.isMounted !== false)
             setRows(items, true);
     };
-    const instance = {
+    React.useImperativeHandle(mRef, () => ({
         delete(index) {
             const item = rows.at(index);
             if (item) {
@@ -154,27 +136,28 @@ export const ScrollerGrid = (props) => {
             newRows.splice(start, 0, item);
             setRows(newRows);
         },
-        scrollTo(params) {
-            ref.current?.scrollTo(params);
+        refresh() {
+            loadDataLocal(0);
         },
-        scrollToItem(params) {
-            ref.current?.scrollToItem(params);
+        reset,
+        scrollToCell(param) {
+            localRef.current?.scrollToCell(param);
         },
-        scrollToRef(scrollOffset) {
-            ref.current?.scrollTo({ scrollLeft: 0, scrollTop: scrollOffset });
+        scrollToColumn(param) {
+            localRef.current?.scrollToColumn(param);
         },
-        scrollToItemRef(index, align) {
-            ref.current?.scrollToItem({ rowIndex: index, align });
+        scrollToRow(param) {
+            localRef.current?.scrollToRow(param);
         },
         select(rowIndex) {
             // Select only one item
-            const selectedItems = refs.current.selectedItems;
+            const selectedItems = stateRefs.current.selectedItems;
             selectedItems[0] = rows[rowIndex];
             if (onSelectChange)
                 onSelectChange(selectedItems);
         },
         selectAll(checked) {
-            const selectedItems = refs.current.selectedItems;
+            const selectedItems = stateRefs.current.selectedItems;
             rows.forEach((row) => {
                 const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === row[idField]);
                 if (checked) {
@@ -189,7 +172,7 @@ export const ScrollerGrid = (props) => {
                 onSelectChange(selectedItems);
         },
         selectItem(item, checked) {
-            const selectedItems = refs.current.selectedItems;
+            const selectedItems = stateRefs.current.selectedItems;
             const index = selectedItems.findIndex((selectedItem) => selectedItem[idField] === item[idField]);
             if (checked) {
                 if (index === -1)
@@ -201,35 +184,15 @@ export const ScrollerGrid = (props) => {
             }
             if (onSelectChange)
                 onSelectChange(selectedItems);
-        },
-        reset,
-        resetAfterColumnIndex(index, shouldForceUpdate) {
-            ref.current?.resetAfterColumnIndex(index, shouldForceUpdate);
-        },
-        resetAfterIndices(params) {
-            ref.current?.resetAfterIndices(params);
-        },
-        resetAfterRowIndex(index, shouldForceUpdate) {
-            ref.current?.resetAfterRowIndex(index, shouldForceUpdate);
         }
-    };
-    React.useImperativeHandle(mRef, () => instance, [rows]);
-    // Force update to work with the new width and rowHeight
-    React.useEffect(() => {
-        ref.current?.resetAfterIndices({
-            columnIndex: 0,
-            rowIndex: 0,
-            shouldForceUpdate: true
-        });
-    }, [width, rowHeight]);
+    }), [rows]);
     // Rows
-    const rowLength = rows.length;
-    // Row count
-    const rowCount = refs.current.hasNextPage ? rowLength + 1 : rowLength;
+    const rowCount = rows.length;
     React.useEffect(() => {
         // Auto load data when current page is 0
-        if (refs.current.queryPaging.currentPage === 0 && refs.current.autoLoad) {
-            const initItems = onInitLoad == null ? undefined : onInitLoad(ref.current);
+        if (stateRefs.current.queryPaging.currentPage === 0 &&
+            stateRefs.current.autoLoad) {
+            const initItems = onInitLoad == null ? undefined : onInitLoad(stateRefs.current);
             if (initItems)
                 reset(initItems[1], initItems[0]);
             else
@@ -238,14 +201,17 @@ export const ScrollerGrid = (props) => {
     }, [onInitLoad, loadDataLocal]);
     React.useEffect(() => {
         return () => {
-            refs.current.isMounted = false;
+            stateRefs.current.isMounted = false;
         };
     }, []);
     // Layout
-    return (_jsxs(React.Fragment, { children: [headerRenderer && headerRenderer(refs.current), _jsx(VariableSizeGrid, { itemKey: ({ columnIndex, rowIndex, data }) => {
-                    if (data == null)
-                        return [rowIndex, columnIndex].join(",");
-                    // ${data[idField]}-${rowIndex} always unique but no cache for the same item
-                    return [`${data[idField]}`, columnIndex].join(",");
-                }, onItemsRendered: onItemsRenderedLocal, ref: ref, rowCount: rowCount, rowHeight: typeof rowHeight === "function" ? rowHeight : () => rowHeight, style: { overflowX: "hidden" }, width: width, ...rest, children: (props) => itemRendererLocal(props, refs.current) }), footerRenderer && footerRenderer(rows, refs.current)] }));
+    return (_jsxs(React.Fragment, { children: [headerRenderer && headerRenderer(stateRefs.current), _jsx(Grid, { cellProps: { rows, states: stateRefs.current }, gridRef: refs, onCellsRendered: (visibleCells, allCells) => {
+                    // No items, means no necessary to load more data during reset
+                    if (rowCount > 0 &&
+                        visibleCells.rowStopIndex + threshold > rowCount) {
+                        // Auto load next page
+                        loadDataLocal();
+                    }
+                    onCellsRendered?.(visibleCells, allCells);
+                }, overscanCount: threshold, rowHeight: rowHeight, rowCount: rowCount, style: style, ...rest }), footerRenderer && footerRenderer(rows, stateRefs.current)] }));
 };

package/lib/mjs/components/ScrollerList.d.ts

@@ -1,66 +1,41 @@
 import { DataTypes } from "@etsoo/shared";
 import React from "react";
-import { Align, ListChildComponentProps, ListProps } from "react-window";
+import { ListProps } from "react-window";
 import { GridLoader } from "./GridLoader";
 import { GridMethodRef } from "./GridMethodRef";
+type ScrollerListRowProps<T extends object> = {
+    items: T[];
+};
+/**
+ * Scroller list forward ref
+ */
+export interface ScrollerListForwardRef<T> extends GridMethodRef<T> {
+}
 /**
  * Scroller vertical list props
  */
-export type ScrollerListProps<T extends object> = GridLoader<T> & Omit<ListProps<T>, "outerRef" | "height" | "width" | "children" | "itemCount"> & {
-    /**
-     * Methods ref
-     */
-    mRef?: React.Ref<ScrollerListForwardRef<T>>;
-    /**
-     * Outer div ref
-     */
-    oRef?: React.Ref<HTMLDivElement>;
+export type ScrollerListProps<T extends object> = GridLoader<T> & Omit<ListProps<ScrollerListRowProps<T>>, "rowCount" | "rowProps" | "overscanCount"> & {
     /**
      * Height of the list
      */
-    height?: number;
-    /**
-     * Width of the list
-     */
-    width?: number | string;
+    height?: number | string;
     /**
      * Id field
      */
     idField?: DataTypes.Keys<T>;
     /**
-     * Item renderer
+     * Methods ref
      */
-    itemRenderer: (props: ListChildComponentProps<T>) => React.ReactElement;
+    mRef?: React.Ref<ScrollerListForwardRef<T>>;
     /**
-     * Item size, a function indicates its a variable size list
+     * Width of the list
      */
-    itemSize: ((index: number) => number) | number;
+    width?: number | string;
 };
-/**
- * Scroller list ref
- */
-export interface ScrollerListRef {
-    /**
-     * Scroll to the specified offset (scrollTop or scrollLeft, depending on the direction prop).
-     */
-    scrollTo(scrollOffset: number): void;
-    /**
-     * Scroll to the specified item.
-     */
-    scrollToItem(index: number, align?: Align): void;
-}
-/**
- * Scroller list forward ref
- */
-export interface ScrollerListForwardRef<T> extends GridMethodRef<T> {
-    /**
-     * Refresh latest page data
-     */
-    refresh(): void;
-}
 /**
  * Scroller vertical list
  * @param props Props
  * @returns Component
  */
 export declare const ScrollerList: <T extends object>(props: ScrollerListProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/mjs/components/ScrollerList.js

@@ -1,13 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { DataTypes, Utils } from "@etsoo/shared";
+import { Utils } from "@etsoo/shared";
 import React from "react";
-import { FixedSizeList, VariableSizeList } from "react-window";
+import { List, useListRef } from "react-window";
 import { useCombinedRefs } from "../uses/useCombinedRefs";
-import { GridSizeGet } from "./GridLoader";
 // Calculate loadBatchSize
-const calculateBatchSize = (height, itemSize) => {
-    const size = Utils.getResult(itemSize, 0);
-    return 2 + Math.ceil(height / size);
+const calculateBatchSize = (height, rowHeight) => {
+    if (typeof height === "number" &&
+        typeof rowHeight === "number" &&
+        rowHeight > 0) {
+        return 1 + Math.ceil(height / rowHeight);
+    }
+    return 10;
 };
 /**
  * Scroller vertical list
@@ -16,18 +19,14 @@ const calculateBatchSize = (height, itemSize) => {
  */
 export const ScrollerList = (props) => {
     // Destruct
-    const { autoLoad = true, defaultOrderBy, height = document.documentElement.clientHeight, width = "100%", mRef, oRef, style = {}, idField = "id", itemRenderer, itemSize, loadBatchSize = calculateBatchSize(height, itemSize), loadData, threshold = GridSizeGet(loadBatchSize, height) / 2, onItemsRendered, onInitLoad, onUpdateRows, ...rest } = props;
+    const { autoLoad = true, defaultOrderBy, height = "100%", width = "100%", mRef, style = {}, idField = "id", rowHeight, listRef, loadBatchSize = calculateBatchSize(height, rowHeight), loadData, threshold = 3, onRowsRendered, onInitLoad, onUpdateRows, ...rest } = props;
     // Style
     Object.assign(style, {
-        width: "100%",
-        height: "100%",
-        display: "inline-block"
+        width,
+        height
     });
-    // Refs
-    const listRef = React.useRef(null);
-    const outerRef = React.useRef(null);
-    const refs = useCombinedRefs(oRef, outerRef);
-    // Rows
+    const localRef = useListRef(null);
+    const refs = useCombinedRefs(listRef, localRef);
     const [rows, updateRows] = React.useState([]);
     const setRows = (rows, reset = false) => {
         stateRefs.current.loadedItems = rows.length;
@@ -35,8 +34,7 @@ export const ScrollerList = (props) => {
         if (!reset && onUpdateRows)
             onUpdateRows(rows, stateRefs.current);
     };
-    // States
-    const batchSize = GridSizeGet(loadBatchSize, height);
+    const batchSize = Utils.getResult(loadBatchSize, height);
     const stateRefs = React.useRef({
         queryPaging: {
             currentPage: 0,
@@ -107,13 +105,6 @@ export const ScrollerList = (props) => {
             }
         });
     };
-    const itemRendererLocal = (itemProps) => {
-        // Custom render
-        return itemRenderer({
-            ...itemProps,
-            data: rows[itemProps.index]
-        });
-    };
     // Reset the state and load again
     const reset = (add, items = []) => {
         const { queryPaging, ...rest } = add ?? {};
@@ -136,7 +127,6 @@ export const ScrollerList = (props) => {
             setRows(items, true);
     };
     React.useImperativeHandle(mRef, () => {
-        const refMethods = listRef.current;
         return {
             delete(index) {
                 const item = rows.at(index);
@@ -156,47 +146,38 @@ export const ScrollerList = (props) => {
                 loadDataLocal(0);
             },
             reset,
-            scrollToRef(scrollOffset) {
-                refMethods.scrollTo(scrollOffset);
-            },
-            scrollToItemRef(index, align) {
-                refMethods.scrollToItem(index, align);
+            scrollToRow(param) {
+                localRef.current?.scrollToRow(param);
             }
         };
     }, []);
-    // Row count
-    const rowCount = rows.length;
-    // Local items renderer callback
-    const onItemsRenderedLocal = (props) => {
-        // No items, means no necessary to load more data during reset
-        if (rowCount > 0 && props.visibleStopIndex + threshold > rowCount) {
-            // Auto load next page
-            loadDataLocal();
-        }
-        // Custom
-        if (onItemsRendered)
-            onItemsRendered(props);
-    };
-    // Item count
-    const itemCount = stateRefs.current.hasNextPage ? rowCount + 1 : rowCount;
+    // When layout ready
+    React.useEffect(() => {
+        // Return clear function
+        return () => {
+            stateRefs.current.isMounted = false;
+        };
+    }, []);
     React.useEffect(() => {
         // Auto load data when current page is 0
         if (stateRefs.current.queryPaging?.currentPage === 0 &&
             stateRefs.current.autoLoad) {
-            const initItems = onInitLoad == null ? undefined : onInitLoad(listRef.current);
+            const initItems = onInitLoad == null ? undefined : onInitLoad(localRef.current);
             if (initItems)
                 reset(initItems[1], initItems[0]);
             else
                 loadDataLocal();
         }
     }, [onInitLoad, loadDataLocal]);
-    // When layout ready
-    React.useEffect(() => {
-        // Return clear function
-        return () => {
-            stateRefs.current.isMounted = false;
-        };
-    }, []);
+    // Row count
+    const rowCount = rows.length;
     // Layout
-    return typeof itemSize === "function" ? (_jsx(VariableSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => DataTypes.getIdValue1(data, idField) ?? index, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest, children: itemRendererLocal })) : (_jsx(FixedSizeList, { height: height, width: width, itemCount: itemCount, itemKey: (index, data) => DataTypes.getIdValue1(data, idField) ?? index, itemSize: itemSize, outerRef: refs, ref: listRef, style: style, onItemsRendered: onItemsRenderedLocal, ...rest, children: itemRendererLocal }));
+    return (_jsx(List, { listRef: refs, onRowsRendered: (visibleCells, allCells) => {
+            // No items, means no necessary to load more data during reset
+            if (rowCount > 0 && visibleCells.stopIndex + threshold > rowCount) {
+                // Auto load next page
+                loadDataLocal();
+            }
+            onRowsRendered?.(visibleCells, allCells);
+        }, overscanCount: threshold, rowHeight: rowHeight, rowCount: rowCount, rowProps: { items: rows }, style: style, ...rest }));
 };

package/lib/mjs/index.d.ts

@@ -10,7 +10,6 @@ export * from "./components/ListItemReact";
 export * from "./components/ScrollerGrid";
 export * from "./components/ScrollerList";
 export * from "./components/ScrollRestoration";
-export type { ListOnScrollProps, GridOnScrollProps, VariableSizeGrid } from "react-window";
 export * from "./custom/CustomFieldReact";
 export * from "./notifier/Notifier";
 export * from "@etsoo/notificationbase";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/react",
-  "version": "1.8.51",
+  "version": "1.8.52",
   "description": "TypeScript ReactJs UI Independent Framework",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -38,27 +38,27 @@
     "@emotion/css": "^11.13.5",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.43",
-    "@etsoo/notificationbase": "^1.1.63",
-    "@etsoo/shared": "^1.2.75",
+    "@etsoo/appscript": "^1.6.45",
+    "@etsoo/notificationbase": "^1.1.64",
+    "@etsoo/shared": "^1.2.76",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.8.1",
-    "react-window": "^1.8.11"
+    "react-router-dom": "^7.9.1",
+    "react-window": "^2.1.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.4",
     "@babel/plugin-transform-runtime": "^7.28.3",
     "@babel/preset-env": "^7.28.3",
-    "@babel/runtime-corejs3": "^7.28.3",
-    "@testing-library/jest-dom": "^6.7.0",
+    "@babel/runtime-corejs3": "^7.28.4",
+    "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
-    "@types/react": "^19.1.10",
-    "@types/react-dom": "^19.1.7",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^5.0.1",
-    "jsdom": "^26.1.0",
+    "@vitejs/plugin-react": "^5.0.2",
+    "jsdom": "^27.0.0",
     "typescript": "^5.9.2",
     "vitest": "^3.2.4"
   }

package/setupTests.ts

@@ -0,0 +1,13 @@
+import { vi } from "vitest";
+
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
+// Mock the ResizeObserver
+const ResizeObserverMock = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn()
+}));
+
+// Stub the global ResizeObserver
+vi.stubGlobal("ResizeObserver", ResizeObserverMock);

package/src/components/GridLoader.ts

@@ -4,7 +4,7 @@ import { DataTypes, DomUtils } from "@etsoo/shared";
 /**
  * Grid size
  */
-export type GridSize = number | ((input: number) => number);
+export type GridSize = number | ((input: number | string) => number);
 
 /**
  * Grid size calculation
@@ -132,7 +132,7 @@ export type GridLoader<
   defaultOrderBy?: QueryPagingOrder[];
 
   /**
-   * Batch size when load data, default will be calcuated with height and itemSize
+   * Batch size when load data, default will be calcuated with height and rowHeight
    */
   loadBatchSize?: GridSize;
 

package/src/components/GridMethodRef.ts

@@ -1,6 +1,11 @@
-import { Align } from "react-window";
+import { ListImperativeAPI } from "react-window";
 import { GridLoaderPartialStates } from "./GridLoader";
 
+/**
+ * Scroll to row parameter type
+ */
+export type ScrollToRowParam = Parameters<ListImperativeAPI["scrollToRow"]>[0];
+
 /**
  * Grid method ref
  */
@@ -19,18 +24,19 @@ export interface GridMethodRef<T> {
   insert(item: T, start: number): void;
 
   /**
-   * Reset
-   * @param add Additional data
+   * Refresh latest page data
    */
-  reset(add?: GridLoaderPartialStates<T>): void;
+  refresh(): void;
 
   /**
-   * Scroll to the specified offset (scrollTop or scrollLeft, depending on the direction prop).
+   * Reset
+   * @param add Additional data
    */
-  scrollToRef(scrollOffset: number): void;
+  reset(add?: GridLoaderPartialStates<T>): void;
 
   /**
-   * Scroll to the specified item.
+   * Scroll to the row
+   * @param param Parameters to control
    */
-  scrollToItemRef(index: number, align?: Align): void;
+  scrollToRow(param: ScrollToRowParam): void;
 }