113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useId, useRef, useState } from 'react';
|
|
import { ChevronDown } from 'lucide-react';
|
|
|
|
export interface CustomSelectOption {
|
|
value: string;
|
|
label: string;
|
|
}
|
|
|
|
interface CustomSelectProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
options: CustomSelectOption[];
|
|
placeholder?: string;
|
|
className?: string;
|
|
disabled?: boolean;
|
|
size?: 'md' | 'sm';
|
|
'aria-label'?: string;
|
|
}
|
|
|
|
export function CustomSelect({
|
|
value,
|
|
onChange,
|
|
options,
|
|
placeholder = 'Select',
|
|
className = '',
|
|
disabled = false,
|
|
size = 'md',
|
|
'aria-label': ariaLabel,
|
|
}: CustomSelectProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const rootRef = useRef<HTMLDivElement>(null);
|
|
const listId = useId();
|
|
const selected = options.find((option) => option.value === value);
|
|
const compact = size === 'sm';
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const onPointerDown = (event: MouseEvent) => {
|
|
if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
|
|
};
|
|
const onKeyDown = (event: KeyboardEvent) => {
|
|
if (event.key === 'Escape') setOpen(false);
|
|
};
|
|
document.addEventListener('mousedown', onPointerDown);
|
|
window.addEventListener('keydown', onKeyDown);
|
|
return () => {
|
|
document.removeEventListener('mousedown', onPointerDown);
|
|
window.removeEventListener('keydown', onKeyDown);
|
|
};
|
|
}, [open]);
|
|
|
|
return (
|
|
<div ref={rootRef} className={`relative min-w-0 ${className}`}>
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
aria-haspopup="listbox"
|
|
aria-expanded={open}
|
|
aria-controls={listId}
|
|
aria-label={ariaLabel}
|
|
onClick={() => !disabled && setOpen((current) => !current)}
|
|
className={`relative w-full pl-3 pr-8 bg-card text-left text-foreground crm-radius-section border border-border cursor-pointer transition-colors flex items-center truncate disabled:opacity-50 ${
|
|
compact ? 'h-8 text-[12px]' : 'h-9 text-[13px]'
|
|
}`}
|
|
>
|
|
<span className={`truncate ${selected ? 'text-foreground' : 'text-muted-foreground'}`}>
|
|
{selected?.label || placeholder}
|
|
</span>
|
|
<ChevronDown
|
|
className={`absolute right-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-foreground pointer-events-none transition-transform duration-200 ${
|
|
open ? 'rotate-180' : ''
|
|
}`}
|
|
/>
|
|
</button>
|
|
|
|
{open && (
|
|
<ul
|
|
id={listId}
|
|
role="listbox"
|
|
className="absolute left-0 top-full mt-1 z-50 w-full max-h-60 overflow-y-auto bg-card border border-border crm-radius-section p-1.5 shadow-[0_8px_24px_rgba(16,24,40,0.12)]"
|
|
>
|
|
{options.length === 0 ? (
|
|
<li className="px-3 py-2 text-[13px] text-muted-foreground">No options</li>
|
|
) : (
|
|
options.map((option) => {
|
|
const isSelected = option.value === value;
|
|
return (
|
|
<li key={option.value} role="option" aria-selected={isSelected}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
onChange(option.value);
|
|
setOpen(false);
|
|
}}
|
|
className={`w-full text-left px-3 py-2 text-[13px] cursor-pointer crm-radius-section transition-colors ${
|
|
isSelected
|
|
? 'bg-[#eef0f4] text-[#3d4654]'
|
|
: 'text-[#6b7280] hover:bg-[#eef0f4] hover:text-[#3d4654]'
|
|
}`}
|
|
>
|
|
{option.label}
|
|
</button>
|
|
</li>
|
|
);
|
|
})
|
|
)}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|