@hero-design/rn 8.3.1 → 8.3.3

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 3ad2304a0e6682cc
-@hero-design/rn:build: $ yarn build:js && yarn build:types
-@hero-design/rn:build: $ rollup -c
-@hero-design/rn:build: 
-@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
-@hero-design/rn:build: (!) 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`.
-@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-@hero-design/rn:build: created lib/index.js, es/index.js in 23.8s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output a707437faede395b
+@hero-design/rn:build: $ yarn build:js && yarn build:types
+@hero-design/rn:build: $ rollup -c
+@hero-design/rn:build: 
+@hero-design/rn:build: src/index.ts → lib/index.js, es/index.js...
+@hero-design/rn:build: (!) 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`.
+@hero-design/rn:build: (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
+@hero-design/rn:build: created lib/index.js, es/index.js in 24.4s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1,5 +1,5 @@
 import * as reactNative from 'react-native';
-import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, ScrollView, Modal, useWindowDimensions, FlatList, TextInput as TextInput$2, PanResponder, TouchableHighlight, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, Easing, TouchableOpacity, Text as Text$1, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, ScrollView, Modal, useWindowDimensions, FlatList, TextInput as TextInput$1, PanResponder, TouchableHighlight, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
 import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -10958,7 +10958,7 @@ var StyledHelperText = index$a(Typography.Text)(function (_ref10) {
     fontSize: theme.__hd__.textInput.fontSizes.error
   };
 });
-var StyledTextInput = index$a(TextInput$2)(function (_ref11) {
+var StyledTextInput = index$a(TextInput$1)(function (_ref11) {
   var theme = _ref11.theme;
   return {
     textAlignVertical: 'center',
@@ -11035,7 +11035,7 @@ var getVariant$1 = function getVariant(_ref) {
 // Fix issue: Placeholder is not shown on iOS when multiline is true
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE = ' ';
-var TextInput = function TextInput(_ref2, ref) {
+var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
     prefix = _ref2.prefix,
@@ -11204,8 +11204,7 @@ var TextInput = function TextInput(_ref2, ref) {
     themeVariant: variant,
     fontSize: "small"
   }, displayText.length, "/", maxLength)), !!helpText && /*#__PURE__*/React.createElement(StyledHelperText, null, helpText)));
-};
-var TextInput$1 = /*#__PURE__*/React.forwardRef(TextInput);
+});
 
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
@@ -11237,7 +11236,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -11305,7 +11304,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -12238,7 +12237,7 @@ var StyledFilledMask = index$a(View)(function (_ref5) {
     backgroundColor: theme.__hd__.pinInput.colors[themeState]
   };
 });
