@synerise/ds-date-range-picker 1.6.11 → 1.6.12

package/dist/RangePicker/RangePicker.js

@@ -1,37 +1,57 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
-function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
-import fnsIsSameDay from 'date-fns/isSameDay';
-import fnsIsValid from 'date-fns/isValid';
-import React, { PureComponent } from 'react';
-import { DateUtils } from 'react-day-picker';
-import { legacyParse } from '@date-fns/upgrade/v2';
-import { getDefaultDataTimeOptions, withDataFormat } from '@synerise/ds-core';
-import DayPicker from '@synerise/ds-date-picker/dist/Elements/DayPicker/DayPicker';
-import { DayBackground, DayForeground, DayText, DayTooltip } from '@synerise/ds-date-picker/dist/Elements/DayPicker/DayPicker.styles';
-import MonthPicker from '@synerise/ds-date-picker/dist/Elements/MonthPicker/MonthPicker';
-import TimePicker from '@synerise/ds-date-picker/dist/Elements/TimePicker/TimePicker';
-import YearPicker from '@synerise/ds-date-picker/dist/Elements/YearPicker/YearPicker';
-import { fnsDifferenceInYears } from '@synerise/ds-date-picker/dist/fns';
-import fnsFormat from '@synerise/ds-date-picker/dist/format';
-import localeUtils from '@synerise/ds-date-picker/dist/localeUtils';
-import Icon, { CalendarM, ClockM } from '@synerise/ds-icon';
-import { Range } from '../RelativeRangePicker/RelativeRangePicker.styles';
-import { ABSOLUTE, COLUMNS, MODES } from '../constants';
-import ADD from '../dateUtils/add';
-import getDateFromString from '../dateUtils/getDateFromString';
-import { fnsAddDays, fnsAddMinutes, fnsEndOfDay, fnsIsAfter, fnsIsSameMonth, fnsStartOfDay } from '../fns';
-import * as S from './RangePicker.styles';
-import { getDisabledTimeOptions, getModifiers, getSidesState } from './utils';
-var NOOP = function NOOP() {};
-var TOOLTIP_FORMAT = 'MMM d, yyyy, HH:mm';
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import fnsIsSameDay from "date-fns/isSameDay";
+import fnsIsValid from "date-fns/isValid";
+import { PureComponent } from "react";
+import { DateUtils } from "react-day-picker";
+import { legacyParse } from "@date-fns/upgrade/v2";
+import { withDataFormat, getDefaultDataTimeOptions } from "@synerise/ds-core";
+import DayPicker from "@synerise/ds-date-picker/dist/Elements/DayPicker/DayPicker";
+import { DayBackground, DayText, DayTooltip, DayForeground } from "@synerise/ds-date-picker/dist/Elements/DayPicker/DayPicker.styles";
+import MonthPicker from "@synerise/ds-date-picker/dist/Elements/MonthPicker/MonthPicker";
+import TimePicker from "@synerise/ds-date-picker/dist/Elements/TimePicker/TimePicker";
+import YearPicker from "@synerise/ds-date-picker/dist/Elements/YearPicker/YearPicker";
+import { fnsDifferenceInYears } from "@synerise/ds-date-picker/dist/fns";
+import fnsFormat from "@synerise/ds-date-picker/dist/format";
+import localeUtils from "@synerise/ds-date-picker/dist/localeUtils";
+import Icon, { CalendarM, ClockM } from "@synerise/ds-icon";
+import { Range } from "../RelativeRangePicker/RelativeRangePicker.styles.js";
+import { ABSOLUTE, COLUMNS, MODES } from "../constants.js";
+import ADD from "../dateUtils/add.js";
+import getDateFromString from "../dateUtils/getDateFromString.js";
+import fnsAddDays from "date-fns/addDays";
+import "date-fns/addHours";
+import fnsAddMinutes from "date-fns/addMinutes";
+import "date-fns/addMonths";
+import "date-fns/addSeconds";
+import "date-fns/addWeeks";
+import "date-fns/addYears";
+import fnsEndOfDay from "date-fns/endOfDay";
+import "date-fns/endOfMonth";
+import "date-fns/format";
+import "date-fns/getYear";
+import fnsIsAfter from "date-fns/isAfter";
+import "date-fns/isBefore";
+import fnsIsSameMonth from "date-fns/isSameMonth";
+import "date-fns/isSameYear";
+import "date-fns/setDate";
+import "date-fns/setMonth";
+import "date-fns/setYear";
+import fnsStartOfDay from "date-fns/startOfDay";
+import "date-fns/startOfMonth";
+import { Sides, Side, PickerFooter, FooterSeparator, DateTimeModeSwitch } from "./RangePicker.styles.js";
+import { getModifiers, getDisabledTimeOptions, getSidesState } from "./utils.js";
+const NOOP = () => {
+};
+const TOOLTIP_FORMAT = "MMM d, yyyy, HH:mm";
 function replaceRange(value, day) {
-  var from = value.from,
-    to = value.to;
-  if (from && typeof from === 'object') {
+  let {
+    from,
+    to
+  } = value;
+  if (from && typeof from === "object") {
     from = new Date(from.getTime());
   }
-  if (to && typeof to === 'object') {
+  if (to && typeof to === "object") {
     to = new Date(to.getTime());
   }
   if (!from) {
@@ -53,387 +73,388 @@ function replaceRange(value, day) {
     }
   }
   return {
-    from: from,
-    to: to
+    from,
+    to
   };
 }
-var RangePicker = /*#__PURE__*/function (_PureComponent) {
-  function RangePicker(props) {
-    var _this;
-    _this = _PureComponent.call(this, props) || this;
-    // eslint-disable-next-line react/state-in-constructor
-    _this.componentDidUpdate = NOOP;
-    _this.handleDayMouseEnter = function (day) {
-      _this.setState({
+class RangePicker extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.componentDidUpdate = NOOP;
+    this.handleDayMouseEnter = (day) => {
+      this.setState({
         enteredTo: day
       });
     };
-    _this.handleDayMouseLeave = function () {
-      _this.setState({
+    this.handleDayMouseLeave = () => {
+      this.setState({
         enteredTo: null
       });
     };
-    _this.handleDayClick = function (day, modifiers, e) {
+    this.handleDayClick = (day, modifiers, e) => {
       e.preventDefault();
-      var _this$props = _this.props,
-        value = _this$props.value,
-        onChange = _this$props.onChange;
+      const {
+        value,
+        onChange
+      } = this.props;
       if (modifiers.disabled) {
         return;
       }
-      var _replaceRange = replaceRange(value, day),
-        from = _replaceRange.from,
-        to = _replaceRange.to;
+      let {
+        from,
+        to
+      } = replaceRange(value, day);
       from = from ? fnsStartOfDay(from) : from;
       to = to ? fnsEndOfDay(to) : to;
       onChange && onChange({
         type: ABSOLUTE,
-        from: from,
-        to: to
+        from,
+        to
       });
     };
-    _this.handleFromTimeChange = function (from) {
-      var _this$props2 = _this.props,
-        onChange = _this$props2.onChange,
-        value = _this$props2.value;
+    this.handleFromTimeChange = (from) => {
+      const {
+        onChange,
+        value
+      } = this.props;
       onChange({
         type: ABSOLUTE,
-        from: from,
+        from,
         to: value.to
       });
     };
-    _this.handleToTimeChange = function (to) {
-      var _this$props3 = _this.props,
-        onChange = _this$props3.onChange,
-        value = _this$props3.value;
+    this.handleToTimeChange = (to) => {
+      const {
+        onChange,
+        value
+      } = this.props;
       onChange({
         type: ABSOLUTE,
         from: value.from,
-        to: to
+        to
       });
     };
-    _this.handleAddDay = function (numberOfDays, side) {
+    this.handleAddDay = (numberOfDays, side) => {
       if (side === COLUMNS.LEFT) {
-        var _this$props4 = _this.props,
-          onChange = _this$props4.onChange,
-          value = _this$props4.value;
-        onChange(_extends({}, value, {
+        const {
+          onChange,
+          value
+        } = this.props;
+        onChange({
+          ...value,
           type: ABSOLUTE,
           from: fnsAddDays(legacyParse(value.from), numberOfDays)
-        }));
+        });
       }
       if (side === COLUMNS.RIGHT) {
-        var _this$props5 = _this.props,
-          _onChange = _this$props5.onChange,
-          _value = _this$props5.value;
-        _onChange(_extends({}, _value, {
+        const {
+          onChange,
+          value
+        } = this.props;
+        onChange({
+          ...value,
           type: ABSOLUTE,
-          to: fnsAddDays(legacyParse(_value.to), numberOfDays)
-        }));
+          to: fnsAddDays(legacyParse(value.to), numberOfDays)
+        });
       }
     };
-    _this.handleSideMonthChange = function (side, month, mode) {
-      var opposite = side === COLUMNS.LEFT ? COLUMNS.RIGHT : COLUMNS.LEFT;
-      var _this2 = _this,
-        state = _this2.state;
-      var forceAdjacentMonths = _this.props.forceAdjacentMonths;
+    this.handleSideMonthChange = (side, month, mode) => {
+      const opposite = side === COLUMNS.LEFT ? COLUMNS.RIGHT : COLUMNS.LEFT;
+      const {
+        state
+      } = this;
+      const {
+        forceAdjacentMonths
+      } = this.props;
       if (fnsIsSameMonth(month, legacyParse(state[opposite].month))) {
-        var dir = fnsIsAfter(month, legacyParse(state[side].month)) ? 1 : -1;
-        var adjacentMonth = ADD.MONTHS(month, dir);
-        _this.setState(function (prevState) {
-          var _extends2;
-          return _extends({}, prevState, (_extends2 = {}, _extends2[side] = _extends({}, state[side], {
-            adjacentMonth: adjacentMonth,
-            mode: mode
-          }), _extends2));
-        });
+        const dir = fnsIsAfter(month, legacyParse(state[side].month)) ? 1 : -1;
+        const adjacentMonth = ADD.MONTHS(month, dir);
+        this.setState((prevState) => ({
+          ...prevState,
+          [side]: {
+            ...state[side],
+            adjacentMonth,
+            mode
+          }
+        }));
         return;
       }
       if (forceAdjacentMonths) {
-        var _dir = side === COLUMNS.RIGHT ? -1 : 1;
-        _this.setState(function (prevState) {
-          var _extends3;
-          return _extends({}, prevState, (_extends3 = {}, _extends3[opposite] = _extends({}, state[opposite], {
-            month: ADD.MONTHS(month, _dir)
-          }), _extends3[side] = _extends({}, state[side], {
-            month: month,
-            mode: mode
-          }), _extends3));
-        });
+        const dir = side === COLUMNS.RIGHT ? -1 : 1;
+        this.setState((prevState) => ({
+          ...prevState,
+          [opposite]: {
+            ...state[opposite],
+            month: ADD.MONTHS(month, dir)
+          },
+          [side]: {
+            ...state[side],
+            month,
+            mode
+          }
+        }));
         return;
       }
-      _this.setState(function (prevState) {
-        var _extends4;
-        return _extends({}, prevState, (_extends4 = {}, _extends4[side] = _extends({}, state[side], {
-          month: month,
-          mode: mode
-        }), _extends4));
-      });
+      this.setState((prevState) => ({
+        ...prevState,
+        [side]: {
+          ...state[side],
+          month,
+          mode
+        }
+      }));
     };
-    _this.handleSideModeChange = function (side, mode) {
-      _this.setState(function (prevState) {
-        var _extends5;
-        return _extends({}, prevState, (_extends5 = {}, _extends5[side] = _extends({}, prevState[side], {
-          mode: mode
-        }), _extends5));
-      });
+    this.handleSideModeChange = (side, mode) => {
+      this.setState((prevState) => ({
+        ...prevState,
+        [side]: {
+          ...prevState[side],
+          mode
+        }
+      }));
     };
-    _this.renderDay = function (day) {
-      var text = day.getDate();
-      var _this$props6 = _this.props,
-        value = _this$props6.value,
-        intl = _this$props6.intl,
-        formatValue = _this$props6.formatValue;
-      var formatDate = function formatDate(date) {
-        if (typeof date === 'string') {
+    this.renderDay = (day) => {
+      const text = day.getDate();
+      const {
+        value,
+        intl,
+        formatValue
+      } = this.props;
+      const formatDate = (date) => {
+        if (typeof date === "string") {
           return fnsFormat(legacyParse(date), TOOLTIP_FORMAT, intl.locale);
         }
-        return formatValue(date, _extends({}, getDefaultDataTimeOptions(true)));
+        return formatValue(date, {
+          ...getDefaultDataTimeOptions(true)
+        });
       };
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DayBackground, {
-        className: "DayPicker-Day-BG"
-      }), /*#__PURE__*/React.createElement(DayText, {
-        className: "DayPicker-Day-Text",
-        "data-attr": text
-      }, value.to && value.from && /*#__PURE__*/React.createElement(DayTooltip, null, formatDate(value.from), " - ", formatDate(value.to)), text), /*#__PURE__*/React.createElement(DayForeground, {
-        className: "DayPicker-Day-FG"
-      }));
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(DayBackground, { className: "DayPicker-Day-BG" }),
+        /* @__PURE__ */ jsxs(DayText, { className: "DayPicker-Day-Text", "data-attr": text, children: [
+          value.to && value.from && /* @__PURE__ */ jsxs(DayTooltip, { children: [
+            formatDate(value.from),
+            " - ",
+            formatDate(value.to)
+          ] }),
+          text
+        ] }),
+        /* @__PURE__ */ jsx(DayForeground, { className: "DayPicker-Day-FG" })
+      ] });
     };
-    _this.renderYearPicker = function (side) {
-      var currentSide = _this.state[side];
-      var month = currentSide.month;
-      return /*#__PURE__*/React.createElement(YearPicker, {
-        key: "year_picker_" + side,
-        value: month instanceof Date ? month : new Date(month),
-        onChange: function onChange(m) {
-          return _this.handleSideMonthChange(side, m, 'date');
-        }
-      });
+    this.renderYearPicker = (side) => {
+      const {
+        [side]: currentSide
+      } = this.state;
+      const {
+        month
+      } = currentSide;
+      return /* @__PURE__ */ jsx(YearPicker, { value: month instanceof Date ? month : new Date(month), onChange: (m) => this.handleSideMonthChange(side, m, "date") }, `year_picker_${side}`);
     };
-    _this.renderMonthPicker = function (side) {
-      var opposite = side === COLUMNS.LEFT ? COLUMNS.RIGHT : COLUMNS.LEFT;
-      var _this$state = _this.state,
-        currentSide = _this$state[side],
-        oppositeSide = _this$state[opposite];
-      var oppositeMonth = legacyParse(oppositeSide.month);
-      return /*#__PURE__*/React.createElement(MonthPicker, {
-        key: "month_picker_" + opposite,
-        max: side === COLUMNS.LEFT ? ADD.MONTHS(oppositeMonth, -1) : undefined,
-        min: side === COLUMNS.RIGHT ? ADD.MONTHS(oppositeMonth, 1) : undefined,
-        value: currentSide.month instanceof Date ? currentSide.month : new Date(currentSide.month),
-        onChange: function onChange(month) {
-          return _this.handleSideMonthChange(side, month, 'date');
-        }
-      });
+    this.renderMonthPicker = (side) => {
+      const opposite = side === COLUMNS.LEFT ? COLUMNS.RIGHT : COLUMNS.LEFT;
+      const {
+        [side]: currentSide,
+        [opposite]: oppositeSide
+      } = this.state;
+      const oppositeMonth = legacyParse(oppositeSide.month);
+      return /* @__PURE__ */ jsx(MonthPicker, { max: side === COLUMNS.LEFT ? ADD.MONTHS(oppositeMonth, -1) : void 0, min: side === COLUMNS.RIGHT ? ADD.MONTHS(oppositeMonth, 1) : void 0, value: currentSide.month instanceof Date ? currentSide.month : new Date(currentSide.month), onChange: (month) => this.handleSideMonthChange(side, month, "date") }, `month_picker_${opposite}`);
     };
-    _this.renderDatePicker = function (side) {
-      var _this$props7 = _this.props,
-        value = _this$props7.value,
-        disabledDate = _this$props7.disabledDate,
-        forceAdjacentMonths = _this$props7.forceAdjacentMonths;
-      var _this$state2 = _this.state,
-        enteredTo = _this$state2.enteredTo,
-        left = _this$state2.left,
-        right = _this$state2.right,
-        sideState = _this$state2[side];
-      var from = value.from,
-        to = value.to,
-        type = value.type;
-      var modifiers = getModifiers(fnsIsValid(from) ? from : null, fnsIsValid(to) ? to : null, enteredTo);
-      var selectedDays = fnsIsValid(from) && fnsIsValid(to) ? [from, {
-        from: from,
-        to: to
-      }] : [undefined, {
-        from: undefined,
-        to: undefined
+    this.renderDatePicker = (side) => {
+      const {
+        value,
+        disabledDate,
+        forceAdjacentMonths
+      } = this.props;
+      const {
+        enteredTo,
+        left,
+        right,
+        [side]: sideState
+      } = this.state;
+      const {
+        from,
+        to,
+        type
+      } = value;
+      const modifiers = getModifiers(fnsIsValid(from) ? from : null, fnsIsValid(to) ? to : null, enteredTo);
+      const selectedDays = fnsIsValid(from) && fnsIsValid(to) ? [from, {
+        from,
+        to
+      }] : [void 0, {
+        from: void 0,
+        to: void 0
       }];
-      var parsedLeft = legacyParse(left.month);
-      var parsedRight = legacyParse(right.month);
-      var adjacentMonths = forceAdjacentMonths || fnsIsSameMonth(ADD.MONTHS(parsedLeft, 1), parsedRight);
-      var adjacentYears = forceAdjacentMonths || fnsDifferenceInYears(ADD.MONTHS(parsedLeft, 1), parsedRight) === 0;
-      return /*#__PURE__*/React.createElement(DayPicker, {
-        key: "day_picker_" + side,
-        className: type.toLowerCase(),
-        canChangeMonth: false,
-        disabledDays: disabledDate,
-        localeUtils: localeUtils,
-        month: getDateFromString(sideState.month),
-        title: sideState.monthTitle,
-        hideLongNext: side === COLUMNS.LEFT && adjacentYears,
-        hideShortNext: side === COLUMNS.LEFT && adjacentMonths,
-        hideLongPrev: side === COLUMNS.RIGHT && adjacentYears,
-        hideShortPrev: side === COLUMNS.RIGHT && adjacentMonths,
-        renderDay: _this.renderDay,
-        onDayMouseEnter: _this.handleDayMouseEnter,
-        onDayMouseLeave: _this.handleDayMouseLeave,
-        onMonthNameClick: function onMonthNameClick() {
-          return _this.handleSideModeChange(side, 'month');
-        },
-        onYearNameClick: function onYearNameClick() {
-          return _this.handleSideModeChange(side, 'year');
-        },
-        onMonthChange: function onMonthChange(month) {
-          return _this.handleSideMonthChange(side, month, 'date');
+      const parsedLeft = legacyParse(left.month);
+      const parsedRight = legacyParse(right.month);
+      const adjacentMonths = forceAdjacentMonths || fnsIsSameMonth(ADD.MONTHS(parsedLeft, 1), parsedRight);
+      const adjacentYears = forceAdjacentMonths || fnsDifferenceInYears(ADD.MONTHS(parsedLeft, 1), parsedRight) === 0;
+      return /* @__PURE__ */ jsx(
+        DayPicker,
+        {
+          className: type.toLowerCase(),
+          canChangeMonth: false,
+          disabledDays: disabledDate,
+          localeUtils,
+          month: getDateFromString(sideState.month),
+          title: sideState.monthTitle,
+          hideLongNext: side === COLUMNS.LEFT && adjacentYears,
+          hideShortNext: side === COLUMNS.LEFT && adjacentMonths,
+          hideLongPrev: side === COLUMNS.RIGHT && adjacentYears,
+          hideShortPrev: side === COLUMNS.RIGHT && adjacentMonths,
+          renderDay: this.renderDay,
+          onDayMouseEnter: this.handleDayMouseEnter,
+          onDayMouseLeave: this.handleDayMouseLeave,
+          onMonthNameClick: () => this.handleSideModeChange(side, "month"),
+          onYearNameClick: () => this.handleSideModeChange(side, "year"),
+          onMonthChange: (month) => this.handleSideMonthChange(side, month, "date"),
+          fixedWeeks: true,
+          showOutsideDay: true,
+          modifiers,
+          onDayClick: this.handleDayClick,
+          selectedDays
         },
-        fixedWeeks: true,
-        showOutsideDay: true,
-        modifiers: modifiers
-        // @ts-ignore
-        ,
-        onDayClick: _this.handleDayClick
-        // @ts-ignore
-        ,
-        selectedDays: selectedDays
-      });
+        `day_picker_${side}`
+      );
     };
-    _this.renderTimePicker = function (side) {
-      var _this$props8 = _this.props,
-        value = _this$props8.value,
-        is12HoursClock = _this$props8.is12HoursClock;
-      var from = value.from,
-        to = value.to;
+    this.renderTimePicker = (side) => {
+      const {
+        value,
+        is12HoursClock
+      } = this.props;
+      const {
+        from,
+        to
+      } = value;
       if (!from || !to) {
         return null;
       }
-      var sidesAreAdjacent = fnsIsSameDay(legacyParse(from), legacyParse(to));
+      const sidesAreAdjacent = fnsIsSameDay(legacyParse(from), legacyParse(to));
       switch (side) {
-        case COLUMNS.LEFT:
-          {
-            return /*#__PURE__*/React.createElement(TimePicker, {
-              key: "time-picker-" + side,
-              value: getDateFromString(from),
-              onChange: _this.handleFromTimeChange,
-              disabledHours: getDisabledTimeOptions(from, 'HOURS', null, to, is12HoursClock),
-              disabledMinutes: getDisabledTimeOptions(from, 'MINUTES', null, to, is12HoursClock),
-              disabledSeconds: getDisabledTimeOptions(from, 'SECONDS', null, to, is12HoursClock),
-              onShortNext: sidesAreAdjacent ? undefined : function () {
-                _this.handleAddDay(1, COLUMNS.LEFT);
-              },
-              onShortPrev: function onShortPrev() {
-                _this.handleAddDay(-1, COLUMNS.LEFT);
-              }
-            });
-          }
-        case COLUMNS.RIGHT:
-          {
-            return /*#__PURE__*/React.createElement(TimePicker, {
-              key: "time-picker-" + side,
-              value: getDateFromString(to),
-              onChange: _this.handleToTimeChange,
-              disabledHours: getDisabledTimeOptions(to, 'HOURS', from, null, is12HoursClock),
-              disabledMinutes: getDisabledTimeOptions(to, 'MINUTES', from, null, is12HoursClock),
-              disabledSeconds: getDisabledTimeOptions(to, 'SECONDS', from, null, is12HoursClock),
-              onShortNext: function onShortNext() {
-                _this.handleAddDay(1, COLUMNS.RIGHT);
-              },
-              onShortPrev: sidesAreAdjacent ? undefined : function () {
-                _this.handleAddDay(-1, COLUMNS.RIGHT);
-              }
-            });
-          }
+        case COLUMNS.LEFT: {
+          return /* @__PURE__ */ jsx(TimePicker, { value: getDateFromString(from), onChange: this.handleFromTimeChange, disabledHours: getDisabledTimeOptions(from, "HOURS", null, to, is12HoursClock), disabledMinutes: getDisabledTimeOptions(from, "MINUTES", null, to, is12HoursClock), disabledSeconds: getDisabledTimeOptions(from, "SECONDS", null, to, is12HoursClock), onShortNext: sidesAreAdjacent ? void 0 : () => {
+            this.handleAddDay(1, COLUMNS.LEFT);
+          }, onShortPrev: () => {
+            this.handleAddDay(-1, COLUMNS.LEFT);
+          } }, `time-picker-${side}`);
+        }
+        case COLUMNS.RIGHT: {
+          return /* @__PURE__ */ jsx(TimePicker, { value: getDateFromString(to), onChange: this.handleToTimeChange, disabledHours: getDisabledTimeOptions(to, "HOURS", from, null, is12HoursClock), disabledMinutes: getDisabledTimeOptions(to, "MINUTES", from, null, is12HoursClock), disabledSeconds: getDisabledTimeOptions(to, "SECONDS", from, null, is12HoursClock), onShortNext: () => {
+            this.handleAddDay(1, COLUMNS.RIGHT);
+          }, onShortPrev: sidesAreAdjacent ? void 0 : () => {
+            this.handleAddDay(-1, COLUMNS.RIGHT);
+          } }, `time-picker-${side}`);
+        }
         default:
           return null;
       }
     };
-    _this.renderSide = function (side) {
-      var mode = _this.props.mode;
-      var sideState = _this.state[side];
+    this.renderSide = (side) => {
+      const {
+        mode
+      } = this.props;
+      const {
+        [side]: sideState
+      } = this.state;
       if (mode === MODES.TIME) {
-        return _this.renderTimePicker(side);
+        return this.renderTimePicker(side);
       }
       switch (sideState.mode) {
-        case 'date':
-          return _this.renderDatePicker(side);
-        case 'month':
-          return _this.renderMonthPicker(side);
-        case 'year':
-          return _this.renderYearPicker(side);
+        case "date":
+          return this.renderDatePicker(side);
+        case "month":
+          return this.renderMonthPicker(side);
+        case "year":
+          return this.renderYearPicker(side);
         default:
           return null;
       }
     };
-    _this.state = _extends({
-      enteredTo: null
-    }, getSidesState(props.value));
-    return _this;
+    this.state = {
+      enteredTo: null,
+      ...getSidesState(props.value)
+    };
   }
-  _inheritsLoose(RangePicker, _PureComponent);
-  var _proto = RangePicker.prototype;
-  _proto.getSnapshotBeforeUpdate = function getSnapshotBeforeUpdate(prevProps) {
-    var _prevProps$value, _prevProps$value2;
-    var _this$props9 = this.props,
-      value = _this$props9.value,
-      forceAdjacentMonths = _this$props9.forceAdjacentMonths,
-      startAlwaysOnTheLeft = _this$props9.startAlwaysOnTheLeft;
-    var _this$props$jumpToSta = this.props.jumpToStartAndEnd,
-      jumpToStartAndEnd = _this$props$jumpToSta === void 0 ? true : _this$props$jumpToSta;
-    var _this$state3 = this.state,
-      left = _this$state3.left,
-      right = _this$state3.right;
-    var toDateChanged = !!(value != null && value.to) && (value == null ? void 0 : value.to) !== (prevProps == null || (_prevProps$value = prevProps.value) == null ? void 0 : _prevProps$value.to);
-    var fromDateChanged = !!(value != null && value.from) && (value == null ? void 0 : value.from) !== (prevProps == null || (_prevProps$value2 = prevProps.value) == null ? void 0 : _prevProps$value2.from);
-    var startOnLeft = fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month));
-    var endOnLeft = fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month));
+  getSnapshotBeforeUpdate(prevProps) {
+    const {
+      value,
+      forceAdjacentMonths,
+      startAlwaysOnTheLeft
+    } = this.props;
+    const {
+      jumpToStartAndEnd = true
+    } = this.props;
+    const {
+      left,
+      right
+    } = this.state;
+    const toDateChanged = !!value?.to && value?.to !== prevProps?.value?.to;
+    const fromDateChanged = !!value?.from && value?.from !== prevProps?.value?.from;
+    const startOnLeft = fnsIsSameMonth(legacyParse(value.from), legacyParse(left.month));
+    const endOnLeft = fnsIsSameMonth(legacyParse(value.to), legacyParse(left.month));
     if (fromDateChanged && !endOnLeft || toDateChanged && !endOnLeft || forceAdjacentMonths !== prevProps.forceAdjacentMonths) {
       if (startAlwaysOnTheLeft) {
         this.setState(getSidesState(value, forceAdjacentMonths));
       }
     }
     if (jumpToStartAndEnd && (fromDateChanged || toDateChanged)) {
-      var startOnRight = fnsIsSameMonth(legacyParse(value.from), legacyParse(right.month));
-      var isStartVisible = startOnLeft || startOnRight;
+      const startOnRight = fnsIsSameMonth(legacyParse(value.from), legacyParse(right.month));
+      const isStartVisible = startOnLeft || startOnRight;
       if (!isStartVisible) {
         this.setState(getSidesState(value, forceAdjacentMonths));
         return null;
       }
-      var endOnRight = fnsIsSameMonth(legacyParse(value.to), legacyParse(right.month));
-      var isEndVisible = endOnLeft || endOnRight;
+      const endOnRight = fnsIsSameMonth(legacyParse(value.to), legacyParse(right.month));
+      const isEndVisible = endOnLeft || endOnRight;
       if (!isEndVisible) {
         this.setState(getSidesState(value, forceAdjacentMonths));
         return null;
       }
     }
     return null;
-  };
-  _proto.render = function render() {
-    var _this$props0 = this.props,
-      mode = _this$props0.mode,
-      onChange = _this$props0.onChange,
-      value = _this$props0.value,
-      canSwitchMode = _this$props0.canSwitchMode,
-      dateOnly = _this$props0.dateOnly,
-      onSwitchMode = _this$props0.onSwitchMode,
-      texts = _this$props0.texts;
-    var _this$props$showNowBu = this.props.showNowButton,
-      showNowButton = _this$props$showNowBu === void 0 ? true : _this$props$showNowBu;
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.Sides, null, /*#__PURE__*/React.createElement(S.Side, {
-      mode: mode
-    }, this.renderSide(COLUMNS.LEFT)), /*#__PURE__*/React.createElement(S.Side, {
-      mode: mode
-    }, this.renderSide(COLUMNS.RIGHT))), /*#__PURE__*/React.createElement(S.PickerFooter, null, showNowButton && /*#__PURE__*/React.createElement(Range, {
-      onClick: function onClick(_ref) {
-        var currentTarget = _ref.currentTarget;
-        var now = new Date();
-        var literallyNow = _extends({}, value, {
-          translationKey: 'now',
-          type: 'ABSOLUTE',
-          from: now,
-          to: fnsAddMinutes(now, 1)
-        });
-        onChange(literallyNow);
-        currentTarget.blur();
-      }
-    }, texts.now), /*#__PURE__*/React.createElement(S.FooterSeparator, null), !dateOnly && /*#__PURE__*/React.createElement(S.DateTimeModeSwitch, {
-      type: "ghost",
-      mode: "label-icon",
-      "data-testid": "date-range-picker-select-time",
-      disabled: !canSwitchMode,
-      onClick: onSwitchMode,
-      className: "ds-date-time-switch"
-    }, mode === MODES.TIME ? texts.selectDate : texts.selectTime, /*#__PURE__*/React.createElement(Icon, {
-      component: mode === MODES.TIME ? /*#__PURE__*/React.createElement(CalendarM, null) : /*#__PURE__*/React.createElement(ClockM, null)
-    }))));
-  };
-  return RangePicker;
-}(PureComponent);
-export default withDataFormat(RangePicker);
+  }
+  render() {
+    const {
+      mode,
+      onChange,
+      value,
+      canSwitchMode,
+      dateOnly,
+      onSwitchMode,
+      texts
+    } = this.props;
+    const {
+      showNowButton = true
+    } = this.props;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Sides, { children: [
+        /* @__PURE__ */ jsx(Side, { mode, children: this.renderSide(COLUMNS.LEFT) }),
+        /* @__PURE__ */ jsx(Side, { mode, children: this.renderSide(COLUMNS.RIGHT) })
+      ] }),
+      /* @__PURE__ */ jsxs(PickerFooter, { children: [
+        showNowButton && /* @__PURE__ */ jsx(Range, { onClick: ({
+          currentTarget
+        }) => {
+          const now = /* @__PURE__ */ new Date();
+          const literallyNow = {
+            ...value,
+            translationKey: "now",
+            type: "ABSOLUTE",
+            from: now,
+            to: fnsAddMinutes(now, 1)
+          };
+          onChange(literallyNow);
+          currentTarget.blur();
+        }, children: texts.now }),
+        /* @__PURE__ */ jsx(FooterSeparator, {}),
+        !dateOnly && /* @__PURE__ */ jsxs(DateTimeModeSwitch, { type: "ghost", mode: "label-icon", "data-testid": "date-range-picker-select-time", disabled: !canSwitchMode, onClick: onSwitchMode, className: "ds-date-time-switch", children: [
+          mode === MODES.TIME ? texts.selectDate : texts.selectTime,
+          /* @__PURE__ */ jsx(Icon, { component: mode === MODES.TIME ? /* @__PURE__ */ jsx(CalendarM, {}) : /* @__PURE__ */ jsx(ClockM, {}) })
+        ] })
+      ] })
+    ] });
+  }
+}
+const RangePicker$1 = withDataFormat(RangePicker);
+export {
+  RangePicker$1 as default
+};