@etsoo/materialui 1.5.76 → 1.5.78

package/lib/cjs/DataGridEx.js

@@ -247,9 +247,12 @@ function DataGridEx(props) {
         const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
         return (column.minWidth || minWidth) + sharedWidth;
     }, [columns, width]);
-    const onUpdateRowsHandler = react_2.default.useCallback((rows, state) => {
+    const onUpdateRowsHandler = react_2.default.useCallback((rows, state, reset) => {
         GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
-        onUpdateRows?.(rows, state);
+        onUpdateRows?.(rows, state, reset);
+        if (cacheKey && reset) {
+            sessionStorage.removeItem((0, useGridCacheInitLoad_1.gridCacheKeyGenerator)(cacheKey));
+        }
     }, [onUpdateRows, cacheKey]);
     // Table
     const table = react_2.default.useMemo(() => {

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
@@ -25,9 +26,7 @@ function MobileListItemRenderer({ data }, renderer, cellSX) {
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
     return ((0, jsx_runtime_1.jsxs)(Card_1.default, { sx: {
-            height: `calc(100% - 8px)`,
-            marginTop: "8px",
-            overflow: "auto",
+            ...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",

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,18 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
+/**
+ * Default styles for item renderer
+ */
+exports.ScrollerListExItemDefaultStyles = {
+    height: `calc(100% - 16px)`,
+    /**
+     * default rowHeight is 150px when 16px margin top/bottom
+     */
+    marginTop: "8px",
+    marginBottom: "8px",
+    overflow: "auto"
+};
 /**
  * Extended ScrollerList
  * @param props Props
@@ -73,12 +86,15 @@ 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 = 150, selectedColor = "#edf4fb", ...rest } = props;
     // Init handler
     const initHandler = (0, useListCacheInitLoad_1.useListCacheInitLoad)(cacheKey, cacheMinutes);
-    const onUpdateRowsHandler = react_2.default.useCallback((rows, state) => {
+    const onUpdateRowsHandler = react_2.default.useCallback((rows, state, reset) => {
         GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
-        onUpdateRows?.(rows, state);
+        onUpdateRows?.(rows, state, reset);
+        if (cacheKey && reset) {
+            sessionStorage.removeItem((0, useListCacheInitLoad_1.listCacheKeyGenerator)(cacheKey));
+        }
     }, [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

package/lib/mjs/DataGridEx.js

@@ -240,9 +240,12 @@ export function DataGridEx(props) {
         const sharedWidth = leftWidth > 0 ? leftWidth / widthCalculator.unset : 0;
         return (column.minWidth || minWidth) + sharedWidth;
     }, [columns, width]);
-    const onUpdateRowsHandler = React.useCallback((rows, state) => {
+    const onUpdateRowsHandler = React.useCallback((rows, state, reset) => {
         GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
-        onUpdateRows?.(rows, state);
+        onUpdateRows?.(rows, state, reset);
+        if (cacheKey && reset) {
+            sessionStorage.removeItem(gridCacheKeyGenerator(cacheKey));
+        }
     }, [onUpdateRows, cacheKey]);
     // Table
     const table = React.useMemo(() => {

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
@@ -19,9 +20,7 @@ export function MobileListItemRenderer({ data }, renderer, cellSX) {
     // Elements
     const [title, subheader, actions, children, cardActions] = renderer(data);
     return (_jsxs(Card, { sx: {
-            height: `calc(100% - 8px)`,
-            marginTop: "8px",
-            overflow: "auto",
+            ...ScrollerListExItemDefaultStyles,
             ...cellSX
         }, children: [_jsx(CardHeader, { sx: { paddingBottom: 0.5 }, action: Array.isArray(actions) ? (_jsx(MoreFab, { iconButton: true, size: "small", anchorOrigin: {
                         vertical: "bottom",

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

@@ -40,6 +40,18 @@ const createGridStyle = (alternatingColors, selectedColor) => {
         }
     });
 };
+/**
+ * Default styles for item renderer
+ */
+export const ScrollerListExItemDefaultStyles = {
+    height: `calc(100% - 16px)`,
+    /**
+     * default rowHeight is 150px when 16px margin top/bottom
+     */
+    marginTop: "8px",
+    marginBottom: "8px",
+    overflow: "auto"
+};
 /**
  * Extended ScrollerList
  * @param props Props
@@ -67,12 +79,15 @@ 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 = 150, selectedColor = "#edf4fb", ...rest } = props;
     // Init handler
     const initHandler = useListCacheInitLoad(cacheKey, cacheMinutes);
-    const onUpdateRowsHandler = React.useCallback((rows, state) => {
+    const onUpdateRowsHandler = React.useCallback((rows, state, reset) => {
         GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
-        onUpdateRows?.(rows, state);
+        onUpdateRows?.(rows, state, reset);
+        if (cacheKey && reset) {
+            sessionStorage.removeItem(listCacheKeyGenerator(cacheKey));
+        }
     }, [onUpdateRows, cacheKey]);
     // Layout
     return (_jsx(ScrollerList, { className: Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, onRowsRendered: cacheKey

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.76",
+  "version": "1.5.78",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,7 +42,7 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.45",
     "@etsoo/notificationbase": "^1.1.64",
-    "@etsoo/react": "^1.8.59",
+    "@etsoo/react": "^1.8.60",
     "@etsoo/shared": "^1.2.76",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
@@ -81,7 +81,7 @@
     "@types/react-dom": "^19.2.2",
     "@types/react-input-mask": "^3.0.6",
     "@vitejs/plugin-react": "^5.0.4",
-    "jsdom": "^27.0.0",
+    "jsdom": "^27.0.1",
     "typescript": "^5.9.3",
     "vitest": "^3.2.4"
   }

package/src/DataGridEx.tsx

@@ -560,9 +560,13 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
   );
 
   const onUpdateRowsHandler = React.useCallback(
-    (rows: T[], state: GridLoaderStates<T>) => {
+    (rows: T[], state: GridLoaderStates<T>, reset: boolean) => {
       GridUtils.getUpdateRowsHandler<T>(cacheKey)?.(rows, state);
-      onUpdateRows?.(rows, state);
+      onUpdateRows?.(rows, state, reset);
+
+      if (cacheKey && reset) {
+        sessionStorage.removeItem(gridCacheKeyGenerator(cacheKey));
+      }
     },
     [onUpdateRows, cacheKey]
   );

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";
 
 /**
@@ -38,9 +41,7 @@ export function MobileListItemRenderer<T>(
   return (
     <Card
       sx={{
-        height: `calc(100% - 8px)`,
-        marginTop: "8px",
-        overflow: "auto",
+        ...ScrollerListExItemDefaultStyles,
         ...cellSX
       }}
     >

package/src/ScrollerListEx.tsx

@@ -79,6 +79,21 @@ export type ScrollerListExItemRendererProps<T> = {
   selected: boolean;
 };
 
+/**
+ * Default styles for item renderer
+ */
+export const ScrollerListExItemDefaultStyles: React.CSSProperties = {
+  height: `calc(100% - 16px)`,
+
+  /**
+   * default rowHeight is 150px when 16px margin top/bottom
+   */
+  marginTop: "8px",
+  marginBottom: "8px",
+
+  overflow: "auto"
+};
+
 /**
  * Extended ScrollerList Props
  */
@@ -173,7 +188,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>
     ),
@@ -181,7 +196,7 @@ export function ScrollerListEx<T extends object>(
     onDoubleClick,
     onUpdateRows,
     onSelectChange,
-    rowHeight = 116,
+    rowHeight = 150,
     selectedColor = "#edf4fb",
     ...rest
   } = props;
@@ -190,9 +205,13 @@ export function ScrollerListEx<T extends object>(
   const initHandler = useListCacheInitLoad<T>(cacheKey, cacheMinutes);
 
   const onUpdateRowsHandler = React.useCallback(
-    (rows: T[], state: GridLoaderStates<T>) => {
+    (rows: T[], state: GridLoaderStates<T>, reset: boolean) => {
       GridUtils.getUpdateRowsHandler<T>(cacheKey)?.(rows, state);
-      onUpdateRows?.(rows, state);
+      onUpdateRows?.(rows, state, reset);
+
+      if (cacheKey && reset) {
+        sessionStorage.removeItem(listCacheKeyGenerator(cacheKey));
+      }
     },
     [onUpdateRows, cacheKey]
   );