Skip to content

feat(headless): add Menu primitive#8480

Open
alexcarpenter wants to merge 9 commits into
carp/headless-selectfrom
carp/headless-menu
Open

feat(headless): add Menu primitive#8480
alexcarpenter wants to merge 9 commits into
carp/headless-selectfrom
carp/headless-menu

Conversation

@alexcarpenter
Copy link
Copy Markdown
Member

@alexcarpenter alexcarpenter commented May 5, 2026 •
edited
Loading

Summary

  • Adds Menu primitive with nested submenus via FloatingTree
  • safePolygon hover zones for submenu navigation
  • Combined hover/click triggers, keyboard navigation, Separator support

Review Stack

Review order — start at #8474 (foundation) and work up. Each PR adds one primitive on top of the previous.

# PR What it adds Base
1 #8474 Foundation (infra + hooks + utils + Dialog) main
2 #8475 Accordion ← #8474
3 #8476 Tabs ← #8475
4 #8477 cssVars + Tooltip ← #8476
5 #8478 Popover ← #8477
6 #8479 Select ← #8478
7 #8480 Menu ← #8479
8 #8481 Autocomplete + integration tests ← #8480

Test plan

  • pnpm build succeeds
  • pnpm test passes (+31 menu tests)
  • CI passes

🤖 Generated with Claude Code

@vercel
Copy link
Copy Markdown

vercel Bot commented May 5, 2026 •
edited
Loading

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

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Error Error Jun 3, 2026 5:33pm

Request Review

@changeset-bot
Copy link
Copy Markdown

changeset-bot Bot commented May 5, 2026 •
edited
Loading

⚠️ No Changeset found

Latest commit: d3a2fe3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

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

Click here to learn what changesets are, and how to add one.

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

@alexcarpenter alexcarpenter force-pushed the carp/headless-select branch from 12a74cf to bf64381 Compare May 5, 2026 15:26
@alexcarpenter alexcarpenter mentioned this pull request May 5, 2026
Open
3 tasks
This was referenced May 5, 2026
Open
Open
Open
Open
Open
Open
@alexcarpenter alexcarpenter force-pushed the carp/headless-select branch from bf64381 to d7de1ca Compare May 5, 2026 15:39
@alexcarpenter alexcarpenter force-pushed the carp/headless-select branch from d7de1ca to 758050d Compare May 5, 2026 15:49
@alexcarpenter alexcarpenter force-pushed the carp/headless-select branch from 758050d to b3280a8 Compare May 5, 2026 18:38
@alexcarpenter alexcarpenter force-pushed the carp/headless-select branch from b3280a8 to 80923ba Compare June 3, 2026 17:09
@alexcarpenter alexcarpenter force-pushed the carp/headless-select branch from 80923ba to 6a4046e Compare June 3, 2026 17:20
@alexcarpenter alexcarpenter force-pushed the carp/headless-select branch from 6a4046e to a73a615 Compare June 3, 2026 17:23
alexcarpenter and others added 9 commits June 3, 2026 13:32
@alexcarpenter @claude
feat(headless): add package foundation with Dialog primitive
4a038f0 
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter @claude
feat(headless): add package foundation with Dialog primitive
c3d3a9f 
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter @claude
feat(headless): add package foundation with Dialog primitive
946e913 
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter @claude
feat(headless): add package foundation with Dialog primitive
f0f2d95 
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter @claude
feat(headless): add package foundation with Dialog primitive
70bd816 
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter @claude
feat(headless): add package foundation with Dialog primitive
b20461a 
Introduces the @clerk/headless package — a zero-style React component
library providing accessible headless UI primitives. This first PR
establishes the core infrastructure and patterns:

- Package scaffold: Vite build, Vitest browser tests (Chromium), TypeScript config
- Core utils: renderElement (polymorphic rendering with render prop support),
  mergeProps (event handler chaining, style/className merging)
- Hooks: useControllableState, useTransitionStatus, useAnimationsFinished, useTransition
- First primitive: Dialog (modal with focus trapping, scroll lock, portal support)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@alexcarpenter
feat(headless): add Menu primitive
c2f8ce2
@alexcarpenter
refactor(headless): split Menu into per-file parts for tree-shaking
9082f69
@alexcarpenter
docs(headless): update Menu README for .Root usage
d3a2fe3
@alexcarpenter alexcarpenter force-pushed the carp/headless-select branch from a73a615 to f55dc7c Compare June 3, 2026 17:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@alexcarpenter