react-select - npm Package Compare versions

Comparing version 2.1.2 to 2.2.0

lib/accessibility/index.js

@@ -14,3 +14,3 @@ 'use strict';
     case 'menu':
-      return 'Use Up and Down to choose options, press Backspace to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.';
+      return 'Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.';
     case 'input':
@@ -17,0 +17,0 @@ return (label ? label : 'Select') + ' is focused ' + (isSearchable ? ',type to refine list' : '') + ', press Down to open the menu, ' + (isMulti ? ' press left to focus selected values' : '');

lib/components/containers.js

@@ -16,4 +16,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,3 +45,4 @@
       isDisabled = props.isDisabled,
-      isRtl = props.isRtl;
+      isRtl = props.isRtl,
+      emotion = props.emotion;
 
@@ -53,3 +52,3 @@ return _react2.default.createElement(
     _extends({
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('container', props)), {
+      className: cx(emotion.css(getStyles('container', props)), {
         '--is-disabled': isDisabled,
@@ -99,3 +98,4 @@ '--is-rtl': isRtl
           getStyles = _props.getStyles,
-          hasValue = _props.hasValue;
+          hasValue = _props.hasValue,
+          emotion = _props.emotion;
 
@@ -106,3 +106,3 @@
         {
-          className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('valueContainer', this.props)), {
+          className: cx(emotion.css(getStyles('valueContainer', this.props)), {
             'value-container': true,
@@ -137,3 +137,4 @@ 'value-container--is-multi': isMulti,
       cx = props.cx,
-      getStyles = props.getStyles;
+      getStyles = props.getStyles,
+      emotion = props.emotion;
 
@@ -144,3 +145,3 @@
     {
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('indicatorsContainer', props)), {
+      className: cx(emotion.css(getStyles('indicatorsContainer', props)), {
         'indicators': true
@@ -147,0 +148,0 @@ }, className)

lib/components/Control.js

@@ -14,4 +14,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -57,3 +55,4 @@
       innerRef = props.innerRef,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
@@ -64,3 +63,3 @@ return _react2.default.createElement(
       ref: innerRef,
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('control', props)), {
+      className: cx(emotion.css(getStyles('control', props)), {
         'control': true,
@@ -67,0 +66,0 @@ 'control--is-disabled': isDisabled,

lib/components/Group.js

@@ -14,4 +14,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -37,3 +35,5 @@
       label = props.label,
-      theme = props.theme;
+      theme = props.theme,
+      emotion = props.emotion,
+      selectProps = props.selectProps;
 
@@ -43,7 +43,13 @@ return _react2.default.createElement(
     {
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('group', props)), { 'group': true }, className)
+      className: cx(emotion.css(getStyles('group', props)), { 'group': true }, className)
     },
     _react2.default.createElement(
       Heading,
-      _extends({}, headingProps, { theme: theme, getStyles: getStyles, cx: cx }),
+      _extends({}, headingProps, {
+        selectProps: selectProps,
+        emotion: emotion,
+        theme: theme,
+        getStyles: getStyles,
+        cx: cx
+      }),
       label
@@ -79,6 +85,8 @@ ),
       theme = props.theme,
-      cleanProps = _objectWithoutProperties(props, ['className', 'cx', 'getStyles', 'theme']);
+      emotion = props.emotion,
+      selectProps = props.selectProps,
+      cleanProps = _objectWithoutProperties(props, ['className', 'cx', 'getStyles', 'theme', 'emotion', 'selectProps']);
 
   return _react2.default.createElement('div', _extends({
-    className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('groupHeading', _extends({ theme: theme }, cleanProps))), { 'group-heading': true }, className)
+    className: cx(emotion.css(getStyles('groupHeading', _extends({ theme: theme }, cleanProps))), { 'group-heading': true }, className)
   }, cleanProps));
@@ -85,0 +93,0 @@ };

lib/components/indicators.js

@@ -8,6 +8,6 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _templateObject = _taggedTemplateLiteral(['@keyframes ', ' {\n      0%, 80%, 100% { opacity: 0; }\n      40% { opacity: 1; }\n    };'], ['@keyframes ', ' {\n      0%, 80%, 100% { opacity: 0; }\n      40% { opacity: 1; }\n    };']);
+
 var _react = require('react');
@@ -17,6 +17,8 @@
 
-require('../types');
+require('create-emotion');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
@@ -30,3 +32,4 @@
   var size = _ref.size,
-      props = _objectWithoutProperties(_ref, ['size']);
+      emotion = _ref.emotion,
+      props = _objectWithoutProperties(_ref, ['size', 'emotion']);
 
@@ -39,3 +42,3 @@ return _react2.default.createElement('svg', _extends({
     focusable: 'false',
-    className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)({
+    className: emotion.css({
       display: 'inline-block',
@@ -92,3 +95,4 @@ fill: 'currentColor',
       getStyles = props.getStyles,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
@@ -98,3 +102,3 @@ return _react2.default.createElement(
     _extends({}, innerProps, {
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('dropdownIndicator', props)), {
+      className: cx(emotion.css(getStyles('dropdownIndicator', props)), {
         'indicator': true,
@@ -104,8 +108,5 @@ 'dropdown-indicator': true
     }),
-    children
+    children || _react2.default.createElement(DownChevron, { emotion: emotion })
   );
 };
-DropdownIndicator.defaultProps = {
-  children: _react2.default.createElement(DownChevron, null)
-};
 
@@ -118,3 +119,4 @@ var clearIndicatorCSS = exports.clearIndicatorCSS = baseCSS;
       getStyles = props.getStyles,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
@@ -124,3 +126,3 @@ return _react2.default.createElement(
     _extends({}, innerProps, {
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('clearIndicator', props)), {
+      className: cx(emotion.css(getStyles('clearIndicator', props)), {
         'indicator': true,
@@ -130,10 +132,6 @@ 'clear-indicator': true
     }),
-    children
+    children || _react2.default.createElement(CrossIcon, { emotion: emotion })
   );
 };
 
-ClearIndicator.defaultProps = {
-  children: _react2.default.createElement(CrossIcon, null)
-};
-
 // ==============================
@@ -161,6 +159,7 @@ // Separator
       getStyles = props.getStyles,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
   return _react2.default.createElement('span', _extends({}, innerProps, {
-    className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('indicatorSeparator', props)), { 'indicator-separator': true }, className)
+    className: cx(emotion.css(getStyles('indicatorSeparator', props)), { 'indicator-separator': true }, className)
   }));
@@ -174,2 +173,3 @@ };
 var keyframesName = 'react-select-loading-indicator';
+var keyframesInjected = false;
 
@@ -199,5 +199,6 @@ var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {
       delay = _ref5.delay,
-      offset = _ref5.offset;
+      offset = _ref5.offset,
+      emotion = _ref5.emotion;
   return _react2.default.createElement('span', {
-    className: (0, _emotion.css)({
+    className: emotion.css({
       animationDuration: '1s',
@@ -219,5 +220,2 @@ animationDelay: delay + 'ms',
 
-// eslint-disable-next-line no-unused-expressions
-(0, _emotion.injectGlobal)('@keyframes ', keyframesName, '{0%,80%,100%{opacity:0;}40%{opacity:1;}};');
-
 var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(props) {
@@ -230,2 +228,3 @@ var className = props.className,
       isRtl = props.isRtl,
+      emotion = props.emotion,
       colors = props.theme.colors;
@@ -235,6 +234,12 @@
 
+  if (!keyframesInjected) {
+    // eslint-disable-next-line no-unused-expressions
+    emotion.injectGlobal(_templateObject, keyframesName);
+    keyframesInjected = true;
+  }
+
   return _react2.default.createElement(
     'div',
     _extends({}, innerProps, {
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('loadingIndicator', props)), {
+      className: cx(emotion.css(getStyles('loadingIndicator', props)), {
         'indicator': true,
@@ -244,7 +249,7 @@ 'loading-indicator': true
     }),
-    _react2.default.createElement(LoadingDot, { color: color, delay: 0, offset: isRtl }),
-    _react2.default.createElement(LoadingDot, { color: color, delay: 160, offset: true }),
-    _react2.default.createElement(LoadingDot, { color: color, delay: 320, offset: !isRtl })
+    _react2.default.createElement(LoadingDot, { emotion: emotion, color: color, delay: 0, offset: isRtl }),
+    _react2.default.createElement(LoadingDot, { emotion: emotion, color: color, delay: 160, offset: true }),
+    _react2.default.createElement(LoadingDot, { emotion: emotion, color: color, delay: 320, offset: !isRtl })
   );
 };
 LoadingIndicator.defaultProps = { size: 4 };

lib/components/Input.js

@@ -8,4 +8,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -58,9 +56,9 @@
       theme = _ref2.theme,
-      props = _objectWithoutProperties(_ref2, ['className', 'cx', 'getStyles', 'innerRef', 'isHidden', 'isDisabled', 'theme']);
+      emotion = _ref2.emotion,
+      selectProps = _ref2.selectProps,
+      props = _objectWithoutProperties(_ref2, ['className', 'cx', 'getStyles', 'innerRef', 'isHidden', 'isDisabled', 'theme', 'emotion', 'selectProps']);
 
   return _react2.default.createElement(
     'div',
-    {
-      className: (0, _emotion.css)(getStyles('input', _extends({ theme: theme }, props)))
-    },
+    { className: emotion.css(getStyles('input', _extends({ theme: theme }, props))) },
     _react2.default.createElement(_reactInputAutosize2.default, _extends({
@@ -67,0 +65,0 @@ className: cx(null, { 'input': true }, className),

lib/components/Menu.js

@@ -18,4 +18,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 var _reactDom = require('react-dom');
@@ -300,5 +298,6 @@
       innerRef = props.innerRef,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
-  var cn = cx( /*#__PURE__*/(0, _emotion.css)(getStyles('menu', props)), { menu: true }, className);
+  var cn = cx(emotion.css(getStyles('menu', props)), { menu: true }, className);
 
@@ -336,3 +335,4 @@ return _react2.default.createElement(
       isMulti = props.isMulti,
-      innerRef = props.innerRef;
+      innerRef = props.innerRef,
+      emotion = props.emotion;
 
@@ -342,3 +342,3 @@ return _react2.default.createElement(
     {
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('menuList', props)), {
+      className: cx(emotion.css(getStyles('menuList', props)), {
         'menu-list': true,
@@ -375,3 +375,4 @@ 'menu-list--is-multi': isMulti
       getStyles = props.getStyles,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
@@ -381,3 +382,3 @@ return _react2.default.createElement(
     _extends({
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('noOptionsMessage', props)), {
+      className: cx(emotion.css(getStyles('noOptionsMessage', props)), {
         'menu-notice': true,
@@ -399,3 +400,4 @@ 'menu-notice--no-options': true
       getStyles = props.getStyles,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
@@ -405,3 +407,3 @@ return _react2.default.createElement(
     _extends({
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('loadingMessage', props)), {
+      className: cx(emotion.css(getStyles('loadingMessage', props)), {
         'menu-notice': true,
@@ -480,3 +482,4 @@ 'menu-notice--loading': true
           position = _props.menuPosition,
-          getStyles = _props.getStyles;
+          getStyles = _props.getStyles,
+          emotion = _props.emotion;
 
@@ -499,3 +502,3 @@ var isFixed = position === 'fixed';
         'div',
-        { className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)(getStyles('menuPortal', state)) },
+        { className: emotion.css(getStyles('menuPortal', state)) },
         children
@@ -502,0 +505,0 @@ );

lib/components/MultiValue.js

@@ -16,4 +16,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 var _indicators = require('./indicators');
@@ -107,3 +105,4 @@
           children = _props.children,
-          innerProps = _props.innerProps;
+          innerProps = _props.innerProps,
+          emotion = _props.emotion;
 
@@ -113,3 +112,3 @@ return _react2.default.createElement(
         innerProps,
-        children
+        children || _react2.default.createElement(_indicators.CrossIcon, { size: 14, emotion: emotion })
       );
@@ -122,6 +121,2 @@ }
 
-MultiValueRemove.defaultProps = {
-  children: _react2.default.createElement(_indicators.CrossIcon, { size: 14 })
-};
-
 var MultiValue = function (_Component2) {
@@ -149,3 +144,4 @@ _inherits(MultiValue, _Component2);
           removeProps = _props2.removeProps,
-          selectProps = _props2.selectProps;
+          selectProps = _props2.selectProps,
+          emotion = _props2.emotion;
       var Container = components.Container,
@@ -157,3 +153,3 @@ Label = components.Label,
       var containerInnerProps = _extends({
-        className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('multiValue', this.props)), {
+        className: cx(emotion.css(getStyles('multiValue', this.props)), {
           'multi-value': true,
@@ -165,3 +161,3 @@ 'multi-value--is-disabled': isDisabled
       var labelInnerProps = {
-        className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('multiValueLabel', this.props)), {
+        className: cx(emotion.css(getStyles('multiValueLabel', this.props)), {
           'multi-value__label': true
@@ -172,3 +168,3 @@ }, className)
       var removeInnerProps = _extends({
-        className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('multiValueRemove', this.props)), {
+        className: cx(emotion.css(getStyles('multiValueRemove', this.props)), {
           'multi-value__remove': true
@@ -197,3 +193,4 @@ }, className)
           innerProps: removeInnerProps,
-          selectProps: selectProps
+          selectProps: selectProps,
+          emotion: emotion
         })
@@ -200,0 +197,0 @@ );

lib/components/Option.js

@@ -14,4 +14,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,3 +51,4 @@
       innerRef = props.innerRef,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
@@ -60,3 +59,3 @@ return _react2.default.createElement(
       ref: innerRef,
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('option', props)), {
+      className: cx(emotion.css(getStyles('option', props)), {
         'option': true,
@@ -63,0 +62,0 @@ 'option--is-disabled': isDisabled,

lib/components/Placeholder.js

@@ -14,4 +14,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,3 +36,4 @@
       getStyles = props.getStyles,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
@@ -44,3 +43,3 @@ return _react2.default.createElement(
     _extends({
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('placeholder', props)), {
+      className: cx(emotion.css(getStyles('placeholder', props)), {
         'placeholder': true
@@ -47,0 +46,0 @@ }, className)

lib/components/SingleValue.js

@@ -14,4 +14,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,3 +42,4 @@
       isDisabled = props.isDisabled,
-      innerProps = props.innerProps;
+      innerProps = props.innerProps,
+      emotion = props.emotion;
 
@@ -50,3 +49,3 @@ return _react2.default.createElement(
     _extends({
-      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('singleValue', props)), {
+      className: cx(emotion.css(getStyles('singleValue', props)), {
         'single-value': true,
@@ -53,0 +52,0 @@ 'single-value--is-disabled': isDisabled

lib/internal/A11yText.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -21,3 +19,3 @@
   return _react2.default.createElement('span', _extends({
-    className: (0, _emotion.css)({
+    className: props.emotion.css({
       zIndex: 9999,
@@ -24,0 +22,0 @@ border: 0,

lib/internal/DummyInput.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -48,3 +46,4 @@
           innerRef = _props.innerRef,
-          props = _objectWithoutProperties(_props, ['in', 'out', 'onExited', 'appear', 'enter', 'exit', 'innerRef']);
+          emotion = _props.emotion,
+          props = _objectWithoutProperties(_props, ['in', 'out', 'onExited', 'appear', 'enter', 'exit', 'innerRef', 'emotion']);
 
@@ -54,3 +53,3 @@ return _react2.default.createElement('input', _extends({
       }, props, {
-        className: (0, _emotion.css)({
+        className: emotion.css({
           // get rid of any default styles
@@ -57,0 +56,0 @@ background: 0,

lib/internal/ScrollBlock.js

@@ -7,4 +7,2 @@ 'use strict';
 
-var _emotion = require('emotion');
-
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -72,3 +70,4 @@
           children = _props.children,
-          isEnabled = _props.isEnabled;
+          isEnabled = _props.isEnabled,
+          emotion = _props.emotion;
       var touchScrollTarget = this.state.touchScrollTarget;
@@ -97,3 +96,3 @@
           onClick: this.blurSelectInput,
-          className: (0, _emotion.css)({ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 })
+          className: emotion.css({ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 })
         }),
@@ -100,0 +99,0 @@ _react2.default.createElement(

lib/Select.js

@@ -8,4 +8,2 @@ 'use strict';
 
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -23,2 +21,6 @@
 
+var _createEmotion = require('create-emotion');
+
+var _createEmotion2 = _interopRequireDefault(_createEmotion);
+
 var _Menu = require('./components/Menu');
@@ -106,2 +108,6 @@
 
+var getEmotion = (0, _memoizeOne2.default)(function (nonce) {
+  return (0, _createEmotion2.default)(nonce ? { nonce: nonce } : {});
+});
+
 var Select = function (_Component) {
@@ -116,5 +122,3 @@ _inherits(Select, _Component);
 
-  // Misc. Instance Properties
-  // ------------------------------
-
+  // TODO
   function Select(props) {
@@ -136,7 +140,11 @@ _classCallCheck(this, Select);
 
+    _this.emotion = getEmotion(props.nonce);
+
     _this.state.menuOptions = menuOptions;
     _this.state.selectValue = selectValue;
     return _this;
-  } // TODO
+  }
 
+  // Misc. Instance Properties
+  // ------------------------------
 
@@ -444,3 +452,4 @@ _createClass(Select, [{
         selectProps: props,
-        theme: this.getTheme()
+        theme: this.getTheme(),
+        emotion: this.emotion
       };
@@ -771,3 +780,4 @@ }
           tabIndex: tabIndex,
-          value: ''
+          value: '',
+          emotion: this.emotion
         });
@@ -785,3 +795,4 @@ }
           cx = _commonProps.cx,
-          theme = _commonProps.theme;
+          theme = _commonProps.theme,
+          selectProps = _commonProps.selectProps;
 
@@ -802,2 +813,3 @@
         onFocus: this.onInputFocus,
+        selectProps: selectProps,
         spellCheck: 'false',
@@ -807,3 +819,4 @@ tabIndex: tabIndex,
         type: 'text',
-        value: inputValue
+        value: inputValue,
+        emotion: this.emotion
       }, ariaAttributes));
@@ -1115,3 +1128,3 @@ }
                 _index.ScrollBlock,
-                { isEnabled: menuShouldBlockScroll },
+                { emotion: _this5.emotion, isEnabled: menuShouldBlockScroll },
                 _react2.default.createElement(
@@ -1194,3 +1207,3 @@ MenuList,
         _index.A11yText,
-        { 'aria-live': 'assertive' },
+        { emotion: this.emotion, 'aria-live': 'assertive' },
         _react2.default.createElement(
@@ -1329,9 +1342,16 @@ 'p',
 
+  this.onChange = function (newValue, actionMeta) {
+    var _props14 = _this7.props,
+        onChange = _props14.onChange,
+        name = _props14.name;
+
+    onChange(newValue, _extends({}, actionMeta, { name: name }));
+  };
+
   this.setValue = function (newValue) {
     var action = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set-value';
     var option = arguments[2];
-    var _props14 = _this7.props,
-        closeMenuOnSelect = _props14.closeMenuOnSelect,
-        isMulti = _props14.isMulti,
-        onChange = _props14.onChange;
+    var _props15 = _this7.props,
+        closeMenuOnSelect = _props15.closeMenuOnSelect,
+        isMulti = _props15.isMulti;
 
@@ -1345,9 +1365,9 @@ _this7.onInputChange('', { action: 'set-value' });
     _this7.clearFocusValueOnUpdate = true;
-    onChange(newValue, { action: action, option: option });
+    _this7.onChange(newValue, { action: action, option: option });
   };
 
   this.selectOption = function (newValue) {
-    var _props15 = _this7.props,
-        blurInputOnSelect = _props15.blurInputOnSelect,
-        isMulti = _props15.isMulti;
+    var _props16 = _this7.props,
+        blurInputOnSelect = _props16.blurInputOnSelect,
+        isMulti = _props16.isMulti;
 
@@ -1388,7 +1408,6 @@
   this.removeValue = function (removedValue) {
-    var onChange = _this7.props.onChange;
     var selectValue = _this7.state.selectValue;
 
     var candidate = _this7.getOptionValue(removedValue);
-    onChange(selectValue.filter(function (i) {
+    _this7.onChange(selectValue.filter(function (i) {
       return _this7.getOptionValue(i) !== candidate;
@@ -1409,11 +1428,8 @@ }), {
   this.clearValue = function () {
-    var _props16 = _this7.props,
-        isMulti = _props16.isMulti,
-        onChange = _props16.onChange;
+    var isMulti = _this7.props.isMulti;
 
-    onChange(isMulti ? [] : null, { action: 'clear' });
+    _this7.onChange(isMulti ? [] : null, { action: 'clear' });
   };
 
   this.popValue = function () {
-    var onChange = _this7.props.onChange;
     var selectValue = _this7.state.selectValue;
@@ -1428,3 +1444,3 @@
     });
-    onChange(selectValue.slice(0, selectValue.length - 1), {
+    _this7.onChange(selectValue.slice(0, selectValue.length - 1), {
       action: 'pop-value',
@@ -1583,5 +1599,9 @@ removedValue: lastSelectedValue
   this.onTouchStart = function (_ref5) {
-    var _ref5$touches = _slicedToArray(_ref5.touches, 1),
-        touch = _ref5$touches[0];
+    var touches = _ref5.touches;
 
+    var touch = touches.item(0);
+    if (!touch) {
+      return;
+    }
+
     _this7.initialTouchX = touch.clientX;
@@ -1593,5 +1613,9 @@ _this7.initialTouchY = touch.clientY;
   this.onTouchMove = function (_ref6) {
-    var _ref6$touches = _slicedToArray(_ref6.touches, 1),
-        touch = _ref6$touches[0];
+    var touches = _ref6.touches;
 
+    var touch = touches.item(0);
+    if (!touch) {
+      return;
+    }
+
     var deltaX = Math.abs(touch.clientX - _this7.initialTouchX);
@@ -1753,2 +1777,4 @@ var deltaY = Math.abs(touch.clientY - _this7.initialTouchY);
       case 'Tab':
+        if (isComposing) return;
+
         if (event.shiftKey || !menuIsOpen || !tabSelectsValue || !focusedOption ||
@@ -1755,0 +1781,0 @@ // don't capture the event if the menu opens on focus and the focused

package.json

 {
   "name": "react-select",
-  "version": "2.1.2",
+  "version": "2.2.0",
   "description": "A Select control built with and for ReactJS",
@@ -16,3 +16,3 @@ "main": "lib/index.js",
     "classnames": "^2.2.5",
-    "emotion": "^9.1.2",
+    "create-emotion": "^10.0.4",
     "memoize-one": "^4.0.0",
@@ -19,0 +19,0 @@ "prop-types": "^15.6.0",

src/accessibility/index.js

@@ -8,3 +8,3 @@ export type InstructionsContext = { isSearchable?: boolean, isMulti?: boolean, label?: string };
     case 'menu':
-      return 'Use Up and Down to choose options, press Backspace to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.';
+      return 'Use Up and Down to choose options, press Enter to select the currently focused option, press Escape to exit the menu, press Tab to select the option and exit the menu.';
     case 'input':
@@ -11,0 +11,0 @@ return `${label ? label : 'Select'} is focused ${ isSearchable ? ',type to refine list' : '' }, press Down to open the menu, ${ isMulti ? ' press left to focus selected values' : '' }`;

src/components/containers.js

 // @flow
 import React, { Component, type Node } from 'react';
-import { css } from 'emotion';
 import type { CommonProps, KeyboardEventHandler } from '../types';
@@ -30,7 +29,7 @@
 export const SelectContainer = (props: ContainerProps) => {
-  const { children, className, cx, getStyles, innerProps, isDisabled, isRtl } = props;
+  const { children, className, cx, getStyles, innerProps, isDisabled, isRtl, emotion } = props;
   return (
     <div
       className={cx(
-        css(getStyles('container', props)),
+        emotion.css(getStyles('container', props)),
         {
@@ -73,3 +72,3 @@ '--is-disabled': isDisabled,
   render() {
-    const { children, className, cx, isMulti, getStyles, hasValue } = this.props;
+    const { children, className, cx, isMulti, getStyles, hasValue, emotion } = this.props;
 
@@ -79,3 +78,3 @@ return (
         className={cx(
-          css(getStyles('valueContainer', this.props)),
+          emotion.css(getStyles('valueContainer', this.props)),
           {
@@ -115,3 +114,3 @@ 'value-container': true,
 export const IndicatorsContainer = (props: IndicatorContainerProps) => {
-  const { children, className, cx, getStyles } = props;
+  const { children, className, cx, getStyles, emotion } = props;
 
@@ -121,3 +120,3 @@ return (
       className={cx(
-        css(getStyles('indicatorsContainer', props)),
+        emotion.css(getStyles('indicatorsContainer', props)),
         {
@@ -124,0 +123,0 @@ 'indicators': true,

src/components/Control.js

 // @flow
 import React, { type Node, type ElementRef } from 'react';
-import { css as emotionCSS } from 'emotion';
 
@@ -55,7 +54,7 @@ import type { CommonProps, PropsWithStyles } from '../types';
 const Control = (props: ControlProps) => {
-  const { children, cx, getStyles, className, isDisabled, isFocused, innerRef, innerProps } = props;
+  const { children, cx, getStyles, className, isDisabled, isFocused, innerRef, innerProps, emotion } = props;
   return (
     <div
       ref={innerRef}
-      className={cx(emotionCSS(getStyles('control', props)), {
+      className={cx(emotion.css(getStyles('control', props)), {
         'control': true,
@@ -62,0 +61,0 @@ 'control--is-disabled': isDisabled,

src/components/Group.js

 // @flow
 import React, { type Node, type ComponentType } from 'react';
-import { css } from 'emotion';
 
@@ -34,2 +33,4 @@ import type { CommonProps } from '../types';
     theme,
+    emotion,
+    selectProps,
   } = props;
@@ -39,3 +40,3 @@ return (
       className={cx(
-        css(getStyles('group', props)),
+        emotion.css(getStyles('group', props)),
         { 'group': true },
@@ -45,3 +46,10 @@ className,
     >
-      <Heading {...headingProps} theme={theme} getStyles={getStyles} cx={cx}>
+      <Heading
+        {...headingProps}
+        selectProps={selectProps}
+        emotion={emotion}
+        theme={theme}
+        getStyles={getStyles}
+        cx={cx}
+      >
         {label}
@@ -67,7 +75,7 @@ </Heading>
 export const GroupHeading = (props: any) => {
-  const { className, cx, getStyles, theme, ...cleanProps } = props;
+  const { className, cx, getStyles, theme, emotion, selectProps, ...cleanProps } = props;
   return (
     <div
       className={cx(
-        css(getStyles('groupHeading', { theme, ...cleanProps })),
+        emotion.css(getStyles('groupHeading', { theme, ...cleanProps })),
         { 'group-heading': true },
@@ -74,0 +82,0 @@ className

src/components/indicators.js

 // @flow
 import React, { type Node } from 'react';
-import { injectGlobal, css } from 'emotion';
+import { type Emotion } from 'create-emotion';
 
-import { type CommonProps } from '../types';
-import type { Theme } from '../types';
+import type { CommonProps, Theme } from '../types';
 
@@ -12,3 +11,3 @@ // ==============================
 
-const Svg = ({ size, ...props }: { size: number }) => (
+const Svg = ({ size, emotion, ...props }: { size: number, emotion: Emotion }) => (
   <svg
@@ -20,3 +19,3 @@ height={size}
     focusable="false"
-    className={css({
+    className={emotion.css({
       display: 'inline-block',
@@ -32,2 +31,3 @@ fill: 'currentColor',
 
+
 export const CrossIcon = (props: any) => (
@@ -75,3 +75,3 @@ <Svg size={20} {...props}>
 export const DropdownIndicator = (props: IndicatorProps) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, className, cx, getStyles, innerProps, emotion } = props;
   return (
@@ -81,3 +81,3 @@ <div
       className={cx(
-        css(getStyles('dropdownIndicator', props)),
+        emotion.css(getStyles('dropdownIndicator', props)),
         {
@@ -90,14 +90,10 @@ 'indicator': true,
     >
-      {children}
+      {children || <DownChevron emotion={emotion} />}
     </div>
   );
 };
-DropdownIndicator.defaultProps = {
-  children: <DownChevron />,
-};
 
-
 export const clearIndicatorCSS = baseCSS;
 export const ClearIndicator = (props: IndicatorProps) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, className, cx, getStyles, innerProps, emotion } = props;
   return (
@@ -107,3 +103,3 @@ <div
       className={cx(
-        css(getStyles('clearIndicator', props)),
+        emotion.css(getStyles('clearIndicator', props)),
         {
@@ -115,3 +111,3 @@ 'indicator': true,
     >
-      {children}
+      {children || <CrossIcon emotion={emotion} />}
     </div>
@@ -121,6 +117,2 @@ );
 
-ClearIndicator.defaultProps = {
-  children: <CrossIcon />
-};
-
 // ==============================
@@ -144,3 +136,3 @@ // Separator
 export const IndicatorSeparator = (props: IndicatorProps) => {
-  const { className, cx, getStyles, innerProps } = props;
+  const { className, cx, getStyles, innerProps, emotion } = props;
   return (
@@ -150,3 +142,3 @@ <span
       className={cx(
-        css(getStyles('indicatorSeparator', props)),
+        emotion.css(getStyles('indicatorSeparator', props)),
         { 'indicator-separator': true },
@@ -164,2 +156,3 @@ className
 const keyframesName = 'react-select-loading-indicator';
+let keyframesInjected = false;
 
@@ -187,6 +180,6 @@ export const loadingIndicatorCSS = ({
 
-type DotProps = { color: string, delay: number, offset: boolean };
-const LoadingDot = ({ color, delay, offset }: DotProps) => (
+type DotProps = { color: string, delay: number, offset: boolean, emotion: any };
+const LoadingDot = ({ color, delay, offset, emotion }: DotProps) => (
   <span
-    css={{
+    className={emotion.css({
       animationDuration: '1s',
@@ -204,12 +197,6 @@ animationDelay: `${delay}ms`,
       width: '1em',
-    }}
+    })}
   />
 );
 
-// eslint-disable-next-line no-unused-expressions
-injectGlobal`@keyframes ${keyframesName} {
-  0%, 80%, 100% { opacity: 0; }
-  40% { opacity: 1; }
-};`;
-
 export type LoadingIconProps = {
@@ -227,5 +214,14 @@ /** Props that will be passed on to the children. */
 export const LoadingIndicator = (props: LoadingIconProps) => {
-  const { className, cx, getStyles, innerProps, isFocused, isRtl, theme: { colors } } = props;
+  const { className, cx, getStyles, innerProps, isFocused, isRtl, emotion, theme: { colors } } = props;
   const color = isFocused ? colors.neutral80 : colors.neutral20;
 
+  if(!keyframesInjected) {
+    // eslint-disable-next-line no-unused-expressions
+    emotion.injectGlobal`@keyframes ${keyframesName} {
+      0%, 80%, 100% { opacity: 0; }
+      40% { opacity: 1; }
+    };`;
+    keyframesInjected = true;
+  }
+
   return (
@@ -235,3 +231,3 @@ <div
       className={cx(
-        css(getStyles('loadingIndicator', props)),
+        emotion.css(getStyles('loadingIndicator', props)),
         {
@@ -244,5 +240,5 @@ 'indicator': true,
     >
-      <LoadingDot color={color} delay={0} offset={isRtl} />
-      <LoadingDot color={color} delay={160} offset />
-      <LoadingDot color={color} delay={320} offset={!isRtl} />
+      <LoadingDot emotion={emotion} color={color} delay={0} offset={isRtl} />
+      <LoadingDot emotion={emotion} color={color} delay={160} offset />
+      <LoadingDot emotion={emotion} color={color} delay={320} offset={!isRtl} />
     </div>
@@ -249,0 +245,0 @@ );

src/components/Input.js

@@ -16,2 +16,3 @@ // @flow
   className?: string,
+  emotion: any,
 };
@@ -44,5 +45,7 @@
   theme,
+  emotion,
+  selectProps,
   ...props
 }: InputProps) => (
-  <div css={getStyles('input', { theme, ...props })}>
+  <div className={emotion.css(getStyles('input', { theme, ...props }))}>
     <AutosizeInput
@@ -49,0 +52,0 @@ className={cx(null, { 'input': true }, className)}

src/components/Menu.js

@@ -8,3 +8,2 @@ // @flow
 } from 'react';
-import { css } from 'emotion';
 import { createPortal } from 'react-dom';
@@ -319,4 +318,4 @@ import PropTypes from 'prop-types';
 const Menu = (props: MenuProps) => {
-  const { children, className, cx, getStyles, innerRef, innerProps } = props;
-  const cn = cx(css(getStyles('menu', props)), { menu: true }, className);
+  const { children, className, cx, getStyles, innerRef, innerProps, emotion } = props;
+  const cn = cx(emotion.css(getStyles('menu', props)), { menu: true }, className);
 
@@ -366,7 +365,7 @@ return (
 export const MenuList = (props: MenuListComponentProps) => {
-  const { children, className, cx, getStyles, isMulti, innerRef } = props;
+  const { children, className, cx, getStyles, isMulti, innerRef, emotion } = props;
   return (
     <div
       className={cx(
-        css(getStyles('menuList', props)),
+        emotion.css(getStyles('menuList', props)),
         {
@@ -410,7 +409,7 @@ 'menu-list': true,
 export const NoOptionsMessage = (props: NoticeProps) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, className, cx, getStyles, innerProps, emotion } = props;
   return (
     <div
       className={cx(
-        css(getStyles('noOptionsMessage', props)),
+        emotion.css(getStyles('noOptionsMessage', props)),
         {
@@ -433,7 +432,7 @@ 'menu-notice': true,
 export const LoadingMessage = (props: NoticeProps) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, className, cx, getStyles, innerProps, emotion } = props;
   return (
     <div
       className={cx(
-        css(getStyles('loadingMessage', props)),
+        emotion.css(getStyles('loadingMessage', props)),
         {
@@ -511,2 +510,3 @@ 'menu-notice': true,
       getStyles,
+      emotion
     } = this.props;
@@ -528,3 +528,3 @@ const isFixed = position === 'fixed';
     const menuWrapper = (
-      <div className={css(getStyles('menuPortal', state))}>{children}</div>
+      <div className={emotion.css(getStyles('menuPortal', state))}>{children}</div>
     );
@@ -531,0 +531,0 @@

src/components/MultiValue.js

 // @flow
 import React, { Component, type Node } from 'react';
-import { css } from 'emotion';
 
@@ -73,3 +72,4 @@ import { CrossIcon } from './indicators';
 export const MultiValueLabel = MultiValueGeneric;
-export type MultiValueRemoveProps = CommonProps & {
+export type MultiValueRemoveProps = {
+  emotion: any,
   children: Node,
@@ -86,8 +86,5 @@ data: any,
 export class MultiValueRemove extends Component<MultiValueRemoveProps> {
-  static defaultProps = {
-    children: <CrossIcon size={14} />,
-  };
   render() {
-    const { children, innerProps } = this.props;
-    return <div {...innerProps}>{children}</div>;
+    const { children, innerProps, emotion } = this.props;
+    return <div {...innerProps}>{children || <CrossIcon size={14} emotion={emotion} />}</div>;
   }
@@ -112,2 +109,3 @@ }
       selectProps,
+      emotion,
     } = this.props;
@@ -119,3 +117,3 @@
       className: cx(
-        css(getStyles('multiValue', this.props)),
+        emotion.css(getStyles('multiValue', this.props)),
         {
@@ -132,3 +130,3 @@ 'multi-value': true,
       className: cx(
-        css(getStyles('multiValueLabel', this.props)),
+        emotion.css(getStyles('multiValueLabel', this.props)),
         {
@@ -143,3 +141,3 @@ 'multi-value__label': true,
       className: cx(
-        css(getStyles('multiValueRemove', this.props)),
+        emotion.css(getStyles('multiValueRemove', this.props)),
         {
@@ -170,2 +168,3 @@ 'multi-value__remove': true,
           selectProps={selectProps}
+          emotion={emotion}
         />
@@ -172,0 +171,0 @@ </Container>

src/components/Option.js

 // @flow
 import React, { type Node } from 'react';
-import { css } from 'emotion';
 
@@ -67,3 +66,3 @@ import type { CommonProps, PropsWithStyles, InnerRef } from '../types';
 const Option = (props: OptionProps) => {
-  const { children, className, cx, getStyles, isDisabled, isFocused, isSelected, innerRef, innerProps } = props;
+  const { children, className, cx, getStyles, isDisabled, isFocused, isSelected, innerRef, innerProps, emotion } = props;
   return (
@@ -73,3 +72,3 @@ <div
       className={cx(
-        css(getStyles('option', props)),
+        emotion.css(getStyles('option', props)),
         {
@@ -76,0 +75,0 @@ 'option': true,

src/components/Placeholder.js

 // @flow
 import React, { type Node } from 'react';
-import { css } from 'emotion';
 
@@ -24,7 +23,7 @@ import type { CommonProps } from '../types';
 const Placeholder = (props: PlaceholderProps) => {
-  const { children, className, cx, getStyles, innerProps } = props;
+  const { children, className, cx, getStyles, innerProps, emotion } = props;
   return (
     <div
       className={cx(
-        css(getStyles('placeholder', props)),
+        emotion.css(getStyles('placeholder', props)),
         {
@@ -31,0 +30,0 @@ 'placeholder': true,

src/components/SingleValue.js

 // @flow
 import React from 'react';
-import { css as emotionCss } from 'emotion';
 import type { CommonProps } from '../types';
@@ -34,7 +33,7 @@
 const SingleValue = (props: SingleValueProps) => {
-  const { children, className, cx, getStyles, isDisabled, innerProps } = props;
+  const { children, className, cx, getStyles, isDisabled, innerProps, emotion } = props;
   return (
     <div
       className={cx(
-        emotionCss(getStyles('singleValue', props)),
+        emotion.css(getStyles('singleValue', props)),
         {
@@ -41,0 +40,0 @@ 'single-value': true,

src/internal/A11yText.js

@@ -7,3 +7,3 @@ // @flow
   <span
-    css={{
+    className={props.emotion.css({
       zIndex: 9999,
@@ -20,3 +20,3 @@ border: 0,
       color: 'blue',
-    }}
+    })}
     {...props}
@@ -23,0 +23,0 @@ />

src/internal/DummyInput.js

@@ -7,3 +7,3 @@ // @flow
   render () {
-    const { in: inProp, out, onExited, appear, enter, exit, innerRef, ...props } = this.props;
+    const { in: inProp, out, onExited, appear, enter, exit, innerRef, emotion, ...props } = this.props;
     return(
@@ -13,3 +13,3 @@ <input
         {...props}
-        css={{
+        className={emotion.css({
           // get rid of any default styles
@@ -33,3 +33,3 @@ background: 0,
           transform: 'scale(0)',
-        }}
+        })}
       />
@@ -36,0 +36,0 @@ );

src/internal/ScrollBlock.js

@@ -10,2 +10,3 @@ // @flow
   isEnabled: boolean,
+  emotion: any,
 };
@@ -38,3 +39,3 @@ type State = {
   render() {
-    const { children, isEnabled } = this.props;
+    const { children, isEnabled, emotion } = this.props;
     const { touchScrollTarget } = this.state;
@@ -63,3 +64,3 @@
           onClick={this.blurSelectInput}
-          css={{ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 }}
+          className={emotion.css({ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 })}
         />
@@ -66,0 +67,0 @@ <NodeResolver innerRef={this.getScrollTarget}>{children}</NodeResolver>

src/Select.js

@@ -6,2 +6,3 @@ // @flow
 import memoizeOne from 'memoize-one';
+import createEmotion, { type Emotion } from 'create-emotion';
 import { MenuPlacer } from './components/Menu';
@@ -246,2 +247,4 @@ import isEqual from './internal/react-fast-compare';
   value: ValueType,
+  /* A CSP Nonce which will be used in injected style sheets */
+  nonce?: string
 };
@@ -310,2 +313,4 @@
 
+const getEmotion: ?string => Emotion = memoizeOne((nonce) => createEmotion(nonce ? { nonce } : {}));
+
 export default class Select extends Component<Props, State> {
@@ -332,2 +337,3 @@ static defaultProps = defaultProps;
   components: SelectComponents;
+  emotion: Emotion;
   hasGroups: boolean = false;
@@ -376,2 +382,4 @@ initialTouchX: number = 0;
 
+    this.emotion = getEmotion(props.nonce);
+
     this.state.menuOptions = menuOptions;
@@ -594,2 +602,6 @@ this.state.selectValue = selectValue;
   }
+  onChange = (newValue: ValueType, actionMeta: ActionMeta) => {
+    const { onChange, name } = this.props;
+    onChange(newValue, { ...actionMeta, name });
+  };
   setValue = (
@@ -600,3 +612,3 @@ newValue: ValueType,
   ) => {
-    const { closeMenuOnSelect, isMulti, onChange } = this.props;
+    const { closeMenuOnSelect, isMulti } = this.props;
     this.onInputChange('', { action: 'set-value' });
@@ -609,3 +621,3 @@ if (closeMenuOnSelect) {
     this.clearFocusValueOnUpdate = true;
-    onChange(newValue, { action, option });
+    this.onChange(newValue, { action, option });
   };
@@ -648,6 +660,5 @@ selectOption = (newValue: OptionType) => {
   removeValue = (removedValue: OptionType) => {
-    const { onChange } = this.props;
     const { selectValue } = this.state;
     const candidate = this.getOptionValue(removedValue);
-    onChange(selectValue.filter(i => this.getOptionValue(i) !== candidate), {
+    this.onChange(selectValue.filter(i => this.getOptionValue(i) !== candidate), {
       action: 'remove-value',
@@ -665,7 +676,6 @@ removedValue,
   clearValue = () => {
-    const { isMulti, onChange } = this.props;
-    onChange(isMulti ? [] : null, { action: 'clear' });
+    const { isMulti } = this.props;
+    this.onChange(isMulti ? [] : null, { action: 'clear' });
   };
   popValue = () => {
-    const { onChange } = this.props;
     const { selectValue } = this.state;
@@ -681,3 +691,3 @@ const lastSelectedValue = selectValue[selectValue.length - 1];
     });
-    onChange(selectValue.slice(0, selectValue.length - 1), {
+    this.onChange(selectValue.slice(0, selectValue.length - 1), {
       action: 'pop-value',
@@ -733,2 +743,3 @@ removedValue: lastSelectedValue,
       theme: this.getTheme(),
+      emotion: this.emotion
     };
@@ -1000,3 +1011,8 @@ }
   }
-  onTouchStart = ({ touches: [touch] }: TouchEvent) => {
+  onTouchStart = ({ touches }: TouchEvent) => {
+    const touch = touches.item(0);
+    if (!touch) {
+      return;
+    }
+    
     this.initialTouchX = touch.clientX;
@@ -1006,3 +1022,8 @@ this.initialTouchY = touch.clientY;
   };
-  onTouchMove = ({ touches: [touch] }: TouchEvent) => {
+  onTouchMove = ({ touches }: TouchEvent) => {
+    const touch = touches.item(0);
+    if (!touch) {
+      return;
+    }
+
     const deltaX = Math.abs(touch.clientX - this.initialTouchX);
@@ -1164,2 +1185,4 @@ const deltaY = Math.abs(touch.clientY - this.initialTouchY);
       case 'Tab':
+        if (isComposing) return;
+
         if (
@@ -1386,2 +1409,3 @@ event.shiftKey ||
           value=""
+          emotion={this.emotion}
         />
@@ -1398,3 +1422,3 @@ );
 
-    const { cx, theme } = this.commonProps;
+    const { cx, theme, selectProps } = this.commonProps;
 
@@ -1415,2 +1439,3 @@ return (
         onFocus={this.onInputFocus}
+        selectProps={selectProps}
         spellCheck="false"
@@ -1421,2 +1446,3 @@ tabIndex={tabIndex}
         value={inputValue}
+        emotion={this.emotion}
         {...ariaAttributes}
@@ -1447,4 +1473,4 @@ />
       return inputValue ? null : (
-        <Placeholder 
-          {...commonProps} 
+        <Placeholder
+          {...commonProps}
           key="placeholder"
@@ -1700,3 +1726,3 @@ isDisabled={isDisabled}
             >
-              <ScrollBlock isEnabled={menuShouldBlockScroll}>
+              <ScrollBlock emotion={this.emotion} isEnabled={menuShouldBlockScroll}>
                 <MenuList
@@ -1772,3 +1798,3 @@ {...commonProps}
     return (
-      <A11yText aria-live="assertive">
+      <A11yText emotion={this.emotion} aria-live="assertive">
         <p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
@@ -1775,0 +1801,0 @@ <p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>

src/types.js

@@ -72,2 +72,3 @@ // @flow
   setValue: (ValueType, ActionTypes) => void,
+  emotion: any,
 };
@@ -74,0 +75,0 @@

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

Improved metrics

Total package byte prevSize

1566392

increased by51.97%

Lines of code

22690

increased by6.94%

Worsened metrics

Number of low supply chain risk alerts

32

increased byInfinity%

Dependency changes

• + Addedcreate-emotion@^10.0.4

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

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

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

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

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

• + Added@emotion/stylis@0.8.5(transitive)

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

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

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

• + Addedcreate-emotion@10.0.27(transitive)

• - Removedemotion@^9.1.2

• - Removed@babel/code-frame@7.25.9(transitive)

• - Removed@babel/generator@7.25.9(transitive)

• - Removed@babel/helper-module-imports@7.25.9(transitive)

• - Removed@babel/helper-string-parser@7.25.9(transitive)

• - Removed@babel/helper-validator-identifier@7.25.9(transitive)

• - Removed@babel/highlight@7.25.9(transitive)

• - Removed@babel/parser@7.25.9(transitive)

• - Removed@babel/template@7.25.9(transitive)

• - Removed@babel/traverse@7.25.9(transitive)

• - Removed@babel/types@7.25.9(transitive)

• - Removed@emotion/babel-utils@0.6.10(transitive)

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

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

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

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

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

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

• - Removed@jridgewell/gen-mapping@0.3.5(transitive)

• - Removed@jridgewell/resolve-uri@3.1.2(transitive)

• - Removed@jridgewell/set-array@1.2.1(transitive)

• - Removed@jridgewell/sourcemap-codec@1.5.0(transitive)

• - Removed@jridgewell/trace-mapping@0.3.25(transitive)

• - Removed@types/parse-json@4.0.2(transitive)

• - Removedabbrev@1.1.1(transitive)

• - Removedansi-styles@3.2.1(transitive)

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

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

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

• - Removedcallsites@3.1.0(transitive)

• - Removedchalk@2.4.2(transitive)

• - Removedcolor-convert@1.9.3(transitive)

• - Removedcolor-name@1.1.3(transitive)

• - Removedconvert-source-map@1.9.0(transitive)

• - Removedcosmiconfig@6.0.0(transitive)

• - Removedcreate-emotion@9.2.12(transitive)

• - Removeddebug@4.3.7(transitive)

• - Removedemotion@9.2.12(transitive)

• - Removederror-ex@1.3.2(transitive)

• - Removedescape-string-regexp@1.0.5(transitive)

• - Removedfind-root@1.1.0(transitive)

• - Removedfunction-bind@1.1.2(transitive)

• - Removedglobals@11.12.0(transitive)

• - Removedhas-flag@3.0.0(transitive)

• - Removedhasown@2.0.2(transitive)

• - Removedimport-fresh@3.3.0(transitive)

• - Removedis-arrayish@0.2.1(transitive)

• - Removedis-core-module@2.15.1(transitive)

• - Removedjsesc@3.0.2(transitive)

• - Removedjson-parse-even-better-errors@2.3.1(transitive)

• - Removedlines-and-columns@1.2.4(transitive)

• - Removedminimist@1.2.8(transitive)

• - Removedmkdirp@0.5.6(transitive)

• - Removedms@2.1.3(transitive)

• - Removednopt@1.0.10(transitive)

• - Removedparent-module@1.0.1(transitive)

• - Removedparse-json@5.2.0(transitive)

• - Removedpath-parse@1.0.7(transitive)

• - Removedpath-type@4.0.0(transitive)

• - Removedpicocolors@1.1.1(transitive)

• - Removedresolve@1.22.8(transitive)

• - Removedresolve-from@4.0.0(transitive)

• - Removedsource-map@0.5.70.7.4(transitive)

• - Removedstylis@3.5.4(transitive)

• - Removedstylis-rule-sheet@0.0.10(transitive)

• - Removedsupports-color@5.5.0(transitive)

• - Removedsupports-preserve-symlinks-flag@1.0.0(transitive)

• - Removedtouch@2.0.2(transitive)

• - Removedyaml@1.10.2(transitive)