@spaced-out/ui-design-system 0.5.26 → 0.5.27

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DateRangeWrapper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
+var _size = require("../../styles/variables/_size");
 var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _dateRangePicker = require("../../utils/date-range-picker");
@@ -21,43 +22,29 @@ var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const CalendarHeader = _ref => {
+const CalendarHeaderBase = _ref => {
   let {
     t,
     date,
-    marker,
     minDate,
     maxDate,
+    availableYears,
+    availableMonths,
     setMonth,
-    rangeStartMonth,
-    rangeEndMonth,
     onClickNext,
+    onClickPrevious,
     nextDisabled,
     prevDisabled,
-    onClickPrevious,
-    testId
+    testId,
+    marker
   } = _ref;
-  const availableYears = (0, _utils.generateAvailableYears)({
-    marker,
-    minDate,
-    maxDate,
-    rangeStartMonth,
-    rangeEndMonth
-  });
-  const availableMonths = (0, _utils.getAvailableMonths)({
-    marker,
-    minDate,
-    maxDate,
-    rangeStartMonth,
-    rangeEndMonth,
-    t
-  });
   const MONTHS = (0, _utils.getMonths)(t);
+  const baseSlot = marker ? `-${marker}` : '';
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: _DateRangeWrapperModule.default.calendarHeader,
     "data-testid": (0, _qa.generateTestId)({
       base: testId,
-      slot: `header-${marker}`
+      slot: `header${baseSlot}`
     }),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
       ariaLabel: (0, _dateRangePicker.getTranslation)(t, 'Select Previous Month'),
@@ -70,14 +57,18 @@ const CalendarHeader = _ref => {
       color: prevDisabled ? 'disabled' : 'secondary',
       testId: (0, _qa.generateTestId)({
         base: testId,
-        slot: `prev-button-${marker}`
+        slot: `prev-button${baseSlot}`
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
       size: "small",
       disabled: !availableMonths.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
       menu: {
         selectedKeys: [_moment.default.utc(date).month().toString()],
-        options: availableMonths
+        options: availableMonths,
+        isFluid: false,
+        classNames: {
+          wrapper: _DateRangeWrapperModule.default.monthAndYearMenu
+        }
       },
       onChange: event => {
         setMonth((0, _utils.getMonthEndDate)(_moment.default.utc(date).set('M', Number(event.key))));
@@ -86,13 +77,17 @@ const CalendarHeader = _ref => {
       scrollMenuToBottom: true,
       testId: (0, _qa.generateTestId)({
         base: testId,
-        slot: `month-dropdown-${marker}`
+        slot: `month-dropdown${baseSlot}`
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
       disabled: !availableYears.length || (0, _dateRangePicker.isAfter)(minDate, maxDate),
       menu: {
         selectedKeys: [_moment.default.utc(date).year().toString()],
-        options: availableYears
+        options: availableYears,
+        isFluid: false,
+        classNames: {
+          wrapper: _DateRangeWrapperModule.default.monthAndYearMenu
+        }
       },
       size: "small",
       onChange: event => {
@@ -102,7 +97,7 @@ const CalendarHeader = _ref => {
       scrollMenuToBottom: true,
       testId: (0, _qa.generateTestId)({
         base: testId,
-        slot: `year-dropdown-${marker}`
+        slot: `year-dropdown${baseSlot}`
       })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.ClickableIcon, {
       size: "small",
@@ -115,16 +110,102 @@ const CalendarHeader = _ref => {
       color: nextDisabled ? 'disabled' : 'secondary',
       testId: (0, _qa.generateTestId)({
         base: testId,
-        slot: `next-button-${marker}`
+        slot: `next-button${baseSlot}`
       })
     })]
   });
 };
-const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const CalendarHeader = _ref2 => {
+  let {
+    t,
+    date,
+    marker,
+    minDate,
+    maxDate,
+    setMonth,
+    rangeStartMonth,
+    rangeEndMonth,
+    onClickNext,
+    nextDisabled,
+    prevDisabled,
+    onClickPrevious,
+    testId
+  } = _ref2;
+  const availableYears = (0, _utils.generateAvailableYears)({
+    marker,
+    minDate,
+    maxDate,
+    rangeStartMonth,
+    rangeEndMonth
+  });
+  const availableMonths = (0, _utils.getAvailableMonths)({
+    marker,
+    minDate,
+    maxDate,
+    rangeStartMonth,
+    rangeEndMonth,
+    t
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeaderBase, {
+    t: t,
+    date: date,
+    minDate: minDate,
+    maxDate: maxDate,
+    availableYears: availableYears,
+    availableMonths: availableMonths,
+    setMonth: setMonth,
+    onClickNext: onClickNext,
+    onClickPrevious: onClickPrevious,
+    nextDisabled: nextDisabled,
+    prevDisabled: prevDisabled,
+    testId: testId,
+    marker: marker
+  });
+};
+const MobileCalendarHeader = _ref3 => {
+  let {
+    t,
+    date,
+    minDate,
+    maxDate,
+    setMonth,
+    onClickNext,
+    nextDisabled,
+    prevDisabled,
+    onClickPrevious,
+    testId
+  } = _ref3;
+  const availableYears = (0, _utils.generateAvailableYears)({
+    minDate,
+    maxDate
+  });
+  const availableMonths = (0, _dateRangePicker.getAvailableMonthsSingleCalendar)({
+    date,
+    minDate,
+    maxDate,
+    t
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeaderBase, {
+    t: t,
+    date: date,
+    minDate: minDate,
+    maxDate: maxDate,
+    availableYears: availableYears,
+    availableMonths: availableMonths,
+    setMonth: setMonth,
+    onClickNext: onClickNext,
+    onClickPrevious: onClickPrevious,
+    nextDisabled: nextDisabled,
+    prevDisabled: prevDisabled,
+    testId: testId
+  });
+};
+const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
   let {
     onApply,
     onCancel,
     handlers,
+    mobileCalendarHandlers,
     hoverDay,
     minDate,
     maxDate,
@@ -133,9 +214,11 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     rangeStartMonth,
     setTimezone,
     rangeEndMonth,
+    mobileCalendarMonth,
     inHoverRange,
     setRangeStartMonth,
     setRangeEndMonth,
+    setRangeMonth,
     cardWrapperClass,
     hideTimezone,
     today,
@@ -144,7 +227,7 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     t,
     locale,
     testId
-  } = _ref2;
+  } = _ref4;
   const canNavigateCloser = _moment.default.utc(rangeStartMonth).year() !== _moment.default.utc(rangeEndMonth).year() || Math.abs(_moment.default.utc(rangeStartMonth).month() - _moment.default.utc(rangeEndMonth).month()) > 1;
   const handleApplyClick = () => {
     const {
@@ -164,6 +247,9 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
   const {
     onMonthNavigate
   } = handlers;
+  const {
+    onMonthNavigate: onMonthNavigateSingle
+  } = mobileCalendarHandlers;
   const commonProps = {
     inHoverRange,
     handlers,
@@ -175,176 +261,371 @@ const DateRangeWrapper = exports.DateRangeWrapper = /*#__PURE__*/React.forwardRe
     t,
     testId
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusManager.FocusManager, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
-      classNames: {
-        wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, cardWrapperClass)
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FocusManager.FocusManager, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MobileDateRangePicker, {
+      ref: ref,
+      cardWrapperClass: cardWrapperClass,
+      t: t,
+      dateRange: dateRange,
+      locale: locale,
+      mobileCalendarMonth: mobileCalendarMonth,
+      setRangeMonth: setRangeMonth,
+      minDate: minDate,
+      maxDate: maxDate,
+      onMonthNavigate: onMonthNavigateSingle,
+      commonProps: {
+        ...commonProps,
+        handlers: mobileCalendarHandlers
       },
+      hideTimezone: hideTimezone,
+      timezone: timezone,
+      setTimezone: setTimezone,
+      onCancel: onCancel,
+      handleApplyClick: handleApplyClick
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangePicker, {
       ref: ref,
+      cardWrapperClass: cardWrapperClass,
+      startDateLabel: startDateLabel,
+      t: t,
+      dateRange: dateRange,
+      locale: locale,
+      endDateLabel: endDateLabel,
+      rangeStartMonth: rangeStartMonth,
+      rangeEndMonth: rangeEndMonth,
+      setRangeStartMonth: setRangeStartMonth,
+      canNavigateCloser: canNavigateCloser,
+      minDate: minDate,
+      maxDate: maxDate,
+      onMonthNavigate: onMonthNavigate,
+      setRangeEndMonth: setRangeEndMonth,
+      commonProps: commonProps,
+      hideTimezone: hideTimezone,
+      timezone: timezone,
+      setTimezone: setTimezone,
+      onCancel: onCancel,
+      handleApplyClick: handleApplyClick
+    })]
+  });
+});
+const DateRangeHeader = _ref5 => {
+  let {
+    testId,
+    startDateLabel,
+    endDateLabel
+  } = _ref5;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardHeader, {
+    className: _DateRangeWrapperModule.default.cardHeader,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'header'
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+      className: _DateRangeWrapperModule.default.selectedDate,
+      color: _Text.TEXT_COLORS.secondary,
       testId: (0, _qa.generateTestId)({
         base: testId,
-        slot: 'card'
+        slot: 'start-date-label'
       }),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardHeader, {
-        className: _DateRangeWrapperModule.default.cardHeader,
-        "data-testid": (0, _qa.generateTestId)({
+      children: startDateLabel
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      name: "minus",
+      size: _Icon.ICON_SIZE.small,
+      type: _Icon.ICON_TYPE.regular,
+      color: _Text.TEXT_COLORS.secondary,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'separator-icon'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+      className: _DateRangeWrapperModule.default.selectedDate,
+      color: _Text.TEXT_COLORS.secondary,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'end-date-label'
+      }),
+      children: endDateLabel
+    })]
+  });
+};
+const DateRangeFooter = _ref6 => {
+  let {
+    t,
+    testId,
+    hideTimezone,
+    timezone,
+    setTimezone,
+    minDate,
+    maxDate,
+    onCancel,
+    handleApplyClick,
+    dateRange,
+    small
+  } = _ref6;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardFooter, {
+    className: (0, _classify.default)(_DateRangeWrapperModule.default.cardFooter, {
+      [_DateRangeWrapperModule.default.cardFooterSmall]: small
+    }),
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'footer'
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardTitle, {
+      className: _DateRangeWrapperModule.default.timezoneDropdownContainer,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'timezone-container'
+      }),
+      children: !hideTimezone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
+        menu: {
+          selectedKeys: [timezone],
+          options: (0, _utils.getTimezones)(t),
+          width: _size.size276,
+          allowSearch: true,
+          virtualization: {
+            enable: true
+          },
+          staticLabels: {
+            SEARCH_PLACEHOLDER: `${(0, _dateRangePicker.getTranslation)(t, 'Search')}...`,
+            RESULT: (0, _dateRangePicker.getTranslation)(t, 'result'),
+            RESULTS: (0, _dateRangePicker.getTranslation)(t, 'results')
+          }
+        },
+        dropdownInputText: (0, _dateRangePicker.getTranslation)(t, _dateRangePicker.TIMEZONES[timezone]),
+        disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
+        classNames: {
+          box: _DateRangeWrapperModule.default.timezoneDropdown
+        },
+        onChange: event => setTimezone(event.key),
+        size: "small",
+        testId: (0, _qa.generateTestId)({
           base: testId,
-          slot: 'header'
-        }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
-          className: _DateRangeWrapperModule.default.selectedDate,
-          color: _Text.TEXT_COLORS.secondary,
-          testId: (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'start-date-label'
-          }),
-          children: `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
-          name: "minus",
-          size: _Icon.ICON_SIZE.small,
-          type: _Icon.ICON_TYPE.regular,
-          color: _Text.TEXT_COLORS.secondary,
-          testId: (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'separator-icon'
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
-          className: _DateRangeWrapperModule.default.selectedDate,
-          color: _Text.TEXT_COLORS.secondary,
-          testId: (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'end-date-label'
-          }),
-          children: `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: _DateRangeWrapperModule.default.calendarMenuContainer,
-        "data-testid": (0, _qa.generateTestId)({
+          slot: 'timezone-dropdown'
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardActions, {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'actions'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        type: "ghost",
+        onClick: onCancel,
+        size: "small",
+        testId: (0, _qa.generateTestId)({
           base: testId,
-          slot: 'calendar-menu-container'
+          slot: 'cancel-button'
         }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
-          t: t,
-          marker: _utils.MARKERS.DATE_RANGE_START,
-          rangeStartMonth: rangeStartMonth,
-          rangeEndMonth: rangeEndMonth,
-          date: rangeStartMonth,
-          setMonth: setRangeStartMonth,
-          nextDisabled: !canNavigateCloser,
-          prevDisabled: (0, _dateRangePicker.isSameOrBefore)(rangeStartMonth, minDate, 'month'),
-          minDate: minDate,
-          maxDate: maxDate,
-          onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
-          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV),
-          testId: testId
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
-          t: t,
-          marker: _utils.MARKERS.DATE_RANGE_END,
-          rangeStartMonth: rangeStartMonth,
-          rangeEndMonth: rangeEndMonth,
-          date: rangeEndMonth,
-          setMonth: setRangeEndMonth,
-          nextDisabled: (0, _dateRangePicker.isSameOrAfter)(rangeEndMonth, maxDate, 'month'),
-          prevDisabled: !canNavigateCloser,
-          minDate: minDate,
-          maxDate: maxDate,
-          onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
-          onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV),
-          testId: testId
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardContent, {
-        className: _DateRangeWrapperModule.default.dateRangeCalendars,
-        "data-testid": (0, _qa.generateTestId)({
+        children: (0, _dateRangePicker.getTranslation)(t, 'Cancel')
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+        onClick: handleApplyClick,
+        size: "small",
+        disabled: !(dateRange.startDate && dateRange.endDate),
+        testId: (0, _qa.generateTestId)({
           base: testId,
-          slot: 'calendars'
+          slot: 'apply-button'
         }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
-          marker: _utils.MARKERS.DATE_RANGE_START,
-          value: rangeStartMonth,
-          ...commonProps,
-          testId: (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'start-calendar'
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: _DateRangeWrapperModule.default.divider,
-          "data-testid": (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'divider'
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
-          marker: _utils.MARKERS.DATE_RANGE_END,
-          value: rangeEndMonth,
-          ...commonProps,
-          testId: (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'end-calendar'
-          })
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardFooter, {
-        className: _DateRangeWrapperModule.default.cardFooter,
+        children: (0, _dateRangePicker.getTranslation)(t, 'Apply')
+      })]
+    })]
+  });
+};
+const DateRangePicker = _ref7 => {
+  let {
+    ref,
+    cardWrapperClass,
+    startDateLabel,
+    t,
+    dateRange,
+    locale,
+    endDateLabel,
+    rangeStartMonth,
+    rangeEndMonth,
+    setRangeStartMonth,
+    canNavigateCloser,
+    minDate,
+    maxDate,
+    onMonthNavigate,
+    setRangeEndMonth,
+    commonProps,
+    hideTimezone,
+    timezone,
+    setTimezone,
+    onCancel,
+    handleApplyClick
+  } = _ref7;
+  const {
+    testId
+  } = commonProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
+    classNames: {
+      wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapper, _DateRangeWrapperModule.default.dualCalendarWrapper, cardWrapperClass)
+    },
+    ref: ref,
+    testId: (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'card'
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeHeader, {
+      testId: testId,
+      startDateLabel: `${startDateLabel || (0, _dateRangePicker.getTranslation)(t, 'Start Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`,
+      endDateLabel: `${endDateLabel || (0, _dateRangePicker.getTranslation)(t, 'End Date')}: ${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: _DateRangeWrapperModule.default.calendarMenuContainer,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'calendar-menu-container'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
+        t: t,
+        marker: _utils.MARKERS.DATE_RANGE_START,
+        rangeStartMonth: rangeStartMonth,
+        rangeEndMonth: rangeEndMonth,
+        date: rangeStartMonth,
+        setMonth: setRangeStartMonth,
+        nextDisabled: !canNavigateCloser,
+        prevDisabled: (0, _dateRangePicker.isSameOrBefore)(rangeStartMonth, minDate, 'month'),
+        minDate: minDate,
+        maxDate: maxDate,
+        onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
+        onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.PREV),
+        testId: testId
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(CalendarHeader, {
+        t: t,
+        marker: _utils.MARKERS.DATE_RANGE_END,
+        rangeStartMonth: rangeStartMonth,
+        rangeEndMonth: rangeEndMonth,
+        date: rangeEndMonth,
+        setMonth: setRangeEndMonth,
+        nextDisabled: (0, _dateRangePicker.isSameOrAfter)(rangeEndMonth, maxDate, 'month'),
+        prevDisabled: !canNavigateCloser,
+        minDate: minDate,
+        maxDate: maxDate,
+        onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
+        onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV),
+        testId: testId
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardContent, {
+      className: _DateRangeWrapperModule.default.dateRangeCalendars,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'calendars'
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+        marker: _utils.MARKERS.DATE_RANGE_START,
+        value: rangeStartMonth,
+        ...commonProps,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'start-calendar'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _DateRangeWrapperModule.default.divider,
         "data-testid": (0, _qa.generateTestId)({
           base: testId,
-          slot: 'footer'
-        }),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardTitle, {
-          className: _DateRangeWrapperModule.default.timezoneDropdownContainer,
-          "data-testid": (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'timezone-container'
-          }),
-          children: !hideTimezone && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Dropdown.Dropdown, {
-            menu: {
-              selectedKeys: [timezone],
-              options: (0, _utils.getTimezones)(t),
-              allowSearch: true,
-              virtualization: {
-                enable: true
-              },
-              staticLabels: {
-                SEARCH_PLACEHOLDER: `${(0, _dateRangePicker.getTranslation)(t, 'Search')}...`,
-                RESULT: (0, _dateRangePicker.getTranslation)(t, 'result'),
-                RESULTS: (0, _dateRangePicker.getTranslation)(t, 'results')
-              }
-            },
-            dropdownInputText: (0, _dateRangePicker.getTranslation)(t, _dateRangePicker.TIMEZONES[timezone]),
-            disabled: (0, _dateRangePicker.isAfter)(minDate, maxDate),
-            classNames: {
-              box: _DateRangeWrapperModule.default.timezoneDropdown
-            },
-            onChange: event => setTimezone(event.key),
-            size: "small",
-            testId: (0, _qa.generateTestId)({
-              base: testId,
-              slot: 'timezone-dropdown'
-            })
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.CardActions, {
-          "data-testid": (0, _qa.generateTestId)({
-            base: testId,
-            slot: 'actions'
-          }),
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-            type: "ghost",
-            onClick: onCancel,
-            size: "small",
-            testId: (0, _qa.generateTestId)({
-              base: testId,
-              slot: 'cancel-button'
-            }),
-            children: (0, _dateRangePicker.getTranslation)(t, 'Cancel')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
-            onClick: handleApplyClick,
-            size: "small",
-            disabled: !(dateRange.startDate && dateRange.endDate),
-            testId: (0, _qa.generateTestId)({
-              base: testId,
-              slot: 'apply-button'
-            }),
-            children: (0, _dateRangePicker.getTranslation)(t, 'Apply')
-          })]
-        })]
+          slot: 'divider'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.Calendar, {
+        marker: _utils.MARKERS.DATE_RANGE_END,
+        value: rangeEndMonth,
+        ...commonProps,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'end-calendar'
+        })
       })]
-    })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeFooter, {
+      t: t,
+      testId: testId,
+      hideTimezone: hideTimezone,
+      timezone: timezone,
+      setTimezone: setTimezone,
+      minDate: minDate,
+      maxDate: maxDate,
+      onCancel: onCancel,
+      handleApplyClick: handleApplyClick,
+      dateRange: dateRange
+    })]
+  });
+};
+const MobileDateRangePicker = _ref8 => {
+  let {
+    ref,
+    cardWrapperClass,
+    t,
+    dateRange,
+    locale,
+    mobileCalendarMonth,
+    setRangeMonth,
+    minDate,
+    maxDate,
+    onMonthNavigate,
+    commonProps,
+    hideTimezone,
+    timezone,
+    setTimezone,
+    onCancel,
+    handleApplyClick
+  } = _ref8;
+  const {
+    testId
+  } = commonProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
+    classNames: {
+      wrapper: (0, _classify.default)(_DateRangeWrapperModule.default.dateRangeWrapperSmall, _DateRangeWrapperModule.default.singleCalendarWrapper, cardWrapperClass)
+    },
+    ref: ref,
+    testId: (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'card'
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeHeader, {
+      testId: testId,
+      startDateLabel: `${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_START, dateRange, locale)}`,
+      endDateLabel: `${(0, _dateRangePicker.getFormattedDate)(_utils.MARKERS.DATE_RANGE_END, dateRange, locale)}`
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _DateRangeWrapperModule.default.calendarMenuContainer,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'calendar-menu-container'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(MobileCalendarHeader, {
+        t: t,
+        date: mobileCalendarMonth,
+        setMonth: setRangeMonth,
+        nextDisabled: (0, _dateRangePicker.isSameOrAfter)(mobileCalendarMonth, maxDate, 'month'),
+        prevDisabled: (0, _dateRangePicker.isSameOrBefore)(mobileCalendarMonth, minDate, 'month'),
+        minDate: minDate,
+        maxDate: maxDate,
+        onClickNext: () => onMonthNavigate(_utils.NAVIGATION_ACTION.NEXT),
+        onClickPrevious: () => onMonthNavigate(_utils.NAVIGATION_ACTION.PREV),
+        testId: testId
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.CardContent, {
+      className: _DateRangeWrapperModule.default.dateRangeCalendars,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'calendars'
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Calendar.CalendarMobile, {
+        value: mobileCalendarMonth,
+        ...commonProps,
+        testId: (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'calendar'
+        })
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(DateRangeFooter, {
+      t: t,
+      testId: testId,
+      hideTimezone: hideTimezone,
+      timezone: timezone,
+      setTimezone: setTimezone,
+      minDate: minDate,
+      maxDate: maxDate,
+      onCancel: onCancel,
+      handleApplyClick: handleApplyClick,
+      dateRange: dateRange,
+      small: true
+    })]
   });
-});
+};