Use @swc/jest and upgrade packages

jest.config.js

@@ -1,5 +1,19 @@
 module.exports = {
   ...require('@adhamu/zero/jest'),
+  transform: {
+    '^.+\\.ts(x)?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          transform: {
+            react: {
+              runtime: 'automatic',
+            },
+          },
+        },
+      },
+    ],
+  },
   setupFilesAfterEnv: ['<rootDir>/setupTests.ts'],
   testEnvironment: 'jsdom',
   collectCoverageFrom: [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-input-suggestions",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A React input component with pluggable suggestions and autocomplete",
   "keywords": [
     "react",
@@ -46,9 +46,11 @@
     "react-string-replace": "^1.0.0"
   },
   "devDependencies": {
-    "@adhamu/zero": "^4.0.0",
+    "@adhamu/zero": "^4.1.1",
     "@emotion/jest": "^11.8.0",
     "@stylelint/postcss-css-in-js": "^0.37.2",
+    "@swc/core": "^1.2.171",
+    "@swc/jest": "^0.2.20",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^14.1.1",
@@ -61,7 +63,6 @@
     "jest": "^27.5.1",
     "live-server": "^1.2.1",
     "postcss-syntax": "^0.36.2",
-    "ts-jest": "^27.1.4",
     "typescript": "^4.6.3"
   },
   "peerDependencies": {

src/useSuggestions.ts

@@ -23,15 +23,6 @@ export const useSuggestions = (
 ) => {
   const [showSuggestions, setShowSuggestions] = useState(false)
 
-  const handleClickOutside = (e: MouseEvent) => {
-    if (
-      showSuggestions &&
-      !searchSuggestionsRef.current?.contains(e.target as Node)
-    ) {
-      setShowSuggestions(false)
-    }
-  }
-
   useEffect(() => {
     setShowSuggestions(
       Boolean(
@@ -41,9 +32,18 @@ export const useSuggestions = (
           results.length > 0
       )
     )
-  }, [results])
+  }, [inputSearchRef, results])
 
   useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (
+        showSuggestions &&
+        !searchSuggestionsRef.current?.contains(e.target as Node)
+      ) {
+        setShowSuggestions(false)
+      }
+    }
+
     searchSuggestionsRef.current?.querySelectorAll('li')?.forEach(el => {
       // eslint-disable-next-line no-param-reassign
       ;(el.firstChild as HTMLElement).tabIndex = 0
@@ -54,7 +54,7 @@ export const useSuggestions = (
     return () => {
       document.removeEventListener('mousedown', handleClickOutside)
     }
-  }, [searchSuggestionsRef.current])
+  }, [searchSuggestionsRef, showSuggestions])
 
   const selectElement = (type: ResultType) => {
     ;(
@@ -94,7 +94,8 @@ export const useSuggestions = (
   ) => {
     e.preventDefault()
 
-    const resultType = e.currentTarget?.[type]?.firstChild as HTMLInputElement
+    const resultType = e.currentTarget?.[`${type}`]
+      ?.firstChild as HTMLInputElement
 
     if (resultType) {
       resultType.focus()