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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/rn": "^8.103.5",
+    "@hero-design/rn": "^8.103.6",
     "hero-editor": "^1.15.5"
   },
   "peerDependencies": {

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

@@ -32,8 +32,8 @@ exports[`DatePicker renders correctly (snapshot) 1`] = `
         ]
       }
       themeFocused={false}
+      themeGroupStyleEnabled={false}
       themeHasError={false}
-      themeUseGroupStyleEnabled={false}
     >
       <View
         pointerEvents="none"
@@ -671,8 +671,8 @@ exports[`Dialog renders DatePickerAndroid when OS is android 1`] = `
         ]
       }
       themeFocused={false}
+      themeGroupStyleEnabled={false}
       themeHasError={false}
-      themeUseGroupStyleEnabled={false}
     >
       <View
         pointerEvents="none"
@@ -994,8 +994,8 @@ exports[`Dialog renders DatePickerIOS when OS is iOS 1`] = `
         ]
       }
       themeFocused={false}
+      themeGroupStyleEnabled={false}
       themeHasError={false}
-      themeUseGroupStyleEnabled={false}
     >
       <View
         pointerEvents="none"

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

@@ -37,8 +37,8 @@ exports[`FormGroup should render: xxx 1`] = `
       ]
     }
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={false}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"
@@ -199,6 +199,14 @@ exports[`FormGroup should render: xxx 1`] = `
             }
             allowFontScaling={false}
             editable={true}
+            inputProps={
+              {
+                "textStyle": {
+                  "borderBottomLeftRadius": 0,
+                  "borderBottomRightRadius": 0,
+                },
+              }
+            }
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
@@ -290,8 +298,8 @@ exports[`FormGroup should render: xxx 1`] = `
     }
     testID="text-input-2"
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={true}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"
@@ -480,6 +488,13 @@ exports[`FormGroup should render: xxx 1`] = `
             }
             allowFontScaling={false}
             editable={true}
+            inputProps={
+              {
+                "textStyle": {
+                  "borderRadius": 0,
+                },
+              }
+            }
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}
@@ -650,8 +665,8 @@ exports[`FormGroup should render: xxx 1`] = `
       ]
     }
     themeFocused={false}
+    themeGroupStyleEnabled={true}
     themeHasError={false}
-    themeUseGroupStyleEnabled={true}
   >
     <View
       pointerEvents="none"
