@etsoo/materialui 1.5.77 → 1.5.79

package/lib/cjs/DataGridEx.js

@@ -44,20 +44,20 @@ const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
         }
     });
 };
-const rowItems = (div, callback) => {
+const rowItem = (div, callback) => {
     const row = div.dataset["row"];
     if (div.parentElement == null || row == null)
         return;
-    doRowItems(div.parentElement, parseFloat(row), callback);
+    doRowItem(div.parentElement, parseFloat(row), callback);
 };
-const doRowItems = (parent, rowIndex, callback) => {
-    if (parent == null || rowIndex == null)
+const doRowItem = (parent, rowIndex, callback) => {
+    if (parent == null || parent.parentElement == null || rowIndex == null)
         return;
-    parent
-        ?.querySelectorAll(`div[role="row"][aria-rowindex="${rowIndex}"]`)
-        .forEach((rowItem) => {
-        callback(rowItem);
-    });
+    // New react-window version uses an extra div
+    // <div role="row" aria-rowindex="1">...</div>
+    const row = parent.parentElement?.querySelector(`div[role="row"] > div[data-row="${rowIndex}"]`);
+    if (row)
+        callback(row);
 };
 /**
  * Extended datagrid columns calculation
@@ -211,22 +211,22 @@ function DataGridEx(props) {
         if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current)
             return;
         if (selectedRowIndex.current != -1) {
-            doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
+            doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
                 preDiv.classList.remove("DataGridEx-Selected");
             });
         }
-        rowItems(div, (currentDiv) => {
+        rowItem(div, (currentDiv) => {
             currentDiv.classList.add("DataGridEx-Selected");
         });
         selectedRowIndex.current = rowIndex;
     };
     const handleMouseOver = (event) => {
-        rowItems(event.currentTarget, (div) => {
+        rowItem(event.currentTarget, (div) => {
             div.classList.add("DataGridEx-Hover");
         });
     };
     const handleMouseOut = (event) => {
-        rowItems(event.currentTarget, (div) => {
+        rowItem(event.currentTarget, (div) => {
             div.classList.remove("DataGridEx-Hover");
         });
     };
@@ -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/ResponsibleContainer.js

@@ -38,15 +38,15 @@ function ResponsibleContainer(props) {
     // Refs
     const refs = react_1.default.useRef({});
     const state = refs.current;
+    // Screen size detection
+    const showDataGrid = (0, useMediaQuery_1.default)("(min-width:600px)");
     const mRefs = (0, react_2.useCombinedRefs)(mRef, (ref) => {
         if (ref == null)
             return;
         state.ref = ref;
-        if (ref.element && elementReady)
-            elementReady(ref.element, true);
+        if (ref.element)
+            elementReady?.(ref.element, showDataGrid);
     });
-    // Screen size detection
-    const showDataGrid = (0, useMediaQuery_1.default)("(min-width:600px)");
     // Update mounted state
     react_1.default.useEffect(() => {
         return () => {

package/lib/cjs/ScrollerListEx.js

@@ -52,6 +52,9 @@ const createGridStyle = (alternatingColors, selectedColor) => {
  */
 exports.ScrollerListExItemDefaultStyles = {
     height: `calc(100% - 16px)`,
+    /**
+     * default rowHeight is 150px when 16px margin top/bottom
+     */
     marginTop: "8px",
     marginBottom: "8px",
     overflow: "auto"
@@ -83,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: exports.ScrollerListExItemDefaultStyles, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 142, 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

@@ -37,20 +37,20 @@ const createGridStyle = (alternatingColors, selectedColor, hoverColor) => {
         }
     });
 };
