react-select - npm Package Compare versions

Comparing version 3.2.0 to 4.0.0

animated/dist/react-select.browser.cjs.js

@@ -7,3 +7,2 @@ 'use strict';
 
-var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
@@ -18,12 +17,102 @@ var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var React__default = _interopDefault(React);
-var memoizeOne = _interopDefault(require('memoize-one'));
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
-require('@babel/runtime/helpers/typeof');
-var index$1 = require('../../dist/index-3f7cd5d8.browser.cjs.js');
-require('@emotion/css');
+var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
+var index$1 = require('../../dist/index-6ea0f043.browser.cjs.js');
+var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
+var memoizeOne = _interopDefault(require('memoize-one'));
 var reactTransitionGroup = require('react-transition-group');
 
+var isArray = Array.isArray;
+var keyList = Object.keys;
+var hasProp = Object.prototype.hasOwnProperty;
+
+function equal(a, b) {
+  // fast-deep-equal index.js 2.0.1
+  if (a === b) return true;
+
+  if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
+    var arrA = isArray(a),
+        arrB = isArray(b),
+        i,
+        length,
+        key;
+
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length) return false;
+
+      for (i = length; i-- !== 0;) {
+        if (!equal(a[i], b[i])) return false;
+      }
+
+      return true;
+    }
+
+    if (arrA != arrB) return false;
+    var dateA = a instanceof Date,
+        dateB = b instanceof Date;
+    if (dateA != dateB) return false;
+    if (dateA && dateB) return a.getTime() == b.getTime();
+    var regexpA = a instanceof RegExp,
+        regexpB = b instanceof RegExp;
+    if (regexpA != regexpB) return false;
+    if (regexpA && regexpB) return a.toString() == b.toString();
+    var keys = keyList(a);
+    length = keys.length;
+
+    if (length !== keyList(b).length) {
+      return false;
+    }
+
+    for (i = length; i-- !== 0;) {
+      if (!hasProp.call(b, keys[i])) return false;
+    } // end fast-deep-equal
+    // Custom handling for React
+
+
+    for (i = length; i-- !== 0;) {
+      key = keys[i];
+
+      if (key === '_owner' && a.$$typeof) {
+        // React-specific: avoid traversing React elements' _owner.
+        //  _owner contains circular references
+        // and is not needed when comparing the actual elements (and not their owners)
+        // .$$typeof and ._store on just reasonable markers of a react element
+        continue;
+      } else {
+        // all other properties should be traversed as usual
+        if (!equal(a[key], b[key])) return false;
+      }
+    } // fast-deep-equal index.js 2.0.1
+
+
+    return true;
+  }
+
+  return a !== a && b !== b;
+} // end fast-deep-equal
+
+
+function exportedEqual(a, b) {
+  try {
+    return equal(a, b);
+  } catch (error) {
+    if (error.message && error.message.match(/stack|recursion/i)) {
+      // warn on circular references, don't crash
+      // browsers give this different errors name and messages:
+      // chrome/safari: "RangeError", "Maximum call stack size exceeded"
+      // firefox: "InternalError", too much recursion"
+      // edge: "Error", "Out of stack space"
+      console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
+      return false;
+    } // some other error. we should definitely know about these
+
+
+    throw error;
+  }
+}
+
 // strip transition props off before spreading onto select component
@@ -270,3 +359,3 @@ // note we need to be explicit about innerRef for flow
 var ValueContainer = AnimatedComponents.ValueContainer;
-var index = memoizeOne(makeAnimated, index$1.exportedEqual);
+var index = memoizeOne(makeAnimated, exportedEqual);
 
@@ -273,0 +362,0 @@ exports.Input = Input;

animated/dist/react-select.browser.esm.js

@@ -1,2 +0,1 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _extends from '@babel/runtime/helpers/esm/extends';
@@ -10,12 +9,102 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React, { Component } from 'react';
-import memoizeOne from 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
-import '@babel/runtime/helpers/typeof';
-import { B as exportedEqual, y as defaultComponents } from '../../dist/index-75b02bac.browser.esm.js';
-import '@emotion/css';
+import _typeof from '@babel/runtime/helpers/esm/typeof';
+import { z as defaultComponents } from '../../dist/index-8b64410c.browser.esm.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
+import memoizeOne from 'memoize-one';
 import { Transition, TransitionGroup } from 'react-transition-group';
 
+var isArray = Array.isArray;
+var keyList = Object.keys;
+var hasProp = Object.prototype.hasOwnProperty;
+
+function equal(a, b) {
+  // fast-deep-equal index.js 2.0.1
+  if (a === b) return true;
+
+  if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
+    var arrA = isArray(a),
+        arrB = isArray(b),
+        i,
+        length,
+        key;
+
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length) return false;
+
+      for (i = length; i-- !== 0;) {
+        if (!equal(a[i], b[i])) return false;
+      }
+
+      return true;
+    }
+
+    if (arrA != arrB) return false;
+    var dateA = a instanceof Date,
+        dateB = b instanceof Date;
+    if (dateA != dateB) return false;
+    if (dateA && dateB) return a.getTime() == b.getTime();
+    var regexpA = a instanceof RegExp,
+        regexpB = b instanceof RegExp;
+    if (regexpA != regexpB) return false;
+    if (regexpA && regexpB) return a.toString() == b.toString();
+    var keys = keyList(a);
+    length = keys.length;
+
+    if (length !== keyList(b).length) {
+      return false;
+    }
+
+    for (i = length; i-- !== 0;) {
+      if (!hasProp.call(b, keys[i])) return false;
+    } // end fast-deep-equal
+    // Custom handling for React
+
+
+    for (i = length; i-- !== 0;) {
+      key = keys[i];
+
+      if (key === '_owner' && a.$$typeof) {
+        // React-specific: avoid traversing React elements' _owner.
+        //  _owner contains circular references
+        // and is not needed when comparing the actual elements (and not their owners)
+        // .$$typeof and ._store on just reasonable markers of a react element
+        continue;
+      } else {
+        // all other properties should be traversed as usual
+        if (!equal(a[key], b[key])) return false;
+      }
+    } // fast-deep-equal index.js 2.0.1
+
+
+    return true;
+  }
+
+  return a !== a && b !== b;
+} // end fast-deep-equal
+
+
+function exportedEqual(a, b) {
+  try {
+    return equal(a, b);
+  } catch (error) {
+    if (error.message && error.message.match(/stack|recursion/i)) {
+      // warn on circular references, don't crash
+      // browsers give this different errors name and messages:
+      // chrome/safari: "RangeError", "Maximum call stack size exceeded"
+      // firefox: "InternalError", too much recursion"
+      // edge: "Error", "Out of stack space"
+      console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
+      return false;
+    } // some other error. we should definitely know about these
+
+
+    throw error;
+  }
+}
+
 // strip transition props off before spreading onto select component
@@ -22,0 +111,0 @@ // note we need to be explicit about innerRef for flow

animated/dist/react-select.cjs.dev.js

@@ -7,3 +7,2 @@ 'use strict';
 
-var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
@@ -18,12 +17,102 @@ var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var React__default = _interopDefault(React);
-var memoizeOne = _interopDefault(require('memoize-one'));
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
-require('@babel/runtime/helpers/typeof');
-var index$1 = require('../../dist/index-aee072ef.cjs.dev.js');
-require('@emotion/css');
+var _typeof = _interopDefault(require('@babel/runtime/helpers/typeof'));
+var index$1 = require('../../dist/index-ba786d0c.cjs.dev.js');
+var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
+var memoizeOne = _interopDefault(require('memoize-one'));
 var reactTransitionGroup = require('react-transition-group');
 
+var isArray = Array.isArray;
+var keyList = Object.keys;
+var hasProp = Object.prototype.hasOwnProperty;
+
+function equal(a, b) {
+  // fast-deep-equal index.js 2.0.1
+  if (a === b) return true;
+
+  if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
+    var arrA = isArray(a),
+        arrB = isArray(b),
+        i,
+        length,
+        key;
+
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length) return false;
+
+      for (i = length; i-- !== 0;) {
+        if (!equal(a[i], b[i])) return false;
+      }
+
+      return true;
+    }
+
+    if (arrA != arrB) return false;
+    var dateA = a instanceof Date,
+        dateB = b instanceof Date;
+    if (dateA != dateB) return false;
+    if (dateA && dateB) return a.getTime() == b.getTime();
+    var regexpA = a instanceof RegExp,
+        regexpB = b instanceof RegExp;
+    if (regexpA != regexpB) return false;
+    if (regexpA && regexpB) return a.toString() == b.toString();
+    var keys = keyList(a);
+    length = keys.length;
+
+    if (length !== keyList(b).length) {
+      return false;
+    }
+
+    for (i = length; i-- !== 0;) {
+      if (!hasProp.call(b, keys[i])) return false;
+    } // end fast-deep-equal
+    // Custom handling for React
+
+
+    for (i = length; i-- !== 0;) {
+      key = keys[i];
+
+      if (key === '_owner' && a.$$typeof) {
+        // React-specific: avoid traversing React elements' _owner.
+        //  _owner contains circular references
+        // and is not needed when comparing the actual elements (and not their owners)
+        // .$$typeof and ._store on just reasonable markers of a react element
+        continue;
+      } else {
+        // all other properties should be traversed as usual
+        if (!equal(a[key], b[key])) return false;
+      }
+    } // fast-deep-equal index.js 2.0.1
+
+
+    return true;
+  }
+
+  return a !== a && b !== b;
+} // end fast-deep-equal
+
+
+function exportedEqual(a, b) {
+  try {
+    return equal(a, b);
+  } catch (error) {
+    if (error.message && error.message.match(/stack|recursion/i)) {
+      // warn on circular references, don't crash
+      // browsers give this different errors name and messages:
+      // chrome/safari: "RangeError", "Maximum call stack size exceeded"
+      // firefox: "InternalError", too much recursion"
+      // edge: "Error", "Out of stack space"
+      console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
+      return false;
+    } // some other error. we should definitely know about these
+
+
+    throw error;
+  }
+}
+
 // strip transition props off before spreading onto select component
@@ -270,3 +359,3 @@ // note we need to be explicit about innerRef for flow
 var ValueContainer = AnimatedComponents.ValueContainer;
-var index = memoizeOne(makeAnimated, index$1.exportedEqual);
+var index = memoizeOne(makeAnimated, exportedEqual);
 
@@ -273,0 +362,0 @@ exports.Input = Input;

animated/dist/react-select.cjs.prod.js

@@ -11,12 +11,48 @@ "use strict";
 
-var _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), React = require("react"), React__default = _interopDefault(React), memoizeOne = _interopDefault(require("memoize-one"));
+var _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), React = require("react"), React__default = _interopDefault(React);
 
-require("@emotion/core"), require("react-dom"), require("@babel/runtime/helpers/typeof");
+require("@emotion/react"), require("react-dom");
 
-var index$1 = require("../../dist/index-f91a2068.cjs.prod.js");
+var _typeof = _interopDefault(require("@babel/runtime/helpers/typeof")), index$1 = require("../../dist/index-7d81dbd5.cjs.prod.js"), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-require("@emotion/css"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
-require("react-input-autosize");
+require("@babel/runtime/helpers/taggedTemplateLiteral"), require("react-input-autosize");
 
-var reactTransitionGroup = require("react-transition-group"), AnimatedInput = function(WrappedComponent) {
+var memoizeOne = _interopDefault(require("memoize-one")), reactTransitionGroup = require("react-transition-group"), isArray = Array.isArray, keyList = Object.keys, hasProp = Object.prototype.hasOwnProperty;
+
+function equal(a, b) {
+  if (a === b) return !0;
+  if (a && b && "object" == _typeof(a) && "object" == _typeof(b)) {
+    var i, length, key, arrA = isArray(a), arrB = isArray(b);
+    if (arrA && arrB) {
+      if ((length = a.length) != b.length) return !1;
+      for (i = length; 0 != i--; ) if (!equal(a[i], b[i])) return !1;
+      return !0;
+    }
+    if (arrA != arrB) return !1;
+    var dateA = a instanceof Date, dateB = b instanceof Date;
+    if (dateA != dateB) return !1;
+    if (dateA && dateB) return a.getTime() == b.getTime();
+    var regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
+    if (regexpA != regexpB) return !1;
+    if (regexpA && regexpB) return a.toString() == b.toString();
+    var keys = keyList(a);
+    if ((length = keys.length) !== keyList(b).length) return !1;
+    for (i = length; 0 != i--; ) if (!hasProp.call(b, keys[i])) return !1;
+    for (i = length; 0 != i--; ) if (!("_owner" === (key = keys[i]) && a.$$typeof || equal(a[key], b[key]))) return !1;
+    return !0;
+  }
+  return a != a && b != b;
+}
+
+function exportedEqual(a, b) {
+  try {
+    return equal(a, b);
+  } catch (error) {
+    if (error.message && error.message.match(/stack|recursion/i)) return console.warn("Warning: react-fast-compare does not handle circular references.", error.name, error.message), 
+    !1;
+    throw error;
+  }
+}
+
+var AnimatedInput = function(WrappedComponent) {
   return function(_ref) {
@@ -230,5 +266,5 @@ _ref.in, _ref.onExited, _ref.appear, _ref.enter, _ref.exit;
   }, rest);
-}, AnimatedComponents = makeAnimated(), Input = AnimatedComponents.Input, MultiValue = AnimatedComponents.MultiValue, Placeholder = AnimatedComponents.Placeholder, SingleValue = AnimatedComponents.SingleValue, ValueContainer = AnimatedComponents.ValueContainer, index = memoizeOne(makeAnimated, index$1.exportedEqual);
+}, AnimatedComponents = makeAnimated(), Input = AnimatedComponents.Input, MultiValue = AnimatedComponents.MultiValue, Placeholder = AnimatedComponents.Placeholder, SingleValue = AnimatedComponents.SingleValue, ValueContainer = AnimatedComponents.ValueContainer, index = memoizeOne(makeAnimated, exportedEqual);
 
 exports.Input = Input, exports.MultiValue = MultiValue, exports.Placeholder = Placeholder, 
 exports.SingleValue = SingleValue, exports.ValueContainer = ValueContainer, exports.default = index;

animated/dist/react-select.esm.js

