@hero-design/rn 8.34.0 → 8.34.1

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 28.6s
+created lib/index.js, es/index.js in 25.1s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -3,6 +3,7 @@ import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIMan
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, isValidElement, useImperativeHandle, useLayoutEffect } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import DateTimePicker from '@react-native-community/datetimepicker';
 import RootSiblings, { RootSiblingParent } from 'react-native-root-siblings';
 import RnSlider from '@react-native-community/slider';
@@ -2009,7 +2010,9 @@ var getCalendarTheme = function getCalendarTheme(theme) {
   var space = {
     rowVerticalPadding: theme.space.medium,
     headerVerticalPadding: theme.space.medium,
-    headerHorizontalPadding: theme.space.smallMedium
+    headerHorizontalPadding: theme.space.smallMedium,
+    headerMarginRight: theme.space.small,
+    iosPickerMarginVertical: theme.space['5xlarge']
   };
   var radii = {
     "default": theme.radii.rounded
@@ -11262,13 +11265,27 @@ var Calendar = function Calendar(_ref) {
     maxDate = _ref.maxDate,
     _ref$markedDates = _ref.markedDates,
     markedDates = _ref$markedDates === void 0 ? [] : _ref$markedDates,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    _ref$onMonthChange = _ref.onMonthChange,
+    onMonthChange = _ref$onMonthChange === void 0 ? noop$1 : _ref$onMonthChange,
+    monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
+    monthPickerCancelLabel = _ref.monthPickerCancelLabel;
+  var theme = useTheme();
   var currentMonth = visibleDate.getMonth();
   var currentYear = visibleDate.getFullYear();
   var now = new Date();
   var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
     return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
   }, {});
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    monthPickerVisible = _React$useState2[0],
+    setMonthPickerVisible = _React$useState2[1];
+  var _React$useState3 = React.useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    contentHeight = _React$useState4[0],
+    setContentHeight = _React$useState4[1];
+  var useMonthPicker = onMonthChange !== noop$1;
   var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
   var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
   var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
@@ -11296,14 +11313,49 @@ var Calendar = function Calendar(_ref) {
   return /*#__PURE__*/React.createElement(StyledContainer$5, {
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledCalendarHeader, null, /*#__PURE__*/React.createElement(ContentNavigator, {
-    value: formatTime('MMMM yyyy', visibleDate),
+    value: !useMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React.createElement(TouchableOpacity, {
+      testID: "calendar-month-picker",
+      onPress: function onPress() {
+        return setMonthPickerVisible(!monthPickerVisible);
+      }
+    }, /*#__PURE__*/React.createElement(Box, {
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement(Typography.Title, {
+      level: "h5",
+      style: {
+        textAlign: 'center',
+        marginRight: theme.__hd__.calendar.space.headerMarginRight
+      }
+    }, formatTime('MMMM yyyy', visibleDate)), /*#__PURE__*/React.createElement(Icon, {
+      icon: monthPickerVisible ? 'arrow-up' : 'arrow-down',
+      size: "small"
+    }))),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
-    onPress: onTitlePress,
+    onPress: useMonthPicker ? undefined : onTitlePress,
     previousDisabled: disablePrevButton,
     nextDisabled: disableNextButton,
     fontSize: "large"
-  })), /*#__PURE__*/React.createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
+  })), Platform.OS === 'ios' && monthPickerVisible ? /*#__PURE__*/React.createElement(Box, {
+    style: {
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React.createElement(MonthYearPickerViewIOS, {
+    value: value,
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    onChange: onMonthChange,
+    style: {
+      height: contentHeight + theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
+      marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical
+    }
+  })) : /*#__PURE__*/React.createElement(Box, {
+    onLayout: Platform.OS === 'ios' ? function (e) {
+      return setContentHeight(e.nativeEvent.layout.height);
+    } : undefined
+  }, /*#__PURE__*/React.createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
     return /*#__PURE__*/React.createElement(StyledCalendarRowItem, {
       key: day
     }, /*#__PURE__*/React.createElement(StyledCalendarDayNameCell, null, /*#__PURE__*/React.createElement(Typography.Body, {
@@ -11350,6 +11402,18 @@ var Calendar = function Calendar(_ref) {
     }) : /*#__PURE__*/React.createElement(StyledDisabledCalendarRowItem, {
       testID: "calendar-disabled-cell"
     });
+  })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React.createElement(MonthYearPickerDialogueAndroid, {
+    doneButtonLabel: monthPickerConfirmLabel,
+    cancelButtonLabel: monthPickerCancelLabel,
+    value: value,
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    onChange: function onChange(action, date) {
+      setMonthPickerVisible(false);
+      if (action === 'dateSetAction' && !!date) {
+        onMonthChange(date);
+      }
+    }
   })));
 };
 
@@ -12433,7 +12497,9 @@ var InternalCalendar = function InternalCalendar(_ref) {
   var minDate = _ref.minDate,
     maxDate = _ref.maxDate,
     value = _ref.value,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
+    monthPickerCancelLabel = _ref.monthPickerCancelLabel;
   var _useState = useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     visibleDate = _useState2[0],
@@ -12459,7 +12525,12 @@ var InternalCalendar = function InternalCalendar(_ref) {
       return setVisibleDate(new Date(visibleDate.getFullYear(), visibleDate.getMonth() + 1, 1));
     },
     minDate: minDate,
-    maxDate: maxDate
+    maxDate: maxDate,
+    onMonthChange: function onMonthChange(date) {
+      return setVisibleDate(date);
+    },
+    monthPickerConfirmLabel: monthPickerConfirmLabel,
+    monthPickerCancelLabel: monthPickerCancelLabel
   });
 };
 var DatePickerCalendar = function DatePickerCalendar(_ref2) {
@@ -12480,7 +12551,9 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     error = _ref2.error,
     helpText = _ref2.helpText,
     style = _ref2.style,
-    testID = _ref2.testID;
+    testID = _ref2.testID,
+    monthPickerConfirmLabel = _ref2.monthPickerConfirmLabel,
+    monthPickerCancelLabel = _ref2.monthPickerCancelLabel;
   var _useState5 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -12529,7 +12602,9 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     minDate: minDate,
     maxDate: maxDate,
     value: value,
-    onChange: setSelectingDate
+    onChange: setSelectingDate,
+    monthPickerConfirmLabel: monthPickerConfirmLabel,
+    monthPickerCancelLabel: monthPickerCancelLabel
   })));
 };
 

