fix: migrate select to Base UI items API (#4655)

This commit is contained in:
yyhhyyyyyy
2026-05-06 21:38:58 +08:00
committed by GitHub
parent 38a3314b9b
commit d98f0e8ac3
38 changed files with 1187 additions and 485 deletions
@@ -6,6 +6,7 @@ import { Label } from '@/components/ui/label'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -89,18 +90,26 @@ export function PresetSelector(props: PresetSelectorProps) {
<div className='space-y-1.5'>
<Label>{t('Preset Template')}</Label>
<Select
items={[
...OAUTH_PRESETS.map((preset) => ({
value: preset.key,
label: preset.name,
})),
]}
value={selectedPreset}
onValueChange={(v) => v !== null && handlePresetChange(v)}
>
<SelectTrigger className='w-full'>
<SelectValue placeholder={t('Select a preset...')} />
</SelectTrigger>
<SelectContent>
{OAUTH_PRESETS.map((preset) => (
<SelectItem key={preset.key} value={preset.key}>
{preset.name}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{OAUTH_PRESETS.map((preset) => (
<SelectItem key={preset.key} value={preset.key}>
{preset.name}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</div>
@@ -24,6 +24,7 @@ import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -302,6 +303,12 @@ export function ProviderFormDialog(props: ProviderFormDialogProps) {
<FormItem>
<FormLabel>{t('Auth Style')}</FormLabel>
<Select
items={[
...AUTH_STYLE_OPTIONS.map((option) => ({
value: String(option.value),
label: t(option.labelKey),
})),
]}
value={String(field.value)}
onValueChange={(val) => field.onChange(Number(val))}
>
@@ -310,15 +317,17 @@ export function ProviderFormDialog(props: ProviderFormDialogProps) {
<SelectValue />
</SelectTrigger>
</FormControl>
<SelectContent>
{AUTH_STYLE_OPTIONS.map((option) => (
<SelectItem
key={option.value}
value={String(option.value)}
>
{t(option.labelKey)}
</SelectItem>
))}
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
{AUTH_STYLE_OPTIONS.map((option) => (
<SelectItem
key={option.value}
value={String(option.value)}
>
{t(option.labelKey)}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FormDescription>
@@ -17,6 +17,7 @@ import { Input } from '@/components/ui/input'
import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectTrigger,
SelectValue,
@@ -221,18 +222,30 @@ export function PasskeySection({ defaultValues }: PasskeySectionProps) {
<FormItem>
<FormLabel>{t('User Verification')}</FormLabel>
<FormControl>
<Select value={field.value} onValueChange={field.onChange}>
<Select
items={[
{ value: 'required', label: t('Required') },
{ value: 'preferred', label: t('Recommended') },
{ value: 'discouraged', label: t('Discouraged') },
]}
value={field.value}
onValueChange={field.onChange}
>
<SelectTrigger>
<SelectValue placeholder={t('Select requirement')} />
</SelectTrigger>
<SelectContent>
<SelectItem value='required'>{t('Required')}</SelectItem>
<SelectItem value='preferred'>
{t('Recommended')}
</SelectItem>
<SelectItem value='discouraged'>
{t('Discouraged')}
</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='required'>
{t('Required')}
</SelectItem>
<SelectItem value='preferred'>
{t('Recommended')}
</SelectItem>
<SelectItem value='discouraged'>
{t('Discouraged')}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
@@ -253,18 +266,28 @@ export function PasskeySection({ defaultValues }: PasskeySectionProps) {
<FormItem>
<FormLabel>{t('Device Type Preference')}</FormLabel>
<FormControl>
<Select value={field.value} onValueChange={field.onChange}>
<Select
items={[
{ value: 'none', label: t('Unlimited') },
{ value: 'platform', label: t('Built-in Device') },
{ value: 'cross-platform', label: t('External Device') },
]}
value={field.value}
onValueChange={field.onChange}
>
<SelectTrigger>
<SelectValue placeholder={t('No preference')} />
</SelectTrigger>
<SelectContent>
<SelectItem value='none'>{t('Unlimited')}</SelectItem>
<SelectItem value='platform'>
{t('Built-in Device')}
</SelectItem>
<SelectItem value='cross-platform'>
{t('External Device')}
</SelectItem>
<SelectContent alignItemWithTrigger={false}>
<SelectGroup>
<SelectItem value='none'>{t('Unlimited')}</SelectItem>
<SelectItem value='platform'>
{t('Built-in Device')}
</SelectItem>
<SelectItem value='cross-platform'>
{t('External Device')}
</SelectItem>
</SelectGroup>
</SelectContent>
</Select>
</FormControl>