@skbkontur/react-ui 0.0.0-a59755ee68 → 0.0.0-a6f09fbded

package/cjs/components/DateRangePicker/DateRangePicker.js

@@ -1,11 +1,13 @@
-"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 _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));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");
@@ -22,15 +24,14 @@ var _ArrowAUp16Light = require("../../internal/icons2022/ArrowAUpIcon/ArrowAUp16
 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 _DateRangePickerContext = require("./DateRangePickerContext");
 
+var _DateRangePickerInput = require("./DateRangePickerInput");
 var _DateRangePickerTheme = require("./DateRangePickerTheme");
 var _locale2 = require("./locale");
 var _validateDateRangePicker = require("./helpers/validateDateRangePicker");
@@ -46,9 +47,21 @@ var DateRangePickerDataTids = exports.DateRangePickerDataTids = {
   startOptionalButton: 'DateRangePicker__startOptionalButton',
   endOptionalButton: 'DateRangePicker__endOptionalButton',
   mobileStart: 'DateRangePicker__mobileStart',
-  mobileEnd: 'DateRangePicker__mobileEnd'
+  mobileEnd: 'DateRangePicker__mobileEnd',
+  rangeStart: 'DateRangePicker__rangeStart',
+  rangeEnd: 'DateRangePicker__rangeEnd'
 };
 
+var DayDateAttribute = 'data-date-range-picker-day';
+
+
+
+
+
+
+
+
+
 
 
 
@@ -66,8 +79,8 @@ var DateRangePickerDataTids = exports.DateRangePickerDataTids = {
 
 var DateRangePicker = exports.DateRangePicker = Object.assign(
   {
-    Start: function Start(props) {return /*#__PURE__*/_react.default.createElement(_DateRangePickerField.DateRangePickerField, (0, _extends2.default)({}, props, { type: "start" }));},
-    End: function End(props) {return /*#__PURE__*/_react.default.createElement(_DateRangePickerField.DateRangePickerField, (0, _extends2.default)({}, props, { type: "end" }));},
+    Start: _DateRangePickerInput.DateRangePickerStart,
+    End: _DateRangePickerInput.DateRangePickerEnd,
     Separator: _DateRangePickerSeparator.DateRangePickerSeparator,
     validate: _validateDateRangePicker.validateDateRangePicker
   },
@@ -75,11 +88,11 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
     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 _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 _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];
 
@@ -88,15 +101,17 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
 
     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),focusField = _useState11[0],setFocusField = _useState11[1];
+    var _useState11 = (0, _react.useState)(null),focusInput = _useState11[0],setFocusInput = _useState11[1];
 
-    var startRef = (0, _react.useRef)(null);
-    var endRef = (0, _react.useRef)(null);
     var dateRangePickerRef = (0, _react.useRef)(null);
     var calendarRef = (0, _react.useRef)(null);
-
-    var isCurrentFocusFieldDisabled =
-    focusField === 'start' && startDisabled || focusField === 'end' && endDisabled;
+    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 = {
@@ -105,7 +120,7 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
         minDate: minDate,
         maxDate: maxDate
       };
-      var updatedState = (0, _getStateForValue.getStateForValue)(focusField, value, currentValues);
+      var updatedState = (0, _getStateForValue.getStateForValue)(focusInput, value, currentValues);
 
       setStartValue(updatedState.start);
       setEndValue(updatedState.end);
@@ -119,10 +134,9 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
       }
     };
 
