@hero-design/rn 8.2.1 → 8.2.3

package/lib/index.js

@@ -5730,7 +5730,7 @@ var StyledText$3 = index$a(reactNative.Text)(function (_ref) {
   });
 });
 
-var _excluded$j = ["children", "fontSize", "fontWeight", "intent", "typeface"];
+var _excluded$k = ["children", "fontSize", "fontWeight", "intent", "typeface"];
 var Text = function Text(_ref) {
   var children = _ref.children,
     _ref$fontSize = _ref.fontSize,
@@ -5741,7 +5741,7 @@ var Text = function Text(_ref) {
     intent = _ref$intent === void 0 ? 'body' : _ref$intent,
     _ref$typeface = _ref.typeface,
     typeface = _ref$typeface === void 0 ? 'neutral' : _ref$typeface,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$j);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$k);
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -6220,10 +6220,10 @@ var StyledHeroIcon = index$a(HeroIcon)(function (_ref) {
   };
 });
 
-var _excluded$i = ["style"];
+var _excluded$j = ["style"];
 var AnimatedIcon = function AnimatedIcon(_ref) {
   var style = _ref.style,
-    otherProps = _objectWithoutProperties(_ref, _excluded$i);
+    otherProps = _objectWithoutProperties(_ref, _excluded$j);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(rotateAnimation.current, {
@@ -6259,21 +6259,45 @@ var Icon = function Icon(_ref) {
     intent = _ref$intent === void 0 ? 'text' : _ref$intent,
     testID = _ref.testID,
     _ref$spin = _ref.spin,
-    spin = _ref$spin === void 0 ? false : _ref$spin;
+    spin = _ref$spin === void 0 ? false : _ref$spin,
+    accessibilityLabel = _ref.accessibilityLabel,
+    accessibilityHint = _ref.accessibilityHint,
+    accessibilityRole = _ref.accessibilityRole,
+    accessibilityState = _ref.accessibilityState,
+    accessibilityValue = _ref.accessibilityValue,
+    accessibilityLiveRegion = _ref.accessibilityLiveRegion,
+    accessibilityElementsHidden = _ref.accessibilityElementsHidden,
+    accessible = _ref.accessible,
+    accessibilityIgnoresInvertColors = _ref.accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal = _ref.accessibilityViewIsModal,
+    accessibilityActions = _ref.accessibilityActions;
   useDeprecation("".concat(icon, " icon is deprecated and will be removed in the next major release, please use ").concat(icon.replace('carat', 'caret'), " instead."), icon.startsWith('carat'));
-  return spin ? /*#__PURE__*/React__default["default"].createElement(AnimatedIcon, {
+  var accessibilityProps = {
+    accessibilityLabel: accessibilityLabel,
+    accessibilityHint: accessibilityHint,
+    accessibilityRole: accessibilityRole,
+    accessibilityState: accessibilityState,
+    accessibilityValue: accessibilityValue,
+    accessibilityLiveRegion: accessibilityLiveRegion,
+    accessibilityElementsHidden: accessibilityElementsHidden,
+    accessible: accessible,
+    accessibilityIgnoresInvertColors: accessibilityIgnoresInvertColors,
+    accessibilityViewIsModal: accessibilityViewIsModal,
+    accessibilityActions: accessibilityActions
+  };
+  return spin ? /*#__PURE__*/React__default["default"].createElement(AnimatedIcon, _extends$1({
     name: icon,
     themeIntent: intent,
     themeSize: size,
     style: style,
     testID: testID
-  }) : /*#__PURE__*/React__default["default"].createElement(StyledHeroIcon, {
+  }, accessibilityProps)) : /*#__PURE__*/React__default["default"].createElement(StyledHeroIcon, _extends$1({
     name: icon,
     themeIntent: intent,
     themeSize: size,
     style: style,
     testID: testID
-  });
+  }, accessibilityProps));
 };
 Icon.List = IconList;
 
@@ -6305,7 +6329,7 @@ var AccordionItem = function AccordionItem(_ref) {
   }, content));
 };
 
