1 | import { ChangeEvent, ChangeEventHandler, FocusEventHandler, InputHTMLAttributes, KeyboardEvent, KeyboardEventHandler, MouseEvent, MouseEventHandler, ReactNode, RefCallback, SyntheticEvent } from 'react';
|
2 | import { ALIGN_VALUES, SIZES } from './constants';
|
3 | export type Align = (typeof ALIGN_VALUES)[number];
|
4 | export type AllowNew = boolean | ((options: Option[], state: TypeaheadPropsAndState) => boolean);
|
5 | export type FilterByCallback = (option: Option, state: TypeaheadPropsAndState) => boolean;
|
6 | export type Id = string;
|
7 | export type Option = string | Record<string, any>;
|
8 | export type OptionHandler = (option: Option) => void;
|
9 | export type LabelKey = string | ((option: Option) => string);
|
10 | export type SelectEvent<T> = MouseEvent<T> | KeyboardEvent<T>;
|
11 | export type SelectHint = (shouldSelectHint: boolean, event: KeyboardEvent<HTMLInputElement>) => boolean;
|
12 | export type Size = (typeof SIZES)[number];
|
13 | export type TypeaheadChildren = ReactNode | ((props: TypeaheadManagerChildProps) => ReactNode);
|
14 | export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>;
|
15 | export interface TypeaheadInputProps extends InputProps {
|
16 | inputClassName?: string;
|
17 | inputRef: RefCallback<HTMLInputElement>;
|
18 | referenceElementRef: RefCallback<HTMLElement>;
|
19 | }
|
20 | export interface RenderTokenProps {
|
21 | disabled?: boolean;
|
22 | labelKey: LabelKey;
|
23 | onRemove?: OptionHandler;
|
24 | tabIndex?: number;
|
25 | }
|
26 | export type RenderToken = (option: Option, props: RenderTokenProps, idx: number) => JSX.Element;
|
27 | export 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 | }
|
58 | export 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 | }
|
68 | export type TypeaheadPropsAndState = Omit<TypeaheadProps, 'onChange'> & TypeaheadState;
|
69 | export 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 | }
|
83 | export 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 | }
|