@skbkontur/react-ui 1.12.2 → 2.0.0-beta.4

package/components/DateInput/DateInput.js

@@ -1,520 +1,375 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var Calendar_1 = tslib_1.__importDefault(require("@skbkontur/react-icons/Calendar"));
-var React = tslib_1.__importStar(require("react"));
-var constants_1 = require("../../lib/date/constants");
-var InternalDate_1 = require("../../lib/date/InternalDate");
-var InternalDateGetter_1 = tslib_1.__importDefault(require("../../lib/date/InternalDateGetter"));
-var InternalDateTransformer_1 = tslib_1.__importDefault(require("../../lib/date/InternalDateTransformer"));
-var types_1 = require("../../lib/date/types");
-var MouseDrag_1 = tslib_1.__importDefault(require("../../lib/events/MouseDrag"));
-var utils_1 = require("../../lib/utils");
-var locale_1 = require("../DatePicker/locale");
-var ensureOldIEClassName_1 = require("../ensureOldIEClassName");
-var InputLikeText_1 = tslib_1.__importDefault(require("../internal/InputLikeText"));
-var decorators_1 = require("../LocaleProvider/decorators");
-var DateInput_module_less_1 = tslib_1.__importDefault(require("./DateInput.module.css"));
-var DateFragmentsView_1 = require("./DateFragmentsView");
-var DateInputKeyboardActions_1 = require("./helpers/DateInputKeyboardActions");
-var inputNumber_1 = require("./helpers/inputNumber");
-var SelectionHelpers_1 = require("./helpers/SelectionHelpers");
-var Emotion_1 = require("../../lib/theming/Emotion");
-var DateInput_styles_1 = tslib_1.__importDefault(require("./DateInput.styles"));
-var ThemeConsumer_1 = tslib_1.__importDefault(require("../ThemeConsumer"));
-var lodash_debounce_1 = tslib_1.__importDefault(require("lodash.debounce"));
-var IS_IE = ensureOldIEClassName_1.isIE || ensureOldIEClassName_1.isEdge;
-var DateInput = /** @class */function (_super) {
-  tslib_1.__extends(DateInput, _super);
-  function DateInput(props) {
-    var _this = _super.call(this, props) || this;
-    _this.inputLikeText = null;
-    _this.divInnerNode = null;
-    _this.isMouseDown = false;
-    _this.isFirstFocus = false;
-    _this.ieFrozen = false;
-    _this.divInnerNodeRef = function (el) {
-      _this.divInnerNode = el;
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
     };
-    _this.handleMouseDown = function (event) {
-      _this.isMouseDown = true;
-      if (IS_IE && _this.state.focused && !_this.ieFrozen) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
-    _this.handleMouseUp = function () {
-      _this.isMouseDown = false;
-      _this.setState({ selected: _this.getFirstDateComponentType() });
-    };
-    _this.handleSelectDateComponent = function (type, event) {
-      _this.isMouseDown = false;
-      if (_this.isFirstFocus && _this.state.internalDate && _this.state.internalDate.isEmpty()) {
-        _this.isFirstFocus = false;
-        return;
-      }
-      _this.selectDateComponent(type);
-      event.preventDefault();
-      event.stopPropagation();
-      _this.isFirstFocus = false;
-    };
-    _this.changeSelectedDateComponent = function (type) {
-      type = type || _this.state.selected;
-      if (type === null) {
-        return;
-      }
-      if (type === types_1.InternalDateComponentType.All) {
-        _this.selectNodeContents(_this.divInnerNode);
-        return;
-      }
-      var index = _this.state.typesOrder.indexOf(type);
-      if (index > -1) {
-        _this.selectNodeContents(_this.divInnerNode, index * 2, index * 2 + 1);
-      }
-    };
-    _this.handleMouseDragStart = function () {return _this.setState({ dragged: true, selected: null });};
-    _this.handleMouseDragEnd = function () {return _this.setState({ dragged: false });};
-    _this.updateInternalDate = function (_internalDate, state, callback) {
-      if (state === void 0) {state = {};}
-      if (callback === void 0) {callback = _this.emitChange;}
-      var internalDate = (_internalDate || _this.state.internalDate || new InternalDate_1.InternalDate()).clone();
-      internalDate.setOrder(_this.locale.order).setSeparator(_this.locale.separator);
-      var typesOrder = internalDate.toFragments().map(function (_a) {
-        var type = _a.type;
-        return type;
-      });
-      _this.setState(tslib_1.__assign({}, state, { typesOrder: typesOrder, internalDate: internalDate }), callback);
-    };
-    _this.updateInternalDateFromProps = function () {
-      var isMod = false;
-      var internalDate = _this.state.internalDate.clone();
-      var start = internalDate.getRangeStart();
-      var min = start && start.toInternalString();
-      var end = internalDate.getRangeEnd();
-      var max = end && end.toInternalString();
-      var _a = _this.locale,order = _a.order,separator = _a.separator;
-      if (_this.props.minDate !== min) {
-        isMod = true;
-        internalDate.setRangeStart(new InternalDate_1.InternalDate({ order: order, separator: separator, value: _this.props.minDate }));
-      }
-      if (_this.props.maxDate !== max) {
-        isMod = true;
-        internalDate.setRangeEnd(new InternalDate_1.InternalDate({ order: order, separator: separator, value: _this.props.maxDate }));
-      }
-      if (!_this.props.value || _this.props.value !== internalDate.toInternalString()) {
-        isMod = true;
-        internalDate.parseInternalValue(_this.props.value);
-      }
-      if (isMod) {
-        _this.setState({ internalDate: internalDate });
-      }
-    };
-    _this.handleFocus = function (event) {
-      if (_this.props.disabled) {
-        return;
-      }
-      if (IS_IE && _this.ieFrozen) {
-        _this.ieFrozen = false;
-        event.preventDefault();
-        return;
-      }
-      _this.setState(function (prevState) {
-        _this.isFirstFocus = !prevState.focused;
-        return {
-          focused: true,
-          selected: prevState.selected === null && !_this.isMouseDown ? _this.getFirstDateComponentType() : prevState.selected };
-
-      });
-      if (_this.props.onFocus) {
-        _this.props.onFocus(event);
-      }
-    };
-    _this.handleBlur = function (event) {
-      if (IS_IE && _this.ieFrozen) {
-        event.preventDefault();
-        return;
-      }
-      event.persist();
-      _this.setState({ focused: false, selected: null, inputMode: false }, function () {
-        var internalDate = _this.state.internalDate;
-        SelectionHelpers_1.removeAllSelections();
-        if (internalDate && internalDate.isIncomplete()) {
-          _this.updateInternalDate(internalDate.restore());
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
         }
-        if (_this.props.onBlur) {
-          _this.props.onBlur(event);
-        }
-      });
+        return t;
     };
-    _this.handleKeyDown = function (event) {
-      if (_this.props.disabled) {
-        return;
-      }
-      if (_this.props.onKeyDown) {
-        _this.props.onKeyDown(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-      }
-      var action = DateInputKeyboardActions_1.extractAction(event);
-      if (action === DateInputKeyboardActions_1.Actions.MoveSelectionLeft) {
-        _this.moveSelection(-1);
-      }
-      if (action === DateInputKeyboardActions_1.Actions.MoveSelectionRight) {
-        _this.moveSelection(1);
-      }
-      if (action === DateInputKeyboardActions_1.Actions.Separator) {
-        _this.pressDelimiter();
-      }
-      if (action === DateInputKeyboardActions_1.Actions.MoveSelectionFirst) {
-        _this.selectDateComponent(_this.getFirstDateComponentType());
-      }
-      if (action === DateInputKeyboardActions_1.Actions.MoveSelectionLast) {
-        _this.selectDateComponent(_this.getLastDateComponentType());
-      }
-      if (action === DateInputKeyboardActions_1.Actions.Increment) {
-        _this.updateDateComponentBy(1);
-      }
-      if (action === DateInputKeyboardActions_1.Actions.Decrement) {
-        _this.updateDateComponentBy(-1);
-      }
-      if (action === DateInputKeyboardActions_1.Actions.Digit) {
-        _this.inputValue(event);
-      }
-      if (action === DateInputKeyboardActions_1.Actions.ClearSelection) {
-        _this.clearSelected();
-      }
-      if (action === DateInputKeyboardActions_1.Actions.ClearOneChar) {
-        if (_this.state.selected === types_1.InternalDateComponentType.All) {
-          _this.clearSelected();
-        } else
-        {
-          _this.clearOneChar();
-        }
-      }
-      if (action === DateInputKeyboardActions_1.Actions.FullSelection) {
-        event.nativeEvent.stopImmediatePropagation();
-        _this.selectDateComponent(types_1.InternalDateComponentType.All);
-      }
-      if (action === DateInputKeyboardActions_1.Actions.PasteValue) {
-        // @ts-ignore (IE specific api)
-        if (ensureOldIEClassName_1.isIE && window.clipboardData) {
-          // @ts-ignore
-          _this.handlePaste(undefined, window.clipboardData.getData('text'));
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { ConditionalHandler } from '../../lib/ConditionalHandler.js';
+import { LENGTH_FULLDATE, MAX_FULLDATE, MIN_FULLDATE } from '../../lib/date/constants.js';
+import { InternalDateComponentType } from '../../lib/date/types.js';
+import { DatePickerLocaleHelper } from '../DatePicker/locale/index.js';
+import { InputLikeText } from '../../internal/InputLikeText/index.js';
+import { locale } from '../../lib/locale/decorators.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { createPropsGetter } from '../../lib/createPropsGetter.js';
+import { FocusControlWrapper } from '../../internal/FocusControlWrapper/index.js';
+import { withSize } from '../../lib/size/SizeDecorator.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { CalendarIcon } from './CalendarIcon.js';
+import { DateFragmentsView } from './DateFragmentsView.js';
+import { getStyles } from './DateInput.styles.js';
+import { Actions, extractAction } from './helpers/DateInputKeyboardActions.js';
+import { InternalDateMediator } from './helpers/InternalDateMediator.js';
+export var DateInputDataTids = {
+    root: 'DateInput__root',
+    icon: 'DateInput__icon',
+};
+/**
+ * Компонент поля `DateInput` из DatePicker'а помогает выбирать дату с клавиатуры.
+ */
+var DateInput = /** @class */ (function (_super) {
+    __extends(DateInput, _super);
+    function DateInput(props) {
+        var _this = _super.call(this, props) || this;
+        _this.getProps = createPropsGetter(DateInput_1.defaultProps);
+        _this.iDateMediator = new InternalDateMediator();
+        _this.inputLikeText = null;
+        _this.dateFragmentsView = null;
+        _this.isMouseDown = false;
+        _this.isMouseFocus = false;
+        _this.ignoringDelimiter = false;
+        _this.blurEvent = null;
+        _this.conditionalHandler = new ConditionalHandler()
+            .add(Actions.MoveSelectionLeft, function () { return _this.shiftSelection(-1); })
+            .add(Actions.MoveSelectionRight, function () { return _this.shiftSelection(1); })
+            .add(Actions.Separator, function () { return _this.pressDelimiter(); })
+            .add(Actions.MoveSelectionFirst, function () { return _this.selectDateComponent(_this.iDateMediator.getLeftmostType()); })
+            .add(Actions.MoveSelectionLast, function () { return _this.selectDateComponent(_this.iDateMediator.getRightmostType()); })
+            .add(Actions.Increment, function () { return _this.shiftDateComponent(1); })
+            .add(Actions.Decrement, function () { return _this.shiftDateComponent(-1); })
+            .add(Actions.Digit, function (e) { return _this.inputValue(e); })
+            .add(Actions.ClearSelection, function () { return _this.clearSelected(); })
+            .add(Actions.ClearOneChar, function () { return _this.clearOneChar(); })
+            .add(Actions.FullSelection, function () { return _this.fullSelection(); })
+            .add(Actions.WrongInput, function () { return _this.blink(); })
+            .build();
+        _this.selectNode = function () {
+            var type = _this.state.selected;
+            var dateFragmentsView = _this.dateFragmentsView && _this.dateFragmentsView.getRootNode();
+            if (type === null || !_this.inputLikeText || !dateFragmentsView) {
+                return;
+            }
+            if (type === InternalDateComponentType.All) {
+                _this.inputLikeText.selectInnerNode(dateFragmentsView, 0, 5);
+                return;
+            }
+            var index = _this.iDateMediator.getTypesOrder().indexOf(type);
+            if (index > -1) {
+                _this.inputLikeText.selectInnerNode(dateFragmentsView, index * 2, index * 2 + 1);
+            }
+        };
+        _this.renderIcon = function () {
+            var _a;
+            var _b = _this.props, withIcon = _b.withIcon, _c = _b.disabled, disabled = _c === void 0 ? false : _c;
+            var size = _this.size;
+            if (withIcon) {
+                var theme = _this.theme;
+                var icon = React.createElement(CalendarIcon, { size: size });
+                var iconStyles = _this.cx((_a = {},
+                    _a[_this.styles.icon(theme)] = true,
+                    _a[_this.styles.iconSmall(theme)] = size === 'small',
+                    _a[_this.styles.iconMedium(theme)] = size === 'medium',
+                    _a[_this.styles.iconLarge(theme)] = size === 'large',
+                    _a[_this.styles.iconDisabled(theme)] = disabled,
+                    _a));
+                return (React.createElement("span", { className: iconStyles, "data-tid": DateInputDataTids.icon }, icon));
+            }
+            return null;
+        };
+        _this.handleFocus = function (e) {
+            _this.setState(function (prevState) { return ({
+                focused: true,
+                selected: _this.isMouseDown && !prevState.focused ? prevState.selected : _this.iDateMediator.getLeftmostType(),
+            }); });
+            if (_this.props.onFocus) {
+                _this.props.onFocus(e);
+            }
+        };
+        _this.resetFocus = function () { return _this.updateValue({ focused: false, selected: null, inputMode: false }, false); };
+        _this.handleBlur = function (e) {
+            _this.resetFocus();
+            if (_this.props.onBlur) {
+                var restored = _this.iDateMediator.restore();
+                if (restored) {
+                    e.persist();
+                    _this.blurEvent = e;
+                }
+                else {
+                    _this.props.onBlur(e);
+                }
+            }
+        };
+        _this.handleMouseDownCapture = function (e) {
+            var isFragment = _this.dateFragmentsView ? _this.dateFragmentsView.isFragment(e.target) : false;
+            if (_this.state.focused && !isFragment) {
+                e.preventDefault();
+            }
+            _this.isMouseFocus = !_this.state.focused;
+            _this.isMouseDown = isFragment;
+        };
+        _this.handleSelectDateComponent = function (type) {
+            if (!(_this.isMouseFocus && _this.iDateMediator.isEmpty())) {
+                _this.selectDateComponent(type);
+            }
+            _this.isMouseFocus = false;
+            _this.isMouseDown = false;
+        };
+        _this.handleMouseDragStart = function () {
+            _this.setState({ dragged: true, selected: null });
+        };
+        _this.handleMouseDragEnd = function () {
+            var _a, _b;
+            var selection = (_b = (_a = _this.globalObject).getSelection) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (selection &&
+                selection.toString().length === LENGTH_FULLDATE &&
+                _this.state.selected !== InternalDateComponentType.All) {
+                _this.selectDateComponent(InternalDateComponentType.All);
+            }
+        };
+        _this.handleKeyDown = function (e) {
+            if (_this.conditionalHandler(extractAction(e), e)) {
+                e.preventDefault();
+            }
+            if (_this.props.onKeyDown) {
+                _this.props.onKeyDown(e);
+            }
+        };
+        _this.handlePaste = function (e) {
+            var pasted = e && e.clipboardData.getData('text').trim();
+            if (pasted && _this.iDateMediator.validateString(pasted)) {
+                _this.iDateMediator.paste(pasted);
+                _this.updateValue();
+            }
+        };
+        _this.handleDoubleClick = function () {
+            _this.selectDateComponent(InternalDateComponentType.All);
+        };
+        _this.inputLikeTextRef = function (el) {
+            _this.inputLikeText = el;
+        };
+        _this.dateFragmentsViewRef = function (el) {
+            _this.dateFragmentsView = el;
+        };
+        _this.selectDateComponent = function (selected) {
+            _this.setState({ selected: selected, inputMode: false });
+        };
+        _this.updateValue = function (state, sync) {
+            if (state === void 0) { state = {}; }
+            if (sync === void 0) { sync = true; }
+            var valueFormatted = _this.iDateMediator.getString();
+            var update = function () { return _this.setState(__assign(__assign({}, state), { valueFormatted: valueFormatted }), _this.emitChange); };
+            if (sync && React.version.search('18') === 0) {
+                ReactDOM.flushSync(update);
+            }
+            else {
+                update();
+            }
+        };
+        _this.updateFromProps = function (sync) {
+            _this.iDateMediator.update(_this.props, _this.locale);
+            _this.updateValue({}, sync);
+        };
+        _this.fullSelection = function () {
+            _this.selectDateComponent(InternalDateComponentType.All);
+        };
+        _this.pressDelimiter = function () {
+            var value = _this.iDateMediator.get(_this.state.selected);
+            if (value !== null && value !== '') {
+                if (!_this.ignoringDelimiter) {
+                    _this.shiftSelection(1);
+                }
+                _this.ignoringDelimiter = false;
+            }
+        };
+        _this.emitChange = function () {
+            if (_this.props.onValueChange) {
+                var value = _this.iDateMediator.getInternalString();
+                if (_this.props.value !== value) {
+                    _this.props.onValueChange(value);
+                }
+            }
+            // `this.blurEvent` is always null in `flushSync` without `setTimeout` due to sync update
+            setTimeout(function () {
+                if (_this.blurEvent && _this.props.onBlur) {
+                    _this.props.onBlur(_this.blurEvent);
+                    _this.blurEvent = null;
+                }
+            });
+        };
+        _this.clearSelected = function () {
+            var selected = _this.state.selected === null ? _this.iDateMediator.getLeftmostType() : _this.state.selected;
+            _this.iDateMediator.clear(selected);
+            _this.updateValue({
+                inputMode: false,
+                selected: selected === InternalDateComponentType.All ? _this.iDateMediator.getLeftmostType() : selected,
+            });
+        };
+        _this.clearOneChar = function () {
+            var _a = _this.state, selected = _a.selected, inputMode = _a.inputMode;
+            var nextType = selected === null ? _this.iDateMediator.getRightmostType() : selected;
+            if (_this.iDateMediator.isNull(nextType)) {
+                _this.shiftSelection(-1);
+                return;
+            }
+            if (selected === InternalDateComponentType.All) {
+                _this.iDateMediator.clear(InternalDateComponentType.All);
+                _this.updateValue({ selected: _this.iDateMediator.getLeftmostType() });
+                return;
+            }
+            _this.iDateMediator.deleteOneCharRight(nextType, inputMode);
+            _this.updateValue({
+                inputMode: _this.iDateMediator.get(nextType) !== null,
+                selected: nextType,
+            });
+        };
+        _this.shiftDateComponent = function (step) {
+            var selected = _this.state.selected;
+            var changed = _this.iDateMediator.shiftDateComponent(selected, step);
+            if (!changed) {
+                _this.blink();
+                return;
+            }
+            _this.updateValue({
+                inputMode: false,
+                selected: selected === InternalDateComponentType.All ? _this.iDateMediator.getLeftmostType() : selected,
+            });
+        };
+        _this.shiftSelection = function (step) {
+            var selected = _this.iDateMediator.getShiftedType(_this.state.selected, step);
+            if (selected !== _this.state.selected) {
+                _this.setState({ selected: selected, inputMode: false });
+            }
+        };
+        _this.inputValue = function (event) {
+            var selected = _this.state.selected;
+            if (selected === InternalDateComponentType.All) {
+                selected = _this.iDateMediator.getLeftmostType();
+                _this.iDateMediator.clear(InternalDateComponentType.All);
+                _this.setState({ selected: selected });
+            }
+            var inputMode = _this.iDateMediator.inputKey(event.key, selected, _this.state.inputMode).inputMode;
+            if (!inputMode) {
+                _this.ignoringDelimiter = true;
+                _this.shiftSelection(1);
+            }
+            _this.updateValue({ inputMode: inputMode });
+        };
+        _this.state = {
+            valueFormatted: '',
+            selected: null,
+            inputMode: false,
+            focused: false,
+            dragged: false,
+        };
+        return _this;
+    }
+    DateInput_1 = DateInput;
+    DateInput.prototype.componentDidUpdate = function (prevProps) {
+        var _a = this.getProps(), value = _a.value, minDate = _a.minDate, maxDate = _a.maxDate;
+        if (prevProps.value !== value ||
+            prevProps.minDate !== minDate ||
+            prevProps.maxDate !== maxDate ||
+            this.iDateMediator.isChangedLocale(this.locale)) {
+            this.updateFromProps(false);
         }
-      }
-      if (action === DateInputKeyboardActions_1.Actions.WrongInput) {
-        _this.blink();
-      }
-      if (_this.state.focused && action !== DateInputKeyboardActions_1.Actions.Ignore) {
-        _this.selection();
-      }
-      if (action !== DateInputKeyboardActions_1.Actions.Ignore && action !== DateInputKeyboardActions_1.Actions.PasteValue && action !== DateInputKeyboardActions_1.Actions.CopyValue) {
-        event.preventDefault();
-      }
+        !this.props.disabled && this.selectNode();
     };
-    // tslint:disable:member-ordering
-    _this.selectionNotIe = function () {
-      _this.changeSelectedDateComponent(_this.state.selected);
-    };
-    _this.selectionIe = lodash_debounce_1["default"](function () {
-      var node = _this.inputLikeText && _this.inputLikeText.getNode();
-      if (_this.inputLikeText && node && node.contains(document.activeElement)) {
-        _this.ieFrozen = true;
-        _this.changeSelectedDateComponent(_this.state.selected);
-        if (_this.inputLikeText) {
-          _this.inputLikeText.focus();
-        }
-      }
-    }, 10);
-    _this.selection = IS_IE ? _this.selectionIe : _this.selectionNotIe;
-    // tslint:enable:member-ordering
-    _this.pressDelimiter = function () {
-      var value = _this.state.internalDate.get(_this.state.selected);
-      if (value !== null && value !== '') {
-        if (_this.state.autoMoved) {
-          _this.setState({ autoMoved: false });
-        } else
-        {
-          _this.moveSelection(1);
+    DateInput.prototype.componentDidMount = function () {
+        this.updateFromProps(false);
+        if (this.props.autoFocus) {
+            this.focus();
         }
-      }
     };
-    _this.handlePaste = function (e, pasted) {
-      pasted = pasted || e && e.clipboardData.getData('text').trim();
-      if (pasted && _this.state.internalDate !== null) {
-        _this.updateInternalDate(_this.state.internalDate.
-        parseValue(pasted).
-        restore().
-        cutOffExcess());
-      }
-    };
-    _this.emitChange = function () {
-      var value = _this.state.internalDate.isEmpty() ? '' : _this.state.internalDate.toInternalString();
-      if (_this.props.value === value) {
-        return;
-      }
-      if (_this.props.onChange) {
-        _this.props.onChange({ target: { value: value } }, value);
-      }
-    };
-    _this.inputNumberCallBack = function (next, inputMode) {
-      var type = _this.state.selected;
-      var internalDate = _this.state.internalDate.clone();
-      if (type === null || type === types_1.InternalDateComponentType.All) {
-        type = _this.getFirstDateComponentType();
-        inputMode = false;
-        _this.selectDateComponent(type);
-      }
-      internalDate.set(type, next);
-      if (!inputMode) {
-        if (type !== types_1.InternalDateComponentType.Year) {
-          internalDate.cutOffExcess(type);
-        } else
-        {
-          internalDate.restore(type);
+    DateInput.prototype.blur = function () {
+        if (this.inputLikeText) {
+            this.inputLikeText.blur();
         }
-        _this.moveSelection(1, true);
-      }
-      _this.updateInternalDate(internalDate, { inputMode: inputMode });
     };
-    _this.selectNodeContents = function (node, start, end) {
-      if (_this.state.focused && node) {
-        if (utils_1.isFirefox) {
-          SelectionHelpers_1.selectNodeContents(node, start, end);
-          setTimeout(function () {return _this.state.focused && SelectionHelpers_1.selectNodeContents(node, start, end);}, 0);
-        } else
-        {
-          SelectionHelpers_1.selectNodeContents(node, start, end);
+    DateInput.prototype.focus = function () {
+        if (this.inputLikeText) {
+            this.inputLikeText.focus();
         }
-      }
     };
-    _this.selectDateComponent = function (selected) {
-      if (IS_IE && _this.ieFrozen) {
-        return;
-      }
-      _this.setState({ selected: selected, inputMode: false });
+    DateInput.prototype.blink = function () {
+        if (this.inputLikeText) {
+            this.inputLikeText.blink();
+        }
     };
-    _this.handleDoubleClick = function () {
-      _this.selectDateComponent(types_1.InternalDateComponentType.All);
+    DateInput.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
     };
-    _this.getFirstDateComponentType = function () {return _this.state.typesOrder[0];};
-    _this.getLastDateComponentType = function () {
-      return _this.state.typesOrder[_this.state.typesOrder.length - 1];
+    DateInput.prototype.renderMain = function () {
+        var _a;
+        var _b = this.state, focused = _b.focused, selected = _b.selected, inputMode = _b.inputMode, valueFormatted = _b.valueFormatted;
+        var showValue = Boolean(focused || valueFormatted);
+        var width = this.getProps().width;
+        return (React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootNode }, this.props),
+            React.createElement(FocusControlWrapper, { onBlurWhenDisabled: this.resetFocus },
+                React.createElement(InputLikeText, { "data-tid": DateInputDataTids.root, id: this.props.id, width: width, ref: this.inputLikeTextRef, size: this.size, disabled: this.props.disabled, error: this.props.error, warning: this.props.warning, onBlur: this.handleBlur, onFocus: this.handleFocus, onClick: this.props.onClick, onKeyDown: this.handleKeyDown, onMouseDownCapture: this.handleMouseDownCapture, onPaste: this.handlePaste, rightIcon: this.renderIcon(), onDoubleClickCapture: this.handleDoubleClick, onMouseDragStart: this.handleMouseDragStart, onMouseDragEnd: this.handleMouseDragEnd, value: this.iDateMediator.getInternalString(), inputMode: 'numeric', takeContentWidth: true, "aria-describedby": this.props['aria-describedby'], "aria-label": this.props['aria-label'], "aria-labelledby": this.props['aria-labelledby'] },
+                    React.createElement("span", { className: this.cx(this.styles.value(), (_a = {}, _a[this.styles.valueVisible()] = showValue, _a)) },
+                        React.createElement(DateFragmentsView, { ref: this.dateFragmentsViewRef, fragments: this.iDateMediator.getFragments(), onSelectDateComponent: this.handleSelectDateComponent, selected: selected, inputMode: inputMode }))))));
     };
-    _this.renderIcon = function () {
-      var _a;
-      var _b = _this.props,withIcon = _b.withIcon,size = _b.size,_c = _b.disabled,disabled = _c === void 0 ? false : _c;
-      if (withIcon) {
-        var theme = _this.theme;
-        var iconStyles = Emotion_1.cx((_a = {},
-        _a[DateInput_module_less_1["default"].icon] = true,
-        _a[DateInput_styles_1["default"].icon(theme)] = true,
-        _a[DateInput_styles_1["default"].iconSmall(theme)] = size === 'small',
-        _a[DateInput_styles_1["default"].iconMedium(theme)] = size === 'medium',
-        _a[DateInput_styles_1["default"].iconLarge(theme)] = size === 'large',
-        _a[DateInput_module_less_1["default"].iconDisabled] = disabled,
-        _a[DateInput_styles_1["default"].iconDisabled(theme)] = disabled,
-        _a));
-        return React.createElement("span", { className: iconStyles },
-        React.createElement(Calendar_1["default"], null));
-      }
-      return null;
+    var DateInput_1;
+    DateInput.__KONTUR_REACT_UI__ = 'DateInput';
+    DateInput.displayName = 'DateInput';
+    DateInput.defaultProps = {
+        value: '',
+        minDate: MIN_FULLDATE,
+        maxDate: MAX_FULLDATE,
+        width: 125,
     };
-    _this.state = {
-      notify: false,
-      selected: null,
-      internalDate: new InternalDate_1.InternalDate(),
-      typesOrder: [],
-      inputMode: false,
-      focused: false,
-      dragged: false,
-      autoMoved: false };
-
-    return _this;
-  }
-  DateInput.prototype.componentDidUpdate = function (prevProps, prevState) {
-    if (prevProps.value !== this.props.value ||
-    prevProps.minDate !== this.props.minDate ||
-    prevProps.maxDate !== this.props.maxDate ||
-    prevState.internalDate.getOrder() !== this.locale.order ||
-    prevState.internalDate.getSeparator() !== this.locale.separator) {
-      this.updateInternalDate(undefined, {}, this.updateInternalDateFromProps);
-    }
-    if (this.state.focused && prevState.selected !== this.state.selected) {
-      this.selection();
-    }
-    if (this.state.notify && !prevState.notify) {
-      this.notify();
-    }
-  };
-  DateInput.prototype.componentDidMount = function () {
-    this.updateInternalDate(undefined, {}, this.updateInternalDateFromProps);
-    if (this.divInnerNode) {
-      MouseDrag_1["default"].listen(this.divInnerNode);
-      this.divInnerNode.addEventListener('mousedragstart', this.handleMouseDragStart);
-      this.divInnerNode.addEventListener('mousedragend', this.handleMouseDragEnd);
-    }
-  };
-  DateInput.prototype.render = function () {
-    var _this = this;
-    return React.createElement(ThemeConsumer_1["default"], null, function (theme) {
-      _this.theme = theme;
-      return _this.renderMain();
-    });
-  };
-  DateInput.prototype.blur = function () {
-    if (this.inputLikeText) {
-      this.inputLikeText.blur();
-    }
-    this.setState({ focused: false });
-  };
-  DateInput.prototype.focus = function () {
-    if (!this.props.disabled) {
-      if (this.inputLikeText) {
-        this.inputLikeText.focus();
-      }
-      this.setState({ focused: true });
-    }
-  };
-  DateInput.prototype.blink = function () {
-    if (!this.props.disabled) {
-      if (this.inputLikeText) {
-        this.inputLikeText.blink();
-      }
-    }
-  };
-  DateInput.prototype.renderMain = function () {
-    var _this = this;
-    var _a = this.state,internalDate = _a.internalDate,focused = _a.focused,selected = _a.selected,inputMode = _a.inputMode;
-    var fragments = internalDate && (focused || !internalDate.isEmpty()) ?
-    internalDate.toFragments({
-      withSeparator: true,
-      withPad: true }) :
-
-    [];
-    return React.createElement(InputLikeText_1["default"], { width: this.props.width, ref: function ref(el) {
-        _this.inputLikeText = el;
-      }, size: this.props.size, disabled: this.props.disabled, error: this.props.error, warning: this.props.warning, onBlur: this.handleBlur, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, onMouseUp: this.handleMouseUp, onMouseDown: this.handleMouseDown, onPaste: this.handlePaste, rightIcon: this.renderIcon, onDoubleClickCapture: this.handleDoubleClick },
-    React.createElement(DateFragmentsView_1.DateFragmentsView, { nodeRef: this.divInnerNodeRef, fragments: fragments, onSelectDateComponent: this.handleSelectDateComponent, selected: selected, inputMode: inputMode }));
-  };
-  DateInput.prototype.clearSelected = function () {
-    var selected = this.state.selected === null ? this.getFirstDateComponentType() : this.state.selected;
-    this.updateInternalDate(this.state.internalDate.clone().set(selected, null), { inputMode: false, selected: selected });
-    if (selected === types_1.InternalDateComponentType.All) {
-      this.selectDateComponent(this.getFirstDateComponentType());
-    }
-  };
-  DateInput.prototype.clearOneChar = function () {
-    var _a = this.state,selected = _a.selected,internalDate = _a.internalDate,inputMode = _a.inputMode;
-    var prevType = selected === null ? this.getLastDateComponentType() : selected;
-    var nextType = prevType === types_1.InternalDateComponentType.All ?
-    internalDate.
-    toFragments({ withSeparator: false }).
-    reduce(function (_type, _a) {
-      var value = _a.value,type = _a.type;
-      return value !== null ? type : _type;
-    }, this.getLastDateComponentType()) :
-    prevType;
-    var prev = internalDate.get(nextType);
-    if (prev === null) {
-      this.moveSelection(-1);
-      return;
-    }
-    prev = String(inputMode ? prev : InternalDateTransformer_1["default"].padDateComponent(nextType, prev));
-    var next = prev.replace(/.$/, '') || null;
-    this.updateInternalDate(internalDate.clone().set(nextType, next), {
-      inputMode: next !== null,
-      selected: nextType });
-
-  };
-  DateInput.prototype.updateDateComponentBy = function (step) {
-    var internalDate = this.state.internalDate.clone();
-    var initial = internalDate.clone();
-    var selected = this.state.selected;
-    selected = selected === null ? this.getFirstDateComponentType() : selected;
-    var isValidRange = internalDate.validate({ checks: [types_1.InternalDateValidateCheck.Range] });
-    var start = internalDate.getRangeStart();
-    var end = internalDate.getRangeEnd();
-    if (!isValidRange) {
-      if (start && InternalDateGetter_1["default"].max([internalDate, start]) === start) {
-        internalDate.setComponents(start.getComponentsRaw());
-      } else
-      if (end && InternalDateGetter_1["default"].min([internalDate, end]) === end) {
-        internalDate.setComponents(end.getComponentsRaw());
-      }
-    } else
-    {
-      var clone = internalDate.clone().shift(selected, step, { isRange: false, isLoop: true });
-      if (clone.validate({ checks: [types_1.InternalDateValidateCheck.Range] })) {
-        internalDate.shift(selected, step, { isRange: false, isLoop: true });
-      }
-    }
-    this.updateInternalDate(internalDate, {
-      inputMode: false,
-      selected: selected === types_1.InternalDateComponentType.All ? this.getFirstDateComponentType() : selected,
-      notify: initial.get(selected) === internalDate.get(selected) });
-
-  };
-  DateInput.prototype.moveSelection = function (step, isAutoMoved) {
-    if (isAutoMoved === void 0) {isAutoMoved = false;}
-    var _a = this.state,internalDate = _a.internalDate,typesOrder = _a.typesOrder,selected = _a.selected;
-    var index = selected === null ? 0 : typesOrder.indexOf(selected);
-    if (typesOrder[index] === this.getLastDateComponentType() && step > 0 ||
-    typesOrder[index] === this.getFirstDateComponentType() && step < 0) {
-      return;
-    }
-    var nextIndex = index + step;
-    if (selected === types_1.InternalDateComponentType.All) {
-      nextIndex = step < 0 ? 0 : typesOrder.length - 1;
-    }
-    if (selected === types_1.InternalDateComponentType.Year && internalDate.getYear() !== null) {
-      internalDate.restore(selected);
-    }
-    this.updateInternalDate(internalDate);
-    if (nextIndex >= 0 && nextIndex < typesOrder.length) {
-      this.setState({
-        selected: typesOrder[nextIndex],
-        inputMode: false,
-        autoMoved: isAutoMoved });
-
-    }
-  };
-  DateInput.prototype.notify = function () {
-    this.blink();
-    this.setState({ notify: false });
-  };
-  DateInput.prototype.inputValue = function (event) {
-    var _this = this;
-    event.persist();
-    var type = this.state.selected;
-    var internalDate = this.state.internalDate.clone();
-    var prev = internalDate.get(type);
-    if (type === null) {
-      type = this.getFirstDateComponentType();
-      prev = null;
-      internalDate.set(type, null);
-    }
-    if (type === types_1.InternalDateComponentType.All) {
-      type = this.getFirstDateComponentType();
-      prev = null;
-      internalDate.set(types_1.InternalDateComponentType.All, null);
-    }
-    this.setState({ selected: type, internalDate: internalDate }, function () {
-      inputNumber_1.inputNumber(type, prev, event.key, _this.state.inputMode, _this.inputNumberCallBack);
-    });
-  };
-  DateInput.__KONTUR_REACT_UI__ = 'DateInput';
-  DateInput.defaultProps = {
-    minDate: constants_1.MIN_FULLDATE,
-    maxDate: constants_1.MAX_FULLDATE,
-    size: 'small',
-    width: 125 };
-
-  DateInput = tslib_1.__decorate([
-  decorators_1.locale('DatePicker', locale_1.DatePickerLocaleHelper)],
-  DateInput);
-  return DateInput;
-}(React.Component);
-exports.DateInput = DateInput;
-exports["default"] = DateInput;
+    DateInput = DateInput_1 = __decorate([
+        withRenderEnvironment,
+        rootNode,
+        locale('DatePicker', DatePickerLocaleHelper),
+        withSize
+    ], DateInput);
+    return DateInput;
+}(React.Component));
+export { DateInput };
+//# sourceMappingURL=DateInput.js.map