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

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.94-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.94-beta.0...v0.1.94-beta.1) (2024-05-13)
+
+
+### Features
+
+* **charts:** added loading prop to handle loading state for charts ([#201](https://github.com/spaced-out/ui-design-system/issues/201)) ([3d41fc1](https://github.com/spaced-out/ui-design-system/commit/3d41fc1b4ab64b97e80c09ba29f6b664e1b15465))
+
+### [0.1.94-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.1.93...v0.1.94-beta.0) (2024-05-13)
+
+
+### Features
+
+* [GDS-338, GDS-349, GDS-372] virtualization in Menu Component ([#178](https://github.com/spaced-out/ui-design-system/issues/178)) ([81e5c69](https://github.com/spaced-out/ui-design-system/commit/81e5c69064e64ef7d18b3f2c02eb92e1cded8bfe))
+
 ### [0.1.93](https://github.com/spaced-out/ui-design-system/compare/v0.1.93-beta.1...v0.1.93) (2024-05-08)
 
 

package/lib/components/ChartWrapper/ChartWrapper.js

@@ -13,6 +13,7 @@ var _size = require("../../styles/variables/_size");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _ButtonDropdown = require("../ButtonDropdown");
 var _Card = require("../Card");
+var _CircularLoader = require("../CircularLoader");
 var _ChartWrapperModule = _interopRequireDefault(require("./ChartWrapper.module.css"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -82,6 +83,7 @@ const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
   };
   return /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
+    ariaLabel: "Export Chart Menu",
     menu: {
       isFluid: true,
       menuDisabled: false,
@@ -98,6 +100,7 @@ const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 const ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
+    isLoading,
     title,
     children,
     classNames,
@@ -108,7 +111,10 @@ const ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     classNames: {
       wrapper: (0, _classify.default)(_ChartWrapperModule.default.wrapper, classNames?.wrapper)
     }
-  }, /*#__PURE__*/React.createElement(_Card.CardHeader, {
+  }, isLoading ? /*#__PURE__*/React.createElement(_CircularLoader.CircularLoader, {
+    size: "large",
+    className: (0, _classify.default)(_ChartWrapperModule.default.loader, classNames?.loader)
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Card.CardHeader, {
     className: classNames?.header
   }, /*#__PURE__*/React.createElement(_Card.CardTitle, {
     className: classNames?.title
@@ -119,6 +125,6 @@ const ChartWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     customExportOptions: customExportOptions
   }), headerActions ? headerActions : null)), /*#__PURE__*/React.createElement(_Card.CardContent, {
     className: (0, _classify.default)(_ChartWrapperModule.default.chartContent, classNames?.content)
-  }, children));
+  }, children)));
 });
 exports.ChartWrapper = ChartWrapper;

package/lib/components/ChartWrapper/ChartWrapper.js.flow

@@ -14,6 +14,7 @@ import {size180} from '../../styles/variables/_size';
 import classify from '../../utils/classify';
 import {ANCHOR_POSITION_TYPE, ButtonDropdown} from '../ButtonDropdown';
 import {Card, CardActions, CardContent, CardHeader, CardTitle} from '../Card';
+import {CircularLoader} from '../CircularLoader';
 import type {MenuOption} from '../Menu';
 
 import css from './ChartWrapper.module.css';
