@etsoo/materialui 1.5.70 → 1.5.72

package/lib/cjs/ScrollerListEx.js

@@ -11,6 +11,9 @@ const shared_1 = require("@etsoo/shared");
 const react_2 = __importDefault(require("react"));
 const MUGlobal_1 = require("./MUGlobal");
 const styles_1 = require("@mui/material/styles");
+const GridUtils_1 = require("./GridUtils");
+const useListCacheInitLoad_1 = require("./uses/useListCacheInitLoad");
+const Box_1 = __importDefault(require("@mui/material/Box"));
 // Scroll bar size
 const scrollbarSize = 16;
 // Selected class name
@@ -74,24 +77,6 @@ const defaultMargin = (margin, horizon) => {
         marginBottom: half
     };
 };
-// Default itemRenderer
-function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, selected, style, itemHeight, onClick, onDoubleClick, space, margins }) {
-    // Child
-    const child = innerItemRenderer({
-        index,
-        data,
-        style,
-        selected,
-        itemHeight,
-        space,
-        margins
-    });
-    let rowClass = `ScrollerListEx-Row${index % 2}`;
-    if (selected)
-        rowClass += ` ${selectedClassName}`;
-    // Layout
-    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 }));
-}
 /**
  * Extended ScrollerList
  * @param props Props
@@ -99,7 +84,7 @@ function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, sele
  */
 function ScrollerListEx(props) {
     // Selected item ref
-    const selectedItem = react_2.default.useRef();
+    const selectedItem = react_2.default.useRef(null);
     const onMouseDown = (div, data) => {
         // Destruct
         const [selectedDiv, selectedData] = selectedItem.current ?? [];
@@ -119,20 +104,12 @@ function ScrollerListEx(props) {
         return selected;
     };
     // Destruct
-    const { alternatingColors = [undefined, undefined], className, idField = "id", innerItemRenderer, itemSize, itemRenderer = (itemProps) => {
-        const [itemHeight, space, margins] = calculateItemSize(itemProps.index);
-        return defaultItemRenderer({
-            itemHeight,
-            innerItemRenderer,
-            onMouseDown,
-            onClick,
-            onDoubleClick,
-            space,
-            margins,
-            selected: isSelected(itemProps.data),
-            ...itemProps
-        });
-    }, onClick, onDoubleClick, onSelectChange, selectedColor = "#edf4fb", ...rest } = props;
+    const { alternatingColors = [undefined, undefined], className, cacheKey, cacheMinutes = 15, idField = "id", itemSize, itemRenderer = ({ data, itemHeight, margins }) => ((0, jsx_runtime_1.jsx)(Box_1.default, { component: "pre", sx: {
+            height: itemHeight,
+            ...margins
+        }, children: JSON.stringify(data) })), onClick, onDoubleClick, onUpdateRows, onSelectChange, selectedColor = "#edf4fb", ...rest } = props;
+    // Init handler
+    const initHandler = (0, useListCacheInitLoad_1.useListCacheInitLoad)(cacheKey, cacheMinutes);
     // Theme
     const theme = (0, styles_1.useTheme)();
     // Cache calculation
@@ -156,11 +133,31 @@ function ScrollerListEx(props) {
         // Calculation
         return itemSizeResult;
     };
-    // Local item size
-    const itemSizeLocal = (index) => {
-        const [size, space] = calculateItemSize(index);
-        return size + space;
-    };
+    const onUpdateRowsHandler = react_2.default.useCallback((rows, state) => {
+        GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey)?.(rows, state);
+        onUpdateRows?.(rows, state);
+    }, [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, itemRenderer: itemRenderer, itemSize: itemSizeLocal, ...rest }));
+    return ((0, jsx_runtime_1.jsx)(react_1.ScrollerList, { className: shared_1.Utils.mergeClasses("ScrollerListEx-Body", className, createGridStyle(alternatingColors, selectedColor)), idField: idField, onRowsRendered: cacheKey
+            ? (visibleRows) => sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(visibleRows))
+            : undefined, onInitLoad: initHandler, onUpdateRows: onUpdateRowsHandler, rowComponent: ({ index, items, style }) => {
+            const data = items[index];
+            const selected = isSelected(data);
+            const rowClass = `ScrollerListEx-Row${index % 2}${selected ? ` ${selectedClassName}` : ""}`;
+            const [itemHeight, space, margins] = calculateItemSize(index);
+            // Child
+            const child = itemRenderer({
+                index,
+                data,
+                style,
+                selected,
+                itemHeight,
+                space,
+                margins
+            });
+            return ((0, jsx_runtime_1.jsx)("div", { className: rowClass, style: style, onMouseDown: (event) => onMouseDown(event.currentTarget, data), onClick: (event) => onClick && onClick(event, data), onDoubleClick: (event) => onDoubleClick && onDoubleClick(event, data), children: child }));
+        }, rowHeight: (index) => {
+            const [size, space] = calculateItemSize(index);
+            return size + space;
+        }, ...rest }));
 }

