@hero-design/rn 8.104.1-alpha.2 → 8.104.1-alpha.3

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:4140) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:4254) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -15,9 +15,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [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.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 10.7s
+created lib/index.js, es/index.js in 1m 13.8s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 19.7s
+created ., . in 21.7s

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hero-design/rn
 
+## 8.104.1-alpha.3
+
+### Patch Changes
+
+- [#3497](https://github.com/Thinkei/hero-design/pull/3497) [`e92d1dab57316441e7b5054debe823328e1a1083`](https://github.com/Thinkei/hero-design/commit/e92d1dab57316441e7b5054debe823328e1a1083) Thanks [@luanlai2201](https://github.com/luanlai2201)! - [Font] replace playful font to Saiga
+
+- [#4123](https://github.com/Thinkei/hero-design/pull/4123) [`ecc5905dec81783858f57595a0af4306ff3b0b89`](https://github.com/Thinkei/hero-design/commit/ecc5905dec81783858f57595a0af4306ff3b0b89) Thanks [@truongnguyen-eh](https://github.com/truongnguyen-eh)! - [ANG-3740] Resolve conflict between alpha and master-react-18
+
 ## 8.104.1-alpha.2
 
 ### Patch Changes

package/es/index.js

@@ -7066,7 +7066,8 @@ var getTypographyTheme = function getTypographyTheme(theme) {
     inverted: theme.colors.onDarkGlobalSurface,
     archived: theme.colors.onArchivedSurface,
     disabled: theme.colors.disabledOnDefaultGlobalSurface,
-    muted: theme.colors.mutedOnDefaultGlobalSurface
+    muted: theme.colors.mutedOnDefaultGlobalSurface,
+    inactive: theme.colors.inactiveOnDefaultGlobalSurface
   };
   var fontSizes = {
     xsmall: theme.fontSizes.xsmall,
@@ -13463,6 +13464,14 @@ var CalendarRowItem = function CalendarRowItem(_ref) {
   }) : null));
 };
 
+var DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
+// Sunday first column => 0
+// Sunday last column  => 1
+var WEEK_INDEX_OFFSET = 1;
+var SUNDAY_INDEX = 6;
+// Always render 7 rows x 6 items for consistent layout
+var TOTAL_DATES_ITEMS = 7 * 6;
+
 var initArray = function initArray(length, func) {
   return Array.from(Array(length)).map(function (_, index) {
     return func(index);
@@ -13535,6 +13544,73 @@ var setStartOrEndDate = function setStartOrEndDate(_ref2) {
     endDate: undefined
   };
 };
+var shouldUseMonthPicker = function shouldUseMonthPicker(onMonthChange) {
+  return onMonthChange !== noop$2;
+};
+var getCalendarDate = function getCalendarDate(_ref3) {
+  var visibleDate = _ref3.visibleDate,
+    _ref3$markedDates = _ref3.markedDates,
+    markedDates = _ref3$markedDates === void 0 ? [] : _ref3$markedDates,
+    minDate = _ref3.minDate,
+    maxDate = _ref3.maxDate;
+  var currentMonth = visibleDate.getMonth();
+  var currentYear = visibleDate.getFullYear();
+  var parsedMaskedDate = markedDates.reduce(function (current, markedDate) {
+    return _objectSpread2(_objectSpread2({}, current), {}, _defineProperty({}, markedDate.toDateString(), true));
+  }, {});
+  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
+  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
+  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
+  // Index of day in week is shifted by 1 due to Sunday is the last column
+  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
+  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
+  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
+  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
+    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
+    var count = lastDayIndexOfPreviousMonth - reversedIndex;
+    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
+  });
+  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
+    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
+  });
+  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
+    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
+  });
+  return {
+    firstDateOfMonth: firstDateOfMonth,
+    lastDateOfMonth: lastDateOfMonth,
+    parsedMaskedDate: parsedMaskedDate,
+    daysOfPreviousMonth: daysOfPreviousMonth,
+    daysOfCurrentMonth: daysOfCurrentMonth,
+    daysOfNextMonth: daysOfNextMonth
+  };
+};
+var getCalendarButtonState = function getCalendarButtonState(_ref4) {
+  var visibleDate = _ref4.visibleDate,
+    markedDates = _ref4.markedDates,
+    minDate = _ref4.minDate,
+    maxDate = _ref4.maxDate;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth,
+    firstDateOfMonth = _getCalendarDate.firstDateOfMonth,
+    lastDateOfMonth = _getCalendarDate.lastDateOfMonth;
+  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
+    return date !== undefined;
+  }) && minDate >= firstDateOfMonth;
+  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
+    return date !== undefined;
+  }) || maxDate <= lastDateOfMonth;
+  return {
+    disablePrevButton: disablePrevButton,
+    disableNextButton: disableNextButton
+  };
+};
 
 var SelectedDate = function SelectedDate(_ref) {
   var date = _ref.date,
@@ -13570,13 +13646,36 @@ var SelectedDate = function SelectedDate(_ref) {
   }) : null));
 };
 
