@etsoo/materialui 1.5.70 → 1.5.72

package/lib/mjs/custom/FieldInput.js

@@ -9,7 +9,7 @@ import Typography from "@mui/material/Typography";
  */
 export const FieldInput = ({ field, mref, onChange, defaultValue }) => {
     // Ref
-    const inputRef = React.useRef();
+    const inputRef = React.useRef(null);
     const getValue = () => inputRef.current?.value;
     React.useImperativeHandle(mref, () => ({
         getValue,

package/lib/mjs/custom/FieldJson.js

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

package/lib/mjs/custom/FieldNumberInput.js

@@ -10,7 +10,7 @@ import Typography from "@mui/material/Typography";
  */
 export const FieldNumberInput = ({ field, mref, onChange, defaultValue }) => {
     // Ref
-    const inputRef = React.useRef();
+    const inputRef = React.useRef(null);
     const getValue = () => {
         const value = inputRef.current?.valueAsNumber;
         return NumberUtils.parse(value);

package/lib/mjs/custom/FieldTexarea.js

@@ -9,7 +9,7 @@ import Typography from "@mui/material/Typography";
  */
 export const FieldTexarea = ({ field, mref, onChange, defaultValue }) => {
     // Ref
-    const inputRef = React.useRef();
+    const inputRef = React.useRef(null);
     const getValue = () => inputRef.current?.value;
     const setValue = (value) => {
         if (inputRef.current)

package/lib/mjs/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/mjs/html/HtmlDiv.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Utils } from "@etsoo/shared";
+import DOMPurify from "dompurify";
 class HtmlDivElement extends HTMLElement {
     static get observedAttributes() {
         return ["displaystyle"];
@@ -83,7 +84,7 @@ class HtmlDivElement extends HTMLElement {
             wrapper.innerHTML = this.textContent;
         }
         else {
-            wrapper.innerHTML = html;
+            wrapper.innerHTML = DOMPurify.sanitize(html);
         }
         this.textContent = null; // Clear the textContent to avoid duplication
     }

package/lib/mjs/pages/DataGridPage.js

@@ -27,9 +27,10 @@ export function DataGridPage(props) {
         if (ref == null)
             return;
         states.ref = ref;
+        if (ref.element)
+            setStates({ element: ref.element });
         //setStates({ ref });
     });
-    const initLoadedRef = React.useRef();
     // On submit callback
     const onSubmit = (data, _reset) => {
         setStates({ data });
@@ -39,33 +40,6 @@ export function DataGridPage(props) {
     };
     // Search data
     const searchData = useSearchParamsWithCache(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            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 } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
@@ -90,10 +64,7 @@ export function DataGridPage(props) {
         const gridHeight = states.height;
         if (gridHeight == null)
             return;
-        return (_jsx(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onGridScroll, outerRef: (element) => {
-                if (element != null)
-                    setStates({ element });
-            }, ...rest }));
+        return (_jsx(DataGridEx, { autoLoad: false, height: gridHeight, loadData: localLoadData, mRef: refs, ...rest }));
     }, [states.height]);
     const { ref, data } = states;
     React.useEffect(() => {

package/lib/mjs/pages/FixedListPage.js

@@ -19,7 +19,6 @@ export function FixedListPage(props) {
     pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
-    const initLoadedRef = React.useRef();
     // Scroll container
     const [scrollContainer, updateScrollContainer] = React.useState();
     const refs = useCombinedRefs(mRef, (ref) => {
@@ -27,6 +26,8 @@ export function FixedListPage(props) {
             return;
         const first = states.ref == null;
         states.ref = ref;
+        if (ref.element)
+            updateScrollContainer(ref.element);
         if (first)
             reset();
     });
@@ -43,35 +44,6 @@ export function FixedListPage(props) {
     const localLoadData = (props, lastItem) => {
         return loadData(GridUtils.createLoader(props, fieldTemplate, cacheKey, false), lastItem);
     };
-    // Search data
-    const searchData = useSearchParamsWithCache(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            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 } = useDimensions(1, undefined, sizeReadyMiliseconds);
     const rect = dimensions[0][2];
@@ -86,12 +58,11 @@ export function FixedListPage(props) {
                         : adjustHeight(height, rect);
             return (_jsx(Box, { id: "list-container", sx: {
                     height: height + "px"
-                }, children: _jsx(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, oRef: (element) => {
-                        if (element != null)
-                            updateScrollContainer(element);
-                    }, ...rest }) }));
+                }, children: _jsx(ScrollerListEx, { autoLoad: false, height: height, loadData: localLoadData, mRef: refs, ...rest }) }));
         }
     }, [rect]);
+    // Search data
+    const searchData = useSearchParamsWithCache(cacheKey);
     const f = typeof fields == "function" ? fields(searchData ?? {}) : fields;
     const { paddings, ...pageRest } = pageProps;
     // Layout

package/lib/mjs/pages/ListPage.js

@@ -27,7 +27,6 @@ export function ListPage(props) {
         if (first)
             reset();
     });
-    const initLoadedRef = React.useRef();
     const reset = () => {
         if (states.data == null || states.ref == null)
             return;
@@ -46,36 +45,9 @@ export function ListPage(props) {
     const rect = dimensions[0][2];
     // Search data
     const searchData = useSearchParamsWithCache(cacheKey);
-    const onInitLoad = (ref) => {
-        // Avoid repeatedly load from cache
-        if (initLoadedRef.current || !cacheKey)
-            return undefined;
-        // Cache data
-        const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
-        if (cacheData) {
-            const { rows, state } = cacheData;
-            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 (_jsx(CommonPage, { ...pageProps, scrollContainer: globalThis, children: _jsxs(Stack, { children: [_jsx(Box, { ref: dimensions[0][0], sx: {
                         paddingBottom: pageProps.paddings
-                    }, children: rect && rect.width > 100 && (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), _jsx(ScrollerListEx, { autoLoad: false, loadData: localLoadData, onUpdateRows: GridUtils.getUpdateRowsHandler(cacheKey), onInitLoad: onInitLoad, onScroll: onListScroll, mRef: refs, ...rest })] }) }));
+                    }, children: rect && rect.width > 100 && (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, top: searchBarTop, width: rect.width })) }), _jsx(ScrollerListEx, { autoLoad: false, loadData: localLoadData, mRef: refs, ...rest })] }) }));
 }

