Version 2

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-country-select",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "A country select component with flag icons for React Bootstrap.",
   "keywords": [
     "react-bootstrap",
@@ -16,12 +16,10 @@
   "author": "Jason Wilson <[email protected]>",
   "main": "dist/index.js",
   "dependencies": {
-    "prop-types": "^15.7.2"
-  },
-  "peerDependencies": {
-    "react": ">=17.0.2",
-    "react-bootstrap": "^1.6.1",
-    "react-dom": ">=17.0.2"
+    "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.5.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.8",
@@ -37,9 +35,6 @@
     "bootstrap": "^5.0.2",
     "cross-env": "^7.0.3",
     "node-sass": "^6.0.1",
-    "react": "^17.0.2",
-    "react-bootstrap": "^1.6.1",
-    "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "react-test-renderer": "^17.0.2",
     "rollup": "^2.53.3",

rollup.config.js

@@ -5,8 +5,8 @@ import sass from 'rollup-plugin-sass';
 import path from 'path';
 import license from 'rollup-plugin-license';
 import resolve from '@rollup/plugin-node-resolve';
-// import typescript from '@rollup/plugin-typescript'; // supports declarations generation
-import ts from 'rollup-plugin-ts'; // supports declarations generation
+import typescript from '@rollup/plugin-typescript';
+import pkg from './package.json';
 
 const NODE_ENV = process.env.NODE_ENV || 'development';
 const outputFile = NODE_ENV === 'examples' ? './docs/js/examples-umd.js' : (NODE_ENV === 'production' ? './dist/index.js' : './dist/dev.js');
@@ -23,7 +23,9 @@ export default {
     replace({
       'process.env.NODE_ENV': JSON.stringify(NODE_ENV),
     }),
-    ts(),
+    typescript({
+      tsconfig: './tsconfig.json',
+    }),
     babel({
       exclude: ['node_modules/**'],
     }),
@@ -42,5 +44,8 @@ export default {
       },
     }),
   ],
-  external: NODE_ENV === 'examples' ? [ 'react', 'react-dom'] : [ 'react', 'react-bootstrap', 'react-dom', 'classnames' ],
+  external: NODE_ENV === 'examples' ? [ 'react', 'react-dom'] : [
+    ...Object.keys(pkg.dependencies || {}),
+    ...Object.keys(pkg.peerDependencies || {}),
+  ],
 };

src/CountrySelect/OverlayContent/List/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, createRef, useEffect, ReactNode, Ref } from 'react';
+import React, { useRef, useEffect, ReactNode } from 'react';
 
 import ICountry from '../../ICountry';
 
