@etsoo/react 1.2.13 → 1.2.17

package/__tests__/mu/NotifierMUTests.tsx

@@ -1,4 +1,3 @@
-import Done from '@mui/icons-material/Done';
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
@@ -102,7 +101,7 @@ test('Message tests', (done) => {
     // Callback
     const callback = jest.fn(() => done());
 
-    let n: INotification<React.ReactNode> | undefined;
+    let n: INotification<React.ReactNode, any> | undefined;
     act(() => {
         // Add the notification
         n = notifier.message(

package/lib/app/InputDialogProps.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
 import { NotificationReturn } from '@etsoo/notificationbase';
+import { NotificationReactCallProps } from '../notifier/Notifier';
 /**
  * Input dialog props
  */
-export declare type InputDialogProps = {
+export declare type InputDialogProps = NotificationReactCallProps & {
     /**
      * Title
      */
@@ -12,20 +12,8 @@ export declare type InputDialogProps = {
      * Message
      */
     message: string;
-    /**
-     * Inputs layout
-     */
-    inputs: React.ReactNode;
     /**
      * Callback
      */
     callback: NotificationReturn<HTMLFormElement>;
-    /**
-     * OK label
-     */
-    okLabel?: string;
-    /**
-     * Cancel label
-     */
-    cancelLabel?: string;
 };

package/lib/app/ReactApp.d.ts

@@ -1,6 +1,7 @@
 import { CoreApp, IAppSettings, ICoreApp, IUser, IUserData } from '@etsoo/appscript';
 import { DataTypes } from '@etsoo/shared';
 import React from 'react';
+import { NotificationReactCallProps } from '../notifier/Notifier';
 import { CultureAction } from '../states/CultureState';
 import { IStateProps } from '../states/IState';
 import { IPageData, PageAction } from '../states/PageState';
@@ -18,16 +19,31 @@ export declare function ReactAppStateDetector(props: IStateProps): React.Functio
 /**
  * Core application interface
  */
-export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends ICoreApp<S, React.ReactNode> {
+export interface IReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends ICoreApp<S, React.ReactNode, NotificationReactCallProps> {
     /**
      * User state
      */
     readonly userState: UserState<D>;
+    /**
+     * Set page data
+     * @param data Page data
+     */
+    setPageData(data: P): void;
+    /**
+     * Set page title and data
+     * @param key Page title resource key
+     */
+    setPageKey(key: string): void;
+    /**
+     * Set page title and data
+     * @param title Page title
+     */
+    setPageTitle(title: string): void;
 }
 /**
  * React application
  */
-export declare abstract class ReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends CoreApp<S, React.ReactNode> implements IReactApp<S, D, P> {
+export declare abstract class ReactApp<S extends IAppSettings, D extends IUser, P extends IPageData> extends CoreApp<S, React.ReactNode, NotificationReactCallProps> implements IReactApp<S, D, P> {
     /**
      * User state
      */
@@ -90,7 +106,7 @@ export declare abstract class ReactApp<S extends IAppSettings, D extends IUser,
      * Show input dialog
      * @param props Props
      */
-    showInputDialog({ title, message, inputs, callback, cancelLabel, okLabel }: InputDialogProps): void;
+    showInputDialog({ title, message, callback, ...rest }: InputDialogProps): void;
     /**
      * User login extended
      * @param user New user

package/lib/app/ReactApp.js

@@ -123,13 +123,8 @@ export class ReactApp extends CoreApp {
      * Show input dialog
      * @param props Props
      */
-    showInputDialog({ title, message, inputs, callback, cancelLabel, okLabel }) {
-        const props = {
-            okLabel,
-            cancelLabel,
-            inputs
-        };
-        this.notifier.prompt(message, callback, title, props);
+    showInputDialog({ title, message, callback, ...rest }) {
+        this.notifier.prompt(message, callback, title, rest);
     }
     /**
      * User login extended

package/lib/mu/AutocompleteExtendedProps.d.ts

@@ -3,7 +3,7 @@ import { AutocompleteProps } from '@mui/material';
 /**
  * Autocomplete extended props
  */
-export interface AutocompleteExtendedProps<T extends Record<string, any>> extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput'> {
+export interface AutocompleteExtendedProps<T extends Record<string, any>> extends Omit<AutocompleteProps<T, undefined, false, false>, 'renderInput' | 'options'> {
     /**
      * Id field, default is id
      */

package/lib/mu/ComboBox.d.ts

@@ -4,6 +4,14 @@ import { AutocompleteExtendedProps } from './AutocompleteExtendedProps';
  * ComboBox props
  */
 export interface ComboBoxProps<T extends Record<string, any>> extends AutocompleteExtendedProps<T> {
+    /**
+     * Load data callback
+     */
+    loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * Array of options.
+     */
+    options?: ReadonlyArray<T>;
 }
 /**
  * ComboBox

package/lib/mu/ComboBox.js

@@ -10,12 +10,15 @@ import { SearchField } from './SearchField';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputMargin, inputRequired, inputVariant, defaultValue, label, name, options, readOnly = true, onChange, value, sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputMargin, inputRequired, inputVariant, defaultValue, label, loadData, name, options = [], readOnly = true, onChange, value, sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
+    // Options state
+    const [localOptions, setOptions] = React.useState(options);
+    const isMounted = React.useRef(true);
     // Local default value
     const localValue = idValue != null
-        ? options.find((o) => o[idField] === idValue)
+        ? localOptions.find((o) => o[idField] === idValue)
         : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
     // Current id value
     const localIdValue = localValue == null ? undefined : localValue[idField];
@@ -31,6 +34,18 @@ export function ComboBox(props) {
         }
         return params;
     };
+    React.useEffect(() => {
+        if (loadData) {
+            loadData().then((result) => {
+                if (result == null || !isMounted.current)
+                    return;
+                setOptions(result);
+            });
+        }
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
     // Layout
     return (React.createElement("div", null,
         React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, defaultValue: localIdValue }),
@@ -50,5 +65,5 @@ export function ComboBox(props) {
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);
-            }, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired })), options: options, ...rest })));
+            }, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, margin: inputMargin, variant: inputVariant, required: inputRequired })), options: localOptions, ...rest })));
 }

package/lib/mu/CountdownButton.d.ts

@@ -20,4 +20,4 @@ export declare type CountdownButtonProps = Omit<ButtonProps, 'endIcon' | 'disabl
  * @param props Props
  * @returns Button
  */
-export declare const CountdownButton: React.ForwardRefExoticComponent<Pick<CountdownButtonProps, "children" | "form" | "slot" | "title" | "value" | "name" | "type" | "onScroll" | "id" | "hidden" | "color" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "key" | "href" | "disableFocusRipple" | "variant" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableElevation" | "fullWidth" | "startIcon" | "onAction"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const CountdownButton: React.ForwardRefExoticComponent<Pick<CountdownButtonProps, "children" | "form" | "slot" | "title" | "value" | "name" | "type" | "fullWidth" | "onScroll" | "id" | "hidden" | "color" | "size" | keyof import("@mui/material/OverridableComponent").CommonProps | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "TouchRippleProps" | "key" | "href" | "disableFocusRipple" | "variant" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "disableElevation" | "startIcon" | "onAction"> & React.RefAttributes<HTMLButtonElement>>;

package/lib/mu/DialogButton.d.ts

@@ -1,6 +1,10 @@
 import { Breakpoint, ButtonProps } from '@mui/material';
 import React from 'react';
 export interface DialogButtonProps extends ButtonProps {
+    /**
+     * Button label
+     */
+    buttonLabel?: string;
     /**
      * Dialog content
      */
@@ -22,6 +26,17 @@ export interface DialogButtonProps extends ButtonProps {
      * Show fullscreen dialog
      */
     fullScreen?: boolean;
+    /**
+     * If `true`, the dialog stretches to `maxWidth`.
+     *
+     * Notice that the dialog width grow is limited by the default margin.
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Other layouts
+     */
+    inputs?: React.ReactNode;
     /**
      * Max width of the dialog
      */

package/lib/mu/DialogButton.js

@@ -1,21 +1,21 @@
-import { Button, Dialog, DialogContent, DialogContentText, DialogTitle, IconButton } from '@mui/material';
+import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, IconButton } from '@mui/material';
 import React from 'react';
+import { Labels } from '../app/Labels';
 /**
  * Dialog button
  * @param props Props
  * @returns Component
  */
 export function DialogButton(props) {
+    // Labels shared with NotificationMU
+    const labels = Labels.NotificationMU;
     // Destruct
-    const { children, content, contentPre, dialogTitle, disableScrollLock, fullScreen, icon, maxWidth, onClick, ...rest } = props;
+    const { buttonLabel = labels.alertOK, children, content, contentPre, dialogTitle, disableScrollLock, fullScreen, fullWidth, icon, inputs, maxWidth, onClick, ...rest } = props;
     // Open state
     const [open, setOpen] = React.useState(false);
     const handleClickOpen = () => {
         setOpen(true);
     };
-    const handleClose = () => {
-        setOpen(false);
-    };
     // Onclick handler
     const onClickLocal = (event) => {
         // Stop propagation
@@ -30,8 +30,15 @@ export function DialogButton(props) {
     // Layout
     return (React.createElement(React.Fragment, null,
         icon == null ? (React.createElement(Button, { ...rest, onClick: onClickLocal }, children)) : (React.createElement(IconButton, { ...rest, onClick: onClickLocal, title: children === null || children === void 0 ? void 0 : children.toString() }, icon)),
-        React.createElement(Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, maxWidth: maxWidth, open: open, onClose: handleClose },
+        React.createElement(Dialog, { disableScrollLock: disableScrollLock, fullScreen: fullScreen, fullWidth: fullWidth, maxWidth: maxWidth, open: open, onClose: () => setOpen(false), onClick: (event) => {
+                // The dialog will be embeded and the click event will bubble up
+                // Stop propatation but will also cancel onClose and onBackdropClick event
+                event.stopPropagation();
+            } },
             React.createElement(DialogTitle, null, dialogTitle ? dialogTitle : children),
             React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, { component: contentPre ? 'pre' : 'span' }, content)))));
+                React.createElement(DialogContentText, { component: contentPre ? 'pre' : 'span' }, content),
+                inputs),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: () => setOpen(false) }, buttonLabel)))));
 }

package/lib/mu/NotifierMU.d.ts

@@ -1,7 +1,6 @@
 import { INotificaseBase, NotificationAlign, NotificationRenderProps } from '@etsoo/notificationbase';
-import { ClassNameMap } from '@mui/material';
 import React from 'react';
-import { INotificationReact, NotificationReact, NotifierReact } from '../notifier/Notifier';
+import { INotificationReact, NotificationReact, NotificationReactCallProps, NotifierReact } from '../notifier/Notifier';
 /**
  * MU notification
  */
@@ -19,7 +18,7 @@ export declare class NotificationMU extends NotificationReact {
      * @param className Style class name
      * @param classes Style classes
      */
-    render(props: NotificationRenderProps, className: string, classes: ClassNameMap<string>): JSX.Element;
+    render(props: NotificationRenderProps, className: string): JSX.Element;
 }
 /**
  * Antd notifier
@@ -38,11 +37,11 @@ export declare class NotifierMU extends NotifierReact {
      * @param children Children
      * @param options Other options
      */
-    protected createContainer: (align: NotificationAlign, children: React.ReactNode[], _options: ClassNameMap<string>) => JSX.Element;
+    protected createContainer: (align: NotificationAlign, children: React.ReactNode[]) => JSX.Element;
     /**
      * Add raw definition
      * @param data Notification data definition
      * @param modal Show as modal
      */
-    protected addRaw(data: INotificaseBase, modal?: boolean): INotificationReact;
+    protected addRaw(data: INotificaseBase<NotificationReactCallProps>, modal?: boolean): INotificationReact;
 }

package/lib/mu/NotifierMU.js

@@ -33,8 +33,10 @@ export class NotificationMU extends NotificationReact {
         this.dismiss();
     }
     // Create alert
-    createAlert(_props, className, classes) {
+    createAlert(_props, className) {
+        var _a;
         const labels = Labels.NotificationMU;
+        const { inputs, fullScreen, fullWidth = true, maxWidth } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
         let title = this.title;
         let icon;
         if (this.type === NotificationMessageType.Success) {
@@ -53,28 +55,31 @@ export class NotificationMU extends NotificationReact {
             icon = React.createElement(Error, { color: "error" });
             title !== null && title !== void 0 ? title : (title = labels.alertTitle);
         }
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className },
-            React.createElement(IconDialogTitle, { className: classes.iconTitle, id: "draggable-dialog-title" },
+        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
+            React.createElement(IconDialogTitle, { id: "draggable-dialog-title" },
                 icon,
                 React.createElement("span", { className: "dialogTitle" }, title)),
             React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, null, this.content)),
+                React.createElement(DialogContentText, null, this.content),
+                inputs),
             React.createElement(DialogActions, null,
                 React.createElement(LoadingButton, { color: "primary", onClick: async () => await this.returnValue(undefined), autoFocus: true }, labels.alertOK))));
     }
     // Create confirm
-    createConfirm(_props, className, classes) {
-        var _a;
+    createConfirm(_props, className) {
+        var _a, _b;
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
-        const noLabel = labels.confirmNo;
-        const yesLabel = labels.confirmYes;
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className },
-            React.createElement(IconDialogTitle, { className: classes.iconTitle, id: "draggable-dialog-title" },
+        const { okLabel, cancelLabel, inputs, fullScreen, fullWidth = true, maxWidth } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
+        const noLabel = cancelLabel !== null && cancelLabel !== void 0 ? cancelLabel : labels.confirmNo;
+        const yesLabel = okLabel !== null && okLabel !== void 0 ? okLabel : labels.confirmYes;
+        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
+            React.createElement(IconDialogTitle, { id: "draggable-dialog-title" },
                 React.createElement(Help, { color: "action" }),
                 React.createElement("span", { className: "dialogTitle" }, title)),
             React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, null, this.content)),
+                React.createElement(DialogContentText, null, this.content),
+                inputs),
             React.createElement(DialogActions, null,
                 React.createElement(LoadingButton, { color: "secondary", onClick: async () => await this.returnValue(false) }, noLabel),
                 React.createElement(LoadingButton, { color: "primary", onClick: async () => await this.returnValue(true), autoFocus: true }, yesLabel))));
