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

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.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)
+
+
+### Features
+
+* adding prop to disable hover on chip ([#200](https://github.com/spaced-out/ui-design-system/issues/200)) ([65a60dd](https://github.com/spaced-out/ui-design-system/commit/65a60dda9b9180b8be8a4145991590f2fe04d2d8))
+
 ### [0.1.93-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.1.93-beta.0...v0.1.93-beta.1) (2024-05-07)
 
 

package/lib/components/Chip/Chip.js

@@ -32,6 +32,7 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     iconName = '',
     iconType = 'regular',
     showStatusIndicator,
+    disableHoverState = false,
     dismissable = false,
     onDismiss = () => null,
     onClick,
@@ -54,7 +55,7 @@ const Chip = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_ChipModule.default.dismissable]: dismissable,
       [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
       [_ChipModule.default.disabled]: disabled,
-      [_ChipModule.default.noHoverState]: showStatusIndicator
+      [_ChipModule.default.noHoverState]: showStatusIndicator || disableHoverState
     }, classNames?.wrapper),
     onClick: onClick
   }), showStatusIndicator && size !== 'small' && /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {

package/lib/components/Chip/Chip.js.flow

@@ -34,6 +34,7 @@ export type BaseChipProps = {
   children: React.Node,
   disabled?: boolean,
   showStatusIndicator?: boolean,
+  disableHoverState?: boolean,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMouseEnter?: ?(SyntheticEvent<HTMLElement>) => mixed,
   onMouseLeave?: ?(SyntheticEvent<HTMLElement>) => mixed,
@@ -65,6 +66,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
         iconName = '',
         iconType = 'regular',
         showStatusIndicator,
+        disableHoverState = false,
         dismissable = false,
         onDismiss = () => null,
         onClick,
@@ -91,7 +93,7 @@ export const Chip: React$AbstractComponent<ChipProps, HTMLDivElement> =
             [css.dismissable]: dismissable,
             [css.withIcon]: !!iconName && size !== 'small',
             [css.disabled]: disabled,
-            [css.noHoverState]: showStatusIndicator,
+            [css.noHoverState]: showStatusIndicator || disableHoverState,
           },
           classNames?.wrapper,
         )}

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}

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;