@hero-design/rn 7.28.0 → 7.29.0

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;

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

@@ -19,7 +19,6 @@ exports[`Option renders correctly 1`] = `
       "backgroundColor": "#ece8ef",
       "borderRadius": 4,
       "flexDirection": "row",
-      "marginHorizontal": 12,
       "opacity": 1,
       "padding": 16,
     }

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

@@ -61,7 +61,14 @@ exports[`OptionList render isLoading correctly 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -197,7 +204,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -417,7 +423,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -529,7 +534,6 @@ exports[`OptionList render isLoading correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -829,7 +833,14 @@ exports[`OptionList renders correctly 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -965,7 +976,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1185,7 +1195,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1297,7 +1306,6 @@ exports[`OptionList renders correctly 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1437,7 +1445,14 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -1573,7 +1588,6 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1793,7 +1807,6 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -1905,7 +1918,6 @@ exports[`OptionList trigger onPress correctly on select new value 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2045,7 +2057,14 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
       3,
     ]
   }
-  style={Object {}}
+  style={
+    Array [
+      Object {
+        "paddingHorizontal": 12,
+      },
+      Object {},
+    ]
+  }
 >
   <View>
     <View
@@ -2181,7 +2200,6 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               "backgroundColor": "#ece8ef",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2401,7 +2419,6 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }
@@ -2513,7 +2530,6 @@ exports[`OptionList trigger onPress correctly on unselect current value 1`] = `
               "backgroundColor": "#ffffff",
               "borderRadius": 4,
               "flexDirection": "row",
-              "marginHorizontal": 12,
               "opacity": 1,
               "padding": 16,
             }