react-dropdown-select - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/index.js

@@ -1,2 +0,2 @@
-'use strict';
+"use strict";
 
@@ -6,83 +6,92 @@ Object.defineProperty(exports, "__esModule", {
 });
-exports.Select = undefined;
+exports.default = exports.Select = void 0;
 
-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; }; }();
+var _react = _interopRequireDefault(require("react"));
 
-var _templateObject = _taggedTemplateLiteral(['\n  display: flex;\n  border: 1px solid #ccc;\n  width: 100%;\n  border-radius: 2px;\n  padding: 2px 5px;\n  border-radius: 2px;\n  flex-direction: row;\n  align-items: center;\n  min-height: 36px;\n  ', '\n\n  :focus-within {\n    border-color: deepskyblue;\n  }\n  background: linear-gradient(#eee, #fff, #eee);\n'], ['\n  display: flex;\n  border: 1px solid #ccc;\n  width: 100%;\n  border-radius: 2px;\n  padding: 2px 5px;\n  border-radius: 2px;\n  flex-direction: row;\n  align-items: center;\n  min-height: 36px;\n  ', '\n\n  :focus-within {\n    border-color: deepskyblue;\n  }\n  background: linear-gradient(#eee, #fff, #eee);\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  padding: 0 5px;\n  border-radius: 2px;\n  line-height: 21px;\n  margin: 3px 0 3px 5px;\n  background: deepskyblue;\n  color: #fff;\n  white-space: nowrap;\n  display: inline-block;\n\n  .react-dropdown-select-option-remove {\n    cursor: pointer;\n    width: 21px;\n    height: 21px;\n    display: inline-block;\n    text-align: center;\n    margin: 0 -5px 0 0px;\n    border-radius: 0 3px 3px 0;\n  }\n\n  :hover, :hover > span {\n    background: #00C4ee;\n  }\n'], ['\n  padding: 0 5px;\n  border-radius: 2px;\n  line-height: 21px;\n  margin: 3px 0 3px 5px;\n  background: deepskyblue;\n  color: #fff;\n  white-space: nowrap;\n  display: inline-block;\n\n  .react-dropdown-select-option-remove {\n    cursor: pointer;\n    width: 21px;\n    height: 21px;\n    display: inline-block;\n    text-align: center;\n    margin: 0 -5px 0 0px;\n    border-radius: 0 3px 3px 0;\n  }\n\n  :hover, :hover > span {\n    background: #00C4ee;\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  flex: 1;\n'], ['\n  flex: 1;\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  width: auto;\n  border: none;\n  margin-left: 5px;\n  background: transparent;\n  :focus {\n    outline: transparent;\n  }\n  font-size: smaller;\n'], ['\n  width: auto;\n  border: none;\n  margin-left: 5px;\n  background: transparent;\n  :focus {\n    outline: transparent;\n  }\n  font-size: smaller;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  border-left: 1px solid #ccc;\n  width: 1px;\n  height: 25px;\n  display: block;\n'], ['\n  border-left: 1px solid #ccc;\n  width: 1px;\n  height: 25px;\n  display: block;\n']),
-    _templateObject6 = _taggedTemplateLiteral(['\n  @keyframes dual-ring-spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(180deg);\n    }\n  }\n\n  padding: 0 5px;\n  display: block;\n  width: auto;\n  height: auto;\n\n  :after {\n    content: " ";\n    display: block;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    border: 1px solid red;\n    border-color: deepskyblue transparent;\n    animation: dual-ring-spin .7s ease-in-out infinite;\n    margin: 0 0 0 -10px;\n  }\n'], ['\n  @keyframes dual-ring-spin {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(180deg);\n    }\n  }\n\n  padding: 0 5px;\n  display: block;\n  width: auto;\n  height: auto;\n\n  :after {\n    content: " ";\n    display: block;\n    width: 16px;\n    height: 16px;\n    border-radius: 50%;\n    border: 1px solid red;\n    border-color: deepskyblue transparent;\n    animation: dual-ring-spin .7s ease-in-out infinite;\n    margin: 0 0 0 -10px;\n  }\n']),
-    _templateObject7 = _taggedTemplateLiteral(['\n  width: 20px;\n  text-align: center;\n  line-height: 25px;\n  transform: rotate(-90deg);\n  cursor: pointer;\n  font-size: 26px;\n'], ['\n  width: 20px;\n  text-align: center;\n  line-height: 25px;\n  transform: rotate(-90deg);\n  cursor: pointer;\n  font-size: 26px;\n']),
-    _templateObject8 = _taggedTemplateLiteral(['\n  position: absolute;\n  top: ', 'px;\n  left: ', 'px;\n  border: 1px solid #ccc;\n  width: ', 'px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: #fff;\n  border-radius: 2px;\n  box-shadow: 0 0 10px 0 #0000003b;\n  max-height: 300px;\n  overflow: auto;\n'], ['\n  position: absolute;\n  top: ', 'px;\n  left: ', 'px;\n  border: 1px solid #ccc;\n  width: ', 'px;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  background: #fff;\n  border-radius: 2px;\n  box-shadow: 0 0 10px 0 #0000003b;\n  max-height: 300px;\n  overflow: auto;\n']),
-    _templateObject9 = _taggedTemplateLiteral(['\n  padding: 10px;\n  cursor: pointer;\n\n  :hover {\n    background: #f2f2f2;\n  }\n\n  input {\n    &[type="checkbox"] {\n      vertical-align: baseline;\n      margin: 0 10px 0 0;\n    }\n  }\n'], ['\n  padding: 10px;\n  cursor: pointer;\n\n  :hover {\n    background: #f2f2f2;\n  }\n\n  input {\n    &[type="checkbox"] {\n      vertical-align: baseline;\n      margin: 0 10px 0 0;\n    }\n  }\n']),
-    _templateObject10 = _taggedTemplateLiteral(['\n  margin: 10px;\n'], ['\n  margin: 10px;\n']),
-    _templateObject11 = _taggedTemplateLiteral(['\n  line-height: 25px;\n  margin: 0 10px;\n  cursor: pointer;\n'], ['\n  line-height: 25px;\n  margin: 0 10px;\n  cursor: pointer;\n']);
+var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = require('react');
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _react2 = _interopRequireDefault(_react);
+var _reactOnclickout = _interopRequireDefault(require("react-onclickout"));
 
