@etsoo/materialui 1.5.71 → 1.5.73

package/__tests__/ReactAppTests.tsx

@@ -1,8 +1,9 @@
 import { AddressUtils, Culture } from "@etsoo/appscript";
 import { ReactApp } from "../src";
 import { DataTypes, DomUtils, IActionResult, Utils } from "@etsoo/shared";
-import React, { act } from "react";
+import { act } from "react";
 import { createRoot } from "react-dom/client";
+import { screen, waitFor } from "@testing-library/react";
 
 // Detected country or region
 const { detectedCountry } = DomUtils;
@@ -77,7 +78,7 @@ act(() => {
   reactRoot.render(<Provider />);
 });
 
-test("Test for properties", () => {
+test("Test for properties", async () => {
   const result: IActionResult = {
     ok: false,
     type: "https://tools.ietf.org/html/rfc9110#section-15.5.1",
@@ -96,10 +97,13 @@ test("Test for properties", () => {
     app.alertResult(result);
   });
 
-  expect(root.innerHTML).toContain(result.title);
+  await waitFor(() => {
+    const item = screen.getByText(result.title!);
+    expect(item.classList.contains("MuiDialogContent-root")).toBeTruthy();
+  });
 });
 
-test("Test for alertResult", () => {
+test("Test for alertResult", async () => {
   const result: IActionResult = {
     ok: false,
     type: "TokenExpired",
@@ -111,7 +115,8 @@ test("Test for alertResult", () => {
     app.alertResult(result);
   });
 
-  expect(root.innerHTML).toContain(
-    '<span style="font-size: 9px;">(TokenExpired)</span>'
-  );
+  await waitFor(() => {
+    const item = screen.getByText("(TokenExpired)");
+    expect(item.nodeName).toBe("SPAN");
+  });
 });

package/__tests__/{ResponsePage.tsx → ResponsivePage.tsx}

@@ -1,12 +1,12 @@
-import { act, render } from "@testing-library/react";
+import { act, render, renderHook } from "@testing-library/react";
 import {
-  MUGlobal,
   MobileListItemRenderer,
   ReactAppContext,
   ResponsivePage,
   SearchField
 } from "../src";
 import React from "react";
+import { GridMethodRef } from "@etsoo/react";
 
 globalThis.ResizeObserver = vi.fn().mockImplementation(() => ({
   observe: vi.fn(),
@@ -32,15 +32,21 @@ const fieldTemplate = {
   name: "string"
 } as const;
 
-it("Render ResponsePage", async () => {
+it("Render ResponsivePage", async () => {
   act(() => {
+    // Hook
+    const { result: ref } = renderHook(() =>
+      React.useRef<GridMethodRef<Data>>(undefined)
+    );
+
     // Act
     render(
       <ReactAppContext.Provider value={null}>
         <ResponsivePage<Data, typeof fieldTemplate>
           fields={[<SearchField label="Keyword" name="keyword" minChars={2} />]}
           height={200}
-          itemSize={[118, MUGlobal.pagePaddings]}
+          rowHeight={[53, 116]}
+          mRef={ref.current}
           fieldTemplate={fieldTemplate}
           loadData={({ id }) =>
             Promise.resolve([
@@ -58,7 +64,7 @@ it("Render ResponsePage", async () => {
               valueFormatter: ({ data }) => data?.deviceName ?? data?.name
             }
           ]}
-          innerItemRenderer={(props) =>
+          itemRenderer={(props) =>
             MobileListItemRenderer(props, (data) => {
               return [
                 data.name,

package/__tests__/SelectEx.tsx

@@ -1,4 +1,4 @@
-import React, { act } from "react";
+import { act } from "react";
 import { SelectEx } from "../src";
 import { fireEvent, render, screen } from "@testing-library/react";
 import { ListType1, Utils } from "@etsoo/shared";

package/lib/cjs/DataGridEx.d.ts

@@ -14,7 +14,7 @@ export type DataGridExFooterItemRendererProps<T extends object> = {
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadDataProps> = Omit<ScrollerGridProps<T, P>, "itemRenderer" | "columnCount" | "columnWidth" | "width"> & {
+export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadDataProps> = Omit<ScrollerGridProps<T, P>, "cellComponent" | "columnCount" | "columnWidth" | "onClick" | "onDoubleClick" | "onInitLoad" | "rowHeight" | "width"> & Partial<Pick<ScrollerGridProps<T, P>, "rowHeight">> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -70,6 +70,13 @@ export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadD
      * Click handler
      */
     onClick?: MouseEventWithDataHandler<T>;
+    /**
+     * Data change handler
+     * @param rows Rows
+     * @param rowIndex Row index
+     * @param columnIndex Column index
+     */
+    onDataChange?: (rows: T[], rowIndex: number, columnIndex: number) => void;
     /**
      * Selectable to support hover over and out effect and row clickable
      * @default true

package/lib/cjs/DataGridEx.js

@@ -16,6 +16,8 @@ const Box_1 = __importDefault(require("@mui/material/Box"));
 const TableSortLabel_1 = __importDefault(require("@mui/material/TableSortLabel"));
 const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 const Paper_1 = __importDefault(require("@mui/material/Paper"));
+const GridUtils_1 = require("./GridUtils");
+const useGridCacheInitLoad_1 = require("./uses/useGridCacheInitLoad");
 // Borders
 const boldBorder = "2px solid rgba(224, 224, 224, 1)";
 const thinBorder = "1px solid rgba(224, 224, 224, 1)";
@@ -135,7 +137,7 @@ function DataGridEx(props) {
             }) }));
     }
     // Destruct
-    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers_1.DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = react_2.default.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
+    const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, cacheKey, cacheMinutes = 15, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers_1.DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = react_2.default.createRef(), onClick, onDataChange, onDoubleClick, onUpdateRows, rowHeight = 53, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
     if (checkable) {
         const cbColumn = {
             field: "selected", // Avoid validation from data model
@@ -168,6 +170,8 @@ function DataGridEx(props) {
             columns.unshift(cbColumn);
         }
     }
+    // Init handler
+    const initHandler = (0, useGridCacheInitLoad_1.useGridCacheInitLoad)(cacheKey, cacheMinutes);
     const refs = react_2.default.useRef({});
     const mRefLocal = (0, react_1.useCombinedRefs)(mRef, (ref) => {
         if (ref == null)
@@ -226,57 +230,6 @@ function DataGridEx(props) {
             div.classList.remove("DataGridEx-Hover");
         });
     };
-    /**
-     * Item renderer
-     */
-    const itemRenderer = ({ columnIndex, rowIndex, style, data, selectedItems, setItems }) => {
-        // Column
-        const { align, cellRenderer = DataGridRenderers_1.DataGridRenderers.defaultCellRenderer, cellBoxStyle, field, type, valueFormatter, renderProps } = columns[columnIndex];
-        // Props
-        const formatProps = {
-            data,
-            field,
-            rowIndex,
-            columnIndex
-        };
-        let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
-        if (borderRowsCount != null &&
-            borderRowsCount > 0 &&
-            (rowIndex + 1) % borderRowsCount === 0) {
-            rowClass += ` DataGridEx-Cell-Border`;
-        }
-        // Selected
-        const selected = data != null &&
-            (selectedRowIndex.current === rowIndex ||
-                selectedItems.some((selectedItem) => selectedItem != null && selectedItem[idField] === data[idField]));
-        if (selected) {
-            rowClass += ` DataGridEx-Selected`;
-        }
-        // Box style
-        const boxStyle = data == null || cellBoxStyle == null
-            ? undefined
-            : typeof cellBoxStyle === "function"
-                ? cellBoxStyle(data)
-                : cellBoxStyle;
-        const cellProps = {
-            className: "DataGridEx-Cell",
-            textAlign: (0, react_1.GridAlignGet)(align, type),
-            sx: { ...boxStyle }
-        };
-        const child = cellRenderer({
-            data,
-            field,
-            formattedValue: valueFormatter ? valueFormatter(formatProps) : undefined,
-            selected,
-            type,
-            rowIndex,
-            columnIndex,
-            cellProps,
-            renderProps: typeof renderProps === "function" ? renderProps(data) : renderProps,
-            setItems
-        });
-        return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data), children: (0, jsx_runtime_1.jsx)(Box_1.default, { ...cellProps, onMouseEnter: handleMouseEnter, children: child }) }));
-    };
     // Column width calculator
     const widthCalculator = react_2.default.useMemo(() => DataGridExCalColumns(columns), [columns]);
     // Column width
@@ -294,12 +247,74 @@ function DataGridEx(props) {
         const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
         return (column.minWidth || minWidth) + sharedWidth;
     }, [columns, width]);
+    const onUpdateRowsHandler = react_2.default.useCallback((rows, state) => {
+        GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
+        onUpdateRows?.(rows, state);
+    }, [onUpdateRows, cacheKey]);
     // Table
     const table = react_2.default.useMemo(() => {
-        return ((0, jsx_runtime_1.jsx)(react_1.ScrollerGrid, { className: shared_1.Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, height: height -
-                headerHeight -
-                (hideFooter ? 0 : bottomHeight + 1) -
-                scrollbarSize, headerRenderer: headerRenderer, idField: idField, itemRenderer: itemRenderer, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
+        return ((0, jsx_runtime_1.jsx)(react_1.ScrollerGrid, { className: shared_1.Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), onCellsRendered: cacheKey
+                ? (visibleCells) => sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(visibleCells))
+                : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, cellComponent: ({ rowIndex, columnIndex, style, rows, states }) => {
+                // Column
+                const { align, cellRenderer = DataGridRenderers_1.DataGridRenderers.defaultCellRenderer, cellBoxStyle, field, type, valueFormatter, renderProps } = columns[columnIndex];
+                // Data
+                const data = rows[rowIndex];
+                // Props
+                const formatProps = {
+                    data,
+                    field,
+                    rowIndex,
+                    columnIndex
+                };
+                let rowClass = `DataGridEx-Cell${rowIndex % 2}`;
+                if (borderRowsCount != null &&
+                    borderRowsCount > 0 &&
+                    (rowIndex + 1) % borderRowsCount === 0) {
+                    rowClass += ` DataGridEx-Cell-Border`;
+                }
+                // Selected
+                const selected = data != null &&
+                    (selectedRowIndex.current === rowIndex ||
+                        states.selectedItems.some((selectedItem) => selectedItem != null &&
+                            selectedItem[idField] === data[idField]));
+                if (selected) {
+                    rowClass += ` DataGridEx-Selected`;
+                }
+                // Box style
+                const boxStyle = data == null || cellBoxStyle == null
+                    ? undefined
+                    : typeof cellBoxStyle === "function"
+                        ? cellBoxStyle(data)
+                        : cellBoxStyle;
+                const cellProps = {
+                    className: "DataGridEx-Cell",
+                    textAlign: (0, react_1.GridAlignGet)(align, type),
+                    sx: { ...boxStyle }
+                };
+                const child = cellRenderer({
+                    data,
+                    field,
+                    formattedValue: valueFormatter
+                        ? valueFormatter(formatProps)
+                        : undefined,
+                    selected,
+                    type,
+                    rowIndex,
+                    columnIndex,
+                    cellProps,
+                    renderProps: typeof renderProps === "function"
+                        ? renderProps(data)
+                        : renderProps,
+                    triggerChange: () => onDataChange?.(rows, rowIndex, columnIndex)
+                });
+                return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, "data-row": rowIndex, "data-column": columnIndex, onMouseDown: selectable && !checkable ? handleMouseDown : undefined, onMouseOver: selectable ? handleMouseOver : undefined, onMouseOut: selectable ? handleMouseOut : undefined, onClick: (event) => onClick && data != null && onClick(event, data), onDoubleClick: (event) => onDoubleClick && data != null && onDoubleClick(event, data), children: (0, jsx_runtime_1.jsx)(Box_1.default, { ...cellProps, onMouseEnter: handleMouseEnter, children: child }) }));
+            }, columnCount: columns.length, columnWidth: columnWidth, defaultOrderBy: defaultOrderBy, height: typeof height === "number"
+                ? height -
+                    headerHeight -
+                    (hideFooter ? 0 : bottomHeight + 1) -
+                    scrollbarSize
+                : height, headerRenderer: headerRenderer, idField: idField, footerRenderer: hideFooter ? undefined : footerRenderer, rowHeight: rowHeight, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
     }, [width]);
     return ((0, jsx_runtime_1.jsx)(Paper_1.default, { sx: {
             fontSize: "0.875rem",

package/lib/cjs/DataGridRenderers.d.ts

@@ -10,7 +10,7 @@ export declare namespace DataGridRenderers {
      * @param param Props
      * @returns Component
      */
-    function defaultCellRenderer<T extends Record<string, any>>({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }: GridCellRendererProps<T>): React.ReactNode;
+    function defaultCellRenderer<T extends Record<string, any>>({ cellProps, data, field, formattedValue, columnIndex, type, renderProps, triggerChange }: GridCellRendererProps<T>): React.ReactNode;
     /**
      * Default footer item renderer
      * @param rows Rows

package/lib/cjs/DataGridRenderers.js

@@ -21,7 +21,7 @@ var DataGridRenderers;
      * @param param Props
      * @returns Component
      */
-    function defaultCellRenderer({ cellProps, data, field, formattedValue, columnIndex, type, renderProps }) {
+    function defaultCellRenderer({ cellProps, data, field, formattedValue, columnIndex, type, renderProps, triggerChange }) {
         // Is loading
         if (data == null) {
             // First column, show loading indicator

package/lib/cjs/MUUtils.d.ts

@@ -1,5 +1,3 @@
-import { QueryRQ } from "@etsoo/appscript";
-import { IdType } from "@etsoo/shared";
 import { GridApiCommunity } from "@mui/x-data-grid/internals";
 /**
  * MU utilities
@@ -12,11 +10,4 @@ export declare namespace MUUtils {
      * @returns Results
      */
     function getGridData<T>(grid: GridApiCommunity, checkField: keyof T | ((item: T) => boolean)): T[];
-    /**
-     * Setup paging keysets
-     * @param data Paging data
-     * @param lastItem Last item of the query
-     * @param idField Id field
-     */
-    function setupPagingKeysets<T, K extends IdType = number>(data: QueryRQ<K>, lastItem: T | undefined, idField: keyof T & string): QueryRQ<K>;
 }

package/lib/cjs/MUUtils.js

@@ -29,30 +29,4 @@ var MUUtils;
         return items;
     }
     MUUtils.getGridData = getGridData;
-    /**
-     * Setup paging keysets
-     * @param data Paging data
-     * @param lastItem Last item of the query
-     * @param idField Id field
-     */
-    function setupPagingKeysets(data, lastItem, idField) {
-        // If the id field is not set for ordering, add it with descending
-        if (typeof data.queryPaging === "object") {
-            const orderBy = (data.queryPaging.orderBy ??= []);
-            const idUpper = idField.toUpperCase();
-            if (!orderBy.find((o) => o.field.toUpperCase() === idUpper)) {
-                orderBy.push({ field: idField, desc: true, unique: true });
-            }
-            // Set the paging keysets
-            if (lastItem) {
-                const keysets = orderBy.map((o) => Reflect.get(lastItem, o.field));
-                data.queryPaging.keysets = keysets;
-            }
-            else {
-                data.queryPaging.keysets = undefined;
-            }
-        }
-        return data;
-    }
-    MUUtils.setupPagingKeysets = setupPagingKeysets;
 })(MUUtils || (exports.MUUtils = MUUtils = {}));

package/lib/cjs/MobileListItemRenderer.d.ts

@@ -1,6 +1,6 @@
 import { ListItemReact } from "@etsoo/react";
 import React from "react";
-import { ScrollerListExInnerItemRendererProps } from "./ScrollerListEx";
+import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
@@ -8,7 +8,7 @@ import { ScrollerListExInnerItemRendererProps } from "./ScrollerListEx";
  * @param renderer Renderer for card content
  * @returns Component
  */
-export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }: ScrollerListExInnerItemRendererProps<T>, renderer: (data: T) => [
+export declare function MobileListItemRenderer<T>({ data, margins, style }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],

package/lib/cjs/MobileListItemRenderer.js

@@ -17,16 +17,15 @@ const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
  * @param renderer Renderer for card content
  * @returns Component
  */
-function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
+function MobileListItemRenderer({ data, margins, style }, renderer) {
     // Loading
     if (data == null)
         return (0, jsx_runtime_1.jsx)(LinearProgress_1.default, {});
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
     return ((0, jsx_runtime_1.jsxs)(Card_1.default, { sx: {
-            height: itemHeight,
             ...margins
-        }, children: [(0, jsx_runtime_1.jsx)(CardHeader_1.default, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? ((0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { iconButton: true, size: "small", anchorOrigin: {
+        }, style: style, children: [(0, jsx_runtime_1.jsx)(CardHeader_1.default, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? ((0, jsx_runtime_1.jsx)(MoreFab_1.MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                         vertical: "bottom",
                         horizontal: "right"
                     }, transformOrigin: {
@@ -37,6 +36,6 @@ function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
                     subheader: { variant: "caption" }
                 } }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { sx: {
                     paddingTop: 0,
-                    paddingBottom: cardActions == null ? Reflect.get(margins, "marginBottom") : 0
+                    paddingBottom: cardActions == null ? Reflect.get(margins, "marginBottom") ?? 0 : 0
                 }, children: children }), cardActions] }));
 }

package/lib/cjs/ResponsibleContainer.d.ts

@@ -1,13 +1,12 @@
 import React from "react";
-import { ListChildComponentProps } from "react-window";
 import { GridColumn, GridJsonData, GridMethodRef, GridTemplateType } from "@etsoo/react";
 import { DataGridExProps } from "./DataGridEx";
-import { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "./ScrollerListEx";
+import { ScrollerListExProps } from "./ScrollerListEx";
 import { SxProps, Theme } from "@mui/material/styles";
 /**
  * ResponsibleContainer props
  */
-export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProps<T>, "height" | "itemKey" | "loadData" | "mRef" | "onScroll" | "onItemsRendered" | "onInitLoad" | "onUpdateRows"> & {
+export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProps<T>, "height" | "loadData" | "mRef" | "onInitLoad" | "onUpdateRows" | "rowHeight"> & {
     /**
      * Height will be deducted
      * @param height Current calcuated height
@@ -41,18 +40,10 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
      * Grid height
      */
     height?: number;
-    /**
-     * Inner item renderer
-     */
-    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
     /**
      * Item renderer
      */
-    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
-    /**
-     * Item size, a function indicates its a variable size list
-     */
-    itemSize: ScrollerListExItemSize;
+    itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
     /**
      * Load data callback
      */
@@ -60,7 +51,7 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
     /**
      * Methods
      */
-    mRef?: React.MutableRefObject<GridMethodRef<T> | undefined>;
+    mRef?: React.RefObject<GridMethodRef<T> | undefined>;
     /**
      * Element ready callback
      */
@@ -77,6 +68,11 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
      * Quick action for double click or click under mobile
      */
     quickAction?: (data: T) => void;
+    /**
+     * Row height
+     * @param isGrid Is displaying as DataGrid
+     */
+    rowHeight?: number | [number, number] | (<B extends boolean>(isGrid: B) => B extends true ? DataGridExProps<T>["rowHeight"] : ScrollerListExProps<T>["rowHeight"]);
     /**
      * Size ready to read miliseconds span
      */

package/lib/cjs/ResponsibleContainer.js

@@ -32,7 +32,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal_1.MUGlobal.pagePaddings, pullToRefresh = true, quickAction, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, searchBarTop, ...rest } = props;
+    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = MUGlobal_1.MUGlobal.pagePaddings, pullToRefresh = true, quickAction, rowHeight, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, searchBarTop, ...rest } = props;
     // Labels
     const labels = Labels_1.Labels.CommonPage;
     // Refs
@@ -42,6 +42,8 @@ function ResponsibleContainer(props) {
         if (ref == null)
             return;
         state.ref = ref;
+        if (ref.element && elementReady)
+            elementReady(ref.element, true);
     });
     // Screen size detection
     const showDataGrid = (0, useMediaQuery_1.default)("(min-width:600px)");
@@ -58,6 +60,16 @@ function ResponsibleContainer(props) {
         state.mounted = true;
         return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
+    const getRowHeight = react_1.default.useCallback((isGrid) => {
+        if (rowHeight == null)
+            return undefined;
+        else if (typeof rowHeight === "number")
+            return isGrid ? undefined : rowHeight;
+        else if (Array.isArray(rowHeight))
+            return rowHeight[isGrid ? 0 : 1];
+        else
+            return rowHeight(isGrid);
+    }, [rowHeight]);
     // Search data
     const searchData = (0, react_2.useSearchParamsWithCache)(cacheKey);
     // On submit callback
@@ -83,44 +95,6 @@ function ResponsibleContainer(props) {
         state.rect = rect;
         return false;
     });
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (refs.current.initLoaded || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
-            // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
-            if (scrollData) {
-                if ("resetAfterColumnIndex" in ref) {
-                    const { scrollLeft, scrollTop } = JSON.parse(scrollData);
-                    globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
-                }
-                else {
-                    const { scrollOffset } = JSON.parse(scrollData);
-                    globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
-                }
-            }
-            // Update flag value
-            refs.current.initLoaded = true;
-            // Return cached rows and state
-            return [rows, state];
-        }
-        return undefined;
-    };
-    const onListScroll = (props) => {
-        if (!cacheKey || !refs.current.initLoaded)
-            return;
-        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-    };
-    const onGridScroll = (props) => {
-        if (!cacheKey || !refs.current.initLoaded)
-            return;
-        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-    };
     // Rect
     const rect = dimensions[0][2];
     // Create list
@@ -150,26 +124,13 @@ function ResponsibleContainer(props) {
         if (adjustFabHeight)
             heightLocal = adjustFabHeight(heightLocal, showDataGrid);
         if (showDataGrid) {
-            // Delete
-            delete rest.itemRenderer;
-            return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "DataGridBox", children: (0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), outerRef: (element) => {
-                        if (element != null && elementReady)
-                            elementReady(element, true);
-                    }, onScroll: onGridScroll, columns: columns, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, ...rest }) }));
+            // Remove useless props
+            const { itemRenderer, ...gridProps } = rest;
+            return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "DataGridBox", children: (0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), columns: columns, rowHeight: getRowHeight(true), ...gridProps }) }));
         }
-        // Delete
-        delete rest.checkable;
-        delete rest.borderRowsCount;
-        delete rest.bottomHeight;
-        delete rest.footerItemRenderer;
-        delete rest.headerHeight;
-        delete rest.hideFooter;
-        delete rest.hoverColor;
-        delete rest.selectable;
-        return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "ListBox", sx: { height: heightLocal }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, mRef: mRefs, onClick: (event, data) => quickAction && react_2.ReactUtils.isSafeClick(event) && quickAction(data), oRef: (element) => {
-                    if (element != null && elementReady)
-                        elementReady(element, false);
-                }, onScroll: onListScroll, ...rest }) }));
+        // Remove useless props
+        const { checkable, borderRowsCount, bottomHeight, footerItemRenderer, headerHeight, hideFooter, hoverColor, selectable, onCellsRendered, ...listProps } = rest;
+        return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "ListBox", sx: { height: heightLocal }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && react_2.ReactUtils.isSafeClick(event) && quickAction(data), rowHeight: getRowHeight(false), ...listProps }) }));
     })();
     const searchBar = react_1.default.useMemo(() => {
         if (!hasFields ||

package/lib/cjs/ScrollerListEx.d.ts

@@ -1,55 +1,55 @@
 import { ScrollerListProps } from "@etsoo/react";
 import React from "react";
-import { ListChildComponentProps } from "react-window";
 import { MouseEventWithDataHandler } from "./MUGlobal";
 /**
  * Extended ScrollerList inner item renderer props
  */
-export interface ScrollerListExInnerItemRendererProps<T> extends ListChildComponentProps<T> {
+export type ScrollerListExItemRendererProps<T> = {
     /**
-     * Item selected
+     * Row index
      */
-    selected: boolean;
+    index: number;
     /**
-     * Item height
+     * Row data
      */
-    itemHeight: number;
+    data: T;
     /**
-     * Item space
+     * Style
      */
-    space: number;
+    style: React.CSSProperties;
     /**
      * Default margins
      */
     margins: object;
-}
-/**
- * Extended ScrollerList ItemSize type
- * 1. Callback function
- * 2. Static sets
- * 3. Dynamic left & right margin calculation
- */
-export type ScrollerListExItemSize = ((index: number) => [number, number] | [number, number, object]) | [number, number] | [number, object, (number | string)?];
+    /**
+     * Item selected
+     */
+    selected: boolean;
+};
 /**
  * Extended ScrollerList Props
  */
-export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "itemRenderer" | "itemSize"> & {
+export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "rowComponent" | "rowHeight" | "onClick" | "onDoubleClick" | "onInitLoad"> & Partial<Pick<ScrollerListProps<T>, "rowHeight">> & {
     /**
      * Alternating colors for odd/even rows
      */
     alternatingColors?: [string?, string?];
     /**
-     * Inner item renderer
+     * Cache key
      */
-    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
+    cacheKey?: string;
     /**
-     * Item renderer
+     * Cache minutes
      */
-    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    cacheMinutes?: number;
     /**
-     * Item size, a function indicates its a variable size list
+     * Cell margins, default to half of MUGlobal.pagePaddings
+     */
+    cellMargins?: object;
+    /**
+     * Item renderer
      */
-    itemSize: ScrollerListExItemSize;
+    itemRenderer?: (props: ScrollerListExItemRendererProps<T>) => React.ReactNode;
     /**
      * Double click handler
      */