@hero-design/rn 8.25.0 → 8.25.2

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output b28cdc306082cd71
-@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 27.2s
-@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json
+@hero-design/rn:build: cache hit, replaying output ee3006d84e9b45f8
+@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 '/Volumes/Data/Projects/hero-design2/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 28.9s
+@hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -1,6 +1,6 @@
 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, TouchableHighlight, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, LayoutAnimation, RefreshControl as RefreshControl$1 } from 'react-native';
-import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, isValidElement, useLayoutEffect, useImperativeHandle } from 'react';
+import { Platform, Dimensions, StyleSheet as StyleSheet$1, Animated, View, UIManager, LayoutAnimation, TouchableOpacity, Text as Text$1, Easing, Image as Image$1, TouchableWithoutFeedback, Pressable, SafeAreaView, KeyboardAvoidingView, TouchableHighlight, ScrollView, Modal, FlatList, useWindowDimensions, TextInput as TextInput$1, PanResponder, InteractionManager, Keyboard, SectionList, RefreshControl as RefreshControl$1 } from 'react-native';
+import React, { useContext, createContext, createElement, useMemo, forwardRef, useEffect, useCallback, useRef, useState, isValidElement, useImperativeHandle, useLayoutEffect } from 'react';
 import { createIconSet } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import DateTimePicker from '@react-native-community/datetimepicker';
@@ -1071,7 +1071,9 @@ var palette$b = {
   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,
@@ -2929,7 +2931,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,
@@ -2948,7 +2950,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: {
@@ -2964,6 +2967,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,
@@ -2971,7 +2977,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
-    sizes: sizes
+    sizes: sizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -6027,26 +6034,6 @@ var index$a = components.reduce(function (acc, comp) {
   });
 }, styled);
 
-var StyledWrapper$c = index$a(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(View)(function () {
-  return {
-    height: Dimensions.get('window').height
-  };
-});
-var StyledChildWrapper = index$a(View)({
-  margin: 0,
-  padding: 0
-});
-
 // Get previous state value
 var usePrevious = function usePrevious(value) {
   var ref = React.useRef();
@@ -6072,13 +6059,37 @@ var useDeprecation = function useDeprecation(message) {
   }, [message, cond]);
 };
 
