@etsoo/materialui 1.6.30 → 1.6.32

package/__tests__/NotifierMUTests.tsx

@@ -4,7 +4,14 @@ import {
 } from "@etsoo/notificationbase";
 import React, { act } from "react";
 import { createRoot } from "react-dom/client";
-import { NotifierMU } from "../src";
+import {
+  NotificationMUDataMethods,
+  NotificationMUDataProps,
+  NotifierMU,
+  VBox
+} from "../src";
+import TextField from "@mui/material/TextField";
+import { screen } from "@testing-library/react";
 
 // Without it will popup error:
 // The current testing environment is not configured to support act
@@ -15,11 +22,11 @@ const root = document.body;
 const container: HTMLElement = document.createElement("div");
 root.append(container);
 
-// The state provider
-const Provider = NotifierMU.setup();
-const reactRoot = createRoot(container);
-
 act(() => {
+  // The state provider
+  const Provider = NotifierMU.setup();
+  const reactRoot = createRoot(container);
+
   // Concorrent renderer needs act block
   reactRoot.render(<Provider />);
 });
@@ -137,6 +144,77 @@ test("Prompt tests", async () => {
   vi.runOnlyPendingTimers();
 });
 
+type DataType = {
+  name: string;
+  age: number;
+};
+
+function DataCollector(props: NotificationMUDataProps) {
+  const { mRef } = props;
+  const nameRef = React.createRef<HTMLInputElement>();
+  const ageRef = React.createRef<HTMLInputElement>();
+
+  function getValue(): DataType | undefined {
+    if (!nameRef.current?.value) {
+      nameRef.current?.focus();
+      return undefined;
+    }
+
+    if (!ageRef.current?.valueAsNumber) {
+      ageRef.current?.focus();
+      return undefined;
+    }
+
+    return {
+      name: nameRef.current.value,
+      age: ageRef.current.valueAsNumber
+    };
+  }
+
+  React.useImperativeHandle(mRef, () => ({
+    getValue
+  }));
+
+  return (
+    <VBox>
+      <TextField name="name" required inputRef={nameRef} />
+      <TextField name="age" type="number" required inputRef={ageRef} />
+    </VBox>
+  );
+}
+
+test("Data tests", async () => {
+  const name = "John Doe";
+  const age = 30;
+
+  act(() => {
+    // Add the notification
+    notifier.data<DataType>(
+      <DataCollector mRef={React.createRef<NotificationMUDataMethods>()} />,
+      (result) => {
+        expect(result).toEqual({ name, age });
+        return true;
+      },
+      "Data Modal"
+    );
+  });
+
+  const button = screen.getByText("OK");
+  expect(button).toBeInTheDocument();
+
+  const nameInput = root.querySelector<HTMLInputElement>('input[name="name"]');
+  expect(nameInput).not.toBeNull();
+  nameInput!.value = name;
+
+  const ageInput = root.querySelector<HTMLInputElement>('input[name="age"]');
+  expect(ageInput).not.toBeNull();
+  ageInput!.value = age.toString();
+
+  await act(async () => {
+    button.click();
+  });
+});
+
 test("Prompt tests with form submit", async () => {
   // Click
   const handleClick = vi.fn((result: boolean) => {
@@ -151,17 +229,14 @@ test("Prompt tests with form submit", async () => {
     });
   });
 
+  const button = screen.getByText("OK");
+  expect(button).toBeInTheDocument();
+
   await act(async () => {
-    (
-      root
-        .getElementsByTagName("form")[0]
-        .elements.namedItem("okButton") as HTMLButtonElement
-    )?.click();
+    button.click();
   });
 
   expect(handleClick).toHaveBeenCalled();
-
-  vi.runOnlyPendingTimers();
 });
 
 test("Message tests", () => {

package/lib/cjs/NotifierMU.d.ts

@@ -1,6 +1,18 @@
 import { NotificationAlign, NotificationRenderProps } from "@etsoo/notificationbase";
 import React from "react";
 import { INotificationBaseReact, INotificationReact, NotificationReact, NotifierReact } from "@etsoo/react";
+/**
+ * MU notification data methods
+ */
+export interface NotificationMUDataMethods {
+    getValue(): unknown;
+}
+/**
+ * MU notification data props
+ */
+export type NotificationMUDataProps = {
+    mRef: React.RefObject<NotificationMUDataMethods | null>;
+};
 /**
  * MU notification
  */
@@ -9,6 +21,7 @@ export declare class NotificationMU extends NotificationReact {
     private createConfirm;
     private createMessageColor;
     private createMessage;
+    private createData;
     private createPrompt;
     private createPopup;
     private createLoading;

package/lib/cjs/NotifierMU.js

@@ -59,6 +59,14 @@ const IconDialogTitle = (0, styles_1.styled)(DialogTitle_1.default, {
         }
     `}
 `;
+function isFunctionComponentElement(node) {
+    return (react_1.default.isValidElement(node) &&
+        typeof node.type === "function" &&
+        !(node.type.prototype && node.type.prototype.isReactComponent) &&
+        node.props != null &&
+        typeof node.props === "object" &&
+        "mRef" in node.props);
+}
 /**
  * MU notification
  */
@@ -134,6 +142,53 @@ class NotificationMU extends react_2.NotificationReact {
         const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
         return ((0, jsx_runtime_1.jsx)(Fade_1.default, { in: true, children: (0, jsx_runtime_1.jsxs)(Alert_1.default, { ...setupProps, ...options, action: closable ? ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => this.returnValue("CLOSE"), children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })) : undefined, onClose: () => this.dismiss(), className: className, children: [this.title && (0, jsx_runtime_1.jsx)(AlertTitle_1.default, { children: this.title }), this.content] }) }, this.id));
     }
+    // Create data collector
+    createData(_props, className) {
+        const labels = Labels_1.Labels.NotificationMU;
+        const title = this.title ?? labels.promptTitle;
+        const { buttons, cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, 
+        // type, not used
+        fullScreen, fullWidth = true, maxWidth, primaryButton = true, primaryButtonProps, inputProps, closable = false, draggable = fullScreen === true ? false : true } = this.inputProps ?? {};
+        const content = inputs ?? this.content;
+        if (!isFunctionComponentElement(content) || content.props.mRef == null) {
+            throw new Error("Data collector content must be a function component with mRef prop");
+        }
+        const mRef = content.props.mRef;
+        const errorRef = react_1.default.createRef();
+        const setError = (error) => {
+            if (errorRef.current == null)
+                return;
+            errorRef.current.innerText = error ?? "";
+        };
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup({}) : undefined;
+        const handleSubmit = async () => {
+            if (this.onReturn) {
+                // Get the value
+                const value = mRef.current?.getValue();
+                if (value == null) {
+                    return false;
+                }
+                const result = this.onReturn(value);
+                // returns false to prevent default dismiss
+                const v = await result;
+                if (v === false) {
+                    return false;
+                }
+                if (typeof v === "string") {
+                    setError(v);
+                    return false;
+                }
+            }
+            this.dismiss();
+            return true;
+        };
+        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)(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, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), (0, jsx_runtime_1.jsx)(DialogActions_1.default, { children: buttons ? (buttons(this, handleSubmit)) : ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [cancelButton && ((0, jsx_runtime_1.jsx)(Button_1.default, { color: "secondary", onClick: () => {
+                                    if (this.onReturn)
+                                        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 }))] })) })] }, this.id));
+    }
     // Create prompt
     createPrompt(_props, className) {
         const labels = Labels_1.Labels.NotificationMU;
@@ -147,13 +202,13 @@ class NotificationMU extends react_2.NotificationReact {
             errorRef.current.innerText = error ?? "";
         };
         const handleSubmit = async (event) => {
-            // Result
-            let result = undefined;
             const input = inputRef.current;
             if (this.onReturn) {
                 // Inputs case, no HTMLForm set to value, set the current form
                 if (inputs && value == null)
                     value = event.currentTarget.form;
+                // Result
+                let result = undefined;
                 if (input) {
                     if (type === "switch") {
                         const boolValue = input.value === "true";
@@ -171,18 +226,18 @@ class NotificationMU extends react_2.NotificationReact {
                 else if (value != null) {
                     result = this.onReturn(value);
                 }
-            }
-            // Get the value
-            // returns false to prevent default dismiss
-            const v = await result;
-            if (v === false) {
-                input?.focus();
-                return false;
-            }
-            if (typeof v === "string") {
-                setError(v);
-                input?.focus();
-                return false;
+                // Get the value
+                // returns false to prevent default dismiss
+                const v = await result;
+                if (v === false) {
+                    input?.focus();
+                    return false;
+                }
+                if (typeof v === "string") {
+                    setError(v);
+                    input?.focus();
+                    return false;
+                }
             }
             this.dismiss();
             return true;
@@ -259,6 +314,9 @@ class NotificationMU extends react_2.NotificationReact {
         else if (this.type === notificationbase_1.NotificationType.Confirm) {
             return this.createConfirm(props, className);
         }
+        else if (this.type === notificationbase_1.NotificationType.Data) {
+            return this.createData(props, className);
+        }
         else if (this.type === notificationbase_1.NotificationType.Prompt) {
             return this.createPrompt(props, className);
         }

package/lib/mjs/NotifierMU.d.ts

@@ -1,6 +1,18 @@
 import { NotificationAlign, NotificationRenderProps } from "@etsoo/notificationbase";
 import React from "react";
 import { INotificationBaseReact, INotificationReact, NotificationReact, NotifierReact } from "@etsoo/react";
+/**
+ * MU notification data methods
+ */
+export interface NotificationMUDataMethods {
+    getValue(): unknown;
+}
+/**
+ * MU notification data props
+ */
+export type NotificationMUDataProps = {
+    mRef: React.RefObject<NotificationMUDataMethods | null>;
+};
 /**
  * MU notification
  */
@@ -9,6 +21,7 @@ export declare class NotificationMU extends NotificationReact {
     private createConfirm;
     private createMessageColor;
     private createMessage;
+    private createData;
     private createPrompt;
     private createPopup;
     private createLoading;

package/lib/mjs/NotifierMU.js

@@ -53,6 +53,14 @@ const IconDialogTitle = styled(DialogTitle, {
         }
     `}
 `;
+function isFunctionComponentElement(node) {
+    return (React.isValidElement(node) &&
+        typeof node.type === "function" &&
+        !(node.type.prototype && node.type.prototype.isReactComponent) &&
+        node.props != null &&
+        typeof node.props === "object" &&
+        "mRef" in node.props);
+}
 /**
  * MU notification
  */
@@ -128,6 +136,53 @@ export class NotificationMU extends NotificationReact {
         const options = this.renderSetup ? this.renderSetup(setupProps) : undefined;
         return (_jsx(Fade, { in: true, children: _jsxs(Alert, { ...setupProps, ...options, action: closable ? (_jsx(IconButton, { size: "small", onClick: () => this.returnValue("CLOSE"), children: _jsx(CloseIcon, {}) })) : undefined, onClose: () => this.dismiss(), className: className, children: [this.title && _jsx(AlertTitle, { children: this.title }), this.content] }) }, this.id));
     }
+    // Create data collector
+    createData(_props, className) {
+        const labels = Labels.NotificationMU;
+        const title = this.title ?? labels.promptTitle;
+        const { buttons, cancelLabel = labels.promptCancel, okLabel = labels.promptOK, cancelButton = true, inputs, 
+        // type, not used
+        fullScreen, fullWidth = true, maxWidth, primaryButton = true, primaryButtonProps, inputProps, closable = false, draggable = fullScreen === true ? false : true } = this.inputProps ?? {};
+        const content = inputs ?? this.content;
+        if (!isFunctionComponentElement(content) || content.props.mRef == null) {
+            throw new Error("Data collector content must be a function component with mRef prop");
+        }
+        const mRef = content.props.mRef;
+        const errorRef = React.createRef();
+        const setError = (error) => {
+            if (errorRef.current == null)
+                return;
+            errorRef.current.innerText = error ?? "";
+        };
+        // Setup callback
+        const options = this.renderSetup ? this.renderSetup({}) : undefined;
+        const handleSubmit = async () => {
+            if (this.onReturn) {
+                // Get the value
+                const value = mRef.current?.getValue();
+                if (value == null) {
+                    return false;
+                }
+                const result = this.onReturn(value);
+                // returns false to prevent default dismiss
+                const v = await result;
+                if (v === false) {
+                    return false;
+                }
+                if (typeof v === "string") {
+                    setError(v);
+                    return false;
+                }
+            }
+            this.dismiss();
+            return true;
+        };
+        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(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, { variant: "caption", display: "block", ref: errorRef, color: "error" })] }), _jsx(DialogActions, { children: buttons ? (buttons(this, handleSubmit)) : (_jsxs(React.Fragment, { children: [cancelButton && (_jsx(Button, { color: "secondary", onClick: () => {
+                                    if (this.onReturn)
+                                        this.onReturn(undefined);
+                                    this.dismiss();
+                                }, children: cancelLabel })), primaryButton && (_jsx(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit, name: "okButton", ...primaryButtonProps, children: okLabel }))] })) })] }, this.id));
+    }
     // Create prompt
     createPrompt(_props, className) {
         const labels = Labels.NotificationMU;
@@ -141,13 +196,13 @@ export class NotificationMU extends NotificationReact {
             errorRef.current.innerText = error ?? "";
         };
         const handleSubmit = async (event) => {
-            // Result
-            let result = undefined;
             const input = inputRef.current;
             if (this.onReturn) {
                 // Inputs case, no HTMLForm set to value, set the current form
                 if (inputs && value == null)
                     value = event.currentTarget.form;
+                // Result
+                let result = undefined;
                 if (input) {
                     if (type === "switch") {
                         const boolValue = input.value === "true";
@@ -165,18 +220,18 @@ export class NotificationMU extends NotificationReact {
                 else if (value != null) {
                     result = this.onReturn(value);
                 }
-            }
-            // Get the value
-            // returns false to prevent default dismiss
-            const v = await result;
-            if (v === false) {
-                input?.focus();
-                return false;
-            }
-            if (typeof v === "string") {
-                setError(v);
-                input?.focus();
-                return false;
+                // Get the value
+                // returns false to prevent default dismiss
+                const v = await result;
+                if (v === false) {
+                    input?.focus();
+                    return false;
+                }
+                if (typeof v === "string") {
+                    setError(v);
+                    input?.focus();
+                    return false;
+                }
             }
             this.dismiss();
             return true;
@@ -253,6 +308,9 @@ export class NotificationMU extends NotificationReact {
         else if (this.type === NotificationType.Confirm) {
             return this.createConfirm(props, className);
         }
+        else if (this.type === NotificationType.Data) {
+            return this.createData(props, className);
+        }
         else if (this.type === NotificationType.Prompt) {
             return this.createPrompt(props, className);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.30",
+  "version": "1.6.32",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -36,20 +36,20 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
-    "@base-ui/react": "^1.2.0",
+    "@base-ui/react": "^1.3.0",
     "@dnd-kit/react": "^0.3.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.56",
-    "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.80",
+    "@etsoo/appscript": "^1.6.57",
+    "@etsoo/notificationbase": "^1.1.67",
+    "@etsoo/react": "^1.8.81",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",
-    "@mui/x-data-grid": "^8.27.4",
+    "@mui/x-data-grid": "^8.27.5",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "dompurify": "^3.3.2",
+    "dompurify": "^3.3.3",
     "eventemitter3": "^5.0.4",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",
@@ -71,6 +71,7 @@
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
     "@babel/runtime-corejs3": "^7.29.0",
+    "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
@@ -78,9 +79,9 @@
     "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",
-    "@vitejs/plugin-react": "^5.1.4",
-    "jsdom": "^28.1.0",
+    "@vitejs/plugin-react": "^6.0.1",
+    "jsdom": "^29.0.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.0"
   }
 }

package/setupTests.ts

@@ -1,5 +1,6 @@
 import { MockResizeObserver, NodeStorage } from "@etsoo/shared";
 import { vi } from "vitest";
+import "@testing-library/jest-dom";
 
 (globalThis as any).IS_REACT_ACT_ENVIRONMENT = true;
 

package/src/NotifierMU.tsx

@@ -70,6 +70,36 @@ const IconDialogTitle = styled(DialogTitle, {
     `}
 `;
 
+/**
+ * MU notification data methods
+ */
+export interface NotificationMUDataMethods {
+  getValue(): unknown;
+}
+
+/**
+ * MU notification data props
+ */
+export type NotificationMUDataProps = {
+  mRef: React.RefObject<NotificationMUDataMethods | null>;
+};
+
+function isFunctionComponentElement(
+  node: React.ReactNode
+): node is React.ReactElement<
+  NotificationMUDataProps,
+  React.FunctionComponent<NotificationMUDataProps>
+> {
+  return (
+    React.isValidElement(node) &&
+    typeof node.type === "function" &&
+    !(node.type.prototype && node.type.prototype.isReactComponent) &&
+    node.props != null &&
+    typeof node.props === "object" &&
+    "mRef" in node.props
+  );
+}
+
 /**
  * MU notification
  */
@@ -319,6 +349,145 @@ export class NotificationMU extends NotificationReact {
     );
   }
 
+  // Create data collector
+  private createData(_props: NotificationRenderProps, className?: string) {
+    const labels = Labels.NotificationMU;
+    const title = this.title ?? labels.promptTitle;
+
+    const {
+      buttons,
+      cancelLabel = labels.promptCancel,
+      okLabel = labels.promptOK,
+      cancelButton = true,
+      inputs,
+      // type, not used
+      fullScreen,
+      fullWidth = true,
+      maxWidth,
+      primaryButton = true,
+      primaryButtonProps,
+      inputProps,
+      closable = false,
+      draggable = fullScreen === true ? false : true
+    } = this.inputProps ?? {};
+
+    const content = inputs ?? this.content;
+    if (!isFunctionComponentElement(content) || content.props.mRef == null) {
+      throw new Error(
+        "Data collector content must be a function component with mRef prop"
+      );
+    }
+
+    const mRef = content.props.mRef;
+
+    const errorRef = React.createRef<HTMLSpanElement>();
+
+    const setError = (error?: string) => {
+      if (errorRef.current == null) return;
+      errorRef.current.innerText = error ?? "";
+    };
+
+    // Setup callback
+    const options = this.renderSetup ? this.renderSetup({}) : undefined;
+
+    const handleSubmit = async () => {
+      if (this.onReturn) {
+        // Get the value
+        const value = mRef.current?.getValue();
+        if (value == null) {
+          return false;
+        }
+
+        const result = this.onReturn(value);
+
+        // returns false to prevent default dismiss
+        const v = await result;
+        if (v === false) {
+          return false;
+        }
+
+        if (typeof v === "string") {
+          setError(v);
+          return false;
+        }
+      }
+
+      this.dismiss();
+      return true;
+    };
+
+    return (
+      <Dialog
+        key={this.id}
+        open={this.open}
+        PaperComponent={draggable ? DraggablePaperComponent : undefined}
+        className={className}
+        fullWidth={fullWidth}
+        maxWidth={maxWidth}
+        fullScreen={fullScreen}
+        {...options}
+      >
+        <IconDialogTitle
+          draggable={draggable}
+          className={
+            draggable ? "dialog-title draggable-dialog-title" : "dialog-title"
+          }
+        >
+          <InfoIcon color="primary" />
+          <span className="dialogTitle">{title}</span>
+          {closable && (
+            <IconButton
+              className="MuiDialogContent-root-close-button"
+              size="small"
+              onClick={() => this.returnValue("CLOSE")}
+            >
+              <CloseIcon />
+            </IconButton>
+          )}
+        </IconDialogTitle>
+        <DialogContent {...inputProps}>
+          {content}
+          <Typography
+            variant="caption"
+            display="block"
+            ref={errorRef}
+            color="error"
+          />
+        </DialogContent>
+        <DialogActions>
+          {buttons ? (
+            buttons(this, handleSubmit)
+          ) : (
+            <React.Fragment>
+              {cancelButton && (
+                <Button
+                  color="secondary"
+                  onClick={() => {
+                    if (this.onReturn) this.onReturn(undefined);
+                    this.dismiss();
+                  }}
+                >
+                  {cancelLabel}
+                </Button>
+              )}
+              {primaryButton && (
+                <LoadingButton
+                  color="primary"
+                  autoFocus
+                  onClick={handleSubmit}
+                  name="okButton"
+                  {...primaryButtonProps}
+                >
+                  {okLabel}
+                </LoadingButton>
+              )}
+            </React.Fragment>
+          )}
+        </DialogActions>
+      </Dialog>
+    );
+  }
+
   // Create prompt
   private createPrompt(_props: NotificationRenderProps, className?: string) {
     const labels = Labels.NotificationMU;
@@ -350,19 +519,19 @@ export class NotificationMU extends NotificationReact {
     };
 
     const handleSubmit = async (event: React.MouseEvent<HTMLButtonElement>) => {
-      // Result
-      let result:
-        | boolean
-        | string
-        | void
-        | PromiseLike<boolean | string | void> = undefined;
-
       const input = inputRef.current;
 
       if (this.onReturn) {
         // Inputs case, no HTMLForm set to value, set the current form
         if (inputs && value == null) value = event.currentTarget.form;
 
+        // Result
+        let result:
+          | boolean
+          | string
+          | void
+          | PromiseLike<boolean | string | void> = undefined;
+
         if (input) {
           if (type === "switch") {
             const boolValue = input.value === "true";
@@ -378,19 +547,20 @@ export class NotificationMU extends NotificationReact {
         } else if (value != null) {
           result = this.onReturn(value);
         }
-      }
 
-      // Get the value
-      // returns false to prevent default dismiss
-      const v = await result;
-      if (v === false) {
-        input?.focus();
-        return false;
-      }
-      if (typeof v === "string") {
-        setError(v);
-        input?.focus();
-        return false;
+        // Get the value
+        // returns false to prevent default dismiss
+        const v = await result;
+        if (v === false) {
+          input?.focus();
+          return false;
+        }
+
+        if (typeof v === "string") {
+          setError(v);
+          input?.focus();
+          return false;
+        }
       }
 
       this.dismiss();
@@ -606,6 +776,8 @@ export class NotificationMU extends NotificationReact {
       return this.createLoading(props, className);
     } else if (this.type === NotificationType.Confirm) {
       return this.createConfirm(props, className);
+    } else if (this.type === NotificationType.Data) {
+      return this.createData(props, className);
     } else if (this.type === NotificationType.Prompt) {
       return this.createPrompt(props, className);
     } else if (this.type === NotificationType.Popup) {