import { jsx as _jsx } from "react/jsx-runtime";
import classNames from 'classnames';
import { cloneElement, useRef } from 'react';
import { DateTimePicker } from '../../lib/ui/DateTimePicker/DateTimePicker.js';
import { InputLabel } from '../../lib/ui/InputLabel.js';
import { TextField } from '../../lib/ui/TextField/TextField.js';
export function FormField({ children, className, }) {
    const inputRef = useRef();
    const focusInput = () => {
        if (inputRef.current != null) {
            inputRef.current.focus();
        }
    };
    const components = Array.isArray(children) ? children : [children];
    // Map children to automatically focus on input when clicking
    // on an InputLabel.
    const clonedChildren = components.map((component, index) => {
        const baseProps = {
            ...component.props,
            key: index,
        };
        if (component.type === InputLabel) {
            return cloneElement(component, {
                ...baseProps,
                onClick: focusInput,
            });
        }
        if (component.type === TextField || component.type === DateTimePicker) {
            return cloneElement(component, {
                ...baseProps,
                ref: inputRef,
            });
        }
        return cloneElement(component, baseProps);
    });
    return (_jsx("div", { className: classNames('seam-form-field', className), children: clonedChildren }));
}
//# sourceMappingURL=FormField.js.map