Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all

Harsh Zalavadiya

Last update: Dec 24, 2022

Overview

react-multi-select-component

Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all

✨ Features

🕶 Zero Dependency
🍃 Lightweight (<5KB)
💅 Themeable
✌ Written w/ TypeScript

🔧 Installation

npm i react-multi-select-component    # npm
yarn add react-multi-select-component # yarn

📦 Example

{ const options = [ { label: "Grapes 🍇", value: "grapes" }, { label: "Mango 🥭", value: "mango" }, { label: "Strawberry 🍓", value: "strawberry", disabled: true }, { label: "Watermelon 🍉", value: "watermelon" }, { label: "Pear 🍐", value: "pear" }, { label: "Apple 🍎", value: "apple" }, { label: "Tangerine 🍊", value: "tangerine" }, { label: "Pineapple 🍍", value: "pineapple" }, { label: "Peach 🍑", value: "peach" }, ]; const [selected, setSelected] = useState([]); return (

Select Fruits

{JSON.stringify(selected)}

); }; export default Example; ">

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";

const Example = () => {
  const options = [
    { label: "Grapes 🍇", value: "grapes" },
    { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry", disabled: true },
    { label: "Watermelon 🍉", value: "watermelon" },
    { label: "Pear 🍐", value: "pear" },
    { label: "Apple 🍎", value: "apple" },
    { label: "Tangerine 🍊", value: "tangerine" },
    { label: "Pineapple 🍍", value: "pineapple" },
    { label: "Peach 🍑", value: "peach" },
  ];

  const [selected, setSelected] = useState([]);

  return (
    <div>
      <h1>Select Fruits</h1>
      <pre>{JSON.stringify(selected)}</pre>
      <MultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        labelledBy="Select"
      />
    </div>
  );
};

export default Example;

👀 Props

Prop	Description	Type	Default
`labelledBy`	value for `aria-labelledby`	`string`
`options`	options for dropdown	`[{label, value, disabled}]`
`value`	pre-selected rows	`[{label, value}]`	`[]`
`hasSelectAll`	toggle 'Select All' option	`boolean`	`true`
`isLoading`	show spinner on select	`boolean`	`false`
`shouldToggleOnHover`	toggle dropdown on hover option	`boolean`	`false`
`overrideStrings`	i18n docs	`object`
`onChange`	onChange callback	`function`
`disabled`	disable dropdown	`boolean`	`false`
`selectAllLabel`	select all label	`string`
`disableSearch`	hide search textbox	`boolean`	`false`
`filterOptions`	custom filter options (async supported) docs	`function`	Fuzzy Search
`className`	class name for parent component	`string`	`multi-select`
`valueRenderer`	custom dropdown header docs	`function`
`ItemRenderer`	custom dropdown option docs	`function`
`ClearIcon`	Custom Clear Icon for Search	`ReactNode`
`ArrowRenderer`	Custom Arrow Icon for Dropdown	`ReactNode`
`debounceDuration`	debounce duraion for Search	`number`	`300`
`ClearSelectedIcon`	Custom Clear Icon for Selected Items	`ReactNode`

🔍 Custom filter logic

By default this component uses a fuzzy search algorithm to filter options but also allows you to opt-out and use your custom logic if you want to below is the example doing just case insensitive search

value && value.match(re)); } ">

export function filterOptions(options, filter) {
  if (!filter) {
    return options;
  }
  const re = new RegExp(filter, "i");
  return options.filter(({ value }) => value && value.match(re));
}

🌐 Internationalization

You can easily Internationalize this component by passing prop overrideStrings so that UI strings can be presented in a different language

default values for overrideStrings are as below

{
  "allItemsAreSelected": "All items are selected.",
  "clearSearch": "Clear Search",
  "noOptions": "No options",
  "search": "Search",
  "selectAll": "Select All",
  "selectSomeItems": "Select..."
}

?? Custom Value Renderer

Optionally customise value renderer view by passing valueRenderer prop

const customValueRenderer = (selected, _options) => {
  return selected.length
    ? selected.map(({ label }) => "✔️ " + label)
    : "😶 No Items Selected";
};

🎛 Custom Item Renderer

