@skbkontur/react-ui 0.0.0-bcbd5e6112 → 0.0.0-c13bb5f4ca

package/components/MenuItem/MenuItem.md

@@ -0,0 +1,139 @@
+### Меню с базовыми элементами меню
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми элементами меню</Button>}
+  >
+  <MenuItem>Базовый элемент меню</MenuItem>
+  <MenuItem>Ещё один базовый элемент меню</MenuItem>
+  <MenuItem>И ещё один</MenuItem>
+</DropdownMenu>
+```
+
+### Disabled
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми и заблокированными элементами</Button>}
+  >
+  <MenuItem>Это базовый элемент меню</MenuItem>
+  <MenuItem disabled>А это заблокированный</MenuItem>
+  <MenuItem>А это снова базовый</MenuItem>
+  <MenuItem disabled>И снова заблокированный</MenuItem>
+  <MenuItem disabled>И вот ещё один заблокированный</MenuItem>
+</DropdownMenu>
+```
+
+### Запрет выделения
+В пункты меню можно передать проп `isNotSelectable`, чтобы запретить выделение и выбор этого пункта меню
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с базовыми и отключёнными элементами</Button>}
+  >
+  <MenuItem>Это базовый элемент меню</MenuItem>
+  <MenuItem isNotSelectable>А это отключённый</MenuItem>
+  <MenuItem>А это снова базовый</MenuItem>
+  <MenuItem isNotSelectable>И снова отключённый</MenuItem>
+  <MenuItem isNotSelectable>И вот ещё один отключённый</MenuItem>
+</DropdownMenu>
+```
+
+### Описание элементов
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с причастными к Pied Piper</Button>}
+  >
+  <MenuItem comment="Системный инженер">Bertram Gilfoyle</MenuItem>
+  <MenuItem comment="Hooli CEO">Gavin Belson</MenuItem>
+  <MenuItem comment="Java-разработчик">Dinesh Chugtai</MenuItem>
+  <MenuItem comment="Основатель Pied Piper">Richard Hendricks</MenuItem>
+  <MenuItem comment="Владелец инкубатора">Erlich Bachman</MenuItem>
+</DropdownMenu>
+```
+
+### Иконки в элементах
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu } from '@skbkontur/react-ui';
+import { TechPhoneSmartIcon16Regular } from '@skbkontur/icons/icons/TechPhoneSmartIcon/TechPhoneSmartIcon16Regular';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular';
+import { HandThumbDownIcon16Regular } from '@skbkontur/icons/icons/HandThumbDownIcon/HandThumbDownIcon16Regular';
+
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с иконками</Button>}
+  >
+  <MenuItem icon={<CheckAIcon16Regular />}>Базовый элемент меню c иконкой</MenuItem>
+  <MenuItem
+    disabled
+    icon={<HandThumbDownIcon16Regular />}
+    >
+    Отключённый элемент меню с иконкой
+  </MenuItem>
+  <MenuItem
+    icon={<TechPhoneSmartIcon16Regular />}
+    comment="А слева вы можете видеть икону 21-го века"
+    >
+     Элемент меню с описанием и иконкой
+  </MenuItem>
+</DropdownMenu>
+```
+
+### Проп href
+
+В элементы меню можно передавать проп `href`, чтобы превратить их в ссылку. Лучше выделять такие элементы иконками.
+
+```jsx harmony
+import { Button, MenuItem, DropdownMenu, MenuSeparator } from '@skbkontur/react-ui';
+import { ArrowUiCornerOutUpRightIcon } from '@skbkontur/icons/icons/ArrowUiCornerOutUpRightIcon';
+
+<DropdownMenu
+  caption={<Button use="primary">Открыть меню с ссылками</Button>}
+  >
+  <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>
+```
+
+### Размер
+
+```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

