<commit_before>import React, { ChangeEvent, ReactNode } from 'react';
import { classnames } from '../../helpers';
import Icon from '../icon/Icon';

import './FileButton.scss';

interface Props {
    className?: string;
    icon?: string;
    disabled?: boolean;
    onAddFiles: (files: File[]) => void;
    children?: ReactNode;
}

const FileButton = ({ onAddFiles, icon = 'attach', disabled, className, children }: Props) => {
    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const input = event.target;
        if (input.files) {
            onAddFiles([...input.files]);
            input.value = '';
        }
    };

    return (
        <div className="file-button flex">
            <label
                role="button"
                className={classnames([
                    'pm-button inline-flex flex-items-center',
                    icon && !children && 'pm-button--for-icon',
                    disabled && 'is-disabled',
                    className,
                ])}
            >
                <Icon name="attach" />
                {children}
                <input type="file" multiple onChange={handleChange} data-testid="composer-attachments-button" />
            </label>
        </div>
    );<commit_msg>Fix [MAILWEB-1210] add file focusable<commit_after>import React, { ChangeEvent, KeyboardEvent, useRef, ReactNode } from 'react';
import { classnames } from '../../helpers';
import Icon from '../icon/Icon';

import './FileButton.scss';

interface Props {
    className?: string;
    icon?: string;
    disabled?: boolean;
    onAddFiles: (files: File[]) => void;
    children?: ReactNode;
}

const FileButton = ({ onAddFiles, icon = 'attach', disabled, className, children }: Props) => {
    const inputRef = useRef<HTMLInputElement>(null);
    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
        const input = event.target;
        if (input.files) {
            onAddFiles([...input.files]);
            input.value = '';
        }
    };
    const handleKey = (event: KeyboardEvent) => {
        if (event.key === 'Enter' || event.key === ' ') {
            inputRef.current?.click();
        }
    };

    return (
        <div className="file-button flex">
            <label
                role="button"
                tabIndex={0}
                className={classnames([
                    'pm-button inline-flex relative flex-items-center',
                    icon && !children && 'pm-button--for-icon',
                    disabled && 'is-disabled',
                    className,
                ])}
                onKeyDown={handleKey}
            >
                <Icon name="attach" />
                {children}
                <input
                    ref={inputRef}
                    type="file"
                    multiple
                    onChange={handleChange}
                    data-testid="composer-attachments-button"
                />
            </label>
        </div>
    );
{'fraction_non_alphanumeric': 0.13876871880199668, 'fraction_numerical': 0.0016638935108153079, 'mean_word_length': 1.6230366492146597, 'pattern_counts': {'":': 0, '<': 18, '<?xml version=': 0, '>': 25, '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': '671663', 'n_tokens_mistral': 796, 'n_tokens_neox': 772, 'n_words': 174}