'use client'; import React, { useEffect, useRef, useState, useId } from 'react'; import Select, { ActionMeta, MultiValue, SingleValue } from 'react-select'; import CreatableSelect from 'react-select/creatable'; export interface Option { value: string | number; label: string; } interface SearchableSelectProps { options?: Option[]; value?: any; // Controlled value (raw value or Option object/array) defaultValue?: any; // Uncontrolled default value onChange?: (value: any) => void; onSearchChange?: (query: string) => void; // For async searches loading?: boolean; disabled?: boolean; isMulti?: boolean; placeholder?: string; isClearable?: boolean; className?: string; noOptionsMessage?: string; isCreatable?: boolean; wrap?: boolean; controlBgClass?: string; menuPlacement?: 'auto' | 'top' | 'bottom'; portalMenu?: boolean; // Portal the dropdown to so parent overflow never clips it } export default function SearchableSelect({ options = [], value, defaultValue, onChange, onSearchChange, loading = false, disabled = false, isMulti = false, placeholder = 'Select option...', isClearable = true, className = '', noOptionsMessage = 'No options found', isCreatable = false, wrap = false, controlBgClass = 'bg-slate-50 dark:bg-slate-950', menuPlacement = 'auto', portalMenu = true, }: SearchableSelectProps) { // Use React's useId hook to avoid hydration mismatches for select element IDs const instanceId = useId(); // Controlled vs Uncontrolled state const isControlled = value !== undefined; const [internalValue, setInternalValue] = useState( isControlled ? value : defaultValue !== undefined ? defaultValue : isMulti ? [] : '' ); // Sync internal state if controlled value changes useEffect(() => { if (isControlled) { setInternalValue(value); } }, [value, isControlled]); // Debounced search query handler if onSearchChange is provided const [inputValue, setInputValue] = useState(''); const debounceTimer = useRef(null); const handleInputChange = (newInputValue: string) => { setInputValue(newInputValue); if (!onSearchChange) return; if (debounceTimer.current) { clearTimeout(debounceTimer.current); } debounceTimer.current = setTimeout(() => { onSearchChange(newInputValue); }, 300); }; // Clean up debounce timer on unmount useEffect(() => { return () => { if (debounceTimer.current) { clearTimeout(debounceTimer.current); } }; }, []); // Map raw values to option objects const getSelectedOptions = () => { const activeValue = isControlled ? value : internalValue; if (activeValue === undefined || activeValue === null) { return isMulti ? [] : null; } if (isMulti) { if (Array.isArray(activeValue)) { return activeValue.map((val) => { if (val && typeof val === 'object' && 'value' in val) { return val as Option; } return options.find((o) => o.value === val) || { value: val, label: String(val) }; }); } return []; } else { if (activeValue && typeof activeValue === 'object' && 'value' in activeValue) { return activeValue as Option; } return ( options.find((o) => o.value === activeValue) || (activeValue !== '' ? { value: activeValue, label: String(activeValue) } : null) ); } }; const handleSelectChange = ( newValue: MultiValue