@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/internal/Menu/Menu/Menu.js

@@ -4,19 +4,34 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
+import { isKeyArrowDown, isKeyArrowUp, isKeyEnter } from "../../../lib/events/keyboard/identifiers";
+import { MenuSeparator } from "../../../components/MenuSeparator";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
+import { isNonNullable, isNullable } from "../../../lib/utils";
 import { ScrollContainer } from "../../../components/ScrollContainer";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { cx } from "../../../lib/theming/Emotion";
+import { MenuItemDataTids } from "../../../components/MenuItem";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { addIconPaddingIfPartOfMenu } from "../../InternalMenu/addIconPaddingIfPartOfMenu";
 import { isIE11 } from "../../../lib/client";
-import { styles } from "../Menu.styles";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { isIconPaddingEnabled } from "../../InternalMenu/isIconPaddingEnabled";
+import { isInstanceOf } from "../../../lib/isInstanceOf";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
+import { ThemeConsumer, ThemeProvider } from "../../../lib/theming/ThemeContext";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { getStyles } from "../Menu.styles";
 import { isActiveElement } from "../isActiveElement";
+import { MenuNavigation } from "../MenuNavigation";
+import { MenuContext } from "../MenuContext";
 export var MenuDataTids = {
   root: 'Menu__root'
 };
-export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Menu, _React$Component);
+export var Menu = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(Menu, _React$PureComponent);
 
   function Menu() {
     var _this;
@@ -25,22 +40,74 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       args[_key] = arguments[_key];
     }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Menu.defaultProps);
     _this.state = {
-      highlightedIndex: -1
+      highlightedIndex: -1,
+      maxHeight: _this.getProps().maxHeight || 'none',
+      scrollState: 'top',
+      enableIconPadding: false
     };
     _this.unmounted = false;
+    _this.contentRef = /*#__PURE__*/React.createRef();
+    _this.menuNavigation = new MenuNavigation(_this.contentRef, MenuItemDataTids.content);
 
