@hero-design/rn 8.91.7 → 8.91.8

package/.turbo/turbo-build.log

@@ -10,4 +10,4 @@
                                      ~~~~~~~~~~~~~~~~~~~
 
 (!) [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.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 51.9s
+created lib/index.js, es/index.js in 52.7s

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @hero-design/rn
 
+## 8.91.8
+
+### Patch Changes
+
+- [#3725](https://github.com/Thinkei/hero-design/pull/3725) [`a3106d46950f6e5008ff8a75608a738d64e1f028`](https://github.com/Thinkei/hero-design/commit/a3106d46950f6e5008ff8a75608a738d64e1f028) Thanks [@quang-dx](https://github.com/quang-dx)! - [Icon] Add new outlined icons: desktop-computer-outlined, mobile-phone-1-outlined, tablet-outlined
+
+- [#3722](https://github.com/Thinkei/hero-design/pull/3722) [`655027fd13f8d2008db326a81aafc946cc558a1d`](https://github.com/Thinkei/hero-design/commit/655027fd13f8d2008db326a81aafc946cc558a1d) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [FAB.ActionGroup] Update styling:
+
+  - Resolve unexpected children margin change when passing margin
+  - Update backdrop to cover full screen
+
 ## 8.91.7
 
 ### Patch Changes

package/es/index.js

@@ -9776,7 +9776,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$2 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$a = index$a(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -9813,7 +9813,7 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$a(AnimatedPressable$2)(function (_ref4) {
+var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref4) {
   var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -15336,7 +15336,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 var StyledContainer$5 = index$a(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -15364,7 +15364,7 @@ var StyledDragableContainer = index$a(View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
+var StyledBackdrop$1 = index$a(AnimatedPressable)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -16554,8 +16554,17 @@ var StyledFAB$1 = index$a(FAB$1)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
+var StyledBackdropPressable = index$a(Pressable)(function () {
+  return {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'transparent'
+  };
+});
+var StyledBackdrop = index$a(Box)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16641,19 +16650,19 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
-  }, /*#__PURE__*/React__default.createElement(StyledBackdrop, {
+  }, /*#__PURE__*/React__default.createElement(StyledBackdropPressable, {
     testID: "back-drop",
     onPress: onBackdropPress
-  }), /*#__PURE__*/React__default.createElement(StyledActionGroupContainer, {
+  }, active && /*#__PURE__*/React__default.createElement(Portal$1, null, /*#__PURE__*/React__default.createElement(StyledBackdrop, null))), /*#__PURE__*/React__default.createElement(StyledActionGroupContainer, {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {
       opacity: actionGroupOpacity
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
-    style: [style, {
+    style: {
       paddingBottom: 0
-    }]
+    }
   }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
     return /*#__PURE__*/React__default.createElement(ActionItem, _extends$1({
       key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)

package/lib/index.js

@@ -9804,7 +9804,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$2 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
 var StyledWrapper$a = index$a(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -9841,7 +9841,7 @@ var StyledBottomSheet = index$a(AnimatedSafeAreaView)(function (_ref3) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$a(AnimatedPressable$2)(function (_ref4) {
+var StyledBackdrop$2 = index$a(AnimatedPressable$1)(function (_ref4) {
   var theme = _ref4.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -15364,7 +15364,7 @@ var DatePicker = function DatePicker(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var StyledContainer$5 = index$a(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -15392,7 +15392,7 @@ var StyledDragableContainer = index$a(reactNative.View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$a(AnimatedPressable$1)(function (_ref3) {
+var StyledBackdrop$1 = index$a(AnimatedPressable)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -16582,8 +16582,17 @@ var StyledFAB$1 = index$a(FAB$1)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
-var StyledBackdrop = index$a(AnimatedPressable)(function (_ref2) {
+var StyledBackdropPressable = index$a(reactNative.Pressable)(function () {
+  return {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    top: 0,
+    bottom: 0,
+    backgroundColor: 'transparent'
+  };
+});
+var StyledBackdrop = index$a(Box)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -16669,19 +16678,19 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledContainerInModal, {
     testID: testID,
     style: [style]
-  }, /*#__PURE__*/React__namespace.default.createElement(StyledBackdrop, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledBackdropPressable, {
     testID: "back-drop",
     onPress: onBackdropPress
-  }), /*#__PURE__*/React__namespace.default.createElement(StyledActionGroupContainer, {
+  }, active && /*#__PURE__*/React__namespace.default.createElement(Portal$1, null, /*#__PURE__*/React__namespace.default.createElement(StyledBackdrop, null))), /*#__PURE__*/React__namespace.default.createElement(StyledActionGroupContainer, {
     testID: "action-group",
     pointerEvents: "box-none",
     style: {
       opacity: actionGroupOpacity
     }
   }, /*#__PURE__*/React__namespace.default.createElement(Box, {
-    style: [style, {
+    style: {
       paddingBottom: 0
-    }]
+    }
   }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
     return /*#__PURE__*/React__namespace.default.createElement(ActionItem, _extends$1({
       key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)

package/package.json

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

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

@@ -3,6 +3,7 @@ import styled from '@emotion/native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import FAB from '../FAB';
+import Box from '../../Box';
 
 const StyledContainer = styled(View)<ViewProps>({
   position: 'absolute',
@@ -38,8 +39,16 @@ const StyledFAB = styled(FAB)(({ theme }) => ({
   alignSelf: 'flex-end',
 }));
 
-const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
-const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
+const StyledBackdropPressable = styled(Pressable)(() => ({
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+  backgroundColor: 'transparent',
+}));
+
+const StyledBackdrop = styled(Box)(({ theme }) => ({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -52,6 +61,7 @@ const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
 export {
   StyledActionGroupContainer,
   StyledBackdrop,
+  StyledBackdropPressable,
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -408,15 +408,17 @@ exports[`ActionGroup has active true 1`] = `
           onResponderTerminationRequest={[Function]}
           onStartShouldSetResponder={[Function]}
           style={
-            {
-              "backgroundColor": "#000000",
-              "bottom": 0,
-              "left": 0,
-              "opacity": 0.4,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
+            [
+              {
+                "backgroundColor": "transparent",
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
           }
           testID="back-drop"
         />
@@ -437,12 +439,9 @@ exports[`ActionGroup has active true 1`] = `
             style={
               [
                 {},
-                [
-                  undefined,
-                  {
-                    "paddingBottom": 0,
-                  },
-                ],
+                {
+                  "paddingBottom": 0,
+                },
               ]
             }
           >
@@ -1171,6 +1170,25 @@ exports[`ActionGroup has active true 1`] = `
       </View>
     </Modal>
   </View>
+  <View
+    style={
+      [
+        {},
+        [
+          {
+            "backgroundColor": "#000000",
+            "bottom": 0,
+            "left": 0,
+            "opacity": 0.4,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ],
+      ]
+    }
+  />
   <View
     pointerEvents="box-none"
     position="bottom"

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

@@ -7,11 +7,12 @@ import ActionItem from './ActionItem';
 import {
   StyledActionGroupContainer,
   StyledBackdrop,
+  StyledBackdropPressable,
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,
 } from './StyledActionGroup';
-
+import Portal from '../../Portal';
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
 import { useDeprecation } from '../../../utils/hooks';
@@ -151,7 +152,17 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
           supportedOrientations={supportedOrientations}
         >
           <StyledContainerInModal testID={testID} style={[style]}>
-            <StyledBackdrop testID="back-drop" onPress={onBackdropPress} />
+            <StyledBackdropPressable
+              testID="back-drop"
+              onPress={onBackdropPress}
+            >
+              {active && (
+                <Portal>
+                  <StyledBackdrop />
+                </Portal>
+              )}
+            </StyledBackdropPressable>
+
             <StyledActionGroupContainer
               testID="action-group"
               pointerEvents="box-none"
@@ -159,7 +170,7 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
                 opacity: actionGroupOpacity,
               }}
             >
-              <Box style={[style, { paddingBottom: 0 }]}>
+              <Box style={{ paddingBottom: 0 }}>
                 {items?.map((itemProp, index) => (
                   <ActionItem
                     key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}