@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.
@@ -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({ open: openProp, defaultOpen, onOpenChange, focusableWhenDisabled, children, }: MenuRootProps): react.JSX.Element;
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
- /** Which side of the trigger to open on. Flips to the opposite side when there is no room. */
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; disabled items are skipped
72
- * unless the Root sets `focusableWhenDisabled`. Tab closes the menu and lets focus move on.
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 — call
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
- * `tabIndex={-1}`: the menu moves focus between items itself, and Tab leaves the menu.
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
- * Disabled, it is a native `disabled` button, out of focus and activation. With the Root's
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 MenuItem({ disabled, onClick, className, children, render, ...rest }: MenuItemProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
153
+ declare function MenuCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, closeOnClick, disabled, textValue, onClick, className, children, render, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
105
154
 
106
- declare namespace index_parts {
107
- export { MenuItem as Item, MenuPopup as Popup, MenuRoot as Root, MenuTrigger as Trigger };
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
- /** The state Menu.Root shares with its parts, and projects as `data-*` attributes. */
111
- type MenuState = {
112
- open: boolean;
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 };
@@ -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({ open: openProp, defaultOpen, onOpenChange, focusableWhenDisabled, children, }: MenuRootProps): react.JSX.Element;
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
- /** Which side of the trigger to open on. Flips to the opposite side when there is no room. */
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; disabled items are skipped
72
- * unless the Root sets `focusableWhenDisabled`. Tab closes the menu and lets focus move on.
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 — call
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
- * `tabIndex={-1}`: the menu moves focus between items itself, and Tab leaves the menu.
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
- * Disabled, it is a native `disabled` button, out of focus and activation. With the Root's
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 MenuItem({ disabled, onClick, className, children, render, ...rest }: MenuItemProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
153
+ declare function MenuCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, closeOnClick, disabled, textValue, onClick, className, children, render, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
105
154
 
106
- declare namespace index_parts {
107
- export { MenuItem as Item, MenuPopup as Popup, MenuRoot as Root, MenuTrigger as Trigger };
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
- /** The state Menu.Root shares with its parts, and projects as `data-*` attributes. */
111
- type MenuState = {
112
- open: boolean;
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 };