@hero-design/rn 8.23.0 → 8.24.0-alpha.0

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

@@ -74,7 +74,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="default"
+              themeState="default"
             />
             <View
               style={
@@ -107,6 +107,7 @@ Array [
                     undefined,
                   ]
                 }
+                themeVariant="text"
               >
                 <Text
                   allowFontScaling={false}
@@ -124,7 +125,7 @@ Array [
                           "alignContent": "center",
                           "alignItems": "center",
                           "color": "#001f23",
-                          "fontSize": 14,
+                          "fontSize": 16,
                           "marginTop": -2,
                           "textAlignVertical": "center",
                         },
@@ -136,8 +137,8 @@ Array [
                   themeFontSize="medium"
                   themeFontWeight="regular"
                   themeIntent="body"
+                  themeState="default"
                   themeTypeface="neutral"
-                  themeVariant="default"
                 >
                   Choose collaborators
                 </Text>
@@ -161,8 +162,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -173,6 +177,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
               />
             </View>
             <HeroIcon
@@ -1391,7 +1396,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -1438,8 +1443,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -1477,8 +1482,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -1489,6 +1497,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday"
               />
             </View>
@@ -1618,7 +1627,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -1665,8 +1674,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -1704,8 +1713,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -1716,6 +1728,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday"
               />
             </View>
@@ -3061,7 +3074,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="readonly"
+              themeState="readonly"
             />
             <View
               pointerEvents="none"
@@ -3108,8 +3121,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="readonly"
                 themeTypeface="neutral"
-                themeVariant="readonly"
               >
                 Allow notifications
               </Text>
@@ -3147,8 +3160,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -3159,6 +3175,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="Monday"
               />
             </View>
@@ -3301,7 +3318,7 @@ Array [
               }
               testID="text-input-border"
               themeFocused={false}
-              themeVariant="filled"
+              themeState="filled"
             />
             <View
               pointerEvents="none"
@@ -3348,8 +3365,8 @@ Array [
                 themeFontSize="small"
                 themeFontWeight="regular"
                 themeIntent="body"
+                themeState="filled"
                 themeTypeface="neutral"
-                themeVariant="filled"
               >
                 Allow notifications
               </Text>
@@ -3387,8 +3404,11 @@ Array [
                     Object {
                       "alignSelf": "stretch",
                       "flexGrow": 2,
-                      "fontSize": 14,
+                      "fontFamily": "BeVietnamPro-Regular",
+                      "fontSize": 16,
+                      "height": undefined,
                       "marginHorizontal": 8,
+                      "maxHeight": 144,
                       "paddingVertical": 0,
                       "textAlignVertical": "center",
                     },
@@ -3399,6 +3419,7 @@ Array [
                   ]
                 }
                 testID="text-input"
+                themeVariant="text"
                 value="A1"
               />
             </View>

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,59 +1,13 @@
 import React from 'react';
-import { TouchableWithoutFeedback, FlatList, Animated } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { useTheme } from '@emotion/react';
 import PagerView from 'react-native-pager-view';
 import {
-  HeaderTabItem,
-  HeaderTabWrapper,
   TabContainer,
   TabScreen,
   ContentWrapper,
-  HeaderTabItemOutline,
-  HeaderTabItemWrapper,
-  HeaderTabItemOutlineWrapper,
 } from './StyledScrollableTabs';
-import { useAnimatedValueArray } from './utils';
-import { isHeroIcon } from '../Icon/utils';
-import Icon from '../Icon';
-import Typography from '../Typography';
-import type { ItemType, TabsProps, TabType } from '.';
-import TabWithBadge from './TabWithBadge';
-
-const getTabItem = ({
-  item,
-  color,
-  active,
-}: {
-  item: ItemType;
-  color: string;
-  active: boolean;
-}) => {
-  if (isHeroIcon(item)) {
-    return (
-      <Icon
-        icon={item}
-        testID={`hero-icon-${item}`}
-        size="small"
-        style={{ color }}
-      />
-    );
-  }
-
-  if (typeof item === 'string') {
-    return (
-      <Typography.Text
-        fontWeight={active ? 'semi-bold' : 'regular'}
-        numberOfLines={1}
-        style={{ color }}
-      >
-        {item}
-      </Typography.Text>
-    );
-  }
-
-  return item({ color });
-};
+import type { TabsProps } from '.';
+import ScrollableTabHeader from './ScrollableTabsHeader';
 
 const ScrollableTab = ({
   onTabPress,
@@ -66,24 +20,14 @@ const ScrollableTab = ({
   swipeEnabled = true,
   testID: componentTestID,
 }: TabsProps) => {
-  const flatListRef = React.useRef<FlatList>(null);
   const pagerViewRef = React.useRef<PagerView>(null);
   const insets = useSafeAreaInsets();
-  const theme = useTheme();
   const selectedTabIndex = tabs.findIndex(
     (item) => item.key === selectedTabKey
   );
-  const tabsAnims = useAnimatedValueArray(
-    tabs.map((_, i) => (i === selectedTabIndex ? 1 : 0))
-  );
-
   React.useEffect(() => {
     let timeoutHandle: number | null = null;
     if (selectedTabIndex !== -1) {
-      flatListRef.current?.scrollToIndex({
-        index: selectedTabIndex,
-        viewPosition: 0.5,
-      });
       // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
       // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
       timeoutHandle = setTimeout(() => {
@@ -92,19 +36,7 @@ const ScrollableTab = ({
       }, 200);
     }
 
-    const animation = Animated.parallel([
-      ...tabs.map((_, i) =>
-        Animated.timing(tabsAnims[i], {
-          toValue: i === selectedTabIndex ? 1 : 0,
-          duration: 150,
-          useNativeDriver: true,
-        })
-      ),
-    ]);
-    animation.start();
-
     return () => {
-      animation.stop();
       if (timeoutHandle) {
         clearTimeout(timeoutHandle);
       }
@@ -113,85 +45,14 @@ const ScrollableTab = ({
 
   return (
     <TabContainer style={containerStyle} testID={componentTestID}>
-      <HeaderTabWrapper themeInsets={insets} style={barStyle}>
-        <FlatList<TabType>
-          testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
-          ref={flatListRef}
-          horizontal
-          data={tabs}
-          keyExtractor={(tab) => String(tab.key)}
-          showsHorizontalScrollIndicator={false}
-          onScrollToIndexFailed={({ index }) => {
-            setTimeout(
-              () =>
-                flatListRef.current?.scrollToIndex({
-                  index,
-                  viewPosition: 0.5,
-                }),
-              100
-            );
-          }}
-          contentContainerStyle={{
-            paddingHorizontal:
-              theme.__hd__.tabs.space.flatListHorizontalPadding,
-          }}
-          renderItem={({ item: tab, index }) => {
-            const {
-              key,
-              testID,
-              activeItem,
-              inactiveItem: originalInactiveItem,
-              badge,
-            } = tab;
-            const active = selectedTabKey === key;
-            const activeAnimated = tabsAnims[index];
-            const outlineScale = active
-              ? activeAnimated.interpolate({
-                  inputRange: [0, 1],
-                  outputRange: [0.5, 1],
-                })
-              : 0;
-
-            const inactiveItem = originalInactiveItem ?? activeItem;
-            const tabItem = getTabItem({
-              item: active ? activeItem : inactiveItem,
-              color: active
-                ? theme.__hd__.tabs.colors.active
-                : theme.__hd__.tabs.colors.inactive,
-              active,
-            });
-
-            return (
-              <TouchableWithoutFeedback
-                key={key}
-                onPress={() => {
-                  onTabPress(key);
-                }}
-                testID={testID}
-              >
-                <HeaderTabItem isFirstItem={index === 0}>
-                  <HeaderTabItemOutlineWrapper>
-                    <HeaderTabItemOutline
-                      themeActive={active}
-                      style={{
-                        flex: 1,
-                        transform: [
-                          {
-                            scaleX: outlineScale,
-                          },
-                        ],
-                      }}
-                    />
-                  </HeaderTabItemOutlineWrapper>
-                  <HeaderTabItemWrapper>
-                    <TabWithBadge config={badge} tabItem={tabItem} />
-                  </HeaderTabItemWrapper>
-                </HeaderTabItem>
-              </TouchableWithoutFeedback>
-            );
-          }}
-        />
-      </HeaderTabWrapper>
+      <ScrollableTabHeader
+        tabs={tabs}
+        selectedIndex={selectedTabIndex}
+        onTabPress={onTabPress}
+        barStyle={barStyle}
+        insets={insets}
+        testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
+      />
       <ContentWrapper
         initialPage={selectedTabIndex}
         ref={pagerViewRef}

package/src/components/Tabs/ScrollableTabsHeader.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import {
+  TouchableWithoutFeedback,
+  FlatList,
+  Animated,
+  StyleProp,
+  ViewStyle,
+  ViewProps,
+} from 'react-native';
+import { useTheme } from '@emotion/react';
+import {
+  HeaderTabItem,
+  HeaderTabWrapper,
+  HeaderTabItemOutline,
+  HeaderTabItemWrapper,
+  HeaderTabItemOutlineWrapper,
+} from './StyledScrollableTabs';
+import { useAnimatedValueArray } from './utils';
+import { isHeroIcon } from '../Icon/utils';
+import Icon from '../Icon';
+import Typography from '../Typography';
+import type { ItemType, TabType } from '.';
+import TabWithBadge from './TabWithBadge';
+
+const getTabItem = ({
+  item,
+  color,
+  active,
+}: {
+  item: ItemType;
+  color: string;
+  active: boolean;
+}) => {
+  if (isHeroIcon(item)) {
+    return (
+      <Icon
+        icon={item}
+        testID={`hero-icon-${item}`}
+        size="small"
+        style={{ color }}
+      />
+    );
+  }
+
+  if (typeof item === 'string') {
+    return (
+      <Typography.Text
+        fontWeight={active ? 'semi-bold' : 'regular'}
+        numberOfLines={1}
+        style={{ color }}
+      >
+        {item}
+      </Typography.Text>
+    );
+  }
+
+  return item({ color });
+};
+
+export interface ScrollableTabHeaderProps extends ViewProps {
+  /**
+   * Callback which is called on tab press, receiving key of upcoming active Tab.
+   */
+  onTabPress: (key: string) => void;
+  /**
+   * Current selected tab key.
+   */
+  selectedIndex?: number;
+  /**
+   * List of Tabs to be rendered. Each Tab must have an unique key.
+   */
+  tabs: TabType[];
+  /**
+   * Style for the tab navigation bar.
+   */
+  barStyle?: StyleProp<ViewStyle>;
+  /**
+   * Testing id of the component.
+   */
+  testID?: string;
+  /**
+   * component insets
+   */
+  insets?: {
+    top: number;
+    bottom: number;
+    right: number;
+    left: number;
+  };
+}
+const ScrollableTabHeader = ({
+  onTabPress,
+  selectedIndex,
+  tabs,
+  barStyle,
+  testID,
+  insets = { top: 0, bottom: 0, right: 0, left: 0 },
+}: ScrollableTabHeaderProps) => {
+  const flatListRef = React.useRef<FlatList>(null);
+  const theme = useTheme();
+  const tabsAnims = useAnimatedValueArray(
+    tabs.map((_, i) => (i === selectedIndex ? 1 : 0))
+  );
+
+  React.useEffect(() => {
+    const timeoutHandle: number | null = null;
+    if (selectedIndex !== undefined && selectedIndex !== -1) {
+      flatListRef.current?.scrollToIndex({
+        index: selectedIndex,
+        viewPosition: 0.5,
+      });
+    }
+
+    const animation = Animated.parallel([
+      ...tabs.map((_, i) =>
+        Animated.timing(tabsAnims[i], {
+          toValue: i === selectedIndex ? 1 : 0,
+          duration: 150,
+          useNativeDriver: true,
+        })
+      ),
+    ]);
+    animation.start();
+
+    return () => {
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedIndex]);
+
+  return (
+    <HeaderTabWrapper themeInsets={insets} style={barStyle}>
+      <FlatList<TabType>
+        testID={testID}
+        ref={flatListRef}
+        horizontal
+        data={tabs}
+        keyExtractor={(tab) => String(tab.key)}
+        showsHorizontalScrollIndicator={false}
+        onScrollToIndexFailed={({ index }) => {
+          setTimeout(
+            () =>
+              flatListRef.current?.scrollToIndex({
+                index,
+                viewPosition: 0.5,
+              }),
+            100
+          );
+        }}
+        contentContainerStyle={{
+          paddingHorizontal: theme.__hd__.tabs.space.flatListHorizontalPadding,
+        }}
+        renderItem={({ item: tab, index }) => {
+          const {
+            key,
+            testID: tabItemTestID,
+            activeItem,
+            inactiveItem: originalInactiveItem,
+            badge,
+          } = tab;
+          const active = selectedIndex === index;
+          const activeAnimated = tabsAnims[index];
+          const outlineScale = active
+            ? activeAnimated.interpolate({
+                inputRange: [0, 1],
+                outputRange: [0.5, 1],
+              })
+            : 0;
+
+          const inactiveItem = originalInactiveItem ?? activeItem;
+          const tabItem = getTabItem({
+            item: active ? activeItem : inactiveItem,
+            color: active
+              ? theme.__hd__.tabs.colors.active
+              : theme.__hd__.tabs.colors.inactive,
+            active,
+          });
+
+          return (
+            <TouchableWithoutFeedback
+              key={key}
+              onPress={() => {
+                onTabPress(key);
+              }}
+              testID={tabItemTestID}
+            >
+              <HeaderTabItem isFirstItem={index === 0}>
+                <HeaderTabItemOutlineWrapper>
+                  <HeaderTabItemOutline
+                    themeActive={active}
+                    style={{
+                      flex: 1,
+                      transform: [
+                        {
+                          scaleX: outlineScale,
+                        },
+                      ],
+                    }}
+                  />
+                </HeaderTabItemOutlineWrapper>
+                <HeaderTabItemWrapper>
+                  <TabWithBadge config={badge} tabItem={tabItem} />
+                </HeaderTabItemWrapper>
+              </HeaderTabItem>
+            </TouchableWithoutFeedback>
+          );
+        }}
+      />
+    </HeaderTabWrapper>
+  );
+};
+export default ScrollableTabHeader;

package/src/components/Tabs/ScrollableTabsV2/SceneView.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { StyleSheet } from 'react-native';
+import { TabScreen } from '../StyledScrollableTabs';
+
+export const SceneView = ({
+  lazy = false,
+  lazyPreloadDistance = 1,
+  children,
+  index,
+  selectedIndex,
+  testID,
+}: {
+  children: React.ReactNode;
+  index: number;
+  selectedIndex: number;
+  lazy?: boolean;
+  lazyPreloadDistance?: number;
+  testID?: string;
+}) => {
+  const [isLoading, setIsLoading] = React.useState(
+    Math.abs(selectedIndex - index) > lazyPreloadDistance
+  );
+  const focused = index === selectedIndex;
+
+  if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
+    // Always render the route when it becomes focused
+    setIsLoading(false);
+  }
+
+  React.useEffect(() => {
+    let unsubscribe: (() => void) | undefined;
+    let timer: number | undefined;
+
+    if (!lazy && isLoading) {
+      // If lazy mode is not enabled, render the scene with a delay if not loaded already
+      // This improves the initial startup time as the scene is no longer blocking
+      timer = setTimeout(() => setIsLoading(false), 0);
+    }
+
+    return () => {
+      unsubscribe?.();
+      clearTimeout(timer);
+    };
+  }, [index, isLoading, lazy, focused]);
+
+  return (
+    <TabScreen
+      accessibilityElementsHidden={!focused}
+      importantForAccessibility={focused ? 'auto' : 'no-hide-descendants'}
+      style={[
+        { flex: 1, overflow: 'hidden' },
+        focused ? StyleSheet.absoluteFill : null,
+      ]}
+      testID={testID}
+    >
+      {focused || !isLoading ? children : null}
+    </TabScreen>
+  );
+};
+
+export default SceneView;