@hero-design/rn 8.103.1 → 8.103.2

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3203) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3349) 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...
@@ -20,4 +20,4 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
 /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 20.7s
+created ., . in 22.5s

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.103.2
+
+### Patch Changes
+
+- [#4050](https://github.com/Thinkei/hero-design/pull/4050) [`44c253319e985a85bf75e00effc140733dd73ee9`](https://github.com/Thinkei/hero-design/commit/44c253319e985a85bf75e00effc140733dd73ee9) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Revert BottomSheet Fix overlapping with dynamic island in iOS
+
 ## 8.103.1
 
 ### Patch Changes

package/es/index.js

@@ -3,7 +3,7 @@ import { StyleSheet as StyleSheet$1, Platform, Dimensions, Animated, View, UIMan
 import * as React from 'react';
 import React__default, { useMemo, useEffect, useCallback, useRef, useLayoutEffect, useState, createContext, forwardRef, useContext, memo, useReducer, useImperativeHandle, isValidElement } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
-import { useSafeAreaInsets, SafeAreaView as SafeAreaView$1 } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { MonthYearPickerViewIOS, MonthYearPickerDialogueAndroid } from '@hero-design/react-native-month-year-picker';
 import Svg, { G, ForeignObject, Line as Line$1, Path as Path$1, Rect, Mask, Circle as Circle$1, Defs, ClipPath } from 'react-native-svg';
 import DateTimePicker from '@react-native-community/datetimepicker';
@@ -5676,8 +5676,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     footerHorizontalPadding: theme.space.smallMedium,
     floatingContentMargin: theme.space.medium,
     floatingInnerPadding: theme.space.small,
-    floatingHeaderIconPadding: theme.space.small,
-    contentPaddingBottom: theme.space.large
+    floatingHeaderIconPadding: theme.space.small
   };
   var radii = {
     "default": theme.radii.xlarge,
@@ -8575,7 +8574,7 @@ var StyledBody$1 = index$b(Typography.Body)(function (_ref5) {
     color: theme.__hd__.alert.colors.texts[themeIntent]
   };
 });
-var ContentContainer$2 = index$b(View)(function (_ref6) {
+var ContentContainer$1 = index$b(View)(function (_ref6) {
   var theme = _ref6.theme,
     showDivider = _ref6.showDivider;
   return {
@@ -8637,7 +8636,7 @@ var Alert = function Alert(_ref2) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default.createElement(ContentContainer$2, {
+  }, /*#__PURE__*/React__default.createElement(ContentContainer$1, {
     showDivider: !!onClose
   }, icon !== null ? /*#__PURE__*/React__default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
@@ -10012,6 +10011,38 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
 var BottomSheetContext = /*#__PURE__*/createContext({});
 
+var StyledDivider = index$b(View)(function (_ref) {
+  var themeMarginHorizontal = _ref.themeMarginHorizontal,
+    themeMarginVertical = _ref.themeMarginVertical,
+    theme = _ref.theme;
+  var horizontalMargin = themeMarginHorizontal !== undefined ? {
+    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
+  } : {};
+  var verticalMargin = themeMarginVertical !== undefined ? {
+    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
+  } : {};
+  return _objectSpread2(_objectSpread2({
+    maxWidth: '100%',
+    borderBottomColor: theme.__hd__.divider.colors["default"],
+    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
+  }, horizontalMargin), verticalMargin);
+});
+
+var _excluded$z = ["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$z);
+  return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }));
+};
+
 var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$a = index$b(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
@@ -10039,15 +10070,14 @@ var StyledFloatingBottomSheet = index$b(Animated.View)(function (_ref2) {
     padding: theme.__hd__.bottomSheet.space.floatingInnerPadding
   };
 });
-var StyledBottomSheet = index$b(Animated.View)(function (_ref3) {
+var StyledBottomSheet = index$b(AnimatedSafeAreaView)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     borderTopLeftRadius: theme.__hd__.bottomSheet.radii["default"],
     borderTopRightRadius: theme.__hd__.bottomSheet.radii["default"],
     backgroundColor: theme.__hd__.bottomSheet.colors.background,
     width: '100%',
-    maxHeight: '100%',
-    paddingBottom: theme.__hd__.bottomSheet.space.contentPaddingBottom
+    maxHeight: '94%'
   };
 });
 var StyledBackdrop$2 = index$b(AnimatedPressable$1)(function (_ref4) {
@@ -10098,54 +10128,6 @@ var StyledFloatingHeaderWrapper = index$b(TouchableOpacity)(function (_ref8) {
   };
 });
 
-var ContentContainer$1 = function ContentContainer(_ref) {
-  var children = _ref.children,
-    variant = _ref.variant,
-    style = _ref.style;
-  return variant === 'fixed' ? /*#__PURE__*/React__default.createElement(SafeAreaView$1, {
-    edges: ['left', 'right', 'top'],
-    style: {
-      maxHeight: '94%'
-    }
-  }, /*#__PURE__*/React__default.createElement(StyledBottomSheet, {
-    style: style
-  }, children)) : /*#__PURE__*/React__default.createElement(StyledFloatingWrapper, null, /*#__PURE__*/React__default.createElement(StyledFloatingBottomSheet, {
-    style: style
-  }, children));
-};
-
-var StyledDivider = index$b(View)(function (_ref) {
-  var themeMarginHorizontal = _ref.themeMarginHorizontal,
-    themeMarginVertical = _ref.themeMarginVertical,
-    theme = _ref.theme;
-  var horizontalMargin = themeMarginHorizontal !== undefined ? {
-    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
-  } : {};
-  var verticalMargin = themeMarginVertical !== undefined ? {
-    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
-  } : {};
-  return _objectSpread2(_objectSpread2({
-    maxWidth: '100%',
-    borderBottomColor: theme.__hd__.divider.colors["default"],
-    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
-  }, horizontalMargin), verticalMargin);
-});
-
-var _excluded$z = ["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$z);
-  return /*#__PURE__*/React__default.createElement(StyledDivider, _extends$1({}, nativeProps, {
-    themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical,
-    style: style,
-    testID: testID
-  }));
-};
-
 var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
     showDivider = _ref.showDivider;
@@ -10972,6 +10954,8 @@ var BottomSheet = function BottomSheet(_ref) {
       setInternalShowDivider: setInternalShowDivider
     };
   }, [setInternalShowDivider]);
+  var BottomSheetWrapperComponent = variant === 'fixed' ? React__default.Fragment : StyledFloatingWrapper;
+  var BottomSheetComponent = variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
   return /*#__PURE__*/React__default.createElement(Modal$1, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -10988,8 +10972,7 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React__default.createElement(ContentContainer$1, {
-    variant: variant,
+  }), /*#__PURE__*/React__default.createElement(BottomSheetWrapperComponent, null, /*#__PURE__*/React__default.createElement(BottomSheetComponent, {
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -11007,7 +10990,7 @@ var BottomSheet = function BottomSheet(_ref) {
     value: BottomSheetContextValue
   }, children), footer ? /*#__PURE__*/React__default.createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null))));
+  }, footer) : null)))));
 };
 var BottomSheet$1 = Object.assign(BottomSheet, {
   ScrollView: BottomSheetScrollView

package/lib/index.js

@@ -5705,8 +5705,7 @@ var getBottomSheetTheme = function getBottomSheetTheme(theme) {
     footerHorizontalPadding: theme.space.smallMedium,
     floatingContentMargin: theme.space.medium,
     floatingInnerPadding: theme.space.small,
-    floatingHeaderIconPadding: theme.space.small,
-    contentPaddingBottom: theme.space.large
+    floatingHeaderIconPadding: theme.space.small
   };
   var radii = {
     "default": theme.radii.xlarge,
@@ -8604,7 +8603,7 @@ var StyledBody$1 = index$b(Typography.Body)(function (_ref5) {
     color: theme.__hd__.alert.colors.texts[themeIntent]
   };
 });
-var ContentContainer$2 = index$b(reactNative.View)(function (_ref6) {
+var ContentContainer$1 = index$b(reactNative.View)(function (_ref6) {
   var theme = _ref6.theme,
     showDivider = _ref6.showDivider;
   return {
@@ -8666,7 +8665,7 @@ var Alert = function Alert(_ref2) {
     themeIntent: intent,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__namespace.default.createElement(ContentContainer$2, {
+  }, /*#__PURE__*/React__namespace.default.createElement(ContentContainer$1, {
     showDivider: !!onClose
   }, icon !== null ? /*#__PURE__*/React__namespace.default.createElement(AlertIcon, {
     icon: icon || getIntentIcon$1(intent),
@@ -10041,6 +10040,38 @@ var BottomNavigation = function BottomNavigation(_ref) {
 
 var BottomSheetContext = /*#__PURE__*/React.createContext({});
 
+var StyledDivider = index$b(reactNative.View)(function (_ref) {
+  var themeMarginHorizontal = _ref.themeMarginHorizontal,
+    themeMarginVertical = _ref.themeMarginVertical,
+    theme = _ref.theme;
+  var horizontalMargin = themeMarginHorizontal !== undefined ? {
+    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
+  } : {};
+  var verticalMargin = themeMarginVertical !== undefined ? {
+    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
+  } : {};
+  return _objectSpread2(_objectSpread2({
+    maxWidth: '100%',
+    borderBottomColor: theme.__hd__.divider.colors["default"],
+    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
+  }, horizontalMargin), verticalMargin);
+});
+
+var _excluded$z = ["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$z);
+  return /*#__PURE__*/React__namespace.default.createElement(StyledDivider, _extends$1({}, nativeProps, {
+    themeMarginHorizontal: marginHorizontal,
+    themeMarginVertical: marginVertical,
+    style: style,
+    testID: testID
+  }));
+};
+
 var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
 var StyledWrapper$a = index$b(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
@@ -10068,15 +10099,14 @@ var StyledFloatingBottomSheet = index$b(reactNative.Animated.View)(function (_re
     padding: theme.__hd__.bottomSheet.space.floatingInnerPadding
   };
 });
-var StyledBottomSheet = index$b(reactNative.Animated.View)(function (_ref3) {
+var StyledBottomSheet = index$b(AnimatedSafeAreaView)(function (_ref3) {
   var theme = _ref3.theme;
   return {
     borderTopLeftRadius: theme.__hd__.bottomSheet.radii["default"],
     borderTopRightRadius: theme.__hd__.bottomSheet.radii["default"],
     backgroundColor: theme.__hd__.bottomSheet.colors.background,
     width: '100%',
-    maxHeight: '100%',
-    paddingBottom: theme.__hd__.bottomSheet.space.contentPaddingBottom
+    maxHeight: '94%'
   };
 });
 var StyledBackdrop$2 = index$b(AnimatedPressable$1)(function (_ref4) {
@@ -10127,54 +10157,6 @@ var StyledFloatingHeaderWrapper = index$b(reactNative.TouchableOpacity)(function
   };
 });
 
-var ContentContainer$1 = function ContentContainer(_ref) {
-  var children = _ref.children,
-    variant = _ref.variant,
-    style = _ref.style;
-  return variant === 'fixed' ? /*#__PURE__*/React__namespace.default.createElement(reactNativeSafeAreaContext.SafeAreaView, {
-    edges: ['left', 'right', 'top'],
-    style: {
-      maxHeight: '94%'
-    }
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledBottomSheet, {
-    style: style
-  }, children)) : /*#__PURE__*/React__namespace.default.createElement(StyledFloatingWrapper, null, /*#__PURE__*/React__namespace.default.createElement(StyledFloatingBottomSheet, {
-    style: style
-  }, children));
-};
-
-var StyledDivider = index$b(reactNative.View)(function (_ref) {
-  var themeMarginHorizontal = _ref.themeMarginHorizontal,
-    themeMarginVertical = _ref.themeMarginVertical,
-    theme = _ref.theme;
-  var horizontalMargin = themeMarginHorizontal !== undefined ? {
-    marginHorizontal: theme.__hd__.divider.space[themeMarginHorizontal]
-  } : {};
-  var verticalMargin = themeMarginVertical !== undefined ? {
-    marginVertical: theme.__hd__.divider.space[themeMarginVertical]
-  } : {};
-  return _objectSpread2(_objectSpread2({
-    maxWidth: '100%',
-    borderBottomColor: theme.__hd__.divider.colors["default"],
-    borderBottomWidth: theme.__hd__.divider.borderWidths["default"]
-  }, horizontalMargin), verticalMargin);
-});
-
-var _excluded$z = ["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$z);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledDivider, _extends$1({}, nativeProps, {
-    themeMarginHorizontal: marginHorizontal,
-    themeMarginVertical: marginVertical,
-    style: style,
-    testID: testID
-  }));
-};
-
 var Footer$1 = function Footer(_ref) {
   var children = _ref.children,
     showDivider = _ref.showDivider;
@@ -11001,6 +10983,8 @@ var BottomSheet = function BottomSheet(_ref) {
       setInternalShowDivider: setInternalShowDivider
     };
   }, [setInternalShowDivider]);
+  var BottomSheetWrapperComponent = variant === 'fixed' ? React__namespace.default.Fragment : StyledFloatingWrapper;
+  var BottomSheetComponent = variant === 'fixed' ? StyledBottomSheet : StyledFloatingBottomSheet;
   return /*#__PURE__*/React__namespace.default.createElement(reactNative.Modal, {
     visible: visible,
     onRequestClose: onRequestClose,
@@ -11017,8 +11001,7 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React__namespace.default.createElement(ContentContainer$1, {
-    variant: variant,
+  }), /*#__PURE__*/React__namespace.default.createElement(BottomSheetWrapperComponent, null, /*#__PURE__*/React__namespace.default.createElement(BottomSheetComponent, {
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -11036,7 +11019,7 @@ var BottomSheet = function BottomSheet(_ref) {
     value: BottomSheetContextValue
   }, children), footer ? /*#__PURE__*/React__namespace.default.createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null))));
+  }, footer) : null)))));
 };
 var BottomSheet$1 = Object.assign(BottomSheet, {
   ScrollView: BottomSheetScrollView

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.103.1",
+  "version": "8.103.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -39,13 +39,14 @@ const StyledFloatingBottomSheet = styled(Animated.View)(({ theme }) => ({
   padding: theme.__hd__.bottomSheet.space.floatingInnerPadding,
 }));
 
-const StyledBottomSheet = styled(Animated.View)(({ theme }) => ({
+const StyledBottomSheet = styled(AnimatedSafeAreaView)<
+  ComponentProps<typeof AnimatedSafeAreaView>
+>(({ theme }) => ({
   borderTopLeftRadius: theme.__hd__.bottomSheet.radii.default,
   borderTopRightRadius: theme.__hd__.bottomSheet.radii.default,
   backgroundColor: theme.__hd__.bottomSheet.colors.background,
   width: '100%',
-  maxHeight: '100%',
-  paddingBottom: theme.__hd__.bottomSheet.space.contentPaddingBottom,
+  maxHeight: '94%',
 }));
 
 const StyledBackdrop = styled(AnimatedPressable)<