import React from "react";
const CheckboxElement = (props) => {
    const [value, setValue] = React.useState(props.initialValue || false);
    // ref this checkbox.
    const checkboxRef = React.useRef(null);
    React.useEffect(() => {
        checkboxRef.current.indeterminate = props.isIndeterminate || false;
    }, [props.isIndeterminate]);
    React.useEffect(() => {
        if (props.value === undefined) {
            return;
        }
        setValue(props.value || false);
    }, [props.value]);
    return (React.createElement("div", null,
        React.createElement("div", { className: `relative flex items-start ${props.outerDivClassName || ""}` },
            React.createElement("div", { className: "flex h-6 items-center" },
                React.createElement("input", { checked: value, onChange: (event) => {
                        setValue(event.target.checked);
                        if (props.onChange) {
                            props.onChange(event.target.checked, props.isIndeterminate);
                        }
                    }, ref: checkboxRef, autoFocus: props.autoFocus, tabIndex: props.tabIndex, readOnly: props.readOnly, disabled: props.disabled, onFocus: props.onFocus, onBlur: props.onBlur, "data-testid": props.dataTestId, "aria-describedby": props.description ? "checkbox-description" : undefined, "aria-invalid": props.error ? "true" : undefined, type: "checkbox", className: `accent-indigo-600 h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-600 ${props.className || ""}` })),
            React.createElement("div", { className: "ml-3 text-sm leading-6" },
                React.createElement("label", { className: "font-medium text-gray-900" }, props.title),
                props.description && (React.createElement("div", { id: "checkbox-description", className: "text-gray-500" }, props.description)))),
        props.error && (React.createElement("p", { "data-testid": "error-message", className: "mt-1 text-sm text-red-400" }, props.error))));
};
export default CheckboxElement;
//# sourceMappingURL=Checkbox.js.map