@skbkontur/react-ui 0.0.0-4c5579465d → 0.0.0-4da47ece08

package/components/MenuItem/MenuItem/MenuItem.js

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "aria-describedby", "rel"];
+var _excluded = ["link", "comment", "icon", "loose", "state", "size", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "rel", "isNotSelectable"];
 
 var _class, _class2, _temp; // TODO: Enable this rule in functional components.
 
@@ -10,15 +12,23 @@ var _class, _class2, _temp; // TODO: Enable this rule in functional components.
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
 import { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
-import { rootNode } from "../../../lib/rootNode/rootNodeDecorator";
-import { globalThat } from "../../../lib/SSRSafe";
+import { rootNode } from "../../../lib/rootNode";
+import { MenuContext } from "../../../internal/Menu/MenuContext";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/utils/getVisualStateDataAttributes";
 import { styles } from "../MenuItem.styles";
+/**
+ * @deprecated use SizeProp
+ */
+
 export var MenuItemDataTids = {
   root: 'MenuItem__root',
+  content: 'MenuItem__content',
   comment: 'MenuItem__comment'
 };
 /**
@@ -40,10 +50,44 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.state = {
-      iconOffsetTop: 0
+      iconOffsetTop: 0,
+      highlighted: false
     };
     _this.mouseEntered = false;
     _this.rootRef = null;
+    _this.contentRef = /*#__PURE__*/React.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 (props) {
       var _cx2, _cx3, _cx4;
@@ -53,6 +97,7 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
           icon = props.icon,
           loose = props.loose,
           state = props.state,
+          size = props.size,
           _enableIconPadding = props._enableIconPadding,
           component = props.component,
           onMouseEnter = props.onMouseEnter,
@@ -60,12 +105,11 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
           isMobile = props.isMobile,
           href = props.href,
           disabled = props.disabled,
-          ariaDescribedby = props['aria-describedby'],
           _props$rel = props.rel,
           rel = _props$rel === void 0 ? _this.props.href && isExternalLink(_this.props.href) ? 'noopener noreferrer' : _this.props.rel : _props$rel,
+          isNotSelectable = props.isNotSelectable,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-      var hover = state === 'hover' && !disabled;
       var iconElement = null;
 
       if (icon) {
@@ -75,11 +119,11 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
           style: {
             top: _this.state.iconOffsetTop
           },
-          className: cx((_cx = {}, _cx[styles.icon(_this.theme)] = true, _cx))
+          className: cx((_cx = {}, _cx[styles.icon(_this.theme)] = true, _cx[_this.getIconSizeClassName()] = true, _cx))
         }, icon);
       }
 
-      var className = cx((_cx2 = {}, _cx2[styles.root(_this.theme)] = true, _cx2[styles.rootMobile(_this.theme)] = isMobile, _cx2[styles.loose()] = !!loose, _cx2[styles.hover(_this.theme)] = hover, _cx2[styles.selected(_this.theme)] = state === 'selected', _cx2[styles.link(_this.theme)] = !!link, _cx2[styles.withIcon(_this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cx2[styles.disabled(_this.theme)] = !!_this.props.disabled, _cx2));
+      var className = cx((_cx2 = {}, _cx2[styles.root(_this.theme)] = true, _cx2[_this.getRootSizeClassName()] = true, _cx2[styles.rootMobile(_this.theme)] = isMobile, _cx2[styles.loose()] = !!loose, _cx2[styles.hover(_this.theme)] = _this.isHover, _cx2[styles.selected(_this.theme)] = _this.isSelected, _cx2[styles.link(_this.theme)] = !!link, _cx2[_this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding || _this.context.enableIconPadding, _cx2[styles.disabled(_this.theme)] = !!_this.props.disabled, _cx2));
       var children = _this.props.children;
       var content = children;
 
@@ -94,35 +138,51 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
         "data-tid": MenuItemDataTids.root
       }, rest, {
         disabled: disabled,
-        state: state,
+        state: _this.activeState,
         onMouseOver: _this.handleMouseEnterFix,
         onMouseLeave: _this.handleMouseLeave,
+        onClick: _this.handleClick,
         className: className,
         href: href,
         rel: href ? rel : undefined,
-        tabIndex: -1,
-        "aria-describedby": ariaDescribedby
+        tabIndex: -1
       }), iconElement, /*#__PURE__*/React.createElement("span", {
-        className: cx((_cx3 = {}, _cx3[styles.mobileContentWithIcon()] = isMobile && isNonNullable(icon), _cx3))
+        className: cx((_cx3 = {}, _cx3[styles.mobileContentWithIcon()] = isMobile && isNonNullable(icon), _cx3)),
+        ref: _this.contentRef,
+        "data-tid": MenuItemDataTids.content
       }, content), _this.props.comment && /*#__PURE__*/React.createElement("div", {
         "data-tid": MenuItemDataTids.comment,
-        className: cx((_cx4 = {}, _cx4[styles.comment(_this.theme)] = true, _cx4[styles.commentHover(_this.theme)] = hover, _cx4))
+        className: cx((_cx4 = {}, _cx4[styles.comment(_this.theme)] = true, _cx4[styles.commentHover(_this.theme)] = _this.isHover, _cx4))
       }, comment));
     };
 
     _this.handleMouseEnterFix = function (e) {
-      if (!_this.mouseEntered && _this.props.onMouseEnter) {
-        _this.mouseEntered = true;
+      if (!_this.mouseEntered) {
+        var _this$context$navigat;
 
-        _this.props.onMouseEnter(e);
+        _this.mouseEntered = true;
+        _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(_assertThisInitialized(_this)));
       }
     };
 
     _this.handleMouseLeave = function (e) {
+      var _this$context$navigat2;
+
       _this.mouseEntered = false;
+      _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());
+    };
 
