react-select-search - npm Package Compare versions

Comparing version 1.0.0-rc13 to 1.0.0-rc14

__tests__/data/index.js

@@ -285,3 +285,3 @@ export const countries = [
     { name: 'Annie Cruz', value: 'annie.cruz', photo: 'https://randomuser.me/api/portraits/women/60.jpg' },
-    { name: 'Eli Shelton', value: 'eli.shelton', photo: 'https://randomuser.me/api/portraits/men/7.jpg' },
+    { name: 'Eli Shelton', disabled: true, value: 'eli.shelton', photo: 'https://randomuser.me/api/portraits/men/7.jpg' },
     { name: 'Loretta Rogers', value: 'loretta.rogers', photo: 'https://randomuser.me/api/portraits/women/51.jpg' },
@@ -288,0 +288,0 @@ { name: 'Lloyd Fisher', value: 'lloyd.fisher', photo: 'https://randomuser.me/api/portraits/men/34.jpg' },

dist/cjs/Components/Option.js

@@ -45,3 +45,3 @@ "use strict";
     return false;
-  }, [selected]), (0, _react.useMemo)(function () {
+  }, [className, selected]), (0, _react.useMemo)(function () {
     if (highlighted) {
@@ -52,3 +52,3 @@ return className('is-highlighted');
     return false;
-  }, [highlighted])].filter(function (cls) {
+  }, [className, highlighted])].filter(function (cls) {
     return !!cls;
@@ -86,7 +86,5 @@ }).join(' ');
   type: null,
-  groupId: null,
   disabled: false,
   index: null,
   value: null,
-  items: null,
   renderOption: null
@@ -98,4 +96,2 @@ };
   type: _propTypes.default.string,
-  groupId: _propTypes.default.string,
-  items: _propTypes.default.arrayOf(_propTypes.default.object),
   disabled: _propTypes.default.bool,
@@ -102,0 +98,0 @@ index: _propTypes.default.number,

dist/cjs/Components/Value.js

@@ -36,7 +36,8 @@ "use strict";
     className: className('input')
-  })), !search && _react.default.createElement("button", _extends({}, valueProps, {
+  })), !search && _react.default.createElement("input", _extends({}, valueProps, {
     disabled: disabled,
     className: className('input'),
-    autoFocus: autoFocus
-  }), displayValue));
+    autoFocus: autoFocus,
+    value: displayValue
+  })));
 };
@@ -58,4 +59,3 @@
     tabIndex: _propTypes.default.string,
-    onChange: _propTypes.default.func,
-    value: _propTypes.default.string
+    onChange: _propTypes.default.func
   }).isRequired,
@@ -62,0 +62,0 @@ disabled: _propTypes.default.bool,

dist/cjs/index.js

@@ -12,8 +12,2 @@ "use strict";
 });
