@hero-design/rn 8.52.2-rc2.0 → 8.53.0

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

@@ -265,6 +265,7 @@ exports[`TimePickerIOS renders correct with hide suffix 1`] = `
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {
@@ -542,371 +543,391 @@ exports[`TimePickerIOS renders correctly 1`] = `
         </View>
       </View>
     </View>
-  </View>
-  <View
-    collapsable={false}
-    style={
-      {
-        "backgroundColor": "transparent",
-        "bottom": 0,
-        "left": 0,
-        "opacity": 0.4,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-      }
-    }
-  />
-  <View
-    collapsable={false}
-    style={
-      {
-        "bottom": 0,
-        "left": 0,
-        "opacity": 1,
-        "position": "absolute",
-        "right": 0,
-        "top": 0,
-        "transform": [
-          {
-            "translateY": 0,
-          },
-        ],
-      }
-    }
-  >
-    <View
-      pointerEvents="box-none"
+    <RCTModalHostView
+      animationType="none"
+      hardwareAccelerated={false}
+      identifier={0}
+      onDismiss={[Function]}
+      onRequestClose={[Function]}
+      onStartShouldSetResponder={[Function]}
+      presentationStyle="overFullScreen"
       style={
-        [
-          {
-            "bottom": 0,
-            "flexDirection": "column-reverse",
-            "left": 0,
-            "position": "absolute",
-            "right": 0,
-            "top": 0,
-          },
-          undefined,
-        ]
+        {
+          "position": "absolute",
+        }
       }
+      transparent={true}
+      visible={true}
     >
       <View
-        onLayout={[Function]}
+        collapsable={false}
         style={
           [
-            [
-              {
-                "flex": 1,
-                "flexDirection": "column-reverse",
-              },
-              undefined,
-            ],
             {
-              "paddingBottom": 0,
+              "flex": 1,
+              "left": 0,
+              "top": 0,
+            },
+            {
+              "backgroundColor": "transparent",
             },
           ]
         }
       >
         <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}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
+          pointerEvents="box-none"
           style={
             {
-              "backgroundColor": "#000000",
-              "bottom": 0,
-              "left": 0,
-              "opacity": 0.48,
-              "position": "absolute",
-              "right": 0,
-              "top": 0,
-            }
-          }
-        />
-        <RCTSafeAreaView
-          collapsable={false}
-          style={
-            {
-              "backgroundColor": "#ffffff",
-              "borderTopLeftRadius": 16,
-              "borderTopRightRadius": 16,
-              "elevation": 10,
-              "maxHeight": "94%",
-              "shadowColor": "#001f23",
-              "shadowOffset": {
-                "height": 3,
-                "width": 0,
-              },
-              "shadowOpacity": 0.4,
-              "shadowRadius": 16,
-              "transform": [
-                {
-                  "scaleY": 1,
-                },
-                {
-                  "translateY": 0,
-                },
-              ],
-              "width": "100%",
+              "flex": 1,
             }
           }
         >
           <View
+            collapsable={true}
+            pointerEvents="box-none"
             style={
-              [
-                {
-                  "flexDirection": "row",
-                  "paddingHorizontal": 16,
-                  "paddingVertical": 8,
-                },
-                undefined,
-              ]
+              {
+                "flex": 1,
+              }
             }
           >
             <View
+              pointerEvents="box-none"
               style={
                 [
                   {
-                    "flex": 1,
-                    "justifyContent": "center",
+                    "bottom": 0,
+                    "flexDirection": "column-reverse",
+                    "left": 0,
+                    "position": "absolute",
+                    "right": 0,
+                    "top": 0,
                   },
                   undefined,
                 ]
               }
             >
