@etsoo/materialui 1.5.74 → 1.5.76

package/lib/cjs/DataGridEx.js

@@ -54,7 +54,7 @@ const doRowItems = (parent, rowIndex, callback) => {
     if (parent == null || rowIndex == null)
         return;
     parent
-        ?.querySelectorAll(`div[data-row="${rowIndex}"]`)
+        ?.querySelectorAll(`div[role="row"][aria-rowindex="${rowIndex}"]`)
         .forEach((rowItem) => {
         callback(rowItem);
     });
@@ -254,7 +254,7 @@ function DataGridEx(props) {
     // 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)), onCellsRendered: cacheKey
-                ? (visibleCells) => sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(visibleCells))
+                ? (visibleCells) => sessionStorage.setItem((0, useGridCacheInitLoad_1.gridCacheKeyGenerator)(cacheKey), 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];

package/lib/cjs/MobileListItemRenderer.d.ts

@@ -1,17 +1,19 @@
 import { ListItemReact } from "@etsoo/react";
 import React from "react";
 import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
+import { SxProps, Theme } from "@mui/material/styles";
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
  * @param margin Margin
  * @param renderer Renderer for card content
+ * @param cellSX Cell sx
  * @returns Component
  */
-export declare function MobileListItemRenderer<T>({ data, margins }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
+export declare function MobileListItemRenderer<T>({ data }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],
     React.ReactNode,
     React.ReactNode?
-]): import("react/jsx-runtime").JSX.Element;
+], cellSX?: SxProps<Theme>): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/MobileListItemRenderer.js

@@ -15,16 +15,20 @@ const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
  * @param param0 List renderer props
  * @param margin Margin
  * @param renderer Renderer for card content
+ * @param cellSX Cell sx
  * @returns Component
  */
-function MobileListItemRenderer({ data, margins }, renderer) {
+function MobileListItemRenderer({ data }, renderer, cellSX) {
     // 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: {
-            ...margins
+            height: `calc(100% - 8px)`,
+            marginTop: "8px",
+            overflow: "auto",
+            ...cellSX
         }, 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"
@@ -34,8 +38,5 @@ function MobileListItemRenderer({ data, margins }, renderer) {
                     }, actions: actions })) : (actions), title: title, subheader: subheader, slotProps: {
                     title: { variant: "body2" },
                     subheader: { variant: "caption" }
-                } }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { sx: {
-                    paddingTop: 0,
-                    paddingBottom: cardActions == null ? Reflect.get(margins, "marginBottom") ?? 0 : 0
-                }, children: children }), cardActions] }));
+                } }), (0, jsx_runtime_1.jsx)(CardContent_1.default, { children: children }), cardActions] }));
 }

package/lib/cjs/ResponsibleContainer.js

