@etsoo/materialui 1.5.28 → 1.5.30

package/lib/cjs/TabBox.d.ts

@@ -29,6 +29,11 @@ export interface TabBoxProps extends Omit<TabsProps, "value"> {
      * Current index
      */
     index?: number;
+    /**
+     * Index field of the search params
+     * @default 'index'
+     */
+    indexField?: string;
     /**
      * Add a hidden input and its name
      */

package/lib/cjs/TabBox.js

@@ -5,11 +5,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TabBox = TabBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("@etsoo/react");
 const shared_1 = require("@etsoo/shared");
 const Box_1 = __importDefault(require("@mui/material/Box"));
 const Tab_1 = __importDefault(require("@mui/material/Tab"));
 const Tabs_1 = __importDefault(require("@mui/material/Tabs"));
-const react_1 = __importDefault(require("react"));
+const react_2 = __importDefault(require("react"));
 function isActionTab(children) {
     return typeof children === "function" && children.length === 0;
 }
@@ -20,16 +21,26 @@ function isActionTab(children) {
  */
 function TabBox(props) {
     // Destruct
-    const { index, inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
+    const { index, indexField = "index", inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
     // State
-    const [value, setValue] = react_1.default.useState(defaultIndex);
-    react_1.default.useEffect(() => {
+    const [params, setSearchParams] = (0, react_1.useSearchParamsEx1)({
+        [indexField]: "number"
+    });
+    const [value, setValue] = react_2.default.useState(params[indexField] ?? defaultIndex);
+    react_2.default.useEffect(() => {
         if (index == null)
             return;
         setValue(index);
     }, [index]);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [inputName && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, value: value }), (0, jsx_runtime_1.jsx)(Box_1.default, { ...root, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { value: value, onChange: (event, newValue) => {
+    return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [inputName && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, value: value }), (0, jsx_runtime_1.jsx)(Box_1.default, { ...root, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { value: value, onChange: (event, newValue) => {
+                        setSearchParams((prev) => {
+                            if (newValue == defaultIndex)
+                                prev.delete(indexField);
+                            else
+                                prev.set(indexField, newValue);
+                            return prev;
+                        });
                         const { children } = tabs[newValue];
                         if (isActionTab(children)) {
                             children();
@@ -39,5 +50,5 @@ function TabBox(props) {
                             if (onChange)
                                 onChange(event, newValue);
                         }
-                    }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: isActionTab(children) ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {})) : (shared_1.Utils.getResult(children, value === index)) }, index)))] }));
+                    }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: isActionTab(children) ? ((0, jsx_runtime_1.jsx)(react_2.default.Fragment, {})) : (shared_1.Utils.getResult(children, value === index)) }, index)))] }));
 }

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

@@ -3,7 +3,20 @@ import { HTMLAttributes } from "react";
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = HTMLAttributes<HTMLElement>;
+export type HtmlDivProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * Display style
+     * 显示样式
+     */
+    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/lib/cjs/html/HtmlDiv.js

@@ -1,13 +1,27 @@
 "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"];
+    }
+    wrapper = null;
+    observer = null;
+    _displayStyle = undefined;
+    /**
+     * Display style
+     */
+    get displayStyle() {
+        return this._displayStyle;
+    }
+    set displayStyle(style) {
+        this._displayStyle = style;
+        if (this.wrapper && style != null) {
+            this.wrapper.style.cssText = style;
+        }
+    }
     constructor() {
         super();
     }
@@ -16,17 +30,49 @@ class HtmlDivElement extends HTMLElement {
         const shadow = this.attachShadow({ mode: "open" });
         // Create a wrapper element to hold the sanitized HTML content
         const wrapper = document.createElement("div");
+        wrapper.style.cssText = this.displayStyle ?? "";
+        shadow.appendChild(wrapper);
+        this.wrapper = wrapper;
+        this.setContent();
+        let miliseconds = Date.now();
+        this.observer = new MutationObserver(() => {
+            const m = Date.now();
+            if (m - miliseconds < 50)
+                return; // Ignore fast changes
+            miliseconds = m;
+            this.setContent();
+        });
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === "displaystyle" && typeof newValue === "string") {
+            this.displayStyle = newValue;
+        }
+    }
+    setContent() {
+        const wrapper = this.wrapper;
+        if (!wrapper)
+            return;
         const html = this.innerHTML;
         if (shared_1.Utils.hasHtmlEntity(html) &&
             !shared_1.Utils.hasHtmlTag(html) &&
             this.textContent) {
-            wrapper.innerHTML = dompurify_1.default.sanitize(this.textContent);
+            wrapper.innerHTML = this.textContent;
         }
         else {
-            wrapper.innerHTML = dompurify_1.default.sanitize(html);
+            wrapper.innerHTML = html;
         }
         this.textContent = null; // Clear the textContent to avoid duplication
-        shadow.appendChild(wrapper);
     }
 }
 // Define the custom element only once