-              <Text
-                allowFontScaling={false}
+              <View
+                onLayout={[Function]}
                 style={
                   [
+                    [
+                      {
+                        "flex": 1,
+                        "flexDirection": "column-reverse",
+                      },
+                      undefined,
+                    ],
                     {
-                      "color": "#001f23",
-                      "fontFamily": "BeVietnamPro-SemiBold",
-                      "fontSize": 16,
-                      "letterSpacing": 0.24,
-                      "lineHeight": 24,
+                      "paddingBottom": 0,
                     },
-                    undefined,
                   ]
                 }
-                themeIntent="body"
-                themeTypeface="neutral"
-                themeVariant="regular-bold"
               >
-                Break time
-              </Text>
-            </View>
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "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,
+                <View
+                  accessibilityState={
+                    {
+                      "busy": undefined,
+                      "checked": undefined,
+                      "disabled": undefined,
+                      "expanded": undefined,
+                      "selected": undefined,
+                    }
                   }
-                }
-                accessible={true}
-                collapsable={false}
-                focusable={true}
-                onClick={[Function]}
-                onResponderGrant={[Function]}
-                onResponderMove={[Function]}
-                onResponderRelease={[Function]}
-                onResponderTerminate={[Function]}
-                onResponderTerminationRequest={[Function]}
-                onStartShouldSetResponder={[Function]}
-                style={
-                  {
-                    "opacity": 1,
+                  accessibilityValue={
+                    {
+                      "max": undefined,
+                      "min": undefined,
+                      "now": undefined,
+                      "text": undefined,
+                    }
                   }
-                }
-                testID="bottom-sheet-close-icon"
-              >
-                <HeroIcon
-                  name="cancel"
+                  accessible={true}
+                  collapsable={false}
+                  focusable={true}
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onResponderGrant={[Function]}
+                  onResponderMove={[Function]}
+                  onResponderRelease={[Function]}
+                  onResponderTerminate={[Function]}
+                  onResponderTerminationRequest={[Function]}
+                  onStartShouldSetResponder={[Function]}
                   style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontSize": 16,
-                      },
-                      undefined,
-                    ]
+                    {
+                      "backgroundColor": "#000000",
+                      "bottom": 0,
+                      "left": 0,
+                      "opacity": 0.48,
+                      "position": "absolute",
+                      "right": 0,
+                      "top": 0,
+                    }
                   }
-                  themeIntent="text"
-                  themeSize="xsmall"
                 />
