feat(ui): add combobox #9655
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| --- | ||
| --- | ||
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import * as ComboboxStories from './combobox.stories'; | ||
|
|
||
| # Combobox | ||
|
|
||
| ## Example | ||
|
Contributor
There was a problem hiding this comment. 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win Use the required documentation sections. Replace As per coding guidelines: “Playground / Props / Usage are mandatory and always in this order” and “Document the default value for every prop in a dedicated Default column.” 🤖 Prompt for AI AgentsSource: Coding guidelines |
||
|
|
||
| <Story | ||
| name='Default' | ||
| storyModule={ComboboxStories} | ||
| /> | ||
|
|
||
| `value` is the selected option; `inputValue` is the search text. Clearing the input clears the selection. | ||
|
|
||
| ## Inline lists | ||
|
|
||
| Use `List` inside an existing popover. Set `inline` and bind the root's open state to that popover | ||
| so closing resets the search, not the selection. | ||
|
|
||
| ```tsx | ||
| <Combobox.Root inline open={open} onOpenChange={setOpen} value={country} onValueChange={setCountry}> | ||
| <InputGroup.Root> | ||
| <InputGroup.Start> | ||
| <Icon name='search' aria-hidden='true' /> | ||
| </InputGroup.Start> | ||
| <Combobox.Input aria-label='Search countries' /> | ||
| </InputGroup.Root> | ||
| <Combobox.List> | ||
| <Combobox.Collection items={countries} itemToStringLabel={country => country.name}> | ||
| {country => ( | ||
| <Combobox.Option key={country.iso} value={country.iso} label={country.name}> | ||
| {country.name} | ||
| </Combobox.Option> | ||
| )} | ||
| </Combobox.Collection> | ||
| </Combobox.List> | ||
| </Combobox.Root> | ||
| ``` | ||
|
|
||
| ## Scrolling | ||
|
|
||
| <Story | ||
| name='Scrolling' | ||
| storyModule={ComboboxStories} | ||
| /> | ||
|
|
||
| ## Parts | ||
|
|
||
| | Part | Description | | ||
| | --------------------- | --------------------------------------------------------------------------- | | ||
| | `Combobox.Root` | Owns input, selection, open state, and keyboard navigation. | | ||
| | `Combobox.Input` | Search input; renders Mosaic `Input` unless composed through another input. | | ||
| | `Combobox.Trigger` | Opens and closes the option list while keeping focus on the input. | | ||
| | `Combobox.Popup` | Portals, positions, surfaces, and scrolls a floating option list. | | ||
| | `Combobox.List` | Scrollable inline listbox. | | ||
| | `Combobox.Collection` | Filters items and renders each option, with an optional empty state. | | ||
| | `Combobox.Option` | Selectable option with active, selected, and disabled states. | | ||
| | `Combobox.Empty` | Empty result message. | | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| 'use client'; | ||
|
|
||
| import { Button } from '@clerk/ui/mosaic/components/button'; | ||
| import { Combobox } from '@clerk/ui/mosaic/components/combobox'; | ||
| import { Field } from '@clerk/ui/mosaic/components/field'; | ||
| import { Icon } from '@clerk/ui/mosaic/components/icon'; | ||
| import { InputGroup } from '@clerk/ui/mosaic/components/input-group'; | ||
|
|
||
| import type { StoryMeta } from '@/lib/types'; | ||
|
|
||
| export { default as __source } from './combobox.stories?raw'; | ||
|
|
||
| export const meta: StoryMeta = { | ||
| group: 'Components', | ||
| status: 'wip', | ||
| title: 'Combobox', | ||
| source: 'packages/ui/src/mosaic/components/combobox/combobox.tsx', | ||
| }; | ||
|
|
||
| export function Default() { | ||
| const options = ['Apple', 'Apricot', 'Banana', 'Blackberry', 'Cherry', 'Fig', 'Grape', 'Pear', 'Plum']; | ||
|
|
||
| return ( | ||
| <Combobox.Root> | ||
| <Field.Root style={{ width: 320 }}> | ||
| <Field.Label>Fruit</Field.Label> | ||
| <InputGroup.Root> | ||
| <Combobox.Input placeholder='Search fruit…' /> | ||
| <InputGroup.End> | ||
| <Combobox.Trigger | ||
| aria-label='Toggle fruit options' | ||
| render={<Button />} | ||
| > | ||
| <Icon | ||
| name='chevron-down' | ||
| size='sm' | ||
| aria-hidden='true' | ||
| /> | ||
| </Combobox.Trigger> | ||
| </InputGroup.End> | ||
| </InputGroup.Root> | ||
| </Field.Root> | ||
| <Combobox.Popup> | ||
| <Combobox.Collection | ||
| items={options} | ||
| itemToStringLabel={option => option} | ||
| empty={<Combobox.Empty>No fruit found</Combobox.Empty>} | ||
| > | ||
| {option => ( | ||
| <Combobox.Option | ||
| key={option} | ||
| value={option.toLowerCase()} | ||
| label={option} | ||
| > | ||
| {option} | ||
| <Combobox.OptionIndicator /> | ||
| </Combobox.Option> | ||
| )} | ||
| </Combobox.Collection> | ||
| </Combobox.Popup> | ||
| </Combobox.Root> | ||
| ); | ||
| } | ||
|
|
||
| export function Scrolling() { | ||
| const options = Array.from({ length: 40 }, (_, index) => `Fruit ${index + 1}`); | ||
|
|
||
| return ( | ||
| <Combobox.Root> | ||
| <Field.Root style={{ width: 320 }}> | ||
| <Field.Label>Fruit</Field.Label> | ||
| <InputGroup.Root> | ||
| <Combobox.Input placeholder='Search fruit…' /> | ||
| <InputGroup.End> | ||
| <Combobox.Trigger | ||
| aria-label='Toggle fruit options' | ||
| render={<Button />} | ||
| > | ||
| <Icon | ||
| name='chevron-down' | ||
| size='sm' | ||
| aria-hidden='true' | ||
| /> | ||
| </Combobox.Trigger> | ||
| </InputGroup.End> | ||
| </InputGroup.Root> | ||
| </Field.Root> | ||
| <Combobox.Popup> | ||
| <Combobox.Collection | ||
| items={options} | ||
| itemToStringLabel={option => option} | ||
| empty={<Combobox.Empty>No fruit found</Combobox.Empty>} | ||
| > | ||
| {option => ( | ||
| <Combobox.Option | ||
| key={option} | ||
| value={option.toLowerCase()} | ||
| label={option} | ||
| > | ||
| {option} | ||
| <Combobox.OptionIndicator /> | ||
| </Combobox.Option> | ||
| )} | ||
| </Combobox.Collection> | ||
| </Combobox.Popup> | ||
| </Combobox.Root> | ||
| ); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| import * as stylex from '@stylexjs/stylex'; | ||
|
|
||
| import { colorVars, fontFamilyVars, fontWeightVars, radiusVars, space, typeScaleVars } from '../../tokens.stylex'; | ||
|
|
||
| export const styles = stylex.create({ | ||
| positioner: { | ||
| outline: 'none', | ||
| }, | ||
| popup: { | ||
| borderRadius: radiusVars['--cl-radius-lg'], | ||
| outline: 'none', | ||
| overflow: 'hidden', | ||
| backgroundColor: colorVars['--cl-color-card'], | ||
| boxShadow: `0 12px 12px -7px light-dark(oklch(0.2046 0 0 / 12%), transparent), | ||
| 0 24px 24px -10px light-dark(oklch(0.2046 0 0 / 4%), transparent), | ||
| 0 0 0 1px light-dark(oklch(0.2046 0 0 / 4%), oklch(1 0 0 / 10%))`, | ||
| color: colorVars['--cl-color-card-foreground'], | ||
| opacity: { | ||
| default: 1, | ||
| ':where([data-ending-style], [data-starting-style])': 0, | ||
| }, | ||
| scale: { | ||
| default: 1, | ||
| ':where([data-ending-style], [data-starting-style])': 0.96, | ||
| }, | ||
| transformOrigin: 'var(--cl-transform-origin)', | ||
| transitionDuration: { | ||
| default: '150ms', | ||
| '@media (prefers-reduced-motion: reduce)': '0.01ms', | ||
| }, | ||
| transitionProperty: 'opacity, scale', | ||
| transitionTimingFunction: 'ease-out', | ||
| maxHeight: 'var(--cl-available-height)', | ||
| minWidth: '12.5rem', | ||
| }, | ||
| viewport: { | ||
| padding: space['1'], | ||
| gap: space['0.5'], | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| maxHeight: '16rem', | ||
| }, | ||
| list: { | ||
| padding: space['1'], | ||
| gap: space['0.5'], | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| maxHeight: '16rem', | ||
| }, | ||
| option: { | ||
| borderRadius: radiusVars['--cl-radius-md'], | ||
| gap: space['2'], | ||
| outline: { | ||
| default: 'none', | ||
| '@media (forced-colors: active)': { | ||
| default: null, | ||
| ':is([data-active])': '2px solid CanvasText', | ||
| }, | ||
| }, | ||
| paddingInline: space['2'], | ||
| alignItems: 'center', | ||
| backgroundColor: { | ||
| default: 'transparent', | ||
| ':is([data-active])': `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 4%, transparent)`, | ||
| '@media (hover: hover)': { | ||
| ':hover': `color-mix(in oklab, ${colorVars['--cl-color-neutral']} 4%, transparent)`, | ||
| }, | ||
| }, | ||
| cursor: { | ||
| default: 'pointer', | ||
| ':is([data-disabled])': 'not-allowed', | ||
| }, | ||
| display: 'flex', | ||
| flexShrink: 0, | ||
| fontFamily: fontFamilyVars['--cl-font-family-sans'], | ||
| fontSize: typeScaleVars['--cl-text-sm-size'], | ||
| fontWeight: fontWeightVars['--cl-font-medium'], | ||
| opacity: { | ||
| default: 1, | ||
| ':is([data-disabled])': 0.5, | ||
| }, | ||
| height: space['9'], | ||
| }, | ||
| empty: { | ||
| paddingBlock: space['6'], | ||
| paddingInline: space['3'], | ||
| color: colorVars['--cl-color-neutral-faded'], | ||
| fontFamily: fontFamilyVars['--cl-font-family-sans'], | ||
| fontSize: typeScaleVars['--cl-text-sm-size'], | ||
| textAlign: 'center', | ||
| }, | ||
| indicator: { | ||
| alignItems: 'center', | ||
| display: 'inline-flex', | ||
| flexShrink: 0, | ||
| marginInlineStart: 'auto', | ||
| }, | ||
| }); |
Oops, something went wrong.
Oops, something went wrong.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Add a release entry for the public Combobox API.
This Changeset declares no package or version bump. The new
@clerk/uiCombobox API will not be released or listed in the changelog. Add the affected package and a concise release note.As per coding guidelines: “Use Changesets for version management and changelogs.”
🤖 Prompt for AI Agents
Source: Coding guidelines