@spaced-out/ui-design-system 0.1.109 → 0.1.111

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.111](https://github.com/spaced-out/ui-design-system/compare/v0.1.110...v0.1.111) (2024-07-15)
+
+
+### Features
+
+* group title action menu & minDate/maxDate support in DateRangePicker  ([#226](https://github.com/spaced-out/ui-design-system/issues/226)) ([cba21e6](https://github.com/spaced-out/ui-design-system/commit/cba21e604a53043a5d17d495346d5e37f3097d81))
+
+
+### Bug Fixes
+
+* date range picker default startDate and endDate ([#241](https://github.com/spaced-out/ui-design-system/issues/241)) ([ce3527b](https://github.com/spaced-out/ui-design-system/commit/ce3527bdd41913dc1179632be249ae599005a1d5))
+
+### [0.1.110](https://github.com/spaced-out/ui-design-system/compare/v0.1.109...v0.1.110) (2024-07-12)
+
+
+### Bug Fixes
+
+* 🔢 prevents users from typing exponent characters in the number input field based on a prop ([#240](https://github.com/spaced-out/ui-design-system/issues/240)) ([db982e2](https://github.com/spaced-out/ui-design-system/commit/db982e2fbf754a57b778ee5b35de1dd39853bcda))
+
 ### [0.1.109](https://github.com/spaced-out/ui-design-system/compare/v0.1.108...v0.1.109) (2024-07-11)
 
 

package/lib/components/DateRangePicker/Calendar.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.Calendar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _utils = require("../../utils");
 var _Text = require("../Text");
 var _Day = require("./Day");
-var _utils = require("./utils");
 var _CalendarModule = _interopRequireDefault(require("./Calendar.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); }
@@ -32,6 +32,8 @@ const Calendar = _ref => {
   let {
     value,
     marker,
+    minDate,
+    maxDate = (0, _utils.formatIsoDate)(),
     handlers,
     hoverDay,
     dateRange,
@@ -67,7 +69,7 @@ const Calendar = _ref => {
       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'),
+      disabled: minDate && (0, _momentTimezone.default)(date).isBefore(minDate) || (0, _momentTimezone.default)(date).isAfter(maxDate) || !(0, _momentTimezone.default)(date).isSame((0, _momentTimezone.default)(value), 'month'),
       endOfRange: isEnd && !isRangeValid,
       highlighted: highlighted && !isRangeValid,
       startOfRange: isStart && !isRangeValid,

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

@@ -4,11 +4,8 @@ import * as React from 'react';
 // $FlowFixMe[untyped-import]
 import moment from 'moment-timezone';
 
-import {BodySmall, SubTitleExtraSmall, TEXT_COLORS} from '../Text';
-
-import {Day} from './Day';
+import type {DateRange} from '../../types';
 import {
-  type DateRange,
   formatIsoDate,
   getDaysInMonth,
   inDateRange,
@@ -18,7 +15,10 @@ import {
   MARKERS,
   NAVIGATION_ACTION,
   WEEKDAYS,
-} from './utils';
+} from '../../utils';
+import {BodySmall, SubTitleExtraSmall, TEXT_COLORS} from '../Text';
+
+import {Day} from './Day';
 
 import css from './Calendar.module.css';
 
@@ -26,6 +26,8 @@ import css from './Calendar.module.css';
 type CalendarProps = {
   value: string,
   marker: $Values<typeof MARKERS>,
+  minDate?: string,
+  maxDate?: string,
   hoverDay: string,
   dateRange: DateRange,
   inHoverRange: (day: string) => boolean,
@@ -54,6 +56,8 @@ const getFormattedDate = (marker: string, dateRange: DateRange) => {
 export const Calendar = ({
   value,
   marker,
+  minDate,
+  maxDate = formatIsoDate(),
   handlers,
   hoverDay,
   dateRange,
@@ -98,7 +102,8 @@ export const Calendar = ({
               onHover={() => onDayHover(date)}
               outlined={moment(date).isSame(moment(), 'd')}
               disabled={
-                moment(date).isAfter(formatIsoDate()) ||
+                (minDate && moment(date).isBefore(minDate)) ||
+                moment(date).isAfter(maxDate) ||
                 !moment(date).isSame(moment(value), 'month')
               }
               endOfRange={isEnd && !isRangeValid}

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.DateRangePicker = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _DateRangeWrapper = require("./DateRangeWrapper");
-var _utils = require("./utils");
 var _DateRangePickerModule = _interopRequireDefault(require("./DateRangePicker.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); }
@@ -18,44 +18,61 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
+    minDate,
+    maxDate,
     onApply,
+    onError,
     onCancel,
     classNames,
-    selectedDateRange = {},
-    hideTimezone = false
+    hideTimezone = false,
+    selectedDateRange = {}
   } = _ref;
   const today = (0, _utils.formatIsoDate)();
   const {
-    timezone: initialTimezone,
-    dateRange: initialRange,
-    monthRange
-  } = (0, _utils.getInitialDates)(selectedDateRange);
-  const [dateRange, setDateRange] = React.useState(initialRange);
-  const [timezone, setTimezone] = React.useState(initialTimezone);
-  const [rangeStartMonth, setRangeStartMonth] = React.useState(monthRange.rangeStartMonth);
-  const [rangeEndMonth, setRangeEndMonth] = React.useState(monthRange.rangeEndMonth);
-  const [hoverDay, setHoverDay] = React.useState('');
+    validMinDate,
+    validMaxDate,
+    validTimezone,
+    validDateRange
+  } = (0, _utils.getValidDates)(selectedDateRange, minDate, maxDate, onError);
   const {
     startDate,
     endDate
-  } = dateRange;
+  } = validDateRange;
+  const validRangeEndMonth = endDate ? (0, _utils.getMonthEndDate)(endDate) : (0, _utils.getMonthEndDate)(today);
+  const validRangeStartMonth = startDate && !(0, _momentTimezone.default)(startDate).isSame(endDate, 'M') ? (0, _utils.getMonthEndDate)(startDate) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(validRangeEndMonth, 1, 'M'));
+  const [dateRange, setDateRange] = React.useState(validDateRange);
+  const [timezone, setTimezone] = React.useState(validTimezone);
+  const [hoverDay, setHoverDay] = React.useState('');
+  const [rangeStartMonth, setRangeStartMonth] = React.useState(validRangeStartMonth);
+  const [rangeEndMonth, setRangeEndMonth] = React.useState(validRangeEndMonth);
   const setRangeStartMonthValidated = date => {
-    if ((0, _momentTimezone.default)(date).isBefore(rangeEndMonth) && (0, _momentTimezone.default)(date).isBefore(today)) {
-      setRangeStartMonth((0, _utils.getMonthStartDate)(date));
+    if ((0, _momentTimezone.default)(date).isSameOrAfter(validMinDate) && (0, _momentTimezone.default)(date).isBefore(rangeEndMonth)) {
+      setRangeStartMonth(date);
     } else {
-      setRangeStartMonth((0, _utils.getMonthStartDate)((0, _utils.getSubtractedDate)(rangeEndMonth, 1, 'M')));
+      setRangeStartMonth((0, _utils.getMonthEndDate)(validMinDate));
     }
   };
   const setRangeEndMonthValidated = 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));
+    if ((0, _momentTimezone.default)(date).isSameOrBefore(validMaxDate) && (0, _momentTimezone.default)(date).isAfter(rangeStartMonth)) {
+      setRangeEndMonth(date);
     } else {
-      setRangeEndMonth((0, _utils.getMonthStartDate)((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M')));
+      setRangeEndMonth((0, _utils.getMonthEndDate)(validMaxDate));
+    }
+  };
+  const onMonthNavigate = (marker, action) => {
+    if (marker === _utils.MARKERS.DATE_RANGE_START) {
+      const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(rangeStartMonth, 1, 'M')) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(rangeStartMonth, 1, 'M'));
+      setRangeStartMonthValidated(newMonth);
+    } else {
+      const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(rangeEndMonth, 1, 'M')) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(rangeEndMonth, 1, 'M'));
+      setRangeEndMonthValidated(newMonth);
     }
   };
   const onDayClick = day => {
+    const {
+      startDate,
+      endDate
+    } = dateRange;
     if (startDate && !endDate && (0, _momentTimezone.default)(day).isSameOrAfter(startDate)) {
       setDateRange({
         startDate,
@@ -68,27 +85,22 @@ const DateRangePicker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     }
     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.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));
-    if (isBeforeCurrentMonth && isValidMonth) {
-      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 => {
-    setHoverDay(date);
+  const inHoverRange = day => {
+    const {
+      startDate,
+      endDate
+    } = dateRange;
+    return 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 handlers = {
     onDayClick,
-    onDayHover,
+    onDayHover: setHoverDay,
     onMonthNavigate
   };
   return /*#__PURE__*/React.createElement(_DateRangeWrapper.DateRangeWrapper, {
     ref: ref,
+    minDate: validMinDate,
+    maxDate: validMaxDate,
     onApply: onApply,
     handlers: handlers,
     hoverDay: hoverDay,

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

@@ -4,19 +4,23 @@ import * as React from 'react';
 // $FlowFixMe[untyped-import]
 import moment from 'moment-timezone';
 
-import classify from '../../utils/classify';
-
-import {DateRangeWrapper} from './DateRangeWrapper';
-import type {DateRange, DateRangeWithTimezone} from './utils';
+import type {
+  DateRange,
+  DateRangePickerError,
+  DateRangeWithTimezone,
+} from '../../types';
 import {
   formatIsoDate,
   getAddedDate,
-  getInitialDates,
-  getMonthStartDate,
+  getMonthEndDate,
   getSubtractedDate,
+  getValidDates,
   MARKERS,
   NAVIGATION_ACTION,
-} from './utils';
+} from '../../utils';
+import classify from '../../utils/classify';
+
+import {DateRangeWrapper} from './DateRangeWrapper';
 
 import css from './DateRangePicker.module.css';
 
@@ -27,8 +31,11 @@ export type DateRangePickerProps = {
   classNames?: ClassNames,
   selectedDateRange?: DateRangeWithTimezone,
   onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void,
+  onError?: (DateRangePickerError) => void,
   onCancel: () => void,
   hideTimezone?: boolean,
+  minDate?: string,
+  maxDate?: string,
 };
 
 export const DateRangePicker: React$AbstractComponent<
@@ -37,63 +44,84 @@ export const DateRangePicker: React$AbstractComponent<
 > = React.forwardRef<DateRangePickerProps, HTMLDivElement>(
   (
     {
+      minDate,
+      maxDate,
       onApply,
+      onError,
       onCancel,
       classNames,
-      selectedDateRange = {},
       hideTimezone = false,
+      selectedDateRange = {},
     }: DateRangePickerProps,
     ref,
   ): React.Node => {
     const today = formatIsoDate();
 
-    const {
-      timezone: initialTimezone,
-      dateRange: initialRange,
-      monthRange,
-    } = getInitialDates(selectedDateRange);
+    const {validMinDate, validMaxDate, validTimezone, validDateRange} =
+      getValidDates(selectedDateRange, minDate, maxDate, onError);
 
-    const [dateRange, setDateRange] = React.useState<DateRange>(initialRange);
-    const [timezone, setTimezone] = React.useState<string>(initialTimezone);
-    const [rangeStartMonth, setRangeStartMonth] = React.useState<string>(
-      monthRange.rangeStartMonth,
-    );
-    const [rangeEndMonth, setRangeEndMonth] = React.useState<string>(
-      monthRange.rangeEndMonth,
-    );
-    const [hoverDay, setHoverDay] = React.useState<string>('');
+    const {startDate, endDate} = validDateRange;
+    const validRangeEndMonth = endDate
+      ? getMonthEndDate(endDate)
+      : getMonthEndDate(today);
+    const validRangeStartMonth =
+      startDate && !moment(startDate).isSame(endDate, 'M')
+        ? getMonthEndDate(startDate)
+        : getMonthEndDate(getSubtractedDate(validRangeEndMonth, 1, 'M'));
 
-    const {startDate, endDate} = dateRange;
+    const [dateRange, setDateRange] = React.useState<DateRange>(validDateRange);
+    const [timezone, setTimezone] = React.useState<string>(validTimezone);
+    const [hoverDay, setHoverDay] = React.useState<string>('');
+    const [rangeStartMonth, setRangeStartMonth] =
+      React.useState<string>(validRangeStartMonth);
+    const [rangeEndMonth, setRangeEndMonth] =
+      React.useState<string>(validRangeEndMonth);
 
     const setRangeStartMonthValidated = (date: string) => {
       if (
-        moment(date).isBefore(rangeEndMonth) &&
-        moment(date).isBefore(today)
+        moment(date).isSameOrAfter(validMinDate) &&
+        moment(date).isBefore(rangeEndMonth)
       ) {
-        setRangeStartMonth(getMonthStartDate(date));
+        setRangeStartMonth(date);
       } else {
-        setRangeStartMonth(
-          getMonthStartDate(getSubtractedDate(rangeEndMonth, 1, 'M')),
-        );
+        setRangeStartMonth(getMonthEndDate(validMinDate));
       }
     };
 
     const setRangeEndMonthValidated = (date: string) => {
       if (
-        moment(date).isAfter(rangeStartMonth) &&
-        moment(date).isBefore(today)
+        moment(date).isSameOrBefore(validMaxDate) &&
+        moment(date).isAfter(rangeStartMonth)
       ) {
-        setRangeEndMonth(getMonthStartDate(date));
-      } else if (moment(date).isAfter(rangeStartMonth)) {
-        setRangeEndMonth(getMonthStartDate(today));
+        setRangeEndMonth(date);
+      } else {
+        setRangeEndMonth(getMonthEndDate(validMaxDate));
+      }
+    };
+
+    const onMonthNavigate = (
+      marker: $Values<typeof MARKERS>,
+      action: $Values<typeof NAVIGATION_ACTION>,
+    ) => {
+      if (marker === MARKERS.DATE_RANGE_START) {
+        const newMonth =
+          action === NAVIGATION_ACTION.NEXT
+            ? getMonthEndDate(getAddedDate(rangeStartMonth, 1, 'M'))
+            : getMonthEndDate(getSubtractedDate(rangeStartMonth, 1, 'M'));
+
+        setRangeStartMonthValidated(newMonth);
       } else {
-        setRangeEndMonth(
-          getMonthStartDate(getAddedDate(rangeStartMonth, 1, 'M')),
-        );
+        const newMonth =
+          action === NAVIGATION_ACTION.NEXT
+            ? getMonthEndDate(getAddedDate(rangeEndMonth, 1, 'M'))
+            : getMonthEndDate(getSubtractedDate(rangeEndMonth, 1, 'M'));
+
+        setRangeEndMonthValidated(newMonth);
       }
     };
 
     const onDayClick = (day: string) => {
+      const {startDate, endDate} = dateRange;
       if (startDate && !endDate && moment(day).isSameOrAfter(startDate)) {
         setDateRange({startDate, endDate: day});
       } else {
@@ -102,35 +130,9 @@ export const DateRangePicker: React$AbstractComponent<
       setHoverDay(day);
     };
 
-    const onMonthNavigate = (
-      marker: $Values<typeof MARKERS>,
-      action: $Values<typeof NAVIGATION_ACTION>,
-    ) => {
-      const [firstMonth, secondMonth] =
-        marker === MARKERS.DATE_RANGE_START
-          ? [rangeStartMonth, rangeEndMonth]
-          : [rangeEndMonth, rangeStartMonth];
-
-      const newMonth =
-        action === NAVIGATION_ACTION.NEXT
-          ? getMonthStartDate(getAddedDate(firstMonth, 1, 'M'))
-          : getMonthStartDate(getSubtractedDate(firstMonth, 1, 'M'));
-
-      const isRangeStartMonth = marker === MARKERS.DATE_RANGE_START;
-      const isBeforeCurrentMonth = moment(newMonth).isBefore(moment());
-      const isValidMonth = isRangeStartMonth
-        ? moment(newMonth).isBefore(moment(secondMonth))
-        : moment(secondMonth).isBefore(moment(newMonth));
-
-      if (isBeforeCurrentMonth && isValidMonth) {
-        isRangeStartMonth
-          ? setRangeStartMonth(newMonth)
-          : setRangeEndMonth(newMonth);
-      }
-    };
-
-    const inHoverRange = (day: string): boolean =>
-      Boolean(
+    const inHoverRange = (day: string): boolean => {
+      const {startDate, endDate} = dateRange;
+      return Boolean(
         startDate &&
           !endDate &&
           hoverDay &&
@@ -142,20 +144,19 @@ export const DateRangePicker: React$AbstractComponent<
             '[]',
           ),
       );
-
-    const onDayHover = (date: string) => {
-      setHoverDay(date);
     };
 
     const handlers = {
       onDayClick,
-      onDayHover,
+      onDayHover: setHoverDay,
       onMonthNavigate,
     };
 
     return (
       <DateRangeWrapper
         ref={ref}
+        minDate={validMinDate}
+        maxDate={validMaxDate}
         onApply={onApply}
         handlers={handlers}
         hoverDay={hoverDay}

package/lib/components/DateRangePicker/DateRangeWrapper.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DateRangeWrapper = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
+var _utils = require("../../utils");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Button = require("../Button");
 var _Card = require("../Card");
@@ -13,7 +14,6 @@ var _Dropdown = require("../Dropdown");
 var _FocusManager = require("../FocusManager");
 var _Icon = require("../Icon");
 var _Calendar = require("./Calendar.js");
-var _utils = require("./utils");
 var _DateRangeWrapperModule = _interopRequireDefault(require("./DateRangeWrapper.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); }
@@ -23,6 +23,8 @@ const CalendarHeader = _ref => {
   let {
     date,
     marker,
+    minDate,
+    maxDate,
     setMonth,
     rangeStartMonth,
     rangeEndMonth,
@@ -31,6 +33,20 @@ const CalendarHeader = _ref => {
     prevDisabled,
     onClickPrevious
   } = _ref;
+  const availableYears = (0, _utils.generateAvailableYears)({
+    marker,
+    minDate,
+    maxDate,
+    rangeStartMonth,
+    rangeEndMonth
+  });
+  const availableMonths = (0, _utils.getAvailableMonths)({
+    marker,
+    minDate,
+    maxDate,
+    rangeStartMonth,
+    rangeEndMonth
+  });
   return /*#__PURE__*/React.createElement("div", {
     className: _DateRangeWrapperModule.default.calendarHeader
   }, /*#__PURE__*/React.createElement(_Icon.ClickableIcon, {
@@ -44,23 +60,25 @@ const CalendarHeader = _ref => {
     color: prevDisabled ? 'disabled' : 'secondary'
   }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
     size: "small",
+    disabled: !availableMonths.length || (0, _momentTimezone.default)(minDate).isAfter(maxDate),
     menu: {
       selectedKeys: [(0, _momentTimezone.default)(date).month().toString()],
-      options: (0, _utils.getAvailableMonths)(_utils.MONTHS, rangeStartMonth, rangeEndMonth, marker)
+      options: availableMonths
     },
     onChange: event => {
-      setMonth((0, _utils.getMonthStartDate)((0, _momentTimezone.default)(date).set('M', event.key)));
+      setMonth((0, _utils.getMonthEndDate)((0, _momentTimezone.default)(date).set('M', event.key)));
     },
     dropdownInputText: _utils.MONTHS[(0, _momentTimezone.default)(date).month()].label,
     scrollMenuToBottom: true
   }), /*#__PURE__*/React.createElement(_Dropdown.Dropdown, {
+    disabled: !availableYears.length || (0, _momentTimezone.default)(minDate).isAfter(maxDate),
     menu: {
       selectedKeys: [(0, _momentTimezone.default)(date).year().toString()],
-      options: (0, _utils.generateAvailableYears)(45, rangeStartMonth, rangeEndMonth, marker)
+      options: availableYears
     },
     size: "small",
     onChange: event => {
-      setMonth((0, _utils.getMonthStartDate)((0, _momentTimezone.default)(date).set('y', event.key)));
+      setMonth((0, _utils.getMonthEndDate)((0, _momentTimezone.default)(date).set('y', event.key)));
     },
     dropdownInputText: (0, _momentTimezone.default)(date).year(),
     scrollMenuToBottom: true
@@ -81,6 +99,8 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     onCancel,
     handlers,
     hoverDay,
+    minDate,
+    maxDate,
     timezone,
     dateRange,
     rangeStartMonth,
@@ -115,7 +135,9 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     inHoverRange,
     handlers,
     hoverDay,
-    dateRange
+    dateRange,
+    minDate,
+    maxDate
   };
   return /*#__PURE__*/React.createElement(_FocusManager.FocusManager, null, /*#__PURE__*/React.createElement(_Card.Card, {
     classNames: {
@@ -131,7 +153,9 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     date: rangeStartMonth,
     setMonth: setRangeStartMonth,
     nextDisabled: !canNavigateCloser,
-    prevDisabled: false,
+    prevDisabled: (0, _momentTimezone.default)(rangeStartMonth).isSameOrBefore(minDate, 'M'),
+    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)
   }), /*#__PURE__*/React.createElement(CalendarHeader, {
@@ -140,8 +164,10 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     rangeEndMonth: rangeEndMonth,
     date: rangeEndMonth,
     setMonth: setRangeEndMonth,
-    nextDisabled: (0, _momentTimezone.default)((0, _utils.getAddedDate)(rangeEndMonth, 1, 'M')).isSameOrAfter((0, _momentTimezone.default)()),
+    nextDisabled: (0, _momentTimezone.default)(rangeEndMonth).isSameOrAfter(maxDate, 'M'),
     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)
   })), /*#__PURE__*/React.createElement(_Card.CardContent, {
@@ -158,6 +184,7 @@ const DateRangeWrapper = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     className: _DateRangeWrapperModule.default.timezoneDropdownContainer
   }, !hideTimezone && /*#__PURE__*/React.createElement(_Dropdown.SimpleDropdown, {
     options: (0, _utils.getTimezones)(),
+    disabled: (0, _momentTimezone.default)(minDate).isAfter(maxDate),
     classNames: {
       box: _DateRangeWrapperModule.default.timezoneDropdown
     },