-Object.defineProperty(exports, "useSearch", {
-  enumerable: true,
-  get: function get() {
-    return _useSearch.default;
-  }
-});
 Object.defineProperty(exports, "default", {
@@ -28,6 +22,4 @@ enumerable: true,
 
-var _useSearch = _interopRequireDefault(require("./useSearch"));
-
 var _SelectSearch = _interopRequireDefault(require("./SelectSearch"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

dist/cjs/lib/FlattenOptions.js

@@ -6,5 +6,9 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = flattenOptions;
 
-var FlattenOptions = function FlattenOptions(options) {
+var _getGroupId = _interopRequireDefault(require("./getGroupId"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function flattenOptions(options) {
   if (!Array.isArray(options)) {
@@ -17,3 +21,3 @@ return [];
     if ('type' in option && option.type === 'group') {
-      var id = Math.random().toString(36).substr(2, 9);
+      var id = (0, _getGroupId.default)(option);
       option.items.forEach(function (groupOption) {
@@ -32,5 +36,4 @@ var nextGroupOption = Object.assign({}, groupOption);
   return nextOptions;
-};
+}
 
-var _default = FlattenOptions;
-exports.default = _default;
+;

dist/cjs/lib/GroupOptions.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.default = void 0;
+exports.default = groupOptions;
 
@@ -13,3 +13,3 @@ var _findGroupIndex = _interopRequireDefault(require("./findGroupIndex"));
 
-var GroupOptions = function GroupOptions(options) {
+function groupOptions(options) {
   var nextOptions = [];
@@ -37,5 +37,4 @@ options.forEach(function (option, i) {
   return nextOptions;
-};
+}
 
-var _default = GroupOptions;
-exports.default = _default;
+;

dist/cjs/search.js

@@ -30,3 +30,3 @@ "use strict";
 function search(value, options, fuseOptions) {
-  if (value.length) {
+  if (value.length && Fuse && fuseOptions) {
     return fuzzySearch(value, options, fuseOptions);
@@ -33,0 +33,0 @@ }

dist/cjs/SelectSearch.js

@@ -14,4 +14,2 @@ "use strict";
 
-var _useSearch = _interopRequireDefault(require("./useSearch"));
-
 var _Value = _interopRequireDefault(require("./Components/Value"));
@@ -21,2 +19,4 @@
 
+var _flattenOptions = _interopRequireDefault(require("./lib/flattenOptions"));
+
 var _types = require("./types");
@@ -57,15 +57,13 @@
       renderOption = _ref.renderOption,
-      renderGroupHeader = _ref.renderGroupHeader;
+      renderGroupHeader = _ref.renderGroupHeader,
+      fuse = _ref.fuse;
 
-  var _ref2 = search ? (0, _useSearch.default)(defaultOptions) : [null, defaultOptions],
-      _ref3 = _slicedToArray(_ref2, 2),
-      searchProps = _ref3[0],
-      options = _ref3[1];
-
   var _useSelect = (0, _useSelect3.default)({
-    options: options,
+    options: defaultOptions,
     value: defaultValue,
     multiple: multiple,
-    disabled: disabled
-  }, searchProps),
+    disabled: disabled,
+    fuse: fuse,
+    search: search
+  }),
       _useSelect2 = _slicedToArray(_useSelect, 3),
@@ -76,2 +74,6 @@ snapshot = _useSelect2[0],
 
+  var options = snapshot.options;
+  var flatOptions = (0, _react.useMemo)(function () {
+    return (0, _flattenOptions.default)(options);
+  }, [options]);
   var prevValue = (0, _react.useRef)(snapshot.value);
@@ -93,10 +95,10 @@ var classNameFn = (0, _react.useMemo)(function () {
     if (prevValue.current !== snapshot.value) {
-      onChange(snapshot.value);
+      onChange(snapshot.value, snapshot.selectedOption);
       prevValue.current = snapshot.value;
     }
-  }, [onChange, snapshot.value]);
+  }, [onChange, snapshot.value, snapshot.selectedOption]);
   var displayValue = snapshot.displayValue;
 
-  if (!placeholder && !displayValue && defaultOptions.length) {
-    displayValue = defaultOptions[0].name;
+  if (!placeholder && !displayValue && flatOptions.length) {
+    displayValue = flatOptions[0].name;
   }
@@ -117,3 +119,3 @@
   if ((snapshot.focus || multiple) && search) {
-    value = searchProps.value;
+    value = snapshot.search;
   }
@@ -128,3 +130,5 @@
     value: search ? value : null
-  }), snapshot, classNameFn('input'))) : _react.default.createElement(_Value.default, {
+  }), _objectSpread({}, snapshot, {
+    displayValue: displayValue
+  }), classNameFn('input'))) : _react.default.createElement(_Value.default, {
     snapshot: snapshot,
@@ -170,3 +174,7 @@ disabled: disabled,
   },
-  renderValue: null
+  renderValue: null,
+  fuse: {
+    keys: ['name', 'groupName'],
+    threshold: 0.3
+  }
 };
@@ -186,3 +194,7 @@ SelectSearch.propTypes = {
   renderGroupHeader: _propTypes.default.func,
-  renderValue: _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
+  })])
 };
@@ -189,0 +201,0 @@

dist/cjs/useSelect.js

@@ -10,7 +10,9 @@ "use strict";
 
+var _highlightReducer = _interopRequireDefault(require("./highlightReducer"));
+
 var _getDisplayValue = _interopRequireDefault(require("./lib/getDisplayValue"));
 
-var _FlattenOptions = _interopRequireDefault(require("./lib/FlattenOptions"));
+var _flattenOptions = _interopRequireDefault(require("./lib/flattenOptions"));
 
-var _GroupOptions = _interopRequireDefault(require("./lib/GroupOptions"));
+var _groupOptions = _interopRequireDefault(require("./lib/groupOptions"));
 
@@ -21,10 +23,6 @@ var _getNewValue = _interopRequireDefault(require("./lib/getNewValue"));
 
+var _search = _interopRequireDefault(require("./search"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
@@ -38,33 +36,2 @@
 
-function highlightReducer(highlighted, value) {
-  if (!value) {
-    return -1;
-  }
-
-  var key = value.key,
-      options = value.options;
-  var newHighlighted = null;
-
-  if (key === 'ArrowDown' && highlighted < options.length) {
-    newHighlighted = highlighted + 1;
-  } else if (key === 'ArrowDown' && highlighted >= options.length - 1) {
-    newHighlighted = 0;
-  } else if (key === 'ArrowUp' && highlighted > 0) {
-    newHighlighted = highlighted - 1;
-  } else if (key === 'ArrowUp' && highlighted <= 0) {
-    newHighlighted = options.length - 1;
-  }
-
-  var option = options[newHighlighted];
-
-  if (option && option.disabled) {
-    return highlightReducer(newHighlighted, {
-      key: key,
-      options: options
-    });
-  }
-
-  return newHighlighted;
-}
-
 function useSelectSearch(_ref) {
@@ -77,26 +44,30 @@ var _ref$value = _ref.value,
       multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-      options = _ref.options;
-  var searchProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var flat = (0, _react.useMemo)(function () {
-    return (0, _FlattenOptions.default)(options);
-  }, [options]);
-  var groupedOptions = (0, _react.useMemo)(function () {
-    return (0, _GroupOptions.default)(flat);
-  }, [flat]);
+      _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;
+  var ref = (0, _react.useRef)(null);
 
-  var _useState = (0, _react.useState)(defaultValue),
+  var _useState = (0, _react.useState)([]),
       _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
+      flat = _useState2[0],
+      setOptions = _useState2[1];
 
-  var selectedOption = (0, _react.useMemo)(function () {
-    return (0, _getOption.default)(value, flat);
-  }, [value, flat]);
-
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(defaultValue),
       _useState4 = _slicedToArray(_useState3, 2),
-      focus = _useState4[0],
-      setFocus = _useState4[1];
+      value = _useState4[0],
+      setValue = _useState4[1];
 
-  var _useReducer = (0, _react.useReducer)(highlightReducer, -1),
+  var _useState5 = (0, _react.useState)(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      search = _useState6[0],
+      setSearch = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      focus = _useState8[0],
+      setFocus = _useState8[1];
+
+  var _useReducer = (0, _react.useReducer)(_highlightReducer.default, -1),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -106,2 +77,11 @@ highlighted = _useReducer2[0],
 
+  var options = (0, _react.useMemo)(function () {
+    return (0, _groupOptions.default)(flat);
+  }, [flat]);
+  var selectedOption = (0, _react.useMemo)(function () {
+    return (0, _getOption.default)(value, flat);
+  }, [value, flat]);
+  var displayValue = (0, _react.useMemo)(function () {
+    return (0, _getDisplayValue.default)(value, flat);
+  }, [value, flat]);
   var onBlur = (0, _react.useCallback)(function () {
@@ -111,6 +91,11 @@ setFocus(false);
 
-    if (searchProps) {
-      searchProps.onBlur();
+    if (ref.current) {
+      ref.current.blur();
     }
-  }, [searchProps]);
+
+    if (!multiple) {
+      setSearch('');
+      setOptions((0, _flattenOptions.default)(defaultOptions));
+    }
+  }, [flat, ref]);
   var onFocus = (0, _react.useCallback)(function () {
@@ -130,5 +115,2 @@ setFocus(true);
   }, [flat]);
-  var displayValue = (0, _react.useMemo)(function () {
-    return (0, _getDisplayValue.default)(value, flat);
-  }, [value, flat]);
   var onKeyPress = (0, _react.useCallback)(function (_ref2) {
@@ -138,9 +120,13 @@ var key = _ref2.key;
     if (key === 'Enter') {
-      var option = options[highlighted];
+      var option = flat[highlighted];
 
       if (option) {
         setValue((0, _getNewValue.default)(option.value, value, multiple));
+
+        if (!multiple) {
+          onBlur();
+        }
       }
     }
-  }, [options, highlighted, multiple, value]);
+  }, [onBlur, flat, highlighted, multiple, value]);
   var onKeyUp = (0, _react.useCallback)(function (_ref3) {
@@ -150,8 +136,20 @@ var key = _ref3.key;
     if (key === 'Escape') {
-      setFocus(false);
+      onBlur();
     }
-  }, []);
+  }, [onBlur]);
+  var onSearch = (0, _react.useCallback)(function (_ref4) {
+    var target = _ref4.target;
+    var inputVal = target.value;
+    var newOptions = flat;
+    setSearch(inputVal);
 
-  var valueProps = _objectSpread({}, searchProps, {
+    if (inputVal.length) {
+      newOptions = (0, _search.default)(inputVal, flat, fuse);
+    }
+
+    setOptions(newOptions);
+  }, [flat, fuse]);
+  var valueProps = {
     tabIndex: '0',
+    readOnly: !canSearch,
     onBlur: onBlur,
@@ -161,5 +159,10 @@ onFocus: onFocus,
     onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp
-  });
+    onKeyUp: onKeyUp,
+    ref: ref
+  };
 