@@ -126,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, rowHeight: getRowHeight(true), ...gridProps }) }));
+            return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "DataGridBox", children: (0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: !hasFields, cacheKey: cacheKey, cacheMinutes: cacheMinutes, 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, 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 }) }));
+        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, cacheKey: cacheKey, cacheMinutes: cacheMinutes, 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,10 +17,6 @@ export type ScrollerListExItemRendererProps<T> = {
      * Style
      */
     style: React.CSSProperties;
-    /**
-     * Default margins
-     */
-    margins: object;
     /**
      * Item selected
      */
@@ -42,10 +38,6 @@ export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "
      * Cache minutes
      */
     cacheMinutes?: number;
-    /**
-     * Cell margins, default to half of MUGlobal.pagePaddings
-     */
-    cellMargins?: object;
     /**
      * Item renderer
      */

package/lib/cjs/ScrollerListEx.js

@@ -9,7 +9,6 @@ const css_1 = require("@emotion/css");
 const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
 const react_2 = __importDefault(require("react"));
-const MUGlobal_1 = require("./MUGlobal");
 const GridUtils_1 = require("./GridUtils");
 const useListCacheInitLoad_1 = require("./uses/useListCacheInitLoad");
 const Box_1 = __importDefault(require("@mui/material/Box"));
@@ -47,16 +46,6 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
-// Default margins
-const defaultMargins = () => {
-    const half = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings);
-    return {
-        marginLeft: 0,
-        marginRight: 0,
-        marginTop: half,
-        marginBottom: half
-    };
-};
 /**
  * Extended ScrollerList
  * @param props Props
@@ -84,9 +73,7 @@ function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    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, rowHeight = 116, selectedColor = "#edf4fb", ...rest } = props;
+    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, idField = "id", itemRenderer = ({ data }) => ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "pre", sx: { height: "100%", overflow: "auto" }, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 116, selectedColor = "#edf4fb", ...rest } = props;
     // Init handler
     const initHandler = (0, useListCacheInitLoad_1.useListCacheInitLoad)(cacheKey, cacheMinutes);
     const onUpdateRowsHandler = react_2.default.useCallback((rows, state) => {
@@ -95,7 +82,7 @@ function ScrollerListEx(props) {
     }, [onUpdateRows, cacheKey]);
     // 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))
+            ? (visibleRows) => sessionStorage.setItem((0, useListCacheInitLoad_1.listCacheKeyGenerator)(cacheKey), JSON.stringify(visibleRows))
             : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, rowComponent: (cellProps) => {
             const { index, style, items } = cellProps;
             const data = items[index];
@@ -106,8 +93,7 @@ function ScrollerListEx(props) {
                 index,
                 data,
                 style,
-                selected,
-                margins: cellMargins
+                selected
             });
             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: rowHeight, ...rest }));

package/lib/cjs/uses/useGridCacheInitLoad.d.ts

@@ -1,2 +1,3 @@
 import { ScrollerGridProps } from "@etsoo/react";
+export declare function gridCacheKeyGenerator(cacheKey: string): string;
 export declare function useGridCacheInitLoad<T extends object>(cacheKey: string | undefined, cacheMinutes: number): ScrollerGridProps<T>["onInitLoad"];

package/lib/cjs/uses/useGridCacheInitLoad.js

@@ -3,11 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridCacheKeyGenerator = gridCacheKeyGenerator;
 exports.useGridCacheInitLoad = useGridCacheInitLoad;
 const react_1 = require("@etsoo/react");
 const react_2 = __importDefault(require("react"));
 const GridUtils_1 = require("../GridUtils");
 const shared_1 = require("@etsoo/shared");
+function gridCacheKeyGenerator(cacheKey) {
+    return `${cacheKey}-grid-scroll`;
+}
 function useGridCacheInitLoad(cacheKey, cacheMinutes) {
     // Reference
     const ref = react_2.default.useRef(null);
@@ -25,7 +29,7 @@ function useGridCacheInitLoad(cacheKey, cacheMinutes) {
         ref.current = true;
         return (ref) => {
             // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            const scrollData = sessionStorage.getItem(gridCacheKeyGenerator(cacheKey));
             if (scrollData) {
                 const data = JSON.parse(scrollData);
                 shared_1.ExtendUtils.waitFor(() => ref.scrollToCell({

package/lib/cjs/uses/useListCacheInitLoad.d.ts

@@ -1,2 +1,3 @@
 import { ScrollerListProps } from "@etsoo/react";
+export declare function listCacheKeyGenerator(cacheKey: string): string;
 export declare function useListCacheInitLoad<T extends object>(cacheKey: string | undefined, cacheMinutes: number): ScrollerListProps<T>["onInitLoad"];

package/lib/cjs/uses/useListCacheInitLoad.js

@@ -3,11 +3,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.listCacheKeyGenerator = listCacheKeyGenerator;
 exports.useListCacheInitLoad = useListCacheInitLoad;
 const react_1 = require("@etsoo/react");
 const react_2 = __importDefault(require("react"));
 const GridUtils_1 = require("../GridUtils");
 const shared_1 = require("@etsoo/shared");
+function listCacheKeyGenerator(cacheKey) {
+    return `${cacheKey}-list-scroll`;
+}
 function useListCacheInitLoad(cacheKey, cacheMinutes) {
     // Reference
     const ref = react_2.default.useRef(null);
@@ -25,7 +29,7 @@ function useListCacheInitLoad(cacheKey, cacheMinutes) {
         ref.current = true;
         return (ref) => {
             // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            const scrollData = sessionStorage.getItem(listCacheKeyGenerator(cacheKey));
             if (scrollData) {
                 const data = JSON.parse(scrollData);
                 shared_1.ExtendUtils.waitFor(() => ref.scrollToRow({ index: data.startIndex }), 100);

package/lib/mjs/DataGridEx.js

@@ -10,7 +10,7 @@ import TableSortLabel from "@mui/material/TableSortLabel";
 import Checkbox from "@mui/material/Checkbox";
 import Paper from "@mui/material/Paper";
 import { GridUtils } from "./GridUtils";
-import { useGridCacheInitLoad } from "./uses/useGridCacheInitLoad";
+import { gridCacheKeyGenerator, useGridCacheInitLoad } from "./uses/useGridCacheInitLoad";
 // Borders
 const boldBorder = "2px solid rgba(224, 224, 224, 1)";
 const thinBorder = "1px solid rgba(224, 224, 224, 1)";
@@ -47,7 +47,7 @@ const doRowItems = (parent, rowIndex, callback) => {
     if (parent == null || rowIndex == null)
         return;
     parent
-        ?.querySelectorAll(`div[data-row="${rowIndex}"]`)
+        ?.querySelectorAll(`div[role="row"][aria-rowindex="${rowIndex}"]`)
         .forEach((rowItem) => {
         callback(rowItem);
     });
@@ -247,7 +247,7 @@ export function DataGridEx(props) {
     // Table
     const table = React.useMemo(() => {
         return (_jsx(ScrollerGrid, { className: Utils.mergeClasses("DataGridEx-Body", "DataGridEx-CustomBar", className, createGridStyle(alternatingColors, selectedColor, hoverColor)), onCellsRendered: cacheKey
-                ? (visibleCells) => sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(visibleCells))
+                ? (visibleCells) => sessionStorage.setItem(gridCacheKeyGenerator(cacheKey), JSON.stringify(visibleCells))
                 : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, cellComponent: ({ rowIndex, columnIndex, style, rows, states }) => {
                 // Column
                 const { align, cellRenderer = DataGridRenderers.defaultCellRenderer, cellBoxStyle, field, type, valueFormatter, renderProps } = columns[columnIndex];

package/lib/mjs/MobileListItemRenderer.d.ts

@@ -1,17 +1,19 @@
 import { ListItemReact } from "@etsoo/react";
 import React from "react";
 import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
+import { SxProps, Theme } from "@mui/material/styles";
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
  * @param margin Margin
  * @param renderer Renderer for card content
+ * @param cellSX Cell sx
  * @returns Component
  */
