@hero-design/rn 8.24.0 → 8.25.1

package/lib/index.js

@@ -1011,9 +1011,9 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$3 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$1 = colorScales.violet,
+  violet$2 = colorScales.violet,
   yellow$1 = colorScales.yellow;
-({
+var palette$b = {
   black: '#000000',
   white: '#ffffff',
   blue: blue$1.base,
@@ -1088,21 +1088,40 @@ var blue$1 = colorScales.blue,
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$1.base,
-  violetDark15: violet$1.darken15,
-  violetDark30: violet$1.darken30,
-  violetDark45: violet$1.darken45,
-  violetDark60: violet$1.darken60,
-  violetDark75: violet$1.darken75,
-  violetLight30: violet$1.lighten30,
-  violetLight60: violet$1.lighten60,
-  violetLight75: violet$1.lighten75,
-  violetLight90: violet$1.lighten90,
+  violet: violet$2.base,
+  violetDark15: violet$2.darken15,
+  violetDark30: violet$2.darken30,
+  violetDark45: violet$2.darken45,
+  violetDark60: violet$2.darken60,
+  violetDark75: violet$2.darken75,
+  violetLight30: violet$2.lighten30,
+  violetLight60: violet$2.lighten60,
+  violetLight75: violet$2.lighten75,
+  violetLight90: violet$2.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark75: yellow$1.darken75,
+  yellowLight45: yellow$1.lighten45,
   yellowLight60: yellow$1.lighten60,
+  yellowLight75: yellow$1.lighten75,
   yellowLight90: yellow$1.lighten90
+};
+var mauve$4 = colorScales.mauve,
+  violet$1 = colorScales.violet;
+Object.assign(Object.assign({}, palette$b), {
+  mauve: mauve$4.base,
+  mauveLight80: mauve$4.lighten80,
+  violetDark50: violet$1.darken50
+});
+var apple$4 = colorScales.apple,
+  hitPink$1 = colorScales.hitPink;
+Object.assign(Object.assign({}, palette$b), {
+  apple: apple$4.base,
+  appleDark20: apple$4.darken20,
+  appleDark50: apple$4.darken50,
+  appleLight90: apple$4.lighten90,
+  hitPink: hitPink$1.base,
+  hitPinkLight80: hitPink$1.lighten80
 });
 var aliceBlue$1 = colorScales.aliceBlue,
   antiFlashWhite$1 = colorScales.antiFlashWhite,
@@ -1269,7 +1288,7 @@ var currant$1 = colorScales.currant,
   vermilion = colorScales.vermilion,
   mauve$3 = colorScales.mauve,
   violet1$3 = colorScales.violet1,
-  violet$2 = colorScales.violet,
+  violet$3 = colorScales.violet,
   scarletGum$2 = colorScales.scarletGum;
 var palette$6 = {
   currant: currant$1.base,
@@ -1288,9 +1307,9 @@ var palette$6 = {
   pastelRed: pastelRed.base,
   vermilion: vermilion.base,
   mauve: mauve$3.base,
-  violetLight30: violet$2.lighten30,
+  violetLight30: violet$3.lighten30,
   violet1: violet1$3.base,
-  violet: violet$2.base,
+  violet: violet$3.base,
   scarletGum: scarletGum$2.base
 };
 var violet1$2 = colorScales.violet1,
@@ -2270,12 +2289,17 @@ var getErrorTheme = function getErrorTheme(theme) {
     title: theme.fonts.playful.semiBold,
     description: theme.fonts.playful.regular
   };
+  var lineHeight = {
+    title: theme.lineHeights.xxxlarge,
+    description: theme.lineHeights.xlarge
+  };
   return {
     fontSizes: fontSizes,
     colors: colors,
     sizes: sizes,
     space: space,
-    fonts: fonts
+    fonts: fonts,
+    lineHeight: lineHeight
   };
 };
 
@@ -2937,7 +2961,7 @@ var getTextInputTheme = function getTextInputTheme(theme) {
   var space = {
     containerPadding: theme.space.medium,
     labelLeft: theme.space.medium,
-    labelTop: theme.lineHeights.small / -2,
+    labelTop: theme.lineHeights.small / -4,
     labelPaddingBottom: theme.space.small,
     labelHorizontalPadding: theme.space.xsmall,
     inputHorizontalMargin: theme.space.small,
@@ -2956,7 +2980,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     labelInsideTextInput: theme.fontSizes.large,
     error: theme.fontSizes.small,
     maxLength: theme.fontSizes.small,
-    asteriskLabel: theme.fontSizes.large
+    asteriskLabel: theme.fontSizes.large,
+    topLabel: theme.fontSizes.small
   };
   var borderWidths = {
     container: {
@@ -2972,6 +2997,9 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     textareaHeight: theme.sizes['15xlarge'],
     textInputMaxHeight: theme.sizes['15xlarge']
   };
+  var lineHeights = {
+    topLabel: theme.lineHeights.large / 2
+  };
   return {
     colors: colors,
     space: space,
@@ -2979,7 +3007,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
-    sizes: sizes
+    sizes: sizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -6035,26 +6064,6 @@ var index$a = components.reduce(function (acc, comp) {
   });
 }, styled);
 
-var StyledWrapper$c = index$a(reactNative.Animated.View)({
-  margin: 0,
-  padding: 0,
-  overflow: 'hidden'
-});
-/**
- * Height need to be high enough to cover most scenario
- * This container's purpose is only to help get correct children height and returns it
- * to use with Animated.timing
- */
-var StyledHiddenWrapper = index$a(reactNative.View)(function () {
-  return {
-    height: reactNative.Dimensions.get('window').height
-  };
-});
-var StyledChildWrapper = index$a(reactNative.View)({
-  margin: 0,
-  padding: 0
-});
-
 // Get previous state value
 var usePrevious = function usePrevious(value) {
   var ref = React__default["default"].useRef();
@@ -6080,13 +6089,37 @@ var useDeprecation = function useDeprecation(message) {
   }, [message, cond]);
 };
 
+var StyledWrapper$c = index$a(reactNative.Animated.View)({
+  margin: 0,
+  padding: 0,
+  overflow: 'hidden'
+});
+/**
+ * Height need to be high enough to cover most scenario
+ * This container's purpose is only to help get correct children height and returns it
+ * to use with Animated.timing
+ */
+var StyledHiddenWrapper = index$a(reactNative.View)(function () {
+  return {
+    height: reactNative.Dimensions.get('window').height
+  };
+});
+var StyledChildWrapper = index$a(reactNative.View)({
+  margin: 0,
+  padding: 0
+});
+
+if (reactNative.Platform.OS === 'android') {
+  if (reactNative.UIManager.setLayoutAnimationEnabledExperimental) {
+    reactNative.UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
 var Collapse = function Collapse(_ref) {
   var _ref$open = _ref.open,
     open = _ref$open === void 0 ? false : _ref$open,
     children = _ref.children,
     testID = _ref.testID,
     style = _ref.style;
-  var collapseAnim = React__default["default"].useRef(new reactNative.Animated.Value(0)).current;
   var _React$useState = React__default["default"].useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     contentHeight = _React$useState2[0],
@@ -6094,11 +6127,7 @@ var Collapse = function Collapse(_ref) {
   var previousOpenState = usePrevious(open);
   React.useEffect(function () {
     if (open !== previousOpenState && previousOpenState !== undefined || open) {
-      reactNative.Animated.timing(collapseAnim, {
-        toValue: open ? contentHeight : 0,
-        easing: reactNative.Easing.inOut(reactNative.Easing.cubic),
-        useNativeDriver: false
-      }).start();
+      reactNative.LayoutAnimation.configureNext(reactNative.LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
   var fetchMaxHeight = React.useCallback(function (_ref2) {
@@ -6107,7 +6136,7 @@ var Collapse = function Collapse(_ref) {
   }, []);
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$c, {
     style: {
-      height: collapseAnim
+      height: open ? contentHeight : 0
     },
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledHiddenWrapper, null, /*#__PURE__*/React__default["default"].createElement(StyledChildWrapper, {
@@ -11319,6 +11348,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setFlatListWidth = _useState4[1];
   var itemWidth = flatListWidth * ITEM_WIDTH_RATE;
   var carouselRef = React.useRef(null);
+  var viewPosition = reactNative.Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
   var _snapToIndex = React.useCallback(function (index) {
     var _carouselRef$current;
     var validIndex = 0;
@@ -11332,7 +11362,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     (_carouselRef$current = carouselRef.current) === null || _carouselRef$current === void 0 ? void 0 : _carouselRef$current.scrollToIndex({
       index: validIndex,
       animated: true,
-      viewPosition: VIEW_POSITION_CENTER
+      viewPosition: viewPosition
     });
   }, [carouselRef, itemWidth]);
   /*
@@ -11347,7 +11377,7 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     (_carouselRef$current2 = carouselRef.current) === null || _carouselRef$current2 === void 0 ? void 0 : _carouselRef$current2.scrollToIndex({
       index: nextIndex,
       animated: true,
-      viewPosition: VIEW_POSITION_CENTER
+      viewPosition: viewPosition
     });
   }, [carouselRef, currentIndex, itemWidth, items.length]);
   React__default["default"].useImperativeHandle(ref, function () {
@@ -11402,16 +11432,31 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }, /*#__PURE__*/React__default["default"].createElement(StyledShadow, null, /*#__PURE__*/React__default["default"].createElement(StyledCard, null, item)));
   }, [itemWidth]);
+  var contentContainerPaddingHorizontal = theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal;
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$7, {
     style: style,
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
     contentInset: {
       top: 0,
-      left: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+      left: contentContainerPaddingHorizontal,
       bottom: 0,
-      right: theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal
+      right: contentContainerPaddingHorizontal
     },
+    ListHeaderComponent: reactNative.Platform.select({
+      android: /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+        style: {
+          width: contentContainerPaddingHorizontal
+        }
+      })
+    }),
+    ListFooterComponent: reactNative.Platform.select({
+      android: /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
+        style: {
+          width: contentContainerPaddingHorizontal
+        }
+      })
+    }),
     onLayout: flatListOnLayout,
     data: items,
     horizontal: true,
@@ -11428,7 +11473,9 @@ var CardCarousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     },
     decelerationRate: "fast",
     renderToHardwareTextureAndroid: true,
-    snapToInterval: itemWidth,
+    snapToInterval: reactNative.Platform.select({
+      ios: itemWidth
+    }),
     onViewableItemsChanged: visibleSlideChanged,
     viewabilityConfig: {
       itemVisiblePercentThreshold: 80
@@ -11653,14 +11700,18 @@ var StyledLabel = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme,
     themeState = _ref3.themeState;
   return {
-    color: theme.__hd__.textInput.colors.labels[themeState]
+    color: theme.__hd__.textInput.colors.labels[themeState],
+    fontSize: theme.__hd__.textInput.fontSizes.topLabel,
+    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
   };
 });
 var StyledAsteriskLabel = index$a(Typography.Text)(function (_ref4) {
   var theme = _ref4.theme,
     themeState = _ref4.themeState;
   return {
-    color: theme.__hd__.textInput.colors.asterisks[themeState]
+    color: theme.__hd__.textInput.colors.asterisks[themeState],
+    fontSize: theme.__hd__.textInput.fontSizes.topLabel,
+    lineHeight: theme.__hd__.textInput.lineHeights.topLabel
   };
 });
 var StyledLabelContainerInsideTextInput = index$a(reactNative.View)(function (_ref5) {
@@ -11968,12 +12019,10 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       backgroundColor: backgroundColor
     }
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
-    themeState: state,
-    fontSize: "small"
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    fontSize: "small",
     themeState: state,
     style: {
       backgroundColor: backgroundColor
@@ -12697,7 +12746,8 @@ var StyledErrorTitle = index$a(Typography.Text)(function (_ref8) {
     fontSize: theme.__hd__.error.fontSizes.title,
     textAlign: 'center',
     marginBottom: theme.__hd__.error.space.titleMarginBottom,
-    color: theme.__hd__.error.colors.title
+    color: theme.__hd__.error.colors.title,
+    lineHeight: theme.__hd__.error.lineHeight.title
   };
 });
 var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
@@ -12706,7 +12756,8 @@ var StyledErrorDescription = index$a(Typography.Text)(function (_ref9) {
     fontFamily: theme.__hd__.error.fonts.description,
     fontSize: theme.__hd__.error.fontSizes.description,
     textAlign: 'center',
-    color: theme.__hd__.error.colors.description
+    color: theme.__hd__.error.colors.description,
+    lineHeight: theme.__hd__.error.lineHeight.description
   };
 });
 
@@ -13931,7 +13982,7 @@ var AnimatedSpinner = function AnimatedSpinner(_ref) {
       toValue: 1,
       duration: 1200,
       easing: reactNative.Easing.linear,
-      useNativeDriver: true
+      useNativeDriver: reactNative.Platform.OS !== 'web'
     }));
     animation.start();
     return function () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.24.0",
+  "version": "8.25.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.24.0",
+    "@hero-design/colors": "8.25.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -45,7 +45,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.24.0",
+    "@hero-design/eslint-plugin": "8.25.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -61,9 +61,9 @@
     "@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.24.0",
+    "eslint-config-hd": "8.25.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.24.0",
+    "prettier-config-hd": "8.25.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/CardCarousel.tsx

@@ -8,7 +8,9 @@ import React, {
 import {
   FlatList,
   LayoutChangeEvent,
+  Platform,
   StyleProp,
+  View,
   ViewStyle,
 } from 'react-native';
 import { useTheme } from '../../theme';
@@ -85,6 +87,8 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     const itemWidth = flatListWidth * ITEM_WIDTH_RATE;
     const carouselRef = useRef<FlatList>(null);
 
+    const viewPosition =
+      Platform.OS === 'ios' ? VIEW_POSITION_CENTER : undefined;
     const snapToIndex = useCallback(
       (index) => {
         let validIndex = 0;
@@ -99,7 +103,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
         carouselRef.current?.scrollToIndex({
           index: validIndex,
           animated: true,
-          viewPosition: VIEW_POSITION_CENTER,
+          viewPosition,
         });
       },
       [carouselRef, itemWidth]
@@ -116,7 +120,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       carouselRef.current?.scrollToIndex({
         index: nextIndex,
         animated: true,
-        viewPosition: VIEW_POSITION_CENTER,
+        viewPosition,
       });
     }, [carouselRef, currentIndex, itemWidth, items.length]);
 
@@ -189,17 +193,27 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       [itemWidth]
     );
 
+    const { contentContainerPaddingHorizontal } =
+      theme.__hd__.cardCarousel.space;
     return (
       <StyledWrapper style={style} testID={testID}>
         <FlatList
           contentInset={{
             top: 0,
-            left: theme.__hd__.cardCarousel.space
-              .contentContainerPaddingHorizontal,
+            left: contentContainerPaddingHorizontal,
             bottom: 0,
-            right:
-              theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
+            right: contentContainerPaddingHorizontal,
           }}
+          ListHeaderComponent={Platform.select({
+            android: (
+              <View style={{ width: contentContainerPaddingHorizontal }} />
+            ),
+          })}
+          ListFooterComponent={Platform.select({
+            android: (
+              <View style={{ width: contentContainerPaddingHorizontal }} />
+            ),
+          })}
           onLayout={flatListOnLayout}
           data={items}
           horizontal
@@ -214,7 +228,9 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
           keyExtractor={(_, index) => `${index}`}
           decelerationRate="fast"
           renderToHardwareTextureAndroid
-          snapToInterval={itemWidth}
+          snapToInterval={Platform.select({
+            ios: itemWidth,
+          })}
           onViewableItemsChanged={visibleSlideChanged}
           viewabilityConfig={{
             itemVisiblePercentThreshold: 80,