@hero-design/rn 8.32.1 → 8.33.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 25.6s
+created lib/index.js, es/index.js in 29s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1939,7 +1939,8 @@ var getButtonTheme = function getButtonTheme(theme) {
     buttonPadding: theme.space.medium,
     textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
-    utilityPadding: theme.space.small
+    utilityPadding: theme.space.small,
+    loadingIndicatorWrapperVerticalPadding: theme.space.xxsmall / 2
   };
   var sizes = {
     iconSize: theme.fontSizes.xxlarge
@@ -6350,6 +6351,7 @@ var Text = function Text(_ref) {
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$y);
+  useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React.createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -7904,7 +7906,7 @@ var StyledLoadingIndicatorWrapper = index$a(View)(function (_ref) {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingVertical: theme.space.xxsmall
+    paddingVertical: theme.__hd__.button.space.loadingIndicatorWrapperVerticalPadding
   };
 });
 var StyledLoadingDot = index$a(View)(function (_ref2) {
@@ -13249,11 +13251,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
     iconProps = _objectWithoutProperties(_ref, _excluded$c);
   var rotateAnimation = useRef(new Animated.Value(active ? 1 : 0));
   useEffect(function () {
-    var animation = Animated.timing(rotateAnimation.current, {
+    var animation = Animated.spring(rotateAnimation.current, {
       toValue: active ? 1 : 0,
-      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-      easing: Easing.inOut(Easing.ease),
-      duration: 300
+      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android'
     });
     animation.start();
     return function () {
@@ -13275,6 +13275,11 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   }, iconProps)));
 };
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
 var IconOnlyContent = function IconOnlyContent(_ref) {
   var icon = _ref.icon,
     animated = _ref.animated,
@@ -13300,7 +13305,19 @@ var IconWithTextContent = function IconWithTextContent(_ref2) {
     testID: "styled-fab-icon"
   })), /*#__PURE__*/React.createElement(StyledFABText, null, title));
 };
-var FAB = function FAB(_ref3) {
+var defaultAnimation = {
+  create: {
+    type: 'easeInEaseOut',
+    property: 'opacity'
+  },
+  update: {
+    type: 'spring',
+    springDamping: Platform.OS === 'ios' ? 0.7 : 1
+  },
+  duration: 400
+};
+var FAB = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var _StyleSheet$flatten, _StyleSheet$flatten2;
   var onPress = _ref3.onPress,
     title = _ref3.title,
     icon = _ref3.icon,
@@ -13308,22 +13325,71 @@ var FAB = function FAB(_ref3) {
     testID = _ref3.testID,
     active = _ref3.active,
     style = _ref3.style;
-  var isIconOnly = !title;
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement(StyledFAB$1, {
+  var _React$useState = React.useState({
+      hideTitle: false,
+      hideButton: false
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    displayState = _React$useState2[0],
+    setDisplayState = _React$useState2[1];
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    canAnimate = _React$useState4[0],
+    setCanAnimate = _React$useState4[1];
+  var isIconOnly = displayState.hideTitle || active || !title;
+  React.useImperativeHandle(ref, function () {
+    return {
+      show: function show() {
+        setDisplayState({
+          hideButton: false,
+          hideTitle: false
+        });
+      },
+      collapse: function collapse() {
+        setDisplayState({
+          hideButton: false,
+          hideTitle: true
+        });
+      },
+      hide: function hide() {
+        setDisplayState(function (previousState) {
+          return _objectSpread2(_objectSpread2({}, previousState), {}, {
+            hideButton: true
+          });
+        });
+      }
+    };
+  }, []);
+  React.useEffect(function () {
+    if (canAnimate) {
+      LayoutAnimation.configureNext(defaultAnimation);
+    }
+  }, [isIconOnly, displayState.hideButton, canAnimate]);
+  var marginBottom = Number((_StyleSheet$flatten = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
+  return /*#__PURE__*/React.createElement(StyledFAB$1
+  /** Add a small timeout before executing animation to prevent flakiness */, {
+    onLayout: function onLayout() {
+      return setTimeout(function () {
+        return setCanAnimate(true);
+      }, 500);
+    },
     underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress,
-    style: style,
+    style: [style, {
+      bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = StyleSheet$1.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom
+    }],
     testID: testID
   }, isIconOnly ? /*#__PURE__*/React.createElement(IconOnlyContent, {
     animated: animated,
     active: active,
-    icon: icon
+    icon: active ? 'add' : icon
   }) : /*#__PURE__*/React.createElement(IconWithTextContent, {
     icon: icon,
     title: title
   }));
-};
+});
+FAB.displayName = 'FAB';
 
 var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
@@ -13361,9 +13427,30 @@ var ActionItem = function ActionItem(_ref) {
     title = _ref.title,
     onPress = _ref.onPress,
     style = _ref.style,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    index = _ref.index,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active;
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement(StyledActionItem, {
+  var animatedValue = React.useRef(new Animated.Value(0));
+  var translateY = animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [50, 0]
+  });
+  React.useEffect(function () {
+    Animated.spring(animatedValue.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: Platform.OS !== 'web',
+      delay: index * 20
+    }).start();
+  }, [active, index]);
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
+      transform: [{
+        translateY: translateY
+      }]
+    }
+  }, /*#__PURE__*/React.createElement(StyledActionItem, {
     underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
     style: style,
     onPress: onPress,
@@ -13371,7 +13458,7 @@ var ActionItem = function ActionItem(_ref) {
   }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledIconContainer, null, /*#__PURE__*/React.createElement(StyledIcon, {
     size: "xsmall",
     icon: icon
-  })), /*#__PURE__*/React.createElement(StyledActionItemText, null, title)));
+  })), /*#__PURE__*/React.createElement(StyledActionItemText, null, title))));
 };
 
 var StyledContainer$2 = index$a(View)({
@@ -13420,40 +13507,48 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
   };
 });
 
