| import * as React from "react" |
| import { createPortal } from "react-dom" |
| import { cn } from "@/lib/utils" |
| import { ChevronDown } from "lucide-react" |
|
|
| const SelectContext = React.createContext(null) |
|
|
| const Select = ({ value, onValueChange, children, ...props }) => { |
| const [isOpen, setIsOpen] = React.useState(false) |
| const [internalValue, setInternalValue] = React.useState("") |
| const [menuPos, setMenuPos] = React.useState({ top: 0, left: 0, width: 0 }) |
| const triggerRef = React.useRef(null) |
| const menuRef = React.useRef(null) |
| const currentValue = value !== undefined ? value : internalValue |
|
|
| const handleValueChange = (newValue) => { |
| if (onValueChange) { |
| onValueChange(newValue) |
| } else { |
| setInternalValue(newValue) |
| } |
| setIsOpen(false) |
| } |
|
|
| React.useLayoutEffect(() => { |
| if (!isOpen || !triggerRef.current) return |
| const r = triggerRef.current.getBoundingClientRect() |
| setMenuPos({ top: r.bottom + 4, left: r.left, width: r.width }) |
| }, [isOpen]) |
|
|
| React.useEffect(() => { |
| if (!isOpen) return |
| const reposition = () => { |
| if (!triggerRef.current) return |
| const r = triggerRef.current.getBoundingClientRect() |
| setMenuPos({ top: r.bottom + 4, left: r.left, width: r.width }) |
| } |
| window.addEventListener("scroll", reposition, true) |
| window.addEventListener("resize", reposition) |
| return () => { |
| window.removeEventListener("scroll", reposition, true) |
| window.removeEventListener("resize", reposition) |
| } |
| }, [isOpen]) |
|
|
| React.useEffect(() => { |
| if (!isOpen) return |
| const onPointerDown = (e) => { |
| const t = triggerRef.current |
| const m = menuRef.current |
| if (t?.contains(e.target) || m?.contains(e.target)) return |
| setIsOpen(false) |
| } |
| document.addEventListener("pointerdown", onPointerDown) |
| return () => document.removeEventListener("pointerdown", onPointerDown) |
| }, [isOpen]) |
|
|
| return ( |
| <SelectContext.Provider |
| value={{ |
| value: currentValue, |
| onValueChange: handleValueChange, |
| isOpen, |
| setIsOpen, |
| triggerRef, |
| menuRef, |
| menuPos, |
| }} |
| > |
| <div className="relative" {...props}> |
| {children} |
| </div> |
| </SelectContext.Provider> |
| ) |
| } |
|
|
| const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => { |
| const context = React.useContext(SelectContext) |
| const setRefs = (node) => { |
| if (context?.triggerRef) context.triggerRef.current = node |
| if (typeof ref === "function") ref(node) |
| else if (ref) ref.current = node |
| } |
| return ( |
| <button |
| ref={setRefs} |
| type="button" |
| onClick={() => context?.setIsOpen(!context.isOpen)} |
| className={cn( |
| "flex h-10 w-full items-center justify-between rounded-md border border-slate-200 bg-white px-3 py-2 text-sm ring-offset-white placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", |
| className |
| )} |
| {...props} |
| > |
| {children} |
| <ChevronDown className="h-4 w-4 opacity-50" /> |
| </button> |
| ) |
| }) |
| SelectTrigger.displayName = "SelectTrigger" |
|
|
| const SelectValue = ({ placeholder, ...props }) => { |
| const context = React.useContext(SelectContext) |
| const displayValue = context?.value || placeholder |
| return <span {...props}>{displayValue}</span> |
| } |
|
|
| const SelectContent = React.forwardRef(({ className, children, ...props }, ref) => { |
| const context = React.useContext(SelectContext) |
| const [mounted, setMounted] = React.useState(false) |
|
|
| React.useEffect(() => { |
| setMounted(true) |
| }, []) |
|
|
| if (!context?.isOpen || !mounted) return null |
|
|
| const { top, left, width } = context.menuPos |
| const style = { |
| position: "fixed", |
| top, |
| left, |
| minWidth: width > 0 ? width : undefined, |
| zIndex: 10050, |
| } |
|
|
| const setRefs = (node) => { |
| if (context?.menuRef) context.menuRef.current = node |
| if (typeof ref === "function") ref(node) |
| else if (ref) ref.current = node |
| } |
|
|
| return createPortal( |
| <div |
| ref={setRefs} |
| style={style} |
| className={cn( |
| "rounded-md border border-slate-200 bg-white text-slate-950 shadow-lg", |
| "max-h-[min(70vh,22rem)] overflow-y-auto overflow-x-hidden", |
| className |
| )} |
| {...props} |
| > |
| <div className="p-1">{children}</div> |
| </div>, |
| document.body |
| ) |
| }) |
| SelectContent.displayName = "SelectContent" |
|
|
| const SelectItem = React.forwardRef(({ className, value, children, ...props }, ref) => { |
| const context = React.useContext(SelectContext) |
| const isSelected = context?.value === value |
|
|
| return ( |
| <div |
| ref={ref} |
| onClick={() => context?.onValueChange(value)} |
| className={cn( |
| "relative flex w-full cursor-pointer select-none items-center rounded-sm py-1.5 px-2 text-sm outline-none hover:bg-slate-100 focus:bg-slate-100", |
| isSelected && "bg-slate-100", |
| className |
| )} |
| {...props} |
| > |
| {children} |
| </div> |
| ) |
| }) |
| SelectItem.displayName = "SelectItem" |
|
|
| export { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } |
|
|
