@skbkontur/react-ui 0.0.0-b0853da840 → 0.0.0-cb270e7a13

package/components/DateInput/DateFragmentsView/DateFragmentsView.js

@@ -0,0 +1,110 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { MaskCharLowLine } from "../../../internal/MaskCharLowLine";
+import { InternalDateValidator } from "../../../lib/date/InternalDateValidator";
+import { InternalDateComponentType } from "../../../lib/date/types";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../DateFragmentsView.styles";
+export var DateFragmentsView = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(DateFragmentsView, _React$Component);
+
+  function DateFragmentsView() {
+    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.theme = void 0;
+    _this.rootNode = null;
+
+    _this.isFragment = function (el) {
+      if (_this.rootNode) {
+        // NOTE: NodeList doesn't support method 'forEach' in IE11
+        var fragments = Array.from(_this.rootNode.querySelectorAll('[data-fragment]'));
+        return fragments.some(function (fragment) {
+          return fragment === el || fragment.contains(el);
+        });
+      }
+
+      return false;
+    };
+
+    _this.getRootNode = function () {
+      return _this.rootNode;
+    };
+
+    _this.rootRef = function (el) {
+      _this.rootNode = el;
+    };
+
+    return _this;
+  }
+
+  var _proto = DateFragmentsView.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _this3 = this;
+
+    return /*#__PURE__*/React.createElement("span", {
+      ref: this.rootRef,
+      className: styles.root(this.theme)
+    }, this.props.fragments.map(function (fragment, index) {
+      return fragment.type === InternalDateComponentType.Separator ? _this3.renderSeparator(fragment, index) : _this3.renderDateComponent(fragment, index);
+    }));
+  };
+
+  _proto.renderSeparator = function renderSeparator(fragment, index) {
+    var _cx;
+
+    var separatorClassName = cx((_cx = {}, _cx[styles.mask(this.theme)] = true, _cx[styles.delimiterFilled()] = this.props.fragments[index + 1].value !== null, _cx));
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: separatorClassName
+    }, fragment.value);
+  };
+
+  _proto.renderDateComponent = function renderDateComponent(fragment, index) {
+    var _this$props = this.props,
+        inputMode = _this$props.inputMode,
+        onSelectDateComponent = _this$props.onSelectDateComponent,
+        selected = _this$props.selected;
+    var type = fragment.type,
+        value = fragment.value,
+        length = fragment.length,
+        valueWithPad = fragment.valueWithPad;
+    var valueMask = value === null || selected === type && inputMode ? value : valueWithPad || value;
+    var lengthMask = InternalDateValidator.testParseToNumber(valueMask) ? Math.max(length - valueMask.toString().length, 0) : length;
+
+    var handleMouseUp = function handleMouseUp(e) {
+      if (document.activeElement && document.activeElement.contains(e.currentTarget)) {
+        onSelectDateComponent(type, e);
+      }
+    };
+
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      "data-fragment": "",
+      onMouseUp: handleMouseUp
+    }, valueMask, /*#__PURE__*/React.createElement("span", {
+      className: styles.mask(this.theme)
+    }, Array(lengthMask).fill('').map(function (_, i) {
+      return /*#__PURE__*/React.createElement(MaskCharLowLine, {
+        key: i
+      });
+    })));
+  };
+
+  return DateFragmentsView;
+}(React.Component);

