@hero-design/rn 8.63.2 → 8.64.0

package/lib/index.js

@@ -9232,7 +9232,9 @@ var BottomSheet = function BottomSheet(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
-    keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding;
+    keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding,
+    _ref$supportedOrienta = _ref.supportedOrientations,
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   var _Dimensions$get = reactNative.Dimensions.get('window'),
     height = _Dimensions$get.height;
   // Internal state to control modal open/close timing with animation
@@ -9295,7 +9297,8 @@ var BottomSheet = function BottomSheet(_ref) {
     onRequestClose: onRequestClose,
     transparent: true,
     testID: testID,
-    onShow: onOpen
+    onShow: onOpen,
+    supportedOrientations: supportedOrientations
   }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper$9, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React__default["default"].createElement(StyledKeyboardAvoidingView, _extends$1({
@@ -11666,9 +11669,10 @@ var StyledCalendarHeader = index$9(reactNative.View)(function (_ref2) {
   };
 });
 var StyledCalendarDayNameCell = index$9(reactNative.View)(function (_ref3) {
-  var theme = _ref3.theme;
+  var theme = _ref3.theme,
+    themeItemWidth = _ref3.themeItemWidth;
   return {
-    width: theme.__hd__.calendar.sizes.cellWidth,
+    width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
     height: theme.__hd__.calendar.sizes.cellHeight,
     alignItems: 'center',
     justifyContent: 'center'
@@ -11677,7 +11681,8 @@ var StyledCalendarDayNameCell = index$9(reactNative.View)(function (_ref3) {
 var StyledCalendarCell = index$9(reactNative.TouchableOpacity)(function (_ref4) {
   var theme = _ref4.theme,
     _ref4$variant = _ref4.variant,
-    variant = _ref4$variant === void 0 ? 'default' : _ref4$variant;
+    variant = _ref4$variant === void 0 ? 'default' : _ref4$variant,
+    themeItemWidth = _ref4.themeItemWidth;
   return {
     borderColor: theme.__hd__.calendar.colors.border,
     borderWidth: variant === 'current' ? 1 : 0,
@@ -11685,7 +11690,7 @@ var StyledCalendarCell = index$9(reactNative.TouchableOpacity)(function (_ref4)
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: variant === 'selected' ? theme.__hd__.calendar.colors.primary : undefined,
-    width: theme.__hd__.calendar.sizes.cellCircleWidth,
+    width: themeItemWidth || theme.__hd__.calendar.sizes.cellCircleWidth,
     height: theme.__hd__.calendar.sizes.cellCircleHeight
   };
 });
@@ -11698,21 +11703,23 @@ var StyledCalendarRow = index$9(reactNative.View)(function (_ref5) {
   };
 });
 var StyledCalendarRowItem = index$9(reactNative.View)(function (_ref6) {
-  var theme = _ref6.theme;
+  var theme = _ref6.theme,
+    themeItemWidth = _ref6.themeItemWidth;
   return {
     flexBasis: "".concat(Math.floor(100.0 / 7.0), "%"),
     alignItems: 'center',
-    width: theme.__hd__.calendar.sizes.cellWidth,
+    width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
     height: theme.__hd__.calendar.sizes.cellHeight,
     justifyContent: 'center'
   };
 });
 var StyledDisabledCalendarRowItem = index$9(reactNative.View)(function (_ref7) {
-  var theme = _ref7.theme;
+  var theme = _ref7.theme,
+    themeItemWidth = _ref7.themeItemWidth;
   return {
     flexBasis: "".concat(Math.floor(100.0 / 7.0), "%"),
     alignItems: 'center',
-    width: theme.__hd__.calendar.sizes.cellWidth,
+    width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
     height: theme.__hd__.calendar.sizes.cellHeight
   };
 });
@@ -11745,9 +11752,11 @@ var CalendarRowItem = function CalendarRowItem(_ref) {
     _ref$textIntent = _ref.textIntent,
     textIntent = _ref$textIntent === void 0 ? 'body' : _ref$textIntent,
     _ref$marked = _ref.marked,
-    marked = _ref$marked === void 0 ? false : _ref$marked;
+    marked = _ref$marked === void 0 ? false : _ref$marked,
+    itemWidth = _ref.itemWidth;
   return /*#__PURE__*/React__default["default"].createElement(StyledCalendarRowItem, {
-    testID: "calendar-date-cell"
+    testID: "calendar-date-cell",
+    themeItemWidth: itemWidth
   }, /*#__PURE__*/React__default["default"].createElement(StyledCalendarCell, {
     variant: getCellVariant(isSelected, isCurrent),
     onPress: onPress
@@ -11819,14 +11828,21 @@ var Calendar = function Calendar(_ref) {
   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 _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    monthPickerVisible = _useState2[0],
+    setMonthPickerVisible = _useState2[1];
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentHeight = _useState4[0],
+    setContentHeight = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    contentWidth = _useState6[0],
+    setContentWidth = _useState6[1];
+  var calendarItemWidth = React.useMemo(function () {
+    return contentWidth > 0 ? contentWidth / 7 : undefined;
+  }, [contentWidth]);
   var useMonthPicker = onMonthChange !== noop$1;
   var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
   var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
@@ -11892,16 +11908,23 @@ var Calendar = function Calendar(_ref) {
     onChange: onMonthChange,
     style: {
       height: contentHeight + theme.__hd__.calendar.space.iosPickerMarginVertical * 2,
-      marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical
+      marginVertical: -theme.__hd__.calendar.space.iosPickerMarginVertical,
+      width: contentWidth
     }
   })) : /*#__PURE__*/React__default["default"].createElement(Box, {
     onLayout: reactNative.Platform.OS === 'ios' ? function (e) {
-      return setContentHeight(e.nativeEvent.layout.height);
+      var _e$nativeEvent$layout = e.nativeEvent.layout,
+        width = _e$nativeEvent$layout.width,
+        height = _e$nativeEvent$layout.height;
+      setContentHeight(height);
+      setContentWidth(width);
     } : 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, {
+    }, /*#__PURE__*/React__default["default"].createElement(StyledCalendarDayNameCell, {
+      themeItemWidth: calendarItemWidth
+    }, /*#__PURE__*/React__default["default"].createElement(Typography.Body, {
       variant: "small"
     }, day)));
   })), /*#__PURE__*/React__default["default"].createElement(StyledCalendarRow, null, daysOfPreviousMonth.map(function (date) {
@@ -11914,12 +11937,15 @@ var Calendar = function Calendar(_ref) {
         return onChange === null || onChange === void 0 ? void 0 : onChange(date);
       },
       textIntent: "subdued",
-      marked: parsedMaskedDate[date.toDateString()]
+      marked: parsedMaskedDate[date.toDateString()],
+      itemWidth: contentWidth > 0 ? contentWidth / 7 : undefined
     }) : /*#__PURE__*/React__default["default"].createElement(StyledDisabledCalendarRowItem, {
+      themeItemWidth: calendarItemWidth,
       testID: "calendar-disabled-cell"
     });
   }), daysOfCurrentMonth.map(function (date) {
     return date ? /*#__PURE__*/React__default["default"].createElement(CalendarRowItem, {
+      itemWidth: calendarItemWidth,
       key: date.toDateString(),
       date: date,
       isCurrent: isEqDate(now, date),
@@ -11929,10 +11955,12 @@ var Calendar = function Calendar(_ref) {
       },
       marked: parsedMaskedDate[date.toDateString()]
     }) : /*#__PURE__*/React__default["default"].createElement(StyledDisabledCalendarRowItem, {
+      themeItemWidth: calendarItemWidth,
       testID: "calendar-disabled-cell"
     });
   }), daysOfNextMonth.map(function (date) {
     return date ? /*#__PURE__*/React__default["default"].createElement(CalendarRowItem, {
+      itemWidth: calendarItemWidth,
       key: date.toDateString(),
       date: date,
       isCurrent: isEqDate(now, date),
@@ -11943,6 +11971,7 @@ var Calendar = function Calendar(_ref) {
       textIntent: "subdued",
       marked: parsedMaskedDate[date.toDateString()]
     }) : /*#__PURE__*/React__default["default"].createElement(StyledDisabledCalendarRowItem, {
+      themeItemWidth: calendarItemWidth,
       testID: "calendar-disabled-cell"
     });
   })), reactNative.Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__default["default"].createElement(reactNativeMonthYearPicker.MonthYearPickerDialogueAndroid, {
@@ -13390,7 +13419,9 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     style = _ref2.style,
     testID = _ref2.testID,
     monthPickerConfirmLabel = _ref2.monthPickerConfirmLabel,
-    monthPickerCancelLabel = _ref2.monthPickerCancelLabel;
+    monthPickerCancelLabel = _ref2.monthPickerCancelLabel,
+    _ref2$supportedOrient = _ref2.supportedOrientations,
+    supportedOrientations = _ref2$supportedOrient === void 0 ? ['portrait'] : _ref2$supportedOrient;
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -13445,8 +13476,9 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
         }
         setOpen(false);
       }
-    })
-  }, /*#__PURE__*/React__default["default"].createElement(InternalCalendar, {
+    }),
+    supportedOrientations: supportedOrientations
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.ScrollView, null, /*#__PURE__*/React__default["default"].createElement(InternalCalendar, {
     minDate: minDate,
     maxDate: maxDate,
     value: value,
@@ -13456,7 +13488,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     onToggleMonthPicker: function onToggleMonthPicker(visible) {
       return setMonthPickerVisible(visible);
     }
-  })));
+  }))));
 };
 
 var StyledPickerWrapper$1 = index$9(reactNative.View)(function (_ref) {
@@ -13482,7 +13514,9 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     error = _ref.error,
     helpText = _ref.helpText,
     style = _ref.style,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    _ref$supportedOrienta = _ref.supportedOrientations,
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   var _useState = React.useState(getDateValue(value || new Date(), minDate, maxDate)),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -13533,7 +13567,8 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
         }
         setOpen(false);
       }
