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

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.5.27](https://github.com/spaced-out/ui-design-system/compare/v0.5.26...v0.5.27) (2025-11-24)
+
+
+### Features
+
+* **GDS-540:** Small Date Range ([#419](https://github.com/spaced-out/ui-design-system/issues/419)) ([01ebf91](https://github.com/spaced-out/ui-design-system/commit/01ebf91060231df5838ab5f32e2282001f6f06c5))
+
+### [0.5.26](https://github.com/spaced-out/ui-design-system/compare/v0.5.25...v0.5.26) (2025-11-20)
+
+
+### Bug Fixes
+
+* positioning fix checklist content ([#437](https://github.com/spaced-out/ui-design-system/issues/437)) ([ff3d233](https://github.com/spaced-out/ui-design-system/commit/ff3d2337bf261548ddbffdece5460ffd98624aa2))
+
 ### [0.5.25](https://github.com/spaced-out/ui-design-system/compare/v0.5.24...v0.5.25) (2025-11-20)
 
 

package/lib/components/Checklist/Checklist.module.css

@@ -70,8 +70,8 @@
   display: flex;
   flex-flow: column;
   background-color: colorBackgroundPrimary;
-  position: absolute;
-  top: calc(sizeFluid - size20);
+  position: relative;
+  margin-top: calc(-1 * size20);
   border-radius: borderRadiusSmall;
   width: sizeFluid;
 }

package/lib/components/DateRangePicker/Calendar.d.ts

@@ -18,6 +18,12 @@ interface CalendarProps {
     t: ((key: string, fallback: string) => string) | null | undefined;
     testId?: string;
 }
+interface CalendarMobileProps extends Omit<CalendarProps, 'marker' | 'handlers'> {
+    handlers: Omit<CalendarProps['handlers'], 'onMonthNavigate'> & {
+        onMonthNavigate: (action: (typeof NAVIGATION_ACTION)[keyof typeof NAVIGATION_ACTION]) => void;
+    };
+}
 export declare const Calendar: ({ value, minDate, maxDate, handlers, hoverDay, dateRange, inHoverRange, today, t, testId, }: CalendarProps) => React.JSX.Element;
+export declare const CalendarMobile: ({ value, minDate, maxDate, handlers, hoverDay, dateRange, inHoverRange, today, t, testId, }: CalendarMobileProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=Calendar.d.ts.map

package/lib/components/DateRangePicker/Calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,WAAW,CAAC;AAwB1D,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,QAAQ,GAAI,6FAWtB,aAAa,sBA4Df,CAAC"}
+{"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/Calendar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AACzC,OAAO,KAAK,EAAC,OAAO,EAAE,iBAAiB,EAAC,MAAM,WAAW,CAAC;AAwB1D,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,UAAU,mBACR,SAAQ,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,UAAU,CAAC;IAClD,QAAQ,EAAE,IAAI,CAAC,aAAa,CAAC,UAAU,CAAC,EAAE,iBAAiB,CAAC,GAAG;QAC7D,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;CACH;AAsBD,eAAO,MAAM,QAAQ,GAAI,6FAWtB,aAAa,sBAmDf,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,6FAW5B,mBAAmB,sBAoDrB,CAAC"}

package/lib/components/DateRangePicker/Calendar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Calendar = void 0;
+exports.CalendarMobile = exports.Calendar = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _utils = require("../../utils");
@@ -15,7 +15,29 @@ var _CalendarModule = _interopRequireDefault(require("./Calendar.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const Calendar = _ref => {
+const WeekDayHeader = _ref => {
+  let {
+    t,
+    testId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: _CalendarModule.default.calendarRow,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'weekdays'
+    }),
+    children: _utils.WEEKDAYS.map(day => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
+      className: _CalendarModule.default.calendarRowItem,
+      color: _Text.TEXT_COLORS.tertiary,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: `weekday-${day}`
+      }),
+      children: (0, _dateRangePicker.getTranslation)(t, day)
+    }, day))
+  });
+};
+const Calendar = _ref2 => {
   let {
     value,
     minDate,
@@ -27,28 +49,16 @@ const Calendar = _ref => {
     today,
     t,
     testId
-  } = _ref;
+  } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: _CalendarModule.default.calendar,
     "data-testid": (0, _qa.generateTestId)({
       base: testId,
       slot: `calendar-${value}`
     }),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-      className: _CalendarModule.default.calendarRow,
-      "data-testid": (0, _qa.generateTestId)({
-        base: testId,
-        slot: 'weekdays'
-      }),
-      children: _utils.WEEKDAYS.map(day => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.BodySmall, {
-        className: _CalendarModule.default.calendarRowItem,
-        color: _Text.TEXT_COLORS.tertiary,
-        testId: (0, _qa.generateTestId)({
-          base: testId,
-          slot: `weekday-${day}`
-        }),
-        children: (0, _dateRangePicker.getTranslation)(t, day)
-      }, day))
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(WeekDayHeader, {
+      t: t,
+      testId: testId
     }), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: _CalendarModule.default.calendarRow,
       "data-testid": (0, _qa.generateTestId)({
@@ -80,10 +90,71 @@ const Calendar = _ref => {
           testId: (0, _qa.generateTestId)({
             base: testId,
             slot: `day-${date}`
-          })
+          }),
+          inDateRange: Boolean(dateRange.startDate && dateRange.endDate && (0, _utils.inDateRange)(dateRange, date))
         }, date);
       })
     }, week[index]))]
   });
 };
