@arun-dev/headless 4.14.0 → 4.16.0
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/chunk-ETNICT5M.js +8 -0
- package/dist/combobox/index.cjs +3 -1
- package/dist/combobox/index.js +7 -7
- package/dist/menu/index.cjs +509 -33
- package/dist/menu/index.d.cts +216 -20
- package/dist/menu/index.d.ts +216 -20
- package/dist/menu/index.js +509 -37
- package/package.json +1 -1
package/dist/menu/index.d.cts
CHANGED
|
@@ -2,6 +2,11 @@ import * as react from 'react';
|
|
|
2
2
|
import { ReactNode, ReactElement, Ref, ComponentPropsWithRef } from 'react';
|
|
3
3
|
import { A as AnchorSide, a as AnchorAlign } from '../anchoring-Btxi0QwC.cjs';
|
|
4
4
|
|
|
5
|
+
/** The state Menu.Root shares with its parts, and projects as `data-*` attributes. */
|
|
6
|
+
type MenuState = {
|
|
7
|
+
open: boolean;
|
|
8
|
+
};
|
|
9
|
+
|
|
5
10
|
type MenuRootProps = {
|
|
6
11
|
/**
|
|
7
12
|
* Controlled state. Provide `onOpenChange` alongside it.
|
|
@@ -34,7 +39,7 @@ type MenuRootProps = {
|
|
|
34
39
|
* Each Item registers its own `disabled` from its props; the Root never reads it back from
|
|
35
40
|
* the DOM (decision 10). Elements are kept only to move focus to.
|
|
36
41
|
*/
|
|
37
|
-
declare function MenuRoot({
|
|
42
|
+
declare function MenuRoot({ children, ...props }: MenuRootProps): react.JSX.Element;
|
|
38
43
|
|
|
39
44
|
type MenuTriggerOwnProps = {
|
|
40
45
|
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
@@ -53,7 +58,10 @@ declare function MenuTrigger({ className, children, render, ...rest }: MenuTrigg
|
|
|
53
58
|
type MenuSide = AnchorSide;
|
|
54
59
|
type MenuAlign = AnchorAlign;
|
|
55
60
|
type MenuPopupOwnProps = {
|
|
56
|
-
/**
|
|
61
|
+
/**
|
|
62
|
+
* Which side of the trigger to open on. Flips to the opposite side when there is no room.
|
|
63
|
+
* Defaults to `'bottom'`, and to `'right'` in a submenu.
|
|
64
|
+
*/
|
|
57
65
|
side?: MenuSide;
|
|
58
66
|
/** Where along that side: flush with the trigger's start or end edge, or centred on it. */
|
|
59
67
|
align?: MenuAlign;
|
|
@@ -68,14 +76,19 @@ type MenuPopupProps = MenuPopupOwnProps & Omit<ComponentPropsWithRef<'div'>, key
|
|
|
68
76
|
* Popover's popup is (decision 12), and labelled by it.
|
|
69
77
|
*
|
|
70
78
|
* Opening moves focus to the first item — the last, when Up on the Trigger opened it. Up
|
|
71
|
-
* and Down then move between items, wrapping, with Home and End;
|
|
72
|
-
*
|
|
79
|
+
* and Down then move between items, wrapping, with Home and End; typing moves to the next item
|
|
80
|
+
* whose text starts with what was typed. Disabled items are skipped by both, unless the Root
|
|
81
|
+
* sets `focusableWhenDisabled`. Tab closes the menu and lets focus move on.
|
|
82
|
+
*
|
|
83
|
+
* Inside a SubmenuRoot it is that submenu's popup: it opens beside its SubmenuTrigger, ← (→ in
|
|
84
|
+
* a right-to-left menu) closes it, and Tab closes every level. Closing with focus inside returns
|
|
85
|
+
* it to the SubmenuTrigger.
|
|
73
86
|
*
|
|
74
87
|
* Light dismiss and Esc close the element before anyone is asked; the `toggle` event
|
|
75
88
|
* reports it through the Root, and the element reopens if the state stays open. Focus
|
|
76
89
|
* returns to the Trigger, the invoker, whenever the menu hides with focus inside it.
|
|
77
90
|
*/
|
|
78
|
-
declare function MenuPopup({ side, align, className, children, render, ...rest }: MenuPopupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
91
|
+
declare function MenuPopup({ side: sideProp, align, className, children, render, ...rest }: MenuPopupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
79
92
|
|
|
80
93
|
type MenuItemOwnProps = {
|
|
81
94
|
/**
|
|
@@ -83,6 +96,11 @@ type MenuItemOwnProps = {
|
|
|
83
96
|
* `focusableWhenDisabled`.
|
|
84
97
|
*/
|
|
85
98
|
disabled?: boolean;
|
|
99
|
+
/**
|
|
100
|
+
* The text typeahead matches. Defaults to the text in `children`; set it when that text is
|
|
101
|
+
* rendered by a component of your own, or differs from what should be typed.
|
|
102
|
+
*/
|
|
103
|
+
textValue?: string;
|
|
86
104
|
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
87
105
|
render?: ReactElement;
|
|
88
106
|
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
@@ -91,25 +109,203 @@ type MenuItemOwnProps = {
|
|
|
91
109
|
type MenuItemProps = MenuItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuItemOwnProps>;
|
|
92
110
|
/**
|
|
93
111
|
* One action. A native `<button>`, so Enter, Space and a click activate it with no key
|
|
94
|
-
* handling here: put the action in `onClick`. Activating it closes the menu
|
|
95
|
-
* `event.preventComponentHandler()` in your `onClick` to keep it open.
|
|
112
|
+
* handling here: put the action in `onClick`. Activating it closes the menu, and every menu
|
|
113
|
+
* it is nested in — call `event.preventComponentHandler()` in your `onClick` to keep it open.
|
|
96
114
|
*
|
|
97
|
-
*
|
|
115
|
+
* Disabled, your `onClick` is not attached, so an `aria-disabled` item under the Root's
|
|
116
|
+
* `focusableWhenDisabled` cannot run it either.
|
|
117
|
+
*/
|
|
118
|
+
declare function MenuItem({ disabled, textValue, onClick, className, children, render, ...rest }: MenuItemProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
119
|
+
|
|
120
|
+
type MenuCheckboxItemOwnProps = {
|
|
121
|
+
/**
|
|
122
|
+
* Controlled state. Provide `onCheckedChange` alongside it.
|
|
123
|
+
*
|
|
124
|
+
* Never `undefined` once mounted: the mode is latched at mount, as for Checkbox.
|
|
125
|
+
*/
|
|
126
|
+
checked?: boolean;
|
|
127
|
+
/** Initial state when uncontrolled. Read once, at mount. */
|
|
128
|
+
defaultChecked?: boolean;
|
|
129
|
+
/** Called with the new state, in both controlled and uncontrolled modes. */
|
|
130
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
131
|
+
/** Closes the menu when activated. Off by default: a setting is often changed with others. */
|
|
132
|
+
closeOnClick?: boolean;
|
|
133
|
+
/**
|
|
134
|
+
* Cannot be activated. Skipped by the arrow keys, unless the Root sets
|
|
135
|
+
* `focusableWhenDisabled`.
|
|
136
|
+
*/
|
|
137
|
+
disabled?: boolean;
|
|
138
|
+
/** The text typeahead matches. Defaults to the text in `children`. */
|
|
139
|
+
textValue?: string;
|
|
140
|
+
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
141
|
+
render?: ReactElement;
|
|
142
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
143
|
+
ref?: Ref<HTMLElement>;
|
|
144
|
+
};
|
|
145
|
+
type MenuCheckboxItemProps = MenuCheckboxItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuCheckboxItemOwnProps>;
|
|
146
|
+
/**
|
|
147
|
+
* A setting that is on or off: `role="menuitemcheckbox"` with `aria-checked`, on a native
|
|
148
|
+
* `<button>`. Activating it toggles the state and leaves the menu open, unless `closeOnClick`.
|
|
149
|
+
* Your `onClick` runs first; `event.preventComponentHandler()` there stops the toggle.
|
|
98
150
|
*
|
|
99
|
-
*
|
|
100
|
-
* `focusableWhenDisabled` it is `aria-disabled` instead, which keeps it focusable, so the
|
|
101
|
-
* activation a native `disabled` would block is blocked here: your `onClick` is not
|
|
102
|
-
* attached while it is disabled.
|
|
151
|
+
* Holds its own state through `useControlled`; an ItemIndicator inside reads it.
|
|
103
152
|
*/
|
|
104
|
-
declare function
|
|
153
|
+
declare function MenuCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, closeOnClick, disabled, textValue, onClick, className, children, render, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
|
|
105
154
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
155
|
+
type MenuRadioGroupOwnProps = {
|
|
156
|
+
/**
|
|
157
|
+
* Controlled value — the `value` of the checked RadioItem, or `null` for none. Provide
|
|
158
|
+
* `onValueChange` alongside it.
|
|
159
|
+
*
|
|
160
|
+
* Never `undefined` once mounted: the mode is latched at mount, as for RadioGroup.
|
|
161
|
+
*/
|
|
162
|
+
value?: string | null;
|
|
163
|
+
/** Initial value when uncontrolled. Read once, at mount. */
|
|
164
|
+
defaultValue?: string | null;
|
|
165
|
+
/** Called with the value of the RadioItem being checked, in both modes. */
|
|
166
|
+
onValueChange?: (value: string) => void;
|
|
167
|
+
/** Disables every RadioItem inside. */
|
|
168
|
+
disabled?: boolean;
|
|
169
|
+
/** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
|
|
170
|
+
render?: ReactElement;
|
|
171
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
172
|
+
ref?: Ref<HTMLElement>;
|
|
173
|
+
};
|
|
174
|
+
type MenuRadioGroupProps = MenuRadioGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuRadioGroupOwnProps | 'defaultValue'>;
|
|
175
|
+
/**
|
|
176
|
+
* One choice among several: a `role="group"` that owns a value, and the RadioItems inside
|
|
177
|
+
* derive `checked` from it — as RadioGroup does for radios. Named by a GroupLabel inside, as a
|
|
178
|
+
* Group is.
|
|
179
|
+
*/
|
|
180
|
+
declare function MenuRadioGroup({ value: valueProp, defaultValue, onValueChange, disabled, className, children, render, ...rest }: MenuRadioGroupProps): react.JSX.Element;
|
|
109
181
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
182
|
+
type MenuRadioItemOwnProps = {
|
|
183
|
+
/** This item's value in its RadioGroup. Checked while the group's `value` equals it. */
|
|
184
|
+
value: string;
|
|
185
|
+
/** Closes the menu when activated. Off by default, as for CheckboxItem. */
|
|
186
|
+
closeOnClick?: boolean;
|
|
187
|
+
/**
|
|
188
|
+
* Cannot be activated. Skipped by the arrow keys, unless the Root sets
|
|
189
|
+
* `focusableWhenDisabled`. The RadioGroup's `disabled` disables it too.
|
|
190
|
+
*/
|
|
191
|
+
disabled?: boolean;
|
|
192
|
+
/** The text typeahead matches. Defaults to the text in `children`. */
|
|
193
|
+
textValue?: string;
|
|
194
|
+
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
195
|
+
render?: ReactElement;
|
|
196
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
197
|
+
ref?: Ref<HTMLElement>;
|
|
198
|
+
};
|
|
199
|
+
type MenuRadioItemProps = MenuRadioItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuRadioItemOwnProps>;
|
|
200
|
+
/**
|
|
201
|
+
* One choice in a RadioGroup: `role="menuitemradio"` with `aria-checked`, on a native
|
|
202
|
+
* `<button>`. Activating it checks it and leaves the menu open, unless `closeOnClick`; the
|
|
203
|
+
* checked item stays checked when activated again. Your `onClick` runs first;
|
|
204
|
+
* `event.preventComponentHandler()` there stops the change.
|
|
205
|
+
*/
|
|
206
|
+
declare function MenuRadioItem({ value, closeOnClick, disabled: disabledProp, textValue, onClick, className, children, render, ...rest }: MenuRadioItemProps): react.JSX.Element;
|
|
207
|
+
|
|
208
|
+
type MenuItemIndicatorOwnProps = {
|
|
209
|
+
/** Element to render instead of the default `<span>`. Props and ref are merged onto it. */
|
|
210
|
+
render?: ReactElement;
|
|
211
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
212
|
+
ref?: Ref<HTMLElement>;
|
|
213
|
+
};
|
|
214
|
+
type MenuItemIndicatorProps = MenuItemIndicatorOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof MenuItemIndicatorOwnProps>;
|
|
215
|
+
/**
|
|
216
|
+
* Where the check goes, in a CheckboxItem or a RadioItem — one part for both, since it reads
|
|
217
|
+
* the same `checked` from either. Ships no glyph, as Checkbox.Indicator ships none: supply it as
|
|
218
|
+
* children, or draw it off the `data-*` attributes, which match the item's.
|
|
219
|
+
*
|
|
220
|
+
* Always rendered, in every state, so an unchecked item keeps its space and its label lines up
|
|
221
|
+
* with the checked ones. Hidden from assistive technology: the item announces `aria-checked`.
|
|
222
|
+
*/
|
|
223
|
+
declare function MenuItemIndicator({ className, children, render, ...rest }: MenuItemIndicatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
224
|
+
|
|
225
|
+
type MenuGroupOwnProps = {
|
|
226
|
+
/** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
|
|
227
|
+
render?: ReactElement;
|
|
228
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
229
|
+
ref?: Ref<HTMLElement>;
|
|
230
|
+
};
|
|
231
|
+
type MenuGroupProps = MenuGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuGroupOwnProps>;
|
|
232
|
+
/**
|
|
233
|
+
* Items under a label: `role="group"`, named by its GroupLabel — the menu → group → item
|
|
234
|
+
* structure APG allows. The arrow keys and typeahead run through every group's items as one
|
|
235
|
+
* list, past the labels.
|
|
236
|
+
*/
|
|
237
|
+
declare function MenuGroup({ className, children, render, ...rest }: MenuGroupProps): react.JSX.Element;
|
|
238
|
+
|
|
239
|
+
type MenuGroupLabelOwnProps = {
|
|
240
|
+
/** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
|
|
241
|
+
render?: ReactElement;
|
|
242
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
243
|
+
ref?: Ref<HTMLElement>;
|
|
113
244
|
};
|
|
245
|
+
type MenuGroupLabelProps = MenuGroupLabelOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuGroupLabelOwnProps>;
|
|
246
|
+
/**
|
|
247
|
+
* Names its Group or RadioGroup. Shown in the menu, but not an item: it cannot be activated,
|
|
248
|
+
* and the arrow keys and typeahead pass it.
|
|
249
|
+
*/
|
|
250
|
+
declare function MenuGroupLabel({ className, children, render, ...rest }: MenuGroupLabelProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
251
|
+
|
|
252
|
+
type MenuSubmenuRootProps = {
|
|
253
|
+
/**
|
|
254
|
+
* Controlled state. Provide `onOpenChange` alongside it.
|
|
255
|
+
*
|
|
256
|
+
* Never `undefined` once mounted: the mode is latched at mount, as for Menu.Root.
|
|
257
|
+
*/
|
|
258
|
+
open?: boolean;
|
|
259
|
+
/** Initial state when uncontrolled. Read once, at mount. */
|
|
260
|
+
defaultOpen?: boolean;
|
|
261
|
+
/**
|
|
262
|
+
* Called on every request to open or close — its SubmenuTrigger, the arrow keys, an Item,
|
|
263
|
+
* Esc, a click elsewhere, or the pointer moving to another item of the parent menu.
|
|
264
|
+
*/
|
|
265
|
+
onOpenChange?: (open: boolean) => void;
|
|
266
|
+
/** As on Menu.Root. Defaults to the parent menu's setting. */
|
|
267
|
+
focusableWhenDisabled?: boolean;
|
|
268
|
+
children?: ReactNode;
|
|
269
|
+
};
|
|
270
|
+
/**
|
|
271
|
+
* A menu inside a menu: holds the submenu's state, as Root does, and renders no element. Put a
|
|
272
|
+
* SubmenuTrigger and a Popup inside it; the Popup opens beside the trigger, on the right by
|
|
273
|
+
* default.
|
|
274
|
+
*
|
|
275
|
+
* The popup is a native `popover="auto"` shown with the trigger as its `source`, which nests it
|
|
276
|
+
* in the parent's popover: the parent stays open while it is, Esc closes one level at a time,
|
|
277
|
+
* a click in the parent closes only the submenu, and focus returns to the trigger — all the
|
|
278
|
+
* platform's. Activating an item closes every level.
|
|
279
|
+
*/
|
|
280
|
+
declare function MenuSubmenuRoot({ focusableWhenDisabled, children, ...props }: MenuSubmenuRootProps): react.JSX.Element;
|
|
281
|
+
|
|
282
|
+
type MenuSubmenuTriggerOwnProps = {
|
|
283
|
+
/**
|
|
284
|
+
* Cannot open its submenu. Skipped by the arrow keys, unless the Root sets
|
|
285
|
+
* `focusableWhenDisabled`.
|
|
286
|
+
*/
|
|
287
|
+
disabled?: boolean;
|
|
288
|
+
/** The text typeahead matches in the parent menu. Defaults to the text in `children`. */
|
|
289
|
+
textValue?: string;
|
|
290
|
+
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
291
|
+
render?: ReactElement;
|
|
292
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
293
|
+
ref?: Ref<HTMLElement>;
|
|
294
|
+
};
|
|
295
|
+
type MenuSubmenuTriggerProps = MenuSubmenuTriggerOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuSubmenuTriggerOwnProps>;
|
|
296
|
+
/**
|
|
297
|
+
* The item that opens a submenu: a `menuitem` of the parent menu with `aria-haspopup="menu"`,
|
|
298
|
+
* which the submenu is anchored to and named by. It registers with the parent, so the parent's
|
|
299
|
+
* arrow keys and typeahead reach it.
|
|
300
|
+
*
|
|
301
|
+
* Enter, Space and → (← in a right-to-left menu) open the submenu at its first item. Resting the
|
|
302
|
+
* pointer on it opens it without moving focus; moving to another item of the parent closes it,
|
|
303
|
+
* unless the pointer is crossing toward the submenu.
|
|
304
|
+
*/
|
|
305
|
+
declare function MenuSubmenuTrigger({ disabled, textValue, onClick, className, children, render, ...rest }: MenuSubmenuTriggerProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
306
|
+
|
|
307
|
+
declare namespace index_parts {
|
|
308
|
+
export { MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSubmenuRoot as SubmenuRoot, MenuSubmenuTrigger as SubmenuTrigger, MenuTrigger as Trigger };
|
|
309
|
+
}
|
|
114
310
|
|
|
115
|
-
export { index_parts as Menu, type MenuAlign, type MenuItemProps, type MenuPopupProps, type MenuRootProps, type MenuSide, type MenuState, type MenuTriggerProps };
|
|
311
|
+
export { index_parts as Menu, type MenuAlign, type MenuCheckboxItemProps, type MenuGroupLabelProps, type MenuGroupProps, type MenuItemIndicatorProps, type MenuItemProps, type MenuPopupProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuRootProps, type MenuSide, type MenuState, type MenuSubmenuRootProps, type MenuSubmenuTriggerProps, type MenuTriggerProps };
|
package/dist/menu/index.d.ts
CHANGED
|
@@ -2,6 +2,11 @@ import * as react from 'react';
|
|
|
2
2
|
import { ReactNode, ReactElement, Ref, ComponentPropsWithRef } from 'react';
|
|
3
3
|
import { A as AnchorSide, a as AnchorAlign } from '../anchoring-Btxi0QwC.js';
|
|
4
4
|
|
|
5
|
+
/** The state Menu.Root shares with its parts, and projects as `data-*` attributes. */
|
|
6
|
+
type MenuState = {
|
|
7
|
+
open: boolean;
|
|
8
|
+
};
|
|
9
|
+
|
|
5
10
|
type MenuRootProps = {
|
|
6
11
|
/**
|
|
7
12
|
* Controlled state. Provide `onOpenChange` alongside it.
|
|
@@ -34,7 +39,7 @@ type MenuRootProps = {
|
|
|
34
39
|
* Each Item registers its own `disabled` from its props; the Root never reads it back from
|
|
35
40
|
* the DOM (decision 10). Elements are kept only to move focus to.
|
|
36
41
|
*/
|
|
37
|
-
declare function MenuRoot({
|
|
42
|
+
declare function MenuRoot({ children, ...props }: MenuRootProps): react.JSX.Element;
|
|
38
43
|
|
|
39
44
|
type MenuTriggerOwnProps = {
|
|
40
45
|
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
@@ -53,7 +58,10 @@ declare function MenuTrigger({ className, children, render, ...rest }: MenuTrigg
|
|
|
53
58
|
type MenuSide = AnchorSide;
|
|
54
59
|
type MenuAlign = AnchorAlign;
|
|
55
60
|
type MenuPopupOwnProps = {
|
|
56
|
-
/**
|
|
61
|
+
/**
|
|
62
|
+
* Which side of the trigger to open on. Flips to the opposite side when there is no room.
|
|
63
|
+
* Defaults to `'bottom'`, and to `'right'` in a submenu.
|
|
64
|
+
*/
|
|
57
65
|
side?: MenuSide;
|
|
58
66
|
/** Where along that side: flush with the trigger's start or end edge, or centred on it. */
|
|
59
67
|
align?: MenuAlign;
|
|
@@ -68,14 +76,19 @@ type MenuPopupProps = MenuPopupOwnProps & Omit<ComponentPropsWithRef<'div'>, key
|
|
|
68
76
|
* Popover's popup is (decision 12), and labelled by it.
|
|
69
77
|
*
|
|
70
78
|
* Opening moves focus to the first item — the last, when Up on the Trigger opened it. Up
|
|
71
|
-
* and Down then move between items, wrapping, with Home and End;
|
|
72
|
-
*
|
|
79
|
+
* and Down then move between items, wrapping, with Home and End; typing moves to the next item
|
|
80
|
+
* whose text starts with what was typed. Disabled items are skipped by both, unless the Root
|
|
81
|
+
* sets `focusableWhenDisabled`. Tab closes the menu and lets focus move on.
|
|
82
|
+
*
|
|
83
|
+
* Inside a SubmenuRoot it is that submenu's popup: it opens beside its SubmenuTrigger, ← (→ in
|
|
84
|
+
* a right-to-left menu) closes it, and Tab closes every level. Closing with focus inside returns
|
|
85
|
+
* it to the SubmenuTrigger.
|
|
73
86
|
*
|
|
74
87
|
* Light dismiss and Esc close the element before anyone is asked; the `toggle` event
|
|
75
88
|
* reports it through the Root, and the element reopens if the state stays open. Focus
|
|
76
89
|
* returns to the Trigger, the invoker, whenever the menu hides with focus inside it.
|
|
77
90
|
*/
|
|
78
|
-
declare function MenuPopup({ side, align, className, children, render, ...rest }: MenuPopupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
91
|
+
declare function MenuPopup({ side: sideProp, align, className, children, render, ...rest }: MenuPopupProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
79
92
|
|
|
80
93
|
type MenuItemOwnProps = {
|
|
81
94
|
/**
|
|
@@ -83,6 +96,11 @@ type MenuItemOwnProps = {
|
|
|
83
96
|
* `focusableWhenDisabled`.
|
|
84
97
|
*/
|
|
85
98
|
disabled?: boolean;
|
|
99
|
+
/**
|
|
100
|
+
* The text typeahead matches. Defaults to the text in `children`; set it when that text is
|
|
101
|
+
* rendered by a component of your own, or differs from what should be typed.
|
|
102
|
+
*/
|
|
103
|
+
textValue?: string;
|
|
86
104
|
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
87
105
|
render?: ReactElement;
|
|
88
106
|
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
@@ -91,25 +109,203 @@ type MenuItemOwnProps = {
|
|
|
91
109
|
type MenuItemProps = MenuItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuItemOwnProps>;
|
|
92
110
|
/**
|
|
93
111
|
* One action. A native `<button>`, so Enter, Space and a click activate it with no key
|
|
94
|
-
* handling here: put the action in `onClick`. Activating it closes the menu
|
|
95
|
-
* `event.preventComponentHandler()` in your `onClick` to keep it open.
|
|
112
|
+
* handling here: put the action in `onClick`. Activating it closes the menu, and every menu
|
|
113
|
+
* it is nested in — call `event.preventComponentHandler()` in your `onClick` to keep it open.
|
|
96
114
|
*
|
|
97
|
-
*
|
|
115
|
+
* Disabled, your `onClick` is not attached, so an `aria-disabled` item under the Root's
|
|
116
|
+
* `focusableWhenDisabled` cannot run it either.
|
|
117
|
+
*/
|
|
118
|
+
declare function MenuItem({ disabled, textValue, onClick, className, children, render, ...rest }: MenuItemProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
119
|
+
|
|
120
|
+
type MenuCheckboxItemOwnProps = {
|
|
121
|
+
/**
|
|
122
|
+
* Controlled state. Provide `onCheckedChange` alongside it.
|
|
123
|
+
*
|
|
124
|
+
* Never `undefined` once mounted: the mode is latched at mount, as for Checkbox.
|
|
125
|
+
*/
|
|
126
|
+
checked?: boolean;
|
|
127
|
+
/** Initial state when uncontrolled. Read once, at mount. */
|
|
128
|
+
defaultChecked?: boolean;
|
|
129
|
+
/** Called with the new state, in both controlled and uncontrolled modes. */
|
|
130
|
+
onCheckedChange?: (checked: boolean) => void;
|
|
131
|
+
/** Closes the menu when activated. Off by default: a setting is often changed with others. */
|
|
132
|
+
closeOnClick?: boolean;
|
|
133
|
+
/**
|
|
134
|
+
* Cannot be activated. Skipped by the arrow keys, unless the Root sets
|
|
135
|
+
* `focusableWhenDisabled`.
|
|
136
|
+
*/
|
|
137
|
+
disabled?: boolean;
|
|
138
|
+
/** The text typeahead matches. Defaults to the text in `children`. */
|
|
139
|
+
textValue?: string;
|
|
140
|
+
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
141
|
+
render?: ReactElement;
|
|
142
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
143
|
+
ref?: Ref<HTMLElement>;
|
|
144
|
+
};
|
|
145
|
+
type MenuCheckboxItemProps = MenuCheckboxItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuCheckboxItemOwnProps>;
|
|
146
|
+
/**
|
|
147
|
+
* A setting that is on or off: `role="menuitemcheckbox"` with `aria-checked`, on a native
|
|
148
|
+
* `<button>`. Activating it toggles the state and leaves the menu open, unless `closeOnClick`.
|
|
149
|
+
* Your `onClick` runs first; `event.preventComponentHandler()` there stops the toggle.
|
|
98
150
|
*
|
|
99
|
-
*
|
|
100
|
-
* `focusableWhenDisabled` it is `aria-disabled` instead, which keeps it focusable, so the
|
|
101
|
-
* activation a native `disabled` would block is blocked here: your `onClick` is not
|
|
102
|
-
* attached while it is disabled.
|
|
151
|
+
* Holds its own state through `useControlled`; an ItemIndicator inside reads it.
|
|
103
152
|
*/
|
|
104
|
-
declare function
|
|
153
|
+
declare function MenuCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, closeOnClick, disabled, textValue, onClick, className, children, render, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
|
|
105
154
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
155
|
+
type MenuRadioGroupOwnProps = {
|
|
156
|
+
/**
|
|
157
|
+
* Controlled value — the `value` of the checked RadioItem, or `null` for none. Provide
|
|
158
|
+
* `onValueChange` alongside it.
|
|
159
|
+
*
|
|
160
|
+
* Never `undefined` once mounted: the mode is latched at mount, as for RadioGroup.
|
|
161
|
+
*/
|
|
162
|
+
value?: string | null;
|
|
163
|
+
/** Initial value when uncontrolled. Read once, at mount. */
|
|
164
|
+
defaultValue?: string | null;
|
|
165
|
+
/** Called with the value of the RadioItem being checked, in both modes. */
|
|
166
|
+
onValueChange?: (value: string) => void;
|
|
167
|
+
/** Disables every RadioItem inside. */
|
|
168
|
+
disabled?: boolean;
|
|
169
|
+
/** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
|
|
170
|
+
render?: ReactElement;
|
|
171
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
172
|
+
ref?: Ref<HTMLElement>;
|
|
173
|
+
};
|
|
174
|
+
type MenuRadioGroupProps = MenuRadioGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuRadioGroupOwnProps | 'defaultValue'>;
|
|
175
|
+
/**
|
|
176
|
+
* One choice among several: a `role="group"` that owns a value, and the RadioItems inside
|
|
177
|
+
* derive `checked` from it — as RadioGroup does for radios. Named by a GroupLabel inside, as a
|
|
178
|
+
* Group is.
|
|
179
|
+
*/
|
|
180
|
+
declare function MenuRadioGroup({ value: valueProp, defaultValue, onValueChange, disabled, className, children, render, ...rest }: MenuRadioGroupProps): react.JSX.Element;
|
|
109
181
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
182
|
+
type MenuRadioItemOwnProps = {
|
|
183
|
+
/** This item's value in its RadioGroup. Checked while the group's `value` equals it. */
|
|
184
|
+
value: string;
|
|
185
|
+
/** Closes the menu when activated. Off by default, as for CheckboxItem. */
|
|
186
|
+
closeOnClick?: boolean;
|
|
187
|
+
/**
|
|
188
|
+
* Cannot be activated. Skipped by the arrow keys, unless the Root sets
|
|
189
|
+
* `focusableWhenDisabled`. The RadioGroup's `disabled` disables it too.
|
|
190
|
+
*/
|
|
191
|
+
disabled?: boolean;
|
|
192
|
+
/** The text typeahead matches. Defaults to the text in `children`. */
|
|
193
|
+
textValue?: string;
|
|
194
|
+
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
195
|
+
render?: ReactElement;
|
|
196
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
197
|
+
ref?: Ref<HTMLElement>;
|
|
198
|
+
};
|
|
199
|
+
type MenuRadioItemProps = MenuRadioItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuRadioItemOwnProps>;
|
|
200
|
+
/**
|
|
201
|
+
* One choice in a RadioGroup: `role="menuitemradio"` with `aria-checked`, on a native
|
|
202
|
+
* `<button>`. Activating it checks it and leaves the menu open, unless `closeOnClick`; the
|
|
203
|
+
* checked item stays checked when activated again. Your `onClick` runs first;
|
|
204
|
+
* `event.preventComponentHandler()` there stops the change.
|
|
205
|
+
*/
|
|
206
|
+
declare function MenuRadioItem({ value, closeOnClick, disabled: disabledProp, textValue, onClick, className, children, render, ...rest }: MenuRadioItemProps): react.JSX.Element;
|
|
207
|
+
|
|
208
|
+
type MenuItemIndicatorOwnProps = {
|
|
209
|
+
/** Element to render instead of the default `<span>`. Props and ref are merged onto it. */
|
|
210
|
+
render?: ReactElement;
|
|
211
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
212
|
+
ref?: Ref<HTMLElement>;
|
|
213
|
+
};
|
|
214
|
+
type MenuItemIndicatorProps = MenuItemIndicatorOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof MenuItemIndicatorOwnProps>;
|
|
215
|
+
/**
|
|
216
|
+
* Where the check goes, in a CheckboxItem or a RadioItem — one part for both, since it reads
|
|
217
|
+
* the same `checked` from either. Ships no glyph, as Checkbox.Indicator ships none: supply it as
|
|
218
|
+
* children, or draw it off the `data-*` attributes, which match the item's.
|
|
219
|
+
*
|
|
220
|
+
* Always rendered, in every state, so an unchecked item keeps its space and its label lines up
|
|
221
|
+
* with the checked ones. Hidden from assistive technology: the item announces `aria-checked`.
|
|
222
|
+
*/
|
|
223
|
+
declare function MenuItemIndicator({ className, children, render, ...rest }: MenuItemIndicatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
224
|
+
|
|
225
|
+
type MenuGroupOwnProps = {
|
|
226
|
+
/** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
|
|
227
|
+
render?: ReactElement;
|
|
228
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
229
|
+
ref?: Ref<HTMLElement>;
|
|
230
|
+
};
|
|
231
|
+
type MenuGroupProps = MenuGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuGroupOwnProps>;
|
|
232
|
+
/**
|
|
233
|
+
* Items under a label: `role="group"`, named by its GroupLabel — the menu → group → item
|
|
234
|
+
* structure APG allows. The arrow keys and typeahead run through every group's items as one
|
|
235
|
+
* list, past the labels.
|
|
236
|
+
*/
|
|
237
|
+
declare function MenuGroup({ className, children, render, ...rest }: MenuGroupProps): react.JSX.Element;
|
|
238
|
+
|
|
239
|
+
type MenuGroupLabelOwnProps = {
|
|
240
|
+
/** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
|
|
241
|
+
render?: ReactElement;
|
|
242
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
243
|
+
ref?: Ref<HTMLElement>;
|
|
113
244
|
};
|
|
245
|
+
type MenuGroupLabelProps = MenuGroupLabelOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuGroupLabelOwnProps>;
|
|
246
|
+
/**
|
|
247
|
+
* Names its Group or RadioGroup. Shown in the menu, but not an item: it cannot be activated,
|
|
248
|
+
* and the arrow keys and typeahead pass it.
|
|
249
|
+
*/
|
|
250
|
+
declare function MenuGroupLabel({ className, children, render, ...rest }: MenuGroupLabelProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
251
|
+
|
|
252
|
+
type MenuSubmenuRootProps = {
|
|
253
|
+
/**
|
|
254
|
+
* Controlled state. Provide `onOpenChange` alongside it.
|
|
255
|
+
*
|
|
256
|
+
* Never `undefined` once mounted: the mode is latched at mount, as for Menu.Root.
|
|
257
|
+
*/
|
|
258
|
+
open?: boolean;
|
|
259
|
+
/** Initial state when uncontrolled. Read once, at mount. */
|
|
260
|
+
defaultOpen?: boolean;
|
|
261
|
+
/**
|
|
262
|
+
* Called on every request to open or close — its SubmenuTrigger, the arrow keys, an Item,
|
|
263
|
+
* Esc, a click elsewhere, or the pointer moving to another item of the parent menu.
|
|
264
|
+
*/
|
|
265
|
+
onOpenChange?: (open: boolean) => void;
|
|
266
|
+
/** As on Menu.Root. Defaults to the parent menu's setting. */
|
|
267
|
+
focusableWhenDisabled?: boolean;
|
|
268
|
+
children?: ReactNode;
|
|
269
|
+
};
|
|
270
|
+
/**
|
|
271
|
+
* A menu inside a menu: holds the submenu's state, as Root does, and renders no element. Put a
|
|
272
|
+
* SubmenuTrigger and a Popup inside it; the Popup opens beside the trigger, on the right by
|
|
273
|
+
* default.
|
|
274
|
+
*
|
|
275
|
+
* The popup is a native `popover="auto"` shown with the trigger as its `source`, which nests it
|
|
276
|
+
* in the parent's popover: the parent stays open while it is, Esc closes one level at a time,
|
|
277
|
+
* a click in the parent closes only the submenu, and focus returns to the trigger — all the
|
|
278
|
+
* platform's. Activating an item closes every level.
|
|
279
|
+
*/
|
|
280
|
+
declare function MenuSubmenuRoot({ focusableWhenDisabled, children, ...props }: MenuSubmenuRootProps): react.JSX.Element;
|
|
281
|
+
|
|
282
|
+
type MenuSubmenuTriggerOwnProps = {
|
|
283
|
+
/**
|
|
284
|
+
* Cannot open its submenu. Skipped by the arrow keys, unless the Root sets
|
|
285
|
+
* `focusableWhenDisabled`.
|
|
286
|
+
*/
|
|
287
|
+
disabled?: boolean;
|
|
288
|
+
/** The text typeahead matches in the parent menu. Defaults to the text in `children`. */
|
|
289
|
+
textValue?: string;
|
|
290
|
+
/** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
|
|
291
|
+
render?: ReactElement;
|
|
292
|
+
/** Ref to the rendered element. Merged with any ref on the `render` element. */
|
|
293
|
+
ref?: Ref<HTMLElement>;
|
|
294
|
+
};
|
|
295
|
+
type MenuSubmenuTriggerProps = MenuSubmenuTriggerOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuSubmenuTriggerOwnProps>;
|
|
296
|
+
/**
|
|
297
|
+
* The item that opens a submenu: a `menuitem` of the parent menu with `aria-haspopup="menu"`,
|
|
298
|
+
* which the submenu is anchored to and named by. It registers with the parent, so the parent's
|
|
299
|
+
* arrow keys and typeahead reach it.
|
|
300
|
+
*
|
|
301
|
+
* Enter, Space and → (← in a right-to-left menu) open the submenu at its first item. Resting the
|
|
302
|
+
* pointer on it opens it without moving focus; moving to another item of the parent closes it,
|
|
303
|
+
* unless the pointer is crossing toward the submenu.
|
|
304
|
+
*/
|
|
305
|
+
declare function MenuSubmenuTrigger({ disabled, textValue, onClick, className, children, render, ...rest }: MenuSubmenuTriggerProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
|
|
306
|
+
|
|
307
|
+
declare namespace index_parts {
|
|
308
|
+
export { MenuCheckboxItem as CheckboxItem, MenuGroup as Group, MenuGroupLabel as GroupLabel, MenuItem as Item, MenuItemIndicator as ItemIndicator, MenuPopup as Popup, MenuRadioGroup as RadioGroup, MenuRadioItem as RadioItem, MenuRoot as Root, MenuSubmenuRoot as SubmenuRoot, MenuSubmenuTrigger as SubmenuTrigger, MenuTrigger as Trigger };
|
|
309
|
+
}
|
|
114
310
|
|
|
115
|
-
export { index_parts as Menu, type MenuAlign, type MenuItemProps, type MenuPopupProps, type MenuRootProps, type MenuSide, type MenuState, type MenuTriggerProps };
|
|
311
|
+
export { index_parts as Menu, type MenuAlign, type MenuCheckboxItemProps, type MenuGroupLabelProps, type MenuGroupProps, type MenuItemIndicatorProps, type MenuItemProps, type MenuPopupProps, type MenuRadioGroupProps, type MenuRadioItemProps, type MenuRootProps, type MenuSide, type MenuState, type MenuSubmenuRootProps, type MenuSubmenuTriggerProps, type MenuTriggerProps };
|