4b: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4d:T5ee8,import { forwardRef, useState, useRef, useEffect, useCallback, useMemo, useId, createContext, useContext, type ReactNode, type HTMLAttributes, type KeyboardEvent, type MouseEvent, } from 'react' import { createPortal } from 'react-dom' import { cn } from '@/lib/utils' /* ------------------------------------------------------------------ Types ------------------------------------------------------------------ */ export interface DropdownOption { value: string label: string disabled?: boolean } export interface DropdownProps { /** Options to display */ options: DropdownOption[] /** Controlled value (single-select) */ value?: string /** Controlled values (multi-select) */ values?: string[] /** Default value for uncontrolled single-select */ defaultValue?: string /** Default values for uncontrolled multi-select */ defaultValues?: string[] /** Called when selection changes (single-select) */ onChange?: (value: string) => void /** Called when selection changes (multi-select) */ onMultiChange?: (values: string[]) => void /** Enable multi-select mode */ multi?: boolean /** Enable search/filter input */ searchable?: boolean /** Placeholder text when nothing is selected */ placeholder?: string /** Search input placeholder */ searchPlaceholder?: string /** Disabled state */ disabled?: boolean /** Size variant */ size?: 'sm' | 'md' | 'lg' /** Visual variant */ variant?: 'default' | 'glass' /** Additional class names for the trigger */ className?: string /** Additional class names for the menu */ menuClassName?: string /** Use portal rendering for overflow contexts */ portal?: boolean /** Children for compound API (overrides options-based rendering) */ children?: ReactNode } /* ------------------------------------------------------------------ Context for compound API ------------------------------------------------------------------ */ interface DropdownContextValue { isOpen: boolean activeIndex: number selectedValues: Set multi: boolean listboxId: string triggerId: string toggle: () => void close: () => void select: (value: string) => void setActiveIndex: (index: number) => void registerItem: (value: string, index: number) => void } const DropdownContext = createContext(null) function useDropdownContext() { const ctx = useContext(DropdownContext) if (!ctx) throw new Error('Dropdown compound components must be used within ') return ctx } /* ------------------------------------------------------------------ Hooks ------------------------------------------------------------------ */ function useClickOutside( refs: React.RefObject[], handler: () => void ) { useEffect(() => { function onPointerDown(e: PointerEvent) { const target = e.target as Node if (refs.every((r) => r.current && !r.current.contains(target))) { handler() } } document.addEventListener('pointerdown', onPointerDown) return () => document.removeEventListener('pointerdown', onPointerDown) }, [refs, handler]) } function usePositioning( triggerRef: React.RefObject, isOpen: boolean ) { const [style, setStyle] = useState({}) useEffect(() => { if (!isOpen || !triggerRef.current) return function update() { const trigger = triggerRef.current if (!trigger) return const rect = trigger.getBoundingClientRect() setStyle({ position: 'fixed', top: rect.bottom + 4, left: rect.left, width: rect.width, zIndex: 9999, }) } update() window.addEventListener('scroll', update, true) window.addEventListener('resize', update) return () => { window.removeEventListener('scroll', update, true) window.removeEventListener('resize', update) } }, [isOpen, triggerRef]) return style } /* ------------------------------------------------------------------ Sub-components ------------------------------------------------------------------ */ export interface DropdownTriggerProps extends HTMLAttributes { children?: ReactNode } export const DropdownTrigger = forwardRef( ({ children, className, onClick, ...props }, ref) => { const ctx = useDropdownContext() const handleClick = (e: MouseEvent) => { onClick?.(e) ctx.toggle() } return ( ) } ) DropdownTrigger.displayName = 'Dropdown.Trigger' export interface DropdownMenuProps extends HTMLAttributes { children?: ReactNode } export const DropdownMenu = forwardRef( ({ children, className, ...props }, ref) => { const ctx = useDropdownContext() if (!ctx.isOpen) return null return ( ) } ) DropdownMenu.displayName = 'Dropdown.Menu' export interface DropdownItemProps extends HTMLAttributes { value: string disabled?: boolean children?: ReactNode } export const DropdownItem = forwardRef( ({ value, disabled = false, children, className, onClick, ...props }, ref) => { const ctx = useDropdownContext() const isSelected = ctx.selectedValues.has(value) const handleClick = (e: MouseEvent) => { if (disabled) return onClick?.(e) ctx.select(value) } return ( ) } ) DropdownItem.displayName = 'Dropdown.Item' /* ------------------------------------------------------------------ Chevron icon (inline SVG to avoid dependency) ------------------------------------------------------------------ */ function ChevronIcon({ open, className }: { open: boolean; className?: string }) { return ( ) } function SearchIcon() { return ( ) } function CheckIcon() { return ( ) } /* ------------------------------------------------------------------ Main Dropdown component ------------------------------------------------------------------ */ export const Dropdown = Object.assign( forwardRef( ( { options = [], value, values, defaultValue, defaultValues, onChange, onMultiChange, multi = false, searchable = false, placeholder = 'Select...', searchPlaceholder = 'Search...', disabled = false, size = 'md', variant = 'default', className, menuClassName, portal = false, children, }, ref ) => { const uid = useId() const triggerId = `dropdown-trigger-${uid}` const listboxId = `dropdown-listbox-${uid}` // State const [isOpen, setIsOpen] = useState(false) const [search, setSearch] = useState('') const [activeIndex, setActiveIndex] = useState(-1) // Selection state (controlled or uncontrolled) const [internalValue, setInternalValue] = useState(defaultValue) const [internalValues, setInternalValues] = useState(defaultValues ?? []) const isControlled = multi ? values !== undefined : value !== undefined const selectedValue = useMemo( () => (isControlled ? value : internalValue), [isControlled, value, internalValue] ) const selectedMultiValues = useMemo( () => (isControlled ? (values ?? []) : internalValues), [isControlled, values, internalValues] ) const selectedSet = useMemo( () => new Set(multi ? selectedMultiValues : selectedValue ? [selectedValue] : []), [multi, selectedMultiValues, selectedValue] ) // Refs const triggerRef = useRef(null) const menuRef = useRef(null) const searchRef = useRef(null) const containerRef = useRef(null) const itemMapRef = useRef>(new Map()) // Filtered options const filteredOptions = useMemo(() => { if (!search) return options const lower = search.toLowerCase() return options.filter((o) => o.label.toLowerCase().includes(lower)) }, [options, search]) // Position for portal mode const portalStyle = usePositioning(triggerRef, isOpen && portal) // Close handler const close = useCallback(() => { setIsOpen(false) setSearch('') setActiveIndex(-1) triggerRef.current?.focus() }, []) // Toggle const toggle = useCallback(() => { if (disabled) return setIsOpen((prev) => { if (prev) { setSearch('') setActiveIndex(-1) } return !prev }) }, [disabled]) // Selection const select = useCallback( (val: string) => { if (multi) { const next = selectedSet.has(val) ? selectedMultiValues.filter((v) => v !== val) : [...selectedMultiValues, val] if (!isControlled) setInternalValues(next) onMultiChange?.(next) } else { if (!isControlled) setInternalValue(val) onChange?.(val) close() } }, [multi, selectedSet, selectedMultiValues, isControlled, onChange, onMultiChange, close] ) // Register item (for compound API) const registerItem = useCallback((val: string, index: number) => { itemMapRef.current.set(index, val) }, []) // Click outside useClickOutside([containerRef, menuRef], () => { if (isOpen) close() }) // Focus search input when menu opens useEffect(() => { if (isOpen && searchable) { requestAnimationFrame(() => searchRef.current?.focus()) } }, [isOpen, searchable]) // Keyboard handler const handleKeyDown = useCallback( (e: KeyboardEvent) => { if (disabled) return switch (e.key) { case 'ArrowDown': { e.preventDefault() if (!isOpen) { setIsOpen(true) setActiveIndex(0) return } setActiveIndex((prev) => { const max = filteredOptions.length - 1 let next = prev + 1 while (next <= max && filteredOptions[next]?.disabled) next++ return next > max ? prev : next }) break } case 'ArrowUp': { e.preventDefault() if (!isOpen) { setIsOpen(true) setActiveIndex(filteredOptions.length - 1) return } setActiveIndex((prev) => { let next = prev - 1 while (next >= 0 && filteredOptions[next]?.disabled) next-- return next < 0 ? prev : next }) break } case 'Enter': case ' ': { if (!isOpen) { e.preventDefault() setIsOpen(true) setActiveIndex(0) return } // Allow space in search input if (e.key === ' ' && searchable && document.activeElement === searchRef.current) { return } e.preventDefault() if (activeIndex >= 0 && filteredOptions[activeIndex] && !filteredOptions[activeIndex].disabled) { select(filteredOptions[activeIndex].value) } break } case 'Escape': { e.preventDefault() close() break } case 'Home': { if (isOpen) { e.preventDefault() const first = filteredOptions.findIndex((o) => !o.disabled) if (first >= 0) setActiveIndex(first) } break } case 'End': { if (isOpen) { e.preventDefault() for (let i = filteredOptions.length - 1; i >= 0; i--) { if (!filteredOptions[i].disabled) { setActiveIndex(i) break } } } break } case 'Tab': { if (isOpen) close() break } default: { // Type-ahead: single character jumps to matching option if (!searchable && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) { e.preventDefault() if (!isOpen) setIsOpen(true) const char = e.key.toLowerCase() const startIndex = activeIndex + 1 const reordered = [ ...filteredOptions.slice(startIndex), ...filteredOptions.slice(0, startIndex), ] const match = reordered.findIndex( (o) => !o.disabled && o.label.toLowerCase().startsWith(char) ) if (match >= 0) { setActiveIndex((match + startIndex) % filteredOptions.length) } } } } }, [disabled, isOpen, filteredOptions, activeIndex, searchable, select, close] ) // Scroll active item into view useEffect(() => { if (!isOpen || activeIndex < 0 || !menuRef.current) return const activeEl = menuRef.current.querySelector(`[data-index="${activeIndex}"]`) activeEl?.scrollIntoView({ block: 'nearest' }) }, [isOpen, activeIndex]) // Size styles const triggerSizes = { sm: 'h-8 px-3 text-xs', md: 'h-10 px-4 text-sm', lg: 'h-12 px-5 text-base', } const itemSizes = { sm: 'px-3 py-1.5 text-xs', md: 'px-4 py-2 text-sm', lg: 'px-5 py-2.5 text-base', } // Variant styles const triggerVariants = { default: [ 'bg-transparent', 'border-[var(--glass-border)]', 'hover:border-[var(--glass-highlight)]', ], glass: [ 'bg-[var(--glass-bg)]', 'backdrop-blur-lg', 'border-[var(--glass-border)]', 'hover:bg-[rgba(255,255,255,0.08)]', ], } // Display value const displayValue = useMemo(() => { if (multi) { if (selectedMultiValues.length === 0) return null const labels = selectedMultiValues .map((v) => options.find((o) => o.value === v)?.label ?? v) if (labels.length <= 2) return labels.join(', ') return `${labels[0]}, ${labels[1]} +${labels.length - 2}` } if (!selectedValue) return null return options.find((o) => o.value === selectedValue)?.label ?? selectedValue }, [multi, selectedMultiValues, selectedValue, options]) // Active descendant const activeDescendant = isOpen && activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : undefined // Context value const contextValue: DropdownContextValue = { isOpen, activeIndex, selectedValues: selectedSet, multi, listboxId, triggerId, toggle, close, select, setActiveIndex, registerItem, } // If children are provided, use compound API if (children) { return (

{children}

) } // Options-based rendering const menuContent = ( ) return (

{ // Merge refs ;(containerRef as React.MutableRefObject).current = node if (typeof ref === 'function') ref(node) else if (ref) (ref as React.MutableRefObject).current = node }} className="relative inline-block w-full" onKeyDown={handleKeyDown} > {/* Trigger */} {/* Menu */} {isOpen && ( portal ? createPortal(menuContent, document.body) :

{menuContent}

)}

) } ), { Trigger: DropdownTrigger, Menu: DropdownMenu, Item: DropdownItem, } ) Dropdown.displayName = 'Dropdown' 4a:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","react-dom",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-dom","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"react-dom"}]]}]}]]}],["$","$L4b",null,{"namespace":"@n3wth","registryDependencies":["cn"]}]]}],null]}],["$","$L4c",null,{"files":[{"path":"registry/new-york/dropdown/dropdown.tsx","content":"$4d","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]