@etsoo/materialui 1.5.72 → 1.5.74

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/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>, "cellComponent" | "columnCount" | "columnWidth" | "onClick" | "onDoubleClick" | "onInitLoad" | "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
      */

package/lib/cjs/DataGridEx.js

@@ -137,7 +137,7 @@ function DataGridEx(props) {
             }) }));
     }
     // Destruct
-    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, 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
@@ -314,7 +314,7 @@ function DataGridEx(props) {
                     headerHeight -
                     (hideFooter ? 0 : bottomHeight + 1) -
                     scrollbarSize
-                : height, headerRenderer: headerRenderer, idField: idField, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
+                : 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/MobileListItemRenderer.d.ts

@@ -8,7 +8,7 @@ import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
  * @param renderer Renderer for card content
  * @returns Component
  */
-export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
+export declare function MobileListItemRenderer<T>({ data, margins }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],

package/lib/cjs/MobileListItemRenderer.js

@@ -17,14 +17,13 @@ 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 }, 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: {
                         vertical: "bottom",
@@ -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,12 +1,12 @@
 import React from "react";
 import { GridColumn, GridJsonData, GridMethodRef, GridTemplateType } from "@etsoo/react";
 import { DataGridExProps } from "./DataGridEx";
-import { ScrollerListExItemSize, ScrollerListExProps } 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
@@ -44,10 +44,6 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
      * Item renderer
      */
     itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
-    /**
-     * Item size, a function indicates its a variable size list
-     */
-    itemSize: ScrollerListExItemSize;
     /**
      * Load data callback
      */
@@ -55,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
      */
@@ -72,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
@@ -60,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
@@ -116,11 +126,11 @@ function ResponsibleContainer(props) {
         if (showDataGrid) {
             // 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, ...gridProps }) }));
+            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 }) }));
         }
         // Remove useless props
-        const { checkable, borderRowsCount, bottomHeight, footerItemRenderer, headerHeight, hideFooter, hoverColor, selectable, ...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), ...listProps }) }));
+        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