package/components/DateInput/DateFragmentsView/DateFragmentsView.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DateFragmentsView.tsx"],"names":["React","MaskCharLowLine","InternalDateValidator","InternalDateComponentType","ThemeContext","cx","styles","DateFragmentsView","theme","rootNode","isFragment","el","fragments","Array","from","querySelectorAll","some","fragment","contains","getRootNode","rootRef","render","renderMain","root","props","map","index","type","Separator","renderSeparator","renderDateComponent","separatorClassName","mask","delimiterFilled","value","inputMode","onSelectDateComponent","selected","length","valueWithPad","valueMask","lengthMask","testParseToNumber","Math","max","toString","handleMouseUp","e","document","activeElement","currentTarget","fill","_","i","Component"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { MaskCharLowLine } from '../../internal/MaskCharLowLine';\nimport { InternalDateValidator } from '../../lib/date/InternalDateValidator';\nimport { InternalDateComponentType, InternalDateFragment } from '../../lib/date/types';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './DateFragmentsView.styles';\n\ninterface DateFragmentViewProps {\n  selected: InternalDateComponentType | null;\n  fragments: InternalDateFragment[];\n  inputMode: boolean;\n  onSelectDateComponent: (type: InternalDateComponentType, e: React.MouseEvent<HTMLSpanElement>) => void;\n}\n\nexport class DateFragmentsView extends React.Component<DateFragmentViewProps, {}> {\n  private theme!: Theme;\n  private rootNode: HTMLSpanElement | null = null;\n\n  public isFragment = (el: HTMLElement | EventTarget): boolean => {\n    if (this.rootNode) {\n      // NOTE: NodeList doesn't support method 'forEach' in IE11\n      const fragments: HTMLSpanElement[] = Array.from(this.rootNode.querySelectorAll('[data-fragment]'));\n      return fragments.some((fragment) => fragment === el || fragment.contains(el as HTMLSpanElement));\n    }\n    return false;\n  };\n\n  public getRootNode = () => this.rootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    return (\n      <span ref={this.rootRef} className={styles.root(this.theme)}>\n        {this.props.fragments.map((fragment, index) =>\n          fragment.type === InternalDateComponentType.Separator\n            ? this.renderSeparator(fragment, index)\n            : this.renderDateComponent(fragment, index),\n        )}\n      </span>\n    );\n  }\n\n  private renderSeparator(fragment: InternalDateFragment, index: number): JSX.Element {\n    const separatorClassName = cx({\n      [styles.mask(this.theme)]: true,\n      [styles.delimiterFilled()]: this.props.fragments[index + 1].value !== null,\n    });\n\n    return (\n      <span key={index} className={separatorClassName}>\n        {fragment.value}\n      </span>\n    );\n  }\n\n  private renderDateComponent(fragment: InternalDateFragment, index: number): JSX.Element {\n    const { inputMode, onSelectDateComponent, selected } = this.props;\n    const { type, value, length, valueWithPad } = fragment;\n\n    const valueMask = value === null || (selected === type && inputMode) ? value : valueWithPad || value;\n    const lengthMask = InternalDateValidator.testParseToNumber(valueMask)\n      ? Math.max(length - valueMask!.toString().length, 0)\n      : length;\n\n    const handleMouseUp = (e: React.MouseEvent<HTMLSpanElement>) => {\n      if (document.activeElement && document.activeElement.contains(e.currentTarget)) {\n        onSelectDateComponent(type, e);\n      }\n    };\n\n    return (\n      <span key={index} data-fragment=\"\" onMouseUp={handleMouseUp}>\n        {valueMask}\n        <span className={styles.mask(this.theme)}>\n          {Array(lengthMask)\n            .fill('')\n            .map((_, i) => (\n              <MaskCharLowLine key={i} />\n            ))}\n        </span>\n      </span>\n    );\n  }\n\n  private rootRef = (el: HTMLSpanElement | null) => {\n    this.rootNode = el;\n  };\n}\n"]}

package/components/DateInput/DateFragmentsView/package.json

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

package/components/DateInput/DateFragmentsView.d.ts

@@ -9,7 +9,7 @@ interface DateFragmentViewProps {
 export declare class DateFragmentsView extends React.Component<DateFragmentViewProps, {}> {
     private theme;
     private rootNode;
-    isFragment: (el: EventTarget | HTMLElement) => boolean;
+    isFragment: (el: HTMLElement | EventTarget) => boolean;
     getRootNode: () => HTMLSpanElement | null;
     render(): JSX.Element;
     private renderMain;

package/components/DateInput/DateFragmentsView.styles/DateFragmentsView.styles.js

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      cursor: text;\n\n      & ::selection {\n        background: ", ";\n      }\n      & ::-moz-selection {\n        background: ", ";\n      }\n    "])), t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedBgColor);
+  },
+  selected: function selected(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      border-color: ", ";\n      background-color: ", ";\n    "])), t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedBgColor);
+  },
+  mask: function mask(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.dateInputMaskColor);
+  },
+  delimiterFilled: function delimiterFilled() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: inherit;\n    "])));
+  }
+});

