@hero-design/rn-work-uikit 1.5.0 → 1.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @hero-design/rn-work-uikit
 
+## 1.6.0
+
+### Minor Changes
+
+- [#4080](https://github.com/Thinkei/hero-design/pull/4080) [`920325f82fa122dee579f6b5c86fbea1f5207416`](https://github.com/Thinkei/hero-design/commit/920325f82fa122dee579f6b5c86fbea1f5207416) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [FormGroup] Support DatePicker and TimePicker components
+
+- [#4082](https://github.com/Thinkei/hero-design/pull/4082) [`c42078b416b885383f6faf51180f302f74181268`](https://github.com/Thinkei/hero-design/commit/c42078b416b885383f6faf51180f302f74181268) Thanks [@vinhphan-eh](https://github.com/vinhphan-eh)! - [FormGroup][richtexteditor] Support group style for RichTextEditor
+
+### Patch Changes
+
+- Updated dependencies [[`920325f82fa122dee579f6b5c86fbea1f5207416`](https://github.com/Thinkei/hero-design/commit/920325f82fa122dee579f6b5c86fbea1f5207416)]:
+  - @hero-design/rn@8.103.7
+
 ## 1.5.0
 
 ### Minor Changes

package/lib/index.js

@@ -10208,18 +10208,18 @@ var StyledSectionList = index$b(reactNative.SectionList)(function (_ref4) {
     paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
   };
 });
-var getZIndexByState$1 = function getZIndexByState(_ref5) {
+var getZIndexByState$3 = function getZIndexByState(_ref5) {
   var themeHasError = _ref5.themeHasError;
   if (themeHasError) {
     return 1;
   }
   return 0;
 };
-var StyledTouchableOpacity = index$b(reactNative.TouchableOpacity)(function (_ref6) {
+var StyledTouchableOpacity$2 = index$b(reactNative.TouchableOpacity)(function (_ref6) {
   var themeGroupStyleEnabled = _ref6.themeGroupStyleEnabled,
     themeHasError = _ref6.themeHasError;
   return _objectSpread2({}, themeGroupStyleEnabled && {
-    zIndex: getZIndexByState$1({
+    zIndex: getZIndexByState$3({
       themeHasError: themeHasError
     })
   });
@@ -10806,7 +10806,7 @@ function MultiSelect$1(_ref) {
   }, [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(StyledTouchableOpacity, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity$2, {
     onPress: onPress,
     themeGroupStyleEnabled: groupStyleEnabled,
     themeHasError: !!error,
@@ -11017,7 +11017,7 @@ var SingleSelect$1 = function SingleSelect(_ref) {
   }, []);
   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(StyledTouchableOpacity, {
+  }, /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity$2, {
     onPress: onPress,
     themeGroupStyleEnabled: groupStyleEnabled,
     themeHasError: !!error,
@@ -13442,6 +13442,30 @@ var useFormatDate = function useFormatDate(_ref) {
   };
 };
 
+var StyledPickerWrapper$1 = index$b(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.datePicker.sizes.height,
+    alignItems: 'center'
+  };
+});
+var getZIndexByState$2 = function getZIndexByState(_ref2) {
+  var themeHasError = _ref2.themeHasError;
+  if (themeHasError) {
+    return 1;
+  }
+  return 0;
+};
+var StyledTouchableOpacity$1 = index$b(reactNative.TouchableOpacity)(function (_ref3) {
+  var themeGroupStyleEnabled = _ref3.themeGroupStyleEnabled,
+    themeHasError = _ref3.themeHasError;
+  return _objectSpread2({}, themeGroupStyleEnabled && {
+    zIndex: getZIndexByState$2({
+      themeHasError: themeHasError
+    })
+  });
+});
+
 var DatePickerAndroid = function DatePickerAndroid(_ref) {
   var value = _ref.value,
     minDate = _ref.minDate,
@@ -13461,7 +13485,10 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     renderSelectedValue = _ref.renderSelectedValue,
     locale = _ref.locale,
-    TextInputComponent = _ref.TextInputComponent;
+    TextInputComponent = _ref.TextInputComponent,
+    inputProps = _ref.inputProps,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -13480,15 +13507,19 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput$2;
-  return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = React.useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity$1, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "date-picker-android-touchable-opacity"
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputAndroid"
-  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -13505,7 +13536,7 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
         formattedDateString: displayValue
       }, props);
     } : undefined
-  })), /*#__PURE__*/React__namespace.default.createElement(AndroidDatePickerDialog, {
+  }))), /*#__PURE__*/React__namespace.default.createElement(AndroidDatePickerDialog, {
     open: open,
     onClose: function onClose() {
       return setOpen(false);
@@ -14295,7 +14326,10 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     supportedOrientations = _ref2$supportedOrient === void 0 ? ['portrait'] : _ref2$supportedOrient,
     renderSelectedValue = _ref2.renderSelectedValue,
     locale = _ref2.locale,
-    TextInputComponent = _ref2.TextInputComponent;
+    TextInputComponent = _ref2.TextInputComponent,
+    inputProps = _ref2.inputProps,
+    _ref2$groupStyleEnabl = _ref2.groupStyleEnabled,
+    groupStyleEnabled = _ref2$groupStyleEnabl === void 0 ? false : _ref2$groupStyleEnabl;
   var _useState5 = React.useState(false),
     _useState6 = _slicedToArray(_useState5, 2),
     open = _useState6[0],
@@ -14322,15 +14356,19 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput$2;
-  return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = React.useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity$1, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "date-picker-calendar-touchable-opacity"
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerCalendar"
-  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -14347,7 +14385,7 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
         formattedDateString: displayValue
       }, props);
     } : undefined
-  })), /*#__PURE__*/React__namespace.default.createElement(BottomSheet$1, {
+  }))), /*#__PURE__*/React__namespace.default.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -14377,14 +14415,6 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
   }))));
 };
 
