rohit/probo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: select atom component relative style

Browse Source 
Signed-off-by: Piyush Gupta <piyushguptaa2z123@gmail.com>
This commit is contained in:
Piyush Gupta
2025-12-25 12:38:25 +05:30
committed by Sacha Al Himdani
parent d54da02a90
commit e077b5866f
1 changed files with 62 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
packages/ui/src/Atoms/Select/Select.tsx
View File

@@ -119,66 +119,70 @@ export function Select<T>({
}); });
return ( return (
<Root <div className="relative">
defaultOpen={defaultOpen} <Root
open={open} defaultOpen={defaultOpen}
onOpenChange={onOpenChange} open={open}
onValueChange={onValueChange} onOpenChange={onOpenChange}
value={value as string} onValueChange={onValueChange}
> value={value as string}
<Trigger
{...props}
className={trigger({
className: props.className,
disabled: props.disabled,
})}
> >
<Value placeholder={placeholder} /> <Trigger
<Icon className={icon()}> {...props}
{loading ? ( className={trigger({
<Spinner size={16} /> className: props.className,
) : ( disabled: props.disabled,
<IconChevronGrabberVertical size={16} /> })}
)}
</Icon>
</Trigger>
<Portal>
<Content
position="popper"
sideOffset={5}
{...dropdownProps}
style={{
minWidth: "var(--radix-select-trigger-width)",
maxHeight:
"var(--radix-select-content-available-height)",
...dropdownProps?.style,
}}
className={content({ className: dropdownProps?.className })}
> >
{onSearch && ( <Value placeholder={placeholder} />
<Input <Icon className={icon()}>
// Prevent radix behaviour {loading ? (
onBlurCapture={(e) => { <Spinner size={16} />
e.stopPropagation(); ) : (
e.preventDefault(); <IconChevronGrabberVertical size={16} />
}} )}
autoFocus </Icon>
icon={IconMagnifyingGlass} </Trigger>
placeholder={searchPlaceholder} <Portal>
value={searchValue} <Content
onChange={(e) => onSearch(e.target.value)} position="popper"
/> sideOffset={5}
)} {...dropdownProps}
<ScrollArea.Root className="ScrollAreaRoot" type="auto"> style={{
<Viewport asChild> minWidth: "var(--radix-select-trigger-width)",
<ScrollArea.Viewport className="ScrollAreaViewport"> maxHeight:
{children} "var(--radix-select-content-available-height)",
</ScrollArea.Viewport> ...dropdownProps?.style,
</Viewport> }}
</ScrollArea.Root> className={content({
</Content> className: dropdownProps?.className,
</Portal> })}
</Root> >
{onSearch && (
<Input
// Prevent radix behaviour
onBlurCapture={(e) => {
e.stopPropagation();
e.preventDefault();
}}
autoFocus
icon={IconMagnifyingGlass}
placeholder={searchPlaceholder}
value={searchValue}
onChange={(e) => onSearch(e.target.value)}
/>
)}
<ScrollArea.Root className="ScrollAreaRoot" type="auto">
<Viewport asChild>
<ScrollArea.Viewport className="ScrollAreaViewport">
{children}
</ScrollArea.Viewport>
</Viewport>
</ScrollArea.Root>
</Content>
</Portal>
</Root>
</div>
); );
} }