You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
Repository navigation
feat: [menu, context-menu] add checkbox, radio, and link items - #953
Add CheckboxItem, RadioGroup, RadioItem, and LinkItem to Menu and ContextMenu. Checkbox and radio items draw a check mark or dot before the leading icon. LinkItem renders an <a href> and takes a router link through render. All four filter and keep aria-checked in the searchable (autocomplete) mode.
Rebuild Menu.EmptyState and ContextMenu.EmptyState on Base UI Autocomplete.Empty in the searchable mode (a polite live region elsewhere). Add Menu.Status and ContextMenu.Status, a hidden live region that announces the match count. Items register into a small count context, because our menus filter their own children and do not pass items to Base UI.
Add data-slots for every new part, with tests and Slots tables. Update props, demos, and docs for both components.
Why it's like this: the old Ariakit menu had a type="select" cell that drew a checkbox picture with no checked state. The Base UI migration (feat: migrate DropdownMenu to BaseUI #652) removed it and did not add CheckboxItem or RadioItem, likely because they do not plug into the Autocomplete-based searchable menu easily. LinkItem was added to Base UI two weeks before that migration. Menu.EmptyState dates from Nov 2024 and was kept as a plain div.
Breaking: small. Menu.EmptyState and ContextMenu.EmptyState now show and hide on their own. They show their children only when the menu renders no items.
Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.
Walkthrough
Menu and Context Menu add checkbox, radio-group, radio-item, and link-item components. The items support autocomplete filtering and expose new prop types and component members. The changes also update item rendering, group and empty-state behavior, and menu-cell styling. Tests cover selection, links, filtering, accessibility attributes, and data slots. Documentation adds API references and examples.
Sequence Diagram(s)
sequenceDiagram
participant User
participant MenuCheckboxItem
participant CheckboxPrimitive
participant onCheckedChange
User->>CheckboxPrimitive: Select checkbox item
CheckboxPrimitive->>MenuCheckboxItem: Report checked-state change
MenuCheckboxItem->>onCheckedChange: Notify when callback is provided
MenuCheckboxItem-->>User: Render checked state
Loading
Priority: Normal
Merge Risk: Minimal · up to 5bc3a
No actionable issue is established from the available evidence; the change is mergeable after normal checks.
Pre-merge checks: 4 · 1
Failed checks: 1 warning
Check name
Status
Explanation
Resolution
Docstring Coverage
Docstring coverage is 38.46% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Documentation-only edits and deletions within surv…
Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed checks: 4 passed
Check name
Status
Explanation
Title check
The title clearly and concisely describes the main change: adding checkbox, radio, and link items to Menu and ContextMenu.
Description check
The description is directly related to the changeset and covers the new items, filtering behavior, accessibility behavior, tests, documentation, and breaking change.
Linked Issues check
Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check
Check skipped because no linked issues were found for this pull request.
Full details: Docstring Coverage
Explanation
Docstring coverage is 38.46% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 13 functions across 21 files. (4 skipped: 4 unsupported.)
Resolution
Write docstrings for the functions missing them to satisfy the coverage threshold.
Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts
Warning
Some tools did not complete. Review the errors below.
Menu.EmptyState and ContextMenu.EmptyState go back to a plain element that the app shows and hides. Menu.Status, ContextMenu.Status, and the shared item count are removed, with their docs, demos, and tests.
A filtered-out checkbox item unmounted the Base UI item, and a group switched to a fragment while filtering, which remounted its items. Both reset uncontrolled checked and radio values. The checkbox item now holds its checked state, and groups stay rendered while filtering. The empty-list styles ignore groups that have no matches.
In a searchable menu, Menu.EmptyState and ContextMenu.EmptyState render Base UI Autocomplete.Empty, a polite live region. The app still decides what it shows. An empty state with no children has no padding, so it can stay mounted.
…dio-link-items
Resolve conflicts in the menu and context-menu index files, packages/react/index.tsx, and menu-misc.tsx. Keep both export lists, and keep the MenuEmptyStateProps signature from main with the Autocomplete.Empty body.
…chable empty state
The search list is a listbox, which only allows options and groups inside. Autocomplete.Empty sets role status, aria-live and aria-atomic, and axe reports the element as a child the listbox does not allow.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Add
CheckboxItem,RadioGroup,RadioItem, andLinkItemtoMenuandContextMenu. Checkbox and radio items draw a check mark or dot before the leading icon.LinkItemrenders an<a href>and takes a router link throughrender. All four filter and keeparia-checkedin the searchable (autocomplete) mode.Rebuild
Menu.EmptyStateandContextMenu.EmptyStateon Base UIAutocomplete.Emptyin the searchable mode (a polite live region elsewhere). AddMenu.StatusandContextMenu.Status, a hidden live region that announces the match count. Items register into a small count context, because our menus filter their own children and do not passitemsto Base UI.Add data-slots for every new part, with tests and Slots tables. Update props, demos, and docs for both components.
Why it's like this: the old Ariakit menu had a
type="select"cell that drew a checkbox picture with no checked state. The Base UI migration (feat: migrate DropdownMenu to BaseUI #652) removed it and did not add CheckboxItem or RadioItem, likely because they do not plug into the Autocomplete-based searchable menu easily. LinkItem was added to Base UI two weeks before that migration.Menu.EmptyStatedates from Nov 2024 and was kept as a plain div.Breaking: small.
Menu.EmptyStateandContextMenu.EmptyStatenow show and hide on their own. They show their children only when the menu renders no items.I have followed the pull request section of the contributing guide.