@hero-design/rn 8.113.0 → 8.114.0

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Text } from 'react-native';
-import { fireEvent, waitFor } from '@testing-library/react-native';
+import { fireEvent, act } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import type { ComponentProps } from 'react';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
@@ -103,7 +103,9 @@ describe('Tabs', () => {
     );
 
     expect(getByText('Work Screen focused')).toBeDefined();
-    expect(getByText('Personal Screen unfocused')).toBeDefined();
+    expect(
+      getByText('Personal Screen unfocused', { hidden: true })
+    ).toBeDefined();
     // Preload distance is 1, so Home Screen is not rendered.
     expect(queryByText('Home Screen')).toBeNull();
 
@@ -146,34 +148,44 @@ describe('Tabs', () => {
 
 describe('useIsFocused', () => {
   it('renders correctly', async () => {
-    const { getByText, toJSON } = renderWithTheme(<TestTabsComponent />);
+    const { getByText, toJSON } = renderWithTheme(
+      <TestTabsComponent lazyPreloadDistance={4} />
+    );
 
     expect(toJSON()).toMatchSnapshot();
     expect(getByText('Work Screen focused')).toBeDefined();
-    expect(getByText('Personal Screen unfocused')).toBeDefined();
-    await waitFor(() =>
-      expect(getByText('Home Screen unfocused')).toBeDefined()
-    );
-    expect(getByText('Home Screen unfocused')).toBeDefined();
-    expect(getByText('Money Screen unfocused')).toBeDefined();
-
-    fireEvent.press(getByText('Personal'));
-    expect(toJSON()).toMatchSnapshot('xxxxxx');
+    expect(
+      getByText('Personal Screen unfocused', { hidden: true })
+    ).toBeDefined();
+    expect(getByText('Home Screen unfocused', { hidden: true })).toBeDefined();
+    expect(getByText('Money Screen unfocused', { hidden: true })).toBeDefined();
+
+    act(() => {
+      fireEvent.press(getByText('Personal'));
+    });
     expect(getByText('Personal Screen focused')).toBeDefined();
-    expect(getByText('Work Screen unfocused')).toBeDefined();
-    expect(getByText('Home Screen unfocused')).toBeDefined();
-    expect(getByText('Money Screen unfocused')).toBeDefined();
-
-    fireEvent.press(getByText('Home'));
-    expect(getByText('Personal Screen unfocused')).toBeDefined();
-    expect(getByText('Work Screen unfocused')).toBeDefined();
+    expect(getByText('Work Screen unfocused', { hidden: true })).toBeDefined();
+    expect(getByText('Home Screen unfocused', { hidden: true })).toBeDefined();
+    expect(getByText('Money Screen unfocused', { hidden: true })).toBeDefined();
+
+    act(() => {
+      fireEvent.press(getByText('Home'));
+    });
+    expect(
+      getByText('Personal Screen unfocused', { hidden: true })
+    ).toBeDefined();
+    expect(getByText('Work Screen unfocused', { hidden: true })).toBeDefined();
     expect(getByText('Home Screen focused')).toBeDefined();
-    expect(getByText('Money Screen unfocused')).toBeDefined();
-
-    fireEvent.press(getByText('Money'));
-    expect(getByText('Personal Screen unfocused')).toBeDefined();
-    expect(getByText('Work Screen unfocused')).toBeDefined();
-    expect(getByText('Home Screen unfocused')).toBeDefined();
+    expect(getByText('Money Screen unfocused', { hidden: true })).toBeDefined();
+
+    act(() => {
+      fireEvent.press(getByText('Money'));
+    });
+    expect(
+      getByText('Personal Screen unfocused', { hidden: true })
+    ).toBeDefined();
+    expect(getByText('Work Screen unfocused', { hidden: true })).toBeDefined();
+    expect(getByText('Home Screen unfocused', { hidden: true })).toBeDefined();
     expect(getByText('Money Screen focused')).toBeDefined();
     expect(getByText('50')).toBeDefined();
   });

package/src/components/Tabs/index.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@emotion/react';
-import type { ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { Animated, TouchableWithoutFeedback, View } from 'react-native';
@@ -11,6 +11,7 @@ import Typography from '../Typography';
 import ActiveTabIndicator from './ActiveTabIndicator';
 import SceneView from './SceneView';
 import ScrollableTabs from './ScrollableTabs';
+import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
 import {
   HeaderTab,
   HeaderTabItem,
@@ -114,7 +115,7 @@ const Tabs = ({
   lazyPreloadDistance = 1,
   swipeEnabled = true,
   testID: componentTestID,
-}: TabsProps): JSX.Element => {
+}: TabsProps): ReactElement => {
   const theme = useTheme();
   const insets = useSafeAreaInsets();
   const pagerViewRef = useRef<PagerView>(null);
@@ -250,5 +251,6 @@ const Tabs = ({
 
 export default Object.assign(Tabs, {
   Scroll: ScrollableTabs,
+  ScrollHeader: ScrollableTabHeader,
   useIsFocused,
 });

package/src/components/Tag/index.tsx

@@ -36,7 +36,7 @@ const Tag = ({
   style,
   testID,
   ...nativeProps
-}: TagProps): JSX.Element => {
+}: TagProps): ReactElement => {
   useDeprecation(
     `Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.`,
     variant !== undefined

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

@@ -1,15 +1,9 @@
 import { fireEvent } from '@testing-library/react-native';
 import React from 'react';
-import type { ModalProps } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import TimePickerIOS from '../TimePickerIOS';
 import { setOrientation } from '../../../testHelpers/utils';
 
-jest.mock('react-native/Libraries/Modal/Modal', () => {
-  const Modal = jest.requireActual('react-native/Libraries/Modal/Modal');
-  return (props: ModalProps) => <Modal {...props} />;
-});
-
 describe('TimePickerIOS', () => {
   it('renders correctly', () => {
     const onChange = jest.fn();