@skbkontur/react-ui 0.0.0-b203c99d11 → 0.0.0-b4292e4d5b

package/internal/DataTids/DataTids/package.json

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

package/internal/DataTids/DataTids.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+interface DataTidsState {
+    selectedValue: string;
+}
+export declare class DataTids extends React.Component {
+    state: DataTidsState;
+    private components;
+    private items;
+    private setValue;
+    render(): JSX.Element;
+}
+export {};

package/internal/DataTids/DataTids.styles/DataTids.styles.js

@@ -0,0 +1,22 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  wrapper: function wrapper() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      &:not(:first-child) {\n        margin-top: 20px;\n      }\n    "])));
+  },
+  componentName: function componentName() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      font-weight: 700;\n      font-size: 1.25em;\n      margin: 0 5px 5px;\n    "])));
+  },
+  row: function row() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      width: 100%;\n      font-size: 16px;\n    "])));
+  },
+  leftCell: function leftCell() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      padding: 5px;\n      border-right: 1px solid #dadada;\n      border-bottom: 1px solid #dadada;\n      width: 30%;\n      overflow-wrap: anywhere;\n    "])));
+  },
+  rightCell: function rightCell() {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      padding: 5px;\n      border-bottom: 1px solid #dadada;\n      width: 70%;\n    "])));
+  }
+});

package/internal/DataTids/DataTids.styles/DataTids.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DataTids.styles.ts"],"names":["css","memoizeStyle","styles","wrapper","componentName","row","leftCell","rightCell"],"mappings":"4LAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,OADiC,qBACvB;AACR,WAAOH,GAAP;;;;;AAKD,GAPgC;AAQjCI,EAAAA,aARiC,2BAQjB;AACd,WAAOJ,GAAP;;;;;AAKD,GAdgC;AAejCK,EAAAA,GAfiC,iBAe3B;AACJ,WAAOL,GAAP;;;;;AAKD,GArBgC;;AAuBjCM,EAAAA,QAvBiC,sBAuBtB;AACT,WAAON,GAAP;;;;;;;AAOD,GA/BgC;AAgCjCO,EAAAA,SAhCiC,uBAgCrB;AACV,WAAOP,GAAP;;;;;AAKD,GAtCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  wrapper() {\n    return css`\n      &:not(:first-child) {\n        margin-top: 20px;\n      }\n    `;\n  },\n  componentName() {\n    return css`\n      font-weight: 700;\n      font-size: 1.25em;\n      margin: 0 5px 5px;\n    `;\n  },\n  row() {\n    return css`\n      display: flex;\n      width: 100%;\n      font-size: 16px;\n    `;\n  },\n\n  leftCell() {\n    return css`\n      padding: 5px;\n      border-right: 1px solid #dadada;\n      border-bottom: 1px solid #dadada;\n      width: 30%;\n      overflow-wrap: anywhere;\n    `;\n  },\n  rightCell() {\n    return css`\n      padding: 5px;\n      border-bottom: 1px solid #dadada;\n      width: 70%;\n    `;\n  },\n});\n"]}

package/internal/DataTids/DataTids.styles/package.json

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

package/internal/DataTids/DataTids.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const styles: {
+    wrapper(): string;
+    componentName(): string;
+    row(): string;
+    leftCell(): string;
+    rightCell(): string;
+};

package/internal/DataTids/componentsDataTids/componentsDataTids.js

@@ -0,0 +1,14 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as Components from "../../../index";
+var tids = Object.keys(Components).filter(function (componentName) {
+  if (componentName.match(/datatids/i)) {
+    return componentName;
+  }
+
+  return null;
+});
+export var componentsDataTids = tids.reduce(function (accum, currTid) {
+  var _extends2;
+
+  return _extends({}, accum, (_extends2 = {}, _extends2[currTid.replace('DataTids', '')] = Object.entries(Components[currTid]), _extends2));
+}, {});