@@ -89,6 +90,7 @@ const CustomExportButton = React.forwardRef<
 
   return (
     <ButtonDropdown
+      ariaLabel="Export Chart Menu"
       menu={{
         isFluid: true,
         menuDisabled: false,
@@ -111,9 +113,11 @@ export type ChartWrapperClassNames = $ReadOnly<{
   title?: string,
   actions?: string,
   content?: string,
+  loader?: string,
 }>;
 
 type ChartWrapperProps = {
+  isLoading?: boolean,
   title: React.Node,
   children?: React.Node,
   classNames?: ChartWrapperClassNames,
@@ -127,6 +131,7 @@ export const ChartWrapper: React$AbstractComponent<
 > = React.forwardRef<ChartWrapperProps, HTMLDivElement>(
   (
     {
+      isLoading,
       title,
       children,
       classNames,
@@ -136,21 +141,32 @@ export const ChartWrapper: React$AbstractComponent<
     ref,
   ): React.Node => (
     <Card classNames={{wrapper: classify(css.wrapper, classNames?.wrapper)}}>
-      <CardHeader className={classNames?.header}>
-        <CardTitle className={classNames?.title}>{title}</CardTitle>
-        <CardActions
-          className={classify(css.chartCardActions, classNames?.actions)}
-        >
-          <CustomExportButton
-            ref={ref}
-            customExportOptions={customExportOptions}
-          />
-          {headerActions ? headerActions : null}
-        </CardActions>
-      </CardHeader>
-      <CardContent className={classify(css.chartContent, classNames?.content)}>
-        {children}
-      </CardContent>
+      {isLoading ? (
+        <CircularLoader
+          size="large"
+          className={classify(css.loader, classNames?.loader)}
+        />
+      ) : (
+        <>
+          <CardHeader className={classNames?.header}>
+            <CardTitle className={classNames?.title}>{title}</CardTitle>
+            <CardActions
+              className={classify(css.chartCardActions, classNames?.actions)}
+            >
+              <CustomExportButton
+                ref={ref}
+                customExportOptions={customExportOptions}
+              />
+              {headerActions ? headerActions : null}
+            </CardActions>
+          </CardHeader>
+          <CardContent
+            className={classify(css.chartContent, classNames?.content)}
+          >
+            {children}
+          </CardContent>
+        </>
+      )}
     </Card>
   ),
 );

package/lib/components/ChartWrapper/ChartWrapper.module.css

@@ -1,5 +1,5 @@
 @value (spaceXSmall) from '../../styles/variables/_space.css';
-@value (size960) from '../../styles/variables/_size.css';
+@value (size4,size5,size50,size400,size960) from '../../styles/variables/_size.css';
 
 .wrapper {
   display: flex;
@@ -17,3 +17,10 @@
   overflow-x: auto;
   display: flex;
 }
+
+.loader {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(size4 + size5 + size50 + size400);
+}

package/lib/components/Charts/index.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _charts = require("../../types/charts");
+Object.keys(_charts).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _charts[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _charts[key];
+    }
+  });
+});
 var _ChartWrapper = require("../ChartWrapper");
 Object.keys(_ChartWrapper).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -1,5 +1,6 @@
 // @flow strict
 
+export * from '../../types/charts';
 export * from '../ChartWrapper';
 export * from '../ColumnChart';
 export * from '../DonutChart';

package/lib/components/ColumnChart/ColumnChart.js

@@ -21,6 +21,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const ColumnChart = _ref => {
   let {
+    isLoading,
     classNames,
     cardTitle,
     customExportOptions,
@@ -65,6 +66,7 @@ const ColumnChart = _ref => {
     ...wrapperClassNames
   } = classNames || {};
   return /*#__PURE__*/React.createElement(_ChartWrapper.ChartWrapper, {
+    isLoading: isLoading,
     title: cardTitle,
     ref: chartRef,
     classNames: wrapperClassNames,

package/lib/components/ColumnChart/ColumnChart.js.flow

@@ -6,7 +6,7 @@ import Highcharts from 'highcharts';
 //$FlowFixMe[untyped-import]
 import HighchartsReact from 'highcharts-react-official';
 
-import type {Drilldown} from '../../types/charts';
+import type {DataOptionsType, Drilldown} from '../../types/charts';
 import {
   columnPlotWidth,
   getColumnChartOptions,
@@ -25,22 +25,24 @@ type ClassNames = $ReadOnly<{
   highChart?: string,
 }>;
 
-type ColumnSeriesItem = {
+type ColumnSeries = {
   name: string,
-  data: [],
+  data: DataOptionsType[],
 };
 
 export type ColumnChartProps = {
+  isLoading?: boolean,
   classNames?: ClassNames,
-  cardTitle?: string,
+  cardTitle?: React.Node,
   customExportOptions?: Array<ExportOptionType> | null,
-  series: Array<ColumnSeriesItem>,
-  drilldown: Drilldown,
+  series: Array<ColumnSeries>,
+  drilldown?: Drilldown,
   headerActions?: React.Node,
   ...
 };
 
 export const ColumnChart = ({
+  isLoading,
   classNames,
   cardTitle,
   customExportOptions,
@@ -90,6 +92,7 @@ export const ColumnChart = ({
 
   return (
     <ChartWrapper
+      isLoading={isLoading}
       title={cardTitle}
       ref={chartRef}
       classNames={wrapperClassNames}

package/lib/components/DateRangePicker/Calendar.js

@@ -52,16 +52,20 @@ const Calendar = _ref => {
     key: week[index],
     className: _CalendarModule.default.calendarRow
   }, week.map(date => {
+    const isRangeValid = (0, _utils.isStartDateEndDateSame)(dateRange);
     const isStart = (0, _utils.isStartOfRange)(dateRange, date);
     const isEnd = (0, _utils.isEndOfRange)(dateRange, date);
-    const isRangeValid = (0, _utils.isStartDateEndDateSame)(dateRange);
     const highlighted = (0, _utils.inDateRange)(dateRange, date) || inHoverRange(date);
+    const {
+      onDayClick,
+      onDayHover
+    } = handlers;
     return /*#__PURE__*/React.createElement(_Day.Day, {
       key: date,
       date: date,
       filled: isStart || isEnd,
-      onClick: () => handlers.onDayClick(date),
-      onHover: () => handlers.onDayHover(date),
+      onClick: () => onDayClick(date),
+      onHover: () => onDayHover(date),
       outlined: (0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(), 'd'),
       disabled: (0, _momentTimezone.default)(date).isAfter((0, _utils.formatIsoDate)()) || !(0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(value), 'month'),
       endOfRange: isEnd && !isRangeValid,

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

@@ -82,18 +82,20 @@ export const Calendar = ({
     {getDaysInMonth(value).map((week, index) => (
       <div key={week[index]} className={css.calendarRow}>
         {week.map((date) => {
+          const isRangeValid = isStartDateEndDateSame(dateRange);
           const isStart = isStartOfRange(dateRange, date);
           const isEnd = isEndOfRange(dateRange, date);
-          const isRangeValid = isStartDateEndDateSame(dateRange);
           const highlighted =
             inDateRange(dateRange, date) || inHoverRange(date);
+          const {onDayClick, onDayHover} = handlers;
+
           return (
             <Day
               key={date}
               date={date}
               filled={isStart || isEnd}
-              onClick={() => handlers.onDayClick(date)}
-              onHover={() => handlers.onDayHover(date)}
+              onClick={() => onDayClick(date)}
+              onHover={() => onDayHover(date)}
               outlined={moment(date).isSame(moment(), 'd')}
               disabled={
                 moment(date).isAfter(formatIsoDate()) ||

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -21,48 +21,37 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onApply,
     onCancel,
     classNames,
-    initialDateRange
+    initialDateRange = {}
   } = _ref;
   const today = (0, _utils.formatIsoDate)();
-  let initialFirstMonth = (0, _utils.getSubtractedDate)(today, 1, 'M'),
-    initialSecondMonth = today,
-    initialRangeStart = '',
-    initialRangeEnd = '';
-  if (initialDateRange?.startDate && initialDateRange.endDate) {
-    initialRangeStart = initialFirstMonth = (0, _utils.formatIsoDate)((0, _momentTimezone.default)(initialDateRange.startDate));
-    initialRangeEnd = initialSecondMonth = (0, _utils.formatIsoDate)((0, _momentTimezone.default)(initialDateRange.endDate));
-
-    // If start and end dates are in the same current month, render them in the second calendar since next month isn't enabled yet.
-    if ((0, _momentTimezone.default)(initialRangeStart).isSame((0, _momentTimezone.default)(initialRangeEnd), 'M') && (0, _momentTimezone.default)(initialRangeStart).isSame((0, _momentTimezone.default)(today), 'M')) {
-      initialFirstMonth = (0, _utils.getSubtractedDate)(initialSecondMonth, 1, 'M');
-    } else {
-      initialSecondMonth = (0, _utils.getAddedDate)(initialFirstMonth, 1, 'M');
-    }
-  }
-  const [dateRange, setDateRange] = React.useState({
-    startDate: initialRangeStart,
-    endDate: initialRangeEnd
-  });
-  const [rangeStartMonth, setRangeStartMonth] = React.useState(initialFirstMonth);
-  const [rangeEndMonth, setRangeEndMonth] = React.useState(initialSecondMonth);
+  const currentTimezone = _momentTimezone.default.tz.guess();
+  const {
+    dateRange: initialRange,
+    monthRange
+  } = (0, _utils.getInitialDates)(initialDateRange);
+  const [dateRange, setDateRange] = React.useState(initialRange);
+  const [timeZone, setTimeZone] = React.useState(currentTimezone);
+  const [rangeStartMonth, setRangeStartMonth] = React.useState(monthRange.rangeStartMonth);
+  const [rangeEndMonth, setRangeEndMonth] = React.useState(monthRange.rangeEndMonth);
   const [hoverDay, setHoverDay] = React.useState('');
-  const [timeZone, setTimeZone] = React.useState(_momentTimezone.default.tz.guess());
   const {
     startDate,
     endDate
   } = dateRange;
   const setRangeStartMonthValidated = date => {
-    if ((0, _momentTimezone.default)(date).isBefore(rangeEndMonth)) {
-      setRangeStartMonth(date);
+    if ((0, _momentTimezone.default)(date).isBefore(rangeEndMonth) && (0, _momentTimezone.default)(date).isBefore(today)) {
+      setRangeStartMonth((0, _utils.getMonthStartDate)(date));
     } else {
-      setRangeStartMonth((0, _utils.getSubtractedDate)(rangeEndMonth, 1, 'M'));
+      setRangeStartMonth((0, _utils.getMonthStartDate)((0, _utils.getSubtractedDate)(rangeEndMonth, 1, 'M')));
     }
   };
   const setRangeEndMonthValidated = date => {
-    if ((0, _momentTimezone.default)(date).isAfter(rangeStartMonth)) {
-      setRangeEndMonth(date);
+    if ((0, _momentTimezone.default)(date).isAfter(rangeStartMonth) && (0, _momentTimezone.default)(date).isBefore(today)) {
+      setRangeEndMonth((0, _utils.getMonthStartDate)(date));
+    } else if ((0, _momentTimezone.default)(date).isAfter(rangeStartMonth)) {
+      setRangeEndMonth((0, _utils.getMonthStartDate)(today));
     } else {
-      setRangeEndMonth((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M'));
+      setRangeEndMonth((0, _utils.getMonthStartDate)((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M')));
     }
   };
   const onDayClick = day => {
@@ -73,15 +62,14 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       });
     } else {
       setDateRange({
-        startDate: day,
-        endDate: undefined
+        startDate: day
       });
     }
     setHoverDay(day);
   };
   const onMonthNavigate = (marker, action) => {
     const [firstMonth, secondMonth] = marker === _utils.MARKERS.DATE_RANGE_START ? [rangeStartMonth, rangeEndMonth] : [rangeEndMonth, rangeStartMonth];
-    const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getAddedDate)(firstMonth, 1, 'M') : (0, _utils.getSubtractedDate)(firstMonth, 1, 'M');
+    const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getMonthStartDate)((0, _utils.getAddedDate)(firstMonth, 1, 'M')) : (0, _utils.getMonthStartDate)((0, _utils.getSubtractedDate)(firstMonth, 1, 'M'));
     const isRangeStartMonth = marker === _utils.MARKERS.DATE_RANGE_START;
     const isBeforeCurrentMonth = (0, _momentTimezone.default)(newMonth).isBefore((0, _momentTimezone.default)());
     const isValidMonth = isRangeStartMonth ? (0, _momentTimezone.default)(newMonth).isBefore((0, _momentTimezone.default)(secondMonth)) : (0, _momentTimezone.default)(secondMonth).isBefore((0, _momentTimezone.default)(newMonth));
@@ -89,12 +77,10 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       isRangeStartMonth ? setRangeStartMonth(newMonth) : setRangeEndMonth(newMonth);
     }
   };
+  const inHoverRange = day => Boolean(startDate && !endDate && hoverDay && (0, _momentTimezone.default)(hoverDay).isAfter((0, _momentTimezone.default)(startDate)) && (0, _momentTimezone.default)(day).isBetween((0, _momentTimezone.default)(startDate), (0, _momentTimezone.default)(hoverDay), null, '[]'));
   const onDayHover = date => {
-    if (startDate && !endDate && (!hoverDay || date !== hoverDay)) {
-      setHoverDay(date);
-    }
+    setHoverDay(date);
   };
-  const inHoverRange = day => Boolean(startDate && !endDate && hoverDay && (0, _momentTimezone.default)(hoverDay).isAfter((0, _momentTimezone.default)(startDate)) && (0, _momentTimezone.default)(day).isBetween((0, _momentTimezone.default)(startDate), (0, _momentTimezone.default)(hoverDay)));
   const handlers = {
     onDayClick,
     onDayHover,
@@ -108,8 +94,8 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onCancel: onCancel,
     timeZone: timeZone,
     dateRange: dateRange,
-    rangeStartMonth: rangeStartMonth,
     setTimeZone: setTimeZone,
+    rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
     inHoverRange: inHoverRange,
     setRangeStartMonth: setRangeStartMonthValidated,

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

@@ -7,11 +7,12 @@ import moment from 'moment-timezone';
 import classify from '../../utils/classify';
 
 import {DateRangeWrapper} from './DateRangeWrapper';
+import type {DateRange, DateRangeWithTimezone} from './utils';
 import {
-  type DatePickerSelectedRange,
-  type DateRange,
   formatIsoDate,
   getAddedDate,
+  getInitialDates,
+  getMonthStartDate,
   getSubtractedDate,
   MARKERS,
   NAVIGATION_ACTION,
@@ -25,7 +26,7 @@ type ClassNames = $ReadOnly<{wrapper?: string}>;
 export type DateRangePickerProps = {
   classNames?: ClassNames,
   initialDateRange?: DateRange,
-  onApply: (datePickerSelectedRange: DatePickerSelectedRange) => void,
+  onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void,
   onCancel: () => void,
 };
 
@@ -34,63 +35,57 @@ export const DateRangePicker: React$AbstractComponent<
   HTMLDivElement,
 > = React.forwardRef<DateRangePickerProps, HTMLDivElement>(
   (
-    {onApply, onCancel, classNames, initialDateRange}: DateRangePickerProps,
+    {
+      onApply,
+      onCancel,
+      classNames,
+      initialDateRange = {},
+    }: DateRangePickerProps,
     ref,
   ): React.Node => {
     const today = formatIsoDate();
+    const currentTimezone = moment.tz.guess();
 
-    let initialFirstMonth = getSubtractedDate(today, 1, 'M'),
-      initialSecondMonth = today,
-      initialRangeStart = '',
-      initialRangeEnd = '';
-
-    if (initialDateRange?.startDate && initialDateRange.endDate) {
-      initialRangeStart = initialFirstMonth = formatIsoDate(
-        moment(initialDateRange.startDate),
-      );
-      initialRangeEnd = initialSecondMonth = formatIsoDate(
-        moment(initialDateRange.endDate),
-      );
-
-      // If start and end dates are in the same current month, render them in the second calendar since next month isn't enabled yet.
-      if (
-        moment(initialRangeStart).isSame(moment(initialRangeEnd), 'M') &&
-        moment(initialRangeStart).isSame(moment(today), 'M')
-      ) {
-        initialFirstMonth = getSubtractedDate(initialSecondMonth, 1, 'M');
-      } else {
-        initialSecondMonth = getAddedDate(initialFirstMonth, 1, 'M');
-      }
-    }
-
-    const [dateRange, setDateRange] = React.useState<DateRange>({
-      startDate: initialRangeStart,
-      endDate: initialRangeEnd,
-    });
-
-    const [rangeStartMonth, setRangeStartMonth] =
-      React.useState<string>(initialFirstMonth);
-    const [rangeEndMonth, setRangeEndMonth] =
-      React.useState<string>(initialSecondMonth);
+    const {dateRange: initialRange, monthRange} =
+      getInitialDates(initialDateRange);
 
+    const [dateRange, setDateRange] = React.useState<DateRange>(initialRange);
+    const [timeZone, setTimeZone] = React.useState<string>(currentTimezone);
+    const [rangeStartMonth, setRangeStartMonth] = React.useState<string>(
+      monthRange.rangeStartMonth,
+    );
+    const [rangeEndMonth, setRangeEndMonth] = React.useState<string>(
+      monthRange.rangeEndMonth,
+    );
     const [hoverDay, setHoverDay] = React.useState<string>('');
-    const [timeZone, setTimeZone] = React.useState<string>(moment.tz.guess());
 
     const {startDate, endDate} = dateRange;
 
     const setRangeStartMonthValidated = (date: string) => {
-      if (moment(date).isBefore(rangeEndMonth)) {
-        setRangeStartMonth(date);
+      if (
+        moment(date).isBefore(rangeEndMonth) &&
+        moment(date).isBefore(today)
+      ) {
+        setRangeStartMonth(getMonthStartDate(date));
       } else {
-        setRangeStartMonth(getSubtractedDate(rangeEndMonth, 1, 'M'));
+        setRangeStartMonth(
+          getMonthStartDate(getSubtractedDate(rangeEndMonth, 1, 'M')),
+        );
       }
     };
 
     const setRangeEndMonthValidated = (date: string) => {
-      if (moment(date).isAfter(rangeStartMonth)) {
-        setRangeEndMonth(date);
+      if (
+        moment(date).isAfter(rangeStartMonth) &&
+        moment(date).isBefore(today)
+      ) {
+        setRangeEndMonth(getMonthStartDate(date));
+      } else if (moment(date).isAfter(rangeStartMonth)) {
+        setRangeEndMonth(getMonthStartDate(today));
       } else {
-        setRangeEndMonth(getAddedDate(rangeStartMonth, 1, 'M'));
+        setRangeEndMonth(
+          getMonthStartDate(getAddedDate(rangeStartMonth, 1, 'M')),
+        );
       }
     };
 
@@ -98,7 +93,7 @@ export const DateRangePicker: React$AbstractComponent<
       if (startDate && !endDate && moment(day).isSameOrAfter(startDate)) {
         setDateRange({startDate, endDate: day});
       } else {
-        setDateRange({startDate: day, endDate: undefined});
+        setDateRange({startDate: day});
       }
       setHoverDay(day);
     };
@@ -114,8 +109,8 @@ export const DateRangePicker: React$AbstractComponent<
 
       const newMonth =
         action === NAVIGATION_ACTION.NEXT
-          ? getAddedDate(firstMonth, 1, 'M')
-          : getSubtractedDate(firstMonth, 1, 'M');
+          ? getMonthStartDate(getAddedDate(firstMonth, 1, 'M'))
+          : getMonthStartDate(getSubtractedDate(firstMonth, 1, 'M'));
 
       const isRangeStartMonth = marker === MARKERS.DATE_RANGE_START;
       const isBeforeCurrentMonth = moment(newMonth).isBefore(moment());
@@ -130,21 +125,24 @@ export const DateRangePicker: React$AbstractComponent<
       }
     };
 
-    const onDayHover = (date: string) => {
-      if (startDate && !endDate && (!hoverDay || date !== hoverDay)) {
-        setHoverDay(date);
-      }
-    };
-
     const inHoverRange = (day: string): boolean =>
       Boolean(
         startDate &&
           !endDate &&
           hoverDay &&
           moment(hoverDay).isAfter(moment(startDate)) &&
-          moment(day).isBetween(moment(startDate), moment(hoverDay)),
+          moment(day).isBetween(
+            moment(startDate),
+            moment(hoverDay),
+            null,
+            '[]',
+          ),
       );
 
+    const onDayHover = (date: string) => {
+      setHoverDay(date);
+    };
+
     const handlers = {
       onDayClick,
       onDayHover,
@@ -160,8 +158,8 @@ export const DateRangePicker: React$AbstractComponent<
         onCancel={onCancel}
         timeZone={timeZone}
         dateRange={dateRange}
-        rangeStartMonth={rangeStartMonth}
         setTimeZone={setTimeZone}
+        rangeStartMonth={rangeStartMonth}
         rangeEndMonth={rangeEndMonth}
         inHoverRange={inHoverRange}
         setRangeStartMonth={setRangeStartMonthValidated}