@hero-design/rn 7.28.0 → 8.0.0-rc.0

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

@@ -258,7 +258,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -283,8 +283,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -378,13 +378,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -457,7 +457,14 @@ Array [
                 4,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -1271,8 +1278,8 @@ Array [
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
                     "minHeight": 64,
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 8,
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 16,
                   },
                   undefined,
                 ]
@@ -1585,7 +1592,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -1612,8 +1619,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -1709,13 +1716,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -1791,7 +1798,14 @@ Array [
                 0,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -1874,7 +1888,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -1929,7 +1942,9 @@ Array [
                               "color": "#401960",
                               "fontSize": 20,
                             },
-                            undefined,
+                            Object {
+                              "marginRight": 12,
+                            },
                           ]
                         }
                         themeIntent="primary"
@@ -2021,7 +2036,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2076,7 +2090,9 @@ Array [
                               "color": "#401960",
                               "fontSize": 20,
                             },
-                            undefined,
+                            Object {
+                              "marginRight": 12,
+                            },
                           ]
                         }
                         themeIntent="primary"
@@ -2168,7 +2184,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2290,7 +2305,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2412,7 +2426,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2534,7 +2547,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2657,7 +2669,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 0.38,
                         "padding": 16,
                       }
@@ -2778,8 +2789,8 @@ Array [
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
                     "minHeight": 64,
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 8,
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 16,
                   },
                   undefined,
                 ]
@@ -3091,7 +3102,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -3116,8 +3127,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -3211,13 +3222,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -3293,7 +3304,14 @@ Array [
                 0,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -3374,7 +3392,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3429,7 +3446,9 @@ Array [
                               "color": "#401960",
                               "fontSize": 20,
                             },
-                            undefined,
+                            Object {
+                              "marginRight": 12,
+                            },
                           ]
                         }
                         themeIntent="primary"
@@ -3519,7 +3538,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3574,7 +3592,9 @@ Array [
                               "color": "#401960",
                               "fontSize": 20,
                             },
-                            undefined,
+                            Object {
+                              "marginRight": 12,
+                            },
                           ]
                         }
                         themeIntent="primary"
@@ -3664,7 +3684,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3784,7 +3803,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3904,7 +3922,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -4024,7 +4041,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -4145,7 +4161,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 0.38,
                         "padding": 16,
                       }
@@ -4266,8 +4281,8 @@ Array [
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
                     "minHeight": 64,
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 8,
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 16,
                   },
                   undefined,
                 ]
@@ -4594,7 +4609,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -4621,8 +4636,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -4718,13 +4733,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -4800,7 +4815,14 @@ Array [
                 0,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -4883,7 +4905,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -4938,7 +4959,9 @@ Array [
                               "color": "#401960",
                               "fontSize": 20,
                             },
-                            undefined,
+                            Object {
+                              "marginRight": 12,
+                            },
                           ]
                         }
                         themeIntent="primary"
@@ -5030,7 +5053,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -5085,7 +5107,9 @@ Array [
                               "color": "#401960",
                               "fontSize": 20,
                             },
-                            undefined,
+                            Object {
+                              "marginRight": 12,
+                            },
                           ]
                         }
                         themeIntent="primary"
@@ -5177,7 +5201,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -5299,7 +5322,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -5421,7 +5443,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -5543,7 +5564,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -5666,7 +5686,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 0.38,
                         "padding": 16,
                       }
@@ -5787,8 +5806,8 @@ Array [
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
                     "minHeight": 64,
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 8,
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 16,
                   },
                   undefined,
                 ]
@@ -6100,7 +6119,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -6125,8 +6144,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -6220,13 +6239,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -6291,7 +6310,14 @@ Array [
                 3,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -6425,7 +6451,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -6643,7 +6668,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -6698,7 +6722,9 @@ Array [
                               "color": "#401960",
                               "fontSize": 20,
                             },
-                            undefined,
+                            Object {
+                              "marginRight": 12,
+                            },
                           ]
                         }
                         themeIntent="primary"
