@arun-dev/headless 4.13.0 → 4.15.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.
@@ -27,8 +27,14 @@ module.exports = __toCommonJS(menu_exports);
27
27
  // src/menu/index.parts.ts
28
28
  var index_parts_exports = {};
29
29
  __export(index_parts_exports, {
30
+ CheckboxItem: () => MenuCheckboxItem,
31
+ Group: () => MenuGroup,
32
+ GroupLabel: () => MenuGroupLabel,
30
33
  Item: () => MenuItem,
34
+ ItemIndicator: () => MenuItemIndicator,
31
35
  Popup: () => MenuPopup,
36
+ RadioGroup: () => MenuRadioGroup,
37
+ RadioItem: () => MenuRadioItem,
32
38
  Root: () => MenuRoot,
33
39
  Trigger: () => MenuTrigger
34
40
  });
@@ -280,9 +286,6 @@ function menuDataAttributes({ open }) {
280
286
  "data-closed": open ? void 0 : ""
281
287
  };
282
288
  }
283
- function menuItemDataAttributes(disabled) {
284
- return { "data-disabled": disabled ? "" : void 0 };
285
- }
286
289
 
287
290
  // src/menu/MenuTrigger.tsx
288
291
  function MenuTrigger({ className, children, render, ...rest }) {
@@ -317,7 +320,58 @@ function MenuTrigger({ className, children, render, ...rest }) {
317
320
  }
318
321
 
319
322
  // src/menu/MenuPopup.tsx
323
+ var import_react6 = require("react");
324
+
325
+ // src/core/typeahead.ts
320
326
  var import_react5 = require("react");
327
+
328
+ // src/core/fold.ts
329
+ function fold(text) {
330
+ return text.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase();
331
+ }
332
+
333
+ // src/core/typeahead.ts
334
+ var TYPEAHEAD_TIMEOUT = 500;
335
+ function textOf(node) {
336
+ let text = "";
337
+ import_react5.Children.forEach(node, (child) => {
338
+ if (typeof child === "string" || typeof child === "number") text += child;
339
+ else if ((0, import_react5.isValidElement)(child)) text += textOf(child.props.children);
340
+ });
341
+ return text;
342
+ }
343
+ function typeaheadIndex(labels, current, search) {
344
+ const count = labels.length;
345
+ if (count === 0 || search === "") return null;
346
+ const [first = "", ...others] = [...search];
347
+ const repeated = others.every((char) => char === first);
348
+ const needle = fold(repeated ? first : search);
349
+ const start = current < 0 ? 0 : repeated ? current + 1 : current;
350
+ for (let step = 0; step < count; step += 1) {
351
+ const index = (start + step) % count;
352
+ if (fold(labels[index] ?? "").startsWith(needle)) return index;
353
+ }
354
+ return null;
355
+ }
356
+ function useTypeahead() {
357
+ const searchRef = (0, import_react5.useRef)("");
358
+ const timerRef = (0, import_react5.useRef)(void 0);
359
+ (0, import_react5.useEffect)(() => () => clearTimeout(timerRef.current), []);
360
+ return (0, import_react5.useCallback)((event) => {
361
+ const { key } = event;
362
+ if (event.ctrlKey || event.metaKey || event.altKey) return null;
363
+ if ([...key].length !== 1) return null;
364
+ if (key === " " && searchRef.current === "") return null;
365
+ searchRef.current += key;
366
+ clearTimeout(timerRef.current);
367
+ timerRef.current = setTimeout(() => {
368
+ searchRef.current = "";
369
+ }, TYPEAHEAD_TIMEOUT);
370
+ return searchRef.current;
371
+ }, []);
372
+ }
373
+
374
+ // src/menu/MenuPopup.tsx
321
375
  function MenuPopup({
322
376
  side = "bottom",
323
377
  align = "start",
@@ -336,10 +390,11 @@ function MenuPopup({
336
390
  anchorName,
337
391
  triggerRef
338
392
  } = useMenuRootContext("Popup");
339
- const elementRef = (0, import_react5.useRef)(null);
340
- const focusPendingRef = (0, import_react5.useRef)(false);
341
- const [, resync] = (0, import_react5.useReducer)((n) => n + 1, 0);
342
- (0, import_react5.useEffect)(() => {
393
+ const elementRef = (0, import_react6.useRef)(null);
394
+ const focusPendingRef = (0, import_react6.useRef)(false);
395
+ const [, resync] = (0, import_react6.useReducer)((n) => n + 1, 0);
396
+ const typeahead = useTypeahead();
397
+ (0, import_react6.useEffect)(() => {
343
398
  const popup = elementRef.current;
344
399
  if (!popup || typeof popup.showPopover !== "function") return;
345
400
  const shown = popup.matches(":popover-open");
@@ -378,12 +433,18 @@ function MenuPopup({
378
433
  }
379
434
  const current = navigableItems.findIndex((i) => i.ref.current === event.target);
380
435
  if (current < 0 && event.target !== event.currentTarget) return;
381
- const next = rovingIndex(event.key, {
436
+ const search = typeahead(event);
437
+ const next = search === null ? rovingIndex(event.key, {
382
438
  count: navigableItems.length,
383
439
  current,
384
440
  orientation: "vertical",
385
441
  rtl: false
386
- });
442
+ }) : typeaheadIndex(
443
+ navigableItems.map((i) => i.textValue),
444
+ current,
445
+ search
446
+ );
447
+ if (search !== null) event.preventDefault();
387
448
  if (next === null) return;
388
449
  event.preventDefault();
389
450
  navigableItems[next]?.ref.current?.focus();
@@ -399,32 +460,62 @@ function MenuPopup({
399
460
  });
400
461
  }
401
462
 
463
+ // src/menu/useMenuItem.ts
464
+ var import_react7 = require("react");
465
+ function useMenuItem(part, { disabled, textValue, children }) {
466
+ const { setOpen, focusableWhenDisabled, register } = useMenuRootContext(part);
467
+ const ref = (0, import_react7.useRef)(null);
468
+ const text = textValue ?? textOf(children);
469
+ (0, import_react7.useLayoutEffect)(() => register({ disabled, textValue: text, ref }), [register, disabled, text]);
470
+ return {
471
+ setOpen,
472
+ itemProps: {
473
+ type: "button",
474
+ tabIndex: -1,
475
+ disabled: disabled && !focusableWhenDisabled || void 0,
476
+ "aria-disabled": disabled && focusableWhenDisabled || void 0,
477
+ "data-disabled": disabled ? "" : void 0,
478
+ ref
479
+ }
480
+ };
481
+ }
482
+ var MenuItemIndicatorContext = (0, import_react7.createContext)(null);
483
+ function useMenuItemIndicatorContext() {
484
+ const context = (0, import_react7.useContext)(MenuItemIndicatorContext);
485
+ if (context === null) {
486
+ throw new Error(
487
+ "<Menu.ItemIndicator> must be rendered inside <Menu.CheckboxItem> or <Menu.RadioItem>."
488
+ );
489
+ }
490
+ return context;
491
+ }
492
+ function menuCheckableDataAttributes({ checked, disabled }) {
493
+ return {
494
+ "data-checked": checked ? "" : void 0,
495
+ "data-unchecked": checked ? void 0 : "",
496
+ "data-disabled": disabled ? "" : void 0
497
+ };
498
+ }
499
+
402
500
  // src/menu/MenuItem.tsx
403
- var import_react6 = require("react");
404
501
  function MenuItem({
405
502
  disabled = false,
503
+ textValue,
406
504
  onClick,
407
505
  className,
408
506
  children,
409
507
  render,
410
508
  ...rest
411
509
  }) {
412
- const { setOpen, focusableWhenDisabled, register } = useMenuRootContext("Item");
413
- const elementRef = (0, import_react6.useRef)(null);
414
- (0, import_react6.useLayoutEffect)(() => register({ disabled, ref: elementRef }), [register, disabled]);
510
+ const { setOpen, itemProps } = useMenuItem("Item", { disabled, textValue, children });
415
511
  return useRender({
416
512
  render,
417
513
  defaultTagName: "button",
418
514
  props: {
419
- type: "button",
515
+ ...itemProps,
420
516
  role: "menuitem",
421
- tabIndex: -1,
422
- disabled: disabled && !focusableWhenDisabled || void 0,
423
- "aria-disabled": disabled && focusableWhenDisabled || void 0,
424
- ...menuItemDataAttributes(disabled),
425
517
  className,
426
518
  children,
427
- ref: elementRef,
428
519
  onClick() {
429
520
  if (!disabled) setOpen(false);
430
521
  }
@@ -432,6 +523,207 @@ function MenuItem({
432
523
  consumerProps: disabled ? rest : { ...rest, onClick }
433
524
  });
434
525
  }
526
+
527
+ // src/menu/MenuCheckboxItem.tsx
528
+ var import_react8 = require("react");
529
+ var import_jsx_runtime2 = require("react/jsx-runtime");
530
+ function MenuCheckboxItem({
531
+ checked: checkedProp,
532
+ defaultChecked,
533
+ onCheckedChange,
534
+ closeOnClick = false,
535
+ disabled = false,
536
+ textValue,
537
+ onClick,
538
+ className,
539
+ children,
540
+ render,
541
+ ...rest
542
+ }) {
543
+ const { setOpen, itemProps } = useMenuItem("CheckboxItem", { disabled, textValue, children });
544
+ const [checked, setChecked] = useControlled({
545
+ controlled: checkedProp,
546
+ default: defaultChecked ?? false,
547
+ name: "Menu.CheckboxItem",
548
+ state: "checked"
549
+ });
550
+ const state = (0, import_react8.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
551
+ const element = useRender({
552
+ render,
553
+ defaultTagName: "button",
554
+ props: {
555
+ ...itemProps,
556
+ role: "menuitemcheckbox",
557
+ "aria-checked": checked,
558
+ ...menuCheckableDataAttributes(state),
559
+ className,
560
+ children,
561
+ onClick() {
562
+ if (disabled) return;
563
+ setChecked(!checked);
564
+ onCheckedChange?.(!checked);
565
+ if (closeOnClick) setOpen(false);
566
+ }
567
+ },
568
+ consumerProps: disabled ? rest : { ...rest, onClick }
569
+ });
570
+ return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuItemIndicatorContext.Provider, { value: state, children: element });
571
+ }
572
+
573
+ // src/menu/MenuRadioGroup.tsx
574
+ var import_react10 = require("react");
575
+
576
+ // src/menu/MenuGroup.tsx
577
+ var import_react9 = require("react");
578
+ var import_jsx_runtime3 = require("react/jsx-runtime");
579
+ var MenuGroupContext = (0, import_react9.createContext)(null);
580
+ function useMenuGroupContext() {
581
+ return (0, import_react9.useContext)(MenuGroupContext);
582
+ }
583
+ function useMenuGroupElement(part, {
584
+ render,
585
+ props,
586
+ consumerProps
587
+ }) {
588
+ useMenuRootContext(part);
589
+ const labelId = `${(0, import_react9.useId)()}-label`;
590
+ const [hasLabel, setHasLabel] = (0, import_react9.useState)(false);
591
+ const registerLabel = (0, import_react9.useCallback)(() => {
592
+ setHasLabel(true);
593
+ return () => setHasLabel(false);
594
+ }, []);
595
+ const context = (0, import_react9.useMemo)(() => ({ labelId, registerLabel }), [labelId, registerLabel]);
596
+ const element = useRender({
597
+ render,
598
+ defaultTagName: "div",
599
+ props: { role: "group", "aria-labelledby": hasLabel ? labelId : void 0, ...props },
600
+ consumerProps
601
+ });
602
+ return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuGroupContext.Provider, { value: context, children: element });
603
+ }
604
+ function MenuGroup({ className, children, render, ...rest }) {
605
+ return useMenuGroupElement("Group", {
606
+ render,
607
+ props: { className, children },
608
+ consumerProps: rest
609
+ });
610
+ }
611
+
612
+ // src/menu/MenuRadioGroup.tsx
613
+ var import_jsx_runtime4 = require("react/jsx-runtime");
614
+ var MenuRadioGroupContext = (0, import_react10.createContext)(null);
615
+ function useMenuRadioGroupContext() {
616
+ const context = (0, import_react10.useContext)(MenuRadioGroupContext);
617
+ if (context === null) {
618
+ throw new Error("<Menu.RadioItem> must be rendered inside <Menu.RadioGroup>.");
619
+ }
620
+ return context;
621
+ }
622
+ function MenuRadioGroup({
623
+ value: valueProp,
624
+ defaultValue,
625
+ onValueChange,
626
+ disabled = false,
627
+ className,
628
+ children,
629
+ render,
630
+ ...rest
631
+ }) {
632
+ const [value, setValue] = useControlled({
633
+ controlled: valueProp,
634
+ default: defaultValue ?? null,
635
+ name: "Menu.RadioGroup",
636
+ state: "value"
637
+ });
638
+ const select = (0, import_react10.useCallback)(
639
+ (next) => {
640
+ if (next === value) return;
641
+ setValue(next);
642
+ onValueChange?.(next);
643
+ },
644
+ [value, setValue, onValueChange]
645
+ );
646
+ const context = (0, import_react10.useMemo)(() => ({ value, disabled, select }), [value, disabled, select]);
647
+ const element = useMenuGroupElement("RadioGroup", {
648
+ render,
649
+ props: { "data-disabled": disabled ? "" : void 0, className, children },
650
+ consumerProps: rest
651
+ });
652
+ return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuRadioGroupContext.Provider, { value: context, children: element });
653
+ }
654
+
655
+ // src/menu/MenuRadioItem.tsx
656
+ var import_react11 = require("react");
657
+ var import_jsx_runtime5 = require("react/jsx-runtime");
658
+ function MenuRadioItem({
659
+ value,
660
+ closeOnClick = false,
661
+ disabled: disabledProp = false,
662
+ textValue,
663
+ onClick,
664
+ className,
665
+ children,
666
+ render,
667
+ ...rest
668
+ }) {
669
+ const group = useMenuRadioGroupContext();
670
+ const disabled = disabledProp || group.disabled;
671
+ const { setOpen, itemProps } = useMenuItem("RadioItem", { disabled, textValue, children });
672
+ const checked = group.value === value;
673
+ const state = (0, import_react11.useMemo)(() => ({ checked, disabled }), [checked, disabled]);
674
+ const element = useRender({
675
+ render,
676
+ defaultTagName: "button",
677
+ props: {
678
+ ...itemProps,
679
+ role: "menuitemradio",
680
+ "aria-checked": checked,
681
+ ...menuCheckableDataAttributes(state),
682
+ className,
683
+ children,
684
+ onClick() {
685
+ if (disabled) return;
686
+ group.select(value);
687
+ if (closeOnClick) setOpen(false);
688
+ }
689
+ },
690
+ consumerProps: disabled ? rest : { ...rest, onClick }
691
+ });
692
+ return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuItemIndicatorContext.Provider, { value: state, children: element });
693
+ }
694
+
695
+ // src/menu/MenuItemIndicator.tsx
696
+ function MenuItemIndicator({
697
+ className,
698
+ children,
699
+ render,
700
+ ...rest
701
+ }) {
702
+ const state = useMenuItemIndicatorContext();
703
+ return useRender({
704
+ render,
705
+ defaultTagName: "span",
706
+ props: { "aria-hidden": true, ...menuCheckableDataAttributes(state), className, children },
707
+ consumerProps: rest
708
+ });
709
+ }
710
+
711
+ // src/menu/MenuGroupLabel.tsx
712
+ var import_react12 = require("react");
713
+ function MenuGroupLabel({ className, children, render, ...rest }) {
714
+ const group = useMenuGroupContext();
715
+ if (group === null) {
716
+ throw new Error("<Menu.GroupLabel> must be rendered inside <Menu.Group> or <Menu.RadioGroup>.");
717
+ }
718
+ const { labelId, registerLabel } = group;
719
+ (0, import_react12.useLayoutEffect)(registerLabel, [registerLabel]);
720
+ return useRender({
721
+ render,
722
+ defaultTagName: "div",
723
+ props: { id: labelId, className, children },
724
+ consumerProps: rest
725
+ });
726
+ }
435
727
  // Annotate the CommonJS export names for ESM import in node:
436
728
  0 && (module.exports = {
437
729
  Menu
@@ -68,8 +68,9 @@ type MenuPopupProps = MenuPopupOwnProps & Omit<ComponentPropsWithRef<'div'>, key
68
68
  * Popover's popup is (decision 12), and labelled by it.
69
69
  *
70
70
  * 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.
71
+ * and Down then move between items, wrapping, with Home and End; typing moves to the next item
72
+ * whose text starts with what was typed. Disabled items are skipped by both, unless the Root
73
+ * sets `focusableWhenDisabled`. Tab closes the menu and lets focus move on.
73
74
  *
74
75
  * Light dismiss and Esc close the element before anyone is asked; the `toggle` event
75
76
  * reports it through the Root, and the element reopens if the state stays open. Focus
@@ -83,6 +84,11 @@ type MenuItemOwnProps = {
83
84
  * `focusableWhenDisabled`.
84
85
  */
85
86
  disabled?: boolean;
87
+ /**
88
+ * The text typeahead matches. Defaults to the text in `children`; set it when that text is
89
+ * rendered by a component of your own, or differs from what should be typed.
90
+ */
91
+ textValue?: string;
86
92
  /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
87
93
  render?: ReactElement;
88
94
  /** Ref to the rendered element. Merged with any ref on the `render` element. */
@@ -94,17 +100,145 @@ type MenuItemProps = MenuItemOwnProps & Omit<ComponentPropsWithRef<'button'>, ke
94
100
  * handling here: put the action in `onClick`. Activating it closes the menu — call
95
101
  * `event.preventComponentHandler()` in your `onClick` to keep it open.
96
102
  *
97
- * `tabIndex={-1}`: the menu moves focus between items itself, and Tab leaves the menu.
103
+ * Disabled, your `onClick` is not attached, so an `aria-disabled` item under the Root's
104
+ * `focusableWhenDisabled` cannot run it either.
105
+ */
106
+ declare function MenuItem({ disabled, textValue, onClick, className, children, render, ...rest }: MenuItemProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
107
+
108
+ type MenuCheckboxItemOwnProps = {
109
+ /**
110
+ * Controlled state. Provide `onCheckedChange` alongside it.
111
+ *
112
+ * Never `undefined` once mounted: the mode is latched at mount, as for Checkbox.
113
+ */
114
+ checked?: boolean;
115
+ /** Initial state when uncontrolled. Read once, at mount. */
116
+ defaultChecked?: boolean;
117
+ /** Called with the new state, in both controlled and uncontrolled modes. */
118
+ onCheckedChange?: (checked: boolean) => void;
119
+ /** Closes the menu when activated. Off by default: a setting is often changed with others. */
120
+ closeOnClick?: boolean;
121
+ /**
122
+ * Cannot be activated. Skipped by the arrow keys, unless the Root sets
123
+ * `focusableWhenDisabled`.
124
+ */
125
+ disabled?: boolean;
126
+ /** The text typeahead matches. Defaults to the text in `children`. */
127
+ textValue?: string;
128
+ /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
129
+ render?: ReactElement;
130
+ /** Ref to the rendered element. Merged with any ref on the `render` element. */
131
+ ref?: Ref<HTMLElement>;
132
+ };
133
+ type MenuCheckboxItemProps = MenuCheckboxItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuCheckboxItemOwnProps>;
134
+ /**
135
+ * A setting that is on or off: `role="menuitemcheckbox"` with `aria-checked`, on a native
136
+ * `<button>`. Activating it toggles the state and leaves the menu open, unless `closeOnClick`.
137
+ * Your `onClick` runs first; `event.preventComponentHandler()` there stops the toggle.
98
138
  *
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.
139
+ * Holds its own state through `useControlled`; an ItemIndicator inside reads it.
140
+ */
141
+ declare function MenuCheckboxItem({ checked: checkedProp, defaultChecked, onCheckedChange, closeOnClick, disabled, textValue, onClick, className, children, render, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
142
+
143
+ type MenuRadioGroupOwnProps = {
144
+ /**
145
+ * Controlled value — the `value` of the checked RadioItem, or `null` for none. Provide
146
+ * `onValueChange` alongside it.
147
+ *
148
+ * Never `undefined` once mounted: the mode is latched at mount, as for RadioGroup.
149
+ */
150
+ value?: string | null;
151
+ /** Initial value when uncontrolled. Read once, at mount. */
152
+ defaultValue?: string | null;
153
+ /** Called with the value of the RadioItem being checked, in both modes. */
154
+ onValueChange?: (value: string) => void;
155
+ /** Disables every RadioItem inside. */
156
+ disabled?: boolean;
157
+ /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
158
+ render?: ReactElement;
159
+ /** Ref to the rendered element. Merged with any ref on the `render` element. */
160
+ ref?: Ref<HTMLElement>;
161
+ };
162
+ type MenuRadioGroupProps = MenuRadioGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuRadioGroupOwnProps | 'defaultValue'>;
163
+ /**
164
+ * One choice among several: a `role="group"` that owns a value, and the RadioItems inside
165
+ * derive `checked` from it — as RadioGroup does for radios. Named by a GroupLabel inside, as a
166
+ * Group is.
167
+ */
168
+ declare function MenuRadioGroup({ value: valueProp, defaultValue, onValueChange, disabled, className, children, render, ...rest }: MenuRadioGroupProps): react.JSX.Element;
169
+
170
+ type MenuRadioItemOwnProps = {
171
+ /** This item's value in its RadioGroup. Checked while the group's `value` equals it. */
172
+ value: string;
173
+ /** Closes the menu when activated. Off by default, as for CheckboxItem. */
174
+ closeOnClick?: boolean;
175
+ /**
176
+ * Cannot be activated. Skipped by the arrow keys, unless the Root sets
177
+ * `focusableWhenDisabled`. The RadioGroup's `disabled` disables it too.
178
+ */
179
+ disabled?: boolean;
180
+ /** The text typeahead matches. Defaults to the text in `children`. */
181
+ textValue?: string;
182
+ /** Element to render instead of the default `<button>`. Props and ref are merged onto it. */
183
+ render?: ReactElement;
184
+ /** Ref to the rendered element. Merged with any ref on the `render` element. */
185
+ ref?: Ref<HTMLElement>;
186
+ };
187
+ type MenuRadioItemProps = MenuRadioItemOwnProps & Omit<ComponentPropsWithRef<'button'>, keyof MenuRadioItemOwnProps>;
188
+ /**
189
+ * One choice in a RadioGroup: `role="menuitemradio"` with `aria-checked`, on a native
190
+ * `<button>`. Activating it checks it and leaves the menu open, unless `closeOnClick`; the
191
+ * checked item stays checked when activated again. Your `onClick` runs first;
192
+ * `event.preventComponentHandler()` there stops the change.
193
+ */
194
+ declare function MenuRadioItem({ value, closeOnClick, disabled: disabledProp, textValue, onClick, className, children, render, ...rest }: MenuRadioItemProps): react.JSX.Element;
195
+
196
+ type MenuItemIndicatorOwnProps = {
197
+ /** Element to render instead of the default `<span>`. Props and ref are merged onto it. */
198
+ render?: ReactElement;
199
+ /** Ref to the rendered element. Merged with any ref on the `render` element. */
200
+ ref?: Ref<HTMLElement>;
201
+ };
202
+ type MenuItemIndicatorProps = MenuItemIndicatorOwnProps & Omit<ComponentPropsWithRef<'span'>, keyof MenuItemIndicatorOwnProps>;
203
+ /**
204
+ * Where the check goes, in a CheckboxItem or a RadioItem — one part for both, since it reads
205
+ * the same `checked` from either. Ships no glyph, as Checkbox.Indicator ships none: supply it as
206
+ * children, or draw it off the `data-*` attributes, which match the item's.
207
+ *
208
+ * Always rendered, in every state, so an unchecked item keeps its space and its label lines up
209
+ * with the checked ones. Hidden from assistive technology: the item announces `aria-checked`.
210
+ */
211
+ declare function MenuItemIndicator({ className, children, render, ...rest }: MenuItemIndicatorProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
212
+
213
+ type MenuGroupOwnProps = {
214
+ /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
215
+ render?: ReactElement;
216
+ /** Ref to the rendered element. Merged with any ref on the `render` element. */
217
+ ref?: Ref<HTMLElement>;
218
+ };
219
+ type MenuGroupProps = MenuGroupOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuGroupOwnProps>;
220
+ /**
221
+ * Items under a label: `role="group"`, named by its GroupLabel — the menu → group → item
222
+ * structure APG allows. The arrow keys and typeahead run through every group's items as one
223
+ * list, past the labels.
224
+ */
225
+ declare function MenuGroup({ className, children, render, ...rest }: MenuGroupProps): react.JSX.Element;
226
+
227
+ type MenuGroupLabelOwnProps = {
228
+ /** Element to render instead of the default `<div>`. Props and ref are merged onto it. */
229
+ render?: ReactElement;
230
+ /** Ref to the rendered element. Merged with any ref on the `render` element. */
231
+ ref?: Ref<HTMLElement>;
232
+ };
233
+ type MenuGroupLabelProps = MenuGroupLabelOwnProps & Omit<ComponentPropsWithRef<'div'>, keyof MenuGroupLabelOwnProps>;
234
+ /**
235
+ * Names its Group or RadioGroup. Shown in the menu, but not an item: it cannot be activated,
236
+ * and the arrow keys and typeahead pass it.
103
237
  */
104
- declare function MenuItem({ disabled, onClick, className, children, render, ...rest }: MenuItemProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
238
+ declare function MenuGroupLabel({ className, children, render, ...rest }: MenuGroupLabelProps): ReactElement<unknown, string | react.JSXElementConstructor<any>>;
105
239
 
106
240
  declare namespace index_parts {
107
- export { MenuItem as Item, MenuPopup as Popup, MenuRoot as Root, MenuTrigger as Trigger };
241
+ 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, MenuTrigger as Trigger };
108
242
  }
109
243
 
110
244
  /** The state Menu.Root shares with its parts, and projects as `data-*` attributes. */
@@ -112,4 +246,4 @@ type MenuState = {
112
246
  open: boolean;
113
247
  };
114
248
 
115
- export { index_parts as Menu, type MenuAlign, type MenuItemProps, type MenuPopupProps, type MenuRootProps, type MenuSide, type MenuState, type MenuTriggerProps };
249
+ 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 MenuTriggerProps };