@hero-design/rn 8.113.0 → 8.114.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.113.0",
+  "version": "8.114.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -10,7 +10,7 @@
     "type-check": "tsc --noEmit",
     "test": "jest --runInBand",
     "test:watch": "jest --runInBand --watch",
-    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage && cat ./coverage/lcov.info",
+    "test:ci": "jest --c=jest-ci.config.js --i --logHeapUsage --coverage",
     "build:js": "rollup -c",
     "build:types": "tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json",
     "build": "yarn build:js && yarn build:types",
@@ -69,7 +69,7 @@
     "@rollup/plugin-typescript": "^12.1.1",
     "@testing-library/jest-native": "^5.4.2",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/react-native": "^9.1.0",
+    "@testing-library/react-native": "^13.0.0",
     "@types/d3": "^7.4.3",
     "@types/events": "^3.0.3",
     "@types/jest": "^29.5.3",
@@ -94,7 +94,7 @@
     "react-native-svg": "15.8.0",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "13.10.3",
-    "react-test-renderer": "18.2.0",
+    "react-test-renderer": "18.3.1",
     "rollup": "^4.24.3",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-flow": "^1.1.1",

package/src/components/Alert/index.tsx

@@ -115,7 +115,7 @@ const Alert = ({
   style,
   testID,
   actionLabel,
-}: AlertProps): JSX.Element => {
+}: AlertProps): ReactElement => {
   useDeprecation(
     `Alert's notification intent is deprecated and will be removed in the next major release. Please use other intents instead.`,
     intent === 'notification'

package/src/components/Badge/Count.tsx

@@ -1,7 +1,7 @@
 import { View } from 'react-native';
 import React, { useMemo } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { StyledCount, StyledCountText } from './StyledBadge';
 import { DEFAULT_MAX_NUMBER } from './constants';
 
@@ -40,7 +40,7 @@ const Status = ({
   testID,
   content: originalContent,
   ...nativeProps
-}: CountProps): JSX.Element => {
+}: CountProps): ReactElement => {
   const content = useMemo(() => {
     return originalContent > max ? `${max}+` : String(originalContent);
   }, [originalContent, max]);

package/src/components/Badge/Status.tsx

@@ -1,7 +1,7 @@
 import { View, Animated } from 'react-native';
 import React from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import { StyledStatus } from './StyledBadge';
 
 export interface StatusProps extends ViewProps {
@@ -34,7 +34,7 @@ const Status = ({
   style,
   testID,
   ...nativeProps
-}: StatusProps): JSX.Element => {
+}: StatusProps): ReactElement => {
   const { current: opacity } = React.useRef<Animated.Value>(
     new Animated.Value(visible ? 1 : 0)
   );

package/src/components/Badge/index.tsx

@@ -1,4 +1,5 @@
 import { Animated } from 'react-native';
+import type { ReactElement } from 'react';
 import React, { useMemo } from 'react';
 import { StyledView, StyledText, StyledIcon } from './StyledBadge';
 import BadgeStatus from './Status';
@@ -22,7 +23,7 @@ const Badge = ({
   variant = 'filled',
   icon,
   ...nativeProps
-}: BadgeProps): JSX.Element => {
+}: BadgeProps): ReactElement => {
   const { current: opacity } = React.useRef<Animated.Value>(
     new Animated.Value(visible ? 1 : 0)
   );

package/src/components/BottomNavigation/StyledBottomNavigation.tsx

@@ -43,7 +43,7 @@ const BottomBarItem = styled(View)({
   alignItems: 'center',
 });
 
-const StyledBottomBarText = styled(Typography.Caption)(({ theme }) => ({
+const StyledBottomBarText = styled(Typography.Label)(({ theme }) => ({
   marginTop: theme.__hd__.bottomNavigation.space.titleMarginTop,
 }));
 

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

@@ -158,20 +158,19 @@ exports[`BottomNavigation renders correctly 1`] = `
                 [
                   {
                     "color": "#401960",
-                    "fontFamily": "BeVietnamPro-SemiBold",
-                    "fontSize": 12,
-                    "letterSpacing": 0.24,
-                    "lineHeight": 16,
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 10,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                   },
                   [
                     {
-                      "marginTop": 4,
+                      "marginTop": 2,
                     },
                     undefined,
                   ],
                 ]
               }
-              themeFontWeight="semi-bold"
               themeIntent="primary"
               themeIsItalic={false}
             >
@@ -212,14 +211,14 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#001f23",
+                    "color": "#4d6265",
                     "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="hero-icon-speaker-outlined"
-              themeIntent="text"
+              themeIntent="muted"
               themeSize="medium"
             />
             <Text
@@ -228,22 +227,21 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-SemiBold",
-                    "fontSize": 12,
-                    "letterSpacing": 0.24,
-                    "lineHeight": 16,
+                    "color": "#4d6265",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 10,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                   },
                   [
                     {
-                      "marginTop": 4,
+                      "marginTop": 2,
                     },
                     undefined,
                   ],
                 ]
               }
-              themeFontWeight="semi-bold"
-              themeIntent="body"
+              themeIntent="muted"
               themeIsItalic={false}
             >
               Feed
@@ -283,14 +281,14 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#001f23",
+                    "color": "#4d6265",
                     "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="hero-icon-bell-outlined"
-              themeIntent="text"
+              themeIntent="muted"
               themeSize="medium"
             />
             <Text
@@ -299,22 +297,21 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-SemiBold",
-                    "fontSize": 12,
-                    "letterSpacing": 0.24,
-                    "lineHeight": 16,
+                    "color": "#4d6265",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 10,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                   },
                   [
                     {
-                      "marginTop": 4,
+                      "marginTop": 2,
                     },
                     undefined,
                   ],
                 ]
               }
-              themeFontWeight="semi-bold"
-              themeIntent="body"
+              themeIntent="muted"
               themeIsItalic={false}
             >
               Alerts
@@ -354,14 +351,14 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#001f23",
+                    "color": "#4d6265",
                     "fontSize": 24,
                   },
                   undefined,
                 ]
               }
               testID="hero-icon-user-outlined"
-              themeIntent="text"
+              themeIntent="muted"
               themeSize="medium"
             />
             <Text
@@ -370,22 +367,21 @@ exports[`BottomNavigation renders correctly 1`] = `
               style={
                 [
                   {
-                    "color": "#001f23",
-                    "fontFamily": "BeVietnamPro-SemiBold",
-                    "fontSize": 12,
-                    "letterSpacing": 0.24,
-                    "lineHeight": 16,
+                    "color": "#4d6265",
+                    "fontFamily": "BeVietnamPro-Regular",
+                    "fontSize": 10,
+                    "letterSpacing": 0,
+                    "lineHeight": 14,
                   },
                   [
                     {
-                      "marginTop": 4,
+                      "marginTop": 2,
                     },
                     undefined,
                   ],
                 ]
               }
-              themeFontWeight="semi-bold"
-              themeIntent="body"
+              themeIntent="muted"
               themeIsItalic={false}
             >
               Profile

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { fireEvent } from '@testing-library/react-native';
+import { act, fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
@@ -64,15 +64,24 @@ describe('BottomNavigation', () => {
 
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('Home')).toBeDefined();
-    fireEvent.press(getByText('Feed'));
-    fireEvent.press(getByText('Alerts'));
-    fireEvent.press(getByText('Profile'));
+
+    act(() => {
+      fireEvent.press(getByText('Feed'));
+    });
+
+    act(() => {
+      fireEvent.press(getByText('Alerts'));
+    });
+
+    act(() => {
+      fireEvent.press(getByText('Profile'));
+    });
 
     // All screens are rendered and component is not unmounted when switching screen.
-    expect(getByText('Home Screen')).toBeDefined();
-    expect(getByText('Feed Screen')).toBeDefined();
-    expect(getByText('Alerts Screen')).toBeDefined();
-    expect(getByText('Profile Screen')).toBeDefined();
+    expect(getByText('Home Screen', { hidden: true })).toBeDefined();
+    expect(getByText('Feed Screen', { hidden: true })).toBeDefined();
+    expect(getByText('Alerts Screen', { hidden: true })).toBeDefined();
+    expect(getByText('Profile Screen', { hidden: true })).toBeDefined();
   });
 
   it('renders correctly with renderActiveTabOnly is true', () => {

package/src/components/BottomNavigation/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { TouchableWithoutFeedback } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import Icon from '../Icon';
 import { isHeroIcon } from '../Icon/utils';
@@ -70,7 +70,7 @@ const BottomNavigation = ({
   selectedTabKey,
   tabs,
   ...nativeProps
-}: BottomNavigationProps): JSX.Element => {
+}: BottomNavigationProps): ReactElement => {
   const insets = useSafeAreaInsets();
 
   /**
@@ -137,13 +137,12 @@ const BottomNavigation = ({
                 <BottomBarItem>
                   <Icon
                     icon={active ? icon : inactiveIcon}
-                    intent={active ? 'primary' : 'text'}
+                    intent={active ? 'primary' : 'muted'}
                     testID={`hero-icon-${icon}`}
                   />
                   {!!title && (
                     <StyledBottomBarText
-                      fontWeight="semi-bold"
-                      intent={active ? 'primary' : 'body'}
+                      intent={active ? 'primary' : 'muted'}
                       numberOfLines={1}
                     >
                       {title}

package/src/components/BottomSheet/ScrollView.tsx

@@ -1,3 +1,4 @@
+import type { ReactElement } from 'react';
 import React, { useContext, useCallback, forwardRef } from 'react';
 import type {
   NativeScrollEvent,
@@ -9,7 +10,7 @@ import type { BottomSheetContextType } from './BottomSheetContext';
 import BottomSheetContext from './BottomSheetContext';
 
 const BottomSheetScrollView = forwardRef<ScrollView, ScrollViewProps>(
-  ({ scrollEventThrottle = 100, ...props }, ref): JSX.Element => {
+  ({ scrollEventThrottle = 100, ...props }, ref): ReactElement => {
     const { setInternalShowDivider } =
       useContext<BottomSheetContextType>(BottomSheetContext);
 

package/src/components/BottomSheet/index.tsx

@@ -104,7 +104,7 @@ const BottomSheet = ({
   keyboardAvoidingViewProps = {},
   supportedOrientations = ['portrait'],
   variant = 'fixed',
-}: BottomSheetProps): JSX.Element => {
+}: BottomSheetProps): ReactElement => {
   const { height } = Dimensions.get('window');
 
   // Internal state to control modal open/close timing with animation

package/src/components/Button/Button.tsx

@@ -1,4 +1,4 @@
-import type { ReactChild, ReactNode } from 'react';
+import type { ReactChild, ReactElement, ReactNode } from 'react';
 import React, { useCallback, useMemo, useState } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Theme } from '../../theme';
@@ -188,7 +188,7 @@ const Button = ({
   testID,
   text,
   variant = 'filled',
-}: ButtonProps): JSX.Element => {
+}: ButtonProps): ReactElement => {
   const isInlineText =
     variant === 'inline-text' || variant === 'inline-text-compact';
   const isIconButtonOnly = !text;

package/src/components/Calendar/__tests__/CalendarRange.spec.tsx

@@ -226,7 +226,7 @@ describe('CalendarRange', () => {
 
     fireEvent.press(getByTestId('calendar-month-picker'));
 
-    // Pickers are mocked at packages/rn/testUtils/setup.tsx
+    // Pickers are mocked at libs/rn/testUtils/setup.tsx
     if (mockedPlatform === 'ios') {
       expect(queryByText('IOS picker')).toBeDefined();
     } else {

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

@@ -1,5 +1,6 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
+import { Platform } from 'react-native';
 import Calendar from '..';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { setOrientation } from '../../../testHelpers/utils';
@@ -121,10 +122,7 @@ describe('Calendar', () => {
     ${'ios'}
     ${'android'}
   `('renders correct picker on $platform', ({ platform: mockedPlatform }) => {
-    jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-      OS: mockedPlatform,
-      select: () => null,
-    }));
+    Platform.OS = mockedPlatform;
 
     const { getByTestId, queryByText } = renderWithTheme(
       <Calendar
@@ -138,7 +136,7 @@ describe('Calendar', () => {
 
     fireEvent.press(getByTestId('calendar-month-picker'));
 
-    // Pickers are mocked at packages/rn/testUtils/setup.tsx
+    // Pickers are mocked at libs/rn/testUtils/setup.tsx
     if (mockedPlatform === 'ios') {
       expect(queryByText('IOS picker')).toBeDefined();
     } else {
@@ -153,10 +151,7 @@ describe('Calendar', () => {
   `(
     'onToggleMonthPicker is called when toggling month year picker on $platform',
     ({ platform: mockedPlatform }) => {
-      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-        OS: mockedPlatform,
-        select: () => null,
-      }));
+      Platform.OS = mockedPlatform;
 
       const onToggleMonthPicker = jest.fn();
       const { getByTestId } = renderWithTheme(

package/src/components/Card/DataCard/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import type { StyleProp, ViewStyle, ViewProps } from 'react-native';
 import { StyledDataCard, Indicator } from './StyledDataCard';
 
@@ -26,7 +26,7 @@ const DataCard = ({
   intent = 'info',
   children,
   ...nativeProps
-}: DataCardProps): JSX.Element => (
+}: DataCardProps): ReactElement => (
   <StyledDataCard {...nativeProps}>
     <Indicator themeIntent={intent} testID="data-card-indicator" />
     {children}

package/src/components/Card/index.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import DataCard from './DataCard';
@@ -37,7 +37,7 @@ const Card = ({
   children,
   variant = 'basic',
   ...nativeProps
-}: CardProps): JSX.Element => {
+}: CardProps): ReactElement => {
   return (
     <StyledCard {...nativeProps} themeIntent={intent} themeVariant={variant}>
       {children}

package/src/components/Carousel/index.tsx

@@ -1,4 +1,4 @@
-import type { Dispatch, SetStateAction } from 'react';
+import type { Dispatch, ReactElement, SetStateAction } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type {
   StyleProp,
@@ -42,7 +42,7 @@ interface CarouselProps extends ViewProps {
   /**
    * Render action elements function.
    */
-  renderActions?: (pageIndex: number) => JSX.Element;
+  renderActions?: (pageIndex: number) => ReactElement;
   /**
    * @deprecated will be removed in 9.0.0
    *

package/src/components/DatePicker/Dialog/__tests__/IOSDialog.spec.tsx

@@ -1,17 +1,11 @@
 import { fireEvent } from '@testing-library/react-native';
 import React, { useState } from 'react';
-import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../../testHelpers/renderWithTheme';
 import IOSDialog from '../IOSDialog';
 import { setOrientation } from '../../../../testHelpers/utils';
 import { Button } from '../../../..';
 import type { DatePickerDialogProps } from '../type';
 
-jest.mock('react-native/Libraries/Modal/Modal', () => {
-  const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
-  return (props: ModalProps) => <Modal {...props} />;
-});
-
 const IOSDialogExample = (
   props: Omit<DatePickerDialogProps, 'open' | 'onClose'>
 ) => {

package/src/components/DatePicker/__tests__/DatePickerCalendar.spec.tsx

@@ -1,6 +1,6 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
-import type { ModalProps } from 'react-native';
+import { Platform } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import DatePickerCalendar from '../DatePickerCalendar';
 import { setOrientation } from '../../../testHelpers/utils';
@@ -10,11 +10,6 @@ import { theme } from '../../..';
 import enAU from '../../../locales/en_AU';
 import enCA from '../../../locales/en_CA';
 
-jest.mock('react-native/Libraries/Modal/Modal', () => {
-  const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
-  return (props: ModalProps) => <Modal {...props} />;
-});
-
 describe('DatePickerCalendar', () => {
   it('renders correctly', () => {
     const onChange = jest.fn();
@@ -108,10 +103,7 @@ describe('DatePickerCalendar', () => {
   `(
     'renders month year picker when pressing on title',
     ({ platform: mockedPlatform }) => {
-      jest.mock('react-native/Libraries/Utilities/Platform', () => ({
-        OS: mockedPlatform,
-        select: () => null,
-      }));
+      Platform.OS = mockedPlatform;
 
       const { queryByText, getByText, getByTestId } = renderWithTheme(
         <DatePickerCalendar

package/src/components/DatePicker/__tests__/DatePickerIOS.spec.tsx

@@ -10,12 +10,39 @@ import { theme } from '../../..';
 
 import enAU from '../../../locales/en_AU';
 import enCA from '../../../locales/en_CA';
+import type { BottomSheetProps } from '../../BottomSheet';
 
 jest.mock('react-native/Libraries/Modal/Modal', () => {
   const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
   return (props: ModalProps) => <Modal {...props} />;
 });
 
+jest.mock('../../BottomSheet', () => {
+  // eslint-disable-next-line global-require, @typescript-eslint/no-var-requires
+  const { View } = require('react-native');
+
+  const BottomSheet = ({
+    header,
+    open,
+    footer,
+    children,
+    testID,
+  }: BottomSheetProps) => {
+    if (!open) return null;
+    return (
+      <View testID={testID}>
+        {header && <View>{header}</View>}
+        {children}
+        {footer && <View>{footer}</View>}
+      </View>
+    );
+  };
+
+  BottomSheet.ScrollView = View;
+
+  return BottomSheet;
+});
+
 describe('getDateValue', () => {
   describe('when value is less than minDate', () => {
     it('should return minDate', () => {