@@ -1,2 +0,1 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _extends from '@babel/runtime/helpers/esm/extends';
@@ -10,12 +9,102 @@ import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import React, { Component } from 'react';
-import memoizeOne from 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
-import '@babel/runtime/helpers/typeof';
-import { B as exportedEqual, y as defaultComponents } from '../../dist/index-fa0d9f94.esm.js';
-import '@emotion/css';
+import _typeof from '@babel/runtime/helpers/esm/typeof';
+import { z as defaultComponents } from '../../dist/index-2af9c02c.esm.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
+import memoizeOne from 'memoize-one';
 import { Transition, TransitionGroup } from 'react-transition-group';
 
+var isArray = Array.isArray;
+var keyList = Object.keys;
+var hasProp = Object.prototype.hasOwnProperty;
+
+function equal(a, b) {
+  // fast-deep-equal index.js 2.0.1
+  if (a === b) return true;
+
+  if (a && b && _typeof(a) == 'object' && _typeof(b) == 'object') {
+    var arrA = isArray(a),
+        arrB = isArray(b),
+        i,
+        length,
+        key;
+
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length) return false;
+
+      for (i = length; i-- !== 0;) {
+        if (!equal(a[i], b[i])) return false;
+      }
+
+      return true;
+    }
+
+    if (arrA != arrB) return false;
+    var dateA = a instanceof Date,
+        dateB = b instanceof Date;
+    if (dateA != dateB) return false;
+    if (dateA && dateB) return a.getTime() == b.getTime();
+    var regexpA = a instanceof RegExp,
+        regexpB = b instanceof RegExp;
+    if (regexpA != regexpB) return false;
+    if (regexpA && regexpB) return a.toString() == b.toString();
+    var keys = keyList(a);
+    length = keys.length;
+
+    if (length !== keyList(b).length) {
+      return false;
+    }
+
+    for (i = length; i-- !== 0;) {
+      if (!hasProp.call(b, keys[i])) return false;
+    } // end fast-deep-equal
+    // Custom handling for React
+
+
+    for (i = length; i-- !== 0;) {
+      key = keys[i];
+
+      if (key === '_owner' && a.$$typeof) {
+        // React-specific: avoid traversing React elements' _owner.
+        //  _owner contains circular references
+        // and is not needed when comparing the actual elements (and not their owners)
+        // .$$typeof and ._store on just reasonable markers of a react element
+        continue;
+      } else {
+        // all other properties should be traversed as usual
+        if (!equal(a[key], b[key])) return false;
+      }
+    } // fast-deep-equal index.js 2.0.1
+
+
+    return true;
+  }
+
+  return a !== a && b !== b;
+} // end fast-deep-equal
+
+
+function exportedEqual(a, b) {
+  try {
+    return equal(a, b);
+  } catch (error) {
+    if (error.message && error.message.match(/stack|recursion/i)) {
+      // warn on circular references, don't crash
+      // browsers give this different errors name and messages:
+      // chrome/safari: "RangeError", "Maximum call stack size exceeded"
+      // firefox: "InternalError", too much recursion"
+      // edge: "Error", "Out of stack space"
+      console.warn('Warning: react-fast-compare does not handle circular references.', error.name, error.message);
+      return false;
+    } // some other error. we should definitely know about these
+
+
+    throw error;
+  }
+}
+
 // strip transition props off before spreading onto select component
@@ -22,0 +111,0 @@ // note we need to be explicit about innerRef for flow

async-creatable/dist/react-select.browser.cjs.js

@@ -5,24 +5,20 @@ 'use strict';
 
-require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/defineProperty');
 require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');
-require('@babel/runtime/helpers/assertThisInitialized');
 require('@babel/runtime/helpers/inherits');
 require('@babel/runtime/helpers/possibleConstructorReturn');
 require('@babel/runtime/helpers/getPrototypeOf');
+require('@babel/runtime/helpers/toConsumableArray');
 require('react');
-require('memoize-one');
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-require('../../dist/index-3f7cd5d8.browser.cjs.js');
-var reactSelect = require('../../dist/Select-059b9809.browser.cjs.js');
-require('@emotion/css');
+require('../../dist/index-6ea0f043.browser.cjs.js');
+var reactSelect = require('../../dist/Select-33619ceb.browser.cjs.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
-var stateManager = require('../../dist/stateManager-8478caa9.browser.cjs.js');
+var stateManager = require('../../dist/stateManager-bd9afbba.browser.cjs.js');
 var reactSelect$1 = require('../../async/dist/react-select.browser.cjs.js');
@@ -29,0 +25,0 @@ var reactSelect$2 = require('../../creatable/dist/react-select.browser.cjs.js');

async-creatable/dist/react-select.browser.esm.js

@@ -1,23 +0,19 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/defineProperty';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import '@babel/runtime/helpers/inherits';
 import '@babel/runtime/helpers/possibleConstructorReturn';
 import '@babel/runtime/helpers/getPrototypeOf';
+import '@babel/runtime/helpers/toConsumableArray';
 import 'react';
-import 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-import '../../dist/index-75b02bac.browser.esm.js';
-import { S as Select } from '../../dist/Select-e1cf49ae.browser.esm.js';
-import '@emotion/css';
+import '../../dist/index-8b64410c.browser.esm.js';
+import { S as Select } from '../../dist/Select-f2976362.browser.esm.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
-import { m as manageState } from '../../dist/stateManager-2f2b6f5b.browser.esm.js';
+import { m as manageState } from '../../dist/stateManager-66a21f68.browser.esm.js';
 import { makeAsyncSelect } from '../../async/dist/react-select.browser.esm.js';
@@ -24,0 +20,0 @@ import { makeCreatableSelect } from '../../creatable/dist/react-select.browser.esm.js';

async-creatable/dist/react-select.cjs.dev.js

@@ -5,24 +5,20 @@ 'use strict';
 
-require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/defineProperty');
 require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');
-require('@babel/runtime/helpers/assertThisInitialized');
 require('@babel/runtime/helpers/inherits');
 require('@babel/runtime/helpers/possibleConstructorReturn');
 require('@babel/runtime/helpers/getPrototypeOf');
+require('@babel/runtime/helpers/toConsumableArray');
 require('react');
-require('memoize-one');
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-require('../../dist/index-aee072ef.cjs.dev.js');
-var reactSelect = require('../../dist/Select-d63d1b1b.cjs.dev.js');
-require('@emotion/css');
+require('../../dist/index-ba786d0c.cjs.dev.js');
+var reactSelect = require('../../dist/Select-49944487.cjs.dev.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
-var stateManager = require('../../dist/stateManager-71df4ad8.cjs.dev.js');
+var stateManager = require('../../dist/stateManager-4a65415d.cjs.dev.js');
 var reactSelect$1 = require('../../async/dist/react-select.cjs.dev.js');
@@ -29,0 +25,0 @@ var reactSelect$2 = require('../../creatable/dist/react-select.cjs.dev.js');

async-creatable/dist/react-select.cjs.prod.js

@@ -5,18 +5,16 @@ "use strict";
   value: !0
-}), require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/extends"), 
-require("@babel/runtime/helpers/slicedToArray"), require("@babel/runtime/helpers/toConsumableArray"), 
-require("@babel/runtime/helpers/defineProperty"), require("@babel/runtime/helpers/classCallCheck"), 
-require("@babel/runtime/helpers/createClass"), require("@babel/runtime/helpers/assertThisInitialized"), 
+}), require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/defineProperty"), 
+require("@babel/runtime/helpers/classCallCheck"), require("@babel/runtime/helpers/createClass"), 
 require("@babel/runtime/helpers/inherits"), require("@babel/runtime/helpers/possibleConstructorReturn"), 
-require("@babel/runtime/helpers/getPrototypeOf"), require("react"), require("memoize-one"), 
-require("@emotion/core"), require("react-dom"), require("@babel/runtime/helpers/typeof"), 
-require("../../dist/index-f91a2068.cjs.prod.js");
+require("@babel/runtime/helpers/getPrototypeOf"), require("@babel/runtime/helpers/toConsumableArray"), 
+require("react"), require("@emotion/react"), require("react-dom"), require("@babel/runtime/helpers/typeof"), 
+require("../../dist/index-7d81dbd5.cjs.prod.js");
 
-var reactSelect = require("../../dist/Select-a783e33f.cjs.prod.js");
+var reactSelect = require("../../dist/Select-d04df9fa.cjs.prod.js");
 
