@etsoo/materialui 1.6.88 → 1.6.89

package/__tests__/Utils.tsx

@@ -0,0 +1,13 @@
+import { SVGUtils } from "../src";
+
+it("SVGUtils hexToCssFilter for black", () => {
+  const hex = "#fff";
+  const filter = SVGUtils.hexToCssFilter(hex);
+  expect(filter).toBeDefined();
+});
+
+it("SVGUtils hexToCssFilter", () => {
+  const hex = "#ff3922";
+  const filter = SVGUtils.hexToCssFilter(hex);
+  expect(filter).toBeDefined();
+});

package/lib/cjs/ButtonPopover.js

@@ -39,7 +39,7 @@ function ButtonPopover(props) {
     };
     const styles = position === "left" ? { left: 14 } : { right: 14 };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(Popover_1.default, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, slotProps: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [button((handler) => setAnchorEl(handler)), (0, jsx_runtime_1.jsx)(Popover_1.default, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, disableRestoreFocus: true, slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {

package/lib/cjs/InputTipField.js

@@ -52,7 +52,7 @@ function InputTipField(props) {
             setTitle(title);
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Popover_1.default, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Popover_1.default, { disableRestoreFocus: true, open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "left"
                 }, children: data && (0, jsx_runtime_1.jsx)(List_1.default, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(Component, { changeDelay: changeDelay, fullWidth: fullWidth, onChangeDelay: (event) => {

package/lib/cjs/MenuButton.js

@@ -63,7 +63,7 @@ function MenuButton(props) {
                             ...{ sx }
                         }
                     }
-                }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest, children: items.map((item) => {
+                }, disableScrollLock: true, disableRestoreFocus: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest, children: items.map((item) => {
                     const label = labelFormatter(item);
                     return ((0, jsx_runtime_1.jsx)(MenuItem_1.default, { disabled: true, children: label }, item.id));
                 }) })] }));

package/lib/cjs/MoreFab.js

@@ -86,7 +86,7 @@ function MoreFab(props) {
     const hasIcon = actionsLocal.some((action) => action.icon != null);
     // Main
     const main = iconButton ? ((0, jsx_runtime_1.jsx)(IconButton_1.default, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : ((0, jsx_runtime_1.jsx)(Fab_1.default, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [main, (0, jsx_runtime_1.jsx)(Menu_1.default, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, slotProps: { paper: PaperProps }, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? ((0, jsx_runtime_1.jsx)(Divider_1.default, {}, index)) : ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { ...(typeof action === "string"
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [main, (0, jsx_runtime_1.jsx)(Menu_1.default, { disableScrollLock: true, disableRestoreFocus: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, slotProps: { paper: PaperProps }, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? ((0, jsx_runtime_1.jsx)(Divider_1.default, {}, index)) : ((0, jsx_runtime_1.jsxs)(MenuItem_1.default, { ...(typeof action === "string"
                         ? action.includes("://")
                             ? {
                                 component: "a",

package/lib/cjs/NotifierMU.js

@@ -285,7 +285,7 @@ class NotificationMU extends react_2.NotificationReact {
         const { content, id, open } = this;
         // Setup callback
         const options = this.renderSetup ? this.renderSetup({}) : undefined;
-        return ((0, jsx_runtime_1.jsx)(Popover_1.default, { open: open, className: className, onClose: () => this.dismiss(), ...options, children: content }, id));
+        return ((0, jsx_runtime_1.jsx)(Popover_1.default, { open: open, className: className, onClose: () => this.dismiss(), disableRestoreFocus: true, ...options, children: content }, id));
     }
     // Create loading
     createLoading(_props, className) {

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

@@ -14,6 +14,10 @@ export interface IServiceApp extends ReactAppType {
      * Core system origin
      */
     readonly coreOrigin: string;
+    /**
+     * Core system web URL
+     */
+    readonly coreWebUrl: string;
     /**
      * Get token authorization request data
      * @param api API, if not provided, use the core API

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

@@ -23,6 +23,10 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, S extends
      * Core system origin
      */
     readonly coreOrigin: string;
+    /**
+     * Core system web URL
+     */
+    readonly coreWebUrl: string;
     private coreAccessToken;
     /**
      * Constructor

package/lib/cjs/app/ServiceApp.js

@@ -24,6 +24,10 @@ class ServiceApp extends ReactApp_1.ReactApp {
      * Core system origin
      */
     coreOrigin;
+    /**
+     * Core system web URL
+     */
+    coreWebUrl;
     coreAccessToken;
     /**
      * Constructor
@@ -40,6 +44,7 @@ class ServiceApp extends ReactApp_1.ReactApp {
         }
         this.coreEndpoint = coreEndpoint;
         this.coreOrigin = new URL(coreEndpoint.webUrl).origin;
+        this.coreWebUrl = coreEndpoint.webUrl;
         this.coreApi = this.createApi(this.coreName, coreEndpoint);
         this.keepLogin = true;
     }

package/lib/cjs/index.d.ts

@@ -36,6 +36,7 @@ export * from "./texts/DateText";
 export * from "./texts/MoneyText";
 export * from "./texts/NumberText";
 export * from "./utils/CanvasUtils";
+export * from "./utils/SVGUtils";
 export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";

package/lib/cjs/index.js

@@ -56,6 +56,7 @@ __exportStar(require("./texts/DateText"), exports);
 __exportStar(require("./texts/MoneyText"), exports);
 __exportStar(require("./texts/NumberText"), exports);
 __exportStar(require("./utils/CanvasUtils"), exports);
+__exportStar(require("./utils/SVGUtils"), exports);
 __exportStar(require("./AddresSelector"), exports);
 __exportStar(require("./AuditDisplay"), exports);
 __exportStar(require("./AutocompleteExtendedProps"), exports);

package/lib/cjs/pages/UserMenu.js

@@ -82,7 +82,7 @@ function UserMenu(props) {
                             }
                         }
                     }
-                }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: {
+                }, disableScrollLock: true, disableRestoreFocus: true, anchorEl: anchorEl, anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "right"
                 }, keepMounted: true, transformOrigin: {

package/lib/cjs/utils/SVGUtils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SVG utility functions
+ */
+export declare namespace SVGUtils {
+    /**
+     * Create an SVG icon component
+     * @param icon Icon
+     * @param filterColor Filter color for the icon
+     * @returns Component
+     */
+    function createIcon(icon?: string | null, filterColor?: string | null): import("react").JSX.Element | undefined;
+    /**
+     * Hex color to CSS filter
+     * @param hex Hex color
+     * @returns Result
+     */
+    function hexToCssFilter(hex: string): string;
+    /**
+     * CSS filter to hex color
+     * @param filter CSS filter
+     * @returns Result
+     */
+    function cssFilterToHex(filter: string): Promise<string>;
+}

package/lib/cjs/utils/SVGUtils.js

@@ -0,0 +1,59 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SVGUtils = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const css_filter_converter_1 = __importDefault(require("css-filter-converter"));
+/**
+ * SVG utility functions
+ */
+var SVGUtils;
+(function (SVGUtils) {
+    /**
+     * Create an SVG icon component
+     * @param icon Icon
+     * @param filterColor Filter color for the icon
+     * @returns Component
+     */
+    // https://cdn.jsdelivr.net/npm/@material-design-icons/svg@latest/filled/local_mall.svg
+    function createIcon(icon, filterColor) {
+        if (!icon)
+            return undefined;
+        if (icon.startsWith("/"))
+            icon = "https://localhost:9002/" + icon;
+        else if (icon.startsWith("<path "))
+            icon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">${icon}</svg>`;
+        if (icon.startsWith("<svg "))
+            icon = `data:image/svg+xml;utf8,${encodeURIComponent(icon)}`;
+        const filter = !filterColor ? undefined : hexToCssFilter(filterColor);
+        return ((0, jsx_runtime_1.jsx)(Icon_1.default, { sx: { display: "flex", height: "inherit", width: "inherit" }, children: (0, jsx_runtime_1.jsx)("img", { src: icon, style: { filter } }) }));
+    }
+    SVGUtils.createIcon = createIcon;
+    /**
+     * Hex color to CSS filter
+     * @param hex Hex color
+     * @returns Result
+     */
+    function hexToCssFilter(hex) {
+        const result = css_filter_converter_1.default.hexToFilter(hex);
+        if (result == null || result.color == null)
+            throw result.error ?? new Error(`Invalid hex color: ${hex}`);
+        return result.color;
+    }
+    SVGUtils.hexToCssFilter = hexToCssFilter;
+    /**
+     * CSS filter to hex color
+     * @param filter CSS filter
+     * @returns Result
+     */
+    async function cssFilterToHex(filter) {
+        const result = await css_filter_converter_1.default.filterToHex(filter);
+        if (result == null || result.color == null)
+            throw result.error ?? new Error(`Invalid CSS filter: ${filter}`);
+        return result.color;
+    }
+    SVGUtils.cssFilterToHex = cssFilterToHex;
+})(SVGUtils || (exports.SVGUtils = SVGUtils = {}));

package/lib/mjs/ButtonPopover.js

@@ -33,7 +33,7 @@ export function ButtonPopover(props) {
     };
     const styles = position === "left" ? { left: 14 } : { right: 14 };
     // Layout
-    return (_jsxs(React.Fragment, { children: [button((handler) => setAnchorEl(handler)), _jsx(Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, slotProps: {
+    return (_jsxs(React.Fragment, { children: [button((handler) => setAnchorEl(handler)), _jsx(Popover, { anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, transformOrigin: { horizontal: position, vertical: "top" }, anchorOrigin: { horizontal: position, vertical: "bottom" }, disableRestoreFocus: true, slotProps: {
                     paper: {
                         elevation: 0,
                         sx: {

package/lib/mjs/InputTipField.js

@@ -46,7 +46,7 @@ export function InputTipField(props) {
             setTitle(title);
         });
     };
-    return (_jsxs(React.Fragment, { children: [_jsx(Popover, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
+    return (_jsxs(React.Fragment, { children: [_jsx(Popover, { disableRestoreFocus: true, open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "left"
                 }, children: data && _jsx(List, { children: data.map((item) => renderItem(item)) }) }), _jsx(Component, { changeDelay: changeDelay, fullWidth: fullWidth, onChangeDelay: (event) => {

package/lib/mjs/MenuButton.js

@@ -57,7 +57,7 @@ export function MenuButton(props) {
                             ...{ sx }
                         }
                     }
-                }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest, children: items.map((item) => {
+                }, disableScrollLock: true, disableRestoreFocus: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest, children: items.map((item) => {
                     const label = labelFormatter(item);
                     return (_jsx(MenuItem, { disabled: true, children: label }, item.id));
                 }) })] }));

package/lib/mjs/MoreFab.js

@@ -80,7 +80,7 @@ export function MoreFab(props) {
     const hasIcon = actionsLocal.some((action) => action.icon != null);
     // Main
     const main = iconButton ? (_jsx(IconButton, { color: color, size: size, title: title, onClick: handleClick, children: icon })) : (_jsx(Fab, { color: color, size: size, title: title, onClick: handleClick, children: icon }));
-    return (_jsxs(React.Fragment, { children: [main, _jsx(Menu, { disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, slotProps: { paper: PaperProps }, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? (_jsx(Divider, {}, index)) : (_jsxs(MenuItem, { ...(typeof action === "string"
+    return (_jsxs(React.Fragment, { children: [main, _jsx(Menu, { disableScrollLock: true, disableRestoreFocus: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: open, onClose: handleClose, slotProps: { paper: PaperProps }, children: actionsLocal.map(({ label, icon, action }, index) => label === "-" ? (_jsx(Divider, {}, index)) : (_jsxs(MenuItem, { ...(typeof action === "string"
                         ? action.includes("://")
                             ? {
                                 component: "a",

package/lib/mjs/NotifierMU.js

@@ -279,7 +279,7 @@ export class NotificationMU extends NotificationReact {
         const { content, id, open } = this;
         // Setup callback
         const options = this.renderSetup ? this.renderSetup({}) : undefined;
-        return (_jsx(Popover, { open: open, className: className, onClose: () => this.dismiss(), ...options, children: content }, id));
+        return (_jsx(Popover, { open: open, className: className, onClose: () => this.dismiss(), disableRestoreFocus: true, ...options, children: content }, id));
     }
     // Create loading
     createLoading(_props, className) {

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

@@ -14,6 +14,10 @@ export interface IServiceApp extends ReactAppType {
      * Core system origin
      */
     readonly coreOrigin: string;
+    /**
+     * Core system web URL
+     */
+    readonly coreWebUrl: string;
     /**
      * Get token authorization request data
      * @param api API, if not provided, use the core API

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

@@ -23,6 +23,10 @@ export declare class ServiceApp<U extends IServiceUser = IServiceUser, S extends
      * Core system origin
      */
     readonly coreOrigin: string;
+    /**
+     * Core system web URL
+     */
+    readonly coreWebUrl: string;
     private coreAccessToken;
     /**
      * Constructor

package/lib/mjs/app/ServiceApp.js

@@ -21,6 +21,10 @@ export class ServiceApp extends ReactApp {
      * Core system origin
      */
     coreOrigin;
+    /**
+     * Core system web URL
+     */
+    coreWebUrl;
     coreAccessToken;
     /**
      * Constructor
@@ -37,6 +41,7 @@ export class ServiceApp extends ReactApp {
         }
         this.coreEndpoint = coreEndpoint;
         this.coreOrigin = new URL(coreEndpoint.webUrl).origin;
+        this.coreWebUrl = coreEndpoint.webUrl;
         this.coreApi = this.createApi(this.coreName, coreEndpoint);
         this.keepLogin = true;
     }

package/lib/mjs/index.d.ts

@@ -36,6 +36,7 @@ export * from "./texts/DateText";
 export * from "./texts/MoneyText";
 export * from "./texts/NumberText";
 export * from "./utils/CanvasUtils";
+export * from "./utils/SVGUtils";
 export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";

package/lib/mjs/index.js

@@ -36,6 +36,7 @@ export * from "./texts/DateText";
 export * from "./texts/MoneyText";
 export * from "./texts/NumberText";
 export * from "./utils/CanvasUtils";
+export * from "./utils/SVGUtils";
 export * from "./AddresSelector";
 export * from "./AuditDisplay";
 export * from "./AutocompleteExtendedProps";

package/lib/mjs/pages/UserMenu.js

@@ -75,7 +75,7 @@ export function UserMenu(props) {
                             }
                         }
                     }
-                }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: {
+                }, disableScrollLock: true, disableRestoreFocus: true, anchorEl: anchorEl, anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "right"
                 }, keepMounted: true, transformOrigin: {

package/lib/mjs/utils/SVGUtils.d.ts

@@ -0,0 +1,24 @@
+/**
+ * SVG utility functions
+ */
+export declare namespace SVGUtils {
+    /**
+     * Create an SVG icon component
+     * @param icon Icon
+     * @param filterColor Filter color for the icon
+     * @returns Component
+     */
+    function createIcon(icon?: string | null, filterColor?: string | null): import("react").JSX.Element | undefined;
+    /**
+     * Hex color to CSS filter
+     * @param hex Hex color
+     * @returns Result
+     */
+    function hexToCssFilter(hex: string): string;
+    /**
+     * CSS filter to hex color
+     * @param filter CSS filter
+     * @returns Result
+     */
+    function cssFilterToHex(filter: string): Promise<string>;
+}

package/lib/mjs/utils/SVGUtils.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Icon from "@mui/material/Icon";
+import CssFilterConverter from "css-filter-converter";
+/**
+ * SVG utility functions
+ */
+export var SVGUtils;
+(function (SVGUtils) {
+    /**
+     * Create an SVG icon component
+     * @param icon Icon
+     * @param filterColor Filter color for the icon
+     * @returns Component
+     */
+    // https://cdn.jsdelivr.net/npm/@material-design-icons/svg@latest/filled/local_mall.svg
+    function createIcon(icon, filterColor) {
+        if (!icon)
+            return undefined;
+        if (icon.startsWith("/"))
+            icon = "https://localhost:9002/" + icon;
+        else if (icon.startsWith("<path "))
+            icon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">${icon}</svg>`;
+        if (icon.startsWith("<svg "))
+            icon = `data:image/svg+xml;utf8,${encodeURIComponent(icon)}`;
+        const filter = !filterColor ? undefined : hexToCssFilter(filterColor);
+        return (_jsx(Icon, { sx: { display: "flex", height: "inherit", width: "inherit" }, children: _jsx("img", { src: icon, style: { filter } }) }));
+    }
+    SVGUtils.createIcon = createIcon;
+    /**
+     * Hex color to CSS filter
+     * @param hex Hex color
+     * @returns Result
+     */
+    function hexToCssFilter(hex) {
+        const result = CssFilterConverter.hexToFilter(hex);
+        if (result == null || result.color == null)
+            throw result.error ?? new Error(`Invalid hex color: ${hex}`);
+        return result.color;
+    }
+    SVGUtils.hexToCssFilter = hexToCssFilter;
+    /**
+     * CSS filter to hex color
+     * @param filter CSS filter
+     * @returns Result
+     */
+    async function cssFilterToHex(filter) {
+        const result = await CssFilterConverter.filterToHex(filter);
+        if (result == null || result.color == null)
+            throw result.error ?? new Error(`Invalid CSS filter: ${filter}`);
+        return result.color;
+    }
+    SVGUtils.cssFilterToHex = cssFilterToHex;
+})(SVGUtils || (SVGUtils = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.88",
+  "version": "1.6.89",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -49,6 +49,7 @@
     "@mui/x-data-grid": "^9.13.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
+    "css-filter-converter": "^1.0.115",
     "dompurify": "^3.4.15",
     "eventemitter3": "^5.0.4",
     "pica": "^10.0.3",

package/src/ButtonPopover.tsx

@@ -79,6 +79,7 @@ export function ButtonPopover<T>(props: ButtonPopoverProps<T>) {
         onClick={handleClose}
         transformOrigin={{ horizontal: position, vertical: "top" }}
         anchorOrigin={{ horizontal: position, vertical: "bottom" }}
+        disableRestoreFocus
         slotProps={{
           paper: {
             elevation: 0,

package/src/InputTipField.tsx

@@ -133,6 +133,7 @@ export function InputTipField<T extends ItemType = ItemType>(
   return (
     <React.Fragment>
       <Popover
+        disableRestoreFocus
         open={anchorEl != null}
         anchorEl={anchorEl}
         onClose={() => setAnchorEl(undefined)}

package/src/MenuButton.tsx

@@ -34,8 +34,8 @@ export function MenuButton<T extends DataTypes.IdItem>(
         anchorOrigin.vertical === "center"
           ? "center"
           : anchorOrigin.vertical === "top"
-          ? "bottom"
-          : "top",
+            ? "bottom"
+            : "top",
       horizontal: anchorOrigin.horizontal
     },
     sx,
@@ -101,6 +101,7 @@ export function MenuButton<T extends DataTypes.IdItem>(
           }
         }}
         disableScrollLock
+        disableRestoreFocus
         anchorEl={anchorEl}
         anchorOrigin={anchorOrigin}
         keepMounted

package/src/MoreFab.tsx

@@ -158,7 +158,8 @@ export function MoreFab(props: MoreFabProps) {
     <React.Fragment>
       {main}
       <Menu
-        disableScrollLock={true}
+        disableScrollLock
+        disableRestoreFocus
         anchorEl={anchorEl}
         anchorOrigin={anchorOrigin}
         keepMounted

package/src/NotifierMU.tsx

@@ -710,6 +710,7 @@ export class NotificationMU extends NotificationReact {
         open={open}
         className={className}
         onClose={() => this.dismiss()}
+        disableRestoreFocus
         {...options}
       >
         {content}

package/src/app/IServiceApp.ts

@@ -22,6 +22,11 @@ export interface IServiceApp extends ReactAppType {
    */
   readonly coreOrigin: string;
 
+  /**
+   * Core system web URL
+   */
+  readonly coreWebUrl: string;
+
   /**
    * Get token authorization request data
    * @param api API, if not provided, use the core API

package/src/app/ServiceApp.ts

@@ -46,6 +46,11 @@ export class ServiceApp<
    */
   readonly coreOrigin: string;
 
+  /**
+   * Core system web URL
+   */
+  readonly coreWebUrl: string;
+
   private coreAccessToken: string | undefined;
 
   /**
@@ -64,6 +69,7 @@ export class ServiceApp<
     }
     this.coreEndpoint = coreEndpoint;
     this.coreOrigin = new URL(coreEndpoint.webUrl).origin;
+    this.coreWebUrl = coreEndpoint.webUrl;
     this.coreApi = this.createApi(this.coreName, coreEndpoint);
 
     this.keepLogin = true;

package/src/index.ts

@@ -42,6 +42,7 @@ export * from "./texts/MoneyText";
 export * from "./texts/NumberText";
 
 export * from "./utils/CanvasUtils";
+export * from "./utils/SVGUtils";
 
 export * from "./AddresSelector";
 export * from "./AuditDisplay";

package/src/pages/UserMenu.tsx

@@ -131,6 +131,7 @@ export function UserMenu(props: UserMenuProps) {
           }
         }}
         disableScrollLock
+        disableRestoreFocus
         anchorEl={anchorEl}
         anchorOrigin={{
           vertical: "bottom",

package/src/utils/SVGUtils.tsx

@@ -0,0 +1,60 @@
+import Icon from "@mui/material/Icon";
+import CssFilterConverter from "css-filter-converter";
+
+/**
+ * SVG utility functions
+ */
+export namespace SVGUtils {
+  /**
+   * Create an SVG icon component
+   * @param icon Icon
+   * @param filterColor Filter color for the icon
+   * @returns Component
+   */
+  // https://cdn.jsdelivr.net/npm/@material-design-icons/svg@latest/filled/local_mall.svg
+  export function createIcon(
+    icon?: string | null,
+    filterColor?: string | null
+  ) {
+    if (!icon) return undefined;
+
+    if (icon.startsWith("/")) icon = "https://localhost:9002/" + icon;
+    else if (icon.startsWith("<path "))
+      icon = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">${icon}</svg>`;
+
+    if (icon.startsWith("<svg "))
+      icon = `data:image/svg+xml;utf8,${encodeURIComponent(icon)}`;
+
+    const filter = !filterColor ? undefined : hexToCssFilter(filterColor);
+
+    return (
+      <Icon sx={{ display: "flex", height: "inherit", width: "inherit" }}>
+        <img src={icon} style={{ filter }} />
+      </Icon>
+    );
+  }
+
+  /**
+   * Hex color to CSS filter
+   * @param hex Hex color
+   * @returns Result
+   */
+  export function hexToCssFilter(hex: string): string {
+    const result = CssFilterConverter.hexToFilter(hex);
+    if (result == null || result.color == null)
+      throw result.error ?? new Error(`Invalid hex color: ${hex}`);
+    return result.color;
+  }
+
+  /**
+   * CSS filter to hex color
+   * @param filter CSS filter
+   * @returns Result
+   */
+  export async function cssFilterToHex(filter: string): Promise<string> {
+    const result = await CssFilterConverter.filterToHex(filter);
+    if (result == null || result.color == null)
+      throw result.error ?? new Error(`Invalid CSS filter: ${filter}`);
+    return result.color;
+  }
+}