Lint, componentWillReceibeProps -> getDerivedStateFromProps

.eslintrc

@@ -17,7 +17,9 @@
     "jsx-a11y/no-static-element-interactions": 0,
     "jsx-a11y/click-events-have-key-events": 0,
     "jsx-a11y/no-noninteractive-tabindex": 0,
-    "no-case-declarations": 0
+    "no-case-declarations": 0,
+    "operator-linebreak": 0,
+    "implicit-arrow-linebreak": 0
   },
   "settings": {
     "import/resolve": {

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "prettier.eslintIntegration": true,
   "prettier.printWidth": 120,
-  "prettier.singleQuote": true
+  "prettier.singleQuote": true,
+  "css.validate": false
 }

lib/ReactSelectMe.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+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 _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
 
 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; }; }();
@@ -46,10 +48,11 @@ var ReactSelectMe = function (_PureComponent) {
       var _this$props = _this.props,
           isOpened = _this$props.isOpened,
           beforeClose = _this$props.beforeClose;
+      var opened = _this.state.opened;
       // @maslianok: when you decide to change this, please, keep in mind, that this case should work:
       // Open A -> Open B -> A should be closed
 
-      if (_this.skipPropagation || !_this.state.opened) {
+      if (_this.skipPropagation || !opened) {
         _this.skipPropagation = undefined;
         return;
       }
@@ -119,9 +122,10 @@ var ReactSelectMe = function (_PureComponent) {
           virtualized = _this$props3.virtualized,
           s = _this$props3.s,
           renderVirtualizedList = _this$props3.renderVirtualizedList;
+      var opened = _this.state.opened;
 
 
-      if (!_this.state.opened) {
+      if (!opened) {
         return undefined;
       }
 
@@ -723,15 +727,6 @@ var ReactSelectMe = function (_PureComponent) {
     value: function componentDidMount() {
       document.addEventListener('click', this.closeGlobal);
     }
-  }, {
-    key: 'componentDidUpdate',
-    value: function componentDidUpdate() {
-      if (this.props.isOpened !== undefined && this.state.opened !== this.props.isOpened) {
-        this.setState({
-          opened: this.props.isOpened
-        });
-      }
-    }
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
@@ -749,10 +744,12 @@ var ReactSelectMe = function (_PureComponent) {
         console.warn(msg); // eslint-disable-line no-console
       }
     }
+
     /** **************************************
      ************** Renderers *****************
      **************************************** */
 
+
     /** **************************************
      *************** Getters ******************
      **************************************** */
@@ -765,6 +762,7 @@ var ReactSelectMe = function (_PureComponent) {
   }, {
     key: 'render',
 
+
     /** **************************************
      **************** Render ******************
      **************************************** */
@@ -808,6 +806,20 @@ var ReactSelectMe = function (_PureComponent) {
         this.renderList()
       );
     }
+  }], [{
+    key: 'getDerivedStateFromProps',
+    value: function getDerivedStateFromProps(_ref3, state) {
+      var isOpened = _ref3.isOpened;
+      var opened = state.opened;
+
+      if (isOpened !== undefined && opened !== isOpened) {
+        return _extends({}, state, {
+          opened: isOpened
+        });
+      }
+
+      return state;
+    }
   }]);
 
   return ReactSelectMe;

lib/hoc/makeImmutable.js

@@ -45,6 +45,7 @@ var makeImmutable = function makeImmutable(ReactSelectMe) {
     _createClass(ReactSelectMeHOC, [{
       key: 'render',
       value: function render() {
+        // eslint-disable-next-line react/jsx-props-no-spreading
         return _react2.default.createElement(ReactSelectMe, _extends({}, this.props, { toImmutable: this.toImmutable, immutable: true }));
       }
     }]);

lib/hoc/makeVirtualized.js

@@ -72,6 +72,7 @@ var makeVirtualized = function makeVirtualized(ReactSelectMe) {
     _createClass(ReactSelectMeHOC, [{
       key: 'render',
       value: function render() {
+        // eslint-disable-next-line react/jsx-props-no-spreading
         return _react2.default.createElement(ReactSelectMe, _extends({}, this.props, { renderVirtualizedList: this.renderVirtualizedList, virtualized: true }));
       }
     }]);

package.json

@@ -14,6 +14,7 @@
     "babel-eslint": "^10.1.0",
     "babel-plugin-transform-class-properties": "6.24.1",
     "babel-plugin-transform-object-assign": "^6.5.0",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "eslint": "^7.1.0",
@@ -49,7 +50,7 @@
   },
   "scripts": {
     "build": "npm run build:js && npm run build:css",
-    "build:js": "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties src --out-dir lib",
+    "build:js": "babel --presets=react,es2015 --plugins=transform-object-assign,transform-class-properties,transform-object-rest-spread src --out-dir lib",
     "build:css": "postcss -u postcss-cssnext --postcss-cssnext.browsers \"last 2 versions\" -d lib src/ReactSelectMe.css",
     "clean": "rimraf lib",
     "lint": "eslint -c .eslintrc src",