package/internal/DataTids/componentsDataTids/componentsDataTids.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["componentsDataTids.ts"],"names":["Components","tids","Object","keys","filter","componentName","match","componentsDataTids","reduce","accum","currTid","replace","entries"],"mappings":"0DAAA,OAAO,KAAKA,UAAZ,MAA4B,aAA5B;;AAEA,IAAMC,IAAI,GAAGC,MAAM,CAACC,IAAP,CAAYH,UAAZ,EAAwBI,MAAxB,CAA+B,UAACC,aAAD,EAAmB;AAC7D,MAAIA,aAAa,CAACC,KAAd,CAAoB,WAApB,CAAJ,EAAsC;AACpC,WAAOD,aAAP;AACD;AACD,SAAO,IAAP;AACD,CALY,CAAb;;AAOA,OAAO,IAAME,kBAAgE,GAAGN,IAAI,CAACO,MAAL,CAAY,UAACC,KAAD,EAAQC,OAAR,EAAoB;AAC9G;AACKD,EAAAA,KADL;;AAGGC,EAAAA,OAAO,CAACC,OAAR,CAAgB,UAAhB,EAA4B,EAA5B,CAHH,IAGqCT,MAAM,CAACU,OAAP,CAAeZ,UAAU,CAACU,OAAD,CAAzB,CAHrC;;AAKD,CAN+E,EAM7E,EAN6E,CAAzE","sourcesContent":["import * as Components from '../../index';\n\nconst tids = Object.keys(Components).filter((componentName) => {\n  if (componentName.match(/datatids/i)) {\n    return componentName;\n  }\n  return null;\n});\n\nexport const componentsDataTids: { [key: string]: { [key: string]: string } } = tids.reduce((accum, currTid) => {\n  return {\n    ...accum,\n    // eslint-disable-next-line import/namespace\n    [currTid.replace('DataTids', '')]: Object.entries(Components[currTid as keyof typeof Components]),\n  };\n}, {});\n"]}

package/internal/DataTids/componentsDataTids/package.json

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

package/internal/DataTids/componentsDataTids.d.ts

@@ -0,0 +1,5 @@
+export declare const componentsDataTids: {
+    [key: string]: {
+        [key: string]: string;
+    };
+};

package/internal/DateSelect/DateSelect/DateSelect.js

@@ -5,7 +5,7 @@ var _dec, _class, _class2, _temp;
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
+import { getRandomID, isNonNullable } from "../../../lib/utils";
 import { isKeyEscape } from "../../../lib/events/keyboard/identifiers";
 import { DatePickerLocaleHelper } from "../../../components/DatePicker/locale";
 import { locale } from "../../../lib/locale/decorators";
@@ -13,16 +13,42 @@ import { RenderLayer } from "../../RenderLayer";
 import { DropdownContainer } from "../../DropdownContainer";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { ArrowTriangleDownIcon, ArrowTriangleUpDownIcon, ArrowTriangleUpIcon } from "../../icons/16px";
-import { jsStyles } from "../DateSelect.styles";
+import { ArrowTriangleUpDownIcon, ArrowChevronDownIcon, ArrowChevronUpIcon } from "../../icons/16px";
+import { isMobile } from "../../../lib/client";
+import { cx } from "../../../lib/theming/Emotion";
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { ArrowCollapseCVOpenIcon16Regular } from "../../icons2022/ArrowCollapseCVOpenIcon/ArrowCollapseCVOpenIcon16Regular";
+import { ArrowCUpIcon16Regular } from "../../icons2022/ArrowCUpIcon/ArrowCUpIcon16Regular";
+import { ArrowCDownIcon16Regular } from "../../icons2022/ArrowCDownIcon/ArrowCDownIcon16Regular";
+import { globalClasses, styles } from "../DateSelect.styles";
 var itemHeight = 24;
 var visibleYearsCount = 11;
 var itemsToMoveCount = -5;
 var monthsCount = 12;
 var defaultMinYear = 1900;
 var defaultMaxYear = 2100;
