<commit_before>import React from 'react';
import Select from 'react-select';
import PropTypes from 'prop-types';
import { __ } from '../../../global-functions';
import TaggingPropTypes from '../TaggingPropTypes';
import customStyles from '../../../forms/select-styles';

class TagSelector extends React.Component {
  handleChange = (selectedOption) => {
    this.props.onTagCategoryChange({
      id: selectedOption.value,
      description: this.props.tagCategories.find(category => category.id === selectedOption.value).description,
    });
  };


  labelWithIcon = (description, infoText) => (
    <div>
      <span
        style={{
          display: 'inline-block',
          width: 'calc(100% - 18px)',
        }}
      >
        {description}
      </span>
      <span
        className="pull-right pficon pficon-info tag-icon"
        title={infoText}
        aria-hidden="true"
      />
      <span className="sr-only">{infoText}</span>
    </div>
  );

  tagCategories = this.props.tagCategories.map(category => ({
    keyWord: category.description.toLowerCase(),
    value: category.id,
    label: category.singleValue
      ? this.labelWithIcon(category.description, this.props.infoText)
      : category.description,
  }));


  render() {
    const val = this.props.selectedOption.id ? { value: this.props.selectedOption.id, label: this.props.selectedOption.description } : null;
    return (
      <Select
        id="tag_cat"
        value={val}
        className="final-form-select"
        optionClassName="selected-option final-form-select-option"
        styles={customStyles}
        placeholder={__('Select tag category')}
        noOptionsMessage={() => __('No options')}
        options={this.tagCategories}
        onChange={this.handleChange}
        name="form-field-name"
        classNamePrefix="react-select"
        filterOption={(option, filter) =>
          option.data.keyWord.includes(filter.toLowerCase())
        }
        clearable={false}
      />
    );
  }
}
TagSelector.propTypes = {
  tagCategories: PropTypes.arrayOf(TaggingPropTypes.category).isRequired,
  selectedOption: TaggingPropTypes.value,
  onTagCategoryChange: PropTypes.func.isRequired,
  infoText: PropTypes.string,
};

TagSelector.defaultProps = {
  infoText: __('Only a single value can be assigned from these categories'),
  selectedOption: {},
};

export default TagSelector;
<commit_msg>Add forced line wrap for category select<commit_after>import React from 'react';
import Select from 'react-select';
import PropTypes from 'prop-types';
import { __ } from '../../../global-functions';
import TaggingPropTypes from '../TaggingPropTypes';
import customStyles from '../../../forms/select-styles';

class TagSelector extends React.Component {
  handleChange = (selectedOption) => {
    this.props.onTagCategoryChange({
      id: selectedOption.value,
      description: this.props.tagCategories.find(category => category.id === selectedOption.value).description,
    });
  };


  labelWithIcon = (description, infoText) => (
    <div>
      <span
        style={{
          display: 'inline-block',
          width: 'calc(100% - 18px)',
        }}
      >
        {description}
      </span>
      <span
        className="pull-right pficon pficon-info tag-icon"
        title={infoText}
        aria-hidden="true"
      />
      <span className="sr-only">{infoText}</span>
    </div>
  );

  tagCategories = this.props.tagCategories.map(category => ({
    keyWord: category.description.toLowerCase(),
    value: category.id,
    label: category.singleValue
      ? this.labelWithIcon(category.description, this.props.infoText)
      : category.description,
  }));


  render() {
    const val = this.props.selectedOption.id ? { value: this.props.selectedOption.id, label: this.props.selectedOption.description } : null;
    return (
      <Select
        id="tag_cat"
        value={val}
        breakAll
        className="final-form-select"
        optionClassName="selected-option final-form-select-option"
        styles={customStyles}
        placeholder={__('Select tag category')}
        noOptionsMessage={() => __('No options')}
        options={this.tagCategories}
        onChange={this.handleChange}
        name="form-field-name"
        classNamePrefix="react-select"
        filterOption={(option, filter) =>
          option.data.keyWord.includes(filter.toLowerCase())
        }
        clearable={false}
      />
    );
  }
}
TagSelector.propTypes = {
  tagCategories: PropTypes.arrayOf(TaggingPropTypes.category).isRequired,
  selectedOption: TaggingPropTypes.value,
  onTagCategoryChange: PropTypes.func.isRequired,
  infoText: PropTypes.string,
};

TagSelector.defaultProps = {
  infoText: __('Only a single value can be assigned from these categories'),
  selectedOption: {},
};

export default TagSelector;

{'fraction_non_alphanumeric': 0.13517982637453493, 'fraction_numerical': 0.002066969822240595, 'mean_word_length': 2.9599018003273323, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 31, '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': '5711424', 'n_tokens_mistral': 1365, 'n_tokens_neox': 1368, 'n_words': 259}