scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(LOY-95): localize and sort country names in select

Browse Source
This commit is contained in:
Christian Andolf
2025-02-17 17:46:35 +01:00
parent e360f9b926
commit 9a443a9cb0
1 changed files with 26 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
components/TempDesignSystem/Form/Country/index.tsx
View File

@@ -15,6 +15,7 @@ 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"
@@ -34,6 +35,7 @@ export default function CountrySelect({
readOnly = false,
registerOptions = {},
}: CountryProps) {
const lang = useLang()
const intl = useIntl()
const [rootDiv, setRootDiv] = useState<CountryPortalContainer>(undefined)
@@ -54,6 +56,7 @@ export default function CountrySelect({
}
const selectCountryLabel = intl.formatMessage({ id: "Select a country" })
const collator = new Intl.Collator(lang)
return (
<div className={`${styles.container} ${className}`} ref={setRef}>
@@ -102,17 +105,29 @@ export default function CountrySelect({
UNSTABLE_portalContainer={rootDiv}
>
<ListBox>
{countries.map((country, idx) => (
<Body asChild fontOnly key={`${country.code}-${idx}`}>
<ListBoxItem
aria-label={country.name}
className={styles.listBoxItem}
id={country.code}
>
{country.name}
</ListBoxItem>
</Body>
))}
{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 (
<Body asChild fontOnly key={`${country.code}-${idx}`}>
<ListBoxItem
aria-label={country.name}
className={styles.listBoxItem}
id={country.code}
>
{country.localizedDisplayName}
</ListBoxItem>
</Body>
)
})}
</ListBox>
</Popover>
</ComboBox>