"use client" import { useState } from "react" import { Button, ComboBox, Input, type Key, ListBox, ListBoxItem, Popover, } from "react-aria-components" import { useController, useFormContext } from "react-hook-form" import { useIntl } from "react-intl" import Label from "@/components/TempDesignSystem/Form/Label" import SelectChevron from "@/components/TempDesignSystem/Form/SelectChevron" import Body from "@/components/TempDesignSystem/Text/Body" import useLang from "@/hooks/useLang" import ErrorMessage from "../ErrorMessage" import { countries } from "./countries" import styles from "./country.module.css" import type { CountryPortalContainer, CountryPortalContainerArgs, CountryProps, } from "./country" export default function CountrySelect({ className = "", label, name = "country", readOnly = false, registerOptions = {}, }: CountryProps) { const lang = useLang() const intl = useIntl() const [rootDiv, setRootDiv] = useState(undefined) function setRef(node: CountryPortalContainerArgs) { if (node) { setRootDiv(node) } } const { control, setValue } = useFormContext() const { field, formState } = useController({ control, name, rules: registerOptions, }) function handleChange(country: Key | null) { setValue(name, country ?? "") } const selectCountryLabel = intl.formatMessage({ id: "Select a country" }) const collator = new Intl.Collator(lang) return (
{countries .map((country) => ({ ...country, localizedDisplayName: intl.formatDisplayName(country.code, { type: "region" }) || country.name, })) .sort((a, b) => collator.compare(a.localizedDisplayName, b.localizedDisplayName) ) .map((country, idx) => { return ( {country.localizedDisplayName} ) })}
) }