diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
index 782b917774a700..793ee06fd7a5d8 100644
--- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
+++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js
@@ -2,18 +2,15 @@
import React from 'react';
import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Select from 'react-select';
import { withStyles } from '@material-ui/core/styles';
import Typography from '@material-ui/core/Typography';
-import Input from '@material-ui/core/Input';
+import NoSSR from '@material-ui/docs/NoSSR';
import TextField from '@material-ui/core/TextField';
-import MenuItem from '@material-ui/core/MenuItem';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
-import CancelIcon from '@material-ui/icons/Cancel';
-import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
-import ClearIcon from '@material-ui/icons/Clear';
import Chip from '@material-ui/core/Chip';
-import Select from 'react-select';
-import 'react-select/dist/react-select.css';
+import MenuItem from '@material-ui/core/MenuItem';
+import { emphasize } from '@material-ui/core/styles/colorManipulator';
const suggestions = [
{ label: 'Afghanistan' },
@@ -55,184 +52,146 @@ const suggestions = [
label: suggestion.label,
}));
-class Option extends React.Component {
- handleClick = event => {
- this.props.onSelect(this.props.option, event);
- };
+const styles = theme => ({
+ root: {
+ flexGrow: 1,
+ height: 250,
+ },
+ input: {
+ display: 'flex',
+ padding: 0,
+ },
+ valueContainer: {
+ display: 'flex',
+ flex: 1,
+ alignItems: 'center',
+ },
+ chip: {
+ margin: `${theme.spacing.unit / 2}px ${theme.spacing.unit / 4}px`,
+ },
+ chipFocused: {
+ backgroundColor: emphasize(
+ theme.palette.type === 'light' ? theme.palette.grey[300] : theme.palette.grey[700],
+ 0.08,
+ ),
+ },
+ noOptionsMessage: {
+ fontSize: 16,
+ padding: `${theme.spacing.unit}px ${theme.spacing.unit * 2}px`,
+ },
+ singleValue: {
+ fontSize: 16,
+ },
+ placeholder: {
+ position: 'absolute',
+ left: 2,
+ fontSize: 16,
+ },
+});
- render() {
- const { children, isFocused, isSelected, onFocus } = this.props;
+function NoOptionsMessage(props) {
+ return (
+
+ {props.children}
+
+ );
+}
- return (
-
- );
- }
+function inputComponent({ inputRef, ...props }) {
+ return
;
}
-function SelectWrapped(props) {
- const { classes, ...other } = props;
+function Control(props) {
+ return (
+
+ );
+}
+function Option(props) {
return (
-