@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3cc4f2ce5f

package/components/MenuItem/MenuItem.d.ts

@@ -1,145 +1,114 @@
-import React, { AriaAttributes, HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
-import { CommonProps } from '../../internal/CommonWrapper';
-import { SizeProp } from '../../lib/types/props';
-import { MenuContextType } from '../../internal/Menu/MenuContext';
-export type MenuItemState = null | 'hover' | 'selected' | void;
-export interface MenuItemProps extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, Omit<CommonProps, 'children'> {
-    /**
-     * @ignore
-     */
-    _enableIconPadding?: boolean;
-    /**
-     * Добавляет описание для элемента меню.
-     */
-    comment?: React.ReactNode;
-    /**
-     * Отключенное состояние.
-     */
-    disabled?: boolean;
-    /**
-     * Добавляет элементу меню иконку.
-     */
-    icon?: React.ReactElement<any>;
-    /**
-     * Меняет цвет текста на синий.
-     */
-    link?: boolean;
-    /**
-     * Размер
-     */
-    size?: SizeProp;
-    /**
-     * @ignore
-     */
-    loose?: boolean;
-    /**
-     * @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'];
-    /**
-     * HTML-атрибут `rel`.
-     *
-     * Для внешних ссылок аттрибут rel по умолчанию равен "noopener noreferrer"
-     */
-    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
-    /**
-     * Заменяет корневой элемент, на компонент переданный в проп.
-     *
-     * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`.
-     */
-    component?: React.ComponentType<any>;
-    /**
-     * Запрещает выделение и выбор данного пункта меню
-     *
-     */
-    isNotSelectable?: boolean;
-    isMobile?: boolean;
-    scrollIntoView?: boolean;
-}
-export declare const MenuItemDataTids: {
-    readonly root: "MenuItem__root";
-    readonly content: "MenuItem__content";
-    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;
-    static displayName: string;
-    static __MENU_ITEM__: boolean;
-    static propTypes: {
-        comment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        disabled: PropTypes.Requireable<boolean>;
-        href: PropTypes.Requireable<string>;
-        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;
-        highlighted: boolean;
-    };
-    private theme;
-    private mouseEntered;
-    private setRootNode;
-    private rootRef;
-    private contentRef;
-    static contextType: React.Context<MenuContextType>;
-    context: MenuContextType;
-    render(): React.JSX.Element;
-    componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: Readonly<MenuItemProps>): void;
-    highlight: () => void;
-    unhighlight: () => void;
-    select: (event: React.SyntheticEvent<HTMLElement>) => void;
-    isEnabled: () => boolean;
-    navigate: () => void;
-    private getRootSizeClassName;
-    private getIconSizeClassName;
-    private getWithIconSizeClassName;
-    private renderMain;
-    private get activeState();
-    private get isHover();
-    private get isSelected();
-    private handleMouseEnterFix;
-    private handleMouseLeave;
-    private handleClick;
-    private setRootRef;
-    private getComponent;
-    private hasIconAmongItems;
-}
-export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+import type { AriaAttributes, HTMLAttributes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { CommonProps } from '../../internal/CommonWrapper';
+import type { SizeProp } from '../../lib/types/props';
+import type { MenuContextType } from '../../internal/Menu/MenuContext';
+export type MenuItemState = null | 'hover' | 'selected' | void;
+export interface MenuItemProps extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, Omit<CommonProps, 'children'> {
+    /** Добавляет отступ иконке.
+     * @ignore */
+    _enableIconPadding?: boolean;
+    /** Добавляет описание для элемента меню. */
+    comment?: React.ReactNode;
+    /** Делает компонент недоступным. */
+    disabled?: boolean;
+    /** Добавляет иконку элементу меню. */
+    icon?: React.ReactElement<any>;
+    /**
+     * Меняет цвет текста на синий.
+     * @deprecated
+     */
+    link?: boolean;
+    /** Задает размер контрола. */
+    size?: SizeProp;
+    /** @ignore */
+    loose?: boolean;
+    /** @ignore */
+    state?: MenuItemState;
+    /** Задает функцию, которая вызывается при клике. */
+    onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;
+    /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */
+    onMouseEnter?: React.MouseEventHandler;
+    /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */
+    onMouseLeave?: React.MouseEventHandler;
+    /** @ignore */
+    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'];
+    /** Задает HTML-атрибут `rel`. Для внешних ссылок аттрибут rel по умолчанию равен "noopener noreferrer". */
+    rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
+    /** Заменяет корневой элемент, на компонент переданный в проп.
+     * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`. */
+    component?: React.ComponentType<any>;
+    /** Запрещает выделение и выбор данного пункта меню. */
+    isNotSelectable?: boolean;
+    /** Устанавливает стиль для отображения в мобильной версии. */
+    isMobile?: boolean;
+    /** @ignore */
+    scrollIntoView?: boolean;
+}
+export declare const MenuItemDataTids: {
+    readonly root: "MenuItem__root";
+    readonly content: "MenuItem__content";
+    readonly comment: "MenuItem__comment";
+};
+/**
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: DropdownMenu, Kebab, TooltipMenu и Select.
+ */
+export declare class MenuItem extends React.Component<MenuItemProps> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static __MENU_ITEM__: boolean;
+    static propTypes: {
+        comment: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        disabled: PropTypes.Requireable<boolean>;
+        href: PropTypes.Requireable<string>;
+        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;
+        highlighted: boolean;
+    };
+    private theme;
+    private mouseEntered;
+    private setRootNode;
+    private rootRef;
+    private contentRef;
+    static contextType: React.Context<MenuContextType>;
+    context: MenuContextType;
+    render(): React.JSX.Element;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: Readonly<MenuItemProps>): void;
+    highlight: () => void;
+    unhighlight: () => void;
+    select: (event: React.SyntheticEvent<HTMLElement>) => void;
+    isEnabled: () => boolean;
+    navigate: () => void;
+    private getRootSizeClassName;
+    private getIconSizeClassName;
+    private getWithIconSizeClassName;
+    private renderMain;
+    private get activeState();
+    private get isHover();
+    private get isSelected();
+    private handleMouseEnterFix;
+    private handleMouseLeave;
+    private handleClick;
+    private setRootRef;
+    private getComponent;
+    private hasIconAmongItems;
+}
+export declare const isMenuItem: (child: React.ReactNode) => child is React.ReactElement<any, string | React.JSXElementConstructor<any>>;

