import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useCallback } from 'react';
import { useConsolidatedRef, useI18n, useFocusWithin, useTestIds } from '../../hooks';
import { StyledRangeInputContainer } from '../Input/Input.styles';
import FormField from '../FormField';
import Flex from '../Flex';
import { withTestIds } from '../../utils';
import NumberInput from './NumberInput';
import { getNumberRangeTestIds } from './Number.test-ids';
export default withTestIds(forwardRef(function NumberRangeInput({ name, testId, value = {}, onChange, onBlur, onFocus, label, fromLabel, toLabel, labelHidden, placeholder, disabled, readOnly, required, status, unit, showDecimal, numberOfDecimals, showGroupSeparators, min, max, step, variant, fromAdditionalInfo, toAdditionalInfo, autoFocus, handle, ...restProps }, ref) {
    const testIds = useTestIds(testId, getNumberRangeTestIds);
    const t = useI18n();
    const start = value.start ?? '';
    const end = value.end ?? '';
    const onFocusChange = useCallback((focused) => {
        (focused ? onFocus : onBlur)?.({ start, end });
    }, [onBlur, value.start, value.end]);
    const containerRef = useConsolidatedRef(ref);
    useFocusWithin([containerRef], onFocusChange);
    const commonProps = {
        status,
        placeholder,
        readOnly,
        required,
        unit,
        showDecimal,
        numberOfDecimals,
        showGroupSeparators,
        min,
        max,
        variant
    };
    return (_jsx(FormField, { testId: testIds, as: 'fieldset', ...restProps, ref: containerRef, container: { wrap: 'nowrap' }, labelHidden: labelHidden, labelAs: 'legend', label: label, disabled: disabled, required: required, readOnly: readOnly, status: status, children: _jsxs(Flex, { container: true, as: StyledRangeInputContainer, children: [_jsx(NumberInput, { testId: testIds.min, ...commonProps, value: start, onChange: fromValue => onChange({ start: fromValue, end }), label: fromLabel, "aria-label": `${t('range_from_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: fromAdditionalInfo, autoFocus: autoFocus }), _jsx(NumberInput, { testId: testIds.max, ...commonProps, value: end, onChange: toValue => onChange({ start, end: toValue }), label: toLabel, "aria-label": `${t('range_to_numeric') + (label ? ` - ${label}` : '')}`, additionalInfo: toAdditionalInfo })] }) }));
}), getNumberRangeTestIds);
//# sourceMappingURL=NumberRangeInput.js.map