@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

package/internal/InputLikeText/InputLikeText.d.ts

@@ -10,26 +10,27 @@ export interface InputLikeTextProps extends CommonProps, InputProps {
     onMouseDragStart?: MouseDragEventHandler;
     onMouseDragEnd?: MouseDragEventHandler;
     takeContentWidth?: boolean;
+    onClearCrossClick?: () => void;
 }
-export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder'>;
+export type InputLikeTextState = Omit<InputState, 'needsPolyfillPlaceholder' | 'hovered'>;
 export declare const InputLikeTextDataTids: {
     readonly root: "InputLikeText__root";
     readonly input: "InputLikeText__input";
     readonly nativeInput: "InputLikeText__nativeInput";
 };
-type DefaultProps = Required<Pick<InputLikeTextProps, 'size'>>;
+type DefaultProps = Required<Pick<InputLikeTextProps, 'size' | 'showClearIcon'>>;
 export declare class InputLikeText extends React.Component<InputLikeTextProps, InputLikeTextState> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
+    private getClearCrossShowed;
     state: {
         blinking: boolean;
         focused: boolean;
+        clearCrossShowed: boolean;
     };
     private theme;
-    private emotion;
-    private styles;
     private node;
     private hiddenInput;
     private lastSelectedInnerNode;
@@ -68,6 +69,8 @@ export declare class InputLikeText extends React.Component<InputLikeTextProps, I
     private handleFocus;
     private resetFocus;
     private handleBlur;
+    private handleHover;
+    private handleUnhover;
     private hiddenInputRef;
     private innerRef;
     private defrost;

package/internal/InputLikeText/InputLikeText.styles/InputLikeText.styles.js

@@ -1,22 +1,20 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        padding-right: 10px;\n      "])));
-    },
-    absolute: function absolute() {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        position: absolute;\n        top: 0;\n      "])));
-    },
-    userSelectContain: function userSelectContain() {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        user-select: text;\n        -ms-user-select: element;\n      "])));
-    },
-    userSelectNone: function userSelectNone() {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        user-select: none;\n      "])));
-    },
-    rightSide: function rightSide() {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        padding-left: 0;\n        visibility: visible;\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      padding-right: 10px;\n    "])));
+  },
+  absolute: function absolute() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n    "])));
+  },
+  userSelectContain: function userSelectContain() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      user-select: text;\n      -ms-user-select: element;\n    "])));
+  },
+  userSelectNone: function userSelectNone() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      user-select: none;\n    "])));
+  },
+  rightSide: function rightSide() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      padding-left: 0;\n      visibility: visible;\n    "])));
+  }
+});

