@progress/kendo-react-dropdowns 6.1.1 → 7.0.0-develop.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/{dist/es/AutoComplete → AutoComplete}/AutoComplete.d.ts +12 -8
- package/{dist/npm/AutoComplete → AutoComplete}/AutoCompleteProps.d.ts +4 -1
- package/{dist/es/ComboBox → ComboBox}/ComboBox.d.ts +12 -8
- package/{dist/es/ComboBox → ComboBox}/ComboBoxProps.d.ts +4 -1
- package/{dist/es/DropDownList → DropDownList}/DropDownList.d.ts +9 -5
- package/{dist/es/DropDownList → DropDownList}/DropDownListProps.d.ts +4 -1
- package/{dist/es/DropDownTree → DropDownTree}/DropDownTree.d.ts +4 -0
- package/{dist/npm/DropDownTree → DropDownTree}/DropDownTreeProps.d.ts +4 -1
- package/DropDownTree/ListNoData.d.ts +10 -0
- package/DropDownTree/useDropdownWidth.d.ts +9 -0
- package/LICENSE.md +1 -1
- package/{dist/es/MultiColumnComboBox → MultiColumnComboBox}/MultiColumnComboBox.d.ts +4 -0
- package/{dist/npm/MultiSelect → MultiSelect}/MultiSelect.d.ts +9 -5
- package/{dist/es/MultiSelect → MultiSelect}/MultiSelectProps.d.ts +4 -1
- package/{dist/npm/MultiSelect → MultiSelect}/TagList.d.ts +5 -1
- package/{dist/es/MultiSelectTree → MultiSelectTree}/MultiSelectTree.d.ts +4 -0
- package/{dist/es/MultiSelectTree → MultiSelectTree}/MultiSelectTreeProps.d.ts +5 -1
- package/{dist/npm/MultiSelectTree → MultiSelectTree}/utils.d.ts +5 -1
- package/{dist/npm/common → common}/AdaptiveMode.d.ts +5 -1
- package/common/ClearButton.d.ts +18 -0
- package/{dist/npm/common → common}/DropDownBase.d.ts +5 -1
- package/{dist/es/common → common}/GroupStickyHeader.d.ts +5 -1
- package/{dist/es/common → common}/List.d.ts +7 -3
- package/common/ListContainer.d.ts +22 -0
- package/common/ListDefaultItem.d.ts +20 -0
- package/{dist/npm/common → common}/ListFilter.d.ts +4 -0
- package/{dist/npm/common → common}/ListGroupItem.d.ts +5 -1
- package/{dist/npm/common → common}/ListItem.d.ts +5 -1
- package/common/MultiColumnList.d.ts +9 -0
- package/common/Navigation.d.ts +17 -0
- package/{dist/es/common → common}/SearchBar.d.ts +5 -1
- package/{dist/npm/common → common}/VirtualScroll.d.ts +4 -1
- package/common/constants.d.ts +8 -0
- package/{dist/es/common → common}/events.d.ts +4 -1
- package/{dist/npm/common → common}/filterDescriptor.d.ts +4 -0
- package/{dist/es/common → common}/settings.d.ts +5 -2
- package/{dist/npm/common → common}/utils.d.ts +4 -0
- package/dist/cdn/js/kendo-react-dropdowns.js +5 -1
- package/index.d.ts +29 -0
- package/index.js +5 -0
- package/index.mjs +4383 -0
- package/{dist/npm/messages → messages}/index.d.ts +4 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +34 -62
- package/about.md +0 -3
- package/dist/es/AutoComplete/AutoComplete.js +0 -652
- package/dist/es/AutoComplete/AutoCompleteProps.d.ts +0 -243
- package/dist/es/AutoComplete/AutoCompleteProps.js +0 -2
- package/dist/es/ComboBox/ComboBox.js +0 -915
- package/dist/es/ComboBox/ComboBoxProps.js +0 -2
- package/dist/es/DropDownList/DropDownList.js +0 -887
- package/dist/es/DropDownList/DropDownListProps.js +0 -2
- package/dist/es/DropDownTree/DropDownTree.js +0 -540
- package/dist/es/DropDownTree/DropDownTreeProps.d.ts +0 -294
- package/dist/es/DropDownTree/DropDownTreeProps.js +0 -2
- package/dist/es/DropDownTree/ListNoData.d.ts +0 -6
- package/dist/es/DropDownTree/ListNoData.js +0 -8
- package/dist/es/DropDownTree/useDropdownWidth.d.ts +0 -5
- package/dist/es/DropDownTree/useDropdownWidth.js +0 -13
- package/dist/es/MultiColumnComboBox/MultiColumnComboBox.js +0 -213
- package/dist/es/MultiSelect/MultiSelect.d.ts +0 -256
- package/dist/es/MultiSelect/MultiSelect.js +0 -1110
- package/dist/es/MultiSelect/MultiSelectProps.js +0 -2
- package/dist/es/MultiSelect/TagList.d.ts +0 -38
- package/dist/es/MultiSelect/TagList.js +0 -39
- package/dist/es/MultiSelectTree/MultiSelectTree.js +0 -619
- package/dist/es/MultiSelectTree/MultiSelectTreeProps.js +0 -2
- package/dist/es/MultiSelectTree/utils.d.ts +0 -17
- package/dist/es/MultiSelectTree/utils.js +0 -191
- package/dist/es/common/AdaptiveMode.d.ts +0 -21
- package/dist/es/common/AdaptiveMode.js +0 -45
- package/dist/es/common/ClearButton.d.ts +0 -14
- package/dist/es/common/ClearButton.js +0 -39
- package/dist/es/common/DropDownBase.d.ts +0 -175
- package/dist/es/common/DropDownBase.js +0 -297
- package/dist/es/common/GroupStickyHeader.js +0 -34
- package/dist/es/common/List.js +0 -75
- package/dist/es/common/ListContainer.d.ts +0 -18
- package/dist/es/common/ListContainer.js +0 -43
- package/dist/es/common/ListDefaultItem.d.ts +0 -16
- package/dist/es/common/ListDefaultItem.js +0 -36
- package/dist/es/common/ListFilter.d.ts +0 -19
- package/dist/es/common/ListFilter.js +0 -37
- package/dist/es/common/ListGroupItem.d.ts +0 -33
- package/dist/es/common/ListGroupItem.js +0 -33
- package/dist/es/common/ListItem.d.ts +0 -61
- package/dist/es/common/ListItem.js +0 -44
- package/dist/es/common/MultiColumnList.d.ts +0 -6
- package/dist/es/common/MultiColumnList.js +0 -22
- package/dist/es/common/Navigation.d.ts +0 -13
- package/dist/es/common/Navigation.js +0 -34
- package/dist/es/common/SearchBar.js +0 -62
- package/dist/es/common/VirtualScroll.d.ts +0 -42
- package/dist/es/common/VirtualScroll.js +0 -161
- package/dist/es/common/constants.d.ts +0 -4
- package/dist/es/common/constants.js +0 -4
- package/dist/es/common/events.js +0 -1
- package/dist/es/common/filterDescriptor.d.ts +0 -41
- package/dist/es/common/filterDescriptor.js +0 -2
- package/dist/es/common/settings.js +0 -8
- package/dist/es/common/utils.d.ts +0 -62
- package/dist/es/common/utils.js +0 -194
- package/dist/es/main.d.ts +0 -25
- package/dist/es/main.js +0 -19
- package/dist/es/messages/index.d.ts +0 -40
- package/dist/es/messages/index.js +0 -41
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/npm/AutoComplete/AutoComplete.d.ts +0 -230
- package/dist/npm/AutoComplete/AutoComplete.js +0 -655
- package/dist/npm/AutoComplete/AutoCompleteProps.js +0 -3
- package/dist/npm/ComboBox/ComboBox.d.ts +0 -248
- package/dist/npm/ComboBox/ComboBox.js +0 -918
- package/dist/npm/ComboBox/ComboBoxProps.d.ts +0 -313
- package/dist/npm/ComboBox/ComboBoxProps.js +0 -3
- package/dist/npm/DropDownList/DropDownList.d.ts +0 -258
- package/dist/npm/DropDownList/DropDownList.js +0 -890
- package/dist/npm/DropDownList/DropDownListProps.d.ts +0 -326
- package/dist/npm/DropDownList/DropDownListProps.js +0 -3
- package/dist/npm/DropDownTree/DropDownTree.d.ts +0 -70
- package/dist/npm/DropDownTree/DropDownTree.js +0 -543
- package/dist/npm/DropDownTree/DropDownTreeProps.js +0 -3
- package/dist/npm/DropDownTree/ListNoData.d.ts +0 -6
- package/dist/npm/DropDownTree/ListNoData.js +0 -12
- package/dist/npm/DropDownTree/useDropdownWidth.d.ts +0 -5
- package/dist/npm/DropDownTree/useDropdownWidth.js +0 -17
- package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.d.ts +0 -287
- package/dist/npm/MultiColumnComboBox/MultiColumnComboBox.js +0 -216
- package/dist/npm/MultiSelect/MultiSelect.js +0 -1113
- package/dist/npm/MultiSelect/MultiSelectProps.d.ts +0 -314
- package/dist/npm/MultiSelect/MultiSelectProps.js +0 -3
- package/dist/npm/MultiSelect/TagList.js +0 -41
- package/dist/npm/MultiSelectTree/MultiSelectTree.d.ts +0 -81
- package/dist/npm/MultiSelectTree/MultiSelectTree.js +0 -622
- package/dist/npm/MultiSelectTree/MultiSelectTreeProps.d.ts +0 -320
- package/dist/npm/MultiSelectTree/MultiSelectTreeProps.js +0 -3
- package/dist/npm/MultiSelectTree/utils.js +0 -196
- package/dist/npm/common/AdaptiveMode.js +0 -49
- package/dist/npm/common/ClearButton.d.ts +0 -14
- package/dist/npm/common/ClearButton.js +0 -41
- package/dist/npm/common/DropDownBase.js +0 -299
- package/dist/npm/common/GroupStickyHeader.d.ts +0 -24
- package/dist/npm/common/GroupStickyHeader.js +0 -36
- package/dist/npm/common/List.d.ts +0 -45
- package/dist/npm/common/List.js +0 -77
- package/dist/npm/common/ListContainer.d.ts +0 -18
- package/dist/npm/common/ListContainer.js +0 -45
- package/dist/npm/common/ListDefaultItem.d.ts +0 -16
- package/dist/npm/common/ListDefaultItem.js +0 -38
- package/dist/npm/common/ListFilter.js +0 -39
- package/dist/npm/common/ListGroupItem.js +0 -35
- package/dist/npm/common/ListItem.js +0 -46
- package/dist/npm/common/MultiColumnList.d.ts +0 -6
- package/dist/npm/common/MultiColumnList.js +0 -26
- package/dist/npm/common/Navigation.d.ts +0 -13
- package/dist/npm/common/Navigation.js +0 -37
- package/dist/npm/common/SearchBar.d.ts +0 -43
- package/dist/npm/common/SearchBar.js +0 -64
- package/dist/npm/common/VirtualScroll.js +0 -163
- package/dist/npm/common/constants.d.ts +0 -4
- package/dist/npm/common/constants.js +0 -7
- package/dist/npm/common/events.d.ts +0 -73
- package/dist/npm/common/events.js +0 -2
- package/dist/npm/common/filterDescriptor.js +0 -3
- package/dist/npm/common/settings.d.ts +0 -114
- package/dist/npm/common/settings.js +0 -11
- package/dist/npm/common/utils.js +0 -211
- package/dist/npm/main.d.ts +0 -25
- package/dist/npm/main.js +0 -62
- package/dist/npm/messages/index.js +0 -44
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/systemjs/kendo-react-dropdowns.js +0 -1
- package/e2e-next/combobox.basic.ts +0 -24
- package/e2e-next/dropdownlist.basic.tests.ts +0 -24
- package/e2e-next/dropdowntree.basic.tests.ts +0 -24
- package/e2e-next/multicolumncombobox.basic.tests.ts +0 -24
|
@@ -1,313 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { ComboBox } from './ComboBox';
|
|
3
|
-
import { FilterChangeEvent, ChangeEvent, OpenEvent, CloseEvent, FocusEvent, BlurEvent, PageChangeEvent } from './../common/events';
|
|
4
|
-
import { FormComponentProps, SVGIcon } from '@progress/kendo-react-common';
|
|
5
|
-
import { VirtualizationSettings, DropDownsPopupSettings } from '../common/settings';
|
|
6
|
-
import { ListItemProps } from '../common/ListItem';
|
|
7
|
-
import { ListGroupItemProps } from '../common/ListGroupItem';
|
|
8
|
-
import { GroupStickyHeaderProps } from '../common/GroupStickyHeader';
|
|
9
|
-
/**
|
|
10
|
-
* Represents the object of the `FilterChange` ComboBox event.
|
|
11
|
-
*/
|
|
12
|
-
export interface ComboBoxFilterChangeEvent extends FilterChangeEvent<ComboBox> {
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* Represents the object of the `change` ComboBox event.
|
|
16
|
-
*/
|
|
17
|
-
export interface ComboBoxChangeEvent extends ChangeEvent<ComboBox> {
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* Represents the object of the `open` ComboBox event.
|
|
21
|
-
*/
|
|
22
|
-
export interface ComboBoxOpenEvent extends OpenEvent<ComboBox> {
|
|
23
|
-
}
|
|
24
|
-
/**
|
|
25
|
-
* Represents the object of the `close` ComboBox event.
|
|
26
|
-
*/
|
|
27
|
-
export interface ComboBoxCloseEvent extends CloseEvent<ComboBox> {
|
|
28
|
-
}
|
|
29
|
-
/**
|
|
30
|
-
* Represents the object of the `focus` ComboBox event.
|
|
31
|
-
*/
|
|
32
|
-
export interface ComboBoxFocusEvent extends FocusEvent<ComboBox> {
|
|
33
|
-
}
|
|
34
|
-
/**
|
|
35
|
-
* Represents the object of the `blur` ComboBox event.
|
|
36
|
-
*/
|
|
37
|
-
export interface ComboBoxBlurEvent extends BlurEvent<ComboBox> {
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* Represents the object of the `PageChange` ComboBox event.
|
|
41
|
-
*/
|
|
42
|
-
export interface ComboBoxPageChangeEvent extends PageChangeEvent<ComboBox> {
|
|
43
|
-
}
|
|
44
|
-
/**
|
|
45
|
-
* Represents the props of the [KendoReact ComboBox component]({% slug overview_combobox %}).
|
|
46
|
-
*/
|
|
47
|
-
export interface ComboBoxProps extends FormComponentProps {
|
|
48
|
-
/**
|
|
49
|
-
* Sets the data of the ComboBox ([more information and examples]({% slug binding_combobox %})).
|
|
50
|
-
*/
|
|
51
|
-
data?: any[];
|
|
52
|
-
/**
|
|
53
|
-
* Sets the opened and closed state of the ComboBox.
|
|
54
|
-
*/
|
|
55
|
-
opened?: boolean;
|
|
56
|
-
/**
|
|
57
|
-
* The styles that are applied to the ComboBox.
|
|
58
|
-
*/
|
|
59
|
-
style?: React.CSSProperties;
|
|
60
|
-
/**
|
|
61
|
-
* Sets the value of the ComboBox ([more information and examples]({% slug binding_combobox %})). It can either be of the primitive (string, numbers) or of the complex (objects) type.
|
|
62
|
-
*/
|
|
63
|
-
value?: any;
|
|
64
|
-
/**
|
|
65
|
-
* Sets the default value of the ComboBox. Similar to the native `select` HTML element.
|
|
66
|
-
*/
|
|
67
|
-
defaultValue?: any;
|
|
68
|
-
/**
|
|
69
|
-
* Sets additional classes to the ComboBox.
|
|
70
|
-
*/
|
|
71
|
-
className?: string;
|
|
72
|
-
/**
|
|
73
|
-
* Sets CSS classes to the expand `icon` DOM element.
|
|
74
|
-
*/
|
|
75
|
-
iconClassName?: string;
|
|
76
|
-
/**
|
|
77
|
-
* Sets the specified SVG icon.
|
|
78
|
-
*/
|
|
79
|
-
svgIcon?: SVGIcon;
|
|
80
|
-
/**
|
|
81
|
-
* If `clearButton` is set to `true`, the ComboBox renders a button on hovering over the component. Clicking this button resets the value of the ComboBox to `undefined` and triggers the `change` event.
|
|
82
|
-
*/
|
|
83
|
-
clearButton?: boolean;
|
|
84
|
-
/**
|
|
85
|
-
* The hint that is displayed when the ComboBox is empty.
|
|
86
|
-
*/
|
|
87
|
-
placeholder?: string;
|
|
88
|
-
/**
|
|
89
|
-
* Sets the title attribute to the underlying input element of the ComboBox.
|
|
90
|
-
*/
|
|
91
|
-
title?: string;
|
|
92
|
-
/**
|
|
93
|
-
* Enables the auto-completion of the text based on the first data item ([see example]({% slug suggestions_combobox %})).
|
|
94
|
-
*/
|
|
95
|
-
suggest?: boolean;
|
|
96
|
-
/**
|
|
97
|
-
* Specifies whether the ComboBox allows user-defined values that are not present in the dataset ([see example]({% slug custom_values_combobox %})). Defaults to `false`.
|
|
98
|
-
*/
|
|
99
|
-
allowCustom?: boolean;
|
|
100
|
-
/**
|
|
101
|
-
* Sets the disabled state of the ComboBox.
|
|
102
|
-
*/
|
|
103
|
-
disabled?: boolean;
|
|
104
|
-
/**
|
|
105
|
-
* Represents the `dir` HTML attribute.
|
|
106
|
-
*/
|
|
107
|
-
dir?: string;
|
|
108
|
-
/**
|
|
109
|
-
* Enables the filtering functionality of the ComboBox ([more information and examples]({% slug filtering_combobox %})).
|
|
110
|
-
*/
|
|
111
|
-
filterable?: boolean;
|
|
112
|
-
/**
|
|
113
|
-
* Sets the value of ComboBox input. Useful for making the ComboBox input a [controlled component](https://reactjs.org/docs/forms.html#controlled-components).
|
|
114
|
-
*/
|
|
115
|
-
filter?: string | null;
|
|
116
|
-
/**
|
|
117
|
-
* Sets the value of the adaptive filtering input of the of ComboBox.
|
|
118
|
-
*/
|
|
119
|
-
adaptiveFilter?: string;
|
|
120
|
-
/**
|
|
121
|
-
* Sets the loading state of the ComboBox ([see example]({% slug filtering_combobox %}#toc-basic-configuration)).
|
|
122
|
-
*/
|
|
123
|
-
loading?: boolean;
|
|
124
|
-
/**
|
|
125
|
-
* Specifies the `tabIndex` of the ComboBox.
|
|
126
|
-
*/
|
|
127
|
-
tabIndex?: number;
|
|
128
|
-
/**
|
|
129
|
-
* Specifies the `accessKey` of the ComboBox.
|
|
130
|
-
*/
|
|
131
|
-
accessKey?: string;
|
|
132
|
-
/**
|
|
133
|
-
* Sets the data item field that represents the item text. If the data contains only primitive values, do not define it.
|
|
134
|
-
*/
|
|
135
|
-
textField?: string;
|
|
136
|
-
/**
|
|
137
|
-
* Sets the data item field that represents the start of a group. Applicable to objects data.
|
|
138
|
-
*/
|
|
139
|
-
groupField?: string;
|
|
140
|
-
/**
|
|
141
|
-
* Defines the `classic` or `modern` type of the grouping's visualization. Defaults to `modern`.
|
|
142
|
-
*/
|
|
143
|
-
groupMode?: string;
|
|
144
|
-
/**
|
|
145
|
-
* @hidden Used to indicate if the ComboBox is with multiple columns
|
|
146
|
-
*/
|
|
147
|
-
isMultiColumn?: boolean;
|
|
148
|
-
/**
|
|
149
|
-
* Sets the key for comparing the data items of the ComboBox. If `dataItemKey` is not set, the ComboBox compares the items by reference ([see example]({% slug binding_combobox %}#toc-datasets-of-objects)).
|
|
150
|
-
*/
|
|
151
|
-
dataItemKey?: string;
|
|
152
|
-
/**
|
|
153
|
-
* Renders a floating label for the ComboBox.
|
|
154
|
-
*/
|
|
155
|
-
label?: string;
|
|
156
|
-
/**
|
|
157
|
-
* Configures the popup of the ComboBox.
|
|
158
|
-
*/
|
|
159
|
-
popupSettings?: DropDownsPopupSettings;
|
|
160
|
-
/**
|
|
161
|
-
* Configures the virtual scrolling of the ComboBox ([more information and examples]({% slug virtualization_combobox %})).
|
|
162
|
-
*/
|
|
163
|
-
virtual?: VirtualizationSettings;
|
|
164
|
-
/**
|
|
165
|
-
* Specifies the id of the component.
|
|
166
|
-
*/
|
|
167
|
-
id?: string;
|
|
168
|
-
/**
|
|
169
|
-
* Identifies the element(s) which will describe the component, similar to [HTML aria-describedby attribute](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute).
|
|
170
|
-
* For example these elements could contain error or hint message.
|
|
171
|
-
*/
|
|
172
|
-
ariaDescribedBy?: string;
|
|
173
|
-
/**
|
|
174
|
-
* Identifies the element(s) which will label the component.
|
|
175
|
-
*/
|
|
176
|
-
ariaLabelledBy?: string;
|
|
177
|
-
/**
|
|
178
|
-
* If set, the ComboBox will use it to get the focused item index.
|
|
179
|
-
*
|
|
180
|
-
* Default functionality returns the first item which starts with the input text.
|
|
181
|
-
*
|
|
182
|
-
* @example
|
|
183
|
-
* ```jsx-no-run
|
|
184
|
-
* const focusedItemIndex = (data, inputText, textField) => {
|
|
185
|
-
* let text = inputText.toLowerCase();
|
|
186
|
-
* return data.findIndex(item =>
|
|
187
|
-
* String(textField ? item[textField] : item).toLowerCase().includes(text));
|
|
188
|
-
* };
|
|
189
|
-
*
|
|
190
|
-
* <ComboBox focusedItemIndex={focusedItemIndex} />
|
|
191
|
-
* ```
|
|
192
|
-
*/
|
|
193
|
-
focusedItemIndex?: (data: any, inputText: string, textField?: string) => number;
|
|
194
|
-
/**
|
|
195
|
-
* Fires each time the popup of the ComboBox is about to open.
|
|
196
|
-
*/
|
|
197
|
-
onOpen?: (event: ComboBoxOpenEvent) => void;
|
|
198
|
-
/**
|
|
199
|
-
* Fires each time the popup of the ComboBox is about to close.
|
|
200
|
-
*/
|
|
201
|
-
onClose?: (event: ComboBoxCloseEvent) => void;
|
|
202
|
-
/**
|
|
203
|
-
* Fires each time the user focuses the ComboBox.
|
|
204
|
-
*/
|
|
205
|
-
onFocus?: (event: ComboBoxFocusEvent) => void;
|
|
206
|
-
/**
|
|
207
|
-
* Fires each time the ComboBox gets blurred.
|
|
208
|
-
*/
|
|
209
|
-
onBlur?: (event: ComboBoxBlurEvent) => void;
|
|
210
|
-
/**
|
|
211
|
-
* Fires each time the value of the ComboBox is about to change ([see examples]({% slug binding_combobox %})).
|
|
212
|
-
*/
|
|
213
|
-
onChange?: (event: ComboBoxChangeEvent) => void;
|
|
214
|
-
/**
|
|
215
|
-
* Fires each time the user types in the filter input ([see examples]({% slug filtering_combobox %}#toc-basic-configuration)). You can filter the source based on the passed filtration value.
|
|
216
|
-
*/
|
|
217
|
-
onFilterChange?: (event: ComboBoxFilterChangeEvent) => void;
|
|
218
|
-
/**
|
|
219
|
-
* Fires when both the virtual scrolling of the ComboBox is enabled and the component requires data for another page ([more information and examples]({% slug virtualization_combobox %})).
|
|
220
|
-
*/
|
|
221
|
-
onPageChange?: (event: ComboBoxPageChangeEvent) => void;
|
|
222
|
-
/**
|
|
223
|
-
* Fires when the ComboBox input element is about to be rendered. Use it to override the default appearance of the component.
|
|
224
|
-
*/
|
|
225
|
-
valueRender?: (rendering: React.ReactElement<HTMLSpanElement>) => React.ReactNode;
|
|
226
|
-
/**
|
|
227
|
-
* Fires when a ComboBox list item is about to be rendered ([see example]({% slug customrendering_combobox %}#toc-items)). Used to override the default appearance of the list items.
|
|
228
|
-
*/
|
|
229
|
-
itemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListItemProps) => React.ReactNode;
|
|
230
|
-
/**
|
|
231
|
-
* Fires when a ComboBox group header item is about to be rendered. Used to override the default appearance of the group's headers when the component is configured in `modern` group mode.
|
|
232
|
-
*/
|
|
233
|
-
groupHeaderItemRender?: (li: React.ReactElement<HTMLLIElement>, itemProps: ListGroupItemProps) => React.ReactNode;
|
|
234
|
-
/**
|
|
235
|
-
* Fires when a ComboBox sticky group header item is about to be rendered. Used to override the default appearance of the sticky group header of the component.
|
|
236
|
-
*/
|
|
237
|
-
groupStickyHeaderItemRender?: (div: React.ReactElement<HTMLDivElement>, stickyHeaderProps: GroupStickyHeaderProps) => React.ReactNode;
|
|
238
|
-
/**
|
|
239
|
-
* Fires when the element which indicates no data in the popup is about to be rendered. Used to override the default appearance of the element.
|
|
240
|
-
*/
|
|
241
|
-
listNoDataRender?: (element: React.ReactElement<HTMLDivElement>) => React.ReactNode;
|
|
242
|
-
/**
|
|
243
|
-
* @hidden
|
|
244
|
-
*/
|
|
245
|
-
onGroupScroll?: (event: {
|
|
246
|
-
group?: string;
|
|
247
|
-
}) => void;
|
|
248
|
-
/**
|
|
249
|
-
* Sets the header component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
|
|
250
|
-
*/
|
|
251
|
-
header?: React.ReactNode;
|
|
252
|
-
/**
|
|
253
|
-
* Sets the footer component of the ComboBox ([see example]({% slug customrendering_combobox %}#toc-headers-and-footers)).
|
|
254
|
-
*/
|
|
255
|
-
footer?: React.ReactNode;
|
|
256
|
-
/**
|
|
257
|
-
* @hidden
|
|
258
|
-
*/
|
|
259
|
-
footerClassName?: string;
|
|
260
|
-
/**
|
|
261
|
-
* @hidden
|
|
262
|
-
*/
|
|
263
|
-
list?: any;
|
|
264
|
-
/**
|
|
265
|
-
* Configures the `size` of the ComboBox.
|
|
266
|
-
*
|
|
267
|
-
* The available options are:
|
|
268
|
-
* - small
|
|
269
|
-
* - medium
|
|
270
|
-
* - large
|
|
271
|
-
* - null—Does not set a size `className`.
|
|
272
|
-
*
|
|
273
|
-
* @default `medium`
|
|
274
|
-
*/
|
|
275
|
-
size?: null | 'small' | 'medium' | 'large';
|
|
276
|
-
/**
|
|
277
|
-
* Configures the `roundness` of the ComboBox.
|
|
278
|
-
*
|
|
279
|
-
* The available options are:
|
|
280
|
-
* - small
|
|
281
|
-
* - medium
|
|
282
|
-
* - large
|
|
283
|
-
* - full
|
|
284
|
-
* - null—Does not set a rounded `className`.
|
|
285
|
-
*
|
|
286
|
-
* @default `medium`
|
|
287
|
-
*/
|
|
288
|
-
rounded?: null | 'small' | 'medium' | 'large' | 'full';
|
|
289
|
-
/**
|
|
290
|
-
* Configures the `fillMode` of the ComboBox.
|
|
291
|
-
*
|
|
292
|
-
* The available options are:
|
|
293
|
-
* - solid
|
|
294
|
-
* - flat
|
|
295
|
-
* - outline
|
|
296
|
-
* - null—Does not set a fillMode `className`.
|
|
297
|
-
*
|
|
298
|
-
* @default `solid`
|
|
299
|
-
*/
|
|
300
|
-
fillMode?: null | 'solid' | 'flat' | 'outline';
|
|
301
|
-
/**
|
|
302
|
-
* Providing different rendering of the popup element based on the screen dimensions.
|
|
303
|
-
*/
|
|
304
|
-
adaptive?: boolean;
|
|
305
|
-
/**
|
|
306
|
-
* Specifies the text that is rendered as title in the adaptive popup.
|
|
307
|
-
*/
|
|
308
|
-
adaptiveTitle?: string;
|
|
309
|
-
/**
|
|
310
|
-
* Defines if Combobox's disabled items will be skipped or focused when navigating through the list of items using a keyboard. Defaults to `true`.
|
|
311
|
-
*/
|
|
312
|
-
skipDisabledItems?: boolean;
|
|
313
|
-
}
|
|
@@ -1,258 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import * as PropTypes from 'prop-types';
|
|
3
|
-
import { FormComponent, FormComponentValidity } from '@progress/kendo-react-common';
|
|
4
|
-
import DropDownBase from '../common/DropDownBase';
|
|
5
|
-
import { DropDownListProps } from './DropDownListProps';
|
|
6
|
-
import { DropDownStateBase, InternalState } from './../common/settings';
|
|
7
|
-
/**
|
|
8
|
-
* @hidden
|
|
9
|
-
*/
|
|
10
|
-
export interface DropDownListState extends DropDownStateBase {
|
|
11
|
-
windowWidth?: number;
|
|
12
|
-
}
|
|
13
|
-
/**
|
|
14
|
-
* @hidden
|
|
15
|
-
*/
|
|
16
|
-
export declare class DropDownListWithoutContext extends React.Component<DropDownListProps, DropDownListState> implements FormComponent {
|
|
17
|
-
static displayName: string;
|
|
18
|
-
/**
|
|
19
|
-
* @hidden
|
|
20
|
-
*/
|
|
21
|
-
static propTypes: {
|
|
22
|
-
value: PropTypes.Requireable<any>;
|
|
23
|
-
defaultValue: PropTypes.Requireable<any>;
|
|
24
|
-
filterable: PropTypes.Requireable<boolean>;
|
|
25
|
-
filter: PropTypes.Requireable<string>;
|
|
26
|
-
virtual: PropTypes.Requireable<PropTypes.InferProps<{
|
|
27
|
-
pageSize: PropTypes.Validator<number>;
|
|
28
|
-
skip: PropTypes.Validator<number>;
|
|
29
|
-
total: PropTypes.Validator<number>;
|
|
30
|
-
}>>;
|
|
31
|
-
onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
32
|
-
onPageChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
33
|
-
opened: PropTypes.Requireable<boolean>;
|
|
34
|
-
disabled: PropTypes.Requireable<boolean>;
|
|
35
|
-
dir: PropTypes.Requireable<string>;
|
|
36
|
-
tabIndex: PropTypes.Requireable<number>;
|
|
37
|
-
accessKey: PropTypes.Requireable<string>;
|
|
38
|
-
data: PropTypes.Requireable<any[]>;
|
|
39
|
-
textField: PropTypes.Requireable<string>;
|
|
40
|
-
className: PropTypes.Requireable<string>;
|
|
41
|
-
label: PropTypes.Requireable<string>;
|
|
42
|
-
loading: PropTypes.Requireable<boolean>;
|
|
43
|
-
popupSettings: PropTypes.Requireable<PropTypes.InferProps<{
|
|
44
|
-
animate: PropTypes.Requireable<NonNullable<boolean | PropTypes.InferProps<{
|
|
45
|
-
openDuration: PropTypes.Requireable<number>;
|
|
46
|
-
closeDuration: PropTypes.Requireable<number>;
|
|
47
|
-
}> | null | undefined>>;
|
|
48
|
-
popupClass: PropTypes.Requireable<string>;
|
|
49
|
-
className: PropTypes.Requireable<string>;
|
|
50
|
-
appendTo: PropTypes.Requireable<any>;
|
|
51
|
-
width: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
52
|
-
height: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
|
|
53
|
-
}>>;
|
|
54
|
-
onOpen: PropTypes.Requireable<(...args: any[]) => any>;
|
|
55
|
-
onClose: PropTypes.Requireable<(...args: any[]) => any>;
|
|
56
|
-
onFocus: PropTypes.Requireable<(...args: any[]) => any>;
|
|
57
|
-
onBlur: PropTypes.Requireable<(...args: any[]) => any>;
|
|
58
|
-
onChange: PropTypes.Requireable<(...args: any[]) => any>;
|
|
59
|
-
itemRender: PropTypes.Requireable<(...args: any[]) => any>;
|
|
60
|
-
listNoDataRender: PropTypes.Requireable<(...args: any[]) => any>;
|
|
61
|
-
focusedItemIndex: PropTypes.Requireable<(...args: any[]) => any>;
|
|
62
|
-
header: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
63
|
-
footer: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
64
|
-
delay: PropTypes.Requireable<number>;
|
|
65
|
-
ignoreCase: PropTypes.Requireable<boolean>;
|
|
66
|
-
iconClassName: PropTypes.Requireable<string>;
|
|
67
|
-
svgIcon: PropTypes.Requireable<PropTypes.InferProps<{
|
|
68
|
-
name: PropTypes.Validator<string>;
|
|
69
|
-
content: PropTypes.Validator<string>;
|
|
70
|
-
viewBox: PropTypes.Validator<string>;
|
|
71
|
-
}>>;
|
|
72
|
-
defaultItem: PropTypes.Requireable<any>;
|
|
73
|
-
valueRender: PropTypes.Requireable<(...args: any[]) => any>;
|
|
74
|
-
valueMap: PropTypes.Requireable<(...args: any[]) => any>;
|
|
75
|
-
validationMessage: PropTypes.Requireable<string>;
|
|
76
|
-
required: PropTypes.Requireable<boolean>;
|
|
77
|
-
id: PropTypes.Requireable<string>;
|
|
78
|
-
ariaLabelledBy: PropTypes.Requireable<string>;
|
|
79
|
-
ariaDescribedBy: PropTypes.Requireable<string>;
|
|
80
|
-
ariaLabel: PropTypes.Requireable<string>;
|
|
81
|
-
leftRightKeysNavigation: PropTypes.Requireable<boolean>;
|
|
82
|
-
title: PropTypes.Requireable<string>;
|
|
83
|
-
groupField: PropTypes.Requireable<string>;
|
|
84
|
-
list: PropTypes.Requireable<any>;
|
|
85
|
-
skipDisabledItems: PropTypes.Requireable<boolean>;
|
|
86
|
-
};
|
|
87
|
-
/**
|
|
88
|
-
* @hidden
|
|
89
|
-
*/
|
|
90
|
-
static defaultProps: {
|
|
91
|
-
required: boolean;
|
|
92
|
-
size: "small" | "medium" | "large" | null | undefined;
|
|
93
|
-
rounded: "small" | "medium" | "full" | "large" | null | undefined;
|
|
94
|
-
fillMode: "flat" | "outline" | "solid" | null | undefined;
|
|
95
|
-
groupMode: string | undefined;
|
|
96
|
-
popupSettings: {
|
|
97
|
-
height: string;
|
|
98
|
-
};
|
|
99
|
-
validityStyles: boolean;
|
|
100
|
-
delay: number;
|
|
101
|
-
tabIndex: number;
|
|
102
|
-
ignoreCase: boolean;
|
|
103
|
-
};
|
|
104
|
-
/**
|
|
105
|
-
* @hidden
|
|
106
|
-
*/
|
|
107
|
-
readonly state: DropDownListState;
|
|
108
|
-
private _element;
|
|
109
|
-
private _typingTimeout;
|
|
110
|
-
protected readonly base: DropDownBase;
|
|
111
|
-
private searchState;
|
|
112
|
-
private _select;
|
|
113
|
-
private _skipFocusEvent;
|
|
114
|
-
private _filterInput;
|
|
115
|
-
private _valueDuringOnChange;
|
|
116
|
-
private _navigated;
|
|
117
|
-
private _lastKeypressIsFilter;
|
|
118
|
-
private _inputId;
|
|
119
|
-
private itemHeight;
|
|
120
|
-
private observerResize?;
|
|
121
|
-
private get document();
|
|
122
|
-
constructor(props: DropDownListProps);
|
|
123
|
-
/**
|
|
124
|
-
* @hidden
|
|
125
|
-
*/
|
|
126
|
-
focus: () => void;
|
|
127
|
-
/**
|
|
128
|
-
* @hidden
|
|
129
|
-
*/
|
|
130
|
-
get element(): HTMLSpanElement | null;
|
|
131
|
-
/**
|
|
132
|
-
* The value of the DropDownList.
|
|
133
|
-
*/
|
|
134
|
-
get value(): any;
|
|
135
|
-
/**
|
|
136
|
-
* The index of the selected item.
|
|
137
|
-
*/
|
|
138
|
-
get index(): number;
|
|
139
|
-
/**
|
|
140
|
-
* Gets the `name` property of the DropDownList.
|
|
141
|
-
*/
|
|
142
|
-
get name(): string | undefined;
|
|
143
|
-
/**
|
|
144
|
-
* Represents the validity state into which the DropDownList is set.
|
|
145
|
-
*/
|
|
146
|
-
get validity(): FormComponentValidity;
|
|
147
|
-
protected get validityStyles(): boolean;
|
|
148
|
-
/**
|
|
149
|
-
* @hidden
|
|
150
|
-
*/
|
|
151
|
-
protected get required(): boolean;
|
|
152
|
-
/**
|
|
153
|
-
* @hidden
|
|
154
|
-
*/
|
|
155
|
-
componentDidUpdate(prevProps: DropDownListProps, prevState: DropDownListState): void;
|
|
156
|
-
/**
|
|
157
|
-
* @hidden
|
|
158
|
-
*/
|
|
159
|
-
componentDidMount(): void;
|
|
160
|
-
/** @hidden */
|
|
161
|
-
componentWillUnmount(): void;
|
|
162
|
-
/**
|
|
163
|
-
* @hidden
|
|
164
|
-
*/
|
|
165
|
-
render(): JSX.Element;
|
|
166
|
-
/**
|
|
167
|
-
* @hidden
|
|
168
|
-
*/
|
|
169
|
-
handleItemSelect: (index: number, state: InternalState) => void;
|
|
170
|
-
/**
|
|
171
|
-
* @hidden
|
|
172
|
-
*/
|
|
173
|
-
onNavigate(state: InternalState, keyCode: number, skipItems?: number): void;
|
|
174
|
-
private componentRef;
|
|
175
|
-
private dummySelect;
|
|
176
|
-
private renderAdaptiveListContainer;
|
|
177
|
-
private renderListContainer;
|
|
178
|
-
private renderList;
|
|
179
|
-
private onScroll;
|
|
180
|
-
private renderListFilter;
|
|
181
|
-
private renderDefaultItem;
|
|
182
|
-
private search;
|
|
183
|
-
private selectNext;
|
|
184
|
-
private handleKeyDown;
|
|
185
|
-
private handleItemClick;
|
|
186
|
-
private handleFocus;
|
|
187
|
-
private handleBlur;
|
|
188
|
-
private handleDefaultItemClick;
|
|
189
|
-
private handleWrapperClick;
|
|
190
|
-
private handleKeyPress;
|
|
191
|
-
private handleListFilterChange;
|
|
192
|
-
private onPopupOpened;
|
|
193
|
-
private onPopupClosed;
|
|
194
|
-
private getFocusedIndex;
|
|
195
|
-
private focusElement;
|
|
196
|
-
private setValidity;
|
|
197
|
-
private triggerOnChange;
|
|
198
|
-
private applyState;
|
|
199
|
-
private calculateMedia;
|
|
200
|
-
private resetValueIfDisabledItem;
|
|
201
|
-
private haveFocusedItemAndDataNotEmpty;
|
|
202
|
-
}
|
|
203
|
-
/**
|
|
204
|
-
* Represents the PropsContext of the `DropDownList` component.
|
|
205
|
-
* Used for global configuration of all `DropDownList` instances.
|
|
206
|
-
*
|
|
207
|
-
* For more information, refer to the [Dropdowns Props Context]({% slug props-context_dropdowns %}) article.
|
|
208
|
-
*/
|
|
209
|
-
export declare const DropDownListPropsContext: React.Context<(p: DropDownListProps) => DropDownListProps>;
|
|
210
|
-
/**
|
|
211
|
-
* Represent the `ref` of the DropDownList component.
|
|
212
|
-
*/
|
|
213
|
-
export interface DropDownListHandle extends Pick<DropDownListWithoutContext, keyof DropDownListWithoutContext> {
|
|
214
|
-
/**
|
|
215
|
-
* The index of the selected item.
|
|
216
|
-
*/
|
|
217
|
-
index: number;
|
|
218
|
-
/**
|
|
219
|
-
* Gets the `name` property of the DropDownList.
|
|
220
|
-
*/
|
|
221
|
-
name: string | undefined;
|
|
222
|
-
/**
|
|
223
|
-
* Represents the validity state into which the DropDownList is set.
|
|
224
|
-
*/
|
|
225
|
-
validity: FormComponentValidity;
|
|
226
|
-
/**
|
|
227
|
-
* The value of the DropDownList.
|
|
228
|
-
*/
|
|
229
|
-
value: any;
|
|
230
|
-
}
|
|
231
|
-
/** @hidden */
|
|
232
|
-
export declare type DropDownList = DropDownListHandle;
|
|
233
|
-
/**
|
|
234
|
-
* Represents the [KendoReact DropDownList component]({% slug overview_dropdownlist %}).
|
|
235
|
-
*
|
|
236
|
-
* Accepts properties of type [DropDownListProps]({% slug api_dropdowns_dropdownlistprops %}).
|
|
237
|
-
* Obtaining the `ref` returns an object of type [DropDownListHandle]({% slug api_dropdowns_dropdownlisthandle %}).
|
|
238
|
-
*
|
|
239
|
-
* @example
|
|
240
|
-
* ```jsx
|
|
241
|
-
* class App extends React.Component {
|
|
242
|
-
* dropdownlist = null;
|
|
243
|
-
* render() {
|
|
244
|
-
* return (
|
|
245
|
-
* <div>
|
|
246
|
-
* <DropDownList
|
|
247
|
-
* data={[ "Albania", "Andorra", "Austria", "Belarus" ]}
|
|
248
|
-
* ref={component => this.dropdownlist = component}
|
|
249
|
-
* />
|
|
250
|
-
* <button onClick={() => alert(this.dropdownlist.value)}>alert value</button>
|
|
251
|
-
* </div>
|
|
252
|
-
* );
|
|
253
|
-
* }
|
|
254
|
-
* }
|
|
255
|
-
* ReactDOM.render(<App />, document.querySelector('my-app'));
|
|
256
|
-
* ```
|
|
257
|
-
*/
|
|
258
|
-
export declare const DropDownList: React.ForwardRefExoticComponent<DropDownListProps & React.RefAttributes<any>>;
|