@hero-design/rn 8.41.3-alpha-0 → 8.41.3

package/src/components/Carousel/index.tsx

@@ -86,6 +86,7 @@ const Carousel = ({
   selectedItemIndex = 0,
   style,
   shouldShowPagination = noop,
+  testID,
   pageControlPosition = 'top',
   ...nativeProps
 }: CarouselProps) => {
@@ -131,14 +132,17 @@ const Carousel = ({
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
   const onViewCallBack = React.useCallback(
     (info: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) => {
-      if (info.viewableItems.length > 0) {
-        internalOnItemIndexChange(info.viewableItems[0].index || 0);
+      const firstVisibleItem = info.viewableItems.find(
+        (view) => view.index != null && view.isViewable
+      );
+      if (firstVisibleItem) {
+        internalOnItemIndexChange(firstVisibleItem.index || 0);
       }
     },
-    []
+    [internalOnItemIndexChange]
   );
   return (
-    <View style={style} {...nativeProps}>
+    <View style={style} testID={testID} {...nativeProps}>
       <StyledBackDrop
         themeSlideBackground={items[currentSlideIndex].background}
       />
@@ -155,6 +159,7 @@ const Carousel = ({
 
       <StyledCarouselView>
         <FlatList
+          testID={testID ? `${testID}_flatlist` : undefined}
           horizontal
           showsHorizontalScrollIndicator={false}
           pagingEnabled

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

@@ -13,6 +13,11 @@ exports[`RefreshControl renders correctly 1`] = `
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     collapsable={false}
     style={
       {
@@ -27,6 +32,11 @@ exports[`RefreshControl renders correctly 1`] = `
     testID="page-control-indicator0"
   />
   <View
+    accessibilityState={
+      {
+        "selected": true,
+      }
+    }
     collapsable={false}
     style={
       {
@@ -41,6 +51,11 @@ exports[`RefreshControl renders correctly 1`] = `
     testID="page-control-indicator1"
   />
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     collapsable={false}
     style={
       {

package/src/components/PageControl/index.tsx

@@ -61,6 +61,7 @@ const PageControl = ({
 
         return (
           <StyledPageControlAnimatedView
+            accessibilityState={{ selected: index === currentPage }}
             style={[{ width: indicatorWidth, opacity }]}
             key={index.toString()}
             testID={`page-control-indicator${index}`}

package/types/components/Carousel/index.d.ts

@@ -38,7 +38,7 @@ interface CarouselProps extends ViewProps {
     pageControlPosition?: 'top' | 'bottom';
 }
 export declare function useStateFromProp<T>(initialValue: T): [T, Dispatch<SetStateAction<T>>];
-declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, pageControlPosition, ...nativeProps }: CarouselProps) => JSX.Element) & {
+declare const _default: (({ items, onItemIndexChange, renderActions, selectedItemIndex, style, shouldShowPagination, testID, pageControlPosition, ...nativeProps }: CarouselProps) => JSX.Element) & {
     Card: React.ForwardRefExoticComponent<Pick<import("./CardCarousel").CardCarouselProps, "style" | "onLayout" | "testID" | "items" | "onItemIndexChange" | "hidePageControl" | "autoPlay" | "autoPlayInterval"> & React.RefAttributes<import("./CardCarousel").CardCarouselHandles>>;
 };
 export default _default;