/
types.ts
114 lines (102 loc) · 3.88 KB
/
types.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import type React from 'react';
import type {BoxProps, BoxStyleProps} from '@twilio-paste/box';
import type {
UseComboboxPrimitiveProps,
UseComboboxPrimitiveState,
UseComboboxPrimitiveReturnValue,
} from '@twilio-paste/combobox-primitive';
import type {InputVariants, InputProps} from '@twilio-paste/input';
import type {VirtualItem} from 'react-virtual';
export type {
UseComboboxPrimitiveGetItemPropsOptions,
UseComboboxPrimitiveGetMenuPropsOptions,
GetComboboxPrimitivePropsCommonOptions,
} from '@twilio-paste/combobox-primitive';
export type Item = string | Record<string, unknown>;
export interface OptionTemplateFn<ProvidedItem> {
(item: ProvidedItem): React.ReactNode;
}
type ScrollAlignment = 'start' | 'center' | 'end' | 'auto';
interface ScrollToOptions {
align: ScrollAlignment;
}
export type RowVirtualizer = {
virtualItems: VirtualItem[];
totalSize: number;
scrollToOffset: (index: number, options?: ScrollToOptions | undefined) => void;
scrollToIndex: (index: number, options?: ScrollToOptions | undefined) => void;
};
export type HighlightedIndexChanges = {
type: number;
highlightedIndex: number;
isOpen: boolean;
selectedItem: string;
inputValue: string;
};
export interface ComboboxProps extends Omit<InputProps, 'id' | 'type' | 'value'>, Pick<BoxProps, 'element'> {
autocomplete?: boolean;
helpText?: string | React.ReactNode;
labelText: string | NonNullable<React.ReactNode>;
optionTemplate?: OptionTemplateFn<any>;
groupLabelTemplate?: (groupName: string) => React.ReactNode;
groupItemsBy?: string;
variant?: InputVariants;
disabledItems?: any[];
emptyState?: React.FC;
// Downshift useCombobox Hook Props. Thes are mainly covered in https://github.com/downshift-js/downshift/blob/master/src/hooks/useCombobox/README.md#advanced-props docs
initialIsOpen?: UseComboboxPrimitiveProps<any>['initialIsOpen'];
initialSelectedItem?: UseComboboxPrimitiveProps<any>['initialSelectedItem'];
items: UseComboboxPrimitiveProps<any>['items'];
itemToString?: UseComboboxPrimitiveProps<any>['itemToString'];
onHighlightedIndexChange?: UseComboboxPrimitiveProps<any>['onHighlightedIndexChange'];
onInputValueChange?: UseComboboxPrimitiveProps<any>['onInputValueChange'];
onIsOpenChange?: UseComboboxPrimitiveProps<any>['onIsOpenChange'];
onSelectedItemChange?: UseComboboxPrimitiveProps<any>['onSelectedItemChange'];
selectedItem?: UseComboboxPrimitiveProps<any>['selectedItem'];
inputValue?: UseComboboxPrimitiveProps<any>['inputValue'];
getA11yStatusMessage?: UseComboboxPrimitiveProps<any>['getA11yStatusMessage'];
getA11ySelectionMessage?: UseComboboxPrimitiveProps<any>['getA11ySelectionMessage'];
// Downshift useCombobox Hook return props for when you are using the hook outside of the component
state?: Partial<UseComboboxPrimitiveReturnValue<any>>;
/**
* Use `onInputValueChange` instead.
* @type {never}
* @memberof ComboboxProps
*/
onChange?: never;
/**
* Use `onInputValueChange` instead.
* @type {never}
* @memberof ComboboxProps
*/
onInput?: never;
}
export interface MultiselectComboboxProps
extends Omit<
ComboboxProps,
| 'autocomplete'
| 'initialSelectedItem'
| 'selectedItem'
| 'onSelectedItemChange'
| 'getA11yStatusMessage'
| 'getA11ySelectionMessage'
> {
initialSelectedItems?: any[];
onSelectedItemsChange?: (newSelectedItems: any[]) => void;
selectedItemsLabelText: string;
i18nKeyboardControls?: string;
maxHeight?: BoxStyleProps['maxHeight'];
}
export interface ComboboxItemsProps
extends Pick<
ComboboxProps,
'groupItemsBy' | 'optionTemplate' | 'groupLabelTemplate' | 'element' | 'emptyState' | 'state'
> {
items: Item[];
selectedItems?: Item[];
disabledItems?: Item[];
getItemProps: any;
highlightedIndex: UseComboboxPrimitiveState<Item>['highlightedIndex'];
totalSize: RowVirtualizer['totalSize'];
virtualItems: RowVirtualizer['virtualItems'];
}