@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-3974a633b4

package/cjs/components/MenuItem/MenuItem.js

@@ -1,13 +1,14 @@
 "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 _MenuItem = require("./MenuItem.styles");var _class, _class2, _temp;
 
 
 
@@ -34,16 +35,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,16 +56,6 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
-    theme = void 0;_this.
-    mouseEntered = false;_this.
-
-
-
-
-
-
-
-
 
 
 
@@ -93,7 +74,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.
 
 
 
@@ -115,6 +103,9 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
+    theme = void 0;_this.
+    mouseEntered = false;_this.
+    setRootNode = void 0;_this.
 
 
 
@@ -131,21 +122,61 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
 
 
 
+    renderMain = function (props) {var _cx, _cx2;var
+      link =
+      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,rest = (0, _objectWithoutPropertiesLoose2.default)(props, ["link", "comment", "icon", "loose", "state", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave"]);
 
+      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.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.
 
 
 
@@ -179,11 +210,7 @@ MenuItem = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       }
 
       return 'button';
-    };return _this;}var _proto = MenuItem.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _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 = /*#__PURE__*/_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 /*#__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, _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 /*#__PURE__*/_react.default.isValidElement(child) ?
-  Object.prototype.hasOwnProperty.call(child.type, '__MENU_ITEM__') :
-  false;
-};exports.isMenuItem = isMenuItem;
+    };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 = (0, _utils.isReactUIComponent)('MenuItem');exports.isMenuItem = isMenuItem;

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","theme","mouseEntered","handleMouseEnterFix","e","props","onMouseEnter","handleMouseLeave","onMouseLeave","getComponent","disabled","component","href","render","renderMain","alkoLink","link","comment","icon","loose","state","children","_enableIconPadding","rest","undefined","hover","iconElement","jsStyles","className","root","selected","withIcon","Boolean","content","Component","commentHover","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","bool","node","string","oneOfType","target","onClick","func","isMenuItem","child","isValidElement","Object","prototype","hasOwnProperty","call","type"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport warning from 'warning';\r\nimport cn from 'classnames';\r\n\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './MenuItem.styles';\r\n\r\nexport type MenuItemState = null | 'hover' | 'selected' | void;\r\n\r\nexport interface MenuItemProps {\r\n  /** @ignore */\r\n  _enableIconPadding?: boolean;\r\n\r\n  /** @deprecated @ignore */\r\n  alkoLink?: boolean;\r\n  comment?: React.ReactNode;\r\n  disabled?: boolean;\r\n  icon?: React.ReactElement<any>;\r\n  link?: boolean;\r\n\r\n  /** @ignore */\r\n  loose?: boolean;\r\n\r\n  /** @ignore */\r\n  state?: MenuItemState;\r\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\r\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\r\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\r\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\r\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\r\n  onMouseEnter?: React.MouseEventHandler;\r\n  onMouseLeave?: React.MouseEventHandler;\r\n\r\n  component?: React.ComponentType<any>;\r\n}\r\n\r\n/**\r\n * Элемент меню.\r\n */\r\nexport class MenuItem extends React.Component<MenuItemProps> {\r\n  public static __KONTUR_REACT_UI__ = 'MenuItem';\r\n  public static __MENU_ITEM__ = true;\r\n\r\n  public static propTypes = {\r\n    alkoLink: PropTypes.bool,\r\n\r\n    comment: PropTypes.node,\r\n\r\n    disabled: PropTypes.bool,\r\n\r\n    href: PropTypes.string,\r\n\r\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\r\n\r\n    loose: PropTypes.bool,\r\n\r\n    state: PropTypes.string,\r\n\r\n    target: PropTypes.string,\r\n\r\n    onClick: PropTypes.func,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private mouseEntered = false;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const {\r\n      alkoLink,\r\n      link,\r\n      comment,\r\n      icon,\r\n      loose,\r\n      state,\r\n      children,\r\n      _enableIconPadding,\r\n      component,\r\n      onMouseEnter,\r\n      onMouseLeave,\r\n      ...rest\r\n    } = this.props;\r\n\r\n    warning(alkoLink === undefined, \"[MenuItem]: Prop 'alkoLink' was deprecated please use 'link' instead\");\r\n\r\n    const hover = state === 'hover' && !this.props.disabled;\r\n\r\n    let iconElement = null;\r\n    if (icon) {\r\n      iconElement = <div className={jsStyles.icon()}>{icon}</div>;\r\n    }\r\n\r\n    const className = cn({\r\n      [jsStyles.root()]: true,\r\n      [jsStyles.loose()]: !!loose,\r\n      [jsStyles.hover(this.theme)]: hover,\r\n      [jsStyles.selected(this.theme)]: state === 'selected',\r\n      [jsStyles.link(this.theme)]: !!link || !!alkoLink,\r\n      [jsStyles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\r\n      [jsStyles.disabled(this.theme)]: !!this.props.disabled,\r\n    });\r\n\r\n    let content = children;\r\n    if (isFunction(children)) {\r\n      content = children(this.props.state);\r\n    }\r\n\r\n    const Component = this.getComponent();\r\n\r\n    return (\r\n      <Component\r\n        {...rest}\r\n        state={state}\r\n        onMouseOver={this.handleMouseEnterFix}\r\n        onMouseLeave={this.handleMouseLeave}\r\n        className={className}\r\n        tabIndex={-1}\r\n      >\r\n        {iconElement}\r\n        {content}\r\n        {this.props.comment && (\r\n          <div\r\n            data-tid=\"MenuItem__comment\"\r\n            className={cn({\r\n              [jsStyles.comment()]: true,\r\n              [jsStyles.commentHover()]: hover,\r\n            })}\r\n          >\r\n            {comment}\r\n          </div>\r\n        )}\r\n      </Component>\r\n    );\r\n  }\r\n\r\n  // https://github.com/facebook/react/issues/10109\r\n  // Mouseenter event not triggered when cursor moves from disabled button\r\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\r\n    if (!this.mouseEntered && this.props.onMouseEnter) {\r\n      this.mouseEntered = true;\r\n      this.props.onMouseEnter(e);\r\n    }\r\n  };\r\n\r\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\r\n    this.mouseEntered = false;\r\n    if (this.props.onMouseLeave) {\r\n      this.props.onMouseLeave(e);\r\n    }\r\n  };\r\n\r\n  private getComponent = () => {\r\n    const { disabled, component, href } = this.props;\r\n\r\n    if (disabled) {\r\n      return 'button';\r\n    }\r\n\r\n    if (component) {\r\n      return component;\r\n    }\r\n\r\n    if (href) {\r\n      return 'a';\r\n    }\r\n\r\n    return 'button';\r\n  };\r\n}\r\n\r\nexport const isMenuItem = (child: React.ReactNode): child is React.ReactElement<MenuItemProps> => {\r\n  return React.isValidElement<MenuItemProps>(child)\r\n    ? Object.prototype.hasOwnProperty.call(child.type, '__MENU_ITEM__')\r\n    : false;\r\n};\r\n"]}
+{"version":3,"sources":["MenuItem.tsx"],"names":["MenuItem","rootNode","theme","mouseEntered","setRootNode","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","styles","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","React","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","PropTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction, isReactUIComponent } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends CommonProps {\n  /**\n   * @ignore\n   */\n  _enableIconPadding?: boolean;\n  /**\n   * Добавляет описание для элемента меню.\n   */\n  comment?: React.ReactNode;\n  /**\n   * Отключенное состояние.\n   */\n  disabled?: boolean;\n  /**\n   * Добавляет элементу меню иконку.\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Меняет цвет текста на синий.\n   */\n  link?: boolean;\n  /**\n   * @ignore\n   */\n  loose?: boolean;\n  /**\n   * @ignore\n   */\n  state?: MenuItemState;\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  /**\n   * HTML-атрибут `target`.\n   */\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  /**\n   * HTML-атрибут `href`.\n   */\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  /**\n   * Заменяет корневой элемент, на компонент переданный в проп.\n   *\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n   */\n  component?: React.ComponentType<any>;\n}\n\n/**\n *\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).\n */\n@rootNode\nexport class MenuItem extends React.Component<MenuItemProps> {\n  public static __KONTUR_REACT_UI__ = 'MenuItem';\n  public static __MENU_ITEM__ = true;\n\n  public static propTypes = {\n    comment: PropTypes.node,\n\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n    loose: PropTypes.bool,\n\n    state: PropTypes.string,\n\n    target: PropTypes.string,\n\n    onClick: PropTypes.func,\n  };\n\n  private theme!: Theme;\n  private mouseEntered = false;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n    const { link, comment, icon, loose, state, _enableIconPadding, component, onMouseEnter, onMouseLeave, ...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.loose()]: !!loose,\n      [styles.hover(this.theme)]: hover,\n      [styles.selected(this.theme)]: state === 'selected',\n      [styles.link(this.theme)]: !!link,\n      [styles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\n      [styles.disabled(this.theme)]: !!this.props.disabled,\n    });\n\n    const { children } = this.props;\n\n    let content = children;\n    if (isFunction(children)) {\n      content = children(this.props.state);\n    }\n\n    const Component = this.getComponent();\n\n    return (\n      <Component\n        {...rest}\n        state={state}\n        onMouseOver={this.handleMouseEnterFix}\n        onMouseLeave={this.handleMouseLeave}\n        className={className}\n        tabIndex={-1}\n      >\n        {iconElement}\n        {content}\n        {this.props.comment && (\n          <div\n            data-tid=\"MenuItem__comment\"\n            className={cx({\n              [styles.comment(this.theme)]: true,\n              [styles.commentHover(this.theme)]: hover,\n            })}\n          >\n            {comment}\n          </div>\n        )}\n      </Component>\n    );\n  };\n\n  // https://github.com/facebook/react/issues/10109\n  // Mouseenter event not triggered when cursor moves from disabled button\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n    if (!this.mouseEntered && this.props.onMouseEnter) {\n      this.mouseEntered = true;\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    this.mouseEntered = false;\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (component) {\n      return component;\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}

package/cjs/components/MenuItem/MenuItem.md

@@ -1,7 +1,109 @@
-```jsx harmony
-import { Link } from '@skbkontur/react-ui';
-
-<MenuItem href="http://tech.skbkontur.ru/react-ui/" component={({ href, ...rest }) => <Link to={href} {...rest} />}>
-  Awesome link
-</MenuItem>;
-```
+Меню с базовыми элементами меню.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми элементами меню</Button>}
+  >
+  <MenuItem>Базовый элемент меню</MenuItem>
+  <MenuItem>Ещё один базовый элемент меню</MenuItem>
+  <MenuItem>И ещё один</MenuItem>
+</DropdownMenu>
+```
+
+Меню с отключёнными и базовыми элементами меню.
+<br/>
+К отключённым элементам меню не применяются стили при наведении и их нельзя затаргетить с клавиатуры.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми и отключёнными элементами</Button>}
+  >
+  <MenuItem>Это базовый элемент меню</MenuItem>
+  <MenuItem disabled>А это отключённый</MenuItem>
+  <MenuItem>А это снова базовый</MenuItem>
+  <MenuItem disabled>И снова отключённый</MenuItem>
+  <MenuItem disabled>И вот ещё один отключённый</MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню содержащими описание.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с причастными к Pied Piper</Button>}
+  >
+  <MenuItem comment="Системный инженер">Bertram Gilfoyle</MenuItem>
+  <MenuItem comment="Hooli CEO">Gavin Belson</MenuItem>
+  <MenuItem comment="Java-разработчик">Dinesh Chugtai</MenuItem>
+  <MenuItem comment="Основатель Pied Piper">Richard Hendricks</MenuItem>
+  <MenuItem comment="Владелец инкубатора">Erlich Bachman</MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню содержащими иконки.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+import DeviceSmartphoneIcon from '@skbkontur/react-icons/DeviceSmartphone';
+import OkIcon from '@skbkontur/react-icons/Ok';
+import ThumbDownIcon from '@skbkontur/react-icons/ThumbDown';
+
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с иконками</Button>}
+  >
+  <MenuItem icon={<OkIcon />}>Базовый элемент меню c иконкой</MenuItem>
+  <MenuItem
+    disabled
+    icon={<ThumbDownIcon />}
+    >
+    Отключённый элемент меню с иконкой
+  </MenuItem>
+  <MenuItem
+    icon={<DeviceSmartphoneIcon />}
+    comment="А слева вы можете видеть икону 21-го века"
+    >
+     Элемент меню с описанием и иконкой
+  </MenuItem>
+</DropdownMenu>
+```
+
+Меню с элементами меню обёрнутыми в контрол ссылки.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu, Link } from '@skbkontur/react-ui';
+
+const LinkMenuItem = ({link, title}) => {
+  return <MenuItem
+    href={link}
+    component={({ href, ...rest }) => {
+      return <Link target="_blank" rel="noopener noreferrer" href={href} {...rest} />
+    }}
+    >
+    {title}
+  </MenuItem>
+}
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с ссылками</Button>}
+  >
+  <LinkMenuItem
+    link="http://tech.skbkontur.ru/react-ui/"
+    title="Начало документации"
+    />
+  <LinkMenuItem
+    link="https://guides.kontur.ru/"
+    title="Контур Гайды"
+    />
+  <LinkMenuItem
+    link="https://github.com/skbkontur/retail-ui/graphs/contributors"
+    title="Список прекрасных людей"
+    />
+</DropdownMenu>
+```

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

@@ -1,12 +1,13 @@
-export declare const jsStyles: {
-    root(): string;
-    hover(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    selected(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    link(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(t: Theme): string;
+    hover(t: Theme): string;
+    selected(t: Theme): string;
+    disabled(t: Theme): string;
+    link(t: Theme): string;
     loose(): string;
-    withIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    comment(): string;
-    commentHover(): string;
-    icon(): string;
+    withIcon(t: Theme): string;
+    comment(t: Theme): string;
+    commentHover(t: Theme): string;
+    icon(t: Theme): string;
 };

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

@@ -1,80 +1,86 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"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 _Mixins = require("../../lib/styles/Mixins");function _templateObject10() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      position: absolute;\n      left: 15px;\n      top: 5px;\n    "]);_templateObject10 = function _templateObject10() {return data;};return data;}function _templateObject9() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #fff;\n      opacity: 0.6;\n    "]);_templateObject9 = function _templateObject9() {return data;};return data;}function _templateObject8() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #a0a0a0;\n      white-space: normal;\n    "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      & {\n        padding-left: ", ";\n      }\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: 15px;\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      color: ", " !important;\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: 18px;\n      padding: 6px 18px 7px 8px;\n      position: relative;\n      text-decoration: none;\n\n      button& {\n        min-width: 100%;\n      }\n    "]);_templateObject = function _templateObject() {return data;};return data;}
+var _Mixins = require("../../lib/styles/Mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 
-var styles = {
-  root: function root() {
-    return (0, _Emotion.css)(_templateObject(),
-    (0, _Mixins.resetButton)());
+var styles = (0, _Emotion.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 (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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\n      button& {\n        min-width: 100%;\n      }\n    "])),
+    (0, _Mixins.resetButton)(),
 
 
 
+    t.menuItemLineHeight,
+    t.menuItemFontSize,
+    t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX,
 
 
+    t.menuItemTextColor);
 
 
 
 
 
   },
+
   hover: function hover(t) {
     // Color with !important in purpose to override `a:hover`
-    return (0, _Emotion.css)(_templateObject2(),
-    t.dropdownMenuHoverBg,
-    t.textColorInvert);
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important;\n      color: ", " !important;\n    "])),
+    t.menuItemHoverBg,
+    t.menuItemHoverColor);
 
   },
   selected: function selected(t) {
-    return (0, _Emotion.css)(_templateObject3(),
-    t.dropdownMenuSelectedBg);
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important;\n    "])),
+    t.menuItemSelectedBg);
 
   },
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject4(),
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "])),
 
-    t.textColorDisabled);
+    t.menuItemDisabledColor);
 
 
   },
   link: function link(t) {
-    return (0, _Emotion.css)(_templateObject5(),
-    t.linkColor);
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    t.menuItemLinkColor);
 
   },
   loose: function loose() {
-    return (0, _Emotion.css)(_templateObject6());
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: 15px;\n    "])));
 
 
   },
   withIcon: function withIcon(t) {
-    return (0, _Emotion.css)(_templateObject7(),
-
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding-left: ", ";\n    "])),
     t.menuItemPaddingForIcon);
 
-
   },
-  comment: function comment() {
-    return (0, _Emotion.css)(_templateObject8());
-
+  comment: function comment(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      white-space: normal;\n    "])),
+    t.menuItemCommentColor);
 
 
   },
-  commentHover: function commentHover() {
-    return (0, _Emotion.css)(_templateObject9());
-
+  commentHover: function commentHover(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      opacity: 0.6;\n    "])),
+    t.menuItemCommentColorHover);
 
 
   },
-  icon: function icon() {
-    return (0, _Emotion.css)(_templateObject10());
-
-
-
-
+  icon: function icon(t) {
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\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);
 
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.styles.ts"],"names":["styles","root","css","hover","t","dropdownMenuHoverBg","textColorInvert","selected","dropdownMenuSelectedBg","disabled","textColorDisabled","link","linkColor","loose","withIcon","menuItemPaddingForIcon","comment","commentHover","icon","jsStyles"],"mappings":";AACA;AACA,iD;;AAEA,IAAMA,MAAM,GAAG;AACbC,EAAAA,IADa,kBACN;AACL,eAAOC,YAAP;AACI,8BADJ;;;;;;;;;;;;;AAcD,GAhBY;AAiBbC,EAAAA,KAjBa,iBAiBPC,CAjBO,EAiBG;AACd;AACA,eAAOF,YAAP;AACgBE,IAAAA,CAAC,CAACC,mBADlB;AAEWD,IAAAA,CAAC,CAACE,eAFb;;AAID,GAvBY;AAwBbC,EAAAA,QAxBa,oBAwBJH,CAxBI,EAwBM;AACjB,eAAOF,YAAP;AACgBE,IAAAA,CAAC,CAACI,sBADlB;;AAGD,GA5BY;AA6BbC,EAAAA,QA7Ba,oBA6BJL,CA7BI,EA6BM;AACjB,eAAOF,YAAP;;AAEWE,IAAAA,CAAC,CAACM,iBAFb;;;AAKD,GAnCY;AAoCbC,EAAAA,IApCa,gBAoCRP,CApCQ,EAoCE;AACb,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACQ,SADb;;AAGD,GAxCY;AAyCbC,EAAAA,KAzCa,mBAyCL;AACN,eAAOX,YAAP;;;AAGD,GA7CY;AA8CbY,EAAAA,QA9Ca,oBA8CJV,CA9CI,EA8CM;AACjB,eAAOF,YAAP;;AAEoBE,IAAAA,CAAC,CAACW,sBAFtB;;;AAKD,GApDY;AAqDbC,EAAAA,OArDa,qBAqDH;AACR,eAAOd,YAAP;;;;AAID,GA1DY;AA2Dbe,EAAAA,YA3Da,0BA2DE;AACb,eAAOf,YAAP;;;;AAID,GAhEY;AAiEbgB,EAAAA,IAjEa,kBAiEN;AACL,eAAOhB,YAAP;;;;;;AAMD,GAxEY,EAAf;;;AA2EO,IAAMiB,QAAQ,GAAG,2BAAanB,MAAb,CAAjB,C","sourcesContent":["import { Theme } from '../../lib/theming/Theme';\r\nimport { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { resetButton } from '../../lib/styles/Mixins';\r\n\r\nconst styles = {\r\n  root() {\r\n    return css`\r\n      ${resetButton()};\r\n\r\n      cursor: pointer;\r\n      display: block;\r\n      line-height: 18px;\r\n      padding: 6px 18px 7px 8px;\r\n      position: relative;\r\n      text-decoration: none;\r\n\r\n      button& {\r\n        min-width: 100%;\r\n      }\r\n    `;\r\n  },\r\n  hover(t: Theme) {\r\n    // Color with !important in purpose to override `a:hover`\r\n    return css`\r\n      background: ${t.dropdownMenuHoverBg};\r\n      color: ${t.textColorInvert} !important;\r\n    `;\r\n  },\r\n  selected(t: Theme) {\r\n    return css`\r\n      background: ${t.dropdownMenuSelectedBg};\r\n    `;\r\n  },\r\n  disabled(t: Theme) {\r\n    return css`\r\n      background: transparent;\r\n      color: ${t.textColorDisabled};\r\n      cursor: default;\r\n    `;\r\n  },\r\n  link(t: Theme) {\r\n    return css`\r\n      color: ${t.linkColor};\r\n    `;\r\n  },\r\n  loose() {\r\n    return css`\r\n      padding-left: 15px;\r\n    `;\r\n  },\r\n  withIcon(t: Theme) {\r\n    return css`\r\n      & {\r\n        padding-left: ${t.menuItemPaddingForIcon};\r\n      }\r\n    `;\r\n  },\r\n  comment() {\r\n    return css`\r\n      color: #a0a0a0;\r\n      white-space: normal;\r\n    `;\r\n  },\r\n  commentHover() {\r\n    return css`\r\n      color: #fff;\r\n      opacity: 0.6;\r\n    `;\r\n  },\r\n  icon() {\r\n    return css`\r\n      display: inline-block;\r\n      position: absolute;\r\n      left: 15px;\r\n      top: 5px;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuItem.styles.ts"],"names":["styles","root","t","legacyPaddingX","parseFloat","menuItemLegacyPaddingX","legacyPaddingY","menuItemLegacyPaddingY","paddingX","menuItemPaddingX","paddingY","menuItemPaddingY","css","menuItemLineHeight","menuItemFontSize","menuItemTextColor","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift"],"mappings":";AACA;AACA,iD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,QAAMC,cAAc,GAAGC,UAAU,CAACF,CAAC,CAACG,sBAAH,CAAjC;AACA,QAAMC,cAAc,GAAGF,UAAU,CAACF,CAAC,CAACK,sBAAH,CAAjC;;AAEA,QAAMC,QAAQ,GAAGL,cAAc,KAAK,CAAnB,GAA0BC,UAAU,CAACF,CAAC,CAACO,gBAAH,CAAV,GAAiCN,cAA3D,UAAgFD,CAAC,CAACO,gBAAnG;AACA,QAAMC,QAAQ,GAAGJ,cAAc,KAAK,CAAnB,GAA0BF,UAAU,CAACF,CAAC,CAACS,gBAAH,CAAV,GAAiCL,cAA3D,UAAgFJ,CAAC,CAACS,gBAAnG;;AAEA,eAAOC,YAAP;AACI,8BADJ;;;;AAKiBV,IAAAA,CAAC,CAACW,kBALnB;AAMeX,IAAAA,CAAC,CAACY,gBANjB;AAOaZ,IAAAA,CAAC,CAACS,gBAPf,EAOmCH,QAPnC,EAO+CE,QAP/C,EAO2DR,CAAC,CAACO,gBAP7D;;;AAUWP,IAAAA,CAAC,CAACa,iBAVb;;;;;;AAgBD,GAxBgC;;AA0BjCC,EAAAA,KA1BiC,iBA0B3Bd,CA1B2B,EA0BjB;AACd;AACA,eAAOU,YAAP;AACgBV,IAAAA,CAAC,CAACe,eADlB;AAEWf,IAAAA,CAAC,CAACgB,kBAFb;;AAID,GAhCgC;AAiCjCC,EAAAA,QAjCiC,oBAiCxBjB,CAjCwB,EAiCd;AACjB,eAAOU,YAAP;AACgBV,IAAAA,CAAC,CAACkB,kBADlB;;AAGD,GArCgC;AAsCjCC,EAAAA,QAtCiC,oBAsCxBnB,CAtCwB,EAsCd;AACjB,eAAOU,YAAP;;AAEWV,IAAAA,CAAC,CAACoB,qBAFb;;;AAKD,GA5CgC;AA6CjCC,EAAAA,IA7CiC,gBA6C5BrB,CA7C4B,EA6ClB;AACb,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAACsB,iBADb;;AAGD,GAjDgC;AAkDjCC,EAAAA,KAlDiC,mBAkDzB;AACN,eAAOb,YAAP;;;AAGD,GAtDgC;AAuDjCc,EAAAA,QAvDiC,oBAuDxBxB,CAvDwB,EAuDd;AACjB,eAAOU,YAAP;AACkBV,IAAAA,CAAC,CAACyB,sBADpB;;AAGD,GA3DgC;AA4DjCC,EAAAA,OA5DiC,mBA4DzB1B,CA5DyB,EA4Df;AAChB,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC2B,oBADb;;;AAID,GAjEgC;AAkEjCC,EAAAA,YAlEiC,wBAkEpB5B,CAlEoB,EAkEV;AACrB,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC6B,yBADb;;;AAID,GAvEgC;AAwEjCC,EAAAA,IAxEiC,gBAwE5B9B,CAxE4B,EAwElB;AACb,eAAOU,YAAP;AACWV,IAAAA,CAAC,CAAC+B,iBADb;;;AAIUC,IAAAA,QAAQ,CAAChC,CAAC,CAACO,gBAAH,CAAR,GAA+ByB,QAAQ,CAAChC,CAAC,CAACiC,wBAAH,CAJjD;AAKSjC,IAAAA,CAAC,CAACS,gBALX;AAM0BT,IAAAA,CAAC,CAACkC,uBAN5B;;AAQD,GAjFgC,EAAb,CAAf,C","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\n      button& {\n        min-width: 100%;\n      }\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"]}

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

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

