@hero-design/rn 7.22.3 → 7.24.0

package/src/components/Select/MultiSelect/__tests__/__snapshots__/OptionList.spec.tsx.snap

@@ -727,12 +727,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "backgroundColor": "#001f23",
                         "borderRadius": 999,
                         "height": 16,
-                        "opacity": 1,
+                        "opacity": 0.9,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="topLeft"
                   themeSize="medium"
                 />
@@ -746,12 +747,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.75,
+                        "opacity": 0.675,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="topRight"
                   themeSize="medium"
                 />
@@ -780,12 +782,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "backgroundColor": "#001f23",
                         "borderRadius": 999,
                         "height": 16,
-                        "opacity": 0.5,
+                        "opacity": 0.45,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="bottomLeft"
                   themeSize="medium"
                 />
@@ -799,12 +802,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.25,
+                        "opacity": 0.225,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="bottomRight"
                   themeSize="medium"
                 />

package/src/components/Select/MultiSelect/__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,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="default"
+            />
             <View
               style={
                 Array [
@@ -1364,16 +1379,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -1387,6 +1398,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -2895,16 +2925,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -2918,6 +2944,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -4421,16 +4466,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#808f91",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="readonly"
         >
           <View
             style={
@@ -4444,6 +4485,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#808f91",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="readonly"
+            />
             <View
               pointerEvents="none"
               style={
@@ -5966,16 +6026,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -5989,6 +6045,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={

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__/OptionList.spec.tsx.snap

@@ -702,12 +702,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "backgroundColor": "#001f23",
                         "borderRadius": 999,
                         "height": 16,
-                        "opacity": 1,
+                        "opacity": 0.9,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="topLeft"
                   themeSize="medium"
                 />
@@ -721,12 +722,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.75,
+                        "opacity": 0.675,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="topRight"
                   themeSize="medium"
                 />
@@ -755,12 +757,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "backgroundColor": "#001f23",
                         "borderRadius": 999,
                         "height": 16,
-                        "opacity": 0.5,
+                        "opacity": 0.45,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="bottomLeft"
                   themeSize="medium"
                 />
@@ -774,12 +777,13 @@ exports[`OptionList render isLoading correctly 1`] = `
                         "borderRadius": 999,
                         "height": 16,
                         "marginLeft": 8,
-                        "opacity": 0.25,
+                        "opacity": 0.225,
                         "width": 16,
                       },
                       Object {},
                     ]
                   }
+                  themeIntent="primary"
                   themePosition="bottomRight"
                   themeSize="medium"
                 />

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,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="default"
+            />
             <View
               style={
                 Array [
@@ -1292,16 +1307,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -1315,6 +1326,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -2700,16 +2730,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -2723,6 +2749,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="filled"
+            />
             <View
               pointerEvents="none"
               style={
@@ -4105,16 +4150,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#808f91",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="readonly"
         >
           <View
             style={
@@ -4128,6 +4169,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#808f91",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              themeVariant="readonly"
+            />
             <View
               pointerEvents="none"
               style={
@@ -5527,16 +5587,12 @@ Array [
           style={
             Array [
               Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
                 "marginVertical": 8,
                 "width": "100%",
               },
               undefined,
             ]
           }
-          themeVariant="filled"
         >
           <View
             style={
@@ -5550,6 +5606,25 @@ Array [
               ]
             }
           >
+            <View
+              style={
+                Array [
+                  Object {
+                    "borderColor": "#001f23",
+                    "borderRadius": 8,
+                    "borderWidth": 1,
+                    "bottom": 0,
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
+                  },
+                  undefined,
+                ]
+              }
+              themeFocused={false}
+              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/Spinner/AnimatedSpinner.tsx

@@ -7,7 +7,13 @@ const AnimatedRow = Animated.createAnimatedComponent(StyledSpinnerRow);
 
 const AnimatedDot = Animated.createAnimatedComponent(StyledSpinnerDot);
 
-const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
+const AnimatedSpinner = ({
+  size,
+  intent,
+}: {
+  size: 'small' | 'medium';
+  intent: 'primary' | 'inverted';
+}) => {
   const rotateAnimation = useRef<Animated.Value>(new Animated.Value(0));
 
   useEffect(() => {
@@ -32,6 +38,15 @@ const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
     outputRange: ['0deg', '360deg'],
   });
 
+  const rowProps = {
+    themeSize: size,
+  };
+
+  const dotProps = {
+    themeSize: size,
+    themeIntent: intent,
+  };
+
   return (
     <Animated.View
       style={StyleSheet.flatten([
@@ -40,13 +55,13 @@ const AnimatedSpinner = ({ size = 'medium' }: { size: 'small' | 'medium' }) => {
         },
       ])}
     >
-      <AnimatedRow themePosition="top" themeSize={size}>
-        <AnimatedDot themePosition="topLeft" themeSize={size} />
-        <AnimatedDot themePosition="topRight" themeSize={size} />
+      <AnimatedRow themePosition="top" {...rowProps}>
+        <AnimatedDot themePosition="topLeft" {...dotProps} />
+        <AnimatedDot themePosition="topRight" {...dotProps} />
       </AnimatedRow>
-      <AnimatedRow themePosition="bottom" themeSize={size}>
-        <AnimatedDot themePosition="bottomLeft" themeSize={size} />
-        <AnimatedDot themePosition="bottomRight" themeSize={size} />
+      <AnimatedRow themePosition="bottom" {...rowProps}>
+        <AnimatedDot themePosition="bottomLeft" {...dotProps} />
+        <AnimatedDot themePosition="bottomRight" {...dotProps} />
       </AnimatedRow>
     </Animated.View>
   );

package/src/components/Spinner/StyledSpinner.tsx

@@ -25,30 +25,35 @@ const StyledSpinnerRow = styled(View)<{
 const StyledSpinnerDot = styled(View)<{
   themePosition: 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
   themeSize: 'small' | 'medium';
-}>(({ themePosition, themeSize = 'medium', theme }) => {
+  themeIntent: 'primary' | 'inverted';
+}>(({ themePosition, themeSize, themeIntent, theme }) => {
   const themeStyling = () => {
+    const backgroundColor =
+      theme.__hd__.spinner.colors.dot[themeIntent];
+    const dotPadding = theme.__hd__.spinner.space.spinnerDotPadding[themeSize];
+
     switch (themePosition) {
       case 'topLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 1,
+          backgroundColor,
+          opacity: 0.9,
         };
       case 'topRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.75,
+          marginLeft: dotPadding,
+          backgroundColor,
+          opacity: 0.675,
         };
       case 'bottomLeft':
         return {
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.5,
+          backgroundColor,
+          opacity: 0.45,
         };
       case 'bottomRight':
         return {
-          marginLeft: theme.__hd__.spinner.space.spinnerDotPadding[themeSize],
-          backgroundColor: theme.__hd__.spinner.colors.dot,
-          opacity: 0.25,
+          marginLeft: dotPadding,
+          backgroundColor,
+          opacity: 0.225,
         };
     }
   };