@skbkontur/react-ui 0.0.0-a8b895b5e7 → 0.0.0-aa4659ca48

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 _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");
 var _comparison = require("../../lib/date/comparison");
 
 var _ZIndex = require("../../internal/ZIndex");
@@ -21,37 +23,36 @@ 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 _DateRangePickerContext = require("./DateRangePickerContext");
 
+var _DateRangePickerInput = require("./DateRangePickerInput");
 var _DateRangePickerTheme = require("./DateRangePickerTheme");
-var _locale = require("./locale");
-var _dateRangePickerValidate = require("./dateRangePickerValidate");var _templateObject, _templateObject2;
+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';
 
 
 
@@ -84,34 +85,64 @@ 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: _dateRangePickerValidate.dateRangePickerValidate
+    validate: _validateDateRangePicker.validateDateRangePicker
   },
   (0, _forwardRefAndName.forwardRefAndName)('DateRangePicker', function (props, ref) {
     var _useResponsiveLayout = (0, _ResponsiveLayout.useResponsiveLayout)(),isMobile = _useResponsiveLayout.isMobile;
-    var locale = (0, _useLocaleForControl.useLocaleForControl)('DateRangePicker', _locale.DatePickerLocaleHelper);
+    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 _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),focusField = _useState3[0],setFocusField = _useState3[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 calendarRef = (0, _react.useRef)(null);
-    var calendarContainerRef = (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);
 
-    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]);};
+      setStartValue(updatedState.start);
+      setEndValue(updatedState.end);
+
+      if (updatedState.isOpen && updatedState.focus) {
+        focus(updatedState.focus);
+      }
+
+      if (!updatedState.isOpen) {
+        close();
+      }
+    };
 
-    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() {
@@ -119,31 +150,19 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
       setHoveredDay(null);
     };
 
-    var focus = function focus(fieldType) {if (fieldType === void 0) {fieldType = 'start';}
-      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();
-      });
-    };
-
-    var blur = function blur() {var _startRef$current, _endRef$current;
-      close();
-      (_startRef$current = startRef.current) == null || _startRef$current.blur();
-      (_endRef$current = endRef.current) == null || _endRef$current.blur();
-      setFocusField(null);
+    var focus = function focus(inputType) {if (inputType === void 0) {inputType = 'start';}
+      setFocusInput(inputType);
     };
 
     var setEmpty = function setEmpty(type) {
       switch (type) {
         case 'start':
-          setStart('');
+          setStartValue('');
           focus('end');
           break;
 
         case 'end':
-          setEnd('');
+          setEndValue('');
           close();
           break;
       }
@@ -151,30 +170,69 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
 
     (0, _react.useImperativeHandle)(
       ref,
-      function () {return {
-          focus: focus,
-          blur: blur,
+      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 = {
-      start: start,
-      end: end,
-      minDate: props.minDate,
-      maxDate: props.maxDate,
+      startValue: startValue,
+      startOptional: startOptional,
+      startDisabled: startDisabled,
+      endValue: endValue,
+      endOptional: endOptional,
+      endDisabled: endDisabled,
+      minDate: minDate,
+      maxDate: 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,
-      setFocusField: setFocusField,
+      setStartValue: setStartValue,
+      setStartOptional: setStartOptional,
+      setStartDisabled: setStartDisabled,
+      setEndValue: setEndValue,
+      setEndOptional: setEndOptional,
+      setEndDisabled: setEndDisabled,
+      setMinDate: setMinDate,
+      setMaxDate: setMaxDate,
+      setFocusInput: setFocusInput,
       open: open,
       close: close,
       dateRangePickerRef: dateRangePickerRef,
@@ -183,176 +241,204 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
     };
 
     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: null,
-          minDate: props.minDate,
-          maxDate: props.maxDate,
-          renderDay: function renderDay(dayProps) {return renderRange(dayProps, theme, props.renderDay);},
-          onValueChange: function onValueChange(value) {return updateRange(value);},
+          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,
-          "data-tid": DateRangePickerDataTids.calendar,
           onMonthChange: props.onMonthChange,
           className: (0, _Emotion.cx)((_cx = {}, _cx[_DateRangePicker.styles.calendarWidthAuto()] = 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 });
+    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 }
+          )
+          ),
 
-        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) },
+          onCloseRequest: function onCloseRequest() {return close();},
+          footerChildComponent: renderButtons() }, /*#__PURE__*/
 