-      if (_this.props.onMouseLeave) {
-        _this.props.onMouseLeave(e);
+    _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);
       }
     };
 
@@ -151,6 +211,14 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
       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;
   }
 
@@ -159,24 +227,133 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-        rootNodeRef: _this2.setRootNode
-      }, _this2.props), _this2.renderMain);
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.menuItemsAtAnyLevel = getFullReactUIFlagsContext(flags).menuItemsAtAnyLevel;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+          rootNodeRef: _this2.setRootNode
+        }, getVisualStateDataAttributes({
+          hover: _this2.isHover,
+          selected: _this2.isSelected
+        }), _this2.props), _this2.renderMain);
+      });
     });
   };
 
   _proto.componentDidMount = function componentDidMount() {
-    if (this.rootRef) {
+    if (this.rootRef && isBrowser(globalObject)) {
       this.setState({
-        iconOffsetTop: globalThat.getComputedStyle(this.rootRef).getPropertyValue('padding-top')
+        iconOffsetTop: 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 styles.rootLarge(this.theme);
+
+      case 'medium':
+        return styles.rootMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.rootSmall(this.theme);
+    }
+  };
+
+  _proto.getIconSizeClassName = function getIconSizeClassName() {
+    switch (this.props.size) {
+      case 'large':
+        return styles.iconLarge(this.theme);
+
+      case 'medium':
+        return styles.iconMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.iconSmall(this.theme);
+    }
+  };
+
+  _proto.getWithIconSizeClassName = function getWithIconSizeClassName() {
+    switch (this.props.size) {
+      case 'large':
+        return styles.withIconLarge(this.theme);
+
+      case 'medium':
+        return styles.withIconMedium(this.theme);
+
+      case 'small':
+      default:
+        return styles.withIconSmall(this.theme);
+    }
+  };
+
+  _createClass(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.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.displayName = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = {
   comment: PropTypes.node,
   disabled: PropTypes.bool,
   href: PropTypes.string,
@@ -184,6 +361,7 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
   loose: PropTypes.bool,
   state: PropTypes.string,
   target: PropTypes.string,
-  onClick: PropTypes.func
-}, _temp)) || _class;
+  onClick: PropTypes.func,
+  size: PropTypes.string
+}, _class2.contextType = MenuContext, _temp)) || _class;
 export var isMenuItem = isReactUIComponent('MenuItem');

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isExternalLink","isFunction","isNonNullable","isReactUIComponent","ThemeContext","CommonWrapper","cx","rootNode","globalThat","styles","MenuItemDataTids","root","comment","MenuItem","state","iconOffsetTop","mouseEntered","rootRef","renderMain","props","link","icon","loose","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","href","disabled","ariaDescribedby","rel","rest","hover","iconElement","top","theme","className","rootMobile","selected","withIcon","Boolean","children","content","Component","getComponent","setRootRef","handleMouseEnterFix","handleMouseLeave","undefined","mobileContentWithIcon","commentHover","e","element","render","setRootNode","componentDidMount","setState","getComputedStyle","getPropertyValue","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","node","bool","string","target","onClick","func","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 } from 'react';\nimport PropTypes from 'prop-types';\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/rootNodeDecorator';\nimport { globalThat } from '../../lib/SSRSafe';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends 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   * @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  isMobile?: boolean;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const MenuItemDataTids = {\n  root: 'MenuItem__root',\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 __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\n  public state = {\n    iconOffsetTop: 0,\n  };\n\n  private theme!: Theme;\n  private mouseEntered = false;\n  private setRootNode!: TSetRootNode;\n  private rootRef: Nullable<HTMLElement> = null;\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  public componentDidMount() {\n    if (this.rootRef) {\n      this.setState({ iconOffsetTop: globalThat.getComputedStyle(this.rootRef).getPropertyValue('padding-top') });\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      href,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      rel = this.props.href && isExternalLink(this.props.href) ? 'noopener noreferrer' : this.props.rel,\n      ...rest\n    } = props;\n\n    const hover = state === 'hover' && !disabled;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = (\n        <div style={{ top: this.state.iconOffsetTop }} className={cx({ [styles.icon(this.theme)]: true })}>\n          {icon}\n        </div>\n      );\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        ref={this.setRootRef}\n        data-tid={MenuItemDataTids.root}\n        {...rest}\n        disabled={disabled}\n        state={state}\n        onMouseOver={this.handleMouseEnterFix}\n        onMouseLeave={this.handleMouseLeave}\n        className={className}\n        href={href}\n        rel={href ? rel : undefined}\n        tabIndex={-1}\n        aria-describedby={ariaDescribedby}\n      >\n        {iconElement}\n        <span\n          className={cx({\n            [styles.mobileContentWithIcon()]: isMobile && isNonNullable(icon),\n          })}\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)]: 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 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\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}
+{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","globalObject","isBrowser","isExternalLink","isFunction","isNonNullable","isReactUIComponent","ThemeContext","CommonWrapper","cx","rootNode","MenuContext","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","getVisualStateDataAttributes","styles","MenuItemDataTids","root","content","comment","MenuItem","state","iconOffsetTop","highlighted","mouseEntered","rootRef","contentRef","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","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","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","node","bool","string","func","contextType","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 } 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    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/components/MenuItem/MenuItem.d.ts