-var _excluded$h = ["key"];
+var _excluded$i = ["key"];
 var Accordion = function Accordion(_ref) {
   var items = _ref.items,
     activeItemKey = _ref.activeItemKey,
@@ -6326,7 +6350,7 @@ var Accordion = function Accordion(_ref) {
     testID: testID
   }, items.map(function (_ref2, index) {
     var key = _ref2.key,
-      props = _objectWithoutProperties(_ref2, _excluded$h);
+      props = _objectWithoutProperties(_ref2, _excluded$i);
     var open = _activeItemKey === key;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
       key: key
@@ -6708,7 +6732,7 @@ var StyledStatus = index$a(reactNative.Animated.View)(function (_ref3) {
   };
 });
 
-var _excluded$g = ["children", "visible", "intent", "style", "testID"];
+var _excluded$h = ["children", "visible", "intent", "style", "testID"];
 var Status = function Status(_ref) {
   var children = _ref.children,
     _ref$visible = _ref.visible,
@@ -6717,7 +6741,7 @@ var Status = function Status(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -6750,7 +6774,7 @@ var Status = function Status(_ref) {
   }));
 };
 
-var _excluded$f = ["content", "visible", "max", "intent", "style", "testID"];
+var _excluded$g = ["content", "visible", "max", "intent", "style", "testID"];
 var DEFAULT_MAX_NUMBER = 99;
 var getPaddingState = function getPaddingState(content) {
   return content.length > 1 ? 'wideContent' : 'narrowContent';
@@ -6765,7 +6789,7 @@ var Badge = function Badge(_ref) {
     intent = _ref$intent === void 0 ? 'danger' : _ref$intent,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$g);
   var _React$useRef = React__default["default"].useRef(new reactNative.Animated.Value(visible ? 1 : 0)),
     opacity = _React$useRef.current;
   var isFirstRendering = React__default["default"].useRef(true);
@@ -6854,22 +6878,22 @@ var StyledBottomBarText = index$a(Typography.Text)(function (_ref3) {
 
 var isIOS = reactNative.Platform.OS === 'ios';
 var isAndroid = reactNative.Platform.OS === 'android';
-var pick = function pick(keys, props) {
+function pick(keys, obj) {
   return keys.filter(function (key) {
-    return key in props;
+    return key in obj;
   }).reduce(function (result, cur) {
-    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, props[cur]));
+    return _objectSpread2(_objectSpread2({}, result), {}, _defineProperty({}, cur, obj[cur]));
   }, {});
-};
-var omit = function omit(keys, props) {
-  var result = props;
+}
+function omit(keys, obj) {
+  var result = obj;
   keys.forEach(function (key) {
     delete result[key];
   });
   return result;
-};
+}
 
-var _excluded$e = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
+var _excluded$f = ["onTabPress", "renderActiveTabOnly", "selectedTabKey", "tabs"];
 var getInactiveIcon = function getInactiveIcon(icon) {
   var inactiveIcon = "".concat(icon, "-outlined");
   return isHeroIcon(inactiveIcon) ? inactiveIcon : icon;
@@ -6880,7 +6904,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
     renderActiveTabOnly = _ref$renderActiveTabO === void 0 ? false : _ref$renderActiveTabO,
     selectedTabKey = _ref.selectedTabKey,
     tabs = _ref.tabs,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$f);
   var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   /**
    * List of loaded tabs, tabs will be loaded when navigated to.
@@ -6948,6 +6972,8 @@ var BottomNavigation = function BottomNavigation(_ref) {
   }))));
 };
 
+var BottomSheetContext = /*#__PURE__*/React.createContext({});
+
 var StyledDivider = index$a(reactNative.View)(function (_ref) {
   var themeMarginHorizontal = _ref.themeMarginHorizontal,
     themeMarginVertical = _ref.themeMarginVertical,
@@ -6965,13 +6991,13 @@ var StyledDivider = index$a(reactNative.View)(function (_ref) {
   }, horizontalMargin), verticalMargin);
 });
 
-var _excluded$d = ["marginHorizontal", "marginVertical", "style", "testID"];
+var _excluded$e = ["marginHorizontal", "marginVertical", "style", "testID"];
 var Divider = function Divider(_ref) {
   var marginHorizontal = _ref.marginHorizontal,
     marginVertical = _ref.marginVertical,
     style = _ref.style,
     testID = _ref.testID,
-    nativeProps = _objectWithoutProperties(_ref, _excluded$d);
+    nativeProps = _objectWithoutProperties(_ref, _excluded$e);
   return /*#__PURE__*/React__default["default"].createElement(StyledDivider, _extends$1({}, nativeProps, {
     themeMarginHorizontal: marginHorizontal,
     themeMarginVertical: marginVertical,
@@ -7101,7 +7127,7 @@ var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
   }, themeStyling());
 });
 
-var _excluded$c = ["count", "size", "testID", "themeVariant"];
+var _excluded$d = ["count", "size", "testID", "themeVariant"];
 var AnimatedLoadingIndicatorWrapper = reactNative.Animated.createAnimatedComponent(StyledLoadingIndicatorWrapper);
 var AnimatedLoadingDot = reactNative.Animated.createAnimatedComponent(StyledLoadingDot);
 var renderDotComponent = function renderDotComponent(_ref) {
@@ -7133,7 +7159,7 @@ var LoadingIndicator = function LoadingIndicator(_ref2) {
     size = _ref2$size === void 0 ? 12 : _ref2$size,
     testID = _ref2.testID,
     themeVariant = _ref2.themeVariant,
-    nativeProps = _objectWithoutProperties(_ref2, _excluded$c);
+    nativeProps = _objectWithoutProperties(_ref2, _excluded$d);
   var progressAnimation = React.useRef(new reactNative.Animated.Value(0));
   React.useEffect(function () {
     var animation = reactNative.Animated.loop(reactNative.Animated.timing(progressAnimation.current, {
@@ -7529,6 +7555,36 @@ var Header = function Header(_ref) {
   })) : null), showDivider ? /*#__PURE__*/React__default["default"].createElement(Divider, null) : null);
 };
 
+var _excluded$c = ["scrollEventThrottle"];
+var BottomSheetScrollView = function BottomSheetScrollView(_ref) {
+  var _ref$scrollEventThrot = _ref.scrollEventThrottle,
+    scrollEventThrottle = _ref$scrollEventThrot === void 0 ? 100 : _ref$scrollEventThrot,
+    props = _objectWithoutProperties(_ref, _excluded$c);
+  var _useContext = React.useContext(BottomSheetContext),
+    setInternalShowDivider = _useContext.setInternalShowDivider;
+  var onScrollBeginDrag = React.useCallback(function (e) {
+    var _props$onScrollBeginD;
+    setInternalShowDivider(true);
+    props === null || props === void 0 ? void 0 : (_props$onScrollBeginD = props.onScrollBeginDrag) === null || _props$onScrollBeginD === void 0 ? void 0 : _props$onScrollBeginD.call(props, e);
+  }, []);
+  var onMomentumScrollBegin = React.useCallback(function (e) {
+    var _props$onMomentumScro;
+    setInternalShowDivider(true);
+    props === null || props === void 0 ? void 0 : (_props$onMomentumScro = props.onMomentumScrollEnd) === null || _props$onMomentumScro === void 0 ? void 0 : _props$onMomentumScro.call(props, e);
+  }, []);
+  var onMomentumScrollEnd = React.useCallback(function (e) {
+    var _props$onMomentumScro2;
+    setInternalShowDivider(false);
+    props === null || props === void 0 ? void 0 : (_props$onMomentumScro2 = props.onMomentumScrollEnd) === null || _props$onMomentumScro2 === void 0 ? void 0 : _props$onMomentumScro2.call(props, e);
+  }, []);
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.ScrollView, _extends$1({}, props, {
+    onScrollBeginDrag: onScrollBeginDrag,
+    onMomentumScrollBegin: onMomentumScrollBegin,
+    onMomentumScrollEnd: onMomentumScrollEnd,
+    scrollEventThrottle: scrollEventThrottle
+  }));
+};
+
 var BottomSheet = function BottomSheet(_ref) {
   var open = _ref.open,
     header = _ref.header,
@@ -7543,7 +7599,7 @@ var BottomSheet = function BottomSheet(_ref) {
     _ref$hasBackdrop = _ref.hasBackdrop,
     hasBackdrop = _ref$hasBackdrop === void 0 ? true : _ref$hasBackdrop,
     _ref$showDivider = _ref.showDivider,
-    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
+    showDivider = _ref$showDivider === void 0 ? false : _ref$showDivider,
     style = _ref.style,
     testID = _ref.testID,
     _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
@@ -7556,6 +7612,10 @@ var BottomSheet = function BottomSheet(_ref) {
     visible = _useState2[0],
     setVisibility = _useState2[1];
   var animatedValue = React.useRef(new reactNative.Animated.Value(open ? 0 : 1));
+  var _useState3 = React.useState(showDivider),
+    _useState4 = _slicedToArray(_useState3, 2),
+    internalShowDivider = _useState4[0],
+    setInternalShowDivider = _useState4[1];
   React.useEffect(function () {
     // Show the modal before the open animation start
     if (open && !visible) {
@@ -7596,6 +7656,11 @@ var BottomSheet = function BottomSheet(_ref) {
     inputRange: [0, 1],
     outputRange: [0, 0.48]
   }) : 0;
+  var BottomSheetContextValue = React.useMemo(function () {
+    return {
+      setInternalShowDivider: setInternalShowDivider
+    };
+  }, [setInternalShowDivider]);
   return /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -7621,13 +7686,18 @@ var BottomSheet = function BottomSheet(_ref) {
     }]
   }, header !== undefined ? /*#__PURE__*/React__default["default"].createElement(Header, {
     content: header,
-    showDivider: showDivider,
+    showDivider: internalShowDivider,
     onRequestClose: onRequestClose,
     showCloseButton: showCloseButton
-  }) : null, children, footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
+  }) : null, /*#__PURE__*/React__default["default"].createElement(BottomSheetContext.Provider, {
+    value: BottomSheetContextValue
+  }, children), footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
     showDivider: showDivider
   }, footer) : null))));
 };
