react-select-search - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/cjs/Components/Option.js

@@ -8,3 +8,3 @@ "use strict";
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
@@ -15,6 +15,2 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { 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); }
@@ -42,12 +38,3 @@
 
-  const optionRef = (0, _react.useRef)(null);
   const optionClass = [className('option'), selected ? className('is-selected') : false, highlighted ? className('is-highlighted') : false].filter(cls => !!cls).join(' ');
-  (0, _react.useEffect)(() => {
-    if (optionRef.current && (selected || highlighted)) {
-      optionRef.current.scrollIntoView({
-        behavior: 'auto',
-        block: 'center'
-      });
-    }
-  }, [optionRef, selected, highlighted]);
 
@@ -66,5 +53,5 @@ const domProps = _objectSpread({}, optionProps, {
   return /*#__PURE__*/_react.default.createElement("li", {
-    ref: optionRef,
     className: className('row'),
     role: "menuitem",
+    "data-value": option.value,
     key: option.value
@@ -71,0 +58,0 @@ }, comp);

dist/cjs/Components/Value.js

@@ -40,3 +40,4 @@ "use strict";
   autoFocus: autoFocus,
-  value: displayValue
+  value: displayValue,
+  placeholder: placeholder
 })));
@@ -43,0 +44,0 @@

dist/cjs/lib/isSelected.js

@@ -9,3 +9,7 @@ "use strict";
 function isSelected(itemValue, selectedValue) {
-  return Array.isArray(selectedValue) ? selectedValue.findIndex(item => item.value === itemValue.value) >= 0 : selectedValue === itemValue;
+  if (!selectedValue) {
+    return false;
+  }
+
+  return Array.isArray(selectedValue) ? selectedValue.findIndex(item => item.value === itemValue.value) >= 0 : selectedValue.value === itemValue.value;
 }

dist/cjs/SelectSearch.js

@@ -18,4 +18,2 @@ "use strict";
 
-var _flattenOptions = _interopRequireDefault(require("./lib/flattenOptions"));
-
 var _types = require("./types");
@@ -52,2 +50,3 @@
 }, ref) => {
+  const selectRef = (0, _react.createRef)();
   const [snapshot, valueProps, optionProps] = (0, _useSelect.default)({
@@ -61,8 +60,5 @@ options: defaultOptions,
     onChange,
-    getOptions
+    getOptions,
+    allowEmpty: !!placeholder
   });
-  const {
-    options
-  } = snapshot;
-  const flatOptions = (0, _react.useMemo)(() => (0, _flattenOptions.default)(options), [options]);
   const classNameFn = (0, _react.useMemo)(() => typeof className === 'string' ? key => {
@@ -79,10 +75,2 @@ if (key === 'container') {
   } : className, [className]);
-  let {
-    displayValue
-  } = snapshot;
-
-  if (!placeholder && !displayValue && flatOptions.length) {
-    displayValue = flatOptions[0].name;
-  }
-
   let wrapperClass = classNameFn('container');
@@ -102,3 +90,3 @@
 
-  let value = displayValue;
+  let value = snapshot.displayValue;
 
@@ -109,2 +97,13 @@ if ((snapshot.focus || multiple) && 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;
+      }
+    }
+  }, [snapshot.focus, selectRef.current, snapshot.value]);
   const valueComp = renderValue ? /*#__PURE__*/_react.default.createElement("div", {
@@ -117,5 +116,3 @@ className: classNameFn('value')
     value: search ? value : null
-  }), _objectSpread({}, snapshot, {
-    displayValue
-  }), classNameFn('input'))) : /*#__PURE__*/_react.default.createElement(_Value.default, {
+  }), snapshot, classNameFn('input'))) : /*#__PURE__*/_react.default.createElement(_Value.default, {
     snapshot: snapshot,
@@ -137,3 +134,4 @@ disabled: disabled,
   }, (!multiple || search) && valueComp, !disabled && (snapshot.focus || multiple) && /*#__PURE__*/_react.default.createElement("div", {
-    className: classNameFn('select')
+    className: classNameFn('select'),
+    ref: selectRef
   }, /*#__PURE__*/_react.default.createElement(_Options.default, {
@@ -140,0 +138,0 @@ options: snapshot.options,

dist/cjs/useSelect.js

@@ -34,3 +34,4 @@ "use strict";
   onChange = () => {},
-  getOptions = null
+  getOptions = null,
+  allowEmpty = true
 }) {
@@ -154,2 +155,4 @@ const ref = (0, _react.useRef)(null);
       setValue(option);
+    } else if (!defaultValue && flatDefaultOptions && !allowEmpty) {
+      setValue(flatDefaultOptions[0]);
     }
@@ -156,0 +159,0 @@ }, [defaultValue]);

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, { useEffect, useRef } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
@@ -27,12 +27,3 @@
 