-    _this.getChildList = function () {
-      var enableIconPadding = React.Children.toArray(_this.props.children).some(function (x) {
-        return /*#__PURE__*/React.isValidElement(x) && x.props.icon;
-      });
-      return React.Children.map(_this.props.children, function (child, index) {
-        if (!child) {
-          return child;
+    _this.focusOnRootElement = function () {
+      var rootNode = getRootNode(_assertThisInitialized(_this));
+
+      if (isInstanceOf(rootNode, globalObject.HTMLElement)) {
+        rootNode == null ? void 0 : rootNode.focus();
+      }
+    };
+
+    _this.renderHeader = function () {
+      var _this$emotion$cx;
+
+      var styles = getStyles(_this.emotion);
+      return /*#__PURE__*/React.createElement("div", {
+        className: _this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.wrapper()] = true, _this$emotion$cx[styles.headerWrapper()] = true, _this$emotion$cx)),
+        ref: function ref(el) {
+          return _this.header = el;
         }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.contentWrapper()
+      }, _this.props.header), /*#__PURE__*/React.createElement("div", {
+        className: styles.menuSeparatorWrapper(_this.theme)
+      }, _this.state.scrollState !== 'top' && _this.renderMenuSeparatorWithNoMargin()));
+    };
+
+    _this.renderFooter = function () {
+      var _this$emotion$cx2;
+
+      var styles = getStyles(_this.emotion);
+      return /*#__PURE__*/React.createElement("div", {
+        className: _this.emotion.cx((_this$emotion$cx2 = {}, _this$emotion$cx2[styles.wrapper()] = true, _this$emotion$cx2[styles.footerWrapper()] = true, _this$emotion$cx2)),
+        ref: function ref(el) {
+          return _this.footer = el;
+        }
+      }, /*#__PURE__*/React.createElement("div", {
+        className: styles.menuSeparatorWrapper(_this.theme)
+      }, _this.state.scrollState !== 'bottom' && _this.renderMenuSeparatorWithNoMargin()), /*#__PURE__*/React.createElement("div", {
+        className: styles.contentWrapper()
+      }, _this.props.footer));
+    };
+
+    _this.renderMenuSeparatorWithNoMargin = function () {
+      return /*#__PURE__*/React.createElement(ThemeProvider, {
+        value: ThemeFactory.create({
+          menuSeparatorMarginY: '0'
+        }, _this.theme)
+      }, /*#__PURE__*/React.createElement(MenuSeparator, null));
+    };
+
+    _this.getChildList = function () {
+      if (_this.menuItemsAtAnyLevel) {
+        return _this.props.children;
+      }
 
-        if (typeof child === 'string' || typeof child === 'number') {
+      var enableIconPadding = isIconPaddingEnabled(_this.props.children, _this.props.preventIconsOffset);
+      return React.Children.map(_this.props.children, function (child, index) {
+        if (typeof child === 'string' || typeof child === 'number' || isNullable(child)) {
           return child;
         }
 
@@ -67,13 +134,62 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       });
     };
 
+    _this.setInitialSelection = function () {
+      for (var i = _this.getProps().initialSelectedItemIndex; i > -1; i--) {
+        _this.down();
+      }
+    };
+
+    _this.shouldRecalculateMaxHeight = function (prevProps) {
+      var _this$props = _this.props,
+          header = _this$props.header,
+          footer = _this$props.footer,
+          children = _this$props.children;
+
+      var maxHeight = _this.getProps().maxHeight;
+
+      var prevMaxHeight = prevProps.maxHeight;
+      var prevHeader = prevProps.header;
+      var prevFooter = prevProps.footer;
+      var prevChildrenCount = React.Children.count(prevProps.children);
+      return maxHeight !== prevMaxHeight || footer !== prevFooter || header !== prevHeader || React.Children.count(children) !== prevChildrenCount;
+    };
+
+    _this.calculateMaxHeight = function () {
+      var maxHeight = _this.getProps().maxHeight;
+
+      var parsedMaxHeight = maxHeight;
+      var rootNode = getRootNode(_assertThisInitialized(_this));
+
+      if (typeof maxHeight === 'string' && isBrowser(globalObject) && rootNode) {
+        var rootElementMaxHeight = globalObject.getComputedStyle == null ? void 0 : globalObject.getComputedStyle(rootNode).maxHeight;
+
+        if (rootElementMaxHeight) {
+          parsedMaxHeight = parseFloat(rootElementMaxHeight);
+        }
+      }
+
+      var calculatedMaxHeight = typeof parsedMaxHeight === 'number' ? parsedMaxHeight + (_this.header && getDOMRect(_this.header).height || 0) + (_this.footer && getDOMRect(_this.footer).height || 0) : maxHeight;
+
+      _this.setState({
+        maxHeight: calculatedMaxHeight || 'none'
+      });
+    };
+
     _this.refScrollContainer = function (scrollContainer) {
       _this.scrollContainer = scrollContainer;
     };
 
     _this.scrollToSelected = function () {
-      if (_this.scrollContainer && _this.highlighted) {
-        _this.scrollContainer.scrollTo(getRootNode(_this.highlighted));
+      var highlightedItem = _this.menuItemsAtAnyLevel ? _this.menuNavigation.highlightedItem : _this.highlighted;
+
+      if (_this.scrollContainer && highlightedItem) {
+        var _rootNode = getRootNode(highlightedItem); // TODO: Remove this check once IF-647 is resolved
+
+
+        if (isInstanceOf(_rootNode, globalObject.HTMLElement)) {
+          _this.scrollContainer.scrollTo(_rootNode);
+        }
       }
     };
 
@@ -89,6 +205,21 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       }
     };
 
+    _this.scroll = function (nextIndex) {
+      switch (nextIndex) {
+        case 0:
+          _this.scrollToTop == null ? void 0 : _this.scrollToTop();
+          break;
+
+        case _this.menuNavigation.items.length - 1:
+          _this.scrollToBottom == null ? void 0 : _this.scrollToBottom();
+          break;
+
+        default:
+          _this.scrollToSelected == null ? void 0 : _this.scrollToSelected();
+      }
+    };
+
     _this.highlight = function (index) {
       _this.setState({
         highlightedIndex: index
@@ -101,6 +232,61 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       });
     };
 
