@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/components/MenuItem/MenuItem.js

@@ -1,107 +1,299 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var PropTypes = tslib_1.__importStar(require("prop-types"));
-var warning_1 = tslib_1.__importDefault(require("warning"));
-var utils_1 = require("../../lib/utils");
-var MenuItem_module_less_1 = tslib_1.__importDefault(require("./MenuItem.module.css"));
-var Emotion_1 = require("../../lib/theming/Emotion");
-var MenuItem_styles_1 = tslib_1.__importDefault(require("./MenuItem.styles"));
-var ThemeConsumer_1 = require("../ThemeConsumer");
-/**
- * Элемент меню.
+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 { isBrowser } from '../../lib/globalObject.js';
+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 { rootNode } from '../../lib/rootNode/index.js';
+import { MenuContext } from '../../internal/Menu/MenuContext.js';
+import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } 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) {
-  tslib_1.__extends(MenuItem, _super);
-  function MenuItem() {
-    var _this = _super !== null && _super.apply(this, arguments) || this;
-    _this.mouseEntered = false;
-    // https://github.com/facebook/react/issues/10109
-    // Mouseenter event not triggered when cursor moves from disabled button
-    _this.handleMouseEnterFix = function (e) {
-      if (!_this.mouseEntered && _this.props.onMouseEnter) {
-        _this.mouseEntered = true;
-        _this.props.onMouseEnter(e);
-      }
+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 () {
+            var _a, _b;
+            if (!_this.props.href) {
+                return;
+            }
+            if (_this.props.target) {
+                (_b = (_a = _this.globalObject).open) === null || _b === void 0 ? void 0 : _b.call(_a, _this.props.href, _this.props.target);
+            }
+            else if (_this.globalObject.location) {
+                _this.globalObject.location.href = _this.props.href;
+            }
+        };
+        _this.renderMain = function () {
+            var _a, _b, _c, _d;
+            var _e = _this.props, 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, _this.globalObject) ? '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, ["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: _this.cx((_a = {},
+                        _a[_this.styles.icon()] = true,
+                        _a[_this.getIconSizeClassName()] = true,
+                        _a)) }, icon));
+            }
+            var className = _this.cx((_b = {},
+                _b[_this.styles.root(_this.theme)] = true,
+                _b[_this.getRootSizeClassName()] = true,
+                _b[_this.styles.rootMobile(_this.theme)] = isMobile,
+                _b[_this.styles.loose()] = !!loose,
+                _b[_this.styles.hover(_this.theme)] = _this.isHover,
+                _b[_this.styles.selected(_this.theme)] = _this.isSelected,
+                _b[_this.getWithIconSizeClassName()] = Boolean(iconElement) || !!_enableIconPadding || _this.context.enableIconPadding,
+                _b[_this.styles.nonSelectable()] = !!isNotSelectable,
+                _b[_this.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: _this.cx((_c = {},
+                            _c[_this.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: _this.cx((_d = {},
+                            _d[_this.styles.comment(_this.theme)] = true,
+                            _d[_this.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;
+        this.styles = getStyles(this.emotion);
+        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(this.globalObject)) {
+            this.setState({
+                iconOffsetTop: this.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());
+        }
     };
-    _this.handleMouseLeave = function (e) {
-      _this.mouseEntered = false;
-      if (_this.props.onMouseLeave) {
-        _this.props.onMouseLeave(e);
-      }
+    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);
+            }
+        }
     };
-    _this.getComponent = function () {
-      var _a = _this.props,disabled = _a.disabled,component = _a.component,href = _a.href;
-      if (disabled) {
-        return 'button';
-      }
-      if (component) {
-        return component;
-      }
-      if (href) {
-        return 'a';
-      }
-      return 'button';
+    MenuItem.prototype.getRootSizeClassName = function () {
+        switch (this.props.size) {
+            case 'large':
+                return this.styles.rootLarge(this.theme);
+            case 'medium':
+                return this.styles.rootMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.rootSmall(this.theme);
+        }
     };
-    return _this;
-  }
-  MenuItem.prototype.render = function () {
-    var _this = this;
-    return React.createElement(ThemeConsumer_1.ThemeConsumer, null, function (theme) {
-      _this.theme = theme;
-      return _this.renderMain();
+    MenuItem.prototype.getIconSizeClassName = function () {
+        switch (this.props.size) {
+            case 'large':
+                return this.styles.iconLarge(this.theme);
+            case 'medium':
+                return this.styles.iconMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.iconSmall(this.theme);
+        }
+    };
+    MenuItem.prototype.getWithIconSizeClassName = function () {
+        switch (this.props.size) {
+            case 'large':
+                return this.styles.withIconLarge(this.theme);
+            case 'medium':
+                return this.styles.withIconMedium(this.theme);
+            case 'small':
+            default:
+                return this.styles.withIconSmall(this.theme);
+        }
+    };
+    Object.defineProperty(MenuItem.prototype, "activeState", {
+        get: function () {
+            return this.state.highlighted ? 'hover' : this.props.state;
+        },
+        enumerable: false,
+        configurable: true
     });
-  };
-  MenuItem.prototype.renderMain = function () {
-    var _a, _b;
-    var _c = this.props,alkoLink = _c.alkoLink,link = _c.link,comment = _c.comment,icon = _c.icon,loose = _c.loose,state = _c.state,children = _c.children,_enableIconPadding = _c._enableIconPadding,component = _c.component,onMouseEnter = _c.onMouseEnter,onMouseLeave = _c.onMouseLeave,rest = tslib_1.__rest(_c, ["alkoLink", "link", "comment", "icon", "loose", "state", "children", "_enableIconPadding", "component", "onMouseEnter", "onMouseLeave"]);
-    warning_1["default"](alkoLink === undefined, "[MenuItem]: Prop 'alkoLink' was deprecated please use 'link' instead");
-    var hover = state === 'hover' && !this.props.disabled;
-    var iconElement = null;
-    if (icon) {
-      iconElement = React.createElement("div", { className: MenuItem_module_less_1["default"].icon }, icon);
-    }
-    var className = Emotion_1.cx((_a = {},
-    _a[MenuItem_module_less_1["default"].root] = true,
-    _a[MenuItem_styles_1["default"].root(this.theme)] = true,
-    _a[MenuItem_module_less_1["default"].disabled] = !!this.props.disabled,
-    _a[MenuItem_module_less_1["default"].loose] = !!loose,
-    _a[MenuItem_styles_1["default"].hover(this.theme)] = hover,
-    _a[MenuItem_styles_1["default"].selected(this.theme)] = state === 'selected',
-    _a[MenuItem_styles_1["default"].link(this.theme)] = !!link || !!alkoLink,
-    _a[MenuItem_styles_1["default"].withIcon(this.theme)] = Boolean(iconElement) || !!_enableIconPadding,
-    _a[MenuItem_styles_1["default"].disabled(this.theme)] = !!this.props.disabled,
-    _a));
-    var content = children;
-    if (utils_1.isFunction(children)) {
-      content = children(this.props.state);
-    }
-    var Component = this.getComponent();
-    return React.createElement(Component, tslib_1.__assign({}, rest, { state: state, onMouseOver: this.handleMouseEnterFix, onMouseLeave: this.handleMouseLeave, className: className, tabIndex: -1 }),
-    iconElement,
-    content,
-    this.props.comment && React.createElement("div", { className: Emotion_1.cx((_b = {},
-      _b[MenuItem_module_less_1["default"].comment] = true,
-      _b[MenuItem_module_less_1["default"].commentHover] = hover,
-      _b)) }, comment));
-  };
-  MenuItem.__KONTUR_REACT_UI__ = 'MenuItem';
-  MenuItem.__MENU_ITEM__ = true;
-  MenuItem.propTypes = {
-    alkoLink: PropTypes.bool,
-    comment: PropTypes.node,
-    disabled: PropTypes.bool,
-    href: PropTypes.string,
-    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    loose: PropTypes.bool,
-    state: PropTypes.string,
-    target: PropTypes.string,
-    onClick: PropTypes.func };
-
-  return MenuItem;
-}(React.Component);
-exports["default"] = MenuItem;
-exports.isMenuItem = function (child) {
-  return React.isValidElement(child) ? child.type.hasOwnProperty('__MENU_ITEM__') : false;
-};
+    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([
+        withRenderEnvironment,
+        rootNode
+    ], MenuItem);
+    return MenuItem;
+}(React.Component));
+export { MenuItem };
+export var isMenuItem = isReactUIComponent('MenuItem');
+//# sourceMappingURL=MenuItem.js.map

package/components/MenuItem/MenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["MenuItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"MenuItem.js","sourceRoot":"","sources":["../../../components/MenuItem/MenuItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes, HTMLAttributes } from 'react';\nimport React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isBrowser } from '../../lib/globalObject.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { scrollYCenterIntoNearestScrollable } from '../../lib/dom/scrollYCenterIntoNearestScrollable.js';\nimport { isExternalLink, isFunction, isNonNullable, isReactUIComponent } from '../../lib/utils.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport type { SizeProp } from '../../lib/types/props.js';\nimport type { MenuContextType } from '../../internal/Menu/MenuContext.js';\nimport { MenuContext } from '../../internal/Menu/MenuContext.js';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles } from './MenuItem.styles.js';\n\nexport type MenuItemState = null | 'hover' | 'selected' | void;\n\nexport interface MenuItemProps\n  extends Pick<AriaAttributes, 'aria-describedby' | 'aria-label'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    Omit<CommonProps, 'children'> {\n  /** Добавляет отступ иконке.\n   * @ignore */\n  _enableIconPadding?: boolean;\n\n  /** Добавляет описание для элемента меню. */\n  comment?: React.ReactNode;\n\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Добавляет иконку элементу меню. */\n  icon?: React.ReactElement;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** @ignore */\n  loose?: boolean;\n\n  /** @ignore */\n  state?: MenuItemState;\n\n  /** Задает функцию, которая вызывается при клике. */\n  onClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n\n  /** Задает функцию, которая вызывается при наведении мышкой (событие `onmouseenter`). */\n  onMouseEnter?: React.MouseEventHandler;\n\n  /** Задает функцию, которая вызывается при уходе мышки с объекта (событие `onmouseleave`). */\n  onMouseLeave?: React.MouseEventHandler;\n\n  /** @ignore */\n  children?: React.ReactNode | ((state: MenuItemState) => React.ReactNode);\n\n  /** Задает HTML-атрибут `target`. */\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];\n\n  /** Задает HTML-атрибут `title`. */\n  title?: React.AnchorHTMLAttributes<HTMLAnchorElement>['title'];\n\n  /** Задает HTML-атрибут `href` - адрес, на который следует перейти. */\n  href?: React.AnchorHTMLAttributes<HTMLAnchorElement>['href'];\n\n  /** Задает HTML-атрибут `rel`. Для внешних ссылок аттрибут rel по умолчанию равен \"noopener noreferrer\". */\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];\n\n  /** Заменяет корневой элемент, на компонент переданный в проп.\n   * По умолчанию корневой элемент рендерится как `button`. <br />Если передан `href`, то вместо `button` рендерится `a`. */\n  component?: React.ComponentType<any>;\n\n  /** Запрещает выделение и выбор данного пункта меню. */\n  isNotSelectable?: boolean;\n\n  /** Устанавливает стиль для отображения в мобильной версии. */\n  isMobile?: boolean;\n  /** @ignore */\n  scrollIntoView?: boolean;\n}\n\nexport const MenuItemDataTids = {\n  root: 'MenuItem__root',\n  content: 'MenuItem__content',\n  comment: 'MenuItem__comment',\n} as const;\n\n/**\n * `MenuItem` - это вложенный компонент, задающий базовые стили для элемента меню и позволяющий навигироваться по элементам меню с помощью клавиатуры.\n *\n * Сущности в которых может быть использован `MenuItem`: DropdownMenu, Kebab, TooltipMenu и Select.\n */\n@withRenderEnvironment\n@rootNode\nexport class MenuItem extends React.Component<MenuItemProps> {\n  public static __KONTUR_REACT_UI__ = 'MenuItem';\n  public static displayName = 'MenuItem';\n  public static __MENU_ITEM__ = true;\n\n  public state = {\n    iconOffsetTop: 0,\n    highlighted: false,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\n  private theme!: Theme;\n  private mouseEntered = false;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private rootRef: Nullable<HTMLElement> = null;\n  private contentRef = React.createRef<HTMLElement>();\n  static contextType = MenuContext;\n\n  public context!: MenuContextType;\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  public componentDidMount() {\n    if (this.props.scrollIntoView && this.rootRef) {\n      scrollYCenterIntoNearestScrollable(this.rootRef);\n    }\n    if (this.rootRef && isBrowser(this.globalObject)) {\n      this.setState({\n        iconOffsetTop: this.globalObject.getComputedStyle(this.rootRef).getPropertyValue('padding-top'),\n      });\n    }\n    if (this.contentRef.current && !this.props.isNotSelectable) {\n      this.context.navigation?.add(this.contentRef.current, this);\n    }\n    if (this.props.icon) {\n      this.context.setEnableIconPadding?.(true);\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.contentRef.current) {\n      !this.props.isNotSelectable && this.context.navigation?.remove(this.contentRef.current);\n      this.context.setEnableIconPadding?.(this.hasIconAmongItems());\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<MenuItemProps>) {\n    if (prevProps.icon !== this.props.icon) {\n      this.context.setEnableIconPadding?.(!!this.props.icon || this.hasIconAmongItems());\n    }\n    if (this.contentRef.current && prevProps.isNotSelectable !== this.props.isNotSelectable) {\n      if (this.props.isNotSelectable) {\n        this.unhighlight();\n        this.context.navigation?.remove(this.contentRef.current);\n      } else {\n        this.context.navigation?.add(this.contentRef.current, this);\n      }\n    }\n  }\n\n  public highlight = (): void => {\n    this.setState({ highlighted: true });\n  };\n\n  public unhighlight = (): void => {\n    this.setState({ highlighted: false });\n  };\n\n  public select = (event: React.SyntheticEvent<HTMLElement>): void => {\n    this.handleClick(event as React.MouseEvent<HTMLElement>);\n  };\n\n  public isEnabled = (): boolean => {\n    return !this.props.disabled;\n  };\n\n  public navigate = (): void => {\n    if (!this.props.href) {\n      return;\n    }\n    if (this.props.target) {\n      this.globalObject.open?.(this.props.href, this.props.target);\n    } else if (this.globalObject.location) {\n      this.globalObject.location.href = this.props.href;\n    }\n  };\n\n  private getRootSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return this.styles.rootLarge(this.theme);\n      case 'medium':\n        return this.styles.rootMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.rootSmall(this.theme);\n    }\n  }\n\n  private getIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return this.styles.iconLarge(this.theme);\n      case 'medium':\n        return this.styles.iconMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.iconSmall(this.theme);\n    }\n  }\n\n  private getWithIconSizeClassName() {\n    switch (this.props.size) {\n      case 'large':\n        return this.styles.withIconLarge(this.theme);\n      case 'medium':\n        return this.styles.withIconMedium(this.theme);\n      case 'small':\n      default:\n        return this.styles.withIconSmall(this.theme);\n    }\n  }\n\n  private renderMain = () => {\n    const {\n      comment,\n      icon,\n      loose,\n      state,\n      size,\n      _enableIconPadding,\n      component,\n      onMouseEnter,\n      onMouseLeave,\n      isMobile,\n      href,\n      disabled,\n      scrollIntoView,\n      rel = href && isExternalLink(href, this.globalObject) ? 'noopener noreferrer' : this.props.rel,\n      isNotSelectable,\n      children,\n      className: unusedClasses,\n      style,\n      'data-tid': dataTid,\n      ...rest\n    } = this.props;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = (\n        <div\n          style={{ top: this.state.iconOffsetTop }}\n          className={this.cx({\n            [this.styles.icon()]: true,\n            [this.getIconSizeClassName()]: true,\n          })}\n        >\n          {icon}\n        </div>\n      );\n    }\n\n    const className = this.cx({\n      [this.styles.root(this.theme)]: true,\n      [this.getRootSizeClassName()]: true,\n      [this.styles.rootMobile(this.theme)]: isMobile,\n      [this.styles.loose()]: !!loose,\n      [this.styles.hover(this.theme)]: this.isHover,\n      [this.styles.selected(this.theme)]: this.isSelected,\n      [this.getWithIconSizeClassName()]: Boolean(iconElement) || !!_enableIconPadding || this.context.enableIconPadding,\n      [this.styles.nonSelectable()]: !!isNotSelectable,\n      [this.styles.disabled(this.theme)]: !!disabled,\n    });\n\n    let content = children;\n    if (isFunction(children)) {\n      content = children(this.activeState);\n    }\n\n    const Component = this.getComponent();\n\n    return (\n      <CommonWrapper\n        rootNodeRef={this.setRootNode}\n        {...getVisualStateDataAttributes({\n          hover: this.isHover,\n          selected: this.isSelected,\n        })}\n        {...this.props}\n      >\n        <Component\n          ref={this.setRootRef}\n          data-tid={MenuItemDataTids.root}\n          {...rest}\n          disabled={disabled}\n          state={this.activeState}\n          onMouseOver={this.handleMouseEnterFix}\n          onMouseLeave={this.handleMouseLeave}\n          onClick={this.handleClick}\n          className={className}\n          href={href}\n          rel={href ? rel : undefined}\n          tabIndex={-1}\n        >\n          {iconElement}\n          <span\n            className={this.cx({\n              [this.styles.mobileContentWithIcon()]: isMobile && isNonNullable(icon),\n            })}\n            ref={this.contentRef}\n            data-tid={MenuItemDataTids.content}\n          >\n            {typeof content === 'function' ? content() : content}\n          </span>\n          {comment && (\n            <div\n              data-tid={MenuItemDataTids.comment}\n              className={this.cx({\n                [this.styles.comment(this.theme)]: true,\n                [this.styles.commentHover(this.theme)]: this.isHover,\n              })}\n            >\n              {comment}\n            </div>\n          )}\n        </Component>\n      </CommonWrapper>\n    );\n  };\n\n  private get activeState() {\n    return this.state.highlighted ? 'hover' : this.props.state;\n  }\n\n  private get isHover(): boolean {\n    return (this.state.highlighted || this.props.state === 'hover') && !this.props.disabled;\n  }\n\n  private get isSelected(): boolean {\n    return this.props.state === 'selected' && !this.state.highlighted;\n  }\n\n  // https://github.com/facebook/react/issues/10109\n  // Mouseenter event not triggered when cursor moves from disabled button\n  private handleMouseEnterFix = (e: React.MouseEvent<HTMLElement>) => {\n    if (!this.mouseEntered) {\n      this.mouseEntered = true;\n      this.props.onMouseEnter?.(e);\n      !this.props.isNotSelectable && this.context.navigation?.highlight(this);\n    }\n  };\n\n  private handleMouseLeave = (e: React.MouseEvent<HTMLElement>) => {\n    this.mouseEntered = false;\n    this.props.onMouseLeave?.(e);\n    !this.props.isNotSelectable && this.context.navigation?.unhighlight();\n  };\n\n  private handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (this.props.isNotSelectable) {\n      return;\n    }\n    this.props.onClick?.(e);\n    this.context.onItemClick?.(e);\n  };\n\n  private setRootRef = (element: HTMLElement) => {\n    this.rootRef = element;\n  };\n\n  private getComponent = () => {\n    const { disabled, component, href } = this.props;\n\n    if (component) {\n      return component;\n    }\n\n    if (disabled) {\n      return 'button';\n    }\n\n    if (href) {\n      return 'a';\n    }\n\n    return 'button';\n  };\n\n  private hasIconAmongItems = () => {\n    return Boolean(this.context.navigation?.items.some((item) => item.props.icon));\n  };\n}\n\nexport const isMenuItem = isReactUIComponent('MenuItem');\n"]}

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,15 @@
+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 "\n    line-height: ".concat(menuItemLineHeight, ";\n    font-size: ").concat(menuItemFontSize, ";\n    padding: ").concat(menuItemPaddingY, " ").concat(paddingX, " ").concat(paddingY, " ").concat(menuItemPaddingX, ";\n  ");
+};
+export var iconSizeMixin = function (menuItemIconWidth, menuItemPaddingX) {
+    return "\n    width: ".concat(menuItemIconWidth, ";\n    left: ").concat(parseInt(menuItemPaddingX), "px;\n  ");
+};
+export var withIconSizeMixin = function (menuItemPaddingForIcon) {
+    return "\n    padding-left: ".concat(menuItemPaddingForIcon, ";\n  ");
+};
+//# 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,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,6BACU,kBAAkB,+BACpB,gBAAgB,6BAClB,gBAAgB,cAAI,QAAQ,cAAI,QAAQ,cAAI,gBAAgB,UACxE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,iBAAyB,EAAE,gBAAwB;IAC/E,OAAO,uBACI,iBAAiB,0BAClB,QAAQ,CAAC,gBAAgB,CAAC,YACnC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,iBAAiB,GAAG,UAAC,sBAA8B;IAC9D,OAAO,8BACW,sBAAsB,UACvC,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { getMenuItemPaddings } from './MenuItem.styles.js';\n\nexport const menuItemSizeMixin = (\n  menuItemPaddingX: string,\n  menuItemPaddingY: string,\n  menuItemLineHeight: string,\n  menuItemFontSize: string,\n): string => {\n  const { paddingX, paddingY } = getMenuItemPaddings({\n    menuItemPaddingX,\n    menuItemPaddingY,\n  });\n\n  return `\n    line-height: ${menuItemLineHeight};\n    font-size: ${menuItemFontSize};\n    padding: ${menuItemPaddingY} ${paddingX} ${paddingY} ${menuItemPaddingX};\n  `;\n};\n\nexport const iconSizeMixin = (menuItemIconWidth: string, menuItemPaddingX: string): string => {\n  return `\n    width: ${menuItemIconWidth};\n    left: ${parseInt(menuItemPaddingX)}px;\n  `;\n};\n\nexport const withIconSizeMixin = (menuItemPaddingForIcon: string): string => {\n  return `\n    padding-left: ${menuItemPaddingForIcon};\n  `;\n};\n"]}

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

@@ -1,10 +1,24 @@
-import { ITheme } from '../../lib/theming/Theme';
-declare const jsStyles: {
-    root(t: ITheme): string;
-    hover(t: ITheme): string;
-    selected(t: ITheme): string;
-    disabled(t: ITheme): string;
-    link(t: ITheme): string;
-    withIcon(t: ITheme): string;
-};
-export default jsStyles;
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const getMenuItemPaddings: ({ menuItemPaddingX, menuItemPaddingY, }: Record<"menuItemPaddingX" | "menuItemPaddingY", string>) => Record<"paddingX" | "paddingY", string>;
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    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;
+    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;
+}>;