-var StyledHiddenInput = index$a(TextInput$2)(function (_ref6) {
+var StyledHiddenInput = index$a(TextInput$1)(function (_ref6) {
   var themePinLength = _ref6.themePinLength,
     theme = _ref6.theme;
   var cellWidth = theme.__hd__.pinInput.sizes.cellWidth;
@@ -13350,7 +13349,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput$1, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13398,7 +13397,7 @@ function MultiSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13526,7 +13525,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React.createElement(TextInput$1, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React.createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13558,7 +13557,7 @@ var SingleSelect = function SingleSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, onQueryChange && /*#__PURE__*/React.createElement(StyledSearchBar, null, /*#__PURE__*/React.createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13955,13 +13954,20 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     return i === selectedTabIndex ? 1 : 0;
   }));
   React.useEffect(function () {
+    var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current, _pagerViewRef$current;
+      var _flatListRef$current;
       (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
-      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(selectedTabIndex);
+      // 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 = Animated.parallel(_toConsumableArray(tabs.map(function (_, i) {
       return Animated.timing(tabsAnims[i], {
@@ -13972,9 +13978,12 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     })));
     animation.start();
     return function () {
-      return animation.stop();
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
     };
-  }, [selectedTabIndex]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React.createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14299,7 +14308,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14367,7 +14376,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React.createElement(View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React.createElement(TextInput$1, {
+  }, /*#__PURE__*/React.createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -31210,4 +31219,4 @@ var index = Object.assign(RichTextEditor$1, {
   Toolbar: EditorToolbar
 });
 
-export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput$1 as TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };
+export { Accordion, Alert, Attachment, index$9 as Avatar, Badge$1 as Badge, BottomNavigation, BottomSheet$1 as BottomSheet, Box, CompoundButton as Button, Calendar, index$8 as Card, Carousel, Checkbox, Collapse, ContentNavigator, DatePicker, Divider, index$7 as Drawer, Empty, index$6 as FAB, Icon, Image, List, PinInput, Progress, CompoundRadio as Radio, RefreshControl, index as RichTextEditor, SectionHeading, index$4 as Select, Slider, Spinner, index$5 as Swipeable, index$3 as Switch, index$2 as Tabs, Tag, TextInput, ThemeProvider, ThemeSwitcher, TimePicker, Toast, index$1 as Toolbar, Typography, eBensSystemPalette, getTheme$1 as getTheme, jobsSystemPalette, scale, swagSystemPalette, defaultTheme as theme, useAvatarColors, useTheme, walletSystemPalette, workSystemPalette };

package/lib/index.js

@@ -11064,7 +11064,7 @@ var getVariant$1 = function getVariant(_ref) {
 // Fix issue: Placeholder is not shown on iOS when multiline is true
 // https://github.com/callstack/react-native-paper/pull/3331
 var EMPTY_PLACEHOLDER_VALUE = ' ';
-var TextInput = function TextInput(_ref2, ref) {
+var TextInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref3;
   var label = _ref2.label,
     prefix = _ref2.prefix,
@@ -11233,8 +11233,7 @@ var TextInput = function TextInput(_ref2, ref) {
     themeVariant: variant,
     fontSize: "small"
   }, displayText.length, "/", maxLength)), !!helpText && /*#__PURE__*/React__default["default"].createElement(StyledHelperText, null, helpText)));
-};
-var TextInput$1 = /*#__PURE__*/React__default["default"].forwardRef(TextInput);
+});
 
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
@@ -11266,7 +11265,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -11334,7 +11333,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -13379,7 +13378,7 @@ function MultiSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13427,7 +13426,7 @@ function MultiSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13555,7 +13554,7 @@ var SingleSelect = function SingleSelect(_ref) {
     }
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, _extends$1({}, inputProps, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, _extends$1({}, inputProps, {
     label: label,
     value: displayedValue,
     suffix: "arrow-down",
@@ -13587,7 +13586,7 @@ var SingleSelect = function SingleSelect(_ref) {
         (_sectionListRef$curre = sectionListRef.current) === null || _sectionListRef$curre === void 0 ? void 0 : _sectionListRef$curre.scrollToLocation(scrollParams);
       }
     }
-  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, onQueryChange && /*#__PURE__*/React__default["default"].createElement(StyledSearchBar, null, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     editable: true,
     placeholder: "Search",
     suffix: "search-outlined",
@@ -13984,13 +13983,20 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     return i === selectedTabIndex ? 1 : 0;
   }));
   React__default["default"].useEffect(function () {
+    var timeoutHandle = null;
     if (selectedTabIndex !== -1) {
-      var _flatListRef$current, _pagerViewRef$current;
+      var _flatListRef$current;
       (_flatListRef$current = flatListRef.current) === null || _flatListRef$current === void 0 ? void 0 : _flatListRef$current.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5
       });
-      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(selectedTabIndex);
+      // 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], {
@@ -14001,9 +14007,12 @@ var ScrollableTab = function ScrollableTab(_ref2) {
     })));
     animation.start();
     return function () {
-      return animation.stop();
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
     };