-          locale.today
-          )
-          ));
+        _react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: (0, _DateRangePickerTheme.getMobileDateRangePickerTheme)(theme) },
+        renderCalendar(theme, true)
+        )
+        ));};
 
 
-      };
+    var getAnchorElement = function getAnchorElement() {
+      var menuAnchorElement = props.menuAnchorElement;
+      if (menuAnchorElement === 'focused') {
+        return (0, _rootNode.getRootNode)(focusInput === 'start' ? startRef.current : endRef.current);
+      }
 
-      var renderOptionalButtons = function renderOptionalButtons() {var _props$optional, _props$optional2;return /*#__PURE__*/(
-          _react.default.createElement(_react.default.Fragment, null,
-          focusField === '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 setEmpty('start');} },
+      if ( /*#__PURE__*/_react.default.isValidElement(menuAnchorElement)) {
+        return menuAnchorElement;
+      }
 
-          locale.withoutFirstDate
-          )
-          ),
+      if (menuAnchorElement && typeof menuAnchorElement === 'object' && 'current' in menuAnchorElement) {
+        return (0, _rootNode.getRootNode)(menuAnchorElement.current);
+      }
 
-          focusField === '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 setEmpty('end');} },
+      return (0, _rootNode.getRootNode)(startRef.current) || (0, _rootNode.getRootNode)(endRef.current) || (0, _rootNode.getRootNode)(dateRangePickerRef.current);
+    };
+
+    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: getAnchorElement(),
+          margin: parseInt(theme.datePickerMenuOffsetY) }, /*#__PURE__*/
+
+        _react.default.createElement("div", {
+          className: _DateRangePicker.styles.calendarWrapper(theme),
+          onMouseDown: function onMouseDown(e) {return e.preventDefault();},
+          onMouseMove: handleCalendarRangeMouseMove },
+
+        renderCalendar(theme),
+        renderButtons()
+        )
+        ));};
 
-          locale.withoutSecondDate
-          )
-          )
 
-          ));};
+    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 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__*/(
+    var renderMobileNativeDateInput = function renderMobileNativeDateInput() {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] }
+          value: startValue,
+          minDate: minDate,
+          maxDate: maxDate,
+          onValueChange: setStartValue,
+          disabled: startDisabled,
+          ref: mobileNativeStartRef }
         ), /*#__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] }
+          value: endValue,
+          minDate: minDate,
+          maxDate: maxDate,
+          onValueChange: setEndValue,
+          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,
-            onMouseEnter: props.onMouseEnter,
-            onMouseLeave: props.onMouseLeave,
-            onMouseOver: props.onMouseOver,
-            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() :
-          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: _DateRangePicker.styles.inputWrapper(), style: { width: '100%' } }, /*#__PURE__*/
-            _react.default.createElement(DateRangePicker.Start, {
-              width: "auto",
-              size: "medium",
-              className: (0, _Emotion.cx)((_cx2 = {}, _cx2[_DateRangePicker.styles.inputVisuallyFocus(theme)] = focusField === 'start', _cx2)) }
-            ), /*#__PURE__*/
-            _react.default.createElement(DateRangePicker.Separator, null), /*#__PURE__*/
-            _react.default.createElement(DateRangePicker.End, {
-              width: "auto",
-              size: "medium",
-              className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_DateRangePicker.styles.inputVisuallyFocus(theme)] = focusField === 'end', _cx3)) }
-            )
             ),
-
-            onCloseRequest: function onCloseRequest() {
-              close();
-              props.onBlur == null || props.onBlur();
-            },
-            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__*/
-
-          _react.default.createElement("div", {
-            className: _DateRangePicker.styles.calendarWrapper(theme),
-            onMouseDown: function onMouseDown(e) {return e.preventDefault();},
-            ref: calendarContainerRef },
-
-          renderCalendar(theme),
-          renderButtons()
-          )
-          )
-          )
+            ref: dateRangePickerRef,
+            style: { width: props.width } },
 
-          )
+          props.children,
 
+          props.useMobileNativeDatePicker && isMobile ?
+          renderMobileNativeDateInput() :
+          isCalendarOpen && (isMobile ? renderMobileCalendar(theme) : renderDesktopCalendar(theme))
           )
           )
           )
