@hero-design/rn 8.63.3 → 8.64.0

package/.turbo/turbo-build.log

@@ -2,4 +2,4 @@
 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 '/home/runner/work/hero-design/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 1m 3s
+created lib/index.js, es/index.js in 1m 0.7s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.64.0
+
+### Minor Changes
+
+- [#3239](https://github.com/Thinkei/hero-design/pull/3239) [`a6dfbbed4`](https://github.com/Thinkei/hero-design/commit/a6dfbbed4670c47c54f6c6bc8489d27879bf48cf) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Add landscape mode support for BottomSheet, DatePicker, DatePickerCalendar, FAB, Select, TimePicker
+
 ## 8.63.3
 
 ### Patch Changes

package/es/index.js

@@ -9202,7 +9202,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 = Dimensions.get('window'),
     height = _Dimensions$get.height;
   // Internal state to control modal open/close timing with animation
@@ -9265,7 +9267,8 @@ var BottomSheet = function BottomSheet(_ref) {
     onRequestClose: onRequestClose,
     transparent: true,
     testID: testID,
-    onShow: onOpen
+    onShow: onOpen,
+    supportedOrientations: supportedOrientations
   }, /*#__PURE__*/React__default.createElement(StyledWrapper$9, {
     pointerEvents: "box-none"
   }, /*#__PURE__*/React__default.createElement(StyledKeyboardAvoidingView, _extends$1({
@@ -11636,9 +11639,10 @@ var StyledCalendarHeader = index$9(View)(function (_ref2) {
   };
 });
 var StyledCalendarDayNameCell = index$9(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'
@@ -11647,7 +11651,8 @@ var StyledCalendarDayNameCell = index$9(View)(function (_ref3) {
 var StyledCalendarCell = index$9(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,
@@ -11655,7 +11660,7 @@ var StyledCalendarCell = index$9(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
   };
 });
@@ -11668,21 +11673,23 @@ var StyledCalendarRow = index$9(View)(function (_ref5) {
   };
 });
 var StyledCalendarRowItem = index$9(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(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
   };
 });
@@ -11715,9 +11722,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.createElement(StyledCalendarRowItem, {
-    testID: "calendar-date-cell"
+    testID: "calendar-date-cell",
+    themeItemWidth: itemWidth
   }, /*#__PURE__*/React__default.createElement(StyledCalendarCell, {
     variant: getCellVariant(isSelected, isCurrent),
     onPress: onPress
@@ -11789,14 +11798,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.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    monthPickerVisible = _React$useState2[0],
-    setMonthPickerVisible = _React$useState2[1];
-  var _React$useState3 = React__default.useState(0),
-    _React$useState4 = _slicedToArray(_React$useState3, 2),
-    contentHeight = _React$useState4[0],
-    setContentHeight = _React$useState4[1];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    monthPickerVisible = _useState2[0],
+    setMonthPickerVisible = _useState2[1];
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentHeight = _useState4[0],
+    setContentHeight = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    contentWidth = _useState6[0],
+    setContentWidth = _useState6[1];
+  var calendarItemWidth = 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);
@@ -11862,16 +11878,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.createElement(Box, {
     onLayout: 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.createElement(StyledCalendarRow, null, DAYS_OF_WEEK.map(function (day) {
     return /*#__PURE__*/React__default.createElement(StyledCalendarRowItem, {
       key: day
-    }, /*#__PURE__*/React__default.createElement(StyledCalendarDayNameCell, null, /*#__PURE__*/React__default.createElement(Typography.Body, {
+    }, /*#__PURE__*/React__default.createElement(StyledCalendarDayNameCell, {
+      themeItemWidth: calendarItemWidth
+    }, /*#__PURE__*/React__default.createElement(Typography.Body, {
       variant: "small"
     }, day)));
   })), /*#__PURE__*/React__default.createElement(StyledCalendarRow, null, daysOfPreviousMonth.map(function (date) {
@@ -11884,12 +11907,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.createElement(StyledDisabledCalendarRowItem, {
+      themeItemWidth: calendarItemWidth,
       testID: "calendar-disabled-cell"
     });
   }), daysOfCurrentMonth.map(function (date) {
     return date ? /*#__PURE__*/React__default.createElement(CalendarRowItem, {
+      itemWidth: calendarItemWidth,
       key: date.toDateString(),
       date: date,
       isCurrent: isEqDate(now, date),
@@ -11899,10 +11925,12 @@ var Calendar = function Calendar(_ref) {
       },
       marked: parsedMaskedDate[date.toDateString()]
     }) : /*#__PURE__*/React__default.createElement(StyledDisabledCalendarRowItem, {
+      themeItemWidth: calendarItemWidth,
       testID: "calendar-disabled-cell"
     });
   }), daysOfNextMonth.map(function (date) {
     return date ? /*#__PURE__*/React__default.createElement(CalendarRowItem, {
+      itemWidth: calendarItemWidth,
       key: date.toDateString(),
       date: date,
       isCurrent: isEqDate(now, date),
@@ -11913,6 +11941,7 @@ var Calendar = function Calendar(_ref) {
       textIntent: "subdued",
       marked: parsedMaskedDate[date.toDateString()]
     }) : /*#__PURE__*/React__default.createElement(StyledDisabledCalendarRowItem, {
+      themeItemWidth: calendarItemWidth,
       testID: "calendar-disabled-cell"
     });
   })), Platform.OS === 'android' && monthPickerVisible && /*#__PURE__*/React__default.createElement(MonthYearPickerDialogueAndroid, {
@@ -13360,7 +13389,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 = useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -13415,8 +13446,9 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
         }
         setOpen(false);
       }
-    })
-  }, /*#__PURE__*/React__default.createElement(InternalCalendar, {
+    }),
+    supportedOrientations: supportedOrientations
+  }, /*#__PURE__*/React__default.createElement(ScrollView, null, /*#__PURE__*/React__default.createElement(InternalCalendar, {
     minDate: minDate,
     maxDate: maxDate,
     value: value,
@@ -13426,7 +13458,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     onToggleMonthPicker: function onToggleMonthPicker(visible) {
       return setMonthPickerVisible(visible);
     }
-  })));
+  }))));
 };
 
 var StyledPickerWrapper$1 = index$9(View)(function (_ref) {
@@ -13452,7 +13484,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 = useState(getDateValue(value || new Date(), minDate, maxDate)),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -13503,7 +13537,8 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
         }
         setOpen(false);
       }
