@semcore/icon/lib/cjs/Icon.js

Semrush Icon Component

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _core = require("@semcore/core");
var _keyboardFocusEnhance2 = _interopRequireDefault(require("@semcore/core/lib/utils/enhances/keyboardFocusEnhance"));
var _hasLabels = _interopRequireDefault(require("@semcore/core/lib/utils/hasLabels"));
var _logger = _interopRequireDefault(require("@semcore/core/lib/utils/logger"));
var _propsForElement = _interopRequireDefault(require("@semcore/core/lib/utils/propsForElement"));
var _ref = require("@semcore/core/lib/utils/ref");
var _useColorResolver = require("@semcore/core/lib/utils/use/useColorResolver");
var _flexBox = require("@semcore/flex-box");
var _classnames = _interopRequireDefault(require("classnames"));
var _react = _interopRequireDefault(require("react"));
var _excluded = ["keyboardFocused"];
/*!__reshadow-styles__:"./style/icon.shadow.css"*/
var styles = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SIcon_1215i_gg_{display:inline-block;-webkit-user-select:none;-moz-user-select:none;user-select:none;shape-rendering:geometricPrecision;box-sizing:content-box;fill:currentColor;flex-shrink:0;outline:0;color:var(--color_1215i)}.___SIcon_1215i_gg_.__interactive_1215i_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1215i_gg_.__interactive_1215i_gg_:hover{filter:brightness(.8)}}", /*__inner_css_end__*/"1215i_gg_"),
/*__reshadow_css_end__*/
{
  "__SIcon": "___SIcon_1215i_gg_",
  "--color": "--color_1215i",
  "_interactive": "__interactive_1215i_gg_"
});
function Icon(props, ref) {
  var _useBox = (0, _flexBox.useBox)((0, _objectSpread2["default"])({
      'tag': 'svg',
      'data-ui-name': 'Icon',
      'width': 16,
      'height': 16,
      'viewBox': '0 0 16 16',
      'focusable': props.interactive
    }, props), ref),
    _useBox2 = (0, _slicedToArray2["default"])(_useBox, 2),
    SIcon = _useBox2[0],
    other = _useBox2[1];
  var interactive = props.interactive,
    colorProps = props.color;
  var resolveColor = (0, _useColorResolver.useColorResolver)();
  var color = resolveColor(colorProps);
  var _keyboardFocusEnhance = (0, _keyboardFocusEnhance2["default"])()((0, _objectSpread2["default"])({
      disabled: !interactive
    }, other)),
    keyboardFocused = _keyboardFocusEnhance.keyboardFocused,
    propsEnhance = (0, _objectWithoutProperties2["default"])(_keyboardFocusEnhance, _excluded);
  var sstyles = (0, _core.sstyled)(styles);
  var _sstyles$cn = sstyles.cn('SIcon', {
      'use:color': color,
      'interactive': interactive,
      'keyboardFocused': keyboardFocused
    }),
    className = _sstyles$cn.className,
    style = _sstyles$cn.style;
  function onKeyDown(event) {
    if (propsEnhance.onKeyDown) {
      return propsEnhance.onKeyDown(event);
    }
    if (interactive && propsEnhance.onClick && (event.key === 'Enter' || event.key === ' ')) {
      event.preventDefault();
      propsEnhance.onClick(event);
    }
  }
  var labelCheckRef = _react["default"].useRef();
  _react["default"].useEffect(function () {
    if (!interactive) return;
    if (process.env.NODE_ENV !== 'production') {
      _logger["default"].warn(labelCheckRef.current && !(0, _hasLabels["default"])(labelCheckRef.current), "'aria-label' or 'aria-labelledby' are required props for interactive icons", props['data-ui-name'] || Icon.displayName);
    }
  }, [interactive]);
  var forkedRef = (0, _ref.useForkRef)(ref, labelCheckRef);
  return /*#__PURE__*/_react["default"].createElement(SIcon, (0, _extends2["default"])({
    role: interactive ? 'button' : undefined,
    "aria-hidden": interactive ? undefined : 'true'
  }, (0, _propsForElement["default"])(propsEnhance), {
    style: Object.assign({}, style, propsEnhance.style),
    className: (0, _classnames["default"])(className, propsEnhance.className) || undefined,
    onKeyDown: onKeyDown,
    ref: forkedRef
  }));
}
Icon.displayName = 'Icon';
var _default = exports["default"] = (0, _core.createBaseComponent)(Icon);
//# sourceMappingURL=Icon.js.map