Skip to content

Commit bde40cc

Browse files
ToMESSKaToMESSKa
committed
fix(ui-selectable,ui-select): fix typing of Select and Selectable event types and TypeScript errors in the examples
INSTUI-4866
1 parent 73af976 commit bde40cc

File tree

4 files changed

+87
-71
lines changed

4 files changed

+87
-71
lines changed

‎packages/ui-select/src/Select/README.md‎

Lines changed: 70 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,15 @@ type: example
4444
setIsShowingOptions(true)
4545
if (inputValue || selectedOptionId || options.length === 0) return
4646

47-
switch (event.key) {
48-
case 'ArrowDown':
49-
return handleHighlightOption(event, { id: options[0].id })
50-
case 'ArrowUp':
51-
return handleHighlightOption(event, {
52-
id: options[options.length - 1].id
53-
})
47+
if ('key' in event) {
48+
switch (event.key) {
49+
case 'ArrowDown':
50+
return handleHighlightOption(event, { id: options[0].id })
51+
case 'ArrowUp':
52+
return handleHighlightOption(event, {
53+
id: options[options.length - 1].id
54+
})
55+
}
5456
}
5557
}
5658

@@ -234,13 +236,15 @@ type: example
234236
)
235237
if (inputValue || selectedOptionId || options.length === 0) return
236238

237-
switch (event.key) {
238-
case 'ArrowDown':
239-
return handleHighlightOption(event, { id: options[0].id })
240-
case 'ArrowUp':
241-
return handleHighlightOption(event, {
242-
id: options[options.length - 1].id
243-
})
239+
if ('key' in event) {
240+
switch (event.key) {
241+
case 'ArrowDown':
242+
return handleHighlightOption(event, { id: options[0].id })
243+
case 'ArrowUp':
244+
return handleHighlightOption(event, {
245+
id: options[options.length - 1].id
246+
})
247+
}
244248
}
245249
}
246250

@@ -436,21 +440,23 @@ type: example
436440

437441
if (inputValue || options.length === 0) return
438442

439-
switch (event.key) {
440-
case 'ArrowDown':
441-
return handleHighlightOption(event, {
442-
id: options.find((option) => !selectedOptionId.includes(option.id))
443-
.id
444-
})
445-
case 'ArrowUp':
446-
// Highlight last non-selected option
447-
return handleHighlightOption(event, {
448-
id: options[
449-
options.findLastIndex(
450-
(option) => !selectedOptionId.includes(option.id)
451-
)
452-
].id
453-
})
443+
if ('key' in event) {
444+
switch (event.key) {
445+
case 'ArrowDown':
446+
return handleHighlightOption(event, {
447+
id: options.find((option) => !selectedOptionId.includes(option.id))
448+
.id
449+
})
450+
case 'ArrowUp':
451+
// Highlight last non-selected option
452+
return handleHighlightOption(event, {
453+
id: options[
454+
options.findLastIndex(
455+
(option) => !selectedOptionId.includes(option.id)
456+
)
457+
].id
458+
})
459+
}
454460
}
455461
}
456462

@@ -489,13 +495,13 @@ type: example
489495
const newOptions = filterOptions(value)
490496
setInputValue(value)
491497
setFilteredOptions(newOptions)
492-
sethHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
498+
setHighlightedOptionId(newOptions.length > 0 ? newOptions[0].id : null)
493499
setIsShowingOptions(true)
494500
setAnnouncement(getOptionsChangedMessage(newOptions))
495501
}
496502