+var BottomSheet$1 = Object.assign(BottomSheet, {
+  ScrollView: BottomSheetScrollView
+});
 
 var colors = {
   backgroundColor: {
@@ -10710,7 +10780,7 @@ var getVariant$1 = function getVariant(_ref) {
 // Fix issue: Placeholder is not shown on iOS when multiline is true
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE = ' ';
-var TextInput = function TextInput(_ref2) {
+var TextInput = function TextInput(_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
     prefix = _ref2.prefix,
@@ -10750,6 +10820,35 @@ var TextInput = function TextInput(_ref2) {
   });
   var shouldShowMaxLength = maxLength !== undefined;
   var theme = useTheme();
+  var innerTextInput = React__default["default"].useRef();
+  React__default["default"].useImperativeHandle(ref, function () {
+    return {
+      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+      getNativeTextInputRef: function getNativeTextInputRef() {
+        return innerTextInput.current;
+      },
+      focus: function focus() {
+        var _innerTextInput$curre;
+        (_innerTextInput$curre = innerTextInput.current) === null || _innerTextInput$curre === void 0 ? void 0 : _innerTextInput$curre.focus();
+      },
+      clear: function clear() {
+        var _innerTextInput$curre2;
+        return (_innerTextInput$curre2 = innerTextInput.current) === null || _innerTextInput$curre2 === void 0 ? void 0 : _innerTextInput$curre2.clear();
+      },
+      setNativeProps: function setNativeProps(args) {
+        var _innerTextInput$curre3;
+        return (_innerTextInput$curre3 = innerTextInput.current) === null || _innerTextInput$curre3 === void 0 ? void 0 : _innerTextInput$curre3.setNativeProps(args);
+      },
+      isFocused: function isFocused() {
+        var _innerTextInput$curre4;
+        return ((_innerTextInput$curre4 = innerTextInput.current) === null || _innerTextInput$curre4 === void 0 ? void 0 : _innerTextInput$curre4.isFocused()) || false;
+      },
+      blur: function blur() {
+        var _innerTextInput$curre5;
+        return (_innerTextInput$curre5 = innerTextInput.current) === null || _innerTextInput$curre5 === void 0 ? void 0 : _innerTextInput$curre5.blur();
+      }
+    };
+  }, [innerTextInput]);
   var _useMemo = React.useMemo(function () {
       if (!textStyle) {
         return {};
@@ -10829,7 +10928,11 @@ var TextInput = function TextInput(_ref2) {
     testID: "input-label",
     fontSize: "medium",
     themeVariant: variant
-  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, nativeInputProps)), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+  }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    ref: function ref(reference) {
+      innerTextInput.current = reference;
+    }
+  }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     intent: variant === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
@@ -10847,6 +10950,7 @@ var TextInput = function TextInput(_ref2) {
     fontSize: "small"
   }, displayText.length, "/", maxLength)), !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText)));
 };
