react-select - npm Package Compare versions

Comparing version 4.1.0 to 4.2.0

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

@@ -5,3 +5,3 @@ 'use strict';
 
-var index$1 = require('../../dist/index-ee19cae6.cjs.dev.js');
+var index$1 = require('../../dist/index-1793e281.cjs.dev.js');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
@@ -8,0 +8,0 @@ var memoizeOne = require('memoize-one');

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

@@ -7,3 +7,3 @@ "use strict";
 
-var index$1 = require("../../dist/index-db3bdb30.cjs.prod.js"), _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), memoizeOne = require("memoize-one"), _typeof = require("@babel/runtime/helpers/typeof"), React = require("react"), _extends = require("@babel/runtime/helpers/extends"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _inherits = require("@babel/runtime/helpers/inherits"), reactTransitionGroup = require("react-transition-group");
+var index$1 = require("../../dist/index-f17570e5.cjs.prod.js"), _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), memoizeOne = require("memoize-one"), _typeof = require("@babel/runtime/helpers/typeof"), React = require("react"), _extends = require("@babel/runtime/helpers/extends"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _inherits = require("@babel/runtime/helpers/inherits"), reactTransitionGroup = require("react-transition-group");
 
@@ -10,0 +10,0 @@ function _interopDefault(e) {

animated/dist/react-select.esm.js

@@ -1,2 +0,2 @@
-import { a as _objectSpread2, _ as _createSuper, B as defaultComponents } from '../../dist/index-825d3bb1.esm.js';
+import { a as _objectSpread2, _ as _createSuper, C as defaultComponents } from '../../dist/index-f6c14412.esm.js';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
@@ -3,0 +3,0 @@ import memoizeOne from 'memoize-one';

animated/package.json

 {
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",
-  "browser": {
-    "./dist/react-select.cjs.js": "./dist/react-select.browser.cjs.js",
-    "./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
-  },
   "preconstruct": {
@@ -9,0 +5,0 @@ "source": "../src/animated"

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

@@ -7,10 +7,11 @@ 'use strict';
 var creatable_dist_reactSelect = require('../../creatable/dist/react-select.cjs.dev.js');
-var stateManager = require('../../dist/stateManager-0a7207cf.cjs.dev.js');
-var base_dist_reactSelect = require('../../dist/Select-fb6a965c.cjs.dev.js');
+var stateManager = require('../../dist/stateManager-f952989a.cjs.dev.js');
+var base_dist_reactSelect = require('../../dist/Select-59696ec1.cjs.dev.js');
 require('@babel/runtime/helpers/extends');
 require('@babel/runtime/helpers/objectWithoutProperties');
 require('@babel/runtime/helpers/defineProperty');
-require('../../dist/index-ee19cae6.cjs.dev.js');
+require('../../dist/index-1793e281.cjs.dev.js');
 require('@emotion/react');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('@babel/runtime/helpers/typeof');
 require('react-input-autosize');
@@ -22,4 +23,4 @@ require('@babel/runtime/helpers/classCallCheck');
 require('react-dom');
-require('@babel/runtime/helpers/typeof');
 require('@babel/runtime/helpers/toConsumableArray');
+require('memoize-one');
 
@@ -26,0 +27,0 @@ var SelectCreatable = creatable_dist_reactSelect.makeCreatableSelect(base_dist_reactSelect.Select);

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

@@ -7,11 +7,11 @@ "use strict";
 
-var async_dist_reactSelect = require("../../async/dist/react-select.cjs.prod.js"), creatable_dist_reactSelect = require("../../creatable/dist/react-select.cjs.prod.js"), stateManager = require("../../dist/stateManager-351f4bd6.cjs.prod.js"), base_dist_reactSelect = require("../../dist/Select-c074111f.cjs.prod.js");
+var async_dist_reactSelect = require("../../async/dist/react-select.cjs.prod.js"), creatable_dist_reactSelect = require("../../creatable/dist/react-select.cjs.prod.js"), stateManager = require("../../dist/stateManager-ea539aa9.cjs.prod.js"), base_dist_reactSelect = require("../../dist/Select-c2db9bf6.cjs.prod.js");
 
 require("@babel/runtime/helpers/extends"), require("@babel/runtime/helpers/objectWithoutProperties"), 
-require("@babel/runtime/helpers/defineProperty"), require("../../dist/index-db3bdb30.cjs.prod.js"), 
+require("@babel/runtime/helpers/defineProperty"), require("../../dist/index-f17570e5.cjs.prod.js"), 
 require("@emotion/react"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
-require("react-input-autosize"), require("@babel/runtime/helpers/classCallCheck"), 
+require("@babel/runtime/helpers/typeof"), require("react-input-autosize"), require("@babel/runtime/helpers/classCallCheck"), 
 require("@babel/runtime/helpers/createClass"), require("@babel/runtime/helpers/inherits"), 
-require("react"), require("react-dom"), require("@babel/runtime/helpers/typeof"), 
-require("@babel/runtime/helpers/toConsumableArray");
+require("react"), require("react-dom"), require("@babel/runtime/helpers/toConsumableArray"), 
+require("memoize-one");
 
@@ -18,0 +18,0 @@ var SelectCreatable = creatable_dist_reactSelect.makeCreatableSelect(base_dist_reactSelect.Select), SelectCreatableState = stateManager.manageState(SelectCreatable), AsyncCreatable = async_dist_reactSelect.makeAsyncSelect(SelectCreatableState);

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

 import { makeAsyncSelect } from '../../async/dist/react-select.esm.js';
 import { makeCreatableSelect } from '../../creatable/dist/react-select.esm.js';
-import { m as manageState } from '../../dist/stateManager-6ed41a9f.esm.js';
-import { S as Select } from '../../dist/Select-d680feef.esm.js';
+import { m as manageState } from '../../dist/stateManager-0da47751.esm.js';
+import { S as Select } from '../../dist/Select-4a950554.esm.js';
 import '@babel/runtime/helpers/extends';
 import '@babel/runtime/helpers/objectWithoutProperties';
 import '@babel/runtime/helpers/defineProperty';
-import '../../dist/index-825d3bb1.esm.js';
+import '../../dist/index-f6c14412.esm.js';
 import '@emotion/react';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
+import '@babel/runtime/helpers/typeof';
 import 'react-input-autosize';
@@ -17,4 +18,4 @@ import '@babel/runtime/helpers/classCallCheck';
 import 'react-dom';
-import '@babel/runtime/helpers/typeof';
 import '@babel/runtime/helpers/toConsumableArray';
+import 'memoize-one';
 
@@ -21,0 +22,0 @@ var SelectCreatable = makeCreatableSelect(Select);

async-creatable/package.json

 {
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",
-  "browser": {
-    "./dist/react-select.cjs.js": "./dist/react-select.browser.cjs.js",
-    "./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
-  },
   "preconstruct": {
@@ -9,0 +5,0 @@ "source": "../src/AsyncCreatable"

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

@@ -8,3 +8,3 @@ 'use strict';
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var index = require('../../dist/index-ee19cae6.cjs.dev.js');
+var index = require('../../dist/index-1793e281.cjs.dev.js');
 var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
@@ -14,10 +14,11 @@ var _createClass = require('@babel/runtime/helpers/createClass');
 var React = require('react');
-var base_dist_reactSelect = require('../../dist/Select-fb6a965c.cjs.dev.js');
-var stateManager = require('../../dist/stateManager-0a7207cf.cjs.dev.js');
+var base_dist_reactSelect = require('../../dist/Select-59696ec1.cjs.dev.js');
+var stateManager = require('../../dist/stateManager-f952989a.cjs.dev.js');
 require('@emotion/react');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('@babel/runtime/helpers/typeof');
 require('react-input-autosize');
 require('react-dom');
-require('@babel/runtime/helpers/typeof');
 require('@babel/runtime/helpers/toConsumableArray');
+require('memoize-one');
 
@@ -24,0 +25,0 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

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

@@ -7,3 +7,3 @@ "use strict";
 
-var _extends = require("@babel/runtime/helpers/extends"), _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), _defineProperty = require("@babel/runtime/helpers/defineProperty"), index = require("../../dist/index-db3bdb30.cjs.prod.js"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _inherits = require("@babel/runtime/helpers/inherits"), React = require("react"), base_dist_reactSelect = require("../../dist/Select-c074111f.cjs.prod.js"), stateManager = require("../../dist/stateManager-351f4bd6.cjs.prod.js");
+var _extends = require("@babel/runtime/helpers/extends"), _objectWithoutProperties = require("@babel/runtime/helpers/objectWithoutProperties"), _defineProperty = require("@babel/runtime/helpers/defineProperty"), index = require("../../dist/index-f17570e5.cjs.prod.js"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _inherits = require("@babel/runtime/helpers/inherits"), React = require("react"), base_dist_reactSelect = require("../../dist/Select-c2db9bf6.cjs.prod.js"), stateManager = require("../../dist/stateManager-ea539aa9.cjs.prod.js");
 
@@ -17,4 +17,4 @@ function _interopDefault(e) {
 require("@emotion/react"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
-require("react-input-autosize"), require("react-dom"), require("@babel/runtime/helpers/typeof"), 
-require("@babel/runtime/helpers/toConsumableArray");
+require("@babel/runtime/helpers/typeof"), require("react-input-autosize"), require("react-dom"), 
+require("@babel/runtime/helpers/toConsumableArray"), require("memoize-one");
 
@@ -21,0 +21,0 @@ var _extends__default = _interopDefault(_extends), _objectWithoutProperties__default = _interopDefault(_objectWithoutProperties), _defineProperty__default = _interopDefault(_defineProperty), _classCallCheck__default = _interopDefault(_classCallCheck), _createClass__default = _interopDefault(_createClass), _inherits__default = _interopDefault(_inherits), React__default = _interopDefault(React), defaultProps = {

async/dist/react-select.esm.js

 import _extends from '@babel/runtime/helpers/esm/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
-import { _ as _createSuper, G as handleInputChange, a as _objectSpread2 } from '../../dist/index-825d3bb1.esm.js';
+import { _ as _createSuper, H as handleInputChange, a as _objectSpread2 } from '../../dist/index-f6c14412.esm.js';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
@@ -9,10 +9,11 @@ import _createClass from '@babel/runtime/helpers/esm/createClass';
 import React, { Component } from 'react';
-import { S as Select } from '../../dist/Select-d680feef.esm.js';
-import { m as manageState } from '../../dist/stateManager-6ed41a9f.esm.js';
+import { S as Select } from '../../dist/Select-4a950554.esm.js';
+import { m as manageState } from '../../dist/stateManager-0da47751.esm.js';
 import '@emotion/react';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
+import '@babel/runtime/helpers/typeof';
 import 'react-input-autosize';
 import 'react-dom';
-import '@babel/runtime/helpers/typeof';
 import '@babel/runtime/helpers/toConsumableArray';
+import 'memoize-one';
 
@@ -19,0 +20,0 @@ var defaultProps = {

async/package.json

 {
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",
-  "browser": {
-    "./dist/react-select.cjs.js": "./dist/react-select.browser.cjs.js",
-    "./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
-  },
   "preconstruct": {
@@ -9,0 +5,0 @@ "source": "../src/Async"

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

@@ -6,3 +6,3 @@ 'use strict';
 require('@babel/runtime/helpers/extends');
-require('../../dist/index-ee19cae6.cjs.dev.js');
+require('../../dist/index-1793e281.cjs.dev.js');
 require('@babel/runtime/helpers/classCallCheck');
@@ -13,10 +13,11 @@ require('@babel/runtime/helpers/createClass');
 require('react');
-var base_dist_reactSelect = require('../../dist/Select-fb6a965c.cjs.dev.js');
+var base_dist_reactSelect = require('../../dist/Select-59696ec1.cjs.dev.js');
 require('@emotion/react');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('@babel/runtime/helpers/objectWithoutProperties');
+require('@babel/runtime/helpers/typeof');
 require('react-input-autosize');
 require('@babel/runtime/helpers/defineProperty');
 require('react-dom');
-require('@babel/runtime/helpers/typeof');
+require('memoize-one');
 
@@ -23,0 +24,0 @@

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

@@ -5,3 +5,3 @@ "use strict";
   value: !0
-}), require("@babel/runtime/helpers/extends"), require("../../dist/index-db3bdb30.cjs.prod.js"), 
+}), require("@babel/runtime/helpers/extends"), require("../../dist/index-f17570e5.cjs.prod.js"), 
 require("@babel/runtime/helpers/classCallCheck"), require("@babel/runtime/helpers/createClass"), 
@@ -11,7 +11,8 @@ require("@babel/runtime/helpers/inherits"), require("@babel/runtime/helpers/toConsumableArray"),
 
-var base_dist_reactSelect = require("../../dist/Select-c074111f.cjs.prod.js");
+var base_dist_reactSelect = require("../../dist/Select-c2db9bf6.cjs.prod.js");
 
 require("@emotion/react"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
-require("@babel/runtime/helpers/objectWithoutProperties"), require("react-input-autosize"), 
-require("@babel/runtime/helpers/defineProperty"), require("react-dom"), require("@babel/runtime/helpers/typeof"), 
-exports.default = base_dist_reactSelect.Select, exports.defaultProps = base_dist_reactSelect.defaultProps;
+require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/typeof"), 
+require("react-input-autosize"), require("@babel/runtime/helpers/defineProperty"), 
+require("react-dom"), require("memoize-one"), exports.default = base_dist_reactSelect.Select, 
+exports.defaultProps = base_dist_reactSelect.defaultProps;

base/dist/react-select.esm.js

 import '@babel/runtime/helpers/extends';
-import '../../dist/index-825d3bb1.esm.js';
+import '../../dist/index-f6c14412.esm.js';
 import '@babel/runtime/helpers/classCallCheck';
@@ -8,9 +8,10 @@ import '@babel/runtime/helpers/createClass';
 import 'react';
-export { S as default, a as defaultProps } from '../../dist/Select-d680feef.esm.js';
+export { S as default, b as defaultProps } from '../../dist/Select-4a950554.esm.js';
 import '@emotion/react';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/typeof';
 import 'react-input-autosize';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dom';
-import '@babel/runtime/helpers/typeof';
+import 'memoize-one';

base/package.json

 {
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",
-  "browser": {
-    "./dist/react-select.cjs.js": "./dist/react-select.browser.cjs.js",
-    "./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
-  },
   "preconstruct": {
@@ -9,0 +5,0 @@ "source": "../src/Select"

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

@@ -10,13 +10,14 @@ 'use strict';
 var _inherits = require('@babel/runtime/helpers/inherits');
-var index = require('../../dist/index-ee19cae6.cjs.dev.js');
+var index = require('../../dist/index-1793e281.cjs.dev.js');
 var React = require('react');
-var base_dist_reactSelect = require('../../dist/Select-fb6a965c.cjs.dev.js');
-var stateManager = require('../../dist/stateManager-0a7207cf.cjs.dev.js');
+var base_dist_reactSelect = require('../../dist/Select-59696ec1.cjs.dev.js');
+var stateManager = require('../../dist/stateManager-f952989a.cjs.dev.js');
 require('@emotion/react');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
 require('@babel/runtime/helpers/objectWithoutProperties');
+require('@babel/runtime/helpers/typeof');
 require('react-input-autosize');
 require('@babel/runtime/helpers/defineProperty');
 require('react-dom');
-require('@babel/runtime/helpers/typeof');
+require('memoize-one');
 
@@ -35,5 +36,6 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
   var option = arguments.length > 1 ? arguments[1] : undefined;
+  var accessors = arguments.length > 2 ? arguments[2] : undefined;
   var candidate = String(inputValue).toLowerCase();
-  var optionValue = String(option.value).toLowerCase();
-  var optionLabel = String(option.label).toLowerCase();
+  var optionValue = String(accessors.getOptionValue(option)).toLowerCase();
+  var optionLabel = String(accessors.getOptionLabel(option)).toLowerCase();
   return optionValue === candidate || optionLabel === candidate;
@@ -46,7 +48,7 @@ };
   },
-  isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions) {
+  isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions, accessors) {
     return !(!inputValue || selectValue.some(function (option) {
-      return compareOption(inputValue, option);
+      return compareOption(inputValue, option, accessors);
     }) || selectOptions.some(function (option) {
-      return compareOption(inputValue, option);
+      return compareOption(inputValue, option, accessors);
     }));
@@ -60,3 +62,5 @@ },
     };
-  }
+  },
+  getOptionValue: base_dist_reactSelect.getOptionValue,
+  getOptionLabel: base_dist_reactSelect.getOptionLabel
 };
@@ -105,3 +109,4 @@ var defaultProps = index._objectSpread2({
               action: 'create-option',
-              name: name
+              name: name,
+              option: newOptionData
             };
@@ -163,7 +168,12 @@
             isValidNewOption = props.isValidNewOption,
-            value = props.value;
+            value = props.value,
+            getOptionValue = props.getOptionValue,
+            getOptionLabel = props.getOptionLabel;
         var options = props.options || [];
         var newOption = state.newOption;
 
-        if (isValidNewOption(inputValue, index.cleanValue(value), options)) {
+        if (isValidNewOption(inputValue, index.cleanValue(value), options, {
+          getOptionValue: getOptionValue,
+          getOptionLabel: getOptionLabel
+        })) {
           newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
@@ -170,0 +180,0 @@ } else {

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

@@ -7,3 +7,3 @@ "use strict";
 
-var _extends = require("@babel/runtime/helpers/extends"), _toConsumableArray = require("@babel/runtime/helpers/toConsumableArray"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _inherits = require("@babel/runtime/helpers/inherits"), index = require("../../dist/index-db3bdb30.cjs.prod.js"), React = require("react"), base_dist_reactSelect = require("../../dist/Select-c074111f.cjs.prod.js"), stateManager = require("../../dist/stateManager-351f4bd6.cjs.prod.js");
+var _extends = require("@babel/runtime/helpers/extends"), _toConsumableArray = require("@babel/runtime/helpers/toConsumableArray"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _inherits = require("@babel/runtime/helpers/inherits"), index = require("../../dist/index-f17570e5.cjs.prod.js"), React = require("react"), base_dist_reactSelect = require("../../dist/Select-c2db9bf6.cjs.prod.js"), stateManager = require("../../dist/stateManager-ea539aa9.cjs.prod.js");
 
@@ -17,7 +17,8 @@ function _interopDefault(e) {
 require("@emotion/react"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
-require("@babel/runtime/helpers/objectWithoutProperties"), require("react-input-autosize"), 
-require("@babel/runtime/helpers/defineProperty"), require("react-dom"), require("@babel/runtime/helpers/typeof");
+require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/typeof"), 
+require("react-input-autosize"), require("@babel/runtime/helpers/defineProperty"), 
+require("react-dom"), require("memoize-one");
 
 var _extends__default = _interopDefault(_extends), _toConsumableArray__default = _interopDefault(_toConsumableArray), _classCallCheck__default = _interopDefault(_classCallCheck), _createClass__default = _interopDefault(_createClass), _inherits__default = _interopDefault(_inherits), React__default = _interopDefault(React), compareOption = function() {
-  var inputValue = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", option = arguments.length > 1 ? arguments[1] : void 0, candidate = String(inputValue).toLowerCase(), optionValue = String(option.value).toLowerCase(), optionLabel = String(option.label).toLowerCase();
+  var inputValue = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : "", option = arguments.length > 1 ? arguments[1] : void 0, accessors = arguments.length > 2 ? arguments[2] : void 0, candidate = String(inputValue).toLowerCase(), optionValue = String(accessors.getOptionValue(option)).toLowerCase(), optionLabel = String(accessors.getOptionLabel(option)).toLowerCase();
   return optionValue === candidate || optionLabel === candidate;
@@ -28,7 +29,7 @@ }, builtins = {
   },
-  isValidNewOption: function(inputValue, selectValue, selectOptions) {
+  isValidNewOption: function(inputValue, selectValue, selectOptions, accessors) {
     return !(!inputValue || selectValue.some((function(option) {
-      return compareOption(inputValue, option);
+      return compareOption(inputValue, option, accessors);
     })) || selectOptions.some((function(option) {
-      return compareOption(inputValue, option);
+      return compareOption(inputValue, option, accessors);
     })));
@@ -42,3 +43,5 @@ },
     };
-  }
+  },
+  getOptionValue: base_dist_reactSelect.getOptionValue,
+  getOptionLabel: base_dist_reactSelect.getOptionLabel
 }, defaultProps = index._objectSpread2({
@@ -62,3 +65,4 @@ allowCreateWhileLoading: !1,
             action: "create-option",
-            name: name
+            name: name,
+            option: newOptionData
           };
@@ -99,5 +103,8 @@ onChange(isMulti ? [].concat(_toConsumableArray__default.default(index.cleanValue(value)), [ newOptionData ]) : newOptionData, newActionMeta);
       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;
+        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, getOptionValue = props.getOptionValue, getOptionLabel = props.getOptionLabel, options = props.options || [], newOption = state.newOption;
         return {
-          newOption: newOption = isValidNewOption(inputValue, index.cleanValue(value), options) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : void 0,
+          newOption: newOption = isValidNewOption(inputValue, index.cleanValue(value), options, {
+            getOptionValue: getOptionValue,
+            getOptionLabel: getOptionLabel
+          }) ? getNewOptionData(inputValue, formatCreateLabel(inputValue)) : void 0,
           options: !allowCreateWhileLoading && isLoading || !newOption ? options : "first" === createOptionPosition ? [ newOption ].concat(_toConsumableArray__default.default(options)) : [].concat(_toConsumableArray__default.default(options), [ newOption ])
@@ -104,0 +111,0 @@ };

creatable/dist/react-select.esm.js

@@ -6,13 +6,14 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
-import { a as _objectSpread2, _ as _createSuper, D as cleanValue } from '../../dist/index-825d3bb1.esm.js';
+import { a as _objectSpread2, _ as _createSuper, E as cleanValue } from '../../dist/index-f6c14412.esm.js';
 import React, { Component } from 'react';
-import { S as Select } from '../../dist/Select-d680feef.esm.js';
-import { m as manageState } from '../../dist/stateManager-6ed41a9f.esm.js';
+import { S as Select, g as getOptionValue, a as getOptionLabel } from '../../dist/Select-4a950554.esm.js';
+import { m as manageState } from '../../dist/stateManager-0da47751.esm.js';
 import '@emotion/react';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
 import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/typeof';
 import 'react-input-autosize';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dom';
-import '@babel/runtime/helpers/typeof';
+import 'memoize-one';
 
@@ -22,5 +23,6 @@ var compareOption = function compareOption() {
   var option = arguments.length > 1 ? arguments[1] : undefined;
+  var accessors = arguments.length > 2 ? arguments[2] : undefined;
   var candidate = String(inputValue).toLowerCase();
-  var optionValue = String(option.value).toLowerCase();
-  var optionLabel = String(option.label).toLowerCase();
+  var optionValue = String(accessors.getOptionValue(option)).toLowerCase();
+  var optionLabel = String(accessors.getOptionLabel(option)).toLowerCase();
   return optionValue === candidate || optionLabel === candidate;
@@ -33,7 +35,7 @@ };
   },
-  isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions) {
+  isValidNewOption: function isValidNewOption(inputValue, selectValue, selectOptions, accessors) {
     return !(!inputValue || selectValue.some(function (option) {
-      return compareOption(inputValue, option);
+      return compareOption(inputValue, option, accessors);
     }) || selectOptions.some(function (option) {
-      return compareOption(inputValue, option);
+      return compareOption(inputValue, option, accessors);
     }));
@@ -47,3 +49,5 @@ },
     };
-  }
+  },
+  getOptionValue: getOptionValue,
+  getOptionLabel: getOptionLabel
 };
@@ -92,3 +96,4 @@ var defaultProps = _objectSpread2({
               action: 'create-option',
-              name: name
+              name: name,
+              option: newOptionData
             };
@@ -150,7 +155,12 @@
             isValidNewOption = props.isValidNewOption,
-            value = props.value;
+            value = props.value,
+            getOptionValue = props.getOptionValue,
+            getOptionLabel = props.getOptionLabel;
         var options = props.options || [];
         var newOption = state.newOption;
 
-        if (isValidNewOption(inputValue, cleanValue(value), options)) {
+        if (isValidNewOption(inputValue, cleanValue(value), options, {
+          getOptionValue: getOptionValue,
+          getOptionLabel: getOptionLabel
+        })) {
           newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
@@ -157,0 +167,0 @@ } else {

creatable/package.json

 {
   "main": "dist/react-select.cjs.js",
   "module": "dist/react-select.esm.js",
-  "browser": {
-    "./dist/react-select.cjs.js": "./dist/react-select.browser.cjs.js",
-    "./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
-  },
   "preconstruct": {
@@ -9,0 +5,0 @@ "source": "../src/Creatable"

dist/react-select.cjs.dev.js

@@ -5,8 +5,8 @@ 'use strict';
 
-var base_dist_reactSelect = require('./Select-fb6a965c.cjs.dev.js');
-var stateManager = require('./stateManager-0a7207cf.cjs.dev.js');
+var base_dist_reactSelect = require('./Select-59696ec1.cjs.dev.js');
+var stateManager = require('./stateManager-f952989a.cjs.dev.js');
 var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
 var _createClass = require('@babel/runtime/helpers/createClass');
 var _inherits = require('@babel/runtime/helpers/inherits');
-var index$1 = require('./index-ee19cae6.cjs.dev.js');
+var index$1 = require('./index-1793e281.cjs.dev.js');
 var React = require('react');
@@ -20,6 +20,6 @@ var react = require('@emotion/react');
 require('@babel/runtime/helpers/taggedTemplateLiteral');
+require('@babel/runtime/helpers/typeof');
 require('react-input-autosize');
 require('@babel/runtime/helpers/defineProperty');
 require('react-dom');
-require('@babel/runtime/helpers/typeof');
 
@@ -26,0 +26,0 @@ function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }

dist/react-select.cjs.prod.js

@@ -7,3 +7,3 @@ "use strict";
 
-var base_dist_reactSelect = require("./Select-c074111f.cjs.prod.js"), stateManager = require("./stateManager-351f4bd6.cjs.prod.js"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _inherits = require("@babel/runtime/helpers/inherits"), index$1 = require("./index-db3bdb30.cjs.prod.js"), React = require("react"), react = require("@emotion/react"), createCache = require("@emotion/cache"), memoizeOne = require("memoize-one");
+var base_dist_reactSelect = require("./Select-c2db9bf6.cjs.prod.js"), stateManager = require("./stateManager-ea539aa9.cjs.prod.js"), _classCallCheck = require("@babel/runtime/helpers/classCallCheck"), _createClass = require("@babel/runtime/helpers/createClass"), _inherits = require("@babel/runtime/helpers/inherits"), index$1 = require("./index-f17570e5.cjs.prod.js"), React = require("react"), react = require("@emotion/react"), createCache = require("@emotion/cache"), memoizeOne = require("memoize-one");
 
@@ -18,4 +18,4 @@ function _interopDefault(e) {
 require("@babel/runtime/helpers/objectWithoutProperties"), require("@babel/runtime/helpers/taggedTemplateLiteral"), 
-require("react-input-autosize"), require("@babel/runtime/helpers/defineProperty"), 
-require("react-dom"), require("@babel/runtime/helpers/typeof");
+require("@babel/runtime/helpers/typeof"), require("react-input-autosize"), require("@babel/runtime/helpers/defineProperty"), 
+require("react-dom");
 
@@ -22,0 +22,0 @@ var _classCallCheck__default = _interopDefault(_classCallCheck), _createClass__default = _interopDefault(_createClass), _inherits__default = _interopDefault(_inherits), React__default = _interopDefault(React), createCache__default = _interopDefault(createCache), memoizeOne__default = _interopDefault(memoizeOne), NonceProvider = function(_Component) {

dist/react-select.esm.js

@@ -1,9 +0,9 @@
-import { S as Select } from './Select-d680feef.esm.js';
-export { c as createFilter, d as defaultTheme, m as mergeStyles } from './Select-d680feef.esm.js';
-import { m as manageState } from './stateManager-6ed41a9f.esm.js';
+import { S as Select } from './Select-4a950554.esm.js';
+export { c as createFilter, d as defaultTheme, m as mergeStyles } from './Select-4a950554.esm.js';
+import { m as manageState } from './stateManager-0da47751.esm.js';
 import _classCallCheck from '@babel/runtime/helpers/esm/classCallCheck';
 import _createClass from '@babel/runtime/helpers/esm/createClass';
 import _inherits from '@babel/runtime/helpers/esm/inherits';
-import { _ as _createSuper } from './index-825d3bb1.esm.js';
-export { c as components } from './index-825d3bb1.esm.js';
+import { _ as _createSuper } from './index-f6c14412.esm.js';
+export { c as components } from './index-f6c14412.esm.js';
 import React, { Component } from 'react';
@@ -17,6 +17,6 @@ import { CacheProvider } from '@emotion/react';
 import '@babel/runtime/helpers/taggedTemplateLiteral';
+import '@babel/runtime/helpers/typeof';
 import 'react-input-autosize';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dom';
-import '@babel/runtime/helpers/typeof';
 
@@ -23,0 +23,0 @@ var NonceProvider = /*#__PURE__*/function (_Component) {

package.json

 {
   "name": "react-select",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "description": "A Select control built with and for ReactJS",
@@ -59,7 +59,3 @@ "main": "dist/react-select.cjs.js",
     ]
-  },
-  "browser": {
-    "./dist/react-select.cjs.js": "./dist/react-select.browser.cjs.js",
-    "./dist/react-select.esm.js": "./dist/react-select.browser.esm.js"
   }
 }

src/__tests__/Creatable.test.js

@@ -257,1 +257,49 @@ import React from 'react';
 );
+
+const CUSTOM_OPTIONS = [
+  { key: 'testa', title: 'Test A' },
+  { key: 'testb', title: 'Test B' },
+  { key: 'testc', title: 'Test C' },
+  { key: 'testd', title: 'Test D' },
+];
+
+cases(
+  'compareOption() method',
+  ({ props = { options: CUSTOM_OPTIONS } }) => {
+    props = { ...BASIC_PROPS, ...props };
+
+    const getOptionLabel = ({ title }) => title;
+    const getOptionValue = ({ key }) => key;
+
+    const { container, rerender } = render(
+      <Creatable
+        menuIsOpen
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        {...props}
+      />
+    );
+
+    rerender(
+      <Creatable
+        menuIsOpen
+        getOptionLabel={getOptionLabel}
+        getOptionValue={getOptionValue}
+        inputValue="testc"
+        {...props}
+      />
+    );
+    expect(container.querySelector('.react-select__menu').textContent).toEqual(
+      'Test C'
+    );
+  },
+  {
+    'single select > should handle options with custom structure': {},
+    'single select > should handle options with custom structure': {
+      props: {
+        isMulti: true,
+        options: CUSTOM_OPTIONS,
+      },
+    },
+  }
+);

src/accessibility/index.js

 // @flow
 
-import { type OptionType, type OptionsType } from '../types';
+import {
+  type ActionMeta,
+  type OptionType,
+  type OptionsType,
+  type ValueType,
+} from '../types';
 
-export type InstructionsContext = {
+export type OptionContextType = 'menu' | 'value';
+
+export type GuidanceContextType = 'menu' | 'input' | 'value';
+
+export type AriaLiveProp = 'polite' | 'off' | 'assertive';
+
+export type AriaSelectionType = ActionMeta & {
+  value?: ValueType,
+};
+
+export type AriaGuidanceProps = {
+  // String value of selectProp aria-label
+  'aria-label'?: string,
+  // String indicating user's current context and availabile keyboard interactivity
+  context: GuidanceContextType,
+  // Boolean value of selectProp isSearchable
   isSearchable?: boolean,
+  // Boolean value of selectProp isMulti
   isMulti?: boolean,
-  label?: string,
+  // Boolean value of selectProp isDisabled
   isDisabled?: boolean,
+  // Boolean value of selectProp tabSelectsValue
   tabSelectsValue?: boolean,
 };
-export type ValueEventContext = { value: string, isDisabled?: boolean };
 
-export const instructionsAriaMessage = (
-  event: string,
-  context?: InstructionsContext = {}
-) => {
-  const { isSearchable, isMulti, label, isDisabled, tabSelectsValue } = context;
-  switch (event) {
-    case 'menu':
-      return `Use Up and Down to choose options${
-        isDisabled ? '' : ', press Enter to select the currently focused option'
-      }, press Escape to exit the menu${
-        tabSelectsValue
-          ? ', press Tab to select the option and exit the menu'
-          : ''
-      }.`;
-    case 'input':
-      return `${label ? label : 'Select'} is focused ${
-        isSearchable ? ',type to refine list' : ''
-      }, press Down to open the menu, ${
-        isMulti ? ' press left to focus selected values' : ''
-      }`;
-    case 'value':
-      return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
-  }
+export type AriaOnChangeProps = ActionMeta & {
+  // selected option(s) of the Select
+  selectValue?: ValueType,
+  // String derived label from selected or removed option/value
+  label?: string,
+  // Boolean indicating if the selected menu option is disabled
+  isDisabled?: boolean,
 };
 
-export const valueEventAriaMessage = (
-  event: string,
-  context: ValueEventContext
-) => {
-  const { value, isDisabled } = context;
-  if (!value) return;
-  switch (event) {
-    case 'deselect-option':
-    case 'pop-value':
-    case 'remove-value':
-      return `option ${value}, deselected.`;
-    case 'select-option':
-      return isDisabled
-        ? `option ${value} is disabled. Select another option.`
-        : `option ${value}, selected.`;
-  }
+export type AriaOnFilterProps = {
+  // String indicating current inputValue of the input
+  inputValue: string,
+  // String dervied from selectProp screenReaderStatus
+  resultsMessage: string,
 };
 
-export const valueFocusAriaMessage = ({
-  focusedValue,
-  getOptionLabel,
-  selectValue,
-}: {
-  focusedValue: OptionType,
-  getOptionLabel: (option: OptionType) => string,
-  selectValue: OptionsType,
-}) =>
-  `value ${getOptionLabel(focusedValue)} focused, ${selectValue.indexOf(
-    focusedValue
-  ) + 1} of ${selectValue.length}.`;
+export type AriaOnFocusProps = {
+  // String indicating whether the option was focused in the menu or as (multi-) value
+  context: OptionContextType,
+  // Option that is being focused
+  focused: OptionType,
+  // Boolean indicating whether focused menu option has been disabled
+  isDisabled?: boolean,
+  // Boolean indicating whether focused menu option is an already selcted option
+  isSelected?: boolean,
+  // String derived label from focused option/value
+  label?: string,
+  // Options provided as props to Select used to determine indexing
+  options?: OptionsType,
+  // selected option(s) of the Select
+  selectValue?: ValueType,
+};
 
-export const optionFocusAriaMessage = ({
-  focusedOption,
-  getOptionLabel,
-  options,
-}: {
-  focusedOption: OptionType,
-  getOptionLabel: (option: OptionType) => string,
-  options: OptionsType,
-}) =>
-  `option ${getOptionLabel(focusedOption)} focused${
-    focusedOption.isDisabled ? ' disabled' : ''
-  }, ${options.indexOf(focusedOption) + 1} of ${options.length}.`;
+export type AriaLiveMessagesProps = {
+  // Guidance message used to convey component state and specific keyboard interactivity
+  guidance?: (props: AriaGuidanceProps) => string,
+  // OnChange message used to convey changes to value but also called when user selects disabled option
+  onChange?: (props: AriaOnChangeProps) => string,
+  // OnFilter message used to convey information about filtered results displayed in the menu
+  onFilter?: (props: AriaOnFilterProps) => string,
+  // OnFocus message used to convey information about the currently focused option or value
+  onFocus?: (props: AriaOnFocusProps) => string,
+};
 
-export const resultsAriaMessage = ({
-  inputValue,
-  screenReaderMessage,
-}: {
-  inputValue: string,
-  screenReaderMessage: string,
-}) =>
-  `${screenReaderMessage}${
-    inputValue ? ' for search term ' + inputValue : ''
-  }.`;
+export const defaultAriaLiveMessages = {
+  guidance: (props: AriaGuidanceProps) => {
+    const {
+      isSearchable,
+      isMulti,
+      isDisabled,
+      tabSelectsValue,
+      context,
+    } = props;
+    switch (context) {
+      case 'menu':
+        return `Use Up and Down to choose options${
+          isDisabled
+            ? ''
+            : ', press Enter to select the currently focused option'
+        }, press Escape to exit the menu${
+          tabSelectsValue
+            ? ', press Tab to select the option and exit the menu'
+            : ''
+        }.`;
+      case 'input':
+        return `${props['aria-label'] || 'Select'} is focused ${
+          isSearchable ? ',type to refine list' : ''
+        }, press Down to open the menu, ${
+          isMulti ? ' press left to focus selected values' : ''
+        }`;
+      case 'value':
+        return 'Use left and right to toggle between focused values, press Backspace to remove the currently focused value';
+      default:
+        return '';
+    }
+  },
+
+  onChange: (props: AriaOnChangeProps) => {
+    const { action, label = '', isDisabled } = props;
+    switch (action) {
+      case 'deselect-option':
+      case 'pop-value':
+      case 'remove-value':
+        return `option ${label}, deselected.`;
+      case 'select-option':
+        return isDisabled
+          ? `option ${label} is disabled. Select another option.`
+          : `option ${label}, selected.`;
+      default:
+        return '';
+    }
+  },
+
+  onFocus: (props: AriaOnFocusProps) => {
+    const {
+      context,
+      focused = {},
+      options,
+      label = '',
+      selectValue,
+      isDisabled,
+      isSelected,
+    } = props;
+
+    const getArrayIndex = (arr, item) =>
+      arr && arr.length ? `${arr.indexOf(item) + 1} of ${arr.length}` : '';
+
+    if (context === 'value' && selectValue) {
+      return `value ${label} focused, ${getArrayIndex(selectValue, focused)}.`;
+    }
+
+    if (context === 'menu') {
+      const disabled = isDisabled ? ' disabled' : '';
+      const status = `${isSelected ? 'selected' : 'focused'}${disabled}`;
+      return `option ${label} ${status}, ${getArrayIndex(options, focused)}.`;
+    }
+    return '';
+  },
+
+  onFilter: (props: AriaOnFilterProps) => {
+    const { inputValue, resultsMessage } = props;
+    return `${resultsMessage}${
+      inputValue ? ' for search term ' + inputValue : ''
+    }.`;
+  },
+};

src/components/Group.js

@@ -5,2 +5,3 @@ // @flow
 import { jsx } from '@emotion/react';
+import { cleanCommonProps } from '../utils';
 
@@ -20,2 +21,4 @@ import type { CommonProps } from '../types';
   label: Node,
+  /* The data of the group. */
+  data: any,
 };
@@ -76,8 +79,9 @@ export type GroupProps = CommonProps & ComponentProps;
 export const GroupHeading = (props: any) => {
-  const { className, cx, getStyles, theme, selectProps, ...cleanProps } = props;
+  const { getStyles, cx, className } = props;
+  const { data, ...innerProps } = cleanCommonProps(props);
   return (
     <div
-      css={getStyles('groupHeading', { theme, ...cleanProps })}
+      css={getStyles('groupHeading', props)}
       className={cx({ 'group-heading': true }, className)}
-      {...cleanProps}
+      {...innerProps}
     />
@@ -84,0 +88,0 @@ );

src/components/Input.js

@@ -7,6 +7,6 @@ // @flow
 
-import type { PropsWithStyles, ClassNamesState } from '../types';
+import type { CommonProps } from '../types';
+import { cleanCommonProps } from '../utils';
 
-export type InputProps = PropsWithStyles & {
-  cx: (?ClassNamesState, ?string) => string | void,
+export type InputProps = CommonProps & {
   /** Reference to the internal element */
@@ -18,3 +18,2 @@ innerRef: (ElementRef<*>) => void,
   isDisabled?: boolean,
-  className?: string,
   /** The ID of the form that the input belongs to */
@@ -45,24 +44,21 @@ form?: string,
 
-const Input = ({
-  className,
-  cx,
-  getStyles,
-  innerRef,
-  isHidden,
-  isDisabled,
-  theme,
-  selectProps,
-  ...props
-}: InputProps) => (
-  <div css={getStyles('input', { theme, ...props })}>
-    <AutosizeInput
-      className={cx({ input: true }, className)}
-      inputRef={innerRef}
-      inputStyle={inputStyle(isHidden)}
-      disabled={isDisabled}
-      {...props}
-    />
-  </div>
-);
+const Input = (props: InputProps) => {
+  const { className, cx, getStyles } = props;
+  const { innerRef, isDisabled, isHidden, ...innerProps } = cleanCommonProps(
+    props
+  );
 
+  return (
+    <div css={getStyles('input', props)}>
+      <AutosizeInput
+        className={cx({ input: true }, className)}
+        inputRef={innerRef}
+        inputStyle={inputStyle(isHidden)}
+        disabled={isDisabled}
+        {...innerProps}
+      />
+    </div>
+  );
+};
+
 export default Input;

src/Creatable.js

@@ -15,3 +15,12 @@ // @flow
 import manageState from './stateManager';
+import {
+  getOptionValue as baseGetOptionValue,
+  getOptionLabel as baseGetOptionLabel,
+} from './builtins';
 
+type AccessorType = {|
+  getOptionValue: typeof baseGetOptionValue,
+  getOptionLabel: typeof baseGetOptionLabel,
+|};
+
 export type DefaultCreatableProps = {|
@@ -29,6 +38,7 @@ /* Allow options to be created while the `isLoading` prop is true. Useful to
      the current input value, select value and options array. */
-  isValidNewOption: (string, OptionsType, OptionsType) => boolean,
+  isValidNewOption: (string, OptionsType, OptionsType, AccessorType) => boolean,
   /* Returns the data for the new option when it is created. Used to display the
      value, and is passed to `onChange`. */
   getNewOptionData: (string, Node) => OptionType,
+  ...AccessorType,
 |};
@@ -53,6 +63,6 @@ export type CreatableProps = {
 
-const compareOption = (inputValue = '', option) => {
+const compareOption = (inputValue = '', option, accessors) => {
   const candidate = String(inputValue).toLowerCase();
-  const optionValue = String(option.value).toLowerCase();
-  const optionLabel = String(option.label).toLowerCase();
+  const optionValue = String(accessors.getOptionValue(option)).toLowerCase();
+  const optionLabel = String(accessors.getOptionLabel(option)).toLowerCase();
   return optionValue === candidate || optionLabel === candidate;
@@ -66,8 +76,11 @@ };
     selectValue: OptionsType,
-    selectOptions: OptionsType
+    selectOptions: OptionsType,
+    accessors: AccessorType
   ) =>
     !(
       !inputValue ||
-      selectValue.some(option => compareOption(inputValue, option)) ||
-      selectOptions.some(option => compareOption(inputValue, option))
+      selectValue.some(option =>
+        compareOption(inputValue, option, accessors)
+      ) ||
+      selectOptions.some(option => compareOption(inputValue, option, accessors))
     ),
@@ -79,2 +92,4 @@ getNewOptionData: (inputValue: string, optionLabel: Node) => ({
   }),
+  getOptionValue: baseGetOptionValue,
+  getOptionLabel: baseGetOptionLabel,
 };
@@ -117,6 +132,13 @@
         value,
+        getOptionValue,
+        getOptionLabel,
       } = props;
       const options = props.options || [];
       let { newOption } = state;
-      if (isValidNewOption(inputValue, cleanValue(value), options)) {
+      if (
+        isValidNewOption(inputValue, cleanValue(value), options, {
+          getOptionValue,
+          getOptionLabel,
+        })
+      ) {
         newOption = getNewOptionData(inputValue, formatCreateLabel(inputValue));
@@ -156,3 +178,7 @@ } else {
           const newOptionData = getNewOptionData(inputValue, inputValue);
-          const newActionMeta = { action: 'create-option', name };
+          const newActionMeta = {
+            action: 'create-option',
+            name,
+            option: newOptionData,
+          };
           if (isMulti) {
@@ -159,0 +185,0 @@ onChange([...cleanValue(value), newOptionData], newActionMeta);

src/filters.js

@@ -12,3 +12,6 @@ // @flow
 import { stripDiacritics } from './diacritics';
+import memoizeOne from 'memoize-one';
 
+const memoizedStripDiacriticsForInput = memoizeOne(stripDiacritics);
+
 const trimString = str => str.replace(/^\s+|\s+$/g, '');
@@ -36,3 +39,3 @@ const defaultStringify = option => `${option.label} ${option.value}`;
   if (ignoreAccents) {
-    input = stripDiacritics(input);
+    input = memoizedStripDiacriticsForInput(input);
     candidate = stripDiacritics(candidate);
@@ -39,0 +42,0 @@ }

src/internal/useScrollCapture.js

 // @flow
 
 import { useCallback, useEffect, useRef } from 'react';
+import { supportsPassiveEvents } from '../utils';
 
@@ -104,11 +105,12 @@ const cancelScroll = (event: SyntheticEvent<HTMLElement>) => {
 
+      const notPassive = supportsPassiveEvents ? { passive: false } : false;
       // all the if statements are to appease Flow 😢
       if (typeof el.addEventListener === 'function') {
-        el.addEventListener('wheel', onWheel, false);
+        el.addEventListener('wheel', onWheel, notPassive);
       }
       if (typeof el.addEventListener === 'function') {
-        el.addEventListener('touchstart', onTouchStart, false);
+        el.addEventListener('touchstart', onTouchStart, notPassive);
       }
       if (typeof el.addEventListener === 'function') {
-        el.addEventListener('touchmove', onTouchMove, false);
+        el.addEventListener('touchmove', onTouchMove, notPassive);
       }
@@ -115,0 +117,0 @@ },

src/Select.js

@@ -5,13 +5,10 @@ // @flow
 import { MenuPlacer } from './components/Menu';
+import LiveRegion from './components/LiveRegion';
 
 import { createFilter } from './filters';
-import { A11yText, DummyInput, ScrollManager } from './internal/index';
+import { DummyInput, ScrollManager } from './internal/index';
 import {
-  valueFocusAriaMessage,
-  optionFocusAriaMessage,
-  resultsAriaMessage,
-  valueEventAriaMessage,
-  instructionsAriaMessage,
-  type InstructionsContext,
-  type ValueEventContext,
+  type AriaLiveProp,
+  type AriaLiveMessagesProps,
+  type AriaSelectionType,
 } from './accessibility/index';
@@ -75,2 +72,6 @@
   'aria-labelledby'?: string,
+  /* Used to set the priority with which screen reader should treat updates to live regions. The possible settings are: off, polite (default) or assertive */
+  'aria-live'?: AriaLiveProp,
+  /* Customize the messages used by the aria-live component */
+  ariaLiveMessages?: AriaLiveMessagesProps,
   /* Focus the control when it is mounted */
@@ -135,3 +136,8 @@ autoFocus?: boolean,
   formatOptionLabel?: (OptionType, FormatOptionLabelMeta) => Node,
-  /* Resolves option data to a string to be displayed as the label by components */
+  /*
+    Resolves option data to a string to be displayed as the label by components
+
+    Note: Failure to resolve to a string type can interfere with filtering and
+    screen reader support.
+  */
   getOptionLabel: typeof getOptionLabelBuiltin,
@@ -236,3 +242,3 @@ /* Resolves option data to a string to compare options and specify value attributes */
   /* Sets the tabIndex attribute on the input */
-  tabIndex: string,
+  tabIndex: number | string,
   /* Select the currently focused option when the user presses tab */
@@ -247,2 +253,3 @@ tabSelectsValue: boolean,
 export const defaultProps = {
+  'aria-live': 'polite',
   backspaceRemovesValue: true,
@@ -288,4 +295,3 @@ blurInputOnSelect: isTouchCapable(),
 type State = {
-  ariaLiveSelection: string,
-  ariaLiveContext: string,
+  ariaSelection: AriaSelectionType | null,
   inputIsHidden: boolean,
@@ -480,4 +486,3 @@ isFocused: boolean,
   state = {
-    ariaLiveSelection: '',
-    ariaLiveContext: '',
+    ariaSelection: null,
     focusedOption: null,
@@ -634,7 +639,2 @@ focusedValue: null,
   onMenuClose() {
-    const { isSearchable, isMulti } = this.props;
-    this.announceAriaLiveContext({
-      event: 'input',
-      context: { isSearchable, isMulti },
-    });
     this.onInputChange('', { action: 'menu-close' });
@@ -667,6 +667,5 @@ this.props.onMenuClose();
     const focusableOptions = this.buildFocusableOptions();
-    const { isMulti, tabSelectsValue } = this.props;
     let openAtIndex = focusOption === 'first' ? 0 : focusableOptions.length - 1;
 
-    if (!isMulti) {
+    if (!this.props.isMulti) {
       const selectedIndex = focusableOptions.indexOf(selectValue[0]);
@@ -687,17 +686,11 @@ if (selectedIndex > -1) {
       },
-      () => {
-        this.onMenuOpen();
-        this.announceAriaLiveContext({
-          event: 'menu',
-          context: { tabSelectsValue },
-        });
-      }
+      () => this.onMenuOpen()
     );
   }
+
   focusValue(direction: 'previous' | 'next') {
-    const { isMulti, isSearchable } = this.props;
     const { selectValue, focusedValue } = this.state;
 
     // Only multiselects support value focusing
-    if (!isMulti) return;
+    if (!this.props.isMulti) return;
 
@@ -711,3 +704,2 @@ this.setState({
       focusedIndex = -1;
-      this.announceAriaLiveContext({ event: 'value' });
     }
@@ -737,10 +729,2 @@
     }
-
-    if (nextFocus === -1) {
-      this.announceAriaLiveContext({
-        event: 'input',
-        context: { isSearchable, isMulti },
-      });
-    }
-
     this.setState({
@@ -753,4 +737,4 @@ inputIsHidden: nextFocus !== -1,
   focusOption(direction: FocusDirection = 'first') {
-    const { pageSize, tabSelectsValue } = this.props;
-    const { focusedOption, selectValue } = this.state;
+    const { pageSize } = this.props;
+    const { focusedOption } = this.state;
     const options = this.getFocusableOptions();
@@ -763,6 +747,2 @@
       focusedIndex = -1;
-      this.announceAriaLiveContext({
-        event: 'menu',
-        context: { tabSelectsValue },
-      });
     }
@@ -788,13 +768,9 @@
     });
-    this.announceAriaLiveContext({
-      event: 'menu',
-      context: {
-        isDisabled: this.isOptionDisabled(options[nextFocus], selectValue),
-        tabSelectsValue,
-      },
-    });
   }
   onChange = (newValue: ValueType, actionMeta: ActionMeta) => {
     const { onChange, name } = this.props;
-    onChange(newValue, { ...actionMeta, name });
+    actionMeta.name = name;
+
+    this.ariaOnChange(newValue, actionMeta);
+    onChange(newValue, actionMeta);
   };
@@ -817,46 +793,24 @@ setValue = (
   selectOption = (newValue: OptionType) => {
-    const { blurInputOnSelect, isMulti } = this.props;
+    const { blurInputOnSelect, isMulti, name } = this.props;
     const { selectValue } = this.state;
+    const deselected = isMulti && this.isOptionSelected(newValue, selectValue);
+    const isDisabled = this.isOptionDisabled(newValue, selectValue);
 
-    if (isMulti) {
-      if (this.isOptionSelected(newValue, selectValue)) {
-        const candidate = this.getOptionValue(newValue);
-        this.setValue(
-          selectValue.filter(i => this.getOptionValue(i) !== candidate),
-          'deselect-option',
-          newValue
-        );
-        this.announceAriaLiveSelection({
-          event: 'deselect-option',
-          context: { value: this.getOptionLabel(newValue) },
-        });
+    if (deselected) {
+      const candidate = this.getOptionValue(newValue);
+      this.setValue(
+        selectValue.filter(i => this.getOptionValue(i) !== candidate),
+        'deselect-option',
+        newValue
+      );
+    } else if (!isDisabled) {
+      // Select option if option is not disabled
+      if (isMulti) {
+        this.setValue([...selectValue, newValue], 'select-option', newValue);
       } else {
-        if (!this.isOptionDisabled(newValue, selectValue)) {
-          this.setValue([...selectValue, newValue], 'select-option', newValue);
-          this.announceAriaLiveSelection({
-            event: 'select-option',
-            context: { value: this.getOptionLabel(newValue) },
-          });
-        } else {
-          // announce that option is disabled
-          this.announceAriaLiveSelection({
-            event: 'select-option',
-            context: { value: this.getOptionLabel(newValue), isDisabled: true },
-          });
-        }
+        this.setValue(newValue, 'select-option');
       }
     } else {
-      if (!this.isOptionDisabled(newValue, selectValue)) {
-        this.setValue(newValue, 'select-option');
-        this.announceAriaLiveSelection({
-          event: 'select-option',
-          context: { value: this.getOptionLabel(newValue) },
-        });
-      } else {
-        // announce that option is disabled
-        this.announceAriaLiveSelection({
-          event: 'select-option',
-          context: { value: this.getOptionLabel(newValue), isDisabled: true },
-        });
-      }
+      this.ariaOnChange(newValue, { action: 'select-option', name });
+      return;
     }
@@ -875,17 +829,5 @@
     );
-    const newValue = isMulti
-      ? newValueArray
-      : newValueArray.length > 0
-      ? newValueArray[0]
-      : null;
-    this.onChange(newValue, {
-      action: 'remove-value',
-      removedValue,
-    });
-    this.announceAriaLiveSelection({
-      event: 'remove-value',
-      context: {
-        value: removedValue ? this.getOptionLabel(removedValue) : '',
-      },
-    });
+    const newValue = isMulti ? newValueArray : newValueArray[0] || null;
+
+    this.onChange(newValue, { action: 'remove-value', removedValue });
     this.focusInput();
@@ -905,13 +847,4 @@ };
     const newValueArray = selectValue.slice(0, selectValue.length - 1);
-    const newValue = isMulti
-      ? newValueArray
-      : newValueArray.length > 0
-      ? newValueArray[0]
-      : null;
-    this.announceAriaLiveSelection({
-      event: 'pop-value',
-      context: {
-        value: lastSelectedValue ? this.getOptionLabel(lastSelectedValue) : '',
-      },
-    });
+    const newValue = isMulti ? newValueArray : newValueArray[0] || null;
+
     this.onChange(newValue, {
@@ -956,4 +889,4 @@ action: 'pop-value',
       getValue,
+      selectOption,
       setValue,
-      selectOption,
       props,
@@ -965,4 +898,4 @@ } = this;
     return {
+      clearValue,
       cx,
-      clearValue,
       getStyles,
@@ -975,4 +908,4 @@ getValue,
       selectOption,
+      selectProps: props,
       setValue,
-      selectProps: props,
       theme: this.getTheme(),
@@ -1014,27 +947,6 @@ };
   // ==============================
-  announceAriaLiveSelection = ({
-    event,
-    context,
-  }: {
-    event: string,
-    context: ValueEventContext,
-  }) => {
-    this.setState({
-      ariaLiveSelection: valueEventAriaMessage(event, context),
-    });
+
+  ariaOnChange = (value: ValueType, actionMeta: ActionMeta) => {
+    this.setState({ ariaSelection: { value, ...actionMeta } });
   };
-  announceAriaLiveContext = ({
-    event,
-    context,
-  }: {
-    event: string,
-    context?: InstructionsContext,
-  }) => {
-    this.setState({
-      ariaLiveContext: instructionsAriaMessage(event, {
-        ...context,
-        label: this.props['aria-label'],
-      }),
-    });
-  };
 
@@ -1048,5 +960,2 @@ hasValue() {
   }
-  countOptions() {
-    return this.getFocusableOptions().length;
-  }
   isClearable(): boolean {
@@ -1293,12 +1202,7 @@ const { isClearable, isMulti } = this.props;
   onInputFocus = (event: SyntheticFocusEvent<HTMLInputElement>) => {
-    const { isSearchable, isMulti } = this.props;
     if (this.props.onFocus) {
       this.props.onFocus(event);
     }
-    this.setState({ inputIsHiddenAfterUpdate: false });
-    this.announceAriaLiveContext({
-      event: 'input',
-      context: { isSearchable, isMulti },
-    });
     this.setState({
+      inputIsHiddenAfterUpdate: false,
       isFocused: true,
@@ -1477,37 +1381,2 @@ });
   // ==============================
-  constructAriaLiveMessage() {
-    const {
-      ariaLiveContext,
-      selectValue,
-      focusedValue,
-      focusedOption,
-    } = this.state;
-    const { options, menuIsOpen, inputValue, screenReaderStatus } = this.props;
-
-    // An aria live message representing the currently focused value in the select.
-    const focusedValueMsg = focusedValue
-      ? valueFocusAriaMessage({
-          focusedValue,
-          getOptionLabel: this.getOptionLabel,
-          selectValue,
-        })
-      : '';
-    // An aria live message representing the currently focused option in the select.
-    const focusedOptionMsg =
-      focusedOption && menuIsOpen
-        ? optionFocusAriaMessage({
-            focusedOption,
-            getOptionLabel: this.getOptionLabel,
-            options,
-          })
-        : '';
-    // An aria live message representing the set of focusable results and current searchterm/inputvalue.
-    const resultsMsg = resultsAriaMessage({
-      inputValue,
-      screenReaderMessage: screenReaderStatus({ count: this.countOptions() }),
-    });
-
-    return `${focusedValueMsg} ${focusedOptionMsg} ${resultsMsg} ${ariaLiveContext}`;
-  }
-
   renderInput() {
@@ -1524,2 +1393,3 @@ const {
     const { inputIsHidden } = this.state;
+    const { commonProps } = this;
 
@@ -1554,11 +1424,8 @@ const id = inputId || this.getElementId('input');
 
-    const { cx, theme, selectProps } = this.commonProps;
-
     return (
       <Input
+        {...commonProps}
         autoCapitalize="none"
         autoComplete="off"
         autoCorrect="off"
-        cx={cx}
-        getStyles={this.getStyles}
         id={id}
@@ -1571,7 +1438,5 @@ innerRef={this.getInputRef}
         onFocus={this.onInputFocus}
-        selectProps={selectProps}
         spellCheck="false"
         tabIndex={tabIndex}
         form={form}
-        theme={theme}
         type="text"
@@ -1954,10 +1819,23 @@ value={inputValue}
   renderLiveRegion() {
-    if (!this.state.isFocused) return null;
+    const { commonProps } = this;
+    const {
+      ariaSelection,
+      focusedOption,
+      focusedValue,
+      isFocused,
+      selectValue,
+    } = this.state;
+
+    const focusableOptions = this.getFocusableOptions();
+
     return (
-      <A11yText aria-live="polite">
-        <span id="aria-selection-event">
-          &nbsp;{this.state.ariaLiveSelection}
-        </span>
-        <span id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</span>
-      </A11yText>
+      <LiveRegion
+        {...commonProps}
+        ariaSelection={ariaSelection}
+        focusedOption={focusedOption}
+        focusedValue={focusedValue}
+        isFocused={isFocused}
+        selectValue={selectValue}
+        focusableOptions={focusableOptions}
+      />
     );
@@ -1964,0 +1842,0 @@ }

src/types.js

@@ -67,6 +67,6 @@ // @flow
   getStyles: (string, any) => {},
-  theme: Theme,
   getValue: () => ValueType,
   hasValue: boolean,
   isMulti: boolean,
+  isRtl: boolean,
   options: OptionsType,
@@ -76,2 +76,3 @@ selectOption: OptionType => void,
   setValue: (ValueType, ActionTypes) => void,
+  theme: Theme,
 };
@@ -90,2 +91,5 @@
   action: ActionTypes,
+  option?: OptionType,
+  removedValue?: OptionType,
+  name?: string,
 };
@@ -92,0 +96,0 @@

src/utils.js

@@ -6,2 +6,3 @@ // @flow
   ClassNamesState,
+  CommonProps,
   InputActionMeta,
@@ -72,2 +73,27 @@ OptionsType,
 // ==============================
+// Clean Common Props
+// ==============================
+
+export const cleanCommonProps = (props: CommonProps): any => {
+  //className
+  const {
+    className, // not listed in commonProps documentation, needs to be removed to allow Emotion to generate classNames
+    clearValue,
+    cx,
+    getStyles,
+    getValue,
+    hasValue,
+    isMulti,
+    isRtl,
+    options, // not listed in commonProps documentation
+    selectOption,
+    selectProps,
+    setValue,
+    theme, // not listed in commonProps documentation
+    ...innerProps
+  } = props;
+  return { ...innerProps };
+};
+
+// ==============================
 // Handle Input Change
@@ -273,1 +299,20 @@ // ==============================
 }
+
+// ==============================
+// Passive Event Detector
+// ==============================
+
+// https://github.com/rafgraph/detect-it/blob/main/src/index.ts#L19-L36
+let passiveOptionAccessed = false;
+const options = {
+  get passive() {
+    return (passiveOptionAccessed = true);
+  },
+};
+
+if (document.addEventListener && document.removeEventListener) {
+  document.addEventListener('p', noop, options);
+  document.removeEventListener('p', noop, false);
+}
+
+export const supportsPassiveEvents: boolean = passiveOptionAccessed;

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

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

Improved metrics

Number of low supply chain risk alerts

29

decreased by-43.14%

Worsened metrics

Total package byte prevSize

940451

decreased by-27.8%

Number of package files

99

decreased by-14.66%

Lines of code

21715

decreased by-29.28%

No dependency changes