@hero-design/rn 7.17.0 → 7.18.0

package/src/components/Select/SingleSelect/index.tsx

@@ -41,7 +41,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
 }: SingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
   const [open, setOpen] = useState(false);
-  const [selectingValue, setSelectingValue] = useState<V | null>(value);
   const sections = toSections(options);
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions.find(opt => value === opt.value)?.text;
@@ -73,10 +72,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
       <BottomSheet
         open={open}
         onRequestClose={() => setOpen(false)}
-        onDismiss={() => {
-          setSelectingValue(value);
-          if (onDimiss) onDimiss();
-        }}
+        onDismiss={onDimiss}
         header={label}
         style={{
           paddingBottom: isKeyboardVisible ? keyboardHeight : 0,
@@ -99,7 +95,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
           loading={loading}
           sections={sections}
           renderOption={renderOption}
-          value={selectingValue}
+          value={value}
           onPress={selectedValue => {
             setOpen(false);
             onConfirm(selectedValue);

package/src/components/Select/__tests__/__snapshots__/StyledSelect.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`FooterText has correct style 1`] = `
   style={
     Array [
       Object {
-        "color": "#292a2b",
+        "color": "#001f23",
         "fontFamily": "BeVietnamPro-Regular",
         "fontSize": 14,
         "letterSpacing": 0.42,
@@ -13,7 +13,7 @@ exports[`FooterText has correct style 1`] = `
       },
       Array [
         Object {
-          "color": "#7622d7",
+          "color": "#8505a2",
         },
         undefined,
       ],

package/src/components/Spinner/__tests__/__snapshots__/AnimatedSpinner.spec.tsx.snap

@@ -34,7 +34,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#8505a2",
             "borderRadius": 8,
             "height": 16,
             "opacity": 1,
@@ -51,7 +51,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#8505a2",
             "borderRadius": 8,
             "height": 16,
             "marginLeft": 8,
@@ -84,7 +84,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#8505a2",
             "borderRadius": 8,
             "height": 16,
             "opacity": 0.5,
@@ -101,7 +101,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#7622d7",
+            "backgroundColor": "#8505a2",
             "borderRadius": 8,
             "height": 16,
             "marginLeft": 8,

package/src/components/Spinner/__tests__/__snapshots__/StyledSpinner.spec.tsx.snap

@@ -46,7 +46,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#8505a2",
               "borderRadius": 8,
               "height": 16,
               "opacity": 1,
@@ -63,7 +63,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#8505a2",
               "borderRadius": 8,
               "height": 16,
               "marginLeft": 8,
@@ -96,7 +96,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#8505a2",
               "borderRadius": 8,
               "height": 16,
               "opacity": 0.5,
@@ -113,7 +113,7 @@ exports[`StyledSpinnerContainer renders correctly 1`] = `
         style={
           Array [
             Object {
-              "backgroundColor": "#7622d7",
+              "backgroundColor": "#8505a2",
               "borderRadius": 8,
               "height": 16,
               "marginLeft": 8,
@@ -165,7 +165,7 @@ exports[`StyledSpinnerText renders correctly when position is bottomLeft 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 8,
         "height": 16,
         "opacity": 0.5,
@@ -183,7 +183,7 @@ exports[`StyledSpinnerText renders correctly when position is bottomRight 1`] =
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 8,
         "height": 16,
         "marginLeft": 8,
@@ -202,7 +202,7 @@ exports[`StyledSpinnerText renders correctly when position is topLeft 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 8,
         "height": 16,
         "opacity": 1,
@@ -220,7 +220,7 @@ exports[`StyledSpinnerText renders correctly when position is topRight 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 8,
         "height": 16,
         "marginLeft": 8,

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

@@ -55,7 +55,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#8505a2",
                 "borderRadius": 8,
                 "height": 16,
                 "opacity": 1,
@@ -72,7 +72,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#8505a2",
                 "borderRadius": 8,
                 "height": 16,
                 "marginLeft": 8,
@@ -105,7 +105,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#8505a2",
                 "borderRadius": 8,
                 "height": 16,
                 "opacity": 0.5,
@@ -122,7 +122,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#7622d7",
+                "backgroundColor": "#8505a2",
                 "borderRadius": 8,
                 "height": 16,
                 "marginLeft": 8,

package/src/components/Switch/__tests__/__snapshots__/StyledHeading.spec.tsx.snap

@@ -59,7 +59,7 @@ exports[`StyledWrapper renders correct style 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#7622d7",
+        "backgroundColor": "#8505a2",
         "borderRadius": 999,
         "height": 28.799999999999997,
         "paddingHorizontal": 4,

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

@@ -19,7 +19,7 @@ exports[`Switch renders correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#727478",
+        "backgroundColor": "#808f91",
         "borderRadius": 999,
         "height": 28.799999999999997,
         "paddingHorizontal": 4,
@@ -83,7 +83,7 @@ exports[`Switch trigger press function correctly 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#727478",
+        "backgroundColor": "#808f91",
         "borderRadius": 999,
         "height": 28.799999999999997,
         "paddingHorizontal": 4,

package/src/components/Tabs/ScrollableTabs.tsx

@@ -79,6 +79,7 @@ const ScrollableTab = ({
         index: selectedTabIndex,
         viewPosition: 0.5,
       });
+      pagerViewRef.current?.setPage(selectedTabIndex);
     }
 
     const animation = Animated.parallel([
@@ -149,7 +150,6 @@ const ScrollableTab = ({
                 key={key}
                 onPress={() => {
                   onTabPress(key);
-                  pagerViewRef.current?.setPage(index);
                 }}
                 testID={testID}
               >

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

@@ -4,6 +4,7 @@ import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tabs, { TabType } from '..';
+import Button from '../../Button';
 
 const TestTabsComponent = (
   props: Omit<
@@ -40,6 +41,11 @@ const TestTabsComponent = (
         insets: { top: 0, left: 0, right: 0, bottom: 0 },
       }}
     >
+      <Button.Utility
+        text="Move to Work"
+        onPress={() => setSelectedTabKey('work')}
+        icon="sync"
+      />
       <Tabs.Scroll
         {...props}
         tabs={tabs}
@@ -65,6 +71,8 @@ describe('Tabs.Scroll', () => {
     expect(getByText('Personal Screen')).toBeDefined();
     fireEvent.press(getByTestId('hero-icon-home-outlined'));
     expect(getByText('Home Screen')).toBeDefined();
+    fireEvent.press(getByText('Move to Work'));
+    expect(getByText('Work Screen')).toBeDefined();
   });
 
   it('renders correctly with lazy preloaded', () => {

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -12,6 +12,85 @@ exports[`Tabs.Scroll renders correctly 1`] = `
     ]
   }
 >
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f6f6f7",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "padding": 8,
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "paddingRight": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="sync"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        testID="undefined-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Move to Work
+    </Text>
+  </View>
   <View
     style={
       Array [
@@ -27,7 +106,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderBottomColor": "#dadbde",
+            "borderBottomColor": "#e8e9ea",
             "borderBottomWidth": 1,
             "paddingHorizontal": 0,
           },
@@ -148,7 +227,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   nativeID="animatedComponent"
                   style={
                     Object {
-                      "backgroundColor": "#f1e9fb",
+                      "backgroundColor": "#f3e6f6",
                       "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [
@@ -178,14 +257,14 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontFamily": "BeVietnamPro-SemiBold",
                           "fontSize": 14,
                           "letterSpacing": 0.42,
                           "lineHeight": 22,
                         },
                         Object {
-                          "color": "#7622d7",
+                          "color": "#8505a2",
                         },
                       ]
                     }
@@ -302,7 +381,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontSize": 20,
                         },
                         undefined,
@@ -419,7 +498,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                     style={
                       Array [
                         Object {
-                          "color": "#292a2b",
+                          "color": "#001f23",
                           "fontSize": 20,
                         },
                         undefined,

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

@@ -12,6 +12,85 @@ exports[`Tabs renders correctly 1`] = `
     ]
   }
 >
+  <View
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    nativeID="animatedComponent"
+    onClick={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Object {
+        "alignItems": "center",
+        "backgroundColor": "#f6f6f7",
+        "borderRadius": 8,
+        "flexDirection": "row",
+        "justifyContent": "center",
+        "opacity": 1,
+        "padding": 8,
+        "width": "100%",
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "paddingRight": 12,
+          },
+          undefined,
+        ]
+      }
+    >
+      <HeroIcon
+        name="sync"
+        style={
+          Array [
+            Object {
+              "color": "#001f23",
+              "fontSize": 24,
+            },
+            undefined,
+          ]
+        }
+        testID="undefined-icon"
+        themeIntent="text"
+        themeSize="medium"
+      />
+    </View>
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.42,
+            "lineHeight": 22,
+          },
+          Array [
+            Object {
+              "flexShrink": 1,
+              "fontFamily": "BeVietnamPro-Regular",
+              "fontSize": 16,
+              "textAlign": "center",
+            },
+            undefined,
+          ],
+        ]
+      }
+      themeFontSize="medium"
+      themeFontWeight="regular"
+      themeIntent="body"
+    >
+      Move to Work
+    </Text>
+  </View>
   <View
     style={
       Array [
@@ -27,7 +106,7 @@ exports[`Tabs renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderBottomColor": "#dadbde",
+            "borderBottomColor": "#e8e9ea",
             "borderBottomWidth": 1,
             "paddingHorizontal": 0,
           },
@@ -82,14 +161,14 @@ exports[`Tabs renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                       "fontFamily": "BeVietnamPro-SemiBold",
                       "fontSize": 14,
                       "letterSpacing": 0.42,
                       "lineHeight": 22,
                     },
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                     },
                   ]
                 }
@@ -150,14 +229,14 @@ exports[`Tabs renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
                       "letterSpacing": 0.42,
                       "lineHeight": 22,
                     },
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                     },
                   ]
                 }