-var StyledPickerWrapper$1 = index$b(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    height: theme.__hd__.datePicker.sizes.height,
-    alignItems: 'center'
-  };
-});
-
 var IOSDatePickerDialog = function IOSDatePickerDialog(_ref) {
   var label = _ref.label,
     open = _ref.open,
@@ -14478,7 +14508,10 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     variant = _ref$variant === void 0 ? 'default' : _ref$variant,
     locale = _ref.locale,
     renderSelectedValue = _ref.renderSelectedValue,
-    TextInputComponent = _ref.TextInputComponent;
+    TextInputComponent = _ref.TextInputComponent,
+    inputProps = _ref.inputProps,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -14499,15 +14532,19 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput$2;
-  return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = React.useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity$1, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "date-picker-ios-touchable-opacity"
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "datePickerInputIOS"
-  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: "calendar-dates-outlined",
@@ -14524,7 +14561,7 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
         formattedDateString: displayValue
       }, props);
     } : undefined
-  })), /*#__PURE__*/React__namespace.default.createElement(IOSDatePickerDialog, {
+  }))), /*#__PURE__*/React__namespace.default.createElement(IOSDatePickerDialog, {
     value: value,
     onChange: onChange,
     open: open,
@@ -14578,6 +14615,30 @@ var InternalDatePicker$1 = Object.assign(InternalDatePicker, {
   Dialog: Dialog
 });
 
+var StyledPickerWrapper = index$b(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.timePicker.sizes.height,
+    alignItems: 'center'
+  };
+});
+var getZIndexByState$1 = function getZIndexByState(_ref2) {
+  var themeHasError = _ref2.themeHasError;
+  if (themeHasError) {
+    return 1;
+  }
+  return 0;
+};
+var StyledTouchableOpacity = index$b(reactNative.TouchableOpacity)(function (_ref3) {
+  var themeGroupStyleEnabled = _ref3.themeGroupStyleEnabled,
+    themeHasError = _ref3.themeHasError;
+  return _objectSpread2({}, themeGroupStyleEnabled && {
+    zIndex: getZIndexByState$1({
+      themeHasError: themeHasError
+    })
+  });
+});
+
 var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -14594,7 +14655,10 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
     testID = _ref.testID,
     _ref$showSuffix = _ref.showSuffix,
     showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