package/lib/index.js

@@ -6,6 +6,7 @@ var reactNative = require('react-native');
 var React = require('react');
 var reactNativeVectorIcons = require('react-native-vector-icons');
 var reactNativeSafeAreaContext = require('react-native-safe-area-context');
+var reactNativeMonthYearPicker = require('@hero-design/react-native-month-year-picker');
 var DateTimePicker = require('@react-native-community/datetimepicker');
 var RootSiblings = require('react-native-root-siblings');
 var RnSlider = require('@react-native-community/slider');
@@ -2040,7 +2041,9 @@ var getCalendarTheme = function getCalendarTheme(theme) {
   var space = {
     rowVerticalPadding: theme.space.medium,
     headerVerticalPadding: theme.space.medium,
-    headerHorizontalPadding: theme.space.smallMedium
+    headerHorizontalPadding: theme.space.smallMedium,
+    headerMarginRight: theme.space.small,
+    iosPickerMarginVertical: theme.space['5xlarge']
   };
   var radii = {
     "default": theme.radii.rounded
@@ -11293,13 +11296,27 @@ var Calendar = function Calendar(_ref) {
     maxDate = _ref.maxDate,
     _ref$markedDates = _ref.markedDates,
     markedDates = _ref$markedDates === void 0 ? [] : _ref$markedDates,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    _ref$onMonthChange = _ref.onMonthChange,
+    onMonthChange = _ref$onMonthChange === void 0 ? noop$1 : _ref$onMonthChange,
+    monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
+    monthPickerCancelLabel = _ref.monthPickerCancelLabel;
+  var theme = useTheme();
   var currentMonth = visibleDate.getMonth();
   var currentYear = visibleDate.getFullYear();
   var now = new Date();
   var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
     return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
   }, {});
+  var _React$useState = React__default["default"].useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    monthPickerVisible = _React$useState2[0],
+    setMonthPickerVisible = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(0),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    contentHeight = _React$useState4[0],
+    setContentHeight = _React$useState4[1];
+  var useMonthPicker = onMonthChange !== noop$1;
   var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
   var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
   var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
@@ -11327,14 +11344,49 @@ var Calendar = function Calendar(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$5, {
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default["default"].createElement(ContentNavigator, {
-    value: formatTime('MMMM yyyy', visibleDate),
+    value: !useMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableOpacity, {
+      testID: "calendar-month-picker",
+      onPress: function onPress() {
+        return setMonthPickerVisible(!monthPickerVisible);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(Box, {
+      flexDirection: "row",
+      justifyContent: "center",
+      alignItems: "center"
+    }, /*#__PURE__*/React__default["default"].createElement(Typography.Title, {
+      level: "h5",
+      style: {
+        textAlign: 'center',
+        marginRight: theme.__hd__.calendar.space.headerMarginRight
+      }
+    }, formatTime('MMMM yyyy', visibleDate)), /*#__PURE__*/React__default["default"].createElement(Icon, {
+      icon: monthPickerVisible ? 'arrow-up' : 'arrow-down',
+      size: "small"
+    }))),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
-    onPress: onTitlePress,
+    onPress: useMonthPicker ? undefined : onTitlePress,
     previousDisabled: disablePrevButton,
     nextDisabled: disableNextButton,
     fontSize: "large"
-  })), /*#__PURE__*/React__default["default"].createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
+  })), reactNative.Platform.OS === 'ios' && monthPickerVisible ? /*#__PURE__*/React__default["default"].createElement(Box, {
+    style: {
+      overflow: 'hidden'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(reactNativeMonthYearPicker.MonthYearPickerViewIOS, {
+    value: value,
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    onChange: onMonthChange,
+    style: {
+      height: contentHeight + theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
+      marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical
+    }
+  })) : /*#__PURE__*/React__default["default"].createElement(Box, {
+    onLayout: reactNative.Platform.OS === 'ios' ? function (e) {
+      return setContentHeight(e.nativeEvent.layout.height);
+    } : undefined
+  }, /*#__PURE__*/React__default["default"].createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
     return /*#__PURE__*/React__default["default"].createElement(StyledCalendarRowItem, {
       key: day
     }, /*#__PURE__*/React__default["default"].createElement(StyledCalendarDayNameCell, null, /*#__PURE__*/React__default["default"].createElement(Typography.Body, {
@@ -11381,6 +11433,18 @@ var Calendar = function Calendar(_ref) {
     }) : /*#__PURE__*/React__default["default"].createElement(StyledDisabledCalendarRowItem, {
       testID: "calendar-disabled-cell"
     });
+  })), reactNative.Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__default["default"].createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid, {
+    doneButtonLabel: monthPickerConfirmLabel,
+    cancelButtonLabel: monthPickerCancelLabel,
+    value: value,
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    onChange: function onChange(action, date) {
+      setMonthPickerVisible(false);
+      if (action === 'dateSetAction' && !!date) {
+        onMonthChange(date);
+      }
+    }
   })));
 };
 