package/cjs/components/MenuSeparator/MenuSeparator.d.ts

@@ -1,8 +1,11 @@
-/// <reference types="react" />
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type MenuSeparatorProps = CommonProps;
 /**
- * Разделитель в меню.
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
-declare function MenuSeparator(): JSX.Element;
+declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
 declare namespace MenuSeparator {
     var __KONTUR_REACT_UI__: string;
 }

package/cjs/components/MenuSeparator/MenuSeparator.js

@@ -1,16 +1,24 @@
 "use strict";var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");exports.__esModule = true;exports.MenuSeparator = MenuSeparator;var _react = _interopRequireWildcard(require("react"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _CommonWrapper = require("../../internal/CommonWrapper");
 
 var _MenuSeparator = require("./MenuSeparator.styles");
 
-/**
- * Разделитель в меню.
+
+/**
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: [`DropdownMenu`](#/Components/DropdownMenu), [`Kebab`](#/Components/Kebab), [`TooltipMenu`](#/Components/TooltipMenu) и [`Select`](#/Components/Select).
  */
-function MenuSeparator() {
+function MenuSeparator(props) {
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
 
-  return /*#__PURE__*/_react.default.createElement("div", { className: _MenuSeparator.jsStyles.root(theme) });
+  return /*#__PURE__*/(
+    _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
+    _react.default.createElement("div", { className: _MenuSeparator.styles.root(theme) })));
+
+
 }
 
 MenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.tsx"],"names":["MenuSeparator","theme","ThemeContext","jsStyles","root","__KONTUR_REACT_UI__"],"mappings":"oKAAA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA,SAASA,aAAT,GAAyB;AACvB,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA,sBAAO,sCAAK,SAAS,EAAEC,wBAASC,IAAT,CAAcH,KAAd,CAAhB,GAAP;AACD;;AAEDD,aAAa,CAACK,mBAAd,GAAoC,eAApC","sourcesContent":["import React, { useContext } from 'react';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\n\r\nimport { jsStyles } from './MenuSeparator.styles';\r\n\r\n/**\r\n * Разделитель в меню.\r\n */\r\nfunction MenuSeparator() {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return <div className={jsStyles.root(theme)} />;\r\n}\r\n\r\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\r\n\r\nexport { MenuSeparator };\r\n"]}
