"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.isMenuItem = exports.MenuItemDataTids = exports.MenuItem = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _globalObject = require("@skbkontur/global-object");

var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");

var _scrollYCenterIntoNearestScrollable = require("../../lib/dom/scrollYCenterIntoNearestScrollable");
var _utils = require("../../lib/utils");
var _ThemeContext = require("../../lib/theming/ThemeContext");


var _CommonWrapper = require("../../internal/CommonWrapper");
var _Emotion = require("../../lib/theming/Emotion");

var _rootNode = require("../../lib/rootNode");


var _MenuContext = require("../../internal/Menu/MenuContext");
var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");

var _MenuItem2 = require("./MenuItem.styles");var _excluded = ["link", "comment", "icon", "loose", "state", "size", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "scrollIntoView", "rel", "isNotSelectable", "children", "className", "style", "data-tid"];var _class, _MenuItem;







































































var MenuItemDataTids = exports.MenuItemDataTids = {
  root: 'MenuItem__root',
  content: 'MenuItem__content',
  comment: 'MenuItem__comment'
};

/**
 * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
 *
 * Сущности в которых может быть использован `MenuItem`: DropdownMenu, Kebab, TooltipMenu и Select.
 */var

MenuItem = exports.MenuItem = (0, _rootNode.rootNode)(_class = (_MenuItem = /*#__PURE__*/function (_React$Component) {function MenuItem() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.




    state = {
      iconOffsetTop: 0,
      highlighted: false
    };_this.


    mouseEntered = false;_this.


    rootRef = null;_this.
    contentRef = /*#__PURE__*/_react.default.createRef();_this.



















































    highlight = function () {
      _this.setState({ highlighted: true });
    };_this.

    unhighlight = function () {
      _this.setState({ highlighted: false });
    };_this.

    select = function (event) {
      _this.handleClick(event);
    };_this.

    isEnabled = function () {
      return !_this.props.disabled;
    };_this.

    navigate = function () {
      if (!_this.props.href) {
        return;
      }
      if (_this.props.target) {
        window.open(_this.props.href, _this.props.target);
      } else {
        location.href = _this.props.href;
      }
    };_this.





































    renderMain = function () {var _cx2, _cx3, _cx4;
      var _this$props =





















        _this.props,link = _this$props.link,comment = _this$props.comment,icon = _this$props.icon,loose = _this$props.loose,state = _this$props.state,size = _this$props.size,_enableIconPadding = _this$props._enableIconPadding,component = _this$props.component,onMouseEnter = _this$props.onMouseEnter,onMouseLeave = _this$props.onMouseLeave,isMobile = _this$props.isMobile,href = _this$props.href,disabled = _this$props.disabled,scrollIntoView = _this$props.scrollIntoView,_this$props$rel = _this$props.rel,rel = _this$props$rel === void 0 ? href && (0, _utils.isExternalLink)(href) ? 'noopener noreferrer' : _this.props.rel : _this$props$rel,isNotSelectable = _this$props.isNotSelectable,children = _this$props.children,unusedClasses = _this$props.className,style = _this$props.style,dataTid = _this$props['data-tid'],rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props, _excluded);

      var iconElement = null;
      if (icon) {var _cx;
        iconElement = /*#__PURE__*/
        _react.default.createElement("div", {
          style: { top: _this.state.iconOffsetTop },
          className: (0, _Emotion.cx)((_cx = {}, _cx[
          _MenuItem2.styles.icon()] = true, _cx[
          _this.getIconSizeClassName()] = true, _cx)
          ) },

        icon
        );

      }
      var isThemeGTE_5_2 = (0, _ThemeHelpers.isThemeGTE)(_this.theme, '5.2');

      var className = (0, _Emotion.cx)((_cx2 = {}, _cx2[
      _MenuItem2.styles.root(_this.theme)] = true, _cx2[
      _this.getRootSizeClassName()] = true, _cx2[
      _MenuItem2.styles.rootMobile(_this.theme)] = isMobile, _cx2[
      _MenuItem2.styles.loose()] = !!loose, _cx2[
      _MenuItem2.styles.hover(_this.theme)] = _this.isHover, _cx2[
      _MenuItem2.styles.selected(_this.theme)] = _this.isSelected, _cx2[
      _MenuItem2.styles.link(_this.theme)] = !!link, _cx2[
      _this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding || _this.context.enableIconPadding, _cx2[
      _MenuItem2.styles.nonSelectable()] = isThemeGTE_5_2 && !!isNotSelectable, _cx2[
      _MenuItem2.styles.disabled(_this.theme)] = !!disabled, _cx2)
      );

      var content = children;
      if ((0, _utils.isFunction)(children)) {
        content = children(_this.activeState);
      }

      var Component = _this.getComponent();

      return /*#__PURE__*/(
        _react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({
          rootNodeRef: _this.setRootNode },
        (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({
          hover: _this.isHover,
          selected: _this.isSelected
        }),
        _this.props), /*#__PURE__*/

        _react.default.createElement(Component, (0, _extends2.default)({
          ref: _this.setRootRef,
          "data-tid": MenuItemDataTids.root },
        rest, {
          disabled: disabled,
          state: _this.activeState,
          onMouseOver: _this.handleMouseEnterFix,
          onMouseLeave: _this.handleMouseLeave,
          onClick: _this.handleClick,
          className: className,
          href: href,
          rel: href ? rel : undefined,
          tabIndex: -1 }),

        iconElement, /*#__PURE__*/
        _react.default.createElement("span", {
          className: (0, _Emotion.cx)((_cx3 = {}, _cx3[
          _MenuItem2.styles.mobileContentWithIcon()] = isMobile && (0, _utils.isNonNullable)(icon), _cx3)
          ),
          ref: _this.contentRef,
          "data-tid": MenuItemDataTids.content },

        typeof content === 'function' ? content() : content
        ),
        comment && /*#__PURE__*/
        _react.default.createElement("div", {
          "data-tid": MenuItemDataTids.comment,
          className: (0, _Emotion.cx)((_cx4 = {}, _cx4[
          _MenuItem2.styles.comment(_this.theme)] = true, _cx4[
          _MenuItem2.styles.commentHover(_this.theme)] = _this.isHover, _cx4)
          ) },

        comment
        )

        )
        ));

    };













    // https://github.com/facebook/react/issues/10109
    // Mouseenter event not triggered when cursor moves from disabled button
    _this.handleMouseEnterFix = function (e) {
      if (!_this.mouseEntered) {var _this$context$navigat;
        _this.mouseEntered = true;
        _this.props.onMouseEnter == null || _this.props.onMouseEnter(e);
        !_this.props.isNotSelectable && ((_this$context$navigat = _this.context.navigation) == null ? void 0 : _this$context$navigat.highlight(_this));
      }
    };_this.

    handleMouseLeave = function (e) {var _this$context$navigat2;
      _this.mouseEntered = false;
      _this.props.onMouseLeave == null || _this.props.onMouseLeave(e);
      !_this.props.isNotSelectable && ((_this$context$navigat2 = _this.context.navigation) == null ? void 0 : _this$context$navigat2.unhighlight());
    };_this.

    handleClick = function (e) {
      if (_this.props.isNotSelectable) {
        return;
      }
      _this.props.onClick == null || _this.props.onClick(e);
      _this.context.onItemClick == null || _this.context.onItemClick(e);
    };_this.

    setRootRef = function (element) {
      _this.rootRef = element;
    };_this.

    getComponent = function () {
      var _this$props2 = _this.props,disabled = _this$props2.disabled,component = _this$props2.component,href = _this$props2.href;

      if (component) {
        return component;
      }

      if (disabled) {
        return 'button';
      }

      if (href) {
        return 'a';
      }

      return 'button';
    };_this.

    hasIconAmongItems = function () {var _this$context$navigat3;
      return Boolean((_this$context$navigat3 = _this.context.navigation) == null ? void 0 : _this$context$navigat3.items.some(function (item) {return item.props.icon;}));
    };return _this;}(0, _inheritsLoose2.default)(MenuItem, _React$Component);var _proto = MenuItem.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.componentDidMount = function componentDidMount() {if (this.props.scrollIntoView && this.rootRef) {(0, _scrollYCenterIntoNearestScrollable.scrollYCenterIntoNearestScrollable)(this.rootRef);}if (this.rootRef && (0, _globalObject.isBrowser)(_globalObject.globalObject)) {this.setState({ iconOffsetTop: _globalObject.globalObject.getComputedStyle(this.rootRef).getPropertyValue('padding-top') });}if (this.contentRef.current && !this.props.isNotSelectable) {var _this$context$navigat4;(_this$context$navigat4 = this.context.navigation) == null || _this$context$navigat4.add(this.contentRef.current, this);}if (this.props.icon) {var _this$context$setEnab, _this$context;(_this$context$setEnab = (_this$context = this.context).setEnableIconPadding) == null || _this$context$setEnab.call(_this$context, true);}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.contentRef.current) {var _this$context$navigat5, _this$context$setEnab2, _this$context2;!this.props.isNotSelectable && ((_this$context$navigat5 = this.context.navigation) == null ? void 0 : _this$context$navigat5.remove(this.contentRef.current));(_this$context$setEnab2 = (_this$context2 = this.context).setEnableIconPadding) == null || _this$context$setEnab2.call(_this$context2, this.hasIconAmongItems());}};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.icon !== this.props.icon) {var _this$context$setEnab3, _this$context3;(_this$context$setEnab3 = (_this$context3 = this.context).setEnableIconPadding) == null || _this$context$setEnab3.call(_this$context3, !!this.props.icon || this.hasIconAmongItems());}if (this.contentRef.current && prevProps.isNotSelectable !== this.props.isNotSelectable) {if (this.props.isNotSelectable) {var _this$context$navigat6;this.unhighlight();(_this$context$navigat6 = this.context.navigation) == null || _this$context$navigat6.remove(this.contentRef.current);} else {var _this$context$navigat7;(_this$context$navigat7 = this.context.navigation) == null || _this$context$navigat7.add(this.contentRef.current, this);}}};_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem2.styles.rootLarge(this.theme);case 'medium':return _MenuItem2.styles.rootMedium(this.theme);case 'small':default:return _MenuItem2.styles.rootSmall(this.theme);}};_proto.getIconSizeClassName = function getIconSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem2.styles.iconLarge(this.theme);case 'medium':return _MenuItem2.styles.iconMedium(this.theme);case 'small':default:return _MenuItem2.styles.iconSmall(this.theme);}};_proto.getWithIconSizeClassName = function getWithIconSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem2.styles.withIconLarge(this.theme);case 'medium':return _MenuItem2.styles.withIconMedium(this.theme);case 'small':default:return _MenuItem2.styles.withIconSmall(this.theme);}};return (0, _createClass2.default)(MenuItem, [{ key: "activeState", get: function get() {return this.state.highlighted ? 'hover' : this.props.state;} }, { key: "isHover", get: function get() {return (this.state.highlighted || this.props.state === 'hover') && !this.props.disabled;} }, { key: "isSelected", get: function get() {return this.props.state === 'selected' && !this.state.highlighted;} }]);}(_react.default.Component), _MenuItem.__KONTUR_REACT_UI__ = 'MenuItem', _MenuItem.displayName = 'MenuItem', _MenuItem.__MENU_ITEM__ = true, _MenuItem.contextType = _MenuContext.MenuContext, _MenuItem)) || _class;


var isMenuItem = exports.isMenuItem = (0, _utils.isReactUIComponent)('MenuItem');