Integrating MUI Autocomplete for searching and filtering countries

.gitignore

@@ -23,3 +23,5 @@ dist-ssr
 *.sln
 *.sw?
 coverage
+
+.nvmrc

docs/docs/api-reference.md

@@ -183,3 +183,14 @@ Props for the MUI [Menu](https://mui.com/material-ui/api/menu/) component.
 ```tsx
 <MuiTelInput MenuProps={{ disableAutoFocusItem: true }} />
 ```
+
+## `allowSearch`
+
+- Type: `boolean`
+- Default: `false`
+
+Adds a search input to filter countries by ISO code or name.
+
+```tsx
+<MuiTelInput allowSearch>
+```

package.json

@@ -71,7 +71,8 @@
     }
   },
   "dependencies": {
-    "libphonenumber-js": "^1.10.15"
+    "libphonenumber-js": "^1.10.15",
+    "match-sorter": "^6.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

src/components/FlagsAutocomplete/FlagsAutocomplete.styled.ts

@@ -0,0 +1,66 @@
+import { autocompleteClasses } from '@mui/material/Autocomplete'
+import InputBase from '@mui/material/InputBase'
+import Popper from '@mui/material/Popper'
+import { styled } from '@mui/material/styles'
+
+const Styled = {
+  AutocompletePopper: styled('div')(({ theme }) => {
+    return {
+      [`& .${autocompleteClasses.paper}`]: {
+        boxShadow: 'none',
+        margin: 0,
+        color: 'inherit'
+      },
+      [`& .${autocompleteClasses.listbox}`]: {
+        backgroundColor: '#fff',
+        padding: 0,
+        [`& .${autocompleteClasses.option}`]: {
+          minHeight: 'auto',
+          alignItems: 'flex-start',
+          padding: 8,
+          borderBottom: `1px solid #eaecef`,
+          '&[aria-selected="true"]': {
+            backgroundColor: 'transparent'
+          },
+          [`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]:
+            {
+              backgroundColor: theme.palette.action.hover
+            }
+        }
+      },
+      [`&.${autocompleteClasses.popperDisablePortal}`]: {
+        position: 'relative'
+      }
+    }
+  }),
+  Popper: styled(Popper)(({ theme }) => {
+    return {
+      border: '1px solid #e1e4e8',
+      boxShadow: '0 8px 24px rgba(149, 157, 165, 0.2)',
+      borderRadius: 6,
+      width: 300,
+      zIndex: theme.zIndex.modal,
+      color: '#24292e',
+      backgroundColor: '#fff'
+    }
+  }),
+  Input: styled(InputBase)(() => {
+    return {
+      padding: 10,
+      width: '100%',
+      borderBottom: '1px solid #eaecef',
+      '& input': {
+        borderRadius: 4,
+        backgroundColor: '#fff',
+        padding: 8,
+        border: '1px solid #eaecef',
+        '&:focus': {
+          boxShadow: '0px 0px 0px 3px rgba(3, 102, 214, 0.3)',
+          borderColor: '#0366d6'
+        }
+      }
+    }
+  })
+}
+
+export { Styled }

src/components/FlagsAutocomplete/FlagsAutocomplete.test.tsx

@@ -0,0 +1,173 @@
+import React from 'react'
+import { expect, vi } from 'vitest'
+import { ISO_CODES, MuiTelInputCountry } from '@shared/constants/countries'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import FlagsAutocomplete from './FlagsAutocomplete'
+import '@testing-library/jest-dom'
+
+function getAnchorEl() {
+  return screen.getByText('My textfield')
+}
+
+describe('components/FlagsAutocomplete', () => {
+  beforeAll(() => {
+    document.body.innerHTML = `<div>My textfield</div>`
+  })
+
+  test('should be displayed when anchorEl is valid', () => {
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        isoCode="FR"
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+      />
+    )
+  })
+
+  test('should render correctly', () => {
+    render(
+      <FlagsAutocomplete
+        isoCode="FR"
+        excludedCountries={['FR']}
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+        anchorEl={null}
+      />
+    )
+  })
+
+  test('should list all countries without filters props', () => {
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        isoCode="FR"
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+      />
+    )
+    expect(screen.getAllByRole('option').length).toBe(ISO_CODES.length)
+  })
+
+  test('should fire onSelectCountry', () => {
+    const callback = vi.fn((country: MuiTelInputCountry) => {
+      return country
+    })
+
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        isoCode="FR"
+        onSelectCountry={callback}
+        onClose={() => {}}
+      />
+    )
+    fireEvent.click(screen.getByText('France'))
+    expect(callback).toBeCalledTimes(1)
+  })
+
+  test('should exclude countries', () => {
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        isoCode="FR"
+        excludedCountries={['FR']}
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+      />
+    )
+    expect(screen.queryByText('France')).toBeNull()
+  })
+
+  test('should display EU countries except FR', () => {
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        excludedCountries={['FR']}
+        continents={['EU']}
+        isoCode="FR"
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+      />
+    )
+
+    expect(screen.queryByText('France')).toBeNull()
+    expect(screen.queryByText('Venezuela')).toBeNull()
+    expect(screen.getByText('Belgium')).toBeTruthy()
+  })
+
+  test('should display onlyCountries and not continents', () => {
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        onlyCountries={['VE']}
+        continents={['EU']}
+        isoCode="FR"
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+      />
+    )
+
+    expect(screen.getByText('Venezuela')).toBeTruthy()
+    expect(screen.getAllByRole('option').length).toBe(1)
+  })
+
+  test('should highlight preferred countries and in good order', () => {
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        preferredCountries={['FR', 'BE', 'VE']}
+        isoCode="FR"
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+      />
+    )
+
+    const options = screen.getAllByRole('option')
+    expect(options[0]).toHaveTextContent('FR')
+    expect(options[1]).toHaveTextContent('BE')
+    expect(options[2]).toHaveTextContent('VE')
+  })
+
+  test('should highlight preferred countries not excluded', () => {
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        preferredCountries={['FR', 'BE', 'VE']}
+        excludedCountries={['FR']}
+        isoCode="FR"
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+      />
+    )
+
+    const options = screen.getAllByRole('option')
+    expect(options[0]).toHaveTextContent('BE')
+    expect(options[1]).toHaveTextContent('VE')
+  })
+
+  test('should filter options based input value', async () => {
+    render(
+      <FlagsAutocomplete
+        anchorEl={getAnchorEl()}
+        onlyCountries={['FR', 'BE', 'VE']}
+        isoCode="FR"
+        onSelectCountry={() => {}}
+        onClose={() => {}}
+      />
+    )
+
+    const autocompleteInput = screen.getByTestId('flagsautocomplete-input')
+
+    await userEvent.type(autocompleteInput, 'bel', { delay: 1 })
+
+    await waitFor(() => {
+      expect(autocompleteInput).toHaveValue('bel')
+    })
+
+    const options = screen.getAllByRole('option')
+    expect(options.length).toBe(1)
+    expect(options[0]).toHaveTextContent('BE')
+  })
+})