@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

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

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

package/components/MenuItem/MenuItem.styles.js

@@ -0,0 +1,81 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, memoizeStyle } from '../../lib/theming/Emotion.js';
+import { resetButton } from '../../lib/styles/Mixins.js';
+import { iconSizeMixin, menuItemSizeMixin, withIconSizeMixin } from './MenuItem.mixins.js';
+export var getMenuItemPaddings = function (_a) {
+    var menuItemPaddingX = _a.menuItemPaddingX, menuItemPaddingY = _a.menuItemPaddingY;
+    var paddingX = menuItemPaddingX;
+    var paddingY = menuItemPaddingY;
+    return { paddingX: paddingX, paddingY: paddingY };
+};
+export var styles = memoizeStyle({
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\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    "], ["\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 (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemPaddingXSmall, t.menuItemPaddingYSmall, t.menuItemLineHeightSmall, t.menuItemFontSizeSmall));
+    },
+    rootMedium: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemPaddingXMedium, t.menuItemPaddingYMedium, t.menuItemLineHeightMedium, t.menuItemFontSizeMedium));
+    },
+    rootLarge: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), menuItemSizeMixin(t.menuItemPaddingXLarge, t.menuItemPaddingYLarge, t.menuItemLineHeightLarge, t.menuItemFontSizeLarge));
+    },
+    rootMobile: function (t) {
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "], ["\n      font-size: ", ";\n      line-height: ", ";\n      padding: ", ";\n    "])), t.menuItemFontSizeMobile, t.menuItemLineHeightMobile, t.menuItemPaddingMobile);
+    },
+    hover: function (t) {
+        // Color with !important in purpose to override `a:hover`
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      background: ", " !important;\n      color: ", " !important;\n    "], ["\n      background: ", " !important;\n      color: ", " !important;\n    "])), t.menuItemHoverBg, t.menuItemHoverColor);
+    },
+    selected: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      background: ", " !important;\n    "], ["\n      background: ", " !important;\n    "])), t.menuItemSelectedBg);
+    },
+    disabled: function (t) {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n      cursor: default;\n    "], ["\n      background: ", ";\n      color: ", ";\n      cursor: default;\n    "])), t.menuItemDisabledBg, t.menuItemDisabledColor);
+    },
+    nonSelectable: function () {
+        return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      cursor: default;\n    "], ["\n      cursor: default;\n    "])));
+    },
+    link: function (t) {
+        return css(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      color: ", ";\n    "], ["\n      color: ", ";\n    "])), t.menuItemLinkColor);
+    },
+    loose: function () {
+        return css(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-left: 15px;\n    "], ["\n      padding-left: 15px;\n    "])));
+    },
+    withIconSmall: function (t) {
+        return css(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconSmall));
+    },
+    withIconMedium: function (t) {
+        return css(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconMedium));
+    },
+    withIconLarge: function (t) {
+        return css(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n      ", "\n    "], ["\n      ", "\n    "])), withIconSizeMixin(t.menuItemPaddingForIconLarge));
+    },
+    comment: function (t) {
+        return css(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n      color: ", ";\n      opacity: ", ";\n      white-space: normal;\n      padding-top: 4px;\n    "], ["\n      color: ", ";\n      opacity: ", ";\n      white-space: normal;\n      padding-top: 4px;\n    "])), t.menuItemCommentColor, t.menuItemCommentOpacity);
+    },
+    commentHover: function (t) {
+        return css(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n      color: ", ";\n      opacity: 0.6;\n    "], ["\n      color: ", ";\n      opacity: 0.6;\n    "])), t.menuItemCommentColorHover);
+    },
+    icon: function () {
+        return css(templateObject_17 || (templateObject_17 = __makeTemplateObject(["\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      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 (t) {
+        return css(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthSmall, t.menuItemPaddingXSmall));
+    },
+    iconMedium: function (t) {
+        return css(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthMedium, t.menuItemPaddingXMedium));
+    },
+    iconLarge: function (t) {
+        return css(templateObject_20 || (templateObject_20 = __makeTemplateObject(["\n      ", ";\n    "], ["\n      ", ";\n    "])), iconSizeMixin(t.menuItemIconWidthLarge, t.menuItemPaddingXLarge));
+    },
+    mobileContentWithIcon: function () {
+        return css(templateObject_21 || (templateObject_21 = __makeTemplateObject(["\n      margin-left: 8px;\n    "], ["\n      margin-left: 8px;\n    "])));
+    },
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21;
+//# sourceMappingURL=MenuItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.styles.js","sourceRoot":"","sources":["../../../components/MenuItem/MenuItem.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Theme } from '../../lib/theming/Theme.js';\nimport { css, memoizeStyle } from '../../lib/theming/Emotion.js';\nimport { resetButton } from '../../lib/styles/Mixins.js';\n\nimport { iconSizeMixin, menuItemSizeMixin, withIconSizeMixin } from './MenuItem.mixins.js';\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"]}

package/components/MenuItem/__stories__/MenuItem.stories.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Meta } from '../../../typings/stories.js';
+declare const meta: Meta;
+export default meta;
+export declare const MobileMenuItemWithIcon: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const MenuItemWithIcon: {
+    (): React.JSX.Element;
+    storyName: string;
+    parameters: {
+        creevey: {
+            skip: {
+                in: RegExp;
+            };
+        };
+    };
+};
+export declare const MenuItemWithBiggerFontSize: {
+    (): React.JSX.Element;
+    storyName: string;
+    parameters: {
+        creevey: {
+            skip: {
+                in: RegExp;
+            };
+        };
+    };
+};
+export declare const Size: {
+    (): React.JSX.Element;
+    storyName: string;
+};

package/components/MenuItem/__stories__/MenuItem.stories.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular.js';
+import { ThemeContext } from '../../../lib/theming/ThemeContext.js';
+import { ThemeFactory } from '../../../lib/theming/ThemeFactory.js';
+import { MenuItem } from '../MenuItem.js';
+import { Gapped } from '../../Gapped/index.js';
+var meta = {
+    title: 'MenuItem',
+    component: MenuItem,
+};
+export default meta;
+export var MobileMenuItemWithIcon = function () {
+    return (React.createElement(MenuItem, { icon: React.createElement(CheckAIcon16Regular, null), isMobile: true }, "\u041C\u043E\u0431\u0438\u043B\u044C\u043D\u044B\u0439 \u0430\u0439\u0442\u0435\u043C \u0441 \u0438\u043A\u043E\u043D\u043A\u043E\u0439"));
+};
+MobileMenuItemWithIcon.storyName = 'mobile menu item with icon';
+export var MenuItemWithIcon = function () {
+    return React.createElement(MenuItem, { icon: React.createElement(CheckAIcon16Regular, null) }, "\u041C\u0435\u043D\u044E \u0430\u0439\u0442\u0435\u043C \u0441 \u0438\u043A\u043E\u043D\u043A\u043E\u0439");
+};
+MenuItemWithIcon.storyName = 'menu item with icon';
+MenuItemWithIcon.parameters = {
+    creevey: {
+        skip: { in: /^(?!\bchrome2022\b)/ },
+    },
+};
+export var MenuItemWithBiggerFontSize = function () {
+    return (React.createElement(ThemeContext.Consumer, null, function (theme) { return (React.createElement(ThemeContext.Provider, { value: ThemeFactory.create({ menuItemFontSizeSmall: '18px', menuItemPaddingYSmall: '8px' }, theme) },
+        React.createElement(MenuItem, { icon: React.createElement(CheckAIcon16Regular, null) }, "\u041C\u0435\u043D\u044E \u0430\u0439\u0442\u0435\u043C \u0441 \u0443\u0432\u0435\u043B\u0438\u0447\u0435\u043D\u043D\u044B\u043C \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u0448\u0440\u0438\u0444\u0442\u0430"))); }));
+};
+MenuItemWithBiggerFontSize.storyName = 'menu item with bigger font size';
+MenuItemWithBiggerFontSize.parameters = {
+    creevey: {
+        skip: { in: /^(?!\bchrome2022\b)/ },
+    },
+};
+export var Size = function () {
+    var comment = React.createElement("span", null, "\u041A\u043E\u043C\u043C\u0435\u043D\u0442\u0430\u0440\u0438\u0439");
+    return (React.createElement(Gapped, null,
+        React.createElement(MenuItem, { icon: React.createElement(CheckAIcon16Regular, null), comment: comment }, "\u0411\u0435\u0437 \u0440\u0430\u0437\u043C\u0435\u0440\u0430"),
+        React.createElement(MenuItem, { size: 'small', icon: React.createElement(CheckAIcon16Regular, null), comment: comment }, "\u041C\u0430\u043B\u0435\u043D\u044C\u043A\u0438\u0439"),
+        React.createElement(MenuItem, { size: 'medium', icon: React.createElement(CheckAIcon16Regular, null), comment: comment }, "\u0421\u0440\u0435\u0434\u043D\u0438\u0439"),
+        React.createElement(MenuItem, { size: 'large', icon: React.createElement(CheckAIcon16Regular, null), comment: comment }, "\u0411\u043E\u043B\u044C\u0448\u043E\u0439")));
+};
+Size.storyName = 'size';
+//# sourceMappingURL=MenuItem.stories.js.map

package/components/MenuItem/__stories__/MenuItem.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.stories.js","sourceRoot":"","sources":["../../../../components/MenuItem/__stories__/MenuItem.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAC;AAE/F,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAEpE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAE/C,IAAM,IAAI,GAAS;IACjB,KAAK,EAAE,UAAU;IACjB,SAAS,EAAE,QAAQ;CACpB,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,sBAAsB,GAAG;IACpC,OAAO,CACL,oBAAC,QAAQ,IAAC,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,QAAQ,oJAEtC,CACZ,CAAC;AACJ,CAAC,CAAC;AACF,sBAAsB,CAAC,SAAS,GAAG,4BAA4B,CAAC;AAEhE,MAAM,CAAC,IAAM,gBAAgB,GAAG;IAC9B,OAAO,oBAAC,QAAQ,IAAC,IAAI,EAAE,oBAAC,mBAAmB,OAAG,gHAAiC,CAAC;AAClF,CAAC,CAAC;AACF,gBAAgB,CAAC,SAAS,GAAG,qBAAqB,CAAC;AACnD,gBAAgB,CAAC,UAAU,GAAG;IAC5B,OAAO,EAAE;QACP,IAAI,EAAE,EAAE,EAAE,EAAE,qBAAqB,EAAE;KACpC;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,0BAA0B,GAAG;IACxC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK,IAAK,OAAA,CACV,oBAAC,YAAY,CAAC,QAAQ,IACpB,KAAK,EAAE,YAAY,CAAC,MAAM,CAAC,EAAE,qBAAqB,EAAE,MAAM,EAAE,qBAAqB,EAAE,KAAK,EAAE,EAAE,KAAK,CAAC;QAElG,oBAAC,QAAQ,IAAC,IAAI,EAAE,oBAAC,mBAAmB,OAAG,8NAAqD,CACtE,CACzB,EANW,CAMX,CACqB,CACzB,CAAC;AACJ,CAAC,CAAC;AACF,0BAA0B,CAAC,SAAS,GAAG,iCAAiC,CAAC;AACzE,0BAA0B,CAAC,UAAU,GAAG;IACtC,OAAO,EAAE;QACP,IAAI,EAAE,EAAE,EAAE,EAAE,qBAAqB,EAAE;KACpC;CACF,CAAC;AAEF,MAAM,CAAC,IAAM,IAAI,GAAG;IAClB,IAAM,OAAO,GAAG,uGAAwB,CAAC;IACzC,OAAO,CACL,oBAAC,MAAM;QACL,oBAAC,QAAQ,IAAC,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,OAAO,EAAE,OAAO,oEAE9C;QACX,oBAAC,QAAQ,IAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,OAAO,EAAE,OAAO,6DAE7D;QACX,oBAAC,QAAQ,IAAC,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,OAAO,EAAE,OAAO,iDAE9D;QACX,oBAAC,QAAQ,IAAC,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,oBAAC,mBAAmB,OAAG,EAAE,OAAO,EAAE,OAAO,iDAE7D,CACJ,CACV,CAAC;AACJ,CAAC,CAAC;AACF,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC","sourcesContent":["import React from 'react';\nimport { CheckAIcon16Regular } from '@skbkontur/icons/icons/CheckAIcon/CheckAIcon16Regular.js';\n\nimport { ThemeContext } from '../../../lib/theming/ThemeContext.js';\nimport { ThemeFactory } from '../../../lib/theming/ThemeFactory.js';\nimport type { Meta } from '../../../typings/stories.js';\nimport { MenuItem } from '../MenuItem.js';\nimport { Gapped } from '../../Gapped/index.js';\n\nconst meta: Meta = {\n  title: 'MenuItem',\n  component: MenuItem,\n};\n\nexport default meta;\n\nexport const MobileMenuItemWithIcon = () => {\n  return (\n    <MenuItem icon={<CheckAIcon16Regular />} isMobile>\n      Мобильный айтем с иконкой\n    </MenuItem>\n  );\n};\nMobileMenuItemWithIcon.storyName = 'mobile menu item with icon';\n\nexport const MenuItemWithIcon = () => {\n  return <MenuItem icon={<CheckAIcon16Regular />}>Меню айтем с иконкой</MenuItem>;\n};\nMenuItemWithIcon.storyName = 'menu item with icon';\nMenuItemWithIcon.parameters = {\n  creevey: {\n    skip: { in: /^(?!\\bchrome2022\\b)/ },\n  },\n};\n\nexport const MenuItemWithBiggerFontSize = () => {\n  return (\n    <ThemeContext.Consumer>\n      {(theme) => (\n        <ThemeContext.Provider\n          value={ThemeFactory.create({ menuItemFontSizeSmall: '18px', menuItemPaddingYSmall: '8px' }, theme)}\n        >\n          <MenuItem icon={<CheckAIcon16Regular />}>Меню айтем с увеличенным размером шрифта</MenuItem>\n        </ThemeContext.Provider>\n      )}\n    </ThemeContext.Consumer>\n  );\n};\nMenuItemWithBiggerFontSize.storyName = 'menu item with bigger font size';\nMenuItemWithBiggerFontSize.parameters = {\n  creevey: {\n    skip: { in: /^(?!\\bchrome2022\\b)/ },\n  },\n};\n\nexport const Size = () => {\n  const comment = <span>Комментарий</span>;\n  return (\n    <Gapped>\n      <MenuItem icon={<CheckAIcon16Regular />} comment={comment}>\n        Без размера\n      </MenuItem>\n      <MenuItem size={'small'} icon={<CheckAIcon16Regular />} comment={comment}>\n        Маленький\n      </MenuItem>\n      <MenuItem size={'medium'} icon={<CheckAIcon16Regular />} comment={comment}>\n        Средний\n      </MenuItem>\n      <MenuItem size={'large'} icon={<CheckAIcon16Regular />} comment={comment}>\n        Большой\n      </MenuItem>\n    </Gapped>\n  );\n};\nSize.storyName = 'size';\n"]}

package/components/MenuItem/__tests__/MenuItem-test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/MenuItem/__tests__/MenuItem-test.js

@@ -0,0 +1,183 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { userEvent } from '@testing-library/user-event';
+import { Menu } from '../../../internal/Menu/index.js';
+import { MenuItem, MenuItemDataTids } from '../MenuItem.js';
+describe('MenuItem', function () {
+    it('renders multiple children', function () {
+        render(React.createElement(MenuItem, { state: "hover" },
+            "a",
+            React.createElement("i", null, "b")));
+        expect(screen.getByTestId(MenuItemDataTids.root)).toHaveTextContent('ab');
+    });
+    it('has id attribute', function () {
+        var menuItemId = 'menuItemId';
+        var result = render(React.createElement(MenuItem, { id: menuItemId }));
+        expect(result.container.querySelector("#".concat(menuItemId))).not.toBeNull();
+    });
+    it('without href does not has a rel attribute', function () {
+        render(React.createElement(MenuItem, { rel: 'noopener' }, "Test"));
+        expect(screen.queryByRole('button')).not.toHaveAttribute('rel');
+    });
+    it('with href has a rel attribute', function () {
+        render(React.createElement(MenuItem, { href: '#', rel: 'noopener' }, "Test"));
+        expect(screen.queryByRole('link')).toHaveAttribute('rel');
+    });
+    it('with external link has rel attribute', function () {
+        render(React.createElement(MenuItem, { href: 'https://www.google.com/' }, "Test"));
+        expect(screen.queryByRole('link')).toHaveAttribute('rel', 'noopener noreferrer');
+    });
+    it('with external link can rewrite default rel attribute', function () {
+        render(React.createElement(MenuItem, { href: 'https://www.google.com/', rel: 'alternate' }, "Test"));
+        expect(screen.queryByRole('link')).toHaveAttribute('rel', 'alternate');
+    });
+    it('calls children function', function () {
+        render(React.createElement(MenuItem, { state: "hover" }, function (state) { return state === null || state === void 0 ? void 0 : state.toString(); }));
+        expect(screen.getByTestId(MenuItemDataTids.root)).toHaveTextContent('hover');
+    });
+    it('renders button tag', function () {
+        render(React.createElement(MenuItem, null, "Test item"));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+    });
+    it('pass component', function () {
+        var FakeRouterLink = function (_a) {
+            var to = _a.to;
+            return React.createElement("span", null, to);
+        };
+        var Component = function (_a) {
+            var href = _a.href;
+            return React.createElement(FakeRouterLink, { to: href });
+        };
+        render(React.createElement(MenuItem, { href: "http:test.href", component: Component }, "Testing component"));
+        expect(document.body).toContainHTML('<span>http:test.href</span>');
+    });
+    it('should render disabled <button/>', function () {
+        render(React.createElement(MenuItem, { disabled: true }));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        expect(screen.getByRole('button')).toBeDisabled();
+    });
+    it('should render disabled <button/> when `component` prop passed', function () {
+        render(React.createElement(MenuItem, { component: function (props) { return React.createElement("button", __assign({}, props)); }, disabled: true }));
+        expect(screen.getByRole('button')).toBeInTheDocument();
+        expect(screen.getByRole('button')).toBeDisabled();
+    });
+    it('has correct data-tid', function () {
+        var customDataTid = 'custom-data-tid';
+        render(React.createElement(MenuItem, { "data-tid": customDataTid }));
+        expect(screen.getByTestId(customDataTid)).toBeInTheDocument();
+    });
+    it('should pass state to functional children when highlighted by Menu', function () {
+        var renderChild = vi.fn(function (state) { return React.createElement("div", null, "".concat(state)); });
+        render(React.createElement(Menu, { initialSelectedItemIndex: 0 },
+            React.createElement(MenuItem, null, renderChild)));
+        expect(renderChild).toHaveBeenCalledWith('hover');
+    });
+    describe('a11y', function () {
+        it('props aria-describedby applied correctly', function () {
+            render(React.createElement("div", null,
+                React.createElement(MenuItem, { "aria-describedby": "elementId" }),
+                React.createElement("p", { id: "elementId" }, "Description")));
+            var menuItem = screen.getByRole('button');
+            expect(menuItem).toHaveAttribute('aria-describedby', 'elementId');
+            expect(menuItem).toHaveAccessibleDescription('Description');
+        });
+        it('sets value for aria-label attribute', function () {
+            var ariaLabel = 'aria-label';
+            render(React.createElement(MenuItem, { "aria-label": ariaLabel }));
+            expect(screen.getByRole('button')).toHaveAttribute('aria-label', ariaLabel);
+        });
+    });
+    describe('onMouseEnter', function () {
+        it('calls once', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onMouseEnter;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onMouseEnter = vi.fn();
+                        render(React.createElement(MenuItem, { onMouseEnter: onMouseEnter },
+                            React.createElement("span", null, "MenuItem")));
+                        return [4 /*yield*/, userEvent.hover(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.hover(screen.getByText('MenuItem'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.hover(screen.getByRole('button'))];
+                    case 3:
+                        _a.sent();
+                        expect(onMouseEnter).toHaveBeenCalledTimes(1);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+        it('calls again after onMouseLeave', function () { return __awaiter(void 0, void 0, void 0, function () {
+            var onMouseEnter;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        onMouseEnter = vi.fn();
+                        render(React.createElement(MenuItem, { onMouseEnter: onMouseEnter }, "MenuItem"));
+                        return [4 /*yield*/, userEvent.hover(screen.getByRole('button'))];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.unhover(screen.getByRole('button'))];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, userEvent.hover(screen.getByRole('button'))];
+                    case 3:
+                        _a.sent();
+                        expect(onMouseEnter.mock.calls).toHaveLength(2);
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});
+//# sourceMappingURL=MenuItem-test.js.map

package/components/MenuItem/__tests__/MenuItem-test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem-test.js","sourceRoot":"","sources":["../../../../components/MenuItem/__tests__/MenuItem-test.tsx"],"names":[],"mappings":"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","sourcesContent":["import { render, screen } from '@testing-library/react';\nimport React from 'react';\nimport { userEvent } from '@testing-library/user-event';\n\nimport { Menu } from '../../../internal/Menu/index.js';\nimport type { MenuItemState } from '../MenuItem.js';\nimport { MenuItem, MenuItemDataTids } from '../MenuItem.js';\n\ndescribe('MenuItem', () => {\n  it('renders multiple children', () => {\n    render(\n      <MenuItem state=\"hover\">\n        a<i>b</i>\n      </MenuItem>,\n    );\n    expect(screen.getByTestId(MenuItemDataTids.root)).toHaveTextContent('ab');\n  });\n\n  it('has id attribute', () => {\n    const menuItemId = 'menuItemId';\n    const result = render(<MenuItem id={menuItemId} />);\n    expect(result.container.querySelector(`#${menuItemId}`)).not.toBeNull();\n  });\n\n  it('without href does not has a rel attribute', () => {\n    render(<MenuItem rel={'noopener'}>Test</MenuItem>);\n    expect(screen.queryByRole('button')).not.toHaveAttribute('rel');\n  });\n\n  it('with href has a rel attribute', () => {\n    render(\n      <MenuItem href={'#'} rel={'noopener'}>\n        Test\n      </MenuItem>,\n    );\n    expect(screen.queryByRole('link')).toHaveAttribute('rel');\n  });\n\n  it('with external link has rel attribute', () => {\n    render(<MenuItem href={'https://www.google.com/'}>Test</MenuItem>);\n    expect(screen.queryByRole('link')).toHaveAttribute('rel', 'noopener noreferrer');\n  });\n\n  it('with external link can rewrite default rel attribute', () => {\n    render(\n      <MenuItem href={'https://www.google.com/'} rel={'alternate'}>\n        Test\n      </MenuItem>,\n    );\n    expect(screen.queryByRole('link')).toHaveAttribute('rel', 'alternate');\n  });\n\n  it('calls children function', () => {\n    render(<MenuItem state=\"hover\">{(state) => state?.toString()}</MenuItem>);\n    expect(screen.getByTestId(MenuItemDataTids.root)).toHaveTextContent('hover');\n  });\n\n  it('renders button tag', () => {\n    render(<MenuItem>Test item</MenuItem>);\n    expect(screen.getByRole('button')).toBeInTheDocument();\n  });\n\n  it('pass component', () => {\n    const FakeRouterLink = ({ to }: { to: string }) => <span>{to}</span>;\n\n    const Component = ({ href }: { href: string }) => <FakeRouterLink to={href} />;\n    render(\n      <MenuItem href=\"http:test.href\" component={Component}>\n        Testing component\n      </MenuItem>,\n    );\n    expect(document.body).toContainHTML('<span>http:test.href</span>');\n  });\n\n  it('should render disabled <button/>', () => {\n    render(<MenuItem disabled />);\n\n    expect(screen.getByRole('button')).toBeInTheDocument();\n    expect(screen.getByRole('button')).toBeDisabled();\n  });\n\n  it('should render disabled <button/> when `component` prop passed', () => {\n    render(<MenuItem component={(props) => <button {...props} />} disabled />);\n\n    expect(screen.getByRole('button')).toBeInTheDocument();\n    expect(screen.getByRole('button')).toBeDisabled();\n  });\n\n  it('has correct data-tid', () => {\n    const customDataTid = 'custom-data-tid';\n    render(<MenuItem data-tid={customDataTid} />);\n\n    expect(screen.getByTestId(customDataTid)).toBeInTheDocument();\n  });\n\n  it('should pass state to functional children when highlighted by Menu', () => {\n    const renderChild = vi.fn((state: MenuItemState) => <div>{`${state}`}</div>);\n    render(\n      <Menu initialSelectedItemIndex={0}>\n        <MenuItem>{renderChild}</MenuItem>\n      </Menu>,\n    );\n\n    expect(renderChild).toHaveBeenCalledWith('hover');\n  });\n\n  describe('a11y', () => {\n    it('props aria-describedby applied correctly', () => {\n      render(\n        <div>\n          <MenuItem aria-describedby=\"elementId\" />\n          <p id=\"elementId\">Description</p>\n        </div>,\n      );\n      const menuItem = screen.getByRole('button');\n      expect(menuItem).toHaveAttribute('aria-describedby', 'elementId');\n      expect(menuItem).toHaveAccessibleDescription('Description');\n    });\n\n    it('sets value for aria-label attribute', () => {\n      const ariaLabel = 'aria-label';\n      render(<MenuItem aria-label={ariaLabel} />);\n\n      expect(screen.getByRole('button')).toHaveAttribute('aria-label', ariaLabel);\n    });\n  });\n\n  describe('onMouseEnter', () => {\n    it('calls once', async () => {\n      const onMouseEnter = vi.fn();\n      render(\n        <MenuItem onMouseEnter={onMouseEnter}>\n          <span>MenuItem</span>\n        </MenuItem>,\n      );\n\n      await userEvent.hover(screen.getByRole('button'));\n      await userEvent.hover(screen.getByText('MenuItem'));\n      await userEvent.hover(screen.getByRole('button'));\n\n      expect(onMouseEnter).toHaveBeenCalledTimes(1);\n    });\n\n    it('calls again after onMouseLeave', async () => {\n      const onMouseEnter = vi.fn();\n      render(<MenuItem onMouseEnter={onMouseEnter}>MenuItem</MenuItem>);\n\n      await userEvent.hover(screen.getByRole('button'));\n      await userEvent.unhover(screen.getByRole('button'));\n      await userEvent.hover(screen.getByRole('button'));\n\n      expect(onMouseEnter.mock.calls).toHaveLength(2);\n    });\n  });\n});\n"]}

package/components/MenuItem/index.d.ts

@@ -1 +1 @@
-export * from './MenuItem';
+export * from './MenuItem.js';

package/components/MenuItem/index.js

@@ -0,0 +1,2 @@
+export * from './MenuItem.js';
+//# sourceMappingURL=index.js.map

package/components/MenuItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/MenuItem/index.tsx"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC","sourcesContent":["export * from './MenuItem.js';\n"]}

package/components/MenuSeparator/MenuSeparator.d.ts

@@ -1,17 +1,12 @@
-import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export type MenuSeparatorProps = CommonProps;
-export declare const MenuSeparatorDataTids: {
-    readonly root: "MenuSeparator__root";
-};
-/**
- * `MenuSeparator` добавляет разделительную линию между элементами меню.
- *
- * Сущности в которых может быть использован `MenuSeparator`: DropdownMenu, Kebab, TooltipMenu и Select.
- */
-declare function MenuSeparator(props: MenuSeparatorProps): React.JSX.Element;
-declare namespace MenuSeparator {
-    var __KONTUR_REACT_UI__: string;
-    var displayName: string;
-}
-export { MenuSeparator };
+import type { CommonProps } from '../../internal/CommonWrapper/types.js';
+export type MenuSeparatorProps = CommonProps;
+export declare const MenuSeparatorDataTids: {
+    readonly root: "MenuSeparator__root";
+};
+/**
+ * `MenuSeparator` добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: DropdownMenu, Kebab, TooltipMenu и Select.
+ */
+declare const MenuSeparator: import("../../lib/forwardRefAndName.js").ReactUIComponentWithRef<HTMLDivElement, CommonProps> & Record<never, never>;
+export { MenuSeparator };

package/components/MenuSeparator/MenuSeparator.js

@@ -0,0 +1,37 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import React, { useContext } from 'react';
+import { cx } from '../../lib/theming/Emotion.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { ResponsiveLayout } from '../ResponsiveLayout/index.js';
+import { forwardRefAndName } from '../../lib/forwardRefAndName.js';
+import { styles } from './MenuSeparator.styles.js';
+export var MenuSeparatorDataTids = {
+    root: 'MenuSeparator__root',
+};
+/**
+ * `MenuSeparator` добавляет разделительную линию между элементами меню.
+ *
+ * Сущности в которых может быть использован `MenuSeparator`: DropdownMenu, Kebab, TooltipMenu и Select.
+ */
+var MenuSeparator = forwardRefAndName('MenuSeparator', function MenuSeparator(props, ref) {
+    var theme = useContext(ThemeContext);
+    return (React.createElement(CommonWrapper, __assign({}, props),
+        React.createElement(ResponsiveLayout, null, function (_a) {
+            var _b;
+            var isMobile = _a.isMobile;
+            return (React.createElement("div", { ref: ref, "data-tid": MenuSeparatorDataTids.root, className: cx((_b = {}, _b[styles.root(theme)] = true, _b[styles.rootMobile(theme)] = isMobile, _b)) }));
+        })));
+});
+export { MenuSeparator };
+//# sourceMappingURL=MenuSeparator.js.map

package/components/MenuSeparator/MenuSeparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSeparator.js","sourceRoot":"","sources":["../../../components/MenuSeparator/MenuSeparator.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,EAAE,EAAE,MAAM,8BAA8B,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAChE,OAAO,EAAE,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAEnE,OAAO,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AAInD,MAAM,CAAC,IAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE,qBAAqB;CACnB,CAAC;AAEX;;;;GAIG;AACH,IAAM,aAAa,GAAG,iBAAiB,CACrC,eAAe,EACf,SAAS,aAAa,CAAC,KAAyB,EAAE,GAA8B;IAC9E,IAAM,KAAK,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAEvC,OAAO,CACL,oBAAC,aAAa,eAAK,KAAK;QACtB,oBAAC,gBAAgB,QACd,UAAC,EAAY;;gBAAV,QAAQ,cAAA;YACV,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,cACE,qBAAqB,CAAC,IAAI,EACpC,SAAS,EAAE,EAAE,WAAG,GAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAG,IAAI,EAAE,GAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,IAAG,QAAQ,MAAG,GACnF,CACH,CAAC;QACJ,CAAC,CACgB,CACL,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,aAAa,EAAE,CAAC","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ResponsiveLayout } from '../ResponsiveLayout/index.js';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName.js';\n\nimport { styles } from './MenuSeparator.styles.js';\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"]}

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

@@ -1,5 +1,5 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    root(t: Theme): string;
-    rootMobile(t: Theme): string;
-};
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const styles: {
+    root(t: Theme): string;
+    rootMobile(t: Theme): string;
+};

package/components/MenuSeparator/MenuSeparator.styles.js

@@ -0,0 +1,15 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, memoizeStyle } from '../../lib/theming/Emotion.js';
+export var styles = memoizeStyle({
+    root: function (t) {
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin: ", " ", ";\n      border-top: ", " solid ", ";\n    "], ["\n      margin: ", " ", ";\n      border-top: ", " solid ", ";\n    "])), t.menuSeparatorMarginY, t.menuSeparatorMarginX, t.menuSeparatorBorderWidth, t.menuSeparatorBorderColor);
+    },
+    rootMobile: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      margin: ", " ", ";\n      border-radius: 1px;\n    "], ["\n      margin: ", " ", ";\n      border-radius: 1px;\n    "])), t.mobileMenuSeparatorMarginY, t.mobileMenuSeparatorMarginX);
+    },
+});
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=MenuSeparator.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSeparator.styles.js","sourceRoot":"","sources":["../../../components/MenuSeparator/MenuSeparator.styles.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAGjE,MAAM,CAAC,IAAM,MAAM,GAAG,YAAY,CAAC;IACjC,IAAI,YAAC,CAAQ;QACX,OAAO,GAAG,yIAAA,kBACE,EAAsB,GAAI,EAAsB,uBAC5C,EAA0B,SAAU,EAA0B,SAC7E,KAFW,CAAC,CAAC,oBAAoB,EAAI,CAAC,CAAC,oBAAoB,EAC5C,CAAC,CAAC,wBAAwB,EAAU,CAAC,CAAC,wBAAwB,EAC5E;IACJ,CAAC;IAED,UAAU,YAAC,CAAQ;QACjB,OAAO,GAAG,gIAAA,kBACE,EAA4B,GAAI,EAA4B,oCAEvE,KAFW,CAAC,CAAC,0BAA0B,EAAI,CAAC,CAAC,0BAA0B,EAEtE;IACJ,CAAC;CACF,CAAC,CAAC","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      margin: ${t.menuSeparatorMarginY} ${t.menuSeparatorMarginX};\n      border-top: ${t.menuSeparatorBorderWidth} solid ${t.menuSeparatorBorderColor};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      margin: ${t.mobileMenuSeparatorMarginY} ${t.mobileMenuSeparatorMarginX};\n      border-radius: 1px;\n    `;\n  },\n});\n"]}

package/components/MenuSeparator/__stories__/MenuSeparator.stories.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { Meta } from '../../../typings/stories.js';
+declare const meta: Meta;
+export default meta;
+export declare const Default: () => React.JSX.Element;

package/components/MenuSeparator/__stories__/MenuSeparator.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { MenuSeparator } from '../MenuSeparator.js';
+var meta = {
+    title: 'MenuSeparator',
+    component: MenuSeparator,
+    parameters: {
+        creevey: {
+            skip: {
+                'kind-skip-0': { stories: 'Default' },
+            },
+        },
+    },
+};
+export default meta;
+export var Default = function () {
+    return React.createElement(MenuSeparator, null);
+};
+//# sourceMappingURL=MenuSeparator.stories.js.map

package/components/MenuSeparator/__stories__/MenuSeparator.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuSeparator.stories.js","sourceRoot":"","sources":["../../../../components/MenuSeparator/__stories__/MenuSeparator.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEpD,IAAM,IAAI,GAAS;IACjB,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,aAAa;IACxB,UAAU,EAAE;QACV,OAAO,EAAE;YACP,IAAI,EAAE;gBACJ,aAAa,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE;aACtC;SACF;KACF;CACF,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,IAAM,OAAO,GAAG;IACrB,OAAO,oBAAC,aAAa,OAAG,CAAC;AAC3B,CAAC,CAAC","sourcesContent":["import React from 'react';\n\nimport type { Meta } from '../../../typings/stories.js';\nimport { MenuSeparator } from '../MenuSeparator.js';\n\nconst meta: Meta = {\n  title: 'MenuSeparator',\n  component: MenuSeparator,\n  parameters: {\n    creevey: {\n      skip: {\n        'kind-skip-0': { stories: 'Default' },\n      },\n    },\n  },\n};\n\nexport default meta;\n\nexport const Default = () => {\n  return <MenuSeparator />;\n};\n"]}