@skbkontur/react-ui 0.0.0-d4e280859d → 0.0.0-d560679cdd

package/cjs/components/DateRangePicker/DateRangePicker.js

@@ -1,14 +1,16 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.DateRangePickerDataTids = exports.DateRangePicker = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react = _interopRequireWildcard(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.DateRangePickerDataTids = exports.DateRangePicker = void 0;var _extends3 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _react = _interopRequireWildcard(require("react"));
 
 var _MobilePopup = require("../../internal/MobilePopup");
 var _useLocaleForControl = require("../../lib/locale/useLocaleForControl");
 var _Emotion = require("../../lib/theming/Emotion");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
+
 var _CommonWrapper = require("../../internal/CommonWrapper");
+
 var _Calendar = require("../Calendar");
 var _Popup = require("../../internal/Popup");
-
+var _DateInput = require("../DateInput");
 var _comparison = require("../../lib/date/comparison");
 
 var _ZIndex = require("../../internal/ZIndex");
@@ -20,26 +22,37 @@ var _InternalDate = require("../../lib/date/InternalDate");
 var _InternalDateGetter = require("../../lib/date/InternalDateGetter");
 var _ArrowAUp16Light = require("../../internal/icons2022/ArrowAUpIcon/ArrowAUp16Light");
 var _NativeDateInput = require("../../internal/NativeDateInput");
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+var _locale = require("../../lib/locale");
+var _client = require("../../lib/client");
 
 var _DateRangePicker = require("./DateRangePicker.styles");
 var _DateRangePickerSeparator = require("./DateRangePickerSeparator");
+
 var _DateRangePickerContext = require("./DateRangePickerContext");
-var _DateRangePickerField = require("./DateRangePickerField");
+
+var _DateRangePickerInput = require("./DateRangePickerInput");
 var _DateRangePickerTheme = require("./DateRangePickerTheme");
-var _locale = require("./locale");
-var _dateRangePickerValidate = require("./dateRangePickerValidate");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _locale2 = require("./locale");
+var _validateDateRangePicker = require("./helpers/validateDateRangePicker");
+var _getStateForValue = require("./helpers/getStateForValue");var _templateObject, _templateObject2;
 
 var DateRangePickerDataTids = exports.DateRangePickerDataTids = {
   root: 'DateRangePicker__root',
-  start: 'DateRangePicker__from',
-  end: 'DateRangePicker__to',
+  start: 'DateRangePicker__start',
+  end: 'DateRangePicker__end',
   popup: 'DateRangePicker__popup',
   calendar: 'DateRangePicker__calendar',
-  pickerTodayWrapper: 'DateRangePicker__todayWrapper',
-  optionalStartFieldButton: 'DateRangePicker__optionalStartFieldButton',
-  optionalEndFieldButton: 'DateRangePicker__optionalEndFieldButton'
+  todayButton: 'DateRangePicker__todayButton',
+  startOptionalButton: 'DateRangePicker__startOptionalButton',
+  endOptionalButton: 'DateRangePicker__endOptionalButton',
+  mobileStart: 'DateRangePicker__mobileStart',
+  mobileEnd: 'DateRangePicker__mobileEnd',
+  rangeStart: 'DateRangePicker__rangeStart',
+  rangeEnd: 'DateRangePicker__rangeEnd'
 };
 
+var DayDateAttribute = 'data-date-range-picker-day';
 
 
 
@@ -64,481 +77,232 @@ var DateRangePickerDataTids = exports.DateRangePickerDataTids = {
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-var DateRangePicker = exports.DateRangePicker =
-
-
-
-
-function DateRangePicker(props) {
-  var _useResponsiveLayout = (0, _ResponsiveLayout.useResponsiveLayout)(),isMobile = _useResponsiveLayout.isMobile;
-  var locale = (0, _useLocaleForControl.useLocaleForControl)('DateRangePicker', _locale.DatePickerLocaleHelper);
-
-  var _useState = (0, _react.useState)(null),hoveredDay = _useState[0],setHoveredDay = _useState[1];
-  var _useState2 = (0, _react.useState)(false),showCalendar = _useState2[0],setShowCalendar = _useState2[1];
-  var _useState3 = (0, _react.useState)(null),activeField = _useState3[0],setActiveField = _useState3[1];
-
-  var dateRangePickerRef = (0, _react.useRef)(null);
-  var startRef = (0, _react.useRef)(null);
-  var endRef = (0, _react.useRef)(null);
-  var calendarRef = (0, _react.useRef)(null);
-  var calendarContainerRef = (0, _react.useRef)(null);
-
-  var _props$value = props.value,start = _props$value[0],end = _props$value[1];
-  var setValue = props.onValueChange;
-  var setStart = function setStart(date) {if (date === void 0) {date = '';}return props.onValueChange([date, end]);};
-  var setEnd = function setEnd(date) {if (date === void 0) {date = '';}return props.onValueChange([start, date]);};
-
-  (0, _react.useEffect)(function () {
-    switch (activeField) {
-      case 'start':
-        // fix DateInput flushSync warning in React 18
-        setTimeout(function () {var _startRef$current;
-          (_startRef$current = startRef.current) == null || _startRef$current.focus();
-        });
-        return;
-
-      case 'end':
-        // fix DateInput flushSync warning in React 18
-        setTimeout(function () {var _endRef$current;
-          (_endRef$current = endRef.current) == null || _endRef$current.focus();
-        });
-        return;
-
-      case null:
-      default:
-        setShowCalendar(false);
-    }
-  }, [startRef, endRef, activeField]);
-
-  var scrollToMonth = function scrollToMonth(type) {
-    var date = type === 'start' ? start : end;
-    if (date) {
-      var _date$split$map = date.split('.').map(Number),month = _date$split$map[1],year = _date$split$map[2];
-      if (month) {var _calendarRef$current;
-        (_calendarRef$current = calendarRef.current) == null || _calendarRef$current.scrollToMonth(month, year);
+var DateRangePicker = exports.DateRangePicker = Object.assign(
+  {
+    Start: _DateRangePickerInput.DateRangePickerStart,
+    End: _DateRangePickerInput.DateRangePickerEnd,
+    Separator: _DateRangePickerSeparator.DateRangePickerSeparator,
+    validate: _validateDateRangePicker.validateDateRangePicker
+  },
+  (0, _forwardRefAndName.forwardRefAndName)('DateRangePicker', function (props, ref) {
+    var _useResponsiveLayout = (0, _ResponsiveLayout.useResponsiveLayout)(),isMobile = _useResponsiveLayout.isMobile;
+    var locale = (0, _useLocaleForControl.useLocaleForControl)('DateRangePicker', _locale2.DateRangePickerLocaleHelper);
+
+    var _useState = (0, _react.useState)(),startValue = _useState[0],setStartValue = _useState[1];
+    var _useState2 = (0, _react.useState)(false),startOptional = _useState2[0],setStartOptional = _useState2[1];
+    var _useState3 = (0, _react.useState)(false),startDisabled = _useState3[0],setStartDisabled = _useState3[1];
+
+    var _useState4 = (0, _react.useState)(),endValue = _useState4[0],setEndValue = _useState4[1];
+    var _useState5 = (0, _react.useState)(false),endOptional = _useState5[0],setEndOptional = _useState5[1];
+    var _useState6 = (0, _react.useState)(false),endDisabled = _useState6[0],setEndDisabled = _useState6[1];
+
+    var _useState7 = (0, _react.useState)(''),minDate = _useState7[0],setMinDate = _useState7[1];
+    var _useState8 = (0, _react.useState)(''),maxDate = _useState8[0],setMaxDate = _useState8[1];
+
+    var _useState9 = (0, _react.useState)(null),hoveredDay = _useState9[0],setHoveredDay = _useState9[1];
+    var _useState10 = (0, _react.useState)(false),showCalendar = _useState10[0],setShowCalendar = _useState10[1];
+    var _useState11 = (0, _react.useState)(null),focusInput = _useState11[0],setFocusInput = _useState11[1];
+
+    var dateRangePickerRef = (0, _react.useRef)(null);
+    var calendarRef = (0, _react.useRef)(null);
+    var startRef = (0, _react.useRef)(null);
+    var endRef = (0, _react.useRef)(null);
+    var mobileStartRef = (0, _react.useRef)(null);
+    var mobileEndRef = (0, _react.useRef)(null);
+    var mobileNativeStartRef = (0, _react.useRef)(null);
+    var mobileNativeEndRef = (0, _react.useRef)(null);
+    var isCalendarOpen = !startDisabled && !endDisabled && showCalendar;
+
+    var updateDateRangeValues = function updateDateRangeValues(value) {if (value === void 0) {value = '';}
+      var currentValues = {
+        currentStart: startValue,
+        currentEnd: endValue,
+        minDate: minDate,
+        maxDate: maxDate
+      };
+      var updatedState = (0, _getStateForValue.getStateForValue)(focusInput, value, currentValues);
+
+      setStartValue(updatedState.start);
+      setEndValue(updatedState.end);
+
+      if (updatedState.isOpen && updatedState.focus) {
+        focus(updatedState.focus);
       }
-    }
-  };
-
-  var open = function open(type) {
-    setActiveField(type);
-    setShowCalendar(true);
-    scrollToMonth(type);
-  };
-
-  var close = function close() {
-    setActiveField(null);
-    setShowCalendar(false);
-    setHoveredDay(null);
-  };
-
-  var setOptionalValue = function setOptionalValue(type) {
-    switch (type) {
-      case 'start':
-        setStart('');
-        setActiveField('end');
-        break;
-
-      case 'end':
-        setEnd('');
-        close();
-        break;
-    }
-  };
-
-  var updateRange = function updateRange(date) {
-    if (props.minDate && (0, _comparison.isLess)(date, props.minDate) || props.maxDate && (0, _comparison.isGreater)(date, props.maxDate)) {
-      return;
-    }
 
-    var handleInitialPeriod = function handleInitialPeriod(date) {
-      if (activeField === 'start') {
-        setStart(date);
-        setActiveField('end');
-      } else {
-        setEnd(date);
-        setActiveField('start');
+      if (!updatedState.isOpen) {
+        close();
       }
     };
 
-    var handlePartialPeriod = function handlePartialPeriod(date) {
-      if (activeField === 'start') {
-        if (start) {
-          setStart(date);
-          setActiveField('end');
-          return;
-        }
-
-        if (end && (0, _comparison.isGreater)(date, end)) {
-          setValue([date, '']);
-          setActiveField('end');
-          return;
-        }
-
-        setStart(date);
-        close();
-      } else if (activeField === 'end') {
-        if (end) {
-          setEnd(date);
-          setActiveField('start');
-          return;
-        }
+    var open = function open(inputType) {if (inputType === void 0) {inputType = 'start';}
+      setFocusInput(inputType);
+      setShowCalendar(true);
+    };
 
-        if (start && (0, _comparison.isLess)(date, start)) {
-          setValue([date, '']);
-          setActiveField('end');
-          return;
-        }
+    var close = function close() {
+      setShowCalendar(false);
+      setHoveredDay(null);
+    };
 
-        setEnd(date);
-        close();
-      }
+    var focus = function focus(inputType) {if (inputType === void 0) {inputType = 'start';}
+      setFocusInput(inputType);
     };
 
-    var handleFullPeriod = function handleFullPeriod(date) {
-      if (activeField === 'start') {
-        if (end && (0, _comparison.isLessOrEqual)(date, end)) {
-          setStart(date);
-          close();
-        } else {
-          setValue([date, '']);
-          setActiveField('end');
-        }
-      } else if (activeField === 'end') {
-        if (start && (0, _comparison.isGreaterOrEqual)(date, start)) {
-          setEnd(date);
+    var setEmpty = function setEmpty(type) {
+      switch (type) {
+        case 'start':
+          setStartValue('');
+          focus('end');
+          break;
+
+        case 'end':
+          setEndValue('');
           close();
-        } else {
-          setValue([date, '']);
-          setActiveField('end');
-        }
+          break;
       }
     };
 
-    if (!start && !end) {
-      handleInitialPeriod(date);
-    } else if (start && !end || !start && end) {
-      handlePartialPeriod(date);
-    } else {
-      handleFullPeriod(date);
-    }
-  };
-
-  var renderRange = function renderRange(
-  props,
-  t,
-  renderDayFn)
-  {
-    var day = props.date;
-
-    var isDayFirst = start === day;
-    var isDayLast = end === day;
-    var isDayInPeriod = Boolean(start && end && (0, _comparison.isBetween)(day, start, end));
-
-    var hasHoveredDay = hoveredDay !== null;
-    var isDayInHoveredPeriod =
-    hasHoveredDay &&
-    Boolean(
-      activeField === 'start' && end && (0, _comparison.isBetween)(day, hoveredDay, end) ||
-      activeField === 'end' && start && (0, _comparison.isBetween)(day, start, hoveredDay)
+    (0, _react.useImperativeHandle)(
+      ref,
+      function () {var _calendarRef$current;return {
+          open: open,
+          close: close,
+          scrollToMonth: (_calendarRef$current = calendarRef.current) == null ? void 0 : _calendarRef$current.scrollToMonth,
+          getRootNode: function getRootNode() {return dateRangePickerRef.current;}
+        };},
+      []
     );
 
-    var hasLeftRoundings;
-    var hasRightRoundings;
-
-    if (hasHoveredDay) {
-      // TODO: check if start / end not setted
-      var isDayBeforeFirstInPeriod = start ? (0, _comparison.isLess)(hoveredDay, start) : end;
-      var isDayAfterLastInPeriod = end ? (0, _comparison.isGreater)(hoveredDay, end) : start;
-
-      if (isDayFirst && ((0, _comparison.isGreaterOrEqual)(hoveredDay, start) || activeField === 'end')) {
-        hasLeftRoundings = true;
-      }
-
-      if (isDayLast && ((0, _comparison.isLessOrEqual)(hoveredDay, end) || activeField === 'start')) {
-        hasRightRoundings = true;
+    (0, _react.useLayoutEffect)(function () {
+      if (!focusInput) {
+        return;
       }
 
-      var isDayHovered = hoveredDay === day;
-      if (isDayHovered) {
-        if (isDayBeforeFirstInPeriod) {
-          hasLeftRoundings = true;
+      // fix DateInput flushSync warning in React 18
+      setTimeout(function () {var _currentFieldRef$curr4;
+        var isStart = focusInput === 'start';
+        var currentFieldRef;
+
+        // Mobile Native Picker
+        if (isMobile && props.useMobileNativeDatePicker) {
+          currentFieldRef = isStart ? mobileNativeStartRef : mobileNativeEndRef;
+          if (_client.isIOS) {var _currentFieldRef$curr;
+            (_currentFieldRef$curr = currentFieldRef.current) == null || _currentFieldRef$curr.focus();
+          } else {var _currentFieldRef$curr2;
+            // Android open native datepicker only via click
+            (_currentFieldRef$curr2 = currentFieldRef.current) == null || _currentFieldRef$curr2.click();
+          }
+          return;
         }
 
-        if (isDayAfterLastInPeriod) {
-          hasRightRoundings = true;
+        // Mobile
+        if (isMobile) {var _currentFieldRef$curr3;
+          currentFieldRef = isStart ? mobileStartRef : mobileEndRef;
+          (_currentFieldRef$curr3 = currentFieldRef.current) == null || _currentFieldRef$curr3.focus();
+          return;
         }
-      }
-    } else {
-      if (isDayFirst) {
-        hasLeftRoundings = true;
-      }
-
-      if (isDayLast) {
-        hasRightRoundings = true;
-      }
-    }
-
-    return /*#__PURE__*/(
-      _react.default.createElement("div", {
-        onMouseOver: function onMouseOver() {return setHoveredDay(day);},
-        onMouseOut: function onMouseOut() {return setHoveredDay(null);},
-        className: (0, _Emotion.cx)((0,
-        _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n            width: 100%;\n            height: 100%;\n            background: ", ";\n            border-top-left-radius: ", ";\n            border-bottom-left-radius: ", ";\n            border-top-right-radius: ", ";\n            border-bottom-right-radius: ", ";\n          "])),
-
-
-        isDayInPeriod && t.rangeCalendarCellBg,
-        hasLeftRoundings && t.calendarCellBorderRadius,
-        hasLeftRoundings && t.calendarCellBorderRadius,
-        hasRightRoundings && t.calendarCellBorderRadius,
-        hasRightRoundings && t.calendarCellBorderRadius),
-
-        (isDayFirst || isDayLast) && (0,
-        _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n              position: relative;\n\n              [data-tid=", "] {\n                color: ", ";\n\n                @media (hover: hover) {\n                  &:hover {\n                    background: none;\n                  }\n                }\n              }\n\n              &:before {\n                content: '';\n                position: absolute;\n                top: 0;\n                left: 0;\n                width: 100%;\n                height: 100%;\n                background: ", ";\n                border-radius: ", ";\n              }\n            "])),
-
-
-        _Calendar.CalendarDataTids.dayCell,
-        t.rangeCalendarCellEndColor,
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-        t.rangeCalendarCellEndBg,
-        t.calendarCellBorderRadius),
-
-
-        isDayInHoveredPeriod && (0,
-        _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n              background: ", ";\n            "])),
-        t.rangeCalendarCellBg),
-
-        isDayInPeriod && (0,
-        _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n              @media (hover: hover) {\n                &:hover [data-tid=", "] {\n                  background: ", ";\n                }\n              }\n            "])),
-
-        _Calendar.CalendarDataTids.dayCell,
-        t.rangeCalendarCellHoverBg)
-
-
-
-        ) },
-
-      renderDayFn ? renderDayFn(props) : /*#__PURE__*/_react.default.createElement(_Calendar.CalendarDay, props)
-      ));
-
-  };
-
-  var dateRangePickerContextProps = {
-    start: start,
-    end: end,
-    minDate: props.minDate,
-    maxDate: props.maxDate,
-    size: props.size,
-    disabled: props.disabled,
-    autoFocus: props.autoFocus,
-    warning: props.warning,
-    error: props.error,
-    onValueChange: props.onValueChange,
-    onFocus: props.onFocus,
-    onBlur: props.onBlur,
-    setStart: setStart,
-    setEnd: setEnd,
-    open: open,
-    close: close,
-    dateRangePickerRef: dateRangePickerRef,
-    startRef: startRef,
-    endRef: endRef
-  };
-
-  var getSize = function getSize(t) {
-    switch (props.size) {
-      case 'large':
-        return t.fontSizeLarge;
-      case 'medium':
-        return t.fontSizeMedium;
-      case 'small':
-      default:
-        return t.fontSizeSmall;
-    }
-  };
-
-  var renderCalendar = function renderCalendar(theme, widthAuto) {var _cx;if (widthAuto === void 0) {widthAuto = false;}return /*#__PURE__*/(
-      _react.default.createElement(_Calendar.Calendar, {
-        value: null,
-        minDate: props.minDate,
-        maxDate: props.maxDate,
-        renderDay: function renderDay(dayProps) {return renderRange(dayProps, theme, props.renderDay);},
-        onValueChange: updateRange,
-        ref: calendarRef,
-        "data-tid": DateRangePickerDataTids.calendar,
-        onMonthChange: props.onMonthChange,
-        className: (0, _Emotion.cx)((_cx = {}, _cx[(0,
-        _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n          width: auto;\n        "])))] =
-
-        widthAuto, _cx)
-        ) }
-      ));};
-
-
-  var renderButtons = function renderButtons() {var _props$optional3;
-    var renderTodayLink = function renderTodayLink() {
-      var today = new _InternalDate.InternalDate(locale).
-      setComponents(_InternalDateGetter.InternalDateGetter.getTodayComponents()).
-      toString({ withPad: true, withSeparator: true });
-
-      return (
-        props.enableTodayLink && /*#__PURE__*/
-        _react.default.createElement("div", { style: { margin: 8 } }, /*#__PURE__*/
-        _react.default.createElement(_Button.Button, {
-          "aria-label": locale.todayAriaLabel,
-          "data-tid": DateRangePickerDataTids.pickerTodayWrapper,
-          width: "100%",
-          onClick: function onClick() {return updateRange(today);},
-          icon: /*#__PURE__*/_react.default.createElement(_ArrowAUp16Light.ArrowAUpIcon16Light, null) },
-
-        locale.today
-        )
-        ));
-
 
+        // Desktop
+        currentFieldRef = isStart ? startRef : endRef;
+        (_currentFieldRef$curr4 = currentFieldRef.current) == null || _currentFieldRef$curr4.focus();
+      });
+    }, [focusInput]);
+
+    var dateRangePickerContextProps = {
+      startValue: startValue,
+      startOptional: startOptional,
+      startDisabled: startDisabled,
+      endValue: endValue,
+      endOptional: endOptional,
+      endDisabled: endDisabled,
+      minDate: minDate,
+      maxDate: maxDate,
+      size: props.size,
+      setStartValue: setStartValue,
+      setStartOptional: setStartOptional,
+      setStartDisabled: setStartDisabled,
+      setEndValue: setEndValue,
+      setEndOptional: setEndOptional,
+      setEndDisabled: setEndDisabled,
+      setMinDate: setMinDate,
+      setMaxDate: setMaxDate,
+      setFocusInput: setFocusInput,
+      open: open,
+      close: close,
+      dateRangePickerRef: dateRangePickerRef,
+      startRef: startRef,
+      endRef: endRef
     };
 
-    var renderOptionalButtons = function renderOptionalButtons() {var _props$optional, _props$optional2;return /*#__PURE__*/(
-        _react.default.createElement(_react.default.Fragment, null,
-        activeField === 'start' && ((_props$optional = props.optional) == null ? void 0 : _props$optional[0]) && /*#__PURE__*/
-        _react.default.createElement("div", { style: { margin: 8 } }, /*#__PURE__*/
-        _react.default.createElement(_Button.Button, {
-          width: "100%",
-          "data-tid": DateRangePickerDataTids.optionalStartFieldButton,
-          onClick: function onClick() {return setOptionalValue('start');} },
-
-        locale.withoutFirstDate
+    var renderCalendar = function renderCalendar(theme, widthAuto) {var _cx;if (widthAuto === void 0) {widthAuto = false;}return /*#__PURE__*/(
+        _react.default.createElement(_locale.LocaleContext.Provider, {
+          value: {
+            locale: {
+              Calendar: {
+                months: locale.months,
+                dayCellChooseDateAriaLabel: locale.dayCellChooseDateAriaLabel,
+                selectMonthAriaLabel: locale.selectMonthAriaLabel,
+                selectYearAriaLabel: locale.selectYearAriaLabel,
+                selectChosenAriaLabel: locale.selectChosenAriaLabel
+              }
+            }
+          } }, /*#__PURE__*/
+
+        _react.default.createElement(_Calendar.Calendar, {
+          value: focusInput === 'start' ? startValue : endValue,
+          minDate: minDate,
+          maxDate: maxDate,
+          renderDay: function renderDay(dayProps) {return renderCalendarRange(dayProps, theme, props.renderDay);},
+          onValueChange: function onValueChange(value) {return updateDateRangeValues(value);},
+          ref: calendarRef,
+          onMonthChange: props.onMonthChange,
+          className: (0, _Emotion.cx)((_cx = {}, _cx[_DateRangePicker.styles.calendarWidthAuto()] = widthAuto, _cx)) }
         )
-        ),
-
-        activeField === 'end' && ((_props$optional2 = props.optional) == null ? void 0 : _props$optional2[1]) && /*#__PURE__*/
-        _react.default.createElement("div", { style: { margin: 8 } }, /*#__PURE__*/
-        _react.default.createElement(_Button.Button, {
-          width: "100%",
-          "data-tid": DateRangePickerDataTids.optionalEndFieldButton,
-          onClick: function onClick() {return setOptionalValue('end');} },
-
-        locale.withoutSecondDate
-        )
-        )
-
         ));};
 
 
-    var hasOptionalButtons = (_props$optional3 = props.optional) == null ? void 0 : _props$optional3.find(Boolean);
-    return hasOptionalButtons ? renderOptionalButtons() : renderTodayLink();
-  };
-
-  var renderNativeDateInput = function renderNativeDateInput() {var _props$disabled, _props$disabled2;return /*#__PURE__*/(
-      _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-      _react.default.createElement(_NativeDateInput.NativeDateInput, {
-        value: start,
-        minDate: props.minDate,
-        maxDate: props.maxDate,
-        onValueChange: function onValueChange(date) {return props.onValueChange([date, end || '']);},
-        disabled: (_props$disabled = props.disabled) == null ? void 0 : _props$disabled[0] }
-      ), /*#__PURE__*/
-      _react.default.createElement(DateRangePicker.Separator, null), /*#__PURE__*/
-      _react.default.createElement(_NativeDateInput.NativeDateInput, {
-        value: end,
-        minDate: props.minDate,
-        maxDate: props.maxDate,
-        onValueChange: function onValueChange(date) {return props.onValueChange([start || '', date]);},
-        disabled: (_props$disabled2 = props.disabled) == null ? void 0 : _props$disabled2[1] }
-      )
-      ));};
-
-
-  return /*#__PURE__*/(
-    _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
-    function (theme) {var _cx2, _cx3;return /*#__PURE__*/(
-        _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _DateRangePickerTheme.getDateRangePickerTheme)(theme) }, /*#__PURE__*/
-        _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
-        _react.default.createElement("div", {
-          className: _DateRangePicker.styles.root(),
-          "data-tid": DateRangePickerDataTids.root,
-          onMouseEnter: props.onMouseEnter,
-          onMouseLeave: props.onMouseLeave,
-          onMouseOver: props.onMouseOver,
-          ref: dateRangePickerRef }, /*#__PURE__*/
-
-        _react.default.createElement(_DateRangePickerContext.DateRangePickerContext.Provider, { value: dateRangePickerContextProps }, /*#__PURE__*/
-        _react.default.createElement("div", {
-          className: (0, _Emotion.cx)(
-            _DateRangePicker.styles.inputWrapper(),
-            _DateRangePicker.styles.inputWrapperWidth(theme), (0,
-            _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n                      font-size: ", ";\n                    "])),
-            getSize(theme))
-
-          ) },
-
-        props.children
-        ),
-
-        props.useMobileNativeDatePicker && isMobile ?
-        renderNativeDateInput() :
-        showCalendar && /*#__PURE__*/
-        _react.default.createElement(_react.default.Fragment, null,
-        isMobile ? /*#__PURE__*/
+    var renderMobileCalendar = function renderMobileCalendar(theme) {var _cx2, _cx3;return /*#__PURE__*/(
         _react.default.createElement(_MobilePopup.MobilePopup, {
           opened: true,
           headerChildComponent: /*#__PURE__*/
-          _react.default.createElement("div", { className: _DateRangePicker.styles.inputWrapper(), style: { width: '100%' } }, /*#__PURE__*/
-          _react.default.createElement(DateRangePicker.Start, {
+          _react.default.createElement("div", { className: (0, _Emotion.cx)(_DateRangePicker.styles.root(theme), _DateRangePicker.styles.inputWrapperWidthFull()) }, /*#__PURE__*/
+          _react.default.createElement(_DateInput.DateInput, {
+            withIcon: true,
+            value: startValue,
             width: "auto",
             size: "medium",
-            className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_DateRangePicker.styles.inputVisuallyFocus(theme)] = activeField === 'start', _cx2)) }
+            className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_DateRangePicker.styles.inputVisuallyFocus(theme)] = focusInput === 'start', _cx2)),
+            disabled: startDisabled,
+            onValueChange: setStartValue,
+            onFocus: function onFocus() {return setFocusInput('start');},
+            ref: mobileStartRef,
+            "data-tid": DateRangePickerDataTids.mobileStart }
           ), /*#__PURE__*/
           _react.default.createElement(DateRangePicker.Separator, null), /*#__PURE__*/
-          _react.default.createElement(DateRangePicker.End, {
+          _react.default.createElement(_DateInput.DateInput, {
+            withIcon: true,
+            value: endValue,
             width: "auto",
             size: "medium",
-            className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_DateRangePicker.styles.inputVisuallyFocus(theme)] = activeField === 'end', _cx3)) }
+            className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_DateRangePicker.styles.inputVisuallyFocus(theme)] = focusInput === 'end', _cx3)),
+            disabled: endDisabled,
+            onValueChange: setEndValue,
+            onFocus: function onFocus() {return setFocusInput('end');},
+            ref: mobileEndRef,
+            "data-tid": DateRangePickerDataTids.mobileEnd }
           )
           ),
 
-          onCloseRequest: function onCloseRequest() {
-            close();
-            props.onBlur == null || props.onBlur();
-          },
+          onCloseRequest: function onCloseRequest() {return close();},
           footerChildComponent: renderButtons() }, /*#__PURE__*/
 
         _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _DateRangePickerTheme.getMobileDateRangePickerTheme)(theme) },
         renderCalendar(theme, true)
         )
-        ) : /*#__PURE__*/
+        ));};
 
-        _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
-        _react.default.createElement("div", { "data-tid": DateRangePickerDataTids.popup }), /*#__PURE__*/
+
+    var renderDesktopCalendar = function renderDesktopCalendar(theme) {return /*#__PURE__*/(
         _react.default.createElement(_Popup.Popup, {
           opened: true,
           hasShadow: true,
@@ -551,29 +315,218 @@ function DateRangePicker(props) {
         _react.default.createElement("div", {
           className: _DateRangePicker.styles.calendarWrapper(theme),
           onMouseDown: function onMouseDown(e) {return e.preventDefault();},
-          ref: calendarContainerRef },
+          onMouseMove: handleCalendarRangeMouseMove },
 
         renderCalendar(theme),
         renderButtons()
         )
-        )
-        )
+        ));};
 
-        )
 
+    var renderButtons = function renderButtons() {
+      var today = new _InternalDate.InternalDate(locale).
+      setComponents(_InternalDateGetter.InternalDateGetter.getTodayComponents()).
+      toString({ withPad: true, withSeparator: true });
+
+      var hasOptionalButtons = startOptional || endOptional;
+      return /*#__PURE__*/(
+        _react.default.createElement("div", { className: (0, _Emotion.cx)(_DateRangePicker.styles.buttonWrap()) },
+        hasOptionalButtons && /*#__PURE__*/
+        _react.default.createElement(_react.default.Fragment, null,
+        focusInput === 'start' && startOptional && /*#__PURE__*/
+        _react.default.createElement(_Button.Button, {
+          width: "100%",
+          "data-tid": DateRangePickerDataTids.startOptionalButton,
+          onClick: function onClick() {return setEmpty('start');} },
+
+        locale.startDateEmpty
+        ),
+
+        focusInput === 'end' && endOptional && /*#__PURE__*/
+        _react.default.createElement(_Button.Button, {
+          width: "100%",
+          "data-tid": DateRangePickerDataTids.endOptionalButton,
+          onClick: function onClick() {return setEmpty('end');} },
+
+        locale.endDateEmpty
         )
+
+        ),
+
+
+        props.enableTodayLink && /*#__PURE__*/
+        _react.default.createElement(_Button.Button, {
+          icon: /*#__PURE__*/_react.default.createElement(_ArrowAUp16Light.ArrowAUpIcon16Light, null),
+          "aria-label": locale.todayAriaLabel,
+          "data-tid": DateRangePickerDataTids.todayButton,
+          onClick: function onClick() {return updateDateRangeValues(today);} },
+
+        !hasOptionalButtons && locale.today
         )
+
+        ));
+
+    };
+
+    var renderMobileNativeDateInput = function renderMobileNativeDateInput() {return /*#__PURE__*/(
+        _react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/
+        _react.default.createElement(_NativeDateInput.NativeDateInput, {
+          value: startValue,
+          minDate: minDate,
+          maxDate: maxDate,
+          onValueChange: setStartValue,
+          disabled: startDisabled,
+          ref: mobileNativeStartRef }
+        ), /*#__PURE__*/
+        _react.default.createElement(_NativeDateInput.NativeDateInput, {
+          value: endValue,
+          minDate: minDate,
+          maxDate: maxDate,
+          onValueChange: setEndValue,
+          disabled: endDisabled,
+          ref: mobileNativeEndRef }
         )
-        ));}
+        ));};
 
-    ));
 
-};
+    return /*#__PURE__*/(
+      _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
+      function (theme) {return /*#__PURE__*/(
+          _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _DateRangePickerTheme.getDateRangePickerTheme)(theme) }, /*#__PURE__*/
+          _react.default.createElement(_DateRangePickerContext.DateRangePickerContext.Provider, { value: dateRangePickerContextProps }, /*#__PURE__*/
+          _react.default.createElement(_CommonWrapper.CommonWrapper, props, /*#__PURE__*/
+          _react.default.createElement("div", {
+            className: (0, _Emotion.cx)(
+              _DateRangePicker.styles.root(theme),
+              _DateRangePicker.styles.inputWrapperWidth(theme), (0,
+              _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n                      font-size: ", ";\n                    "])),
+              (0, _DateRangePicker.getFontSize)(theme, props.size))
+
+            ),
+            role: "group",
+            "aria-describedby": props['aria-describedby'],
+            "aria-label": props['aria-label'],
+            "aria-labelledby": props['aria-labelledby'],
+            "data-tid": DateRangePickerDataTids.root,
+            ref: dateRangePickerRef,
+            style: { width: props.width } },
+
+          props.children,
+
+          props.useMobileNativeDatePicker && isMobile ?
+          renderMobileNativeDateInput() :
+          isCalendarOpen && (isMobile ? renderMobileCalendar(theme) : renderDesktopCalendar(theme))
+          )
+          )
+          )
+          ));}
+
+      ));
+
+
+    // Use parent mousemove event instead each CalendarDay's mouseenter / mouseover
+    function handleCalendarRangeMouseMove(e) {
+      if (!startValue && !endValue) {
+        return;
+      }
+
+      var hoveredElement = e.target;
+      if (!hoveredElement.hasAttribute(DayDateAttribute) && hoveredDay === null) {
+        return;
+      }
+
+      var date = String(hoveredElement == null ? void 0 : hoveredElement.getAttribute(DayDateAttribute)) || null;
+      setHoveredDay(date);
+    }
+
+    function renderCalendarRange(
+    props,
+    t,
+    renderDayFn)
+    {var _extends2, _cx4;
+      var day = props.date;
+
+      var isDayFirst = startValue === day;
+      var isDayLast = endValue === day;
+      var isDayInPeriod = Boolean(startValue && endValue && (0, _comparison.isBetween)(day, startValue, endValue));
+
+      var hasHoveredDay = hoveredDay !== null;
+      var isDayInHoveredPeriod =
+      hasHoveredDay &&
+      Boolean(
+        focusInput === 'start' && endValue && (0, _comparison.isBetween)(day, hoveredDay, endValue) ||
+        focusInput === 'end' && startValue && (0, _comparison.isBetween)(day, startValue, hoveredDay)
+      );
+
+      var hasLeftRoundings;
+      var hasRightRoundings;
+
+      if (hasHoveredDay) {
+        var isDayBeforeFirstInPeriod = startValue ? (0, _comparison.isLess)(hoveredDay, startValue) : endValue;
+        var isDayAfterLastInPeriod = endValue ? (0, _comparison.isGreater)(hoveredDay, endValue) : startValue;
+
+        if (isDayFirst && ((0, _comparison.isGreaterOrEqual)(hoveredDay, startValue) || focusInput === 'end')) {
+          hasLeftRoundings = true;
+        }
+
+        if (isDayLast && ((0, _comparison.isLessOrEqual)(hoveredDay, endValue) || focusInput === 'start')) {
+          hasRightRoundings = true;
+        }
+
+        var isDayHovered = hoveredDay === day;
+        if (isDayHovered) {
+          if (isDayBeforeFirstInPeriod) {
+            hasLeftRoundings = true;
+          }
+
+          if (isDayAfterLastInPeriod) {
+            hasRightRoundings = true;
+          }
+        }
+      } else {
+        if (isDayFirst) {
+          hasLeftRoundings = true;
+        }
+
+        if (isDayLast) {
+          hasRightRoundings = true;
+        }
+      }
 
-DateRangePicker.__KONTUR_REACT_UI__ = 'DateRangePicker';
-DateRangePicker.displayName = 'DateRangePicker';
+      var renderDayProps = (0, _extends3.default)({},
+      props, (_extends2 = {}, _extends2[
+      DayDateAttribute] = props.date, _extends2));
 
-DateRangePicker.Start = function (props) {return /*#__PURE__*/_react.default.createElement(_DateRangePickerField.DateRangePickerField, (0, _extends2.default)({}, props, { type: "start" }));};
-DateRangePicker.End = function (props) {return /*#__PURE__*/_react.default.createElement(_DateRangePickerField.DateRangePickerField, (0, _extends2.default)({}, props, { type: "end" }));};
-DateRangePicker.Separator = _DateRangePickerSeparator.DateRangePickerSeparator;
-DateRangePicker.validate = _dateRangePickerValidate.dateRangePickerValidate;
+
+      var dataTid = null;
+      if (isDayFirst) {
+        dataTid = DateRangePickerDataTids.rangeStart;
+      } else if (isDayLast) {
+        dataTid = DateRangePickerDataTids.rangeEnd;
+      }
+
+      return /*#__PURE__*/(
+        _react.default.createElement("div", {
+          className: (0, _Emotion.cx)(
+            _DateRangePicker.styles.rangeCalendarDay(), (0,
+            _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n              background: ", ";\n              border-top-left-radius: ", ";\n              border-bottom-left-radius: ", ";\n              border-top-right-radius: ", ";\n              border-bottom-right-radius: ", ";\n            "])),
+            isDayInPeriod && t.rangeCalendarCellBg,
+            hasLeftRoundings && t.calendarCellBorderRadius,
+            hasLeftRoundings && t.calendarCellBorderRadius,
+            hasRightRoundings && t.calendarCellBorderRadius,
+            hasRightRoundings && t.calendarCellBorderRadius), (_cx4 = {}, _cx4[
+
+
+            _DateRangePicker.styles.rangeCalendarDayEnd(t)] = isDayFirst || isDayLast, _cx4[
+            _DateRangePicker.styles.rangeCalendarDayHoverInPeriod(t)] = isDayInPeriod, _cx4[
+            _DateRangePicker.styles.rangeCalendarDayInHoveredPeriod(t)] = isDayInHoveredPeriod, _cx4)
+
+          ),
+          "data-tid": dataTid },
+
+        renderDayFn ? renderDayFn(renderDayProps) : /*#__PURE__*/_react.default.createElement(_Calendar.CalendarDay, renderDayProps)
+        ));
+
+    }
+  })
+);