@skbkontur/react-ui 0.0.0-ecefada396 → 0.0.0-ee57da3e1e

package/internal/MaskedInput/MaskedInput/MaskedInput.js

@@ -1,27 +1,42 @@
 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"]; // 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 MaskedInput = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(MaskedInput, _React$Component);
+export var MaskedInputDataTids = {
+  root: 'MaskedInput__root'
+};
+export var MaskedInput = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(MaskedInput, _React$PureComponent);
 
   function MaskedInput(_props) {
     var _this;
 
-    _this = _React$Component.call(this, _props) || this;
+    _this = _React$PureComponent.call(this, _props) || this;
+    _this.getProps = createPropsGetter(MaskedInput.defaultProps);
     _this.input = null;
-    _this.theme = void 0;
     _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$Component) {
         _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$Component) {
     };
 
     _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$Component) {
 
     _this.state = {
       value: _this.getValue(_props),
+      originValue: _this.getValue(_props),
       emptyValue: '',
       focused: false
     };
@@ -126,10 +144,10 @@ export var MaskedInput = /*#__PURE__*/function (_React$Component) {
     }
   };
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
-    if (this.props.value !== nextProps.value) {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    if (this.props.value !== prevProps.value) {
       this.setState({
-        value: nextProps.value ? nextProps.value.toString() : ''
+        value: this.props.value ? this.props.value.toString() : ''
       });
     }
   };
@@ -154,23 +172,25 @@ export var MaskedInput = /*#__PURE__*/function (_React$Component) {
         onUnexpectedInput = _this$props.onUnexpectedInput,
         defaultValue = _this$props.defaultValue,
         style = _this$props.style,
-        inputProps = _objectWithoutPropertiesLoose(_this$props, ["maskChar", "alwaysShowMask", "hasLeftIcon", "hasRightIcon", "maxLength", "onValueChange", "onUnexpectedInput", "defaultValue", "style"]);
+        inputProps = _objectWithoutPropertiesLoose(_this$props, _excluded);
 
     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, {
@@ -190,7 +210,7 @@ export var MaskedInput = /*#__PURE__*/function (_React$Component) {
   };
 
   return MaskedInput;
-}(React.Component);
+}(React.PureComponent);
 MaskedInput.__KONTUR_REACT_UI__ = 'MaskedInput';
 MaskedInput.defaultProps = {
   maskChar: '_'

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

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInput.tsx"],"names":["React","ReactInputMask","ThemeContext","MaskCharLowLine","cx","styles","MaskedInput","props","input","theme","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","UNSAFE_componentWillReceiveProps","nextProps","render","renderMain","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","leftHelper","textAlign","color","slice","leftClass","inputMaskLeft","rightHelper","map","_char","i","container","inputMask","Component","__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.Component<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 UNSAFE_componentWillReceiveProps(nextProps: MaskedInputProps) {\n    if (this.props.value !== nextProps.value) {\n      this.setState({\n        value: nextProps.value ? nextProps.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, index) => {\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,18 +13,24 @@ export interface MaskedInputProps extends React.InputHTMLAttributes<HTMLInputEle
 }
 interface MaskedInputState {
     value: string;
+    originValue: string;
     emptyValue: string;
     focused: boolean;
 }
-export declare class MaskedInput extends React.Component<MaskedInputProps, MaskedInputState> {
+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;
     constructor(props: MaskedInputProps);
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: MaskedInputProps): void;
+    componentDidUpdate(prevProps: MaskedInputProps): void;
     render(): JSX.Element;
     private renderMain;
     private getValue;

package/internal/Menu/Menu/Menu.js

@@ -1,15 +1,25 @@
 import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
+import { isNonNullable } 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 { styles } from "../Menu.styles";
 import { isActiveElement } from "../isActiveElement";
-export var Menu = /*#__PURE__*/function (_React$Component) {
+export var MenuDataTids = {
+  root: 'Menu__root'
+};
+export var Menu = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Menu, _React$Component);
 
   function Menu() {
@@ -20,12 +30,10 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Menu.defaultProps);
     _this.state = {
       highlightedIndex: -1
     };
-    _this.theme = void 0;
-    _this.scrollContainer = void 0;
-    _this.highlighted = void 0;
     _this.unmounted = false;
 
     _this.getChildList = function () {
@@ -41,30 +49,26 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
           return child;
         }
 
-        if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {
-          child = /*#__PURE__*/React.cloneElement(child, {
-            _enableIconPadding: true
-          });
-        }
+        var modifiedChild = addIconPaddingIfPartOfMenu(child, enableIconPadding);
 
-        if (isActiveElement(child)) {
+        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;
       });
     };
 
@@ -74,7 +78,12 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
 
     _this.scrollToSelected = function () {
       if (_this.scrollContainer && _this.highlighted) {
-        _this.scrollContainer.scrollTo(ReactDOM.findDOMNode(_this.highlighted));
+        var _rootNode = getRootNode(_this.highlighted); // TODO: Remove this check once IF-647 is resolved
+
+
+        if (_rootNode instanceof HTMLElement) {
+          _this.scrollContainer.scrollTo(_rootNode);
+        }
       }
     };
 
@@ -167,25 +176,36 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
-    var _cx;
+    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 = isTheme2022(this.theme) ? {
+      top: 4,
+      right: 0,
+      bottom: 4
+    } : {};
+    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
-      }
+      "data-tid": MenuDataTids.root,
+      className: cx(getAlignRightClass(this.props), (_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.rootMobile(this.theme)] = isMobile, _cx[styles.shadow(this.theme)] = hasShadow && !isMobile, _cx)),
+      style: getStyle(this.props),
+      ref: this.setRootNode
     }, /*#__PURE__*/React.createElement(ScrollContainer, {
       ref: this.refScrollContainer,
-      maxHeight: this.props.maxHeight,
-      preventWindowScroll: this.props.preventWindowScroll,
-      disabled: this.props.disableScrollContainer
+      maxHeight: maxHeight,
+      preventWindowScroll: preventWindowScroll,
+      disabled: this.props.disableScrollContainer,
+      offsetY: offsetY
     }, /*#__PURE__*/React.createElement("div", {
-      className: styles.scrollContainer(this.theme)
+      className: cx((_cx2 = {}, _cx2[styles.scrollContainer(this.theme)] = true, _cx2[styles.scrollContainerMobile(this.theme)] = isMobile, _cx2))
     }, this.getChildList())));
   };
 
