@etsoo/materialui 1.2.90 → 1.2.92

package/lib/ComboBoxPro.js

@@ -2,6 +2,7 @@ import { Autocomplete } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { InputField } from "./InputField";
+import { MUUtils } from "./MUUtils";
 export function ComboBoxPro(props) {
     var _a;
     // Labels
@@ -52,11 +53,7 @@ export function ComboBoxPro(props) {
                     if (!localValue && localValue != value)
                         onChange(event, value, "blur", undefined);
                 }
-            } })), getOptionLabel: (item) => typeof item === "object"
-            ? "label" in item
-                ? item.label
-                : item.name
-            : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
+            } })), getOptionLabel: (item) => typeof item === "object" ? MUUtils.getListItemLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
             setValue(value);
             if (onChange)
                 onChange(event, value, reason, details);

package/lib/FileUploadButton.d.ts

@@ -4,10 +4,24 @@ import React from "react";
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+    /**
+     * Max files allowed
+     */
+    maxFiles?: number;
+    /**
+     * Max file size
+     */
+    maxFileSize?: number;
     /**
      * Input field attributes
      */
     inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hidden">;
+    /**
+     * File invalid handler
+     * @param values [expected, actual]
+     * @param file File
+     */
+    onFileInvalid?: (values: [number, number], file?: File) => void;
     /**
      * Upload files callback
      * @param files Files

package/lib/FileUploadButton.js

@@ -7,7 +7,7 @@ import React from "react";
  */
 export function FileUploadButton(props) {
     // Destruct
-    const { inputProps, onUploadFiles, children, ...rest } = props;
+    const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
     const { onChange } = inputProps !== null && inputProps !== void 0 ? inputProps : {};
     // Layout
     return (React.createElement(Button, { component: "label", ...rest },
@@ -19,8 +19,26 @@ export function FileUploadButton(props) {
                     return;
                 if (onUploadFiles) {
                     const files = event.target.files;
-                    if (files == null || files.length == 0)
+                    if (files == null)
                         return;
+                    const fl = files.length;
+                    if (fl === 0)
+                        return;
+                    if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+                        if (onFileInvalid)
+                            onFileInvalid([maxFiles, fl]);
+                        return;
+                    }
+                    if (maxFileSize && maxFileSize > 0) {
+                        for (let f = 0; f < fl; f++) {
+                            const file = files[f];
+                            if (file.size > maxFileSize) {
+                                if (onFileInvalid)
+                                    onFileInvalid([maxFileSize, file.size], file);
+                                return;
+                            }
+                        }
+                    }
                     onUploadFiles(files);
                 }
             }, ...inputProps })));

package/lib/MUUtils.d.ts

@@ -0,0 +1,12 @@
+import { ListType2 } from "@etsoo/shared";
+/**
+ * MU utilities
+ */
+export declare namespace MUUtils {
+    /**
+     * Get ListType2 item label
+     * @param item Item
+     * @returns Result
+     */
+    function getListItemLabel(item: ListType2): string;
+}

package/lib/MUUtils.js

@@ -0,0 +1,19 @@
+/**
+ * MU utilities
+ */
+export var MUUtils;
+(function (MUUtils) {
+    /**
+     * Get ListType2 item label
+     * @param item Item
+     * @returns Result
+     */
+    function getListItemLabel(item) {
+        return "label" in item
+            ? item.label
+            : "name" in item
+                ? item.name
+                : item.title;
+    }
+    MUUtils.getListItemLabel = getListItemLabel;
+})(MUUtils || (MUUtils = {}));

package/lib/MenuButton.js

