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

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);