@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bc0c053ae7

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.tsx"],"names":["React","PropTypes","isFunction","ThemeContext","CommonWrapper","cx","rootNode","styles","MenuItem","mouseEntered","renderMain","props","link","comment","icon","loose","state","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","rest","hover","disabled","iconElement","theme","className","root","rootMobile","selected","withIcon","Boolean","children","content","Component","getComponent","handleMouseEnterFix","handleMouseLeave","commentHover","e","href","render","setRootNode","__KONTUR_REACT_UI__","__MENU_ITEM__","propTypes","node","bool","string","oneOfType","target","onClick","func","isMenuItem","child","type"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './MenuItem.styles';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps extends CommonProps {\n  /**\n   * @ignore\n   */\n  _enableIconPadding?: boolean;\n  /**\n   * Добавляет описание для элемента меню.\n   */\n  comment?: React.ReactNode;\n  /**\n   * Отключенное состояние.\n   */\n  disabled?: boolean;\n  /**\n   * Добавляет элементу меню иконку.\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Меняет цвет текста на синий.\n   */\n  link?: boolean;\n  /**\n   * @ignore\n   */\n  loose?: boolean;\n  /**\n   * @ignore\n   */\n  state?: MenuItemState;\n  /**\n   * HTML-событие `onclick`.\n   */\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  /**\n   * HTML-событие `mouseenter`.\n   */\n  onMouseEnter?: React.MouseEventHandler;\n  /**\n   * HTML-событие `mouseleave`.\n   */\n  onMouseLeave?: React.MouseEventHandler;\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n  /**\n   * HTML-атрибут `target`.\n   */\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n  /**\n   * HTML-атрибут `title`.\n   */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n  /**\n   * HTML-атрибут `href`.\n   */\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n  /**\n   * Заменяет корневой элемент, на компонент переданный в проп.\n   *\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.\n   */\n  component?: React.ComponentType<any>;\n\n  isMobile?: boolean;\n}\n\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 {\n      link,\n      comment,\n      icon,\n      loose,\n      state,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      ...rest\n    } = props;\n\n    const hover = state === 'hover' && !this.props.disabled;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = <div className={styles.icon(this.theme)}>{icon}</div>;\n    }\n\n    const className = cx({\n      [styles.root(this.theme)]: true,\n      [styles.rootMobile(this.theme)]: isMobile,\n      [styles.loose()]: !!loose,\n      [styles.hover(this.theme)]: hover,\n      [styles.selected(this.theme)]: state === 'selected',\n      [styles.link(this.theme)]: !!link,\n      [styles.withIcon(this.theme)]: Boolean(iconElement) || !!_enableIconPadding,\n      [styles.disabled(this.theme)]: !!this.props.disabled,\n    });\n\n    const { children } = this.props;\n\n    let content = children;\n    if (isFunction(children)) {\n      content = children(this.props.state);\n    }\n\n    const Component = this.getComponent();\n\n    return (\n      <Component\n        {...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 = (child: React.ReactNode): child is React.ReactElement<MenuItemProps> => {\n  // @ts-ignore\n  return child?.type?.__KONTUR_REACT_UI__ === 'MenuItem';\n};\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","size","_enableIconPadding","component","onMouseEnter","onMouseLeave","isMobile","href","disabled","rel","rest","hover","iconElement","top","theme","getIconSizeClassName","className","getRootSizeClassName","rootMobile","selected","getWithIconSizeClassName","Boolean","children","content","Component","getComponent","setRootRef","handleMouseEnterFix","handleMouseLeave","undefined","mobileContentWithIcon","commentHover","e","element","render","setRootNode","componentDidMount","setState","window","getComputedStyle","getPropertyValue","rootLarge","rootMedium","rootSmall","iconLarge","iconMedium","iconSmall","withIconLarge","withIconMedium","withIconSmall","__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';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './MenuItem.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type MenuItemSize = SizeProp;\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps\n  extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    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   * Размер\n   */\n  size?: SizeProp;\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\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    size: PropTypes.string,\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 getRootSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.rootLarge(this.theme);\n      case 'medium':\n        return styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return styles.rootSmall(this.theme);\n    }\n  }\n\n  private getIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.iconLarge(this.theme);\n      case 'medium':\n        return styles.iconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.iconSmall(this.theme);\n    }\n  }\n\n  private getWithIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return styles.withIconLarge(this.theme);\n      case 'medium':\n        return styles.withIconMedium(this.theme);\n      case 'small':\n      default:\n        return styles.withIconSmall(this.theme);\n    }\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<MenuItemProps>) => {\n    const {\n      link,\n      comment,\n      icon,\n      loose,\n      state,\n      size,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      href,\n      disabled,\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\n          style={{ top: this.state.iconOffsetTop }}\n          className={cx({\n            [styles.icon(this.theme)]: true,\n            [this.getIconSizeClassName()]: true,\n          })}\n        >\n          {icon}\n        </div>\n      );\n    }\n\n    const className = cx({\n      [styles.root(this.theme)]: true,\n      [this.getRootSizeClassName()]: 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      [this.getWithIconSizeClassName()]: 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      >\n        {iconElement}\n        <span\n          className={cx({\n            [styles.mobileContentWithIcon()]: isMobile && isNonNullable(icon),\n          })}\n        >\n          {content}\n        </span>\n        {this.props.comment && (\n          <div\n            data-tid={MenuItemDataTids.comment}\n            className={cx({\n              [styles.comment(this.theme)]: true,\n              [styles.commentHover(this.theme)]: hover,\n            })}\n          >\n            {comment}\n          </div>\n        )}\n      </Component>\n    );\n  };\n\n  // https://github.com/facebook/react/issues/10109\n  // Mouseenter event not triggered when cursor moves from disabled button\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n    if (!this.mouseEntered && this.props.onMouseEnter) {\n      this.mouseEntered = true;\n      this.props.onMouseEnter(e);\n    }\n  };\n\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    this.mouseEntered = false;\n    if (this.props.onMouseLeave) {\n      this.props.onMouseLeave(e);\n    }\n  };\n\n  private setRootRef = (element: HTMLElement) => {\n    this.rootRef = element;\n  };\n\n  private getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (component) {\n      return component;\n    }\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}