-  const optionRef = useRef(null);
   const optionClass = [className('option'), selected ? className('is-selected') : false, highlighted ? className('is-highlighted') : false].filter(cls => !!cls).join(' ');
-  useEffect(() => {
-    if (optionRef.current && (selected || highlighted)) {
-      optionRef.current.scrollIntoView({
-        behavior: 'auto',
-        block: 'center'
-      });
-    }
-  }, [optionRef, selected, highlighted]);
 
@@ -51,5 +42,5 @@ const domProps = _objectSpread({}, optionProps, {
   return /*#__PURE__*/React.createElement("li", {
-    ref: optionRef,
     className: className('row'),
     role: "menuitem",
+    "data-value": option.value,
     key: option.value
@@ -56,0 +47,0 @@ }, comp);

dist/esm/Components/Value.js

@@ -26,3 +26,4 @@ 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); }
   autoFocus: autoFocus,
-  value: displayValue
+  value: displayValue,
+  placeholder: placeholder
 })));
@@ -29,0 +30,0 @@

dist/esm/lib/isSelected.js

 export default function isSelected(itemValue, selectedValue) {
-  return Array.isArray(selectedValue) ? selectedValue.findIndex(item => item.value === itemValue.value) >= 0 : selectedValue === itemValue;
+  if (!selectedValue) {
+    return false;
+  }
+
+  return Array.isArray(selectedValue) ? selectedValue.findIndex(item => item.value === itemValue.value) >= 0 : selectedValue.value === itemValue.value;
 }

dist/esm/SelectSearch.js

@@ -7,3 +7,3 @@ 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 React, { forwardRef, useMemo, memo } from 'react';
+import React, { forwardRef, useMemo, memo, createRef, useEffect } from 'react';
 import PropTypes from 'prop-types';
@@ -13,4 +13,3 @@ import useSelect from './useSelect';
 import Options from './Components/Options';
-import FlattenOptions from './lib/flattenOptions';
-import { optionType, valueType } from './types';
+import { optionType } from './types';
 const SelectSearch = forwardRef(({
@@ -33,2 +32,3 @@ value: defaultValue,
 }, ref) => {
+  const selectRef = createRef();
   const [snapshot, valueProps, optionProps] = useSelect({
@@ -42,8 +42,5 @@ options: defaultOptions,
     onChange,
-    getOptions
+    getOptions,
+    allowEmpty: !!placeholder
   });
-  const {
-    options
-  } = snapshot;
-  const flatOptions = useMemo(() => FlattenOptions(options), [options]);
   const classNameFn = useMemo(() => typeof className === 'string' ? key => {
@@ -60,10 +57,2 @@ if (key === 'container') {
   } : className, [className]);
-  let {
-    displayValue
-  } = snapshot;
-
-  if (!placeholder && !displayValue && flatOptions.length) {
-    displayValue = flatOptions[0].name;
-  }
-
   let wrapperClass = classNameFn('container');
@@ -83,3 +72,3 @@
 
-  let value = displayValue;
+  let value = snapshot.displayValue;
 
@@ -90,2 +79,13 @@ if ((snapshot.focus || multiple) && search) {
 
+  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;
+      }
+    }
+  }, [snapshot.focus, selectRef.current, snapshot.value]);
   const valueComp = renderValue ? /*#__PURE__*/React.createElement("div", {
@@ -98,5 +98,3 @@ className: classNameFn('value')
     value: search ? value : null
-  }), _objectSpread({}, snapshot, {
-    displayValue
-  }), classNameFn('input'))) : /*#__PURE__*/React.createElement(Value, {
+  }), snapshot, classNameFn('input'))) : /*#__PURE__*/React.createElement(Value, {
     snapshot: snapshot,
@@ -118,3 +116,4 @@ disabled: disabled,
   }, (!multiple || search) && valueComp, !disabled && (snapshot.focus || multiple) && /*#__PURE__*/React.createElement("div", {
-    className: classNameFn('select')
+    className: classNameFn('select'),
+    ref: selectRef
   }, /*#__PURE__*/React.createElement(Options, {
@@ -121,0 +120,0 @@ options: snapshot.options,

dist/esm/useSelect.js

@@ -17,3 +17,4 @@ import { useReducer, useEffect, useMemo, useState, useRef } from 'react';
   onChange = () => {},
-  getOptions = null
+  getOptions = null,
+  allowEmpty = true
 }) {
@@ -137,2 +138,4 @@ const ref = useRef(null);
       setValue(option);
+    } else if (!defaultValue && flatDefaultOptions && !allowEmpty) {
+      setValue(flatDefaultOptions[0]);
     }
@@ -139,0 +142,0 @@ }, [defaultValue]);

package.json

 {
   "name": "react-select-search",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "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

Worsened metrics

Total package byte prevSize

64541

decreased by-0.88%

Lines of code

1403

decreased by-0.57%

No dependency changes