-var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
-  var style = _ref.style,
-    items = _ref.items;
-  return /*#__PURE__*/React.createElement(View, {
-    style: style
-  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
-    return /*#__PURE__*/React.createElement(ActionItem, _extends$1({
-      key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
-    }, itemProp));
-  }));
-};
-var ActionGroup = function ActionGroup(_ref2) {
-  var headerTitle = _ref2.headerTitle,
-    onPress = _ref2.onPress,
-    active = _ref2.active,
-    style = _ref2.style,
-    items = _ref2.items,
-    testID = _ref2.testID,
-    fabTitle = _ref2.fabTitle,
-    _ref2$fabIcon = _ref2.fabIcon,
-    fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
+var ActionGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var headerTitle = _ref.headerTitle,
+    onPress = _ref.onPress,
+    active = _ref.active,
+    style = _ref.style,
+    items = _ref.items,
+    testID = _ref.testID,
+    fabTitle = _ref.fabTitle,
+    _ref$fabIcon = _ref.fabIcon,
+    fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
+  var fabRef = useRef(null);
   var tranlateXAnimation = useRef(new Animated.Value(active ? 1 : 0));
-  useEffect(function () {
-    var animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-      easing: Easing.inOut(Easing.cubic)
-    });
-    animation.start();
-  }, [active]);
-  var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
+  var titleTranslateYValue = React.useRef(new Animated.Value(0));
+  var titleTranslateY = titleTranslateYValue.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [400, 0]
+    outputRange: [50, 0]
   });
+  React.useImperativeHandle(ref, function () {
+    return {
+      showFAB: function showFAB() {
+        var _fabRef$current;
+        return (_fabRef$current = fabRef.current) === null || _fabRef$current === void 0 ? void 0 : _fabRef$current.show();
+      },
+      collapseFAB: function collapseFAB() {
+        var _fabRef$current2;
+        return (_fabRef$current2 = fabRef.current) === null || _fabRef$current2 === void 0 ? void 0 : _fabRef$current2.collapse();
+      },
+      hideFAB: function hideFAB() {
+        var _fabRef$current3;
+        return (_fabRef$current3 = fabRef.current) === null || _fabRef$current3 === void 0 ? void 0 : _fabRef$current3.hide();
+      }
+    };
+  }, [fabRef]);
+  React.useEffect(function () {
+    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();
+  }, [active]);
   var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.4]