-exports.Calendar = Calendar;
+exports.Calendar = Calendar;
+const CalendarMobile = _ref3 => {
+  let {
+    value,
+    minDate,
+    maxDate = (0, _utils.formatIsoDate)(),
+    handlers,
+    hoverDay,
+    dateRange,
+    inHoverRange,
+    today,
+    t,
+    testId
+  } = _ref3;
+  const monthMoment = _moment.default.utc(value, 'YYYY-MM');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _CalendarModule.default.calendarMobile,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: `calendar-${value}`
+    }),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(WeekDayHeader, {
+      t: t,
+      testId: testId
+    }), (0, _utils.getDaysInMonth)(value).map((week, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: _CalendarModule.default.calendarRow,
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: `week-${index}`
+      }),
+      children: week.map(date => {
+        const isStart = date === dateRange.startDate;
+        const isEnd = date === dateRange.endDate;
+        const highlighted = (0, _utils.inDateRange)(dateRange, date) || inHoverRange(date);
+        const {
+          onDayClick,
+          onDayHover
+        } = handlers;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Day.Day, {
+          date: date,
+          filled: isStart || isEnd,
+          startOfRange: isStart && !dateRange.endDate,
+          endOfRange: isEnd && !dateRange.startDate,
+          highlighted: highlighted,
+          outlined: date === today,
+          disabled: minDate && (0, _dateRangePicker.isBefore)(date, minDate) || maxDate && (0, _dateRangePicker.isAfter)(date, maxDate) || !monthMoment.isSame(_moment.default.utc(date), 'month'),
+          value: _moment.default.utc(date).date().toString(),
+          hoverDay: hoverDay,
+          onClick: () => onDayClick(date),
+          onHover: () => onDayHover(date),
+          testId: (0, _qa.generateTestId)({
+            base: testId,
+            slot: `day-${date}`
+          }),
+          inDateRange: Boolean(dateRange.startDate && dateRange.endDate && (0, _utils.inDateRange)(dateRange, date))
+        }, date);
+      })
+    }, week[0]))]
+  });
+};
+exports.CalendarMobile = CalendarMobile;

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

@@ -23,6 +23,15 @@
   gap: spaceNone;
 }
 