@@ -287,22 +307,17 @@ export var Menu = /*#__PURE__*/function (_React$Component) {
 
   _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);
-Menu.__KONTUR_REACT_UI__ = 'Menu';
-Menu.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.defaultProps = {
+  align: 'left',
   width: 'auto',
   maxHeight: 300,
   hasShadow: true,
   preventWindowScroll: true
-};
-
-function isExist(value) {
-  return value !== null && value !== undefined;
-}
+}, _temp)) || _class) || _class;
 
 function childrenToArray(children) {
   var ret = []; // Use forEach instead of map to avoid cloning for key unifying.
@@ -311,4 +326,29 @@ function childrenToArray(children) {
     ret.push(child);
   });
   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(props) {
+  if (props.align === 'right') {
+    var _cx3;
+
+    return cx((_cx3 = {}, _cx3[styles.alignRight()] = !isIE11, _cx3[styles.alignRightIE11()] = isIE11, _cx3[styles.alignRightIE11FixAutoWidth()] = isIE11 && props.width === 'auto', _cx3));
+  }
+
+  return null;
+};

package/internal/Menu/Menu/Menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Menu.tsx"],"names":["React","ReactDOM","ScrollContainer","isMenuItem","isMenuHeader","ThemeContext","cx","styles","isActiveElement","Menu","state","highlightedIndex","theme","scrollContainer","highlighted","unmounted","getChildList","enableIconPadding","Children","toArray","props","children","some","x","isValidElement","icon","map","child","index","cloneElement","_enableIconPadding","highlight","ref","refHighlighted","bind","onClick","select","onMouseEnter","onMouseLeave","unhighlight","refScrollContainer","scrollToSelected","scrollTo","findDOMNode","scrollToTop","scrollToBottom","setState","componentWillUnmount","render","renderMain","up","move","down","enter","event","reset","hasHighlightedItem","highlightItem","isEmpty","root","shadow","hasShadow","width","maxHeight","preventWindowScroll","disableScrollContainer","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","length","indexOf","isExist","Component","__KONTUR_REACT_UI__","defaultProps","value","undefined","ret","forEach","push"],"mappings":"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","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { isMenuHeader } from '../../components/MenuHeader';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n  children: React.ReactNode;\n  hasShadow?: boolean;\n  maxHeight?: number | string;\n  onItemClick?: () => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n  /**\n   * Отключение кастомного скролла контейнера\n   */\n  disableScrollContainer?: boolean;\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n}\n\nexport class Menu extends React.Component<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n\n  public static defaultProps = {\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n  };\n\n  public state = {\n    highlightedIndex: -1,\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private highlighted: Nullable<MenuItem>;\n  private unmounted = false;\n\n  public componentWillUnmount() {\n    this.unmounted = true;\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  /**\n   * @public\n   */\n  public up() {\n    this.move(-1);\n  }\n\n  /**\n   * @public\n   */\n  public down() {\n    this.move(1);\n  }\n\n  /**\n   * @public\n   */\n  public enter(event: React.SyntheticEvent<HTMLElement>) {\n    return this.select(this.state.highlightedIndex, true, event);\n  }\n\n  /**\n   * @public\n   */\n  public reset() {\n    this.setState({ highlightedIndex: -1 });\n  }\n\n  /**\n   * @public\n   */\n  public hasHighlightedItem() {\n    return this.state.highlightedIndex !== -1;\n  }\n\n  public highlightItem(index: number) {\n    this.highlight(index);\n  }\n\n  private renderMain() {\n    if (this.isEmpty()) {\n      return null;\n    }\n\n    return (\n      <div\n        className={cx({\n          [styles.root(this.theme)]: true,\n          [styles.shadow(this.theme)]: this.props.hasShadow,\n        })}\n        style={{ width: this.props.width, maxHeight: this.props.maxHeight }}\n      >\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={this.props.maxHeight}\n          preventWindowScroll={this.props.preventWindowScroll}\n          disabled={this.props.disableScrollContainer}\n        >\n          <div className={styles.scrollContainer(this.theme)}>{this.getChildList()}</div>\n        </ScrollContainer>\n      </div>\n    );\n  }\n\n  private getChildList = () => {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    return React.Children.map(this.props.children, (child, index) => {\n      if (!child) {\n        return child;\n      }\n      if (typeof child === 'string' || typeof child === 'number') {\n        return child;\n      }\n\n      if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {\n        child = React.cloneElement(child, {\n          _enableIconPadding: true,\n        });\n      }\n      if (isActiveElement(child)) {\n        const highlight = this.state.highlightedIndex === index;\n\n        let ref = child.ref;\n        if (highlight && typeof child.ref !== 'string') {\n          ref = this.refHighlighted.bind(this, child.ref);\n        }\n\n        return React.cloneElement<MenuItemProps, MenuItem>(child, {\n          ref,\n          state: highlight ? 'hover' : child.props.state,\n          onClick: this.select.bind(this, index, false),\n          onMouseEnter: this.highlight.bind(this, index),\n          onMouseLeave: this.unhighlight,\n        });\n      }\n      return child;\n    });\n  };\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private refHighlighted(\n    originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n    menuItem: MenuItem | null,\n  ) {\n    this.highlighted = menuItem;\n\n    if (typeof originalRef === 'function') {\n      originalRef(menuItem);\n    }\n  }\n\n  private scrollToSelected = () => {\n    if (this.scrollContainer && this.highlighted) {\n      this.scrollContainer.scrollTo(ReactDOM.findDOMNode(this.highlighted) as HTMLElement);\n    }\n  };\n\n  private scrollToTop = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToTop();\n    }\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToBottom();\n    }\n  };\n\n  private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n    const item = childrenToArray(this.props.children)[index];\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);\n      }\n      if (this.props.onItemClick) {\n        this.props.onItemClick();\n      }\n      return true;\n    }\n    return false;\n  }\n\n  private highlight = (index: number) => {\n    this.setState({ highlightedIndex: index });\n  };\n\n  private unhighlight = () => {\n    this.setState({ highlightedIndex: -1 });\n  };\n\n  private move(step: number) {\n    if (this.unmounted) {\n      // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n      return;\n    }\n\n    const children = childrenToArray(this.props.children);\n    const activeElements = children.filter(isActiveElement);\n    if (!activeElements.length) {\n      return;\n    }\n    let index = this.state.highlightedIndex;\n    do {\n      index += step;\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        this.setState({ highlightedIndex: index }, () => {\n          switch (activeElements.indexOf(child)) {\n            case 0:\n              this.scrollToTop();\n              break;\n            case activeElements.length - 1:\n              this.scrollToBottom();\n              break;\n            default:\n              this.scrollToSelected();\n          }\n        });\n        return;\n      }\n    } while (index !== this.state.highlightedIndex);\n  }\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isExist).length;\n  }\n}\n\nfunction isExist(value: any): value is any {\n  return value !== null && value !== undefined;\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":["Menu.tsx"],"names":["React","responsiveLayout","isNonNullable","ScrollContainer","ThemeContext","cx","getRootNode","rootNode","addIconPaddingIfPartOfMenu","isIE11","createPropsGetter","isTheme2022","styles","isActiveElement","MenuDataTids","root","Menu","getProps","defaultProps","state","highlightedIndex","unmounted","getChildList","enableIconPadding","Children","toArray","props","children","some","x","isValidElement","icon","map","child","index","modifiedChild","highlight","ref","refHighlighted","bind","cloneElement","onClick","select","onMouseEnter","onMouseLeave","unhighlight","refScrollContainer","scrollContainer","scrollToSelected","highlighted","HTMLElement","scrollTo","scrollToTop","scrollToBottom","setState","componentWillUnmount","render","theme","renderMain","up","move","down","enter","event","reset","hasHighlightedItem","highlightItem","isEmpty","hasShadow","maxHeight","preventWindowScroll","offsetY","top","right","bottom","isMobile","isMobileLayout","getAlignRightClass","rootMobile","shadow","getStyle","setRootNode","disableScrollContainer","scrollContainerMobile","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","length","indexOf","Component","__KONTUR_REACT_UI__","align","width","ret","forEach","push","maxWidth","minWidth","alignRight","alignRightIE11","alignRightIE11FixAutoWidth"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { isNonNullable } from '../../lib/utils';\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { MenuItem, MenuItemProps } from '../../components/MenuItem';\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 { addIconPaddingIfPartOfMenu } from '../InternalMenu/addIconPaddingIfPartOfMenu';\nimport { isIE11 } from '../../lib/client';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n  children: React.ReactNode;\n  hasShadow?: boolean;\n  maxHeight?: number | string;\n  onItemClick?: () => void;\n  width?: number | string;\n  preventWindowScroll?: boolean;\n  /**\n   * Отключение кастомного скролла контейнера\n   */\n  disableScrollContainer?: boolean;\n  align?: 'left' | 'right';\n}\n\nexport interface MenuState {\n  highlightedIndex: number;\n}\n\nexport const MenuDataTids = {\n  root: 'Menu__root',\n} as const;\n\ntype DefaultProps = Required<Pick<MenuProps, 'align' | 'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll'>>;\n\n@responsiveLayout\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n  public static __KONTUR_REACT_UI__ = 'Menu';\n\n  public static defaultProps: DefaultProps = {\n    align: 'left',\n    width: 'auto',\n    maxHeight: 300,\n    hasShadow: true,\n    preventWindowScroll: true,\n  };\n\n  private getProps = createPropsGetter(Menu.defaultProps);\n\n  public state = {\n    highlightedIndex: -1,\n  };\n\n  private theme!: Theme;\n  private scrollContainer: Nullable<ScrollContainer>;\n  private isMobileLayout!: boolean;\n  private highlighted: Nullable<MenuItem>;\n  private unmounted = false;\n  private setRootNode!: TSetRootNode;\n\n  public componentWillUnmount() {\n    this.unmounted = true;\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  /**\n   * @public\n   */\n  public up() {\n    this.move(-1);\n  }\n\n  /**\n   * @public\n   */\n  public down() {\n    this.move(1);\n  }\n\n  /**\n   * @public\n   */\n  public enter(event: React.SyntheticEvent<HTMLElement>) {\n    return this.select(this.state.highlightedIndex, true, event);\n  }\n\n  /**\n   * @public\n   */\n  public reset() {\n    this.setState({ highlightedIndex: -1 });\n  }\n\n  /**\n   * @public\n   */\n  public hasHighlightedItem() {\n    return this.state.highlightedIndex !== -1;\n  }\n\n  public highlightItem(index: number) {\n    this.highlight(index);\n  }\n\n  private renderMain() {\n    if (this.isEmpty()) {\n      return null;\n    }\n    const { hasShadow, maxHeight, preventWindowScroll } = this.getProps();\n\n    const offsetY = isTheme2022(this.theme)\n      ? {\n          top: 4,\n          right: 0,\n          bottom: 4,\n        }\n      : {};\n\n    const isMobile = this.isMobileLayout;\n    return (\n      <div\n        data-tid={MenuDataTids.root}\n        className={cx(getAlignRightClass(this.props), {\n          [styles.root(this.theme)]: true,\n          [styles.rootMobile(this.theme)]: isMobile,\n          [styles.shadow(this.theme)]: hasShadow && !isMobile,\n        })}\n        style={getStyle(this.props)}\n        ref={this.setRootNode}\n      >\n        <ScrollContainer\n          ref={this.refScrollContainer}\n          maxHeight={maxHeight}\n          preventWindowScroll={preventWindowScroll}\n          disabled={this.props.disableScrollContainer}\n          offsetY={offsetY}\n        >\n          <div\n            className={cx({\n              [styles.scrollContainer(this.theme)]: true,\n              [styles.scrollContainerMobile(this.theme)]: isMobile,\n            })}\n          >\n            {this.getChildList()}\n          </div>\n        </ScrollContainer>\n      </div>\n    );\n  }\n\n  private getChildList = () => {\n    const enableIconPadding = React.Children.toArray(this.props.children).some(\n      (x) => React.isValidElement(x) && x.props.icon,\n    );\n\n    return React.Children.map(this.props.children, (child, index) => {\n      if (!child) {\n        return child;\n      }\n\n      if (typeof child === 'string' || typeof child === 'number') {\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        if (highlight && typeof modifiedChild.ref !== 'string') {\n          ref = this.refHighlighted.bind(this, modifiedChild.ref);\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: this.highlight.bind(this, index),\n          onMouseLeave: this.unhighlight,\n        });\n      }\n\n      return modifiedChild;\n    });\n  };\n\n  private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n    this.scrollContainer = scrollContainer;\n  };\n\n  private refHighlighted(\n    originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n    menuItem: MenuItem | null,\n  ) {\n    this.highlighted = menuItem;\n\n    if (typeof originalRef === 'function') {\n      originalRef(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 scrollToTop = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToTop();\n    }\n  };\n\n  private scrollToBottom = () => {\n    if (this.scrollContainer) {\n      this.scrollContainer.scrollToBottom();\n    }\n  };\n\n  private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n    const item = childrenToArray(this.props.children)[index];\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);\n      }\n      if (this.props.onItemClick) {\n        this.props.onItemClick();\n      }\n      return true;\n    }\n    return false;\n  }\n\n  private highlight = (index: number) => {\n    this.setState({ highlightedIndex: index });\n  };\n\n  private unhighlight = () => {\n    this.setState({ highlightedIndex: -1 });\n  };\n\n  private move(step: number) {\n    if (this.unmounted) {\n      // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n      return;\n    }\n\n    const children = childrenToArray(this.props.children);\n    const activeElements = children.filter(isActiveElement);\n    if (!activeElements.length) {\n      return;\n    }\n    let index = this.state.highlightedIndex;\n    do {\n      index += step;\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        this.setState({ highlightedIndex: index }, () => {\n          switch (activeElements.indexOf(child)) {\n            case 0:\n              this.scrollToTop();\n              break;\n            case activeElements.length - 1:\n              this.scrollToBottom();\n              break;\n            default:\n              this.scrollToSelected();\n          }\n        });\n        return;\n      }\n    } while (index !== this.state.highlightedIndex);\n  }\n\n  private isEmpty() {\n    const { children } = this.props;\n    return !children || !childrenToArray(children).filter(isNonNullable).length;\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\nconst getStyle = (props: MenuProps): CSSProperties => {\n  if (props.align === 'right') {\n    return {\n      maxWidth: props.width,\n      minWidth: props.width,\n      maxHeight: props.maxHeight,\n    };\n  }\n\n  return {\n    width: props.width,\n    maxHeight: props.maxHeight,\n  };\n};\n\nconst getAlignRightClass = (props: MenuProps) => {\n  if (props.align === 'right') {\n    return cx({\n      [styles.alignRight()]: !isIE11,\n      [styles.alignRightIE11()]: isIE11,\n      [styles.alignRightIE11FixAutoWidth()]: isIE11 && props.width === 'auto',\n    });\n  }\n\n  return null;\n};\n"]}

package/internal/Menu/Menu.d.ts

@@ -10,25 +10,28 @@ export interface MenuProps {
      * Отключение кастомного скролла контейнера
      */
     disableScrollContainer?: boolean;
+    align?: 'left' | 'right';
 }
 export interface MenuState {
     highlightedIndex: number;
 }
+export declare const MenuDataTids: {
+    readonly root: "Menu__root";
+};
+declare type DefaultProps = Required<Pick<MenuProps, 'align' | 'width' | 'maxHeight' | 'hasShadow' | 'preventWindowScroll'>>;
 export declare class Menu extends React.Component<MenuProps, MenuState> {
     static __KONTUR_REACT_UI__: string;
-    static defaultProps: {
-        width: string;
-        maxHeight: number;
-        hasShadow: boolean;
-        preventWindowScroll: boolean;
-    };
+    static defaultProps: DefaultProps;
+    private getProps;
     state: {
         highlightedIndex: number;
     };
     private theme;
     private scrollContainer;
+    private isMobileLayout;
     private highlighted;
     private unmounted;
+    private setRootNode;
     componentWillUnmount(): void;
     render(): JSX.Element;
     /**
@@ -65,3 +68,4 @@ export declare class Menu extends React.Component<MenuProps, MenuState> {
     private move;
     private isEmpty;
 }
+export {};

package/internal/Menu/Menu.styles/Menu.styles.js

@@ -1,16 +1,31 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root(t) {
-    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      box-sizing: content-box;\n      overflow: auto;\n      padding: 0 0;\n    "])), t.menuBgDefault);
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      box-sizing: ", ";\n      overflow: auto;\n      padding: 0 ", ";\n      margin: ", " 0;\n      border-radius: ", ";\n    "])), t.menuBgDefault, t.menuBorderRadius, t.menuBoxSizing, t.menuPaddingX, t.menuOffsetY, t.menuBorderRadius);
+  },
+  rootMobile: function rootMobile(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ", ";\n    "])), t.mobileMenuPaddingX);
+  },
+  alignRight: function alignRight() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      flex: 1 1 100%;\n    "])));
+  },
+  alignRightIE11: function alignRightIE11() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      float: right;\n      width: 100%;\n    "])));
+  },
+  alignRightIE11FixAutoWidth: function alignRightIE11FixAutoWidth() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      box-sizing: border-box !important; // override root styles\n      overflow: hidden !important; // override root styles\n    "])));
   },
   scrollContainer: function scrollContainer(t) {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      padding: ", " 0;\n    "])), t.menuPaddingY);
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      padding: ", " 0;\n    "])), t.menuPaddingY);
+  },
+  scrollContainerMobile: function scrollContainerMobile(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      padding: ", " 0;\n    "])), t.mobileMenuPaddingY);
   },
   shadow: function shadow(t) {
-    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      border: ", ";\n      box-shadow: ", ";\n    "])), t.menuBorder, t.menuShadow);
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border: ", ";\n      box-shadow: ", ";\n    "])), t.menuBorder, t.menuShadow);
   }
 });

package/internal/Menu/Menu.styles/Menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Menu.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuBgDefault","scrollContainer","menuPaddingY","shadow","menuBorder","menuShadow"],"mappings":"wJAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;;;;;AAMD,GARgC;;AAUjCC,EAAAA,eAViC,2BAUjBF,CAViB,EAUP;AACxB,WAAOJ,GAAP;AACaI,IAAAA,CAAC,CAACG,YADf;;AAGD,GAdgC;;AAgBjCC,EAAAA,MAhBiC,kBAgB1BJ,CAhB0B,EAgBhB;AACf,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACK,UADd;AAEgBL,IAAAA,CAAC,CAACM,UAFlB;;AAID,GArBgC,EAAD,CAA3B","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      background: ${t.menuBgDefault};\n      box-sizing: content-box;\n      overflow: auto;\n      padding: 0 0;\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Menu.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuBgDefault","menuBorderRadius","menuBoxSizing","menuPaddingX","menuOffsetY","rootMobile","mobileMenuPaddingX","alignRight","alignRightIE11","alignRightIE11FixAutoWidth","scrollContainer","menuPaddingY","scrollContainerMobile","mobileMenuPaddingY","shadow","menuBorder","menuShadow"],"mappings":"kPAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;AAEmBD,IAAAA,CAAC,CAACE,gBAFrB;AAGgBF,IAAAA,CAAC,CAACG,aAHlB;;AAKeH,IAAAA,CAAC,CAACI,YALjB;AAMYJ,IAAAA,CAAC,CAACK,WANd;AAOmBL,IAAAA,CAAC,CAACE,gBAPrB;;AASD,GAXgC;;AAajCI,EAAAA,UAbiC,sBAatBN,CAbsB,EAaZ;AACnB,WAAOJ,GAAP;;;AAGeI,IAAAA,CAAC,CAACO,kBAHjB;;AAKD,GAnBgC;;AAqBjCC,EAAAA,UArBiC,wBAqBpB;AACX,WAAOZ,GAAP;;;AAGD,GAzBgC;;AA2BjCa,EAAAA,cA3BiC,4BA2BhB;AACf,WAAOb,GAAP;;;;AAID,GAhCgC;;AAkCjCc,EAAAA,0BAlCiC,wCAkCJ;AAC3B,WAAOd,GAAP;;;;AAID,GAvCgC;;AAyCjCe,EAAAA,eAzCiC,2BAyCjBX,CAzCiB,EAyCP;AACxB,WAAOJ,GAAP;AACaI,IAAAA,CAAC,CAACY,YADf;;AAGD,GA7CgC;;AA+CjCC,EAAAA,qBA/CiC,iCA+CXb,CA/CW,EA+CD;AAC9B,WAAOJ,GAAP;AACaI,IAAAA,CAAC,CAACc,kBADf;;AAGD,GAnDgC;;AAqDjCC,EAAAA,MArDiC,kBAqD1Bf,CArD0B,EAqDhB;AACf,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACgB,UADd;AAEgBhB,IAAAA,CAAC,CAACiB,UAFlB;;AAID,GA1DgC,EAAD,CAA3B","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      background: ${t.menuBgDefault};\n      border-radius: ${t.menuBorderRadius};\n      box-sizing: ${t.menuBoxSizing};\n      overflow: auto;\n      padding: 0 ${t.menuPaddingX};\n      margin: ${t.menuOffsetY} 0;\n      border-radius: ${t.menuBorderRadius};\n    `;\n  },\n\n  rootMobile(t: Theme) {\n    return css`\n      border-radius: 0;\n      margin: 0;\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  alignRight() {\n    return css`\n      flex: 1 1 100%;\n    `;\n  },\n\n  alignRightIE11() {\n    return css`\n      float: right;\n      width: 100%;\n    `;\n  },\n\n  alignRightIE11FixAutoWidth() {\n    return css`\n      box-sizing: border-box !important; // override root styles\n      overflow: hidden !important; // override root styles\n    `;\n  },\n\n  scrollContainer(t: Theme) {\n    return css`\n      padding: ${t.menuPaddingY} 0;\n    `;\n  },\n\n  scrollContainerMobile(t: Theme) {\n    return css`\n      padding: ${t.mobileMenuPaddingY} 0;\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n});\n"]}

package/internal/Menu/Menu.styles.d.ts

@@ -1,6 +1,11 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
+    rootMobile(t: Theme): string;
+    alignRight(): string;
+    alignRightIE11(): string;
+    alignRightIE11FixAutoWidth(): string;
     scrollContainer(t: Theme): string;
+    scrollContainerMobile(t: Theme): string;
     shadow(t: Theme): string;
 };