-var _propTypes = require('prop-types');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _styledComponents = require('styled-components');
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
 
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
 
-var _reactOnclickout = require('react-onclickout');
+function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
 
-var _reactOnclickout2 = _interopRequireDefault(_reactOnclickout);
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+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); } }
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-var Select = exports.Select = function (_React$Component) {
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var Select =
+/*#__PURE__*/
+function (_React$Component) {
   _inherits(Select, _React$Component);
 
   function Select(props) {
+    var _this;
+
     _classCallCheck(this, Select);
 
-    var _this = _possibleConstructorReturn(this, (Select.__proto__ || Object.getPrototypeOf(Select)).call(this, props));
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Select).call(this, props));
 
-    _this.updateSelectBounds = function () {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "updateSelectBounds", function () {
       return _this.setState({
         selectBounds: _this.select.current.getBoundingClientRect()
       });
-    };
+    });
 
-    _this.dropDown = function () {
-      var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'toggle';
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "dropDown", function () {
+      var action = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "toggle";
 
       if (_this.props.forceOpen) {
-        return _this.setState({ dropdown: true });
+        return _this.setState({
+          dropdown: true
+        });
       }
 
-      if (action === 'close') {
-        return _this.setState({ dropdown: false, search: '' });
+      if (action === "close") {
+        return _this.setState({
+          dropdown: false,
+          search: ""
+        });
       }
 
-      if (action === 'open') {
-        return _this.setState({ dropdown: true });
+      if (action === "open") {
+        return _this.setState({
+          dropdown: true
+        });
       }
 
-      if (action === 'toggle') {
-        return _this.setState({ dropdown: !_this.state.dropdown });
+      if (action === "toggle") {
+        return _this.setState({
+          dropdown: !_this.state.dropdown
+        });
       }
 
       return false;
-    };
+    });
 
-    _this.addItem = function (item) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "addItem", function (item) {
       if (_this.props.multi) {
@@ -100,3 +109,3 @@ if (_this.state.values.indexOf(item) !== -1) {
           dropdown: false,
-          search: ''
+          search: ""
         });
@@ -106,5 +115,5 @@ }
       return true;
-    };
+    });
 