+.calendarMobile {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: spaceFluid;
+  padding: spaceXSmall spaceLarge;
+  gap: spaceNone;
+}
+
 .calendarRow {
   display: grid;
   grid-template-columns: repeat(7, 1fr);

package/lib/components/DateRangePicker/DateRangePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAyBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAgKf,CAAC"}
+{"version":3,"file":"DateRangePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAEV,oBAAoB,EACpB,qBAAqB,EACtB,MAAM,WAAW,CAAC;AAsBnB,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC,CAAC;AAEH,MAAM,WAAW,oBAAoB;IACnC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAC1C,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAC/C,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CA2Of,CAAC"}

package/lib/components/DateRangePicker/DateRangePicker.js

@@ -8,10 +8,8 @@ var React = _interopRequireWildcard(require("react"));
 var _lodash = require("lodash");
 var _momentTimezone = _interopRequireDefault(require("moment-timezone"));
 var _utils = require("../../utils");
-var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _dateRangePicker = require("../../utils/date-range-picker");
 var _DateRangeWrapper = require("./DateRangeWrapper");
-var _DateRangePickerModule = _interopRequireDefault(require("./DateRangePicker.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
@@ -60,6 +58,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
   const [hoverDay, setHoverDay] = React.useState('');
   const [rangeStartMonth, setRangeStartMonth] = React.useState(validRangeStartMonth);
   const [rangeEndMonth, setRangeEndMonth] = React.useState(validRangeEndMonth);
+  const [isMobileSyncedToStartMonth, setIsMobileSyncedToStartMonth] = React.useState(false);
   const setRangeStartMonthValidated = date => {
     if ((0, _dateRangePicker.isSameOrAfter)(date, validMinDate) && (0, _dateRangePicker.isBefore)(date, rangeEndMonth)) {
       setRangeStartMonth(date);
@@ -78,11 +77,48 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     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);
+      setIsMobileSyncedToStartMonth(true);
     } 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);
+      setIsMobileSyncedToStartMonth(false);
     }
   };
+  const handleMobileCalendarMonthSelection = newMonth => {
+    const {
+      startDate,
+      endDate
+    } = dateRange;
+    let start = rangeStartMonth,
+      end = rangeEndMonth,
+      syncToStart = isMobileSyncedToStartMonth;
+    const isEndMonthBeforeStartDate = startDate ? (0, _dateRangePicker.isBefore)(rangeEndMonth, startDate) : false;
+    if (startDate && endDate) {
+      syncToStart = isEndMonthBeforeStartDate ? (0, _dateRangePicker.isBefore)(newMonth, (0, _utils.getMonthEndDate)(rangeEndMonth)) : (0, _dateRangePicker.isBefore)(newMonth, (0, _utils.getMonthEndDate)(endDate));
+      if (syncToStart && (0, _dateRangePicker.isAfter)(newMonth, (0, _utils.getMonthEndDate)(startDate))) {
+        syncToStart = false;
+      }
+      [start, end] = syncToStart ? [newMonth, endDate] : [startDate, newMonth];
+    } else if (startDate) {
+      syncToStart = isEndMonthBeforeStartDate ? (0, _dateRangePicker.isBefore)(newMonth, (0, _utils.getMonthEndDate)(rangeEndMonth)) : (0, _dateRangePicker.isSameOrBefore)(newMonth, (0, _utils.getMonthEndDate)(startDate));
+      [start, end] = syncToStart ? [newMonth, end] : [startDate, newMonth];
+    } else {
+      syncToStart = (0, _dateRangePicker.isBefore)(newMonth, rangeEndMonth);
+      [start, end] = syncToStart ? [newMonth, validMaxDate] : [(0, _utils.getSubtractedDate)(newMonth, 1, 'M'), newMonth];
+    }
+    setRangeStartMonthValidated(start);
+    setRangeEndMonthValidated(end);
+    setIsMobileSyncedToStartMonth(syncToStart);
+  };
+  const handleMobileMonthSelection = date => {
+    const newMonth = (0, _utils.getMonthEndDate)(date);
+    handleMobileCalendarMonthSelection(newMonth);
+  };
+  const onMobileMonthNavigate = action => {
+    const mobileMonth = isMobileSyncedToStartMonth ? rangeStartMonth : rangeEndMonth;
+    const newMonth = action === _utils.NAVIGATION_ACTION.NEXT ? (0, _utils.getMonthEndDate)((0, _utils.getAddedDate)(mobileMonth, 1, 'M')) : (0, _utils.getMonthEndDate)((0, _utils.getSubtractedDate)(mobileMonth, 1, 'M'));
+    handleMobileCalendarMonthSelection(newMonth);
+  };
   const onDayClick = day => {
     const {
       startDate,
@@ -98,6 +134,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
         startDate: day
       });
     }
+    setIsMobileSyncedToStartMonth((0, _utils.getMonthEndDate)(day) === (0, _utils.getMonthEndDate)(rangeStartMonth));
     setHoverDay(day);
   };
   const inHoverRange = day => {
@@ -112,6 +149,11 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     onDayHover: setHoverDay,
     onMonthNavigate
   };
