@hero-design/rn 8.103.6 → 8.103.7

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

@@ -41,6 +41,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-android-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -328,6 +329,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -615,6 +617,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-calendar-touchable-opacity"
   >
     <View
       pointerEvents="none"

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

@@ -41,6 +41,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-android-touchable-opacity"
   >
     <View
       pointerEvents="none"

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

@@ -41,6 +41,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-calendar-touchable-opacity"
   >
     <View
       pointerEvents="none"

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

@@ -41,6 +41,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -711,6 +712,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"

package/src/components/DatePicker/types.ts

@@ -104,5 +104,16 @@ export interface DatePickerProps {
 
 // Add an internal prop type for TextInputComponent, not exported
 export interface InternalDatePickerProps extends DatePickerProps {
+  /**
+   * Props that are passed to TextInput.
+   */
+  inputProps?: Pick<TextInputProps, 'loading' | 'numberOfLines'>;
+  /**
+   * Whether the component is used within a FormGroup for styling purposes.
+   */
+  groupStyleEnabled?: boolean;
+  /**
+   * Input component to use instead of the default TextInput.
+   */
   TextInputComponent?: React.ComponentType<TextInputProps>;
 }

package/src/components/TimePicker/StyledTimePicker.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/TimePicker/TimePickerAndroid.tsx

@@ -1,9 +1,10 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
-import React, { useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useState, useCallback } from 'react';
+import { View } from 'react-native';
 import formatTime from 'date-fns/fp/format';
 
 import TextInput from '../TextInput';
+import { StyledTouchableOpacity } from './StyledTimePicker';
 import type { InternalTimePickerProps } from './types';
 
 const TimePickerAndroid = ({
@@ -20,6 +21,8 @@ const TimePickerAndroid = ({
   testID,
   showSuffix = true,
   TextInputComponent,
+  inputProps,
+  groupStyleEnabled = false,
 }: InternalTimePickerProps) => {
   const [open, setOpen] = useState(false);
 
@@ -29,10 +32,21 @@ const TimePickerAndroid = ({
 
   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="time-picker-android-touchable-opacity"
+    >
       <View pointerEvents="none" testID="timePickerInputAndroid">
         <InputComponent
+          {...inputProps}
           label={label}
           value={displayValue}
           suffix={showSuffix ? 'clock-3' : undefined}
@@ -60,7 +74,7 @@ const TimePickerAndroid = ({
           is24Hour={!is12Hour}
         />
       ) : null}
-    </TouchableOpacity>
+    </StyledTouchableOpacity>
   );
 };
 

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -1,12 +1,15 @@
 import DateTimePicker from '@react-native-community/datetimepicker';
-import React, { useEffect, useState } from 'react';
-import { TouchableOpacity, View } from 'react-native';
+import React, { useEffect, useState, useCallback } from 'react';
+import { View } from 'react-native';
 import formatTime from 'date-fns/fp/format';
 
 import BottomSheet from '../BottomSheet';
 import TextInput from '../TextInput';
 import Button from '../Button';
-import { StyledPickerWrapper } from './StyledTimePicker';
+import {
+  StyledPickerWrapper,
+  StyledTouchableOpacity,
+} from './StyledTimePicker';
 import type { InternalTimePickerProps } from './types';
 import { useTheme } from '../../theme';
 
@@ -26,6 +29,8 @@ const TimePickerIOS = ({
   showSuffix = true,
   supportedOrientations = ['portrait'],
   TextInputComponent,
+  inputProps,
+  groupStyleEnabled = false,
 }: InternalTimePickerProps) => {
   const [selectingDate, setSelectingDate] = useState<Date>(value || new Date());
   const [open, setOpen] = useState(false);
@@ -40,10 +45,21 @@ const TimePickerIOS = ({
     setSelectingDate(value || new Date());
   }, [value]);
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
-    <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
+    <StyledTouchableOpacity
+      onPress={onPress}
+      disabled={disabled}
+      themeGroupStyleEnabled={groupStyleEnabled}
+      themeHasError={!!error}
+      testID="time-picker-ios-touchable-opacity"
+    >
       <View pointerEvents="none" testID="timePickerInputIOS">
         <InputComponent
+          {...inputProps}
           label={label}
           value={displayValue}
           suffix={showSuffix ? 'clock-3' : undefined}
@@ -93,7 +109,7 @@ const TimePickerIOS = ({
           />
         </StyledPickerWrapper>
       </BottomSheet>
-    </TouchableOpacity>
+    </StyledTouchableOpacity>
   );
 };
 

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

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Platform } from 'react-native';
-import TimePicker from '..';
+// Use internal import for full prop support
+import TimePicker from '../index.internal';
 import renderWithTheme from '../../../testHelpers/renderWithTheme';
 
 describe('TimePicker', () => {
@@ -31,4 +32,74 @@ describe('TimePicker', () => {
 
     expect(getByTestId('timePickerInputAndroid')).toBeDefined();
   });
+
+  it('renders correctly when inputProps loading is true', () => {
+    Platform.OS = 'ios';
+    const { getByTestId } = renderWithTheme(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        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(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId('time-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(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        error="This field is required"
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId('time-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(
+      <TimePicker
+        label="Start time"
+        value={new Date('December 17, 1995 03:24:00')}
+        confirmLabel="Confirm"
+        groupStyleEnabled
+        error="This field is required"
+        onChange={jest.fn()}
+      />
+    );
+
+    const touchableOpacity = getByTestId(
+      'time-picker-android-touchable-opacity'
+    );
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
 });

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -41,6 +41,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
         "opacity": 1,
       }
     }
+    testID="time-picker-android-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -333,6 +334,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="time-picker-android-touchable-opacity"
   >
     <View
       pointerEvents="none"

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -41,6 +41,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
         "opacity": 1,
       }
     }
+    testID="time-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -333,6 +334,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="time-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"

package/src/components/TimePicker/types.ts

@@ -65,5 +65,16 @@ export interface TimePickerProps {
 
 // Add an internal prop type for TextInputComponent, not exported
 export interface InternalTimePickerProps extends TimePickerProps {
+  /**
+   * Props that are passed to TextInput.
+   */
+  inputProps?: Pick<TextInputProps, 'loading' | 'numberOfLines'>;
+  /**
+   * Whether the component is used within a FormGroup for styling purposes.
+   */
+  groupStyleEnabled?: boolean;
+  /**
+   * Input component to use instead of the default TextInput.
+   */
   TextInputComponent?: React.ComponentType<TextInputProps>;
 }

package/stats/8.103.6/rn-stats.html

@@ -4840,5 +4840,3 @@ var drawChart = (function (exports) {
 </body>
 </html>
 
-ml>
-