import { ChangeEvent, ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, ReactNode, RefCallback, SyntheticEvent } from 'react'; import { ALIGN_VALUES, SIZES } from './constants'; export type Align = (typeof ALIGN_VALUES)[number]; export type AllowNew = boolean | ((options: Option[], state: TypeaheadPropsAndState) => boolean); export type FilterByCallback = (option: Option, state: TypeaheadPropsAndState) => boolean; export type Id = string; export type Option = string | Record; export type OptionHandler = (option: Option) => void; export type LabelKey = string | ((option: Option) => string); export type SelectEvent = MouseEvent | KeyboardEvent; export type SelectHint = (shouldSelectHint: boolean, event: KeyboardEvent) => boolean; export type Size = (typeof SIZES)[number]; export type TypeaheadChildren = ReactNode | ((props: TypeaheadManagerChildProps) => ReactNode); export type InputProps = Omit, 'size'>; export interface TypeaheadInputProps extends InputProps { inputClassName?: string; inputRef: RefCallback; referenceElementRef: RefCallback; } export interface RenderTokenProps { disabled?: boolean; labelKey: LabelKey; onRemove?: OptionHandler; tabIndex?: number; } export type RenderToken = (option: Option, props: RenderTokenProps, idx: number) => JSX.Element; export interface TypeaheadProps { allowNew: AllowNew; autoFocus: boolean; caseSensitive: boolean; children: TypeaheadChildren; defaultInputValue: string; defaultOpen: boolean; defaultSelected: Option[]; emptyLabel?: ReactNode; filterBy: string[] | FilterByCallback; highlightOnlyResult: boolean; id?: Id; ignoreDiacritics: boolean; inputProps?: InputProps; labelKey: LabelKey; maxResults: number; minLength: number; multiple: boolean; onBlur: FocusEventHandler; onChange?: (selected: Option[]) => void; onFocus: (event: SyntheticEvent) => void; onInputChange: (text: string, event: ChangeEvent) => void; onKeyDown: KeyboardEventHandler; onMenuToggle: (isOpen: boolean) => void; onPaginate: (event: SelectEvent, shownResults: number) => void; open?: boolean; options: Option[]; paginate: boolean; selected?: Option[]; selectHint?: SelectHint; } export interface TypeaheadState { activeIndex: number; activeItem?: Option; initialItem?: Option; isFocused: boolean; selected: Option[]; showMenu: boolean; shownResults: number; text: string; } export type TypeaheadPropsAndState = Omit & TypeaheadState; export interface TypeaheadManagerChildProps { activeIndex: number; getInputProps: (props?: InputProps) => TypeaheadInputProps; hideMenu: () => void; isMenuShown: boolean; labelKey: LabelKey; onClear: () => void; onHide: () => void; onRemove: OptionHandler; results: Option[]; selected: Option[]; text: string; toggleMenu: () => void; } export interface TypeaheadManagerProps extends TypeaheadPropsAndState { hideMenu: () => void; inputNode: HTMLInputElement | null; inputRef: RefCallback; isMenuShown: boolean; onActiveItemChange: OptionHandler; onAdd: OptionHandler; onChange: ChangeEventHandler; onClear: () => void; onClick: MouseEventHandler; onHide: () => void; onInitialItemChange: (option?: Option) => void; onMenuItemClick: (option: Option, event: SelectEvent) => void; onRemove: OptionHandler; placeholder?: string; results: Option[]; setItem: (item: Option, position: number) => void; toggleMenu: () => void; }