@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/cjs/components/MenuItem/MenuItem.js

@@ -1,14 +1,41 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isMenuItem = exports.MenuItem = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"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 _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
+
+var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _globalObject = require("@skbkontur/global-object");
+
 
 var _utils = require("../../lib/utils");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
-var _rootNodeDecorator = require("../../lib/rootNode/rootNodeDecorator");
+var _rootNode = require("../../lib/rootNode");
+
+var _MenuContext = require("../../internal/Menu/MenuContext");
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
+
+var _MenuItem = require("./MenuItem.styles");var _excluded = ["link", "comment", "icon", "loose", "state", "size", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "rel", "isNotSelectable"];var _class, _class2, _temp;
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-var _MenuItem = require("./MenuItem.styles");var _excluded = ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile"];var _class, _class2, _temp;
 
 
 
@@ -74,16 +101,31 @@ var _MenuItem = require("./MenuItem.styles");var _excluded = ["link", "comment",
 
 
 
+
+
+
+
+
+
+var MenuItemDataTids = {
+  root: 'MenuItem__root',
+  content: 'MenuItem__content',
+  comment: 'MenuItem__comment' };
 
 
 /**
  *
  * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
  *
- * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
- */var
+ * Сущности в которых может быть использован `MenuItem`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
+ */exports.MenuItemDataTids = MenuItemDataTids;var
+
+MenuItem = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(MenuItem, _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.
+
+
+
+
 
-MenuItem = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(MenuItem, _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.
 
 
 
@@ -103,10 +145,70 @@ MenuItem = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PUR
 
 
 
+    state = {
+      iconOffsetTop: 0,
+      highlighted: false };_this.
 
 
 
     mouseEntered = false;_this.
+
+    rootRef = null;_this.
+    contentRef = /*#__PURE__*/_react.default.createRef();_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -124,7 +226,70 @@ MenuItem = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PUR
 
 
 
-    renderMain = function (props) {var _cx, _cx2;
+    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 (props) {var _cx2, _cx3, _cx4;
       var
       link =
 
@@ -137,24 +302,38 @@ MenuItem = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PUR
 
 
 
-      props.link,comment = props.comment,icon = props.icon,loose = props.loose,state = props.state,_enableIconPadding = props._enableIconPadding,component = props.component,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,isMobile = props.isMobile,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
-      var hover = state === 'hover' && !_this.props.disabled;
+
+
+
+
+      props.link,comment = props.comment,icon = props.icon,loose = props.loose,state = props.state,size = props.size,_enableIconPadding = props._enableIconPadding,component = props.component,onMouseEnter = props.onMouseEnter,onMouseLeave = props.onMouseLeave,isMobile = props.isMobile,href = props.href,disabled = props.disabled,_props$rel = props.rel,rel = _props$rel === void 0 ? _this.props.href && (0, _utils.isExternalLink)(_this.props.href) ? 'noopener noreferrer' : _this.props.rel : _props$rel,isNotSelectable = props.isNotSelectable,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
       var iconElement = null;
-      if (icon) {
-        iconElement = /*#__PURE__*/_react.default.createElement("div", { className: _MenuItem.styles.icon(_this.theme) }, icon);
+      if (icon) {var _cx;
+        iconElement = /*#__PURE__*/
+        _react.default.createElement("div", {
+          style: { top: _this.state.iconOffsetTop },
+          className: (0, _Emotion.cx)((_cx = {}, _cx[
+          _MenuItem.styles.icon(_this.theme)] = true, _cx[
+          _this.getIconSizeClassName()] = true, _cx)) },
+
+
+        icon);
+
+
       }
 
-      var className = (0, _Emotion.cx)((_cx = {}, _cx[
-      _MenuItem.styles.root(_this.theme)] = true, _cx[
-      _MenuItem.styles.rootMobile(_this.theme)] = isMobile, _cx[
-      _MenuItem.styles.loose()] = !!loose, _cx[
-      _MenuItem.styles.hover(_this.theme)] = hover, _cx[
-      _MenuItem.styles.selected(_this.theme)] = state === 'selected', _cx[
-      _MenuItem.styles.link(_this.theme)] = !!link, _cx[
-      _MenuItem.styles.withIcon(_this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cx[
-      _MenuItem.styles.disabled(_this.theme)] = !!_this.props.disabled, _cx));
+      var className = (0, _Emotion.cx)((_cx2 = {}, _cx2[
+      _MenuItem.styles.root(_this.theme)] = true, _cx2[
+      _this.getRootSizeClassName()] = true, _cx2[
+      _MenuItem.styles.rootMobile(_this.theme)] = isMobile, _cx2[
+      _MenuItem.styles.loose()] = !!loose, _cx2[
+      _MenuItem.styles.hover(_this.theme)] = _this.isHover, _cx2[
+      _MenuItem.styles.selected(_this.theme)] = _this.isSelected, _cx2[
+      _MenuItem.styles.link(_this.theme)] = !!link, _cx2[
+      _this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding || _this.context.enableIconPadding, _cx2[
+      _MenuItem.styles.disabled(_this.theme)] = !!_this.props.disabled, _cx2));
 
 
       var children = _this.props.children;
@@ -167,22 +346,36 @@ MenuItem = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PUR
       var Component = _this.getComponent();
 
       return /*#__PURE__*/(
-        _react.default.createElement(Component, (0, _extends2.default)({},
+        _react.default.createElement(Component, (0, _extends2.default)({
+          ref: _this.setRootRef,
+          "data-tid": MenuItemDataTids.root },
         rest, {
-          state: state,
+          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,
-        content,
+        iconElement, /*#__PURE__*/
+        _react.default.createElement("span", {
+          className: (0, _Emotion.cx)((_cx3 = {}, _cx3[
+          _MenuItem.styles.mobileContentWithIcon()] = isMobile && (0, _utils.isNonNullable)(icon), _cx3)),
+
+          ref: _this.contentRef,
+          "data-tid": MenuItemDataTids.content },
+
+        content),
+
         _this.props.comment && /*#__PURE__*/
         _react.default.createElement("div", {
-          "data-tid": "MenuItem__comment",
-          className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
-          _MenuItem.styles.comment(_this.theme)] = true, _cx2[
-          _MenuItem.styles.commentHover(_this.theme)] = hover, _cx2)) },
+          "data-tid": MenuItemDataTids.comment,
+          className: (0, _Emotion.cx)((_cx4 = {}, _cx4[
+          _MenuItem.styles.comment(_this.theme)] = true, _cx4[
+          _MenuItem.styles.commentHover(_this.theme)] = _this.isHover, _cx4)) },
 
 
         comment)));
@@ -194,37 +387,67 @@ MenuItem = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PUR
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
     handleMouseEnterFix = function (e) {
-      if (!_this.mouseEntered && _this.props.onMouseEnter) {
+      if (!_this.mouseEntered) {var _this$context$navigat;
         _this.mouseEntered = true;
-        _this.props.onMouseEnter(e);
+        _this.props.onMouseEnter == null ? void 0 : _this.props.onMouseEnter(e);
+        _this.menuItemsAtAnyLevel && !_this.props.isNotSelectable && ((_this$context$navigat = _this.context.navigation) == null ? void 0 : _this$context$navigat.highlight((0, _assertThisInitialized2.default)(_this)));
       }
     };_this.
 
-    handleMouseLeave = function (e) {
+    handleMouseLeave = function (e) {var _this$context$navigat2;
       _this.mouseEntered = false;
-      if (_this.props.onMouseLeave) {
-        _this.props.onMouseLeave(e);
+      _this.props.onMouseLeave == null ? void 0 : _this.props.onMouseLeave(e);
+      _this.menuItemsAtAnyLevel && !_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 ? void 0 : _this.props.onClick(e);
+      if (_this.menuItemsAtAnyLevel) {
+        _this.context.onItemClick == null ? void 0 : _this.context.onItemClick(e);
       }
     };_this.
 
+    setRootRef = function (element) {
+      _this.rootRef = element;
+    };_this.
+
     getComponent = function () {
       var _this$props = _this.props,disabled = _this$props.disabled,component = _this$props.component,href = _this$props.href;
 
-      if (disabled) {
-        return 'button';
-      }
-
       if (component) {
         return component;
       }
 
+      if (disabled) {
+        return 'button';
+      }
+
       if (href) {
         return 'a';
       }
 
       return 'button';
-    };return _this;}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 /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});};return MenuItem;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = { comment: _propTypes.default.node, disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), loose: _propTypes.default.bool, state: _propTypes.default.string, target: _propTypes.default.string, onClick: _propTypes.default.func }, _temp)) || _class;exports.MenuItem = MenuItem;
-
+    };_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;}var _proto = MenuItem.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.menuItemsAtAnyLevel = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags).menuItemsAtAnyLevel;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ hover: _this2.isHover, selected: _this2.isSelected }), _this2.props), _this2.renderMain);});});};_proto.componentDidMount = function componentDidMount() {if (this.rootRef && (0, _globalObject.isBrowser)(_globalObject.globalObject)) {this.setState({ iconOffsetTop: _globalObject.globalObject.getComputedStyle(this.rootRef).getPropertyValue('padding-top') });}if (this.contentRef.current && this.menuItemsAtAnyLevel && !this.props.isNotSelectable) {var _this$context$navigat4;(_this$context$navigat4 = this.context.navigation) == null ? void 0 : _this$context$navigat4.add(this.contentRef.current, this);}if (this.props.icon && this.menuItemsAtAnyLevel) {var _this$context$setEnab, _this$context;(_this$context$setEnab = (_this$context = this.context).setEnableIconPadding) == null ? void 0 : _this$context$setEnab.call(_this$context, true);}};_proto.componentWillUnmount = function componentWillUnmount() {if (this.contentRef.current && this.menuItemsAtAnyLevel) {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 ? void 0 : _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 ? void 0 : _this$context$setEnab3.call(_this$context3, !!this.props.icon || this.hasIconAmongItems());}if (this.contentRef.current && this.menuItemsAtAnyLevel && prevProps.isNotSelectable !== this.props.isNotSelectable) {if (this.props.isNotSelectable) {var _this$context$navigat6;this.unhighlight();(_this$context$navigat6 = this.context.navigation) == null ? void 0 : _this$context$navigat6.remove(this.contentRef.current);} else {var _this$context$navigat7;(_this$context$navigat7 = this.context.navigation) == null ? void 0 : _this$context$navigat7.add(this.contentRef.current, this);}}};_proto.getRootSizeClassName = function getRootSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem.styles.rootLarge(this.theme);case 'medium':return _MenuItem.styles.rootMedium(this.theme);case 'small':default:return _MenuItem.styles.rootSmall(this.theme);}};_proto.getIconSizeClassName = function getIconSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem.styles.iconLarge(this.theme);case 'medium':return _MenuItem.styles.iconMedium(this.theme);case 'small':default:return _MenuItem.styles.iconSmall(this.theme);}};_proto.getWithIconSizeClassName = function getWithIconSizeClassName() {switch (this.props.size) {case 'large':return _MenuItem.styles.withIconLarge(this.theme);case 'medium':return _MenuItem.styles.withIconMedium(this.theme);case 'small':default:return _MenuItem.styles.withIconSmall(this.theme);}};(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;} // https://github.com/facebook/react/issues/10109
+    // Mouseenter event not triggered when cursor moves from disabled button
+  }]);return MenuItem;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.displayName = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = { comment: _propTypes.default.node, disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.node, loose: _propTypes.default.bool, state: _propTypes.default.string, target: _propTypes.default.string, onClick: _propTypes.default.func, size: _propTypes.default.string }, _class2.contextType = _MenuContext.MenuContext, _temp)) || _class;exports.MenuItem = MenuItem;
 var isMenuItem = (0, _utils.isReactUIComponent)('MenuItem');exports.isMenuItem = isMenuItem;