Optionally customise dropdown item by passing ItemRenderer prop

Default Item Renderer

💅 Themeing

You can override CSS variables to customize the appearance

.rmsc {
  --rmsc-main: #4285f4;
  --rmsc-hover: #f1f3f5;
  --rmsc-selected: #e2e6ea;
  --rmsc-border: #ccc;
  --rmsc-gray: #aaa;
  --rmsc-bg: #fff;
  --rmsc-p: 10px; /* Spacing */
  --rmsc-radius: 4px; /* Radius */
  --rmsc-h: 38px; /* Height */
}

use !important if CSS variables are not getting applied

📝 Changelog

For every major or minor release changelog/migration-guide will be available in releases

🤠 Credits

This project gets inspiration and several pieces of logical code from react-multiple-select
TypeScript
TSDX

📜 License

MIT © harshzalavadiya

Comments

Create option should be selectable without use of mouse

The major blocker that I have with this library is that I cannot select the "create" (item) selection without using my mouse. Nor is it selectable in the tab sequence.

It would be 100% amazing if there was an easy way to select the create option. Arrow keys would be great, but the "create" option should probably be near the top of the list in that case. As an alternative, pressing a certain key to create a new option would be nice, like tab perhaps. I considered comma, but it is unfortunate in cases where a comma is needed in the text of the selection. Maybe an even further future consideration, but this sort of configuration could be exposed via the api.
enhancement

opened by MegaKeegMan 11
Bug: Since 3.0.4 expanding the drop down clears the contents.

I believe this may be linked to the addition of a clear button.

In Chrome this now wipes the selection just by clicking anywhere to expand the drop down.
bug Hacktoberfest

opened by Adam-STaC-Solutions 10

Cannot apply custom Icon

(screen capture above is normal case)

(screen capture above is error case)

I tried to apply custom Clear icon by using ClearSelectedIcon. But it doesn't work in my environment. Anytime I use ClearSelectedIcon, clear <button> gets empty. (like screen capture above) It would be so thankful if somebody could help me out. Here's my code below.

  const clearBtnRenderer = () => (
    <>
      // I tried several tags(img tag, text), but nothing worked
      <svg
        width="24"
        height="24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        className="dropdown-search-clear-icon gray"
      >
        <line x1="16" y1="8" x2="8" y2="16"></line>
        <line x1="8" y1="8" x2="16" y2="16"></line>
      </svg>
    <>
  );

  return (
    <div className="a_search_multiselect_box">
      <MultiSelect
        options={optionList}
        value={selected}
        onChange={handleChange}
        ClearSelectedIcon={clearBtnRenderer}
      />
    </div>
  );
};

I refered to storybook below. react-multi-select Storybook : custom arrow

opened by Youn-ha 9

Feature request: Select all even when filter is active

Hi,

thanks for your great component. Could be possible to show Select all checkbox even when search string is entered? It's useful when you want to quickly select for example items with some pre/postfix.
enhancement Hacktoberfest hacktoberfest-accepted

opened by JiriSko 8
New field feature enable in multi select when search text doesn't match any option
When search criteria does not match any option, a feature can be enabled that will show a button allowing to handle a given function. In the Storybook's example the function passed will set a new state with the given item.

In case enableNewFields is passed as prop, a button will render instead of the No option list item.

onNewField should be given a function that will be called with the search text as parameter.

Might be interesting to even allow customization of the icon and the label.
opened by jorge-cob 7
TypeError: Cannot read property 'length' of undefined

Getting below error on react v17.0.1

const [locs, setLocs] = useState([{ label: "Branch 1", value: "1" }, { label: "Branch 2", value: "2" }]);

<MultiSelect disableSearch={true} options={locs} value={[locs[0]]} onChange={(e: any) => {}} labelledBy="Select Location" />

opened by gagandeep-s 7
Reset to default value when the 'clear-selected-button' button is pressed?

IDK if this is already a feature, but from what I read in the document I don't see it.

Specifically: Right now, the default selection is 'All values are selected'. If nothing was selected, then there's nothing on the page, so it's not very interesting. Now, If the user has a few, but not all options selected, and hits the clear-options X button, it deselects everything. Is there a way to make it reselect everything?

