@hero-design/rn 8.101.2-alpha.0 → 8.101.2-alpha.2

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -389,254 +389,271 @@ exports[`DatePickerIOS renders correctly 1`] = `
                     }
                   }
                 />
-                <RCTSafeAreaView
-                  collapsable={false}
+                <RNCSafeAreaView
+                  edges={
+                    {
+                      "bottom": "off",
+                      "left": "additive",
+                      "right": "additive",
+                      "top": "additive",
+                    }
+                  }
                   style={
                     {
-                      "backgroundColor": "#ffffff",
-                      "borderTopLeftRadius": 16,
-                      "borderTopRightRadius": 16,
                       "maxHeight": "94%",
-                      "transform": [
-                        {
-                          "scaleY": 1,
-                        },
-                        {
-                          "translateY": 0,
-                        },
-                      ],
-                      "width": "100%",
                     }
                   }
                 >
                   <View
+                    collapsable={false}
                     style={
-                      [
-                        {
-                          "flexDirection": "row",
-                          "paddingHorizontal": 16,
-                          "paddingVertical": 8,
-                        },
-                        undefined,
-                      ]
+                      {
+                        "backgroundColor": "#ffffff",
+                        "borderTopLeftRadius": 16,
+                        "borderTopRightRadius": 16,
+                        "maxHeight": "100%",
+                        "paddingBottom": 24,
+                        "transform": [
+                          {
+                            "scaleY": 1,
+                          },
+                          {
+                            "translateY": 0,
+                          },
+                        ],
+                        "width": "100%",
+                      }
                     }
                   >
                     <View
                       style={
                         [
                           {
-                            "flex": 1,
-                            "justifyContent": "center",
+                            "flexDirection": "row",
+                            "paddingHorizontal": 16,
+                            "paddingVertical": 8,
                           },
                           undefined,
                         ]
                       }
                     >
-                      <Text
-                        allowFontScaling={false}
+                      <View
                         style={
                           [
                             {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-SemiBold",
-                              "fontSize": 16,
-                              "letterSpacing": 0.24,
-                              "lineHeight": 24,
+                              "flex": 1,
+                              "justifyContent": "center",
                             },
                             undefined,
                           ]
                         }
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                        themeVariant="regular-bold"
-                      >
-                        Start date
-                      </Text>
-                    </View>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "flex-end",
-                            "height": 48,
-                            "justifyContent": "center",
-                            "marginLeft": 12,
-                            "width": 48,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "opacity": 1,
-                          }
-                        }
-                        testID="bottom-sheet-close-icon"
                       >
-                        <HeroIcon
-                          name="cancel"
+                        <Text
+                          allowFontScaling={false}
                           style={
                             [
                               {
                                 "color": "#001f23",
+                                "fontFamily": "BeVietnamPro-SemiBold",
                                 "fontSize": 16,
+                                "letterSpacing": 0.24,
+                                "lineHeight": 24,
                               },
                               undefined,
                             ]
                           }
-                          themeIntent="text"
-                          themeSize="xsmall"
-                        />
+                          themeIntent="body"
+                          themeTypeface="neutral"
+                          themeVariant="regular-bold"
+                        >
+                          Start date
+                        </Text>
                       </View>
-                    </View>
-                  </View>
-                  <View
-                    style={
-                      [
-                        {
-                          "height": 176,
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Picker
-                      display="spinner"
-                      locale="en-AU"
-                      mode="date"
-                      onChange={[Function]}
-                      style={
-                        {
-                          "flex": 1,
+                      <View
+                        style={
+                          [
+                            {
+                              "alignItems": "flex-end",
+                              "height": 48,
+                              "justifyContent": "center",
+                              "marginLeft": 12,
+                              "width": 48,
+                            },
+                            undefined,
+                          ]
                         }
-                      }
-                      testID="datePickerIOS"
-                      textColor="#001f23"
-                      value={1995-12-21T00:00:00.000Z}
-                    />
-                  </View>
-                  <View>
+                      >
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onClick={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            {
+                              "opacity": 1,
+                            }
+                          }
+                          testID="bottom-sheet-close-icon"
+                        >
+                          <HeroIcon
+                            name="cancel"
+                            style={
+                              [
+                                {
+                                  "color": "#001f23",
+                                  "fontSize": 16,
+                                },
+                                undefined,
+                              ]
+                            }
+                            themeIntent="text"
+                            themeSize="xsmall"
+                          />
+                        </View>
+                      </View>
+                    </View>
                     <View
                       style={
                         [
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "justifyContent": "flex-end",
-                            "paddingHorizontal": 12,
-                            "paddingVertical": 2,
+                            "height": 176,
                           },
                           undefined,
                         ]
                       }
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "disabled": false,
-                          }
-                        }
-                        accessibilityValue={
+                      <Picker
+                        display="spinner"
+                        locale="en-AU"
+                        mode="date"
+                        onChange={[Function]}
+                        style={
                           {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
+                            "flex": 1,
                           }
                         }
-                        accessible={true}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
+                        testID="datePickerIOS"
+                        textColor="#001f23"
+                        value={1995-12-21T00:00:00.000Z}
+                      />
+                    </View>
+                    <View>
+                      <View
                         style={
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderRadius": 4,
-                              "borderWidth": 0,
                               "flexDirection": "row",
-                              "height": 60,
-                              "justifyContent": "center",
-                              "padding": 12,
+                              "justifyContent": "flex-end",
+                              "paddingHorizontal": 12,
+                              "paddingVertical": 2,
                             },
                             undefined,
                           ]
                         }
                       >
-                        <Text
-                          allowFontScaling={false}
-                          disabled={false}
-                          ellipsizeMode="tail"
-                          numberOfLines={1}
+                        <View
+                          accessibilityState={
+                            {
+                              "disabled": false,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          focusable={true}
+                          onClick={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
                           style={
                             [
                               {
-                                "color": "#001f23",
-                                "fontFamily": "BeVietnamPro-SemiBold",
-                                "fontSize": 16,
-                                "letterSpacing": 0.24,
-                                "lineHeight": 24,
+                                "alignItems": "center",
+                                "backgroundColor": "transparent",
+                                "borderRadius": 4,
+                                "borderWidth": 0,
+                                "flexDirection": "row",
+                                "height": 60,
+                                "justifyContent": "center",
+                                "padding": 12,
                               },
-                              [
-                                {
-                                  "color": "#401960",
-                                  "flexShrink": 1,
-                                  "lineHeight": 22,
-                                  "textAlign": "center",
-                                  "textAlignVertical": "center",
-                                },
-                                undefined,
-                              ],
+                              undefined,
                             ]
                           }
-                          themeButtonVariant="text-primary"
-                          themeIntent="body"
-                          themeIsCompact={false}
-                          themeIsPressed={false}
-                          themeTypeface="neutral"
-                          themeVariant="regular-bold"
                         >
-                          Confirm
-                        </Text>
+                          <Text
+                            allowFontScaling={false}
+                            disabled={false}
+                            ellipsizeMode="tail"
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "color": "#001f23",
+                                  "fontFamily": "BeVietnamPro-SemiBold",
+                                  "fontSize": 16,
+                                  "letterSpacing": 0.24,
+                                  "lineHeight": 24,
+                                },
+                                [
+                                  {
+                                    "color": "#401960",
+                                    "flexShrink": 1,
+                                    "lineHeight": 22,
+                                    "textAlign": "center",
+                                    "textAlignVertical": "center",
+                                  },
+                                  undefined,
+                                ],
+                              ]
+                            }
+                            themeButtonVariant="text-primary"
+                            themeIntent="body"
+                            themeIsCompact={false}
+                            themeIsPressed={false}
+                            themeTypeface="neutral"
+                            themeVariant="regular-bold"
+                          >
+                            Confirm
+                          </Text>
+                        </View>
                       </View>
                     </View>
                   </View>
-                </RCTSafeAreaView>
+                </RNCSafeAreaView>
               </View>
             </View>
           </View>
@@ -1056,254 +1073,271 @@ exports[`DatePickerIOS renders correctly with custom locale 1`] = `
                     }
                   }
                 />