-require("@emotion/css"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
+require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
 require("react-input-autosize");
 
-var stateManager = require("../../dist/stateManager-55f1941f.cjs.prod.js"), reactSelect$1 = require("../../async/dist/react-select.cjs.prod.js"), reactSelect$2 = require("../../creatable/dist/react-select.cjs.prod.js"), SelectCreatable = reactSelect$2.makeCreatableSelect(reactSelect.Select), SelectCreatableState = stateManager.manageState(SelectCreatable), AsyncCreatable = reactSelect$1.makeAsyncSelect(SelectCreatableState);
+var stateManager = require("../../dist/stateManager-cde87a80.cjs.prod.js"), reactSelect$1 = require("../../async/dist/react-select.cjs.prod.js"), reactSelect$2 = require("../../creatable/dist/react-select.cjs.prod.js"), SelectCreatable = reactSelect$2.makeCreatableSelect(reactSelect.Select), SelectCreatableState = stateManager.manageState(SelectCreatable), AsyncCreatable = reactSelect$1.makeAsyncSelect(SelectCreatableState);
 
 exports.default = AsyncCreatable;

async-creatable/dist/react-select.esm.js

@@ -1,23 +0,19 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/defineProperty';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import '@babel/runtime/helpers/inherits';
 import '@babel/runtime/helpers/possibleConstructorReturn';
 import '@babel/runtime/helpers/getPrototypeOf';
+import '@babel/runtime/helpers/toConsumableArray';
 import 'react';
-import 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-import '../../dist/index-fa0d9f94.esm.js';
-import { S as Select } from '../../dist/Select-e132d453.esm.js';
-import '@emotion/css';
+import '../../dist/index-2af9c02c.esm.js';
+import { S as Select } from '../../dist/Select-b2083c8c.esm.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
-import { m as manageState } from '../../dist/stateManager-4518fdaa.esm.js';
+import { m as manageState } from '../../dist/stateManager-66a89b0e.esm.js';
 import { makeAsyncSelect } from '../../async/dist/react-select.esm.js';
@@ -24,0 +20,0 @@ import { makeCreatableSelect } from '../../creatable/dist/react-select.esm.js';

async/dist/react-select.browser.cjs.js

@@ -7,26 +7,26 @@ 'use strict';
 
-var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@babel/runtime/helpers/defineProperty');
+var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-require('@babel/runtime/helpers/assertThisInitialized');
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
+require('@babel/runtime/helpers/toConsumableArray');
 var React = require('react');
 var React__default = _interopDefault(React);
-require('memoize-one');
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-var index$1 = require('../../dist/index-3f7cd5d8.browser.cjs.js');
-var reactSelect = require('../../dist/Select-059b9809.browser.cjs.js');
-require('@emotion/css');
+var index$1 = require('../../dist/index-6ea0f043.browser.cjs.js');
+var reactSelect = require('../../dist/Select-33619ceb.browser.cjs.js');
+var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
-var stateManager = require('../../dist/stateManager-8478caa9.browser.cjs.js');
+var stateManager = require('../../dist/stateManager-bd9afbba.browser.cjs.js');
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -58,3 +58,2 @@
       _this.mounted = false;
-      _this.optionsCache = {};
 
@@ -82,7 +81,7 @@ _this.handleInputChange = function (newValue, actionMeta) {
 
-        if (cacheOptions && _this.optionsCache[inputValue]) {
+        if (cacheOptions && _this.state.optionsCache[inputValue]) {
           _this.setState({
             inputValue: inputValue,
             loadedInputValue: inputValue,
-            loadedOptions: _this.optionsCache[inputValue],
+            loadedOptions: _this.state.optionsCache[inputValue],
             isLoading: false,
@@ -101,15 +100,13 @@ passEmptyOptions: false
               if (!_this.mounted) return;
-
-              if (options) {
-                _this.optionsCache[inputValue] = options;
-              }
-
               if (request !== _this.lastRequest) return;
               delete _this.lastRequest;
 
-              _this.setState({
-                isLoading: false,
-                loadedInputValue: inputValue,
-                loadedOptions: options || [],
-                passEmptyOptions: false
+              _this.setState(function (state) {
+                return {
+                  isLoading: false,
+                  loadedInputValue: inputValue,
+                  loadedOptions: options || [],
+                  passEmptyOptions: false,
+                  optionsCache: options ? _objectSpread(_objectSpread({}, state.optionsCache), {}, _defineProperty({}, inputValue, options)) : state.optionsCache
+                };
               });
@@ -128,3 +125,6 @@ });
         loadedOptions: [],
-        passEmptyOptions: false
+        passEmptyOptions: false,
+        optionsCache: {},
+        prevDefaultOptions: undefined,
+        prevCacheOptions: undefined
       };
@@ -156,16 +156,2 @@ return _this;
     }, {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        // if the cacheOptions prop changes, clear the cache
-        if (nextProps.cacheOptions !== this.props.cacheOptions) {
-          this.optionsCache = {};
-        }
-
-        if (nextProps.defaultOptions !== this.props.defaultOptions) {
-          this.setState({
-            defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined
-          });
-        }
-      }
-    }, {
       key: "componentWillUnmount",
@@ -225,2 +211,15 @@ value: function componentWillUnmount() {
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, state) {
+        var newCacheOptionsState = props.cacheOptions !== state.prevCacheOptions ? {
+          prevCacheOptions: props.cacheOptions,
+          optionsCache: {}
+        } : {};
+        var newDefaultOptionsState = props.defaultOptions !== state.prevDefaultOptions ? {
+          prevDefaultOptions: props.defaultOptions,
+          defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined
+        } : {};
+        return _objectSpread(_objectSpread({}, newCacheOptionsState), newDefaultOptionsState);
+      }
     }]);
@@ -227,0 +226,0 @@

async/dist/react-select.browser.esm.js

@@ -1,24 +0,24 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _extends from '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@babel/runtime/helpers/defineProperty';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+import '@babel/runtime/helpers/toConsumableArray';
 import React, { Component } from 'react';
-import 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-import { G as handleInputChange } from '../../dist/index-75b02bac.browser.esm.js';
-import { S as Select } from '../../dist/Select-e1cf49ae.browser.esm.js';
-import '@emotion/css';
+import { F as handleInputChange } from '../../dist/index-8b64410c.browser.esm.js';
+import { S as Select } from '../../dist/Select-f2976362.browser.esm.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
-import { m as manageState } from '../../dist/stateManager-2f2b6f5b.browser.esm.js';
+import { m as manageState } from '../../dist/stateManager-66a21f68.browser.esm.js';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -50,3 +50,2 @@
       _this.mounted = false;
-      _this.optionsCache = {};
 
@@ -74,7 +73,7 @@ _this.handleInputChange = function (newValue, actionMeta) {
 
-        if (cacheOptions && _this.optionsCache[inputValue]) {
+        if (cacheOptions && _this.state.optionsCache[inputValue]) {
           _this.setState({
             inputValue: inputValue,
             loadedInputValue: inputValue,
-            loadedOptions: _this.optionsCache[inputValue],
+            loadedOptions: _this.state.optionsCache[inputValue],
             isLoading: false,
@@ -93,15 +92,13 @@ passEmptyOptions: false
               if (!_this.mounted) return;
-
-              if (options) {
-                _this.optionsCache[inputValue] = options;
-              }
-
               if (request !== _this.lastRequest) return;
               delete _this.lastRequest;
 
-              _this.setState({
-                isLoading: false,
-                loadedInputValue: inputValue,
-                loadedOptions: options || [],
-                passEmptyOptions: false
+              _this.setState(function (state) {
+                return {
+                  isLoading: false,
+                  loadedInputValue: inputValue,
+                  loadedOptions: options || [],
+                  passEmptyOptions: false,
+                  optionsCache: options ? _objectSpread(_objectSpread({}, state.optionsCache), {}, _defineProperty({}, inputValue, options)) : state.optionsCache
+                };
               });
@@ -120,3 +117,6 @@ });
         loadedOptions: [],
-        passEmptyOptions: false
+        passEmptyOptions: false,
+        optionsCache: {},
+        prevDefaultOptions: undefined,
+        prevCacheOptions: undefined
       };
@@ -148,16 +148,2 @@ return _this;
     }, {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        // if the cacheOptions prop changes, clear the cache
-        if (nextProps.cacheOptions !== this.props.cacheOptions) {
-          this.optionsCache = {};
-        }
-
-        if (nextProps.defaultOptions !== this.props.defaultOptions) {
-          this.setState({
-            defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined
-          });
-        }
-      }
-    }, {
       key: "componentWillUnmount",
@@ -217,2 +203,15 @@ value: function componentWillUnmount() {
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, state) {
+        var newCacheOptionsState = props.cacheOptions !== state.prevCacheOptions ? {
+          prevCacheOptions: props.cacheOptions,
+          optionsCache: {}
+        } : {};
+        var newDefaultOptionsState = props.defaultOptions !== state.prevDefaultOptions ? {
+          prevDefaultOptions: props.defaultOptions,
+          defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined
+        } : {};
+        return _objectSpread(_objectSpread({}, newCacheOptionsState), newDefaultOptionsState);
+      }
     }]);
@@ -219,0 +218,0 @@

async/dist/react-select.cjs.dev.js

@@ -7,26 +7,26 @@ 'use strict';
 
-var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/toConsumableArray');
-require('@babel/runtime/helpers/defineProperty');
+var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-require('@babel/runtime/helpers/assertThisInitialized');
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
+require('@babel/runtime/helpers/toConsumableArray');
 var React = require('react');
 var React__default = _interopDefault(React);
-require('memoize-one');
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-var index$1 = require('../../dist/index-aee072ef.cjs.dev.js');
-var reactSelect = require('../../dist/Select-d63d1b1b.cjs.dev.js');
-require('@emotion/css');
+var index$1 = require('../../dist/index-ba786d0c.cjs.dev.js');
+var reactSelect = require('../../dist/Select-49944487.cjs.dev.js');
+var _objectWithoutProperties = _interopDefault(require('@babel/runtime/helpers/objectWithoutProperties'));
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
-var stateManager = require('../../dist/stateManager-71df4ad8.cjs.dev.js');
+var stateManager = require('../../dist/stateManager-4a65415d.cjs.dev.js');
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -58,3 +58,2 @@
       _this.mounted = false;
-      _this.optionsCache = {};
 
@@ -82,7 +81,7 @@ _this.handleInputChange = function (newValue, actionMeta) {
 
-        if (cacheOptions && _this.optionsCache[inputValue]) {
+        if (cacheOptions && _this.state.optionsCache[inputValue]) {
           _this.setState({
             inputValue: inputValue,
             loadedInputValue: inputValue,
-            loadedOptions: _this.optionsCache[inputValue],
+            loadedOptions: _this.state.optionsCache[inputValue],
             isLoading: false,
@@ -101,15 +100,13 @@ passEmptyOptions: false
               if (!_this.mounted) return;
-
-              if (options) {
-                _this.optionsCache[inputValue] = options;
-              }
-
               if (request !== _this.lastRequest) return;
               delete _this.lastRequest;
 
-              _this.setState({
-                isLoading: false,
-                loadedInputValue: inputValue,
-                loadedOptions: options || [],
-                passEmptyOptions: false
+              _this.setState(function (state) {
+                return {
+                  isLoading: false,
+                  loadedInputValue: inputValue,
+                  loadedOptions: options || [],
+                  passEmptyOptions: false,
+                  optionsCache: options ? _objectSpread(_objectSpread({}, state.optionsCache), {}, _defineProperty({}, inputValue, options)) : state.optionsCache
+                };
               });
@@ -128,3 +125,6 @@ });
         loadedOptions: [],
-        passEmptyOptions: false
+        passEmptyOptions: false,
+        optionsCache: {},
+        prevDefaultOptions: undefined,
+        prevCacheOptions: undefined
       };
@@ -156,16 +156,2 @@ return _this;
     }, {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        // if the cacheOptions prop changes, clear the cache
-        if (nextProps.cacheOptions !== this.props.cacheOptions) {
-          this.optionsCache = {};
-        }
-
-        if (nextProps.defaultOptions !== this.props.defaultOptions) {
-          this.setState({
-            defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined
-          });
-        }
-      }
-    }, {
       key: "componentWillUnmount",
@@ -225,2 +211,15 @@ value: function componentWillUnmount() {
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, state) {
+        var newCacheOptionsState = props.cacheOptions !== state.prevCacheOptions ? {
+          prevCacheOptions: props.cacheOptions,
+          optionsCache: {}
+        } : {};
+        var newDefaultOptionsState = props.defaultOptions !== state.prevDefaultOptions ? {
+          prevDefaultOptions: props.defaultOptions,
+          defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined
+        } : {};
+        return _objectSpread(_objectSpread({}, newCacheOptionsState), newDefaultOptionsState);
+      }
     }]);
@@ -227,0 +226,0 @@

async/dist/react-select.cjs.prod.js

@@ -11,21 +11,38 @@ "use strict";
 
-var _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties")), _extends = _interopDefault(require("@babel/runtime/helpers/extends"));
+var _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-require("@babel/runtime/helpers/slicedToArray"), require("@babel/runtime/helpers/toConsumableArray"), 
-require("@babel/runtime/helpers/defineProperty");
+require("@babel/runtime/helpers/toConsumableArray");
 
-var _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass"));
+var React = require("react"), React__default = _interopDefault(React);
 
-require("@babel/runtime/helpers/assertThisInitialized");
+require("@emotion/react"), require("react-dom"), require("@babel/runtime/helpers/typeof");
 
-var _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), React = require("react"), React__default = _interopDefault(React);
+var index$1 = require("../../dist/index-7d81dbd5.cjs.prod.js"), reactSelect = require("../../dist/Select-d04df9fa.cjs.prod.js"), _objectWithoutProperties = _interopDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-require("memoize-one"), require("@emotion/core"), require("react-dom"), require("@babel/runtime/helpers/typeof");
+require("@babel/runtime/helpers/taggedTemplateLiteral"), require("react-input-autosize");
 
-var index$1 = require("../../dist/index-f91a2068.cjs.prod.js"), reactSelect = require("../../dist/Select-a783e33f.cjs.prod.js");
+var stateManager = require("../../dist/stateManager-cde87a80.cjs.prod.js");
 
-require("@emotion/css"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
-require("react-input-autosize");
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter((function(sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    }))), keys.push.apply(keys, symbols);
+  }
+  return keys;
+}
 
-var stateManager = require("../../dist/stateManager-55f1941f.cjs.prod.js");
+function _objectSpread(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach((function(key) {
+      _defineProperty(target, key, source[key]);
+    })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach((function(key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    }));
+  }
+  return target;
+}
 
