@etsoo/materialui 1.5.69 → 1.5.71

package/__tests__/tsconfig.json

@@ -12,7 +12,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react",
+    "jsx": "react-jsx",
     "declaration": true,
     "types": ["vitest/globals"]
   },

package/lib/cjs/ButtonPopupCheckbox.js

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

package/lib/cjs/ButtonPopupRadio.js

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

package/lib/cjs/DnDList.js

@@ -175,7 +175,7 @@ function DnDList(props) {
             ? input.removeEventListener("change", doFormChange)
             : input.addEventListener("change", doFormChange));
     };
-    const divRef = react_1.default.useRef();
+    const divRef = react_1.default.useRef(null);
     if (dnd == null) {
         return (0, jsx_runtime_1.jsx)(Skeleton_1.default, { variant: "rectangular", width: "100%", height: height });
     }

package/lib/cjs/ScrollerListEx.js

@@ -99,7 +99,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 ?? [];

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/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

@@ -35,7 +35,7 @@ function DataGridPage(props) {
         states.ref = ref;
         //setStates({ ref });
     });
-    const initLoadedRef = react_2.default.useRef();
+    const initLoadedRef = react_2.default.useRef(null);
     // On submit callback
     const onSubmit = (data, _reset) => {
         setStates({ data });

package/lib/cjs/pages/FixedListPage.js

@@ -25,7 +25,7 @@ function FixedListPage(props) {
     pageProps.paddings ??= MUGlobal_1.MUGlobal.pagePaddings;
     // States
     const [states] = react_2.default.useState({});
-    const initLoadedRef = react_2.default.useRef();
+    const initLoadedRef = react_2.default.useRef(null);
     // Scroll container
     const [scrollContainer, updateScrollContainer] = react_2.default.useState();
     const refs = (0, react_1.useCombinedRefs)(mRef, (ref) => {

package/lib/cjs/pages/ListPage.js

@@ -33,7 +33,7 @@ function ListPage(props) {
         if (first)
             reset();
     });
-    const initLoadedRef = react_2.default.useRef();
+    const initLoadedRef = react_2.default.useRef(null);
     const reset = () => {
         if (states.data == null || states.ref == null)
             return;

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

@@ -167,7 +167,7 @@ export function DnDList(props) {
             ? input.removeEventListener("change", doFormChange)
             : input.addEventListener("change", doFormChange));
     };
-    const divRef = React.useRef();
+    const divRef = React.useRef(null);
     if (dnd == null) {
         return _jsx(Skeleton, { variant: "rectangular", width: "100%", height: height });
     }

package/lib/mjs/ScrollerListEx.js

@@ -93,7 +93,7 @@ function defaultItemRenderer({ index, innerItemRenderer, data, onMouseDown, sele
  */
 export function ScrollerListEx(props) {
     // Selected item ref
-    const selectedItem = React.useRef();
+    const selectedItem = React.useRef(null);
     const onMouseDown = (div, data) => {
         // Destruct
         const [selectedDiv, selectedData] = selectedItem.current ?? [];

package/lib/mjs/SelectEx.js

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

package/lib/mjs/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/mjs/custom/FieldDateInput.js

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

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

@@ -29,7 +29,7 @@ export function DataGridPage(props) {
         states.ref = ref;
         //setStates({ ref });
     });
-    const initLoadedRef = React.useRef();
+    const initLoadedRef = React.useRef(null);
     // On submit callback
     const onSubmit = (data, _reset) => {
         setStates({ data });

package/lib/mjs/pages/FixedListPage.js

@@ -19,7 +19,7 @@ export function FixedListPage(props) {
     pageProps.paddings ??= MUGlobal.pagePaddings;
     // States
     const [states] = React.useState({});
-    const initLoadedRef = React.useRef();
+    const initLoadedRef = React.useRef(null);
     // Scroll container
     const [scrollContainer, updateScrollContainer] = React.useState();
     const refs = useCombinedRefs(mRef, (ref) => {

package/lib/mjs/pages/ListPage.js

@@ -27,7 +27,7 @@ export function ListPage(props) {
         if (first)
             reset();
     });
-    const initLoadedRef = React.useRef();
+    const initLoadedRef = React.useRef(null);
     const reset = () => {
         if (states.data == null || states.ref == null)
             return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.69",
+  "version": "1.5.71",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,21 +42,21 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.43",
     "@etsoo/notificationbase": "^1.1.63",
-    "@etsoo/react": "^1.8.49",
+    "@etsoo/react": "^1.8.51",
     "@etsoo/shared": "^1.2.75",
-    "@mui/icons-material": "^7.3.0",
-    "@mui/material": "^7.3.0",
-    "@mui/x-data-grid": "^8.9.2",
+    "@mui/icons-material": "^7.3.1",
+    "@mui/material": "^7.3.1",
+    "@mui/x-data-grid": "^8.10.1",
     "chart.js": "^4.5.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.2.6",
     "eventemitter3": "^5.0.1",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
-    "react": "^18.3.1",
+    "react": "^19.1.1",
     "react-avatar-editor": "^13.0.2",
     "react-chartjs-2": "^5.3.0",
-    "react-dom": "^18.3.1",
+    "react-dom": "^19.1.1",
     "react-draggable": "^4.5.0",
     "react-imask": "7.6.1"
   },
@@ -66,22 +66,22 @@
     "@emotion/react": "$@emotion/react"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.0",
-    "@babel/core": "^7.28.0",
-    "@babel/plugin-transform-runtime": "^7.28.0",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/cli": "^7.28.3",
+    "@babel/core": "^7.28.3",
+    "@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.2",
+    "@babel/runtime-corejs3": "^7.28.3",
     "@testing-library/react": "^16.3.0",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.3.23",
+    "@types/react": "^19.1.10",
     "@types/react-avatar-editor": "^13.0.4",
-    "@types/react-dom": "^18.3.7",
+    "@types/react-dom": "^19.1.7",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-react": "^5.0.1",
     "jsdom": "^26.1.0",
     "typescript": "^5.9.2",
     "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 = () => {

package/src/DnDList.tsx

@@ -412,7 +412,7 @@ export function DnDList<
       );
   };
 
-  const divRef = React.useRef<HTMLDivElement>();
+  const divRef = React.useRef<HTMLDivElement>(null);
 
   if (dnd == null) {
     return <Skeleton variant="rectangular" width="100%" height={height} />;

package/src/ScrollerListEx.tsx

@@ -263,7 +263,7 @@ export function ScrollerListEx<T extends object>(
   props: ScrollerListExProps<T>
 ) {
   // Selected item ref
-  const selectedItem = React.useRef<[HTMLDivElement, T]>();
+  const selectedItem = React.useRef<[HTMLDivElement, T]>(null);
 
   const onMouseDown = (div: HTMLDivElement, data: T) => {
     // Destruct

package/src/SelectEx.tsx

@@ -210,7 +210,7 @@ export function SelectEx<
 
   // Value state
   const [valueState, setValueStateBase] = React.useState<unknown>(valueSource);
-  const valueRef = React.useRef<unknown>();
+  const valueRef = React.useRef<unknown>(null);
   const setValueState = (newValue: unknown) => {
     valueRef.current = newValue;
     setValueStateBase(newValue);
@@ -268,7 +268,7 @@ export function SelectEx<
   };
 
   // Refs
-  const divRef = React.useRef<HTMLDivElement>();
+  const divRef = React.useRef<HTMLDivElement>(null);
 
   // Refresh list data
   const refreshData = () => {

package/src/custom/CustomFieldUtils.tsx

@@ -96,7 +96,7 @@ export namespace CustomFieldUtils {
       const Creator = creator;
       const mref = React.createRef<CustomFieldRef<unknown>>();
 
-      let ui: JSX.Element | string = (
+      let ui: React.ReactNode = (
         <Creator
           field={field}
           mref={mref}

package/src/custom/FieldDateInput.tsx

@@ -16,7 +16,7 @@ export const FieldDateInput: ICustomFieldReact<Date> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () =>
     inputRef.current == null

package/src/custom/FieldInput.tsx

@@ -15,7 +15,7 @@ export const FieldInput: ICustomFieldReact<string> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () => inputRef.current?.value;
 

package/src/custom/FieldJson.tsx

@@ -26,7 +26,7 @@ export const FieldJson: ICustomFieldReact<object> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () => parseJson(inputRef.current?.value);
 

package/src/custom/FieldNumberInput.tsx

@@ -16,7 +16,7 @@ export const FieldNumberInput: ICustomFieldReact<number> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () => {
     const value = inputRef.current?.valueAsNumber;

package/src/custom/FieldTexarea.tsx

@@ -15,7 +15,7 @@ export const FieldTexarea: ICustomFieldReact<string> = ({
   defaultValue
 }) => {
   // Ref
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const getValue = () => inputRef.current?.value;
 

package/src/html/HtmlDiv.tsx

@@ -1,5 +1,6 @@
 import { Utils } from "@etsoo/shared";
 import { HTMLAttributes } from "react";
+import DOMPurify from "dompurify";
 
 class HtmlDivElement extends HTMLElement {
   static get observedAttributes() {
@@ -96,7 +97,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
@@ -108,6 +109,17 @@ if (!customElements.get("html-div")) {
   customElements.define("html-div", HtmlDivElement);
 }
 
+declare module "react" {
+  namespace JSX {
+    interface IntrinsicElements {
+      "html-div": React.DetailedHTMLProps<
+        React.HTMLAttributes<HtmlDivElement>,
+        HtmlDivElement
+      >;
+    }
+  }
+}
+
 /**
  * Custom HTML element properties
  * 自定义 HTML 元素属性
@@ -120,14 +132,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 内容

package/src/pages/DataGridPage.tsx

@@ -70,7 +70,7 @@ export function DataGridPage<T extends object, F>(
     }
   );
 
-  const initLoadedRef = React.useRef<boolean>();
+  const initLoadedRef = React.useRef<boolean>(null);
 
   // On submit callback
   const onSubmit = (data: FormData, _reset: boolean) => {

package/src/pages/FixedListPage.tsx

@@ -56,7 +56,7 @@ export function FixedListPage<T extends object, F>(
     ref?: ScrollerListForwardRef<T>;
   }>({});
 
-  const initLoadedRef = React.useRef<boolean>();
+  const initLoadedRef = React.useRef<boolean>(null);
 
   // Scroll container
   const [scrollContainer, updateScrollContainer] = React.useState<

package/src/pages/ListPage.tsx

@@ -62,7 +62,7 @@ export function ListPage<T extends object, F>(props: ListPageProps<T, F>) {
     if (first) reset();
   });
 
-  const initLoadedRef = React.useRef<boolean>();
+  const initLoadedRef = React.useRef<boolean>(null);
 
   const reset = () => {
     if (states.data == null || states.ref == null) return;