@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-f50cd2db6e

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

@@ -1 +1 @@
-{"version":3,"sources":["Loader.styles.ts"],"names":["styles","active","t","css","fillContainerPosition","loaderBg","loader","spinnerContainer","spinnerContainerSticky","spinnerContainerCenter","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,MADa,kBACNC,CADM,EACI;AACf,eAAOC,YAAP;AACIH,IAAAA,MAAM,CAACI,qBAAP,EADJ;;AAGgBF,IAAAA,CAAC,CAACG,QAHlB;;AAKD,GAPY;;AASbD,EAAAA,qBATa,mCASW;AACtB,eAAOD,YAAP;;;;;;;AAOD,GAjBY;;AAmBbG,EAAAA,MAnBa,oBAmBJ;AACP,eAAOH,YAAP;;;;;;;AAOD,GA3BY;;AA6BbI,EAAAA,gBA7Ba,8BA6BM;AACjB,eAAOJ,YAAP;;;;;AAKD,GAnCY;;AAqCbK,EAAAA,sBArCa,oCAqCY;AACvB,eAAOL,YAAP;AACIH,IAAAA,MAAM,CAACO,gBAAP,EADJ;;;;;;;;;;;;AAaD,GAnDY;;AAqDbE,EAAAA,sBArDa,oCAqDY;AACvB,eAAON,YAAP;AACIH,IAAAA,MAAM,CAACO,gBAAP,EADJ;AAEIP,IAAAA,MAAM,CAACI,qBAAP,EAFJ;;;;;;;;;;AAYD,GAlEY,EAAf;;;AAqEO,IAAMM,QAAQ,GAAG,2BAAaV,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  active(t: Theme) {\r\n    return css`\r\n      ${styles.fillContainerPosition()};\r\n\r\n      background: ${t.loaderBg};\r\n    `;\r\n  },\r\n\r\n  fillContainerPosition() {\r\n    return css`\r\n      bottom: 0;\r\n      left: 0;\r\n      position: absolute;\r\n      right: 0;\r\n      top: 0;\r\n    `;\r\n  },\r\n\r\n  loader() {\r\n    return css`\r\n      box-sizing: border-box;\r\n      display: inline-block;\r\n      position: relative;\r\n      width: 100%;\r\n      z-index: inherit;\r\n    `;\r\n  },\r\n\r\n  spinnerContainer() {\r\n    return css`\r\n      display: block;\r\n      margin: auto;\r\n      text-align: center;\r\n    `;\r\n  },\r\n\r\n  spinnerContainerSticky() {\r\n    return css`\r\n      ${styles.spinnerContainer()};\r\n\r\n      position: fixed;\r\n\r\n      &::before {\r\n        content: ' ';\r\n        display: inline-block;\r\n        height: 100%;\r\n        min-height: 100%;\r\n        vertical-align: middle;\r\n      }\r\n    `;\r\n  },\r\n\r\n  spinnerContainerCenter() {\r\n    return css`\r\n      ${styles.spinnerContainer()};\r\n      ${styles.fillContainerPosition()};\r\n\r\n      &::before {\r\n        content: ' ';\r\n        display: inline-block;\r\n        height: 100%;\r\n        min-height: 100%;\r\n        vertical-align: middle;\r\n      }\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Loader.styles.ts"],"names":["styles","active","t","css","loaderBg","loader","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,MADiC,kBAC1BC,CAD0B,EAChB;AACf,eAAOC,YAAP;;;;;;;AAOgBD,IAAAA,CAAC,CAACE,QAPlB;;AASD,GAXgC;;AAajCC,EAAAA,MAbiC,oBAaxB;AACP,eAAOF,YAAP;;;;;;;AAOD,GArBgC;;AAuBjCG,EAAAA,gBAvBiC,8BAuBd;AACjB,eAAOH,YAAP;;;;;;;;;;;;;;;;;;;AAmBD,GA3CgC;;AA6CjCI,EAAAA,sBA7CiC,oCA6CR;AACvB,eAAOJ,YAAP;;;AAGD,GAjDgC;;AAmDjCK,EAAAA,uBAnDiC,qCAmDP;AACxB,eAAOL,YAAP;;;AAGD,GAvDgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      background: ${t.loaderBg};\n    `;\n  },\n\n  loader() {\n    return css`\n      box-sizing: border-box;\n      display: inline-block;\n      position: relative;\n      width: 100%;\n      z-index: inherit;\n    `;\n  },\n\n  spinnerContainer() {\n    return css`\n      display: block;\n      margin: auto;\n      text-align: center;\n\n      position: absolute;\n      bottom: 0;\n      left: 0;\n      right: 0;\n      top: 0;\n\n      &::before {\n        content: ' ';\n        display: inline-block;\n        height: 100%;\n        min-height: 100%;\n        vertical-align: middle;\n      }\n    `;\n  },\n\n  spinnerContainerSticky() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  spinnerComponentWrapper() {\n    return css`\n      display: inline-block;\n    `;\n  },\n});\n"]}

package/cjs/components/Loader/__stories__/LoaderAndButton.js

@@ -10,39 +10,39 @@ LoaderAndButton = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
 
 
   render = function render() {var _this2 = this;
-    return (
-      _react.default.createElement(_Loader.Loader, { active: this.props.active, type: 'big' },
-      _react.default.createElement("h1", null, "Yeah, and if you were the pope they'd be all, \"Straighten your pope hat.\" And \"Put on your good vestments.\""),
+    return /*#__PURE__*/(
+      _react.default.createElement(_Loader.Loader, { active: this.props.active, type: 'big' }, /*#__PURE__*/
+      _react.default.createElement("h1", null, "Yeah, and if you were the pope they'd be all, \"Straighten your pope hat.\" And \"Put on your good vestments.\""), /*#__PURE__*/
 
 
 
-      _react.default.createElement(_Tooltip.Tooltip, { render: function render() {return 'Yes, you can!';}, trigger: this.state.isTooltipOpened ? 'opened' : 'closed' },
+      _react.default.createElement(_Tooltip.Tooltip, { render: function render() {return 'Yes, you can!';}, trigger: this.state.isTooltipOpened ? 'opened' : 'closed' }, /*#__PURE__*/
       _react.default.createElement(_Button.Button, {
         onClick: function onClick() {
           _this2.setState({ isActive: true, isTooltipOpened: true });
-        } }, "Can you click me?")),
+        } }, "Can you click me?")), /*#__PURE__*/
 
 
 
 
-      _react.default.createElement("p", null, "No, I'm Santa Claus! I guess if you want children beaten, you have to do it yourself. We're also Santa Claus! Leela, Bender, we're going grave robbing."),
+      _react.default.createElement("p", null, "No, I'm Santa Claus! I guess if you want children beaten, you have to do it yourself. We're also Santa Claus! Leela, Bender, we're going grave robbing."), /*#__PURE__*/
 
 
 
       _react.default.createElement("p", null, "Are you crazy? I can't swallow that. Large bet on myself in round one. Hey, whatcha watching?",
-      ' ',
-      _react.default.createElement("strong", null, " Moving along\u2026 I guess if you want children beaten, you have to do it yourself."),
-      _react.default.createElement("em", null, "It's okay, Bender."), " I like cooking too."),
+      ' ', /*#__PURE__*/
+      _react.default.createElement("strong", null, " Moving along\u2026 I guess if you want children beaten, you have to do it yourself."), /*#__PURE__*/
+      _react.default.createElement("em", null, "It's okay, Bender."), " I like cooking too."), /*#__PURE__*/
 
-      _react.default.createElement("h2", null, "Oh, I think we should just stay friends."),
-      _react.default.createElement("p", null, "No argument here. And when we woke up, we had these bodies. You guys go on without me! I'm going to go\u2026 look for more stuff to steal! Oh, how awful. Did he at least die painlessly? \u2026To shreds, you say. Well, how is his wife holding up? \u2026To shreds, you say."),
+      _react.default.createElement("h2", null, "Oh, I think we should just stay friends."), /*#__PURE__*/
+      _react.default.createElement("p", null, "No argument here. And when we woke up, we had these bodies. You guys go on without me! I'm going to go\u2026 look for more stuff to steal! Oh, how awful. Did he at least die painlessly? \u2026To shreds, you say. Well, how is his wife holding up? \u2026To shreds, you say."), /*#__PURE__*/
 
 
 
 
-      _react.default.createElement("ol", null,
-      _react.default.createElement("li", null, "No! The kind with looting and maybe starting a few fires!"),
-      _react.default.createElement("li", null, "You are the last hope of the universe."),
+      _react.default.createElement("ol", null, /*#__PURE__*/
+      _react.default.createElement("li", null, "No! The kind with looting and maybe starting a few fires!"), /*#__PURE__*/
+      _react.default.createElement("li", null, "You are the last hope of the universe."), /*#__PURE__*/
       _react.default.createElement("li", null, "Hey, guess what you're accessories to."))));
 
 

package/cjs/components/Loader/__stories__/LoaderAndButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["LoaderAndButton.tsx"],"names":["LoaderAndButton","state","isTooltipOpened","render","props","active","setState","isActive","React","Component"],"mappings":"2PAAA;;AAEA;AACA;AACA,mC;;AAEaA,e;AACJC,IAAAA,K,GAAQ;AACbC,MAAAA,eAAe,EAAE,KADJ,E;;;AAIRC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,cAAD,IAAQ,MAAM,EAAE,KAAKC,KAAL,CAAWC,MAA3B,EAAmC,IAAI,EAAE,KAAzC;AACE,iKADF;;;;AAKE,mCAAC,gBAAD,IAAS,MAAM,EAAE,0BAAM,eAAN,EAAjB,EAAwC,OAAO,EAAE,KAAKJ,KAAL,CAAWC,eAAX,GAA6B,QAA7B,GAAwC,QAAzF;AACE,mCAAC,cAAD;AACE,QAAA,OAAO,EAAE,mBAAM;AACb,UAAA,MAAI,CAACI,QAAL,CAAc,EAAEC,QAAQ,EAAE,IAAZ,EAAkBL,eAAe,EAAE,IAAnC,EAAd;AACD,SAHH,wBADF,CALF;;;;;AAcE,wMAdF;;;;AAkBE;AACqG,SADrG;AAEE,0IAFF;AAGE,oEAHF,yBAlBF;;AAuBE,0FAvBF;AAwBE,gUAxBF;;;;;AA6BE;AACE,2GADF;AAEE,wFAFF;AAGE,wFAHF,CA7BF,CADF;;;;AAqCD,G,0BA3CkCM,eAAMC,S","sourcesContent":["import React from 'react';\r\n\r\nimport { Tooltip } from '../../Tooltip';\r\nimport { Button } from '../../Button';\r\nimport { Loader } from '../Loader';\r\n\r\nexport class LoaderAndButton extends React.Component<{ active: boolean }> {\r\n  public state = {\r\n    isTooltipOpened: false,\r\n  };\r\n\r\n  public render() {\r\n    return (\r\n      <Loader active={this.props.active} type={'big'}>\r\n        <h1>\r\n          Yeah, and if you were the pope they&apos;d be all, &quot;Straighten your pope hat.&quot; And &quot;Put on your\r\n          good vestments.&quot;\r\n        </h1>\r\n        <Tooltip render={() => 'Yes, you can!'} trigger={this.state.isTooltipOpened ? 'opened' : 'closed'}>\r\n          <Button\r\n            onClick={() => {\r\n              this.setState({ isActive: true, isTooltipOpened: true });\r\n            }}\r\n          >\r\n            Can you click me?\r\n          </Button>\r\n        </Tooltip>\r\n        <p>\r\n          No, I&apos;m Santa Claus! I guess if you want children beaten, you have to do it yourself. We&apos;re also\r\n          Santa Claus! Leela, Bender, we&apos;re going grave robbing.\r\n        </p>\r\n        <p>\r\n          Are you crazy? I can&apos;t swallow that. Large bet on myself in round one. Hey, whatcha watching?{' '}\r\n          <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>\r\n          <em>It&apos;s okay, Bender.</em> I like cooking too.\r\n        </p>\r\n        <h2>Oh, I think we should just stay friends.</h2>\r\n        <p>\r\n          No argument here. And when we woke up, we had these bodies. You guys go on without me! I&apos;m going to go…\r\n          look for more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is\r\n          his wife holding up? …To shreds, you say.\r\n        </p>\r\n        <ol>\r\n          <li>No! The kind with looting and maybe starting a few fires!</li>\r\n          <li>You are the last hope of the universe.</li>\r\n          <li>Hey, guess what you&apos;re accessories to.</li>\r\n        </ol>\r\n      </Loader>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["LoaderAndButton.tsx"],"names":["LoaderAndButton","state","isTooltipOpened","render","props","active","setState","isActive","React","Component"],"mappings":"2PAAA;;AAEA;AACA;AACA,mC;;AAEaA,e;AACJC,IAAAA,K,GAAQ;AACbC,MAAAA,eAAe,EAAE,KADJ,E;;;AAIRC,EAAAA,M,GAAP,kBAAgB;AACd;AACE,mCAAC,cAAD,IAAQ,MAAM,EAAE,KAAKC,KAAL,CAAWC,MAA3B,EAAmC,IAAI,EAAE,KAAzC;AACE,iKADF;;;;AAKE,mCAAC,gBAAD,IAAS,MAAM,EAAE,0BAAM,eAAN,EAAjB,EAAwC,OAAO,EAAE,KAAKJ,KAAL,CAAWC,eAAX,GAA6B,QAA7B,GAAwC,QAAzF;AACE,mCAAC,cAAD;AACE,QAAA,OAAO,EAAE,mBAAM;AACb,UAAA,MAAI,CAACI,QAAL,CAAc,EAAEC,QAAQ,EAAE,IAAZ,EAAkBL,eAAe,EAAE,IAAnC,EAAd;AACD,SAHH,wBADF,CALF;;;;;AAcE,wMAdF;;;;AAkBE;AACqG,SADrG;AAEE,0IAFF;AAGE,oEAHF,yBAlBF;;AAuBE,0FAvBF;AAwBE,gUAxBF;;;;;AA6BE;AACE,2GADF;AAEE,wFAFF;AAGE,wFAHF,CA7BF,CADF;;;;AAqCD,G,0BA3CkCM,eAAMC,S","sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '../../Tooltip';\nimport { Button } from '../../Button';\nimport { Loader } from '../Loader';\n\nexport class LoaderAndButton extends React.Component<{ active: boolean }> {\n  public state = {\n    isTooltipOpened: false,\n  };\n\n  public render() {\n    return (\n      <Loader active={this.props.active} type={'big'}>\n        <h1>\n          Yeah, and if you were the pope they&apos;d be all, &quot;Straighten your pope hat.&quot; And &quot;Put on your\n          good vestments.&quot;\n        </h1>\n        <Tooltip render={() => 'Yes, you can!'} trigger={this.state.isTooltipOpened ? 'opened' : 'closed'}>\n          <Button\n            onClick={() => {\n              this.setState({ isActive: true, isTooltipOpened: true });\n            }}\n          >\n            Can you click me?\n          </Button>\n        </Tooltip>\n        <p>\n          No, I&apos;m Santa Claus! I guess if you want children beaten, you have to do it yourself. We&apos;re also\n          Santa Claus! Leela, Bender, we&apos;re going grave robbing.\n        </p>\n        <p>\n          Are you crazy? I can&apos;t swallow that. Large bet on myself in round one. Hey, whatcha watching?{' '}\n          <strong> Moving along… I guess if you want children beaten, you have to do it yourself.</strong>\n          <em>It&apos;s okay, Bender.</em> I like cooking too.\n        </p>\n        <h2>Oh, I think we should just stay friends.</h2>\n        <p>\n          No argument here. And when we woke up, we had these bodies. You guys go on without me! I&apos;m going to go…\n          look for more stuff to steal! Oh, how awful. Did he at least die painlessly? …To shreds, you say. Well, how is\n          his wife holding up? …To shreds, you say.\n        </p>\n        <ol>\n          <li>No! The kind with looting and maybe starting a few fires!</li>\n          <li>You are the last hope of the universe.</li>\n          <li>Hey, guess what you&apos;re accessories to.</li>\n        </ol>\n      </Loader>\n    );\n  }\n}\n"]}

package/cjs/components/Loader/index.js

@@ -1 +1 @@
-"use strict";exports.__esModule = true;var _Loader = require("./Loader");Object.keys(_Loader).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _Loader[key];});
+"use strict";exports.__esModule = true;var _Loader = require("./Loader");Object.keys(_Loader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Loader[key]) return;exports[key] = _Loader[key];});

package/cjs/components/Loader/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Loader';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Loader';\n"]}

package/cjs/components/MenuHeader/MenuHeader.d.ts

@@ -1,15 +1,20 @@
 import React, { ReactNode } from 'react';
-export interface MenuHeaderProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface MenuHeaderProps extends CommonProps {
     _enableIconPadding?: boolean;
     children: ReactNode;
 }
 /**
- * Заголовок в меню.
+ * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
+ *
+ * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
-declare function MenuHeader({ _enableIconPadding, children }: MenuHeaderProps): JSX.Element;
+declare function MenuHeader({ _enableIconPadding, children, ...rest }: MenuHeaderProps): JSX.Element;
 declare namespace MenuHeader {
     var __KONTUR_REACT_UI__: string;
     var __MENU_HEADER__: boolean;
 }
 export { MenuHeader };
-export declare const isMenuHeader: (child: React.ReactNode) => child is React.ReactElement<MenuHeaderProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const isMenuHeader: (child: React.ReactNode) => child is React.ReactElement<MenuHeaderProps, string | React.JSXElementConstructor<any>>;

package/cjs/components/MenuHeader/MenuHeader.js

@@ -1,29 +1,36 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.MenuHeader = MenuHeader;exports.isMenuHeader = void 0;var _react = _interopRequireWildcard(require("react"));
-var _classnames = _interopRequireDefault(require("classnames"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.MenuHeader = MenuHeader;exports.isMenuHeader = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _react = _interopRequireWildcard(require("react"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
 
-var _MenuHeader = require("./MenuHeader.styles");
+var _MenuHeader = require("./MenuHeader.styles");var _excluded = ["_enableIconPadding", "children"];function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
 
 
 
 
 
 
-/**
-                                                   * Заголовок в меню.
-                                                   */
-function MenuHeader(_ref) {var _cn;var _ref$_enableIconPaddi = _ref._enableIconPadding,_enableIconPadding = _ref$_enableIconPaddi === void 0 ? false : _ref$_enableIconPaddi,children = _ref.children;
+/**
+ * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.
+ *
+ * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ */
+function MenuHeader(_ref) {var _cx;var _ref$_enableIconPaddi = _ref._enableIconPadding,_enableIconPadding = _ref$_enableIconPaddi === void 0 ? false : _ref$_enableIconPaddi,children = _ref.children,rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
 
-  return (
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, rest, /*#__PURE__*/
     _react.default.createElement("div", {
-      className: (0, _classnames.default)((_cn = {}, _cn[
-      _MenuHeader.jsStyles.root()] = true, _cn[
-      _MenuHeader.jsStyles.withLeftPadding(theme)] = _enableIconPadding, _cn)) },
+      className: (0, _Emotion.cx)((_cx = {}, _cx[
+      _MenuHeader.styles.root(theme)] = true, _cx[
+      _MenuHeader.styles.withLeftPadding(theme)] = _enableIconPadding, _cx)) },
 
 
-    children));
+    children)));
+
 
 
 }
@@ -34,7 +41,7 @@ MenuHeader.__MENU_HEADER__ = true;
 
 
 var isMenuHeader = function isMenuHeader(child) {
-  return _react.default.isValidElement(child) ?
+  return /*#__PURE__*/_react.default.isValidElement(child) ?
   Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__') :
   false;
 };exports.isMenuHeader = isMenuHeader;

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.tsx"],"names":["MenuHeader","_enableIconPadding","children","theme","ThemeContext","jsStyles","root","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","React","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"iRAAA;AACA;;AAEA;;AAEA;;;;;;;AAOA;;;AAGA,SAASA,UAAT,OAA+E,0CAAzDC,kBAAyD,CAAzDA,kBAAyD,sCAApC,KAAoC,yBAA7BC,QAA6B,QAA7BA,QAA6B;AAC7E,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE;AACE,MAAA,SAAS,EAAE;AACRC,2BAASC,IAAT,EADQ,IACU,IADV;AAERD,2BAASE,eAAT,CAAyBJ,KAAzB,CAFQ,IAE0BF,kBAF1B,OADb;;;AAMGC,IAAAA,QANH,CADF;;;AAUD;;AAEDF,UAAU,CAACQ,mBAAX,GAAiC,YAAjC;AACAR,UAAU,CAACS,eAAX,GAA6B,IAA7B;;;;AAIO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAOC,eAAMC,cAAN,CAAsCF,KAAtC;AACHG,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCN,KAAK,CAACO,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM,C","sourcesContent":["import React, { ReactNode, useContext } from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { jsStyles } from './MenuHeader.styles';\r\n\r\nexport interface MenuHeaderProps {\r\n  _enableIconPadding?: boolean;\r\n  children: ReactNode;\r\n}\r\n\r\n/**\r\n * Заголовок в меню.\r\n */\r\nfunction MenuHeader({ _enableIconPadding = false, children }: MenuHeaderProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return (\r\n    <div\r\n      className={cn({\r\n        [jsStyles.root()]: true,\r\n        [jsStyles.withLeftPadding(theme)]: _enableIconPadding,\r\n      })}\r\n    >\r\n      {children}\r\n    </div>\r\n  );\r\n}\r\n\r\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\r\nMenuHeader.__MENU_HEADER__ = true;\r\n\r\nexport { MenuHeader };\r\n\r\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\r\n  return React.isValidElement<MenuHeaderProps>(child)\r\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\r\n    : false;\r\n};\r\n"]}
+{"version":3,"sources":["MenuHeader.tsx"],"names":["MenuHeader","_enableIconPadding","children","rest","theme","ThemeContext","styles","root","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"sTAAA;;AAEA;AACA;AACA;;AAEA,iD;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,4BAAD,EAAmBF,IAAnB;AACE;AACE,MAAA,SAAS,EAAE;AACRG,yBAAOC,IAAP,CAAYH,KAAZ,CADQ,IACa,IADb;AAERE,yBAAOE,eAAP,CAAuBJ,KAAvB,CAFQ,IAEwBH,kBAFxB,OADb;;;AAMGC,IAAAA,QANH,CADF,CADF;;;;AAYD;;AAEDF,UAAU,CAACS,mBAAX,GAAiC,YAAjC;AACAT,UAAU,CAACU,eAAX,GAA6B,IAA7B;;;;AAIO,IAAMC,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,4BAAMC,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM,C","sourcesContent":["import React, { ReactNode, useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MenuHeader.styles';\n\nexport interface MenuHeaderProps extends CommonProps {\n  _enableIconPadding?: boolean;\n  children: ReactNode;\n}\n\n/**\n * `Заголовок меню` используется для того, чтобы разделить `элементы меню` на категории в рамках одного меню.\n *\n * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.\n *\n * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuHeader({ _enableIconPadding = false, children, ...rest }: MenuHeaderProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...rest}>\n      <div\n        className={cx({\n          [styles.root(theme)]: true,\n          [styles.withLeftPadding(theme)]: _enableIconPadding,\n        })}\n      >\n        {children}\n      </div>\n    </CommonWrapper>\n  );\n}\n\nMenuHeader.__KONTUR_REACT_UI__ = 'MenuHeader';\nMenuHeader.__MENU_HEADER__ = true;\n\nexport { MenuHeader };\n\nexport const isMenuHeader = (child: React.ReactNode): child is React.ReactElement<MenuHeaderProps> => {\n  return React.isValidElement<MenuHeaderProps>(child)\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_HEADER__')\n    : false;\n};\n"]}

package/cjs/components/MenuHeader/MenuHeader.md

@@ -0,0 +1,23 @@
+Базовый пример меню с заголовками.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  menuMaxHeight="10rem"
+  caption={<Button use="primary">Сотрудники компании</Button>}
+  >
+  <MenuHeader>Разработчики</MenuHeader>
+  <MenuItem>Вася</MenuItem>
+  <MenuItem>Петя</MenuItem>
+  <MenuItem>Маша</MenuItem>
+  <MenuHeader>Дизайнеры</MenuHeader>
+  <MenuItem>Галя</MenuItem>
+  <MenuItem>Гриша</MenuItem>
+  <MenuItem>Гена</MenuItem>
+  <MenuHeader>Продакты</MenuHeader>
+  <MenuItem>Валя</MenuItem>
+  <MenuItem>Аля</MenuItem>
+  <MenuItem>Артём</MenuItem>
+</DropdownMenu>
+```

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

@@ -1,4 +1,5 @@
-export declare const jsStyles: {
-    root(): string;
-    withLeftPadding(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    withLeftPadding(t: Theme): string;
 };

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

@@ -1,21 +1,23 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: ", ";\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #a0a0a0;\n      cursor: default;\n      font-size: 12px;\n      padding: 6px 18px 7px 8px;\n    "]);_templateObject = function _templateObject() {return data;};return data;}
-
-
-var styles = {
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject());
+"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;
 
 
+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,
 
+    t.menuHeaderFontSize,
+    t.menuHeaderLineHeight,
+    t.menuHeaderPaddingTop, paddingRight, t.menuHeaderPaddingBottom, t.menuHeaderPaddingX);
 
   },
 
   withLeftPadding: function withLeftPadding(t) {
-    return (0, _Emotion.css)(_templateObject2(),
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: ", ";\n    "])),
     t.menuItemPaddingForIcon);
 
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.styles.ts"],"names":["styles","root","css","withLeftPadding","t","menuItemPaddingForIcon","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;;;;;;AAMD,GARY;;AAUbC,EAAAA,eAVa,2BAUGC,CAVH,EAUa;AACxB,eAAOF,YAAP;AACkBE,IAAAA,CAAC,CAACC,sBADpB;;AAGD,GAdY,EAAf;;;AAiBO,IAAMC,QAAQ,GAAG,2BAAaN,MAAb,CAAjB,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      color: #a0a0a0;\r\n      cursor: default;\r\n      font-size: 12px;\r\n      padding: 6px 18px 7px 8px;\r\n    `;\r\n  },\r\n\r\n  withLeftPadding(t: Theme) {\r\n    return css`\r\n      padding-left: ${t.menuItemPaddingForIcon};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"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"]}

package/cjs/components/MenuHeader/index.js

@@ -1 +1 @@
-"use strict";exports.__esModule = true;var _MenuHeader = require("./MenuHeader");Object.keys(_MenuHeader).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _MenuHeader[key];});
+"use strict";exports.__esModule = true;var _MenuHeader = require("./MenuHeader");Object.keys(_MenuHeader).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _MenuHeader[key]) return;exports[key] = _MenuHeader[key];});

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

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './MenuHeader';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './MenuHeader';\n"]}

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

@@ -1,36 +1,79 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 export declare type MenuItemState = null | 'hover' | 'selected' | void;
-export interface MenuItemProps {
-    /** @ignore */
+export interface MenuItemProps extends CommonProps {
+    /**
+     * @ignore
+     */
     _enableIconPadding?: boolean;
-    /** @deprecated @ignore */
-    alkoLink?: boolean;
+    /**
+     * Добавляет описание для элемента меню.
+     */
     comment?: React.ReactNode;
+    /**
+     * Отключенное состояние.
+     */
     disabled?: boolean;
+    /**
+     * Добавляет элементу меню иконку.
+     */
     icon?: React.ReactElement<any>;
+    /**
+     * Меняет цвет текста на синий.
+     */
     link?: boolean;
-    /** @ignore */
+    /**
+     * @ignore
+     */
     loose?: boolean;
-    /** @ignore */
+    /**
+     * @ignore
+     */
     state?: MenuItemState;
+    /**
+     * HTML-событие `onclick`.
+     */
     onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    /**
+     * HTML-событие `mouseenter`.
+     */
+    onMouseEnter?: React.MouseEventHandler;
+    /**
+     * HTML-событие `mouseleave`.
+     */
+    onMouseLeave?: React.MouseEventHandler;
     children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);
+    /**
+     * HTML-атрибут `target`.
+     */
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * HTML-атрибут `title`.
+     */
     title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];
+    /**
+     * HTML-атрибут `href`.
+     */
     href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
-    onMouseEnter?: React.MouseEventHandler;
-    onMouseLeave?: React.MouseEventHandler;
+    /**
+     * Заменяет корневой элемент, на компонент переданный в проп.
+     *
+     * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.
+     */
     component?: React.ComponentType<any>;
+    isMobile?: boolean;
 }
 /**
- * Элемент меню.
+ *
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `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 __MENU_ITEM__: boolean;
     static propTypes: {
-        alkoLink: PropTypes.Requireable<boolean>;
         comment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         href: PropTypes.Requireable<string>;
@@ -42,10 +85,11 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
     };
     private theme;
     private mouseEntered;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     private handleMouseEnterFix;
     private handleMouseLeave;
     private getComponent;
 }
-export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<MenuItemProps, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)>;
+export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<MenuItemProps, string | React.JSXElementConstructor<any>>;

package/cjs/components/MenuItem/MenuItem.js

@@ -1,13 +1,15 @@
 "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"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _warning = _interopRequireDefault(require("warning"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
 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 _MenuItem = require("./MenuItem.styles");var _excluded = ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile"];var _class, _class2, _temp;
 
-var _MenuItem = require("./MenuItem.styles");
 
 
 
@@ -38,10 +40,6 @@ var _MenuItem = require("./MenuItem.styles");
 
 
 
-/**
-                                               * Элемент меню.
-                                               */var
-MenuItem = /*#__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.
 
 
 
@@ -65,8 +63,6 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
-    theme = void 0;_this.
-    mouseEntered = false;_this.
 
 
 
@@ -80,7 +76,14 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
+/**
+ *
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ */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.
 
 
 
@@ -103,6 +106,7 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
+    mouseEntered = false;_this.
 
 
 
@@ -120,6 +124,9 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
+    renderMain = function (props) {var _cx, _cx2;
+      var
+      link =
 
 
 
@@ -130,21 +137,60 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
+      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;
 
+      var iconElement = null;
+      if (icon) {
+        iconElement = /*#__PURE__*/_react.default.createElement("div", { className: _MenuItem.styles.icon(_this.theme) }, 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 children = _this.props.children;
 
+      var content = children;
+      if ((0, _utils.isFunction)(children)) {
+        content = children(_this.props.state);
+      }
 
+      var Component = _this.getComponent();
 
+      return /*#__PURE__*/(
+        _react.default.createElement(Component, (0, _extends2.default)({},
+        rest, {
+          state: state,
+          onMouseOver: _this.handleMouseEnterFix,
+          onMouseLeave: _this.handleMouseLeave,
+          className: className,
+          tabIndex: -1 }),
 
+        iconElement,
+        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)) },
 
 
+        comment)));
 
 
 
 
+    };_this.
 
 
 
@@ -162,8 +208,8 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       }
     };_this.
 
-    getComponent = function () {var _this$props =
-      _this.props,disabled = _this$props.disabled,component = _this$props.component,href = _this$props.href;
+    getComponent = function () {
+      var _this$props = _this.props,disabled = _this$props.disabled,component = _this$props.component,href = _this$props.href;
 
       if (disabled) {
         return 'button';
@@ -178,11 +224,10 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       }
 
       return 'button';
-    };return _this;}var _proto = MenuItem.prototype;_proto.render = function render() {var _this2 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn, _cn2;var _this$props2 = this.props,alkoLink = _this$props2.alkoLink,link = _this$props2.link,comment = _this$props2.comment,icon = _this$props2.icon,loose = _this$props2.loose,state = _this$props2.state,children = _this$props2.children,_enableIconPadding = _this$props2._enableIconPadding,component = _this$props2.component,onMouseEnter = _this$props2.onMouseEnter,onMouseLeave = _this$props2.onMouseLeave,rest = (0, _objectWithoutPropertiesLoose2.default)(_this$props2, ["alkoLink", "link", "comment", "icon", "loose", "state", "children", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave"]);(0, _warning.default)(alkoLink === undefined, "[MenuItem]: Prop 'alkoLink' was deprecated please use 'link' instead");var hover = state === 'hover' && !this.props.disabled;var iconElement = null;if (icon) {iconElement = _react.default.createElement("div", { className: _MenuItem.jsStyles.icon() }, icon);}var className = (0, _classnames.default)((_cn = {}, _cn[_MenuItem.jsStyles.root()] = true, _cn[_MenuItem.jsStyles.loose()] = !!loose, _cn[_MenuItem.jsStyles.hover(this.theme)] = hover, _cn[_MenuItem.jsStyles.selected(this.theme)] = state === 'selected', _cn[_MenuItem.jsStyles.link(this.theme)] = !!link || !!alkoLink, _cn[_MenuItem.jsStyles.withIcon(this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cn[_MenuItem.jsStyles.disabled(this.theme)] = !!this.props.disabled, _cn));var content = children;if ((0, _utils.isFunction)(children)) {content = children(this.props.state);}var Component = this.getComponent();return _react.default.createElement(Component, (0, _extends2.default)({}, rest, { onMouseOver: this.handleMouseEnterFix, onMouseLeave: this.handleMouseLeave, className: className, tabIndex: -1 }), iconElement, content, this.props.comment && _react.default.createElement("div", { "data-tid": "MenuItem__comment", className: (0, _classnames.default)((_cn2 = {}, _cn2[_MenuItem.jsStyles.comment()] = true, _cn2[_MenuItem.jsStyles.commentHover()] = hover, _cn2)) }, comment));} // https://github.com/facebook/react/issues/10109
-  // Mouseenter event not triggered when cursor moves from disabled button
-  ;return MenuItem;}(_react.default.Component);exports.MenuItem = MenuItem;MenuItem.__KONTUR_REACT_UI__ = 'MenuItem';MenuItem.__MENU_ITEM__ = true;MenuItem.propTypes = { alkoLink: _propTypes.default.bool, 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 };
-var isMenuItem = function isMenuItem(child) {
-  return _react.default.isValidElement(child) ?
-  Object.prototype.hasOwnProperty.call(child.type, '__MENU_ITEM__') :
-  false;
+    };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;
+
+
+var isMenuItem = function isMenuItem(child) {var _child$type;
+  // @ts-ignore
+  return (child == null ? void 0 : (_child$type = child.type) == null ? void 0 : _child$type.__KONTUR_REACT_UI__) === 'MenuItem';
 };exports.isMenuItem = isMenuItem;