@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.
- package/dist/avatar/index.cjs +218 -0
- package/dist/avatar/index.d.cts +52 -0
- package/dist/avatar/index.d.ts +52 -0
- package/dist/avatar/index.js +105 -0
- package/dist/chunk-36N5DD5K.js +78 -0
- package/dist/chunk-E4JBFRMM.js +11 -0
- package/dist/chunk-ETNICT5M.js +8 -0
- package/dist/combobox/index.cjs +3 -1
- package/dist/combobox/index.js +6 -6
- package/dist/menu/index.cjs +311 -19
- package/dist/menu/index.d.cts +144 -10
- package/dist/menu/index.d.ts +144 -10
- package/dist/menu/index.js +310 -22
- package/dist/rovingFocus-BZB3yicE.d.cts +11 -0
- package/dist/rovingFocus-BZB3yicE.d.ts +11 -0
- package/dist/tabs/index.d.cts +1 -10
- package/dist/tabs/index.d.ts +1 -10
- package/dist/toggle/index.cjs +232 -0
- package/dist/toggle/index.d.cts +26 -0
- package/dist/toggle/index.d.ts +26 -0
- package/dist/toggle/index.js +68 -0
- package/dist/toggle-group/index.cjs +292 -0
- package/dist/toggle-group/index.d.cts +31 -0
- package/dist/toggle-group/index.d.ts +31 -0
- package/dist/toggle-group/index.js +68 -0
- package/dist/toolbar/index.cjs +357 -0
- package/dist/toolbar/index.d.cts +89 -0
- package/dist/toolbar/index.d.ts +89 -0
- package/dist/toolbar/index.js +152 -0
- package/package.json +41 -1
package/dist/menu/index.cjs
CHANGED
|
@@ -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,
|
|
340
|
-
const focusPendingRef = (0,
|
|
341
|
-
const [, resync] = (0,
|
|
342
|
-
|
|
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
|
|
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,
|
|
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
|
-
|
|
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
|
package/dist/menu/index.d.cts
CHANGED
|
@@ -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;
|
|
72
|
-
*
|
|
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
|
-
*
|
|
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
|
-
*
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
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
|
|
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 };
|