Skip to content

feat(headless): add Autocomplete primitive#8481

Open
alexcarpenter wants to merge 11 commits into
carp/headless-menufrom
carp/headless-autocomplete
Open

feat(headless): add Autocomplete primitive#8481
alexcarpenter wants to merge 11 commits into
carp/headless-menufrom
carp/headless-autocomplete

Conversation

@alexcarpenter
Copy link
Copy Markdown
Member

@alexcarpenter alexcarpenter commented May 5, 2026 •
edited
Loading

Summary

  • Adds Autocomplete primitive: combobox with virtual focus (aria-activedescendant)
  • Inline List variant for embedding inside other floating elements
  • Full keyboard navigation with typeahead
  • Adds cross-primitive floating-tree integration tests (Dialog/Popover/Select/Tooltip nesting)

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 — 352 pass, 1 skipped (full suite)
  • 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.

1 Skipped Deployment
Project Deployment Actions Updated (UTC)
clerk-js-sandbox Skipped Skipped 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: c4305e9

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-autocomplete branch from cfa2488 to cf2ffeb Compare May 5, 2026 15:26
This was referenced May 5, 2026
Open
Open
Open
Open
Open
Open
Open
@alexcarpenter alexcarpenter force-pushed the carp/headless-autocomplete branch from cf2ffeb to 0249a49 Compare May 5, 2026 15:39
@alexcarpenter alexcarpenter force-pushed the carp/headless-autocomplete branch from 0249a49 to e3395b4 Compare May 5, 2026 15:49
@alexcarpenter alexcarpenter force-pushed the carp/headless-autocomplete branch from e3395b4 to 6bea8ec Compare May 5, 2026 18:38
@alexcarpenter alexcarpenter force-pushed the carp/headless-autocomplete branch from 6bea8ec to 6637d9c Compare June 3, 2026 17:09
@alexcarpenter alexcarpenter force-pushed the carp/headless-autocomplete branch from 6637d9c to 2ddefba Compare June 3, 2026 17:20
@alexcarpenter alexcarpenter force-pushed the carp/headless-autocomplete branch from 2ddefba to 5077500 Compare June 3, 2026 17:23
alexcarpenter and others added 2 commits June 3, 2026 13:32
@alexcarpenter @claude
feat(headless): add package foundation with Dialog primitive
d9993d7 
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
5076469 
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 and others added 9 commits June 3, 2026 13:32
@alexcarpenter @claude
feat(headless): add package foundation with Dialog primitive
4913ec5 
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
1546a6d 
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
790fea3 
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
d7667ad 
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
b4419c8 
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 Autocomplete primitive and floating-tree integrat…
fe35b2a 
…ion test
@alexcarpenter
refactor(headless): split Autocomplete into per-file parts for tree-s…
87c4bc9 
…haking
@alexcarpenter
docs(headless): update Autocomplete README for .Root usage
1bdd837
@alexcarpenter
fix(headless): update floating-tree test to use Dialog.Root after split
c4305e9
@alexcarpenter alexcarpenter force-pushed the carp/headless-autocomplete branch from 5077500 to c4305e9 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