@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

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

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

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

@@ -1 +1 @@
-{"version":3,"sources":["InternalMenu.styles.ts"],"names":["getStyles","emotion","root","t","css","internalMenuPaddingY","menuPaddingX","bgSecondary","mobileRoot","mobileMenuPaddingX","shadow","menuBorder","menuShadow","wrapper","headerWrapper","footerWrapper","contentWrapper","menuSeparatorWrapper","menuSeparatorBorderWidth"],"mappings":";;AAEA,oD;;;AAGO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,gBACNC,CADM,EACI;AACb,eAAOF,OAAO,CAACG,GAAf;AACaD,QAAAA,CAAC,CAACE,oBADf,EACuCF,CAAC,CAACG,YADzC;;;AAIgBH,QAAAA,CAAC,CAACI,WAJlB;;AAMD,OARU;;AAUXC,MAAAA,UAVW,sBAUAL,CAVA,EAUU;AACnB,eAAOF,OAAO,CAACG,GAAf;AACeD,QAAAA,CAAC,CAACM,kBADjB;;AAGD,OAdU;;AAgBXC,MAAAA,MAhBW,kBAgBJP,CAhBI,EAgBM;AACf,eAAOF,OAAO,CAACG,GAAf;AACYD,QAAAA,CAAC,CAACQ,UADd;AAEgBR,QAAAA,CAAC,CAACS,UAFlB;;AAID,OArBU;;AAuBXC,MAAAA,OAvBW,qBAuBD;AACR,eAAOZ,OAAO,CAACG,GAAf;;;;;;;;AAQD,OAhCU;;AAkCXU,MAAAA,aAlCW,2BAkCK;AACd,eAAOb,OAAO,CAACG,GAAf;;;AAGD,OAtCU;;AAwCXW,MAAAA,aAxCW,2BAwCK;AACd,eAAOd,OAAO,CAACG,GAAf;;;AAGD,OA5CU;;AA8CXY,MAAAA,cA9CW,4BA8CM;AACf,eAAOf,OAAO,CAACG,GAAf;;;AAGD,OAlDU;;AAoDXa,MAAAA,oBApDW,gCAoDUd,CApDV,EAoDoB;AAC7B,eAAOF,OAAO,CAACG,GAAf;AACYD,QAAAA,CAAC,CAACe,wBADd;;AAGD,OAxDU,EAAb,CADuB,GAAlB,C","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    root(t: Theme) {\n      return emotion.css`\n        padding: ${t.internalMenuPaddingY} ${t.menuPaddingX};\n        outline: none;\n        box-sizing: content-box;\n        background: ${t.bgSecondary};\n      `;\n    },\n\n    mobileRoot(t: Theme) {\n      return emotion.css`\n        padding: 0 ${t.mobileMenuPaddingX};\n      `;\n    },\n\n    shadow(t: Theme) {\n      return emotion.css`\n        border: ${t.menuBorder};\n        box-shadow: ${t.menuShadow};\n      `;\n    },\n\n    wrapper() {\n      return emotion.css`\n        position: relative;\n        z-index: 1;\n        width: 100%;\n        overflow: hidden;\n        line-height: 18px;\n        box-sizing: border-box;\n      `;\n    },\n\n    headerWrapper() {\n      return emotion.css`\n        top: -5px;\n      `;\n    },\n\n    footerWrapper() {\n      return emotion.css`\n        bottom: -5px;\n      `;\n    },\n\n    contentWrapper() {\n      return emotion.css`\n        padding: 6px 18px 7px 8px;\n      `;\n    },\n\n    menuSeparatorWrapper(t: Theme) {\n      return emotion.css`\n        height: ${t.menuSeparatorBorderWidth};\n      `;\n    },\n  });\n"]}
+{"version":3,"sources":["InternalMenu.styles.ts"],"names":["styles","root","t","css","internalMenuPaddingY","menuPaddingX","bgSecondary","mobileRoot","mobileMenuPaddingX","shadow","menuBorder","menuShadow","wrapper","headerWrapper","footerWrapper","contentWrapper","menuSeparatorWrapper","menuSeparatorBorderWidth"],"mappings":"oRAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,eAAOC,YAAP;AACaD,IAAAA,CAAC,CAACE,oBADf,EACuCF,CAAC,CAACG,YADzC;;;AAIgBH,IAAAA,CAAC,CAACI,WAJlB;;AAMD,GARgC;;AAUjCC,EAAAA,UAViC,sBAUtBL,CAVsB,EAUZ;AACnB,eAAOC,YAAP;AACeD,IAAAA,CAAC,CAACM,kBADjB;;AAGD,GAdgC;;AAgBjCC,EAAAA,MAhBiC,kBAgB1BP,CAhB0B,EAgBhB;AACf,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACQ,UADd;AAEgBR,IAAAA,CAAC,CAACS,UAFlB;;AAID,GArBgC;;AAuBjCC,EAAAA,OAvBiC,qBAuBvB;AACR,eAAOT,YAAP;;;;;;;;AAQD,GAhCgC;;AAkCjCU,EAAAA,aAlCiC,2BAkCjB;AACd,eAAOV,YAAP;;;AAGD,GAtCgC;;AAwCjCW,EAAAA,aAxCiC,2BAwCjB;AACd,eAAOX,YAAP;;;AAGD,GA5CgC;;AA8CjCY,EAAAA,cA9CiC,4BA8ChB;AACf,eAAOZ,YAAP;;;AAGD,GAlDgC;;AAoDjCa,EAAAA,oBApDiC,gCAoDZd,CApDY,EAoDF;AAC7B,eAAOC,YAAP;AACYD,IAAAA,CAAC,CAACe,wBADd;;AAGD,GAxDgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      padding: ${t.internalMenuPaddingY} ${t.menuPaddingX};\n      outline: none;\n      box-sizing: content-box;\n      background: ${t.bgSecondary};\n    `;\n  },\n\n  mobileRoot(t: Theme) {\n    return css`\n      padding: 0 ${t.mobileMenuPaddingX};\n    `;\n  },\n\n  shadow(t: Theme) {\n    return css`\n      border: ${t.menuBorder};\n      box-shadow: ${t.menuShadow};\n    `;\n  },\n\n  wrapper() {\n    return css`\n      position: relative;\n      z-index: 1;\n      width: 100%;\n      overflow: hidden;\n      line-height: 18px;\n      box-sizing: border-box;\n    `;\n  },\n\n  headerWrapper() {\n    return css`\n      top: -5px;\n    `;\n  },\n\n  footerWrapper() {\n    return css`\n      bottom: -5px;\n    `;\n  },\n\n  contentWrapper() {\n    return css`\n      padding: 6px 18px 7px 8px;\n    `;\n  },\n\n  menuSeparatorWrapper(t: Theme) {\n    return css`\n      height: ${t.menuSeparatorBorderWidth};\n    `;\n  },\n});\n"]}

package/cjs/internal/MaskCharLowLine/MaskCharLowLine.js

@@ -1,7 +1,5 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.MaskCharLowLine = exports.MASK_CHAR_EXEMPLAR = void 0;var _react = _interopRequireDefault(require("react"));
 