@@ -218,14 +297,14 @@ exports[`Tabs renders correctly 1`] = `
                 style={
                   Array [
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                       "fontFamily": "BeVietnamPro-Regular",
                       "fontSize": 14,
                       "letterSpacing": 0.42,
                       "lineHeight": 22,
                     },
                     Object {
-                      "color": "#292a2b",
+                      "color": "#001f23",
                     },
                   ]
                 }
@@ -265,7 +344,7 @@ exports[`Tabs renders correctly 1`] = `
           nativeID="animatedComponent"
           style={
             Object {
-              "backgroundColor": "#292a2b",
+              "backgroundColor": "#001f23",
               "bottom": 0,
               "height": 2,
               "position": "absolute",

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

@@ -4,6 +4,7 @@ import { fireEvent } from '@testing-library/react-native';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Tabs, { TabType } from '..';
+import Button from '../../Button';
 
 const TestTabsComponent = (
   props: Omit<
@@ -38,6 +39,11 @@ const TestTabsComponent = (
         insets: { top: 0, left: 0, right: 0, bottom: 0 },
       }}
     >
+      <Button.Utility
+        text="Move to Work"
+        onPress={() => setSelectedTabKey('work')}
+        icon="sync"
+      />
       <Tabs
         {...props}
         tabs={tabs}
@@ -61,6 +67,8 @@ describe('Tabs', () => {
     expect(getByText('Personal Screen')).toBeDefined();
     fireEvent.press(getByText('Home'));
     expect(getByText('Home Screen')).toBeDefined();
+    fireEvent.press(getByText('Move to Work'));
+    expect(getByText('Work Screen')).toBeDefined();
   });
 
   it('renders correctly with lazy preloaded', () => {

package/src/components/Tabs/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useEffect } from 'react';
 import {
   Animated,
   TouchableWithoutFeedback,
@@ -118,6 +118,12 @@ const Tabs = ({
   const positionAnimatedValue = React.useRef(new Animated.Value(0)).current;
   const [tabsWidth, setTabsWidth] = React.useState<number>(0);
 
+  useEffect(() => {
+    if (selectedTabIndex !== -1) {
+      pagerViewRef.current?.setPage(selectedTabIndex);
+    }
+  }, [selectedTabIndex]);
+
   return (
     <TabContainer style={containerStyle}>
       <HeaderTabWrapper themeInsets={insets} style={barStyle}>
@@ -130,7 +136,7 @@ const Tabs = ({
               }
             }}
           >
-            {tabs.map((tab, index) => {
+            {tabs.map(tab => {
               const {
                 key,
                 testID,
@@ -152,7 +158,6 @@ const Tabs = ({
                   key={key}
                   onPress={() => {
                     onTabPress(key);
-                    pagerViewRef.current?.setPage(index);
                   }}
                   testID={testID}
                 >

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`Tag has archived style when intent is archived 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#f1f2f3",
+        "backgroundColor": "#f6f6f7",
         "borderColor": "#737479",
         "borderRadius": 4,
         "borderWidth": 1,
@@ -43,8 +43,8 @@ exports[`Tag has archived style when intent is primary 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#f1e9fb",
-        "borderColor": "#7622d7",
+        "backgroundColor": "#f3e6f6",
+        "borderColor": "#8505a2",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -59,7 +59,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#7622d7",
+          "color": "#8505a2",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,
@@ -120,7 +120,7 @@ exports[`Tag has default style when intent is default 1`] = `
     Array [
       Object {
         "backgroundColor": undefined,
-        "borderColor": "#292a2b",
+        "borderColor": "#001f23",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -135,7 +135,7 @@ exports[`Tag has default style when intent is default 1`] = `
     style={
       Array [
         Object {
-          "color": "#292a2b",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,
@@ -233,8 +233,8 @@ exports[`Tag has warning style when intent is warning 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": "#fff6eb",
-        "borderColor": "#d98a2c",
+        "backgroundColor": "#ebf4ff",
+        "borderColor": "#ffa234",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -249,7 +249,7 @@ exports[`Tag has warning style when intent is warning 1`] = `
     style={
       Array [
         Object {
-          "color": "#d98a2c",
+          "color": "#ffa234",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,