Skip to content

Commit b415eea

Browse files
silviuaavramsilviuaavram
authored
fix: bring back action props and update the hooks to use TypeScript fully (#1683)
* fix(reducer): bring back action props * fix a test * rename utils to utils.legacy * rename hooks utils to legacy * rename utils-ts to utils * migrate src utils * getChangesOnSelection and getChangesOnSelection * getHighlightedIndexOnOpen * prettier * getHighlighted and nonDisabled * tests * move dropdown utils to hook utils * isControlledProps * fix import * migrate stateChangeTypes * getInitialState * combobox utils * only combobox index file left to go * more updates to make it ts ready * useControlPropsValidator & validateControlledUnchanged * useMouseAndTouchTracker and targetWithinDownshift * useGetterPropsCalledChecker * create downshift types * environment is not required * refactored useCobobox * useSelect types and stateChangeTypes * useSelect reducer * useSelect * last 2 utils * more tests * fix equality issue * common reducer * finish tests for getItemIndexByChar * refactored tests * move useMultiple types * consolidate types * reexport everything * prettier * fix exports * fix pre-commit * add refs to tsx tests * more types fixes after docusaurus tsx convert * bring back the previous typings folder * fix exports * code review * fix types generation * prettier * tsconfig stale * some type fixes in reducer * no need for pre-commit fix
1 parent 71cf356 commit b415eea

221 files changed

Lines changed: 8858 additions & 5259 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.all-contributorsrc‎

Lines changed: 143 additions & 522 deletions
Large diffs are not rendered by default.

‎.github/ISSUE_TEMPLATE.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ learn how: http://kcd.im/pull-request
1818
**Relevant code or config**
1919

2020
```javascript
21+
2122
```
2223

2324
**What you did**:

‎.github/workflows/validate.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,4 +98,4 @@ jobs:
9898
]
9999
env:
100100
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
101-
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
101+
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

docusaurus/pages/combobox.js renamed to docusaurus/pages/combobox.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import * as React from 'react'
22

33
import Downshift from '../../src'
4-
import {colors, containerStyles, menuStyles} from '../utils'
4+
import {type ControllerStateAndHelpers} from '../../src/downshift.types'
5+
import {colors} from '../utils'
6+
import './shared.css'
57