@@ -1,18 +1,19 @@
 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(menuItemPaddingX, menuItemPaddingY, menuItemLineHeight, menuItemFontSize, emotion) {
+export var menuItemSizeMixin = function menuItemSizeMixin(menuItemPaddingX, menuItemPaddingY, menuItemLineHeight, menuItemFontSize) {
   var _getMenuItemPaddings = getMenuItemPaddings({
       menuItemPaddingX: menuItemPaddingX,
       menuItemPaddingY: menuItemPaddingY
     }),
     paddingX = _getMenuItemPaddings.paddingX,
     paddingY = _getMenuItemPaddings.paddingY;
-  return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    line-height: ", ";\n    font-size: ", ";\n    padding: ", " ", " ", " ", ";\n  "])), menuItemLineHeight, menuItemFontSize, menuItemPaddingY, paddingX, paddingY, menuItemPaddingX);
+  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, emotion) {
-  return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    width: ", ";\n    left: ", "px;\n  "])), menuItemIconWidth, parseInt(menuItemPaddingX));
+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, emotion) {
-  return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    padding-left: ", ";\n  "])), menuItemPaddingForIcon);
+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":["getMenuItemPaddings","menuItemSizeMixin","menuItemPaddingX","menuItemPaddingY","menuItemLineHeight","menuItemFontSize","emotion","_getMenuItemPaddings","paddingX","paddingY","css","_templateObject","_taggedTemplateLiteralLoose","iconSizeMixin","menuItemIconWidth","_templateObject2","parseInt","withIconSizeMixin","menuItemPaddingForIcon","_templateObject3"],"sources":["MenuItem.mixins.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { getMenuItemPaddings } from './MenuItem.styles';\n\nexport const menuItemSizeMixin = (\n  menuItemPaddingX: string,\n  menuItemPaddingY: string,\n  menuItemLineHeight: string,\n  menuItemFontSize: string,\n  emotion: Emotion,\n) => {\n  const { paddingX, paddingY } = getMenuItemPaddings({\n    menuItemPaddingX,\n    menuItemPaddingY,\n  });\n\n  return emotion.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, emotion: Emotion) => {\n  return emotion.css`\n    width: ${menuItemIconWidth};\n    left: ${parseInt(menuItemPaddingX)}px;\n  `;\n};\n\nexport const withIconSizeMixin = (menuItemPaddingForIcon: string, emotion: Emotion) => {\n  return emotion.css`\n    padding-left: ${menuItemPaddingForIcon};\n  `;\n};\n"],"mappings":";;AAEA,SAASA,mBAAmB,QAAQ,mBAAmB;;AAEvD,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAiBA;AAC5BC,gBAAwB;AACxBC,gBAAwB;AACxBC,kBAA0B;AAC1BC,gBAAwB;AACxBC,OAAgB;AACb;EACH,IAAAC,oBAAA,GAA+BP,mBAAmB,CAAC;MACjDE,gBAAgB,EAAhBA,gBAAgB;MAChBC,gBAAgB,EAAhBA;IACF,CAAC,CAAC,CAHMK,QAAQ,GAAAD,oBAAA,CAARC,QAAQ,CAAEC,QAAQ,GAAAF,oBAAA,CAARE,QAAQ;;EAK1B,OAAOH,OAAO,CAACI,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;EACDR,kBAAkB;EACpBC,gBAAgB;EAClBF,gBAAgB,EAAIK,QAAQ,EAAIC,QAAQ,EAAIP,gBAAgB;;AAE3E,CAAC;;AAED,OAAO,IAAMW,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,iBAAyB,EAAEZ,gBAAwB,EAAEI,OAAgB,EAAK;EACtG,OAAOA,OAAO,CAACI,GAAG,CAAAK,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;EACPE,iBAAiB;EAClBE,QAAQ,CAACd,gBAAgB,CAAC;;AAEtC,CAAC;;AAED,OAAO,IAAMe,iBAAiB,GAAG,SAApBA,iBAAiBA,CAAIC,sBAA8B,EAAEZ,OAAgB,EAAK;EACrF,OAAOA,OAAO,CAACI,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;EACAM,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,4 +1,3 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
-export declare const menuItemSizeMixin: (menuItemPaddingX: string, menuItemPaddingY: string, menuItemLineHeight: string, menuItemFontSize: string, emotion: Emotion) => string;
-export declare const iconSizeMixin: (menuItemIconWidth: string, menuItemPaddingX: string, emotion: Emotion) => string;
-export declare const withIconSizeMixin: (menuItemPaddingForIcon: string, emotion: Emotion) => 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,6 +1,6 @@
 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, _templateObject21;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
+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) {
@@ -13,71 +13,69 @@ export var getMenuItemPaddings = function getMenuItemPaddings(_ref) {
     paddingY: paddingY
   };
 };
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root(t) {
-      return emotion.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(emotion), t.menuItemDisplay, t.menuItemTextColor, t.menuItemBorderRadius, t.menuItemGap);
-    },
-    rootSmall: function rootSmall(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), menuItemSizeMixin(t.menuItemPaddingXSmall, t.menuItemPaddingYSmall, t.menuItemLineHeightSmall, t.menuItemFontSizeSmall, emotion));
-    },
-    rootMedium: function rootMedium(t) {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), menuItemSizeMixin(t.menuItemPaddingXMedium, t.menuItemPaddingYMedium, t.menuItemLineHeightMedium, t.menuItemFontSizeMedium, emotion));
-    },
-    rootLarge: function rootLarge(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), menuItemSizeMixin(t.menuItemPaddingXLarge, t.menuItemPaddingYLarge, t.menuItemLineHeightLarge, t.menuItemFontSizeLarge, emotion));
-    },
-    rootMobile: function rootMobile(t) {
-      return emotion.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 emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        background: ", " !important;\n        color: ", " !important;\n      "])), t.menuItemHoverBg, t.menuItemHoverColor);
-    },
-    selected: function selected(t) {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        background: ", " !important;\n      "])), t.menuItemSelectedBg);
-    },
-    disabled: function disabled(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        background: ", ";\n        color: ", ";\n        cursor: default;\n      "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
-    },
-    nonSelectable: function nonSelectable() {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
-    },
-    link: function link(t) {
-      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n      "])), t.menuItemLinkColor);
-    },
-    loose: function loose() {
-      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n        padding-left: 15px;\n      "])));
-    },
-    withIconSmall: function withIconSmall(t) {
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), withIconSizeMixin(t.menuItemPaddingForIconSmall, emotion));
-    },
-    withIconMedium: function withIconMedium(t) {
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), withIconSizeMixin(t.menuItemPaddingForIconMedium, emotion));
-    },
-    withIconLarge: function withIconLarge(t) {
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n        ", "\n      "])), withIconSizeMixin(t.menuItemPaddingForIconLarge, emotion));
-    },
-    comment: function comment(t) {
-      return emotion.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 emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        opacity: 0.6;\n      "])), t.menuItemCommentColorHover);
-    },
-    icon: function icon() {
-      return emotion.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 emotion.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall, emotion));
-    },
-    iconMedium: function iconMedium(t) {
-      return emotion.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium, emotion));
-    },
-    iconLarge: function iconLarge(t) {
-      return emotion.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n        ", ";\n      "])), iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge, emotion));
-    },
-    mobileContentWithIcon: function mobileContentWithIcon() {
-      return emotion.css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n        margin-left: 8px;\n      "])));
-    }
-  });
-};
+export var styles = memoizeStyle({
+  root: function root(t) {
+    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.menuItemPaddingXSmall, t.menuItemPaddingYSmall, t.menuItemLineHeightSmall, t.menuItemFontSizeSmall));
+  },
+  rootMedium: function rootMedium(t) {
+    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.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);
+  },
+  hover: function hover(t) {
+    // Color with !important in purpose to override `a:hover`
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n      color: ", " !important;\n    "])), t.menuItemHoverBg, t.menuItemHoverColor);
+  },
+  selected: function selected(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
+  },
+  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(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.menuItemLinkColor);
+  },
+  loose: function loose() {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      padding-left: 15px;\n    "])));
+  },
+  withIconSmall: function withIconSmall(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconSmall));
+  },
+  withIconMedium: function withIconMedium(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconMedium));
+  },
+  withIconLarge: function withIconLarge(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconLarge));
+  },
+  comment: function comment(t) {
+    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(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
+  },
+  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(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall));
+  },
+  iconMedium: function iconMedium(t) {
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium));
+  },
+  iconLarge: function iconLarge(t) {
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge));
+  },
+  mobileContentWithIcon: function mobileContentWithIcon() {
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      margin-left: 8px;\n    "])));
+  }
+});

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","resetButton","iconSizeMixin","menuItemSizeMixin","withIconSizeMixin","getMenuItemPaddings","_ref","menuItemPaddingX","menuItemPaddingY","paddingX","paddingY","getStyles","emotion","root","t","css","_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 { Emotion } from '@emotion/css/types/create-instance';\n\nimport type { Theme } from '../../lib/theming/Theme';\nimport { 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 getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        ${resetButton(emotion)};\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 emotion.css`\n        ${menuItemSizeMixin(\n          t.menuItemPaddingXSmall,\n          t.menuItemPaddingYSmall,\n          t.menuItemLineHeightSmall,\n          t.menuItemFontSizeSmall,\n          emotion,\n        )};\n      `;\n    },\n    rootMedium(t: Theme) {\n      return emotion.css`\n        ${menuItemSizeMixin(\n          t.menuItemPaddingXMedium,\n          t.menuItemPaddingYMedium,\n          t.menuItemLineHeightMedium,\n          t.menuItemFontSizeMedium,\n          emotion,\n        )};\n      `;\n    },\n    rootLarge(t: Theme) {\n      return emotion.css`\n        ${menuItemSizeMixin(\n          t.menuItemPaddingXLarge,\n          t.menuItemPaddingYLarge,\n          t.menuItemLineHeightLarge,\n          t.menuItemFontSizeLarge,\n          emotion,\n        )};\n      `;\n    },\n\n    rootMobile(t: Theme) {\n      return emotion.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 emotion.css`\n        background: ${t.menuItemHoverBg} !important;\n        color: ${t.menuItemHoverColor} !important;\n      `;\n    },\n    selected(t: Theme) {\n      return emotion.css`\n        background: ${t.menuItemSelectedBg} !important;\n      `;\n    },\n    disabled(t: Theme) {\n      return emotion.css`\n        background: ${t.menuItemDisabledBg};\n        color: ${t.menuItemDisabledColor};\n        cursor: default;\n      `;\n    },\n    nonSelectable() {\n      return emotion.css`\n        cursor: default;\n      `;\n    },\n    link(t: Theme) {\n      return emotion.css`\n        color: ${t.menuItemLinkColor};\n      `;\n    },\n    loose() {\n      return emotion.css`\n        padding-left: 15px;\n      `;\n    },\n    withIconSmall(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(t.menuItemPaddingForIconSmall, emotion)}\n      `;\n    },\n    withIconMedium(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(t.menuItemPaddingForIconMedium, emotion)}\n      `;\n    },\n    withIconLarge(t: Theme) {\n      return emotion.css`\n        ${withIconSizeMixin(t.menuItemPaddingForIconLarge, emotion)}\n      `;\n    },\n    comment(t: Theme) {\n      return emotion.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 emotion.css`\n        color: ${t.menuItemCommentColorHover};\n        opacity: 0.6;\n      `;\n    },\n    icon() {\n      return emotion.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 emotion.css`\n        ${iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall, emotion)};\n      `;\n    },\n    iconMedium(t: Theme) {\n      return emotion.css`\n        ${iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium, emotion)};\n      `;\n    },\n    iconLarge(t: Theme) {\n      return emotion.css`\n        ${iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge, emotion)};\n      `;\n    },\n    mobileContentWithIcon() {\n      return emotion.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":[]}

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

@@ -1,10 +1,9 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
 export declare const getMenuItemPaddings: ({ menuItemPaddingX, menuItemPaddingY, }: Record<'menuItemPaddingX' | 'menuItemPaddingY', string>) => {
     paddingX: string;
     paddingY: string;
 };
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;

package/components/MenuSeparator/MenuSeparator/MenuSeparator.js

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
-import { useEmotion } from "../../../lib/theming/RenderEnvironmentContext";
+import { cx } from "../../../lib/theming/Emotion";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { ResponsiveLayout } from "../../ResponsiveLayout";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
-import { getStyles } from "../MenuSeparator.styles";
+import { styles } from "../MenuSeparator.styles";
 export var MenuSeparatorDataTids = {
   root: 'MenuSeparator__root'
 };
@@ -16,10 +16,6 @@ export var MenuSeparatorDataTids = {
  */
 var MenuSeparator = forwardRefAndName('MenuSeparator', function MenuSeparator(props, ref) {
   var theme = useContext(ThemeContext);
-  var emotion = useEmotion();
-  var _useEmotion = useEmotion(),
-    cx = _useEmotion.cx;
-  var styles = getStyles(emotion);
   return /*#__PURE__*/(
     React.createElement(CommonWrapper, props, /*#__PURE__*/
     React.createElement(ResponsiveLayout, null, function (_ref) {

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

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","useEmotion","ThemeContext","CommonWrapper","ResponsiveLayout","forwardRefAndName","getStyles","MenuSeparatorDataTids","root","MenuSeparator","props","ref","theme","emotion","_useEmotion","cx","styles","createElement","_ref","_cx","isMobile","className","rootMobile"],"sources":["MenuSeparator.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { useEmotion } from '../../lib/theming/RenderEnvironmentContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { getStyles } from './MenuSeparator.styles';\n\nexport type MenuSeparatorProps = CommonProps;\n\nexport const MenuSeparatorDataTids = {\n  root: 'MenuSeparator__root',\n} as const;\n\n/**\n * `MenuSeparator` добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: DropdownMenu, Kebab, TooltipMenu и Select.\n */\nconst MenuSeparator = forwardRefAndName(\n  'MenuSeparator',\n  function MenuSeparator(props: MenuSeparatorProps, ref: React.Ref<HTMLDivElement>) {\n    const theme = useContext(ThemeContext);\n    const emotion = useEmotion();\n    const { cx } = useEmotion();\n    const styles = getStyles(emotion);\n\n    return (\n      <CommonWrapper {...props}>\n        <ResponsiveLayout>\n          {({ isMobile }) => {\n            return (\n              <div\n                ref={ref}\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);\n\nexport { MenuSeparator };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,UAAU,QAAQ,4CAA4C;AACvE,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,iBAAiB,QAAQ,6BAA6B;;AAE/D,SAASC,SAAS,QAAQ,wBAAwB;;;;AAIlD,OAAO,IAAMC,qBAAqB,GAAG;EACnCC,IAAI,EAAE;AACR,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA,IAAMC,aAAa,GAAGJ,iBAAiB;EACrC,eAAe;EACf,SAASI,aAAaA,CAACC,KAAyB,EAAEC,GAA8B,EAAE;IAChF,IAAMC,KAAK,GAAGZ,UAAU,CAACE,YAAY,CAAC;IACtC,IAAMW,OAAO,GAAGZ,UAAU,CAAC,CAAC;IAC5B,IAAAa,WAAA,GAAeb,UAAU,CAAC,CAAC,CAAnBc,EAAE,GAAAD,WAAA,CAAFC,EAAE;IACV,IAAMC,MAAM,GAAGV,SAAS,CAACO,OAAO,CAAC;;IAEjC;MACEd,KAAA,CAAAkB,aAAA,CAACd,aAAa,EAAKO,KAAK;MACtBX,KAAA,CAAAkB,aAAA,CAACb,gBAAgB;MACd,UAAAc,IAAA,EAAkB,KAAAC,GAAA,KAAfC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;QACV;UACErB,KAAA,CAAAkB,aAAA;YACEN,GAAG,EAAEA,GAAI;YACT,YAAUJ,qBAAqB,CAACC,IAAK;YACrCa,SAAS,EAAEN,EAAE,EAAAI,GAAA,OAAAA,GAAA,CAAIH,MAAM,CAACR,IAAI,CAACI,KAAK,CAAC,IAAG,IAAI,EAAAO,GAAA,CAAGH,MAAM,CAACM,UAAU,CAACV,KAAK,CAAC,IAAGQ,QAAQ,EAAAD,GAAA,CAAE,CAAE;UACrF,CAAC;;MAEN;MACgB;MACL,CAAC;;EAEpB;AACF,CAAC;;AAED,SAASV,aAAa","ignoreList":[]}
+{"version":3,"names":["React","useContext","cx","ThemeContext","CommonWrapper","ResponsiveLayout","forwardRefAndName","styles","MenuSeparatorDataTids","root","MenuSeparator","props","ref","theme","createElement","_ref","_cx","isMobile","className","rootMobile"],"sources":["MenuSeparator.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport type { CommonProps } from '../../internal/CommonWrapper';\nimport { CommonWrapper } from '../../internal/CommonWrapper';\nimport { ResponsiveLayout } from '../ResponsiveLayout';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\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 * `MenuSeparator` добавляет разделительную линию между элементами меню.\n *\n * Сущности в которых может быть использован `MenuSeparator`: DropdownMenu, Kebab, TooltipMenu и Select.\n */\nconst MenuSeparator = forwardRefAndName(\n  'MenuSeparator',\n  function MenuSeparator(props: MenuSeparatorProps, ref: React.Ref<HTMLDivElement>) {\n    const theme = useContext(ThemeContext);\n\n    return (\n      <CommonWrapper {...props}>\n        <ResponsiveLayout>\n          {({ isMobile }) => {\n            return (\n              <div\n                ref={ref}\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);\n\nexport { MenuSeparator };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAASC,aAAa,QAAQ,8BAA8B;AAC5D,SAASC,gBAAgB,QAAQ,qBAAqB;AACtD,SAASC,iBAAiB,QAAQ,6BAA6B;;AAE/D,SAASC,MAAM,QAAQ,wBAAwB;;;;AAI/C,OAAO,IAAMC,qBAAqB,GAAG;EACnCC,IAAI,EAAE;AACR,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA,IAAMC,aAAa,GAAGJ,iBAAiB;EACrC,eAAe;EACf,SAASI,aAAaA,CAACC,KAAyB,EAAEC,GAA8B,EAAE;IAChF,IAAMC,KAAK,GAAGZ,UAAU,CAACE,YAAY,CAAC;;IAEtC;MACEH,KAAA,CAAAc,aAAA,CAACV,aAAa,EAAKO,KAAK;MACtBX,KAAA,CAAAc,aAAA,CAACT,gBAAgB;MACd,UAAAU,IAAA,EAAkB,KAAAC,GAAA,KAAfC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;QACV;UACEjB,KAAA,CAAAc,aAAA;YACEF,GAAG,EAAEA,GAAI;YACT,YAAUJ,qBAAqB,CAACC,IAAK;YACrCS,SAAS,EAAEhB,EAAE,EAAAc,GAAA,OAAAA,GAAA,CAAIT,MAAM,CAACE,IAAI,CAACI,KAAK,CAAC,IAAG,IAAI,EAAAG,GAAA,CAAGT,MAAM,CAACY,UAAU,CAACN,KAAK,CAAC,IAAGI,QAAQ,EAAAD,GAAA,CAAE,CAAE;UACrF,CAAC;;MAEN;MACgB;MACL,CAAC;;EAEpB;AACF,CAAC;;AAED,SAASN,aAAa","ignoreList":[]}

package/components/MenuSeparator/MenuSeparator.md

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

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

@@ -1,13 +1,11 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root(t) {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        margin: ", " ", ";\n        border-top: ", " solid ", ";\n      "])), t.menuSeparatorMarginY, t.menuSeparatorMarginX, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
-    },
-    rootMobile: function rootMobile(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        margin: ", " ", ";\n        border-radius: 1px;\n      "])), t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    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,"names":["memoizeStyle","getStyles","emotion","root","t","css","_templateObject","_taggedTemplateLiteralLoose","menuSeparatorMarginY","menuSeparatorMarginX","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","_templateObject2","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"sources":["MenuSeparator.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/types/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root(t: Theme) {\n      return emotion.css`\n        margin: ${t.menuSeparatorMarginY} ${t.menuSeparatorMarginX};\n        border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n      `;\n    },\n\n    rootMobile(t: Theme) {\n      return emotion.css`\n        margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n        border-radius: 1px;\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;;AAGxD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,IAAI,WAAAA,KAACC,CAAQ,EAAE;QACb,OAAOF,OAAO,CAACG,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;QACNH,CAAC,CAACI,oBAAoB,EAAIJ,CAAC,CAACK,oBAAoB;QAC5CL,CAAC,CAACM,wBAAwB,EAAUN,CAAC,CAACO,wBAAwB;;MAEhF,CAAC;;MAEDC,UAAU,WAAAA,WAACR,CAAQ,EAAE;QACnB,OAAOF,OAAO,CAACG,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;QACNH,CAAC,CAACU,0BAA0B,EAAIV,CAAC,CAACW,0BAA0B;;;MAG1E;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","t","_templateObject","_taggedTemplateLiteralLoose","menuSeparatorMarginY","menuSeparatorMarginX","menuSeparatorBorderWidth","menuSeparatorBorderColor","rootMobile","_templateObject2","mobileMenuSeparatorMarginY","mobileMenuSeparatorMarginX"],"sources":["MenuSeparator.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport type { 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"],"mappings":"sIAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAACC,CAAQ,EAAE;IACb,OAAOJ,GAAG,CAAAK,eAAA,KAAAA,eAAA,GAAAC,2BAAA;IACEF,CAAC,CAACG,oBAAoB,EAAIH,CAAC,CAACI,oBAAoB;IAC5CJ,CAAC,CAACK,wBAAwB,EAAUL,CAAC,CAACM,wBAAwB;;EAEhF,CAAC;;EAEDC,UAAU,WAAAA,WAACP,CAAQ,EAAE;IACnB,OAAOJ,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;IACEF,CAAC,CAACS,0BAA0B,EAAIT,CAAC,CAACU,0BAA0B;;;EAG1E;AACF,CAAC,CAAC","ignoreList":[]}

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/types/create-instance';
 import type { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     rootMobile(t: Theme): string;
 };