-    _this.removeItem = function (event, item) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "removeItem", function (event, item) {
       var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
@@ -115,3 +124,4 @@
         event.stopPropagation();
-        _this.dropDown('close');
+
+        _this.dropDown("close");
       }
@@ -124,11 +134,11 @@
       });
-    };
+    });
 
-    _this.setSearch = function (event) {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "setSearch", function (event) {
       return _this.setState({
         search: event.target.value
       });
-    };
+    });
 
-    _this.getInputSize = function () {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "getInputSize", function () {
       if (_this.state.search) {
@@ -143,16 +153,20 @@ return _this.state.search.length;
       return _this.props.placeholder.length;
-    };
+    });
 
-    _this.toggleSelectAll = function () {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "toggleSelectAll", function () {
       return _this.setState({
         values: _this.state.values.length === 0 ? _this.props.options : []
       });
-    };
+    });
 
-    _this.clearAll = function () {
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "clearAll", function () {
       return _this.setState({
         values: []
       });
-    };
+    });
 
+    _defineProperty(_assertThisInitialized(_assertThisInitialized(_this)), "isSelected", function (option) {
+      return _this.state.values.indexOf(option) !== -1;
+    });
+
     _this.state = {
@@ -162,6 +176,5 @@ dropdown: false,
       options: _this.props.options,
-      search: '',
+      search: "",
       selectBounds: {}
     };
-
     _this.methods = {
@@ -176,4 +189,3 @@ removeItem: _this.removeItem,
     };
-
-    _this.select = _react2.default.createRef();
+    _this.select = _react.default.createRef();
     return _this;
