The CountrySelector is a collapsible UI panel that enables users to select or deselect countries using a searchable list. It complements the map interface by offering a textual way to manage selections.

Purpose

This component provides an accessible and searchable interface for users who prefer to select countries from a list rather than interacting with the map. It supports batch selection logic by working with confirmed and pending selections.

Key Features

• Toggle visibility with a "Show/Hide countries” button
• Search bar to filter country list in real-time
• Checkbox UI reflecting selection state (confirmed, added, or removed)
• Event handling to stage country selection via onTogglePending
• Propagation control to prevent map interference (via Leaflet DOM events)

Location in Codebase

src/
├── Components/
│   └── components/
│       └── countrySelector/
│           ├── CountrySelector.tsx
│           ├── CountrySelector.css
│           └── CountrySelector.test.tsx

Dependencies

• Country data: Uses countries.ts from the data/ folder
• Styling: Fully scoped via CSS
• Interaction: Depends on leaflet to control event bubbling inside the map