+var TextInput$1 = /*#__PURE__*/React__default["default"].forwardRef(TextInput);
 
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
@@ -10878,7 +10982,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -10946,7 +11050,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -10957,7 +11061,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -13012,7 +13116,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13027,7 +13131,7 @@ function MultiSelect(_ref) {
     renderInputValue: renderSelectedValue !== undefined ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
-  }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -13060,7 +13164,7 @@ function MultiSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13188,7 +13292,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13203,7 +13307,7 @@ var SingleSelect = function SingleSelect(_ref) {
     renderInputValue: renderSelectedValue !== undefined ? function (props) {
       return renderSelectedValue(value, props);
     } : undefined
-  }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  }))))), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -13220,7 +13324,7 @@ var SingleSelect = function SingleSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13961,7 +14065,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14029,7 +14133,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14040,7 +14144,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet, {
+  })), /*#__PURE__*/React__default["default"].createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -14429,10 +14533,12 @@ var ToolbarItem = function ToolbarItem(_ref) {
     _ref$intent = _ref.intent,
     intent = _ref$intent === void 0 ? 'primary' : _ref$intent,
     _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled;
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    style = _ref.style;
   return /*#__PURE__*/React__default["default"].createElement(ToolbarItemWrapper, {
     onPress: onPress,
-    disabled: disabled
+    disabled: disabled,
+    style: style
   }, icon ? /*#__PURE__*/React__default["default"].createElement(Icon, {
     icon: icon,
     size: label ? 'medium' : 'large',
@@ -14441,7 +14547,8 @@ var ToolbarItem = function ToolbarItem(_ref) {
   }) : null, label ? /*#__PURE__*/React__default["default"].createElement(Typography.Text, {
     fontSize: icon ? 'small' : 'large',
     fontWeight: "semi-bold",
-    intent: disabled ? 'subdued' : intent
+    intent: disabled ? 'subdued' : intent,
+    maxFontSizeMultiplier: 2
   }, label) : null);
 };
 
@@ -14450,6 +14557,9 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
     align = _ref$align === void 0 ? 'right' : _ref$align,
     _ref$items = _ref.items,
     items = _ref$items === void 0 ? [] : _ref$items;
+  // set maxWidth prevents overflow of items
+  // issue: https://github.com/Thinkei/hero-design/issues/1619
+  var maxWidth = items.length > 0 ? "".concat(100 / items.length, "%") : undefined;
   return /*#__PURE__*/React__default["default"].createElement(ToolbarGroupWrapper, {
     align: align
   }, items.map(function (_ref2) {
@@ -14464,7 +14574,10 @@ var ToolbarGroup = function ToolbarGroup(_ref) {
       icon: icon,
       intent: intent,
       onPress: onPress,
-      disabled: disabled
+      disabled: disabled,
+      style: {
+        maxWidth: maxWidth
+      }
     });
   }));
 };