@@ -89,7 +94,7 @@ export class NotificationMU extends NotificationReact {
         return 'info';
     }
     // Create message
-    createMessage(_props, className, _classes) {
+    createMessage(_props, className) {
         if (!this.open)
             return React.createElement(React.Fragment, { key: this.id });
         const setupProps = {
@@ -105,11 +110,11 @@ export class NotificationMU extends NotificationReact {
                 this.content)));
     }
     // Create prompt
-    createPrompt(_props, className, classes) {
-        var _a;
+    createPrompt(_props, className) {
+        var _a, _b;
         const labels = Labels.NotificationMU;
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.promptTitle;
-        const { cancelLabel = labels.promptCancel, okLabel = labels.promptOK, inputs, type, ...rest } = this.inputProps;
+        const { cancelLabel = labels.promptCancel, okLabel = labels.promptOK, inputs, type, fullScreen, fullWidth = true, maxWidth, ...rest } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
         const handleSubmit = async (event) => {
             // Result
             let result = undefined;
@@ -163,21 +168,21 @@ export class NotificationMU extends NotificationReact {
         let value = undefined;
         if (inputs == null) {
             if (type === 'switch') {
-                localInputs = (React.createElement(Switch, { inputRef: inputRef, ...rest, value: "true", autoFocus: true }));
+                localInputs = (React.createElement(Switch, { inputRef: inputRef, ...rest, value: "true", autoFocus: true, required: true }));
             }
             else if (type === 'slider') {
                 localInputs = React.createElement(Slider, { onChange: (_e, v) => (value = v) });
             }
             else {
-                localInputs = (React.createElement(TextField, { inputRef: inputRef, autoFocus: true, fullWidth: true, type: type, ...rest }));
+                localInputs = (React.createElement(TextField, { inputRef: inputRef, autoFocus: true, fullWidth: true, type: type, required: true, ...rest }));
             }
         }
         else {
             localInputs = inputs;
         }
-        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className },
+        return (React.createElement(Dialog, { key: this.id, open: this.open, PaperComponent: DraggablePaperComponent, className: className, fullWidth: fullWidth, maxWidth: maxWidth, fullScreen: fullScreen },
             React.createElement("form", null,
-                React.createElement(IconDialogTitle, { className: classes.iconTitle, id: "draggable-dialog-title" },
+                React.createElement(IconDialogTitle, { id: "draggable-dialog-title" },
                     React.createElement(Info, { color: "primary" }),
                     React.createElement("span", { className: "dialogTitle" }, title)),
                 React.createElement(DialogContent, null,
@@ -188,10 +193,13 @@ export class NotificationMU extends NotificationReact {
                     React.createElement(LoadingButton, { color: "primary", autoFocus: true, onClick: handleSubmit }, okLabel)))));
     }
     // Create loading
-    createLoading(_props, className, _classes) {
+    createLoading(_props, className) {
+        var _a;
         // Properties
         const setupProps = { color: 'primary' };
         const labels = Labels.NotificationMU;
+        // Input props
+        const { maxWidth = 'xs' } = (_a = this.inputProps) !== null && _a !== void 0 ? _a : {};
         // Content
         let content = this.content;
         if (content === '@')
@@ -209,7 +217,7 @@ export class NotificationMU extends NotificationReact {
                     }
                 } },
                 React.createElement(CircularProgress, { ...setupProps }),
-                content && React.createElement(Box, { maxWidth: 640 }, content))));
+                content && (React.createElement(Box, { maxWidth: maxWidth === false ? undefined : maxWidth }, content)))));
     }
     /**
      * Render method
@@ -217,24 +225,24 @@ export class NotificationMU extends NotificationReact {
      * @param className Style class name
      * @param classes Style classes
      */
