@etsoo/react 1.2.77 → 1.2.81

package/lib/mu/CountdownButton.js

@@ -17,6 +17,7 @@ export const CountdownButton = React.forwardRef((props, ref) => {
     const seconds = 2;
     // Countdown length
     const [shared] = React.useState({ maxLength: 0 });
+    const isMounted = React.useRef(true);
     // endIcon
     let endIcon;
     if (state === 0) {
@@ -43,6 +44,9 @@ export const CountdownButton = React.forwardRef((props, ref) => {
             // Update max length
             shared.maxLength = result.toString().length;
             const seed = setInterval(() => {
+                // Mounted?
+                if (!isMounted.current)
+                    return;
                 // Last 1 second and then complete
                 if (result > seconds + 1) {
                     result--;
@@ -68,5 +72,10 @@ export const CountdownButton = React.forwardRef((props, ref) => {
         // Return any countdown
         onAction().then(doAction);
     };
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
     return (React.createElement(Button, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
 });

package/lib/mu/DraggablePaperComponent.js

@@ -7,6 +7,6 @@ import Draggable from 'react-draggable';
  * @returns Component
  */
 export function DraggablePaperComponent(props) {
-    return (React.createElement(Draggable, { handle: "#draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]' },
+    return (React.createElement(Draggable, { handle: ".draggable-dialog-title", cancel: '[class*="MuiDialogContent-root"]' },
         React.createElement(Paper, { ...props })));
 }

package/lib/mu/InputField.d.ts

@@ -1,8 +1,21 @@
 /// <reference types="react" />
 import { TextFieldProps } from '@mui/material';
+/**
+ * Input field props
+ */
+export declare type InputFieldProps = TextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+};
 /**
  * Input field
  * @param props Props
  * @returns Component
  */
-export declare function InputField(props: TextFieldProps): JSX.Element;
+export declare function InputField(props: InputFieldProps): JSX.Element;

package/lib/mu/InputField.js

@@ -8,9 +8,34 @@ import { MUGlobal } from './MUGlobal';
  */
 export function InputField(props) {
     // Destruct
-    const { InputLabelProps = {}, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, ...rest } = props;
     // Shrink
     InputLabelProps.shrink = MUGlobal.searchFieldShrink;
+    // Read only
+    if (readOnly != null)
+        InputProps.readOnly = readOnly;
+    const isMounted = React.useRef(true);
+    const delaySeed = React.useRef(0);
+    const onChangeEx = (event) => {
+        if (onChange == null)
+            return;
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+        if (delaySeed.current > 0)
+            window.clearTimeout(delaySeed.current);
+        delaySeed.current = window.setTimeout(() => {
+            if (isMounted.current)
+                onChange(event);
+        }, changeDelay);
+    };
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            window.clearTimeout(delaySeed.current);
+        };
+    }, []);
     // Layout
-    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, size: size, variant: variant, ...rest }));
+    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 }

package/lib/mu/ListItemRightIcon.d.ts

@@ -1,4 +1,4 @@
 /**
  * List item right icon component
  */
-export declare const ListItemRightIcon: import("@mui/system").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ListItemRightIcon: import("@emotion/styled").StyledComponent<import("@mui/material").ListItemIconProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/lib/mu/NotifierMU.js

@@ -9,6 +9,7 @@ import { LoadingButton } from './LoadingButton';
 // Custom icon dialog title bar
 const IconDialogTitle = styled(DialogTitle) `
     ${({ theme }) => `
+        cursor: move;
         display: flex;
         align-items: center;
         & .dialogTitle {
@@ -62,7 +63,7 @@ export class NotificationMU extends NotificationReact {
         if (this.renderSetup)
             this.renderSetup(setupProps);
         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(IconDialogTitle, { className: "draggable-dialog-title" },
                 icon,
                 React.createElement("span", { className: "dialogTitle" }, title)),
             React.createElement(DialogContent, null,
@@ -78,7 +79,7 @@ export class NotificationMU extends NotificationReact {
         const title = (_a = this.title) !== null && _a !== void 0 ? _a : labels.confirmTitle;
         const { okLabel = labels.confirmYes, cancelLabel = labels.confirmNo, inputs, fullScreen, fullWidth = true, maxWidth, primaryButton } = (_b = this.inputProps) !== null && _b !== void 0 ? _b : {};
         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(IconDialogTitle, { className: "draggable-dialog-title" },
                 React.createElement(Help, { color: "action" }),
                 React.createElement("span", { className: "dialogTitle" }, title)),
             React.createElement(DialogContent, null,
@@ -186,7 +187,7 @@ export class NotificationMU extends NotificationReact {
         }
         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, { id: "draggable-dialog-title" },
+                React.createElement(IconDialogTitle, { className: "draggable-dialog-title" },
                     React.createElement(Info, { color: "primary" }),
                     React.createElement("span", { className: "dialogTitle" }, title)),
                 React.createElement(DialogContent, null,

package/lib/mu/SearchField.d.ts

@@ -4,6 +4,10 @@ import { TextFieldProps } from '@mui/material';
  * Search field props
  */
 export declare type SearchFieldProps = TextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number;
     /**
      * Is the field read only?
      */

package/lib/mu/SearchField.js

@@ -8,12 +8,34 @@ import { MUGlobal } from './MUGlobal';
  */
 export function SearchField(props) {
     // Destruct
-    const { InputLabelProps = {}, InputProps = {}, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, ...rest } = props;
+    const { changeDelay, InputLabelProps = {}, InputProps = {}, onChange, readOnly, size = MUGlobal.searchFieldSize, variant = MUGlobal.searchFieldVariant, ...rest } = props;
     // Shrink
     InputLabelProps.shrink = MUGlobal.searchFieldShrink;
     // Read only
     if (readOnly != null)
         InputProps.readOnly = readOnly;
+    const isMounted = React.useRef(true);
+    const delaySeed = React.useRef(0);
+    const onChangeEx = (event) => {
+        if (onChange == null)
+            return;
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+        if (delaySeed.current > 0)
+            window.clearTimeout(delaySeed.current);
+        delaySeed.current = window.setTimeout(() => {
+            if (isMounted.current)
+                onChange(event);
+        }, changeDelay);
+    };
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            window.clearTimeout(delaySeed.current);
+        };
+    }, []);
     // Layout
-    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, size: size, variant: variant, ...rest }));
+    return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, onChange: onChangeEx, size: size, variant: variant, ...rest }));
 }

package/lib/mu/TextFieldEx.d.ts

@@ -4,6 +4,10 @@ import { TextFieldProps } from '@mui/material';
  * Extended text field props
  */
 export declare type TextFieldExProps = TextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number;
     /**
      * On enter click
      */
@@ -32,6 +36,10 @@ export interface TextFieldExMethods {
     setError(error: React.ReactNode): void;
 }
 export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("@mui/material").StandardTextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number | undefined;
     /**
      * On enter click
      */
@@ -48,7 +56,11 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
      * Show password button
      */
     showPassword?: boolean | undefined;
-}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "key" | "autoFocus" | "name" | "type" | "rows" | "error" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "InputLabelProps" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "multiline" | "maxRows" | "minRows" | "showClear" | "showPassword"> | Pick<import("@mui/material").FilledTextFieldProps & {
+}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "key" | "autoFocus" | "name" | "type" | "rows" | "error" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "changeDelay" | "focused" | "hiddenLabel" | "InputLabelProps" | "InputProps" | "multiline" | "maxRows" | "minRows" | "FormHelperTextProps" | "helperText" | "showClear" | "showPassword"> | Pick<import("@mui/material").FilledTextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number | undefined;
     /**
      * On enter click
      */
@@ -65,7 +77,11 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
      * Show password button
      */
     showPassword?: boolean | undefined;
-}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "key" | "autoFocus" | "name" | "type" | "rows" | "error" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "InputLabelProps" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "multiline" | "maxRows" | "minRows" | "showClear" | "showPassword"> | Pick<import("@mui/material").OutlinedTextFieldProps & {
+}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "key" | "autoFocus" | "name" | "type" | "rows" | "error" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "changeDelay" | "focused" | "hiddenLabel" | "InputLabelProps" | "InputProps" | "multiline" | "maxRows" | "minRows" | "FormHelperTextProps" | "helperText" | "showClear" | "showPassword"> | Pick<import("@mui/material").OutlinedTextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number | undefined;
     /**
      * On enter click
      */
