react-select - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

lib/animated/transitions.js

@@ -87,7 +87,16 @@ 'use strict';
       if (ref && isNaN(_this.state.width)) {
+        /*
+          Here we're invoking requestAnimationFrame with a callback invoking our
+          call to getBoundingClientRect and setState in order to resolve an edge case
+          around portalling. Certain portalling solutions briefly remove children from the DOM
+          before appending them to the target node. This is to avoid us trying to call getBoundingClientrect
+          while the Select component is in this state.
+        */
         // cannot use `offsetWidth` because it is rounded
-        var _ref$getBoundingClien = ref.getBoundingClientRect(),
-            _width = _ref$getBoundingClien.width;
+        _this.rafID = window.requestAnimationFrame(function () {
+          var _ref$getBoundingClien = ref.getBoundingClientRect(),
+              width = _ref$getBoundingClien.width;
 
-        _this.setState({ width: _width });
+          _this.setState({ width: width });
+        });
       }
@@ -105,12 +114,19 @@ }, _this.getStyle = function (width) {
 
-  // width must be calculated; cannot transition from `undefined` to `number`
+  _createClass(Collapse, [{
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.rafID) {
+        window.cancelAnimationFrame(this.rafID);
+      }
+    }
 
+    // width must be calculated; cannot transition from `undefined` to `number`
 
-  // get base styles
 
+    // get base styles
 
-  // get transition styles
 
+    // get transition styles
 
-  _createClass(Collapse, [{
+  }, {
     key: 'render',
@@ -117,0 +133,0 @@ value: function render() {

lib/Async.js

@@ -109,3 +109,3 @@ 'use strict';
         defaultOptions: Array.isArray(props.defaultOptions) ? props.defaultOptions : undefined,
-        inputValue: props.inputValue,
+        inputValue: typeof props.inputValue !== 'undefined' ? props.inputValue : '',
         isLoading: props.defaultOptions === true ? true : false,
@@ -112,0 +112,0 @@ loadedOptions: [],

lib/components/containers.js

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

lib/components/Control.js

@@ -14,2 +14,4 @@ 'use strict';
 
+var _emotion = require('emotion');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -56,3 +58,3 @@
       innerProps = props.innerProps,
-      emotion = props.emotion;
+      menuIsOpen = props.menuIsOpen;
 
@@ -63,6 +65,7 @@ return _react2.default.createElement(
       ref: innerRef,
-      className: cx(emotion.css(getStyles('control', props)), {
+      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('control', props)), {
         'control': true,
         'control--is-disabled': isDisabled,
-        'control--is-focused': isFocused
+        'control--is-focused': isFocused,
+        'control--menu-is-open': menuIsOpen
       }, className)
@@ -69,0 +72,0 @@ }, innerProps),

lib/components/Group.js

@@ -14,2 +14,4 @@ 'use strict';
 
+var _emotion = require('emotion');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,3 +38,2 @@
       theme = props.theme,
-      emotion = props.emotion,
       selectProps = props.selectProps;
@@ -43,3 +44,3 @@
     {
-      className: cx(emotion.css(getStyles('group', props)), { 'group': true }, className)
+      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('group', props)), { 'group': true }, className)
     },
@@ -50,3 +51,2 @@ _react2.default.createElement(
         selectProps: selectProps,
-        emotion: emotion,
         theme: theme,
@@ -86,8 +86,7 @@ getStyles: getStyles,
       theme = props.theme,
-      emotion = props.emotion,
       selectProps = props.selectProps,
-      cleanProps = _objectWithoutProperties(props, ['className', 'cx', 'getStyles', 'theme', 'emotion', 'selectProps']);
+      cleanProps = _objectWithoutProperties(props, ['className', 'cx', 'getStyles', 'theme', 'selectProps']);
 
   return _react2.default.createElement('div', _extends({
-    className: cx(emotion.css(getStyles('groupHeading', _extends({ theme: theme }, cleanProps))), { 'group-heading': true }, className)
+    className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('groupHeading', _extends({ theme: theme }, cleanProps))), { 'group-heading': true }, className)
   }, cleanProps));
@@ -94,0 +93,0 @@ };

lib/components/indicators.js

@@ -10,4 +10,2 @@ 'use strict';
 
-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,8 +15,6 @@
 
-require('create-emotion');
+var _emotion = require('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; }
@@ -32,4 +28,3 @@
   var size = _ref.size,
-      emotion = _ref.emotion,
-      props = _objectWithoutProperties(_ref, ['size', 'emotion']);
+      props = _objectWithoutProperties(_ref, ['size']);
 
@@ -42,3 +37,3 @@ return _react2.default.createElement('svg', _extends({
     focusable: 'false',
-    className: emotion.css({
+    className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)({
       display: 'inline-block',
@@ -95,4 +90,3 @@ fill: 'currentColor',
       getStyles = props.getStyles,
-      innerProps = props.innerProps,
-      emotion = props.emotion;
+      innerProps = props.innerProps;
 
@@ -102,3 +96,3 @@ return _react2.default.createElement(
     _extends({}, innerProps, {
-      className: cx(emotion.css(getStyles('dropdownIndicator', props)), {
+      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('dropdownIndicator', props)), {
         'indicator': true,
@@ -108,3 +102,3 @@ 'dropdown-indicator': true
     }),
-    children || _react2.default.createElement(DownChevron, { emotion: emotion })
+    children || _react2.default.createElement(DownChevron, null)
   );
@@ -119,4 +113,3 @@ };
       getStyles = props.getStyles,
-      innerProps = props.innerProps,
-      emotion = props.emotion;
+      innerProps = props.innerProps;
 
@@ -126,3 +119,3 @@ return _react2.default.createElement(
     _extends({}, innerProps, {
-      className: cx(emotion.css(getStyles('clearIndicator', props)), {
+      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('clearIndicator', props)), {
         'indicator': true,
@@ -132,3 +125,3 @@ 'clear-indicator': true
     }),
-    children || _react2.default.createElement(CrossIcon, { emotion: emotion })
+    children || _react2.default.createElement(CrossIcon, null)
   );
@@ -159,7 +152,6 @@ };
       getStyles = props.getStyles,
-      innerProps = props.innerProps,
-      emotion = props.emotion;
+      innerProps = props.innerProps;
 
   return _react2.default.createElement('span', _extends({}, innerProps, {
-    className: cx(emotion.css(getStyles('indicatorSeparator', props)), { 'indicator-separator': true }, className)
+    className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('indicatorSeparator', props)), { 'indicator-separator': true }, className)
   }));
@@ -198,6 +190,5 @@ };
       delay = _ref5.delay,
-      offset = _ref5.offset,
-      emotion = _ref5.emotion;
+      offset = _ref5.offset;
   return _react2.default.createElement('span', {
-    className: emotion.css({
+    className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)({
       animationDuration: '1s',
@@ -226,3 +217,2 @@ animationDelay: delay + 'ms',
       isRtl = props.isRtl,
-      emotion = props.emotion,
       colors = props.theme.colors;
@@ -234,3 +224,3 @@
     // eslint-disable-next-line no-unused-expressions
-    emotion.injectGlobal(_templateObject, keyframesName);
+    (0, _emotion.injectGlobal)('@keyframes ', keyframesName, '{0%,80%,100%{opacity:0;}40%{opacity:1;}};');
     keyframesInjected = true;
@@ -242,3 +232,3 @@ }
     _extends({}, innerProps, {
-      className: cx(emotion.css(getStyles('loadingIndicator', props)), {
+      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('loadingIndicator', props)), {
         'indicator': true,
@@ -248,7 +238,7 @@ 'loading-indicator': true
     }),
-    _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 })
+    _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 })
   );
 };
 LoadingIndicator.defaultProps = { size: 4 };

lib/components/Input.js

@@ -14,2 +14,4 @@ 'use strict';
 
+var _emotion = require('emotion');
+
 var _reactInputAutosize = require('react-input-autosize');
@@ -56,9 +58,8 @@
       theme = _ref2.theme,
-      emotion = _ref2.emotion,
       selectProps = _ref2.selectProps,
-      props = _objectWithoutProperties(_ref2, ['className', 'cx', 'getStyles', 'innerRef', 'isHidden', 'isDisabled', 'theme', 'emotion', 'selectProps']);
+      props = _objectWithoutProperties(_ref2, ['className', 'cx', 'getStyles', 'innerRef', 'isHidden', 'isDisabled', 'theme', 'selectProps']);
 
   return _react2.default.createElement(
     'div',
-    { className: emotion.css(getStyles('input', _extends({ theme: theme }, props))) },
+    { className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)(getStyles('input', _extends({ theme: theme }, props))) },
     _react2.default.createElement(_reactInputAutosize2.default, _extends({
@@ -65,0 +66,0 @@ className: cx(null, { 'input': true }, className),

lib/components/Menu.js

@@ -18,2 +18,4 @@ 'use strict';
 
+var _emotion = require('emotion');
+
 var _reactDom = require('react-dom');
@@ -130,5 +132,6 @@
         var _constrainedHeight = maxHeight;
+        var spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
 
-        if (!isFixedPosition && scrollSpaceAbove >= minHeight || isFixedPosition && viewSpaceAbove >= minHeight) {
-          _constrainedHeight = isFixedPosition ? viewSpaceAbove - marginBottom - spacing.controlHeight : scrollSpaceAbove - marginBottom - spacing.controlHeight;
+        if (spaceAbove >= minHeight) {
+          _constrainedHeight = Math.min(spaceAbove - marginBottom - spacing.controlHeight, maxHeight);
         }
@@ -299,6 +302,5 @@
       innerRef = props.innerRef,
-      innerProps = props.innerProps,
-      emotion = props.emotion;
+      innerProps = props.innerProps;
 
-  var cn = cx(emotion.css(getStyles('menu', props)), { menu: true }, className);
+  var cn = cx( /*#__PURE__*/(0, _emotion.css)(getStyles('menu', props)), { menu: true }, className);
 
@@ -336,4 +338,3 @@ return _react2.default.createElement(
       isMulti = props.isMulti,
-      innerRef = props.innerRef,
-      emotion = props.emotion;
+      innerRef = props.innerRef;
 
@@ -343,3 +344,3 @@ return _react2.default.createElement(
     {
-      className: cx(emotion.css(getStyles('menuList', props)), {
+      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('menuList', props)), {
         'menu-list': true,
@@ -376,4 +377,3 @@ 'menu-list--is-multi': isMulti
       getStyles = props.getStyles,
-      innerProps = props.innerProps,
-      emotion = props.emotion;
+      innerProps = props.innerProps;
 
@@ -383,3 +383,3 @@ return _react2.default.createElement(
     _extends({
-      className: cx(emotion.css(getStyles('noOptionsMessage', props)), {
+      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('noOptionsMessage', props)), {
         'menu-notice': true,
@@ -401,4 +401,3 @@ 'menu-notice--no-options': true
       getStyles = props.getStyles,
-      innerProps = props.innerProps,
-      emotion = props.emotion;
+      innerProps = props.innerProps;
 
@@ -408,3 +407,3 @@ return _react2.default.createElement(
     _extends({
-      className: cx(emotion.css(getStyles('loadingMessage', props)), {
+      className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('loadingMessage', props)), {
         'menu-notice': true,
@@ -483,4 +482,3 @@ 'menu-notice--loading': true
           position = _props.menuPosition,
-          getStyles = _props.getStyles,
-          emotion = _props.emotion;
+          getStyles = _props.getStyles;
 
@@ -503,3 +501,3 @@ var isFixed = position === 'fixed';
         'div',
-        { className: emotion.css(getStyles('menuPortal', state)) },
+        { className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)(getStyles('menuPortal', state)) },
         children
@@ -506,0 +504,0 @@ );

lib/components/MultiValue.js

@@ -16,2 +16,4 @@ 'use strict';
 
+var _emotion = require('emotion');
+
 var _indicators = require('./indicators');
@@ -105,4 +107,3 @@
           children = _props.children,
-          innerProps = _props.innerProps,
-          emotion = _props.emotion;
+          innerProps = _props.innerProps;
 
@@ -112,3 +113,3 @@ return _react2.default.createElement(
         innerProps,
-        children || _react2.default.createElement(_indicators.CrossIcon, { size: 14, emotion: emotion })
+        children || _react2.default.createElement(_indicators.CrossIcon, { size: 14 })
       );
@@ -143,4 +144,3 @@ }
           removeProps = _props2.removeProps,
-          selectProps = _props2.selectProps,
-          emotion = _props2.emotion;
+          selectProps = _props2.selectProps;
       var Container = components.Container,
@@ -152,3 +152,3 @@ Label = components.Label,
       var containerInnerProps = _extends({
-        className: cx(emotion.css(getStyles('multiValue', this.props)), {
+        className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('multiValue', this.props)), {
           'multi-value': true,
@@ -160,3 +160,3 @@ 'multi-value--is-disabled': isDisabled
       var labelInnerProps = {
-        className: cx(emotion.css(getStyles('multiValueLabel', this.props)), {
+        className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('multiValueLabel', this.props)), {
           'multi-value__label': true
@@ -167,3 +167,3 @@ }, className)
       var removeInnerProps = _extends({
-        className: cx(emotion.css(getStyles('multiValueRemove', this.props)), {
+        className: cx( /*#__PURE__*/(0, _emotion.css)(getStyles('multiValueRemove', this.props)), {
           'multi-value__remove': true
@@ -192,4 +192,3 @@ }, className)
           innerProps: removeInnerProps,
-          selectProps: selectProps,
-          emotion: emotion
+          selectProps: selectProps
         })
@@ -196,0 +195,0 @@ );

lib/components/Option.js

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

lib/components/Placeholder.js

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

lib/components/SingleValue.js

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

lib/Creatable.js

@@ -38,5 +38,10 @@ 'use strict';
 
-var compareOption = function compareOption(inputValue, option) {
-  var candidate = inputValue.toLowerCase();
-  return option.value.toLowerCase() === candidate || option.label.toLowerCase() === candidate;
+var compareOption = function compareOption() {
+  var inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var option = arguments[1];
+
+  var candidate = String(inputValue).toLowerCase();
+  var optionValue = String(option.value).toLowerCase();
+  var optionLabel = String(option.label).toLowerCase();
+  return optionValue === candidate || optionLabel === candidate;
 };
@@ -43,0 +48,0 @@

lib/internal/A11yText.js

@@ -13,2 +13,4 @@ 'use strict';
 
+var _emotion = require('emotion');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -19,3 +21,3 @@
   return _react2.default.createElement('span', _extends({
-    className: props.emotion.css({
+    className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)({
       zIndex: 9999,
@@ -22,0 +24,0 @@ border: 0,

lib/internal/DummyInput.js

@@ -15,2 +15,4 @@ 'use strict';
 
+var _emotion = require('emotion');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,3 +54,3 @@
       }, props, {
-        className: emotion.css({
+        className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)({
           // get rid of any default styles
@@ -55,0 +57,0 @@ background: 0,

lib/internal/ScrollBlock.js

@@ -13,2 +13,4 @@ 'use strict';
 
+var _emotion = require('emotion');
+
 var _NodeResolver = require('./NodeResolver');
@@ -70,4 +72,3 @@
           children = _props.children,
-          isEnabled = _props.isEnabled,
-          emotion = _props.emotion;
+          isEnabled = _props.isEnabled;
       var touchScrollTarget = this.state.touchScrollTarget;
@@ -96,3 +97,3 @@
           onClick: this.blurSelectInput,
-          className: emotion.css({ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 })
+          className: /*#__PURE__*/ /*#__PURE__*/(0, _emotion.css)({ position: 'fixed', left: 0, bottom: 0, right: 0, top: 0 })
         }),
@@ -99,0 +100,0 @@ _react2.default.createElement(

lib/Select.js

@@ -20,6 +20,2 @@ 'use strict';
 
-var _createEmotion = require('create-emotion');
-
-var _createEmotion2 = _interopRequireDefault(_createEmotion);
-
 var _Menu = require('./components/Menu');
@@ -107,6 +103,2 @@
 
-var getEmotion = (0, _memoizeOne2.default)(function (nonce) {
-  return (0, _createEmotion2.default)(nonce ? { nonce: nonce } : {});
-});
-
 var Select = function (_Component) {
@@ -121,3 +113,5 @@ _inherits(Select, _Component);
 
-  // TODO
+  // Misc. Instance Properties
+  // ------------------------------
+
   function Select(props) {
@@ -139,11 +133,7 @@ _classCallCheck(this, Select);
 
-    _this.emotion = getEmotion(props.nonce);
-
     _this.state.menuOptions = menuOptions;
     _this.state.selectValue = selectValue;
     return _this;
-  }
+  } // TODO
 
-  // Misc. Instance Properties
-  // ------------------------------
 
@@ -451,4 +441,3 @@ _createClass(Select, [{
         selectProps: props,
-        theme: this.getTheme(),
-        emotion: this.emotion
+        theme: this.getTheme()
       };
@@ -779,4 +768,3 @@ }
           tabIndex: tabIndex,
-          value: '',
-          emotion: this.emotion
+          value: ''
         });
@@ -816,4 +804,3 @@ }
         type: 'text',
-        value: inputValue,
-        emotion: this.emotion
+        value: inputValue
       }, ariaAttributes));
@@ -1125,3 +1112,3 @@ }
                 _index.ScrollBlock,
-                { emotion: _this5.emotion, isEnabled: menuShouldBlockScroll },
+                { isEnabled: menuShouldBlockScroll },
                 _react2.default.createElement(
@@ -1204,3 +1191,3 @@ MenuList,
         _index.A11yText,
-        { emotion: this.emotion, 'aria-live': 'assertive' },
+        { 'aria-live': 'assertive' },
         _react2.default.createElement(
@@ -1231,3 +1218,4 @@ 'p',
           id = _props13.id,
-          isDisabled = _props13.isDisabled;
+          isDisabled = _props13.isDisabled,
+          menuIsOpen = _props13.menuIsOpen;
       var isFocused = this.state.isFocused;
@@ -1259,3 +1247,4 @@
             isDisabled: isDisabled,
-            isFocused: isFocused
+            isFocused: isFocused,
+            menuIsOpen: menuIsOpen
           }),
@@ -1262,0 +1251,0 @@ _react2.default.createElement(

lib/stateManager.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.defaultProps = undefined;
 
@@ -26,2 +27,8 @@ 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 defaultProps = exports.defaultProps = {
+  defaultInputValue: '',
+  defaultMenuIsOpen: false,
+  defaultValue: null
+};
+
 var manageState = function manageState(SelectComponent) {
@@ -116,9 +123,5 @@ var _class, _temp2;
     return StateManager;
-  }(_react.Component), _class.defaultProps = {
-    defaultInputValue: '',
-    defaultMenuIsOpen: false,
-    defaultValue: null
-  }, _temp2;
+  }(_react.Component), _class.defaultProps = defaultProps, _temp2;
 };
 
 exports.default = manageState;

package.json

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

src/__tests__/Async.test.js

@@ -46,2 +46,13 @@ import React from 'react';
 
+test('load options prop with defaultOptions true and inputValue prop', () => {
+  const loadOptionsSpy = jest.fn((value) => value);
+  const searchString = 'hello world';
+  mount(<Async
+      loadOptions={loadOptionsSpy}
+      defaultOptions
+      inputValue={searchString}
+    />);
+  expect(loadOptionsSpy).toHaveReturnedWith(searchString);
+});
+
 /**
@@ -48,0 +59,0 @@ * loadOptions with promise is not resolved and it renders loading options

src/animated/transitions.js

@@ -65,2 +65,3 @@ // @flow
   duration = collapseDuration;
+  rafID: number | null;
   state = { width: 'auto' };
@@ -71,2 +72,7 @@ transition = {
   };
+  componentWillUnmount () {
+    if (this.rafID) {
+      window.cancelAnimationFrame(this.rafID);
+    }
+  }
 
@@ -76,5 +82,14 @@ // width must be calculated; cannot transition from `undefined` to `number`
     if (ref && isNaN(this.state.width)) {
+      /*
+        Here we're invoking requestAnimationFrame with a callback invoking our
+        call to getBoundingClientRect and setState in order to resolve an edge case
+        around portalling. Certain portalling solutions briefly remove children from the DOM
+        before appending them to the target node. This is to avoid us trying to call getBoundingClientrect
+        while the Select component is in this state.
+      */
       // cannot use `offsetWidth` because it is rounded
-      const { width } = ref.getBoundingClientRect();
-      this.setState({ width });
+      this.rafID = window.requestAnimationFrame(() => {
+        const { width } = ref.getBoundingClientRect();
+        this.setState({ width });
+      });
     }
@@ -81,0 +96,0 @@ };

src/Async.js

@@ -50,3 +50,3 @@ // @flow
           : undefined,
-        inputValue: props.inputValue,
+        inputValue: typeof props.inputValue !== 'undefined' ? props.inputValue : '',
         isLoading: props.defaultOptions === true ? true : false,
@@ -53,0 +53,0 @@ loadedOptions: [],

src/components/containers.js

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

src/components/Control.js

 // @flow
 import React, { type Node, type ElementRef } from 'react';
-
+import { css as emotionCSS } from 'emotion';
 import type { CommonProps, PropsWithStyles } from '../types';
@@ -11,2 +11,4 @@
   isFocused: boolean,
+  /** Whether the select is expanded. */
+  menuIsOpen: boolean,
 };
@@ -55,10 +57,11 @@
 const Control = (props: ControlProps) => {
-  const { children, cx, getStyles, className, isDisabled, isFocused, innerRef, innerProps, emotion } = props;
+  const { children, cx, getStyles, className, isDisabled, isFocused, innerRef, innerProps, menuIsOpen } = props;
   return (
     <div
       ref={innerRef}
-      className={cx(emotion.css(getStyles('control', props)), {
+      className={cx(emotionCSS(getStyles('control', props)), {
         'control': true,
         'control--is-disabled': isDisabled,
-        'control--is-focused': isFocused
+        'control--is-focused': isFocused,
+        'control--menu-is-open': menuIsOpen
       }, className)}
@@ -65,0 +68,0 @@ {...innerProps}

src/components/Group.js

 // @flow
 import React, { type Node, type ComponentType } from 'react';
-
+import { css } from 'emotion';
 import type { CommonProps } from '../types';
@@ -33,3 +33,2 @@
     theme,
-    emotion,
     selectProps,
@@ -40,3 +39,3 @@ } = props;
       className={cx(
-        emotion.css(getStyles('group', props)),
+        css(getStyles('group', props)),
         { 'group': true },
@@ -49,3 +48,2 @@ className,
         selectProps={selectProps}
-        emotion={emotion}
         theme={theme}
@@ -75,7 +73,7 @@ getStyles={getStyles}
 export const GroupHeading = (props: any) => {
-  const { className, cx, getStyles, theme, emotion, selectProps, ...cleanProps } = props;
+  const { className, cx, getStyles, theme, selectProps, ...cleanProps } = props;
   return (
     <div
       className={cx(
-        emotion.css(getStyles('groupHeading', { theme, ...cleanProps })),
+        css(getStyles('groupHeading', { theme, ...cleanProps })),
         { 'group-heading': true },
@@ -82,0 +80,0 @@ className

src/components/indicators.js

 // @flow
 import React, { type Node } from 'react';
-import { type Emotion } from 'create-emotion';
+import { css, injectGlobal } from 'emotion';
 
@@ -11,3 +11,3 @@ import type { CommonProps, Theme } from '../types';
 
-const Svg = ({ size, emotion, ...props }: { size: number, emotion: Emotion }) => (
+const Svg = ({ size, ...props }: { size: number }) => (
   <svg
@@ -19,3 +19,3 @@ height={size}
     focusable="false"
-    className={emotion.css({
+    className={css({
       display: 'inline-block',
@@ -74,3 +74,3 @@ fill: 'currentColor',
 export const DropdownIndicator = (props: IndicatorProps) => {
-  const { children, className, cx, getStyles, innerProps, emotion } = props;
+  const { children, className, cx, getStyles, innerProps } = props;
   return (
@@ -80,3 +80,3 @@ <div
       className={cx(
-        emotion.css(getStyles('dropdownIndicator', props)),
+        css(getStyles('dropdownIndicator', props)),
         {
@@ -89,3 +89,3 @@ 'indicator': true,
     >
-      {children || <DownChevron emotion={emotion} />}
+      {children || <DownChevron />}
     </div>
@@ -97,3 +97,3 @@ );
 export const ClearIndicator = (props: IndicatorProps) => {
-  const { children, className, cx, getStyles, innerProps, emotion } = props;
+  const { children, className, cx, getStyles, innerProps } = props;
   return (
@@ -103,3 +103,3 @@ <div
       className={cx(
-        emotion.css(getStyles('clearIndicator', props)),
+        css(getStyles('clearIndicator', props)),
         {
@@ -111,3 +111,3 @@ 'indicator': true,
     >
-      {children || <CrossIcon emotion={emotion} />}
+      {children || <CrossIcon />}
     </div>
@@ -135,3 +135,3 @@ );
 export const IndicatorSeparator = (props: IndicatorProps) => {
-  const { className, cx, getStyles, innerProps, emotion } = props;
+  const { className, cx, getStyles, innerProps } = props;
   return (
@@ -141,3 +141,3 @@ <span
       className={cx(
-        emotion.css(getStyles('indicatorSeparator', props)),
+        css(getStyles('indicatorSeparator', props)),
         { 'indicator-separator': true },
@@ -178,6 +178,6 @@ className
 
-type DotProps = { color: string, delay: number, offset: boolean, emotion: any };
-const LoadingDot = ({ color, delay, offset, emotion }: DotProps) => (
+type DotProps = { color: string, delay: number, offset: boolean };
+const LoadingDot = ({ color, delay, offset }: DotProps) => (
   <span
-    className={emotion.css({
+    className={css({
       animationDuration: '1s',
@@ -211,3 +211,3 @@ animationDelay: `${delay}ms`,
 export const LoadingIndicator = (props: LoadingIconProps) => {
-  const { className, cx, getStyles, innerProps, isFocused, isRtl, emotion, theme: { colors } } = props;
+  const { className, cx, getStyles, innerProps, isFocused, isRtl, theme: { colors } } = props;
   const color = isFocused ? colors.neutral80 : colors.neutral20;
@@ -217,3 +217,3 @@
     // eslint-disable-next-line no-unused-expressions
-    emotion.injectGlobal`@keyframes ${keyframesName} {
+    injectGlobal`@keyframes ${keyframesName} {
       0%, 80%, 100% { opacity: 0; }
@@ -229,3 +229,3 @@ 40% { opacity: 1; }
       className={cx(
-        emotion.css(getStyles('loadingIndicator', props)),
+        css(getStyles('loadingIndicator', props)),
         {
@@ -238,5 +238,5 @@ 'indicator': true,
     >
-      <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} />
+      <LoadingDot color={color} delay={0} offset={isRtl} />
+      <LoadingDot color={color} delay={160} offset />
+      <LoadingDot color={color} delay={320} offset={!isRtl} />
     </div>
@@ -243,0 +243,0 @@ );

src/components/Input.js

 // @flow
 import React, { type ElementRef } from 'react';
+import { css } from 'emotion';
 import AutosizeInput from 'react-input-autosize';
@@ -16,3 +17,2 @@
   className?: string,
-  emotion: any,
 };
@@ -45,7 +45,6 @@
   theme,
-  emotion,
   selectProps,
   ...props
 }: InputProps) => (
-  <div className={emotion.css(getStyles('input', { theme, ...props }))}>
+  <div className={css(getStyles('input', { theme, ...props }))}>
     <AutosizeInput
@@ -52,0 +51,0 @@ className={cx(null, { 'input': true }, className)}

src/components/Menu.js

@@ -8,2 +8,3 @@ // @flow
 } from 'react';
+import { css } from 'emotion';
 import { createPortal } from 'react-dom';
@@ -134,10 +135,9 @@ import PropTypes from 'prop-types';
         let constrainedHeight = maxHeight;
+        const spaceAbove = isFixedPosition ? viewSpaceAbove : scrollSpaceAbove;
 
-        if (
-          (!isFixedPosition && scrollSpaceAbove >= minHeight) ||
-          (isFixedPosition && viewSpaceAbove >= minHeight)
-        ) {
-          constrainedHeight = isFixedPosition
-            ? viewSpaceAbove - marginBottom - spacing.controlHeight
-            : scrollSpaceAbove - marginBottom - spacing.controlHeight;
+        if (spaceAbove >= minHeight) {
+          constrainedHeight = Math.min(
+            spaceAbove - marginBottom - spacing.controlHeight,
+            maxHeight
+          );
         }
@@ -319,4 +319,4 @@
 const Menu = (props: MenuProps) => {
-  const { children, className, cx, getStyles, innerRef, innerProps, emotion } = props;
-  const cn = cx(emotion.css(getStyles('menu', props)), { menu: true }, className);
+  const { children, className, cx, getStyles, innerRef, innerProps } = props;
+  const cn = cx(css(getStyles('menu', props)), { menu: true }, className);
 
@@ -366,7 +366,7 @@ return (
 export const MenuList = (props: MenuListComponentProps) => {
-  const { children, className, cx, getStyles, isMulti, innerRef, emotion } = props;
+  const { children, className, cx, getStyles, isMulti, innerRef } = props;
   return (
     <div
       className={cx(
-        emotion.css(getStyles('menuList', props)),
+        css(getStyles('menuList', props)),
         {
@@ -410,7 +410,7 @@ 'menu-list': true,
 export const NoOptionsMessage = (props: NoticeProps) => {
-  const { children, className, cx, getStyles, innerProps, emotion } = props;
+  const { children, className, cx, getStyles, innerProps } = props;
   return (
     <div
       className={cx(
-        emotion.css(getStyles('noOptionsMessage', props)),
+        css(getStyles('noOptionsMessage', props)),
         {
@@ -433,7 +433,7 @@ 'menu-notice': true,
 export const LoadingMessage = (props: NoticeProps) => {
-  const { children, className, cx, getStyles, innerProps, emotion } = props;
+  const { children, className, cx, getStyles, innerProps } = props;
   return (
     <div
       className={cx(
-        emotion.css(getStyles('loadingMessage', props)),
+        css(getStyles('loadingMessage', props)),
         {
@@ -511,3 +511,2 @@ 'menu-notice': true,
       getStyles,
-      emotion
     } = this.props;
@@ -529,3 +528,3 @@ const isFixed = position === 'fixed';
     const menuWrapper = (
-      <div className={emotion.css(getStyles('menuPortal', state))}>{children}</div>
+      <div className={css(getStyles('menuPortal', state))}>{children}</div>
     );
@@ -532,0 +531,0 @@

src/components/MultiValue.js

 // @flow
 import React, { Component, type Node } from 'react';
-
+import { css } from 'emotion';
 import { CrossIcon } from './indicators';
@@ -73,3 +73,2 @@ import type { CommonProps } from '../types';
 export type MultiValueRemoveProps = {
-  emotion: any,
   children: Node,
@@ -87,4 +86,4 @@ data: any,
   render() {
-    const { children, innerProps, emotion } = this.props;
-    return <div {...innerProps}>{children || <CrossIcon size={14} emotion={emotion} />}</div>;
+    const { children, innerProps } = this.props;
+    return <div {...innerProps}>{children || <CrossIcon size={14} />}</div>;
   }
@@ -109,3 +108,2 @@ }
       selectProps,
-      emotion,
     } = this.props;
@@ -117,3 +115,3 @@
       className: cx(
-        emotion.css(getStyles('multiValue', this.props)),
+        css(getStyles('multiValue', this.props)),
         {
@@ -130,3 +128,3 @@ 'multi-value': true,
       className: cx(
-        emotion.css(getStyles('multiValueLabel', this.props)),
+        css(getStyles('multiValueLabel', this.props)),
         {
@@ -141,3 +139,3 @@ 'multi-value__label': true,
       className: cx(
-        emotion.css(getStyles('multiValueRemove', this.props)),
+        css(getStyles('multiValueRemove', this.props)),
         {
@@ -168,3 +166,2 @@ 'multi-value__remove': true,
           selectProps={selectProps}
-          emotion={emotion}
         />
@@ -171,0 +168,0 @@ </Container>

src/components/Option.js

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

src/components/Placeholder.js

 // @flow
 import React, { type Node } from 'react';
-
+import { css } from 'emotion';
 import type { CommonProps } from '../types';
@@ -23,7 +23,7 @@
 const Placeholder = (props: PlaceholderProps) => {
-  const { children, className, cx, getStyles, innerProps, emotion } = props;
+  const { children, className, cx, getStyles, innerProps } = props;
   return (
     <div
       className={cx(
-        emotion.css(getStyles('placeholder', props)),
+        css(getStyles('placeholder', props)),
         {
@@ -30,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';
@@ -33,7 +34,7 @@
 const SingleValue = (props: SingleValueProps) => {
-  const { children, className, cx, getStyles, isDisabled, innerProps, emotion } = props;
+  const { children, className, cx, getStyles, isDisabled, innerProps } = props;
   return (
     <div
       className={cx(
-        emotion.css(getStyles('singleValue', props)),
+        emotionCSS(getStyles('singleValue', props)),
         {
@@ -40,0 +41,0 @@ 'single-value': true,

src/Creatable.js

@@ -38,8 +38,7 @@ // @flow
 
-const compareOption = (inputValue, option) => {
-  const candidate = inputValue.toLowerCase();
-  return (
-    option.value.toLowerCase() === candidate ||
-    option.label.toLowerCase() === candidate
-  );
+const compareOption = (inputValue = '', option) => {
+  const candidate = String(inputValue).toLowerCase();
+  const optionValue = String(option.value).toLowerCase();
+  const optionLabel = String(option.label).toLowerCase();
+  return optionValue === candidate || optionLabel === candidate;
 };
@@ -46,0 +45,0 @@

src/internal/A11yText.js

 // @flow
 import React from 'react';
+import { css } from 'emotion';
 
@@ -7,3 +8,3 @@ // Assistive text to describe visual elements. Hidden for sighted users.
   <span
-    className={props.emotion.css({
+    className={css({
       zIndex: 9999,
@@ -10,0 +11,0 @@ border: 0,

src/internal/DummyInput.js

 // @flow
 
 import React, { Component } from 'react';
+import { css } from 'emotion';
 
@@ -12,3 +13,3 @@ export default class DummyInput extends Component<any> {
         {...props}
-        className={emotion.css({
+        className={css({
           // get rid of any default styles
@@ -15,0 +16,0 @@ background: 0,

src/internal/ScrollBlock.js

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

src/Select.js

@@ -6,3 +6,2 @@ // @flow
 import memoizeOne from 'memoize-one';
-import createEmotion, { type Emotion } from 'create-emotion';
 import { MenuPlacer } from './components/Menu';
@@ -247,4 +246,2 @@ import isEqual from './internal/react-fast-compare';
   value: ValueType,
-  /* A CSP Nonce which will be used in injected style sheets */
-  nonce?: string
 };
@@ -313,4 +310,2 @@
 
-const getEmotion: ?string => Emotion = memoizeOne((nonce) => createEmotion(nonce ? { nonce } : {}));
-
 export default class Select extends Component<Props, State> {
@@ -337,3 +332,2 @@ static defaultProps = defaultProps;
   components: SelectComponents;
-  emotion: Emotion;
   hasGroups: boolean = false;
@@ -382,4 +376,2 @@ initialTouchX: number = 0;
 
-    this.emotion = getEmotion(props.nonce);
-
     this.state.menuOptions = menuOptions;
@@ -737,3 +729,2 @@ this.state.selectValue = selectValue;
       theme: this.getTheme(),
-      emotion: this.emotion
     };
@@ -1010,3 +1001,3 @@ }
     }
-    
+
     this.initialTouchX = touch.clientX;
@@ -1401,3 +1392,2 @@ this.initialTouchY = touch.clientY;
           value=""
-          emotion={this.emotion}
         />
@@ -1436,3 +1426,2 @@ );
         value={inputValue}
-        emotion={this.emotion}
         {...ariaAttributes}
@@ -1715,3 +1704,3 @@ />
             >
-              <ScrollBlock emotion={this.emotion} isEnabled={menuShouldBlockScroll}>
+              <ScrollBlock isEnabled={menuShouldBlockScroll}>
                 <MenuList
@@ -1787,3 +1776,3 @@ {...commonProps}
     return (
-      <A11yText emotion={this.emotion} aria-live="assertive">
+      <A11yText aria-live="assertive">
         <p id="aria-selection-event">&nbsp;{this.state.ariaLiveSelection}</p>
@@ -1803,3 +1792,3 @@ <p id="aria-context">&nbsp;{this.constructAriaLiveMessage()}</p>
 
-    const { className, id, isDisabled } = this.props;
+    const { className, id, isDisabled, menuIsOpen } = this.props;
     const { isFocused } = this.state;
@@ -1830,2 +1819,3 @@
           isFocused={isFocused}
+          menuIsOpen={menuIsOpen}
         >
@@ -1832,0 +1822,0 @@ <ValueContainer {...commonProps} isDisabled={isDisabled}>

src/stateManager.js

@@ -15,2 +15,4 @@ // @flow
 };
+
+
 type State = {
@@ -22,9 +24,11 @@ inputValue: string,
 
+export const defaultProps = {
+  defaultInputValue: '',
+  defaultMenuIsOpen: false,
+  defaultValue: null,
+};
+
 const manageState = (SelectComponent: ComponentType<*>) =>
   class StateManager extends Component<Props, State> {
-    static defaultProps = {
-      defaultInputValue: '',
-      defaultMenuIsOpen: false,
-      defaultValue: null,
-    };
+    static defaultProps = defaultProps
 
@@ -31,0 +35,0 @@ select: ElementRef<*>;

src/types.js

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

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

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

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

1044014

decreased by-33.35%

Lines of code

21296

decreased by-6.14%

Dependency changes

• + Addedemotion@^9.1.2

• + Added@babel/code-frame@7.25.9(transitive)

• + Added@babel/generator@7.25.9(transitive)

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

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

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

• + Added@babel/highlight@7.25.9(transitive)

• + Added@babel/parser@7.25.9(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.25.9(transitive)

• + Added@emotion/babel-utils@0.6.10(transitive)

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

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

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

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

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

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

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedabbrev@1.1.1(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-emotion@9.2.11(transitive)

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

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@9.2.12(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedemotion@9.2.12(transitive)

• + Addederror-ex@1.3.2(transitive)

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

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedminimist@1.2.8(transitive)

• + Addedmkdirp@0.5.6(transitive)

• + Addedms@2.1.3(transitive)

• + Addednopt@1.0.10(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.70.7.4(transitive)

• + Addedstylis@3.5.4(transitive)

• + Addedstylis-rule-sheet@0.0.10(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtouch@2.0.2(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removedcreate-emotion@^10.0.4

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

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

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

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

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

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

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

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

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

• - Removedcreate-emotion@10.0.27(transitive)