Search Bar

1'use client';
2 
3import React, { useState, useRef, useEffect } from 'react';
4import { Input } from '@/components/ui/input';
5import { Button } from '@/components/ui/button';
6import { Search, X, Loader2 } from 'lucide-react';
7import { cn } from '@/lib/utils/deso';
8 
9export interface SearchBarAutocompleteItem {
10  id: string;
11  label: string;
12  value: string;
13  data?: any;
14}
15 
16export interface SearchBarProps {
17  placeholder?: string;
18  value?: string;
19  onChange?: (value: string) => void;
20  onSearch?: (value: string) => void;
21  onClear?: () => void;
22  onFocus?: () => void;
23  className?: string;
24  showSearchButton?: boolean;
25  showClearButton?: boolean;
26  size?: 'sm' | 'md' | 'lg';
27  
28  // Autocomplete props
29  showAutocomplete?: boolean;
30  autocompleteItems?: SearchBarAutocompleteItem[];
31  onSelectItem?: (item: SearchBarAutocompleteItem) => void;
32  isLoading?: boolean;
33  emptyMessage?: string;
34  minCharsForAutocomplete?: number;
35  renderItem?: (item: SearchBarAutocompleteItem) => React.ReactNode;
36}
37 
38export function SearchBar({
39  placeholder = 'Search...',
40  value: controlledValue,
41  onChange,
42  onSearch,
43  onClear,
44  onFocus,
45  className,
46  showSearchButton = false,
47  showClearButton = true,
48  size = 'md',
49  
50  // Autocomplete props
51  showAutocomplete = false,
52  autocompleteItems = [],
53  onSelectItem,
54  isLoading = false,
55  emptyMessage = 'No results found',
56  minCharsForAutocomplete = 1,
57  renderItem,
58}: SearchBarProps) {
59  const [internalValue, setInternalValue] = useState('');
60  const [showDropdown, setShowDropdown] = useState(false);
61  const [focusedIndex, setFocusedIndex] = useState(-1);
62  const containerRef = useRef<HTMLDivElement>(null);
63  const inputRef = useRef<HTMLInputElement>(null);
64  
65  const value = controlledValue !== undefined ? controlledValue : internalValue;
66  const shouldShowDropdown = showAutocomplete && showDropdown && value.length >= minCharsForAutocomplete;
67 
68  // Close dropdown when clicking outside
69  useEffect(() => {
70    const handleClickOutside = (event: MouseEvent) => {
71      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
72        setShowDropdown(false);
73        setFocusedIndex(-1);
74      }
75    };
76 
77    document.addEventListener('mousedown', handleClickOutside);
78    return () => document.removeEventListener('mousedown', handleClickOutside);
79  }, []);
80 
81  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
82    const newValue = e.target.value;
83    if (controlledValue === undefined) {
84// … truncated