package/lib/cjs/SelectEx.js

@@ -69,7 +69,7 @@ function SelectEx(props) {
     }, [options, propertyWay, setOptionsAdd]);
     // Value state
     const [valueState, setValueStateBase] = react_1.default.useState(valueSource);
-    const valueRef = react_1.default.useRef();
+    const valueRef = react_1.default.useRef(null);
     const setValueState = (newValue) => {
         valueRef.current = newValue;
         setValueStateBase(newValue);
@@ -114,7 +114,7 @@ function SelectEx(props) {
             : option[labelField];
     };
     // Refs
-    const divRef = react_1.default.useRef();
+    const divRef = react_1.default.useRef(null);
     // Refresh list data
     const refreshData = () => {
         if (loadData == null)

package/lib/cjs/TableEx.d.ts

@@ -43,6 +43,13 @@ export type TableExProps<T extends object, D extends DataTypes.Keys<T>> = TableP
      * Methods
      */
     mRef?: React.Ref<TableExMethodRef<T>>;
+    /**
+     * Data change handler
+     * @param rows Rows
+     * @param rowIndex Row index
+     * @param columnIndex Column index
+     */
+    onDataChange?: (rows: T[], rowIndex: number, columnIndex: number) => void;
     /**
      * On items select change
      */

package/lib/cjs/TableEx.js

@@ -34,7 +34,7 @@ function TableEx(props) {
     // Theme
     const theme = (0, styles_1.useTheme)();
     // Destruct
-    const { alternatingColors = [theme.palette.action.hover, undefined], autoLoad = true, columns, defaultOrderBy, headerColors = [undefined, undefined], idField = "id", loadBatchSize, loadData, maxHeight, mRef, onSelectChange, rowHeight = 53, otherHeight = 110, threshold, ...rest } = props;
+    const { alternatingColors = [theme.palette.action.hover, undefined], autoLoad = true, columns, defaultOrderBy, headerColors = [undefined, undefined], idField = "id", loadBatchSize, loadData, maxHeight, mRef, onDataChange, onSelectChange, rowHeight = 53, otherHeight = 110, threshold, ...rest } = props;
     const selectable = onSelectChange != null;
     // Rows per page
     let rowsPerPageLocal;
@@ -90,6 +90,9 @@ function TableEx(props) {
         });
     };
     react_2.default.useImperativeHandle(mRef, () => ({
+        get element() {
+            return null;
+        },
         delete(index) {
             const item = rows.at(index);
             if (item) {
@@ -104,20 +107,11 @@ function TableEx(props) {
             newRows.splice(start, 0, item);
             setRows(newRows);
         },
-        /**
-         * Refresh data
-         */
         refresh() {
             loadDataLocal();
         },
-        /**
-         * Reset
-         */
         reset,
-        scrollToRef(scrollOffset) {
-            // Not implemented
-        },
-        scrollToItemRef(index) {
+        scrollToRow(param) {
             // Not implemented
         }
     }), []);
@@ -291,7 +285,7 @@ function TableEx(props) {
                                                 rowIndex,
                                                 columnIndex,
                                                 cellProps,
-                                                setItems
+                                                triggerChange: () => onDataChange?.(rows, rowIndex, columnIndex)
                                             })) : ((0, jsx_runtime_1.jsx)(react_2.default.Fragment, { children: "\u00A0" }));
                                             return ((0, jsx_runtime_1.jsx)(TableCell_1.default, { ...cellProps, children: child }, `${rowId}${columnIndex}`));
                                         })] }, rowId));

package/lib/cjs/app/ReactApp.d.ts

@@ -173,9 +173,7 @@ export declare class ReactApp<S extends IAppSettings, D extends IUser> extends C
      * @param props Props
      */
     showInputDialog({ title, message, callback, ...rest }: InputDialogProps): INotificationReact;
