@etsoo/materialui 1.6.73 → 1.6.75

package/lib/cjs/ImagePreviewButton.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps } from "@mui/material/Button";
+import { DialogProps } from "@mui/material/Dialog";
+import React from "react";
+/**
+ * Image preview button props
+ */
+export type ImagePreviewButtonProps = {
+    /**
+     * Button props
+     */
+    buttonProps?: Omit<ButtonProps, "onClick" | "disabled">;
+    /**
+     * Dialog props
+     */
+    dialogProps?: Omit<DialogProps, "open" | "onClose">;
+    /**
+     * Image
+     */
+    image?: string;
+    /**
+     * Size
+     */
+    size?: number | [number, number];
+};
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+export declare function ImagePreviewButton(props: ImagePreviewButtonProps): React.JSX.Element;

package/lib/cjs/ImagePreviewButton.js

@@ -0,0 +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.ImagePreviewButton = ImagePreviewButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Avatar_1 = __importDefault(require("@mui/material/Avatar"));
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+const DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
+const react_1 = __importDefault(require("react"));
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+function ImagePreviewButton(props) {
+    // Destruct
+    const { buttonProps, dialogProps, image, size = 32 } = props;
+    const [open, setOpen] = react_1.default.useState(false);
+    const [width, height] = typeof size === "number" ? [size, size] : size;
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.default, { onClick: () => setOpen(true), variant: "text", disabled: !image, sx: {
+                    p: 0,
+                    minWidth: 0
+                }, ...buttonProps, children: (0, jsx_runtime_1.jsx)(Avatar_1.default, { src: image, variant: "rounded", sx: { width, height } }) }), (0, jsx_runtime_1.jsx)(Dialog_1.default, { open: open, onClose: () => setOpen(false), maxWidth: "sm", ...dialogProps, children: (0, jsx_runtime_1.jsx)(DialogContent_1.default, { children: image && ((0, jsx_runtime_1.jsx)("img", { src: image, style: { maxWidth: "100%", height: "auto" } })) }) })] }));
+}

package/lib/cjs/NotifierMU.d.ts

