@hero-design/rn 7.22.0 → 7.22.2

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

@@ -26,12 +26,16 @@ exports[`TimePickerAndroid renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`TimePickerAndroid renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={

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

@@ -26,12 +26,16 @@ exports[`TimePickerIOS renders correctly 1`] = `
       style={
         Array [
           Object {
+            "borderColor": "#001f23",
+            "borderRadius": 8,
+            "borderWidth": 1,
             "marginVertical": 8,
             "width": "100%",
           },
           undefined,
         ]
       }
+      themeVariant="filled"
     >
       <View
         style={
@@ -45,24 +49,6 @@ exports[`TimePickerIOS renders correctly 1`] = `
           ]
         }
       >
-        <View
-          style={
-            Array [
-              Object {
-                "borderColor": "#001f23",
-                "borderRadius": 8,
-                "borderWidth": 1,
-                "bottom": 0,
-                "left": 0,
-                "position": "absolute",
-                "right": 0,
-                "top": 0,
-              },
-              undefined,
-            ]
-          }
-          themeVariant="filled"
-        />
         <View
           pointerEvents="none"
           style={
@@ -277,166 +263,146 @@ exports[`TimePickerIOS renders correctly 1`] = `
                 }
               }
             />
-            <RCTSafeAreaView
-              collapsable={false}
-              emulateUnlessSupported={true}
-              nativeID="animatedComponent"
+            <View
               onLayout={[Function]}
               style={
-                Object {
-                  "backgroundColor": "#ffffff",
-                  "borderTopLeftRadius": 16,
-                  "borderTopRightRadius": 16,
-                  "elevation": 10,
-                  "maxHeight": "94%",
-                  "shadowColor": "#001f23",
-                  "shadowOffset": Object {
-                    "height": 3,
-                    "width": 0,
-                  },
-                  "shadowOpacity": 0.27,
-                  "shadowRadius": 4.65,
-                  "transform": Array [
-                    Object {
-                      "scaleY": 0,
-                    },
+                Array [
+                  Array [
                     Object {
-                      "translateY": 0,
+                      "flex": 1,
+                      "flexDirection": "column-reverse",
                     },
+                    undefined,
                   ],
-                  "width": "100%",
-                }
+                  Object {
+                    "paddingBottom": 0,
+                  },
+                ]
               }
             >
-              <View
+              <RCTSafeAreaView
+                collapsable={false}
+                emulateUnlessSupported={true}
+                nativeID="animatedComponent"
                 style={
-                  Array [
-                    Object {
-                      "flexDirection": "row",
-                      "paddingHorizontal": 16,
-                      "paddingVertical": 8,
+                  Object {
+                    "backgroundColor": "#ffffff",
+                    "borderTopLeftRadius": 16,
+                    "borderTopRightRadius": 16,
+                    "elevation": 10,
+                    "maxHeight": "94%",
+                    "shadowColor": "#001f23",
+                    "shadowOffset": Object {
+                      "height": 3,
+                      "width": 0,
                     },
-                    undefined,
-                  ]
+                    "shadowOpacity": 0.27,
+                    "shadowRadius": 4.65,
+                    "transform": Array [
+                      Object {
+                        "scaleY": 1,
+                      },
+                      Object {
+                        "translateY": 0,
+                      },
+                    ],
+                    "width": "100%",
+                  }
                 }
               >
                 <View
                   style={
                     Array [
                       Object {
-                        "flex": 1,
-                        "justifyContent": "center",
+                        "flexDirection": "row",
+                        "paddingHorizontal": 16,
+                        "paddingVertical": 8,
                       },
                       undefined,
                     ]
                   }
                 >
-                  <Text
+                  <View
                     style={
                       Array [
                         Object {
-                          "color": "#001f23",
-                          "fontFamily": "BeVietnamPro-SemiBold",
-                          "fontSize": 16,
-                          "letterSpacing": 0.48,
-                          "lineHeight": 24,
+                          "flex": 1,
+                          "justifyContent": "center",
                         },
                         undefined,
                       ]
                     }
-                    themeFontSize="large"
-                    themeFontWeight="semi-bold"
-                    themeIntent="body"
-                  >
-                    Break time
-                  </Text>
-                </View>
-                <View
-                  style={
-                    Array [
-                      Object {
-                        "alignItems": "center",
-                        "height": 48,
-                        "justifyContent": "center",
-                        "marginLeft": 12,
-                        "width": 48,
-                      },
-                      undefined,
-                    ]
-                  }
-                >
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
-                    style={
-                      Object {
-                        "opacity": 1,
-                      }
-                    }
-                    testID="bottom-sheet-close-icon"
                   >
-                    <HeroIcon
-                      name="cancel"
+                    <Text
                       style={
                         Array [
                           Object {
                             "color": "#001f23",
-                            "fontSize": 20,
+                            "fontFamily": "BeVietnamPro-SemiBold",
+                            "fontSize": 16,
+                            "letterSpacing": 0.48,
+                            "lineHeight": 24,
                           },
                           undefined,
                         ]
                       }
-                      themeIntent="text"
-                      themeSize="small"
-                    />
+                      themeFontSize="large"
+                      themeFontWeight="semi-bold"
+                      themeIntent="body"
+                    >
+                      Break time
+                    </Text>
                   </View>
-                </View>
-              </View>
-              <View
-                style={
-                  Array [
-                    Object {
-                      "borderBottomColor": "#e8e9ea",
-                      "borderBottomWidth": 1,
-                      "maxWidth": "100%",
-                    },
-                    undefined,
-                  ]
-                }
-              />
-              <View
-                style={
-                  Array [
-                    Object {
-                      "height": 176,
-                    },
-                    undefined,
-                  ]
-                }
-              >
-                <Picker
-                  display="spinner"
-                  mode="time"
-                  onChange={[Function]}
-                  style={
-                    Object {
-                      "flex": 1,
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "alignItems": "center",
+                          "height": 48,
+                          "justifyContent": "center",
+                          "marginLeft": 12,
+                          "width": 48,
+                        },
+                        undefined,
+                      ]
                     }
-                  }
-                  testID="timePickerIOS"
-                  value={1995-12-17T03:24:00.000Z}
-                />
-              </View>
-              <View>
+                  >
+                    <View
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      nativeID="animatedComponent"
+                      onClick={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
+                      style={
+                        Object {
+                          "opacity": 1,
+                        }
+                      }
+                      testID="bottom-sheet-close-icon"
+                    >
+                      <HeroIcon
+                        name="cancel"
+                        style={
+                          Array [
+                            Object {
+                              "color": "#001f23",
+                              "fontSize": 20,
+                            },
+                            undefined,
+                          ]
+                        }
+                        themeIntent="text"
+                        themeSize="small"
+                      />
+                    </View>
+                  </View>
+                </View>
                 <View
                   style={
                     Array [
@@ -453,58 +419,95 @@ exports[`TimePickerIOS renders correctly 1`] = `
                   style={
                     Array [
                       Object {
-                        "alignItems": "center",
-                        "flexDirection": "row",
-                        "justifyContent": "flex-end",
-                        "minHeight": 64,
-                        "paddingHorizontal": 12,
-                        "paddingVertical": 8,
+                        "height": 176,
                       },
                       undefined,
                     ]
                   }
                 >
-                  <View
-                    accessible={true}
-                    collapsable={false}
-                    focusable={true}
-                    nativeID="animatedComponent"
-                    onClick={[Function]}
-                    onResponderGrant={[Function]}
-                    onResponderMove={[Function]}
-                    onResponderRelease={[Function]}
-                    onResponderTerminate={[Function]}
-                    onResponderTerminationRequest={[Function]}
-                    onStartShouldSetResponder={[Function]}
+                  <Picker
+                    display="spinner"
+                    mode="time"
+                    onChange={[Function]}
                     style={
                       Object {
-                        "opacity": 1,
+                        "flex": 1,
                       }
                     }
+                    testID="timePickerIOS"
+                    value={1995-12-17T03:24:00.000Z}
+                  />
+                </View>
+                <View>
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "borderBottomColor": "#e8e9ea",
+                          "borderBottomWidth": 1,
+                          "maxWidth": "100%",
+                        },
+                        undefined,
+                      ]
+                    }
+                  />
+                  <View
+                    style={
+                      Array [
+                        Object {
+                          "alignItems": "center",
+                          "flexDirection": "row",
+                          "justifyContent": "flex-end",
+                          "minHeight": 64,
+                          "paddingHorizontal": 12,
+                          "paddingVertical": 8,
+                        },
+                        undefined,
+                      ]
+                    }
                   >
