@hero-design/rn 8.33.1 → 8.34.0

package/src/components/List/__tests__/__snapshots__/BasicListItem.spec.tsx.snap

@@ -80,10 +80,9 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       List item
     </Text>
@@ -95,16 +94,14 @@ exports[`BasicListItem when suffix and prefix are icon name renders correctly 1`
             "color": "#4d6265",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
-            "letterSpacing": 0.36,
+            "letterSpacing": 0.48,
             "lineHeight": 16,
           },
           undefined,
         ]
       }
-      themeFontSize="small"
       themeFontWeight="regular"
       themeIntent="subdued"
-      themeTypeface="neutral"
     >
       subtitle
     </Text>
@@ -218,10 +215,9 @@ exports[`BasicListItem when suffix and prefix are react element renders correctl
           undefined,
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="regular"
       themeIntent="body"
       themeTypeface="neutral"
+      themeVariant="regular"
     >
       List item
     </Text>
@@ -233,16 +229,14 @@ exports[`BasicListItem when suffix and prefix are react element renders correctl
             "color": "#4d6265",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 12,
-            "letterSpacing": 0.36,
+            "letterSpacing": 0.48,
             "lineHeight": 16,
           },
           undefined,
         ]
       }
-      themeFontSize="small"
       themeFontWeight="regular"
       themeIntent="subdued"
-      themeTypeface="neutral"
     >
       subtitle
     </Text>

package/src/components/List/__tests__/__snapshots__/ListItem.spec.tsx.snap

@@ -157,10 +157,9 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               undefined,
             ]
           }
-          themeFontSize="large"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Menu List
         </Text>
@@ -172,16 +171,14 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
                 "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
-                "letterSpacing": 0.36,
+                "letterSpacing": 0.48,
                 "lineHeight": 16,
               },
               undefined,
             ]
           }
-          themeFontSize="small"
           themeFontWeight="regular"
           themeIntent="subdued"
-          themeTypeface="neutral"
         >
           Got a common question?
         </Text>
@@ -240,17 +237,16 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Gross pay
         </Text>
@@ -261,17 +257,16 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           $1052.03
         </Text>
@@ -292,17 +287,16 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           Gross pay
         </Text>
@@ -313,17 +307,16 @@ exports[`ListItem renders correctly ListItem with children 1`] = `
               Object {
                 "color": "#001f23",
                 "fontFamily": "BeVietnamPro-Regular",
-                "fontSize": 14,
-                "letterSpacing": 0.42,
-                "lineHeight": 22,
+                "fontSize": 16,
+                "letterSpacing": 0.48,
+                "lineHeight": 24,
               },
               undefined,
             ]
           }
-          themeFontSize="medium"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           $1052.03
         </Text>
@@ -405,10 +398,9 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
               undefined,
             ]
           }
-          themeFontSize="large"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           List item
         </Text>
@@ -420,16 +412,14 @@ exports[`ListItem renders correctly ListItem with icon 1`] = `
                 "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
-                "letterSpacing": 0.36,
+                "letterSpacing": 0.48,
                 "lineHeight": 16,
               },
               undefined,
             ]
           }
-          themeFontSize="small"
           themeFontWeight="regular"
           themeIntent="subdued"
-          themeTypeface="neutral"
         >
           subtitle
         </Text>
@@ -550,10 +540,9 @@ exports[`ListItem renders correctly ListItem with leading status 1`] = `
               undefined,
             ]
           }
-          themeFontSize="large"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           03:00 PM - 9:00 PM
         </Text>
@@ -746,10 +735,9 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
               undefined,
             ]
           }
-          themeFontSize="large"
-          themeFontWeight="regular"
           themeIntent="body"
           themeTypeface="neutral"
+          themeVariant="regular"
         >
           List item
         </Text>
@@ -761,16 +749,14 @@ exports[`ListItem renders correctly ListItem with prefix suffix is React.Element
                 "color": "#4d6265",
                 "fontFamily": "BeVietnamPro-Regular",
                 "fontSize": 12,
-                "letterSpacing": 0.36,
+                "letterSpacing": 0.48,
                 "lineHeight": 16,
               },
               undefined,
             ]
           }
-          themeFontSize="small"
           themeFontWeight="regular"
           themeIntent="subdued"
-          themeTypeface="neutral"
         >
           subtitle
         </Text>

package/src/components/List/__tests__/__snapshots__/StyledBasicListItem.spec.tsx.snap

