@etsoo/materialui 1.5.29 → 1.5.31

package/__tests__/ReactAppTests.tsx

@@ -72,10 +72,10 @@ const root = document.body;
 const container: HTMLElement = document.createElement("div");
 root.append(container);
 
-// The state provider
-const Provider = ReactApp.notifierProvider;
-
 act(() => {
+  // The state provider
+  const Provider = ReactApp.notifierProvider;
+
   // Concorrent renderer needs act block
   const reactRoot = createRoot(container);
   reactRoot.render(<Provider />);

package/lib/cjs/DataTable.d.ts

@@ -1,5 +1,5 @@
-import { GridRowId, GridValidRowModel } from "@mui/x-data-grid/models/gridRows";
-import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
+import { GridRowId, GridValidRowModel } from "@mui/x-data-grid/models";
+import { DataGridProps } from "@mui/x-data-grid/internals";
 /**
  * Data table selected cell params
  */

package/lib/cjs/DataTable.js

@@ -7,7 +7,7 @@ exports.DataTable = DataTable;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const ReactApp_1 = require("./app/ReactApp");
-const DataGrid_1 = require("@mui/x-data-grid/DataGrid/DataGrid");
+const DataGrid_1 = require("@mui/x-data-grid/DataGrid");
 /**
  * Data table
  * @param props Props

package/lib/cjs/MUUtils.d.ts

@@ -1,6 +1,6 @@
 import { QueryRQ } from "@etsoo/appscript";
 import { IdType } from "@etsoo/shared";
-import { GridApiCommunity } from "@mui/x-data-grid/models/api/gridApiCommunity";
+import { GridApiCommunity } from "@mui/x-data-grid/internals";
 /**
  * MU utilities
  */

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

@@ -1,4 +1,4 @@
-import { ApiRefreshTokenDto, IApi, IApiPayload } from "@etsoo/appscript";
+import { ApiRefreshTokenDto, IApi, IApiPayload, TokenAuthRQ } from "@etsoo/appscript";
 import { ReactAppType } from "./ReactApp";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
 import { IActionResult } from "@etsoo/shared";
@@ -14,6 +14,12 @@ export interface IServiceApp extends ReactAppType {
      * Core system origin
      */
     readonly coreOrigin: string;
+    /**
+     * Get token authorization request data
+     * @param api API, if not provided, use the core API
+     * @returns Result
+     */
+    getTokenAuthRQ(api?: IApi): TokenAuthRQ;
     /**
      * Load core system UI
      * @param tryLogin Try login or not

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

@@ -1,4 +1,4 @@
-import { ApiRefreshTokenDto, AppLoginParams, AppTryLoginParams, ExternalEndpoint, IApi, IApiPayload } from "@etsoo/appscript";
+import { ApiRefreshTokenDto, AppLoginParams, AppTryLoginParams, ExternalEndpoint, IApi, IApiPayload, TokenAuthRQ } from "@etsoo/appscript";
 import { IServiceApp } from "./IServiceApp";
 import { IServiceAppSettings } from "./IServiceAppSettings";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
@@ -31,6 +31,12 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, S extends
      * @param debug Debug mode
      */
     constructor(settings: S, name: string, debug?: boolean);
+    /**
+     * Get token authorization request data
+     * @param api API, if not provided, use the core API
+     * @returns Result
+     */
+    getTokenAuthRQ(api?: IApi): TokenAuthRQ;
     /**
      * Load core system UI
      * @param tryLogin Try login or not

package/lib/cjs/app/ServiceApp.js

@@ -43,6 +43,19 @@ class ServiceApp extends ReactApp_1.ReactApp {
         this.coreApi = this.createApi(this.coreName, coreEndpoint);
         this.keepLogin = true;
     }
+    /**
+     * Get token authorization request data
+     * @param api API, if not provided, use the core API
+     * @returns Result
+     */
+    getTokenAuthRQ(api) {
+        api ??= this.coreApi;
+        const auth = api.getAuthorization();
+        if (auth == null) {
+            throw new Error("Authorization is required.");
+        }
+        return { accessToken: auth.token, tokenScheme: auth.scheme };
+    }
     /**
      * Load core system UI
      * @param tryLogin Try login or not

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/DataTable.d.ts

@@ -1,5 +1,5 @@
-import { GridRowId, GridValidRowModel } from "@mui/x-data-grid/models/gridRows";
-import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
+import { GridRowId, GridValidRowModel } from "@mui/x-data-grid/models";
+import { DataGridProps } from "@mui/x-data-grid/internals";
 /**
  * Data table selected cell params
  */

package/lib/mjs/DataTable.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { useAppContext } from "./app/ReactApp";
-import { DataGrid } from "@mui/x-data-grid/DataGrid/DataGrid";
+import { DataGrid } from "@mui/x-data-grid/DataGrid";
 /**
  * Data table
  * @param props Props

package/lib/mjs/MUUtils.d.ts

@@ -1,6 +1,6 @@
 import { QueryRQ } from "@etsoo/appscript";
 import { IdType } from "@etsoo/shared";
-import { GridApiCommunity } from "@mui/x-data-grid/models/api/gridApiCommunity";
+import { GridApiCommunity } from "@mui/x-data-grid/internals";
 /**
  * MU utilities
  */

package/lib/mjs/app/IServiceApp.d.ts

@@ -1,4 +1,4 @@
-import { ApiRefreshTokenDto, IApi, IApiPayload } from "@etsoo/appscript";
+import { ApiRefreshTokenDto, IApi, IApiPayload, TokenAuthRQ } from "@etsoo/appscript";
 import { ReactAppType } from "./ReactApp";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
 import { IActionResult } from "@etsoo/shared";
@@ -14,6 +14,12 @@ export interface IServiceApp extends ReactAppType {
      * Core system origin
      */
     readonly coreOrigin: string;
+    /**
+     * Get token authorization request data
+     * @param api API, if not provided, use the core API
+     * @returns Result
+     */
+    getTokenAuthRQ(api?: IApi): TokenAuthRQ;
     /**
      * Load core system UI
      * @param tryLogin Try login or not

package/lib/mjs/app/ServiceApp.d.ts

@@ -1,4 +1,4 @@
-import { ApiRefreshTokenDto, AppLoginParams, AppTryLoginParams, ExternalEndpoint, IApi, IApiPayload } from "@etsoo/appscript";
+import { ApiRefreshTokenDto, AppLoginParams, AppTryLoginParams, ExternalEndpoint, IApi, IApiPayload, TokenAuthRQ } from "@etsoo/appscript";
 import { IServiceApp } from "./IServiceApp";
 import { IServiceAppSettings } from "./IServiceAppSettings";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
@@ -31,6 +31,12 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, S extends
      * @param debug Debug mode
      */
     constructor(settings: S, name: string, debug?: boolean);
+    /**
+     * Get token authorization request data
+     * @param api API, if not provided, use the core API
+     * @returns Result
+     */
+    getTokenAuthRQ(api?: IApi): TokenAuthRQ;
     /**
      * Load core system UI
      * @param tryLogin Try login or not

package/lib/mjs/app/ServiceApp.js

@@ -40,6 +40,19 @@ export class ServiceApp extends ReactApp {
         this.coreApi = this.createApi(this.coreName, coreEndpoint);
         this.keepLogin = true;
     }
+    /**
+     * Get token authorization request data
+     * @param api API, if not provided, use the core API
+     * @returns Result
+     */
+    getTokenAuthRQ(api) {
+        api ??= this.coreApi;
+        const auth = api.getAuthorization();
+        if (auth == null) {
+            throw new Error("Authorization is required.");
+        }
+        return { accessToken: auth.token, tokenScheme: auth.scheme };
+    }
     /**
      * Load core system UI
      * @param tryLogin Try login or not

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.29",
+  "version": "1.5.31",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,14 +40,14 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.22",
+    "@etsoo/appscript": "^1.6.25",
     "@etsoo/notificationbase": "^1.1.60",
-    "@etsoo/react": "^1.8.39",
-    "@etsoo/shared": "^1.2.68",
+    "@etsoo/react": "^1.8.40",
+    "@etsoo/shared": "^1.2.69",
     "@mui/icons-material": "^7.0.2",
     "@mui/material": "^7.0.2",
-    "@mui/x-data-grid": "^7.28.3",
-    "chart.js": "^4.4.8",
+    "@mui/x-data-grid": "^8.0.0",
+    "chart.js": "^4.4.9",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.2.5",
     "eventemitter3": "^5.0.1",
@@ -81,7 +81,7 @@
     "@types/react-dom": "^18.3.6",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^4.4.0",
     "jsdom": "^26.1.0",
     "typescript": "^5.8.3",
     "vitest": "^3.1.1"

package/src/CultureDataTable.tsx

@@ -2,7 +2,7 @@ import { DataTable, DataTableProps } from "./DataTable";
 import React from "react";
 import { ListType1 } from "@etsoo/shared";
 import { useAppContext } from "./app/ReactApp";
-import { GridRenderCellParams } from "@mui/x-data-grid/models/params/gridCellParams";
+import { GridRenderCellParams } from "@mui/x-data-grid/models/params";
 
 /**
  * Culture table props

package/src/DataTable.tsx

@@ -1,9 +1,12 @@
 import React from "react";
 import { useAppContext } from "./app/ReactApp";
-import { GridRowId, GridValidRowModel } from "@mui/x-data-grid/models/gridRows";
-import { DataGridProps } from "@mui/x-data-grid/models/props/DataGridProps";
-import { GridCellModesModel } from "@mui/x-data-grid/models/api/gridEditingApi";
-import { DataGrid } from "@mui/x-data-grid/DataGrid/DataGrid";
+import {
+  GridCellModesModel,
+  GridRowId,
+  GridValidRowModel
+} from "@mui/x-data-grid/models";
+import { DataGridProps } from "@mui/x-data-grid/internals";
+import { DataGrid } from "@mui/x-data-grid/DataGrid";
 
 /**
  * Data table selected cell params

package/src/MUUtils.ts

@@ -1,6 +1,6 @@
 import { QueryRQ } from "@etsoo/appscript";
 import { IdType } from "@etsoo/shared";
-import { GridApiCommunity } from "@mui/x-data-grid/models/api/gridApiCommunity";
+import { GridApiCommunity } from "@mui/x-data-grid/internals";
 
 /**
  * MU utilities

package/src/app/IServiceApp.ts

@@ -1,4 +1,9 @@
-import { ApiRefreshTokenDto, IApi, IApiPayload } from "@etsoo/appscript";
+import {
+  ApiRefreshTokenDto,
+  IApi,
+  IApiPayload,
+  TokenAuthRQ
+} from "@etsoo/appscript";
 import { ReactAppType } from "./ReactApp";
 import { IServiceUser, ServiceUserToken } from "./IServiceUser";
 import { IActionResult } from "@etsoo/shared";
@@ -17,6 +22,13 @@ export interface IServiceApp extends ReactAppType {
    */
   readonly coreOrigin: string;
 
+  /**
+   * Get token authorization request data
+   * @param api API, if not provided, use the core API
+   * @returns Result
+   */
+  getTokenAuthRQ(api?: IApi): TokenAuthRQ;
+
   /**
    * Load core system UI
    * @param tryLogin Try login or not

package/src/app/ServiceApp.ts

@@ -6,7 +6,8 @@ import {
   BridgeUtils,
   ExternalEndpoint,
   IApi,
-  IApiPayload
+  IApiPayload,
+  TokenAuthRQ
 } from "@etsoo/appscript";
 import { IServiceApp } from "./IServiceApp";
 import { IServiceAppSettings } from "./IServiceAppSettings";
@@ -68,6 +69,23 @@ export class ServiceApp<
     this.keepLogin = true;
   }
 
+  /**
+   * Get token authorization request data
+   * @param api API, if not provided, use the core API
+   * @returns Result
+   */
+  getTokenAuthRQ(api?: IApi): TokenAuthRQ {
+    api ??= this.coreApi;
+
+    const auth = api.getAuthorization();
+
+    if (auth == null) {
+      throw new Error("Authorization is required.");
+    }
+
+    return { accessToken: auth.token, tokenScheme: auth.scheme };
+  }
+
   /**
    * Load core system UI
    * @param tryLogin Try login or not

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/vite.config.mts

@@ -4,6 +4,11 @@ import react from "@vitejs/plugin-react";
 export default defineConfig({
   plugins: [react()],
   test: {
+    server: {
+      deps: {
+        inline: [/@mui\/x-data-grid.*/]
+      }
+    },
     globals: true,
     environment: "jsdom",
     include: ["__tests__/**/*.ts(x)?"]

package/src/global.d.ts

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