@etsoo/materialui 1.5.83 → 1.5.85

package/lib/cjs/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/cjs/CountdownButton.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.CountdownButton = void 0;
+exports.CountdownButton = CountdownButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Button_1 = __importDefault(require("@mui/material/Button"));
 const CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
@@ -13,7 +13,7 @@ const react_1 = __importDefault(require("react"));
  * @param props Props
  * @returns Button
  */
-exports.CountdownButton = react_1.default.forwardRef((props, ref) => {
+function CountdownButton(props) {
     // Destructure
     const { initState = 0, onAction, onClick, ...rest } = props;
     // State
@@ -88,5 +88,5 @@ exports.CountdownButton = react_1.default.forwardRef((props, ref) => {
     react_1.default.useEffect(() => {
         setState(initState);
     }, [initState]);
-    return ((0, jsx_runtime_1.jsx)(Button_1.default, { disabled: disabled, endIcon: endIcon, onClick: localClick, ref: ref, ...rest }));
-});
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, { disabled: disabled, endIcon: endIcon, onClick: localClick, ...rest }));
+}

package/lib/cjs/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/cjs/EmailInput.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmailInput = EmailInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const ReactApp_1 = require("./app/ReactApp");
 const MUGlobal_1 = require("./MUGlobal");
+const InputField_1 = require("./InputField");
 /**
  * Email input
  * @param props Props
@@ -20,7 +17,7 @@ function EmailInput(props) {
     // Slot props
     const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "email", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
+    return ((0, jsx_runtime_1.jsx)(InputField_1.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_1.MUGlobal.inputFieldShrink, ...inputLabel },
             ...restSlotProps

package/lib/cjs/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/TextField").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/TextField").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/TextField").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/cjs/InputField.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.InputField = void 0;
+exports.InputField = InputField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("@etsoo/react");
 const react_2 = __importDefault(require("react"));
@@ -14,9 +14,9 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
  * @param props Props
  * @returns Component
  */
