mui-fast-start 0.2.0 → 0.3.1

package/src/components/Object/Select/ObjSelectOne.tsx

@@ -0,0 +1,34 @@
+import {useContext} from "react";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {SingleSelectOne} from "../../Single/Select/SingleSelectOne.tsx";
+import {SelectProps} from "@mui/material";
+import {MfsObjectSelectOneProps} from "../../../types";
+import useObjToSingle from "../../../hooks/state/useObjToSingle.ts";
+import {errorObjectToString} from "../../../utils/object/error.ts";
+
+
+export const ObjSelectOne = <
+    T extends object,
+    Item
+>(customProps: Omit<SelectProps, 'name'> & MfsObjectSelectOneProps<T, Item>) => {
+    const defaultProps = useContext(FastStartContext)?.Object?.MfsSelectOne;
+    const {
+        get, set, err, name,
+        variant,
+        ...props
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const [value, setValue] = useObjToSingle<T, Item>(name, get, set);
+
+    return (
+        <SingleSelectOne<Item>
+            get={value} set={setValue}
+            name={name?.toString()}
+            err={errorObjectToString(name, err)}
+            variant={variant}
+            {...props}
+        />
+    )
+}

package/src/components/Object/Select/ObjSelectRecord.tsx

@@ -0,0 +1,34 @@
+import {useContext} from "react";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import useObjToSingle from "../../../hooks/state/useObjToSingle.ts";
+import {SingleSelectRecord} from "../../Single/Select/SingleSelectRecord.tsx";
+import {MfsObjectSelectRecordProps} from "../../../types";
+import {SelectProps} from "@mui/material";
+import {errorObjectToString} from "../../../utils/object/error.ts";
+
+
+export const ObjSelectRecord = <
+    T extends object,
+    Item extends Record<PropertyKey, unknown>
+>(customProps: Omit<SelectProps, 'name'> & MfsObjectSelectRecordProps<T, Item>) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsSelectRecord;
+    const {
+        get, set, err, name,
+        variant,
+        ...props
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const [value, setValue] = useObjToSingle<T, Item>(name, get, set);
+
+    return (
+        <SingleSelectRecord
+            get={value} set={setValue}
+            name={name?.toString()}
+            err={errorObjectToString(name, err)}
+            variant={variant}
+            {...props}
+        />
+    )
+}

package/src/components/Object/Textfield/ObjNumber.tsx

@@ -0,0 +1,51 @@
+import {useContext} from "react";
+import useObjToSingle from "../../../hooks/state/useObjToSingle.ts";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {errorObjectToString} from "../../../utils/object/error.ts";
+import {SingleFloat, SingleInteger} from "../../Single/TextField/SingleNumber.tsx";
+import {MfsObjectNumberProps} from "../../../types";
+import {TextFieldProps} from "@mui/material";
+
+type ObjNumberProps<T extends object> = Omit<TextFieldProps, 'name'> & MfsObjectNumberProps<T>;
+
+export const ObjFloat = <T extends object>(customProps: ObjNumberProps<T>) => {
+    const defaultProps = useContext(FastStartContext)?.Object?.MfsFloat;
+    const {
+        get, set, err, name,
+        ...props
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const [value, setValue] = useObjToSingle<T, number>(name, get, set);
+
+    return (
+        <SingleFloat
+            get={value} set={setValue}
+            name={name?.toString()}
+            err={errorObjectToString(name, err)}
+            {...props}
+        />
+    )
+}
+
+export const ObjInteger = <T extends object>(customProps: ObjNumberProps<T>) => {
+    const defaultProps = useContext(FastStartContext)?.Object?.MfsInteger;
+    const {
+        get, set, err, name,
+        ...props
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const [value, setValue] = useObjToSingle<T, number>(name, get, set);
+
+    return (
+        <SingleInteger
+            get={value} set={setValue}
+            name={name?.toString()}
+            err={errorObjectToString(name, err)}
+            {...props}
+        />
+    )
+}

package/src/components/Object/Textfield/ObjText.tsx

@@ -0,0 +1,29 @@
+import {useContext} from "react";
+import {MfsObjectTextProps} from "../../../types";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import useObjToSingle from "../../../hooks/state/useObjToSingle.ts";
+import {SingleText} from "../../Single/TextField/SingleText.tsx";
+import {errorObjectToString} from "../../../utils/object/error.ts";
+import {TextFieldProps} from "@mui/material";
+
+
+export const ObjText = <T extends object>(
+    customProps: Omit<TextFieldProps, 'name'> & MfsObjectTextProps<T>
+) => {
+    const defaultProps = useContext(FastStartContext)?.Object?.MfsText;
+    const {
+        get, set, err, name,
+        ...props
+    } = defaultProps == null ? customProps : Object.assign({...defaultProps}, customProps);
+
+    const [value, setValue] = useObjToSingle<T, string>(name, get, set);
+
+    return (
+        <SingleText
+            get={value} set={setValue}
+            name={name?.toString()}
+            err={errorObjectToString(name, err)}
+            {...props}
+        />
+    );
+};

package/src/components/Single/Checkbox/SingleCheckIcon.tsx

@@ -1,16 +1,18 @@
 import {useCallback, useContext} from "react";
-import {IconButton} from "@mui/material";
+import {IconButton, IconButtonProps} from "@mui/material";
 import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
-import {SingleCheckIconProps} from "../../../types";
-import {fastDeepMerge} from "../../../utils";
+import {MfsSingleCheckIconProps} from "../../../types";
 
+export type SingleCheckIconProps = IconButtonProps & MfsSingleCheckIconProps;
 
 export const SingleCheckIcon = (customProps: SingleCheckIconProps) => {
-    const defaultProps = useContext(FastStartContext)?.Single?.CheckIcon;
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsCheckIcon;
     const {
         get, set, on, off,
         ...props
-    } = fastDeepMerge<SingleCheckIconProps>(defaultProps, customProps);
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
 
     const onClick = useCallback(() => set((state) => !state), [set]);
 

package/src/components/Single/Checkbox/SingleCheckbox.tsx

@@ -1,16 +1,18 @@
-import {Checkbox, FormControlLabel} from "@mui/material";
+import {Checkbox, CheckboxProps, FormControlLabel} from "@mui/material";
 import React, {useCallback, useContext} from "react";
-import {SingleCheckboxProps} from "../../../types";
 import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
-import {fastDeepMerge} from "../../../utils";
+import {MfsSingleCheckboxProps} from "../../../types";
 
+export type SingleCheckboxProps = CheckboxProps & MfsSingleCheckboxProps;
 
 export const SingleCheckbox = (customProps: SingleCheckboxProps) => {
-    const defaultProps = useContext(FastStartContext)?.Single?.Checkbox;
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsCheckbox;
     const {
         get, set, label,
         ...props
-    } = fastDeepMerge<SingleCheckboxProps>(defaultProps, customProps);
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
 
     const onChange = useCallback(() => set((state) => !state), [set]);
 

package/src/components/Single/Select/BaseSingleSelect.tsx

@@ -0,0 +1,46 @@
+import {FormControl, FormHelperText, InputLabel, MenuItem, Select, SelectProps} from "@mui/material";
+import React, {useId} from "react";
+import {MfsSingleError} from "../../../types/props.internal.ts";
+
+const BaseSingleSelect = <Value,>(props: {
+    emptyItem?: React.ReactNode,
+    label?: React.ReactNode,
+    err: MfsSingleError,
+    items: React.ReactNode,
+    get: Value,
+    onChange: SelectProps['onChange'],
+    selectProps: SelectProps
+}) => {
+    const {emptyItem, label, selectProps} = props;
+    const labelId = useId();
+
+    const isError: boolean = !!props.err;
+    return (
+        <FormControl
+            error={isError}
+            fullWidth={selectProps.fullWidth}
+            variant={selectProps.variant}
+            size={selectProps.size}
+            sx={selectProps.sx}
+            disabled={selectProps.disabled}
+            required={selectProps.required}
+            margin={selectProps.margin}
+        >
+            {label && <InputLabel id={labelId}>{label}</InputLabel>}
+            <Select
+                labelId={labelId}
+                error={isError}
+                label={label}
+                value={props.get ?? ''}
+                onChange={props.onChange}
+                {...selectProps}
+            >
+                {emptyItem && <MenuItem key='' value=''>{emptyItem}</MenuItem>}
+                {props.items}
+            </Select>
+            {isError && <FormHelperText>{props.err}</FormHelperText>}
+        </FormControl>
+    )
+}
+
+export default BaseSingleSelect;

package/src/components/Single/Select/SingleSelectOne.tsx

@@ -0,0 +1,56 @@
+import {MenuItem, SelectProps} from "@mui/material";
+import {MfsSingleSelectOneProps} from "../../../types";
+import React, {useContext, useMemo} from "react";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import BaseSingleSelect from "./BaseSingleSelect.tsx";
+
+export type SingleSelectOneProps<Item> = SelectProps & MfsSingleSelectOneProps<Item>;
+
+export const SingleSelectOne = <Item,>(customProps: SingleSelectOneProps<Item>) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsSelectOne;
+    const {
+        get, set, err, label,
+        items, renderMenuItem,
+        emptyItem, emptyValue,
+        getKey, ...props
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const getKeyOrValue = useMemo(() => (
+        getKey ?? ((item: Item) => item as string | number)
+    ), [getKey]);
+
+    const onChange: SelectProps['onChange'] = (event) => {
+        const value = event.target.value;
+        if (getKey == null) {
+            set((value == "" ? emptyValue : value) as Item);
+        } else {
+            const item: Item | undefined = items.find((item: Item) => getKeyOrValue(item) === value);
+            set(item as Item);
+        }
+    }
+
+    const MenuItems = useMemo(() => {
+        if (renderMenuItem != null) {
+            return items.map(renderMenuItem);
+        } else {
+            return items.map((item) => {
+                const key = getKeyOrValue(item);
+                return <MenuItem key={key} value={key}>{key}</MenuItem>;
+            })
+        }
+    }, [getKeyOrValue, items, renderMenuItem]);
+
+    return (
+        <BaseSingleSelect
+            label={label}
+            items={MenuItems}
+            emptyItem={emptyItem}
+            get={get}
+            err={err}
+            onChange={onChange}
+            selectProps={props}
+        />
+    );
+}

package/src/components/Single/Select/SingleSelectRecord.tsx

@@ -0,0 +1,52 @@
+import {MenuItem, SelectProps} from "@mui/material";
+import {MfsSingleSelectRecordProps} from "../../../types";
+import React, {useContext, useMemo} from "react";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import BaseSingleSelect from "./BaseSingleSelect.tsx";
+
+
+export const SingleSelectRecord = <
+    T extends Record<string, unknown>,
+    Value = keyof T | undefined | null
+>(customProps: SelectProps & MfsSingleSelectRecordProps<T, Value>) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsSelectRecord;
+    const {
+        get, set, err, label,
+        items, renderMenuItem,
+        emptyItem, emptyValue,
+        ...props
+    } = defaultProps == null
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
+
+    const onChange: SelectProps['onChange'] = (event) => {
+        const value = event.target.value;
+        set((value == "" ? emptyValue : value) as Value);
+    }
+
+    const MenuItems = useMemo(() => {
+        if (renderMenuItem != null) {
+            return Object.entries(items).map(([key, value], i) => (
+                renderMenuItem(key, value as T[keyof T], i)
+            ));
+        } else {
+            return Object.entries(items).map(([key, value]) => (
+                <MenuItem key={key} value={key}>
+                    {value?.toString()}
+                </MenuItem>
+            ));
+        }
+    }, [items, renderMenuItem]);
+
+    return (
+        <BaseSingleSelect
+            label={label}
+            items={MenuItems}
+            emptyItem={emptyItem}
+            get={get}
+            err={err}
+            onChange={onChange}
+            selectProps={props}
+        />
+    )
+}

package/src/components/Single/TextField/SingleNumber.tsx

@@ -0,0 +1,19 @@
+import {useContext} from "react";
+import {TextField, TextFieldProps} from "@mui/material";
+import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
+import {MfsSingleNumberProps} from "../../../types";
+import {useSplitSingleFloatProps, useSplitSingleIntegerProps} from "../../../hooks";
+
+export type SingleNumberProps = TextFieldProps & MfsSingleNumberProps;
+
+export const SingleFloat = (customProps: SingleNumberProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsFloat;
+    const props = useSplitSingleFloatProps(defaultProps, customProps);
+    return <TextField {...props}/>;
+}
+
+export const SingleInteger = (customProps: SingleNumberProps) => {
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsInteger;
+    const props = useSplitSingleIntegerProps(defaultProps, customProps);
+    return <TextField {...props}/>;
+}

package/src/components/Single/TextField/SingleText.tsx

@@ -1,12 +1,13 @@
 import {useContext} from "react";
-import useSplitSingleTextProps from '../../../hooks/splits/useSplitSingleTextProps';
-import {TextField} from "@mui/material";
+import useSplitTextProps from '../../../hooks/splits/useSplitTextProps.ts';
+import {TextField, TextFieldProps} from "@mui/material";
 import {FastStartContext} from "../../../styles/FastStartProvider.tsx";
-import {SingleTextProps} from "../../../types";
+import {MfsSingleTextProps} from "../../../types";
 
+export type SingleTextProps = TextFieldProps & MfsSingleTextProps;
 
 export const SingleText = (customProps: SingleTextProps) => {
-    const defaultProps = useContext(FastStartContext)?.Single?.Text as SingleTextProps;
-    const props = useSplitSingleTextProps(defaultProps, customProps);
+    const defaultProps = useContext(FastStartContext)?.Single?.MfsText;
+    const props = useSplitTextProps(defaultProps, customProps);
     return <TextField {...props}/>;
 }

package/src/components/index.ts

@@ -1,13 +1,15 @@
-// Object components
-export { ObjCheckbox } from './Obj/Checkbox/ObjCheckbox';
-export { ObjCheckIcon } from './Obj/Checkbox/ObjCheckIcon';
-export { ObjFloat } from './Obj/Textfield/ObjFloat';
-export { ObjInteger } from './Obj/Textfield/ObjInteger';
-export { ObjText } from './Obj/Textfield/ObjText';
-
 // Single components
-export { SingleCheckbox } from './Single/Checkbox/SingleCheckbox';
-export { SingleCheckIcon } from './Single/Checkbox/SingleCheckIcon';
-export { SingleFloat } from './Single/TextField/SingleFloat';
-export { SingleInteger } from './Single/TextField/SingleInteger';
-export { SingleText } from './Single/TextField/SingleText';
+export { SingleCheckbox } from './Single/Checkbox/SingleCheckbox.tsx';
+export { SingleCheckIcon } from './Single/Checkbox/SingleCheckIcon.tsx';
+export { SingleFloat, SingleInteger } from './Single/TextField/SingleNumber.tsx';
+export { SingleText } from './Single/TextField/SingleText.tsx';
+export { SingleSelectOne } from './Single/Select/SingleSelectOne.tsx';
+export { SingleSelectRecord } from './Single/Select/SingleSelectRecord.tsx';
+
+// Object components
+export { ObjCheckbox } from './Object/Checkbox/ObjCheckbox.tsx';
+export { ObjCheckIcon } from './Object/Checkbox/ObjCheckIcon.tsx';
+export { ObjFloat, ObjInteger } from './Object/Textfield/ObjNumber.tsx';
+export { ObjText } from './Object/Textfield/ObjText.tsx';
+export { ObjSelectOne } from './Object/Select/ObjSelectOne.tsx';
+export { ObjSelectRecord } from './Object/Select/ObjSelectRecord.tsx';

package/src/hooks/index.ts

@@ -1,3 +1,3 @@
-export * from './splits/useSplitSingleNumberProps';
-export * from './splits/useSplitSingleTextProps';
+export * from './splits/useSplitNumberProps.ts';
+export * from './splits/useSplitTextProps.ts';
 export * from './state/useObjToSingle';

package/src/hooks/splits/{useSplitSingleNumberProps.ts → useSplitNumberProps.ts}

@@ -1,7 +1,8 @@
 import type {TextFieldProps} from "@mui/material";
 import {fastDeepMerge, floatCalculate, integerCalculate, processFloat, processInteger} from "../../utils";
-import React, {useCallback, useMemo, useState} from "react";
-import {InputLabelType, SingleNumberProps} from "../../types";
+import React, {useCallback, useState} from "react";
+import {MfsSingleNumberProps} from "../../types";
+import {SingleNumberProps} from "../../components/Single/TextField/SingleNumber.tsx";
 
 type CalculateNumber = number | null | undefined;
 type CalculateFunction = (
@@ -11,8 +12,8 @@ type CalculateFunction = (
     def: CalculateNumber
 ) => CalculateNumber;
 
-const useSplitSingleNumberProps = (
-    defaultProps: SingleNumberProps,
+const useSplitNumberProps = (
+    defaultProps: Partial<MfsSingleNumberProps> | undefined,
     customProps: SingleNumberProps,
     process: (value: string) => string,
     calculate: CalculateFunction,
@@ -20,61 +21,67 @@ const useSplitSingleNumberProps = (
 ): TextFieldProps => {
     const [draft, setDraft] = useState<string | null>(null);
     const {
-        get, set, errorData,
+        get, set, err,
         minLength, maxLength,
         startAdornment, endAdornment,
-        disappear, def, min, max, step,
+        def, min, max, step,
         ...props
-    } = useMemo(() =>
-        fastDeepMerge<SingleNumberProps>({...defaultProps}, customProps),
-        [defaultProps, customProps]
-    );
+    } = (defaultProps == null)
+        ? customProps
+        : Object.assign({...defaultProps}, customProps);
 
-    const getCalculate = useCallback((value: string | null) => (
-        calculate(value, min, max, def)
-    ), [calculate, min, max, def]);
+    const getCalculate = (
+        value: string | null
+    ) => calculate(value, min, max, def);
 
-    const getKeyboardValue = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    const getKeyboardValue = (
+        event: React.KeyboardEvent<HTMLInputElement>
+    ) => {
         const {value, valueAsNumber} = event.currentTarget;
         return isNaN(valueAsNumber) ? getCalculate(value) : valueAsNumber;
-    }, [getCalculate]);
-
-    const getProcess = useCallback((event: React.ChangeEvent<HTMLInputElement>): string => {
-        const target = event.currentTarget;
-        const value: string = process(target.value);
-        if (value != target.value) {
-            target.value = value;
-        }
-        return value;
-    }, [process]);
-
+    }
 
-    const onSelect = useCallback(() => {
-        if (draft == null) setDraft(get.toString());
-    }, [draft, get]);
-
-    const onChange = useCallback(
-        (event: React.ChangeEvent<HTMLInputElement>) => {
-            const result: string = getProcess(event);
-            const num: CalculateNumber = getCalculate(result);
-            if (num != null && !isNaN(num) && get != num) {
-                set(num);
+    const getProcess = useCallback(
+        (event: React.ChangeEvent<HTMLInputElement>): string => {
+            const target = event.currentTarget;
+            const value: string = process(target.value);
+            if (value != target.value) {
+                target.value = value;
             }
-
-            setDraft(event.currentTarget.value);
+            return value;
         },
-        [getProcess, getCalculate, get, set]
+        [process]
     );
 
-    const onBlur = useCallback((event: React.FocusEvent<HTMLInputElement>) => {
+    const onSelect = () => {
+        if (draft == null) setDraft(get.toString());
+    };
+
+    const onChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        const result: string = getProcess(event);
+        const num: CalculateNumber = getCalculate(result);
+        if (num != null && !isNaN(num) && get != num) {
+            set(num);
+        }
+
+        setDraft(event.currentTarget.value);
+    }
+
+    const onBlur = (
+        event: React.FocusEvent<HTMLInputElement>
+    ) => {
         const {value} = event.currentTarget;
 
         setDraft(null);
         const num: CalculateNumber = getCalculate(value);
         if (get != num) set(num as number);
-    }, [getCalculate, get, set]);
+    };
 
-    const onKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>) => {
+    const onKeyDown = (
+        event: React.KeyboardEvent<HTMLInputElement>
+    ) => {
         if (lockKeys.includes(event.key) || step == null) {
             event.preventDefault();
             return;
@@ -104,23 +111,18 @@ const useSplitSingleNumberProps = (
                 input.value = digitRound(num, step).toString();
             }
         }
-    }, [getKeyboardValue, lockKeys, max, min, step]);
-
-    const value = useMemo(() => (draft == null ? get : draft), [get, draft]);
-    const inputLabel: InputLabelType = useMemo(() => (
-        (draft == null && (!get || isNaN(get))) ? {} : { shrink: true }
-    ), [draft, get]);
-
+    };
+    
     return fastDeepMerge<TextFieldProps>({
-        error: !!errorData,
-        helperText: errorData,
-        value,
+        error: !!err,
+        helperText: err,
+        value: (draft == null ? get : draft),
         onChange,
         onSelect,
         onBlur,
         slotProps: {
             htmlInput: {step, min, max, minLength, maxLength, onKeyDown},
-            inputLabel: inputLabel,
+            inputLabel: (draft == null && (!get || isNaN(get))) ? {} : { shrink: true },
             input: {startAdornment, endAdornment}
         }
     }, (props as TextFieldProps));
@@ -137,17 +139,17 @@ const digitRound = (num: number, step: number) => {
 }
 
 const useSplitSingleFloatProps = (
-    defaultProps: SingleNumberProps,
+    defaultProps: Partial<MfsSingleNumberProps> | undefined,
     customProps: SingleNumberProps,
-): TextFieldProps => useSplitSingleNumberProps(
+): TextFieldProps => useSplitNumberProps(
     defaultProps, customProps,
     processFloat, floatCalculate
 );
 
 const useSplitSingleIntegerProps = (
-    defaultProps: SingleNumberProps,
+    defaultProps: Partial<MfsSingleNumberProps> | undefined,
     customProps: SingleNumberProps,
-): TextFieldProps => useSplitSingleNumberProps(
+): TextFieldProps => useSplitNumberProps(
     defaultProps, customProps,
     processInteger, integerCalculate,
     [".", "e", "E"]

package/src/hooks/splits/useSplitTextProps.ts

@@ -0,0 +1,36 @@
+import type {TextFieldProps} from "@mui/material";
+import React from "react";
+import {fastDeepMerge} from "../../utils";
+import {MfsSingleTextProps} from "../../types";
+import {SingleTextProps} from "../../components/Single/TextField/SingleText.tsx";
+
+const useSplitTextProps = (
+    defaultProps: Partial<MfsSingleTextProps> | undefined,
+    customProps: SingleTextProps
+): TextFieldProps => {
+    const {
+        get, set, err,
+        minLength, maxLength,
+        startAdornment, endAdornment,
+        ...props
+    } = defaultProps == null ? customProps : Object.assign({...defaultProps}, customProps);
+
+    const onChange = (
+        event: React.ChangeEvent<HTMLInputElement>
+    ) => {
+        set(event.currentTarget.value);
+    }
+
+    return fastDeepMerge<TextFieldProps>({
+        error: !!err,
+        helperText: err,
+        value: get,
+        onChange,
+        slotProps: {
+            htmlInput: {minLength, maxLength},
+            input: {startAdornment, endAdornment}
+        }
+    }, (props as TextFieldProps));
+}
+
+export default useSplitTextProps;