@@ -183,7 +195,8 @@ }
   _createClass(Select, [{
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
-      window.addEventListener('resize', this.updateSelectBounds);
+      window.addEventListener("resize", this.updateSelectBounds);
       this.props.onChange(this.state.values);
-      this.dropDown('close');
+      this.dropDown("close");
+
       if (this.select) {
@@ -194,3 +207,3 @@ this.updateSelectBounds();
   }, {
-    key: 'componentDidUpdate',
+    key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
@@ -211,126 +224,76 @@ if (prevState.values !== this.state.values) {
   }, {
-    key: 'componentWillUnmount',
+    key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      window.removeEventListener('resize', this.updateSelectBounds);
+      window.removeEventListener("resize", this.updateSelectBounds);
     }
   }, {
-    key: 'render',
+    key: "render",
     value: function render() {
       var _this2 = this;
 
-      var regexp = new RegExp(this.state.search, 'i');
+      var regexp = new RegExp(this.state.search, "i");
       var placeHolder = this.state.values.length > 0 && this.props.addPlaceholder || this.props.placeholder;
-
-      return _react2.default.createElement(
-        _reactOnclickout2.default,
-        { onClickOut: function onClickOut() {
-            return _this2.dropDown('close');
-          } },
-        _react2.default.createElement(
-          ReactDropdownSelect,
-          {
-            ref: this.select,
-            disabled: this.props.disabled,
-            className: this.props.className },
-          _react2.default.createElement(
-            Content,
-            {
-              className: 'react-dropdown-select-content ' + (this.props.multi ? 'react-dropdown-select-type-multi' : 'react-dropdown-select-type-single'),
-              onClick: function onClick() {
-                return _this2.dropDown('open');
-              } },
-            this.props.contentRenderer ? this.props.contentRenderer(this.props, this.state, this.methods) : _react2.default.createElement(
-              _react2.default.Fragment,
-              null,
-              this.props.multi && this.state.values.map(function (item) {
-                return _react2.default.createElement(
-                  Option,
-                  {
-                    disabled: _this2.props.disabled,
-                    className: 'react-dropdown-select-option' },
-                  item.label,
-                  ' ',
-                  _react2.default.createElement(
-                    'span',
-                    {
-                      className: 'react-dropdown-select-option-remove',
-                      onClick: function onClick(event) {
-                        return _this2.removeItem(event, item, true);
-                      } },
-                    '\xD7'
-                  )
-                );
-              }),
-              !this.props.multi && this.state.values.length > 0 && _react2.default.createElement(
-                'span',
-                null,
-                this.state.values[0].label
-              ),
-              _react2.default.createElement(Input, {
-                className: 'react-dropdown-select-input',
-                size: this.getInputSize,
-                value: this.state.search,
-                onClick: function onClick() {
-                  return _this2.dropDown('open');
-                },
-                onChange: this.setSearch,
-                placeholder: placeHolder })
-            )
-          ),
-          this.props.loading && _react2.default.createElement(Loading, { className: 'react-dropdown-select-loading' }),
-          this.props.clearable && _react2.default.createElement(
-            Clear,
-            { onClick: function onClick() {
-                return _this2.clearAll();
-              } },
-            '\xD7'
-          ),
-          this.props.separator && _react2.default.createElement(Separator, { className: 'react-dropdown-select-separator' }),
-          this.props.handle && _react2.default.createElement(
-            Handle,
-            { onClick: function onClick() {
-                return _this2.dropDown();
-              }, className: 'react-dropdown-select-handle' },
-            this.state.dropdown ? _react2.default.createElement(
-              _react2.default.Fragment,
-              null,
-              '\u203A'
-            ) : _react2.default.createElement(
-              _react2.default.Fragment,
-              null,
-              '\u2039'
-            )
-          ),
-          this.state.dropdown && _react2.default.createElement(
-            DropDown,
-            {
-              selectBounds: this.state.selectBounds,
-              className: 'react-dropdown-select-dropdown' },
-            this.props.dropdownRenderer ? this.props.dropdownRenderer(this.props, this.state, this.methods) : _react2.default.createElement(
-              _react2.default.Fragment,
-              null,
-              _react2.default.createElement(
-                Button,
-                { onClick: function onClick() {
-                    return _this2.toggleSelectAll();
-                  } },
-                this.state.values.length === 0 ? 'Select all' : 'Clear all'
-              ),
-              this.state.options.filter(function (item) {
-                return regexp.test(item[_this2.props.searchBy] || item.label);
-              }).map(function (option) {
-                return _react2.default.createElement(
-                  Item,
-                  {
-                    className: 'react-dropdown-select-item',
-                    onClick: function onClick() {
-                      return _this2.addItem(option);
-                    } },
-                  option.label
-                );
-              })
-            )
-          )
-        )
-      );
+      return _react.default.createElement(_reactOnclickout.default, {
+        onClickOut: function onClickOut() {
+          return _this2.dropDown("close");
+        }
+      }, _react.default.createElement(ReactDropdownSelect, {
+        ref: this.select,
+        disabled: this.props.disabled,
+        className: this.props.className
+      }, _react.default.createElement(Content, {
+        className: "react-dropdown-select-content ".concat(this.props.multi ? "react-dropdown-select-type-multi" : "react-dropdown-select-type-single"),
+        onClick: function onClick() {
+          return _this2.dropDown("open");
+        }
+      }, this.props.contentRenderer ? this.props.contentRenderer(this.props, this.state, this.methods) : _react.default.createElement(_react.default.Fragment, null, this.props.multi && this.state.values.map(function (item) {
+        return _react.default.createElement(Option, {
+          disabled: _this2.props.disabled,
+          className: "react-dropdown-select-option"
+        }, item.label, " ", _react.default.createElement("span", {
+          className: "react-dropdown-select-option-remove",
+          onClick: function onClick(event) {
+            return _this2.removeItem(event, item, true);
+          }
+        }, "\xD7"));
+      }), !this.props.multi && this.state.values.length > 0 && _react.default.createElement("span", null, this.state.values[0].label), _react.default.createElement(Input, {
+        tabIndex: "1",
+        className: "react-dropdown-select-input",
+        size: this.getInputSize,
+        value: this.state.search,
+        onClick: function onClick() {
+          return _this2.dropDown("open");
+        },
+        onChange: this.setSearch,
+        placeholder: placeHolder
+      }))), this.props.loading && _react.default.createElement(Loading, {
+        className: "react-dropdown-select-loading"
+      }), this.props.clearable && _react.default.createElement(Clear, {
+        tabIndex: "2",
+        onClick: function onClick() {
+          return _this2.clearAll();
+        }
+      }, "\xD7"), this.props.separator && _react.default.createElement(Separator, {
+        className: "react-dropdown-select-separator"
+      }), this.props.handle && _react.default.createElement(Handle, {
+        tabIndex: "3",
+        onClick: function onClick() {
+          return _this2.dropDown();
+        },
+        className: "react-dropdown-select-handle"
+      }, this.state.dropdown ? _react.default.createElement(_react.default.Fragment, null, "\u203A") : _react.default.createElement(_react.default.Fragment, null, "\u2039")), this.state.dropdown && _react.default.createElement(DropDown, {
+        tabIndex: "4",
+        selectBounds: this.state.selectBounds,
+        className: "react-dropdown-select-dropdown"
+      }, this.props.dropdownRenderer ? this.props.dropdownRenderer(this.props, this.state, this.methods) : _react.default.createElement(_react.default.Fragment, null, this.state.options.filter(function (item) {
+        return regexp.test(item[_this2.props.searchBy] || item.label);
+      }).map(function (option, index) {
+        return _react.default.createElement(Item, {
+          tabIndex: index + 4,
+          className: "react-dropdown-select-item ".concat(_this2.isSelected(option) ? "react-dropdown-select-item-selected" : ""),
+          onClick: function onClick() {
+            return _this2.addItem(option);
+          }
+        }, option.label);
+      })))));
     }
@@ -340,33 +303,34 @@ }]);
   return Select;
-}(_react2.default.Component);
+}(_react.default.Component);
 
