Merge pull request #39 from PsycleResearch/features/improved-keyboard…

…-hook

feat: Improved keyboard hook + upgrade deps

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psycle/repsycle",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "description": "Psycle Research front-end toolkit",
   "author": "Psycle Research",
   "keywords": [
@@ -39,12 +39,12 @@
     "@rollup/plugin-commonjs": "^20.0.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@rollup/plugin-typescript": "^8.3.0",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
-    "@storybook/builder-webpack5": "^6.5.10",
-    "@storybook/manager-webpack5": "^6.5.10",
-    "@storybook/react": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
+    "@storybook/builder-webpack5": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/react": "^6.5.12",
     "@types/react": "^17",
     "@types/react-dom": "^17",
     "@typescript-eslint/eslint-plugin": "^5.21.0",
@@ -55,7 +55,7 @@
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
-    "eslint-plugin-storybook": "^0.6.4",
+    "eslint-plugin-storybook": "^0.6.6",
     "eslint-plugin-unused-imports": "^2.0.0",
     "install-peers-cli": "^2.2.0",
     "prettier": "^2.6.2",

src/hooks.ts

@@ -30,16 +30,8 @@ export function usePointerPosition() {
         window.addEventListener('pointermove', updatePosition, false)
 
         return () => {
-            window.removeEventListener(
-                'pointermove',
-                updatePosition,
-                false,
-            )
-            window.removeEventListener(
-                'pointerenter',
-                updatePosition,
-                false,
-            )
+            window.removeEventListener('pointermove', updatePosition, false)
+            window.removeEventListener('pointerenter', updatePosition, false)
         }
     })
 
@@ -283,15 +275,18 @@ export function useSetState<T>(
 }
 
 export function useKeyPress(
-    targetKey: string,
+    targetKey: string | string[],
     handler: (event: KeyboardEvent) => void,
 ) {
     const handlerRef = useRef(handler)
     handlerRef.current = handler
 
     useEffect(() => {
         const handleDown = (event: KeyboardEvent) => {
-            if (event.key === targetKey) {
+            if (
+                (Array.isArray(targetKey) && targetKey.includes(event.key)) ||
+                event.key === targetKey
+            ) {
                 handlerRef.current.call(window, event)
             }
         }