@hero-design/rn 8.23.0 → 8.24.0-alpha.0

package/lib/index.js

@@ -2948,12 +2948,15 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     containerMarginTop: theme.space.small,
     labelInsideTextInputMarginTop: -theme.space.xxsmall
   };
+  var fonts = {
+    text: theme.fonts.neutral.regular
+  };
   var fontSizes = {
-    text: theme.fontSizes.medium,
-    labelInsideTextInput: theme.fontSizes.medium,
+    text: theme.fontSizes.large,
+    labelInsideTextInput: theme.fontSizes.large,
     error: theme.fontSizes.small,
     maxLength: theme.fontSizes.small,
-    asteriskLabel: theme.fontSizes.medium
+    asteriskLabel: theme.fontSizes.large
   };
   var borderWidths = {
     container: {
@@ -2965,11 +2968,14 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     container: theme.radii.medium
   };
   var sizes = {
-    errorAndHelpTextContainerHeight: theme.sizes.medium
+    errorAndHelpTextContainerHeight: theme.sizes.medium,
+    textareaHeight: theme.sizes['15xlarge'],
+    textInputMaxHeight: theme.sizes['15xlarge']
   };
   return {
     colors: colors,
     space: space,
+    fonts: fonts,
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
@@ -11645,47 +11651,48 @@ var StyledLabelContainer = index$a(reactNative.View)(function (_ref2) {
 });
 var StyledLabel = index$a(Typography.Text)(function (_ref3) {
   var theme = _ref3.theme,
-    themeVariant = _ref3.themeVariant;
+    themeState = _ref3.themeState;
   return {
-    color: theme.__hd__.textInput.colors.labels[themeVariant]
+    color: theme.__hd__.textInput.colors.labels[themeState]
   };
 });
 var StyledAsteriskLabel = index$a(Typography.Text)(function (_ref4) {
   var theme = _ref4.theme,
-    themeVariant = _ref4.themeVariant;
+    themeState = _ref4.themeState;
   return {
-    color: theme.__hd__.textInput.colors.asterisks[themeVariant]
+    color: theme.__hd__.textInput.colors.asterisks[themeState]
   };
 });
-var StyledLabelContainerInsideTextInput = index$a(reactNative.View)(function () {
+var StyledLabelContainerInsideTextInput = index$a(reactNative.View)(function (_ref5) {
+  var themeVariant = _ref5.themeVariant;
   return _objectSpread2({
     flexDirection: 'row',
     zIndex: 9999,
-    alignItems: 'center'
+    alignItems: themeVariant === 'text' ? 'center' : 'flex-start'
   }, reactNative.StyleSheet.absoluteFillObject);
 });
-var StyledLabelInsideTextInput = index$a(Typography.Text)(function (_ref5) {
-  var theme = _ref5.theme,
-    themeVariant = _ref5.themeVariant;
+var StyledLabelInsideTextInput = index$a(Typography.Text)(function (_ref6) {
+  var theme = _ref6.theme,
+    themeState = _ref6.themeState;
   return {
     textAlignVertical: 'center',
     alignContent: 'center',
     fontSize: theme.__hd__.textInput.fontSizes.labelInsideTextInput,
     alignItems: 'center',
-    color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeVariant],
+    color: theme.__hd__.textInput.colors.labelsInsideTextInput[themeState],
     marginTop: theme.__hd__.textInput.space.labelInsideTextInputMarginTop
   };
 });
-var StyledAsteriskLabelInsideTextInput = index$a(Typography.Text)(function (_ref6) {
-  var theme = _ref6.theme,
-    themeVariant = _ref6.themeVariant;
+var StyledAsteriskLabelInsideTextInput = index$a(Typography.Text)(function (_ref7) {
+  var theme = _ref7.theme,
+    themeState = _ref7.themeState;
   return {
-    color: theme.__hd__.textInput.colors.asterisks[themeVariant],
+    color: theme.__hd__.textInput.colors.asterisks[themeState],
     fontSize: theme.__hd__.textInput.fontSizes.asteriskLabel
   };
 });
-var StyledErrorContainer$2 = index$a(reactNative.View)(function (_ref7) {
-  var theme = _ref7.theme;
+var StyledErrorContainer$2 = index$a(reactNative.View)(function (_ref8) {
+  var theme = _ref8.theme;
   return {
     marginRight: theme.__hd__.textInput.space.errorContainerMarginRight,
     flexDirection: 'row',
@@ -11694,19 +11701,19 @@ var StyledErrorContainer$2 = index$a(reactNative.View)(function (_ref7) {
     flexGrow: 4
   };
 });
-var StyledError = index$a(Typography.Text)(function (_ref8) {
-  var theme = _ref8.theme;
+var StyledError = index$a(Typography.Text)(function (_ref9) {
+  var theme = _ref9.theme;
   return {
     color: theme.__hd__.textInput.colors.error,
     fontSize: theme.__hd__.textInput.fontSizes.error,
     marginLeft: theme.__hd__.textInput.space.errorMarginLeft
   };
 });
-var StyledMaxLengthMessage = index$a(Typography.Text)(function (_ref9) {
-  var theme = _ref9.theme,
-    themeVariant = _ref9.themeVariant;
+var StyledMaxLengthMessage = index$a(Typography.Text)(function (_ref10) {
+  var theme = _ref10.theme,
+    themeState = _ref10.themeState;
   return {
-    color: theme.__hd__.textInput.colors.maxLengthLabels[themeVariant],
+    color: theme.__hd__.textInput.colors.maxLengthLabels[themeState],
     fontSize: theme.__hd__.textInput.fontSizes.maxLength,
     marginRight: theme.__hd__.textInput.space.maxLengthLabelMarginLeft,
     alignSelf: 'flex-end',
@@ -11715,36 +11722,40 @@ var StyledMaxLengthMessage = index$a(Typography.Text)(function (_ref9) {
     textAlign: 'right'
   };
 });
-var StyledHelperText = index$a(Typography.Text)(function (_ref10) {
-  var theme = _ref10.theme;
+var StyledHelperText = index$a(Typography.Text)(function (_ref11) {
+  var theme = _ref11.theme;
   return {
     fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
-var StyledTextInput = index$a(reactNative.TextInput)(function (_ref11) {
-  var theme = _ref11.theme;
+var StyledTextInput = index$a(reactNative.TextInput)(function (_ref12) {
+  var theme = _ref12.theme,
+    themeVariant = _ref12.themeVariant;
   return {
-    textAlignVertical: 'center',
+    textAlignVertical: themeVariant === 'text' ? 'center' : 'top',
     fontSize: theme.__hd__.textInput.fontSizes.text,
     alignSelf: 'stretch',
     flexGrow: 2,
     marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
-    paddingVertical: 0
+    paddingVertical: 0,
+    maxHeight: theme.__hd__.textInput.sizes.textInputMaxHeight,
+    height: themeVariant === 'text' ? undefined : theme.__hd__.textInput.sizes.textareaHeight,
+    fontFamily: theme.__hd__.textInput.fonts.text
   };
 });
-var StyledBorderBackDrop = index$a(reactNative.View)(function (_ref12) {
+var StyledBorderBackDrop = index$a(reactNative.View)(function (_ref13) {
   var _theme$__hd__$textInp;
-  var theme = _ref12.theme,
-    themeFocused = _ref12.themeFocused,
-    themeVariant = _ref12.themeVariant;
+  var theme = _ref13.theme,
+    themeFocused = _ref13.themeFocused,
+    themeState = _ref13.themeState;
   return _objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
     borderWidth: themeFocused ? theme.__hd__.textInput.borderWidths.container.focused : theme.__hd__.textInput.borderWidths.container.normal,
     borderRadius: theme.__hd__.textInput.radii.container,
-    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeVariant]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
+    borderColor: (_theme$__hd__$textInp = theme.__hd__.textInput.colors.borders[themeState]) !== null && _theme$__hd__$textInp !== void 0 ? _theme$__hd__$textInp : theme.__hd__.textInput.colors.borders["default"]
   });
 });
-var StyledTextInputContainer = index$a(reactNative.View)(function (_ref13) {
-  var theme = _ref13.theme;
+var StyledTextInputContainer = index$a(reactNative.View)(function (_ref14) {
+  var theme = _ref14.theme;
   return {
     flexDirection: 'row',
     alignItems: 'center',
@@ -11762,8 +11773,8 @@ var StyledTextInputAndLabelContainer = index$a(reactNative.View)(function () {
     flexShrink: 1
   };
 });
-var StyledErrorAndHelpTextContainer = index$a(reactNative.View)(function (_ref14) {
-  var theme = _ref14.theme;
+var StyledErrorAndHelpTextContainer = index$a(reactNative.View)(function (_ref15) {
+  var theme = _ref15.theme;
   return {
     paddingLeft: theme.__hd__.textInput.space.errorAndHelpTextContainerPaddingLeft,
     minHeight: theme.__hd__.textInput.sizes.errorAndHelpTextContainerHeight
@@ -11776,8 +11787,8 @@ var StyledErrorAndMaxLengthContainer = index$a(reactNative.View)(function () {
   };
 });
 
-var _excluded$e = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling"];
-var getVariant$1 = function getVariant(_ref) {
+var _excluded$e = ["label", "prefix", "suffix", "style", "textStyle", "testID", "accessibilityLabelledBy", "error", "required", "editable", "disabled", "loading", "maxLength", "hideCharacterCount", "helpText", "value", "defaultValue", "renderInputValue", "allowFontScaling", "variant"];
+var getState$1 = function getState(_ref) {
   var disabled = _ref.disabled,
     error = _ref.error,
     editable = _ref.editable,
@@ -11826,6 +11837,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     renderInputValue = _ref2.renderInputValue,
     _ref2$allowFontScalin = _ref2.allowFontScaling,
     allowFontScaling = _ref2$allowFontScalin === void 0 ? false : _ref2$allowFontScalin,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'text' : _ref2$variant,
     nativeProps = _objectWithoutProperties(_ref2, _excluded$e);
   var displayText = (_ref3 = value !== undefined ? value : defaultValue) !== null && _ref3 !== void 0 ? _ref3 : '';
   var isEmptyValue = displayText.length === 0;
@@ -11834,7 +11847,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isFocused = _React$useState2[0],
     setIsFocused = _React$useState2[1];
-  var variant = getVariant$1({
+  var state = getState$1({
     disabled: disabled,
     error: error,
     editable: editable,
@@ -11910,7 +11923,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     }, textStyleWithoutBorderStyle]),
     testID: 'text-input',
     accessibilityState: {
-      disabled: variant === 'disabled' || variant === 'readonly'
+      disabled: state === 'disabled' || state === 'readonly'
     },
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -11939,11 +11952,11 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   });
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$4, {
     style: styleWithoutBackgroundColor,
-    pointerEvents: variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto',
+    pointerEvents: state === 'disabled' || state === 'readonly' ? 'none' : 'auto',
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
     themeFocused: isFocused,
-    themeVariant: variant,
+    themeState: state,
     testID: "text-input-border",
     style: [{
       backgroundColor: backgroundColor
@@ -11955,36 +11968,39 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       backgroundColor: backgroundColor
     }
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
-    themeVariant: variant,
+    themeState: state,
     fontSize: "small"
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "small",
-    themeVariant: variant,
+    themeState: state,
     style: {
       backgroundColor: backgroundColor
     }
   }, label)), typeof prefix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === 'disabled' ? 'disabled-text' : 'text',
+    intent: state === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-prefix",
     icon: prefix,
     size: "xsmall"
   }) : prefix, /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
+    themeVariant: variant,
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabelInsideTextInput, {
-    themeVariant: variant
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabelInsideTextInput, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
     fontSize: "medium",
-    themeVariant: variant
+    themeState: state
   }, label)), renderInputValue ? renderInputValue(nativeInputProps) : /*#__PURE__*/React__default["default"].createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
+    themeVariant: variant,
+    multiline: variant === 'textarea' || nativeProps.multiline,
     ref: function ref(reference) {
       innerTextInput.current = reference;
     }
   }))), typeof actualSuffix === 'string' ? /*#__PURE__*/React__default["default"].createElement(Icon, {
-    intent: variant === 'disabled' ? 'disabled-text' : 'text',
+    intent: state === 'disabled' ? 'disabled-text' : 'text',
     testID: "input-suffix",
     icon: actualSuffix,
     spin: actualSuffix === 'loading',
@@ -11997,7 +12013,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   }), /*#__PURE__*/React__default["default"].createElement(StyledError, {
     testID: "input-error-message"
   }, error)) : !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText), shouldShowMaxLength && /*#__PURE__*/React__default["default"].createElement(StyledMaxLengthMessage, {
-    themeVariant: variant,
+    themeState: state,
     fontSize: "small"
   }, displayText.length, "/", maxLength))));
 });
@@ -15349,48 +15365,35 @@ var getTabItem$1 = function getTabItem(_ref) {
     color: color
   });
 };
-var ScrollableTab = function ScrollableTab(_ref2) {
+var ScrollableTabHeader = function ScrollableTabHeader(_ref2) {
   var onTabPress = _ref2.onTabPress,
-    selectedTabKey = _ref2.selectedTabKey,
+    selectedIndex = _ref2.selectedIndex,
     tabs = _ref2.tabs,
-    containerStyle = _ref2.containerStyle,
     barStyle = _ref2.barStyle,
-    _ref2$lazy = _ref2.lazy,
-    lazy = _ref2$lazy === void 0 ? false : _ref2$lazy,
-    _ref2$lazyPreloadDist = _ref2.lazyPreloadDistance,
-    lazyPreloadDistance = _ref2$lazyPreloadDist === void 0 ? 1 : _ref2$lazyPreloadDist,
-    _ref2$swipeEnabled = _ref2.swipeEnabled,
-    swipeEnabled = _ref2$swipeEnabled === void 0 ? true : _ref2$swipeEnabled,
-    componentTestID = _ref2.testID;
+    testID = _ref2.testID,
+    _ref2$insets = _ref2.insets,
+    insets = _ref2$insets === void 0 ? {
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0
+    } : _ref2$insets;
   var flatListRef = React__default["default"].useRef(null);
-  var pagerViewRef = React__default["default"].useRef(null);
-  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
   var theme = useTheme$1();
-  var selectedTabIndex = tabs.findIndex(function (item) {
-    return item.key === selectedTabKey;
-  });
   var tabsAnims = useAnimatedValueArray(tabs.map(function (_, i) {
-    return i === selectedTabIndex ? 1 : 0;
+    return i === selectedIndex ? 1 : 0;
   }));
   React__default["default"].useEffect(function () {
-    var timeoutHandle = null;
-    if (selectedTabIndex !== -1) {
+    if (selectedIndex !== undefined && selectedIndex !== -1) {
       var _flatListRef$current;
       (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
-        index: selectedTabIndex,
+        index: selectedIndex,
         viewPosition: 0.5
       });
-      // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
-      // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
-      timeoutHandle = setTimeout(function () {
-        var _pagerViewRef$current;
-        // use no animation to prevent unexpected behavior if users select tab too quickly
-        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
-      }, 200);
     }
     var animation = reactNative.Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
       return reactNative.Animated.timing(tabsAnims[i], {
-        toValue: i === selectedTabIndex ? 1 : 0,
+        toValue: i === selectedIndex ? 1 : 0,
         duration: 150,
         useNativeDriver: true
       });
@@ -15398,19 +15401,13 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     animation.start();
     return function () {
       animation.stop();
-      if (timeoutHandle) {
-        clearTimeout(timeoutHandle);
-      }
     };
-  }, [selectedTabIndex, pagerViewRef]);
-  return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
-    style: containerStyle,
-    testID: componentTestID
-  }, /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper, {
+  }, [selectedIndex]);
+  return /*#__PURE__*/React__default["default"].createElement(HeaderTabWrapper, {
     themeInsets: insets,
     style: barStyle
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.FlatList, {
-    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined,
+    testID: testID,
     ref: flatListRef,
     horizontal: true,
     data: tabs,
@@ -15435,11 +15432,11 @@ var ScrollableTab = function ScrollableTab(_ref2) {
       var tab = _ref4.item,
         index = _ref4.index;
       var key = tab.key,
-        testID = tab.testID,
+        tabItemTestID = tab.testID,
         activeItem = tab.activeItem,
         originalInactiveItem = tab.inactiveItem,
         badge = tab.badge;
-      var active = selectedTabKey === key;
+      var active = selectedIndex === index;
       var activeAnimated = tabsAnims[index];
       var outlineScale = active ? activeAnimated.interpolate({
         inputRange: [0, 1],
@@ -15456,7 +15453,7 @@ var ScrollableTab = function ScrollableTab(_ref2) {
         onPress: function onPress() {
           onTabPress(key);
         },
-        testID: testID
+        testID: tabItemTestID
       }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItem, {
         isFirstItem: index === 0
       }, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutlineWrapper, null, /*#__PURE__*/React__default["default"].createElement(HeaderTabItemOutline, {
@@ -15472,7 +15469,55 @@ var ScrollableTab = function ScrollableTab(_ref2) {
         tabItem: tabItem
       }))));
     }
-  })), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
+  }));
+};
+
+var ScrollableTab$1 = function ScrollableTab(_ref) {
+  var onTabPress = _ref.onTabPress,
+    selectedTabKey = _ref.selectedTabKey,
+    tabs = _ref.tabs,
+    containerStyle = _ref.containerStyle,
+    barStyle = _ref.barStyle,
+    _ref$lazy = _ref.lazy,
+    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
+    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
+    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
+    _ref$swipeEnabled = _ref.swipeEnabled,
+    swipeEnabled = _ref$swipeEnabled === void 0 ? true : _ref$swipeEnabled,
+    componentTestID = _ref.testID;
+  var pagerViewRef = React__default["default"].useRef(null);
+  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  var selectedTabIndex = tabs.findIndex(function (item) {
+    return item.key === selectedTabKey;
+  });
+  React__default["default"].useEffect(function () {
+    var timeoutHandle = null;
+    if (selectedTabIndex !== -1) {
+      // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
+      // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
+      timeoutHandle = setTimeout(function () {
+        var _pagerViewRef$current;
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
+    }
+    return function () {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
+  return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
+    style: containerStyle,
+    testID: componentTestID
+  }, /*#__PURE__*/React__default["default"].createElement(ScrollableTabHeader, {
+    tabs: tabs,
+    selectedIndex: selectedTabIndex,
+    onTabPress: onTabPress,
+    barStyle: barStyle,
+    insets: insets,
+    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
+  }), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
     initialPage: selectedTabIndex,
     ref: pagerViewRef,
     onPageSelected: function onPageSelected(e) {
@@ -15500,6 +15545,151 @@ var ScrollableTab = function ScrollableTab(_ref2) {
   })));
 };
 
+var SceneView = function SceneView(_ref) {
+  var _ref$lazy = _ref.lazy,
+    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
+    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
+    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
+    children = _ref.children,
+    index = _ref.index,
+    selectedIndex = _ref.selectedIndex,
+    focused = _ref.focused,
+    testID = _ref.testID;
+  var _React$useState = React__default["default"].useState(Math.abs(selectedIndex - index) > lazyPreloadDistance),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isLoading = _React$useState2[0],
+    setIsLoading = _React$useState2[1];
+  if (isLoading && Math.abs(selectedIndex - index) <= lazyPreloadDistance) {
+    // Always render the route when it becomes focused
+    setIsLoading(false);
+  }
+  if (lazy && isLoading) {
+    console.error('Lazy loading is not supported in this version of Tabs');
+  }
+  React__default["default"].useEffect(function () {
+    var timer;
+    if (!lazy && isLoading) {
+      // If lazy mode is not enabled, render the scene with a delay if not loaded already
+      // This improves the initial startup time as the scene is no longer blocking
+      timer = setTimeout(function () {
+        return setIsLoading(false);
+      }, 0);
+    }
+    return function () {
+      clearTimeout(timer);
+    };
+  }, [index, isLoading, lazy, focused]);
+  return /*#__PURE__*/React__default["default"].createElement(TabScreen, {
+    accessibilityElementsHidden: !focused,
+    importantForAccessibility: focused ? 'auto' : 'no-hide-descendants',
+    style: [{
+      flex: 1,
+      overflow: 'hidden'
+    }, focused ? reactNative.StyleSheet.absoluteFill : null],
+    testID: testID
+  }, focused || !isLoading ? children : null);
+};
+
+var TabContext = /*#__PURE__*/React__default["default"].createContext(null);
+var ScreenContext = /*#__PURE__*/React__default["default"].createContext(null);
+var useIsFocused = function useIsFocused() {
+  var context = React__default["default"].useContext(TabContext);
+  var key = React__default["default"].useContext(ScreenContext);
+  if (!context || !key) {
+    return;
+  }
+  var isFocused = context.selectedTabKey === key;
+  return isFocused;
+};
+var ScrollableTab = function ScrollableTab(_ref) {
+  var onTabPress = _ref.onTabPress,
+    selectedTabKey = _ref.selectedTabKey,
+    tabs = _ref.tabs,
+    containerStyle = _ref.containerStyle,
+    barStyle = _ref.barStyle,
+    _ref$lazy = _ref.lazy,
+    lazy = _ref$lazy === void 0 ? false : _ref$lazy,
+    _ref$lazyPreloadDista = _ref.lazyPreloadDistance,
+    lazyPreloadDistance = _ref$lazyPreloadDista === void 0 ? 1 : _ref$lazyPreloadDista,
+    _ref$swipeEnabled = _ref.swipeEnabled,
+    swipeEnabled = _ref$swipeEnabled === void 0 ? true : _ref$swipeEnabled,
+    componentTestID = _ref.testID;
+  var pagerViewRef = React__default["default"].useRef(null);
+  var insets = reactNativeSafeAreaContext.useSafeAreaInsets();
+  var selectedTabIndex = tabs.findIndex(function (item) {
+    return item.key === selectedTabKey;
+  });
+  React__default["default"].useEffect(function () {
+    var timeoutHandle = null;
+    if (selectedTabIndex !== -1) {
+      // If the selected tab is changed too quickly, the setPage is crashed and not work anymore
+      // We apply throttle to prevent this issue https://github.com/Thinkei/hero-design/issues/1715
+      timeoutHandle = setTimeout(function () {
+        var _pagerViewRef$current;
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
+    }
+    return function () {
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
+  var indexRef = React__default["default"].useRef(selectedTabIndex);
+  var tabContextProviderValue = React__default["default"].useMemo(function () {
+    return {
+      selectedTabKey: selectedTabKey
+    };
+  }, [selectedTabKey]);
+  return /*#__PURE__*/React__default["default"].createElement(TabContext.Provider, {
+    value: tabContextProviderValue
+  }, /*#__PURE__*/React__default["default"].createElement(TabContainer, {
+    style: containerStyle,
+    testID: componentTestID
+  }, /*#__PURE__*/React__default["default"].createElement(ScrollableTabHeader, {
+    tabs: tabs,
+    selectedIndex: selectedTabIndex,
+    onTabPress: onTabPress,
+    barStyle: barStyle,
+    insets: insets,
+    testID: componentTestID ? "".concat(componentTestID, "-tab-bar") : undefined
+  }), /*#__PURE__*/React__default["default"].createElement(ContentWrapper, {
+    initialPage: selectedTabIndex,
+    ref: pagerViewRef,
+    onPageSelected: function onPageSelected(e) {
+      var index = e.nativeEvent.position;
+      var selectedItem = tabs[index];
+      if (selectedItem) {
+        setTimeout(function () {
+          onTabPress(selectedItem.key);
+        });
+      }
+      indexRef.current = index;
+    },
+    scrollEnabled: swipeEnabled
+  }, tabs.map(function (tab, index) {
+    var key = tab.key,
+      component = tab.component,
+      testID = tab.testID;
+    return /*#__PURE__*/React__default["default"].createElement(ScreenContext.Provider, {
+      value: key
+    }, /*#__PURE__*/React__default["default"].createElement(SceneView, {
+      testID: testID,
+      key: key,
+      index: index,
+      selectedIndex: indexRef.current,
+      lazy: lazy,
+      lazyPreloadDistance: lazyPreloadDistance,
+      focused: selectedTabKey === key
+    }, component));
+  }))));
+};
+
+var ScrollableTabsV2 = Object.assign(ScrollableTab, {
+  useIsFocused: useIsFocused
+});
+
 var getTabItem = function getTabItem(_ref) {
   var item = _ref.item,
     color = _ref.color,
@@ -15626,7 +15816,8 @@ var Tabs = function Tabs(_ref2) {
   })));
 };
 var index$2 = Object.assign(Tabs, {
-  Scroll: ScrollableTab
+  Scroll: ScrollableTab$1,
+  ScrollV2: ScrollableTabsV2
 });
 
 var getFilledStyles = function getFilledStyles(themeIntent, theme) {
@@ -32481,7 +32672,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
   var isEmptyValue = React.useMemo(function () {
     return lib.exports.isEmptyContent(value);
   }, [value]);
-  var variant = React.useMemo(function () {
+  var state = React.useMemo(function () {
     if (error) {
       return 'error';
     }
@@ -32589,25 +32780,26 @@ var RichTextEditor = function RichTextEditor(_ref) {
   return /*#__PURE__*/React__default["default"].createElement(StyledContainer$4, {
     testID: testID
   }, /*#__PURE__*/React__default["default"].createElement(StyledTextInputContainer, null, /*#__PURE__*/React__default["default"].createElement(StyledBorderBackDrop, {
-    themeVariant: variant,
+    themeState: state,
     themeFocused: isFocused
   }), (isFocused || label && !isEmptyValue) && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainer, {
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabel, {
-    themeVariant: variant,
+    themeState: state,
     fontSize: "small"
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabel, {
     testID: "input-label",
     fontSize: "small",
-    themeVariant: variant
+    themeState: state
   }, label)), /*#__PURE__*/React__default["default"].createElement(StyledTextInputAndLabelContainer, null, !isFocused && isEmptyValue && /*#__PURE__*/React__default["default"].createElement(StyledLabelContainerInsideTextInput, {
+    themeVariant: "text",
     pointerEvents: "none"
   }, required && /*#__PURE__*/React__default["default"].createElement(StyledAsteriskLabelInsideTextInput, {
-    themeVariant: variant
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React__default["default"].createElement(StyledLabelInsideTextInput, {
     testID: "input-label",
     fontSize: "medium",
-    themeVariant: variant
+    themeState: state
   }, label)), /*#__PURE__*/React__default["default"].createElement(reactNative.TouchableWithoutFeedback, {
     onPress: function onPress(e) {
       return e.stopPropagation();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.23.0",
+  "version": "8.24.0-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",