@accessible/using-keyboard/dist/esm/index.mjs.map

React utilities for adding accessible focus styles to elements when only someone is using keyboard navigation.

{"version":3,"file":"index.mjs","sources":["../../src/index.tsx"],"sourcesContent":["import * as React from 'react'\nimport useLayoutEffect from '@react-hook/passive-layout-effect'\nimport useEvent from '@react-hook/event'\nimport clsx from 'clsx'\n\n// istanbul ignore next\nexport const useUsingKeyboard = (defaultUsingKeyboard = false): boolean => {\n  const [usingKeyboard, setUsingKeyboard] = React.useState(defaultUsingKeyboard)\n  useEvent(document.body, 'mousedown', () => setUsingKeyboard(false))\n  useEvent(document.body, 'keydown', () => setUsingKeyboard(true))\n  return usingKeyboard\n}\n\nexport interface BodyUsingKeyboardProps {\n  className?: string\n  defaultUsingKeyboard?: boolean\n  children?: any\n}\n\nexport const BodyUsingKeyboard = ({\n  className = 'using-keyboard',\n  defaultUsingKeyboard = false,\n  children = null,\n}: BodyUsingKeyboardProps) => {\n  const usingKeyboard = useUsingKeyboard(defaultUsingKeyboard)\n  useLayoutEffect(() => {\n    if (usingKeyboard) document.body.classList.add(className)\n    return () => {\n      document.body.classList.remove(className)\n    }\n  }, [usingKeyboard, className])\n  return children\n}\n\nexport interface UsingKeyboardProps {\n  className?: string\n  defaultUsingKeyboard?: boolean\n  children: React.ReactElement | JSX.Element\n}\n\nexport const UsingKeyboard = ({\n  className = 'using-keyboard',\n  defaultUsingKeyboard = false,\n  children,\n}: UsingKeyboardProps) =>\n  React.cloneElement(\n    children,\n    Object.assign({}, children.props, {\n      className: clsx(\n        children.props.className,\n        useUsingKeyboard(defaultUsingKeyboard) && className\n      ),\n    })\n  )\n\n// istanbul ignore next\nif (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production') {\n  BodyUsingKeyboard.displayName = 'BodyUsingKeyboard'\n  UsingKeyboard.displayName = 'UsingKeyboard'\n}\n"],"names":["useUsingKeyboard","defaultUsingKeyboard","usingKeyboard","setUsingKeyboard","React","useEvent","document","body","BodyUsingKeyboard","classList","remove","className","children","useLayoutEffect","add","UsingKeyboard","Object","assign","props","clsx"],"mappings":"6JAMaA,EAAmB,SAACC,YAAAA,IAAAA,EAAuB,OAC/CC,EAAeC,GAAoBC,EAAeH,UACzDI,EAASC,SAASC,KAAM,YAAa,IAAMJ,EAAiB,IAC5DE,EAASC,SAASC,KAAM,UAAW,IAAMJ,EAAiB,IACnDD,GASIM,mBASPF,SAASC,KAAKE,UAAUC,OAAOC,OATHA,UAChCA,EAAY,iBADoBV,qBAEhCA,EAAuB,EAFSW,SAGhCA,EAAW,QAELV,EAAgBF,EAAiBC,UACvCY,EAAgB,KACVX,GAAeI,SAASC,KAAKE,UAAUK,IAAIH,MAI9C,CAACT,EAAeS,IACZC,GASIG,UAAiBJ,UAC5BA,EAAY,iBADgBV,qBAE5BA,EAAuB,EAFKW,SAG5BA,YAEAR,EACEQ,EACAI,OAAOC,OAAO,GAAIL,EAASM,MAAO,CAChCP,UAAWQ,EACTP,EAASM,MAAMP,UACfX,EAAiBC,IAAyBU"}