@@ -8,7 +8,7 @@ import './style.scss';
 
 export interface ListProps {
   classPrefix: string;
-  containerEl: HTMLDivElement;
+  containerEl?: HTMLDivElement;
   list: ICountry[];
   activeItemIndex: number;
   countryLabelFormatter: (country: ICountry) => ReactNode;
@@ -28,9 +28,8 @@ const List = ({
   onActiveItemOverflow,
 }: ListProps) => {
 
-  const listEl = useRef(null);
-  // const activeItemEl = createRef();
-  const activeItemEl = useRef<HTMLLIElement>();
+  const listEl = useRef<HTMLUListElement>(null);
+  const activeItemEl = useRef<HTMLLIElement>(null);
 
   useEffect(() => {
 

src/CountrySelect/OverlayContent/index.tsx

@@ -13,7 +13,7 @@ export interface OverlayContentProps {
   countryLabelFormatter: (country: ICountry) => ReactNode;
   flags: boolean;
   noMatchesText: ReactNode;
-  maxHeight: number;
+  maxHeight?: number;
   onListItemClick: (itemIndex: number) => void;
 }
 
@@ -28,11 +28,13 @@ const OverlayContent = ({
   onListItemClick,
 }: OverlayContentProps) => {
 
-  const el = useRef(null);
+  const el = useRef<HTMLDivElement>(null);
 
-  const handleAciveItemCutOff = overflowAmount => {
+  const handleAciveItemCutOff = (overflowAmount: number) => {
 
-    el.current.scrollTop = el.current.scrollTop + overflowAmount;
+    if (el.current) {
+      el.current.scrollTop = el.current.scrollTop + overflowAmount;
+    }
 
   };
 
@@ -58,7 +60,7 @@ const OverlayContent = ({
       {(list.length >= 1) &&
         <List
           classPrefix={classPrefix}
-          containerEl={el.current}
+          containerEl={el.current || undefined}
           list={list}
           activeItemIndex={activeListItemIndex}
           countryLabelFormatter={countryLabelFormatter}

src/CountrySelect/OverlayContent/style.scss

@@ -2,6 +2,7 @@
 
 .country-select__overlay-content {
 
+  margin-top: 4px;
   border: $border;
   border-radius: $border-radius;
   overflow-y: scroll;

src/CountrySelect/actions.ts

@@ -8,35 +8,44 @@ import {
   CLEAR,
 } from './constants';
 
-export const init = dispatch => combinedCountries => dispatch({
+import ICountry from '../CountrySelect/ICountry';
+import { IAction, IActionInit, IActionTextChange, IActionActiveListItemChange } from './reducer';
+
+export const init = (dispatch: React.Dispatch<IActionInit>) => (combinedCountries: ICountry[]) => dispatch({
   type: INIT,
   combinedCountries,
 });
 
-export const focus = dispatch => () => dispatch({
+export const focus = (dispatch: React.Dispatch<IAction>) => () => dispatch({
   type: FOCUS,
 });
 
-export const blur = dispatch => () => dispatch({
+export const blur = (dispatch: React.Dispatch<IAction>) => () => dispatch({
   type: BLUR,
 });
 
-export const textChange = dispatch => (inputText, list, activeListItemIndex) => dispatch({
+export const textChange = (dispatch: React.Dispatch<IActionTextChange>) => (
+  inputText: string,
+  list: ICountry[],
+  activeListItemIndex: number,
+) => dispatch({
   type: TEXT_CHANGE,
   inputText,
   list,
   activeListItemIndex,
 });
 
-export const activeListItemChange = dispatch => activeListItemIndex => dispatch({
+export const activeListItemChange = (dispatch: React.Dispatch<IActionActiveListItemChange>) => (
+  activeListItemIndex: number,
+) => dispatch({
   type: ACTIVE_LIST_ITEM_CHANGE,
   activeListItemIndex,
 });
 
-export const countrySelect = dispatch => () => dispatch({
+export const countrySelect = (dispatch: React.Dispatch<IAction>) => () => dispatch({
   type: COUNTRY_SELECT,
 });
 
-export const clear = dispatch => () => dispatch({
+export const clear = (dispatch: React.Dispatch<IAction>) => () => dispatch({
   type: CLEAR,
 });

src/CountrySelect/index.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useRef, useEffect, useReducer, ReactNode, ChangeEvent } from 'react';
-// import PropTypes from 'prop-types';
+import React, { useState, useRef, useEffect, useReducer, ReactNode, ChangeEvent, memo } from 'react';
 import { InputGroup, FormControl, Overlay } from 'react-bootstrap';
 
 import { COUNTRIES } from './data';
@@ -34,8 +33,8 @@ import './style.scss';
 
 export interface CountrySelectProps {
   value: string | ICountry;
-  onChange: (countryIdOrCountry: string | ICountry) => void;
-  onTextChange: (text: string, changeEvent: ChangeEvent) => void;
+  onChange: (countryIdOrCountry: string | ICountry | null) => void;
+  onTextChange?: (text: string, changeEvent: ChangeEvent) => void;
   countries?: ICountry[];
   exclusions?: string[];
   additions?: ICountry[];
@@ -86,7 +85,7 @@ const CountrySelect = ({
   className,
 }: CountrySelectProps) => {
 
-  const inputGroupRef = useRef(null);
+  const inputGroupRef = useRef<HTMLDivElement>(null);
   const formControlRef = useRef(null);
   const hasInitRef = useRef(false);
   const [ width, setWidth ] = useState(-1);
@@ -129,11 +128,14 @@ const CountrySelect = ({
 
   useEffect(() => {
 
-    setWidth(inputGroupRef.current.offsetWidth);
+    if (inputGroupRef.current) {
+      console.log('width: ', inputGroupRef.current.offsetWidth);
+      setWidth(inputGroupRef.current.offsetWidth);
+    }
 
-  }, [ inputGroupRef ]);
+  }, [ inputGroupRef.current ]);
 
-  const select = listItemIndex => {
+  const select = (listItemIndex: number) => {
 
     const country = list[listItemIndex];
 
@@ -149,7 +151,7 @@ const CountrySelect = ({
 
   };
 
-  const inputChange = (text, ev) => {
+  const inputChange = (text: string, ev: React.ChangeEvent) => {
 
     if (selectedCountry && flags) {
 
@@ -158,7 +160,7 @@ const CountrySelect = ({
     }
 
     const [ updatedList, updatedActiveListItemIndex ]
-      = getUpdatedList(text, list, activeListItemIndex, combinedCountries, sort, matchNameFromStart, matchAbbreviations);
+      = getUpdatedList(text, list, activeListItemIndex, combinedCountries, matchNameFromStart, matchAbbreviations, sort);
 
     handleTextChange(text, updatedList, updatedActiveListItemIndex);
 
@@ -167,7 +169,7 @@ const CountrySelect = ({
 
   };
 
-  const handleKey = ev => {
+  const handleKey = (ev: React.KeyboardEvent) => {
 
     if (ev.key === 'ArrowUp') {
 
@@ -200,7 +202,9 @@ const CountrySelect = ({
   ]);
 
   return (
-    <div className={classes}>
+    <div
+      className={classes}
+    >
 
       <InputGroup
         ref={inputGroupRef}
@@ -209,17 +213,13 @@ const CountrySelect = ({
       >
 
         { (!flush && flags) && 
-          <InputGroup.Prepend>
-
-            <InputGroup.Text
-              className={`${classPrefix}__input-group__flag`}
-            >
+          <InputGroup.Text
+            className={`${classPrefix}__input-group__flag`}
+          >
 
-              {selectedCountry ? selectedCountry.flag : ''}
-
-            </InputGroup.Text>
-
-          </InputGroup.Prepend>
+            {selectedCountry ? selectedCountry.flag : ''}
+
+          </InputGroup.Text>
         }
 
         <FormControl
@@ -281,4 +281,4 @@ const CountrySelect = ({
 
 };
 
-export default CountrySelect;
+export default memo(CountrySelect);