package/internal/InputLikeText/InputLikeText.styles/InputLikeText.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","root","css","_templateObject","_taggedTemplateLiteralLoose","absolute","_templateObject2","userSelectContain","_templateObject3","userSelectNone","_templateObject4","rightSide","_templateObject5"],"sources":["InputLikeText.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        padding-right: 10px;\n      `;\n    },\n\n    absolute() {\n      return emotion.css`\n        position: absolute;\n        top: 0;\n      `;\n    },\n\n    userSelectContain() {\n      return emotion.css`\n        user-select: text;\n        -ms-user-select: element;\n      `;\n    },\n\n    userSelectNone() {\n      return emotion.css`\n        user-select: none;\n      `;\n    },\n\n    rightSide() {\n      return emotion.css`\n        padding-left: 0;\n        visibility: visible;\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;AAExD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,IAAI,WAAAA,KAAA,EAAG;QACL,OAAOD,OAAO,CAACE,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;MAGpB,CAAC;;MAEDC,QAAQ,WAAAA,SAAA,EAAG;QACT,OAAOL,OAAO,CAACE,GAAG,CAAAI,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;MAIpB,CAAC;;MAEDG,iBAAiB,WAAAA,kBAAA,EAAG;QAClB,OAAOP,OAAO,CAACE,GAAG,CAAAM,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;MAIpB,CAAC;;MAEDK,cAAc,WAAAA,eAAA,EAAG;QACf,OAAOT,OAAO,CAACE,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;MAGpB,CAAC;;MAEDO,SAAS,WAAAA,UAAA,EAAG;QACV,OAAOX,OAAO,CAACE,GAAG,CAAAU,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;;MAIpB;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","absolute","_templateObject2","userSelectContain","_templateObject3","userSelectNone","_templateObject4","rightSide","_templateObject5"],"sources":["InputLikeText.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      padding-right: 10px;\n    `;\n  },\n\n  absolute() {\n    return css`\n      position: absolute;\n      top: 0;\n    `;\n  },\n\n  userSelectContain() {\n    return css`\n      user-select: text;\n      -ms-user-select: element;\n    `;\n  },\n\n  userSelectNone() {\n    return css`\n      user-select: none;\n    `;\n  },\n\n  rightSide() {\n    return css`\n      padding-left: 0;\n      visibility: visible;\n    `;\n  },\n});\n"],"mappings":"4LAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;;EAEDC,QAAQ,WAAAA,SAAA,EAAG;IACT,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;EAIZ,CAAC;;EAEDG,iBAAiB,WAAAA,kBAAA,EAAG;IAClB,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;EAIZ,CAAC;;EAEDK,cAAc,WAAAA,eAAA,EAAG;IACf,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;EAGZ,CAAC;;EAEDO,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOZ,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAR,2BAAA;;;;EAIZ;AACF,CAAC,CAAC","ignoreList":[]}

package/internal/InputLikeText/InputLikeText.styles.d.ts

@@ -1,5 +1,4 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(): string;
     absolute(): string;
     userSelectContain(): string;

package/internal/InternalMaskedInput/InternalMaskedInput/InternalMaskedInput.js

@@ -5,11 +5,11 @@ var _excluded = ["maskChar", "alwaysShowMask", "hasLeftIcon", "hasRightIcon", "m
 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 { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { getStyles } from "../InternalMaskedInput.styles";
+import { styles } from "../InternalMaskedInput.styles";
 export var MaskedInputDataTids = {
   root: 'MaskedInput__root'
 };
@@ -129,13 +129,9 @@ export var InternalMaskedInput = /*#__PURE__*/function (_React$PureComponent) {
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      _this2.styles = getStyles(_this2.emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   };
   _proto.renderMain = function renderMain() {
@@ -159,7 +155,6 @@ export var InternalMaskedInput = /*#__PURE__*/function (_React$PureComponent) {
         color: 'transparent'
       }
     }, emptyValue.slice(0, originValue.length));
-    var styles = this.styles;
     var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && styles.inputMaskLeft();
     var rightHelper = emptyValue.slice(originValue.length).split('').map(function (_char, i) {
       return _char === '_' ? /*#__PURE__*/React.createElement(MaskCharLowLine, {
@@ -183,7 +178,8 @@ export var InternalMaskedInput = /*#__PURE__*/function (_React$PureComponent) {
       ref: this.refMaskedInput,
       style: _extends({}, style)
     })), this.isMaskVisible() && /*#__PURE__*/React.createElement("span", {
-      className: this.emotion.cx(styles.inputMask(this.theme), leftClass)
+      className: cx(styles.inputMask(this.theme), leftClass),
+      translate: "no"
     }, leftHelper, rightHelper));
   };
   return InternalMaskedInput;

package/internal/InternalMaskedInput/InternalMaskedInput/InternalMaskedInput.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","ReactInputMask","isNonNullable","MaskCharLowLine","EmotionConsumer","createPropsGetter","ThemeContext","getStyles","MaskedInputDataTids","root","InternalMaskedInput","_React$PureComponent","props","_this","call","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","_inheritsLoose","_proto","prototype","componentDidMount","forceUpdate","componentDidUpdate","prevProps","render","_this2","createElement","emotion","styles","Consumer","theme","renderMain","_this$props","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","_objectWithoutPropertiesLoose","_excluded","_this$state","leftHelper","textAlign","color","slice","leftClass","inputMaskLeft","rightHelper","map","_char","i","key","className","container","_extends","beforeMaskedValueChange","inputRef","ref","cx","inputMask","PureComponent","__KONTUR_REACT_UI__","displayName"],"sources":["InternalMaskedInput.tsx"],"sourcesContent":["import React from 'react';\nimport ReactInputMask, { InputState } from 'react-input-mask';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isNonNullable } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './InternalMaskedInput.styles';\n\nexport interface InternalMaskedInputProps 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<InternalMaskedInputProps, 'maskChar'>>;\n\nexport const MaskedInputDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\n/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.\n * todo: выпилить в 5 версии библиотеки.\n * */\nexport class InternalMaskedInput extends React.PureComponent<InternalMaskedInputProps, MaskedInputState> {\n  public static __KONTUR_REACT_UI__ = 'InternalMaskedInput';\n  public static displayName = 'InternalMaskedInput';\n\n  public static defaultProps: DefaultProps = {\n    maskChar: '_',\n  };\n\n  private getProps = createPropsGetter(InternalMaskedInput.defaultProps);\n\n  public input: HTMLInputElement | null = null;\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private styles!: ReturnType<typeof getStyles>;\n  private reactInputMask: ReactInputMask | null = null;\n\n  public constructor(props: InternalMaskedInputProps) {\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: InternalMaskedInputProps) {\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          this.styles = getStyles(this.emotion);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return this.renderMain();\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\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 styles = this.styles;\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          // @ts-expect-error InternalMaskedInput will be deleted in 5.0\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={this.emotion.cx(styles.inputMask(this.theme), leftClass)}>\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  private getValue = (props: InternalMaskedInputProps): 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: Pick<InternalMaskedInputProps, '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      // @ts-expect-error InternalMaskedInput will be deleted in 5.0\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","ReactInputMask","isNonNullable","ThemeContext","MaskCharLowLine","cx","createPropsGetter","styles","MaskedInputDataTids","root","InternalMaskedInput","_React$PureComponent","props","_this","call","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","_inheritsLoose","_proto","prototype","componentDidMount","forceUpdate","componentDidUpdate","prevProps","render","_this2","createElement","Consumer","theme","renderMain","_this$props","hasLeftIcon","hasRightIcon","maxLength","style","inputProps","_objectWithoutPropertiesLoose","_excluded","_this$state","leftHelper","textAlign","color","slice","leftClass","inputMaskLeft","rightHelper","map","_char","i","key","className","container","_extends","beforeMaskedValueChange","inputRef","ref","inputMask","translate","PureComponent","__KONTUR_REACT_UI__","displayName"],"sources":["InternalMaskedInput.tsx"],"sourcesContent":["import React from 'react';\nimport ReactInputMask, { InputState } 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 './InternalMaskedInput.styles';\n\nexport interface InternalMaskedInputProps 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<InternalMaskedInputProps, 'maskChar'>>;\n\nexport const MaskedInputDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\n/** @deprecated Со следующей мажорной версии Input перестанет поддерживать маску.\n * todo: выпилить в 5 версии библиотеки.\n * */\nexport class InternalMaskedInput extends React.PureComponent<InternalMaskedInputProps, MaskedInputState> {\n  public static __KONTUR_REACT_UI__ = 'InternalMaskedInput';\n  public static displayName = 'InternalMaskedInput';\n\n  public static defaultProps: DefaultProps = {\n    maskChar: '_',\n  };\n\n  private getProps = createPropsGetter(InternalMaskedInput.defaultProps);\n\n  public input: HTMLInputElement | null = null;\n  private theme!: Theme;\n  private reactInputMask: ReactInputMask | null = null;\n\n  public constructor(props: InternalMaskedInputProps) {\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: InternalMaskedInputProps) {\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          // @ts-expect-error InternalMaskedInput will be deleted in 5.0\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)} translate=\"no\">\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n  }\n\n  private getValue = (props: InternalMaskedInputProps): 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: Pick<InternalMaskedInputProps, '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      // @ts-expect-error InternalMaskedInput will be deleted in 5.0\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"],"mappings":"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","ignoreList":[]}

package/internal/InternalMaskedInput/InternalMaskedInput.d.ts

@@ -31,8 +31,6 @@ export declare class InternalMaskedInput extends React.PureComponent<InternalMas
     private getProps;
     input: HTMLInputElement | null;
     private theme;
-    private emotion;
-    private styles;
     private reactInputMask;
     constructor(props: InternalMaskedInputProps);
     componentDidMount(): void;

package/internal/InternalMaskedInput/InternalMaskedInput.styles/InternalMaskedInput.styles.js

@@ -1,16 +1,14 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    container: function container() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        display: inline-flex;\n        position: relative;\n        font-size: inherit;\n        flex: 100% 1 1;\n      "])));
-    },
-    inputMask: function inputMask(t) {
-      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        pointer-events: none;\n        font-size: inherit;\n        z-index: 5;\n        user-select: none;\n      "])), t.placeholderColor);
-    },
-    inputMaskLeft: function inputMaskLeft() {
-      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  container: function container() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      display: inline-flex;\n      position: relative;\n      font-size: inherit;\n      flex: 100% 1 1;\n    "])));
+  },
+  inputMask: function inputMask(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      pointer-events: none;\n      font-size: inherit;\n      z-index: 5;\n      user-select: none;\n    "])), t.placeholderColor);
+  },
+  inputMaskLeft: function inputMaskLeft() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n    "])));
+  }
+});

package/internal/InternalMaskedInput/InternalMaskedInput.styles/InternalMaskedInput.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","container","css","_templateObject","_taggedTemplateLiteralLoose","inputMask","t","_templateObject2","placeholderColor","inputMaskLeft","_templateObject3"],"sources":["InternalMaskedInput.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    container() {\n      return emotion.css`\n        display: inline-flex;\n        position: relative;\n        font-size: inherit;\n        flex: 100% 1 1;\n      `;\n    },\n    inputMask(t: Theme) {\n      return emotion.css`\n        color: ${t.placeholderColor};\n        pointer-events: none;\n        font-size: inherit;\n        z-index: 5;\n        user-select: none;\n      `;\n    },\n    inputMaskLeft() {\n      return emotion.css`\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;;AAGxD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,SAAS,WAAAA,UAAA,EAAG;QACV,OAAOD,OAAO,CAACE,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;MAMpB,CAAC;MACDC,SAAS,WAAAA,UAACC,CAAQ,EAAE;QAClB,OAAON,OAAO,CAACE,GAAG,CAAAK,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;QACPE,CAAC,CAACE,gBAAgB;;;;;;MAM/B,CAAC;MACDC,aAAa,WAAAA,cAAA,EAAG;QACd,OAAOT,OAAO,CAACE,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;MAMpB;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","container","_templateObject","_taggedTemplateLiteralLoose","inputMask","t","_templateObject2","placeholderColor","inputMaskLeft","_templateObject3"],"sources":["InternalMaskedInput.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  container() {\n    return css`\n      display: inline-flex;\n      position: relative;\n      font-size: inherit;\n      flex: 100% 1 1;\n    `;\n  },\n  inputMask(t: Theme) {\n    return css`\n      color: ${t.placeholderColor};\n      pointer-events: none;\n      font-size: inherit;\n      z-index: 5;\n      user-select: none;\n    `;\n  },\n  inputMaskLeft() {\n    return css`\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n    `;\n  },\n});\n"],"mappings":"wJAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,SAAS,WAAAA,UAAA,EAAG;IACV,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;EAMZ,CAAC;EACDC,SAAS,WAAAA,UAACC,CAAQ,EAAE;IAClB,OAAOP,GAAG,CAAAQ,gBAAA,KAAAA,gBAAA,GAAAH,2BAAA;IACCE,CAAC,CAACE,gBAAgB;;;;;;EAM/B,CAAC;EACDC,aAAa,WAAAA,cAAA,EAAG;IACd,OAAOV,GAAG,CAAAW,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;;;;EAMZ;AACF,CAAC,CAAC","ignoreList":[]}

