@hero-design/rn 8.42.0-alpha.0 → 8.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.42.0-alpha.0",
+  "version": "8.42.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,14 +21,14 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.42.0-alpha.0",
+    "@hero-design/colors": "8.42.0",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.0-alpha.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -36,7 +36,6 @@
     "react-native-gesture-handler": "^1.10.3 | ~2.5.0",
     "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "^5.4.25",
-    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "^3.0.2",
     "react-native-vector-icons": "^9.1.0",
     "react-native-webview": "^11.2.5"
@@ -48,8 +47,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.11.0",
-    "@hero-design/eslint-plugin": "8.42.0-alpha.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.0-alpha.0",
+    "@hero-design/eslint-plugin": "8.42.0",
+    "@hero-design/react-native-month-year-picker": "^8.42.0",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -65,12 +64,12 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.42.0-alpha.0",
+    "eslint-config-hd": "8.42.0",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^29.6.2",
     "jest-environment-jsdom": "^29.6.2",
     "jest-junit": "^16.0.0",
-    "prettier-config-hd": "8.42.0-alpha.0",
+    "prettier-config-hd": "8.42.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/rollup.config.js

@@ -35,7 +35,6 @@ export default {
     'react-native-vector-icons',
     'react-native-linear-gradient',
     '@hero-design/react-native-month-year-picker',
-    'react-native-root-siblings',
   ],
   plugins: [
     replace({

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

@@ -264,6 +264,11 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
     testID="pageControl"
   >
     <View
+      accessibilityState={
+        {
+          "selected": true,
+        }
+      }
       collapsable={false}
       style={
         {
@@ -278,6 +283,11 @@ exports[`CardCarousel android should render correctly on iOS 1`] = `
       testID="page-control-indicator0"
     />
     <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
+      }
       collapsable={false}
       style={
         {
@@ -559,6 +569,11 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
     testID="pageControl"
   >
     <View
+      accessibilityState={
+        {
+          "selected": true,
+        }
+      }
       collapsable={false}
       style={
         {
@@ -573,6 +588,11 @@ exports[`CardCarousel ios should render correctly on iOS 1`] = `
       testID="page-control-indicator0"
     />
     <View
+      accessibilityState={
+        {
+          "selected": false,
+        }
+      }
       collapsable={false}
       style={
         {

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

@@ -53,6 +53,11 @@ exports[`StyledPageControl should render correctly 1`] = `
   }
 >
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     collapsable={false}
     style={
       {
@@ -67,6 +72,11 @@ exports[`StyledPageControl should render correctly 1`] = `
     testID="page-control-indicator0"
   />
   <View
+    accessibilityState={
+      {
+        "selected": true,
+      }
+    }
     collapsable={false}
     style={
       {
@@ -81,6 +91,11 @@ exports[`StyledPageControl should render correctly 1`] = `
     testID="page-control-indicator1"
   />
   <View
+    accessibilityState={
+      {
+        "selected": false,
+      }
+    }
     collapsable={false}
     style={
       {

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

@@ -99,18 +99,29 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
       onScroll={[Function]}
       onScrollBeginDrag={[Function]}
       onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
       pagingEnabled={true}
       removeClippedSubviews={false}
       renderItem={[Function]}
       scrollEventThrottle={32}
       showsHorizontalScrollIndicator={false}
       stickyHeaderIndices={[]}
+      testID="carousel_flatlist"
       viewabilityConfig={
         {
           "viewAreaCoveragePercentThreshold": 50,
         }
       }
-      viewabilityConfigCallbackPairs={[]}
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "viewAreaCoveragePercentThreshold": 50,
+            },
+          },
+        ]
+      }
     >
       <View>
         <View
@@ -667,6 +678,11 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
         }
       >
         <View
+          accessibilityState={
+            {
+              "selected": true,
+            }
+          }
           collapsable={false}
           style={
             {
@@ -681,6 +697,11 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           testID="page-control-indicator0"
         />
         <View
+          accessibilityState={
+            {
+              "selected": false,
+            }
+          }
           collapsable={false}
           style={
             {
@@ -695,6 +716,11 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           testID="page-control-indicator1"
         />
         <View
+          accessibilityState={
+            {
+              "selected": false,
+            }
+          }
           collapsable={false}
           style={
             {
@@ -709,6 +735,11 @@ exports[`Carousel renders correctly with pageControlPosition bottom 1`] = `
           testID="page-control-indicator2"
         />
         <View
+          accessibilityState={
+            {
+              "selected": false,
+            }
+          }
           collapsable={false}
           style={
             {
@@ -777,6 +808,11 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
       }
     >
       <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -791,6 +827,11 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         testID="page-control-indicator0"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -805,6 +846,11 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         testID="page-control-indicator1"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -819,6 +865,11 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
         testID="page-control-indicator2"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -901,18 +952,29 @@ exports[`Carousel renders correctly with pageControlPosition top 1`] = `
       onScroll={[Function]}
       onScrollBeginDrag={[Function]}
       onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
       pagingEnabled={true}
       removeClippedSubviews={false}
       renderItem={[Function]}
       scrollEventThrottle={32}
       showsHorizontalScrollIndicator={false}
       stickyHeaderIndices={[]}
+      testID="carousel_flatlist"
       viewabilityConfig={
         {
           "viewAreaCoveragePercentThreshold": 50,
         }
       }
-      viewabilityConfigCallbackPairs={[]}
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "viewAreaCoveragePercentThreshold": 50,
+            },
+          },
+        ]
+      }
     >
       <View>
         <View
@@ -1506,6 +1568,11 @@ exports[`Carousel should call skip call back when press skip 1`] = `
       }
     >
       <View
+        accessibilityState={
+          {
+            "selected": true,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -1520,6 +1587,11 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         testID="page-control-indicator0"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -1534,6 +1606,11 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         testID="page-control-indicator1"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -1548,6 +1625,11 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         testID="page-control-indicator2"
       />
       <View
+        accessibilityState={
+          {
+            "selected": false,
+          }
+        }
         collapsable={false}
         style={
           {
@@ -1630,18 +1712,29 @@ exports[`Carousel should call skip call back when press skip 1`] = `
       onScroll={[Function]}
       onScrollBeginDrag={[Function]}
       onScrollEndDrag={[Function]}
+      onViewableItemsChanged={[Function]}
       pagingEnabled={true}
       removeClippedSubviews={false}
       renderItem={[Function]}
       scrollEventThrottle={32}
       showsHorizontalScrollIndicator={false}
       stickyHeaderIndices={[]}
+      testID="carousel_flatlist"
       viewabilityConfig={
         {
           "viewAreaCoveragePercentThreshold": 50,
         }
       }
-      viewabilityConfigCallbackPairs={[]}
+      viewabilityConfigCallbackPairs={
+        [
+          {
+            "onViewableItemsChanged": [Function],
+            "viewabilityConfig": {
+              "viewAreaCoveragePercentThreshold": 50,
+            },
+          },
+        ]
+      }
     >
       <View>
         <View

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 { theme } from '../../..';
+import { ThemeProvider, theme } from '../../..';
 import Button from '../../Button/Button';
 
 const carouselData = [
@@ -112,4 +112,50 @@ describe('Carousel', () => {
     fireEvent.press(queryByText('Skip'));
     expect(onSkip).toBeCalled();
   });
+
+  it("pageControl' current index should change to 1 when scroll", async () => {
+    const onSkip = jest.fn();
+
+    const { rerender, getByTestId } = renderWithTheme(
+      <Carousel
+        testID="carousel"
+        items={carouselData}
+        renderActions={(_) => {
+          return <Button text="Skip" onPress={onSkip} />;
+        }}
+      />
+    );
+    const eventData = {
+      viewableItems: [
+        {
+          index: 0,
+          isViewable: false,
+        },
+        {
+          index: 1,
+          isViewable: true,
+        },
+      ],
+    };
+    fireEvent(
+      getByTestId('carousel_flatlist'),
+      'onViewableItemsChanged',
+      eventData
+    );
+    rerender(
+      <ThemeProvider theme={theme}>
+        <Carousel
+          testID="carousel"
+          items={carouselData}
+          renderActions={(_) => {
+            return <Button text="Skip" onPress={onSkip} />;
+          }}
+        />
+      </ThemeProvider>
+    );
+
+    expect(getByTestId('page-control-indicator1')).toHaveAccessibilityState({
+      selected: true,
+    });
+  });
 });

package/src/components/Carousel/index.tsx

@@ -9,13 +9,12 @@ import React, {
 import {
   Animated,
   FlatList,
-  NativeScrollEvent,
-  NativeSyntheticEvent,
   StyleProp,
   useWindowDimensions,
   View,
   ViewProps,
   ViewStyle,
+  ViewToken,
 } from 'react-native';
 
 import { CarouselData } from './types';
@@ -87,6 +86,7 @@ const Carousel = ({
   selectedItemIndex = 0,
   style,
   shouldShowPagination = noop,
+  testID,
   pageControlPosition = 'top',
   ...nativeProps
 }: CarouselProps) => {
@@ -129,27 +129,20 @@ const Carousel = ({
     };
   }, [currentSlideIndex, carouselRef]);
 
-  const handleMomentumScrollEnd = (
-    event: NativeSyntheticEvent<NativeScrollEvent>
-  ) => {
-    // Calculate the current index based on the scroll position and container width
-    const containerWidth = event.nativeEvent.layoutMeasurement.width;
-    const scrollPosition = event.nativeEvent.contentOffset.x;
-
-    /**
-     * By rounding down, we ensure that any partial visibility of the next item does not affect the index value
-     * This helps maintain consistent behavior and aligns with the desired functionality of considering the left-most visible item as the current item.
-     */
-    const index = Math.floor(scrollPosition / containerWidth);
-
-    // Call the callback function with the current index
-    internalOnItemIndexChange(index);
-  };
-
   const viewConfig = useRef({ viewAreaCoveragePercentThreshold: 50 }).current;
-
+  const onViewCallBack = React.useCallback(
+    (info: { viewableItems: Array<ViewToken>; changed: Array<ViewToken> }) => {
+      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}
       />
@@ -166,12 +159,13 @@ const Carousel = ({
 
       <StyledCarouselView>
         <FlatList
+          testID={testID ? `${testID}_flatlist` : undefined}
           horizontal
           showsHorizontalScrollIndicator={false}
           pagingEnabled
           bounces={false}
           data={items}
-          onMomentumScrollEnd={handleMomentumScrollEnd}
+          onViewableItemsChanged={onViewCallBack}
           viewabilityConfig={viewConfig}
           scrollEventThrottle={32}
           ref={carouselRef}

package/src/components/Error/StyledError.tsx

@@ -1,8 +1,9 @@
 import styled from '@emotion/native';
-import { Modal, View } from 'react-native';
+import { View } from 'react-native';
 import Image from '../Image';
 import Typography from '../Typography';
 import Button from '../Button';
+import Modal from '../Modal';
 
 type ErrorVariant = 'full-screen' | 'in-page';