@kaizen/components 1.70.13 → 1.70.15

package/dist/cjs/Calendar/CalendarRange/CalendarRange.cjs

@@ -24,9 +24,11 @@ var CalendarRange = function (_a) {
     classNameOverride = _a.classNameOverride,
     selected = _a.selected,
     defaultMonth = _a.defaultMonth,
-    _d = _a.locale,
-    locale$1 = _d === undefined ? locale.enAU : _d,
-    restProps = tslib.__rest(_a, ["id", "onMount", "hasDivider", "classNameOverride", "selected", "defaultMonth", "locale"]);
+    _d = _a.numberOfMonths,
+    numberOfMonths = _d === undefined ? 2 : _d,
+    _e = _a.locale,
+    locale$1 = _e === undefined ? locale.enAU : _e,
+    restProps = tslib.__rest(_a, ["id", "onMount", "hasDivider", "classNameOverride", "selected", "defaultMonth", "numberOfMonths", "locale"]);
   var calendarRef = React.useRef(null);
   React.useEffect(function () {
     if (calendarRef.current) onMount === null || onMount === undefined ? undefined : onMount(calendarRef.current);
@@ -37,6 +39,7 @@ var CalendarRange = function (_a) {
   var classNames = tslib.__assign(tslib.__assign({}, baseCalendarClassNames.baseCalendarClassNames), {
     month: hasDivider ? CalendarRange_module.monthWithDivider : CalendarRange_module.month,
     caption_end: CalendarRange_module.captionEnd,
+    caption_start: CalendarRange_module.captionStart,
     nav: CalendarRange_module.nav,
     day_range_start: CalendarRange_module.dayRangeStart,
     day_range_end: CalendarRange_module.dayRangeEnd,
@@ -68,7 +71,7 @@ var CalendarRange = function (_a) {
         });
       }
     },
-    numberOfMonths: 2,
+    numberOfMonths: numberOfMonths,
     locale: locale$1
   }, restProps)));
 };

package/dist/cjs/Calendar/CalendarRange/CalendarRange.module.scss.cjs

@@ -5,6 +5,7 @@ var styles = {
   "monthWithDivider": "CalendarRange-module_monthWithDivider__JY-56",
   "nav": "CalendarRange-module_nav__OtaVb",
   "captionEnd": "CalendarRange-module_captionEnd__GSLQO",
+  "captionStart": "CalendarRange-module_captionStart__K5hlF",
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
   "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY"

package/dist/cjs/Filter/FilterDateRangePicker/FilterDateRangePicker.cjs

@@ -2,6 +2,7 @@
 
 var tslib = require('tslib');
 var React = require('react');
+var classnames = require('classnames');
 var getLocale = require('../../DatePicker/utils/getLocale.cjs');
 var Filter = require('../Filter/Filter.cjs');
 var FilterContents = require('../Filter/subcomponents/FilterContents/FilterContents.cjs');
@@ -9,12 +10,14 @@ var DateRangeDisplayLabel = require('./subcomponents/DateRangeDisplayLabel/DateR
 var FilterDateRangePickerField = require('./subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.cjs');
 var isValidRange = require('./subcomponents/FilterDateRangePickerField/utils/isValidRange.cjs');
 var isCompleteDateRange = require('./utils/isCompleteDateRange.cjs');
+var FilterDateRangePicker_module = require('./FilterDateRangePicker.module.css.cjs');
 function _interopDefault(e) {
   return e && e.__esModule ? e : {
     default: e
   };
 }
 var React__default = /*#__PURE__*/_interopDefault(React);
+var classnames__default = /*#__PURE__*/_interopDefault(classnames);
 var FilterDateRangePicker = function (_a) {
   var propsId = _a.id,
     isOpen = _a.isOpen,
@@ -38,7 +41,9 @@ var FilterDateRangePicker = function (_a) {
         label: label
       }, triggerProps));
     }