-    var open = function open(fieldType) {if (fieldType === void 0) {fieldType = 'start';}
-      setFocusField(fieldType);
+    var open = function open(inputType) {if (inputType === void 0) {inputType = 'start';}
+      setFocusInput(inputType);
       setShowCalendar(true);
-      scrollToMonth(fieldType);
     };
 
     var close = function close() {
@@ -130,14 +144,8 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
       setHoveredDay(null);
     };
 
-    var focus = function focus(fieldType) {if (fieldType === void 0) {fieldType = 'start';}
-      setFocusField(fieldType);
-      var fieldRef = fieldType === 'start' ? startRef : endRef;
-
-      // fix DateInput flushSync warning in React 18
-      setTimeout(function () {var _fieldRef$current;
-        (_fieldRef$current = fieldRef.current) == null || _fieldRef$current.focus();
-      }, 1);
+    var focus = function focus(inputType) {if (inputType === void 0) {inputType = 'start';}
+      setFocusInput(inputType);
     };
 
     var setEmpty = function setEmpty(type) {
@@ -154,26 +162,52 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
       }
     };
 
-    var scrollToMonth = function scrollToMonth(fieldType) {
-      var date = fieldType === 'start' ? startValue : endValue;
-      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);
-        }
-      }
-    };
-
     (0, _react.useImperativeHandle)(
       ref,
-      function () {return {
+      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;}
         };},
       []
     );
 
+    (0, _react.useLayoutEffect)(function () {
+      if (!focusInput) {
+        return;
+      }
+
+      // 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;
+        }
+
+        // Mobile
+        if (isMobile) {var _currentFieldRef$curr3;
+          currentFieldRef = isStart ? mobileStartRef : mobileEndRef;
+          (_currentFieldRef$curr3 = currentFieldRef.current) == null || _currentFieldRef$curr3.focus();
+          return;
+        }
+
+        // Desktop
+        currentFieldRef = isStart ? startRef : endRef;
+        (_currentFieldRef$curr4 = currentFieldRef.current) == null || _currentFieldRef$curr4.focus();
+      });
+    }, [focusInput]);
+
     var dateRangePickerContextProps = {
       startValue: startValue,
       startOptional: startOptional,
@@ -192,7 +226,7 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
       setEndDisabled: setEndDisabled,
       setMinDate: setMinDate,
       setMaxDate: setMaxDate,
-      setFocusField: setFocusField,
+      setFocusInput: setFocusInput,
       open: open,
       close: close,
       dateRangePickerRef: dateRangePickerRef,
@@ -215,7 +249,7 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
           } }, /*#__PURE__*/
 
         _react.default.createElement(_Calendar.Calendar, {
-          value: focusField === 'start' ? startValue : endValue,
+          value: focusInput === 'start' ? startValue : endValue,
           minDate: minDate,
           maxDate: maxDate,
           renderDay: function renderDay(dayProps) {return renderCalendarRange(dayProps, theme, props.renderDay);},
@@ -227,156 +261,161 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
         ));};
 
 
-    var renderButtons = function renderButtons() {
-      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", { className: (0, _Emotion.cx)(_DateRangePicker.styles.buttonWrap()) }, /*#__PURE__*/
-          _react.default.createElement(_Button.Button, {
-            width: "100%",
-            icon: /*#__PURE__*/_react.default.createElement(_ArrowAUp16Light.ArrowAUpIcon16Light, null),
-            "aria-label": locale.todayAriaLabel,
-            "data-tid": DateRangePickerDataTids.todayButton,
-            onClick: function onClick() {return updateDateRangeValues(today);} },
-
-          locale.today
+    var renderMobileCalendar = function renderMobileCalendar(theme) {var _cx2, _cx3;return /*#__PURE__*/(
+        _react.default.createElement(_MobilePopup.MobilePopup, {
+          opened: true,
+          headerChildComponent: /*#__PURE__*/
+          _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)] = 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(_DateInput.DateInput, {
+            withIcon: true,
+            value: endValue,
+            width: "auto",
+            size: "medium",
+            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() {return close();},
+          footerChildComponent: renderButtons() }, /*#__PURE__*/
 
-      };
+        _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _DateRangePickerTheme.getMobileDateRangePickerTheme)(theme) },
+        renderCalendar(theme, true)
+        )
+        ));};
 
