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

package/dist/src/index.js

@@ -1687,7 +1687,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] = React.useState(false);
@@ -1695,6 +1695,14 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
     const inputRef = React.useRef(null);
     const containerRef = React.useRef(null);
     const isSearchingRef = React.useRef(false); // Flag to prevent blur handler from interfering
+    const searchAsYouTypeRef = React.useRef(null);
+    // Cleanup searchAsYouType timer on unmount
+    React.useEffect(() => {
+        return () => {
+            if (searchAsYouTypeRef.current)
+                clearTimeout(searchAsYouTypeRef.current);
+        };
+    }, []);
     const { suggestions, loading: suggestionsLoading } = useQuerySuggestions({
         client,
         query,
@@ -1724,6 +1732,11 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
         }
     }, [query, onQueryChange]);
     const handleSearch = React.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 });
@@ -1760,10 +1773,18 @@ const SearchBar = ({ placeholder = 'Powered by Seekora', showSuggestions = true,
     const handleInputChange = React.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 = React.useCallback((e) => {
         switch (e.key) {
             case 'ArrowDown':
@@ -1839,10 +1860,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 = React.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 = React.useCallback(() => {
         const currentValue = inputRef.current?.value || query;
         handleSearch(currentValue);