@@ -6778,7 +6804,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -6833,7 +6858,9 @@ Array [
                               "color": "#401960",
                               "fontSize": 20,
                             },
-                            undefined,
+                            Object {
+                              "marginRight": 12,
+                            },
                           ]
                         }
                         themeIntent="primary"
@@ -6913,8 +6940,8 @@ Array [
                     "flexDirection": "row",
                     "justifyContent": "flex-end",
                     "minHeight": 64,
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 8,
+                    "paddingHorizontal": 24,
+                    "paddingVertical": 16,
                   },
                   undefined,
                 ]

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

@@ -4,6 +4,7 @@ import type {
   TextInputProps as NativeTextInputProps,
 } from 'react-native';
 import { TouchableOpacity, View } from 'react-native';
+import { useDeprecation } from '../../../utils/hooks';
 import BottomSheet from '../../BottomSheet';
 import Box from '../../Box';
 import TextInput from '../../TextInput';
@@ -83,6 +84,21 @@ function MultiSelect<V, T extends OptionType<V>>({
     .map((opt) => opt.text)
     .join(', ');
 
+  useDeprecation(
+    "Select's onDimiss is deprecated and will be removed in the next major release. Please use onDismiss instead.",
+    onDimiss !== undefined
+  );
+
+  useDeprecation(
+    "Select's numberOfLines is deprecated and will be removed in the next major release. Please use inputProps.numberOfLines instead.",
+    numberOfLines !== undefined
+  );
+
+  useDeprecation(
+    "Select's inputProps.required is deprecated and will be removed in the next major release. Please use Select's required prop instead.",
+    inputProps?.required !== undefined
+  );
+
   useEffect(() => {
     setSelectingValue(value);
   }, [open]);

package/src/components/Select/SingleSelect/Option.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { ReactElement } from 'react';
-import { useTheme } from '../../../theme';
 import List from '../../List';
 
 const Option = ({
@@ -8,23 +7,24 @@ const Option = ({
   disabled = false,
   selected,
   onPress,
+  highlighted = false,
 }: {
   text: string | ReactElement;
   disabled?: boolean;
   selected: boolean;
   onPress: () => void;
+  highlighted?: boolean;
 }) => {
-  const theme = useTheme();
-  return (
-    <List.BasicItem
-      selected={selected}
-      disabled={disabled}
-      onPress={onPress}
-      title={text}
-      style={{
-        marginHorizontal: theme.__hd__.select.space.optionHorizontalMargin,
-      }}
-    />
+  const props = {
+    selected,
+    disabled,
+    onPress,
+    title: text,
+  };
+  return highlighted === true ? (
+    <List.Item {...props} />
+  ) : (
+    <List.BasicItem {...props} />
   );
 };
 

package/src/components/Select/SingleSelect/OptionList.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { SectionListRenderItemInfo, SectionList } from 'react-native';
-import StyledOptionList from '../StyledOptionList';
 import Option from './Option';
 import type { SingleSelectProps } from '.';
 import type { OptionType, SectionData, SectionType } from '../types';
+import { StyledOptionList } from './StyledSingleSelect';
 
 type OptionListProps<V, T extends OptionType<V>> = Pick<
   SingleSelectProps<V, T>,
@@ -49,12 +49,13 @@ const OptionList = <V, T extends OptionType<V>>({
         text={item.text}
         disabled={item.disabled}
         onPress={onItemPress}
+        highlighted={item.highlighted}
       />
     );
   };
 
   return (
-    <StyledOptionList
+    <StyledOptionList<V, T>
       keyExtractor={keyExtractor}
       loading={loading}
       onEndReached={onEndReached}

package/src/components/Select/SingleSelect/StyledSingleSelect.tsx

@@ -0,0 +1,6 @@
+import styled from '@emotion/native';
+import BaseOptionList from '../BaseOptionList';
+
+export const StyledOptionList = styled(BaseOptionList)(({ theme }) => ({
+  paddingBottom: theme.__hd__.select.space.singleSelectContentPaddingBottom,
+})) as typeof BaseOptionList;