@hero-design/rn 8.109.1 → 8.109.2

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3341) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3312) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
 (Use `node --trace-warnings ...` to show where the warning was created)
 
 src/index.ts → lib/index.js, es/index.js...
@@ -9,9 +9,9 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
 ...and 12 more
 (!) [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`.
 (!) [plugin node-resolve] preferring built-in module 'events' over local alternative at '/home/runner/work/hero-design/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning.or passing a function to 'preferBuiltins' to provide more fine-grained control over which built-in modules to prefer.
-created lib/index.js, es/index.js in 1m 12.6s
+created lib/index.js, es/index.js in 1m 11.5s
 
 /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_AU.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/en_CA.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/index.ts, /home/runner/work/hero-design/hero-design/packages/rn/src/locales/types.ts → ., ....
 (!) Generated empty chunks
 "locales/types" and "locales/types"
-created ., . in 21.1s
+created ., . in 20.2s

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @hero-design/rn
 
+## 8.109.2
+
+### Patch Changes
+
+- [#4237](https://github.com/Thinkei/hero-design/pull/4237) [`746100e1369da6411eb771a0f153da6ac9a6dcf9`](https://github.com/Thinkei/hero-design/commit/746100e1369da6411eb771a0f153da6ac9a6dcf9) Thanks [@ngvuthanhnhan-eh-hi](https://github.com/ngvuthanhnhan-eh-hi)! - [Toolbar.Message] Fix the shrinkage issue on iPad
+
+- [#4241](https://github.com/Thinkei/hero-design/pull/4241) [`c901f282aa0d46d38f03470c823696e87632d9ef`](https://github.com/Thinkei/hero-design/commit/c901f282aa0d46d38f03470c823696e87632d9ef) Thanks [@khoaddtran](https://github.com/khoaddtran)! - [RichTextEditor] Fix rich text editor is reset when height changed on Android
+
 ## 8.109.1
 
 ### Patch Changes

package/es/index.js

@@ -7283,7 +7283,7 @@ var getToolbarTheme = function getToolbarTheme(theme) {
   var sizes = {
     itemWrapperHeight: scale(64),
     messageWrapperHeight: scale(64),
-    messageInputHeight: 40
+    messageInputHeight: scale(40)
   };
   var radii = {
     iconButtonWrapperBorderRadius: theme.radii.xxxlarge,
@@ -47511,13 +47511,20 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
         break;
     }
   }, [onFocus, onBlur]);
-  return /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
+  return /*#__PURE__*/React__default.createElement(View, {
+    testID: "webViewWrapper",
+    style: {
+      height: webviewHeight,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
     onPress: function onPress(e) {
       return e.stopPropagation();
     }
   }, /*#__PURE__*/React__default.createElement(StyledWebView, {
     hideKeyboardAccessoryView: true,
     ref: webview,
+    style: style,
     testID: testID,
     source: {
       html: html
@@ -47525,11 +47532,9 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     onMessage: onMessage,
     scrollEnabled: false,
     originWhitelist: ['*'],
-    keyboardDisplayRequiresUserAction: false,
-    style: StyleSheet$1.flatten([style, {
-      height: webviewHeight
-    }])
-  }));
+    showsVerticalScrollIndicator: false,
+    keyboardDisplayRequiresUserAction: false
+  })));
 };
 
 var defaultValue = [{
@@ -47651,9 +47656,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeState: state,
     themeFocused: isFocused
-  }), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, {
-    testID: "webViewWrapper"
-  }, /*#__PURE__*/React__default.createElement(BaseRichTextEditor, {
+  }), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, /*#__PURE__*/React__default.createElement(BaseRichTextEditor, {
     name: name,
     value: value,
     style: [style, {

package/lib/index.js

@@ -7312,7 +7312,7 @@ var getToolbarTheme = function getToolbarTheme(theme) {
   var sizes = {
     itemWrapperHeight: scale(64),
     messageWrapperHeight: scale(64),
-    messageInputHeight: 40
+    messageInputHeight: scale(40)
   };
   var radii = {
     iconButtonWrapperBorderRadius: theme.radii.xxxlarge,
@@ -47540,13 +47540,20 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
         break;
     }
   }, [onFocus, onBlur]);
-  return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
+  return /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
+    testID: "webViewWrapper",
+    style: {
+      height: webviewHeight,
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
     onPress: function onPress(e) {
       return e.stopPropagation();
     }
   }, /*#__PURE__*/React__namespace.default.createElement(StyledWebView, {
     hideKeyboardAccessoryView: true,
     ref: webview,
+    style: style,
     testID: testID,
     source: {
       html: html
@@ -47554,11 +47561,9 @@ var BaseRichTextEditor = function BaseRichTextEditor(_ref) {
     onMessage: onMessage,
     scrollEnabled: false,
     originWhitelist: ['*'],
-    keyboardDisplayRequiresUserAction: false,
-    style: reactNative.StyleSheet.flatten([style, {
-      height: webviewHeight
-    }])
-  }));
+    showsVerticalScrollIndicator: false,
+    keyboardDisplayRequiresUserAction: false
+  })));
 };
 
 var defaultValue = [{
@@ -47680,9 +47685,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBorderBackDrop, {
     themeState: state,
     themeFocused: isFocused
-  }), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, {
-    testID: "webViewWrapper"
-  }, /*#__PURE__*/React__namespace.default.createElement(BaseRichTextEditor, {
+  }), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, /*#__PURE__*/React__namespace.default.createElement(BaseRichTextEditor, {
     name: name,
     value: value,
     style: [style, {

package/package.json

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

package/src/components/RichTextEditor/BaseRichTextEditor.tsx

@@ -7,7 +7,7 @@ import React, {
   useState,
 } from 'react';
 
-import { TouchableWithoutFeedback, StyleSheet } from 'react-native';
+import { TouchableWithoutFeedback, View } from 'react-native';
 import type { WebView } from 'react-native-webview';
 import type { ReactElement, Ref } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
@@ -282,19 +282,25 @@ const BaseRichTextEditor = ({
   );
 
   return (
-    <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
-      <StyledWebView
-        hideKeyboardAccessoryView
-        ref={webview}
-        testID={testID}
-        source={{ html }}
-        onMessage={onMessage}
-        scrollEnabled={false}
-        originWhitelist={['*']}
-        keyboardDisplayRequiresUserAction={false}
-        style={StyleSheet.flatten([style, { height: webviewHeight }])}
-      />
-    </TouchableWithoutFeedback>
+    <View
+      testID="webViewWrapper"
+      style={{ height: webviewHeight, width: '100%' }}
+    >
+      <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
+        <StyledWebView
+          hideKeyboardAccessoryView
+          ref={webview}
+          style={style}
+          testID={testID}
+          source={{ html }}
+          onMessage={onMessage}
+          scrollEnabled={false}
+          originWhitelist={['*']}
+          showsVerticalScrollIndicator={false}
+          keyboardDisplayRequiresUserAction={false}
+        />
+      </TouchableWithoutFeedback>
+    </View>
   );
 };
 

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -188,7 +188,7 @@ const RichTextEditor = ({
       <StyledTextInputContainer onLayout={onLayout}>
         <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
 
-        <StyledTextInputAndLabelContainer testID="webViewWrapper">
+        <StyledTextInputAndLabelContainer>
           <BaseRichTextEditor
             name={name}
             value={value}

package/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx

@@ -201,7 +201,7 @@ describe('RichTextEditor', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.getByTestId('webview')).toHaveStyle({
+        expect(wrapper.getByTestId('webViewWrapper')).toHaveStyle({
           height: 480,
         });
       });

package/src/components/RichTextEditor/__tests__/__snapshots__/RichTextEditor.spec.tsx.snap

@@ -135,38 +135,47 @@ exports[`RichTextEditor onMessage received event editor-layout should update hei
             undefined,
           ]
         }