-    stateDetector(props: IStateProps): React.FunctionComponentElement<{
-        children?: React.ReactNode | undefined;
-    }>;
+    stateDetector(props: IStateProps): React.FunctionComponentElement<React.FragmentProps>;
     /**
      * User login extended
      * @param user New user

package/lib/cjs/custom/FieldDateInput.js

@@ -16,7 +16,7 @@ const Typography_1 = __importDefault(require("@mui/material/Typography"));
  */
 const FieldDateInput = ({ field, mref, onChange, defaultValue }) => {
     // Ref
-    const inputRef = react_1.default.useRef();
+    const inputRef = react_1.default.useRef(null);
     const getValue = () => inputRef.current == null
         ? undefined
         : shared_1.DateUtils.parse(inputRef.current.value);

package/lib/cjs/custom/FieldInput.js

@@ -15,7 +15,7 @@ const Typography_1 = __importDefault(require("@mui/material/Typography"));
  */
 const FieldInput = ({ field, mref, onChange, defaultValue }) => {
     // Ref
-    const inputRef = react_1.default.useRef();
+    const inputRef = react_1.default.useRef(null);
     const getValue = () => inputRef.current?.value;
     react_1.default.useImperativeHandle(mref, () => ({
         getValue,

package/lib/cjs/custom/FieldJson.js

@@ -26,7 +26,7 @@ function parseJson(value) {
  */
 const FieldJson = ({ field, mref, onChange, defaultValue }) => {
     // Ref
-    const inputRef = react_1.default.useRef();
+    const inputRef = react_1.default.useRef(null);
     const getValue = () => parseJson(inputRef.current?.value);
     const setValue = (value) => {
         if (inputRef.current) {

package/lib/cjs/custom/FieldNumberInput.js

@@ -16,7 +16,7 @@ const Typography_1 = __importDefault(require("@mui/material/Typography"));
  */
 const FieldNumberInput = ({ field, mref, onChange, defaultValue }) => {
     // Ref
-    const inputRef = react_1.default.useRef();
+    const inputRef = react_1.default.useRef(null);
     const getValue = () => {
         const value = inputRef.current?.valueAsNumber;
         return shared_1.NumberUtils.parse(value);

package/lib/cjs/custom/FieldTexarea.js

@@ -15,7 +15,7 @@ const Typography_1 = __importDefault(require("@mui/material/Typography"));
  */
 const FieldTexarea = ({ field, mref, onChange, defaultValue }) => {
     // Ref
-    const inputRef = react_1.default.useRef();
+    const inputRef = react_1.default.useRef(null);
     const getValue = () => inputRef.current?.value;
     const setValue = (value) => {
         if (inputRef.current)

package/lib/cjs/html/HtmlDiv.d.ts

@@ -1,4 +1,27 @@
 import { HTMLAttributes } from "react";
+declare class HtmlDivElement extends HTMLElement {
+    static get observedAttributes(): string[];
+    private wrapper;
+    private observer;
+    private _displayStyle?;
+    /**
+     * Display style
+     */
+    get displayStyle(): string | undefined;
+    set displayStyle(style: string | undefined);
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _oldValue: any, newValue: any): void;
+    setContent(): void;
+}
+declare module "react" {
+    namespace JSX {
+        interface IntrinsicElements {
+            "html-div": React.DetailedHTMLProps<React.HTMLAttributes<HtmlDivElement>, HtmlDivElement>;
+        }
+    }
+}
 /**
  * Custom HTML element properties
  * 自定义 HTML 元素属性
@@ -10,13 +33,6 @@ export type HtmlDivProps = HTMLAttributes<HTMLElement> & {
      */
     displayStyle?: string;
 };
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            "html-div": React.HTMLAttributes<HTMLElement>;
-        }
-    }
-}
 /**
  * Custom HTML element that sanitizes and displays HTML content
  * 自定义 HTML 元素，用于清理和显示 HTML 内容
@@ -24,3 +40,4 @@ declare global {
  * @returns Component
  */
 export declare function HtmlDiv(props: HtmlDivProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/cjs/html/HtmlDiv.js

@@ -1,8 +1,12 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HtmlDiv = HtmlDiv;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const shared_1 = require("@etsoo/shared");
+const dompurify_1 = __importDefault(require("dompurify"));
 class HtmlDivElement extends HTMLElement {
     static get observedAttributes() {
         return ["displaystyle"];
@@ -86,7 +90,7 @@ class HtmlDivElement extends HTMLElement {
             wrapper.innerHTML = this.textContent;
         }
         else {
-            wrapper.innerHTML = html;
+            wrapper.innerHTML = dompurify_1.default.sanitize(html);
         }
         this.textContent = null; // Clear the textContent to avoid duplication
     }

package/lib/cjs/pages/DataGridPage.js

@@ -33,9 +33,10 @@ function DataGridPage(props) {
         if (ref == null)
             return;
         states.ref = ref;
+        if (ref.element)
+            setStates({ element: ref.element });
         //setStates({ ref });
     });
-    const initLoadedRef = react_2.default.useRef();
     // On submit callback
     const onSubmit = (data, _reset) => {
         setStates({ data });
@@ -45,33 +46,6 @@ function DataGridPage(props) {
     };
     // Search data
     const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
-            // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
-            if (scrollData) {
-                const { scrollLeft, scrollTop } = JSON.parse(scrollData);
-                globalThis.setTimeout(() => ref.scrollTo({ scrollLeft, scrollTop }), 0);
-            }
-            // Update flag value
-            initLoadedRef.current = true;
-            // Return cached rows and state
-            return [rows, state];
-        }
-        return undefined;
-    };
-    const onGridScroll = (props) => {
-        if (!cacheKey || !initLoadedRef.current)
-            return;
-        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-    };
     // Watch container
     const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
@@ -96,10 +70,7 @@ function DataGridPage(props) {
         const gridHeight = states.height;
         if (gridHeight == null)
             return;
-        return ((0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
-                if (element != null)
-                    setStates({ element });
-            }, ...rest }));
+        return ((0, jsx_runtime_1.jsx)(DataGridEx_1.DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, ...rest }));
     }, [states.height]);
     const { ref, data } = states;
     react_2.default.useEffect(() => {

package/lib/cjs/pages/FixedListPage.js

@@ -25,7 +25,6 @@ function FixedListPage(props) {
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     // States
     const [states] = react_2.default.useState({});
-    const initLoadedRef = react_2.default.useRef();
     // Scroll container
     const [scrollContainer, updateScrollContainer] = react_2.default.useState();
     const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {
@@ -33,6 +32,8 @@ function FixedListPage(props) {
             return;
         const first = states.ref == null;
         states.ref = ref;
+        if (ref.element)
+            updateScrollContainer(ref.element);
         if (first)
             reset();
     });
@@ -49,35 +50,6 @@ function FixedListPage(props) {
     const localLoadData = (props, lastItem) => {
         return loadData(GridUtils_1.GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
-    // Search data
-    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
-            // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
-            if (scrollData) {
-                const { scrollOffset } = JSON.parse(scrollData);
-                globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
-            }
-            // Update flag value
-            initLoadedRef.current = true;
-            // Return cached rows and state
-            return [rows, state];
-        }
-        return undefined;
-    };
-    const onListScroll = (props) => {
-        if (!cacheKey || !initLoadedRef.current)
-            return;
-        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-    };
     // Watch container
     const { dimensions } = (0, react_1.useDimensions)(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
@@ -92,12 +64,11 @@ function FixedListPage(props) {
                         : adjustHeight(height, rect);
             return ((0, jsx_runtime_1.jsx)(Box_1.default, { id: "list-container", sx: {
                     height: height + "px"
-                }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
-                        if (element != null)
-                            updateScrollContainer(element);
-                    }, ...rest }) }));
+                }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, ...rest }) }));
         }
     }, [rect]);
