@accessible/using-keyboard/dist/umd/using-keyboard.dev.js

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

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
  typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
  (global = global || self, factory(global.UsingKeyboard = {}, global.React));
}(this, (function (exports, React) { 'use strict';

  function _extends() {
    _extends = Object.assign || function (target) {
      for (var i = 1; i < arguments.length; i++) {
        var source = arguments[i];

        for (var key in source) {
          if (Object.prototype.hasOwnProperty.call(source, key)) {
            target[key] = source[key];
          }
        }
      }

      return target;
    };

    return _extends.apply(this, arguments);
  }

  var usePassiveLayoutEffect = React[typeof document !== 'undefined' && document.createElement !== void 0 ? 'useLayoutEffect' : 'useEffect'];

  var useLatest = function useLatest(current) {
    var storedValue = React.useRef(current);
    storedValue.current = current;
    return storedValue;
  };

  function useEvent(target, type, listener, cleanup) {
    var storedListener = useLatest(listener);
    var storedCleanup = useLatest(cleanup);
    usePassiveLayoutEffect(function () {
      var targetEl = target && 'current' in target ? target.current : target;
      if (!targetEl) return;
      var didUnsubscribe = 0;

      function listener() {
        if (didUnsubscribe) return;

        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        storedListener.current.apply(this, args);
      }

      targetEl.addEventListener(type, listener);
      var cleanup = storedCleanup.current;
      return function () {
        didUnsubscribe = 1;
        targetEl.removeEventListener(type, listener);
        cleanup && cleanup();
      }; // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [target, type]);
  }

  function toVal(mix) {
    var k,
        y,
        str = '';

    if (typeof mix === 'string' || typeof mix === 'number') {
      str += mix;
    } else if (typeof mix === 'object') {
      if (Array.isArray(mix)) {
        for (k = 0; k < mix.length; k++) {
          if (mix[k]) {
            if (y = toVal(mix[k])) {
              str && (str += ' ');
              str += y;
            }
          }
        }
      } else {
        for (k in mix) {
          if (mix[k]) {
            str && (str += ' ');
            str += k;
          }
        }
      }
    }

    return str;
  }

  function clsx () {
    var i = 0,
        tmp,
        x,
        str = '';

    while (i < arguments.length) {
      if (tmp = arguments[i++]) {
        if (x = toVal(tmp)) {
          str && (str += ' ');
          str += x;
        }
      }
    }

    return str;
  }

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

    var _React$useState = React.useState(defaultUsingKeyboard),
        usingKeyboard = _React$useState[0],
        setUsingKeyboard = _React$useState[1];

    useEvent(document.body, 'mousedown', function () {
      return setUsingKeyboard(false);
    });
    useEvent(document.body, 'keydown', function () {
      return setUsingKeyboard(true);
    });
    return usingKeyboard;
  };
  var BodyUsingKeyboard = function BodyUsingKeyboard(_ref) {
    var _ref$className = _ref.className,
        className = _ref$className === void 0 ? 'using-keyboard' : _ref$className,
        _ref$defaultUsingKeyb = _ref.defaultUsingKeyboard,
        defaultUsingKeyboard = _ref$defaultUsingKeyb === void 0 ? false : _ref$defaultUsingKeyb,
        _ref$children = _ref.children,
        children = _ref$children === void 0 ? null : _ref$children;
    var usingKeyboard = useUsingKeyboard(defaultUsingKeyboard);

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

    usePassiveLayoutEffect(function () {
      if (usingKeyboard) document.body.classList.add(className);
      return _ref3;
    }, [usingKeyboard, className]);
    return children;
  };
  var UsingKeyboard = function UsingKeyboard(_ref2) {
    var _ref2$className = _ref2.className,
        className = _ref2$className === void 0 ? 'using-keyboard' : _ref2$className,
        _ref2$defaultUsingKey = _ref2.defaultUsingKeyboard,
        defaultUsingKeyboard = _ref2$defaultUsingKey === void 0 ? false : _ref2$defaultUsingKey,
        children = _ref2.children;
    return /*#__PURE__*/React.cloneElement(children, _extends({}, 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';
  }

  exports.BodyUsingKeyboard = BodyUsingKeyboard;
  exports.UsingKeyboard = UsingKeyboard;
  exports.useUsingKeyboard = useUsingKeyboard;

  Object.defineProperty(exports, '__esModule', { value: true });

})));
//# sourceMappingURL=using-keyboard.dev.js.map