import React, { useState } from 'react';
import Box from '@material-ui/core/Box';
import TextField from '@material-ui/core/TextField';
import Typography from '@material-ui/core/Typography';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
import { Autocomplete } from '@material-ui/lab';
import { useComboBoxStyles } from './useComboBoxStyles.esm.js';
import { RenderOptionLabel } from './RenderOptionLabel.esm.js';

function ComboBox(props) {
  const classes = useComboBoxStyles();
  const [_text, setText] = useState("");
  return /* @__PURE__ */ React.createElement(Box, { className: classes.root, pb: 1, pt: 1 }, /* @__PURE__ */ React.createElement(Typography, { className: classes.label, variant: "button", component: "label" }, props.label), /* @__PURE__ */ React.createElement(
    Autocomplete,
    {
      ...props,
      disableCloseOnSelect: props.multiple,
      includeInputInList: true,
      popupIcon: /* @__PURE__ */ React.createElement(ExpandMoreIcon, { "data-testid": "expand-icon" }),
      renderInput: (params) => /* @__PURE__ */ React.createElement(
        TextField,
        {
          ...params,
          className: classes.input,
          onChange: (e) => {
            setText(e.currentTarget.value);
          },
          variant: "outlined"
        }
      ),
      renderOption: (option, { selected }) => !props.freeSolo ? /* @__PURE__ */ React.createElement(RenderOptionLabel, { title: option, isSelected: selected }) : option,
      size: "small"
    }
  ));
}

export { ComboBox };
//# sourceMappingURL=ComboBox.esm.js.map
