@etsoo/materialui 1.5.83 → 1.5.85

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,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/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
@@ -23,8 +32,10 @@ export 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) => _jsx(ListItem, { children: itemLabel(item) }, item.id), slotProps = {}, ...rest } = props;
+    }, loadData, itemLabel = (item) => item.label, renderItem = (item) => _jsx(ListItem, { 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);
@@ -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, 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,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/mjs/PhoneInput.js

@@ -1,12 +1,12 @@
 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
  */
-export function PhoInput(props) {
+export function PhoneInput(props) {
     // Global app
     const app = useAppContext();
     // Destruct
@@ -14,7 +14,7 @@ export function PhoInput(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;

package/lib/mjs/TextFieldEx.js

@@ -9,13 +9,15 @@ import { useAppContext } from "./app/ReactApp";
 import TextField from "@mui/material/TextField";
 import InputAdornment from "@mui/material/InputAdornment";
 import IconButton from "@mui/material/IconButton";
-export const TextFieldEx = React.forwardRef((props, ref) => {
+export function TextFieldEx(props) {
     // Global app
     const app = 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.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.textFieldVariant, mRef, ...rest } = props;
+    // Slot props
+    const { input, inputLabel, ...restSlotProps } = slotProps ?? {};
     // Shrink
     InputLabelProps.shrink ??= MUGlobal.searchFieldShrink;
     // State
@@ -32,18 +34,18 @@ export const TextFieldEx = React.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;
-        ReactUtils.triggerChange(input, "", false);
-        input.focus();
+        ReactUtils.triggerChange(inputEle, "", false);
+        inputEle.focus();
     };
     const clearClick = () => {
         if (onClear) {
@@ -62,23 +64,23 @@ export const TextFieldEx = React.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);
     };
@@ -99,7 +101,7 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
                 onKeyDown(e);
             }
         };
-    React.useImperativeHandle(ref, () => ({
+    React.useImperativeHandle(mRef, () => ({
         /**
          * Set error
          * @param error Error
@@ -140,5 +142,12 @@ export const TextFieldEx = React.forwardRef((props, ref) => {
         };
     }, []);
     // Textfield
-    return (_jsx(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), InputProps: InputProps, InputLabelProps: InputLabelProps, onChange: onChangeEx, onKeyDown: onKeyPressEx, type: typeEx, variant: variant, ...rest }));
-});
+    return (_jsx(TextField, { error: errorEx, fullWidth: fullWidth, helperText: helperTextEx, inputRef: useCombinedRefs(inputRef, localRef), onChange: onChangeEx, onKeyDown: onKeyPressEx, slotProps: {
+            input: { readOnly, ...input, ...InputProps },
+            inputLabel: {
+                shrink: MUGlobal.inputFieldShrink,
+                ...inputLabel
+            },
+            ...restSlotProps
+        }, type: typeEx, variant: variant, ...rest }));
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.83",
+  "version": "1.5.85",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.47",
+    "@etsoo/appscript": "^1.6.48",
     "@etsoo/notificationbase": "^1.1.66",
     "@etsoo/react": "^1.8.62",
     "@etsoo/shared": "^1.2.79",
     "@mui/icons-material": "^7.3.5",
     "@mui/material": "^7.3.5",
-    "@mui/x-data-grid": "^8.17.0",
+    "@mui/x-data-grid": "^8.18.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.0",
@@ -76,13 +76,13 @@
     "@testing-library/react": "^16.3.0",
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^19.2.2",
+    "@types/react": "^19.2.4",
     "@types/react-avatar-editor": "^13.0.4",
-    "@types/react-dom": "^19.2.2",
+    "@types/react-dom": "^19.2.3",
     "@types/react-input-mask": "^3.0.6",
-    "@vitejs/plugin-react": "^5.1.0",
-    "jsdom": "^27.1.0",
+    "@vitejs/plugin-react": "^5.1.1",
+    "jsdom": "^27.2.0",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.7"
+    "vitest": "^4.0.8"
   }
 }

package/src/CountdownButton.tsx

@@ -29,10 +29,7 @@ export type CountdownButtonProps = Omit<ButtonProps, "endIcon" | "disabled"> & {
  * @param props Props
  * @returns Button
  */
-export const CountdownButton = React.forwardRef<
-  HTMLButtonElement,
-  CountdownButtonProps
->((props, ref) => {
+export function CountdownButton(props: CountdownButtonProps) {
   // Destructure
   const { initState = 0, onAction, onClick, ...rest } = props;
 
@@ -121,8 +118,7 @@ export const CountdownButton = React.forwardRef<
       disabled={disabled}
       endIcon={endIcon}
       onClick={localClick}
-      ref={ref}
       {...rest}
     />
   );
-});
+}