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