fix(mosaic): fix primitive arrow, selection and disabled bugs and share panel sizing by alexcarpenter · Pull Request #10574 · clerk/javascript

alexcarpenter · 2026-11-02T13:09:33Z

Description

Fixes small bugs in the Mosaic Autocomplete, Menu and Select primitives, and moves the panel sizing logic duplicated in Accordion and Collapsible into a shared usePanelSize hook.

Autocomplete: aria-selected now follows the selected option rather than the highlighted one, and options stay frozen during the exit animation.
Arrow parts: Autocomplete.Arrow, Menu.Arrow and Select.Arrow now forward ref instead of dropping it, and no longer list context in their props.
Menu: Home and End no longer skip items with aria-disabled={false}.
Panels: usePanelSize is a refactor. CSS variable names are unchanged, and Accordion still sets no width variable.

Autocomplete and Combobox stay separate, as do menu/select, checkbox/switch and popover/tooltip. The changeset is empty because primitives have no public export.

Browser captures of the styled Swingset Menu at 1200 × 900. In both runs, the first item is given aria-disabled="false" in the browser, then End and Home are pressed. The before capture uses the parent commit’s MenuPositioner; the after capture uses this branch. No CSS was changed.

Before: Home skips Add organization	After: Home focuses Add organization

Checklist

pnpm test runs as expected. (run from packages/mosaic)
pnpm build runs as expected.
(If applicable) JSDoc comments have been added or updated for any package exports
(If applicable) Documentation has been updated

Type of change

…re panel sizing

vercel · 2026-11-02T13:09:37Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
clerk-js-sandbox	Ready	Preview	Nov 2, 2026 1:12pm UTC
swingset	Ready	Preview	Nov 2, 2026 1:12pm UTC

changeset-bot · 2026-11-02T13:09:38Z

🦋 Changeset detected

Latest commit: 57c437c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

coderabbitai · 2026-11-02T13:09:53Z

No actionable comments were generated in the recent review.

Recent review info

Run configuration

Source mode: Auto
Repository: clerk/javascript
Branch: carp/mosaic-primitive-dedupe
File: .coderabbit.yaml
Commit: 57c437c
Layers: Repository YAML (base), Organization UI (inherited)
Review profile: ASSERTIVE
Plan: Team
Run ID: 617b5962-86e1-4aca-a931-15ea5dda6684

Commits

Reviewing files that changed from the base of the PR and between c44d34a and 57c437c.

Files selected for processing: 20

.changeset/mosaic-panel-size-hook.md
packages/mosaic/AGENTS.md
packages/mosaic/src/primitives/accordion/accordion-panel.tsx
packages/mosaic/src/primitives/accordion/accordion.test.tsx
packages/mosaic/src/primitives/autocomplete/README.md
packages/mosaic/src/primitives/autocomplete/autocomplete-arrow.tsx
packages/mosaic/src/primitives/autocomplete/autocomplete-option.tsx
packages/mosaic/src/primitives/autocomplete/autocomplete-popup.tsx
packages/mosaic/src/primitives/autocomplete/autocomplete.test.tsx
packages/mosaic/src/primitives/collapsible/collapsible-panel.tsx
packages/mosaic/src/primitives/hooks/__tests__/use-panel-size.test.tsx
packages/mosaic/src/primitives/hooks/index.ts
packages/mosaic/src/primitives/hooks/use-panel-size.ts
packages/mosaic/src/primitives/menu/README.md
packages/mosaic/src/primitives/menu/menu-arrow.tsx
packages/mosaic/src/primitives/menu/menu-positioner.tsx
packages/mosaic/src/primitives/menu/menu.test.tsx
packages/mosaic/src/primitives/select/README.md
packages/mosaic/src/primitives/select/__tests__/select.test.tsx
packages/mosaic/src/primitives/select/select-arrow.tsx

Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

clerk/clerk_go (manual)
clerk/dashboard (manual)
clerk/accounts (manual)
clerk/backoffice (manual)
clerk/clerk (manual)
clerk/clerk-docs (manual)
clerk/cloudflare-workers (manual)
clerk/clerk-android (auto-detected)
clerk/clerk-ios (auto-detected)
clerk/cli (auto-detected)

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 1 remain after this review.

Walkthrough

A shared usePanelSize hook now provides transition state and measured dimensions to accordion and collapsible panels. Autocomplete, menu, and select arrow components now forward SVG refs. Autocomplete selection state and popup child behavior are updated, and menu Home/End navigation now handles aria-disabled="false" items as enabled. Tests and arrow documentation are also updated.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Suggested reviewers: austincalvelage

Merge Risk: Minimal · up to 57c43

The panel refactor preserves the existing sizing behavior, and no issue requiring a fix before merge 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
Title check		The title clearly summarizes the main fixes and the shared panel sizing refactor. It is specific and related to the changeset.
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.
Description check		The pull request description directly explains the Autocomplete, Arrow, Menu, and panel-sizing changes documented in the changeset.

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 2 functions across 15 files. (5 skipped: 5 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

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.

pkg-pr-new · 2026-11-02T13:13:18Z

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10574

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10574

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10574

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10574

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10574

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10574

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10574

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10574

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10574

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10574

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10574

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10574

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10574

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10574

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10574

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10574

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10574

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10574

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10574

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10574

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10574

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10574

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10574

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10574

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10574

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10574

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10574

commit: 57c437c

fix(mosaic): fix primitive arrow, selection and disabled bugs and sha…

57c437c

…re panel sizing

github-actions Bot added the mosaic label Nov 2, 2026

vercel Bot deployed to Preview – clerk-js-sandbox November 2, 2026 13:10

View deployment

vercel Bot deployed to Preview – swingset November 2, 2026 13:12

View deployment

austincalvelage approved these changes Nov 2, 2026

View reviewed changes

alexcarpenter merged commit 8af8e3e into main Nov 2, 2026
58 checks passed

alexcarpenter deleted the carp/mosaic-primitive-dedupe branch November 2, 2026 17:43

coderabbitai Bot mentioned this pull request Nov 3, 2026

perf(mosaic): re-render only the list options whose highlight changes #10621

Open

3 of 9 tasks

Navigation Menu

Repository navigation

fix(mosaic): fix primitive arrow, selection and disabled bugs and share panel sizing - #10574

fix(mosaic): fix primitive arrow, selection and disabled bugs and share panel sizing#10574
alexcarpenter merged 1 commit into
mainfrom
carp/mosaic-primitive-dedupe

alexcarpenter commented Nov 2, 2026 •

edited by austincalvelage

Loading

Uh oh!

vercel Bot commented Nov 2, 2026 •

edited

Loading

Uh oh!

changeset-bot Bot commented Nov 2, 2026

Uh oh!

coderabbitai Bot commented Nov 2, 2026 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Nov 2, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

alexcarpenter commented Nov 2, 2026 • edited by austincalvelage Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Type of change

Uh oh!

vercel Bot commented Nov 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot Bot commented Nov 2, 2026

🦋 Changeset detected

Uh oh!

coderabbitai Bot commented Nov 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new Bot commented Nov 2, 2026

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alexcarpenter commented Nov 2, 2026 •

edited by austincalvelage

Loading

vercel Bot commented Nov 2, 2026 •

edited

Loading

coderabbitai Bot commented Nov 2, 2026 •

edited

Loading