@@ -5,7 +5,7 @@ import { INotificationBaseReact, INotificationReact, NotificationReact, Notifier
  * MU notification data methods
  */
 export interface NotificationMUDataMethods {
-    getValue(): unknown;
+    getValue(): unknown | PromiseLike<unknown>;
 }
 /**
  * MU notification data props

package/lib/cjs/NotifierMU.js

@@ -110,7 +110,7 @@ class NotificationMU extends react_2.NotificationReact {
             return true;
         };
         const base = () => primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { ...setupProps, onClick: callback, autoFocus: true, ...primaryButtonProps, children: okLabel }));
-        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? buttons(this, callback, base) : base() })] }, this.id));
+        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: `dialog-title${draggable ? " draggable-dialog-title" : ""}`, children: [icon, (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? buttons(this, callback, base) : base() })] }, this.id));
     }
     // Create confirm
     createConfirm(_props, className) {
@@ -124,7 +124,7 @@ class NotificationMU extends react_2.NotificationReact {
             return true;
         };
         const base = () => ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false), children: cancelLabel })), primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButtonProps, children: okLabel }))] }));
-        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Help_1.default, { color: "action" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? buttons(this, callback, base) : base() })] }, this.id));
+        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: `dialog-title${draggable ? " draggable-dialog-title" : ""}`, children: [(0, jsx_runtime_1.jsx)(Help_1.default, { color: "action" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), inputs] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? buttons(this, callback, base) : base() })] }, this.id));
     }
     createMessageColor() {
         if (this.type === notificationbase_1.NotificationMessageType.Danger)
@@ -168,13 +168,12 @@ class NotificationMU extends react_2.NotificationReact {
             setError(undefined);
             if (this.onReturn) {
                 // Get the value
-                const value = mRef.current?.getValue();
+                const value = await mRef.current?.getValue();
                 if (value == null) {
                     return false;
                 }
-                const result = this.onReturn(value);
+                const v = await this.onReturn(value);
                 // returns false to prevent default dismiss
-                const v = await result;
                 if (v === false) {
                     return false;
                 }
@@ -191,7 +190,7 @@ class NotificationMU extends react_2.NotificationReact {
                             this.onReturn(undefined);
                         this.dismiss();
                     }, children: cancelLabel })), primaryButton && ((0, jsx_runtime_1.jsx)(LoadingButton_1.LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButtonProps, children: okLabel }))] }));
-        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { ...inputProps, children: [content, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: errorRef, color: "error", align: "center" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? buttons(this, handleSubmit, base) : base() })] }, this.id));
+        return ((0, jsx_runtime_1.jsxs)(Dialog_1.default, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent_1.DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: `dialog-title${draggable ? " draggable-dialog-title" : ""}`, children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { ...inputProps, children: [content, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: errorRef, color: "error", align: "center" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? buttons(this, handleSubmit, base) : base() })] }, this.id));
     }
     // Create prompt
     createPrompt(_props, className) {
@@ -275,7 +274,7 @@ class NotificationMU extends react_2.NotificationReact {
                         return false;
                     }
                 }
-            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { dividers: true, children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: errorRef, color: "error", align: "center" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? buttons(this, handleSubmit, base) : base() })] }, this.id));
+            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [(0, jsx_runtime_1.jsxs)(IconDialogTitle, { draggable: draggable, className: `dialog-title${draggable ? " draggable-dialog-title" : ""}`, children: [(0, jsx_runtime_1.jsx)(Info_1.default, { color: "primary" }), (0, jsx_runtime_1.jsx)("span", { className: "dialogTitle", children: title }), closable && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) }))] }), (0, jsx_runtime_1.jsxs)(DialogContent_1.default, { dividers: true, children: [typeof this.content === "string" ? ((0, jsx_runtime_1.jsx)(DialogContentText_1.default, { children: this.content })) : (this.content), localInputs, (0, jsx_runtime_1.jsx)(Typography_1.default, { component: "div", variant: "caption", ref: errorRef, color: "error", align: "center" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? buttons(this, handleSubmit, base) : base() })] }, this.id));
     }
     createPopup(_props, className) {
         // Destruct

package/lib/cjs/index.d.ts

@@ -73,6 +73,7 @@ export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
+export * from "./ImagePreviewButton";
 export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";

package/lib/cjs/index.js

@@ -93,6 +93,7 @@ __exportStar(require("./GridUtils"), exports);
 __exportStar(require("./HiSelector"), exports);
 __exportStar(require("./HiSelectorTL"), exports);
 __exportStar(require("./IconButtonLink"), exports);
+__exportStar(require("./ImagePreviewButton"), exports);
 __exportStar(require("./InputField"), exports);
 __exportStar(require("./InputTipField"), exports);
 __exportStar(require("./IntInputField"), exports);

package/lib/mjs/ImagePreviewButton.d.ts

@@ -0,0 +1,30 @@
+import { ButtonProps } from "@mui/material/Button";
+import { DialogProps } from "@mui/material/Dialog";
+import React from "react";
+/**
+ * Image preview button props
+ */
+export type ImagePreviewButtonProps = {
+    /**
+     * Button props
+     */
+    buttonProps?: Omit<ButtonProps, "onClick" | "disabled">;
+    /**
+     * Dialog props
+     */
+    dialogProps?: Omit<DialogProps, "open" | "onClose">;
+    /**
+     * Image
+     */
+    image?: string;
+    /**
+     * Size
+     */
+    size?: number | [number, number];
+};
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+export declare function ImagePreviewButton(props: ImagePreviewButtonProps): React.JSX.Element;

package/lib/mjs/ImagePreviewButton.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Avatar from "@mui/material/Avatar";
+import Button from "@mui/material/Button";
+import Dialog from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import React from "react";
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+export function ImagePreviewButton(props) {
+    // Destruct
+    const { buttonProps, dialogProps, image, size = 32 } = props;
+    const [open, setOpen] = React.useState(false);
+    const [width, height] = typeof size === "number" ? [size, size] : size;
+    return (_jsxs(React.Fragment, { children: [_jsx(Button, { onClick: () => setOpen(true), variant: "text", disabled: !image, sx: {
+                    p: 0,
+                    minWidth: 0
+                }, ...buttonProps, children: _jsx(Avatar, { src: image, variant: "rounded", sx: { width, height } }) }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "sm", ...dialogProps, children: _jsx(DialogContent, { children: image && (_jsx("img", { src: image, style: { maxWidth: "100%", height: "auto" } })) }) })] }));
+}

package/lib/mjs/NotifierMU.d.ts