@@ -30869,7 +30982,7 @@ exports.Attachment = Attachment;
 exports.Avatar = index$9;
 exports.Badge = Badge$1;
 exports.BottomNavigation = BottomNavigation;
-exports.BottomSheet = BottomSheet;
+exports.BottomSheet = BottomSheet$1;
 exports.Box = Box;
 exports.Button = CompoundButton;
 exports.Calendar = Calendar;
@@ -30898,7 +31011,7 @@ exports.Swipeable = index$5;
 exports.Switch = index$3;
 exports.Tabs = index$2;
 exports.Tag = Tag;
-exports.TextInput = TextInput;
+exports.TextInput = TextInput$1;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.TimePicker = TimePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.2.1",
+  "version": "8.2.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.2.1",
+    "@hero-design/colors": "8.2.3",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.2.1",
+    "@hero-design/eslint-plugin": "8.2.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.2.1",
+    "eslint-config-hd": "8.2.3",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.2.1",
+    "prettier-config-hd": "8.2.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/BottomSheet/BottomSheetContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export type BottomSheetContextType = {
+  setInternalShowDivider: (value: boolean) => void;
+};
+
+const BottomSheetContext = createContext<BottomSheetContextType>(
+  {} as BottomSheetContextType
+);
+
+export default BottomSheetContext;

package/src/components/BottomSheet/ScrollView.tsx

@@ -0,0 +1,57 @@
+import React, { useContext, useCallback } from 'react';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  ScrollView,
+  ScrollViewProps,
+} from 'react-native';
+import BottomSheetContext, {
+  BottomSheetContextType,
+} from './BottomSheetContext';
+
+const BottomSheetScrollView = ({
+  scrollEventThrottle = 100,
+  ...props
+}: ScrollViewProps): JSX.Element => {
+  const { setInternalShowDivider } =
+    useContext<BottomSheetContextType>(BottomSheetContext);
+
+  const onScrollBeginDrag = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(true);
+
+      props?.onScrollBeginDrag?.(e);
+    },
+    []
+  );
+
+  const onMomentumScrollBegin = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(true);
+
+      props?.onMomentumScrollEnd?.(e);
+    },
+    []
+  );
+
+  const onMomentumScrollEnd = useCallback(
+    (e: NativeSyntheticEvent<NativeScrollEvent>) => {
+      setInternalShowDivider(false);
+
+      props?.onMomentumScrollEnd?.(e);
+    },
+    []
+  );
+
+  return (
+    <ScrollView
+      {...props}
+      onScrollBeginDrag={onScrollBeginDrag}
+      onMomentumScrollBegin={onMomentumScrollBegin}
+      onMomentumScrollEnd={onMomentumScrollEnd}
+      scrollEventThrottle={scrollEventThrottle}
+    />
+  );
+};
+
+export default BottomSheetScrollView;