-                    <Text
+                    <View
+                      accessible={true}
+                      collapsable={false}
+                      focusable={true}
+                      nativeID="animatedComponent"
+                      onClick={[Function]}
+                      onResponderGrant={[Function]}
+                      onResponderMove={[Function]}
+                      onResponderRelease={[Function]}
+                      onResponderTerminate={[Function]}
+                      onResponderTerminationRequest={[Function]}
+                      onStartShouldSetResponder={[Function]}
                       style={
-                        Array [
-                          Object {
-                            "color": "#8505a2",
-                            "fontFamily": "BeVietnamPro-SemiBold",
-                            "fontSize": 16,
-                            "letterSpacing": 0.48,
-                            "lineHeight": 24,
-                          },
-                          undefined,
-                        ]
+                        Object {
+                          "opacity": 1,
+                        }
                       }
-                      themeFontSize="large"
-                      themeFontWeight="semi-bold"
-                      themeIntent="primary"
                     >
-                      Confirm
-                    </Text>
+                      <Text
+                        style={
+                          Array [
+                            Object {
+                              "color": "#8505a2",
+                              "fontFamily": "BeVietnamPro-SemiBold",
+                              "fontSize": 16,
+                              "letterSpacing": 0.48,
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ]
+                        }
+                        themeFontSize="large"
+                        themeFontWeight="semi-bold"
+                        themeIntent="primary"
+                      >
+                        Confirm
+                      </Text>
+                    </View>
                   </View>
                 </View>
-              </View>
-            </RCTSafeAreaView>
+              </RCTSafeAreaView>
+            </View>
           </View>
         </View>
       </View>

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

@@ -424,8 +424,8 @@ Object {
     },
     "list": Object {
       "colors": Object {
-        "checkedListItemContainerBackground": "#f3e6f6",
-        "highlightedListItemContainerBackground": "#f3e6f6",
+        "checkedListItemContainerBackground": "#ECE8EF",
+        "highlightedListItemContainerBackground": "#ECE8EF",
         "leadingStatus": Object {
           "archived": "#bfc1c5",
           "danger": "#e3602a",
@@ -441,6 +441,7 @@ Object {
         "enabled": 1,
       },
       "radii": Object {
+        "basicItem": 4,
         "card": 8,
         "cardShadow": 4,
         "leadingStatus": 999,
@@ -914,6 +915,7 @@ Object {
     "__alpha__globalPrimary": "#001f23",
     "__alpha__globalSecondary1": "#4d6265",
     "__alpha__globalSecondary4": "#e6e9e9",
+    "__alpha__lightHighlightedSurface": "#ECE8EF",
     "__alpha__primary1": "#401960",
     "__alpha__primary2": "#c38cee",
     "__alpha__secondary1": "#795e90",

package/src/theme/components/list.ts

@@ -2,8 +2,10 @@ import type { GlobalTheme } from '../global';
 
 const getListTheme = (theme: GlobalTheme) => {
   const colors = {
-    checkedListItemContainerBackground: theme.colors.primaryBackground,
-    highlightedListItemContainerBackground: theme.colors.primaryBackground,
+    checkedListItemContainerBackground:
+      theme.colors.__alpha__lightHighlightedSurface,
+    highlightedListItemContainerBackground:
+      theme.colors.__alpha__lightHighlightedSurface,
     listItemContainerBackground: theme.colors.platformBackground,
     leadingStatus: {
       danger: theme.colors.dangerMediumLight,
@@ -23,6 +25,7 @@ const getListTheme = (theme: GlobalTheme) => {
 
   const radii = {
     card: theme.radii.medium,
+    basicItem: theme.radii.base,
     cardShadow: theme.radii.base,
     leadingStatus: theme.radii.rounded,
   };

package/src/theme/global/colors/swag.ts

@@ -73,6 +73,7 @@ const swagSystemPalette: SystemPalette = {
   __alpha__secondary2: swagPalette.scarletGumLight50,
   __alpha__secondary3: swagPalette.scarletGumLight80,
   __alpha__secondary4: swagPalette.scarletGumLight90,
+  __alpha__lightHighlightedSurface: '#ECE8EF',
 };
 
 export default swagSystemPalette;

package/src/theme/global/colors/types.ts

@@ -67,4 +67,5 @@ export type SystemPalette = {
   __alpha__secondary2: string;
   __alpha__secondary3: string;
   __alpha__secondary4: string;
+  __alpha__lightHighlightedSurface: string;
 };

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

@@ -1,4 +1,4 @@
-import { Animated, SafeAreaView, View } from 'react-native';
+import { Animated, KeyboardAvoidingView, KeyboardAvoidingViewProps, SafeAreaView, View } from 'react-native';
 import type { ViewProps } from 'react-native';
 declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps & {
     theme?: import("@emotion/react").Theme;
@@ -6,6 +6,12 @@ declare const StyledWrapper: import("@emotion/native").StyledComponent<ViewProps
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
+declare const StyledKeyboardAvoidingView: import("@emotion/native").StyledComponent<KeyboardAvoidingViewProps & {
+    theme?: import("@emotion/react").Theme;
+    as?: import("react").ElementType<any>;
+}, {}, {
+    ref?: import("react").Ref<KeyboardAvoidingView>;
+}>;
 declare const StyledBottomSheet: import("@emotion/native").StyledComponent<Animated.AnimatedProps<ViewProps & import("react").RefAttributes<SafeAreaView>> & {
     children?: import("react").ReactNode;
 } & {
@@ -42,4 +48,4 @@ declare const StyledIconWrapper: import("@emotion/native").StyledComponent<ViewP
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
-export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, };
+export { StyledWrapper, StyledHeaderWrapper, StyledHeader, StyledFooter, StyledIconWrapper, StyledBottomSheet, StyledBackdrop, StyledKeyboardAvoidingView, };

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

@@ -1,3 +1,4 @@
+import { KeyboardAvoidingViewProps } from 'react-native';
 import type { ReactElement, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 interface BottomSheetProps {
@@ -54,6 +55,10 @@ interface BottomSheetProps {
      * Testing id of the component.
      */
     testID?: string;
+    /**
+     * keyboardAvoidingView's props
+     * */
+    keyboardAvoidingViewProps?: KeyboardAvoidingViewProps;
 }
-declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, }: BottomSheetProps) => JSX.Element;
+declare const BottomSheet: ({ open, header, footer, children, onAnimationEnd, onOpen, onRequestClose, onDismiss, showCloseButton, hasBackdrop, showDivider, style, testID, keyboardAvoidingViewProps, }: BottomSheetProps) => JSX.Element;
 export default BottomSheet;

package/types/components/TextInput/StyledTextInput.d.ts

@@ -3,6 +3,8 @@ export declare type Variant = 'default' | 'filled' | 'focused' | 'disabled' | 'r
 declare const StyledContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
+} & {
+    themeVariant: Variant;
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
@@ -68,14 +70,6 @@ declare const StyledTextInput: import("@emotion/native").StyledComponent<import(
 }, {}, {
     ref?: import("react").Ref<TextInput>;
 }>;
-declare const StyledBorderBackDrop: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
-    theme?: import("@emotion/react").Theme;
-    as?: import("react").ElementType<any>;
-} & {
-    themeVariant: Variant;
-}, {}, {
-    ref?: import("react").Ref<View>;
-}>;
 declare const StyledTextInputContainer: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme;
     as?: import("react").ElementType<any>;
@@ -100,4 +94,4 @@ declare const StyledErrorAndMaxLengthContainer: import("@emotion/native").Styled
 }, {}, {
     ref?: import("react").Ref<View>;
 }>;
-export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledBorderBackDrop, StyledErrorAndMaxLengthContainer, };
+export { StyledTextInputContainer, StyledLabel, StyledLabelContainer, StyledAsteriskLabel, StyledAsteriskLabelInsideTextInput, StyledTextInput, StyledError, StyledMaxLengthMessage, StyledLabelInsideTextInput, StyledContainer, StyledErrorContainer, StyledHelperText, StyledTextInputAndLabelContainer, StyledLabelContainerInsideTextInput, StyledErrorAndHelpTextContainer, StyledErrorAndMaxLengthContainer, };

package/types/components/TextInput/index.d.ts

@@ -1,7 +1,7 @@
-import React from "react";
-import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from "react-native";
-import type { Variant } from "./StyledTextInput";
-import type { IconName } from "../Icon";
+import React from 'react';
+import type { TextInputProps as NativeTextInputProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import type { Variant } from './StyledTextInput';
+import type { IconName } from '../Icon';
 export interface TextInputProps extends NativeTextInputProps {
     /**
      * Field label.

package/types/theme/components/list.d.ts

@@ -20,6 +20,7 @@ declare const getListTheme: (theme: GlobalTheme) => {
     };
     radii: {
         card: number;
+        basicItem: number;
         cardShadow: number;
         leadingStatus: number;
     };

package/types/theme/global/colors/types.d.ts

@@ -61,4 +61,5 @@ export declare type SystemPalette = {
     __alpha__secondary2: string;
     __alpha__secondary3: string;
     __alpha__secondary4: string;
+    __alpha__lightHighlightedSurface: string;
 };

package/types/theme/global/index.d.ts

@@ -67,6 +67,7 @@ declare const getGlobalTheme: (scale: Scale, systemPalette: SystemPalette) => {
         __alpha__secondary2: string;
         __alpha__secondary3: string;
         __alpha__secondary4: string;
+        __alpha__lightHighlightedSurface: string;
     };
     fonts: import("./typography").Fonts;
     fontSizes: import("./typography").FontSizes;