package/components/MenuItem/MenuItem.md

@@ -1,4 +1,4 @@
-Меню с базовыми элементами меню.
+### Меню с базовыми элементами меню
 
 ```jsx harmony
 import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
@@ -12,7 +12,7 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
 </DropdownMenu>
 ```
 
-Меню с заблокированными и базовыми элементами меню.
+### Disabled
 
 ```jsx harmony
 import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
@@ -28,6 +28,7 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
 </DropdownMenu>
 ```
 
+### Запрет выделения
 В пункты меню можно передать проп `isNotSelectable`, чтобы запретить выделение и выбор этого пункта меню
 
 ```jsx harmony
@@ -44,7 +45,7 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
 </DropdownMenu>
 ```
 
-Меню с элементами меню содержащими описание.
+### Описание элементов
 
 ```jsx harmony
 import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
@@ -60,7 +61,7 @@ import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
 </DropdownMenu>
 ```
 
-Меню с элементами меню содержащими иконки.
+### Иконки в элементах
 
 ```jsx harmony
 import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
@@ -88,41 +89,44 @@ import ThumbDownIcon from '@skbkontur/react-icons/ThumbDown';
 </DropdownMenu>
 ```
 
-Меню с элементами меню обёрнутыми в контрол ссылки.
+### Проп href
+
+В элементы меню можно передавать проп `href`, чтобы превратить их в ссылку. Лучше выделять такие элементы иконками.
 
 ```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>
-}
+import { Button, MenuItem, DropdownMenu, MenuSeparator } from '@skbkontur/react-ui';
+import { ArrowUiCornerOutUpRightIcon } from '@skbkontur/icons/icons/ArrowUiCornerOutUpRightIcon';
 
 <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="Список прекрасных людей"
-    />
+  <MenuItem
+    href="http://tech.skbkontur.ru/react-ui/"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Начало документации
+  </MenuItem>
+  <MenuItem
+    href="https://github.com/skbkontur/retail-ui/graphs/contributors"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Список прекрасных людей
+  </MenuItem>
+  <MenuSeparator />
+  <MenuItem
+    icon={< ArrowUiCornerOutUpRightIcon />}
+    href="https://guides.kontur.ru/"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    Подробнее в Контур Гайдах
+  </MenuItem>
 </DropdownMenu>
 ```
 
