feat(ui): add combobox - #9655
Conversation
🦋 Changeset detectedLatest commit: 7e5eb01 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Important Draft PR not reviewedDraft PRs are not automatically reviewed by default.
To automatically review draft PRs, update your CodeRabbit configuration: reviews:
auto_review:
drafts: trueComment |
83a843c to
e51838e
Compare
e51838e to
99e689f
Compare
99e689f to
7705087
Compare
maxyinger
left a comment
maxyinger
left a comment
There was a problem hiding this comment.
maybe make this whole thing align and give the popup some more margin so it's not touching the focus shadow?
| <div | ||
| {...mergeStyleProps( | ||
| themeProps('combobox-viewport'), | ||
| stylex.props(reset.base, ...scrollAreaViewport(), styles.viewport), |
There was a problem hiding this comment.
keep goin back n forth on if we should have a scroll bar on here at all. I like the fade regardless tho, almost want to make it a bit smaller tho. think it's customizeable through css vars, but can't remember
| <Primitive.Positioner | ||
| {...mergeStyleProps(themeProps('combobox-positioner'), stylex.props(reset.base, styles.positioner))} | ||
| > | ||
| <Primitive.Popup |
There was a problem hiding this comment.
We might need to add a Freeze on close for the popup primitive. if it doesn't make sense in the primitive we should add one here so it doesn't flash when we select and it exits
| 'use client'; | ||
|
|
||
| import type { AutocompleteProps } from '@clerk/headless/autocomplete'; | ||
| import { Autocomplete as Primitive } from '@clerk/headless/autocomplete'; |
There was a problem hiding this comment.
one thing that's interesting here is that baseui separates these out:
https://ui.shadcn.com/docs/components/aria/combobox
https://base-ui.com/react/components/autocomplete
might just be our nomenclature meaning different things, but I think they're supposed to have slightly different functionality. this is the interesting blurb there on the autocomplete:
Use Combobox instead of Autocomplete if the selection should be remembered and the input value cannot be custom. Unlike Combobox, Autocomplete’s input can contain free-form text, as its suggestions only optionally autocomplete the text
There was a problem hiding this comment.
I wonder if that's functionality we're kinda baking into the country code selector that should just be intrinsic to the combobox?
7705087 to
9c7efc4
Compare
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
9c7efc4 to
f4c0305
Compare
f4c0305 to
8176088
Compare
8176088 to
7942195
Compare
7942195 to
46bae1d
Compare
46bae1d to
d9e617c
Compare
d9e617c to
736c547
Compare
736c547 to
7e5eb01
Compare
2 participants
Description
Adds a styled Mosaic
Comboboxwith searchable options in floating and inline list layouts. Its input supports the headless variant for use insideInputGroup.https://swingset-git-austin-combobox.clerkstage.dev/components/combobox