react-select-search - npm Package Compare versions

Comparing version 1.0.0-rc6 to 1.0.0-rc7

__tests__/option.test.jsx

@@ -51,3 +51,3 @@ import React from 'react';
 
-        button.simulate('click');
+        button.simulate('mouseDown');
 
@@ -67,3 +67,3 @@ expect(mockCallback.mock.calls.length).toBe(1);
 
-        button.simulate('click');
+        button.simulate('mouseDown');
 
@@ -70,0 +70,0 @@ expect(mockCallback.mock.calls.length).toBe(0);

__tests__/select.test.jsx

@@ -112,3 +112,3 @@ import React from 'react';
 
-            wrapper.find(Option).at(10).find('button').simulate('click');
+            wrapper.find(Option).at(10).find('button').simulate('mouseDown');
 
@@ -120,3 +120,3 @@ expect(wrapper.state('value')).toBe(countries[10].value);
             wrapper.find('input').simulate('focus');
-            wrapper.find(Option).at(11).find('button').simulate('click');
+            wrapper.find(Option).at(11).find('button').simulate('mouseDown');
 
@@ -152,3 +152,3 @@ expect(wrapper.state('value')).toBe(countries[11].value);
 
-            wrapper.find(Option).at(10).find('button').simulate('click');
+            wrapper.find(Option).at(10).find('button').simulate('mouseDown');
 
@@ -248,7 +248,7 @@ expect(wrapper.state('focus')).toBe(true);
 
-            wrapper.find(Option).at(11).find('button').simulate('click');
+            wrapper.find(Option).at(11).find('button').simulate('mouseDown');
             expect(wrapper.state('value')).toStrictEqual([countries[11].value]);
             expect(wrapper.find(`.${className}__option.is-selected`).length).toBe(1);
 
-            wrapper.find(Option).at(11).find('button').simulate('click');
+            wrapper.find(Option).at(11).find('button').simulate('mouseDown');
             expect(wrapper.state('value')).toStrictEqual([]);
@@ -267,7 +267,7 @@ expect(wrapper.find(`.${className}__option.is-selected`).length).toBe(0);
 
-            wrapper.find(Option).at(11).find('button').simulate('click');
+            wrapper.find(Option).at(11).find('button').simulate('mouseDown');
             expect(wrapper.state('value')).toStrictEqual([countries[11].value]);
             expect(wrapper.find(`.${className}__option.is-selected`).length).toBe(1);
 
-            wrapper.find(Option).at(12).find('button').simulate('click');
+            wrapper.find(Option).at(12).find('button').simulate('mouseDown');
             expect(wrapper.state('value')).toStrictEqual([countries[11].value, countries[12].value]);
@@ -463,3 +463,3 @@ expect(wrapper.find(`.${className}__option.is-selected`).length).toBe(2);
             wrapper.update();
-            wrapper.find(Option).at(11).find('button').simulate('click');
+            wrapper.find(Option).at(11).find('button').simulate('mouseDown');
 
@@ -466,0 +466,0 @@ expect(onChange.mock.calls.length).toBe(1);

__tests__/unit.test.jsx

@@ -50,17 +50,2 @@ import React from 'react';
 
-    test('onBlur shouldn\'t trigger handleBlur if related target is within component', () => {
-        const wrapper = mount(<SelectSearch className={className} options={countries} />);
-        const spy = jest.spyOn(wrapper.instance(), 'handleBlur');
-
-        wrapper.instance().onBlur({ relatedTarget: null });
-        expect(spy.mock.calls.length).toBe(1);
-
-        wrapper.instance().onBlur({ relatedTarget: document.body });
-        expect(spy.mock.calls.length).toBe(2);
-
-        wrapper.instance().onBlur({ relatedTarget: wrapper.find('input').at(0).instance() });
-
-        expect(spy.mock.calls.length).toBe(2);
-    });
-
     test('onKeyPress should only trigger onChange if correct key', () => {
@@ -67,0 +52,0 @@ const wrapper = mount(<SelectSearch className={className} options={countries} />);

dist/cjs/Components/Option.js

@@ -125,3 +125,3 @@ "use strict";
         className: optionClass.join(' '),
-        onClick: onChange,
+        onMouseDown: onChange,
         tabIndex: -1,
@@ -128,0 +128,0 @@ role: 'menuitem',

dist/cjs/SelectSearch.js

@@ -86,9 +86,4 @@ "use strict";
 
-    _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      var relatedTarget = e.relatedTarget;
-      var parent = !relatedTarget ? null : relatedTarget.closest(".".concat(_this.theme.classes.main));
-
-      if (!parent || parent !== _this.parentRef.current) {
-        _this.handleBlur();
-      }
+    _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
+      _this.handleBlur();
     });
