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

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

import { useState, cloneElement } from 'react';
import useLayoutEffect from '@react-hook/passive-layout-effect';
import useEvent from '@react-hook/event';
import clsx from 'clsx';

var useUsingKeyboard = function useUsingKeyboard(defaultUsingKeyboard) {
  if (defaultUsingKeyboard === void 0) {
    defaultUsingKeyboard = false;
  }

  var [usingKeyboard, setUsingKeyboard] = useState(defaultUsingKeyboard);
  useEvent(document.body, 'mousedown', () => setUsingKeyboard(false));
  useEvent(document.body, 'keydown', () => setUsingKeyboard(true));
  return usingKeyboard;
};
var BodyUsingKeyboard = (_ref) => {
  var {
    className = 'using-keyboard',
    defaultUsingKeyboard = false,
    children = null
  } = _ref;
  var usingKeyboard = useUsingKeyboard(defaultUsingKeyboard);

  function _ref3() {
    document.body.classList.remove(className);
  }

  useLayoutEffect(() => {
    if (usingKeyboard) document.body.classList.add(className);
    return _ref3;
  }, [usingKeyboard, className]);
  return children;
};
var UsingKeyboard = (_ref2) => {
  var {
    className = 'using-keyboard',
    defaultUsingKeyboard = false,
    children
  } = _ref2;
  return /*#__PURE__*/cloneElement(children, Object.assign({}, children.props, {
    className: clsx(children.props.className, useUsingKeyboard(defaultUsingKeyboard) && className)
  }));
}; // istanbul ignore next

if (typeof process !== 'undefined' && "production" !== 'production') {
  BodyUsingKeyboard.displayName = 'BodyUsingKeyboard';
  UsingKeyboard.displayName = 'UsingKeyboard';
}

export { BodyUsingKeyboard, UsingKeyboard, useUsingKeyboard };
//# sourceMappingURL=index.dev.mjs.map