| 53 | } |
| 54 | |
| 55 | function SelectPopup({ |
| 56 | className, |
| 57 | children, |
| 58 | sideOffset = 4, |
| 59 | alignItemWithTrigger = true, |
| 60 | ...props |
| 61 | }: SelectPrimitive.Popup.Props & { |
| 62 | sideOffset?: SelectPrimitive.Positioner.Props["sideOffset"]; |
| 63 | alignItemWithTrigger?: SelectPrimitive.Positioner.Props["alignItemWithTrigger"]; |
| 64 | }) { |
| 65 | return ( |
| 66 | <SelectPrimitive.Portal> |
| 67 | <SelectPrimitive.Positioner |
| 68 | alignItemWithTrigger={alignItemWithTrigger} |
| 69 | className="z-50 select-none" |
| 70 | data-slot="select-positioner" |
| 71 | sideOffset={sideOffset} |
| 72 | > |
| 73 | <SelectPrimitive.Popup |
| 74 | className="origin-(--transform-origin) transition-[scale,opacity] has-data-[side=none]:scale-100 has-data-starting-style:scale-98 has-data-starting-style:opacity-0 has-data-[side=none]:transition-none" |
| 75 | data-slot="select-popup" |
| 76 | {...props} |
| 77 | > |
| 78 | <SelectPrimitive.ScrollUpArrow |
| 79 | className="top-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:top-px before:h-[200%] before:rounded-t-[calc(var(--radius-lg)-1px)] before:bg-linear-to-b before:from-50% before:from-popover" |
| 80 | data-slot="select-scroll-up-arrow" |
| 81 | > |
| 82 | <ChevronUpIcon className="relative size-4.5 sm:size-4" /> |
| 83 | </SelectPrimitive.ScrollUpArrow> |
| 84 | <span className="relative block h-full rounded-lg border bg-popover bg-clip-padding before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-lg dark:not-in-data-[slot=group]:bg-clip-border"> |
| 85 | <SelectPrimitive.List |
| 86 | className={cn( |
| 87 | "max-h-(--available-height) min-w-(--anchor-width) overflow-y-auto p-1", |
| 88 | className, |
| 89 | )} |
| 90 | data-slot="select-list" |
| 91 | > |
| 92 | {children} |
| 93 | </SelectPrimitive.List> |
| 94 | </span> |
| 95 | <SelectPrimitive.ScrollDownArrow |
| 96 | className="bottom-0 z-50 flex h-6 w-full cursor-default items-center justify-center before:pointer-events-none before:absolute before:inset-x-px before:bottom-px before:h-[200%] before:rounded-b-[calc(var(--radius-lg)-1px)] before:bg-linear-to-t before:from-50% before:from-popover" |
| 97 | data-slot="select-scroll-down-arrow" |
| 98 | > |
| 99 | <ChevronDownIcon className="relative size-4.5 sm:size-4" /> |
| 100 | </SelectPrimitive.ScrollDownArrow> |
| 101 | </SelectPrimitive.Popup> |
| 102 | </SelectPrimitive.Positioner> |
| 103 | </SelectPrimitive.Portal> |
| 104 | ); |
| 105 | } |
| 106 | |
| 107 | function SelectItem({ |
| 108 | className, |