@seekora-ai/ui-sdk-react 0.2.18 → 0.2.21

package/dist/src/index.d.ts

@@ -58,6 +58,9 @@ interface SearchBarProps {
     renderSubmitButton?: () => React__default.ReactNode;
     /** Size variant controlling padding and font size (default: 'medium') */
     size?: SearchBarSize;
+    /** Trigger search automatically as user types, with debounce (default: false).
+     *  When true, uses `debounceMs` for the delay. Enter still triggers immediately. */
+    searchAsYouType?: boolean;
 }
 declare const SearchBar: React__default.FC<SearchBarProps>;
 

package/dist/src/index.esm.js

@@ -1685,7 +1685,7 @@ const DefaultSearchIcon = ({ size = 18 }) => (React.createElement("svg", { width
 const DefaultClearIcon = ({ size = 14 }) => (React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" },
     React.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
     React.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })));
-const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, renderSuggestion, renderSearchIcon, showClearButton = true, renderClearIcon, showSubmitButton = false, renderSubmitButton, size = 'medium', }) => {
+const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true, debounceMs = 300, minQueryLength = 2, maxSuggestions = 10, onSearch, onQueryChange, onSuggestionSelect, onSearchStateChange, searchOptions, className, style, theme: customTheme, renderSuggestion, renderSearchIcon, showClearButton = true, renderClearIcon, showSubmitButton = false, renderSubmitButton, size = 'medium', searchAsYouType = false, }) => {
     const { client, theme, enableAnalytics, autoTrackSearch } = useSearchContext();
     const { query, setQuery, search: triggerSearch, results, loading: searchLoading, error: searchError } = useSearchState();
     const [isFocused, setIsFocused] = useState(false);
@@ -1693,6 +1693,14 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
     const inputRef = useRef(null);
     const containerRef = useRef(null);
     const isSearchingRef = useRef(false); // Flag to prevent blur handler from interfering
+    const searchAsYouTypeRef = useRef(null);
+    // Cleanup searchAsYouType timer on unmount
+    useEffect(() => {
+        return () => {
+            if (searchAsYouTypeRef.current)
+                clearTimeout(searchAsYouTypeRef.current);
+        };
+    }, []);
     const { suggestions, loading: suggestionsLoading } = useQuerySuggestions({
         client,
         query,
@@ -1722,6 +1730,11 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
         }
     }, [query, onQueryChange]);
     const handleSearch = useCallback(async (searchQuery) => {
+        // Cancel any pending searchAsYouType debounce — user explicitly submitted
+        if (searchAsYouTypeRef.current) {
+            clearTimeout(searchAsYouTypeRef.current);
+            searchAsYouTypeRef.current = null;
+        }
         // Allow empty queries - use empty string for search
         const query = searchQuery.trim();
         log.info('SearchBar: Triggering search', { query, originalQuery: searchQuery, isEmpty: !query });
@@ -1758,10 +1771,18 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
     const handleInputChange = useCallback((e) => {
         const value = e.target.value;
         // Update query in state manager but don't trigger search immediately
-        // Search will be triggered on Enter or suggestion select
+        // Search will be triggered on Enter, suggestion select, or after debounce if searchAsYouType
         setQuery(value, false); // false = don't trigger search immediately
         setSelectedIndex(-1);
-    }, [setQuery]);
+        if (searchAsYouType) {
+            if (searchAsYouTypeRef.current)
+                clearTimeout(searchAsYouTypeRef.current);
+            searchAsYouTypeRef.current = setTimeout(() => {
+                searchAsYouTypeRef.current = null;
+                triggerSearch();
+            }, debounceMs);
+        }
+    }, [setQuery, searchAsYouType, debounceMs, triggerSearch]);
     const handleKeyDown = useCallback((e) => {
         switch (e.key) {
             case 'ArrowDown':
@@ -1837,10 +1858,17 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
         ? `0 0 0 3px var(--seekora-border-focus-alpha, ${theme.colors.focus}33)`
         : undefined;
     const handleClear = useCallback(() => {
+        if (searchAsYouTypeRef.current) {
+            clearTimeout(searchAsYouTypeRef.current);
+            searchAsYouTypeRef.current = null;
+        }
         setQuery('', false);
         setSelectedIndex(-1);
         inputRef.current?.focus();
-    }, [setQuery]);
+        if (searchAsYouType) {
+            triggerSearch();
+        }
+    }, [setQuery, searchAsYouType, triggerSearch]);
     const handleSubmit = useCallback(() => {
         const currentValue = inputRef.current?.value || query;
         handleSearch(currentValue);
@@ -16702,13 +16730,21 @@ function Results({ hits, groupedHits, selectedIndex, onSelect, onHover, scrollSe
 }
 
 function SeekoraLogo() {
-    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 563 636", width: "20", height: "22", "aria-hidden": "true" },
-        React.createElement("path", { fill: "#03d1ff", d: "M243.44,231.23l-99.23,98.52-9.41,9.41c-14.83,14.83-38.57,13.17-51.4-1.5-2.39-2.73-4.39-5.89-5.89-9.49-.05-.16-.13-.32-.18-.47-1.55-3.68-2.95-7.41-4.29-11.2-7.39-21.24-11.33-44.04-11.25-67.81h.24c-.05-.6-.05-1.24-.08-1.87-.08-2.13-.11-4.29-.11-6.44,0-126.81,102.78-229.59,229.6-229.59,30.84,0,60.29,6.07,87.16,17.14-10.18,10.36-15.22,25.4-12.23,40.7,1.42,7.05,4.39,13.41,8.55,18.75,1.26,1.68,2.68,3.26,4.18,4.73-.58-.34-1.16-.68-1.76-1-25.29-14.62-54.64-22.95-85.9-22.95-95.13,0-172.22,77.12-172.22,172.22,0,1.95.03,3.87.11,5.78v.05c.39,11.94,2,23.59,4.73,34.79l.82-.82,23.14-23.16,47.14-47.14,20.09-20.06c11.31-11.31,27.69-15.57,42.99-11.2.05.03.13.03.18.05.24.05.45.11.68.18,9.47,2.87,17.46,8.73,22.95,16.49,3.6,5.02,6.15,10.83,7.39,17.06l5.94,30.21,1.5,7.57.11.63,1.97-2.05,69.62-72.57,15.28-15.93,33.68-35.15,5.47-5.68,11.31-11.78,23.32-24.32,4.23-4.39,7.94-8.28-6.07,1.18-12.46,2.45-2.18.42-16.36,3.23-.03.03-18.64,3.68c-11.86,2.34-23.4-5.39-25.77-17.25-2.08-10.52,3.73-20.75,13.33-24.64,1.26-.5,2.58-.89,3.97-1.16l45.54-8.99,34.44-6.81,14.99-2.92,23.06-4.58c.58-.11,1.16-.21,1.71-.26.5-.05,1-.11,1.5-.13,1-.05,2-.03,3,.05,4.47.39,8.78,2.18,12.3,5.18,3.76,3.21,6.28,7.52,7.26,12.25.13.68.24,1.37.31,2.05.11,1.05.13,2.1.11,3.16l-1.05,28.08-.66,18.64-.24,6.68-2.26,62.63-.03,1.1c-.39,11.83-10.12,21.14-21.9,21.14-.26,0-.53-.03-.79-.03-5.13-.18-9.75-2.1-13.36-5.15-4.97-4.18-8.05-10.54-7.76-17.54l.11-2.76.42-11.86.58-16.33.58-16.3-235.99,252.7-24.03-127.37Z" }),
-        React.createElement("path", { fill: "#4d66fe", d: "M11.11,572.49c-1.27-6.46.68-13.13,5.22-17.89l105.47-110.63,15.28-15.93,33.68-35.15,5.47-5.68,34.63-36.1,8.23-8.57,11.91,57.94.63,1.42h0c10.78,4,22.09,6.94,33.76,8.73v57.87c-27.58-3.1-53.69-11.12-77.43-23.14L21.34,623.95l-10.23-51.46Z" }),
-        React.createElement("path", { fill: "#4d66fe", d: "M325.32,330.56v136.38c-10.31,1.44-20.85,2.17-31.56,2.17-1.56,0-3.13,0-4.69-.08v-101.86l36.25-36.61Z" }),
-        React.createElement("polygon", { fill: "#4d66fe", points: "381.47 451.71 381.47 385.94 381.55 270.05 345.17 308.07 345.17 463.34 381.47 451.71" }),
-        React.createElement("polygon", { fill: "#4d66fe", points: "437.61 418.26 437.65 321.78 437.69 213.67 401.32 251.68 401.32 442.32 437.61 418.26" }),
-        React.createElement("path", { fill: "#4d66fe", d: "M493.87,157.13l-.08,108.11v86.38c-9.91,17.8-22.14,34.13-36.29,48.56v-205l36.37-38.05Z" })));
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 844.6 192", height: "20", "aria-hidden": "true", style: { width: 'auto' } },
+        React.createElement("path", { fill: "#03d1ff", d: "M73.06,85.38l-21.36,21.21-2.03,2.03c-3.19,3.19-8.3,2.84-11.07-.32-.52-.59-.95-1.27-1.27-2.04-.01-.03-.03-.07-.04-.1-.33-.79-.63-1.6-.92-2.41-1.59-4.57-2.44-9.48-2.42-14.6h.05c-.01-.13-.01-.27-.02-.4-.02-.46-.02-.92-.02-1.39,0-27.3,22.13-49.43,49.43-49.43,6.64,0,12.98,1.31,18.76,3.69-2.19,2.23-3.28,5.47-2.63,8.76.31,1.52.95,2.89,1.84,4.04.27.36.58.7.9,1.02-.12-.07-.25-.15-.38-.22-5.45-3.15-11.76-4.94-18.49-4.94-20.48,0-37.08,16.6-37.08,37.08,0,.42,0,.83.02,1.25h0c.08,2.58.43,5.09,1.02,7.5l.18-.18,4.98-4.99,10.15-10.15,4.32-4.32c2.43-2.43,5.96-3.35,9.26-2.41.01,0,.03,0,.04.01.05.01.1.02.15.04,2.04.62,3.76,1.88,4.94,3.55.78,1.08,1.32,2.33,1.59,3.67l1.28,6.5.32,1.63.02.14.42-.44,14.99-15.62,3.29-3.43,7.25-7.57,1.18-1.22,2.43-2.54,5.02-5.24.91-.95,1.71-1.78-1.31.25-2.68.53-.47.09-3.52.7h0s-4.01.8-4.01.8c-2.55.5-5.04-1.16-5.55-3.71-.45-2.26.8-4.47,2.87-5.3.27-.11.55-.19.85-.25l9.8-1.94,7.42-1.47,3.23-.63,4.96-.98c.12-.02.25-.05.37-.06.11-.01.22-.02.32-.03.22-.01.43,0,.65.01.96.08,1.89.47,2.65,1.12.81.69,1.35,1.62,1.56,2.64.03.15.05.29.07.44.02.23.03.45.02.68l-.23,6.05-.14,4.01-.05,1.44-.49,13.48v.24c-.09,2.55-2.19,4.55-4.72,4.55-.06,0-.11,0-.17,0-1.1-.04-2.1-.45-2.88-1.11-1.07-.9-1.73-2.27-1.67-3.78l.02-.59.09-2.55.12-3.52.12-3.51-50.81,54.4-5.17-27.42Z" }),
+        React.createElement("path", { fill: "#4d66fe", d: "M23.04,158.85c-.27-1.39.15-2.83,1.12-3.85l22.71-23.81,3.29-3.43,7.25-7.57,1.18-1.22,7.46-7.77,1.77-1.85,2.56,12.48.14.31h0c2.32.86,4.75,1.49,7.27,1.88v12.46c-5.94-.67-11.56-2.39-16.67-4.98l-35.87,38.45-2.2-11.08Z" }),
+        React.createElement("path", { fill: "#4d66fe", d: "M90.69,106.76v29.36c-2.22.31-4.49.47-6.79.47-.34,0-.67,0-1.01-.02v-21.93l7.8-7.88Z" }),
+        React.createElement("polygon", { fill: "#4d66fe", points: "102.78 132.84 102.78 118.68 102.79 93.73 94.96 101.92 94.96 135.35 102.78 132.84" }),
+        React.createElement("polygon", { fill: "#4d66fe", points: "114.86 125.64 114.87 104.87 114.88 81.6 107.05 89.78 107.05 130.82 114.86 125.64" }),
+        React.createElement("path", { fill: "#4d66fe", d: "M126.98,69.42l-.02,23.28v18.6c-2.13,3.83-4.77,7.35-7.81,10.45v-44.13l7.83-8.19Z" }),
+        React.createElement("path", { fill: "currentColor", d: "M455.59,136.31h-14.71l-.11-98.11h14.71l.11,98.11ZM520.86,136.65h-18.17l-27.34-32.14c-2.31-2.88-4.04-5.72-5.19-8.51-1.15-2.79-1.73-5.53-1.73-8.22s.55-5.57,1.66-8.36c1.1-2.79,2.86-5.63,5.26-8.51l27.73-32.54h16.87l-31.05,36.87c-1.92,2.4-3.39,4.57-4.4,6.49-1.01,1.92-1.51,3.8-1.51,5.62s.5,3.65,1.51,5.48c1.01,1.83,2.47,3.94,4.4,6.35l31.96,37.47Z" }),
+        React.createElement("path", { fill: "currentColor", d: "M710.73,117.25c-2.6-5.48-5.14-10.12-7.64-13.92-2.5-3.8-5.48-6.68-8.94-8.65-.31-.18-.64-.33-.96-.49,2.69-.58,5.18-1.44,7.45-2.61,4.52-2.31,8.05-5.53,10.6-9.66,2.55-4.13,3.82-8.89,3.82-14.28,0-6.63-1.61-12.11-4.83-16.44-3.22-4.33-7.6-7.55-13.12-9.66-5.53-2.11-11.71-3.17-18.53-3.17h-33.61v98.14h14.42l.13-36.69h11.99c4.52,0,8.2.79,11.03,2.38,2.84,1.59,5.24,3.8,7.21,6.63,1.97,2.84,3.92,6.13,5.84,9.88l8.89,17.8h15.87l-9.61-19.24ZM659.55,86.67l.12-34.76h19.04c3.94,0,7.52.6,10.75,1.8,3.22,1.2,5.77,3.03,7.64,5.48,1.88,2.45,2.81,5.7,2.81,9.74s-.91,7.09-2.74,9.74c-1.83,2.65-4.38,4.64-7.64,5.99-3.27,1.35-6.97,2.02-11.11,2.02h-18.87Z" }),
+        React.createElement("path", { fill: "currentColor", d: "M618.36,62.91c-2.26-4.27-5.09-8.11-8.5-11.53-4.5-4.49-9.72-8.01-15.65-10.55-5.94-2.54-12.39-3.8-19.38-3.8s-13.47,1.27-19.45,3.8c-5.98,2.54-11.22,6.06-15.72,10.55-4.5,4.5-8.02,9.74-10.55,15.72-2.54,5.98-3.81,12.47-3.81,19.45s1.27,13.66,3.81,19.74c2.53,6.08,6.05,11.37,10.55,15.86,4.49,4.5,9.74,8.02,15.72,10.55,5.98,2.54,12.46,3.81,19.45,3.81s13.44-1.27,19.38-3.81c5.94-2.53,11.15-6.05,15.65-10.55,4.23-4.23,7.58-9.18,10.03-14.82.15-.35.3-.69.44-1.04.57-1.4,1.08-2.83,1.52-4.28l12.51,4.15-2.67-20.65-2.66-20.65-7.32,6.03-9.78,8.06-3.24,2.67-13.86,11.43,12.73,4.23c-.32,1.16-.71,2.3-1.15,3.42-.26.65-.53,1.28-.82,1.9-1.64,3.58-3.81,6.74-6.5,9.52-3.16,3.25-6.82,5.81-10.98,7.68-4.16,1.87-8.59,2.8-13.28,2.8s-9.28-.93-13.5-2.8c-4.21-1.87-7.87-4.43-10.98-7.68-3.11-3.26-5.55-7.06-7.32-11.42-1.77-4.35-2.66-9.06-2.66-14.14s.89-9.62,2.66-13.93c1.77-4.31,4.21-8.09,7.32-11.34s6.77-5.79,10.98-7.61c4.21-1.82,8.71-2.73,13.5-2.73s9.24.91,13.35,2.73c4.11,1.82,7.75,4.36,10.91,7.61,3.16,3.25,5.6,7.03,7.32,11.34l11.95-9.72Z" }),
+        React.createElement("circle", { fill: "currentColor", cx: "575.56", cy: "86.71", r: "9.38" }),
+        React.createElement("path", { fill: "currentColor", d: "M206.51,137.4c-8.17,0-15.43-1.78-21.78-5.34-6.35-3.56-11.01-8.65-13.99-15.29l12.4-6.06c1.83,4.14,4.76,7.31,8.8,9.52,4.04,2.21,8.89,3.32,14.57,3.32,3.75,0,7.11-.55,10.1-1.66,2.98-1.1,5.36-2.79,7.14-5.05,1.78-2.26,2.67-4.98,2.67-8.15,0-3.56-.96-6.27-2.88-8.15-1.92-1.88-4.5-3.27-7.72-4.18-3.22-.91-6.76-1.71-10.6-2.38-3.66-.77-7.38-1.71-11.18-2.81-3.8-1.1-7.33-2.67-10.6-4.69-3.27-2.02-5.89-4.69-7.86-8-1.97-3.32-2.96-7.52-2.96-12.62,0-5.38,1.46-10.19,4.4-14.42,2.93-4.23,6.87-7.57,11.83-10.02,4.95-2.45,10.5-3.68,16.66-3.68,7.4,0,14.13,1.71,20.19,5.12,6.06,3.41,10.53,8.44,13.41,15.07l-12.26,6.35c-1.83-4.04-4.62-7.19-8.37-9.45-3.75-2.26-8.27-3.39-13.56-3.39-3.27,0-6.23.6-8.87,1.8-2.65,1.2-4.78,2.84-6.42,4.9-1.64,2.07-2.45,4.5-2.45,7.28,0,3.46,1.01,6.13,3.03,8.01,2.02,1.87,4.69,3.32,8,4.33,3.32,1.01,6.95,1.9,10.89,2.67,3.65.77,7.36,1.71,11.11,2.81,3.75,1.11,7.19,2.67,10.31,4.69,3.12,2.02,5.67,4.69,7.64,8,1.97,3.32,2.96,7.52,2.96,12.62,0,5.67-1.54,10.65-4.62,14.93-3.08,4.28-7.24,7.67-12.48,10.17-5.24,2.5-11.08,3.75-17.52,3.75Z" }),
+        React.createElement("path", { fill: "currentColor", d: "M276.75,123.07v-28.94h49.04v-13.41h-49.04v-28.94h51.92v-13.41h-53.08c-5,0-8.51,1.18-10.53,3.53-2.02,2.36-3.03,5.6-3.03,9.74v71.58c0,4.04,1.01,7.26,3.03,9.66,2.02,2.41,5.53,3.61,10.53,3.61h54.09v-13.41h-52.93Z" }),
+        React.createElement("path", { fill: "currentColor", d: "M365.12,123.24v-28.94h49.04v-13.41h-49.04v-28.94h51.92v-13.41h-53.08c-5,0-8.51,1.18-10.53,3.53-2.02,2.36-3.03,5.6-3.03,9.74v71.58c0,4.04,1.01,7.26,3.03,9.66,2.02,2.41,5.53,3.61,10.53,3.61h54.09v-13.41h-52.93Z" }),
+        React.createElement("path", { fill: "currentColor", d: "M806.12,136.49h15l-26.59-85.62c-1.44-4.52-3.8-7.88-7.07-10.1-3.27-2.21-6.97-3.32-11.11-3.32s-7.57,1.11-10.89,3.32c-3.32,2.21-5.7,5.58-7.14,10.1l-26.6,85.46h14.86l8.95-29.72,41.68-.11,8.91,29.99ZM759.57,93.2l11.45-38.01c.87-2.98,2.69-4.47,5.48-4.47s4.52,1.49,5.48,4.47l11.29,38.01h-33.7Z" })));
 }
 function Footer({ translations = {} }) {
     return (React.createElement("footer", { className: "seekora-docsearch-footer" },
@@ -16730,8 +16766,7 @@ function Footer({ translations = {} }) {
         React.createElement("div", { className: "seekora-docsearch-footer-logo" },
             React.createElement("span", { className: "seekora-docsearch-footer-logo-text" }, translations.searchByText || 'Search by'),
             React.createElement("a", { href: "https://seekora.ai", target: "_blank", rel: "noopener noreferrer", className: "seekora-docsearch-footer-logo-link" },
-                React.createElement(SeekoraLogo, null),
-                React.createElement("span", { className: "seekora-docsearch-logo", style: { fontWeight: 600 } }, "Seekora")))));
+                React.createElement(SeekoraLogo, null)))));
 }
 
 function useKeyboard(options) {