-var _Emotion = require("../../lib/theming/Emotion");
-
 var _MaskCharLowLine = require("./MaskCharLowLine.styles");
 
 /**
@@ -13,8 +11,4 @@ var _MaskCharLowLine = require("./MaskCharLowLine.styles");
  */
 var MASK_CHAR_EXEMPLAR = String.fromCharCode(0x2007);exports.MASK_CHAR_EXEMPLAR = MASK_CHAR_EXEMPLAR;
 
-var MaskCharLowLine = function MaskCharLowLine() {
-  var emotion = (0, _Emotion.useEmotion)();
-  var styles = (0, _MaskCharLowLine.getStyles)(emotion);
-  return /*#__PURE__*/_react.default.createElement("span", { className: styles.root() }, MASK_CHAR_EXEMPLAR);
-};exports.MaskCharLowLine = MaskCharLowLine;
+var MaskCharLowLine = function MaskCharLowLine() {return /*#__PURE__*/_react.default.createElement("span", { className: _MaskCharLowLine.styles.root() }, MASK_CHAR_EXEMPLAR);};exports.MaskCharLowLine = MaskCharLowLine;

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

@@ -1 +1 @@
-{"version":3,"sources":["MaskCharLowLine.tsx"],"names":["MASK_CHAR_EXEMPLAR","String","fromCharCode","MaskCharLowLine","emotion","styles","root"],"mappings":"kMAAA;;AAEA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,kBAAkB,GAAGC,MAAM,CAACC,YAAP,CAAoB,MAApB,CAA3B,C;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,GAAM;AACnC,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,gCAAUD,OAAV,CAAf;AACA,sBAAO,uCAAM,SAAS,EAAEC,MAAM,CAACC,IAAP,EAAjB,IAAiCN,kBAAjC,CAAP;AACD,CAJM,C","sourcesContent":["import React from 'react';\n\nimport { useEmotion } 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 = useEmotion();\n  const styles = getStyles(emotion);\n  return <span className={styles.root()}>{MASK_CHAR_EXEMPLAR}</span>;\n};\n"]}
+{"version":3,"sources":["MaskCharLowLine.tsx"],"names":["MASK_CHAR_EXEMPLAR","String","fromCharCode","MaskCharLowLine","styles","root"],"mappings":"kMAAA;;AAEA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,IAAMA,kBAAkB,GAAGC,MAAM,CAACC,YAAP,CAAoB,MAApB,CAA3B,C;;AAEA,IAAMC,eAAe,GAAG,SAAlBA,eAAkB,wBAAM,uCAAM,SAAS,EAAEC,wBAAOC,IAAP,EAAjB,IAAiCL,kBAAjC,CAAN,EAAxB,C","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"]}

package/cjs/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/cjs/internal/MaskCharLowLine/MaskCharLowLine.styles.js

@@ -1,11 +1,9 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
 
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject;
+var styles = (0, _Emotion.memoizeStyle)({
+  root: function root() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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    "])));
 
-var getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      root: function root() {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\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      "])));
 
 
 
@@ -17,5 +15,4 @@ var getStyles = function getStyles(emotion) {return (
 
 
 
-
-      } }));};exports.getStyles = getStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["MaskCharLowLine.styles.ts"],"names":["getStyles","emotion","root","css"],"mappings":";;AAEA,oD;;AAEO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,IADW,kBACJ;AACL,eAAOD,OAAO,CAACE,GAAf;;;;;;;;;;;;;AAaD,OAfU,EAAb,CADuB,GAAlB,C","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"]}
+{"version":3,"sources":["MaskCharLowLine.styles.ts"],"names":["styles","root","css"],"mappings":"oRAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;;;;;;;;;;;AAaD,GAfgC,EAAb,CAAf,C","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"]}

package/cjs/internal/MaskedInputElement/MaskedInputElement.js

@@ -1,11 +1,11 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.MaskedInputElementDataTids = exports.MaskedInputElement = void 0;var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireWildcard(require("react"));
 var _reactImask = require("react-imask");
 
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _MaskCharLowLine = require("../MaskCharLowLine");
 var _Emotion = require("../../lib/theming/Emotion");
 
 var _forwardRefAndName = require("../../lib/forwardRefAndName");
-var _useTheme = require("../../lib/theming/useTheme");
 
 var _MaskedInputElement = require("./MaskedInputElement.styles");
 var _MaskedInputElement2 = require("./MaskedInputElement.helpers");var _excluded = ["mask", "maskChar", "formatChars", "alwaysShowMask", "maxLength", "onUnexpectedInput", "defaultValue", "style"];