-    })
+    }),
+    supportedOrientations: supportedOrientations
   }, /*#__PURE__*/React__default["default"].createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React__default["default"].createElement(DateTimePicker__default["default"], {
     testID: "datePickerIOS",
     value: selectingDate,
@@ -14811,7 +14846,9 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     fabTitle = _ref.fabTitle,
     onBackdropPress = _ref.onBackdropPress,
     _ref$fabIcon = _ref.fabIcon,
-    fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
+    fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon,
+    _ref$supportedOrienta = _ref.supportedOrientations,
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
   var theme = useTheme();
   var fabRef = React.useRef(null);
@@ -14867,7 +14904,8 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     visible: active,
     animationType: "fade",
     transparent: true,
-    statusBarTranslucent: true
+    statusBarTranslucent: true,
+    supportedOrientations: supportedOrientations
   }, /*#__PURE__*/React__default["default"].createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
@@ -15070,6 +15108,7 @@ var Toast$1 = function Toast(_ref2) {
     outputRange: toastConfig.position === 'top' ? [-20, distance] : [20, -distance]
   });
   return /*#__PURE__*/React__default["default"].createElement(Container, {
+    testID: "toast-container",
     themeVariant: variant,
     themeIntent: intent,
     style: [style, {
@@ -16628,7 +16667,9 @@ function MultiSelect(_ref) {
     required = _ref.required,
     style = _ref.style,
     testID = _ref.testID,
-    value = _ref.value;
+    value = _ref.value,
+    _ref$supportedOrienta = _ref.supportedOrientations,
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -16707,7 +16748,8 @@ function MultiSelect(_ref) {
         var scrollParams = getScrollParams(value === null || value === void 0 ? void 0 : value[0], sections);
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 || _sectionListRef$curre.scrollToLocation(scrollParams);
       }
-    }
+    },
+    supportedOrientations: supportedOrientations
   }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     editable: true,
     placeholder: "Search",
@@ -16828,7 +16870,9 @@ var SingleSelect = function SingleSelect(_ref) {
     required = _ref.required,
     style = _ref.style,
     testID = _ref.testID,
-    value = _ref.value;
+    value = _ref.value,
+    _ref$supportedOrienta = _ref.supportedOrientations,
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
     keyboardHeight = _useKeyboard.keyboardHeight;
@@ -16882,7 +16926,8 @@ var SingleSelect = function SingleSelect(_ref) {
         var scrollParams = getScrollParams(value, sections);
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 || _sectionListRef$curre.scrollToLocation(scrollParams);
       }
-    }
+    },
+    supportedOrientations: supportedOrientations
   }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     editable: true,
     placeholder: "Search",
