<commit_before>import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import enhanceWithClickOutside from 'react-click-outside'
import uuid from 'uuid';

import {
  KEY_UP,
  KEY_ESC,
  KEY_DOWN,
  KEY_ENTER,
  KEY_BACKSPACE
} from './constants'

const SEARCH_INPUT_MIN_SIZE = 1;

import Select from './partials/Select'
import SelectMenu from './partials/SelectMenu'
import SelectValue from './partials/SelectValue'
import SelectMultiValue from './partials/SelectMultiValue'
import SelectClear from './partials/SelectClear'
import SelectArrow from './partials/SelectArrow'
import SelectInput from './partials/SelectInput'
import SelectInputField from './partials/SelectInputField'
import SelectInputFieldSize from './partials/SelectInputFieldSize'
import SelectControl from './partials/SelectControl'
import SelectNoResults from './partials/SelectNoResults'
import SelectClearZone from './partials/SelectClearZone'
import SelectArrowZone from './partials/SelectArrowZone'
import SelectMenuOuter from './partials/SelectMenuOuter'
import SelectPlaceholder from './partials/SelectPlaceholder'
import SelectValueWrapper from './partials/SelectValueWrapper'
import SelectMultiValueWrapper from './partials/SelectMultiValueWrapper'

import ValueRenderer from './renderers/ValueRenderer'
import OptionRenderer from './renderers/OptionRenderer'

import stringifyValue from './functions/stringifyValue'

class WrapperSelect extends React.PureComponent {
  constructor(props) {
    super(props)

    this.optionsMap = props.options.reduce((agregate, current) => {
      agregate[current.value] = current
      return agregate
    }, {})

    let values = [];
    if (props.value && this.optionsMap.hasOwnProperty(props.value)) {
      values.push(props.value);
    }

    if (Array.isArray(props.value)) {
      values = values.concat(props.value);
    }

    this.state = {
      values: new Set(values),
      isOpened: false,
      isFocused: false,
      isSelected: false,
      searchTerm: null,
      searchWidth: 1,
      focusedIndex: 0,
      options: props.options,
      'aria-owns': this.props['aria-owns'] || uuid.v4(),
      'input-field-id': uuid.v4()
    }

    this.inputInnerRef = null
    this.searchSizeRef = null;
  }

  openOptions() {
    this.setState({
      options: this.getOptions(),
      focusedIndex: 0,
      isOpened: true
    });
    this.props.onOpen();
  }

  closeOptions() {
    this.setState({ isOpened: false });
    this.props.onClose();
  }

  setFocus() {
    setTimeout(() => {
      this.inputInnerRef && this.inputInnerRef.focus();
    }, 10);
  }

  // react-click-outside callback
  handleClickOutside(event){
    if (this.state.isOpened) {
      this.closeOptions()
    }
  }

  onRemoveTag = (props, e) => {
    e.stopPropagation();
    const { multi } = this.props;

    this.state.values.delete(props.value);

    this.setState({
      values: new Set(Array.from(this.state.values))
    }, () => {
      this.props.onChange(Array.from(this.state.values));
    });
  }

  resetField() {
    const { multi } = this.props;

    let values = [];
    if (multi) {
      values = Array.from(this.state.values);
      values.pop();
      this.props.onChange(values);
    }

    this.setState({
      values: new Set(values),
      searchTerm: null,
      focusedIndex: 0,
      options: this.props.options,
    }, () => {
      this.closeOptions()
      this.inputInnerRef.value = ''
      this.props.onInputClear()
    })
  }

  onClearValue = (event) => {
    event.preventDefault()
    event.stopPropagation()
    this.resetField();
  }

  onSelectValue = (newValue, event) => {
    const { multi } = this.props;
    const { values } = this.state;

    !multi && values.clear(); // when is not multi select

    if (!values.has(newValue)) {
      values.add(newValue);
      this.setState({
        values,
        searchTerm: null,
        focusedIndex: 0
      }, () => {
        this.inputInnerRef.value = ''
        this.props.onChange(multi ? Array.from(values) : newValue);
      })
    }
    this.closeOptions()
    this.props.onValueClick(multi ? Array.from(values) : newValue, event);
  }

  onSelectFocused = () => {
    this.setState({
      isFocused: true
    })
    this.openOptions();
    this.setFocus();
  }

  getOptions() {
    const { multi } = this.props;
    const { values } = this.state;
    return this.props.options.filter((opt) => {
      const label = opt.label.toLowerCase().trim()
      if (values.has(label) && multi) {
        return false;
      }
      return true;
    });
  }

