@skbkontur/react-ui 0.0.0-8ea1692541 → 0.0.0-942b5aade9

package/cjs/internal/InternalMenu/InternalMenu.js

@@ -1,5 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.InternalMenuDataTids = exports.InternalMenu = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
+var _decorator = require("../../components/ResponsiveLayout/decorator");
 var _SSRSafe = require("../../lib/SSRSafe");
 var _utils = require("../../lib/utils");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -12,10 +13,18 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode2 = require("../../lib/rootNode");
 var _getDOMRect = require("../../lib/dom/getDOMRect");
+var _MenuSeparator = require("../../components/MenuSeparator");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 
 var _InternalMenu = require("./InternalMenu.styles");
 var _isActiveElement = require("./isActiveElement");
-var _addIconPaddingIfPartOfMenu = require("./addIconPaddingIfPartOfMenu");var _class, _class2, _temp;
+var _addIconPaddingIfPartOfMenu = require("./addIconPaddingIfPartOfMenu");
+var _isIconPaddingEnabled = require("./isIconPaddingEnabled");var _class, _class2, _temp;
+
+
+
+
+
 
 
 
@@ -57,7 +66,8 @@ var InternalMenuDataTids = {
 
 
 
-InternalMenu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(InternalMenu, _React$PureComponent);function InternalMenu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
+
+InternalMenu = (0, _decorator.responsiveLayout)(_class = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(InternalMenu, _React$PureComponent);function InternalMenu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
 
 
 
@@ -197,13 +207,16 @@ InternalMenu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
     renderHeader = function () {var _cx;
       return /*#__PURE__*/(
         _react.default.createElement("div", {
-          ref: function ref(el) {return _this.header = el;},
           className: (0, _Emotion.cx)((_cx = {}, _cx[
-          _InternalMenu.styles.header()] = true, _cx[
-          _InternalMenu.styles.fixedHeader()] = _this.state.scrollState !== 'top', _cx)) },
+          _InternalMenu.styles.wrapper()] = true, _cx[
+          _InternalMenu.styles.headerWrapper()] = true, _cx)),
+
+          ref: function ref(el) {return _this.header = el;} }, /*#__PURE__*/
 
+        _react.default.createElement("div", { className: _InternalMenu.styles.contentWrapper() }, _this.props.header), /*#__PURE__*/
+        _react.default.createElement("div", { className: _InternalMenu.styles.menuSeparatorWrapper(_this.theme) },
+        _this.state.scrollState !== 'top' && _this.renderMenuSeparatorWithNoMargin())));
 
-        _this.props.header));
 
 
     };_this.
@@ -211,13 +224,24 @@ InternalMenu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
     renderFooter = function () {var _cx2;
       return /*#__PURE__*/(
         _react.default.createElement("div", {
-          ref: function ref(el) {return _this.footer = el;},
           className: (0, _Emotion.cx)((_cx2 = {}, _cx2[
-          _InternalMenu.styles.footer()] = true, _cx2[
-          _InternalMenu.styles.fixedFooter()] = _this.state.scrollState !== 'bottom', _cx2)) },
+          _InternalMenu.styles.wrapper()] = true, _cx2[
+          _InternalMenu.styles.footerWrapper()] = true, _cx2)),
 
+          ref: function ref(el) {return _this.footer = el;} }, /*#__PURE__*/
 
-        _this.props.footer));
+        _react.default.createElement("div", { className: _InternalMenu.styles.menuSeparatorWrapper(_this.theme) },
+        _this.state.scrollState !== 'bottom' && _this.renderMenuSeparatorWithNoMargin()), /*#__PURE__*/
+
+        _react.default.createElement("div", { className: _InternalMenu.styles.contentWrapper() }, _this.props.footer)));
+
+
+    };_this.
+
+    renderMenuSeparatorWithNoMargin = function () {
+      return /*#__PURE__*/(
+        _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ menuSeparatorMarginY: '0' }, _this.theme) }, /*#__PURE__*/
+        _react.default.createElement(_MenuSeparator.MenuSeparator, null)));
 
 
     };_this.
@@ -250,8 +274,8 @@ InternalMenu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       var parsedMaxHeight = maxHeight;
       var rootNode = (0, _rootNode2.getRootNode)((0, _assertThisInitialized2.default)(_this));
 
