<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import CloseIcon from '@material-ui/icons/Close';
import Box from '@material-ui/core/Box';

// FIXME: Get rid of styled-components
// Based on example from material-ui doc: https://material-ui.com/components/autocomplete/#useautocomplete
const InputWrapper = styled('div')`
  background-color: #eee;
  border-radius: 4px;
  padding-right: 4px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;

  &.focused {
    background-color: #ccc;
  }

  .multi-select-filter__remove {
    cursor: pointer;
  }
`;

const RemoveableWrapper = ({
  icon,
  onRemove,
  children,
  readOnly,
  boxProps,
}) => {
  const [showDeleteIcon, setShowDeleteIcon] = React.useState(false);

  const handleClick = (e) => {
    e.stopPropagation();
    onRemove();
  };

  return (
    <InputWrapper
      onMouseEnter={() => setShowDeleteIcon(true)}
      onMouseLeave={() => setShowDeleteIcon(false)}
    >
      <Box display="flex" alignItems="center" {...boxProps}>
        { showDeleteIcon && !readOnly ? <CloseIcon className="multi-select-filter__remove" onClick={handleClick} /> : icon }
      </Box>
      {children}
    </InputWrapper>
  );
};

RemoveableWrapper.defaultProps = {
  readOnly: false,
  boxProps: {},
  children: null,<commit_msg>Ticket CHECK-438: Minor CSS fix<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import CloseIcon from '@material-ui/icons/Close';
import Box from '@material-ui/core/Box';

// FIXME: Get rid of styled-components
// Based on example from material-ui doc: https://material-ui.com/components/autocomplete/#useautocomplete
const InputWrapper = styled('div')`
  background-color: #eee;
  border-radius: 4px;
  padding-right: 4px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;

  &.focused {
    background-color: #ccc;
  }

  .multi-select-filter__remove {
    cursor: pointer;
  }
`;

const RemoveableWrapper = ({
  icon,
  onRemove,
  children,
  readOnly,
  boxProps,
}) => {
  const [showDeleteIcon, setShowDeleteIcon] = React.useState(false);

  const handleClick = (e) => {
    e.stopPropagation();
    onRemove();
  };

  return (
    <InputWrapper
      onMouseEnter={() => setShowDeleteIcon(true)}
      onMouseLeave={() => setShowDeleteIcon(false)}
      style={readOnly ? { minHeight: 36 } : {}}
    >
      <Box display="flex" alignItems="center" {...boxProps}>
        { showDeleteIcon && !readOnly ? <CloseIcon className="multi-select-filter__remove" onClick={handleClick} /> : icon }
      </Box>
      {children}
    </InputWrapper>
  );
};

RemoveableWrapper.defaultProps = {
  readOnly: false,
  boxProps: {},
  children: null,
{'fraction_non_alphanumeric': 0.14614830813534918, 'fraction_numerical': 0.0032397408207343412, 'mean_word_length': 3.6784511784511786, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 21, 'https://': 2, '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': '7549915', 'n_tokens_mistral': 897, 'n_tokens_neox': 882, 'n_words': 194}