Upgrade React to v17; convert to TypeScript; fix no matches backgroun…

…d color; onTextChange change event as second argument

.babelrc

@@ -14,7 +14,8 @@
     "test": {
       "presets": [
         "@babel/preset-env",
-        "@babel/preset-react"
+        "@babel/preset-react",
+        "@babel/preset-typescript"
       ],
       "plugins": [
         "@babel/plugin-proposal-class-properties"

.npmignore

@@ -6,3 +6,4 @@ src
 CONTRIBUTING.md
 rollup.config.js
 .babelrc
+*.tgz

README.md

@@ -90,6 +90,7 @@ const MyComponent = () => {
 | `matchAbbreviations` | `boolean` | `false` | If `true` autosuggest matches against alpha2, alpha3 and IOC abbreviations in addition to country names. |
 | `countryLabelFormatter` | `function` | | A custom country list item formatter. The argument is a country object. |
 | `throwInvalidValueError` | `boolean` | `false` | If `true` an error is thrown if the provided value does not match a country. |
+<!-- | `closeOnSelect` | `boolean` | `true` | If `true` the list overlay will close when a country is selected. If `false` the list overlay will remain visible while the input is focused. | -->
 | `formControlProps` | `object` | | Properties applied to the `<FormControl/>` input. |
 | `overlayProps` | `object` | | Properties applied to the overlay `<div>` element that contains the country list. |
 | `classPrefix` | `string` | `'country-select'` | Change the underlying component CSS base class name and modifier class names prefix. **This is an escape hatch** for working with heavily customized CSS. |

docs/css/react-bootstrap-country-select.css

@@ -8,6 +8,7 @@
 .country-select__overlay-content .country-select__no-matches {
   padding: 0.75rem 1.25rem;
   color: #6c757d;
+  background-color: #fff;
 }.country-select__list {
   list-style: none;
   margin: 0;