@hero-design/rn 8.33.1 → 8.34.0

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarGroup.spec.tsx.snap

@@ -81,7 +81,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
               "color": "#401960",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             Array [
@@ -92,10 +92,9 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
             ],
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="primary"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Discard
       </Text>
@@ -167,7 +166,7 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
               "color": "#401960",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             Array [
@@ -178,10 +177,9 @@ exports[`ToolbarGroup renders correctly with when align is center 1`] = `
             ],
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="primary"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Print
       </Text>
@@ -271,7 +269,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
               "color": "#401960",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             Array [
@@ -282,10 +280,9 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
             ],
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="primary"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Discard
       </Text>
@@ -357,7 +354,7 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
               "color": "#401960",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             Array [
@@ -368,10 +365,9 @@ exports[`ToolbarGroup renders correctly with when align is left 1`] = `
             ],
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="primary"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Print
       </Text>
@@ -461,7 +457,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
               "color": "#401960",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             Array [
@@ -472,10 +468,9 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
             ],
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="primary"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Discard
       </Text>
@@ -547,7 +542,7 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
               "color": "#401960",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 16,
-              "letterSpacing": 0.48,
+              "letterSpacing": 0.24,
               "lineHeight": 24,
             },
             Array [
@@ -558,10 +553,9 @@ exports[`ToolbarGroup renders correctly with when align is right 1`] = `
             ],
           ]
         }
-        themeFontSize="large"
-        themeFontWeight="semi-bold"
         themeIntent="primary"
         themeTypeface="neutral"
+        themeVariant="regular-bold"
       >
         Print
       </Text>

package/src/components/Toolbar/__tests__/__snapshots__/ToolbarItem.spec.tsx.snap

@@ -67,7 +67,7 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
             "color": "#4d6265",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 24,
           },
           Array [
@@ -78,10 +78,9 @@ exports[`ToolbarItems renders correctly when disabled 1`] = `
           ],
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="semi-bold"
       themeIntent="subdued"
       themeTypeface="neutral"
+      themeVariant="regular-bold"
     >
       Action
     </Text>
@@ -126,16 +125,15 @@ exports[`ToolbarItems renders correctly when intent is danger, icon is undefined
           "color": "#f46363",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
-          "letterSpacing": 0.48,
+          "letterSpacing": 0.24,
           "lineHeight": 24,
         },
         undefined,
       ]
     }
-    themeFontSize="large"
-    themeFontWeight="semi-bold"
     themeIntent="danger"
     themeTypeface="neutral"
+    themeVariant="regular-bold"
   >
     Discard
   </Text>
@@ -179,16 +177,15 @@ exports[`ToolbarItems renders correctly when intent is info, icon is undefined,
           "color": "#4568fb",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
-          "letterSpacing": 0.48,
+          "letterSpacing": 0.24,
           "lineHeight": 24,
         },
         undefined,
       ]
     }
-    themeFontSize="large"
-    themeFontWeight="semi-bold"
     themeIntent="info"
     themeTypeface="neutral"
+    themeVariant="regular-bold"
   >
     Save
   </Text>
@@ -262,7 +259,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
             "color": "#401960",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 24,
           },
           Array [
@@ -273,10 +270,9 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
           ],
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="semi-bold"
       themeIntent="primary"
       themeTypeface="neutral"
+      themeVariant="regular-bold"
     >
       Try again
     </Text>
@@ -351,7 +347,7 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
             "color": "#4d6265",
             "fontFamily": "BeVietnamPro-SemiBold",
             "fontSize": 16,
-            "letterSpacing": 0.48,
+            "letterSpacing": 0.24,
             "lineHeight": 24,
           },
           Array [
@@ -362,10 +358,9 @@ exports[`ToolbarItems renders correctly when intent is primary, icon is ai-outli
           ],
         ]
       }
-      themeFontSize="large"
-      themeFontWeight="semi-bold"
       themeIntent="subdued"
       themeTypeface="neutral"
+      themeVariant="regular-bold"
     >
       Try again
     </Text>
@@ -472,16 +467,15 @@ exports[`ToolbarItems renders correctly when intent is success, icon is undefine
           "color": "#5ace7d",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
-          "letterSpacing": 0.48,
+          "letterSpacing": 0.24,
           "lineHeight": 24,
         },
         undefined,
       ]
     }
-    themeFontSize="large"
-    themeFontWeight="semi-bold"
     themeIntent="success"
     themeTypeface="neutral"
+    themeVariant="regular-bold"
   >
     Save
   </Text>
