use-keybinds/dist/useKeybinds.mjs.map

Lightweight keybind library for React

{"version":3,"sources":["../src/useKeybinds.tsx","../src/helpers/useFocusedElement.tsx","../src/KeybindsProvider.tsx","../src/utils.ts"],"sourcesContent":["import React, { useContext, useEffect } from \"react\";\nimport useFocusedElement from \"./helpers/useFocusedElement\";\nimport { KeybindsContext } from \"./KeybindsProvider\";\nimport type {KeybindCallbacks, KeyboardEventKeycode} from \"./types\";\nimport { createKeybindCombinationString } from \"./utils\";\n\nconst useKeybinds = <Slug extends string>(callbacks: KeybindCallbacks<Slug> = {}) => {\n  const focusedElement = useFocusedElement();\n  const { combinationsToKeybindKey } = useContext(KeybindsContext);\n\n  useEffect(() => {\n    const pressedKeyCodes = new Set<KeyboardEventKeycode>([]);\n    const recentlyPressedKeyCodes = new Set<KeyboardEventKeycode>([]);\n\n    const resetState = () => {\n      pressedKeyCodes.clear();\n      recentlyPressedKeyCodes.clear();\n    };\n\n    const isKeyCodeUsed = (keyCode: KeyboardEventKeycode) => {\n      const allCombinationsString = Object.keys(combinationsToKeybindKey).join(\"\");\n      return allCombinationsString.includes(keyCode);\n    };\n\n    const handleKeydown = (event: KeyboardEvent) => {\n      // Block the event if the user is focusing a blacklisted element\n      if (focusedElement && [\"INPUT\", \"TEXTAREA\"].includes(focusedElement.tagName)) {\n        return;\n      }\n\n      const keyCode = event.code as KeyboardEventKeycode;\n\n      if (isKeyCodeUsed(keyCode)) {\n        pressedKeyCodes.add(keyCode);\n        recentlyPressedKeyCodes.add(keyCode);\n        setTimeout(() => recentlyPressedKeyCodes.delete(keyCode), 4000);\n      } else {\n        resetState();\n      }\n\n      const combinationString = createKeybindCombinationString([...pressedKeyCodes], false);\n      const sequentialCombinationString = createKeybindCombinationString(\n        [...recentlyPressedKeyCodes],\n        true\n      );\n      const keybindSlug = combinationsToKeybindKey[combinationString] as Slug;\n      const sequentialKeybindSlug = combinationsToKeybindKey[sequentialCombinationString] as Slug;\n\n      if (sequentialKeybindSlug) resetState();\n\n      const callbackFunction = callbacks[sequentialKeybindSlug ?? keybindSlug];\n      if (!callbackFunction) return;\n\n      recentlyPressedKeyCodes.clear();\n      callbackFunction(event);\n    };\n\n    const handleKeyup = (e: KeyboardEvent) => {\n      // Block the event if the user is focusing a blacklisted element\n      if (focusedElement && [\"INPUT\", \"TEXTAREA\"].includes(focusedElement.tagName)) {\n        return;\n      }\n\n      const keyCode = e.code as KeyboardEventKeycode;\n      pressedKeyCodes.delete(keyCode);\n    };\n\n    addEventListener(\"keydown\", handleKeydown);\n    addEventListener(\"keyup\", handleKeyup);\n\n    return () => {\n      removeEventListener(\"keydown\", handleKeydown);\n      removeEventListener(\"keyup\", handleKeyup);\n    };\n  }, [callbacks, combinationsToKeybindKey, focusedElement]);\n};\n\nexport default useKeybinds;\n","import React, { useCallback, useEffect, useState } from \"react\";\n\nconst useFocusedElement = (): Element | null => {\n  const [focusedElement, setFocusedElement] = useState<Element | null>(\n    typeof window !== \"undefined\" ? document.activeElement : null\n  );\n\n  const handleFocusIn = useCallback(() => {\n    setFocusedElement(document.activeElement);\n  }, []);\n\n  const handleFocusOut = useCallback(() => {\n    setFocusedElement(null);\n  }, []);\n\n  useEffect(() => {\n    addEventListener(\"focusin\", handleFocusIn);\n    addEventListener(\"focusout\", handleFocusOut);\n    return () => {\n      removeEventListener(\"focusin\", handleFocusIn);\n      removeEventListener(\"focusout\", handleFocusOut);\n    };\n  }, [handleFocusIn, handleFocusOut]);\n\n  return focusedElement;\n};\n\nexport default useFocusedElement;\n","import React, { createContext, useMemo } from \"react\";\nimport { createKeybindCombinationString } from \"./utils\";\nimport type { ReactNode } from \"react\";\nimport type { Keybind, Keybinds } from \"./types\";\n\nexport const KeybindsContext = createContext<{\n  keybinds: Keybinds<string>;\n  combinationsToKeybindKey: Record<string, string>;\n}>({\n  keybinds: {},\n  combinationsToKeybindKey: {},\n});\n\ninterface KeybindsProviderProps<Slug extends string> {\n  children: ReactNode;\n  keybinds: Keybinds<Slug>;\n}\n\nconst KeybindsProvider = <Slug extends string>(props: KeybindsProviderProps<Slug>) => {\n  const { children, keybinds = {} } = props;\n\n  const combinationsToKeybindKey = useMemo<Record<string, Slug>>(() => {\n    return Object.entries(keybinds).reduce((result, entry) => {\n      const key = entry[0] as string;\n      const keybind: Keybind = entry[1] as Keybind;\n      const combinationString = createKeybindCombinationString(\n        keybind.keybind,\n        keybind.isSequential\n      );\n      return { ...result, [combinationString]: key };\n    }, {});\n  }, [keybinds]);\n\n  return (\n    <KeybindsContext.Provider value={{ keybinds, combinationsToKeybindKey }}>\n      {children}\n    </KeybindsContext.Provider>\n  );\n};\n\nexport default KeybindsProvider;\n","import type { KeybindCombination } from \"./types\";\n\nexport const createKeybindCombinationString = (combination: KeybindCombination, isSequential?: boolean) => {\n  return (isSequential ? \"isSequential-\" : \"\") + combination.join(\"\");\n};\n"],"mappings":";AAAA,OAAgB,cAAAA,EAAY,aAAAC,MAAiB,QCA7C,OAAgB,eAAAC,EAAa,aAAAC,EAAW,YAAAC,MAAgB,QAExD,IAAMC,EAAoB,IAAsB,CAC9C,GAAM,CAACC,EAAgBC,CAAiB,EAAIH,EAC1C,OAAO,OAAW,IAAc,SAAS,cAAgB,IAC3D,EAEMI,EAAgBN,EAAY,IAAM,CACtCK,EAAkB,SAAS,aAAa,CAC1C,EAAG,CAAC,CAAC,EAECE,EAAiBP,EAAY,IAAM,CACvCK,EAAkB,IAAI,CACxB,EAAG,CAAC,CAAC,EAEL,OAAAJ,EAAU,KACR,iBAAiB,UAAWK,CAAa,EACzC,iBAAiB,WAAYC,CAAc,EACpC,IAAM,CACX,oBAAoB,UAAWD,CAAa,EAC5C,oBAAoB,WAAYC,CAAc,CAChD,GACC,CAACD,EAAeC,CAAc,CAAC,EAE3BH,CACT,EAEOI,EAAQL,EC3Bf,OAAOM,GAAS,iBAAAC,EAAe,WAAAC,MAAe,QCEvC,IAAMC,EAAiC,CAACC,EAAiCC,KACtEA,EAAe,gBAAkB,IAAMD,EAAY,KAAK,EAAE,EDE7D,IAAME,EAAkBC,EAG5B,CACD,SAAU,CAAC,EACX,yBAA0B,CAAC,CAC7B,CAAC,EFLD,IAAMC,EAAc,CAAsBC,EAAoC,CAAC,IAAM,CACnF,IAAMC,EAAiBC,EAAkB,EACnC,CAAE,yBAAAC,CAAyB,EAAIC,EAAWC,CAAe,EAE/DC,EAAU,IAAM,CACd,IAAMC,EAAkB,IAAI,IAA0B,CAAC,CAAC,EAClDC,EAA0B,IAAI,IAA0B,CAAC,CAAC,EAE1DC,EAAa,IAAM,CACvBF,EAAgB,MAAM,EACtBC,EAAwB,MAAM,CAChC,EAEME,EAAiBC,GACS,OAAO,KAAKR,CAAwB,EAAE,KAAK,EAAE,EAC9C,SAASQ,CAAO,EAGzCC,EAAiBC,GAAyB,CAE9C,GAAIZ,GAAkB,CAAC,QAAS,UAAU,EAAE,SAASA,EAAe,OAAO,EACzE,OAGF,IAAMU,EAAUE,EAAM,KAElBH,EAAcC,CAAO,GACvBJ,EAAgB,IAAII,CAAO,EAC3BH,EAAwB,IAAIG,CAAO,EACnC,WAAW,IAAMH,EAAwB,OAAOG,CAAO,EAAG,GAAI,GAE9DF,EAAW,EAGb,IAAMK,EAAoBC,EAA+B,CAAC,GAAGR,CAAe,EAAG,EAAK,EAC9ES,EAA8BD,EAClC,CAAC,GAAGP,CAAuB,EAC3B,EACF,EACMS,EAAcd,EAAyBW,CAAiB,EACxDI,EAAwBf,EAAyBa,CAA2B,EAE9EE,GAAuBT,EAAW,EAEtC,IAAMU,EAAmBnB,EAAUkB,GAAyBD,CAAW,EAClEE,IAELX,EAAwB,MAAM,EAC9BW,EAAiBN,CAAK,EACxB,EAEMO,EAAeC,GAAqB,CAExC,GAAIpB,GAAkB,CAAC,QAAS,UAAU,EAAE,SAASA,EAAe,OAAO,EACzE,OAGF,IAAMU,EAAUU,EAAE,KAClBd,EAAgB,OAAOI,CAAO,CAChC,EAEA,wBAAiB,UAAWC,CAAa,EACzC,iBAAiB,QAASQ,CAAW,EAE9B,IAAM,CACX,oBAAoB,UAAWR,CAAa,EAC5C,oBAAoB,QAASQ,CAAW,CAC1C,CACF,EAAG,CAACpB,EAAWG,EAA0BF,CAAc,CAAC,CAC1D,EAEOqB,EAAQvB","names":["useContext","useEffect","useCallback","useEffect","useState","useFocusedElement","focusedElement","setFocusedElement","handleFocusIn","handleFocusOut","useFocusedElement_default","React","createContext","useMemo","createKeybindCombinationString","combination","isSequential","KeybindsContext","createContext","useKeybinds","callbacks","focusedElement","useFocusedElement_default","combinationsToKeybindKey","useContext","KeybindsContext","useEffect","pressedKeyCodes","recentlyPressedKeyCodes","resetState","isKeyCodeUsed","keyCode","handleKeydown","event","combinationString","createKeybindCombinationString","sequentialCombinationString","keybindSlug","sequentialKeybindSlug","callbackFunction","handleKeyup","e","useKeybinds_default"]}