-              </View>
-            </View>
-          </View>
-          <View
-            style={
-              [
-                {
-                  "height": 176,
-                },
-                undefined,
-              ]
-            }
-          >
-            <Picker
-              display="spinner"
-              mode="time"
-              onChange={[Function]}
-              style={
-                {
-                  "flex": 1,
-                }
-              }
-              testID="timePickerIOS"
-              textColor="#001f23"
-              value={1995-12-17T03:24:00.000Z}
-            />
-          </View>
-          <View>
-            <View
-              style={
-                [
-                  {
-                    "alignItems": "center",
-                    "flexDirection": "row",
-                    "justifyContent": "flex-end",
-                    "paddingHorizontal": 12,
-                    "paddingVertical": 2,
-                  },
-                  undefined,
-                ]
-              }
-            >
-              <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={
-                  [
-                    {
-                      "alignItems": "center",
-                      "backgroundColor": "transparent",
-                      "borderRadius": 4,
-                      "borderWidth": 0,
-                      "flexDirection": "row",
-                      "height": 60,
-                      "justifyContent": "center",
-                      "padding": 12,
-                    },
-                    undefined,
-                  ]
-                }
-              >
-                <Text
-                  allowFontScaling={false}
-                  disabled={false}
-                  ellipsizeMode="tail"
-                  numberOfLines={1}
+                <RCTSafeAreaView
+                  collapsable={false}
                   style={
-                    [
-                      {
-                        "color": "#001f23",
-                        "fontFamily": "BeVietnamPro-SemiBold",
-                        "fontSize": 16,
-                        "letterSpacing": 0.24,
-                        "lineHeight": 24,
+                    {
+                      "backgroundColor": "#ffffff",
+                      "borderTopLeftRadius": 16,
+                      "borderTopRightRadius": 16,
+                      "elevation": 10,
+                      "maxHeight": "94%",
+                      "shadowColor": "#001f23",
+                      "shadowOffset": {
+                        "height": 3,
+                        "width": 0,
                       },
-                      [
+                      "shadowOpacity": 0.4,
+                      "shadowRadius": 16,
+                      "transform": [
                         {
-                          "color": "#401960",
-                          "flexShrink": 1,
-                          "lineHeight": 22,
-                          "textAlign": "center",
+                          "scaleY": 1,
+                        },
+                        {
+                          "translateY": 0,
                         },
-                        undefined,
                       ],
-                    ]
+                      "width": "100%",
+                    }
                   }
-                  themeButtonVariant="text-primary"
-                  themeIntent="body"
-                  themeTypeface="neutral"
-                  themeVariant="regular-bold"
                 >
-                  Confirm
-                </Text>
+                  <View
+                    style={
+                      [
+                        {
+                          "flexDirection": "row",
+                          "paddingHorizontal": 16,
+                          "paddingVertical": 8,
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    <View
+                      style={
+                        [
+                          {
+                            "flex": 1,
+                            "justifyContent": "center",
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      <Text
+                        allowFontScaling={false}
+                        style={
+                          [
+                            {
+                              "color": "#001f23",
+                              "fontFamily": "BeVietnamPro-SemiBold",
+                              "fontSize": 16,
+                              "letterSpacing": 0.24,
+                              "lineHeight": 24,
+                            },
+                            undefined,
+                          ]
+                        }
+                        themeIntent="body"
+                        themeTypeface="neutral"
+                        themeVariant="regular-bold"
+                      >
+                        Break time
+                      </Text>
+                    </View>
+                    <View
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "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"
+                          style={
+                            [
+                              {
+                                "color": "#001f23",
+                                "fontSize": 16,
+                              },
+                              undefined,
+                            ]
+                          }
+                          themeIntent="text"
+                          themeSize="xsmall"
+                        />
+                      </View>
+                    </View>
+                  </View>
+                  <View
+                    style={
+                      [
+                        {
+                          "height": 176,
+                        },
+                        undefined,
+                      ]
+                    }
+                  >
+                    <Picker
+                      display="spinner"
+                      mode="time"
+                      onChange={[Function]}
+                      style={
+                        {
+                          "flex": 1,
+                        }
+                      }
+                      testID="timePickerIOS"
+                      textColor="#001f23"
+                      value={1995-12-17T03:24:00.000Z}
+                    />
+                  </View>
+                  <View>
+                    <View
+                      style={
+                        [
+                          {
+                            "alignItems": "center",
+                            "flexDirection": "row",
+                            "justifyContent": "flex-end",
+                            "paddingHorizontal": 12,
+                            "paddingVertical": 2,
+                          },
+                          undefined,
+                        ]
+                      }
+                    >
+                      <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={
+                          [
+                            {
+                              "alignItems": "center",
+                              "backgroundColor": "transparent",
+                              "borderRadius": 4,
+                              "borderWidth": 0,
+                              "flexDirection": "row",
+                              "height": 60,
+                              "justifyContent": "center",
+                              "padding": 12,
+                            },
+                            undefined,
+                          ]
+                        }
+                      >
+                        <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",
+                                },
+                                undefined,
+                              ],
+                            ]
+                          }
+                          themeButtonVariant="text-primary"
+                          themeIntent="body"
+                          themeTypeface="neutral"
+                          themeVariant="regular-bold"
+                        >
+                          Confirm
+                        </Text>
+                      </View>
+                    </View>
+                  </View>
+                </RCTSafeAreaView>
               </View>
             </View>
           </View>
-        </RCTSafeAreaView>
+        </View>
       </View>
-    </View>
+    </RCTModalHostView>
   </View>
   <View
     pointerEvents="box-none"
+    position="bottom"
     style={
       [
         {