import * as React from 'react' type Callback = () => void export interface DownshiftState { highlightedIndex: number | null inputValue: string | null isOpen: boolean selectedItem: Item | null } export enum StateChangeTypes { unknown = '__autocomplete_unknown__', mouseUp = '__autocomplete_mouseup__', itemMouseEnter = '__autocomplete_item_mouseenter__', keyDownArrowUp = '__autocomplete_keydown_arrow_up__', keyDownArrowDown = '__autocomplete_keydown_arrow_down__', keyDownEscape = '__autocomplete_keydown_escape__', keyDownEnter = '__autocomplete_keydown_enter__', clickItem = '__autocomplete_click_item__', blurInput = '__autocomplete_blur_input__', changeInput = '__autocomplete_change_input__', keyDownSpaceButton = '__autocomplete_keydown_space_button__', clickButton = '__autocomplete_click_button__', blurButton = '__autocomplete_blur_button__', controlledPropUpdatedSelectedItem = '__autocomplete_controlled_prop_updated_selected_item__', touchEnd = '__autocomplete_touchend__', } export interface DownshiftProps { initialSelectedItem?: Item initialInputValue?: string initialHighlightedIndex?: number | null initialIsOpen?: boolean defaultHighlightedIndex?: number | null defaultIsOpen?: boolean itemToString?: (item: Item | null) => string selectedItemChanged?: (prevItem: Item, item: Item) => boolean getA11yStatusMessage?: (options: A11yStatusMessageOptions) => string onChange?: ( selectedItem: Item | null, stateAndHelpers: ControllerStateAndHelpers, ) => void onSelect?: ( selectedItem: Item | null, stateAndHelpers: ControllerStateAndHelpers, ) => void onStateChange?: ( options: StateChangeOptions, stateAndHelpers: ControllerStateAndHelpers, ) => void onInputValueChange?: ( inputValue: string, stateAndHelpers: ControllerStateAndHelpers, ) => void stateReducer?: ( state: DownshiftState, changes: StateChangeOptions, ) => Partial> itemCount?: number highlightedIndex?: number | null inputValue?: string | null isOpen?: boolean selectedItem?: Item | null children?: ChildrenFunction id?: string inputId?: string labelId?: string menuId?: string getItemId?: (index?: number) => string environment?: Environment onOuterClick?: (stateAndHelpers: ControllerStateAndHelpers) => void scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void onUserAction?: ( options: StateChangeOptions, stateAndHelpers: ControllerStateAndHelpers, ) => void suppressRefError?: boolean } export interface Environment { addEventListener: typeof window.addEventListener removeEventListener: typeof window.removeEventListener document: Document } export interface A11yStatusMessageOptions { highlightedIndex: number | null inputValue: string isOpen: boolean itemToString: (item: Item | null) => string previousResultCount: number resultCount: number highlightedItem: Item selectedItem: Item | null } export interface StateChangeOptions extends Partial> { type: StateChangeTypes } type StateChangeFunction = ( state: DownshiftState, ) => Partial> export interface GetRootPropsOptions { refKey: string } export interface GetInputPropsOptions extends React.HTMLProps { disabled?: boolean } export interface GetLabelPropsOptions extends React.HTMLProps {} export interface GetToggleButtonPropsOptions extends React.HTMLProps { disabled?: boolean } export interface GetMenuPropsOptions extends React.HTMLProps, GetPropsWithRefKey { ['aria-label']?: string } export interface GetPropsCommonOptions { suppressRefError?: boolean } export interface GetPropsWithRefKey { refKey?: string } export interface GetItemPropsOptions extends React.HTMLProps { index?: number item: Item isSelected?: boolean disabled?: boolean } export interface PropGetters { getRootProps: ( options?: GetRootPropsOptions, otherOptions?: GetPropsCommonOptions, ) => any getToggleButtonProps: (options?: GetToggleButtonPropsOptions) => any getLabelProps: (options?: GetLabelPropsOptions) => any getMenuProps: ( options?: GetMenuPropsOptions, otherOptions?: GetPropsCommonOptions, ) => any getInputProps: (options?: T) => T & GetInputPropsOptions getItemProps: (options: GetItemPropsOptions) => any } export interface Actions { reset: ( otherStateToSet?: Partial>, cb?: Callback, ) => void openMenu: (cb?: Callback) => void closeMenu: (cb?: Callback) => void toggleMenu: ( otherStateToSet?: Partial>, cb?: Callback, ) => void selectItem: ( item: Item, otherStateToSet?: Partial>, cb?: Callback, ) => void selectItemAtIndex: ( index: number, otherStateToSet?: Partial>, cb?: Callback, ) => void selectHighlightedItem: ( otherStateToSet?: Partial>, cb?: Callback, ) => void setHighlightedIndex: ( index: number, otherStateToSet?: Partial>, cb?: Callback, ) => void clearSelection: (cb?: Callback) => void clearItems: () => void setItemCount: (count: number) => void unsetItemCount: () => void setState: ( stateToSet: Partial> | StateChangeFunction, cb?: Callback, ) => void // props itemToString: (item: Item | null) => string } export type ControllerStateAndHelpers = DownshiftState & PropGetters & Actions export type ChildrenFunction = ( options: ControllerStateAndHelpers, ) => React.ReactNode export default class Downshift extends React.Component< DownshiftProps > { static stateChangeTypes: { unknown: StateChangeTypes.unknown mouseUp: StateChangeTypes.mouseUp itemMouseEnter: StateChangeTypes.itemMouseEnter keyDownArrowUp: StateChangeTypes.keyDownArrowUp keyDownArrowDown: StateChangeTypes.keyDownArrowDown keyDownEscape: StateChangeTypes.keyDownEscape keyDownEnter: StateChangeTypes.keyDownEnter clickItem: StateChangeTypes.clickItem blurInput: StateChangeTypes.blurInput changeInput: StateChangeTypes.changeInput keyDownSpaceButton: StateChangeTypes.keyDownSpaceButton clickButton: StateChangeTypes.clickButton blurButton: StateChangeTypes.blurButton controlledPropUpdatedSelectedItem: StateChangeTypes.controlledPropUpdatedSelectedItem touchEnd: StateChangeTypes.touchEnd } } export function resetIdCounter(): void /* useSelect Types */ export interface UseSelectState { highlightedIndex: number selectedItem: Item | null isOpen: boolean inputValue: string } export enum UseSelectStateChangeTypes { MenuKeyDownArrowDown = '__menu_keydown_arrow_down__', MenuKeyDownArrowUp = '__menu_keydown_arrow_up__', MenuKeyDownEscape = '__menu_keydown_escape__', MenuKeyDownHome = '__menu_keydown_home__', MenuKeyDownEnd = '__menu_keydown_end__', MenuKeyDownEnter = '__menu_keydown_enter__', MenuKeyDownSpaceButton = '__menu_keydown_space_button__', MenuKeyDownCharacter = '__menu_keydown_character__', MenuBlur = '__menu_blur__', MenuMouseLeave = '__menu_mouse_leave__', ItemMouseMove = '__item_mouse_move__', ItemClick = '__item_click__', ToggleButtonKeyDownCharacter = '__togglebutton_keydown_character__', ToggleButtonKeyDownArrowDown = '__togglebutton_keydown_arrow_down__', ToggleButtonKeyDownArrowUp = '__togglebutton_keydown_arrow_up__', ToggleButtonClick = '__togglebutton_click__', FunctionToggleMenu = '__function_toggle_menu__', FunctionOpenMenu = '__function_open_menu__', FunctionCloseMenu = '__function_close_menu__', FunctionSetHighlightedIndex = '__function_set_highlighted_index__', FunctionSelectItem = '__function_select_item__', FunctionSetInputValue = '__function_set_input_value__', FunctionReset = '__function_reset__', } export interface UseSelectProps { items: Item[] itemToString?: (item: Item | null) => string getA11yStatusMessage?: (options: A11yStatusMessageOptions) => string getA11ySelectionMessage?: (options: A11yStatusMessageOptions) => string circularNavigation?: boolean highlightedIndex?: number initialHighlightedIndex?: number defaultHighlightedIndex?: number isOpen?: boolean initialIsOpen?: boolean defaultIsOpen?: boolean selectedItem?: Item | null initialSelectedItem?: Item | null defaultSelectedItem?: Item | null id?: string labelId?: string menuId?: string toggleButtonId?: string getItemId?: (index: number) => string scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void stateReducer?: ( state: UseSelectState, actionAndChanges: UseSelectStateChangeOptions, ) => Partial> onSelectedItemChange?: (changes: UseSelectStateChange) => void onIsOpenChange?: (changes: UseSelectStateChange) => void onHighlightedIndexChange?: (changes: UseSelectStateChange) => void onStateChange?: (changes: UseSelectStateChange) => void environment?: Environment } export interface UseSelectStateChangeOptions extends UseSelectDispatchAction { changes: Partial> } export interface UseSelectDispatchAction { type: UseSelectStateChangeTypes getItemNodeFromIndex?: (index: number) => HTMLElement shiftKey?: boolean key?: string index?: number highlightedIndex?: number selectedItem?: Item | null inputValue?: string } export interface UseSelectStateChange extends Partial> { type: UseSelectStateChangeTypes } export interface UseSelectGetMenuPropsOptions extends GetPropsWithRefKey, GetMenuPropsOptions {} export interface UseSelectGetToggleButtonPropsOptions extends GetPropsWithRefKey, GetToggleButtonPropsOptions {} export interface UseSelectGetLabelPropsOptions extends GetLabelPropsOptions {} export interface UseSelectGetItemPropsOptions extends GetItemPropsOptions, GetPropsWithRefKey {} export interface UseSelectPropGetters { getToggleButtonProps: ( options?: UseSelectGetToggleButtonPropsOptions, otherOptions?: GetPropsCommonOptions, ) => any getLabelProps: (options?: UseSelectGetLabelPropsOptions) => any getMenuProps: ( options?: UseSelectGetMenuPropsOptions, otherOptions?: GetPropsCommonOptions, ) => any getItemProps: (options: UseSelectGetItemPropsOptions) => any } export interface UseSelectActions { reset: () => void openMenu: () => void closeMenu: () => void toggleMenu: () => void selectItem: (item: Item) => void setHighlightedIndex: (index: number) => void } export type UseSelectReturnValue = UseSelectState & UseSelectPropGetters & UseSelectActions export interface UseSelectInterface { (props: UseSelectProps): UseSelectReturnValue stateChangeTypes: { MenuKeyDownArrowDown: UseSelectStateChangeTypes.MenuKeyDownArrowDown MenuKeyDownArrowUp: UseSelectStateChangeTypes.MenuKeyDownArrowUp MenuKeyDownEscape: UseSelectStateChangeTypes.MenuKeyDownEscape MenuKeyDownHome: UseSelectStateChangeTypes.MenuKeyDownHome MenuKeyDownEnd: UseSelectStateChangeTypes.MenuKeyDownEnd MenuKeyDownEnter: UseSelectStateChangeTypes.MenuKeyDownEnter MenuKeyDownSpaceButton: UseSelectStateChangeTypes.MenuKeyDownSpaceButton MenuKeyDownCharacter: UseSelectStateChangeTypes.MenuKeyDownCharacter MenuBlur: UseSelectStateChangeTypes.MenuBlur MenuMouseLeave: UseSelectStateChangeTypes.MenuMouseLeave ItemMouseMove: UseSelectStateChangeTypes.ItemMouseMove ItemClick: UseSelectStateChangeTypes.ItemClick ToggleButtonClick: UseSelectStateChangeTypes.ToggleButtonClick ToggleButtonKeyDownCharacter: UseSelectStateChangeTypes.ToggleButtonKeyDownCharacter ToggleButtonKeyDownArrowDown: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowDown ToggleButtonKeyDownArrowUp: UseSelectStateChangeTypes.ToggleButtonKeyDownArrowUp FunctionToggleMenu: UseSelectStateChangeTypes.FunctionToggleMenu FunctionOpenMenu: UseSelectStateChangeTypes.FunctionOpenMenu FunctionCloseMenu: UseSelectStateChangeTypes.FunctionCloseMenu FunctionSetHighlightedIndex: UseSelectStateChangeTypes.FunctionSetHighlightedIndex FunctionSelectItem: UseSelectStateChangeTypes.FunctionSelectItem FunctionSetInputValue: UseSelectStateChangeTypes.FunctionSetInputValue FunctionReset: UseSelectStateChangeTypes.FunctionReset } } export const useSelect: UseSelectInterface /* useCombobox Types */ export interface UseComboboxState { highlightedIndex: number selectedItem: Item | null isOpen: boolean inputValue: string } export enum UseComboboxStateChangeTypes { InputKeyDownArrowDown = '__input_keydown_arrow_down__', InputKeyDownArrowUp = '__input_keydown_arrow_up__', InputKeyDownEscape = '__input_keydown_escape__', InputKeyDownHome = '__input_keydown_home__', InputKeyDownEnd = '__input_keydown_end__', InputKeyDownEnter = '__input_keydown_enter__', InputChange = '__input_change__', InputBlur = '__input_blur__', MenuMouseLeave = '__menu_mouse_leave__', ItemMouseMove = '__item_mouse_move__', ItemClick = '__item_click__', ToggleButtonClick = '__togglebutton_click__', FunctionToggleMenu = '__function_toggle_menu__', FunctionOpenMenu = '__function_open_menu__', FunctionCloseMenu = '__function_close_menu__', FunctionSetHighlightedIndex = '__function_set_highlighted_index__', FunctionSelectItem = '__function_select_item__', FunctionSetInputValue = '__function_set_input_value__', FunctionReset = '__function_reset__', ControlledPropUpdatedSelectedItem = '__controlled_prop_updated_selected_item__', } export interface UseComboboxProps { items: Item[] itemToString?: (item: Item | null) => string getA11yStatusMessage?: (options: A11yStatusMessageOptions) => string getA11ySelectionMessage?: (options: A11yStatusMessageOptions) => string circularNavigation?: boolean highlightedIndex?: number initialHighlightedIndex?: number defaultHighlightedIndex?: number isOpen?: boolean initialIsOpen?: boolean defaultIsOpen?: boolean selectedItem?: Item | null initialSelectedItem?: Item | null defaultSelectedItem?: Item | null inputValue?: string initialInputValue?: string defaultInputValue?: string id?: string labelId?: string menuId?: string toggleButtonId?: string inputId?: string getItemId?: (index: number) => string scrollIntoView?: (node: HTMLElement, menuNode: HTMLElement) => void stateReducer?: ( state: UseComboboxState, actionAndChanges: UseComboboxStateChangeOptions, ) => Partial> onSelectedItemChange?: (changes: UseComboboxStateChange) => void onIsOpenChange?: (changes: UseComboboxStateChange) => void onHighlightedIndexChange?: (changes: UseComboboxStateChange) => void onStateChange?: (changes: UseComboboxStateChange) => void onInputValueChange?: (changes: UseComboboxStateChange) => void environment?: Environment } export interface UseComboboxStateChangeOptions extends UseComboboxDispatchAction { changes: Partial> } export interface UseComboboxDispatchAction { type: UseComboboxStateChangeTypes shiftKey?: boolean getItemNodeFromIndex?: (index: number) => HTMLElement inputValue?: string index?: number highlightedIndex?: number selectedItem?: Item | null selectItem?: boolean } export interface UseComboboxStateChange extends Partial> { type: UseComboboxStateChangeTypes } export interface UseComboboxGetMenuPropsOptions extends GetPropsWithRefKey, GetMenuPropsOptions {} export interface UseComboboxGetToggleButtonPropsOptions extends GetPropsWithRefKey, GetToggleButtonPropsOptions {} export interface UseComboboxGetLabelPropsOptions extends GetLabelPropsOptions {} export interface UseComboboxGetItemPropsOptions extends GetItemPropsOptions, GetPropsWithRefKey {} export interface UseComboboxGetInputPropsOptions extends GetInputPropsOptions, GetPropsWithRefKey {} export interface UseComboboxGetComboboxPropsOptions extends React.HTMLProps {} export interface UseComboboxPropGetters { getToggleButtonProps: ( options?: UseComboboxGetToggleButtonPropsOptions, ) => any getLabelProps: (options?: UseComboboxGetLabelPropsOptions) => any getMenuProps: ( options?: UseComboboxGetMenuPropsOptions, otherOptions?: GetPropsCommonOptions, ) => any getItemProps: (options: UseComboboxGetItemPropsOptions) => any getInputProps: ( options?: UseComboboxGetInputPropsOptions, otherOptions?: GetPropsCommonOptions, ) => any getComboboxProps: ( options?: UseComboboxGetComboboxPropsOptions, otherOptions?: GetPropsCommonOptions, ) => any } export interface UseComboboxActions { reset: () => void openMenu: () => void closeMenu: () => void toggleMenu: () => void selectItem: (item: Item) => void setHighlightedIndex: (index: number) => void setInputValue: (inputValue: string) => void } export type UseComboboxReturnValue = UseComboboxState & UseComboboxPropGetters & UseComboboxActions export interface UseComboboxInterface { (props: UseComboboxProps): UseComboboxReturnValue stateChangeTypes: { InputKeyDownArrowDown: UseComboboxStateChangeTypes.InputKeyDownArrowDown InputKeyDownArrowUp: UseComboboxStateChangeTypes.InputKeyDownArrowUp InputKeyDownEscape: UseComboboxStateChangeTypes.InputKeyDownEscape InputKeyDownHome: UseComboboxStateChangeTypes.InputKeyDownHome InputKeyDownEnd: UseComboboxStateChangeTypes.InputKeyDownEnd InputKeyDownEnter: UseComboboxStateChangeTypes.InputKeyDownEnter InputChange: UseComboboxStateChangeTypes.InputChange InputBlur: UseComboboxStateChangeTypes.InputBlur MenuMouseLeave: UseComboboxStateChangeTypes.MenuMouseLeave ItemMouseMove: UseComboboxStateChangeTypes.ItemMouseMove ItemClick: UseComboboxStateChangeTypes.ItemClick ToggleButtonClick: UseComboboxStateChangeTypes.ToggleButtonClick FunctionToggleMenu: UseComboboxStateChangeTypes.FunctionToggleMenu FunctionOpenMenu: UseComboboxStateChangeTypes.FunctionOpenMenu FunctionCloseMenu: UseComboboxStateChangeTypes.FunctionCloseMenu FunctionSetHighlightedIndex: UseComboboxStateChangeTypes.FunctionSetHighlightedIndex FunctionSelectItem: UseComboboxStateChangeTypes.FunctionSelectItem FunctionSetInputValue: UseComboboxStateChangeTypes.FunctionSetInputValue FunctionReset: UseComboboxStateChangeTypes.FunctionReset ControlledPropUpdatedSelectedItem: UseComboboxStateChangeTypes.ControlledPropUpdatedSelectedItem } } export const useCombobox: UseComboboxInterface // useMultipleSelection types. export interface UseMultipleSelectionState { selectedItems: Item[] activeIndex: number } export enum UseMultipleSelectionStateChangeTypes { SelectedItemClick = '__selected_item_click__', SelectedItemKeyDownDelete = '__selected_item_keydown_delete__', SelectedItemKeyDownBackspace = '__selected_item_keydown_backspace__', SelectedItemKeyDownNavigationNext = '__selected_item_keydown_navigation_next__', SelectedItemKeyDownNavigationPrevious = '__selected_item_keydown_navigation_previous__', DropdownKeyDownNavigationPrevious = '__dropdown_keydown_navigation_previous__', DropdownKeyDownBackspace = '__dropdown_keydown_backspace__', DropdownClick = '__dropdown_click__', FunctionAddSelectedItem = '__function_add_selected_item__', FunctionRemoveSelectedItem = '__function_remove_selected_item__', FunctionSetSelectedItems = '__function_set_selected_items__', FunctionSetActiveIndex = '__function_set_active_index__', FunctionReset = '__function_reset__', } export interface UseMultipleSelectionProps { selectedItems?: Item[] initialSelectedItems?: Item[] defaultSelectedItems?: Item[] itemToString?: (item: Item) => string getA11yRemovalMessage?: (options: A11yRemovalMessage) => string stateReducer?: ( state: UseMultipleSelectionState, actionAndChanges: UseMultipleSelectionStateChangeOptions, ) => Partial> activeIndex?: number initialActiveIndex?: number defaultActiveIndex?: number onActiveIndexChange?: (changes: UseMultipleSelectionStateChange) => void onSelectedItemsChange?: ( changes: UseMultipleSelectionStateChange, ) => void onStateChange?: (changes: UseMultipleSelectionStateChange) => void keyNavigationNext?: string keyNavigationPrevious?: string environment?: Environment } export interface UseMultipleSelectionStateChangeOptions extends UseMultipleSelectionDispatchAction { changes: Partial> } export interface UseMultipleSelectionDispatchAction { type: UseMultipleSelectionStateChangeTypes index?: number selectedItem?: Item | null selectedItems?: Item[] activeIndex?: number } export interface UseMultipleSelectionStateChange extends Partial> { type: UseMultipleSelectionStateChangeTypes } export interface A11yRemovalMessage { itemToString: (item: Item) => string resultCount: number activeSelectedItem: Item removedSelectedItem: Item activeIndex: number } export interface UseMultipleSelectionGetSelectedItemPropsOptions extends React.HTMLProps, GetPropsWithRefKey { index?: number selectedItem: Item } export interface UseMultipleSelectionComboboxGetDropdownProps extends GetInputPropsOptions, GetPropsWithRefKey { preventKeyAction?: boolean } export interface UseMultipleSelectionSelectGetDropdownProps extends GetToggleButtonPropsOptions, GetPropsWithRefKey { preventKeyAction?: boolean } export type UseMultipleSelectionGetDropdownProps = | UseMultipleSelectionSelectGetDropdownProps | UseMultipleSelectionComboboxGetDropdownProps export interface UseMultipleSelectionPropGetters { getDropdownProps: ( options?: UseMultipleSelectionGetDropdownProps, extraOptions?: GetPropsCommonOptions, ) => any getSelectedItemProps: ( options: UseMultipleSelectionGetSelectedItemPropsOptions, ) => any } export interface UseMultipleSelectionActions { reset: () => void addSelectedItem: (item: Item) => void removeSelectedItem: (item: Item) => void setSelectedItems: (items: Item[]) => void setActiveIndex: (index: number) => void } export type UseMultipleSelectionReturnValue< Item > = UseMultipleSelectionState & UseMultipleSelectionPropGetters & UseMultipleSelectionActions export interface UseMultipleSelectionInterface { ( props?: UseMultipleSelectionProps, ): UseMultipleSelectionReturnValue stateChangeTypes: { SelectedItemClick: UseMultipleSelectionStateChangeTypes.SelectedItemClick SelectedItemKeyDownDelete: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownDelete SelectedItemKeyDownBackspace: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownBackspace SelectedItemKeyDownNavigationNext: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownNavigationNext SelectedItemKeyDownNavigationPrevious: UseMultipleSelectionStateChangeTypes.SelectedItemKeyDownNavigationPrevious DropdownKeyDownNavigationPrevious: UseMultipleSelectionStateChangeTypes.DropdownKeyDownNavigationPrevious DropdownKeyDownBackspace: UseMultipleSelectionStateChangeTypes.DropdownKeyDownBackspace DropdownClick: UseMultipleSelectionStateChangeTypes.DropdownClick FunctionAddSelectedItem: UseMultipleSelectionStateChangeTypes.FunctionAddSelectedItem FunctionRemoveSelectedItem: UseMultipleSelectionStateChangeTypes.FunctionRemoveSelectedItem FunctionSetSelectedItems: UseMultipleSelectionStateChangeTypes.FunctionSetSelectedItems FunctionSetActiveIndex: UseMultipleSelectionStateChangeTypes.FunctionSetActiveIndex FunctionReset: UseMultipleSelectionStateChangeTypes.FunctionReset } } export const useMultipleSelection: UseMultipleSelectionInterface