@@ -82,4 +98,4 @@ export declare const TextFieldEx: React.ForwardRefExoticComponent<(Pick<import("
      * Show password button
      */
     showPassword?: boolean | undefined;
-}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "key" | "autoFocus" | "name" | "type" | "rows" | "error" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "InputLabelProps" | "focused" | "hiddenLabel" | "InputProps" | "FormHelperTextProps" | "helperText" | "multiline" | "maxRows" | "minRows" | "showClear" | "showPassword">) & React.RefAttributes<TextFieldExMethods>>;
+}, "children" | "label" | "slot" | "select" | "style" | "title" | "value" | "className" | "classes" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "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" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "disabled" | "sx" | "margin" | "fullWidth" | "size" | "variant" | "key" | "autoFocus" | "name" | "type" | "rows" | "error" | "autoComplete" | "readOnly" | "required" | "onEnter" | "inputProps" | "inputRef" | "SelectProps" | "changeDelay" | "focused" | "hiddenLabel" | "InputLabelProps" | "InputProps" | "multiline" | "maxRows" | "minRows" | "FormHelperTextProps" | "helperText" | "showClear" | "showPassword">) & React.RefAttributes<TextFieldExMethods>>;

package/lib/mu/TextFieldEx.js

@@ -5,7 +5,7 @@ import { Clear, Visibility } from '@mui/icons-material';
 import useCombinedRefs from '../uses/useCombinedRefs';
 export const TextFieldEx = React.forwardRef((props, ref) => {
     // Destructure
-    const { error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
+    const { changeDelay, error, fullWidth = true, helperText, InputProps = {}, onChange, onKeyPress, onEnter, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal.textFieldVariant, ...rest } = props;
     // State
     const [errorText, updateErrorText] = React.useState();
     const [passwordVisible, updatePasswordVisible] = React.useState();
@@ -56,24 +56,6 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
             showClear && (React.createElement(IconButton, { onClick: clearClick, tabIndex: -1 },
                 React.createElement(Clear, null)))));
     }
