@atlaskit/select 16.1.1 → 16.1.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/select
 
+## 16.1.3
+
+### Patch Changes
+
+- [`22b754d311f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22b754d311f) - Updates usage of removed design token `utilities.UNSAFE_util.transparent` in favour of its replacement `utilities.UNSAFE.transparent`
+- Updated dependencies
+
+## 16.1.2
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
 ## 16.1.1
 
 ### Patch Changes

package/dist/cjs/AsyncCreatableSelect.js

@@ -1,16 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _asyncCreatable = _interopRequireDefault(require("react-select/async-creatable"));
-
 var _createSelect = _interopRequireDefault(require("./createSelect"));
-
 var _default = (0, _createSelect.default)(_asyncCreatable.default);
-
 exports.default = _default;

package/dist/cjs/AsyncSelect.js

@@ -1,16 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _async = _interopRequireDefault(require("react-select/async"));
-
 var _createSelect = _interopRequireDefault(require("./createSelect"));
-
 var _default = (0, _createSelect.default)(_async.default);
-
 exports.default = _default;

package/dist/cjs/CheckboxSelect.js

@@ -1,38 +1,25 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _Select = _interopRequireDefault(require("./Select"));
-
 var _inputOptions = require("./components/input-options");
-
 var _excluded = ["components"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 var CheckboxSelect = function CheckboxSelect(_ref) {
   var components = _ref.components,
-      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var temp = _objectSpread(_objectSpread({}, components), {}, {
     Option: _inputOptions.CheckboxOption
   });
-
   return /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
@@ -40,6 +27,5 @@ var CheckboxSelect = function CheckboxSelect(_ref) {
     components: temp
   }, props));
 };
-
 var _default = CheckboxSelect;
 exports.default = _default;

package/dist/cjs/CountrySelect.js

@@ -1,21 +1,16 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = require("@emotion/react");
-
 var _countries = require("./data/countries");
-
 var _Select = _interopRequireDefault(require("./Select"));
-
 /** @jsx jsx */
+
 // custom option renderer
 var labelStyles = (0, _react.css)({
   alignItems: 'center',
@@ -24,46 +19,43 @@ var labelStyles = (0, _react.css)({
 });
 var flagStyles = (0, _react.css)({
   fontSize: '18px',
-  // TODO Delete this comment after verifying spacing token -> previous value `'8px'`
-  marginRight: "var(--ds-scale-100, 8px)"
+  marginRight: "var(--ds-space-100, 8px)"
 });
-
 var Opt = function Opt(_ref) {
   var children = _ref.children,
-      icon = _ref.icon;
+    icon = _ref.icon;
   return (0, _react.jsx)("div", {
     css: labelStyles
   }, (0, _react.jsx)("span", {
     css: flagStyles
   }, icon), children);
-}; // return the country name; used for searching
-
+};
 
+// return the country name; used for searching
 var getOptionLabel = function getOptionLabel(_ref2) {
   var abbr = _ref2.abbr,
-      code = _ref2.code,
-      name = _ref2.name;
+    code = _ref2.code,
+    name = _ref2.name;
   return "".concat(name, " (").concat(abbr.toUpperCase(), ") +").concat(code);
-}; // set the country's abbreviation for the option value, (also searchable)
-
+};
 
+// set the country's abbreviation for the option value, (also searchable)
 var getOptionValue = function getOptionValue(opt) {
   return opt.abbr;
-}; // the text node of the control
-
+};
 
+// the text node of the control
 var controlLabel = function controlLabel(opt) {
   return (0, _react.jsx)(Opt, {
     icon: opt.icon
   }, opt.abbr.toUpperCase());
-}; // the text node for an option
-
-
+};
+// the text node for an option
 var optionLabel = function optionLabel(_ref3) {
   var abbr = _ref3.abbr,
-      code = _ref3.code,
-      icon = _ref3.icon,
-      name = _ref3.name;
+    code = _ref3.code,
+    icon = _ref3.icon,
+    name = _ref3.name;
   return (0, _react.jsx)(Opt, {
     icon: icon
   }, getOptionLabel({
@@ -71,15 +63,15 @@ var optionLabel = function optionLabel(_ref3) {
     code: code,
     name: name
   }));
-}; // switch formatters based on render context (menu | value)
-
+};
 
+// switch formatters based on render context (menu | value)
 var formatOptionLabel = function formatOptionLabel(opt, _ref4) {
   var context = _ref4.context;
   return context === 'value' ? controlLabel(opt) : optionLabel(opt);
-}; // put it all together
-
+};
 
+// put it all together
 var CountrySelect = function CountrySelect(props) {
   return (0, _react.jsx)(_Select.default, (0, _extends2.default)({
     isClearable: false,
@@ -90,6 +82,5 @@ var CountrySelect = function CountrySelect(props) {
     options: _countries.groupedCountries
   }, props));
 };
-
 var _default = CountrySelect;
 exports.default = _default;

package/dist/cjs/CreatableSelect.js

@@ -1,16 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _creatable = _interopRequireDefault(require("react-select/creatable"));
-
 var _createSelect = _interopRequireDefault(require("./createSelect"));
-
 var _default = (0, _createSelect.default)(_creatable.default);
-
 exports.default = _default;

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -1,81 +1,52 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _reactDom = require("react-dom");
-
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
-
 var _reactSelect = _interopRequireWildcard(require("react-select"));
-
 var _reactUid = require("react-uid");
-
 var _reactPopper = require("react-popper");
-
 var _reactNodeResolver = _interopRequireDefault(require("react-node-resolver"));
-
 var _objects = _interopRequireDefault(require("shallow-equal/objects"));
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("./components");
-
 var _styles = _interopRequireDefault(require("../styles"));
-
 var _bindEventListener = require("bind-event-listener");
-
 var _excluded = ["footer", "maxMenuWidth", "minMenuWidth", "target"];
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
 /** Are we rendering on the client or server? */
 var canUseDOM = function canUseDOM() {
   return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-}; // ==============================
+};
+
+// ==============================
 // Types
 // ==============================
 
-
 // ==============================
 // Class
 // ==============================
+
 var modifiers = [{
   name: 'offset',
   options: {
@@ -95,27 +66,19 @@ var defaultPopperProps = {
   modifiers: modifiers,
   placement: 'bottom-start'
 };
-
 var isEmpty = function isEmpty(obj) {
   return Object.keys(obj).length === 0;
 };
-
 var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(PopupSelect, _PureComponent);
-
   var _super = _createSuper(PopupSelect);
-
   function PopupSelect() {
     var _this$defaultOpenStat;
-
     var _this;
-
     (0, _classCallCheck2.default)(this, PopupSelect);
-
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "menuRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectRef", null);
@@ -145,12 +108,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         case 'Escape':
         case 'Esc':
           _this.close();
-
           break;
-
         default:
       }
-
       if (_this.props.onKeyDown) {
         /* @ts-ignore - updating type of event React.KeyboardEvent effects the unbindWindowsKeyDown listener. Check if this can be fixed once the component gets refactor to functional */
         _this.props.onKeyDown(event);
@@ -158,34 +118,32 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function (_ref) {
       var target = _ref.target;
-      var isOpen = _this.state.isOpen; // appease flow
-
+      var isOpen = _this.state.isOpen;
+      // appease flow
       if (!(target instanceof Element)) {
         return;
-      } // NOTE: Why not use the <Blanket /> component to close?
+      }
+
+      // NOTE: Why not use the <Blanket /> component to close?
       // We don't want to interupt the user's flow. Taking this approach allows
       // user to click "through" to other elements and close the popout.
-
-
       if (isOpen && _this.menuRef && !_this.menuRef.contains(target)) {
         _this.close();
-      } // open on target click -- we can't trust consumers to spread the onClick
-      // property to the target
-
+      }
 
+      // open on target click -- we can't trust consumers to spread the onClick
+      // property to the target
       if (!isOpen && _this.targetRef && _this.targetRef.contains(target)) {
         _this.open();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectChange", function (value, actionMeta) {
       var _this$props = _this.props,
-          closeMenuOnSelect = _this$props.closeMenuOnSelect,
-          onChange = _this$props.onChange;
-
+        closeMenuOnSelect = _this$props.closeMenuOnSelect,
+        onChange = _this$props.onChange;
       if (closeMenuOnSelect && actionMeta.action !== 'clear') {
         _this.close();
       }
-
       if (onChange) {
         onChange(value, actionMeta);
       }
@@ -200,28 +158,22 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (options) {
       var onOpen = _this.props.onOpen;
-
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup opening if it's open state is already being controlled
         return;
       }
-
       if (onOpen) {
         onOpen();
       }
-
       _this.setState({
         isOpen: true
       });
-
       if (_this.selectRef) {
         _this.selectRef.openMenu('first');
       }
-
       if (typeof window === 'undefined') {
         return;
       }
-
       _this.unbindWindowKeydown = (0, _bindEventListener.bind)(window, {
         type: 'keydown',
         listener: _this.handleKeyDown,
@@ -232,34 +184,26 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (options) {
       var _this$unbindWindowKey, _this2;
-
       var onClose = _this.props.onClose;
-
       if (!(options !== null && options !== void 0 && options.controlOverride) && _this.isOpenControlled) {
         // Prevent popup closing if it's open state is already being controlled
         return;
       }
-
       if (onClose) {
         onClose();
       }
-
       _this.setState({
         isOpen: false
       });
-
       _this.setState({
         focusLockEnabled: false
       });
-
       if (_this.targetRef != null) {
         _this.targetRef.focus();
       }
-
       if (typeof window === 'undefined') {
         return;
       }
-
       (_this$unbindWindowKey = (_this2 = _this).unbindWindowKeydown) === null || _this$unbindWindowKey === void 0 ? void 0 : _this$unbindWindowKey.call(_this2);
       _this.unbindWindowKeydown = null;
     });
@@ -268,7 +212,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
         // avoid thrashing fn calls
         if (!_this.targetRef && popperRef && ref) {
           _this.targetRef = ref;
-
           if (typeof popperRef === 'function') {
             popperRef(ref);
           } else {
@@ -280,7 +223,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resolveMenuRef", function (popperRef) {
       return function (ref) {
         _this.menuRef = ref;
-
         if (typeof popperRef === 'function') {
           popperRef(ref);
         } else {
@@ -307,14 +249,12 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getMaxHeight", function () {
       var maxMenuHeight = _this.props.maxMenuHeight;
-
       if (!_this.selectRef) {
         return maxMenuHeight;
-      } // subtract the control height to maintain consistency
-
+      }
 
+      // subtract the control height to maintain consistency
       var showSearchControl = _this.showSearchControl();
-
       var controlRef = _this.selectRef.controlRef;
       var offsetHeight = showSearchControl && controlRef ? controlRef.offsetHeight : 0;
       var maxHeight = maxMenuHeight - offsetHeight;
@@ -322,47 +262,40 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showSearchControl", function () {
       var _this$props2 = _this.props,
-          searchThreshold = _this$props2.searchThreshold,
-          isSearchable = _this$props2.isSearchable;
+        searchThreshold = _this$props2.searchThreshold,
+        isSearchable = _this$props2.isSearchable;
       return isSearchable && _this.getItemCount() > searchThreshold;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderSelect", function () {
       var _this$props3 = _this.props,
-          footer = _this$props3.footer,
-          maxMenuWidth = _this$props3.maxMenuWidth,
-          minMenuWidth = _this$props3.minMenuWidth,
-          target = _this$props3.target,
-          props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
+        footer = _this$props3.footer,
+        maxMenuWidth = _this$props3.maxMenuWidth,
+        minMenuWidth = _this$props3.minMenuWidth,
+        target = _this$props3.target,
+        props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
       var _this$state = _this.state,
-          focusLockEnabled = _this$state.focusLockEnabled,
-          isOpen = _this$state.isOpen,
-          mergedComponents = _this$state.mergedComponents,
-          mergedPopperProps = _this$state.mergedPopperProps;
-
+        focusLockEnabled = _this$state.focusLockEnabled,
+        isOpen = _this$state.isOpen,
+        mergedComponents = _this$state.mergedComponents,
+        mergedPopperProps = _this$state.mergedPopperProps;
       var showSearchControl = _this.showSearchControl();
-
       var portalDestination = canUseDOM() ? document.body : null;
-
       var components = _objectSpread(_objectSpread({}, mergedComponents), {}, {
         Control: showSearchControl ? mergedComponents.Control : _components.DummyControl
       });
-
       if (!portalDestination || !isOpen) {
         return null;
       }
-
       var popper = /*#__PURE__*/_react.default.createElement(_reactPopper.Popper, (0, _extends2.default)({}, mergedPopperProps, {
         onFirstUpdate: function onFirstUpdate(state) {
           var _mergedPopperProps$on;
-
           _this.handleFirstPopperUpdate();
-
           (_mergedPopperProps$on = mergedPopperProps.onFirstUpdate) === null || _mergedPopperProps$on === void 0 ? void 0 : _mergedPopperProps$on.call(mergedPopperProps, state);
         }
       }), function (_ref2) {
         var placement = _ref2.placement,
-            ref = _ref2.ref,
-            style = _ref2.style;
+          ref = _ref2.ref,
+          style = _ref2.style;
         return /*#__PURE__*/_react.default.createElement(_reactNodeResolver.default, {
           innerRef: _this.resolveMenuRef(ref)
         }, /*#__PURE__*/_react.default.createElement(_components.MenuDialog, {
@@ -389,19 +322,16 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           onChange: _this.handleSelectChange
         })), footer)));
       });
-
       return mergedPopperProps.strategy === 'fixed' ? popper : /*#__PURE__*/(0, _reactDom.createPortal)(popper, portalDestination);
     });
     return _this;
   }
-
   (0, _createClass2.default)(PopupSelect, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (typeof window === 'undefined') {
         return;
       }
-
       this.unbindWindowClick = (0, _bindEventListener.bind)(window, {
         type: 'click',
         listener: this.handleClick,
@@ -414,11 +344,9 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       var _this$unbindWindowCli, _this$unbindWindowKey2;
-
       if (typeof window === 'undefined') {
         return;
       }
-
       (_this$unbindWindowCli = this.unbindWindowClick) === null || _this$unbindWindowCli === void 0 ? void 0 : _this$unbindWindowCli.call(this);
       this.unbindWindowClick = null;
       (_this$unbindWindowKey2 = this.unbindWindowKeydown) === null || _this$unbindWindowKey2 === void 0 ? void 0 : _this$unbindWindowKey2.call(this);
@@ -428,7 +356,6 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var isOpen = this.props.isOpen;
-
       if (prevProps.isOpen !== isOpen) {
         if (isOpen === true) {
           this.open({
@@ -440,14 +367,14 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
           });
         }
       }
-    } // Event Handlers
-    // ==============================
+    }
 
+    // Event Handlers
+    // ==============================
   }, {
     key: "render",
     value: function render() {
       var _this3 = this;
-
       var target = this.props.target;
       var isOpen = this.state.isOpen;
       return /*#__PURE__*/_react.default.createElement(_reactPopper.Manager, null, /*#__PURE__*/_react.default.createElement(_reactPopper.Reference, null, function (_ref3) {
@@ -464,31 +391,27 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
   }], [{
     key: "getDerivedStateFromProps",
     value: function getDerivedStateFromProps(props, state) {
-      var newState = {}; // Merge consumer and default popper props
+      var newState = {};
 
+      // Merge consumer and default popper props
       var mergedPopperProps = _objectSpread(_objectSpread({}, defaultPopperProps), props.popperProps);
-
       if (!(0, _objects.default)(mergedPopperProps, state.mergedPopperProps)) {
         newState.mergedPopperProps = mergedPopperProps;
-      } // Merge consumer and default components
-
+      }
 
+      // Merge consumer and default components
       var mergedComponents = _objectSpread(_objectSpread({}, _components.defaultComponents), props.components);
-
       if (!(0, _objects.default)(mergedComponents, state.mergedComponents)) {
         newState.mergedComponents = mergedComponents;
       }
-
       if (!isEmpty(newState)) {
         return newState;
       }
-
       return null;
     }
   }]);
   return PopupSelect;
 }(_react.PureComponent);
-
 exports.default = PopupSelect;
 (0, _defineProperty2.default)(PopupSelect, "defaultProps", {
   closeMenuOnSelect: true,