-Select.propTypes = {
-  onChange: _propTypes2.default.func.isRequired,
-  onDropdownClose: _propTypes2.default.func.isRequired,
-  onDropdownOpen: _propTypes2.default.func.isRequired,
-  values: _propTypes2.default.array,
-  options: _propTypes2.default.array.isRequired,
-  forceOpen: _propTypes2.default.bool,
-  multi: _propTypes2.default.bool,
-  placeholder: _propTypes2.default.string,
-  addPlaceholder: _propTypes2.default.string,
-  disabled: _propTypes2.default.bool,
-  className: _propTypes2.default.string,
-  contentRenderer: _propTypes2.default.func,
-  dropdownRenderer: _propTypes2.default.func,
-  loading: _propTypes2.default.bool,
-  clearable: _propTypes2.default.bool,
-  separator: _propTypes2.default.bool,
-  handle: _propTypes2.default.bool,
-  searchBy: _propTypes2.default.string
-};
+exports.Select = Select;
 
+_defineProperty(Select, "propTypes", {
+  onChange: _propTypes.default.func.isRequired,
+  onDropdownClose: _propTypes.default.func.isRequired,
+  onDropdownOpen: _propTypes.default.func.isRequired,
+  values: _propTypes.default.array,
+  options: _propTypes.default.array.isRequired,
+  forceOpen: _propTypes.default.bool,
+  multi: _propTypes.default.bool,
+  placeholder: _propTypes.default.string,
+  addPlaceholder: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  contentRenderer: _propTypes.default.func,
+  dropdownRenderer: _propTypes.default.func,
+  loading: _propTypes.default.bool,
+  clearable: _propTypes.default.bool,
+  separator: _propTypes.default.bool,
+  handle: _propTypes.default.bool,
+  searchBy: _propTypes.default.string
+});
 
 Select.defaultProps = {
-  addPlaceholder: '+ add',
-  placeholder: 'Select...',
+  addPlaceholder: "+ add",
+  placeholder: "Select...",
   values: [],
   multi: false,
   disabled: false,
-  searchBy: 'label',
+  searchBy: "label",
   clearable: true,
@@ -376,20 +340,52 @@ forceOpen: undefined
 
-var ReactDropdownSelect = _styledComponents2.default.div(_templateObject, function (_ref) {
+var ReactDropdownSelect =
+/*#__PURE__*/
+_styledComponents.default.div.withConfig({
+  displayName: "ReactDropdownSelect"
+})(["display:flex;border:1px solid #ccc;width:100%;border-radius:2px;padding:2px 5px;flex-direction:row;align-items:center;min-height:36px;", ":focus-within{border-color:deepskyblue;}background:linear-gradient(#eee,#fff,#eee);"], function (_ref) {
   var disabled = _ref.disabled;
-  return disabled ? 'cursor: not-allowed;pointer-events: none;opacity: 0.3;' : 'pointer-events: all;';
+  return disabled ? "cursor: not-allowed;pointer-events: none;opacity: 0.3;" : "pointer-events: all;";
 });
 
-var Option = _styledComponents2.default.span(_templateObject2);
+var Option =
+/*#__PURE__*/
+_styledComponents.default.span.withConfig({
+  displayName: "Option"
+})(["padding:0 5px;border-radius:2px;line-height:21px;margin:3px 0 3px 5px;background:deepskyblue;color:#fff;white-space:nowrap;display:inline-block;.react-dropdown-select-option-remove{cursor:pointer;width:22px;height:22px;display:inline-block;text-align:center;margin:0 -5px 0 0px;border-radius:0 3px 3px 0;}:hover,:hover > span{background:#00c4ee;}"]);
 
-var Content = _styledComponents2.default.div(_templateObject3);
+var Content =
+/*#__PURE__*/
+_styledComponents.default.div.withConfig({
+  displayName: "Content"
+})(["flex:1;"]);
 
-var Input = _styledComponents2.default.input(_templateObject4);
+var Input =
+/*#__PURE__*/
+_styledComponents.default.input.withConfig({
+  displayName: "Input"
+})(["width:auto;border:none;margin-left:5px;background:transparent;:focus{outline:transparent;}font-size:smaller;"]);
 
-var Separator = _styledComponents2.default.div(_templateObject5);
+var Separator =
+/*#__PURE__*/
+_styledComponents.default.div.withConfig({
+  displayName: "Separator"
+})(["border-left:1px solid #ccc;width:1px;height:25px;display:block;"]);
 
-var Loading = _styledComponents2.default.div(_templateObject6);
+var Loading =
+/*#__PURE__*/
+_styledComponents.default.div.withConfig({
+  displayName: "Loading"
+})(["@keyframes dual-ring-spin{0%{transform:rotate(0deg);}100%{transform:rotate(180deg);}}padding:0 5px;display:block;width:auto;height:auto;:after{content:\" \";display:block;width:16px;height:16px;border-radius:50%;border:1px solid red;border-color:deepskyblue transparent;animation:dual-ring-spin 0.7s ease-in-out infinite;margin:0 0 0 -10px;}"]);
 
-var Handle = _styledComponents2.default.div(_templateObject7);
+var Handle =
+/*#__PURE__*/
+_styledComponents.default.div.withConfig({
+  displayName: "Handle"
+})(["width:20px;text-align:center;line-height:25px;transform:rotate(-90deg);cursor:pointer;font-size:26px;"]);
 
-var DropDown = _styledComponents2.default.div(_templateObject8, function (_ref2) {
+var DropDown =
+/*#__PURE__*/
+_styledComponents.default.div.withConfig({
+  displayName: "DropDown"
+})(["position:absolute;top:", "px;left:", "px;border:1px solid #ccc;width:", "px;padding:0;display:flex;flex-direction:column;background:#fff;border-radius:2px;box-shadow:0 0 10px 0 #0000003b;max-height:300px;overflow:auto;}"], function (_ref2) {
   var selectBounds = _ref2.selectBounds;
@@ -405,8 +401,21 @@ return selectBounds.bottom + 5;
 
-var Item = _styledComponents2.default.span(_templateObject9);
+var Item =
+/*#__PURE__*/
+_styledComponents.default.span.withConfig({
+  displayName: "Item"
+})(["padding:10px;cursor:pointer;:hover{background:#f2f2f2;}&.react-dropdown-select-item-selected{background:deepskyblue;color:#fff;border-bottom:1px solid #fff;}input{&[type=\"checkbox\"]{vertical-align:baseline;margin:0 10px 0 0;}}"]);
 
-var Button = _styledComponents2.default.button(_templateObject10);
+var Button =
+/*#__PURE__*/
+_styledComponents.default.button.withConfig({
+  displayName: "Button"
+})(["margin:10px;"]);
 
-var Clear = _styledComponents2.default.div(_templateObject11);
+var Clear =
+/*#__PURE__*/
+_styledComponents.default.div.withConfig({
+  displayName: "Clear"
+})(["line-height:25px;margin:0 10px;cursor:pointer;"]);
 
-exports.default = Select;
+var _default = Select;
+exports.default = _default;

package.json

 {
   "name": "react-dropdown-select",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Customizable dropdown select for react",
@@ -32,19 +32,36 @@ "main": "dist/index.js",
   "devDependencies": {
-    "babel-cli": "^6.26.0",
-    "babel-core": "^6.26.3",
-    "babel-loader": "^7.1.4",
-    "babel-plugin-transform-object-rest-spread": "^6.26.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-0": "^6.24.1",
-    "css-loader": "^1.0.0",
-    "gh-pages": "^1.2.0",
+    "@babel/cli": "^7.0.0",
+    "@babel/core": "^7.0.0",
+    "@babel/plugin-proposal-class-properties": "^7.0.0",
+    "@babel/plugin-proposal-decorators": "^7.0.0",
+    "@babel/plugin-proposal-do-expressions": "^7.0.0",
+    "@babel/plugin-proposal-export-default-from": "^7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "^7.0.0",
+    "@babel/plugin-proposal-function-bind": "^7.0.0",
+    "@babel/plugin-proposal-function-sent": "^7.0.0",
+    "@babel/plugin-proposal-json-strings": "^7.0.0",
+    "@babel/plugin-proposal-logical-assignment-operators": "^7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0",
+    "@babel/plugin-proposal-numeric-separator": "^7.0.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-proposal-optional-chaining": "^7.0.0",
+    "@babel/plugin-proposal-pipeline-operator": "^7.0.0",
+    "@babel/plugin-proposal-throw-expressions": "^7.0.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.0.0",
+    "@babel/plugin-syntax-import-meta": "^7.0.0",
+    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.4",
+    "babel-plugin-styled-components": "^1.10.0",
+    "babel-plugin-transform-dynamic-import": "^2.1.0",
+    "css-loader": "^2.0.2",
+    "gh-pages": "^2.0.1",
     "html-webpack-plugin": "^3.2.0",
     "prop-types": "^15.6.2",
-    "react": "^16.3.2",
-    "react-dom": "^16.3.2",
-    "style-loader": "^0.23.0",
-    "webpack": "^4.17.2",
-    "webpack-cli": "^3.1.0",
-    "webpack-dev-server": "^3.1.7"
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0",
+    "style-loader": "^0.23.1",
+    "webpack": "^4.28.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.14"
   },
@@ -51,0 +68,0 @@ "dependencies": {

README.md

@@ -43,4 +43,5 @@ # react-dropdown-select
 
-> https://codesandbox.io/s/p54p8y1987
+[![Edit react-dropdown-select](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/p54p8y1987?autoresize=1)
 
+### Preview
 > https://sanusart.github.io/react-dropdown-select

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37153

increased by1.63%

Number of lines in readme file

47

increased by2.17%

Worsened metrics

Dev dependency count

34

increased by100%

Lines of code

352

decreased by-1.4%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes