@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2dd5039746

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

@@ -1 +1 @@
-{"version":3,"sources":["LoaderAndButton.tsx"],"names":["React","Tooltip","Button","Loader","LoaderAndButton","state","isTooltipOpened","render","props","active","setState","isActive","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,OAAT,QAAwB,eAAxB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;;AAEA,WAAaC,eAAb;AACSC,IAAAA,KADT,GACiB;AACbC,MAAAA,eAAe,EAAE,KADJ,EADjB;;;AAKSC,EAAAA,MALT,GAKE,kBAAgB;AACd;AACE,0BAAC,MAAD,IAAQ,MAAM,EAAE,KAAKC,KAAL,CAAWC,MAA3B,EAAmC,IAAI,EAAE,KAAzC;AACE,wJADF;;;;AAKE,0BAAC,OAAD,IAAS,MAAM,EAAE,0BAAM,eAAN,EAAjB,EAAwC,OAAO,EAAE,KAAKJ,KAAL,CAAWC,eAAX,GAA6B,QAA7B,GAAwC,QAAzF;AACE,0BAAC,MAAD;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,+LAdF;;;;AAkBE;AACqG,SADrG;AAEE,iIAFF;AAGE,2DAHF,yBAlBF;;AAuBE,iFAvBF;AAwBE,uTAxBF;;;;;AA6BE;AACE,kGADF;AAEE,+EAFF;AAGE,+EAHF,CA7BF,CADF;;;;AAqCD,GA3CH,0BAAqCN,KAAK,CAACY,SAA3C","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"]}
+{"version":3,"sources":["LoaderAndButton.tsx"],"names":["React","Tooltip","Button","Loader","LoaderAndButton","state","isTooltipOpened","render","props","active","setState","isActive","Component"],"mappings":"sEAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,OAAT,QAAwB,eAAxB;AACA,SAASC,MAAT,QAAuB,cAAvB;AACA,SAASC,MAAT,QAAuB,WAAvB;;;;;;;;AAQA,WAAaC,eAAb;AACSC,IAAAA,KADT,GACuC;AACnCC,MAAAA,eAAe,EAAE,KADkB,EADvC;;;AAKSC,EAAAA,MALT,GAKE,kBAAgB;AACd;AACE,0BAAC,MAAD,IAAQ,MAAM,EAAE,KAAKC,KAAL,CAAWC,MAA3B,EAAmC,IAAI,EAAE,KAAzC;AACE,wJADF;;;;AAKE,0BAAC,OAAD,IAAS,MAAM,EAAE,0BAAM,eAAN,EAAjB,EAAwC,OAAO,EAAE,KAAKJ,KAAL,CAAWC,eAAX,GAA6B,QAA7B,GAAwC,QAAzF;AACE,0BAAC,MAAD;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,+LAdF;;;;AAkBE;AACqG,SADrG;AAEE,iIAFF;AAGE,2DAHF,yBAlBF;;AAuBE,iFAvBF;AAwBE,uTAxBF;;;;;AA6BE;AACE,kGADF;AAEE,+EAFF;AAGE,+EAHF,CA7BF,CADF;;;;AAqCD,GA3CH,0BAAqCN,KAAK,CAACY,SAA3C","sourcesContent":["import React from 'react';\n\nimport { Tooltip } from '../../Tooltip';\nimport { Button } from '../../Button';\nimport { Loader } from '../Loader';\nimport { LoaderProps } from '..';\n\ntype LoaderAndButtonProps = Pick<LoaderProps, 'active'>;\ninterface LoaderAndButtonState {\n  isTooltipOpened: boolean;\n  isActive?: boolean;\n}\nexport class LoaderAndButton extends React.Component<LoaderAndButtonProps, LoaderAndButtonState> {\n  public state: LoaderAndButtonState = {\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/components/MenuHeader/MenuHeader/MenuHeader.js

@@ -13,7 +13,7 @@ export var MenuHeaderDataTids = {
  *
  * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
  *
- * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuHeader`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 
 function MenuHeader(_ref) {

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuHeader.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","styles","MenuHeaderDataTids","root","MenuHeader","_enableIconPadding","children","rest","theme","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"uJAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;;;;;;AAOA,OAAO,IAAMC,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,kBAD0B,EAA3B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAGX,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBS,IAAnB;AACE;AACE,kBAAUL,kBAAkB,CAACC,IAD/B;AAEE,MAAA,SAAS,EAAEH,EAAE;AACVC,MAAAA,MAAM,CAACE,IAAP,CAAYK,KAAZ,CADU,IACW,IADX;AAEVP,MAAAA,MAAM,CAACQ,eAAP,CAAuBD,KAAvB,CAFU,IAEsBH,kBAFtB,OAFf;;;AAOGC,IAAAA,QAPH,CADF,CADF;;;;AAaD;;AAEDF,UAAU,CAACM,mBAAX,GAAiC,YAAjC;AACAN,UAAU,CAACO,eAAX,GAA6B,IAA7B;;AAEA,SAASP,UAAT;;AAEA,OAAO,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAjB,KAAK,CAACkB,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","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\nexport const MenuHeaderDataTids = {\n  root: 'MenuHeader__root',\n} as const;\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        data-tid={MenuHeaderDataTids.root}\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"]}
+{"version":3,"sources":["MenuHeader.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","cx","styles","MenuHeaderDataTids","root","MenuHeader","_enableIconPadding","children","rest","theme","withLeftPadding","__KONTUR_REACT_UI__","__MENU_HEADER__","isMenuHeader","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"uJAAA,OAAOA,KAAP,IAA2BC,UAA3B,QAA6C,OAA7C;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;;AAEA,SAASC,MAAT,QAAuB,qBAAvB;;;;;;;AAOA,OAAO,IAAMC,kBAAkB,GAAG;AAChCC,EAAAA,IAAI,EAAE,kBAD0B,EAA3B;;;AAIP;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,UAAT,OAAwF,0CAAlEC,kBAAkE,CAAlEA,kBAAkE,sCAA7C,KAA6C,yBAAtCC,QAAsC,QAAtCA,QAAsC,CAAzBC,IAAyB;AACtF,MAAMC,KAAK,GAAGX,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBS,IAAnB;AACE;AACE,kBAAUL,kBAAkB,CAACC,IAD/B;AAEE,MAAA,SAAS,EAAEH,EAAE;AACVC,MAAAA,MAAM,CAACE,IAAP,CAAYK,KAAZ,CADU,IACW,IADX;AAEVP,MAAAA,MAAM,CAACQ,eAAP,CAAuBD,KAAvB,CAFU,IAEsBH,kBAFtB,OAFf;;;AAOGC,IAAAA,QAPH,CADF,CADF;;;;AAaD;;AAEDF,UAAU,CAACM,mBAAX,GAAiC,YAAjC;AACAN,UAAU,CAACO,eAAX,GAA6B,IAA7B;;AAEA,SAASP,UAAT;;AAEA,OAAO,IAAMQ,YAAY,GAAG,SAAfA,YAAe,CAACC,KAAD,EAA0E;AACpG,SAAO,aAAAjB,KAAK,CAACkB,cAAN,CAAsCD,KAAtC;AACHE,EAAAA,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCL,KAAK,CAACM,IAA3C,EAAiD,iBAAjD,CADG;AAEH,OAFJ;AAGD,CAJM","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\nexport const MenuHeaderDataTids = {\n  root: 'MenuHeader__root',\n} as const;\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        data-tid={MenuHeaderDataTids.root}\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/components/MenuHeader/MenuHeader.d.ts

@@ -12,7 +12,7 @@ export declare const MenuHeaderDataTids: {
  *
  * _Примечание_: `заголовок меню`, в отличие от `элемента меню` нельзя затаргетить с клавиатуры.
  *
- * Сущности в которых может быть использован `MenuHeader`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuHeader`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 declare function MenuHeader({ _enableIconPadding, children, ...rest }: MenuHeaderProps): JSX.Element;
 declare namespace MenuHeader {

package/components/MenuItem/MenuItem/MenuItem.js

@@ -1,13 +1,16 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile"];
+var _excluded = ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "aria-describedby", "rel"];
+
+var _class, _class2, _temp; // TODO: Enable this rule in functional components.
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
 
-var _class, _class2, _temp;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { isFunction, isReactUIComponent } from "../../../lib/utils";
+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";
@@ -21,7 +24,7 @@ export 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).
  */
 
 export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
@@ -35,10 +38,14 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.state = {
+      iconOffsetTop: 0
+    };
     _this.mouseEntered = false;
+    _this.rootRef = null;
 
     _this.renderMain = function (props) {
-      var _cx, _cx2;
+      var _cx2, _cx3, _cx4;
 
       var link = props.link,
           comment = props.comment,
@@ -50,18 +57,28 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
           onMouseEnter = props.onMouseEnter,
           onMouseLeave = props.onMouseLeave,
           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,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
-      var hover = state === 'hover' && !_this.props.disabled;
+      var hover = state === 'hover' && !disabled;
       var iconElement = null;
 
       if (icon) {
+        var _cx;
+
         iconElement = /*#__PURE__*/React.createElement("div", {
-          className: styles.icon(_this.theme)
+          style: {
+            top: _this.state.iconOffsetTop
+          },
+          className: cx((_cx = {}, _cx[styles.icon(_this.theme)] = true, _cx))
         }, icon);
       }
 
-      var className = cx((_cx = {}, _cx[styles.root(_this.theme)] = true, _cx[styles.rootMobile(_this.theme)] = isMobile, _cx[styles.loose()] = !!loose, _cx[styles.hover(_this.theme)] = hover, _cx[styles.selected(_this.theme)] = state === 'selected', _cx[styles.link(_this.theme)] = !!link, _cx[styles.withIcon(_this.theme)] = Boolean(iconElement) || !!_enableIconPadding, _cx[styles.disabled(_this.theme)] = !!_this.props.disabled, _cx));
+      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 children = _this.props.children;
       var content = children;
 
@@ -72,16 +89,23 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
       var Component = _this.getComponent();
 
       return /*#__PURE__*/React.createElement(Component, _extends({
+        ref: _this.setRootRef,
         "data-tid": MenuItemDataTids.root
       }, rest, {
+        disabled: disabled,
         state: state,
         onMouseOver: _this.handleMouseEnterFix,
         onMouseLeave: _this.handleMouseLeave,
         className: className,
-        tabIndex: -1
-      }), iconElement, content, _this.props.comment && /*#__PURE__*/React.createElement("div", {
+        href: href,
+        rel: href ? rel : undefined,
+        tabIndex: -1,
+        "aria-describedby": ariaDescribedby
+      }), iconElement, /*#__PURE__*/React.createElement("span", {
+        className: cx((_cx3 = {}, _cx3[styles.mobileContentWithIcon()] = isMobile && isNonNullable(icon), _cx3))
+      }, content), _this.props.comment && /*#__PURE__*/React.createElement("div", {
         "data-tid": MenuItemDataTids.comment,
-        className: cx((_cx2 = {}, _cx2[styles.comment(_this.theme)] = true, _cx2[styles.commentHover(_this.theme)] = hover, _cx2))
+        className: cx((_cx4 = {}, _cx4[styles.comment(_this.theme)] = true, _cx4[styles.commentHover(_this.theme)] = hover, _cx4))
       }, comment));
     };
 
@@ -101,20 +125,24 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
       }
     };
 
+    _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';
       }
@@ -138,6 +166,14 @@ export var MenuItem = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
     });
   };
 
+  _proto.componentDidMount = function componentDidMount() {
+    if (this.rootRef) {
+      this.setState({
+        iconOffsetTop: window.getComputedStyle(this.rootRef).getPropertyValue('padding-top')
+      });
+    }
+  };
+
   return MenuItem;
 }(React.Component), _class2.__KONTUR_REACT_UI__ = 'MenuItem', _class2.__MENU_ITEM__ = true, _class2.propTypes = {
   comment: PropTypes.node,

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isFunction","isReactUIComponent","ThemeContext","CommonWrapper","cx","rootNode","styles","MenuItemDataTids","root","comment","MenuItem","mouseEntered","renderMain","props","link","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","rest","hover","disabled","iconElement","theme","className","rootMobile","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","setRootNode","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","node","bool","string","target","onClick","func","isMenuItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction, isReactUIComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends CommonProps {\n  /**\n   * @ignore\n   */\n  _enableIconPadding?: boolean;\n  /**\n   * Добавляет описание для элемента меню.\n   */\n  comment?: React.ReactNode;\n  /**\n   * Отключенное состояние.\n   */\n  disabled?: boolean;\n  /**\n   * Добавляет элементу меню иконку.\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Меняет цвет текста на синий.\n   */\n  link?: boolean;\n  /**\n   * @ignore\n   */\n  loose?: boolean;\n  /**\n   * @ignore\n   */\n  state?: MenuItemState;\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  /**\n   * HTML-атрибут `target`.\n   */\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  /**\n   * HTML-атрибут `href`.\n   */\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  /**\n   * Заменяет корневой элемент, на компонент переданный в проп.\n   *\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n   */\n  component?: React.ComponentType<any>;\n\n  isMobile?: boolean;\n}\n\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  private theme!: Theme;\n  private mouseEntered = false;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n    const {\n      link,\n      comment,\n      icon,\n      loose,\n      state,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      ...rest\n    } = props;\n\n    const hover = state === 'hover' && !this.props.disabled;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = <div className={styles.icon(this.theme)}>{icon}</div>;\n    }\n\n    const className = cx({\n      [styles.root(this.theme)]: true,\n      [styles.rootMobile(this.theme)]: isMobile,\n      [styles.loose()]: !!loose,\n      [styles.hover(this.theme)]: hover,\n      [styles.selected(this.theme)]: state === 'selected',\n      [styles.link(this.theme)]: !!link,\n      [styles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\n      [styles.disabled(this.theme)]: !!this.props.disabled,\n    });\n\n    const { children } = this.props;\n\n    let content = children;\n    if (isFunction(children)) {\n      content = children(this.props.state);\n    }\n\n    const Component = this.getComponent();\n\n    return (\n      <Component\n        data-tid={MenuItemDataTids.root}\n        {...rest}\n        state={state}\n        onMouseOver={this.handleMouseEnterFix}\n        onMouseLeave={this.handleMouseLeave}\n        className={className}\n        tabIndex={-1}\n      >\n        {iconElement}\n        {content}\n        {this.props.comment && (\n          <div\n            data-tid={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 getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (component) {\n      return component;\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}
+{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isExternalLink","isFunction","isNonNullable","isReactUIComponent","ThemeContext","CommonWrapper","cx","rootNode","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","window","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';\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: window.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"]}

package/components/MenuItem/MenuItem.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type MenuItemState = null | 'hover' | 'selected' | void;
-export interface MenuItemProps extends CommonProps {
+export interface MenuItemProps extends Omit<CommonProps, 'children'> {
     /**
      * @ignore
      */
@@ -56,6 +56,12 @@ export interface MenuItemProps extends CommonProps {
      * HTML-атрибут `href`.
      */
     href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
+    /**
+     * HTML-атрибут `rel`.
+     *
+     * Для внешних ссылок аттрибут rel по умолчанию равен "noopener noreferrer"
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
      * Заменяет корневой элемент, на компонент переданный в проп.
      *
@@ -63,6 +69,10 @@ export interface MenuItemProps extends CommonProps {
      */
     component?: React.ComponentType<any>;
     isMobile?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export declare const MenuItemDataTids: {
     readonly root: "MenuItem__root";
@@ -72,7 +82,7 @@ export declare const 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).
  */
 export declare class MenuItem extends React.Component<MenuItemProps> {
     static __KONTUR_REACT_UI__: string;
@@ -87,13 +97,19 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
         target: PropTypes.Requireable<string>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    state: {
+        iconOffsetTop: number;
+    };
     private theme;
     private mouseEntered;
     private setRootNode;
+    private rootRef;
     render(): JSX.Element;
+    componentDidMount(): void;
     private renderMain;
     private handleMouseEnterFix;
     private handleMouseLeave;
+    private setRootRef;
     private getComponent;
 }
 export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/components/MenuItem/MenuItem.styles/MenuItem.styles.js

@@ -1,19 +1,38 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
+export var getMenuItemPaddings = function getMenuItemPaddings(_ref) {
+  var menuItemLegacyPaddingX = _ref.menuItemLegacyPaddingX,
+      menuItemPaddingX = _ref.menuItemPaddingX,
+      menuItemLegacyPaddingY = _ref.menuItemLegacyPaddingY,
+      menuItemPaddingY = _ref.menuItemPaddingY;
+  var legacyPaddingX = parseFloat(menuItemLegacyPaddingX);
+  var legacyPaddingY = parseFloat(menuItemLegacyPaddingY);
+  var paddingX = legacyPaddingX !== 0 ? parseFloat(menuItemPaddingX) + legacyPaddingX + "px" : menuItemPaddingX;
+  var paddingY = legacyPaddingY !== 0 ? parseFloat(menuItemPaddingY) + legacyPaddingY + "px" : menuItemPaddingY;
+  return {
+    paddingX: paddingX,
+    paddingY: paddingY
+  };
+};
 export var styles = memoizeStyle({
   root: function root(t) {
-    var legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);
-    var legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);
-    var paddingX = legacyPaddingX !== 0 ? parseFloat(t.menuItemPaddingX) + legacyPaddingX + "px" : t.menuItemPaddingX;
-    var paddingY = legacyPaddingY !== 0 ? parseFloat(t.menuItemPaddingY) + legacyPaddingY + "px" : t.menuItemPaddingY;
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n      border-radius: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius);
+    var _getMenuItemPaddings = getMenuItemPaddings({
+      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,
+      menuItemPaddingX: t.menuItemPaddingX,
+      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,
+      menuItemPaddingY: t.menuItemPaddingY
+    }),
+        paddingX = _getMenuItemPaddings.paddingX,
+        paddingY = _getMenuItemPaddings.paddingY;
+
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: ", ";\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n      border-radius: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemDisplay, t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius);
   },
   rootMobile: function rootMobile(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.fontSizeMobile, t.lineHeightMobile, t.menuItemPaddingMobile);
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.menuItemFontSizeMobile, t.menuItemLineHeightMobile, t.menuItemPaddingMobile);
   },
   hover: function hover(t) {
     // Color with !important in purpose to override `a:hover`
@@ -23,7 +42,7 @@ export var styles = memoizeStyle({
     return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
   },
   disabled: function disabled(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledColor);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
   },
   link: function link(t) {
     return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
@@ -41,6 +60,9 @@ export var styles = memoizeStyle({
     return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
   },
   icon: function icon(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      display: inline-block;\n      position: absolute;\n      left: ", "px;\n      top: ", ";\n      transform: translateY(", ");\n    "])), t.menuItemIconWidth, parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin), t.menuItemPaddingY, t.menuItemIconLegacyShift);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      display: inline-block;\n      position: absolute;\n      left: ", "px;\n      transform: translateY(", ");\n    "])), t.menuItemIconWidth, parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin), t.menuItemIconLegacyShift);
+  },
+  mobileContentWithIcon: function mobileContentWithIcon() {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      margin-left: 8px;\n    "])));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","t","legacyPaddingX","parseFloat","menuItemLegacyPaddingX","legacyPaddingY","menuItemLegacyPaddingY","paddingX","menuItemPaddingX","paddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","menuItemTextColor","menuItemBorderRadius","rootMobile","fontSizeMobile","lineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);\n    const legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);\n\n    const paddingX = legacyPaddingX !== 0 ? `${parseFloat(t.menuItemPaddingX) + legacyPaddingX}px` : t.menuItemPaddingX;\n    const paddingY = legacyPaddingY !== 0 ? `${parseFloat(t.menuItemPaddingY) + legacyPaddingY}px` : t.menuItemPaddingY;\n\n    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: block;\n      line-height: ${t.menuItemLineHeight};\n      font-size: ${t.menuItemFontSize};\n      padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n      position: relative;\n      text-decoration: none;\n      color: ${t.menuItemTextColor};\n      border-radius: ${t.menuItemBorderRadius};\n\n      button& {\n        min-width: 100%;\n      }\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.fontSizeMobile};\n      line-height: ${t.lineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: transparent;\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIcon(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      white-space: normal;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: 0.6;\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      width: ${t.menuItemIconWidth};\n      display: inline-block;\n      position: absolute;\n      left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n      top: ${t.menuItemPaddingY};\n      transform: translateY(${t.menuItemIconLegacyShift});\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","getMenuItemPaddings","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","legacyPaddingX","parseFloat","legacyPaddingY","paddingX","paddingY","styles","root","t","menuItemDisplay","menuItemLineHeight","menuItemFontSize","menuItemTextColor","menuItemBorderRadius","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift","mobileContentWithIcon"],"mappings":"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","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { resetButton } from '../../lib/styles/Mixins';\n\nexport const getMenuItemPaddings = ({\n  menuItemLegacyPaddingX,\n  menuItemPaddingX,\n  menuItemLegacyPaddingY,\n  menuItemPaddingY,\n}: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {\n  const legacyPaddingX = parseFloat(menuItemLegacyPaddingX);\n  const legacyPaddingY = parseFloat(menuItemLegacyPaddingY);\n\n  const paddingX = legacyPaddingX !== 0 ? `${parseFloat(menuItemPaddingX) + legacyPaddingX}px` : menuItemPaddingX;\n  const paddingY = legacyPaddingY !== 0 ? `${parseFloat(menuItemPaddingY) + legacyPaddingY}px` : menuItemPaddingY;\n\n  return { paddingX, paddingY };\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const { paddingX, paddingY } = getMenuItemPaddings({\n      menuItemLegacyPaddingX: t.menuItemLegacyPaddingX,\n      menuItemPaddingX: t.menuItemPaddingX,\n      menuItemLegacyPaddingY: t.menuItemLegacyPaddingY,\n      menuItemPaddingY: t.menuItemPaddingY,\n    });\n\n    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: ${t.menuItemDisplay};\n      line-height: ${t.menuItemLineHeight};\n      font-size: ${t.menuItemFontSize};\n      padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\n      position: relative;\n      text-decoration: none;\n      color: ${t.menuItemTextColor};\n      border-radius: ${t.menuItemBorderRadius};\n\n      button& {\n        min-width: 100%;\n      }\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.menuItemFontSizeMobile};\n      line-height: ${t.menuItemLineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: ${t.menuItemDisabledBg};\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIcon(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      white-space: normal;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: 0.6;\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      width: ${t.menuItemIconWidth};\n      display: inline-block;\n      position: absolute;\n      left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n      transform: translateY(${t.menuItemIconLegacyShift});\n    `;\n  },\n  mobileContentWithIcon() {\n    return css`\n      margin-left: 8px;\n    `;\n  },\n});\n"]}

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

@@ -1,4 +1,8 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const getMenuItemPaddings: ({ menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, }: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {
+    paddingX: string;
+    paddingY: string;
+};
 export declare const styles: {
     root(t: Theme): string;
     rootMobile(t: Theme): string;
@@ -11,4 +15,5 @@ export declare const styles: {
     comment(t: Theme): string;
     commentHover(t: Theme): string;
     icon(t: Theme): string;
+    mobileContentWithIcon(): string;
 };

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { styles } from "../MenuSeparator.styles";
 export var MenuSeparatorDataTids = {
   root: 'MenuSeparator__root'
@@ -8,14 +10,19 @@ export var MenuSeparatorDataTids = {
 /**
  * Добавляет разделительную линию между элементами меню.
  *
- * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 
 function MenuSeparator(props) {
   var theme = useContext(ThemeContext);
-  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement("div", {
-    "data-tid": MenuSeparatorDataTids.root,
-    className: styles.root(theme)
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+    var _cx;
+
+    var isMobile = _ref.isMobile;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": MenuSeparatorDataTids.root,
+      className: cx((_cx = {}, _cx[styles.root(theme)] = true, _cx[styles.rootMobile(theme)] = isMobile, _cx))
+    });
   }));
 }
 

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","styles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGR,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBM,KAAnB;AACE,iCAAK,YAAUH,qBAAqB,CAACC,IAArC,EAA2C,SAAS,EAAEF,MAAM,CAACE,IAAP,CAAYG,KAAZ,CAAtD,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACG,mBAAd,GAAoC,eAApC;;AAEA,SAASH,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n  root: 'MenuSeparator__root',\n} as const;\n/**\n * Добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...props}>\n      <div data-tid={MenuSeparatorDataTids.root} className={styles.root(theme)} />\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}
+{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","cx","ThemeContext","CommonWrapper","ResponsiveLayout","styles","MenuSeparatorDataTids","root","MenuSeparator","props","theme","isMobile","rootMobile","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,gBAAT,QAAiC,qBAAjC;;AAEA,SAASC,MAAT,QAAuB,wBAAvB;;;;AAIA,OAAO,IAAMC,qBAAqB,GAAG;AACnCC,EAAAA,IAAI,EAAE,qBAD6B,EAA9B;;AAGP;AACA;AACA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGV,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBO,KAAnB;AACE,wBAAC,gBAAD;AACG,oBAAkB,aAAfE,QAAe,QAAfA,QAAe;AACjB;AACE;AACE,sBAAUL,qBAAqB,CAACC,IADlC;AAEE,UAAA,SAAS,EAAEN,EAAE,gBAAII,MAAM,CAACE,IAAP,CAAYG,KAAZ,CAAJ,IAAyB,IAAzB,MAAgCL,MAAM,CAACO,UAAP,CAAkBF,KAAlB,CAAhC,IAA2DC,QAA3D,OAFf,GADF;;;AAMD,KARH,CADF,CADF;;;;AAcD;;AAEDH,aAAa,CAACK,mBAAd,GAAoC,eAApC;;AAEA,SAASL,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n  root: 'MenuSeparator__root',\n} as const;\n/**\n * Добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).\n */\nfunction MenuSeparator(props: MenuSeparatorProps) {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <CommonWrapper {...props}>\n      <ResponsiveLayout>\n        {({ isMobile }) => {\n          return (\n            <div\n              data-tid={MenuSeparatorDataTids.root}\n              className={cx({ [styles.root(theme)]: true, [styles.rootMobile(theme)]: isMobile })}\n            />\n          );\n        }}\n      </ResponsiveLayout>\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/components/MenuSeparator/MenuSeparator.d.ts

@@ -6,7 +6,7 @@ export declare const MenuSeparatorDataTids: {
 /**
  * Добавляет разделительную линию между элементами меню.
  *
- * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
 declare namespace MenuSeparator {

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js

@@ -1,10 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root(t) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      margin: ", " 0;\n      border-top: ", " solid ", ";\n    "])), t.menuSeparatorMarginY, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      margin: ", " ", ";\n      border-radius: 1px;\n    "])), t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
   }
 });

package/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd;AAEgBD,IAAAA,CAAC,CAACE,wBAFlB,EAEoDF,CAAC,CAACG,wBAFtD;;AAID,GANgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      margin: ${t.menuSeparatorMarginY} 0;\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"mappings":"sIAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd;AAEgBD,IAAAA,CAAC,CAACE,wBAFlB,EAEoDF,CAAC,CAACG,wBAFtD;;AAID,GANgC;;AAQjCC,EAAAA,UARiC,sBAQtBJ,CARsB,EAQZ;AACnB,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACK,0BADd,EAC4CL,CAAC,CAACM,0BAD9C;;;AAID,GAbgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      margin: ${t.menuSeparatorMarginY} 0;\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n      border-radius: 1px;\n    `;\n  },\n});\n"]}

package/components/MenuSeparator/MenuSeparator.styles.d.ts

@@ -1,4 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
+    rootMobile(t: Theme): string;
 };

package/components/Modal/Modal/Modal.js

@@ -16,6 +16,7 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isIE11 } from "../../../lib/client";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { ModalContext } from "../ModalContext";
 import { ModalFooter } from "../ModalFooter";
@@ -55,6 +56,7 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Modal.defaultProps);
     _this.state = {
       stackPosition: 0,
       hasBackground: true,
@@ -142,7 +144,7 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
 
     _this.throttledCheckHorizontalScroll = throttle(_this.checkHorizontalScrollAppearance, 100);
 
-    _this.handleResize = function (event) {
+    _this.handleResize = function () {
       LayoutEvents.emit();
     };
 
@@ -281,7 +283,7 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
 
       var isMobile = _ref.isMobile;
       return /*#__PURE__*/React.createElement("div", {
-        className: cx((_cx = {}, _cx[styles.centerContainer(_this3.theme)] = true, _cx[styles.mobileCenterContainer()] = isMobile, _cx[styles.alignTop()] = Boolean(_this3.props.alignTop), _cx)),
+        className: cx((_cx = {}, _cx[styles.centerContainer()] = true, _cx[styles.mobileCenterContainer()] = isMobile, _cx[styles.alignTop()] = Boolean(_this3.props.alignTop), _cx)),
         style: isMobile ? undefined : containerStyle,
         "data-tid": ModalDataTids.content
       }, /*#__PURE__*/React.createElement("div", {
@@ -291,7 +293,7 @@ export var Modal = /*#__PURE__*/function (_React$Component) {
         onResize: _this3.handleResize,
         fullHeight: isMobile
       }, /*#__PURE__*/React.createElement(FocusLock, {
-        disabled: _this3.props.disableFocusLock,
+        disabled: _this3.getProps().disableFocusLock,
         autoFocus: false,
         className: cx((_cx3 = {}, _cx3[styles.columnFlexContainer()] = isMobile, _cx3), 'focus-lock-container')
       }, !hasHeader && !_this3.props.noClose && /*#__PURE__*/React.createElement(ZIndex, {