react-select-search - npm Package Compare versions

Comparing version 0.10.1 to 1.0.0

__tests__/data/index.js

@@ -249,2 +249,6 @@ export const countries = [
     {
+        name: 'Helvetica',
+        value: 'helvetica',
+    },
+    {
         type: 'group',
@@ -292,2 +296,2 @@ name: 'Sans serif',
     { name: 'Maria Waters', value: 'maria.waters', photo: 'https://randomuser.me/api/portraits/women/82.jpg' },
-];
+];

__tests__/FlattenOptions.test.js

@@ -1,4 +0,2 @@
-import React from 'react';
-import Enzyme, { mount } from 'enzyme';
-import FlattenOptions from '../src/FlattenOptions';
+import FlattenOptions from '../src/lib/FlattenOptions';
 
@@ -14,17 +12,28 @@ describe('Unit test for FlattenOptions function', () => {
                     "value": "Monoton",
-                    "data-stack": "Monoton, cursive"
                 },
-                {
-                    "name": "Gloria Hallelujah",
-                    "value": "Gloria Hallelujah",
-                    "data-stack": "\"Gloria Hallelujah\", cursive"
-                }
             ]
-        }
+        },
+        {
+            "name": "Gloria Hallelujah",
+            "value": "Gloria Hallelujah",
+        },
     ];
+
     const flattenOptions = FlattenOptions(groupedOptions);
 
-    test('first element of group options must have a non-empty property "items"', () => {
+    test('Has correct items', () => {
         expect(flattenOptions).toHaveLength(2);
     });
-});
+
+    test('First item should be a group', () => {
+        expect('groupId' in flattenOptions[0]).toEqual(true);
+    });
+
+    test('Second item should not be a group', () => {
+        expect('groupId' in flattenOptions[1]).toEqual(false);
+    });
+
+    test('Returns empty array if unexpected input', () => {
+        expect(FlattenOptions('foo')).toStrictEqual([]);
+    });
+});

__tests__/GroupOptions.test.js

@@ -1,4 +0,2 @@
-import React from 'react';
-import Enzyme, { mount } from 'enzyme';
-import GroupOptions from '../src/GroupOptions';
+import GroupOptions from '../src/lib/GroupOptions';
 
@@ -9,4 +7,3 @@ describe('Unit test for GroupOptions function', () => {
             "name": "Monoton",
-            "value": "Monoton",
-            "data-stack": "Monoton, cursive",
+            "value": "monoton",
             "groupId": "v6kufti7z",
@@ -16,8 +13,11 @@ "groupName": "Cursive"
         {
+            "name": "Helvetica",
+            "value": "helvetica",
+        },
+        {
             "name": "Gloria Hallelujah",
-            "value": "Gloria Hallelujah",
-            "data-stack": "\"Gloria Hallelujah\", cursive",
+            "value": "gloria",
             "groupId": "v6kufti7z",
             "groupName": "Cursive"
-        }
+        },
     ];
@@ -27,5 +27,18 @@
 
-    test('first element of group options must have a non-empty property "items"', () => {
-        expect(groupedOptions[0].items).toHaveLength(2);
+    test('Has correct amount of items', () => {
+        expect(groupedOptions.length).toEqual(2);
     });
-});
+
+    test('First item should be a group', () => {
+        expect(groupedOptions[0].groupId).toEqual('v6kufti7z');
+        expect('items' in groupedOptions[0]).toEqual(true);
+    });
+
+    test('Group should have correct amount of items', () => {
+        expect(groupedOptions[0].items.length).toEqual(2);
+    });
+
+    test('Last item should not be a group', () => {
+        expect('items' in groupedOptions[1]).toEqual(false);
+    });
+});

__tests__/helpers/setup-browser-env.js

@@ -7,1 +7,4 @@ import browserEnv from 'browser-env';
 };
+
+const scrollIntoViewMock = jest.fn();
+global.HTMLElement.prototype.scrollIntoView = scrollIntoViewMock;

example/data/index.js