-    render(props, className, classes) {
+    render(props, className) {
         // Loading bar
         if (this.type === NotificationType.Loading) {
-            return this.createLoading(props, className, classes);
+            return this.createLoading(props, className);
         }
         else if (this.type === NotificationType.Confirm) {
-            return this.createConfirm(props, className, classes);
+            return this.createConfirm(props, className);
         }
         else if (this.type === NotificationType.Prompt) {
-            return this.createPrompt(props, className, classes);
+            return this.createPrompt(props, className);
         }
         else if (this.type === NotificationType.Error ||
             (this.modal && this.type in NotificationMessageType)) {
             // Alert or modal message
-            return this.createAlert(props, className, classes);
+            return this.createAlert(props, className);
         }
         else {
-            return this.createMessage(props, className, classes);
+            return this.createMessage(props, className);
         }
     }
 }
@@ -250,7 +258,7 @@ export class NotifierMU extends NotifierReact {
          * @param children Children
          * @param options Other options
          */
-        this.createContainer = (align, children, _options) => {
+        this.createContainer = (align, children) => {
             // Each align group, class equal to something similar to 'align-topleft'
             const alignText = NotificationAlign[align].toLowerCase();
             let className = `align-${alignText}`;

package/lib/mu/SelectEx.d.ts

@@ -12,6 +12,10 @@ export interface SelectExProps<T = any> extends Omit<SelectProps, 'labelId' | 'i
      * Label field, default is label
      */
     labelField?: ((option: T) => string) | string;
+    /**
+     * Load data callback
+     */
+    loadData?: () => PromiseLike<T[] | null | undefined>;
     /**
      * Array of options.
      */

package/lib/mu/SelectEx.js

@@ -10,7 +10,10 @@ import { MUGlobal } from './MUGlobal';
 export function SelectEx(props) {
     var _a;
     // Destruct
-    const { defaultValue, idField = 'id', label, labelField = 'label', multiple = false, name, options = [], search = false, value, ...rest } = props;
+    const { defaultValue, idField = 'id', label, labelField = 'label', loadData, multiple = false, name, options = [], search = false, value, ...rest } = props;
+    // Options state
+    const [localOptions, setOptions] = React.useState(options);
+    const isMounted = React.useRef(true);
     // Local value
     const valueSource = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
     let localValue;
@@ -23,7 +26,7 @@ export function SelectEx(props) {
     else {
         localValue = valueSource;
     }
-    // State
+    // Value state
     const [valueState, setValueState] = React.useState(localValue);
     // Label id
     const labelId = `selectex-label-${name}`;
@@ -59,12 +62,23 @@ export function SelectEx(props) {
     React.useEffect(() => {
         var _a;
         const input = (_a = divRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input');
-        if (input)
-            input.addEventListener('change', (event) => {
-                // Reset case
-                if (event.cancelable)
-                    setValueState(multiple ? [] : '');
+        const inputChange = (event) => {
+            // Reset case
+            if (event.cancelable)
+                setValueState(multiple ? [] : '');
+        };
+        input === null || input === void 0 ? void 0 : input.addEventListener('change', inputChange);
+        if (loadData) {
+            loadData().then((result) => {
+                if (result == null || !isMounted.current)
+                    return;
+                setOptions(result);
             });
+        }
+        return () => {
+            isMounted.current = false;
+            input === null || input === void 0 ? void 0 : input.removeEventListener('change', inputChange);
+        };
     }, []);
     // Layout
     return (React.createElement(FormControl, { size: search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize },
@@ -73,13 +87,13 @@ export function SelectEx(props) {
                 : MUGlobal.inputFieldShrink }, label),
         React.createElement(Select, { ref: divRef, value: valueState, input: React.createElement(OutlinedInput, { notched: true, label: label }), labelId: labelId, name: name, multiple: multiple, onChange: multiple ? handleChange : undefined, renderValue: (selected) => {
                 // The text shows up
-                return options
+                return localOptions
                     .filter((option) => Array.isArray(selected)
                     ? selected.indexOf(option.id) !== -1
                     : selected === option.id)
                     .map((option) => option.label)
                     .join(', ');
-            }, sx: { minWidth: '150px' }, ...rest }, options.map((option) => {
+            }, sx: { minWidth: '150px' }, ...rest }, localOptions.map((option) => {
             // Option id
             const id = option[idField];
             // Option label