@@ -69,3 +86,3 @@ function _createSuper(Derived) {
       return _classCallCheck(this, Async), (_this = _super.call(this)).select = void 0, 
-      _this.lastRequest = void 0, _this.mounted = !1, _this.optionsCache = {}, _this.handleInputChange = function(newValue, actionMeta) {
+      _this.lastRequest = void 0, _this.mounted = !1, _this.handleInputChange = function(newValue, actionMeta) {
         var _this$props = _this.props, cacheOptions = _this$props.cacheOptions, onInputChange = _this$props.onInputChange, inputValue = index$1.handleInputChange(newValue, actionMeta, onInputChange);
@@ -79,6 +96,6 @@ if (!inputValue) return delete _this.lastRequest, void _this.setState({
         });
-        if (cacheOptions && _this.optionsCache[inputValue]) _this.setState({
+        if (cacheOptions && _this.state.optionsCache[inputValue]) _this.setState({
           inputValue: inputValue,
           loadedInputValue: inputValue,
-          loadedOptions: _this.optionsCache[inputValue],
+          loadedOptions: _this.state.optionsCache[inputValue],
           isLoading: !1,
@@ -94,8 +111,10 @@ passEmptyOptions: !1
             _this.loadOptions(inputValue, (function(options) {
-              _this.mounted && (options && (_this.optionsCache[inputValue] = options), request === _this.lastRequest && (delete _this.lastRequest, 
-              _this.setState({
-                isLoading: !1,
-                loadedInputValue: inputValue,
-                loadedOptions: options || [],
-                passEmptyOptions: !1
+              _this.mounted && request === _this.lastRequest && (delete _this.lastRequest, _this.setState((function(state) {
+                return {
+                  isLoading: !1,
+                  loadedInputValue: inputValue,
+                  loadedOptions: options || [],
+                  passEmptyOptions: !1,
+                  optionsCache: options ? _objectSpread(_objectSpread({}, state.optionsCache), {}, _defineProperty({}, inputValue, options)) : state.optionsCache
+                };
               })));
@@ -111,3 +130,6 @@ }));
         loadedOptions: [],
-        passEmptyOptions: !1
+        passEmptyOptions: !1,
+        optionsCache: {},
+        prevDefaultOptions: void 0,
+        prevCacheOptions: void 0
       }, _this;
@@ -132,10 +154,2 @@ }
     }, {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function(nextProps) {
-        nextProps.cacheOptions !== this.props.cacheOptions && (this.optionsCache = {}), 
-        nextProps.defaultOptions !== this.props.defaultOptions && this.setState({
-          defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : void 0
-        });
-      }
-    }, {
       key: "componentWillUnmount",
@@ -179,2 +193,14 @@ value: function() {
       }
+    } ], [ {
+      key: "getDerivedStateFromProps",
+      value: function(props, state) {
+        var newCacheOptionsState = props.cacheOptions !== state.prevCacheOptions ? {
+          prevCacheOptions: props.cacheOptions,
+          optionsCache: {}
+        } : {}, newDefaultOptionsState = props.defaultOptions !== state.prevDefaultOptions ? {
+          prevDefaultOptions: props.defaultOptions,
+          defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : void 0
+        } : {};
+        return _objectSpread(_objectSpread({}, newCacheOptionsState), newDefaultOptionsState);
+      }
     } ]), Async;
@@ -181,0 +207,0 @@ }(React.Component), _class.defaultProps = defaultProps, _temp;

async/dist/react-select.esm.js

@@ -1,24 +0,24 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _extends from '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '@babel/runtime/helpers/defineProperty';
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+import '@babel/runtime/helpers/toConsumableArray';
 import React, { Component } from 'react';
-import 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-import { G as handleInputChange } from '../../dist/index-fa0d9f94.esm.js';
-import { S as Select } from '../../dist/Select-e132d453.esm.js';
-import '@emotion/css';
+import { F as handleInputChange } from '../../dist/index-2af9c02c.esm.js';
+import { S as Select } from '../../dist/Select-b2083c8c.esm.js';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
-import { m as manageState } from '../../dist/stateManager-4518fdaa.esm.js';
+import { m as manageState } from '../../dist/stateManager-66a89b0e.esm.js';
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -50,3 +50,2 @@
       _this.mounted = false;
-      _this.optionsCache = {};
 
@@ -74,7 +73,7 @@ _this.handleInputChange = function (newValue, actionMeta) {
 
-        if (cacheOptions && _this.optionsCache[inputValue]) {
+        if (cacheOptions && _this.state.optionsCache[inputValue]) {
           _this.setState({
             inputValue: inputValue,
             loadedInputValue: inputValue,
-            loadedOptions: _this.optionsCache[inputValue],
+            loadedOptions: _this.state.optionsCache[inputValue],
             isLoading: false,
@@ -93,15 +92,13 @@ passEmptyOptions: false
               if (!_this.mounted) return;
-
-              if (options) {
-                _this.optionsCache[inputValue] = options;
-              }
-
               if (request !== _this.lastRequest) return;
               delete _this.lastRequest;
 
-              _this.setState({
-                isLoading: false,
-                loadedInputValue: inputValue,
-                loadedOptions: options || [],
-                passEmptyOptions: false
+              _this.setState(function (state) {
+                return {
+                  isLoading: false,
+                  loadedInputValue: inputValue,
+                  loadedOptions: options || [],
+                  passEmptyOptions: false,
+                  optionsCache: options ? _objectSpread(_objectSpread({}, state.optionsCache), {}, _defineProperty({}, inputValue, options)) : state.optionsCache
+                };
               });
@@ -120,3 +117,6 @@ });
         loadedOptions: [],
-        passEmptyOptions: false
+        passEmptyOptions: false,
+        optionsCache: {},
+        prevDefaultOptions: undefined,
+        prevCacheOptions: undefined
       };
@@ -148,16 +148,2 @@ return _this;
     }, {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        // if the cacheOptions prop changes, clear the cache
-        if (nextProps.cacheOptions !== this.props.cacheOptions) {
-          this.optionsCache = {};
-        }
-
-        if (nextProps.defaultOptions !== this.props.defaultOptions) {
-          this.setState({
-            defaultOptions: Array.isArray(nextProps.defaultOptions) ? nextProps.defaultOptions : undefined
-          });
-        }
-      }
-    }, {
       key: "componentWillUnmount",
@@ -217,2 +203,15 @@ value: function componentWillUnmount() {
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, state) {
+        var newCacheOptionsState = props.cacheOptions !== state.prevCacheOptions ? {
+          prevCacheOptions: props.cacheOptions,
+          optionsCache: {}
+        } : {};
+        var newDefaultOptionsState = props.defaultOptions !== state.prevDefaultOptions ? {
+          prevDefaultOptions: props.defaultOptions,
+          defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined
+        } : {};
+        return _objectSpread(_objectSpread({}, newCacheOptionsState), newDefaultOptionsState);
+      }
     }]);
@@ -219,0 +218,0 @@

base/dist/react-select.browser.cjs.js

@@ -5,21 +5,17 @@ 'use strict';
 
-require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/defineProperty');
 require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');
-require('@babel/runtime/helpers/assertThisInitialized');
 require('@babel/runtime/helpers/inherits');
 require('@babel/runtime/helpers/possibleConstructorReturn');
 require('@babel/runtime/helpers/getPrototypeOf');
+require('@babel/runtime/helpers/toConsumableArray');
 require('react');
-require('memoize-one');
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-require('../../dist/index-3f7cd5d8.browser.cjs.js');
-var reactSelect = require('../../dist/Select-059b9809.browser.cjs.js');
-require('@emotion/css');
+require('../../dist/index-6ea0f043.browser.cjs.js');
+var reactSelect = require('../../dist/Select-33619ceb.browser.cjs.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
@@ -26,0 +22,0 @@ require('react-input-autosize');

base/dist/react-select.browser.esm.js

@@ -1,21 +0,17 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/defineProperty';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import '@babel/runtime/helpers/inherits';
 import '@babel/runtime/helpers/possibleConstructorReturn';
 import '@babel/runtime/helpers/getPrototypeOf';
+import '@babel/runtime/helpers/toConsumableArray';
 import 'react';
-import 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-import '../../dist/index-75b02bac.browser.esm.js';
-export { S as default, d as defaultProps } from '../../dist/Select-e1cf49ae.browser.esm.js';
-import '@emotion/css';
+import '../../dist/index-8b64410c.browser.esm.js';
+export { S as default, d as defaultProps } from '../../dist/Select-f2976362.browser.esm.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';

base/dist/react-select.cjs.dev.js

@@ -5,21 +5,17 @@ 'use strict';
 
-require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/defineProperty');
 require('@babel/runtime/helpers/classCallCheck');
 require('@babel/runtime/helpers/createClass');
-require('@babel/runtime/helpers/assertThisInitialized');
 require('@babel/runtime/helpers/inherits');
 require('@babel/runtime/helpers/possibleConstructorReturn');
 require('@babel/runtime/helpers/getPrototypeOf');
+require('@babel/runtime/helpers/toConsumableArray');
 require('react');
-require('memoize-one');
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-require('../../dist/index-aee072ef.cjs.dev.js');
-var reactSelect = require('../../dist/Select-d63d1b1b.cjs.dev.js');
-require('@emotion/css');
+require('../../dist/index-ba786d0c.cjs.dev.js');
+var reactSelect = require('../../dist/Select-49944487.cjs.dev.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
@@ -26,0 +22,0 @@ require('react-input-autosize');

base/dist/react-select.cjs.prod.js

@@ -5,14 +5,12 @@ "use strict";
   value: !0
-}), require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/extends"), 
-require("@babel/runtime/helpers/slicedToArray"), require("@babel/runtime/helpers/toConsumableArray"), 
-require("@babel/runtime/helpers/defineProperty"), require("@babel/runtime/helpers/classCallCheck"), 
-require("@babel/runtime/helpers/createClass"), require("@babel/runtime/helpers/assertThisInitialized"), 
+}), require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/defineProperty"), 
+require("@babel/runtime/helpers/classCallCheck"), require("@babel/runtime/helpers/createClass"), 
 require("@babel/runtime/helpers/inherits"), require("@babel/runtime/helpers/possibleConstructorReturn"), 
-require("@babel/runtime/helpers/getPrototypeOf"), require("react"), require("memoize-one"), 
-require("@emotion/core"), require("react-dom"), require("@babel/runtime/helpers/typeof"), 
-require("../../dist/index-f91a2068.cjs.prod.js");
+require("@babel/runtime/helpers/getPrototypeOf"), require("@babel/runtime/helpers/toConsumableArray"), 
+require("react"), require("@emotion/react"), require("react-dom"), require("@babel/runtime/helpers/typeof"), 
+require("../../dist/index-7d81dbd5.cjs.prod.js");
 
-var reactSelect = require("../../dist/Select-a783e33f.cjs.prod.js");
+var reactSelect = require("../../dist/Select-d04df9fa.cjs.prod.js");
 
-require("@emotion/css"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
+require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
 require("react-input-autosize"), exports.default = reactSelect.Select, exports.defaultProps = reactSelect.defaultProps;

base/dist/react-select.esm.js

@@ -1,21 +0,17 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/defineProperty';
 import '@babel/runtime/helpers/classCallCheck';
 import '@babel/runtime/helpers/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import '@babel/runtime/helpers/inherits';
 import '@babel/runtime/helpers/possibleConstructorReturn';
 import '@babel/runtime/helpers/getPrototypeOf';
+import '@babel/runtime/helpers/toConsumableArray';
 import 'react';
-import 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-import '../../dist/index-fa0d9f94.esm.js';
-export { S as default, d as defaultProps } from '../../dist/Select-e132d453.esm.js';
-import '@emotion/css';
+import '../../dist/index-2af9c02c.esm.js';
+export { S as default, d as defaultProps } from '../../dist/Select-b2083c8c.esm.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';

creatable/dist/react-select.browser.cjs.js

@@ -7,25 +7,21 @@ 'use strict';
 
-require('@babel/runtime/helpers/objectWithoutProperties');
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-require('@babel/runtime/helpers/slicedToArray');
-var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-require('@babel/runtime/helpers/assertThisInitialized');
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var React = require('react');
 var React__default = _interopDefault(React);
-require('memoize-one');
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-var index$1 = require('../../dist/index-3f7cd5d8.browser.cjs.js');
-var reactSelect = require('../../dist/Select-059b9809.browser.cjs.js');
-require('@emotion/css');
+var index$1 = require('../../dist/index-6ea0f043.browser.cjs.js');
+var reactSelect = require('../../dist/Select-33619ceb.browser.cjs.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
-var stateManager = require('../../dist/stateManager-8478caa9.browser.cjs.js');
+var stateManager = require('../../dist/stateManager-bd9afbba.browser.cjs.js');
 
@@ -134,27 +130,2 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
     _createClass(Creatable, [{
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        var allowCreateWhileLoading = nextProps.allowCreateWhileLoading,
-            createOptionPosition = nextProps.createOptionPosition,
-            formatCreateLabel = nextProps.formatCreateLabel,
-            getNewOptionData = nextProps.getNewOptionData,
-            inputValue = nextProps.inputValue,
-            isLoading = nextProps.isLoading,
-            isValidNewOption = nextProps.isValidNewOption,
-            value = nextProps.value;
-        var options = nextProps.options || [];
-        var newOption = this.state.newOption;
-
-        if (isValidNewOption(inputValue, index$1.cleanValue(value), options)) {
-          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
-        } else {
-          newOption = undefined;
-        }
-
-        this.setState({
-          newOption: newOption,
-          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
-        });
-      }
-    }, {
       key: "focus",
@@ -183,2 +154,27 @@ value: function focus() {
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, state) {
+        var allowCreateWhileLoading = props.allowCreateWhileLoading,
+            createOptionPosition = props.createOptionPosition,
+            formatCreateLabel = props.formatCreateLabel,
+            getNewOptionData = props.getNewOptionData,
+            inputValue = props.inputValue,
+            isLoading = props.isLoading,
+            isValidNewOption = props.isValidNewOption,
+            value = props.value;
+        var options = props.options || [];
+        var newOption = state.newOption;
+
+        if (isValidNewOption(inputValue, index$1.cleanValue(value), options)) {
+          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
+        } else {
+          newOption = undefined;
+        }
+
+        return {
+          newOption: newOption,
+          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
+        };
+      }
     }]);
@@ -185,0 +181,0 @@

creatable/dist/react-select.browser.esm.js

@@ -1,23 +0,19 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
 import _extends from '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import React, { Component } from 'react';
-import 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-import { C as cleanValue } from '../../dist/index-75b02bac.browser.esm.js';
-import { S as Select } from '../../dist/Select-e1cf49ae.browser.esm.js';
-import '@emotion/css';
+import { B as cleanValue } from '../../dist/index-8b64410c.browser.esm.js';
+import { S as Select } from '../../dist/Select-f2976362.browser.esm.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
-import { m as manageState } from '../../dist/stateManager-2f2b6f5b.browser.esm.js';
+import { m as manageState } from '../../dist/stateManager-66a21f68.browser.esm.js';
 
@@ -126,27 +122,2 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
     _createClass(Creatable, [{
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        var allowCreateWhileLoading = nextProps.allowCreateWhileLoading,
-            createOptionPosition = nextProps.createOptionPosition,
-            formatCreateLabel = nextProps.formatCreateLabel,
-            getNewOptionData = nextProps.getNewOptionData,
-            inputValue = nextProps.inputValue,
-            isLoading = nextProps.isLoading,
-            isValidNewOption = nextProps.isValidNewOption,
-            value = nextProps.value;
-        var options = nextProps.options || [];
-        var newOption = this.state.newOption;
-
-        if (isValidNewOption(inputValue, cleanValue(value), options)) {
-          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
-        } else {
-          newOption = undefined;
-        }
-
-        this.setState({
-          newOption: newOption,
-          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
-        });
-      }
-    }, {
       key: "focus",
@@ -175,2 +146,27 @@ value: function focus() {
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, state) {
+        var allowCreateWhileLoading = props.allowCreateWhileLoading,
+            createOptionPosition = props.createOptionPosition,
+            formatCreateLabel = props.formatCreateLabel,
+            getNewOptionData = props.getNewOptionData,
+            inputValue = props.inputValue,
+            isLoading = props.isLoading,
+            isValidNewOption = props.isValidNewOption,
+            value = props.value;
+        var options = props.options || [];
+        var newOption = state.newOption;
+
+        if (isValidNewOption(inputValue, cleanValue(value), options)) {
+          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
+        } else {
+          newOption = undefined;
+        }
+
+        return {
+          newOption: newOption,
+          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
+        };
+      }
     }]);
@@ -177,0 +173,0 @@

creatable/dist/react-select.cjs.dev.js

@@ -7,25 +7,21 @@ 'use strict';
 
-require('@babel/runtime/helpers/objectWithoutProperties');
 var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-require('@babel/runtime/helpers/slicedToArray');
-var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var _defineProperty = _interopDefault(require('@babel/runtime/helpers/defineProperty'));
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-require('@babel/runtime/helpers/assertThisInitialized');
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
+var _toConsumableArray = _interopDefault(require('@babel/runtime/helpers/toConsumableArray'));
 var React = require('react');
 var React__default = _interopDefault(React);
-require('memoize-one');
-require('@emotion/core');
+require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-var index$1 = require('../../dist/index-aee072ef.cjs.dev.js');
-var reactSelect = require('../../dist/Select-d63d1b1b.cjs.dev.js');
-require('@emotion/css');
+var index$1 = require('../../dist/index-ba786d0c.cjs.dev.js');
+var reactSelect = require('../../dist/Select-49944487.cjs.dev.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
-var stateManager = require('../../dist/stateManager-71df4ad8.cjs.dev.js');
+var stateManager = require('../../dist/stateManager-4a65415d.cjs.dev.js');
 
@@ -134,27 +130,2 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
     _createClass(Creatable, [{
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        var allowCreateWhileLoading = nextProps.allowCreateWhileLoading,
-            createOptionPosition = nextProps.createOptionPosition,
-            formatCreateLabel = nextProps.formatCreateLabel,
-            getNewOptionData = nextProps.getNewOptionData,
-            inputValue = nextProps.inputValue,
-            isLoading = nextProps.isLoading,
-            isValidNewOption = nextProps.isValidNewOption,
-            value = nextProps.value;
-        var options = nextProps.options || [];
-        var newOption = this.state.newOption;
-
-        if (isValidNewOption(inputValue, index$1.cleanValue(value), options)) {
-          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
-        } else {
-          newOption = undefined;
-        }
-
-        this.setState({
-          newOption: newOption,
-          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
-        });
-      }
-    }, {
       key: "focus",
@@ -183,2 +154,27 @@ value: function focus() {
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, state) {
+        var allowCreateWhileLoading = props.allowCreateWhileLoading,
+            createOptionPosition = props.createOptionPosition,
+            formatCreateLabel = props.formatCreateLabel,
+            getNewOptionData = props.getNewOptionData,
+            inputValue = props.inputValue,
+            isLoading = props.isLoading,
+            isValidNewOption = props.isValidNewOption,
+            value = props.value;
+        var options = props.options || [];
+        var newOption = state.newOption;
+
+        if (isValidNewOption(inputValue, index$1.cleanValue(value), options)) {
+          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
+        } else {
+          newOption = undefined;
+        }
+
+        return {
+          newOption: newOption,
+          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
+        };
+      }
     }]);
@@ -185,0 +181,0 @@

creatable/dist/react-select.cjs.prod.js

@@ -9,22 +9,14 @@ "use strict";
   value: !0
-}), require("@babel/runtime/helpers/objectWithoutProperties");
+});
 
