@seekora-ai/ui-sdk-react 1.0.0

package/dist/components/FederatedDropdown.js

@@ -0,0 +1,510 @@
+/**
+ * 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';
+// ============================================================================
+// Styles
+// ============================================================================
+const styles = {
+    container: {
+        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
+        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRadius: 'var(--seekora-border-radius-lg, 12px)',
+        boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+        overflow: 'hidden',
+    },
+    header: {
+        padding: '12px 20px',
+        borderBottom: '1px solid var(--seekora-border-color, #e5e7eb)',
+        backgroundColor: 'var(--seekora-bg-secondary, #f9fafb)',
+    },
+    content: {
+        display: 'flex',
+        overflowY: 'auto',
+    },
+    contentStacked: {
+        flexDirection: 'column',
+    },
+    suggestionsColumn: {
+        borderRight: '1px solid var(--seekora-border-color, #e5e7eb)',
+        overflowY: 'auto',
+    },
+    productsColumn: {
+        flex: 1,
+        overflowY: 'auto',
+        backgroundColor: 'var(--seekora-bg-secondary, #fafafa)',
+    },
+    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 100ms ease',
+        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, #111827)',
+        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, #e5e7eb)',
+        overflowX: 'auto',
+    },
+    tab: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '6px',
+        padding: '8px 16px',
+        fontSize: '13px',
+        fontWeight: 500,
+        color: 'var(--seekora-text-secondary, #6b7280)',
+        backgroundColor: 'transparent',
+        border: '1px solid transparent',
+        borderRadius: '20px',
+        cursor: 'pointer',
+        whiteSpace: 'nowrap',
+        transition: 'all 150ms ease',
+    },
+    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: '10px',
+        backgroundColor: 'var(--seekora-bg-tertiary, #e5e7eb)',
+    },
+    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, #ffffff)',
+        borderRadius: '8px',
+        overflow: 'hidden',
+        cursor: 'pointer',
+        transition: 'transform 150ms ease, box-shadow 150ms ease',
+        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+    },
+    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, #111827)',
+        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, #374151)',
+        backgroundColor: 'var(--seekora-bg-surface, #ffffff)',
+        border: '1px solid var(--seekora-border-color, #e5e7eb)',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        transition: 'all 150ms ease',
+    },
+    brandChipHover: {
+        borderColor: 'var(--seekora-primary, #3b82f6)',
+        backgroundColor: 'var(--seekora-primary-light, #eff6ff)',
+    },
+    brandLogo: {
+        width: '20px',
+        height: '20px',
+        borderRadius: '4px',
+        objectFit: 'contain',
+        backgroundColor: 'var(--seekora-bg-secondary, #f3f4f6)',
+    },
+    footer: {
+        padding: '12px 20px',
+        borderTop: '1px solid var(--seekora-border-color, #e5e7eb)',
+        backgroundColor: 'var(--seekora-bg-secondary, #f9fafb)',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        fontSize: '12px',
+        color: 'var(--seekora-text-secondary, #6b7280)',
+    },
+    emptyState: {
+        padding: '48px 20px',
+        textAlign: 'center',
+        color: 'var(--seekora-text-secondary, #6b7280)',
+    },
+    highlight: {
+        backgroundColor: 'var(--seekora-highlight-bg, #fef9c3)',
+        fontWeight: 600,
+        padding: '0 2px',
+        borderRadius: '2px',
+    },
+};
+// ============================================================================
+// 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, 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: true,
+        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;

package/dist/components/HierarchicalMenu.d.ts

@@ -0,0 +1,55 @@
+/**
+ * HierarchicalMenu Component
+ *
+ * Displays a hierarchical menu for nested category navigation
+ * Example: Electronics > Phones > iPhone
+ */
+import React from 'react';
+export interface HierarchicalMenuItem {
+    label: string;
+    value: string;
+    count?: number;
+    isRefined?: boolean;
+    data?: HierarchicalMenuItem[];
+}
+export interface HierarchicalMenuTheme {
+    root?: string;
+    list?: string;
+    item?: string;
+    itemSelected?: string;
+    itemParent?: string;
+    link?: string;
+    label?: string;
+    count?: string;
+    showMore?: string;
+}
+export interface HierarchicalMenuProps {
+    /** Attributes for each level of hierarchy (e.g., ['category.lvl0', 'category.lvl1', 'category.lvl2']) */
+    attributes: string[];
+    /** Separator used in the hierarchical values (default: ' > ') */
+    separator?: string;
+    /** Maximum number of items to show per level (default: 10) */
+    limit?: number;
+    /** Show "Show more" button (default: true) */
+    showMore?: boolean;
+    /** Maximum items when "Show more" is clicked (default: 20) */
+    showMoreLimit?: number;
+    /** Custom render function for items */
+    renderItem?: (item: HierarchicalMenuItem, level: number) => React.ReactNode;
+    /** Callback when an item is selected */
+    onSelect?: (value: string, level: number) => void;
+    /** Custom className */
+    className?: string;
+    /** Custom styles */
+    style?: React.CSSProperties;
+    /** Custom theme */
+    theme?: HierarchicalMenuTheme;
+    /** Root path (for pre-selecting a category) */
+    rootPath?: string | null;
+    /** Sort by (default: 'name') */
+    sortBy?: 'name' | 'count' | 'isRefined';
+    /** Custom facet data (if not using StateManager) */
+    items?: HierarchicalMenuItem[];
+}
+export declare const HierarchicalMenu: React.FC<HierarchicalMenuProps>;
+//# sourceMappingURL=HierarchicalMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HierarchicalMenu.d.ts","sourceRoot":"","sources":["../../src/components/HierarchicalMenu.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAK9D,MAAM,WAAW,oBAAoB;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAC/B;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,qBAAqB;IACpC,yGAAyG;IACzG,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,iEAAiE;IACjE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,8DAA8D;IAC9D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,uCAAuC;IACvC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC5E,wCAAwC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,CAAC;IACxC,oDAAoD;IACpD,KAAK,CAAC,EAAE,oBAAoB,EAAE,CAAC;CAChC;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA2P5D,CAAC"}