@hero-design/rn 8.57.0 → 8.57.1

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 57.2s

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @hero-design/rn
 
+## 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

@@ -12039,6 +12039,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 +12068,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 +12089,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) {
@@ -12846,38 +12844,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 +12961,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 +13098,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 +13138,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 +14842,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 +15064,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 +15080,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

package/lib/index.js

@@ -12069,6 +12069,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__*/React.forwardRef(function (_ref, ref) {
   var onItemIndexChange = _ref.onItemIndexChange,
     items = _ref.items,
@@ -12095,18 +12098,13 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var viewPosition = reactNative.Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
   var _snapToIndex = React.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.
    */
@@ -12121,7 +12119,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       animated: true,
       viewPosition: viewPosition
     });
-  }, [carouselRef, currentIndex, itemWidth, items.length]);
+  }, [currentIndex, items.length, viewPosition]);
   React__default["default"].useImperativeHandle(ref, function () {
     return {
       snapToIndex: function snapToIndex(index) {
@@ -12876,38 +12874,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__*/React.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__default["default"].createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
+    testID: "input-error-icon",
+    icon: "circle-info",
+    size: "xsmall",
+    intent: "danger"
+  }), /*#__PURE__*/React__default["default"].createElement(StyledError, {
+    testID: "input-error-message"
+  }, error)) : !!helpText && /*#__PURE__*/React__default["default"].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__default["default"].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__default["default"].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__default["default"].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__default["default"].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__*/React.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__default["default"].useState({
       height: 0,
       width: 0
@@ -12935,7 +12991,6 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     isFocused: isFocused,
     isEmptyValue: isEmptyValue
   });
-  var shouldShowMaxLength = maxLength !== undefined && !hideCharacterCount;
   var theme = useTheme();
   var focusAnimation = React.useRef(new reactNative.Animated.Value(0)).current;
   React.useEffect(function () {
@@ -13073,12 +13128,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }, borderStyle]
   }), /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     onLayout: onPrefixLayout
-  }, typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: state === 'disabled' ? 'disabled-text' : 'text',
-    testID: "input-prefix",
-    icon: prefix,
-    size: "xsmall"
-  }) : prefix), /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
+  }, renderPrefix({
+    state: state,
+    prefix: prefix
+  })), /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
     themeVariant: variant,
     pointerEvents: "none",
     style: [{
@@ -13115,28 +13168,26 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     testID: "input-label",
     themeState: state,
     onLayout: onLabelLayout
-  }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
-    themeVariant: variant,
-    multiline: variant === 'textarea' || nativeProps.multiline,
-    ref: function ref(reference) {
-      innerTextInput.current = reference;
+  }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, renderInput({
+    variant: variant,
+    nativeInputProps: nativeInputProps,
+    renderInputValue: renderInputValue,
+    ref: function ref(rnTextInputRef) {
+      innerTextInput.current = rnTextInputRef;
     }
-  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: state === 'disabled' ? 'disabled-text' : 'text',
-    testID: "input-suffix",
-    icon: actualSuffix,
-    spin: actualSuffix === 'loading',
-    size: "medium"
-  }) : suffix), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default["default"].createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default["default"].createElement(Icon, {
-    testID: "input-error-icon",
-    icon: "circle-info",
-    size: "xsmall",
-    intent: "danger"
-  }), /*#__PURE__*/React__default["default"].createElement(StyledError, {
-    testID: "input-error-message"
-  }, error)) : !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText), shouldShowMaxLength && /*#__PURE__*/React__default["default"].createElement(StyledMaxLengthMessage, {
-    themeState: state
-  }, displayText.length, "/", maxLength))));
+  })), renderSuffix({
+    state: state,
+    loading: loading,
+    suffix: suffix
+  })), /*#__PURE__*/React__default["default"].createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default["default"].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) {
@@ -14821,13 +14872,30 @@ var CTAWrapper = index$9(reactNative.TouchableOpacity)(function (_ref6) {
   };
 });
 
-var ToastContext = /*#__PURE__*/React.createContext({});
+var fallbackToastControlContext = {
+  show: function show(_) {
+    return '';
+  },
+  hide: function hide(_) {
+    // Fallback empty function
+  },
+  clearAll: function clearAll() {
+    // Fallback empty function
+  }
+};
+var ToastContext = /*#__PURE__*/React.createContext(fallbackToastControlContext);
 var ToastConfigContext = /*#__PURE__*/React.createContext({});
 var useToastConfig = function useToastConfig() {
   return React.useContext(ToastConfigContext);
 };
 var useToast = function useToast() {
-  return React.useContext(ToastContext);
+  var context = React.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) {
@@ -15026,8 +15094,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 = React.useRef(null);
-  // @ts-expect-error: TODO: @tungv Fix this type error
-  var _useState = React.useState(null),
+  var _useState = React.useState(),
     _useState2 = _slicedToArray(_useState, 2),
     refState = _useState2[0],
     setRefState = _useState2[1];
@@ -15043,7 +15110,7 @@ var ToastProvider = function ToastProvider(_ref) {
     };
   }, [displayType, position]);
   return /*#__PURE__*/React__default["default"].createElement(ToastContext.Provider, {
-    value: refState
+    value: refState || fallbackToastControlContext
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     style: {
       flex: 1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.57.0",
+  "version": "8.57.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -24,13 +24,12 @@
     "@emotion/react": "^11.9.3",
     "@hero-design/colors": "8.42.5",
     "date-fns": "^2.16.1",
-    "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.6",
-    "@react-native-community/datetimepicker": "^3.5.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@react-native-community/datetimepicker": "^3.5.2 || ^7.2.0",
     "@react-native-community/slider": "4.4.3",
     "react": "18.2.0",
     "react-native": "^0.71.0",
@@ -49,8 +48,8 @@
     "@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.6",
-    "@react-native-community/datetimepicker": "3.5.2",
+    "@hero-design/react-native-month-year-picker": "^8.42.7",
+    "@react-native-community/datetimepicker": "7.2.0",
     "@react-native-community/slider": "4.4.3",
     "@rollup/plugin-babel": "^5.3.1",
     "@rollup/plugin-commonjs": "^21.0.1",
@@ -60,6 +59,7 @@
     "@rollup/plugin-typescript": "^8.3.0",
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-native": "^9.1.0",
+    "@types/events": "^3.0.3",
     "@types/jest": "^29.5.3",
     "@types/react": "^18.2.0",
     "@types/react-native-vector-icons": "^6.4.10",