UNPKG

3.96 kBTypeScriptView Raw
1import { ChangeEvent, ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, ReactNode, RefCallback, SyntheticEvent } from 'react';
2import { ALIGN_VALUES, SIZES } from './constants';
3export type Align = (typeof ALIGN_VALUES)[number];
4export type AllowNew = boolean | ((options: Option[], state: TypeaheadPropsAndState) => boolean);
5export type FilterByCallback = (option: Option, state: TypeaheadPropsAndState) => boolean;
6export type Id = string;
7export type Option = string | Record<string, any>;
8export type OptionHandler = (option: Option) => void;
9export type LabelKey = string | ((option: Option) => string);
10export type SelectEvent<T> = MouseEvent<T> | KeyboardEvent<T>;
11export type SelectHint = (shouldSelectHint: boolean, event: KeyboardEvent<HTMLInputElement>) => boolean;
12export type Size = (typeof SIZES)[number];
13export type TypeaheadChildren = ReactNode | ((props: TypeaheadManagerChildProps) => ReactNode);
14export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
15export interface TypeaheadInputProps extends InputProps {
16 inputClassName?: string;
17 inputRef: RefCallback<HTMLInputElement>;
18 referenceElementRef: RefCallback<HTMLElement>;
19}
20export interface RenderTokenProps {
21 disabled?: boolean;
22 labelKey: LabelKey;
23 onRemove?: OptionHandler;
24 tabIndex?: number;
25}
26export type RenderToken = (option: Option, props: RenderTokenProps, idx: number) => JSX.Element;
27export interface TypeaheadProps {
28 allowNew: AllowNew;
29 autoFocus: boolean;
30 caseSensitive: boolean;
31 children: TypeaheadChildren;
32 defaultInputValue: string;
33 defaultOpen: boolean;
34 defaultSelected: Option[];
35 emptyLabel?: ReactNode;
36 filterBy: string[] | FilterByCallback;
37 highlightOnlyResult: boolean;
38 id?: Id;
39 ignoreDiacritics: boolean;
40 inputProps?: InputProps;
41 labelKey: LabelKey;
42 maxResults: number;
43 minLength: number;
44 multiple: boolean;
45 onBlur: FocusEventHandler<HTMLInputElement>;
46 onChange?: (selected: Option[]) => void;
47 onFocus: (event: SyntheticEvent<HTMLInputElement>) => void;
48 onInputChange: (text: string, event: ChangeEvent<HTMLInputElement>) => void;
49 onKeyDown: KeyboardEventHandler<HTMLInputElement>;
50 onMenuToggle: (isOpen: boolean) => void;
51 onPaginate: (event: SelectEvent<HTMLElement>, shownResults: number) => void;
52 open?: boolean;
53 options: Option[];
54 paginate: boolean;
55 selected?: Option[];
56 selectHint?: SelectHint;
57}
58export interface TypeaheadState {
59 activeIndex: number;
60 activeItem?: Option;
61 initialItem?: Option;
62 isFocused: boolean;
63 selected: Option[];
64 showMenu: boolean;
65 shownResults: number;
66 text: string;
67}
68export type TypeaheadPropsAndState = Omit<TypeaheadProps, 'onChange'> & TypeaheadState;
69export interface TypeaheadManagerChildProps {
70 activeIndex: number;
71 getInputProps: (props?: InputProps) => TypeaheadInputProps;
72 hideMenu: () => void;
73 isMenuShown: boolean;
74 labelKey: LabelKey;
75 onClear: () => void;
76 onHide: () => void;
77 onRemove: OptionHandler;
78 results: Option[];
79 selected: Option[];
80 text: string;
81 toggleMenu: () => void;
82}
83export interface TypeaheadManagerProps extends TypeaheadPropsAndState {
84 hideMenu: () => void;
85 inputNode: HTMLInputElement | null;
86 inputRef: RefCallback<HTMLInputElement>;
87 isMenuShown: boolean;
88 onActiveItemChange: OptionHandler;
89 onAdd: OptionHandler;
90 onChange: ChangeEventHandler<HTMLInputElement>;
91 onClear: () => void;
92 onClick: MouseEventHandler<HTMLInputElement>;
93 onHide: () => void;
94 onInitialItemChange: (option?: Option) => void;
95 onMenuItemClick: (option: Option, event: SelectEvent<HTMLElement>) => void;
96 onRemove: OptionHandler;
97 placeholder?: string;
98 results: Option[];
99 setItem: (item: Option, position: number) => void;
100 toggleMenu: () => void;
101}