@spaced-out/ui-design-system 0.1.93 → 0.1.94-beta.1

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -23,7 +23,7 @@ const CalendarHeader = _ref => {
   let {
     date,
     marker,
-    setDate,
+    setMonth,
     rangeStartMonth,
     rangeEndMonth,
     onClickNext,
@@ -34,6 +34,7 @@ const CalendarHeader = _ref => {
   return /*#__PURE__*/React.createElement("div", {
     className: _DateRangeWrapperModule.default.calendarHeader
   }, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
+    ariaLabel: "Select Previous Month",
     size: "small",
     name: "chevron-left",
     className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
@@ -44,14 +45,14 @@ const CalendarHeader = _ref => {
   }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     size: "small",
     menu: {
-      options: (0, _utils.getAvailableMonths)(_utils.MONTHS, rangeStartMonth, rangeEndMonth, marker),
-      selectedKeys: [(0, _momentTimezone.default)(date).month().toString()]
+      selectedKeys: [(0, _momentTimezone.default)(date).month().toString()],
+      options: (0, _utils.getAvailableMonths)(_utils.MONTHS, rangeStartMonth, rangeEndMonth, marker)
     },
     onChange: event => {
-      setDate((0, _utils.formatIsoDate)((0, _momentTimezone.default)(date).set('M', event.key)));
+      setMonth((0, _utils.getMonthStartDate)((0, _momentTimezone.default)(date).set('M', event.key)));
     },
     dropdownInputText: _utils.MONTHS[(0, _momentTimezone.default)(date).month()].label,
-    openMenuAtBottom: true
+    scrollMenuToBottom: true
   }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     menu: {
       selectedKeys: [(0, _momentTimezone.default)(date).year().toString()],
@@ -59,12 +60,13 @@ const CalendarHeader = _ref => {
     },
     size: "small",
     onChange: event => {
-      setDate((0, _utils.formatIsoDate)((0, _momentTimezone.default)(date).set('y', event.key)));
+      setMonth((0, _utils.getMonthStartDate)((0, _momentTimezone.default)(date).set('y', event.key)));
     },
     dropdownInputText: (0, _momentTimezone.default)(date).year(),
-    openMenuAtBottom: true
+    scrollMenuToBottom: true
   }), /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
     size: "small",
+    ariaLabel: "Select Next Month",
     name: "chevron-right",
     className: (0, _classify.default)(_DateRangeWrapperModule.default.headerIcon, {
       [_DateRangeWrapperModule.default.disabledIcon]: nextDisabled
@@ -126,7 +128,7 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
     date: rangeStartMonth,
-    setDate: setRangeStartMonth,
+    setMonth: setRangeStartMonth,
     nextDisabled: !canNavigateCloser,
     prevDisabled: false,
     onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_START, _utils.NAVIGATION_ACTION.NEXT),
@@ -136,8 +138,8 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
     date: rangeEndMonth,
-    setDate: setRangeEndMonth,
-    nextDisabled: (0, _momentTimezone.default)((0, _utils.getAddedDate)(rangeEndMonth, 1, 'M')).isAfter((0, _momentTimezone.default)()),
+    setMonth: setRangeEndMonth,
+    nextDisabled: (0, _momentTimezone.default)((0, _utils.getAddedDate)(rangeEndMonth, 1, 'M')).isSameOrAfter((0, _momentTimezone.default)()),
     prevDisabled: !canNavigateCloser,
     onClickNext: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.NEXT),
     onClickPrevious: () => onMonthNavigate(_utils.MARKERS.DATE_RANGE_END, _utils.NAVIGATION_ACTION.PREV)
@@ -161,6 +163,9 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     selectedKeys: [timeZone],
     onChange: event => setTimeZone(event.key),
     size: "small",
+    menuVirtualization: {
+      enable: true
+    },
     allowSearch: true
   })), /*#__PURE__*/React.createElement(_Card.CardActions, null, /*#__PURE__*/React.createElement(_Button.Button, {
     type: "ghost",

package/lib/components/DateRangePicker/DateRangeWrapper.js.flow

@@ -19,14 +19,13 @@ import {FocusManager} from '../FocusManager';
 import {ClickableIcon} from '../Icon';
 
 import {Calendar} from './Calendar.js';
+import type {DateRange, DateRangeWithTimezone} from './utils';
 import {
-  type DatePickerSelectedRange,
-  type DateRange,
   addTimeZone,
-  formatIsoDate,
   generateAvailableYears,
   getAddedDate,
   getAvailableMonths,
+  getMonthStartDate,
   getTimeZones,
   MARKERS,
   MONTHS,
@@ -45,7 +44,7 @@ type HeaderProps = {
   onClickNext: () => void,
   onClickPrevious: () => void,
   marker: $Values<typeof MARKERS>,
-  setDate: (date: string) => void,
+  setMonth: (date: string) => void,
 };
 
 type DateRangeWrapperProps = {
@@ -58,7 +57,7 @@ type DateRangeWrapperProps = {
   setRangeEndMonth: (string) => void,
   setTimeZone: (string) => void,
   timeZone: string,
-  onApply: (datePickerSelectedRange: DatePickerSelectedRange) => void,
+  onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void,
   onCancel: () => void,
   inHoverRange: (day: string) => boolean,
   handlers: {
@@ -74,7 +73,7 @@ type DateRangeWrapperProps = {
 const CalendarHeader = ({
   date,
   marker,
-  setDate,
+  setMonth,
   rangeStartMonth,
   rangeEndMonth,
   onClickNext,
@@ -84,6 +83,7 @@ const CalendarHeader = ({
 }: HeaderProps): React.Node => (
   <div className={css.calendarHeader}>
     <ClickableIcon
+      ariaLabel="Select Previous Month"
       size="small"
       name="chevron-left"
       className={classify(css.headerIcon, {
@@ -95,19 +95,19 @@ const CalendarHeader = ({
     <Dropdown
       size="small"
       menu={{
+        selectedKeys: [moment(date).month().toString()],
         options: getAvailableMonths(
           MONTHS,
           rangeStartMonth,
           rangeEndMonth,
           marker,
         ),
-        selectedKeys: [moment(date).month().toString()],
       }}
       onChange={(event) => {
-        setDate(formatIsoDate(moment(date).set('M', event.key)));
+        setMonth(getMonthStartDate(moment(date).set('M', event.key)));
       }}
       dropdownInputText={MONTHS[moment(date).month()].label}
-      openMenuAtBottom
+      scrollMenuToBottom
     />
     <Dropdown
       menu={{
@@ -121,13 +121,14 @@ const CalendarHeader = ({
       }}
       size="small"
       onChange={(event) => {
-        setDate(formatIsoDate(moment(date).set('y', event.key)));
+        setMonth(getMonthStartDate(moment(date).set('y', event.key)));
       }}
       dropdownInputText={moment(date).year()}
-      openMenuAtBottom
+      scrollMenuToBottom
     />
     <ClickableIcon
       size="small"
+      ariaLabel="Select Next Month"
       name="chevron-right"
       className={classify(css.headerIcon, {
         [css.disabledIcon]: nextDisabled,
@@ -202,7 +203,7 @@ export const DateRangeWrapper: React$AbstractComponent<
               rangeStartMonth={rangeStartMonth}
               rangeEndMonth={rangeEndMonth}
               date={rangeStartMonth}
-              setDate={setRangeStartMonth}
+              setMonth={setRangeStartMonth}
               nextDisabled={!canNavigateCloser}
               prevDisabled={false}
               onClickNext={() =>
@@ -223,10 +224,10 @@ export const DateRangeWrapper: React$AbstractComponent<
               rangeStartMonth={rangeStartMonth}
               rangeEndMonth={rangeEndMonth}
               date={rangeEndMonth}
-              setDate={setRangeEndMonth}
-              nextDisabled={moment(getAddedDate(rangeEndMonth, 1, 'M')).isAfter(
-                moment(),
-              )}
+              setMonth={setRangeEndMonth}
+              nextDisabled={moment(
+                getAddedDate(rangeEndMonth, 1, 'M'),
+              ).isSameOrAfter(moment())}
               prevDisabled={!canNavigateCloser}
               onClickNext={() =>
                 onMonthNavigate(MARKERS.DATE_RANGE_END, NAVIGATION_ACTION.NEXT)
@@ -259,6 +260,9 @@ export const DateRangeWrapper: React$AbstractComponent<
                 selectedKeys={[timeZone]}
                 onChange={(event) => setTimeZone(event.key)}
                 size="small"
+                menuVirtualization={{
+                  enable: true,
+                }}
                 allowSearch
               />
             </CardTitle>

package/lib/components/DateRangePicker/Day.js

@@ -16,6 +16,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 // $FlowFixMe[untyped-import]
 
+// $FlowFixMe[untyped-import]
+
 const getTextColor = (disabled, filled) => {
   if (disabled) {
     return _Text.TEXT_COLORS.disabled;
@@ -43,9 +45,7 @@ const Day = _ref => {
     tabIndex: disabled ? -1 : 0,
     className: (0, _classify.default)(_DayModule.default.calendarItemButton, {
       [_DayModule.default.calendarRowItemDisabled]: disabled,
-      [_DayModule.default.calendarRowItemBorderLeft]: !disabled && filled && endOfRange,
-      [_DayModule.default.calendarRowItemBorderRight]: !disabled && !(0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(hoverDay)) && (filled || highlighted) && startOfRange,
-      [_DayModule.default.calendarRowItemHighlighted]: !disabled && !filled && highlighted
+      [_DayModule.default.calendarRowItemHighlighted]: !disabled && (highlighted || startOfRange || endOfRange)
     }),
     onMouseOver: onHover,
     onClick: onClick,
@@ -54,12 +54,10 @@ const Day = _ref => {
     type: "ghost",
     color: getTextColor(disabled, filled),
     className: (0, _classify.default)(_DayModule.default.calendarRowItem, {
-      [_DayModule.default.calendarRowItemHover]: !disabled && !filled,
+      [_DayModule.default.calendarRowItemHover]: !disabled && (0, _momentTimezone.default)(date).isSame(hoverDay),
       [_DayModule.default.calendarRowItemFilled]: !disabled && filled,
       [_DayModule.default.calendarRowItemOutlined]: !disabled && outlined
-    }),
-    onMouseOver: onHover,
-    onClick: onClick
+    })
   }, value));
 };
 exports.Day = Day;

package/lib/components/DateRangePicker/Day.js.flow

@@ -3,6 +3,7 @@ import * as React from 'react';
 // $FlowFixMe[untyped-import]
 import moment from 'moment-timezone';
 
+// $FlowFixMe[untyped-import]
 import classify from '../../utils/classify';
 import {UnstyledButton} from '../Button';
 import {BodyMedium, TEXT_COLORS} from '../Text';
@@ -51,13 +52,8 @@ export const Day = ({
     tabIndex={disabled ? -1 : 0}
     className={classify(css.calendarItemButton, {
       [css.calendarRowItemDisabled]: disabled,
-      [css.calendarRowItemBorderLeft]: !disabled && filled && endOfRange,
-      [css.calendarRowItemBorderRight]:
-        !disabled &&
-        !moment(date).isSame(moment(hoverDay)) &&
-        (filled || highlighted) &&
-        startOfRange,
-      [css.calendarRowItemHighlighted]: !disabled && !filled && highlighted,
+      [css.calendarRowItemHighlighted]:
+        !disabled && (highlighted || startOfRange || endOfRange),
     })}
     onMouseOver={onHover}
     onClick={onClick}
@@ -67,12 +63,10 @@ export const Day = ({
       type="ghost"
       color={getTextColor(disabled, filled)}
       className={classify(css.calendarRowItem, {
-        [css.calendarRowItemHover]: !disabled && !filled,
+        [css.calendarRowItemHover]: !disabled && moment(date).isSame(hoverDay),
         [css.calendarRowItemFilled]: !disabled && filled,
         [css.calendarRowItemOutlined]: !disabled && outlined,
       })}
-      onMouseOver={onHover}
-      onClick={onClick}
     >
       {value}
     </BodyMedium>

package/lib/components/DateRangePicker/Day.module.css

@@ -2,6 +2,7 @@
   size2,
   size4,
   size5,
+  size26,
   size30
 ) from '../../styles/variables/_size.css';
 @value (
@@ -28,13 +29,15 @@
 ) from '../../styles/variables/_border.css';
 
 .calendarItemButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   height: calc(size30 + size2);
 }
 
 .calendarItemButton:focus {
   box-shadow: inset borderWidthNone borderWidthNone borderWidthNone
     borderWidthTertiary colorFocusPrimary;
-  border-radius: borderRadiusSmall;
 }
 
 .calendarRowItem {
@@ -45,12 +48,12 @@
   cursor: pointer;
   border-radius: borderRadiusCircle;
   box-sizing: border-box;
-  width: calc(size30 + size2);
-  height: calc(size30 + size2);
+  width: size26;
+  height: size26;
   outline: none;
 }
 
-.calendarRowItemHover:hover {
+.calendarRowItemHover {
   background-color: colorButtonFillGhostHovered;
 }
 
@@ -73,19 +76,3 @@
   border-radius: borderRadiusNone;
   background-color: colorBackgroundSecondary;
 }
-
-.calendarRowItemBorderLeft {
-  background-image: linear-gradient(
-    to left,
-    colorBackgroundTertiary spaceHalfFluid,
-    colorBackgroundSecondary spaceHalfFluid
-  );
-}
-
-.calendarRowItemBorderRight {
-  background-image: linear-gradient(
-    to right,
-    colorBackgroundTertiary spaceHalfFluid,
-    colorBackgroundSecondary spaceHalfFluid
-  );
-}

package/lib/components/DateRangePicker/index.js.flow

@@ -1,3 +1,4 @@
 // @flow strict
 
 export * from './DateRangePicker';
+export type {DateRange, DateRangeWithTimezone} from './utils';

package/lib/components/DateRangePicker/utils.js

@@ -3,10 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.addTimeZone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
-exports.formatIsoDate = formatIsoDate;
-exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getValidatedMonths = exports.getTimeZones = exports.getSubtractedDate = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = void 0;
-exports.wrangleMoment = wrangleMoment;
+exports.wrangleMoment = exports.isStartOfRange = exports.isStartDateEndDateSame = exports.isEndOfRange = exports.inDateRange = exports.getTimeZones = exports.getSubtractedDate = exports.getMonthStartDate = exports.getInitialDates = exports.getDaysInMonth = exports.getAvailableMonths = exports.getAddedDate = exports.generateAvailableYears = exports.formatIsoDate = exports.addTimeZone = exports.WEEKDAYS = exports.NAVIGATION_ACTION = exports.MONTHS = exports.MARKERS = void 0;
 var _formatISO = _interopRequireDefault(require("date-fns/formatISO"));
 var _parseISO = _interopRequireDefault(require("date-fns/parseISO"));
 var _lodash = _interopRequireDefault(require("lodash"));
@@ -70,42 +67,31 @@ const MONTHS = [{
   label: 'Dec'
 }];
 exports.MONTHS = MONTHS;
-const getDaysInMonth = date => {
-  const startWeek = (0, _moment.default)(date).startOf('month').startOf('week');
-  const endWeek = (0, _moment.default)(date).endOf('month').endOf('week');
-  const days = [],
-    current = startWeek;
-  while (current.isBefore(endWeek)) {
-    days.push(current.clone().format('YYYY-MM-DD'));
-    current.add(1, 'd');
-  }
-  const daysInChunks = _lodash.default.chunk(days, 7);
-
-  // if total rows in calendar are 5 add one more week to the calendar
-  if (daysInChunks.length === 5) {
-    const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
-    const extraDays = [];
-    while (current.isSameOrBefore(nextWeek)) {
-      extraDays.push(current.clone().format('YYYY-MM-DD'));
-      current.add(1, 'd');
-    }
-    daysInChunks.push(extraDays);
+const wrangleMoment = date => {
+  if (date instanceof Date) {
+    return date;
+  } else if (!date) {
+    return new Date();
   }
-  return daysInChunks;
+  return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
 };
-exports.getDaysInMonth = getDaysInMonth;
+exports.wrangleMoment = wrangleMoment;
+const formatIsoDate = date => (0, _formatISO.default)(wrangleMoment(date), {
+  representation: 'date'
+});
+exports.formatIsoDate = formatIsoDate;
 const isStartOfRange = (_ref, date) => {
   let {
     startDate
   } = _ref;
-  return !!startDate && (0, _moment.default)(date).isSame(startDate, 'd');
+  return Boolean(startDate) && (0, _moment.default)(date).isSame((0, _moment.default)(startDate), 'd');
 };
 exports.isStartOfRange = isStartOfRange;
 const isEndOfRange = (_ref2, date) => {
   let {
     endDate
   } = _ref2;
-  return !!endDate && (0, _moment.default)(date).isSame(endDate, 'd');
+  return Boolean(endDate) && (0, _moment.default)(date).isSame((0, _moment.default)(endDate), 'd');
 };
 exports.isEndOfRange = isEndOfRange;
 const inDateRange = (_ref3, date) => {
@@ -117,7 +103,7 @@ const inDateRange = (_ref3, date) => {
     const momentDay = (0, _moment.default)(date);
     const momentStartDate = (0, _moment.default)(startDate);
     const momentEndDate = (0, _moment.default)(endDate);
-    return momentDay.isBetween(momentStartDate, momentEndDate) || momentDay.isSame(momentStartDate, 'd') || momentDay.isSame(momentEndDate, 'd');
+    return momentDay.isBetween(momentStartDate, momentEndDate, null, '[]');
   }
   return false;
 };
@@ -133,10 +119,54 @@ const isStartDateEndDateSame = _ref4 => {
   return false;
 };
 exports.isStartDateEndDateSame = isStartDateEndDateSame;
+const getMonthAndYear = date => {
+  const momentDate = date ? (0, _moment.default)(date) : (0, _moment.default)();
+  return [momentDate.month(), momentDate.year()];
+};
+const getDaysInMonth = date => {
+  const startWeek = (0, _moment.default)(date).startOf('month').startOf('week');
+  const endWeek = (0, _moment.default)(date).endOf('month').endOf('week');
+  const days = [],
+    current = startWeek;
+  while (current.isBefore(endWeek)) {
+    days.push(current.clone().format('YYYY-MM-DD'));
+    current.add(1, 'd');
+  }
+  const daysInChunks = _lodash.default.chunk(days, 7);
+
+  // if total rows in calendar are 5 add one more week to the calendar
+  if (daysInChunks.length === 5) {
+    const nextWeek = getAddedDate(endWeek, WEEKDAYS.length, 'd');
+    const extraDays = [];
+    while (current.isSameOrBefore(nextWeek)) {
+      extraDays.push(current.clone().format('YYYY-MM-DD'));
+      current.add(1, 'd');
+    }
+    daysInChunks.push(extraDays);
+  }
+  return daysInChunks;
+};
+exports.getDaysInMonth = getDaysInMonth;
+const getAddedDate = (date, addCount, timeUnit) => formatIsoDate((0, _moment.default)(date).add(addCount, timeUnit));
+exports.getAddedDate = getAddedDate;
+const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _moment.default)(date).subtract(subtractCount, timeUnit));
+exports.getSubtractedDate = getSubtractedDate;
+const getMonthStartDate = date => formatIsoDate((0, _moment.default)(date).startOf('M'));
+exports.getMonthStartDate = getMonthStartDate;
+const addTimeZone = (date, timeZone) => _moment.default.tz(date, timeZone).startOf('d').utc().toISOString();
+exports.addTimeZone = addTimeZone;
+const getTimeZones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
+  menuOptions.push({
+    key,
+    label: _timezones.TIMEZONES[key]
+  });
+  return menuOptions;
+}, []);
+exports.getTimeZones = getTimeZones;
 const generateAvailableYears = (count, firstCalendarDate, secondCalendarDate, marker) => {
   const startYear = (0, _moment.default)().year() - count + 1;
-  const firstCalendarYear = (0, _moment.default)(firstCalendarDate).year();
-  const secondCalendarYear = (0, _moment.default)(secondCalendarDate).year();
+  const firstCalendarYear = (0, _moment.default)(firstCalendarDate).add(1, 'M').year();
+  const secondCalendarYear = (0, _moment.default)(secondCalendarDate).subtract(1, 'M').year();
   const isWithinRange = year => marker === MARKERS.DATE_RANGE_START ? year <= secondCalendarYear : year >= firstCalendarYear;
   return Array.from({
     length: count
@@ -155,10 +185,6 @@ const generateAvailableYears = (count, firstCalendarDate, secondCalendarDate, ma
   });
 };
 exports.generateAvailableYears = generateAvailableYears;
-const getMonthAndYear = date => {
-  const momentDate = date ? (0, _moment.default)(date) : (0, _moment.default)();
-  return [momentDate.month(), momentDate.year()];
-};
 const getAvailableMonths = (Months, first, second, marker) => {
   const [firstMonth, firstYear] = getMonthAndYear(first);
   const [secondMonth, secondYear] = getMonthAndYear(second);
@@ -175,44 +201,33 @@ const getAvailableMonths = (Months, first, second, marker) => {
   });
 };
 exports.getAvailableMonths = getAvailableMonths;
-const addTimeZone = (date, timeZone) => _moment.default.tz(date, timeZone).startOf('d').utc().toISOString();
-exports.addTimeZone = addTimeZone;
-const getSubtractedDate = (date, subtractCount, timeUnit) => formatIsoDate((0, _moment.default)(date).subtract(subtractCount, timeUnit));
-exports.getSubtractedDate = getSubtractedDate;
-const getAddedDate = (date, addCount, timeUnit) => formatIsoDate((0, _moment.default)(date).add(addCount, timeUnit));
-exports.getAddedDate = getAddedDate;
-function formatIsoDate(date) {
-  return (0, _formatISO.default)(wrangleMoment(date), {
-    representation: 'date'
-  });
-}
-function wrangleMoment(date) {
-  if (date instanceof Date) {
-    return date;
-  } else if (!date) {
-    return new Date();
-  }
-  return date instanceof _moment.default ? date.toDate() : (0, _parseISO.default)(date);
-}
-const getValidatedMonths = (_ref6, minDate, maxDate) => {
-  let {
+const getInitialDates = initialDateRange => {
+  const today = formatIsoDate();
+  const {
     startDate,
     endDate
-  } = _ref6;
-  if (startDate && endDate) {
-    const newStart = _moment.default.max((0, _moment.default)(startDate), (0, _moment.default)(minDate)); // TODO Figure out the validated date
-    const newEnd = _moment.default.min((0, _moment.default)(endDate), (0, _moment.default)(maxDate));
-    return [formatIsoDate(newStart), newStart.isSame(newEnd, 'M') ? getAddedDate(newEnd, 1, 'M') : formatIsoDate(newEnd)];
-  } else {
-    return [startDate, endDate];
+  } = initialDateRange;
+  const isStartDateValid = (0, _moment.default)(startDate).isSameOrBefore(today);
+  const isEndDateValid = (0, _moment.default)(endDate).isSameOrBefore(today);
+  const dateRange = startDate && endDate && isStartDateValid && isEndDateValid && (0, _moment.default)(endDate).isSameOrAfter(startDate) ? {
+    startDate,
+    endDate
+  } : {
+    startDate: undefined,
+    endDate: undefined
+  };
+  let startMonth = dateRange.startDate ? getMonthStartDate(dateRange.startDate) : getMonthStartDate(getSubtractedDate(today, 1, 'M'));
+  const endMonth = dateRange.endDate ? getMonthStartDate(dateRange.endDate) : getMonthStartDate(today);
+  if ((0, _moment.default)(startMonth).isSame((0, _moment.default)(endMonth), 'M')) {
+    startMonth = getSubtractedDate(endMonth, 1, 'M');
   }
+  const monthRange = {
+    rangeStartMonth: startMonth,
+    rangeEndMonth: endMonth
+  };
+  return {
+    dateRange,
+    monthRange
+  };
 };
-exports.getValidatedMonths = getValidatedMonths;
-const getTimeZones = () => Object.keys(_timezones.TIMEZONES).reduce((menuOptions, key) => {
-  menuOptions.push({
-    key,
-    label: _timezones.TIMEZONES[key]
-  });
-  return menuOptions;
-}, []);
-exports.getTimeZones = getTimeZones;
+exports.getInitialDates = getInitialDates;