+  if (canSearch) {
+    valueProps.onChange = onSearch;
+  }
+
   var optionProps = {
@@ -172,2 +175,5 @@ tabIndex: '-1',
   }, [defaultValue]);
+  (0, _react.useEffect)(function () {
+    setOptions((0, _flattenOptions.default)(defaultOptions));
+  }, [defaultOptions]);
   return [{
@@ -177,7 +183,8 @@ value: value,
     highlighted: highlighted,
-    options: groupedOptions,
+    options: options,
     disabled: disabled,
     displayValue: displayValue,
-    focus: focus
+    focus: focus,
+    search: search
   }, valueProps, optionProps, setValue];
 }

dist/esm/Components/Option.js

@@ -31,3 +31,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); }
     return false;
-  }, [selected]), useMemo(function () {
+  }, [className, selected]), useMemo(function () {
     if (highlighted) {
@@ -38,3 +38,3 @@ return className('is-highlighted');
     return false;
-  }, [highlighted])].filter(function (cls) {
+  }, [className, highlighted])].filter(function (cls) {
     return !!cls;
@@ -72,7 +72,5 @@ }).join(' ');
   type: null,
-  groupId: null,
   disabled: false,
   index: null,
   value: null,
-  items: null,
   renderOption: null
@@ -84,4 +82,2 @@ };
   type: PropTypes.string,