@@ -12464,7 +12528,9 @@ var InternalCalendar = function InternalCalendar(_ref) {
   var minDate = _ref.minDate,
     maxDate = _ref.maxDate,
     value = _ref.value,
-    _onChange = _ref.onChange;
+    _onChange = _ref.onChange,
+    monthPickerConfirmLabel = _ref.monthPickerConfirmLabel,
+    monthPickerCancelLabel = _ref.monthPickerCancelLabel;
   var _useState = React.useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     visibleDate = _useState2[0],
@@ -12490,7 +12556,12 @@ var InternalCalendar = function InternalCalendar(_ref) {
       return setVisibleDate(new Date(visibleDate.getFullYear(), visibleDate.getMonth() + 1, 1));
     },
     minDate: minDate,
-    maxDate: maxDate
+    maxDate: maxDate,
+    onMonthChange: function onMonthChange(date) {
+      return setVisibleDate(date);
+    },
+    monthPickerConfirmLabel: monthPickerConfirmLabel,
+    monthPickerCancelLabel: monthPickerCancelLabel
   });
 };
 var DatePickerCalendar = function DatePickerCalendar(_ref2) {
@@ -12511,7 +12582,9 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     error = _ref2.error,
     helpText = _ref2.helpText,
     style = _ref2.style,
-    testID = _ref2.testID;
+    testID = _ref2.testID,
+    monthPickerConfirmLabel = _ref2.monthPickerConfirmLabel,
+    monthPickerCancelLabel = _ref2.monthPickerCancelLabel;
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -12560,7 +12633,9 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     minDate: minDate,
     maxDate: maxDate,
     value: value,
-    onChange: setSelectingDate
+    onChange: setSelectingDate,
+    monthPickerConfirmLabel: monthPickerConfirmLabel,
+    monthPickerCancelLabel: monthPickerCancelLabel
   })));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.34.0",