@@ -35,9 +35,7 @@ function MaskedInputElement(props, ref) {
   var _useState3 = (0, _react.useState)(false),focused = _useState3[0],setFocused = _useState3[1];
   var inputRef = (0, _react.useRef)(null);
   var rootNodeRef = _react.default.useRef(null);
-  var theme = (0, _useTheme.useTheme)();
-  var emotion = (0, _Emotion.useEmotion)();
-  var styles = (0, _MaskedInputElement.getStyles)(emotion);
+  var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
   var expectedChangesRef = (0, _react.useRef)(false);
   var isFirstRender = (0, _react.useRef)(true);
 
@@ -79,7 +77,7 @@ function MaskedInputElement(props, ref) {
 
   props.mask,maskChar = props.maskChar,formatChars = props.formatChars,alwaysShowMask = props.alwaysShowMask,maxLength = props.maxLength,onUnexpectedInput = props.onUnexpectedInput,defaultValue = props.defaultValue,style = props.style,inputProps = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
-  var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && styles.inputMaskLeft();
+  var leftClass = (style == null ? void 0 : style.textAlign) !== 'right' && _MaskedInputElement.styles.inputMaskLeft();
   var _getCurrentValue = (0, _MaskedInputElement2.getCurrentValue)({ value: value, originValue: originValue, emptyValue: emptyValue }, focused, maskChar),currentValue = _getCurrentValue[0],left = _getCurrentValue[1],right = _getCurrentValue[2];
 
   /* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').
@@ -93,7 +91,7 @@ function MaskedInputElement(props, ref) {
     _react.default.createElement("span", {
       "data-tid": MaskedInputElementDataTids.root,
       ref: rootNodeRef,
-      className: styles.container(),
+      className: _MaskedInputElement.styles.container(),
       "x-ms-format-detection": "none" }, /*#__PURE__*/
 
     _react.default.createElement(_reactImask.IMaskInput, (0, _extends2.default)({},
@@ -111,7 +109,7 @@ function MaskedInputElement(props, ref) {
       style: (0, _extends2.default)({}, style) })),
 
     isMaskVisible && /*#__PURE__*/
-    _react.default.createElement("span", { className: emotion.cx(styles.inputMask(theme), leftClass) },
+    _react.default.createElement("span", { className: (0, _Emotion.cx)(_MaskedInputElement.styles.inputMask(theme), leftClass) },
     leftHelper,
     rightHelper)));
 

package/cjs/internal/MaskedInputElement/MaskedInputElement.js.map

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInputElement.tsx"],"names":["MaskedInputElementDataTids","root","MaskedInputElement","props","ref","value","getValue","originValue","values","setValues","emptyValue","setEmptyValue","focused","setFocused","inputRef","rootNodeRef","React","useRef","theme","emotion","styles","expectedChangesRef","isFirstRender","input","current","getRootNode","getEmptyValue","mask","maskChar","formatChars","toString","alwaysShowMask","maxLength","onUnexpectedInput","defaultValue","style","inputProps","leftClass","textAlign","inputMaskLeft","currentValue","left","right","rightHelper","split","map","_char","i","leftHelper","color","isMaskVisible","container","handleAccept","handleInput","handleFocus","handleBlur","cx","inputMask","setTimeout","e","target","handleUnexpectedInput","event","onFocus","onBlur","maskPattern","IMask","createMask","definitions","lazy","placeholderChar","appendTail","inserted"],"mappings":"0fAAA;AACA;;AAEA;AACA;;AAEA;AACA;;AAEA;AACA,mE;;;;;;;;;;AAUO,IAAMA,0BAA0B,GAAG;AACxCC,EAAAA,IAAI,EAAE,mBADkC,EAAnC,C;;;AAIA,IAAMC,kBAAkB,GAAG;AAChC,oBADgC;AAEhC,SAASA,kBAAT,CAA4BC,KAA5B,EAA4DC,GAA5D,EAA6F;AAC3F,kBAA4B,qBAAiD,YAAM;AACjF,QAAMC,KAAK,GAAGC,QAAQ,CAACH,KAAD,CAAtB;AACA,WAAO,EAAEE,KAAK,EAALA,KAAF,EAASE,WAAW,EAAEF,KAAtB,EAAP;AACD,GAH2B,CAA5B,CAAOG,MAAP,gBAAeC,SAAf;AAIA,MAAQJ,KAAR,GAA+BG,MAA/B,CAAQH,KAAR,CAAeE,WAAf,GAA+BC,MAA/B,CAAeD,WAAf;;AAEA,mBAAoC,qBAAS,EAAT,CAApC,CAAOG,UAAP,iBAAmBC,aAAnB;AACA,mBAA8B,qBAAS,KAAT,CAA9B,CAAOC,OAAP,iBAAgBC,UAAhB;AACA,MAAMC,QAAQ,GAAG,mBAAgC,IAAhC,CAAjB;AACA,MAAMC,WAAW,GAAGC,eAAMC,MAAN,CAA6B,IAA7B,CAApB;AACA,MAAMC,KAAK,GAAG,yBAAd;AACA,MAAMC,OAAO,GAAG,0BAAhB;AACA,MAAMC,MAAM,GAAG,mCAAUD,OAAV,CAAf;AACA,MAAME,kBAAkB,GAAG,mBAAO,KAAP,CAA3B;AACA,MAAMC,aAAa,GAAG,mBAAO,IAAP,CAAtB;;AAEA;AACElB,EAAAA,GADF;AAEE,sBAAO;AACLmB,MAAAA,KAAK,EAAET,QAAQ,CAACU,OADX;AAELC,MAAAA,WAAW,EAAE,+BAAMV,WAAW,CAACS,OAAlB,EAFR,EAAP,EAFF;;AAME,IANF;;;AASA,wBAAU,YAAM;AACdb,IAAAA,aAAa,CAACe,aAAa,CAACvB,KAAK,CAACwB,IAAP,EAAaxB,KAAK,CAACyB,QAAnB,EAA6BzB,KAAK,CAAC0B,WAAnC,CAAd,CAAb;AACD,GAFD,EAEG,CAAC1B,KAAK,CAACwB,IAAP,EAAaxB,KAAK,CAACyB,QAAnB,CAFH;;AAIA,wBAAU,YAAM;AACd,QAAIN,aAAa,CAACE,OAAlB,EAA2B;AACzB;AACD;;AAED,QAAMnB,KAAK,GAAGF,KAAK,CAACE,KAAN,GAAcF,KAAK,CAACE,KAAN,CAAYyB,QAAZ,EAAd,GAAuC,EAArD;AACArB,IAAAA,SAAS,CAAC,UAACD,MAAD,qCAAkBA,MAAlB,IAA0BH,KAAK,EAALA,KAA1B,KAAD,CAAT;AACD,GAPD,EAOG,CAACF,KAAK,CAACE,KAAP,CAPH;;AASA,wBAAU,YAAM;AACdiB,IAAAA,aAAa,CAACE,OAAd,GAAwB,KAAxB;AACD,GAFD,EAEG,EAFH;;AAIA;AACEG,EAAAA,IADF;;;;;;;;;AAUIxB,EAAAA,KAVJ,CACEwB,IADF,CAEEC,QAFF,GAUIzB,KAVJ,CAEEyB,QAFF,CAGEC,WAHF,GAUI1B,KAVJ,CAGE0B,WAHF,CAIEE,cAJF,GAUI5B,KAVJ,CAIE4B,cAJF,CAKEC,SALF,GAUI7B,KAVJ,CAKE6B,SALF,CAMEC,iBANF,GAUI9B,KAVJ,CAME8B,iBANF,CAOEC,YAPF,GAUI/B,KAVJ,CAOE+B,YAPF,CAQEC,KARF,GAUIhC,KAVJ,CAQEgC,KARF,CASKC,UATL,+CAUIjC,KAVJ;;AAYA,MAAMkC,SAAS,GAAG,CAAAF,KAAK,QAAL,YAAAA,KAAK,CAAEG,SAAP,MAAqB,OAArB,IAAgClB,MAAM,CAACmB,aAAP,EAAlD;AACA,yBAAoC,0CAAgB,EAAElC,KAAK,EAALA,KAAF,EAASE,WAAW,EAAXA,WAAT,EAAsBG,UAAU,EAAVA,UAAtB,EAAhB,EAAoDE,OAApD,EAA6DgB,QAA7D,CAApC,CAAOY,YAAP,uBAAqBC,IAArB,uBAA2BC,KAA3B;;AAEA;AACJ;AACA;AACI,MAAMC,WAAW,GAAGD,KAAK,CAACE,KAAN,CAAY,EAAZ,EAAgBC,GAAhB,CAAoB,UAACC,KAAD,EAAQC,CAAR,UAAeD,KAAK,KAAK,GAAV,gBAAgB,6BAAC,gCAAD,IAAiB,GAAG,EAAEC,CAAtB,GAAhB,GAA8CD,KAA7D,EAApB,CAApB;AACA,MAAME,UAAU,GAAG,CAAAb,KAAK,QAAL,YAAAA,KAAK,CAAEG,SAAP,MAAqB,OAArB,iBAAgC,uCAAM,KAAK,EAAE,EAAEW,KAAK,EAAE,aAAT,EAAb,IAAwCR,IAAxC,CAAnD;AACA,MAAMS,aAAa,GAAGnB,cAAc,IAAInB,OAAxC;;AAEA;AACE;AACE,kBAAUZ,0BAA0B,CAACC,IADvC;AAEE,MAAA,GAAG,EAAEc,WAFP;AAGE,MAAA,SAAS,EAAEK,MAAM,CAAC+B,SAAP,EAHb;AAIE,+BAAsB,MAJxB;;AAME,iCAAC,sBAAD;AACMf,IAAAA,UADN;AAEE,MAAA,IAAI,EAAET,IAFR;AAGE,MAAA,WAAW,EAAE,yCAAeE,WAAf,CAHf;AAIE,MAAA,KAAK,MAJP;AAKE,MAAA,SAAS,EAAE,OALb;AAME,MAAA,QAAQ,EAAEuB,YANZ;AAOE,MAAA,OAAO,EAAEC,WAPX;AAQE,MAAA,OAAO,EAAEC,WARX;AASE,MAAA,MAAM,EAAEC,UATV;AAUE,MAAA,KAAK,EAAEf,YAVT;AAWE,MAAA,QAAQ,EAAE1B,QAXZ;AAYE,MAAA,KAAK,6BAAOqB,KAAP,CAZP,IANF;;AAoBGe,IAAAA,aAAa;AACZ,2CAAM,SAAS,EAAE/B,OAAO,CAACqC,EAAR,CAAWpC,MAAM,CAACqC,SAAP,CAAiBvC,KAAjB,CAAX,EAAoCmB,SAApC,CAAjB;AACGW,IAAAA,UADH;AAEGL,IAAAA,WAFH,CArBJ,CADF;;;;;;AA8BA,WAASrC,QAAT,CAAkBH,KAAlB,EAA0D;AACxD,WAAO,yBAACA,KAAK,CAACE,KAAP,2BAAgBF,KAAK,CAAC+B,YAAtB,mBAAsC,EAAtC,EAA0CJ,QAA1C,EAAP;AACD;;AAED;AACA,WAASsB,YAAT,CAAsB/C,KAAtB,EAAqC;AACnCgB,IAAAA,kBAAkB,CAACG,OAAnB,GAA6B,IAA7B;AACA;AACAf,IAAAA,SAAS,CAAC,EAAEJ,KAAK,EAALA,KAAF,EAASE,WAAW,EAAEF,KAAtB,EAAD,CAAT;;AAEAqD,IAAAA,UAAU,CAAC,YAAM;AACf;AACR;AACA;AACA;AACA;AACA;AACQrC,MAAAA,kBAAkB,CAACG,OAAnB,GAA6B,KAA7B;AACD,KARS,CAAV;AASD;;AAED;AACJ;AACA;AACA;AACI,WAAS6B,WAAT,CAAqBM,CAArB,EAA6D;AAC3D,QAAMtD,KAAK,GAAGsD,CAAC,CAACC,MAAF,CAASvD,KAAvB;;AAEA,QAAI,CAACgB,kBAAkB,CAACG,OAApB,IAA+BnB,KAAK,KAAKE,WAA7C,EAA0D;AACxDsD,MAAAA,qBAAqB;AACtB;;AAEDxC,IAAAA,kBAAkB,CAACG,OAAnB,GAA6B,KAA7B;AACD;;AAED,WAAS8B,WAAT,CAAqBQ,KAArB,EAAgE;AAC9DjD,IAAAA,UAAU,CAAC,IAAD,CAAV;;AAEAQ,IAAAA,kBAAkB,CAACG,OAAnB,GAA6B,KAA7B;;AAEA,QAAIrB,KAAK,CAAC4D,OAAV,EAAmB;AACjB5D,MAAAA,KAAK,CAAC4D,OAAN,CAAcD,KAAd;AACD;AACF;;AAED,WAASP,UAAT,CAAoBO,KAApB,EAA+D;AAC7D,QAAIzD,KAAK,KAAK,yCAAeK,UAAf,EAA2BkB,QAA3B,CAAd,EAAoD;AAClDnB,MAAAA,SAAS,CAAC,EAAEJ,KAAK,EAAE,EAAT,EAAaE,WAAW,EAAE,EAA1B,EAAD,CAAT;AACD;;AAEDM,IAAAA,UAAU,CAAC,KAAD,CAAV;;AAEA,QAAIV,KAAK,CAAC6D,MAAV,EAAkB;AAChB7D,MAAAA,KAAK,CAAC6D,MAAN,CAAaF,KAAb;AACD;AACF;;AAED,WAASD,qBAAT,GAAiC;AAC/B,QAAI1D,KAAK,CAAC8B,iBAAV,EAA6B;AAC3B9B,MAAAA,KAAK,CAAC8B,iBAAN,CAAwB5B,KAAxB;AACD;AACF;;AAED,WAASqB,aAAT;AACEC,EAAAA,IADF;AAEEC,EAAAA,QAFF;AAGEC,EAAAA,WAHF;AAIU;AACR,QAAMoC,WAAW,GAAGC,kBAAMC,UAAN,CAAiB;AACnCxC,MAAAA,IAAI,EAAJA,IADmC;AAEnCyC,MAAAA,WAAW,EAAE,yCAAevC,WAAf,CAFsB;AAGnCwC,MAAAA,IAAI,EAAE,KAH6B;AAInCC,MAAAA,eAAe,EAAE,sCAAY1C,QAAZ,CAJkB,EAAjB,CAApB;;AAMA,WAAOqC,WAAW,CAACM,UAAZ,CAAuB,EAAvB,EAA2BC,QAAlC;AACD;AACF,CA7K+B,CAA3B,C","sourcesContent":["import React, { ForwardedRef, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { IMask, IMaskInput } from 'react-imask';\n\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { useEmotion } from '../../lib/theming/Emotion';\nimport { InputElement, InputElementProps } from '../../components/Input';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { useTheme } from '../../lib/theming/useTheme';\n\nimport { getStyles } from './MaskedInputElement.styles';\nimport { getCurrentValue, getDefinitions, getFocusPrefix, getMaskChar } from './MaskedInputElement.helpers';\n\nexport interface MaskedInputElementProps extends InputElementProps {\n  mask: string;\n  maskChar?: string | null;\n  formatChars?: { [key: string]: string };\n  alwaysShowMask?: boolean;\n  onUnexpectedInput: (value: string) => void;\n}\n\nexport const MaskedInputElementDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\nexport const MaskedInputElement = forwardRefAndName(\n  'MaskedInputElement',\n  function MaskedInputElement(props: MaskedInputElementProps, ref: ForwardedRef<InputElement>) {\n    const [values, setValues] = useState<{ value: string; originValue: string }>(() => {\n      const value = getValue(props);\n      return { value, originValue: value };\n    });\n    const { value, originValue } = values;\n\n    const [emptyValue, setEmptyValue] = useState('');\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const rootNodeRef = React.useRef<HTMLDivElement>(null);\n    const theme = useTheme();\n    const emotion = useEmotion();\n    const styles = getStyles(emotion);\n    const expectedChangesRef = useRef(false);\n    const isFirstRender = useRef(true);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => rootNodeRef.current,\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      setEmptyValue(getEmptyValue(props.mask, props.maskChar, props.formatChars));\n    }, [props.mask, props.maskChar]);\n\n    useEffect(() => {\n      if (isFirstRender.current) {\n        return;\n      }\n\n      const value = props.value ? props.value.toString() : '';\n      setValues((values) => ({ ...values, value }));\n    }, [props.value]);\n\n    useEffect(() => {\n      isFirstRender.current = false;\n    }, []);\n\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask,\n      maxLength,\n      onUnexpectedInput,\n      defaultValue,\n      style,\n      ...inputProps\n    } = props;\n\n    const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n    const [currentValue, left, right] = getCurrentValue({ value, originValue, emptyValue }, focused, maskChar);\n\n    /* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').\n     * Не менять на DEFAULT_MASK_CHAR\n     */\n    const rightHelper = right.split('').map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n    const leftHelper = style?.textAlign !== 'right' && <span style={{ color: 'transparent' }}>{left}</span>;\n    const isMaskVisible = alwaysShowMask || focused;\n\n    return (\n      <span\n        data-tid={MaskedInputElementDataTids.root}\n        ref={rootNodeRef}\n        className={styles.container()}\n        x-ms-format-detection=\"none\"\n      >\n        <IMaskInput\n          {...inputProps}\n          mask={mask}\n          definitions={getDefinitions(formatChars)}\n          eager\n          overwrite={'shift'}\n          onAccept={handleAccept}\n          onInput={handleInput}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          value={currentValue}\n          inputRef={inputRef}\n          style={{ ...style }}\n        />\n        {isMaskVisible && (\n          <span className={emotion.cx(styles.inputMask(theme), leftClass)}>\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n\n    function getValue(props: MaskedInputElementProps): string {\n      return (props.value ?? props.defaultValue ?? '').toString();\n    }\n\n    /** В imask вызывается только когда значение с маской меняется*/\n    function handleAccept(value: string) {\n      expectedChangesRef.current = true;\n      // Если разделить на 2 setState - между первым и вторым происходит рендер и иногда символы \"съедаются\"\n      setValues({ value, originValue: value });\n\n      setTimeout(() => {\n        /** При вводе с клавиатуры срабатывает handleAccept, за ним handleInput\n         * expectedChanges - нужен чтобы сообщить из handleAccept в handleInput, что значение с маской изменилось.\n         * Если маска не изменилась и сработал handleInput, вызываем handleUnexpectedInput. Ввели значение не по маске.\n         * setTimeout нужен чтобы сбросить expectedChanges, например, если изменилось значение в пропах.\n         * Маска изменится, вызовется handleAccept, но не handleInput\n         */\n        expectedChangesRef.current = false;\n      });\n    }\n\n    /** Отслеживаем неправильные нажатия,\n     * handleAccept не вызывается когда значение с маской не меняется, а handleInput вызывается\n     * Сначала вызывается handleAccept, затем handleInput\n     * */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const value = e.target.value;\n\n      if (!expectedChangesRef.current && value === originValue) {\n        handleUnexpectedInput();\n      }\n\n      expectedChangesRef.current = false;\n    }\n\n    function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n\n      expectedChangesRef.current = false;\n\n      if (props.onFocus) {\n        props.onFocus(event);\n      }\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n      if (value === getFocusPrefix(emptyValue, maskChar)) {\n        setValues({ value: '', originValue: '' });\n      }\n\n      setFocused(false);\n\n      if (props.onBlur) {\n        props.onBlur(event);\n      }\n    }\n\n    function handleUnexpectedInput() {\n      if (props.onUnexpectedInput) {\n        props.onUnexpectedInput(value);\n      }\n    }\n\n    function getEmptyValue(\n      mask: MaskedInputElementProps['mask'],\n      maskChar: MaskedInputElementProps['maskChar'],\n      formatChars: MaskedInputElementProps['formatChars'],\n    ): string {\n      const maskPattern = IMask.createMask({\n        mask,\n        definitions: getDefinitions(formatChars),\n        lazy: false,\n        placeholderChar: getMaskChar(maskChar),\n      });\n      return maskPattern.appendTail('').inserted;\n    }\n  },\n);\n"]}
+{"version":3,"sources":["MaskedInputElement.tsx"],"names":["MaskedInputElementDataTids","root","MaskedInputElement","props","ref","value","getValue","originValue","values","setValues","emptyValue","setEmptyValue","focused","setFocused","inputRef","rootNodeRef","React","useRef","theme","ThemeContext","expectedChangesRef","isFirstRender","input","current","getRootNode","getEmptyValue","mask","maskChar","formatChars","toString","alwaysShowMask","maxLength","onUnexpectedInput","defaultValue","style","inputProps","leftClass","textAlign","styles","inputMaskLeft","currentValue","left","right","rightHelper","split","map","_char","i","leftHelper","color","isMaskVisible","container","handleAccept","handleInput","handleFocus","handleBlur","inputMask","setTimeout","e","target","handleUnexpectedInput","event","onFocus","onBlur","maskPattern","IMask","createMask","definitions","lazy","placeholderChar","appendTail","inserted"],"mappings":"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","sourcesContent":["import React, { ForwardedRef, useContext, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport { IMaskInput, IMask } from 'react-imask';\n\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { MaskCharLowLine } from '../MaskCharLowLine';\nimport { cx } from '../../lib/theming/Emotion';\nimport { InputElement, InputElementProps } from '../../components/Input';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\nimport { styles } from './MaskedInputElement.styles';\nimport { getCurrentValue, getDefinitions, getFocusPrefix, getMaskChar } from './MaskedInputElement.helpers';\n\nexport interface MaskedInputElementProps extends InputElementProps {\n  mask: string;\n  maskChar?: string | null;\n  formatChars?: { [key: string]: string };\n  alwaysShowMask?: boolean;\n  onUnexpectedInput: (value: string) => void;\n}\n\nexport const MaskedInputElementDataTids = {\n  root: 'MaskedInput__root',\n} as const;\n\nexport const MaskedInputElement = forwardRefAndName(\n  'MaskedInputElement',\n  function MaskedInputElement(props: MaskedInputElementProps, ref: ForwardedRef<InputElement>) {\n    const [values, setValues] = useState<{ value: string; originValue: string }>(() => {\n      const value = getValue(props);\n      return { value, originValue: value };\n    });\n    const { value, originValue } = values;\n\n    const [emptyValue, setEmptyValue] = useState('');\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const rootNodeRef = React.useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const expectedChangesRef = useRef(false);\n    const isFirstRender = useRef(true);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        input: inputRef.current,\n        getRootNode: () => rootNodeRef.current,\n      }),\n      [],\n    );\n\n    useEffect(() => {\n      setEmptyValue(getEmptyValue(props.mask, props.maskChar, props.formatChars));\n    }, [props.mask, props.maskChar]);\n\n    useEffect(() => {\n      if (isFirstRender.current) {\n        return;\n      }\n\n      const value = props.value ? props.value.toString() : '';\n      setValues((values) => ({ ...values, value }));\n    }, [props.value]);\n\n    useEffect(() => {\n      isFirstRender.current = false;\n    }, []);\n\n    const {\n      mask,\n      maskChar,\n      formatChars,\n      alwaysShowMask,\n      maxLength,\n      onUnexpectedInput,\n      defaultValue,\n      style,\n      ...inputProps\n    } = props;\n\n    const leftClass = style?.textAlign !== 'right' && styles.inputMaskLeft();\n    const [currentValue, left, right] = getCurrentValue({ value, originValue, emptyValue }, focused, maskChar);\n\n    /* В rightHelper не DEFAULT_MASK_CHAR, а специальная логика для обработки подчркивания('_').\n     * Не менять на DEFAULT_MASK_CHAR\n     */\n    const rightHelper = right.split('').map((_char, i) => (_char === '_' ? <MaskCharLowLine key={i} /> : _char));\n    const leftHelper = style?.textAlign !== 'right' && <span style={{ color: 'transparent' }}>{left}</span>;\n    const isMaskVisible = alwaysShowMask || focused;\n\n    return (\n      <span\n        data-tid={MaskedInputElementDataTids.root}\n        ref={rootNodeRef}\n        className={styles.container()}\n        x-ms-format-detection=\"none\"\n      >\n        <IMaskInput\n          {...inputProps}\n          mask={mask}\n          definitions={getDefinitions(formatChars)}\n          eager\n          overwrite={'shift'}\n          onAccept={handleAccept}\n          onInput={handleInput}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          value={currentValue}\n          inputRef={inputRef}\n          style={{ ...style }}\n        />\n        {isMaskVisible && (\n          <span className={cx(styles.inputMask(theme), leftClass)}>\n            {leftHelper}\n            {rightHelper}\n          </span>\n        )}\n      </span>\n    );\n\n    function getValue(props: MaskedInputElementProps): string {\n      return (props.value ?? props.defaultValue ?? '').toString();\n    }\n\n    /** В imask вызывается только когда значение с маской меняется*/\n    function handleAccept(value: string) {\n      expectedChangesRef.current = true;\n      // Если разделить на 2 setState - между первым и вторым происходит рендер и иногда символы \"съедаются\"\n      setValues({ value, originValue: value });\n\n      setTimeout(() => {\n        /** При вводе с клавиатуры срабатывает handleAccept, за ним handleInput\n         * expectedChanges - нужен чтобы сообщить из handleAccept в handleInput, что значение с маской изменилось.\n         * Если маска не изменилась и сработал handleInput, вызываем handleUnexpectedInput. Ввели значение не по маске.\n         * setTimeout нужен чтобы сбросить expectedChanges, например, если изменилось значение в пропах.\n         * Маска изменится, вызовется handleAccept, но не handleInput\n         */\n        expectedChangesRef.current = false;\n      });\n    }\n\n    /** Отслеживаем неправильные нажатия,\n     * handleAccept не вызывается когда значение с маской не меняется, а handleInput вызывается\n     * Сначала вызывается handleAccept, затем handleInput\n     * */\n    function handleInput(e: React.ChangeEvent<HTMLInputElement>) {\n      const value = e.target.value;\n\n      if (!expectedChangesRef.current && value === originValue) {\n        handleUnexpectedInput();\n      }\n\n      expectedChangesRef.current = false;\n    }\n\n    function handleFocus(event: React.FocusEvent<HTMLInputElement>) {\n      setFocused(true);\n\n      expectedChangesRef.current = false;\n\n      if (props.onFocus) {\n        props.onFocus(event);\n      }\n    }\n\n    function handleBlur(event: React.FocusEvent<HTMLInputElement>) {\n      if (value === getFocusPrefix(emptyValue, maskChar)) {\n        setValues({ value: '', originValue: '' });\n      }\n\n      setFocused(false);\n\n      if (props.onBlur) {\n        props.onBlur(event);\n      }\n    }\n\n    function handleUnexpectedInput() {\n      if (props.onUnexpectedInput) {\n        props.onUnexpectedInput(value);\n      }\n    }\n\n    function getEmptyValue(\n      mask: MaskedInputElementProps['mask'],\n      maskChar: MaskedInputElementProps['maskChar'],\n      formatChars: MaskedInputElementProps['formatChars'],\n    ): string {\n      const maskPattern = IMask.createMask({\n        mask,\n        definitions: getDefinitions(formatChars),\n        lazy: false,\n        placeholderChar: getMaskChar(maskChar),\n      });\n      return maskPattern.appendTail('').inserted;\n    }\n  },\n);\n"]}

