Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(select): update select component to include radix primitives for scrolling on large datasets. #1715

Merged
merged 14 commits into from
Nov 12, 2023
Merged
18 changes: 17 additions & 1 deletion apps/www/registry/default/ui/select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

import * as React from "react"
import * as SelectPrimitive from "@radix-ui/react-select"
import { Check, ChevronDown } from "lucide-react"
import { Check, ChevronDown, ChevronUp } from "lucide-react"

import { cn } from "@/lib/utils"

Expand Down Expand Up @@ -48,6 +48,14 @@ const SelectContent = React.forwardRef<
position={position}
{...props}
>
<SelectPrimitive.ScrollUpButton
className={cn(
"flex items-center justify-center h-[25px] bg-popover cursor-default",
className
)}
>
<ChevronUp />
</SelectPrimitive.ScrollUpButton>
<SelectPrimitive.Viewport
className={cn(
"p-1",
Expand All @@ -57,6 +65,14 @@ const SelectContent = React.forwardRef<
>
{children}
</SelectPrimitive.Viewport>
<SelectPrimitive.ScrollDownButton
className={cn(
"flex items-center justify-center h-[25px] bg-popover cursor-default",
className
)}
>
<ChevronDown />
</SelectPrimitive.ScrollDownButton>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
Expand Down
17 changes: 17 additions & 0 deletions apps/www/registry/new-york/ui/select.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import * as React from "react"
import { CaretSortIcon, CheckIcon } from "@radix-ui/react-icons"
import * as SelectPrimitive from "@radix-ui/react-select"
import { ChevronDown, ChevronUp } from "lucide-react"
iaingymware marked this conversation as resolved.
Show resolved Hide resolved

import { cn } from "@/lib/utils"

Expand Down Expand Up @@ -48,6 +49,14 @@ const SelectContent = React.forwardRef<
position={position}
{...props}
>
<SelectPrimitive.ScrollUpButton
className={cn(
"flex items-center justify-center h-[25px] bg-popover cursor-default",
className
)}
>
<ChevronUp />
</SelectPrimitive.ScrollUpButton>
<SelectPrimitive.Viewport
className={cn(
"p-1",
Expand All @@ -57,6 +66,14 @@ const SelectContent = React.forwardRef<
>
{children}
</SelectPrimitive.Viewport>
<SelectPrimitive.ScrollDownButton
className={cn(
"flex items-center justify-center h-[25px] bg-popover cursor-default",
className
)}
>
<ChevronDown />
</SelectPrimitive.ScrollDownButton>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
))
Expand Down