DeepSeek React Component Builder Prompt

// SearchableDropdown.tsx
import { useState, useRef, useEffect, useCallback } from 'react';

/** Option item in the dropdown list */
interface Option {
value: string;
label: string;
disabled?: boolean;
}

/** Props for the SearchableDropdown component */
interface SearchableDropdownProps {
/** Array of options to display */
options: Option[];
/** Currently selected value */
value: string | null;
/** Callback fired when selection changes */
onChange: (value: string) => void;
/** Placeholder text for the search input */
placeholder?: string;
/** Disable the entire dropdown */
disabled?: boolean;
/** Custom class name for the container */
className?: string;
}

export function SearchableDropdown({
options,
value,
onChange,
placeholder = 'Search...',
disabled = false,
className = '',
}: SearchableDropdownProps) {
const [isOpen, setIsOpen] = useState(false);
const [search, setSearch] = useState('');
const inputRef = useRef<HTMLInputElement>(null);

const filtered = options.filter(o =>
o.label.toLowerCase().includes(search.toLowerCase())
);

// Close on outside click
useEffect(() => {
const handler = (e: MouseEvent) => {
if (!inputRef.current?.closest('.dropdown-root')?.contains(e.target as Node)) {
setIsOpen(false);
}
};
document.addEventListener('mousedown', handler);
return () => document.removeEventListener('mousedown', handler);
}, []);
...