+  "version": "8.34.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,12 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.34.0",
+    "@hero-design/colors": "8.34.1",
+    "@hero-design/react-native-month-year-picker": "^8.34.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
   },
   "peerDependencies": {
+    "@hero-design/react-native-month-year-picker": "^8.34.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -46,7 +48,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.34.0",
+    "@hero-design/eslint-plugin": "8.34.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -62,10 +64,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.34.0",
+    "eslint-config-hd": "8.34.1",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.34.0",
+    "prettier-config-hd": "8.34.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/rollup.config.js

@@ -34,6 +34,7 @@ export default {
     'react-native-pager-view',
     'react-native-vector-icons',
     'react-native-linear-gradient',
+    '@hero-design/react-native-month-year-picker',
     'react-native-root-siblings',
   ],
   plugins: [

package/src/components/Calendar/__tests__/index.spec.tsx

@@ -92,4 +92,51 @@ describe('Calendar', () => {
     fireEvent.press(getByText('26'));
     expect(onChange).toBeCalledWith(new Date(2022, 10, 26));
   });
+
+  it('disables onTitlePress when onMonthChange is passed', () => {
+    const onTitlePress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <Calendar
+        value={new Date(2022, 10, 5)}
+        visibleDate={new Date(2022, 10, 5)}
+        onTitlePress={onTitlePress}
+        minDate={new Date(2022, 10, 3)}
+        maxDate={new Date(2022, 10, 27)}
+        onMonthChange={jest.fn()}
+      />
+    );
+
+    fireEvent.press(getByTestId('calendar-month-picker'));
+    expect(onTitlePress).toHaveBeenCalledTimes(0);
+  });
+
+  it.each`
+    platform
+    ${'ios'}
+    ${'android'}
+  `('renders correct picker on $platform', ({ platform }) => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: platform,
+      select: () => null,
+    }));
+
+    const { getByTestId, queryByText } = renderWithTheme(
+      <Calendar
+        value={new Date(2022, 10, 5)}
+        visibleDate={new Date(2022, 10, 5)}
+        minDate={new Date(2022, 10, 3)}
+        maxDate={new Date(2022, 10, 27)}
+        onMonthChange={jest.fn()}
+      />
+    );
+
+    fireEvent.press(getByTestId('calendar-month-picker'));
+
+    // Pickers are mocked at packages/rn/testUtils/setup.tsx
+    if (platform === 'ios') {
+      expect(queryByText('IOS picker')).toBeDefined();
+    } else {
+      expect(queryByText('Android picker')).toBeDefined();
+    }
+  });
 });

package/src/components/Calendar/index.tsx

@@ -1,7 +1,17 @@
-import React from 'react';
+import {
+  MonthYearPickerDialogueAndroid,
+  MonthYearPickerViewIOS,
+} from '@hero-design/react-native-month-year-picker';
 import format from 'date-fns/fp/format';
+import React from 'react';
+import { Platform, TouchableOpacity } from 'react-native';
+import { useTheme } from '../../theme';
+import { noop } from '../../utils/functions';
+import Box from '../Box';
 import ContentNavigator from '../ContentNavigator';
+import Icon from '../Icon';
 import Typography from '../Typography';