package/internal/InternalMaskedInput/InternalMaskedInput.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     container(): string;
     inputMask(t: Theme): string;
     inputMaskLeft(): string;

package/internal/MaskCharLowLine/MaskCharLowLine/MaskCharLowLine.js

@@ -1,6 +1,5 @@
-import React, { useContext } from 'react';
-import { EmotionContext } from "../../../lib/theming/Emotion";
-import { getStyles } from "../MaskCharLowLine.styles";
+import React from 'react';
+import { styles } from "../MaskCharLowLine.styles";
 
 /**
  * FIGURE SPACE
@@ -11,8 +10,6 @@ import { getStyles } from "../MaskCharLowLine.styles";
  */
 export var MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);
 export var MaskCharLowLine = function MaskCharLowLine() {
-  var emotion = useContext(EmotionContext);
-  var styles = getStyles(emotion);
   return /*#__PURE__*/React.createElement("span", {
     className: styles.root()
   }, MASK_CHAR_EXEMPLAR);

package/internal/MaskCharLowLine/MaskCharLowLine/MaskCharLowLine.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useContext","EmotionContext","getStyles","MASK_CHAR_EXEMPLAR","String","fromCharCode","MaskCharLowLine","emotion","styles","createElement","className","root"],"sources":["MaskCharLowLine.tsx"],"sourcesContent":["import React, { useContext } from 'react';\n\nimport { EmotionContext } from '../../lib/theming/Emotion';\n\nimport { getStyles } from './MaskCharLowLine.styles';\n\n/**\n * FIGURE SPACE\n *\n * space equal to tabular width of a font this is equivalent to the digit width of fonts with fixed-width digits\n *\n * @see http://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nexport const MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);\n\nexport const MaskCharLowLine = () => {\n  const emotion = useContext(EmotionContext);\n  const styles = getStyles(emotion);\n  return <span className={styles.root()}>{MASK_CHAR_EXEMPLAR}</span>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,UAAU,QAAQ,OAAO;;AAEzC,SAASC,cAAc,QAAQ,2BAA2B;;AAE1D,SAASC,SAAS,QAAQ,0BAA0B;;AAEpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;;AAE7D,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAA,EAAS;EACnC,IAAMC,OAAO,GAAGP,UAAU,CAACC,cAAc,CAAC;EAC1C,IAAMO,MAAM,GAAGN,SAAS,CAACK,OAAO,CAAC;EACjC,oBAAOR,KAAA,CAAAU,aAAA,WAAMC,SAAS,EAAEF,MAAM,CAACG,IAAI,CAAC,CAAE,IAAER,kBAAyB,CAAC;AACpE,CAAC","ignoreList":[]}
+{"version":3,"names":["React","styles","MASK_CHAR_EXEMPLAR","String","fromCharCode","MaskCharLowLine","createElement","className","root"],"sources":["MaskCharLowLine.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styles } from './MaskCharLowLine.styles';\n\n/**\n * FIGURE SPACE\n *\n * space equal to tabular width of a font this is equivalent to the digit width of fonts with fixed-width digits\n *\n * @see http://www.fileformat.info/info/unicode/char/2007/index.htm\n */\nexport const MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);\n\nexport const MaskCharLowLine = () => <span className={styles.root()}>{MASK_CHAR_EXEMPLAR}</span>;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;;AAEzB,SAASC,MAAM,QAAQ,0BAA0B;;AAEjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,IAAMC,kBAAkB,GAAGC,MAAM,CAACC,YAAY,CAAC,MAAM,CAAC;;AAE7D,OAAO,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,CAAA,uBAASL,KAAA,CAAAM,aAAA,WAAMC,SAAS,EAAEN,MAAM,CAACO,IAAI,CAAC,CAAE,IAAEN,kBAAyB,CAAC","ignoreList":[]}