-У MenuItem есть 3 стандартных размера.
+### Размер
 
 ```jsx harmony
 import { Gapped } from '@skbkontur/react-ui';

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

@@ -2,19 +2,17 @@ import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTempla
 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) {
+export var menuItemSizeMixin = function menuItemSizeMixin(menuItemPaddingX, 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 iconSizeMixin = function iconSizeMixin(menuItemIconWidth, menuItemPaddingX) {
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    width: ", ";\n    left: ", "px;\n  "])), menuItemIconWidth, parseInt(menuItemPaddingX));
 };
 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

@@ -1 +1 @@
-{"version":3,"names":["css","getMenuItemPaddings","menuItemSizeMixin","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","_getMenuItemPaddings","paddingX","paddingY","_templateObject","_taggedTemplateLiteralLoose","iconSizeMixin","menuItemIconWidth","menuItemIconLegacyMargin","_templateObject2","parseInt","withIconSizeMixin","menuItemPaddingForIcon","_templateObject3"],"sources":["MenuItem.mixins.ts"],"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"],"mappings":"wJAAA,SAASA,GAAG,QAAQ,2BAA2B;;AAE/C,SAASC,mBAAmB,QAAQ,mBAAmB;;AAEvD,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA;AAC5BC,sBAA8B;AAC9BC,gBAAwB;AACxBC,sBAA8B;AAC9BC,gBAAwB;AACxBC,kBAA0B;AAC1BC,gBAAwB;AACrB;EACH,IAAAC,oBAAA,GAA+BR,mBAAmB,CAAC;MACjDE,sBAAsB,EAAtBA,sBAAsB;MACtBC,gBAAgB,EAAhBA,gBAAgB;MAChBC,sBAAsB,EAAtBA,sBAAsB;MACtBC,gBAAgB,EAAhBA;IACF,CAAC,CAAC,CALMI,QAAQ,GAAAD,oBAAA,CAARC,QAAQ,CAAEC,QAAQ,GAAAF,oBAAA,CAARE,QAAQ;;EAO1B,OAAOX,GAAG,CAAAY,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACON,kBAAkB;EACpBC,gBAAgB;EAClBF,gBAAgB,EAAII,QAAQ,EAAIC,QAAQ,EAAIP,gBAAgB;;AAE3E,CAAC;;AAED,OAAO,IAAMU,aAAa,GAAG,SAAhBA,aAAaA;AACxBC,iBAAyB;AACzBX,gBAAwB;AACxBY,wBAAgC;AAC7B;EACH,OAAOhB,GAAG,CAAAiB,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;EACCE,iBAAiB;EAClBG,QAAQ,CAACd,gBAAgB,CAAC,GAAGc,QAAQ,CAACF,wBAAwB,CAAC;;AAE3E,CAAC;;AAED,OAAO,IAAMG,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,sBAA8B,EAAK;EACnE,OAAOpB,GAAG,CAAAqB,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;EACQO,sBAAsB;;AAE1C,CAAC","ignoreList":[]}
+{"version":3,"names":["css","getMenuItemPaddings","menuItemSizeMixin","menuItemPaddingX","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","_getMenuItemPaddings","paddingX","paddingY","_templateObject","_taggedTemplateLiteralLoose","iconSizeMixin","menuItemIconWidth","_templateObject2","parseInt","withIconSizeMixin","menuItemPaddingForIcon","_templateObject3"],"sources":["MenuItem.mixins.ts"],"sourcesContent":["import { css } from '../../lib/theming/Emotion';\n\nimport { getMenuItemPaddings } from './MenuItem.styles';\n\nexport const menuItemSizeMixin = (\n  menuItemPaddingX: string,\n  menuItemPaddingY: string,\n  menuItemLineHeight: string,\n  menuItemFontSize: string,\n) => {\n  const { paddingX, paddingY } = getMenuItemPaddings({\n    menuItemPaddingX,\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 = (menuItemIconWidth: string, menuItemPaddingX: string) => {\n  return css`\n    width: ${menuItemIconWidth};\n    left: ${parseInt(menuItemPaddingX)}px;\n  `;\n};\n\nexport const withIconSizeMixin = (menuItemPaddingForIcon: string) => {\n  return css`\n    padding-left: ${menuItemPaddingForIcon};\n  `;\n};\n"],"mappings":"wJAAA,SAASA,GAAG,QAAQ,2BAA2B;;AAE/C,SAASC,mBAAmB,QAAQ,mBAAmB;;AAEvD,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA;AAC5BC,gBAAwB;AACxBC,gBAAwB;AACxBC,kBAA0B;AAC1BC,gBAAwB;AACrB;EACH,IAAAC,oBAAA,GAA+BN,mBAAmB,CAAC;MACjDE,gBAAgB,EAAhBA,gBAAgB;MAChBC,gBAAgB,EAAhBA;IACF,CAAC,CAAC,CAHMI,QAAQ,GAAAD,oBAAA,CAARC,QAAQ,CAAEC,QAAQ,GAAAF,oBAAA,CAARE,QAAQ;;EAK1B,OAAOT,GAAG,CAAAU,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACON,kBAAkB;EACpBC,gBAAgB;EAClBF,gBAAgB,EAAII,QAAQ,EAAIC,QAAQ,EAAIN,gBAAgB;;AAE3E,CAAC;;AAED,OAAO,IAAMS,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,iBAAyB,EAAEV,gBAAwB,EAAK;EACpF,OAAOH,GAAG,CAAAc,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;EACCE,iBAAiB;EAClBE,QAAQ,CAACZ,gBAAgB,CAAC;;AAEtC,CAAC;;AAED,OAAO,IAAMa,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,sBAA8B,EAAK;EACnE,OAAOjB,GAAG,CAAAkB,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;EACQM,sBAAsB;;AAE1C,CAAC","ignoreList":[]}

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

@@ -1,3 +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;
+export declare const menuItemSizeMixin: (menuItemPaddingX: string, menuItemPaddingY: string, menuItemLineHeight: string, menuItemFontSize: string) => string;
+export declare const iconSizeMixin: (menuItemIconWidth: string, menuItemPaddingX: string) => string;
+export declare const withIconSizeMixin: (menuItemPaddingForIcon: string) => string;

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

@@ -1,17 +1,13 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 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,
+  var menuItemPaddingX = _ref.menuItemPaddingX,
     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;
+  var paddingX = menuItemPaddingX;
+  var paddingY = menuItemPaddingY;
   return {
     paddingX: paddingX,
     paddingY: paddingY
@@ -22,13 +18,13 @@ export var styles = memoizeStyle({
     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));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemPaddingXSmall, 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));
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemPaddingXMedium, 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));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemPaddingXLarge, t.menuItemPaddingYLarge, t.menuItemLineHeightLarge, t.menuItemFontSizeLarge));
   },
   rootMobile: function rootMobile(t) {
     return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.menuItemFontSizeMobile, t.menuItemLineHeightMobile, t.menuItemPaddingMobile);
@@ -43,40 +39,43 @@ export var styles = memoizeStyle({
   disabled: function disabled(t) {
     return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
   },
+  nonSelectable: function nonSelectable() {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
+  },
   link: function link(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
   },
   loose: function loose() {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
   },
   withIconSmall: function withIconSmall(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconSmall));
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconSmall));
   },
   withIconMedium: function withIconMedium(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconMedium));
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconMedium));
   },
   withIconLarge: function withIconLarge(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconLarge));
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconLarge));
   },
   comment: function comment(t) {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: ", ";\n      white-space: normal;\n      padding-top: 4px;\n    "])), t.menuItemCommentColor, t.menuItemCommentOpacity);
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: ", ";\n      white-space: normal;\n      padding-top: 4px;\n    "])), t.menuItemCommentColor, t.menuItemCommentOpacity);
   },
   commentHover: function commentHover(t) {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
   },
-  icon: function icon(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      transform: translateY(", ");\n    "])), t.menuItemIconLegacyShift);
+  icon: function icon() {
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      position: absolute;\n      transform: translateY(0px); // icon shifts one pixel up in firefox on medium size without this property\n    "])));
   },
   iconSmall: function iconSmall(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall, t.menuItemIconLegacyMargin));
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall));
   },
   iconMedium: function iconMedium(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium, t.menuItemIconLegacyMargin));
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium));
   },
   iconLarge: function iconLarge(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge, t.menuItemIconLegacyMargin));
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge));
   },
   mobileContentWithIcon: function mobileContentWithIcon() {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      margin-left: 8px;\n    "])));
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      margin-left: 8px;\n    "])));
   }
 });

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

@@ -1 +1 @@
-{"version":3,"names":["css","memoizeStyle","resetButton","iconSizeMixin","menuItemSizeMixin","withIconSizeMixin","getMenuItemPaddings","_ref","menuItemLegacyPaddingX","menuItemPaddingX","menuItemLegacyPaddingY","menuItemPaddingY","legacyPaddingX","parseFloat","legacyPaddingY","paddingX","paddingY","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","menuItemDisplay","menuItemTextColor","menuItemBorderRadius","menuItemGap","rootSmall","_templateObject2","menuItemPaddingXSmall","menuItemPaddingYSmall","menuItemLineHeightSmall","menuItemFontSizeSmall","rootMedium","_templateObject3","menuItemPaddingXMedium","menuItemPaddingYMedium","menuItemLineHeightMedium","menuItemFontSizeMedium","rootLarge","_templateObject4","menuItemPaddingXLarge","menuItemPaddingYLarge","menuItemLineHeightLarge","menuItemFontSizeLarge","rootMobile","_templateObject5","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","_templateObject6","menuItemHoverBg","menuItemHoverColor","selected","_templateObject7","menuItemSelectedBg","disabled","_templateObject8","menuItemDisabledBg","menuItemDisabledColor","link","_templateObject9","menuItemLinkColor","loose","_templateObject10","withIconSmall","_templateObject11","menuItemPaddingForIconSmall","withIconMedium","_templateObject12","menuItemPaddingForIconMedium","withIconLarge","_templateObject13","menuItemPaddingForIconLarge","comment","_templateObject14","menuItemCommentColor","menuItemCommentOpacity","commentHover","_templateObject15","menuItemCommentColorHover","icon","_templateObject16","menuItemIconLegacyShift","iconSmall","_templateObject17","menuItemIconWidthSmall","menuItemIconLegacyMargin","iconMedium","_templateObject18","menuItemIconWidthMedium","iconLarge","_templateObject19","menuItemIconWidthLarge","mobileContentWithIcon","_templateObject20"],"sources":["MenuItem.styles.ts"],"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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","resetButton","iconSizeMixin","menuItemSizeMixin","withIconSizeMixin","getMenuItemPaddings","_ref","menuItemPaddingX","menuItemPaddingY","paddingX","paddingY","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","menuItemDisplay","menuItemTextColor","menuItemBorderRadius","menuItemGap","rootSmall","_templateObject2","menuItemPaddingXSmall","menuItemPaddingYSmall","menuItemLineHeightSmall","menuItemFontSizeSmall","rootMedium","_templateObject3","menuItemPaddingXMedium","menuItemPaddingYMedium","menuItemLineHeightMedium","menuItemFontSizeMedium","rootLarge","_templateObject4","menuItemPaddingXLarge","menuItemPaddingYLarge","menuItemLineHeightLarge","menuItemFontSizeLarge","rootMobile","_templateObject5","menuItemFontSizeMobile","menuItemLineHeightMobile","menuItemPaddingMobile","hover","_templateObject6","menuItemHoverBg","menuItemHoverColor","selected","_templateObject7","menuItemSelectedBg","disabled","_templateObject8","menuItemDisabledBg","menuItemDisabledColor","nonSelectable","_templateObject9","link","_templateObject10","menuItemLinkColor","loose","_templateObject11","withIconSmall","_templateObject12","menuItemPaddingForIconSmall","withIconMedium","_templateObject13","menuItemPaddingForIconMedium","withIconLarge","_templateObject14","menuItemPaddingForIconLarge","comment","_templateObject15","menuItemCommentColor","menuItemCommentOpacity","commentHover","_templateObject16","menuItemCommentColorHover","icon","_templateObject17","iconSmall","_templateObject18","menuItemIconWidthSmall","iconMedium","_templateObject19","menuItemIconWidthMedium","iconLarge","_templateObject20","menuItemIconWidthLarge","mobileContentWithIcon","_templateObject21"],"sources":["MenuItem.styles.ts"],"sourcesContent":["import type { 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  menuItemPaddingX,\n  menuItemPaddingY,\n}: Record<'menuItemPaddingX' | 'menuItemPaddingY', string>) => {\n  const paddingX = menuItemPaddingX;\n  const paddingY = 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.menuItemPaddingXSmall,\n        t.menuItemPaddingYSmall,\n        t.menuItemLineHeightSmall,\n        t.menuItemFontSizeSmall,\n      )};\n    `;\n  },\n  rootMedium(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemPaddingXMedium,\n        t.menuItemPaddingYMedium,\n        t.menuItemLineHeightMedium,\n        t.menuItemFontSizeMedium,\n      )};\n    `;\n  },\n  rootLarge(t: Theme) {\n    return css`\n      ${menuItemSizeMixin(\n        t.menuItemPaddingXLarge,\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  nonSelectable() {\n    return css`\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() {\n    return css`\n      display: inline-block;\n      position: absolute;\n      transform: translateY(0px); // icon shifts one pixel up in firefox on medium size without this property\n    `;\n  },\n  iconSmall(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall)};\n    `;\n  },\n  iconMedium(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium)};\n    `;\n  },\n  iconLarge(t: Theme) {\n    return css`\n      ${iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge)};\n    `;\n  },\n  mobileContentWithIcon() {\n    return css`\n      margin-left: 8px;\n    `;\n  },\n});\n"],"mappings":"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","ignoreList":[]}