+    // Search data
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout

package/lib/cjs/pages/ListPage.js

@@ -33,7 +33,6 @@ function ListPage(props) {
         if (first)
             reset();
     });
-    const initLoadedRef = react_2.default.useRef();
     const reset = () => {
         if (states.data == null || states.ref == null)
             return;
@@ -52,36 +51,9 @@ function ListPage(props) {
     const rect = dimensions[0][2];
     // Search data
     const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            GridUtils_1.GridUtils.mergeSearchData(state, searchData);
-            // Scroll position
-            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
-            if (scrollData) {
-                const { scrollOffset } = JSON.parse(scrollData);
-                globalThis.setTimeout(() => ref.scrollTo(scrollOffset), 0);
-            }
-            // Update flag value
-            initLoadedRef.current = true;
-            // Return cached rows and state
-            return [rows, state];
-        }
-        return undefined;
-    };
-    const onListScroll = (props) => {
-        if (!cacheKey || !initLoadedRef.current)
-            return;
-        sessionStorage.setItem(`${cacheKey}-scroll`, JSON.stringify(props));
-    };
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     // Layout
     return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { ...pageProps, scrollContainer: globalThis, children: (0, jsx_runtime_1.jsxs)(Stack_1.default, { children: [(0, jsx_runtime_1.jsx)(Box_1.default, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils_1.GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
+                    }, children: rect && rect.width > 100 && ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: false, loadData: localLoadData, mRef: refs, ...rest })] }) }));
 }

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

@@ -1,7 +1,6 @@
 import React from "react";
 import type { DataGridPageProps } from "./DataGridPageProps";
