@seekora-ai/ui-sdk-react 0.2.7 → 0.2.9

package/dist/src/index.d.ts

@@ -1074,6 +1074,10 @@ interface RichQuerySuggestionsProps extends QuerySuggestionsEventHandlers {
     debounceMs?: number;
     /** Include dropdown recommendations from API */
     includeDropdownRecommendations?: boolean;
+    /** When false, omit product hits list from dropdown (default true) */
+    includeDropdownProductList?: boolean;
+    /** When false, omit filtered_tabs from dropdown (default true) */
+    includeFilteredTabs?: boolean;
     /** Include categories in suggestions */
     includeCategories?: boolean;
     /** Max categories per suggestion */
@@ -1346,6 +1350,10 @@ interface UseQuerySuggestionsEnhancedOptions {
     minQueryLength?: number;
     /** Include dropdown recommendations (trending, products, etc.) */
     includeDropdownRecommendations?: boolean;
+    /** When false, omit product hits list from dropdown (default true) */
+    includeDropdownProductList?: boolean;
+    /** When false, omit filtered_tabs from dropdown extensions (default true) */
+    includeFilteredTabs?: boolean;
     /** Include categories in suggestions */
     includeCategories?: boolean;
     /** Include facets in suggestions */
@@ -1518,13 +1526,17 @@ interface SearchInputProps {
     placeholder?: string;
     autoFocus?: boolean;
     showClearButton?: boolean;
+    /** When false, blur does not close the dropdown (e.g. for overlay mode). Default true. */
+    closeOnBlur?: boolean;
+    /** Optional icon (e.g. magnifying glass) rendered to the left of the input */
+    leftIcon?: React__default.ReactNode;
     className?: string;
     style?: React__default.CSSProperties;
     inputClassName?: string;
     inputStyle?: React__default.CSSProperties;
     ariaLabel?: string;
 }
-declare function SearchInput({ placeholder, autoFocus, showClearButton, className, style, inputClassName, inputStyle, ariaLabel, }: SearchInputProps): React__default.JSX.Element;
+declare function SearchInput({ placeholder, autoFocus, showClearButton, closeOnBlur, leftIcon, className, style, inputClassName, inputStyle, ariaLabel, }: SearchInputProps): React__default.JSX.Element;
 
 /**
  * DropdownPanel – floating panel for suggestions (primitive)
@@ -2640,6 +2652,10 @@ interface SuggestionSearchBarProps {
     debounceMs?: number;
     /** Include dropdown recommendations (products, tabs, trending) */
     includeDropdownRecommendations?: boolean;
+    /** When false, omit product hits list from dropdown (default true) */
+    includeDropdownProductList?: boolean;
+    /** When false, omit filtered_tabs from dropdown (default true) */
+    includeFilteredTabs?: boolean;
     /** Include categories per suggestion */
     includeCategories?: boolean;
     /** Filtered tabs configuration */

package/dist/src/index.esm.js

@@ -4534,15 +4534,16 @@ function parseHighlight(highlighted) {
         .replace(/__\/ais-highlight__/g, '</mark>');
 }
 function transformProduct(raw) {
+    const meta = raw.metadata || {};
     return {
         id: raw.id || raw.objectID,
         objectID: raw.objectID || raw.id,
-        title: raw.title || raw.name || raw.productName,
-        name: raw.name || raw.title,
-        image: raw.image || raw.imageUrl || raw.metadata?.image,
-        price: raw.price || raw.sellPrice || raw.metadata?.sellPrice,
-        currency: raw.currency || raw.metadata?.currency || '',
-        url: raw.url || raw.productId || raw.metadata?.url,
+        title: raw.title || raw.name || raw.productName || meta.name || meta.productName || '',
+        name: raw.name || raw.title || meta.name || meta.productName || '',
+        image: raw.image || raw.imageUrl || meta.image || meta.image_url || meta.images?.[0] || '',
+        price: raw.price ?? raw.sellPrice ?? meta.sellPrice ?? meta.price,
+        currency: raw.currency || meta.currency || '',
+        url: raw.url || raw.productId || meta.url || meta.productId || '',
         clicks: raw.clicks,
         conversions: raw.conversions,
         revenue: raw.revenue,
@@ -4564,7 +4565,7 @@ function transformFilteredTab(raw) {
 // Main Hook
 // ============================================================================
 function useQuerySuggestionsEnhanced(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;
+    const { client, query, enabled = true, debounceMs = 200, maxSuggestions = 10, minQueryLength = 1, includeDropdownRecommendations = false, includeDropdownProductList = true, includeFilteredTabs = true, 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);
@@ -4592,7 +4593,10 @@ function useQuerySuggestionsEnhanced(options) {
     }, [enableRecentSearches, recentSearchesKey, maxRecentSearches]);
     // Fetch suggestions
     const fetchSuggestions = useCallback(async (searchQuery) => {
-        if (!client || !searchQuery.trim()) {
+        if (!client)
+            return;
+        // When minQueryLength is 0, allow empty query so overlay can show default/trending recommendations on open
+        if (!searchQuery.trim() && minQueryLength > 0) {
             setSuggestions([]);
             setDropdownRecommendations(null);
             return;
@@ -4608,6 +4612,8 @@ function useQuerySuggestionsEnhanced(options) {
             const response = await client.getSuggestions?.(searchQuery, {
                 hitsPerPage: maxSuggestions,
                 include_dropdown_recommendations: includeDropdownRecommendations || (filteredTabs && filteredTabs.length > 0),
+                include_dropdown_product_list: includeDropdownProductList,
+                include_filtered_tabs: includeFilteredTabs,
                 include_categories: includeCategories,
                 include_facets: includeFacets,
                 max_categories: maxCategories,
@@ -4627,12 +4633,17 @@ function useQuerySuggestionsEnhanced(options) {
             setSuggestions(transformedSuggestions);
             // Extract dropdown recommendations from extensions
             const extensions = (response.extensions || {});
+            const rawResults = response.results;
+            const secondResultHits = Array.isArray(rawResults?.[1]?.hits) ? rawResults[1].hits : [];
+            // Multi-index response: results[0]=suggestions, results[1]=product hits; expose results[1].hits as product_hits for fallback when extensions have no products
+            const productHits = secondResultHits.length > 0 ? secondResultHits.map((h) => transformProduct(h)) : [];
             const recommendations = {
                 trending_searches: Array.isArray(extensions.trending_searches) ? extensions.trending_searches : [],
                 top_searches: Array.isArray(extensions.top_searches) ? extensions.top_searches : [],
                 related_searches: Array.isArray(extensions.related_searches) ? extensions.related_searches : [],
                 trending_products: Array.isArray(extensions.trending_products) ? extensions.trending_products.map(transformProduct) : [],
                 item_recommendations: Array.isArray(extensions.item_recommendations) ? extensions.item_recommendations.map(transformProduct) : [],
+                product_hits: productHits.length > 0 ? productHits : undefined,
                 popular_brands: Array.isArray(extensions.popular_brands) ? extensions.popular_brands : [],
                 filtered_tabs: Array.isArray(extensions.filtered_tabs) ? extensions.filtered_tabs.map(transformFilteredTab) : [],
                 processing_time_ms: typeof extensions.processing_time_ms === 'number' ? extensions.processing_time_ms : undefined,
@@ -4692,8 +4703,11 @@ function useQuerySuggestionsEnhanced(options) {
         }
     }, [
         client,
+        minQueryLength,
         maxSuggestions,
         includeDropdownRecommendations,
+        includeDropdownProductList,
+        includeFilteredTabs,
         includeCategories,
         includeFacets,
         maxCategories,
@@ -4768,7 +4782,19 @@ function useQuerySuggestionsEnhanced(options) {
     const relatedSearches = dropdownRecommendations?.related_searches || [];
     const popularBrands = dropdownRecommendations?.popular_brands || [];
     const filteredTabsResult = dropdownRecommendations?.filtered_tabs || [];
-    const trendingProducts = dropdownRecommendations?.trending_products || [];
+    // Use trending_products, then item_recommendations, then first filtered_tab's products, then results[1].hits (product_hits) so grid shows for any API shape
+    const trendingProducts = useMemo(() => {
+        const fromTrending = dropdownRecommendations?.trending_products;
+        if (fromTrending && fromTrending.length > 0)
+            return fromTrending;
+        const fromItemRecs = dropdownRecommendations?.item_recommendations;
+        if (fromItemRecs && fromItemRecs.length > 0)
+            return fromItemRecs;
+        const firstTab = dropdownRecommendations?.filtered_tabs?.[0];
+        if (firstTab?.products && firstTab.products.length > 0)
+            return firstTab.products;
+        return dropdownRecommendations?.product_hits ?? [];
+    }, [dropdownRecommendations?.trending_products, dropdownRecommendations?.item_recommendations, dropdownRecommendations?.filtered_tabs, dropdownRecommendations?.product_hits]);
     const hasContent = useMemo(() => {
         return (suggestions.length > 0 ||
             recentSearches.length > 0 ||
@@ -5451,7 +5477,7 @@ const CloseIcon = () => (React.createElement("svg", { viewBox: "0 0 20 20", fill
 // Component
 // ============================================================================
 const RichQuerySuggestions = forwardRef(function RichQuerySuggestions(props, ref) {
-    const { query, isOpen = true, sections = DEFAULT_SECTIONS, maxSuggestionsPerSection = 8, minQueryLength = 0, debounceMs = 200, includeDropdownRecommendations = true, includeCategories = true, maxCategories = 3, showCounts = true, showCategoryCounts = true, showSectionHeaders = true, classNames = {}, style, renderSuggestion, renderCategory, renderTrendingItem, renderRecentItem, header, footer, width = '100%', maxHeight = '480px', zIndex = 1000, ariaLabel = 'Search suggestions', analyticsTags, onSuggestionSelect, onCategoryClick, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, } = props;
+    const { query, isOpen = true, sections = DEFAULT_SECTIONS, maxSuggestionsPerSection = 8, minQueryLength = 0, debounceMs = 200, includeDropdownRecommendations = true, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, maxCategories = 3, showCounts = true, showCategoryCounts = true, showSectionHeaders = true, classNames = {}, style, renderSuggestion, renderCategory, renderTrendingItem, renderRecentItem, header, footer, width = '100%', maxHeight = '480px', zIndex = 1000, ariaLabel = 'Search suggestions', analyticsTags, onSuggestionSelect, onCategoryClick, onRecentSearchClick, onRecentSearchRemove, onViewAllClick, onOpen, onClose, } = props;
     const { client } = useSearchContext();
     const containerRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -5465,6 +5491,8 @@ const RichQuerySuggestions = forwardRef(function RichQuerySuggestions(props, ref
         maxSuggestions: maxSuggestionsPerSection,
         minQueryLength,
         includeDropdownRecommendations,
+        includeDropdownProductList,
+        includeFilteredTabs,
         includeCategories,
         maxCategories,
         analyticsTags,
@@ -6969,15 +6997,17 @@ const inputStyles = {
     color: 'var(--seekora-text-primary, #111827)',
     fontFamily: 'inherit',
 };
-function SearchInput({ placeholder = 'Search...', autoFocus = false, showClearButton = true, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
+function SearchInput({ placeholder = 'Search...', autoFocus = false, showClearButton = true, closeOnBlur = true, leftIcon, className, style, inputClassName, inputStyle, ariaLabel = 'Search', }) {
     const { query, setQuery, isOpen, setIsOpen, navigateNext, navigatePrev, selectActive, close, } = useSuggestionsContext();
     const inputRef = useRef(null);
     const handleFocus = useCallback(() => {
         setIsOpen(true);
     }, [setIsOpen]);
     const handleBlur = useCallback(() => {
+        if (!closeOnBlur)
+            return;
         setTimeout(() => close(), 200);
-    }, [close]);
+    }, [close, closeOnBlur]);
     const handleChange = useCallback((e) => {
         setQuery(e.target.value);
     }, [setQuery]);
@@ -7010,6 +7040,7 @@ function SearchInput({ placeholder = 'Search...', autoFocus = false, showClearBu
     }, [setQuery]);
     return (React.createElement("div", { className: clsx('seekora-suggestions-search-input-wrapper', className), style: { ...defaultStyles, ...style } },
         React.createElement("div", { className: "seekora-suggestions-input-wrapper", style: inputWrapperStyles },
+            leftIcon ? (React.createElement("span", { className: "seekora-suggestions-input-left-icon", style: { display: 'flex', flexShrink: 0, color: 'var(--seekora-text-secondary, #6b7280)' } }, leftIcon)) : null,
             React.createElement("input", { ref: inputRef, type: "text", value: query, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", spellCheck: false, "aria-label": ariaLabel, "aria-expanded": isOpen, "aria-haspopup": "listbox", "aria-autocomplete": "list", role: "combobox", className: clsx('seekora-suggestions-input', inputClassName), style: { ...inputStyles, ...inputStyle } }),
             showClearButton && query ? (React.createElement("button", { type: "button", onClick: handleClear, className: "seekora-suggestions-input-clear", "aria-label": "Clear search", style: {
                     padding: 4,
@@ -11765,7 +11796,7 @@ const createStyles = (isMobile) => ({
 // Component
 // ============================================================================
 const SuggestionSearchBar = forwardRef(function SuggestionSearchBar(props, ref) {
-    const { client, variant = 'amazon', autoMobileVariant = true, placeholder = 'Search...', defaultQuery = '', value, minQueryLength = 1, maxSuggestions = 8, debounceMs = 200, includeDropdownRecommendations = true, includeCategories = true, filteredTabs, analyticsTags, enableRecentSearches = true, maxRecentSearches = 10, showProducts = true, showTrendingOnEmpty = true, enableAnalytics = true, analyticsConfig, suggestionFields, productFields, theme, onSearch, onQueryChange, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, className, style, inputClassName, dropdownWidth, dropdownMaxHeight = '500px', zIndex = 1000, enableCache = true, cacheTtlMs = 30000, cacheMaxSize = 100, } = props;
+    const { client, variant = 'amazon', autoMobileVariant = true, placeholder = 'Search...', defaultQuery = '', value, minQueryLength = 1, maxSuggestions = 8, debounceMs = 200, includeDropdownRecommendations = true, includeDropdownProductList = true, includeFilteredTabs = true, includeCategories = true, filteredTabs, analyticsTags, enableRecentSearches = true, maxRecentSearches = 10, showProducts = true, showTrendingOnEmpty = true, enableAnalytics = true, analyticsConfig, suggestionFields, productFields, theme, onSearch, onQueryChange, onSuggestionSelect, onProductClick, onCategoryClick, onTabChange, className, style, inputClassName, dropdownWidth, dropdownMaxHeight = '500px', zIndex = 1000, enableCache = true, cacheTtlMs = 30000, cacheMaxSize = 100, } = props;
     // Theme: prop overrides context (SearchProvider theme)
     const searchContext = useSearchContext();
     const effectiveTheme = theme ?? searchContext.theme;
@@ -11848,6 +11879,8 @@ const SuggestionSearchBar = forwardRef(function SuggestionSearchBar(props, ref)
         const cacheOptions = {
             maxSuggestions,
             includeDropdownRecommendations,
+            includeDropdownProductList,
+            includeFilteredTabs,
             includeCategories,
             filteredTabs: filteredTabs?.map(t => t.filter).join(','),
         };
@@ -11868,6 +11901,8 @@ const SuggestionSearchBar = forwardRef(function SuggestionSearchBar(props, ref)
             const response = await client.getSuggestions?.(searchQuery, {
                 hitsPerPage: maxSuggestions,
                 include_dropdown_recommendations: includeDropdownRecommendations,
+                include_dropdown_product_list: includeDropdownProductList,
+                include_filtered_tabs: includeFilteredTabs,
                 include_categories: includeCategories,
                 filtered_tabs: filteredTabs,
                 analytics_tags: analyticsTags,
@@ -11906,7 +11941,7 @@ const SuggestionSearchBar = forwardRef(function SuggestionSearchBar(props, ref)
         finally {
             setLoading(false);
         }
-    }, [client, minQueryLength, maxSuggestions, includeDropdownRecommendations, includeCategories, filteredTabs, analyticsTags, enableAnalytics, analytics, cache]);
+    }, [client, minQueryLength, maxSuggestions, includeDropdownRecommendations, includeDropdownProductList, includeFilteredTabs, includeCategories, filteredTabs, analyticsTags, enableAnalytics, analytics, cache]);
     // Parse API response - handles multiple response formats
     const parseAndSetData = useCallback((response) => {
         // Handle different response structures from the API/SDK