-  groupId: PropTypes.string,
-  items: PropTypes.arrayOf(PropTypes.object),
   disabled: PropTypes.bool,
@@ -88,0 +84,0 @@ index: PropTypes.number,

dist/esm/Components/Value.js

@@ -22,7 +22,8 @@ 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); }
     className: className('input')
-  })), !search && React.createElement("button", _extends({}, valueProps, {
+  })), !search && React.createElement("input", _extends({}, valueProps, {
     disabled: disabled,
     className: className('input'),
-    autoFocus: autoFocus
-  }), displayValue));
+    autoFocus: autoFocus,
+    value: displayValue
+  })));
 };
@@ -44,4 +45,3 @@
     tabIndex: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.string
+    onChange: PropTypes.func
   }).isRequired,
@@ -48,0 +48,0 @@ disabled: PropTypes.bool,

dist/esm/index.js

 export { default as useSelect } from './useSelect';
-export { default as useSearch } from './useSearch';
 export { default } from './SelectSearch';

dist/esm/lib/FlattenOptions.js

@@ -1,2 +0,3 @@
-var FlattenOptions = function FlattenOptions(options) {
+import getGroupId from './getGroupId';
+export default function flattenOptions(options) {
   if (!Array.isArray(options)) {
@@ -9,3 +10,3 @@ return [];
     if ('type' in option && option.type === 'group') {
-      var id = Math.random().toString(36).substr(2, 9);
+      var id = getGroupId(option);
       option.items.forEach(function (groupOption) {
@@ -24,4 +25,3 @@ var nextGroupOption = Object.assign({}, groupOption);
   return nextOptions;
-};
-
-export default FlattenOptions;
+}
+;

dist/esm/lib/GroupOptions.js

 import findGroupIndex from './findGroupIndex';
-
-var GroupOptions = function GroupOptions(options) {
+export default function groupOptions(options) {
   var nextOptions = [];
@@ -26,4 +25,3 @@ options.forEach(function (option, i) {
   return nextOptions;
-};
-
-export default GroupOptions;
+}
+;

dist/esm/search.js

@@ -24,3 +24,3 @@ var Fuse = null;
 export default function search(value, options, fuseOptions) {
-  if (value.length) {
+  if (value.length && Fuse && fuseOptions) {
     return fuzzySearch(value, options, fuseOptions);
@@ -27,0 +27,0 @@ }

dist/esm/SelectSearch.js

@@ -18,5 +18,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; }
 import useSelect from './useSelect';
-import useSearch from './useSearch';
 import Value from './Components/Value';
 import Options from './Components/Options';
+import FlattenOptions from './lib/flattenOptions';
 import { optionType, valueType } from './types';
@@ -36,15 +36,13 @@ var SelectSearch = forwardRef(function (_ref, ref) {
       renderOption = _ref.renderOption,
-      renderGroupHeader = _ref.renderGroupHeader;
+      renderGroupHeader = _ref.renderGroupHeader,
+      fuse = _ref.fuse;
 
-  var _ref2 = search ? useSearch(defaultOptions) : [null, defaultOptions],
-      _ref3 = _slicedToArray(_ref2, 2),
-      searchProps = _ref3[0],
-      options = _ref3[1];
-
   var _useSelect = useSelect({
-    options: options,
+    options: defaultOptions,
     value: defaultValue,
     multiple: multiple,
-    disabled: disabled
-  }, searchProps),
+    disabled: disabled,
+    fuse: fuse,
+    search: search
+  }),
       _useSelect2 = _slicedToArray(_useSelect, 3),
@@ -55,2 +53,6 @@ snapshot = _useSelect2[0],
 
+  var options = snapshot.options;
+  var flatOptions = useMemo(function () {
+    return FlattenOptions(options);
+  }, [options]);
   var prevValue = useRef(snapshot.value);
@@ -72,10 +74,10 @@ var classNameFn = useMemo(function () {
     if (prevValue.current !== snapshot.value) {
-      onChange(snapshot.value);
+      onChange(snapshot.value, snapshot.selectedOption);
       prevValue.current = snapshot.value;
     }
-  }, [onChange, snapshot.value]);
+  }, [onChange, snapshot.value, snapshot.selectedOption]);
   var displayValue = snapshot.displayValue;
 
-  if (!placeholder && !displayValue && defaultOptions.length) {
-    displayValue = defaultOptions[0].name;
+  if (!placeholder && !displayValue && flatOptions.length) {
+    displayValue = flatOptions[0].name;
   }
@@ -96,3 +98,3 @@
   if ((snapshot.focus || multiple) && search) {
-    value = searchProps.value;
+    value = snapshot.search;
   }
@@ -107,3 +109,5 @@
     value: search ? value : null
-  }), snapshot, classNameFn('input'))) : React.createElement(Value, {
+  }), _objectSpread({}, snapshot, {
+    displayValue: displayValue
+  }), classNameFn('input'))) : React.createElement(Value, {
     snapshot: snapshot,
@@ -149,3 +153,7 @@ disabled: disabled,
   },
-  renderValue: null
+  renderValue: null,
+  fuse: {
+    keys: ['name', 'groupName'],
+    threshold: 0.3
+  }
 };
