react-select-search - npm Package Compare versions

Comparing version 2.0.1 to 2.0.2

dist/cjs/highlightReducer.js

@@ -20,10 +20,12 @@ "use strict";
 
-  if (key === 'ArrowDown' && highlighted < options.length - 1) {
+  if (key === 'ArrowDown') {
     newHighlighted = highlighted + 1;
-  } else if (key === 'ArrowDown' && highlighted === options.length - 1) {
-    newHighlighted = 0;
-  } else if (key === 'ArrowUp' && highlighted > 0) {
+  } else if (key === 'ArrowUp') {
     newHighlighted = highlighted - 1;
-  } else if (key === 'ArrowUp' && highlighted === 0) {
+  }
+
+  if (newHighlighted < 0) {
     newHighlighted = options.length - 1;
+  } else if (newHighlighted > options.length - 1) {
+    newHighlighted = 0;
   }
@@ -30,0 +32,0 @@

dist/cjs/useSelect.js

@@ -132,3 +132,3 @@ "use strict";
     });
-  }, [multiple, onChange]);
+  }, [multiple]);
   var onMouseDown = (0, _react.useCallback)(function (e) {
@@ -258,3 +258,3 @@ if (!closeOnSelect || multiple) {
     }
-  }, [state.changed]);
+  }, [state.changed, onChange]);
   return [{
@@ -261,0 +261,0 @@ value: option,

dist/esm/highlightReducer.js

@@ -17,10 +17,12 @@ export default function highlightReducer(highlighted, value) {
 
-  if (key === 'ArrowDown' && highlighted < options.length - 1) {
+  if (key === 'ArrowDown') {
     newHighlighted = highlighted + 1;
-  } else if (key === 'ArrowDown' && highlighted === options.length - 1) {
-    newHighlighted = 0;
-  } else if (key === 'ArrowUp' && highlighted > 0) {
+  } else if (key === 'ArrowUp') {
     newHighlighted = highlighted - 1;
-  } else if (key === 'ArrowUp' && highlighted === 0) {
+  }
+
+  if (newHighlighted < 0) {
     newHighlighted = options.length - 1;
+  } else if (newHighlighted > options.length - 1) {
+    newHighlighted = 0;
   }
@@ -27,0 +29,0 @@

dist/esm/useSelect.js

@@ -91,3 +91,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; }
     });
-  }, [multiple, onChange]);
+  }, [multiple]);
   const onMouseDown = useCallback(e => {
@@ -206,3 +206,3 @@ if (!closeOnSelect || multiple) {
     }
-  }, [state.changed]);
+  }, [state.changed, onChange]);
   return [{
@@ -209,0 +209,0 @@ value: option,

package.json

 {
   "name": "react-select-search",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Lightweight select component for React",
@@ -71,3 +71,4 @@ "main": "dist/esm/index.js",
     "react-dom": "^16.13.1",
-    "react-test-renderer": "^16.13.1"
+    "react-test-renderer": "^16.13.1",
+    "react-transition-group": "^4.4.1"
   },
@@ -74,0 +75,0 @@ "dependencies": {},

README.md

@@ -24,5 +24,2 @@ <p align="center">
     </a>
-    <a href="https://beerpay.io/tbleckert/react-select-search">
-      <img src="https://beerpay.io/tbleckert/react-select-search/badge.svg?style=flat" />
-    </a>
 </p>
@@ -46,3 +43,3 @@
 
-Live demo can be found here: [http://tbleckert.github.io/react-select-search/](http://tbleckert.github.io/react-select-search/)
+Live demo can be found here: [https://react-select-search.com](https://react-select-search.com)
   
@@ -77,3 +74,3 @@ <img src="https://user-images.githubusercontent.com/263465/71011520-d4ef1e00-20ed-11ea-9fad-b3c952089258.png" alt="Demo" />
 /* Simple example */
-<SelectSearch options={options} defaultValue="sv" name="language" placeholder="Choose your language" />
+<SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" />
 ```
@@ -84,2 +81,6 @@ For examples you can take a look in the [stories](stories) directory.
 
+## Use with SSR
+
+For use with SSR you might need to use the commonjs bundle (react-select-search/dist/cjs). If you want to utilise the example theme ([style.css](style.css)) you need to check if you're build script manipulates class names, for example minifies them. If that's the case, you can use CSS modules to get the class names from the style.css file and apply them using the [className function](#custom-class-names). Example can be seen [here](stories/3-Custom.stories.js#L64) as well as here https://react-select-search.com/?path=/story/custom--css-modules.
+
 ## Headless mode with hooks
@@ -190,3 +191,3 @@
 
-The optionSnapshot is an object that contains the object state: `{ selected: bool, highlighted: bool, disabled: bool }`.
+The optionSnapshot is an object that contains the object state: `{ selected: bool, highlighted: bool }`.
 
@@ -193,0 +194,0 @@ ## Get options

No alert changes

Improved metrics

Total package byte prevSize

78184

increased by0.25%

Lines of code

1556

increased by0.13%

Number of lines in readme file

209

increased by0.48%

Worsened metrics

Dev dependency count

33

increased by3.13%

No dependency changes