package/lib/mjs/TabBox.d.ts

@@ -29,6 +29,11 @@ export interface TabBoxProps extends Omit<TabsProps, "value"> {
      * Current index
      */
     index?: number;
+    /**
+     * Index field of the search params
+     * @default 'index'
+     */
+    indexField?: string;
     /**
      * Add a hidden input and its name
      */

package/lib/mjs/TabBox.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useSearchParamsEx1 } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
 import Box from "@mui/material/Box";
 import Tab from "@mui/material/Tab";
@@ -14,9 +15,12 @@ function isActionTab(children) {
  */
 export function TabBox(props) {
     // Destruct
-    const { index, inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
+    const { index, indexField = "index", inputName, root, defaultIndex = 0, onChange, tabProps, tabs, ...rest } = props;
     // State
-    const [value, setValue] = React.useState(defaultIndex);
+    const [params, setSearchParams] = useSearchParamsEx1({
+        [indexField]: "number"
+    });
+    const [value, setValue] = React.useState(params[indexField] ?? defaultIndex);
     React.useEffect(() => {
         if (index == null)
             return;
@@ -24,6 +28,13 @@ export function TabBox(props) {
     }, [index]);
     // Layout
     return (_jsxs(React.Fragment, { children: [inputName && _jsx("input", { type: "hidden", name: inputName, value: value }), _jsx(Box, { ...root, children: _jsx(Tabs, { value: value, onChange: (event, newValue) => {
+                        setSearchParams((prev) => {
+                            if (newValue == defaultIndex)
+                                prev.delete(indexField);
+                            else
+                                prev.set(indexField, newValue);
+                            return prev;
+                        });
                         const { children } = tabs[newValue];
                         if (isActionTab(children)) {
                             children();

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

@@ -3,7 +3,20 @@ import { HTMLAttributes } from "react";
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = HTMLAttributes<HTMLElement>;
+export type HtmlDivProps = HTMLAttributes<HTMLElement> & {
+    /**
+     * Display style
+     * 显示样式
+     */
+    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/lib/mjs/html/HtmlDiv.js

@@ -1,7 +1,24 @@
 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"];
+    }
+    wrapper = null;
+    observer = null;
+    _displayStyle = undefined;
+    /**
+     * Display style
+     */
+    get displayStyle() {
+        return this._displayStyle;
+    }
+    set displayStyle(style) {
+        this._displayStyle = style;
+        if (this.wrapper && style != null) {
+            this.wrapper.style.cssText = style;
+        }
+    }
     constructor() {
         super();
     }
@@ -10,17 +27,49 @@ class HtmlDivElement extends HTMLElement {
         const shadow = this.attachShadow({ mode: "open" });
         // Create a wrapper element to hold the sanitized HTML content
         const wrapper = document.createElement("div");
+        wrapper.style.cssText = this.displayStyle ?? "";
+        shadow.appendChild(wrapper);
+        this.wrapper = wrapper;
+        this.setContent();
+        let miliseconds = Date.now();
+        this.observer = new MutationObserver(() => {
+            const m = Date.now();
+            if (m - miliseconds < 50)
+                return; // Ignore fast changes
+            miliseconds = m;
+            this.setContent();
+        });
+        this.observer.observe(this, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+    }
+    disconnectedCallback() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+    }
+    attributeChangedCallback(name, _oldValue, newValue) {
+        if (name === "displaystyle" && typeof newValue === "string") {
+            this.displayStyle = newValue;
+        }
+    }
+    setContent() {
+        const wrapper = this.wrapper;
+        if (!wrapper)
+            return;
         const html = this.innerHTML;
         if (Utils.hasHtmlEntity(html) &&
             !Utils.hasHtmlTag(html) &&
             this.textContent) {
-            wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
+            wrapper.innerHTML = this.textContent;
         }
         else {
-            wrapper.innerHTML = DOMPurify.sanitize(html);
+            wrapper.innerHTML = html;
         }
         this.textContent = null; // Clear the textContent to avoid duplication
-        shadow.appendChild(wrapper);
     }
 }
 // Define the custom element only once

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.28",
+  "version": "1.5.30",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -42,7 +42,7 @@
     "@emotion/styled": "^11.14.0",
     "@etsoo/appscript": "^1.6.22",
     "@etsoo/notificationbase": "^1.1.60",
-    "@etsoo/react": "^1.8.38",
+    "@etsoo/react": "^1.8.39",
     "@etsoo/shared": "^1.2.68",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",

package/src/TabBox.tsx

@@ -1,3 +1,4 @@
+import { useSearchParamsEx1 } from "@etsoo/react";
 import { Utils } from "@etsoo/shared";
 import Box, { BoxProps } from "@mui/material/Box";
 import Tab, { TabProps } from "@mui/material/Tab";
@@ -46,6 +47,12 @@ export interface TabBoxProps extends Omit<TabsProps, "value"> {
    */
   index?: number;
 
+  /**
+   * Index field of the search params
+   * @default 'index'
+   */
+  indexField?: string;
+
   /**
    * Add a hidden input and its name
    */
@@ -76,6 +83,7 @@ export function TabBox(props: TabBoxProps) {
   // Destruct
   const {
     index,
+    indexField = "index",
     inputName,
     root,
     defaultIndex = 0,
@@ -86,7 +94,10 @@ export function TabBox(props: TabBoxProps) {
   } = props;
 
   // State
-  const [value, setValue] = React.useState(defaultIndex);
+  const [params, setSearchParams] = useSearchParamsEx1({
+    [indexField]: "number"
+  });
+  const [value, setValue] = React.useState(params[indexField] ?? defaultIndex);
 
   React.useEffect(() => {
     if (index == null) return;
@@ -101,6 +112,11 @@ export function TabBox(props: TabBoxProps) {
         <Tabs
           value={value}
           onChange={(event, newValue) => {
+            setSearchParams((prev) => {
+              if (newValue == defaultIndex) prev.delete(indexField);
+              else prev.set(indexField, newValue);
+              return prev;
+            });
             const { children } = tabs[newValue];
             if (isActionTab(children)) {
               children();

package/src/html/HtmlDiv.tsx

@@ -1,8 +1,29 @@
 import { Utils } from "@etsoo/shared";
-import DOMPurify from "dompurify";
 import { HTMLAttributes } from "react";
 
 class HtmlDivElement extends HTMLElement {
+  static get observedAttributes() {
+    return ["displaystyle"];
+  }
+
+  private wrapper: HTMLDivElement | null = null;
+  private observer: MutationObserver | null = null;
+
+  private _displayStyle?: string = undefined;
+
+  /**
+   * Display style
+   */
+  get displayStyle() {
+    return this._displayStyle;
+  }
+  set displayStyle(style: string | undefined) {
+    this._displayStyle = style;
+    if (this.wrapper && style != null) {
+      this.wrapper.style.cssText = style;
+    }
+  }
+
   constructor() {
     super();
   }
@@ -13,20 +34,55 @@ class HtmlDivElement extends HTMLElement {
 
     // Create a wrapper element to hold the sanitized HTML content
     const wrapper = document.createElement("div");
+    wrapper.style.cssText = this.displayStyle ?? "";
+    shadow.appendChild(wrapper);
+
+    this.wrapper = wrapper;
+    this.setContent();
+
+    let miliseconds = Date.now();
+    this.observer = new MutationObserver(() => {
+      const m = Date.now();
+      if (m - miliseconds < 50) return; // Ignore fast changes
+      miliseconds = m;
+      this.setContent();
+    });
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  }
+
+  disconnectedCallback() {
+    if (this.observer) {
+      this.observer.disconnect();
+      this.observer = null;
+    }
+  }
+
+  attributeChangedCallback(name: string, _oldValue: any, newValue: any) {
+    if (name === "displaystyle" && typeof newValue === "string") {
+      this.displayStyle = newValue;
+    }
+  }
+
+  setContent() {
+    const wrapper = this.wrapper;
+    if (!wrapper) return;
+
     const html = this.innerHTML;
     if (
       Utils.hasHtmlEntity(html) &&
       !Utils.hasHtmlTag(html) &&
       this.textContent
     ) {
-      wrapper.innerHTML = DOMPurify.sanitize(this.textContent);
+      wrapper.innerHTML = this.textContent;
     } else {
-      wrapper.innerHTML = DOMPurify.sanitize(html);
+      wrapper.innerHTML = html;
     }
 
     this.textContent = null; // Clear the textContent to avoid duplication
-
-    shadow.appendChild(wrapper);
   }
 }
 
@@ -39,7 +95,21 @@ if (!customElements.get("html-div")) {
  * Custom HTML element properties
  * 自定义 HTML 元素属性
  */
-export type HtmlDivProps = HTMLAttributes<HTMLElement>;
+export type HtmlDivProps = HTMLAttributes<HTMLElement> & {
+  /**
+   * Display style
+   * 显示样式
+   */
+  displayStyle?: string;
+};
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "html-div": React.HTMLAttributes<HTMLElement>;
+    }
+  }
+}
 
 /**
  * Custom HTML element that sanitizes and displays HTML content

package/src/global.d.ts

@@ -1,5 +0,0 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    "html-div": React.HTMLAttributes<HTMLElement>;
-  }
-}