@@ -95,0 +90,0 @@

dist/esm/Components/Option.js

@@ -109,3 +109,3 @@ function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
         className: optionClass.join(' '),
-        onClick: onChange,
+        onMouseDown: onChange,
         tabIndex: -1,
@@ -112,0 +112,0 @@ role: 'menuitem',

dist/esm/SelectSearch.js

@@ -66,9 +66,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); }
 
-    _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
-      var relatedTarget = e.relatedTarget;
-      var parent = !relatedTarget ? null : relatedTarget.closest(".".concat(_this.theme.classes.main));
-
-      if (!parent || parent !== _this.parentRef.current) {
-        _this.handleBlur();
-      }
+    _defineProperty(_assertThisInitialized(_this), "onBlur", function () {
+      _this.handleBlur();
     });
@@ -75,0 +70,0 @@

package.json

 {
   "name": "react-select-search",
-  "version": "1.0.0-rc6",
+  "version": "1.0.0-rc7",
   "description": "React powered selectbox with search",
@@ -5,0 +5,0 @@ "main": "dist/esm/index.js",

README.md

@@ -100,1 +100,42 @@ <p align="center">
 | filterOptions | function | null | Filter the options list. See [filter options](#filter-options) for more. |
+
+## The options object
+
+The options object can contain any properties and values you like. The only required one is `name`.
+
+| Property | Type | Description | Required |
+| -------- | ---- | ----------- | -------- |
+| name     | string | The name of the option | Yes |
+| value    | string | The value of the option | Yes, if the type is not "group" |
+| type     | string | If you set the type to "group" you can add an array of options that will be grouped | No |
+| items    | array | Array of option objects that will be used if the type is set to "group" | Yes, if `type` is set to "group" |
+| disabled | boolean | Set to `true` to disable this option | No |
+
+## Controlled component
+
+You can decide if you want full control of the state or if you want it handled automatically.
+If you decide to not control it, the component will not be updated if you change the value.
+
+To control the component you need to set an `onChange` handler and keep the `value` attribute up to date yourself.
+If you don't want to control it, you can omit the `onChange` handler and set `defaultValue` instead of `value`.
+
+## Custom class names
+
+If you set a string as the `className` attribute value, the component will use that as a base and BEMify the class names for all elements.
+If you want to fully control the class names you can pass on object with the following shape:
+
+```js
+{
+    main: 'select',
+    value: 'select-value',
+    input: 'select-input',
+    select: 'select-select',
+    options: 'select-options',
+    row: 'select-row',
+    option: 'select-option',
+    group: 'select-group',
+    groupHeader: 'select-group-header',
+}
+```
+
+## Custom renderers

src/Components/Option.jsx

@@ -79,3 +79,3 @@ import React, { createRef } from 'react';
             className: optionClass.join(' '),
-            onClick: onChange,
+            onMouseDown: onChange,
             tabIndex: -1,
@@ -82,0 +82,0 @@ role: 'menuitem',

src/SelectSearch.jsx

@@ -128,10 +128,4 @@ import React from 'react';
 
-    onBlur = (e) => {
-        const { relatedTarget } = e;
-
-        const parent = (!relatedTarget) ? null : relatedTarget.closest(`.${this.theme.classes.main}`);
-
-        if (!parent || parent !== this.parentRef.current) {
-            this.handleBlur();
-        }
+    onBlur = () => {
+        this.handleBlur();
     };
@@ -138,0 +132,0 @@

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

197451

increased by1.05%

Number of lines in readme file

141

increased by41%

Worsened metrics

Lines of code

4423

decreased by-0.49%

No dependency changes