@@ -165,4 +173,8 @@ SelectSearch.propTypes = {
   renderGroupHeader: PropTypes.func,
-  renderValue: PropTypes.func
+  renderValue: PropTypes.func,
+  fuse: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
+    keys: PropTypes.arrayOf(PropTypes.string),
+    threshold: PropTypes.number
+  })])
 };
 export default memo(SelectSearch);

dist/esm/useSelect.js

@@ -1,7 +0,1 @@
-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; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
@@ -15,40 +9,10 @@
 
-import { useReducer, useEffect, useCallback, useMemo, useState } from 'react';
+import { useReducer, useEffect, useCallback, useMemo, useState, useRef } from 'react';
+import highlightReducer from './highlightReducer';
 import getDisplayValue from './lib/getDisplayValue';
-import FlattenOptions from './lib/FlattenOptions';
-import GroupOptions from './lib/GroupOptions';
+import FlattenOptions from './lib/flattenOptions';
+import GroupOptions from './lib/groupOptions';
 import getNewValue from './lib/getNewValue';
 import getOption from './lib/getOption';
-
-function highlightReducer(highlighted, value) {
-  if (!value) {
-    return -1;
-  }
-
-  var key = value.key,
-      options = value.options;
-  var newHighlighted = null;
-
-  if (key === 'ArrowDown' && highlighted < options.length) {
-    newHighlighted = highlighted + 1;
-  } else if (key === 'ArrowDown' && highlighted >= options.length - 1) {
-    newHighlighted = 0;
-  } else if (key === 'ArrowUp' && highlighted > 0) {
-    newHighlighted = highlighted - 1;
-  } else if (key === 'ArrowUp' && highlighted <= 0) {
-    newHighlighted = options.length - 1;
-  }
-
-  var option = options[newHighlighted];
-
-  if (option && option.disabled) {
-    return highlightReducer(newHighlighted, {
-      key: key,
-      options: options
-    });
-  }
-
-  return newHighlighted;
-}
-
+import doSearch from './search';
 export default function useSelectSearch(_ref) {
@@ -61,25 +25,29 @@ var _ref$value = _ref.value,
       multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-      options = _ref.options;
-  var searchProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-  var flat = useMemo(function () {
-    return FlattenOptions(options);
-  }, [options]);
-  var groupedOptions = useMemo(function () {
-    return GroupOptions(flat);
-  }, [flat]);
+      _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;
+  var ref = useRef(null);
 
-  var _useState = useState(defaultValue),
+  var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
-      value = _useState2[0],
-      setValue = _useState2[1];
+      flat = _useState2[0],
+      setOptions = _useState2[1];
 
-  var selectedOption = useMemo(function () {
-    return getOption(value, flat);
-  }, [value, flat]);
-
-  var _useState3 = useState(false),
+  var _useState3 = useState(defaultValue),
       _useState4 = _slicedToArray(_useState3, 2),
-      focus = _useState4[0],
-      setFocus = _useState4[1];
+      value = _useState4[0],
+      setValue = _useState4[1];
 
+  var _useState5 = useState(''),
+      _useState6 = _slicedToArray(_useState5, 2),
+      search = _useState6[0],
+      setSearch = _useState6[1];
+
+  var _useState7 = useState(false),
+      _useState8 = _slicedToArray(_useState7, 2),
+      focus = _useState8[0],
+      setFocus = _useState8[1];
+
   var _useReducer = useReducer(highlightReducer, -1),
@@ -90,2 +58,11 @@ _useReducer2 = _slicedToArray(_useReducer, 2),
 
+  var options = useMemo(function () {
+    return GroupOptions(flat);
+  }, [flat]);
+  var selectedOption = useMemo(function () {
+    return getOption(value, flat);
+  }, [value, flat]);
+  var displayValue = useMemo(function () {
+    return getDisplayValue(value, flat);
+  }, [value, flat]);
   var onBlur = useCallback(function () {
@@ -95,6 +72,11 @@ setFocus(false);
 
-    if (searchProps) {
-      searchProps.onBlur();
+    if (ref.current) {
+      ref.current.blur();
     }
-  }, [searchProps]);
+
+    if (!multiple) {
+      setSearch('');
+      setOptions(FlattenOptions(defaultOptions));
+    }
+  }, [flat, ref]);
   var onFocus = useCallback(function () {
@@ -114,5 +96,2 @@ setFocus(true);
   }, [flat]);