-  }, React__default.default.createElement(FilterContents.FilterContents, null, React__default.default.createElement(FilterDateRangePickerField.FilterDateRangePickerField, tslib.__assign({
+  }, React__default.default.createElement(FilterContents.FilterContents, {
+    classNameOverride: classnames__default.default(FilterDateRangePicker_module.filterDateRangePickerContents)
+  }, React__default.default.createElement(FilterDateRangePickerField.FilterDateRangePickerField, tslib.__assign({
     id: "".concat(id, "--input"),
     label: label,
     locale: locale,

package/dist/cjs/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css.cjs

@@ -0,0 +1,6 @@
+'use strict';
+
+var styles = {
+  "filterDateRangePickerContents": "FilterDateRangePicker-module_filterDateRangePickerContents__P7eNa"
+};
+module.exports = styles;

package/dist/cjs/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.cjs

@@ -13,6 +13,7 @@ require('react-day-picker');
 var parseDateFromTextFormatValue = require('../../../../Calendar/utils/parseDateFromTextFormatValue.cjs');
 var getLocale = require('../../../../DatePicker/utils/getLocale.cjs');
 var useDateInputHandlers = require('../../../FilterDatePicker/hooks/useDateInputHandlers.cjs');
+var useMediaQueries = require('../../../../utils/useMediaQueries.cjs');
 var DateRangeInputField = require('../DateRangeInputField/DateRangeInputField.cjs');
 var filterDateRangePickerFieldReducer = require('./filterDateRangePickerFieldReducer.cjs');
 var useEndDateValidation = require('./hooks/useEndDateValidation.cjs');
@@ -44,6 +45,7 @@ var FilterDateRangePickerField = function (_a) {
     restProps = tslib.__rest(_a, ["id", "label", "locale", "defaultMonth", "selectedRange", "onRangeChange", "disabledDays", "inputStartDateProps", "inputEndDateProps", "description", "validationMessage", "onValidate", "classNameOverride"]);
   var formatMessage = i18nReactIntl.useIntl().formatMessage;
   var locale = getLocale.getLocale(propsLocale);
+  var queries = useMediaQueries.useMediaQueries().queries;
   var translatedDateFrom = formatMessage({
     id: 'filterDateRangePicker.dateFrom',
     defaultMessage: 'Date from',
@@ -222,7 +224,7 @@ var FilterDateRangePickerField = function (_a) {
       dateStart: dateStartValidation.validationMessage,
       dateEnd: dateEndValidation.validationMessage
     },
-    classNameOverride: FilterDateRangePickerField_module.dateRangeInputField
+    classNameOverride: classnames__default.default(FilterDateRangePickerField_module.dateRangeInputField)
   }), React__default.default.createElement(CalendarRange.CalendarRange, {
     disabled: disabledDays,
     locale: locale,
@@ -232,6 +234,7 @@ var FilterDateRangePickerField = function (_a) {
     },
     onSelect: handleCalendarSelectRange,
     month: state.startMonth,
+    numberOfMonths: queries.isSmall ? 1 : 2,
     onMonthChange: function (value) {
       return dispatch({
         type: 'navigate_months',

package/dist/esm/Calendar/CalendarRange/CalendarRange.mjs

@@ -17,9 +17,11 @@ const CalendarRange = /*#__PURE__*/function () {
       classNameOverride = _a.classNameOverride,
       selected = _a.selected,
       defaultMonth = _a.defaultMonth,
-      _d = _a.locale,
-      locale = _d === undefined ? enAU : _d,
-      restProps = __rest(_a, ["id", "onMount", "hasDivider", "classNameOverride", "selected", "defaultMonth", "locale"]);
+      _d = _a.numberOfMonths,
+      numberOfMonths = _d === undefined ? 2 : _d,
+      _e = _a.locale,
+      locale = _e === undefined ? enAU : _e,
+      restProps = __rest(_a, ["id", "onMount", "hasDivider", "classNameOverride", "selected", "defaultMonth", "numberOfMonths", "locale"]);
     var calendarRef = useRef(null);
     useEffect(function () {
       if (calendarRef.current) onMount === null || onMount === undefined ? undefined : onMount(calendarRef.current);
@@ -30,6 +32,7 @@ const CalendarRange = /*#__PURE__*/function () {
     var classNames = __assign(__assign({}, baseCalendarClassNames), {
       month: hasDivider ? styles.monthWithDivider : styles.month,
       caption_end: styles.captionEnd,
+      caption_start: styles.captionStart,
       nav: styles.nav,
       day_range_start: styles.dayRangeStart,
       day_range_end: styles.dayRangeEnd,
@@ -61,7 +64,7 @@ const CalendarRange = /*#__PURE__*/function () {
           });
         }
       },
-      numberOfMonths: 2,
+      numberOfMonths: numberOfMonths,
       locale: locale
     }, restProps)));
   };

package/dist/esm/Calendar/CalendarRange/CalendarRange.module.scss.mjs

@@ -3,6 +3,7 @@ var styles = {
   "monthWithDivider": "CalendarRange-module_monthWithDivider__JY-56",
   "nav": "CalendarRange-module_nav__OtaVb",
   "captionEnd": "CalendarRange-module_captionEnd__GSLQO",
+  "captionStart": "CalendarRange-module_captionStart__K5hlF",
   "dayRangeStart": "CalendarRange-module_dayRangeStart__TwdDT",
   "dayRangeEnd": "CalendarRange-module_dayRangeEnd__y6dEB",
   "dayRangeMiddle": "CalendarRange-module_dayRangeMiddle__SybKY"

package/dist/esm/Filter/FilterDateRangePicker/FilterDateRangePicker.mjs

@@ -1,5 +1,6 @@
 import { __rest, __assign } from 'tslib';
 import React, { useId } from 'react';
+import classnames from 'classnames';
 import { getLocale } from '../../DatePicker/utils/getLocale.mjs';
 import { Filter } from '../Filter/Filter.mjs';
 import { FilterContents } from '../Filter/subcomponents/FilterContents/FilterContents.mjs';
@@ -7,6 +8,7 @@ import { DateRangeDisplayLabel } from './subcomponents/DateRangeDisplayLabel/Dat
 import { FilterDateRangePickerField } from './subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.mjs';
 import { isValidRange } from './subcomponents/FilterDateRangePickerField/utils/isValidRange.mjs';
 import { isCompleteDateRange } from './utils/isCompleteDateRange.mjs';
+import styles from './FilterDateRangePicker.module.css.mjs';
 const FilterDateRangePicker = /*#__PURE__*/function () {
   const FilterDateRangePicker = function (_a) {
     var propsId = _a.id,
@@ -31,7 +33,9 @@ const FilterDateRangePicker = /*#__PURE__*/function () {
           label: label
         }, triggerProps));
       }
-    }, /*#__PURE__*/React.createElement(FilterContents, null, /*#__PURE__*/React.createElement(FilterDateRangePickerField, __assign({
+    }, /*#__PURE__*/React.createElement(FilterContents, {
+      classNameOverride: classnames(styles.filterDateRangePickerContents)
+    }, /*#__PURE__*/React.createElement(FilterDateRangePickerField, __assign({
       id: "".concat(id, "--input"),
       label: label,
       locale: locale,

package/dist/esm/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css.mjs

@@ -0,0 +1,4 @@
+var styles = {
+  "filterDateRangePickerContents": "FilterDateRangePicker-module_filterDateRangePickerContents__P7eNa"
+};
+export { styles as default };

package/dist/esm/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.mjs

@@ -11,6 +11,7 @@ import 'react-day-picker';
 import { parseDateFromTextFormatValue } from '../../../../Calendar/utils/parseDateFromTextFormatValue.mjs';
 import { getLocale } from '../../../../DatePicker/utils/getLocale.mjs';
 import { useDateInputHandlers } from '../../../FilterDatePicker/hooks/useDateInputHandlers.mjs';
+import { useMediaQueries } from '../../../../utils/useMediaQueries.mjs';
 import { DateRangeInputField } from '../DateRangeInputField/DateRangeInputField.mjs';
 import { filterDatePickerFieldReducer } from './filterDateRangePickerFieldReducer.mjs';
 import { useEndDateValidation } from './hooks/useEndDateValidation.mjs';
@@ -36,6 +37,7 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
       restProps = __rest(_a, ["id", "label", "locale", "defaultMonth", "selectedRange", "onRangeChange", "disabledDays", "inputStartDateProps", "inputEndDateProps", "description", "validationMessage", "onValidate", "classNameOverride"]);
     var formatMessage = useIntl().formatMessage;
     var locale = getLocale(propsLocale);
+    var queries = useMediaQueries().queries;
     var translatedDateFrom = formatMessage({
       id: 'filterDateRangePicker.dateFrom',
       defaultMessage: 'Date from',
@@ -214,7 +216,7 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
         dateStart: dateStartValidation.validationMessage,
         dateEnd: dateEndValidation.validationMessage
       },
-      classNameOverride: styles.dateRangeInputField
+      classNameOverride: classnames(styles.dateRangeInputField)
     }), /*#__PURE__*/React.createElement(CalendarRange, {
       disabled: disabledDays,
       locale: locale,
@@ -224,6 +226,7 @@ const FilterDateRangePickerField = /*#__PURE__*/function () {
       },
       onSelect: handleCalendarSelectRange,
       month: state.startMonth,
+      numberOfMonths: queries.isSmall ? 1 : 2,
       onMonthChange: function (value) {
         return dispatch({
           type: 'navigate_months',

package/dist/styles.css

@@ -1863,6 +1863,10 @@
 .CalendarRange-module_captionEnd__GSLQO .CalendarRange-module_nav__OtaVb {
   flex-direction: row-reverse;
 }
+.CalendarRange-module_captionStart__K5hlF.CalendarRange-module_captionEnd__GSLQO .CalendarRange-module_nav__OtaVb {
+  justify-content: space-between;
+  flex-direction: row;
+}
 
 .CalendarRange-module_dayRangeStart__TwdDT,
 .CalendarRange-module_dayRangeEnd__y6dEB {
@@ -3711,6 +3715,14 @@ input[type=range].InputRange-module_ratingScaleRange__gI-rs::-ms-thumb:not(:disa
 .FilterDateRangePickerField-module_dateRangeInputField__EEU-X {
   margin-bottom: var(--spacing-24, 1.5rem);
 }
+@media (width <= 320px) {
+  .FilterDateRangePicker-module_filterDateRangePickerContents__P7eNa {
+    padding: var(--spacing-16);
+    max-width: 320px;
+    box-sizing: border-box;
+  }
+}
+
 /** THIS IS AN AUTOGENERATED FILE **/
 .ListBox-module_listBox__q95MO {
   list-style: none;

package/dist/types/Calendar/CalendarRange/CalendarRange.d.ts

@@ -7,6 +7,6 @@ export type CalendarRangeProps = {
     hasDivider?: boolean;
 } & OverrideClassName<Omit<DayPickerRangeProps, 'mode'>>;
 export declare const CalendarRange: {
-    ({ id, onMount, hasDivider, classNameOverride, selected, defaultMonth, locale, ...restProps }: CalendarRangeProps): JSX.Element;
+    ({ id, onMount, hasDivider, classNameOverride, selected, defaultMonth, numberOfMonths, locale, ...restProps }: CalendarRangeProps): JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.13",
+  "version": "1.70.15",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",
@@ -30,6 +30,58 @@
   "sideEffects": [
     "styles.css"
   ],
+  "exports": {
+    ".": {
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./future": {
+      "import": "./dist/esm/future.mjs",
+      "require": "./dist/cjs/future.cjs",
+      "types": "./dist/types/__rc__/index.d.ts"
+    },
+    "./v1/actions": {
+      "import": "./dist/esm/actionsV1.mjs",
+      "require": "./dist/cjs/actionsV1.cjs",
+      "types": "./dist/types/v1-actions.d.ts"
+    },
+    "./v1/overlays": {
+      "import": "./dist/esm/overlaysV1.mjs",
+      "main": "./dist/cjs/overlaysV1.cjs",
+      "types": "./dist/types/v1-overlays.d.ts"
+    },
+    "./v2/actions": {
+      "import": "./dist/esm/actionsV2.mjs",
+      "require": "./dist/cjs/actionsV2.cjs",
+      "types": "./dist/types/v2-actions.d.ts"
+    },
+    "./v2/overlays": {
+      "import": "./dist/esm/overlaysV2.mjs",
+      "require": "./dist/cjs/overlaysV2.cjs",
+      "types": "./dist/types/v2-overlays.d.ts"
+    },
+    "./v3/actions": {
+      "import": "./dist/esm/actionsV3.mjs",
+      "require": "./dist/cjs/actionsV3.cjs",
+      "types": "./dist/types/v3-actions.d.ts"
+    },
+    "./v3/overlays": {
+      "import": "./dist/esm/overlaysV3.mjs",
+      "require": "./dist/cjs/overlaysV3.cjs",
+      "types": "./dist/types/v3-overlays.d.ts"
+    },
+    "./v3/react-aria": {
+      "import": "./dist/esm/reactAriaV3.mjs",
+      "require": "./dist/cjs/reactAriaV3.cjs",
+      "types": "./dist/types/__react-aria__/index.d.ts"
+    },
+    "./v3/react-aria-components": {
+      "import": "./dist/esm/reactAriaComponentsV3.mjs",
+      "require": "./dist/cjs/reactAriaComponentsV3.cjs",
+      "types": "./dist/types/__react-aria-components__/index.d.ts"
+    }
+  },
   "bin": {
     "kaizen-codemod": "./bin/codemod.sh"
   },
@@ -117,8 +169,8 @@
     "svgo": "^3.3.2",
     "tslib": "^2.8.1",
     "tsx": "^4.19.2",
-    "@kaizen/package-bundler": "2.0.4",
-    "@kaizen/design-tokens": "10.8.7"
+    "@kaizen/design-tokens": "10.8.7",
+    "@kaizen/package-bundler": "2.0.4"
   },
   "devDependenciesComments": {
     "sass": "Prevent deprecation warnings introduced in 1.80 as we plan to move away from sass",

package/src/Calendar/CalendarRange/CalendarRange.module.scss

@@ -47,6 +47,11 @@ $cell-border-radius: 3px;
   .captionEnd & {
     flex-direction: row-reverse;
   }
+
+  .captionStart.captionEnd & {
+    justify-content: space-between;
+    flex-direction: row;
+  }
 }
 
 .dayRangeStart,

package/src/Calendar/CalendarRange/CalendarRange.tsx

@@ -22,6 +22,7 @@ export const CalendarRange = ({
   classNameOverride,
   selected,
   defaultMonth,
+  numberOfMonths = 2,
   locale = enAU,
   ...restProps
 }: CalendarRangeProps): JSX.Element => {
@@ -39,6 +40,7 @@ export const CalendarRange = ({
     ...baseCalendarClassNames,
     month: hasDivider ? styles.monthWithDivider : styles.month,
     caption_end: styles.captionEnd,
+    caption_start: styles.captionStart,
     nav: styles.nav,
     day_range_start: styles.dayRangeStart,
     day_range_end: styles.dayRangeEnd,
@@ -57,7 +59,7 @@ export const CalendarRange = ({
           IconRight: () => <Icon name="arrow_forward" isPresentational shouldMirrorInRTL />,
           IconLeft: () => <Icon name="arrow_back" isPresentational shouldMirrorInRTL />,
         }}
-        numberOfMonths={2}
+        numberOfMonths={numberOfMonths}
         locale={locale}
         {...restProps}
       />

package/src/Filter/FilterDateRangePicker/FilterDateRangePicker.module.css

@@ -0,0 +1,7 @@
+@media (width <= 320px) {
+  .filterDateRangePickerContents {
+    padding: var(--spacing-16);
+    max-width: 320px;
+    box-sizing: border-box;
+  }
+}

package/src/Filter/FilterDateRangePicker/FilterDateRangePicker.tsx

@@ -1,4 +1,5 @@
 import React, { useId } from 'react'
+import classNames from 'classnames'
 import { getLocale } from '~components/DatePicker/utils/getLocale'
 import { Filter, FilterContents, type FilterProps } from '~components/Filter/Filter'
 import { type FilterButtonProps } from '../FilterButton'
@@ -9,6 +10,7 @@ import {
 } from './subcomponents/FilterDateRangePickerField'
 import { isValidRange } from './subcomponents/FilterDateRangePickerField/utils/isValidRange'
 import { isCompleteDateRange } from './utils/isCompleteDateRange'
+import styles from './FilterDateRangePicker.module.css'
 
 export type FilterDateRangePickerProps = {
   id?: string
@@ -46,7 +48,7 @@ export const FilterDateRangePicker = ({
         })
       }
     >
-      <FilterContents>
+      <FilterContents classNameOverride={classNames(styles.filterDateRangePickerContents)}>
         <FilterDateRangePickerField
           id={`${id}--input`}
           label={label}

package/src/Filter/FilterDateRangePicker/_docs/FilterDateRangePicker.stories.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { fn } from '@storybook/test'
+import { expect, fn, waitFor, within } from '@storybook/test'
 import Highlight from 'react-highlight'
 import { type DateRange } from '~components/Calendar'
 import { defaultMonthControls } from '~components/Calendar/_docs/controls/defaultMonthControls'
@@ -428,3 +428,38 @@ export const Validation: Story = {
     controls: { disable: true },
   },
 }
+
+export const OnSmallViewport: Story = {
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+  ...FilterDateRangePickerTemplate,
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement)
+
+    await step('initial render complete', async () => {
+      await waitFor(() => {
+        canvas.getByRole('button', {
+          name: 'Dates',
+        })
+      })
+    })
+
+    await step('Can open the date picker', async () => {
+      await waitFor(() => {
+        const button = canvas.getByRole('button', {
+          name: 'Dates',
+        })
+        button.click()
+      })
+    })
+
+    await step('Back and Forward arrow and both visible', async () => {
+      await waitFor(() => {
+        const prevMonth = canvas.getByLabelText('Go to previous month')
+        const nextMonth = canvas.getByLabelText('Go to next month')
+
+        expect(prevMonth).toBeVisible()
+        expect(nextMonth).toBeVisible()
+      })
+    })
+  },
+}

package/src/Filter/FilterDateRangePicker/subcomponents/FilterDateRangePickerField/FilterDateRangePickerField.tsx

@@ -15,6 +15,7 @@ import { type DateValidationResponse } from '~components/Filter/FilterDatePicker
 import { useDateInputHandlers } from '~components/Filter/FilterDatePicker/hooks/useDateInputHandlers'
 import { type DataAttributes } from '~components/types/DataAttributes'
 import { type OverrideClassName } from '~components/types/OverrideClassName'
+import { useMediaQueries } from '~components/utils/useMediaQueries'
 import { DateRangeInputField, type DateRangeInputFieldProps } from '../DateRangeInputField'
 import { filterDatePickerFieldReducer } from './filterDateRangePickerFieldReducer'
 import { useEndDateValidation } from './hooks/useEndDateValidation'
@@ -84,6 +85,8 @@ export const FilterDateRangePickerField = ({
   const { formatMessage } = useIntl()
   const locale = getLocale(propsLocale)
 
+  const { queries } = useMediaQueries()
+
   const translatedDateFrom = formatMessage({
     id: 'filterDateRangePicker.dateFrom',
     defaultMessage: 'Date from',
@@ -292,7 +295,7 @@ export const FilterDateRangePickerField = ({
           dateStart: dateStartValidation.validationMessage,
           dateEnd: dateEndValidation.validationMessage,
         }}
-        classNameOverride={styles.dateRangeInputField}
+        classNameOverride={classnames(styles.dateRangeInputField)}
       />
       <CalendarRange
         disabled={disabledDays}
@@ -303,6 +306,7 @@ export const FilterDateRangePickerField = ({
         }}
         onSelect={handleCalendarSelectRange}
         month={state.startMonth}
+        numberOfMonths={queries.isSmall ? 1 : 2}
         onMonthChange={(value: Date) => dispatch({ type: 'navigate_months', date: value })}
       />
     </div>