@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/cjs/components/MenuHeader/MenuHeader.styles.js

@@ -1,23 +1,68 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
 
+var _Emotion = require("../../lib/theming/Emotion");
 
-var styles = (0, _Emotion.memoizeStyle)({
-  root: function root(t) {
-    var legacyPaddingRight = parseFloat(t.menuHeaderLegacyPaddingRight);
-    var paddingRight =
-    legacyPaddingRight !== 0 ? parseFloat(t.menuHeaderPaddingX) + legacyPaddingRight + "px" : t.menuHeaderPaddingX;
 
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      cursor: default;\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", " ", " ", " ", ";\n    "])),
-    t.menuHeaderColor,
+var _MenuHeader = require("./MenuHeader.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
-    t.menuHeaderFontSize,
-    t.menuHeaderLineHeight,
-    t.menuHeaderPaddingTop, paddingRight, t.menuHeaderPaddingBottom, t.menuHeaderPaddingX);
+var getStyles = function getStyles(emotion) {return (
+    (0, _Emotion.memoizeStyle)({
+      root: function root(t) {
+        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        color: ", ";\n        cursor: default;\n      "])),
+        t.menuHeaderColor);
 
-  },
 
-  withLeftPadding: function withLeftPadding(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: ", ";\n    "])),
-    t.menuItemPaddingForIcon);
+      },
 
-  } });exports.styles = styles;
+      rootSmall: function rootSmall(t) {
+        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
+        (0, _MenuHeader.menuHeaderSizeMixin)(emotion)(
+        t.menuHeaderLegacyPaddingRight,
+        t.menuHeaderPaddingXSmall,
+        t.menuHeaderFontSizeSmall,
+        t.menuHeaderLineHeightSmall,
+        t.menuHeaderPaddingTopSmall,
+        t.menuHeaderPaddingBottomSmall));
+
+
+      },
+      rootMedium: function rootMedium(t) {
+        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
+        (0, _MenuHeader.menuHeaderSizeMixin)(emotion)(
+        t.menuHeaderLegacyPaddingRight,
+        t.menuHeaderPaddingXMedium,
+        t.menuHeaderFontSizeMedium,
+        t.menuHeaderLineHeightMedium,
+        t.menuHeaderPaddingTopMedium,
+        t.menuHeaderPaddingBottomMedium));
+
+
+      },
+      rootLarge: function rootLarge(t) {
+        return emotion.css(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", ";\n      "])),
+        (0, _MenuHeader.menuHeaderSizeMixin)(emotion)(
+        t.menuHeaderLegacyPaddingRight,
+        t.menuHeaderPaddingXLarge,
+        t.menuHeaderFontSizeLarge,
+        t.menuHeaderLineHeightLarge,
+        t.menuHeaderPaddingTopLarge,
+        t.menuHeaderPaddingBottomLarge));
+
+
+      },
+
+      withLeftPaddingSmall: function withLeftPaddingSmall(t) {
+        return emotion.css(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
+        (0, _MenuHeader.withIconSizeMixin)(emotion)(t.menuItemPaddingForIconSmall));
+
+      },
+      withLeftPaddingMedium: function withLeftPaddingMedium(t) {
+        return emotion.css(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
+        (0, _MenuHeader.withIconSizeMixin)(emotion)(t.menuItemPaddingForIconMedium));
+
+      },
+      withLeftPaddingLarge: function withLeftPaddingLarge(t) {
+        return emotion.css(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n        ", "\n      "])),
+        (0, _MenuHeader.withIconSizeMixin)(emotion)(t.menuItemPaddingForIconLarge));
+
+      } }));};exports.getStyles = getStyles;

