react-elegant-ui/hocs/withFocusVisible.js

Elegant UI components, made by BEM best practices for react

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.withFocusVisible = void 0;
var _react = _interopRequireDefault(require("react"));
var _interactions = require("@react-aria/interactions");
var _classname = require("@bem-react/classname");
var _getDisplayName = require("../lib/getDisplayName");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__assign || function () {
  __assign = Object.assign || function (t) {
    for (var s, i = 1, n = arguments.length; i < n; i++) {
      s = arguments[i];
      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
    }
    return t;
  };
  return __assign.apply(this, arguments);
};
/**
 * HOC which add class `focusVisible` while user focus with keyboard
 */
var withFocusVisible = function (blockName) {
  return function (Component) {
    var blockNameCn = (0, _classname.cn)(blockName);
    var HOC = function (props) {
      var isFocusVisible = (0, _interactions.useFocusVisible)().isFocusVisible;
      return /*#__PURE__*/_react.default.createElement(Component, __assign({}, props, {
        className: blockNameCn({
          focusVisible: isFocusVisible
        }, [props.className])
      }));
    };
    HOC.displayName = "withFocusVisible(".concat((0, _getDisplayName.getDisplayName)(Component), ")");
    return HOC;
  };
};
exports.withFocusVisible = withFocusVisible;