68
export default function ComboBox() {
79
return (
@@ -18,8 +20,8 @@ export default function ComboBox() {
1820
selectedItem,
1921
getRootProps,
2022
clearSelection,
21-
}) => (
22-
<div style={containerStyles}>
23+
}: ControllerStateAndHelpers<string>) => (
24+
<div className="container">
2325
<label
2426
style={{
2527
fontWeight: 'bolder',
@@ -47,12 +49,12 @@ export default function ComboBox() {
4749
style={{padding: '4px 8px'}}
4850
aria-label="toggle menu"
4951
data-testid="clear-button"
50-
onClick={clearSelection}
52+
onClick={() => clearSelection()}
5153
>
5254
&#10007;
5355
</button>
5456
</div>
55-
<ul {...getMenuProps()} style={menuStyles}>
57+
<ul {...getMenuProps()} className="menu">
5658
{isOpen
5759
? (inputValue
5860
? colors.filter(i =>
@@ -64,7 +66,7 @@ export default function ComboBox() {
6466
style={{
6567
padding: '4px',
6668
backgroundColor:
67-
highlightedIndex === index ? '#bde4ff' : null,
69+
highlightedIndex === index ? '#bde4ff' : undefined,
6870
}}
6971
key={`${item}${index}`}
7072
{...getItemProps({

docusaurus/pages/index.js renamed to docusaurus/pages/index.tsx

File renamed without changes.

docusaurus/pages/useTagGroup.css renamed to docusaurus/pages/shared.css

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,21 @@
1+
.container {
2+
display: flex;
3+
flex-direction: column;
4+
width: fit-content;
5+
justify-content: center;
6+
margin-top: 100px;
7+
align-self: center;
8+
}
9+
10+
.menu {
11+
list-style: none;
12+
width: 100%;
13+
padding: 0;
14+
margin: 4px 0 0 0;
15+
max-height: 120px;
16+
overflow-y: scroll;
17+
}
18+
119
.tag-group {
220
display: inline-flex;
321
gap: 8px;

docusaurus/pages/useCombobox.js renamed to docusaurus/pages/useCombobox.tsx

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import * as React from 'react'
22

33
import {useCombobox} from '../../src'
4-
import {colors, containerStyles, menuStyles} from '../utils'
4+
import {colors} from '../utils'
5+
import './shared.css'
56

67
export default function DropdownCombobox() {
78
const [inputItems, setInputItems] = React.useState(colors)
@@ -26,7 +27,7 @@ export default function DropdownCombobox() {
2627
},
2728
})
2829
return (
29-
<div style={containerStyles}>
30+
<div className="container">
3031
<label
3132
style={{
3233
fontWeight: 'bolder',
@@ -52,31 +53,33 @@ export default function DropdownCombobox() {
5253
</button>
5354
<button
5455
style={{padding: '4px 8px'}}
55-
aria-label="toggle menu"
56+
aria-label="clear selection"
5657
data-testid="clear-button"
5758
onClick={() => selectItem(null)}
5859
>
5960
&#10007;
6061
</button>
6162
</div>
62-
<ul {...getMenuProps()} style={menuStyles}>
63-
{isOpen ?
64-
inputItems.map((item, index) => (
65-
<li
66-
style={{
67-
padding: '4px',
68-
backgroundColor: highlightedIndex === index ? '#bde4ff' : null,
69-
}}
70-
key={`${item}${index}`}
71-
{...getItemProps({
72-
item,
73-
index,
74-
'data-testid': `downshift-item-${index}`,
75-
})}
76-
>
77-
{item}
78-
</li>
79-
)) : null}
63+
<ul {...getMenuProps()} className="menu">
64+
{isOpen
65+
? inputItems.map((item, index) => (
66+
<li
67+
style={{
68+
padding: '4px',
69+
backgroundColor:
70+
highlightedIndex === index ? '#bde4ff' : undefined,
71+
}}
72+
key={`${item}${index}`}
73+
{...getItemProps({
74+
item,
75+
index,
76+
'data-testid': `downshift-item-${index}`,
77+
})}
78+
>
79+
{item}
80+
</li>
81+
))
82+
: null}
8083
</ul>
8184
</div>
8285
)

docusaurus/pages/useMultipleCombobox.js renamed to docusaurus/pages/useMultipleCombobox.tsx

Lines changed: 18 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import * as React from 'react'
22

33
import {useCombobox, useMultipleSelection} from '../../src'
4-
import {
5-
colors,
6-
containerStyles,
7-
menuStyles,
8-
tagGroupSyles,
9-
tagStyles,
10-
} from '../utils'
4+
import {type UseMultipleSelectionReturnValue} from '../../src/hooks/useMultipleSelection/index.types'
5+
import {colors} from '../utils'
6+
import './shared.css'
117

12-
const initialSelectedItems = [colors[0], colors[1]]
8+
const initialSelectedItems = colors.slice(0, 2)
139

14-
function getFilteredItems(selectedItems, inputValue) {
10+
function getFilteredItems(selectedItems: string[], inputValue: string) {
1511
const lowerCasedInputValue = inputValue.toLowerCase()
1612

1713
return colors.filter(
@@ -31,21 +27,8 @@ export default function DropdownMultipleCombobox() {
3127

3228
const {getSelectedItemProps, getDropdownProps, removeSelectedItem} =
3329
useMultipleSelection({
34-
selectedItems,
35-
onStateChange({selectedItems: newSelectedItems, type}) {
36-
switch (type) {
37-
case useMultipleSelection.stateChangeTypes
38-
.SelectedItemKeyDownBackspace:
39-
case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
40-
case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
41-
case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
42-
setSelectedItems(newSelectedItems)
43-
break
44-
default:
45-
break
46-
}
47-
},
48-
})
30+
initialSelectedItems,
31+
}) as unknown as UseMultipleSelectionReturnValue<string>
4932
const {
5033
isOpen,
5134
getToggleButtonProps,
@@ -55,7 +38,7 @@ export default function DropdownMultipleCombobox() {
5538
highlightedIndex,
5639
getItemProps,
5740
selectedItem,
58-
clearSelection,
41+
reset,
5942
} = useCombobox({
6043
items,
6144
inputValue,
@@ -83,19 +66,19 @@ export default function DropdownMultipleCombobox() {
8366
switch (type) {
8467
case useCombobox.stateChangeTypes.InputKeyDownEnter:
8568
case useCombobox.stateChangeTypes.ItemClick:
86-
setSelectedItems([...selectedItems, newSelectedItem])
69+
setSelectedItems([...selectedItems, newSelectedItem as string])
8770

8871
break
8972
case useCombobox.stateChangeTypes.InputChange:
90-
setInputValue(newInputValue)
73+
setInputValue(newInputValue as string)
9174
break
9275
default:
9376
break
9477
}
9578
},
9679
})
9780
return (
98-
<div style={containerStyles}>
81+
<div className="container">
9982
<label
10083
style={{
10184
fontWeight: 'bolder',
@@ -105,14 +88,14 @@ export default function DropdownMultipleCombobox() {
10588
>
10689
Choose an element:
10790
</label>
108-
<div style={tagGroupSyles}>
91+
<div className="tag-group">
10992
{selectedItems.map(function renderSelectedItem(
110-
selectedItemForRender,
111-
index,
93+
selectedItemForRender: string,
94+
index: number,
11295
) {
11396
return (
11497
<span
115-
style={tagStyles}
98+
className="tag"
11699
key={`selected-item-${index}`}
117100
{...getSelectedItemProps({
118101
selectedItem: selectedItemForRender,
@@ -151,20 +134,20 @@ export default function DropdownMultipleCombobox() {
151134
style={{padding: '4px 8px'}}
152135
aria-label="clear selection"
153136
data-testid="clear-button"
154-
onClick={clearSelection}
137+
onClick={() => reset()}
155138
>
156139
&#10007;
157140
</button>
158141
</div>
159142
</div>
160-
<ul {...getMenuProps()} style={menuStyles}>
143+
<ul {...getMenuProps()} className="menu">
161144
{isOpen
162145
? items.map((item, index) => (
163146
<li
164147
style={{
165148
padding: '4px',
166149
backgroundColor:
167-
highlightedIndex === index ? '#bde4ff' : null,
150+
highlightedIndex === index ? '#bde4ff' : undefined,
168151
}}
169152
key={`${item}${index}`}
170153
{...getItemProps({

docusaurus/pages/useMultipleSelect.js renamed to docusaurus/pages/useMultipleSelect.tsx

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,13 @@
11
import * as React from 'react'
22

33
import {useSelect, useMultipleSelection} from '../../src'
4-
import {
5-
colors,
6-
containerStyles,
7-
menuStyles,
8-
tagGroupSyles,
9-
tagStyles,
10-
} from '../utils'
4+
import {type UseMultipleSelectionReturnValue} from '../../src/hooks/useMultipleSelection/index.types'
5+
import {colors} from '../utils'
6+
import './shared.css'
117

12-
const initialSelectedItems = [colors[0], colors[1]]
8+
const initialSelectedItems = colors.slice(0, 2)
139

14-
function getFilteredItems(selectedItems) {
10+
function getFilteredItems(selectedItems: string[]) {
1511
return colors.filter(colour => !selectedItems.includes(colour))
1612
}
1713

@@ -22,7 +18,9 @@ export default function DropdownMultipleSelect() {
2218
addSelectedItem,
2319
removeSelectedItem,
2420
selectedItems,
25-
} = useMultipleSelection({initialSelectedItems})
21+
} = useMultipleSelection({
22+
initialSelectedItems,
23+
}) as unknown as UseMultipleSelectionReturnValue<string>
2624
const items = getFilteredItems(selectedItems)
2725
const {
2826
isOpen,
@@ -66,7 +64,7 @@ export default function DropdownMultipleSelect() {
6664
})
6765

6866
return (
69-
<div style={containerStyles}>
67+
<div className="container">
7068
<label
7169
style={{
7270
fontWeight: 'bolder',
@@ -76,14 +74,14 @@ export default function DropdownMultipleSelect() {
7674
>
7775
Choose an element:
7876
</label>
79-
<div style={tagGroupSyles}>
77+
<div className="tag-group">
8078
{selectedItems.map(function renderSelectedItem(
81-
selectedItemForRender,
82-
index,
79+
selectedItemForRender: string,
80+
index: number,
8381
) {
8482
return (
8583
<span
86-
style={tagStyles}
84+
className="tag"
8785
key={`selected-item-${index}`}
8886
{...getSelectedItemProps({
8987
selectedItem: selectedItemForRender,
@@ -112,22 +110,21 @@ export default function DropdownMultipleSelect() {
112110
backgroundColor: 'lightgray',
113111
cursor: 'pointer',
114112
}}
115-
type="button"
116113
{...getToggleButtonProps(
117114
getDropdownProps({preventKeyAction: isOpen}),
118115
)}
119116
>
120117
Pick some colors {isOpen ? <>&#8593;</> : <>&#8595;</>}
121118
</div>
122119
</div>
123-
<ul {...getMenuProps()} style={menuStyles}>
120+
<ul {...getMenuProps()} className="menu">
124121
{isOpen
125122
? items.map((item, index) => (
126123
<li
127124
style={{
128125
padding: '4px',
129126
backgroundColor:
130-
highlightedIndex === index ? '#bde4ff' : null,
127+
highlightedIndex === index ? '#bde4ff' : undefined,
131128
}}
132129
key={`${item}${index}`}
133130
{...getItemProps({

0 commit comments

Comments
 (0)