-
Notifications
You must be signed in to change notification settings - Fork 4k
/
types.ts
186 lines (178 loc) · 4.39 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
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
/**
* External dependencies
*/
// eslint-disable-next-line no-restricted-imports
import type * as Ariakit from '@ariakit/react';
import type { Placement } from '@floating-ui/react-dom';
export interface DropdownMenuContext {
/**
* The ariakit store shared across all DropdownMenu subcomponents.
*/
store: Ariakit.MenuStore;
/**
* The variant used by the underlying menu popover.
*/
variant?: 'toolbar';
}
export interface DropdownMenuProps {
/**
* The trigger button.
*/
trigger: React.ReactElement;
/**
* The contents of the dropdown.
*/
children?: React.ReactNode;
/**
* The open state of the dropdown menu when it is initially rendered. Use when
* not wanting to control its open state.
*
* @default false
*/
defaultOpen?: boolean;
/**
* The controlled open state of the dropdown menu. Must be used in conjunction
* with `onOpenChange`.
*/
open?: boolean;
/**
* Event handler called when the open state of the dropdown menu changes.
*/
onOpenChange?: ( open: boolean ) => void;
/**
* The modality of the dropdown menu. When set to true, interaction with
* outside elements will be disabled and only menu content will be visible to
* screen readers.
*
* @default true
*/
modal?: boolean;
/**
* The placement of the dropdown menu popover.
*
* @default 'bottom-start' for root-level menus, 'right-start' for nested menus
*/
placement?: Placement;
/**
* The distance between the popover and the anchor element.
*
* @default 8 for root-level menus, 16 for nested menus
*/
gutter?: number;
/**
* The skidding of the popover along the anchor element. Can be set to
* negative values to make the popover shift to the opposite side.
*
* @default 0 for root-level menus, -8 for nested menus
*/
shift?: number;
/**
* Determines whether the menu popover will be hidden when the user presses
* the Escape key.
*
* @default `( event ) => { event.preventDefault(); return true; }`
*/
hideOnEscape?:
| boolean
| ( (
event: KeyboardEvent | React.KeyboardEvent< Element >
) => boolean );
}
export interface DropdownMenuGroupProps {
/**
* The contents of the dropdown menu group.
*/
children: React.ReactNode;
}
export interface DropdownMenuGroupLabelProps {
/**
* The contents of the dropdown menu group label.
*/
children: React.ReactNode;
}
export interface DropdownMenuItemProps {
/**
* The contents of the menu item.
*/
children: React.ReactNode;
/**
* The contents of the menu item's prefix.
*/
prefix?: React.ReactNode;
/**
* The contents of the menu item's suffix.
*/
suffix?: React.ReactNode;
/**
* Whether to hide the parent menu when the item is clicked.
*
* @default true
*/
hideOnClick?: boolean;
/**
* Determines if the element is disabled.
*/
disabled?: boolean;
}
export interface DropdownMenuCheckboxItemProps
extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
/**
* Whether to hide the dropdown menu when the item is clicked.
*
* @default false
*/
hideOnClick?: boolean;
/**
* The checkbox menu item's name.
*/
name: string;
/**
* The checkbox item's value, useful when using multiple checkbox menu items
* associated to the same `name`.
*/
value?: string;
/**
* The controlled checked state of the checkbox menu item.
*/
checked?: boolean;
/**
* The checked state of the checkbox menu item when it is initially rendered.
* Use when not wanting to control its checked state.
*/
defaultChecked?: boolean;
/**
* Event handler called when the checked state of the checkbox menu item changes.
*/
onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
}
export interface DropdownMenuRadioItemProps
extends Omit< DropdownMenuItemProps, 'prefix' | 'hideOnClick' > {
/**
* Whether to hide the dropdown menu when the item is clicked.
*
* @default false
*/
hideOnClick?: boolean;
/**
* The radio item's name.
*/
name: string;
/**
* The radio item's value.
*/
value: string | number;
/**
* The controlled checked state of the radio menu item.
*/
checked?: boolean;
/**
* The checked state of the radio menu item when it is initially rendered.
* Use when not wanting to control its checked state.
*/
defaultChecked?: boolean;
/**
* Event handler called when the checked radio menu item changes.
*/
onChange?: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
}
export interface DropdownMenuSeparatorProps {}