package/cjs/internal/MaskedInputElement/MaskedInputElement.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/cjs/internal/MaskedInputElement/MaskedInputElement.styles.js

@@ -1,32 +1,29 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.getStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3;
 
-var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3;
 
+var styles = (0, _Emotion.memoizeStyle)({
+  container: function container() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-flex;\n      position: relative;\n      font-size: inherit;\n      flex: 100% 1 1;\n    "])));
 
-var getStyles = function getStyles(emotion) {return (
-    (0, _Emotion.memoizeStyle)({
-      container: function container() {
-        return emotion.css(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n        display: inline-flex;\n        position: relative;\n        font-size: inherit;\n        flex: 100% 1 1;\n      "])));
 
 
 
 
+  },
+  inputMask: function inputMask(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      pointer-events: none;\n      font-size: inherit;\n      z-index: 5;\n      user-select: none;\n    "])),
+    t.placeholderColor);
 
-      },
-      inputMask: function inputMask(t) {
-        return emotion.css(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\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 (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n    "])));
 
-      },
-      inputMaskLeft: function inputMaskLeft() {
-        return emotion.css(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n      "])));
 
 
 
 
-
-      } }));};exports.getStyles = getStyles;
+  } });exports.styles = styles;

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

@@ -1 +1 @@
-{"version":3,"sources":["MaskedInputElement.styles.ts"],"names":["getStyles","emotion","container","css","inputMask","t","placeholderColor","inputMaskLeft"],"mappings":";;AAEA,oD;;;AAGO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,OAAD;AACvB,+BAAa;AACXC,MAAAA,SADW,uBACC;AACV,eAAOD,OAAO,CAACE,GAAf;;;;;;AAMD,OARU;AASXC,MAAAA,SATW,qBASDC,CATC,EASS;AAClB,eAAOJ,OAAO,CAACE,GAAf;AACWE,QAAAA,CAAC,CAACC,gBADb;;;;;;AAOD,OAjBU;AAkBXC,MAAAA,aAlBW,2BAkBK;AACd,eAAON,OAAO,CAACE,GAAf;;;;;;AAMD,OAzBU,EAAb,CADuB,GAAlB,C","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"]}
+{"version":3,"sources":["MaskedInputElement.styles.ts"],"names":["styles","container","css","inputMask","t","placeholderColor","inputMaskLeft"],"mappings":"oRAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,SADiC,uBACrB;AACV,eAAOC,YAAP;;;;;;AAMD,GARgC;AASjCC,EAAAA,SATiC,qBASvBC,CATuB,EASb;AAClB,eAAOF,YAAP;AACWE,IAAAA,CAAC,CAACC,gBADb;;;;;;AAOD,GAjBgC;AAkBjCC,EAAAA,aAlBiC,2BAkBjB;AACd,eAAOJ,YAAP;;;;;;AAMD,GAzBgC,EAAb,CAAf,C","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"]}

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

