@hero-design/rn-work-uikit 1.7.1 → 1.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn-work-uikit",
-  "version": "1.7.1",
+  "version": "1.7.3",
   "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.106.1",
+    "@hero-design/rn": "^8.108.0",
     "hero-editor": "^1.16.0"
   },
   "peerDependencies": {
@@ -109,7 +109,7 @@
     "react-native-safe-area-context": "4.12.0",
     "react-native-svg": "15.8.0",
     "react-native-vector-icons": "^9.1.0",
-    "react-native-webview": "13.10.3",
+    "react-native-webview": "^13.16.0",
     "react-test-renderer": "18.2.0",
     "rollup": "^4.24.3",
     "rollup-plugin-copy": "^3.5.0",

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

@@ -235,7 +235,7 @@ exports[`DatePicker renders correctly (snapshot) 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
-              placeholderTextColor="#4d6265"
+              placeholderTextColor="#001f23"
               style={
                 [
                   [
@@ -887,7 +887,7 @@ exports[`Dialog renders DatePickerAndroid when OS is android 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
-              placeholderTextColor="#4d6265"
+              placeholderTextColor="#001f23"
               style={
                 [
                   [
@@ -1221,7 +1221,7 @@ exports[`Dialog renders DatePickerIOS when OS is iOS 1`] = `
               onChangeText={[Function]}
               onFocus={[Function]}
               placeholder=" "
-              placeholderTextColor="#4d6265"
+              placeholderTextColor="#001f23"
               style={
                 [
                   [

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

@@ -211,7 +211,7 @@ exports[`FormGroup should render: xxx 1`] = `
             onChangeText={[Function]}
             onFocus={[Function]}
             placeholder=" "
-            placeholderTextColor="#4d6265"
+            placeholderTextColor="#001f23"
             style={
               [
                 [
@@ -499,7 +499,7 @@ exports[`FormGroup should render: xxx 1`] = `
             onChangeText={[Function]}
             onFocus={[Function]}
             placeholder=" "
-            placeholderTextColor="#4d6265"
+            placeholderTextColor="#001f23"
             style={
               [
                 [
@@ -839,7 +839,7 @@ exports[`FormGroup should render: xxx 1`] = `
             onChangeText={[Function]}
             onFocus={[Function]}
             placeholder=" "
-            placeholderTextColor="#4d6265"
+            placeholderTextColor="#001f23"
             style={
               [
                 [

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

@@ -238,7 +238,7 @@ exports[`MultiSelect renders correctly (snapshot) 1`] = `
                   onChangeText={[Function]}
                   onFocus={[Function]}
                   placeholder=" "
-                  placeholderTextColor="#4d6265"
+                  placeholderTextColor="#001f23"
                   pointerEvents="none"
                   style={
                     [
@@ -937,7 +937,7 @@ exports[`Select renders correctly (snapshot) 1`] = `
                   onChangeText={[Function]}
                   onFocus={[Function]}
                   placeholder=" "
-                  placeholderTextColor="#4d6265"
+                  placeholderTextColor="#001f23"
                   pointerEvents="none"
                   style={
                     [

package/src/components/TextInput/InputComponent.tsx

@@ -3,6 +3,7 @@ import type {
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
 } from 'react-native';
+import type { State } from '@hero-design/rn/src/components/TextInput/StyledTextInput';
 import { StyledTextInput } from './StyledTextInput';
 import { useTheme } from '../../theme';
 import type {
@@ -15,10 +16,11 @@ interface DefaultTextInputProps {
   variant: TextInputVariant;
   /** Native TextInput props */
   nativeInputProps: NativeTextInputProps;
+  state: State;
 }
 
 const DefaultTextInput = React.forwardRef<TextInputRef, DefaultTextInputProps>(
-  ({ variant, nativeInputProps }, ref) => {
+  ({ variant, nativeInputProps, state }, ref) => {
     const theme = useTheme();
     const inputRef = useRef<RNTextInput>(null);
     useImperativeHandle(
@@ -42,7 +44,7 @@ const DefaultTextInput = React.forwardRef<TextInputRef, DefaultTextInputProps>(
         themeVariant={variant}
         multiline={variant === 'textarea' || nativeInputProps.multiline}
         ref={inputRef}
-        placeholderTextColor={theme.__hd__.textInput.colors.placeholder}
+        placeholderTextColor={theme.__hd__.textInput.colors.placeholder[state]}
       />
     );
   }
@@ -58,6 +60,8 @@ export interface InputComponentProps {
     inputProps: NativeTextInputProps,
     ref?: React.ForwardedRef<TextInputRef>
   ) => React.ReactNode;
+  /** Current state of the input (default, filled, disabled, readonly, error) */
+  state: State;
 }
 
 /**
@@ -83,7 +87,7 @@ export interface InputComponentProps {
  * @param props - The component props (see InputComponentProps interface for details)
  */
 const InputComponent = React.forwardRef<TextInputRef, InputComponentProps>(
-  ({ variant, nativeInputProps, renderInputValue }, ref) => {
+  ({ variant, nativeInputProps, renderInputValue, state }, ref) => {
     if (renderInputValue) {
       return <>{renderInputValue({ ...nativeInputProps }, ref)}</>;
     }
@@ -92,6 +96,7 @@ const InputComponent = React.forwardRef<TextInputRef, InputComponentProps>(
         variant={variant}
         nativeInputProps={nativeInputProps}
         ref={ref}
+        state={state}
       />
     );
   }

package/src/components/TextInput/InputRow.tsx

@@ -117,6 +117,7 @@ const InputRow = React.forwardRef<TextInputRef, InputRowProps>(
             }}
             renderInputValue={renderInputValue}
             ref={ref}
+            state={state}
           />
         </View>
       </StyledInputRow>

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

@@ -18,6 +18,7 @@ describe('InputComponent', () => {
           />
         )}
         ref={ref}
+        state="default"
       />
     );
     expect(wrapper.queryAllByTestId('custom-text-input')).toHaveLength(1);
@@ -31,6 +32,7 @@ describe('InputComponent', () => {
         variant="textarea"
         nativeInputProps={{ testID: 'text-input', value: 'text input value' }}
         ref={ref}
+        state="default"
       />
     );
     expect(wrapper.queryAllByTestId('text-input')).toHaveLength(1);

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

@@ -238,7 +238,7 @@ exports[`TextInput when user applies custom styling should respect user-provided
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -573,7 +573,7 @@ exports[`TextInput when user chooses textarea variant should provide multiline t
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -851,7 +851,7 @@ exports[`TextInput when user encounters a disabled field should display content
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#bfc1c5"
           style={
             [
               [
@@ -1178,7 +1178,7 @@ exports[`TextInput when user encounters a read-only field should display content
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -1540,7 +1540,7 @@ exports[`TextInput when user has entered text should show the input content and
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -1873,7 +1873,7 @@ exports[`TextInput when user interacts with placeholder text starting from empty
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -2172,7 +2172,7 @@ exports[`TextInput when user needs programmatic control should provide ref metho
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -2472,7 +2472,7 @@ exports[`TextInput when user provides default values starting with pre-filled co
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -2827,7 +2827,7 @@ exports[`TextInput when user provides default values when both default and contr
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -3210,7 +3210,7 @@ exports[`TextInput when user sees a loading state should show loading indicator
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -3562,7 +3562,7 @@ exports[`TextInput when user sees a required field should indicate the field is
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -3925,7 +3925,7 @@ exports[`TextInput when user sees a textarea with character count should display
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -4324,7 +4324,7 @@ exports[`TextInput when user sees a textarea with character count should hide ch
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -4688,7 +4688,7 @@ exports[`TextInput when user sees an empty input field should display label and
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -5020,7 +5020,7 @@ exports[`TextInput when user sees an error state should display error message to
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -5397,7 +5397,7 @@ exports[`TextInput when user sees helper text should display guidance text to as
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [
@@ -5704,7 +5704,7 @@ exports[`TextInput when user sees input with custom prefix and suffix elements s
           onChangeText={[Function]}
           onFocus={[Function]}
           placeholder=" "
-          placeholderTextColor="#4d6265"
+          placeholderTextColor="#001f23"
           style={
             [
               [

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -427,6 +427,9 @@ exports[`theme returns correct theme object 1`] = `
       "sizes": {
         "indicatorWidth": 15.692307692307693,
       },
+      "space": {
+        "dataCardContentPadding": 15.692307692307693,
+      },
     },
     "cardCarousel": {
       "colors": {
@@ -1528,7 +1531,13 @@ exports[`theme returns correct theme object 1`] = `
           "focused": "#001f23",
           "readonly": "#808f91",
         },
-        "placeholder": "#4d6265",
+        "placeholder": {
+          "default": "#001f23",
+          "disabled": "#bfc1c5",
+          "error": "#001f23",
+          "filled": "#001f23",
+          "readonly": "#001f23",
+        },
         "text": "#001f23",
       },
       "fontSizes": {
@@ -1559,6 +1568,7 @@ exports[`theme returns correct theme object 1`] = `
         "containerMarginTop": 7.846153846153847,
         "containerPadding": 15.692307692307693,
         "errorAndHelpTextContainerHorizontalPadding": 15.692307692307693,
+        "errorAndHelpTextContainerMarginTop": 1.9615384615384617,
         "errorAndHelpTextContainerPaddingTop": 1.9615384615384617,
         "errorContainerMarginRight": 3.9230769230769234,
         "errorMarginLeft": 3.9230769230769234,
@@ -1677,7 +1687,7 @@ exports[`theme returns correct theme object 1`] = `
       "colors": {
         "archived": "#606065",
         "body": "#001f23",
-        "danger": "#f46363",
+        "danger": "#cb300a",
         "disabled": "#bfc1c5",
         "inactive": "#808f91",
         "info": "#355bfb",