UNPKG

24.7 kBTypeScriptView Raw
1import * as React from 'react'
2
3type Callback = () => void
4
5export interface DownshiftState<Item> {
6 highlightedIndex: number | null
7 inputValue: string | null
8 isOpen: boolean
9 selectedItem: Item | null
10}
11
12export enum StateChangeTypes {
13 unknown = '__autocomplete_unknown__',
14 mouseUp = '__autocomplete_mouseup__',
15 itemMouseEnter = '__autocomplete_item_mouseenter__',
16 keyDownArrowUp = '__autocomplete_keydown_arrow_up__',
17 keyDownArrowDown = '__autocomplete_keydown_arrow_down__',
18 keyDownEscape = '__autocomplete_keydown_escape__',
19 keyDownEnter = '__autocomplete_keydown_enter__',
20 clickItem = '__autocomplete_click_item__',
21 blurInput = '__autocomplete_blur_input__',
22 changeInput = '__autocomplete_change_input__',
23 keyDownSpaceButton = '__autocomplete_keydown_space_button__',
24 clickButton = '__autocomplete_click_button__',
25 blurButton = '__autocomplete_blur_button__',
26 controlledPropUpdatedSelectedItem = '__autocomplete_controlled_prop_updated_selected_item__',
27 touchEnd = '__autocomplete_touchend__',
28}
29
30export interface DownshiftProps<Item> {
31 initialSelectedItem?: Item
32 initialInputValue?: string
33 initialHighlightedIndex?: number | null
34 initialIsOpen?: boolean
35 defaultHighlightedIndex?: number | null
36 defaultIsOpen?: boolean
37 itemToString?: (item: Item | null) => string
38 selectedItemChanged?: (prevItem: Item, item: Item) => boolean
39 getA11yStatusMessage?: (options: A11yStatusMessageOptions<Item>) => string
40 onChange?: (
41 selectedItem: Item | null,
42 stateAndHelpers: ControllerStateAndHelpers<Item>,
43 ) => void
44 onSelect?: (
45 selectedItem: Item | null,
46 stateAndHelpers: ControllerStateAndHelpers<Item>,
47 ) => void
48 onStateChange?: (
49 options: StateChangeOptions<Item>,
50 stateAndHelpers: ControllerStateAndHelpers<Item>,
51 ) => void
52 onInputValueChange?: (
53 inputValue: string,
54 stateAndHelpers: ControllerStateAndHelpers<Item>,
55 ) => void
56 stateReducer?: (
57 state: DownshiftState<Item>,
58 changes: StateChangeOptions<Item>,
59 ) => Partial<StateChangeOptions<Item>>
60 itemCount?: number
61 highlightedIndex?: number | null
62 inputValue?: string | null
63 isOpen?: boolean
64 selectedItem?: Item | null
65 children?: ChildrenFunction<Item>
66 id?: string
67 inputId?: string
68 labelId?: string
69 menuId?: string
70 getItemId?: (index?: number) => string
71 environment?: Environment
72 onOuterClick?: (stateAndHelpers: ControllerStateAndHelpers<Item>) => void
73 scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
74 onUserAction?: (
75 options: StateChangeOptions<Item>,
76 stateAndHelpers: ControllerStateAndHelpers<Item>,
77 ) => void
78 suppressRefError?: boolean
79}
80
81export interface Environment {
82 addEventListener: typeof window.addEventListener
83 removeEventListener: typeof window.removeEventListener
84 document: Document
85}
86
87export interface A11yStatusMessageOptions<Item> {
88 highlightedIndex: number | null
89 inputValue: string
90 isOpen: boolean
91 itemToString: (item: Item | null) => string
92 previousResultCount: number
93 resultCount: number
94 highlightedItem: Item
95 selectedItem: Item | null
96}
97
98export interface StateChangeOptions<Item>
99 extends Partial<DownshiftState<Item>> {
100 type: StateChangeTypes
101}
102
103type StateChangeFunction<Item> = (
104 state: DownshiftState<Item>,
105) => Partial<StateChangeOptions<Item>>
106
107export interface GetRootPropsOptions {
108 refKey: string
109}
110
111export interface GetInputPropsOptions
112 extends React.HTMLProps<HTMLInputElement> {
113 disabled?: boolean
114}
115
116export interface GetLabelPropsOptions
117 extends React.HTMLProps<HTMLLabelElement> {}
118
119export interface GetToggleButtonPropsOptions
120 extends React.HTMLProps<HTMLButtonElement> {
121 disabled?: boolean
122}
123
124export interface GetMenuPropsOptions
125 extends React.HTMLProps<HTMLElement>,
126 GetPropsWithRefKey {
127 ['aria-label']?: string
128}
129
130export interface GetPropsCommonOptions {
131 suppressRefError?: boolean
132}
133
134export interface GetPropsWithRefKey {
135 refKey?: string
136}
137
138export interface GetItemPropsOptions<Item>
139 extends React.HTMLProps<HTMLElement> {
140 index?: number
141 item: Item
142 isSelected?: boolean
143 disabled?: boolean
144}
145
146export interface PropGetters<Item> {
147 getRootProps: (
148 options?: GetRootPropsOptions,
149 otherOptions?: GetPropsCommonOptions,
150 ) => any
151 getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any
152 getLabelProps: (options?: GetLabelPropsOptions) => any
153 getMenuProps: (
154 options?: GetMenuPropsOptions,
155 otherOptions?: GetPropsCommonOptions,
156 ) => any
157 getInputProps: <T>(options?: T) => T & GetInputPropsOptions
158 getItemProps: (options: GetItemPropsOptions<Item>) => any
159}
160
161export interface Actions<Item> {
162 reset: (
163 otherStateToSet?: Partial<StateChangeOptions<Item>>,
164 cb?: Callback,
165 ) => void
166 openMenu: (cb?: Callback) => void
167 closeMenu: (cb?: Callback) => void
168 toggleMenu: (
169 otherStateToSet?: Partial<StateChangeOptions<Item>>,
170 cb?: Callback,
171 ) => void
172 selectItem: (
173 item: Item,
174 otherStateToSet?: Partial<StateChangeOptions<Item>>,
175 cb?: Callback,
176 ) => void
177 selectItemAtIndex: (
178 index: number,
179 otherStateToSet?: Partial<StateChangeOptions<Item>>,
180 cb?: Callback,
181 ) => void
182 selectHighlightedItem: (
183 otherStateToSet?: Partial<StateChangeOptions<Item>>,
184 cb?: Callback,
185 ) => void
186 setHighlightedIndex: (
187 index: number,
188 otherStateToSet?: Partial<StateChangeOptions<Item>>,
189 cb?: Callback,
190 ) => void
191 clearSelection: (cb?: Callback) => void
192 clearItems: () => void
193 setItemCount: (count: number) => void
194 unsetItemCount: () => void
195 setState: (
196 stateToSet: Partial<StateChangeOptions<Item>> | StateChangeFunction<Item>,
197 cb?: Callback,
198 ) => void
199 // props
200 itemToString: (item: Item | null) => string
201}
202
203export type ControllerStateAndHelpers<Item> = DownshiftState<Item> &
204 PropGetters<Item> &
205 Actions<Item>
206
207export type ChildrenFunction<Item> = (
208 options: ControllerStateAndHelpers<Item>,
209) => React.ReactNode
210
211export default class Downshift<Item = any> extends React.Component<
212 DownshiftProps<Item>
213> {
214 static stateChangeTypes: {
215 unknown: StateChangeTypes.unknown
216 mouseUp: StateChangeTypes.mouseUp
217 itemMouseEnter: StateChangeTypes.itemMouseEnter
218 keyDownArrowUp: StateChangeTypes.keyDownArrowUp
219 keyDownArrowDown: StateChangeTypes.keyDownArrowDown
220 keyDownEscape: StateChangeTypes.keyDownEscape
221 keyDownEnter: StateChangeTypes.keyDownEnter
222 clickItem: StateChangeTypes.clickItem
223 blurInput: StateChangeTypes.blurInput
224 changeInput: StateChangeTypes.changeInput
225 keyDownSpaceButton: StateChangeTypes.keyDownSpaceButton
226 clickButton: StateChangeTypes.clickButton
227 blurButton: StateChangeTypes.blurButton
228 controlledPropUpdatedSelectedItem: StateChangeTypes.controlledPropUpdatedSelectedItem
229 touchEnd: StateChangeTypes.touchEnd
230 }
231}
232
233export function resetIdCounter(): void
234
235/* useSelect Types */
236
237export interface UseSelectState<Item> {
238 highlightedIndex: number
239 selectedItem: Item | null
240 isOpen: boolean
241 inputValue: string
242}
243
244export enum UseSelectStateChangeTypes {
245 MenuKeyDownArrowDown = '__menu_keydown_arrow_down__',
246 MenuKeyDownArrowUp = '__menu_keydown_arrow_up__',
247 MenuKeyDownEscape = '__menu_keydown_escape__',
248 MenuKeyDownHome = '__menu_keydown_home__',
249 MenuKeyDownEnd = '__menu_keydown_end__',
250 MenuKeyDownEnter = '__menu_keydown_enter__',
251 MenuKeyDownSpaceButton = '__menu_keydown_space_button__',
252 MenuKeyDownCharacter = '__menu_keydown_character__',
253 MenuBlur = '__menu_blur__',
254 MenuMouseLeave = '__menu_mouse_leave__',
255 ItemMouseMove = '__item_mouse_move__',
256 ItemClick = '__item_click__',
257 ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__',
258 ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__',
259 ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__',
260 ToggleButtonClick = '__togglebutton_click__',
261 FunctionToggleMenu = '__function_toggle_menu__',
262 FunctionOpenMenu = '__function_open_menu__',
263 FunctionCloseMenu = '__function_close_menu__',
264 FunctionSetHighlightedIndex = '__function_set_highlighted_index__',
265 FunctionSelectItem = '__function_select_item__',
266 FunctionSetInputValue = '__function_set_input_value__',
267 FunctionReset = '__function_reset__',
268}
269
270export interface UseSelectProps<Item> {
271 items: Item[]
272 itemToString?: (item: Item | null) => string
273 getA11yStatusMessage?: (options: A11yStatusMessageOptions<Item>) => string
274 getA11ySelectionMessage?: (options: A11yStatusMessageOptions<Item>) => string
275 circularNavigation?: boolean
276 highlightedIndex?: number
277 initialHighlightedIndex?: number
278 defaultHighlightedIndex?: number
279 isOpen?: boolean
280 initialIsOpen?: boolean
281 defaultIsOpen?: boolean
282 selectedItem?: Item | null
283 initialSelectedItem?: Item | null
284 defaultSelectedItem?: Item | null
285 id?: string
286 labelId?: string
287 menuId?: string
288 toggleButtonId?: string
289 getItemId?: (index: number) => string
290 scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
291 stateReducer?: (
292 state: UseSelectState<Item>,
293 actionAndChanges: UseSelectStateChangeOptions<Item>,
294 ) => Partial<UseSelectState<Item>>
295 onSelectedItemChange?: (changes: UseSelectStateChange<Item>) => void
296 onIsOpenChange?: (changes: UseSelectStateChange<Item>) => void
297 onHighlightedIndexChange?: (changes: UseSelectStateChange<Item>) => void
298 onStateChange?: (changes: UseSelectStateChange<Item>) => void
299 environment?: Environment
300}
301
302export interface UseSelectStateChangeOptions<Item>
303 extends UseSelectDispatchAction<Item> {
304 changes: Partial<UseSelectState<Item>>
305}
306
307export interface UseSelectDispatchAction<Item> {
308 type: UseSelectStateChangeTypes
309 getItemNodeFromIndex?: (index: number) => HTMLElement
310 shiftKey?: boolean
311 key?: string
312 index?: number
313 highlightedIndex?: number
314 selectedItem?: Item | null
315 inputValue?: string
316}
317
318export interface UseSelectStateChange<Item>
319 extends Partial<UseSelectState<Item>> {
320 type: UseSelectStateChangeTypes
321}
322
323export interface UseSelectGetMenuPropsOptions
324 extends GetPropsWithRefKey,
325 GetMenuPropsOptions {}
326
327export interface UseSelectGetToggleButtonPropsOptions
328 extends GetPropsWithRefKey,
329 GetToggleButtonPropsOptions {}
330
331export interface UseSelectGetLabelPropsOptions extends GetLabelPropsOptions {}
332
333export interface UseSelectGetItemPropsOptions<Item>
334 extends GetItemPropsOptions<Item>,
335 GetPropsWithRefKey {}
336
337export interface UseSelectPropGetters<Item> {
338 getToggleButtonProps: (
339 options?: UseSelectGetToggleButtonPropsOptions,
340 otherOptions?: GetPropsCommonOptions,
341 ) => any
342 getLabelProps: (options?: UseSelectGetLabelPropsOptions) => any
343 getMenuProps: (
344 options?: UseSelectGetMenuPropsOptions,
345 otherOptions?: GetPropsCommonOptions,
346 ) => any
347 getItemProps: (options: UseSelectGetItemPropsOptions<Item>) => any
348}
349
350export interface UseSelectActions<Item> {
351 reset: () => void
352 openMenu: () => void
353 closeMenu: () => void
354 toggleMenu: () => void
355 selectItem: (item: Item) => void
356 setHighlightedIndex: (index: number) => void
357}
358
359export type UseSelectReturnValue<Item> = UseSelectState<Item> &
360 UseSelectPropGetters<Item> &
361 UseSelectActions<Item>
362
363export interface UseSelectInterface {
364 <Item>(props: UseSelectProps<Item>): UseSelectReturnValue<Item>
365 stateChangeTypes: {
366 MenuKeyDownArrowDown: UseSelectStateChangeTypes.MenuKeyDownArrowDown
367 MenuKeyDownArrowUp: UseSelectStateChangeTypes.MenuKeyDownArrowUp
368 MenuKeyDownEscape: UseSelectStateChangeTypes.MenuKeyDownEscape
369 MenuKeyDownHome: UseSelectStateChangeTypes.MenuKeyDownHome
370 MenuKeyDownEnd: UseSelectStateChangeTypes.MenuKeyDownEnd
371 MenuKeyDownEnter: UseSelectStateChangeTypes.MenuKeyDownEnter
372 MenuKeyDownSpaceButton: UseSelectStateChangeTypes.MenuKeyDownSpaceButton
373 MenuKeyDownCharacter: UseSelectStateChangeTypes.MenuKeyDownCharacter
374 MenuBlur: UseSelectStateChangeTypes.MenuBlur
375 MenuMouseLeave: UseSelectStateChangeTypes.MenuMouseLeave
376 ItemMouseMove: UseSelectStateChangeTypes.ItemMouseMove
377 ItemClick: UseSelectStateChangeTypes.ItemClick
378 ToggleButtonClick: UseSelectStateChangeTypes.ToggleButtonClick
379 ToggleButtonKeyDownCharacter: UseSelectStateChangeTypes.ToggleButtonKeyDownCharacter
380 ToggleButtonKeyDownArrowDown: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowDown
381 ToggleButtonKeyDownArrowUp: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowUp
382 FunctionToggleMenu: UseSelectStateChangeTypes.FunctionToggleMenu
383 FunctionOpenMenu: UseSelectStateChangeTypes.FunctionOpenMenu
384 FunctionCloseMenu: UseSelectStateChangeTypes.FunctionCloseMenu
385 FunctionSetHighlightedIndex: UseSelectStateChangeTypes.FunctionSetHighlightedIndex
386 FunctionSelectItem: UseSelectStateChangeTypes.FunctionSelectItem
387 FunctionSetInputValue: UseSelectStateChangeTypes.FunctionSetInputValue
388 FunctionReset: UseSelectStateChangeTypes.FunctionReset
389 }
390}
391
392export const useSelect: UseSelectInterface
393
394/* useCombobox Types */
395
396export interface UseComboboxState<Item> {
397 highlightedIndex: number
398 selectedItem: Item | null
399 isOpen: boolean
400 inputValue: string
401}
402
403export enum UseComboboxStateChangeTypes {
404 InputKeyDownArrowDown = '__input_keydown_arrow_down__',
405 InputKeyDownArrowUp = '__input_keydown_arrow_up__',
406 InputKeyDownEscape = '__input_keydown_escape__',
407 InputKeyDownHome = '__input_keydown_home__',
408 InputKeyDownEnd = '__input_keydown_end__',
409 InputKeyDownEnter = '__input_keydown_enter__',
410 InputChange = '__input_change__',
411 InputBlur = '__input_blur__',
412 MenuMouseLeave = '__menu_mouse_leave__',
413 ItemMouseMove = '__item_mouse_move__',
414 ItemClick = '__item_click__',
415 ToggleButtonClick = '__togglebutton_click__',
416 FunctionToggleMenu = '__function_toggle_menu__',
417 FunctionOpenMenu = '__function_open_menu__',
418 FunctionCloseMenu = '__function_close_menu__',
419 FunctionSetHighlightedIndex = '__function_set_highlighted_index__',
420 FunctionSelectItem = '__function_select_item__',
421 FunctionSetInputValue = '__function_set_input_value__',
422 FunctionReset = '__function_reset__',
423 ControlledPropUpdatedSelectedItem = '__controlled_prop_updated_selected_item__',
424}
425
426export interface UseComboboxProps<Item> {
427 items: Item[]
428 itemToString?: (item: Item | null) => string
429 getA11yStatusMessage?: (options: A11yStatusMessageOptions<Item>) => string
430 getA11ySelectionMessage?: (options: A11yStatusMessageOptions<Item>) => string
431 circularNavigation?: boolean
432 highlightedIndex?: number
433 initialHighlightedIndex?: number
434 defaultHighlightedIndex?: number
435 isOpen?: boolean
436 initialIsOpen?: boolean
437 defaultIsOpen?: boolean
438 selectedItem?: Item | null
439 initialSelectedItem?: Item | null
440 defaultSelectedItem?: Item | null
441 inputValue?: string
442 initialInputValue?: string
443 defaultInputValue?: string
444 id?: string
445 labelId?: string
446 menuId?: string
447 toggleButtonId?: string
448 inputId?: string
449 getItemId?: (index: number) => string
450 scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void
451 stateReducer?: (
452 state: UseComboboxState<Item>,
453 actionAndChanges: UseComboboxStateChangeOptions<Item>,
454 ) => Partial<UseComboboxState<Item>>
455 onSelectedItemChange?: (changes: UseComboboxStateChange<Item>) => void
456 onIsOpenChange?: (changes: UseComboboxStateChange<Item>) => void
457 onHighlightedIndexChange?: (changes: UseComboboxStateChange<Item>) => void
458 onStateChange?: (changes: UseComboboxStateChange<Item>) => void
459 onInputValueChange?: (changes: UseComboboxStateChange<Item>) => void
460 environment?: Environment
461}
462
463export interface UseComboboxStateChangeOptions<Item>
464 extends UseComboboxDispatchAction<Item> {
465 changes: Partial<UseComboboxState<Item>>
466}
467
468export interface UseComboboxDispatchAction<Item> {
469 type: UseComboboxStateChangeTypes
470 shiftKey?: boolean
471 getItemNodeFromIndex?: (index: number) => HTMLElement
472 inputValue?: string
473 index?: number
474 highlightedIndex?: number
475 selectedItem?: Item | null
476 selectItem?: boolean
477}
478
479export interface UseComboboxStateChange<Item>
480 extends Partial<UseComboboxState<Item>> {
481 type: UseComboboxStateChangeTypes
482}
483
484export interface UseComboboxGetMenuPropsOptions
485 extends GetPropsWithRefKey,
486 GetMenuPropsOptions {}
487
488export interface UseComboboxGetToggleButtonPropsOptions
489 extends GetPropsWithRefKey,
490 GetToggleButtonPropsOptions {}
491
492export interface UseComboboxGetLabelPropsOptions extends GetLabelPropsOptions {}
493
494export interface UseComboboxGetItemPropsOptions<Item>
495 extends GetItemPropsOptions<Item>,
496 GetPropsWithRefKey {}
497
498export interface UseComboboxGetInputPropsOptions
499 extends GetInputPropsOptions,
500 GetPropsWithRefKey {}
501
502export interface UseComboboxGetComboboxPropsOptions
503 extends React.HTMLProps<HTMLDivElement> {}
504
505export interface UseComboboxPropGetters<Item> {
506 getToggleButtonProps: (
507 options?: UseComboboxGetToggleButtonPropsOptions,
508 ) => any
509 getLabelProps: (options?: UseComboboxGetLabelPropsOptions) => any
510 getMenuProps: (
511 options?: UseComboboxGetMenuPropsOptions,
512 otherOptions?: GetPropsCommonOptions,
513 ) => any
514 getItemProps: (options: UseComboboxGetItemPropsOptions<Item>) => any
515 getInputProps: (
516 options?: UseComboboxGetInputPropsOptions,
517 otherOptions?: GetPropsCommonOptions,
518 ) => any
519 getComboboxProps: (
520 options?: UseComboboxGetComboboxPropsOptions,
521 otherOptions?: GetPropsCommonOptions,
522 ) => any
523}
524
525export interface UseComboboxActions<Item> {
526 reset: () => void
527 openMenu: () => void
528 closeMenu: () => void
529 toggleMenu: () => void
530 selectItem: (item: Item) => void
531 setHighlightedIndex: (index: number) => void
532 setInputValue: (inputValue: string) => void
533}
534
535export type UseComboboxReturnValue<Item> = UseComboboxState<Item> &
536 UseComboboxPropGetters<Item> &
537 UseComboboxActions<Item>
538
539export interface UseComboboxInterface {
540 <Item>(props: UseComboboxProps<Item>): UseComboboxReturnValue<Item>
541 stateChangeTypes: {
542 InputKeyDownArrowDown: UseComboboxStateChangeTypes.InputKeyDownArrowDown
543 InputKeyDownArrowUp: UseComboboxStateChangeTypes.InputKeyDownArrowUp
544 InputKeyDownEscape: UseComboboxStateChangeTypes.InputKeyDownEscape
545 InputKeyDownHome: UseComboboxStateChangeTypes.InputKeyDownHome
546 InputKeyDownEnd: UseComboboxStateChangeTypes.InputKeyDownEnd
547 InputKeyDownEnter: UseComboboxStateChangeTypes.InputKeyDownEnter
548 InputChange: UseComboboxStateChangeTypes.InputChange
549 InputBlur: UseComboboxStateChangeTypes.InputBlur
550 MenuMouseLeave: UseComboboxStateChangeTypes.MenuMouseLeave
551 ItemMouseMove: UseComboboxStateChangeTypes.ItemMouseMove
552 ItemClick: UseComboboxStateChangeTypes.ItemClick
553 ToggleButtonClick: UseComboboxStateChangeTypes.ToggleButtonClick
554 FunctionToggleMenu: UseComboboxStateChangeTypes.FunctionToggleMenu
555 FunctionOpenMenu: UseComboboxStateChangeTypes.FunctionOpenMenu
556 FunctionCloseMenu: UseComboboxStateChangeTypes.FunctionCloseMenu
557 FunctionSetHighlightedIndex: UseComboboxStateChangeTypes.FunctionSetHighlightedIndex
558 FunctionSelectItem: UseComboboxStateChangeTypes.FunctionSelectItem
559 FunctionSetInputValue: UseComboboxStateChangeTypes.FunctionSetInputValue
560 FunctionReset: UseComboboxStateChangeTypes.FunctionReset
561 ControlledPropUpdatedSelectedItem: UseComboboxStateChangeTypes.ControlledPropUpdatedSelectedItem
562 }
563}
564
565export const useCombobox: UseComboboxInterface
566
567// useMultipleSelection types.
568
569export interface UseMultipleSelectionState<Item> {
570 selectedItems: Item[]
571 activeIndex: number
572}
573
574export enum UseMultipleSelectionStateChangeTypes {
575 SelectedItemClick = '__selected_item_click__',
576 SelectedItemKeyDownDelete = '__selected_item_keydown_delete__',
577 SelectedItemKeyDownBackspace = '__selected_item_keydown_backspace__',
578 SelectedItemKeyDownNavigationNext = '__selected_item_keydown_navigation_next__',
579 SelectedItemKeyDownNavigationPrevious = '__selected_item_keydown_navigation_previous__',
580 DropdownKeyDownNavigationPrevious = '__dropdown_keydown_navigation_previous__',
581 DropdownKeyDownBackspace = '__dropdown_keydown_backspace__',
582 DropdownClick = '__dropdown_click__',
583 FunctionAddSelectedItem = '__function_add_selected_item__',
584 FunctionRemoveSelectedItem = '__function_remove_selected_item__',
585 FunctionSetSelectedItems = '__function_set_selected_items__',
586 FunctionSetActiveIndex = '__function_set_active_index__',
587 FunctionReset = '__function_reset__',
588}
589
590export interface UseMultipleSelectionProps<Item> {
591 selectedItems?: Item[]
592 initialSelectedItems?: Item[]
593 defaultSelectedItems?: Item[]
594 itemToString?: (item: Item) => string
595 getA11yRemovalMessage?: (options: A11yRemovalMessage<Item>) => string
596 stateReducer?: (
597 state: UseMultipleSelectionState<Item>,
598 actionAndChanges: UseMultipleSelectionStateChangeOptions<Item>,
599 ) => Partial<UseMultipleSelectionState<Item>>
600 activeIndex?: number
601 initialActiveIndex?: number
602 defaultActiveIndex?: number
603 onActiveIndexChange?: (changes: UseMultipleSelectionStateChange<Item>) => void
604 onSelectedItemsChange?: (
605 changes: UseMultipleSelectionStateChange<Item>,
606 ) => void
607 onStateChange?: (changes: UseMultipleSelectionStateChange<Item>) => void
608 keyNavigationNext?: string
609 keyNavigationPrevious?: string
610 environment?: Environment
611}
612
613export interface UseMultipleSelectionStateChangeOptions<Item>
614 extends UseMultipleSelectionDispatchAction<Item> {
615 changes: Partial<UseMultipleSelectionState<Item>>
616}
617
618export interface UseMultipleSelectionDispatchAction<Item> {
619 type: UseMultipleSelectionStateChangeTypes
620 index?: number
621 selectedItem?: Item | null
622 selectedItems?: Item[]
623 activeIndex?: number
624}
625
626export interface UseMultipleSelectionStateChange<Item>
627 extends Partial<UseMultipleSelectionState<Item>> {
628 type: UseMultipleSelectionStateChangeTypes
629}
630
631export interface A11yRemovalMessage<Item> {
632 itemToString: (item: Item) => string
633 resultCount: number
634 activeSelectedItem: Item
635 removedSelectedItem: Item
636 activeIndex: number
637}
638
639export interface UseMultipleSelectionGetSelectedItemPropsOptions<Item>
640 extends React.HTMLProps<HTMLElement>,
641 GetPropsWithRefKey {
642 index?: number
643 selectedItem: Item
644}
645
646export interface UseMultipleSelectionComboboxGetDropdownProps
647 extends GetInputPropsOptions,
648 GetPropsWithRefKey {
649 preventKeyAction?: boolean
650}
651
652export interface UseMultipleSelectionSelectGetDropdownProps
653 extends GetToggleButtonPropsOptions,
654 GetPropsWithRefKey {
655 preventKeyAction?: boolean
656}
657
658export type UseMultipleSelectionGetDropdownProps =
659 | UseMultipleSelectionSelectGetDropdownProps
660 | UseMultipleSelectionComboboxGetDropdownProps
661
662export interface UseMultipleSelectionPropGetters<Item> {
663 getDropdownProps: (
664 options?: UseMultipleSelectionGetDropdownProps,
665 extraOptions?: GetPropsCommonOptions,
666 ) => any
667 getSelectedItemProps: (
668 options: UseMultipleSelectionGetSelectedItemPropsOptions<Item>,
669 ) => any
670}
671
672export interface UseMultipleSelectionActions<Item> {
673 reset: () => void
674 addSelectedItem: (item: Item) => void
675 removeSelectedItem: (item: Item) => void
676 setSelectedItems: (items: Item[]) => void
677 setActiveIndex: (index: number) => void
678}
679
680export type UseMultipleSelectionReturnValue<
681 Item
682> = UseMultipleSelectionState<Item> &
683 UseMultipleSelectionPropGetters<Item> &
684 UseMultipleSelectionActions<Item>
685
686export interface UseMultipleSelectionInterface {
687 <Item>(
688 props?: UseMultipleSelectionProps<Item>,
689 ): UseMultipleSelectionReturnValue<Item>
690 stateChangeTypes: {
691 SelectedItemClick: UseMultipleSelectionStateChangeTypes.SelectedItemClick
692 SelectedItemKeyDownDelete: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownDelete
693 SelectedItemKeyDownBackspace: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownBackspace
694 SelectedItemKeyDownNavigationNext: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownNavigationNext
695 SelectedItemKeyDownNavigationPrevious: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownNavigationPrevious
696 DropdownKeyDownNavigationPrevious: UseMultipleSelectionStateChangeTypes.DropdownKeyDownNavigationPrevious
697 DropdownKeyDownBackspace: UseMultipleSelectionStateChangeTypes.DropdownKeyDownBackspace
698 DropdownClick: UseMultipleSelectionStateChangeTypes.DropdownClick
699 FunctionAddSelectedItem: UseMultipleSelectionStateChangeTypes.FunctionAddSelectedItem
700 FunctionRemoveSelectedItem: UseMultipleSelectionStateChangeTypes.FunctionRemoveSelectedItem
701 FunctionSetSelectedItems: UseMultipleSelectionStateChangeTypes.FunctionSetSelectedItems
702 FunctionSetActiveIndex: UseMultipleSelectionStateChangeTypes.FunctionSetActiveIndex
703 FunctionReset: UseMultipleSelectionStateChangeTypes.FunctionReset
704 }
705}
706
707export const useMultipleSelection: UseMultipleSelectionInterface