+{"version":3,"sources":["MenuSeparator.tsx"],"names":["MenuSeparator","props","theme","ThemeContext","styles","root","__KONTUR_REACT_UI__"],"mappings":"oKAAA;;AAEA;AACA;;AAEA;;;AAGA;AACA;AACA;AACA;AACA;AACA,SAASA,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;;AAEA;AACE,iCAAC,4BAAD,EAAmBF,KAAnB;AACE,0CAAK,SAAS,EAAEG,sBAAOC,IAAP,CAAYH,KAAZ,CAAhB,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACM,mBAAd,GAAoC,eAApC","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/**\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 className={styles.root(theme)} />\n    </CommonWrapper>\n  );\n}\n\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\n\nexport { MenuSeparator };\n"]}

package/cjs/components/MenuSeparator/MenuSeparator.md

@@ -0,0 +1,14 @@
+Пример меню с разделителями.
+
+```jsx harmony
+import { Button, MenuHeader, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu caption={<Button use="primary">Открыть меню с разделителями</Button>}>
+  <MenuItem>У меня есть разделитель</MenuItem>
+  <MenuSeparator />
+  <MenuItem>У меня тоже!</MenuItem>
+  <MenuSeparator />
+  <MenuItem>А у меня нет :(</MenuItem>
+  <MenuItem>Как и у меня :(</MenuItem>
+</DropdownMenu>;
+```

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

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