"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 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 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" }) return (
{countries.map((country, idx) => ( {country.name} ))}
) }