@xsolla/xui-context-menu 0.64.0-pr81.1768677662
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/native/index.d.mts +278 -0
- package/native/index.d.ts +278 -0
- package/native/index.js +1924 -0
- package/native/index.js.map +1 -0
- package/native/index.mjs +1886 -0
- package/native/index.mjs.map +1 -0
- package/package.json +59 -0
- package/web/index.d.mts +278 -0
- package/web/index.d.ts +278 -0
- package/web/index.js +1896 -0
- package/web/index.js.map +1 -0
- package/web/index.mjs +1854 -0
- package/web/index.mjs.map +1 -0
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
import React$1, { ReactNode, RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
/** Size variants for the context menu */
|
|
4
|
+
type ContextMenuSize = "s" | "m" | "l" | "xl";
|
|
5
|
+
/** Item variant types for data-driven API */
|
|
6
|
+
type ContextMenuItemVariant = "default" | "checkbox" | "radio";
|
|
7
|
+
/** Trailing element types */
|
|
8
|
+
type ContextMenuTrailingType = "none" | "shortcut" | "badge" | "switch" | "arrow";
|
|
9
|
+
/** Position configuration for context menu */
|
|
10
|
+
interface ContextMenuPosition {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
}
|
|
14
|
+
/** Individual menu item data structure for data-driven API */
|
|
15
|
+
interface ContextMenuItemData {
|
|
16
|
+
id: string;
|
|
17
|
+
label: string;
|
|
18
|
+
description?: string;
|
|
19
|
+
icon?: ReactNode;
|
|
20
|
+
trailing?: {
|
|
21
|
+
type: ContextMenuTrailingType;
|
|
22
|
+
content?: ReactNode | string;
|
|
23
|
+
};
|
|
24
|
+
variant?: ContextMenuItemVariant;
|
|
25
|
+
checked?: boolean;
|
|
26
|
+
/** Whether this item is selected (shows trailing checkmark) - for Select/Dropdown usage */
|
|
27
|
+
selected?: boolean;
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
onPress?: () => void;
|
|
30
|
+
children?: ContextMenuItemData[];
|
|
31
|
+
groupId?: string;
|
|
32
|
+
}
|
|
33
|
+
/** Menu group with optional header */
|
|
34
|
+
interface ContextMenuGroupData {
|
|
35
|
+
id: string;
|
|
36
|
+
label?: string;
|
|
37
|
+
description?: string;
|
|
38
|
+
items: ContextMenuItemData[];
|
|
39
|
+
}
|
|
40
|
+
/** Main ContextMenu Container Props */
|
|
41
|
+
interface ContextMenuProps {
|
|
42
|
+
/** Menu items - data-driven API (alternative to children) */
|
|
43
|
+
list?: ContextMenuItemData[];
|
|
44
|
+
/** Grouped menu items with optional headers */
|
|
45
|
+
groups?: ContextMenuGroupData[];
|
|
46
|
+
/** Render function for custom children (alternative to list/groups) */
|
|
47
|
+
children?: ReactNode;
|
|
48
|
+
/** Size of the context menu */
|
|
49
|
+
size?: ContextMenuSize;
|
|
50
|
+
/** Controlled open state */
|
|
51
|
+
isOpen?: boolean;
|
|
52
|
+
/** Callback when open state changes */
|
|
53
|
+
onOpenChange?: (open: boolean) => void;
|
|
54
|
+
/** Position for right-click context menu mode */
|
|
55
|
+
position?: ContextMenuPosition;
|
|
56
|
+
/** Trigger element (button, etc.) for dropdown mode */
|
|
57
|
+
trigger?: ReactNode;
|
|
58
|
+
/** Width of the menu */
|
|
59
|
+
width?: number | string;
|
|
60
|
+
/** Maximum height before scrolling */
|
|
61
|
+
maxHeight?: number;
|
|
62
|
+
/** Callback when an item is selected */
|
|
63
|
+
onSelect?: (item: ContextMenuItemData) => void;
|
|
64
|
+
/** Callback when checkbox/radio values change */
|
|
65
|
+
onCheckedChange?: (itemId: string, checked: boolean) => void;
|
|
66
|
+
/** Close menu on item select (default: true for non-checkbox items) */
|
|
67
|
+
closeOnSelect?: boolean;
|
|
68
|
+
/** Loading state - shows spinner */
|
|
69
|
+
isLoading?: boolean;
|
|
70
|
+
/** ARIA label for the menu */
|
|
71
|
+
"aria-label"?: string;
|
|
72
|
+
/** Test ID */
|
|
73
|
+
"data-testid"?: string;
|
|
74
|
+
}
|
|
75
|
+
/** ContextMenuItem Component Props - for default menu items */
|
|
76
|
+
interface ContextMenuItemProps {
|
|
77
|
+
/** Item label text */
|
|
78
|
+
children: ReactNode;
|
|
79
|
+
/** Description text below label */
|
|
80
|
+
description?: string;
|
|
81
|
+
/** Leading icon */
|
|
82
|
+
icon?: ReactNode;
|
|
83
|
+
/** Trailing element */
|
|
84
|
+
trailing?: ReactNode;
|
|
85
|
+
/** Keyboard shortcut display text */
|
|
86
|
+
shortcut?: string;
|
|
87
|
+
/** Whether this item is selected (cyan background) - for Select/Dropdown usage */
|
|
88
|
+
selected?: boolean;
|
|
89
|
+
/** Whether item is disabled */
|
|
90
|
+
disabled?: boolean;
|
|
91
|
+
/** Whether item is currently active/focused (for keyboard navigation) */
|
|
92
|
+
active?: boolean;
|
|
93
|
+
/** Size inherited from parent */
|
|
94
|
+
size?: ContextMenuSize;
|
|
95
|
+
/** Whether this item has a submenu */
|
|
96
|
+
hasSubmenu?: boolean;
|
|
97
|
+
/** Press handler */
|
|
98
|
+
onPress?: () => void;
|
|
99
|
+
/** Test ID */
|
|
100
|
+
"data-testid"?: string;
|
|
101
|
+
}
|
|
102
|
+
/** ContextMenuCheckboxItem Component Props */
|
|
103
|
+
interface ContextMenuCheckboxItemProps {
|
|
104
|
+
/** Item label text */
|
|
105
|
+
children: ReactNode;
|
|
106
|
+
/** Description text below label */
|
|
107
|
+
description?: string;
|
|
108
|
+
/** Content placed after checkbox but before label (e.g., Status indicator) */
|
|
109
|
+
leadingContent?: ReactNode;
|
|
110
|
+
/** Trailing element */
|
|
111
|
+
trailing?: ReactNode;
|
|
112
|
+
/** Checked state */
|
|
113
|
+
checked?: boolean;
|
|
114
|
+
/** Indeterminate state - shows minus icon instead of check (for "select all" partially selected) */
|
|
115
|
+
indeterminate?: boolean;
|
|
116
|
+
/** Whether item is disabled */
|
|
117
|
+
disabled?: boolean;
|
|
118
|
+
/** Size inherited from parent */
|
|
119
|
+
size?: ContextMenuSize;
|
|
120
|
+
/** Checked change handler */
|
|
121
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
122
|
+
/** Press handler */
|
|
123
|
+
onPress?: () => void;
|
|
124
|
+
/** Test ID */
|
|
125
|
+
"data-testid"?: string;
|
|
126
|
+
}
|
|
127
|
+
/** ContextMenuRadioGroup Component Props */
|
|
128
|
+
interface ContextMenuRadioGroupProps {
|
|
129
|
+
/** Radio items */
|
|
130
|
+
children: ReactNode;
|
|
131
|
+
/** Current selected value */
|
|
132
|
+
value: string;
|
|
133
|
+
/** Value change handler */
|
|
134
|
+
onValueChange: (value: string) => void;
|
|
135
|
+
/** Test ID */
|
|
136
|
+
"data-testid"?: string;
|
|
137
|
+
}
|
|
138
|
+
/** ContextMenuRadioItem Component Props */
|
|
139
|
+
interface ContextMenuRadioItemProps {
|
|
140
|
+
/** Item label text */
|
|
141
|
+
children: ReactNode;
|
|
142
|
+
/** Description text below label */
|
|
143
|
+
description?: string;
|
|
144
|
+
/** Value for this radio item */
|
|
145
|
+
value: string;
|
|
146
|
+
/** Whether item is disabled */
|
|
147
|
+
disabled?: boolean;
|
|
148
|
+
/** Size inherited from parent */
|
|
149
|
+
size?: ContextMenuSize;
|
|
150
|
+
/** Press handler */
|
|
151
|
+
onPress?: () => void;
|
|
152
|
+
/** Test ID */
|
|
153
|
+
"data-testid"?: string;
|
|
154
|
+
}
|
|
155
|
+
/** ContextMenuGroup Component Props */
|
|
156
|
+
interface ContextMenuGroupProps {
|
|
157
|
+
/** Group heading text */
|
|
158
|
+
label?: string;
|
|
159
|
+
/** Group description */
|
|
160
|
+
description?: string;
|
|
161
|
+
/** Group items */
|
|
162
|
+
children: ReactNode;
|
|
163
|
+
/** Size inherited from parent */
|
|
164
|
+
size?: ContextMenuSize;
|
|
165
|
+
/** Test ID */
|
|
166
|
+
"data-testid"?: string;
|
|
167
|
+
}
|
|
168
|
+
/** ContextMenuSeparator Component Props */
|
|
169
|
+
interface ContextMenuSeparatorProps {
|
|
170
|
+
/** Size for consistent spacing */
|
|
171
|
+
size?: ContextMenuSize;
|
|
172
|
+
/** Test ID */
|
|
173
|
+
"data-testid"?: string;
|
|
174
|
+
}
|
|
175
|
+
/** ContextMenuSearch Component Props */
|
|
176
|
+
interface ContextMenuSearchProps {
|
|
177
|
+
/** Current search value */
|
|
178
|
+
value?: string;
|
|
179
|
+
/** Change handler (event-based) */
|
|
180
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
181
|
+
/** Change handler (value-based) */
|
|
182
|
+
onValueChange?: (value: string) => void;
|
|
183
|
+
/** Placeholder text */
|
|
184
|
+
placeholder?: string;
|
|
185
|
+
/** Whether to auto-focus the input when mounted */
|
|
186
|
+
autoFocus?: boolean;
|
|
187
|
+
/** Size inherited from parent */
|
|
188
|
+
size?: ContextMenuSize;
|
|
189
|
+
/** Test ID */
|
|
190
|
+
"data-testid"?: string;
|
|
191
|
+
}
|
|
192
|
+
/** Context for passing state to children */
|
|
193
|
+
interface ContextMenuContextValue {
|
|
194
|
+
size: ContextMenuSize;
|
|
195
|
+
closeMenu: () => void;
|
|
196
|
+
onItemSelect: (item: ContextMenuItemData) => void;
|
|
197
|
+
activeIndex: number;
|
|
198
|
+
setActiveIndex: (index: number) => void;
|
|
199
|
+
registerItem: (id: string) => number;
|
|
200
|
+
unregisterItem: (id: string) => void;
|
|
201
|
+
}
|
|
202
|
+
/** Sizing configuration returned by theme.sizing.contextMenu */
|
|
203
|
+
interface ContextMenuSizing {
|
|
204
|
+
paddingVertical: number;
|
|
205
|
+
itemPaddingHorizontal: number;
|
|
206
|
+
itemPaddingVertical: number;
|
|
207
|
+
fontSize: number;
|
|
208
|
+
descriptionFontSize: number;
|
|
209
|
+
iconSize: number;
|
|
210
|
+
gap: number;
|
|
211
|
+
minWidth: number;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
declare const ContextMenu: React$1.ForwardRefExoticComponent<ContextMenuProps & React$1.RefAttributes<any>> & {
|
|
215
|
+
Item: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<any>>;
|
|
216
|
+
CheckboxItem: React$1.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React$1.RefAttributes<any>>;
|
|
217
|
+
RadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<any>>;
|
|
218
|
+
RadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<any>>;
|
|
219
|
+
Group: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & React$1.RefAttributes<any>>;
|
|
220
|
+
Separator: React$1.FC<ContextMenuSeparatorProps>;
|
|
221
|
+
Search: React$1.ForwardRefExoticComponent<ContextMenuSearchProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
declare const ContextMenuItem: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<any>>;
|
|
225
|
+
|
|
226
|
+
declare const ContextMenuCheckboxItem: React$1.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React$1.RefAttributes<any>>;
|
|
227
|
+
|
|
228
|
+
interface RadioGroupContextValue {
|
|
229
|
+
value: string;
|
|
230
|
+
onValueChange: (value: string) => void;
|
|
231
|
+
}
|
|
232
|
+
declare const useRadioGroup: () => RadioGroupContextValue | null;
|
|
233
|
+
declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<any>>;
|
|
234
|
+
|
|
235
|
+
declare const ContextMenuRadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<any>>;
|
|
236
|
+
|
|
237
|
+
declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & React$1.RefAttributes<any>>;
|
|
238
|
+
|
|
239
|
+
declare const ContextMenuSeparator: React$1.FC<ContextMenuSeparatorProps>;
|
|
240
|
+
|
|
241
|
+
declare const ContextMenuSearch: React$1.ForwardRefExoticComponent<ContextMenuSearchProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
242
|
+
|
|
243
|
+
declare const useContextMenu: () => ContextMenuContextValue | undefined;
|
|
244
|
+
declare const useContextMenuRequired: () => ContextMenuContextValue;
|
|
245
|
+
|
|
246
|
+
interface UseContextMenuPositionOptions {
|
|
247
|
+
position?: ContextMenuPosition;
|
|
248
|
+
menuRef: RefObject<HTMLElement>;
|
|
249
|
+
isOpen: boolean;
|
|
250
|
+
offset?: number;
|
|
251
|
+
}
|
|
252
|
+
interface AdjustedPosition extends ContextMenuPosition {
|
|
253
|
+
transformOrigin: string;
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* Hook to calculate smart positioning for context menus
|
|
257
|
+
* Adjusts position to avoid viewport overflow
|
|
258
|
+
*/
|
|
259
|
+
declare const useContextMenuPosition: ({ position, menuRef, isOpen, offset, }: UseContextMenuPositionOptions) => AdjustedPosition | undefined;
|
|
260
|
+
|
|
261
|
+
interface UseKeyboardNavigationOptions {
|
|
262
|
+
isOpen: boolean;
|
|
263
|
+
itemCount: number;
|
|
264
|
+
activeIndex: number;
|
|
265
|
+
setActiveIndex: (index: number) => void;
|
|
266
|
+
onSelect: (index: number) => void;
|
|
267
|
+
onClose: () => void;
|
|
268
|
+
loop?: boolean;
|
|
269
|
+
}
|
|
270
|
+
/**
|
|
271
|
+
* Hook to handle keyboard navigation in context menus
|
|
272
|
+
* Supports arrow keys, home/end, enter/space, and escape
|
|
273
|
+
*/
|
|
274
|
+
declare const useKeyboardNavigation: ({ isOpen, itemCount, activeIndex, setActiveIndex, onSelect, onClose, loop, }: UseKeyboardNavigationOptions) => {
|
|
275
|
+
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
276
|
+
};
|
|
277
|
+
|
|
278
|
+
export { ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, type ContextMenuContextValue, ContextMenuGroup, type ContextMenuGroupData, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemData, type ContextMenuItemProps, type ContextMenuItemVariant, type ContextMenuPosition, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSearch, type ContextMenuSearchProps, ContextMenuSeparator, type ContextMenuSeparatorProps, type ContextMenuSize, type ContextMenuSizing, type ContextMenuTrailingType, useContextMenu, useContextMenuPosition, useContextMenuRequired, useKeyboardNavigation, useRadioGroup };
|
|
@@ -0,0 +1,278 @@
|
|
|
1
|
+
import React$1, { ReactNode, RefObject } from 'react';
|
|
2
|
+
|
|
3
|
+
/** Size variants for the context menu */
|
|
4
|
+
type ContextMenuSize = "s" | "m" | "l" | "xl";
|
|
5
|
+
/** Item variant types for data-driven API */
|
|
6
|
+
type ContextMenuItemVariant = "default" | "checkbox" | "radio";
|
|
7
|
+
/** Trailing element types */
|
|
8
|
+
type ContextMenuTrailingType = "none" | "shortcut" | "badge" | "switch" | "arrow";
|
|
9
|
+
/** Position configuration for context menu */
|
|
10
|
+
interface ContextMenuPosition {
|
|
11
|
+
x: number;
|
|
12
|
+
y: number;
|
|
13
|
+
}
|
|
14
|
+
/** Individual menu item data structure for data-driven API */
|
|
15
|
+
interface ContextMenuItemData {
|
|
16
|
+
id: string;
|
|
17
|
+
label: string;
|
|
18
|
+
description?: string;
|
|
19
|
+
icon?: ReactNode;
|
|
20
|
+
trailing?: {
|
|
21
|
+
type: ContextMenuTrailingType;
|
|
22
|
+
content?: ReactNode | string;
|
|
23
|
+
};
|
|
24
|
+
variant?: ContextMenuItemVariant;
|
|
25
|
+
checked?: boolean;
|
|
26
|
+
/** Whether this item is selected (shows trailing checkmark) - for Select/Dropdown usage */
|
|
27
|
+
selected?: boolean;
|
|
28
|
+
disabled?: boolean;
|
|
29
|
+
onPress?: () => void;
|
|
30
|
+
children?: ContextMenuItemData[];
|
|
31
|
+
groupId?: string;
|
|
32
|
+
}
|
|
33
|
+
/** Menu group with optional header */
|
|
34
|
+
interface ContextMenuGroupData {
|
|
35
|
+
id: string;
|
|
36
|
+
label?: string;
|
|
37
|
+
description?: string;
|
|
38
|
+
items: ContextMenuItemData[];
|
|
39
|
+
}
|
|
40
|
+
/** Main ContextMenu Container Props */
|
|
41
|
+
interface ContextMenuProps {
|
|
42
|
+
/** Menu items - data-driven API (alternative to children) */
|
|
43
|
+
list?: ContextMenuItemData[];
|
|
44
|
+
/** Grouped menu items with optional headers */
|
|
45
|
+
groups?: ContextMenuGroupData[];
|
|
46
|
+
/** Render function for custom children (alternative to list/groups) */
|
|
47
|
+
children?: ReactNode;
|
|
48
|
+
/** Size of the context menu */
|
|
49
|
+
size?: ContextMenuSize;
|
|
50
|
+
/** Controlled open state */
|
|
51
|
+
isOpen?: boolean;
|
|
52
|
+
/** Callback when open state changes */
|
|
53
|
+
onOpenChange?: (open: boolean) => void;
|
|
54
|
+
/** Position for right-click context menu mode */
|
|
55
|
+
position?: ContextMenuPosition;
|
|
56
|
+
/** Trigger element (button, etc.) for dropdown mode */
|
|
57
|
+
trigger?: ReactNode;
|
|
58
|
+
/** Width of the menu */
|
|
59
|
+
width?: number | string;
|
|
60
|
+
/** Maximum height before scrolling */
|
|
61
|
+
maxHeight?: number;
|
|
62
|
+
/** Callback when an item is selected */
|
|
63
|
+
onSelect?: (item: ContextMenuItemData) => void;
|
|
64
|
+
/** Callback when checkbox/radio values change */
|
|
65
|
+
onCheckedChange?: (itemId: string, checked: boolean) => void;
|
|
66
|
+
/** Close menu on item select (default: true for non-checkbox items) */
|
|
67
|
+
closeOnSelect?: boolean;
|
|
68
|
+
/** Loading state - shows spinner */
|
|
69
|
+
isLoading?: boolean;
|
|
70
|
+
/** ARIA label for the menu */
|
|
71
|
+
"aria-label"?: string;
|
|
72
|
+
/** Test ID */
|
|
73
|
+
"data-testid"?: string;
|
|
74
|
+
}
|
|
75
|
+
/** ContextMenuItem Component Props - for default menu items */
|
|
76
|
+
interface ContextMenuItemProps {
|
|
77
|
+
/** Item label text */
|
|
78
|
+
children: ReactNode;
|
|
79
|
+
/** Description text below label */
|
|
80
|
+
description?: string;
|
|
81
|
+
/** Leading icon */
|
|
82
|
+
icon?: ReactNode;
|
|
83
|
+
/** Trailing element */
|
|
84
|
+
trailing?: ReactNode;
|
|
85
|
+
/** Keyboard shortcut display text */
|
|
86
|
+
shortcut?: string;
|
|
87
|
+
/** Whether this item is selected (cyan background) - for Select/Dropdown usage */
|
|
88
|
+
selected?: boolean;
|
|
89
|
+
/** Whether item is disabled */
|
|
90
|
+
disabled?: boolean;
|
|
91
|
+
/** Whether item is currently active/focused (for keyboard navigation) */
|
|
92
|
+
active?: boolean;
|
|
93
|
+
/** Size inherited from parent */
|
|
94
|
+
size?: ContextMenuSize;
|
|
95
|
+
/** Whether this item has a submenu */
|
|
96
|
+
hasSubmenu?: boolean;
|
|
97
|
+
/** Press handler */
|
|
98
|
+
onPress?: () => void;
|
|
99
|
+
/** Test ID */
|
|
100
|
+
"data-testid"?: string;
|
|
101
|
+
}
|
|
102
|
+
/** ContextMenuCheckboxItem Component Props */
|
|
103
|
+
interface ContextMenuCheckboxItemProps {
|
|
104
|
+
/** Item label text */
|
|
105
|
+
children: ReactNode;
|
|
106
|
+
/** Description text below label */
|
|
107
|
+
description?: string;
|
|
108
|
+
/** Content placed after checkbox but before label (e.g., Status indicator) */
|
|
109
|
+
leadingContent?: ReactNode;
|
|
110
|
+
/** Trailing element */
|
|
111
|
+
trailing?: ReactNode;
|
|
112
|
+
/** Checked state */
|
|
113
|
+
checked?: boolean;
|
|
114
|
+
/** Indeterminate state - shows minus icon instead of check (for "select all" partially selected) */
|
|
115
|
+
indeterminate?: boolean;
|
|
116
|
+
/** Whether item is disabled */
|
|
117
|
+
disabled?: boolean;
|
|
118
|
+
/** Size inherited from parent */
|
|
119
|
+
size?: ContextMenuSize;
|
|
120
|
+
/** Checked change handler */
|
|
121
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
122
|
+
/** Press handler */
|
|
123
|
+
onPress?: () => void;
|
|
124
|
+
/** Test ID */
|
|
125
|
+
"data-testid"?: string;
|
|
126
|
+
}
|
|
127
|
+
/** ContextMenuRadioGroup Component Props */
|
|
128
|
+
interface ContextMenuRadioGroupProps {
|
|
129
|
+
/** Radio items */
|
|
130
|
+
children: ReactNode;
|
|
131
|
+
/** Current selected value */
|
|
132
|
+
value: string;
|
|
133
|
+
/** Value change handler */
|
|
134
|
+
onValueChange: (value: string) => void;
|
|
135
|
+
/** Test ID */
|
|
136
|
+
"data-testid"?: string;
|
|
137
|
+
}
|
|
138
|
+
/** ContextMenuRadioItem Component Props */
|
|
139
|
+
interface ContextMenuRadioItemProps {
|
|
140
|
+
/** Item label text */
|
|
141
|
+
children: ReactNode;
|
|
142
|
+
/** Description text below label */
|
|
143
|
+
description?: string;
|
|
144
|
+
/** Value for this radio item */
|
|
145
|
+
value: string;
|
|
146
|
+
/** Whether item is disabled */
|
|
147
|
+
disabled?: boolean;
|
|
148
|
+
/** Size inherited from parent */
|
|
149
|
+
size?: ContextMenuSize;
|
|
150
|
+
/** Press handler */
|
|
151
|
+
onPress?: () => void;
|
|
152
|
+
/** Test ID */
|
|
153
|
+
"data-testid"?: string;
|
|
154
|
+
}
|
|
155
|
+
/** ContextMenuGroup Component Props */
|
|
156
|
+
interface ContextMenuGroupProps {
|
|
157
|
+
/** Group heading text */
|
|
158
|
+
label?: string;
|
|
159
|
+
/** Group description */
|
|
160
|
+
description?: string;
|
|
161
|
+
/** Group items */
|
|
162
|
+
children: ReactNode;
|
|
163
|
+
/** Size inherited from parent */
|
|
164
|
+
size?: ContextMenuSize;
|
|
165
|
+
/** Test ID */
|
|
166
|
+
"data-testid"?: string;
|
|
167
|
+
}
|
|
168
|
+
/** ContextMenuSeparator Component Props */
|
|
169
|
+
interface ContextMenuSeparatorProps {
|
|
170
|
+
/** Size for consistent spacing */
|
|
171
|
+
size?: ContextMenuSize;
|
|
172
|
+
/** Test ID */
|
|
173
|
+
"data-testid"?: string;
|
|
174
|
+
}
|
|
175
|
+
/** ContextMenuSearch Component Props */
|
|
176
|
+
interface ContextMenuSearchProps {
|
|
177
|
+
/** Current search value */
|
|
178
|
+
value?: string;
|
|
179
|
+
/** Change handler (event-based) */
|
|
180
|
+
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
181
|
+
/** Change handler (value-based) */
|
|
182
|
+
onValueChange?: (value: string) => void;
|
|
183
|
+
/** Placeholder text */
|
|
184
|
+
placeholder?: string;
|
|
185
|
+
/** Whether to auto-focus the input when mounted */
|
|
186
|
+
autoFocus?: boolean;
|
|
187
|
+
/** Size inherited from parent */
|
|
188
|
+
size?: ContextMenuSize;
|
|
189
|
+
/** Test ID */
|
|
190
|
+
"data-testid"?: string;
|
|
191
|
+
}
|
|
192
|
+
/** Context for passing state to children */
|
|
193
|
+
interface ContextMenuContextValue {
|
|
194
|
+
size: ContextMenuSize;
|
|
195
|
+
closeMenu: () => void;
|
|
196
|
+
onItemSelect: (item: ContextMenuItemData) => void;
|
|
197
|
+
activeIndex: number;
|
|
198
|
+
setActiveIndex: (index: number) => void;
|
|
199
|
+
registerItem: (id: string) => number;
|
|
200
|
+
unregisterItem: (id: string) => void;
|
|
201
|
+
}
|
|
202
|
+
/** Sizing configuration returned by theme.sizing.contextMenu */
|
|
203
|
+
interface ContextMenuSizing {
|
|
204
|
+
paddingVertical: number;
|
|
205
|
+
itemPaddingHorizontal: number;
|
|
206
|
+
itemPaddingVertical: number;
|
|
207
|
+
fontSize: number;
|
|
208
|
+
descriptionFontSize: number;
|
|
209
|
+
iconSize: number;
|
|
210
|
+
gap: number;
|
|
211
|
+
minWidth: number;
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
declare const ContextMenu: React$1.ForwardRefExoticComponent<ContextMenuProps & React$1.RefAttributes<any>> & {
|
|
215
|
+
Item: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<any>>;
|
|
216
|
+
CheckboxItem: React$1.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React$1.RefAttributes<any>>;
|
|
217
|
+
RadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<any>>;
|
|
218
|
+
RadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<any>>;
|
|
219
|
+
Group: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & React$1.RefAttributes<any>>;
|
|
220
|
+
Separator: React$1.FC<ContextMenuSeparatorProps>;
|
|
221
|
+
Search: React$1.ForwardRefExoticComponent<ContextMenuSearchProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
222
|
+
};
|
|
223
|
+
|
|
224
|
+
declare const ContextMenuItem: React$1.ForwardRefExoticComponent<ContextMenuItemProps & React$1.RefAttributes<any>>;
|
|
225
|
+
|
|
226
|
+
declare const ContextMenuCheckboxItem: React$1.ForwardRefExoticComponent<ContextMenuCheckboxItemProps & React$1.RefAttributes<any>>;
|
|
227
|
+
|
|
228
|
+
interface RadioGroupContextValue {
|
|
229
|
+
value: string;
|
|
230
|
+
onValueChange: (value: string) => void;
|
|
231
|
+
}
|
|
232
|
+
declare const useRadioGroup: () => RadioGroupContextValue | null;
|
|
233
|
+
declare const ContextMenuRadioGroup: React$1.ForwardRefExoticComponent<ContextMenuRadioGroupProps & React$1.RefAttributes<any>>;
|
|
234
|
+
|
|
235
|
+
declare const ContextMenuRadioItem: React$1.ForwardRefExoticComponent<ContextMenuRadioItemProps & React$1.RefAttributes<any>>;
|
|
236
|
+
|
|
237
|
+
declare const ContextMenuGroup: React$1.ForwardRefExoticComponent<ContextMenuGroupProps & React$1.RefAttributes<any>>;
|
|
238
|
+
|
|
239
|
+
declare const ContextMenuSeparator: React$1.FC<ContextMenuSeparatorProps>;
|
|
240
|
+
|
|
241
|
+
declare const ContextMenuSearch: React$1.ForwardRefExoticComponent<ContextMenuSearchProps & React$1.RefAttributes<HTMLInputElement>>;
|
|
242
|
+
|
|
243
|
+
declare const useContextMenu: () => ContextMenuContextValue | undefined;
|
|
244
|
+
declare const useContextMenuRequired: () => ContextMenuContextValue;
|
|
245
|
+
|
|
246
|
+
interface UseContextMenuPositionOptions {
|
|
247
|
+
position?: ContextMenuPosition;
|
|
248
|
+
menuRef: RefObject<HTMLElement>;
|
|
249
|
+
isOpen: boolean;
|
|
250
|
+
offset?: number;
|
|
251
|
+
}
|
|
252
|
+
interface AdjustedPosition extends ContextMenuPosition {
|
|
253
|
+
transformOrigin: string;
|
|
254
|
+
}
|
|
255
|
+
/**
|
|
256
|
+
* Hook to calculate smart positioning for context menus
|
|
257
|
+
* Adjusts position to avoid viewport overflow
|
|
258
|
+
*/
|
|
259
|
+
declare const useContextMenuPosition: ({ position, menuRef, isOpen, offset, }: UseContextMenuPositionOptions) => AdjustedPosition | undefined;
|
|
260
|
+
|
|
261
|
+
interface UseKeyboardNavigationOptions {
|
|
262
|
+
isOpen: boolean;
|
|
263
|
+
itemCount: number;
|
|
264
|
+
activeIndex: number;
|
|
265
|
+
setActiveIndex: (index: number) => void;
|
|
266
|
+
onSelect: (index: number) => void;
|
|
267
|
+
onClose: () => void;
|
|
268
|
+
loop?: boolean;
|
|
269
|
+
}
|
|
270
|
+
/**
|
|
271
|
+
* Hook to handle keyboard navigation in context menus
|
|
272
|
+
* Supports arrow keys, home/end, enter/space, and escape
|
|
273
|
+
*/
|
|
274
|
+
declare const useKeyboardNavigation: ({ isOpen, itemCount, activeIndex, setActiveIndex, onSelect, onClose, loop, }: UseKeyboardNavigationOptions) => {
|
|
275
|
+
handleKeyDown: (event: React.KeyboardEvent) => void;
|
|
276
|
+
};
|
|
277
|
+
|
|
278
|
+
export { ContextMenu, ContextMenuCheckboxItem, type ContextMenuCheckboxItemProps, type ContextMenuContextValue, ContextMenuGroup, type ContextMenuGroupData, type ContextMenuGroupProps, ContextMenuItem, type ContextMenuItemData, type ContextMenuItemProps, type ContextMenuItemVariant, type ContextMenuPosition, type ContextMenuProps, ContextMenuRadioGroup, type ContextMenuRadioGroupProps, ContextMenuRadioItem, type ContextMenuRadioItemProps, ContextMenuSearch, type ContextMenuSearchProps, ContextMenuSeparator, type ContextMenuSeparatorProps, type ContextMenuSize, type ContextMenuSizing, type ContextMenuTrailingType, useContextMenu, useContextMenuPosition, useContextMenuRequired, useKeyboardNavigation, useRadioGroup };
|