-exports.InputField = react_2.default.forwardRef((props, ref) => {
+function InputField(props) {
     // Destruct
-    const { InputProps = {}, inputProps = {}, changeDelay, slotProps, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
+    const { InputProps = {}, inputProps = {}, slotProps, changeDelay, onChange, onChangeDelay, readOnly, size = MUGlobal_1.MUGlobal.inputFieldSize, variant = MUGlobal_1.MUGlobal.inputFieldVariant, minChars = 0, ...rest } = props;
     // Slot props
     const { htmlInput, input, inputLabel, ...restSlotProps } = slotProps ?? {};
     const isMounted = react_2.default.useRef(true);
@@ -49,7 +49,7 @@ exports.InputField = react_2.default.forwardRef((props, ref) => {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { ref: ref, slotProps: {
+    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { slotProps: {
             htmlInput: {
                 ["data-min-chars"]: minChars,
                 ...htmlInput,
@@ -62,4 +62,4 @@ exports.InputField = react_2.default.forwardRef((props, ref) => {
             },
             ...restSlotProps
         }, onChange: onChangeEx, size: size, variant: variant, ...rest }));
-});
+}

package/lib/cjs/InputTipField.d.ts

@@ -1,12 +1,31 @@
 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 & {
+export type InputTipFieldProps<T extends ItemType = ItemType, K extends ComponentKey = "input"> = {
+    /**
+     * Component key
+     */
+    component?: K;
+    /**
+     * Component props
+     */
+    componentProps?: React.ComponentProps<ComponentMap[K]>;
     /**
      * Load data
      * @param value Duplicate test value
@@ -34,5 +53,5 @@ export type InputTipFieldProps<T extends ItemType = ItemType> = InputFieldProps
  * @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/cjs/InputTipField.js

@@ -13,6 +13,15 @@ const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
 const Popover_1 = __importDefault(require("@mui/material/Popover"));
 const List_1 = __importDefault(require("@mui/material/List"));
 const InputAdornment_1 = __importDefault(require("@mui/material/InputAdornment"));
+const EmailInput_1 = require("./EmailInput");
+const MobileInput_1 = require("./MobileInput");
+const PhoneInput_1 = require("./PhoneInput");
+const componentMap = {
+    input: InputField_1.InputField,
+    email: EmailInput_1.EmailInput,
+    phone: PhoneInput_1.PhoneInput,
+    mobile: MobileInput_1.MobileInput
+};
 /**
  * InputField with tips
  * @param props Props
@@ -29,8 +38,10 @@ function InputTipField(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) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id), slotProps = {}, ...rest } = props;
+    }, loadData, itemLabel = (item) => item.label, renderItem = (item) => (0, jsx_runtime_1.jsx)(ListItem_1.default, { children: itemLabel(item) }, item.id), component = "input", componentProps = {}, ...rest } = props;
+    const { changeDelay = 480, onChangeDelay, slotProps = {} } = componentProps;
     const { input, ...slotRests } = slotProps;
+    const Component = componentMap[component];
     const load = (value) => {
         if (value.length < 2) {
             setTitle(undefined);
@@ -44,7 +55,7 @@ function InputTipField(props) {
     return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Popover_1.default, { open: anchorEl != null, anchorEl: anchorEl, onClose: () => setAnchorEl(undefined), anchorOrigin: {
                     vertical: "bottom",
                     horizontal: "left"
-                }, children: data && (0, jsx_runtime_1.jsx)(List_1.default, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(InputField_1.InputField, { changeDelay: changeDelay, onChangeDelay: (event) => {
+                }, children: data && (0, jsx_runtime_1.jsx)(List_1.default, { children: data.map((item) => renderItem(item)) }) }), (0, jsx_runtime_1.jsx)(Component, { changeDelay: changeDelay, onChangeDelay: (event) => {
                     load(event.target.value);
                     if (onChangeDelay)
                         onChangeDelay(event);

package/lib/cjs/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/cjs/IntInputField.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.IntInputField = void 0;
+exports.IntInputField = IntInputField;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Add_1 = __importDefault(require("@mui/icons-material/Add"));
 const Remove_1 = __importDefault(require("@mui/icons-material/Remove"));
@@ -16,7 +16,7 @@ const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
 /**
  * Integer input field (controlled)
  */
-exports.IntInputField = react_1.default.forwardRef((props, ref) => {
+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
@@ -43,15 +43,12 @@ exports.IntInputField = react_1.default.forwardRef((props, ref) => {
         setValue(value, undefined, true);
     }, [value]);
     // Layout
-    const layout = ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { ref: ref, type: "number", value: localValue == null ? (required ? min : "") : localValue, inputProps: {
-            min,
-            step,
-            max,
-            style: inputStyle,
-            inputMode: "numeric"
-        }, InputProps: {
-            startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
-            endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined
+    const layout = ((0, jsx_runtime_1.jsx)(InputField_1.InputField, { type: "number", value: localValue == null ? (required ? min : "") : localValue, slotProps: {
+            input: {
+                startAdornment: symbol ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: (0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "start", children: symbol }) })) : undefined,
+                endAdornment: endSymbol ? ((0, jsx_runtime_1.jsx)(InputAdornment_1.default, { position: "end", children: endSymbol })) : undefined
+            },
+            htmlInput: { min, step, max, style: inputStyle, inputMode: "numeric" }
         }, sx: buttons
             ? {
                 "& input[type=number]::-webkit-inner-spin-button": {
@@ -115,4 +112,4 @@ exports.IntInputField = react_1.default.forwardRef((props, ref) => {
                     }, children: (0, jsx_runtime_1.jsx)(Add_1.default, { color: localValue == null ? undefined : "primary" }) })] }));
     else
         return layout;
-});
+}

package/lib/cjs/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/cjs/MobileInput.js

@@ -1,13 +1,10 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MobileInput = MobileInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const ReactApp_1 = require("./app/ReactApp");
 const MUGlobal_1 = require("./MUGlobal");
+const InputField_1 = require("./InputField");
 /**
  * Mobile input
  * @param props Props
@@ -20,7 +17,7 @@ function MobileInput(props) {
     // Slot props
     const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
+    return ((0, jsx_runtime_1.jsx)(InputField_1.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_1.MUGlobal.inputFieldShrink, ...inputLabel },
             ...restSlotProps

package/lib/cjs/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/cjs/MoneyInputField.js

@@ -1,18 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MoneyInputField = void 0;
+exports.MoneyInputField = MoneyInputField;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
 const IntInputField_1 = require("./IntInputField");
 /**
  * Money input field (controlled)
  */
-exports.MoneyInputField = react_1.default.forwardRef((props, ref) => {
+function MoneyInputField(props) {
     // Destruct
     const { step = 0.01, ...rest } = props;
     // Layout
-    return (0, jsx_runtime_1.jsx)(IntInputField_1.IntInputField, { ref: ref, step: step, ...rest });
-});
+    return (0, jsx_runtime_1.jsx)(IntInputField_1.IntInputField, { step: step, ...rest });
+}

package/lib/cjs/PhoneInput.d.ts

@@ -1,10 +1,10 @@
-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
  */
-export declare function PhoInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function PhoneInput(props: PhoneInputProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/PhoneInput.js

@@ -1,18 +1,15 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PhoInput = PhoInput;
+exports.PhoneInput = PhoneInput;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const ReactApp_1 = require("./app/ReactApp");
 const MUGlobal_1 = require("./MUGlobal");
+const InputField_1 = require("./InputField");
 /**
  * Phone input
  * @param props Props
  */
-function PhoInput(props) {
+function PhoneInput(props) {
     // Global app
     const app = (0, ReactApp_1.useAppContext)();
     // Destruct
@@ -20,7 +17,7 @@ function PhoInput(props) {
     // Slot props
     const { htmlInput, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Layout
-    return ((0, jsx_runtime_1.jsx)(TextField_1.default, { type: "tel", autoCapitalize: autoCapitalize, autoCorrect: autoCorrect, autoComplete: autoComplete, fullWidth: fullWidth, label: label, name: name, slotProps: {
+    return ((0, jsx_runtime_1.jsx)(InputField_1.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_1.MUGlobal.inputFieldShrink, ...inputLabel },
             ...restSlotProps

package/lib/cjs/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/TextField").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/TextField").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/TextField").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;

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 }));
+}