{"size": 2011, "ext": "js", "max_stars_repo_path": "packages/app/src/elements/Select.js", "max_stars_repo_name": "SocialGouv/code-du-travail-backoffice", "max_stars_repo_stars_event_min_datetime": "2019-02-26T10:40:09.000Z", "max_stars_repo_stars_event_max_datetime": "2022-02-21T06:32:11.000Z", "max_issues_repo_path": "packages/app/src/elements/Select.js", "max_issues_repo_name": "SocialGouv/code-du-travail-backoffice", "max_issues_repo_issues_event_min_datetime": "2019-02-18T06:07:16.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-23T13:51:59.000Z", "max_forks_repo_path": "packages/app/src/elements/Select.js", "max_forks_repo_name": "SocialGouv/code-du-travail-backoffice", "max_forks_repo_forks_event_min_datetime": "2019-06-04T07:07:43.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-21T06:32:11.000Z"}
{"max_stars_count": 8, "max_issues_count": 735, "max_forks_count": 5, "avg_line_length": 21.623655914, "max_line_length": 94, "alphanum_fraction": 0.6683242168}
import styled from "@emotion/styled";
import PropTypes from "prop-types";
import React from "react";
import ReactSelect from "react-select";

const StyledReactSelect = styled(ReactSelect)`
  font-size: 0.875rem;
  margin-left: ${p => (p.withMarginLeft ? "1rem" : 0)};
  margin-right: ${p => (p.withMarginRight ? "1rem" : 0)};
  width: 15rem;

  .class__control {
    border-color: var(--color-border);
    border-radius: 0;
    min-height: 0;
  }

  .class__value-container {
    max-height: 6rem;
    padding: 0.3rem 0.4rem;
    overflow-y: auto;
  }

  .class__dropown-indicator {
    padding: 0.325rem;
  }

  .class__indicator-separator {
    margin: 0.325rem 0;
  }

  .class__input {
    padding: 0;
  }

  .class__placeholder {
    color: var(--color-placeholder);
  }

  .class__multi-value {
    border-radius: 0;
  }

  .class__menu {
    border: solid 1px var(--color-border);
    border-radius: 0;
    border-top: 0;
    box-shadow: none;
    margin: 0;
  }

  .class__menu-list {
    padding: 0;
  }
`;

/**
 * Be careful! The {instanceId} prop is mandatory to avoid "Prop `id` did not match." warning.
 *
 * @see https://github.com/trezor/trezor-suite/issues/290#issuecomment-516349580
 */
const Select = React.forwardRef(
  ({ withMarginLeft = false, withMarginRight = false, ...props }, ref) => (
    <StyledReactSelect
      classNamePrefix="class"
      ref={ref}
      withMarginLeft={withMarginLeft}
      withMarginRight={withMarginRight}
      {...props}
    />
  ),
);

Select.propTypes = {
  clearValue: PropTypes.func,
  emotion: PropTypes.any,
  getStyles: PropTypes.func,
  getValue: PropTypes.func,
  hasValue: PropTypes.bool,
  instanceId: PropTypes.string.isRequired,
  isMulti: PropTypes.bool,
  options: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)),
  selectOption: PropTypes.func,
  selectProps: PropTypes.any,
  setValue: PropTypes.func,
  withMarginLeft: PropTypes.bool,
  withMarginRight: PropTypes.bool,
};

Select.displayName = "Select";

export default Select;
