50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T4a47,"use client"; import { cn } from "@/lib/utils"; import { Check, ChevronDown } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useCallback, useEffect, useId, useRef, useState } from "react"; import { createPortal } from "react-dom"; import { DURATION_INSTANT, SPRING_DEFAULT, SPRING_SNAPPY, } from "@/components/smoothui/lib/animation"; // --------------------------------------------------------------------------- // Constants // --------------------------------------------------------------------------- const CHEVRON_ROTATION = 180; const DROPDOWN_OFFSET = 4; const STAGGER_DELAY = 0.02; const ITEM_HOVER_X = 2; /** Matches `max-h-60` on the menu scroller. */ const MENU_MAX_HEIGHT = 240; /** Keep the menu clear of the viewport edge. */ const VIEWPORT_PAD = 8; type MenuSide = "top" | "bottom"; type MenuPosition = { /** Distance from the viewport bottom — set when opening upward. */ bottom: number | null; left: number; maxHeight: number; side: MenuSide; /** Distance from the viewport top — set when opening downward. */ top: number | null; width: number; }; /** * Prefer opening below the trigger; flip above when the viewport has more * room there (or not enough below for a usable menu). * * Upward menus are anchored with `bottom` so they sit flush under the * trigger even when their content is shorter than `maxHeight`. */ const positionOf = ( rect: DOMRect, menuHeight = MENU_MAX_HEIGHT ): MenuPosition => { const spaceBelow = window.innerHeight - rect.bottom - VIEWPORT_PAD; const spaceAbove = rect.top - VIEWPORT_PAD; const needed = Math.min(menuHeight, 120); const openUp = spaceBelow < needed && spaceAbove > spaceBelow; if (openUp) { const maxHeight = Math.max( 80, Math.min(MENU_MAX_HEIGHT, spaceAbove - DROPDOWN_OFFSET) ); return { bottom: window.innerHeight - rect.top + DROPDOWN_OFFSET, left: rect.left, maxHeight, side: "top", top: null, width: rect.width, }; } const maxHeight = Math.max( 80, Math.min(MENU_MAX_HEIGHT, spaceBelow - DROPDOWN_OFFSET) ); return { bottom: null, left: rect.left, maxHeight, side: "bottom", top: rect.bottom + DROPDOWN_OFFSET, width: rect.width, }; }; // --------------------------------------------------------------------------- // Types // --------------------------------------------------------------------------- export interface SelectOptionProps { /** Whether the option is disabled */ disabled?: boolean; /** The display label for the option */ label: string; /** The value of the option */ value: string; } export interface SelectGroupOption { /** Label for the group */ label: string; /** Options within this group */ options: SelectOptionProps[]; } export interface SelectProps { /** Accessible label for the select */ "aria-label"?: string; /** ID of element that labels this select */ "aria-labelledby"?: string; /** Additional CSS class names for the trigger */ className?: string; /** Additional CSS class names for the content dropdown */ contentClassName?: string; /** The default value (uncontrolled) */ defaultValue?: string; /** Whether the select is disabled */ disabled?: boolean; /** Grouped options */ groups?: SelectGroupOption[]; /** The name attribute for form submission */ name?: string; /** Callback when the value changes */ onValueChange?: (value: string) => void; /** Flat list of options */ options?: SelectOptionProps[]; /** Placeholder text when no value is selected */ placeholder?: string; /** Whether the select is required */ required?: boolean; /** The size of the trigger */ size?: "sm" | "default"; /** The controlled value of the select */ value?: string; } // --------------------------------------------------------------------------- // Component // --------------------------------------------------------------------------- export default function Select({ value: controlledValue, defaultValue, onValueChange, placeholder = "Select an option", disabled = false, required = false, name, options, groups, className, contentClassName, size = "default", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: SelectProps) { const shouldReduceMotion = useReducedMotion(); const listboxId = useId(); const [isOpen, setIsOpen] = useState(false); const [internalValue, setInternalValue] = useState(defaultValue ?? ""); const [focusedIndex, setFocusedIndex] = useState(-1); const [position, setPosition] = useState({ bottom: null, left: 0, maxHeight: MENU_MAX_HEIGHT, side: "bottom", top: 0, width: 0, }); const triggerRef = useRef(null); const wrapperRef = useRef(null); const portalRef = useRef(null); const selectedValue = controlledValue === undefined ? internalValue : controlledValue; const syncPosition = useCallback((measuredHeight?: number) => { if (!triggerRef.current) { return; } setPosition( positionOf(triggerRef.current.getBoundingClientRect(), measuredHeight) ); }, []); // Flatten all options for keyboard navigation const allOptions: SelectOptionProps[] = (() => { const flat: SelectOptionProps[] = []; if (options) { for (const opt of options) { flat.push(opt); } } if (groups) { for (const group of groups) { for (const opt of group.options) { flat.push(opt); } } } return flat; })(); const optionId = (index: number) => `${listboxId}-option-${index}`; const activeOption = isOpen && focusedIndex >= 0 && focusedIndex < allOptions.length ? optionId(focusedIndex) : undefined; const selectedLabel = allOptions.find( (opt) => opt.value === selectedValue )?.label; // --------------------------------------------------------------------------- // Handlers // --------------------------------------------------------------------------- const handleSelect = useCallback( (opt: SelectOptionProps) => { if (opt.disabled) { return; } if (controlledValue === undefined) { setInternalValue(opt.value); } onValueChange?.(opt.value); setIsOpen(false); setFocusedIndex(-1); triggerRef.current?.focus(); }, [controlledValue, onValueChange] ); const handleToggle = useCallback(() => { if (disabled) { return; } if (!isOpen) { syncPosition(); } setIsOpen((prev) => !prev); setFocusedIndex(-1); }, [disabled, isOpen, syncPosition]); // --------------------------------------------------------------------------- // Position updates on scroll/resize + remeasure after paint // --------------------------------------------------------------------------- useEffect(() => { if (!(isOpen && triggerRef.current)) { return; } const updatePosition = () => { const menu = portalRef.current?.querySelector("[role='listbox']"); const measured = menu instanceof HTMLElement ? menu.offsetHeight : undefined; syncPosition(measured); }; updatePosition(); // Remeasure once the menu has laid out — height drives whether we flip. const frame = window.requestAnimationFrame(updatePosition); window.addEventListener("scroll", updatePosition, true); window.addEventListener("resize", updatePosition); return () => { window.cancelAnimationFrame(frame); window.removeEventListener("scroll", updatePosition, true); window.removeEventListener("resize", updatePosition); }; }, [isOpen, syncPosition]); // --------------------------------------------------------------------------- // Click outside to close // --------------------------------------------------------------------------- useEffect(() => { if (!isOpen) { return; } const handleClickOutside = (event: MouseEvent) => { const target = event.target as Node; if ( wrapperRef.current && !wrapperRef.current.contains(target) && portalRef.current && !portalRef.current.contains(target) ) { setIsOpen(false); setFocusedIndex(-1); } }; document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, [isOpen]); // --------------------------------------------------------------------------- // Keyboard navigation // --------------------------------------------------------------------------- useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (!isOpen) { if ( (event.key === "Enter" || event.key === " ") && document.activeElement === triggerRef.current ) { event.preventDefault(); handleToggle(); } return; } if (event.key === "Escape") { setIsOpen(false); setFocusedIndex(-1); triggerRef.current?.focus(); } else if (event.key === "ArrowDown") { event.preventDefault(); setFocusedIndex((prev) => prev < allOptions.length - 1 ? prev + 1 : 0 ); } else if (event.key === "ArrowUp") { event.preventDefault(); setFocusedIndex((prev) => prev > 0 ? prev - 1 : allOptions.length - 1 ); } else if (event.key === "Enter" && focusedIndex >= 0) { event.preventDefault(); const opt = allOptions[focusedIndex]; if (opt) { handleSelect(opt); } } else if (event.key === "Home") { event.preventDefault(); setFocusedIndex(0); } else if (event.key === "End") { event.preventDefault(); setFocusedIndex(allOptions.length - 1); } }; document.addEventListener("keydown", handleKeyDown); return () => document.removeEventListener("keydown", handleKeyDown); // biome-ignore lint/correctness/useExhaustiveDependencies: handlers stable via closure }, [isOpen, allOptions, focusedIndex, handleSelect, handleToggle]); // --------------------------------------------------------------------------- // Render helpers // --------------------------------------------------------------------------- /** Render a single option item with stagger animation */ const renderItem = (opt: SelectOptionProps, itemIndex: number) => { const isSelected = opt.value === selectedValue; const isFocused = itemIndex === focusedIndex; return ( ); }; // Global index counter for stagger across groups let globalIndex = 0; // --------------------------------------------------------------------------- // Dropdown content (portalled) // --------------------------------------------------------------------------- const openUp = position.side === "top"; const enterY = openUp ? 4 : -4; const dropdownContent = ( {isOpen ? (