+    _this.handleKeyDown = function (event) {
+      if (typeof _this.props.onKeyDown === 'function') {
+        _this.props.onKeyDown(event);
+      }
+
+      if (event.defaultPrevented) {
+        return;
+      }
+
+      if (isKeyArrowUp(event)) {
+        event.preventDefault();
+
+        _this.up();
+      } else if (isKeyArrowDown(event)) {
+        event.preventDefault();
+
+        _this.down();
+      } else if (isKeyEnter(event)) {
+        if (_this.menuItemsAtAnyLevel) {
+          _this.menuNavigation.select(event);
+        } else if (_this.highlighted && _this.highlighted.props.onClick) {
+          _this.highlighted.props.onClick(event);
+        }
+      }
+    };
+
+    _this.getStyle = function (props) {
+      if (props.align === 'right') {
+        return {
+          maxWidth: props.width,
+          minWidth: props.width,
+          maxHeight: _this.state.maxHeight
+        };
+      }
+
+      return {
+        width: props.width,
+        maxHeight: _this.state.maxHeight
+      };
+    };
+
+    _this.handleScrollStateChange = function (scrollState) {
+      if (_this.state.scrollState !== scrollState) {
+        _this.setState({
+          scrollState: scrollState
+        });
+      }
+    };
+
+    _this.setEnableIconPadding = function (isIconPaddingEnabled) {
+      !_this.getProps().preventIconsOffset && _this.setState({
+        enableIconPadding: isIconPaddingEnabled
+      });
+    };
+
     return _this;
   }
 
@@ -110,12 +296,39 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
     this.unmounted = true;
   };
 
