@skbkontur/react-ui 0.0.0-0b8a8f7a39 → 0.0.0-0dca6f33be

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","cn","isFunction","ThemeContext","CommonWrapper","jsStyles","MenuItem","theme","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","rest","hover","disabled","iconElement","className","root","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","node","bool","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 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\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './MenuItem.styles';\r\n\r\nexport type MenuItemState = null | 'hover' | 'selected' | void;\r\n\r\nexport interface MenuItemProps extends CommonProps {\r\n  /** @ignore */\r\n  _enableIconPadding?: boolean;\r\n\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    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 <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\r\n    const {\r\n      link,\r\n      comment,\r\n      icon,\r\n      loose,\r\n      state,\r\n      _enableIconPadding,\r\n      component,\r\n      onMouseEnter,\r\n      onMouseLeave,\r\n      ...rest\r\n    } = props;\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(this.theme)}>{icon}</div>;\r\n    }\r\n\r\n    const className = cn({\r\n      [jsStyles.root(this.theme)]: 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,\r\n      [jsStyles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\r\n      [jsStyles.disabled(this.theme)]: !!this.props.disabled,\r\n    });\r\n\r\n    const { children } = this.props;\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(this.theme)]: true,\r\n              [jsStyles.commentHover(this.theme)]: 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":["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,29 +1,88 @@
-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 {
-    /** @ignore */
+export interface MenuItemProps extends Omit<CommonProps, 'children'> {
+    /**
+     * @ignore
+     */
     _enableIconPadding?: boolean;
+    /**
+     * Добавляет описание для элемента меню.
+     */
     comment?: React.ReactNode;
+    /**
+     * Отключенное состояние.
+     */
     disabled?: boolean;
+    /**
+     * Добавляет элементу меню иконку.
+     */
     icon?: React.ReactElement<any>;
+    /**
+     * Меняет цвет текста на синий.
+     */
     link?: boolean;
-    /** @ignore */
+    /**
+     * @ignore
+     */
     loose?: boolean;
-    /** @ignore */
+    /**
+     * @ignore
+     */
     state?: MenuItemState;
+    /**
+     * HTML-событие `onclick`.
+     */
     onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    /**
+     * HTML-событие `mouseenter`.
+     */
+    onMouseEnter?: React.MouseEventHandler;
+    /**
+     * HTML-событие `mouseleave`.
+     */
+    onMouseLeave?: React.MouseEventHandler;
     children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);
+    /**
+     * HTML-атрибут `target`.
+     */
     target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    /**
+     * HTML-атрибут `title`.
+     */
     title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];
+    /**
+     * HTML-атрибут `href`.
+     */
     href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
-    onMouseEnter?: React.MouseEventHandler;
-    onMouseLeave?: React.MouseEventHandler;
+    /**
+     * HTML-атрибут `rel`.
+     *
+     * Для внешних ссылок аттрибут rel по умолчанию равен "noopener noreferrer"
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+    /**
+     * Заменяет корневой элемент, на компонент переданный в проп.
+     *
+     * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.
+     */
     component?: React.ComponentType<any>;
