diff --git a/CHANGELOG.md b/CHANGELOG.md index 69b35a66..4c931d71 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## (5.1.0 IN PROGRESS) +* Sort the list of countries based on the current locale. Refs UISACQCOMP-164. + ## [5.0.0](https://github.com/folio-org/stripes-acq-components/tree/v5.0.0) (2023-10-12) [Full Changelog](https://github.com/folio-org/stripes-acq-components/compare/v4.0.2...v5.0.0) diff --git a/lib/CountryFilter/CountryFilter.js b/lib/CountryFilter/CountryFilter.js index a532ea03..747cc9f8 100644 --- a/lib/CountryFilter/CountryFilter.js +++ b/lib/CountryFilter/CountryFilter.js @@ -8,10 +8,14 @@ import { SelectionFilter } from '../SelectionFilter'; const CountryFilter = (props) => { const intl = useIntl(); - const countriesOptions = useMemo(() => countries.map(c => ({ - label: intl.formatMessage({ id: `stripes-components.countries.${c.alpha2}` }), - value: c.alpha3, - })), [intl]); + const countriesOptions = useMemo(() => ( + countries + .map(c => ({ + label: intl.formatDisplayName(c.alpha2, { type: 'region' }), + value: c.alpha3, + })) + .sort((a, b) => a.label.localeCompare(b.label)) + ), [intl]); return ( { it('should invoke onChange callback when something is selected', async () => { const onChangeFilter = jest.fn(); const { container, getByText } = renderFilter(false, onChangeFilter); - const afgOption = getByText('stripes-components.countries.AF'); + const afgOption = getByText('AF'); const button = container.querySelector('[id="org-filter-country-selection"]'); expect(button).toBeEnabled();