@skbkontur/react-ui 5.4.7-1b16b.0 → 5.4.7-7ccf0.0

package/components/DateInput/DateFragmentsView/DateFragmentsView.js

@@ -0,0 +1,102 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _class;
+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 { withRenderEnvironment } from "../../../lib/renderEnvironment";
+import { getStyles } from "../DateFragmentsView.styles";
+export var DateFragmentsView = withRenderEnvironment(_class = /*#__PURE__*/function (_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.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;
+  }
+  _inheritsLoose(DateFragmentsView, _React$Component);
+  var _proto = DateFragmentsView.prototype;
+  _proto.render = function render() {
+    var _this2 = this;
+    this.styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+  _proto.renderMain = function renderMain() {
+    var _this$cx,
+      _this3 = this;
+    return /*#__PURE__*/React.createElement("span", {
+      ref: this.rootRef,
+      className: this.cx((_this$cx = {}, _this$cx[this.styles.root()] = true, _this$cx[this.styles.selected(this.theme)] = true, _this$cx))
+    }, 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 _this$cx2;
+    var separatorClassName = this.cx((_this$cx2 = {}, _this$cx2[this.styles.mask(this.theme)] = true, _this$cx2[this.styles.delimiterFilled()] = this.props.fragments[index + 1].value !== null, _this$cx2));
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: separatorClassName
+    }, fragment.value);
+  };
+  _proto.renderDateComponent = function renderDateComponent(fragment, index) {
+    var _this4 = this;
+    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 getValueMask = function getValueMask() {
+      if (value === null || selected === type && inputMode) {
+        return value;
+      }
+      return valueWithPad || value;
+    };
+    var valueMask = getValueMask();
+    var lengthMask = InternalDateValidator.testParseToNumber(valueMask) ? Math.max(length - valueMask.toString().length, 0) : length;
+    var handleMouseUp = function handleMouseUp(e) {
+      var _this4$globalObject$d;
+      if ((_this4$globalObject$d = _this4.globalObject.document) != null && (_this4$globalObject$d = _this4$globalObject$d.activeElement) != null && _this4$globalObject$d.contains(e.currentTarget)) {
+        onSelectDateComponent(type, e);
+      }
+    };
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      "data-fragment": "",
+      onMouseUp: handleMouseUp
+    }, valueMask, /*#__PURE__*/React.createElement("span", {
+      "data-tid": "DateFragmentsView__placeholder",
+      className: this.styles.mask(this.theme)
+    }, Array(lengthMask).fill('').map(function (_, i) {
+      return /*#__PURE__*/React.createElement(MaskCharLowLine, {
+        key: i
+      });
+    })));
+  };
+  return DateFragmentsView;
+}(React.Component)) || _class;

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","MaskCharLowLine","InternalDateValidator","InternalDateComponentType","ThemeContext","withRenderEnvironment","getStyles","DateFragmentsView","_class","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","rootNode","isFragment","el","fragments","from","querySelectorAll","some","fragment","contains","getRootNode","rootRef","_inheritsLoose","_proto","prototype","render","_this2","styles","emotion","createElement","Consumer","theme","renderMain","_this$cx","_this3","ref","className","cx","root","selected","props","map","index","type","Separator","renderSeparator","renderDateComponent","_this$cx2","separatorClassName","mask","delimiterFilled","value","key","_this4","_this$props","inputMode","onSelectDateComponent","valueWithPad","getValueMask","valueMask","lengthMask","testParseToNumber","Math","max","toString","handleMouseUp","e","_this4$globalObject$d","globalObject","document","activeElement","currentTarget","onMouseUp","fill","_","i","Component"],"sources":["DateFragmentsView.tsx"],"sourcesContent":["import React from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { GlobalObject } from '../../lib/globalObject';\nimport { MaskCharLowLine } from '../../internal/MaskCharLowLine';\nimport { InternalDateValidator } from '../../lib/date/InternalDateValidator';\nimport type { InternalDateFragment } from '../../lib/date/types';\nimport { InternalDateComponentType } from '../../lib/date/types';\nimport type { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment';\n\nimport { getStyles } 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\n@withRenderEnvironment\nexport class DateFragmentsView extends React.Component<DateFragmentViewProps> {\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private cx!: Emotion['cx'];\n  private styles!: ReturnType<typeof getStyles>;\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    this.styles = getStyles(this.emotion);\n\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\n        ref={this.rootRef}\n        className={this.cx({\n          [this.styles.root()]: true,\n          [this.styles.selected(this.theme)]: true,\n        })}\n      >\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 = this.cx({\n      [this.styles.mask(this.theme)]: true,\n      [this.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 getValueMask = () => {\n      if (value === null || (selected === type && inputMode)) {\n        return value;\n      }\n\n      return valueWithPad || value;\n    };\n\n    const valueMask = getValueMask();\n\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 (this.globalObject.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 data-tid=\"DateFragmentsView__placeholder\" className={this.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"],"mappings":"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","ignoreList":[]}

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { InternalDateFragment } from '../../lib/date/types.js';
-import { InternalDateComponentType } from '../../lib/date/types.js';
+import type { InternalDateFragment } from '../../lib/date/types';
+import { InternalDateComponentType } from '../../lib/date/types';
 interface DateFragmentViewProps {
     selected: InternalDateComponentType | null;
     fragments: InternalDateFragment[];

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

@@ -0,0 +1,23 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+import { memoizeGetStyles } from "../../../lib/theming/Emotion";
+export var getStyles = memoizeGetStyles(function (_ref) {
+  var css = _ref.css;
+  return {
+    root: function root() {
+      return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      cursor: text;\n    "])));
+    },
+    selected: function selected(t) {
+      var getSelection = function getSelection(background, color) {
+        return (background || color) && "& ::selection {\n      background: " + background + ";\n      color: " + color + ";\n    }";
+      };
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: text;\n\n      ", "\n    "])), getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor));
+    },
+    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,"names":["memoizeGetStyles","getStyles","_ref","css","root","_templateObject","_taggedTemplateLiteralLoose","selected","t","getSelection","background","color","_templateObject2","dateInputComponentSelectedBgColor","dateInputComponentSelectedTextColor","mask","_templateObject3","dateInputMaskColor","delimiterFilled","_templateObject4"],"sources":["DateFragmentsView.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion';\nimport type { Theme } from '../../lib/theming/Theme';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\n  root() {\n    return css`\n      cursor: text;\n    `;\n  },\n\n  selected(t: Theme) {\n    const getSelection = (background: string, color: string) =>\n      (background || color) &&\n      `& ::selection {\n      background: ${background};\n      color: ${color};\n    }`;\n\n    return css`\n      cursor: text;\n\n      ${getSelection(t.dateInputComponentSelectedBgColor, t.dateInputComponentSelectedTextColor)}\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"],"mappings":";;AAEA,SAASA,gBAAgB,QAAQ,2BAA2B;;;AAG5D,OAAO,IAAMC,SAAS,GAAGD,gBAAgB,CAAC,UAAAE,IAAA,OAAGC,GAAG,GAAAD,IAAA,CAAHC,GAAG,QAAiB;IAC/DC,IAAI,WAAAA,KAAA,EAAG;MACL,OAAOD,GAAG,CAAAE,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;IAGZ,CAAC;;IAEDC,QAAQ,WAAAA,SAACC,CAAQ,EAAE;MACjB,IAAMC,YAAY,GAAG,SAAfA,YAAYA,CAAIC,UAAkB,EAAEC,KAAa;UACrD,CAACD,UAAU,IAAIC,KAAK;;UAEND,UAAU;UACfC,KAAK,aACd;;;MAEF,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAN,2BAAA;;;MAGNG,YAAY,CAACD,CAAC,CAACK,iCAAiC,EAAEL,CAAC,CAACM,mCAAmC,CAAC;;IAE9F,CAAC;;IAEDC,IAAI,WAAAA,KAACP,CAAQ,EAAE;MACb,OAAOL,GAAG,CAAAa,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;MACCE,CAAC,CAACS,kBAAkB;;IAEjC,CAAC;;IAEDC,eAAe,WAAAA,gBAAA,EAAG;MAChB,OAAOf,GAAG,CAAAgB,gBAAA,KAAAA,gBAAA,GAAAb,2BAAA;;;IAGZ;EACF,CAAC,EAAC,CAAC","ignoreList":[]}

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,5 +1,5 @@
-import type { Theme } from '../../lib/theming/Theme.js';
-export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+import type { Theme } from '../../lib/theming/Theme';
+export declare const getStyles: import("../../lib/theming/Emotion").StylesGetter<{
     root(): string;
     selected(t: Theme): string;
     mask(t: Theme): string;

package/components/DateInput/DateInput/DateInput.js

@@ -0,0 +1,419 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _dec, _class, _DateInput;
+import React from 'react';
+import ReactDOM from 'react-dom';
+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 { CommonWrapper } from "../../../internal/CommonWrapper";
+import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { FocusControlWrapper } from "../../../internal/FocusControlWrapper";
+import { withSize } from "../../../lib/size/SizeDecorator";
+import { withRenderEnvironment } from "../../../lib/renderEnvironment";
+import { CalendarIcon } from "../CalendarIcon";
+import { DateFragmentsView } from "../DateFragmentsView";
+import { getStyles } from "../DateInput.styles";
+import { Actions, extractAction } from "../helpers/DateInputKeyboardActions";
+import { InternalDateMediator } from "../helpers/InternalDateMediator";
+export var DateInputDataTids = {
+  root: 'DateInput__root',
+  icon: 'DateInput__icon'
+};
+
+/**
+ * Компонент поля `DateInput` из DatePicker'а помогает выбирать дату с клавиатуры.
+ */
+export var DateInput = (_dec = locale('DatePicker', DatePickerLocaleHelper), withRenderEnvironment(_class = rootNode(_class = _dec(_class = withSize(_class = (_DateInput = /*#__PURE__*/function (_React$Component) {
+  function DateInput(props) {
+    var _this;
+    _this = _React$Component.call(this, props) || this;
+    _this.getProps = createPropsGetter(DateInput.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 _this$props = _this.props,
+        withIcon = _this$props.withIcon,
+        _this$props$disabled = _this$props.disabled,
+        disabled = _this$props$disabled === void 0 ? false : _this$props$disabled;
+      var size = _this.size;
+      if (withIcon) {
+        var _this$cx;
+        var theme = _this.theme;
+        var icon = /*#__PURE__*/React.createElement(CalendarIcon, {
+          size: size
+        });
+        var iconStyles = _this.cx((_this$cx = {}, _this$cx[_this.styles.icon(theme)] = true, _this$cx[_this.styles.iconSmall(theme)] = size === 'small', _this$cx[_this.styles.iconMedium(theme)] = size === 'medium', _this$cx[_this.styles.iconLarge(theme)] = size === 'large', _this$cx[_this.styles.iconDisabled(theme)] = disabled, _this$cx));
+        return /*#__PURE__*/(
+          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 selection = _this.globalObject.getSelection == null ? void 0 : _this.globalObject.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, sync) {
+      if (state === void 0) {
+        state = {};
+      }
+      if (sync === void 0) {
+        sync = true;
+      }
+      var valueFormatted = _this.iDateMediator.getString();
+      var update = function update() {
+        return _this.setState(_extends({}, 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 _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 _this$iDateMediator$i = _this.iDateMediator.inputKey(event.key, selected, _this.state.inputMode),
+        inputMode = _this$iDateMediator$i.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;
+  }
+  _inheritsLoose(DateInput, _React$Component);
+  var _proto = DateInput.prototype;
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+    var _this$getProps = this.getProps(),
+      value = _this$getProps.value,
+      minDate = _this$getProps.minDate,
+      maxDate = _this$getProps.maxDate;
+    if (prevProps.value !== value || prevProps.minDate !== minDate || prevProps.maxDate !== maxDate || this.iDateMediator.isChangedLocale(this.locale)) {
+      this.updateFromProps(false);
+    }
+    !this.props.disabled && this.selectNode();
+  };
+  _proto.componentDidMount = function componentDidMount() {
+    this.updateFromProps(false);
+    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;
+    this.styles = getStyles(this.emotion);
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return _this2.renderMain();
+    });
+  };
+  _proto.renderMain = function renderMain() {
+    var _this$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);
+    var _this$getProps2 = this.getProps(),
+      width = _this$getProps2.width;
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement(FocusControlWrapper, {
+      onBlurWhenDisabled: this.resetFocus
+    }, /*#__PURE__*/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']
+    }, /*#__PURE__*/React.createElement("span", {
+      className: this.cx(this.styles.value(), (_this$cx2 = {}, _this$cx2[this.styles.valueVisible()] = showValue, _this$cx2))
+    }, /*#__PURE__*/React.createElement(DateFragmentsView, {
+      ref: this.dateFragmentsViewRef,
+      fragments: this.iDateMediator.getFragments(),
+      onSelectDateComponent: this.handleSelectDateComponent,
+      selected: selected,
+      inputMode: inputMode
+    })))));
+  };
+  return DateInput;
+}(React.Component), _DateInput.__KONTUR_REACT_UI__ = 'DateInput', _DateInput.displayName = 'DateInput', _DateInput.defaultProps = {
+  value: '',
+  minDate: MIN_FULLDATE,
+  maxDate: MAX_FULLDATE,
+  width: 125
+}, _DateInput)) || _class) || _class) || _class) || _class);