package/cjs/components/MenuHeader/MenuHeader.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.styles.ts"],"names":["styles","root","t","legacyPaddingRight","parseFloat","menuHeaderLegacyPaddingRight","paddingRight","menuHeaderPaddingX","css","menuHeaderColor","menuHeaderFontSize","menuHeaderLineHeight","menuHeaderPaddingTop","menuHeaderPaddingBottom","withLeftPadding","menuItemPaddingForIcon"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,QAAMC,kBAAkB,GAAGC,UAAU,CAACF,CAAC,CAACG,4BAAH,CAArC;AACA,QAAMC,YAAY;AAChBH,IAAAA,kBAAkB,KAAK,CAAvB,GAA8BC,UAAU,CAACF,CAAC,CAACK,kBAAH,CAAV,GAAmCJ,kBAAjE,UAA0FD,CAAC,CAACK,kBAD9F;;AAGA,eAAOC,YAAP;AACWN,IAAAA,CAAC,CAACO,eADb;;AAGeP,IAAAA,CAAC,CAACQ,kBAHjB;AAIiBR,IAAAA,CAAC,CAACS,oBAJnB;AAKaT,IAAAA,CAAC,CAACU,oBALf,EAKuCN,YALvC,EAKuDJ,CAAC,CAACW,uBALzD,EAKoFX,CAAC,CAACK,kBALtF;;AAOD,GAbgC;;AAejCO,EAAAA,eAfiC,2BAejBZ,CAfiB,EAeP;AACxB,eAAOM,YAAP;AACkBN,IAAAA,CAAC,CAACa,sBADpB;;AAGD,GAnBgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const legacyPaddingRight = parseFloat(t.menuHeaderLegacyPaddingRight);\n    const paddingRight =\n      legacyPaddingRight !== 0 ? `${parseFloat(t.menuHeaderPaddingX) + legacyPaddingRight}px` : t.menuHeaderPaddingX;\n\n    return css`\n      color: ${t.menuHeaderColor};\n      cursor: default;\n      font-size: ${t.menuHeaderFontSize};\n      line-height: ${t.menuHeaderLineHeight};\n      padding: ${t.menuHeaderPaddingTop} ${paddingRight} ${t.menuHeaderPaddingBottom} ${t.menuHeaderPaddingX};\n    `;\n  },\n\n  withLeftPadding(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MenuHeader.styles.ts"],"names":["getStyles","emotion","root","t","css","menuHeaderColor","rootSmall","menuHeaderLegacyPaddingRight","menuHeaderPaddingXSmall","menuHeaderFontSizeSmall","menuHeaderLineHeightSmall","menuHeaderPaddingTopSmall","menuHeaderPaddingBottomSmall","rootMedium","menuHeaderPaddingXMedium","menuHeaderFontSizeMedium","menuHeaderLineHeightMedium","menuHeaderPaddingTopMedium","menuHeaderPaddingBottomMedium","rootLarge","menuHeaderPaddingXLarge","menuHeaderFontSizeLarge","menuHeaderLineHeightLarge","menuHeaderPaddingTopLarge","menuHeaderPaddingBottomLarge","withLeftPaddingSmall","menuItemPaddingForIconSmall","withLeftPaddingMedium","menuItemPaddingForIconMedium","withLeftPaddingLarge","menuItemPaddingForIconLarge"],"mappings":";;AAEA;;;AAGA,iD;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAOF,OAAO,CAACG,GAAf;AACWD,QAAAA,CAAC,CAACE,eADb;;;AAID,OANU;;AAQXC,MAAAA,SARW,qBAQDH,CARC,EAQS;AAClB,eAAOF,OAAO,CAACG,GAAf;AACI,6CAAoBH,OAApB;AACAE,QAAAA,CAAC,CAACI,4BADF;AAEAJ,QAAAA,CAAC,CAACK,uBAFF;AAGAL,QAAAA,CAAC,CAACM,uBAHF;AAIAN,QAAAA,CAAC,CAACO,yBAJF;AAKAP,QAAAA,CAAC,CAACQ,yBALF;AAMAR,QAAAA,CAAC,CAACS,4BANF,CADJ;;;AAUD,OAnBU;AAoBXC,MAAAA,UApBW,sBAoBAV,CApBA,EAoBU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACI,6CAAoBH,OAApB;AACAE,QAAAA,CAAC,CAACI,4BADF;AAEAJ,QAAAA,CAAC,CAACW,wBAFF;AAGAX,QAAAA,CAAC,CAACY,wBAHF;AAIAZ,QAAAA,CAAC,CAACa,0BAJF;AAKAb,QAAAA,CAAC,CAACc,0BALF;AAMAd,QAAAA,CAAC,CAACe,6BANF,CADJ;;;AAUD,OA/BU;AAgCXC,MAAAA,SAhCW,qBAgCDhB,CAhCC,EAgCS;AAClB,eAAOF,OAAO,CAACG,GAAf;AACI,6CAAoBH,OAApB;AACAE,QAAAA,CAAC,CAACI,4BADF;AAEAJ,QAAAA,CAAC,CAACiB,uBAFF;AAGAjB,QAAAA,CAAC,CAACkB,uBAHF;AAIAlB,QAAAA,CAAC,CAACmB,yBAJF;AAKAnB,QAAAA,CAAC,CAACoB,yBALF;AAMApB,QAAAA,CAAC,CAACqB,4BANF,CADJ;;;AAUD,OA3CU;;AA6CXC,MAAAA,oBA7CW,gCA6CUtB,CA7CV,EA6CoB;AAC7B,eAAOF,OAAO,CAACG,GAAf;AACI,2CAAkBH,OAAlB,EAA2BE,CAAC,CAACuB,2BAA7B,CADJ;;AAGD,OAjDU;AAkDXC,MAAAA,qBAlDW,iCAkDWxB,CAlDX,EAkDqB;AAC9B,eAAOF,OAAO,CAACG,GAAf;AACI,2CAAkBH,OAAlB,EAA2BE,CAAC,CAACyB,4BAA7B,CADJ;;AAGD,OAtDU;AAuDXC,MAAAA,oBAvDW,gCAuDU1B,CAvDV,EAuDoB;AAC7B,eAAOF,OAAO,CAACG,GAAf;AACI,2CAAkBH,OAAlB,EAA2BE,CAAC,CAAC2B,2BAA7B,CADJ;;AAGD,OA3DU,EAAb,CADuB,GAAlB,C","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { menuHeaderSizeMixin, withIconSizeMixin } from './MenuHeader.mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        color: ${t.menuHeaderColor};\n        cursor: default;\n      `;\n    },\n\n    rootSmall(t: Theme) {\n      return emotion.css`\n        ${menuHeaderSizeMixin(emotion)(\n          t.menuHeaderLegacyPaddingRight,\n          t.menuHeaderPaddingXSmall,\n          t.menuHeaderFontSizeSmall,\n          t.menuHeaderLineHeightSmall,\n          t.menuHeaderPaddingTopSmall,\n          t.menuHeaderPaddingBottomSmall,\n        )};\n      `;\n    },\n    rootMedium(t: Theme) {\n      return emotion.css`\n        ${menuHeaderSizeMixin(emotion)(\n          t.menuHeaderLegacyPaddingRight,\n          t.menuHeaderPaddingXMedium,\n          t.menuHeaderFontSizeMedium,\n          t.menuHeaderLineHeightMedium,\n          t.menuHeaderPaddingTopMedium,\n          t.menuHeaderPaddingBottomMedium,\n        )};\n      `;\n    },\n    rootLarge(t: Theme) {\n      return emotion.css`\n        ${menuHeaderSizeMixin(emotion)(\n          t.menuHeaderLegacyPaddingRight,\n          t.menuHeaderPaddingXLarge,\n          t.menuHeaderFontSizeLarge,\n          t.menuHeaderLineHeightLarge,\n          t.menuHeaderPaddingTopLarge,\n          t.menuHeaderPaddingBottomLarge,\n        )};\n      `;\n    },\n\n    withLeftPaddingSmall(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(emotion)(t.menuItemPaddingForIconSmall)}\n      `;\n    },\n    withLeftPaddingMedium(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(emotion)(t.menuItemPaddingForIconMedium)}\n      `;\n    },\n    withLeftPaddingLarge(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(emotion)(t.menuItemPaddingForIconLarge)}\n      `;\n    },\n  });\n"]}

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

