@seekora-ai/ui-sdk-react 0.2.4 → 0.2.5

package/dist/src/index.d.ts

@@ -1199,6 +1199,12 @@ interface FederatedDropdownProps extends QuerySuggestionsEventHandlers {
     zIndex?: number;
     /** Analytics tags */
     analyticsTags?: string[];
+    /** Include facets in suggestions API response */
+    includeFacets?: boolean;
+    /** Include categories in suggestions API response */
+    includeCategories?: boolean;
+    /** Include dropdown recommendations (trending products, top searches, etc.) */
+    includeDropdownRecommendations?: boolean;
 }
 interface FederatedDropdownRef {
     getActiveIndex: () => number;
@@ -1265,6 +1271,10 @@ interface SearchBarWithSuggestionsProps {
     enableAnalytics?: boolean;
     /** Analytics tags */
     analyticsTags?: string[];
+    /** Include facets in suggestions API response (federated/rich) */
+    includeFacets?: boolean;
+    /** Include categories in suggestions API response (federated/rich) */
+    includeCategories?: boolean;
     /** Dropdown width */
     dropdownWidth?: string | number;
     /** Dropdown max height */
@@ -2416,6 +2426,8 @@ interface DocSearchProps {
     initialOpen?: boolean;
     disableShortcut?: boolean;
     shortcutKey?: string;
+    /** Post-process results per source (e.g. filter by permission, resolve :storeId). */
+    processGroupedResults?: (sourceId: string, items: DocSearchSuggestion[]) => DocSearchSuggestion[];
 }
 interface DocSearchButtonProps {
     onClick: () => void;
@@ -2470,7 +2482,7 @@ type DocSearchAction = {
     type: 'RESET';
 };
 
-declare function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder, maxResults, debounceMs, onSelect, onClose, translations, renderButton, buttonComponent: ButtonComponent, initialOpen, disableShortcut, shortcutKey, }: DocSearchProps): React__default.JSX.Element;
+declare function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder, maxResults, debounceMs, onSelect, onClose, translations, renderButton, buttonComponent: ButtonComponent, initialOpen, disableShortcut, shortcutKey, processGroupedResults, }: DocSearchProps): React__default.JSX.Element;
 
 declare function DocSearchButton({ onClick, placeholder }: DocSearchButtonProps): React__default.JSX.Element;
 
