1 | import * as React from 'react'
|
2 |
|
3 | type Callback = () => void
|
4 |
|
5 | export interface DownshiftState<Item> {
|
6 | highlightedIndex: number | null
|
7 | inputValue: string | null
|
8 | isOpen: boolean
|
9 | selectedItem: Item | null
|
10 | }
|
11 |
|
12 | export 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 |
|
30 | export 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 |
|
81 | export interface Environment {
|
82 | addEventListener: typeof window.addEventListener
|
83 | removeEventListener: typeof window.removeEventListener
|
84 | document: Document
|
85 | }
|
86 |
|
87 | export 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 |
|
98 | export interface StateChangeOptions<Item>
|
99 | extends Partial<DownshiftState<Item>> {
|
100 | type: StateChangeTypes
|
101 | }
|
102 |
|
103 | type StateChangeFunction<Item> = (
|
104 | state: DownshiftState<Item>,
|
105 | ) => Partial<StateChangeOptions<Item>>
|
106 |
|
107 | export interface GetRootPropsOptions {
|
108 | refKey: string
|
109 | }
|
110 |
|
111 | export interface GetInputPropsOptions
|
112 | extends React.HTMLProps<HTMLInputElement> {
|
113 | disabled?: boolean
|
114 | }
|
115 |
|
116 | export interface GetLabelPropsOptions
|
117 | extends React.HTMLProps<HTMLLabelElement> {}
|
118 |
|
119 | export interface GetToggleButtonPropsOptions
|
120 | extends React.HTMLProps<HTMLButtonElement> {
|
121 | disabled?: boolean
|
122 | }
|
123 |
|
124 | export interface GetMenuPropsOptions
|
125 | extends React.HTMLProps<HTMLElement>,
|
126 | GetPropsWithRefKey {
|
127 | ['aria-label']?: string
|
128 | }
|
129 |
|
130 | export interface GetPropsCommonOptions {
|
131 | suppressRefError?: boolean
|
132 | }
|
133 |
|
134 | export interface GetPropsWithRefKey {
|
135 | refKey?: string
|
136 | }
|
137 |
|
138 | export interface GetItemPropsOptions<Item>
|
139 | extends React.HTMLProps<HTMLElement> {
|
140 | index?: number
|
141 | item: Item
|
142 | isSelected?: boolean
|
143 | disabled?: boolean
|
144 | }
|
145 |
|
146 | export 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 |
|
161 | export 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 |
|
200 | itemToString: (item: Item | null) => string
|
201 | }
|
202 |
|
203 | export type ControllerStateAndHelpers<Item> = DownshiftState<Item> &
|
204 | PropGetters<Item> &
|
205 | Actions<Item>
|
206 |
|
207 | export type ChildrenFunction<Item> = (
|
208 | options: ControllerStateAndHelpers<Item>,
|
209 | ) => React.ReactNode
|
210 |
|
211 | export 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 |
|
233 | export function resetIdCounter(): void
|
234 |
|
235 | /* useSelect Types */
|
236 |
|
237 | export interface UseSelectState<Item> {
|
238 | highlightedIndex: number
|
239 | selectedItem: Item | null
|
240 | isOpen: boolean
|
241 | inputValue: string
|
242 | }
|
243 |
|
244 | export 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 |
|
270 | export 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 |
|
302 | export interface UseSelectStateChangeOptions<Item>
|
303 | extends UseSelectDispatchAction<Item> {
|
304 | changes: Partial<UseSelectState<Item>>
|
305 | }
|
306 |
|
307 | export 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 |
|
318 | export interface UseSelectStateChange<Item>
|
319 | extends Partial<UseSelectState<Item>> {
|
320 | type: UseSelectStateChangeTypes
|
321 | }
|
322 |
|
323 | export interface UseSelectGetMenuPropsOptions
|
324 | extends GetPropsWithRefKey,
|
325 | GetMenuPropsOptions {}
|
326 |
|
327 | export interface UseSelectGetToggleButtonPropsOptions
|
328 | extends GetPropsWithRefKey,
|
329 | GetToggleButtonPropsOptions {}
|
330 |
|
331 | export interface UseSelectGetLabelPropsOptions extends GetLabelPropsOptions {}
|
332 |
|
333 | export interface UseSelectGetItemPropsOptions<Item>
|
334 | extends GetItemPropsOptions<Item>,
|
335 | GetPropsWithRefKey {}
|
336 |
|
337 | export 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 |
|
350 | export 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 |
|
359 | export type UseSelectReturnValue<Item> = UseSelectState<Item> &
|
360 | UseSelectPropGetters<Item> &
|
361 | UseSelectActions<Item>
|
362 |
|
363 | export 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 |
|
392 | export const useSelect: UseSelectInterface
|
393 |
|
394 |
|
395 |
|
396 | export interface UseComboboxState<Item> {
|
397 | highlightedIndex: number
|
398 | selectedItem: Item | null
|
399 | isOpen: boolean
|
400 | inputValue: string
|
401 | }
|
402 |
|
403 | export 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 |
|
426 | export 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 |
|
463 | export interface UseComboboxStateChangeOptions<Item>
|
464 | extends UseComboboxDispatchAction<Item> {
|
465 | changes: Partial<UseComboboxState<Item>>
|
466 | }
|
467 |
|
468 | export 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 |
|
479 | export interface UseComboboxStateChange<Item>
|
480 | extends Partial<UseComboboxState<Item>> {
|
481 | type: UseComboboxStateChangeTypes
|
482 | }
|
483 |
|
484 | export interface UseComboboxGetMenuPropsOptions
|
485 | extends GetPropsWithRefKey,
|
486 | GetMenuPropsOptions {}
|
487 |
|
488 | export interface UseComboboxGetToggleButtonPropsOptions
|
489 | extends GetPropsWithRefKey,
|
490 | GetToggleButtonPropsOptions {}
|
491 |
|
492 | export interface UseComboboxGetLabelPropsOptions extends GetLabelPropsOptions {}
|
493 |
|
494 | export interface UseComboboxGetItemPropsOptions<Item>
|
495 | extends GetItemPropsOptions<Item>,
|
496 | GetPropsWithRefKey {}
|
497 |
|
498 | export interface UseComboboxGetInputPropsOptions
|
499 | extends GetInputPropsOptions,
|
500 | GetPropsWithRefKey {}
|
501 |
|
502 | export interface UseComboboxGetComboboxPropsOptions
|
503 | extends React.HTMLProps<HTMLDivElement> {}
|
504 |
|
505 | export 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 |
|
525 | export 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 |
|
535 | export type UseComboboxReturnValue<Item> = UseComboboxState<Item> &
|
536 | UseComboboxPropGetters<Item> &
|
537 | UseComboboxActions<Item>
|
538 |
|
539 | export 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 |
|
565 | export const useCombobox: UseComboboxInterface
|
566 |
|
567 |
|
568 |
|
569 | export interface UseMultipleSelectionState<Item> {
|
570 | selectedItems: Item[]
|
571 | activeIndex: number
|
572 | }
|
573 |
|
574 | export 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 |
|
590 | export 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 |
|
613 | export interface UseMultipleSelectionStateChangeOptions<Item>
|
614 | extends UseMultipleSelectionDispatchAction<Item> {
|
615 | changes: Partial<UseMultipleSelectionState<Item>>
|
616 | }
|
617 |
|
618 | export interface UseMultipleSelectionDispatchAction<Item> {
|
619 | type: UseMultipleSelectionStateChangeTypes
|
620 | index?: number
|
621 | selectedItem?: Item | null
|
622 | selectedItems?: Item[]
|
623 | activeIndex?: number
|
624 | }
|
625 |
|
626 | export interface UseMultipleSelectionStateChange<Item>
|
627 | extends Partial<UseMultipleSelectionState<Item>> {
|
628 | type: UseMultipleSelectionStateChangeTypes
|
629 | }
|
630 |
|
631 | export interface A11yRemovalMessage<Item> {
|
632 | itemToString: (item: Item) => string
|
633 | resultCount: number
|
634 | activeSelectedItem: Item
|
635 | removedSelectedItem: Item
|
636 | activeIndex: number
|
637 | }
|
638 |
|
639 | export interface UseMultipleSelectionGetSelectedItemPropsOptions<Item>
|
640 | extends React.HTMLProps<HTMLElement>,
|
641 | GetPropsWithRefKey {
|
642 | index?: number
|
643 | selectedItem: Item
|
644 | }
|
645 |
|
646 | export interface UseMultipleSelectionComboboxGetDropdownProps
|
647 | extends GetInputPropsOptions,
|
648 | GetPropsWithRefKey {
|
649 | preventKeyAction?: boolean
|
650 | }
|
651 |
|
652 | export interface UseMultipleSelectionSelectGetDropdownProps
|
653 | extends GetToggleButtonPropsOptions,
|
654 | GetPropsWithRefKey {
|
655 | preventKeyAction?: boolean
|
656 | }
|
657 |
|
658 | export type UseMultipleSelectionGetDropdownProps =
|
659 | | UseMultipleSelectionSelectGetDropdownProps
|
660 | | UseMultipleSelectionComboboxGetDropdownProps
|
661 |
|
662 | export interface UseMultipleSelectionPropGetters<Item> {
|
663 | getDropdownProps: (
|
664 | options?: UseMultipleSelectionGetDropdownProps,
|
665 | extraOptions?: GetPropsCommonOptions,
|
666 | ) => any
|
667 | getSelectedItemProps: (
|
668 | options: UseMultipleSelectionGetSelectedItemPropsOptions<Item>,
|
669 | ) => any
|
670 | }
|
671 |
|
672 | export 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 |
|
680 | export type UseMultipleSelectionReturnValue<
|
681 | Item
|
682 | > = UseMultipleSelectionState<Item> &
|
683 | UseMultipleSelectionPropGetters<Item> &
|
684 | UseMultipleSelectionActions<Item>
|
685 |
|
686 | export 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 |
|
707 | export const useMultipleSelection: UseMultipleSelectionInterface
|