I'm using gatsby/react.

I tried using the effect/event listener route but so far no dice. Maybe I'm missing something?

Thanks, Z
enhancement

opened by zanewolf 5

Component Options do not update when the state changes

Describe the bug: When options state is updated, the dropdown do not show the new value.

To Reproduce:

import React, { useState } from "react";
import MultiSelect from "react-multi-select-component";
import "./styles.css";
export default function App() {
  const [selected, setSelected] = useState([]);
  const [options, setOptions] = useState([
    { label: "Grapes 🍇", value: "grapes" }
  ]);
  const AddOption = () => {
    setOptions([ { label: "Mango 🥭", value: "mango" },
    { label: "Strawberry 🍓", value: "strawberry" }
  ]);
  };
  return (
    <div>
      <h1>Select Fruits</h1>
      <p>{JSON.stringify(options)}</p>
      <MultiSelect
        options={options}
        value={selected}
        onChange={setSelected}
        labelledBy={"Select"}
      />
      <button onClick={AddOption}> Add option </button>
    </div>
  );
}

This only happens from version 4.0.2 onwards. No issue with version 4.0.1

Sample Code using Version 4.0.3 https://codesandbox.io/s/react-kerl-bug-0hm06?file=/src/App.js

Desired behaviour: When Option state changes, component should reflect the state just like in version 4.0.1

opened by wongCH 5

flicker loading with nextjs

I'm trying to use react-multi-select-component inside nextJS with reactJs but i have flickering in the load time. basically, the component appears at the beginning without any styling then looks like the styles get injected a bit late. on load time After load

import React, { useState } from 'react';
import MultiSelectBox from 'react-multi-select-component';

export default function MultiSelect(): JSX.Element {
    const options = [
        { label: 'Grapes 🍇', value: 'grapes' },
        { label: 'Mango 🥭', value: 'mango' },
        { label: 'Strawberry 🍓', value: 'strawberry', disabled: true },
        { label: 'Watermelon 🍉', value: 'watermelon' },
        { label: 'Pear 🍐', value: 'pear' },
        { label: 'Apple 🍎', value: 'apple' },
        { label: 'Tangerine 🍊', value: 'tangerine' },
        { label: 'Pineapple 🍍', value: 'pineapple' },
        { label: 'Peach 🍑', value: 'peach' },
    ];

    const [selected, setSelected] = useState([]);

    return (
        <MultiSelectBox
            options={options}
            value={selected}
            onChange={setSelected}
            labelledBy="Select"
        />
    );
}

enhancement

opened by mu7amad 5

Infinite scroll or Pagination things

Hello guys, thanks for this package, so help me a lot.

it is possible for this package to implement infinite scrolling ? i mean, it will paginate to server to fetch more data when user reach the end of the scroll because i dont see any handling for scrolling

Thanks

opened by bobbyrinaldy 5
Search input text does not allow keyboard tab spaces

Thanks for this , but I think there is an issue with entering spaces in your search text.

If this is by design, then can you let me know how i can override this function. I have a drop down with a long text that require filtering using more than one text value.

Thanks
bug

opened by adomrockie 5
chore(deps-dev): bump eslint-plugin-storybook from 0.6.4 to 0.6.8
Bumps eslint-plugin-storybook from 0.6.4 to 0.6.8.

Release notes

Sourced from eslint-plugin-storybook's releases.

v0.6.8

🐛 Bug Fix

Support typescript 4.9 #110 (@yannbf @kasperpeulen)

Authors: 2

Kasper Peulen (@kasperpeulen)

Yann Braga (@yannbf)

v0.6.7

🐛 Bug Fix

fix: add declaration checks to avoid destructuring undefined #99 (@stefanprobst @yannbf)

Authors: 2

@stefanprobst

Yann Braga (@yannbf)

v0.6.6

🐛 Bug Fix

fix: await interactions rule scope. #100 (@zhyd1997 @yannbf)

Authors: 2

Yadong Zhang (@zhyd1997)

Yann Braga (@yannbf)

v0.6.5

Release Notes