-    // Extend change
-    const onChangeEx = (e) => {
-        if (errorText != null) {
-            // Reset
-            updateErrorText(undefined);
-        }
-        if (showClear || showPassword) {
-            if (e.target.value === '') {
-                updateEmpty(true);
-            }
-            else if (empty) {
-                updateEmpty(false);
-            }
-        }
-        if (onChange != null) {
-            onChange(e);
-        }
-    };
     // Extend key precess
     const onKeyPressEx = onEnter == null
         ? onKeyPress
@@ -96,6 +78,40 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
             updateErrorText(error);
         }
     }), []);
+    const isMounted = React.useRef(true);
+    const delaySeed = React.useRef(0);
+    const onChangeEx = (event) => {
+        if (errorText != null) {
+            // Reset
+            updateErrorText(undefined);
+        }
+        if (showClear || showPassword) {
+            if (event.target.value === '') {
+                updateEmpty(true);
+            }
+            else if (empty) {
+                updateEmpty(false);
+            }
+        }
+        if (onChange == null)
+            return;
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+        if (delaySeed.current > 0)
+            window.clearTimeout(delaySeed.current);
+        delaySeed.current = window.setTimeout(() => {
+            if (isMounted.current)
+                onChange(event);
+        }, changeDelay);
+    };
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            window.clearTimeout(delaySeed.current);
+        };
+    }, []);
     // Textfield
     return (React.createElement(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, onChange: onChangeEx, onKeyPress: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.77",
+    "version": "1.2.81",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,16 +50,16 @@
         "@emotion/react": "^11.5.0",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.3.0",
-        "@etsoo/appscript": "^1.1.26",
+        "@etsoo/appscript": "^1.1.27",
         "@etsoo/notificationbase": "^1.0.91",
         "@etsoo/shared": "^1.0.62",
-        "@mui/icons-material": "^5.0.4",
-        "@mui/material": "^5.0.4",
+        "@mui/icons-material": "^5.0.5",
+        "@mui/material": "^5.0.6",
         "@reach/router": "^1.3.4",
         "@types/pica": "^5.1.3",
         "@types/pulltorefreshjs": "^0.1.5",
         "@types/reach__router": "^1.3.9",
-        "@types/react": "^17.0.32",
+        "@types/react": "^17.0.33",
         "@types/react-avatar-editor": "^10.3.6",
         "@types/react-dom": "^17.0.10",
         "@types/react-input-mask": "^3.0.1",
@@ -81,8 +81,8 @@
         "@babel/runtime-corejs3": "^7.15.4",
         "@types/jest": "^27.0.2",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.1.0",
-        "@typescript-eslint/parser": "^5.1.0",
+        "@typescript-eslint/eslint-plugin": "^5.2.0",
+        "@typescript-eslint/parser": "^5.2.0",
         "eslint": "^8.1.0",
         "eslint-config-airbnb-base": "^14.2.1",
         "eslint-plugin-import": "^2.25.2",

package/src/mu/CountdownButton.tsx

@@ -42,6 +42,8 @@ export const CountdownButton = React.forwardRef<
     // Countdown length
     const [shared] = React.useState({ maxLength: 0 });
 
+    const isMounted = React.useRef(true);
+
     // endIcon
     let endIcon: React.ReactNode;
     if (state === 0) {
@@ -70,6 +72,9 @@ export const CountdownButton = React.forwardRef<
             shared.maxLength = result.toString().length;
 
             const seed = setInterval(() => {
+                // Mounted?
+                if (!isMounted.current) return;
+
                 // Last 1 second and then complete
                 if (result > seconds + 1) {
                     result--;
@@ -96,6 +101,12 @@ export const CountdownButton = React.forwardRef<
         onAction().then(doAction);
     };
 
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+        };
+    }, []);
+
     return (
         <Button
             disabled={disabled}

package/src/mu/DraggablePaperComponent.tsx

@@ -10,7 +10,7 @@ import Draggable from 'react-draggable';
 export function DraggablePaperComponent(props: PaperProps) {
     return (
         <Draggable
-            handle="#draggable-dialog-title"
+            handle=".draggable-dialog-title"
             cancel={'[class*="MuiDialogContent-root"]'}
         >
             <Paper {...props} />

package/src/mu/InputField.tsx

@@ -2,15 +2,34 @@ import { TextField, TextFieldProps } from '@mui/material';
 import React from 'react';
 import { MUGlobal } from './MUGlobal';
 
+/**
+ * Input field props
+ */
+export type InputFieldProps = TextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number;
+
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+};
+
 /**
  * Input field
  * @param props Props
  * @returns Component
  */
-export function InputField(props: TextFieldProps) {
+export function InputField(props: InputFieldProps) {
     // Destruct
     const {
+        changeDelay,
         InputLabelProps = {},
+        InputProps = {},
+        onChange,
+        readOnly,
         size = MUGlobal.inputFieldSize,
         variant = MUGlobal.inputFieldVariant,
         ...rest
@@ -19,10 +38,41 @@ export function InputField(props: TextFieldProps) {
     // Shrink
     InputLabelProps.shrink = MUGlobal.searchFieldShrink;
 
+    // Read only
+    if (readOnly != null) InputProps.readOnly = readOnly;
+
+    const isMounted = React.useRef(true);
+    const delaySeed = React.useRef(0);
+
+    const onChangeEx = (
+        event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+        if (onChange == null) return;
+
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+
+        if (delaySeed.current > 0) window.clearTimeout(delaySeed.current);
+        delaySeed.current = window.setTimeout(() => {
+            if (isMounted.current) onChange(event);
+        }, changeDelay);
+    };
+
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            window.clearTimeout(delaySeed.current);
+        };
+    }, []);
+
     // Layout
     return (
         <TextField
             InputLabelProps={InputLabelProps}
+            InputProps={InputProps}
+            onChange={onChangeEx}
             size={size}
             variant={variant}
             {...rest}

package/src/mu/NotifierMU.tsx

@@ -42,6 +42,7 @@ import { LoadingButton, LoadingButtonProps } from './LoadingButton';
 // Custom icon dialog title bar
 const IconDialogTitle = styled(DialogTitle)`
     ${({ theme }) => `
+        cursor: move;
         display: flex;
         align-items: center;
         & .dialogTitle {
@@ -112,7 +113,7 @@ export class NotificationMU extends NotificationReact {
                 maxWidth={maxWidth}
                 fullScreen={fullScreen}
             >
-                <IconDialogTitle id="draggable-dialog-title">
+                <IconDialogTitle className="draggable-dialog-title">
                     {icon}
                     <span className="dialogTitle">{title}</span>
                 </IconDialogTitle>
@@ -159,7 +160,7 @@ export class NotificationMU extends NotificationReact {
                 maxWidth={maxWidth}
                 fullScreen={fullScreen}
             >
-                <IconDialogTitle id="draggable-dialog-title">
+                <IconDialogTitle className="draggable-dialog-title">
                     <Help color="action" />
                     <span className="dialogTitle">{title}</span>
                 </IconDialogTitle>
@@ -331,7 +332,7 @@ export class NotificationMU extends NotificationReact {
                 fullScreen={fullScreen}
             >
                 <form>
-                    <IconDialogTitle id="draggable-dialog-title">
+                    <IconDialogTitle className="draggable-dialog-title">
                         <Info color="primary" />
                         <span className="dialogTitle">{title}</span>
                     </IconDialogTitle>

package/src/mu/SearchField.tsx

@@ -6,6 +6,11 @@ import { MUGlobal } from './MUGlobal';
  * Search field props
  */
 export type SearchFieldProps = TextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number;
+
     /**
      * Is the field read only?
      */
@@ -20,8 +25,10 @@ export type SearchFieldProps = TextFieldProps & {
 export function SearchField(props: SearchFieldProps) {
     // Destruct
     const {
+        changeDelay,
         InputLabelProps = {},
         InputProps = {},
+        onChange,
         readOnly,
         size = MUGlobal.searchFieldSize,
         variant = MUGlobal.searchFieldVariant,
@@ -34,11 +41,38 @@ export function SearchField(props: SearchFieldProps) {
     // Read only
     if (readOnly != null) InputProps.readOnly = readOnly;
 
+    const isMounted = React.useRef(true);
+    const delaySeed = React.useRef(0);
+
+    const onChangeEx = (
+        event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+        if (onChange == null) return;
+
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+
+        if (delaySeed.current > 0) window.clearTimeout(delaySeed.current);
+        delaySeed.current = window.setTimeout(() => {
+            if (isMounted.current) onChange(event);
+        }, changeDelay);
+    };
+
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            window.clearTimeout(delaySeed.current);
+        };
+    }, []);
+
     // Layout
     return (
         <TextField
             InputLabelProps={InputLabelProps}
             InputProps={InputProps}
+            onChange={onChangeEx}
             size={size}
             variant={variant}
             {...rest}

package/src/mu/TextFieldEx.tsx

@@ -13,6 +13,11 @@ import useCombinedRefs from '../uses/useCombinedRefs';
  * Extended text field props
  */
 export type TextFieldExProps = TextFieldProps & {
+    /**
+     * Change delay (ms) to avoid repeatly dispatch onChange
+     */
+    changeDelay?: number;
+
     /**
      * On enter click
      */
@@ -51,6 +56,7 @@ export const TextFieldEx = React.forwardRef<
 >((props, ref) => {
     // Destructure
     const {
+        changeDelay,
         error,
         fullWidth = true,
         helperText,
@@ -144,26 +150,6 @@ export const TextFieldEx = React.forwardRef<
         );
     }
 
-    // Extend change
-    const onChangeEx = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (errorText != null) {
-            // Reset
-            updateErrorText(undefined);
-        }
-
-        if (showClear || showPassword) {
-            if (e.target.value === '') {
-                updateEmpty(true);
-            } else if (empty) {
-                updateEmpty(false);
-            }
-        }
-
-        if (onChange != null) {
-            onChange(e);
-        }
-    };
-
     // Extend key precess
     const onKeyPressEx =
         onEnter == null
@@ -194,6 +180,45 @@ export const TextFieldEx = React.forwardRef<
         []
     );
 
+    const isMounted = React.useRef(true);
+    const delaySeed = React.useRef(0);
+
+    const onChangeEx = (
+        event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+    ) => {
+        if (errorText != null) {
+            // Reset
+            updateErrorText(undefined);
+        }
+
+        if (showClear || showPassword) {
+            if (event.target.value === '') {
+                updateEmpty(true);
+            } else if (empty) {
+                updateEmpty(false);
+            }
+        }
+
+        if (onChange == null) return;
+
+        if (changeDelay == null || changeDelay < 1) {
+            onChange(event);
+            return;
+        }
+
+        if (delaySeed.current > 0) window.clearTimeout(delaySeed.current);
+        delaySeed.current = window.setTimeout(() => {
+            if (isMounted.current) onChange(event);
+        }, changeDelay);
+    };
+
+    React.useEffect(() => {
+        return () => {
+            isMounted.current = false;
+            window.clearTimeout(delaySeed.current);
+        };
+    }, []);
+
     // Textfield
     return (
         <TextField