@hero-design/rn-work-uikit 1.2.0-alpha.1 → 1.2.0

package/src/components/TextInput/StyledTextInput.tsx

@@ -5,12 +5,37 @@ export type State = 'default' | 'filled' | 'disabled' | 'readonly' | 'error';
 
 type Variant = 'text' | 'textarea';
 
-const StyledContainer = styled(Pressable)(({ theme }) => ({
+const getZIndexByState = ({
+  themeFocused,
+  themeHasError,
+}: {
+  themeFocused: boolean;
+  themeHasError: boolean;
+}) => {
+  if (themeFocused) {
+    return 2;
+  }
+
+  if (themeHasError) {
+    return 1;
+  }
+
+  return 0;
+};
+
+const StyledContainer = styled(Pressable)<{
+  themeFocused: boolean;
+  themeHasError: boolean;
+  themeUseGroupStyleEnabled: boolean;
+}>(({ theme, themeFocused, themeHasError, themeUseGroupStyleEnabled }) => ({
   width: '100%',
   flexDirection: 'row',
   paddingHorizontal: theme.__hd__.textInput.space.containerPadding,
   minHeight: theme.__hd__.textInput.sizes.containerMinHeight,
   marginTop: theme.__hd__.textInput.space.containerMarginTop,
+  ...(themeUseGroupStyleEnabled && {
+    zIndex: getZIndexByState({ themeFocused, themeHasError }),
+  }),
 }));
 
 const StyledFloatingLabelContainer = styled(Animated.View)<{
@@ -89,13 +114,16 @@ const StyledInputWrapper = styled(View)(({ theme }) => ({
   overflow: 'hidden',
 }));
 
-const StyledInputRow = styled(View)(({ theme }) => ({
-  flexDirection: 'row',
-  alignItems: 'center',
-  flexGrow: 2,
-  flexShrink: 1,
-  gap: theme.__hd__.textInput.space.prefixAndInputContainerGap,
-}));
+const StyledInputRow = styled(Pressable)<{ themeOpacity: number }>(
+  ({ theme, themeOpacity }) => ({
+    flexDirection: 'row',
+    alignItems: 'center',
+    flexGrow: 2,
+    flexShrink: 1,
+    gap: theme.__hd__.textInput.space.prefixAndInputContainerGap,
+    opacity: themeOpacity,
+  })
+);
 
 const StyledErrorAndHelpTextContainer = styled(View)(({ theme }) => ({
   paddingHorizontal:

package/src/components/TextInput/__tests__/FloatingLabel.spec.tsx

@@ -5,16 +5,15 @@ import FloatingLabel from '../FloatingLabel';
 describe('FloatingLabel', () => {
   describe('label text display based on required prop', () => {
     it.each`
-      required | expectedText          | shouldShowOptional | description
-      ${true}  | ${'Email'}            | ${false}           | ${'required field without optional indicator'}
-      ${false} | ${'Phone (Optional)'} | ${true}            | ${'optional field with optional indicator'}
+      required | expectedText | optionalText
+      ${true}  | ${'Email'}   | ${null}
+      ${false} | ${'Phone'}   | ${'(Optional)'}
     `(
-      'should display $expectedText for $description',
-      ({ required, expectedText, shouldShowOptional }) => {
-        const label = required ? 'Email' : 'Phone';
-        const { getByText, queryByText } = renderWithTheme(
+      'should display "$expectedText" with "$optionalText" when required is $required',
+      ({ required, expectedText, optionalText }) => {
+        const { getByTestId, queryByText } = renderWithTheme(
           <FloatingLabel
-            label={label}
+            label={expectedText}
             variant="text"
             state="default"
             isFocused={false}
@@ -23,12 +22,11 @@ describe('FloatingLabel', () => {
           />
         );
 
-        // User should see the appropriate label text
-        expect(getByText(expectedText)).toBeTruthy();
+        const labelComponent = getByTestId('input-label');
+        expect(labelComponent).toHaveTextContent(expectedText);
 
-        if (!shouldShowOptional) {
-          expect(queryByText(`${label} (Optional)`)).toBeFalsy();
-          expect(queryByText('(Optional)')).toBeFalsy();
+        if (optionalText) {
+          expect(queryByText(optionalText)).toBeVisible();
         }
       }
     );
@@ -36,39 +34,42 @@ describe('FloatingLabel', () => {
 
   describe('label behavior based on focus and content state', () => {
     it.each`
-      state        | isEmptyValue | expectedBehavior                        | description
-      ${'focused'} | ${true}      | ${'label in focused state'}             | ${'user focuses empty input'}
-      ${'filled'}  | ${false}     | ${'label remains in floating position'} | ${'user enters text in input'}
+      state        | isEmptyValue | required | expectedText  | description
+      ${'focused'} | ${true}      | ${true}  | ${'Password'} | ${'user focuses empty input'}
+      ${'filled'}  | ${false}     | ${true}  | ${'Message'}  | ${'user enters text in input'}
     `(
-      'should show $expectedBehavior when $description',
-      ({ state, isEmptyValue }) => {
-        const { getByTestId } = renderWithTheme(
+      'should show correct label when $description',
+      ({ state, isEmptyValue, required, expectedText }) => {
+        const { getByTestId, queryByText } = renderWithTheme(
           <FloatingLabel
-            label={state === 'focused' ? 'Password' : 'Message'}
+            label={expectedText}
             variant="text"
             state={state}
             isFocused={state === 'focused'}
-            required
+            required={required}
             isEmptyValue={isEmptyValue}
           />
         );
 
         // User should see the label behaving appropriately
         const label = getByTestId('input-label');
-        expect(label).toBeTruthy();
-        const { children } = label.props;
-        const expectedText = state === 'focused' ? 'Password' : 'Message';
-        expect(
-          Array.isArray(children) ? children.filter(Boolean).join('') : children
-        ).toBe(expectedText);
+        expect(label).toHaveTextContent(expectedText);
+
+        const optionalLabel = queryByText(' (Optional)');
+        if (!required) {
+          expect(optionalLabel).not.toBeNull();
+        } else {
+          expect(optionalLabel).toBeNull();
+        }
       }
     );
   });
 
   describe('variant-specific positioning', () => {
     it.each`
-      variant       | required | expectedText                | description
-      ${'textarea'} | ${false} | ${'Description (Optional)'} | ${'multiline input with optional label'}
+      variant       | required | expectedText     | description
+      ${'textarea'} | ${false} | ${'Description'} | ${'multiline input with optional label'}
+      ${'textarea'} | ${true}  | ${'Description'} | ${'multiline input with required label'}
     `(
       'should position label appropriately for $variant ($description)',
       ({ variant, required, expectedText }) => {
@@ -85,20 +86,16 @@ describe('FloatingLabel', () => {
 
         // User should see the label with proper variant positioning
         const label = getByTestId('input-label');
-        expect(label).toBeTruthy();
-        const { children } = label.props;
-        expect(Array.isArray(children) ? children.join('') : children).toBe(
-          expectedText
-        );
+        expect(label).toHaveTextContent(expectedText);
       }
     );
   });
 
   describe('when user encounters different input states', () => {
     it.each`
-      state         | required | expectedText                   | description
-      ${'error'}    | ${true}  | ${'Email'}                     | ${'validation error with required field'}
-      ${'disabled'} | ${false} | ${'Disabled Field (Optional)'} | ${'non-interactive optional field'}
+      state         | required | expectedText        | description
+      ${'error'}    | ${true}  | ${'Email'}          | ${'validation error with required field'}
+      ${'disabled'} | ${false} | ${'Disabled Field'} | ${'non-interactive optional field'}
     `(
       'should display appropriate styling for $state state ($description)',
       ({ state, required, expectedText }) => {
@@ -115,11 +112,7 @@ describe('FloatingLabel', () => {
 
         // User should see the label with appropriate state styling
         const label = getByTestId('input-label');
-        expect(label).toBeTruthy();
-        const { children } = label.props;
-        expect(
-          Array.isArray(children) ? children.filter(Boolean).join('') : children
-        ).toBe(expectedText);
+        expect(label).toHaveTextContent(expectedText);
       }
     );
   });
@@ -193,10 +186,7 @@ describe('FloatingLabel', () => {
         const label = getByTestId('input-label');
         expect(label).toBeTruthy();
         expect(label).toHaveProp('nativeID', 'fullname-label');
-        const { children } = label.props;
-        expect(Array.isArray(children) ? children.join('') : children).toBe(
-          'Full Name (Optional)'
-        );
+        expect(label).toHaveTextContent('Full Name');
       });
     });
   });

package/src/components/TextInput/__tests__/InputRow.spec.tsx

@@ -1,23 +1,20 @@
 import React from 'react';
 import { Text, TextInput as RNTextInput } from 'react-native';
 import type { TextInputProps as NativeTextInputProps } from 'react-native';
+import { fireEvent, waitFor } from '@testing-library/react-native';
 // import { TextInput as RNTextInput } from 'react-native';
 import renderWithTheme from '../../../../testUtils/renderWithTheme';
 import InputRow from '../InputRow';
 
-// Mock the LABEL_ANIMATION_DURATION constant
-jest.mock('../constants', () => ({
-  LABEL_ANIMATION_DURATION: 0, // Instant animation for testing
-}));
-
 describe('InputRow', () => {
   const defaultProps = {
     state: 'default' as const,
-    isFocused: false,
     variant: 'text' as const,
+    testID: 'input-row',
     nativeInputProps: {
       value: '',
       placeholder: 'Enter text',
+      testID: 'input-row-text-input',
     },
     isEmptyValue: true,
   };
@@ -26,73 +23,42 @@ describe('InputRow', () => {
     jest.clearAllMocks();
   });
 
-  describe('when user sees an empty input field', () => {
-    it('should hide both prefix and input components with opacity', () => {
-      const ref = React.createRef<RNTextInput>();
-      const { getByTestId } = renderWithTheme(
-        <InputRow {...defaultProps} prefix="search" ref={ref} />
-      );
-
-      // Components should be present but hidden
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toBeTruthy();
-      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', true);
+  describe('visibility behavior', () => {
+    it('should be hidden when unfocused and empty by default', () => {
+      const { getByTestId } = renderWithTheme(<InputRow {...defaultProps} />);
+      expect(getByTestId('input-row')).toHaveProp('themeOpacity', 0);
     });
-  });
 
-  describe('when user focuses the input', () => {
-    it('should show both prefix and input components with animation', () => {
-      const ref = React.createRef<RNTextInput>();
+    it('should be visible when unfocused and empty if shouldShowWhenUnfocused is true', () => {
       const { getByTestId } = renderWithTheme(
-        <InputRow {...defaultProps} isFocused isEmptyValue ref={ref} />
+        <InputRow {...defaultProps} shouldShowWhenUnfocused />
       );
+      expect(getByTestId('input-row')).toHaveProp('themeOpacity', 1);
+    });
 
-      // Should be visible when focused
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', false);
+    it('should become visible on focus', async () => {
+      const { getByTestId } = renderWithTheme(<InputRow {...defaultProps} />);
+
+      expect(getByTestId('input-row')).toHaveProp('themeOpacity', 0);
+      fireEvent(getByTestId('input-row-text-input'), 'focus');
+
+      await waitFor(() => {
+        expect(getByTestId('input-row')).toHaveProp('themeOpacity', 1);
+      });
     });
-  });
 
-  describe('when user enters text in the input', () => {
-    it('should keep components visible even when not focused', () => {
-      const ref = React.createRef<RNTextInput>();
+    it('should be visible when it has a value, even if unfocused', () => {
       const { getByTestId } = renderWithTheme(
         <InputRow
           {...defaultProps}
-          prefix="search"
-          state="filled"
           isEmptyValue={false}
           nativeInputProps={{
             ...defaultProps.nativeInputProps,
             value: 'user@example.com',
           }}
-          ref={ref}
         />
       );
-
-      // User has entered text - components should be visible
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', false);
-    });
-  });
-
-  describe('when user uses input with prefix icon', () => {
-    it('should render input wrapper when prefix is provided', () => {
-      const ref = React.createRef<RNTextInput>();
-      const { getByTestId } = renderWithTheme(
-        <InputRow
-          {...defaultProps}
-          prefix="search"
-          isFocused
-          isEmptyValue={false}
-          ref={ref}
-        />
-      );
-
-      // User should see the input wrapper with prefix
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toBeTruthy();
-      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', false);
+      expect(getByTestId('input-row')).toHaveProp('themeOpacity', 1);
     });
   });
 
@@ -105,12 +71,11 @@ describe('InputRow', () => {
         <InputRow
           {...defaultProps}
           prefix={<CustomPrefix />}
-          isFocused
           isEmptyValue={false}
           ref={ref}
+          shouldShowWhenUnfocused
         />
       );
-
       // User should see the custom prefix
       expect(getByTestId('custom-prefix')).toBeTruthy();
     });
@@ -123,7 +88,6 @@ describe('InputRow', () => {
         <InputRow
           {...defaultProps}
           variant="textarea"
-          isFocused
           isEmptyValue={false}
           nativeInputProps={{
             ...defaultProps.nativeInputProps,
@@ -131,9 +95,9 @@ describe('InputRow', () => {
             numberOfLines: 4,
           }}
           ref={ref}
+          shouldShowWhenUnfocused
         />
       );
-
       // User should see the textarea input
       const inputWrapper = getByTestId('input-row-input-wrapper');
       expect(inputWrapper).toBeTruthy();
@@ -143,27 +107,28 @@ describe('InputRow', () => {
 
   describe('when user encounters different input states', () => {
     it('should render input wrapper in error state', () => {
-      const ref = React.createRef<RNTextInput>();
       const { getByTestId } = renderWithTheme(
         <InputRow
           {...defaultProps}
           state="error"
           isEmptyValue={false}
-          ref={ref}
+          shouldShowWhenUnfocused
         />
       );
-
       // Components should render with error state
       const inputWrapper = getByTestId('input-row-input-wrapper');
       expect(inputWrapper).toBeTruthy();
     });
 
     it('should handle disabled state appropriately', () => {
-      const ref = React.createRef<RNTextInput>();
       const { getByTestId } = renderWithTheme(
-        <InputRow {...defaultProps} state="disabled" isEmptyValue ref={ref} />
+        <InputRow
+          {...defaultProps}
+          state="disabled"
+          isEmptyValue
+          shouldShowWhenUnfocused
+        />
       );
-
       // Even disabled inputs should render components
       const inputWrapper = getByTestId('input-row-input-wrapper');
       expect(inputWrapper).toBeTruthy();
@@ -181,16 +146,15 @@ describe('InputRow', () => {
         <InputRow
           {...defaultProps}
           renderInputValue={customRenderer}
-          isFocused
           isEmptyValue={false}
           nativeInputProps={{
             ...defaultProps.nativeInputProps,
             value: 'test value',
           }}
           ref={ref}
+          shouldShowWhenUnfocused
         />
       );
-
       // User should see the custom rendered input
       expect(getByTestId('custom-input-renderer')).toBeTruthy();
     });
@@ -200,7 +164,12 @@ describe('InputRow', () => {
     it('should properly handle input ref', () => {
       const ref = React.createRef<RNTextInput>();
       renderWithTheme(
-        <InputRow {...defaultProps} isFocused isEmptyValue={false} ref={ref} />
+        <InputRow
+          {...defaultProps}
+          isEmptyValue={false}
+          ref={ref}
+          shouldShowWhenUnfocused
+        />
       );
       expect(ref.current).toBeDefined();
     });
@@ -208,31 +177,18 @@ describe('InputRow', () => {
 
   describe('accessibility features', () => {
     it('should provide proper accessibility labels for input wrapper', () => {
-      const ref = React.createRef<RNTextInput>();
-      const { getByTestId } = renderWithTheme(
-        <InputRow {...defaultProps} isFocused isEmptyValue={false} ref={ref} />
-      );
-
-      // User should have proper accessibility support
-      const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toHaveProp('accessibilityLabel', 'Text input field');
-    });
-
-    it('should hide components from screen readers when not visible', () => {
       const ref = React.createRef<RNTextInput>();
       const { getByTestId } = renderWithTheme(
         <InputRow
           {...defaultProps}
-          prefix="search"
-          state="default"
-          isEmptyValue
+          isEmptyValue={false}
           ref={ref}
+          shouldShowWhenUnfocused
         />
       );
-
-      // Components should be hidden from screen readers when not visible
+      // User should have proper accessibility support
       const inputWrapper = getByTestId('input-row-input-wrapper');
-      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', true);
+      expect(inputWrapper).toHaveProp('accessibilityLabel', 'Text input field');
     });
   });
 
@@ -243,7 +199,6 @@ describe('InputRow', () => {
         <InputRow
           {...defaultProps}
           prefix="search"
-          isFocused
           isEmptyValue={false}
           nativeInputProps={{
             ...defaultProps.nativeInputProps,
@@ -251,25 +206,25 @@ describe('InputRow', () => {
             placeholder: 'Enter email',
           }}
           ref={ref}
+          shouldShowWhenUnfocused
         />
       );
-
-      // User should see a fully rendered input row
       const inputWrapper = getByTestId('input-row-input-wrapper');
       expect(inputWrapper).toBeTruthy();
-      expect(inputWrapper).toHaveProp('accessibilityElementsHidden', false);
     });
 
     it('should render without prefix', () => {
       const ref = React.createRef<RNTextInput>();
-      const { getByTestId, queryByText } = renderWithTheme(
-        <InputRow {...defaultProps} ref={ref} />
+      const { getByTestId } = renderWithTheme(
+        <InputRow
+          {...defaultProps}
+          isEmptyValue={false}
+          ref={ref}
+          shouldShowWhenUnfocused
+        />
       );
-
-      // User should see input without prefix
       const inputWrapper = getByTestId('input-row-input-wrapper');
       expect(inputWrapper).toBeTruthy();
-      expect(queryByText('search')).toBeNull();
     });
   });
 });