@@ -17,14 +17,6 @@ export type ScrollerListExItemRendererProps<T> = {
      * Style
      */
     style: React.CSSProperties;
-    /**
-     * Item height
-     */
-    itemHeight: number;
-    /**
-     * Item space
-     */
-    space: number;
     /**
      * Default margins
      */
@@ -34,17 +26,10 @@ export type ScrollerListExItemRendererProps<T> = {
      */
     selected: boolean;
 };
-/**
- * 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)?];
 /**
  * Extended ScrollerList Props
  */
-export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "rowComponent" | "rowHeight" | "onClick" | "onDoubleClick" | "onInitLoad"> & {
+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
      */
@@ -58,13 +43,13 @@ export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "
      */
     cacheMinutes?: number;
     /**
-     * Item renderer
+     * Cell margins, default to half of MUGlobal.pagePaddings
      */
-    itemRenderer?: (props: ScrollerListExItemRendererProps<T>) => React.ReactNode;
+    cellMargins?: object;
     /**
-     * Item size, a function indicates its a variable size list
+     * Item renderer
      */
-    itemSize: ScrollerListExItemSize;
+    itemRenderer?: (props: ScrollerListExItemRendererProps<T>) => React.ReactNode;
     /**
      * Double click handler
      */

package/lib/cjs/ScrollerListEx.js

@@ -10,7 +10,6 @@ const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
 const react_2 = __importDefault(require("react"));
 const MUGlobal_1 = require("./MUGlobal");
-const styles_1 = require("@mui/material/styles");
 const GridUtils_1 = require("./GridUtils");
 const useListCacheInitLoad_1 = require("./uses/useListCacheInitLoad");
 const Box_1 = __importDefault(require("@mui/material/Box"));
@@ -48,31 +47,12 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
-// Default margin
-// horizon: null means full horizontal margin, -1 means all half, >=0 means left/right
-const defaultMargin = (margin, horizon) => {
-    const half = MUGlobal_1.MUGlobal.half(margin);
-    if (horizon == null) {
-        const half = MUGlobal_1.MUGlobal.half(margin);
-        return {
-            marginLeft: margin,
-            marginRight: margin,
-            marginTop: half,
-            marginBottom: half
-        };
-    }
-    if ((typeof horizon === "number" && horizon >= 0) ||
-        (typeof horizon === "string" && /^-?\d+/.test(horizon))) {
-        return {
-            marginLeft: horizon,
-            marginRight: horizon,
-            marginTop: half,
-            marginBottom: half
-        };
-    }
+// Default margins
+const defaultMargins = () => {
+    const half = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings);
     return {
-        marginLeft: half,
-        marginRight: half,
+        marginLeft: 0,
+        marginRight: 0,
         marginTop: half,
         marginBottom: half
     };
@@ -104,35 +84,11 @@ function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, idField = "id", itemSize, itemRenderer = ({ data, itemHeight, margins }) => ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "pre", sx: {
-            height: itemHeight,
+    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, cellMargins = defaultMargins(), idField = "id", itemRenderer = ({ data, margins }) => ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "pre", sx: {
             ...margins
-        }, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, selectedColor = "#edf4fb", ...rest } = props;
+        }, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 116, selectedColor = "#edf4fb", ...rest } = props;
     // Init handler
     const initHandler = (0, useListCacheInitLoad_1.useListCacheInitLoad)(cacheKey, cacheMinutes);
-    // Theme
-    const theme = (0, styles_1.useTheme)();
-    // Cache calculation
-    const itemSizeResult = react_2.default.useMemo(() => {
-        if (typeof itemSize === "function")
-            return undefined;
-        const [size, spaces, h] = itemSize;
-        if (typeof spaces === "number")
-            return [size, spaces, defaultMargin(MUGlobal_1.MUGlobal.pagePaddings, undefined)];
-        return [size, MUGlobal_1.MUGlobal.getSpace(spaces, theme), defaultMargin(spaces, h)];
-    }, [itemSize]);
-    // Calculate size
-    const calculateItemSize = (index) => {
-        // Callback function
-        if (typeof itemSize === "function") {
-            const result = itemSize(index);
-            if (result.length == 2)
-                return [...result, defaultMargin(MUGlobal_1.MUGlobal.pagePaddings)];
-            return result;
-        }
-        // Calculation
-        return itemSizeResult;
-    };
     const onUpdateRowsHandler = react_2.default.useCallback((rows, state) => {
         GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
         onUpdateRows?.(rows, state);
@@ -140,24 +96,19 @@ function ScrollerListEx(props) {
     // Layout
     return ((0, jsx_runtime_1.jsx)(react_1.ScrollerList, { className: shared_1.Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, onRowsRendered: cacheKey
             ? (visibleRows) => sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(visibleRows))
-            : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, rowComponent: ({ index, items, style }) => {
+            : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, rowComponent: (cellProps) => {
+            const { index, style, items } = cellProps;
             const data = items[index];
             const selected = isSelected(data);
             const rowClass = `ScrollerListEx-Row${index % 2}${selected ? ` ${selectedClassName}` : ""}`;
-            const [itemHeight, space, margins] = calculateItemSize(index);
             // Child
             const child = itemRenderer({
                 index,
                 data,
                 style,
                 selected,
-                itemHeight,
-                space,
-                margins
+                margins: cellMargins
             });
             return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data), children: child }));
-        }, rowHeight: (index) => {
-            const [size, space] = calculateItemSize(index);
-            return size + space;
-        }, ...rest }));
+        }, rowHeight: rowHeight, ...rest }));
 }

package/lib/cjs/pages/ResponsivePage.d.ts

@@ -1,12 +1,13 @@
 import React from "react";
