@hero-design/rn 8.57.0 → 8.58.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 44.3s
+created lib/index.js, es/index.js in 58.4s

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @hero-design/rn
 
+## 8.58.0
+
+### Minor Changes
+
+- [#2756](https://github.com/Thinkei/hero-design/pull/2756) [`de3e8fa92`](https://github.com/Thinkei/hero-design/commit/de3e8fa92aa4a3598fc24f6fbdf40c66066bbb90) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Carousel] Update styling and make image optional
+
+### Patch Changes
+
+- [#2758](https://github.com/Thinkei/hero-design/pull/2758) [`61012afc4`](https://github.com/Thinkei/hero-design/commit/61012afc45105803d3bec4fc8ca8cf7cbe7f9363) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Tabs] Fix tabs bottom border on iOS not showing in full width
+
+## 8.57.1
+
+### Patch Changes
+
+- [#2717](https://github.com/Thinkei/hero-design/pull/2717) [`7d56b99af`](https://github.com/Thinkei/hero-design/commit/7d56b99afa8cf585f78c2aba57e97817f9365441) Thanks [@ttkien](https://github.com/ttkien)! - refactor card carousel to reduce cognitive comlexity to 15
+
+- [#2738](https://github.com/Thinkei/hero-design/pull/2738) [`819421b35`](https://github.com/Thinkei/hero-design/commit/819421b357b3e87f36326759c636b9958622215c) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Upgrade Expo SDK to 49
+
+- [#2719](https://github.com/Thinkei/hero-design/pull/2719) [`6985126e1`](https://github.com/Thinkei/hero-design/commit/6985126e14c4a1e43d9daf029afcbf21937d040e) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] refactor code
+
+- [#2716](https://github.com/Thinkei/hero-design/pull/2716) [`481838499`](https://github.com/Thinkei/hero-design/commit/4818384992a154a309b6c66099069822082f2f77) Thanks [@phucdph](https://github.com/phucdph)! - Fix typing issue
+
+- Updated dependencies [[`819421b35`](https://github.com/Thinkei/hero-design/commit/819421b357b3e87f36326759c636b9958622215c)]:
+  - @hero-design/react-native-month-year-picker@8.42.7
+
 ## 8.57.0
 
 ### Minor Changes

package/es/index.js

@@ -2403,7 +2403,6 @@ var getCardTheme = function getCardTheme(theme) {
 
 var getCarouselTheme = function getCarouselTheme(theme) {
   var space = {
-    headingMarginTop: theme.space.small,
     headingMarginBottom: theme.space.medium,
     footerPaddingHorizontal: theme.space.large,
     footerPaddingVertical: theme.space.medium,
@@ -12039,6 +12038,9 @@ var ITEM_WIDTH_RATE = 0.85;
  */
 var VIEW_POSITION_CENTER = 0.5;
 
+var getCardCarouselValidIndex = function getCardCarouselValidIndex(index, length) {
+  return Math.min(Math.max(index, 0), length - 1);
+};
 var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var onItemIndexChange = _ref.onItemIndexChange,
     items = _ref.items,
@@ -12065,18 +12067,13 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var viewPosition = Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
   var _snapToIndex = useCallback(function (index) {
     var _carouselRef$current;
-    var validIndex = 0;
-    if (index >= items.length) {
-      validIndex = items.length - 1;
-    } else if (index >= 0) {
-      validIndex = index;
-    }
+    var validIndex = getCardCarouselValidIndex(index, items.length);
     (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 || _carouselRef$current.scrollToIndex({
       index: validIndex,
       animated: true,
       viewPosition: viewPosition
     });
-  }, [carouselRef, itemWidth]);
+  }, [items.length, viewPosition]);
   /*
    * snap to the next index. If the curent index is the last one, snap to the first one.
    */
@@ -12091,7 +12088,7 @@ var CardCarousel = /*#__PURE__*/forwardRef(function (_ref, ref) {
       animated: true,
       viewPosition: viewPosition
     });
-  }, [carouselRef, currentIndex, itemWidth, items.length]);
+  }, [currentIndex, items.length, viewPosition]);
   React.useImperativeHandle(ref, function () {
     return {
       snapToIndex: function snapToIndex(index) {
@@ -12241,7 +12238,6 @@ var StyledCarouselView = index$9(View)(function () {
 var StyledCarouselHeading = index$9(Typography.Title)(function (_ref2) {
   var theme = _ref2.theme;
   return {
-    marginTop: theme.__hd__.carousel.space.headingMarginTop,
     marginBottom: theme.__hd__.carousel.space.headingMarginBottom
   };
 });
@@ -12305,22 +12301,37 @@ var CarouselItem = function CarouselItem(_ref) {
     content = _ref.content,
     heading = _ref.heading,
     body = _ref.body;
+  var theme = useTheme$1();
+  var ImageComponent = React.useMemo(function () {
+    if (image) {
+      if (isCarouselImageProps(image)) {
+        return /*#__PURE__*/React.createElement(StyledCustomSizeCarouselImage, {
+          source: image,
+          height: image.height,
+          width: image.width,
+          resizeMode: image.resizeMode,
+          style: {
+            marginBottom: theme.space.medium
+          }
+        });
+      }
+      return /*#__PURE__*/React.createElement(StyledCarouselImage, {
+        source: typeof image === 'string' ? {
+          uri: image
+        } : image,
+        style: {
+          marginBottom: theme.space.medium
+        }
+      });
+    }
+    return null;
+  }, [image]);
   return /*#__PURE__*/React.createElement(Box, {
     style: {
       width: width
     }
-  }, image && (isCarouselImageProps(image) ? /*#__PURE__*/React.createElement(StyledCustomSizeCarouselImage, {
-    source: image,
-    height: image.height,
-    width: image.width,
-    resizeMode: image.resizeMode
-  }) : /*#__PURE__*/React.createElement(StyledCarouselImage, {
-    source: typeof image === 'string' ? {
-      uri: image
-    } : image
-  })), /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
-    paddingHorizontal: "large",
-    marginTop: "large",
+  }, ImageComponent, /*#__PURE__*/React.createElement(StyledCarouselContentWrapper, {
+    paddingHorizontal: "medium",
     width: width
   }, content, /*#__PURE__*/React.createElement(StyledCarouselHeading, {
     level: "h1",
@@ -12846,38 +12857,96 @@ var getState$1 = function getState(_ref) {
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE = ' ';
 var LABEL_ANIMATION_DURATION = 150;
-var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var _ref3;
-  var label = _ref2.label,
-    prefix = _ref2.prefix,
-    suffix = _ref2.suffix,
-    style = _ref2.style,
-    textStyle = _ref2.textStyle,
-    testID = _ref2.testID,
-    accessibilityLabelledBy = _ref2.accessibilityLabelledBy,
-    error = _ref2.error,
-    required = _ref2.required,
-    _ref2$editable = _ref2.editable,
-    editable = _ref2$editable === void 0 ? true : _ref2$editable,
-    _ref2$disabled = _ref2.disabled,
-    disabled = _ref2$disabled === void 0 ? false : _ref2$disabled,
-    _ref2$loading = _ref2.loading,
-    loading = _ref2$loading === void 0 ? false : _ref2$loading,
-    maxLength = _ref2.maxLength,
-    _ref2$hideCharacterCo = _ref2.hideCharacterCount,
-    hideCharacterCount = _ref2$hideCharacterCo === void 0 ? false : _ref2$hideCharacterCo,
-    helpText = _ref2.helpText,
-    value = _ref2.value,
-    defaultValue = _ref2.defaultValue,
-    renderInputValue = _ref2.renderInputValue,
-    _ref2$allowFontScalin = _ref2.allowFontScaling,
-    allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
-    _ref2$variant = _ref2.variant,
-    variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$j);
-  var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
-  var isEmptyValue = displayText.length === 0;
+var renderErrorOrHelpText = function renderErrorOrHelpText(_ref2) {
+  var error = _ref2.error,
+    helpText = _ref2.helpText;
+  return error ? /*#__PURE__*/React.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React.createElement(Icon, {
+    testID: "input-error-icon",
+    icon: "circle-info",
+    size: "xsmall",
+    intent: "danger"
+  }), /*#__PURE__*/React.createElement(StyledError, {
+    testID: "input-error-message"
+  }, error)) : !!helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText);
+};
+var renderInput = function renderInput(_ref3) {
+  var variant = _ref3.variant,
+    nativeInputProps = _ref3.nativeInputProps,
+    renderInputValue = _ref3.renderInputValue,
+    ref = _ref3.ref;
+  return renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    themeVariant: variant,
+    multiline: variant === 'textarea' || nativeInputProps.multiline,
+    ref: ref
+  }));
+};
+var renderSuffix = function renderSuffix(_ref4) {
+  var state = _ref4.state,
+    loading = _ref4.loading,
+    suffix = _ref4.suffix;
   var actualSuffix = loading ? 'loading' : suffix;
+  return typeof actualSuffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    intent: state === 'disabled' ? 'disabled-text' : 'text',
+    testID: "input-suffix",
+    icon: actualSuffix,
+    spin: actualSuffix === 'loading',
+    size: "medium"
+  }) : suffix;
+};
+var renderPrefix = function renderPrefix(_ref5) {
+  var state = _ref5.state,
+    prefix = _ref5.prefix;
+  return typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
+    intent: state === 'disabled' ? 'disabled-text' : 'text',
+    testID: "input-prefix",
+    icon: prefix,
+    size: "xsmall"
+  }) : prefix;
+};
+var renderMaxLengthMessage = function renderMaxLengthMessage(_ref6) {
+  var maxLength = _ref6.maxLength,
+    state = _ref6.state,
+    currentLength = _ref6.currentLength,
+    hideCharacterCount = _ref6.hideCharacterCount;
+  var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
+  return shouldShowMaxLength && /*#__PURE__*/React.createElement(StyledMaxLengthMessage, {
+    themeState: state
+  }, currentLength, "/", maxLength);
+};
+var getDisplayText = function getDisplayText(value, defaultValue) {
+  var _ref7;
+  return (_ref7 = value !== undefined ? value : defaultValue) !== null && _ref7 !== void 0 ? _ref7 : '';
+};
+var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
+  var label = _ref8.label,
+    prefix = _ref8.prefix,
+    suffix = _ref8.suffix,
+    style = _ref8.style,
+    textStyle = _ref8.textStyle,
+    testID = _ref8.testID,
+    accessibilityLabelledBy = _ref8.accessibilityLabelledBy,
+    error = _ref8.error,
+    required = _ref8.required,
+    _ref8$editable = _ref8.editable,
+    editable = _ref8$editable === void 0 ? true : _ref8$editable,
+    _ref8$disabled = _ref8.disabled,
+    disabled = _ref8$disabled === void 0 ? false : _ref8$disabled,
+    _ref8$loading = _ref8.loading,
+    loading = _ref8$loading === void 0 ? false : _ref8$loading,
+    maxLength = _ref8.maxLength,
+    _ref8$hideCharacterCo = _ref8.hideCharacterCount,
+    hideCharacterCount = _ref8$hideCharacterCo === void 0 ? false : _ref8$hideCharacterCo,
+    helpText = _ref8.helpText,
+    value = _ref8.value,
+    defaultValue = _ref8.defaultValue,
+    renderInputValue = _ref8.renderInputValue,
+    _ref8$allowFontScalin = _ref8.allowFontScaling,
+    allowFontScaling = _ref8$allowFontScalin === void 0 ? false : _ref8$allowFontScalin,
+    _ref8$variant = _ref8.variant,
+    variant = _ref8$variant === void 0 ? 'text' : _ref8$variant,
+    nativeProps = _objectWithoutProperties(_ref8, _excluded$j);
+  var displayText = getDisplayText(value, defaultValue);
+  var isEmptyValue = displayText.length === 0;
   var _React$useState = React.useState({
       height: 0,
       width: 0
@@ -12905,7 +12974,6 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isFocused: isFocused,
     isEmptyValue: isEmptyValue
   });
-  var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
   var theme = useTheme();
   var focusAnimation = useRef(new Animated.Value(0)).current;
   useEffect(function () {
@@ -13043,12 +13111,10 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, borderStyle]
   }), /*#__PURE__*/React.createElement(View, {
     onLayout: onPrefixLayout
-  }, typeof prefix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
-    intent: state === 'disabled' ? 'disabled-text' : 'text',
-    testID: "input-prefix",
-    icon: prefix,
-    size: "xsmall"
-  }) : prefix), /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
+  }, renderPrefix({
+    state: state,
+    prefix: prefix
+  })), /*#__PURE__*/React.createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: variant,
     pointerEvents: "none",
     style: [{
@@ -13085,28 +13151,26 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     testID: "input-label",
     themeState: state,
     onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
-    themeVariant: variant,
-    multiline: variant === 'textarea' || nativeProps.multiline,
-    ref: function ref(reference) {
-      innerTextInput.current = reference;
+  }, label)), /*#__PURE__*/React.createElement(StyledTextInputAndLabelContainer, null, renderInput({
+    variant: variant,
+    nativeInputProps: nativeInputProps,
+    renderInputValue: renderInputValue,
+    ref: function ref(rnTextInputRef) {
+      innerTextInput.current = rnTextInputRef;
     }
-  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React.createElement(Icon, {
-    intent: state === 'disabled' ? 'disabled-text' : 'text',
-    testID: "input-suffix",
-    icon: actualSuffix,
-    spin: actualSuffix === 'loading',
-    size: "medium"
-  }) : suffix), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React.createElement(Icon, {
-    testID: "input-error-icon",
-    icon: "circle-info",
-    size: "xsmall",
-    intent: "danger"
-  }), /*#__PURE__*/React.createElement(StyledError, {
-    testID: "input-error-message"
-  }, error)) : !!helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText), shouldShowMaxLength && /*#__PURE__*/React.createElement(StyledMaxLengthMessage, {
-    themeState: state
-  }, displayText.length, "/", maxLength))));
+  })), renderSuffix({
+    state: state,
+    loading: loading,
+    suffix: suffix
+  })), /*#__PURE__*/React.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React.createElement(StyledErrorAndMaxLengthContainer, null, renderErrorOrHelpText({
+    error: error,
+    helpText: helpText
+  }), renderMaxLengthMessage({
+    state: state,
+    currentLength: displayText.length,
+    maxLength: maxLength,
+    hideCharacterCount: hideCharacterCount
+  }))));
 });
 
 var getDateValue = function getDateValue(value, minDate, maxDate) {
@@ -14791,13 +14855,30 @@ var CTAWrapper = index$9(TouchableOpacity)(function (_ref6) {
   };
 });
 
