react-elegant-ui/esm/hocs/withFocusVisible.js

Elegant UI components, made by BEM best practices for react

var __assign = this && this.__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);
};
import React from 'react';
import { useFocusVisible } from '@react-aria/interactions';
import { cn } from '@bem-react/classname';
import { getDisplayName } from '../lib/getDisplayName';
/**
 * HOC which add class `focusVisible` while user focus with keyboard
 */
export var withFocusVisible = function (blockName) {
  return function (Component) {
    var blockNameCn = cn(blockName);
    var HOC = function (props) {
      var isFocusVisible = useFocusVisible().isFocusVisible;
      return /*#__PURE__*/React.createElement(Component, __assign({}, props, {
        className: blockNameCn({
          focusVisible: isFocusVisible
        }, [props.className])
      }));
    };
    HOC.displayName = "withFocusVisible(".concat(getDisplayName(Component), ")");
    return HOC;
  };
};