@hero-design/rn 8.35.0 → 8.35.1

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 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 '/root/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 28.5s
+created lib/index.js, es/index.js in 29.6s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -13566,6 +13566,15 @@ var StyledContainer$2 = index$c(View)({
   alignItems: 'flex-end',
   justifyContent: 'flex-end'
 });
+var StyledContainerInModal = index$c(View)({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end'
+});
 var StyledActionGroupContainer = index$c(Animated.View)({
   alignItems: 'flex-end',
   justifyContent: 'flex-end',
@@ -13587,6 +13596,7 @@ var StyledBackdrop = index$c(Animated.View)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
+    opacity: 0.25,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13642,26 +13652,42 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       useNativeDriver: Platform.OS !== 'web'
     })]).start();
   }, [active]);
-  var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.25]
-  });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
+  var interpolatedFABOpacityAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0]
+  });
   return /*#__PURE__*/React.createElement(StyledContainer$2, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React.createElement(StyledBackdrop, {
-    pointerEvents: active ? 'auto' : 'box-none',
-    testID: "back-drop",
+  }, /*#__PURE__*/React.createElement(Animated.View, {
     style: {
-      opacity: interpolatedBackdropOpacityAnimation
+      opacity: interpolatedFABOpacityAnimation
     }
+  }, /*#__PURE__*/React.createElement(StyledFAB, {
+    key: "fab",
+    testID: "fab",
+    icon: fabIcon,
+    onPress: onPress,
+    animated: true,
+    active: active,
+    title: fabTitle,
+    ref: fabRef
+  })), /*#__PURE__*/React.createElement(Modal$1, {
+    visible: active,
+    animationType: "fade",
+    transparent: true,
+    statusBarTranslucent: true
+  }, /*#__PURE__*/React.createElement(StyledContainerInModal, {
+    testID: testID,
+    style: [style]
+  }, /*#__PURE__*/React.createElement(StyledBackdrop, {
+    testID: "back-drop"
   }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
-    pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
       opacity: interpolatedActionGroupOpacityAnimation
@@ -13687,14 +13713,14 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       active: active
     }));
   }))), /*#__PURE__*/React.createElement(StyledFAB, {
-    testID: "fab",
+    key: "fab-in-portal",
+    testID: "fab-in-portal",
     icon: fabIcon,
     onPress: onPress,
     animated: true,
     active: active,
-    title: fabTitle,
-    ref: fabRef
-  }));
+    title: fabTitle
+  }))));
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 

package/lib/index.js

@@ -13597,6 +13597,15 @@ var StyledContainer$2 = index$c(reactNative.View)({
   alignItems: 'flex-end',
   justifyContent: 'flex-end'
 });
+var StyledContainerInModal = index$c(reactNative.View)({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end'
+});
 var StyledActionGroupContainer = index$c(reactNative.Animated.View)({
   alignItems: 'flex-end',
   justifyContent: 'flex-end',
@@ -13618,6 +13627,7 @@ var StyledBackdrop = index$c(reactNative.Animated.View)(function (_ref2) {
     right: 0,
     top: 0,
     bottom: 0,
+    opacity: 0.25,
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
@@ -13673,26 +13683,42 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       useNativeDriver: reactNative.Platform.OS !== 'web'
     })]).start();
   }, [active]);
-  var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, 0.25]
-  });
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 1]
   });
+  var interpolatedFABOpacityAnimation = tranlateXAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0]
+  });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$2, {
     testID: testID,
     pointerEvents: "box-none",
     style: style
-  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
-    pointerEvents: active ? 'auto' : 'box-none',
-    testID: "back-drop",
+  }, /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
     style: {
-      opacity: interpolatedBackdropOpacityAnimation
+      opacity: interpolatedFABOpacityAnimation
     }
+  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+    key: "fab",
+    testID: "fab",
+    icon: fabIcon,
+    onPress: onPress,
+    animated: true,
+    active: active,
+    title: fabTitle,
+    ref: fabRef
+  })), /*#__PURE__*/React__default["default"].createElement(reactNative.Modal, {
+    visible: active,
+    animationType: "fade",
+    transparent: true,
+    statusBarTranslucent: true
+  }, /*#__PURE__*/React__default["default"].createElement(StyledContainerInModal, {
+    testID: testID,
+    style: [style]
+  }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
+    testID: "back-drop"
   }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
-    pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
       opacity: interpolatedActionGroupOpacityAnimation
@@ -13718,14 +13744,14 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       active: active
     }));
   }))), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
-    testID: "fab",
+    key: "fab-in-portal",
+    testID: "fab-in-portal",
     icon: fabIcon,
     onPress: onPress,
     animated: true,
     active: active,
-    title: fabTitle,
-    ref: fabRef
-  }));
+    title: fabTitle
+  }))));
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.35.0",
+  "version": "8.35.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.35.0",
+    "@hero-design/colors": "8.35.1",
     "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.35.0",
+    "@hero-design/react-native-month-year-picker": "^8.35.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -48,8 +48,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.35.0",
-    "@hero-design/react-native-month-year-picker": "^8.35.0",
+    "@hero-design/eslint-plugin": "8.35.1",
+    "@hero-design/react-native-month-year-picker": "^8.35.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,10 +65,10 @@
     "@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.35.0",
+    "eslint-config-hd": "8.35.1",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.35.0",
+    "prettier-config-hd": "8.35.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -16,6 +16,16 @@ const StyledContainer = styled(View)<ViewProps>({
   justifyContent: 'flex-end',
 });
 
+const StyledContainerInModal = styled(View)<ViewProps>({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  alignItems: 'flex-end',
+  justifyContent: 'flex-end',
+});
+
 const StyledActionGroupContainer = styled(Animated.View)<
   ComponentProps<typeof Animated.View>
 >({
@@ -38,6 +48,7 @@ const StyledBackdrop = styled(Animated.View)<
   right: 0,
   top: 0,
   bottom: 0,
+  opacity: 0.25,
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
@@ -52,6 +63,7 @@ export {
   StyledHeaderText,
   StyledBackdrop,
   StyledContainer,
+  StyledContainerInModal,
   StyledActionGroupContainer,
   StyledFAB,
 };