From ee9bc6587891657071e4d721cadd6b63ed1e6a8f Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 28 Jul 2018 01:33:53 +0200
Subject: [PATCH] [docs] Upgrade react-select (#12307)

---
 .../autocomplete/IntegrationReactSelect.js    | 363 +++++++-----------
 .../pages/demos/autocomplete/autocomplete.md  |  16 -
 package.json                                  |   2 +-
 yarn.lock                                     | 127 +++++-
 4 files changed, 260 insertions(+), 248 deletions(-)

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 (
+    <Typography
+      color="textSecondary"
+      className={props.selectProps.classes.noOptionsMessage}
+      {...props.innerProps}
+    >
+      {props.children}
+    </Typography>
+  );
+}
 
-    return (
-      <MenuItem
-        onFocus={onFocus}
-        selected={isFocused}
-        onClick={this.handleClick}
-        component="div"
-        style={{
-          fontWeight: isSelected ? 500 : 400,
-        }}
-      >
-        {children}
-      </MenuItem>
-    );
-  }
+function inputComponent({ inputRef, ...props }) {
+  return <div ref={inputRef} {...props} />;
 }
 
-function SelectWrapped(props) {
-  const { classes, ...other } = props;
+function Control(props) {
+  return (
+    <TextField
+      fullWidth
+      InputProps={{
+        inputComponent,
+        inputProps: {
+          className: props.selectProps.classes.input,
+          ref: props.innerRef,
+          children: props.children,
+          ...props.innerProps,
+        },
+      }}
+    />
+  );
+}
 
+function Option(props) {
   return (
-    <Select
-      optionComponent={Option}
-      noResultsText={<Typography>{'No results found'}</Typography>}
-      arrowRenderer={arrowProps => {
-        return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />;
+    <MenuItem
+      buttonRef={props.innerRef}
+      selected={props.isFocused}
+      component="div"
+      style={{
+        fontWeight: props.isSelected ? 500 : 400,
       }}
-      clearRenderer={() => <ClearIcon />}
-      valueComponent={valueProps => {
-        const { value, children, onRemove } = valueProps;
+      {...props.innerProps}
+    >
+      {props.children}
+    </MenuItem>
+  );
+}
 
-        const onDelete = event => {
-          event.preventDefault();
-          event.stopPropagation();
-          onRemove(value);
-        };
+function Placeholder(props) {
+  return (
+    <Typography
+      color="textSecondary"
+      className={props.selectProps.classes.placeholder}
+      {...props.innerProps}
+    >
+      {props.children}
+    </Typography>
+  );
+}
+
+function SingleValue(props) {
+  return (
+    <Typography className={props.selectProps.classes.singleValue} {...props.innerProps}>
+      {props.children}
+    </Typography>
+  );
+}
 
-        if (onRemove) {
-          return (
-            <Chip
-              tabIndex={-1}
-              label={children}
-              className={classes.chip}
-              deleteIcon={<CancelIcon onTouchEnd={onDelete} />}
-              onDelete={onDelete}
-            />
-          );
-        }
+function ValueContainer(props) {
+  return <div className={props.selectProps.classes.valueContainer}>{props.children}</div>;
+}
 
-        return <div className="Select-value">{children}</div>;
+function MultiValue(props) {
+  return (
+    <Chip
+      tabIndex={-1}
+      label={props.children}
+      className={classNames(props.selectProps.classes.chip, {
+        [props.selectProps.classes.chipFocused]: props.isFocused,
+      })}
+      onDelete={event => {
+        props.removeProps.onClick();
+        props.removeProps.onMouseDown(event);
       }}
-      {...other}
     />
   );
 }
 
-const ITEM_HEIGHT = 48;
-
-const styles = theme => ({
-  root: {
-    flexGrow: 1,
-    height: 250,
-  },
-  chip: {
-    margin: theme.spacing.unit / 4,
-  },
-  // We had to use a lot of global selectors in order to style react-select.
-  // We are waiting on https://github.com/JedWatson/react-select/issues/1679
-  // to provide a much better implementation.
-  // Also, we had to reset the default style injected by the library.
-  '@global': {
-    '.Select-control': {
-      display: 'flex',
-      alignItems: 'center',
-      border: 0,
-      height: 'auto',
-      background: 'transparent',
-      '&:hover': {
-        boxShadow: 'none',
-      },
-    },
-    '.Select-multi-value-wrapper': {
-      flexGrow: 1,
-      display: 'flex',
-      flexWrap: 'wrap',
-    },
-    '.Select--multi .Select-input': {
-      margin: 0,
-    },
-    '.Select.has-value.is-clearable.Select--single > .Select-control .Select-value': {
-      padding: 0,
-    },
-    '.Select-noresults': {
-      padding: theme.spacing.unit * 2,
-    },
-    '.Select-input': {
-      display: 'inline-flex !important',
-      padding: 0,
-      height: 'auto',
-    },
-    '.Select-input input': {
-      background: 'transparent',
-      border: 0,
-      padding: 0,
-      cursor: 'default',
-      display: 'inline-block',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      margin: 0,
-      outline: 0,
-    },
-    '.Select-placeholder, .Select--single .Select-value': {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      display: 'flex',
-      alignItems: 'center',
-      fontFamily: theme.typography.fontFamily,
-      fontSize: theme.typography.pxToRem(16),
-      padding: 0,
-    },
-    '.Select-placeholder': {
-      opacity: 0.42,
-      color: theme.palette.common.black,
-    },
-    '.Select-menu-outer': {
-      backgroundColor: theme.palette.background.paper,
-      boxShadow: theme.shadows[2],
-      position: 'absolute',
-      left: 0,
-      top: `calc(100% + ${theme.spacing.unit}px)`,
-      width: '100%',
-      zIndex: 2,
-      maxHeight: ITEM_HEIGHT * 4.5,
-    },
-    '.Select.is-focused:not(.is-open) > .Select-control': {
-      boxShadow: 'none',
-    },
-    '.Select-menu': {
-      maxHeight: ITEM_HEIGHT * 4.5,
-      overflowY: 'auto',
-    },
-    '.Select-menu div': {
-      boxSizing: 'content-box',
-    },
-    '.Select-arrow-zone, .Select-clear-zone': {
-      color: theme.palette.action.active,
-      cursor: 'pointer',
-      height: 21,
-      width: 21,
-      zIndex: 1,
-    },
-    // Only for screen readers. We can't use display none.
-    '.Select-aria-only': {
-      position: 'absolute',
-      overflow: 'hidden',
-      clip: 'rect(0 0 0 0)',
-      height: 1,
-      width: 1,
-      margin: -1,
-    },
-  },
-});
+const components = {
+  Option,
+  Control,
+  NoOptionsMessage,
+  Placeholder,
+  SingleValue,
+  MultiValue,
+  ValueContainer,
+};
 
 class IntegrationReactSelect extends React.Component {
   state = {
     single: null,
     multi: null,
-    multiLabel: null,
   };
 
   handleChange = name => value => {
@@ -246,59 +205,25 @@ class IntegrationReactSelect extends React.Component {
 
     return (
       <div className={classes.root}>
-        <Input
-          fullWidth
-          inputComponent={SelectWrapped}
-          value={this.state.single}
-          onChange={this.handleChange('single')}
-          placeholder="Search a country (start with a)"
-          id="react-select-single"
-          inputProps={{
-            classes,
-            name: 'react-select-single',
-            instanceId: 'react-select-single',
-            simpleValue: true,
-            options: suggestions,
-          }}
-        />
-        <Input
-          fullWidth
-          inputComponent={SelectWrapped}
-          value={this.state.multi}
-          onChange={this.handleChange('multi')}
-          placeholder="Select multiple countries"
-          name="react-select-chip"
-          inputProps={{
-            classes,
-            multi: true,
-            instanceId: 'react-select-chip',
-            id: 'react-select-chip',
-            simpleValue: true,
-            options: suggestions,
-          }}
-        />
-        <TextField
-          fullWidth
-          value={this.state.multiLabel}
-          onChange={this.handleChange('multiLabel')}
-          placeholder="Select multiple countries"
-          name="react-select-chip-label"
-          label="With label"
-          InputLabelProps={{
-            shrink: true,
-          }}
-          InputProps={{
-            inputComponent: SelectWrapped,
-            inputProps: {
-              classes,
-              multi: true,
-              instanceId: 'react-select-chip-label',
-              id: 'react-select-chip-label',
-              simpleValue: true,
-              options: suggestions,
-            },
-          }}
-        />
+        <NoSSR>
+          <Select
+            classes={classes}
+            options={suggestions}
+            components={components}
+            value={this.state.single}
+            onChange={this.handleChange('single')}
+            placeholder="Search a country (start with a)"
+          />
+          <Select
+            classes={classes}
+            options={suggestions}
+            components={components}
+            value={this.state.multi}
+            onChange={this.handleChange('multi')}
+            placeholder="Select multiple countries"
+            isMulti
+          />
+        </NoSSR>
       </div>
     );
   }
diff --git a/docs/src/pages/demos/autocomplete/autocomplete.md b/docs/src/pages/demos/autocomplete/autocomplete.md
index 4ca7aa163b1fa8..d16f3fdbce4a19 100644
--- a/docs/src/pages/demos/autocomplete/autocomplete.md
+++ b/docs/src/pages/demos/autocomplete/autocomplete.md
@@ -7,22 +7,6 @@ components: TextField, Paper, MenuItem, Popper
 
 <p class="description">The autocomplete is a normal text input enhanced by a panel of suggested options.</p>
 
-Material-UI doesn't provide any high-level API for solving this problem.
-We encourage people relying on the solutions the React community has built.
-
-## downshift
-
-In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift).
-
-{{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}}
-
-## react-autosuggest
-
-In the following example, we demonstrate how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest).
-It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic.
-
-{{"demo": "pages/demos/autocomplete/IntegrationAutosuggest.js"}}
-
 ## react-select
 
 In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select).
diff --git a/package.json b/package.json
index aae5134121cfad..eca406dd046c1e 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "react-redux": "^5.0.6",
     "react-router": "^4.2.0",
     "react-router-dom": "^4.2.2",
-    "react-select": "^1.2.1",
+    "react-select": "^2.0.0",
     "react-swipeable-views": "^0.12.10",
     "react-test-renderer": "^16.1.1",
     "react-text-mask": "^5.0.2",
diff --git a/yarn.lock b/yarn.lock
index afb51861256bd4..800ec4d41b7a14 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1018,6 +1018,46 @@
     lodash "^4.17.5"
     to-fast-properties "^2.0.0"
 
+"@emotion/babel-utils@^0.6.4":
+  version "0.6.7"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-utils/-/babel-utils-0.6.7.tgz#273910399321f91f9023d05222f6a75887ece42d"
+  dependencies:
+    "@emotion/hash" "^0.6.5"
+    "@emotion/memoize" "^0.6.5"
+    "@emotion/serialize" "^0.8.5"
+    convert-source-map "^1.5.1"
+    find-root "^1.1.0"
+    source-map "^0.7.2"
+
+"@emotion/hash@^0.6.2", "@emotion/hash@^0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.5.tgz#097729b84a5164f71f9acd2570ecfd1354d7b360"
+
+"@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.5.tgz#f868c314b889e7c3d84868a1d1cc323fbb40ca86"
+
+"@emotion/serialize@^0.8.5":
+  version "0.8.5"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.8.5.tgz#169a1f7acbc18b3bc84f83d1ffddd39335c1539b"
+  dependencies:
+    "@emotion/hash" "^0.6.5"
+    "@emotion/memoize" "^0.6.5"
+    "@emotion/unitless" "^0.6.5"
+    "@emotion/utils" "^0.7.3"
+
+"@emotion/stylis@^0.6.10":
+  version "0.6.12"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.6.12.tgz#3fb58220e0fc9e380bcabbb3edde396ddc1dfe6e"
+
+"@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.5":
+  version "0.6.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.5.tgz#6a397794dc78ca7df4bf68893061709590a7ec81"
+
+"@emotion/utils@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.7.3.tgz#4240c5eee8af86843452af7497ac2808be04a77d"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1677,7 +1717,7 @@ babel-core@7.0.0-bridge.0:
   version "7.0.0-bridge.0"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
 
-babel-core@^6.26.0:
+babel-core@^6.26.0, babel-core@^6.26.3:
   version "6.26.3"
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-6.26.3.tgz#b2e2f09e342d0f0c88e2f02e067794125e75c207"
   dependencies:
@@ -1872,6 +1912,24 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-emotion@^9.2.6:
+  version "9.2.6"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-9.2.6.tgz#992d48f316c20610c28a95ae90e6bd193014eec5"
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.51"
+    "@emotion/babel-utils" "^0.6.4"
+    "@emotion/hash" "^0.6.2"
+    "@emotion/memoize" "^0.6.1"
+    "@emotion/stylis" "^0.6.10"
+    babel-core "^6.26.3"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    find-root "^1.1.0"
+    mkdirp "^0.5.1"
+    source-map "^0.5.7"
+    touch "^1.0.0"
+
 babel-plugin-istanbul@^4.1.5:
   version "4.1.6"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-4.1.6.tgz#36c59b2192efce81c5b378321b74175add1c9a45"
@@ -1881,7 +1939,7 @@ babel-plugin-istanbul@^4.1.5:
     istanbul-lib-instrument "^1.10.1"
     test-exclude "^4.2.1"
 
-babel-plugin-macros@^2.2.2:
+babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.2.2:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.3.0.tgz#1538e6339cbcbf093f334dc2f10f5f53043e3fda"
   dependencies:
@@ -1948,7 +2006,7 @@ babel-plugin-syntax-flow@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
 
-babel-plugin-syntax-jsx@6.18.0:
+babel-plugin-syntax-jsx@6.18.0, babel-plugin-syntax-jsx@^6.18.0:
   version "6.18.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
 
@@ -2970,7 +3028,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.4, classnames@^2.2.5:
+classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
 
@@ -3196,7 +3254,7 @@ content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
 
-convert-source-map@1.5.1, convert-source-map@^1.1.0, convert-source-map@^1.5.1:
+convert-source-map@1.5.1, convert-source-map@^1.1.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.5.1.tgz#b8278097b9bc229365de5c62cf5fcaed8b5599e5"
 
@@ -3272,6 +3330,18 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
+create-emotion@^9.2.6:
+  version "9.2.6"
+  resolved "https://registry.yarnpkg.com/create-emotion/-/create-emotion-9.2.6.tgz#f64cf1c64cf82fe7d22725d1d77498ddd2d39edb"
+  dependencies:
+    "@emotion/hash" "^0.6.2"
+    "@emotion/memoize" "^0.6.1"
+    "@emotion/stylis" "^0.6.10"
+    "@emotion/unitless" "^0.6.2"
+    csstype "^2.5.2"
+    stylis "^3.5.0"
+    stylis-rule-sheet "^0.0.10"
+
 create-error-class@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/create-error-class/-/create-error-class-3.0.2.tgz#06be7abef947a3f14a30fd610671d401bca8b7b6"
@@ -3877,6 +3947,13 @@ emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
+emotion@^9.1.2:
+  version "9.2.6"
+  resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.6.tgz#48517515e769bca6d8f7ff18425a7f133b010f22"
+  dependencies:
+    babel-plugin-emotion "^9.2.6"
+    create-emotion "^9.2.6"
+
 encodeurl@~1.0.1, encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
@@ -6826,6 +6903,10 @@ mem@^1.1.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+memoize-one@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.0.0.tgz#fc5e2f1427a216676a62ec652cf7398cfad123db"
+
 memory-fs@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.2.0.tgz#f2bb25368bc121e391c2520de92969caee0a0290"
@@ -8360,7 +8441,7 @@ react-event-listener@^0.6.0:
     prop-types "^15.6.0"
     warning "^4.0.1"
 
-react-input-autosize@^2.1.2:
+react-input-autosize@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8"
   dependencies:
@@ -8441,13 +8522,17 @@ react-router@^4.2.0, react-router@^4.3.1:
     prop-types "^15.6.1"
     warning "^4.0.1"
 
-react-select@^1.2.1:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.3.0.tgz#1828ad5bf7f3e42a835c7e2d8cb13b5c20714876"
+react-select@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.0.0.tgz#7e7ba31eff360b37ffc52b343a720f4248bd9b3b"
   dependencies:
-    classnames "^2.2.4"
-    prop-types "^15.5.8"
-    react-input-autosize "^2.1.2"
+    classnames "^2.2.5"
+    emotion "^9.1.2"
+    memoize-one "^4.0.0"
+    prop-types "^15.6.0"
+    raf "^3.4.0"
+    react-input-autosize "^2.2.1"
+    react-transition-group "^2.2.1"
 
 react-swipeable-views-core@^0.12.14:
   version "0.12.14"
@@ -9510,6 +9595,10 @@ source-map@^0.4.4:
   dependencies:
     amdefine ">=0.0.4"
 
+source-map@^0.7.2:
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
+
 spawn-wrap@^1.4.2:
   version "1.4.2"
   resolved "https://registry.yarnpkg.com/spawn-wrap/-/spawn-wrap-1.4.2.tgz#cff58e73a8224617b6561abdc32586ea0c82248c"
@@ -9756,10 +9845,18 @@ stylis-rule-sheet@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.8.tgz#b0d0a126c945b1f3047447a3aae0647013e8d166"
 
+stylis-rule-sheet@^0.0.10:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
+
 stylis@3.4.10:
   version "3.4.10"
   resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.4.10.tgz#a135cab4b9ff208e327fbb5a6fde3fa991c638ee"
 
+stylis@^3.5.0:
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.3.tgz#99fdc46afba6af4deff570825994181a5e6ce546"
+
 supports-color@5.4.0, supports-color@^5.3.0, supports-color@^5.4.0:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.4.0.tgz#1c6b337402c2137605efe19f10fec390f6faab54"
@@ -10015,6 +10112,12 @@ touch@3.1.0:
   dependencies:
     nopt "~1.0.10"
 
+touch@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/touch/-/touch-1.0.0.tgz#449cbe2dbae5a8c8038e30d71fa0ff464947c4de"
+  dependencies:
+    nopt "~1.0.10"
+
 tough-cookie@>=2.3.3, tough-cookie@^2.3.3:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.4.3.tgz#53f36da3f47783b0925afa06ff9f3b165280f781"