@hero-design/rn-work-uikit 1.3.1 → 1.5.0

package/src/components/Select/index.tsx

@@ -1,23 +1,24 @@
-import React from 'react';
 import {
   Select as InternalSelect,
   MultiSelectProps,
-  SingleSelectProps,
   SelectOptionType,
+  SingleSelectProps,
 } from '@hero-design/rn';
+import React from 'react';
 import TextInput from '../TextInput';
 
-function Select<V, T extends SelectOptionType<V> = SelectOptionType<V>>(
+const Select = <V, T extends SelectOptionType<V> = SelectOptionType<V>>(
   props: SingleSelectProps<V, T>
-) {
+) => {
   return <InternalSelect {...props} TextInputComponent={TextInput} />;
-}
+};
 
-Select.Multi = function <
-  V,
-  T extends SelectOptionType<V> = SelectOptionType<V>
->(props: MultiSelectProps<V, T>) {
+const MultiSelect = <V, T extends SelectOptionType<V> = SelectOptionType<V>>(
+  props: MultiSelectProps<V, T>
+) => {
   return <InternalSelect.Multi {...props} TextInputComponent={TextInput} />;
 };
 
-export default Select;
+export default Object.assign(Select, {
+  Multi: MultiSelect,
+});

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

@@ -37,8 +37,8 @@ exports[`TextInputGroup should render: xxx 1`] = `
       ]
     }
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={false}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"
@@ -290,8 +290,8 @@ exports[`TextInputGroup should render: xxx 1`] = `
     }
     testID="text-input-2"
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={true}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"
@@ -650,8 +650,8 @@ exports[`TextInputGroup should render: xxx 1`] = `
       ]
     }
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={false}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"

package/src/components/TextInput/Group/index.tsx

@@ -2,6 +2,7 @@ import React, { ReactNode, useMemo } from 'react';
 import { StyleProp, StyleSheet, ViewProps, ViewStyle } from 'react-native';
 import { Box, useTheme } from '@hero-design/rn';
 import { generateBorderStyle, generateMarginStyle } from './utils';
+import { useDeprecation } from '../../../utils/hooks';
 
 export interface TextInputGroupProps extends ViewProps {
   /**
@@ -36,6 +37,10 @@ const TextInputGroup = ({
   testID,
   ...props
 }: TextInputGroupProps) => {
+  useDeprecation(
+    'TextInput.Group is deprecated. Please use FormGroup instead.',
+    true
+  );
   const theme = useTheme();
   const childrenArray = React.Children.toArray(children).filter(
     React.isValidElement
@@ -86,7 +91,7 @@ const TextInputGroup = ({
           style: mergedStyle,
           textStyle: mergedTextStyle,
           // Internal text input prop to allow for different styling
-          enableGroupStyle: true,
+          groupStyleEnabled: true,
         });
       }),
     [childrenArray, theme]

package/src/components/TextInput/InputComponent.tsx

@@ -1,9 +1,52 @@
-import React from 'react';
-import { TextInput as RNTextInput } from 'react-native';
-import type { TextInputProps as NativeTextInputProps } from 'react-native';
+import React, { useImperativeHandle, useRef } from 'react';
+import {
+  TextInput as RNTextInput,
+  TextInputProps as RNTextInputProps,
+} from 'react-native';
 import { StyledTextInput } from './StyledTextInput';
 import { useTheme } from '../../theme';
-import type { TextInputVariant } from './types';
+import type {
+  NativeTextInputProps,
+  TextInputRef,
+  TextInputVariant,
+} from './types';
+
+interface DefaultTextInputProps {
+  variant: TextInputVariant;
+  /** Native TextInput props */
+  nativeInputProps: NativeTextInputProps;
+}
+
+const DefaultTextInput = React.forwardRef<TextInputRef, DefaultTextInputProps>(
+  ({ variant, nativeInputProps }, ref) => {
+    const theme = useTheme();
+    const inputRef = useRef<RNTextInput>(null);
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: () => inputRef.current?.focus(),
+        blur: () => inputRef.current?.blur(),
+        clear: () => inputRef.current?.clear(),
+        isFocused: () => inputRef.current?.isFocused() ?? false,
+        setNativeProps: (props: RNTextInputProps) => {
+          inputRef.current?.setNativeProps(props);
+        },
+      }),
+      []
+    );
+
+    // Default styled input with theme and variant support
+    return (
+      <StyledTextInput
+        {...nativeInputProps}
+        themeVariant={variant}
+        multiline={variant === 'textarea' || nativeInputProps.multiline}
+        ref={inputRef}
+        placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
+      />
+    );
+  }
+);
 
 export interface InputComponentProps {
   /** Input type ('text' or 'textarea') */
@@ -11,7 +54,10 @@ export interface InputComponentProps {
   /** All props passed to the underlying TextInput */
   nativeInputProps: NativeTextInputProps;
   /** Optional custom input renderer function */
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.ForwardedRef<TextInputRef>
+  ) => React.ReactNode;
 }
 
 /**
@@ -36,21 +82,16 @@ export interface InputComponentProps {
  *
  * @param props - The component props (see InputComponentProps interface for details)
  */
-const InputComponent = React.forwardRef<RNTextInput, InputComponentProps>(
+const InputComponent = React.forwardRef<TextInputRef, InputComponentProps>(
   ({ variant, nativeInputProps, renderInputValue }, ref) => {
-    const theme = useTheme();
-
-    return renderInputValue ? (
-      // Custom input renderer provided
-      <>{renderInputValue(nativeInputProps)}</>
-    ) : (
-      // Default styled input with theme and variant support
-      <StyledTextInput
-        {...nativeInputProps}
-        themeVariant={variant}
-        multiline={variant === 'textarea' || nativeInputProps.multiline}
+    if (renderInputValue) {
+      return <>{renderInputValue({ ...nativeInputProps }, ref)}</>;
+    }
+    return (
+      <DefaultTextInput
+        variant={variant}
+        nativeInputProps={nativeInputProps}
         ref={ref}
-        placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
       />
     );
   }

package/src/components/TextInput/InputRow.tsx

@@ -1,8 +1,7 @@
 import React, { useCallback, useState } from 'react';
-import { TextInput as RNTextInput, View } from 'react-native';
+import { View } from 'react-native';
 import type {
   NativeSyntheticEvent,
-  TextInputProps as NativeTextInputProps,
   TextInputFocusEventData,
 } from 'react-native';
 import { IconName } from '@hero-design/rn';
@@ -10,7 +9,11 @@ import { StyledInputRow } from './StyledTextInput';
 import PrefixComponent from './PrefixComponent';
 import InputComponent from './InputComponent';
 import type { State } from './StyledTextInput';
-import type { TextInputVariant } from './types';
+import type {
+  NativeTextInputProps,
+  TextInputRef,
+  TextInputVariant,
+} from './types';
 
 interface InputRowProps {
   /** Current state of the input (focused, error, disabled, etc.) */
@@ -22,7 +25,10 @@ interface InputRowProps {
   /** Native TextInput props passed to the input component */
   nativeInputProps: NativeTextInputProps;
   /** Optional custom render function for input value */
-  renderInputValue?: (inputProps: NativeTextInputProps) => React.ReactNode;
+  renderInputValue?: (
+    inputProps: NativeTextInputProps,
+    ref?: React.ForwardedRef<TextInputRef>
+  ) => React.ReactNode;
   /** Whether the input value is empty */
   isEmptyValue: boolean;
   /** Whether the input should be visible when not focused and empty. Defaults to true. */
@@ -52,7 +58,7 @@ interface InputRowProps {
  * 1. Conditionally visible prefix component (icon or custom element)
  * 2. Conditionally visible input component (TextInput or custom rendered input)
  */
-const InputRow = React.forwardRef<RNTextInput, InputRowProps>(
+const InputRow = React.forwardRef<TextInputRef, InputRowProps>(
   (
     {
       state,
@@ -75,7 +81,7 @@ const InputRow = React.forwardRef<RNTextInput, InputRowProps>(
 
     // Simplified callback functions (removed unnecessary memoization for simple cases)
     const handleFocus = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(true);
         nativeInputProps.onFocus?.(event);
       },
@@ -83,7 +89,7 @@ const InputRow = React.forwardRef<RNTextInput, InputRowProps>(
     );
 
     const handleBlur = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(false);
         nativeInputProps.onBlur?.(event);
       },

package/src/components/TextInput/StyledTextInput.tsx

@@ -26,14 +26,14 @@ const getZIndexByState = ({
 const StyledContainer = styled(Pressable)<{
   themeFocused: boolean;
   themeHasError: boolean;
-  themeUseGroupStyleEnabled: boolean;
-}>(({ theme, themeFocused, themeHasError, themeUseGroupStyleEnabled }) => ({
+  themeGroupStyleEnabled: boolean;
+}>(({ theme, themeFocused, themeHasError, themeGroupStyleEnabled }) => ({
   width: '100%',
   flexDirection: 'row',
   paddingHorizontal: theme.__hd__.textInput.space.containerPadding,
   minHeight: theme.__hd__.textInput.sizes.containerMinHeight,
   marginTop: theme.__hd__.textInput.space.containerMarginTop,
-  ...(themeUseGroupStyleEnabled && {
+  ...(themeGroupStyleEnabled && {
     zIndex: getZIndexByState({ themeFocused, themeHasError }),
   }),
 }));

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

@@ -24,8 +24,8 @@ exports[`TextInput when user applies custom styling should respect user-provided
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -380,8 +380,8 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -659,8 +659,8 @@ exports[`TextInput when user encounters a disabled field should display content
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -937,8 +937,8 @@ exports[`TextInput when user encounters a read-only field should display content
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -1299,8 +1299,8 @@ exports[`TextInput when user has entered text should show the input content and
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -1661,8 +1661,8 @@ exports[`TextInput when user interacts with placeholder text starting from empty
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -1980,8 +1980,8 @@ exports[`TextInput when user needs programmatic control should provide ref metho
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -2258,8 +2258,8 @@ exports[`TextInput when user provides default values starting with pre-filled co
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -2613,8 +2613,8 @@ exports[`TextInput when user provides default values when both default and contr
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -2969,8 +2969,8 @@ exports[`TextInput when user sees a loading state should show loading indicator
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -3350,8 +3350,8 @@ exports[`TextInput when user sees a required field should indicate the field is
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -3682,8 +3682,8 @@ exports[`TextInput when user sees a textarea with character count should display
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -4081,8 +4081,8 @@ exports[`TextInput when user sees a textarea with character count should hide ch
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -4447,8 +4447,8 @@ exports[`TextInput when user sees an empty input field should display label and
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -4808,8 +4808,8 @@ exports[`TextInput when user sees an error state should display error message to
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={true}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -5185,8 +5185,8 @@ exports[`TextInput when user sees helper text should display guidance text to as
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"
@@ -5504,8 +5504,8 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
     ]
   }
   themeFocused={false}
+  themeGroupStyleEnabled={false}
   themeHasError={false}
-  themeUseGroupStyleEnabled={false}
 >
   <View
     pointerEvents="none"

package/src/components/TextInput/index.tsx

@@ -1,11 +1,11 @@
 import React, { forwardRef, useCallback } from 'react';
-import { StyleSheet, TextInput as RNTextInput } from 'react-native';
+import { StyleSheet } from 'react-native';
 import type {
-  TextInputProps as NativeTextInputProps,
   StyleProp,
   ViewStyle,
   NativeSyntheticEvent,
   TextInputFocusEventData,
+  ColorValue,
 } from 'react-native';
 import {
   StyledInputWrapper,
@@ -23,8 +23,10 @@ import FloatingLabel from './FloatingLabel';
 import InputRow from './InputRow';
 import type {
   InternalTextInputProps,
+  NativeTextInputProps,
   TextInputHandles,
   TextInputProps,
+  TextInputRef,
 } from './types';
 import Group from './Group';
 
@@ -89,6 +91,17 @@ const extractBorderStyles = (style: StyleProp<ViewStyle>) => {
   return borderStyles;
 };
 
+// Create container style without background color using a helper function
+const getContainerStyle = (
+  style: StyleProp<ViewStyle>,
+  customBackgroundColor?: ColorValue
+) => {
+  const flattenedStyle = style ? { ...StyleSheet.flatten(style) } : {};
+  if (customBackgroundColor) {
+    delete flattenedStyle.backgroundColor;
+  }
+  return flattenedStyle;
+};
 /**
  * TextInput Layout Structure:
  *
@@ -149,7 +162,7 @@ export const InternalTextInput = forwardRef<
       allowFontScaling = false,
       variant = 'text',
       accessibilityLabel,
-      enableGroupStyle = false,
+      groupStyleEnabled = false,
       ...nativeProps
     }: InternalTextInputProps,
     ref?: React.Ref<TextInputHandles>
@@ -171,7 +184,7 @@ export const InternalTextInput = forwardRef<
 
     const theme = useTheme();
 
-    const innerTextInput = React.useRef<RNTextInput | null>(null);
+    const innerTextInput = React.useRef<TextInputRef | null>(null);
     React.useImperativeHandle(
       ref,
       () => ({
@@ -182,7 +195,7 @@ export const InternalTextInput = forwardRef<
         },
         clear: () => innerTextInput.current?.clear(),
         setNativeProps: (args: NativeTextInputProps) =>
-          innerTextInput.current?.setNativeProps(args),
+          innerTextInput.current?.setNativeProps?.(args),
         isFocused: () => innerTextInput.current?.isFocused() || false,
         blur: () => innerTextInput.current?.blur(),
       }),
@@ -198,7 +211,7 @@ export const InternalTextInput = forwardRef<
 
     // Simplified callback functions (removed unnecessary memoization for simple cases)
     const handleFocus = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(true);
         onFocus?.(event);
       },
@@ -206,7 +219,7 @@ export const InternalTextInput = forwardRef<
     );
 
     const handleBlur = useCallback(
-      (event: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      (event?: NativeSyntheticEvent<TextInputFocusEventData>) => {
         setIsFocused(false);
         onBlur?.(event);
       },
@@ -265,11 +278,7 @@ export const InternalTextInput = forwardRef<
       accessibilityLabel,
     };
 
-    // Create container style without background color
-    const containerStyle = style ? { ...StyleSheet.flatten(style) } : {};
-    if (customBackgroundColor) {
-      delete containerStyle.backgroundColor;
-    }
+    const containerStyle = getContainerStyle(style, customBackgroundColor);
 
     const isDisabledOrReadonly = state === 'disabled' || state === 'readonly';
 
@@ -283,7 +292,7 @@ export const InternalTextInput = forwardRef<
         }}
         themeFocused={isFocused}
         themeHasError={!!error}
-        themeUseGroupStyleEnabled={enableGroupStyle}
+        themeGroupStyleEnabled={groupStyleEnabled}
         testID={testID}
       >
         {/*

package/src/components/TextInput/types.ts

@@ -1,9 +1,11 @@
 import type {
-  TextInputProps as NativeTextInputProps,
+  TextInputProps as RNTextInputProps,
   StyleProp,
   ViewStyle,
   TextStyle,
   TextInput as RNTextInput,
+  NativeSyntheticEvent,
+  TextInputFocusEventData,
 } from 'react-native';
 import type { IconName } from '@hero-design/rn';
 
@@ -14,7 +16,27 @@ export type TextInputHandles = Pick<
 
 export type TextInputVariant = 'text' | 'textarea';
 
-export interface TextInputProps extends NativeTextInputProps {
+export 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 type TextInputProps = NativeTextInputProps & {
   /**
    * Field label.
    */
@@ -83,7 +105,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.
    */
@@ -92,11 +117,11 @@ export interface TextInputProps extends NativeTextInputProps {
    * Component variant.
    */
   variant?: TextInputVariant;
-}
+};
 
 export interface InternalTextInputProps extends TextInputProps {
   /**
    * Whether to use the group style.
    */
-  enableGroupStyle?: boolean;
+  groupStyleEnabled?: boolean;
 }

package/src/index.ts

@@ -3,6 +3,8 @@ import TextInput from './components/TextInput';
 import Select from './components/Select';
 import DatePicker from './components/DatePicker';
 import TimePicker from './components/TimePicker';
+import FormGroup from './components/FormGroup';
+import RichTextEditor from './components/RichTextEditor';
 
 export * from '@hero-design/rn';
 
@@ -17,4 +19,4 @@ export {
 } from './theme';
 
 export { default as theme } from './theme';
-export { TextInput, Select, DatePicker, TimePicker };
+export { TextInput, Select, DatePicker, TimePicker, FormGroup, RichTextEditor };

package/src/utils/hooks.ts

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+
+export const useDeprecation = (message: string, cond = true) => {
+  useEffect(() => {
+    // eslint-disable-next-line no-console
+    if (cond) {
+      console.warn(message);
+    }
+  }, [message, cond]);
+};