@hero-design/rn 7.22.3 → 7.23.0

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

@@ -6,16 +6,12 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="filled"
 >
   <View
     style={
@@ -29,6 +25,24 @@ exports[`TextInput defaultValue TextInput is idle renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
     <View
       pointerEvents="none"
       style={
@@ -246,16 +260,12 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="filled"
 >
   <View
     style={
@@ -269,6 +279,24 @@ exports[`TextInput defaultValue default Value and Value renders correctly with 2
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
     <View
       pointerEvents="none"
       style={
@@ -487,9 +515,6 @@ exports[`TextInput disabled renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#bfc1c5",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
@@ -497,7 +522,6 @@ exports[`TextInput disabled renders correctly 1`] = `
     ]
   }
   testID="disabled-text-input"
-  themeVariant="disabled"
 >
   <View
     style={
@@ -511,6 +535,24 @@ exports[`TextInput disabled renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#bfc1c5",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="disabled"
+    />
     <View
       pointerEvents="none"
       style={
@@ -654,16 +696,12 @@ exports[`TextInput error renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#f46363",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="error"
 >
   <View
     style={
@@ -677,6 +715,24 @@ exports[`TextInput error renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#f46363",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="error"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -898,16 +954,12 @@ exports[`TextInput filled renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="filled"
 >
   <View
     style={
@@ -921,6 +973,24 @@ exports[`TextInput filled renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="filled"
+    />
     <View
       pointerEvents="none"
       style={
@@ -1069,16 +1139,12 @@ exports[`TextInput helper text renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="default"
 >
   <View
     style={
@@ -1092,6 +1158,24 @@ exports[`TextInput helper text renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -1279,9 +1363,6 @@ exports[`TextInput idle renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
@@ -1291,7 +1372,6 @@ exports[`TextInput idle renders correctly 1`] = `
     ]
   }
   testID="idle-text-input"
-  themeVariant="default"
 >
   <View
     style={
@@ -1305,6 +1385,24 @@ exports[`TextInput idle renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -1457,16 +1555,12 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="default"
 >
   <View
     style={
@@ -1480,6 +1574,24 @@ exports[`TextInput idle with suffix and prefix are React Element renders correct
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="eye-circle"
       style={
@@ -1658,16 +1770,12 @@ exports[`TextInput loading renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#808f91",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="readonly"
 >
   <View
     style={
@@ -1681,6 +1789,24 @@ exports[`TextInput loading renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#808f91",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="readonly"
+    />
     <View
       style={
         Array [
@@ -1801,16 +1927,12 @@ exports[`TextInput max length renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#f46363",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="error"
 >
   <View
     style={
@@ -1824,6 +1946,24 @@ exports[`TextInput max length renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#f46363",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="error"
+    />
     <View
       pointerEvents="none"
       style={
@@ -2060,16 +2200,12 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="default"
 >
   <View
     style={
@@ -2083,6 +2219,24 @@ exports[`TextInput placeholder TextInput is idle renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="dollar-sign"
       style={
@@ -2270,16 +2424,12 @@ exports[`TextInput readonly renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#808f91",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="readonly"
 >
   <View
     style={
@@ -2293,6 +2443,24 @@ exports[`TextInput readonly renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#808f91",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="readonly"
+    />
     <View
       pointerEvents="none"
       style={
@@ -2466,16 +2634,12 @@ exports[`TextInput required renders correctly 1`] = `
   style={
     Array [
       Object {
-        "borderColor": "#001f23",
-        "borderRadius": 8,
-        "borderWidth": 1,
         "marginVertical": 8,
         "width": "100%",
       },
       undefined,
     ]
   }
-  themeVariant="default"
 >
   <View
     style={
@@ -2489,6 +2653,24 @@ exports[`TextInput required renders correctly 1`] = `
       ]
     }
   >
+    <View
+      style={
+        Array [
+          Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "bottom": 0,
+            "left": 0,
+            "position": "absolute",
+            "right": 0,
+            "top": 0,
+          },
+          undefined,
+        ]
+      }
+      themeVariant="default"
+    />
     <HeroIcon
       name="dollar-sign"
       style={

package/src/components/TextInput/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import type {
   TextInputProps as NativeTextInputProps,
@@ -22,12 +22,14 @@ import {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 } from './StyledTextInput';
 import Icon from '../Icon';
 import { useTheme } from '../../theme';
 import type { Variant } from './StyledTextInput';
 import type { IconName } from '../Icon';
+import { omit, pick } from '../../utils/helpers';
 
 export interface TextInputProps extends NativeTextInputProps {
   /**
@@ -169,10 +171,25 @@ const TextInput = ({
 
   const theme = useTheme();
 
+  const { borderStyle, textStyleWithoutBorderStyle } = useMemo(() => {
+    if (!textStyle) {
+      return {};
+    }
+
+    const flattenTextStyle = StyleSheet.flatten(textStyle);
+    const borderKeys = Object.keys(flattenTextStyle).filter((key) => {
+      return key.startsWith('border');
+    });
+    return {
+      borderStyle: pick(borderKeys, flattenTextStyle),
+      textStyleWithoutBorderStyle: omit(borderKeys, flattenTextStyle),
+    };
+  }, [textStyle]);
+
   const nativeInputProps: NativeTextInputProps = {
     style: StyleSheet.flatten([
       { color: theme.__hd__.textInput.colors.text },
-      textStyle,
+      textStyleWithoutBorderStyle,
     ]),
     testID: 'text-input',
     accessibilityState: {
@@ -201,14 +218,14 @@ const TextInput = ({
 
   return (
     <StyledContainer
+      style={style}
       pointerEvents={
         variant === 'disabled' || variant === 'readonly' ? 'none' : 'auto'
       }
       testID={testID}
-      style={style}
-      themeVariant={variant}
     >
       <StyledTextInputContainer>
+        <StyledBorderBackDrop themeVariant={variant} style={borderStyle} />
         {(isFocused || (label && !isEmptyValue)) && (
           <StyledLabelContainer pointerEvents="none">
             {required && (

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerAndroid.spec.tsx.snap

@@ -26,16 +26,12 @@ exports[`TimePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#001f23",
-            "borderRadius": 8,
-            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
-      themeVariant="filled"
     >
       <View
         style={
@@ -49,6 +45,24 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           ]
         }
       >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
+          }
+          themeVariant="filled"
+        />
         <View
           pointerEvents="none"
           style={

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -26,16 +26,12 @@ exports[`TimePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
-            "borderColor": "#001f23",
-            "borderRadius": 8,
-            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
-      themeVariant="filled"
     >
       <View
         style={
@@ -49,6 +45,24 @@ exports[`TimePickerIOS renders correctly 1`] = `
           ]
         }
       >
+        <View
+          style={
+            Array [
+              Object {
+                "borderColor": "#001f23",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "bottom": 0,
+                "left": 0,
+                "position": "absolute",
+                "right": 0,
+                "top": 0,
+              },
+              undefined,
+            ]
+          }
+          themeVariant="filled"
+        />
         <View
           pointerEvents="none"
           style={

package/src/index.ts

@@ -4,6 +4,7 @@ import theme, {
   useTheme,
   swagSystemPalette,
   workSystemPalette,
+  jobsSystemPalette,
 } from './theme';
 import { scale } from './utils/scale';
 
@@ -43,6 +44,7 @@ import TimePicker from './components/TimePicker';
 import Toast from './components/Toast';
 import Toolbar from './components/Toolbar';
 import Typography from './components/Typography';
+import RefreshControl from './components/RefreshControl';
 import RichTextEditor from './components/RichTextEditor';
 
 export {
@@ -53,6 +55,7 @@ export {
   ThemeProvider,
   swagSystemPalette,
   workSystemPalette,
+  jobsSystemPalette,
   Accordion,
   Alert,
   Avatar,
@@ -89,6 +92,7 @@ export {
   Toast,
   Toolbar,
   Typography,
+  RefreshControl,
   RichTextEditor,
 };