@hero-design/rn 8.27.1 → 8.27.2

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

@@ -10,7 +10,7 @@ describe('ActionGroup', () => {
     ${true}
     ${false}
   `('has active $active', ({ active }) => {
-    const { toJSON, queryByTestId, queryByText } = renderWithTheme(
+    const { toJSON, getByTestId, getByText } = renderWithTheme(
       <ActionGroup
         fabTitle="Shout out"
         active={active}
@@ -39,19 +39,25 @@ describe('ActionGroup', () => {
 
     expect(toJSON()).toMatchSnapshot();
 
-    expect(queryByText('What would you like to create?')).toBeDefined();
-    expect(queryByText('Shout out')).toBeDefined();
-    expect(queryByTestId('speaker-action-item')).toBeDefined();
-    expect(queryByTestId('target-action-item')).toBeDefined();
-    expect(queryByTestId('plane-action-item')).toBeDefined();
-    expect(queryByTestId('health-bag-action-item')).toBeDefined();
+    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(queryByTestId('action-group')).toHaveStyle({
+      expect(getByTestId('action-group')).toHaveStyle({
         transform: [{ translateX: 0 }],
       });
-      expect(queryByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'auto');
+    } else {
+      // verify action group disappears
+      expect(getByTestId('action-group')).toHaveStyle({
+        transform: [{ translateX: 400 }],
+      });
+      expect(getByTestId('back-drop')).toHaveProp('pointerEvents', 'box-none');
     }
   });
 

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

@@ -1,18 +1,16 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
+import { Animated, Easing, Platform, View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { Animated, Easing, Modal, Platform, View } from 'react-native';
-import { useTheme } from '../../../theme';
-import type { IconName } from '../../Icon';
-import type { ActionItemProps } from './ActionItem';
 import ActionItem from './ActionItem';
 import {
-  StyledActionGroupContainer,
   StyledBackdrop,
   StyledContainer,
   StyledFAB,
   StyledHeaderText,
-  StyledModalView,
+  StyledActionGroupContainer,
 } from './StyledActionGroup';
+import type { IconName } from '../../Icon';
+import type { ActionItemProps } from './ActionItem';
 
 type ActionItemsContainerProps = {
   style?: StyleProp<ViewStyle>;
@@ -76,7 +74,6 @@ export interface ActionGroupProps {
 
   testID?: string;
 }
-
 const ActionGroup = ({
   headerTitle,
   onPress,
@@ -87,48 +84,18 @@ const ActionGroup = ({
   fabTitle,
   fabIcon = 'add',
 }: ActionGroupProps) => {
-  const theme = useTheme();
-  // Internal state to control the animation of the action group
-  const [visible, setVisibility] = useState(active);
   const tranlateXAnimation = useRef<Animated.Value>(
     new Animated.Value(active ? 1 : 0)
   );
-
-  useEffect(() => {
-    if (active && !visible) {
-      setVisibility(true);
-    }
-  }, [active]);
-
   useEffect(() => {
-    if (active) {
-      const animation = Animated.timing(tranlateXAnimation.current, {
-        toValue: 1,
-        useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
-        easing: Easing.inOut(Easing.cubic),
-      });
-
-      animation.start();
-    }
-  }, [active]);
-
-  //  Make sure the animation finishes running before closing the modal
-  const onInternalFABPress = useCallback(() => {
-    if (!onPress) {
-      return;
-    }
-
     const animation = Animated.timing(tranlateXAnimation.current, {
-      toValue: 0,
+      toValue: active ? 1 : 0,
       useNativeDriver: Platform.OS === 'ios' || Platform.OS === 'android',
       easing: Easing.inOut(Easing.cubic),
     });
 
-    animation.start(() => {
-      setVisibility(false);
-      onPress();
-    });
-  }, [visible]);
+    animation.start();
+  }, [active]);
 
   const interpolatedTranlateXAnimation = tranlateXAnimation.current.interpolate(
     {
@@ -150,63 +117,34 @@ const ActionGroup = ({
 
   return (
     <StyledContainer testID={testID} pointerEvents="box-none" style={style}>
-      <Modal
-        visible={visible}
-        transparent
-        statusBarTranslucent
-        animationType="none"
+      <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 }],
+        }}
       >
-        <StyledBackdrop
-          style={{
-            opacity: interpolatedBackdropOpacityAnimation,
-          }}
-          testID="back-drop"
-          pointerEvents={active ? 'auto' : 'box-none'}
-        />
-
-        <StyledModalView>
-          <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>
-
-          {active && (
-            <StyledFAB
-              testID="fab"
-              icon={fabIcon}
-              onPress={onInternalFABPress}
-              animated
-              active={active}
-              title={fabTitle}
-              style={{
-                marginBottom: theme.__hd__.fab.space.internalFABMarginBottom,
-              }}
-            />
-          )}
-        </StyledModalView>
-      </Modal>
-
-      {!active && (
-        <StyledFAB
-          testID="fab"
-          icon={fabIcon}
-          onPress={onPress}
-          animated
-          active={active}
-          title={fabTitle}
-        />
-      )}
+        {!!headerTitle && (
+          <StyledHeaderText testID="header-text">
+            {headerTitle}
+          </StyledHeaderText>
+        )}
+        <ActionItemsListComponent items={items} />
+      </StyledActionGroupContainer>
+      <StyledFAB
+        testID="fab"
+        icon={fabIcon}
+        onPress={onPress}
+        animated
+        active={active}
+        title={fabTitle}
+      />
     </StyledContainer>
   );
 };

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

@@ -187,14 +187,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1587,14 +1587,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1820,14 +1820,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -3412,14 +3412,14 @@ Array [
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 16,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 testID="input-suffix"
                 themeIntent="text"
-                themeSize="xsmall"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -3646,14 +3646,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View

package/src/components/Select/SingleSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -186,14 +186,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1509,14 +1509,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -1742,14 +1742,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View
@@ -3203,14 +3203,14 @@ Array [
                   Array [
                     Object {
                       "color": "#001f23",
-                      "fontSize": 16,
+                      "fontSize": 24,
                     },
                     undefined,
                   ]
                 }
                 testID="input-suffix"
                 themeIntent="text"
-                themeSize="xsmall"
+                themeSize="medium"
               />
             </View>
           </View>
@@ -3437,14 +3437,14 @@ Array [
                 Array [
                   Object {
                     "color": "#001f23",
-                    "fontSize": 16,
+                    "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="input-suffix"
               themeIntent="text"
-              themeSize="xsmall"
+              themeSize="medium"
             />
           </View>
           <View

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

@@ -1541,14 +1541,14 @@ exports[`TextInput filled renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -2006,14 +2006,14 @@ exports[`TextInput idle renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -2418,14 +2418,14 @@ exports[`TextInput loading renders correctly 1`] = `
           Array [
             Object {
               "color": "#001f23",
-              "fontSize": 16,
+              "fontSize": 24,
             },
             undefined,
           ]
         }
         testID="input-suffix"
         themeIntent="text"
-        themeSize="xsmall"
+        themeSize="medium"
       />
     </View>
   </View>
@@ -3492,14 +3492,14 @@ exports[`TextInput readonly renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View
@@ -3913,14 +3913,14 @@ exports[`TextInput required renders correctly 1`] = `
         Array [
           Object {
             "color": "#001f23",
-            "fontSize": 16,
+            "fontSize": 24,
           },
           undefined,
         ]
       }
       testID="input-suffix"
       themeIntent="text"
-      themeSize="xsmall"
+      themeSize="medium"
     />
   </View>
   <View

package/src/components/TextInput/index.tsx

@@ -373,7 +373,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
               testID="input-suffix"
               icon={actualSuffix}
               spin={actualSuffix === 'loading'}
-              size="xsmall"
+              size="medium"
             />
           ) : (
             suffix

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -424,14 +424,14 @@ exports[`TimePickerAndroid renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -424,14 +424,14 @@ exports[`TimePickerIOS renders correctly 1`] = `
             Array [
               Object {
                 "color": "#001f23",
-                "fontSize": 16,
+                "fontSize": 24,
               },
               undefined,
             ]
           }
           testID="input-suffix"
           themeIntent="text"
-          themeSize="xsmall"
+          themeSize="medium"
         />
       </View>
       <View

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

@@ -512,7 +512,6 @@ Object {
         "containerPadding": 20,
         "headerTextMarginBottom": 24,
         "headerTextMarginRight": 24,
-        "internalFABMarginBottom": 24,
         "titleMarginHorizontal": 8,
       },
     },

package/src/theme/components/fab.ts

@@ -58,7 +58,6 @@ const getFABTheme = (theme: GlobalTheme) => {
     headerTextMarginBottom: theme.space.large,
     containerPadding: theme.space.large - theme.space.xsmall,
     titleMarginHorizontal: theme.space.small,
-    internalFABMarginBottom: theme.space.large,
   };
 
   const radii = {

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

@@ -28,10 +28,4 @@ declare const StyledHeaderText: import("@emotion/native").StyledComponent<TextPr
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;
-declare const StyledModalView: import("@emotion/native").StyledComponent<ViewProps & {
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: import("react").ElementType<any> | undefined;
-}, {}, {
-    ref?: import("react").Ref<View> | undefined;
-}>;
-export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, StyledModalView, };
+export { StyledHeaderText, StyledBackdrop, StyledContainer, StyledActionGroupContainer, StyledFAB, };

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

@@ -57,7 +57,6 @@ declare const getFABTheme: (theme: GlobalTheme) => {
         headerTextMarginBottom: number;
         containerPadding: number;
         titleMarginHorizontal: number;
-        internalFABMarginBottom: number;
     };
 };
 export default getFABTheme;