@etsoo/materialui 1.5.75 → 1.5.77

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.js

@@ -10,6 +10,7 @@ const LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress")
 const Card_1 = __importDefault(require("@mui/material/Card"));
 const CardHeader_1 = __importDefault(require("@mui/material/CardHeader"));
 const CardContent_1 = __importDefault(require("@mui/material/CardContent"));
+const ScrollerListEx_1 = require("./ScrollerListEx");
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
@@ -24,7 +25,10 @@ function MobileListItemRenderer({ data }, renderer, cellSX) {
         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: "100%", 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: {
+    return ((0, jsx_runtime_1.jsxs)(Card_1.default, { sx: {
+            ...ScrollerListEx_1.ScrollerListExItemDefaultStyles,
+            ...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"
                     }, transformOrigin: {

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

@@ -22,6 +22,10 @@ export type ScrollerListExItemRendererProps<T> = {
      */
     selected: boolean;
 };
+/**
+ * Default styles for item renderer
+ */
+export declare const ScrollerListExItemDefaultStyles: React.CSSProperties;
 /**
  * Extended ScrollerList Props
  */

package/lib/cjs/ScrollerListEx.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollerListExItemDefaultStyles = void 0;
 exports.ScrollerListEx = ScrollerListEx;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const css_1 = require("@emotion/css");
@@ -46,6 +47,15 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
+/**
+ * Default styles for item renderer
+ */
+exports.ScrollerListExItemDefaultStyles = {
+    height: `calc(100% - 16px)`,
+    marginTop: "8px",
+    marginBottom: "8px",
+    overflow: "auto"
+};
 /**
  * Extended ScrollerList
  * @param props Props
@@ -73,7 +83,7 @@ function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    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;
+    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, idField = "id", itemRenderer = ({ data }) => ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "pre", sx: exports.ScrollerListExItemDefaultStyles, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 142, selectedColor = "#edf4fb", ...rest } = props;
     // Init handler
     const initHandler = (0, useListCacheInitLoad_1.useListCacheInitLoad)(cacheKey, cacheMinutes);
     const onUpdateRowsHandler = react_2.default.useCallback((rows, state) => {
@@ -82,7 +92,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];

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.js

@@ -4,6 +4,7 @@ import LinearProgress from "@mui/material/LinearProgress";
 import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
 import CardContent from "@mui/material/CardContent";
+import { ScrollerListExItemDefaultStyles } from "./ScrollerListEx";
 /**
  * Default mobile list item renderer
  * @param param0 List renderer props
@@ -18,7 +19,10 @@ export function MobileListItemRenderer({ data }, renderer, cellSX) {
         return _jsx(LinearProgress, {});
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
-    return (_jsxs(Card, { sx: { height: "100%", overflow: "auto", ...cellSX }, children: [_jsx(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (_jsx(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
+    return (_jsxs(Card, { sx: {
+            ...ScrollerListExItemDefaultStyles,
+            ...cellSX
+        }, children: [_jsx(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (_jsx(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                         vertical: "bottom",
                         horizontal: "right"
                     }, transformOrigin: {

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

@@ -22,6 +22,10 @@ export type ScrollerListExItemRendererProps<T> = {
      */
     selected: boolean;
 };
+/**
+ * Default styles for item renderer
+ */
+export declare const ScrollerListExItemDefaultStyles: React.CSSProperties;
 /**
  * Extended ScrollerList Props
  */

package/lib/mjs/ScrollerListEx.js

@@ -4,7 +4,7 @@ import { ScrollerList } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
 import React from "react";
 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;
@@ -40,6 +40,15 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
+/**
+ * Default styles for item renderer
+ */
+export const ScrollerListExItemDefaultStyles = {
+    height: `calc(100% - 16px)`,
+    marginTop: "8px",
+    marginBottom: "8px",
+    overflow: "auto"
+};
 /**
  * Extended ScrollerList
  * @param props Props
@@ -67,7 +76,7 @@ export function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    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;
+    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, idField = "id", itemRenderer = ({ data }) => (_jsx(Box, { component: "pre", sx: ScrollerListExItemDefaultStyles, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 142, selectedColor = "#edf4fb", ...rest } = props;
     // Init handler
     const initHandler = useListCacheInitLoad(cacheKey, cacheMinutes);
     const onUpdateRowsHandler = React.useCallback((rows, state) => {
@@ -76,7 +85,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];

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.75",
+  "version": "1.5.77",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

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

@@ -5,7 +5,10 @@ import LinearProgress from "@mui/material/LinearProgress";
 import Card from "@mui/material/Card";
 import CardHeader from "@mui/material/CardHeader";
 import CardContent from "@mui/material/CardContent";
-import { ScrollerListExItemRendererProps } from "./ScrollerListEx";
+import {
+  ScrollerListExItemDefaultStyles,
+  ScrollerListExItemRendererProps
+} from "./ScrollerListEx";
 import { SxProps, Theme } from "@mui/material/styles";
 
 /**
@@ -36,7 +39,12 @@ export function MobileListItemRenderer<T>(
   const [title, subheader, actions, children, cardActions] = renderer(data);
 
   return (
-    <Card sx={{ height: "100%", overflow: "auto", ...cellSX }}>
+    <Card
+      sx={{
+        ...ScrollerListExItemDefaultStyles,
+        ...cellSX
+      }}
+    >
       <CardHeader
         sx={{ paddingBottom: 0.5 }}
         action={

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

@@ -8,8 +8,12 @@ import { DataTypes, Utils } from "@etsoo/shared";
 import React from "react";
 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";
+import { SxProps, Theme } from "@mui/material/styles";
 
 // Scroll bar size
 const scrollbarSize = 16;
@@ -76,6 +80,16 @@ export type ScrollerListExItemRendererProps<T> = {
   selected: boolean;
 };
 
+/**
+ * Default styles for item renderer
+ */
+export const ScrollerListExItemDefaultStyles: React.CSSProperties = {
+  height: `calc(100% - 16px)`,
+  marginTop: "8px",
+  marginBottom: "8px",
+  overflow: "auto"
+};
+
 /**
  * Extended ScrollerList Props
  */
@@ -170,7 +184,7 @@ export function ScrollerListEx<T extends object>(
     cacheMinutes = 15,
     idField = "id" as DataTypes.Keys<T>,
     itemRenderer = ({ data }) => (
-      <Box component="pre" sx={{ height: "100%", overflow: "auto" }}>
+      <Box component="pre" sx={ScrollerListExItemDefaultStyles}>
         {JSON.stringify(data)}
       </Box>
     ),
@@ -178,7 +192,7 @@ export function ScrollerListEx<T extends object>(
     onDoubleClick,
     onUpdateRows,
     onSelectChange,
-    rowHeight = 116,
+    rowHeight = 142,
     selectedColor = "#edf4fb",
     ...rest
   } = props;
@@ -207,7 +221,7 @@ export function ScrollerListEx<T extends object>(
         cacheKey
           ? (visibleRows) =>
               sessionStorage.setItem(
-                `${cacheKey}-scroll`,
+                listCacheKeyGenerator(cacheKey),
                 JSON.stringify(visibleRows)
               )
           : undefined

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(