@hero-design/rn 8.42.4 → 8.43.1

package/src/components/Button/__tests__/__snapshots__/StyledButton.spec.tsx.snap

@@ -2,6 +2,14 @@
 
 exports[`StyledButtonContainer has filled-danger style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -19,6 +27,7 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
         "backgroundColor": "#cb300a",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -34,6 +43,14 @@ exports[`StyledButtonContainer has filled-danger style 1`] = `
 
 exports[`StyledButtonContainer has filled-primary style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -51,6 +68,7 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
         "backgroundColor": "#401960",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -66,6 +84,14 @@ exports[`StyledButtonContainer has filled-primary style 1`] = `
 
 exports[`StyledButtonContainer has filled-secondary style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -83,6 +109,7 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
         "backgroundColor": "#795e90",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },
@@ -98,6 +125,14 @@ exports[`StyledButtonContainer has filled-secondary style 1`] = `
 
 exports[`StyledButtonContainer has outlined-danger style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -117,6 +152,7 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -132,6 +168,14 @@ exports[`StyledButtonContainer has outlined-danger style 1`] = `
 
 exports[`StyledButtonContainer has outlined-primary style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -151,6 +195,7 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -166,6 +211,14 @@ exports[`StyledButtonContainer has outlined-primary style 1`] = `
 
 exports[`StyledButtonContainer has outlined-secondary style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -185,6 +238,7 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
         "borderRadius": 32,
         "borderWidth": 2,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 14,
       },
@@ -200,6 +254,14 @@ exports[`StyledButtonContainer has outlined-secondary style 1`] = `
 
 exports[`StyledButtonContainer has text-danger style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -217,6 +279,7 @@ exports[`StyledButtonContainer has text-danger style 1`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -232,6 +295,14 @@ exports[`StyledButtonContainer has text-danger style 1`] = `
 
 exports[`StyledButtonContainer has text-primary style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -249,6 +320,7 @@ exports[`StyledButtonContainer has text-primary style 1`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -264,6 +336,14 @@ exports[`StyledButtonContainer has text-primary style 1`] = `
 
 exports[`StyledButtonContainer has text-secondary style 1`] = `
 <View
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -281,6 +361,7 @@ exports[`StyledButtonContainer has text-secondary style 1`] = `
         "borderRadius": 4,
         "borderWidth": 0,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 12,
       },
@@ -301,6 +382,14 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
       "disabled": true,
     }
   }
+  accessibilityValue={
+    {
+      "max": undefined,
+      "min": undefined,
+      "now": undefined,
+      "text": undefined,
+    }
+  }
   accessible={true}
   focusable={false}
   onClick={[Function]}
@@ -318,6 +407,7 @@ exports[`StyledButtonContainer renders disabled correctly 1`] = `
         "backgroundColor": "#bfc1c5",
         "borderRadius": 32,
         "flexDirection": "row",
+        "height": 60,
         "justifyContent": "center",
         "padding": 16,
       },

package/src/components/Calendar/__tests__/__snapshots__/CalendarRowItem.spec.tsx.snap

@@ -17,6 +17,23 @@ exports[`CalendarRowItem renders correctly 1`] = `
   testID="calendar-date-cell"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -99,6 +116,23 @@ exports[`CalendarRowItem renders correctly 2`] = `
   testID="calendar-date-cell"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -181,6 +215,23 @@ exports[`CalendarRowItem renders correctly when is current date 1`] = `
   testID="calendar-date-cell"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -263,6 +314,23 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
   testID="calendar-date-cell"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}
@@ -345,6 +413,23 @@ exports[`CalendarRowItem renders correctly when selected, and is current date eq
   testID="calendar-date-cell"
 >
   <View
+    accessibilityState={
+      {
+        "busy": undefined,
+        "checked": undefined,
+        "disabled": undefined,
+        "expanded": undefined,
+        "selected": undefined,
+      }
+    }
+    accessibilityValue={
+      {
+        "max": undefined,
+        "min": undefined,
+        "now": undefined,
+        "text": undefined,
+      }
+    }
     accessible={true}
     collapsable={false}
     focusable={true}

package/src/components/Carousel/CardCarousel.tsx

@@ -8,13 +8,14 @@ import React, {
 import {
   FlatList,
   LayoutChangeEvent,
+  ListRenderItem,
   Platform,
   StyleProp,
   View,
   ViewStyle,
+  ViewToken,
 } from 'react-native';
 import { useTheme } from '../../theme';
-import { ITEM_WIDTH_RATE, VIEW_POSITION_CENTER } from './contants';
 import {
   StyledCard,
   StyledItemWrapper,
@@ -22,6 +23,7 @@ import {
   StyledShadow,
   StyledWrapper,
 } from './StyledCardCarousel';
+import { ITEM_WIDTH_RATE, VIEW_POSITION_CENTER } from './contants';
 
 export type CardCarouselHandles = {
   snapToIndex: (index: number) => void;
@@ -90,7 +92,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     const viewPosition =
       Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
     const snapToIndex = useCallback(
-      (index) => {
+      (index: number) => {
         let validIndex = 0;
         if (index < 0) {
           validIndex = 0;
@@ -149,12 +151,13 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     }, [autoPlay, snapToNext, currentIndex, autoPlayInterval]);
 
     const visibleSlideChanged = useCallback(
-      ({ viewableItems }) => {
+      ({ viewableItems }: { viewableItems: ViewToken[] }) => {
         if (!viewableItems || (viewableItems && !viewableItems.length)) return;
         const { index } = viewableItems[0];
-        setCurrentIndex(index);
+
+        setCurrentIndex(index || 0);
         if (onItemIndexChange) {
-          onItemIndexChange(index);
+          onItemIndexChange(index || 0);
         }
       },
       [onItemIndexChange]
@@ -170,7 +173,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     );
 
     const flatListOnLayout = useCallback(
-      (e) => {
+      (e: LayoutChangeEvent) => {
         setFlatListWidth(e.nativeEvent.layout.width);
         setTimeout(() => {
           onLayout?.(e);
@@ -179,7 +182,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       [setFlatListWidth, onLayout]
     );
 
-    const renderItem = useCallback(
+    const renderItem: ListRenderItem<React.ReactNode> = useCallback(
       ({ item }) => {
         return (
           <StyledItemWrapper style={{ width: itemWidth }}>

package/src/components/Carousel/__tests__/__snapshots__/CardCarousel.spec.tsx.snap

@@ -78,6 +78,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
   >
     <View>
       <View
+        onFocusCapture={[Function]}
         style={
           [
             {
@@ -161,6 +162,7 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
         </View>
       </View>
       <View
+        onFocusCapture={[Function]}
         style={
           [
             {
@@ -383,6 +385,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
   >
     <View>
       <View
+        onFocusCapture={[Function]}
         style={
           [
             {
@@ -466,6 +469,7 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
         </View>
       </View>
       <View
+        onFocusCapture={[Function]}
         style={
           [
             {

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

@@ -125,6 +125,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
     >
       <View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -235,6 +236,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -366,6 +368,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -486,6 +489,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -605,6 +609,14 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
             "disabled": false,
           }
         }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
         accessible={true}
         focusable={true}
         onClick={[Function]}
@@ -622,6 +634,7 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
               "backgroundColor": "#401960",
               "borderRadius": 32,
               "flexDirection": "row",
+              "height": 60,
               "justifyContent": "center",
               "padding": 16,
             },
@@ -978,6 +991,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
     >
       <View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -1088,6 +1102,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -1219,6 +1234,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -1339,6 +1355,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -1458,6 +1475,14 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
             "disabled": false,
           }
         }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
         accessible={true}
         focusable={true}
         onClick={[Function]}
@@ -1475,6 +1500,7 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
               "backgroundColor": "#401960",
               "borderRadius": 32,
               "flexDirection": "row",
+              "height": 60,
               "justifyContent": "center",
               "padding": 16,
             },
@@ -1738,6 +1764,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
     >
       <View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -1848,6 +1875,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -1979,6 +2007,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -2099,6 +2128,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
           </View>
         </View>
         <View
+          onFocusCapture={[Function]}
           onLayout={[Function]}
           style={
             [
@@ -2218,6 +2248,14 @@ exports[`Carousel should call skip call back when press skip 1`] = `
             "disabled": false,
           }
         }
+        accessibilityValue={
+          {
+            "max": undefined,
+            "min": undefined,
+            "now": undefined,
+            "text": undefined,
+          }
+        }
         accessible={true}
         focusable={true}
         onClick={[Function]}
@@ -2235,6 +2273,7 @@ exports[`Carousel should call skip call back when press skip 1`] = `
               "backgroundColor": "#401960",
               "borderRadius": 32,
               "flexDirection": "row",
+              "height": 60,
               "justifyContent": "center",
               "padding": 16,
             },

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

@@ -4,7 +4,7 @@ import { ImageResizeMode } from 'react-native';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import Carousel from '..';
 import Image from '../../Image';
-import { Portal, ThemeProvider, theme } from '../../..';
+import { ThemeProvider, theme } from '../../..';
 import Button from '../../Button/Button';
 
 const carouselData = [
@@ -144,15 +144,13 @@ describe('Carousel', () => {
     );
     rerender(
       <ThemeProvider theme={theme}>
-        <Portal.Provider>
-          <Carousel
-            testID="carousel"
-            items={carouselData}
-            renderActions={(_) => {
-              return <Button text="Skip" onPress={onSkip} />;
-            }}
-          />
-        </Portal.Provider>
+        <Carousel
+          testID="carousel"
+          items={carouselData}
+          renderActions={(_) => {
+            return <Button text="Skip" onPress={onSkip} />;
+          }}
+        />
       </ThemeProvider>
     );