-import type { ScrollerListExInnerItemRendererProps, ScrollerListExItemSize } from "../ScrollerListEx";
-import { ListChildComponentProps } from "react-window";
+import type { ScrollerListExItemSize, ScrollerListExProps } from "../ScrollerListEx";
 import { GridMethodRef } from "@etsoo/react";
 import type { OperationMessageHandlerAll } from "../messages/OperationMessageHandler";
 /**
@@ -19,14 +18,10 @@ export type ResponsePageProps<T extends object, F> = DataGridPageProps<T, F> & {
      * Min width to show Datagrid
      */
     dataGridMinWidth?: number;
-    /**
-     * Inner item renderer
-     */
-    innerItemRenderer: (props: ScrollerListExInnerItemRendererProps<T>) => React.ReactNode;
     /**
      * Item renderer
      */
-    itemRenderer?: (props: ListChildComponentProps<T>) => React.ReactElement;
+    itemRenderer?: ScrollerListExProps<T>["itemRenderer"];
     /**
      * Item size, a function indicates its a variable size list
      */

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

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

package/lib/cjs/uses/useGridCacheInitLoad.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 useGridCacheInitLoad(cacheKey, cacheMinutes) {
+    // Reference
+    const ref = react_2.default.useRef(null);
+    // Search data
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
+    // Avoid repeatedly load from cache
+    if (ref.current || !cacheKey)
+        return undefined;
+    // Cache data
+    const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
+    if (cacheData) {
+        const { rows, state } = cacheData;
+        GridUtils_1.GridUtils.mergeSearchData(state, searchData);
+        // Update flag value
+        ref.current = true;
+        return (ref) => {
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                const data = JSON.parse(scrollData);
+                shared_1.ExtendUtils.waitFor(() => ref.scrollToCell({
+                    rowIndex: data.rowStartIndex,
+                    columnIndex: data.columnStartIndex
+                }), 100);
+            }
+            // Return cached rows and state
+            return [rows, state];
+        };
+    }
+    return undefined;
+}

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

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

package/lib/cjs/uses/useListCacheInitLoad.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 useListCacheInitLoad(cacheKey, cacheMinutes) {
+    // Reference
+    const ref = react_2.default.useRef(null);
+    // Search data
+    const searchData = (0, react_1.useSearchParamsWithCache)(cacheKey);
+    // Avoid repeatedly load from cache
+    if (ref.current || !cacheKey)
+        return undefined;
+    // Cache data
+    const cacheData = GridUtils_1.GridUtils.getCacheData(cacheKey, cacheMinutes);
+    if (cacheData) {
+        const { rows, state } = cacheData;
+        GridUtils_1.GridUtils.mergeSearchData(state, searchData);
+        // Update flag value
+        ref.current = true;
+        return (ref) => {
+            // Scroll position
+            const scrollData = sessionStorage.getItem(`${cacheKey}-scroll`);
+            if (scrollData) {
+                const data = JSON.parse(scrollData);
+                shared_1.ExtendUtils.waitFor(() => ref.scrollToRow({ index: data.startIndex }), 100);
+            }
+            // Return cached rows and state
+            return [rows, state];
+        };
+    }
+    return undefined;
+}

package/lib/mjs/ButtonPopupCheckbox.js

@@ -109,7 +109,7 @@ export function ButtonPopupCheckbox(props) {
         setSelectedIds(value);
     }, [value]);
     // Selected ids
-    const tempSelectedIds = React.useRef();
+    const tempSelectedIds = React.useRef(null);
     // Click handler
     const clickHandler = () => {
         app.showInputDialog({

package/lib/mjs/ButtonPopupRadio.js

@@ -96,7 +96,7 @@ export function ButtonPopupRadio(props) {
         setCurrentValue(value);
     }, [value]);
     // Selected id
-    const tempSelectedId = React.useRef();
+    const tempSelectedId = React.useRef(null);
     // Click handler
     const clickHandler = () => {
         app.showInputDialog({

package/lib/mjs/DataGridEx.d.ts

@@ -14,7 +14,7 @@ export type DataGridExFooterItemRendererProps<T extends object> = {
 /**
  * Extended DataGrid with VariableSizeGrid props
  */
-export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadDataProps> = Omit<ScrollerGridProps<T, P>, "itemRenderer" | "columnCount" | "columnWidth" | "width"> & {
+export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadDataProps> = Omit<ScrollerGridProps<T, P>, "cellComponent" | "columnCount" | "columnWidth" | "onClick" | "onDoubleClick" | "onInitLoad" | "width"> & {
     /**
      * Alternating colors for odd/even rows
      */
@@ -70,6 +70,13 @@ export type DataGridExProps<T extends object, P extends GridJsonData = GridLoadD
      * 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