-                <RCTSafeAreaView
-                  collapsable={false}
+                <RNCSafeAreaView
+                  edges={
+                    {
+                      "bottom": "off",
+                      "left": "additive",
+                      "right": "additive",
+                      "top": "additive",
+                    }
+                  }
                   style={
                     {
-                      "backgroundColor": "#ffffff",
-                      "borderTopLeftRadius": 16,
-                      "borderTopRightRadius": 16,
                       "maxHeight": "94%",
-                      "transform": [
-                        {
-                          "scaleY": 1,
-                        },
-                        {
-                          "translateY": 0,
-                        },
-                      ],
-                      "width": "100%",
                     }
                   }
                 >
                   <View
+                    collapsable={false}
                     style={
-                      [
-                        {
-                          "flexDirection": "row",
-                          "paddingHorizontal": 16,
-                          "paddingVertical": 8,
-                        },
-                        undefined,
-                      ]
+                      {
+                        "backgroundColor": "#ffffff",
+                        "borderTopLeftRadius": 16,
+                        "borderTopRightRadius": 16,
+                        "maxHeight": "100%",
+                        "paddingBottom": 24,
+                        "transform": [
+                          {
+                            "scaleY": 1,
+                          },
+                          {
+                            "translateY": 0,
+                          },
+                        ],
+                        "width": "100%",
+                      }
                     }
                   >
                     <View
                       style={
                         [
                           {
-                            "flex": 1,
-                            "justifyContent": "center",
+                            "flexDirection": "row",
+                            "paddingHorizontal": 16,
+                            "paddingVertical": 8,
                           },
                           undefined,
                         ]
                       }
                     >