-  var displayValue = useMemo(function () {
-    return getDisplayValue(value, flat);
-  }, [value, flat]);
   var onKeyPress = useCallback(function (_ref2) {
@@ -122,9 +101,13 @@ var key = _ref2.key;
     if (key === 'Enter') {
-      var option = options[highlighted];
+      var option = flat[highlighted];
 
       if (option) {
         setValue(getNewValue(option.value, value, multiple));
+
+        if (!multiple) {
+          onBlur();
+        }
       }
     }
-  }, [options, highlighted, multiple, value]);
+  }, [onBlur, flat, highlighted, multiple, value]);
   var onKeyUp = useCallback(function (_ref3) {
@@ -134,8 +117,20 @@ var key = _ref3.key;
     if (key === 'Escape') {
-      setFocus(false);
+      onBlur();
     }
-  }, []);
+  }, [onBlur]);
+  var onSearch = useCallback(function (_ref4) {
+    var target = _ref4.target;
+    var inputVal = target.value;
+    var newOptions = flat;
+    setSearch(inputVal);
 
-  var valueProps = _objectSpread({}, searchProps, {
+    if (inputVal.length) {
+      newOptions = doSearch(inputVal, flat, fuse);
+    }
+
+    setOptions(newOptions);
+  }, [flat, fuse]);
+  var valueProps = {
     tabIndex: '0',
+    readOnly: !canSearch,
     onBlur: onBlur,
@@ -145,5 +140,10 @@ onFocus: onFocus,
     onKeyDown: onKeyDown,
-    onKeyUp: onKeyUp
-  });
+    onKeyUp: onKeyUp,
+    ref: ref
+  };
 
+  if (canSearch) {
+    valueProps.onChange = onSearch;
+  }
+
   var optionProps = {
@@ -156,2 +156,5 @@ tabIndex: '-1',
   }, [defaultValue]);
+  useEffect(function () {
+    setOptions(FlattenOptions(defaultOptions));
+  }, [defaultOptions]);
   return [{
@@ -161,7 +164,8 @@ value: value,
     highlighted: highlighted,
-    options: groupedOptions,
+    options: options,
     disabled: disabled,
     displayValue: displayValue,
-    focus: focus
+    focus: focus,
+    search: search
   }, valueProps, optionProps, setValue];
 }

example/index.jsx

@@ -28,3 +28,3 @@ import React from 'react';
     return (
-        <button {...valueProps} type="button" className={className} style={style}>{snapshot.displayValue}</button>
+        <input {...valueProps} className={className} style={style} value={snapshot.displayValue} />
     );
@@ -31,0 +31,0 @@ }

package.json

 {
   "name": "react-select-search",
-  "version": "1.0.0-rc13",
+  "version": "1.0.0-rc14",
   "description": "Lightweight select component for React",
@@ -52,2 +52,3 @@ "main": "dist/esm/index.js",
     "enzyme-adapter-react-16": "^1.15.1",
+    "enzyme-to-json": "^3.4.4",
     "eslint": "^4.11.0",
@@ -65,2 +66,3 @@ "eslint-config-airbnb": "^16.1.0",
     "react-dom": "^16.11.0",
+    "react-test-renderer": "^16.12.0",
     "style-loader": "^0.20.1",
@@ -67,0 +69,0 @@ "webpack": "^4.41.2",

README.md

@@ -29,2 +29,4 @@ <p align="center">
 
+⚠️ This README is for react-select-search@next. For the latest stable release switch to the v0.10 branch.
+
 ## Features
@@ -34,2 +36,3 @@ * Lightweight, with zero dependencies*
 * Accessible
+* Headless mode
 * Basic HTML select functionality, including multiple
@@ -36,0 +39,0 @@ * Search/filter options

src/Components/Option.jsx

@@ -21,3 +21,3 @@ import React, { useMemo, useEffect, useRef } from 'react';
             return false;
-        }, [selected]),
+        }, [className, selected]),
         useMemo(() => {
@@ -29,3 +29,3 @@ if (highlighted) {
             return false;
-        }, [highlighted]),
+        }, [className, highlighted]),
     ].filter(cls => !!cls).join(' ');