package/components/MenuItem/MenuItem.d.ts

@@ -1,8 +1,13 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type MenuItemSize = SizeProp;
 export declare type MenuItemState = null | 'hover' | 'selected' | void;
-export interface MenuItemProps extends CommonProps {
+export interface MenuItemProps extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Omit<CommonProps, 'children'> {
     /**
      * @ignore
      */
@@ -23,6 +28,10 @@ export interface MenuItemProps extends CommonProps {
      * Меняет цвет текста на синий.
      */
     link?: boolean;
+    /**
+     * Размер
+     */
+    size?: SizeProp;
     /**
      * @ignore
      */
@@ -56,6 +65,12 @@ export interface MenuItemProps extends CommonProps {
      * HTML-атрибут `href`.
      */
     href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];
+    /**
+     * HTML-атрибут `rel`.
+     *
+     * Для внешних ссылок аттрибут rel по умолчанию равен "noopener noreferrer"
+     */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
     /**
      * Заменяет корневой элемент, на компонент переданный в проп.
      *
@@ -64,11 +79,15 @@ export interface MenuItemProps extends CommonProps {
     component?: React.ComponentType<any>;
     isMobile?: boolean;
 }
+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).
+ * Сущности в которых может быть использован `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;
@@ -77,19 +96,29 @@ 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>;
+        size: PropTypes.Requireable<string>;
+    };
+    state: {
+        iconOffsetTop: number;
     };
     private theme;
     private mouseEntered;
     private setRootNode;
+    private rootRef;
     render(): JSX.Element;
+    componentDidMount(): void;
+    private getRootSizeClassName;
+    private getIconSizeClassName;
+    private getWithIconSizeClassName;
     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

@@ -107,3 +107,15 @@ const LinkMenuItem = ({link, title}) => {
     />
 </DropdownMenu>
 ```
+
+У MenuItem есть 3 стандартных размера.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped vertical>
+  <MenuItem size={'small'}>Маленький</MenuItem>
+  <MenuItem size={'medium'}>Средний</MenuItem>
+  <MenuItem size={'large'}>Большой</MenuItem>
+</Gapped>
+```

package/components/MenuItem/MenuItem.mixins/MenuItem.mixins.js

@@ -0,0 +1,24 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from "../../../lib/theming/Emotion";
+import { getMenuItemPaddings } from "../MenuItem.styles";
+export var menuItemSizeMixin = function menuItemSizeMixin(menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, menuItemLineHeight, menuItemFontSize) {
+  var _getMenuItemPaddings = getMenuItemPaddings({
+    menuItemLegacyPaddingX: menuItemLegacyPaddingX,
+    menuItemPaddingX: menuItemPaddingX,
+    menuItemLegacyPaddingY: menuItemLegacyPaddingY,
+    menuItemPaddingY: menuItemPaddingY
+  }),
+      paddingX = _getMenuItemPaddings.paddingX,
+      paddingY = _getMenuItemPaddings.paddingY;
+
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n    padding: ", " ", " ", " ", ";\n  "])), menuItemLineHeight, menuItemFontSize, menuItemPaddingY, paddingX, paddingY, menuItemPaddingX);
+};
+export var iconSizeMixin = function iconSizeMixin(menuItemIconWidth, menuItemPaddingX, menuItemIconLegacyMargin) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    width: ", ";\n    left: ", "px;\n  "])), menuItemIconWidth, parseInt(menuItemPaddingX) + parseInt(menuItemIconLegacyMargin));
+};
+export var withIconSizeMixin = function withIconSizeMixin(menuItemPaddingForIcon) {
+  return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    padding-left: ", ";\n  "])), menuItemPaddingForIcon);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["MenuItem.mixins.ts"],"names":["css","getMenuItemPaddings","menuItemSizeMixin","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","paddingX","paddingY","iconSizeMixin","menuItemIconWidth","menuItemIconLegacyMargin","parseInt","withIconSizeMixin","menuItemPaddingForIcon"],"mappings":"wJAAA,SAASA,GAAT,QAAoB,2BAApB;;AAEA,SAASC,mBAAT,QAAoC,mBAApC;;AAEA,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;AAC/BC,sBAD+B;AAE/BC,gBAF+B;AAG/BC,sBAH+B;AAI/BC,gBAJ+B;AAK/BC,kBAL+B;AAM/BC,gBAN+B;AAO5B;AACH,6BAA+BP,mBAAmB,CAAC;AACjDE,IAAAA,sBAAsB,EAAtBA,sBADiD;AAEjDC,IAAAA,gBAAgB,EAAhBA,gBAFiD;AAGjDC,IAAAA,sBAAsB,EAAtBA,sBAHiD;AAIjDC,IAAAA,gBAAgB,EAAhBA,gBAJiD,EAAD,CAAlD,CAAQG,QAAR,wBAAQA,QAAR,CAAkBC,QAAlB,wBAAkBA,QAAlB;;;AAOA,SAAOV,GAAP;AACiBO,EAAAA,kBADjB;AAEeC,EAAAA,gBAFf;AAGaF,EAAAA,gBAHb,EAGiCG,QAHjC,EAG6CC,QAH7C,EAGyDN,gBAHzD;;AAKD,CApBM;;AAsBP,OAAO,IAAMO,aAAa,GAAG,SAAhBA,aAAgB;AAC3BC,iBAD2B;AAE3BR,gBAF2B;AAG3BS,wBAH2B;AAIxB;AACH,SAAOb,GAAP;AACWY,EAAAA,iBADX;AAEUE,EAAAA,QAAQ,CAACV,gBAAD,CAAR,GAA6BU,QAAQ,CAACD,wBAAD,CAF/C;;AAID,CATM;;AAWP,OAAO,IAAME,iBAAiB,GAAG,SAApBA,iBAAoB,CAACC,sBAAD,EAAoC;AACnE,SAAOhB,GAAP;AACkBgB,EAAAA,sBADlB;;AAGD,CAJM","sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nimport { getMenuItemPaddings } from './MenuItem.styles';\n\nexport const menuItemSizeMixin = (\n  menuItemLegacyPaddingX: string,\n  menuItemPaddingX: string,\n  menuItemLegacyPaddingY: string,\n  menuItemPaddingY: string,\n  menuItemLineHeight: string,\n  menuItemFontSize: string,\n) => {\n  const { paddingX, paddingY } = getMenuItemPaddings({\n    menuItemLegacyPaddingX,\n    menuItemPaddingX,\n    menuItemLegacyPaddingY,\n    menuItemPaddingY,\n  });\n\n  return css`\n    line-height: ${menuItemLineHeight};\n    font-size: ${menuItemFontSize};\n    padding: ${menuItemPaddingY} ${paddingX} ${paddingY} ${menuItemPaddingX};\n  `;\n};\n\nexport const iconSizeMixin = (\n  menuItemIconWidth: string,\n  menuItemPaddingX: string,\n  menuItemIconLegacyMargin: string,\n) => {\n  return css`\n    width: ${menuItemIconWidth};\n    left: ${parseInt(menuItemPaddingX) + parseInt(menuItemIconLegacyMargin)}px;\n  `;\n};\n\nexport const withIconSizeMixin = (menuItemPaddingForIcon: string) => {\n  return css`\n    padding-left: ${menuItemPaddingForIcon};\n  `;\n};\n"]}

package/components/MenuItem/MenuItem.mixins/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/MenuItem/MenuItem.mixins.js",
+  "module": "MenuItem.mixins",
+  "types": "../MenuItem.mixins.d.ts",
+  "sideEffects": false
+}

package/components/MenuItem/MenuItem.mixins.d.ts

@@ -0,0 +1,3 @@
+export declare const menuItemSizeMixin: (menuItemLegacyPaddingX: string, menuItemPaddingX: string, menuItemLegacyPaddingY: string, menuItemPaddingY: string, menuItemLineHeight: string, menuItemFontSize: string) => string;
+export declare const iconSizeMixin: (menuItemIconWidth: string, menuItemPaddingX: string, menuItemIconLegacyMargin: string) => string;
+export declare const withIconSizeMixin: (menuItemPaddingForIcon: string) => string;

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

@@ -1,46 +1,84 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { resetButton } from "../../../lib/styles/Mixins";
+import { iconSizeMixin, menuItemSizeMixin, withIconSizeMixin } from "../MenuItem.mixins";
+export var getMenuItemPaddings = function getMenuItemPaddings(_ref) {
+  var menuItemLegacyPaddingX = _ref.menuItemLegacyPaddingX,
+      menuItemPaddingX = _ref.menuItemPaddingX,
+      menuItemLegacyPaddingY = _ref.menuItemLegacyPaddingY,
+      menuItemPaddingY = _ref.menuItemPaddingY;
+  var legacyPaddingX = parseFloat(menuItemLegacyPaddingX);
+  var legacyPaddingY = parseFloat(menuItemLegacyPaddingY);
+  var paddingX = legacyPaddingX !== 0 ? parseFloat(menuItemPaddingX) + legacyPaddingX + "px" : menuItemPaddingX;
+  var paddingY = legacyPaddingY !== 0 ? parseFloat(menuItemPaddingY) + legacyPaddingY + "px" : menuItemPaddingY;
+  return {
+    paddingX: paddingX,
+    paddingY: paddingY
+  };
+};
 export var styles = memoizeStyle({
   root: function root(t) {
-    var legacyPaddingX = parseFloat(t.menuItemLegacyPaddingX);
-    var legacyPaddingY = parseFloat(t.menuItemLegacyPaddingY);
-    var paddingX = legacyPaddingX !== 0 ? parseFloat(t.menuItemPaddingX) + legacyPaddingX + "px" : t.menuItemPaddingX;
-    var paddingY = legacyPaddingY !== 0 ? parseFloat(t.menuItemPaddingY) + legacyPaddingY + "px" : t.menuItemPaddingY;
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: block;\n      line-height: ", ";\n      font-size: ", ";\n      padding: ", " ", " ", " ", ";\n      position: relative;\n      text-decoration: none;\n      color: ", ";\n\n      button& {\n        min-width: 100%;\n      }\n    "])), resetButton(), t.menuItemLineHeight, t.menuItemFontSize, t.menuItemPaddingY, paddingX, paddingY, t.menuItemPaddingX, t.menuItemTextColor);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      cursor: pointer;\n      display: ", ";\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.menuItemTextColor, t.menuItemBorderRadius, t.menuItemGap);
+  },
+  rootSmall: function rootSmall(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemLegacyPaddingX, t.menuItemPaddingXSmall, t.menuItemLegacyPaddingY, t.menuItemPaddingYSmall, t.menuItemLineHeightSmall, t.menuItemFontSizeSmall));
+  },
+  rootMedium: function rootMedium(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemLegacyPaddingX, t.menuItemPaddingXMedium, t.menuItemLegacyPaddingY, t.menuItemPaddingYMedium, t.menuItemLineHeightMedium, t.menuItemFontSizeMedium));
+  },
+  rootLarge: function rootLarge(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemLegacyPaddingX, t.menuItemPaddingXLarge, t.menuItemLegacyPaddingY, t.menuItemPaddingYLarge, t.menuItemLineHeightLarge, t.menuItemFontSizeLarge));
   },
   rootMobile: function rootMobile(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.fontSizeMobile, t.lineHeightMobile, t.menuItemPaddingMobile);
+    return css(_templateObject5 || (_templateObject5 = _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(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      color: ", " !important;\n    "])), t.menuItemHoverBg, t.menuItemHoverColor);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      color: ", " !important;\n    "])), t.menuItemHoverBg, t.menuItemHoverColor);
   },
   selected: function selected(t) {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
   },
   disabled: function disabled(t) {
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      background: transparent;\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledColor);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
   },
   link: function link(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
   },
   loose: function loose() {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
+  },
+  withIconSmall: function withIconSmall(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconSmall));
+  },
+  withIconMedium: function withIconMedium(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconMedium));
   },
-  withIcon: function withIcon(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      padding-left: ", ";\n    "])), t.menuItemPaddingForIcon);
+  withIconLarge: function withIconLarge(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconLarge));
   },
   comment: function comment(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      white-space: normal;\n    "])), t.menuItemCommentColor);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: ", ";\n      white-space: normal;\n      padding-top: 4px;\n    "])), t.menuItemCommentColor, t.menuItemCommentOpacity);
   },
   commentHover: function commentHover(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
   },
   icon: function icon(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      width: ", ";\n      display: inline-block;\n      position: absolute;\n      left: ", "px;\n      top: ", ";\n      transform: translateY(", ");\n    "])), t.menuItemIconWidth, parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin), t.menuItemPaddingY, t.menuItemIconLegacyShift);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      transform: translateY(", ");\n    "])), t.menuItemIconLegacyShift);
+  },
+  iconSmall: function iconSmall(t) {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall, t.menuItemIconLegacyMargin));
+  },
+  iconMedium: function iconMedium(t) {
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium, t.menuItemIconLegacyMargin));
+  },
+  iconLarge: function iconLarge(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge, t.menuItemIconLegacyMargin));
+  },
+  mobileContentWithIcon: function mobileContentWithIcon() {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      margin-left: 8px;\n    "])));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","styles","root","t","legacyPaddingX","parseFloat","menuItemLegacyPaddingX","legacyPaddingY","menuItemLegacyPaddingY","paddingX","menuItemPaddingX","paddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","menuItemTextColor","rootMobile","fontSizeMobile","lineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledColor","link","menuItemLinkColor","loose","withIcon","menuItemPaddingForIcon","comment","menuItemCommentColor","commentHover","menuItemCommentColorHover","icon","menuItemIconWidth","parseInt","menuItemIconLegacyMargin","menuItemIconLegacyShift"],"mappings":";AACA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;AACA,SAASC,WAAT,QAA4B,yBAA5B;;AAEA,OAAO,IAAMC,MAAM,GAAGF,YAAY,CAAC;AACjCG,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,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;;;AAUWP,IAAAA,CAAC,CAACY,iBAVb;;;;;;AAgBD,GAxBgC;;AA0BjCC,EAAAA,UA1BiC,sBA0BtBb,CA1BsB,EA0BZ;AACnB,WAAOL,GAAP;AACeK,IAAAA,CAAC,CAACc,cADjB;AAEiBd,IAAAA,CAAC,CAACe,gBAFnB;AAGaf,IAAAA,CAAC,CAACgB,qBAHf;;AAKD,GAhCgC;;AAkCjCC,EAAAA,KAlCiC,iBAkC3BjB,CAlC2B,EAkCjB;AACd;AACA,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACkB,eADlB;AAEWlB,IAAAA,CAAC,CAACmB,kBAFb;;AAID,GAxCgC;AAyCjCC,EAAAA,QAzCiC,oBAyCxBpB,CAzCwB,EAyCd;AACjB,WAAOL,GAAP;AACgBK,IAAAA,CAAC,CAACqB,kBADlB;;AAGD,GA7CgC;AA8CjCC,EAAAA,QA9CiC,oBA8CxBtB,CA9CwB,EA8Cd;AACjB,WAAOL,GAAP;;AAEWK,IAAAA,CAAC,CAACuB,qBAFb;;;AAKD,GApDgC;AAqDjCC,EAAAA,IArDiC,gBAqD5BxB,CArD4B,EAqDlB;AACb,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACyB,iBADb;;AAGD,GAzDgC;AA0DjCC,EAAAA,KA1DiC,mBA0DzB;AACN,WAAO/B,GAAP;;;AAGD,GA9DgC;AA+DjCgC,EAAAA,QA/DiC,oBA+DxB3B,CA/DwB,EA+Dd;AACjB,WAAOL,GAAP;AACkBK,IAAAA,CAAC,CAAC4B,sBADpB;;AAGD,GAnEgC;AAoEjCC,EAAAA,OApEiC,mBAoEzB7B,CApEyB,EAoEf;AAChB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAAC8B,oBADb;;;AAID,GAzEgC;AA0EjCC,EAAAA,YA1EiC,wBA0EpB/B,CA1EoB,EA0EV;AACrB,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACgC,yBADb;;;AAID,GA/EgC;AAgFjCC,EAAAA,IAhFiC,gBAgF5BjC,CAhF4B,EAgFlB;AACb,WAAOL,GAAP;AACWK,IAAAA,CAAC,CAACkC,iBADb;;;AAIUC,IAAAA,QAAQ,CAACnC,CAAC,CAACO,gBAAH,CAAR,GAA+B4B,QAAQ,CAACnC,CAAC,CAACoC,wBAAH,CAJjD;AAKSpC,IAAAA,CAAC,CAACS,gBALX;AAM0BT,IAAAA,CAAC,CAACqC,uBAN5B;;AAQD,GAzFgC,EAAD,CAA3B","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  rootMobile(t: Theme) {\n    return css`\n      font-size: ${t.fontSizeMobile};\n      line-height: ${t.lineHeightMobile};\n      padding: ${t.menuItemPaddingMobile};\n    `;\n  },\n\n  hover(t: Theme) {\n    // Color with !important in purpose to override `a:hover`\n    return css`\n      background: ${t.menuItemHoverBg} !important;\n      color: ${t.menuItemHoverColor} !important;\n    `;\n  },\n  selected(t: Theme) {\n    return css`\n      background: ${t.menuItemSelectedBg} !important;\n    `;\n  },\n  disabled(t: Theme) {\n    return css`\n      background: transparent;\n      color: ${t.menuItemDisabledColor};\n      cursor: default;\n    `;\n  },\n  link(t: Theme) {\n    return css`\n      color: ${t.menuItemLinkColor};\n    `;\n  },\n  loose() {\n    return css`\n      padding-left: 15px;\n    `;\n  },\n  withIcon(t: Theme) {\n    return css`\n      padding-left: ${t.menuItemPaddingForIcon};\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      white-space: normal;\n    `;\n  },\n  commentHover(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColorHover};\n      opacity: 0.6;\n    `;\n  },\n  icon(t: Theme) {\n    return css`\n      width: ${t.menuItemIconWidth};\n      display: inline-block;\n      position: absolute;\n      left: ${parseInt(t.menuItemPaddingX) + parseInt(t.menuItemIconLegacyMargin)}px;\n      top: ${t.menuItemPaddingY};\n      transform: translateY(${t.menuItemIconLegacyShift});\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MenuItem.styles.ts"],"names":["css","memoizeStyle","resetButton","iconSizeMixin","menuItemSizeMixin","withIconSizeMixin","getMenuItemPaddings","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","legacyPaddingX","parseFloat","legacyPaddingY","paddingX","paddingY","styles","root","t","menuItemDisplay","menuItemTextColor","menuItemBorderRadius","menuItemGap","rootSmall","menuItemPaddingXSmall","menuItemPaddingYSmall","menuItemLineHeightSmall","menuItemFontSizeSmall","rootMedium","menuItemPaddingXMedium","menuItemPaddingYMedium","menuItemLineHeightMedium","menuItemFontSizeMedium","rootLarge","menuItemPaddingXLarge","menuItemPaddingYLarge","menuItemLineHeightLarge","menuItemFontSizeLarge","rootMobile","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","menuItemHoverBg","menuItemHoverColor","selected","menuItemSelectedBg","disabled","menuItemDisabledBg","menuItemDisabledColor","link","menuItemLinkColor","loose","withIconSmall","menuItemPaddingForIconSmall","withIconMedium","menuItemPaddingForIconMedium","withIconLarge","menuItemPaddingForIconLarge","comment","menuItemCommentColor","menuItemCommentOpacity","commentHover","menuItemCommentColorHover","icon","menuItemIconLegacyShift","iconSmall","menuItemIconWidthSmall","menuItemIconLegacyMargin","iconMedium","menuItemIconWidthMedium","iconLarge","menuItemIconWidthLarge","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\nimport { iconSizeMixin, menuItemSizeMixin, withIconSizeMixin } from './MenuItem.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    return css`\n      ${resetButton()};\n\n      cursor: pointer;\n      display: ${t.menuItemDisplay};\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  rootSmall(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemLegacyPaddingX,\n        t.menuItemPaddingXSmall,\n        t.menuItemLegacyPaddingY,\n        t.menuItemPaddingYSmall,\n        t.menuItemLineHeightSmall,\n        t.menuItemFontSizeSmall,\n      )};\n    `;\n  },\n  rootMedium(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemLegacyPaddingX,\n        t.menuItemPaddingXMedium,\n        t.menuItemLegacyPaddingY,\n        t.menuItemPaddingYMedium,\n        t.menuItemLineHeightMedium,\n        t.menuItemFontSizeMedium,\n      )};\n    `;\n  },\n  rootLarge(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemLegacyPaddingX,\n        t.menuItemPaddingXLarge,\n        t.menuItemLegacyPaddingY,\n        t.menuItemPaddingYLarge,\n        t.menuItemLineHeightLarge,\n        t.menuItemFontSizeLarge,\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  withIconSmall(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconSmall)}\n    `;\n  },\n  withIconMedium(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconMedium)}\n    `;\n  },\n  withIconLarge(t: Theme) {\n    return css`\n      ${withIconSizeMixin(t.menuItemPaddingForIconLarge)}\n    `;\n  },\n  comment(t: Theme) {\n    return css`\n      color: ${t.menuItemCommentColor};\n      opacity: ${t.menuItemCommentOpacity};\n      white-space: normal;\n      padding-top: 4px;\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      display: inline-block;\n      position: absolute;\n      transform: translateY(${t.menuItemIconLegacyShift});\n    `;\n  },\n  iconSmall(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall, t.menuItemIconLegacyMargin)};\n    `;\n  },\n  iconMedium(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium, t.menuItemIconLegacyMargin)};\n    `;\n  },\n  iconLarge(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge, t.menuItemIconLegacyMargin)};\n    `;\n  },\n  mobileContentWithIcon() {\n    return css`\n      margin-left: 8px;\n    `;\n  },\n});\n"]}

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

@@ -1,14 +1,27 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const getMenuItemPaddings: ({ menuItemLegacyPaddingX, menuItemPaddingX, menuItemLegacyPaddingY, menuItemPaddingY, }: Record<'menuItemLegacyPaddingX' | 'menuItemPaddingX' | 'menuItemLegacyPaddingY' | 'menuItemPaddingY', string>) => {
+    paddingX: string;
+    paddingY: string;
+};
 export declare const styles: {
     root(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
     rootMobile(t: Theme): string;
     hover(t: Theme): string;
     selected(t: Theme): string;
     disabled(t: Theme): string;
     link(t: Theme): string;
     loose(): string;
-    withIcon(t: Theme): string;
+    withIconSmall(t: Theme): string;
+    withIconMedium(t: Theme): string;
+    withIconLarge(t: Theme): string;
     comment(t: Theme): string;
     commentHover(t: Theme): string;
     icon(t: Theme): string;
+    iconSmall(t: Theme): string;
+    iconMedium(t: Theme): string;
+    iconLarge(t: Theme): string;
+    mobileContentWithIcon(): string;
 };

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -1,17 +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 { 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).
+ * Сущности в которых может быть использован `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: styles.root(theme)
+  return /*#__PURE__*/React.createElement(CommonWrapper, props, /*#__PURE__*/React.createElement(ResponsiveLayout, null, function (_ref) {
+    var _cx;
+
+    var isMobile = _ref.isMobile;
+    return /*#__PURE__*/React.createElement("div", {
+      "data-tid": MenuSeparatorDataTids.root,
+      className: cx((_cx = {}, _cx[styles.root(theme)] = true, _cx[styles.rootMobile(theme)] = isMobile, _cx))
+    });
   }));
 }
 

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.tsx"],"names":["React","useContext","ThemeContext","CommonWrapper","styles","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,MAAT,QAAuB,wBAAvB;;;AAGA;AACA;AACA;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,MAAM,CAACI,IAAP,CAAYD,KAAZ,CAAhB,GADF,CADF;;;AAKD;;AAEDF,aAAa,CAACI,mBAAd,GAAoC,eAApC;;AAEA,SAASJ,aAAT","sourcesContent":["import React, { useContext } from 'react';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\n\nimport { styles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n/**\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"]}
+{"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,9 +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).
+ * Сущности в которых может быть использован `MenuSeparator`: [DropdownMenu](#/Components/DropdownMenu), [Kebab](#/Components/Kebab), [TooltipMenu](#/Components/TooltipMenu) и [Select](#/Components/Select).
  */
 declare function MenuSeparator(props: MenuSeparatorProps): JSX.Element;
 declare namespace MenuSeparator {

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","menuSeparatorBorderWidth","menuSeparatorBorderColor"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACC,oBADd;AAEgBD,IAAAA,CAAC,CAACE,wBAFlB,EAEoDF,CAAC,CAACG,wBAFtD;;AAID,GANgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      margin: ${t.menuSeparatorMarginY} 0;\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["MenuSeparator.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuSeparatorMarginY","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 styles: {
     root(t: Theme): string;
+    rootMobile(t: Theme): string;
 };