@@ -361,116 +447,52 @@ var DateRangePicker = exports.DateRangePicker = Object.assign(
       ));
 
 
-    function updateRange(date) {
-      if (props.minDate && (0, _comparison.isLess)(date, props.minDate) || props.maxDate && (0, _comparison.isGreater)(date, props.maxDate)) {
+    // Use parent mousemove event instead each CalendarDay's mouseenter / mouseover
+    function handleCalendarRangeMouseMove(e) {
+      if (!startValue && !endValue) {
         return;
       }
 
-      var handleInitialPeriod = function handleInitialPeriod(date) {
-        if (focusField === 'start') {
-          setStart(date);
-          focus('end');
-        } else {
-          setEnd(date);
-          focus('start');
-        }
-      };
-
-      var handlePartialPeriod = function handlePartialPeriod(date) {
-        if (focusField === 'start') {
-          if (start) {
-            setStart(date);
-            focus('end');
-            return;
-          }
-
-          if (end && (0, _comparison.isGreater)(date, end)) {
-            setValue([date, '']);
-            focus('end');
-            return;
-          }
-
-          setStart(date);
-          close();
-        } else if (focusField === 'end') {
-          if (end) {
-            setEnd(date);
-            focus('start');
-            return;
-          }
-
-          if (start && (0, _comparison.isLess)(date, start)) {
-            setValue([date, '']);
-            focus('end');
-            return;
-          }
-
-          setEnd(date);
-          close();
-        }
-      };
-
-      var handleFullPeriod = function handleFullPeriod(date) {
-        if (focusField === 'start') {
-          if (end && (0, _comparison.isLessOrEqual)(date, end)) {
-            setStart(date);
-            close();
-          } else {
-            setValue([date, '']);
-            focus('end');
-          }
-        } else if (focusField === 'end') {
-          if (start && (0, _comparison.isGreaterOrEqual)(date, start)) {
-            setEnd(date);
-            close();
-          } else {
-            setValue([date, '']);
-            focus('end');
-          }
-        }
-      };
-
-      if (!start && !end) {
-        handleInitialPeriod(date);
-      } else if (start && !end || !start && end) {
-        handlePartialPeriod(date);
-      } else {
-        handleFullPeriod(date);
+      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 renderRange(
+    function renderCalendarRange(
     props,
     t,
     renderDayFn)
-    {var _cx4;
+    {var _extends2, _cx4;
       var day = props.date;
 
-      var isDayFirst = start === day;
-      var isDayLast = end === day;
-      var isDayInPeriod = Boolean(start && end && (0, _comparison.isBetween)(day, start, end));
+      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(
-        focusField === 'start' && end && (0, _comparison.isBetween)(day, hoveredDay, end) ||
-        focusField === 'end' && start && (0, _comparison.isBetween)(day, start, hoveredDay)
+        focusInput === 'start' && endValue && (0, _comparison.isBetween)(day, hoveredDay, endValue) ||
+        focusInput === 'end' && startValue && (0, _comparison.isBetween)(day, startValue, hoveredDay)
       );
 
       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;
+        var isDayBeforeFirstInPeriod = startValue ? (0, _comparison.isLess)(hoveredDay, startValue) : endValue;
+        var isDayAfterLastInPeriod = endValue ? (0, _comparison.isGreater)(hoveredDay, endValue) : startValue;
 
-        if (isDayFirst && ((0, _comparison.isGreaterOrEqual)(hoveredDay, start) || focusField === 'end')) {
+        if (isDayFirst && ((0, _comparison.isGreaterOrEqual)(hoveredDay, startValue) || focusInput === 'end')) {
           hasLeftRoundings = true;
         }
 
-        if (isDayLast && ((0, _comparison.isLessOrEqual)(hoveredDay, end) || focusField === 'start')) {
+        if (isDayLast && ((0, _comparison.isLessOrEqual)(hoveredDay, endValue) || focusInput === 'start')) {
           hasRightRoundings = true;
         }
 
@@ -494,10 +516,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            "])),
@@ -512,21 +544,12 @@ 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)
         ));
 
     }
-
-    function scrollToMonth(fieldType) {
-      var date = fieldType === '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);
-        }
-      }
-    }
   })
 );