@hero-design/rn 7.22.3 → 7.23.0

package/src/components/Select/MultiSelect/index.tsx

@@ -85,6 +85,7 @@ function MultiSelect<V, T extends OptionType<V>>({
           }
           <View pointerEvents="none">
             <TextInput
+              {...inputProps}
               label={label}
               value={displayedValue}
               suffix="arrow-down"
@@ -92,7 +93,6 @@ function MultiSelect<V, T extends OptionType<V>>({
               error={error}
               editable={editable}
               disabled={disabled}
-              loading={inputProps?.loading}
               numberOfLines={numberOfLines}
               pointerEvents="none"
               style={style}

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

@@ -29,16 +29,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="default"
         >
           <View
             style={
@@ -52,6 +48,24 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeVariant="default"
+            />
             <View
               style={
                 Array [
@@ -1292,16 +1306,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -1315,6 +1325,24 @@ Array [
               ]
             }
           >
+            <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={
@@ -2700,16 +2728,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -2723,6 +2747,24 @@ Array [
               ]
             }
           >
+            <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={
@@ -4105,16 +4147,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#808f91",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="readonly"
         >
           <View
             style={
@@ -4128,6 +4166,24 @@ Array [
               ]
             }
           >
+            <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={
@@ -5527,16 +5583,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -5550,6 +5602,24 @@ Array [
               ]
             }
           >
+            <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/Select/SingleSelect/index.tsx

@@ -75,6 +75,7 @@ const SingleSelect = <V, T extends OptionType<V>>({
           }
           <View pointerEvents="none">
             <TextInput
+              {...inputProps}
               label={label}
               value={displayedValue}
               suffix="arrow-down"
@@ -82,7 +83,6 @@ const SingleSelect = <V, T extends OptionType<V>>({
               error={error}
               editable={editable}
               disabled={disabled}
-              loading={inputProps?.loading}
               numberOfLines={numberOfLines}
               pointerEvents="none"
               style={style}

package/src/components/Select/types.ts

@@ -81,9 +81,7 @@ export interface SelectProps<V, T extends OptionType<V>>
   /**
    * Props that are passed to TextInput.
    */
-  inputProps?: {
-    loading?: boolean;
-  };
+  inputProps?: Pick<TextInputProps, 'loading' | 'required'>;
   /**
    * Field label.
    */

package/src/components/TextInput/StyledTextInput.tsx

@@ -10,19 +10,9 @@ export type Variant =
   | 'readonly'
   | 'error';
 
-const StyledContainer = styled(View)<{
-  themeVariant: Variant;
-}>(({ theme, themeVariant }) => ({
+const StyledContainer = styled(View)(({ theme }) => ({
   width: '100%',
   marginVertical: theme.__hd__.textInput.space.containerMarginVertical,
-  borderWidth:
-    themeVariant === 'focused'
-      ? theme.__hd__.textInput.borderWidths.container.focused
-      : theme.__hd__.textInput.borderWidths.container.normal,
-  borderRadius: theme.__hd__.textInput.radii.container,
-  borderColor:
-    theme.__hd__.textInput.colors.borders[themeVariant] ??
-    theme.__hd__.textInput.colors.borders.default,
 }));
 
 const StyledLabelContainer = styled(View)(({ theme }) => ({
@@ -107,6 +97,20 @@ const StyledTextInput = styled(TextInput)(({ theme }) => ({
   marginHorizontal: theme.__hd__.textInput.space.inputHorizontalMargin,
 }));
 
+const StyledBorderBackDrop = styled(View)<{
+  themeVariant: Variant;
+}>(({ theme, themeVariant }) => ({
+  ...StyleSheet.absoluteFillObject,
+  borderWidth:
+    themeVariant === 'focused'
+      ? theme.__hd__.textInput.borderWidths.container.focused
+      : theme.__hd__.textInput.borderWidths.container.normal,
+  borderRadius: theme.__hd__.textInput.radii.container,
+  borderColor:
+    theme.__hd__.textInput.colors.borders[themeVariant] ??
+    theme.__hd__.textInput.colors.borders.default,
+}));
+
 const StyledTextInputContainer = styled(View)(({ theme }) => ({
   flexDirection: 'row',
   alignItems: 'center',
@@ -147,5 +151,6 @@ export {
   StyledTextInputAndLabelContainer,
   StyledLabelContainerInsideTextInput,
   StyledErrorAndHelpTextContainer,
+  StyledBorderBackDrop,
   StyledErrorAndMaxLengthContainer,
 };

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

@@ -10,7 +10,7 @@ import {
   StyledAsteriskLabel,
   StyledLabelContainer,
   StyledLabelInsideTextInput,
-  StyledContainer,
+  StyledBorderBackDrop,
 } from '../StyledTextInput';
 
 describe('Label', () => {
@@ -133,7 +133,7 @@ describe('StyledHelperText', () => {
   });
 });
 
-describe('StyledContainer', () => {
+describe('StyledBorderBackDrop', () => {
   it.each`
     themeVariant
     ${'default'}
@@ -146,7 +146,7 @@ describe('StyledContainer', () => {
     'renders correctly with themeVariant $themeVariant',
     ({ themeVariant }): void => {
       const { toJSON } = renderWithTheme(
-        <StyledContainer themeVariant={themeVariant} />
+        <StyledBorderBackDrop themeVariant={themeVariant} />
       );
 
       expect(toJSON()).toMatchSnapshot();

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

@@ -547,7 +547,7 @@ exports[`StyledAsteriskLabel renders correctly with themeVariant readonly 1`] =
 </Text>
 `;
 
-exports[`StyledContainer renders correctly with themeVariant default 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant default 1`] = `
 <View
   style={
     Array [
@@ -555,8 +555,11 @@ exports[`StyledContainer renders correctly with themeVariant default 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -565,7 +568,7 @@ exports[`StyledContainer renders correctly with themeVariant default 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant disabled 1`] = `
 <View
   style={
     Array [
@@ -573,8 +576,11 @@ exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
         "borderColor": "#bfc1c5",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -583,7 +589,7 @@ exports[`StyledContainer renders correctly with themeVariant disabled 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant error 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant error 1`] = `
 <View
   style={
     Array [
@@ -591,8 +597,11 @@ exports[`StyledContainer renders correctly with themeVariant error 1`] = `
         "borderColor": "#f46363",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -601,7 +610,7 @@ exports[`StyledContainer renders correctly with themeVariant error 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant filled 1`] = `
 <View
   style={
     Array [
@@ -609,8 +618,11 @@ exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -619,7 +631,7 @@ exports[`StyledContainer renders correctly with themeVariant filled 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant focused 1`] = `
 <View
   style={
     Array [
@@ -627,8 +639,11 @@ exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
         "borderColor": "#001f23",
         "borderRadius": 8,
         "borderWidth": 2,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]
@@ -637,7 +652,7 @@ exports[`StyledContainer renders correctly with themeVariant focused 1`] = `
 />
 `;
 
-exports[`StyledContainer renders correctly with themeVariant readonly 1`] = `
+exports[`StyledBorderBackDrop renders correctly with themeVariant readonly 1`] = `
 <View
   style={
     Array [
@@ -645,8 +660,11 @@ exports[`StyledContainer renders correctly with themeVariant readonly 1`] = `
         "borderColor": "#808f91",
         "borderRadius": 8,
         "borderWidth": 1,
-        "marginVertical": 8,
-        "width": "100%",
+        "bottom": 0,
+        "left": 0,
+        "position": "absolute",
+        "right": 0,
+        "top": 0,
       },
       undefined,
     ]