<commit_before>import React from 'react';
import { c } from 'ttag';
import { classnames } from '../../helpers';
import Title from './Title';
import { Button } from '../button';
import Icon from '../icon/Icon';

interface Props extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'children'> {
    modalTitleID: string;
    children: React.ReactNode;
    onClose?: () => void;
    displayTitle?: boolean;
    hasClose?: boolean;
    closeTextModal?: string;
}

const Header = ({
    children,
    modalTitleID,
    className,
    closeTextModal,
    hasClose = true,
    displayTitle = true,
    onClose,
    ...rest
}: Props) => {
    const closeText = !closeTextModal ? c('Action').t`Close modal` : closeTextModal;
    return (
        <header
            className={classnames(['modal-header', !displayTitle && 'modal-header--no-title', className])}
            {...rest}
        >
            {hasClose ? (
                <Button icon shape="ghost" size="small" className="modal-close" title={closeText} onClick={onClose}>
                    <Icon className="modal-close-icon" name="close" alt={closeText} />
                </Button>
            ) : null}
            {typeof children === 'string' ? (
                <Title id={modalTitleID} className={!displayTitle ? 'sr-only' : undefined}>
                    {children}
                </Title>
            ) : (
                children
            )}
        </header>
    );
};

export default Header;<commit_msg>[MAILWEB-1927] Fix names being too long in header modals<commit_after>import React from 'react';
import { c } from 'ttag';
import { classnames } from '../../helpers';
import Title from './Title';
import { Button } from '../button';
import Icon from '../icon/Icon';

interface Props extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'children'> {
    modalTitleID: string;
    children: React.ReactNode;
    onClose?: () => void;
    displayTitle?: boolean;
    hasClose?: boolean;
    closeTextModal?: string;
}

const Header = ({
    children,
    modalTitleID,
    className,
    closeTextModal,
    hasClose = true,
    displayTitle = true,
    onClose,
    ...rest
}: Props) => {
    const closeText = !closeTextModal ? c('Action').t`Close modal` : closeTextModal;
    return (
        <header
            className={classnames(['modal-header', !displayTitle && 'modal-header--no-title', className])}
            {...rest}
        >
            {hasClose ? (
                <Button icon shape="ghost" size="small" className="modal-close" title={closeText} onClick={onClose}>
                    <Icon className="modal-close-icon" name="close" alt={closeText} />
                </Button>
            ) : null}
            {typeof children === 'string' ? (
                <Title id={modalTitleID} className={!displayTitle ? 'sr-only' : 'text-ellipsis'}>
                    {children}
                </Title>
            ) : (
                children
            )}
        </header>
    );
};

export default Header;
{'fraction_non_alphanumeric': 0.14522956691631392, 'fraction_numerical': 0.0013025073266037122, 'mean_word_length': 2.216753926701571, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 27, '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': '2359934', 'n_tokens_mistral': 859, 'n_tokens_neox': 853, 'n_words': 201}