-export declare function MobileListItemRenderer<T>({ data, margins }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
+export declare function MobileListItemRenderer<T>({ data }: ScrollerListExItemRendererProps<T>, renderer: (data: T) => [
     string,
     string | undefined,
     React.ReactNode | (ListItemReact | boolean)[],
     React.ReactNode,
     React.ReactNode?
-]): import("react/jsx-runtime").JSX.Element;
+], cellSX?: SxProps<Theme>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/MobileListItemRenderer.js

@@ -9,16 +9,20 @@ import CardContent from "@mui/material/CardContent";
  * @param param0 List renderer props
  * @param margin Margin
  * @param renderer Renderer for card content
+ * @param cellSX Cell sx
  * @returns Component
  */
-export function MobileListItemRenderer({ data, margins }, renderer) {
+export function MobileListItemRenderer({ data }, renderer, cellSX) {
     // Loading
     if (data == null)
         return _jsx(LinearProgress, {});
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
     return (_jsxs(Card, { sx: {
-            ...margins
+            height: `calc(100% - 8px)`,
+            marginTop: "8px",
+            overflow: "auto",
+            ...cellSX
         }, children: [_jsx(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (_jsx(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                         vertical: "bottom",
                         horizontal: "right"
@@ -28,8 +32,5 @@ export function MobileListItemRenderer({ data, margins }, renderer) {
                     }, actions: actions })) : (actions), title: title, subheader: subheader, slotProps: {
                     title: { variant: "body2" },
                     subheader: { variant: "caption" }
-                } }), _jsx(CardContent, { sx: {
-                    paddingTop: 0,
-                    paddingBottom: cardActions == null ? Reflect.get(margins, "marginBottom") ?? 0 : 0
-                }, children: children }), cardActions] }));
+                } }), _jsx(CardContent, { children: children }), cardActions] }));
 }