package/cjs/components/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","rootNode","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","rest","hover","disabled","iconElement","styles","theme","className","root","rootMobile","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","setRootNode","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction, isReactUIComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends CommonProps {\n  /**\n   * @ignore\n   */\n  _enableIconPadding?: boolean;\n  /**\n   * Добавляет описание для элемента меню.\n   */\n  comment?: React.ReactNode;\n  /**\n   * Отключенное состояние.\n   */\n  disabled?: boolean;\n  /**\n   * Добавляет элементу меню иконку.\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Меняет цвет текста на синий.\n   */\n  link?: boolean;\n  /**\n   * @ignore\n   */\n  loose?: boolean;\n  /**\n   * @ignore\n   */\n  state?: MenuItemState;\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  /**\n   * HTML-атрибут `target`.\n   */\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  /**\n   * HTML-атрибут `href`.\n   */\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  /**\n   * Заменяет корневой элемент, на компонент переданный в проп.\n   *\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n   */\n  component?: React.ComponentType<any>;\n\n  isMobile?: boolean;\n}\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\n@rootNode\nexport class MenuItem extends React.Component<MenuItemProps> {\n  public static __KONTUR_REACT_UI__ = 'MenuItem';\n  public static __MENU_ITEM__ = true;\n\n  public static propTypes = {\n    comment: PropTypes.node,\n\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n    loose: PropTypes.bool,\n\n    state: PropTypes.string,\n\n    target: PropTypes.string,\n\n    onClick: PropTypes.func,\n  };\n\n  private theme!: Theme;\n  private mouseEntered = false;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n    const {\n      link,\n      comment,\n      icon,\n      loose,\n      state,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      ...rest\n    } = props;\n\n    const hover = state === 'hover' && !this.props.disabled;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = <div className={styles.icon(this.theme)}>{icon}</div>;\n    }\n\n    const className = cx({\n      [styles.root(this.theme)]: true,\n      [styles.rootMobile(this.theme)]: isMobile,\n      [styles.loose()]: !!loose,\n      [styles.hover(this.theme)]: hover,\n      [styles.selected(this.theme)]: state === 'selected',\n      [styles.link(this.theme)]: !!link,\n      [styles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\n      [styles.disabled(this.theme)]: !!this.props.disabled,\n    });\n\n    const { children } = this.props;\n\n    let content = children;\n    if (isFunction(children)) {\n      content = children(this.props.state);\n    }\n\n    const Component = this.getComponent();\n\n    return (\n      <Component\n        {...rest}\n        state={state}\n        onMouseOver={this.handleMouseEnterFix}\n        onMouseLeave={this.handleMouseLeave}\n        className={className}\n        tabIndex={-1}\n      >\n        {iconElement}\n        {content}\n        {this.props.comment && (\n          <div\n            data-tid=\"MenuItem__comment\"\n            className={cx({\n              [styles.comment(this.theme)]: true,\n              [styles.commentHover(this.theme)]: hover,\n            })}\n          >\n            {comment}\n          </div>\n        )}\n      </Component>\n    );\n  };\n\n  // https://github.com/facebook/react/issues/10109\n  // Mouseenter event not triggered when cursor moves from disabled button\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n    if (!this.mouseEntered && this.props.onMouseEnter) {\n      this.mouseEntered = true;\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    this.mouseEntered = false;\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (component) {\n      return component;\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}
+{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItemDataTids","root","content","comment","MenuItem","rootNode","state","iconOffsetTop","highlighted","mouseEntered","rootRef","contentRef","React","createRef","highlight","setState","unhighlight","select","event","handleClick","isEnabled","props","disabled","navigate","href","target","window","open","location","renderMain","link","icon","loose","size","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","rel","isNotSelectable","rest","iconElement","top","styles","theme","getIconSizeClassName","className","getRootSizeClassName","rootMobile","hover","isHover","selected","isSelected","getWithIconSizeClassName","Boolean","context","enableIconPadding","children","Component","getComponent","setRootRef","activeState","handleMouseEnterFix","handleMouseLeave","undefined","mobileContentWithIcon","commentHover","e","menuItemsAtAnyLevel","navigation","onClick","onItemClick","element","hasIconAmongItems","items","some","item","render","flags","setRootNode","componentDidMount","globalObject","getComputedStyle","getPropertyValue","current","add","setEnableIconPadding","componentWillUnmount","remove","componentDidUpdate","prevProps","rootLarge","rootMedium","rootSmall","iconLarge","iconMedium","iconSmall","withIconLarge","withIconMedium","withIconSmall","__KONTUR_REACT_UI__","displayName","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","func","contextType","MenuContext","isMenuItem"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React, { AriaAttributes, HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { SizeProp } from '../../lib/types/props';\nimport { MenuContext, MenuContextType } from '../../internal/Menu/MenuContext';\nimport { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from '../../lib/featureFlagsContext';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { styles } from './MenuItem.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type MenuItemSize = SizeProp;\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps\n  extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    Omit<CommonProps, 'children'> {\n  /**\n   * @ignore\n   */\n  _enableIconPadding?: boolean;\n  /**\n   * Добавляет описание для элемента меню.\n   */\n  comment?: React.ReactNode;\n  /**\n   * Отключенное состояние.\n   */\n  disabled?: boolean;\n  /**\n   * Добавляет элементу меню иконку.\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Меняет цвет текста на синий.\n   */\n  link?: boolean;\n  /**\n   * Размер\n   */\n  size?: SizeProp;\n  /**\n   * @ignore\n   */\n  loose?: boolean;\n  /**\n   * @ignore\n   */\n  state?: MenuItemState;\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  /**\n   * HTML-атрибут `target`.\n   */\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  /**\n   * HTML-атрибут `href`.\n   */\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  /**\n   * HTML-атрибут `rel`.\n   *\n   * Для внешних ссылок аттрибут rel по умолчанию равен \"noopener noreferrer\"\n   */\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];\n  /**\n   * Заменяет корневой элемент, на компонент переданный в проп.\n   *\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n   */\n  component?: React.ComponentType<any>;\n  /**\n   * Запрещает выделение и выбор данного пункта меню\n   *\n   */\n  isNotSelectable?: boolean;\n\n  isMobile?: boolean;\n}\n\nexport const MenuItemDataTids = {\n  root: 'MenuItem__root',\n  content: 'MenuItem__content',\n  comment: 'MenuItem__comment',\n} as const;\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\n@rootNode\nexport class MenuItem extends React.Component<MenuItemProps> {\n  public static __KONTUR_REACT_UI__ = 'MenuItem';\n  public static displayName = 'MenuItem';\n  public static __MENU_ITEM__ = true;\n\n  public static propTypes = {\n    comment: PropTypes.node,\n\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.node,\n\n    loose: PropTypes.bool,\n\n    state: PropTypes.string,\n\n    target: PropTypes.string,\n\n    onClick: PropTypes.func,\n\n    size: PropTypes.string,\n  };\n\n  public state = {\n    iconOffsetTop: 0,\n    highlighted: false,\n  };\n\n  private theme!: Theme;\n  private mouseEntered = false;\n  private setRootNode!: TSetRootNode;\n  private rootRef: Nullable<HTMLElement> = null;\n  private contentRef = React.createRef<HTMLElement>();\n  private menuItemsAtAnyLevel?: boolean;\n  static contextType = MenuContext;\n\n  public context!: MenuContextType;\n\n  public render() {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.menuItemsAtAnyLevel = getFullReactUIFlagsContext(flags).menuItemsAtAnyLevel;\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <CommonWrapper\n                    rootNodeRef={this.setRootNode}\n                    {...getVisualStateDataAttributes({\n                      hover: this.isHover,\n                      selected: this.isSelected,\n                    })}\n                    {...this.props}\n                  >\n                    {this.renderMain}\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  public componentDidMount() {\n    if (this.rootRef && isBrowser(globalObject)) {\n      this.setState({ iconOffsetTop: globalObject.getComputedStyle(this.rootRef).getPropertyValue('padding-top') });\n    }\n    if (this.contentRef.current && this.menuItemsAtAnyLevel && !this.props.isNotSelectable) {\n      this.context.navigation?.add(this.contentRef.current, this);\n    }\n    if (this.props.icon && this.menuItemsAtAnyLevel) {\n      this.context.setEnableIconPadding?.(true);\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.contentRef.current && this.menuItemsAtAnyLevel) {\n      !this.props.isNotSelectable && this.context.navigation?.remove(this.contentRef.current);\n      this.context.setEnableIconPadding?.(this.hasIconAmongItems());\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<MenuItemProps>) {\n    if (prevProps.icon !== this.props.icon) {\n      this.context.setEnableIconPadding?.(!!this.props.icon || this.hasIconAmongItems());\n    }\n    if (\n      this.contentRef.current &&\n      this.menuItemsAtAnyLevel &&\n      prevProps.isNotSelectable !== this.props.isNotSelectable\n    ) {\n      if (this.props.isNotSelectable) {\n        this.unhighlight();\n        this.context.navigation?.remove(this.contentRef.current);\n      } else {\n        this.context.navigation?.add(this.contentRef.current, this);\n      }\n    }\n  }\n\n  public highlight = () => {\n    this.setState({ highlighted: true });\n  };\n\n  public unhighlight = () => {\n    this.setState({ highlighted: false });\n  };\n\n  public select = (event: React.SyntheticEvent<HTMLElement>) => {\n    this.handleClick(event as React.MouseEvent<HTMLElement>);\n  };\n\n  public isEnabled = () => {\n    return !this.props.disabled;\n  };\n\n  public navigate = () => {\n    if (!this.props.href) {\n      return;\n    }\n    if (this.props.target) {\n      window.open(this.props.href, this.props.target);\n    } else {\n      location.href = this.props.href;\n    }\n  };\n\n  private getRootSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.rootLarge(this.theme);\n      case 'medium':\n        return styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return styles.rootSmall(this.theme);\n    }\n  }\n\n  private getIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.iconLarge(this.theme);\n      case 'medium':\n        return styles.iconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.iconSmall(this.theme);\n    }\n  }\n\n  private getWithIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.withIconLarge(this.theme);\n      case 'medium':\n        return styles.withIconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.withIconSmall(this.theme);\n    }\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n    const {\n      link,\n      comment,\n      icon,\n      loose,\n      state,\n      size,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      href,\n      disabled,\n      rel = this.props.href && isExternalLink(this.props.href) ? 'noopener noreferrer' : this.props.rel,\n      isNotSelectable,\n      ...rest\n    } = props;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = (\n        <div\n          style={{ top: this.state.iconOffsetTop }}\n          className={cx({\n            [styles.icon(this.theme)]: true,\n            [this.getIconSizeClassName()]: true,\n          })}\n        >\n          {icon}\n        </div>\n      );\n    }\n\n    const className = cx({\n      [styles.root(this.theme)]: true,\n      [this.getRootSizeClassName()]: true,\n      [styles.rootMobile(this.theme)]: isMobile,\n      [styles.loose()]: !!loose,\n      [styles.hover(this.theme)]: this.isHover,\n      [styles.selected(this.theme)]: this.isSelected,\n      [styles.link(this.theme)]: !!link,\n      [this.getWithIconSizeClassName()]: Boolean(iconElement) || !!_enableIconPadding || this.context.enableIconPadding,\n      [styles.disabled(this.theme)]: !!this.props.disabled,\n    });\n\n    const { children } = this.props;\n\n    let content = children;\n    if (isFunction(children)) {\n      content = children(this.props.state);\n    }\n\n    const Component = this.getComponent();\n\n    return (\n      <Component\n        ref={this.setRootRef}\n        data-tid={MenuItemDataTids.root}\n        {...rest}\n        disabled={disabled}\n        state={this.activeState}\n        onMouseOver={this.handleMouseEnterFix}\n        onMouseLeave={this.handleMouseLeave}\n        onClick={this.handleClick}\n        className={className}\n        href={href}\n        rel={href ? rel : undefined}\n        tabIndex={-1}\n      >\n        {iconElement}\n        <span\n          className={cx({\n            [styles.mobileContentWithIcon()]: isMobile && isNonNullable(icon),\n          })}\n          ref={this.contentRef}\n          data-tid={MenuItemDataTids.content}\n        >\n          {content}\n        </span>\n        {this.props.comment && (\n          <div\n            data-tid={MenuItemDataTids.comment}\n            className={cx({\n              [styles.comment(this.theme)]: true,\n              [styles.commentHover(this.theme)]: this.isHover,\n            })}\n          >\n            {comment}\n          </div>\n        )}\n      </Component>\n    );\n  };\n\n  private get activeState() {\n    return this.state.highlighted ? 'hover' : this.props.state;\n  }\n\n  private get isHover(): boolean {\n    return (this.state.highlighted || this.props.state === 'hover') && !this.props.disabled;\n  }\n\n  private get isSelected(): boolean {\n    return this.props.state === 'selected' && !this.state.highlighted;\n  }\n\n  // https://github.com/facebook/react/issues/10109\n  // Mouseenter event not triggered when cursor moves from disabled button\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n    if (!this.mouseEntered) {\n      this.mouseEntered = true;\n      this.props.onMouseEnter?.(e);\n      this.menuItemsAtAnyLevel && !this.props.isNotSelectable && this.context.navigation?.highlight(this);\n    }\n  };\n\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    this.mouseEntered = false;\n    this.props.onMouseLeave?.(e);\n    this.menuItemsAtAnyLevel && !this.props.isNotSelectable && this.context.navigation?.unhighlight();\n  };\n\n  private handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (this.props.isNotSelectable) {\n      return;\n    }\n    this.props.onClick?.(e);\n    if (this.menuItemsAtAnyLevel) {\n      this.context.onItemClick?.(e);\n    }\n  };\n\n  private setRootRef = (element: HTMLElement) => {\n    this.rootRef = element;\n  };\n\n  private getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (component) {\n      return component;\n    }\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n\n  private hasIconAmongItems = () => {\n    return Boolean(this.context.navigation?.items.some((item) => item.props.icon));\n  };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}

package/cjs/components/MenuItem/MenuItem.md

@@ -12,9 +12,23 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
 </DropdownMenu>
 ```
 
-Меню с отключёнными и базовыми элементами меню.
-<br/>
-К отключённым элементам меню не применяются стили при наведении и их нельзя затаргетить с клавиатуры.
+Меню с заблокированными и базовыми элементами меню.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми и заблокированными элементами</Button>}
+  >
+  <MenuItem>Это базовый элемент меню</MenuItem>
+  <MenuItem disabled>А это заблокированный</MenuItem>
+  <MenuItem>А это снова базовый</MenuItem>
+  <MenuItem disabled>И снова заблокированный</MenuItem>
+  <MenuItem disabled>И вот ещё один заблокированный</MenuItem>
+</DropdownMenu>
+```
+
+В пункты меню можно передать проп `isNotSelectable`, чтобы запретить выделение и выбор этого пункта меню
 
 ```jsx harmony
 import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
@@ -23,10 +37,10 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
   caption={<Button use="primary">Открыть меню с базовыми и отключёнными элементами</Button>}
   >
   <MenuItem>Это базовый элемент меню</MenuItem>
-  <MenuItem disabled>А это отключённый</MenuItem>
+  <MenuItem isNotSelectable>А это отключённый</MenuItem>
   <MenuItem>А это снова базовый</MenuItem>
-  <MenuItem disabled>И снова отключённый</MenuItem>
-  <MenuItem disabled>И вот ещё один отключённый</MenuItem>
+  <MenuItem isNotSelectable>И снова отключённый</MenuItem>
+  <MenuItem isNotSelectable>И вот ещё один отключённый</MenuItem>
 </DropdownMenu>
 ```
 
@@ -107,3 +121,15 @@ const LinkMenuItem = ({link, title}) => {
     />
 </DropdownMenu>
 ```
+
+У MenuItem есть 3 стандартных размера.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <MenuItem size={'small'}>Маленький</MenuItem>
+  <MenuItem size={'medium'}>Средний</MenuItem>
+  <MenuItem size={'large'}>Большой</MenuItem>
+</Gapped>
+```

package/cjs/components/MenuItem/MenuItem.mixins.d.ts

@@ -0,0 +1,3 @@
+export declare const menuItemSizeMixin: (menuItemLegacyPaddingX: string, menuItemPaddingX: string, menuItemLegacyPaddingY: string, menuItemPaddingY: string, menuItemLineHeight: string, menuItemFontSize: string) => string;
+export declare const iconSizeMixin: (menuItemIconWidth: string, menuItemPaddingX: string, menuItemIconLegacyMargin: string) => string;
+export declare const withIconSizeMixin: (menuItemPaddingForIcon: string) => string;

package/cjs/components/MenuItem/MenuItem.mixins.js

@@ -0,0 +1,42 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.withIconSizeMixin = exports.menuItemSizeMixin = exports.iconSizeMixin = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
+
+var _MenuItem = require("./MenuItem.styles");var _templateObject, _templateObject2, _templateObject3;
+
+var menuItemSizeMixin = function menuItemSizeMixin(
+menuItemLegacyPaddingX,
+menuItemPaddingX,
+menuItemLegacyPaddingY,
+menuItemPaddingY,
+menuItemLineHeight,
+menuItemFontSize)
+{
+  var _getMenuItemPaddings = (0, _MenuItem.getMenuItemPaddings)({
+    menuItemLegacyPaddingX: menuItemLegacyPaddingX,
+    menuItemPaddingX: menuItemPaddingX,
+    menuItemLegacyPaddingY: menuItemLegacyPaddingY,
+    menuItemPaddingY: menuItemPaddingY }),paddingX = _getMenuItemPaddings.paddingX,paddingY = _getMenuItemPaddings.paddingY;
+
+
+  return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n    line-height: ", ";\n    font-size: ", ";\n    padding: ", " ", " ", " ", ";\n  "])),
+  menuItemLineHeight,
+  menuItemFontSize,
+  menuItemPaddingY, paddingX, paddingY, menuItemPaddingX);
+
+};exports.menuItemSizeMixin = menuItemSizeMixin;
+
+var iconSizeMixin = function iconSizeMixin(
+menuItemIconWidth,
+menuItemPaddingX,
+menuItemIconLegacyMargin)
+{
+  return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n    width: ", ";\n    left: ", "px;\n  "])),
+  menuItemIconWidth,
+  parseInt(menuItemPaddingX) + parseInt(menuItemIconLegacyMargin));
+
+};exports.iconSizeMixin = iconSizeMixin;
+
+var withIconSizeMixin = function withIconSizeMixin(menuItemPaddingForIcon) {
+  return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n    padding-left: ", ";\n  "])),
+  menuItemPaddingForIcon);
+
+};exports.withIconSizeMixin = withIconSizeMixin;

package/cjs/components/MenuItem/MenuItem.mixins.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuItem.mixins.ts"],"names":["menuItemSizeMixin","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","paddingX","paddingY","css","iconSizeMixin","menuItemIconWidth","menuItemIconLegacyMargin","parseInt","withIconSizeMixin","menuItemPaddingForIcon"],"mappings":"mVAAA;;AAEA,6C;;AAEO,IAAMA,iBAAiB,GAAG,SAApBA,iBAAoB;AAC/BC,sBAD+B;AAE/BC,gBAF+B;AAG/BC,sBAH+B;AAI/BC,gBAJ+B;AAK/BC,kBAL+B;AAM/BC,gBAN+B;AAO5B;AACH,6BAA+B,mCAAoB;AACjDL,IAAAA,sBAAsB,EAAtBA,sBADiD;AAEjDC,IAAAA,gBAAgB,EAAhBA,gBAFiD;AAGjDC,IAAAA,sBAAsB,EAAtBA,sBAHiD;AAIjDC,IAAAA,gBAAgB,EAAhBA,gBAJiD,EAApB,CAA/B,CAAQG,QAAR,wBAAQA,QAAR,CAAkBC,QAAlB,wBAAkBA,QAAlB;;;AAOA,aAAOC,YAAP;AACiBJ,EAAAA,kBADjB;AAEeC,EAAAA,gBAFf;AAGaF,EAAAA,gBAHb,EAGiCG,QAHjC,EAG6CC,QAH7C,EAGyDN,gBAHzD;;AAKD,CApBM,C;;AAsBA,IAAMQ,aAAa,GAAG,SAAhBA,aAAgB;AAC3BC,iBAD2B;AAE3BT,gBAF2B;AAG3BU,wBAH2B;AAIxB;AACH,aAAOH,YAAP;AACWE,EAAAA,iBADX;AAEUE,EAAAA,QAAQ,CAACX,gBAAD,CAAR,GAA6BW,QAAQ,CAACD,wBAAD,CAF/C;;AAID,CATM,C;;AAWA,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,sBAAD,EAAoC;AACnE,aAAON,YAAP;AACkBM,EAAAA,sBADlB;;AAGD,CAJM,C","sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nimport { getMenuItemPaddings } from './MenuItem.styles';\n\nexport const menuItemSizeMixin = (\n  menuItemLegacyPaddingX: string,\n  menuItemPaddingX: string,\n  menuItemLegacyPaddingY: string,\n  menuItemPaddingY: string,\n  menuItemLineHeight: string,\n  menuItemFontSize: string,\n) => {\n  const { paddingX, paddingY } = getMenuItemPaddings({\n    menuItemLegacyPaddingX,\n    menuItemPaddingX,\n    menuItemLegacyPaddingY,\n    menuItemPaddingY,\n  });\n\n  return css`\n    line-height: ${menuItemLineHeight};\n    font-size: ${menuItemFontSize};\n    padding: ${menuItemPaddingY} ${paddingX} ${paddingY} ${menuItemPaddingX};\n  `;\n};\n\nexport const iconSizeMixin = (\n  menuItemIconWidth: string,\n  menuItemPaddingX: string,\n  menuItemIconLegacyMargin: string,\n) => {\n  return css`\n    width: ${menuItemIconWidth};\n    left: ${parseInt(menuItemPaddingX) + parseInt(menuItemIconLegacyMargin)}px;\n  `;\n};\n\nexport const withIconSizeMixin = (menuItemPaddingForIcon: string) => {\n  return css`\n    padding-left: ${menuItemPaddingForIcon};\n  `;\n};\n"]}

package/cjs/components/MenuItem/MenuItem.styles.d.ts

@@ -1,14 +1,27 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const getMenuItemPaddings: ({ menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, }: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {
+    paddingX: string;
+    paddingY: string;
+};
 export declare const styles: {
     root(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
     rootMobile(t: Theme): string;
     hover(t: Theme): string;
     selected(t: Theme): string;
     disabled(t: Theme): string;
     link(t: Theme): string;
     loose(): string;
-    withIcon(t: Theme): string;
+    withIconSmall(t: Theme): string;
+    withIconMedium(t: Theme): string;
+    withIconLarge(t: Theme): string;
     comment(t: Theme): string;
     commentHover(t: Theme): string;
     icon(t: Theme): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
+    mobileContentWithIcon(): string;
 };