@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bc0c053ae7

package/internal/InternalMenu/isIconPaddingEnabled/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/internal/InternalMenu/isIconPaddingEnabled.js",
+  "module": "isIconPaddingEnabled",
+  "types": "../isIconPaddingEnabled.d.ts",
+  "sideEffects": false
+}

package/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/internal/MaskedInput/MaskedInput/MaskedInput.js

@@ -1,13 +1,21 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
-var _excluded = ["maskChar", "alwaysShowMask", "hasLeftIcon", "hasRightIcon", "maxLength", "onValueChange", "onUnexpectedInput", "defaultValue", "style"];
+var _excluded = ["maskChar", "alwaysShowMask", "hasLeftIcon", "hasRightIcon", "maxLength", "onValueChange", "onUnexpectedInput", "defaultValue", "style"]; // TODO: Enable this rule in functional components.
+
+/* eslint-disable @typescript-eslint/no-unused-vars */
+
 import React from 'react';
 import ReactInputMask from 'react-input-mask';
+import { isNonNullable } from "../../../lib/utils";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { MaskCharLowLine } from "../../MaskCharLowLine";
 import { cx } from "../../../lib/theming/Emotion";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { styles } from "../MaskedInput.styles";
+export var MaskedInputDataTids = {
+  root: 'MaskedInput__root'
+};
 export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(MaskedInput, _React$PureComponent);
 
@@ -15,13 +23,20 @@ export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
     var _this;
 
     _this = _React$PureComponent.call(this, _props) || this;
+    _this.getProps = createPropsGetter(MaskedInput.defaultProps);
     _this.input = null;
     _this.reactInputMask = null;
 
     _this.getValue = function (props) {
-      var value = props.value,
-          defaultValue = props.defaultValue;
-      return value !== undefined ? value.toString() : defaultValue !== undefined ? defaultValue.toString() : '';
+      if (isNonNullable(props.value)) {
+        return props.value.toString();
+      }
+
+      if (isNonNullable(props.defaultValue)) {
+        return props.defaultValue.toString();
+      }
+
+      return '';
     };
 
     _this.refInput = function (input) {
@@ -37,7 +52,8 @@ export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
         _this.handleUnexpectedInput();
       } else {
         _this.setState({
-          value: event.target.value
+          value: event.target.value,
+          originValue: event.target.value
         });
 
         if (_this.props.onValueChange) {
@@ -71,11 +87,12 @@ export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
     };
 
     _this.preprocess = function (newState, oldState, userInput, options) {
-      var visibleMaskChars = new Array(options.mask.length).fill(_this.props.maskChar);
+      var visibleMaskChars = new Array(options.mask.length).fill(_this.getProps().maskChar);
 
       if (newState.value !== oldState.value && userInput === null) {
         _this.setState({
-          value: newState.value
+          value: newState.value,
+          originValue: newState.value
         });
       }
 
@@ -111,6 +128,7 @@ export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
 
     _this.state = {
       value: _this.getValue(_props),
+      originValue: _this.getValue(_props),
       emptyValue: '',
       focused: false
     };
@@ -158,19 +176,21 @@ export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
 
     var _this$state = this.state,
         emptyValue = _this$state.emptyValue,
-        value = _this$state.value;
+        value = _this$state.value,
+        originValue = _this$state.originValue;
     var leftHelper = (style == null ? void 0 : style.textAlign) !== 'right' && /*#__PURE__*/React.createElement("span", {
       style: {
         color: 'transparent'
       }
-    }, emptyValue.slice(0, value.length));
+    }, emptyValue.slice(0, originValue.length));
     var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && styles.inputMaskLeft();