497503
const handleKeyDown = (event) => {
498-
if (event.keyCode === 8) {
504+
if ('keyCode' in event && event.keyCode === 8) {
499505
// when backspace key is pressed
500506
if (inputValue === '' && selectedOptionId.length > 0) {
501507
// remove last selected option, if input has no entered text
@@ -660,17 +666,19 @@ const GroupSelectExample = ({ options }) => {
660666
const handleShowOptions = (event) => {
661667
setIsShowingOptions(true)
662668
setHighlightedOptionId(null)
663-
if (inputValue || selectedOptionId || options.length === 0) return
669+
if (inputValue || selectedOptionId || Object.keys(options).length === 0) return
664670

665-
switch (event.key) {
666-
case 'ArrowDown':
667-
return handleHighlightOption(event, {
668-
id: options[Object.keys(options)[0]][0].id
669-
})
670-
case 'ArrowUp':
671-
return handleHighlightOption(event, {
672-
id: Object.values(options).at(-1)?.at(-1)?.id
673-
})
671+
if ('key' in event) {
672+
switch (event.key) {
673+
case 'ArrowDown':
674+
return handleHighlightOption(event, {
675+
id: options[Object.keys(options)[0]][0].id
676+
})
677+
case 'ArrowUp':
678+
return handleHighlightOption(event, {
679+
id: Object.values(options).at(-1)?.at(-1)?.id
680+
})
681+
}
674682
}
675683
}
676684

@@ -840,17 +848,19 @@ const GroupSelectAutocompleteExample = ({ options }) => {
840848
setIsShowingOptions(true)
841849
setHighlightedOptionId(null)
842850

843-
if (inputValue || selectedOptionId || options.length === 0) return
851+
if (inputValue || selectedOptionId || Object.keys(options).length === 0) return
844852

845-
switch (event.key) {
846-
case 'ArrowDown':
847-
return handleHighlightOption(event, {
848-
id: options[Object.keys(options)[0]][0].id
849-
})
850-
case 'ArrowUp':
851-
return handleHighlightOption(event, {
852-
id: Object.values(options).at(-1)?.at(-1)?.id
853-
})
853+
if ('key' in event) {
854+
switch (event.key) {
855+
case 'ArrowDown':
856+
return handleHighlightOption(event, {
857+
id: options[Object.keys(options)[0]][0].id
858+
})
859+
case 'ArrowUp':
860+
return handleHighlightOption(event, {
861+
id: Object.values(options).at(-1)?.at(-1)?.id
862+
})
863+
}
854864
}
855865
}
856866

@@ -1205,13 +1215,15 @@ const SingleSelectExample = ({ options }) => {
12051215

12061216
if (inputValue || selectedOptionId || options.length === 0) return
12071217

1208-
switch (event.key) {
1209-
case 'ArrowDown':
1210-
return handleHighlightOption(event, { id: options[0].id })
1211-
case 'ArrowUp':
1212-
return handleHighlightOption(event, {
1213-
id: options[options.length - 1].id
1214-
})
1218+
if ('key' in event) {
1219+
switch (event.key) {
1220+
case 'ArrowDown':
1221+
return handleHighlightOption(event, { id: options[0].id })
1222+
case 'ArrowUp':
1223+
return handleHighlightOption(event, {
1224+
id: options[options.length - 1].id
1225+
})
1226+
}
12151227
}
12161228
}
12171229

‎packages/ui-select/src/Select/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -308,7 +308,7 @@ class Select extends Component<SelectProps> {
308308
}
309309
}
310310

311-
highlightOption(event: React.SyntheticEvent, id: string) {
311+
highlightOption(event: React.KeyboardEvent | React.MouseEvent, id: string) {
312312
const { onRequestHighlightOption } = this.props
313313
if (id) {
314314
onRequestHighlightOption?.(event, { id })

‎packages/ui-select/src/Select/props.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -142,26 +142,28 @@ type PropsFromSelectable = {
142142
/**
143143
* Callback fired requesting that the options list be shown.
144144
*/
145-
onRequestShowOptions?: (event: React.SyntheticEvent) => void
145+
onRequestShowOptions?: (event: React.KeyboardEvent | React.MouseEvent) => void
146146

147147
/**
148148
* Callback fired requesting that the options list be hidden.
149149
*/
150-
onRequestHideOptions?: (event: React.SyntheticEvent) => void
150+
onRequestHideOptions?: (
151+
event: React.KeyboardEvent | React.MouseEvent | React.FocusEvent
152+
) => void
151153

152154
/**
153155
* Callback fired requesting a particular option be highlighted.
154156
*/
155157
onRequestHighlightOption?: (
156-
event: React.SyntheticEvent,
158+
event: React.KeyboardEvent | React.MouseEvent,
157159
data: { id?: string; direction?: 1 | -1 }
158160
) => void
159161

160162
/**
161163
* Callback fired requesting a particular option be selected.
162164
*/
163165
onRequestSelectOption?: (
164-
event: React.SyntheticEvent,
166+
event: React.KeyboardEvent | React.MouseEvent,
165167
data: { id?: string }
166168
) => void
167169
}

‎packages/ui-selectable/src/Selectable/props.ts‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,37 +49,39 @@ type SelectableOwnProps = {
4949
/**
5050
* Callback fired when the options want to become visible
5151
*/
52-
onRequestShowOptions?: (event: React.SyntheticEvent) => void
52+
onRequestShowOptions?: (event: React.KeyboardEvent | React.MouseEvent) => void
5353

5454
/**
5555
* Callback fired when the options no longer want to be visible
5656
*/
57-
onRequestHideOptions?: (event: React.SyntheticEvent) => void
57+
onRequestHideOptions?: (
58+
event: React.KeyboardEvent | React.MouseEvent | React.FocusEvent
59+
) => void
5860

5961
/**
6062
* Callback fired when option is hovered or highlighted via keyboard.
6163
* Either the `id` or the `direction` parameter is supplied
6264
*/
6365
onRequestHighlightOption?: (
64-
event: React.SyntheticEvent,
66+
event: React.KeyboardEvent | React.MouseEvent,
6567
data: { id?: string; direction?: 1 | -1 }
6668
) => void
6769

6870
/**
69-
* Callback fired when first option should be highlighted
71+
* Callback fired when first option should be highlighted (triggered by the Home key)
7072
*/
71-
onRequestHighlightFirstOption?: (event: React.SyntheticEvent) => void
73+
onRequestHighlightFirstOption?: (event: React.KeyboardEvent) => void
7274

7375
/**
74-
* Callback fired when last option should be highlighted
76+
* Callback fired when last option should be highlighted (triggered by the End key)
7577
*/
76-
onRequestHighlightLastOption?: (event: React.SyntheticEvent) => void
78+
onRequestHighlightLastOption?: (event: React.KeyboardEvent) => void
7779

7880
/**
7981
* Callback fired when option clicked or selected via keyboard
8082
*/
8183
onRequestSelectOption?: (
82-
event: React.SyntheticEvent,
84+
event: React.KeyboardEvent | React.MouseEvent,
8385
data: { id?: string }
8486
) => void
8587

0 commit comments

Comments
 (0)