@hero-design/rn 8.103.6 → 8.103.7

package/lib/index.js

@@ -20444,6 +20444,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$2 = 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,
@@ -20463,7 +20487,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],
@@ -20482,15 +20509,19 @@ var DatePickerAndroid = function DatePickerAndroid(_ref) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput;
-  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$2, {
+    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",
@@ -20507,7 +20538,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);
@@ -20586,7 +20617,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],
@@ -20613,15 +20647,19 @@ var DatePickerCalendar = function DatePickerCalendar(_ref2) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput;
-  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$2, {
+    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",
@@ -20638,7 +20676,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);
@@ -20668,14 +20706,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,
@@ -20769,7 +20799,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],
@@ -20790,15 +20823,19 @@ var DatePickerIOS = function DatePickerIOS(_ref) {
     value: value
   });
   var InputComponent = TextInputComponent || TextInput;
-  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$2, {
+    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",
@@ -20815,7 +20852,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,
@@ -24952,18 +24989,18 @@ var StyledSectionList = index$b(reactNative.SectionList)(function (_ref4) {
     paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding
   };
 });
-var getZIndexByState = function getZIndexByState(_ref5) {
+var getZIndexByState$1 = function getZIndexByState(_ref5) {
   var themeHasError = _ref5.themeHasError;
   if (themeHasError) {
     return 1;
   }
   return 0;
 };
-var StyledTouchableOpacity = index$b(reactNative.TouchableOpacity)(function (_ref6) {
+var StyledTouchableOpacity$1 = index$b(reactNative.TouchableOpacity)(function (_ref6) {
   var themeGroupStyleEnabled = _ref6.themeGroupStyleEnabled,
     themeHasError = _ref6.themeHasError;
   return _objectSpread2({}, themeGroupStyleEnabled && {
-    zIndex: getZIndexByState({
+    zIndex: getZIndexByState$1({
       themeHasError: themeHasError
     })
   });
@@ -25168,7 +25205,7 @@ function MultiSelect(_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$1, {
     onPress: onPress,
     themeGroupStyleEnabled: groupStyleEnabled,
     themeHasError: !!error,
@@ -25376,7 +25413,7 @@ var SingleSelect = 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$1, {
     onPress: onPress,
     themeGroupStyleEnabled: groupStyleEnabled,
     themeHasError: !!error,
@@ -26723,6 +26760,30 @@ var Tag = function Tag(_ref) {
   }, content) : content);
 };
 
+var StyledPickerWrapper = index$b(reactNative.View)(function (_ref) {
+  var theme = _ref.theme;
+  return {
+    height: theme.__hd__.timePicker.sizes.height,
+    alignItems: 'center'
+  };
+});
+var getZIndexByState = 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({
+      themeHasError: themeHasError
+    })
+  });
+});
+
 var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var value = _ref.value,
     label = _ref.label,
@@ -26739,7 +26800,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],
@@ -26748,15 +26812,19 @@ var TimePickerAndroid = function TimePickerAndroid(_ref) {
   var displayValue = value ? formatTime(displayFormat, value) : '';
   var pickerInitValue = value || new Date();
   var InputComponent = TextInputComponent || TextInput;
-  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,
@@ -26767,7 +26835,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,
@@ -26782,14 +26850,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,
@@ -26809,7 +26869,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],
@@ -26825,15 +26888,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,
@@ -26844,7 +26911,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);

package/package.json

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

package/src/components/DatePicker/DatePickerAndroid.tsx

@@ -1,10 +1,11 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { View } from 'react-native';
 
 import TextInput from '../TextInput';
 import AndroidDatePickerDialog from './Dialog/AndroidDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
+import { StyledTouchableOpacity } from './StyledDatePicker';
 import type { InternalDatePickerProps } from './types';
 
 type DatePickerAndroidProps = Omit<
@@ -31,6 +32,8 @@ const DatePickerAndroid = ({
   renderSelectedValue,
   locale,
   TextInputComponent,
+  inputProps,
+  groupStyleEnabled = false,
 }: DatePickerAndroidProps) => {
   const [open, setOpen] = useState(false);
 
@@ -44,10 +47,21 @@ const DatePickerAndroid = ({
 
   const InputComponent = TextInputComponent || TextInput;
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
-    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+    <StyledTouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      themeGroupStyleEnabled={groupStyleEnabled}
+      themeHasError={!!error}
+      testID="date-picker-android-touchable-opacity"
+    >
       <View pointerEvents="none" testID="datePickerInputAndroid">
         <InputComponent
+          {...inputProps}
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -81,7 +95,7 @@ const DatePickerAndroid = ({
         onChange={onChange}
         variant={variant}
       />
-    </TouchableOpacity>
+    </StyledTouchableOpacity>
   );
 };
 

package/src/components/DatePicker/DatePickerCalendar.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from 'react';
-import { Platform, ScrollView, TouchableOpacity, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { Platform, ScrollView, View } from 'react-native';
 
 import BottomSheet from '../BottomSheet';
 import Button from '../Button';
@@ -7,6 +7,7 @@ import Calendar, { CalendarProps } from '../Calendar';
 import TextInput from '../TextInput';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
+import { StyledTouchableOpacity } from './StyledDatePicker';
 import type { InternalDatePickerProps } from './types';
 
 const InternalCalendar = ({
@@ -81,6 +82,8 @@ const DatePickerCalendar = ({
   renderSelectedValue,
   locale,
   TextInputComponent,
+  inputProps,
+  groupStyleEnabled = false,
 }: Omit<InternalDatePickerProps, 'variant'>) => {
   const [open, setOpen] = useState(false);
   const [monthPickerVisible, setMonthPickerVisible] = useState(false);
@@ -98,10 +101,21 @@ const DatePickerCalendar = ({
 
   const InputComponent = TextInputComponent || TextInput;
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
-    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+    <StyledTouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      themeGroupStyleEnabled={groupStyleEnabled}
+      themeHasError={!!error}
+      testID="date-picker-calendar-touchable-opacity"
+    >
       <View pointerEvents="none" testID="datePickerCalendar">
         <InputComponent
+          {...inputProps}
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -158,7 +172,7 @@ const DatePickerCalendar = ({
           />
         </ScrollView>
       </BottomSheet>
-    </TouchableOpacity>
+    </StyledTouchableOpacity>
   );
 };
 

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { View } from 'react-native';
 
 import { useLocale } from '../LocaleProvider/hooks';
 import TextInput from '../TextInput';
 import IOSDatePickerDialog from './Dialog/IOSDialog';
 import useCalculateDate from './hooks/useCalculateDate';
 import useFormatDate from './hooks/useFormatDate';
+import { StyledTouchableOpacity } from './StyledDatePicker';
 import type { InternalDatePickerProps } from './types';
 
 type DatePickerIOSProps = Omit<
@@ -34,6 +35,8 @@ const DatePickerIOS = ({
   locale,
   renderSelectedValue,
   TextInputComponent,
+  inputProps,
+  groupStyleEnabled = false,
 }: DatePickerIOSProps) => {
   const [open, setOpen] = useState(false);
   const { lang: defaultLocale } = useLocale();
@@ -47,10 +50,21 @@ const DatePickerIOS = ({
 
   const InputComponent = TextInputComponent || TextInput;
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
-    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+    <StyledTouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      themeGroupStyleEnabled={groupStyleEnabled}
+      themeHasError={!!error}
+      testID="date-picker-ios-touchable-opacity"
+    >
       <View pointerEvents="none" testID="datePickerInputIOS">
         <InputComponent
+          {...inputProps}
           label={label}
           value={displayValue}
           suffix="calendar-dates-outlined"
@@ -88,7 +102,7 @@ const DatePickerIOS = ({
         minDate={minDate}
         maxDate={maxDate}
       />
-    </TouchableOpacity>
+    </StyledTouchableOpacity>
   );
 };
 

package/src/components/DatePicker/StyledDatePicker.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/native';
-import { View } from 'react-native';
+import { View, TouchableOpacity } from 'react-native';
 import type { ViewProps } from 'react-native';
 
 const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
@@ -7,4 +7,21 @@ const StyledPickerWrapper = styled(View)<ViewProps>(({ theme }) => ({
   alignItems: 'center',
 }));
 
-export { StyledPickerWrapper };
+const getZIndexByState = ({ themeHasError }: { themeHasError: boolean }) => {
+  if (themeHasError) {
+    return 1;
+  }
+
+  return 0;
+};
+
+const StyledTouchableOpacity = styled(TouchableOpacity)<{
+  themeGroupStyleEnabled: boolean;
+  themeHasError: boolean;
+}>(({ themeGroupStyleEnabled, themeHasError }) => ({
+  ...(themeGroupStyleEnabled && {
+    zIndex: getZIndexByState({ themeHasError }),
+  }),
+}));
+
+export { StyledPickerWrapper, StyledTouchableOpacity };

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Platform } from 'react-native';
 import { fireEvent } from '@testing-library/react-native';
-import DatePicker from '..';
+// Use internal import for full prop support
+import DatePicker from '../index.internal';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 import { Button, Typography } from '../../..';
 
@@ -57,6 +58,106 @@ describe('DatePicker', () => {
     expect(getByTestId('datePickerCalendar')).toBeDefined();
   });
 
+  it('renders correctly when inputProps loading is true', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        inputProps={{ loading: true }}
+        onChange={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('input-suffix')).toHaveProp('name', 'loading');
+  });
+
+  it('renders correctly when groupStyleEnabled is true and no error', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId('date-picker-ios-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 0);
+  });
+
+  it('renders correctly when groupStyleEnabled is true and has error', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        error="This field is required"
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId('date-picker-ios-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
+
+  it('renders correctly when groupStyleEnabled is true and has error for Android', () => {
+    Platform.OS = 'android';
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        error="This field is required"
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId(
+      'date-picker-android-touchable-opacity'
+    );
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
+
+  it('renders correctly when groupStyleEnabled is true and has error for Calendar variant', () => {
+    const { getByTestId } = renderWithTheme(
+      <DatePicker
+        label="Start date"
+        value={new Date('1995-12-17T00:00:00.000Z')}
+        minDate={new Date('1994-12-17T00:00:00.000Z')}
+        maxDate={new Date('1996-12-17T00:00:00.000Z')}
+        confirmLabel="Confirm"
+        variant="calendar"
+        groupStyleEnabled
+        error="This field is required"
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId(
+      'date-picker-calendar-touchable-opacity'
+    );
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
+
   it.each`
     OS           | variant
     ${'ios'}     | ${'calendar'}