chore(devui): upgrade react-select (#628)

* upgrade react-select

* changes

* work

* stash

* Fix

* fix test

packages/devui/package.json

@@ -66,7 +66,7 @@
     "react-icons": "^3.10.0",
     "react-is": "^16.13.1",
     "react-jsonschema-form": "^1.8.1",
-    "react-select": "^1.3.0",
+    "react-select": "^3.1.0",
     "redux-devtools-themes": "^1.0.0",
     "simple-element-resize-detector": "^1.3.0",
     "styled-components": "^5.1.1"

packages/devui/src/Select/Select.js

@@ -1,37 +1,53 @@
 import React, { PureComponent, Component } from 'react';
 import PropTypes from 'prop-types';
 import ReactSelect from 'react-select';
-import createStyledComponent from '../utils/createStyledComponent';
+import createThemedComponent from '../utils/createThemedComponent';
-import styles from './styles';
-
-const SelectContainer = createStyledComponent(styles, ReactSelect);
 
 /**
- * Wrapper around [React Select](https://github.com/JedWatson/react-select) with themes and new props like `openOuterUp` and `menuMaxHeight`.
+ * Wrapper around [React Select](https://github.com/JedWatson/react-select).
  */
-export default class Select extends (PureComponent || Component) {
+class Select extends (PureComponent || Component) {
   render() {
-    return <SelectContainer {...this.props} />;
+    return (
+      <ReactSelect
+        {...this.props}
+        theme={(theme) => ({
+          ...theme,
+          borderRadius: this.props.theme.inputBorderRadius,
+          colors: {
+            ...theme.colors,
+
+            primary: this.props.theme.base05,
+            primary50: this.props.theme.base03,
+            primary25: this.props.theme.base01,
+
+            dangerLight: this.props.theme.base03,
+            danger: this.props.theme.base07,
+
+            neutral0: this.props.theme.base00,
+            neutral5: this.props.theme.base01,
+            neutral10: this.props.theme.base02,
+            neutral20: this.props.theme.base03,
+            neutral30: this.props.theme.base04,
+            neutral40: this.props.theme.base05,
+            neutral60: this.props.theme.base06,
+            neutral80: this.props.theme.base07,
+          },
+        })}
+      />
+    );
   }
 }
 
 Select.propTypes = {
-  autosize: PropTypes.bool, // whether to enable autosizing or not
+  isClearable: PropTypes.bool, // should it be possible to reset value
-  clearable: PropTypes.bool, // should it be possible to reset value
+  isDisabled: PropTypes.bool, // whether the Select is disabled or not
-  disabled: PropTypes.bool, // whether the Select is disabled or not
   isLoading: PropTypes.bool, // whether the Select is loading externally or not
-  menuMaxHeight: PropTypes.number, // maximum css height for the opened menu of options
+  maxMenuHeight: PropTypes.number, // maximum css height for the opened menu of options
-  multi: PropTypes.bool, // multi-value input
+  isMulti: PropTypes.bool, // multi-value input
-  searchable: PropTypes.bool, // whether to enable searching feature or not
+  isSearchable: PropTypes.bool, // whether to enable searching feature or not
-  simpleValue: PropTypes.bool, // pass the value with label to onChange
   value: PropTypes.any, // initial field value
-  valueKey: PropTypes.string, // path of the label value in option objects
+  menuPlacement: PropTypes.oneOf(['auto', 'bottom', 'top']), // value to control the opening direction
-  openOuterUp: PropTypes.bool, // value to control the opening direction
 };
 
-Select.defaultProps = {
+export default createThemedComponent(Select);
-  autosize: true,
-  clearable: false,
-  simpleValue: true,
-  menuMaxHeight: 200,
-};

packages/devui/src/Select/Select.stories.js

@@ -20,25 +20,29 @@ export default {
   component: Select,
 };
 
-const Template = (args) => (
+const Template = ({ value, ...args }) => (
   <Container>
-    <Select options={options} {...args} />
+    <Select
+      options={options}
+      value={options.filter((option) => option.value === value)}
+      {...args}
+    />
   </Container>
 );
 
 export const Default = Template.bind({});
 Default.args = {
   value: 'one',
-  menuMaxHeight: 200,
+  maxMenuHeight: 300,
-  autosize: false,
+  isClearable: false,
-  clearable: false,
+  isDisabled: false,
-  disabled: false,
   isLoading: false,
-  multi: false,
+  isMulti: false,
-  searchable: true,
+  isSearchable: true,
-  openOuterUp: false,
+  menuPlacement: 'bottom',
 };
 Default.argTypes = {
-  simpleValue: { control: { disable: true } },
+  onChange: {
-  valueKey: { control: { disable: true } },
+    action: 'selected',
+  },
 };

packages/devui/src/Select/styles/index.js

@@ -1,361 +0,0 @@
-import { css } from 'styled-components';
-import { fadeIn, spinner } from '../../utils/animations';
-
-export default ({ theme, openOuterUp, menuMaxHeight }) => css`
-  &.Select {
-    position: relative;
-
-    &,
-    & div,
-    & input,
-    & span {
-      box-sizing: border-box;
-    }
-
-    &.is-disabled > .Select-control {
-      background-color: ${theme.base02};
-
-      &:hover {
-        box-shadow: none;
-      }
-    }
-
-    &.is-disabled .Select-arrow-zone {
-      cursor: default;
-      pointer-events: none;
-    }
-  }
-
-  .Select-control {
-    background-color: ${theme.base00};
-    border-color: ${theme.inputBorderColor};
-    border-radius: ${theme.inputBorderRadius}px;
-    border-style: solid;
-    border-width: ${theme.inputBorderWidth}px;
-    color: ${theme.base07};
-    cursor: default;
-    display: table;
-    border-spacing: 0;
-    border-collapse: separate;
-    height: ${theme.inputHeight}px;
-    outline: none;
-    overflow: hidden;
-    position: relative;
-    width: 100%;
-
-    &:hover {
-      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
-    }
-
-    .Select-input:focus {
-      outline: none;
-    }
-  }
-
-  &.is-searchable {
-    &.is-open > .Select-control {
-      cursor: text;
-    }
-  }
-
-  &.is-open > .Select-control {
-    border-radius: ${openOuterUp
-      ? `0 0 ${theme.inputBorderRadius}px ${theme.inputBorderRadius}px`
-      : `${theme.inputBorderRadius}px ${theme.inputBorderRadius}px 0 0`};
-  }
-
-  &.is-searchable {
-    &.is-focused:not(.is-open) > .Select-control {
-      cursor: text;
-    }
-  }
-
-  &.is-focused > .Select-control {
-    ${theme.inputFocusedStyle}
-  }
-
-  .Select-placeholder,
-  &.Select--single > .Select-control .Select-value {
-    bottom: 0;
-    color: ${theme.base03};
-    left: 0;
-    line-height: ${theme.inputInternalHeight}px;
-    padding: 0 ${theme.inputPadding}px;
-    position: absolute;
-    right: 0;
-    top: 0;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  &.has-value.Select--single > .Select-control .Select-value,
-  &.has-value.is-pseudo-focused.Select--single > .Select-control .Select-value {
-    .Select-value-label {
-      color: ${theme.base07};
-    }
-
-    a.Select-value-label {
-      cursor: pointer;
-      text-decoration: none;
-
-      &:hover,
-      &:focus {
-        color: ${theme.base0D};
-        outline: none;
-        text-decoration: underline;
-      }
-    }
-  }
-
-  .Select-input {
-    height: ${theme.inputInternalHeight}px;
-    padding-left: ${theme.inputPadding}px;
-    padding-right: ${theme.inputPadding}px;
-    vertical-align: middle;
-
-    > input {
-      color: ${theme.base07};
-      background: none transparent;
-      border: 0 none;
-      box-shadow: none;
-      width: 100%;
-      cursor: default;
-      display: inline-block;
-      font-family: inherit;
-      font-size: inherit;
-      margin: 0;
-      outline: none;
-      line-height: 14px;
-      padding: ${(theme.inputInternalHeight - 14) / 2 - 2}px 0;
-      -webkit-appearance: none;
-
-      .is-focused & {
-        cursor: text;
-      }
-    }
-  }
-
-  &.has-value.is-pseudo-focused .Select-input {
-    opacity: 0;
-  }
-
-  .Select-control:not(.is-searchable) > .Select-input {
-    outline: none;
-  }
-
-  .Select-loading-zone {
-    cursor: pointer;
-    display: table-cell;
-    position: relative;
-    text-align: center;
-    vertical-align: middle;
-    width: ${theme.spinnerSize}px;
-  }
-
-  .Select-loading {
-    ${spinner(theme)}
-    vertical-align: middle;
-  }
-
-  .Select-clear-zone {
-    animation: ${fadeIn} 200ms;
-    color: ${theme.base03};
-    cursor: pointer;
-    display: table-cell;
-    position: relative;
-    text-align: center;
-    vertical-align: middle;
-
-    &:hover {
-      color: #d0021b;
-    }
-  }
-
-  .Select-clear {
-    display: inline-block;
-    font-size: ${Math.floor(theme.inputHeight / 2)}px;
-    line-height: 1px;
-  }
-
-  .Select-clear-zone,
-  .Select--multi .Select-clear-zone {
-    width: ${theme.inputInternalHeight / 2}px;
-  }
-
-  .Select--multi .Select-multi-value-wrapper {
-    display: inline-block;
-  }
-
-  &.Select .Select-aria-only {
-    display: inline-block;
-    position: absolute;
-    height: 1px;
-    width: 1px;
-    margin: -1px;
-    clip: rect(0, 0, 0, 0);
-    overflow: hidden;
-  }
-
-  .Select-arrow-zone {
-    cursor: pointer;
-    display: table-cell;
-    position: relative;
-    text-align: center;
-    vertical-align: middle;
-    width: ${theme.selectArrowWidth * 5}px;
-    padding-right: ${theme.selectArrowWidth}px;
-  }
-
-  .Select-arrow {
-    border-color: ${theme.base03} transparent transparent;
-    border-style: solid;
-    border-width: ${theme.selectArrowWidth}px ${theme.selectArrowWidth}px
-      ${theme.selectArrowWidth / 2}px;
-    display: inline-block;
-    height: 0;
-    width: 0;
-  }
-
-  .is-open .Select-arrow,
-  .Select-arrow-zone:hover > .Select-arrow {
-    border-top-color: ${theme.base04};
-  }
-
-  .Select-menu-outer {
-    border: 1px solid ${theme.base02};
-    box-shadow: 0 ${openOuterUp ? '-1px' : '1px'} 0 rgba(0, 0, 0, 0.06);
-    box-sizing: border-box;
-    /* stylelint-disable declaration-empty-line-before */
-    ${openOuterUp ? 'margin-bottom' : 'margin-top'}: -1px;
-    /* stylelint-enable */
-    max-height: ${menuMaxHeight}px;
-    position: absolute;
-    top: auto;
-    left: 0;
-    bottom: ${openOuterUp ? '100%' : 'auto'};
-    width: 100%;
-    min-width: 70px;
-    z-index: 1000;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .Select-menu {
-    max-height: ${menuMaxHeight - 2}px;
-    overflow-y: auto;
-  }
-
-  .Select-option {
-    box-sizing: border-box;
-    background-color: ${theme.base00};
-    color: ${theme.base07};
-    cursor: pointer;
-    display: block;
-    padding: ${theme.inputHeight / 3}px;
-    line-height: ${theme.inputInternalHeight / 2}px;
-
-    &.is-selected {
-      background-color: ${theme.base01};
-      color: ${theme.base07};
-    }
-
-    &.is-focused {
-      background-color: ${theme.base02};
-      color: ${theme.base07};
-    }
-
-    &.is-disabled {
-      color: ${theme.base05};
-      cursor: default;
-    }
-  }
-
-  .Select-noresults {
-    box-sizing: border-box;
-    color: ${theme.base06};
-    background-color: ${theme.base00};
-    cursor: default;
-    display: block;
-    padding: ${theme.inputPadding}px;
-  }
-
-  &.Select--multi {
-    .Select-input {
-      display: inline-block;
-      vertical-align: middle;
-      margin-left: ${theme.inputPadding}px;
-      padding: 0;
-    }
-
-    &.has-value .Select-input {
-      margin-left: ${theme.selectArrowWidth}px;
-    }
-
-    .Select-value {
-      background-color: ${theme.base00};
-      border-radius: ${theme.inputBorderRadius}px;
-      border: 1px solid ${theme.base02};
-      color: ${theme.base07};
-      display: inline-block;
-      font-size: 0.9em;
-      margin-left: ${theme.inputPadding / 2}px;
-      margin-top: 0;
-      vertical-align: middle;
-    }
-
-    .Select-value-icon,
-    .Select-value-label {
-      display: inline-block;
-      vertical-align: middle;
-    }
-
-    .Select-value-label {
-      border-bottom-right-radius: ${theme.inputBorderRadius}px;
-      border-top-right-radius: ${theme.inputBorderRadius}px;
-      cursor: default;
-      padding: ${Math.floor(theme.inputPadding / 4)}px
-        ${Math.floor(theme.inputPadding / 2)}px;
-    }
-
-    a.Select-value-label {
-      color: ${theme.base07};
-      cursor: pointer;
-      text-decoration: none;
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    .Select-value-icon {
-      cursor: pointer;
-      border-bottom-left-radius: ${theme.inputBorderRadius}px;
-      border-top-left-radius: ${theme.inputBorderRadius}px;
-      border-right: 1px solid ${theme.base02};
-      padding: 0px ${Math.floor(theme.inputPadding / 2)}px;
-
-      &:hover,
-      &:focus {
-        background-color: ${theme.base03};
-        color: ${theme.base00};
-      }
-
-      &:active {
-        background-color: ${theme.base06};
-      }
-    }
-  }
-
-  &.Select--multi.is-disabled {
-    .Select-value {
-      background-color: ${theme.base00};
-      border: 1px solid ${theme.base01};
-      color: ${theme.base05};
-    }
-
-    .Select-value-icon {
-      cursor: not-allowed;
-    }
-  }
-`;

packages/devui/src/utils/createThemedComponent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import getDefaultTheme from '../themes/default';
+import { withTheme } from 'styled-components';
+
+export default (UnthemedComponent) => (props) =>
+  props.theme && props.theme.type ? (
+    withTheme(<UnthemedComponent {...props} />)
+  ) : (
+    // used outside of container (theme provider)
+    <UnthemedComponent {...props} theme={getDefaultTheme({})} />
+  );
+
+// TODO: memoize it?

packages/devui/tests/Select.test.js

@@ -30,7 +30,9 @@ describe('Select', function () {
 
   it('should select another option', () => {
     const onChange = jest.fn();
-    const wrapper = mount(<Select options={options} onChange={onChange} />);
+    const wrapper = mount(
+      <Select options={options} onInputChange={onChange} />
+    );
 
     const input = wrapper.find('input');
     input.at(0).instance().value = 'two';

packages/devui/tests/__snapshots__/Dialog.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Dialog renders correctly 1`] = `
 <div
-  class="sc-fzoLsD fLVcbf"
+  class="sc-fzozJi bUabZV"
 >
   <div />
   <div>
@@ -45,7 +45,7 @@ exports[`Dialog renders correctly 1`] = `
 
 exports[`Dialog renders modal 1`] = `
 <div
-  class="sc-fzoLsD fLVcbf"
+  class="sc-fzozJi bUabZV"
 >
   <div />
   <div>
@@ -85,7 +85,7 @@ exports[`Dialog renders modal 1`] = `
 
 exports[`Dialog renders with props 1`] = `
 <div
-  class="sc-fzoLsD kdTVQ"
+  class="sc-fzozJi eNoXNi"
   open=""
 >
   <div />

packages/devui/tests/__snapshots__/Editor.test.js.snap

@@ -12,7 +12,7 @@ exports[`Editor renders correctly 1`] = `
 >
   <styled.div>
     <div
-      className="sc-fzpans kykpM"
+      className="sc-fzoLsD fnGkfM"
     />
   </styled.div>
 </Editor>

packages/devui/tests/__snapshots__/Notification.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Notification renders correctly 1`] = `
 <div
-  class="sc-fznZeY gzHfke"
+  class="sc-fznKkj ibIwiW"
   type="info"
 >
   <span>
@@ -13,7 +13,7 @@ exports[`Notification renders correctly 1`] = `
 
 exports[`Notification renders with props 1`] = `
 <div
-  class="sc-fznZeY gzHfke"
+  class="sc-fznKkj ibIwiW"
   type="error"
 >
   <svg

packages/devui/tests/__snapshots__/SegmentedControl.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`SegmentedControl renders correctly 1`] = `
 <div
-  class="sc-fznKkj jdtBdv"
+  class="sc-fznyAO jQfpYK"
 >
   <button
     data-selected="true"

packages/devui/tests/__snapshots__/Slider.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Slider renders correctly 1`] = `
 <div
-  class="sc-Axmtr coPiXj"
+  class="sc-AxheI ikoHwk"
 >
   <input
     max="100"
@@ -15,7 +15,7 @@ exports[`Slider renders correctly 1`] = `
 
 exports[`Slider renders with props 1`] = `
 <div
-  class="sc-Axmtr dRUqiC"
+  class="sc-AxheI bySZMR"
   disabled=""
 >
   <label>

packages/devui/tests/__snapshots__/Tabs.test.js.snap

@@ -2,10 +2,10 @@
 
 exports[`Tabs renders correctly 1`] = `
 <div
-  class="sc-fznyAO eEQsxY"
+  class="sc-fzplWN iQpDbE"
 >
   <div
-    class="sc-fzplWN dxFeew"
+    class="sc-fzpans gRdChJ"
   >
     <div>
       <button
@@ -30,10 +30,10 @@ exports[`Tabs renders correctly 1`] = `
 
 exports[`Tabs renders tabs without inner components 1`] = `
 <div
-  class="sc-fznyAO eEQsxY"
+  class="sc-fzplWN iQpDbE"
 >
   <div
-    class="sc-fzplWN dxFeew"
+    class="sc-fzpans gRdChJ"
   >
     <div>
       <button
@@ -94,10 +94,10 @@ exports[`Tabs renders tabs without inner components 1`] = `
 
 exports[`Tabs renders with props 1`] = `
 <div
-  class="sc-fznyAO eEQsxY"
+  class="sc-fzplWN iQpDbE"
 >
   <div
-    class="sc-fzplWN dxFeew"
+    class="sc-fzpans gRdChJ"
   >
     <div>
       <button

packages/devui/tests/__snapshots__/Toolbar.test.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Toolbar renders correctly 1`] = `
 <div
-  class="sc-fzokOt kWHFmJ"
+  class="sc-fznZeY bcKxBO"
 >
   <div
     class="sc-AxhUy dkmwYZ"
@@ -14,10 +14,10 @@ exports[`Toolbar renders correctly 1`] = `
     </button>
   </div>
   <div
-    class="sc-fzqBZW bdkKty"
+    class="sc-fzokOt drZiIn"
   />
   <div
-    class="sc-fzqNJr jGNKLq"
+    class="sc-fzqBZW kjCEpb"
   />
   <div
     class="sc-AxhUy dkmwYZ"
@@ -33,6 +33,6 @@ exports[`Toolbar renders correctly 1`] = `
 
 exports[`Toolbar renders with props 1`] = `
 <div
-  class="sc-fzokOt hoHbQE"
+  class="sc-fznZeY csZTMz"
 />
 `;

yarn.lock

@@ -1192,7 +1192,7 @@
     core-js "^2.6.5"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.11.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -1290,7 +1290,7 @@
     global-agent "^2.0.2"
     global-tunnel-ng "^2.7.1"
 
-"@emotion/cache@^10.0.27":
+"@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
   integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
@@ -1300,7 +1300,7 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/core@^10.0.20":
+"@emotion/core@^10.0.20", "@emotion/core@^10.0.9":
   version "10.0.35"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
   integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
@@ -1312,7 +1312,7 @@
     "@emotion/sheet" "0.9.4"
     "@emotion/utils" "0.11.3"
 
-"@emotion/css@^10.0.27":
+"@emotion/css@^10.0.27", "@emotion/css@^10.0.9":
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
   integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
@@ -5858,7 +5858,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.6:
+classnames@^2.2.5, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -11961,6 +11961,11 @@ memfs@^3.1.2:
   dependencies:
     fs-monkey "1.0.1"
 
+memoize-one@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
+  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
+
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -14271,7 +14276,7 @@ react-icons@^3.10.0:
   dependencies:
     camelcase "^5.0.0"
 
-react-input-autosize@^2.1.2:
+react-input-autosize@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.2.tgz#fcaa7020568ec206bc04be36f4eb68e647c4d8c2"
   integrity sha512-jQJgYCA3S0j+cuOwzuCd1OjmBmnZLdqQdiLKRYrsMMzbjUrVDS5RvJUDwJqA7sKuksDuzFtm6hZGKFu7Mjk5aw==
@@ -14378,14 +14383,19 @@ react-router@^5.2.0:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-select@^1.3.0:
+react-select@^3.1.0:
-  version "1.3.0"
+  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.3.0.tgz#1828ad5bf7f3e42a835c7e2d8cb13b5c20714876"
+  resolved "https://registry.yarnpkg.com/react-select/-/react-select-3.1.0.tgz#ab098720b2e9fe275047c993f0d0caf5ded17c27"
-  integrity sha512-g/QAU1HZrzSfxkwMAo/wzi6/ezdWye302RGZevsATec07hI/iSxcpB1hejFIp7V63DJ8mwuign6KmB3VjdlinQ==
+  integrity sha512-wBFVblBH1iuCBprtpyGtd1dGMadsG36W5/t2Aj8OE6WbByDg5jIFyT7X5gT+l0qmT5TqWhxX+VsKJvCEl2uL9g==
   dependencies:
-    classnames "^2.2.4"
+    "@babel/runtime" "^7.4.4"
-    prop-types "^15.5.8"
+    "@emotion/cache" "^10.0.9"
-    react-input-autosize "^2.1.2"
+    "@emotion/core" "^10.0.9"
+    "@emotion/css" "^10.0.9"
+    memoize-one "^5.0.0"
+    prop-types "^15.6.0"
+    react-input-autosize "^2.2.2"
+    react-transition-group "^4.3.0"
 
 react-sizeme@^2.6.7:
   version "2.6.12"
@@ -14427,7 +14437,7 @@ react-textarea-autosize@^8.1.1:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react-transition-group@^4.4.1:
+react-transition-group@^4.3.0, react-transition-group@^4.4.1:
   version "4.4.1"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
   integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==