@hero-design/rn 8.103.4 → 8.103.6

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', () => {

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

@@ -1,19 +1,19 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import type {
   TextInputProps as NativeTextInputProps,
   SectionList,
 } from 'react-native';
-import { TouchableOpacity, View } from 'react-native';
+import { View } from 'react-native';
+import { useKeyboard } from '../../../utils/helpers';
 import BottomSheet from '../../BottomSheet';
 import Box from '../../Box';
 import TextInput, { TextInputProps } from '../../TextInput';
 import Footer from '../Footer';
 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 { isOptionSelected } from './utils';
-import { useKeyboard } from '../../../utils/helpers';
 
 export interface MultiSelectProps<
   V,
@@ -58,6 +58,7 @@ export interface InternalMultiSelectProps<
   T extends SelectOptionType<V> = SelectOptionType<V>
 > extends MultiSelectProps<V, T> {
   TextInputComponent?: React.ComponentType<TextInputProps>;
+  groupStyleEnabled?: boolean;
 }
 
 function MultiSelect<V, T extends SelectOptionType<V>>({
@@ -82,6 +83,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
   value,
   supportedOrientations = ['portrait'],
   bottomSheetConfig = {},
+  groupStyleEnabled = false,
   ...rest
 }: InternalMultiSelectProps<V, T>) {
   const { isKeyboardVisible, keyboardHeight } = useKeyboard();
@@ -100,10 +102,13 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
 
   const TextInputComponent = rest.TextInputComponent || TextInput;
 
+  const onPress = useCallback(() => {
+    setOpen(true);
+  }, []);
+
   useEffect(() => {
     setSelectingValue(value);
   }, [open, value]);
-
   return (
     <>
       <View
@@ -111,7 +116,12 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
           !editable || disabled || inputProps?.loading ? 'none' : 'auto'
         }
       >
-        <TouchableOpacity onPress={() => setOpen(true)}>
+        <StyledTouchableOpacity
+          onPress={onPress}
+          themeGroupStyleEnabled={groupStyleEnabled}
+          themeHasError={!!error}
+          testID="multi-select-touchable-opacity"
+        >
           {
             // prevent users from focusing TextInput
           }
@@ -136,7 +146,7 @@ function MultiSelect<V, T extends SelectOptionType<V>>({
               }
             />
           </View>
-        </TouchableOpacity>
+        </StyledTouchableOpacity>
       </View>
       <BottomSheet
         variant={bottomSheetVariant || 'fixed'}

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

@@ -44,6 +44,7 @@ exports[`rendering allows custom renderer 1`] = `
           "opacity": 1,
         }
       }
+      testID="single-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -1485,6 +1486,7 @@ exports[`rendering renders correct floating bottom sheet variant 1`] = `
           "opacity": 1,
         }
       }
+      testID="single-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -3085,6 +3087,7 @@ exports[`rendering renders correctly when bottom sheet is NOT visible 1`] = `
           "opacity": 1,
         }
       }
+      testID="single-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -3376,6 +3379,7 @@ exports[`rendering renders correctly when bottom sheet is visible 1`] = `
           "opacity": 1,
         }
       }
+      testID="single-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -4962,6 +4966,7 @@ exports[`rendering renders correctly when input is loading 1`] = `
           "opacity": 1,
         }
       }
+      testID="single-select-touchable-opacity"
     >
       <View
         pointerEvents="none"
@@ -5266,6 +5271,7 @@ exports[`rendering renders correctly when receives sections 1`] = `
           "opacity": 1,
         }
       }
+      testID="single-select-touchable-opacity"
     >
       <View
         pointerEvents="none"

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

@@ -293,6 +293,56 @@ describe('rendering', () => {
     expect(getByText('Option with object value 1')).toBeVisible();
     expect(getByText('Option with object value 2')).toBeVisible();
   });
+
+  it('renders correctly when groupStyleEnabled is true and no error', () => {
+    const { getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+        groupStyleEnabled
+      />
+    );
+
+    const touchableOpacity = getByTestId('single-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(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+        groupStyleEnabled
+        error="This field is required"
+      />
+    );
+
+    const touchableOpacity = getByTestId('single-select-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).toHaveProperty('zIndex', 1);
+  });
+
+  it('renders correctly when groupStyleEnabled is false', () => {
+    const { getByTestId } = renderWithTheme(
+      <SingleSelect
+        label="Allow notifications"
+        options={options}
+        value="mon"
+        onConfirm={jest.fn()}
+        groupStyleEnabled={false}
+        error="This field is required"
+      />
+    );
+
+    const touchableOpacity = getByTestId('single-select-touchable-opacity');
+    expect(touchableOpacity).toBeTruthy();
+    expect(touchableOpacity.props.style).not.toHaveProperty('zIndex');
+  });
 });
 
 describe('behavior', () => {

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

@@ -13,11 +13,13 @@ import {
   View,
 } from 'react-native';
 import type {
-  TextInputProps as NativeTextInputProps,
+  TextInputProps as RNTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
   LayoutChangeEvent,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
 } from 'react-native';
 import {
   StyledTextInputContainer,
@@ -49,6 +51,23 @@ export type TextInputHandles = Pick<
 
 export type TextInputVariant = 'text' | 'textarea';
 
+type NativeTextInputProps = Omit<RNTextInputProps, 'onFocus' | 'onBlur'> & {
+  onFocus?: (
+    event?: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void | undefined;
+  onBlur?: (
+    event?: NativeSyntheticEvent<TextInputFocusEventData>
+  ) => void | undefined;
+};
+
+export interface TextInputRef {
+  focus: () => void;
+  blur: () => void;
+  clear: () => void;
+  isFocused: () => boolean;
+  setNativeProps?: (props: RNTextInputProps) => void;
+}
+
 export interface TextInputProps extends NativeTextInputProps {
   /**
    * Field label.
@@ -118,7 +137,10 @@ export interface TextInputProps extends NativeTextInputProps {
   /**
    * Customise input value renderer
    */
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.ForwardedRef<TextInputRef>
+  ) => React.ReactNode;
   /**
    * Component ref.
    */
@@ -197,17 +219,25 @@ export const renderInput = ({
   variant: TextInputVariant;
   nativeInputProps: NativeTextInputProps;
   multiline?: boolean;
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.Ref<TextInputRef>
+  ) => React.ReactNode;
   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)
+    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/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -190,6 +190,7 @@ exports[`TimePickerAndroid renders correct with hide suffix 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -481,6 +482,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

@@ -190,6 +190,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -481,6 +482,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

package/src/index.internal.ts

@@ -3,5 +3,10 @@ import DatePicker from './components/DatePicker/index.internal';
 import TimePicker from './components/TimePicker/index.internal';
 
 export * from '.';
+export type {
+  MultiSelectProps,
+  SingleSelectProps,
+  DatePickerProps,
+  TimePickerProps,
+} from './types.internal';
 export { Select, DatePicker, TimePicker };
-export type { MultiSelectProps, SingleSelectProps } from './types.internal';

package/src/types.internal.ts

@@ -1,10 +1,9 @@
+import { DatePickerProps } from './components/DatePicker/index.internal';
 import type {
   SingleSelectProps,
   MultiSelectProps,
 } from './components/Select/index.internal';
-
-import type { DatePickerProps } from './components/DatePicker/index.internal';
-import type { TimePickerProps } from './components/TimePicker/index.internal';
+import { TimePickerProps } from './components/TimePicker/index.internal';
 
 export * from './types';
 

package/stats/8.103.4/rn-stats.html

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