fix(web): SelectField использует стандартные shadcn Select-компоненты с w-full
- SelectField переписан на переиспользование Select/SelectTrigger/ SelectValue/SelectContent/SelectItem из @cfdm/ui (вместо дубля стилей) - triggerClassName по умолчанию w-full — триггер виден в формах (для horizontal field в settings передаётся w-32) - items prop в Select.Root — SelectValue рендерит label выбранного элемента Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Denozordec
@@ -1,11 +1,14 @@
|
||||
import * as React from 'react'
|
||||
import {
|
||||
Select as SelectPrimitive,
|
||||
type SelectRootProps,
|
||||
} from '@base-ui/react/select'
|
||||
import type { SelectRootProps } from '@base-ui/react/select'
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@cfdm/ui/components/select'
|
||||
import { cn } from '@cfdm/ui/lib/utils'
|
||||
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react'
|
||||
|
||||
export interface SelectOption {
|
||||
value: string
|
||||
@@ -32,76 +35,23 @@ export function SelectField({
|
||||
onValueChange,
|
||||
...props
|
||||
}: SelectFieldProps) {
|
||||
const items = React.useMemo(() => options.map((o) => ({ value: o.value, label: o.label })), [options])
|
||||
const items = React.useMemo(
|
||||
() => options.map((o) => ({ value: o.value, label: o.label })),
|
||||
[options],
|
||||
)
|
||||
|
||||
return (
|
||||
<SelectPrimitive.Root
|
||||
items={items}
|
||||
value={value}
|
||||
onValueChange={onValueChange}
|
||||
{...props}
|
||||
>
|
||||
<SelectPrimitive.Trigger
|
||||
id={triggerId}
|
||||
data-slot="select-trigger"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
'flex w-full items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
|
||||
triggerClassName,
|
||||
)}
|
||||
>
|
||||
<SelectPrimitive.Value
|
||||
data-slot="select-value"
|
||||
placeholder={placeholder}
|
||||
className="flex flex-1 text-left"
|
||||
/>
|
||||
<SelectPrimitive.Icon
|
||||
render={<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />}
|
||||
/>
|
||||
</SelectPrimitive.Trigger>
|
||||
<SelectPrimitive.Portal>
|
||||
<SelectPrimitive.Positioner
|
||||
side="bottom"
|
||||
sideOffset={4}
|
||||
align="center"
|
||||
alignOffset={0}
|
||||
alignItemWithTrigger
|
||||
className="isolate z-50"
|
||||
>
|
||||
<SelectPrimitive.Popup
|
||||
data-slot="select-content"
|
||||
className="relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95"
|
||||
>
|
||||
<SelectPrimitive.ScrollUpArrow className="top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4">
|
||||
<ChevronUpIcon />
|
||||
</SelectPrimitive.ScrollUpArrow>
|
||||
<SelectPrimitive.List>
|
||||
{options.map((opt) => (
|
||||
<SelectPrimitive.Item
|
||||
key={opt.value}
|
||||
value={opt.value}
|
||||
data-slot="select-item"
|
||||
className="relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2"
|
||||
>
|
||||
<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
|
||||
{opt.label}
|
||||
</SelectPrimitive.ItemText>
|
||||
<SelectPrimitive.ItemIndicator
|
||||
render={
|
||||
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
|
||||
}
|
||||
>
|
||||
<CheckIcon className="pointer-events-none" />
|
||||
</SelectPrimitive.ItemIndicator>
|
||||
</SelectPrimitive.Item>
|
||||
))}
|
||||
</SelectPrimitive.List>
|
||||
<SelectPrimitive.ScrollDownArrow className="bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*=\'size-\'])]:size-4">
|
||||
<ChevronDownIcon />
|
||||
</SelectPrimitive.ScrollDownArrow>
|
||||
</SelectPrimitive.Popup>
|
||||
</SelectPrimitive.Positioner>
|
||||
</SelectPrimitive.Portal>
|
||||
</SelectPrimitive.Root>
|
||||
<Select items={items} value={value} onValueChange={onValueChange} {...props}>
|
||||
<SelectTrigger id={triggerId} size={size} className={cn('w-full', triggerClassName)}>
|
||||
<SelectValue placeholder={placeholder} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{options.map((opt) => (
|
||||
<SelectItem key={opt.value} value={opt.value}>
|
||||
{opt.label}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user