@@ -249,2 +249,3 @@ /** https://gist.github.com/Keeguon/2310008 */
 export const fontStacks = [
+    { name: 'Helvetica', value: 'Helvetica', stack: 'Helvetica, sans-serif' },
     {
@@ -254,3 +255,3 @@ type: 'group',
         items: [
-            { name: 'Roboto', value: 'Roboto', 'data-stack': 'Roboto, sans-serif' },
+            { name: 'Roboto', value: 'Roboto', stack: 'Roboto, sans-serif' },
         ],
@@ -262,3 +263,3 @@ },
         items: [
-            { name: 'Playfair Display', value: 'Playfair Display', 'data-stack': '"Playfair Display", serif' },
+            { name: 'Playfair Display', value: 'Playfair Display', stack: '"Playfair Display", serif' },
         ],
@@ -270,4 +271,4 @@ },
         items: [
-            { name: 'Monoton', value: 'Monoton', 'data-stack': 'Monoton, cursive' },
-            { name: 'Gloria Hallelujah', value: 'Gloria Hallelujah', 'data-stack': '"Gloria Hallelujah", cursive' },
+            { name: 'Monoton', value: 'Monoton', stack: 'Monoton, cursive' },
+            { name: 'Gloria Hallelujah', value: 'Gloria Hallelujah', stack: '"Gloria Hallelujah", cursive' },
         ],
@@ -279,3 +280,3 @@ },
         items: [
-            { name: 'VT323', value: 'VT323', 'data-stack': 'VT323, monospace' },
+            { name: 'VT323', value: 'VT323', stack: 'VT323, monospace' },
         ],
@@ -288,3 +289,3 @@ },
     { 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' },
@@ -307,2 +308,2 @@ { name: 'Lloyd Fisher', value: 'lloyd.fisher', photo: 'https://randomuser.me/api/portraits/men/34.jpg' },
     { name: 'Yellow', value: 'yellow' },
-];
+];

example/index.jsx

 import React from 'react';
 import { render } from 'react-dom';
+import { fontStacks, countries, friends } from './data';
+import '../style.css';
 import SelectSearch from '../src';
-import '../style.css';
-import { countries, fontStacks, friends, colors } from './data';
 