@@ -525,16 +519,15 @@ exports[`ToolbarItems renders correctly when intent is warning, icon is undefine
           "color": "#ffbe71",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 16,
-          "letterSpacing": 0.48,
+          "letterSpacing": 0.24,
           "lineHeight": 24,
         },
         undefined,
       ]
     }
-    themeFontSize="large"
-    themeFontWeight="semi-bold"
     themeIntent="warning"
     themeTypeface="neutral"
+    themeVariant="regular-bold"
   >
     Warning
   </Text>

package/src/index.ts

@@ -37,6 +37,7 @@ import FAB from './components/FAB';
 import Icon from './components/Icon';
 import Image from './components/Image';
 import List from './components/List';
+import Modal from './components/Modal';
 import PinInput from './components/PinInput';
 import Progress from './components/Progress';
 import Slider from './components/Slider';
@@ -99,6 +100,7 @@ export {
   Icon,
   Image,
   List,
+  Modal,
   PinInput,
   Progress,
   PageControl,

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

@@ -223,6 +223,9 @@ Object {
         "default": "BeVietnamPro-SemiBold",
         "utility": "BeVietnamPro-Regular",
       },
+      "lineHeights": Object {
+        "titleOfTextVariant": 22,
+      },
       "radii": Object {
         "default": 32,
         "text": 4,
@@ -1015,6 +1018,7 @@ Object {
         "containerMarginTop": 8,
         "containerPadding": 16,
         "errorAndHelpTextContainerPaddingLeft": 16,
+        "errorAndHelpTextContainerPaddingTop": 2,
         "errorContainerMarginRight": 4,
         "errorMarginLeft": 4,
         "inputHorizontalMargin": 8,

package/src/theme/components/badge.ts

@@ -39,4 +39,19 @@ const getBadgeTheme = (theme: GlobalTheme) => {
   return { colors, fonts, fontSizes, sizes, space, lineHeights };
 };
 
+type GetBadgeThemeReturnType = ReturnType<typeof getBadgeTheme>;
+export interface BadgeThemeType extends GetBadgeThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetBadgeThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetBadgeThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetBadgeThemeReturnType['lineHeights'];
+}
 export default getBadgeTheme;

package/src/theme/components/button.ts

@@ -58,7 +58,12 @@ const getButtonTheme = (theme: GlobalTheme) => {
     },
   };
 
+  const lineHeights = {
+    titleOfTextVariant: theme.lineHeights.medium,
+  };
+
   return {
+    lineHeights,
     borderWidth,
     fonts,
     fontSize,
@@ -69,4 +74,15 @@ const getButtonTheme = (theme: GlobalTheme) => {
   };
 };
 
+type GetButtonThemeReturnType = ReturnType<typeof getButtonTheme>;
+export interface ButtonThemeType extends GetButtonThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetButtonThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSize: GetButtonThemeReturnType['fontSize'];
+}
 export default getButtonTheme;

package/src/theme/components/carousel.ts

@@ -27,4 +27,19 @@ const getCarouselTheme = (theme: GlobalTheme) => {
   return { space, fonts, fontSizes, lineHeights };
 };
 
+type GetCarouselThemeReturnType = ReturnType<typeof getCarouselTheme>;
+export interface CarouselThemeType extends GetCarouselThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetCarouselThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetCarouselThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetCarouselThemeReturnType['lineHeights'];
+}
 export default getCarouselTheme;

package/src/theme/components/empty.ts

@@ -31,4 +31,16 @@ const getEmptyTheme = (theme: GlobalTheme) => {
   return { fontSizes, colors, sizes, space, fonts };
 };
 
+type GetEmptyThemeReturnType = ReturnType<typeof getEmptyTheme>;
+export interface EmptyThemeType extends GetEmptyThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetEmptyThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetEmptyThemeReturnType['fontSizes'];
+}
+
 export default getEmptyTheme;

package/src/theme/components/error.ts

@@ -42,4 +42,20 @@ const getErrorTheme = (theme: GlobalTheme) => {
   return { fontSizes, colors, sizes, space, fonts, lineHeight };
 };
 
+type GetErrorThemeReturnType = ReturnType<typeof getErrorTheme>;
+export interface ErrorThemeType extends GetErrorThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetErrorThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetErrorThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeight: GetErrorThemeReturnType['lineHeight'];
+}
+
 export default getErrorTheme;

package/src/theme/components/fab.ts

@@ -75,5 +75,16 @@ const getFABTheme = (theme: GlobalTheme) => {
     space,
   };
 };
+type GetFABThemeReturnType = ReturnType<typeof getFABTheme>;
+export interface FABThemeType extends GetFABThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetFABThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetFABThemeReturnType['fontSizes'];
+}
 
 export default getFABTheme;

package/src/theme/components/pinInput.ts

@@ -54,5 +54,20 @@ const getPinInputTheme = (theme: GlobalTheme) => {
     radii,
   };
 };
+type GetPinInputThemeReturnType = ReturnType<typeof getPinInputTheme>;
+export interface PinInputThemeType extends GetPinInputThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetPinInputThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetPinInputThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetPinInputThemeReturnType['lineHeights'];
+}
 
 export default getPinInputTheme;

package/src/theme/components/success.ts

@@ -37,4 +37,16 @@ const getSuccessTheme = (theme: GlobalTheme) => {
   return { fontSizes, colors, sizes, space, fonts };
 };
 
+type GetSuccessThemeReturnType = ReturnType<typeof getSuccessTheme>;
+export interface SuccessThemeType extends GetSuccessThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetSuccessThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetSuccessThemeReturnType['fontSizes'];
+}
+
 export default getSuccessTheme;

package/src/theme/components/tag.ts

@@ -44,4 +44,20 @@ const getTagTheme = (theme: GlobalTheme) => {
   return { borderWidths, colors, fonts, fontSizes, space, radii, lineHeights };
 };
 
+type GetTagThemeReturnType = ReturnType<typeof getTagTheme>;
+export interface TagThemeType extends GetTagThemeReturnType {
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fonts: GetTagThemeReturnType['fonts'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  fontSizes: GetTagThemeReturnType['fontSizes'];
+  /**
+   * @deprecated will be removed in v9
+   * */
+  lineHeights: GetTagThemeReturnType['lineHeights'];
+}
+
 export default getTagTheme;

package/src/theme/components/textInput.ts

@@ -56,6 +56,7 @@ const getTextInputTheme = (theme: GlobalTheme) => {
     errorAndHelpTextContainerPaddingLeft: theme.space.medium,
     containerMarginTop: theme.space.small,
     labelInsideTextInputMarginTop: -theme.space.xxsmall,
+    errorAndHelpTextContainerPaddingTop: theme.space.xxsmall,
   };
 
   const fonts = {

package/src/theme/getTheme.ts

@@ -4,27 +4,27 @@ import getAccordionTheme from './components/accordion';
 import getAlertTheme from './components/alert';
 import getAttachmentTheme from './components/attachment';
 import getAvatarTheme from './components/avatar';
-import getBadgeTheme from './components/badge';
+import getBadgeTheme, { BadgeThemeType } from './components/badge';
 import getBottomNavigationTheme from './components/bottomNavigation';
 import getBottomSheetTheme from './components/bottomSheet';
-import getButtonTheme from './components/button';
+import getButtonTheme, { ButtonThemeType } from './components/button';
 import getCalendarTheme from './components/calendar';
 import getCardTheme from './components/card';
-import getCarouselTheme from './components/carousel';
+import getCarouselTheme, { CarouselThemeType } from './components/carousel';
 import getCardCarouselTheme from './components/cardCarousel';
 import getCheckboxTheme from './components/checkbox';
 import getContentNavigatorTheme from './components/contentNavigator';
 import getDatePickerTheme from './components/datePicker';
 import getDividerTheme from './components/divider';
 import getDrawerTheme from './components/drawer';
-import getEmptyTheme from './components/empty';
-import getErrorTheme from './components/error';
-import getFABTheme from './components/fab';
+import getEmptyTheme, { EmptyThemeType } from './components/empty';
+import getErrorTheme, { ErrorThemeType } from './components/error';
+import getFABTheme, { FABThemeType } from './components/fab';
 import getIconTheme from './components/icon';
 import getImageTheme from './components/image';
 import getListTheme from './components/list';
 import getPageControlTheme from './components/pageControl';
-import getPinInputTheme from './components/pinInput';
+import getPinInputTheme, { PinInputThemeType } from './components/pinInput';
 import getProgressTheme from './components/progress';
 import getRadioTheme from './components/radio';
 import getRateTheme from './components/rate';
@@ -35,11 +35,11 @@ import getSelectTheme from './components/select';
 import getSkeletonTheme from './components/skeleton';
 import getSliderTheme from './components/slider';
 import getSpinnerTheme from './components/spinner';
-import getSuccessTheme from './components/success';
+import getSuccessTheme, { SuccessThemeType } from './components/success';
 import getSwipeableTheme from './components/swipeable';
 import getSwitchTheme from './components/switch';
 import getTabsTheme from './components/tabs';
-import getTagTheme from './components/tag';
+import getTagTheme, { TagThemeType } from './components/tag';
 import getTextInputTheme from './components/textInput';
 import getTimePickerTheme from './components/timePicker';
 import getToastTheme from './components/toast';
@@ -54,27 +54,27 @@ type Theme = GlobalTheme & {
     alert: ReturnType<typeof getAlertTheme>;
     attachment: ReturnType<typeof getAttachmentTheme>;
     avatar: ReturnType<typeof getAvatarTheme>;
-    badge: ReturnType<typeof getBadgeTheme>;
+    badge: BadgeThemeType;
     bottomNavigation: ReturnType<typeof getBottomNavigationTheme>;
     bottomSheet: ReturnType<typeof getBottomSheetTheme>;
-    button: ReturnType<typeof getButtonTheme>;
+    button: ButtonThemeType;
     calendar: ReturnType<typeof getCalendarTheme>;
     card: ReturnType<typeof getCardTheme>;
-    carousel: ReturnType<typeof getCarouselTheme>;
+    carousel: CarouselThemeType;
     cardCarousel: ReturnType<typeof getCardCarouselTheme>;
     checkbox: ReturnType<typeof getCheckboxTheme>;
     contentNavigator: ReturnType<typeof getContentNavigatorTheme>;
     datePicker: ReturnType<typeof getDatePickerTheme>;
     divider: ReturnType<typeof getDividerTheme>;
     drawer: ReturnType<typeof getDrawerTheme>;
-    empty: ReturnType<typeof getEmptyTheme>;
-    error: ReturnType<typeof getErrorTheme>;
-    fab: ReturnType<typeof getFABTheme>;
+    empty: EmptyThemeType;
+    error: ErrorThemeType;
+    fab: FABThemeType;
     icon: ReturnType<typeof getIconTheme>;
     image: ReturnType<typeof getImageTheme>;
     list: ReturnType<typeof getListTheme>;
     pageControl: ReturnType<typeof getPageControlTheme>;
-    pinInput: ReturnType<typeof getPinInputTheme>;
+    pinInput: PinInputThemeType;
     progress: ReturnType<typeof getProgressTheme>;
     radio: ReturnType<typeof getRadioTheme>;
     rate: ReturnType<typeof getRateTheme>;
@@ -85,11 +85,11 @@ type Theme = GlobalTheme & {
     skeleton: ReturnType<typeof getSkeletonTheme>;
     slider: ReturnType<typeof getSliderTheme>;
     spinner: ReturnType<typeof getSpinnerTheme>;
-    success: ReturnType<typeof getSuccessTheme>;
+    success: SuccessThemeType;
     swipeable: ReturnType<typeof getSwipeableTheme>;
     switch: ReturnType<typeof getSwitchTheme>;
     tabs: ReturnType<typeof getTabsTheme>;
-    tag: ReturnType<typeof getTagTheme>;
+    tag: TagThemeType;
     textInput: ReturnType<typeof getTextInputTheme>;
     timePicker: ReturnType<typeof getTimePickerTheme>;
     toast: ReturnType<typeof getToastTheme>;

package/testUtils/setup.tsx

@@ -107,4 +107,28 @@ jest.mock('react-native-gesture-handler', () => {
   };
 });
 
+jest.mock('react-native/Libraries/Utilities/BackHandler', () => {
+  return jest.requireActual(
+    'react-native/Libraries/Utilities/__mocks__/BackHandler.js',
+  );
+});
+
+jest.mock('react-native-root-siblings', () => {
+  const React = jest.requireActual('react');
+
+  class RootSiblingsManager extends React.Component {
+    constructor(props) {
+      super(props);
+    }
+    render() {
+      return React.createElement('RootSiblingsManager', this.props, this.props.children);
+    }
+  }
+
+  return {
+    __esModule: true,
+    default: RootSiblingsManager,
+  };
+});
+
 export {};

package/types/components/Badge/StyledBadge.d.ts

@@ -11,7 +11,7 @@ declare const StyledView: import("@emotion/native").StyledComponent<Animated.Ani
     themeIntent: ThemeIntent;
     themePadding: ThemePadding;
 }, {}, {}>;
-declare const StyledText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;

package/types/components/BottomNavigation/StyledBottomNavigation.d.ts

@@ -45,7 +45,7 @@ declare const BottomBarItem: import("@emotion/native").StyledComponent<import("r
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../..").TextProps & {
+declare const StyledBottomBarText: import("@emotion/native").StyledComponent<import("../Typography/Caption").CaptionProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {}>;