content: import React from 'react';
  import PropTypes from 'prop-types';
  import clsx from 'clsx';
  import { refType } from '@material-ui/utils';
  import { capitalize } from '../utils/helpers';
  
  /**
   * @ignore - internal component.
   */
  const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
    const {
      classes,
      className,
      disabled,
      IconComponent,
      inputRef,
      variant = 'standard',
      ...other
    } = props;
  
    return (
      <React.Fragment>
        <select
          className={clsx(
            classes.root, // TODO v5: merge root and select
            classes.select,
            classes[variant],
            {
              [classes.disabled]: disabled,
            },
            className,
          )}
          disabled={disabled}
          ref={inputRef || ref}
          {...other}
        />
        {props.multiple ? null : (
          <IconComponent className={clsx(classes.icon, classes[`icon${capitalize(variant)}`])} />
        )}
      </React.Fragment>
    );
  });
  
  NativeSelectInput.propTypes = {
    /**
     * The option elements to populate the select with.
     * Can be some `<option>` elements.
     */
    children: PropTypes.node,
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: PropTypes.object.isRequired,
    /**
     * The CSS class name of the select element.
     */
    className: PropTypes.string,
    /**
     * If `true`, the select will be disabled.
     */
    disabled: PropTypes.bool,
    /**
     * The icon that displays the arrow.
     */
    IconComponent: PropTypes.elementType,
    /**
     * Use that prop to pass a ref to the native select element.
     * @deprecated
     */
    inputRef: refType,
    /**
     * @ignore
     */
    multiple: PropTypes.bool,
    /**
     * Name attribute of the `select` or hidden `input` element.
     */
    name: PropTypes.string,
    /**
     * Callback function fired when a menu item is selected.
     *
     * @param {object} event The event source of the callback.
     * You can pull out the new value by accessing `event.target.value` (string).
     */
    onChange: PropTypes.func,
    /**
     * The input value.
     */
    value: PropTypes.any,
    /**
     * The variant to use.
     */
    variant: PropTypes.oneOf(['standard', 'outlined', 'filled']),
  };
  
  export default NativeSelectInput;
  