import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
import React, { useState } from 'react';
import { NumberInput, NumberInputField } from '@chakra-ui/react';
import InputLeftElement from './InputLeftElement.js';

function InputGroup(_a) {
    var handleChange = _a.handleChange, inputProps = _a.inputProps, onBlur = _a.onBlur, unit = _a.unit, variant = _a.variant, rest = __rest(_a, ["handleChange", "inputProps", "onBlur", "unit", "variant"]);
    var _b = useState(false), refocus = _b[0], setRefocus = _b[1];
    return (React.createElement(NumberInput, __assign({ key: "".concat(inputProps.name, "-").concat(inputProps.value), width: "full", variant: variant, defaultValue: inputProps.value, name: inputProps.name, onChange: function (_, value) {
            return handleChange({ value: value || undefined, name: inputProps.name });
        }, onBlur: function (event) {
            onBlur === null || onBlur === void 0 ? void 0 : onBlur({
                value: Number(event.target.value) || undefined,
                name: inputProps.name,
            });
            setRefocus(false);
        }, onFocus: function () { return setRefocus(true); } }, rest),
        unit ? React.createElement(InputLeftElement, { unit: unit }) : null,
        React.createElement(NumberInputField, { placeholder: inputProps.placeholder ? inputProps.placeholder : '', fontSize: "base", autoFocus: refocus, "aria-label": inputProps.ariaLabel })));
}

export { InputGroup as default };
//# sourceMappingURL=InputGroup.js.map
