@etsoo/materialui 1.5.30 → 1.5.32

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

@@ -0,0 +1,51 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import { ListProps } from "@mui/material/List";
+import { ListItemProps } from "@mui/material/ListItem";
+import { ListItemTextProps } from "@mui/material/ListItemText";
+type ListItemLabel<T extends object> = DataTypes.Keys<T, string | undefined> | ((item: T) => string | undefined);
+/**
+ * List multipler component props
+ */
+export type ListMultiplerProps<T extends object> = ListProps & {
+    /**
+     * List data
+     */
+    data: T[];
+    /**
+     * Id field name
+     */
+    idField: DataTypes.Keys<T, IdType>;
+    /**
+     * Primary label field name or function
+     */
+    primaryLabel: ListItemLabel<T>;
+    /**
+     * Secondary label field name or function
+     */
+    secondaryLabel?: ListItemLabel<T>;
+    /**
+     * List item props
+     */
+    listItemProps?: ListItemProps;
+    /**
+     * List item text props
+     */
+    listItemTextProps?: Omit<ListItemTextProps, "primary" | "secondary">;
+    /**
+     * Input name
+     */
+    name?: string;
+    /**
+     * On change event
+     * @param items The selected items
+     * @param ids The selected IDs
+     */
+    onCheckItems?: (items: T[], ids: unknown[]) => void;
+};
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+export declare function ListMultipler<T extends object>(props: ListMultiplerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/cjs/ListMultipler.js

@@ -0,0 +1,61 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ListMultipler = ListMultipler;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
+const List_1 = __importDefault(require("@mui/material/List"));
+const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const ListItemButton_1 = __importDefault(require("@mui/material/ListItemButton"));
+const ListItemIcon_1 = __importDefault(require("@mui/material/ListItemIcon"));
+const ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
+const react_1 = __importDefault(require("react"));
+function GetListItemLabel(data, label) {
+    if (label == null)
+        return undefined;
+    if (typeof label === "function") {
+        return label(data);
+    }
+    else {
+        return data[label];
+    }
+}
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+function ListMultipler(props) {
+    // Destruct
+    const { data, idField, primaryLabel, secondaryLabel, listItemProps, listItemTextProps, name, onCheckItems, ...rest } = props;
+    // Refs
+    const initialized = react_1.default.useRef(false);
+    react_1.default.useEffect(() => {
+        initialized.current = true;
+    }, []);
+    // State
+    const [checked, setChecked] = react_1.default.useState([]);
+    const ids = react_1.default.useMemo(() => {
+        const ids = checked.map((u) => u[idField]);
+        if (onCheckItems && initialized.current) {
+            onCheckItems(checked, ids);
+        }
+        return ids;
+    }, [checked]);
+    function handleToggle(id) {
+        if (ids.includes(id)) {
+            setChecked((prev) => prev.filter((u) => u[idField] !== id));
+        }
+        else {
+            const item = data.find((u) => u[idField] === id);
+            if (item) {
+                setChecked((prev) => [...prev, item]);
+            }
+        }
+    }
+    const inputType = typeof ids[0] === "string" ? "text" : "number";
+    // Layout
+    return ((0, jsx_runtime_1.jsxs)(List_1.default, { ...rest, children: [name && ((0, jsx_runtime_1.jsx)("input", { type: inputType, style: { display: "none" }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => ((0, jsx_runtime_1.jsx)(ListItem_1.default, { ...listItemProps, children: (0, jsx_runtime_1.jsxs)(ListItemButton_1.default, { dense: true, onClick: () => handleToggle(u[idField]), children: [(0, jsx_runtime_1.jsx)(ListItemIcon_1.default, { children: (0, jsx_runtime_1.jsx)(Checkbox_1.default, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), (0, jsx_runtime_1.jsx)(ListItemText_1.default, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
+}

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

@@ -73,6 +73,7 @@ export * from "./LinkEx";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
+export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";

package/lib/cjs/index.js

@@ -89,6 +89,7 @@ __exportStar(require("./LinkEx"), exports);
 __exportStar(require("./ListChooser"), exports);
 __exportStar(require("./ListItemRightIcon"), exports);
 __exportStar(require("./ListMoreDisplay"), exports);
+__exportStar(require("./ListMultipler"), exports);
 __exportStar(require("./LoadingButton"), exports);
 __exportStar(require("./MaskInput"), exports);
 __exportStar(require("./MenuButton"), exports);

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

@@ -0,0 +1,51 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import { ListProps } from "@mui/material/List";
+import { ListItemProps } from "@mui/material/ListItem";
+import { ListItemTextProps } from "@mui/material/ListItemText";
+type ListItemLabel<T extends object> = DataTypes.Keys<T, string | undefined> | ((item: T) => string | undefined);
+/**
+ * List multipler component props
+ */
+export type ListMultiplerProps<T extends object> = ListProps & {
+    /**
+     * List data
+     */
+    data: T[];
+    /**
+     * Id field name
+     */
+    idField: DataTypes.Keys<T, IdType>;
+    /**
+     * Primary label field name or function
+     */
+    primaryLabel: ListItemLabel<T>;
+    /**
+     * Secondary label field name or function
+     */
+    secondaryLabel?: ListItemLabel<T>;
+    /**
+     * List item props
+     */
+    listItemProps?: ListItemProps;
+    /**
+     * List item text props
+     */
+    listItemTextProps?: Omit<ListItemTextProps, "primary" | "secondary">;
+    /**
+     * Input name
+     */
+    name?: string;
+    /**
+     * On change event
+     * @param items The selected items
+     * @param ids The selected IDs
+     */
+    onCheckItems?: (items: T[], ids: unknown[]) => void;
+};
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+export declare function ListMultipler<T extends object>(props: ListMultiplerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/mjs/ListMultipler.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Checkbox from "@mui/material/Checkbox";
+import List from "@mui/material/List";
+import ListItem from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText from "@mui/material/ListItemText";
+import React from "react";
+function GetListItemLabel(data, label) {
+    if (label == null)
+        return undefined;
+    if (typeof label === "function") {
+        return label(data);
+    }
+    else {
+        return data[label];
+    }
+}
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+export function ListMultipler(props) {
+    // Destruct
+    const { data, idField, primaryLabel, secondaryLabel, listItemProps, listItemTextProps, name, onCheckItems, ...rest } = props;
+    // Refs
+    const initialized = React.useRef(false);
+    React.useEffect(() => {
+        initialized.current = true;
+    }, []);
+    // State
+    const [checked, setChecked] = React.useState([]);
+    const ids = React.useMemo(() => {
+        const ids = checked.map((u) => u[idField]);
+        if (onCheckItems && initialized.current) {
+            onCheckItems(checked, ids);
+        }
+        return ids;
+    }, [checked]);
+    function handleToggle(id) {
+        if (ids.includes(id)) {
+            setChecked((prev) => prev.filter((u) => u[idField] !== id));
+        }
+        else {
+            const item = data.find((u) => u[idField] === id);
+            if (item) {
+                setChecked((prev) => [...prev, item]);
+            }
+        }
+    }
+    const inputType = typeof ids[0] === "string" ? "text" : "number";
+    // Layout
+    return (_jsxs(List, { ...rest, children: [name && (_jsx("input", { type: inputType, style: { display: "none" }, name: name, value: ids.join(","), readOnly: true })), data.map((u) => (_jsx(ListItem, { ...listItemProps, children: _jsxs(ListItemButton, { dense: true, onClick: () => handleToggle(u[idField]), children: [_jsx(ListItemIcon, { children: _jsx(Checkbox, { edge: "start", disableRipple: true, checked: ids.includes(u[idField]) }) }), _jsx(ListItemText, { primary: GetListItemLabel(u, primaryLabel), secondary: GetListItemLabel(u, secondaryLabel), ...listItemTextProps })] }) }, `${u[idField]}`)))] }));
+}

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

@@ -73,6 +73,7 @@ export * from "./LinkEx";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
+export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";

package/lib/mjs/index.js

@@ -73,6 +73,7 @@ export * from "./LinkEx";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
+export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.30",
+  "version": "1.5.32",
   "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.26",
     "@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.1",
     "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/ListMultipler.tsx

@@ -0,0 +1,153 @@
+import { DataTypes, IdType } from "@etsoo/shared";
+import Checkbox from "@mui/material/Checkbox";
+import List, { ListProps } from "@mui/material/List";
+import ListItem, { ListItemProps } from "@mui/material/ListItem";
+import ListItemButton from "@mui/material/ListItemButton";
+import ListItemIcon from "@mui/material/ListItemIcon";
+import ListItemText, { ListItemTextProps } from "@mui/material/ListItemText";
+import React from "react";
+
+type ListItemLabel<T extends object> =
+  | DataTypes.Keys<T, string | undefined>
+  | ((item: T) => string | undefined);
+
+/**
+ * List multipler component props
+ */
+export type ListMultiplerProps<T extends object> = ListProps & {
+  /**
+   * List data
+   */
+  data: T[];
+
+  /**
+   * Id field name
+   */
+  idField: DataTypes.Keys<T, IdType>;
+
+  /**
+   * Primary label field name or function
+   */
+  primaryLabel: ListItemLabel<T>;
+
+  /**
+   * Secondary label field name or function
+   */
+  secondaryLabel?: ListItemLabel<T>;
+
+  /**
+   * List item props
+   */
+  listItemProps?: ListItemProps;
+
+  /**
+   * List item text props
+   */
+  listItemTextProps?: Omit<ListItemTextProps, "primary" | "secondary">;
+
+  /**
+   * Input name
+   */
+  name?: string;
+
+  /**
+   * On change event
+   * @param items The selected items
+   * @param ids The selected IDs
+   */
+  onCheckItems?: (items: T[], ids: unknown[]) => void;
+};
+
+function GetListItemLabel<T extends object>(data: T, label?: ListItemLabel<T>) {
+  if (label == null) return undefined;
+  if (typeof label === "function") {
+    return label(data);
+  } else {
+    return data[label] as string | undefined;
+  }
+}
+
+/**
+ * List multipler component
+ * @param props Props
+ * @returns Component
+ */
+export function ListMultipler<T extends object>(props: ListMultiplerProps<T>) {
+  // Destruct
+  const {
+    data,
+    idField,
+    primaryLabel,
+    secondaryLabel,
+    listItemProps,
+    listItemTextProps,
+    name,
+    onCheckItems,
+    ...rest
+  } = props;
+
+  // Refs
+  const initialized = React.useRef(false);
+  React.useEffect(() => {
+    initialized.current = true;
+  }, []);
+
+  // State
+  const [checked, setChecked] = React.useState<T[]>([]);
+
+  const ids = React.useMemo(() => {
+    const ids = checked.map((u) => u[idField]);
+
+    if (onCheckItems && initialized.current) {
+      onCheckItems(checked, ids);
+    }
+
+    return ids;
+  }, [checked]);
+
+  function handleToggle(id: T[DataTypes.Keys<T, IdType>]) {
+    if (ids.includes(id)) {
+      setChecked((prev) => prev.filter((u) => u[idField] !== id));
+    } else {
+      const item = data.find((u) => u[idField] === id);
+      if (item) {
+        setChecked((prev) => [...prev, item]);
+      }
+    }
+  }
+
+  const inputType = typeof ids[0] === "string" ? "text" : "number";
+
+  // Layout
+  return (
+    <List {...rest}>
+      {name && (
+        <input
+          type={inputType}
+          style={{ display: "none" }}
+          name={name}
+          value={ids.join(",")}
+          readOnly
+        />
+      )}
+      {data.map((u) => (
+        <ListItem key={`${u[idField]}`} {...listItemProps}>
+          <ListItemButton dense onClick={() => handleToggle(u[idField])}>
+            <ListItemIcon>
+              <Checkbox
+                edge="start"
+                disableRipple
+                checked={ids.includes(u[idField])}
+              />
+            </ListItemIcon>
+            <ListItemText
+              primary={GetListItemLabel(u, primaryLabel)}
+              secondary={GetListItemLabel(u, secondaryLabel)}
+              {...listItemTextProps}
+            />
+          </ListItemButton>
+        </ListItem>
+      ))}
+    </List>
+  );
+}

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/index.ts

@@ -79,6 +79,7 @@ export * from "./LinkEx";
 export * from "./ListChooser";
 export * from "./ListItemRightIcon";
 export * from "./ListMoreDisplay";
+export * from "./ListMultipler";
 export * from "./LoadingButton";
 export * from "./MaskInput";
 export * from "./MenuButton";

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)?"]