react-select-search - npm Package Compare versions

Comparing version 1.1.1 to 1.1.2

dist/cjs/Components/Option.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+exports.__esModule = true;
+exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _extends() { _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; }; return _extends.apply(this, arguments); }
@@ -22,32 +24,32 @@
 
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-const Option = (_ref) => {
-  let {
-    optionProps,
-    highlighted,
-    selected,
-    className,
-    renderOption
-  } = _ref,
-      option = _objectWithoutProperties(_ref, ["optionProps", "highlighted", "selected", "className", "renderOption"]);
+var Option = function Option(_ref) {
+  var optionProps = _ref.optionProps,
+      highlighted = _ref.highlighted,
+      selected = _ref.selected,
+      className = _ref.className,
+      renderOption = _ref.renderOption,
+      option = _objectWithoutPropertiesLoose(_ref, ["optionProps", "highlighted", "selected", "className", "renderOption"]);
 
-  const optionClass = [className('option'), selected ? className('is-selected') : false, highlighted ? className('is-highlighted') : false].filter(cls => !!cls).join(' ');
+  var optionClass = [className('option'), selected ? className('is-selected') : false, highlighted ? className('is-highlighted') : false].filter(function (cls) {
+    return !!cls;
+  }).join(' ');
+  var comp = (0, _react.useMemo)(function () {
+    var domProps = _objectSpread({}, optionProps, {
+      value: option.value,
+      disabled: option.disabled
+    });
 
-  const domProps = _objectSpread({}, optionProps, {
-    value: option.value,
-    disabled: option.disabled
-  });
-
-  const comp = renderOption ? renderOption(domProps, option, {
-    selected,
-    highlighted
-  }, optionClass) : /*#__PURE__*/_react.default.createElement("button", _extends({
-    className: optionClass
-  }, domProps), option.name);
-  return /*#__PURE__*/_react.default.createElement("li", {
+    return renderOption ? renderOption(domProps, option, {
+      selected: selected,
+      highlighted: highlighted
+    }, optionClass) : /*#__PURE__*/_react["default"].createElement("button", _extends({
+      className: optionClass
+    }, domProps), option.name);
+  }, [renderOption, option, selected, highlighted, optionClass]);
+  return /*#__PURE__*/_react["default"].createElement("li", {
     className: className('row'),
     role: "menuitem",
+    "data-index": option.index,
     "data-value": option.value,
@@ -66,17 +68,19 @@ key: option.value
 Option.propTypes = {
-  name: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string,
-  type: _propTypes.default.string,
-  disabled: _propTypes.default.bool,
-  index: _propTypes.default.number,
-  highlighted: _propTypes.default.bool.isRequired,
-  selected: _propTypes.default.bool.isRequired,
-  optionProps: _propTypes.default.shape({
-    tabIndex: _propTypes.default.string.isRequired,
-    onMouseDown: _propTypes.default.func.isRequired
+  name: _propTypes["default"].string.isRequired,
+  value: _propTypes["default"].string,
+  type: _propTypes["default"].string,
+  disabled: _propTypes["default"].bool,
+  index: _propTypes["default"].number,
+  highlighted: _propTypes["default"].bool.isRequired,
+  selected: _propTypes["default"].bool.isRequired,
+  optionProps: _propTypes["default"].shape({
+    tabIndex: _propTypes["default"].string.isRequired,
+    onMouseDown: _propTypes["default"].func.isRequired
   }).isRequired,
-  className: _propTypes.default.func.isRequired,
-  renderOption: _propTypes.default.func
+  className: _propTypes["default"].func.isRequired,
+  renderOption: _propTypes["default"].func
 };
-var _default = Option;
-exports.default = _default;
+
+var _default = (0, _react.memo)(Option);
+
+exports["default"] = _default;

dist/cjs/Components/Options.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+exports.__esModule = true;
+exports["default"] = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
@@ -18,64 +16,73 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _extends() { _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; }; return _extends.apply(this, arguments); }
 
-const Options = ({
-  options,
-  optionProps,
-  snapshot,
-  className,
-  renderGroupHeader,
-  renderOption
-}) => /*#__PURE__*/_react.default.createElement("ul", {
-  className: className('options')
-}, options.map(option => {
-  if (option.type === 'group') {
-    return /*#__PURE__*/_react.default.createElement("li", {
-      role: "none",
-      className: className('row'),
-      key: option.groupId
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: className('group')
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: className('group-header')
-    }, renderGroupHeader(option.name)), /*#__PURE__*/_react.default.createElement(Options, {
-      options: option.items,
-      snapshot: snapshot,
+var Options = function Options(_ref) {
+  var options = _ref.options,
+      optionProps = _ref.optionProps,
+      snapshot = _ref.snapshot,
+      className = _ref.className,
+      renderGroupHeader = _ref.renderGroupHeader,
+      renderOption = _ref.renderOption;
+  return /*#__PURE__*/_react["default"].createElement("ul", {
+    className: className('options')
+  }, options.map(function (option) {
+    if (option.type === 'group') {
+      return /*#__PURE__*/_react["default"].createElement("li", {
+        role: "none",
+        className: className('row'),
+        key: option.groupId
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: className('group')
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: className('group-header')
+      }, renderGroupHeader(option.name)), /*#__PURE__*/_react["default"].createElement(Options, {
+        options: option.items,
+        snapshot: snapshot,
+        optionProps: optionProps,
+        className: className,
+        renderOption: renderOption
+      })));
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_Option["default"], _extends({
+      key: option.value,
+      className: className,
       optionProps: optionProps,
-      className: className,
+      selected: (0, _isSelected["default"])(option, snapshot.value),
+      highlighted: snapshot.highlighted === option.index,
       renderOption: renderOption
-    })));
-  }
+    }, option));
+  }));
+};
 
-  return /*#__PURE__*/_react.default.createElement(_Option.default, _extends({
-    key: option.value,
-    className: className,
-    optionProps: optionProps,
-    selected: (0, _isSelected.default)(option, snapshot.value),
-    highlighted: snapshot.highlighted === option.index,
-    renderOption: renderOption
-  }, option));
-}));
-
 Options.defaultProps = {
   renderOption: null,
-  renderGroupHeader: name => name
+  renderGroupHeader: function renderGroupHeader(name) {
+    return name;
+  }
 };
 Options.propTypes = {
-  options: _propTypes.default.arrayOf(_types.optionType).isRequired,
-  snapshot: _propTypes.default.shape({
+  options: _propTypes["default"].arrayOf(_types.optionType).isRequired,
+  snapshot: _propTypes["default"].shape({
     value: _types.valueType,
-    highlighted: _propTypes.default.number,
-    focus: _propTypes.default.bool
+    highlighted: _propTypes["default"].number,
+    focus: _propTypes["default"].bool
   }).isRequired,
-  optionProps: _propTypes.default.shape({
-    tabIndex: _propTypes.default.string.isRequired,
-    onMouseDown: _propTypes.default.func.isRequired
+  optionProps: _propTypes["default"].shape({
+    tabIndex: _propTypes["default"].string.isRequired,
+    onMouseDown: _propTypes["default"].func.isRequired
   }).isRequired,
-  className: _propTypes.default.func.isRequired,
-  renderOption: _propTypes.default.func,
-  renderGroupHeader: _propTypes.default.func
+  className: _propTypes["default"].func.isRequired,
+  renderOption: _propTypes["default"].func,
+  renderGroupHeader: _propTypes["default"].func
 };
-var _default = Options;
-exports.default = _default;
+
+var _default = (0, _react.memo)(Options);
+
+exports["default"] = _default;

dist/cjs/Components/Value.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+exports.__esModule = true;
+exports["default"] = void 0;
 
@@ -12,33 +10,34 @@ var _react = _interopRequireWildcard(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _extends() { _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; }; return _extends.apply(this, arguments); }
 
-const Value = ({
-  search,
-  disabled,
-  valueProps,
-  className,
-  displayValue,
-  placeholder,
-  autoFocus
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  className: className('value')
-}, search && /*#__PURE__*/_react.default.createElement("input", _extends({}, valueProps, {
-  value: displayValue,
-  autoFocus: autoFocus,
-  placeholder: placeholder,
-  disabled: disabled,
-  className: className('input')
-})), !search && /*#__PURE__*/_react.default.createElement("input", _extends({}, valueProps, {
-  disabled: disabled,
-  className: className('input'),
-  autoFocus: autoFocus,
-  value: displayValue,
-  placeholder: placeholder
-})));
+var Value = function Value(_ref) {
+  var search = _ref.search,
+      disabled = _ref.disabled,
+      valueProps = _ref.valueProps,
+      className = _ref.className,
+      displayValue = _ref.displayValue,
+      placeholder = _ref.placeholder,
+      autoFocus = _ref.autoFocus;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: className('value')
+  }, search && /*#__PURE__*/_react["default"].createElement("input", _extends({}, valueProps, {
+    value: displayValue,
+    autoFocus: autoFocus,
+    placeholder: placeholder,
+    disabled: disabled,
+    className: className('input')
+  })), !search && /*#__PURE__*/_react["default"].createElement("input", _extends({}, valueProps, {
+    disabled: disabled,
+    className: className('input'),
+    autoFocus: autoFocus,
+    value: displayValue,
+    placeholder: placeholder
+  })));
+};
 
@@ -53,15 +52,15 @@ Value.defaultProps = {
 Value.propTypes = {
-  className: _propTypes.default.func.isRequired,
-  displayValue: _propTypes.default.string.isRequired,
-  valueProps: _propTypes.default.shape({
-    onBlur: _propTypes.default.func.isRequired,
-    onFocus: _propTypes.default.func.isRequired,
-    tabIndex: _propTypes.default.string,
-    onChange: _propTypes.default.func
+  className: _propTypes["default"].func.isRequired,
+  displayValue: _propTypes["default"].string.isRequired,
+  valueProps: _propTypes["default"].shape({
+    onBlur: _propTypes["default"].func.isRequired,
+    onFocus: _propTypes["default"].func.isRequired,
+    tabIndex: _propTypes["default"].string,
+    onChange: _propTypes["default"].func
   }).isRequired,
-  disabled: _propTypes.default.bool,
-  search: _propTypes.default.bool,
-  autoComplete: _propTypes.default.string,
-  placeholder: _propTypes.default.string,
-  autoFocus: _propTypes.default.bool
+  disabled: _propTypes["default"].bool,
+  search: _propTypes["default"].bool,
+  autoComplete: _propTypes["default"].string,
+  placeholder: _propTypes["default"].string,
+  autoFocus: _propTypes["default"].bool
 };
@@ -71,2 +70,2 @@
 
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/highlightReducer.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = highlightReducer;
+exports.__esModule = true;
+exports["default"] = highlightReducer;
 
@@ -13,6 +11,4 @@ function highlightReducer(highlighted, value) {
 
-  const {
-    key,
-    options
-  } = value;
+  var key = value.key,
+      options = value.options;
 
@@ -27,3 +23,3 @@ if (!options) {
 
-  let newHighlighted = -1;
+  var newHighlighted = -1;
 
@@ -40,8 +36,8 @@ if (key === 'ArrowDown' && highlighted < options.length - 1) {
 
-  const option = options[newHighlighted];
+  var option = options[newHighlighted];
 
   if (option && option.disabled) {
     return highlightReducer(newHighlighted, {
-      key,
-      options
+      key: key,
+      options: options
     });
@@ -48,0 +44,0 @@ }

dist/cjs/index.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "useSelect", {
-  enumerable: true,
-  get: function () {
-    return _useSelect.default;
-  }
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _SelectSearch.default;
-  }
-});
+exports.__esModule = true;
+exports["default"] = exports.useSelect = void 0;
 
 var _useSelect = _interopRequireDefault(require("./useSelect"));
 
+exports.useSelect = _useSelect["default"];
+
 var _SelectSearch = _interopRequireDefault(require("./SelectSearch"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+exports["default"] = _SelectSearch["default"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

dist/cjs/lib/flattenOptions.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = flattenOptions;
+exports.__esModule = true;
+exports["default"] = flattenOptions;
 
 var _getGroupId = _interopRequireDefault(require("./getGroupId"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -17,8 +15,8 @@ function flattenOptions(options) {
 
-  const nextOptions = [];
-  options.forEach((option, index) => {
+  var nextOptions = [];
+  options.forEach(function (option, index) {
     if ('type' in option && option.type === 'group') {
-      const id = (0, _getGroupId.default)(option);
-      option.items.forEach(groupOption => {
-        const nextGroupOption = Object.assign({}, groupOption);
+      var id = (0, _getGroupId["default"])(option);
+      option.items.forEach(function (groupOption) {
+        var nextGroupOption = Object.assign({}, groupOption);
         nextGroupOption.groupId = id;
@@ -30,3 +28,3 @@ nextGroupOption.groupName = option.name;
       nextOptions.push(Object.assign({}, option, {
-        index
+        index: index
       }));
@@ -33,0 +31,0 @@ }

dist/cjs/lib/getDisplayValue.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getDisplayValue;
+exports.__esModule = true;
+exports["default"] = getDisplayValue;
 
@@ -11,3 +9,5 @@ function getDisplayValue(value) {
     if (Array.isArray(value)) {
-      return value.map(singleOption => singleOption.name).join(', ');
+      return value.map(function (singleOption) {
+        return singleOption.name;
+      }).join(', ');
     }
@@ -14,0 +14,0 @@

dist/cjs/lib/getGroupId.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getGroupId;
+exports.__esModule = true;
+exports["default"] = getGroupId;
 
 function getGroupId(group) {
-  return `${group.name}-${Math.random().toString(36).substr(2, 9)}`;
+  return group.name + "-" + Math.random().toString(36).substr(2, 9);
 }

dist/cjs/lib/getNewValue.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getNewValue;
+exports.__esModule = true;
+exports["default"] = getNewValue;
 
 function getNewValue(value, oldValue, multiple) {
-  let newValue = null;
+  var newValue = null;
 
@@ -17,6 +15,8 @@ if (multiple) {
     } else {
-      newValue = [...oldValue];
+      newValue = [].concat(oldValue);
     }
 
-    const valueIndex = newValue.findIndex(val => val.value === value.value);
+    var valueIndex = newValue.findIndex(function (val) {
+      return val.value === value.value;
+    });
 
@@ -23,0 +23,0 @@ if (valueIndex >= 0) {

dist/cjs/lib/getOption.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = getOption;
+exports.__esModule = true;
+exports["default"] = getOption;
 
-function findOption(value, options) {
-  const matches = options.filter(option => option.value === value);
-
-  if (matches.length) {
-    return matches[0];
-  }
-
-  return null;
-}
-
 function getOption(value, defaultOptions) {
   if (value) {
     if (Array.isArray(value)) {
-      return value.map(singleValue => findOption(singleValue, defaultOptions));
+      return value.map(function (singleValue) {
+        return defaultOptions.find(function (option) {
+          return option.value === singleValue;
+        });
+      });
     }
 
-    return findOption(value, defaultOptions);
+    return defaultOptions.find(function (option) {
+      return option.value === value;
+    }) || null;
   }
@@ -26,0 +20,0 @@

dist/cjs/lib/groupOptions.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = groupOptions;
+exports.__esModule = true;
+exports["default"] = groupOptions;
 
-var _findGroupIndex = _interopRequireDefault(require("./findGroupIndex"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function groupOptions(options) {
-  const nextOptions = [];
-  options.forEach((option, i) => {
+  var nextOptions = [];
+  options.forEach(function (option, i) {
     if ('groupId' in option) {
-      const nextOption = Object.assign({}, option);
-      const groupIndex = (0, _findGroupIndex.default)(nextOptions, nextOption.groupId);
+      var nextOption = Object.assign({}, option);
+      var groupIndex = nextOptions.findIndex(function (el) {
+        return 'groupId' in el && el.groupId === nextOption.groupId;
+      });
       nextOption.index = i;
@@ -19,0 +15,0 @@

dist/cjs/lib/isSelected.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = isSelected;
+exports.__esModule = true;
+exports["default"] = isSelected;
 
@@ -13,3 +11,5 @@ function isSelected(itemValue, selectedValue) {
 
-  return Array.isArray(selectedValue) ? selectedValue.findIndex(item => item.value === itemValue.value) >= 0 : selectedValue.value === itemValue.value;
+  return Array.isArray(selectedValue) ? selectedValue.findIndex(function (item) {
+    return item.value === itemValue.value;
+  }) >= 0 : selectedValue.value === itemValue.value;
 }

dist/cjs/search.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = search;
-let Fuse = null;
+exports.__esModule = true;
+exports["default"] = search;
+var Fuse = null;
 
@@ -21,6 +19,8 @@ try {
 function fuzzySearch(value, options, fuseOptions) {
-  const fuse = new Fuse(options, fuseOptions);
-  return fuse.search(value).map((item, index) => Object.assign({}, item, {
-    index
-  }));
+  var fuse = new Fuse(options, fuseOptions);
+  return fuse.search(value).map(function (item, index) {
+    return Object.assign({}, item, {
+      index: index
+    });
+  });
 }
@@ -27,0 +27,0 @@

dist/cjs/SelectSearch.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
+exports.__esModule = true;
+exports["default"] = void 0;
 
@@ -12,3 +10,3 @@ var _react = _interopRequireWildcard(require("react"));
 
-var _useSelect = _interopRequireDefault(require("./useSelect"));
+var _useSelect2 = _interopRequireDefault(require("./useSelect"));
 
@@ -21,7 +19,7 @@ var _Value = _interopRequireDefault(require("./Components/Value"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
 
@@ -34,34 +32,38 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-const SelectSearch = (0, _react.forwardRef)(({
-  value: defaultValue,
-  disabled,
-  placeholder,
-  multiple,
-  search,
-  autoFocus,
-  autoComplete,
-  options: defaultOptions,
-  onChange,
-  className,
-  renderValue,
-  renderOption,
-  renderGroupHeader,
-  getOptions,
-  fuse
-}, ref) => {
-  const selectRef = (0, _react.createRef)();
-  const [snapshot, valueProps, optionProps] = (0, _useSelect.default)({
+var SelectSearch = (0, _react.forwardRef)(function (_ref, ref) {
+  var defaultValue = _ref.value,
+      disabled = _ref.disabled,
+      placeholder = _ref.placeholder,
+      multiple = _ref.multiple,
+      search = _ref.search,
+      autoFocus = _ref.autoFocus,
+      autoComplete = _ref.autoComplete,
+      defaultOptions = _ref.options,
+      onChange = _ref.onChange,
+      className = _ref.className,
+      renderValue = _ref.renderValue,
+      renderOption = _ref.renderOption,
+      renderGroupHeader = _ref.renderGroupHeader,
+      getOptions = _ref.getOptions,
+      fuse = _ref.fuse;
+  var selectRef = (0, _react.createRef)();
+
+  var _useSelect = (0, _useSelect2["default"])({
     options: defaultOptions,
     value: defaultValue,
-    multiple,
-    disabled,
-    fuse,
-    search,
-    onChange,
-    getOptions,
+    multiple: multiple,
+    disabled: disabled,
+    fuse: fuse,
+    search: search,
+    onChange: onChange,
+    getOptions: getOptions,
     allowEmpty: !!placeholder
-  });
-  const classNameFn = (0, _react.useMemo)(() => typeof className === 'string' ? key => {
-    if (key === 'container') {
-      return 'select-search';
+  }),
+      snapshot = _useSelect[0],
+      valueProps = _useSelect[1],
+      optionProps = _useSelect[2];
+
+  var classNameFn = typeof className === 'string' ? function (key) {
+    if (key.indexOf('container') === 0) {
+      return key.replace('container', 'select-search');
     }
@@ -73,36 +75,24 @@
 
-    return `select-search__${key}`;
-  } : className, [className]);
-  let wrapperClass = classNameFn('container');
+    return "select-search__" + key;
+  } : className;
+  var wrapperClass = [classNameFn('container'), multiple ? classNameFn('container--multiple') : false, search ? classNameFn('container--search') : false, snapshot.searching ? classNameFn('is-searching') : false].filter(function (cls) {
+    return !!cls;
+  }).join(' ');
+  var value = (snapshot.focus || multiple) && search ? snapshot.search : snapshot.displayValue;
+  (0, _react.useEffect)(function () {
+    var selected = null;
 
-  if (multiple) {
-    wrapperClass += ` ${wrapperClass}--multiple`;
-  }
+    if (snapshot.focus && selectRef.current && snapshot.highlighted > -1) {
+      selected = selectRef.current.querySelector("[data-index=\"" + snapshot.highlighted + "\"]");
+    } else if (snapshot.focus && selectRef.current && snapshot.value) {
+      selected = selectRef.current.querySelector("[data-value=\"" + snapshot.value.value + "\"]");
+    }
 
-  if (search) {
-    wrapperClass += ` ${wrapperClass}--search`;
-  }
-
-  if (snapshot.searching) {
-    wrapperClass += ` ${classNameFn('is-searching')}`;
-  }
-
-  let value = snapshot.displayValue;
-
-  if ((snapshot.focus || multiple) && search) {
-    value = snapshot.search;
-  }
-
-  (0, _react.useEffect)(() => {
-    if (snapshot.focus && selectRef.current && snapshot.value) {
-      const selected = selectRef.current.querySelector(`[data-value="${snapshot.value.value}"]`);
-
-      if (selected) {
-        const rect = selectRef.current.getBoundingClientRect();
-        const selectedRect = selected.getBoundingClientRect();
-        selectRef.current.scrollTop = selected.offsetTop - rect.height / 2 + selectedRect.height / 2;
-      }
+    if (selected) {
+      var rect = selectRef.current.getBoundingClientRect();
+      var selectedRect = selected.getBoundingClientRect();
+      selectRef.current.scrollTop = selected.offsetTop - rect.height / 2 + selectedRect.height / 2;
     }
-  }, [snapshot.focus, selectRef.current, snapshot.value]);
-  const valueComp = renderValue ? /*#__PURE__*/_react.default.createElement("div", {
+  }, [snapshot.focus, selectRef.current, snapshot.value, snapshot.highlighted]);
+  var valueComp = renderValue ? /*#__PURE__*/_react["default"].createElement("div", {
     className: classNameFn('value')
@@ -114,3 +104,3 @@ }, renderValue(_objectSpread({}, valueProps, {
     value: search ? value : null
-  }), snapshot, classNameFn('input'))) : /*#__PURE__*/_react.default.createElement(_Value.default, {
+  }), snapshot, classNameFn('input'))) : /*#__PURE__*/_react["default"].createElement(_Value["default"], {
     snapshot: snapshot,
@@ -128,9 +118,9 @@ disabled: disabled,
   });
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/_react["default"].createElement("div", {
     ref: ref,
     className: wrapperClass
-  }, (!multiple || search) && valueComp, !disabled && (snapshot.focus || multiple) && /*#__PURE__*/_react.default.createElement("div", {
+  }, (!multiple || search) && valueComp, !disabled && (snapshot.focus || multiple) && /*#__PURE__*/_react["default"].createElement("div", {
     className: classNameFn('select'),
     ref: selectRef
-  }, /*#__PURE__*/_react.default.createElement(_Options.default, {
+  }, /*#__PURE__*/_react["default"].createElement(_Options["default"], {
     options: snapshot.options,
@@ -153,5 +143,7 @@ snapshot: snapshot,
   value: '',
-  onChange: () => {},
+  onChange: function onChange() {},
   renderOption: null,
-  renderGroupHeader: name => name,
+  renderGroupHeader: function renderGroupHeader(name) {
+    return name;
+  },
   renderValue: null,
@@ -165,19 +157,19 @@ fuse: {
 SelectSearch.propTypes = {
-  options: _propTypes.default.arrayOf(_types.optionType).isRequired,
-  getOptions: _propTypes.default.func,
-  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.string)]),
-  className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-  multiple: _propTypes.default.bool,
-  search: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  placeholder: _propTypes.default.string,
-  autoComplete: _propTypes.default.oneOf(['on', 'off']),
-  autoFocus: _propTypes.default.bool,
-  onChange: _propTypes.default.func,
-  renderOption: _propTypes.default.func,
-  renderGroupHeader: _propTypes.default.func,
-  renderValue: _propTypes.default.func,
-  fuse: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.shape({
-    keys: _propTypes.default.arrayOf(_propTypes.default.string),
-    threshold: _propTypes.default.number
+  options: _propTypes["default"].arrayOf(_types.optionType).isRequired,
+  getOptions: _propTypes["default"].func,
+  value: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].arrayOf(_propTypes["default"].string)]),
+  className: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]),
+  multiple: _propTypes["default"].bool,
+  search: _propTypes["default"].bool,
+  disabled: _propTypes["default"].bool,
+  placeholder: _propTypes["default"].string,
+  autoComplete: _propTypes["default"].oneOf(['on', 'off']),
+  autoFocus: _propTypes["default"].bool,
+  onChange: _propTypes["default"].func,
+  renderOption: _propTypes["default"].func,
+  renderGroupHeader: _propTypes["default"].func,
+  renderValue: _propTypes["default"].func,
+  fuse: _propTypes["default"].oneOfType([_propTypes["default"].bool, _propTypes["default"].shape({
+    keys: _propTypes["default"].arrayOf(_propTypes["default"].string),
+    threshold: _propTypes["default"].number
   })])
@@ -188,2 +180,2 @@ };
 
-exports.default = _default;
+exports["default"] = _default;

dist/cjs/types.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.classNameType = exports.valueType = exports.optionType = void 0;
@@ -10,13 +8,13 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-const option = _propTypes.default.shape({
-  name: _propTypes.default.string.isRequired,
-  value: _propTypes.default.string.isRequired
+var option = _propTypes["default"].shape({
+  name: _propTypes["default"].string.isRequired,
+  value: _propTypes["default"].string.isRequired
 });
 
-const optionType = _propTypes.default.oneOfType([option, _propTypes.default.shape({
-  name: _propTypes.default.string.isRequired,
-  type: _propTypes.default.string.isRequired,
-  items: _propTypes.default.arrayOf(option)
+var optionType = _propTypes["default"].oneOfType([option, _propTypes["default"].shape({
+  name: _propTypes["default"].string.isRequired,
+  type: _propTypes["default"].string.isRequired,
+  items: _propTypes["default"].arrayOf(option)
 })]);
@@ -26,8 +24,8 @@
 
-const valueType = _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.arrayOf(_propTypes.default.object)]);
+var valueType = _propTypes["default"].oneOfType([_propTypes["default"].object, _propTypes["default"].arrayOf(_propTypes["default"].object)]);
 
 exports.valueType = valueType;
 
-const classNameType = _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]);
+var classNameType = _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].func]);
 
 exports.classNameType = classNameType;

dist/cjs/useSelect.js

 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = useSelectSearch;
+exports.__esModule = true;
+exports["default"] = useSelectSearch;
 
@@ -24,27 +22,58 @@ var _react = require("react");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function useSelectSearch({
-  value: defaultValue = null,
-  disabled = false,
-  multiple = false,
-  search: canSearch = false,
-  fuse = false,
-  options: defaultOptions,
-  onChange = () => {},
-  getOptions = null,
-  allowEmpty = true
-}) {
-  const ref = (0, _react.useRef)(null);
-  const [flatDefaultOptions, setFlatDefaultOptions] = (0, _react.useState)((0, _flattenOptions.default)(defaultOptions));
-  const [flat, setOptions] = (0, _react.useState)([]);
-  const [value, setValue] = (0, _react.useState)((0, _getOption.default)(defaultValue, flatDefaultOptions));
-  const [search, setSearch] = (0, _react.useState)('');
-  const [focus, setFocus] = (0, _react.useState)(false);
-  const [searching, setSearching] = (0, _react.useState)(false);
-  const [highlighted, setHighlighted] = (0, _react.useReducer)(_highlightReducer.default, -1);
-  const options = (0, _react.useMemo)(() => (0, _groupOptions.default)(flat), [flat]);
-  const displayValue = (0, _getDisplayValue.default)(value);
+function useSelectSearch(_ref) {
+  var _ref$value = _ref.value,
+      defaultValue = _ref$value === void 0 ? null : _ref$value,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+      _ref$search = _ref.search,
+      canSearch = _ref$search === void 0 ? false : _ref$search,
+      _ref$fuse = _ref.fuse,
+      fuse = _ref$fuse === void 0 ? false : _ref$fuse,
+      defaultOptions = _ref.options,
+      _ref$onChange = _ref.onChange,
+      onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+      _ref$getOptions = _ref.getOptions,
+      getOptions = _ref$getOptions === void 0 ? null : _ref$getOptions,
+      _ref$allowEmpty = _ref.allowEmpty,
+      allowEmpty = _ref$allowEmpty === void 0 ? true : _ref$allowEmpty;
+  var ref = (0, _react.useRef)(null);
 
-  const onBlur = () => {
+  var _useState = (0, _react.useState)((0, _flattenOptions["default"])(defaultOptions)),
+      flatDefaultOptions = _useState[0],
+      setFlatDefaultOptions = _useState[1];
+
+  var _useState2 = (0, _react.useState)([]),
+      flat = _useState2[0],
+      setOptions = _useState2[1];
+
+  var _useState3 = (0, _react.useState)((0, _getOption["default"])(defaultValue, flatDefaultOptions)),
+      value = _useState3[0],
+      setValue = _useState3[1];
+
+  var _useState4 = (0, _react.useState)(''),
+      search = _useState4[0],
+      setSearch = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      focus = _useState5[0],
+      setFocus = _useState5[1];
+
+  var _useState6 = (0, _react.useState)(false),
+      searching = _useState6[0],
+      setSearching = _useState6[1];
+
+  var _useReducer = (0, _react.useReducer)(_highlightReducer["default"], -1),
+      highlighted = _useReducer[0],
+      setHighlighted = _useReducer[1];
+
+  var options = (0, _react.useMemo)(function () {
+    return (0, _groupOptions["default"])(flat);
+  }, [flat]);
+  var displayValue = (0, _getDisplayValue["default"])(value);
+
+  var onBlur = function onBlur() {
     setFocus(false);
@@ -63,11 +92,15 @@ setHighlighted(false);
 
-  const onFocus = () => setFocus(true);
+  var onFocus = function onFocus() {
+    return setFocus(true);
+  };
 
-  const onSelect = val => {
-    const option = (0, _getOption.default)(val, flat);
-    const newValue = (0, _getNewValue.default)(option, value, multiple);
+  var onSelect = function onSelect(val) {
+    var option = (0, _getOption["default"])(val, flat);
+    var newValue = (0, _getNewValue["default"])(option, value, multiple);
     setValue(newValue);
 
     if (multiple) {
-      onChange(newValue.map(i => i.value), newValue);
+      onChange(newValue.map(function (i) {
+        return i.value;
+      }), newValue);
     } else {
@@ -78,14 +111,18 @@ onChange(option.value, option);
 
-  const onMouseDown = e => onSelect(e.currentTarget.value);
+  var onMouseDown = function onMouseDown(e) {
+    return onSelect(e.currentTarget.value);
+  };
 
-  const onKeyDown = e => setHighlighted({
-    key: e.key,
-    options: flat
-  });
+  var onKeyDown = function onKeyDown(e) {
+    return setHighlighted({
+      key: e.key,
+      options: flat
+    });
+  };
 
-  const onKeyPress = ({
-    key
-  }) => {
+  var onKeyPress = function onKeyPress(_ref2) {
+    var key = _ref2.key;
+
     if (key === 'Enter') {
-      const option = flat[highlighted];
+      var option = flat[highlighted];
 
@@ -102,5 +139,5 @@ if (option) {
 
-  const onKeyUp = ({
-    key
-  }) => {
+  var onKeyUp = function onKeyUp(_ref3) {
+    var key = _ref3.key;
+
     if (key === 'Escape') {
@@ -111,10 +148,7 @@ onBlur();
 
-  const onSearch = ({
-    target
-  }) => {
-    const {
-      value: inputVal
-    } = target;
+  var onSearch = function onSearch(_ref4) {
+    var target = _ref4.target;
+    var inputVal = target.value;
     setSearch(inputVal);
-    let searchableOption = flatDefaultOptions;
+    var searchableOption = flatDefaultOptions;
 
@@ -126,5 +160,5 @@ if (getOptions && inputVal.length) {
 
-    Promise.resolve(searchableOption).then(foundOptions => {
+    Promise.resolve(searchableOption).then(function (foundOptions) {
       if (inputVal.length) {
-        const newOptions = (0, _search.default)(inputVal, foundOptions, fuse);
+        var newOptions = (0, _search["default"])(inputVal, foundOptions, fuse);
         setOptions(newOptions === false ? foundOptions : newOptions);
@@ -134,14 +168,18 @@ } else {
       }
-    }).catch(() => setOptions(flatDefaultOptions)).finally(() => setSearching(false));
+    })["catch"](function () {
+      return setOptions(flatDefaultOptions);
+    })["finally"](function () {
+      return setSearching(false);
+    });
   };
 
-  const valueProps = {
+  var valueProps = {
     tabIndex: '0',
     readOnly: !canSearch,
-    onBlur,
-    onFocus,
-    onKeyPress,
-    onKeyDown,
-    onKeyUp,
-    ref
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onKeyPress: onKeyPress,
+    onKeyDown: onKeyDown,
+    onKeyUp: onKeyUp,
+    ref: ref
   };
@@ -153,9 +191,9 @@
 
-  const optionProps = {
+  var optionProps = {
     tabIndex: '-1',
-    onMouseDown
+    onMouseDown: onMouseDown
   };
-  (0, _react.useEffect)(() => {
+  (0, _react.useEffect)(function () {
     if (defaultValue && flatDefaultOptions) {
-      const option = (0, _getOption.default)(defaultValue, flatDefaultOptions);
+      var option = (0, _getOption["default"])(defaultValue, flatDefaultOptions);
       setValue(option);
@@ -166,4 +204,4 @@ } else if (!defaultValue && flatDefaultOptions && !allowEmpty) {
   }, [defaultValue]);
-  (0, _react.useEffect)(() => {
-    const flatOptions = (0, _flattenOptions.default)(defaultOptions);
+  (0, _react.useEffect)(function () {
+    var flatOptions = (0, _flattenOptions["default"])(defaultOptions);
     setOptions(flatOptions);
@@ -173,11 +211,11 @@ setFlatDefaultOptions(flatOptions);
   return [{
-    value,
-    highlighted,
-    options,
-    disabled,
-    displayValue,
-    focus,
-    search,
-    searching
+    value: value,
+    highlighted: highlighted,
+    options: options,
+    disabled: disabled,
+    displayValue: displayValue,
+    focus: focus,
+    search: search,
+    searching: searching
   }, valueProps, optionProps, setValue];
 }

dist/esm/Components/Option.js

@@ -13,3 +13,3 @@ function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-import React from 'react';
+import React, { useMemo, memo } from 'react';
 import PropTypes from 'prop-types';
@@ -28,17 +28,19 @@
   const optionClass = [className('option'), selected ? className('is-selected') : false, highlighted ? className('is-highlighted') : false].filter(cls => !!cls).join(' ');
+  const comp = useMemo(() => {
+    const domProps = _objectSpread({}, optionProps, {
+      value: option.value,
+      disabled: option.disabled
+    });
 
-  const domProps = _objectSpread({}, optionProps, {
-    value: option.value,
-    disabled: option.disabled
-  });
-
-  const comp = renderOption ? renderOption(domProps, option, {
-    selected,
-    highlighted
-  }, optionClass) : /*#__PURE__*/React.createElement("button", _extends({
-    className: optionClass
-  }, domProps), option.name);
+    return renderOption ? renderOption(domProps, option, {
+      selected,
+      highlighted
+    }, optionClass) : /*#__PURE__*/React.createElement("button", _extends({
+      className: optionClass
+    }, domProps), option.name);
+  }, [renderOption, option, selected, highlighted, optionClass]);
   return /*#__PURE__*/React.createElement("li", {
     className: className('row'),
     role: "menuitem",
+    "data-index": option.index,
     "data-value": option.value,
@@ -71,2 +73,2 @@ key: option.value
 };
-export default Option;
+export default memo(Option);

dist/esm/Components/Options.js

 function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-import React from 'react';
+import React, { memo } from 'react';
 import PropTypes from 'prop-types';
@@ -66,2 +66,2 @@ import Option from './Option';
 };
-export default Options;
+export default memo(Options);

dist/esm/lib/getGroupId.js

 export default function getGroupId(group) {
-  return `${group.name}-${Math.random().toString(36).substr(2, 9)}`;
+  return group.name + "-" + Math.random().toString(36).substr(2, 9);
 }

dist/esm/lib/getOption.js

@@ -1,18 +0,8 @@
-function findOption(value, options) {
-  const matches = options.filter(option => option.value === value);
-
-  if (matches.length) {
-    return matches[0];
-  }
-
-  return null;
-}
-
 export default function getOption(value, defaultOptions) {
   if (value) {
     if (Array.isArray(value)) {
-      return value.map(singleValue => findOption(singleValue, defaultOptions));
+      return value.map(singleValue => defaultOptions.find(option => option.value === singleValue));
     }
 
-    return findOption(value, defaultOptions);
+    return defaultOptions.find(option => option.value === value) || null;
   }
@@ -19,0 +9,0 @@

dist/esm/lib/groupOptions.js

@@ -1,2 +0,1 @@
-import findGroupIndex from './findGroupIndex';
 export default function groupOptions(options) {
@@ -7,3 +6,3 @@ const nextOptions = [];
       const nextOption = Object.assign({}, option);
-      const groupIndex = findGroupIndex(nextOptions, nextOption.groupId);
+      const groupIndex = nextOptions.findIndex(el => 'groupId' in el && el.groupId === nextOption.groupId);
       nextOption.index = i;
@@ -10,0 +9,0 @@

dist/esm/SelectSearch.js

@@ -42,5 +42,5 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
   });
-  const classNameFn = useMemo(() => typeof className === 'string' ? key => {
-    if (key === 'container') {
-      return 'select-search';
+  const classNameFn = typeof className === 'string' ? key => {
+    if (key.indexOf('container') === 0) {
+      return key.replace('container', 'select-search');
     }
@@ -52,35 +52,21 @@
 
-    return `select-search__${key}`;
-  } : className, [className]);
-  let wrapperClass = classNameFn('container');
-
-  if (multiple) {
-    wrapperClass += ` ${wrapperClass}--multiple`;
-  }
-
-  if (search) {
-    wrapperClass += ` ${wrapperClass}--search`;
-  }
-
-  if (snapshot.searching) {
-    wrapperClass += ` ${classNameFn('is-searching')}`;
-  }
-
-  let value = snapshot.displayValue;
-
-  if ((snapshot.focus || multiple) && search) {
-    value = snapshot.search;
-  }
-
+    return "select-search__" + key;
+  } : className;
+  const wrapperClass = [classNameFn('container'), multiple ? classNameFn('container--multiple') : false, search ? classNameFn('container--search') : false, snapshot.searching ? classNameFn('is-searching') : false].filter(cls => !!cls).join(' ');
+  const value = (snapshot.focus || multiple) && search ? snapshot.search : snapshot.displayValue;
   useEffect(() => {
-    if (snapshot.focus && selectRef.current && snapshot.value) {
-      const selected = selectRef.current.querySelector(`[data-value="${snapshot.value.value}"]`);
+    let selected = null;
 
-      if (selected) {
-        const rect = selectRef.current.getBoundingClientRect();
-        const selectedRect = selected.getBoundingClientRect();
-        selectRef.current.scrollTop = selected.offsetTop - rect.height / 2 + selectedRect.height / 2;
-      }
+    if (snapshot.focus && selectRef.current && snapshot.highlighted > -1) {
+      selected = selectRef.current.querySelector("[data-index=\"" + snapshot.highlighted + "\"]");
+    } else if (snapshot.focus && selectRef.current && snapshot.value) {
+      selected = selectRef.current.querySelector("[data-value=\"" + snapshot.value.value + "\"]");
     }
-  }, [snapshot.focus, selectRef.current, snapshot.value]);
+
+    if (selected) {
+      const rect = selectRef.current.getBoundingClientRect();
+      const selectedRect = selected.getBoundingClientRect();
+      selectRef.current.scrollTop = selected.offsetTop - rect.height / 2 + selectedRect.height / 2;
+    }
+  }, [snapshot.focus, selectRef.current, snapshot.value, snapshot.highlighted]);
   const valueComp = renderValue ? /*#__PURE__*/React.createElement("div", {
@@ -87,0 +73,0 @@ className: classNameFn('value')

package.json

 {
   "name": "react-select-search",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Lightweight select component for React",
@@ -5,0 +5,0 @@ "main": "dist/esm/index.js",

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

Improved metrics

Total package byte prevSize

67441

increased by4.49%

Worsened metrics

Number of package files

35

decreased by-10.26%

Lines of code

1345

decreased by-4.13%

No dependency changes