-                      <Text
-                        allowFontScaling={false}
+                      <View
                         style={
                           [
                             {
-                              "color": "#001f23",
-                              "fontFamily": "BeVietnamPro-SemiBold",
-                              "fontSize": 16,
-                              "letterSpacing": 0.24,
-                              "lineHeight": 24,
+                              "flex": 1,
+                              "justifyContent": "center",
                             },
                             undefined,
                           ]
                         }
-                        themeIntent="body"
-                        themeTypeface="neutral"
-                        themeVariant="regular-bold"
-                      >
-                        Start date
-                      </Text>
-                    </View>
-                    <View
-                      style={
-                        [
-                          {
-                            "alignItems": "flex-end",
-                            "height": 48,
-                            "justifyContent": "center",
-                            "marginLeft": 12,
-                            "width": 48,
-                          },
-                          undefined,
-                        ]
-                      }
-                    >
-                      <View
-                        accessibilityState={
-                          {
-                            "busy": undefined,
-                            "checked": undefined,
-                            "disabled": undefined,
-                            "expanded": undefined,
-                            "selected": undefined,
-                          }
-                        }
-                        accessibilityValue={
-                          {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
-                          }
-                        }
-                        accessible={true}
-                        collapsable={false}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
-                        style={
-                          {
-                            "opacity": 1,
-                          }
-                        }
-                        testID="bottom-sheet-close-icon"
                       >
-                        <HeroIcon
-                          name="cancel"
+                        <Text
+                          allowFontScaling={false}
                           style={
                             [
                               {
                                 "color": "#001f23",
+                                "fontFamily": "BeVietnamPro-SemiBold",
                                 "fontSize": 16,
+                                "letterSpacing": 0.24,
+                                "lineHeight": 24,
                               },
                               undefined,
                             ]
                           }
-                          themeIntent="text"
-                          themeSize="xsmall"
-                        />
+                          themeIntent="body"
+                          themeTypeface="neutral"
+                          themeVariant="regular-bold"
+                        >
+                          Start date
+                        </Text>
                       </View>
