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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "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.6",
+    "@hero-design/rn": "^8.103.7",
     "hero-editor": "^1.15.5"
   },
   "peerDependencies": {

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

@@ -4,6 +4,17 @@ exports[`DatePicker renders correctly (snapshot) 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-ios-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"
@@ -643,6 +654,17 @@ exports[`Dialog renders DatePickerAndroid when OS is android 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-android-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"
@@ -966,6 +988,17 @@ exports[`Dialog renders DatePickerIOS when OS is iOS 1`] = `
 <TouchableOpacity
   disabled={false}
   onPress={[Function]}
+  style={
+    [
+      [
+        {},
+      ],
+      undefined,
+    ]
+  }
+  testID="date-picker-ios-touchable-opacity"
+  themeGroupStyleEnabled={false}
+  themeHasError={false}
 >
   <View
     pointerEvents="none"

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

@@ -3,6 +3,9 @@ import { within } from '@testing-library/react-native';
 import theme from '../../../theme';
 import TextInput from '../../TextInput';
 import Select from '../../Select';
+import DatePicker from '../../DatePicker';
+import TimePicker from '../../TimePicker';
+import RichTextEditor from '../../RichTextEditor';
 import FormGroup from '..';
 import renderWithTheme from '../../../../testUtils/renderWithTheme';
 import { noop } from '../../../utils/functions';
@@ -179,30 +182,63 @@ describe('FormGroup', () => {
     expect(borderKeys).toHaveLength(0);
   });
 
-  it('renders enhanced TextInput/Select components with correct styles', () => {
+  it('renders all component types (TextInput, Select, Select.Multi, DatePicker, TimePicker, RichTextEditor) with correct styles', () => {
     const { getByTestId } = renderWithTheme(
       <FormGroup>
         <TextInput
-          label="Enhanced Text Input"
-          value="Enhanced Text Input"
-          testID="enhanced-text-input"
+          label="Text Input"
+          value="Text Input"
+          testID="mixed-text-input"
+        />
+        <DatePicker
+          label="Date Picker"
+          value={new Date('1995-12-17T00:00:00.000Z')}
+          testID="mixed-date-picker"
+          onChange={noop}
+          confirmLabel="Confirm"
+        />
+        <TimePicker
+          label="Time Picker"
+          value={new Date('December 17, 1995 03:24:00')}
+          testID="mixed-time-picker"
+          onChange={noop}
+          confirmLabel="Confirm"
+        />
+        <RichTextEditor
+          label="Rich Text Editor"
+          value={[{ type: 'paragraph', children: [{ text: 'Content' }] }]}
+          onChange={noop}
+          name="mixed-rich-text-editor"
+          testID="mixed-rich-text-editor"
         />
         <Select
-          label="Enhanced Select"
+          label="Single Select"
           value="option1"
-          testID="enhanced-select"
+          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>
     );
 
-    // Enhanced TextInput should have correct border styling
+    // TextInput should have top border radius removed (first component)
     expect(
-      within(getByTestId('enhanced-text-input'))
+      within(getByTestId('mixed-text-input'))
         .getByTestId('text-input-border')
         .props.style.flat()
     ).toEqual(
@@ -214,64 +250,41 @@ describe('FormGroup', () => {
       ])
     );
 
-    // Enhanced Select should have correct border styling
+    // DatePicker should have no border radius (middle component)
     expect(
-      within(getByTestId('enhanced-select'))
+      within(getByTestId('mixed-date-picker'))
         .getByTestId('text-input-border')
         .props.style.flat()
     ).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          borderTopLeftRadius: 0,
-          borderTopRightRadius: 0,
+          borderRadius: 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>
+    // TimePicker should have no border radius (middle component)
+    expect(
+      within(getByTestId('mixed-time-picker'))
+        .getByTestId('text-input-border')
+        .props.style.flat()
+    ).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderRadius: 0,
+        }),
+      ])
     );
 
-    // TextInput should have top border radius removed
+    // RichTextEditor should have no border radius (middle component)
     expect(
-      within(getByTestId('mixed-text-input'))
+      within(getByTestId('mixed-rich-text-editor'))
         .getByTestId('text-input-border')
         .props.style.flat()
     ).toEqual(
       expect.arrayContaining([
         expect.objectContaining({
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
+          borderRadius: 0,
         }),
       ])
     );
@@ -289,7 +302,7 @@ describe('FormGroup', () => {
       ])
     );
 
-    // Select.Multi should have bottom border radius removed
+    // Select.Multi should have bottom border radius removed (last component)
     expect(
       within(getByTestId('mixed-select-multi'))
         .getByTestId('text-input-border')

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -1,12 +1,15 @@
+import type { ComponentType, ReactElement } from 'react';
 import React, { useMemo } from 'react';
-import type { ComponentType, ReactElement, Ref } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
 
 import { plainSerializer } from 'hero-editor';
-import TextInput from '../TextInput';
+import { InternalTextInput } from '../TextInput';
 import RichTextEditorInput from './RichTextEditorInput';
-import type { EditorValue, TextUnit } from './types';
 import { StyledWrapper } from './StyledRichTextEditor';
+import type {
+  EditorValue,
+  InternalRichTextEditorProps,
+  TextUnit,
+} from './types';
 
 export interface RichTextEditorRef {
   requestBlur: VoidFunction;
@@ -15,22 +18,6 @@ export interface RichTextEditorRef {
   setReadOnly: (readOnly: boolean) => void;
 }
 
-export interface RichTextEditorProps {
-  autoFocus?: boolean;
-  error?: string;
-  value?: EditorValue;
-  name: string;
-  onChange: (data: EditorValue) => void;
-  onCursorChange?: (params: { position: { top: number } }) => void;
-  placeholder?: string;
-  style?: StyleProp<ViewStyle>;
-  label: string;
-  helpText?: string;
-  required?: boolean;
-  testID?: string;
-  forwardedRef?: Ref<RichTextEditorRef>;
-}
-
 const defaultValue: EditorValue = [
   {
     type: 'paragraph',
@@ -38,7 +25,7 @@ const defaultValue: EditorValue = [
   },
 ];
 
-const RichTextEditor: ComponentType<RichTextEditorProps> = ({
+const RichTextEditor: ComponentType<InternalRichTextEditorProps> = ({
   autoFocus = true,
   name,
   placeholder = '',
@@ -46,18 +33,20 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
   onCursorChange,
   error = '',
   style = {},
+  textStyle,
   label,
   helpText,
   required,
   testID,
   forwardedRef,
   value = defaultValue,
-}: RichTextEditorProps): ReactElement => {
+  groupStyleEnabled = false,
+}: InternalRichTextEditorProps): ReactElement => {
   const plain = useMemo(() => plainSerializer(value), [value]);
 
   return (
-    <StyledWrapper>
-      <TextInput
+    <StyledWrapper groupStyleEnabled={groupStyleEnabled}>
+      <InternalTextInput
         autoFocus={autoFocus}
         error={error}
         label={label}
@@ -66,7 +55,9 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
         placeholder={placeholder}
         value={plain}
         style={style}
+        textStyle={textStyle}
         helpText={helpText}
+        groupStyleEnabled={groupStyleEnabled}
         renderInputValue={(inputProps, ref) => (
           <RichTextEditorInput
             {...inputProps}

package/src/components/RichTextEditor/StyledRichTextEditor.tsx

@@ -2,9 +2,15 @@ import { styled } from '@hero-design/rn';
 import { View } from 'react-native';
 import { WebView } from 'react-native-webview';
 
-export const StyledWrapper = styled(View)(({ theme }) => ({
-  marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
-}));
+export const StyledWrapper = styled(View)<{ groupStyleEnabled?: boolean }>(
+  ({ theme, groupStyleEnabled }) => ({
+    ...(groupStyleEnabled
+      ? {}
+      : {
+          marginBottom: theme.__hd__.richTextEditor.space.wrapperMarginBottom,
+        }),
+  })
+);
 
 export const StyledWebView = styled(WebView)(({ theme }) => ({
   minHeight: theme.__hd__.richTextEditor.sizes.editorMinHeight,

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

@@ -0,0 +1,81 @@
+import React from 'react';
+import RichTextEditor from '../RichTextEditor';
+import renderWithTheme from '../../../../testUtils/renderWithTheme';
+
+const initialValue = [
+  { type: 'paragraph', children: [{ text: 'Hello world' }] },
+];
+
+describe('RichTextEditor zIndex', () => {
+  it('applies correct zIndex logic when groupStyleEnabled is true', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        groupStyleEnabled
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Initially should have zIndex 0 (normal state)
+    expect(container.props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          zIndex: 0,
+        }),
+      ])
+    );
+  });
+
+  it('applies correct zIndex when has error', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        error="This is an error"
+        groupStyleEnabled
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Should have zIndex 1 when has error (medium priority)
+    expect(container.props.style.flat()).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          zIndex: 1,
+        }),
+      ])
+    );
+  });
+
+  it('does not apply zIndex when groupStyleEnabled is false', () => {
+    const { getByTestId } = renderWithTheme(
+      <RichTextEditor
+        label="Test Editor"
+        value={initialValue}
+        onChange={jest.fn()}
+        name="test-editor"
+        testID="rich-text-editor"
+        groupStyleEnabled={false}
+        error="This is an error"
+      />
+    );
+
+    const container = getByTestId('rich-text-editor');
+
+    // Should not have zIndex applied when groupStyleEnabled is false
+    const containerStyle = container.props.style.flat();
+    const hasZIndex = containerStyle.some(
+      (style: Record<string, unknown>) => style && style.zIndex !== undefined
+    );
+    expect(hasZIndex).toBe(false);
+  });
+});

package/src/components/RichTextEditor/index.tsx

@@ -1,9 +1,7 @@
 import React, { forwardRef } from 'react';
-import RichTextEditor, {
-  RichTextEditorProps,
-  RichTextEditorRef,
-} from './RichTextEditor';
+import RichTextEditor, { RichTextEditorRef } from './RichTextEditor';
 import MentionList from './MentionList';
+import type { RichTextEditorProps } from './types';
 
 import Toolbar from './EditorToolbar';
 

package/src/components/RichTextEditor/types.ts

@@ -1,4 +1,4 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 import { Ref } from 'react';
 import type { TextInputProps } from '../TextInput';
@@ -83,5 +83,16 @@ export interface RichTextEditorProps {
 }
 
 export interface InternalRichTextEditorProps extends RichTextEditorProps {
+  /**
+   * Input text style
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * Whether the component is used within a FormGroup
+   */
+  groupStyleEnabled?: boolean;
+  /**
+   * Custom TextInput component to be used instead of the default one
+   */
   TextInputComponent?: React.ComponentType<TextInputProps>;
 }

package/src/components/TextInput/index.tsx

@@ -28,7 +28,6 @@ import type {
   TextInputProps,
   TextInputRef,
 } from './types';
-import Group from './Group';
 
 export type {
   TextInputHandles,
@@ -356,6 +355,4 @@ const TextInput = React.forwardRef<TextInputHandles, TextInputProps>(
 
 TextInput.displayName = 'TextInput';
 
-export default Object.assign(TextInput, {
-  Group,
-});
+export default TextInput;