+import { ResponsibleContainerProps } from "../ResponsibleContainer";
 import type { DataGridPageProps } from "./DataGridPageProps";
-import type { ScrollerListExItemSize, ScrollerListExProps } from "../ScrollerListEx";
+import type { ScrollerListExProps } from "../ScrollerListEx";
 import { GridMethodRef } from "@etsoo/react";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
  * Response page props
  */
-export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
+export type ResponsePageProps<T extends object, F> = Omit<DataGridPageProps<T, F>, "mRef" | "rowHeight"> & {
     /**
      *
      * @param height Current height
@@ -22,14 +23,10 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
      * Item renderer
      */
     itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
-    /**
-     * Item size, a function indicates its a variable size list
-     */
-    itemSize: ScrollerListExItemSize;
     /**
      * Methods
      */
-    mRef?: React.MutableRefObject<GridMethodRef<T> | undefined>;
+    mRef?: React.RefObject<GridMethodRef<T> | undefined>;
     /**
      * Pull to refresh data
      */
@@ -42,6 +39,10 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
      * Operation message handler
      */
     operationMessageHandler?: OperationMessageHandlerAll;
+    /**
+     * Row height
+     */
+    rowHeight?: ResponsibleContainerProps<T, F>["rowHeight"];
 };
 /**
  * Fixed height list page

package/lib/mjs/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>, "cellComponent" | "columnCount" | "columnWidth" | "onClick" | "onDoubleClick" | "onInitLoad" | "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
      */

package/lib/mjs/DataGridEx.js

@@ -130,7 +130,7 @@ export function DataGridEx(props) {
             }) }));
     }
     // Destruct
