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
refactor(mosaic): replace Floating UI Composite with useComposite - #10573
Replaces Floating UI's Composite/CompositeItem with an in-house useComposite hook, so tabs, segmented control, accordion, action bar, tag input and the table's grid navigation share one roving-tabindex implementation. This removes the render-prop wrappers and is a step towards using Floating UI only for positioning.
Fixes: the tab stop now lands on a selected tab that isn't first, and arrow keys in a field inside an accordion panel stay with that field.
Item registration: items register through context and sort by document position, following FloatingList/useListItem. It uses a ref-backed Map rather than state, because no index is needed.
Unchanged: popup lists keep useListNavigation, OTP keeps its own handling, and the table keeps its DOM lookups for cells and widgets.
Behaviour difference: before hydration, server-rendered tabs now have no tabindex, where CompositeItem rendered them all as -1. The hook writes tabindex in a layout effect, which doesn't run on the server. After hydration there is one tab stop, as before.
Checklist
pnpm test runs as expected.
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.
No actionable comments were generated in the recent review.
Walkthrough
The changes add a shared composite-navigation hook and item registry for tab-stop management, focus handling, and keyboard navigation. Action bar, accordion, segmented control, tabs, table navigation, and tag input adopt the hook. Tests cover navigation, tab stops, focus recovery, and key handling. Documentation, reuse guidance, and a patch changeset are also updated.
clerk/javascript#10420: Adds the DirectionProvider and useDirection APIs used by composite-based navigation.
clerk/javascript#10414: Adds the headless Table primitive and grid-navigation hook that this change updates.
clerk/javascript#10421: Builds the styled Table on the headless Table primitive, which uses the updated grid-navigation hook.
Merge Risk: Minimal · previous review 89ae4
Tag navigation remains available when a consumer stops propagation. No merge-blocking risk was identified.
Pre-merge checks: 4 · 1
Failed checks: 1 warning
Check name
Status
Explanation
Resolution
Docstring Coverage
Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentat…
Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed checks: 4 passed
Check name
Status
Explanation
Description check
The description clearly explains the replacement of Floating UI composite components with the shared useComposite implementation and identifies related behavior changes.
Title check
The title clearly and concisely identifies the main change: replacing Floating UI Composite with useComposite.
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 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 14 functions across 19 files.
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
Linked repositories: Some configured repositories could not be included in this review. Cross-repository analysis may be incomplete. Please check linked-repository access and settings.
Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 0 remain after this review.
Tested on c133a178, untouched since — Before, Tab lands on Account and its automatic activation switches the selection away from Security. After, Tab lands on the selected Security tab and the selection stays.
Merge-base
This PR c133a178
Also checked · 3 match
Arrows stay in accordion panel field Roving nav in other composites SSR tabs have no tabindex
Proof on 012905ec (from c133a178) · Did Proof get it right? Yes · No
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.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Description
Replaces Floating UI's
Composite/CompositeItemwith an in-houseuseCompositehook, so tabs, segmented control, accordion, action bar, tag input and the table's grid navigation share one roving-tabindex implementation. This removes the render-prop wrappers and is a step towards using Floating UI only for positioning.FloatingList/useListItem. It uses a ref-backedMaprather than state, because no index is needed.useListNavigation, OTP keeps its own handling, and the table keeps its DOM lookups for cells and widgets.tabindex, whereCompositeItemrendered them all as-1. The hook writestabindexin a layout effect, which doesn't run on the server. After hydration there is one tab stop, as before.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change