@hero-design/rn 8.35.0 → 8.36.0-alpha.0

package/.tool-versions

@@ -0,0 +1 @@
+yarn 1.22.18

package/.turbo/turbo-build.log

@@ -3,6 +3,6 @@ $ 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
+(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/Volumes/Data/Projects/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 35.5s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-build:types.log

@@ -0,0 +1 @@
+$ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/.turbo/turbo-lint.log

@@ -0,0 +1,172 @@
+$ eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/BottomSheet/ScrollView.tsx
+  25:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+  34:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+  43:5  warning  React Hook useCallback has missing dependencies: 'props' and 'setInternalShowDivider'. Either include them or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useCallback call and refer to those specific props inside useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/BottomSheet/index.tsx
+  123:32  warning  The ref value 'animatedValue.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'animatedValue.current' to a variable inside the effect, and use that variable in the cleanup function  react-hooks/exhaustive-deps
+  124:6   warning  React Hook useEffect has missing dependencies: 'onDismiss' and 'visible'. Either include them or remove the dependency array. If 'onDismiss' changes too often, find the parent component that defines it and wrap that definition in useCallback                          react-hooks/exhaustive-deps
+  137:6   warning  React Hook useEffect has a missing dependency: 'onAnimationEnd'. Either include it or remove the dependency array                                                                                                                                                          react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Button/LoadingIndicator/index.tsx
+  118:36  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/CardCarousel.tsx
+  109:7  warning  React Hook useCallback has missing dependencies: 'items.length' and 'viewPosition'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  125:8  warning  React Hook useCallback has a missing dependency: 'viewPosition'. Either include it or remove the dependency array                       react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/__tests__/CardCarousel.spec.tsx
+   52:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+   52:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+   98:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+   98:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  153:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  153:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  199:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  199:29  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Carousel/index.tsx
+  130:6  warning  React Hook useEffect has missing dependencies: 'scrollX' and 'width'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Collapse/index.tsx
+  63:6  warning  React Hook useEffect has a missing dependency: 'componentMounted'. Either include it or remove the dependency array                                                                                                                react-hooks/exhaustive-deps
+  73:6  warning  React Hook useCallback has a missing dependency: 'onLayout'. Either include it or remove the dependency array. If 'onLayout' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/DatePicker/DatePickerAndroid.tsx
+  56:25  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/DatePicker/DatePickerIOS.tsx
+  96:27  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Drawer/DragableDrawer/index.tsx
+   78:6  warning  React Hook useEffect has a missing dependency: 'pan'. Either include it or remove the dependency array                                                                                                                                                                                                react-hooks/exhaustive-deps
+   88:6  warning  React Hook useEffect has missing dependencies: 'initialHeightPercentage' and 'minimumHeightPercentage'. Either include them or remove the dependency array                                                                                                                                            react-hooks/exhaustive-deps
+  104:6  warning  React Hook useEffect has missing dependencies: 'pan' and 'snapPoints'. Either include them or remove the dependency array                                                                                                                                                                             react-hooks/exhaustive-deps
+  127:6  warning  React Hook useEffect has missing dependencies: 'height', 'minimumHeightPercentage', 'onCollapsed', 'onExpanded', and 'pan'. Either include them or remove the dependency array. If 'onExpanded' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Drawer/index.tsx
+  69:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/FAB/__tests__/index.spec.tsx
+  79:7  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  82:7  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+  85:7  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Icon/utils.ts
+  3:24  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Modal/index.tsx
+  102:6  warning  React Hook React.useEffect has missing dependencies: 'animationType', 'modalHandler', 'onShow', and 'visible'. Either include them or remove the dependency array. If 'onShow' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/PageControl/index.tsx
+  39:6  warning  React Hook React.useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/PinInput/index.tsx
+  146:8  warning  React Hook useEffect has missing dependencies: 'autoFocus' and 'focus'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/PortalHost.tsx
+  18:6  warning  React Hook useEffect has missing dependencies: 'deregisterHost' and 'registerHost'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/__tests__/PortalHost.spec.tsx
+  16:26  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/__tests__/PortalProvider.spec.tsx
+  10:26  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/index.tsx
+  27:6  warning  React Hook useLayoutEffect has missing dependencies: 'children', 'nameOrRandom', and 'removePortal'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  31:6  warning  React Hook useLayoutEffect has missing dependencies: 'addUpdatePortal' and 'nameOrRandom'. Either include them or remove the dependency array            react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Portal/usePortal.ts
+  17:6  warning  React Hook useCallback has missing dependencies: 'dispatch' and 'hostName'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  24:6  warning  React Hook useCallback has missing dependencies: 'dispatch' and 'hostName'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  33:6  warning  React Hook useCallback has missing dependencies: 'dispatch' and 'hostName'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+  41:6  warning  React Hook useCallback has missing dependencies: 'dispatch' and 'hostName'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/EditorToolbar.tsx
+  147:6  warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                            react-hooks/exhaustive-deps
+  208:5  warning  React Hook useMemo has missing dependencies: 'normalizeEventName' and 'toggleToolbarButton'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/MentionList.tsx
+  63:6  warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/RichTextEditor.tsx
+   50:13  warning  Unexpected any. Specify a different type                                                                                                                                                                                                                                                                          @typescript-eslint/no-explicit-any
+  145:6   warning  React Hook useMemo has an unnecessary dependency: 'isFocused'. Either exclude it or remove the dependency array                                                                                                                                                                                                   react-hooks/exhaustive-deps
+  171:6   warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                                                                                                                                                                                             react-hooks/exhaustive-deps
+  207:6   warning  React Hook useMemo has missing dependencies: 'autoFocus', 'placeholder', 'theme.__hd__.richTextEditor.colors.text', 'theme.__hd__.richTextEditor.fontSizes.editor', and 'value'. Either include them or remove the dependency array                                                                               react-hooks/exhaustive-deps
+  243:6   warning  React Hook useEffect has a missing dependency: 'normalizeEventName'. Either include it or remove the dependency array                                                                                                                                                                                             react-hooks/exhaustive-deps
+  245:61  warning  Unexpected any. Specify a different type                                                                                                                                                                                                                                                                          @typescript-eslint/no-explicit-any
+  305:5   warning  React Hook useCallback has missing dependencies: 'handleEditorLayoutEvent', 'normalizeEventName', 'onChange', and 'onCursorChange'. Either include them or remove the dependency array. If 'onCursorChange' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/__tests__/MentionList.spec.tsx
+  93:20  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/hero-editor.d.ts
+  7:43  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/RichTextEditor/utils/rnWebView.ts
+  11:9  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Skeleton/index.tsx
+   88:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array                                                                                                                                                react-hooks/exhaustive-deps
+  104:6  warning  React Hook useCallback has missing dependencies: 'onLayout' and 'shouldStartAnimation'. Either include them or remove the dependency array. If 'onLayout' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Switch/SelectorSwitch/Option.tsx
+  63:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Switch/index.tsx
+  71:6  warning  React Hook useEffect has missing dependencies: 'animatedOffset' and 'offset'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Tabs/ScrollableTabsHeader.tsx
+  131:6  warning  React Hook React.useEffect has missing dependencies: 'tabs' and 'tabsAnims'. Either include them or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/TextInput/__tests__/index.spec.tsx
+  465:34  warning  Forbidden non-null assertion  @typescript-eslint/no-non-null-assertion
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/TimePicker/TimePickerAndroid.tsx
+  51:25  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/TimePicker/TimePickerIOS.tsx
+  76:27  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Toast/Toast.tsx
+  70:6  warning  React Hook useEffect has missing dependencies: 'autoDismiss', 'duration', and 'onDismiss'. Either include them or remove the dependency array. If 'onDismiss' changes too often, find the parent component that defines it and wrap that definition in useCallback  react-hooks/exhaustive-deps
+  81:6  warning  React Hook useEffect has a missing dependency: 'animatedValue'. Either include it or remove the dependency array                                                                                                                                                    react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/components/Toast/__tests__/index.spec.tsx
+  19:10  warning  React Hook useEffect has a missing dependency: 'toast'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+  82:10  warning  React Hook useEffect has a missing dependency: 'toast'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/components/progress.ts
+  1:10  warning  Importing "mixColor" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/eBens.ts
+  1:10  warning  Importing "eBensPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/global.ts
+  1:10  warning  Importing "defaultMobilePalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/jobs.ts
+  1:10  warning  Importing "jobsPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/swag.ts
+  1:10  warning  Importing "swagPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/wallet.ts
+  1:10  warning  Importing "walletPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/theme/global/colors/work.ts
+  1:10  warning  Importing "workPalette" from "@hero-design/colors" is not recommended. Please use colors from useTheme hook instead  @hero-design/not-recommended-import
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/utils/__tests__/helpers.spec.ts
+  15:18  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  37:18  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
+/Volumes/Data/Projects/hero-design/packages/rn/src/utils/hooks.ts
+  26:7  warning  Unexpected console statement  no-console
+
+✖ 78 problems (0 errors, 78 warnings)
+

package/.turbo/turbo-publish:npm.log

@@ -0,0 +1,9 @@
+@hero-design/rn:publish:npm: cache hit, replaying output 507c34f3e0a508f6
+@hero-design/rn:publish:npm: $ yarn publish --access public
+@hero-design/rn:publish:npm: [1/4] Bumping version...
+@hero-design/rn:publish:npm: info Current version: 8.12.0-rc.0
+@hero-design/rn:publish:npm: [2/4] Logging in...
+@hero-design/rn:publish:npm: [3/4] Publishing...
+@hero-design/rn:publish:npm: success Published.
+@hero-design/rn:publish:npm: [4/4] Revoking token...
+@hero-design/rn:publish:npm: info Not revoking login token, specified via config file.

package/.turbo/turbo-test.log

@@ -0,0 +1 @@
+$ jest --runInBand

package/.turbo/turbo-type-check.log

@@ -0,0 +1 @@
+$ tsc --noEmit

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',
@@ -13650,10 +13659,21 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     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(Modal$1, {
+    visible: active,
+    animationType: "fade",
+    transparent: true
+  }, /*#__PURE__*/React.createElement(StyledContainerInModal, {
+    testID: testID,
+    style: [style]
   }, /*#__PURE__*/React.createElement(StyledBackdrop, {
     pointerEvents: active ? 'auto' : 'box-none',
     testID: "back-drop",
@@ -13686,7 +13706,24 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), /*#__PURE__*/React.createElement(StyledFAB, {
+  }))), /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      opacity: interpolatedActionGroupOpacityAnimation
+    }
+  }, /*#__PURE__*/React.createElement(StyledFAB, {
+    key: "fab-in-portal",
+    testID: "fab-in-portal",
+    icon: fabIcon,
+    onPress: onPress,
+    animated: true,
+    active: active,
+    title: fabTitle
+  })))), /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      opacity: interpolatedFABOpacityAnimation
+    }
+  }, /*#__PURE__*/React.createElement(StyledFAB, {
+    key: "fab",
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,
@@ -13694,7 +13731,7 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     active: active,
     title: fabTitle,
     ref: fabRef
-  }));
+  })));
 });
 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',
@@ -13681,10 +13690,21 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     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(reactNative.Modal, {
+    visible: active,
+    animationType: "fade",
+    transparent: true
+  }, /*#__PURE__*/React__default["default"].createElement(StyledContainerInModal, {
+    testID: testID,
+    style: [style]
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
     pointerEvents: active ? 'auto' : 'box-none',
     testID: "back-drop",
@@ -13717,7 +13737,24 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       index: active ? index : items.length - index,
       active: active
     }));
-  }))), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  }))), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    style: {
+      opacity: interpolatedActionGroupOpacityAnimation
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+    key: "fab-in-portal",
+    testID: "fab-in-portal",
+    icon: fabIcon,
+    onPress: onPress,
+    animated: true,
+    active: active,
+    title: fabTitle
+  })))), /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    style: {
+      opacity: interpolatedFABOpacityAnimation
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+    key: "fab",
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,
@@ -13725,7 +13762,7 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     active: active,
     title: fabTitle,
     ref: fabRef
-  }));
+  })));
 });
 ActionGroup.displayName = 'FAB.ActionGroup';
 

package/package.json

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

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,
 };