+var StyledWrapper$c = index$a(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(View)(function () {
+  return {
+    height: Dimensions.get('window').height
+  };
+});
+var StyledChildWrapper = index$a(View)({
+  margin: 0,
+  padding: 0
+});
+
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    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.useRef(new Animated.Value(0)).current;
   var _React$useState = React.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     contentHeight = _React$useState2[0],
@@ -6086,11 +6097,7 @@ var Collapse = function Collapse(_ref) {
   var previousOpenState = usePrevious(open);
   useEffect(function () {
     if (open !== previousOpenState && previousOpenState !== undefined || open) {
-      Animated.timing(collapseAnim, {
-        toValue: open ? contentHeight : 0,
-        easing: Easing.inOut(Easing.cubic),
-        useNativeDriver: false
-      }).start();
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
   var fetchMaxHeight = useCallback(function (_ref2) {
@@ -6099,7 +6106,7 @@ var Collapse = function Collapse(_ref) {
   }, []);
   return /*#__PURE__*/React.createElement(StyledWrapper$c, {
     style: {
-      height: collapseAnim
+      height: open ? contentHeight : 0
     },
     testID: testID
   }, /*#__PURE__*/React.createElement(StyledHiddenWrapper, null, /*#__PURE__*/React.createElement(StyledChildWrapper, {
@@ -11663,14 +11670,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(View)(function (_ref5) {
@@ -11978,12 +11989,10 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       backgroundColor: backgroundColor
     }
   }, required && /*#__PURE__*/React.createElement(StyledAsteriskLabel, {
-    themeState: state,
-    fontSize: "small"
+    themeState: state
   }, "*"), !!label && /*#__PURE__*/React.createElement(StyledLabel, {
     nativeID: accessibilityLabelledBy,
     testID: "input-label",
-    fontSize: "small",
     themeState: state,
     style: {
       backgroundColor: backgroundColor
@@ -12863,12 +12872,15 @@ var StyledFAB$1 = index$a(TouchableHighlight)(function (_ref) {
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
     justifyContent: 'center',
-    overflow: 'hidden',
     alignSelf: 'flex-start',
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
     flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation
+    elevation: theme.__hd__.fab.shadows.elevation,
+    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowOffset: theme.__hd__.fab.shadows.offset,
+    shadowRadius: theme.__hd__.fab.shadows.radius,
+    shadowOpacity: theme.__hd__.fab.shadows.opacity
   };
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
@@ -12892,15 +12904,6 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
-var StyledFABContainer = index$a(Box)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity
-  };
-});
 
 var _excluded$b = ["active"];
 var AnimatedIcons = Animated.createAnimatedComponent(StyledFABIcon);
@@ -12966,12 +12969,11 @@ var FAB = function FAB(_ref3) {
     style = _ref3.style;
   var isIconOnly = !title;
   var theme = useTheme();
-  return /*#__PURE__*/React.createElement(StyledFABContainer, {
+  return /*#__PURE__*/React.createElement(StyledFAB$1, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
+    onPress: onPress,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React.createElement(StyledFAB$1, {
-    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
-    onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React.createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -12979,7 +12981,7 @@ var FAB = function FAB(_ref3) {
   }) : /*#__PURE__*/React.createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  })));
+  }));
 };
 
 var StyledActionItem = index$a(TouchableHighlight)(function (_ref) {
@@ -13477,7 +13479,7 @@ function getState(_ref) {
   }
   return 'default';
 }
-function PinInput(_ref2) {
+var PinInput = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$value = _ref2.value,
     value = _ref2$value === void 0 ? '' : _ref2$value,
     onChangeText = _ref2.onChangeText,
@@ -13516,19 +13518,23 @@ function PinInput(_ref2) {
   }, []);
   var changeText = useCallback(function (text) {
     var pin = (text.match(/[0-9]/g) || []).join('');
-    if (onChangeText) {
-      onChangeText(pin);
-    }
-    if (pin.length === length && onFulfill) {
-      onFulfill(pin);
+    onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(pin);
+    if (pin.length === length) {
+      onFulfill === null || onFulfill === void 0 ? void 0 : onFulfill(pin);
     }
-  }, []);
+  }, [length, onChangeText, onFulfill]);
   useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
       InteractionManager.runAfterInteractions(focus);
     }
   }, [inputRef]);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
   return /*#__PURE__*/React.createElement(StyledWrapper$4, {
     style: style,
     testID: testID
@@ -13563,7 +13569,7 @@ function PinInput(_ref2) {
     pointerEvents: "box-only",
     testID: "pin-hidden-input"
   }));
-}
+});
 
 var THEME_INTENT_MAP = {
   primary: 'primary',

package/lib/index.js

@@ -1101,7 +1101,9 @@ var palette$b = {
   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,
@@ -2959,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,
@@ -2978,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: {
@@ -2994,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,
@@ -3001,7 +3007,8 @@ var getTextInputTheme = function getTextInputTheme(theme) {
     fontSizes: fontSizes,
     borderWidths: borderWidths,
     radii: radii,
-    sizes: sizes
+    sizes: sizes,
+    lineHeights: lineHeights
   };
 };
 
@@ -6057,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();
@@ -6102,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],
@@ -6116,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) {
@@ -6129,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, {
@@ -11693,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) {
@@ -12008,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
@@ -12893,12 +12902,15 @@ var StyledFAB$1 = index$a(reactNative.TouchableHighlight)(function (_ref) {
     borderRadius: theme.radii.rounded,
     alignItems: 'center',
     justifyContent: 'center',
-    overflow: 'hidden',
     alignSelf: 'flex-start',
     paddingHorizontal: theme.__hd__.fab.space.containerPaddingHorizontal,
     paddingVertical: theme.__hd__.fab.space.containerPaddingVertical,
     flexDirection: 'row',
-    elevation: theme.__hd__.fab.shadows.elevation
+    elevation: theme.__hd__.fab.shadows.elevation,
+    shadowColor: theme.__hd__.fab.colors.shadow,
+    shadowOffset: theme.__hd__.fab.shadows.offset,
+    shadowRadius: theme.__hd__.fab.shadows.radius,
+    shadowOpacity: theme.__hd__.fab.shadows.opacity
   };
 });
 var StyledFABIcon = index$a(Icon)(function (_ref2) {
@@ -12922,15 +12934,6 @@ var StyledFABText = index$a(Typography.Text)(function (_ref3) {
     marginHorizontal: theme.__hd__.fab.space.titleMarginHorizontal
   };
 });
-var StyledFABContainer = index$a(Box)(function (_ref4) {
-  var theme = _ref4.theme;
-  return {
-    shadowColor: theme.__hd__.fab.colors.shadow,
-    shadowOffset: theme.__hd__.fab.shadows.offset,
-    shadowRadius: theme.__hd__.fab.shadows.radius,
-    shadowOpacity: theme.__hd__.fab.shadows.opacity
-  };
-});
 
 var _excluded$b = ["active"];
 var AnimatedIcons = reactNative.Animated.createAnimatedComponent(StyledFABIcon);
@@ -12996,12 +12999,11 @@ var FAB = function FAB(_ref3) {
     style = _ref3.style;
   var isIconOnly = !title;
   var theme = useTheme();
-  return /*#__PURE__*/React__default["default"].createElement(StyledFABContainer, {
+  return /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
+    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
+    onPress: onPress,
     style: style,
     testID: testID
-  }, /*#__PURE__*/React__default["default"].createElement(StyledFAB$1, {
-    underlayColor: theme.__hd__.fab.colors.buttonPressedBackground,
-    onPress: onPress
   }, isIconOnly ? /*#__PURE__*/React__default["default"].createElement(IconOnlyContent, {
     animated: animated,
     active: active,
@@ -13009,7 +13011,7 @@ var FAB = function FAB(_ref3) {
   }) : /*#__PURE__*/React__default["default"].createElement(IconWithTextContent, {
     icon: icon,
     title: title
-  })));
+  }));
 };
 
 var StyledActionItem = index$a(reactNative.TouchableHighlight)(function (_ref) {
@@ -13507,7 +13509,7 @@ function getState(_ref) {
   }
   return 'default';
 }
-function PinInput(_ref2) {
+var PinInput = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var _ref2$value = _ref2.value,
     value = _ref2$value === void 0 ? '' : _ref2$value,
     onChangeText = _ref2.onChangeText,
@@ -13546,19 +13548,23 @@ function PinInput(_ref2) {
   }, []);
   var changeText = React.useCallback(function (text) {
     var pin = (text.match(/[0-9]/g) || []).join('');
-    if (onChangeText) {
-      onChangeText(pin);
-    }
-    if (pin.length === length && onFulfill) {
-      onFulfill(pin);
+    onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(pin);
+    if (pin.length === length) {
+      onFulfill === null || onFulfill === void 0 ? void 0 : onFulfill(pin);
     }
-  }, []);
+  }, [length, onChangeText, onFulfill]);
   React.useEffect(function () {
     // Must run after animations for keyboard to automatically open
     if (autoFocus) {
       reactNative.InteractionManager.runAfterInteractions(focus);
     }
   }, [inputRef]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      focus: focus,
+      blur: blur
+    };
+  });
   return /*#__PURE__*/React__default["default"].createElement(StyledWrapper$4, {
     style: style,
     testID: testID
@@ -13593,7 +13599,7 @@ function PinInput(_ref2) {
     pointerEvents: "box-only",
     testID: "pin-hidden-input"
   }));
