@hero-design/rn 8.32.0 → 8.33.0

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

@@ -1,8 +1,8 @@
 import '@testing-library/jest-native/extend-expect';
-import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
-import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import React from 'react';
 import ActionGroup from '..';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 
 describe('ActionGroup', () => {
   it.each`
@@ -40,23 +40,16 @@ describe('ActionGroup', () => {
     expect(toJSON()).toMatchSnapshot();
 
     expect(getByText('What would you like to create?')).toBeDefined();
-    expect(getByText('Shout out')).toBeDefined();
     expect(getByTestId('speaker-action-item')).toBeDefined();
     expect(getByTestId('target-action-item')).toBeDefined();
     expect(getByTestId('plane-action-item')).toBeDefined();
     expect(getByTestId('health-bag-action-item')).toBeDefined();
 
     if (active) {
-      // verify action group appears
-      expect(getByTestId('action-group')).toHaveStyle({
-        transform: [{ translateX: 0 }],
-      });
+      // verify backdrop appears
       expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
     } else {
-      // verify action group disappears
-      expect(getByTestId('action-group')).toHaveStyle({
-        transform: [{ translateX: 400 }],
-      });
+      // verify backdrop disappears
       expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
     }
   });

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

@@ -1,35 +1,24 @@
-import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Platform, View } from 'react-native';
+import React, { forwardRef, useRef } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
+import { Animated, Platform } from 'react-native';
+import type { IconName } from '../../Icon';
+import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
+  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledFAB,
   StyledHeaderText,
-  StyledActionGroupContainer,
 } from './StyledActionGroup';
-import type { IconName } from '../../Icon';
-import type { ActionItemProps } from './ActionItem';
 
-type ActionItemsContainerProps = {
-  style?: StyleProp<ViewStyle>;
-  items?: Array<ActionItemProps>;
-};
-const ActionItemsListComponent = ({
-  style,
-  items,
-}: ActionItemsContainerProps) => {
-  return (
-    <View style={style}>
-      {items?.map((itemProp) => (
-        <ActionItem
-          key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
-          {...itemProp}
-        />
-      ))}
-    </View>
-  );
+import Box from '../../Box';
+import { FABHandles } from '../FAB';
+
+export type ActionGroupHandles = {
+  showFAB: () => void;
+  collapseFAB: () => void;
+  hideFAB: () => void;
 };
 
 export interface ActionGroupProps {
@@ -66,87 +55,124 @@ export interface ActionGroupProps {
   /**
    * Action items of the action group.
    * */
+  items?: Array<Omit<ActionItemProps, 'index' | 'active'>>;
 
-  items?: Array<ActionItemProps>;
   /**
    * Testing id of the component.
    */
-
   testID?: string;
 }
-const ActionGroup = ({
-  headerTitle,
-  onPress,
-  active,
-  style,
-  items,
-  testID,
-  fabTitle,
-  fabIcon = 'add',
-}: ActionGroupProps) => {
-  const tranlateXAnimation = useRef<Animated.Value>(
-    new Animated.Value(active ? 1 : 0)
-  );
-  useEffect(() => {
-    const animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: active ? 1 : 0,
-      useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-      easing: Easing.inOut(Easing.cubic),
-    });
-
-    animation.start();
-  }, [active]);
 
-  const interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate(
+const ActionGroup = forwardRef<ActionGroupHandles, ActionGroupProps>(
+  (
     {
-      inputRange: [0, 1],
-      outputRange: [400, 0],
-    }
-  );
-  const interpolatedBackdropOpacityAnimation =
-    tranlateXAnimation.current.interpolate({
-      inputRange: [0, 1],
-      outputRange: [0, 0.4],
-    });
+      headerTitle,
+      onPress,
+      active,
+      style,
+      items,
+      testID,
+      fabTitle,
+      fabIcon = 'add',
+    },
+    ref
+  ) => {
+    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 interpolatedActionGroupOpacityAnimation =
-    tranlateXAnimation.current.interpolate({
+    const titleTranslateY = titleTranslateYValue.current.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, 1],
+      outputRange: [50, 0],
     });
 
-  return (
-    <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-      <StyledBackdrop
-        pointerEvents={active ? 'auto' : 'box-none'}
-        testID="back-drop"
-        style={{ opacity: interpolatedBackdropOpacityAnimation }}
-      />
-      <StyledActionGroupContainer
-        pointerEvents={active ? 'auto' : 'none'}
-        testID="action-group"
-        style={{
-          opacity: interpolatedActionGroupOpacityAnimation,
-          transform: [{ translateX: interpolatedTranlateXAnimation }],
-        }}
-      >
-        {!!headerTitle && (
-          <StyledHeaderText testID="header-text">
-            {headerTitle}
-          </StyledHeaderText>
-        )}
-        <ActionItemsListComponent items={items} />
-      </StyledActionGroupContainer>
-      <StyledFAB
-        testID="fab"
-        icon={fabIcon}
-        onPress={onPress}
-        animated
-        active={active}
-        title={fabTitle}
-      />
-    </StyledContainer>
-  );
-};
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        showFAB: () => fabRef.current?.show(),
+        collapseFAB: () => fabRef.current?.collapse(),
+        hideFAB: () => fabRef.current?.hide(),
+      }),
+      [fabRef]
+    );
+
+    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();
+    }, [active]);
+
+    const interpolatedBackdropOpacityAnimation =
+      tranlateXAnimation.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 0.4],
+      });
+
+    const interpolatedActionGroupOpacityAnimation =
+      tranlateXAnimation.current.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, 1],
+      });
+
+    return (
+      <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
+        <StyledBackdrop
+          pointerEvents={active ? 'auto' : 'box-none'}
+          testID="back-drop"
+          style={{ opacity: interpolatedBackdropOpacityAnimation }}
+        />
+        <StyledActionGroupContainer
+          pointerEvents={active ? 'auto' : 'none'}
+          testID="action-group"
+          style={{
+            opacity: interpolatedActionGroupOpacityAnimation,
+          }}
+        >
+          {!!headerTitle && (
+            <Animated.View
+              style={{ transform: [{ translateY: titleTranslateY }] }}
+            >
+              <StyledHeaderText testID="header-text">
+                {headerTitle}
+              </StyledHeaderText>
+            </Animated.View>
+          )}
+
+          <Box style={[style, { paddingBottom: 0 }]}>
+            {items?.map((itemProp, index) => (
+              <ActionItem
+                key={itemProp.key || `${itemProp.icon}_${itemProp.title}`}
+                {...itemProp}
+                index={active ? index : items.length - index}
+                active={active}
+              />
+            ))}
+          </Box>
+        </StyledActionGroupContainer>
+
+        <StyledFAB
+          testID="fab"
+          icon={fabIcon}
+          onPress={onPress}
+          animated
+          active={active}
+          title={fabTitle}
+          ref={fabRef}
+        />
+      </StyledContainer>
+    );
+  }
+);
+
+ActionGroup.displayName = 'FAB.ActionGroup';
 
 export default ActionGroup;

package/src/components/FAB/AnimatedFABIcon.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Platform, StyleSheet } from 'react-native';
-import { StyledFABIcon } from './StyledFAB';
+import { Animated, Platform, StyleSheet } from 'react-native';
 import type { IconProps } from '../Icon';
+import { StyledFABIcon } from './StyledFAB';
 
 const AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
 
@@ -14,11 +14,9 @@ const AnimatedFABIcon = ({ active, ...iconProps }: Props) => {
     new Animated.Value(active ? 1 : 0)
   );
   useEffect(() => {
-    const animation = Animated.timing(rotateAnimation.current, {
+    const animation = Animated.spring(rotateAnimation.current, {
       toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-      easing: Easing.inOut(Easing.ease),
-      duration: 300,
     });
 
     animation.start();

package/src/components/FAB/FAB.tsx

@@ -1,5 +1,13 @@
-import React from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import React, { forwardRef } from 'react';
+import {
+  LayoutAnimation,
+  LayoutAnimationConfig,
+  Platform,
+  StyleProp,
+  StyleSheet,
+  UIManager,
+  ViewStyle,
+} from 'react-native';
 import { useTheme } from '../../theme';
 import type { IconName } from '../Icon';
 import { AnimatedFABIcon } from './AnimatedFABIcon';
@@ -10,6 +18,18 @@ import {
   StyledIconContainer,
 } from './StyledFAB';
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+
+export type FABHandles = {
+  show: () => void;
+  collapse: () => void;
+  hide: () => void;
+};
+
 export interface FABProps {
   /**
    * Name of the Icon.
@@ -54,7 +74,6 @@ const IconOnlyContent = ({
 }: {
   icon: IconName;
   animated?: boolean;
-
   active?: boolean;
 }) => {
   if (animated) {
@@ -85,31 +104,92 @@ const IconWithTextContent = ({
     <StyledFABText>{title}</StyledFABText>
   </>
 );
-const FAB = ({
-  onPress,
-  title,
-  icon,
-  animated,
-  testID,
-  active,
-  style,
-}: FABProps): JSX.Element => {
-  const isIconOnly = !title;
-  const theme = useTheme();
-  return (
-    <StyledFAB
-      underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
-      onPress={onPress}
-      style={style}
-      testID={testID}
-    >
-      {isIconOnly ? (
-        <IconOnlyContent animated={animated} active={active} icon={icon} />
-      ) : (
-        <IconWithTextContent icon={icon} title={title} />
-      )}
-    </StyledFAB>
-  );
+
+const defaultAnimation: LayoutAnimationConfig = {
+  create: {
+    type: 'easeInEaseOut',
+    property: 'opacity',
+  },
+  update: { type: 'spring', springDamping: Platform.OS === 'ios' ? 0.7 : 1 },
+  duration: 400,
 };
 
+const FAB = forwardRef<FABHandles, FABProps>(
+  ({ onPress, title, icon, animated, testID, active, style }, ref) => {
+    const theme = useTheme();
+
+    const [displayState, setDisplayState] = React.useState({
+      hideTitle: false,
+      hideButton: false,
+    });
+
+    const [canAnimate, setCanAnimate] = React.useState(false);
+
+    const isIconOnly = displayState.hideTitle || active || !title;
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        show: () => {
+          setDisplayState({
+            hideButton: false,
+            hideTitle: false,
+          });
+        },
+        collapse: () => {
+          setDisplayState({
+            hideButton: false,
+            hideTitle: true,
+          });
+        },
+        hide: () => {
+          setDisplayState((previousState) => ({
+            ...previousState,
+            hideButton: true,
+          }));
+        },
+      }),
+      []
+    );
+
+    React.useEffect(() => {
+      if (canAnimate) {
+        LayoutAnimation.configureNext(defaultAnimation);
+      }
+    }, [isIconOnly, displayState.hideButton, canAnimate]);
+
+    const marginBottom = Number(StyleSheet.flatten(style)?.marginBottom) || 0;
+
+    return (
+      <StyledFAB
+        /** Add a small timeout before executing animation to prevent flakiness */
+        onLayout={() => setTimeout(() => setCanAnimate(true), 500)}
+        underlayColor={theme.__hd__.fab.colors.buttonPressedBackground}
+        onPress={onPress}
+        style={[
+          style,
+          {
+            bottom: displayState.hideButton
+              ? -(marginBottom + theme.__hd__.fab.sizes.height * 2)
+              : StyleSheet.flatten(style)?.bottom,
+          },
+        ]}
+        testID={testID}
+      >
+        {isIconOnly ? (
+          <IconOnlyContent
+            animated={animated}
+            active={active}
+            icon={active ? 'add' : icon}
+          />
+        ) : (
+          <IconWithTextContent icon={icon} title={title} />
+        )}
+      </StyledFAB>
+    );
+  }
+);
+
+FAB.displayName = 'FAB';
+
 export default FAB;

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

@@ -5,6 +5,7 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -30,9 +31,14 @@ exports[`FAB when animated is false renders StyledFABIcon 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Object {
-        "backgroundColor": "#001f23",
-      },
+      Array [
+        Object {
+          "backgroundColor": "#001f23",
+        },
+        Object {
+          "bottom": undefined,
+        },
+      ],
     ]
   }
 >
