react-select-search - npm Package Compare versions

Comparing version 0.10.1 to 1.0.0-rc10

__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

@@ -253,3 +253,4 @@ /** https://gist.github.com/Keeguon/2310008 */
         items: [
-            { name: 'Roboto', value: 'Roboto', 'data-stack': 'Roboto, sans-serif' },
+            { name: 'Roboto', value: 'Roboto', stack: 'Roboto, sans-serif' },
+            { name: 'Helvetica', value: 'Helvetica', stack: 'Helvetica, sans-serif' },
         ],
@@ -261,3 +262,3 @@ },
         items: [
-            { name: 'Playfair Display', value: 'Playfair Display', 'data-stack': '"Playfair Display", serif' },
+            { name: 'Playfair Display', value: 'Playfair Display', stack: '"Playfair Display", serif' },
         ],
@@ -269,4 +270,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' },
         ],
@@ -278,3 +279,3 @@ },
         items: [
-            { name: 'VT323', value: 'VT323', 'data-stack': 'VT323, monospace' },
+            { name: 'VT323', value: 'VT323', stack: 'VT323, monospace' },
         ],
@@ -287,3 +288,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' },
@@ -306,2 +307,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,11 @@ <SelectSearch
                     multiple
-                    value={this.state.friends_search}
-                    height={172}
+                    className="select-search-box select-search-box--friends select-search-box--multiple"
+                    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 +114,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-rc10",
+  "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,41 @@ "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",
-    "css-loader": "^0.28.9",
-    "enzyme": "^3.8.0",
-    "enzyme-adapter-react-16": "^1.9.1",
+    "babel-loader": "^8.0.6",
+    "browser-env": "^3.2.6",
+    "coveralls": "^3.0.7",
+    "css-loader": "^3.2.0",
+    "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",
+    "fuse.js": "^3.4.5",
+    "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>
@@ -22,2 +22,5 @@ <a href="https://www.npmjs.com/package/react-select-search">
     </a>
+    <a href="https://bundlephobia.com/result?p=react-select-search@next">
+      <img src="https://badgen.net/bundlephobia/minzip/react-select-search@next" />
+    </a>
     <a href="https://beerpay.io/tbleckert/react-select-search">
@@ -29,11 +32,14 @@ <img src="https://beerpay.io/tbleckert/react-select-search/badge.svg?style=flat" />
 ## Features
-
+* Lightweight, with zero dependencies*
+* 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
 
+_*One optional dependency required for built-in fuzzy search_
+
 ## Demo
@@ -45,6 +51,2 @@
 
-## Known issues
-
-* Weird tab behaviour in some places in Safari
-
 ## How to use
@@ -55,3 +57,3 @@
 ```javascript
-import SelectSearch from 'react-select-search'
+import SelectSearch from 'react-select-search';
 
@@ -75,62 +77,77 @@ /**
 /* 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
 
+Below is all the available options you can pass to the component. Options without defaults are required.
+
+| 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. |
+
+## 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
 {
-    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
-    }
+    main: 'select',
+    variant: 'multiple',
+    focus: 'has-focus',
+    disabled: 'is-disabled',
+    searching: 'is-searching',
+    value: 'select-value',
+    input: 'select-input',
+    select: 'select-select',
+    options: 'select-options',
+    row: 'select-row',
+    option: 'select-option',
+    optionSelected: 'is-selected',
+    optionDisabled: 'is-disabled',
+    optionHighlighted: 'is-highlighted',
+    group: 'select-group',
+    groupHeader: 'select-group-header',
 }
 ```
 
-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)
+## Custom renderers

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

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

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

200407

increased by79.4%

Number of package files

83

increased by118.42%

Lines of code

4456

increased by73.25%

Number of lines in readme file

148

increased by12.98%

Worsened metrics

Number of low supply chain risk alerts

2

increased byInfinity%

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)