@hero-design/rn 7.15.5-beta.0 → 7.16.0

package/src/components/Icon/IconList.ts

@@ -126,6 +126,7 @@ const IconList = [
   'print',
   'raising-hands',
   'reply',
+  'reply-arrow',
   'reschedule',
   'rostering',
   'save',

package/src/components/Icon/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1,5 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Icon render correctly with spin prop 1`] = `
+<View
+  collapsable={false}
+  nativeID="animatedComponent"
+  style={
+    Object {
+      "transform": Array [
+        Object {
+          "rotate": "0deg",
+        },
+      ],
+    }
+  }
+>
+  <HeroIcon
+    name="sync"
+    style={
+      Array [
+        Object {
+          "color": "#292a2b",
+          "fontSize": 24,
+        },
+        undefined,
+      ]
+    }
+    themeIntent="text"
+    themeSize="medium"
+  />
+</View>
+`;
+
 exports[`Icon renders correctly 1`] = `
 <HeroIcon
   name="home"

package/src/components/Icon/__tests__/index.spec.tsx

@@ -22,4 +22,9 @@ describe('Icon', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('render correctly with spin prop', () => {
+    const { toJSON } = renderWithTheme(<Icon icon="sync" spin />);
+    expect(toJSON()).toMatchSnapshot();
+  });
 });

package/src/components/Icon/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleProp, TextStyle } from 'react-native';
 import IconList from './IconList';
 import HeroIcon from './HeroIcon';
+import AnimatedIcon from './AnimatedIcon';
 
 export type IconName = typeof IconList[number];
 
@@ -26,6 +27,10 @@ export interface IconProps {
    * Size of the Icon.
    */
   size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Rotate icon with animation.
+   */
+  spin?: boolean;
   /**
    * Additional style.
    */
@@ -42,14 +47,24 @@ const Icon = ({
   size = 'medium',
   intent = 'text',
   testID,
-}: IconProps) => (
-  <HeroIcon
-    name={icon}
-    themeIntent={intent}
-    themeSize={size}
-    style={style}
-    testID={testID}
-  />
-);
+  spin = false,
+}: IconProps) =>
+  spin ? (
+    <AnimatedIcon
+      name={icon}
+      themeIntent={intent}
+      themeSize={size}
+      style={style}
+      testID={testID}
+    />
+  ) : (
+    <HeroIcon
+      name={icon}
+      themeIntent={intent}
+      themeSize={size}
+      style={style}
+      testID={testID}
+    />
+  );
 
 export default Icon;

package/src/components/RichTextEditor/index.tsx

@@ -1,8 +1,14 @@
-import RichTextEditor from './RichTextEditor';
-import MentionList from './MentionList';
+import { ToolbarButtonName } from './constants';
 import Toolbar from './EditorToolbar';
+import MentionList from './MentionList';
+import RichTextEditor, {
+  RichTextEditorProps,
+  RichTextEditorRef,
+} from './RichTextEditor';
 
 export default Object.assign(RichTextEditor, {
   MentionList,
   Toolbar,
 });
+
+export { RichTextEditorProps, RichTextEditorRef, ToolbarButtonName };

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

@@ -241,8 +241,9 @@ Array [
           }
         }
       />
-      <View
+      <RCTSafeAreaView
         collapsable={false}
