feat: create useMultipleSelection (#895)

* start writing useMultipleSelection * make it work * add docz page * fix initial state * clear input at selection * add propTypes * implement addItem * fix the reducer delete step * fix filtering in docsite * support backspace * fix docsite example * check if keydown operation is allowed * some jsdoc * add dropdown tests and fix some bugs * remove cleanup from test * replace onIconClick with remove * fix typo in hook name * rename to getItemProps * getItemProps tests for hook * add more keydown tests for item * tests for backspace and delete * support a11y removal message * finish props tests * augment props tests for other hooks * add setItems, setActiveIndex, reset * add remove icons to example * style improvements * pass isOpen to getDropdownProps * fix coverage in testUtils * improve docsite example onStateChange * test for full coverage * finish combobox example * add useSelect example * docs code format * update snapshot * remove unnecessary destructuring * fix stateChangeTypes not being attached to hook * update readme for other hooks * cann getA11yRemovalMessage with more props * fix prop types * add readme but not done yet, only to getItemProps * finish readme * fix a space in a test * add defaultItems to propTypes validation * add item click as state change * add support to change navigation keys * augment the other readmes * add typescript support * fix mistakes * perform rename from item(s) to selectedItem(s) * update select usage codesandbox link * fix ts typings after rename * review on the docs again * fix ts typings * transition to import * as React * improve documentation in docsite example * fix unrelated test * change isOpen to preventKeyAction * update types * remove custom navi from cypress * update nvmrc * update snapshot * update props table * revert cypress test fix
downshift-js · Apr 11, 2020 · f1e4f26 · f1e4f26
1 parent f808331
commit f1e4f26
Show file tree

Hide file tree

Showing 31 changed files with 3,840 additions and 211 deletions.
diff --git a/.size-snapshot.json b/.size-snapshot.json
@@ -1,59 +1,59 @@
 {
   "dist/downshift.cjs.js": {
-    "bundled": 115575,
-    "minified": 53667,
-    "gzipped": 11596
+    "bundled": 132243,
+    "minified": 61564,
+    "gzipped": 12969
   },
   "preact/dist/downshift.cjs.js": {
-    "bundled": 114297,
-    "minified": 52633,
-    "gzipped": 11493
+    "bundled": 130972,
+    "minified": 60537,
+    "gzipped": 12870
   },
   "preact/dist/downshift.umd.min.js": {
-    "bundled": 125520,
-    "minified": 41642,
-    "gzipped": 11225
+    "bundled": 142178,
+    "minified": 46194,
+    "gzipped": 12321
   },
   "dist/downshift.umd.min.js": {
-    "bundled": 129728,
-    "minified": 42946,
-    "gzipped": 11780
+    "bundled": 146379,
+    "minified": 47500,
+    "gzipped": 12876
   },
   "preact/dist/downshift.umd.js": {
-    "bundled": 135218,
-    "minified": 48644,
-    "gzipped": 12423
+    "bundled": 152291,
+    "minified": 54421,
+    "gzipped": 13636
   },
   "dist/downshift.umd.js": {
-    "bundled": 164816,
-    "minified": 57565,
-    "gzipped": 15043
+    "bundled": 181882,
+    "minified": 63348,
+    "gzipped": 16259
   },
   "dist/downshift.esm.js": {
-    "bundled": 115076,
-    "minified": 53237,
-    "gzipped": 11526,
+    "bundled": 131667,
+    "minified": 61065,
+    "gzipped": 12899,
     "treeshaked": {
       "rollup": {
-        "code": 2081,
-        "import_statements": 428
+        "code": 2209,
+        "import_statements": 317
       },
       "webpack": {
-        "code": 4240
+        "code": 4341
       }
     }
   },
   "preact/dist/downshift.esm.js": {
-    "bundled": 113764,
-    "minified": 52169,
-    "gzipped": 11425,
+    "bundled": 130355,
+    "minified": 59997,
+    "gzipped": 12796,
     "treeshaked": {
       "rollup": {
-        "code": 2082,
-        "import_statements": 429
+        "code": 2210,
+        "import_statements": 318
       },
       "webpack": {
-        "code": 4239
+        "code": 4340
       }
     }
   }

diff --git a/README.md b/README.md
@@ -40,14 +40,15 @@ This library provides its users two main sets of solutions: the `Downshift`
 component and a set of hooks. The component is still the main part of the
 library, providing autocomplete/combobox logic as a render prop. The hooks are
 newer and are going to be the way forward to provide accessibility logic to
-widgets. Right now we support `useSelect` for `<select>` components and
-`useCombobox` for combobox/autocomplete.
+widgets. Right now we support `useSelect` for `select` components, `useCombobox`
+for `combobox/autocomplete` and `useMultipleSelection` to make multiple
+selection easier for the first two experiences.
 
-Since `useCombobox` and `<Downshift />` aim to provide accessibility to the same
-kind of widget, we suggest trying the new `useCombobox` and if you feel that
-`<Downshift />` still covers your use case better then use that instead. Both of
-them are actively maintained but we are cool kids from the future and prefer to
-share `React` logic via hooks.
+Since `useCombobox` and the component `Downshift` aim to provide accessibility
+to the same kind of widget, we suggest trying the new `useCombobox` and if you
+feel that `Downshift` still covers your use case better then use that instead.
+Both of them are actively maintained but we are cool kids from the future and
+prefer to share `React` logic via hooks.
 
 The `README` on this page is only for the component while each hook has its own
 `README` file, check below. But they are similar in many concepts so you can
@@ -77,11 +78,12 @@ specific dropdown variation and be named accordingly: `useSelect`,
 `useCombobox`, `useMultipleSelection` etc.
 
 You can check the progress in the [hooks page][hooks-readme] and contribute! If
-you want to create a custom `<select>` or `combobox autocomplete` dropdown and
-want it to be functional and accessible, jump directly to the already
-implemented [useSelect][useselect-readme] and [useCombobox][combobox-readme].
-For more examples of how to use the hooks check out our
-[docsite](https://downshift.netlify.com/)!
+you want to create a custom `select` or `combobox/autocomplete` dropdown, with
+the possibility of multiple selection, and want it to be functional and
+accessible, jump directly to the already implemented
+[useSelect][useselect-readme], [useCombobox][combobox-readme] and
+[useMultipleSelection][multiple-selection-readme]. For more examples of how to
+use the hooks check out our [docsite](https://downshift.netlify.com/)!
 
 ### Bundle size concerns
 
@@ -97,6 +99,7 @@ the library treeshaked (pruned) and given only the code you need. Since version
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 
+
 - [Installation](#installation)
 - [Usage](#usage)
 - [Basic Props](#basic-props)
@@ -1464,4 +1467,6 @@ MIT
   https://github.com/downshift-js/downshift/blob/master/src/hooks/useSelect
 [combobox-readme]:
   https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox
+[multiple-selection-readme]:
+  https://github.com/downshift-js/downshift/tree/master/src/hooks/useMultipleSelection
 [bundle-phobia-link]: https://bundlephobia.com/result?p=downshift@3.4.8