@hero-design/rn 8.109.0 → 8.109.2

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3326) 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.1s
+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 20.9s
+created ., . in 20.2s

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @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
+
+- [#4236](https://github.com/Thinkei/hero-design/pull/4236) [`a873d35cddd56b5302bd4d0f95a2dfa887be995e`](https://github.com/Thinkei/hero-design/commit/a873d35cddd56b5302bd4d0f95a2dfa887be995e) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - [Button] call onPress callback with no args
+
 ## 8.109.0
 
 ### Minor 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,
@@ -10932,6 +10932,9 @@ var Button = function Button(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isPressed = _useState2[0],
     setIsPressed = _useState2[1];
+  var handlePress = useCallback(function () {
+    return onPress();
+  }, [onPress]);
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
   var isCompactVariant = ['filled-compact', 'outlined-compact', 'text-compact', 'inline-text-compact'].includes(variant);
   var isMediumVariant = ['filled-medium', 'outlined-medium', 'text-medium'].includes(variant);
@@ -10981,7 +10984,7 @@ var Button = function Button(_ref) {
     accessibilityLabel: accessibilityLabel,
     disabled: disabled || loading,
     loading: loading,
-    onPress: onPress,
+    onPress: handlePress,
     testID: testID,
     themeButtonVariant: themeVariant,
     style: style,
@@ -47508,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
@@ -47522,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 = [{
@@ -47648,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,
@@ -10961,6 +10961,9 @@ var Button = function Button(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     isPressed = _useState2[0],
     setIsPressed = _useState2[1];
+  var handlePress = React.useCallback(function () {
+    return onPress();
+  }, [onPress]);
   useDeprecation("Button variant ".concat(deprecatedVariants.join(', '), " are deprecated."), deprecatedVariants.includes(themeVariant));
   var isCompactVariant = ['filled-compact', 'outlined-compact', 'text-compact', 'inline-text-compact'].includes(variant);
   var isMediumVariant = ['filled-medium', 'outlined-medium', 'text-medium'].includes(variant);
@@ -11010,7 +11013,7 @@ var Button = function Button(_ref) {
     accessibilityLabel: accessibilityLabel,
     disabled: disabled || loading,
     loading: loading,
-    onPress: onPress,
+    onPress: handlePress,
     testID: testID,
     themeButtonVariant: themeVariant,
     style: style,
@@ -47537,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
@@ -47551,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 = [{
@@ -47677,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.0",
+  "version": "8.109.2",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Button/Button.tsx

@@ -1,5 +1,5 @@
 import type { ReactChild, ReactNode } from 'react';
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { Theme } from '../../theme';
 import { useTheme } from '../../theme';
@@ -193,6 +193,7 @@ const Button = ({
     return isInlineText ? 'transparent' : getUnderlayColor(theme, themeVariant);
   }, [theme, themeVariant, isInlineText]);
   const [isPressed, setIsPressed] = useState(false);
+  const handlePress = useCallback(() => onPress(), [onPress]);
 
   useDeprecation(
     `Button variant ${deprecatedVariants.join(', ')} are deprecated.`,
@@ -282,7 +283,7 @@ const Button = ({
       accessibilityLabel={accessibilityLabel}
       disabled={disabled || loading}
       loading={loading}
-      onPress={onPress}
+      onPress={handlePress}
       testID={testID}
       themeButtonVariant={themeVariant}
       style={style}

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

@@ -104,6 +104,15 @@ describe('Button', () => {
         fireEvent.press(getByText('A button'));
         expect(onPress).toHaveBeenCalledTimes(1);
       });
+
+      it('triggers onPress with no arguments', () => {
+        const onPress = jest.fn();
+        const { getByText } = renderWithTheme(
+          <Button text="A button" onPress={onPress} />
+        );
+        fireEvent.press(getByText('A button'));
+        expect(onPress).toHaveBeenCalledWith();
+      });
     });
   });
 

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 = {