-var _extends = _interopDefault(require("@babel/runtime/helpers/extends"));
+var _extends = _interopDefault(require("@babel/runtime/helpers/extends")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsumableArray")), React = require("react"), React__default = _interopDefault(React);
 
-require("@babel/runtime/helpers/slicedToArray");
+require("@emotion/react"), require("react-dom"), require("@babel/runtime/helpers/typeof");
 
-var _toConsumableArray = _interopDefault(require("@babel/runtime/helpers/toConsumableArray")), _defineProperty = _interopDefault(require("@babel/runtime/helpers/defineProperty")), _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass"));
+var index$1 = require("../../dist/index-7d81dbd5.cjs.prod.js"), reactSelect = require("../../dist/Select-d04df9fa.cjs.prod.js");
 
-require("@babel/runtime/helpers/assertThisInitialized");
-
-var _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), React = require("react"), React__default = _interopDefault(React);
-
-require("memoize-one"), require("@emotion/core"), require("react-dom"), require("@babel/runtime/helpers/typeof");
-
-var index$1 = require("../../dist/index-f91a2068.cjs.prod.js"), reactSelect = require("../../dist/Select-a783e33f.cjs.prod.js");
-
-require("@emotion/css"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
+require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
 require("react-input-autosize");
 
-var stateManager = require("../../dist/stateManager-55f1941f.cjs.prod.js");
+var stateManager = require("../../dist/stateManager-cde87a80.cjs.prod.js");
 
@@ -129,12 +121,2 @@ function _createSuper(Derived) {
     return _createClass(Creatable, [ {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function(nextProps) {
-        var allowCreateWhileLoading = nextProps.allowCreateWhileLoading, createOptionPosition = nextProps.createOptionPosition, formatCreateLabel = nextProps.formatCreateLabel, getNewOptionData = nextProps.getNewOptionData, inputValue = nextProps.inputValue, isLoading = nextProps.isLoading, isValidNewOption = nextProps.isValidNewOption, value = nextProps.value, options = nextProps.options || [], newOption = this.state.newOption;
-        newOption = isValidNewOption(inputValue, index$1.cleanValue(value), options) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : void 0, 
-        this.setState({
-          newOption: newOption,
-          options: !allowCreateWhileLoading && isLoading || !newOption ? options : "first" === createOptionPosition ? [ newOption ].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [ newOption ])
-        });
-      }
-    }, {
       key: "focus",
@@ -161,2 +143,11 @@ value: function() {
       }
+    } ], [ {
+      key: "getDerivedStateFromProps",
+      value: function(props, state) {
+        var allowCreateWhileLoading = props.allowCreateWhileLoading, createOptionPosition = props.createOptionPosition, formatCreateLabel = props.formatCreateLabel, getNewOptionData = props.getNewOptionData, inputValue = props.inputValue, isLoading = props.isLoading, isValidNewOption = props.isValidNewOption, value = props.value, options = props.options || [], newOption = state.newOption;
+        return {
+          newOption: newOption = isValidNewOption(inputValue, index$1.cleanValue(value), options) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : void 0,
+          options: !allowCreateWhileLoading && isLoading || !newOption ? options : "first" === createOptionPosition ? [ newOption ].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [ newOption ])
+        };
+      }
     } ]), Creatable;
@@ -163,0 +154,0 @@ }(React.Component), _class.defaultProps = defaultProps, _temp;

creatable/dist/react-select.esm.js

@@ -1,23 +0,19 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
 import _extends from '@babel/runtime/helpers/esm/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+import _toConsumableArray from '@babel/runtime/helpers/esm/toConsumableArray';
 import React, { Component } from 'react';
-import 'memoize-one';
-import '@emotion/core';
+import '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-import { C as cleanValue } from '../../dist/index-fa0d9f94.esm.js';
-import { S as Select } from '../../dist/Select-e132d453.esm.js';
-import '@emotion/css';
+import { B as cleanValue } from '../../dist/index-2af9c02c.esm.js';
+import { S as Select } from '../../dist/Select-b2083c8c.esm.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
-import { m as manageState } from '../../dist/stateManager-4518fdaa.esm.js';
+import { m as manageState } from '../../dist/stateManager-66a89b0e.esm.js';
 
@@ -126,27 +122,2 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
     _createClass(Creatable, [{
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        var allowCreateWhileLoading = nextProps.allowCreateWhileLoading,
-            createOptionPosition = nextProps.createOptionPosition,
-            formatCreateLabel = nextProps.formatCreateLabel,
-            getNewOptionData = nextProps.getNewOptionData,
-            inputValue = nextProps.inputValue,
-            isLoading = nextProps.isLoading,
-            isValidNewOption = nextProps.isValidNewOption,
-            value = nextProps.value;
-        var options = nextProps.options || [];
-        var newOption = this.state.newOption;
-
-        if (isValidNewOption(inputValue, cleanValue(value), options)) {
-          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
-        } else {
-          newOption = undefined;
-        }
-
-        this.setState({
-          newOption: newOption,
-          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
-        });
-      }
-    }, {
       key: "focus",
@@ -175,2 +146,27 @@ value: function focus() {
       }
+    }], [{
+      key: "getDerivedStateFromProps",
+      value: function getDerivedStateFromProps(props, state) {
+        var allowCreateWhileLoading = props.allowCreateWhileLoading,
+            createOptionPosition = props.createOptionPosition,
+            formatCreateLabel = props.formatCreateLabel,
+            getNewOptionData = props.getNewOptionData,
+            inputValue = props.inputValue,
+            isLoading = props.isLoading,
+            isValidNewOption = props.isValidNewOption,
+            value = props.value;
+        var options = props.options || [];
+        var newOption = state.newOption;
+
+        if (isValidNewOption(inputValue, cleanValue(value), options)) {
+          newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
+        } else {
+          newOption = undefined;
+        }
+
+        return {
+          newOption: newOption,
+          options: (allowCreateWhileLoading || !isLoading) && newOption ? createOptionPosition === 'first' ? [newOption].concat(_toConsumableArray(options)) : [].concat(_toConsumableArray(options), [newOption]) : options
+        };
+      }
     }]);
@@ -177,0 +173,0 @@

dist/react-select.browser.cjs.js

@@ -7,26 +7,23 @@ 'use strict';
 
-require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/defineProperty');
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-require('@babel/runtime/helpers/assertThisInitialized');
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
+require('@babel/runtime/helpers/toConsumableArray');
 var React = require('react');
 var React__default = _interopDefault(React);