-  }, [selectedTabIndex]);
+  }, [selectedTabIndex, pagerViewRef]);
   return /*#__PURE__*/React__default["default"].createElement(TabContainer, {
     style: containerStyle,
     testID: componentTestID
@@ -14328,7 +14337,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14396,7 +14405,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   }, /*#__PURE__*/React__default["default"].createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__default["default"].createElement(TextInput$1, {
+  }, /*#__PURE__*/React__default["default"].createElement(TextInput, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -31275,7 +31284,7 @@ exports.Swipeable = index$5;
 exports.Switch = index$3;
 exports.Tabs = index$2;
 exports.Tag = Tag;
-exports.TextInput = TextInput$1;
+exports.TextInput = TextInput;
 exports.ThemeProvider = ThemeProvider;
 exports.ThemeSwitcher = ThemeSwitcher;
 exports.TimePicker = TimePicker;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.3.1",
+  "version": "8.3.3",
   "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.3.1",
+    "@hero-design/colors": "8.3.3",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.3.1",
+    "@hero-design/eslint-plugin": "8.3.3",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,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.3.1",
+    "eslint-config-hd": "8.3.3",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.3.1",
+    "prettier-config-hd": "8.3.3",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Tabs/ScrollableTabs.tsx

@@ -78,12 +78,18 @@ const ScrollableTab = ({
   );
 
   React.useEffect(() => {
+    let timeoutHandle: number | null = null;
     if (selectedTabIndex !== -1) {
       flatListRef.current?.scrollToIndex({
         index: selectedTabIndex,
         viewPosition: 0.5,
       });
-      pagerViewRef.current?.setPage(selectedTabIndex);
+      // 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(() => {
+        // use no animation to prevent unexpected behavior if users select tab too quickly
+        pagerViewRef.current?.setPageWithoutAnimation(selectedTabIndex);
+      }, 200);
     }
 
     const animation = Animated.parallel([
@@ -97,8 +103,13 @@ const ScrollableTab = ({
     ]);
     animation.start();
 
-    return () => animation.stop();
-  }, [selectedTabIndex]);
+    return () => {
+      animation.stop();
+      if (timeoutHandle) {
+        clearTimeout(timeoutHandle);
+      }
+    };
+  }, [selectedTabIndex, pagerViewRef]);
 
   return (
     <TabContainer style={containerStyle} testID={componentTestID}>

package/src/components/TextInput/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, forwardRef } from 'react';
 import { StyleSheet, TextInput as RNTextInput } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
@@ -141,225 +141,227 @@ export const getVariant = ({
 // https://github.com/callstack/react-native-paper/pull/3331
 const EMPTY_PLACEHOLDER_VALUE = ' ';
 
-const TextInput = (
-  {
-    label,
-    prefix,
-    suffix,
-    style,
-    textStyle,
-    testID,
-    accessibilityLabelledBy,
-    error,
-    required,
-    editable = true,
-    disabled = false,
-    loading = false,
-    maxLength,
-    helpText,
-    value,
-    defaultValue,
-    renderInputValue,
-    ...nativeProps
-  }: TextInputProps,
-  ref?: React.Ref<TextInputHandles>
-) => {
-  const displayText = (value !== undefined ? value : defaultValue) ?? '';
-  const isEmptyValue = displayText.length === 0;
-  const actualSuffix = loading ? 'loading' : suffix;
+const TextInput = forwardRef<TextInputHandles, TextInputProps>(
+  (
+    {
+      label,
+      prefix,
+      suffix,
+      style,
+      textStyle,
+      testID,
+      accessibilityLabelledBy,
+      error,
+      required,
+      editable = true,
+      disabled = false,
+      loading = false,
+      maxLength,
+      helpText,
+      value,
+      defaultValue,
+      renderInputValue,
+      ...nativeProps
+    }: TextInputProps,
+    ref?: React.Ref<TextInputHandles>
+  ) => {
+    const displayText = (value !== undefined ? value : defaultValue) ?? '';
+    const isEmptyValue = displayText.length === 0;
+    const actualSuffix = loading ? 'loading' : suffix;
 
-  const [isFocused, setIsFocused] = React.useState(false);
+    const [isFocused, setIsFocused] = React.useState(false);
 
-  const variant = getVariant({
-    disabled,
-    error,
-    editable,
-    loading,
-    isFocused,
-    isEmptyValue,
-  });
+    const variant = getVariant({
+      disabled,
+      error,
+      editable,
+      loading,
+      isFocused,
+      isEmptyValue,
+    });
 
-  const shouldShowMaxLength = maxLength !== undefined;
+    const shouldShowMaxLength = maxLength !== undefined;
 
-  const theme = useTheme();
+    const theme = useTheme();
 
-  const innerTextInput = React.useRef<RNTextInput | undefined | null>();
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
-      getNativeTextInputRef: () => innerTextInput.current,
-      focus: () => {
-        innerTextInput.current?.focus();
-      },
-      clear: () => innerTextInput.current?.clear(),
-      setNativeProps: (args: NativeTextInputProps) =>
-        innerTextInput.current?.setNativeProps(args),
-      isFocused: () => innerTextInput.current?.isFocused() || false,
-      blur: () => innerTextInput.current?.blur(),
-    }),
-    [innerTextInput]
-  );
+    const innerTextInput = React.useRef<RNTextInput | undefined | null>();
+    React.useImperativeHandle(
+      ref,
+      () => ({
+        // we don't expose this method, it's for testing https://medium.com/developer-rants/how-to-test-useref-without-mocking-useref-699165f4994e
+        getNativeTextInputRef: () => innerTextInput.current,
+        focus: () => {
+          innerTextInput.current?.focus();
+        },
+        clear: () => innerTextInput.current?.clear(),
+        setNativeProps: (args: NativeTextInputProps) =>
+          innerTextInput.current?.setNativeProps(args),
+        isFocused: () => innerTextInput.current?.isFocused() || false,
+        blur: () => innerTextInput.current?.blur(),
+      }),
+      [innerTextInput]
+    );
 
-  const { borderStyle, textStyleWithoutBorderStyle } = useMemo(() => {
-    if (!textStyle) {
-      return {};
-    }
+    const { borderStyle, textStyleWithoutBorderStyle } = useMemo(() => {
+      if (!textStyle) {
+        return {};
+      }
 
-    const flattenTextStyle = StyleSheet.flatten(textStyle);
-    const borderKeys = Object.keys(flattenTextStyle).filter((key) => {
-      return key.startsWith('border');
-    }) as Array<keyof TextStyle>;
-    return {
-      borderStyle: pick(borderKeys, flattenTextStyle),
-      textStyleWithoutBorderStyle: omit(borderKeys, flattenTextStyle),
-    };
-  }, [textStyle]);
+      const flattenTextStyle = StyleSheet.flatten(textStyle);
+      const borderKeys = Object.keys(flattenTextStyle).filter((key) => {
+        return key.startsWith('border');
+      }) as Array<keyof TextStyle>;
+      return {
+        borderStyle: pick(borderKeys, flattenTextStyle),
+        textStyleWithoutBorderStyle: omit(borderKeys, flattenTextStyle),
+      };
+    }, [textStyle]);
 
-  const nativeInputProps: NativeTextInputProps = {
-    style: StyleSheet.flatten([
-      { color: theme.__hd__.textInput.colors.text },
-      textStyleWithoutBorderStyle,
-    ]),
-    testID: 'text-input',
-    accessibilityState: {
-      disabled: variant === 'disabled' || variant === 'readonly',
-    },
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    accessibilityLabelledBy,
-    ...nativeProps,
-    onFocus: (event) => {
-      setIsFocused(true);
-      nativeProps.onFocus?.(event);
-    },
-    onBlur: (event) => {
-      setIsFocused(false);
-      nativeProps.onBlur?.(event);
-    },
-    editable,
-    maxLength,
-    value,
-    onChangeText: (text) => {
-      nativeProps.onChangeText?.(text);
-    },
-    defaultValue,
-    placeholder:
-      isFocused || label === undefined
-        ? nativeProps.placeholder
-        : EMPTY_PLACEHOLDER_VALUE,
-  };
+    const nativeInputProps: NativeTextInputProps = {
+      style: StyleSheet.flatten([
+        { color: theme.__hd__.textInput.colors.text },
+        textStyleWithoutBorderStyle,
+      ]),
+      testID: 'text-input',
+      accessibilityState: {
+        disabled: variant === 'disabled' || variant === 'readonly',
+      },
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      accessibilityLabelledBy,
+      ...nativeProps,
+      onFocus: (event) => {
+        setIsFocused(true);
+        nativeProps.onFocus?.(event);
+      },
+      onBlur: (event) => {
+        setIsFocused(false);
+        nativeProps.onBlur?.(event);
+      },
+      editable,
+      maxLength,
+      value,
+      onChangeText: (text) => {
+        nativeProps.onChangeText?.(text);
+      },
+      defaultValue,
+      placeholder:
+        isFocused || label === undefined
+          ? nativeProps.placeholder
+          : EMPTY_PLACEHOLDER_VALUE,
+    };
 
-  return (
-    <StyledContainer
-      style={style}
-      pointerEvents={
-        variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
-      }
-      testID={testID}
-    >
-      <StyledTextInputContainer>
-        <StyledBorderBackDrop
-          themeFocused={isFocused}
-          themeVariant={variant}
-          style={borderStyle}
-        />
-        {(isFocused || (label && !isEmptyValue)) && (
-          <StyledLabelContainer pointerEvents="none">
-            {required && (
-              <StyledAsteriskLabel themeVariant={variant} fontSize="small">
-                *
-              </StyledAsteriskLabel>
-            )}
-            {!!label && (
-              <StyledLabel
-                nativeID={accessibilityLabelledBy}
-                testID="input-label"
-                fontSize="small"
-                themeVariant={variant}
-              >
-                {label}
-              </StyledLabel>
-            )}
-          </StyledLabelContainer>
-        )}
-        {typeof prefix === 'string' ? (
-          <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
-            testID="input-prefix"
-            icon={prefix}
-            size="xsmall"
+    return (
+      <StyledContainer
+        style={style}
+        pointerEvents={
+          variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
+        }
+        testID={testID}
+      >
+        <StyledTextInputContainer>
+          <StyledBorderBackDrop
+            themeFocused={isFocused}
+            themeVariant={variant}
+            style={borderStyle}
           />
-        ) : (
-          prefix
-        )}
-        <StyledTextInputAndLabelContainer>
-          {!isFocused && isEmptyValue && (
-            <StyledLabelContainerInsideTextInput pointerEvents="none">
+          {(isFocused || (label && !isEmptyValue)) && (
+            <StyledLabelContainer pointerEvents="none">
               {required && (
-                <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                <StyledAsteriskLabel themeVariant={variant} fontSize="small">
                   *
-                </StyledAsteriskLabelInsideTextInput>
+                </StyledAsteriskLabel>
               )}
               {!!label && (
-                <StyledLabelInsideTextInput
+                <StyledLabel
                   nativeID={accessibilityLabelledBy}
                   testID="input-label"
-                  fontSize="medium"
+                  fontSize="small"
                   themeVariant={variant}
                 >
                   {label}
-                </StyledLabelInsideTextInput>
+                </StyledLabel>
               )}
-            </StyledLabelContainerInsideTextInput>
+            </StyledLabelContainer>
           )}
-          {renderInputValue ? (
-            renderInputValue(nativeInputProps)
-          ) : (
-            <StyledTextInput
-              {...nativeInputProps}
-              ref={(reference) => {
-                innerTextInput.current = reference;
-              }}
+          {typeof prefix === 'string' ? (
+            <Icon
+              intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+              testID="input-prefix"
+              icon={prefix}
+              size="xsmall"
             />
+          ) : (
+            prefix
           )}
-        </StyledTextInputAndLabelContainer>
-        {typeof actualSuffix === 'string' ? (
-          <Icon
-            intent={variant === 'disabled' ? 'disabled-text' : 'text'}
-            testID="input-suffix"
-            icon={actualSuffix}
-            spin={actualSuffix === 'loading'}
-            size="xsmall"
-          />
-        ) : (
-          suffix
-        )}
-      </StyledTextInputContainer>
-      <StyledErrorAndHelpTextContainer>
-        <StyledErrorAndMaxLengthContainer>
-          {!!error && (
-            <StyledErrorContainer>
-              <Icon
-                testID="input-error-icon"
-                icon="circle-info"
-                size="xsmall"
-                intent="danger"
+          <StyledTextInputAndLabelContainer>
+            {!isFocused && isEmptyValue && (
+              <StyledLabelContainerInsideTextInput pointerEvents="none">
+                {required && (
+                  <StyledAsteriskLabelInsideTextInput themeVariant={variant}>
+                    *
+                  </StyledAsteriskLabelInsideTextInput>
+                )}
+                {!!label && (
+                  <StyledLabelInsideTextInput
+                    nativeID={accessibilityLabelledBy}
+                    testID="input-label"
+                    fontSize="medium"
+                    themeVariant={variant}
+                  >
+                    {label}
+                  </StyledLabelInsideTextInput>
+                )}
+              </StyledLabelContainerInsideTextInput>
+            )}
+            {renderInputValue ? (
+              renderInputValue(nativeInputProps)
+            ) : (
+              <StyledTextInput
+                {...nativeInputProps}
+                ref={(reference) => {
+                  innerTextInput.current = reference;
+                }}
               />
-
-              <StyledError testID="input-error-message">{error}</StyledError>
-            </StyledErrorContainer>
-          )}
-          {shouldShowMaxLength && (
-            <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
-              {displayText.length}/{maxLength}
-            </StyledMaxLengthMessage>
+            )}
+          </StyledTextInputAndLabelContainer>
+          {typeof actualSuffix === 'string' ? (
+            <Icon
+              intent={variant === 'disabled' ? 'disabled-text' : 'text'}
+              testID="input-suffix"
+              icon={actualSuffix}
+              spin={actualSuffix === 'loading'}
+              size="xsmall"
+            />
+          ) : (
+            suffix
           )}
-        </StyledErrorAndMaxLengthContainer>
-        {!!helpText && <StyledHelperText>{helpText}</StyledHelperText>}
-      </StyledErrorAndHelpTextContainer>
-    </StyledContainer>
-  );
-};
+        </StyledTextInputContainer>
+        <StyledErrorAndHelpTextContainer>
+          <StyledErrorAndMaxLengthContainer>
+            {!!error && (
+              <StyledErrorContainer>
+                <Icon
+                  testID="input-error-icon"
+                  icon="circle-info"
+                  size="xsmall"
+                  intent="danger"
+                />
+
+                <StyledError testID="input-error-message">{error}</StyledError>
+              </StyledErrorContainer>
+            )}
+            {shouldShowMaxLength && (
+              <StyledMaxLengthMessage themeVariant={variant} fontSize="small">
+                {displayText.length}/{maxLength}
+              </StyledMaxLengthMessage>
+            )}
+          </StyledErrorAndMaxLengthContainer>
+          {!!helpText && <StyledHelperText>{helpText}</StyledHelperText>}
+        </StyledErrorAndHelpTextContainer>
+      </StyledContainer>
+    );
+  }
+);
 
-export default React.forwardRef<TextInputHandles, TextInputProps>(TextInput);
+export default TextInput;

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

@@ -83,5 +83,5 @@ export declare const getVariant: ({ disabled, error, editable, loading, isEmptyV
     isFocused?: boolean | undefined;
     isEmptyValue?: boolean | undefined;
 }) => Variant;
-declare const _default: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "accessibilityLabelledBy" | "required" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
-export default _default;
+declare const TextInput: React.ForwardRefExoticComponent<Pick<TextInputProps, "children" | "label" | "style" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "disabled" | "value" | "onBlur" | "onFocus" | "onPressIn" | "onPressOut" | "allowFontScaling" | "numberOfLines" | "maxFontSizeMultiplier" | "selectionColor" | "textBreakStrategy" | "loading" | "textAlign" | "error" | "textAlignVertical" | "onContentSizeChange" | "onScroll" | "scrollEnabled" | "onChange" | "autoCapitalize" | "autoCorrect" | "autoFocus" | "blurOnSubmit" | "caretHidden" | "contextMenuHidden" | "defaultValue" | "editable" | "keyboardType" | "maxLength" | "multiline" | "onChangeText" | "onEndEditing" | "onSelectionChange" | "onSubmitEditing" | "onTextInput" | "onKeyPress" | "placeholder" | "placeholderTextColor" | "returnKeyType" | "secureTextEntry" | "selectTextOnFocus" | "selection" | "inputAccessoryViewID" | "clearButtonMode" | "clearTextOnFocus" | "dataDetectorTypes" | "enablesReturnKeyAutomatically" | "keyboardAppearance" | "passwordRules" | "rejectResponderTermination" | "selectionState" | "spellCheck" | "textContentType" | "autoComplete" | "importantForAutofill" | "disableFullscreenUI" | "inlineImageLeft" | "inlineImagePadding" | "returnKeyLabel" | "underlineColorAndroid" | "showSoftInputOnFocus" | "prefix" | "suffix" | "textStyle" | "accessibilityLabelledBy" | "required" | "helpText" | "renderInputValue"> & React.RefAttributes<TextInputHandles>>;
+export default TextInput;