@onesy/ui-react 1.0.0

package/TextField/TextField.js

@@ -0,0 +1,850 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("@onesy/utils");
+const style_react_1 = require("@onesy/style-react");
+const IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
+const Type_1 = __importDefault(require("../Type"));
+const Line_1 = __importDefault(require("../Line"));
+const useMediaQuery_1 = __importDefault(require("../useMediaQuery"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => {
+    const other = {
+        pointerEvents: 'none',
+        borderRadius: 'inherit',
+        boxSizing: 'border-box',
+        position: 'absolute',
+        inset: '0',
+        width: '100%',
+        height: '100%'
+    };
+    const overflow = {
+        width: '100%',
+        overflow: 'hidden',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis'
+    };
+    return {
+        wrapper: {
+            position: 'relative',
+            display: 'inline-flex',
+            flexDirection: 'column'
+        },
+        root: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            position: 'relative',
+            borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`,
+            '& > *': {
+                '&::-webkit-scrollbar': {
+                    width: '0px',
+                    height: '0px'
+                }
+            }
+        },
+        // Color
+        color_default: { color: theme.palette.text.default.primary },
+        color_neutral: { color: theme.palette.color.neutral.main },
+        color_primary: { color: theme.palette.color.primary.main },
+        color_secondary: { color: theme.palette.color.secondary.main },
+        color_tertiary: { color: theme.palette.color.tertiary.main },
+        color_quaternary: { color: theme.palette.color.quaternary.main },
+        color_info: { color: theme.palette.color.info.main },
+        color_success: { color: theme.palette.color.success.main },
+        color_warning: { color: theme.palette.color.warning.main },
+        color_error: { color: theme.palette.color.error.main },
+        error_color: {
+            color: [theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80], '!important']
+        },
+        error_hover_color: {
+            color: [theme.palette.light ? theme.palette.color.error[20] : theme.palette.color.error[90], '!important']
+        },
+        inputWrapper: Object.assign({ 
+            // Reset
+            margin: '0', border: '0', fontFamily: 'inherit', fontSize: '100%', lineHeight: '1.15', overflow: 'visible', boxSizing: 'border-box', display: 'flex', flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', opacity: '0', transition: theme.methods.transitions.make('opacity'), borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, cursor: 'text', width: '0', flex: '1 1 auto' }, theme.typography.values.b2),
+        inputWrapper_focus: {
+            opacity: '1'
+        },
+        input: Object.assign(Object.assign({ 
+            // Reset
+            margin: '0', border: '0', outline: 'none', color: theme.palette.text.default.primary, background: 'transparent', '-webkit-tap-highlight-color': 'transparent', textAlign: 'start' }, theme.typography.values.b2), overflow),
+        multiline: {
+            resize: 'none',
+            overflow: 'auto',
+            whiteSpace: 'normal'
+        },
+        input_size_small: {
+            // height: '48px',
+            padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2, 'px')}`,
+            paddingTop: theme.methods.space.value(2.5, 'px')
+        },
+        input_size_regular: {
+            // height: '56px',
+            padding: `11px ${theme.methods.space.value(2, 'px')}`,
+            paddingTop: theme.methods.space.value(3, 'px')
+        },
+        input_size_large: {
+            // height: '64px',
+            padding: theme.methods.space.value(2, 'px'),
+            paddingTop: theme.methods.space.value(3.5, 'px')
+        },
+        inputWrapper_without_label_size_small: {
+            paddingTop: `${theme.methods.space.value(1, 'px')}`
+        },
+        inputWrapper_without_label_size_regular: {
+            paddingTop: `${theme.methods.space.value(2, 'px')}`
+        },
+        inputWrapper_without_label_size_large: {
+            paddingTop: `${theme.methods.space.value(2, 'px')}`
+        },
+        input_version_text: {
+            '&:not($input_start_icon)': {
+                paddingInline: '0'
+            }
+        },
+        input_start_icon: {
+            paddingInlineStart: '0'
+        },
+        input_end_icon: {
+            paddingInlineEnd: '0'
+        },
+        input_version_outlined_size_small: {
+            paddingTop: theme.methods.space.value(1.75, 'px'),
+            paddingBottom: theme.methods.space.value(1.75, 'px')
+        },
+        input_version_outlined_size_regular: {
+            paddingTop: theme.methods.space.value(2.25, 'px'),
+            paddingBottom: theme.methods.space.value(2.25, 'px')
+        },
+        input_version_outlined_size_large: {
+            paddingTop: theme.methods.space.value(2.75, 'px'),
+            paddingBottom: theme.methods.space.value(2.75, 'px')
+        },
+        input_align_start: {
+            textAlign: 'start'
+        },
+        input_align_center: {
+            textAlign: 'center'
+        },
+        input_align_end: {
+            textAlign: 'end'
+        },
+        label: Object.assign(Object.assign({ position: 'absolute', insetInlineStart: '16px', transformOrigin: 'top left', transition: theme.methods.transitions.make(['color', 'inset', 'margin', 'transform']), pointerEvents: 'none', userSelect: 'none' }, overflow), { width: 'auto' }),
+        label_regular: {
+            top: '50%',
+            transform: 'translate(0px, -50%) scale(1)'
+        },
+        label_multiline: {
+            top: '0px'
+        },
+        label_rtl: {
+            transformOrigin: 'top right'
+        },
+        label_version_text: {
+            insetInlineStart: '0px'
+        },
+        label_icon_start: {
+            insetInlineStart: theme.methods.space.value(6.5, 'px')
+        },
+        label_size_small_multiline: {
+            transform: 'translate(4px, 14px) scale(1)'
+        },
+        label_size_regular_multiline: {
+            transform: 'translate(4px, 18px) scale(1)'
+        },
+        label_size_large_multiline: {
+            transform: 'translate(4px, 22px) scale(1)'
+        },
+        // Focus
+        label_version_text_focus: {
+            top: '0px',
+            insetInlineStart: '0px',
+            transform: 'translate(0, 6px) scale(0.667)'
+        },
+        label_version_outlined_focus: {
+            top: '0px',
+            insetInlineStart: '15px',
+            marginInlineStart: '4px',
+            transform: 'translate(0, -6px) scale(0.667)'
+        },
+        label_version_filled_focus: {
+            top: '0px',
+            insetInlineStart: '15px',
+            transform: 'translate(0, 6px) scale(0.667)'
+        },
+        background: Object.assign(Object.assign({}, other), { background: 'currentColor', borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected, transition: theme.methods.transitions.make(['opacity']) }),
+        background_hover: {
+            opacity: theme.palette.visual_contrast.default.opacity.focus
+        },
+        background_focus: {
+            opacity: theme.palette.light ? theme.palette.visual_contrast.default.opacity.hover : theme.palette.visual_contrast.default.opacity.selected
+        },
+        border: Object.assign(Object.assign({}, other), { borderRadius: `${theme.shape.radius.unit}px ${theme.shape.radius.unit}px 0 0`, boxShadow: 'inset 0px -1px 0px 0px currentColor', transition: theme.methods.transitions.make(['box-shadow']) }),
+        border_focus: {
+            boxShadow: 'inset 0px -2px 0px 0px currentColor'
+        },
+        fieldset: Object.assign(Object.assign({}, other), { top: '-5px', height: 'calc(100% + 5px)', borderRadius: `${theme.shape.radius.unit}px`, border: '1px solid currentColor', padding: '0', paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`, transition: theme.methods.transitions.make(['border', 'padding']) }),
+        fieldset_focus: {
+            borderWidth: '2px',
+            paddingInline: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(2, 'px')}`
+        },
+        legend: Object.assign(Object.assign({ display: 'inline-flex', height: '11px', width: 'auto', padding: '0px', maxWidth: '0.001px', whiteSpace: 'nowrap', visibility: 'hidden', overflow: 'hidden', transition: theme.methods.transitions.make(['max-width', 'padding'], { duration: 'xxs' }) }, theme.typography.values.b2), { fontSize: '0.64rem', letterSpacing: 'normal' }),
+        legend_focus: {
+            maxWidth: '100%',
+            padding: `0 ${theme.methods.space.value(0.5, 'px')}`,
+            transition: theme.methods.transitions.make(['max-width', 'padding'], { duration: 'xs' })
+        },
+        footer: {
+            marginTop: '4px',
+            paddingInline: theme.methods.space.value(2, 'px')
+        },
+        footer_version_text: {
+            paddingInline: '0'
+        },
+        helperText: {
+            display: 'inline-flex',
+            color: theme.palette.text.default.secondary,
+            userSelect: 'none'
+        },
+        counterText: {
+            display: 'inline-flex',
+            justifyContent: 'flex-end',
+            color: theme.palette.text.default.secondary,
+            userSelect: 'none',
+            flex: '1 0 auto'
+        },
+        // Start and end icon
+        icon: {
+            display: 'inline-flex',
+            alignItems: 'center',
+            flex: '0 0 auto'
+        },
+        icon_size_small: {
+            paddingBlock: '12px'
+        },
+        icon_size_regular: {
+            paddingBlock: '16px'
+        },
+        icon_size_large: {
+            paddingBlock: '24px'
+        },
+        icon_button_size_small: {
+            paddingBlock: '4px'
+        },
+        icon_button_size_regular: {
+            paddingBlock: '8px'
+        },
+        icon_button_size_large: {
+            paddingBlock: '12px'
+        },
+        icon_start: {
+            maxWidth: '40%',
+            overflow: 'auto hidden',
+            paddingInlineEnd: '16px',
+            paddingInlineStart: '12px'
+        },
+        icon_vertical_align_start: {
+            alignSelf: 'flex-start'
+        },
+        icon_vertical_align_center: {
+            alignSelf: 'center',
+            paddingBlock: '0px !important'
+        },
+        icon_vertical_align_end: {
+            alignSelf: 'flex-end'
+        },
+        icon_end: {
+            maxWidth: '40%',
+            overflow: 'auto hidden',
+            paddingInlineStart: theme.methods.space.value(2, 'px'),
+            paddingInlineEnd: theme.methods.space.value(1.5, 'px')
+        },
+        addition: {
+            color: theme.palette.text.default.secondary
+        },
+        addition_size_small: {
+            paddingBottom: theme.methods.space.value(1, 'px'),
+            paddingTop: theme.methods.space.value(2.5, 'px')
+        },
+        addition_size_regular: {
+            paddingBottom: theme.methods.space.value(2, 'px'),
+            paddingTop: theme.methods.space.value(3, 'px')
+        },
+        addition_size_large: {
+            paddingBottom: theme.methods.space.value(2, 'px'),
+            paddingTop: theme.methods.space.value(3.5, 'px')
+        },
+        addition_version_outlined_size_small: {
+            paddingTop: theme.methods.space.value(1.75, 'px'),
+            paddingBottom: theme.methods.space.value(1.75, 'px')
+        },
+        addition_version_outlined_size_regular: {
+            paddingTop: theme.methods.space.value(2.25, 'px'),
+            paddingBottom: theme.methods.space.value(2.25, 'px')
+        },
+        addition_version_outlined_size_large: {
+            paddingTop: theme.methods.space.value(2.75, 'px'),
+            paddingBottom: theme.methods.space.value(2.75, 'px')
+        },
+        addition_without_label_size_small: {
+            paddingTop: `${theme.methods.space.value(1, 'px')}`
+        },
+        addition_without_label_size_regular: {
+            paddingTop: `${theme.methods.space.value(2, 'px')}`
+        },
+        addition_without_label_size_large: {
+            paddingTop: `${theme.methods.space.value(2, 'px')}`
+        },
+        prefix: {
+            flex: '0 0 auto',
+            marginInlineStart: '16px',
+            marginInlineEnd: '8px',
+            opacity: '0',
+            transition: theme.methods.transitions.make('opacity'),
+        },
+        prefix_noStartMargin: {
+            marginInlineStart: '0px'
+        },
+        prefix_focus: {
+            opacity: '1'
+        },
+        noPrefixMargin: {
+            marginInlineEnd: '0'
+        },
+        sufix: {
+            flex: '0 0 auto',
+            marginInlineEnd: '16px',
+            marginInlineStart: '8px',
+            opacity: '0',
+            transition: theme.methods.transitions.make('opacity'),
+        },
+        sufix_focus: {
+            opacity: '1'
+        },
+        sufix_noEndMargin: {
+            marginInlineEnd: '0px'
+        },
+        noSufixMargin: {
+            marginInlineStart: '0'
+        },
+        fullWidth: {
+            width: '100%'
+        },
+        clear: {
+            cursor: 'pointer',
+            pointerEvents: 'all !important',
+            userSelect: 'none',
+            transition: theme.methods.transitions.make('transform', { duration: 'xs' }),
+            '&:active': {
+                transform: 'scale(0.87)'
+            }
+        },
+        disabled: {
+            opacity: '0.54',
+            pointerEvents: 'none',
+            cursor: 'default'
+        }
+    };
+}, { name: 'onesy-TextField' });
+const TextField = react_1.default.forwardRef((props_, ref) => {
+    var _a, _b, _c, _d, _e, _f;
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyTextField) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
+    const Type = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Type) || Type_1.default; }, [theme]);
+    const { tonal = true, color = 'primary', version = 'filled', size = 'regular', rootRef, valueDefault, value: value_, onChange, name, label: label_, align, start, startVerticalAlign = 'start', end: end_, endVerticalAlign: endVerticalAlign_ = 'start', placeholder, fullWidth: fullWidth_, helperText, counter, prefix, sufix, noPrefixMargin, noSufixMargin, enabled, autoFocus, autoComplete, type: type_ = 'text', required, optional, optionalText = 'optional', error, multiline, rows: rows_, minRows = 1, maxRows, clear, focus: focus_, footer: footer_, subscription, controlled, minimal, restoreSelection = false, minWidth, readOnly, disabled, onInput: onInput_, onFocus: onFocus_, onBlur: onBlur_, onMouseEnter: onMouseEnter_, onMouseLeave: onMouseLeave_, inputProps = {}, InputWrapperProps = {}, HelperTextProps, IconProps, IconClear = IconMaterialCloseW100_1.default, InputComponent: InputComponent_, WrapperComponent = 'div', Component = 'div', className, style, children, 
+    // Other
+    colorUnchecked } = props, other = __rest(props, ["tonal", "color", "version", "size", "rootRef", "valueDefault", "value", "onChange", "name", "label", "align", "start", "startVerticalAlign", "end", "endVerticalAlign", "placeholder", "fullWidth", "helperText", "counter", "prefix", "sufix", "noPrefixMargin", "noSufixMargin", "enabled", "autoFocus", "autoComplete", "type", "required", "optional", "optionalText", "error", "multiline", "rows", "minRows", "maxRows", "clear", "focus", "footer", "subscription", "controlled", "minimal", "restoreSelection", "minWidth", "readOnly", "disabled", "onInput", "onFocus", "onBlur", "onMouseEnter", "onMouseLeave", "inputProps", "InputWrapperProps", "HelperTextProps", "IconProps", "IconClear", "InputComponent", "WrapperComponent", "Component", "className", "style", "children", "colorUnchecked"]);
+    const { classes } = useStyle();
+    const refs = {
+        root: react_1.default.useRef(undefined),
+        input: react_1.default.useRef(undefined),
+        carret: react_1.default.useRef(undefined),
+        restoreSelection: react_1.default.useRef(restoreSelection),
+        controlled: react_1.default.useRef(controlled),
+        ids: {
+            label: react_1.default.useId(),
+            clear: react_1.default.useId()
+        }
+    };
+    refs.controlled.current = controlled;
+    const keys = react_1.default.useMemo(() => {
+        const result = [];
+        const items = [fullWidth_];
+        items.forEach(item => {
+            if ((0, utils_1.is)('object', item))
+                Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+        });
+        return (0, utils_1.unique)(result);
+    }, [fullWidth_]);
+    const breakpoints = {};
+    keys.forEach(key => {
+        breakpoints[key] = (0, useMediaQuery_1.default)(theme.breakpoints.media[key], { element: refs.root.current });
+    });
+    const label = name !== undefined ? name : label_;
+    let endVerticalAlign = endVerticalAlign_;
+    const fullWidth = (0, utils_2.valueBreakpoints)(fullWidth_, undefined, breakpoints, theme);
+    const rowValue = () => {
+        var _a;
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        const htmlFontSize = (0, utils_1.isEnvironment)('browser') ? +window.getComputedStyle(rootDocument.documentElement).fontSize.slice(0, -2) : 16;
+        const padding = size === 'small' ? 28 : size === 'regular' ? 36 : 44;
+        const row_ = Math.round(htmlFontSize * 0.875 * 1.4285714285714286);
+        return {
+            height: row_,
+            padding
+        };
+    };
+    const [value, setValue] = react_1.default.useState((valueDefault !== undefined ? valueDefault : value_));
+    const [focus, setFocus] = react_1.default.useState(focus_);
+    const [mouseDown, setMouseDown] = react_1.default.useState(false);
+    const [hover, setHover] = react_1.default.useState(false);
+    const [row, setRow] = react_1.default.useState(rowValue);
+    const [rows, setRows] = react_1.default.useState(1);
+    let end = end_;
+    let type = type_;
+    const styles = {
+        root: {},
+        input: {},
+        inputWrapper: {},
+        background: {
+            color: theme.palette.text.default.secondary
+        }
+    };
+    refs.restoreSelection.current = restoreSelection;
+    react_1.default.useEffect(() => {
+        var _a;
+        const rootDocument = (0, utils_1.isEnvironment)('browser') ? (((_a = refs.root.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) || window.document) : undefined;
+        const htmlObserver = new MutationObserver(() => setRow(rowValue));
+        htmlObserver.observe(rootDocument.documentElement, { attributes: true, attributeFilter: ['style'] });
+        rootDocument.addEventListener('mouseup', onInputWrapperMouseUp);
+        return () => {
+            // Clean up
+            rootDocument.removeEventListener('mouseup', onInputWrapperMouseUp);
+            htmlObserver.disconnect();
+        };
+    }, []);
+    react_1.default.useEffect(() => {
+        setTimeout(() => {
+            if (refs.restoreSelection.current && refs.carret.current) {
+                // Carret restore previous value
+                try {
+                    refs.input.current.selectionStart = refs.carret.current.start;
+                    refs.input.current.selectionEnd = refs.carret.current.end;
+                }
+                catch (error) { }
+            }
+        });
+    }, [value]);
+    react_1.default.useEffect(() => {
+        if (value_ !== undefined && value_ !== value) {
+            setValue(value_);
+        }
+    }, [value_]);
+    react_1.default.useEffect(() => {
+        if (focus_ !== focus && focus_ !== undefined)
+            setFocus(focus_);
+    }, [focus_]);
+    react_1.default.useEffect(() => {
+        const method = (event) => {
+            if (event === 'clear')
+                onClear();
+        };
+        if (subscription)
+            subscription.subscribe(method);
+        return () => {
+            if (subscription)
+                subscription.unsubscribe(method);
+        };
+    }, [subscription]);
+    const onUpdateRows = () => {
+        if (multiline && row !== undefined) {
+            const heightValue = refs.input.current.style.height;
+            // Get actual height with auto
+            refs.input.current.style.height = 'auto';
+            const scrollHeight = refs.input.current.scrollHeight;
+            // Revert back to previous value
+            refs.input.current.style.height = heightValue;
+            const newRows = Math.floor(scrollHeight / row.height);
+            setRows(newRows);
+        }
+    };
+    const onUpdate = (event) => {
+        const inputValue = event.target.value;
+        // Carret save previous value
+        refs.carret.current = { start: refs.input.current.selectionStart, end: refs.input.current.selectionEnd };
+        // Only restore if it's not regular carret value
+        if (refs.carret.current.start === inputValue.length)
+            refs.carret.current = undefined;
+        onUpdateRows();
+        // Inner controlled value
+        if (!refs.controlled.current)
+            setValue(inputValue);
+        if ((0, utils_1.is)('function', onChange))
+            onChange(inputValue, event);
+    };
+    const onInput = (event) => {
+        onUpdateRows();
+        if ((0, utils_1.is)('function', onInput_))
+            onInput_(event);
+    };
+    const onClear = react_1.default.useCallback(() => {
+        if (!disabled) {
+            const valueNew = '';
+            // Inner controlled value
+            if (!refs.controlled.current)
+                setValue(valueNew);
+            if ((0, utils_1.is)('function', onChange))
+                onChange(valueNew);
+        }
+    }, [disabled, onChange]);
+    const onInputWrapperMouseDown = react_1.default.useCallback((event) => {
+        if (!disabled) {
+            setMouseDown(true);
+            refs.input.current.focus();
+            if ((0, utils_1.is)('function', InputWrapperProps.onMouseDown))
+                InputWrapperProps.onMouseDown(event);
+        }
+    }, []);
+    const onInputWrapperMouseUp = react_1.default.useCallback((event) => {
+        if (!disabled) {
+            setMouseDown(false);
+            if ((0, utils_1.is)('function', InputWrapperProps.onMouseUp))
+                InputWrapperProps.onMouseUp(event);
+        }
+    }, []);
+    const onInputWrapperClick = react_1.default.useCallback((event) => {
+        var _a;
+        if (!disabled) {
+            if (event.target === event.currentTarget)
+                (_a = refs.input.current) === null || _a === void 0 ? void 0 : _a.focus();
+            if ((0, utils_1.is)('function', InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.onClick))
+                InputWrapperProps.onClick(event);
+        }
+    }, []);
+    const onFocus = (event) => {
+        if (!disabled) {
+            setFocus(focus_ !== undefined ? focus_ : true);
+            if ((0, utils_1.is)('function', onFocus_))
+                onFocus_(event);
+        }
+    };
+    const onBlur = (event) => {
+        if (!disabled) {
+            setFocus(focus_ !== undefined ? focus_ : false);
+            if ((0, utils_1.is)('function', onBlur_))
+                onBlur_(event);
+        }
+    };
+    const onMouseEnter = react_1.default.useCallback((event) => {
+        if (!disabled) {
+            setHover(true);
+            if ((0, utils_1.is)('function', onMouseEnter_))
+                onMouseEnter_(event);
+        }
+    }, []);
+    const onMouseLeave = react_1.default.useCallback((event) => {
+        if (!disabled) {
+            setHover(false);
+            if ((0, utils_1.is)('function', onMouseLeave_))
+                onMouseLeave_(event);
+        }
+    }, []);
+    const palette = color === 'default' ? theme.palette.color.neutral : !theme.palette.color[color] ? theme.methods.color(color) : theme.palette.color[color];
+    if (!focus) {
+        styles.root.color = theme.palette.text.default.secondary;
+    }
+    else {
+        styles.root.color = styles.input.caretColor = tonal ? theme.methods.palette.color.value(color, 30, true, palette) : (color === 'default' ? theme.palette.text.default.primary : ((_a = theme.palette.color[color]) === null || _a === void 0 ? void 0 : _a.main) || color);
+    }
+    if (error) {
+        styles.input.caretColor = theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80];
+    }
+    if (tonal)
+        styles.background.color = theme.methods.palette.color.value(color, 20, true, palette);
+    const footer = (footer_ || !!helperText || counter !== undefined || required);
+    const Wrapper = footer ? WrapperComponent : react_1.default.Fragment;
+    let ComponentProps = {};
+    let WrapperProps = {};
+    if (value && clear) {
+        if (!Array.isArray(end))
+            end = [end].filter(Boolean);
+        const exists = end === null || end === void 0 ? void 0 : end.find(item => item.key === refs.ids.clear);
+        if (!exists) {
+            if (props.endVerticalAlign === undefined)
+                endVerticalAlign = 'center';
+            end.push((0, jsx_runtime_1.jsx)(IconClear, Object.assign({ color: 'inherit', onClick: onClear }, IconProps, { className: (0, style_react_1.classNames)([
+                    IconProps === null || IconProps === void 0 ? void 0 : IconProps.className,
+                    classes.clear
+                ]) }), refs.ids.clear));
+        }
+    }
+    if (footer) {
+        WrapperProps = Object.assign({}, other);
+        WrapperProps.ref = item => {
+            if (rootRef) {
+                if ((0, utils_1.is)('function', rootRef))
+                    rootRef(item);
+                else
+                    rootRef.current = item;
+            }
+            refs.root.current = item;
+        };
+        WrapperProps['className'] = (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('TextField', theme) && [
+                'onesy-TextField-wrapper',
+                fullWidth && 'onesy-TextField-full-width',
+                disabled && 'onesy-TextField-disabled',
+                fullWidth && 'onesy-full-width'
+            ],
+            className,
+            classes.wrapper,
+            fullWidth && classes.fullWidth,
+            disabled && classes.disabled
+        ]);
+        WrapperProps.style = Object.assign({}, style);
+    }
+    else {
+        ComponentProps = Object.assign({}, other);
+        ComponentProps.ref = item => {
+            if (rootRef) {
+                if ((0, utils_1.is)('function', rootRef))
+                    rootRef(item);
+                else
+                    rootRef.current = item;
+            }
+            refs.root.current = item;
+        };
+        ComponentProps.className = className;
+        ComponentProps.style = Object.assign({}, style);
+    }
+    ComponentProps.style = Object.assign(Object.assign({}, ComponentProps.style), styles.root);
+    let InputComponent = 'input';
+    if (multiline) {
+        InputComponent = 'textarea';
+        inputProps.rows = 1;
+        type = undefined;
+        if (row) {
+            if (rows_) {
+                styles.input.height = (rows_ * row.height);
+                styles.inputWrapper.height = (rows_ * row.height) + row.padding;
+            }
+            else {
+                styles.input.height = (row.height * (0, utils_1.clamp)(rows, minRows, maxRows));
+                styles.inputWrapper.height = (row.height * (0, utils_1.clamp)(rows, minRows, maxRows)) + row.padding;
+            }
+        }
+    }
+    // override the input element
+    // with a custom value
+    if (InputComponent_)
+        InputComponent = InputComponent_;
+    // onInput
+    if (!['input', 'textarea'].includes(InputComponent)) {
+        inputProps.onInput = onInput;
+    }
+    const valueWithData = value !== undefined && String(value);
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({}, WrapperProps, { children: [(0, jsx_runtime_1.jsxs)(Component, Object.assign({ onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onTouchStart: onMouseEnter, onTouchEnd: onMouseLeave, role: 'textbox', "aria-multiline": multiline, "aria-labelledby": refs.ids.label }, ComponentProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('TextField', theme) && [
+                        'onesy-TextField-root', ,
+                        `onesy-TextField-version-${version}`,
+                        `onesy-TextField-size-${size}`,
+                        multiline && `onesy-TextField-multiline`,
+                        valueWithData && 'onesy-TextField-value',
+                        error && `onesy-TextField-error`,
+                        required && 'onesy-TextField-required',
+                        enabled && 'onesy-TextField-enabled',
+                        hover && `onesy-TextField-hover`,
+                        mouseDown && `onesy-TextField-mouse-down`,
+                        focus && `onesy-TextField-focus`,
+                        readOnly && `onesy-TextField-read-only`,
+                        disabled && 'onesy-TextField-disabled',
+                        fullWidth && 'onesy-full-width'
+                    ],
+                    ComponentProps.className,
+                    classes.root,
+                    classes[`color_${color}`],
+                    fullWidth && classes.fullWidth,
+                    error && (hover ? classes.error_hover_color : classes.error_color),
+                    !footer && disabled && classes.disabled
+                ]), style: Object.assign({ minWidth }, ComponentProps === null || ComponentProps === void 0 ? void 0 : ComponentProps.style) }, { children: [!minimal && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [['filled'].includes(version) && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('TextField', theme) && [
+                                        'onesy-TextField-background'
+                                    ],
+                                    classes.background,
+                                    (enabled || valueWithData || focus) && classes.background_focus,
+                                    hover && classes.background_hover
+                                ]), style: styles.background })), ['text', 'filled'].includes(version) && ((0, jsx_runtime_1.jsx)("span", { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('TextField', theme) && [
+                                        'onesy-TextField-border'
+                                    ],
+                                    classes.border,
+                                    focus && classes.border_focus
+                                ]), style: styles.border })), ['outlined'].includes(version) && ((0, jsx_runtime_1.jsx)("fieldset", Object.assign({ className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('TextField', theme) && [
+                                        'onesy-TextField-fieldset'
+                                    ],
+                                    classes.fieldset,
+                                    focus && classes.fieldset_focus
+                                ]), style: styles.fieldset }, { children: (0, jsx_runtime_1.jsxs)("legend", Object.assign({ className: (0, style_react_1.classNames)([
+                                        (0, utils_2.staticClassName)('TextField', theme) && [
+                                            'onesy-TextField-legend'
+                                        ],
+                                        classes.legend,
+                                        (enabled || valueWithData || focus) && label !== undefined && classes.legend_focus
+                                    ]) }, { children: [label, required ? '*' : '', optional ? ` (${optionalText})` : ''] })) })))] }), label && ((0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b2', id: refs.ids.label, Component: 'label', className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('TextField', theme) && [
+                                'onesy-TextField-label'
+                            ],
+                            classes.label,
+                            classes[`label_${multiline ? 'multiline' : 'regular'}`],
+                            classes[`label_version_${version}`],
+                            classes[`label_size_${size}`],
+                            multiline && classes[`label_size_${size}_multiline`],
+                            classes[`label_version_${version}_size_${size}`],
+                            (enabled || valueWithData || focus) && [
+                                classes[`label_focus`],
+                                classes[`label_version_${version}_focus`],
+                                classes[`label_version_${version}_size_${size}${multiline ? '_multiline' : ''}_focus`],
+                                multiline && classes.label_multiline_focus
+                            ],
+                            theme.direction === 'rtl' && classes.label_rtl,
+                            start && [
+                                classes.label_icon_start,
+                                classes[`label_version_${version}_icon_start`]
+                            ]
+                        ]) }, { children: [label, required ? '*' : '', optional ? ` (${optionalText})` : ''] }))), !minimal && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!react_1.default.Children.toArray(start).length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('TextField', theme) && [
+                                    'onesy-TextField-icon',
+                                    'onesy-TextField-icon-start'
+                                ],
+                                classes.icon,
+                                classes.icon_start,
+                                classes[`icon${((_c = (_b = start === null || start === void 0 ? void 0 : start.type) === null || _b === void 0 ? void 0 : _b.displayName) === null || _c === void 0 ? void 0 : _c.includes('IconButton')) ? '_button' : ''}_size_${size}`],
+                                classes[`icon_version_${version}`],
+                                classes[`icon_vertical_align_${startVerticalAlign}`]
+                            ]) }, { children: react_1.default.Children.toArray(start).map((item, index) => {
+                                var _a, _b, _c, _d;
+                                return (react_1.default.cloneElement(item, {
+                                    key: index,
+                                    size: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.size) !== undefined ? (_b = item.props) === null || _b === void 0 ? void 0 : _b.size : 'regular',
+                                    color: ((_c = item.props) === null || _c === void 0 ? void 0 : _c.color) !== undefined ? (_d = item.props) === null || _d === void 0 ? void 0 : _d.color : theme.palette.text.default.secondary,
+                                    style: Object.assign(Object.assign({}, item.props.style), styles.icon)
+                                }));
+                            }) }))) }), prefix !== undefined && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('TextField', theme) && [
+                                'onesy-TextField-addition',
+                                'onesy-TextField-prefix'
+                            ],
+                            classes.addition,
+                            classes.prefix,
+                            (start || version === 'text') && classes.prefix_noStartMargin,
+                            classes[`addition_size_${size}`],
+                            classes[`addition_version_${version}_size_${size}`],
+                            (enabled || valueWithData || focus) && classes.prefix_focus,
+                            noPrefixMargin && classes.noPrefixMargin,
+                            minimal && !label && classes[`addition_without_label_size_${size}`]
+                        ]), version: 'b2' }, { children: prefix }))), (0, jsx_runtime_1.jsxs)("div", Object.assign({}, InputWrapperProps, { className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('TextField', theme) && [
+                                'onesy-TextField-input-wrapper'
+                            ],
+                            classes.inputWrapper,
+                            InputWrapperProps === null || InputWrapperProps === void 0 ? void 0 : InputWrapperProps.className,
+                            (enabled || label === undefined || valueWithData || focus) && classes.inputWrapper_focus,
+                            classes[`input_version_${version}`],
+                            classes[`input_size_${size}`],
+                            classes[`input_version_${version}_size_${size}`],
+                            (prefix || start) && classes.input_start_icon,
+                            (sufix || end) && classes.input_end_icon,
+                            minimal && !label && classes[`inputWrapper_without_label_size_${size}`]
+                        ]), onClick: onInputWrapperClick, onMouseUp: onInputWrapperMouseUp, onMouseDown: onInputWrapperMouseDown, style: Object.assign(Object.assign({}, styles.inputWrapper), InputWrapperProps.style) }, { children: [children, (0, jsx_runtime_1.jsx)(InputComponent, Object.assign({}, inputProps, { ref: item => {
+                                    if (ref) {
+                                        if ((0, utils_1.is)('function', ref))
+                                            ref(item);
+                                        else
+                                            ref.current = item;
+                                    }
+                                    refs.input.current = item;
+                                    if (inputProps.ref) {
+                                        if ((0, utils_1.is)('function', inputProps.ref))
+                                            inputProps.ref(item);
+                                        else
+                                            inputProps.ref.current = item;
+                                    }
+                                }, className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('TextField', theme) && [
+                                        'onesy-TextField-input'
+                                    ],
+                                    classes.input,
+                                    inputProps === null || inputProps === void 0 ? void 0 : inputProps.className,
+                                    multiline && classes.multiline,
+                                    align && classes[`input_align_${align}`]
+                                ]), onFocus: onFocus, onBlur: onBlur, placeholder: placeholder, onChange: onUpdate, value: value !== undefined ? value : '', type: type, autoFocus: autoFocus, autoComplete: autoComplete, readOnly: readOnly, disabled: disabled, style: Object.assign(Object.assign({}, styles.input), inputProps.style) }))] })), sufix !== undefined && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('TextField', theme) && [
+                                'onesy-TextField-addition',
+                                'onesy-TextField-sufix'
+                            ],
+                            classes.addition,
+                            classes.sufix,
+                            (end || version === 'text') && classes.sufix_noEndMargin,
+                            classes[`addition_size_${size}`],
+                            classes[`addition_version_${version}_size_${size}`],
+                            (enabled || valueWithData || focus) && classes.sufix_focus,
+                            noSufixMargin && classes.noSufixMargin
+                        ]), version: 'b2' }, { children: sufix }))), !minimal && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !!react_1.default.Children.toArray(end).length && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: (0, style_react_1.classNames)([
+                                (0, utils_2.staticClassName)('TextField', theme) && [
+                                    'onesy-TextField-icon',
+                                    'onesy-TextField-icon-end'
+                                ],
+                                classes.icon,
+                                classes.icon_end,
+                                classes[`icon${((_e = (_d = end === null || end === void 0 ? void 0 : end.type) === null || _d === void 0 ? void 0 : _d.displayName) === null || _e === void 0 ? void 0 : _e.includes('IconButton')) ? '_button' : ''}_size_${size}`],
+                                classes[`icon_version_${version}`],
+                                classes[`icon_vertical_align_${endVerticalAlign}`]
+                            ]) }, { children: react_1.default.Children.toArray(end).map((item, index) => {
+                                var _a, _b, _c, _d;
+                                return (react_1.default.cloneElement(item, {
+                                    key: index,
+                                    size: ((_a = item.props) === null || _a === void 0 ? void 0 : _a.size) !== undefined ? (_b = item.props) === null || _b === void 0 ? void 0 : _b.size : size,
+                                    color: ((_c = item.props) === null || _c === void 0 ? void 0 : _c.color) !== undefined ? (_d = item.props) === null || _d === void 0 ? void 0 : _d.color : error ? theme.palette.light ? theme.palette.color.error[hover ? 20 : 40] : theme.palette.color.error[hover ? 90 : 80] : theme.palette.text.default.secondary,
+                                    style: Object.assign(Object.assign({}, item.props.style), styles.icon)
+                                }));
+                            }) }))) })] })), footer && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(!!helperText || counter !== undefined || required) && ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 2, direction: 'row', justify: 'space-between', className: (0, style_react_1.classNames)([
+                            (0, utils_2.staticClassName)('TextField', theme) && [
+                                'onesy-TextField-footer'
+                            ],
+                            classes.footer,
+                            classes[`footer_version_${version}`]
+                        ]) }, { children: [(helperText || required) && ((0, jsx_runtime_1.jsx)(Type, Object.assign({ version: 'b3' }, HelperTextProps, { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('TextField', theme) && [
+                                        'onesy-TextField-helper-text',
+                                        error && 'onesy-TextField-error'
+                                    ],
+                                    HelperTextProps === null || HelperTextProps === void 0 ? void 0 : HelperTextProps.className,
+                                    classes.helperText,
+                                    error && classes.error_color
+                                ]) }, { children: helperText !== undefined ? helperText : required ? '*required' : '' }))), counter && ((0, jsx_runtime_1.jsxs)(Type, Object.assign({ version: 'b3', className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('TextField', theme) && [
+                                        'onesy-TextField-counter'
+                                    ],
+                                    classes.counterText,
+                                    error && classes.error_color
+                                ]) }, { children: [((_f = String(value)) === null || _f === void 0 ? void 0 : _f.length) || 0, "/", counter] })))] }))), footer_] })] })));
+});
+TextField.displayName = 'onesy-TextField';
+exports.default = TextField;