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

package/src/components/TextInput/index.tsx

@@ -21,7 +21,12 @@ import SuffixComponent from './SuffixComponent';
 import MaxLengthMessage from './MaxLengthMessage';
 import FloatingLabel from './FloatingLabel';
 import InputRow from './InputRow';
-import type { TextInputHandles, TextInputProps } from './types';
+import type {
+  InternalTextInputProps,
+  TextInputHandles,
+  TextInputProps,
+} from './types';
+import Group from './Group';
 
 export type {
   TextInputHandles,
@@ -117,7 +122,10 @@ const extractBorderStyles = (style: StyleProp<ViewStyle>) => {
  * Note: StyledBorder uses StyleSheet.absoluteFillObject to overlay the entire
  * StyledContainer, providing the border and background styling.
  */
-const TextInput = forwardRef<TextInputHandles, TextInputProps>(
+export const InternalTextInput = forwardRef<
+  TextInputHandles,
+  InternalTextInputProps
+>(
   (
     {
       label,
@@ -140,10 +148,13 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       renderInputValue,
       allowFontScaling = false,
       variant = 'text',
+      accessibilityLabel,
+      enableGroupStyle = false,
       ...nativeProps
-    }: TextInputProps,
+    }: InternalTextInputProps,
     ref?: React.Ref<TextInputHandles>
   ) => {
+    const { onFocus, onBlur, onChangeText, ...restOfNativeProps } = nativeProps;
     // Inline the simple getDisplayText function
     const displayText = (value !== undefined ? value : defaultValue) ?? '';
     const isEmptyValue = displayText.length === 0;
@@ -189,27 +200,28 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
     const handleFocus = useCallback(
       (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(true);
-        nativeProps.onFocus?.(event);
+        onFocus?.(event);
       },
-      [nativeProps]
+      [onFocus]
     );
 
     const handleBlur = useCallback(
       (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(false);
-        nativeProps.onBlur?.(event);
+        onBlur?.(event);
       },
-      [nativeProps]
+      [onBlur]
     );
 
     const handleChangeText = useCallback(
       (text: string) => {
-        nativeProps.onChangeText?.(text);
+        if (editable) {
+          onChangeText?.(text);
+        }
       },
-      [nativeProps]
+      [onChangeText, editable]
     );
 
-    // Simplified callbacks - these don't need memoization as they're stable
     const handleContainerPress = () => {
       innerTextInput.current?.focus();
     };
@@ -234,11 +246,9 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
       accessibilityState: {
         disabled: state === 'disabled' || state === 'readonly',
       },
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       accessibilityLabelledBy,
       allowFontScaling,
-      ...nativeProps,
+      ...restOfNativeProps,
       onFocus: handleFocus,
       onBlur: handleBlur,
       onChangeText: handleChangeText,
@@ -250,6 +260,7 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
         isFocused || label === undefined
           ? nativeProps.placeholder
           : EMPTY_PLACEHOLDER_VALUE,
+      accessibilityLabel,
     };
 
     // Create container style without background color
@@ -268,6 +279,9 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
         accessibilityState={{
           disabled: isDisabledOrReadonly,
         }}
+        themeFocused={isFocused}
+        themeHasError={!!error}
+        themeUseGroupStyleEnabled={enableGroupStyle}
         testID={testID}
       >
         {/*
@@ -296,14 +310,14 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
             />
           )}
           <InputRow
+            ref={innerTextInput}
             state={state}
-            isFocused={isFocused}
             prefix={prefix}
             variant={variant}
-            nativeInputProps={nativeInputProps}
             renderInputValue={renderInputValue}
-            ref={innerTextInput}
             isEmptyValue={isEmptyValue}
+            nativeInputProps={nativeInputProps}
+            shouldShowWhenUnfocused={!label}
           />
 
           <StyledBottomContainer>
@@ -324,4 +338,12 @@ const TextInput = forwardRef<TextInputHandles, TextInputProps>(
   }
 );
 
-export default TextInput;
+const TextInput = React.forwardRef<TextInputHandles, TextInputProps>(
+  (props, ref) => <InternalTextInput {...props} ref={ref} />
+);
+
+TextInput.displayName = 'TextInput';
+
+export default Object.assign(TextInput, {
+  Group,
+});

package/src/components/TextInput/types.ts

@@ -93,3 +93,10 @@ export interface TextInputProps extends NativeTextInputProps {
    */
   variant?: TextInputVariant;
 }
+
+export interface InternalTextInputProps extends TextInputProps {
+  /**
+   * Whether to use the group style.
+   */
+  enableGroupStyle?: boolean;
+}