-        testID="webViewWrapper"
       >
-        <WebView
-          accessibilityState={
+        <View
+          style={
             {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
+              "height": 480,
+              "width": "100%",
             }
           }
-          accessible={true}
-          focusable={true}
-          hideKeyboardAccessoryView={true}
-          keyboardDisplayRequiresUserAction={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          originWhitelist={
-            [
-              "*",
-            ]
-          }
-          scrollEnabled={false}
-          source={
-            {
-              "html": "
+          testID="webViewWrapper"
+        >
+          <WebView
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            hideKeyboardAccessoryView={true}
+            keyboardDisplayRequiresUserAction={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            originWhitelist={
+              [
+                "*",
+              ]
+            }
+            scrollEnabled={false}
+            showsVerticalScrollIndicator={false}
+            source={
+              {
+                "html": "
       <!DOCTYPE html>
       <html>
         <head>
@@ -197,25 +206,29 @@ exports[`RichTextEditor onMessage received event editor-layout should update hei
         </body>
       </html>
       ",
+              }
             }
-          }
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontSize": 16,
-                "minHeight": 24,
-                "textAlignVertical": "center",
-              },
-              {
-                "backgroundColor": "yellow",
-                "height": 480,
-                "marginHorizontal": 8,
-              },
-            ]
-          }
-          testID="webview"
-        />
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontSize": 16,
+                  "minHeight": 24,
+                  "textAlignVertical": "center",
+                },
+                [
+                  {
+                    "backgroundColor": "yellow",
+                  },
+                  {
+                    "marginHorizontal": 8,
+                  },
+                ],
+              ]
+            }
+            testID="webview"
+          />
+        </View>
       </View>
     </View>
     <View
@@ -460,38 +473,47 @@ exports[`RichTextEditor should render correctly 1`] = `
             undefined,
           ]
         }
-        testID="webViewWrapper"
       >
-        <WebView
-          accessibilityState={
+        <View
+          style={
             {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": undefined,
-              "expanded": undefined,
-              "selected": undefined,
+              "height": undefined,
+              "width": "100%",
             }
           }
-          accessible={true}
-          focusable={true}
-          hideKeyboardAccessoryView={true}
-          keyboardDisplayRequiresUserAction={false}
-          onClick={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          originWhitelist={
-            [
-              "*",
-            ]
-          }
-          scrollEnabled={false}
-          source={
-            {
-              "html": "
+          testID="webViewWrapper"
+        >
+          <WebView
+            accessibilityState={
+              {
+                "busy": undefined,
+                "checked": undefined,
+                "disabled": undefined,
+                "expanded": undefined,
+                "selected": undefined,
+              }
+            }
+            accessible={true}
+            focusable={true}
+            hideKeyboardAccessoryView={true}
+            keyboardDisplayRequiresUserAction={false}
+            onClick={[Function]}
+            onResponderGrant={[Function]}
+            onResponderMove={[Function]}
+            onResponderRelease={[Function]}
+            onResponderTerminate={[Function]}
+            onResponderTerminationRequest={[Function]}
+            onStartShouldSetResponder={[Function]}
+            originWhitelist={
+              [
+                "*",
+              ]
+            }
+            scrollEnabled={false}
+            showsVerticalScrollIndicator={false}
+            source={
+              {
+                "html": "
       <!DOCTYPE html>
       <html>
         <head>
@@ -522,25 +544,29 @@ exports[`RichTextEditor should render correctly 1`] = `
         </body>
       </html>
       ",
+              }
             }
-          }
-          style={
-            [
-              {
-                "backgroundColor": "transparent",
-                "fontSize": 16,
-                "minHeight": 24,
-                "textAlignVertical": "center",
-              },
-              {
-                "backgroundColor": "yellow",
-                "height": undefined,
-                "marginHorizontal": 8,
-              },
-            ]
-          }
-          testID="webview"
-        />
+            style={
+              [
+                {
+                  "backgroundColor": "transparent",
+                  "fontSize": 16,
+                  "minHeight": 24,
+                  "textAlignVertical": "center",
+                },
+                [
+                  {
+                    "backgroundColor": "yellow",
+                  },
+                  {
+                    "marginHorizontal": 8,
+                  },
+                ],
+              ]
+            }
+            testID="webview"
+          />
+        </View>
       </View>
     </View>
     <View

package/src/theme/components/toolbar.ts

@@ -37,7 +37,7 @@ const getToolbarTheme = (theme: GlobalTheme) => {
   const sizes = {
     itemWrapperHeight: scale(64),
     messageWrapperHeight: scale(64),
-    messageInputHeight: 40,
+    messageInputHeight: scale(40),
   };
 
   const radii = {