+import CalendarRowItem from './CalendarRowItem';
 import {
   StyledCalendarDayNameCell,
   StyledCalendarHeader,
@@ -10,9 +20,7 @@ import {
   StyledContainer,
   StyledDisabledCalendarRowItem,
 } from './StyledCalendar';
-import CalendarRowItem from './CalendarRowItem';
 import { getValidDate, initArray, isEqDate } from './helpers';
-import { noop } from '../../utils/functions';
 
 const DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
 // Sunday first column => 0
@@ -68,6 +76,18 @@ export interface CalendarProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Callback when header month is changed, passing this prop will disable onTitlePress.
+   */
+  onMonthChange?: (date: Date) => void;
+  /**
+   * Label for the confirm button of the month picker, Android only.
+   */
+  monthPickerConfirmLabel?: string;
+  /**
+   * Label for the cancel button of the month picker, Android only.
+   */
+  monthPickerCancelLabel?: string;
 }
 
 const Calendar = ({
@@ -81,7 +101,11 @@ const Calendar = ({
   maxDate,
   markedDates = [],
   testID,
+  onMonthChange = noop,
+  monthPickerConfirmLabel,
+  monthPickerCancelLabel,
 }: CalendarProps) => {
+  const theme = useTheme();
   const currentMonth = visibleDate.getMonth();
   const currentYear = visibleDate.getFullYear();
   const now = new Date();
@@ -92,6 +116,10 @@ const Calendar = ({
     }),
     {}
   );
+  const [monthPickerVisible, setMonthPickerVisible] = React.useState(false);
+  const [contentHeight, setContentHeight] = React.useState(0);
+
+  const useMonthPicker = onMonthChange !== noop;
 
   const firstDateOfMonth = new Date(currentYear, currentMonth, 1);
   const lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
@@ -152,70 +180,144 @@ const Calendar = ({
     <StyledContainer testID={testID}>
       <StyledCalendarHeader>
         <ContentNavigator
-          value={format('MMMM yyyy', visibleDate)}
+          value={
+            !useMonthPicker ? (
+              format('MMMM yyyy', visibleDate)
+            ) : (
+              <TouchableOpacity
+                testID="calendar-month-picker"
+                onPress={() => setMonthPickerVisible(!monthPickerVisible)}
+              >
+                <Box
+                  flexDirection="row"
+                  justifyContent="center"
+                  alignItems="center"
+                >
+                  <Typography.Title
+                    level="h5"
+                    style={{
+                      textAlign: 'center',
+                      marginRight:
+                        theme.__hd__.calendar.space.headerMarginRight,
+                    }}
+                  >
+                    {format('MMMM yyyy', visibleDate)}
+                  </Typography.Title>
+
+                  <Icon
+                    icon={monthPickerVisible ? 'arrow-up' : 'arrow-down'}
+                    size="small"
+                  />
+                </Box>
+              </TouchableOpacity>
+            )
+          }
           onPreviousPress={onPreviousPress}
           onNextPress={onNextPress}
-          onPress={onTitlePress}
+          onPress={useMonthPicker ? undefined : onTitlePress}
           previousDisabled={disablePrevButton}
           nextDisabled={disableNextButton}
           fontSize="large"
         />
       </StyledCalendarHeader>
-      <StyledCalendarRow>
-        {DAYS_OF_WEEK.map((day) => (
-          <StyledCalendarRowItem key={day}>
-            <StyledCalendarDayNameCell>
-              <Typography.Body variant="small">{day}</Typography.Body>
-            </StyledCalendarDayNameCell>
-          </StyledCalendarRowItem>
-        ))}
-      </StyledCalendarRow>
-      <StyledCalendarRow>
-        {daysOfPreviousMonth.map((date) =>
-          date ? (
-            <CalendarRowItem
-              key={date.toDateString()}
-              date={date}
-              isCurrent={isEqDate(now, date)}
-              isSelected={isEqDate(value, date)}
-              onPress={() => onChange?.(date)}
-              textIntent="subdued"
-              marked={parsedMaskedDate[date.toDateString()]}
-            />
-          ) : (
-            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
-          )
-        )}
-        {daysOfCurrentMonth.map((date) =>
-          date ? (
-            <CalendarRowItem
-              key={date.toDateString()}
-              date={date}
-              isCurrent={isEqDate(now, date)}
-              isSelected={isEqDate(value, date)}
-              onPress={() => onChange?.(date)}
-              marked={parsedMaskedDate[date.toDateString()]}
-            />
-          ) : (
-            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
-          )
-        )}
-        {daysOfNextMonth.map((date) =>
-          date ? (
-            <CalendarRowItem
-              key={date.toDateString()}
-              date={date}
-              isCurrent={isEqDate(now, date)}
-              isSelected={isEqDate(value, date)}
-              onPress={() => onChange?.(date)}
-              textIntent="subdued"
-              marked={parsedMaskedDate[date.toDateString()]}
+      {Platform.OS === 'ios' && monthPickerVisible ? (
+        <Box style={{ overflow: 'hidden' }}>
+          <MonthYearPickerViewIOS
+            value={value}
+            minimumDate={minDate}
+            maximumDate={maxDate}
+            onChange={onMonthChange}
+            style={{
+              height:
+                contentHeight +
+                theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
+              marginVertical:
+                -theme.__hd__.calendar.space.iosPickerMarginVertical,
+            }}
+          />
+        </Box>
+      ) : (
+        <Box
+          onLayout={
+            Platform.OS === 'ios'
+              ? (e) => setContentHeight(e.nativeEvent.layout.height)
+              : undefined
+          }
+        >
+          <StyledCalendarRow>
+            {DAYS_OF_WEEK.map((day) => (
+              <StyledCalendarRowItem key={day}>
+                <StyledCalendarDayNameCell>
+                  <Typography.Body variant="small">{day}</Typography.Body>
+                </StyledCalendarDayNameCell>
+              </StyledCalendarRowItem>
+            ))}
+          </StyledCalendarRow>
+          <StyledCalendarRow>
+            {daysOfPreviousMonth.map((date) =>
+              date ? (
+                <CalendarRowItem
+                  key={date.toDateString()}
+                  date={date}
+                  isCurrent={isEqDate(now, date)}
+                  isSelected={isEqDate(value, date)}
+                  onPress={() => onChange?.(date)}
+                  textIntent="subdued"
+                  marked={parsedMaskedDate[date.toDateString()]}
+                />
+              ) : (
+                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+              )
+            )}
+            {daysOfCurrentMonth.map((date) =>
+              date ? (
+                <CalendarRowItem
+                  key={date.toDateString()}
+                  date={date}
+                  isCurrent={isEqDate(now, date)}
+                  isSelected={isEqDate(value, date)}
+                  onPress={() => onChange?.(date)}
+                  marked={parsedMaskedDate[date.toDateString()]}
+                />
+              ) : (
+                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+              )
+            )}
+            {daysOfNextMonth.map((date) =>
+              date ? (
+                <CalendarRowItem
+                  key={date.toDateString()}
+                  date={date}
+                  isCurrent={isEqDate(now, date)}
+                  isSelected={isEqDate(value, date)}
+                  onPress={() => onChange?.(date)}
+                  textIntent="subdued"
+                  marked={parsedMaskedDate[date.toDateString()]}
+                />
+              ) : (
+                <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
+              )
+            )}
+          </StyledCalendarRow>
+
+          {Platform.OS === 'android' && monthPickerVisible && (
+            <MonthYearPickerDialogueAndroid
+              doneButtonLabel={monthPickerConfirmLabel}
+              cancelButtonLabel={monthPickerCancelLabel}
+              value={value}
+              minimumDate={minDate}
+              maximumDate={maxDate}
+              onChange={(action, date) => {
+                setMonthPickerVisible(false);
+
+                if (action === 'dateSetAction' && !!date) {
+                  onMonthChange(date);
+                }
+              }}
             />
-          ) : (
-            <StyledDisabledCalendarRowItem testID="calendar-disabled-cell" />
-          )
-        )}
-      </StyledCalendarRow>
+          )}
+        </Box>
+      )}
     </StyledContainer>
   );
 };

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -20,7 +20,10 @@ const DatePickerAndroid = ({
   helpText,
   style,
   testID,
-}: Omit<DatePickerProps, 'variant'>) => {
+}: Omit<
+  DatePickerProps,
+  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
+>) => {
   const [open, setOpen] = useState(false);
 
   const displayValue = value ? formatDate(displayFormat, value) : '';

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -13,7 +13,17 @@ const InternalCalendar = ({
   maxDate,
   value,
   onChange,
-}: Pick<CalendarProps, 'minDate' | 'maxDate' | 'value' | 'onChange'>) => {
+  monthPickerConfirmLabel,
+  monthPickerCancelLabel,
+}: Pick<
+  CalendarProps,
+  | 'minDate'
+  | 'maxDate'
+  | 'value'
+  | 'onChange'
+  | 'monthPickerConfirmLabel'
+  | 'monthPickerCancelLabel'
+>) => {
   const [visibleDate, setVisibleDate] = useState(value || new Date());
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   return (
@@ -39,6 +49,9 @@ const InternalCalendar = ({
       }
       minDate={minDate}
       maxDate={maxDate}
+      onMonthChange={(date) => setVisibleDate(date)}
+      monthPickerConfirmLabel={monthPickerConfirmLabel}
+      monthPickerCancelLabel={monthPickerCancelLabel}
     />
   );
 };
@@ -58,6 +71,8 @@ const DatePickerCalendar = ({
   helpText,
   style,
   testID,
+  monthPickerConfirmLabel,
+  monthPickerCancelLabel,
 }: Omit<DatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
 
@@ -101,6 +116,8 @@ const DatePickerCalendar = ({
           maxDate={maxDate}
           value={value}
           onChange={setSelectingDate}
+          monthPickerConfirmLabel={monthPickerConfirmLabel}
+          monthPickerCancelLabel={monthPickerCancelLabel}
         />
       </BottomSheet>
     </TouchableOpacity>

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -41,7 +41,10 @@ const DatePickerIOS = ({
   helpText,
   style,
   testID,
-}: Omit<DatePickerProps, 'variant'>) => {
+}: Omit<
+  DatePickerProps,
+  'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'
+>) => {
   const [selectingDate, setSelectingDate] = useState<Date>(
     getInitialDateValue(value || new Date(), minDate, maxDate)
   );

package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx

@@ -58,4 +58,43 @@ describe('DatePickerCalendar', () => {
 
     expect(getByText('This is help text')).toBeTruthy();
   });
+
+  it.each`
+    platform
+    ${'ios'}
+    ${'android'}
+  `('renders month year picker when pressing on title', ({ platform }) => {
+    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
+      OS: platform,
+      select: () => null,
+    }));
+
+    const { queryByText, getByText, getByTestId } = renderWithTheme(
+      <DatePickerCalendar
+        value={new Date('December 21, 1995')}
+        label="Start date"
+        confirmLabel="Confirm"
+        helpText="This is help text"
+        onChange={jest.fn()}
+      />
+    );
+
+    fireEvent.press(getByText('Start date'));
+    fireEvent.press(getByText('December 1995'));
+
+    if (platform === 'ios') {
+      expect(queryByText('IOS picker')).toBeDefined();
+    } else {
+      expect(queryByText('Android picker')).toBeDefined();
+    }
+
+    // Selecting month
+    fireEvent(
+      getByTestId('calendar'),
+      'onMonthChange',
+      new Date('January 17, 1993')
+    );
+
+    expect(queryByText('January 1993')).toBeDefined();
+  });
 });

