@skbkontur/react-ui 0.0.0-4cd450ed1e → 0.0.0-4da47ece08

package/cjs/components/DateInput/helpers/inputNumber.js.map

@@ -1 +1 @@
-{"version":3,"sources":["inputNumber.tsx"],"names":["inputNumber","type","prev","key","inputMode","nextInputMode","nextValue","first","length","LENGTH_YEAR","InternalDateComponentType","Month","LENGTH_MONTH","Date","LENGTH_DATE","Number","slice"],"mappings":"oEAAA;AACA;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;AACzBC,IADyB;AAEzBC,IAFyB;AAGzBC,GAHyB;AAIzBC,SAJyB;AAK2C;AACpE,MAAIC,aAAa,GAAG,KAApB;AACA,MAAIC,SAAJ;AACA,MAAIC,KAAK,GAAG,EAAZ;AACA,MAAIC,MAAc,GAAGC,sBAArB;AACA,MAAIR,IAAI,KAAKS,iCAA0BC,KAAvC,EAA8C;AAC5CJ,IAAAA,KAAK,GAAG,CAAR;AACAC,IAAAA,MAAM,GAAGI,uBAAT;AACD;AACD,MAAIX,IAAI,KAAKS,iCAA0BG,IAAvC,EAA6C;AAC3CN,IAAAA,KAAK,GAAG,CAAR;AACAC,IAAAA,MAAM,GAAGM,sBAAT;AACD;AACD,MAAI,CAACV,SAAL,EAAgB;AACdE,IAAAA,SAAS,GAAGH,GAAZ;AACAE,IAAAA,aAAa,GAAGU,MAAM,CAACZ,GAAD,CAAN,IAAeI,KAA/B;AACD,GAHD,MAGO;AACLD,IAAAA,SAAS,GAAG,OAAGJ,IAAI,KAAK,IAAT,GAAgB,EAAhB,GAAqBA,IAAxB,IAA+BC,GAA/B,EAAqCa,KAArC,CAA2C,CAACR,MAA5C,CAAZ;AACAH,IAAAA,aAAa,GAAGC,SAAS,CAACE,MAAV,GAAmBA,MAAnC;AACD;AACD,SAAO,EAAEF,SAAS,EAATA,SAAF,EAAaD,aAAa,EAAbA,aAAb,EAAP;AACD,CA1BM,C","sourcesContent":["import { LENGTH_DATE, LENGTH_MONTH, LENGTH_YEAR } from '../../../lib/date/constants';\r\nimport { InternalDateComponentRaw, InternalDateComponentType } from '../../../lib/date/types';\r\n\r\nexport const inputNumber = (\r\n  type: InternalDateComponentType | null,\r\n  prev: InternalDateComponentRaw,\r\n  key: string,\r\n  inputMode: boolean,\r\n): { nextValue: InternalDateComponentRaw; nextInputMode: boolean } => {\r\n  let nextInputMode = false;\r\n  let nextValue: string;\r\n  let first = 10;\r\n  let length: number = LENGTH_YEAR;\r\n  if (type === InternalDateComponentType.Month) {\r\n    first = 1;\r\n    length = LENGTH_MONTH;\r\n  }\r\n  if (type === InternalDateComponentType.Date) {\r\n    first = 3;\r\n    length = LENGTH_DATE;\r\n  }\r\n  if (!inputMode) {\r\n    nextValue = key;\r\n    nextInputMode = Number(key) <= first;\r\n  } else {\r\n    nextValue = `${prev === null ? '' : prev}${key}`.slice(-length);\r\n    nextInputMode = nextValue.length < length;\r\n  }\r\n  return { nextValue, nextInputMode };\r\n};\r\n"]}
+{"version":3,"sources":["inputNumber.tsx"],"names":["inputNumber","type","prev","key","inputMode","maxValue","nextInputMode","nextValue","firstDigits","getFirstDigits","maxLength","getMaxLength","Number","addKey","length","isCorrectDate","value","slice","first","InternalDateComponentType","Month","Date","Math","floor","LENGTH_YEAR","LENGTH_MONTH","LENGTH_DATE"],"mappings":"oEAAA;AACA;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc;AACzBC,IADyB;AAEzBC,IAFyB;AAGzBC,GAHyB;AAIzBC,SAJyB;AAKzBC,QALyB;AAM2C;AACpE,MAAIC,aAAa,GAAG,KAApB;AACA,MAAIC,SAAJ;AACA,MAAMC,WAAW,GAAGC,cAAc,CAACR,IAAD,EAAOI,QAAP,CAAlC;AACA,MAAMK,SAAS,GAAGC,YAAY,CAACV,IAAD,CAA9B;;AAEA,MAAI,CAACG,SAAL,EAAgB;AACdG,IAAAA,SAAS,GAAGJ,GAAZ;AACAG,IAAAA,aAAa,GAAGM,MAAM,CAACT,GAAD,CAAN,IAAeK,WAA/B;AACD,GAHD,MAGO;AACLD,IAAAA,SAAS,GAAGM,MAAM,CAACX,IAAD,EAAOC,GAAP,EAAYO,SAAZ,CAAlB;AACAJ,IAAAA,aAAa,GAAGC,SAAS,CAACO,MAAV,GAAmBJ,SAAnC;AACA,QAAI,CAACK,aAAa,CAACR,SAAD,EAAYF,QAAZ,EAAsBK,SAAtB,CAAlB,EAAoD;AAClDH,MAAAA,SAAS,GAAGL,IAAI,GAAG,EAAnB;AACAI,MAAAA,aAAa,GAAG,IAAhB;AACD;AACF;;AAED,SAAO,EAAEC,SAAS,EAATA,SAAF,EAAaD,aAAa,EAAbA,aAAb,EAAP;AACD,CAzBM,C;;AA2BP,SAASO,MAAT,CAAgBX,IAAhB,EAAgDC,GAAhD,EAA6DW,MAA7D,EAA6E;AAC3E,MAAIE,KAAK,GAAGb,GAAZ;AACA,MAAID,IAAI,KAAK,IAAb,EAAmB;AACjBc,IAAAA,KAAK,QAAMd,IAAN,GAAaC,GAAlB;AACD;AACD,SAAOa,KAAK,CAACC,KAAN,CAAY,CAACH,MAAb,CAAP;AACD;;AAED,SAASC,aAAT,CAAuBC,KAAvB,EAAsCX,QAAtC,EAAwDS,MAAxD,EAAwE;AACtE,SAAOF,MAAM,CAACI,KAAD,CAAN,IAAiBX,QAAjB,KAA8BO,MAAM,CAACI,KAAD,CAAN,KAAkB,CAAlB,IAAuBA,KAAK,CAACF,MAAN,KAAiBA,MAAtE,CAAP;AACD;;AAED,SAASL,cAAT,CAAwBR,IAAxB,EAAgEI,QAAhE,EAAkF;AAChF,MAAIa,KAAK,GAAG,EAAZ;AACA,MAAIjB,IAAI,KAAKkB,iCAA0BC,KAAvC,EAA8C;AAC5CF,IAAAA,KAAK,GAAG,CAAR;AACD;AACD,MAAIjB,IAAI,KAAKkB,iCAA0BE,IAAvC,EAA6C;AAC3CH,IAAAA,KAAK,GAAGI,IAAI,CAACC,KAAL,CAAWlB,QAAQ,GAAG,EAAtB,CAAR;AACD;AACD,SAAOa,KAAP;AACD;;AAED,SAASP,YAAT,CAAsBV,IAAtB,EAA8D;AAC5D,MAAIa,MAAM,GAAGU,sBAAb;AACA,MAAIvB,IAAI,KAAKkB,iCAA0BC,KAAvC,EAA8C;AAC5CN,IAAAA,MAAM,GAAGW,uBAAT;AACD;AACD,MAAIxB,IAAI,KAAKkB,iCAA0BE,IAAvC,EAA6C;AAC3CP,IAAAA,MAAM,GAAGY,sBAAT;AACD;AACD,SAAOZ,MAAP;AACD","sourcesContent":["import { LENGTH_DATE, LENGTH_MONTH, LENGTH_YEAR } from '../../../lib/date/constants';\nimport { InternalDateComponentRaw, InternalDateComponentType } from '../../../lib/date/types';\n\nexport const inputNumber = (\n  type: InternalDateComponentType | null,\n  prev: InternalDateComponentRaw,\n  key: string,\n  inputMode: boolean,\n  maxValue: number,\n): { nextValue: InternalDateComponentRaw; nextInputMode: boolean } => {\n  let nextInputMode = false;\n  let nextValue;\n  const firstDigits = getFirstDigits(type, maxValue);\n  const maxLength = getMaxLength(type);\n\n  if (!inputMode) {\n    nextValue = key;\n    nextInputMode = Number(key) <= firstDigits;\n  } else {\n    nextValue = addKey(prev, key, maxLength);\n    nextInputMode = nextValue.length < maxLength;\n    if (!isCorrectDate(nextValue, maxValue, maxLength)) {\n      nextValue = prev + '';\n      nextInputMode = true;\n    }\n  }\n\n  return { nextValue, nextInputMode };\n};\n\nfunction addKey(prev: InternalDateComponentRaw, key: string, length: number) {\n  let value = key;\n  if (prev !== null) {\n    value = `${prev}${key}`;\n  }\n  return value.slice(-length);\n}\n\nfunction isCorrectDate(value: string, maxValue: number, length: number) {\n  return Number(value) <= maxValue && (Number(value) !== 0 || value.length !== length);\n}\n\nfunction getFirstDigits(type: InternalDateComponentType | null, maxValue: number) {\n  let first = 10;\n  if (type === InternalDateComponentType.Month) {\n    first = 1;\n  }\n  if (type === InternalDateComponentType.Date) {\n    first = Math.floor(maxValue / 10);\n  }\n  return first;\n}\n\nfunction getMaxLength(type: InternalDateComponentType | null) {\n  let length = LENGTH_YEAR;\n  if (type === InternalDateComponentType.Month) {\n    length = LENGTH_MONTH;\n  }\n  if (type === InternalDateComponentType.Date) {\n    length = LENGTH_DATE;\n  }\n  return length;\n}\n"]}