-export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(DateSelect, _React$Component);
+
+var calculatePos = function calculatePos(pos, minPos, maxPos) {
+  if (maxPos <= pos) {
+    return maxPos;
+  }
+
+  if (minPos >= pos) {
+    return minPos;
+  }
+
+  return pos;
+};
+
+export var DateSelectDataTids = {
+  caption: 'DateSelect__caption',
+  menuItem: 'DateSelect__menuItem',
+  menu: 'DateSelect__menu'
+};
+export var DateSelect = (_dec = locale('Calendar', DatePickerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {
+  _inheritsLoose(DateSelect, _React$PureComponent);
 
   function DateSelect() {
     var _this;
@@ -31,7 +57,8 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
       args[_key] = arguments[_key];
     }
 
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(DateSelect.defaultProps);
     _this.state = {
       botCapped: false,
       current: 0,
@@ -42,15 +69,12 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
       topCapped: false,
       nodeTop: Infinity
     };
-    _this.theme = void 0;
-    _this.locale = void 0;
     _this.root = null;
     _this.itemsContainer = null;
-    _this.listener = void 0;
-    _this.timeout = void 0;
     _this.longClickTimer = 0;
     _this.setPositionRepeatTimer = 0;
     _this.yearStep = 3;
+    _this.touchStartY = null;
 
     _this.open = function () {
       if (_this.props.disabled) {
@@ -79,6 +103,8 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
       });
     };
 
+    _this.menuId = DateSelectDataTids.menu + getRandomID();
+
     _this.refRoot = function (element) {
       _this.root = element;
     };
@@ -96,7 +122,7 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
 
       _this.timeout = setTimeout(function () {
         return _this.setState({
-          nodeTop: root.getBoundingClientRect().top
+          nodeTop: getDOMRect(root).top
         });
       });
     };
@@ -112,6 +138,19 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
         _this.itemsContainer.removeEventListener('wheel', _this.handleWheel);
       }
 
+      if (isMobile) {
+        if (!_this.itemsContainer && element) {
+          element.addEventListener('touchstart', _this.handleTouchStart);
+          element.addEventListener('touchmove', _this.handleTouchMove);
+        }
+
+        if (_this.itemsContainer && !element) {
+          _this.itemsContainer.removeEventListener('touchstart', _this.handleTouchStart);
+
+          _this.itemsContainer.removeEventListener('touchmove', _this.handleTouchMove);
+        }
+      }
+
       _this.itemsContainer = element;
     };
 
@@ -162,8 +201,30 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
       _this.setPosition(pos);
     };
 