@@ -5,7 +5,7 @@ import { INotificationBaseReact, INotificationReact, NotificationReact, Notifier
  * MU notification data methods
  */
 export interface NotificationMUDataMethods {
-    getValue(): unknown;
+    getValue(): unknown | PromiseLike<unknown>;
 }
 /**
  * MU notification data props

package/lib/mjs/NotifierMU.js

@@ -104,7 +104,7 @@ export class NotificationMU extends NotificationReact {
             return true;
         };
         const base = () => primaryButton && (_jsx(LoadingButton, { ...setupProps, onClick: callback, autoFocus: true, ...primaryButtonProps, children: okLabel }));
-        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [icon, _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons ? buttons(this, callback, base) : base() })] }, this.id));
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: `dialog-title${draggable ? " draggable-dialog-title" : ""}`, children: [icon, _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons ? buttons(this, callback, base) : base() })] }, this.id));
     }
     // Create confirm
     createConfirm(_props, className) {
@@ -118,7 +118,7 @@ export class NotificationMU extends NotificationReact {
             return true;
         };
         const base = () => (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(LoadingButton, { color: "secondary", onClick: async (event) => await callback(event, false), children: cancelLabel })), primaryButton && (_jsx(LoadingButton, { color: "primary", onClick: async (event) => await callback(event, true), autoFocus: true, ...primaryButtonProps, children: okLabel }))] }));
-        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(HelpIcon, { color: "action" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons ? buttons(this, callback, base) : base() })] }, this.id));
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: `dialog-title${draggable ? " draggable-dialog-title" : ""}`, children: [_jsx(HelpIcon, { color: "action" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), inputs] }), _jsx(DialogActions, { children: buttons ? buttons(this, callback, base) : base() })] }, this.id));
     }
     createMessageColor() {
         if (this.type === NotificationMessageType.Danger)
@@ -162,13 +162,12 @@ export class NotificationMU extends NotificationReact {
             setError(undefined);
             if (this.onReturn) {
                 // Get the value
-                const value = mRef.current?.getValue();
+                const value = await mRef.current?.getValue();
                 if (value == null) {
                     return false;
                 }
-                const result = this.onReturn(value);
+                const v = await this.onReturn(value);
                 // returns false to prevent default dismiss
-                const v = await result;
                 if (v === false) {
                     return false;
                 }
@@ -185,7 +184,7 @@ export class NotificationMU extends NotificationReact {
                             this.onReturn(undefined);
                         this.dismiss();
                     }, children: cancelLabel })), primaryButton && (_jsx(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButtonProps, children: okLabel }))] }));
-        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { ...inputProps, children: [content, _jsx(Typography, { component: "div", variant: "caption", ref: errorRef, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? buttons(this, handleSubmit, base) : base() })] }, this.id));
+        return (_jsxs(Dialog, { open: this.open, PaperComponent: draggable ? DraggablePaperComponent : undefined, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: `dialog-title${draggable ? " draggable-dialog-title" : ""}`, children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { ...inputProps, children: [content, _jsx(Typography, { component: "div", variant: "caption", ref: errorRef, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? buttons(this, handleSubmit, base) : base() })] }, this.id));
     }
     // Create prompt
     createPrompt(_props, className) {
@@ -269,7 +268,7 @@ export class NotificationMU extends NotificationReact {
                         return false;
                     }
                 }
-            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: draggable ? "dialog-title draggable-dialog-title" : "dialog-title", children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { dividers: true, children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { component: "div", variant: "caption", ref: errorRef, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? buttons(this, handleSubmit, base) : base() })] }, this.id));
+            }, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen, scroll: "paper", ...options, children: [_jsxs(IconDialogTitle, { draggable: draggable, className: `dialog-title${draggable ? " draggable-dialog-title" : ""}`, children: [_jsx(InfoIcon, { color: "primary" }), _jsx("span", { className: "dialogTitle", children: title }), closable && (_jsx(IconButton, { className: "MuiDialogContent-root-close-button", size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) }))] }), _jsxs(DialogContent, { dividers: true, children: [typeof this.content === "string" ? (_jsx(DialogContentText, { children: this.content })) : (this.content), localInputs, _jsx(Typography, { component: "div", variant: "caption", ref: errorRef, color: "error", align: "center" })] }), _jsx(DialogActions, { children: buttons ? buttons(this, handleSubmit, base) : base() })] }, this.id));
     }
     createPopup(_props, className) {
         // Destruct

package/lib/mjs/index.d.ts

@@ -73,6 +73,7 @@ export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
+export * from "./ImagePreviewButton";
 export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";

package/lib/mjs/index.js

@@ -73,6 +73,7 @@ export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
+export * from "./ImagePreviewButton";
 export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.73",
+  "version": "1.6.75",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,9 +40,9 @@
     "@dnd-kit/react": "^0.5.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.69",
+    "@etsoo/appscript": "^1.6.70",
     "@etsoo/notificationbase": "^1.1.72",
-    "@etsoo/react": "^1.8.92",
+    "@etsoo/react": "^1.8.94",
     "@etsoo/shared": "^1.2.87",
     "@mui/icons-material": "^9.1.1",
     "@mui/material": "^9.1.2",

package/src/ImagePreviewButton.tsx

@@ -0,0 +1,73 @@
+import Avatar from "@mui/material/Avatar";
+import Button, { ButtonProps } from "@mui/material/Button";
+import Dialog, { DialogProps } from "@mui/material/Dialog";
+import DialogContent from "@mui/material/DialogContent";
+import React from "react";
+
+/**
+ * Image preview button props
+ */
+export type ImagePreviewButtonProps = {
+  /**
+   * Button props
+   */
+  buttonProps?: Omit<ButtonProps, "onClick" | "disabled">;
+
+  /**
+   * Dialog props
+   */
+  dialogProps?: Omit<DialogProps, "open" | "onClose">;
+
+  /**
+   * Image
+   */
+  image?: string;
+
+  /**
+   * Size
+   */
+  size?: number | [number, number];
+};
+
+/**
+ * Image preview button
+ * @param props Props
+ * @returns Component
+ */
+export function ImagePreviewButton(props: ImagePreviewButtonProps) {
+  // Destruct
+  const { buttonProps, dialogProps, image, size = 32 } = props;
+
+  const [open, setOpen] = React.useState(false);
+
+  const [width, height] = typeof size === "number" ? [size, size] : size;
+
+  return (
+    <React.Fragment>
+      <Button
+        onClick={() => setOpen(true)}
+        variant="text"
+        disabled={!image}
+        sx={{
+          p: 0,
+          minWidth: 0
+        }}
+        {...buttonProps}
+      >
+        <Avatar src={image} variant="rounded" sx={{ width, height }} />
+      </Button>
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        maxWidth="sm"
+        {...dialogProps}
+      >
+        <DialogContent>
+          {image && (
+            <img src={image} style={{ maxWidth: "100%", height: "auto" }} />
+          )}
+        </DialogContent>
+      </Dialog>
+    </React.Fragment>
+  );
+}

package/src/NotifierMU.tsx

@@ -80,7 +80,7 @@ const setError = (div?: HTMLDivElement | null, error?: string) => {
  * MU notification data methods
  */
 export interface NotificationMUDataMethods {
-  getValue(): unknown;
+  getValue(): unknown | PromiseLike<unknown>;
 }
 
 /**
@@ -181,9 +181,7 @@ export class NotificationMU extends NotificationReact {
       >
         <IconDialogTitle
           draggable={draggable}
-          className={
-            draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
-          }
+          className={`dialog-title${draggable ? " draggable-dialog-title" : ""}`}
         >
           {icon}
           <span className="dialogTitle">{title}</span>
@@ -279,9 +277,7 @@ export class NotificationMU extends NotificationReact {
       >
         <IconDialogTitle
           draggable={draggable}
-          className={
-            draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
-          }
+          className={`dialog-title${draggable ? " draggable-dialog-title" : ""}`}
         >
           <HelpIcon color="action" />
           <span className="dialogTitle">{title}</span>
@@ -398,15 +394,14 @@ export class NotificationMU extends NotificationReact {
 
       if (this.onReturn) {
         // Get the value
-        const value = mRef.current?.getValue();
+        const value = await mRef.current?.getValue();
         if (value == null) {
           return false;
         }
 
-        const result = this.onReturn(value);
+        const v = await this.onReturn(value);
 
         // returns false to prevent default dismiss
-        const v = await result;
         if (v === false) {
           return false;
         }
@@ -462,9 +457,7 @@ export class NotificationMU extends NotificationReact {
       >
         <IconDialogTitle
           draggable={draggable}
-          className={
-            draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
-          }
+          className={`dialog-title${draggable ? " draggable-dialog-title" : ""}`}
         >
           <InfoIcon color="primary" />
           <span className="dialogTitle">{title}</span>
@@ -664,9 +657,7 @@ export class NotificationMU extends NotificationReact {
       >
         <IconDialogTitle
           draggable={draggable}
-          className={
-            draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
-          }
+          className={`dialog-title${draggable ? " draggable-dialog-title" : ""}`}
         >
           <InfoIcon color="primary" />
           <span className="dialogTitle">{title}</span>

package/src/index.ts

@@ -79,6 +79,7 @@ export * from "./GridUtils";
 export * from "./HiSelector";
 export * from "./HiSelectorTL";
 export * from "./IconButtonLink";
+export * from "./ImagePreviewButton";
 export * from "./InputField";
 export * from "./InputTipField";
 export * from "./IntInputField";