@@ -13476,24 +13571,38 @@ var ActionGroup = function ActionGroup(_ref2) {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
-      opacity: interpolatedActionGroupOpacityAnimation,
+      opacity: interpolatedActionGroupOpacityAnimation
+    }
+  }, !!headerTitle && /*#__PURE__*/React.createElement(Animated.View, {
+    style: {
       transform: [{
-        translateX: interpolatedTranlateXAnimation
+        translateY: titleTranslateY
       }]
     }
-  }, !!headerTitle && /*#__PURE__*/React.createElement(StyledHeaderText, {
+  }, /*#__PURE__*/React.createElement(StyledHeaderText, {
     testID: "header-text"
-  }, headerTitle), /*#__PURE__*/React.createElement(ActionItemsListComponent, {
-    items: items
-  })), /*#__PURE__*/React.createElement(StyledFAB, {
+  }, headerTitle)), /*#__PURE__*/React.createElement(Box, {
+    style: [style, {
+      paddingBottom: 0
+    }]
+  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
+    return /*#__PURE__*/React.createElement(ActionItem, _extends$1({
+      key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
+    }, itemProp, {
+      index: active ? index : items.length - index,
+      active: active
+    }));
+  }))), /*#__PURE__*/React.createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,
     animated: true,
     active: active,
-    title: fabTitle
+    title: fabTitle,
+    ref: fabRef
   }));