+    isMobile?: boolean;
+    /**
+     * Атрибут для указания id элемента(-ов), описывающих его
+     */
+    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
+export declare const MenuItemDataTids: {
+    readonly root: "MenuItem__root";
+    readonly comment: "MenuItem__comment";
+};
 /**
- * Элемент меню.
+ *
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 export declare class MenuItem extends React.Component<MenuItemProps> {
     static __KONTUR_REACT_UI__: string;
@@ -32,18 +91,25 @@ export declare class MenuItem extends React.Component<MenuItemProps> {
         comment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         disabled: PropTypes.Requireable<boolean>;
         href: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         loose: PropTypes.Requireable<boolean>;
         state: PropTypes.Requireable<string>;
         target: PropTypes.Requireable<string>;
         onClick: PropTypes.Requireable<(...args: any[]) => any>;
     };
+    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<MenuItemProps, string | React.JSXElementConstructor<any>>;
+export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

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

@@ -1,44 +1,68 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+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";
-var styles = {
+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\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX);
+    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\n      &:nth-last-of-type(n + 2) {\n        margin-bottom: ", ";\n      }\n    "])), resetButton(), t.menuItemDisplay, t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor, t.menuItemBorderRadius, t.menuItemGap);
+  },
+  rootMobile: function rootMobile(t) {
+    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`
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      color: ", " !important;\n    "])), t.menuItemHoverBg, t.menuItemHoverColor);
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      color: ", " !important;\n    "])), t.menuItemHoverBg, t.menuItemHoverColor);
   },
   selected: function selected(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.menuItemSelectedBg);
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
   },
   disabled: function disabled(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: transparent !important;\n      color: ", " !important;\n      cursor: default !important;\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(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
   },
   loose: function loose() {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
   },
   withIcon: function withIcon(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-left: ", " !important;\n    "])), t.menuItemPaddingForIcon);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.menuItemPaddingForIcon);
   },
   comment: function comment(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      white-space: normal;\n    "])), t.menuItemCommentColor);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: ", ";\n      white-space: normal;\n    "])), t.menuItemCommentColor, t.menuItemCommentOpacity);
   },
   commentHover: function commentHover(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
   },
   icon: function icon(t) {
-    return css(_templateObject10 || (_templateObject10 = _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    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift","jsStyles"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;AACA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;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,WAAOd,GAAP;AACIE,IAAAA,WAAW,EADf;;;;AAKiBG,IAAAA,CAAC,CAACU,kBALnB;AAMeV,IAAAA,CAAC,CAACW,gBANjB;AAOaX,IAAAA,CAAC,CAACS,gBAPf,EAOmCH,QAPnC,EAO+CE,QAP/C,EAO2DR,CAAC,CAACO,gBAP7D;;;;;;;;AAeD,GAvBY;;AAyBbK,EAAAA,KAzBa,iBAyBPZ,CAzBO,EAyBG;AACd;AACA,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACa,eADlB;AAEWb,IAAAA,CAAC,CAACc,kBAFb;;AAID,GA/BY;AAgCbC,EAAAA,QAhCa,oBAgCJf,CAhCI,EAgCM;AACjB,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACgB,kBADlB;;AAGD,GApCY;AAqCbC,EAAAA,QArCa,oBAqCJjB,CArCI,EAqCM;AACjB,WAAOL,GAAP;;AAEWK,IAAAA,CAAC,CAACkB,qBAFb;;;AAKD,GA3CY;AA4CbC,EAAAA,IA5Ca,gBA4CRnB,CA5CQ,EA4CE;AACb,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACoB,iBADb;;AAGD,GAhDY;AAiDbC,EAAAA,KAjDa,mBAiDL;AACN,WAAO1B,GAAP;;;AAGD,GArDY;AAsDb2B,EAAAA,QAtDa,oBAsDJtB,CAtDI,EAsDM;AACjB,WAAOL,GAAP;AACkBK,IAAAA,CAAC,CAACuB,sBADpB;;AAGD,GA1DY;AA2DbC,EAAAA,OA3Da,mBA2DLxB,CA3DK,EA2DK;AAChB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACyB,oBADb;;;AAID,GAhEY;AAiEbC,EAAAA,YAjEa,wBAiEA1B,CAjEA,EAiEU;AACrB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAAC2B,yBADb;;;AAID,GAtEY;AAuEbC,EAAAA,IAvEa,gBAuER5B,CAvEQ,EAuEE;AACb,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAAC6B,iBADb;;;AAIUC,IAAAA,QAAQ,CAAC9B,CAAC,CAACO,gBAAH,CAAR,GAA+BuB,QAAQ,CAAC9B,CAAC,CAAC+B,wBAAH,CAJjD;AAKS/B,IAAAA,CAAC,CAACS,gBALX;AAM0BT,IAAAA,CAAC,CAACgC,uBAN5B;;AAQD,GAhFY,EAAf;;;AAmFA,OAAO,IAAMC,QAAQ,GAAGrC,YAAY,CAACE,MAAD,CAA7B","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(t: Theme) {\r\n    const legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);\r\n    const legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);\r\n\r\n    const paddingX = legacyPaddingX !== 0 ? `${parseFloat(t.menuItemPaddingX) + legacyPaddingX}px` : t.menuItemPaddingX;\r\n    const paddingY = legacyPaddingY !== 0 ? `${parseFloat(t.menuItemPaddingY) + legacyPaddingY}px` : t.menuItemPaddingY;\r\n\r\n    return css`\r\n      ${resetButton()};\r\n\r\n      cursor: pointer;\r\n      display: block;\r\n      line-height: ${t.menuItemLineHeight};\r\n      font-size: ${t.menuItemFontSize};\r\n      padding: ${t.menuItemPaddingY} ${paddingX} ${paddingY} ${t.menuItemPaddingX};\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\r\n  hover(t: Theme) {\r\n    // Color with !important in purpose to override `a:hover`\r\n    return css`\r\n      background: ${t.menuItemHoverBg} !important;\r\n      color: ${t.menuItemHoverColor} !important;\r\n    `;\r\n  },\r\n  selected(t: Theme) {\r\n    return css`\r\n      background: ${t.menuItemSelectedBg};\r\n    `;\r\n  },\r\n  disabled(t: Theme) {\r\n    return css`\r\n      background: transparent !important;\r\n      color: ${t.menuItemDisabledColor} !important;\r\n      cursor: default !important;\r\n    `;\r\n  },\r\n  link(t: Theme) {\r\n    return css`\r\n      color: ${t.menuItemLinkColor};\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      padding-left: ${t.menuItemPaddingForIcon} !important;\r\n    `;\r\n  },\r\n  comment(t: Theme) {\r\n    return css`\r\n      color: ${t.menuItemCommentColor};\r\n      white-space: normal;\r\n    `;\r\n  },\r\n  commentHover(t: Theme) {\r\n    return css`\r\n      color: ${t.menuItemCommentColorHover};\r\n      opacity: 0.6;\r\n    `;\r\n  },\r\n  icon(t: Theme) {\r\n    return css`\r\n      width: ${t.menuItemIconWidth};\r\n      display: inline-block;\r\n      position: absolute;\r\n      left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\r\n      top: ${t.menuItemPaddingY};\r\n      transform: translateY(${t.menuItemIconLegacyShift});\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\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","menuItemGap","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","menuItemCommentOpacity","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      &:nth-last-of-type(n + 2) {\n        margin-bottom: ${t.menuItemGap};\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      opacity: ${t.menuItemCommentOpacity};\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,6 +1,11 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+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;
     hover(t: Theme): string;
     selected(t: Theme): string;
     disabled(t: Theme): string;
@@ -10,4 +15,5 @@ export declare const jsStyles: {
     comment(t: Theme): string;
     commentHover(t: Theme): string;
     icon(t: Theme): string;
+    mobileContentWithIcon(): string;
 };

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

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

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -1,15 +1,28 @@
 import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../MenuSeparator.styles";
-/**
- * Разделитель в меню.
+import { ResponsiveLayout } from "../../ResponsiveLayout";
+import { styles } from "../MenuSeparator.styles";
+export var MenuSeparatorDataTids = {
+  root: 'MenuSeparator__root'
+};
+/**
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `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", {
-    className: jsStyles.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","jsStyles","MenuSeparator","props","theme","root","__KONTUR_REACT_UI__"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAAsBC,aAAtB,QAA2C,8BAA3C;;AAEA,SAASC,QAAT,QAAyB,wBAAzB;;;AAGA;AACA;AACA;AACA,SAASC,aAAT,CAAuBC,KAAvB,EAAkD;AAChD,MAAMC,KAAK,GAAGN,UAAU,CAACC,YAAD,CAAxB;;AAEA;AACE,wBAAC,aAAD,EAAmBI,KAAnB;AACE,iCAAK,SAAS,EAAEF,QAAQ,CAACI,IAAT,CAAcD,KAAd,CAAhB,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACI,mBAAd,GAAoC,eAApC;;AAEA,SAASJ,aAAT","sourcesContent":["import React, { useContext } from 'react';\r\n\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './MenuSeparator.styles';\r\n\r\nexport type MenuSeparatorProps = CommonProps;\r\n/**\r\n * Разделитель в меню.\r\n */\r\nfunction MenuSeparator(props: MenuSeparatorProps) {\r\n  const theme = useContext(ThemeContext);\r\n\r\n  return (\r\n    <CommonWrapper {...props}>\r\n      <div className={jsStyles.root(theme)} />\r\n    </CommonWrapper>\r\n  );\r\n}\r\n\r\nMenuSeparator.__KONTUR_REACT_UI__ = 'MenuSeparator';\r\n\r\nexport { MenuSeparator };\r\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