@@ -33,16 +33,15 @@ exports[`StyledListItemContainer renders correctly themeSelected false themeDisa
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     StyledListItemContainer
   </Text>
@@ -82,16 +81,15 @@ exports[`StyledListItemContainer renders correctly themeSelected false themeDisa
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     StyledListItemContainer
   </Text>
@@ -131,16 +129,15 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     StyledListItemContainer
   </Text>
@@ -180,16 +177,15 @@ exports[`StyledListItemContainer renders correctly themeSelected true themeDisab
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     StyledListItemContainer
   </Text>

package/src/components/List/__tests__/__snapshots__/StyledListItem.spec.tsx.snap

@@ -125,16 +125,15 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant ca
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     StyledListItemContainer
   </Text>
@@ -171,16 +170,15 @@ exports[`ListItemContainer renders correctly themeSelected false themeVariant fu
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     StyledListItemContainer
   </Text>
@@ -227,16 +225,15 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant car
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     StyledListItemContainer
   </Text>
@@ -273,16 +270,15 @@ exports[`ListItemContainer renders correctly themeSelected true themeVariant ful
           "color": "#001f23",
           "fontFamily": "BeVietnamPro-Regular",
           "fontSize": 14,
-          "letterSpacing": 0.42,
+          "letterSpacing": 0.48,
           "lineHeight": 22,
         },
         undefined,
       ]
     }
-    themeFontSize="medium"
-    themeFontWeight="regular"
     themeIntent="body"
     themeTypeface="neutral"
+    themeVariant="small"
   >
     StyledListItemContainer
   </Text>

package/src/components/Modal/ModalContentWrapper.tsx

@@ -0,0 +1,112 @@
+import React, { forwardRef } from 'react';
+import {
+  Animated,
+  Dimensions,
+  Easing,
+  Platform,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+
+type ModalContentWrapperProps = {
+  children: React.ReactElement;
+  visible?: boolean;
+  onShow?: () => void;
+  testID?: string;
+  animationType?: 'none' | 'slide' | 'fade';
+  style?: StyleProp<ViewStyle>;
+  animated?: boolean;
+};
+
+export type ModalContentWrapperHandler = {
+  hide: (callback?: () => void) => void;
+};
+
+const windowHeight = Dimensions.get('window').height;
+const defaultAnimationConfig = {
+  easing: Easing.inOut(Easing.cubic),
+  duration: 400,
+  useNativeDriver: Platform.OS !== 'web',
+};
+
+const ModalContentWrapper = forwardRef<
+  ModalContentWrapperHandler,
+  ModalContentWrapperProps
+>(
+  (
+    {
+      animationType,
+      children,
+      testID,
+      onShow,
+      style,
+      visible,
+      animated = true,
+    },
+    ref
+  ) => {
+    const animatedValue = React.useRef(new Animated.Value(0)).current;
+
+    const modalAnimation = animatedValue.interpolate(
+      animationType === 'fade'
+        ? {
+            inputRange: [0, 1],
+            outputRange: [0, 1],
+          }
+        : {
+            inputRange: [0, 1],
+            outputRange: [windowHeight, 0],
+          }
+    );
+
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        hide: (callback) => {
+          Animated.timing(animatedValue, {
+            toValue: 0,
+            ...defaultAnimationConfig,
+          }).start(callback);
+        },
+      }),
+      [animatedValue]
+    );
+
+    React.useEffect(() => {
+      // Hiding animation will be called from the modal component
+      if (visible) {
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          ...defaultAnimationConfig,
+          // Prevent animation when updating the modal content
+          duration: animated ? defaultAnimationConfig.duration : 0,
+        }).start(() => {
+          onShow?.();
+        });
+      }
+    }, [visible, animatedValue, onShow, animated]);
+
+    return (
+      <Animated.View
+        testID={testID}
+        style={[
+          style,
+          {
+            ...(animationType === 'fade' ? { opacity: modalAnimation } : {}),
+            ...(animationType === 'slide'
+              ? {
+                  transform: [{ translateY: modalAnimation }],
+                }
+              : {}),
+          },
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+);
+
+ModalContentWrapper.displayName = 'ModalContentWrapper';
+
+export default ModalContentWrapper;

package/src/components/Modal/ModalPresenter/ModalPresenter.tsx

@@ -0,0 +1,135 @@
+import React, { forwardRef, useRef } from 'react';
+import { Animated, StyleSheet, ViewProps } from 'react-native';
+import RootSiblings from 'react-native-root-siblings';
+import { useTheme } from '../../../theme';
+import Box from '../../Box';
+
+export type ModalPresenterHandles = {
+  animatedOut: (completion?: () => void) => void;
+};
+export type ModalDismissFunc = (onDismiss?: () => void) => void;
+export type ModalUpdateFunc = (content: React.ReactNode) => void;
+
+/**
+ * Modal handler is returned by `showModal` function.
+ */
+export type ModalHandler = {
+  /**
+   * Same `dismiss` function as in `ModalContentProps`.
+   */
+  dismiss: ModalDismissFunc;
+  /**
+   * Same `update` function as in `ModalContentProps`.
+   */
+  update: ModalUpdateFunc;
+};
+
+const ModalPresenter = forwardRef<ModalPresenterHandles, ViewProps>(
+  ({ style, children, ...props }, ref) => {
+    const animatedOpacity = useRef(new Animated.Value(0));
+    const theme = useTheme();
+
+    React.useEffect(() => {
+      Animated.spring(animatedOpacity.current, {
+        toValue: 1,
+        useNativeDriver: true,
+      }).start();
+    }, []);
+
+    React.useImperativeHandle(ref, () => ({
+      animatedOut: (completion?: () => void) => {
+        Animated.spring(animatedOpacity.current, {
+          toValue: 0,
+          useNativeDriver: true,
+        }).start(() => {
+          completion?.();
+        });
+      },
+    }));
+
+    return (
+      <Box style={StyleSheet.absoluteFill}>
+        <Animated.View
+          style={[
+            {
+              width: '100%',
+              height: '100%',
+              backgroundColor: `${theme.colors.overlayGlobalSurface}66`, // 66 = 40% opacity as suggested by the mobile color guidelines
+              justifyContent: 'center',
+              alignItems: 'center',
+              opacity: animatedOpacity.current,
+            },
+            style,
+          ]}
+          {...props}
+        >
+          {children}
+        </Animated.View>
+      </Box>
+    );
+  }
+);
+
+/**
+ * Present a modal on screen immediately.
+ *
+ * The new presented modal will be on top of existing modals if there are any.
+ *
+ * @param Content A component to be presented as a modal on screen.
+ * This component will be centered horizontally and vertically on screen with
+ * a semitransparent black overlay underneath.
+ * @param contentProps Props for this modal component.
+ * @returns A `ModalHandler` you can use to dismiss the modal.
+ */
+
+export const showModal = (content: React.ReactNode): ModalHandler => {
+  let ref: ModalPresenterHandles | null = null;
+  let rootSiblings: RootSiblings | null = null;
+
+  const dismiss: ModalDismissFunc = (onDismiss) => {
+    if (rootSiblings) {
+      const cleanup = () => {
+        rootSiblings?.destroy();
+        rootSiblings = null;
+        ref = null;
+        onDismiss?.();
+      };
+
+      if (ref) {
+        ref.animatedOut(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+  };
+
+  const update: ModalUpdateFunc = (newContent) => {
+    rootSiblings?.update(
+      <ModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {newContent}
+      </ModalPresenter>
+    );
+  };
+
+  rootSiblings = new RootSiblings(
+    (
+      <ModalPresenter
+        ref={(_ref) => {
+          ref = _ref;
+        }}
+      >
+        {content}
+      </ModalPresenter>
+    )
+  );
+
+  return { dismiss, update };
+};
+
+ModalPresenter.displayName = 'ModalPresenter';
+
+export default ModalPresenter;

package/src/components/Modal/ModalPresenter/index.tsx

@@ -0,0 +1,9 @@
+import {
+  ModalDismissFunc,
+  ModalHandler,
+  showModal,
+  ModalPresenterHandles,
+} from './ModalPresenter';
+
+export type { ModalDismissFunc, ModalHandler, ModalPresenterHandles };
+export { showModal };

package/src/components/Modal/ModalProvider.tsx

@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react';
+import { RootSiblingParent } from 'react-native-root-siblings';
+
+const ModalProvider = ({ children }: { children: ReactNode }) => {
+  return <RootSiblingParent>{children}</RootSiblingParent>;
+};
+
+export default ModalProvider;

package/src/components/Modal/__tests__/ModalContentWrapper.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import renderWithTheme from '../../../testHelpers/renderWithTheme';
+import ModalContentWrapper from '../ModalContentWrapper';
+import Typography from '../../Typography';
+
+describe('ModalContentWrapper', () => {
+  it('should render correctly', () => {
+    const wrapper = renderWithTheme(
+      <ModalContentWrapper
+        testID="modal-content-wrapper"
+        style={{ backgroundColor: 'blue' }}
+        visible
+      >
+        <Typography.Text>Modal content</Typography.Text>
+      </ModalContentWrapper>
+    );
+
+    expect(wrapper.toJSON()).toMatchSnapshot();
+    expect(wrapper.getByText('Modal content')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-content-wrapper')).toBeTruthy();
+    expect(wrapper.getByTestId('modal-content-wrapper')).toHaveStyle({
+      backgroundColor: 'blue',
+    });
+  });
+});