-    })
+    }),
+    supportedOrientations: supportedOrientations
   }, /*#__PURE__*/React__default.createElement(StyledPickerWrapper$1, null, /*#__PURE__*/React__default.createElement(DateTimePicker, {
     testID: "datePickerIOS",
     value: selectingDate,
@@ -14781,7 +14816,9 @@ var ActionGroup = /*#__PURE__*/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 = useRef(null);
@@ -14837,7 +14874,8 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     visible: active,
     animationType: "fade",
     transparent: true,
-    statusBarTranslucent: true
+    statusBarTranslucent: true,
+    supportedOrientations: supportedOrientations
   }, /*#__PURE__*/React__default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
@@ -16599,7 +16637,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;
@@ -16678,7 +16718,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.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
@@ -16799,7 +16840,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;
@@ -16853,7 +16896,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.createElement(StyledSearchBar, null, /*#__PURE__*/React__default.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
@@ -18200,7 +18244,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 = useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -18246,7 +18292,8 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
         }
         setOpen(false);
       }
-    })
+    }),
+    supportedOrientations: supportedOrientations
   }, /*#__PURE__*/React__default.createElement(StyledPickerWrapper, null, /*#__PURE__*/React__default.createElement(DateTimePicker, {
     testID: "timePickerIOS",
     value: selectingDate,

package/eslint.config.js

@@ -0,0 +1,42 @@
+const heroDesign = require('@hero-design/eslint-plugin');
+const _import = require('eslint-plugin-import');
+const { FlatCompat } = require('@eslint/eslintrc');
+const { includeIgnoreFile } = require('@eslint/compat');
+const path = require('path');
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const gitignorePath = path.resolve(__dirname, '../../.gitignore');
+
+module.exports = [
+  ...compat.extends('hd', 'plugin:@hero-design/recommendedRn'),
+  includeIgnoreFile(gitignorePath),
+  {
+    files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
+
+    plugins: {
+      '@hero-design': heroDesign,
+      import: _import,
+    },
+
+    languageOptions: {
+      parserOptions: {
+        tsconfigRootDir: __dirname,
+        project: ['./tsconfig.json'],
+      },
+    },
+
+    rules: {
+      'no-underscore-dangle': [
+        'error',
+        {
+          allow: ['__hd__'],
+        },
+      ],
+
+      'import/no-cycle': 'error',
+    },
+  },
+];