@seekora-ai/ui-sdk-react 0.0.0-stage-20260517092419

package/dist/components/FederatedDropdown.d.ts

@@ -0,0 +1,98 @@
+/**
+ * FederatedDropdown Component
+ *
+ * Full-featured federated search dropdown with:
+ * - Multi-column layout (suggestions + products)
+ * - Filtered tabs with product results
+ * - Popular brands
+ * - Trending products
+ * - Category navigation
+ * - Responsive design
+ * - Rich product cards
+ */
+import React from 'react';
+import type { SuggestionItem, ProductItem, FilteredTab, PopularBrand, QuerySuggestionsClassNames, QuerySuggestionsEventHandlers } from '@seekora-ai/ui-sdk-types';
+export interface FederatedDropdownProps extends QuerySuggestionsEventHandlers {
+    /** Current query string */
+    query: string;
+    /** Whether the dropdown is visible */
+    isOpen?: boolean;
+    /** Maximum suggestions to show */
+    maxSuggestions?: number;
+    /** Maximum products to show per section */
+    maxProducts?: number;
+    /** Maximum brands to show */
+    maxBrands?: number;
+    /** Minimum query length */
+    minQueryLength?: number;
+    /** Debounce delay in ms */
+    debounceMs?: number;
+    /** Filtered tabs configuration */
+    filteredTabs?: Array<{
+        id?: string;
+        label: string;
+        filter: string;
+    }>;
+    /** Show products section */
+    showProducts?: boolean;
+    /** Show brands section */
+    showBrands?: boolean;
+    /** Show filtered tabs */
+    showFilteredTabs?: boolean;
+    /** Show recent searches */
+    showRecentSearches?: boolean;
+    /** Layout mode */
+    layout?: 'side-by-side' | 'stacked' | 'full-width';
+    /** Products column width (for side-by-side) */
+    productsColumnWidth?: string;
+    /** Suggestions column width (for side-by-side) */
+    suggestionsColumnWidth?: string;
+    /** Show product prices */
+    showPrices?: boolean;
+    /** Currency symbol */
+    currencySymbol?: string;
+    /** Custom class names */
+    classNames?: QuerySuggestionsClassNames;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom product card renderer */
+    renderProduct?: (product: ProductItem, index: number) => React.ReactNode;
+    /** Custom suggestion renderer */
+    renderSuggestion?: (suggestion: SuggestionItem, index: number, isActive: boolean) => React.ReactNode;
+    /** Custom brand renderer */
+    renderBrand?: (brand: PopularBrand, index: number) => React.ReactNode;
+    /** Custom tab renderer */
+    renderTab?: (tab: FilteredTab, isActive: boolean) => React.ReactNode;
+    /** Header content */
+    header?: React.ReactNode;
+    /** Footer content */
+    footer?: React.ReactNode;
+    /** View all products link */
+    viewAllProductsLink?: string;
+    /** Width */
+    width?: string | number;
+    /** Max height */
+    maxHeight?: string | number;
+    /** Z-index */
+    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;
+}
+export interface FederatedDropdownRef {
+    getActiveIndex: () => number;
+    setActiveIndex: (index: number) => void;
+    selectActive: () => void;
+    navigateNext: () => void;
+    navigatePrevious: () => void;
+    getActiveTab: () => string | null;
+    setActiveTab: (tabId: string) => void;
+}
+export declare const FederatedDropdown: React.ForwardRefExoticComponent<FederatedDropdownProps & React.RefAttributes<FederatedDropdownRef>>;
+export default FederatedDropdown;
+//# sourceMappingURL=FederatedDropdown.d.ts.map

package/dist/components/FederatedDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FederatedDropdown.d.ts","sourceRoot":"","sources":["../../src/components/FederatedDropdown.tsx"],"names":[],"mappings":"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"}

package/dist/components/FederatedDropdown.js