-var DAYS_OF_WEEK$1 = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-// Sunday first column => 0
-// Sunday last column  => 1
-var WEEK_INDEX_OFFSET$1 = 1;
-var SUNDAY_INDEX$1 = 6;
-// Always render 7 rows x 6 items for consistent layout
-var TOTAL_DATES_ITEMS$1 = 7 * 6;
+var useCalendarLayout = function useCalendarLayout() {
+  var theme = useTheme();
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    contentHeight = _useState2[0],
+    setContentHeight = _useState2[1];
+  var calendarItemHeight = contentHeight - theme.__hd__.calendar.space.iosPickerMarginVertical * 2;
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    contentWidth = _useState4[0],
+    setContentWidth = _useState4[1];
+  var calendarItemWidth = useMemo(function () {
+    return contentWidth > 0 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
+  }, [contentWidth, theme]);
+  var onLayout = useCallback(function (e) {
+    var _e$nativeEvent$layout = e.nativeEvent.layout,
+      width = _e$nativeEvent$layout.width,
+      height = _e$nativeEvent$layout.height;
+    setContentHeight(height);
+    setContentWidth(width);
+  }, []);
+  return {
+    onLayout: onLayout,
+    contentHeight: contentHeight,
+    calendarItemHeight: calendarItemHeight,
+    contentWidth: contentWidth,
+    calendarItemWidth: calendarItemWidth
+  };
+};
+
 var CalendarRange = function CalendarRange(_ref) {
   var value = _ref.value,
     visibleDate = _ref.visibleDate,
@@ -13599,52 +13698,35 @@ var CalendarRange = function CalendarRange(_ref) {
     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 _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 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
-  }, [contentWidth, theme]);
-  var useMonthPicker = onMonthChange !== noop$2;
-  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
-  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
-  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
-  // Index of day in week is shifted by 1 due to Sunday is the last column
-  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX$1 : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET$1;
-  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
-  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
-  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
-    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
-    var count = lastDayIndexOfPreviousMonth - reversedIndex;
-    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
-  });
-  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
-    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
-  });
-  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS$1 - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
-    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
-  });
-  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
-    return date !== undefined;
-  }) && minDate >= firstDateOfMonth;
-  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
-    return date !== undefined;
-  }) || maxDate <= lastDateOfMonth;
+  var _useCalendarLayout = useCalendarLayout(),
+    onLayout = _useCalendarLayout.onLayout,
+    contentHeight = _useCalendarLayout.contentHeight,
+    contentWidth = _useCalendarLayout.contentWidth,
+    calendarItemWidth = _useCalendarLayout.calendarItemWidth;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate,
+      onMonthChange: onMonthChange
+    }),
+    parsedMaskedDate = _getCalendarDate.parsedMaskedDate,
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfCurrentMonth = _getCalendarDate.daysOfCurrentMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth;
+  var _getCalendarButtonSta = getCalendarButtonState({
+      visibleDate: visibleDate,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    disablePrevButton = _getCalendarButtonSta.disablePrevButton,
+    disableNextButton = _getCalendarButtonSta.disableNextButton;
+  var shouldShowMonthPicker = shouldUseMonthPicker(onMonthChange);
+  var now = new Date();
   var onDateChange = function onDateChange(date) {
     var newDateRange = setStartOrEndDate({
       date: date,
@@ -13692,17 +13774,10 @@ var CalendarRange = function CalendarRange(_ref) {
       textIntent: isCurrentMonth ? undefined : 'subdued'
     });
   };
-  var onLayout = function onLayout(e) {
-    var _e$nativeEvent$layout = e.nativeEvent.layout,
-      width = _e$nativeEvent$layout.width,
-      height = _e$nativeEvent$layout.height;
-    setContentHeight(height);
-    setContentWidth(width);
-  };
   return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
-    value: !useMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
+    value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
       testID: "calendar-month-picker",
       onPress: function onPress() {
         onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(!monthPickerVisible);
@@ -13724,7 +13799,7 @@ var CalendarRange = function CalendarRange(_ref) {
     }))),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
-    onPress: useMonthPicker ? undefined : onTitlePress,
+    onPress: shouldShowMonthPicker ? undefined : onTitlePress,
     previousDisabled: disablePrevButton,
     nextDisabled: disableNextButton,
     fontSize: "large"
@@ -13744,7 +13819,7 @@ var CalendarRange = function CalendarRange(_ref) {
     }
   })) : /*#__PURE__*/React__default.createElement(Box, {
     onLayout: onLayout
-  }, /*#__PURE__*/React__default.createElement(StyledCalendarRow, null, DAYS_OF_WEEK$1.map(function (day) {
+  }, /*#__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, {
@@ -13784,13 +13859,6 @@ var CalendarRange = function CalendarRange(_ref) {
   })));
 };
 
-var DAYS_OF_WEEK = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su'];
-// Sunday first column => 0
-// Sunday last column  => 1
-var WEEK_INDEX_OFFSET = 1;
-var SUNDAY_INDEX = 6;
-// Always render 7 rows x 6 items for consistent layout
-var TOTAL_DATES_ITEMS = 7 * 6;
 var Calendar = function Calendar(_ref) {
   var value = _ref.value,
     visibleDate = _ref.visibleDate,
@@ -13813,63 +13881,39 @@ var Calendar = function Calendar(_ref) {
     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 _useCalendarLayout = useCalendarLayout(),
+    onLayout = _useCalendarLayout.onLayout,
+    contentHeight = _useCalendarLayout.contentHeight,
+    contentWidth = _useCalendarLayout.contentWidth,
+    calendarItemWidth = _useCalendarLayout.calendarItemWidth;
+  var _getCalendarDate = getCalendarDate({
+      visibleDate: visibleDate,
+      markedDates: markedDates,
+      minDate: minDate,
+      maxDate: maxDate,
+      onMonthChange: onMonthChange
+    }),
+    parsedMaskedDate = _getCalendarDate.parsedMaskedDate,
+    daysOfPreviousMonth = _getCalendarDate.daysOfPreviousMonth,
+    daysOfCurrentMonth = _getCalendarDate.daysOfCurrentMonth,
+    daysOfNextMonth = _getCalendarDate.daysOfNextMonth;
+  var _getCalendarButtonSta = getCalendarButtonState({
+      visibleDate: visibleDate,
+      minDate: minDate,
+      maxDate: maxDate
+    }),
+    disablePrevButton = _getCalendarButtonSta.disablePrevButton,
+    disableNextButton = _getCalendarButtonSta.disableNextButton;
+  var shouldShowMonthPicker = shouldUseMonthPicker(onMonthChange);
   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 ? Math.floor((contentWidth - theme.__hd__.calendar.space.cellPadding) / 7) : undefined;
-  }, [contentWidth, theme]);
-  var useMonthPicker = onMonthChange !== noop$2;
-  var firstDateOfMonth = new Date(currentYear, currentMonth, 1);
-  var lastDateOfMonth = new Date(currentYear, currentMonth + 1, 0);
-  var lastDateOfPreviousMonth = new Date(currentYear, currentMonth, 0);
-  // Index of day in week is shifted by 1 due to Sunday is the last column
-  var firstDayWeekIndexOfMonth = firstDateOfMonth.getDay() === 0 ? SUNDAY_INDEX : firstDateOfMonth.getDay() - WEEK_INDEX_OFFSET;
-  var lastDayIndexOfCurrentMonth = lastDateOfMonth.getDate();
-  var lastDayIndexOfPreviousMonth = lastDateOfPreviousMonth.getDate();
-  var daysOfPreviousMonth = initArray(firstDayWeekIndexOfMonth, function (index) {
-    var reversedIndex = firstDayWeekIndexOfMonth - index - 1;
-    var count = lastDayIndexOfPreviousMonth - reversedIndex;
-    return getValidDate(new Date(currentYear, currentMonth - 1, count), minDate, maxDate);
-  });
-  var daysOfCurrentMonth = initArray(lastDayIndexOfCurrentMonth, function (index) {
-    return getValidDate(new Date(currentYear, currentMonth, index + 1), minDate, maxDate);
-  });
-  var daysOfNextMonth = initArray(TOTAL_DATES_ITEMS - (daysOfPreviousMonth.length + daysOfCurrentMonth.length), function (index) {
-    return getValidDate(new Date(currentYear, currentMonth + 1, index + 1), minDate, maxDate);
-  });
-  var disablePrevButton = minDate === undefined ? false : !daysOfPreviousMonth.some(function (date) {
-    return date !== undefined;
-  }) && minDate >= firstDateOfMonth;
-  var disableNextButton = maxDate === undefined ? false : !daysOfNextMonth.some(function (date) {
-    return date !== undefined;
-  }) || maxDate <= lastDateOfMonth;
-  var onLayout = function onLayout(e) {
-    var _e$nativeEvent$layout = e.nativeEvent.layout,
-      width = _e$nativeEvent$layout.width,
-      height = _e$nativeEvent$layout.height;
-    setContentHeight(height);
-    setContentWidth(width);
-  };
+  var now = new Date();
   return /*#__PURE__*/React__default.createElement(StyledContainer$7, {
     testID: testID
   }, /*#__PURE__*/React__default.createElement(StyledCalendarHeader, null, /*#__PURE__*/React__default.createElement(ContentNavigator, {
-    value: !useMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
+    value: !shouldShowMonthPicker ? formatTime('MMMM yyyy', visibleDate) : /*#__PURE__*/React__default.createElement(TouchableOpacity, {
       testID: "calendar-month-picker",
       onPress: function onPress() {
         onToggleMonthPicker === null || onToggleMonthPicker === void 0 || onToggleMonthPicker(!monthPickerVisible);
@@ -13891,7 +13935,7 @@ var Calendar = function Calendar(_ref) {
     }))),
     onPreviousPress: onPreviousPress,
     onNextPress: onNextPress,
-    onPress: useMonthPicker ? undefined : onTitlePress,
+    onPress: shouldShowMonthPicker ? undefined : onTitlePress,
     previousDisabled: disablePrevButton,
     nextDisabled: disableNextButton,
     fontSize: "large"