package/lib/mjs/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/mjs/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/mjs/uses/useGridCacheInitLoad.js

@@ -0,0 +1,35 @@
+import { useSearchParamsWithCache } from "@etsoo/react";
+import React from "react";
+import { GridUtils } from "../GridUtils";
+import { ExtendUtils } from "@etsoo/shared";
+export function useGridCacheInitLoad(cacheKey, cacheMinutes) {
+    // Reference
+    const ref = React.useRef(null);
+    // Search data
+    const searchData = useSearchParamsWithCache(cacheKey);
+    // Avoid repeatedly load from cache
+    if (ref.current || !cacheKey)
+        return undefined;
+    // Cache data
+    const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
+    if (cacheData) {
+        const { rows, state } = cacheData;
+        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);
+                ExtendUtils.waitFor(() => ref.scrollToCell({
+                    rowIndex: data.rowStartIndex,
+                    columnIndex: data.columnStartIndex
+                }), 100);
+            }
+            // Return cached rows and state
+            return [rows, state];
+        };
+    }
+    return undefined;
+}

package/lib/mjs/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/mjs/uses/useListCacheInitLoad.js

@@ -0,0 +1,32 @@
+import { useSearchParamsWithCache } from "@etsoo/react";
+import React from "react";
+import { GridUtils } from "../GridUtils";
+import { ExtendUtils } from "@etsoo/shared";
+export function useListCacheInitLoad(cacheKey, cacheMinutes) {
+    // Reference
+    const ref = React.useRef(null);
+    // Search data
+    const searchData = useSearchParamsWithCache(cacheKey);
+    // Avoid repeatedly load from cache
+    if (ref.current || !cacheKey)
+        return undefined;
+    // Cache data
+    const cacheData = GridUtils.getCacheData(cacheKey, cacheMinutes);
+    if (cacheData) {
+        const { rows, state } = cacheData;
+        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);
+                ExtendUtils.waitFor(() => ref.scrollToRow({ index: data.startIndex }), 100);
+            }
+            // Return cached rows and state
+            return [rows, state];
+        };
+    }
+    return undefined;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.70",
+  "version": "1.5.72",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,23 +40,23 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.43",
-    "@etsoo/notificationbase": "^1.1.63",
-    "@etsoo/react": "^1.8.49",
-    "@etsoo/shared": "^1.2.75",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@mui/x-data-grid": "^8.10.1",
+    "@etsoo/appscript": "^1.6.45",
+    "@etsoo/notificationbase": "^1.1.64",
+    "@etsoo/react": "^1.8.58",
+    "@etsoo/shared": "^1.2.76",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@mui/x-data-grid": "^8.13.1",
     "chart.js": "^4.5.0",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "dompurify": "^3.2.6",
+    "dompurify": "^3.2.7",
     "eventemitter3": "^5.0.1",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
-    "react": "^18.3.1",
+    "react": "^19.2.0",
     "react-avatar-editor": "^13.0.2",
     "react-chartjs-2": "^5.3.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.2.0",
     "react-draggable": "^4.5.0",
     "react-imask": "7.6.1"
   },
@@ -67,23 +67,22 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",
-    "@babel/core": "^7.28.3",
+    "@babel/core": "^7.28.4",
     "@babel/plugin-transform-runtime": "^7.28.3",
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
-    "@babel/runtime-corejs3": "^7.28.3",
+    "@babel/runtime-corejs3": "^7.28.4",
     "@testing-library/react": "^16.3.0",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.23",
+    "@types/react": "^19.2.2",
     "@types/react-avatar-editor": "^13.0.4",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.2.1",
     "@types/react-input-mask": "^3.0.6",
-    "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^5.0.1",
-    "jsdom": "^26.1.0",
-    "typescript": "^5.9.2",
+    "@vitejs/plugin-react": "^5.0.4",
+    "jsdom": "^27.0.0",
+    "typescript": "^5.9.3",
     "vitest": "^3.2.4"
   }
 }

package/setupTests.ts

@@ -1,5 +1,7 @@
 import { vi } from "vitest";
 
+(globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
+
 vi.mock("localStorage", () => {
   let store = {} as Storage;
   return {

package/src/ButtonPopupCheckbox.tsx

@@ -323,7 +323,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
   }, [value]);
 
   // Selected ids
-  const tempSelectedIds = React.useRef<D["id"][]>();
+  const tempSelectedIds = React.useRef<D["id"][]>(null);
 
   // Click handler
   const clickHandler = () => {

package/src/ButtonPopupRadio.tsx

@@ -287,7 +287,7 @@ export function ButtonPopupRadio<D extends DnDItemType>(
   }, [value]);
 
   // Selected id
-  const tempSelectedId = React.useRef<D["id"]>();
+  const tempSelectedId = React.useRef<D["id"]>(null);
 
   // Click handler
   const clickHandler = () => {