@@ -0,0 +1,526 @@
+/**
+ * FederatedDropdown Component
+ *
+ * Full-featured federated search dropdown with:
+ * - Multi-column layout (suggestions + products)
+ * - Filtered tabs with product results
+ * - Popular brands
+ * - Trending products
+ * - Category navigation
+ * - Responsive design
+ * - Rich product cards
+ */
+import React, { useState, useRef, useCallback, useMemo, forwardRef, useImperativeHandle, } from 'react';
+import { useSearchContext } from './SearchProvider';
+import { useQuerySuggestionsEnhanced } from '../hooks/useQuerySuggestionsEnhanced';
+import { clsx } from 'clsx';
+// ============================================================================
+// Constants
+// ============================================================================
+const TRANSITIONS = {
+    fast: '150ms ease-in-out',
+    normal: '200ms ease-in-out',
+    slow: '300ms ease-in-out',
+};
+const BORDER_RADIUS = {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    full: 9999,
+};
+// ============================================================================
+// Styles
+// ============================================================================
+const styles = {
+    container: {
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `var(--seekora-border-radius-lg, ${BORDER_RADIUS.lg * 1.5}px)`,
+        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+        overflow: 'hidden',
+    },
+    header: {
+        padding: '12px 20px',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
+    },
+    content: {
+        display: 'flex',
+        overflowY: 'auto',
+    },
+    contentStacked: {
+        flexDirection: 'column',
+    },
+    suggestionsColumn: {
+        borderRight: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        overflowY: 'auto',
+    },
+    productsColumn: {
+        flex: 1,
+        overflowY: 'auto',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
+    },
+    section: {
+        padding: '12px 0',
+    },
+    sectionHeader: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        padding: '0 20px 8px',
+    },
+    sectionTitle: {
+        fontSize: '11px',
+        fontWeight: 700,
+        color: 'var(--seekora-text-tertiary, #9ca3af)',
+        textTransform: 'uppercase',
+        letterSpacing: '0.08em',
+        margin: 0,
+    },
+    viewAllLink: {
+        fontSize: '12px',
+        color: 'var(--seekora-primary, #3b82f6)',
+        textDecoration: 'none',
+        fontWeight: 600,
+        cursor: 'pointer',
+    },
+    suggestionItem: {
+        display: 'flex',
+        alignItems: 'center',
+        padding: '10px 20px',
+        cursor: 'pointer',
+        transition: `background-color ${TRANSITIONS.fast}`,
+        gap: '12px',
+    },
+    suggestionItemActive: {
+        backgroundColor: 'var(--seekora-bg-hover, #f3f4f6)',
+    },
+    suggestionIcon: {
+        width: '16px',
+        height: '16px',
+        color: 'var(--seekora-text-secondary, #6b7280)',
+        flexShrink: 0,
+    },
+    suggestionText: {
+        flex: 1,
+        fontSize: '14px',
+        color: 'var(--seekora-text-primary, inherit)',
+        fontWeight: 500,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
+    suggestionArrow: {
+        width: '16px',
+        height: '16px',
+        color: 'var(--seekora-text-tertiary, #d1d5db)',
+        opacity: 0,
+        transition: 'opacity 100ms ease',
+    },
+    suggestionArrowVisible: {
+        opacity: 1,
+    },
+    suggestionCount: {
+        fontSize: '12px',
+        color: 'var(--seekora-text-tertiary, #9ca3af)',
+    },
+    tabsContainer: {
+        display: 'flex',
+        gap: '4px',
+        padding: '12px 20px',
+        borderBottom: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        overflowX: 'auto',
+    },
+    tab: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        padding: '8px 16px',
+        fontSize: '13px',
+        fontWeight: 500,
+        color: 'var(--seekora-text-secondary, inherit)',
+        backgroundColor: 'transparent',
+        border: '1px solid transparent',
+        borderRadius: `${BORDER_RADIUS.full}px`,
+        cursor: 'pointer',
+        whiteSpace: 'nowrap',
+        transition: `all ${TRANSITIONS.fast}`,
+    },
+    tabActive: {
+        color: 'var(--seekora-primary, #3b82f6)',
+        backgroundColor: 'var(--seekora-primary-light, #eff6ff)',
+        borderColor: 'var(--seekora-primary, #3b82f6)',
+    },
+    tabCount: {
+        fontSize: '11px',
+        fontWeight: 600,
+        padding: '2px 6px',
+        borderRadius: `${BORDER_RADIUS.lg}px`,
+        backgroundColor: 'var(--seekora-bg-tertiary, rgba(255, 255, 255, 0.1))',
+    },
+    tabCountActive: {
+        backgroundColor: 'var(--seekora-primary, #3b82f6)',
+        color: 'white',
+    },
+    productsGrid: {
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
+        gap: '16px',
+        padding: '16px 20px',
+    },
+    productCard: {
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        borderRadius: `${BORDER_RADIUS.lg}px`,
+        overflow: 'hidden',
+        cursor: 'pointer',
+        transition: `transform ${TRANSITIONS.fast}, box-shadow ${TRANSITIONS.fast}`,
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+    },
+    productCardHover: {
+        transform: 'translateY(-2px)',
+        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
+    },
+    productImage: {
+        width: '100%',
+        aspectRatio: '1',
+        objectFit: 'cover',
+        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    },
+    productInfo: {
+        padding: '10px',
+    },
+    productTitle: {
+        fontSize: '13px',
+        fontWeight: 500,
+        color: 'var(--seekora-text-primary, inherit)',
+        margin: 0,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        display: '-webkit-box',
+        WebkitLineClamp: 2,
+        WebkitBoxOrient: 'vertical',
+        lineHeight: 1.3,
+    },
+    productPrice: {
+        fontSize: '14px',
+        fontWeight: 700,
+        color: 'var(--seekora-primary, #3b82f6)',
+        marginTop: '4px',
+    },
+    brandsGrid: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '8px',
+        padding: '8px 20px 16px',
+    },
+    brandChip: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '8px',
+        padding: '8px 14px',
+        fontSize: '13px',
+        fontWeight: 500,
+        color: 'var(--seekora-text-primary, inherit)',
+        backgroundColor: 'var(--seekora-bg-surface, transparent)',
+        border: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        borderRadius: `${BORDER_RADIUS.lg}px`,
+        cursor: 'pointer',
+        transition: `all ${TRANSITIONS.fast}`,
+    },
+    brandChipHover: {
+        borderColor: 'var(--seekora-primary, #3b82f6)',
+        backgroundColor: 'var(--seekora-primary-light, #eff6ff)',
+    },
+    brandLogo: {
+        width: '20px',
+        height: '20px',
+        borderRadius: `${BORDER_RADIUS.sm}px`,
+        objectFit: 'contain',
+        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    },
+    footer: {
+        padding: '12px 20px',
+        borderTop: '1px solid var(--seekora-border-color, rgba(128,128,128,0.2))',
+        backgroundColor: 'var(--seekora-bg-secondary, rgba(255, 255, 255, 0.1))',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontSize: '12px',
+        color: 'var(--seekora-text-secondary, inherit)',
+    },
+    emptyState: {
+        padding: '48px 20px',
+        textAlign: 'center',
+        color: 'var(--seekora-text-secondary, inherit)',
+    },
+    highlight: {
+        backgroundColor: 'var(--seekora-highlight-bg, #fef9c3)',
+        fontWeight: 600,
+        padding: '0 2px',
+        borderRadius: `${BORDER_RADIUS.sm / 2}px`,
+    },
+};
+// ============================================================================
+// Icons
+// ============================================================================
+const SearchIcon = ({ style }) => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { ...styles.suggestionIcon, ...style } },
+    React.createElement("path", { fillRule: "evenodd", d: "M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z", clipRule: "evenodd" })));
+const ClockIcon = ({ style }) => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { ...styles.suggestionIcon, ...style } },
+    React.createElement("path", { fillRule: "evenodd", d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z", clipRule: "evenodd" })));
+const ArrowRightIcon = ({ style }) => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { ...styles.suggestionArrow, ...style } },
+    React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" })));
+const TrendingIcon = ({ style }) => (React.createElement("svg", { viewBox: "0 0 20 20", fill: "currentColor", style: { width: 14, height: 14, color: '#10b981', ...style } },
+    React.createElement("path", { fillRule: "evenodd", d: "M12 7a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0V8.414l-4.293 4.293a1 1 0 01-1.414 0L8 10.414l-4.293 4.293a1 1 0 01-1.414-1.414l5-5a1 1 0 011.414 0L11 10.586 14.586 7H12z", clipRule: "evenodd" })));
+const ImagePlaceholder = () => (React.createElement("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", style: { width: '40%', height: '40%', color: '#d1d5db' } },
+    React.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2", strokeWidth: "2" }),
+    React.createElement("circle", { cx: "8.5", cy: "8.5", r: "1.5", strokeWidth: "2" }),
+    React.createElement("polyline", { points: "21 15 16 10 5 21", strokeWidth: "2" })));
+// ============================================================================
+// Component
+// ============================================================================
+export 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, 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);
+    const [activeTab, setActiveTab] = useState('all');
+    const [hoveredProduct, setHoveredProduct] = useState(null);
+    const [hoveredBrand, setHoveredBrand] = useState(null);
+    // Use enhanced hook
+    const { suggestions, loading, filteredTabs, trendingProducts, popularBrands, recentSearches, addRecentSearch, removeRecentSearch, hasContent, } = useQuerySuggestionsEnhanced({
+        client,
+        query,
+        enabled: isOpen,
+        debounceMs,
+        maxSuggestions,
+        minQueryLength,
+        includeDropdownRecommendations: includeDropdownRecommendationsProp,
+        includeCategories: includeCategoriesProp,
+        includeFacets: includeFacetsProp,
+        filteredTabs: tabsConfig,
+        analyticsTags,
+        enableRecentSearches: showRecentSearches,
+    });
+    // Get products for current tab
+    const currentTabProducts = useMemo(() => {
+        if (activeTab === 'all') {
+            // Combine trending products with first tab products
+            const allProducts = [...trendingProducts];
+            filteredTabs.forEach(tab => {
+                if (tab.products) {
+                    tab.products.forEach(product => {
+                        if (!allProducts.find(p => p.id === product.id)) {
+                            allProducts.push(product);
+                        }
+                    });
+                }
+            });
+            return allProducts.slice(0, maxProducts);
+        }
+        const tab = filteredTabs.find(t => t.id === activeTab);
+        return tab?.products?.slice(0, maxProducts) || [];
+    }, [activeTab, filteredTabs, trendingProducts, maxProducts]);
+    // All navigable items
+    const allItems = useMemo(() => {
+        const items = [];
+        // Recent searches (when no query)
+        if (query.length === 0 && showRecentSearches) {
+            recentSearches.slice(0, 5).forEach(search => {
+                items.push({ type: 'recent', data: search });
+            });
+        }
+        // Suggestions
+        suggestions.forEach(suggestion => {
+            items.push({ type: 'suggestion', data: suggestion });
+        });
+        return items;
+    }, [query, showRecentSearches, recentSearches, suggestions]);
+    // Navigation
+    const navigateNext = useCallback(() => {
+        setActiveIndex(prev => (prev < allItems.length - 1 ? prev + 1 : 0));
+    }, [allItems.length]);
+    const navigatePrevious = useCallback(() => {
+        setActiveIndex(prev => (prev > 0 ? prev - 1 : allItems.length - 1));
+    }, [allItems.length]);
+    const selectActive = useCallback(() => {
+        if (activeIndex < 0 || activeIndex >= allItems.length)
+            return;
+        const item = allItems[activeIndex];
+        if (item.type === 'recent') {
+            onRecentSearchClick?.(item.data);
+        }
+        else if (item.type === 'suggestion') {
+            onSuggestionSelect?.(item.data);
+            addRecentSearch(item.data.query);
+        }
+    }, [activeIndex, allItems, onRecentSearchClick, onSuggestionSelect, addRecentSearch]);
+    // Expose ref
+    useImperativeHandle(ref, () => ({
+        getActiveIndex: () => activeIndex,
+        setActiveIndex,
+        selectActive,
+        navigateNext,
+        navigatePrevious,
+        getActiveTab: () => activeTab,
+        setActiveTab,
+    }), [activeIndex, selectActive, navigateNext, navigatePrevious, activeTab]);
+    // Highlight query in text
+    const highlightQuery = (text) => {
+        if (!query)
+            return text;
+        const parts = text.split(new RegExp(`(${query})`, 'gi'));
+        return parts.map((part, i) => part.toLowerCase() === query.toLowerCase() ? (React.createElement("span", { key: i, style: styles.highlight }, part)) : part);
+    };
+    // Format price
+    const formatPrice = (price, currency) => {
+        if (price === undefined)
+            return '';
+        const symbol = currency || currencySymbol;
+        return `${symbol}${price.toLocaleString()}`;
+    };
+    // Handle tab change
+    const handleTabChange = (tabId) => {
+        setActiveTab(tabId);
+        const tab = filteredTabs.find(t => t.id === tabId);
+        if (tab) {
+            onTabSelect?.(tab);
+        }
+    };
+    if (!isOpen)
+        return null;
+    const showTabs = showFilteredTabs && (filteredTabs.length > 0 || trendingProducts.length > 0);
+    const showProductsSection = showProducts && currentTabProducts.length > 0;
+    const showBrandsSection = showBrands && popularBrands.length > 0;
+    const showRecent = showRecentSearches && query.length === 0 && recentSearches.length > 0;
+    const showSuggestions = suggestions.length > 0;
+    const isStackedLayout = layout === 'stacked' || layout === 'full-width';
+    return (React.createElement("div", { ref: containerRef, role: "listbox", "aria-label": "Search suggestions and products", className: clsx('seekora-federated-dropdown', classNames.root, classNames.container), style: {
+            position: 'absolute',
+            width,
+            zIndex,
+            ...styles.container,
+            ...style,
+        } },
+        header && React.createElement("div", { style: styles.header }, header),
+        showTabs && (React.createElement("div", { style: styles.tabsContainer, className: classNames.tabsList },
+            React.createElement("button", { style: {
+                    ...styles.tab,
+                    ...(activeTab === 'all' ? styles.tabActive : {}),
+                }, onClick: () => handleTabChange('all'), className: clsx(classNames.tabItem, activeTab === 'all' && classNames.tabActive) },
+                "All Results",
+                trendingProducts.length > 0 && (React.createElement("span", { style: {
+                        ...styles.tabCount,
+                        ...(activeTab === 'all' ? styles.tabCountActive : {}),
+                    } },
+                    trendingProducts.length,
+                    "+"))),
+            filteredTabs.map((tab) => (renderTab ? renderTab(tab, activeTab === tab.id) : (React.createElement("button", { key: tab.id, style: {
+                    ...styles.tab,
+                    ...(activeTab === tab.id ? styles.tabActive : {}),
+                }, onClick: () => handleTabChange(tab.id), className: clsx(classNames.tabItem, activeTab === tab.id && classNames.tabActive) },
+                tab.label,
+                tab.nb_hits !== undefined && (React.createElement("span", { style: {
+                        ...styles.tabCount,
+                        ...(activeTab === tab.id ? styles.tabCountActive : {}),
+                    } }, tab.nb_hits)))))))),
+        React.createElement("div", { style: {
+                ...styles.content,
+                ...(isStackedLayout ? styles.contentStacked : {}),
+                maxHeight,
+            } },
+            React.createElement("div", { style: {
+                    ...styles.suggestionsColumn,
+                    width: isStackedLayout ? '100%' : suggestionsColumnWidth,
+                    minWidth: isStackedLayout ? undefined : '280px',
+                    borderRight: isStackedLayout ? 'none' : styles.suggestionsColumn.borderRight,
+                } },
+                showRecent && (React.createElement("div", { style: styles.section, className: classNames.recentSearches },
+                    React.createElement("div", { style: styles.sectionHeader },
+                        React.createElement("h3", { style: styles.sectionTitle }, "Recent Searches")),
+                    recentSearches.slice(0, 5).map((search, index) => {
+                        const isActive = activeIndex === index;
+                        return (React.createElement("div", { key: `recent-${search.query}`, role: "option", "aria-selected": isActive, style: {
+                                ...styles.suggestionItem,
+                                ...(isActive ? styles.suggestionItemActive : {}),
+                            }, onClick: () => onRecentSearchClick?.(search), onMouseEnter: () => setActiveIndex(index), className: clsx(classNames.recentItem, isActive && classNames.suggestionItemActive) },
+                            React.createElement(ClockIcon, null),
+                            React.createElement("span", { style: styles.suggestionText }, search.query),
+                            React.createElement(ArrowRightIcon, { style: isActive ? styles.suggestionArrowVisible : {} })));
+                    }))),
+                showSuggestions && (React.createElement("div", { style: styles.section, className: classNames.suggestionsList },
+                    React.createElement("div", { style: styles.sectionHeader },
+                        React.createElement("h3", { style: styles.sectionTitle }, query ? 'Suggestions' : 'Popular Searches')),
+                    suggestions.slice(0, maxSuggestions).map((suggestion, index) => {
+                        const itemIndex = showRecent ? recentSearches.length + index : index;
+                        const isActive = activeIndex === itemIndex;
+                        return renderSuggestion ? renderSuggestion(suggestion, index, isActive) : (React.createElement("div", { key: suggestion.objectID || `suggestion-${index}`, role: "option", "aria-selected": isActive, style: {
+                                ...styles.suggestionItem,
+                                ...(isActive ? styles.suggestionItemActive : {}),
+                            }, onClick: () => {
+                                onSuggestionSelect?.(suggestion);
+                                addRecentSearch(suggestion.query);
+                            }, onMouseEnter: () => setActiveIndex(itemIndex), className: clsx(classNames.suggestionItem, isActive && classNames.suggestionItemActive) },
+                            React.createElement(SearchIcon, null),
+                            React.createElement("span", { style: styles.suggestionText }, highlightQuery(suggestion.query)),
+                            suggestion.count !== undefined && (React.createElement("span", { style: styles.suggestionCount }, suggestion.count.toLocaleString())),
+                            React.createElement(ArrowRightIcon, { style: isActive ? styles.suggestionArrowVisible : {} })));
+                    }))),
+                showBrandsSection && (React.createElement("div", { style: styles.section, className: classNames.brandsList },
+                    React.createElement("div", { style: styles.sectionHeader },
+                        React.createElement("h3", { style: styles.sectionTitle }, "Popular Brands")),
+                    React.createElement("div", { style: styles.brandsGrid }, popularBrands.slice(0, maxBrands).map((brand, index) => (renderBrand ? renderBrand(brand, index) : (React.createElement("button", { key: `brand-${brand.name}`, style: {
+                            ...styles.brandChip,
+                            ...(hoveredBrand === brand.name ? styles.brandChipHover : {}),
+                        }, onClick: () => onBrandClick?.(brand), onMouseEnter: () => setHoveredBrand(brand.name), onMouseLeave: () => setHoveredBrand(null), className: classNames.brandItem },
+                        brand.logo && (React.createElement("img", { src: brand.logo, alt: brand.name, style: styles.brandLogo, onError: (e) => {
+                                e.target.style.display = 'none';
+                            } })),
+                        React.createElement("span", null, brand.name))))))))),
+            showProductsSection && !isStackedLayout && (React.createElement("div", { style: {
+                    ...styles.productsColumn,
+                    width: productsColumnWidth,
+                } },
+                React.createElement("div", { style: styles.section },
+                    React.createElement("div", { style: styles.sectionHeader },
+                        React.createElement("h3", { style: styles.sectionTitle }, activeTab === 'all' ? 'Trending Products' : `Products in ${filteredTabs.find(t => t.id === activeTab)?.label || activeTab}`),
+                        viewAllProductsLink && (React.createElement("a", { href: viewAllProductsLink, style: styles.viewAllLink, onClick: (e) => {
+                                e.preventDefault();
+                                onViewAllClick?.('products');
+                            } }, "View all"))),
+                    React.createElement("div", { style: styles.productsGrid, className: classNames.productsList }, currentTabProducts.map((product, index) => (renderProduct ? renderProduct(product, index) : (React.createElement("div", { key: product.id || product.objectID, style: {
+                            ...styles.productCard,
+                            ...(hoveredProduct === product.id ? styles.productCardHover : {}),
+                        }, onClick: () => onProductClick?.(product), onMouseEnter: () => setHoveredProduct(product.id), onMouseLeave: () => setHoveredProduct(null), className: classNames.productItem },
+                        product.image ? (React.createElement("img", { src: product.image, alt: product.title || product.name || '', style: styles.productImage, onError: (e) => {
+                                e.target.style.display = 'none';
+                            } })) : (React.createElement("div", { style: {
+                                ...styles.productImage,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            } },
+                            React.createElement(ImagePlaceholder, null))),
+                        React.createElement("div", { style: styles.productInfo },
+                            React.createElement("h4", { style: styles.productTitle }, product.title || product.name),
+                            showPrices && product.price !== undefined && (React.createElement("p", { style: styles.productPrice }, formatPrice(product.price, product.currency))))))))))))),
+        footer ? (React.createElement("div", { style: styles.footer }, footer)) : (React.createElement("div", { style: styles.footer },
+            React.createElement("span", null, "Press \u21B5 to search, \u2191\u2193 to navigate"),
+            query && (React.createElement("button", { style: { ...styles.viewAllLink, background: 'none', border: 'none' }, onClick: () => onViewAllClick?.('suggestions') },
+                "See all results for \"",
+                query,
+                "\"")))),
+        React.createElement("style", null, `
+          .seekora-federated-dropdown mark {
+            background-color: var(--seekora-highlight-bg, #fef9c3);
+            font-weight: 600;
+            border-radius: 2px;
+            padding: 0 2px;
+          }
+          .seekora-federated-dropdown [role="option"]:hover svg:last-child {
+            opacity: 1;
+          }
+        `)));
+});
+export default FederatedDropdown;