@@ -65,7 +65,5 @@
     type: null,
-    groupId: null,
     disabled: false,
     index: null,
     value: null,
-    items: null,
     renderOption: null,
@@ -78,4 +76,2 @@ };
     type: PropTypes.string,
-    groupId: PropTypes.string,
-    items: PropTypes.arrayOf(PropTypes.object),
     disabled: PropTypes.bool,
@@ -82,0 +78,0 @@ index: PropTypes.number,

src/Components/Value.jsx

@@ -18,3 +18,3 @@ import React, { memo } from 'react';
         {!search && (
-            <button
+            <input
                 {...valueProps}
@@ -24,5 +24,4 @@ disabled={disabled}
                 autoFocus={autoFocus}
-            >
-                {displayValue}
-            </button>
+                value={displayValue}
+            />
         )}
@@ -48,3 +47,2 @@ </div>
         onChange: PropTypes.func,
-        value: PropTypes.string,
     }).isRequired,
@@ -51,0 +49,0 @@ disabled: PropTypes.bool,

src/index.js

 export { default as useSelect } from './useSelect';
-export { default as useSearch } from './useSearch';
 export { default } from './SelectSearch';

src/search.js

@@ -21,3 +21,3 @@ let Fuse = null;
 export default function search(value, options, fuseOptions) {
-    if (value.length) {
+    if (value.length && Fuse && fuseOptions) {
         return fuzzySearch(value, options, fuseOptions);
@@ -24,0 +24,0 @@ }

src/SelectSearch.jsx

 import React, { useEffect, forwardRef, useMemo, memo, useRef } from 'react';
 import PropTypes from 'prop-types';
 import useSelect from './useSelect';
-import useSearch from './useSearch';
 import Value from './Components/Value';
 import Options from './Components/Options';
+import FlattenOptions from './lib/flattenOptions';
 import { optionType, valueType } from './types';
@@ -23,11 +23,15 @@
     renderGroupHeader,
+    fuse,
 }, ref) => {
-    const [searchProps, options] = (search) ? useSearch(defaultOptions) : [null, defaultOptions];
     const [snapshot, valueProps, optionProps] = useSelect({
-        options,
+        options: defaultOptions,
         value: defaultValue,
         multiple,
         disabled,
-    }, searchProps);
+        fuse,
+        search,
+    });
 
+    const { options } = snapshot;
+    const flatOptions = useMemo(() => FlattenOptions(options), [options]);
     const prevValue = useRef(snapshot.value);
@@ -50,11 +54,11 @@ const classNameFn = useMemo(() => (
         if (prevValue.current !== snapshot.value) {
-            onChange(snapshot.value);
+            onChange(snapshot.value, snapshot.selectedOption);
             prevValue.current = snapshot.value;
         }
-    }, [onChange, snapshot.value]);
+    }, [onChange, snapshot.value, snapshot.selectedOption]);
 
     let { displayValue } = snapshot;
 
-    if (!placeholder && !displayValue && defaultOptions.length) {
-        displayValue = defaultOptions[0].name;
+    if (!placeholder && !displayValue && flatOptions.length) {
+        displayValue = flatOptions[0].name;
     }
@@ -75,3 +79,3 @@
     if ((snapshot.focus || multiple) && search) {
-        ({ value } = searchProps);
+        value = snapshot.search;
     }
@@ -89,3 +93,3 @@
                 },
-                snapshot,
+                { ...snapshot, displayValue },
                 classNameFn('input'),
@@ -142,2 +146,6 @@ )}
     renderValue: null,
+    fuse: {
+        keys: ['name', 'groupName'],
+        threshold: 0.3,
+    },
 };
@@ -162,4 +170,11 @@
     renderValue: PropTypes.func,
+    fuse: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.shape({
+            keys: PropTypes.arrayOf(PropTypes.string),
+            threshold: PropTypes.number,
+        }),
+    ]),
 };
 
 export default memo(SelectSearch);

src/useSelect.js

@@ -1,35 +0,17 @@
-import { useReducer, useEffect, useCallback, useMemo, useState } from 'react';
+import {
+    useReducer,
+    useEffect,
+    useCallback,
+    useMemo,
+    useState,
+    useRef,
+} from 'react';
+import highlightReducer from './highlightReducer';
 import getDisplayValue from './lib/getDisplayValue';
-import FlattenOptions from './lib/FlattenOptions';
-import GroupOptions from './lib/GroupOptions';
+import FlattenOptions from './lib/flattenOptions';
+import GroupOptions from './lib/groupOptions';
 import getNewValue from './lib/getNewValue';
 import getOption from './lib/getOption';
+import doSearch from './search';
 