-      var renderOptionalButtons = function renderOptionalButtons() {return /*#__PURE__*/(
-          _react.default.createElement(_react.default.Fragment, null,
-          focusField === 'start' && startOptional && /*#__PURE__*/
-          _react.default.createElement("div", { className: (0, _Emotion.cx)(_DateRangePicker.styles.buttonWrap()) }, /*#__PURE__*/
-          _react.default.createElement(_Button.Button, {
-            width: "100%",
-            "data-tid": DateRangePickerDataTids.startOptionalButton,
-            onClick: function onClick() {return setEmpty('start');} },
 
-          locale.withoutFirstDate
-          )
-          ),
+    var renderDesktopCalendar = function renderDesktopCalendar(theme) {return /*#__PURE__*/(
+        _react.default.createElement(_Popup.Popup, {
+          opened: true,
+          hasShadow: true,
+          priority: _ZIndex.ZIndex.priorities.PopupMenu,
+          positions: (0, _getMenuPositions.getMenuPositions)(props.menuPos, props.menuAlign),
+          "data-tid": DateRangePickerDataTids.root,
+          anchorElement: (0, _rootNode.getRootNode)(dateRangePickerRef.current),
+          margin: parseInt(theme.datePickerMenuOffsetY) }, /*#__PURE__*/
 
-          focusField === 'end' && endOptional && /*#__PURE__*/
-          _react.default.createElement("div", { className: (0, _Emotion.cx)(_DateRangePicker.styles.buttonWrap()) }, /*#__PURE__*/
-          _react.default.createElement(_Button.Button, { width: "100%", "data-tid": DateRangePickerDataTids.endOptionalButton, onClick: function onClick() {return setEmpty('end');} },
-          locale.withoutSecondDate
-          )
-          )
+        _react.default.createElement("div", {
+          className: _DateRangePicker.styles.calendarWrapper(theme),
+          onMouseDown: function onMouseDown(e) {return e.preventDefault();},
+          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 hasOptionalButtons ? renderOptionalButtons() : renderTodayLink();
+      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 renderNativeDateInput = function renderNativeDateInput() {return /*#__PURE__*/(
+    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 }
+          disabled: startDisabled,
+          ref: mobileNativeStartRef }
         ), /*#__PURE__*/
-        _react.default.createElement(DateRangePicker.Separator, null), /*#__PURE__*/
         _react.default.createElement(_NativeDateInput.NativeDateInput, {
           value: endValue,
           minDate: minDate,
           maxDate: maxDate,
           onValueChange: setEndValue,
-          disabled: endDisabled }
+          disabled: endDisabled,
+          ref: mobileNativeEndRef }
         )
         ));};
 
 
     return /*#__PURE__*/(
       _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null,
-      function (theme) {var _cx2, _cx3;return /*#__PURE__*/(
+      function (theme) {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, ref: dateRangePickerRef }, /*#__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.inputWrapper(),
+              _DateRangePicker.styles.root(theme),
               _DateRangePicker.styles.inputWrapperWidth(theme), (0,
-              _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n                        font-size: ", ";\n                      "])),
+              _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n                      font-size: ", ";\n                    "])),
               (0, _DateRangePicker.getFontSize)(theme, props.size))
 
-            ) },
-
-          props.children
-          ),
-
-          props.useMobileNativeDatePicker && isMobile ?
-          renderNativeDateInput() :
-          !isCurrentFocusFieldDisabled &&
-          showCalendar && /*#__PURE__*/
-          _react.default.createElement(_react.default.Fragment, null,
-          isMobile ? /*#__PURE__*/
-          _react.default.createElement(_MobilePopup.MobilePopup, {
-            opened: true,
-            headerChildComponent: /*#__PURE__*/
-            _react.default.createElement("div", { className: (0, _Emotion.cx)(_DateRangePicker.styles.inputWrapper(), _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)] = focusField === 'start', _cx2)),
-              disabled: startDisabled,
-              onValueChange: setStartValue,
-              "data-tid": DateRangePickerDataTids.mobileStart }
-            ), /*#__PURE__*/
-            _react.default.createElement(DateRangePicker.Separator, null), /*#__PURE__*/
-            _react.default.createElement(_DateInput.DateInput, {
-              withIcon: true,
-              value: endValue,
-              width: "auto",
-              size: "medium",
-              className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_DateRangePicker.styles.inputVisuallyFocus(theme)] = focusField === 'end', _cx3)),
-              disabled: endDisabled,
-              onValueChange: setEndValue,
-              "data-tid": DateRangePickerDataTids.mobileEnd }
-            )
             ),
-
-            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__*/
-          _react.default.createElement(_Popup.Popup, {
-            opened: true,
-            hasShadow: true,
-            priority: _ZIndex.ZIndex.priorities.PopupMenu,
-            positions: (0, _getMenuPositions.getMenuPositions)(props.menuPos, props.menuAlign),
+            role: "group",
+            "aria-describedby": props['aria-describedby'],
+            "aria-label": props['aria-label'],
+            "aria-labelledby": props['aria-labelledby'],
             "data-tid": DateRangePickerDataTids.root,
-            anchorElement: (0, _rootNode.getRootNode)(dateRangePickerRef.current),
-            margin: parseInt(theme.datePickerMenuOffsetY) }, /*#__PURE__*/
+            ref: dateRangePickerRef,
+            style: { width: props.width } },
 
-          _react.default.createElement("div", { className: _DateRangePicker.styles.calendarWrapper(theme), onMouseDown: function onMouseDown(e) {return e.preventDefault();} },
-          renderCalendar(theme),
-          renderButtons()
-          )
-          )
-          )
-
-          )
+          props.children,
 