@@ -48,7 +48,6 @@ export declare class Menu extends React.PureComponent<MenuProps, MenuState> {
     private getProps;
     state: MenuState;
     private theme;
-    private emotion;
     private scrollContainer;
     private isMobileLayout;
     private highlighted;

package/cjs/internal/Menu/Menu.js

@@ -1,7 +1,6 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.MenuDataTids = exports.Menu = void 0;var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _globalObject = require("@skbkontur/global-object");
 
-
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 var _MenuSeparator = require("../../components/MenuSeparator");
 var _ThemeFactory = require("../../lib/theming/ThemeFactory");
@@ -11,7 +10,9 @@ var _utils = require("../../lib/utils");
 var _ScrollContainer = require("../../components/ScrollContainer");
 var _MenuItem = require("../../components/MenuItem");
 
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
+var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode2 = require("../../lib/rootNode");
 var _addIconPaddingIfPartOfMenu = require("../InternalMenu/addIconPaddingIfPartOfMenu");
 var _client = require("../../lib/client");
@@ -20,8 +21,6 @@ var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 var _isIconPaddingEnabled = require("../InternalMenu/isIconPaddingEnabled");
 var _isInstanceOf = require("../../lib/isInstanceOf");
 var _featureFlagsContext = require("../../lib/featureFlagsContext");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
-var _Emotion = require("../../lib/theming/Emotion");
 
 var _Menu = require("./Menu.styles");
 var _isActiveElement = require("./isActiveElement");
@@ -114,7 +113,6 @@ Menu = (0, _decorator.responsiveLayout)(_class = (0, _rootNode2.rootNode)(_class
 
 
 
-
     unmounted = false;_this.
 
 
@@ -289,53 +287,43 @@ Menu = (0, _decorator.responsiveLayout)(_class = (0, _rootNode2.rootNode)(_class
 
 
 
-
-
-
-
-
-
-
-
-    renderHeader = function () {var _this$emotion$cx;
-      var styles = (0, _Menu.getStyles)(_this.emotion);
+    renderHeader = function () {var _cx;
       return /*#__PURE__*/(
         _react.default.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: (0, _Emotion.cx)((_cx = {}, _cx[
+          _Menu.styles.wrapper()] = true, _cx[
+          _Menu.styles.headerWrapper()] = true, _cx)),
 
           ref: function ref(el) {return _this.header = el;} }, /*#__PURE__*/
 
-        _react.default.createElement("div", { className: styles.contentWrapper() }, _this.props.header), /*#__PURE__*/
-        _react.default.createElement("div", { className: styles.menuSeparatorWrapper(_this.theme) },
+        _react.default.createElement("div", { className: _Menu.styles.contentWrapper() }, _this.props.header), /*#__PURE__*/
+        _react.default.createElement("div", { className: _Menu.styles.menuSeparatorWrapper(_this.theme) },
         _this.state.scrollState !== 'top' && _this.renderMenuSeparatorWithNoMargin())));
 
 
 
     };_this.
 
-    renderFooter = function () {var _this$emotion$cx2;
-      var styles = (0, _Menu.getStyles)(_this.emotion);
+    renderFooter = function () {var _cx2;
       return /*#__PURE__*/(
         _react.default.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: (0, _Emotion.cx)((_cx2 = {}, _cx2[
+          _Menu.styles.wrapper()] = true, _cx2[
+          _Menu.styles.footerWrapper()] = true, _cx2)),
 
           ref: function ref(el) {return _this.footer = el;} }, /*#__PURE__*/
 
-        _react.default.createElement("div", { className: styles.menuSeparatorWrapper(_this.theme) },
+        _react.default.createElement("div", { className: _Menu.styles.menuSeparatorWrapper(_this.theme) },
         _this.state.scrollState !== 'bottom' && _this.renderMenuSeparatorWithNoMargin()), /*#__PURE__*/
 
-        _react.default.createElement("div", { className: styles.contentWrapper() }, _this.props.footer)));
+        _react.default.createElement("div", { className: _Menu.styles.contentWrapper() }, _this.props.footer)));
 
 
     };_this.
 
     renderMenuSeparatorWithNoMargin = function () {
       return /*#__PURE__*/(
-        _react.default.createElement(_ThemeContext.ThemeProvider, { value: _ThemeFactory.ThemeFactory.create({ menuSeparatorMarginY: '0' }, _this.theme) }, /*#__PURE__*/
+        _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ menuSeparatorMarginY: '0' }, _this.theme) }, /*#__PURE__*/
         _react.default.createElement(_MenuSeparator.MenuSeparator, null)));
 
 
@@ -602,7 +590,7 @@ Menu = (0, _decorator.responsiveLayout)(_class = (0, _rootNode2.rootNode)(_class
 
     setEnableIconPadding = function (isIconPaddingEnabled) {
       !_this.getProps().preventIconsOffset && _this.setState({ enableIconPadding: isIconPaddingEnabled });
-    };return _this;}var _proto = Menu.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this.unmounted = true;};_proto.componentDidMount = function componentDidMount() {this.setInitialSelection();this.calculateMaxHeight();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.shouldRecalculateMaxHeight(prevProps)) {this.calculateMaxHeight();}if (prevProps.maxHeight !== this.getProps().maxHeight) {this.setState({ maxHeight: this.props.maxHeight || 'none' });}};_proto.focus = function focus() {this.focusOnRootElement();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.menuItemsAtAnyLevel = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags).menuItemsAtAnyLevel;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});});} /**
+    };return _this;}var _proto = Menu.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this.unmounted = true;};_proto.componentDidMount = function componentDidMount() {this.setInitialSelection();this.calculateMaxHeight();};_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (this.shouldRecalculateMaxHeight(prevProps)) {this.calculateMaxHeight();}if (prevProps.maxHeight !== this.getProps().maxHeight) {this.setState({ maxHeight: this.props.maxHeight || 'none' });}};_proto.focus = function focus() {this.focusOnRootElement();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.menuItemsAtAnyLevel = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags).menuItemsAtAnyLevel;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});});} /**
    * @public
    */;_proto.up = function up() {this.move(-1);} /**
    * @public
@@ -612,18 +600,16 @@ Menu = (0, _decorator.responsiveLayout)(_class = (0, _rootNode2.rootNode)(_class
    * @public
    */;_proto.reset = function reset() {if (this.menuItemsAtAnyLevel) {this.menuNavigation.reset();} else {this.setState({ highlightedIndex: -1 });}} /**
    * @public
-   */;_proto.hasHighlightedItem = function hasHighlightedItem() {if (this.menuItemsAtAnyLevel) {return !!this.menuNavigation.highlightedItem;}return this.state.highlightedIndex !== -1;};_proto.highlightItem = function highlightItem(index) {if (this.menuItemsAtAnyLevel) {this.menuNavigation.highlightByIndex(index);} else {this.highlight(index);}};_proto.renderMain = function renderMain() {var _this$emotion$cx3, _this$emotion$cx4;if (this.isEmpty()) {return null;}var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,maxHeight = _this$getProps.maxHeight,preventWindowScroll = _this$getProps.preventWindowScroll;var offsetY = (0, _ThemeHelpers.isTheme2022)(this.theme) ? { top: "" + this.theme.scrollContainerScrollBarOffsetY, right: 0, bottom: "" + this.theme.scrollContainerScrollBarOffsetY } : {};var isMobile = this.isMobileLayout;var styles = (0, _Menu.getStyles)(this.emotion);return /*#__PURE__*/_react.default.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.mobileRoot(this.theme)] = isMobile, _this$emotion$cx3[styles.shadow(this.theme)] = hasShadow && !isMobile, _this$emotion$cx3)), style: this.getStyle(this.props), id: this.props.id, onKeyDown: this.handleKeyDown, ref: this.setRootNode, tabIndex: 0 }, this.props.header && this.renderHeader(), /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: maxHeight, preventWindowScroll: preventWindowScroll, onScrollStateChange: this.handleScrollStateChange, disabled: this.props.disableScrollContainer, offsetY: offsetY }, /*#__PURE__*/_react.default.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)), ref: this.contentRef }, /*#__PURE__*/_react.default.createElement(_MenuContext.MenuContext.Provider, { value: { navigation: this.menuNavigation, onItemClick: this.props.onItemClick, enableIconPadding: this.state.enableIconPadding, setEnableIconPadding: this.setEnableIconPadding } }, this.getChildList()))), this.props.footer && this.renderFooter());};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (typeof originalRef === 'function') {originalRef(menuItem);}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item) && (0, _globalObject.isBrowser)(_globalObject.globalObject)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {_globalObject.globalObject.open(item.props.href, item.props.target);} else {_globalObject.globalObject.location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick(event);}return true;}return false;};_proto.move = function move(step) {var _this3 = this;if (this.unmounted) {// NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
+   */;_proto.hasHighlightedItem = function hasHighlightedItem() {if (this.menuItemsAtAnyLevel) {return !!this.menuNavigation.highlightedItem;}return this.state.highlightedIndex !== -1;};_proto.highlightItem = function highlightItem(index) {if (this.menuItemsAtAnyLevel) {this.menuNavigation.highlightByIndex(index);} else {this.highlight(index);}};_proto.renderMain = function renderMain() {var _cx3, _cx4;if (this.isEmpty()) {return null;}var _this$getProps = this.getProps(),hasShadow = _this$getProps.hasShadow,maxHeight = _this$getProps.maxHeight,preventWindowScroll = _this$getProps.preventWindowScroll;var offsetY = (0, _ThemeHelpers.isTheme2022)(this.theme) ? { top: "" + this.theme.scrollContainerScrollBarOffsetY, right: 0, bottom: "" + this.theme.scrollContainerScrollBarOffsetY } : {};var isMobile = this.isMobileLayout;return /*#__PURE__*/_react.default.createElement("div", { "data-tid": MenuDataTids.root, className: (0, _Emotion.cx)(getAlignRightClass(this.props), (_cx3 = {}, _cx3[_Menu.styles.root(this.theme)] = true, _cx3[_Menu.styles.mobileRoot(this.theme)] = isMobile, _cx3[_Menu.styles.shadow(this.theme)] = hasShadow && !isMobile, _cx3)), style: this.getStyle(this.props), id: this.props.id, onKeyDown: this.handleKeyDown, ref: this.setRootNode, tabIndex: 0 }, this.props.header && this.renderHeader(), /*#__PURE__*/_react.default.createElement(_ScrollContainer.ScrollContainer, { ref: this.refScrollContainer, maxHeight: maxHeight, preventWindowScroll: preventWindowScroll, onScrollStateChange: this.handleScrollStateChange, disabled: this.props.disableScrollContainer, offsetY: offsetY }, /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)((_cx4 = {}, _cx4[_Menu.styles.scrollContainer(this.theme)] = true, _cx4[_Menu.styles.scrollContainerMobile(this.theme)] = isMobile, _cx4)), ref: this.contentRef }, /*#__PURE__*/_react.default.createElement(_MenuContext.MenuContext.Provider, { value: { navigation: this.menuNavigation, onItemClick: this.props.onItemClick, enableIconPadding: this.state.enableIconPadding, setEnableIconPadding: this.setEnableIconPadding } }, this.getChildList()))), this.props.footer && this.renderFooter());};_proto.refHighlighted = function refHighlighted(originalRef, menuItem) {this.highlighted = menuItem;if (typeof originalRef === 'function') {originalRef(menuItem);}};_proto.select = function select(index, shouldHandleHref, event) {var item = childrenToArray(this.props.children)[index];if ((0, _isActiveElement.isActiveElement)(item) && (0, _globalObject.isBrowser)(_globalObject.globalObject)) {if (shouldHandleHref && item.props.href) {if (item.props.target) {_globalObject.globalObject.open(item.props.href, item.props.target);} else {_globalObject.globalObject.location.href = item.props.href;}}if (item.props.onClick) {item.props.onClick(event);}if (this.props.onItemClick) {this.props.onItemClick(event);}return true;}return false;};_proto.move = function move(step) {var _this3 = this;if (this.unmounted) {// NOTE workaround, because `ComboBox` call `process.nextTick` in reducer
       return;}if (this.menuItemsAtAnyLevel) {var nextIndex = this.menuNavigation.move(step, this.getProps().cyclicSelection);this.scroll(nextIndex);} else {var _ret = function () {var children = childrenToArray(_this3.props.children);var activeElements = children.filter(_isActiveElement.isActiveElement);if (!activeElements.length) {return { v: void 0 };}var index = _this3.state.highlightedIndex;var _loop = function _loop() {index += step;if (!_this3.getProps().cyclicSelection && (index < 0 || index > children.length)) {return { v: { v: void 0 } };}if (index < 0) {index = children.length - 1;} else if (index > children.length) {index = 0;}var child = children[index];if ((0, _isActiveElement.isActiveElement)(child)) {_this3.setState({ highlightedIndex: index }, function () {switch (activeElements.indexOf(child)) {case 0:_this3.scrollToTop();break;case activeElements.length - 1:_this3.scrollToBottom();break;default:_this3.scrollToSelected();}});return { v: { v: void 0 } };}};do {var _ret2 = _loop();if (typeof _ret2 === "object") return _ret2.v;} while (index !== _this3.state.highlightedIndex);}();if (typeof _ret === "object") return _ret.v;}};_proto.isEmpty = function isEmpty() {var children = this.props.children;return !children || !childrenToArray(children).filter(_utils.isNonNullable).length;};return Menu;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.displayName = 'Menu', _class2.defaultProps = { align: 'left', width: 'auto', maxHeight: 300, hasShadow: true, preventWindowScroll: true, cyclicSelection: true, initialSelectedItemIndex: -1 }, _temp)) || _class) || _class;exports.Menu = Menu;function childrenToArray(children) {var ret = []; // Use forEach instead of map to avoid cloning for key unifying.
-  _react.default.Children.forEach(children, function (child) {ret.push(child);});return ret;}var getAlignRightClass = function getAlignRightClass(emotion) {return function (props) {
-    var styles = (0, _Menu.getStyles)(emotion);
-
-    if (props.align === 'right') {var _emotion$cx;
-      return emotion.cx((_emotion$cx = {}, _emotion$cx[
-      styles.alignRight()] = !_client.isIE11, _emotion$cx[
-      styles.alignRightIE11()] = _client.isIE11, _emotion$cx[
-      styles.alignRightIE11FixAutoWidth()] = _client.isIE11 && props.width === 'auto', _emotion$cx));
+  _react.default.Children.forEach(children, function (child) {ret.push(child);});return ret;}var getAlignRightClass = function getAlignRightClass(props) {
+  if (props.align === 'right') {var _cx5;
+    return (0, _Emotion.cx)((_cx5 = {}, _cx5[
+    _Menu.styles.alignRight()] = !_client.isIE11, _cx5[
+    _Menu.styles.alignRightIE11()] = _client.isIE11, _cx5[
+    _Menu.styles.alignRightIE11FixAutoWidth()] = _client.isIE11 && props.width === 'auto', _cx5));
 
-    }
+  }
 
-    return null;
-  };};
+  return null;
+};