package/src/components/DatePicker/types.ts

@@ -64,4 +64,12 @@ export interface DatePickerProps {
    * Testing id of the component.
    */
   testID?: string;
+  /**
+   * Calendar variant prop. Label for the confirm button of the month picker, Android only.
+   */
+  monthPickerConfirmLabel?: string;
+  /**
+   * Calendar variant prop. Label for the cancel button of the month picker, Android only.
+   */
+  monthPickerCancelLabel?: string;
 }

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -262,7 +262,9 @@ Object {
       },
       "space": Object {
         "headerHorizontalPadding": 12,
+        "headerMarginRight": 8,
         "headerVerticalPadding": 16,
+        "iosPickerMarginVertical": 64,
         "rowVerticalPadding": 16,
       },
     },

package/src/theme/components/calendar.ts

@@ -24,6 +24,8 @@ const getCalendarTheme = (theme: GlobalTheme) => {
     rowVerticalPadding: theme.space.medium,
     headerVerticalPadding: theme.space.medium,
     headerHorizontalPadding: theme.space.smallMedium,
+    headerMarginRight: theme.space.small,
+    iosPickerMarginVertical: theme.space['5xlarge'],
   };
 
   const radii = {

package/testUtils/setup.tsx

@@ -107,6 +107,25 @@ jest.mock('react-native-gesture-handler', () => {
   };
 });
 
