@hero-design/rn 8.103.5 → 8.103.7

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'}

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"
@@ -190,6 +191,7 @@ exports[`DatePicker renders DatePickerAndroid when OS is android 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -327,6 +329,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -476,6 +479,7 @@ exports[`DatePicker renders DatePickerIOS when OS is iOS 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -613,6 +617,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-calendar-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -762,6 +767,7 @@ exports[`DatePicker renders variant Calendar 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

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"
@@ -190,6 +191,7 @@ exports[`DatePickerAndroid renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

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"
@@ -190,6 +191,7 @@ exports[`DatePickerCalendar renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

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"
@@ -190,6 +191,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}
@@ -710,6 +712,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
         "opacity": 1,
       }
     }
+    testID="date-picker-ios-touchable-opacity"
   >
     <View
       pointerEvents="none"
@@ -859,6 +862,7 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
               }
               allowFontScaling={false}
               editable={true}
+              numberOfLines={1}
               onBlur={[Function]}
               onChangeText={[Function]}
               onFocus={[Function]}

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/RichTextEditor/RichTextEditor.tsx

@@ -408,7 +408,12 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
       <StyledTextInputContainer onLayout={onLayout}>
         <StyledBorderBackDrop themeState={state} themeFocused={isFocused} />
 
-        <StyledTextInputAndLabelContainer>
+        <StyledTextInputAndLabelContainer
+          style={{
+            height: webviewHeight,
+          }}
+          testID="webViewWrapper"
+        >
           <TouchableWithoutFeedback onPress={(e) => e.stopPropagation()}>
             <StyledWebView
               ref={webview}
@@ -420,7 +425,6 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               scrollEnabled={false}
               hideKeyboardAccessoryView
               keyboardDisplayRequiresUserAction={false}
-              height={webviewHeight}
             />
           </TouchableWithoutFeedback>
         </StyledTextInputAndLabelContainer>

package/src/components/RichTextEditor/StyledRichTextEditor.ts

@@ -6,10 +6,7 @@ export const StyledWrapper = styled(View)(({ theme }) => ({
   marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
 }));
 
-export const StyledWebView = styled(WebView)<{
-  height: number | undefined;
-}>(({ height, theme }) => ({
-  height,
+export const StyledWebView = styled(WebView)(({ theme }) => ({
   minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,
   backgroundColor: 'transparent',
   textAlignVertical: 'center',

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

@@ -58,7 +58,7 @@ jest.mock('../utils/rnWebView', () => {
 /* eslint-disable */
 /// @ts-ignore
 import { postMessageMock } from '../utils/rnWebView';
-import { RichTextEditorRef } from "../../../../types";
+import { RichTextEditorRef } from '../../../../types';
 /* eslint-enable */
 
 describe('RichTextEditor', () => {
@@ -201,7 +201,9 @@ describe('RichTextEditor', () => {
         );
 
         expect(wrapper.toJSON()).toMatchSnapshot();
-        expect(wrapper.getByTestId('webview')).toHaveStyle({ height: 480 });
+        expect(wrapper.getByTestId('webViewWrapper')).toHaveStyle({
+          height: 480,
+        });
       });
     });
   });

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

@@ -132,9 +132,12 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               "flexGrow": 2,
               "flexShrink": 1,
             },
-            undefined,
+            {
+              "height": 480,
+            },
           ]
         }
+        testID="webViewWrapper"
       >
         <WebView
           accessibilityState={
@@ -148,7 +151,6 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
           }
           accessible={true}
           focusable={true}
-          height={480}
           hideKeyboardAccessoryView={true}
           keyboardDisplayRequiresUserAction={false}
           onClick={[Function]}
@@ -204,7 +206,6 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               {
                 "backgroundColor": "transparent",
                 "fontSize": 16,
-                "height": 480,
                 "marginHorizontal": 8,
                 "minHeight": 24,
                 "textAlignVertical": "center",
@@ -456,9 +457,12 @@ exports[`RichTextEditor should render correctly 1`] = `
               "flexGrow": 2,
               "flexShrink": 1,
             },
-            undefined,
+            {
+              "height": undefined,
+            },
           ]
         }
+        testID="webViewWrapper"
       >
         <WebView
           accessibilityState={
@@ -527,7 +531,6 @@ exports[`RichTextEditor should render correctly 1`] = `
               {
                 "backgroundColor": "transparent",
                 "fontSize": 16,
-                "height": undefined,
                 "marginHorizontal": 8,
                 "minHeight": 24,
                 "textAlignVertical": "center",

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