-      if (typeof maxHeight === 'string' && typeof window !== 'undefined' && rootNode) {
-        var rootElementMaxHeight = window.getComputedStyle(rootNode).maxHeight;
+      if (typeof maxHeight === 'string' && typeof _SSRSafe.globalThat !== 'undefined' && rootNode) {
+        var rootElementMaxHeight = _SSRSafe.globalThat.getComputedStyle(rootNode).maxHeight;
 
         if (rootElementMaxHeight) {
           parsedMaxHeight = parseFloat(rootElementMaxHeight);
@@ -410,8 +434,8 @@ InternalMenu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       if (_this.state.scrollState !== scrollState) {
         _this.setState({ scrollState: scrollState });
       }
-    };return _this;}var _proto = InternalMenu.prototype;_proto.componentDidMount = function componentDidMount() {this.setInitialSelection();this.calculateMaxHeight();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.shouldRecalculateMaxHeight(prevProps)) {this.calculateMaxHeight();}if (prevProps.maxHeight !== this.getProps().maxHeight) {this.setState({ maxHeight: this.props.maxHeight || 'none' });}};_proto.focus = function focus() {this.focusOnRootElement();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx3,_this3 = this;var enableIconPadding = _react.default.Children.toArray(this.props.children).some(function (x) {return /*#__PURE__*/_react.default.isValidElement(x) && x.props.icon;});if (this.isEmpty()) {return null;}var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,width = _this$getProps.width,maxHeight = _this$getProps.maxHeight,preventWindowScroll = _this$getProps.preventWindowScroll;return /*#__PURE__*/_react.default.createElement("div", { "data-tid": InternalMenuDataTids.root, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_InternalMenu.styles.root(this.theme)] = true, _cx3[_InternalMenu.styles.shadow(this.theme)] = hasShadow, _cx3)), style: { width: width, maxHeight: this.state.maxHeight }, onKeyDown: this.handleKeyDown, ref: this.setRootNode, tabIndex: 0 }, this.props.header ? this.renderHeader() : null, /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: maxHeight, preventWindowScroll: preventWindowScroll, onScrollStateChange: this.handleScrollStateChange }, _react.default.Children.map(this.props.children, function (child, index) {if (typeof child === 'string' || typeof child === 'number' || (0, _utils.isNullable)(child)) {return child;}if ( /*#__PURE__*/_react.default.isValidElement(child) && typeof child.type === 'string') {return child;}var modifiedChild = (0, _addIconPaddingIfPartOfMenu.addIconPaddingIfPartOfMenu)(child, enableIconPadding);if ((0, _isActiveElement.isActiveElement)(modifiedChild)) {var highlight = _this3.state.highlightedIndex === index;var ref = modifiedChild.ref;var originalRef = ref;if (highlight) {ref = function ref(menuItem) {return _this3.refHighlighted(originalRef, menuItem);};}return /*#__PURE__*/_react.default.cloneElement(modifiedChild, { ref: ref, state: highlight ? 'hover' : modifiedChild.props.state, onClick: _this3.select.bind(_this3, index, false), onMouseEnter: function onMouseEnter(event) {_this3.highlightItem(index);if ((0, _MenuItem.isMenuItem)(modifiedChild) && modifiedChild.props.onMouseEnter) {modifiedChild.props.onMouseEnter(event);}}, onMouseLeave: function onMouseLeave(event) {_this3.unhighlight();if ((0, _MenuItem.isMenuItem)(modifiedChild) && modifiedChild.props.onMouseLeave) {modifiedChild.props.onMouseLeave(event);}} });}return modifiedChild;})), this.props.footer ? this.renderFooter() : null);};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (!originalRef || typeof originalRef === 'string') {return;}if (typeof originalRef === 'function') {originalRef(menuItem);} else if (typeof originalRef === 'object') {// @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.
-      originalRef.current = menuItem;}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {window.open(item.props.href, item.props.target);} else {location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick(event);}return true;}return false;};_proto.move = function move(step) {var _this4 = this;this.setState(function (state, props) {var children = childrenToArray(props.children);if (!children.some(_isActiveElement.isActiveElement)) {return null;}var index = state.highlightedIndex;do {index += step;if (!_this4.getProps().cyclicSelection && (index < 0 || index > children.length)) {return null;}if (index < 0) {index = children.length - 1;} else if (index > children.length) {index = 0;}var child = children[index];if ((0, _isActiveElement.isActiveElement)(child)) {return { highlightedIndex: index };}} while (index !== state.highlightedIndex);return null;}, this.scrollToSelected);};_proto.isEmpty = function isEmpty() {var children = this.props.children;return !children || !childrenToArray(children).filter(_utils.isNonNullable).length;};return InternalMenu;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'InternalMenu', _class2.defaultProps = { width: 'auto', maxHeight: 300, hasShadow: true, preventWindowScroll: true, cyclicSelection: true, initialSelectedItemIndex: -1 }, _temp)) || _class;exports.InternalMenu = InternalMenu;
+    };return _this;}var _proto = InternalMenu.prototype;_proto.componentDidMount = function componentDidMount() {this.setInitialSelection();this.calculateMaxHeight();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.shouldRecalculateMaxHeight(prevProps)) {this.calculateMaxHeight();}if (prevProps.maxHeight !== this.getProps().maxHeight) {this.setState({ maxHeight: this.props.maxHeight || 'none' });}};_proto.focus = function focus() {this.focusOnRootElement();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cx3,_this3 = this;var enableIconPadding = (0, _isIconPaddingEnabled.isIconPaddingEnabled)(this.props.children, this.props.preventIconsOffset);if (this.isEmpty()) {return null;}var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,width = _this$getProps.width,maxHeight = _this$getProps.maxHeight,preventWindowScroll = _this$getProps.preventWindowScroll;var isMobile = this.isMobileLayout;return /*#__PURE__*/_react.default.createElement("div", { "data-tid": InternalMenuDataTids.root, className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_InternalMenu.styles.root(this.theme)] = true, _cx3[_InternalMenu.styles.mobileRoot(this.theme)] = isMobile, _cx3[_InternalMenu.styles.shadow(this.theme)] = hasShadow, _cx3)), style: { width: width, maxHeight: this.state.maxHeight }, onKeyDown: this.handleKeyDown, ref: this.setRootNode, tabIndex: 0 }, this.props.header ? this.renderHeader() : null, /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: maxHeight, preventWindowScroll: preventWindowScroll, onScrollStateChange: this.handleScrollStateChange }, _react.default.Children.map(this.props.children, function (child, index) {if (typeof child === 'string' || typeof child === 'number' || (0, _utils.isNullable)(child)) {return child;}if ( /*#__PURE__*/_react.default.isValidElement(child) && typeof child.type === 'string') {return child;}var modifiedChild = (0, _addIconPaddingIfPartOfMenu.addIconPaddingIfPartOfMenu)(child, enableIconPadding);if ((0, _isActiveElement.isActiveElement)(modifiedChild)) {var highlight = _this3.state.highlightedIndex === index;var ref = modifiedChild.ref;var originalRef = ref;if (highlight) {ref = function ref(menuItem) {return _this3.refHighlighted(originalRef, menuItem);};}return /*#__PURE__*/_react.default.cloneElement(modifiedChild, { ref: ref, state: highlight ? 'hover' : modifiedChild.props.state, onClick: _this3.select.bind(_this3, index, false), onMouseEnter: function onMouseEnter(event) {_this3.highlightItem(index);if ((0, _MenuItem.isMenuItem)(modifiedChild) && modifiedChild.props.onMouseEnter) {modifiedChild.props.onMouseEnter(event);}}, onMouseLeave: function onMouseLeave(event) {_this3.unhighlight();if ((0, _MenuItem.isMenuItem)(modifiedChild) && modifiedChild.props.onMouseLeave) {modifiedChild.props.onMouseLeave(event);}} });}return modifiedChild;})), this.props.footer ? this.renderFooter() : null);};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (!originalRef || typeof originalRef === 'string') {return;}if (typeof originalRef === 'function') {originalRef(menuItem);} else if (typeof originalRef === 'object') {// @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.
+      originalRef.current = menuItem;}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {_SSRSafe.globalThat.open(item.props.href, item.props.target);} else {location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick(event);}return true;}return false;};_proto.move = function move(step) {var _this4 = this;this.setState(function (state, props) {var children = childrenToArray(props.children);if (!children.some(_isActiveElement.isActiveElement)) {return null;}var index = state.highlightedIndex;do {index += step;if (!_this4.getProps().cyclicSelection && (index < 0 || index > children.length)) {return null;}if (index < 0) {index = children.length - 1;} else if (index > children.length) {index = 0;}var child = children[index];if ((0, _isActiveElement.isActiveElement)(child)) {return { highlightedIndex: index };}} while (index !== state.highlightedIndex);return null;}, this.scrollToSelected);};_proto.isEmpty = function isEmpty() {var children = this.props.children;return !children || !childrenToArray(children).filter(_utils.isNonNullable).length;};return InternalMenu;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'InternalMenu', _class2.defaultProps = { width: 'auto', maxHeight: 300, hasShadow: true, preventWindowScroll: true, cyclicSelection: true, initialSelectedItemIndex: -1 }, _temp)) || _class) || _class;exports.InternalMenu = InternalMenu;
 
 function childrenToArray(children) {
   var ret = [];

package/cjs/internal/InternalMenu/InternalMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InternalMenu.tsx"],"names":["InternalMenuDataTids","root","InternalMenu","rootNode","getProps","defaultProps","state","highlightedIndex","maxHeight","scrollState","renderHeader","el","header","styles","fixedHeader","props","renderFooter","footer","fixedFooter","focusOnRootElement","focus","shouldRecalculateMaxHeight","prevProps","children","prevMaxHeight","prevHeader","prevFooter","prevChildrenCount","React","Children","count","calculateMaxHeight","parsedMaxHeight","window","rootElementMaxHeight","getComputedStyle","parseFloat","calculatedMaxHeight","height","setState","setInitialSelection","i","initialSelectedItemIndex","moveDown","refScrollContainer","scrollContainer","scrollToSelected","highlighted","HTMLElement","scrollTo","highlightItem","index","unhighlight","moveUp","move","handleKeyDown","e","onKeyDown","defaultPrevented","preventDefault","onClick","handleScrollStateChange","componentDidMount","componentDidUpdate","render","theme","renderMain","enableIconPadding","toArray","some","x","isValidElement","icon","isEmpty","hasShadow","width","preventWindowScroll","shadow","setRootNode","map","child","type","modifiedChild","highlight","ref","originalRef","menuItem","refHighlighted","cloneElement","select","bind","onMouseEnter","event","onMouseLeave","current","shouldHandleHref","item","childrenToArray","href","target","open","location","onItemClick","step","isActiveElement","cyclicSelection","length","filter","isNonNullable","PureComponent","__KONTUR_REACT_UI__","ret","forEach","push"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { isHTMLElement } from '../../lib/SSRSafe';\nimport { isNonNullable, isNullable } from '../../lib/utils';\nimport { isKeyArrowDown, isKeyArrowUp, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { ScrollContainer, ScrollContainerScrollState } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './InternalMenu.styles';\nimport { isActiveElement } from './isActiveElement';\nimport { addIconPaddingIfPartOfMenu } from './addIconPaddingIfPartOfMenu';\n\ninterface MenuProps {\n  children?: React.ReactNode;\n  hasShadow?: boolean;\n  /**\n   * Максимальная высота применяется только для скролл контейнера\n   *\n   * Высота `header` и `footer` в нее не включены\n   */\n  maxHeight?: number | string;\n  onItemClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  // Циклический перебор айтемов меню (по-дефолтну включен)\n  cyclicSelection?: boolean;\n  initialSelectedItemIndex?: number;\n}\n\ninterface MenuState {\n  highlightedIndex: number;\n  maxHeight: number | string;\n  scrollState: ScrollContainerScrollState;\n}\n\nexport const InternalMenuDataTids = {\n  root: 'InternalMenu__root',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<\n    MenuProps,\n    'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll' | 'cyclicSelection' | 'initialSelectedItemIndex'\n  >\n>;\n\n@rootNode\nexport class InternalMenu extends React.PureComponent<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'InternalMenu';\n\n  public static defaultProps: DefaultProps = {\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n    cyclicSelection: true,\n    initialSelectedItemIndex: -1,\n  };\n\n  private getProps = createPropsGetter(InternalMenu.defaultProps);\n\n  public state: MenuState = {\n    highlightedIndex: -1,\n    maxHeight: this.getProps().maxHeight || 'none',\n    scrollState: 'top',\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private highlighted: Nullable<MenuItem>;\n  private setRootNode!: TSetRootNode;\n  private header: Nullable<HTMLDivElement>;\n  private footer: Nullable<HTMLDivElement>;\n\n  public componentDidMount() {\n    this.setInitialSelection();\n    this.calculateMaxHeight();\n  }\n\n  public componentDidUpdate(prevProps: MenuProps) {\n    if (this.shouldRecalculateMaxHeight(prevProps)) {\n      this.calculateMaxHeight();\n    }\n\n    if (prevProps.maxHeight !== this.getProps().maxHeight) {\n      this.setState({\n        maxHeight: this.props.maxHeight || 'none',\n      });\n    }\n  }\n\n  public focus() {\n    this.focusOnRootElement();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    if (this.isEmpty()) {\n      return null;\n    }\n    const { hasShadow, width, maxHeight, preventWindowScroll } = this.getProps();\n\n    return (\n      <div\n        data-tid={InternalMenuDataTids.root}\n        className={cx({\n          [styles.root(this.theme)]: true,\n          [styles.shadow(this.theme)]: hasShadow,\n        })}\n        style={{\n          width,\n          maxHeight: this.state.maxHeight,\n        }}\n        onKeyDown={this.handleKeyDown}\n        ref={this.setRootNode}\n        tabIndex={0}\n      >\n        {this.props.header ? this.renderHeader() : null}\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={maxHeight}\n          preventWindowScroll={preventWindowScroll}\n          onScrollStateChange={this.handleScrollStateChange}\n        >\n          {React.Children.map(this.props.children, (child, index) => {\n            if (typeof child === 'string' || typeof child === 'number' || isNullable(child)) {\n              return child;\n            }\n            if (React.isValidElement(child) && typeof child.type === 'string') {\n              return child;\n            }\n\n            const modifiedChild = addIconPaddingIfPartOfMenu(child, enableIconPadding);\n\n            if (isActiveElement(modifiedChild)) {\n              const highlight = this.state.highlightedIndex === index;\n\n              let ref = modifiedChild.ref;\n              const originalRef = ref;\n              if (highlight) {\n                ref = (menuItem) => this.refHighlighted(originalRef, menuItem);\n              }\n\n              return React.cloneElement<MenuItemProps, MenuItem>(modifiedChild, {\n                ref,\n                state: highlight ? 'hover' : modifiedChild.props.state,\n                onClick: this.select.bind(this, index, false),\n                onMouseEnter: (event) => {\n                  this.highlightItem(index);\n                  if (isMenuItem(modifiedChild) && modifiedChild.props.onMouseEnter) {\n                    modifiedChild.props.onMouseEnter(event);\n                  }\n                },\n                onMouseLeave: (event) => {\n                  this.unhighlight();\n                  if (isMenuItem(modifiedChild) && modifiedChild.props.onMouseLeave) {\n                    modifiedChild.props.onMouseLeave(event);\n                  }\n                },\n              });\n            }\n\n            return modifiedChild;\n          })}\n        </ScrollContainer>\n        {this.props.footer ? this.renderFooter() : null}\n      </div>\n    );\n  }\n\n  private renderHeader = () => {\n    return (\n      <div\n        ref={(el) => (this.header = el)}\n        className={cx({\n          [styles.header()]: true,\n          [styles.fixedHeader()]: this.state.scrollState !== 'top',\n        })}\n      >\n        {this.props.header}\n      </div>\n    );\n  };\n\n  private renderFooter = () => {\n    return (\n      <div\n        ref={(el) => (this.footer = el)}\n        className={cx({\n          [styles.footer()]: true,\n          [styles.fixedFooter()]: this.state.scrollState !== 'bottom',\n        })}\n      >\n        {this.props.footer}\n      </div>\n    );\n  };\n\n  private focusOnRootElement = (): void => {\n    const rootNode = getRootNode(this);\n    if (isHTMLElement(rootNode)) {\n      rootNode?.focus();\n    }\n  };\n\n  private shouldRecalculateMaxHeight = (prevProps: MenuProps): boolean => {\n    const { header, footer, children } = this.props;\n    const maxHeight = this.getProps().maxHeight;\n    const prevMaxHeight = prevProps.maxHeight;\n    const prevHeader = prevProps.header;\n    const prevFooter = prevProps.footer;\n    const prevChildrenCount = React.Children.count(prevProps.children);\n\n    return (\n      maxHeight !== prevMaxHeight ||\n      footer !== prevFooter ||\n      header !== prevHeader ||\n      React.Children.count(children) !== prevChildrenCount\n    );\n  };\n\n  private calculateMaxHeight = () => {\n    const maxHeight = this.getProps().maxHeight;\n    let parsedMaxHeight = maxHeight;\n    const rootNode = getRootNode(this);\n\n    if (typeof maxHeight === 'string' && typeof window !== 'undefined' && rootNode) {\n      const rootElementMaxHeight = window.getComputedStyle(rootNode).maxHeight;\n\n      if (rootElementMaxHeight) {\n        parsedMaxHeight = parseFloat(rootElementMaxHeight);\n      }\n    }\n\n    const calculatedMaxHeight =\n      typeof parsedMaxHeight === 'number'\n        ? parsedMaxHeight +\n          ((this.header && getDOMRect(this.header).height) || 0) +\n          ((this.footer && getDOMRect(this.footer).height) || 0)\n        : maxHeight;\n\n    this.setState({\n      maxHeight: calculatedMaxHeight || 'none',\n    });\n  };\n\n  private setInitialSelection = () => {\n    for (let i = this.getProps().initialSelectedItemIndex; i > -1; i--) {\n      this.moveDown();\n    }\n  };\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private refHighlighted(\n    originalRef: string | ((instance: MenuItem | null) => void) | React.RefObject<MenuItem> | null | undefined,\n    menuItem: MenuItem | null,\n  ) {\n    this.highlighted = menuItem;\n\n    if (!originalRef || typeof originalRef === 'string') {\n      return;\n    }\n\n    if (typeof originalRef === 'function') {\n      originalRef(menuItem);\n    } else if (typeof originalRef === 'object') {\n      // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n      originalRef.current = menuItem;\n    }\n  }\n\n  private scrollToSelected = () => {\n    if (this.scrollContainer && this.highlighted) {\n      const rootNode = getRootNode(this.highlighted);\n      // TODO: Remove this check once IF-647 is resolved\n      if (rootNode instanceof HTMLElement) {\n        this.scrollContainer.scrollTo(rootNode);\n      }\n    }\n  };\n\n  private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n    const item = childrenToArray(this.props.children)[index];\n\n    if (isActiveElement(item)) {\n      if (shouldHandleHref && item.props.href) {\n        if (item.props.target) {\n          window.open(item.props.href, item.props.target);\n        } else {\n          location.href = item.props.href;\n        }\n      }\n      if (item.props.onClick) {\n        item.props.onClick(event as React.MouseEvent<HTMLElement>);\n      }\n      if (this.props.onItemClick) {\n        this.props.onItemClick(event);\n      }\n      return true;\n    }\n    return false;\n  }\n\n  private highlightItem = (index: number): void => {\n    this.setState({ highlightedIndex: index });\n\n    const rootNode = getRootNode(this);\n    if (isHTMLElement(rootNode)) {\n      rootNode?.focus();\n    }\n  };\n\n  private unhighlight = () => {\n    this.setState({ highlightedIndex: -1 });\n  };\n\n  private move(step: number) {\n    this.setState((state, props) => {\n      const children = childrenToArray(props.children);\n      if (!children.some(isActiveElement)) {\n        return null;\n      }\n      let index = state.highlightedIndex;\n      do {\n        index += step;\n        if (!this.getProps().cyclicSelection && (index < 0 || index > children.length)) {\n          return null;\n        }\n\n        if (index < 0) {\n          index = children.length - 1;\n        } else if (index > children.length) {\n          index = 0;\n        }\n\n        const child = children[index];\n        if (isActiveElement(child)) {\n          return { highlightedIndex: index };\n        }\n      } while (index !== state.highlightedIndex);\n      return null;\n    }, this.scrollToSelected);\n  }\n\n  private moveUp = () => {\n    this.move(-1);\n  };\n\n  private moveDown = () => {\n    this.move(1);\n  };\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isNonNullable).length;\n  }\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (typeof this.props.onKeyDown === 'function') {\n      this.props.onKeyDown(e);\n    }\n\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    if (isKeyArrowUp(e)) {\n      e.preventDefault();\n      this.moveUp();\n    } else if (isKeyArrowDown(e)) {\n      e.preventDefault();\n      this.moveDown();\n    } else if (isKeyEnter(e)) {\n      if (this.highlighted && this.highlighted.props.onClick) {\n        this.highlighted.props.onClick(e);\n      }\n    }\n  };\n\n  private handleScrollStateChange = (scrollState: ScrollContainerScrollState) => {\n    if (this.state.scrollState !== scrollState) {\n      this.setState({ scrollState });\n    }\n  };\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n  const ret: React.ReactNode[] = [];\n  // Use forEach instead of map to avoid cloning for key unifying.\n  React.Children.forEach(children, (child) => {\n    ret.push(child);\n  });\n  return ret;\n}\n"]}
+{"version":3,"sources":["InternalMenu.tsx"],"names":["InternalMenuDataTids","root","InternalMenu","responsiveLayout","rootNode","getProps","defaultProps","state","highlightedIndex","maxHeight","scrollState","renderHeader","styles","wrapper","headerWrapper","el","header","contentWrapper","props","menuSeparatorWrapper","theme","renderMenuSeparatorWithNoMargin","renderFooter","footerWrapper","footer","ThemeFactory","create","menuSeparatorMarginY","focusOnRootElement","focus","shouldRecalculateMaxHeight","prevProps","children","prevMaxHeight","prevHeader","prevFooter","prevChildrenCount","React","Children","count","calculateMaxHeight","parsedMaxHeight","globalThat","rootElementMaxHeight","getComputedStyle","parseFloat","calculatedMaxHeight","height","setState","setInitialSelection","i","initialSelectedItemIndex","moveDown","refScrollContainer","scrollContainer","scrollToSelected","highlighted","HTMLElement","scrollTo","highlightItem","index","unhighlight","moveUp","move","handleKeyDown","e","onKeyDown","defaultPrevented","preventDefault","onClick","handleScrollStateChange","componentDidMount","componentDidUpdate","render","renderMain","enableIconPadding","preventIconsOffset","isEmpty","hasShadow","width","preventWindowScroll","isMobile","isMobileLayout","mobileRoot","shadow","setRootNode","map","child","isValidElement","type","modifiedChild","highlight","ref","originalRef","menuItem","refHighlighted","cloneElement","select","bind","onMouseEnter","event","onMouseLeave","current","shouldHandleHref","item","childrenToArray","href","target","open","location","onItemClick","step","some","isActiveElement","cyclicSelection","length","filter","isNonNullable","PureComponent","__KONTUR_REACT_UI__","ret","forEach","push"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { globalThat, isHTMLElement } from '../../lib/SSRSafe';\nimport { isNonNullable, isNullable } from '../../lib/utils';\nimport { isKeyArrowDown, isKeyArrowUp, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { ScrollContainer, ScrollContainerScrollState } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { MenuSeparator } from '../../components/MenuSeparator';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\n\nimport { styles } from './InternalMenu.styles';\nimport { isActiveElement } from './isActiveElement';\nimport { addIconPaddingIfPartOfMenu } from './addIconPaddingIfPartOfMenu';\nimport { isIconPaddingEnabled } from './isIconPaddingEnabled';\n\nexport interface InternalMenuProps {\n  children?: React.ReactNode;\n  hasShadow?: boolean;\n  /**\n   * Максимальная высота применяется только для скролл контейнера\n   *\n   * Высота `header` и `footer` в нее не включены\n   */\n  maxHeight?: number | string;\n  onItemClick?: (event: React.SyntheticEvent<HTMLElement>) => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n  /**\n   * Предотвращает выравнивание текста всех пунктов меню относительно друг друга.\n   * Так, если хотя бы у одного пункта меню есть иконка, текст в  остальных пунктах меню будет выровнен относительно пункта меню с иконкой\n   */\n  preventIconsOffset?: boolean;\n  onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  // Циклический перебор айтемов меню (по-дефолтну включен)\n  cyclicSelection?: boolean;\n  initialSelectedItemIndex?: number;\n}\n\ninterface MenuState {\n  highlightedIndex: number;\n  maxHeight: number | string;\n  scrollState: ScrollContainerScrollState;\n}\n\nexport const InternalMenuDataTids = {\n  root: 'InternalMenu__root',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<\n    InternalMenuProps,\n    'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll' | 'cyclicSelection' | 'initialSelectedItemIndex'\n  >\n>;\n\n@responsiveLayout\n@rootNode\nexport class InternalMenu extends React.PureComponent<InternalMenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'InternalMenu';\n\n  public static defaultProps: DefaultProps = {\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n    cyclicSelection: true,\n    initialSelectedItemIndex: -1,\n  };\n\n  private getProps = createPropsGetter(InternalMenu.defaultProps);\n\n  public state: MenuState = {\n    highlightedIndex: -1,\n    maxHeight: this.getProps().maxHeight || 'none',\n    scrollState: 'top',\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private highlighted: Nullable<MenuItem>;\n  private setRootNode!: TSetRootNode;\n  private header: Nullable<HTMLDivElement>;\n  private footer: Nullable<HTMLDivElement>;\n  private isMobileLayout!: boolean;\n\n  public componentDidMount() {\n    this.setInitialSelection();\n    this.calculateMaxHeight();\n  }\n\n  public componentDidUpdate(prevProps: InternalMenuProps) {\n    if (this.shouldRecalculateMaxHeight(prevProps)) {\n      this.calculateMaxHeight();\n    }\n\n    if (prevProps.maxHeight !== this.getProps().maxHeight) {\n      this.setState({\n        maxHeight: this.props.maxHeight || 'none',\n      });\n    }\n  }\n\n  public focus() {\n    this.focusOnRootElement();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const enableIconPadding = isIconPaddingEnabled(this.props.children, this.props.preventIconsOffset);\n\n    if (this.isEmpty()) {\n      return null;\n    }\n    const { hasShadow, width, maxHeight, preventWindowScroll } = this.getProps();\n    const isMobile = this.isMobileLayout;\n    return (\n      <div\n        data-tid={InternalMenuDataTids.root}\n        className={cx({\n          [styles.root(this.theme)]: true,\n          [styles.mobileRoot(this.theme)]: isMobile,\n          [styles.shadow(this.theme)]: hasShadow,\n        })}\n        style={{\n          width,\n          maxHeight: this.state.maxHeight,\n        }}\n        onKeyDown={this.handleKeyDown}\n        ref={this.setRootNode}\n        tabIndex={0}\n      >\n        {this.props.header ? this.renderHeader() : null}\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={maxHeight}\n          preventWindowScroll={preventWindowScroll}\n          onScrollStateChange={this.handleScrollStateChange}\n        >\n          {React.Children.map(this.props.children, (child, index) => {\n            if (typeof child === 'string' || typeof child === 'number' || isNullable(child)) {\n              return child;\n            }\n            if (React.isValidElement(child) && typeof child.type === 'string') {\n              return child;\n            }\n\n            const modifiedChild = addIconPaddingIfPartOfMenu(child, enableIconPadding);\n\n            if (isActiveElement(modifiedChild)) {\n              const highlight = this.state.highlightedIndex === index;\n\n              let ref = modifiedChild.ref;\n              const originalRef = ref;\n              if (highlight) {\n                ref = (menuItem) => this.refHighlighted(originalRef, menuItem);\n              }\n\n              return React.cloneElement<MenuItemProps, MenuItem>(modifiedChild, {\n                ref,\n                state: highlight ? 'hover' : modifiedChild.props.state,\n                onClick: this.select.bind(this, index, false),\n                onMouseEnter: (event) => {\n                  this.highlightItem(index);\n                  if (isMenuItem(modifiedChild) && modifiedChild.props.onMouseEnter) {\n                    modifiedChild.props.onMouseEnter(event);\n                  }\n                },\n                onMouseLeave: (event) => {\n                  this.unhighlight();\n                  if (isMenuItem(modifiedChild) && modifiedChild.props.onMouseLeave) {\n                    modifiedChild.props.onMouseLeave(event);\n                  }\n                },\n              });\n            }\n\n            return modifiedChild;\n          })}\n        </ScrollContainer>\n        {this.props.footer ? this.renderFooter() : null}\n      </div>\n    );\n  }\n\n  private renderHeader = () => {\n    return (\n      <div\n        className={cx({\n          [styles.wrapper()]: true,\n          [styles.headerWrapper()]: true,\n        })}\n        ref={(el) => (this.header = el)}\n      >\n        <div className={styles.contentWrapper()}>{this.props.header}</div>\n        <div className={styles.menuSeparatorWrapper(this.theme)}>\n          {this.state.scrollState !== 'top' && this.renderMenuSeparatorWithNoMargin()}\n        </div>\n      </div>\n    );\n  };\n\n  private renderFooter = () => {\n    return (\n      <div\n        className={cx({\n          [styles.wrapper()]: true,\n          [styles.footerWrapper()]: true,\n        })}\n        ref={(el) => (this.footer = el)}\n      >\n        <div className={styles.menuSeparatorWrapper(this.theme)}>\n          {this.state.scrollState !== 'bottom' && this.renderMenuSeparatorWithNoMargin()}\n        </div>\n        <div className={styles.contentWrapper()}>{this.props.footer}</div>\n      </div>\n    );\n  };\n\n  private renderMenuSeparatorWithNoMargin = () => {\n    return (\n      <ThemeContext.Provider value={ThemeFactory.create({ menuSeparatorMarginY: '0' }, this.theme)}>\n        <MenuSeparator />\n      </ThemeContext.Provider>\n    );\n  };\n\n  private focusOnRootElement = (): void => {\n    const rootNode = getRootNode(this);\n    if (isHTMLElement(rootNode)) {\n      rootNode?.focus();\n    }\n  };\n\n  private shouldRecalculateMaxHeight = (prevProps: InternalMenuProps): boolean => {\n    const { header, footer, children } = this.props;\n    const maxHeight = this.getProps().maxHeight;\n    const prevMaxHeight = prevProps.maxHeight;\n    const prevHeader = prevProps.header;\n    const prevFooter = prevProps.footer;\n    const prevChildrenCount = React.Children.count(prevProps.children);\n\n    return (\n      maxHeight !== prevMaxHeight ||\n      footer !== prevFooter ||\n      header !== prevHeader ||\n      React.Children.count(children) !== prevChildrenCount\n    );\n  };\n\n  private calculateMaxHeight = () => {\n    const maxHeight = this.getProps().maxHeight;\n    let parsedMaxHeight = maxHeight;\n    const rootNode = getRootNode(this);\n\n    if (typeof maxHeight === 'string' && typeof globalThat !== 'undefined' && rootNode) {\n      const rootElementMaxHeight = globalThat.getComputedStyle(rootNode).maxHeight;\n\n      if (rootElementMaxHeight) {\n        parsedMaxHeight = parseFloat(rootElementMaxHeight);\n      }\n    }\n\n    const calculatedMaxHeight =\n      typeof parsedMaxHeight === 'number'\n        ? parsedMaxHeight +\n          ((this.header && getDOMRect(this.header).height) || 0) +\n          ((this.footer && getDOMRect(this.footer).height) || 0)\n        : maxHeight;\n\n    this.setState({\n      maxHeight: calculatedMaxHeight || 'none',\n    });\n  };\n\n  private setInitialSelection = () => {\n    for (let i = this.getProps().initialSelectedItemIndex; i > -1; i--) {\n      this.moveDown();\n    }\n  };\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private refHighlighted(\n    originalRef: string | ((instance: MenuItem | null) => void) | React.RefObject<MenuItem> | null | undefined,\n    menuItem: MenuItem | null,\n  ) {\n    this.highlighted = menuItem;\n\n    if (!originalRef || typeof originalRef === 'string') {\n      return;\n    }\n\n    if (typeof originalRef === 'function') {\n      originalRef(menuItem);\n    } else if (typeof originalRef === 'object') {\n      // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n      originalRef.current = menuItem;\n    }\n  }\n\n  private scrollToSelected = () => {\n    if (this.scrollContainer && this.highlighted) {\n      const rootNode = getRootNode(this.highlighted);\n      // TODO: Remove this check once IF-647 is resolved\n      if (rootNode instanceof HTMLElement) {\n        this.scrollContainer.scrollTo(rootNode);\n      }\n    }\n  };\n\n  private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n    const item = childrenToArray(this.props.children)[index];\n\n    if (isActiveElement(item)) {\n      if (shouldHandleHref && item.props.href) {\n        if (item.props.target) {\n          globalThat.open(item.props.href, item.props.target);\n        } else {\n          location.href = item.props.href;\n        }\n      }\n      if (item.props.onClick) {\n        item.props.onClick(event as React.MouseEvent<HTMLElement>);\n      }\n      if (this.props.onItemClick) {\n        this.props.onItemClick(event);\n      }\n      return true;\n    }\n    return false;\n  }\n\n  private highlightItem = (index: number): void => {\n    this.setState({ highlightedIndex: index });\n\n    const rootNode = getRootNode(this);\n    if (isHTMLElement(rootNode)) {\n      rootNode?.focus();\n    }\n  };\n\n  private unhighlight = () => {\n    this.setState({ highlightedIndex: -1 });\n  };\n\n  private move(step: number) {\n    this.setState((state, props) => {\n      const children = childrenToArray(props.children);\n      if (!children.some(isActiveElement)) {\n        return null;\n      }\n      let index = state.highlightedIndex;\n      do {\n        index += step;\n        if (!this.getProps().cyclicSelection && (index < 0 || index > children.length)) {\n          return null;\n        }\n\n        if (index < 0) {\n          index = children.length - 1;\n        } else if (index > children.length) {\n          index = 0;\n        }\n\n        const child = children[index];\n        if (isActiveElement(child)) {\n          return { highlightedIndex: index };\n        }\n      } while (index !== state.highlightedIndex);\n      return null;\n    }, this.scrollToSelected);\n  }\n\n  private moveUp = () => {\n    this.move(-1);\n  };\n\n  private moveDown = () => {\n    this.move(1);\n  };\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isNonNullable).length;\n  }\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>): void => {\n    if (typeof this.props.onKeyDown === 'function') {\n      this.props.onKeyDown(e);\n    }\n\n    if (e.defaultPrevented) {\n      return;\n    }\n\n    if (isKeyArrowUp(e)) {\n      e.preventDefault();\n      this.moveUp();\n    } else if (isKeyArrowDown(e)) {\n      e.preventDefault();\n      this.moveDown();\n    } else if (isKeyEnter(e)) {\n      if (this.highlighted && this.highlighted.props.onClick) {\n        this.highlighted.props.onClick(e);\n      }\n    }\n  };\n\n  private handleScrollStateChange = (scrollState: ScrollContainerScrollState) => {\n    if (this.state.scrollState !== scrollState) {\n      this.setState({ scrollState });\n    }\n  };\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n  const ret: React.ReactNode[] = [];\n  // Use forEach instead of map to avoid cloning for key unifying.\n  React.Children.forEach(children, (child) => {\n    ret.push(child);\n  });\n  return ret;\n}\n"]}

package/cjs/internal/InternalMenu/InternalMenu.styles.d.ts

@@ -1,9 +1,11 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
+    mobileRoot(t: Theme): string;
     shadow(t: Theme): string;
-    header(): string;
-    footer(): string;
-    fixedHeader(): string;
-    fixedFooter(): string;
+    wrapper(): string;
+    headerWrapper(): string;
+    footerWrapper(): string;
+    contentWrapper(): string;
+    menuSeparatorWrapper(t: Theme): string;
 };

package/cjs/internal/InternalMenu/InternalMenu.styles.js

@@ -1,28 +1,31 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 
 var styles = (0, _Emotion.memoizeStyle)({
   root: function root(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      overflow: auto;\n      padding: 5px ", ";\n      outline: none;\n      box-sizing: content-box;\n      background: ", ";\n    "])),
-
-    t.menuPaddingX,
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: ", " ", ";\n      outline: none;\n      box-sizing: content-box;\n      background: ", ";\n    "])),
+    t.internalMenuPaddingY, t.menuPaddingX,
 
 
     t.bgSecondary);
 
   },
 
+  mobileRoot: function mobileRoot(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 0 ", ";\n    "])),
+    t.mobileMenuPaddingX);
+
+  },
+
   shadow: function shadow(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", ";\n      box-shadow: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: ", ";\n      box-shadow: ", ";\n    "])),
     t.menuBorder,
     t.menuShadow);
 
   },
 
-  header: function header() {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      top: -5px;\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n      padding: 6px 18px 7px 8px;\n    "])));
-
-
+  wrapper: function wrapper() {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    "])));
 
 
 
@@ -32,27 +35,26 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
-  footer: function footer() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      bottom: -5px;\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n      padding: 6px 18px 7px 8px;\n    "])));
-
-
-
-
+  headerWrapper: function headerWrapper() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      top: -5px;\n    "])));
 
 
+  },
 
+  footerWrapper: function footerWrapper() {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      bottom: -5px;\n    "])));
 
 
   },
 
-  fixedHeader: function fixedHeader() {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);\n    "])));
+  contentWrapper: function contentWrapper() {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      padding: 6px 18px 7px 8px;\n    "])));
 
 
   },
 
-  fixedFooter: function fixedFooter() {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);\n    "])));
-
+  menuSeparatorWrapper: function menuSeparatorWrapper(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: ", ";\n    "])),
+    t.menuSeparatorBorderWidth);
 
   } });exports.styles = styles;