package/internal/MaskCharLowLine/MaskCharLowLine.styles/MaskCharLowLine.styles.js

@@ -1,10 +1,8 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject;
-import { memoizeStyle } from "../../../lib/theming/Emotion";
-export var getStyles = function getStyles(emotion) {
-  return memoizeStyle({
-    root: function root() {
-      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        position: relative;\n\n        &:after {\n          content: '';\n          position: absolute;\n          width: calc(100% - 0.1em);\n          height: 1px;\n          left: 0.05em;\n          bottom: 0.11em;\n          border-bottom: solid 0.05em;\n        }\n      "])));
-    }
-  });
-};
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        width: calc(100% - 0.1em);\n        height: 1px;\n        left: 0.05em;\n        bottom: 0.11em;\n        border-bottom: solid 0.05em;\n      }\n    "])));
+  }
+});

package/internal/MaskCharLowLine/MaskCharLowLine.styles/MaskCharLowLine.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","getStyles","emotion","root","css","_templateObject","_taggedTemplateLiteralLoose"],"sources":["MaskCharLowLine.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        position: relative;\n\n        &:after {\n          content: '';\n          position: absolute;\n          width: calc(100% - 0.1em);\n          height: 1px;\n          left: 0.05em;\n          bottom: 0.11em;\n          border-bottom: solid 0.05em;\n        }\n      `;\n    },\n  });\n"],"mappings":";;AAEA,SAASA,YAAY,QAAQ,2BAA2B;;AAExD,OAAO,IAAMC,SAAS,GAAG,SAAZA,SAASA,CAAIC,OAAgB;IACxCF,YAAY,CAAC;MACXG,IAAI,WAAAA,KAAA,EAAG;QACL,OAAOD,OAAO,CAACE,GAAG,CAAAC,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;;;;;;;MAapB;IACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose"],"sources":["MaskCharLowLine.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      position: relative;\n\n      &:after {\n        content: '';\n        position: absolute;\n        width: calc(100% - 0.1em);\n        height: 1px;\n        left: 0.05em;\n        bottom: 0.11em;\n        border-bottom: solid 0.05em;\n      }\n    `;\n  },\n});\n"],"mappings":"oHAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;AAE7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;;;;;;;;;;;EAaZ;AACF,CAAC,CAAC","ignoreList":[]}