  onSearching = (event) => {
    const { focusedIndex, options, isOpened } = this.state;

    const typing = () => {
      const filteredOptions = this.getOptions().filter((opt) => {<commit_msg>click outside fix<commit_after>import React from 'react'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import enhanceWithClickOutside from 'react-click-outside'
import uuid from 'uuid';

import {
  KEY_UP,
  KEY_ESC,
  KEY_DOWN,
  KEY_ENTER,
  KEY_BACKSPACE
} from './constants'

const SEARCH_INPUT_MIN_SIZE = 1;

import Select from './partials/Select'
import SelectMenu from './partials/SelectMenu'
import SelectValue from './partials/SelectValue'
import SelectMultiValue from './partials/SelectMultiValue'
import SelectClear from './partials/SelectClear'
import SelectArrow from './partials/SelectArrow'
import SelectInput from './partials/SelectInput'
import SelectInputField from './partials/SelectInputField'
import SelectInputFieldSize from './partials/SelectInputFieldSize'
import SelectControl from './partials/SelectControl'
import SelectNoResults from './partials/SelectNoResults'
import SelectClearZone from './partials/SelectClearZone'
import SelectArrowZone from './partials/SelectArrowZone'
import SelectMenuOuter from './partials/SelectMenuOuter'
import SelectPlaceholder from './partials/SelectPlaceholder'
import SelectValueWrapper from './partials/SelectValueWrapper'
import SelectMultiValueWrapper from './partials/SelectMultiValueWrapper'

import ValueRenderer from './renderers/ValueRenderer'
import OptionRenderer from './renderers/OptionRenderer'

import stringifyValue from './functions/stringifyValue'

class WrapperSelect extends React.PureComponent {
  constructor(props) {
    super(props)

    this.optionsMap = props.options.reduce((agregate, current) => {
      agregate[current.value] = current
      return agregate
    }, {})

    let values = [];
    if (props.value && this.optionsMap.hasOwnProperty(props.value)) {
      values.push(props.value);
    }

    if (Array.isArray(props.value)) {
      values = values.concat(props.value);
    }

    this.state = {
      values: new Set(values),
      isOpened: false,
      isFocused: false,
      isSelected: false,
      searchTerm: null,
      searchWidth: 1,
      focusedIndex: 0,
      options: props.options,
      'aria-owns': this.props['aria-owns'] || uuid.v4(),
      'input-field-id': uuid.v4()
    }

    this.inputInnerRef = null
    this.searchSizeRef = null
    this.shouldFireClickOutsideHack = null
  }

  openOptions() {
    this.setState({
      options: this.getOptions(),
      focusedIndex: 0,
      isOpened: true
    });
    this.props.onOpen();
  }

  closeOptions() {
    this.setState({ isOpened: false });
    this.props.onClose();
  }

  setFocus() {
    setTimeout(() => {
      this.inputInnerRef && this.inputInnerRef.focus();
    }, 10);
  }

  // react-click-outside callback

  handleClickOutside(event) {
    if (this.state.isOpened && this.shouldFireClickOutsideHack) {
      this.closeOptions()
      this.shouldFireClickOutsideHack = false
    }
  }

  onRemoveTag = (props, e) => {
    e.stopPropagation();
    const { multi } = this.props;

    this.state.values.delete(props.value);

    this.setState({
      values: new Set(Array.from(this.state.values))
    }, () => {
      this.props.onChange(Array.from(this.state.values));
    });
  }

  resetField() {
    const { multi } = this.props;

    let values = [];
    if (multi) {
      values = Array.from(this.state.values);
      values.pop();
      this.props.onChange(values);
    }

    this.setState({
      values: new Set(values),
      searchTerm: null,
      focusedIndex: 0,
      options: this.props.options,
    }, () => {
      this.closeOptions()
      this.inputInnerRef.value = ''
      this.props.onInputClear()
    })
  }

  onClearValue = (event) => {
    event.preventDefault()
    event.stopPropagation()
    this.resetField();
  }

  onSelectValue = (newValue, event) => {
    const { multi } = this.props;
    const { values } = this.state;

    !multi && values.clear(); // when is not multi select

    if (!values.has(newValue)) {
      values.add(newValue);
      this.setState({
        values,
        searchTerm: null,
        focusedIndex: 0
      }, () => {
        this.inputInnerRef.value = ''
        this.props.onChange(multi ? Array.from(values) : newValue);
      })
    }
    this.closeOptions()
    this.props.onValueClick(multi ? Array.from(values) : newValue, event);
  }

  onSelectFocused = (event) => {
    this.shouldFireClickOutsideHack = false

    clearInterval(this.focusedTimeout)
    this.focusedTimeout = window.setTimeout(() => {
      this.shouldFireClickOutsideHack = true
    }, 500)

    this.setState({
      isFocused: true
    })

    this.openOptions();
    this.setFocus();
  }

  getOptions() {
    const { multi } = this.props;
    const { values } = this.state;
    return this.props.options.filter((opt) => {
      const label = opt.label.toLowerCase().trim()
      if (values.has(label) && multi) {
        return false;
      }
      return true;
    });
  }

  onSearching = (event) => {
    const { focusedIndex, options, isOpened } = this.state;

    const typing = () => {
      const filteredOptions = this.getOptions().filter((opt) => {
{'fraction_non_alphanumeric': 0.13247906366663303, 'fraction_numerical': 0.0023206538189890023, 'mean_word_length': 3.0, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 30, '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': '2317628', 'n_tokens_mistral': 3053, 'n_tokens_neox': 3018, 'n_words': 616}