@hero-design/rn 8.103.5 → 8.103.6

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-(node:3289) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
+(node:3296) 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...
@@ -11,13 +11,13 @@ node_modules/d3-selection/src/selection/index.js -> node_modules/d3-selection/sr
 (!) [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";
+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 15.3s
+created lib/index.js, es/index.js in 1m 9.6s
 
 /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 18.8s

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @hero-design/rn
 
+## 8.103.6
+
+### Patch Changes
+
+- [#4075](https://github.com/Thinkei/hero-design/pull/4075) [`3bd134bd08699566d3c25ad157b7ca68f5debc47`](https://github.com/Thinkei/hero-design/commit/3bd134bd08699566d3c25ad157b7ca68f5debc47) Thanks [@ttkien](https://github.com/ttkien)! - [TextInput] fix layout issue on Android: The height of TextInput is incorrectly increased when the text is long
+
+- [#4071](https://github.com/Thinkei/hero-design/pull/4071) [`a045cd45b79141f02b6570907033fa3f037b5862`](https://github.com/Thinkei/hero-design/commit/a045cd45b79141f02b6570907033fa3f037b5862) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [Select] Add internal zIndex for group style
+
+- [#4077](https://github.com/Thinkei/hero-design/pull/4077) [`fa025fbffdf997d83f77919b78eae2520ddb6e2e`](https://github.com/Thinkei/hero-design/commit/fa025fbffdf997d83f77919b78eae2520ddb6e2e) Thanks [@ttkien](https://github.com/ttkien)! - [RichTextEditor] Fix issue that WebView automatiically reset when height is changed on Android
+
 ## 8.103.5
 
 ### Patch Changes

package/es/index.js

@@ -19987,9 +19987,13 @@ var renderInput$1 = function renderInput(_ref3) {
     renderInputValue = _ref3.renderInputValue,
     ref = _ref3.ref,
     theme = _ref3.theme;
+  var multiline = variant === 'textarea' || nativeInputProps.multiline;
+  // `numberOfLines` must be `1` for single-line inputs to render properly on Android.
+  var numberOfLines = multiline ? nativeInputProps.numberOfLines : 1;
   return renderInputValue ? renderInputValue(nativeInputProps, ref) : /*#__PURE__*/React__default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
-    multiline: variant === 'textarea' || nativeInputProps.multiline,
+    multiline: multiline,
+    numberOfLines: numberOfLines,
     ref: ref,
     placeholderTextColor: theme.__hd__.textInput.colors.placeholder
   }));
@@ -24919,6 +24923,22 @@ var StyledSectionList = index$b(SectionList)(function (_ref4) {
     paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
   };
 });
+var getZIndexByState = function getZIndexByState(_ref5) {
+  var themeHasError = _ref5.themeHasError;
+  if (themeHasError) {
+    return 1;
+  }
+  return 0;
+};
+var StyledTouchableOpacity = index$b(TouchableOpacity)(function (_ref6) {
+  var themeGroupStyleEnabled = _ref6.themeGroupStyleEnabled,
+    themeHasError = _ref6.themeHasError;
+  return _objectSpread2({}, themeGroupStyleEnabled && {
+    zIndex: getZIndexByState({
+      themeHasError: themeHasError
+    })
+  });
+});
 
 var _excluded$g = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
@@ -25057,7 +25077,7 @@ var OptionList$1 = function OptionList(_ref) {
   }, rest));
 };
 
