-
Notifications
You must be signed in to change notification settings - Fork 4k
/
Dropdown.d.ts
310 lines (240 loc) · 9.25 KB
/
Dropdown.d.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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
import * as React from 'react'
import { LabelProps } from '../../elements/Label'
import DropdownDivider from './DropdownDivider'
import DropdownHeader from './DropdownHeader'
import DropdownItem, { DropdownItemProps } from './DropdownItem'
import DropdownMenu from './DropdownMenu'
import DropdownSearchInput from './DropdownSearchInput'
import { ForwardRefComponent } from '../../generic'
export interface DropdownProps extends StrictDropdownProps {
[key: string]: any
}
export interface StrictDropdownProps {
/** An element type to render as (string or function). */
as?: any
/** Label prefixed to an option added by a user. */
additionLabel?: number | string | React.ReactNode
/** Position of the `Add: ...` option in the dropdown list ('top' or 'bottom'). */
additionPosition?: 'top' | 'bottom'
/**
* Allow user additions to the list of options (boolean).
* Requires the use of `selection`, `options` and `search`.
*/
allowAdditions?: boolean
/** A Dropdown can reduce its complexity. */
basic?: boolean
/** Format the Dropdown to appear as a button. */
button?: boolean
/** Primary content. */
children?: React.ReactNode
/** Additional classes. */
className?: string
/** Using the clearable setting will let users remove their selection from a dropdown. */
clearable?: boolean
/** Whether or not the menu should close when the dropdown is blurred. */
closeOnBlur?: boolean
/** Whether or not the dropdown should close when the escape key is pressed. */
closeOnEscape?: boolean
/**
* Whether or not the menu should close when a value is selected from the dropdown.
* By default, multiple selection dropdowns will remain open on change, while single
* selection dropdowns will close on change.
*/
closeOnChange?: boolean
/** A compact dropdown has no minimum width. */
compact?: boolean
/** Whether or not the dropdown should strip diacritics in options and input search */
deburr?: boolean
/** Initial value of open. */
defaultOpen?: boolean
/** Initial value of searchQuery. */
defaultSearchQuery?: string
/** Currently selected label in multi-select. */
defaultSelectedLabel?: number | string
/** Initial value of upward. */
defaultUpward?: boolean
/** Initial value or value array if multiple. */
defaultValue?: string | number | boolean | (number | string | boolean)[]
/** A dropdown menu can open to the left or to the right. */
direction?: 'left' | 'right'
/** A disabled dropdown menu or item does not allow user interaction. */
disabled?: boolean
/** An errored dropdown can alert a user to a problem. */
error?: boolean
/** A dropdown menu can contain floated content. */
floating?: boolean
/** A dropdown can take the full width of its parent */
fluid?: boolean
/** A dropdown menu can contain a header. */
header?: React.ReactNode
/** Shorthand for Icon. */
icon?: any
/** A dropdown can be formatted to appear inline in other content. */
inline?: boolean
/** A dropdown can be formatted as a Menu item. */
item?: boolean
/** A dropdown can be labeled. */
labeled?: boolean
/** A dropdown can defer rendering its options until it is open. */
lazyLoad?: boolean
/** A dropdown can show that it is currently loading data. */
loading?: boolean
/** The minimum characters for a search to begin showing results. */
minCharacters?: number
/** A selection dropdown can allow multiple selections. */
multiple?: boolean
/** Message to display when there are no results. */
noResultsMessage?: React.ReactNode
/**
* Called when a user adds a new item. Use this to update the options list.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props and the new item's value.
*/
onAddItem?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
/**
* Called on blur.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props.
*/
onBlur?: (event: React.FocusEvent<HTMLElement>, data: DropdownProps) => void
/**
* Called when the user attempts to change the value.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props and proposed value.
*/
onChange?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
/**
* Called on click.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props.
*/
onClick?: (event: React.MouseEvent<HTMLElement>, data: DropdownProps) => void
/**
* Called when a close event happens.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props.
*/
onClose?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
/**
* Called on focus.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props.
*/
onFocus?: (event: React.FocusEvent<HTMLElement>, data: DropdownProps) => void
/**
* Called when a multi-select label is clicked.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All label props.
*/
onLabelClick?: (event: React.MouseEvent<HTMLElement>, data: LabelProps) => void
/**
* Called on mousedown.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props.
*/
onMouseDown?: (event: React.MouseEvent<HTMLElement>, data: DropdownProps) => void
/**
* Called when an open event happens.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props.
*/
onOpen?: (event: React.SyntheticEvent<HTMLElement>, data: DropdownProps) => void
/**
* Called on search input change.
*
* @param {SyntheticEvent} event - React's original SyntheticEvent.
* @param {object} data - All props, includes current value of searchQuery.
*/
onSearchChange?: (
event: React.SyntheticEvent<HTMLElement>,
data: DropdownOnSearchChangeData,
) => void
/** Controls whether or not the dropdown menu is displayed. */
open?: boolean
/** Whether or not the menu should open when the dropdown is focused. */
openOnFocus?: boolean
/** Array of Dropdown.Item props e.g. `{ text: '', value: '' }` */
options?: DropdownItemProps[]
/** Placeholder text. */
placeholder?: string
/** A dropdown can be formatted so that its menu is pointing. */
pointing?:
| boolean
| 'left'
| 'right'
| 'top'
| 'top left'
| 'top right'
| 'bottom'
| 'bottom left'
| 'bottom right'
/**
* Mapped over the active items and returns shorthand for the active item Labels.
* Only applies to `multiple` Dropdowns.
*
* @param {object} item - A currently active dropdown item.
* @param {number} index - The current index.
* @param {object} defaultLabelProps - The default props for an active item Label.
* @returns {*} Shorthand for a Label.
*/
renderLabel?: (item: DropdownItemProps, index: number, defaultLabelProps: LabelProps) => any
/** A dropdown can have its menu scroll. */
scrolling?: boolean
/**
* A selection dropdown can allow a user to search through a large list of choices.
* Pass a function here to replace the default search.
*/
search?: boolean | ((options: DropdownItemProps[], value: string) => DropdownItemProps[])
/** A shorthand for a search input. */
searchInput?: any
/** Current value of searchQuery. Creates a controlled component. */
searchQuery?: string
/** Define whether the highlighted item should be selected on blur. */
selectOnBlur?: boolean
/** Whether dropdown should select new option when using keyboard shortcuts. Setting to false will require enter or left click to confirm a choice. */
selectOnNavigation?: boolean
/** Currently selected label in multi-select. */
selectedLabel?: number | string
/** A dropdown can be used to select between choices in a form. */
selection?: any
/** A simple dropdown can open without Javascript. */
simple?: boolean
/** A dropdown can receive focus. */
tabIndex?: number | string
/** The text displayed in the dropdown, usually for the active item. */
text?: string
/** Custom element to trigger the menu to become visible. Takes place of 'text'. */
trigger?: React.ReactNode
/** Current value or value array if multiple. Creates a controlled component. */
value?: boolean | number | string | (boolean | number | string)[]
/** Controls whether the dropdown will open upward. */
upward?: boolean
/**
* A dropdown will go to the last element when ArrowUp is pressed on the first,
* or go to the first when ArrowDown is pressed on the last( aka infinite selection )
*/
wrapSelection?: boolean
}
/* TODO: replace with DropdownProps when #1829 will be fixed:
* https://github.com/Semantic-Org/Semantic-UI-React/issues/1829
*/
export interface DropdownOnSearchChangeData extends DropdownProps {
searchQuery: string
}
declare const Dropdown: ForwardRefComponent<DropdownProps, HTMLDivElement> & {
Divider: typeof DropdownDivider
Header: typeof DropdownHeader
Item: typeof DropdownItem
Menu: typeof DropdownMenu
SearchInput: typeof DropdownSearchInput
}
export default Dropdown