+jest.mock("@hero-design/react-native-month-year-picker", () => {
+  const React = jest.requireActual("react");
+  const { View, Text } = jest.requireActual("react-native");
+
+  return {
+    MonthYearPickerDialogueAndroid: () => (
+      <View>
+        <Text>Android picker</Text>
+      </View>
+    ),
+    MonthYearPickerViewIOS: () => (
+      <View>
+        <Text>IOS picker</Text>
+      </View>
+    ),
+  };
+});
+
+
 jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
   return jest.requireActual(
     'react-native/Libraries/Utilities/__mocks__/BackHandler.js',

package/types/components/Calendar/index.d.ts

@@ -39,6 +39,18 @@ export interface CalendarProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Callback when header month is changed, passing this prop will disable onTitlePress.
+     */
+    onMonthChange?: (date: Date) => void;
+    /**
+     * Label for the confirm button of the month picker, Android only.
+     */
+    monthPickerConfirmLabel?: string;
+    /**
+     * Label for the cancel button of the month picker, Android only.
+     */
+    monthPickerCancelLabel?: string;
 }
-declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, }: CalendarProps) => JSX.Element;
+declare const Calendar: ({ value, visibleDate, onChange, onPreviousPress, onNextPress, onTitlePress, minDate, maxDate, markedDates, testID, onMonthChange, monthPickerConfirmLabel, monthPickerCancelLabel, }: CalendarProps) => JSX.Element;
 export default Calendar;