-function renderFontValue(label, option) {
-    if (!option) {
-        return label;
-    }
+function renderFriend(props, option) {
+    const imgStyle = {
+        borderRadius: '50%',
+        verticalAlign: 'middle',
+        marginRight: 10,
+    };
 
-    return <span style={{ fontFamily: option['data-stack'] }}>{label}</span>;
+    return (
+        <button {...props} type="button">
+            <span><img alt="" style={imgStyle} width="32" height="32" src={option.photo} /><span>{option.name}</span></span>
+        </button>
+    );
 }
 
-function renderFontOption(option) {
-    if (!('data-stack' in option)) {
-        return option.name;
-    }
-
+function renderFontValue(valueProps, ref, props) {
     const style = {
-        fontFamily: option['data-stack'],
+        fontFamily: (props && 'stack' in props) ? props.stack : null,
     };
 
-    return <span style={style}>{option.name}</span>;
+    return (
+        <input ref={ref} {...valueProps} style={style} />
+    );
 }
 
-function renderFriend(option) {
-    const imgStyle = {
-        borderRadius: '50%',
-        verticalAlign: 'middle',
-        marginRight: 10,
-    };
-
-    return (<span><img alt="" style={imgStyle} width="40" height="40" src={option.photo} /><span>{option.name}</span></span>);
+function renderFontOption(props, { name, stack }) {
+    return (
+        <button {...props} type="button">
+            <span style={{ fontFamily: stack }}>{name}</span>
+        </button>
+    );
 }
 
-function renderColors(option) {
-    return (<span><span>{option.name}</span></span>);
-}
+class App extends React.PureComponent {
+    constructor(props) {
+        super(props);
 
-class App extends React.Component {
+        this.ref = React.createRef();
+    }
+
     state = {
+        disabled: false,
         font: 'Playfair Display',
         country: 'SE',
         friends: [],
-        colors: ['red', 'purple']
     };
@@ -54,25 +58,42 @@
             friends: [],
-            colors: []
         });
     };
 
+    disable = () => {
+        this.setState({
+            disabled: !this.state.disabled,
+        });
+    };
+
+    updateFont = (value) => this.setState({ font: value });
+    updateCountry = (value) => this.setState({ country: value });
+    updateFriends = (value) => this.setState({ friends: value });
+
     render() {
+        const text = (this.state.disabled) ? 'Enable' : 'Disable';
+
         return (
             <div>
-                <button type="button" className="clear" onClick={this.clear}>Clear values</button>
+                <div className="test-btns">
+                    <button type="button" className="clear" onClick={this.clear}>Clear values</button>
+                    <button type="button" className="clear" onClick={this.disable}>{text}</button>
+                </div>
                 <SelectSearch
-                    name="font"
+                    key="fonts"
+                    ref={this.ref}
+                    options={fontStacks}
                     value={this.state.font}
+                    onChange={this.updateFont}
+                    renderValue={renderFontValue}
                     renderOption={renderFontOption}
-                    search={false}
-                    renderValue={renderFontValue}
-                    options={fontStacks}
-                    placeholder="Choose font"
+                    disabled={this.state.disabled}
                 />
                 <SelectSearch
-                    name="country"
-                    mode="input"
+                    key="countries"
                     value={this.state.country}
                     options={countries}
+                    onChange={this.updateCountry}
                     placeholder="Your country"
+                    search
+                    disabled={this.state.disabled}
                 />
@@ -82,17 +103,10 @@ <SelectSearch
                     multiple
-                    value={this.state.friends_search}
-                    height={172}
+                    value={this.state.friends}
+                    onChange={this.updateFriends}
                     options={friends}
                     placeholder="Search friends"
                     renderOption={renderFriend}
+                    disabled={this.state.disabled}
+                    search
                 />
-                <SelectSearch
-                    name="colors"
-                    multiple
-                    search={false}
-                    value={this.state.colors}
-                    height={172}
-                    options={colors}
-                    renderOption={renderColors}
-                />
             </div>
@@ -99,0 +113,0 @@ );

jest.config.js

 module.exports = {
-  collectCoverageFrom: ["src/*.{js,jsx}"],
+  collectCoverageFrom: ["src/**/{!(Context.js|index.jsx),}.{js,jsx}"],
   testMatch: ["<rootDir>/__tests__/*.test.{js,jsx}"],
-};
+};

package.json

 {
   "name": "react-select-search",
-  "version": "0.10.1",
-  "description": "React powered selectbox with filter",
-  "main": "dist/index.js",
+  "version": "1.0.0",
+  "description": "React powered selectbox with search",
+  "main": "dist/esm/index.js",
   "scripts": {
     "lint": "eslint src/index.js",
     "test": "jest",
-    "test:watch": "yarn test --watch",
-    "test:coverage": "yarn test --coverage",
-    "coveralls": "yarn test:coverage && cat ./coverage/lcov.info | coveralls",
-    "dev": "webpack-dev-server --config example/webpack.config.js",
-    "build": "NODE_ENV=production babel src --out-dir dist"
+    "test:watch": "npm test -- --watch",
+    "test:coverage": "npm test -- --coverage --silent",
+    "coveralls": "npm run test:coverage && cat ./coverage/lcov.info | coveralls",
+    "start": "webpack-dev-server --config example/webpack.config.js",
+    "build": "npx babel --config-file=./babel.config.esm.js src --out-dir dist/esm | npx babel --config-file=./babel.config.js src --out-dir dist/cjs"
   },
@@ -33,40 +33,40 @@ "repository": {
   "peerDependencies": {
-    "react": "^16.10.1",
-    "react-dom": "^16.10.1"
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4",
+    "prop-types": "^15.6.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.0.0-beta.39",
-    "@babel/core": "^7.0.0-beta.40",
-    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.39",
-    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.40",
-    "@babel/preset-env": "^7.0.0-beta.39",
-    "@babel/preset-react": "^7.0.0-beta.39",
-    "@babel/register": "^7.0.0-beta.40",
+    "@babel/cli": "^7.6.4",
+    "@babel/core": "^7.6.4",
+    "@babel/plugin-proposal-class-properties": "^7.5.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
+    "@babel/preset-env": "^7.6.3",
+    "@babel/preset-react": "^7.6.3",
+    "@babel/register": "^7.6.2",
     "babel-eslint": "^8.2.1",
-    "babel-loader": "^8.0.0-beta.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
-    "browser-env": "^3.2.5",
-    "coveralls": "^3.0.2",
+    "babel-loader": "^8.0.6",
+    "browser-env": "^3.2.6",
+    "coveralls": "^3.0.7",
     "css-loader": "^0.28.9",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.9.1",
+    "enzyme": "^3.10.0",
+    "enzyme-adapter-react-16": "^1.15.1",
     "eslint": "^4.11.0",
     "eslint-config-airbnb": "^16.1.0",
-    "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-react": "^7.6.1",
-    "gulp": "^3.9.1",
-    "gulp-babel": "^6.1.2",
-    "gulp-rename": "^1.2.2",
-    "html-webpack-plugin": "^2.30.1",
-    "jest": "^24.1.0",
-    "prop-types": "^15.6.2",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.16.0",
+    "html-webpack-plugin": "^3.2.0",
+    "jest": "^24.9.0",
+    "prop-types": "^15.7.2",
+    "react": "^16.11.0",
+    "react-dom": "^16.11.0",
     "style-loader": "^0.20.1",
-    "webpack": "^3.10.0",
-    "webpack-dev-server": "^2.11.1"
+    "webpack": "^4.41.2",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.9.0"
   },
-  "dependencies": {
-    "fuse.js": "^3.2.0",
-    "react-onclickoutside": "^6.7.1"
+  "dependencies": {},
+  "optionalDependencies": {
+    "fuse.js": "^3.4.5"
   }
 }

README.md

@@ -7,6 +7,6 @@ <p align="center">
     <a href="https://www.npmjs.com/package/react-select-search">
-        <img src="https://travis-ci.org/tbleckert/react-select-search.svg?branch=master" style="max-width:100%;" />
+        <img src="https://travis-ci.org/tbleckert/react-select-search.svg?branch=next" style="max-width:100%;" />
     </a>
-    <a href='https://coveralls.io/github/tbleckert/react-select-search?branch=master'>
-        <img src='https://coveralls.io/repos/github/tbleckert/react-select-search/badge.svg?branch=master' alt='Coverage Status' />
+    <a href='https://coveralls.io/github/tbleckert/react-select-search?branch=next'>
+        <img src='https://coveralls.io/repos/github/tbleckert/react-select-search/badge.svg?branch=next' alt='Coverage Status' />
     </a>
@@ -28,9 +28,9 @@ <a href="https://www.npmjs.com/package/react-select-search">
 ## Features
-
+* Full test coverage
+* Accessible
 * Basic HTML select functionality, including multiple
 * Search/filter options
-* Custom option rendering
+* Apply renderers to change markup and behavior
 * Keyboard support
 * Group options with group names, you can search group names
-* Events for everything
 * Fully stylable
@@ -44,6 +44,2 @@
 
-## Known issues
-
-* Weird tab behaviour in some places in Safari
-
 ## How to use
@@ -54,3 +50,3 @@
 ```javascript
-import SelectSearch from 'react-select-search'
+import SelectSearch from 'react-select-search';
 
@@ -74,62 +70,29 @@ /**
 /* Simple example */
-<SelectSearch options={options} value="sv" name="language" placeholder="Choose your language" />
+<SelectSearch options={options} defaultValue="sv" name="language" placeholder="Choose your language" />
 ```
+For examples you can take a look at the [example](example/index.jsx) file.
 
-Below is a full list of properties and defaults (displayed in React style).
+You will also need some CSS to make it look right. Example theme can be found in [style.css](style.css)
 
-```javascript
-{
-    options: PropTypes.array.isRequired,
-    className: PropTypes.string,
-    search: PropTypes.bool,
-    placeholder: PropTypes.string,
-    multiple: PropTypes.bool,
-    height: PropTypes.number,
-    autoComplete: PropTypes.oneOf(['on', 'off']),
-    name: PropTypes.string,
-    autofocus: PropTypes.bool,
-    fuse: PropTypes.object,
-    onChange: PropTypes.func,
-    onHighlight: PropTypes.func,
-    onMount: PropTypes.func,
-    onBlur: PropTypes.func,
-    onFocus: PropTypes.func,
-    renderOption: PropTypes.func,
-    renderValue: PropTypes.func,
-    renderGroupHeader: PropTypes.func,
-    value: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.array
-    ])
-}
+## Configuration
 
-{
-    className: 'select-search-box',
-    search: true,
-    value: '',
-    placeholder: null,
-    multiple: false,
-    height: 200,
-    autoComplete: 'on',
-    name: null,
-    autofocus: false,
-    onHighlight: (value, state, props) => {},
-    onMount: (value, state, props) => {},
-    onBlur: (value, state, props) => {},
-    onFocus: (value, state, props) => {},
-    onChange: (value, state, props) => {},
-    renderOption: (option, state, props) => option.name,
-    renderValue: (label, valueObj, state, props) => label,
-    renderGroupHeader: name => name,
-    fuse: {
-        keys: ['name'],
-        threshold: 0.3
-    }
-}
-```
+Below is all the available options you can pass to the component. Options without defaults are required.
 
-The height property is the minimum height (max is the remaining space below the selectbox down to the browser window end) of the dropdown if multiple is false, otherwise it's the fixed height.
-
-For examples you can take a look at the [bootstrap.js](https://github.com/tbleckert/react-select-search/blob/gh-pages/bootstrap.js) file on the gh-pages branch.
-
-You will also need some CSS to make it look right. Example theme can be found in [style.css](style.css)
+| Name | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| options | array | | Se the [options documentation](#the-options-object) below |
+| defaultValue | string, array | undefined | Set only a defaultValue for [uncontrolled](#controlled-component) usage. The value should be an array if multiple mode. |
+| value | string, array | undefined | Use together with `onChange` for [controlled](#controlled-component) usage. The value should be an array if multiple mode. |
+| multiple | boolean | false | Set to true if you want to allow multiple selected options. |
+| search | boolean | false | Set to true to enable search functionality |
+| disabled | boolean | false | Disables all functionality |
+| placeholder | string | empty string | Displayed if no option is selected and/or when search field is focused with empty value. |
+| autoComplete | string, on/off | off | Disables/Enables autoComplete functionality in search field. |
+| autoFocus | boolean | false | Autofocus on select |
+| fuse | object, boolean | true | Use fuse.js to apply fuzzy search on search. Set to true to use default options or pass a fuse.js config option. If `search` is enabled and no `filterOptions` callback is passed, this will be set to `true` automatically. |
+| className | string, object | select-search-box | Set a base class string or pass in a className object for complete controll. Se [custom classNames](#custom-classnames) for more. |
+| onChange | function | null | Function to receive and handle value changes. Use together with the `value` prop for [controlled](#controlled-component) component usage. |
+| renderOption | function | null | Function that renders the options. See [custom renderers](#custom-renderers) for more. |
+| renderValue | function | null | Function that renders the value/search field. See [custom renderers](#custom-renderers) for more. |
+| renderGroupHeader | function | null | Function that renders the group header. See [custom renderers](#custom-renderers) for more. |
+| filterOptions | function | null | Filter the options list. See [filter options](#filter-options) for more. |

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

189191

increased by69.36%

Dev dependency count

28

decreased by-3.45%

Number of package files

81

increased by113.16%

Lines of code

4329

increased by68.31%

Number of low quality alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

94

decreased by-28.24%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedfuse.js@^3.2.0

• - Removedreact-onclickoutside@^6.7.1

• - Removedreact-onclickoutside@6.13.1(transitive)