@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-388db940ca

package/components/MenuItem/MenuItem.js

@@ -0,0 +1,295 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
+import { scrollYCenterIntoNearestScrollable } from '../../lib/dom/scrollYCenterIntoNearestScrollable.js';
+import { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from '../../lib/utils.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { MenuContext } from '../../internal/Menu/MenuContext.js';
+import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';
+import { styles } from './MenuItem.styles.js';
+export var MenuItemDataTids = {
+    root: 'MenuItem__root',
+    content: 'MenuItem__content',
+    comment: 'MenuItem__comment',
+};
+/**
+ * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.
+ *
+ * Сущности в которых может быть использован `MenuItem`: DropdownMenu, Kebab, TooltipMenu и Select.
+ */
+var MenuItem = /** @class */ (function (_super) {
+    __extends(MenuItem, _super);
+    function MenuItem() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            iconOffsetTop: 0,
+            highlighted: false,
+        };
+        _this.mouseEntered = false;
+        _this.rootRef = null;
+        _this.contentRef = React.createRef();
+        _this.highlight = function () {
+            _this.setState({ highlighted: true });
+        };
+        _this.unhighlight = function () {
+            _this.setState({ highlighted: false });
+        };
+        _this.select = function (event) {
+            _this.handleClick(event);
+        };
+        _this.isEnabled = function () {
+            return !_this.props.disabled;
+        };
+        _this.navigate = function () {
+            if (!_this.props.href) {
+                return;
+            }
+            if (_this.props.target) {
+                window.open(_this.props.href, _this.props.target);
+            }
+            else {
+                location.href = _this.props.href;
+            }
+        };
+        _this.renderMain = function () {
+            var _a, _b, _c, _d;
+            var _e = _this.props, link = _e.link, comment = _e.comment, icon = _e.icon, loose = _e.loose, state = _e.state, size = _e.size, _enableIconPadding = _e._enableIconPadding, component = _e.component, onMouseEnter = _e.onMouseEnter, onMouseLeave = _e.onMouseLeave, isMobile = _e.isMobile, href = _e.href, disabled = _e.disabled, scrollIntoView = _e.scrollIntoView, _f = _e.rel, rel = _f === void 0 ? href && isExternalLink(href) ? 'noopener noreferrer' : _this.props.rel : _f, isNotSelectable = _e.isNotSelectable, children = _e.children, unusedClasses = _e.className, style = _e.style, dataTid = _e["data-tid"], rest = __rest(_e, ["link", "comment", "icon", "loose", "state", "size", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave", "isMobile", "href", "disabled", "scrollIntoView", "rel", "isNotSelectable", "children", "className", "style", 'data-tid']);
+            var iconElement = null;
+            if (icon) {
+                iconElement = (React.createElement("div", { style: { top: _this.state.iconOffsetTop }, className: cx((_a = {},
+                        _a[styles.icon()] = true,
+                        _a[_this.getIconSizeClassName()] = true,
+                        _a)) }, icon));
+            }
+            var className = cx((_b = {},
+                _b[styles.root(_this.theme)] = true,
+                _b[_this.getRootSizeClassName()] = true,
+                _b[styles.rootMobile(_this.theme)] = isMobile,
+                _b[styles.loose()] = !!loose,
+                _b[styles.hover(_this.theme)] = _this.isHover,
+                _b[styles.selected(_this.theme)] = _this.isSelected,
+                _b[styles.link(_this.theme)] = !!link,
+                _b[_this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding || _this.context.enableIconPadding,
+                _b[styles.nonSelectable()] = !!isNotSelectable,
+                _b[styles.disabled(_this.theme)] = !!disabled,
+                _b));
+            var content = children;
+            if (isFunction(children)) {
+                content = children(_this.activeState);
+            }
+            var Component = _this.getComponent();
+            return (React.createElement(CommonWrapper, __assign({ rootNodeRef: _this.setRootNode }, getVisualStateDataAttributes({
+                hover: _this.isHover,
+                selected: _this.isSelected,
+            }), _this.props),
+                React.createElement(Component, __assign({ ref: _this.setRootRef, "data-tid": MenuItemDataTids.root }, rest, { disabled: disabled, state: _this.activeState, onMouseOver: _this.handleMouseEnterFix, onMouseLeave: _this.handleMouseLeave, onClick: _this.handleClick, className: className, href: href, rel: href ? rel : undefined, tabIndex: -1 }),
+                    iconElement,
+                    React.createElement("span", { className: cx((_c = {},
+                            _c[styles.mobileContentWithIcon()] = isMobile && isNonNullable(icon),
+                            _c)), ref: _this.contentRef, "data-tid": MenuItemDataTids.content }, typeof content === 'function' ? content() : content),
+                    comment && (React.createElement("div", { "data-tid": MenuItemDataTids.comment, className: cx((_d = {},
+                            _d[styles.comment(_this.theme)] = true,
+                            _d[styles.commentHover(_this.theme)] = _this.isHover,
+                            _d)) }, comment)))));
+        };
+        // https://github.com/facebook/react/issues/10109
+        // Mouseenter event not triggered when cursor moves from disabled button
+        _this.handleMouseEnterFix = function (e) {
+            var _a, _b, _c;
+            if (!_this.mouseEntered) {
+                _this.mouseEntered = true;
+                (_b = (_a = _this.props).onMouseEnter) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+                !_this.props.isNotSelectable && ((_c = _this.context.navigation) === null || _c === void 0 ? void 0 : _c.highlight(_this));
+            }
+        };
+        _this.handleMouseLeave = function (e) {
+            var _a, _b, _c;
+            _this.mouseEntered = false;
+            (_b = (_a = _this.props).onMouseLeave) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            !_this.props.isNotSelectable && ((_c = _this.context.navigation) === null || _c === void 0 ? void 0 : _c.unhighlight());
+        };
+        _this.handleClick = function (e) {
+            var _a, _b, _c, _d;
+            if (_this.props.isNotSelectable) {
+                return;
+            }
+            (_b = (_a = _this.props).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e);
+            (_d = (_c = _this.context).onItemClick) === null || _d === void 0 ? void 0 : _d.call(_c, e);
+        };
+        _this.setRootRef = function (element) {
+            _this.rootRef = element;
+        };
+        _this.getComponent = function () {
+            var _a = _this.props, disabled = _a.disabled, component = _a.component, href = _a.href;
+            if (component) {
+                return component;
+            }
+            if (disabled) {
+                return 'button';
+            }
+            if (href) {
+                return 'a';
+            }
+            return 'button';
+        };
+        _this.hasIconAmongItems = function () {
+            var _a;
+            return Boolean((_a = _this.context.navigation) === null || _a === void 0 ? void 0 : _a.items.some(function (item) { return item.props.icon; }));
+        };
+        return _this;
+    }
+    MenuItem.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    MenuItem.prototype.componentDidMount = function () {
+        var _a, _b, _c;
+        if (this.props.scrollIntoView && this.rootRef) {
+            scrollYCenterIntoNearestScrollable(this.rootRef);
+        }
+        if (this.rootRef && isBrowser(globalObject)) {
+            this.setState({ iconOffsetTop: globalObject.getComputedStyle(this.rootRef).getPropertyValue('padding-top') });
+        }
+        if (this.contentRef.current && !this.props.isNotSelectable) {
+            (_a = this.context.navigation) === null || _a === void 0 ? void 0 : _a.add(this.contentRef.current, this);
+        }
+        if (this.props.icon) {
+            (_c = (_b = this.context).setEnableIconPadding) === null || _c === void 0 ? void 0 : _c.call(_b, true);
+        }
+    };
+    MenuItem.prototype.componentWillUnmount = function () {
+        var _a, _b, _c;
+        if (this.contentRef.current) {
+            !this.props.isNotSelectable && ((_a = this.context.navigation) === null || _a === void 0 ? void 0 : _a.remove(this.contentRef.current));
+            (_c = (_b = this.context).setEnableIconPadding) === null || _c === void 0 ? void 0 : _c.call(_b, this.hasIconAmongItems());
+        }
+    };
+    MenuItem.prototype.componentDidUpdate = function (prevProps) {
+        var _a, _b, _c, _d;
+        if (prevProps.icon !== this.props.icon) {
+            (_b = (_a = this.context).setEnableIconPadding) === null || _b === void 0 ? void 0 : _b.call(_a, !!this.props.icon || this.hasIconAmongItems());
+        }
+        if (this.contentRef.current && prevProps.isNotSelectable !== this.props.isNotSelectable) {
+            if (this.props.isNotSelectable) {
+                this.unhighlight();
+                (_c = this.context.navigation) === null || _c === void 0 ? void 0 : _c.remove(this.contentRef.current);
+            }
+            else {
+                (_d = this.context.navigation) === null || _d === void 0 ? void 0 : _d.add(this.contentRef.current, this);
+            }
+        }
+    };
+    MenuItem.prototype.getRootSizeClassName = function () {
+        switch (this.props.size) {
+            case 'large':
+                return styles.rootLarge(this.theme);
+            case 'medium':
+                return styles.rootMedium(this.theme);
+            case 'small':
+            default:
+                return styles.rootSmall(this.theme);
+        }
+    };
+    MenuItem.prototype.getIconSizeClassName = function () {
+        switch (this.props.size) {
+            case 'large':
+                return styles.iconLarge(this.theme);
+            case 'medium':
+                return styles.iconMedium(this.theme);
+            case 'small':
+            default:
+                return styles.iconSmall(this.theme);
+        }
+    };
+    MenuItem.prototype.getWithIconSizeClassName = function () {
+        switch (this.props.size) {
+            case 'large':
+                return styles.withIconLarge(this.theme);
+            case 'medium':
+                return styles.withIconMedium(this.theme);
+            case 'small':
+            default:
+                return styles.withIconSmall(this.theme);
+        }
+    };
+    Object.defineProperty(MenuItem.prototype, "activeState", {
+        get: function () {
+            return this.state.highlighted ? 'hover' : this.props.state;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MenuItem.prototype, "isHover", {
+        get: function () {
+            return (this.state.highlighted || this.props.state === 'hover') && !this.props.disabled;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(MenuItem.prototype, "isSelected", {
+        get: function () {
+            return this.props.state === 'selected' && !this.state.highlighted;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    MenuItem.__KONTUR_REACT_UI__ = 'MenuItem';
+    MenuItem.displayName = 'MenuItem';
+    MenuItem.__MENU_ITEM__ = true;
+    MenuItem.contextType = MenuContext;
+    MenuItem = __decorate([
+        rootNode
+    ], MenuItem);
+    return MenuItem;
+}(React.Component));
+export { MenuItem };
+export var isMenuItem = isReactUIComponent('MenuItem');
+//# sourceMappingURL=MenuItem.js.map

package/components/MenuItem/MenuItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../components/MenuItem/MenuItem.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+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.mixins.js

@@ -0,0 +1,21 @@
+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 } from '../../lib/theming/Emotion.js';
+import { getMenuItemPaddings } from './MenuItem.styles.js';
+export var menuItemSizeMixin = function (menuItemPaddingX, menuItemPaddingY, menuItemLineHeight, menuItemFontSize) {
+    var _a = getMenuItemPaddings({
+        menuItemPaddingX: menuItemPaddingX,
+        menuItemPaddingY: menuItemPaddingY,
+    }), paddingX = _a.paddingX, paddingY = _a.paddingY;
+    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    line-height: ", ";\n    font-size: ", ";\n    padding: ", " ", " ", " ", ";\n  "], ["\n    line-height: ", ";\n    font-size: ", ";\n    padding: ", " ", " ", " ", ";\n  "])), menuItemLineHeight, menuItemFontSize, menuItemPaddingY, paddingX, paddingY, menuItemPaddingX);
+};
+export var iconSizeMixin = function (menuItemIconWidth, menuItemPaddingX) {
+    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    width: ", ";\n    left: ", "px;\n  "], ["\n    width: ", ";\n    left: ", "px;\n  "])), menuItemIconWidth, parseInt(menuItemPaddingX));
+};
+export var withIconSizeMixin = function (menuItemPaddingForIcon) {
+    return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding-left: ", ";\n  "], ["\n    padding-left: ", ";\n  "])), menuItemPaddingForIcon);
+};
+var templateObject_1, templateObject_2, templateObject_3;
+//# sourceMappingURL=MenuItem.mixins.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItem.mixins.js","sourceRoot":"","sources":["../../../components/MenuItem/MenuItem.mixins.ts"],"names":[],"mappings":";;;;AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,8BAA8B,CAAC;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAC/B,gBAAwB,EACxB,gBAAwB,EACxB,kBAA0B,EAC1B,gBAAwB;IAElB,IAAA,KAAyB,mBAAmB,CAAC;QACjD,gBAAgB,kBAAA;QAChB,gBAAgB,kBAAA;KACjB,CAAC,EAHM,QAAQ,cAAA,EAAE,QAAQ,cAGxB,CAAC;IAEH,OAAO,GAAG,0JAAA,qBACO,EAAkB,oBACpB,EAAgB,kBAClB,EAAgB,GAAI,EAAQ,GAAI,EAAQ,GAAI,EAAgB,OACxE,KAHgB,kBAAkB,EACpB,gBAAgB,EAClB,gBAAgB,EAAI,QAAQ,EAAI,QAAQ,EAAI,gBAAgB,EACvE;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,iBAAyB,EAAE,gBAAwB;IAC/E,OAAO,GAAG,8GAAA,eACC,EAAiB,eAClB,EAA0B,SACnC,KAFU,iBAAiB,EAClB,QAAQ,CAAC,gBAAgB,CAAC,EAClC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,sBAA8B;IAC9D,OAAO,GAAG,kGAAA,sBACQ,EAAsB,OACvC,KADiB,sBAAsB,EACtC;AACJ,CAAC,CAAC"}

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

@@ -1,12 +1,28 @@
-export declare const jsStyles: {
-    root(): string;
-    hover(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    selected(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    disabled(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    link(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    loose(): string;
-    withIcon(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    comment(): string;
-    commentHover(): string;
-    icon(): 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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"}

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"}

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

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