712649eecf
Turn StateSelect and CitySelect into autocomplete comboboxes so long lists no longer bias people toward the top option. A shared FormCombobox wraps shadcn's (Base UI) Combobox and bridges it to react-hook-form via useController, storing the state code / city name while displaying a label. Matching is accent-insensitive and prefix-based; the list opens after 1 character and results are alphabetical. State searches by both full name and initials (new StateNames map). Adds @base-ui/react + shadcn combobox/input-group primitives, and documents our export-const and named-hook-import conventions in the components rule (with the src/components/ui/* shadcn carve-out).
24 lines
678 B
TypeScript
24 lines
678 B
TypeScript
import { StateNames } from '@/lib/states'
|
|
import { FormCombobox, type ComboboxOption } from './FormCombobox'
|
|
|
|
interface StateSelectProps {
|
|
placeholder?: string
|
|
}
|
|
|
|
const stateOptions: ComboboxOption[] = Object.entries(StateNames)
|
|
.map(([code, name]) => ({ value: code, label: name, keywords: [code] }))
|
|
.sort((a, b) => a.label.localeCompare(b.label, 'pt-BR'))
|
|
|
|
export const StateSelect = ({ placeholder = 'Selecione um estado' }: StateSelectProps) => {
|
|
return (
|
|
<FormCombobox
|
|
name="state"
|
|
id="state"
|
|
options={stateOptions}
|
|
placeholder={placeholder}
|
|
minChars={1}
|
|
required
|
|
emptyMessage="Nenhum estado encontrado."
|
|
/>
|
|
)
|
|
}
|