-    var rightHelper = emptyValue.slice(value.length).split('').map(function (_char, i) {
+    var rightHelper = emptyValue.slice(originValue.length).split('').map(function (_char, i) {
       return _char === '_' ? /*#__PURE__*/React.createElement(MaskCharLowLine, {
         key: i
       }) : _char;
     });
     return /*#__PURE__*/React.createElement("span", {
+      "data-tid": MaskedInputDataTids.root,
       className: styles.container(),
       "x-ms-format-detection": "none"
     }, /*#__PURE__*/React.createElement(ReactInputMask, _extends({}, inputProps, {

package/internal/MaskedInput/MaskedInput/MaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInput.tsx"],"names":["React","ReactInputMask","ThemeContext","MaskCharLowLine","cx","styles","MaskedInput","props","input","reactInputMask","getValue","value","defaultValue","undefined","toString","refInput","refMaskedInput","handleChange","event","target","state","handleUnexpectedInput","setState","onValueChange","onChange","handleFocus","focused","onFocus","handleBlur","onBlur","preprocess","newState","oldState","userInput","options","visibleMaskChars","Array","mask","length","fill","maskChar","split","forEach","char","index","permanents","includes","emptyValue","join","isMaskVisible","alwaysShowMask","onUnexpectedInput","componentDidMount","forceUpdate","componentDidUpdate","prevProps","render","theme","renderMain","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","leftHelper","textAlign","color","slice","leftClass","inputMaskLeft","rightHelper","map","_char","i","container","inputMask","PureComponent","__KONTUR_REACT_UI__","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactInputMask, { InputState, MaskOptions } from 'react-input-mask';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './MaskedInput.styles';\n\nexport interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  mask: string;\n  maskChar: string | null;\n  formatChars?: { [key: string]: string };\n  alwaysShowMask?: boolean;\n  hasLeftIcon?: boolean;\n  hasRightIcon?: boolean;\n  onUnexpectedInput?: (value: string) => void;\n  onValueChange?: (value: string) => void;\n}\n\ninterface MaskedInputState {\n  value: string;\n  emptyValue: string;\n  focused: boolean;\n}\n\nexport class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {\n  public static __KONTUR_REACT_UI__ = 'MaskedInput';\n\n  public static defaultProps: Partial<MaskedInputProps> = {\n    maskChar: '_',\n  };\n\n  public input: HTMLInputElement | null = null;\n  private theme!: Theme;\n  private reactInputMask: ReactInputMask | null = null;\n\n  public constructor(props: MaskedInputProps) {\n    super(props);\n\n    this.state = {\n      value: this.getValue(props),\n      emptyValue: '',\n      focused: false,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.reactInputMask) {\n      // FIXME: принудительно вызываем beforeMaskedValueChange, чтобы получить emptyValue\n      this.reactInputMask.forceUpdate();\n    }\n  }\n\n  public componentDidUpdate(prevProps: MaskedInputProps) {\n    if (this.props.value !== prevProps.value) {\n      this.setState({\n        value: this.props.value ? this.props.value.toString() : '',\n      });\n    }\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 {\n      maskChar,\n      alwaysShowMask,\n      hasLeftIcon,\n      hasRightIcon,\n      maxLength,\n      onValueChange,\n      onUnexpectedInput,\n      defaultValue,\n      style,\n      ...inputProps\n    } = this.props;\n    const { emptyValue, value } = this.state;\n\n    const leftHelper = style?.textAlign !== 'right' && (\n      <span style={{ color: 'transparent' }}>{emptyValue.slice(0, value.length)}</span>\n    );\n    const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n\n    const rightHelper = emptyValue\n      .slice(value.length)\n      .split('')\n      .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n\n    return (\n      <span className={styles.container()} x-ms-format-detection=\"none\">\n        <ReactInputMask\n          {...inputProps}\n          maskChar={null}\n          beforeMaskedValueChange={this.preprocess}\n          alwaysShowMask={false}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          value={value}\n          inputRef={this.refInput}\n          ref={this.refMaskedInput}\n          style={{ ...style }}\n        />\n        {this.isMaskVisible() && (\n          <span className={cx(styles.inputMask(this.theme), leftClass)}>\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  private getValue = (props: MaskedInputProps): string => {\n    const { value, defaultValue } = props;\n\n    return value !== undefined ? value.toString() : defaultValue !== undefined ? defaultValue.toString() : '';\n  };\n\n  private refInput = (input: HTMLInputElement | null) => {\n    this.input = input;\n  };\n\n  private refMaskedInput = (reactInputMask: ReactInputMask) => {\n    this.reactInputMask = reactInputMask;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.target.value === this.state.value) {\n      this.handleUnexpectedInput();\n    } else {\n      this.setState({ value: event.target.value });\n      if (this.props.onValueChange) {\n        this.props.onValueChange(event.target.value);\n      }\n      if (this.props.onChange) {\n        this.props.onChange(event);\n      }\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.setState({ focused: true });\n\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.setState({ focused: false });\n\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n  };\n\n  private preprocess = (\n    newState: InputState,\n    oldState: InputState,\n    userInput: string,\n    options: MaskOptions & Pick<MaskedInputProps, 'mask'>,\n  ) => {\n    const visibleMaskChars = new Array(options.mask.length).fill(this.props.maskChar);\n\n    if (newState.value !== oldState.value && userInput === null) {\n      this.setState({\n        value: newState.value,\n      });\n    }\n\n    options.mask.split('').forEach((char: string, index: number) => {\n      if (options.permanents.includes(index)) {\n        visibleMaskChars[index] = char;\n      }\n\n      if (newState.value[index]) {\n        visibleMaskChars[index] = newState.value[index];\n      }\n    });\n\n    const emptyValue = visibleMaskChars.join('');\n\n    if (this.state.emptyValue !== emptyValue) {\n      this.setState({\n        emptyValue,\n      });\n    }\n\n    return newState;\n  };\n\n  private isMaskVisible = () => this.props.alwaysShowMask || this.state.focused;\n\n  private handleUnexpectedInput = () => {\n    if (this.props.onUnexpectedInput) {\n      this.props.onUnexpectedInput(this.state.value);\n    }\n  };\n}\n"]}
+{"version":3,"sources":["MaskedInput.tsx"],"names":["React","ReactInputMask","isNonNullable","ThemeContext","MaskCharLowLine","cx","createPropsGetter","styles","MaskedInputDataTids","root","MaskedInput","props","getProps","defaultProps","input","reactInputMask","getValue","value","toString","defaultValue","refInput","refMaskedInput","handleChange","event","target","state","handleUnexpectedInput","setState","originValue","onValueChange","onChange","handleFocus","focused","onFocus","handleBlur","onBlur","preprocess","newState","oldState","userInput","options","visibleMaskChars","Array","mask","length","fill","maskChar","split","forEach","char","index","permanents","includes","emptyValue","join","isMaskVisible","alwaysShowMask","onUnexpectedInput","componentDidMount","forceUpdate","componentDidUpdate","prevProps","render","theme","renderMain","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","leftHelper","textAlign","color","slice","leftClass","inputMaskLeft","rightHelper","map","_char","i","container","inputMask","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["// TODO: Enable this rule in functional components.\n/* eslint-disable @typescript-eslint/no-unused-vars */\nimport React from 'react';\nimport ReactInputMask, { InputState, MaskOptions } from 'react-input-mask';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './MaskedInput.styles';\n\nexport interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  mask: string;\n  maskChar?: string | null;\n  formatChars?: { [key: string]: string };\n  alwaysShowMask?: boolean;\n  hasLeftIcon?: boolean;\n  hasRightIcon?: boolean;\n  onUnexpectedInput?: (value: string) => void;\n  onValueChange?: (value: string) => void;\n}\n\ninterface MaskedInputState {\n  value: string;\n\n  // Users can unmask value themselves. In these cases we take origin value length\n  originValue: string;\n\n  emptyValue: string;\n  focused: boolean;\n}\n\ntype DefaultProps = Required<Pick<MaskedInputProps, 'maskChar'>>;\n\nexport const MaskedInputDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\nexport class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {\n  public static __KONTUR_REACT_UI__ = 'MaskedInput';\n\n  public static defaultProps: DefaultProps = {\n    maskChar: '_',\n  };\n\n  private getProps = createPropsGetter(MaskedInput.defaultProps);\n\n  public input: HTMLInputElement | null = null;\n  private theme!: Theme;\n  private reactInputMask: ReactInputMask | null = null;\n\n  public constructor(props: MaskedInputProps) {\n    super(props);\n\n    this.state = {\n      value: this.getValue(props),\n      originValue: this.getValue(props),\n      emptyValue: '',\n      focused: false,\n    };\n  }\n\n  public componentDidMount() {\n    if (this.reactInputMask) {\n      // FIXME: принудительно вызываем beforeMaskedValueChange, чтобы получить emptyValue\n      this.reactInputMask.forceUpdate();\n    }\n  }\n\n  public componentDidUpdate(prevProps: MaskedInputProps) {\n    if (this.props.value !== prevProps.value) {\n      this.setState({\n        value: this.props.value ? this.props.value.toString() : '',\n      });\n    }\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 {\n      maskChar,\n      alwaysShowMask,\n      hasLeftIcon,\n      hasRightIcon,\n      maxLength,\n      onValueChange,\n      onUnexpectedInput,\n      defaultValue,\n      style,\n      ...inputProps\n    } = this.props;\n    const { emptyValue, value, originValue } = this.state;\n\n    const leftHelper = style?.textAlign !== 'right' && (\n      <span style={{ color: 'transparent' }}>{emptyValue.slice(0, originValue.length)}</span>\n    );\n    const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n\n    const rightHelper = emptyValue\n      .slice(originValue.length)\n      .split('')\n      .map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n\n    return (\n      <span data-tid={MaskedInputDataTids.root} className={styles.container()} x-ms-format-detection=\"none\">\n        <ReactInputMask\n          {...inputProps}\n          maskChar={null}\n          beforeMaskedValueChange={this.preprocess}\n          alwaysShowMask={false}\n          onChange={this.handleChange}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          value={value}\n          inputRef={this.refInput}\n          ref={this.refMaskedInput}\n          style={{ ...style }}\n        />\n        {this.isMaskVisible() && (\n          <span className={cx(styles.inputMask(this.theme), leftClass)}>\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  private getValue = (props: MaskedInputProps): string => {\n    if (isNonNullable(props.value)) {\n      return props.value.toString();\n    }\n\n    if (isNonNullable(props.defaultValue)) {\n      return props.defaultValue.toString();\n    }\n\n    return '';\n  };\n\n  private refInput = (input: HTMLInputElement | null) => {\n    this.input = input;\n  };\n\n  private refMaskedInput = (reactInputMask: ReactInputMask) => {\n    this.reactInputMask = reactInputMask;\n  };\n\n  private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    if (event.target.value === this.state.value) {\n      this.handleUnexpectedInput();\n    } else {\n      this.setState({ value: event.target.value, originValue: event.target.value });\n      if (this.props.onValueChange) {\n        this.props.onValueChange(event.target.value);\n      }\n      if (this.props.onChange) {\n        this.props.onChange(event);\n      }\n    }\n  };\n\n  private handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.setState({ focused: true });\n\n    if (this.props.onFocus) {\n      this.props.onFocus(event);\n    }\n  };\n\n  private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n    this.setState({ focused: false });\n\n    if (this.props.onBlur) {\n      this.props.onBlur(event);\n    }\n  };\n\n  private preprocess = (\n    newState: InputState,\n    oldState: InputState,\n    userInput: string,\n    options: MaskOptions & Pick<MaskedInputProps, 'mask'>,\n  ) => {\n    const visibleMaskChars = new Array(options.mask.length).fill(this.getProps().maskChar);\n\n    if (newState.value !== oldState.value && userInput === null) {\n      this.setState({\n        value: newState.value,\n        originValue: newState.value,\n      });\n    }\n\n    options.mask.split('').forEach((char: string, index: number) => {\n      if (options.permanents.includes(index)) {\n        visibleMaskChars[index] = char;\n      }\n\n      if (newState.value[index]) {\n        visibleMaskChars[index] = newState.value[index];\n      }\n    });\n\n    const emptyValue = visibleMaskChars.join('');\n\n    if (this.state.emptyValue !== emptyValue) {\n      this.setState({\n        emptyValue,\n      });\n    }\n\n    return newState;\n  };\n\n  private isMaskVisible = () => this.props.alwaysShowMask || this.state.focused;\n\n  private handleUnexpectedInput = () => {\n    if (this.props.onUnexpectedInput) {\n      this.props.onUnexpectedInput(this.state.value);\n    }\n  };\n}\n"]}

package/internal/MaskedInput/MaskedInput.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     mask: string;
-    maskChar: string | null;
+    maskChar?: string | null;
     formatChars?: {
         [key: string]: string;
     };
@@ -13,12 +13,18 @@ export interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputEle
 }
 interface MaskedInputState {
     value: string;
+    originValue: string;
     emptyValue: string;
     focused: boolean;
 }
+declare type DefaultProps = Required<Pick<MaskedInputProps, 'maskChar'>>;
+export declare const MaskedInputDataTids: {
+    readonly root: "MaskedInput__root";
+};
 export declare class MaskedInput extends React.PureComponent<MaskedInputProps, MaskedInputState> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: Partial<MaskedInputProps>;
+    static defaultProps: DefaultProps;
+    private getProps;
     input: HTMLInputElement | null;
     private theme;
     private reactInputMask;

package/internal/Menu/Menu/Menu.js

@@ -4,16 +4,29 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
+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 { isHTMLElement } from "../../../lib/SSRSafe";
+import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
+import { isNonNullable, isNullable } from "../../../lib/utils";
 import { ScrollContainer } from "../../../components/ScrollContainer";
-import { isMenuItem } from "../../../components/MenuItem";
-import { isMenuHeader } from "../../../components/MenuHeader";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
+import { addIconPaddingIfPartOfMenu } from "../../InternalMenu/addIconPaddingIfPartOfMenu";
+import { isIE11 } from "../../../lib/client";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { isIconPaddingEnabled } from "../../InternalMenu/isIconPaddingEnabled";
 import { styles } from "../Menu.styles";
 import { isActiveElement } from "../isActiveElement";
-export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(Menu, _React$Component);
+export var MenuDataTids = {
+  root: 'Menu__root'
+};
+export var Menu = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(Menu, _React$PureComponent);
 
   function Menu() {
     var _this;
@@ -22,49 +35,130 @@ 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'
     };
     _this.unmounted = false;
 
-    _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 (isHTMLElement(rootNode)) {
+        rootNode == null ? void 0 : rootNode.focus();
+      }
+    };
+
+    _this.renderHeader = function () {
+      var _cx;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx = {}, _cx[styles.wrapper()] = true, _cx[styles.headerWrapper()] = true, _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()));
+    };
 
-        if (typeof child === 'string' || typeof child === 'number') {
-          return child;
+    _this.renderFooter = function () {
+      var _cx2;
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: cx((_cx2 = {}, _cx2[styles.wrapper()] = true, _cx2[styles.footerWrapper()] = true, _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));
+    };
 
-        if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {
-          child = /*#__PURE__*/React.cloneElement(child, {
-            _enableIconPadding: true
-          });
+    _this.renderMenuSeparatorWithNoMargin = function () {
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: ThemeFactory.create({
+          menuSeparatorMarginY: '0'
+        }, _this.theme)
+      }, /*#__PURE__*/React.createElement(MenuSeparator, null));
+    };
+
+    _this.getChildList = function () {
+      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;
         }
 
-        if (isActiveElement(child)) {
+        var modifiedChild = addIconPaddingIfPartOfMenu(child, enableIconPadding);
+
+        if (isActiveElement(modifiedChild)) {
           var highlight = _this.state.highlightedIndex === index;
-          var ref = child.ref;
+          var ref = modifiedChild.ref;
 
-          if (highlight && typeof child.ref !== 'string') {
-            ref = _this.refHighlighted.bind(_assertThisInitialized(_this), child.ref);
+          if (highlight && typeof modifiedChild.ref !== 'string') {
+            ref = _this.refHighlighted.bind(_assertThisInitialized(_this), modifiedChild.ref);
           }
 
-          return /*#__PURE__*/React.cloneElement(child, {
+          return /*#__PURE__*/React.cloneElement(modifiedChild, {
             ref: ref,
-            state: highlight ? 'hover' : child.props.state,
+            state: highlight ? 'hover' : modifiedChild.props.state,
             onClick: _this.select.bind(_assertThisInitialized(_this), index, false),
             onMouseEnter: _this.highlight.bind(_assertThisInitialized(_this), index),
             onMouseLeave: _this.unhighlight
           });
         }
 
-        return child;
+        return modifiedChild;
+      });
+    };
+
+    _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' && typeof window !== 'undefined' && rootNode) {
+        var rootElementMaxHeight = window.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'
       });
     };
 
@@ -74,7 +168,12 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
 
     _this.scrollToSelected = function () {
       if (_this.scrollContainer && _this.highlighted) {
-        _this.scrollContainer.scrollTo(getRootNode(_this.highlighted));
+        var _rootNode = getRootNode(_this.highlighted); // TODO: Remove this check once IF-647 is resolved
+
+
+        if (_rootNode instanceof HTMLElement) {
+          _this.scrollContainer.scrollTo(_rootNode);
+        }
       }
     };
 
@@ -102,6 +201,53 @@ 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.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
+        });
+      }
+    };
+
     return _this;
   }
 
