@seekora-ai/ui-sdk-react 0.2.12 → 0.2.14

package/dist/components/HierarchicalMenu.js

@@ -4,7 +4,7 @@
  * Displays a hierarchical menu for nested category navigation
  * Example: Electronics > Phones > iPhone
  */
-import React, { useState, useMemo, useCallback } from 'react';
+import React, { useState, useMemo, useCallback, useRef } from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
@@ -113,6 +113,112 @@ export const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, sh
     const toggleShowMore = (level) => {
         setExpanded(prev => ({ ...prev, [level]: !prev[level] }));
     };
+    const containerRef = useRef(null);
+    // Collect all visible treeitem elements within the container
+    const getVisibleTreeItems = useCallback(() => {
+        if (!containerRef.current)
+            return [];
+        return Array.from(containerRef.current.querySelectorAll('[role="treeitem"]'));
+    }, []);
+    // Keyboard navigation handler for the tree
+    const handleKeyDown = useCallback((e) => {
+        const items = getVisibleTreeItems();
+        if (items.length === 0)
+            return;
+        const activeElement = document.activeElement;
+        // Find the treeitem that is or contains the active element
+        const currentItem = items.find(item => item === activeElement || item.contains(activeElement));
+        const currentIndex = currentItem ? items.indexOf(currentItem) : -1;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+                const button = items[nextIndex].querySelector('button');
+                if (button)
+                    button.focus();
+                else
+                    items[nextIndex].focus();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prevIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+                const button = items[prevIndex].querySelector('button');
+                if (button)
+                    button.focus();
+                else
+                    items[prevIndex].focus();
+                break;
+            }
+            case 'ArrowRight': {
+                if (!currentItem)
+                    break;
+                const isExpanded = currentItem.getAttribute('aria-expanded');
+                if (isExpanded === 'false') {
+                    // Expand (select) this item
+                    e.preventDefault();
+                    const button = currentItem.querySelector('button');
+                    if (button)
+                        button.click();
+                }
+                else if (isExpanded === 'true') {
+                    // Move to first child
+                    e.preventDefault();
+                    const childList = currentItem.querySelector('[role="group"]');
+                    if (childList) {
+                        const firstChild = childList.querySelector('[role="treeitem"]');
+                        if (firstChild) {
+                            const button = firstChild.querySelector('button');
+                            if (button)
+                                button.focus();
+                            else
+                                firstChild.focus();
+                        }
+                    }
+                }
+                break;
+            }
+            case 'ArrowLeft': {
+                if (!currentItem)
+                    break;
+                const isExpanded = currentItem.getAttribute('aria-expanded');
+                if (isExpanded === 'true') {
+                    // Collapse this item
+                    e.preventDefault();
+                    const button = currentItem.querySelector('button');
+                    if (button)
+                        button.click();
+                }
+                else {
+                    // Move focus to parent treeitem
+                    e.preventDefault();
+                    const parentGroup = currentItem.closest('[role="group"]');
+                    if (parentGroup) {
+                        const parentItem = parentGroup.closest('[role="treeitem"]');
+                        if (parentItem) {
+                            const button = parentItem.querySelector(':scope > button');
+                            if (button)
+                                button.focus();
+                            else
+                                parentItem.focus();
+                        }
+                    }
+                }
+                break;
+            }
+            case 'Enter': {
+                if (!currentItem)
+                    break;
+                e.preventDefault();
+                const button = currentItem.querySelector('button');
+                if (button)
+                    button.click();
+                break;
+            }
+            default:
+                break;
+        }
+    }, [getVisibleTreeItems]);
     // Render a level of the hierarchy
     const renderLevel = (items, level) => {
         if (!items || items.length === 0)
@@ -121,12 +227,14 @@ export const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, sh
         const displayLimit = isExpanded ? showMoreLimit : limit;
         const displayItems = items.slice(0, displayLimit);
         const hasMore = items.length > displayLimit;
-        return (React.createElement("ul", { className: hierarchicalTheme.list, style: {
+        return (React.createElement("ul", { role: level === 0 ? 'tree' : 'group', className: hierarchicalTheme.list, style: {
                 listStyle: 'none',
                 margin: 0,
                 padding: level > 0 ? `0 0 0 ${theme.spacing.medium}` : 0,
             } },
-            displayItems.map((item, index) => (React.createElement("li", { key: item.value, className: clsx(hierarchicalTheme.item, item.isRefined && hierarchicalTheme.itemSelected, item.data && item.data.length > 0 && hierarchicalTheme.itemParent), style: {
+            displayItems.map((item, index) => (React.createElement("li", { key: item.value, role: "treeitem", ...(item.data && item.data.length > 0
+                    ? { 'aria-expanded': !!item.isRefined }
+                    : {}), className: clsx(hierarchicalTheme.item, item.isRefined && hierarchicalTheme.itemSelected, item.data && item.data.length > 0 && hierarchicalTheme.itemParent), style: {
                     padding: `${theme.spacing.small} 0`,
                 } }, renderItem ? (renderItem(item, level)) : (React.createElement(React.Fragment, null,
                 React.createElement("button", { type: "button", onClick: () => handleItemClick(item, level), className: hierarchicalTheme.link, style: {
@@ -164,5 +272,5 @@ export const HierarchicalMenu = ({ attributes, separator = ' > ', limit = 10, sh
     if (processedItems.length === 0) {
         return null;
     }
-    return (React.createElement("div", { className: clsx(hierarchicalTheme.root, className), style: style }, renderLevel(processedItems, 0)));
+    return (React.createElement("div", { ref: containerRef, className: clsx(hierarchicalTheme.root, className), style: style, tabIndex: 0, onKeyDown: handleKeyDown }, renderLevel(processedItems, 0)));
 };

package/dist/components/InfiniteHits.d.ts

@@ -21,6 +21,8 @@ export interface InfiniteHitsProps {
     renderHit?: (hit: ResultItem, index: number) => React.ReactNode;
     /** Custom render for empty state */
     renderEmpty?: () => React.ReactNode;
+    /** Show initial loading when fetching and no hits yet (default false: no loading screen) */
+    showInitialLoading?: boolean;
     /** Custom render for loading state */
     renderLoading?: () => React.ReactNode;
     /** Custom render for "Show More" button */

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

@@ -1 +1 @@
-{"version":3,"file":"InfiniteHits.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteHits.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;QACpB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAoSpD,CAAC"}
+{"version":3,"file":"InfiniteHits.d.ts","sourceRoot":"","sources":["../../src/components/InfiniteHits.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAA4D,MAAM,OAAO,CAAC;AAIjF,OAAO,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAEzE,MAAM,WAAW,iBAAiB;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAChE,oCAAoC;IACpC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,4FAA4F;IAC5F,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,2CAA2C;IAC3C,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE;QACvB,SAAS,EAAE,OAAO,CAAC;QACnB,UAAU,EAAE,OAAO,CAAC;QACpB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,KAAK,KAAK,CAAC,SAAS,CAAC;IACtB,6DAA6D;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gFAAgF;IAChF,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wDAAwD;IACxD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qCAAqC;IACrC,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtD,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,8DAA8D;IAC9D,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwSpD,CAAC"}

package/dist/components/InfiniteHits.js

@@ -8,7 +8,7 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react'
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
-export const InfiniteHits = ({ renderHit, renderEmpty, renderLoading, renderShowMore, showMoreButton = true, useInfiniteScroll = false, scrollThreshold = 0.1, fieldMapping, showMoreLabel = 'Show more', loadingLabel = 'Loading...', onHitClick, className, style, theme: customTheme, syncWithState = true, }) => {
+export const InfiniteHits = ({ renderHit, renderEmpty, showInitialLoading = false, renderLoading, renderShowMore, showMoreButton = true, useInfiniteScroll = false, scrollThreshold = 0.1, fieldMapping, showMoreLabel = 'Show more', loadingLabel = 'Loading...', onHitClick, className, style, theme: customTheme, syncWithState = true, }) => {
     const { theme, stateManager } = useSearchContext();
     const { results, loading, currentPage, setPage } = useSearchState();
     const infiniteHitsTheme = customTheme || {};
@@ -163,10 +163,13 @@ export const InfiniteHits = ({ renderHit, renderEmpty, renderLoading, renderShow
             cursor: isLastPage || isLoadingMore ? 'not-allowed' : 'pointer',
             transition: theme.transitions?.fast || '150ms ease-in-out',
         } }, isLoadingMore ? loadingLabel : isLastPage ? 'No more results' : showMoreLabel));
-    // Initial loading state
-    if (loading && accumulatedHits.length === 0) {
+    // Initial loading state (only when showInitialLoading: default no loading screen)
+    if (loading && accumulatedHits.length === 0 && showInitialLoading) {
         return (React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style }, renderLoading ? renderLoading() : defaultRenderLoading()));
     }
+    if (loading && accumulatedHits.length === 0) {
+        return React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style });
+    }
     // Empty state
     if (!loading && accumulatedHits.length === 0) {
         return (React.createElement("div", { className: clsx(infiniteHitsTheme.root, className), style: style }, renderEmpty ? renderEmpty() : defaultRenderEmpty()));

package/dist/components/Pagination.d.ts

@@ -1,7 +1,16 @@
 /**
  * Pagination Component
  *
- * Displays pagination controls for search results
+ * Displays pagination controls for search results.
+ * Supports three display variants: numbered, load-more, and simple.
+ *
+ * CSS Variables (applied to the container element):
+ *   --seekora-pagination-bg
+ *   --seekora-pagination-color
+ *   --seekora-pagination-active-bg
+ *   --seekora-pagination-active-color
+ *   --seekora-pagination-border
+ *   --seekora-pagination-radius
  */
 import React from 'react';
 import type { SearchResponse } from '@seekora-ai/search-sdk';
@@ -13,6 +22,18 @@ export interface PaginationTheme {
     itemDisabled?: string;
     link?: string;
     ellipsis?: string;
+    /** Class for the Load More button */
+    loadMoreButton?: string;
+    /** Class for the Load More descriptive text (e.g. "X remaining") */
+    loadMoreText?: string;
+    /** Class for the simple variant outer container */
+    simpleContainer?: string;
+    /** Class for the "Page X of Y" text in the simple variant */
+    simpleText?: string;
+    /** Class for Previous/Next buttons in the simple variant */
+    simpleButton?: string;
+    /** Class for the "Page X of Y" info text (usable in any variant) */
+    pageInfo?: string;
 }
 export interface PaginationProps {
     /** Search results response */
@@ -39,6 +60,31 @@ export interface PaginationProps {
     style?: React.CSSProperties;
     /** Custom theme */
     theme?: PaginationTheme;
+    /**
+     * Display variant.
+     * - 'numbered' (default): numbered page buttons with prev/next
+     * - 'load-more': single "Load More" button
+     * - 'simple': Previous / Next buttons with "Page X of Y" text
+     */
+    variant?: 'numbered' | 'load-more' | 'simple';
+    /** Label for the Load More button (default: "Load More") */
+    loadMoreText?: string;
+    /**
+     * Button / text sizing.
+     * - 'small': compact
+     * - 'medium' (default): standard
+     * - 'large': spacious
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Show "Page X of Y" text.
+     * Defaults to false for numbered, true for simple.
+     */
+    showPageInfo?: boolean;
+    /** Label for the Previous button (default: "Previous") */
+    previousLabel?: string;
+    /** Label for the Next button (default: "Next") */
+    nextLabel?: string;
 }
 export declare const Pagination: React.FC<PaginationProps>;
 //# sourceMappingURL=Pagination.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7F,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA0OhD,CAAC"}
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../src/components/Pagination.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oEAAoE;IACpE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,mDAAmD;IACnD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,6DAA6D;IAC7D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,8BAA8B;IAC9B,OAAO,CAAC,EAAE,cAAc,GAAG,IAAI,CAAC;IAChC,sCAAsC;IACtC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,4BAA4B;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,iCAAiC;IACjC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6CAA6C;IAC7C,gBAAgB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,UAAU,EAAE,OAAO,KAAK,KAAK,CAAC,SAAS,CAAC;IAC7F,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,QAAQ,CAAC;IAC9C,4DAA4D;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,0DAA0D;IAC1D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kDAAkD;IAClD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AASD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkbhD,CAAC"}

package/dist/components/Pagination.js

@@ -1,13 +1,28 @@
 /**
  * Pagination Component
  *
- * Displays pagination controls for search results
+ * Displays pagination controls for search results.
+ * Supports three display variants: numbered, load-more, and simple.
+ *
+ * CSS Variables (applied to the container element):
+ *   --seekora-pagination-bg
+ *   --seekora-pagination-color
+ *   --seekora-pagination-active-bg
+ *   --seekora-pagination-active-color
+ *   --seekora-pagination-border
+ *   --seekora-pagination-radius
  */
 import React from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useSearchState } from '../hooks/useSearchState';
 import { clsx } from 'clsx';
-export const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, }) => {
+/** Size-specific style tokens */
+const SIZE_TOKENS = {
+    small: { paddingKey: 'small', fontSizeKey: 'small', minWidth: '32px' },
+    medium: { paddingKey: 'small', fontSizeKey: 'medium', minWidth: '40px' },
+    large: { paddingKey: 'medium', fontSizeKey: 'large', minWidth: '48px' },
+};
+export const Pagination = ({ results: resultsProp, currentPage: currentPageProp, itemsPerPage: itemsPerPageProp, totalPages: totalPagesProp, onPageChange, maxPages = 7, showFirstLast = true, showPrevNext = true, renderPageButton, className, style, theme: customTheme, variant = 'numbered', loadMoreText = 'Load More', size = 'medium', showPageInfo, previousLabel = 'Previous', nextLabel = 'Next', }) => {
     const { theme } = useSearchContext();
     const { results: stateResults, currentPage: stateCurrentPage, setPage } = useSearchState();
     const paginationTheme = customTheme || {};
@@ -30,6 +45,19 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
         || res?.data?.total_pages
         || res?.data?.data?.total_pages
         || Math.ceil(totalResults / itemsPerPage);
+    // Resolve whether to show page info text
+    const resolvedShowPageInfo = showPageInfo !== undefined
+        ? showPageInfo
+        : variant === 'simple';
+    // Size tokens
+    const sizeTokens = SIZE_TOKENS[size];
+    // CSS variable aware helpers — allow overrides via custom properties
+    const cssVarBg = 'var(--seekora-pagination-bg, ' + theme.colors.background + ')';
+    const cssVarColor = 'var(--seekora-pagination-color, ' + theme.colors.text + ')';
+    const cssVarActiveBg = 'var(--seekora-pagination-active-bg, ' + theme.colors.primary + ')';
+    const cssVarActiveColor = 'var(--seekora-pagination-active-color, #fff)';
+    const cssVarBorder = 'var(--seekora-pagination-border, ' + theme.colors.border + ')';
+    const cssVarRadius = 'var(--seekora-pagination-radius, ' + (typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium) + ')';
     const handlePageChange = (page) => {
         if (page < 1 || page > totalPages || page === currentPage)
             return;
@@ -40,22 +68,26 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
             onPageChange(page);
         }
     };
-    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => !isDisabled && handlePageChange(page), className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled && paginationTheme.itemDisabled), style: {
-            padding: theme.spacing.small,
+    const defaultRenderPageButton = (page, isActive, isDisabled) => (React.createElement("button", { type: "button", disabled: isDisabled, onClick: () => !isDisabled && handlePageChange(page), "aria-current": isActive ? 'page' : undefined, "aria-label": `Page ${page}`, className: clsx(paginationTheme.item, isActive && paginationTheme.itemActive, isDisabled && paginationTheme.itemDisabled), style: {
+            padding: theme.spacing[sizeTokens.paddingKey],
             margin: `0 ${theme.spacing.small}`,
-            border: `1px solid ${theme.colors.border}`,
-            borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-            backgroundColor: isActive ? theme.colors.primary : theme.colors.background,
-            color: isActive ? '#fff' : theme.colors.text,
+            border: `1px solid ${cssVarBorder}`,
+            borderRadius: cssVarRadius,
+            backgroundColor: isActive ? cssVarActiveBg : cssVarBg,
+            color: isActive ? cssVarActiveColor : cssVarColor,
             cursor: isDisabled ? 'not-allowed' : 'pointer',
             opacity: isDisabled ? 0.5 : 1,
-            fontSize: theme.typography.fontSize.medium,
-            minWidth: '40px',
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            minWidth: sizeTokens.minWidth,
             ...(isActive && {
                 fontWeight: 'bold',
             }),
         } }, page));
-    if (totalPages <= 1) {
+    if (totalPages <= 1 && variant !== 'load-more') {
+        return null;
+    }
+    // For load-more, hide when there are no more pages to load
+    if (variant === 'load-more' && currentPage >= totalPages) {
         return null;
     }
     // Calculate page range to display
@@ -88,6 +120,94 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
         }
         return pages;
     };
+    // ── Page info element ──────────────────────────────────────────────
+    const pageInfoElement = resolvedShowPageInfo ? (React.createElement("span", { className: clsx(paginationTheme.pageInfo), style: {
+            fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+            color: cssVarColor,
+            padding: `0 ${theme.spacing.small}`,
+            whiteSpace: 'nowrap',
+        }, "aria-live": "polite" },
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages)) : null;
+    // ── Load More variant ──────────────────────────────────────────────
+    if (variant === 'load-more') {
+        const remaining = Math.max(0, totalResults - currentPage * itemsPerPage);
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                gap: theme.spacing.small,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.loadMoreButton), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.large}`,
+                    border: 'none',
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarActiveBg,
+                    color: cssVarActiveColor,
+                    cursor: 'pointer',
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    fontWeight: theme.typography.fontWeight?.medium ?? 500,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                    minWidth: sizeTokens.minWidth,
+                }, "aria-label": remaining > 0 ? `${loadMoreText} (${remaining} remaining)` : loadMoreText },
+                loadMoreText,
+                remaining > 0 && (React.createElement("span", { className: clsx(paginationTheme.loadMoreText), style: {
+                        marginLeft: theme.spacing.small,
+                        opacity: 0.85,
+                        fontSize: theme.typography.fontSize.small,
+                    } },
+                    "(",
+                    remaining,
+                    " remaining)"))),
+            pageInfoElement));
+    }
+    // ── Simple variant ─────────────────────────────────────────────────
+    if (variant === 'simple') {
+        return (React.createElement("nav", { className: clsx(paginationTheme.container, paginationTheme.simpleContainer, className), style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: theme.spacing.medium,
+                ...style,
+            }, "aria-label": "Pagination" },
+            React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.simpleButton, currentPage === 1 && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === 1 ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Previous page" }, previousLabel),
+            React.createElement("span", { className: clsx(paginationTheme.simpleText, paginationTheme.pageInfo), style: {
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    color: cssVarColor,
+                    whiteSpace: 'nowrap',
+                }, "aria-live": "polite" },
+                "Page ",
+                currentPage,
+                " of ",
+                totalPages),
+            React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.simpleButton, currentPage === totalPages && paginationTheme.itemDisabled), style: {
+                    padding: `${theme.spacing[sizeTokens.paddingKey]} ${theme.spacing.medium}`,
+                    border: `1px solid ${cssVarBorder}`,
+                    borderRadius: cssVarRadius,
+                    backgroundColor: cssVarBg,
+                    color: cssVarColor,
+                    cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
+                    opacity: currentPage === totalPages ? 0.5 : 1,
+                    fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    minWidth: sizeTokens.minWidth,
+                    transition: theme.transitions?.fast ?? '150ms ease-in-out',
+                }, "aria-label": "Next page" }, nextLabel)));
+    }
+    // ── Numbered variant (default — original behavior) ─────────────────
     const pageNumbers = getPageNumbers();
     return (React.createElement("nav", { className: clsx(paginationTheme.container, className), style: style, "aria-label": "Pagination" },
         React.createElement("ul", { className: paginationTheme.list, style: {
@@ -98,27 +218,44 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
                 padding: 0,
                 margin: 0,
                 flexWrap: 'wrap',
+            }, tabIndex: 0, onKeyDown: (e) => {
+                if (e.key === 'ArrowLeft') {
+                    e.preventDefault();
+                    handlePageChange(currentPage - 1);
+                }
+                else if (e.key === 'ArrowRight') {
+                    e.preventDefault();
+                    handlePageChange(currentPage + 1);
+                }
+                else if (e.key === 'Home') {
+                    e.preventDefault();
+                    handlePageChange(1);
+                }
+                else if (e.key === 'End') {
+                    e.preventDefault();
+                    handlePageChange(totalPages);
+                }
             } },
             showPrevNext && (React.createElement("li", null,
                 React.createElement("button", { type: "button", disabled: currentPage === 1, onClick: () => handlePageChange(currentPage - 1), className: clsx(paginationTheme.item, currentPage === 1 && paginationTheme.itemDisabled), style: {
-                        padding: theme.spacing.small,
+                        padding: theme.spacing[sizeTokens.paddingKey],
                         margin: `0 ${theme.spacing.small}`,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                        backgroundColor: theme.colors.background,
-                        color: theme.colors.text,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
                         cursor: currentPage === 1 ? 'not-allowed' : 'pointer',
                         opacity: currentPage === 1 ? 0.5 : 1,
-                        fontSize: theme.typography.fontSize.medium,
-                    }, "aria-label": "Previous page" }, "Previous"))),
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Previous page" }, previousLabel))),
             pageNumbers.map((page, index) => {
                 if (page === 'ellipsis') {
                     return (React.createElement("li", { key: `ellipsis-${index}` },
                         React.createElement("span", { className: paginationTheme.ellipsis, style: {
-                                padding: theme.spacing.small,
+                                padding: theme.spacing[sizeTokens.paddingKey],
                                 margin: `0 ${theme.spacing.small}`,
-                                color: theme.colors.text,
-                                fontSize: theme.typography.fontSize.medium,
+                                color: cssVarColor,
+                                fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
                             } }, "...")));
                 }
                 const isActive = page === currentPage;
@@ -129,14 +266,15 @@ export const Pagination = ({ results: resultsProp, currentPage: currentPageProp,
             }),
             showPrevNext && (React.createElement("li", null,
                 React.createElement("button", { type: "button", disabled: currentPage === totalPages, onClick: () => handlePageChange(currentPage + 1), className: clsx(paginationTheme.item, currentPage === totalPages && paginationTheme.itemDisabled), style: {
-                        padding: theme.spacing.small,
+                        padding: theme.spacing[sizeTokens.paddingKey],
                         margin: `0 ${theme.spacing.small}`,
-                        border: `1px solid ${theme.colors.border}`,
-                        borderRadius: typeof theme.borderRadius === 'string' ? theme.borderRadius : theme.borderRadius.medium,
-                        backgroundColor: theme.colors.background,
-                        color: theme.colors.text,
+                        border: `1px solid ${cssVarBorder}`,
+                        borderRadius: cssVarRadius,
+                        backgroundColor: cssVarBg,
+                        color: cssVarColor,
                         cursor: currentPage === totalPages ? 'not-allowed' : 'pointer',
                         opacity: currentPage === totalPages ? 0.5 : 1,
-                        fontSize: theme.typography.fontSize.medium,
-                    }, "aria-label": "Next page" }, "Next"))))));
+                        fontSize: theme.typography.fontSize[sizeTokens.fontSizeKey],
+                    }, "aria-label": "Next page" }, nextLabel))),
+            resolvedShowPageInfo && (React.createElement("li", { style: { marginLeft: theme.spacing.small } }, pageInfoElement)))));
 };

package/dist/components/QuerySuggestions.d.ts

@@ -26,6 +26,8 @@ export interface QuerySuggestionsProps {
     minQueryLength?: number;
     onSuggestionClick?: (suggestion: string) => void;
     renderSuggestion?: (suggestion: SuggestionItem, index: number) => React.ReactNode;
+    /** Show loading state when fetching and no previous suggestions (default false: show previous results until new render) */
+    showLoadingState?: boolean;
     renderLoading?: () => React.ReactNode;
     renderEmpty?: () => React.ReactNode;
     showTitle?: boolean;

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

@@ -1 +1 @@
-{"version":3,"file":"QuerySuggestions.d.ts","sourceRoot":"","sources":["../../src/components/QuerySuggestions.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAClF,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwK5D,CAAC"}
+{"version":3,"file":"QuerySuggestions.d.ts","sourceRoot":"","sources":["../../src/components/QuerySuggestions.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CAChC;AAED,MAAM,WAAW,qBAAqB;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,iBAAiB,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,gBAAgB,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAClF,2HAA2H;IAC3H,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACtC,WAAW,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,KAAK,CAAC,EAAE,qBAAqB,CAAC;CAC/B;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA0K5D,CAAC"}

package/dist/components/QuerySuggestions.js

@@ -7,7 +7,7 @@ import React, { useState } from 'react';
 import { useSearchContext } from './SearchProvider';
 import { useQuerySuggestions } from '../hooks/useQuerySuggestions';
 import { clsx } from 'clsx';
-export const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, minQueryLength = 2, onSuggestionClick, renderSuggestion, renderLoading, renderEmpty, showTitle = false, title = 'Suggestions', className, style, theme: customTheme, }) => {
+export const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs = 300, minQueryLength = 2, onSuggestionClick, renderSuggestion, showLoadingState = false, renderLoading, renderEmpty, showTitle = false, title = 'Suggestions', className, style, theme: customTheme, }) => {
     const { client, theme } = useSearchContext();
     const [selectedIndex, setSelectedIndex] = useState(-1);
     const { suggestions, loading, error } = useQuerySuggestions({
@@ -44,7 +44,8 @@ export const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs =
     if (query.length < minQueryLength) {
         return null;
     }
-    if (loading) {
+    // When loading with no previous results, show loading only if showLoadingState (default: show previous results, no loading screen)
+    if (loading && displayedSuggestions.length === 0 && showLoadingState) {
         return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
             showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
                     fontSize: theme.typography.fontSize.large,
@@ -54,7 +55,7 @@ export const QuerySuggestions = ({ query = '', maxSuggestions = 10, debounceMs =
                 } }, title)),
             renderLoading ? renderLoading() : defaultRenderLoading()));
     }
-    if (error || displayedSuggestions.length === 0) {
+    if (error || (!loading && displayedSuggestions.length === 0)) {
         return (React.createElement("div", { className: clsx(suggestionsTheme.container, className), style: style },
             showTitle && (React.createElement("div", { className: suggestionsTheme.title, style: {
                     fontSize: theme.typography.fontSize.large,

package/dist/components/QuerySuggestionsDropdown.d.ts

@@ -28,7 +28,7 @@ export interface QuerySuggestionsDropdownProps extends QuerySuggestionsEventHand
     maxRecentSearches?: number;
     /** Show suggestion counts */
     showCounts?: boolean;
-    /** Show loading state */
+    /** Show loading state (default false: show previous results until new results render) */
     showLoading?: boolean;
     /** Show empty state when no results */
     showEmptyState?: boolean;

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

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

package/dist/components/QuerySuggestionsDropdown.js

@@ -158,7 +158,7 @@ const LoadingSpinner = ({ style }) => (React.createElement("svg", { style: { ani
 // Component
 // ============================================================================
 export const QuerySuggestionsDropdown = forwardRef(function QuerySuggestionsDropdown(props, ref) {
-    const { query, isOpen = true, maxSuggestions = 8, minQueryLength = 1, debounceMs = 200, showRecentSearches = true, maxRecentSearches = 5, showCounts = true, showLoading = true, showEmptyState = true, highlight = { enabled: true, preTag: '<mark>', postTag: '</mark>' }, keyboardNav = { enabled: true }, animation = { enabled: true, duration: 150, entrance: 'fade' }, classNames = {}, style, renderSuggestion, renderRecentSearch, renderLoading, renderEmpty, footer, position = 'absolute', width = '100%', zIndex = 1000, closeOnClickOutside = true, closeOnEscape = true, ariaLabel = 'Search suggestions', onSuggestionSelect, onRecentSearchClick, onRecentSearchRemove, onOpen, onClose, onNavigate, } = props;
+    const { query, isOpen = true, maxSuggestions = 8, minQueryLength = 1, debounceMs = 200, showRecentSearches = true, maxRecentSearches = 5, showCounts = true, showLoading = false, showEmptyState = true, highlight = { enabled: true, preTag: '<mark>', postTag: '</mark>' }, keyboardNav = { enabled: true }, animation = { enabled: true, duration: 150, entrance: 'fade' }, classNames = {}, style, renderSuggestion, renderRecentSearch, renderLoading, renderEmpty, footer, position = 'absolute', width = '100%', zIndex = 1000, closeOnClickOutside = true, closeOnEscape = true, ariaLabel = 'Search suggestions', onSuggestionSelect, onRecentSearchClick, onRecentSearchRemove, onOpen, onClose, onNavigate, } = props;
     const { client, theme } = useSearchContext();
     const containerRef = useRef(null);
     const [activeIndex, setActiveIndex] = useState(-1);
@@ -343,7 +343,7 @@ export const QuerySuggestionsDropdown = forwardRef(function QuerySuggestionsDrop
         loading && showLoading && (React.createElement("div", { className: classNames.loadingState, style: defaultStyles.loadingState }, renderLoading ? renderLoading() : (React.createElement(React.Fragment, null,
             React.createElement(LoadingSpinner, null),
             React.createElement("span", null, "Searching..."))))),
-        !loading && showRecent && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.recentSearches) },
+        showRecent && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.recentSearches) },
             React.createElement("div", { className: classNames.sectionTitle, style: defaultStyles.sectionTitle }, "Recent Searches"),
             recentSearches.slice(0, maxRecentSearches).map((search, index) => {
                 const isActive = activeIndex === index;
@@ -351,8 +351,8 @@ export const QuerySuggestionsDropdown = forwardRef(function QuerySuggestionsDrop
                         onRecentSearchClick?.(search);
                     }, onMouseEnter: () => setActiveIndex(index) }, renderRecentSearchItem(search, index, isActive)));
             }))),
-        !loading && showRecent && showSuggestions && (React.createElement("div", { style: defaultStyles.divider })),
-        !loading && showSuggestions && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.suggestionsList) },
+        showRecent && showSuggestions && (React.createElement("div", { style: defaultStyles.divider })),
+        showSuggestions && (React.createElement("div", { className: clsx('seekora-suggestions-section', classNames.section, classNames.suggestionsList) },
             query.length > 0 && (React.createElement("div", { className: classNames.sectionTitle, style: defaultStyles.sectionTitle }, "Suggestions")),
             suggestions.map((suggestion, index) => {
                 const itemIndex = showRecent ? recentSearches.length + index : index;