@@ -1,8 +1,14 @@
-import React from 'react';
+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 CommonProps {
+export interface MenuItemProps extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Omit<CommonProps, 'children'> {
     /**
      * @ignore
      */
@@ -23,6 +29,10 @@ export interface MenuItemProps extends CommonProps {
      * Меняет цвет текста на синий.
      */
     link?: boolean;
+    /**
+     * Размер
+     */
+    size?: SizeProp;
     /**
      * @ignore
      */
@@ -56,44 +66,85 @@ export interface MenuItemProps extends CommonProps {
      * HTML-атрибут `href`.
      */
     href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
+    /**
+     * HTML-атрибут `rel`.
+     *
+     * Для внешних ссылок аттрибут rel по умолчанию равен "noopener noreferrer"
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
      * Заменяет корневой элемент, на компонент переданный в проп.
      *
      * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.
      */
     component?: React.ComponentType<any>;
+    /**
+     * Запрещает выделение и выбор данного пункта меню
+     *
+     */
+    isNotSelectable?: boolean;
     isMobile?: boolean;
 }
 export declare const MenuItemDataTids: {
     readonly root: "MenuItem__root";
+    readonly content: "MenuItem__content";
     readonly comment: "MenuItem__comment";
 };
 /**
  *
  * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
  *
- * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuItem`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 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>;
         disabled: PropTypes.Requireable<boolean>;
         href: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         loose: PropTypes.Requireable<boolean>;
         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 emotion;
     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/cjs/components/MenuItem/MenuItem.js

@@ -1,14 +1,45 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");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 _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 _Emotion = require("../../lib/theming/Emotion");
 
 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/getVisualStateDataAttributes");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+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;
 
 
 
@@ -78,6 +109,7 @@ var _MenuItem = require("./MenuItem.styles");var _excluded = ["link", "comment",
 
 var MenuItemDataTids = {
   root: 'MenuItem__root',
+  content: 'MenuItem__content',
   comment: 'MenuItem__comment' };
 
 
@@ -85,10 +117,16 @@ var MenuItemDataTids = {
  *
  * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
  *
- * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuItem`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */exports.MenuItemDataTids = MenuItemDataTids;var
 
-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.
+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.
+
+
+
+
+
+
 
 
 
@@ -107,11 +145,74 @@ 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.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -129,7 +230,77 @@ 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 _this$emotion$cx2, _this$emotion$cx3, _this$emotion$cx4;
       var
       link =
 
@@ -142,24 +313,39 @@ 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 styles = (0, _MenuItem.getStyles)(_this.emotion);
       var iconElement = null;
-      if (icon) {
-        iconElement = /*#__PURE__*/_react.default.createElement("div", { className: _MenuItem.styles.icon(_this.theme) }, icon);
+      if (icon) {var _this$emotion$cx;
+        iconElement = /*#__PURE__*/
+        _react.default.createElement("div", {
+          style: { top: _this.state.iconOffsetTop },
+          className: _this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[
+          styles.icon(_this.theme)] = true, _this$emotion$cx[
+          _this.getIconSizeClassName()] = true, _this$emotion$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 = _this.emotion.cx((_this$emotion$cx2 = {}, _this$emotion$cx2[
+      styles.root(_this.theme)] = true, _this$emotion$cx2[
+      _this.getRootSizeClassName()] = true, _this$emotion$cx2[
+      styles.rootMobile(_this.theme)] = isMobile, _this$emotion$cx2[
+      styles.loose()] = !!loose, _this$emotion$cx2[
+      styles.hover(_this.theme)] = _this.isHover, _this$emotion$cx2[
+      styles.selected(_this.theme)] = _this.isSelected, _this$emotion$cx2[
+      styles.link(_this.theme)] = !!link, _this$emotion$cx2[
+      _this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding || _this.context.enableIconPadding, _this$emotion$cx2[
+      styles.disabled(_this.theme)] = !!_this.props.disabled, _this$emotion$cx2));
 
 
       var children = _this.props.children;
@@ -173,22 +359,35 @@ MenuItem = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PUR
 
       return /*#__PURE__*/(
         _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: _this.emotion.cx((_this$emotion$cx3 = {}, _this$emotion$cx3[
+          styles.mobileContentWithIcon()] = isMobile && (0, _utils.isNonNullable)(icon), _this$emotion$cx3)),
+
+          ref: _this.contentRef,
+          "data-tid": MenuItemDataTids.content },
+
+        content),
+
         _this.props.comment && /*#__PURE__*/
         _react.default.createElement("div", {
           "data-tid": MenuItemDataTids.comment,
-          className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
-          _MenuItem.styles.comment(_this.theme)] = true, _cx2[
-          _MenuItem.styles.commentHover(_this.theme)] = hover, _cx2)) },
+          className: _this.emotion.cx((_this$emotion$cx4 = {}, _this$emotion$cx4[
+          styles.comment(_this.theme)] = true, _this$emotion$cx4[
+          styles.commentHover(_this.theme)] = _this.isHover, _this$emotion$cx4)) },
 
 
         comment)));
@@ -200,37 +399,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(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, 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() {var styles = (0, _MenuItem.getStyles)(this.emotion);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() {var styles = (0, _MenuItem.getStyles)(this.emotion);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() {var styles = (0, _MenuItem.getStyles)(this.emotion);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);}};(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;