-const rowItems = (div, callback) => {
+const rowItem = (div, callback) => {
     const row = div.dataset["row"];
     if (div.parentElement == null || row == null)
         return;
-    doRowItems(div.parentElement, parseFloat(row), callback);
+    doRowItem(div.parentElement, parseFloat(row), callback);
 };
-const doRowItems = (parent, rowIndex, callback) => {
-    if (parent == null || rowIndex == null)
+const doRowItem = (parent, rowIndex, callback) => {
+    if (parent == null || parent.parentElement == null || rowIndex == null)
         return;
-    parent
-        ?.querySelectorAll(`div[role="row"][aria-rowindex="${rowIndex}"]`)
-        .forEach((rowItem) => {
-        callback(rowItem);
-    });
+    // New react-window version uses an extra div
+    // <div role="row" aria-rowindex="1">...</div>
+    const row = parent.parentElement?.querySelector(`div[role="row"] > div[data-row="${rowIndex}"]`);
+    if (row)
+        callback(row);
 };
 /**
  * Extended datagrid columns calculation
@@ -204,22 +204,22 @@ export function DataGridEx(props) {
         if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current)
             return;
         if (selectedRowIndex.current != -1) {
-            doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
+            doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
                 preDiv.classList.remove("DataGridEx-Selected");
             });
         }
-        rowItems(div, (currentDiv) => {
+        rowItem(div, (currentDiv) => {
             currentDiv.classList.add("DataGridEx-Selected");
         });
         selectedRowIndex.current = rowIndex;
     };
     const handleMouseOver = (event) => {
-        rowItems(event.currentTarget, (div) => {
+        rowItem(event.currentTarget, (div) => {
             div.classList.add("DataGridEx-Hover");
         });
     };
     const handleMouseOut = (event) => {
-        rowItems(event.currentTarget, (div) => {
+        rowItem(event.currentTarget, (div) => {
             div.classList.remove("DataGridEx-Hover");
         });
     };
@@ -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/ResponsibleContainer.js

@@ -32,15 +32,15 @@ export function ResponsibleContainer(props) {
     // Refs
     const refs = React.useRef({});
     const state = refs.current;
+    // Screen size detection
+    const showDataGrid = useMediaQuery("(min-width:600px)");
     const mRefs = useCombinedRefs(mRef, (ref) => {
         if (ref == null)
             return;
         state.ref = ref;
-        if (ref.element && elementReady)
-            elementReady(ref.element, true);
+        if (ref.element)
+            elementReady?.(ref.element, showDataGrid);
     });
-    // Screen size detection
-    const showDataGrid = useMediaQuery("(min-width:600px)");
     // Update mounted state
     React.useEffect(() => {
         return () => {

package/lib/mjs/ScrollerListEx.js

@@ -45,6 +45,9 @@ const createGridStyle = (alternatingColors, selectedColor) => {
  */
 export const ScrollerListExItemDefaultStyles = {
     height: `calc(100% - 16px)`,
+    /**
+     * default rowHeight is 150px when 16px margin top/bottom
+     */
     marginTop: "8px",
     marginBottom: "8px",
     overflow: "auto"
@@ -76,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: ScrollerListExItemDefaultStyles, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, rowHeight = 142, 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.77",
+  "version": "1.5.79",
   "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

@@ -188,29 +188,30 @@ const createGridStyle = (
   });
 };
 
-const rowItems = (
+const rowItem = (
   div: HTMLDivElement,
   callback: (div: HTMLDivElement) => void
 ) => {
   const row = div.dataset["row"];
   if (div.parentElement == null || row == null) return;
-  doRowItems(div.parentElement, parseFloat(row), callback);
+  doRowItem(div.parentElement, parseFloat(row), callback);
 };
 
-const doRowItems = (
+const doRowItem = (
   parent: HTMLElement,
   rowIndex: number,
   callback: (div: HTMLDivElement) => void
 ) => {
-  if (parent == null || rowIndex == null) return;
-
-  parent
-    ?.querySelectorAll<HTMLDivElement>(
-      `div[role="row"][aria-rowindex="${rowIndex}"]`
-    )
-    .forEach((rowItem) => {
-      callback(rowItem);
-    });
+  if (parent == null || parent.parentElement == null || rowIndex == null)
+    return;
+
+  // New react-window version uses an extra div
+  // <div role="row" aria-rowindex="1">...</div>
+  const row = parent.parentElement?.querySelector<HTMLDivElement>(
+    `div[role="row"] > div[data-row="${rowIndex}"]`
+  );
+
+  if (row) callback(row);
 };
 
 /**
@@ -507,12 +508,12 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
     if (isNaN(rowIndex) || rowIndex === selectedRowIndex.current) return;
 
     if (selectedRowIndex.current != -1) {
-      doRowItems(div.parentElement, selectedRowIndex.current, (preDiv) => {
+      doRowItem(div.parentElement, selectedRowIndex.current, (preDiv) => {
         preDiv.classList.remove("DataGridEx-Selected");
       });
     }
 
-    rowItems(div, (currentDiv) => {
+    rowItem(div, (currentDiv) => {
       currentDiv.classList.add("DataGridEx-Selected");
     });
 
@@ -520,13 +521,13 @@ export function DataGridEx<T extends object>(props: DataGridExProps<T>) {
   };
 
   const handleMouseOver = (event: React.MouseEvent<HTMLDivElement>) => {
-    rowItems(event.currentTarget, (div) => {
+    rowItem(event.currentTarget, (div) => {
       div.classList.add("DataGridEx-Hover");
     });
   };
 
   const handleMouseOut = (event: React.MouseEvent<HTMLDivElement>) => {
-    rowItems(event.currentTarget, (div) => {
+    rowItem(event.currentTarget, (div) => {
       div.classList.remove("DataGridEx-Hover");
     });
   };
@@ -560,9 +561,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/ResponsibleContainer.tsx

@@ -208,16 +208,16 @@ export function ResponsibleContainer<T extends object, F>(
   const refs = React.useRef<LocalRefs<T>>({});
   const state = refs.current;
 
+  // Screen size detection
+  const showDataGrid = useMediaQuery("(min-width:600px)");
+
   const mRefs = useCombinedRefs(mRef, (ref: GridMethodRef<T>) => {
     if (ref == null) return;
     state.ref = ref;
 
-    if (ref.element && elementReady) elementReady(ref.element, true);
+    if (ref.element) elementReady?.(ref.element, showDataGrid);
   });
 
-  // Screen size detection
-  const showDataGrid = useMediaQuery("(min-width:600px)");
-
   // Update mounted state
   React.useEffect(() => {
     return () => {

package/src/ScrollerListEx.tsx

@@ -13,7 +13,6 @@ import {
   useListCacheInitLoad
 } from "./uses/useListCacheInitLoad";
 import Box from "@mui/material/Box";
-import { SxProps, Theme } from "@mui/material/styles";
 
 // Scroll bar size
 const scrollbarSize = 16;
@@ -85,8 +84,13 @@ export type ScrollerListExItemRendererProps<T> = {
  */
 export const ScrollerListExItemDefaultStyles: React.CSSProperties = {
   height: `calc(100% - 16px)`,
+
+  /**
+   * default rowHeight is 150px when 16px margin top/bottom
+   */
   marginTop: "8px",
   marginBottom: "8px",
+
   overflow: "auto"
 };
 
@@ -192,7 +196,7 @@ export function ScrollerListEx<T extends object>(
     onDoubleClick,
     onUpdateRows,
     onSelectChange,
-    rowHeight = 142,
+    rowHeight = 150,
     selectedColor = "#edf4fb",
     ...rest
   } = props;
@@ -201,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]
   );