-}
+});
 
 var THEME_INTENT_MAP = {
   primary: 'primary',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.25.0",
+  "version": "8.25.2",
   "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.25.0",
+    "@hero-design/colors": "8.25.2",
     "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.25.0",
+    "@hero-design/eslint-plugin": "8.25.2",
     "@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.25.0",
+    "eslint-config-hd": "8.25.2",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.25.0",
+    "prettier-config-hd": "8.25.2",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Collapse/index.tsx

@@ -1,13 +1,13 @@
-import { Animated, Easing } from 'react-native';
+import type { ReactNode } from 'react';
 import React, { useCallback, useEffect } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
-import type { ReactNode } from 'react';
+import { LayoutAnimation, Platform, UIManager } from 'react-native';
+import { usePrevious } from '../../utils/hooks';
 import {
   StyledChildWrapper,
   StyledHiddenWrapper,
   StyledWrapper,
 } from './StyledCollapse';
-import { usePrevious } from '../../utils/hooks';
 
 export interface CollapseProps extends ViewProps {
   /*
@@ -28,8 +28,13 @@ export interface CollapseProps extends ViewProps {
   testID?: string;
 }
 
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}
+
 const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
-  const collapseAnim = React.useRef(new Animated.Value(0)).current;
   const [contentHeight, setContentHeight] = React.useState<number>(0);
 
   const previousOpenState = usePrevious(open);
@@ -39,11 +44,7 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
       (open !== previousOpenState && previousOpenState !== undefined) ||
       open
     ) {
-      Animated.timing(collapseAnim, {
-        toValue: open ? contentHeight : 0,
-        easing: Easing.inOut(Easing.cubic),
-        useNativeDriver: false,
-      }).start();
+      LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
     }
   }, [open, previousOpenState, contentHeight]);
 
@@ -54,7 +55,7 @@ const Collapse = ({ open = false, children, testID, style }: CollapseProps) => {
   return (
     <StyledWrapper
       style={{
-        height: collapseAnim,
+        height: open ? contentHeight : 0,
       }}
       testID={testID}
     >