+    _this.handleTouchStart = function (event) {
+      if (!(event instanceof TouchEvent)) {
+        return;
+      }
+
+      _this.touchStartY = event.targetTouches[0].clientY;
+    };
+
+    _this.handleTouchMove = function (event) {
+      if (!(event instanceof TouchEvent)) {
+        return;
+      }
+
+      var clientY = event.changedTouches[0].clientY;
+      var pixelRatio = window.devicePixelRatio;
+      var deltaY = ((_this.touchStartY || 0) - clientY) / pixelRatio;
+      var pos = _this.state.pos + deltaY + deltaY / itemHeight;
+      _this.touchStartY = clientY;
+
+      _this.setPosition(pos);
+    };
+
     _this.handleItemClick = function (shift) {
-      return function (e) {
+      return function () {
         var value = _this.props.value + shift;
 
         if (_this.props.onValueChange) {
@@ -203,7 +264,7 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
 
   var _proto = DateSelect.prototype;
 
-  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps() {
+  _proto.componentDidUpdate = function componentDidUpdate() {
     this.setNodeTop();
   };
 
@@ -232,8 +293,8 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
 
     window.removeEventListener('keydown', this.handleKey);
   }
-  /**
-  * @public
+  /**
+  * @public
   */
   ;
 
@@ -247,48 +308,80 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn, _cn2;
+    var _cx, _cx2;
+
+    if (isTheme2022(this.theme)) {
+      return this.renderMain2022();
+    }
 
-    var _this$props = this.props,
-        width = _this$props.width,
-        disabled = _this$props.disabled;
+    var disabled = this.props.disabled;
+    var width = this.getProps().width;
+    var isInteractiveElement = !disabled;
+    var Tag = isInteractiveElement ? 'button' : 'span';
     var rootProps = {
-      className: cn((_cn = {}, _cn[jsStyles.root(this.theme)] = true, _cn[jsStyles.disabled()] = Boolean(disabled), _cn)),
+      className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.disabled()] = Boolean(disabled), _cx)),
       style: {
         width: width
       },
-      ref: this.refRoot
+      ref: this.refRoot,
+      onClick: this.open,
+      'aria-expanded': isInteractiveElement ? this.state.opened : undefined,
+      'aria-controls': !disabled ? this.menuId : undefined,
+      'aria-label': isInteractiveElement ? this.locale.selectChosenAriaLabel + " " + (this.getProps().type === 'year' ? this.locale.selectYearAriaLabel : this.locale.selectMonthAriaLabel) + " " + this.getItem(0) : undefined
     };
-    return /*#__PURE__*/React.createElement("span", rootProps, /*#__PURE__*/React.createElement("div", {
-      "data-tid": "DateSelect__caption",
-      className: jsStyles.caption(),
-      onClick: this.open
+    return /*#__PURE__*/React.createElement(Tag, rootProps, /*#__PURE__*/React.createElement("div", {
+      "data-tid": DateSelectDataTids.caption,
+      className: styles.caption()
     }, this.getItem(0), /*#__PURE__*/React.createElement("div", {
-      className: cn((_cn2 = {}, _cn2[jsStyles.arrow(this.theme)] = true, _cn2[jsStyles.arrowDisabled()] = Boolean(disabled), _cn2))
+      className: cx((_cx2 = {}, _cx2[styles.arrow(this.theme)] = true, _cx2[styles.arrowDisabled()] = Boolean(disabled), _cx2))
     }, /*#__PURE__*/React.createElement(ArrowTriangleUpDownIcon, {
       size: 12
-    }))), this.state.opened && this.renderMenu());
+    }))), this.state.opened && this.renderMenu(this.menuId));
+  };
+
+  _proto.renderMain2022 = function renderMain2022() {
+    var disabled = this.props.disabled;
+    var width = this.getProps().width;
+    var isInteractiveElement = !disabled;
+    var Tag = isInteractiveElement ? 'button' : 'span';
+    var rootProps = {
+      className: cx(styles.root(this.theme), styles.root2022(), disabled && styles.disabled()),
+      style: {
+        width: width
+      },
+      ref: this.refRoot,
+      onClick: this.open,
+      'aria-expanded': isInteractiveElement ? this.state.opened : undefined,
+      'aria-label': isInteractiveElement ? this.locale.selectChosenAriaLabel + " " + (this.getProps().type === 'year' ? this.locale.selectYearAriaLabel : this.locale.selectMonthAriaLabel) + " " + this.getItem(0) : undefined
+    };
+    return /*#__PURE__*/React.createElement(Tag, rootProps, /*#__PURE__*/React.createElement("div", {
+      "data-tid": DateSelectDataTids.caption,
+      className: styles.caption()
+    }, this.getItem(0)), isInteractiveElement && /*#__PURE__*/React.createElement(ArrowCollapseCVOpenIcon16Regular, {
+      className: cx(globalClasses.arrow),
+      color: "#ADADAD"
+    }), this.state.opened && this.renderMenu(this.menuId));
   };
 
   _proto.disableItems = function disableItems(index) {
     var value = this.props.value + index;
 
-    if (this.props.maxValue != null && this.props.minValue != null) {
+    if (isNonNullable(this.props.maxValue) && isNonNullable(this.props.minValue)) {
       return value > this.props.maxValue || value < this.props.minValue;
     }
 
-    if (this.props.minValue != null) {
+    if (isNonNullable(this.props.minValue)) {
       return value < this.props.minValue;
     }
 
-    if (this.props.maxValue != null) {
+    if (isNonNullable(this.props.maxValue)) {
       return value > this.props.maxValue;
     }
   };
 
-  _proto.renderMenu = function renderMenu() {
+  _proto.renderMenu = function renderMenu(id) {
     var _this3 = this,
-        _cn3;
+        _cx3;
 
     var _this$state = this.state,
         top = _this$state.top,
@@ -305,16 +398,17 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
     var items = [];
 
     var _loop = function _loop(i) {
-      var _cn4;
+      var _cx4;
 
       var disableItems = _this3.disableItems(i) || false;
-      var className = cn((_cn4 = {}, _cn4[jsStyles.menuItem(_this3.theme)] = true, _cn4[jsStyles.menuItemSelected(_this3.theme)] = i === 0, _cn4[jsStyles.menuItemActive(_this3.theme)] = i === _this3.state.current, _cn4[jsStyles.menuItemDisabled(_this3.theme)] = disableItems, _cn4));
+      var className = cx((_cx4 = {}, _cx4[styles.menuItem(_this3.theme)] = true, _cx4[styles.menuItemSelected(_this3.theme)] = i === 0, _cx4[styles.menuItemActive(_this3.theme)] = i === _this3.state.current, _cx4[styles.menuItemDisabled(_this3.theme)] = disableItems, _cx4));
       var clickHandler = {
         onMouseDown: preventDefault,
         onClick: _this3.handleItemClick(i)
       };
-      items.push( /*#__PURE__*/React.createElement("div", _extends({
-        "data-tid": "DateSelect__menuItem",
+      items.push( /*#__PURE__*/React.createElement("button", _extends({
+        "aria-label": "\u0412\u044B\u0431\u0440\u0430\u0442\u044C " + (_this3.getProps().type === 'year' ? 'год' : 'месяц') + " " + _this3.getItem(i),
+        "data-tid": DateSelectDataTids.menuItem,
         "data-prop-disabled": disableItems,
         key: i,
         className: className,
@@ -344,7 +438,7 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
       position: 'relative',
       top: -shift
     };
-    var holderClass = cn((_cn3 = {}, _cn3[jsStyles.menuHolder(this.theme)] = true, _cn3[jsStyles.isTopCapped()] = this.state.topCapped, _cn3[jsStyles.isBotCapped()] = this.state.botCapped, _cn3));
+    var holderClass = cx((_cx3 = {}, _cx3[styles.menuHolder(this.theme)] = true, _cx3[styles.isTopCapped()] = this.state.topCapped, _cx3[styles.isBotCapped()] = this.state.botCapped, _cx3));
     var dropdownOffset = -itemHeight;
 
     if (nodeTop < -top) {
@@ -352,11 +446,19 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
       dropdownOffset -= nodeTop + top - overflowOffsetDelta;
     }
 
+    var iconUp = isTheme2022(this.theme) ? /*#__PURE__*/React.createElement(ArrowCUpIcon16Regular, {
+      color: "#ADADAD"
+    }) : /*#__PURE__*/React.createElement(ArrowChevronUpIcon, null);
+    var iconDown = isTheme2022(this.theme) ? /*#__PURE__*/React.createElement(ArrowCDownIcon16Regular, {
+      color: "#ADADAD"
+    }) : /*#__PURE__*/React.createElement(ArrowChevronDownIcon, null);
     return /*#__PURE__*/React.createElement(RenderLayer, {
       onClickOutside: this.close,
       onFocusOutside: this.close,
       active: true
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DropdownContainer, {
+    }, /*#__PURE__*/React.createElement(DropdownContainer, {
+      "data-tid": DateSelectDataTids.menu,
+      id: id,
       getParent: this.getAnchor,
       offsetY: dropdownOffset,
       offsetX: -10
@@ -364,15 +466,15 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
       className: holderClass,
       style: style
     }, !this.state.topCapped && /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.menuUp(this.theme),
+      className: cx(styles.menu(this.theme), styles.menuUp()),
       onClick: this.handleUp,
       onMouseDown: this.handleLongClickUp,
       onMouseUp: this.handleLongClickStop,
       onMouseLeave: this.handleLongClickStop,
       onTouchStart: this.handleLongClickUp,
       onTouchEnd: this.handleLongClickStop
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ArrowTriangleUpIcon, null))), /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.itemsHolder(),
+    }, /*#__PURE__*/React.createElement("span", null, iconUp)), /*#__PURE__*/React.createElement("div", {
+      className: styles.itemsHolder(),
       style: {
         height: height
       }
@@ -380,21 +482,23 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
       ref: this.refItemsContainer,
       style: shiftStyle
     }, items)), !this.state.botCapped && /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.menuDown(this.theme),
+      className: cx(styles.menu(this.theme), styles.menuDown()),
       onClick: this.handleDown,
       onMouseDown: this.handleLongClickDown,
       onMouseUp: this.handleLongClickStop,
       onMouseLeave: this.handleLongClickStop,
       onTouchStart: this.handleLongClickDown,
       onTouchEnd: this.handleLongClickStop
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(ArrowTriangleDownIcon, null)))))));
+    }, /*#__PURE__*/React.createElement("span", null, iconDown)))));
   };
 
   _proto.getItem = function getItem(index) {
     var value = this.props.value + index;
 
-    if (this.props.type === 'month') {
-      return this.locale.months[value];
+    if (this.getProps().type === 'month') {
+      var _this$locale$months;
+
+      return (_this$locale$months = this.locale.months) == null ? void 0 : _this$locale$months[value];
     }
 
     return value;
@@ -404,26 +508,18 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
     var top = itemsToMoveCount * itemHeight;
     var height = visibleYearsCount * itemHeight;
 
-    if (this.props.type === 'month') {
+    if (this.getProps().type === 'month') {
       top = -this.props.value * itemHeight;
       height = monthsCount * itemHeight;
     }
 
     var minPos = this.getMinPos() - top;
     var maxPos = this.getMaxPos() - top - height + itemHeight;
-
-    if (minPos >= pos) {
-      pos = minPos;
-    }
-
-    if (maxPos <= pos) {
-      pos = maxPos;
-    }
-
-    var topCapped = pos <= minPos;
-    var botCapped = pos >= maxPos;
+    var calculatedPos = calculatePos(pos, minPos, maxPos);
+    var topCapped = calculatedPos <= minPos;
+    var botCapped = calculatedPos >= maxPos;
     this.setState({
-      pos: pos,
+      pos: calculatedPos,
       top: top,
       height: height,
       topCapped: topCapped,
@@ -432,9 +528,11 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
   };
 
   _proto.getMinPos = function getMinPos() {
-    if (this.props.type === 'month') {
+    var type = this.getProps().type;
+
+    if (type === 'month') {
       return -this.props.value * itemHeight;
-    } else if (this.props.type === 'year') {
+    } else if (type === 'year') {
       return ((this.props.minValue || defaultMinYear) - this.props.value) * itemHeight;
     }
 
@@ -442,9 +540,11 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
   };
 
   _proto.getMaxPos = function getMaxPos() {
-    if (this.props.type === 'month') {
+    var type = this.getProps().type;
+
+    if (type === 'month') {
       return (visibleYearsCount - this.props.value) * itemHeight;
-    } else if (this.props.type === 'year') {
+    } else if (type === 'year') {
       return ((this.props.maxValue || defaultMaxYear) - this.props.value) * itemHeight;
     }
 
@@ -452,7 +552,7 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
   };
 
   return DateSelect;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'DateSelect', _class2.propTypes = {
+}(React.PureComponent), _class2.__KONTUR_REACT_UI__ = 'DateSelect', _class2.propTypes = {
   disabled: PropTypes.bool,
   type: PropTypes.string,
   value: PropTypes.number.isRequired,
@@ -462,8 +562,6 @@ export var DateSelect = (_dec = locale('DatePicker', DatePickerLocaleHelper), _d
   maxValue: PropTypes.number
 }, _class2.defaultProps = {
   type: 'year',
-  minMonth: 0,
-  maxMonth: 11,
   width: 'auto'
 }, _temp)) || _class);