@@ -67,6 +73,7 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -92,9 +99,14 @@ exports[`FAB when animated is true renders animatedFABIcon 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Object {
-        "backgroundColor": "#001f23",
-      },
+      Array [
+        Object {
+          "backgroundColor": "#001f23",
+        },
+        Object {
+          "bottom": undefined,
+        },
+      ],
     ]
   }
 >
@@ -159,6 +171,7 @@ exports[`FAB when title has value renders correctly 1`] = `
   accessible={true}
   focusable={false}
   onClick={[Function]}
+  onLayout={[Function]}
   onResponderGrant={[Function]}
   onResponderMove={[Function]}
   onResponderRelease={[Function]}
@@ -184,9 +197,14 @@ exports[`FAB when title has value renders correctly 1`] = `
         "shadowOpacity": 0.12,
         "shadowRadius": 8,
       },
-      Object {
-        "backgroundColor": "#001f23",
-      },
+      Array [
+        Object {
+          "backgroundColor": "#001f23",
+        },
+        Object {
+          "bottom": undefined,
+        },
+      ],
     ]
   }
 >

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

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { createRef } from 'react';
 import { fireEvent } from '@testing-library/react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
-import { theme } from '../../../index';
+import { FABHandles, theme } from '../../../index';
 import FAB from '..';
 
 describe('FAB', () => {
@@ -66,4 +66,24 @@ describe('FAB', () => {
       expect(onPressSpy).toBeCalledTimes(1);
     });
   });
+
+  describe('usage with ref', () => {
+    it('allow controlling inner fab states by ref', () => {
+      const fabRef = createRef<FABHandles>();
+
+      const { queryByText } = renderWithTheme(
+        <FAB ref={fabRef} title="Shout out" icon="speaker" />
+      );
+
+      expect(queryByText('Shout out')).toBeDefined();
+      fabRef.current!.collapse();
+      expect(queryByText('Shout out')).toBeFalsy();
+
+      fabRef.current!.show();
+      expect(queryByText('Shout out')).toBeDefined();
+
+      fabRef.current!.hide();
+      expect(queryByText('Shout out')).toBeDefined();
+    });
+  });
 });

package/src/components/Select/MultiSelect/Option.tsx

@@ -26,6 +26,9 @@ const Option = ({
     suffix:
       selected === true ? (
         <Icon
+          testID={
+            typeof text === 'string' ? `selected-icon-${text}` : undefined
+          }
           icon="checkmark"
           intent={disabled ? 'disabled-text' : 'primary'}
           size="small"

package/src/components/Select/MultiSelect/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -85,6 +85,7 @@ exports[`Option renders correctly 1`] = `
           },
         ]
       }
+      testID="selected-icon-testOption"
       themeIntent="primary"
       themeSize="small"
     />

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -271,6 +271,7 @@ exports[`OptionList render isLoading correctly 1`] = `
                   },
                 ]
               }
+              testID="selected-icon-A1"
               themeIntent="primary"
               themeSize="small"
             />
@@ -1086,6 +1087,7 @@ exports[`OptionList renders correctly 1`] = `
                   },
                 ]
               }
+              testID="selected-icon-A1"
               themeIntent="primary"
               themeSize="small"
             />
@@ -1748,6 +1750,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                   },
                 ]
               }
+              testID="selected-icon-A1"
               themeIntent="primary"
               themeSize="small"
             />
@@ -2002,6 +2005,7 @@ exports[`OptionList trigger onPress correctly on changing selection 1`] = `
                   },
                 ]
               }
+              testID="selected-icon-B1"
               themeIntent="primary"
               themeSize="small"
             />
@@ -2437,6 +2441,7 @@ exports[`OptionList trigger onPress correctly on select additional value 1`] = `
                   },
                 ]
               }
+              testID="selected-icon-A1"
               themeIntent="primary"
               themeSize="small"
             />