+ {evaluatedOptions.length === 0 ? (
+
+ No options available.
+
+ ) : (
+ evaluatedOptions.map((option, index) => {
+ const optionValue = getOptionValue(option)
+ const optionLabel = getOptionLabel(option)
+ const OptionIcon =
+ typeof option === 'object' && 'icon' in option
+ ? (option.icon as React.ComponentType<{ className?: string }>)
+ : null
+ const isSelected = value === optionValue
+ const isHighlighted = index === highlightedIndex
+
+ return (
+
handleSelect(optionValue)}
+ onMouseDown={(e) => {
+ e.preventDefault()
+ handleSelect(optionValue)
+ }}
+ onMouseEnter={() => setHighlightedIndex(index)}
+ className={cn(
+ 'relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground',
+ isHighlighted && 'bg-accent text-accent-foreground'
+ )}
+ >
+ {OptionIcon && }
+ {optionLabel}
+ {isSelected && }
+
+ )
+ })
+ )}
+