@@ -1,8 +1,14 @@
 import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+import { MenuContextType } from '../../internal/Menu/MenuContext';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type MenuItemSize = SizeProp;
 export declare type MenuItemState = null | 'hover' | 'selected' | void;
-export interface MenuItemProps extends Omit<CommonProps, 'children'> {
+export interface MenuItemProps extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Omit<CommonProps, 'children'> {
     /**
      * @ignore
      */
@@ -23,6 +29,10 @@ export interface MenuItemProps extends Omit<CommonProps, 'children'> {
      * Меняет цвет текста на синий.
      */
     link?: boolean;
+    /**
+     * Размер
+     */
+    size?: SizeProp;
     /**
      * @ignore
      */
@@ -68,14 +78,16 @@ export interface MenuItemProps extends Omit<CommonProps, 'children'> {
      * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.
      */
     component?: React.ComponentType<any>;
-    isMobile?: boolean;
     /**
-     * Атрибут для указания id элемента(-ов), описывающих его
+     * Запрещает выделение и выбор данного пункта меню
+     *
      */
-    'aria-describedby'?: AriaAttributes['aria-describedby'];
+    isNotSelectable?: boolean;
+    isMobile?: boolean;
 }
 export declare const MenuItemDataTids: {
     readonly root: "MenuItem__root";
+    readonly content: "MenuItem__content";
     readonly comment: "MenuItem__comment";
 };
 /**
@@ -86,6 +98,7 @@ export declare const MenuItemDataTids: {
  */
 export declare class MenuItem extends React.Component<MenuItemProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static __MENU_ITEM__: boolean;
     static propTypes: {
         comment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -96,20 +109,41 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
         state: PropTypes.Requireable<string>;
         target: PropTypes.Requireable<string>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        size: PropTypes.Requireable<string>;
     };
     state: {
         iconOffsetTop: number;
+        highlighted: boolean;
     };
     private theme;
     private mouseEntered;
     private setRootNode;
     private rootRef;
+    private contentRef;
+    private menuItemsAtAnyLevel?;
+    static contextType: React.Context<MenuContextType>;
+    context: MenuContextType;
     render(): JSX.Element;
     componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: Readonly<MenuItemProps>): void;
+    highlight: () => void;
+    unhighlight: () => void;
+    select: (event: React.SyntheticEvent<HTMLElement>) => void;
+    isEnabled: () => boolean;
+    navigate: () => void;
+    private getRootSizeClassName;
+    private getIconSizeClassName;
+    private getWithIconSizeClassName;
     private renderMain;
+    private get activeState();
+    private get isHover();
+    private get isSelected();
     private handleMouseEnterFix;
     private handleMouseLeave;
+    private handleClick;
     private setRootRef;
     private getComponent;
+    private hasIconAmongItems;
 }
 export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/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/components/MenuItem/MenuItem.mixins/MenuItem.mixins.js

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from "../../../lib/theming/Emotion";
+import { getMenuItemPaddings } from "../MenuItem.styles";
+export var menuItemSizeMixin = function menuItemSizeMixin(menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, menuItemLineHeight, menuItemFontSize) {
+  var _getMenuItemPaddings = getMenuItemPaddings({
+    menuItemLegacyPaddingX: menuItemLegacyPaddingX,
+    menuItemPaddingX: menuItemPaddingX,
+    menuItemLegacyPaddingY: menuItemLegacyPaddingY,
+    menuItemPaddingY: menuItemPaddingY
+  }),
+      paddingX = _getMenuItemPaddings.paddingX,
+      paddingY = _getMenuItemPaddings.paddingY;
+
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n    padding: ", " ", " ", " ", ";\n  "])), menuItemLineHeight, menuItemFontSize, menuItemPaddingY, paddingX, paddingY, menuItemPaddingX);
+};
+export var iconSizeMixin = function iconSizeMixin(menuItemIconWidth, menuItemPaddingX, menuItemIconLegacyMargin) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    width: ", ";\n    left: ", "px;\n  "])), menuItemIconWidth, parseInt(menuItemPaddingX) + parseInt(menuItemIconLegacyMargin));
+};
+export var withIconSizeMixin = function withIconSizeMixin(menuItemPaddingForIcon) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    padding-left: ", ";\n  "])), menuItemPaddingForIcon);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuItem.mixins.ts"],"names":["css","getMenuItemPaddings","menuItemSizeMixin","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","paddingX","paddingY","iconSizeMixin","menuItemIconWidth","menuItemIconLegacyMargin","parseInt","withIconSizeMixin","menuItemPaddingForIcon"],"mappings":"wJAAA,SAASA,GAAT,QAAoB,2BAApB;;AAEA,SAASC,mBAAT,QAAoC,mBAApC;;AAEA,OAAO,IAAMC,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+BP,mBAAmB,CAAC;AACjDE,IAAAA,sBAAsB,EAAtBA,sBADiD;AAEjDC,IAAAA,gBAAgB,EAAhBA,gBAFiD;AAGjDC,IAAAA,sBAAsB,EAAtBA,sBAHiD;AAIjDC,IAAAA,gBAAgB,EAAhBA,gBAJiD,EAAD,CAAlD,CAAQG,QAAR,wBAAQA,QAAR,CAAkBC,QAAlB,wBAAkBA,QAAlB;;;AAOA,SAAOV,GAAP;AACiBO,EAAAA,kBADjB;AAEeC,EAAAA,gBAFf;AAGaF,EAAAA,gBAHb,EAGiCG,QAHjC,EAG6CC,QAH7C,EAGyDN,gBAHzD;;AAKD,CApBM;;AAsBP,OAAO,IAAMO,aAAa,GAAG,SAAhBA,aAAgB;AAC3BC,iBAD2B;AAE3BR,gBAF2B;AAG3BS,wBAH2B;AAIxB;AACH,SAAOb,GAAP;AACWY,EAAAA,iBADX;AAEUE,EAAAA,QAAQ,CAACV,gBAAD,CAAR,GAA6BU,QAAQ,CAACD,wBAAD,CAF/C;;AAID,CATM;;AAWP,OAAO,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,sBAAD,EAAoC;AACnE,SAAOhB,GAAP;AACkBgB,EAAAA,sBADlB;;AAGD,CAJM","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/components/MenuItem/MenuItem.mixins/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/MenuItem/MenuItem.mixins.js",
+  "module": "MenuItem.mixins",
+  "types": "../MenuItem.mixins.d.ts",
+  "sideEffects": false
+}

package/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;