@@ -2480,6 +2492,7 @@ interface UseDocSearchOptions {
     sources?: SearchSource[];
     maxResults?: number;
     debounceMs?: number;
+    processGroupedResults?: (sourceId: string, items: DocSearchSuggestion[]) => DocSearchSuggestion[];
 }
 declare function useDocSearch(options: UseDocSearchOptions): {
     sources: SearchSource[];

package/dist/src/index.esm.js

@@ -4564,7 +4564,7 @@ function transformFilteredTab(raw) {
 // Main Hook
 // ============================================================================
 function useQuerySuggestionsEnhanced(options) {
-    const { client, query, enabled = true, debounceMs = 200, maxSuggestions = 10, minQueryLength = 1, includeDropdownRecommendations = false, includeCategories = false, includeFacets = false, maxCategories = 3, maxFacets = 5, filteredTabs, minPopularity, timeRange, disableTypoTolerance, analyticsTags, enableRecentSearches = true, maxRecentSearches = MAX_RECENT_SEARCHES_DEFAULT, recentSearchesKey = RECENT_SEARCHES_DEFAULT_KEY, onSuggestionsLoaded, onError, } = options;
+    const { client, query, enabled = true, debounceMs = 200, maxSuggestions = 10, minQueryLength = 1, includeDropdownRecommendations = false, includeCategories = true, includeFacets = false, maxCategories = 3, maxFacets = 5, filteredTabs, minPopularity, timeRange, disableTypoTolerance, analyticsTags, enableRecentSearches = true, maxRecentSearches = MAX_RECENT_SEARCHES_DEFAULT, recentSearchesKey = RECENT_SEARCHES_DEFAULT_KEY, onSuggestionsLoaded, onError, } = options;
     // State
     const [suggestions, setSuggestions] = useState([]);
     const [loading, setLoading] = useState(false);
@@ -5966,7 +5966,7 @@ const ImagePlaceholder = () => (React.createElement("svg", { viewBox: "0 0 24 24
 // Component
 // ============================================================================
 const FederatedDropdown = forwardRef(function FederatedDropdown(props, ref) {
-    const { query, isOpen = true, maxSuggestions = 8, maxProducts = 8, maxBrands = 8, minQueryLength = 0, debounceMs = 200, filteredTabs: tabsConfig, showProducts = true, showBrands = true, showFilteredTabs = true, showRecentSearches = true, layout = 'side-by-side', productsColumnWidth = '60%', suggestionsColumnWidth = '40%', showPrices = true, currencySymbol = '$', classNames = {}, style, renderProduct, renderSuggestion, renderBrand, renderTab, header, footer, viewAllProductsLink, width = '800px', maxHeight = '600px', zIndex = 1000, analyticsTags, onSuggestionSelect, onProductClick, onBrandClick, onTabSelect, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, } = props;
+    const { query, isOpen = true, maxSuggestions = 8, maxProducts = 8, maxBrands = 8, minQueryLength = 0, debounceMs = 200, filteredTabs: tabsConfig, showProducts = true, showBrands = true, showFilteredTabs = true, showRecentSearches = true, layout = 'side-by-side', productsColumnWidth = '60%', suggestionsColumnWidth = '40%', showPrices = true, currencySymbol = '$', classNames = {}, style, renderProduct, renderSuggestion, renderBrand, renderTab, header, footer, viewAllProductsLink, width = '800px', maxHeight = '600px', zIndex = 1000, analyticsTags, includeFacets: includeFacetsProp = true, includeCategories: includeCategoriesProp = true, includeDropdownRecommendations: includeDropdownRecommendationsProp = true, onSuggestionSelect, onProductClick, onBrandClick, onTabSelect, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, } = props;
     const { client } = useSearchContext();
     const containerRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -5981,7 +5981,9 @@ const FederatedDropdown = forwardRef(function FederatedDropdown(props, ref) {
         debounceMs,
         maxSuggestions,
         minQueryLength,
-        includeDropdownRecommendations: true,
+        includeDropdownRecommendations: includeDropdownRecommendationsProp,
+        includeCategories: includeCategoriesProp,
+        includeFacets: includeFacetsProp,
         filteredTabs: tabsConfig,
         analyticsTags,
         enableRecentSearches: showRecentSearches,
@@ -6520,7 +6522,7 @@ const ClearIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill
 // Component
 // ============================================================================
 const SearchBarWithSuggestions = forwardRef(function SearchBarWithSuggestions(props, ref) {
-    const { variant = 'classic', placeholder = 'Search...', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, dropdownWidth, dropdownMaxHeight, classNames = {}, style, inputStyle, ariaLabel = 'Search', } = props;
+    const { variant = 'classic', placeholder = 'Search...', initialQuery = '', value, onQueryChange, onSearch, onSuggestionSelect, onProductClick, showSearchButton = false, searchButtonText = 'Search', showClearButton = true, autoFocus = false, minQueryLength = 1, maxSuggestions = 8, debounceMs = 200, showRecentSearches = true, showTrendingOnEmpty = true, includeDropdownRecommendations = false, filteredTabs, enableAnalytics = true, analyticsTags, includeFacets, includeCategories, dropdownWidth, dropdownMaxHeight, classNames = {}, style, inputStyle, ariaLabel = 'Search', } = props;
     const { client } = useSearchContext();
     const inputRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -6679,7 +6681,7 @@ const SearchBarWithSuggestions = forwardRef(function SearchBarWithSuggestions(pr
             case 'rich':
                 return (React.createElement(RichQuerySuggestions, { ref: dropdownRef, ...commonProps, includeDropdownRecommendations: includeDropdownRecommendations, includeCategories: true, width: dropdownWidth || '100%', maxHeight: dropdownMaxHeight || '480px' }));
             case 'federated':
-                return (React.createElement(FederatedDropdown, { ref: dropdownRef, ...commonProps, filteredTabs: filteredTabs, showProducts: true, showBrands: true, showFilteredTabs: !!filteredTabs, onProductClick: handleProductClick, width: dropdownWidth || '800px', maxHeight: dropdownMaxHeight || '600px' }));
+                return (React.createElement(FederatedDropdown, { ref: dropdownRef, ...commonProps, filteredTabs: filteredTabs, showProducts: true, showBrands: true, showFilteredTabs: !!filteredTabs, onProductClick: handleProductClick, width: dropdownWidth || '800px', maxHeight: dropdownMaxHeight || '600px', includeFacets: includeFacets, includeCategories: includeCategories, includeDropdownRecommendations: includeDropdownRecommendations }));
             case 'compact':
                 return (React.createElement(QuerySuggestionsDropdown, { ref: dropdownRef, ...commonProps, maxSuggestions: 5, showCounts: false, width: dropdownWidth || '100%' }));
             case 'classic':
@@ -11436,16 +11438,48 @@ function getTypeLevel(type) {
 function isChildType(type) {
     return getTypeLevel(type) >= 2;
 }
+/** Build a stable grouping key from all hierarchy levels (lvl0 through lvl5). */
+function getHierarchyKey(hit) {
+    const h = hit.hierarchy ?? {};
+    const parts = [
+        h.lvl0 ?? '',
+        h.lvl1 ?? '',
+        h.lvl2 ?? '',
+        h.lvl3 ?? '',
+        h.lvl4 ?? '',
+        h.lvl5 ?? '',
+    ];
+    return parts.join('\0');
+}
+/** Build a display breadcrumb from hierarchy, skipping consecutive duplicates (e.g. lvl0 === lvl1). */
+function getHierarchyBreadcrumb(hit) {
+    const h = hit.hierarchy ?? {};
+    const parts = [h.lvl0, h.lvl1, h.lvl2, h.lvl3, h.lvl4, h.lvl5].filter((v) => typeof v === 'string' && v.length > 0);
+    const deduped = [];
+    for (const p of parts) {
+        if (deduped[deduped.length - 1] !== p)
+            deduped.push(p);
+    }
+    return deduped.join(' › ');
+}
 function groupHitsByHierarchy(hits) {
+    const hitToIndex = new Map();
+    hits.forEach((h, i) => hitToIndex.set(h, i));
     const groups = new Map();
     for (const hit of hits) {
-        const lvl0 = hit.hierarchy?.lvl0 || '';
-        if (!groups.has(lvl0))
-            groups.set(lvl0, []);
-        groups.get(lvl0).push(hit);
-    }
+        const key = getHierarchyKey(hit);
+        if (!groups.has(key))
+            groups.set(key, []);
+        groups.get(key).push(hit);
+    }
+    const entries = Array.from(groups.entries());
+    entries.sort(([, aHits], [, bHits]) => {
+        const aMin = Math.min(...aHits.map(h => hitToIndex.get(h) ?? 0));
+        const bMin = Math.min(...bHits.map(h => hitToIndex.get(h) ?? 0));
+        return aMin - bMin;
+    });
     const result = [];
-    for (const [lvl0Key, groupHits] of groups.entries()) {
+    for (const [, groupHits] of entries) {
         const sortedHits = [...groupHits].sort((a, b) => {
             const aType = a.type;
             const bType = b.type;
@@ -11458,7 +11492,8 @@ function groupHitsByHierarchy(hits) {
             const isLastChild = isChild && (!nextHit || !isChildType(nextHit.type));
             return { ...hit, isChild, isLastChild };
         });
-        result.push({ category: lvl0Key || null, hits: markedHits });
+        const category = getHierarchyBreadcrumb(groupHits[0]);
+        result.push({ category: category || null, hits: markedHits });
     }
     return result;
 }
@@ -11473,15 +11508,36 @@ function getHitKey(hit, index) {
         return hit.objectID;
     return `suggestion-${hit.url}-${index}`;
 }
-function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, query, isLoading, error, translations = {}, sources: _sources = [], }) {
+function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSelectionIntoViewRef, query, isLoading, error, translations = {}, sources: _sources = [], }) {
     const listRef = useRef(null);
     useEffect(() => {
-        if (listRef.current && hits.length > 0) {
-            const selectedItem = listRef.current.children[selectedIndex];
-            if (selectedItem)
-                selectedItem.scrollIntoView({ block: 'nearest' });
+        if (!listRef.current || hits.length === 0)
+            return;
+        // Only scroll when selection changed via keyboard (avoids scroll-to-selected on hover)
+        if (scrollSelectionIntoViewRef && !scrollSelectionIntoViewRef.current)
+            return;
+        // listRef's direct children are groups (li.seekora-docsearch-results-group), not hits.
+        // Find the actual hit element at flat selectedIndex.
+        const groupEls = listRef.current.querySelectorAll('.seekora-docsearch-results-group');
+        let idx = 0;
+        for (const groupEl of groupEls) {
+            const itemList = groupEl.querySelector('.seekora-docsearch-results-group-items');
+            if (!itemList)
+                continue;
+            const items = itemList.children;
+            for (let i = 0; i < items.length; i++) {
+                if (idx === selectedIndex) {
+                    items[i].scrollIntoView({ block: 'nearest' });
+                    if (scrollSelectionIntoViewRef)
+                        scrollSelectionIntoViewRef.current = false;
+                    return;
+                }
+                idx++;
+            }
         }
-    }, [selectedIndex, hits.length]);
+        if (scrollSelectionIntoViewRef)
+            scrollSelectionIntoViewRef.current = false;
+    }, [selectedIndex, hits.length, scrollSelectionIntoViewRef]);
     if (!query) {
         return (React.createElement("div", { className: "seekora-docsearch-empty" },
             React.createElement("p", { className: "seekora-docsearch-empty-text" }, translations.searchPlaceholder || 'Type to start searching...')));
@@ -11668,7 +11724,7 @@ function reducer(state, action) {
     }
 }
 function useDocSearch(options) {
-    const { apiEndpoint, apiKey, sources, maxResults = 10, debounceMs = 200 } = options;
+    const { apiEndpoint, apiKey, sources, maxResults = 10, debounceMs = 200, processGroupedResults } = options;
     const searchSources = sources || (apiEndpoint ? [{
             id: 'default',
             name: 'Results',
@@ -11771,7 +11827,10 @@ function useDocSearch(options) {
             const results = await Promise.all(searchSources.map(async (source) => {
                 const controller = new AbortController();
                 abortControllersRef.current.set(source.id, controller);
-                const items = await fetchFromSource(source, query, controller.signal);
+                let items = await fetchFromSource(source, query, controller.signal);
+                if (processGroupedResults) {
+                    items = processGroupedResults(source.id, items);
+                }
                 return { source, items };
             }));
             const groupedResults = results.filter(r => r.items.length > 0);
@@ -11785,7 +11844,7 @@ function useDocSearch(options) {
         finally {
             dispatch({ type: 'SET_LOADING', payload: false });
         }
-    }, [searchSources, fetchFromSource]);
+    }, [searchSources, fetchFromSource, processGroupedResults]);
     const search = useCallback((q) => fetchSuggestions(q), [fetchSuggestions]);
     const setQuery = useCallback((query) => {
         dispatch({ type: 'SET_QUERY', payload: query });
@@ -11829,41 +11888,59 @@ function useDocSearch(options) {
     };
 }
 
+/** Build hierarchy from doc: either nested doc.hierarchy or flat keys like doc['hierarchy.lvl0'] */
+function getHierarchy(doc) {
+    const hierarchy = {};
+    if (doc?.hierarchy && typeof doc.hierarchy === 'object') {
+        hierarchy.lvl0 = doc.hierarchy.lvl0;
+        hierarchy.lvl1 = doc.hierarchy.lvl1;
+        hierarchy.lvl2 = doc.hierarchy.lvl2;
+        hierarchy.lvl3 = doc.hierarchy.lvl3;
+        hierarchy.lvl4 = doc.hierarchy.lvl4;
+        hierarchy.lvl5 = doc.hierarchy.lvl5;
+    }
+    else if (doc && typeof doc === 'object') {
+        hierarchy.lvl0 = doc['hierarchy.lvl0'];
+        hierarchy.lvl1 = doc['hierarchy.lvl1'];
+        hierarchy.lvl2 = doc['hierarchy.lvl2'];
+        hierarchy.lvl3 = doc['hierarchy.lvl3'];
+        hierarchy.lvl4 = doc['hierarchy.lvl4'];
+        hierarchy.lvl5 = doc['hierarchy.lvl5'];
+    }
+    return hierarchy;
+}
 function transformResults(results) {
+    const stripMark = (s) => typeof s === 'string' ? s.replace(/<\/?mark>/g, '') : (s ? String(s) : '');
     return results.map((result) => {
-        const url = result.url || result.route || result.link || '';
-        const title = result.title || result.name || '';
-        const content = result.content || result.description || result.snippet || '';
-        const description = result.description || result.content?.substring?.(0, 150) || '';
-        const hierarchy = {};
-        if (result.hierarchy) {
-            hierarchy.lvl0 = result.hierarchy.lvl0;
-            hierarchy.lvl1 = result.hierarchy.lvl1;
-            hierarchy.lvl2 = result.hierarchy.lvl2;
-        }
-        else {
-            if (result.category)
-                hierarchy.lvl0 = result.category;
-            if (result.parent_title || result.parentTitle)
-                hierarchy.lvl1 = result.parent_title || result.parentTitle;
-        }
+        const doc = result?.document ?? result;
+        const hierarchy = getHierarchy(doc);
+        const url = doc.url || result.url || doc.route || result.route || doc.link || result.link || '';
+        const rawTitle = doc.title || result.title || doc.name || result.name || hierarchy?.lvl3 || hierarchy?.lvl2 || hierarchy?.lvl1 || hierarchy?.lvl0 || '';
+        const content = doc.content ?? result.content ?? doc.description ?? result.description ?? doc.snippet ?? result.snippet ?? '';
+        const description = doc.description ?? result.description ?? (typeof content === 'string' ? content.substring(0, 150) : '');
+        const plainTitle = stripMark(rawTitle) || stripMark(hierarchy?.lvl3) || stripMark(hierarchy?.lvl2) || stripMark(hierarchy?.lvl1) || stripMark(hierarchy?.lvl0) || 'Untitled';
+        const plainContent = stripMark(content)?.substring(0, 200) || content;
+        const apiHighlight = result?.highlight ?? doc?.highlight;
+        const highlightTitle = typeof apiHighlight?.title === 'string' ? apiHighlight.title : undefined;
+        const highlightContent = typeof apiHighlight?.content === 'string' ? apiHighlight.content : undefined;
         return {
             url,
-            title: title?.replace?.(/<\/?mark>/g, '') || title,
-            content: content?.replace?.(/<\/?mark>/g, '')?.substring?.(0, 200) || content,
-            description: description?.replace?.(/<\/?mark>/g, '') || description,
-            category: result.category || hierarchy.lvl0 || '',
+            title: plainTitle,
+            content: plainContent,
+            description: stripMark(description) || description,
+            category: doc.category ?? result.category ?? hierarchy?.lvl0 ?? '',
             hierarchy,
-            route: result.route,
-            parentTitle: result.parent_title || result.parentTitle,
-            type: result.type || '',
-            anchor: result.anchor || '',
+            route: doc.route ?? result.route,
+            parentTitle: doc.parent_title ?? doc.parentTitle ?? result.parent_title ?? result.parentTitle,
+            type: doc.type ?? result.type ?? '',
+            anchor: doc.anchor ?? result.anchor ?? '',
             _source: 'seekora',
+            highlight: (highlightTitle ?? highlightContent) ? { title: highlightTitle, content: highlightContent } : undefined,
         };
     });
 }
 function useSeekoraSearch$1(options) {
-    const { storeId, storeSecret, apiEndpoint, maxResults = 20, debounceMs = 200, analyticsTags = ['docsearch'], groupField, groupSize, } = options;
+    const { storeId, storeSecret, apiEndpoint, maxResults = 20, debounceMs = 200, analyticsTags = ['docsearch'], groupField = 'hierarchy.lvl3', groupSize = 10, } = options;
     const [query, setQueryState] = useState('');
     const [suggestions, setSuggestions] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -11887,7 +11964,9 @@ function useSeekoraSearch$1(options) {
                 config.environment = apiEndpoint;
             }
             else {
-                config.baseUrl = apiEndpoint;
+                // Search SDK path is /v1/search; backend serves at /api/v1/search. baseUrl must include /api.
+                const base = apiEndpoint.replace(/\/$/, '');
+                config.baseUrl = base.endsWith('/api') ? base : `${base}/api`;
             }
         }
         try {
@@ -12015,8 +12094,9 @@ function useSeekoraSearch$1(options) {
     };
 }
 
-function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder = 'Search documentation...', maxResults = 10, debounceMs = 200, onSelect, onClose, translations = {}, renderButton = true, buttonComponent: ButtonComponent = DocSearchButton, initialOpen = false, disableShortcut = false, shortcutKey = 'k', }) {
+function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiKey, sources, placeholder = 'Search documentation...', maxResults = 10, debounceMs = 200, onSelect, onClose, translations = {}, renderButton = true, buttonComponent: ButtonComponent = DocSearchButton, initialOpen = false, disableShortcut = false, shortcutKey = 'k', processGroupedResults, }) {
     const [isOpen, setIsOpen] = useState(initialOpen);
+    const scrollSelectionIntoViewRef = useRef(false);
     const useSeekoraSDK = !!storeId;
     const seekoraSearch = useSeekoraSearch$1({
         storeId: storeId || '',
@@ -12032,6 +12112,7 @@ function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiK
         sources,
         maxResults,
         debounceMs,
+        processGroupedResults,
     });
     const { query, suggestions, isLoading, error, selectedIndex, setQuery, selectNext, selectPrev, setSelectedIndex, reset, getSelectedItem, } = useSeekoraSDK ? seekoraSearch : legacySearch;
     const groupedSuggestions = useSeekoraSDK ? undefined : legacySearch.groupedSuggestions;
@@ -12063,12 +12144,20 @@ function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiK
         if (selectedItem)
             handleSelect(selectedItem);
     }, [getSelectedItem, handleSelect]);
+    const handleSelectNext = useCallback(() => {
+        scrollSelectionIntoViewRef.current = true;
+        selectNext();
+    }, [selectNext]);
+    const handleSelectPrev = useCallback(() => {
+        scrollSelectionIntoViewRef.current = true;
+        selectPrev();
+    }, [selectPrev]);
     const { handleModalKeyDown } = useKeyboard({
         isOpen,
         onOpen: handleOpen,
         onClose: handleClose,
-        onSelectNext: selectNext,
-        onSelectPrev: selectPrev,
+        onSelectNext: handleSelectNext,
+        onSelectPrev: handleSelectPrev,
         onEnter: handleEnter,
         disableShortcut,
         shortcutKey,
@@ -12084,7 +12173,7 @@ function DocSearch({ storeId, storeSecret, seekoraApiEndpoint, apiEndpoint, apiK
                     React.createElement("button", { type: "button", className: "seekora-docsearch-close", onClick: handleClose, "aria-label": "Close search" },
                         React.createElement("span", { className: "seekora-docsearch-close-text" }, "esc"))),
                 React.createElement("div", { className: "seekora-docsearch-body" },
-                    React.createElement(Results, { hits: displayHits, groupedHits: groupedSuggestions, selectedIndex: selectedIndex, onSelect: handleSelect, onHover: setSelectedIndex, query: query, isLoading: isLoading, error: error, translations: translations, sources: searchSources })),
+                    React.createElement(Results, { hits: displayHits, groupedHits: groupedSuggestions, selectedIndex: selectedIndex, onSelect: handleSelect, onHover: setSelectedIndex, scrollSelectionIntoViewRef: scrollSelectionIntoViewRef, query: query, isLoading: isLoading, error: error, translations: translations, sources: searchSources })),
                 React.createElement(Footer, { translations: translations })))));
 }