-var _excluded$e = ["footerLabel", "label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig"];
+var _excluded$e = ["footerLabel", "label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
 function MultiSelect(_ref) {
   var footerLabel = _ref.footerLabel,
     label = _ref.label,
@@ -25085,6 +25105,8 @@ function MultiSelect(_ref) {
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
     bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable,
     rest = _objectWithoutProperties(_ref, _excluded$e);
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
@@ -25109,15 +25131,19 @@ function MultiSelect(_ref) {
   var bottomSheetVariant = bottomSheetConfig.variant,
     bottomSheetHeader = bottomSheetConfig.header;
   var TextInputComponent = rest.TextInputComponent || TextInput;
+  var onPress = useCallback(function () {
+    setOpen(true);
+  }, []);
   useEffect(function () {
     setSelectingValue(value);
   }, [open, value]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    }
+  }, /*#__PURE__*/React__default.createElement(StyledTouchableOpacity, {
+    onPress: onPress,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "multi-select-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none"
   }, /*#__PURE__*/React__default.createElement(TextInputComponent, _extends$1({}, inputProps, {
@@ -25268,7 +25294,7 @@ var OptionList = function OptionList(_ref) {
   }, rest));
 };
 
-var _excluded$c = ["label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig"];
+var _excluded$c = ["label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
 var SingleSelect = function SingleSelect(_ref) {
   var _flatOptions$find;
   var label = _ref.label,
@@ -25296,6 +25322,8 @@ var SingleSelect = function SingleSelect(_ref) {
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
     bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable,
     rest = _objectWithoutProperties(_ref, _excluded$c);
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
@@ -25314,12 +25342,16 @@ var SingleSelect = function SingleSelect(_ref) {
   var bottomSheetVariant = bottomSheetConfig.variant,
     bottomSheetHeader = bottomSheetConfig.header;
   var TextInputComponent = rest.TextInputComponent || TextInput;
+  var onPress = useCallback(function () {
+    setOpen(true);
+  }, []);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__default.createElement(TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    }
+  }, /*#__PURE__*/React__default.createElement(StyledTouchableOpacity, {
+    onPress: onPress,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "single-select-touchable-opacity"
   }, /*#__PURE__*/React__default.createElement(View, {
     pointerEvents: "none"
   }, /*#__PURE__*/React__default.createElement(TextInputComponent, _extends$1({}, inputProps, {
@@ -45942,10 +45974,8 @@ index$b(View)(function (_ref) {
   };
 });
 var StyledWebView = index$b(WebView)(function (_ref2) {
-  var height = _ref2.height,
-    theme = _ref2.theme;
+  var theme = _ref2.theme;
   return {
-    height: height,
     minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
     backgroundColor: 'transparent',
     textAlignVertical: 'center',
@@ -46198,7 +46228,12 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, /*#__PURE__*/React__default.createElement(StyledBorderBackDrop, {
     themeState: state,
     themeFocused: isFocused
-  }), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, null, /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
+  }), /*#__PURE__*/React__default.createElement(StyledTextInputAndLabelContainer, {
+    style: {
+      height: webviewHeight
+    },
+    testID: "webViewWrapper"
+  }, /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
     onPress: function onPress(e) {
       return e.stopPropagation();
     }
@@ -46213,8 +46248,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     onMessage: onMessage,
     scrollEnabled: false,
     hideKeyboardAccessoryView: true,
-    keyboardDisplayRequiresUserAction: false,
-    height: webviewHeight
+    keyboardDisplayRequiresUserAction: false
   })))), /*#__PURE__*/React__default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__default.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__default.createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",

package/lib/index.js

@@ -20016,9 +20016,13 @@ var renderInput$1 = function renderInput(_ref3) {
     renderInputValue = _ref3.renderInputValue,
     ref = _ref3.ref,
     theme = _ref3.theme;
+  var multiline = variant === 'textarea' || nativeInputProps.multiline;
+  // `numberOfLines` must be `1` for single-line inputs to render properly on Android.
+  var numberOfLines = multiline ? nativeInputProps.numberOfLines : 1;
   return renderInputValue ? renderInputValue(nativeInputProps, ref) : /*#__PURE__*/React__namespace.default.createElement(StyledTextInput, _extends$1({}, nativeInputProps, {
     themeVariant: variant,
-    multiline: variant === 'textarea' || nativeInputProps.multiline,
+    multiline: multiline,
+    numberOfLines: numberOfLines,
     ref: ref,
     placeholderTextColor: theme.__hd__.textInput.colors.placeholder
   }));
@@ -24948,6 +24952,22 @@ var StyledSectionList = index$b(reactNative.SectionList)(function (_ref4) {
     paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
   };
 });
+var getZIndexByState = function getZIndexByState(_ref5) {
+  var themeHasError = _ref5.themeHasError;
+  if (themeHasError) {
+    return 1;
+  }
+  return 0;
+};
+var StyledTouchableOpacity = index$b(reactNative.TouchableOpacity)(function (_ref6) {
+  var themeGroupStyleEnabled = _ref6.themeGroupStyleEnabled,
+    themeHasError = _ref6.themeHasError;
+  return _objectSpread2({}, themeGroupStyleEnabled && {
+    zIndex: getZIndexByState({
+      themeHasError: themeHasError
+    })
+  });
+});
 
 var _excluded$g = ["keyExtractor", "loading", "onEndReached", "onQueryChange", "sections", "renderItem", "sectionListRef"];
 var BaseOptionList = function BaseOptionList(_ref) {
@@ -25086,7 +25106,7 @@ var OptionList$1 = function OptionList(_ref) {
   }, rest));
 };
 
-var _excluded$e = ["footerLabel", "label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig"];
+var _excluded$e = ["footerLabel", "label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
 function MultiSelect(_ref) {
   var footerLabel = _ref.footerLabel,
     label = _ref.label,
@@ -25114,6 +25134,8 @@ function MultiSelect(_ref) {
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
     bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable,
     rest = _objectWithoutProperties(_ref, _excluded$e);
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
@@ -25138,15 +25160,19 @@ function MultiSelect(_ref) {
   var bottomSheetVariant = bottomSheetConfig.variant,
     bottomSheetHeader = bottomSheetConfig.header;
   var TextInputComponent = rest.TextInputComponent || TextInput;
+  var onPress = React.useCallback(function () {
+    setOpen(true);
+  }, []);
   React.useEffect(function () {
     setSelectingValue(value);
   }, [open, value]);
   return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    }
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity, {
+    onPress: onPress,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "multi-select-touchable-opacity"
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none"
   }, /*#__PURE__*/React__namespace.default.createElement(TextInputComponent, _extends$1({}, inputProps, {
@@ -25297,7 +25323,7 @@ var OptionList = function OptionList(_ref) {
   }, rest));
 };
 
-var _excluded$c = ["label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig"];
+var _excluded$c = ["label", "loading", "inputProps", "onConfirm", "onDismiss", "onEndReached", "onQueryChange", "options", "renderOption", "renderSelectedValue", "query", "error", "editable", "disabled", "required", "style", "testID", "value", "supportedOrientations", "bottomSheetConfig", "groupStyleEnabled"];
 var SingleSelect = function SingleSelect(_ref) {
   var _flatOptions$find;
   var label = _ref.label,
@@ -25325,6 +25351,8 @@ var SingleSelect = function SingleSelect(_ref) {
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
     _ref$bottomSheetConfi = _ref.bottomSheetConfig,
     bottomSheetConfig = _ref$bottomSheetConfi === void 0 ? {} : _ref$bottomSheetConfi,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable,
     rest = _objectWithoutProperties(_ref, _excluded$c);
   var _useKeyboard = useKeyboard(),
     isKeyboardVisible = _useKeyboard.isKeyboardVisible,
@@ -25343,12 +25371,16 @@ var SingleSelect = function SingleSelect(_ref) {
   var bottomSheetVariant = bottomSheetConfig.variant,
     bottomSheetHeader = bottomSheetConfig.header;
   var TextInputComponent = rest.TextInputComponent || TextInput;
+  var onPress = React.useCallback(function () {
+    setOpen(true);
+  }, []);
   return /*#__PURE__*/React__namespace.default.createElement(React__namespace.default.Fragment, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: !editable || disabled || inputProps !== null && inputProps !== void 0 && inputProps.loading ? 'none' : 'auto'
-  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    }
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity, {
+    onPress: onPress,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "single-select-touchable-opacity"
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none"
   }, /*#__PURE__*/React__namespace.default.createElement(TextInputComponent, _extends$1({}, inputProps, {
@@ -45971,10 +46003,8 @@ index$b(reactNative.View)(function (_ref) {
   };
 });
 var StyledWebView = index$b(reactNativeWebview.WebView)(function (_ref2) {
-  var height = _ref2.height,
-    theme = _ref2.theme;
+  var theme = _ref2.theme;
   return {
-    height: height,
     minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
     backgroundColor: 'transparent',
     textAlignVertical: 'center',
@@ -46227,7 +46257,12 @@ var RichTextEditor = function RichTextEditor(_ref) {
   }, /*#__PURE__*/React__namespace.default.createElement(StyledBorderBackDrop, {
     themeState: state,
     themeFocused: isFocused
-  }), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, null, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
+  }), /*#__PURE__*/React__namespace.default.createElement(StyledTextInputAndLabelContainer, {
+    style: {
+      height: webviewHeight
+    },
+    testID: "webViewWrapper"
+  }, /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
     onPress: function onPress(e) {
       return e.stopPropagation();
     }
@@ -46242,8 +46277,7 @@ var RichTextEditor = function RichTextEditor(_ref) {
     onMessage: onMessage,
     scrollEnabled: false,
     hideKeyboardAccessoryView: true,
-    keyboardDisplayRequiresUserAction: false,
-    height: webviewHeight
+    keyboardDisplayRequiresUserAction: false
   })))), /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndHelpTextContainer, null, /*#__PURE__*/React__namespace.default.createElement(StyledErrorAndMaxLengthContainer, null, error ? /*#__PURE__*/React__namespace.default.createElement(StyledErrorContainer$2, null, /*#__PURE__*/React__namespace.default.createElement(Icon, {
     testID: "input-error-icon",
     icon: "circle-info",

package/package.json

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

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

@@ -190,6 +190,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -476,6 +477,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -762,6 +764,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerAndroid.spec.tsx.snap

@@ -190,6 +190,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerCalendar.spec.tsx.snap

@@ -190,6 +190,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -190,6 +190,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -859,6 +860,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -408,7 +408,12 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
       <StyledTextInputContainer onLayout={onLayout}>
         <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
 
-        <StyledTextInputAndLabelContainer>
+        <StyledTextInputAndLabelContainer
+          style={{
+            height: webviewHeight,
+          }}
+          testID="webViewWrapper"
+        >
           <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
             <StyledWebView
               ref={webview}
@@ -420,7 +425,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               scrollEnabled={false}
               hideKeyboardAccessoryView
               keyboardDisplayRequiresUserAction={false}
-              height={webviewHeight}
             />
           </TouchableWithoutFeedback>
         </StyledTextInputAndLabelContainer>

package/src/components/RichTextEditor/StyledRichTextEditor.ts

@@ -6,10 +6,7 @@ export const StyledWrapper = styled(View)(({ theme }) => ({
   marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
 }));
 
-export const StyledWebView = styled(WebView)<{
-  height: number | undefined;
-}>(({ height, theme }) => ({
-  height,
+export const StyledWebView = styled(WebView)(({ theme }) => ({
   minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
   backgroundColor: 'transparent',
   textAlignVertical: 'center',

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

@@ -58,7 +58,7 @@ jest.mock('../utils/rnWebView', () => {
 /* eslint-disable */
 /// @ts-ignore
 import { postMessageMock } from '../utils/rnWebView';
-import { RichTextEditorRef } from "../../../../types";
+import { RichTextEditorRef } from '../../../../types';
 /* eslint-enable */
 
 describe('RichTextEditor', () => {
@@ -201,7 +201,9 @@ describe('RichTextEditor', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.getByTestId('webview')).toHaveStyle({ height: 480 });
+        expect(wrapper.getByTestId('webViewWrapper')).toHaveStyle({
+          height: 480,
+        });
       });
     });
   });

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

@@ -132,9 +132,12 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               "flexGrow": 2,
               "flexShrink": 1,
             },
-            undefined,
+            {
+              "height": 480,
+            },
           ]
         }
+        testID="webViewWrapper"
       >
         <WebView
           accessibilityState={
@@ -148,7 +151,6 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           }
           accessible={true}
           focusable={true}
-          height={480}
           hideKeyboardAccessoryView={true}
           keyboardDisplayRequiresUserAction={false}
           onClick={[Function]}
@@ -204,7 +206,6 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               {
                 "backgroundColor": "transparent",
                 "fontSize": 16,
-                "height": 480,
                 "marginHorizontal": 8,
                 "minHeight": 24,
                 "textAlignVertical": "center",
@@ -456,9 +457,12 @@ exports[`RichTextEditor should render correctly 1`] = `
               "flexGrow": 2,
               "flexShrink": 1,
             },
-            undefined,
+            {
+              "height": undefined,
+            },
           ]
         }
+        testID="webViewWrapper"
       >
         <WebView
           accessibilityState={
@@ -527,7 +531,6 @@ exports[`RichTextEditor should render correctly 1`] = `
               {
                 "backgroundColor": "transparent",
                 "fontSize": 16,
-                "height": undefined,
                 "marginHorizontal": 8,
                 "minHeight": 24,
                 "textAlignVertical": "center",

package/src/components/Select/MultiSelect/__tests__/__snapshots__/index.spec.tsx.snap

@@ -44,6 +44,7 @@ exports[`rendering allows custom renderer 1`] = `
           "opacity": 1,
         }
       }
+      testID="multi-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -1573,6 +1574,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
           "opacity": 1,
         }
       }
+      testID="multi-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -3288,6 +3290,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
           "opacity": 1,
         }
       }
+      testID="multi-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -3579,6 +3582,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
           "opacity": 1,
         }
       }
+      testID="multi-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -5308,6 +5312,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
           "opacity": 1,
         }
       }
+      testID="multi-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -5612,6 +5617,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
           "opacity": 1,
         }
       }
+      testID="multi-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -6929,6 +6935,7 @@ exports[`rendering renders correctly when receives sections 2`] = `
           "opacity": 1,
         }
       }
+      testID="multi-select-touchable-opacity"
     >
       <View
         pointerEvents="none"

package/src/components/Select/MultiSelect/__tests__/index.spec.tsx

@@ -362,6 +362,59 @@ describe('rendering', () => {
     expect(getByText('Monday')).toBeVisible();
     expect(getByText('Tuesday')).toBeVisible();
   });
+
+  it('renders correctly when groupStyleEnabled is true and no error', () => {
+    const { getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        onConfirm={jest.fn()}
+        groupStyleEnabled
+      />
+    );
+
+    const touchableOpacity = getByTestId('multi-select-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 0);
+  });
+
+  it('renders correctly when groupStyleEnabled is true and has error', () => {
+    const { getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        onConfirm={jest.fn()}
+        groupStyleEnabled
+        error="This field is required"
+      />
+    );
+
+    const touchableOpacity = getByTestId('multi-select-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
+
+  it('renders correctly when groupStyleEnabled is false', () => {
+    const { getByTestId } = renderWithTheme(
+      <MultiSelect
+        label="Allow notifications"
+        footerLabel="Confirm"
+        options={options}
+        value={['mon', 'tue']}
+        onConfirm={jest.fn()}
+        groupStyleEnabled={false}
+        error="This field is required"
+      />
+    );
+
+    const touchableOpacity = getByTestId('multi-select-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).not.toHaveProperty('zIndex');
+  });
 });
 
 describe('behavior', () => {