@@ -18229,7 +18274,9 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     _ref$showSuffix = _ref.showSuffix,
-    showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix;
+    showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
+    _ref$supportedOrienta = _ref.supportedOrientations,
+    supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta;
   var _useState = React.useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -18275,7 +18322,8 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
         }
         setOpen(false);
       }
-    })
+    }),
+    supportedOrientations: supportedOrientations
   }, /*#__PURE__*/React__default["default"].createElement(StyledPickerWrapper, null, /*#__PURE__*/React__default["default"].createElement(DateTimePicker__default["default"], {
     testID: "timePickerIOS",
     value: selectingDate,

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.63.2",
+  "version": "8.64.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
   "types": "types/index.d.ts",
   "scripts": {
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
+    "lint": "eslint src",
     "type-check": "tsc --noEmit",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
@@ -28,7 +28,7 @@
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.9",
+    "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
@@ -47,8 +47,11 @@
     "@babel/preset-typescript": "^7.20.0",
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "9.0.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.9",
+    "@eslint/compat": "^1.1.1",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.8.0",
+    "@hero-design/eslint-plugin": "9.0.1",
+    "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "@rollup/plugin-babel": "^5.3.1",
@@ -86,6 +89,7 @@
     "rollup": "^2.68.0",
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
+    "rollup-plugin-visualizer": "^5.12.0",
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },

package/rollup.config.js

@@ -6,11 +6,16 @@ import json from '@rollup/plugin-json';
 import replace from '@rollup/plugin-replace';
 import copy from 'rollup-plugin-copy';
 import flow from 'rollup-plugin-flow';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 import pkg from './package.json';
 
 const extensions = ['.js', '.jsx', '.ts', '.tsx'];
 
+const generateBuildStats = process.env.GENERATE_BUILD_STATS === 'true';
+const bundleTemplate = process.env.BUNDLE_TEMPLATE || 'treemap';
+const fileName = process.env.FILE_NAME || `stats/${pkg.version}/rn-stats.html`;
+
 export default {
   input: 'src/index.ts',
   output: [
@@ -54,5 +59,13 @@ export default {
         },
       ],
     }),
+    ...(generateBuildStats
+      ? [
+          visualizer({
+            filename: fileName,
+            template: bundleTemplate,
+          }),
+        ]
+      : []),
   ],
 };