@@ -27,29 +27,31 @@ export function MenuButton(props) {
     };
     return (React.createElement(React.Fragment, null,
         typeof button === "function" ? (button(handleMenuOpen)) : (React.createElement(Button, { onClick: handleMenuOpen, ...button })),
-        React.createElement(Menu, { PaperProps: {
-                elevation: 0,
-                sx: {
-                    overflow: "visible",
-                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-                    "& .MuiAvatar-root": {
-                        width: 32,
-                        height: 32
-                    },
-                    "&:before": {
-                        content: '""',
-                        display: "block",
-                        position: "absolute",
-                        top: isTop ? 0 : undefined,
-                        bottom: isTop ? undefined : -10,
-                        right: 14,
-                        width: 10,
-                        height: 10,
-                        bgcolor: "background.paper",
-                        transform: "translateY(-50%) rotate(45deg)",
-                        zIndex: 0
-                    },
-                    ...{ sx }
+        React.createElement(Menu, { slotProps: {
+                paper: {
+                    elevation: 0,
+                    sx: {
+                        overflow: "visible",
+                        filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                        "& .MuiAvatar-root": {
+                            width: 32,
+                            height: 32
+                        },
+                        "&:before": {
+                            content: '""',
+                            display: "block",
+                            position: "absolute",
+                            top: isTop ? 0 : undefined,
+                            bottom: isTop ? undefined : -10,
+                            right: 14,
+                            width: 10,
+                            height: 10,
+                            bgcolor: "background.paper",
+                            transform: "translateY(-50%) rotate(45deg)",
+                            zIndex: 0
+                        },
+                        ...{ sx }
+                    }
                 }
             }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: anchorOrigin, keepMounted: true, transformOrigin: transformOrigin, open: isMenuOpen, transitionDuration: 0, onClose: handleMenuClose, ...rest }, items.map((item) => {
             const label = item[labelField];

package/lib/MoreFab.js

@@ -86,10 +86,10 @@ export function MoreFab(props) {
                 : Array.isArray(action)
                     ? { component: Link, to: action[0], state: action[1] }
                     : {
-                        onClick: () => {
+                        onClick: (event) => {
                             handleClose();
                             if (typeof action === "function")
-                                action();
+                                action(event);
                         }
                     }) },
             icon != null && React.createElement(ListItemIcon, null, icon),

package/lib/NotifierMU.d.ts

@@ -10,6 +10,7 @@ export declare class NotificationMU extends NotificationReact {
     private createMessageColor;
     private createMessage;
     private createPrompt;
+    private createPopup;
     private createLoading;
     /**
      * Render method

package/lib/NotifierMU.js

@@ -1,6 +1,6 @@
 import { NotificationAlign, NotificationMessageType, NotificationType } from "@etsoo/notificationbase";
 import { DomUtils } from "@etsoo/shared";
-import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, IconButton, Slider, Snackbar, styled, Switch, TextField, Typography } from "@mui/material";
+import { Alert, AlertTitle, Backdrop, Box, Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, Fade, IconButton, Popover, Slider, Snackbar, styled, Switch, TextField, Typography } from "@mui/material";
 import { Error, Info, Help, Warning, Done } from "@mui/icons-material";
 import CloseIcon from "@mui/icons-material/Close";
 import React from "react";
@@ -57,14 +57,13 @@ export class NotificationMU extends NotificationReact {
             color: "primary"
         };
         // Setup callback
-        if (this.renderSetup)
-            this.renderSetup(setupProps);
+        const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
         // Callback
         const callback = async (_event) => {
             await this.returnValue(undefined);
             return true;
         };
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
+        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 icon,
                 React.createElement("span", { className: "dialogTitle" }, title),
@@ -81,11 +80,13 @@ export class NotificationMU extends NotificationReact {
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
         const { buttons, okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, cancelButton = true, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton, closable = false } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup({}) : undefined;
         const callback = async (_event, value) => {
             await this.returnValue(value);
             return true;
         };
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
+        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options },
             React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                 React.createElement(Help, { color: "action" }),
                 React.createElement("span", { className: "dialogTitle" }, title),
@@ -117,10 +118,9 @@ export class NotificationMU extends NotificationReact {
             variant: "filled"
         };
         // Setup callback
-        if (this.renderSetup)
-            this.renderSetup(setupProps);
+        const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
         return (React.createElement(Fade, { in: true, key: this.id },
-            React.createElement(Alert, { ...setupProps, action: closable ? (React.createElement(IconButton, { size: "small", onClick: () => this.returnValue("CLOSE") },
+            React.createElement(Alert, { ...setupProps, ...options, action: closable ? (React.createElement(IconButton, { size: "small", onClick: () => this.returnValue("CLOSE") },
                     React.createElement(CloseIcon, null))) : undefined, onClose: () => this.dismiss(), className: className },
                 this.title && React.createElement(AlertTitle, null, this.title),
                 this.content)));
@@ -195,7 +195,9 @@ export class NotificationMU extends NotificationReact {
         else {
             localInputs = inputs;
         }
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup({}) : undefined;
+        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options },
             React.createElement("form", { onSubmit: (event) => {
                     var _a;
                     event.preventDefault();
@@ -219,6 +221,13 @@ export class NotificationMU extends NotificationReact {
                         } }, cancelLabel)),
                     React.createElement(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButton }, okLabel)))))));
     }
+    createPopup(_props, className) {
+        // Destruct
+        const { content, open, renderSetup } = this;
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup({}) : undefined;
+        return (React.createElement(Popover, { open: open, className: className, ...options }, content));
+    }
     // Create loading
     createLoading(_props, className) {
         var _a;
@@ -232,12 +241,11 @@ export class NotificationMU extends NotificationReact {
         if (content === "@")
             content = labels.loading.toString();
         // Setup callback
-        if (this.renderSetup)
-            this.renderSetup(setupProps);
+        const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
         return (React.createElement(Backdrop, { key: this.id, className: className, sx: {
                 color: "#fff",
                 zIndex: (theme) => theme.zIndex.modal + 1
-            }, open: this.open },
+            }, open: this.open, ...options },
             React.createElement(Box, { display: "flex", flexDirection: "column", flexWrap: "nowrap", alignItems: "center", sx: {
                     "& > :not(style) + :not(style)": {
                         marginTop: (theme) => theme.spacing(1)
@@ -263,6 +271,9 @@ export class NotificationMU extends NotificationReact {
         else if (this.type === NotificationType.Prompt) {
             return this.createPrompt(props, className);
         }
+        else if (this.type === NotificationType.Popup) {
+            return this.createPopup(props, className);
+        }
         else if (this.type === NotificationType.Error ||
             (this.modal && this.type in NotificationMessageType)) {
             // Alert or modal message

package/lib/QuickList.js

@@ -3,6 +3,7 @@ import React from "react";
 import { InputField } from "./InputField";
 import { globalApp } from "./app/ReactApp";
 import { VBox } from "./FlexBox";
+import { MUUtils } from "./MUUtils";
 /**
  * Quick list
  * @param props Props
@@ -10,7 +11,7 @@ import { VBox } from "./FlexBox";
  */
 export function QuickList(props) {
     // Destruct
-    const { buttonProps = {}, label, inputProps, itemLabel = (item) => ("label" in item ? item.label : item.name), itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { buttonProps = {}, label, inputProps, itemLabel = MUUtils.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
     const { onClick, ...buttonRest } = buttonProps;
     // States
     const [loading, setLoading] = React.useState(false);

package/lib/TiplistPro.js

@@ -3,6 +3,7 @@ import { Autocomplete } from "@mui/material";
 import React from "react";
 import { InputField } from "./InputField";
 import { globalApp } from "./app/ReactApp";
+import { MUUtils } from "./MUUtils";
 /**
  * TiplistPro
  * @param props Props
@@ -195,7 +196,7 @@ export function TiplistPro(props) {
                 if (item["id"] === -1)
                     return (more !== null && more !== void 0 ? more : "More") + "...";
                 if (getOptionLabel == null)
-                    return "label" in item ? item.label : item.name;
+                    return MUUtils.getListItemLabel(item);
                 return getOptionLabel(item);
             }, ...rest })));
 }

package/lib/index.d.ts

@@ -74,6 +74,7 @@ export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";
 export * from "./MUGlobal";
+export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";

package/lib/index.js

@@ -74,6 +74,7 @@ export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";
 export * from "./MUGlobal";
+export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";

package/lib/pages/UserMenu.js

@@ -50,29 +50,31 @@ export function UserMenu(props) {
     return (React.createElement(React.Fragment, null,
         React.createElement(IconButton, { edge: "end", "aria-haspopup": "true", onClick: handleUserMenuOpen, color: "inherit" },
             React.createElement(UserAvatar, { title: name, src: avatar })),
-        React.createElement(Menu, { PaperProps: {
-                elevation: 0,
-                sx: {
-                    overflow: "visible",
-                    filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-                    mt: -0.4,
-                    "& .MuiAvatar-root": {
-                        width: 32,
-                        height: 32,
-                        ml: -0.5,
-                        mr: 1
-                    },
-                    "&:before": {
-                        content: '""',
-                        display: "block",
-                        position: "absolute",
-                        top: 0,
-                        right: 14,
-                        width: 10,
-                        height: 10,
-                        bgcolor: "background.paper",
-                        transform: "translateY(-50%) rotate(45deg)",
-                        zIndex: 0
+        React.createElement(Menu, { slotProps: {
+                paper: {
+                    elevation: 0,
+                    sx: {
+                        overflow: "visible",
+                        filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+                        mt: -0.4,
+                        "& .MuiAvatar-root": {
+                            width: 32,
+                            height: 32,
+                            ml: -0.5,
+                            mr: 1
+                        },
+                        "&:before": {
+                            content: '""',
+                            display: "block",
+                            position: "absolute",
+                            top: 0,
+                            right: 14,
+                            width: 10,
+                            height: 10,
+                            bgcolor: "background.paper",
+                            transform: "translateY(-50%) rotate(45deg)",
+                            zIndex: 0
+                        }
                     }
                 }
             }, disableScrollLock: true, anchorEl: anchorEl, anchorOrigin: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.90",
+  "version": "1.2.92",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.32",
-    "@etsoo/notificationbase": "^1.1.26",
-    "@etsoo/react": "^1.7.3",
-    "@etsoo/shared": "^1.2.8",
-    "@mui/icons-material": "^5.14.6",
-    "@mui/material": "^5.14.6",
-    "@mui/x-data-grid": "^6.11.2",
+    "@etsoo/appscript": "^1.4.34",
+    "@etsoo/notificationbase": "^1.1.28",
+    "@etsoo/react": "^1.7.6",
+    "@etsoo/shared": "^1.2.10",
+    "@mui/icons-material": "^5.14.7",
+    "@mui/material": "^5.14.7",
+    "@mui/x-data-grid": "^6.12.0",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.2.21",
@@ -78,15 +78,15 @@
     "@babel/cli": "^7.22.10",
     "@babel/core": "^7.22.11",
     "@babel/plugin-transform-runtime": "^7.22.10",
-    "@babel/preset-env": "^7.22.10",
+    "@babel/preset-env": "^7.22.14",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.11",
     "@babel/runtime-corejs3": "^7.22.11",
     "@testing-library/jest-dom": "^6.1.2",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.5.4",
-    "@typescript-eslint/eslint-plugin": "^6.4.1",
-    "@typescript-eslint/parser": "^6.4.1",
+    "@typescript-eslint/eslint-plugin": "^6.5.0",
+    "@typescript-eslint/parser": "^6.5.0",
     "jest": "^29.6.4",
     "jest-environment-jsdom": "^29.6.4",
     "typescript": "^5.2.2"

package/src/ComboBoxPro.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { InputField, InputFieldProps } from "./InputField";
 import { ListType2 } from "@etsoo/shared";
+import { MUUtils } from "./MUUtils";
 
 export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, false, false, true>,
@@ -130,11 +131,7 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
         />
       )}
       getOptionLabel={(item) =>
-        typeof item === "object"
-          ? "label" in item
-            ? item.label
-            : item.name
-          : item
+        typeof item === "object" ? MUUtils.getListItemLabel(item) : item
       }
       isOptionEqualToValue={(option, value) => option.id === value.id}
       noOptionsText={noOptionsText}

package/src/FileUploadButton.tsx

@@ -5,6 +5,16 @@ import React from "react";
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+  /**
+   * Max files allowed
+   */
+  maxFiles?: number;
+
+  /**
+   * Max file size
+   */
+  maxFileSize?: number;
+
   /**
    * Input field attributes
    */
@@ -13,6 +23,13 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
     "type" | "hidden"
   >;
 
+  /**
+   * File invalid handler
+   * @param values [expected, actual]
+   * @param file File
+   */
+  onFileInvalid?: (values: [number, number], file?: File) => void;
+
   /**
    * Upload files callback
    * @param files Files
@@ -27,7 +44,15 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
  */
 export function FileUploadButton(props: FileUploadButtonProps) {
   // Destruct
-  const { inputProps, onUploadFiles, children, ...rest } = props;
+  const {
+    maxFiles,
+    maxFileSize,
+    inputProps,
+    onFileInvalid,
+    onUploadFiles,
+    children,
+    ...rest
+  } = props;
 
   const { onChange } = inputProps ?? {};
 
@@ -44,7 +69,27 @@ export function FileUploadButton(props: FileUploadButtonProps) {
 
           if (onUploadFiles) {
             const files = event.target.files;
-            if (files == null || files.length == 0) return;
+            if (files == null) return;
+
+            const fl = files.length;
+            if (fl === 0) return;
+
+            if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+              if (onFileInvalid) onFileInvalid([maxFiles, fl]);
+              return;
+            }
+
+            if (maxFileSize && maxFileSize > 0) {
+              for (let f = 0; f < fl; f++) {
+                const file = files[f];
+                if (file.size > maxFileSize) {
+                  if (onFileInvalid)
+                    onFileInvalid([maxFileSize, file.size], file);
+                  return;
+                }
+              }
+            }
+
             onUploadFiles(files);
           }
         }}

package/src/MUUtils.ts

@@ -0,0 +1,19 @@
+import { ListType2 } from "@etsoo/shared";
+
+/**
+ * MU utilities
+ */
+export namespace MUUtils {
+  /**
+   * Get ListType2 item label
+   * @param item Item
+   * @returns Result
+   */
+  export function getListItemLabel(item: ListType2) {
+    return "label" in item
+      ? item.label
+      : "name" in item
+      ? item.name
+      : item.title;
+  }
+}

package/src/MenuButton.tsx

@@ -66,29 +66,31 @@ export function MenuButton<T extends DataTypes.IdItem>(
       )}
 
       <Menu
-        PaperProps={{
-          elevation: 0,
-          sx: {
-            overflow: "visible",
-            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-            "& .MuiAvatar-root": {
-              width: 32,
-              height: 32
-            },
-            "&:before": {
-              content: '""',
-              display: "block",
-              position: "absolute",
-              top: isTop ? 0 : undefined,
-              bottom: isTop ? undefined : -10,
-              right: 14,
-              width: 10,
-              height: 10,
-              bgcolor: "background.paper",
-              transform: "translateY(-50%) rotate(45deg)",
-              zIndex: 0
-            },
-            ...{ sx }
+        slotProps={{
+          paper: {
+            elevation: 0,
+            sx: {
+              overflow: "visible",
+              filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+              "& .MuiAvatar-root": {
+                width: 32,
+                height: 32
+              },
+              "&:before": {
+                content: '""',
+                display: "block",
+                position: "absolute",
+                top: isTop ? 0 : undefined,
+                bottom: isTop ? undefined : -10,
+                right: 14,
+                width: 10,
+                height: 10,
+                bgcolor: "background.paper",
+                transform: "translateY(-50%) rotate(45deg)",
+                zIndex: 0
+              },
+              ...{ sx }
+            }
           }
         }}
         disableScrollLock

package/src/MoreFab.tsx

@@ -186,9 +186,9 @@ export function MoreFab(props: MoreFabProps) {
                 : Array.isArray(action)
                 ? { component: Link, to: action[0], state: action[1] }
                 : {
-                    onClick: () => {
+                    onClick: (event: React.MouseEvent) => {
                       handleClose();
-                      if (typeof action === "function") action();
+                      if (typeof action === "function") action(event);
                     }
                   })}
             >

package/src/NotifierMU.tsx

@@ -22,6 +22,7 @@ import {
   DialogTitle,
   Fade,
   IconButton,
+  Popover,
   Slider,
   Snackbar,
   styled,
@@ -101,7 +102,7 @@ export class NotificationMU extends NotificationReact {
     };
 
     // Setup callback
-    if (this.renderSetup) this.renderSetup(setupProps);
+    const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
 
     // Callback
     const callback = async (_event: React.MouseEvent<HTMLButtonElement>) => {
@@ -118,6 +119,7 @@ export class NotificationMU extends NotificationReact {
         fullWidth={fullWidth}
         maxWidth={maxWidth}
         fullScreen={fullScreen}
+        {...options}
       >
         <IconDialogTitle className="draggable-dialog-title">
           {icon}
@@ -172,6 +174,9 @@ export class NotificationMU extends NotificationReact {
       closable = false
     } = this.inputProps ?? {};
 
+    // Setup callback
+    const options = this.renderSetup ? this.renderSetup({}) : undefined;
+
     const callback = async (
       _event: React.MouseEvent<HTMLButtonElement>,
       value: boolean
@@ -189,6 +194,7 @@ export class NotificationMU extends NotificationReact {
         fullWidth={fullWidth}
         maxWidth={maxWidth}
         fullScreen={fullScreen}
+        {...options}
       >
         <IconDialogTitle className="draggable-dialog-title">
           <Help color="action" />
@@ -254,12 +260,13 @@ export class NotificationMU extends NotificationReact {
     };
 
     // Setup callback
-    if (this.renderSetup) this.renderSetup(setupProps);
+    const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
 
     return (
       <Fade in={true} key={this.id}>
         <Alert
           {...setupProps}
+          {...options}
           action={
             closable ? (
               <IconButton
@@ -390,6 +397,9 @@ export class NotificationMU extends NotificationReact {
       localInputs = inputs;
     }
 
+    // Setup callback
+    const options = this.renderSetup ? this.renderSetup({}) : undefined;
+
     return (
       <Dialog
         key={this.id}
@@ -399,6 +409,7 @@ export class NotificationMU extends NotificationReact {
         fullWidth={fullWidth}
         maxWidth={maxWidth}
         fullScreen={fullScreen}
+        {...options}
       >
         <form
           onSubmit={(event) => {
@@ -467,6 +478,20 @@ export class NotificationMU extends NotificationReact {
     );
   }
 
+  private createPopup(_props: NotificationRenderProps, className?: string) {
+    // Destruct
+    const { content, open, renderSetup } = this;
+
+    // Setup callback
+    const options = this.renderSetup ? this.renderSetup({}) : undefined;
+
+    return (
+      <Popover open={open} className={className} {...options}>
+        {content}
+      </Popover>
+    );
+  }
+
   // Create loading
   private createLoading(_props: NotificationRenderProps, className?: string) {
     // Properties
@@ -482,7 +507,7 @@ export class NotificationMU extends NotificationReact {
     if (content === "@") content = labels.loading.toString();
 
     // Setup callback
-    if (this.renderSetup) this.renderSetup(setupProps);
+    const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
 
     return (
       <Backdrop
@@ -493,6 +518,7 @@ export class NotificationMU extends NotificationReact {
           zIndex: (theme) => theme.zIndex.modal + 1
         }}
         open={this.open}
+        {...options}
       >
         <Box
           display="flex"
@@ -530,6 +556,8 @@ export class NotificationMU extends NotificationReact {
       return this.createConfirm(props, className);
     } else if (this.type === NotificationType.Prompt) {
       return this.createPrompt(props, className);
+    } else if (this.type === NotificationType.Popup) {
+      return this.createPopup(props, className);
     } else if (
       this.type === NotificationType.Error ||
       (this.modal && this.type in NotificationMessageType)

package/src/QuickList.tsx

@@ -13,6 +13,7 @@ import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
 import { VBox } from "./FlexBox";
+import { MUUtils } from "./MUUtils";
 
 /**
  * Quick list props
@@ -82,7 +83,7 @@ export function QuickList<T extends ListType2 = ListType2>(
     buttonProps = {},
     label,
     inputProps,
-    itemLabel = (item: T) => ("label" in item ? item.label : item.name),
+    itemLabel = MUUtils.getListItemLabel,
     itemRenderer = (item: T) => itemLabel(item),
     itemProps,
     loadData,

package/src/TiplistPro.tsx

@@ -4,6 +4,7 @@ import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React, { ChangeEventHandler } from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
+import { MUUtils } from "./MUUtils";
 
 /**
  * TiplistPro props
@@ -369,8 +370,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         getOptionLabel={(item) => {
           if (typeof item === "string") return item;
           if (item["id"] === -1) return (more ?? "More") + "...";
-          if (getOptionLabel == null)
-            return "label" in item ? item.label : item.name;
+          if (getOptionLabel == null) return MUUtils.getListItemLabel(item);
           return getOptionLabel(item);
         }}
         {...rest}

package/src/index.ts

@@ -78,6 +78,7 @@ export * from "./MobileListItemRenderer";
 export * from "./MoneyInputField";
 export * from "./MoreFab";
 export * from "./MUGlobal";
+export * from "./MUUtils";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";

package/src/pages/UserMenu.tsx

@@ -101,29 +101,31 @@ export function UserMenu(props: UserMenuProps) {
         <UserAvatar title={name} src={avatar} />
       </IconButton>
       <Menu
-        PaperProps={{
-          elevation: 0,
-          sx: {
-            overflow: "visible",
-            filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
-            mt: -0.4,
-            "& .MuiAvatar-root": {
-              width: 32,
-              height: 32,
-              ml: -0.5,
-              mr: 1
-            },
-            "&:before": {
-              content: '""',
-              display: "block",
-              position: "absolute",
-              top: 0,
-              right: 14,
-              width: 10,
-              height: 10,
-              bgcolor: "background.paper",
-              transform: "translateY(-50%) rotate(45deg)",
-              zIndex: 0
+        slotProps={{
+          paper: {
+            elevation: 0,
+            sx: {
+              overflow: "visible",
+              filter: "drop-shadow(0px 2px 8px rgba(0,0,0,0.32))",
+              mt: -0.4,
+              "& .MuiAvatar-root": {
+                width: 32,
+                height: 32,
+                ml: -0.5,
+                mr: 1
+              },
+              "&:before": {
+                content: '""',
+                display: "block",
+                position: "absolute",
+                top: 0,
+                right: 14,
+                width: 10,
+                height: 10,
+                bgcolor: "background.paper",
+                transform: "translateY(-50%) rotate(45deg)",
+                zIndex: 0
+              }
             }
           }
         }}