fix: bring back action props and update the hooks to use TypeScript fully

.github/ISSUE_TEMPLATE.md

@@ -18,6 +18,7 @@ learn how: http://kcd.im/pull-request
 **Relevant code or config**
 
 ```javascript
+
 ```
 
 **What you did**:

.github/workflows/validate.yml

@@ -98,4 +98,4 @@ jobs:
             ]
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

docusaurus/pages/combobox.js → docusaurus/pages/combobox.tsx

@@ -1,7 +1,9 @@
 import * as React from 'react'
 
 import Downshift from '../../src'
-import {colors, containerStyles, menuStyles} from '../utils'
+import {type ControllerStateAndHelpers} from '../../src/downshift.types'
+import {colors} from '../utils'
+import './shared.css'
 
 export default function ComboBox() {
   return (
@@ -18,8 +20,8 @@ export default function ComboBox() {
         selectedItem,
         getRootProps,
         clearSelection,
-      }) => (
-        <div style={containerStyles}>
+      }: ControllerStateAndHelpers<string>) => (
+        <div className="container">
           <label
             style={{
               fontWeight: 'bolder',
@@ -47,12 +49,12 @@ export default function ComboBox() {
               style={{padding: '4px 8px'}}
               aria-label="toggle menu"
               data-testid="clear-button"
-              onClick={clearSelection}
+              onClick={() => clearSelection()}
             >
               &#10007;
             </button>
           </div>
-          <ul {...getMenuProps()} style={menuStyles}>
+          <ul {...getMenuProps()} className="menu">
             {isOpen
               ? (inputValue
                   ? colors.filter(i =>
@@ -64,7 +66,7 @@ export default function ComboBox() {
                     style={{
                       padding: '4px',
                       backgroundColor:
-                        highlightedIndex === index ? '#bde4ff' : null,
+                        highlightedIndex === index ? '#bde4ff' : undefined,
                     }}
                     key={`${item}${index}`}
                     {...getItemProps({

docusaurus/pages/useTagGroup.css → docusaurus/pages/shared.css

@@ -1,3 +1,21 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  justify-content: center;
+  margin-top: 100px;
+  align-self: center;
+}
+
+.menu {
+  list-style: none;
+  width: 100%;
+  padding: 0;
+  margin: 4px 0 0 0;
+  max-height: 120px;
+  overflow-y: scroll;
+}
+
 .tag-group {
   display: inline-flex;
   gap: 8px;

docusaurus/pages/useCombobox.js → docusaurus/pages/useCombobox.tsx

@@ -1,7 +1,8 @@
 import * as React from 'react'
 
 import {useCombobox} from '../../src'
-import {colors, containerStyles, menuStyles} from '../utils'
+import {colors} from '../utils'
+import './shared.css'
 
 export default function DropdownCombobox() {
   const [inputItems, setInputItems] = React.useState(colors)
@@ -26,7 +27,7 @@ export default function DropdownCombobox() {
     },
   })
   return (
-    <div style={containerStyles}>
+    <div className="container">
       <label
         style={{
           fontWeight: 'bolder',
@@ -52,31 +53,33 @@ export default function DropdownCombobox() {
         </button>
         <button
           style={{padding: '4px 8px'}}
-          aria-label="toggle menu"
+          aria-label="clear selection"
           data-testid="clear-button"
           onClick={() => selectItem(null)}
         >
           &#10007;
         </button>
       </div>
-      <ul {...getMenuProps()} style={menuStyles}>
-        {isOpen ?
-          inputItems.map((item, index) => (
-            <li
-              style={{
-                padding: '4px',
-                backgroundColor: highlightedIndex === index ? '#bde4ff' : null,
-              }}
-              key={`${item}${index}`}
-              {...getItemProps({
-                item,
-                index,
-                'data-testid': `downshift-item-${index}`,
-              })}
-            >
-              {item}
-            </li>
-          )) : null}
+      <ul {...getMenuProps()} className="menu">
+        {isOpen
+          ? inputItems.map((item, index) => (
+              <li
+                style={{
+                  padding: '4px',
+                  backgroundColor:
+                    highlightedIndex === index ? '#bde4ff' : undefined,
+                }}
+                key={`${item}${index}`}
+                {...getItemProps({
+                  item,
+                  index,
+                  'data-testid': `downshift-item-${index}`,
+                })}
+              >
+                {item}
+              </li>
+            ))
+          : null}
       </ul>
     </div>
   )

docusaurus/pages/useMultipleCombobox.js → docusaurus/pages/useMultipleCombobox.tsx

@@ -1,17 +1,13 @@
 import * as React from 'react'
 
 import {useCombobox, useMultipleSelection} from '../../src'
-import {
-  colors,
-  containerStyles,
-  menuStyles,
-  tagGroupSyles,
-  tagStyles,
-} from '../utils'
+import {type UseMultipleSelectionReturnValue} from '../../src/hooks/useMultipleSelection/index.types'
+import {colors} from '../utils'
+import './shared.css'
 
-const initialSelectedItems = [colors[0], colors[1]]
+const initialSelectedItems = colors.slice(0, 2)
 
-function getFilteredItems(selectedItems, inputValue) {
+function getFilteredItems(selectedItems: string[], inputValue: string) {
   const lowerCasedInputValue = inputValue.toLowerCase()
 
   return colors.filter(
@@ -31,21 +27,8 @@ export default function DropdownMultipleCombobox() {
 
   const {getSelectedItemProps, getDropdownProps, removeSelectedItem} =
     useMultipleSelection({
-      selectedItems,
-      onStateChange({selectedItems: newSelectedItems, type}) {
-        switch (type) {
-          case useMultipleSelection.stateChangeTypes
-            .SelectedItemKeyDownBackspace:
-          case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
-          case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
-          case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
-            setSelectedItems(newSelectedItems)
-            break
-          default:
-            break
-        }
-      },
-    })
+      initialSelectedItems,
+    }) as unknown as UseMultipleSelectionReturnValue<string>
   const {
     isOpen,
     getToggleButtonProps,
@@ -55,7 +38,7 @@ export default function DropdownMultipleCombobox() {
     highlightedIndex,
     getItemProps,
     selectedItem,
-    clearSelection,
+    reset,
   } = useCombobox({
     items,
     inputValue,
@@ -83,19 +66,19 @@ export default function DropdownMultipleCombobox() {
       switch (type) {
         case useCombobox.stateChangeTypes.InputKeyDownEnter:
         case useCombobox.stateChangeTypes.ItemClick:
-          setSelectedItems([...selectedItems, newSelectedItem])
+          setSelectedItems([...selectedItems, newSelectedItem as string])
 
           break
         case useCombobox.stateChangeTypes.InputChange:
-          setInputValue(newInputValue)
+          setInputValue(newInputValue as string)
           break
         default:
           break
       }
     },
   })
   return (
-    <div style={containerStyles}>
+    <div className="container">
       <label
         style={{
           fontWeight: 'bolder',
@@ -105,14 +88,14 @@ export default function DropdownMultipleCombobox() {
       >
         Choose an element:
       </label>
-      <div style={tagGroupSyles}>
+      <div className="tag-group">
         {selectedItems.map(function renderSelectedItem(
-          selectedItemForRender,
-          index,
+          selectedItemForRender: string,
+          index: number,
         ) {
           return (
             <span
-              style={tagStyles}
+              className="tag"
               key={`selected-item-${index}`}
               {...getSelectedItemProps({
                 selectedItem: selectedItemForRender,
@@ -151,20 +134,20 @@ export default function DropdownMultipleCombobox() {
             style={{padding: '4px 8px'}}
             aria-label="clear selection"
             data-testid="clear-button"
-            onClick={clearSelection}
+            onClick={() => reset()}
           >
             &#10007;
           </button>
         </div>
       </div>
-      <ul {...getMenuProps()} style={menuStyles}>
+      <ul {...getMenuProps()} className="menu">
         {isOpen
           ? items.map((item, index) => (
               <li
                 style={{
                   padding: '4px',
                   backgroundColor:
-                    highlightedIndex === index ? '#bde4ff' : null,
+                    highlightedIndex === index ? '#bde4ff' : undefined,
                 }}
                 key={`${item}${index}`}
                 {...getItemProps({

docusaurus/pages/useMultipleSelect.js → docusaurus/pages/useMultipleSelect.tsx

@@ -1,17 +1,13 @@
 import * as React from 'react'
 
 import {useSelect, useMultipleSelection} from '../../src'
-import {
-  colors,
-  containerStyles,
-  menuStyles,
-  tagGroupSyles,
-  tagStyles,
-} from '../utils'
+import {type UseMultipleSelectionReturnValue} from '../../src/hooks/useMultipleSelection/index.types'
+import {colors} from '../utils'
+import './shared.css'
 
-const initialSelectedItems = [colors[0], colors[1]]
+const initialSelectedItems = colors.slice(0, 2)
 
-function getFilteredItems(selectedItems) {
+function getFilteredItems(selectedItems: string[]) {
   return colors.filter(colour => !selectedItems.includes(colour))
 }
 
@@ -22,7 +18,9 @@ export default function DropdownMultipleSelect() {
     addSelectedItem,
     removeSelectedItem,
     selectedItems,
-  } = useMultipleSelection({initialSelectedItems})
+  } = useMultipleSelection({
+    initialSelectedItems,
+  }) as unknown as UseMultipleSelectionReturnValue<string>
   const items = getFilteredItems(selectedItems)
   const {
     isOpen,
@@ -66,7 +64,7 @@ export default function DropdownMultipleSelect() {
   })
 
   return (
-    <div style={containerStyles}>
+    <div className="container">
       <label
         style={{
           fontWeight: 'bolder',
@@ -76,14 +74,14 @@ export default function DropdownMultipleSelect() {
       >
         Choose an element:
       </label>
-      <div style={tagGroupSyles}>
+      <div className="tag-group">
         {selectedItems.map(function renderSelectedItem(
-          selectedItemForRender,
-          index,
+          selectedItemForRender: string,
+          index: number,
         ) {
           return (
             <span
-              style={tagStyles}
+              className="tag"
               key={`selected-item-${index}`}
               {...getSelectedItemProps({
                 selectedItem: selectedItemForRender,
@@ -112,22 +110,21 @@ export default function DropdownMultipleSelect() {
             backgroundColor: 'lightgray',
             cursor: 'pointer',
           }}
-          type="button"
           {...getToggleButtonProps(
             getDropdownProps({preventKeyAction: isOpen}),
           )}
         >
           Pick some colors {isOpen ? <>&#8593;</> : <>&#8595;</>}
         </div>
       </div>
-      <ul {...getMenuProps()} style={menuStyles}>
+      <ul {...getMenuProps()} className="menu">
         {isOpen
           ? items.map((item, index) => (
               <li
                 style={{
                   padding: '4px',
                   backgroundColor:
-                    highlightedIndex === index ? '#bde4ff' : null,
+                    highlightedIndex === index ? '#bde4ff' : undefined,
                 }}
                 key={`${item}${index}`}
                 {...getItemProps({