package/cjs/components/DateInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './DateInput';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './DateInput';\n"]}

package/cjs/components/DatePicker/DatePicker.d.ts

@@ -1,46 +1,65 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { CommonProps } from '../../internal/CommonWrapper';
-export interface DatePickerProps<T> extends CommonProps {
+import { Nullable } from '../../typings/utility-types';
+import { DropdownContainerProps } from '../../internal/DropdownContainer';
+import { CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';
+import { CalendarDateShape, CalendarProps } from '../Calendar';
+import { SizeProp } from '../../lib/types/props';
+export declare const MIN_WIDTH = 120;
+export interface DatePickerProps extends Pick<DropdownContainerProps, 'menuPos'>, Pick<CalendarProps, 'isHoliday' | 'minDate' | 'maxDate' | 'renderDay' | 'onMonthChange'>, CommonProps {
     autoFocus?: boolean;
     disabled?: boolean;
+    /**
+     * Отвечает за отображение кнопки "Сегодня".
+     */
     enableTodayLink?: boolean;
+    /**
+     * Состояние валидации при ошибке.
+     */
     error?: boolean;
-    minDate: T;
-    maxDate: T;
     menuAlign?: 'left' | 'right';
-    size?: 'small' | 'medium' | 'large';
-    value?: T | null;
+    size?: SizeProp;
+    value?: string | null;
+    /**
+     * Состояние валидации при предупреждении.
+     */
     warning?: boolean;
-    width: number | string;
+    width?: number | string;
     onBlur?: () => void;
     /**
      * Вызывается при изменении `value`
      *
      * @param value - строка в формате `dd.mm.yyyy`.
      */
-    onValueChange: (value: T) => void;
+    onValueChange: (value: string) => void;
     onFocus?: () => void;
     onKeyDown?: (e: React.KeyboardEvent<any>) => void;
     onMouseEnter?: (e: React.MouseEvent<any>) => void;
     onMouseLeave?: (e: React.MouseEvent<any>) => void;
     onMouseOver?: (e: React.MouseEvent<any>) => void;
     /**
-     * Функция для определения праздничных дней
-     * @default (_day, isWeekend) => isWeekend
-     * @param {T} day - строка в формате `dd.mm.yyyy`
-     * @param {boolean} isWeekend - флаг выходного (суббота или воскресенье)
+     * Использовать на мобильных устройствах нативный календарь для выбора дат.
      *
-     * @returns {boolean} `true` для выходного или `false` для рабочего дня
+     * - На iOS нативный календарь не умеет работать с minDate и maxDate
      */
-    isHoliday: (day: T, isWeekend: boolean) => boolean;
+    useMobileNativeDatePicker?: boolean;
 }
 export interface DatePickerState {
     opened: boolean;
+    canUseMobileNativeDatePicker: boolean;
+    today: CalendarDateShape;
 }
-declare type DatePickerValue = string;
-export declare class DatePicker extends React.Component<DatePickerProps<DatePickerValue>, DatePickerState> {
+export declare const DatePickerDataTids: {
+    readonly root: "DatePicker__root";
+    readonly input: "DatePicker__input";
+    readonly label: "DatePicker__label";
+    readonly pickerRoot: "Picker__root";
+    readonly pickerTodayWrapper: "Picker__todayWrapper";
+};
+declare type DefaultProps = Required<Pick<DatePickerProps, 'minDate' | 'maxDate'>>;
+export declare class DatePicker extends React.PureComponent<DatePickerProps, DatePickerState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         autoFocus: PropTypes.Requireable<boolean>;
         disabled: PropTypes.Requireable<boolean>;
@@ -53,7 +72,7 @@ export declare class DatePicker extends React.Component<DatePickerProps<DatePick
          * Максимальная дата в календаре.
          */
         maxDate: PropTypes.Validator<string>;
-        menuAlign: PropTypes.Requireable<"left" | "right">;
+        menuAlign: PropTypes.Requireable<string>;
         /**
          * Минимальная дата в календаре.
          */
@@ -63,7 +82,7 @@ export declare class DatePicker extends React.Component<DatePickerProps<DatePick
          */
         value: PropTypes.Requireable<string>;
         warning: PropTypes.Requireable<boolean>;
-        width: PropTypes.Validator<string | number>;
+        width: PropTypes.Requireable<string | number>;
         onBlur: PropTypes.Requireable<(...args: any[]) => any>;
         onValueChange: PropTypes.Validator<(...args: any[]) => any>;
         onFocus: PropTypes.Requireable<(...args: any[]) => any>;
@@ -71,26 +90,26 @@ export declare class DatePicker extends React.Component<DatePickerProps<DatePick
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseLeave: PropTypes.Requireable<(...args: any[]) => any>;
         onMouseOver: PropTypes.Requireable<(...args: any[]) => any>;
-        isHoliday: PropTypes.Validator<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        width: number;
-        minDate: string;
-        maxDate: string;
-        isHoliday: (_day: string, isWeekend: boolean) => boolean;
+        isHoliday: PropTypes.Requireable<(...args: any[]) => any>;
+        renderDay: PropTypes.Requireable<(...args: any[]) => any>;
+        onMonthChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
-    static validate: (value: string | null | undefined, range?: {
+    static defaultProps: DefaultProps;
+    private getProps;
+    private theme;
+    private calendar;
+    private readonly locale;
+    static validate: (value: Nullable<string>, range?: {
         minDate?: string | undefined;
         maxDate?: string | undefined;
     }) => boolean;
     state: DatePickerState;
     private input;
     private focused;
-    private internalDate?;
-    private minDate?;
-    private maxDate?;
+    private setRootNode;
+    private isMobileLayout;
     componentDidMount(): void;
-    UNSAFE_componentWillReceiveProps(nextProps: DatePickerProps<DatePickerValue>): void;
+    componentDidUpdate(): void;
     /**
      * @public
      */
@@ -105,13 +124,16 @@ export declare class DatePicker extends React.Component<DatePickerProps<DatePick
      */
     close(): void;
     render(): JSX.Element;
-    renderMain: (props: Pick<Pick<DatePickerProps<string>, "onValueChange" | "autoFocus" | "disabled" | "size" | "value" | "width" | "onFocus" | "onBlur" | "onKeyDown" | "onMouseEnter" | "onMouseLeave" | "onMouseOver" | "error" | "warning" | "menuAlign" | "minDate" | "maxDate" | "isHoliday" | "enableTodayLink">, "onValueChange" | "autoFocus" | "disabled" | "size" | "value" | "width" | "onFocus" | "onBlur" | "onKeyDown" | "onMouseEnter" | "onMouseLeave" | "onMouseOver" | "error" | "warning" | "menuAlign" | "minDate" | "maxDate" | "isHoliday" | "enableTodayLink">) => JSX.Element;
-    private getInputRef;
+    renderMain: (props: CommonWrapperRestProps<DatePickerProps>) => JSX.Element;
     private parseValueToDate;
+    private renderTodayLink;
+    private handleSelectToday;
+    getParent: () => Nullable<Element>;
+    private getRootStyle;
+    private getInputRef;
     private handleFocus;
     private handleBlur;
-    private handlePick;
+    private handleValueChange;
     private handleSelect;
-    private isHoliday;
 }
 export {};

package/cjs/components/DatePicker/DatePicker.js

@@ -1,20 +1,37 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.DatePicker = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _propTypes = _interopRequireDefault(require("prop-types"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.MIN_WIDTH = exports.DatePickerDataTids = exports.DatePicker = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
-var _reactDom = require("react-dom");
 
+var _locale = require("../../lib/locale");
+var _decorators = require("../../lib/locale/decorators");
+var _InternalDateGetter = require("../../lib/date/InternalDateGetter");
+var _ArrowAUp16Light = require("../../internal/icons2022/ArrowAUpIcon/ArrowAUp16Light");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 var _InternalDate = require("../../lib/date/InternalDate");
-var _InternalDateTransformer = require("../../lib/date/InternalDateTransformer");
 var _constants = require("../../lib/date/constants");
 var _types = require("../../lib/date/types");
 
-
 var _DateInput = require("../DateInput");
 var _DropdownContainer = require("../../internal/DropdownContainer");
 var _filterProps = require("../../lib/filterProps");
 var _CommonWrapper = require("../../internal/CommonWrapper");
+var _client = require("../../lib/client");
+var _NativeDateInput = require("../../internal/NativeDateInput");
+var _rootNode = require("../../lib/rootNode");
+var _utils = require("../../lib/utils");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _Calendar = require("../Calendar");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+
+var _Button = require("../Button");
+var _CalendarUtils = require("../Calendar/CalendarUtils");
+
+var _decorator = require("../ResponsiveLayout/decorator");
 
-var _Picker = require("./Picker");
 var _DatePicker = require("./DatePicker.styles");
+var _locale2 = require("./locale");
+var _MobilePicker = require("./MobilePicker");var _dec, _class, _class2, _temp;
 
 var INPUT_PASS_PROPS = {
   autoFocus: true,
@@ -22,7 +39,18 @@ var INPUT_PASS_PROPS = {
   warning: true,
   error: true,
   size: true,
-  onKeyDown: true };var
+  onKeyDown: true };
+
+
+var MIN_WIDTH = 120;exports.MIN_WIDTH = MIN_WIDTH;
+
+
+
+
+
+
+
+
 
 
 
@@ -64,14 +92,20 @@ var INPUT_PASS_PROPS = {
 
 
 
+var DatePickerDataTids = {
+  root: 'DatePicker__root',
+  input: 'DatePicker__input',
+  label: 'DatePicker__label',
+  pickerRoot: 'Picker__root',
+  pickerTodayWrapper: 'Picker__todayWrapper' };exports.DatePickerDataTids = DatePickerDataTids;var
 
 
 
-DatePicker = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(DatePicker, _React$Component);function DatePicker() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
 
+DatePicker = (_dec = (0, _decorators.locale)('DatePicker', _locale2.DatePickerLocaleHelper), (0, _decorator.responsiveLayout)(_class = (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$PureComponent) {(0, _inheritsLoose2.default)(DatePicker, _React$PureComponent);function DatePicker() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$PureComponent.call.apply(_React$PureComponent, [this].concat(args)) || this;_this.
 
 
 
@@ -134,7 +168,9 @@ DatePicker = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(DatePicker.defaultProps);_this.
 
+    calendar = null;_this.
 
 
 
@@ -152,13 +188,38 @@ DatePicker = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
-    state = { opened: false };_this.
+
+
+
+
+
+
+
+
+
+
+    state = { opened: false, canUseMobileNativeDatePicker: false, today: (0, _CalendarUtils.getTodayDate)() };_this.
 
     input = null;_this.
     focused = false;_this.
-    internalDate = _this.parseValueToDate(_this.props.value);_this.
-    minDate = _this.parseValueToDate(_this.props.minDate);_this.
-    maxDate = _this.parseValueToDate(_this.props.maxDate);_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -214,30 +275,78 @@ DatePicker = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
     renderMain = function (props) {
       var picker = null;
-      var date = _this.internalDate ? _this.internalDate.toNativeFormat() : null;
-      if (_this.state.opened) {
-        picker = /*#__PURE__*/
-        _react.default.createElement(_DropdownContainer.DropdownContainer, { getParent: function getParent() {return (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));}, offsetY: 2, align: _this.props.menuAlign }, /*#__PURE__*/
-        _react.default.createElement(_Picker.Picker, {
-          value: date,
-          minDate: _this.minDate && _this.minDate.toNativeFormat() || undefined,
-          maxDate: _this.maxDate && _this.maxDate.toNativeFormat() || undefined,
-          onPick: _this.handlePick,
-          onSelect: _this.handleSelect,
-          enableTodayLink: _this.props.enableTodayLink,
-          isHoliday: _this.isHoliday }));
 
+      var _this$getProps = _this.getProps(),minDate = _this$getProps.minDate,maxDate = _this$getProps.maxDate;
 
+      var isMobile = _this.isMobileLayout;
 
+      if (_this.state.opened) {
+        if (isMobile) {
+          picker = /*#__PURE__*/
+          _react.default.createElement(_MobilePicker.MobilePicker, {
+            value: _this.props.value,
+            minDate: _this.parseValueToDate(minDate),
+            maxDate: _this.parseValueToDate(maxDate),
+            onValueChange: _this.props.onValueChange,
+            enableTodayLink: _this.props.enableTodayLink,
+            isHoliday: _this.props.isHoliday,
+            onCloseRequest: _this.handleBlur,
+            renderDay: props.renderDay,
+            onMonthChange: props.onMonthChange });
+
+
+        } else {
+          picker = /*#__PURE__*/
+          _react.default.createElement(_locale.LocaleContext.Provider, {
+            value: {
+              locale: {
+                Calendar: {
+                  months: _this.locale.months,
+                  dayCellChooseDateAriaLabel: _this.locale.dayCellChooseDateAriaLabel,
+                  selectMonthAriaLabel: _this.locale.selectMonthAriaLabel,
+                  selectYearAriaLabel: _this.locale.selectYearAriaLabel,
+                  selectChosenAriaLabel: _this.locale.selectChosenAriaLabel } } } }, /*#__PURE__*/
+
+
+
+
+          _react.default.createElement(_DropdownContainer.DropdownContainer, {
+            menuPos: _this.props.menuPos,
+            "data-tid": DatePickerDataTids.root,
+            getParent: _this.getParent,
+            offsetY: parseInt(_this.theme.datePickerMenuOffsetY),
+            align: _this.props.menuAlign }, /*#__PURE__*/
+
+          _react.default.createElement("div", {
+            "data-tid": DatePickerDataTids.pickerRoot,
+            className: _DatePicker.styles.calendarWrapper(_this.theme),
+            onMouseDown: function onMouseDown(e) {return e.preventDefault();} }, /*#__PURE__*/
+
+          _react.default.createElement(_Calendar.Calendar, {
+            ref: function ref(c) {return _this.calendar = c;},
+            maxDate: _this.parseValueToDate(maxDate),
+            minDate: _this.parseValueToDate(minDate),
+            onValueChange: _this.handleValueChange,
+            isHoliday: _this.props.isHoliday,
+            value: _this.parseValueToDate(_this.props.value),
+            renderDay: _this.props.renderDay,
+            onMonthChange: _this.props.onMonthChange }),
+
+          _this.props.enableTodayLink && _this.renderTodayLink(), ' ')));
+
+
+
+
+        }
       }
-
       return /*#__PURE__*/(
         _react.default.createElement("label", {
-          className: _DatePicker.jsStyles.root(),
-          style: { width: _this.props.width },
+          className: _DatePicker.styles.root(),
+          style: _this.getRootStyle(),
           onMouseEnter: _this.props.onMouseEnter,
           onMouseLeave: _this.props.onMouseLeave,
-          onMouseOver: _this.props.onMouseOver }, /*#__PURE__*/
+          onMouseOver: _this.props.onMouseOver,
+          "data-tid": DatePickerDataTids.label }, /*#__PURE__*/
 
         _react.default.createElement(_DateInput.DateInput, (0, _extends2.default)({},
         (0, _filterProps.filterProps)(props, INPUT_PASS_PROPS), {
@@ -245,19 +354,26 @@ DatePicker = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
           value: _this.props.value || '',
           width: "100%",
           withIcon: true,
-          minDate: _this.props.minDate,
-          maxDate: _this.props.maxDate,
-          onBlur: _this.handleBlur,
+          minDate: minDate,
+          maxDate: maxDate,
+          onBlur: isMobile ? undefined : _this.handleBlur,
           onFocus: _this.handleFocus,
-          onValueChange: _this.props.onValueChange })),
+          onValueChange: _this.props.onValueChange,
+          "data-tid": DatePickerDataTids.input })),
+
+        _this.state.canUseMobileNativeDatePicker ? /*#__PURE__*/
+        _react.default.createElement(_NativeDateInput.NativeDateInput, {
+          onValueChange: _this.props.onValueChange,
+          value: _this.props.value || '',
+          minDate: minDate,
+          maxDate: maxDate,
+          disabled: _this.props.disabled }) :
+
 
         picker));
 
 
-    };_this.
 
-    getInputRef = function (ref) {
-      _this.input = ref;
     };_this.
 
 
@@ -271,6 +387,66 @@ DatePicker = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    handleSelectToday = function (today) {return function () {
+        _this.handleSelect(today);
+
+        if (_this.calendar) {
+          var _this$state$today = _this.state.today,month = _this$state$today.month,year = _this$state$today.year;
+          _this.calendar.scrollToMonth(month, year);
+        }
+      };};_this.
+
+    getParent = function () {
+      return (0, _rootNode.getRootNode)((0, _assertThisInitialized2.default)(_this));
+    };_this.
+
+    getRootStyle = function () {
+      var width = _this.props.width;
+      return (0, _utils.isNonNullable)(width) ? { width: width } : { minWidth: MIN_WIDTH };
+    };_this.
+
+    getInputRef = function (ref) {
+      _this.input = ref;
+    };_this.
+
     handleFocus = function () {
       if (_this.focused) {
         return;
@@ -298,34 +474,32 @@ DatePicker = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.defau
       }
     };_this.
 
-    handlePick = function (dateShape) {
-      _this.handleSelect(dateShape);
+    handleValueChange = function (value) {
+      _this.handleSelect(value);
       _this.blur();
     };_this.
 
-    handleSelect = function (_ref) {var date = _ref.date,month = _ref.month,year = _ref.year;
-      var value = _InternalDateTransformer.InternalDateTransformer.dateToInternalString({ date: date, month: month + 1, year: year });
+    handleSelect = function (value) {
+      if (!value) {
+        return null;
+      }
+
       if (_this.props.onValueChange) {
         _this.props.onValueChange(value);
       }
-    };_this.
-
-    isHoliday = function (_ref2) {var date = _ref2.date,month = _ref2.month,year = _ref2.year,isWeekend = _ref2.isWeekend;
-      var dateString = _InternalDateTransformer.InternalDateTransformer.dateToInternalString({ date: date, month: month + 1, year: year });
-      return _this.props.isHoliday(dateString, isWeekend);
-    };return _this;}var _proto = DatePicker.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.autoFocus) {this.focus();}};_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {var disabled = nextProps.disabled;var opened = this.state.opened;if (disabled && opened) {this.close();}this.internalDate = this.parseValueToDate(nextProps.value);this.minDate = this.parseValueToDate(nextProps.minDate);this.maxDate = this.parseValueToDate(nextProps.maxDate);} /**
-   * @public
-   */;_proto.blur = function blur() {if (this.input) {this.input.blur();}this.handleBlur();} /**
-   * @public
-   */;_proto.focus = function focus() {if (this.props.disabled) {return;}if (this.input) {this.input.focus();}this.handleFocus();} /**
-   * Закрывает выпадашку выбора дня
-   * @public
-   */;_proto.close = function close() {this.setState({ opened: false });};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, this.renderMain);};_proto.parseValueToDate = function parseValueToDate(value) {if (value === undefined || value === null) {return undefined;}var date = new _InternalDate.InternalDate({ value: value });if (date.validate({ checks: [_types.InternalDateValidateCheck.NotNull, _types.InternalDateValidateCheck.Native] })) {return date;}return undefined;};return DatePicker;}(_react.default.Component);exports.DatePicker = DatePicker;DatePicker.__KONTUR_REACT_UI__ = 'DatePicker';DatePicker.propTypes = { autoFocus: _propTypes.default.bool, disabled: _propTypes.default.bool, /**
-   * Включает кнопку сегодня в календаре
-   */enableTodayLink: _propTypes.default.bool, error: _propTypes.default.bool, /**
-   * Максимальная дата в календаре.
-   */maxDate: _propTypes.default.string.isRequired, menuAlign: _propTypes.default.oneOf(['left', 'right']), /**
-   * Минимальная дата в календаре.
-   */minDate: _propTypes.default.string.isRequired, /**
-   * Строка формата `dd.mm.yyyy`
-   */value: _propTypes.default.string, warning: _propTypes.default.bool, width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired, onBlur: _propTypes.default.func, onValueChange: _propTypes.default.func.isRequired, onFocus: _propTypes.default.func, onKeyDown: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, isHoliday: _propTypes.default.func.isRequired };DatePicker.defaultProps = { width: 120, minDate: _constants.MIN_FULLDATE, maxDate: _constants.MAX_FULLDATE, isHoliday: function isHoliday(_day, isWeekend) {return isWeekend;} };DatePicker.validate = function (value, range) {if (range === void 0) {range = {};}if (!value) {return false;}var _range = range,_range$minDate = _range.minDate,minDate = _range$minDate === void 0 ? _constants.MIN_FULLDATE : _range$minDate,_range$maxDate = _range.maxDate,maxDate = _range$maxDate === void 0 ? _constants.MAX_FULLDATE : _range$maxDate;var internalDate = new _InternalDate.InternalDate({ order: _types.InternalDateOrder.DMY, separator: _types.InternalDateSeparator.Dot }).setRangeStart(new _InternalDate.InternalDate({ value: minDate })).setRangeEnd(new _InternalDate.InternalDate({ value: maxDate })).parseValue(value);return internalDate.validate({ checks: [_types.InternalDateValidateCheck.NotNull, _types.InternalDateValidateCheck.Number, _types.InternalDateValidateCheck.Native, _types.InternalDateValidateCheck.Limits, _types.InternalDateValidateCheck.Range] });};
+    };return _this;}var _proto = DatePicker.prototype;_proto.componentDidMount = function componentDidMount() {if (this.props.useMobileNativeDatePicker && _client.isMobile) {this.setState({ canUseMobileNativeDatePicker: true });}if (this.props.autoFocus) {this.focus();}};_proto.componentDidUpdate = function componentDidUpdate() {var disabled = this.props.disabled;var opened = this.state.opened;if (disabled && opened) {this.close();}} /**
+   * @public
+   */;_proto.blur = function blur() {if (this.input) {this.input.blur();}this.handleBlur();} /**
+   * @public
+   */;_proto.focus = function focus() {if (this.props.disabled) {return;}if (this.input) {this.input.focus();}this.handleFocus();} /**
+   * Закрывает выпадашку выбора дня
+   * @public
+   */;_proto.close = function close() {this.setState({ opened: false });};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ calendarBottomSeparatorBorder: 'none' }, theme) }, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain));});};_proto.parseValueToDate = function parseValueToDate(value) {if (value === undefined || value === null) {return undefined;}var date = new _InternalDate.InternalDate({ value: value });if (date.validate({ checks: [_types.InternalDateValidateCheck.NotNull, _types.InternalDateValidateCheck.Native] })) {return date.toString({ withPad: true });}return undefined;};_proto.renderTodayLink = function renderTodayLink() {var _cx;var _this$locale = this.locale,order = _this$locale.order,separator = _this$locale.separator;var today = new _InternalDate.InternalDate({ order: order, separator: separator }).setComponents(_InternalDateGetter.InternalDateGetter.getTodayComponents()).toString({ withPad: true, withSeparator: true });if ((0, _ThemeHelpers.isTheme2022)(this.theme)) {return /*#__PURE__*/_react.default.createElement("div", { style: { margin: 8 } }, /*#__PURE__*/_react.default.createElement(_Button.Button, { "aria-label": this.locale.todayAriaLabel, "data-tid": DatePickerDataTids.pickerTodayWrapper, width: "100%", onClick: this.handleSelectToday(today), icon: /*#__PURE__*/_react.default.createElement(_ArrowAUp16Light.ArrowAUpIcon16Light, null) }, this.locale.today));}return /*#__PURE__*/_react.default.createElement("button", { "aria-label": this.locale.todayAriaLabel, "data-tid": DatePickerDataTids.pickerTodayWrapper, className: (0, _Emotion.cx)((_cx = {}, _cx[_DatePicker.styles.todayLinkWrapper(this.theme)] = true, _cx)), onClick: this.handleSelectToday(today), tabIndex: -1 }, this.locale.today + " " + today);};return DatePicker;}(_react.default.PureComponent), _class2.__KONTUR_REACT_UI__ = 'DatePicker', _class2.displayName = 'DatePicker', _class2.propTypes = { autoFocus: _propTypes.default.bool, disabled: _propTypes.default.bool, /**
+   * Включает кнопку сегодня в календаре
+   */enableTodayLink: _propTypes.default.bool, error: _propTypes.default.bool, /**
+   * Максимальная дата в календаре.
+   */maxDate: _propTypes.default.string.isRequired, menuAlign: _propTypes.default.oneOf(['left', 'right']), /**
+   * Минимальная дата в календаре.
+   */minDate: _propTypes.default.string.isRequired, /**
+   * Строка формата `dd.mm.yyyy`
+   */value: _propTypes.default.string, warning: _propTypes.default.bool, width: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]), onBlur: _propTypes.default.func, onValueChange: _propTypes.default.func.isRequired, onFocus: _propTypes.default.func, onKeyDown: _propTypes.default.func, onMouseEnter: _propTypes.default.func, onMouseLeave: _propTypes.default.func, onMouseOver: _propTypes.default.func, isHoliday: _propTypes.default.func, renderDay: _propTypes.default.func, onMonthChange: _propTypes.default.func }, _class2.defaultProps = { minDate: _constants.MIN_FULLDATE, maxDate: _constants.MAX_FULLDATE }, _class2.validate = function (value, range) {if (range === void 0) {range = {};}if (!value) {return false;}var _range = range,_range$minDate = _range.minDate,minDate = _range$minDate === void 0 ? _constants.MIN_FULLDATE : _range$minDate,_range$maxDate = _range.maxDate,maxDate = _range$maxDate === void 0 ? _constants.MAX_FULLDATE : _range$maxDate;var internalDate = new _InternalDate.InternalDate({ order: _types.InternalDateOrder.DMY, separator: _types.InternalDateSeparator.Dot }).setRangeStart(new _InternalDate.InternalDate({ value: minDate })).setRangeEnd(new _InternalDate.InternalDate({ value: maxDate })).parseValue(value);return internalDate.validate({ checks: [_types.InternalDateValidateCheck.NotNull, _types.InternalDateValidateCheck.Number, _types.InternalDateValidateCheck.Native, _types.InternalDateValidateCheck.Limits, _types.InternalDateValidateCheck.Range] });}, _temp)) || _class) || _class) || _class);exports.DatePicker = DatePicker;