package/components/DateInput/DateFragmentsView.styles/DateFragmentsView.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["DateFragmentsView.styles.ts"],"names":["css","memoizeStyle","styles","root","t","dateInputComponentSelectedBgColor","selected","mask","dateInputMaskColor","delimiterFilled"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;;;;AAIkBI,IAAAA,CAAC,CAACC,iCAJpB;;;AAOkBD,IAAAA,CAAC,CAACC,iCAPpB;;;AAUD,GAZgC;;AAcjCC,EAAAA,QAdiC,oBAcxBF,CAdwB,EAcd;AACjB,WAAOJ,GAAP;AACkBI,IAAAA,CAAC,CAACC,iCADpB;AAEsBD,IAAAA,CAAC,CAACC,iCAFxB;;AAID,GAnBgC;;AAqBjCE,EAAAA,IArBiC,gBAqB5BH,CArB4B,EAqBlB;AACb,WAAOJ,GAAP;AACWI,IAAAA,CAAC,CAACI,kBADb;;AAGD,GAzBgC;;AA2BjCC,EAAAA,eA3BiC,6BA2Bf;AAChB,WAAOT,GAAP;;;AAGD,GA/BgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      cursor: text;\n\n      & ::selection {\n        background: ${t.dateInputComponentSelectedBgColor};\n      }\n      & ::-moz-selection {\n        background: ${t.dateInputComponentSelectedBgColor};\n      }\n    `;\n  },\n\n  selected(t: Theme) {\n    return css`\n      border-color: ${t.dateInputComponentSelectedBgColor};\n      background-color: ${t.dateInputComponentSelectedBgColor};\n    `;\n  },\n\n  mask(t: Theme) {\n    return css`\n      color: ${t.dateInputMaskColor};\n    `;\n  },\n\n  delimiterFilled() {\n    return css`\n      color: inherit;\n    `;\n  },\n});\n"]}

package/components/DateInput/DateFragmentsView.styles/package.json

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

package/components/DateInput/DateFragmentsView.styles.d.ts

@@ -1,8 +1,7 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     root(t: Theme): string;
     selected(t: Theme): string;
     mask(t: Theme): string;
-    delimiter(t: Theme): string;
-    delimiterFilled(t: Theme): string;
+    delimiterFilled(): string;
 };

package/components/DateInput/DateInput/DateInput.js

@@ -0,0 +1,460 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _dec, _class, _class2, _temp;
+
+import React from 'react';
+import { ConditionalHandler } from "../../../lib/ConditionalHandler";
+import { LENGTH_FULLDATE, MAX_FULLDATE, MIN_FULLDATE } from "../../../lib/date/constants";
+import { InternalDateComponentType } from "../../../lib/date/types";
+import { DatePickerLocaleHelper } from "../../DatePicker/locale";
+import { InputLikeText } from "../../../internal/InputLikeText";
+import { locale } from "../../../lib/locale/decorators";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CalendarIcon } from "../../../internal/icons/16px";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { DateFragmentsView } from "../DateFragmentsView";
+import { styles } from "../DateInput.styles";
+import { Actions, extractAction } from "../helpers/DateInputKeyboardActions";
+import { InternalDateMediator } from "../helpers/InternalDateMediator";
+export var DateInput = (_dec = locale('DatePicker', DatePickerLocaleHelper), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(DateInput, _React$Component);
+
+  function DateInput(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this.iDateMediator = new InternalDateMediator();
+    _this.inputLikeText = null;
+    _this.dateFragmentsView = null;
+    _this.isMouseDown = false;
+    _this.isMouseFocus = false;
+    _this.ignoringDelimiter = false;
+    _this.locale = void 0;
+    _this.blurEvent = null;
+    _this.theme = void 0;
+    _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 _this$props = _this.props,
+          withIcon = _this$props.withIcon,
+          size = _this$props.size,
+          _this$props$disabled = _this$props.disabled,
+          disabled = _this$props$disabled === void 0 ? false : _this$props$disabled;
+
+      if (withIcon) {
+        var _cx;
+
+        var theme = _this.theme;
+        var iconStyles = cx((_cx = {}, _cx[styles.icon(theme)] = true, _cx[styles.iconSmall(theme)] = size === 'small', _cx[styles.iconMedium(theme)] = size === 'medium', _cx[styles.iconLarge(theme)] = size === 'large', _cx[styles.iconDisabled(theme)] = disabled, _cx));
+        return /*#__PURE__*/React.createElement("span", {
+          className: iconStyles
+        }, /*#__PURE__*/React.createElement(CalendarIcon, null));
+      }
+
+      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.handleBlur = function (e) {
+      var restored = _this.iDateMediator.restore();
+
+      _this.updateValue({
+        focused: false,
+        selected: null,
+        inputMode: false
+      });
+
+      if (_this.props.onBlur) {
+        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 selection = getSelection();
+
+      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) {
+      if (state === void 0) {
+        state = {};
+      }
+
+      var valueFormatted = _this.iDateMediator.getString();
+
+      _this.setState(_extends({}, state, {
+        valueFormatted: valueFormatted
+      }), _this.emitChange);
+    };
+
+    _this.updateFromProps = function () {
+      _this.iDateMediator.update(_this.props, _this.locale);
+
+      _this.updateValue();
+    };
+
+    _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 () {
+      var value = _this.iDateMediator.getInternalString();
+
+      if (_this.props.value === value) {
+        return;
+      }
+
+      if (_this.props.onValueChange) {
+        _this.props.onValueChange(value);
+      }
+
+      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 _this$state = _this.state,
+          selected = _this$state.selected,
+          inputMode = _this$state.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);
+
+      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;
+  }
+
+  var _proto = DateInput.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
+    if (prevProps.value !== this.props.value || prevProps.minDate !== this.props.minDate || prevProps.maxDate !== this.props.maxDate || this.iDateMediator.isChangedLocale(this.locale)) {
+      this.updateFromProps();
+    }
+
+    this.selectNode();
+  };
+
+  _proto.componentDidMount = function componentDidMount() {
+    this.updateFromProps();
+
+    if (this.props.autoFocus) {
+      this.focus();
+    }
+  };
+
+  _proto.blur = function blur() {
+    if (this.inputLikeText) {
+      this.inputLikeText.blur();
+    }
+  };
+
+  _proto.focus = function focus() {
+    if (this.inputLikeText) {
+      this.inputLikeText.focus();
+    }
+  };
+
+  _proto.blink = function blink() {
+    if (this.inputLikeText) {
+      this.inputLikeText.blink();
+    }
+  };
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+
+  _proto.renderMain = function renderMain() {
+    var _cx2;
+
+    var _this$state2 = this.state,
+        focused = _this$state2.focused,
+        selected = _this$state2.selected,
+        inputMode = _this$state2.inputMode,
+        valueFormatted = _this$state2.valueFormatted;
+    var showValue = Boolean(focused || valueFormatted);
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(InputLikeText, {
+      width: this.props.width,
+      ref: this.inputLikeTextRef,
+      size: this.props.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
+    }, /*#__PURE__*/React.createElement("span", {
+      className: cx(styles.value(), (_cx2 = {}, _cx2[styles.valueVisible()] = showValue, _cx2))
+    }, /*#__PURE__*/React.createElement(DateFragmentsView, {
+      ref: this.dateFragmentsViewRef,
+      fragments: this.iDateMediator.getFragments(),
+      onSelectDateComponent: this.handleSelectDateComponent,
+      selected: selected,
+      inputMode: inputMode
+    }))));
+  };
+
+  return DateInput;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'DateInput', _class2.defaultProps = {
+  value: '',
+  minDate: MIN_FULLDATE,
+  maxDate: MAX_FULLDATE,
+  size: 'small',
+  width: 125
+}, _temp)) || _class);