package/types/components/DatePicker/DatePickerAndroid.d.ts

@@ -1,3 +1,3 @@
 import type { DatePickerProps } from './types';
-declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
+declare const DatePickerAndroid: ({ value, minDate, maxDate, label, placeholder, onChange, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => JSX.Element;
 export default DatePickerAndroid;

package/types/components/DatePicker/DatePickerCalendar.d.ts

@@ -1,3 +1,3 @@
 import type { DatePickerProps } from './types';
-declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
+declare const DatePickerCalendar: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, monthPickerConfirmLabel, monthPickerCancelLabel, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
 export default DatePickerCalendar;

package/types/components/DatePicker/DatePickerIOS.d.ts

@@ -1,4 +1,4 @@
 import type { DatePickerProps } from './types';
 export declare const getInitialDateValue: (value: Date, minDate?: Date | undefined, maxDate?: Date | undefined) => Date;
-declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant'>) => JSX.Element;
+declare const DatePickerIOS: ({ value, minDate, maxDate, label, placeholder, onChange, confirmLabel, displayFormat, disabled, required, error, helpText, style, testID, }: Omit<DatePickerProps, 'variant' | 'monthPickerConfirmLabel' | 'monthPickerCancelLabel'>) => JSX.Element;
 export default DatePickerIOS;

package/types/components/DatePicker/types.d.ts

@@ -63,4 +63,12 @@ export interface DatePickerProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * Calendar variant prop. Label for the confirm button of the month picker, Android only.
+     */
+    monthPickerConfirmLabel?: string;
+    /**
+     * Calendar variant prop. Label for the cancel button of the month picker, Android only.
+     */
+    monthPickerCancelLabel?: string;
 }

package/types/theme/components/calendar.d.ts

@@ -21,6 +21,8 @@ declare const getCalendarTheme: (theme: GlobalTheme) => {
         rowVerticalPadding: number;
         headerVerticalPadding: number;
         headerHorizontalPadding: number;
+        headerMarginRight: number;
+        iosPickerMarginVertical: number;
     };
 };
 export default getCalendarTheme;