@hero-design/rn 8.36.3 → 8.37.0

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 28s
+created lib/index.js, es/index.js in 26.2s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -2304,7 +2304,6 @@ var getFABTheme = function getFABTheme(theme) {
     buttonPressedBackground: theme.colors.pressedSurface,
     buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
@@ -2318,17 +2317,14 @@ var getFABTheme = function getFABTheme(theme) {
     iconContainerHeight: theme.sizes.large
   };
   var fonts = {
-    header: theme.fonts.neutral.semiBold,
     actionItemText: theme.fonts.neutral.regular,
     title: theme.fonts.neutral.semiBold
   };
   var fontSizes = {
-    header: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large
   };
   var lineHeights = {
-    header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large
@@ -2347,8 +2343,6 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small
   };
@@ -7844,7 +7838,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$2 = Animated.createAnimatedComponent(Pressable);
 var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$9 = index$c(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -7870,7 +7864,7 @@ var StyledBottomSheet = index$c(AnimatedSafeAreaView)(function (_ref) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$c(AnimatedPressable$1)(function (_ref2) {
+var StyledBackdrop$2 = index$c(AnimatedPressable$2)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -12761,7 +12755,7 @@ var DatePicker = function DatePicker(_ref) {
   return /*#__PURE__*/React.createElement(DatePickerAndroid, props);
 };
 
-var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var AnimatedPressable$1 = Animated.createAnimatedComponent(Pressable);
 var StyledContainer$3 = index$c(View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -12789,7 +12783,7 @@ var StyledDragableContainer = index$c(View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$c(AnimatedPressable)(function (_ref3) {
+var StyledBackdrop$1 = index$c(AnimatedPressable$1)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -13615,7 +13609,8 @@ var StyledFAB = index$c(FAB)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var StyledBackdrop = index$c(Animated.View)(function (_ref2) {
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+var StyledBackdrop = index$c(AnimatedPressable)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -13627,15 +13622,6 @@ var StyledBackdrop = index$c(Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
-var StyledHeaderText = index$c(Typography.Title)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    color: theme.__hd__.fab.colors.headerText,
-    marginRight: theme.__hd__.fab.space.headerTextMarginRight,
-    marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
-    textAlign: 'right'
-  };
-});
 
 var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var headerTitle = _ref.headerTitle,
@@ -13645,15 +13631,12 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     items = _ref.items,
     testID = _ref.testID,
     fabTitle = _ref.fabTitle,
+    onBackdropPress = _ref.onBackdropPress,
     _ref$fabIcon = _ref.fabIcon,
     fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
+  useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
   var fabRef = useRef(null);
   var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
-  var titleTranslateYValue = React.useRef(new Animated.Value(0));
-  var titleTranslateY = titleTranslateYValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [50, 0]
-  });
   React.useImperativeHandle(ref, function () {
     return {
       showFAB: function showFAB() {
@@ -13671,13 +13654,10 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, [fabRef]);
   React.useEffect(function () {
-    Animated.parallel([Animated.spring(tranlateXAnimation.current, {
+    Animated.spring(tranlateXAnimation.current, {
       toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS !== 'web'
-    }), Animated.spring(titleTranslateYValue.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: Platform.OS !== 'web'
-    })]).start();
+    }).start();
   }, [active]);
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -13713,22 +13693,15 @@ var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testID: testID,
     style: [style]
   }, /*#__PURE__*/React.createElement(StyledBackdrop, {
-    testID: "back-drop"
+    testID: "back-drop",
+    onPress: onBackdropPress
   }), /*#__PURE__*/React.createElement(StyledActionGroupContainer, {
     testID: "action-group",
+    pointerEvents: "box-none",
     style: {
       opacity: interpolatedActionGroupOpacityAnimation
     }
-  }, !!headerTitle && /*#__PURE__*/React.createElement(Animated.View, {
-    style: {
-      transform: [{
-        translateY: titleTranslateY
-      }]
-    }
-  }, /*#__PURE__*/React.createElement(StyledHeaderText, {
-    testID: "header-text",
-    level: "h4"
-  }, headerTitle)), /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React.createElement(Box, {
     style: [style, {
       paddingBottom: 0
     }]

package/lib/index.js

@@ -2335,7 +2335,6 @@ var getFABTheme = function getFABTheme(theme) {
     buttonPressedBackground: theme.colors.pressedSurface,
     buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
@@ -2349,17 +2348,14 @@ var getFABTheme = function getFABTheme(theme) {
     iconContainerHeight: theme.sizes.large
   };
   var fonts = {
-    header: theme.fonts.neutral.semiBold,
     actionItemText: theme.fonts.neutral.regular,
     title: theme.fonts.neutral.semiBold
   };
   var fontSizes = {
-    header: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large
   };
   var lineHeights = {
-    header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large
@@ -2378,8 +2374,6 @@ var getFABTheme = function getFABTheme(theme) {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small
   };
@@ -7875,7 +7869,7 @@ var Divider = function Divider(_ref) {
   }));
 };
 
-var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$2 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNative.SafeAreaView);
 var StyledWrapper$9 = index$c(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
@@ -7901,7 +7895,7 @@ var StyledBottomSheet = index$c(AnimatedSafeAreaView)(function (_ref) {
     maxHeight: '94%'
   };
 });
-var StyledBackdrop$2 = index$c(AnimatedPressable$1)(function (_ref2) {
+var StyledBackdrop$2 = index$c(AnimatedPressable$2)(function (_ref2) {
   var theme = _ref2.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.bottomSheet.colors.backdrop,
@@ -12792,7 +12786,7 @@ var DatePicker = function DatePicker(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(DatePickerAndroid, props);
 };
 
-var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var AnimatedPressable$1 = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
 var StyledContainer$3 = index$c(reactNative.View)(function (_ref) {
   var theme = _ref.theme,
     enableShadow = _ref.enableShadow;
@@ -12820,7 +12814,7 @@ var StyledDragableContainer = index$c(reactNative.View)(function (_ref2) {
     flexDirection: 'column-reverse'
   });
 });
-var StyledBackdrop$1 = index$c(AnimatedPressable)(function (_ref3) {
+var StyledBackdrop$1 = index$c(AnimatedPressable$1)(function (_ref3) {
   var theme = _ref3.theme;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     backgroundColor: theme.__hd__.drawer.colors.backdrop
@@ -13646,7 +13640,8 @@ var StyledFAB = index$c(FAB)(function (_ref) {
     alignSelf: 'flex-end'
   };
 });
-var StyledBackdrop = index$c(reactNative.Animated.View)(function (_ref2) {
+var AnimatedPressable = reactNative.Animated.createAnimatedComponent(reactNative.Pressable);
+var StyledBackdrop = index$c(AnimatedPressable)(function (_ref2) {
   var theme = _ref2.theme;
   return {
     position: 'absolute',
@@ -13658,15 +13653,6 @@ var StyledBackdrop = index$c(reactNative.Animated.View)(function (_ref2) {
     backgroundColor: theme.__hd__.fab.colors.backdropBackground
   };
 });
-var StyledHeaderText = index$c(Typography.Title)(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    color: theme.__hd__.fab.colors.headerText,
-    marginRight: theme.__hd__.fab.space.headerTextMarginRight,
-    marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
-    textAlign: 'right'
-  };
-});
 
 var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var headerTitle = _ref.headerTitle,
@@ -13676,15 +13662,12 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     items = _ref.items,
     testID = _ref.testID,
     fabTitle = _ref.fabTitle,
+    onBackdropPress = _ref.onBackdropPress,
     _ref$fabIcon = _ref.fabIcon,
     fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
+  useDeprecation("FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.", headerTitle !== undefined);
   var fabRef = React.useRef(null);
   var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
-  var titleTranslateYValue = React__default["default"].useRef(new reactNative.Animated.Value(0));
-  var titleTranslateY = titleTranslateYValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [50, 0]
-  });
   React__default["default"].useImperativeHandle(ref, function () {
     return {
       showFAB: function showFAB() {
@@ -13702,13 +13685,10 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     };
   }, [fabRef]);
   React__default["default"].useEffect(function () {
-    reactNative.Animated.parallel([reactNative.Animated.spring(tranlateXAnimation.current, {
+    reactNative.Animated.spring(tranlateXAnimation.current, {
       toValue: active ? 1 : 0,
       useNativeDriver: reactNative.Platform.OS !== 'web'
-    }), reactNative.Animated.spring(titleTranslateYValue.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: reactNative.Platform.OS !== 'web'
-    })]).start();
+    }).start();
   }, [active]);
   var interpolatedActionGroupOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
@@ -13744,22 +13724,15 @@ var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     testID: testID,
     style: [style]
   }, /*#__PURE__*/React__default["default"].createElement(StyledBackdrop, {
-    testID: "back-drop"
+    testID: "back-drop",
+    onPress: onBackdropPress
   }), /*#__PURE__*/React__default["default"].createElement(StyledActionGroupContainer, {
     testID: "action-group",
+    pointerEvents: "box-none",
     style: {
       opacity: interpolatedActionGroupOpacityAnimation
     }
-  }, !!headerTitle && /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
-    style: {
-      transform: [{
-        translateY: titleTranslateY
-      }]
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
-    testID: "header-text",
-    level: "h4"
-  }, headerTitle)), /*#__PURE__*/React__default["default"].createElement(Box, {
+  }, /*#__PURE__*/React__default["default"].createElement(Box, {
     style: [style, {
       paddingBottom: 0
     }]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.36.3",
+  "version": "8.37.0",
   "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.36.3",
+    "@hero-design/colors": "8.37.0",
     "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.36.3",
+    "@hero-design/react-native-month-year-picker": "^8.37.0",
     "@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.36.3",
-    "@hero-design/react-native-month-year-picker": "^8.36.3",
+    "@hero-design/eslint-plugin": "8.37.0",
+    "@hero-design/react-native-month-year-picker": "^8.37.0",
     "@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.36.3",
+    "eslint-config-hd": "8.37.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.36.3",
+    "prettier-config-hd": "8.37.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

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

@@ -1,10 +1,8 @@
-import { Animated, View } from 'react-native';
+import { Animated, Pressable, View } from 'react-native';
 import styled from '@emotion/native';
 import type { ComponentProps } from 'react';
 import type { ViewProps } from 'react-native';
 import FAB from '../FAB';
-import Typography from '../../Typography';
-import type { TextProps } from '../../Typography/Text';
 
 const StyledContainer = styled(View)<ViewProps>({
   position: 'absolute',
@@ -40,9 +38,8 @@ const StyledFAB = styled(FAB)(({ theme }) => ({
   alignSelf: 'flex-end',
 }));
 
-const StyledBackdrop = styled(Animated.View)<
-  ComponentProps<typeof Animated.View>
->(({ theme }) => ({
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+const StyledBackdrop = styled(AnimatedPressable)(({ theme }) => ({
   position: 'absolute',
   left: 0,
   right: 0,
@@ -52,18 +49,10 @@ const StyledBackdrop = styled(Animated.View)<
   backgroundColor: theme.__hd__.fab.colors.backdropBackground,
 }));
 
-const StyledHeaderText = styled(Typography.Title)<TextProps>(({ theme }) => ({
-  color: theme.__hd__.fab.colors.headerText,
-  marginRight: theme.__hd__.fab.space.headerTextMarginRight,
-  marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,
-  textAlign: 'right',
-}));
-
 export {
-  StyledHeaderText,
+  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledContainerInModal,
-  StyledActionGroupContainer,
   StyledFAB,
 };

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

@@ -307,7 +307,18 @@ exports[`ActionGroup has active true 1`] = `
       }
     >
       <View
+        accessible={true}
         collapsable={false}
+        focusable={true}
+        onBlur={[Function]}
+        onClick={[Function]}
+        onFocus={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
         style={
           Object {
             "backgroundColor": "#000000",
@@ -323,6 +334,7 @@ exports[`ActionGroup has active true 1`] = `
       />
       <View
         collapsable={false}
+        pointerEvents="box-none"
         style={
           Object {
             "alignItems": "flex-end",
@@ -333,48 +345,6 @@ exports[`ActionGroup has active true 1`] = `
         }
         testID="action-group"
       >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "transform": Array [
-                Object {
-                  "translateY": 50,
-                },
-              ],
-            }
-          }
-        >
-          <Text
-            allowFontScaling={false}
-            style={
-              Array [
-                Object {
-                  "color": "#001f23",
-                  "fontFamily": "BeVietnamPro-SemiBold",
-                  "fontSize": 24,
-                  "letterSpacing": 0,
-                  "lineHeight": 32,
-                },
-                Array [
-                  Object {
-                    "color": "#001f23",
-                    "marginBottom": 24,
-                    "marginRight": 24,
-                    "textAlign": "right",
-                  },
-                  undefined,
-                ],
-              ]
-            }
-            testID="header-text"
-            themeIntent="body"
-            themeLevel="h4"
-            themeTypeface="neutral"
-          >
-            What would you like to create?
-          </Text>
-        </View>
         <View
           style={
             Array [

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

@@ -10,40 +10,37 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, getByTestId, getByText, queryByTestId, queryByText } =
-      renderWithTheme(
-        <ActionGroup
-          fabTitle="Shout out"
-          active={active}
-          headerTitle="What would you like to create?"
-          items={[
-            {
-              icon: 'speaker',
-              title: 'Give shout out',
-              testID: 'speaker-action-item',
-            },
-            { icon: 'target', title: 'Goal', testID: 'target-action-item' },
-            {
-              icon: 'plane',
-              title: 'Leave request',
-              testID: 'plane-action-item',
-            },
-            {
-              icon: 'health-bag',
-              title: 'Safety incident',
-              testID: 'health-bag-action-item',
-            },
-            { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
-          ]}
-        />
-      );
+    const { toJSON, getByTestId, queryByTestId } = renderWithTheme(
+      <ActionGroup
+        fabTitle="Shout out"
+        active={active}
+        items={[
+          {
+            icon: 'speaker',
+            title: 'Give shout out',
+            testID: 'speaker-action-item',
+          },
+          { icon: 'target', title: 'Goal', testID: 'target-action-item' },
+          {
+            icon: 'plane',
+            title: 'Leave request',
+            testID: 'plane-action-item',
+          },
+          {
+            icon: 'health-bag',
+            title: 'Safety incident',
+            testID: 'health-bag-action-item',
+          },
+          { icon: 'clock', title: 'Timesheets', testID: 'clock-action-item' },
+        ]}
+      />
+    );
 
     expect(toJSON()).toMatchSnapshot();
 
     if (active) {
       // verify backdrop appears
       expect(queryByTestId('back-drop')).toBeDefined();
-      expect(getByText('What would you like to create?')).toBeDefined();
       expect(getByTestId('speaker-action-item')).toBeDefined();
       expect(getByTestId('target-action-item')).toBeDefined();
       expect(getByTestId('plane-action-item')).toBeDefined();
@@ -51,7 +48,6 @@ describe('ActionGroup', () => {
     } else {
       // verify backdrop disappears
       expect(queryByTestId('back-drop')).toBeNull();
-      expect(queryByText('What would you like to create?')).toBeNull();
     }
   });
 
@@ -74,4 +70,15 @@ describe('ActionGroup', () => {
       expect(onPressSpy).toBeCalledTimes(1);
     });
   });
+
+  describe('when user presses backdrop', () => {
+    it('calls onBackdropPress when active = true', () => {
+      const onBackdropPressSpy = jest.fn();
+      const { getByTestId } = renderWithTheme(
+        <ActionGroup onBackdropPress={onBackdropPressSpy} active />
+      );
+      fireEvent(getByTestId('back-drop'), 'press');
+      expect(onBackdropPressSpy).toBeCalledTimes(1);
+    });
+  });
 });

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

@@ -10,11 +10,11 @@ import {
   StyledContainer,
   StyledContainerInModal,
   StyledFAB,
-  StyledHeaderText,
 } from './StyledActionGroup';
 
 import Box from '../../Box';
 import { FABHandles } from '../FAB';
+import { useDeprecation } from '../../../utils/hooks';
 
 export type ActionGroupHandles = {
   showFAB: () => void;
@@ -24,6 +24,7 @@ export type ActionGroupHandles = {
 
 export interface ActionGroupProps {
   /**
+   * @deprecated headerTitle will be removed in the next major release.
    * Title of the action group header.
    */
   headerTitle?: string;
@@ -32,7 +33,10 @@ export interface ActionGroupProps {
    * This function is called on pressing the FAB button.
    * */
   onPress?: () => void;
-
+  /**
+   * This function is called on pressing the FAB backdrop.
+   * */
+  onBackdropPress?: () => void;
   /**
    * Specify if the FAB button is in active state and the action group is shown.
    * */
@@ -74,20 +78,20 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
       items,
       testID,
       fabTitle,
+      onBackdropPress,
       fabIcon = 'add',
     },
     ref
   ) => {
+    useDeprecation(
+      `FAB.ActionGroup's headerTitle prop will be removed in the next major release. Please remove it.`,
+      headerTitle !== undefined
+    );
+
     const fabRef = useRef<FABHandles>(null);
     const tranlateXAnimation = useRef<Animated.Value>(
       new Animated.Value(active ? 1 : 0)
     );
-    const titleTranslateYValue = React.useRef(new Animated.Value(0));
-
-    const titleTranslateY = titleTranslateYValue.current.interpolate({
-      inputRange: [0, 1],
-      outputRange: [50, 0],
-    });
 
     React.useImperativeHandle(
       ref,
@@ -100,16 +104,10 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
     );
 
     React.useEffect(() => {
-      Animated.parallel([
-        Animated.spring(tranlateXAnimation.current, {
-          toValue: active ? 1 : 0,
-          useNativeDriver: Platform.OS !== 'web',
-        }),
-        Animated.spring(titleTranslateYValue.current, {
-          toValue: active ? 1 : 0,
-          useNativeDriver: Platform.OS !== 'web',
-        }),
-      ]).start();
+      Animated.spring(tranlateXAnimation.current, {
+        toValue: active ? 1 : 0,
+        useNativeDriver: Platform.OS !== 'web',
+      }).start();
     }, [active]);
     const interpolatedActionGroupOpacityAnimation =
       tranlateXAnimation.current.interpolate({
@@ -148,23 +146,14 @@ const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
           statusBarTranslucent
         >
           <StyledContainerInModal testID={testID} style={[style]}>
-            <StyledBackdrop testID="back-drop" />
+            <StyledBackdrop testID="back-drop" onPress={onBackdropPress} />
             <StyledActionGroupContainer
               testID="action-group"
+              pointerEvents="box-none"
               style={{
                 opacity: interpolatedActionGroupOpacityAnimation,
               }}
             >
-              {!!headerTitle && (
-                <Animated.View
-                  style={{ transform: [{ translateY: titleTranslateY }] }}
-                >
-                  <StyledHeaderText testID="header-text" level="h4">
-                    {headerTitle}
-                  </StyledHeaderText>
-                </Animated.View>
-              )}
-
               <Box style={[style, { paddingBottom: 0 }]}>
                 {items?.map((itemProp, index) => (
                   <ActionItem

package/src/components/TextInput/__tests__/StyledTextInput.spec.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { StyledHeaderText } from '../../FAB/ActionGroup/StyledActionGroup';
 import {
+  StyledHelperText,
   StyledLabel,
   StyledTextInput,
   StyledMaxLengthMessage,
@@ -113,7 +113,7 @@ describe('StyledMaxLengthMessage', () => {
 describe('StyledHelperText', () => {
   it('renders correctly', (): void => {
     const { toJSON } = renderWithTheme(
-      <StyledHeaderText>helper text</StyledHeaderText>
+      <StyledHelperText>helper text</StyledHelperText>
     );
 
     expect(toJSON()).toMatchSnapshot();

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -659,24 +659,15 @@ exports[`StyledHelperText renders correctly 1`] = `
       Object {
         "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
-        "fontSize": 42,
-        "letterSpacing": 0,
-        "lineHeight": 50,
+        "fontSize": 12,
+        "letterSpacing": 0.48,
+        "lineHeight": 16,
       },
-      Array [
-        Object {
-          "color": "#001f23",
-          "marginBottom": 24,
-          "marginRight": 24,
-          "textAlign": "right",
-        },
-        undefined,
-      ],
+      undefined,
     ]
   }
+  themeFontWeight="regular"
   themeIntent="body"
-  themeLevel="h1"
-  themeTypeface="neutral"
 >
   helper text
 </Text>

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -473,23 +473,19 @@ Object {
         "buttonActiveBackground": "#33144d",
         "buttonBackground": "#401960",
         "buttonPressedBackground": "#33144d",
-        "headerText": "#001f23",
         "icon": "#ffffff",
         "titleText": "#ffffff",
       },
       "fontSizes": Object {
         "actionItemText": 16,
-        "header": 24,
         "title": 16,
       },
       "fonts": Object {
         "actionItemText": "BeVietnamPro-Regular",
-        "header": "BeVietnamPro-SemiBold",
         "title": "BeVietnamPro-SemiBold",
       },
       "lineHeights": Object {
         "actionItemText": 22,
-        "header": 32,
         "icon": 24,
         "title": 24,
       },
@@ -520,8 +516,6 @@ Object {
         "buttonMarginRight": 24,
         "buttonMarginTop": 24,
         "containerPadding": 20,
-        "headerTextMarginBottom": 24,
-        "headerTextMarginRight": 24,
         "titleMarginHorizontal": 8,
       },
     },

package/src/theme/components/fab.ts

@@ -6,7 +6,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     buttonPressedBackground: theme.colors.pressedSurface,
     buttonActiveBackground: theme.colors.pressedSurface,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.secondary,
     actionItemPressedBackground: theme.colors.pressedSurface,
     backdropBackground: theme.colors.overlayGlobalSurface,
@@ -22,19 +21,16 @@ const getFABTheme = (theme: GlobalTheme) => {
   };
 
   const fonts = {
-    header: theme.fonts.neutral.semiBold,
     actionItemText: theme.fonts.neutral.regular,
     title: theme.fonts.neutral.semiBold,
   };
 
   const fontSizes = {
-    header: theme.fontSizes.xxxlarge,
     actionItemText: theme.fontSizes.large,
     title: theme.fontSizes.large,
   };
 
   const lineHeights = {
-    header: theme.lineHeights.xxxlarge,
     actionItemText: theme.lineHeights.medium,
     title: theme.lineHeights.large,
     icon: theme.lineHeights.large,
@@ -55,8 +51,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     actionItemTextPaddingLeft: theme.space.xsmall,
     buttonMarginTop: theme.space.large,
     buttonMarginRight: theme.space.large,
-    headerTextMarginRight: theme.space.large,
-    headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
   };

package/types/components/FAB/ActionGroup/StyledActionGroup.d.ts

@@ -1,7 +1,6 @@
 /// <reference types="react" />
 import { Animated, View } from 'react-native';
 import type { ViewProps } from 'react-native';
-import type { TextProps } from '../../Typography/Text';
 declare const StyledContainer: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
@@ -24,14 +23,10 @@ declare const StyledFAB: import("@emotion/native").StyledComponent<import("../FA
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledBackdrop: import("@emotion/native").StyledComponent<Animated.AnimatedProps<import("react-native").PressableProps & import("react").RefAttributes<View>> & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledHeaderText: import("@emotion/native").StyledComponent<import("../../Typography/Title").TitleProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & TextProps, {}, {}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledActionGroupContainer, StyledFAB, };
+export { StyledActionGroupContainer, StyledBackdrop, StyledContainer, StyledContainerInModal, StyledFAB, };

package/types/components/FAB/ActionGroup/index.d.ts

@@ -9,6 +9,7 @@ export type ActionGroupHandles = {
 };
 export interface ActionGroupProps {
     /**
+     * @deprecated headerTitle will be removed in the next major release.
      * Title of the action group header.
      */
     headerTitle?: string;
@@ -16,6 +17,10 @@ export interface ActionGroupProps {
      * This function is called on pressing the FAB button.
      * */
     onPress?: () => void;
+    /**
+     * This function is called on pressing the FAB backdrop.
+     * */
+    onBackdropPress?: () => void;
     /**
      * Specify if the FAB button is in active state and the action group is shown.
      * */

package/types/theme/components/fab.d.ts

@@ -4,12 +4,10 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         actionItem: number;
     };
     fonts: {
-        header: string;
         actionItemText: string;
         title: string;
     };
     fontSizes: {
-        header: number;
         actionItemText: number;
         title: number;
     };
@@ -18,7 +16,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         buttonPressedBackground: string;
         buttonActiveBackground: string;
         icon: string;
-        headerText: string;
         actionItemBackground: string;
         actionItemPressedBackground: string;
         backdropBackground: string;
@@ -32,7 +29,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         iconContainerHeight: number;
     };
     lineHeights: {
-        header: number;
         actionItemText: number;
         title: number;
         icon: number;
@@ -54,8 +50,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         actionItemTextPaddingLeft: number;
         buttonMarginTop: number;
         buttonMarginRight: number;
-        headerTextMarginRight: number;
-        headerTextMarginBottom: number;
         containerPadding: number;
         titleMarginHorizontal: number;
     };