@hero-design/rn 8.103.5 → 8.103.7

package/src/components/Select/SingleSelect/index.tsx

@@ -1,16 +1,16 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import type {
-  SectionList,
   TextInputProps as NativeTextInputProps,
+  SectionList,
 } from 'react-native';
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
+import { deepCompareValue, useKeyboard } from '../../../utils/helpers';
 import BottomSheet from '../../BottomSheet';
 import TextInput, { TextInputProps } from '../../TextInput';
 import { getScrollParams, toFlatOptions, toSections } from '../helpers';
-import { StyledSearchBar } from '../StyledSelect';
-import type { SelectOptionType, SectionType, SelectProps } from '../types';
+import { StyledSearchBar, StyledTouchableOpacity } from '../StyledSelect';
+import type { SectionType, SelectOptionType, SelectProps } from '../types';
 import OptionList from './OptionList';
-import { deepCompareValue, useKeyboard } from '../../../utils/helpers';
 
 export interface SingleSelectProps<
   V,
@@ -43,6 +43,7 @@ export interface InternalSingleSelectProps<
   T extends SelectOptionType<V> = SelectOptionType<V>
 > extends SingleSelectProps<V, T> {
   TextInputComponent?: React.ComponentType<TextInputProps>;
+  groupStyleEnabled?: boolean;
 }
 
 const SingleSelect = <V, T extends SelectOptionType<V>>({
@@ -66,6 +67,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
+  groupStyleEnabled = false,
   ...rest
 }: InternalSingleSelectProps<V, T>) => {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
@@ -83,6 +85,10 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
 
   const TextInputComponent = rest.TextInputComponent || TextInput;
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   return (
     <>
       <View
@@ -90,7 +96,12 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
           !editable || disabled || inputProps?.loading ? 'none' : 'auto'
         }
       >
-        <TouchableOpacity onPress={() => setOpen(true)}>
+        <StyledTouchableOpacity
+          onPress={onPress}
+          themeGroupStyleEnabled={groupStyleEnabled}
+          themeHasError={!!error}
+          testID="single-select-touchable-opacity"
+        >
           {
             // prevent users from focusing TextInput
           }
@@ -115,7 +126,7 @@ const SingleSelect = <V, T extends SelectOptionType<V>>({
               }
             />
           </View>
-        </TouchableOpacity>
+        </StyledTouchableOpacity>
       </View>
       <BottomSheet
         variant={bottomSheetVariant || 'fixed'}

package/src/components/Select/StyledSelect.tsx

@@ -1,4 +1,4 @@
-import { SectionList, View } from 'react-native';
+import { SectionList, TouchableOpacity, View } from 'react-native';
 import styled from '@emotion/native';
 
 const SectionSpacer = styled(View)(({ theme }) => ({
@@ -19,4 +19,27 @@ const StyledSectionList = styled(SectionList)(({ theme }) => ({
   paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding,
 })) as unknown as typeof SectionList;
 
-export { SectionSpacer, OptionSpacer, StyledSearchBar, StyledSectionList };
+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 {
+  SectionSpacer,
+  OptionSpacer,
+  StyledSearchBar,
+  StyledSectionList,
+  StyledTouchableOpacity,
+};

package/src/components/Select/index.tsx

@@ -10,11 +10,17 @@ type SingleSelectType = <
   V,
   T extends SelectOptionType<V> = SelectOptionType<V>
 >(
-  props: Omit<SingleSelectProps<V, T>, 'TextInputComponent'>
+  props: Omit<
+    SingleSelectProps<V, T>,
+    'TextInputComponent' | 'groupStyleEnabled'
+  >
 ) => React.ReactElement;
 
 type MultiSelectType = <V, T extends SelectOptionType<V> = SelectOptionType<V>>(
-  props: Omit<MultiSelectProps<V, T>, 'TextInputComponent'>
+  props: Omit<
+    MultiSelectProps<V, T>,
+    'TextInputComponent' | 'groupStyleEnabled'
+  >
 ) => React.ReactElement;
 
 export default Object.assign(SingleSelect as SingleSelectType, {

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

@@ -199,6 +199,7 @@ exports[`TextInput backgroundColor renders correctly 1`] = `
           defaultValue="1000"
           editable={true}
           maxLength={255}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -527,6 +528,7 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
           defaultValue="1000"
           editable={true}
           maxLength={255}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -854,6 +856,7 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
           defaultValue="1000"
           editable={true}
           maxLength={255}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -1165,6 +1168,7 @@ exports[`TextInput disabled renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -1441,6 +1445,7 @@ exports[`TextInput error renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -1744,6 +1749,7 @@ exports[`TextInput filled renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -2035,6 +2041,7 @@ exports[`TextInput helper text renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -2304,6 +2311,7 @@ exports[`TextInput idle renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -2594,6 +2602,7 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -2796,6 +2805,7 @@ exports[`TextInput loading renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -3766,6 +3776,7 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -4061,6 +4072,7 @@ exports[`TextInput readonly renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={false}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -4307,6 +4319,7 @@ exports[`TextInput ref ref methods work correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}
@@ -4583,6 +4596,7 @@ exports[`TextInput required renders correctly 1`] = `
           }
           allowFontScaling={false}
           editable={true}
+          numberOfLines={1}
           onBlur={[Function]}
           onChangeText={[Function]}
           onFocus={[Function]}

package/src/components/TextInput/index.tsx

@@ -226,13 +226,18 @@ export const renderInput = ({
   ref?: React.Ref<RNTextInput>;
   theme: Theme;
 }) => {
+  const multiline = variant === 'textarea' || nativeInputProps.multiline;
+  // `numberOfLines` must be `1` for single-line inputs to render properly on Android.
+  const numberOfLines = multiline ? nativeInputProps.numberOfLines : 1;
+
   return renderInputValue ? (
     renderInputValue(nativeInputProps, ref)
   ) : (
     <StyledTextInput
       {...nativeInputProps}
       themeVariant={variant}
-      multiline={variant === 'textarea' || nativeInputProps.multiline}
+      multiline={multiline}
+      numberOfLines={numberOfLines}
       ref={ref}
       placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
     />

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"
@@ -190,6 +191,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -332,6 +334,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="time-picker-android-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -481,6 +484,7 @@ exports[`TimePickerAndroid renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

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"
@@ -190,6 +191,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -332,6 +334,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
         "opacity": 1,
       }
     }
+    testID="time-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -481,6 +484,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

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.5/rn-stats.html

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