-    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.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = React.createRef(), onClick, onDataChange, onDoubleClick, onUpdateRows, 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.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = React.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
@@ -307,7 +307,7 @@ export function DataGridEx(props) {
                     headerHeight -
                     (hideFooter ? 0 : bottomHeight + 1) -
                     scrollbarSize
-                : height, headerRenderer: headerRenderer, idField: idField, footerRenderer: hideFooter ? undefined : footerRenderer, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
+                : height, headerRenderer: headerRenderer, idField: idField, footerRenderer: hideFooter ? undefined : footerRenderer, rowHeight: rowHeight, width: Math.max(width ?? 0, widthCalculator.total), mRef: mRefLocal, ...rest }));
     }, [width]);
     return (_jsx(Paper, { sx: {
             fontSize: "0.875rem",

package/lib/mjs/MobileListItemRenderer.d.ts

@@ -8,7 +8,7 @@ import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
  * @param renderer Renderer for card content
  * @returns Component
  */
-export declare function MobileListItemRenderer<T>({ data, itemHeight, margins }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
+export declare function MobileListItemRenderer<T>({ data, margins }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],

package/lib/mjs/MobileListItemRenderer.js

@@ -11,14 +11,13 @@ import CardContent from "@mui/material/CardContent";
  * @param renderer Renderer for card content
  * @returns Component
  */
-export function MobileListItemRenderer({ data, itemHeight, margins }, renderer) {
+export function MobileListItemRenderer({ data, margins }, renderer) {
     // Loading
     if (data == null)
         return _jsx(LinearProgress, {});
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
     return (_jsxs(Card, { sx: {
-            height: itemHeight,
             ...margins
         }, children: [_jsx(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (_jsx(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                         vertical: "bottom",
@@ -31,6 +30,6 @@ export function MobileListItemRenderer({ data, itemHeight, margins }, renderer)
                     subheader: { variant: "caption" }
                 } }), _jsx(CardContent, { 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/mjs/ResponsibleContainer.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import { GridColumn, GridJsonData, GridMethodRef, GridTemplateType } from "@etsoo/react";
 import { DataGridExProps } from "./DataGridEx";
-import { ScrollerListExItemSize, ScrollerListExProps } 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
@@ -44,10 +44,6 @@ export type ResponsibleContainerProps<T extends object, F> = Omit<DataGridExProp
      * Item renderer
      */
     itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
-    /**
-     * Item size, a function indicates its a variable size list
-     */
-    itemSize: ScrollerListExItemSize;
     /**
      * Load data callback
      */
@@ -55,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
      */
@@ -72,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/mjs/ResponsibleContainer.js

@@ -26,7 +26,7 @@ function defaultContainerBoxSx(paddings, hasField, _dataGrid) {
  */
 export function ResponsibleContainer(props) {
     // Destruct
-    const { adjustHeight, adjustFabHeight, cacheKey, cacheMinutes = 15, columns, containerBoxSx = defaultContainerBoxSx, elementReady, fields, fieldTemplate, height, loadData, mRef, paddings = 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.pagePaddings, pullToRefresh = true, quickAction, rowHeight, sizeReadyMiliseconds = 0, searchBarHeight = 45.6, searchBarBottom = 8, searchBarTop, ...rest } = props;
     // Labels
     const labels = Labels.CommonPage;
     // Refs
@@ -54,6 +54,16 @@ export function ResponsibleContainer(props) {
         state.mounted = true;
         return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
+    const getRowHeight = React.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 = useSearchParamsWithCache(cacheKey);
     // On submit callback
@@ -110,11 +120,11 @@ export function ResponsibleContainer(props) {
         if (showDataGrid) {
             // Remove useless props
             const { itemRenderer, ...gridProps } = rest;
-            return (_jsx(Box, { className: "DataGridBox", children: _jsx(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), columns: columns, ...gridProps }) }));
+            return (_jsx(Box, { className: "DataGridBox", children: _jsx(DataGridEx, { autoLoad: !hasFields, height: heightLocal, width: rect.width, loadData: localLoadData, mRef: mRefs, onDoubleClick: (_, data) => quickAction && quickAction(data), columns: columns, rowHeight: getRowHeight(true), ...gridProps }) }));
         }
         // Remove useless props
-        const { checkable, borderRowsCount, bottomHeight, footerItemRenderer, headerHeight, hideFooter, hoverColor, selectable, ...listProps } = rest;
-        return (_jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), ...listProps }) }));
+        const { checkable, borderRowsCount, bottomHeight, footerItemRenderer, headerHeight, hideFooter, hoverColor, selectable, onCellsRendered, ...listProps } = rest;
+        return (_jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), rowHeight: getRowHeight(false), ...listProps }) }));
     })();
     const searchBar = React.useMemo(() => {
         if (!hasFields ||

package/lib/mjs/ScrollerListEx.d.ts

@@ -17,14 +17,6 @@ export type ScrollerListExItemRendererProps<T> = {
      * Style
      */
     style: React.CSSProperties;
-    /**
-     * Item height
-     */
-    itemHeight: number;
-    /**
-     * Item space
-     */
-    space: number;
     /**
      * Default margins
      */
@@ -34,17 +26,10 @@ export type ScrollerListExItemRendererProps<T> = {
      */
     selected: boolean;
 };
-/**
- * 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)?];
 /**
  * Extended ScrollerList Props
  */
-export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "rowComponent" | "rowHeight" | "onClick" | "onDoubleClick" | "onInitLoad"> & {
+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
      */
@@ -58,13 +43,13 @@ export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "
      */
     cacheMinutes?: number;
     /**
-     * Item renderer
+     * Cell margins, default to half of MUGlobal.pagePaddings
      */
-    itemRenderer?: (props: ScrollerListExItemRendererProps<T>) => React.ReactNode;
+    cellMargins?: object;
     /**
-     * Item size, a function indicates its a variable size list
+     * Item renderer
      */
-    itemSize: ScrollerListExItemSize;
+    itemRenderer?: (props: ScrollerListExItemRendererProps<T>) => React.ReactNode;
     /**
      * Double click handler
      */