-function highlightReducer(highlighted, value) {
-    if (!value) {
-        return -1;
-    }
-
-    const { key, options } = value;
-    let newHighlighted = null;
-
-    if (key === 'ArrowDown' && highlighted < options.length) {
-        newHighlighted = highlighted + 1;
-    } else if (key === 'ArrowDown' && highlighted >= options.length - 1) {
-        newHighlighted = 0;
-    } else if (key === 'ArrowUp' && highlighted > 0) {
-        newHighlighted = highlighted - 1;
-    } else if (key === 'ArrowUp' && highlighted <= 0) {
-        newHighlighted = options.length - 1;
-    }
-
-    const option = options[newHighlighted];
-
-    if (option && option.disabled) {
-        return highlightReducer(newHighlighted, { key, options });
-    }
-
-    return newHighlighted;
-}
-
 export default function useSelectSearch({
@@ -39,10 +21,17 @@ value: defaultValue = null,
     multiple = false,
-    options,
-}, searchProps = null) {
-    const flat = useMemo(() => FlattenOptions(options), [options]);
-    const groupedOptions = useMemo(() => GroupOptions(flat), [flat]);
+    search: canSearch = false,
+    fuse = false,
+    options: defaultOptions,
+}) {
+    const ref = useRef(null);
+    const [flat, setOptions] = useState([]);
     const [value, setValue] = useState(defaultValue);
-    const selectedOption = useMemo(() => getOption(value, flat), [value, flat]);
+    const [search, setSearch] = useState('');
     const [focus, setFocus] = useState(false);
     const [highlighted, setHighlighted] = useReducer(highlightReducer, -1);
+
+    const options = useMemo(() => GroupOptions(flat), [flat]);
+    const selectedOption = useMemo(() => getOption(value, flat), [value, flat]);
+    const displayValue = useMemo(() => getDisplayValue(value, flat), [value, flat]);
+
     const onBlur = useCallback(() => {
@@ -52,6 +41,11 @@ setFocus(false);
 
-        if (searchProps) {
-            searchProps.onBlur();
+        if (ref.current) {
+            ref.current.blur();
         }
-    }, [searchProps]);
+
+        if (!multiple) {
+            setSearch('');
+            setOptions(FlattenOptions(defaultOptions));
+        }
+    }, [flat, ref]);
     const onFocus = useCallback(() => {
@@ -63,21 +57,36 @@ setFocus(true);
     const onKeyDown = useCallback(e => setHighlighted({ key: e.key, options: flat }), [flat]);
-    const displayValue = useMemo(() => getDisplayValue(value, flat), [value, flat]);
     const onKeyPress = useCallback(({ key }) => {
         if (key === 'Enter') {
-            const option = options[highlighted];
+            const option = flat[highlighted];
 
             if (option) {
                 setValue(getNewValue(option.value, value, multiple));
+
+                if (!multiple) {
+                    onBlur();
+                }
             }
         }
-    }, [options, highlighted, multiple, value]);
+    }, [onBlur, flat, highlighted, multiple, value]);
     const onKeyUp = useCallback(({ key }) => {
         if (key === 'Escape') {
-            setFocus(false);
+            onBlur();
         }
-    }, []);
+    }, [onBlur]);
 
+    const onSearch = useCallback(({ target }) => {
+        const { value: inputVal } = target;
+        let newOptions = flat;
+        setSearch(inputVal);
+
+        if (inputVal.length) {
+            newOptions = doSearch(inputVal, flat, fuse);
+        }
+
+        setOptions(newOptions);
+    }, [flat, fuse]);
+
     const valueProps = {
-        ...searchProps,
         tabIndex: '0',
+        readOnly: !canSearch,
         onBlur,
@@ -88,4 +97,9 @@ onFocus,
         onKeyUp,
+        ref,
     };
 
+    if (canSearch) {
+        valueProps.onChange = onSearch;
+    }
+
     const optionProps = { tabIndex: '-1', onMouseDown: onChange };
@@ -97,2 +111,6 @@
 
+    useEffect(() => {
+        setOptions(FlattenOptions(defaultOptions));
+    }, [defaultOptions]);
+
     return [
@@ -103,6 +121,7 @@ {
             highlighted,
-            options: groupedOptions,
+            options,
             disabled,
             displayValue,
             focus,
+            search,
         },
@@ -109,0 +128,0 @@ valueProps,

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

Deprecated

Maintenance

The maintainer of the package marked it as deprecated. This could indicate that a single version should not be used, or that the package is no longer maintained and any new vulnerabilities will not be fixed.

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

316824

increased by108.6%

Number of package files

103

increased by18.39%

Lines of code

3889

increased by18.89%

Number of lines in readme file

186

increased by1.64%

Worsened metrics

Dev dependency count

32

increased by6.67%

Number of medium maintenance alerts

1

increased byInfinity%

No dependency changes