-var memoizeOne = _interopDefault(require('memoize-one'));
-var core = require('@emotion/core');
+var react = require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-var index$1 = require('./index-3f7cd5d8.browser.cjs.js');
-var reactSelect = require('./Select-059b9809.browser.cjs.js');
-require('@emotion/css');
+var index$1 = require('./index-6ea0f043.browser.cjs.js');
+var reactSelect = require('./Select-33619ceb.browser.cjs.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
-var stateManager = require('./stateManager-8478caa9.browser.cjs.js');
+var stateManager = require('./stateManager-bd9afbba.browser.cjs.js');
 var createCache = _interopDefault(require('@emotion/cache'));
+var memoizeOne = _interopDefault(require('memoize-one'));
 
@@ -49,5 +46,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-    _this.createEmotionCache = function (nonce) {
+    _this.createEmotionCache = function (nonce, key) {
       return createCache({
-        nonce: nonce
+        nonce: nonce,
+        key: key
       });
@@ -63,4 +61,4 @@ };
     value: function render() {
-      var emotionCache = this.createEmotionCache(this.props.nonce);
-      return /*#__PURE__*/React__default.createElement(core.CacheProvider, {
+      var emotionCache = this.createEmotionCache(this.props.nonce, this.props.cacheKey);
+      return /*#__PURE__*/React__default.createElement(react.CacheProvider, {
         value: emotionCache
@@ -67,0 +65,0 @@ }, this.props.children);

dist/react-select.browser.esm.js

@@ -1,25 +0,22 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/defineProperty';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+import '@babel/runtime/helpers/toConsumableArray';
 import React, { Component } from 'react';
-import memoizeOne from 'memoize-one';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-export { F as components } from './index-75b02bac.browser.esm.js';
-import { S as Select } from './Select-e1cf49ae.browser.esm.js';
-export { c as createFilter, a as defaultTheme, m as mergeStyles } from './Select-e1cf49ae.browser.esm.js';
-import '@emotion/css';
+export { E as components } from './index-8b64410c.browser.esm.js';
+import { S as Select } from './Select-f2976362.browser.esm.js';
+export { c as createFilter, a as defaultTheme, m as mergeStyles } from './Select-f2976362.browser.esm.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
-import { m as manageState } from './stateManager-2f2b6f5b.browser.esm.js';
+import { m as manageState } from './stateManager-66a21f68.browser.esm.js';
 import createCache from '@emotion/cache';
+import memoizeOne from 'memoize-one';
 
@@ -42,5 +39,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-    _this.createEmotionCache = function (nonce) {
+    _this.createEmotionCache = function (nonce, key) {
       return createCache({
-        nonce: nonce
+        nonce: nonce,
+        key: key
       });
@@ -56,3 +54,3 @@ };
     value: function render() {
-      var emotionCache = this.createEmotionCache(this.props.nonce);
+      var emotionCache = this.createEmotionCache(this.props.nonce, this.props.cacheKey);
       return /*#__PURE__*/React.createElement(CacheProvider, {
@@ -59,0 +57,0 @@ value: emotionCache

dist/react-select.cjs.dev.js

@@ -7,26 +7,23 @@ 'use strict';
 
-require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/extends');
-require('@babel/runtime/helpers/slicedToArray');
-require('@babel/runtime/helpers/toConsumableArray');
 require('@babel/runtime/helpers/defineProperty');
 var _classCallCheck = _interopDefault(require('@babel/runtime/helpers/classCallCheck'));
 var _createClass = _interopDefault(require('@babel/runtime/helpers/createClass'));
-require('@babel/runtime/helpers/assertThisInitialized');
 var _inherits = _interopDefault(require('@babel/runtime/helpers/inherits'));
 var _possibleConstructorReturn = _interopDefault(require('@babel/runtime/helpers/possibleConstructorReturn'));
 var _getPrototypeOf = _interopDefault(require('@babel/runtime/helpers/getPrototypeOf'));
+require('@babel/runtime/helpers/toConsumableArray');
 var React = require('react');
 var React__default = _interopDefault(React);
-var memoizeOne = _interopDefault(require('memoize-one'));
-var core = require('@emotion/core');
+var react = require('@emotion/react');
 require('react-dom');
 require('@babel/runtime/helpers/typeof');
-var index$1 = require('./index-aee072ef.cjs.dev.js');
-var reactSelect = require('./Select-d63d1b1b.cjs.dev.js');
-require('@emotion/css');
+var index$1 = require('./index-ba786d0c.cjs.dev.js');
+var reactSelect = require('./Select-49944487.cjs.dev.js');
+require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('react-input-autosize');
-var stateManager = require('./stateManager-71df4ad8.cjs.dev.js');
+var stateManager = require('./stateManager-4a65415d.cjs.dev.js');
 var createCache = _interopDefault(require('@emotion/cache'));
+var memoizeOne = _interopDefault(require('memoize-one'));
 
@@ -49,5 +46,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-    _this.createEmotionCache = function (nonce) {
+    _this.createEmotionCache = function (nonce, key) {
       return createCache({
-        nonce: nonce
+        nonce: nonce,
+        key: key
       });
@@ -63,4 +61,4 @@ };
     value: function render() {
-      var emotionCache = this.createEmotionCache(this.props.nonce);
-      return /*#__PURE__*/React__default.createElement(core.CacheProvider, {
+      var emotionCache = this.createEmotionCache(this.props.nonce, this.props.cacheKey);
+      return /*#__PURE__*/React__default.createElement(react.CacheProvider, {
         value: emotionCache
@@ -67,0 +65,0 @@ }, this.props.children);

dist/react-select.cjs.prod.js

@@ -9,20 +9,18 @@ "use strict";
   value: !0
-}), require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/extends"), 
-require("@babel/runtime/helpers/slicedToArray"), require("@babel/runtime/helpers/toConsumableArray"), 
-require("@babel/runtime/helpers/defineProperty");
+}), require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/defineProperty");
 
-var _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass"));
+var _classCallCheck = _interopDefault(require("@babel/runtime/helpers/classCallCheck")), _createClass = _interopDefault(require("@babel/runtime/helpers/createClass")), _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 
-require("@babel/runtime/helpers/assertThisInitialized");
+require("@babel/runtime/helpers/toConsumableArray");
 
-var _inherits = _interopDefault(require("@babel/runtime/helpers/inherits")), _possibleConstructorReturn = _interopDefault(require("@babel/runtime/helpers/possibleConstructorReturn")), _getPrototypeOf = _interopDefault(require("@babel/runtime/helpers/getPrototypeOf")), React = require("react"), React__default = _interopDefault(React), memoizeOne = _interopDefault(require("memoize-one")), core = require("@emotion/core");
+var React = require("react"), React__default = _interopDefault(React), react = require("@emotion/react");
 
 require("react-dom"), require("@babel/runtime/helpers/typeof");
 
-var index$1 = require("./index-f91a2068.cjs.prod.js"), reactSelect = require("./Select-a783e33f.cjs.prod.js");
+var index$1 = require("./index-7d81dbd5.cjs.prod.js"), reactSelect = require("./Select-d04df9fa.cjs.prod.js");
 
-require("@emotion/css"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
+require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
 require("react-input-autosize");
 
-var stateManager = require("./stateManager-55f1941f.cjs.prod.js"), createCache = _interopDefault(require("@emotion/cache"));
+var stateManager = require("./stateManager-cde87a80.cjs.prod.js"), createCache = _interopDefault(require("@emotion/cache")), memoizeOne = _interopDefault(require("memoize-one"));
 
@@ -58,5 +56,6 @@ function _createSuper(Derived) {
     var _this;
-    return _classCallCheck(this, NonceProvider), (_this = _super.call(this, props)).createEmotionCache = function(nonce) {
+    return _classCallCheck(this, NonceProvider), (_this = _super.call(this, props)).createEmotionCache = function(nonce, key) {
       return createCache({
-        nonce: nonce
+        nonce: nonce,
+        key: key
       });
@@ -68,4 +67,4 @@ }, _this.createEmotionCache = memoizeOne(_this.createEmotionCache), _this;
     value: function() {
-      var emotionCache = this.createEmotionCache(this.props.nonce);
-      return React__default.createElement(core.CacheProvider, {
+      var emotionCache = this.createEmotionCache(this.props.nonce, this.props.cacheKey);
+      return React__default.createElement(react.CacheProvider, {
         value: emotionCache
@@ -72,0 +71,0 @@ }, this.props.children);

dist/react-select.esm.js

@@ -1,25 +0,22 @@
-import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/extends';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
 import '@babel/runtime/helpers/defineProperty';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
-import '@babel/runtime/helpers/assertThisInitialized';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/esm/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/esm/getPrototypeOf';
+import '@babel/runtime/helpers/toConsumableArray';
 import React, { Component } from 'react';
-import memoizeOne from 'memoize-one';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import 'react-dom';
 import '@babel/runtime/helpers/typeof';
-export { F as components } from './index-fa0d9f94.esm.js';
-import { S as Select } from './Select-e132d453.esm.js';
-export { c as createFilter, a as defaultTheme, m as mergeStyles } from './Select-e132d453.esm.js';
-import '@emotion/css';
+export { E as components } from './index-2af9c02c.esm.js';
+import { S as Select } from './Select-b2083c8c.esm.js';
+export { c as createFilter, a as defaultTheme, m as mergeStyles } from './Select-b2083c8c.esm.js';
+import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import 'react-input-autosize';
-import { m as manageState } from './stateManager-4518fdaa.esm.js';
+import { m as manageState } from './stateManager-66a89b0e.esm.js';
 import createCache from '@emotion/cache';
+import memoizeOne from 'memoize-one';
 
@@ -42,5 +39,6 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-    _this.createEmotionCache = function (nonce) {
+    _this.createEmotionCache = function (nonce, key) {
       return createCache({
-        nonce: nonce
+        nonce: nonce,
+        key: key
       });
@@ -56,3 +54,3 @@ };
     value: function render() {
-      var emotionCache = this.createEmotionCache(this.props.nonce);
+      var emotionCache = this.createEmotionCache(this.props.nonce, this.props.cacheKey);
       return /*#__PURE__*/React.createElement(CacheProvider, {
@@ -59,0 +57,0 @@ value: emotionCache

package.json

 {
   "name": "react-select",
-  "version": "3.2.0",
+  "version": "4.0.0",
   "description": "A Select control built with and for ReactJS",
@@ -13,5 +13,5 @@ "main": "dist/react-select.cjs.js",
     "@babel/runtime": "^7.4.4",
-    "@emotion/cache": "^10.0.9",
-    "@emotion/core": "^10.0.9",
-    "@emotion/css": "^10.0.9",
+    "@emotion/cache": "^11.0.0",
+    "@emotion/css": "^11.0.0",
+    "@emotion/react": "^11.1.1",
     "memoize-one": "^5.0.0",
@@ -18,0 +18,0 @@ "prop-types": "^15.6.0",

src/Async.js

@@ -53,2 +53,5 @@ // @flow
   passEmptyOptions: boolean,
+  optionsCache: { [string]: OptionsType },
+  prevDefaultOptions: OptionsType | boolean | void,
+  prevCacheOptions: any | void,
 };
@@ -64,3 +67,2 @@
     mounted: boolean = false;
-    optionsCache: { [string]: OptionsType } = {};
     constructor(props: C & AsyncProps) {
@@ -77,4 +79,29 @@ super();
         passEmptyOptions: false,
+        optionsCache: {},
+        prevDefaultOptions: undefined,
+        prevCacheOptions: undefined,
       };
     }
+    static getDerivedStateFromProps(props: C & AsyncProps, state: State) {
+      const newCacheOptionsState =
+        props.cacheOptions !== state.prevCacheOptions
+          ? {
+              prevCacheOptions: props.cacheOptions,
+              optionsCache: {},
+            }
+          : {};
+      const newDefaultOptionsState =
+        props.defaultOptions !== state.prevDefaultOptions
+          ? {
+              prevDefaultOptions: props.defaultOptions,
+              defaultOptions: Array.isArray(props.defaultOptions)
+                ? props.defaultOptions
+                : undefined,
+            }
+          : {};
+      return {
+        ...newCacheOptionsState,
+        ...newDefaultOptionsState,
+      };
+    }
     componentDidMount() {
@@ -92,15 +119,2 @@ this.mounted = true;
     }
-    UNSAFE_componentWillReceiveProps(nextProps: C & AsyncProps) {
-      // if the cacheOptions prop changes, clear the cache
-      if (nextProps.cacheOptions !== this.props.cacheOptions) {
-        this.optionsCache = {};
-      }
-      if (nextProps.defaultOptions !== this.props.defaultOptions) {
-        this.setState({
-          defaultOptions: Array.isArray(nextProps.defaultOptions)
-            ? nextProps.defaultOptions
-            : undefined,
-        });
-      }
-    }
     componentWillUnmount() {
@@ -138,7 +152,7 @@ this.mounted = false;
       }
-      if (cacheOptions && this.optionsCache[inputValue]) {
+      if (cacheOptions && this.state.optionsCache[inputValue]) {
         this.setState({
           inputValue,
           loadedInputValue: inputValue,
-          loadedOptions: this.optionsCache[inputValue],
+          loadedOptions: this.state.optionsCache[inputValue],
           isLoading: false,
@@ -158,8 +172,5 @@ passEmptyOptions: false,
               if (!this.mounted) return;
-              if (options) {
-                this.optionsCache[inputValue] = options;
-              }
               if (request !== this.lastRequest) return;
               delete this.lastRequest;
-              this.setState({
+              this.setState(state => ({
                 isLoading: false,
@@ -169,3 +180,6 @@ loadedInputValue: inputValue,
                 passEmptyOptions: false,
-              });
+                optionsCache: options
+                  ? { ...state.optionsCache, [inputValue]: options }
+                  : state.optionsCache,
+              }));
             });
@@ -172,0 +186,0 @@ }

src/components/containers.js

 // @flow
 /** @jsx jsx */
 import { type Node } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import type { CommonProps, KeyboardEventHandler } from '../types';
@@ -6,0 +6,0 @@

src/components/Control.js

 // @flow
 /** @jsx jsx */
 import { type Node, type ElementRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
@@ -6,0 +6,0 @@ import type { CommonProps, PropsWithStyles } from '../types';

src/components/Group.js

 // @flow
 /** @jsx jsx */
 import { type Node, type ComponentType } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
@@ -6,0 +6,0 @@ import type { CommonProps } from '../types';

src/components/indicators.js

 // @flow
 /** @jsx jsx */
 import { type Node } from 'react';
-import { jsx, keyframes } from '@emotion/core';
+import { jsx, keyframes } from '@emotion/react';
 
@@ -6,0 +6,0 @@ import type { CommonProps, Theme } from '../types';

src/components/Input.js

 // @flow
 /** @jsx jsx */
 import { type ElementRef } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import AutosizeInput from 'react-input-autosize';
@@ -6,0 +6,0 @@

src/components/Menu.js

@@ -10,3 +10,3 @@ // @flow
 } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { createPortal } from 'react-dom';
@@ -13,0 +13,0 @@

src/components/MultiValue.js

 // @flow
 /** @jsx jsx */
 import { type Node } from 'react';
-import { jsx, ClassNames } from '@emotion/core';
+import { jsx, ClassNames } from '@emotion/react';
 import { CrossIcon } from './indicators';
@@ -6,0 +6,0 @@ import type { CommonProps } from '../types';

src/components/Option.js

 // @flow
 /** @jsx jsx */
 import { type Node } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
@@ -6,0 +6,0 @@ import type { CommonProps, PropsWithStyles, InnerRef } from '../types';

src/components/Placeholder.js

 // @flow
 /** @jsx jsx */
 import { type Node } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import type { CommonProps } from '../types';
@@ -6,0 +6,0 @@

src/components/SingleValue.js

 // @flow
 /** @jsx jsx */
 import type { CommonProps } from '../types';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
@@ -6,0 +6,0 @@ type State = {

src/Creatable.js

@@ -102,3 +102,3 @@ // @flow
     }
-    UNSAFE_componentWillReceiveProps(nextProps: CreatableProps & C) {
+    static getDerivedStateFromProps(props: CreatableProps & C, state: State) {
       const {
@@ -113,5 +113,5 @@ allowCreateWhileLoading,
         value,
-      } = nextProps;
-      const options = nextProps.options || [];
-      let { newOption } = this.state;
+      } = props;
+      const options = props.options || [];
+      let { newOption } = state;
       if (isValidNewOption(inputValue, cleanValue(value), options)) {
@@ -122,3 +122,3 @@ newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
       }
-      this.setState({
+      return {
         newOption: newOption,
@@ -131,3 +131,3 @@ options:
             : options,
-      });
+      };
     }
@@ -134,0 +134,0 @@ onChange = (newValue: ValueType, actionMeta: ActionMeta) => {

src/internal/A11yText.js

 // @flow
 /** @jsx jsx */
 import { type ElementConfig } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
@@ -6,0 +6,0 @@ // Assistive text to describe visual elements. Hidden for sighted users.

src/internal/DummyInput.js

 // @flow
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 
@@ -5,0 +5,0 @@ export default function DummyInput({

src/internal/index.js

@@ -5,4 +5,2 @@ // @flow
 export { default as DummyInput } from './DummyInput';
-export { default as NodeResolver } from './NodeResolver';
-export { default as ScrollBlock } from './ScrollBlock';
-export { default as ScrollCaptor } from './ScrollCaptor';
+export { default as ScrollManager } from './ScrollManager';

src/NonceProvider.js

 // @flow
 import React, { Component, type Node } from 'react';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
@@ -10,2 +10,3 @@ import memoizeOne from 'memoize-one';
   children: Node,
+  cacheKey: string,
 };
@@ -18,7 +19,10 @@
   }
-  createEmotionCache = (nonce: string) => {
-    return createCache({ nonce });
+  createEmotionCache = (nonce: string, key: string) => {
+    return createCache({ nonce, key });
   };
   render() {
-    const emotionCache = this.createEmotionCache(this.props.nonce);
+    const emotionCache = this.createEmotionCache(
+      this.props.nonce,
+      this.props.cacheKey
+    );
     return (
@@ -25,0 +29,0 @@ <CacheProvider value={emotionCache}>{this.props.children}</CacheProvider>

src/Select.js

 // @flow
 
 import React, { Component, type ElementRef, type Node } from 'react';
-import memoizeOne from 'memoize-one';
 import { MenuPlacer } from './components/Menu';
-import isEqual from './internal/react-fast-compare';
 
 import { createFilter } from './filters';
+import { A11yText, DummyInput, ScrollManager } from './internal/index';
 import {
-  A11yText,
-  DummyInput,
-  ScrollBlock,
-  ScrollCaptor,
-} from './internal/index';
-import {
   valueFocusAriaMessage,
@@ -36,6 +29,6 @@ optionFocusAriaMessage,
 import {
-  formatGroupLabel,
-  getOptionLabel,
-  getOptionValue,
-  isOptionDisabled,
+  formatGroupLabel as formatGroupLabelBuiltin,
+  getOptionLabel as getOptionLabelBuiltin,
+  getOptionValue as getOptionValueBuiltin,
+  isOptionDisabled as isOptionDisabledBuiltin,
 } from './builtins';
@@ -46,3 +39,2 @@
   type PlaceholderOrValue,
-  type SelectComponents,
   type SelectComponentsConfig,
@@ -140,9 +132,9 @@ } from './components/index';
   */
-  formatGroupLabel: typeof formatGroupLabel,
+  formatGroupLabel: typeof formatGroupLabelBuiltin,
   /* Formats option labels in the menu and control as React components */
   formatOptionLabel?: (OptionType, FormatOptionLabelMeta) => Node,
   /* Resolves option data to a string to be displayed as the label by components */
-  getOptionLabel: typeof getOptionLabel,
+  getOptionLabel: typeof getOptionLabelBuiltin,
   /* Resolves option data to a string to compare options and specify value attributes */
-  getOptionValue: typeof getOptionValue,
+  getOptionValue: typeof getOptionValueBuiltin,
   /* Hide the selected option from the menu */
@@ -263,5 +255,5 @@ hideSelectedOptions?: boolean,
   filterOption: createFilter(),
-  formatGroupLabel: formatGroupLabel,
-  getOptionLabel: getOptionLabel,
-  getOptionValue: getOptionValue,
+  formatGroupLabel: formatGroupLabelBuiltin,
+  getOptionLabel: getOptionLabelBuiltin,
+  getOptionValue: getOptionValueBuiltin,
   isDisabled: false,
@@ -272,3 +264,3 @@ isLoading: false,
   isSearchable: true,
-  isOptionDisabled: isOptionDisabled,
+  isOptionDisabled: isOptionDisabledBuiltin,
   loadingMessage: () => 'Loading...',
@@ -295,7 +287,2 @@ maxMenuHeight: 300,
 
-type MenuOptions = {
-  render: Array<OptionType>,
-  focusable: Array<OptionType>,
-};
-
 type State = {
@@ -308,4 +295,6 @@ ariaLiveSelection: string,
   focusedValue: OptionType | null,
-  menuOptions: MenuOptions,
   selectValue: OptionsType,
+  clearFocusValueOnUpdate: boolean,
+  inputIsHiddenAfterUpdate: ?boolean,
+  prevProps: Props | void,
 };
@@ -315,2 +304,172 @@
 
+type CategorizedOption = {
+  type: 'option',
+  data: OptionType,
+  isDisabled: boolean,
+  isSelected: boolean,
+  label: string,
+  value: string,
+  index: number,
+};
+
+type CategorizedGroup = {
+  type: 'group',
+  data: GroupType,
+  options: OptionsType,
+  index: number,
+};
+
+type CategorizedGroupOrOption = CategorizedGroup | CategorizedOption;
+
+function toCategorizedOption(
+  props: Props,
+  option: OptionType,
+  selectValue: OptionsType,
+  index: number
+) {
+  const isDisabled = isOptionDisabled(props, option, selectValue);
+  const isSelected = isOptionSelected(props, option, selectValue);
+  const label = getOptionLabel(props, option);
+  const value = getOptionValue(props, option);
+
+  return {
+    type: 'option',
+    data: option,
+    isDisabled,
+    isSelected,
+    label,
+    value,
+    index,
+  };
+}
+
+function buildCategorizedOptions(
+  props: Props,
+  selectValue: OptionsType
+): CategorizedGroupOrOption[] {
+  return (props.options
+    .map((groupOrOption, groupOrOptionIndex) => {
+      if (groupOrOption.options) {
+        const categorizedOptions = groupOrOption.options
+          .map(option =>
+            toCategorizedOption(props, option, selectValue, option)
+          )
+          .filter(categorizedOption => isFocusable(props, categorizedOption));
+        return categorizedOptions.length > 0
+          ? {
+              type: 'group',
+              data: groupOrOption,
+              options: categorizedOptions,
+              index: groupOrOptionIndex,
+            }
+          : undefined;
+      }
+      const categorizedOption = toCategorizedOption(
+        props,
+        groupOrOption,
+        selectValue,
+        groupOrOptionIndex
+      );
+      return isFocusable(props, categorizedOption)
+        ? categorizedOption
+        : undefined;
+    })
+    // Flow limitation (see https://github.com/facebook/flow/issues/1414)
+    .filter(categorizedOption => !!categorizedOption): any[]);
+}
+
+function buildFocusableOptionsFromCategorizedOptions(
+  categorizedOptions: CategorizedGroupOrOption[]
+) {
+  return categorizedOptions.reduce((optionsAccumulator, categorizedOption) => {
+    if (categorizedOption.type === 'group') {
+      optionsAccumulator.push(...categorizedOption.options);
+    } else {
+      optionsAccumulator.push(categorizedOption.data);
+    }
+    return optionsAccumulator;
+  }, []);
+}
+
+function buildFocusableOptions(props: Props, selectValue: OptionsType) {
+  return buildFocusableOptionsFromCategorizedOptions(
+    buildCategorizedOptions(props, selectValue)
+  );
+}
+
+function isFocusable(props: Props, categorizedOption: CategorizedOption) {
+  const { inputValue = '' } = props;
+  const { data, isSelected, label, value } = categorizedOption;
+
+  return (
+    (!shouldHideSelectedOptions(props) || !isSelected) &&
+    filterOption(props, { label, value, data }, inputValue)
+  );
+}
+
+function getNextFocusedValue(state: State, nextSelectValue: OptionsType) {
+  const { focusedValue, selectValue: lastSelectValue } = state;
+  const lastFocusedIndex = lastSelectValue.indexOf(focusedValue);
+  if (lastFocusedIndex > -1) {
+    const nextFocusedIndex = nextSelectValue.indexOf(focusedValue);
+    if (nextFocusedIndex > -1) {
+      // the focused value is still in the selectValue, return it
+      return focusedValue;
+    } else if (lastFocusedIndex < nextSelectValue.length) {
+      // the focusedValue is not present in the next selectValue array by
+      // reference, so return the new value at the same index
+      return nextSelectValue[lastFocusedIndex];
+    }
+  }
+  return null;
+}
+
+function getNextFocusedOption(state: State, options: OptionsType) {
+  const { focusedOption: lastFocusedOption } = state;
+  return lastFocusedOption && options.indexOf(lastFocusedOption) > -1
+    ? lastFocusedOption
+    : options[0];
+}
+const getOptionLabel = (props: Props, data: OptionType): string => {
+  return props.getOptionLabel(data);
+};
+const getOptionValue = (props: Props, data: OptionType): string => {
+  return props.getOptionValue(data);
+};
+
+function isOptionDisabled(
+  props: Props,
+  option: OptionType,
+  selectValue: OptionsType
+): boolean {
+  return typeof props.isOptionDisabled === 'function'
+    ? props.isOptionDisabled(option, selectValue)
+    : false;
+}
+function isOptionSelected(
+  props: Props,
+  option: OptionType,
+  selectValue: OptionsType
+): boolean {
+  if (selectValue.indexOf(option) > -1) return true;
+  if (typeof props.isOptionSelected === 'function') {
+    return props.isOptionSelected(option, selectValue);
+  }
+  const candidate = getOptionValue(props, option);
+  return selectValue.some(i => getOptionValue(props, i) === candidate);
+}
+function filterOption(
+  props: Props,
+  option: { label: string, value: string, data: OptionType },
+  inputValue: string
+) {
+  return props.filterOption ? props.filterOption(option, inputValue) : true;
+}
+
+const shouldHideSelectedOptions = (props: Props) => {
+  const { hideSelectedOptions, isMulti } = props;
+  if (hideSelectedOptions === undefined) return isMulti;
+  return hideSelectedOptions;
+};
+
 let instanceId = 1;
@@ -327,4 +486,6 @@
     isFocused: false,
-    menuOptions: { render: [], focusable: [] },
     selectValue: [],
+    clearFocusValueOnUpdate: false,
+    inputIsHiddenAfterUpdate: undefined,
+    prevProps: undefined,
   };
@@ -337,9 +498,5 @@
   isComposing: boolean = false;
-  clearFocusValueOnUpdate: boolean = false;
   commonProps: any; // TODO
-  components: SelectComponents;
-  hasGroups: boolean = false;
   initialTouchX: number = 0;
   initialTouchY: number = 0;
-  inputIsHiddenAfterUpdate: ?boolean;
   instancePrefix: string = '';
@@ -354,15 +511,15 @@ openAfterFocus: boolean = false;
   controlRef: ElRef = null;
-  getControlRef = (ref: HTMLElement) => {
+  getControlRef = (ref: ?HTMLElement) => {
     this.controlRef = ref;
   };
   focusedOptionRef: ElRef = null;
-  getFocusedOptionRef = (ref: HTMLElement) => {
+  getFocusedOptionRef = (ref: ?HTMLElement) => {
     this.focusedOptionRef = ref;
   };
   menuListRef: ElRef = null;
-  getMenuListRef = (ref: HTMLElement) => {
+  getMenuListRef = (ref: ?HTMLElement) => {
     this.menuListRef = ref;
   };
   inputRef: ElRef = null;
-  getInputRef = (ref: HTMLElement) => {
+  getInputRef = (ref: ?HTMLElement) => {
     this.inputRef = ref;
@@ -376,30 +533,50 @@ };
     super(props);
-    const { value } = props;
-    this.cacheComponents = memoizeOne(this.cacheComponents, isEqual).bind(this);
-    this.cacheComponents(props.components);
     this.instancePrefix =
       'react-select-' + (this.props.instanceId || ++instanceId);
-
-    const selectValue = cleanValue(value);
-
-    this.buildMenuOptions = memoizeOne(
-      this.buildMenuOptions,
-      (newArgs: any, lastArgs: any) => {
-        const [newProps, newSelectValue] = (newArgs: [Props, OptionsType]);
-        const [lastProps, lastSelectValue] = (lastArgs: [Props, OptionsType]);
-
-        return (
-          newSelectValue === lastSelectValue &&
-          newProps.inputValue === lastProps.inputValue &&
-          newProps.options === lastProps.options
-        );
-      }
-    ).bind(this);
-    const menuOptions = props.menuIsOpen
-      ? this.buildMenuOptions(props, selectValue)
-      : { render: [], focusable: [] };
-
-    this.state.menuOptions = menuOptions;
-    this.state.selectValue = selectValue;
+    this.state.selectValue = cleanValue(props.value);
   }
+  static getDerivedStateFromProps(props: Props, state: State) {
+    const {
+      prevProps,
+      clearFocusValueOnUpdate,
+      inputIsHiddenAfterUpdate,
+    } = state;
+    const { options, value, menuIsOpen, inputValue } = props;
+    let newMenuOptionsState = {};
+    if (
+      prevProps &&
+      (value !== prevProps.value ||
+        options !== prevProps.options ||
+        menuIsOpen !== prevProps.menuIsOpen ||
+        inputValue !== prevProps.inputValue)
+    ) {
+      const selectValue = cleanValue(value);
+      const focusableOptions = menuIsOpen
+        ? buildFocusableOptions(props, selectValue)
+        : [];
+      const focusedValue = clearFocusValueOnUpdate
+        ? getNextFocusedValue(state, selectValue)
+        : null;
+      const focusedOption = getNextFocusedOption(state, focusableOptions);
+      newMenuOptionsState = {
+        selectValue,
+        focusedOption,
+        focusedValue,
+        clearFocusValueOnUpdate: false,
+      };
+    }
+    // some updates should toggle the state of the input visibility
+    const newInputIsHiddenState =
+      inputIsHiddenAfterUpdate != null && props !== prevProps
+        ? {
+            inputIsHidden: inputIsHiddenAfterUpdate,
+            inputIsHiddenAfterUpdate: undefined,
+          }
+        : {};
+    return {
+      ...newMenuOptionsState,
+      ...newInputIsHiddenState,
+      prevProps: props,
+    };
+  }
   componentDidMount() {
@@ -418,29 +595,2 @@ this.startListeningComposition();
   }
-  UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    const { options, value, menuIsOpen, inputValue } = this.props;
-    // re-cache custom components
-    this.cacheComponents(nextProps.components);
-    // rebuild the menu options
-    if (
-      nextProps.value !== value ||
-      nextProps.options !== options ||
-      nextProps.menuIsOpen !== menuIsOpen ||
-      nextProps.inputValue !== inputValue
-    ) {
-      const selectValue = cleanValue(nextProps.value);
-      const menuOptions = nextProps.menuIsOpen
-        ? this.buildMenuOptions(nextProps, selectValue)
-        : { render: [], focusable: [] };
-      const focusedValue = this.getNextFocusedValue(selectValue);
-      const focusedOption = this.getNextFocusedOption(menuOptions.focusable);
-      this.setState({ menuOptions, selectValue, focusedOption, focusedValue });
-    }
-    // some updates should toggle the state of the input visibility
-    if (this.inputIsHiddenAfterUpdate != null) {
-      this.setState({
-        inputIsHidden: this.inputIsHiddenAfterUpdate,
-      });
-      delete this.inputIsHiddenAfterUpdate;
-    }
-  }
   componentDidUpdate(prevProps: Props) {
@@ -479,5 +629,3 @@ const { isDisabled, menuIsOpen } = this.props;
   }
-  cacheComponents = (components: SelectComponents) => {
-    this.components = defaultComponents({ components });
-  };
+
   // ==============================
@@ -522,9 +670,8 @@ // Consumer Handlers
     const { selectValue, isFocused } = this.state;
-    const menuOptions = this.buildMenuOptions(this.props, selectValue);
+    const focusableOptions = this.buildFocusableOptions();
     const { isMulti, tabSelectsValue } = this.props;
-    let openAtIndex =
-      focusOption === 'first' ? 0 : menuOptions.focusable.length - 1;
+    let openAtIndex = focusOption === 'first' ? 0 : focusableOptions.length - 1;
 
     if (!isMulti) {
-      const selectedIndex = menuOptions.focusable.indexOf(selectValue[0]);
+      const selectedIndex = focusableOptions.indexOf(selectValue[0]);
       if (selectedIndex > -1) {
@@ -537,9 +684,8 @@ openAtIndex = selectedIndex;
     this.scrollToFocusedOptionOnUpdate = !(isFocused && this.menuListRef);
-    this.inputIsHiddenAfterUpdate = false;
 
     this.setState(
       {
-        menuOptions,
+        inputIsHiddenAfterUpdate: false,
         focusedValue: null,
-        focusedOption: menuOptions.focusable[openAtIndex],
+        focusedOption: focusableOptions[openAtIndex],
       },
@@ -610,4 +756,4 @@ () => {
     const { pageSize, tabSelectsValue } = this.props;
-    const { focusedOption, menuOptions } = this.state;
-    const options = menuOptions.focusable;
+    const { focusedOption, selectValue } = this.state;
+    const options = this.getFocusableOptions();
 
@@ -646,3 +792,3 @@ if (!options.length) return;
       context: {
-        isDisabled: isOptionDisabled(options[nextFocus]),
+        isDisabled: this.isOptionDisabled(options[nextFocus], selectValue),
         tabSelectsValue,
@@ -664,7 +810,7 @@ },
     if (closeMenuOnSelect) {
-      this.inputIsHiddenAfterUpdate = !isMulti;
+      this.setState({ inputIsHiddenAfterUpdate: !isMulti });
       this.onMenuClose();
     }
     // when the select value should change, we should reset focusedValue
-    this.clearFocusValueOnUpdate = true;
+    this.setState({ clearFocusValueOnUpdate: true });
     this.onChange(newValue, { action, option });
@@ -724,8 +870,14 @@ };
   removeValue = (removedValue: OptionType) => {
+    const { isMulti } = this.props;
     const { selectValue } = this.state;
     const candidate = this.getOptionValue(removedValue);
-    const newValue = selectValue.filter(
+    const newValueArray = selectValue.filter(
       i => this.getOptionValue(i) !== candidate
     );
-    this.onChange(newValue.length ? newValue : null, {
+    const newValue = isMulti
+      ? newValueArray
+      : newValueArray.length > 0
+      ? newValueArray[0]
+      : null;
+    this.onChange(newValue, {
       action: 'remove-value',
@@ -743,8 +895,14 @@ removedValue,
   clearValue = () => {
-    this.onChange(null, { action: 'clear' });
+    this.onChange(this.props.isMulti ? [] : null, { action: 'clear' });
   };
   popValue = () => {
+    const { isMulti } = this.props;
     const { selectValue } = this.state;
     const lastSelectedValue = selectValue[selectValue.length - 1];
-    const newValue = selectValue.slice(0, selectValue.length - 1);
+    const newValueArray = selectValue.slice(0, selectValue.length - 1);
+    const newValue = isMulti
+      ? newValueArray
+      : newValueArray.length > 0
+      ? newValueArray[0]
+      : null;
     this.announceAriaLiveSelection({
@@ -756,3 +914,3 @@ event: 'pop-value',
     });
-    this.onChange(newValue.length ? newValue : null, {
+    this.onChange(newValue, {
       action: 'pop-value',
@@ -819,34 +977,7 @@ removedValue: lastSelectedValue,
 
-  getNextFocusedValue(nextSelectValue: OptionsType) {
-    if (this.clearFocusValueOnUpdate) {
-      this.clearFocusValueOnUpdate = false;
-      return null;
-    }
-    const { focusedValue, selectValue: lastSelectValue } = this.state;
-    const lastFocusedIndex = lastSelectValue.indexOf(focusedValue);
-    if (lastFocusedIndex > -1) {
-      const nextFocusedIndex = nextSelectValue.indexOf(focusedValue);
-      if (nextFocusedIndex > -1) {
-        // the focused value is still in the selectValue, return it
-        return focusedValue;
-      } else if (lastFocusedIndex < nextSelectValue.length) {
-        // the focusedValue is not present in the next selectValue array by
-        // reference, so return the new value at the same index
-        return nextSelectValue[lastFocusedIndex];
-      }
-    }
-    return null;
-  }
-
-  getNextFocusedOption(options: OptionsType) {
-    const { focusedOption: lastFocusedOption } = this.state;
-    return lastFocusedOption && options.indexOf(lastFocusedOption) > -1
-      ? lastFocusedOption
-      : options[0];
-  }
   getOptionLabel = (data: OptionType): string => {
-    return this.props.getOptionLabel(data);
+    return getOptionLabel(this.props, data);
   };
   getOptionValue = (data: OptionType): string => {
-    return this.props.getOptionValue(data);
+    return getOptionValue(this.props, data);
   };
@@ -862,14 +993,16 @@ getStyles = (key: string, props: {}): {} => {
   };
-  getActiveDescendentId = () => {
-    const { menuIsOpen } = this.props;
-    const { menuOptions, focusedOption } = this.state;
 
-    if (!focusedOption || !menuIsOpen) return undefined;
+  getComponents = () => {
+    return defaultComponents(this.props);
+  };
 
-    const index = menuOptions.focusable.indexOf(focusedOption);
-    const option = menuOptions.render[index];
+  buildCategorizedOptions = () =>
+    buildCategorizedOptions(this.props, this.state.selectValue);
+  getCategorizedOptions = () =>
+    this.props.menuIsOpen ? this.buildCategorizedOptions() : [];
+  buildFocusableOptions = () =>
+    buildFocusableOptionsFromCategorizedOptions(this.buildCategorizedOptions());
+  getFocusableOptions = () =>
+    this.props.menuIsOpen ? this.buildFocusableOptions() : [];
 
-    return option && option.key;
-  };
-
   // ==============================
@@ -909,6 +1042,6 @@ // Helpers
   hasOptions() {
-    return !!this.state.menuOptions.render.length;
+    return !!this.getFocusableOptions().length;
   }
   countOptions() {
-    return this.state.menuOptions.focusable.length;
+    return this.getFocusableOptions().length;
   }
@@ -925,13 +1058,6 @@ isClearable(): boolean {
   isOptionDisabled(option: OptionType, selectValue: OptionsType): boolean {
-    return typeof this.props.isOptionDisabled === 'function'
-      ? this.props.isOptionDisabled(option, selectValue)
-      : false;
+    return isOptionDisabled(this.props, option, selectValue);
   }
   isOptionSelected(option: OptionType, selectValue: OptionsType): boolean {
-    if (selectValue.indexOf(option) > -1) return true;
-    if (typeof this.props.isOptionSelected === 'function') {
-      return this.props.isOptionSelected(option, selectValue);
-    }
-    const candidate = this.getOptionValue(option);
-    return selectValue.some(i => this.getOptionValue(i) === candidate);
+    return isOptionSelected(this.props, option, selectValue);
   }
@@ -942,5 +1068,3 @@ filterOption(
   ) {
-    return this.props.filterOption
-      ? this.props.filterOption(option, inputValue)
-      : true;
+    return filterOption(this.props, option, inputValue);
   }
@@ -1016,3 +1140,3 @@ formatOptionLabel(data: OptionType, context: FormatOptionLabelContext): Node {
     if (menuIsOpen) {
-      this.inputIsHiddenAfterUpdate = !isMulti;
+      this.setState({ inputIsHiddenAfterUpdate: !isMulti });
       this.onMenuClose();
@@ -1161,3 +1285,3 @@ } else {
     const inputValue = event.currentTarget.value;
-    this.inputIsHiddenAfterUpdate = false;
+    this.setState({ inputIsHiddenAfterUpdate: false });
     this.onInputChange(inputValue, { action: 'input-change' });
@@ -1173,3 +1297,3 @@ if (!this.props.menuIsOpen) {
     }
-    this.inputIsHiddenAfterUpdate = false;
+    this.setState({ inputIsHiddenAfterUpdate: false });
     this.announceAriaLiveContext({
@@ -1209,5 +1333,3 @@ event: 'input',
   shouldHideSelectedOptions = () => {
-    const { hideSelectedOptions, isMulti } = this.props;
-    if (hideSelectedOptions === undefined) return isMulti;
-    return hideSelectedOptions;
+    return shouldHideSelectedOptions(this.props);
   };
@@ -1299,3 +1421,3 @@
         if (menuIsOpen) {
-          this.inputIsHiddenAfterUpdate = false;
+          this.setState({ inputIsHiddenAfterUpdate: false });
           this.onInputChange('', { action: 'menu-close' });
@@ -1355,80 +1477,2 @@ this.onMenuClose();
   // ==============================
-  // Menu Options
-  // ==============================
-
-  buildMenuOptions = (props: Props, selectValue: OptionsType): MenuOptions => {
-    const { inputValue = '', options } = props;
-
-    const toOption = (option, id) => {
-      const isDisabled = this.isOptionDisabled(option, selectValue);
-      const isSelected = this.isOptionSelected(option, selectValue);
-      const label = this.getOptionLabel(option);
-      const value = this.getOptionValue(option);
-
-      if (
-        (this.shouldHideSelectedOptions() && isSelected) ||
-        !this.filterOption({ label, value, data: option }, inputValue)
-      ) {
-        return;
-      }
-
-      const onHover = isDisabled ? undefined : () => this.onOptionHover(option);
-      const onSelect = isDisabled ? undefined : () => this.selectOption(option);
-      const optionId = `${this.getElementId('option')}-${id}`;
-
-      return {
-        innerProps: {
-          id: optionId,
-          onClick: onSelect,
-          onMouseMove: onHover,
-          onMouseOver: onHover,
-          tabIndex: -1,
-        },
-        data: option,
-        isDisabled,
-        isSelected,
-        key: optionId,
-        label,
-        type: 'option',
-        value,
-      };
-    };
-
-    return options.reduce(
-      (acc, item, itemIndex) => {
-        if (item.options) {
-          // TODO needs a tidier implementation
-          if (!this.hasGroups) this.hasGroups = true;
-
-          const { options: items } = item;
-          const children = items
-            .map((child, i) => {
-              const option = toOption(child, `${itemIndex}-${i}`);
-              if (option) acc.focusable.push(child);
-              return option;
-            })
-            .filter(Boolean);
-          if (children.length) {
-            const groupId = `${this.getElementId('group')}-${itemIndex}`;
-            acc.render.push({
-              type: 'group',
-              key: groupId,
-              data: item,
-              options: children,
-            });
-          }
-        } else {
-          const option = toOption(item, `${itemIndex}`);
-          if (option) {
-            acc.render.push(option);
-            acc.focusable.push(item);
-          }
-        }
-        return acc;
-      },
-      { render: [], focusable: [] }
-    );
-  };
-
-  // ==============================
   // Renderers
@@ -1480,3 +1524,3 @@ // ==============================
     } = this.props;
-    const { Input } = this.components;
+    const { Input } = this.getComponents();
     const { inputIsHidden } = this.state;
@@ -1547,3 +1591,3 @@
       Placeholder,
-    } = this.components;
+    } = this.getComponents();
     const { commonProps } = this;
@@ -1617,3 +1661,3 @@ const {
   renderClearIndicator() {
-    const { ClearIndicator } = this.components;
+    const { ClearIndicator } = this.getComponents();
     const { commonProps } = this;
@@ -1648,3 +1692,3 @@ const { isDisabled, isLoading } = this.props;
   renderLoadingIndicator() {
-    const { LoadingIndicator } = this.components;
+    const { LoadingIndicator } = this.getComponents();
     const { commonProps } = this;
@@ -1667,3 +1711,3 @@ const { isDisabled, isLoading } = this.props;
   renderIndicatorSeparator() {
-    const { DropdownIndicator, IndicatorSeparator } = this.components;
+    const { DropdownIndicator, IndicatorSeparator } = this.getComponents();
 
@@ -1686,3 +1730,3 @@ // separator doesn't make sense without the dropdown indicator
   renderDropdownIndicator() {
-    const { DropdownIndicator } = this.components;
+    const { DropdownIndicator } = this.getComponents();
     if (!DropdownIndicator) return null;
@@ -1718,5 +1762,5 @@ const { commonProps } = this;
       Option,
-    } = this.components;
+    } = this.getComponents();
     const { commonProps } = this;
-    const { focusedOption, menuOptions } = this.state;
+    const { focusedOption } = this.state;
     const {
@@ -1743,10 +1787,30 @@ captureMenuScroll,
     // TODO: Internal Option Type here
-    const render = (props: OptionType) => {
-      // for performance, the menu options in state aren't changed when the
-      // focused option changes so we calculate additional props based on that
-      const isFocused = focusedOption === props.data;
-      props.innerRef = isFocused ? this.getFocusedOptionRef : undefined;
+    const render = (props: OptionType, id: string) => {
+      const { type, data, isDisabled, isSelected, label, value } = props;
+      const isFocused = focusedOption === data;
+      const onHover = isDisabled ? undefined : () => this.onOptionHover(data);
+      const onSelect = isDisabled ? undefined : () => this.selectOption(data);
+      const optionId = `${this.getElementId('option')}-${id}`;
+      const innerProps = {
+        id: optionId,
+        onClick: onSelect,
+        onMouseMove: onHover,
+        onMouseOver: onHover,
+        tabIndex: -1,
+      };
 
       return (
-        <Option {...commonProps} {...props} isFocused={isFocused}>
+        <Option
+          {...commonProps}
+          innerProps={innerProps}
+          data={data}
+          isDisabled={isDisabled}
+          isSelected={isSelected}
+          key={optionId}
+          label={label}
+          type={type}
+          value={value}
+          isFocused={isFocused}
+          innerRef={isFocused ? this.getFocusedOptionRef : undefined}
+        >
           {this.formatOptionLabel(props.data, 'menu')}
@@ -1760,6 +1824,7 @@ </Option>
     if (this.hasOptions()) {
-      menuUI = menuOptions.render.map(item => {
+      menuUI = this.getCategorizedOptions().map(item => {
         if (item.type === 'group') {
-          const { type, ...group } = item;
-          const headingId = `${item.key}-heading`;
+          const { data, options, index: groupIndex } = item;
+          const groupId = `${this.getElementId('group')}-${groupIndex}`;
+          const headingId = `${groupId}-heading`;
 
@@ -1769,3 +1834,5 @@ return (
               {...commonProps}
-              {...group}
+              key={groupId}
+              data={data}
+              options={options}
               Heading={GroupHeading}
@@ -1778,7 +1845,9 @@ headingProps={{
             >
-              {item.options.map(option => render(option))}
+              {item.options.map(option =>
+                render(option, `${groupIndex}-${option.index}`)
+              )}
             </Group>
           );
         } else if (item.type === 'option') {
-          return render(item);
+          return render(item, `${item.index}`);
         }
@@ -1817,11 +1886,15 @@ });
           >
-            <ScrollCaptor
-              isEnabled={captureMenuScroll}
+            <ScrollManager
+              captureEnabled={captureMenuScroll}
               onTopArrive={onMenuScrollToTop}
               onBottomArrive={onMenuScrollToBottom}
+              lockEnabled={menuShouldBlockScroll}
             >
-              <ScrollBlock isEnabled={menuShouldBlockScroll}>
+              {scrollTargetRef => (
                 <MenuList
                   {...commonProps}
-                  innerRef={this.getMenuListRef}
+                  innerRef={(instance: HTMLElement | null): void => {
+                    this.getMenuListRef(instance);
+                    scrollTargetRef(instance);
+                  }}
                   isLoading={isLoading}
@@ -1832,4 +1905,4 @@ maxHeight={maxHeight}
                 </MenuList>
-              </ScrollBlock>
-            </ScrollCaptor>
+              )}
+            </ScrollManager>
           </Menu>
@@ -1910,3 +1983,3 @@ )}
       ValueContainer,
-    } = this.components;
+    } = this.getComponents();
 
@@ -1913,0 +1986,0 @@ const { className, id, isDisabled, menuIsOpen } = this.props;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

1356805

decreased by-1.65%

Number of package files

116

decreased by-2.52%

Lines of code

30912

decreased by-1.68%

Number of low supply chain risk alerts

51

increased by18.6%

Dependency changes

• + Added@emotion/react@^11.1.1

• + Added@emotion/babel-plugin@11.12.0(transitive)

• + Added@emotion/cache@11.13.1(transitive)

• + Added@emotion/css@11.13.4(transitive)

• + Added@emotion/hash@0.9.2(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/react@11.13.3(transitive)

• + Added@emotion/serialize@1.3.2(transitive)

• + Added@emotion/sheet@1.4.0(transitive)

• + Added@emotion/unitless@0.10.0(transitive)

• + Added@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• + Added@emotion/utils@1.4.1(transitive)

• + Added@emotion/weak-memoize@0.4.0(transitive)

• + Addedbabel-plugin-macros@3.1.0(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addedescape-string-regexp@4.0.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedstylis@4.2.0(transitive)

• - Removed@emotion/core@^10.0.9

• - Removed@emotion/cache@10.0.29(transitive)

• - Removed@emotion/core@10.3.1(transitive)

• - Removed@emotion/css@10.0.27(transitive)

• - Removed@emotion/hash@0.8.0(transitive)

• - Removed@emotion/memoize@0.7.4(transitive)

• - Removed@emotion/serialize@0.11.16(transitive)

• - Removed@emotion/sheet@0.9.4(transitive)

• - Removed@emotion/stylis@0.8.5(transitive)

• - Removed@emotion/unitless@0.7.5(transitive)

• - Removed@emotion/utils@0.11.3(transitive)

• - Removed@emotion/weak-memoize@0.2.5(transitive)

• - Removedbabel-plugin-emotion@10.2.2(transitive)

• - Removedbabel-plugin-macros@2.8.0(transitive)

• - Removedbabel-plugin-syntax-jsx@6.18.0(transitive)

• - Removedcosmiconfig@6.0.0(transitive)

• - Removedcsstype@2.6.21(transitive)

• Updated@emotion/cache@^11.0.0

• Updated@emotion/css@^11.0.0