story-exports: provide better feedback when using filters (#107)

The story-exports rule now detects whether you are using includeStories/excludeStories and provides a more helpful message in case there are not exported stories. A possible scenario is you have a typo in your includeStories which will result in Storybook not including it:

export default { title: 'Button', includeStories: ['myStory'], // <-- notice the lowercase m, which won't match with the story name };
export const MyStory = {};

🐛 Bug Fix

... (truncated)

Changelog

Sourced from eslint-plugin-storybook's changelog.

v0.6.8 (Mon Dec 05 2022)

🐛 Bug Fix

Support typescript 4.9 #110 (@yannbf @kasperpeulen)

Authors: 2

Kasper Peulen (@kasperpeulen)

Yann Braga (@yannbf)

v0.6.7 (Tue Nov 01 2022)

🐛 Bug Fix

fix: add declaration checks to avoid destructuring undefined #99 (@stefanprobst @yannbf)

Authors: 2

@stefanprobst

Yann Braga (@yannbf)

v0.6.6 (Tue Oct 11 2022)

🐛 Bug Fix

fix: await interactions rule scope. #100 (@zhyd1997 @yannbf)

Authors: 2

Yadong Zhang (@zhyd1997)

Yann Braga (@yannbf)

v0.6.5 (Mon Oct 10 2022)

Release Notes

story-exports: provide better feedback when using filters (#107)

The story-exports rule now detects whether you are using includeStories/excludeStories and provides a more helpful message in case there are not exported stories. A possible scenario is you have a typo in your includeStories which will result in Storybook not including it:

export default { title: 'Button', </tr></table>

... (truncated)

Commits

8b7f603 Bump version to: 0.6.8 [skip ci]

db10661 Update CHANGELOG.md [skip ci]

3513226 Merge pull request #110 from storybookjs/feat/support-ts-4.9

e3c5bdd Fix not title property rule for TS 4.9

a84ab3b Move to TS 4.9 internally

45ebfc5 Move from @typescript-eslint/experimental-utils to @typescript-eslint/utils

ad31b3e update typescript eslint to 5.45

b74c5f8 add valid test for 4.9

c275b81 Bump version to: 0.6.7 [skip ci]

40f8aa8 Update CHANGELOG.md [skip ci]

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
chore(deps-dev): bump @storybook/addon-actions from 6.5.12 to 6.5.15
Bumps @storybook/addon-actions from 6.5.12 to 6.5.15.

Release notes

Sourced from @storybook/addon-actions's releases.

v6.5.15

Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

Maintenance

Ember: Remove global Ember usage #17843

v6.5.15-alpha.1

Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

v6.5.15-alpha.0

Maintenance

Ember: Remove global Ember usage #17843

v6.5.14

Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

CLI/React native: Fix addons template to import register instead of manager #19620

Maintenance

Core: Patch preview-web and refs to support React Native #19975

Dependency Upgrades

Upgrade loader-utils to 2.0.4 in storysource and source-loader #19891

v6.5.14-alpha.2

Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

v6.5.14-alpha.1

Maintenance

Core: Patch preview-web and refs to support React Native #19975

v6.5.14-alpha.0

Bug Fixes

CLI/React native: Fix addons template to import register instead of manager #19620

... (truncated)

Changelog

Sourced from @storybook/addon-actions's changelog.

6.5.15 (December 20, 2022)

Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

Maintenance

Ember: Remove global Ember usage #17843

6.5.15-alpha.1 (December 20, 2022)

Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

6.5.15-alpha.0 (December 12, 2022)

Maintenance

Ember: Remove global Ember usage #17843

6.5.14 (December 2, 2022)

Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

CLI/React native: Fix addons template to import register instead of manager #19620

Maintenance

Core: Patch preview-web and refs to support React Native #19975

Dependency Upgrades

Upgrade loader-utils to 2.0.4 in storysource and source-loader #19891

6.5.14-alpha.2 (December 2, 2022)

Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

6.5.14-alpha.1 (November 27, 2022)

Maintenance

Core: Patch preview-web and refs to support React Native #19975

... (truncated)

Commits

feab19d v6.5.15

075a8dd Update git head to 6.5.15-alpha.1, update yarn.lock [ci skip]

cfd775b v6.5.15-alpha.1

9c19ef0 Update git head to 6.5.15-alpha.0, update yarn.lock [ci skip]

095d6ad v6.5.15-alpha.0

ae06ca9 Update git head to 6.5.14, update yarn.lock [ci skip]

cf65eb7 v6.5.14

6e1e6dd Update git head to 6.5.14-alpha.2, update yarn.lock [ci skip]

71f07c4 v6.5.14-alpha.2

885e7ac Update git head to 6.5.14-alpha.1, update yarn.lock [ci skip]

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
chore(deps-dev): bump @storybook/addon-essentials from 6.5.12 to 6.5.15
Bumps @storybook/addon-essentials from 6.5.12 to 6.5.15.

Release notes

Sourced from @storybook/addon-essentials's releases.

v6.5.15

Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

Maintenance

Ember: Remove global Ember usage #17843

v6.5.15-alpha.1

Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

v6.5.15-alpha.0

Maintenance

Ember: Remove global Ember usage #17843

v6.5.14

Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

CLI/React native: Fix addons template to import register instead of manager #19620

Maintenance

Core: Patch preview-web and refs to support React Native #19975

Dependency Upgrades

Upgrade loader-utils to 2.0.4 in storysource and source-loader #19891

v6.5.14-alpha.2

Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

v6.5.14-alpha.1

Maintenance

Core: Patch preview-web and refs to support React Native #19975

v6.5.14-alpha.0

Bug Fixes

CLI/React native: Fix addons template to import register instead of manager #19620

... (truncated)

Changelog

Sourced from @storybook/addon-essentials's changelog.

6.5.15 (December 20, 2022)

Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

Maintenance

Ember: Remove global Ember usage #17843

6.5.15-alpha.1 (December 20, 2022)

Bug Fixes

Support Angular 15.0.4 #20287

CLI: execute automigrations when pressing enter in the prompts #20208

6.5.15-alpha.0 (December 12, 2022)

Maintenance

Ember: Remove global Ember usage #17843

6.5.14 (December 2, 2022)

Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

CLI/React native: Fix addons template to import register instead of manager #19620

Maintenance

Core: Patch preview-web and refs to support React Native #19975

Dependency Upgrades

Upgrade loader-utils to 2.0.4 in storysource and source-loader #19891

6.5.14-alpha.2 (December 2, 2022)

Bug Fixes

Angular: Fix "webpack_require.nmd is not a function issue" in Angular 15 #20043

6.5.14-alpha.1 (November 27, 2022)

Maintenance

Core: Patch preview-web and refs to support React Native #19975

... (truncated)

Commits

feab19d v6.5.15

075a8dd Update git head to 6.5.15-alpha.1, update yarn.lock [ci skip]

cfd775b v6.5.15-alpha.1

9c19ef0 Update git head to 6.5.15-alpha.0, update yarn.lock [ci skip]

095d6ad v6.5.15-alpha.0

ae06ca9 Update git head to 6.5.14, update yarn.lock [ci skip]

cf65eb7 v6.5.14

6e1e6dd Update git head to 6.5.14-alpha.2, update yarn.lock [ci skip]

71f07c4 v6.5.14-alpha.2

885e7ac Update git head to 6.5.14-alpha.1, update yarn.lock [ci skip]

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
chore(deps-dev): bump @types/react from 18.0.21 to 18.0.26
Bumps @types/react from 18.0.21 to 18.0.26.

Commits

See full diff in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
chore(deps-dev): bump @typescript-eslint/eslint-plugin from 5.39.0 to 5.47.1
Bumps @typescript-eslint/eslint-plugin from 5.39.0 to 5.47.1.

Release notes

Sourced from @typescript-eslint/eslint-plugin's releases.

v5.47.1

5.47.1 (2022-12-26)

Bug Fixes

ast-spec: correct some incorrect ast types (#6257) (0f3f645)

eslint-plugin: [member-ordering] correctly invert optionalityOrder (#6256) (ccd45d4)

v5.47.0

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

v5.46.1

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/typescript-eslint

v5.46.0

5.46.0 (2022-12-08)

Bug Fixes

eslint-plugin: [ban-types] update message to suggest object instead of Record<string, unknown> (#6079) (d91a5fc)

Features

eslint-plugin: [prefer-nullish-coalescing] logic and test for strict null checks (#6174) (8a91cbd)

v5.45.1

5.45.1 (2022-12-05)

Bug Fixes

eslint-plugin: [keyword-spacing] unexpected space before/after in import type (#6095) (98caa92)

eslint-plugin: [no-shadow] add call and method signatures to ignoreFunctionTypeParameterNameValueShadow (#6129) (9d58b6b)

eslint-plugin: [prefer-optional-chain] collect MetaProperty type (#6083) (d7114d3)

eslint-plugin: [sort-type-constituents, sort-type-union-intersection-members] handle some required parentheses cases in the fixer (#6118) (5d49d5d)

parser: remove the jsx option requirement for automatic jsx pragma resolution (#6134) (e777f5e)

v5.45.0

5.45.0 (2022-11-28)

... (truncated)

Changelog

Sourced from @typescript-eslint/eslint-plugin's changelog.

5.47.1 (2022-12-26)

Bug Fixes

ast-spec: correct some incorrect ast types (#6257) (0f3f645)

eslint-plugin: [member-ordering] correctly invert optionalityOrder (#6256) (ccd45d4)

5.47.0 (2022-12-19)

Features

eslint-plugin: [no-floating-promises] add suggestion fixer to add an 'await' (#5943) (9e35ef9)

5.46.1 (2022-12-12)

Note: Version bump only for package @typescript-eslint/eslint-plugin

5.46.0 (2022-12-08)

Bug Fixes

eslint-plugin: [ban-types] update message to suggest object instead of Record<string, unknown> (#6079) (d91a5fc)

Features

eslint-plugin: [prefer-nullish-coalescing] logic and test for strict null checks (#6174) (8a91cbd)

5.45.1 (2022-12-05)

Bug Fixes

eslint-plugin: [keyword-spacing] unexpected space before/after in import type (#6095) (98caa92)

eslint-plugin: [no-shadow] add call and method signatures to ignoreFunctionTypeParameterNameValueShadow (#6129) (9d58b6b)

eslint-plugin: [prefer-optional-chain] collect MetaProperty type (#6083) (d7114d3)

eslint-plugin: [sort-type-constituents, sort-type-union-intersection-members] handle some required parentheses cases in the fixer (#6118) (5d49d5d)

5.45.0 (2022-11-28)

Bug Fixes

eslint-plugin: [array-type] --fix flag removes parentheses from type (#5997) (42b33af)

eslint-plugin: [keyword-spacing] prevent crash on no options (#6073) (1f19998)

eslint-plugin: [member-ordering] support private fields (#5859) (f02761a)

eslint-plugin: [prefer-readonly] report if a member's property is reassigned (#6043) (6e079eb)

Features

eslint-plugin: [member-ordering] add a required option for required vs. optional member ordering (#5965) (2abadc6)

5.44.0 (2022-11-21)

... (truncated)

Commits

6ffce79 chore: publish v5.47.1

0f3f645 fix(ast-spec): correct some incorrect ast types (#6257)

ccd45d4 fix(eslint-plugin): [member-ordering] correctly invert optionalityOrder (#6256)

a2c08ba chore: publish v5.47.0

9e35ef9 feat(eslint-plugin): [no-floating-promises] add suggestion fixer to add an 'a...

6b3ed1d docs: fixed typo "foo.property" (#6180)

c943b84 chore: publish v5.46.1

47241bb docs: overhaul branding and add new logo (#6147)

1e1573a chore: publish v5.46.0

d91a5fc fix(eslint-plugin): [ban-types] update message to suggest object instead of...

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1
chore(deps-dev): bump postcss from 8.4.17 to 8.4.20
Bumps postcss from 8.4.17 to 8.4.20.

Release notes

Sourced from postcss's releases.

8.4.20

Fixed source map generation for childless at-rules like @layer.

8.4.19

Fixed whitespace preserving after AST transformations (by @romainmenke).

8.4.18

Fixed an error on absolute: true with empty sourceContent (by @KingSora).

Changelog

Sourced from postcss's changelog.

8.4.20

Fixed source map generation for childless at-rules like @layer.

8.4.19

Fixed whitespace preserving after AST transformations (by Romain Menke).

8.4.18

Fixed an error on absolute: true with empty sourceContent (by Rene Haas).

Commits

1d4c509 Release 8.4.20 version

905082a Add Node.js 10 to CI

20122e5 Fix childless at-rule map generation

ff7e8ce Merge pull request #1801 from romainmenke/invalid-sourcemap-with-at-layer--pr...

d585976 Fix CI

744b15f Update dependencies

db935f1 invalid sourcemap with at layer

3cac84a Fix type tests

5113edb Update dependencies

c26baf3 Release 8.4.19 version

Additional commits viewable in compare view

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR

@dependabot recreate will recreate this PR, overwriting any edits that have been made to it

@dependabot merge will merge this PR after your CI passes on it

@dependabot squash and merge will squash and merge this PR after your CI passes on it

@dependabot cancel merge will cancel a previously requested merge and block automerging

@dependabot reopen will reopen this PR if it is closed

@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually

@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)

@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

dependencies
opened by dependabot[bot] 1

Releases(v4.3.4)

v4.3.4(Oct 7, 2022)
What's Changed

refactor: :memo: correcting typo by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/634

chore: :robot: dependency updates by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/654

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.3.3...v4.3.4
Source code(tar.gz)
Source code(zip)
v4.3.3(Aug 12, 2022)
What's Changed

refactor: :recycle: exported TS types back by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/632

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.3.2...v4.3.3
Source code(tar.gz)
Source code(zip)
v4.3.2(Aug 3, 2022)
What's Changed

Ensure create item always has correct tab index by @MegaKeegMan in https://github.com/hc-oss/react-multi-select-component/pull/620

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.3.1...v4.3.2
Source code(tar.gz)
Source code(zip)
v4.3.1(Aug 3, 2022)
What's Changed

refactor: :recycle: no undefined in className by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/628

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.3.0...v4.3.1
Source code(tar.gz)
Source code(zip)
v4.3.0(Jul 19, 2022)
What's Changed

Refactor-a11y-option by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/618

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.9...v4.3.0
Source code(tar.gz)
Source code(zip)
v4.2.9(Jun 8, 2022)
What's Changed

refactor: :recycle: cont. allow create option when there are matches by @jose-donato in https://github.com/hc-oss/react-multi-select-component/pull/607

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.8...v4.2.9
Source code(tar.gz)
Source code(zip)
v4.2.8(Jun 3, 2022)
What's Changed

Allow for keyboard-only selection of create option by @MegaKeegMan in https://github.com/hc-oss/react-multi-select-component/pull/593

chore: :robot: dependency updates by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/605

New Contributors

@MegaKeegMan made their first contribution in https://github.com/hc-oss/react-multi-select-component/pull/593

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.7...v4.2.8
Source code(tar.gz)
Source code(zip)
v4.2.7(May 23, 2022)

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.6...v4.2.7
Source code(tar.gz)
Source code(zip)
v4.2.6(May 23, 2022)

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.5...v4.2.6
Source code(tar.gz)
Source code(zip)
v4.2.5(Apr 24, 2022)
What's Changed

refactor: :recycle: updated filter logic by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/578

chore: :robot: dependency updates by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/579

docs: :memo: updated broken links in docs

refactor: :recycle: improved ClearSelectedIcon

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.4...v4.2.5
Source code(tar.gz)
Source code(zip)
v4.2.4(Mar 28, 2022)

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.3...v4.2.4
Source code(tar.gz)
Source code(zip)
v4.2.3(Feb 16, 2022)
What's Changed

Feat: Added closeOnChangedValue functionality. by @bdokimakis in https://github.com/hc-oss/react-multi-select-component/pull/555

New Contributors

@bdokimakis made their first contribution in https://github.com/hc-oss/react-multi-select-component/pull/555

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.2...v4.2.3
Source code(tar.gz)
Source code(zip)
v4.2.2(Feb 13, 2022)
What's Changed

chore: :robot: dependency updates by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/554

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.1...v4.2.2
Source code(tar.gz)
Source code(zip)
v4.2.1(Jan 25, 2022)
What's Changed

fix: :wrench: move from esm (mjs) to legacy js by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/541

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.2.0...v4.2.1
Source code(tar.gz)
Source code(zip)
v4.2.0(Jan 23, 2022)
What's Changed

refactor: :zap: move to tsup by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/539

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.1.15...v4.2.0
Source code(tar.gz)
Source code(zip)
v4.1.15(Dec 30, 2021)
What's Changed

Two minor fixes at src/lib/fuzzy-match-utils.tsx by @Brijeshlakkad in https://github.com/hc-oss/react-multi-select-component/pull/528

chore: :robot: dependency updates by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/530

New Contributors

@Brijeshlakkad made their first contribution in https://github.com/hc-oss/react-multi-select-component/pull/528

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.1.14...v4.1.15
Source code(tar.gz)
Source code(zip)
v4.1.14(Nov 15, 2021)
What's Changed

refactor: :recycle: transparent search box by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/514

fix: :bug: custom filter selection by @harshzalavadiya in https://github.com/hc-oss/react-multi-select-component/pull/515

Full Changelog: https://github.com/hc-oss/react-multi-select-component/compare/v4.1.13...v4.1.14
Source code(tar.gz)
Source code(zip)
v4.1.13(Sep 27, 2021)
chore: :robot: dependency updates

Source code(tar.gz)
Source code(zip)
v4.1.12(Sep 17, 2021)
refactor: :recycle: allow react and react-dom 16+ and 17+ in peer dependency

Source code(tar.gz)
Source code(zip)
v4.1.11(Sep 13, 2021)

Source code(tar.gz)
Source code(zip)
v4.1.10(Sep 8, 2021)
fix: :bug: select all bug https://github.com/hc-oss/react-multi-select-component/issues/474

feat: :sparkles: added selectAllFiltered key to overrideStrings

breaking: :boom: selectAllLabel prop is removed please usefilterOptions

Source code(tar.gz)
Source code(zip)
v4.1.9(Sep 7, 2021)
chore: :robot: dependency updates

Source code(tar.gz)
Source code(zip)
v4.1.8(Aug 30, 2021)
fix: :bug: TypeScript + CRA missing types production build issue #467

Source code(tar.gz)
Source code(zip)
v4.1.5(Aug 28, 2021)
refactor: :recycle: Moved to microbundle from tsdx since tsdx is no longer maintained

docs: :book: created docs/recipes folder to show different examples

breaking: :boom: removed default export for MultiSelect so all imports have to make change as below

- import MultiSelect from "react-multi-select-component"; + import { MultiSelect } from "react-multi-select-component"; # hint: for changing `MultiSelect` to something else - import MySelect from "react-multi-select-component"; + import { MultiSelect as MySelect } from "react-multi-select-component";

misc: :construction_worker: moved repo from @harshzalavadiya to @hc-oss since I'm maintaining many open-source projects

misc: :construction_worker: moved storybook deployment from vercel to cloudflare pages since deployment from org comes under pro plan or something... 😔 (but thank you for keeping storybook alive for all this time)

Source code(tar.gz)
Source code(zip)
v4.0.6(Aug 5, 2021)
fix: :bug: usablity fix for border color when input is disabled

Source code(tar.gz)
Source code(zip)
v4.0.5(Aug 2, 2021)
chore: :robot: dependency updates

Source code(tar.gz)
Source code(zip)
v4.0.4(Aug 2, 2021)
fix: :bug: component options do not update when the state changes #438

Source code(tar.gz)
Source code(zip)
v4.0.3(Jul 12, 2021)
feat: :sparkles: added isCreatable and onCreateOption thanks @jorge-cob for the PR

Source code(tar.gz)
Source code(zip)
v4.0.2(May 19, 2021)
fix: :bug: <ClearSelectedIcon/> button not working using keyboard

chore: :robot: dependency updates

chore: :recycle: storybook preview moved from netlify to vercel

Source code(tar.gz)
Source code(zip)
v4.0.1(Apr 13, 2021)
fix: :bug: space not allowed in search input

Source code(tar.gz)
Source code(zip)