@hero-design/rn 7.22.0 → 7.22.1

package/.turbo/turbo-build.log

@@ -1,9 +1,9 @@
-@hero-design/rn:build: cache hit, replaying output 37ea971f848bea65
+@hero-design/rn:build: cache hit, replaying output f989e19224b6c38b
 @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 20s
+@hero-design/rn:build: created lib/index.js, es/index.js in 26.3s
 @hero-design/rn:build: $ tsc --noEmit false --emitDeclarationOnly

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, TouchableHighlight, Modal, TextInput as TextInput$1, PanResponder, InteractionManager, SectionList, Keyboard, FlatList, LayoutAnimation } 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, Modal, TextInput as TextInput$1, PanResponder, InteractionManager, SectionList, Keyboard, FlatList, LayoutAnimation } from 'react-native';
 import React, { useContext, createContext, createElement, forwardRef, useEffect, useCallback, useRef, useMemo, useState, useLayoutEffect, useImperativeHandle } from 'react';
 import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -15234,6 +15234,12 @@ var AnimatedSafeAreaView = Animated.createAnimatedComponent(SafeAreaView);
 var StyledWrapper$7 = index$8(View)(_objectSpread2(_objectSpread2({}, StyleSheet$1.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
+var StyledKeyboardAvoidingView = index$8(KeyboardAvoidingView)(function () {
+  return {
+    flex: 1,
+    flexDirection: 'column-reverse'
+  };
+});
 var StyledBottomSheet = index$8(AnimatedSafeAreaView)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -15936,18 +15942,18 @@ var BottomSheet = function BottomSheet(_ref) {
       _ref$showDivider = _ref.showDivider,
       showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
       style = _ref.style,
-      testID = _ref.testID;
+      testID = _ref.testID,
+      _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
+      keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding;
 
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1]; // Internal state to control modal open/close timing with animation
+  var _Dimensions$get = Dimensions.get('window'),
+      height = _Dimensions$get.height; // Internal state to control modal open/close timing with animation
 
 
-  var _useState3 = useState(open),
-      _useState4 = _slicedToArray(_useState3, 2),
-      visible = _useState4[0],
-      setVisibility = _useState4[1];
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisibility = _useState2[1];
 
   var animatedValue = useRef(new Animated.Value(open ? 0 : 1));
   useEffect(function () {
@@ -16005,11 +16011,9 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React.createElement(StyledBottomSheet, {
-    onLayout: function onLayout(_ref3) {
-      var nativeEvent = _ref3.nativeEvent;
-      return setHeight(nativeEvent.layout.height);
-    },
+  }), /*#__PURE__*/React.createElement(StyledKeyboardAvoidingView, _extends$1({
+    behavior: Platform.OS === 'ios' ? 'padding' : 'height'
+  }, keyboardAvoidingViewProps), /*#__PURE__*/React.createElement(StyledBottomSheet, {
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -16024,7 +16028,7 @@ var BottomSheet = function BottomSheet(_ref) {
     showCloseButton: showCloseButton
   }) : null, children, footer ? /*#__PURE__*/React.createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null)));
+  }, footer) : null))));
 };
 
 var colors = {

package/lib/index.js

@@ -15263,6 +15263,12 @@ var AnimatedSafeAreaView = reactNative.Animated.createAnimatedComponent(reactNat
 var StyledWrapper$7 = index$8(reactNative.View)(_objectSpread2(_objectSpread2({}, reactNative.StyleSheet.absoluteFillObject), {}, {
   flexDirection: 'column-reverse'
 }));
+var StyledKeyboardAvoidingView = index$8(reactNative.KeyboardAvoidingView)(function () {
+  return {
+    flex: 1,
+    flexDirection: 'column-reverse'
+  };
+});
 var StyledBottomSheet = index$8(AnimatedSafeAreaView)(function (_ref) {
   var theme = _ref.theme;
   return {
@@ -15965,18 +15971,18 @@ var BottomSheet = function BottomSheet(_ref) {
       _ref$showDivider = _ref.showDivider,
       showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
       style = _ref.style,
-      testID = _ref.testID;
+      testID = _ref.testID,
+      _ref$keyboardAvoiding = _ref.keyboardAvoidingViewProps,
+      keyboardAvoidingViewProps = _ref$keyboardAvoiding === void 0 ? {} : _ref$keyboardAvoiding;
 
-  var _useState = React.useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1]; // Internal state to control modal open/close timing with animation
+  var _Dimensions$get = reactNative.Dimensions.get('window'),
+      height = _Dimensions$get.height; // Internal state to control modal open/close timing with animation
 
 
-  var _useState3 = React.useState(open),
-      _useState4 = _slicedToArray(_useState3, 2),
-      visible = _useState4[0],
-      setVisibility = _useState4[1];
+  var _useState = React.useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      visible = _useState2[0],
+      setVisibility = _useState2[1];
 
   var animatedValue = React.useRef(new reactNative.Animated.Value(open ? 0 : 1));
   React.useEffect(function () {
@@ -16034,11 +16040,9 @@ var BottomSheet = function BottomSheet(_ref) {
       opacity: interpolateOpacity
     },
     onPress: onRequestClose
-  }), /*#__PURE__*/React__default["default"].createElement(StyledBottomSheet, {
-    onLayout: function onLayout(_ref3) {
-      var nativeEvent = _ref3.nativeEvent;
-      return setHeight(nativeEvent.layout.height);
-    },
+  }), /*#__PURE__*/React__default["default"].createElement(StyledKeyboardAvoidingView, _extends$1({
+    behavior: reactNative.Platform.OS === 'ios' ? 'padding' : 'height'
+  }, keyboardAvoidingViewProps), /*#__PURE__*/React__default["default"].createElement(StyledBottomSheet, {
     style: [style, {
       transform: [{
         scaleY: height > 0 ? 1 : 0
@@ -16053,7 +16057,7 @@ var BottomSheet = function BottomSheet(_ref) {
     showCloseButton: showCloseButton
   }) : null, children, footer ? /*#__PURE__*/React__default["default"].createElement(Footer$1, {
     showDivider: showDivider
-  }, footer) : null)));
+  }, footer) : null))));
 };
 
 var colors = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "7.22.0",
+  "version": "7.22.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "7.22.0",
+    "@hero-design/colors": "7.22.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.9"
@@ -57,7 +57,7 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "7.22.0",
+    "eslint-config-hd": "7.22.1",
     "jest": "^27.3.1",
     "react": "17.0.2",
     "react-native": "0.65.1",
@@ -70,7 +70,7 @@
     "rollup-plugin-copy": "^3.4.0",
     "rollup-plugin-flow": "^1.1.1",
     "ts-jest": "^27.0.7",
-    "prettier-config-hd": "7.22.0"
+    "prettier-config-hd": "7.22.1"
   },
   "prettier": "prettier-config-hd"
 }

package/src/components/BottomSheet/StyledBottomSheet.tsx

@@ -1,6 +1,8 @@
 import styled from '@emotion/native';
 import {
   Animated,
+  KeyboardAvoidingView,
+  KeyboardAvoidingViewProps,
   Pressable,
   SafeAreaView,
   StyleSheet,
@@ -17,6 +19,13 @@ const StyledWrapper = styled(View)<ViewProps>({
   flexDirection: 'column-reverse',
 });
 
+const StyledKeyboardAvoidingView = styled(
+  KeyboardAvoidingView
+)<KeyboardAvoidingViewProps>(() => ({
+  flex: 1,
+  flexDirection: 'column-reverse',
+}));
+
 const StyledBottomSheet = styled(AnimatedSafeAreaView)<
   ComponentProps<typeof AnimatedSafeAreaView>
 >(({ theme }) => ({
@@ -77,4 +86,5 @@ export {
   StyledIconWrapper,
   StyledBottomSheet,
   StyledBackdrop,
+  StyledKeyboardAvoidingView,
 };