@hero-design/rn 8.63.2-alpha.3 → 8.63.3

package/.turbo/turbo-build.log

@@ -0,0 +1,5 @@
+
+src/index.ts → lib/index.js, es/index.js...
+(!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
+(!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+created lib/index.js, es/index.js in 1m 3s

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @hero-design/rn
 
+## 8.63.3
+
+### Patch Changes
+
+- [#3129](https://github.com/Thinkei/hero-design/pull/3129) [`116f04b1a`](https://github.com/Thinkei/hero-design/commit/116f04b1ae7a63a4f3563a935989a318200ce044) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Fix mobile visual tests workflow
+
+- Updated dependencies [[`de331a19e`](https://github.com/Thinkei/hero-design/commit/de331a19ea56e55ff18b060a21b31831df60c794), [`264d28d3c`](https://github.com/Thinkei/hero-design/commit/264d28d3cb2f68b96bc94f4b72a9681cd4c4abb0)]:
+  - @hero-design/react-native-month-year-picker@8.42.10
+
+## 8.63.2
+
+### Patch Changes
+
+- [#3112](https://github.com/Thinkei/hero-design/pull/3112) [`81863a4dd`](https://github.com/Thinkei/hero-design/commit/81863a4ddf02cb87ebc21b8e2fab217166c71339) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Update Error component local name
+
+- [#3116](https://github.com/Thinkei/hero-design/pull/3116) [`93ce5c6d4`](https://github.com/Thinkei/hero-design/commit/93ce5c6d461d813ba37a3bc26cb817ecad21ee62) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Slider] Update thumb color
+
+- [#3104](https://github.com/Thinkei/hero-design/pull/3104) [`f978158f5`](https://github.com/Thinkei/hero-design/commit/f978158f5e649748fbdd42b2eba4b789458a10f9) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - Upgrade Expo SDK to v50
+
 ## 8.63.1
 
 ### Patch Changes

package/es/index.js

@@ -3085,7 +3085,7 @@ var getSkeletonTheme = function getSkeletonTheme(theme) {
 var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
     minimumTrackTint: theme.colors.primary,
-    thumbTint: theme.colors.neutralGlobalSurface,
+    thumbTint: theme.colors.primary,
     maximumTrackTint: theme.colors.highlightedSurface
   };
   return {
@@ -8423,7 +8423,7 @@ var BottomNavigationContainer = index$9(View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper$2 = index$9(View)({
+var ContentWrapper = index$9(View)({
   flex: 1
 });
 var BottomBarWrapper = index$9(View)(function (_ref2) {
@@ -8486,7 +8486,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       return [].concat(_toConsumableArray(loadedState), [selectedTabKey]);
     });
   }
-  return /*#__PURE__*/React__default.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default.createElement(ContentWrapper$2, null, tabs.map(function (tab) {
+  return /*#__PURE__*/React__default.createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default.createElement(ContentWrapper, null, tabs.map(function (tab) {
     var key = tab.key,
       component = tab.component,
       testID = tab.testID;
@@ -15040,6 +15040,7 @@ var Toast$1 = function Toast(_ref2) {
     outputRange: toastConfig.position === 'top' ? [-20, distance] : [20, -distance]
   });
   return /*#__PURE__*/React__default.createElement(Container, {
+    testID: "toast-container",
     themeVariant: variant,
     themeIntent: intent,
     style: [style, {
@@ -17374,7 +17375,6 @@ var index$3 = Object.assign(Switch, {
   Selector: SelectorSwitch
 });
 
-var AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 var TabContainer$1 = index$9(View)({
   flex: 1,
   overflow: 'hidden'
@@ -17399,9 +17399,6 @@ var HeaderTabItem$1 = index$9(View)(function (_ref2) {
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var ContentWrapper$1 = index$9(AnimatedPagerView)({
-  flex: 1
-});
 index$9(View)({
   flex: 1
 });
@@ -17449,10 +17446,6 @@ var TabContainer = index$9(View)({
   flex: 1,
   overflow: 'hidden'
 });
-// @ts-expect-error: Test
-var ContentWrapper = index$9(PagerView)({
-  flex: 1
-});
 var HeaderTabWrapper = index$9(View)(function (_ref) {
   var themeInsets = _ref.themeInsets;
   return {
@@ -17903,7 +17896,8 @@ var ScrollableTab = function ScrollableTab(_ref) {
     insets: insets,
     testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
     variant: variant
-  }), /*#__PURE__*/React__default.createElement(ContentWrapper, {
+  }), /*#__PURE__*/React__default.createElement(PagerView, {
+    useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageScrollStateChanged: function onPageScrollStateChanged(e) {
@@ -17920,7 +17914,10 @@ var ScrollableTab = function ScrollableTab(_ref) {
         });
       }
     },
-    scrollEnabled: swipeEnabled
+    scrollEnabled: swipeEnabled,
+    style: {
+      flex: 1
+    }
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -17938,6 +17935,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
   }))));
 };
 
+var AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
     color = _ref.color,
@@ -18035,7 +18033,8 @@ var Tabs = function Tabs(_ref2) {
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
     tabsLength: tabs.length,
     tabsWidth: tabsWidth
-  }))), /*#__PURE__*/React__default.createElement(ContentWrapper$1, {
+  }))), /*#__PURE__*/React__default.createElement(AnimatedPagerView, {
+    useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -18053,7 +18052,10 @@ var Tabs = function Tabs(_ref2) {
     }], {
       useNativeDriver: true
     }),
-    scrollEnabled: swipeEnabled
+    scrollEnabled: swipeEnabled,
+    style: {
+      flex: 1
+    }
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,

package/lib/index.js

@@ -3115,7 +3115,7 @@ var getSkeletonTheme = function getSkeletonTheme(theme) {
 var getSliderTheme = function getSliderTheme(theme) {
   var colors = {
     minimumTrackTint: theme.colors.primary,
-    thumbTint: theme.colors.neutralGlobalSurface,
+    thumbTint: theme.colors.primary,
     maximumTrackTint: theme.colors.highlightedSurface
   };
   return {
@@ -8453,7 +8453,7 @@ var BottomNavigationContainer = index$9(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-var ContentWrapper$2 = index$9(reactNative.View)({
+var ContentWrapper = index$9(reactNative.View)({
   flex: 1
 });
 var BottomBarWrapper = index$9(reactNative.View)(function (_ref2) {
@@ -8516,7 +8516,7 @@ var BottomNavigation = function BottomNavigation(_ref) {
       return [].concat(_toConsumableArray(loadedState), [selectedTabKey]);
     });
   }
-  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper$2, null, tabs.map(function (tab) {
+  return /*#__PURE__*/React__default["default"].createElement(BottomNavigationContainer, nativeProps, /*#__PURE__*/React__default["default"].createElement(ContentWrapper, null, tabs.map(function (tab) {
     var key = tab.key,
       component = tab.component,
       testID = tab.testID;
@@ -15070,6 +15070,7 @@ var Toast$1 = function Toast(_ref2) {
     outputRange: toastConfig.position === 'top' ? [-20, distance] : [20, -distance]
   });
   return /*#__PURE__*/React__default["default"].createElement(Container, {
+    testID: "toast-container",
     themeVariant: variant,
     themeIntent: intent,
     style: [style, {
@@ -17404,7 +17405,6 @@ var index$3 = Object.assign(Switch, {
   Selector: SelectorSwitch
 });
 
-var AnimatedPagerView = reactNative.Animated.createAnimatedComponent(PagerView__default["default"]);
 var TabContainer$1 = index$9(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
@@ -17429,9 +17429,6 @@ var HeaderTabItem$1 = index$9(reactNative.View)(function (_ref2) {
     paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding
   };
 });
-var ContentWrapper$1 = index$9(AnimatedPagerView)({
-  flex: 1
-});
 index$9(reactNative.View)({
   flex: 1
 });
@@ -17479,10 +17476,6 @@ var TabContainer = index$9(reactNative.View)({
   flex: 1,
   overflow: 'hidden'
 });
-// @ts-expect-error: Test
-var ContentWrapper = index$9(PagerView__default["default"])({
-  flex: 1
-});
 var HeaderTabWrapper = index$9(reactNative.View)(function (_ref) {
   var themeInsets = _ref.themeInsets;
   return {
@@ -17933,7 +17926,8 @@ var ScrollableTab = function ScrollableTab(_ref) {
     insets: insets,
     testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
     variant: variant
-  }), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
+  }), /*#__PURE__*/React__default["default"].createElement(PagerView__default["default"], {
+    useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageScrollStateChanged: function onPageScrollStateChanged(e) {
@@ -17950,7 +17944,10 @@ var ScrollableTab = function ScrollableTab(_ref) {
         });
       }
     },
-    scrollEnabled: swipeEnabled
+    scrollEnabled: swipeEnabled,
+    style: {
+      flex: 1
+    }
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,
@@ -17968,6 +17965,7 @@ var ScrollableTab = function ScrollableTab(_ref) {
   }))));
 };
 
+var AnimatedPagerView = reactNative.Animated.createAnimatedComponent(PagerView__default["default"]);
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
     color = _ref.color,
@@ -18065,7 +18063,8 @@ var Tabs = function Tabs(_ref2) {
     scrollOffsetAnimatedValue: scrollOffsetAnimatedValue,
     tabsLength: tabs.length,
     tabsWidth: tabsWidth
-  }))), /*#__PURE__*/React__default["default"].createElement(ContentWrapper$1, {
+  }))), /*#__PURE__*/React__default["default"].createElement(AnimatedPagerView, {
+    useNext: true,
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -18083,7 +18082,10 @@ var Tabs = function Tabs(_ref2) {
     }], {
       useNativeDriver: true
     }),
-    scrollEnabled: swipeEnabled
+    scrollEnabled: swipeEnabled,
+    style: {
+      flex: 1
+    }
   }, tabs.map(function (tab, index) {
     var key = tab.key,
       component = tab.component,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.63.2-alpha.3",
+  "version": "8.63.3",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -28,7 +28,7 @@
     "nanoid": "^4.0.2"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.42.9",
+    "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "^3.5.2 || ^7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "react": "18.2.0",
@@ -48,7 +48,7 @@
     "@babel/runtime": "^7.20.0",
     "@emotion/jest": "^11.11.0",
     "@hero-design/eslint-plugin": "9.0.0",
-    "@hero-design/react-native-month-year-picker": "^8.42.9",
+    "@hero-design/react-native-month-year-picker": "^8.42.10",
     "@react-native-community/datetimepicker": "7.6.1",
     "@react-native-community/slider": "^4.5.1",
     "@rollup/plugin-babel": "^5.3.1",
@@ -89,6 +89,5 @@
     "ts-jest": "^29.1.1",
     "typescript": "4.8.4"
   },
-  "prettier": "prettier-config-hd",
-  "react-native": "src/index.ts"
+  "prettier": "prettier-config-hd"
 }

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

@@ -15,7 +15,7 @@ exports[`Slider renders correctly by default 1`] = `
     minimumTrackTintColor="#401960"
     minimumValue={0}
     step={0}
-    thumbTintColor="#f6f6f7"
+    thumbTintColor="#401960"
     value={0}
   />
   <View
@@ -56,7 +56,7 @@ exports[`Slider renders correctly when disabled 1`] = `
     minimumTrackTintColor="#401960"
     minimumValue={0}
     step={0}
-    thumbTintColor="#f6f6f7"
+    thumbTintColor="#401960"
     value={0}
   />
   <View
@@ -100,7 +100,7 @@ exports[`Slider renders correctly with props 1`] = `
     onSlidingStart={[MockFunction]}
     onValueChange={[MockFunction]}
     step={0.25}
-    thumbTintColor="#f6f6f7"
+    thumbTintColor="#401960"
     value={0.5}
   />
   <View

package/src/components/Tabs/ScrollableTabs.tsx

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import PagerView from 'react-native-pager-view';
-import { TabContainer, ContentWrapper } from './StyledScrollableTabs';
+import { TabContainer } from './StyledScrollableTabs';
 import type { TabsProps } from '.';
 import SceneView from './SceneView';
 import ScrollableTabHeader from './ScrollableTabsHeader/ScrollableTabsHeader';
@@ -68,8 +68,8 @@ const ScrollableTab = ({
           testID={componentTestID ? `${componentTestID}-tab-bar` : undefined}
           variant={variant}
         />
-        {/* @ts-expect-error: Test */}
-        <ContentWrapper
+        <PagerView
+          useNext
           initialPage={selectedTabIndex}
           ref={pagerViewRef}
           onPageScrollStateChanged={(e) => {
@@ -90,6 +90,7 @@ const ScrollableTab = ({
             }
           }}
           scrollEnabled={swipeEnabled}
+          style={{ flex: 1 }}
         >
           {tabs.map((tab, index) => {
             const { key, component, testID } = tab;
@@ -108,7 +109,7 @@ const ScrollableTab = ({
               </ScreenContext.Provider>
             );
           })}
-        </ContentWrapper>
+        </PagerView>
       </TabContainer>
     </TabContext.Provider>
   );

package/src/components/Tabs/StyledScrollableTabs.tsx

@@ -1,6 +1,5 @@
 import { Animated, StyleSheet, View } from 'react-native';
 import styled from '@emotion/native';
-import PagerView from 'react-native-pager-view';
 
 const TabScreen = styled(View)({
   flex: 1,
@@ -11,10 +10,6 @@ const TabContainer = styled(View)({
   overflow: 'hidden',
 });
 
-const ContentWrapper = styled(PagerView)({
-  flex: 1,
-});
-
 const HeaderTabWrapper = styled(View)<{
   themeInsets: { top: number; right: number; bottom: number; left: number };
 }>(({ themeInsets }) => ({
@@ -64,7 +59,6 @@ export {
   TabScreen,
   TabContainer,
   HeaderTabWrapper,
-  ContentWrapper,
   HeaderTabItemOutlineWrapper,
   HeaderTabItemOutline,
   HeaderTabItemWrapper,

package/src/components/Tabs/StyledTabs.tsx

@@ -1,8 +1,5 @@
 import styled from '@emotion/native';
 import { Animated, View } from 'react-native';
-import PagerView from 'react-native-pager-view';
-
-const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
 
 const TabContainer = styled(View)({
   flex: 1,
@@ -27,10 +24,6 @@ const HeaderTabItem = styled(View)(({ theme }) => ({
   paddingVertical: theme.__hd__.tabs.space.itemVerticalPadding,
 }));
 
-const ContentWrapper = styled(AnimatedPagerView)({
-  flex: 1,
-});
-
 const TabScreen = styled(View)({
   flex: 1,
 });
@@ -55,7 +48,6 @@ export {
   HeaderTabWrapper,
   HeaderTab,
   HeaderTabItem,
-  ContentWrapper,
   TabScreen,
   StyledIndicator,
   StyledBadgeWrapper,

package/src/components/Tabs/index.tsx

@@ -12,7 +12,6 @@ import ActiveTabIndicator from './ActiveTabIndicator';
 import SceneView from './SceneView';
 import ScrollableTabs from './ScrollableTabs';
 import {
-  ContentWrapper,
   HeaderTab,
   HeaderTabItem,
   HeaderTabWrapper,
@@ -78,6 +77,8 @@ export interface TabsProps extends ViewProps {
   testID?: string;
 }
 
+const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
+
 const getTabItem = ({
   item,
   color,
@@ -193,8 +194,8 @@ const Tabs = ({
             />
           </View>
         </HeaderTabWrapper>
-        {/* @ts-expect-error: Test */}
-        <ContentWrapper
+        <AnimatedPagerView
+          useNext
           initialPage={selectedTabIndex}
           ref={pagerViewRef}
           onPageSelected={(e) => {
@@ -218,6 +219,7 @@ const Tabs = ({
             }
           )}
           scrollEnabled={swipeEnabled}
+          style={{ flex: 1 }}
         >
           {tabs.map((tab, index) => {
             const { key, component, testID } = tab;
@@ -237,7 +239,7 @@ const Tabs = ({
               </ScreenContext.Provider>
             );
           })}
-        </ContentWrapper>
+        </AnimatedPagerView>
       </TabContainer>
     </TabContext.Provider>
   );

package/src/components/Toast/Toast.tsx

@@ -92,6 +92,7 @@ const Toast = ({
 
   return (
     <Container
+      testID="toast-container"
       themeVariant={variant}
       themeIntent={intent}
       style={[

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

@@ -32,6 +32,7 @@ exports[`Toast Icon render custom icon correctly 1`] = `
         ],
       }
     }
+    testID="toast-container"
     themeIntent="info"
     themeVariant="default"
   >
@@ -166,6 +167,7 @@ exports[`Toast renders correctly when intent is error 1`] = `
         ],
       }
     }
+    testID="toast-container"
     themeIntent="error"
     themeVariant="default"
   >
@@ -358,6 +360,7 @@ exports[`Toast renders correctly when intent is info 1`] = `
         ],
       }
     }
+    testID="toast-container"
     themeIntent="info"
     themeVariant="default"
   >
@@ -550,6 +553,7 @@ exports[`Toast renders correctly when intent is notification 1`] = `
         ],
       }
     }
+    testID="toast-container"
     themeIntent="notification"
     themeVariant="default"
   >
@@ -715,6 +719,7 @@ exports[`Toast renders correctly when intent is snackbar 1`] = `
         ],
       }
     }
+    testID="toast-container"
     themeIntent="snackbar"
     themeVariant="default"
   >
@@ -880,6 +885,7 @@ exports[`Toast renders correctly when intent is success 1`] = `
         ],
       }
     }
+    testID="toast-container"
     themeIntent="success"
     themeVariant="default"
   >
@@ -1072,6 +1078,7 @@ exports[`Toast renders correctly when intent is warning 1`] = `
         ],
       }
     }
+    testID="toast-container"
     themeIntent="warning"
     themeVariant="default"
   >

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -817,7 +817,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "maximumTrackTint": "#ece8ef",
         "minimumTrackTint": "#401960",
-        "thumbTint": "#f6f6f7",
+        "thumbTint": "#401960",
       },
     },
     "spinner": {

package/src/theme/components/slider.ts

@@ -3,7 +3,7 @@ import type { GlobalTheme } from '../global';
 const getSliderTheme = (theme: GlobalTheme) => {
   const colors = {
     minimumTrackTint: theme.colors.primary,
-    thumbTint: theme.colors.neutralGlobalSurface,
+    thumbTint: theme.colors.primary,
     maximumTrackTint: theme.colors.highlightedSurface,
   };