npm - @hero-design/rn - Versions diffs - 7.27.1 → 8.0.0-rc.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (312) hide show

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

@@ -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 CHANGED Viewed

@@ -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,
             }

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

@@ -257,7 +257,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -282,8 +282,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -377,13 +377,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -456,7 +456,14 @@ Array [
                 4,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -1512,7 +1519,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -1539,8 +1546,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -1636,13 +1643,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -1718,7 +1725,14 @@ Array [
                 0,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -1801,7 +1815,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -1923,7 +1936,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2045,7 +2057,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2167,7 +2178,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2289,7 +2299,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2411,7 +2420,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -2534,7 +2542,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 0.38,
                         "padding": 16,
                       }
@@ -2894,7 +2901,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -2919,8 +2926,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -3014,13 +3021,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -3096,7 +3103,14 @@ Array [
                 0,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -3177,7 +3191,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3297,7 +3310,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3417,7 +3429,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3537,7 +3548,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3657,7 +3667,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3777,7 +3786,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -3898,7 +3906,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 0.38,
                         "padding": 16,
                       }
@@ -4275,7 +4282,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -4302,8 +4309,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -4399,13 +4406,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -4481,7 +4488,14 @@ Array [
                 0,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -4564,7 +4578,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -4686,7 +4699,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -4808,7 +4820,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -4930,7 +4941,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -5052,7 +5062,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -5174,7 +5183,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -5297,7 +5305,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 0.38,
                         "padding": 16,
                       }
@@ -5657,7 +5664,7 @@ Array [
           onStartShouldSetResponder={[Function]}
           style={
             Object {
-              "backgroundColor": "#001f23",
+              "backgroundColor": "#000000",
               "bottom": 0,
               "left": 0,
               "opacity": 0.48,
@@ -5682,8 +5689,8 @@ Array [
                 "height": 3,
                 "width": 0,
               },
-              "shadowOpacity": 0.27,
-              "shadowRadius": 4.65,
+              "shadowOpacity": 0.4,
+              "shadowRadius": 16,
               "transform": Array [
                 Object {
                   "scaleY": 1,
@@ -5777,13 +5784,13 @@ Array [
                     Array [
                       Object {
                         "color": "#001f23",
-                        "fontSize": 20,
+                        "fontSize": 16,
                       },
                       undefined,
                     ]
                   }
                   themeIntent="text"
-                  themeSize="small"
+                  themeSize="xsmall"
                 />
               </View>
             </View>
@@ -5848,7 +5855,14 @@ Array [
                 3,
               ]
             }
-            style={Object {}}
+            style={
+              Array [
+                Object {
+                  "paddingHorizontal": 12,
+                },
+                Object {},
+              ]
+            }
           >
             <View>
               <View
@@ -5982,7 +5996,6 @@ Array [
                         "backgroundColor": "#ece8ef",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -6200,7 +6213,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }
@@ -6310,7 +6322,6 @@ Array [
                         "backgroundColor": "#ffffff",
                         "borderRadius": 4,
                         "flexDirection": "row",
-                        "marginHorizontal": 12,
                         "opacity": 1,
                         "padding": 16,
                       }

package/src/components/Select/SingleSelect/index.tsx CHANGED Viewed

@@ -15,6 +15,7 @@ import {
   useKeyboard,
 } from '../helpers';
 import type { OptionType, SectionType, SelectProps } from '../types';
+import { useDeprecation } from '../../../utils/hooks';
 export interface SingleSelectProps<V, T extends OptionType<V> = OptionType<V>>
   extends SelectProps<V, T> {
@@ -64,6 +65,21 @@ const SingleSelect = <V, T extends OptionType<V>>({
   const flatOptions = toFlatOptions(options);
   const displayedValue = flatOptions.find((opt) => value === opt.value)?.text;
+  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
+  );
   return (
     <>
       <View

package/src/components/Select/StyledSelect.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { View } from 'react-native';
+import { SectionList, View } from 'react-native';
 import styled from '@emotion/native';
 import Typography from '../Typography';
@@ -20,4 +20,14 @@ const StyledSearchBar = styled(View)(({ theme }) => ({
   paddingBottom: theme.__hd__.select.space.searchBarBottomSpacing,
 }));
-export { SectionSpacer, OptionSpacer, FooterText, StyledSearchBar };
+const StyledSectionList = styled(SectionList)(({ theme }) => ({
+  paddingHorizontal: theme.__hd__.select.space.optionListHorizontalPadding,
+})) as unknown as typeof SectionList;
+export {
+  SectionSpacer,
+  OptionSpacer,
+  FooterText,
+  StyledSearchBar,
+  StyledSectionList,
+};

package/src/components/Select/types.ts CHANGED Viewed

@@ -13,6 +13,7 @@ export type OptionType<V> = {
   text: string;
   key?: string;
   disabled?: boolean;
+  highlighted?: boolean;
 };
 export type SectionType = { category: string };