package/sonar-project.properties

@@ -6,6 +6,6 @@ sonar.organization=thinkei
 
 sonar.sources=.
 sonar.inclusions=**/*
-sonar.exclusions=**/__tests__/**,**/public/**
+sonar.exclusions=**/__tests__/**,**/public/**,**/stats/**,**.config.js
 sonar.java.binaries=**/src/main/java
 sonar.javascript.lcov.reportPaths=./coverage/lcov.info

package/src/components/BottomSheet/__tests__/__snapshots__/index.spec.tsx.snap

@@ -73,6 +73,11 @@ exports[`BottomSheet renders correctly with open state 1`] = `
   <Modal
     hardwareAccelerated={false}
     onRequestClose={[MockFunction]}
+    supportedOrientations={
+      [
+        "portrait",
+      ]
+    }
     transparent={true}
     visible={true}
   >

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

@@ -3,6 +3,7 @@ import React from 'react';
 import { Button, Text } from 'react-native';
 import BottomSheet from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { setOrientation } from '../../../testHelpers/utils';
 
 const Content = () => <Text>Content</Text>;
 
@@ -57,6 +58,22 @@ describe('BottomSheet', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
+  it('renders correctly in landscape mode', () => {
+    const { getByText } = renderWithTheme(
+      <BottomSheet
+        open
+        header="Title"
+        onRequestClose={jest.fn()}
+        supportedOrientations={['landscape', 'portrait']}
+      >
+        <Content />
+      </BottomSheet>
+    );
+    setOrientation('landscape');
+    expect(getByText('Title')).toBeDefined();
+    expect(getByText('Content')).toBeDefined();
+  });
+
   describe('Header', () => {
     it('renders default header correctly', () => {
       const { getByText } = renderWithTheme(

package/src/components/BottomSheet/index.tsx

@@ -78,6 +78,10 @@ interface BottomSheetProps {
    * keyboardAvoidingView's props
    * */
   keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
+  /**
+   * Supported orientations for the BottomSheet modal, iOS only.
+   */
+  supportedOrientations?: ('portrait' | 'landscape')[];
 }
 
 const BottomSheet = ({
@@ -95,6 +99,7 @@ const BottomSheet = ({
   style,
   testID,
   keyboardAvoidingViewProps = {},
+  supportedOrientations = ['portrait'],
 }: BottomSheetProps): JSX.Element => {
   const { height } = Dimensions.get('window');
 
@@ -161,6 +166,7 @@ const BottomSheet = ({
       transparent
       testID={testID}
       onShow={onOpen}
+      supportedOrientations={supportedOrientations}
     >
       <StyledWrapper pointerEvents="box-none">
         <StyledKeyboardAvoidingView

package/src/components/Calendar/CalendarRowItem.tsx

@@ -20,6 +20,7 @@ export interface CalendarRowItemProps {
   isSelected?: boolean;
   textIntent?: 'body' | 'subdued';
   marked?: boolean;
+  itemWidth?: number;
 }
 
 const CalendarRowItem = ({
@@ -29,8 +30,9 @@ const CalendarRowItem = ({
   isSelected,
   textIntent = 'body',
   marked = false,
+  itemWidth,
 }: CalendarRowItemProps) => (
-  <StyledCalendarRowItem testID="calendar-date-cell">
+  <StyledCalendarRowItem testID="calendar-date-cell" themeItemWidth={itemWidth}>
     <StyledCalendarCell
       variant={getCellVariant(isSelected, isCurrent)}
       onPress={onPress}

package/src/components/Calendar/StyledCalendar.tsx

@@ -12,8 +12,12 @@ const StyledCalendarHeader = styled(View)(({ theme }) => ({
   paddingVertical: theme.__hd__.calendar.space.headerVerticalPadding,
 }));
 
-const StyledCalendarDayNameCell = styled(View)<ViewProps>(({ theme }) => ({
-  width: theme.__hd__.calendar.sizes.cellWidth,
+const StyledCalendarDayNameCell = styled(View)<
+  ViewProps & {
+    themeItemWidth?: number;
+  }
+>(({ theme, themeItemWidth }) => ({
+  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,
   alignItems: 'center',
   justifyContent: 'center',
@@ -21,7 +25,8 @@ const StyledCalendarDayNameCell = styled(View)<ViewProps>(({ theme }) => ({
 
 const StyledCalendarCell = styled(TouchableOpacity)<{
   variant?: 'default' | 'current' | 'selected';
-}>(({ theme, variant = 'default' }) => ({
+  themeItemWidth?: number;
+}>(({ theme, variant = 'default', themeItemWidth }) => ({
   borderColor: theme.__hd__.calendar.colors.border,
   borderWidth: variant === 'current' ? 1 : 0,
   borderRadius: theme.__hd__.calendar.radii.default,
@@ -29,7 +34,7 @@ const StyledCalendarCell = styled(TouchableOpacity)<{
   justifyContent: 'center',
   backgroundColor:
     variant === 'selected' ? theme.__hd__.calendar.colors.primary : undefined,
-  width: theme.__hd__.calendar.sizes.cellCircleWidth,
+  width: themeItemWidth || theme.__hd__.calendar.sizes.cellCircleWidth,
   height: theme.__hd__.calendar.sizes.cellCircleHeight,
 }));
 
@@ -39,18 +44,26 @@ const StyledCalendarRow = styled(View)<ViewProps>(({ theme }) => ({
   flexWrap: 'wrap',
 }));
 
-const StyledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
+const StyledCalendarRowItem = styled(View)<
+  ViewProps & {
+    themeItemWidth?: number;
+  }
+>(({ theme, themeItemWidth }) => ({
   flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
-  width: theme.__hd__.calendar.sizes.cellWidth,
+  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,
   justifyContent: 'center',
 }));
 
-const StyledDisabledCalendarRowItem = styled(View)<ViewProps>(({ theme }) => ({
+const StyledDisabledCalendarRowItem = styled(View)<
+  ViewProps & {
+    themeItemWidth?: number;
+  }
+>(({ theme, themeItemWidth }) => ({
   flexBasis: `${Math.floor(100.0 / 7.0)}%`,
   alignItems: 'center',
-  width: theme.__hd__.calendar.sizes.cellWidth,
+  width: themeItemWidth || theme.__hd__.calendar.sizes.cellWidth,
   height: theme.__hd__.calendar.sizes.cellHeight,
 }));
 

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

@@ -14,6 +14,7 @@ describe('CalendarRowItem', () => {
         onPress={jest.fn()}
         textIntent={textIntent}
         marked
+        itemWidth={120}
       />
     );
 

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -16,12 +16,13 @@ exports[`CalendarRowItem renders correctly 1`] = `
           "flexBasis": "14%",
           "height": 48,
           "justifyContent": "center",