+  const mobileCalendarHandlers = {
+    onDayClick,
+    onDayHover: setHoverDay,
+    onMonthNavigate: onMobileMonthNavigate
+  };
   const handleTimeZone = newTimezone => {
     setToday((0, _dateRangePicker.getTodayInTimezone)(newTimezone));
     setTimezone(newTimezone);
@@ -122,6 +164,7 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     maxDate: validMaxDate,
     onApply: onApply,
     handlers: handlers,
+    mobileCalendarHandlers: mobileCalendarHandlers,
     hoverDay: hoverDay,
     onCancel: onCancel,
     timezone: timezone,
@@ -129,11 +172,13 @@ const DateRangePicker = exports.DateRangePicker = /*#__PURE__*/React.forwardRef(
     setTimezone: handleTimeZone,
     rangeStartMonth: rangeStartMonth,
     rangeEndMonth: rangeEndMonth,
+    mobileCalendarMonth: isMobileSyncedToStartMonth ? rangeStartMonth : rangeEndMonth,
     inHoverRange: inHoverRange,
     setRangeStartMonth: setRangeStartMonthValidated,
     setRangeEndMonth: setRangeEndMonthValidated,
+    setRangeMonth: handleMobileMonthSelection,
     hideTimezone: hideTimezone,
-    cardWrapperClass: (0, _classify.default)(_DateRangePickerModule.default.container, classNames?.wrapper),
+    cardWrapperClass: classNames?.wrapper,
     today: today,
     startDateLabel: startDateLabel,
     endDateLabel: endDateLabel,

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts

@@ -8,9 +8,11 @@ interface DateRangeWrapperProps {
     maxDate: string;
     rangeStartMonth: string;
     rangeEndMonth: string;
+    mobileCalendarMonth: string;
     cardWrapperClass: string | null | undefined;
     setRangeStartMonth: (arg1: string) => void;
     setRangeEndMonth: (arg1: string) => void;
+    setRangeMonth: (arg1: string) => void;
     setTimezone: (arg1: string) => void;
     timezone: string;
     onApply: (datePickerSelectedRange: DateRangeWithTimezone) => void;
@@ -22,10 +24,15 @@ interface DateRangeWrapperProps {
         onDayHover: (day: string) => void;
         onMonthNavigate: (marker: (typeof MARKERS)[keyof typeof MARKERS], action: (typeof NAVIGATION_ACTION)[keyof typeof NAVIGATION_ACTION]) => void;
     };
+    mobileCalendarHandlers: {
+        onDayClick: (day: string) => void;
+        onDayHover: (day: string) => void;
+        onMonthNavigate: (action: (typeof NAVIGATION_ACTION)[keyof typeof NAVIGATION_ACTION]) => void;
+    };
     today: string;
     startDateLabel?: string;
     endDateLabel?: string;
-    t?: ((key: string, fallback: string) => string) | null | undefined;
+    t: ((key: string, fallback: string) => string) | null | undefined;
     locale?: string;
     testId?: string;
 }

package/lib/components/DateRangePicker/DateRangeWrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAGrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAML,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AAgDnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAoGD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CA4Pf,CAAC"}
+{"version":3,"file":"DateRangeWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DateRangePicker/DateRangeWrapper.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAIrD,OAAO,KAAK,EAAC,SAAS,EAAE,qBAAqB,EAAC,MAAM,WAAW,CAAC;AAChE,OAAO,EAML,OAAO,EACP,iBAAiB,EAClB,MAAM,WAAW,CAAC;AAkEnB,UAAU,qBAAqB;IAC7B,SAAS,EAAE,SAAS,CAAC;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,gBAAgB,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAC5C,kBAAkB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,CAAC,uBAAuB,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClE,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,YAAY,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,CAAC;IACvC,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE;QACR,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,OAAO,OAAO,CAAC,EAC9C,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,sBAAsB,EAAE;QACtB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,eAAe,EAAE,CACf,MAAM,EAAE,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,OAAO,iBAAiB,CAAC,KAC/D,IAAI,CAAC;KACX,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,CAAC,EAAE,CAAC,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IAClE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkSD,eAAO,MAAM,gBAAgB,EAAE,IAAI,CAAC,iBAAiB,CACnD,qBAAqB,EACrB,cAAc,CAkHf,CAAC"}