-var ToastContext = /*#__PURE__*/createContext({});
+var fallbackToastControlContext = {
+  show: function show(_) {
+    return '';
+  },
+  hide: function hide(_) {
+    // Fallback empty function
+  },
+  clearAll: function clearAll() {
+    // Fallback empty function
+  }
+};
+var ToastContext = /*#__PURE__*/createContext(fallbackToastControlContext);
 var ToastConfigContext = /*#__PURE__*/createContext({});
 var useToastConfig = function useToastConfig() {
   return useContext(ToastConfigContext);
 };
 var useToast = function useToast() {
-  return useContext(ToastContext);
+  var context = useContext(ToastContext);
+  if (!context) {
+    // eslint-disable-next-line no-console
+    console.warn('Toast was used without ToastProvider');
+    return fallbackToastControlContext;
+  }
+  return context;
 };
 
 var getIntentIcon = function getIntentIcon(intent) {
@@ -14996,8 +15077,7 @@ var ToastProvider = function ToastProvider(_ref) {
   var position = _position === undefined ? 'bottom' : _position;
   useDeprecation("Toast's position prop is deprecated and will be removed in the next major release.\nPlease remove it.", _position !== undefined);
   var toastRef = useRef(null);
-  // @ts-expect-error: TODO: @tungv Fix this type error
-  var _useState = useState(null),
+  var _useState = useState(),
     _useState2 = _slicedToArray(_useState, 2),
     refState = _useState2[0],
     setRefState = _useState2[1];
@@ -15013,7 +15093,7 @@ var ToastProvider = function ToastProvider(_ref) {
     };
   }, [displayType, position]);
   return /*#__PURE__*/React.createElement(ToastContext.Provider, {
-    value: refState
+    value: refState || fallbackToastControlContext
   }, /*#__PURE__*/React.createElement(View, {
     style: {
       flex: 1
@@ -17581,18 +17661,16 @@ var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
         });
       }, 100);
     },
-    style:
-    // Border styles specified in contentContainerStyle don't work
-    // so they need to be placed here instead on Android.
-    Platform.OS === 'android' ? {
+    style: {
       borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
       borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    } : undefined,
-    contentContainerStyle: {
-      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+    },
+    contentContainerStyle: _objectSpread2({
+      paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding
+    }, Platform.OS === 'android' && {
       borderBottomColor: theme.__hd__.tabs.colors.headerBottom,
       borderBottomWidth: theme.__hd__.tabs.sizes.indicator
-    },
+    }),
     renderItem: function renderItem(_ref4) {
       var tab = _ref4.item,
         index = _ref4.index;