package/lib/mjs/ResponsibleContainer.js

@@ -120,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, rowHeight: getRowHeight(true), ...gridProps }) }));
+            return (_jsx(Box, { className: "DataGridBox", children: _jsx(DataGridEx, { autoLoad: !hasFields, cacheKey: cacheKey, cacheMinutes: cacheMinutes, 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, 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 }) }));
+        return (_jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, cacheKey: cacheKey, cacheMinutes: cacheMinutes, 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,10 +17,6 @@ export type ScrollerListExItemRendererProps<T> = {
      * Style
      */
     style: React.CSSProperties;
-    /**
-     * Default margins
-     */
-    margins: object;
     /**
      * Item selected
      */
@@ -42,10 +38,6 @@ export type ScrollerListExProps<T extends object> = Omit<ScrollerListProps<T>, "
      * Cache minutes
      */
     cacheMinutes?: number;
-    /**
-     * Cell margins, default to half of MUGlobal.pagePaddings
-     */
-    cellMargins?: object;
     /**
      * Item renderer
      */

package/lib/mjs/ScrollerListEx.js

@@ -3,9 +3,8 @@ import { css } from "@emotion/css";
 import { ScrollerList } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
 import React from "react";
-import { MUGlobal } from "./MUGlobal";
 import { GridUtils } from "./GridUtils";
-import { useListCacheInitLoad } from "./uses/useListCacheInitLoad";
+import { listCacheKeyGenerator, useListCacheInitLoad } from "./uses/useListCacheInitLoad";
 import Box from "@mui/material/Box";
 // Scroll bar size
 const scrollbarSize = 16;
@@ -41,16 +40,6 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
-// Default margins
-const defaultMargins = () => {
-    const half = MUGlobal.half(MUGlobal.pagePaddings);
-    return {
-        marginLeft: 0,
-        marginRight: 0,
-        marginTop: half,
-        marginBottom: half
-    };
-};
 /**
  * Extended ScrollerList
  * @param props Props
@@ -78,9 +67,7 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, cellMargins = defaultMargins(), idField = "id", itemRenderer = ({ data, margins }) => (_jsx(Box, { component: "pre", sx: {
-            ...margins
-        }, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 116, selectedColor = "#edf4fb", ...rest } = props;
+    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, idField = "id", itemRenderer = ({ data }) => (_jsx(Box, { component: "pre", sx: { height: "100%", overflow: "auto" }, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 116, selectedColor = "#edf4fb", ...rest } = props;
     // Init handler
     const initHandler = useListCacheInitLoad(cacheKey, cacheMinutes);
     const onUpdateRowsHandler = React.useCallback((rows, state) => {
@@ -89,7 +76,7 @@ export function ScrollerListEx(props) {
     }, [onUpdateRows, cacheKey]);
     // Layout
     return (_jsx(ScrollerList, { className: Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, onRowsRendered: cacheKey
-            ? (visibleRows) => sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(visibleRows))
+            ? (visibleRows) => sessionStorage.setItem(listCacheKeyGenerator(cacheKey), JSON.stringify(visibleRows))
             : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, rowComponent: (cellProps) => {
             const { index, style, items } = cellProps;
             const data = items[index];
@@ -100,8 +87,7 @@ export function ScrollerListEx(props) {
                 index,
                 data,
                 style,
-                selected,
-                margins: cellMargins
+                selected
             });
             return (_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: rowHeight, ...rest }));

package/lib/mjs/uses/useGridCacheInitLoad.d.ts

@@ -1,2 +1,3 @@
 import { ScrollerGridProps } from "@etsoo/react";
+export declare function gridCacheKeyGenerator(cacheKey: string): string;
 export declare function useGridCacheInitLoad<T extends object>(cacheKey: string | undefined, cacheMinutes: number): ScrollerGridProps<T>["onInitLoad"];

package/lib/mjs/uses/useGridCacheInitLoad.js

@@ -2,6 +2,9 @@ import { useSearchParamsWithCache } from "@etsoo/react";
 import React from "react";
 import { GridUtils } from "../GridUtils";
 import { ExtendUtils } from "@etsoo/shared";
+export function gridCacheKeyGenerator(cacheKey) {
+    return `${cacheKey}-grid-scroll`;
+}
 export function useGridCacheInitLoad(cacheKey, cacheMinutes) {
     // Reference
     const ref = React.useRef(null);
@@ -19,7 +22,7 @@ export function useGridCacheInitLoad(cacheKey, cacheMinutes) {
         ref.current = true;
         return (ref) => {
             // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            const scrollData = sessionStorage.getItem(gridCacheKeyGenerator(cacheKey));
             if (scrollData) {
                 const data = JSON.parse(scrollData);
                 ExtendUtils.waitFor(() => ref.scrollToCell({

package/lib/mjs/uses/useListCacheInitLoad.d.ts

@@ -1,2 +1,3 @@
 import { ScrollerListProps } from "@etsoo/react";
+export declare function listCacheKeyGenerator(cacheKey: string): string;
 export declare function useListCacheInitLoad<T extends object>(cacheKey: string | undefined, cacheMinutes: number): ScrollerListProps<T>["onInitLoad"];

package/lib/mjs/uses/useListCacheInitLoad.js

@@ -2,6 +2,9 @@ import { useSearchParamsWithCache } from "@etsoo/react";
 import React from "react";
 import { GridUtils } from "../GridUtils";
 import { ExtendUtils } from "@etsoo/shared";
+export function listCacheKeyGenerator(cacheKey) {
+    return `${cacheKey}-list-scroll`;
+}
 export function useListCacheInitLoad(cacheKey, cacheMinutes) {
     // Reference
     const ref = React.useRef(null);
@@ -19,7 +22,7 @@ export function useListCacheInitLoad(cacheKey, cacheMinutes) {
         ref.current = true;
         return (ref) => {
             // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            const scrollData = sessionStorage.getItem(listCacheKeyGenerator(cacheKey));
             if (scrollData) {
                 const data = JSON.parse(scrollData);
                 ExtendUtils.waitFor(() => ref.scrollToRow({ index: data.startIndex }), 100);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.74",
+  "version": "1.5.76",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -46,10 +46,10 @@
     "@etsoo/shared": "^1.2.76",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@mui/x-data-grid": "^8.14.0",
-    "chart.js": "^4.5.0",
+    "@mui/x-data-grid": "^8.14.1",
+    "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "dompurify": "^3.2.7",
+    "dompurify": "^3.3.0",
     "eventemitter3": "^5.0.1",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
@@ -78,7 +78,7 @@
     "@types/pulltorefreshjs": "^0.1.7",
     "@types/react": "^19.2.2",
     "@types/react-avatar-editor": "^13.0.4",
-    "@types/react-dom": "^19.2.1",
+    "@types/react-dom": "^19.2.2",
     "@types/react-input-mask": "^3.0.6",
     "@vitejs/plugin-react": "^5.0.4",
     "jsdom": "^27.0.0",

package/src/DataGridEx.tsx

@@ -24,7 +24,10 @@ import TableSortLabel from "@mui/material/TableSortLabel";
 import Checkbox from "@mui/material/Checkbox";
 import Paper from "@mui/material/Paper";
 import { GridUtils } from "./GridUtils";
-import { useGridCacheInitLoad } from "./uses/useGridCacheInitLoad";
+import {
+  gridCacheKeyGenerator,
+  useGridCacheInitLoad
+} from "./uses/useGridCacheInitLoad";
 
 /**
  * Footer item renderer props
@@ -53,102 +56,103 @@ export type DataGridExProps<
   | "onInitLoad"
   | "rowHeight"
   | "width"
-> & Partial<Pick<ScrollerGridProps<T, P>, "rowHeight">> & {
-  /**
-   * Alternating colors for odd/even rows
-   */
-  alternatingColors?: [string?, string?];
-
-  /**
-   * Cache key
-   */
-  cacheKey?: string;
-
-  /**
-   * Cache minutes
-   */
-  cacheMinutes?: number;
-
-  /**
-   * Checkable to choose multiple items
-   * @default false
-   */
-  checkable?: boolean;
-
-  /**
-   * Rows count to have the bottom border
-   */
-  borderRowsCount?: number;
-
-  /**
-   * Bottom height
-   */
-  bottomHeight?: number;
-
-  /**
-   * Columns
-   */
-  columns: GridColumn<T>[];
-
-  /**
-   * Footer item renderer
-   */
-  footerItemRenderer?: (
-    rows: T[],
-    props: DataGridExFooterItemRendererProps<T>
-  ) => React.ReactNode;
-
-  /**
-   * Header height
-   * @default 56
-   */
-  headerHeight?: number;
-
-  /**
-   * Hide the footer
-   * @default false
-   */
-  hideFooter?: boolean;
-
-  /**
-   * Hover color
-   */
-  hoverColor?: string;
-
-  /**
-   * Double click handler
-   */
-  onDoubleClick?: MouseEventWithDataHandler<T>;
-
-  /**
-   * 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
-   */
-  selectable?: boolean;
-
-  /**
-   * Selected color
-   */
-  selectedColor?: string;
-
-  /**
-   * Width
-   */
-  width?: number;
-};
+> &
+  Partial<Pick<ScrollerGridProps<T, P>, "rowHeight">> & {
+    /**
+     * Alternating colors for odd/even rows
+     */
+    alternatingColors?: [string?, string?];
+
+    /**
+     * Cache key
+     */
+    cacheKey?: string;
+
+    /**
+     * Cache minutes
+     */
+    cacheMinutes?: number;
+
+    /**
+     * Checkable to choose multiple items
+     * @default false
+     */
+    checkable?: boolean;
+
+    /**
+     * Rows count to have the bottom border
+     */
+    borderRowsCount?: number;
+
+    /**
+     * Bottom height
+     */
+    bottomHeight?: number;
+
+    /**
+     * Columns
+     */
+    columns: GridColumn<T>[];
+
+    /**
+     * Footer item renderer
+     */
+    footerItemRenderer?: (
+      rows: T[],
+      props: DataGridExFooterItemRendererProps<T>
+    ) => React.ReactNode;
+
+    /**
+     * Header height
+     * @default 56
+     */
+    headerHeight?: number;
+
+    /**
+     * Hide the footer
+     * @default false
+     */
+    hideFooter?: boolean;
+
+    /**
+     * Hover color
+     */
+    hoverColor?: string;
+
+    /**
+     * Double click handler
+     */
+    onDoubleClick?: MouseEventWithDataHandler<T>;
+
+    /**
+     * 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
+     */
+    selectable?: boolean;
+
+    /**
+     * Selected color
+     */
+    selectedColor?: string;
+
+    /**
+     * Width
+     */
+    width?: number;
+  };
 
 // Borders
 const boldBorder = "2px solid rgba(224, 224, 224, 1)";
@@ -201,7 +205,9 @@ const doRowItems = (
   if (parent == null || rowIndex == null) return;
 
   parent
-    ?.querySelectorAll<HTMLDivElement>(`div[data-row="${rowIndex}"]`)
+    ?.querySelectorAll<HTMLDivElement>(
+      `div[role="row"][aria-rowindex="${rowIndex}"]`
+    )
     .forEach((rowItem) => {
       callback(rowItem);
     });
@@ -575,7 +581,7 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
           cacheKey
             ? (visibleCells) =>
                 sessionStorage.setItem(
-                  `${cacheKey}-scroll`,
+                  gridCacheKeyGenerator(cacheKey),
                   JSON.stringify(visibleCells)
                 )
             : undefined

package/src/MobileListItemRenderer.tsx

@@ -6,16 +6,18 @@ import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
 import CardContent from "@mui/material/CardContent";
 import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
+import { SxProps, Theme } from "@mui/material/styles";
 
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
  * @param margin Margin
  * @param renderer Renderer for card content
+ * @param cellSX Cell sx
  * @returns Component
  */
 export function MobileListItemRenderer<T>(
-  { data, margins }: ScrollerListExItemRendererProps<T>,
+  { data }: ScrollerListExItemRendererProps<T>,
   renderer: (
     data: T
   ) => [
@@ -24,7 +26,8 @@ export function MobileListItemRenderer<T>(
     React.ReactNode | (ListItemReact | boolean)[],
     React.ReactNode,
     React.ReactNode?
-  ]
+  ],
+  cellSX?: SxProps<Theme>
 ) {
   // Loading
   if (data == null) return <LinearProgress />;
@@ -35,7 +38,10 @@ export function MobileListItemRenderer<T>(
   return (
     <Card
       sx={{
-        ...margins
+        height: `calc(100% - 8px)`,
+        marginTop: "8px",
+        overflow: "auto",
+        ...cellSX
       }}
     >
       <CardHeader
@@ -66,15 +72,7 @@ export function MobileListItemRenderer<T>(
           subheader: { variant: "caption" }
         }}
       />
-      <CardContent
-        sx={{
-          paddingTop: 0,
-          paddingBottom:
-            cardActions == null ? Reflect.get(margins, "marginBottom") ?? 0 : 0
-        }}
-      >
-        {children}
-      </CardContent>
+      <CardContent>{children}</CardContent>
       {cardActions}
     </Card>
   );

package/src/ResponsibleContainer.tsx

@@ -324,6 +324,8 @@ export function ResponsibleContainer<T extends object, F>(
         <Box className="DataGridBox">
           <DataGridEx<T>
             autoLoad={!hasFields}
+            cacheKey={cacheKey}
+            cacheMinutes={cacheMinutes}
             height={heightLocal}
             width={rect.width}
             loadData={localLoadData}
@@ -355,6 +357,8 @@ export function ResponsibleContainer<T extends object, F>(
       <Box className="ListBox" sx={{ height: heightLocal }}>
         <ScrollerListEx<T>
           autoLoad={!hasFields}
+          cacheKey={cacheKey}
+          cacheMinutes={cacheMinutes}
           height={heightLocal}
           loadData={localLoadData}
           mRef={mRefs}

package/src/ScrollerListEx.tsx

@@ -6,9 +6,12 @@ import {
 } from "@etsoo/react";
 import { DataTypes, Utils } from "@etsoo/shared";
 import React from "react";
-import { MouseEventWithDataHandler, MUGlobal } from "./MUGlobal";
+import { MouseEventWithDataHandler } from "./MUGlobal";
 import { GridUtils } from "./GridUtils";
-import { useListCacheInitLoad } from "./uses/useListCacheInitLoad";
+import {
+  listCacheKeyGenerator,
+  useListCacheInitLoad
+} from "./uses/useListCacheInitLoad";
 import Box from "@mui/material/Box";
 
 // Scroll bar size
@@ -51,18 +54,6 @@ const createGridStyle = (
   });
 };
 
-// Default margins
-const defaultMargins = () => {
-  const half = MUGlobal.half(MUGlobal.pagePaddings);
-
-  return {
-    marginLeft: 0,
-    marginRight: 0,
-    marginTop: half,
-    marginBottom: half
-  };
-};
-
 /**
  * Extended ScrollerList inner item renderer props
  */
@@ -82,11 +73,6 @@ export type ScrollerListExItemRendererProps<T> = {
    */
   style: React.CSSProperties;
 
-  /**
-   * Default margins
-   */
-  margins: object;
-
   /**
    * Item selected
    */
@@ -116,11 +102,6 @@ export type ScrollerListExProps<T extends object> = Omit<
      */
     cacheMinutes?: number;
 
-    /**
-     * Cell margins, default to half of MUGlobal.pagePaddings
-     */
-    cellMargins?: object;
-
     /**
      * Item renderer
      */
@@ -190,15 +171,9 @@ export function ScrollerListEx<T extends object>(
     className,
     cacheKey,
     cacheMinutes = 15,
-    cellMargins = defaultMargins(),
     idField = "id" as DataTypes.Keys<T>,
-    itemRenderer = ({ data, margins }) => (
-      <Box
-        component="pre"
-        sx={{
-          ...margins
-        }}
-      >
+    itemRenderer = ({ data }) => (
+      <Box component="pre" sx={{ height: "100%", overflow: "auto" }}>
         {JSON.stringify(data)}
       </Box>
     ),
@@ -235,7 +210,7 @@ export function ScrollerListEx<T extends object>(
         cacheKey
           ? (visibleRows) =>
               sessionStorage.setItem(
-                `${cacheKey}-scroll`,
+                listCacheKeyGenerator(cacheKey),
                 JSON.stringify(visibleRows)
               )
           : undefined
@@ -255,8 +230,7 @@ export function ScrollerListEx<T extends object>(
           index,
           data,
           style,
-          selected,
-          margins: cellMargins
+          selected
         });
 
         return (

package/src/uses/useGridCacheInitLoad.ts

@@ -8,6 +8,10 @@ import React from "react";
 import { GridUtils } from "../GridUtils";
 import { ExtendUtils } from "@etsoo/shared";
 
+export function gridCacheKeyGenerator(cacheKey: string) {
+  return `${cacheKey}-grid-scroll`;
+}
+
 export function useGridCacheInitLoad<T extends object>(
   cacheKey: string | undefined,
   cacheMinutes: number
@@ -33,7 +37,9 @@ export function useGridCacheInitLoad<T extends object>(
 
     return (ref: GridImperativeAPI) => {
       // Scroll position
-      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+      const scrollData = sessionStorage.getItem(
+        gridCacheKeyGenerator(cacheKey)
+      );
       if (scrollData) {
         const data = JSON.parse(scrollData) as OnCellsRenderedData;
         ExtendUtils.waitFor(

package/src/uses/useListCacheInitLoad.ts

@@ -8,6 +8,10 @@ import React from "react";
 import { GridUtils } from "../GridUtils";
 import { ExtendUtils } from "@etsoo/shared";
 
+export function listCacheKeyGenerator(cacheKey: string) {
+  return `${cacheKey}-list-scroll`;
+}
+
 export function useListCacheInitLoad<T extends object>(
   cacheKey: string | undefined,
   cacheMinutes: number
@@ -33,7 +37,9 @@ export function useListCacheInitLoad<T extends object>(
 
     return (ref: ListImperativeAPI) => {
       // Scroll position
-      const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+      const scrollData = sessionStorage.getItem(
+        listCacheKeyGenerator(cacheKey)
+      );
       if (scrollData) {
         const data = JSON.parse(scrollData) as OnRowsRenderedData;
         ExtendUtils.waitFor(