package/internal/MaskCharLowLine/MaskCharLowLine.styles.d.ts

@@ -1,4 +1,3 @@
-import type { Emotion } from '@emotion/css/create-instance';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(): string;
 };

package/internal/Menu/Menu/Menu.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _Menu;
 import React from 'react';
@@ -10,13 +11,14 @@ import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator
 import { isNonNullable } from "../../../lib/utils";
 import { ScrollContainer } from "../../../components/ScrollContainer";
 import { MenuItemDataTids } from "../../../components/MenuItem";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { isIE11 } from "../../../lib/client";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isInstanceOf } from "../../../lib/isInstanceOf";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
-import { getStyles } from "../Menu.styles";
+import { CommonWrapper } from "../../CommonWrapper";
+import { styles } from "../Menu.styles";
 import { MenuNavigation } from "../MenuNavigation";
 import { MenuContext } from "../MenuContext";
 export var MenuDataTids = {
@@ -46,11 +48,10 @@ export var Menu = responsiveLayout(_class = rootNode(_class = (_Menu = /*#__PURE
       }
     };
     _this.renderHeader = function () {
-      var _this$emotion$cx;
-      var styles = _this.styles;
+      var _cx;
       return /*#__PURE__*/(
         React.createElement("div", {
-          className: _this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.wrapper()] = true, _this$emotion$cx[styles.headerWrapper()] = true, _this$emotion$cx)),
+          className: cx((_cx = {}, _cx[styles.wrapper()] = true, _cx[styles.headerWrapper()] = true, _cx)),
           ref: function ref(el) {
             return _this.header = el;
           }
@@ -65,11 +66,10 @@ export var Menu = responsiveLayout(_class = rootNode(_class = (_Menu = /*#__PURE
       );
     };
     _this.renderFooter = function () {
-      var _this$emotion$cx2;
-      var styles = _this.styles;
+      var _cx2;
       return /*#__PURE__*/(
         React.createElement("div", {
-          className: _this.emotion.cx((_this$emotion$cx2 = {}, _this$emotion$cx2[styles.wrapper()] = true, _this$emotion$cx2[styles.footerWrapper()] = true, _this$emotion$cx2)),
+          className: cx((_cx2 = {}, _cx2[styles.wrapper()] = true, _cx2[styles.footerWrapper()] = true, _cx2)),
           ref: function ref(el) {
             return _this.footer = el;
           }
@@ -229,13 +229,9 @@ export var Menu = responsiveLayout(_class = rootNode(_class = (_Menu = /*#__PURE
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      _this2.styles = getStyles(_this2.emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = theme;
-        return _this2.renderMain();
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
     });
   } /**
     * @public
@@ -269,7 +265,7 @@ export var Menu = responsiveLayout(_class = rootNode(_class = (_Menu = /*#__PURE
     this.menuNavigation.highlightByIndex(index);
   };
   _proto.renderMain = function renderMain() {
-    var _this$emotion$cx3, _this$emotion$cx4;
+    var _cx3, _cx4;
     if (this.isEmpty()) {
       return null;
     }
@@ -283,14 +279,14 @@ export var Menu = responsiveLayout(_class = rootNode(_class = (_Menu = /*#__PURE
       bottom: "" + this.theme.scrollContainerScrollBarOffsetY
     };
     var isMobile = this.isMobileLayout;
-    var styles = this.styles;
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
       "data-tid": MenuDataTids.root,
-      className: this.emotion.cx(getAlignRightClass(this.emotion)(this.props), (_this$emotion$cx3 = {}, _this$emotion$cx3[styles.root(this.theme)] = true, _this$emotion$cx3[styles.hasMargin(this.theme)] = hasMargin, _this$emotion$cx3[styles.mobileRoot(this.theme)] = isMobile, _this$emotion$cx3[styles.shadow(this.theme)] = !isMobile, _this$emotion$cx3)),
+      className: cx(getAlignRightClass(this.props), (_cx3 = {}, _cx3[styles.root(this.theme)] = true, _cx3[styles.hasMargin(this.theme)] = hasMargin, _cx3[styles.mobileRoot(this.theme)] = isMobile, _cx3[styles.shadow(this.theme)] = !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,
@@ -300,7 +296,7 @@ export var Menu = responsiveLayout(_class = rootNode(_class = (_Menu = /*#__PURE
       disabled: this.props.disableScrollContainer,
       offsetY: offsetY
     }, /*#__PURE__*/React.createElement("div", {
-      className: this.emotion.cx((_this$emotion$cx4 = {}, _this$emotion$cx4[styles.scrollContainer(this.theme)] = true, _this$emotion$cx4[styles.scrollContainerMobile(this.theme)] = isMobile, _this$emotion$cx4)),
+      className: cx((_cx4 = {}, _cx4[styles.scrollContainer(this.theme)] = true, _cx4[styles.scrollContainerMobile(this.theme)] = isMobile, _cx4)),
       ref: this.contentRef
     }, /*#__PURE__*/React.createElement(MenuContext.Provider, {
       value: {
@@ -309,7 +305,7 @@ export var Menu = responsiveLayout(_class = rootNode(_class = (_Menu = /*#__PURE
         enableIconPadding: this.state.enableIconPadding,
         setEnableIconPadding: this.setEnableIconPadding
       }
-    }, this.props.children))), this.props.footer && this.renderFooter());
+    }, this.props.children))), this.props.footer && this.renderFooter()));
   };
   _proto.move = function move(step) {
     if (this.unmounted) {
@@ -340,13 +336,10 @@ function childrenToArray(children) {
   });
   return ret;
 }
-var getAlignRightClass = function getAlignRightClass(emotion) {
-  return function (props) {
-    var styles = getStyles(emotion);
-    if (props.align === 'right') {
-      var _emotion$cx;
-      return emotion.cx((_emotion$cx = {}, _emotion$cx[styles.alignRight()] = !isIE11, _emotion$cx[styles.alignRightIE11()] = isIE11, _emotion$cx[styles.alignRightIE11FixAutoWidth()] = isIE11 && props.width === 'auto', _emotion$cx));
-    }
-    return null;
-  };
+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;
 };