<commit_before>import React, { useEffect, useRef } from 'react';
import Icon from '../icon/Icon';
import { classnames } from '../../helpers';
import { useCombinedRefs } from '../../hooks';

export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
    loading?: boolean;
    backgroundColor?: string;
    borderColor?: string;
    color?: string;
    indeterminate?: boolean;
    labelOnClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
}

const Checkbox = (
    {
        id,
        className,
        title,
        loading,
        disabled,
        checked,
        indeterminate = false,
        color,
        backgroundColor,
        borderColor,
        children,
        labelOnClick,
        ...rest
    }: Props,
    ref: React.Ref<HTMLInputElement>
) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const combinedRef = useCombinedRefs(inputRef, ref);

    useEffect(() => {
        if (inputRef.current) {
            inputRef.current.indeterminate = indeterminate;
        }
    }, [indeterminate]);

    return (
        <label
            htmlFor={id}
            className={classnames([
                'inline-flex',
                !className?.includes('increase-click-surface') && 'relative',
                className,
            ])}
            title={title}
            onClick={labelOnClick}
        >
            <input
                ref={combinedRef}
                disabled={disabled || loading}
                id={id}
                type="checkbox"
                className="checkbox"
                checked={checked}
                {...rest}
            />
            <span className="checkbox-fakecheck" style={{ borderColor, background: backgroundColor, color }}>
                <Icon className="checkbox-fakecheck-img" size={12} name="on" color={color} />
            </span>
            {children}
        </label>
    );
};

export default React.forwardRef<HTMLInputElement, Props>(Checkbox);<commit_msg>Fix - restyled indeterminate state for checkboxes<commit_after>import React, { useEffect, useRef } from 'react';
import Icon from '../icon/Icon';
import { classnames } from '../../helpers';
import { useCombinedRefs } from '../../hooks';

export interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
    loading?: boolean;
    backgroundColor?: string;
    borderColor?: string;
    color?: string;
    indeterminate?: boolean;
    labelOnClick?: (event: React.MouseEvent<HTMLLabelElement, MouseEvent>) => void;
}

const Checkbox = (
    {
        id,
        className,
        title,
        loading,
        disabled,
        checked,
        indeterminate = false,
        color,
        backgroundColor,
        borderColor,
        children,
        labelOnClick,
        ...rest
    }: Props,
    ref: React.Ref<HTMLInputElement>
) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const combinedRef = useCombinedRefs(inputRef, ref);

    useEffect(() => {
        if (inputRef.current) {
            inputRef.current.indeterminate = indeterminate;
        }
    }, [indeterminate]);

    return (
        <label
            htmlFor={id}
            className={classnames([
                'inline-flex',
                !className?.includes('increase-click-surface') && 'relative',
                className,
            ])}
            title={title}
            onClick={labelOnClick}
        >
            <input
                ref={combinedRef}
                disabled={disabled || loading}
                id={id}
                type="checkbox"
                className="checkbox"
                checked={checked}
                {...rest}
            />
            <span className="checkbox-fakecheck" style={{ borderColor, background: backgroundColor, color }}>
                {indeterminate === false ? (
                    <Icon className="checkbox-fakecheck-img" size={12} name="on" color={color} />
                ) : (
                    <Icon className="checkbox-fakecheck-img color-disabled" size={12} name="dash" />
                )}
            </span>
            {children}
        </label>
    );
};

export default React.forwardRef<HTMLInputElement, Props>(Checkbox);
{'fraction_non_alphanumeric': 0.12390842577295257, 'fraction_numerical': 0.0014160962945480293, 'mean_word_length': 1.830995323981296, 'pattern_counts': {'":': 0, '<': 26, '<?xml version=': 0, '>': 32, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3307556', 'n_tokens_mistral': 1131, 'n_tokens_neox': 1093, 'n_words': 227}