@@ -1,7 +1,12 @@
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type MenuSeparatorProps = CommonProps;
+export declare const MenuSeparatorDataTids: {
+    readonly root: "MenuSeparator__root";
+};
 /**
- * Разделитель в меню.
+ * Добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `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.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/components/MenuSeparator/MenuSeparator.styles/MenuSeparator.styles.js

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

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","jsStyles"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd;AAEgBD,IAAAA,CAAC,CAACE,wBAFlB,EAEoDF,CAAC,CAACG,wBAFtD;;AAID,GANY,EAAf;;;AASA,OAAO,IAAMC,QAAQ,GAAGP,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      margin: ${t.menuSeparatorMarginY} 0;\r\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorMarginX","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,EACsCD,CAAC,CAACE,oBADxC;AAEgBF,IAAAA,CAAC,CAACG,wBAFlB,EAEoDH,CAAC,CAACI,wBAFtD;;AAID,GANgC;;AAQjCC,EAAAA,UARiC,sBAQtBL,CARsB,EAQZ;AACnB,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACM,0BADd,EAC4CN,CAAC,CAACO,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} ${t.menuSeparatorMarginX};\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 jsStyles: {
+export declare const styles: {
     root(t: Theme): string;
+    rootMobile(t: Theme): string;
 };

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

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