-          "width": 48,
+          "width": 120,
         },
         undefined,
       ]
     }
     testID="calendar-date-cell"
+    themeItemWidth={120}
   >
     <View
       accessibilityState={
@@ -143,12 +144,13 @@ exports[`CalendarRowItem renders correctly 2`] = `
           "flexBasis": "14%",
           "height": 48,
           "justifyContent": "center",
-          "width": 48,
+          "width": 120,
         },
         undefined,
       ]
     }
     testID="calendar-date-cell"
+    themeItemWidth={120}
   >
     <View
       accessibilityState={

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

@@ -2,15 +2,21 @@ import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
 import Calendar from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import { setOrientation } from '../../../testHelpers/utils';
 
 Date.now = jest.fn(() => new Date(2022, 10, 2).valueOf());
 
 describe('Calendar', () => {
-  it('renders correctly', () => {
+  it.each`
+    orientation
+    ${'portrait'}
+    ${'landscape'}
+  `('renders correctly', ({ orientation }) => {
     const onChange = jest.fn();
     const onTitlePress = jest.fn();
     const onPreviousPress = jest.fn();
     const onNextPress = jest.fn();
+    setOrientation(orientation);
     const { getByText, queryAllByTestId, queryByTestId } = renderWithTheme(
       <Calendar
         value={new Date(2022, 10, 5)}