@vectara/vectara-ui/lib/components/searchInput/SearchInputSuggestions.js

Vectara's design system, codified as a React and Sass component library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const VuiSearchInputSuggestions = ({ id, suggestions, onSuggestionKeyDown, suggestionRefs, onSelectSuggestion }) => {
    return (_jsxs("div", Object.assign({ className: "vuiSearchInputSuggestionsContainer" }, { children: [_jsx("div", Object.assign({ className: "vuiSearchInputSuggestions" }, { children: _jsx("div", Object.assign({ id: id, className: "vuiSearchInputSuggestions__suggestionsList", role: "listbox" }, { children: suggestions.map((suggestion, index) => {
                        const sharedProps = {
                            key: index,
                            className: "vuiSearchInputSuggestions__suggestion",
                            ref: (el) => (suggestionRefs.current[index] = el),
                            onKeyDown: (e) => onSuggestionKeyDown(e, index),
                            role: "option",
                            "aria-selected": "false"
                        };
                        if (suggestion.href) {
                            return (_jsx("a", Object.assign({ href: suggestion.href }, sharedProps, { children: suggestion.label })));
                        }
                        return (_jsx("button", Object.assign({ type: "button" }, sharedProps, { onClick: () => onSelectSuggestion === null || onSelectSuggestion === void 0 ? void 0 : onSelectSuggestion(suggestion) }, { children: suggestion.label })));
                    }) })) })), _jsx("div", { className: "vuiSearchInputSuggestions__bottomSpacer" })] })));
};