-};
+});
+ActionGroup.displayName = 'FAB.ActionGroup';
 
 var index$6 = Object.assign(FAB, {
   ActionGroup: ActionGroup

package/lib/index.js

@@ -1969,7 +1969,8 @@ var getButtonTheme = function getButtonTheme(theme) {
     buttonPadding: theme.space.medium,
     textButtonPadding: theme.space.smallMedium,
     iconPadding: theme.space.smallMedium,
-    utilityPadding: theme.space.small
+    utilityPadding: theme.space.small,
+    loadingIndicatorWrapperVerticalPadding: theme.space.xxsmall / 2
   };
   var sizes = {
     iconSize: theme.fontSizes.xxlarge
@@ -6380,6 +6381,7 @@ var Text = function Text(_ref) {
     _ref$allowFontScaling = _ref.allowFontScaling,
     allowFontScaling = _ref$allowFontScaling === void 0 ? false : _ref$allowFontScaling,
     nativeProps = _objectWithoutProperties(_ref, _excluded$y);
+  useDeprecation('Typography.Text is deprecated and will be removed in the next major release, please refer to https://design.employmenthero.com/mobile/Components/typography for the appropriate alternatives.');
   return /*#__PURE__*/React__default["default"].createElement(StyledText$3, _extends$1({}, nativeProps, {
     themeFontSize: fontSize,
     themeFontWeight: fontWeight,
@@ -7934,7 +7936,7 @@ var StyledLoadingIndicatorWrapper = index$a(reactNative.View)(function (_ref) {
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
-    paddingVertical: theme.space.xxsmall
+    paddingVertical: theme.__hd__.button.space.loadingIndicatorWrapperVerticalPadding
   };
 });
 var StyledLoadingDot = index$a(reactNative.View)(function (_ref2) {
@@ -13279,11 +13281,9 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
     iconProps = _objectWithoutProperties(_ref, _excluded$c);
   var rotateAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
   React.useEffect(function () {
-    var animation = reactNative.Animated.timing(rotateAnimation.current, {
+    var animation = reactNative.Animated.spring(rotateAnimation.current, {
       toValue: active ? 1 : 0,
-      useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
-      easing: reactNative.Easing.inOut(reactNative.Easing.ease),
-      duration: 300
+      useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android'
     });
     animation.start();
     return function () {
@@ -13305,6 +13305,11 @@ var AnimatedFABIcon = function AnimatedFABIcon(_ref) {
   }, iconProps)));
 };
 
+if (reactNative.Platform.OS === 'android') {
+  if (reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+    reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
 var IconOnlyContent = function IconOnlyContent(_ref) {
   var icon = _ref.icon,
     animated = _ref.animated,
@@ -13330,7 +13335,19 @@ var IconWithTextContent = function IconWithTextContent(_ref2) {
     testID: "styled-fab-icon"
   })), /*#__PURE__*/React__default["default"].createElement(StyledFABText, null, title));
 };
-var FAB = function FAB(_ref3) {
+var defaultAnimation = {
+  create: {
+    type: 'easeInEaseOut',
+    property: 'opacity'
+  },
+  update: {
+    type: 'spring',
+    springDamping: reactNative.Platform.OS === 'ios' ? 0.7 : 1
+  },
+  duration: 400
+};
+var FAB = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
+  var _StyleSheet$flatten, _StyleSheet$flatten2;
   var onPress = _ref3.onPress,
     title = _ref3.title,
     icon = _ref3.icon,
@@ -13338,22 +13355,71 @@ var FAB = function FAB(_ref3) {
     testID = _ref3.testID,
     active = _ref3.active,
     style = _ref3.style;
-  var isIconOnly = !title;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
+  var _React$useState = React__default["default"].useState({
+      hideTitle: false,
+      hideButton: false
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    displayState = _React$useState2[0],
+    setDisplayState = _React$useState2[1];
+  var _React$useState3 = React__default["default"].useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    canAnimate = _React$useState4[0],
+    setCanAnimate = _React$useState4[1];
+  var isIconOnly = displayState.hideTitle || active || !title;
+  React__default["default"].useImperativeHandle(ref, function () {
+    return {
+      show: function show() {
+        setDisplayState({
+          hideButton: false,
+          hideTitle: false
+        });
+      },
+      collapse: function collapse() {
+        setDisplayState({
+          hideButton: false,
+          hideTitle: true
+        });
+      },
+      hide: function hide() {
+        setDisplayState(function (previousState) {
+          return _objectSpread2(_objectSpread2({}, previousState), {}, {
+            hideButton: true
+          });
+        });
+      }
+    };
+  }, []);
+  React__default["default"].useEffect(function () {
+    if (canAnimate) {
+      reactNative.LayoutAnimation.configureNext(defaultAnimation);
+    }
+  }, [isIconOnly, displayState.hideButton, canAnimate]);
+  var marginBottom = Number((_StyleSheet$flatten = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten === void 0 ? void 0 : _StyleSheet$flatten.marginBottom) || 0;
+  return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1
+  /** Add a small timeout before executing animation to prevent flakiness */, {
+    onLayout: function onLayout() {
+      return setTimeout(function () {
+        return setCanAnimate(true);
+      }, 500);
+    },
     underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
     onPress: onPress,
-    style: style,
+    style: [style, {
+      bottom: displayState.hideButton ? -(marginBottom + theme.__hd__.fab.sizes.height * 2) : (_StyleSheet$flatten2 = reactNative.StyleSheet.flatten(style)) === null || _StyleSheet$flatten2 === void 0 ? void 0 : _StyleSheet$flatten2.bottom
+    }],
     testID: testID
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
     active: active,
-    icon: icon
+    icon: active ? 'add' : icon
   }) : /*#__PURE__*/React__default["default"].createElement(IconWithTextContent, {
     icon: icon,
     title: title
   }));
-};
+});
+FAB.displayName = 'FAB';
 
 var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
   var theme = _ref.theme;
@@ -13391,9 +13457,30 @@ var ActionItem = function ActionItem(_ref) {
     title = _ref.title,
     onPress = _ref.onPress,
     style = _ref.style,
-    testID = _ref.testID;
+    testID = _ref.testID,
+    index = _ref.index,
+    _ref$active = _ref.active,
+    active = _ref$active === void 0 ? false : _ref$active;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(StyledActionItem, {
+  var animatedValue = React__default["default"].useRef(new reactNative.Animated.Value(0));
+  var translateY = animatedValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [50, 0]
+  });
+  React__default["default"].useEffect(function () {
+    reactNative.Animated.spring(animatedValue.current, {
+      toValue: active ? 1 : 0,
+      useNativeDriver: reactNative.Platform.OS !== 'web',
+      delay: index * 20
+    }).start();
+  }, [active, index]);
+  return /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    style: {
+      transform: [{
+        translateY: translateY
+      }]
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(StyledActionItem, {
     underlayColor: theme.__hd__.fab.colors.actionItemPressedBackground,
     style: style,
     onPress: onPress,
@@ -13401,7 +13488,7 @@ var ActionItem = function ActionItem(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledIconContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
     size: "xsmall",
     icon: icon
-  })), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title)));
+  })), /*#__PURE__*/React__default["default"].createElement(StyledActionItemText, null, title))));
 };
 
 var StyledContainer$2 = index$a(reactNative.View)({
@@ -13450,40 +13537,48 @@ var StyledHeaderText = index$a(Typography.Text)(function (_ref3) {
   };
 });
 
-var ActionItemsListComponent = function ActionItemsListComponent(_ref) {
-  var style = _ref.style,
-    items = _ref.items;
-  return /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
-    style: style
-  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp) {
-    return /*#__PURE__*/React__default["default"].createElement(ActionItem, _extends$1({
-      key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
-    }, itemProp));
-  }));
-};
-var ActionGroup = function ActionGroup(_ref2) {
-  var headerTitle = _ref2.headerTitle,
-    onPress = _ref2.onPress,
-    active = _ref2.active,
-    style = _ref2.style,
-    items = _ref2.items,
-    testID = _ref2.testID,
-    fabTitle = _ref2.fabTitle,
-    _ref2$fabIcon = _ref2.fabIcon,
-    fabIcon = _ref2$fabIcon === void 0 ? 'add' : _ref2$fabIcon;
+var ActionGroup = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var headerTitle = _ref.headerTitle,
+    onPress = _ref.onPress,
+    active = _ref.active,
+    style = _ref.style,
+    items = _ref.items,
+    testID = _ref.testID,
+    fabTitle = _ref.fabTitle,
+    _ref$fabIcon = _ref.fabIcon,
+    fabIcon = _ref$fabIcon === void 0 ? 'add' : _ref$fabIcon;
+  var fabRef = React.useRef(null);
   var tranlateXAnimation = React.useRef(new reactNative.Animated.Value(active ? 1 : 0));
-  React.useEffect(function () {
-    var animation = reactNative.Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: reactNative.Platform.OS === 'ios' || reactNative.Platform.OS === 'android',
-      easing: reactNative.Easing.inOut(reactNative.Easing.cubic)
-    });
-    animation.start();
-  }, [active]);
-  var interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate({
+  var titleTranslateYValue = React__default["default"].useRef(new reactNative.Animated.Value(0));
+  var titleTranslateY = titleTranslateYValue.current.interpolate({
     inputRange: [0, 1],
-    outputRange: [400, 0]
+    outputRange: [50, 0]
   });
+  React__default["default"].useImperativeHandle(ref, function () {
+    return {
+      showFAB: function showFAB() {
+        var _fabRef$current;
+        return (_fabRef$current = fabRef.current) === null || _fabRef$current === void 0 ? void 0 : _fabRef$current.show();
+      },
+      collapseFAB: function collapseFAB() {
+        var _fabRef$current2;
+        return (_fabRef$current2 = fabRef.current) === null || _fabRef$current2 === void 0 ? void 0 : _fabRef$current2.collapse();
+      },
+      hideFAB: function hideFAB() {
+        var _fabRef$current3;
+        return (_fabRef$current3 = fabRef.current) === null || _fabRef$current3 === void 0 ? void 0 : _fabRef$current3.hide();
+      }
+    };
+  }, [fabRef]);
+  React__default["default"].useEffect(function () {
+    reactNative.Animated.parallel([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();
+  }, [active]);
   var interpolatedBackdropOpacityAnimation = tranlateXAnimation.current.interpolate({
     inputRange: [0, 1],
     outputRange: [0, 0.4]
@@ -13506,24 +13601,38 @@ var ActionGroup = function ActionGroup(_ref2) {
     pointerEvents: active ? 'auto' : 'none',
     testID: "action-group",
     style: {
-      opacity: interpolatedActionGroupOpacityAnimation,
+      opacity: interpolatedActionGroupOpacityAnimation
+    }
+  }, !!headerTitle && /*#__PURE__*/React__default["default"].createElement(reactNative.Animated.View, {
+    style: {
       transform: [{
-        translateX: interpolatedTranlateXAnimation
+        translateY: titleTranslateY
       }]
     }
-  }, !!headerTitle && /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
+  }, /*#__PURE__*/React__default["default"].createElement(StyledHeaderText, {
     testID: "header-text"
-  }, headerTitle), /*#__PURE__*/React__default["default"].createElement(ActionItemsListComponent, {
-    items: items
-  })), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
+  }, headerTitle)), /*#__PURE__*/React__default["default"].createElement(Box, {
+    style: [style, {
+      paddingBottom: 0
+    }]
+  }, items === null || items === void 0 ? void 0 : items.map(function (itemProp, index) {
+    return /*#__PURE__*/React__default["default"].createElement(ActionItem, _extends$1({
+      key: itemProp.key || "".concat(itemProp.icon, "_").concat(itemProp.title)
+    }, itemProp, {
+      index: active ? index : items.length - index,
+      active: active
+    }));
+  }))), /*#__PURE__*/React__default["default"].createElement(StyledFAB, {
     testID: "fab",
     icon: fabIcon,
     onPress: onPress,
     animated: true,
     active: active,
-    title: fabTitle
+    title: fabTitle,
+    ref: fabRef
   }));
-};
+});
+ActionGroup.displayName = 'FAB.ActionGroup';
 
 var index$6 = Object.assign(FAB, {
   ActionGroup: ActionGroup