@hero-design/rn 8.101.2-alpha.2 → 8.101.3-alpha.0

package/.turbo/turbo-build.log

@@ -0,0 +1,23 @@
+(node:4149) 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...
+(!) Circular dependencies
+node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/select.js -> node_modules/d3-selection/src/selection/index.js
+node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/selectAll.js -> node_modules/d3-selection/src/selection/index.js
+node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/src/selection/filter.js -> node_modules/d3-selection/src/selection/index.js
+...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 typescript] src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx (61:35): @rollup/plugin-typescript TS2307: Cannot find module '../../../../types' or its corresponding type declarations.
+/home/runner/work/hero-design/hero-design/packages/rn/src/components/RichTextEditor/__tests__/RichTextEditor.spec.tsx:61:35
+
+61 import { RichTextEditorRef } from "../../../../types";
+                                     ~~~~~~~~~~~~~~~~~~~
+
+(!) [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 11.2s
+
+/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 25.9s

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @hero-design/rn
 
+## 8.101.3-alpha.0
+
+### Patch Changes
+
+- [`4de62c1c0bda0ef6f78a9c93956192641b6e9eea`](https://github.com/Thinkei/hero-design/commit/4de62c1c0bda0ef6f78a9c93956192641b6e9eea) Thanks [@cuongnguyeneh](https://github.com/cuongnguyeneh)! - chore: update testId of native text input
+
+## 8.101.2
+
+### Patch Changes
+
+- [#3970](https://github.com/Thinkei/hero-design/pull/3970) [`3d942b61a92e723cc0ce3acdad676ca067a1d588`](https://github.com/Thinkei/hero-design/commit/3d942b61a92e723cc0ce3acdad676ca067a1d588) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [BottomSheet] Fix overlapping with dynamic island issue
+
 ## 8.101.1
 
 ### Patch Changes

package/es/index.js

@@ -2684,15 +2684,15 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       medium: theme.fontSizes.small,
       small: 8
     },
-    count: 8
+    count: 6
   };
   var lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
     count: Platform.select({
-      android: 14,
+      android: 11,
       // vertical alignment
-      "default": 18
+      "default": 12
     })
   };
   var radii = {
@@ -2710,8 +2710,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
     count: {
-      width: theme.sizes.medium,
-      height: theme.sizes.medium
+      width: theme.sizes.smallMedium,
+      height: theme.sizes.smallMedium
     }
   };
   var borderWidths = {
@@ -2724,8 +2724,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     small: {
       horizontalPadding: theme.space.xsmall
     },
-    statusPositionTop: -theme.space.xsmall,
-    statusPositionRight: -theme.space.xsmall,
+    statusPositionTop: -theme.space.xxsmall,
+    statusPositionRight: -theme.space.xxsmall,
     countPaddingHorizontal: theme.space.xxsmall
   };
   return {
@@ -20175,12 +20175,13 @@ var TextInput = /*#__PURE__*/forwardRef(function (_ref8, ref) {
     }, [style, theme]),
     backgroundColor = _useMemo2.backgroundColor,
     styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
+  var nativeInputTestIDSuffix = testID ? "-".concat(testID) : '';
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: StyleSheet$1.flatten([{
       backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
-    testID: 'text-input',
+    testID: "text-input".concat(nativeInputTestIDSuffix),
     accessibilityState: {
       disabled: state === 'disabled' || state === 'readonly'
     },

package/lib/index.js

@@ -2713,15 +2713,15 @@ var getBadgeTheme = function getBadgeTheme(theme) {
       medium: theme.fontSizes.small,
       small: 8
     },
-    count: 8
+    count: 6
   };
   var lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
     count: reactNative.Platform.select({
-      android: 14,
+      android: 11,
       // vertical alignment
-      "default": 18
+      "default": 12
     })
   };
   var radii = {
@@ -2739,8 +2739,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
     count: {
-      width: theme.sizes.medium,
-      height: theme.sizes.medium
+      width: theme.sizes.smallMedium,
+      height: theme.sizes.smallMedium
     }
   };
   var borderWidths = {
@@ -2753,8 +2753,8 @@ var getBadgeTheme = function getBadgeTheme(theme) {
     small: {
       horizontalPadding: theme.space.xsmall
     },
-    statusPositionTop: -theme.space.xsmall,
-    statusPositionRight: -theme.space.xsmall,
+    statusPositionTop: -theme.space.xxsmall,
+    statusPositionRight: -theme.space.xxsmall,
     countPaddingHorizontal: theme.space.xxsmall
   };
   return {
@@ -20204,12 +20204,13 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_ref8, ref) {
     }, [style, theme]),
     backgroundColor = _useMemo2.backgroundColor,
     styleWithoutBackgroundColor = _useMemo2.styleWithoutBackgroundColor;
+  var nativeInputTestIDSuffix = testID ? "-".concat(testID) : '';
   var nativeInputProps = _objectSpread2(_objectSpread2({
     style: reactNative.StyleSheet.flatten([{
       backgroundColor: backgroundColor,
       color: theme.__hd__.textInput.colors.text
     }, textStyleWithoutBorderStyle]),
-    testID: 'text-input',
+    testID: "text-input".concat(nativeInputTestIDSuffix),
     accessibilityState: {
       disabled: state === 'disabled' || state === 'readonly'
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.101.2-alpha.2",
+  "version": "8.101.3-alpha.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/Badge/__tests__/__snapshots__/Count.spec.tsx.snap

@@ -34,15 +34,15 @@ exports[`BadgeCount displays 1 for content 1 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 16,
+            "height": 12,
             "justifyContent": "center",
-            "minWidth": 16,
+            "minWidth": 12,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -4,
+            "right": -2,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -4,
+            "top": -2,
           },
           undefined,
         ]
@@ -63,9 +63,9 @@ exports[`BadgeCount displays 1 for content 1 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 8,
-                "height": 16,
-                "lineHeight": 18,
+                "fontSize": 6,
+                "height": 12,
+                "lineHeight": 12,
               },
               undefined,
             ],
@@ -137,15 +137,15 @@ exports[`BadgeCount displays 12 for content 12 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 16,
+            "height": 12,
             "justifyContent": "center",
-            "minWidth": 16,
+            "minWidth": 12,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -4,
+            "right": -2,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -4,
+            "top": -2,
           },
           undefined,
         ]
@@ -166,9 +166,9 @@ exports[`BadgeCount displays 12 for content 12 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 8,
-                "height": 16,
-                "lineHeight": 18,
+                "fontSize": 6,
+                "height": 12,
+                "lineHeight": 12,
               },
               undefined,
             ],
@@ -240,15 +240,15 @@ exports[`BadgeCount displays 99+ for content 999 1`] = `
             "borderRadius": 999,
             "color": "#ffffff",
             "display": "flex",
-            "height": 16,
+            "height": 12,
             "justifyContent": "center",
-            "minWidth": 16,
+            "minWidth": 12,
             "paddingHorizontal": 2,
             "position": "absolute",
-            "right": -4,
+            "right": -2,
             "textAlign": "center",
             "textAlignVertical": "center",
-            "top": -4,
+            "top": -2,
           },
           undefined,
         ]
@@ -269,9 +269,9 @@ exports[`BadgeCount displays 99+ for content 999 1`] = `
             [
               {
                 "color": "#ffffff",
-                "fontSize": 8,
-                "height": 16,
-                "lineHeight": 18,
+                "fontSize": 6,
+                "height": 12,
+                "lineHeight": 12,
               },
               undefined,
             ],

package/src/components/Badge/__tests__/__snapshots__/Status.spec.tsx.snap

@@ -33,8 +33,8 @@ exports[`Status Badge renders correctly 1`] = `
           "height": 8,
           "opacity": 1,
           "position": "absolute",
-          "right": -4,
-          "top": -4,
+          "right": -2,
+          "top": -2,
           "transform": [
             {
               "scale": 1,
@@ -108,8 +108,8 @@ exports[`Status Badge renders correctly with intent 1`] = `
           "height": 8,
           "opacity": 1,
           "position": "absolute",
-          "right": -4,
-          "top": -4,
+          "right": -2,
+          "top": -2,
           "transform": [
             {
               "scale": 1,

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/Option.spec.tsx.snap

@@ -55,8 +55,8 @@ exports[`Option renders correctly when not selected 1`] = `
             "height": 8,
             "opacity": 1,
             "position": "absolute",
-            "right": -4,
-            "top": -4,
+            "right": -2,
+            "top": -2,
             "transform": [
               {
                 "scale": 1,
@@ -155,8 +155,8 @@ exports[`Option renders correctly when selected 1`] = `
             "height": 8,
             "opacity": 1,
             "position": "absolute",
-            "right": -4,
-            "top": -4,
+            "right": -2,
+            "top": -2,
             "transform": [
               {
                 "scale": 1,
@@ -277,8 +277,8 @@ exports[`OptionContent renders correctly when there is a badge 1`] = `
           "height": 8,
           "opacity": 1,
           "position": "absolute",
-          "right": -4,
-          "top": -4,
+          "right": -2,
+          "top": -2,
           "transform": [
             {
               "scale": 1,

package/src/components/Switch/SelectorSwitch/__tests__/__snapshots__/index.spec.tsx.snap

@@ -130,8 +130,8 @@ exports[`SelectorSwitch renders correctly 1`] = `
               "height": 8,
               "opacity": 1,
               "position": "absolute",
-              "right": -4,
-              "top": -4,
+              "right": -2,
+              "top": -2,
               "transform": [
                 {
                   "scale": 1,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabs.spec.tsx.snap

@@ -560,8 +560,8 @@ exports[`Tabs.Scroll lazy not render lazy screen: xxx 1`] = `
                           "height": 8,
                           "opacity": 1,
                           "position": "absolute",
-                          "right": -4,
-                          "top": -4,
+                          "right": -2,
+                          "top": -2,
                           "transform": [
                             {
                               "scale": 1,
@@ -1493,8 +1493,8 @@ exports[`Tabs.Scroll renders correctly 1`] = `
                           "height": 8,
                           "opacity": 1,
                           "position": "absolute",
-                          "right": -4,
-                          "top": -4,
+                          "right": -2,
+                          "top": -2,
                           "transform": [
                             {
                               "scale": 1,
@@ -2426,8 +2426,8 @@ exports[`useIsFocused renders correctly 1`] = `
                           "height": 8,
                           "opacity": 1,
                           "position": "absolute",
-                          "right": -4,
-                          "top": -4,
+                          "right": -2,
+                          "top": -2,
                           "transform": [
                             {
                               "scale": 1,

package/src/components/Tabs/__tests__/__snapshots__/ScrollableTabsHeader.spec.tsx.snap

@@ -453,8 +453,8 @@ exports[`ScrollableTabsHeader highlighted variant renders correctly 1`] = `
                         "height": 8,
                         "opacity": 1,
                         "position": "absolute",
-                        "right": -4,
-                        "top": -4,
+                        "right": -2,
+                        "top": -2,
                         "transform": [
                           {
                             "scale": 1,
@@ -1069,8 +1069,8 @@ exports[`ScrollableTabsHeader underlined variant renders correctly 1`] = `
                         "height": 8,
                         "opacity": 1,
                         "position": "absolute",
-                        "right": -4,
-                        "top": -4,
+                        "right": -2,
+                        "top": -2,
                         "transform": [
                           {
                             "scale": 1,

package/src/components/Tabs/__tests__/__snapshots__/TabWithBadge.spec.tsx.snap

@@ -128,8 +128,8 @@ exports[`TabWithBadge renders correctly with status badge config 1`] = `
           "height": 8,
           "opacity": 1,
           "position": "absolute",
-          "right": -4,
-          "top": -4,
+          "right": -2,
+          "top": -2,
           "transform": [
             {
               "scale": 1,

package/src/components/Tabs/__tests__/__snapshots__/index.spec.tsx.snap

@@ -340,8 +340,8 @@ exports[`Tabs renders correctly 1`] = `
                       "height": 8,
                       "opacity": 1,
                       "position": "absolute",
-                      "right": -4,
-                      "top": -4,
+                      "right": -2,
+                      "top": -2,
                       "transform": [
                         {
                           "scale": 1,
@@ -1017,8 +1017,8 @@ exports[`useIsFocused renders correctly 1`] = `
                       "height": 8,
                       "opacity": 1,
                       "position": "absolute",
-                      "right": -4,
-                      "top": -4,
+                      "right": -2,
+                      "top": -2,
                       "transform": [
                         {
                           "scale": 1,
@@ -1694,8 +1694,8 @@ exports[`useIsFocused renders correctly: xxxxxx 1`] = `
                       "height": 8,
                       "opacity": 1,
                       "position": "absolute",
-                      "right": -4,
-                      "top": -4,
+                      "right": -2,
+                      "top": -2,
                       "transform": [
                         {
                           "scale": 1,

package/src/components/TextInput/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1185,7 +1185,7 @@ exports[`TextInput disabled renders correctly 1`] = `
               },
             ]
           }
-          testID="text-input"
+          testID="text-input-disabled-text-input"
           themeVariant="text"
           value="100"
         />
@@ -2320,7 +2320,7 @@ exports[`TextInput idle renders correctly 1`] = `
               },
             ]
           }
-          testID="text-input"
+          testID="text-input-idle-text-input"
           themeVariant="text"
         />
       </View>

package/src/components/TextInput/__tests__/index.spec.tsx

@@ -54,7 +54,9 @@ describe('TextInput', () => {
       expect(toJSON()).toMatchSnapshot();
       expect(getByTestId('idle-text-input')).toBeTruthy();
       expect(
-        within(getByTestId('idle-text-input')).queryAllByTestId('text-input')
+        within(getByTestId('idle-text-input')).queryAllByTestId(
+          'text-input-idle-text-input'
+        )
       ).toHaveLength(1);
       expect(
         within(getByTestId('idle-text-input')).queryAllByText('Amount (AUD)')
@@ -69,7 +71,9 @@ describe('TextInput', () => {
         within(getByTestId('idle-text-input')).queryAllByTestId('input-suffix')
       ).toHaveLength(1);
 
-      expect(getByTestId('text-input').props.placeholder).toBe(' ');
+      expect(getByTestId('text-input-idle-text-input').props.placeholder).toBe(
+        ' '
+      );
     });
 
     it('should not render input-label if label is empty', () => {
@@ -104,7 +108,7 @@ describe('TextInput', () => {
       );
 
       const testInput = within(getByTestId('idle-text-input')).getByTestId(
-        'text-input'
+        'text-input-idle-text-input'
       );
 
       fireEvent.changeText(testInput, 'Thong Quach');
@@ -305,13 +309,18 @@ describe('TextInput', () => {
       expect(toJSON()).toMatchSnapshot();
       expect(queryAllByText('Amount (AUD)')).toHaveLength(1);
       expect(queryAllByTestId('input-label')).toHaveLength(1);
-      expect(queryAllByTestId('text-input')).toHaveLength(1);
+      expect(queryAllByTestId('text-input-disabled-text-input')).toHaveLength(
+        1
+      );
       expect(getByTestId('disabled-text-input')).toHaveProp(
         'pointerEvents',
         'none'
       );
 
-      expect(getByTestId('text-input')).not.toHaveProp('multiline', 'true');
+      expect(getByTestId('text-input-disabled-text-input')).not.toHaveProp(
+        'multiline',
+        'true'
+      );
     });
   });
 
@@ -560,7 +569,7 @@ describe('renderInput', () => {
         {renderInput({
           variant: 'textarea',
           nativeInputProps: {
-            testID: 'text-input',
+            testID: 'text-input-idle-text-input',
             value: 'text input value',
           },
           theme,
@@ -568,7 +577,9 @@ describe('renderInput', () => {
       </>
     );
 
-    expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);
+    expect(wrapper.queryAllByTestId('text-input-idle-text-input')).toHaveLength(
+      1
+    );
     expect(wrapper.queryAllByDisplayValue('text input value')).toHaveLength(1);
   });
 });

package/src/components/TextInput/index.tsx

@@ -397,6 +397,8 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       };
     }, [style, theme]);
 
+    const nativeInputTestIDSuffix = testID ? `-${testID}` : '';
+
     const nativeInputProps: NativeTextInputProps = {
       style: StyleSheet.flatten([
         {
@@ -405,7 +407,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
         },
         textStyleWithoutBorderStyle,
       ]),
-      testID: 'text-input',
+      testID: `text-input${nativeInputTestIDSuffix}`,
       accessibilityState: {
         disabled: state === 'disabled' || state === 'readonly',
       },

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -157,7 +157,7 @@ exports[`theme returns correct theme object 1`] = `
         "warning": "#ac5d00",
       },
       "fontSizes": {
-        "count": 8,
+        "count": 6,
         "icon": {
           "medium": 12,
           "small": 8,
@@ -170,7 +170,7 @@ exports[`theme returns correct theme object 1`] = `
         "small": "BeVietnamPro-SemiBold",
       },
       "lineHeights": {
-        "count": 18,
+        "count": 12,
         "medium": 16,
         "small": 10,
       },
@@ -179,8 +179,8 @@ exports[`theme returns correct theme object 1`] = `
       },
       "sizes": {
         "count": {
-          "height": 16,
-          "width": 16,
+          "height": 12,
+          "width": 12,
         },
         "medium": {
           "height": 24,
@@ -201,8 +201,8 @@ exports[`theme returns correct theme object 1`] = `
         "small": {
           "horizontalPadding": 4,
         },
-        "statusPositionRight": -4,
-        "statusPositionTop": -4,
+        "statusPositionRight": -2,
+        "statusPositionTop": -2,
       },
     },
     "bottomNavigation": {

package/src/theme/components/badge.ts

@@ -26,15 +26,15 @@ const getBadgeTheme = (theme: GlobalTheme) => {
       medium: theme.fontSizes.small,
       small: 8,
     },
-    count: 8,
+    count: 6,
   };
 
   const lineHeights = {
     medium: theme.lineHeights.small,
     small: 10,
     count: Platform.select({
-      android: 14, // vertical alignment
-      default: 18,
+      android: 11, // vertical alignment
+      default: 12,
     }),
   };
 
@@ -54,8 +54,8 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     statusHeight: theme.sizes.small,
     statusWidth: theme.sizes.small,
     count: {
-      width: theme.sizes.medium,
-      height: theme.sizes.medium,
+      width: theme.sizes.smallMedium,
+      height: theme.sizes.smallMedium,
     },
   };
 
@@ -70,8 +70,8 @@ const getBadgeTheme = (theme: GlobalTheme) => {
     small: {
       horizontalPadding: theme.space.xsmall,
     },
-    statusPositionTop: -theme.space.xsmall,
-    statusPositionRight: -theme.space.xsmall,
+    statusPositionTop: -theme.space.xxsmall,
+    statusPositionRight: -theme.space.xxsmall,
     countPaddingHorizontal: theme.space.xxsmall,
   };