+  _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.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.menuItemsAtAnyLevel = getFullReactUIFlagsContext(flags).menuItemsAtAnyLevel;
+      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+        _this2.emotion = emotion;
+        return /*#__PURE__*/React.createElement(ThemeConsumer, null, function (theme) {
+          _this2.theme = theme;
+          return _this2.renderMain();
+        });
+      });
     });
   }
   /**
@@ -140,6 +353,13 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
   ;
 
   _proto.enter = function enter(event) {
+    if (this.menuItemsAtAnyLevel) {
+      var _this$menuNavigation$;
+
+      (_this$menuNavigation$ = this.menuNavigation.highlightedItem) == null ? void 0 : _this$menuNavigation$.navigate();
+      return this.menuNavigation.select(event);
+    }
+
     return this.select(this.state.highlightedIndex, true, event);
   }
   /**
@@ -148,9 +368,13 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
   ;
 
   _proto.reset = function reset() {
-    this.setState({
-      highlightedIndex: -1
-    });
+    if (this.menuItemsAtAnyLevel) {
+      this.menuNavigation.reset();
+    } else {
+      this.setState({
+        highlightedIndex: -1
+      });
+    }
   }
   /**
   * @public
@@ -158,33 +382,66 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
   ;
 
   _proto.hasHighlightedItem = function hasHighlightedItem() {
+    if (this.menuItemsAtAnyLevel) {
+      return !!this.menuNavigation.highlightedItem;
+    }
+
     return this.state.highlightedIndex !== -1;
   };
 
   _proto.highlightItem = function highlightItem(index) {
-    this.highlight(index);
+    if (this.menuItemsAtAnyLevel) {
+      this.menuNavigation.highlightByIndex(index);
+    } else {
+      this.highlight(index);
+    }
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx;
+    var _this$emotion$cx3, _this$emotion$cx4;
 
     if (this.isEmpty()) {
       return null;
     }
 
+    var _this$getProps = this.getProps(),
+        hasShadow = _this$getProps.hasShadow,
+        maxHeight = _this$getProps.maxHeight,
+        preventWindowScroll = _this$getProps.preventWindowScroll;
+
+    var offsetY = isTheme2022(this.theme) ? {
+      top: "" + this.theme.scrollContainerScrollBarOffsetY,
+      right: 0,
+      bottom: "" + this.theme.scrollContainerScrollBarOffsetY
+    } : {};
+    var isMobile = this.isMobileLayout;
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement("div", {
       "data-tid": MenuDataTids.root,
-      className: cx(getAlignRightClass(this.props), (_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.shadow(this.theme)] = this.props.hasShadow, _cx)),
-      style: getStyle(this.props),
-      ref: this.setRootNode
-    }, /*#__PURE__*/React.createElement(ScrollContainer, {
+      className: this.emotion.cx(getAlignRightClass(this.emotion)(this.props), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.root(this.theme)] = true, _this$emotion$cx3[styles.mobileRoot(this.theme)] = isMobile, _this$emotion$cx3[styles.shadow(this.theme)] = hasShadow && !isMobile, _this$emotion$cx3)),
+      style: this.getStyle(this.props),
+      id: this.props.id,
+      onKeyDown: this.handleKeyDown,
+      ref: this.setRootNode,
+      tabIndex: 0
+    }, this.props.header && this.renderHeader(), /*#__PURE__*/React.createElement(ScrollContainer, {
       ref: this.refScrollContainer,
-      maxHeight: this.props.maxHeight,
-      preventWindowScroll: this.props.preventWindowScroll,
-      disabled: this.props.disableScrollContainer
+      maxHeight: maxHeight,
+      preventWindowScroll: preventWindowScroll,
+      onScrollStateChange: this.handleScrollStateChange,
+      disabled: this.props.disableScrollContainer,
+      offsetY: offsetY
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles.scrollContainer(this.theme)
-    }, this.getChildList())));
+      className: this.emotion.cx((_this$emotion$cx4 = {}, _this$emotion$cx4[styles.scrollContainer(this.theme)] = true, _this$emotion$cx4[styles.scrollContainerMobile(this.theme)] = isMobile, _this$emotion$cx4)),
+      ref: this.contentRef
+    }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
+      value: {
+        navigation: this.menuNavigation,
+        onItemClick: this.props.onItemClick,
+        enableIconPadding: this.state.enableIconPadding,
+        setEnableIconPadding: this.setEnableIconPadding
+      }
+    }, this.getChildList()))), this.props.footer && this.renderFooter());
   };
 
   _proto.refHighlighted = function refHighlighted(originalRef, menuItem) {
@@ -198,12 +455,12 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
   _proto.select = function select(index, shouldHandleHref, event) {
     var item = childrenToArray(this.props.children)[index];
 
-    if (isActiveElement(item)) {
+    if (isActiveElement(item) && isBrowser(globalObject)) {
       if (shouldHandleHref && item.props.href) {
         if (item.props.target) {
-          window.open(item.props.href, item.props.target);
+          globalObject.open(item.props.href, item.props.target);
         } else {
-          location.href = item.props.href;
+          globalObject.location.href = item.props.href;
         }
       }
 
@@ -212,7 +469,7 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       }
 
       if (this.props.onItemClick) {
-        this.props.onItemClick();
+        this.props.onItemClick(event);
       }
 
       return true;
@@ -229,77 +486,96 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       return;
     }
 
-    var children = childrenToArray(this.props.children);
-    var activeElements = children.filter(isActiveElement);
+    if (this.menuItemsAtAnyLevel) {
+      var nextIndex = this.menuNavigation.move(step, this.getProps().cyclicSelection);
+      this.scroll(nextIndex);
+    } else {
+      var _ret = function () {
+        var children = childrenToArray(_this3.props.children);
+        var activeElements = children.filter(isActiveElement);
+
+        if (!activeElements.length) {
+          return {
+            v: void 0
+          };
+        }
 
-    if (!activeElements.length) {
-      return;
-    }
+        var index = _this3.state.highlightedIndex;
 
-    var index = this.state.highlightedIndex;
+        var _loop = function _loop() {
+          index += step;
 
-    var _loop = function _loop() {
-      index += step;
+          if (!_this3.getProps().cyclicSelection && (index < 0 || index > children.length)) {
+            return {
+              v: {
+                v: void 0
+              }
+            };
+          }
 
-      if (index < 0) {
-        index = children.length - 1;
-      } else if (index > children.length) {
-        index = 0;
-      }
+          if (index < 0) {
+            index = children.length - 1;
+          } else if (index > children.length) {
+            index = 0;
+          }
 
-      var child = children[index];
+          var child = children[index];
 
-      if (isActiveElement(child)) {
-        _this3.setState({
-          highlightedIndex: index
-        }, function () {
-          switch (activeElements.indexOf(child)) {
-            case 0:
-              _this3.scrollToTop();
+          if (isActiveElement(child)) {
+            _this3.setState({
+              highlightedIndex: index
+            }, function () {
+              switch (activeElements.indexOf(child)) {
+                case 0:
+                  _this3.scrollToTop();
 
-              break;
+                  break;
 
-            case activeElements.length - 1:
-              _this3.scrollToBottom();
+                case activeElements.length - 1:
+                  _this3.scrollToBottom();
 
-              break;
+                  break;
 
-            default:
-              _this3.scrollToSelected();
+                default:
+                  _this3.scrollToSelected();
 
-          }
-        });
+              }
+            });
 
-        return {
-          v: void 0
+            return {
+              v: {
+                v: void 0
+              }
+            };
+          }
         };
-      }
-    };
 
-    do {
-      var _ret = _loop();
+        do {
+          var _ret2 = _loop();
+
+          if (typeof _ret2 === "object") return _ret2.v;
+        } while (index !== _this3.state.highlightedIndex);
+      }();
 
       if (typeof _ret === "object") return _ret.v;
-    } while (index !== this.state.highlightedIndex);
+    }
   };
 
   _proto.isEmpty = function isEmpty() {
     var children = this.props.children;
-    return !children || !childrenToArray(children).filter(isExist).length;
+    return !children || !childrenToArray(children).filter(isNonNullable).length;
   };
 
   return Menu;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.defaultProps = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.displayName = 'Menu', _class2.defaultProps = {
   align: 'left',
   width: 'auto',
   maxHeight: 300,
   hasShadow: true,
-  preventWindowScroll: true
-}, _temp)) || _class;
-
-function isExist(value) {
-  return value !== null && value !== undefined;
-}
+  preventWindowScroll: true,
+  cyclicSelection: true,
+  initialSelectedItemIndex: -1
+}, _temp)) || _class) || _class;
 
 function childrenToArray(children) {
   var ret = []; // Use forEach instead of map to avoid cloning for key unifying.
@@ -310,27 +586,16 @@ function childrenToArray(children) {
   return ret;
 }
 
-var getStyle = function getStyle(props) {
-  if (props.align === 'right') {
-    return {
-      maxWidth: props.width,
-      minWidth: props.width,
-      maxHeight: props.maxHeight
-    };
-  }
-
-  return {
-    width: props.width,
-    maxHeight: props.maxHeight
-  };
-};
+var getAlignRightClass = function getAlignRightClass(emotion) {
+  return function (props) {
+    var styles = getStyles(emotion);
 
-var getAlignRightClass = function getAlignRightClass(props) {
-  if (props.align === 'right') {
-    var _cx2;
+    if (props.align === 'right') {
+      var _emotion$cx;
 
-    return cx((_cx2 = {}, _cx2[styles.alignRight()] = !isIE11, _cx2[styles.alignRightIE11()] = isIE11, _cx2[styles.alignRightIE11FixAutoWidth()] = isIE11 && props.width === 'auto', _cx2));
-  }
+      return emotion.cx((_emotion$cx = {}, _emotion$cx[styles.alignRight()] = !isIE11, _emotion$cx[styles.alignRightIE11()] = isIE11, _emotion$cx[styles.alignRightIE11FixAutoWidth()] = isIE11 && props.width === 'auto', _emotion$cx));
+    }
 
-  return null;
+    return null;
+  };
 };