@hero-design/rn 7.24.0 → 7.25.1

package/src/components/Select/StyledOptionList.tsx

@@ -45,7 +45,6 @@ const StyledOptionList = <V, T extends OptionType<V>>({
       keyExtractor={keyExtractor}
       onEndReachedThreshold={0.1}
       onEndReached={() => setOnEndReachedCalled(true)}
-      onScrollToIndexFailed={() => {}}
       onMomentumScrollBegin={() => {
         if (onEndReached && onEndReachedCalled && !loading) onEndReached();
         setOnEndReachedCalled(false);

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

@@ -13,7 +13,7 @@ exports[`FooterText has correct style 1`] = `
       },
       Array [
         Object {
-          "color": "#401960",
+          "color": "#795e90",
         },
         undefined,
       ],

package/src/components/Spinner/StyledSpinner.tsx

@@ -28,8 +28,7 @@ const StyledSpinnerDot = styled(View)<{
   themeIntent: 'primary' | 'inverted';
 }>(({ themePosition, themeSize, themeIntent, theme }) => {
   const themeStyling = () => {
-    const backgroundColor =
-      theme.__hd__.spinner.colors.dot[themeIntent];
+    const backgroundColor = theme.__hd__.spinner.colors.dot[themeIntent];
     const dotPadding = theme.__hd__.spinner.space.spinnerDotPadding[themeSize];
 
     switch (themePosition) {

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

@@ -35,7 +35,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 16,
             "opacity": 0.9,
@@ -54,7 +54,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,
@@ -90,7 +90,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 16,
             "opacity": 0.45,
@@ -109,7 +109,7 @@ exports[`AnimatedSpinner renders correctly 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#001f23",
+            "backgroundColor": "#401960",
             "borderRadius": 999,
             "height": 16,
             "marginLeft": 8,

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

@@ -47,7 +47,7 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "opacity": 0.9,
@@ -66,7 +66,7 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "marginLeft": 4,
@@ -102,7 +102,7 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "opacity": 0.45,
@@ -121,7 +121,7 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 8,
               "marginLeft": 4,
@@ -327,7 +327,7 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 16,
               "opacity": 0.9,
@@ -346,7 +346,7 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 16,
               "marginLeft": 8,
@@ -382,7 +382,7 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 16,
               "opacity": 0.45,
@@ -401,7 +401,7 @@ exports[`StyledSpinnerContainer renders correctly when intent is $themeIntent, a
         style={
           Array [
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "borderRadius": 999,
               "height": 16,
               "marginLeft": 8,
@@ -585,7 +585,7 @@ exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 16,
         "opacity": 0.45,
@@ -625,7 +625,7 @@ exports[`StyledSpinnerDot renders correctly when position is bottomLeft, size is
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 8,
         "opacity": 0.45,
@@ -666,7 +666,7 @@ exports[`StyledSpinnerDot renders correctly when position is bottomRight, size i
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
@@ -708,7 +708,7 @@ exports[`StyledSpinnerDot renders correctly when position is bottomRight, size i
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 8,
         "marginLeft": 4,
@@ -749,7 +749,7 @@ exports[`StyledSpinnerDot renders correctly when position is topLeft, size is me
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 16,
         "opacity": 0.9,
@@ -789,7 +789,7 @@ exports[`StyledSpinnerDot renders correctly when position is topLeft, size is sm
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 8,
         "opacity": 0.9,
@@ -830,7 +830,7 @@ exports[`StyledSpinnerDot renders correctly when position is topRight, size is m
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 16,
         "marginLeft": 8,
@@ -872,7 +872,7 @@ exports[`StyledSpinnerDot renders correctly when position is topRight, size is s
   style={
     Array [
       Object {
-        "backgroundColor": "#001f23",
+        "backgroundColor": "#401960",
         "borderRadius": 999,
         "height": 8,
         "marginLeft": 4,

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

@@ -56,7 +56,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 16,
                 "opacity": 0.9,
@@ -75,7 +75,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,
@@ -111,7 +111,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 16,
                 "opacity": 0.45,
@@ -130,7 +130,7 @@ exports[`Spinner renders correctly 1`] = `
           style={
             Array [
               Object {
-                "backgroundColor": "#001f23",
+                "backgroundColor": "#401960",
                 "borderRadius": 999,
                 "height": 16,
                 "marginLeft": 8,

package/src/components/Swipeable/__tests__/__snapshots__/SwipeableAction.spec.tsx.snap

@@ -58,7 +58,7 @@ exports[`rendering renders correctly when intent is primary 1`] = `
   onStartShouldSetResponder={[Function]}
   style={
     Object {
-      "backgroundColor": "#001f23",
+      "backgroundColor": "#401960",
       "flex": 1,
       "opacity": 1,
     }

package/src/components/Swipeable/index.tsx

@@ -1,6 +1,11 @@
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
+import React, {
+  ComponentProps,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useRef,
+} from 'react';
 import { Animated, useWindowDimensions } from 'react-native';
-import type { SwipeableProps as RnghSwipeableProps } from 'react-native-gesture-handler/Swipeable';
 import {
   Swipeable as RnghSwipeable,
   GestureHandlerRootView,
@@ -9,6 +14,9 @@ import {
 import SwipeableAction from './SwipeableAction';
 
 type State = 'closed' | 'leftOpen' | 'rightOpen';
+// We are supporting both v1 and v2 of RNGH at the same time.
+// SwipeableProps is only exported in v2, so we have to use ComponentProps.
+type RnghSwipeableProps = ComponentProps<typeof RnghSwipeable>;
 export interface SwipeableProps
   extends Pick<
     RnghSwipeableProps,
@@ -53,6 +61,10 @@ export interface SwipeableProps
    * By default, it will take up the whole width of the device.
    */
   rightActionsWidth?: number;
+  /**
+   * Testing ID of the component
+   */
+  testID?: string;
 }
 
 const renderActions = (

package/src/components/Switch/SelectorSwitch/Option.tsx

@@ -46,11 +46,7 @@ const Option = <T,>({
     return (
       <StyledTextWrapper>
         <OptionContent
-          content={
-            <Typography.Text fontSize="large" intent="inverted">
-              {text}
-            </Typography.Text>
-          }
+          content={<Typography.Text fontSize="large">{text}</Typography.Text>}
           badge={badge}
         />
       </StyledTextWrapper>

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -67,7 +67,7 @@ exports[`Option renders correctly when selected 1`] = `
     Array [
       Object {
         "alignItems": "center",
-        "backgroundColor": "#401960",
+        "backgroundColor": "#ffffff",
         "borderRadius": 999,
         "flex": 1,
         "justifyContent": "center",
@@ -88,7 +88,7 @@ exports[`Option renders correctly when selected 1`] = `
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -99,7 +99,7 @@ exports[`Option renders correctly when selected 1`] = `
       }
       themeFontSize="large"
       themeFontWeight="regular"
-      themeIntent="inverted"
+      themeIntent="body"
     >
       My Dashboard
     </Text>

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

@@ -30,7 +30,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
       Array [
         Object {
           "alignItems": "center",
-          "backgroundColor": "#401960",
+          "backgroundColor": "#ffffff",
           "borderRadius": 999,
           "flex": 1,
           "justifyContent": "center",
@@ -43,7 +43,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
       style={
         Array [
           Object {
-            "color": "#ffffff",
+            "color": "#001f23",
             "fontFamily": "BeVietnamPro-Regular",
             "fontSize": 16,
             "letterSpacing": 0.48,
@@ -54,7 +54,7 @@ exports[`SelectorSwitch renders correctly 1`] = `
       }
       themeFontSize="large"
       themeFontWeight="regular"
-      themeIntent="inverted"
+      themeIntent="body"
     >
       My Dashboard
     </Text>

package/src/components/Switch/SelectorSwitch/__tests__/index.spec.tsx

@@ -23,6 +23,7 @@ describe('SelectorSwitch', () => {
           },
         ]}
         value="employee"
+        onPress={jest.fn()}
       />
     );
 

package/src/components/Switch/SelectorSwitch/index.tsx

@@ -47,7 +47,10 @@ const SelectorSwitch = <T,>({
   style,
   testID,
 }: SelectorSwitchProps<T>): ReactElement => (
-  <TouchableWithoutFeedback onPress={() => onPress(value)} testID={testID}>
+  <TouchableWithoutFeedback
+    onPress={onPress !== undefined ? () => onPress(value) : undefined}
+    testID={testID}
+  >
     <StyledWrapper style={style}>
       {options.map((opt, index) => (
         // eslint-disable-next-line react/no-array-index-key

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

@@ -42,7 +42,7 @@ exports[`StyledWrapper renders correct style with variant disabled-checked 1`] =
   style={
     Array [
       Object {
-        "backgroundColor": "#a08cb0",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 999,
         "display": "flex",
         "height": 32,

package/src/components/Tabs/StyledTabs.tsx

@@ -39,7 +39,7 @@ const StyledIndicator = styled(Animated.View)<{ themeWidth: number }>(
   ({ theme, themeWidth }) => ({
     width: themeWidth,
     height: theme.__hd__.tabs.sizes.indicator,
-    backgroundColor: theme.__hd__.tabs.colors.text,
+    backgroundColor: theme.__hd__.tabs.colors.indicator,
     position: 'absolute',
     bottom: 0,
   })

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

@@ -239,7 +239,7 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                   nativeID="animatedComponent"
                   style={
                     Object {
-                      "backgroundColor": "#e6e9e9",
+                      "backgroundColor": "#ccd2d3",
                       "borderRadius": 8,
                       "flex": 1,
                       "transform": Array [

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

@@ -405,7 +405,7 @@ exports[`Tabs renders correctly 1`] = `
           nativeID="animatedComponent"
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#401960",
               "bottom": 0,
               "height": 2,
               "position": "absolute",

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

@@ -44,7 +44,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     Array [
       Object {
         "backgroundColor": undefined,
-        "borderColor": "#001f23",
+        "borderColor": "#401960",
         "borderRadius": 4,
         "borderWidth": 1,
         "paddingHorizontal": 8,
@@ -59,7 +59,7 @@ exports[`Tag has archived style when intent is primary 1`] = `
     style={
       Array [
         Object {
-          "color": "#001f23",
+          "color": "#401960",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 12,
           "includeFontPadding": false,

package/src/components/TextInput/StyledTextInput.tsx

@@ -89,6 +89,7 @@ const StyledTextInput = styled(TextInput)(({ theme }) => ({
   alignSelf: 'stretch',
   flexGrow: 2,
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
+  paddingVertical: 0,
 }));
 
 const StyledBorderBackDrop = styled(View)<{

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -125,7 +125,7 @@ exports[`Label renders correctly with themeVariant readonly 1`] = `
       },
       Array [
         Object {
-          "color": "#bfc1c5",
+          "color": "#808f91",
         },
         undefined,
       ],
@@ -302,7 +302,7 @@ exports[`LabelInsideTextInput renders correctly with themeVariant readonly 1`] =
         Object {
           "alignContent": "center",
           "alignItems": "center",
-          "color": "#bfc1c5",
+          "color": "#808f91",
           "fontSize": 14,
           "textAlignVertical": "center",
         },
@@ -332,7 +332,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant default 1`] = `
       },
       Array [
         Object {
-          "color": "#f46363",
+          "color": "#de350b",
         },
         undefined,
       ],
@@ -388,7 +388,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant error 1`] = `
       },
       Array [
         Object {
-          "color": "#f46363",
+          "color": "#de350b",
         },
         undefined,
       ],
@@ -416,7 +416,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant filled 1`] = `
       },
       Array [
         Object {
-          "color": "#f46363",
+          "color": "#de350b",
         },
         undefined,
       ],
@@ -464,7 +464,7 @@ exports[`StyledBorderBackDrop renders correctly when focused 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#f46363",
+        "borderColor": "#de350b",
         "borderRadius": 8,
         "borderWidth": 2,
         "bottom": 0,
@@ -530,7 +530,7 @@ exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#f46363",
+        "borderColor": "#de350b",
         "borderRadius": 8,
         "borderWidth": 1,
         "bottom": 0,
@@ -604,7 +604,7 @@ exports[`StyledErrorMessage renders correctly 1`] = `
       },
       Array [
         Object {
-          "color": "#f46363",
+          "color": "#de350b",
           "fontSize": 12,
           "marginLeft": 4,
         },
@@ -752,7 +752,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant error 1`] =
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#f46363",
+          "color": "#de350b",
           "flex": 1,
           "flexGrow": 1,
           "fontSize": 12,
@@ -820,7 +820,7 @@ exports[`StyledMaxLengthMessage renders correctly with themeVariant readonly 1`]
       Array [
         Object {
           "alignSelf": "flex-end",
-          "color": "#bfc1c5",
+          "color": "#808f91",
           "flex": 1,
           "flexGrow": 1,
           "fontSize": 12,
@@ -849,6 +849,7 @@ exports[`StyledTextInput renders correctly 1`] = `
         "flexGrow": 2,
         "fontSize": 14,
         "marginHorizontal": 8,
+        "paddingVertical": 0,
         "textAlignVertical": "center",
       },
       undefined,