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

Semrush Icon Component

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
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 _index = require("@semcore/utils/lib/core/index");
var _react = _interopRequireDefault(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _core = require("@semcore/core");
var _flexBox = require("@semcore/flex-box");
var _keyboardFocusEnhance2 = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
var _propsForElement = _interopRequireDefault(require("@semcore/utils/lib/propsForElement"));
var _logger = _interopRequireDefault(require("@semcore/utils/lib/logger"));
var _ref = require("@semcore/utils/lib/ref");
var _hasLabels = _interopRequireDefault(require("@semcore/utils/lib/hasLabels"));
var _useColorResolver = require("@semcore/utils/lib/use/useColorResolver");
var _excluded = ["keyboardFocused"];
/*__reshadow-styles__:"./style/icon.shadow.css"*/
var styles = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SIcon_1rcoc_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_1rcoc)}.___SIcon_1rcoc_gg_.__keyboardFocused_1rcoc_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SIcon_1rcoc_gg_.__interactive_1rcoc_gg_{cursor:pointer}@media (hover:hover){.___SIcon_1rcoc_gg_.__interactive_1rcoc_gg_:hover{filter:brightness(.8)}}" /*__inner_css_end__*/, "1rcoc_gg_") /*__reshadow_css_end__*/, {
  "__SIcon": "___SIcon_1rcoc_gg_",
  "--color": "--color_1rcoc",
  "_keyboardFocused": "__keyboardFocused_1rcoc_gg_",
  "_interactive": "__interactive_1rcoc_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 = (0, _core.createBaseComponent)(Icon);
exports["default"] = _default;
//# sourceMappingURL=Icon.js.map