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 (
<Root
defaultOpen={defaultOpen}
open={open}
onOpenChange={onOpenChange}
onValueChange={onValueChange}
value={value as string}
>
<Trigger
{...props}
className={trigger({
className: props.className,
disabled: props.disabled,
})}
<div className="relative">
<Root
defaultOpen={defaultOpen}
open={open}
onOpenChange={onOpenChange}
onValueChange={onValueChange}
value={value as string}
>
<Value placeholder={placeholder} />
<Icon className={icon()}>
{loading ? (
<Spinner size={16} />
) : (
<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 })}
<Trigger
{...props}
className={trigger({
className: props.className,
disabled: props.disabled,
})}
>
{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>
<Value placeholder={placeholder} />
<Icon className={icon()}>
{loading ? (
<Spinner size={16} />
) : (
<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 && (
<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>
);
}