-    TextInputComponent = _ref.TextInputComponent;
+    TextInputComponent = _ref.TextInputComponent,
+    inputProps = _ref.inputProps,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var _useState = React.useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
@@ -14603,15 +14667,19 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var pickerInitValue = value || new Date();
   var InputComponent = TextInputComponent || TextInput$2;
-  return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = React.useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "time-picker-android-touchable-opacity"
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputAndroid"
-  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14622,7 +14690,7 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
     helpText: helpText,
     style: style,
     testID: testID
-  })), open ? /*#__PURE__*/React__namespace.default.createElement(DateTimePicker__default.default, {
+  }))), open ? /*#__PURE__*/React__namespace.default.createElement(DateTimePicker__default.default, {
     testID: "timePickerAndroid",
     mode: "time",
     value: pickerInitValue,
@@ -14637,14 +14705,6 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   }) : null);
 };
 
-var StyledPickerWrapper = index$b(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    height: theme.__hd__.timePicker.sizes.height,
-    alignItems: 'center'
-  };
-});
-
 var TimePickerIOS = function TimePickerIOS(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -14664,7 +14724,10 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     showSuffix = _ref$showSuffix === void 0 ? true : _ref$showSuffix,
     _ref$supportedOrienta = _ref.supportedOrientations,
     supportedOrientations = _ref$supportedOrienta === void 0 ? ['portrait'] : _ref$supportedOrienta,
-    TextInputComponent = _ref.TextInputComponent;
+    TextInputComponent = _ref.TextInputComponent,
+    inputProps = _ref.inputProps,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var _useState = React.useState(value || new Date()),
     _useState2 = _slicedToArray(_useState, 2),
     selectingDate = _useState2[0],
@@ -14680,15 +14743,19 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
   React.useEffect(function () {
     setSelectingDate(value || new Date());
   }, [value]);
-  return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableOpacity, {
-    onPress: function onPress() {
-      return setOpen(true);
-    },
-    disabled: disabled
+  var onPress = React.useCallback(function () {
+    setOpen(true);
+  }, []);
+  return /*#__PURE__*/React__namespace.default.createElement(StyledTouchableOpacity, {
+    onPress: onPress,
+    disabled: disabled,
+    themeGroupStyleEnabled: groupStyleEnabled,
+    themeHasError: !!error,
+    testID: "time-picker-ios-touchable-opacity"
   }, /*#__PURE__*/React__namespace.default.createElement(reactNative.View, {
     pointerEvents: "none",
     testID: "timePickerInputIOS"
-  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, {
+  }, /*#__PURE__*/React__namespace.default.createElement(InputComponent, _extends$1({}, inputProps, {
     label: label,
     value: displayValue,
     suffix: showSuffix ? 'clock-3' : undefined,
@@ -14699,7 +14766,7 @@ var TimePickerIOS = function TimePickerIOS(_ref) {
     helpText: helpText,
     testID: testID,
     style: style
-  })), /*#__PURE__*/React__namespace.default.createElement(BottomSheet$1, {
+  }))), /*#__PURE__*/React__namespace.default.createElement(BottomSheet$1, {
     open: open,
     onRequestClose: function onRequestClose() {
       return setOpen(false);
@@ -66685,10 +66752,11 @@ var postMessage = function postMessage(element, message) {
 };
 
 var StyledWrapper = index$b(reactNative.View)(function (_ref) {
-  var theme = _ref.theme;
-  return {
+  var theme = _ref.theme,
+    groupStyleEnabled = _ref.groupStyleEnabled;
+  return _objectSpread2({}, groupStyleEnabled ? {} : {
     marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom
-  };
+  });
 });
 var StyledWebView = index$b(reactNativeWebview.WebView)(function (_ref2) {
   var theme = _ref2.theme;
@@ -66900,17 +66968,22 @@ var RichTextEditor = function RichTextEditor(_ref) {
     error = _ref$error === void 0 ? '' : _ref$error,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
+    textStyle = _ref.textStyle,
     label = _ref.label,
     helpText = _ref.helpText,
     required = _ref.required,
     testID = _ref.testID,
     forwardedRef = _ref.forwardedRef,
     _ref$value = _ref.value,
-    value = _ref$value === void 0 ? defaultValue : _ref$value;
+    value = _ref$value === void 0 ? defaultValue : _ref$value,
+    _ref$groupStyleEnable = _ref.groupStyleEnabled,
+    groupStyleEnabled = _ref$groupStyleEnable === void 0 ? false : _ref$groupStyleEnable;
   var plain = React.useMemo(function () {
     return libExports.plainSerializer(value);
   }, [value]);
-  return /*#__PURE__*/React__namespace.default.createElement(StyledWrapper, null, /*#__PURE__*/React__namespace.default.createElement(TextInput$1, {
+  return /*#__PURE__*/React__namespace.default.createElement(StyledWrapper, {
+    groupStyleEnabled: groupStyleEnabled
+  }, /*#__PURE__*/React__namespace.default.createElement(InternalTextInput, {
     autoFocus: autoFocus,
     error: error,
     label: label,
@@ -66919,7 +66992,9 @@ var RichTextEditor = function RichTextEditor(_ref) {
     placeholder: placeholder,
     value: plain,
     style: style,
+    textStyle: textStyle,
     helpText: helpText,
+    groupStyleEnabled: groupStyleEnabled,
     renderInputValue: function renderInputValue(inputProps, ref) {
       return /*#__PURE__*/React__namespace.default.createElement(RichTextEditorInput, _extends$1({}, inputProps, {
         ref: ref,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.103.6",
+    "@hero-design/rn": "^8.103.7",
     "hero-editor": "^1.15.5"
   },
   "peerDependencies": {

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

@@ -4,6 +4,17 @@ exports[`DatePicker renders correctly (snapshot) 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-ios-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"
@@ -643,6 +654,17 @@ exports[`Dialog renders DatePickerAndroid when OS is android 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-android-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"
@@ -966,6 +988,17 @@ exports[`Dialog renders DatePickerIOS when OS is iOS 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-ios-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"

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

@@ -3,6 +3,9 @@ import { within } from '@testing-library/react-native';
 import theme from '../../../theme';
 import TextInput from '../../TextInput';
 import Select from '../../Select';
+import DatePicker from '../../DatePicker';
+import TimePicker from '../../TimePicker';
+import RichTextEditor from '../../RichTextEditor';
 import FormGroup from '..';
 import renderWithTheme from '../../../../testUtils/renderWithTheme';
 import { noop } from '../../../utils/functions';
@@ -179,30 +182,63 @@ describe('FormGroup', () => {
     expect(borderKeys).toHaveLength(0);
   });
 
-  it('renders enhanced TextInput/Select components with correct styles', () => {
+  it('renders all component types (TextInput, Select, Select.Multi, DatePicker, TimePicker, RichTextEditor) with correct styles', () => {
     const { getByTestId } = renderWithTheme(
       <FormGroup>
         <TextInput
-          label="Enhanced Text Input"
-          value="Enhanced Text Input"
-          testID="enhanced-text-input"
+          label="Text Input"
+          value="Text Input"
+          testID="mixed-text-input"
+        />
+        <DatePicker
+          label="Date Picker"
+          value={new Date('1995-12-17T00:00:00.000Z')}
+          testID="mixed-date-picker"
+          onChange={noop}
+          confirmLabel="Confirm"
+        />
+        <TimePicker
+          label="Time Picker"
+          value={new Date('December 17, 1995 03:24:00')}
+          testID="mixed-time-picker"
+          onChange={noop}
+          confirmLabel="Confirm"
+        />
+        <RichTextEditor
+          label="Rich Text Editor"
+          value={[{ type: 'paragraph', children: [{ text: 'Content' }] }]}
+          onChange={noop}
+          name="mixed-rich-text-editor"
+          testID="mixed-rich-text-editor"
         />
         <Select
-          label="Enhanced Select"
+          label="Single Select"
           value="option1"
-          testID="enhanced-select"
+          testID="mixed-select"
+          onConfirm={noop}
+          options={[
+            { text: 'Option 1', value: 'option1' },
+            { text: 'Option 2', value: 'option2' },
+          ]}
+        />
+        <Select.Multi
+          label="Multi Select"
+          value={['option1', 'option2']}
+          testID="mixed-select-multi"
           onConfirm={noop}
+          footerLabel="Confirm"
           options={[
             { text: 'Option 1', value: 'option1' },
             { text: 'Option 2', value: 'option2' },
+            { text: 'Option 3', value: 'option3' },
           ]}
         />
       </FormGroup>
     );
 
-    // Enhanced TextInput should have correct border styling
+    // TextInput should have top border radius removed (first component)
     expect(
-      within(getByTestId('enhanced-text-input'))
+      within(getByTestId('mixed-text-input'))
         .getByTestId('text-input-border')
         .props.style.flat()
     ).toEqual(
@@ -214,64 +250,41 @@ describe('FormGroup', () => {
       ])
     );
 
-    // Enhanced Select should have correct border styling
+    // DatePicker should have no border radius (middle component)
     expect(
-      within(getByTestId('enhanced-select'))
+      within(getByTestId('mixed-date-picker'))
         .getByTestId('text-input-border')
         .props.style.flat()
     ).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
+          borderRadius: 0,
         }),
       ])
     );
-  });
 
-  it('renders mixed components (TextInput, Select, Select.Multi) with correct styles', () => {
-    const { getByTestId } = renderWithTheme(
-      <FormGroup>
-        <TextInput
-          label="Text Input"
-          value="Text Input"
-          testID="mixed-text-input"
-        />
-        <Select
-          label="Single Select"
-          value="option1"
-          testID="mixed-select"
-          onConfirm={noop}
-          options={[
-            { text: 'Option 1', value: 'option1' },
-            { text: 'Option 2', value: 'option2' },
-          ]}
-        />
-        <Select.Multi
-          label="Multi Select"
-          value={['option1', 'option2']}
-          testID="mixed-select-multi"
-          onConfirm={noop}
-          footerLabel="Confirm"
-          options={[
-            { text: 'Option 1', value: 'option1' },
-            { text: 'Option 2', value: 'option2' },
-            { text: 'Option 3', value: 'option3' },
-          ]}
-        />
-      </FormGroup>
+    // TimePicker should have no border radius (middle component)
+    expect(
+      within(getByTestId('mixed-time-picker'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
     );
 
-    // TextInput should have top border radius removed
+    // RichTextEditor should have no border radius (middle component)
     expect(
-      within(getByTestId('mixed-text-input'))
+      within(getByTestId('mixed-rich-text-editor'))
         .getByTestId('text-input-border')
         .props.style.flat()
     ).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
+          borderRadius: 0,
         }),
       ])
     );
@@ -289,7 +302,7 @@ describe('FormGroup', () => {
       ])
     );
 
-    // Select.Multi should have bottom border radius removed
+    // Select.Multi should have bottom border radius removed (last component)
     expect(
       within(getByTestId('mixed-select-multi'))
         .getByTestId('text-input-border')