@@ -111,6 +257,27 @@ 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;
 
@@ -167,27 +334,41 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx;
+    var _cx3, _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;
     return /*#__PURE__*/React.createElement("div", {
-      className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.shadow(this.theme)] = this.props.hasShadow, _cx)),
-      style: {
-        width: this.props.width,
-        maxHeight: this.props.maxHeight
-      },
-      ref: this.setRootNode
-    }, /*#__PURE__*/React.createElement(ScrollContainer, {
+      "data-tid": MenuDataTids.root,
+      className: cx(getAlignRightClass(this.props), (_cx3 = {}, _cx3[styles.root(this.theme)] = true, _cx3[styles.mobileRoot(this.theme)] = isMobile, _cx3[styles.shadow(this.theme)] = hasShadow && !isMobile, _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: cx((_cx4 = {}, _cx4[styles.scrollContainer(this.theme)] = true, _cx4[styles.scrollContainerMobile(this.theme)] = isMobile, _cx4))
+    }, this.getChildList())), this.props.footer && this.renderFooter());
   };
 
   _proto.refHighlighted = function refHighlighted(originalRef, menuItem) {
@@ -215,7 +396,7 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
       }
 
       if (this.props.onItemClick) {
-        this.props.onItemClick();
+        this.props.onItemClick(event);
       }
 
       return true;
@@ -244,6 +425,12 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
     var _loop = function _loop() {
       index += step;
 
+      if (!_this3.getProps().cyclicSelection && (index < 0 || index > children.length)) {
+        return {
+          v: void 0
+        };
+      }
+
       if (index < 0) {
         index = children.length - 1;
       } else if (index > children.length) {
@@ -288,20 +475,19 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
 
   _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.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,4 +496,14 @@ function childrenToArray(children) {
     ret.push(child);
   });
   return ret;
-}
+}
+
+var getAlignRightClass = function getAlignRightClass(props) {
+  if (props.align === 'right') {
+    var _cx5;
+
+    return cx((_cx5 = {}, _cx5[styles.alignRight()] = !isIE11, _cx5[styles.alignRightIE11()] = isIE11, _cx5[styles.alignRightIE11FixAutoWidth()] = isIE11 && props.width === 'auto', _cx5));
+  }
+
+  return null;
+};