+          props.useMobileNativeDatePicker && isMobile ?
+          renderMobileNativeDateInput() :
+          isCalendarOpen && (isMobile ? renderMobileCalendar(theme) : renderDesktopCalendar(theme))
           )
           )
           )
@@ -385,11 +424,26 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
       ));
 
 
+    // 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 _cx4;
+    {var _extends2, _cx4;
       var day = props.date;
 
       var isDayFirst = startValue === day;
@@ -400,8 +454,8 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
       var isDayInHoveredPeriod =
       hasHoveredDay &&
       Boolean(
-        focusField === 'start' && endValue && (0, _comparison.isBetween)(day, hoveredDay, endValue) ||
-        focusField === 'end' && startValue && (0, _comparison.isBetween)(day, startValue, hoveredDay)
+        focusInput === 'start' && endValue && (0, _comparison.isBetween)(day, hoveredDay, endValue) ||
+        focusInput === 'end' && startValue && (0, _comparison.isBetween)(day, startValue, hoveredDay)
       );
 
       var hasLeftRoundings;
@@ -411,11 +465,11 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
         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) || focusField === 'end')) {
+        if (isDayFirst && ((0, _comparison.isGreaterOrEqual)(hoveredDay, startValue) || focusInput === 'end')) {
           hasLeftRoundings = true;
         }
 
-        if (isDayLast && ((0, _comparison.isLessOrEqual)(hoveredDay, endValue) || focusField === 'start')) {
+        if (isDayLast && ((0, _comparison.isLessOrEqual)(hoveredDay, endValue) || focusInput === 'start')) {
           hasRightRoundings = true;
         }
 
@@ -439,10 +493,20 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
         }
       }
 
+      var renderDayProps = (0, _extends3.default)({},
+      props, (_extends2 = {}, _extends2[
+      DayDateAttribute] = props.date, _extends2));
+
+
+      var dataTid = null;
+      if (isDayFirst) {
+        dataTid = DateRangePickerDataTids.rangeStart;
+      } else if (isDayLast) {
+        dataTid = DateRangePickerDataTids.rangeEnd;
+      }
+
       return /*#__PURE__*/(
         _react.default.createElement("div", {
-          onMouseOver: function onMouseOver() {return setHoveredDay(day);},
-          onMouseOut: function onMouseOut() {return setHoveredDay(null);},
           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            "])),
@@ -457,9 +521,10 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
             _DateRangePicker.styles.rangeCalendarDayHoverInPeriod(t)] = isDayInPeriod, _cx4[
             _DateRangePicker.styles.rangeCalendarDayInHoveredPeriod(t)] = isDayInHoveredPeriod, _cx4)
 
-          ) },
+          ),
+          "data-tid": dataTid },
 
-        renderDayFn ? renderDayFn(props) : /*#__PURE__*/_react.default.createElement(_Calendar.CalendarDay, props)
+        renderDayFn ? renderDayFn(renderDayProps) : /*#__PURE__*/_react.default.createElement(_Calendar.CalendarDay, renderDayProps)
         ));
 
     }