@etsoo/materialui 1.5.84 → 1.5.86

package/lib/cjs/TextFieldEx.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextFieldEx = void 0;
+exports.TextFieldEx = TextFieldEx;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
 const MUGlobal_1 = require("./MUGlobal");
@@ -15,13 +15,15 @@ const ReactApp_1 = require("./app/ReactApp");
 const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
 const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
-exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
+function TextFieldEx(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
     // Labels
     const { showIt, clearInput } = app?.getLabels("showIt", "clearInput") ?? {};
     // Destructure
-    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal_1.MUGlobal.textFieldVariant, ...rest } = props;
+    const { changeDelay, clearLabel = clearInput, error, fullWidth = true, helperText, InputLabelProps = {}, InputProps = {}, slotProps, onChange, onClear, onKeyDown, onEnter, onVisibility, inputRef, readOnly, showClear, showPassword, type, variant = MUGlobal_1.MUGlobal.textFieldVariant, mRef, ...rest } = props;
+    // Slot props
+    const { input, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Shrink
     InputLabelProps.shrink ??= MUGlobal_1.MUGlobal.searchFieldShrink;
     // State
@@ -38,18 +40,18 @@ exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
         helperTextEx = errorText;
     }
     let typeEx = showPassword ? "password" : type;
-    let input;
+    let inputEle;
     const localRef = (ref) => {
-        input = ref;
-        if (input.value !== "") {
+        inputEle = ref;
+        if (inputEle.value !== "") {
             updateEmpty(false);
         }
     };
     const doClear = () => {
-        if (input == null)
+        if (inputEle == null)
             return;
-        react_2.ReactUtils.triggerChange(input, "", false);
-        input.focus();
+        react_2.ReactUtils.triggerChange(inputEle, "", false);
+        inputEle.focus();
     };
     const clearClick = () => {
         if (onClear) {
@@ -68,23 +70,23 @@ exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
     };
     const touchStart = async (e) => {
         // Show the password
-        if (input) {
+        if (inputEle) {
             if (onVisibility) {
-                const result = await onVisibility(input);
+                const result = await onVisibility(inputEle);
                 if (result === false)
                     return;
             }
-            input.blur();
-            input.type = "text";
+            inputEle.blur();
+            inputEle.type = "text";
         }
         preventDefault(e);
     };
     const touchEnd = (e) => {
         // Show the password
-        if (input) {
+        if (inputEle) {
             if (onVisibility)
                 return;
-            input.type = "password";
+            inputEle.type = "password";
         }
         preventDefault(e);
     };
@@ -105,7 +107,7 @@ exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
                 onKeyDown(e);
             }
         };
-    react_1.default.useImperativeHandle(ref, () => ({
+    react_1.default.useImperativeHandle(mRef, () => ({
         /**
          * Set error
          * @param error Error
@@ -146,5 +148,12 @@ exports.TextFieldEx = react_1.default.forwardRef((props, ref) => {
         };
     }, []);
     // Textfield
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: (0, react_2.useCombinedRefs)(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
-});
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: (0, react_2.useCombinedRefs)(inputRef, localRef), onChange: onChangeEx, onKeyDown: onKeyPressEx, slotProps: {
+            input: { readOnly, ...input, ...InputProps },
+            inputLabel: {
+                shrink: MUGlobal_1.MUGlobal.inputFieldShrink,
+                ...inputLabel
+            },
+            ...restSlotProps
+        }, type: typeEx, variant: variant, ...rest }));
+}

package/lib/mjs/CountdownButton.d.ts

@@ -1,5 +1,4 @@
 import { ButtonProps } from "@mui/material/Button";
-import React from "react";
 /**
  * Countdown button action
  */
@@ -24,4 +23,4 @@ export type CountdownButtonProps = Omit<ButtonProps, "endIcon" | "disabled"> & {
  * @param props Props
  * @returns Button
  */
-export declare const CountdownButton: React.ForwardRefExoticComponent<Omit<CountdownButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare function CountdownButton(props: CountdownButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/CountdownButton.js

@@ -7,7 +7,7 @@ import React from "react";
  * @param props Props
  * @returns Button
  */
-export const CountdownButton = React.forwardRef((props, ref) => {
+export function CountdownButton(props) {
     // Destructure
     const { initState = 0, onAction, onClick, ...rest } = props;
     // State
@@ -82,5 +82,5 @@ export const CountdownButton = React.forwardRef((props, ref) => {
     React.useEffect(() => {
         setState(initState);
     }, [initState]);
-    return (_jsx(Button, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
-});
+    return (_jsx(Button, { disabled: disabled, endIcon: endIcon, onClick: localClick, ...rest }));
+}

package/lib/mjs/EmailInput.d.ts

@@ -1,8 +1,8 @@
-import { TextFieldProps } from "@mui/material/TextField";
+import { InputFieldProps } from "./InputField";
 /**
  * Email input props
  */
-export type EmailInputProps = Omit<TextFieldProps, "type"> & {};
+export type EmailInputProps = Omit<InputFieldProps, "type"> & {};
 /**
  * Email input
  * @param props Props

package/lib/mjs/EmailInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import TextField from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { InputField } from "./InputField";
 /**
  * Email input
  * @param props Props
@@ -14,7 +14,7 @@ export function EmailInput(props) {
     // Slot props
     const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
-    return (_jsx(TextField, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
+    return (_jsx(InputField, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
             htmlInput: { inputMode: "email", maxLength: 128, ...htmlInput },
             inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
             ...restSlotProps

package/lib/mjs/InputField.d.ts

@@ -26,55 +26,4 @@ export type InputFieldProps = TextFieldProps & {
  * @param props Props
  * @returns Component
  */
-export declare const InputField: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-    /**
-     * Change delay handler, without it onChange will be applied
-     */
-    onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Minimum characters to trigger the change event
-     */
-    minChars?: number;
-}, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-    /**
-     * Change delay handler, without it onChange will be applied
-     */
-    onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Minimum characters to trigger the change event
-     */
-    minChars?: number;
-}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-    /**
-     * Change delay handler, without it onChange will be applied
-     */
-    onChangeDelay?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Minimum characters to trigger the change event
-     */
-    minChars?: number;
-}, "ref">) & React.RefAttributes<HTMLDivElement>>;
+export declare function InputField(props: InputFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/InputField.js

@@ -8,9 +8,9 @@ import TextField from "@mui/material/TextField";
  * @param props Props
  * @returns Component
  */
-export const InputField = React.forwardRef((props, ref) => {
+export function InputField(props) {
     // Destruct
-    const { InputProps = {}, inputProps = {}, changeDelay, slotProps, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    const { InputProps = {}, inputProps = {}, slotProps, changeDelay, onChange, onChangeDelay, readOnly, size = MUGlobal.inputFieldSize, variant = MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
     // Slot props
     const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = React.useRef(true);
@@ -43,7 +43,7 @@ export const InputField = React.forwardRef((props, ref) => {
         };
     }, []);
     // Layout
-    return (_jsx(TextField, { ref: ref, slotProps: {
+    return (_jsx(TextField, { slotProps: {
             htmlInput: {
                 ["data-min-chars"]: minChars,
                 ...htmlInput,
@@ -56,4 +56,4 @@ export const InputField = React.forwardRef((props, ref) => {
             },
             ...restSlotProps
         }, onChange: onChangeEx, size: size, variant: variant, ...rest }));
-});
+}

package/lib/mjs/InputTipField.d.ts

@@ -1,38 +1,58 @@
 import { DataTypes } from "@etsoo/shared";
 import { TypographyProps } from "@mui/material/Typography";
 import React from "react";
-import { InputFieldProps } from "./InputField";
+import { InputField } from "./InputField";
+import { EmailInput } from "./EmailInput";
+import { MobileInput } from "./MobileInput";
+import { PhoneInput } from "./PhoneInput";
 type ItemType = DataTypes.IdLabelItem<string | number>;
+declare const componentMap: {
+    input: typeof InputField;
+    email: typeof EmailInput;
+    phone: typeof PhoneInput;
+    mobile: typeof MobileInput;
+};
+type ComponentMap = typeof componentMap;
+type ComponentKey = keyof ComponentMap;
 /**
  * InputField with tips properties
  */
-export type InputTipFieldProps<T extends ItemType = ItemType> = InputFieldProps & {
-    /**
-     * Load data
-     * @param value Duplicate test value
-     */
-    loadData(value: string): Promise<[T[]?, string?]>;
-    /**
-     * Label props
-     */
-    labelProps?: Omit<TypographyProps, "onClick">;
+export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = Omit<React.ComponentProps<ComponentMap[K]>, "component"> & {
     /**
-     * Custom item label
-     * @param item List item data
-     * @returns Result
+     * Component key
      */
-    itemLabel?: (item: T) => React.ReactNode;
+    component?: K;
     /**
-     * Custom render item
-     * @param item List item data
-     * @returns Result
+     * Component properties
      */
-    renderItem?: (item: T) => React.ReactNode;
+    componentProps: {
+        /**
+         * Load data
+         * @param value Duplicate test value
+         */
+        loadData(value: string): Promise<[T[]?, string?]>;
+        /**
+         * Label props
+         */
+        labelProps?: Omit<TypographyProps, "onClick">;
+        /**
+         * Custom item label
+         * @param item List item data
+         * @returns Result
+         */
+        itemLabel?: (item: T) => React.ReactNode;
+        /**
+         * Custom render item
+         * @param item List item data
+         * @returns Result
+         */
+        renderItem?: (item: T) => React.ReactNode;
+    };
 };
 /**
  * InputField with tips
  * @param props Props
  * @returns Component
  */
-export declare function InputTipField<T extends ItemType = ItemType>(props: InputTipFieldProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function InputTipField<T extends ItemType = ItemType, K extends ComponentKey = "input">(props: InputTipFieldProps<T, K>): import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/mjs/InputTipField.js

@@ -7,6 +7,15 @@ import ListItem from "@mui/material/ListItem";
 import Popover from "@mui/material/Popover";
 import List from "@mui/material/List";
 import InputAdornment from "@mui/material/InputAdornment";
+import { EmailInput } from "./EmailInput";
+import { MobileInput } from "./MobileInput";
+import { PhoneInput } from "./PhoneInput";
+const componentMap = {
+    input: InputField,
+    email: EmailInput,
+    phone: PhoneInput,
+    mobile: MobileInput
+};
 /**
  * InputField with tips
  * @param props Props
@@ -20,11 +29,13 @@ export function InputTipField(props) {
     const [anchorEl, setAnchorEl] = React.useState();
     const [data, setData] = React.useState();
     // Destruct
+    const { component = "input", componentProps, changeDelay = 480, onChangeDelay, fullWidth = true, slotProps = {}, ...rest } = props;
     const { labelProps = {
         title: app?.get("clickForDetails"),
         sx: { color: (theme) => theme.palette.error.main, cursor: "pointer" }
-    }, changeDelay = 480, onChangeDelay, loadData, itemLabel = (item) => item.label, renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id), slotProps = {}, ...rest } = props;
+    }, loadData, itemLabel = (item) => item.label, renderItem = (item) => _jsx(ListItem, { children: itemLabel(item) }, item.id) } = componentProps;
     const { input, ...slotRests } = slotProps;
+    const Component = componentMap[component];
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);
@@ -38,7 +49,7 @@ export function InputTipField(props) {
     return (_jsxs(React.Fragment, { children: [_jsx(Popover, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "left"
-                }, children: data && _jsx(List, { children: data.map((item) => renderItem(item)) }) }), _jsx(InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
+                }, children: data && _jsx(List, { children: data.map((item) => renderItem(item)) }) }), _jsx(Component, { changeDelay: changeDelay, fullWidth: fullWidth, onChangeDelay: (event) => {
                     load(event.target.value);
                     if (onChangeDelay)
                         onChangeDelay(event);

package/lib/mjs/IntInputField.d.ts

@@ -52,4 +52,4 @@ export type IntInputFieldProps = Omit<InputFieldProps, "type" | "inputProps" | "
 /**
  * Integer input field (controlled)
  */
-export declare const IntInputField: React.ForwardRefExoticComponent<Omit<IntInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function IntInputField(props: IntInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/IntInputField.js

@@ -10,7 +10,7 @@ import IconButton from "@mui/material/IconButton";
 /**
  * Integer input field (controlled)
  */
-export const IntInputField = React.forwardRef((props, ref) => {
+export function IntInputField(props) {
     // Destruct
     const { min = 0, step = 1, max = 9999999, inputStyle = { textAlign: "right" }, boxProps, buttons, endSymbol, symbol, value, changeDelay = 600, onChangeDelay, onChange, onFocus = (event) => event.currentTarget.select(), onValueChange, required, ...rest } = props;
     // State
@@ -37,15 +37,12 @@ export const IntInputField = React.forwardRef((props, ref) => {
         setValue(value, undefined, true);
     }, [value]);
     // Layout
-    const layout = (_jsx(InputField, { ref: ref, type: "number", value: localValue == null ? (required ? min : "") : localValue, inputProps: {
-            min,
-            step,
-            max,
-            style: inputStyle,
-            inputMode: "numeric"
-        }, InputProps: {
-            startAdornment: symbol ? (_jsx(React.Fragment, { children: _jsx(InputAdornment, { position: "start", children: symbol }) })) : undefined,
-            endAdornment: endSymbol ? (_jsx(InputAdornment, { position: "end", children: endSymbol })) : undefined
+    const layout = (_jsx(InputField, { type: "number", value: localValue == null ? (required ? min : "") : localValue, slotProps: {
+            input: {
+                startAdornment: symbol ? (_jsx(React.Fragment, { children: _jsx(InputAdornment, { position: "start", children: symbol }) })) : undefined,
+                endAdornment: endSymbol ? (_jsx(InputAdornment, { position: "end", children: endSymbol })) : undefined
+            },
+            htmlInput: { min, step, max, style: inputStyle, inputMode: "numeric" }
         }, sx: buttons
             ? {
                 "& input[type=number]::-webkit-inner-spin-button": {
@@ -109,4 +106,4 @@ export const IntInputField = React.forwardRef((props, ref) => {
                     }, children: _jsx(AddIcon, { color: localValue == null ? undefined : "primary" }) })] }));
     else
         return layout;
-});
+}

package/lib/mjs/MobileInput.d.ts

@@ -1,8 +1,8 @@
-import { TextFieldProps } from "@mui/material/TextField";
+import { InputFieldProps } from "./InputField";
 /**
  * Mobile input props
  */
-export type MobileInputProps = Omit<TextFieldProps, "type"> & {};
+export type MobileInputProps = Omit<InputFieldProps, "type"> & {};
 /**
  * Mobile input
  * @param props Props

package/lib/mjs/MobileInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import TextField from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { InputField } from "./InputField";
 /**
  * Mobile input
  * @param props Props
@@ -14,7 +14,7 @@ export function MobileInput(props) {
     // Slot props
     const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
-    return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
+    return (_jsx(InputField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
             htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
             inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
             ...restSlotProps

package/lib/mjs/MoneyInputField.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { IntInputFieldProps } from "./IntInputField";
 /**
  * Money input field props
@@ -7,4 +6,4 @@ export type MoneyInputFieldProps = IntInputFieldProps & {};
 /**
  * Money input field (controlled)
  */
-export declare const MoneyInputField: React.ForwardRefExoticComponent<Omit<MoneyInputFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function MoneyInputField(props: MoneyInputFieldProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/MoneyInputField.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
 import { IntInputField } from "./IntInputField";
 /**
  * Money input field (controlled)
  */
-export const MoneyInputField = React.forwardRef((props, ref) => {
+export function MoneyInputField(props) {
     // Destruct
     const { step = 0.01, ...rest } = props;
     // Layout
-    return _jsx(IntInputField, { ref: ref, step: step, ...rest });
-});
+    return _jsx(IntInputField, { step: step, ...rest });
+}

package/lib/mjs/PhoneInput.d.ts

@@ -1,8 +1,8 @@
-import { TextFieldProps } from "@mui/material/TextField";
+import { InputFieldProps } from "./InputField";
 /**
  * Phone input props
  */
-export type PhoneInputProps = Omit<TextFieldProps, "type"> & {};
+export type PhoneInputProps = Omit<InputFieldProps, "type"> & {};
 /**
  * Phone input
  * @param props Props

package/lib/mjs/PhoneInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import TextField from "@mui/material/TextField";
 import { useAppContext } from "./app/ReactApp";
 import { MUGlobal } from "./MUGlobal";
+import { InputField } from "./InputField";
 /**
  * Phone input
  * @param props Props
@@ -14,7 +14,7 @@ export function PhoneInput(props) {
     // Slot props
     const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
-    return (_jsx(TextField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
+    return (_jsx(InputField, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
             htmlInput: { inputMode: "tel", maxLength: 18, ...htmlInput },
             inputLabel: { shrink: MUGlobal.inputFieldShrink, ...inputLabel },
             ...restSlotProps

package/lib/mjs/TextFieldEx.d.ts

@@ -38,6 +38,10 @@ export type TextFieldExProps = TextFieldProps & {
      * Show password button
      */
     showPassword?: boolean;
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<TextFieldExMethods>;
 };
 /**
  * Extended text field methods
@@ -49,109 +53,4 @@ export interface TextFieldExMethods {
      */
     setError(error: React.ReactNode): void;
 }
-export declare const TextFieldEx: React.ForwardRefExoticComponent<(Omit<import("@mui/material").StandardTextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-    /**
-     * Clear button label
-     */
-    clearLabel?: string;
-    /**
-     * Click clear button callback
-     */
-    onClear?: (doClear: () => void) => void;
-    /**
-     * On enter click
-     */
-    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
-    /**
-     * On visibility
-     * @param input HTML input
-     * @returns Result
-     */
-    onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Show clear button
-     */
-    showClear?: boolean;
-    /**
-     * Show password button
-     */
-    showPassword?: boolean;
-}, "ref"> | Omit<import("@mui/material").OutlinedTextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-    /**
-     * Clear button label
-     */
-    clearLabel?: string;
-    /**
-     * Click clear button callback
-     */
-    onClear?: (doClear: () => void) => void;
-    /**
-     * On enter click
-     */
-    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
-    /**
-     * On visibility
-     * @param input HTML input
-     * @returns Result
-     */
-    onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Show clear button
-     */
-    showClear?: boolean;
-    /**
-     * Show password button
-     */
-    showPassword?: boolean;
-}, "ref"> | Omit<import("@mui/material").FilledTextFieldProps & {
-    /**
-     * Change delay (ms) to avoid repeatly dispatch onChange
-     */
-    changeDelay?: number;
-    /**
-     * Clear button label
-     */
-    clearLabel?: string;
-    /**
-     * Click clear button callback
-     */
-    onClear?: (doClear: () => void) => void;
-    /**
-     * On enter click
-     */
-    onEnter?: React.KeyboardEventHandler<HTMLDivElement>;
-    /**
-     * On visibility
-     * @param input HTML input
-     * @returns Result
-     */
-    onVisibility?: (input: HTMLInputElement) => void | boolean | Promise<boolean>;
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
-    /**
-     * Show clear button
-     */
-    showClear?: boolean;
-    /**
-     * Show password button
-     */
-    showPassword?: boolean;
-}, "ref">) & React.RefAttributes<TextFieldExMethods>>;
+export declare function TextFieldEx(props: TextFieldExProps): import("react/jsx-runtime").JSX.Element;