package/cjs/internal/InternalMenu/InternalMenu.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["InternalMenu.styles.ts"],"names":["styles","root","t","css","menuPaddingX","bgSecondary","shadow","menuBorder","menuShadow","header","footer","fixedHeader","fixedFooter"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;;AAEiBD,IAAAA,CAAC,CAACE,YAFnB;;;AAKgBF,IAAAA,CAAC,CAACG,WALlB;;AAOD,GATgC;;AAWjCC,EAAAA,MAXiC,kBAW1BJ,CAX0B,EAWhB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACK,UADd;AAEgBL,IAAAA,CAAC,CAACM,UAFlB;;AAID,GAhBgC;;AAkBjCC,EAAAA,MAlBiC,oBAkBxB;AACP,eAAON,YAAP;;;;;;;;;;AAUD,GA7BgC;;AA+BjCO,EAAAA,MA/BiC,oBA+BxB;AACP,eAAOP,YAAP;;;;;;;;;;AAUD,GA1CgC;;AA4CjCQ,EAAAA,WA5CiC,yBA4CnB;AACZ,eAAOR,YAAP;;;AAGD,GAhDgC;;AAkDjCS,EAAAA,WAlDiC,yBAkDnB;AACZ,eAAOT,YAAP;;;AAGD,GAtDgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      overflow: auto;\n      padding: 5px ${t.menuPaddingX};\n      outline: none;\n      box-sizing: content-box;\n      background: ${t.bgSecondary};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n\n  header() {\n    return css`\n      top: -5px;\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  footer() {\n    return css`\n      bottom: -5px;\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  fixedHeader() {\n    return css`\n      box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);\n    `;\n  },\n\n  fixedFooter() {\n    return css`\n      box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["InternalMenu.styles.ts"],"names":["styles","root","t","css","internalMenuPaddingY","menuPaddingX","bgSecondary","mobileRoot","mobileMenuPaddingX","shadow","menuBorder","menuShadow","wrapper","headerWrapper","footerWrapper","contentWrapper","menuSeparatorWrapper","menuSeparatorBorderWidth"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACaD,IAAAA,CAAC,CAACE,oBADf,EACuCF,CAAC,CAACG,YADzC;;;AAIgBH,IAAAA,CAAC,CAACI,WAJlB;;AAMD,GARgC;;AAUjCC,EAAAA,UAViC,sBAUtBL,CAVsB,EAUZ;AACnB,eAAOC,YAAP;AACeD,IAAAA,CAAC,CAACM,kBADjB;;AAGD,GAdgC;;AAgBjCC,EAAAA,MAhBiC,kBAgB1BP,CAhB0B,EAgBhB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACQ,UADd;AAEgBR,IAAAA,CAAC,CAACS,UAFlB;;AAID,GArBgC;;AAuBjCC,EAAAA,OAvBiC,qBAuBvB;AACR,eAAOT,YAAP;;;;;;;;AAQD,GAhCgC;;AAkCjCU,EAAAA,aAlCiC,2BAkCjB;AACd,eAAOV,YAAP;;;AAGD,GAtCgC;;AAwCjCW,EAAAA,aAxCiC,2BAwCjB;AACd,eAAOX,YAAP;;;AAGD,GA5CgC;;AA8CjCY,EAAAA,cA9CiC,4BA8ChB;AACf,eAAOZ,YAAP;;;AAGD,GAlDgC;;AAoDjCa,EAAAA,oBApDiC,gCAoDZd,CApDY,EAoDF;AAC7B,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACe,wBADd;;AAGD,GAxDgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      padding: ${t.internalMenuPaddingY} ${t.menuPaddingX};\n      outline: none;\n      box-sizing: content-box;\n      background: ${t.bgSecondary};\n    `;\n  },\n\n  mobileRoot(t: Theme) {\n    return css`\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      top: -5px;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      bottom: -5px;\n    `;\n  },\n\n  contentWrapper() {\n    return css`\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  menuSeparatorWrapper(t: Theme) {\n    return css`\n      height: ${t.menuSeparatorBorderWidth};\n    `;\n  },\n});\n"]}

package/cjs/internal/InternalMenu/isIconPaddingEnabled.d.ts

@@ -0,0 +1,2 @@
+import { InternalMenuProps } from './InternalMenu';
+export declare const isIconPaddingEnabled: (children: InternalMenuProps['children'], preventIconsOffset: InternalMenuProps['preventIconsOffset']) => boolean;

package/cjs/internal/InternalMenu/isIconPaddingEnabled.js

@@ -0,0 +1,9 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.isIconPaddingEnabled = void 0;var _react = _interopRequireDefault(require("react"));
+
+
+
+var isIconPaddingEnabled = function isIconPaddingEnabled(
+children,
+preventIconsOffset) {return (
+
+    Boolean(!preventIconsOffset && _react.default.Children.toArray(children).some(function (x) {return /*#__PURE__*/_react.default.isValidElement(x) && x.props.icon;})));};exports.isIconPaddingEnabled = isIconPaddingEnabled;

package/cjs/internal/InternalMenu/isIconPaddingEnabled.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["isIconPaddingEnabled.ts"],"names":["isIconPaddingEnabled","children","preventIconsOffset","Boolean","React","Children","toArray","some","x","isValidElement","props","icon"],"mappings":"kKAAA;;;;AAIO,IAAMA,oBAAoB,GAAG,SAAvBA,oBAAuB;AAClCC,QADkC;AAElCC,kBAFkC;;AAIlCC,IAAAA,OAAO,CAAC,CAACD,kBAAD,IAAuBE,eAAMC,QAAN,CAAeC,OAAf,CAAuBL,QAAvB,EAAiCM,IAAjC,CAAsC,UAACC,CAAD,UAAO,4BAAMC,cAAN,CAAqBD,CAArB,KAA2BA,CAAC,CAACE,KAAF,CAAQC,IAA1C,EAAtC,CAAxB,CAJ2B,GAA7B,C","sourcesContent":["import React from 'react';\n\nimport { InternalMenuProps } from './InternalMenu';\n\nexport const isIconPaddingEnabled = (\n  children: InternalMenuProps['children'],\n  preventIconsOffset: InternalMenuProps['preventIconsOffset'],\n) =>\n  Boolean(!preventIconsOffset && React.Children.toArray(children).some((x) => React.isValidElement(x) && x.props.icon));\n"]}

package/cjs/internal/Menu/Menu.d.ts

@@ -1,5 +1,6 @@
-import React from 'react';
-export interface MenuProps {
+import React, { HTMLAttributes } from 'react';
+import { InternalMenuProps } from '../InternalMenu';
+export interface MenuProps extends Pick<InternalMenuProps, 'preventIconsOffset'>, Pick<HTMLAttributes<HTMLDivElement>, 'id'> {
     children: React.ReactNode;
     hasShadow?: boolean;
     maxHeight?: number | string;
@@ -28,6 +29,7 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
     };
     private theme;
     private scrollContainer;
+    private isMobileLayout;
     private highlighted;
     private unmounted;
     private setRootNode;

package/cjs/internal/Menu/Menu.js

@@ -1,5 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.MenuDataTids = exports.Menu = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 
+var _decorator = require("../../components/ResponsiveLayout/decorator");
 var _utils = require("../../lib/utils");
 var _ScrollContainer = require("../../components/ScrollContainer");
 
@@ -11,6 +12,10 @@ var _rootNode2 = require("../../lib/rootNode");
 var _addIconPaddingIfPartOfMenu = require("../InternalMenu/addIconPaddingIfPartOfMenu");
 var _client = require("../../lib/client");
 var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+
+var _isIconPaddingEnabled = require("../InternalMenu/isIconPaddingEnabled");
+var _SSRSafe = require("../../lib/SSRSafe");
 
 var _Menu = require("./Menu.styles");
 var _isActiveElement = require("./isActiveElement");var _class, _class2, _temp;
@@ -32,6 +37,8 @@ var _isActiveElement = require("./isActiveElement");var _class, _class2, _temp;
 
 
 
+
+
 
 var MenuDataTids = {
   root: 'Menu__root' };exports.MenuDataTids = MenuDataTids;var
@@ -40,7 +47,8 @@ var MenuDataTids = {
 
 
 
-Menu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Menu, _React$Component);function Menu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
+
+Menu = (0, _decorator.responsiveLayout)(_class = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Menu, _React$Component);function Menu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -60,6 +68,7 @@ Menu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
     unmounted = false;_this.
 
 
@@ -145,10 +154,27 @@ Menu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
-    getChildList = function () {
-      var enableIconPadding = _react.default.Children.toArray(_this.props.children).some(
-      function (x) {return /*#__PURE__*/_react.default.isValidElement(x) && x.props.icon;});
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    getChildList = function () {
+      var enableIconPadding = (0, _isIconPaddingEnabled.isIconPaddingEnabled)(_this.props.children, _this.props.preventIconsOffset);
 
       return _react.default.Children.map(_this.props.children, function (child, index) {
         if (!child) {
@@ -256,7 +282,7 @@ Menu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
    * @public
    */;_proto.reset = function reset() {this.setState({ highlightedIndex: -1 });} /**
    * @public
-   */;_proto.hasHighlightedItem = function hasHighlightedItem() {return this.state.highlightedIndex !== -1;};_proto.highlightItem = function highlightItem(index) {this.highlight(index);};_proto.renderMain = function renderMain() {var _cx;if (this.isEmpty()) {return null;}var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,maxHeight = _this$getProps.maxHeight,preventWindowScroll = _this$getProps.preventWindowScroll;return /*#__PURE__*/_react.default.createElement("div", { "data-tid": MenuDataTids.root, className: (0, _Emotion.cx)(getAlignRightClass(this.props), (_cx = {}, _cx[_Menu.styles.root(this.theme)] = true, _cx[_Menu.styles.shadow(this.theme)] = hasShadow, _cx)), style: getStyle(this.props), ref: this.setRootNode }, /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: maxHeight, preventWindowScroll: preventWindowScroll, disabled: this.props.disableScrollContainer }, /*#__PURE__*/_react.default.createElement("div", { className: _Menu.styles.scrollContainer(this.theme) }, this.getChildList())));};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (typeof originalRef === 'function') {originalRef(menuItem);}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {window.open(item.props.href, item.props.target);} else {location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick();}return true;}return false;};_proto.move = function move(step) {var _this3 = this;if (this.unmounted) {// NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
+   */;_proto.hasHighlightedItem = function hasHighlightedItem() {return this.state.highlightedIndex !== -1;};_proto.highlightItem = function highlightItem(index) {this.highlight(index);};_proto.renderMain = function renderMain() {var _cx, _cx2;if (this.isEmpty()) {return null;}var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,maxHeight = _this$getProps.maxHeight,preventWindowScroll = _this$getProps.preventWindowScroll;var offsetY = (0, _ThemeHelpers.isTheme2022)(this.theme) ? { top: 4, right: 0, bottom: 4 } : {};var isMobile = this.isMobileLayout;return /*#__PURE__*/_react.default.createElement("div", { "data-tid": MenuDataTids.root, className: (0, _Emotion.cx)(getAlignRightClass(this.props), (_cx = {}, _cx[_Menu.styles.root(this.theme)] = true, _cx[_Menu.styles.rootMobile(this.theme)] = isMobile, _cx[_Menu.styles.shadow(this.theme)] = hasShadow && !isMobile, _cx)), style: getStyle(this.props), id: this.props.id, ref: this.setRootNode }, /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: maxHeight, preventWindowScroll: preventWindowScroll, disabled: this.props.disableScrollContainer, offsetY: offsetY }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_Menu.styles.scrollContainer(this.theme)] = true, _cx2[_Menu.styles.scrollContainerMobile(this.theme)] = isMobile, _cx2)) }, this.getChildList())));};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (typeof originalRef === 'function') {originalRef(menuItem);}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {_SSRSafe.globalThat.open(item.props.href, item.props.target);} else {location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick();}return true;}return false;};_proto.move = function move(step) {var _this3 = this;if (this.unmounted) {// NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
       return;}var children = childrenToArray(this.props.children);var activeElements = children.filter(_isActiveElement.isActiveElement);if (!activeElements.length) {return;
     }
     var index = this.state.highlightedIndex;var _loop = function _loop() {
@@ -290,7 +316,7 @@ Menu = (0, _rootNode2.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
   isEmpty = function isEmpty() {
     var children = this.props.children;
     return !children || !childrenToArray(children).filter(_utils.isNonNullable).length;
-  };return Menu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.defaultProps = { align: 'left', width: 'auto', maxHeight: 300, hasShadow: true, preventWindowScroll: true }, _temp)) || _class;exports.Menu = Menu;
+  };return Menu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.defaultProps = { align: 'left', width: 'auto', maxHeight: 300, hasShadow: true, preventWindowScroll: true }, _temp)) || _class) || _class;exports.Menu = Menu;
 
 
 function childrenToArray(children) {
@@ -318,11 +344,11 @@ var getStyle = function getStyle(props) {
 };
 
 var getAlignRightClass = function getAlignRightClass(props) {
-  if (props.align === 'right') {var _cx2;
-    return (0, _Emotion.cx)((_cx2 = {}, _cx2[
-    _Menu.styles.alignRight()] = !_client.isIE11, _cx2[
-    _Menu.styles.alignRightIE11()] = _client.isIE11, _cx2[
-    _Menu.styles.alignRightIE11FixAutoWidth()] = _client.isIE11 && props.width === 'auto', _cx2));
+  if (props.align === 'right') {var _cx3;
+    return (0, _Emotion.cx)((_cx3 = {}, _cx3[
+    _Menu.styles.alignRight()] = !_client.isIE11, _cx3[
+    _Menu.styles.alignRightIE11()] = _client.isIE11, _cx3[
+    _Menu.styles.alignRightIE11FixAutoWidth()] = _client.isIE11 && props.width === 'auto', _cx3));
 
   }