-                    </View>
-                  </View>
-                  <View
-                    style={
-                      [
-                        {
-                          "height": 176,
-                        },
-                        undefined,
-                      ]
-                    }
-                  >
-                    <Picker
-                      display="spinner"
-                      locale="zh-CN"
-                      mode="date"
-                      onChange={[Function]}
-                      style={
-                        {
-                          "flex": 1,
+                      <View
+                        style={
+                          [
+                            {
+                              "alignItems": "flex-end",
+                              "height": 48,
+                              "justifyContent": "center",
+                              "marginLeft": 12,
+                              "width": 48,
+                            },
+                            undefined,
+                          ]
                         }
-                      }
-                      testID="datePickerIOS"
-                      textColor="#001f23"
-                      value={1995-12-21T00:00:00.000Z}
-                    />
-                  </View>
-                  <View>
+                      >
+                        <View
+                          accessibilityState={
+                            {
+                              "busy": undefined,
+                              "checked": undefined,
+                              "disabled": undefined,
+                              "expanded": undefined,
+                              "selected": undefined,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          collapsable={false}
+                          focusable={true}
+                          onClick={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
+                          style={
+                            {
+                              "opacity": 1,
+                            }
+                          }
+                          testID="bottom-sheet-close-icon"
+                        >
+                          <HeroIcon
+                            name="cancel"
+                            style={
+                              [
+                                {
+                                  "color": "#001f23",
+                                  "fontSize": 16,
+                                },
+                                undefined,
+                              ]
+                            }
+                            themeIntent="text"
+                            themeSize="xsmall"
+                          />
+                        </View>
+                      </View>
+                    </View>
                     <View
                       style={
                         [
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "justifyContent": "flex-end",
-                            "paddingHorizontal": 12,
-                            "paddingVertical": 2,
+                            "height": 176,
                           },
                           undefined,
                         ]
                       }
                     >
-                      <View
-                        accessibilityState={
-                          {
-                            "disabled": false,
-                          }
-                        }
-                        accessibilityValue={
+                      <Picker
+                        display="spinner"
+                        locale="zh-CN"
+                        mode="date"
+                        onChange={[Function]}
+                        style={
                           {
-                            "max": undefined,
-                            "min": undefined,
-                            "now": undefined,
-                            "text": undefined,
+                            "flex": 1,
                           }
                         }
-                        accessible={true}
-                        focusable={true}
-                        onClick={[Function]}
-                        onResponderGrant={[Function]}
-                        onResponderMove={[Function]}
-                        onResponderRelease={[Function]}
-                        onResponderTerminate={[Function]}
-                        onResponderTerminationRequest={[Function]}
-                        onStartShouldSetResponder={[Function]}
+                        testID="datePickerIOS"
+                        textColor="#001f23"
+                        value={1995-12-21T00:00:00.000Z}
+                      />
+                    </View>
+                    <View>
+                      <View
                         style={
                           [
                             {
                               "alignItems": "center",
-                              "backgroundColor": "transparent",
-                              "borderRadius": 4,
-                              "borderWidth": 0,
                               "flexDirection": "row",
-                              "height": 60,
-                              "justifyContent": "center",
-                              "padding": 12,
+                              "justifyContent": "flex-end",
+                              "paddingHorizontal": 12,
+                              "paddingVertical": 2,
                             },
                             undefined,
                           ]
                         }
                       >
-                        <Text
-                          allowFontScaling={false}
-                          disabled={false}
-                          ellipsizeMode="tail"
-                          numberOfLines={1}
+                        <View
+                          accessibilityState={
+                            {
+                              "disabled": false,
+                            }
+                          }
+                          accessibilityValue={
+                            {
+                              "max": undefined,
+                              "min": undefined,
+                              "now": undefined,
+                              "text": undefined,
+                            }
+                          }
+                          accessible={true}
+                          focusable={true}
+                          onClick={[Function]}
+                          onResponderGrant={[Function]}
+                          onResponderMove={[Function]}
+                          onResponderRelease={[Function]}
+                          onResponderTerminate={[Function]}
+                          onResponderTerminationRequest={[Function]}
+                          onStartShouldSetResponder={[Function]}
                           style={
                             [
                               {
-                                "color": "#001f23",
-                                "fontFamily": "BeVietnamPro-SemiBold",
-                                "fontSize": 16,
-                                "letterSpacing": 0.24,
-                                "lineHeight": 24,
+                                "alignItems": "center",
+                                "backgroundColor": "transparent",
+                                "borderRadius": 4,
+                                "borderWidth": 0,
+                                "flexDirection": "row",
+                                "height": 60,
+                                "justifyContent": "center",
+                                "padding": 12,
                               },
-                              [
-                                {
-                                  "color": "#401960",
-                                  "flexShrink": 1,
-                                  "lineHeight": 22,
-                                  "textAlign": "center",
-                                  "textAlignVertical": "center",
-                                },
-                                undefined,
-                              ],
+                              undefined,
                             ]
                           }
-                          themeButtonVariant="text-primary"
-                          themeIntent="body"
-                          themeIsCompact={false}
-                          themeIsPressed={false}
-                          themeTypeface="neutral"
-                          themeVariant="regular-bold"
                         >
-                          Confirm
-                        </Text>
+                          <Text
+                            allowFontScaling={false}
+                            disabled={false}
+                            ellipsizeMode="tail"
+                            numberOfLines={1}
+                            style={
+                              [
+                                {
+                                  "color": "#001f23",
+                                  "fontFamily": "BeVietnamPro-SemiBold",
+                                  "fontSize": 16,
+                                  "letterSpacing": 0.24,
+                                  "lineHeight": 24,
+                                },
+                                [
+                                  {
+                                    "color": "#401960",
+                                    "flexShrink": 1,
+                                    "lineHeight": 22,
+                                    "textAlign": "center",
+                                    "textAlignVertical": "center",
+                                  },
+                                  undefined,
+                                ],
+                              ]
+                            }
+                            themeButtonVariant="text-primary"
+                            themeIntent="body"
+                            themeIsCompact={false}
+                            themeIsPressed={false}
+                            themeTypeface="neutral"
+                            themeVariant="regular-bold"
+                          >
+                            Confirm
+                          </Text>
+                        </View>
                       </View>
                     </View>
                   </View>
-                </RCTSafeAreaView>
+                </RNCSafeAreaView>
               </View>
             </View>
           </View>