@@ -812,6 +827,14 @@ exports[`FormGroup should render: xxx 1`] = `
             }
             allowFontScaling={false}
             editable={true}
+            inputProps={
+              {
+                "textStyle": {
+                  "borderTopLeftRadius": 0,
+                  "borderTopRightRadius": 0,
+                },
+              }
+            }
             onBlur={[Function]}
             onChangeText={[Function]}
             onFocus={[Function]}

package/src/components/FormGroup/__tests__/index.spec.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
 import { within } from '@testing-library/react-native';
-import renderWithTheme from '../../../../testUtils/renderWithTheme';
-import FormGroup from '..';
-import TextInput from '../../TextInput';
 import theme from '../../../theme';
+import TextInput from '../../TextInput';
+import Select from '../../Select';
+import FormGroup from '..';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+import { noop } from '../../../utils/functions';
 
 describe('FormGroup', () => {
   it('should render', () => {
@@ -176,4 +178,129 @@ describe('FormGroup', () => {
     );
     expect(borderKeys).toHaveLength(0);
   });
+
+  it('renders enhanced TextInput/Select components with correct styles', () => {
+    const { getByTestId } = renderWithTheme(
+      <FormGroup>
+        <TextInput
+          label="Enhanced Text Input"
+          value="Enhanced Text Input"
+          testID="enhanced-text-input"
+        />
+        <Select
+          label="Enhanced Select"
+          value="option1"
+          testID="enhanced-select"
+          onConfirm={noop}
+          options={[
+            { text: 'Option 1', value: 'option1' },
+            { text: 'Option 2', value: 'option2' },
+          ]}
+        />
+      </FormGroup>
+    );
+
+    // Enhanced TextInput should have correct border styling
+    expect(
+      within(getByTestId('enhanced-text-input'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
+      ])
+    );
+
+    // Enhanced Select should have correct border styling
+    expect(
+      within(getByTestId('enhanced-select'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        }),
+      ])
+    );
+  });
+
+  it('renders mixed components (TextInput, Select, Select.Multi) with correct styles', () => {
+    const { getByTestId } = renderWithTheme(
+      <FormGroup>
+        <TextInput
+          label="Text Input"
+          value="Text Input"
+          testID="mixed-text-input"
+        />
+        <Select
+          label="Single Select"
+          value="option1"
+          testID="mixed-select"
+          onConfirm={noop}
+          options={[
+            { text: 'Option 1', value: 'option1' },
+            { text: 'Option 2', value: 'option2' },
+          ]}
+        />
+        <Select.Multi
+          label="Multi Select"
+          value={['option1', 'option2']}
+          testID="mixed-select-multi"
+          onConfirm={noop}
+          footerLabel="Confirm"
+          options={[
+            { text: 'Option 1', value: 'option1' },
+            { text: 'Option 2', value: 'option2' },
+            { text: 'Option 3', value: 'option3' },
+          ]}
+        />
+      </FormGroup>
+    );
+
+    // TextInput should have top border radius removed
+    expect(
+      within(getByTestId('mixed-text-input'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderBottomLeftRadius: 0,
+          borderBottomRightRadius: 0,
+        }),
+      ])
+    );
+
+    // Select should have no border radius (middle component)
+    expect(
+      within(getByTestId('mixed-select'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
+    );
+
+    // Select.Multi should have bottom border radius removed
+    expect(
+      within(getByTestId('mixed-select-multi'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderTopLeftRadius: 0,
+          borderTopRightRadius: 0,
+        }),
+      ])
+    );
+  });
 });

package/src/components/FormGroup/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useMemo } from 'react';
+import React, { ReactElement, ReactNode, useMemo } from 'react';
 import { StyleProp, StyleSheet, ViewProps, ViewStyle } from 'react-native';
 import { Box, useTheme } from '@hero-design/rn';
 import { generateBorderStyle, generateMarginStyle } from './utils';
@@ -6,7 +6,7 @@ import { generateBorderStyle, generateMarginStyle } from './utils';
 export interface FormGroupProps extends ViewProps {
   /**
    * The children of the FormGroup. In order for the group styling to work,
-   * they must be either HD form components (TextInput, Select, Pickers,...) or enhanced HD form components
+   * they must be either HD form components (TextInput, Select, Pickers,...) or enhanced HD input components
    * that supports the corresponding interface.
    *
    * Example:
@@ -33,15 +33,15 @@ export interface FormGroupProps extends ViewProps {
 const FormGroup = ({ children, style, testID, ...props }: FormGroupProps) => {
   const theme = useTheme();
   const childrenArray = React.Children.toArray(children).filter(
-    React.isValidElement
+    (child): child is ReactElement => React.isValidElement(child)
   );
 
   // If there are multiple children, inject styles to group them together.
   const groupedChildren = useMemo(
     () =>
       childrenArray.map((child, index) => {
-        const rawChildStyle = (child as React.ReactElement).props.style;
-        const rawChildTextStyle = (child as React.ReactElement).props.textStyle;
+        const rawChildStyle = child.props.style;
+        const rawChildTextStyle = child.props.textStyle;
 
         // Handle array styles by flattening them first
         const childStyle = StyleSheet.flatten(rawChildStyle);
@@ -77,11 +77,20 @@ const FormGroup = ({ children, style, testID, ...props }: FormGroupProps) => {
           }),
         };
 
-        return React.cloneElement(child as React.ReactElement, {
+        return React.cloneElement(child, {
           style: mergedStyle,
           textStyle: mergedTextStyle,
           // Internal text input prop to allow for different styling
-          enableGroupStyle: true,
+          groupStyleEnabled: true,
+
+          // For HD components that uses FormGroup
+          inputProps: {
+            ...child.props.inputProps,
+            textStyle: {
+              ...child.props.inputProps?.textStyle,
+              ...mergedTextStyle,
+            },
+          },
         });
       }),
     [childrenArray, theme]

package/src/components/RichTextEditor/RichTextEditorInput.tsx

@@ -11,6 +11,7 @@ import React, {
 import type { Ref } from 'react';
 import { WebView } from 'react-native-webview';
 
+import { View } from 'react-native';
 import { isAndroid } from '../../utils/helpers';
 import { emitter } from './EditorEvent';
 import * as Events from './utils/events';
@@ -268,17 +269,22 @@ const RichTextEditorInput = forwardRef<
     );
 
     return (
-      <StyledWebView
-        ref={webview}
-        testID="webview"
-        originWhitelist={['*']}
-        height={webviewHeight}
-        source={{ html }}
-        onMessage={onMessage}
-        scrollEnabled={false}
-        hideKeyboardAccessoryView
-        keyboardDisplayRequiresUserAction={false}
-      />
+      <View
+        style={{
+          height: webviewHeight,
+        }}
+      >
+        <StyledWebView
+          ref={webview}
+          testID="webview"
+          originWhitelist={['*']}
+          source={{ html }}
+          onMessage={onMessage}
+          scrollEnabled={false}
+          hideKeyboardAccessoryView
+          keyboardDisplayRequiresUserAction={false}
+        />
+      </View>
     );
   }
 );

package/src/components/RichTextEditor/StyledRichTextEditor.tsx

@@ -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/Select/__tests__/__snapshots__/index.spec.tsx.snap

@@ -7,6 +7,17 @@ exports[`MultiSelect renders correctly (snapshot) 1`] = `
   >
     <TouchableOpacity
       onPress={[Function]}
+      style={
+        [
+          [
+            {},
+          ],
+          undefined,
+        ]
+      }
+      testID="multi-select-touchable-opacity"
+      themeGroupStyleEnabled={false}
+      themeHasError={false}
     >
       <View
         pointerEvents="none"
@@ -34,8 +45,8 @@ exports[`MultiSelect renders correctly (snapshot) 1`] = `
             ]
           }
           themeFocused={false}
+          themeGroupStyleEnabled={false}
           themeHasError={false}
-          themeUseGroupStyleEnabled={false}
         >
           <View
             pointerEvents="none"
@@ -693,6 +704,17 @@ exports[`Select renders correctly (snapshot) 1`] = `
   >
     <TouchableOpacity
       onPress={[Function]}
+      style={
+        [
+          [
+            {},
+          ],
+          undefined,
+        ]
+      }
+      testID="single-select-touchable-opacity"
+      themeGroupStyleEnabled={false}
+      themeHasError={false}
     >
       <View
         pointerEvents="none"
@@ -720,8 +742,8 @@ exports[`Select renders correctly (snapshot) 1`] = `
             ]
           }
           themeFocused={false}
+          themeGroupStyleEnabled={false}
           themeHasError={false}
-          themeUseGroupStyleEnabled={false}
         >
           <View
             pointerEvents="none"

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/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 }),
   }),
 }));