+        emulateUnlessSupported={true}
         nativeID="animatedComponent"
         onLayout={[Function]}
         style={
@@ -277,22 +278,19 @@ Array [
             Array [
               Object {
                 "flexDirection": "row",
-                "minHeight": 64,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
               undefined,
             ]
           }
         >
           <View
-            adjacentIcon={true}
             style={
               Array [
                 Object {
                   "flex": 1,
                   "justifyContent": "center",
-                  "paddingLeft": 24,
-                  "paddingRight": 0,
-                  "paddingVertical": 8,
                 },
                 undefined,
               ]
@@ -323,8 +321,10 @@ Array [
               Array [
                 Object {
                   "alignItems": "center",
+                  "height": 48,
                   "justifyContent": "center",
-                  "width": 72,
+                  "marginLeft": 12,
+                  "width": 48,
                 },
                 undefined,
               ]
@@ -355,13 +355,13 @@ Array [
                   Array [
                     Object {
                       "color": "#292a2b",
-                      "fontSize": 24,
+                      "fontSize": 20,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="medium"
+                themeSize="small"
               />
             </View>
           </View>
@@ -901,7 +901,7 @@ Array [
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
                   "minHeight": 64,
-                  "paddingHorizontal": 24,
+                  "paddingHorizontal": 12,
                   "paddingVertical": 8,
                 },
                 undefined,
@@ -953,7 +953,7 @@ Array [
             </View>
           </View>
         </View>
-      </View>
+      </RCTSafeAreaView>
     </View>
   </Modal>,
 ]
@@ -1197,7 +1197,8 @@ Array [
           }
         }
       />
-      <View
+      <RCTSafeAreaView
+        emulateUnlessSupported={true}
         onLayout={[Function]}
         style={
           Object {
@@ -1231,22 +1232,19 @@ Array [
             Array [
               Object {
                 "flexDirection": "row",
-                "minHeight": 64,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
               undefined,
             ]
           }
         >
           <View
-            adjacentIcon={true}
             style={
               Array [
                 Object {
                   "flex": 1,
                   "justifyContent": "center",
-                  "paddingLeft": 24,
-                  "paddingRight": 0,
-                  "paddingVertical": 8,
                 },
                 undefined,
               ]
@@ -1277,8 +1275,10 @@ Array [
               Array [
                 Object {
                   "alignItems": "center",
+                  "height": 48,
                   "justifyContent": "center",
-                  "width": 72,
+                  "marginLeft": 12,
+                  "width": 48,
                 },
                 undefined,
               ]
@@ -1307,13 +1307,13 @@ Array [
                   Array [
                     Object {
                       "color": "#292a2b",
-                      "fontSize": 24,
+                      "fontSize": 20,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="medium"
+                themeSize="small"
               />
             </View>
           </View>
@@ -1853,7 +1853,7 @@ Array [
                   "flexDirection": "row",
                   "justifyContent": "flex-end",
                   "minHeight": 64,
-                  "paddingHorizontal": 24,
+                  "paddingHorizontal": 12,
                   "paddingVertical": 8,
                 },
                 undefined,
@@ -1903,7 +1903,7 @@ Array [
             </View>
           </View>
         </View>
-      </View>
+      </RCTSafeAreaView>
     </View>
   </Modal>,
 ]

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

@@ -241,8 +241,9 @@ Array [
           }
         }
       />
-      <View
+      <RCTSafeAreaView
         collapsable={false}
+        emulateUnlessSupported={true}
         nativeID="animatedComponent"
         onLayout={[Function]}
         style={
@@ -277,22 +278,19 @@ Array [
             Array [
               Object {
                 "flexDirection": "row",
-                "minHeight": 64,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
               undefined,
             ]
           }
         >
           <View
-            adjacentIcon={true}
             style={
               Array [
                 Object {
                   "flex": 1,
                   "justifyContent": "center",
-                  "paddingLeft": 24,
-                  "paddingRight": 0,
-                  "paddingVertical": 8,
                 },
                 undefined,
               ]
@@ -323,8 +321,10 @@ Array [
               Array [
                 Object {
                   "alignItems": "center",
+                  "height": 48,
                   "justifyContent": "center",
-                  "width": 72,
+                  "marginLeft": 12,
+                  "width": 48,
                 },
                 undefined,
               ]
@@ -355,13 +355,13 @@ Array [
                   Array [
                     Object {
                       "color": "#292a2b",
-                      "fontSize": 24,
+                      "fontSize": 20,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="medium"
+                themeSize="small"
               />
             </View>
           </View>
@@ -852,7 +852,7 @@ Array [
             </View>
           </View>
         </RCTScrollView>
-      </View>
+      </RCTSafeAreaView>
     </View>
   </Modal>,
 ]
@@ -1096,7 +1096,8 @@ Array [
           }
         }
       />
-      <View
+      <RCTSafeAreaView
+        emulateUnlessSupported={true}
         onLayout={[Function]}
         style={
           Object {
@@ -1130,22 +1131,19 @@ Array [
             Array [
               Object {
                 "flexDirection": "row",
-                "minHeight": 64,
+                "paddingHorizontal": 16,
+                "paddingVertical": 8,
               },
               undefined,
             ]
           }
         >
           <View
-            adjacentIcon={true}
             style={
               Array [
                 Object {
                   "flex": 1,
                   "justifyContent": "center",
-                  "paddingLeft": 24,
-                  "paddingRight": 0,
-                  "paddingVertical": 8,
                 },
                 undefined,
               ]
@@ -1176,8 +1174,10 @@ Array [
               Array [
                 Object {
                   "alignItems": "center",
+                  "height": 48,
                   "justifyContent": "center",
-                  "width": 72,
+                  "marginLeft": 12,
+                  "width": 48,
                 },
                 undefined,
               ]
@@ -1206,13 +1206,13 @@ Array [
                   Array [
                     Object {
                       "color": "#292a2b",
-                      "fontSize": 24,
+                      "fontSize": 20,
                     },
                     undefined,
                   ]
                 }
                 themeIntent="text"
-                themeSize="medium"
+                themeSize="small"
               />
             </View>
           </View>
@@ -1703,7 +1703,7 @@ Array [
             </View>
           </View>
         </RCTScrollView>
-      </View>
+      </RCTSafeAreaView>
     </View>
   </Modal>,
 ]

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -276,8 +276,9 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 }
               }
             />
-            <View
+            <RCTSafeAreaView
               collapsable={false}
+              emulateUnlessSupported={true}
               nativeID="animatedComponent"
               onLayout={[Function]}
               style={
@@ -311,22 +312,19 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   Array [
                     Object {
                       "flexDirection": "row",
-                      "minHeight": 64,
+                      "paddingHorizontal": 16,
+                      "paddingVertical": 8,
                     },
                     undefined,
                   ]
                 }
               >
                 <View
-                  adjacentIcon={true}
                   style={
                     Array [
                       Object {
                         "flex": 1,
                         "justifyContent": "center",
-                        "paddingLeft": 24,
-                        "paddingRight": 0,
-                        "paddingVertical": 8,
                       },
                       undefined,
                     ]
@@ -357,8 +355,10 @@ exports[`TimePickerIOS renders correctly 1`] = `
                     Array [
                       Object {
                         "alignItems": "center",
+                        "height": 48,
                         "justifyContent": "center",
-                        "width": 72,
+                        "marginLeft": 12,
+                        "width": 48,
                       },
                       undefined,
                     ]
@@ -389,13 +389,13 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         Array [
                           Object {
                             "color": "#292a2b",
-                            "fontSize": 24,
+                            "fontSize": 20,
                           },
                           undefined,
                         ]
                       }
                       themeIntent="text"
-                      themeSize="medium"
+                      themeSize="small"
                     />
                   </View>
                 </View>
@@ -456,7 +456,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                         "flexDirection": "row",
                         "justifyContent": "flex-end",
                         "minHeight": 64,
-                        "paddingHorizontal": 24,
+                        "paddingHorizontal": 12,
                         "paddingVertical": 8,
                       },
                       undefined,
@@ -503,7 +503,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   </View>
                 </View>
               </View>
-            </View>
+            </RCTSafeAreaView>
           </View>
         </View>
       </View>

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -135,12 +135,15 @@ Object {
         "radius": 4.65,
       },
       "sizes": Object {
-        "closeIconWidth": 72,
+        "closeIcon": 48,
         "sectionHeight": 64,
       },
       "space": Object {
-        "horizontalPadding": 24,
-        "verticalPadding": 8,
+        "closeIconMargin": 12,
+        "footerHorizontalPadding": 12,
+        "footerVerticalPadding": 8,
+        "headerWrapperHorizontalPadding": 16,
+        "headerWrapperVerticalPadding": 8,
       },
     },
     "button": Object {

package/src/theme/components/bottomSheet.ts

@@ -1,3 +1,4 @@
+import { scale } from '../../utils/scale';
 import { GlobalTheme } from '../global';
 
 const getBottomSheetTheme = (theme: GlobalTheme) => {
@@ -8,13 +9,16 @@ const getBottomSheetTheme = (theme: GlobalTheme) => {
   };
 
   const sizes = {
-    sectionHeight: 64,
-    closeIconWidth: 72,
+    sectionHeight: scale(64),
+    closeIcon: scale(48),
   };
 
   const space = {
-    horizontalPadding: theme.space.large,
-    verticalPadding: theme.space.small,
+    headerWrapperVerticalPadding: theme.space.small,
+    headerWrapperHorizontalPadding: theme.space.medium,
+    closeIconMargin: theme.space.smallMedium,
+    footerVerticalPadding: theme.space.small,
+    footerHorizontalPadding: theme.space.smallMedium,
   };
 
   const shadows = {

package/src/types.ts

@@ -3,15 +3,23 @@ import { IconName } from './components/Icon';
 import { SingleSelectProps, MultiSelectProps } from './components/Select';
 import { TabType } from './components/Tabs';
 import { TextInputProps } from './components/TextInput';
+import {
+  RichTextEditorRef,
+  RichTextEditorProps,
+  ToolbarButtonName,
+} from './components/RichTextEditor';
 
 import { Theme } from './theme';
 
 export type {
   BottomNavigationTabType,
   IconName,
-  SingleSelectProps,
   MultiSelectProps,
+  RichTextEditorProps,
+  RichTextEditorRef,
+  SingleSelectProps,
   TabType,
-  Theme,
   TextInputProps,
+  Theme,
+  ToolbarButtonName,
 };

package/types/components/BottomSheet/StyledBottomSheet.d.ts

@@ -1,11 +1,11 @@
-import { Animated, View, ViewProps } from 'react-native';
+import { Animated, SafeAreaView, View, ViewProps } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
-declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<View>> & {
+declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
     children?: import("react").ReactNode;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
@@ -26,8 +26,6 @@ declare const StyledHeaderWrapper: import("@emotion/native").StyledComponent<Vie
 declare const StyledHeader: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
-} & {
-    adjacentIcon: boolean;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;